@charset "UTF-8";
@import url(./fonts.css);
body {
  font-family: "Pretendard", sans-serif;
}

* {
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
}

/* 섹션 타이틀 공통 행간. 단위 없는 값이라 폰트 크기가 달라져도 비율이 유지된다.
   개별 섹션에서 rem/px 로 다시 선언하면 크기별로 비율이 어긋나므로 하지 말 것.
   전체 타이틀 행간은 이 변수 하나로 조절한다 */
:root {
  --title-line-height: 1.2;
  /* 본문 공통 스타일. index 히어로의 sub-txt 를 기준으로 사이트 전체를 통일한다.
     line-height 는 em 이라 폰트 크기가 달라도 비율이 유지된다 */
  --body-font-size: 1.1875rem;
  --body-line-height: 1.5em;
  /* index 카드 본문(.card-desc)과 동일한 본문 톤 */
  --body-color: #666666;
  --body-weight: 400;
  /* ad-tech tech02(애디렉트/아이티브/에이비아이) 본문 스펙.
     careers 의 사무실 전경 블록이 같은 값을 써야 하므로 한 군데에서만 정의한다.
     굵기만 문단 역할에 따라 bold(강조) / 300(일반) 으로 갈린다 */
  --tech-body-font-size: 1rem;
  --tech-body-line-height: 1.8em;
  --tech-body-color: #333333;
}

/* ad-tech tech02(애디렉트/아이티브/에이비아이)와 careers 사무실 전경이 쓰는 본문 블록.
   두 곳이 "같은 값"이 아니라 아예 "같은 규칙"을 쓰게 해서 어긋날 여지를 없앤다.
   블록 안의 <p> 는 여백 없이 line-height 로만 줄 간격을 만들고,
   첫 줄처럼 강조가 필요한 문단만 .font-weight-bold 를 붙인다 */
.tech-body {
  font-weight: 300;
  font-size: var(--tech-body-font-size);
  line-height: var(--tech-body-line-height);
  letter-spacing: -0.03em;
  color: var(--tech-body-color);
}
.tech-body > p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.title-txt,
.title-txt2 {
  font-family: "Pretendard", sans-serif;
  line-height: var(--title-line-height);
}

/* 색 선언이 없어 body 기본색(#212529)을 상속하던 타이틀들.
   #212529 는 사이트 타이틀 색(#424242)보다 진해 같은 위계의 제목인데도 더 어둡게 보였다.
   히어로처럼 사진 위 흰 글자인 곳은 조상(.sec__*_main-*)에서 color 를 주므로 여기 걸리지 않는다 */
/* services: 데이터 중심 / 매체에 구애받지 않는 / 최고의 ROI / 커머스 컨설팅 / :THE GROWTH */
.sec__service01_wrap .sec__career-txt .title-txt,
.sec__service01_wrap .sec__career-txt .title-txt2,
/* services: 주요 성과 사례 */
.sec__service02_wrap .sec__service02-txt .title-txt,
/* ad-tech: Addirect is EASY 등 특징 카드 제목 12개 */
.sec__tech02_wrap .sec__tech-card-title {
  color: #424242;
}

.sub-txt {
  font-family: "Pretendard", sans-serif !important;
  line-height: 20px;
}

.Pretendard {
  font-family: "Pretendard", sans-serif !important;
}

body {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  display: block;
}

a:hover {
  text-decoration: none;
}

button {
  background: none;
  border: none;
}

nav, main {
  display: block;
}

section {
  margin: 0;
  padding: 0;
  position: relative;
}

header {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 120px;
  display: flex;
  /* align-content 는 nowrap flex 에서 무시된다. 세로 중앙 정렬은 align-items 로 */
  align-items: center;
  /* gap:18% 은 자식 3개 기준 화면 폭의 36%를 여백으로 소진해 좁은 화면에서 우측 드롭다운이 밀려났다.
     남는 공간을 배분하는 space-between 으로 바꿔 어떤 폭에서도 넘치지 않게 한다 */
  justify-content: space-between;
  gap: 2rem;
  padding: 0 4rem;
  background-color: #fff;
}
header a {
  display: grid;
  place-content: center;
}
header .pc-ga-logo {
  padding: 2.5rem 1rem;
}
header .title-txt {
  font-weight: 600;
}

/* 히어로 위에 겹치는 헤더는 배경만 투명. 레이아웃(space-between/gap)은 header 규칙을 그대로 상속받는다.
   여기서 gap 을 다시 선언하면 클래스 특이도로 header 규칙을 덮어 우측 드롭다운이 밀린다 */
.main-header {
  background-color: transparent;
}

/* EN 헤더(en.css)는 header/.main-header 에 gap:15% 를 주고 justify-content 가 없어
   헤더 내용이 화면보다 넓어진다 -> 우측 언어토글이 100% 배율에서 잘린다.
   KO(common.css)와 동일하게 고정 gap + space-between 으로 맞춘다.
   style.css 는 KO/EN 모두 마지막에 로드되므로 en.css 를 덮어쓴다(KO 는 값이 같아 변화 없음) */
header,
.main-header {
  gap: 2rem;
  justify-content: space-between;
}

/* 언어 토글(KOR/ENG 드롭다운). en.css 의 .dropdown{margin-left:10rem} 을 0 으로 되돌린다.
   위 header 의 justify-content:space-between 이 마지막 항목인 이 토글을 우측 끝에 배치하므로
   (국문과 동일한 방식) 별도 마진 없이 국문과 똑같은 위치·nav 정렬이 된다. */
.dropdown {
  margin-left: 0;
  align-items: center;
}

.wrap {
  width: 1920px; /* 너비를 1920px 로 고정 */
  margin: 0 auto; /* 좌우 여백을 자동으로 설정하여 가운데 정렬 */
  position: relative; /* 필요에 따라 위치 설정 가능 */
}

.alt {
  text-indent: -99999px;
  position: absolute;
  top: 0;
  transform: none;
  z-index: -1;
}

nav {
  display: flex;
}
nav.on {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(0);
  z-index: 100;
}
nav .page-link {
  padding: 0.3rem 0;
  margin: 10px 2rem 0 2rem;
  color: black;
  font-size: larger;
  white-space: nowrap;
}
nav .page-link img.off {
  opacity: 0.5;
}
nav .page-link:hover {
  background: url("https://kr.object.ncloudstorage.com/landing-assets/ptbwaweb/statics/img/com/menu_bg.png") no-repeat center;
}

.page-link.active {
  background: url("https://kr.object.ncloudstorage.com/landing-assets/ptbwaweb/statics/img/com/menu_bg.png") no-repeat center;
}

.nav__pc_menu {
  display: flex;
}

.sec__main-img-background {
  background-color: #D7D7D5;
}

.sec__main-img {
  background: url("../img/kv_bg.jpg") no-repeat center center/cover;
  max-width: 100%;
  width: 1903px;
  /* 높이를 973px 로 고정하면 폭이 좁아진 만큼 cover 가 좌우를 잘라낸다.
     원본(1903x973) 비율을 유지시켜 어떤 폭에서도 잘리지 않게 한다.
     height:auto 를 명시해야 common.css 의 height:973px 를 확실히 덮는다 */
  aspect-ratio: 1903 / 973;
  height: auto;
  position: relative;
  padding-top: 100px;
  border-radius: 0;
}

footer {
  background-color: #161616;
  color: #8C8C8C;
  padding: 5rem 0;
}
footer .footer-container {
  display: flex;
  justify-content: space-between;
}
footer .grid-item:nth-child(2n) {
  margin-left: 3rem;
}
footer .grid-item:first-child,
footer .grid-item:nth-child(2) {
  margin-bottom: 1rem;
}
footer .grid-item > p:first-child {
  margin-bottom: 0.6rem;
}
footer .footer__left_top {
  margin: 1rem 0;
}
footer .footer__left_top > * {
  margin-bottom: 0.4rem;
}
footer .footer__left_bottom {
  display: flex;
}
footer .footer__left_bottom > span:first-child {
  color: #525252;
  margin-right: 4rem;
}
footer #private-link {
  margin-right: 2rem;
  text-decoration: none;
  color: #8C8C8C;
}

.icon-container {
  display: flex;
}
.icon-container *:not(:last-child) {
  margin-right: 1rem;
}

.font-weight-bold {
  font-weight: bold;
}

.font-size-mega {
  font-size: 7rem;
}

.font-size-large {
  font-size: 3.5rem;
}

.font-size-medium-large {
  font-size: 1.3125rem;
}

.sec__main-txt {
  margin-left: 10rem;
  padding-top: 16rem;
}
.sec__main-txt .highlight-container {
  margin-bottom: 1.5rem;
}
.sec__main-txt .highlight-container .under-highlight {
  border-bottom: 12px solid var(--yellow);
  width: 37rem;
  margin-top: -26px;
}
.sec__main-txt .sub-txt {
  line-height: 25px;
}

.sec__about-txt p:last-child {
  margin: 0 0 2rem;
}

.btn__about {
  display: flex;
  margin-bottom: 2rem;
}

.sec__about_padding_container {
  padding: 0 15rem;
}

.sec__about01_wrap {
  display: flex;
  flex-direction: column;
  /* 일반 섹션 공통 간격 9rem(144px). 배경색 섹션(tech02/about04/career03/service02)과
     clients 스트립은 성격이 달라 이 값을 쓰지 않는다 */
  padding: 9rem 0;
  /* 버튼 -> 카드 이미지 간격 60px.
     flex gap 은 마진과 병합되지 않으므로 아래에서 버튼의 margin-bottom 을 0 으로 둔다 */
  gap: 60px;
}
/* Hero: 큰 타이틀 + 노란 밑줄 + 각진 버튼 */
.sec__about01_wrap .sec__about01__hero .sec__about-txt .title-txt {
  letter-spacing: -0.03em;
  color: #424242;
}
/* 줄 간격은 line-height 로만 만든다. 여기에 margin 을 더하면 다른 섹션보다 넓어진다 */
.sec__about01_wrap .sec__about01__hero .sec__about-txt p:not(:last-child) {
  margin: 0;
}
/* 공통 규칙의 margin-bottom(2rem)을 해제한다. 본문 -> 버튼 간격은 아래 버튼의
   margin-top 만으로 결정되게 해서 타이틀 -> 본문 간격(25px)과 맞춘다 */
.sec__about01_wrap .sec__about01__hero .sec__about-txt p:last-child {
  margin-bottom: 0;
}
.sec__about01_wrap .sec__about01__hero .sec__about-txt .under-highlight {
  margin-top: -23px;
}
/* 밑줄이 마지막 요소라 margin-top(-23px) + border(12px) = -11px 만큼 컨테이너 바닥이
   끌려 올라간다. about02(밑줄이 타이틀 사이에 있어 순증 0px)와 같은 타이틀-본문
   간격이 되도록 그만큼 아래 여백을 더해준다 */
/* 국문(블록 밑줄 .under-highlight 사용): 밑줄이 컨테이너 바닥을 -11px 끌어올리므로
   36px 를 줘야 타이틀 -> 본문 간격이 25px 로 보인다 */
.sec__about01_wrap .sec__about01__hero .sec__about-txt .highlight-container {
  padding-bottom: 36px;
}
/* 영문(인라인 밑줄 .under-highlight-txt, 블록 .under-highlight 없음): -11px 보정이 없으므로
   25px 를 그대로 준다. :has 로 블록 밑줄 유무를 구분해 국문/영문을 같은 25px 간격으로 맞춘다 */
.sec__about01_wrap .sec__about01__hero .sec__about-txt .highlight-container:not(:has(.under-highlight)) {
  padding-bottom: 25px;
}
.sec__about01_wrap .sec__about01__hero .sub-txt {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  letter-spacing: -0.03em;
  color: var(--body-color);
}
/* 본문 -> 버튼 간격을 타이틀 -> 본문 간격(25px)과 동일하게 */
.sec__about01_wrap .sec__about01__hero .btn__about {
  /* 25px 로는 본문->버튼 간격이 타이틀->본문보다 좁아 보인다. 버튼은 위쪽에 텍스트 행간
     여백이 없어, 본문 위 행간 여백(약 5px)만큼 시각적으로 덜 벌어지기 때문이다.
     그만큼 더해 눈에 보이는 간격을 타이틀->본문(25px)과 맞춘다 */
  margin-top: 30px;
  margin-bottom: 0;
}
/* card row */
.sec__about01_wrap .sec__about01__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sec__about01_wrap .about01-card img {
  width: 100%;
  height: calc(15rem + 10px);
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.2rem;
}
.sec__about01_wrap .about01-card .card-label {
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: #424242;
  margin-bottom: 0.8rem;
}
.sec__about01_wrap .about01-card .card-desc {
  /* 16.8px 에서 1px 줄인 15.8px 이었으나, 소수점 px 를 없애며 16px 로 반올림했다 */
  font-size: 1rem;
  line-height: 1.48em;
  letter-spacing: -0.03em;
  color: #666666;
}

.sec__about02_wrap {
  display: flex;
  align-content: center;
  justify-content: center;
  /* 다음 섹션 제목까지의 간격을 about01→about02(10rem+3rem)와 동일하게 맞춘다 */
  /* 일반 섹션 공통 간격 9rem(144px). margin 과 padding 으로 나뉘어 있던 것을 하나로 합쳤다.
     다만 이 섹션만 사진(IMG_C00)으로 끝난다. 다른 섹션은 본문 텍스트로 끝나서 마지막 줄
     아래에 line-height 여백(16px/1.48em -> 약 8px)이 남는데, 사진은 가장자리가 딱 끊겨
     그 여백이 없다. 그래서 같은 144px 이라도 다음 섹션 타이틀과의 간격이 좁아 보인다.
     빠진 만큼(8px) 더해 눈에 보이는 간격을 다른 섹션과 맞춘다 */
  margin-bottom: 9.5rem;
  padding-bottom: 0;
}
.sec__about02_wrap .sec__about02-txt {
  /* 위쪽 3rem 은 섹션 간격(9rem) 위에 그대로 더해져 192px 이 되므로 0 으로 둔다.
     아래 60px 은 스크롤러 이미지와의 간격이라 유지 */
  margin: 0 0 60px;
}
.sec__about02_wrap .sec__about02-txt .title-txt {
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #424242;
}
/* 밑줄 div 가 타이틀 두 줄 사이에 끼어 있어 그 높이가 그대로 행간에 더해진다.
   border-bottom(12px) + margin-top(-15px) + margin-bottom(3px) = 0 이 되도록 맞춰
   두 줄 간격이 line-height 만으로 결정되게 한다 */
.sec__about02_wrap .sec__about02-txt .under-highlight {
  width: 26rem;
  /* 밑줄이 글자 아랫부분에 겹치는 정도는 index 히어로와 동일한 -23px.
     타이틀 두 줄 사이에 끼어 있으므로 border(12px) 와 합쳐 순증 0px 이 되도록
     아래 여백 11px 을 준다. 줄 간격은 line-height 로만 결정된다 */
  margin-top: -23px;
  margin-bottom: 11px;
}
.sec__about02_wrap .sec__about02-txt .sub-txt {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  letter-spacing: -0.03em;
  color: var(--body-color);
}
/* 두 줄이 <p> 2개로 나뉘어 있어 위 여백이 붙으면 about01 히어로(한 <p> + <br>)보다
   행간이 넓어진다. 줄 간격은 line-height 로만 결정되게 위 여백은 0 으로 두고,
   아래 스크롤러와의 간격만 남긴다 */
.sec__about02_wrap .sec__about02-txt > p:last-child {
  margin: 0 0 0.4rem;
}

.sec__about03_wrap {
  display: flex;
  align-content: center;
  justify-content: center;
  /* 일반 섹션 공통 간격 9rem(144px) */
  margin-bottom: 9rem;
}
.sec__about03_wrap .sec__about-txt > * {
  margin-bottom: 20px;
}
/* 타이틀 -> 본문 간격은 highlight-container 의 padding-bottom(25px) 만으로 결정한다.
   about01·about02 와 동일 */
.sec__about03_wrap .sec__about-txt .highlight-container {
  margin-bottom: 0;
  /* 국문(블록 밑줄): 밑줄이 바닥을 -11px 끌어올리므로 36px 로 타이틀 -> 본문 간격 25px 를 만든다 */
  padding-bottom: 36px;
}
/* 영문(인라인 밑줄, 블록 .under-highlight 없음): 보정이 없으므로 25px 그대로 */
.sec__about03_wrap .sec__about-txt .highlight-container:not(:has(.under-highlight)) {
  padding-bottom: 25px;
}
/* 글자에 겹치는 밑줄. index 히어로(.sec__about01__hero)와 동일 */
.sec__about03_wrap .sec__about-txt .under-highlight {
  margin-top: -23px;
}
/* 본문 타이포를 about01·about02 본문과 통일 */
.sec__about03_wrap .sec__about-txt .sub-txt {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  letter-spacing: -0.03em;
  color: var(--body-color);
}
/* 본문 -> 버튼 간격을 about01 히어로와 동일하게 25px */
.sec__about03_wrap .btn__about {
  /* about01 히어로와 동일: 본문 위 행간 여백이 버튼엔 없어 좁아 보이므로 5px 더해 보정 */
  margin-top: 30px;
}
/* 다른 섹션 타이틀과 동일한 먹색 */
.sec__about03_wrap .sec__about-txt .title-txt {
  color: #424242;
}
/* 타이틀 첫 줄의 margin-bottom(20px)은 두 줄 사이를 벌려 다른 섹션보다 행간이 넓어졌다.
   줄 간격은 line-height 로만 만들고, 20px 은 타이틀 블록 아래 여백으로만 남긴다 */
.sec__about03_wrap .sec__about-txt > p {
  margin-bottom: 0;
}
.sec__about03_wrap .grid-container {
  /* 회사소개서 버튼 -> 카드 이미지 간격 60px.
     버튼의 margin-bottom(2rem = 32px)과 병합되므로 큰 값인 60px 이 최종 간격이 된다 */
  margin-top: 60px;
  gap: 4rem 24px;
}
/* about03 그리드를 about01 카드처럼 정렬 — 좌우 패딩/마진 제거 후 24px 간격 */
.sec__about03_wrap .grid-container .grid-item:nth-child(2n-1),
.sec__about03_wrap .grid-container .grid-item:nth-child(2n) {
  padding: 0;
  margin-left: 0;
}
.sec__about03_wrap .grid-item {
  margin-bottom: 0;
}
.sec__about03_wrap .grid-item img {
  margin-bottom: 1rem;
  width: calc(100% - 40px);
  /* height:auto 만 두면 높이를 원본 비율이 정하는데, 네 장의 비율이 2.0074 / 1.9890 으로
     갈려 같은 줄에 나란히 선 카드끼리 높이가 1.7px 어긋났다(2열 그리드라 1-2번, 3-4번이 한 줄).
     첫 카드(IMG_D_thumb_1_2509.jpg, 540x269)의 비율로 고정해 네 장을 같은 높이로 맞춘다.
     파일을 다시 자르는 대신 여기서 잡아야 나중에 이미지를 갈아 끼워도 줄이 흐트러지지 않는다.
     object-fit: cover 라 비율이 다른 이미지는 늘어나지 않고 가장자리만 잘린다 */
  aspect-ratio: 540 / 269;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}
/* 두 번째 카드(트로피 사진)만 - 노란 배경이 원색에 가까워 옆 카드들보다 혼자 튄다.
   채도만 낮춰 주변과 붙이고, 명도·대비는 건드리지 않는다.
   원본 파일을 손대지 않고 여기서 거는 이유는 값을 다시 조정하기 쉽기 때문이다 */
.sec__about03_wrap .grid-container .grid-item:nth-child(2) img {
  filter: saturate(0.8);
}
/* 카드 타이틀·본문 타이포는 about01 카드(.card-label / .card-desc)와 동일하게 맞춘다 */
.sec__about03_wrap .grid-item .about__03_title {
  /* 한 줄짜리 타이틀이라 line-height 1.5em 의 위아래 여백(각 3.2px)이 그대로
     이미지→본문 간격에 더해진다. about01 카드처럼 붙어 보이도록 1.2em 으로 줄인다 */
  margin-bottom: 0.6rem;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color: #424242;
}
.sec__about03_wrap .grid-item .about__03_des > * {
  /* 항목이 <p> 로 나뉘어 있어도 줄 간격이 .card-desc(한 문단 + <br>)와 같아지도록
     여백 없이 line-height 로만 결정되게 한다 */
  margin-bottom: 0;
  /* .card-desc 와 동일하게 16px */
  font-size: 1rem;
  line-height: 1.48em;
  font-weight: var(--body-weight);
  letter-spacing: -0.03em;
  color: #666666;
}

.sec__about04_wrap {
  /* 위 섹션(흰 배경)에서 자연스럽게 이어지도록 흰색 → 노랑 그라데이션.
     흰색을 20% 지점까지만 유지하고 나머지 구간에서 노랑으로 물들인다 */
  /* 흰색 -> 노란색 그라데이션. 흰색은 높이의 20% 지점까지 유지한다 */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 20%, #FFF5CE 100%);
  width: 100%;
  /* 최종 높이는 include.js 가 `푸터 높이 - 20px` 로 덮어쓴다.
     아래 값은 JS 실행 전/실패 시의 폴백. common.css 의 height:686px 을 함께 해제한다 */
  height: auto;
  min-height: 20rem;
  box-sizing: border-box;
  /* 그라데이션이 흰색에서 시작해 경계가 보이지 않으므로 흰 섹션 규칙을 따른다.
     위쪽 간격은 앞의 clients 섹션이 만든다 */
  padding: 0 0 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 흰 카드를 걷어내고 다른 섹션과 동일한 1300px 그리드로 전환.
   좌: 텍스트 블록 / 우: 문의하기 버튼, 둘 다 세로 가운데.
   common.css 에 남아 있는 카드 스타일(흰 배경·고정 크기·가운데 마진)을 명시적으로 해제한다 */
.sec__about04_wrap .sec__about04_container {
  background-color: transparent;
  /* 버튼을 텍스트 오른쪽이 아니라 본문 아래에 둔다.
     index 히어로(.sec__about01__hero)와 동일한 타이틀 -> 본문 -> 버튼 세로 구성.
     정렬만 히어로와 달리 가운데 */
  display: block;
  /* 버튼을 텍스트 블록 전체가 아닌 타이틀 높이에 맞춘다 */
  width: 1300px;
  height: auto;
  margin: 0;
  box-sizing: border-box;
}
/* 타이틀·본문·버튼을 모두 가운데 정렬한다. common.css 의
   `.sec__about04_container div { margin:auto; text-align:center }` 와 결과는 같지만,
   로드 순서에 기대지 않도록 여기서 명시한다 */
.sec__about04_wrap .sec__about04_container > div {
  margin: 0;
  text-align: center;
}
.sec__about04_wrap .sec__about04_container .sec__about04_txt .title-txt {
  /* 타이틀 -> 본문 간격. 사이트 공통 25px */
  margin-bottom: 25px;
  /* 타이포는 index 히어로 타이틀(.font-size-large + .font-weight-bold)과 동일하게 */
  font-size: 3.5rem;
  line-height: var(--title-line-height);
  font-weight: bold;
  letter-spacing: -0.03em;
  color: #424242;
}
/* common.css 의 `.sec__about04_wrap .sec__about04_container div p { text-align:center }` 는
   특이도 (0,2,2) — 클래스 2개짜리 선택자로는 덮지 못한다(로드 순서와 무관).
   .sec__about04_txt 를 키워 (0,3,1) 로 올려야 확실히 덮어쓴다 */
.sec__about04_wrap .sec__about04_container .sec__about04_txt p {
  text-align: center;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: -0.03em;
  color: #333333;
}
/* 본문 톤을 about01 카드 본문(.card-desc)과 동일하게 맞춘다.
   위 p 규칙보다 한 단계 구체적이라 타이틀에는 영향을 주지 않는다 */
/* 본문 타이포를 index 히어로 본문(.sec__about01__hero .sub-txt)과 동일하게 맞춘다.
   두 줄이 각각 <p> 라 줄 간격은 line-height 로만 만들도록 margin 을 0 으로 둔다 */
.sec__about04_wrap .sec__about04_container .sec__about04_txt .sub-txt {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  letter-spacing: -0.03em;
  color: var(--body-color);
  margin: 0;
}
/* 본문 -> 버튼 간격 30px. index 히어로(.sec__about01__hero .btn__about)와 같은 값으로,
   보이는 간격이 타이틀 -> 본문(25px)과 같아진다 */
.sec__about04_wrap .sec__about04_container .btn__about {
  margin: 30px 0 0;
  flex-shrink: 0;
  /* .btn__about 은 display:flex 라 text-align 이 먹지 않는다. 버튼도 본문과 같이 가운데로 */
  justify-content: center;
}

/* 인라인 밑줄(문구 단위). 문구를 <span class="under-highlight-txt"> 로 감싸면
   글자 아랫부분에 겹치는 노란 형광펜 획이 글자 폭에 정확히 맞게 그려진다.
   블록 밑줄(.under-highlight)과 달리 폭 계산이 필요 없고, 한 줄의 일부 문구에도 쓸 수 있다.
   clients-title 에서 쓰던 것과 동일 값 - about 타이틀도 3.5rem / line-height 1.2 라 그대로 맞는다 */
.under-highlight-txt {
  background-image: linear-gradient(to top, transparent 11px, var(--yellow) 11px, var(--yellow) 23px, transparent 23px);
}

.highlight-container .under-highlight {
  border-bottom: 12px solid var(--yellow);
  width: 29rem;
  margin-top: -12px;
}
.highlight-container {
  padding-bottom: 25px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pc_dropdown {
  text-decoration: none;
  color: #333333;
  position: relative;
  display: inline-block;
  margin-right: 3px;
}

.pc_dropdown #dropdownMenuButton {
  width: 50px;
  padding-right: 2px;
  text-align: center;
  color: black;
  text-decoration: none;
  font-family: "Pretendard";
  position: relative;
}

.pc_dropdown .caret {
  position: absolute;
  right: 2px;
  top: 5px;
  content: "";
  width: 5px; /* 사이즈 */
  height: 5px; /* 사이즈 */
  border-top: 1px solid #000; /* 선 굵기 */
  border-right: 1px solid #000; /* 선 굵기 */
  transform: rotate(135deg); /* 媛곷룄 */
}

.pc_dropdown .dropdown-menu {
  width: 50px;
  text-align: center;
  color: black;
  display: none;
  position: absolute;
  top: 100%;
  padding: 4px 0;
}

#dropdownMenuButton:hover .dropdown-menu {
  display: block;
}

.pc_dropdown .dropdown-item {
  color: black;
  text-decoration: none;
  font-family: "Pretendard";
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #333333;
  text-decoration: none;
  font-family: "Pretendard";
}

.dropdown-divider {
  height: 1px;
  margin: 0.2rem 0;
  overflow: hidden;
  background-color: black;
}

.container {
  width: 100vw;
  padding: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.swiper-list-container {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.swiper-list-container::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}

.swiper-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.swiper-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollbar {
  width: 85%;
  height: 2px;
  background-color: #ddd;
  margin-top: 40px;
  position: relative;
  display: flex;
}

.scrollbar-thumb {
  height: 100%;
  background-color: #000000;
  position: absolute;
}

.scrollbar-arrow-btn-container {
  display: flex;
  justify-content: space-between;
}

.arrow-btn-container {
  margin: 29px 10px 10px 0;
  display: flex;
  justify-content: space-between;
  font-size: 1.3125rem;
}
.arrow-btn-container .scroll-arrow {
  margin-right: 30px;
}

.scroll-horizontal {
  position: relative;
}

.pc_card_img {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.sec__about04_wrap .sec__about04_container {
  border-radius: 12px;
}

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--yellow) !important;
  color: black;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.scroll-bottom-btn {
  position: absolute;
  bottom: 0;
  right: 50%;
  padding: 2rem;
  font-size: 30px;
  color: #8D928D;
}

.sec__tech_main-img {
  background: url("../img/img01.jpg") no-repeat center center/cover;
  max-width: 100%;
  display: flex;
  height: 460px;
  padding-top: 120px;
  position: relative;
  color: white;
}
.sec__tech_main-img img {
  width: 1163px;
  display: block;
  margin: 0 auto;
}

.sec__tech_main-txt {
  margin: auto;
}
.sec__tech_main-txt .title-txt {
  font-size: 4.125rem;
}
.sec__tech_main-txt .sub-txt {
  font-size: 1.375rem;
  /* services.html 히어로(.sec__service__main-txt .sub-txt)와 동일한 제목~본문 간격 */
  margin: 0.8rem 0;
  line-height: 1.9rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.sec__tech01_wrap .sec__about-txt {
  margin-top: 9rem;
}
/* ad-tech-img-250915-PC.png 안에 투명 여백이 위 107px, 아래 97px 들어 있다.
   위쪽은 그만큼 끌어올려 본문 -> 그래픽 간격을 CSS 값(2rem)대로 보이게 하고,
   아래쪽은 부족한 47px 을 섹션 padding 으로 채워 다음 회색 띠까지 9rem(144px)을 맞춘다.
   display:block 은 인라인 이미지의 baseline 여백을 없앤다 */
/* 이미지 타겟을 sec__about01__left 클래스 대신 content-area 로 잡는다.
   영문 ad-tech 는 en.css 의 구형 .sec__about01__left 규칙(title-txt 3.3rem!important 등)이
   tech01 에 붙어 세로 여백이 어긋나면서 그래픽이 타이틀을 덮어 잘렸다. 그 클래스를 떼어내도
   이미지 보정이 유지되도록 클래스에 의존하지 않게 한다(국문 tech01 div 에도 content-area 가 있어 공통) */
.sec__tech01_wrap .content-area > img {
  display: block;
  margin-top: -107px;
}
.sec__tech01_wrap {
  padding-bottom: calc(9rem - 97px);
}
/* 타이틀 타이포를 index 히어로(.sec__about01__hero)와 통일 */
.sec__tech01_wrap .sec__about-txt .title-txt {
  letter-spacing: -0.03em;
  color: #424242;
}
.sec__tech01_wrap .under-highlight {
  width: 27.6875rem;
  margin-top: -23px;
}
/* 밑줄을 문구 길이에 자동으로 맞춘다. 컨테이너를 글자 폭까지 줄이고 밑줄이 그 폭을 100%
   채우게 해서, 고정 폭(27.6875rem)이 글자 끝을 넘어 삐져나오지 않게 한다.
   :has 로 블록 밑줄이 있는 국문에만 적용해 영문(인라인 밑줄) 줄바꿈에는 영향을 주지 않는다 */
.sec__tech01_wrap .sec__about-txt .highlight-container:has(.under-highlight) {
  width: fit-content;
}
.sec__tech01_wrap .sec__about-txt .highlight-container .under-highlight {
  width: 100%;
}
/* 줄 간격은 line-height 로만 만든다. index 히어로(.sec__about01__hero)와 동일 */
.sec__tech01_wrap .sec__about-txt p:not(:last-child) {
  margin: 0;
}
/* 밑줄이 마지막 요소라 margin-top(-23px) + border(12px) = -11px 만큼 컨테이너 바닥이
   끌려 올라간다. 그만큼 더해 타이틀 -> 본문 간격을 25px 로 맞춘다 */
.sec__tech01_wrap .sec__about-txt .highlight-container {
  /* 영문(인라인 밑줄, 블록 .under-highlight 없음)은 -11px 보정이 없으므로 25px 를 그대로 준다 */
  padding-bottom: 25px;
}
/* 국문 tech01(.sec__about01__left 유지, 블록 밑줄 사용)은 밑줄이 바닥을 -11px 끌어올리므로
   36px 를 줘야 타이틀 -> 본문 간격이 25px 로 보인다 */
.sec__tech01_wrap .sec__about01__left .sec__about-txt .highlight-container {
  padding-bottom: 36px;
}
.sec__tech01_wrap .sub-txt {
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  font-size: var(--body-font-size);
  letter-spacing: -0.03em;
  color: var(--body-color);
}

.sec__tech02_wrap {
  /* 회색 블록 3개가 연달아 붙어 하나의 회색 띠가 된다. 각 블록이 위쪽 9rem 만 갖고
     아래는 0 으로 두면, 블록 사이 간격도 9rem(144px)으로 맞는다 */
  padding: 9rem 0 0;
  background-color: #F3F3F3;
}
/* 띠의 맨 아래는 흰 영역과 만나므로 안쪽 여백 9rem 을 준다 */
.sec__tech02_wrap:last-of-type {
  padding-bottom: 9rem;
}
.sec__tech02_wrap .sec__tech02-title-container {
  margin-bottom: 3rem;
}
/* 타이틀 타이포를 tech01(.sec__tech01_wrap)·index 히어로와 통일 */
.sec__tech02_wrap .sec__tech02-txt .title-txt {
  letter-spacing: -0.03em;
  color: #424242;
}
.sec__tech02_wrap .sec__tech02-title-container > div:first-child {
  display: flex;
  justify-content: space-between;
  /* 간격은 위 .highlight-container 의 padding-bottom(36px) 이 전부 담당한다 */
  margin-bottom: 0;
}
/* 본문 타이포는 .tech-body 가 담당한다. 여기서 다시 선언하면 careers 와 어긋날 수 있다 */
.sec__tech02_wrap .under-highlight {
  width: 40rem;
  /* 글자에 겹치는 밑줄. index 히어로(.sec__about01__hero)와 동일 */
  margin-top: -23px;
}
/* 밑줄이 마지막 요소라 margin-top(-23px) + border(12px) = -11px 만큼 컨테이너 바닥이
   끌려 올라간다. 그만큼 더해 타이틀 -> 아래 소개 문단 간격을 25px 로 맞춘다.
   간격은 이 padding 하나로만 만들고, 바깥 div 의 margin-bottom 은 0 으로 둔다 */
.sec__tech02_wrap .sec__tech02-txt .highlight-container {
  padding-bottom: 36px;
}
/* 인라인 밑줄(.under-highlight-txt)만 쓰는 타이틀은 블록 밑줄의 -11px 보정이 없으므로
   25px 를 그대로 준다. about01/about03 과 같은 방식 */
.sec__tech02_wrap .sec__tech02-txt .highlight-container:not(:has(.under-highlight)) {
  padding-bottom: 25px;
}
.sec__tech02_wrap .grid-container {
  gap: 2rem 2rem;
}
.sec__tech02_wrap .grid-item {
  background: white;
  border: solid 1px #e7e6e6;
  border-radius: 12px;
  height: 18rem;
  display: grid;
  /* 세로는 중앙, 가로는 왼쪽 고정.
     place-content:center 는 카드마다 텍스트 폭 기준으로 가운데를 잡아 시작점이 제각각이었다 */
  align-content: center;
  justify-content: start;
  padding: 0 4rem;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: -0.03em;
  /* index 의 .sec__about03_wrap 카드와 동일한 본문 톤. 그쪽은 색을 선언하지 않아 body 의 #212529 를 상속받는다 */
  color: #212529;
}
/* 타이틀 크기·굵기를 index 의 .about__03_title 과 동일하게 맞춤 */
.sec__tech02_wrap .sec__tech-card-title {
  font-size: 1.9375rem;
  font-weight: 700;
  margin-bottom: 1.9rem;
}
.sec__tech02_wrap .sec__tech-txt {
  margin: auto;
}
.sec__tech02_wrap .sec__tech-card-des {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  color: var(--body-color);
}
/* 애디렉트·아이티브·에이비아이 소개 문단은 클래스가 없어 body 기본값을 상속받고 있었다 */
.sec__tech02_wrap .sec__tech02-title-container > div > p {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
}
.sec__tech02_wrap .sec__tech02-title-container > div > p:not(.font-weight-bold) {
  font-weight: var(--body-weight);
}
/* 소개 문단의 리드 한 줄. .font-weight-bold(700) 대신 세미볼드로 눌러 준다.
   본문보다 4px 크게 잡고, 아래 본문과의 간격은 기본 1rem 에서 7px 좁힌다 */
.sec__tech02_wrap .sec__tech02-title-container > div > p.font-weight-bold {
  font-size: calc(var(--body-font-size) + 4px);
  font-weight: 600;
  margin-bottom: calc(1rem - 7px);
}
.sec__tech02_wrap .sec__tech-card-annot {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.3rem;
}

.content-area {
  width: 1300px;
}

.sec__career__main-txt {
  background: url("../img/careers/img01.jpg") no-repeat center center/cover;
  max-width: 100%;
  height: 460px;
  padding-top: 120px;
  position: relative;
  color: white;
  margin: 0 auto;
  align-content: center;
  /* ad-tech(.sec__tech_main-txt)·services(.sec__service__main-txt) 히어로와 동일한 4.125rem */
  font-size: 4.125rem;
}

.sec__career01_wrap {
  /* 일반 섹션 공통 간격 9rem(144px) */
  margin: 9rem 0;
}
/* ===== careers 타이틀 / 본문 =====
   타이틀: ad-tech tech02(.sec__tech02_wrap)와 동일. 3.5rem bold, line-height 1.2,
           자간 -0.03em, #424242 + 노란 밑줄
   본문  : career01 은 tech02 와 동일. 1rem, line-height 1.8em, 자간 -0.03em, #333333.
           굵기만 문단 역할(강조 bold / 일반 300)에 따라 다르게 둔다
           career02·career03 은 index 히어로 본문(1.1875rem / 1.5em / #666666) 기준
   타이틀 -> 본문 간격은 .highlight-container 의 padding-bottom(25px) 이 맡는다 */
.sec__career01_wrap .sec__career-txt .title-txt,
.sec__career02_wrap .sec__career02-txt .title-txt,
.sec__career03_wrap .sec__career03-txt .title-txt {
  font-weight: bold;
  letter-spacing: -0.03em;
  color: #424242;
  /* 두 줄짜리 타이틀의 줄 간격은 line-height 로만 만든다 */
  margin-bottom: 0;
}
/* 밑줄을 문구 길이에 자동으로 맞춘다. 컨테이너를 글자 폭까지 줄이고 밑줄이 그 폭을
   100% 채우게 해서, 문구가 바뀌어도 고정 폭을 다시 재지 않는다 */
.sec__career01_wrap .sec__career-txt .highlight-container,
.sec__career02_wrap .sec__career02-txt .highlight-container,
.sec__career03_wrap .sec__career03-txt .highlight-container {
  width: fit-content;
  /* 밑줄이 마지막 요소라 margin-top(-23px) + border(12px) = -11px 만큼 컨테이너
     바닥이 끌려 올라간다. 그만큼 더해 타이틀 -> 본문 간격을 25px 로 맞춘다 */
  padding-bottom: 36px;
}
/* 블록 밑줄이 없는 경우(영문 career03 처럼 인라인 밑줄 .under-highlight-txt 만 쓰는 타이틀)는
   -11px 보정이 없으므로 25px 를 그대로 준다. index/tech01 의 :has 분기와 같은 규칙 */
.sec__career01_wrap .sec__career-txt .highlight-container:not(:has(.under-highlight)),
.sec__career02_wrap .sec__career02-txt .highlight-container:not(:has(.under-highlight)),
.sec__career03_wrap .sec__career03-txt .highlight-container:not(:has(.under-highlight)) {
  padding-bottom: 25px;
}
/* 글자에 겹치는 밑줄. index 히어로(.sec__about01__hero)와 동일 */
.sec__career01_wrap .sec__career-txt .under-highlight,
.sec__career02_wrap .sec__career02-txt .under-highlight,
.sec__career03_wrap .sec__career03-txt .under-highlight {
  width: 100%;
  margin-top: -23px;
}
/* 본문은 .tech-body 블록이 담당한다. common.css 의 옛 값
   (.sec__career01_wrap .sub-txt{font-size:1.9rem} / .detail-txt{font-size:1.3rem}) 은
   마크업에서 그 두 클래스를 떼어냈으므로 더 이상 걸리지 않는다.
   크기만 여기서 19px 로 키우고, 색상은 .tech-body 의 #333333 대신
   index 본문과 같은 #666666 을 쓴다. 자간(-0.03em)·굵기는 .tech-body 그대로다 */
.sec__career01_wrap .tech-body {
  font-size: 1.1875rem;
  color: #666666;
}
/* 줄 간격은 ad-tech tech02 와 "여백"을 같게 맞춘다.
   ad-tech 는 16px 글자 + 12.8px 여백 = 28.8px(1.8em) 행간이다.
   careers 는 글자가 더 커서 같은 1.8em 을 쓰면 여백까지 비례해 커지고(강조 18.4px / 설명 15.2px)
   그만큼 더 벌어져 보인다. 그래서 비율이 아니라 행간을 px 로 고정한다(강조 36px / 설명 32px).
   그러면 줄 위아래 여백이 6.5px 씩으로 ad-tech(6.4px)와 거의 같아지고,
   .tech-body > p 가 margin:0 이라 강조 -> 설명 문단 사이 여백도 6.5+6.5=13px 로 맞는다 */
.sec__career01_wrap .tech-body > p.font-weight-bold {
  /* 강조 문단만 23px 로 키워 아래 설명 문단(19px)과 위계를 만든다 */
  font-size: 1.4375rem;
  line-height: 36px;
}
.sec__career01_wrap .tech-body > p:not(.font-weight-bold) {
  /* 행간을 index 히어로 본문(.sec__about01__hero .sub-txt)과 동일한 1.5em 으로 맞춘다.
     이전 32px(=1.68) 은 index 본문(1.5em=28.5px)보다 넓어 보였다 */
  line-height: 1.5em;
  /* 강조 문단 -> 이 설명 문단 사이 간격. .tech-body > p 의 margin:0 을 이 문단만 덮어쓴다 */
  margin-top: 24.2px;
  /* .tech-body 기본 300 보다 한 단계 굵게. ad-tech tech02 는 300 그대로다 */
  font-weight: 400;
}
.sec__career01_wrap .sec__career-txt {
  margin-bottom: 3rem;
}
/* ===== careers 사무실 전경 캐러셀 =====
   index about02 슬라이더와 같은 톤: 사진 아래 진행 바 + 오른쪽 좌우 화살표.
   배경색은 두지 않고 사진과 컨트롤만 얹는다.
   진행 바 색은 기존 .scrollbar / .scrollbar-thumb(트랙 #ddd / 채움 #000)과 동일 */
.sec__career01_wrap .gallery {
  /* 900px -> content-area 폭 전체. 사진을 키운다 */
  max-width: none;
  margin: 0;
}
.sec__career01_wrap .gallery__viewport {
  overflow: hidden;
}
.sec__career01_wrap .gallery__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.sec__career01_wrap .gallery__slide {
  /* 한 번에 한 장. 폭을 100% 로 고정해야 translateX(-n*100%) 가 정확히 한 장씩 넘어간다 */
  flex: 0 0 100%;
  /* 550px -> 660px. 폭이 1300px 이라 대략 2:1 이 된다 */
  height: 660px;
}
.sec__career01_wrap .gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec__career01_wrap .gallery__controls {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 28px;
}
.sec__career01_wrap .gallery__bar {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: #dddddd;
}
/* 몇 번째 장인지를 채워진 길이로 보여준다. 폭은 JS 가 (index+1)/장수 로 계산한다 */
.sec__career01_wrap .gallery__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #000000;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.sec__career01_wrap .gallery__arrows {
  flex: 0 0 auto;
  display: flex;
  gap: 28px;
}
/* basic.css 의 button 리셋(배경·테두리 없음)이 그대로 맞는 자리라 색만 지정한다 */
.sec__career01_wrap .gallery__arrow {
  font-size: 1.3125rem;
  line-height: 1;
  color: #424242;
  transition: opacity 0.2s ease;
}
/* 첫 장/마지막 장에서 해당 화살표를 흐리게 해 더 넘길 수 없다는 걸 알린다 */
.sec__career01_wrap .gallery__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.sec__career02_wrap {
  /* 일반 섹션 공통 간격 9rem(144px) */
  margin-bottom: 9rem;
}
.sec__career02_wrap .sec__career02-txt > p:last-child {
  /* 타이포는 index 히어로 본문과 동일. 굵기도 본문 토큰(--body-weight: 400)을 따른다.
     아래 카드와의 간격은 .pc_CareersCon02_conbox 의 margin-top 이 혼자 맡는다.
     여기 margin-bottom 을 남겨두면 둘 중 큰 값으로 병합돼 간격이 어긋난다 */
  margin: 0;
  font-weight: var(--body-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: -0.03em;
  color: var(--body-color);
}

.pc_CareersCon02 {
  width: 100%;
  padding: 0 0 200px 0;
  background-color: #f3f3f3;
}

.pc_CareersCon02_W1300 {
  width: 1300px;
  margin: 0 auto;
}

.pc_CareersCon02_W1100 {
  width: 1100px;
  margin: 0 auto;
}

.pc_CareersCon02_subtitle {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: #333333;
  text-align: center;
}

.pc_CareersCon02_title {
  margin: 30px 0 0 0;
  font-weight: 600;
  font-size: 65px;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color: #333333;
  text-align: center;
}

.pc_CareersCon02_subtxt {
  margin: 30px 0 80px 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 2em;
  letter-spacing: -0.03em;
  color: #333333;
  text-align: center;
}

.pc_CareersCon02-1_subtxt {
  margin-top: 30px;
  font-weight: 300;
  font-size: 30px;
  line-height: 2em;
  letter-spacing: -0.03em;
  color: #333333;
  text-align: center;
}

.pc_CareersCon02_conbox {
  /* 위 문단 -> 카드 간격 50px. 아래 career03 의 "문구 -> 이미지" 간격(ul margin-top: 50px)과 맞춘다.
     아래 5rem 은 다음 섹션과의 간격이라 그대로 둔다 */
  margin: 50px auto 5rem;
  /* 1100px -> 1300px. 3열로 바꾸면서 항목 폭을 확보한다.
     .content-area 와 같은 1300px 이라 위 섹션 텍스트와 좌우 끝이 맞는다 */
  width: 1300px;
  padding: 0 0;
  /* 2열 시절 항목을 갈라주던 세로선은 이 배경 이미지(white-bg-pc.jpg)가 그리던 것이다.
     카드 레이아웃에서는 테두리가 그 역할을 하므로 배경을 흰색 단색으로 되돌린다.
     그라디언트는 카드 한 장 한 장이 각자 갖는다.
     common.css 의 background:url(...) 을 덮으려면 단축 속성으로 써야 한다 */
  background: #ffffff;
}

.pc_CareersCon02-1_conbox {
  width: 1100px;
  padding: 0 0 50px;
}

/* 2열(float + 550px) -> 카드 3장씩 한 줄.
   1300px 에서 gap 24px 두 개를 빼고 3등분하므로 카드 폭은 417.33px,
   좌우 끝은 컨테이너(=.content-area 와 같은 1300px)와 정확히 맞는다 */
.pc_CareersCon02_conbox ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 카드. 한 줄 안의 카드들은 그리드가 높이를 맞춰 준다.
   내부는 "아이콘 + 제목" 한 줄, 그 아래 목록이 카드 폭 전체를 쓰는 배치 */
.pc_CareersCon02_conbox ul li {
  display: grid;
  /* 아이콘 칸을 아이콘 폭에 맞춘다(auto). 고정 폭(70px)으로 두면 아이콘마다 남는
     공간이 달라 아이콘 -> 제목 간격이 12~36px 로 제각각이 된다.
     대신 제목 시작선은 아이콘 폭(41~65px)만큼 카드마다 달라진다 */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon  title"
    "list  list";
  align-items: center;
  align-content: start;
  /* 아이콘 -> 제목 간격. 칸이 auto 라 이 값이 곧 6장 공통의 실제 간격이 된다 */
  column-gap: 19px;
  /* 제목 줄 -> 목록 간격. 14px 에서 7px 늘려 목록을 아래로 내린다 */
  row-gap: 21px;
  /* common.css 의 2열 시절 값(float:left / width:550px)을 반드시 지운다.
     안 지우면 카드가 550px 로 고정돼 3장이 컨테이너(1300px) 밖으로 밀려난다 */
  float: none;
  width: auto;
  margin: 0;
  padding: 40px;
  background: #ffffff;
  /* 얇은 선 + 옅은 그림자 조합. 선은 카드 경계를 알려주는 정도로만 두고,
     떠 있는 느낌은 아래 box-shadow 가 맡는다.
     box-sizing: border-box 라 카드 폭(417.33px)은 그대로다 */
  border: 1px solid #e9e8e8;
  border-radius: 12px;
  /* 카드를 바닥에서 띄우는 그림자. 두 겹으로 나눈다 -
     첫 겹(1px/2px)은 테두리 바로 아래 붙는 접지 그림자라 카드가 떠 있는 지점을 고정하고,
     둘째 겹(10px/24px)은 넓게 퍼지는 확산 그림자라 깊이를 만든다.
     한 겹만 쓰면 좁게는 흐릿하고 넓게는 탁해져서 둘 다 얻지 못한다.
     y 값(1px, 10px)만 주고 x 는 0 이라 빛이 바로 위에서 오는 것처럼 좌우 대칭이다 */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 10px 24px rgba(0, 0, 0, 0.028);
}

/* 아이콘. 원형 회색 배지는 걷어내고 아이콘만 놓는다.
   배경과 함께 padding·border-radius 도 뺀다 - 배지가 없으면 padding 은 아이콘만 줄이고,
   border-radius 는 아이콘 네 귀퉁이를 잘라내기 때문이다 */
.pc_CareersCon02_conbox_icon {
  grid-area: icon;
  /* common.css 의 position:absolute / left:0 해제. 그리드 칸에 정상 배치되게 한다 */
  position: static;
  background: none;
  /* 투명 여백을 잘라낸 이미지라 박스 = 그림이다. 폭만 주고 높이는 비율에 맡긴다.
     실제 폭은 아이콘마다 다르므로 아래 nth-child 에서 지정한다.
     예전의 margin-left 음수 보정·object-position 은 그 여백을 상쇄하려던 것이라 이제 필요 없다 */
  height: auto;
  /* 아이콘을 카드 왼쪽에서 5px 안쪽으로. 칸 폭도 같이 늘려 제목이 함께 움직인다 */
  margin-left: 5px;
}
/* 여백을 자르기 전과 똑같은 표시 크기로 되돌린다.
   원래는 500x380 캔버스가 84px 박스에 contain 되어 16.8% 로 축소됐고,
   그림은 그 안에서 자기 크기(387x294 등)만큼만 그려졌다.
   그래서 각 아이콘의 원본 그림 폭 x 0.168 이 예전에 보이던 폭이다 */
.pc_CareersCon02_conbox ul li:nth-child(1) .pc_CareersCon02_conbox_icon {
  width: 65px;
}
.pc_CareersCon02_conbox ul li:nth-child(2) .pc_CareersCon02_conbox_icon {
  width: 52px;
}
.pc_CareersCon02_conbox ul li:nth-child(3) .pc_CareersCon02_conbox_icon {
  width: 41px;
}
.pc_CareersCon02_conbox ul li:nth-child(4) .pc_CareersCon02_conbox_icon {
  width: 43px;
}
.pc_CareersCon02_conbox ul li:nth-child(5) .pc_CareersCon02_conbox_icon {
  width: 58px;
}
.pc_CareersCon02_conbox ul li:nth-child(6) .pc_CareersCon02_conbox_icon {
  width: 45px;
}

/* 래퍼를 레이아웃에서 빼서, 안의 제목·목록이 카드 그리드에 직접 배치되게 한다.
   마크업을 건드리지 않고 "아이콘 옆 제목 / 아래 목록" 을 만들기 위한 장치 */
.pc_CareersCon02_conbox_txtbox {
  display: contents;
  /* common.css 의 position:absolute / width:320px / right:0 해제 */
  position: static;
  width: auto;
}

/* 타이틀 타이포는 index 카드 제목(.card-label)과 동일하게 맞춘다.
   .card-label 은 line-height 를 선언하지 않고 상속(1.15)에 맡기므로 여기서도 선언하지 않는다 */
.pc_CareersCon02_conbox_txt01 {
  grid-area: title;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: #424242;
}

/* 목록 타이포는 index 카드 본문(.card-desc)과 동일하게 맞춘다.
   .card-desc 는 font-weight 를 선언하지 않아 본문 기본값 400 을 쓴다 */
.pc_CareersCon02_conbox_txt02 {
  grid-area: list;
  margin: 0;
  font-weight: 400;
  /* .card-desc 와 동일한 16px */
  font-size: 1rem;
  /* 행간만 .card-desc(1.48em = 23.7px) 대신 30.4px 을 쓴다.
     한 문단이 아니라 항목 목록이라 줄 사이가 더 떨어져야 읽힌다 */
  line-height: 30.4px;
  letter-spacing: -0.03em;
  color: #666666;
}

.sec__career03_wrap {
  background-color: #F3F3F3;
  /* 색 블록 규칙: 위아래 모두 9rem(144px) */
  padding: 9rem 0;
}
.sec__career03_wrap .sub-txt {
  /* 타이포는 index 히어로 본문과 동일. 굵기도 본문 토큰(--body-weight: 400)을 따른다 */
  margin: 0;
  font-weight: var(--body-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: -0.03em;
  color: var(--body-color);
}
/* 카드 줄은 index about01 카드(.sec__about01__cards)와 같은 3열 그리드를 쓴다.
   기존 flex + li{margin:0 10px} 은 첫 카드가 10px 밀려 위 텍스트와 왼쪽이 어긋났고,
   썸네일 원본 폭이 제각각(406/398/407px)이라 오른쪽 끝도 맞지 않았다 */
.sec__career03_wrap .sec__career03_content ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 50px;
}
.sec__career03_wrap .sec__career03_content li {
  margin: 0;
}
/* 이미지 처리는 index 카드(.about01-card img)와 radius 10px·object-fit 을 공유한다.
   높이만 index 카드(calc(15rem + 10px) = 250px)에서 위아래 3px 씩 깎아 244px 로 둔다.
   폭은 그리드 열이 정하므로(width:100%) 높이만 바꿔도 417.33px 그대로이고,
   object-fit: cover 라 줄어든 높이만큼 원본에서 위아래가 잘릴 뿐 찌그러지지 않는다.
   이미지 -> 타이틀 간격(1.2rem)도 여기 margin-bottom 이 담당한다 */
.sec__career03_wrap .sec__career03_content li img {
  width: 100%;
  height: calc(15rem + 4px);
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.2rem;
}
/* 세 번째 썸네일(thumb_03.png)만 - 이 이미지는 문구가 그림에 박혀 있어서
   crop 위치가 곧 구도가 된다. 기본값 center(50%) 로 두면 위아래가 똑같이 잘려
   윗문구 위 여백(11.8px)이 아랫문구 아래 여백(31.2px)보다 좁아 글자 뭉치가 위로 붙어 보인다.
   원본 407x283 에서 윗문구는 y=34, "북적북적" 은 y=230 에서 끝난다.
   컨테이너 폭(417.33px)에 맞춰 1.0254 배로 커지면 높이가 290.2px 이 되고 244px 만 보이므로
   46.2px 이 잘리는데, 이를 위 13.4px / 아래 32.8px 로 나누면 위아래 여백이 21.5px 로 같아진다.
   13.4 / 46.2 = 29% */
.sec__career03_wrap .sec__career03_content li:nth-child(3) img {
  object-position: center 29%;
}
.sec__career03_wrap .sec__career03_content_txt {
  margin-top: 0;
}
/* 카드 타이틀·본문 타이포는 index 카드(.card-label / .card-desc)와 동일하게 맞춘다 */
.sec__career03_wrap .sec__career03_content_txt p:first-child {
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: #424242;
  margin-bottom: 0.8rem;
}
.sec__career03_wrap .sec__career03_content_txt p:last-child {
  /* .card-desc 와 동일한 16px */
  margin: 0;
  font-weight: var(--body-weight);
  font-size: 1rem;
  line-height: 1.48em;
  letter-spacing: -0.03em;
  color: #666666;
}

.pc_CareersCon03 {
  width: 100%;
  padding: 150px 0 80px 0;
  background-color: #0f0800;
}

.pc_CareersCon03_W1300 {
  width: 1300px;
  margin: 0 auto;
}

.pc_CareersCon03_W1100 {
  width: 1100px;
  margin: 0 auto;
}

.pc_CareersCon03_subtitle {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: #fff;
  text-align: center;
}

.pc_CareersCon03_title {
  margin: 30px 0 0 0;
  font-weight: 600;
  font-size: 65px;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
}

.pc_CareersCon03_subtxt {
  margin: 30px 0 0 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 2em;
  letter-spacing: -0.03em;
  color: #b5b5b5;
  text-align: center;
}

.pc_CareersCon03_img {
  margin: 100px auto;
}

.pc_CareersCon03 .w1100 div {
  display: flex;
  justify-content: center;
}

.pc_CareersCon04 {
  position: relative;
  width: 100%;
  height: 747px;
  display: grid;
  place-content: center;
}

.pc_CareersCon04_L {
  position: absolute;
  width: 50%;
  height: 747px;
  left: 0;
  padding-left: 3rem;
  background: url("https://kr.object.ncloudstorage.com/landing-assets/ptbwaweb/statics/img/careers/PC_con04_img01.jpg") top right/cover no-repeat;
}

.pc_CareersCon04_R {
  position: absolute;
  width: 50%;
  height: 747px;
  right: 0;
  padding-left: 3rem;
  background: url("https://kr.object.ncloudstorage.com/landing-assets/ptbwaweb/statics/img/careers/PC_con04_img02.jpg") top left/cover no-repeat;
}

.pc_CareersCon04_title {
  margin: 80px 0 0 130px;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.5em;
  letter-spacing: -0.03em;
  color: #fff;
}

.pc_CareersCon04_txt {
  margin: 50px 0 0 130px;
  /* 300 -> 500. 두 단계(300 -> 400 -> 500) */
  font-weight: 500;
  font-size: 18px;
  line-height: 2em;
  letter-spacing: -0.05em;
  /* 어두운 배경사진 위라 한 단계 밝게. #b5b5b5(181) -> #d9d9d9(217) */
  color: #d9d9d9;
}

/* 왼쪽 여백 145px -> 130px. 위 제목(.pc_CareersCon04_title)·본문(.pc_CareersCon04_txt)과
   같은 130px 을 써서 버튼 왼쪽 끝을 텍스트와 맞춘다.
   평행사변형이던 시절엔 왼쪽이 비스듬히 깎여 있어 15px 을 더 줬지만,
   지금은 라운드 사각형이라 이미지 왼쪽 끝이 곧 버튼 왼쪽 끝이다 */
.pc_CareersCon04_btn {
  margin: 50px 0 0 130px;
  letter-spacing: -0.05em;
  display: inline-block;
}

/* 좌우 버튼을 같은 높이에 못 박는다.
   흐름대로 두면 버튼 위치가 문단 줄 수에 딸려간다. 왼쪽 문단은 <br> 기준 6줄, 오른쪽은 5줄이라
   margin 으로 그 차이(36px)를 보정할 수는 있지만, 화면 폭이 좁아져 문단이 자동 줄바꿈되면
   줄 수 차이가 달라져 다시 어긋난다.
   두 패널(.pc_CareersCon04_L/_R)은 높이가 747px 로 고정된 position:absolute 박스이므로
   버튼도 같은 top 으로 고정하면 문단 길이와 무관하게 항상 맞는다.

   top 492px = 제목 여백 80 + 제목 2줄(40px x 1.5em = 60, x2 = 120)
             + 문단 여백 50 + 문단 6줄(18px x 2em = 36, x6 = 216) + 버튼 여백 26
   -> 긴 쪽(왼쪽)의 자연스러운 위치 그대로다. 왼쪽 문단 -> 버튼 간격은 index 히어로와 같은 약 35px
      (선언값 26px + 문단 아래 행간 여백 9px)로 유지된다.
   left 는 지정하지 않아 정적 위치(패널 padding-left 3rem)를 그대로 쓰고, 거기에 margin-left 130px 이 붙는다 */
.pc_CareersCon04_L .pc_CareersCon04_btn,
.pc_CareersCon04_R .pc_CareersCon04_btn {
  position: absolute;
  top: 492px;
  margin: 0 0 0 130px;
}
.pc_CareersCon04_L a,
.pc_CareersCon04_R a {
  display: inline-block;
}

.sec__service__main-txt {
  background: url("../img/services/IMG_01.png") no-repeat center center/cover;
  max-width: 100%;
  height: 460px;
  padding-top: 120px;
  position: relative;
  color: white;
  margin: 0 auto;
  align-content: center;
  font-size: 4.125rem;
}
.sec__service__main-txt .sub-txt {
  font-size: 1.375rem;
  margin: 0.8rem 0;
  line-height: 1.9rem;
  font-weight: 300;
}

.sec__service01_wrap {
  /* 일반 섹션 공통 간격 9rem(144px) */
  padding: 9rem 0;
}
.sec__service01_wrap .under-highlight {
  width: 26rem;
}
.sec__service01_wrap .sec__career01__top,
.sec__service01_wrap .sec__career01__bottom {
  display: flex;
  justify-content: space-between;
}
/* 원본 547x547 에서 가로는 그대로 두고 세로만 220px 잘라낸 크기.
   clip-path + 음수 마진 대신 실제 박스 크기로 지정해야 아래 align-items 정렬이
   보이는 이미지 가장자리와 맞는다 */
.sec__service01_wrap .sec__career01__top > img,
.sec__service01_wrap .sec__career01__bottom > img {
  width: 547px;
  height: 327px;
  object-fit: cover;
  flex-shrink: 0;
  /* index 카드 이미지(.about01-card img)와 동일한 모서리 */
  border-radius: 10px;
}
/* 위 블록: 텍스트 윗변을 사진 윗변에 맞춘다 */
.sec__service01_wrap .sec__career01__top {
  align-items: flex-start;
}
/* 사진만 40px 아래로. 텍스트 윗변과 딱 붙지 않게 숨통을 준다.
   좌우 위치는 건드리지 않는다 - 사진 속 피사체 위치는 크롭에서 조정한다 */
.sec__service01_wrap .sec__career01__top > img {
  margin-top: 40px;
}
/* 아래 블록: 텍스트 아랫변을 사진 아랫변에 맞춘다 */
.sec__service01_wrap .sec__career01__bottom {
  align-items: flex-end;
}
.sec__service01_wrap .sub-txt {
  font-weight: var(--body-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: -0.03em;
  color: var(--body-color);
}
.sec__service01_wrap .sec__career01__top .highlight-container {
  /* 타이틀 -> 본문 간격은 사이트 공통 25px */
  padding-bottom: 25px;
  /* 밑줄을 문구 길이에 자동으로 맞춘다. 컨테이너를 글자 폭까지 줄이고
     밑줄이 그 폭을 100% 채우게 해서, 문구가 바뀌어도 고정값을 다시 재지 않는다 */
  width: fit-content;
}
.sec__service01_wrap .sec__career01__top .under-highlight {
  width: 100%;
  /* 글자에 겹치는 밑줄(index 히어로와 동일한 -23px). 타이틀 줄 사이에 끼어 있으므로
     border(12px) 와 합쳐 순증 0px 이 되도록 아래 여백 11px 을 준다 */
  margin-top: -23px;
  margin-bottom: 11px;
}
/* 커머스 컨설팅 블록(이미지 + 텍스트) 전체를 60px 아래로 */
.sec__service01_wrap .sec__career01__bottom {
  margin-top: 60px;
}
/* margin-top:10rem 으로 텍스트를 밀어내던 것은 align-items:flex-end 가 대신한다 */
.sec__service01_wrap .sec__career01__bottom .title-txt:first-child {
  text-align: right;
}
.sec__service01_wrap .sec__career01__bottom .highlight-container {
  font-family: "Pretendard", sans-serif;
  position: relative;
}
/* margin-top:1rem 은 "커머스 컨설팅 / :THE GROWTH" 두 줄 사이를 벌려 다른 타이틀보다 넓었다.
   줄 간격은 .title-txt2 의 line-height 로만 만든다 */
.sec__service01_wrap .sec__career01__bottom .highlight-container .title-txt2 {
  text-align: right;
  margin-top: 0;
}
.sec__service01_wrap .sec__career01__bottom .highlight-container .under-highlight {
  position: absolute;
  display: inline-block;
  right: 0;
  z-index: -1;
  width: 24rem;
  /* 글자 아래가 아니라 글자에 겹치도록 index 히어로와 동일한 -23px.
     absolute 라 레이아웃 높이에는 영향이 없어 컨테이너 padding 은 그대로 둔다 */
  margin-top: -23px;
}
.sec__service01_wrap .sec__career01__bottom .sub-txt {
  text-align: right;
  /* 타이틀 -> 본문 간격은 .highlight-container 의 padding-bottom(25px) 만으로 결정한다 */
  margin-top: 0;
  /* p 기본 margin-bottom(1rem) 이 남아 있으면 align-items:flex-end 가 그 마진까지
     포함해 맞추므로 글자가 사진 아랫변보다 16px 위로 뜬다. 여기에 line-height
     1.5em 이 만드는 글자 아래 행간 여백(약 5px)까지 음수 마진으로 걷어낸다 */
  margin-bottom: -5px;
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  font-size: var(--body-font-size);
  letter-spacing: -0.03em;
  color: var(--body-color);
}

.sec__service02_wrap {
  background-color: #F3F3F3;
  /* 색 블록 규칙: 위아래 모두 9rem(144px). 위쪽을 0 으로 두면 글자가 회색 가장자리에 붙는다 */
  padding: 9rem 0;
}
.sec__service02_wrap .sec__service02-txt {
  /* common.css 에 margin-left:20px 이 있어 위 service01 텍스트보다 20px 들어간다.
     선언을 지우면 common.css 값이 되살아나므로 0 으로 명시해 덮어쓴다 */
  margin-left: 0;
  /* 본문 -> 카드 간격을 index about02(.sec__about02-txt 의 margin-bottom)와 동일한 60px 로 */
  margin-bottom: 60px;
}
/* 밑줄을 문구 길이에 자동으로 맞춘다. 컨테이너를 글자 폭까지 줄이고 밑줄이 그 폭을
   100% 채우게 해서, 문구가 바뀌어도 고정 폭을 다시 재지 않는다 (service01 상단과 동일) */
.sec__service02_wrap .sec__service02-txt .highlight-container {
  width: fit-content;
  /* 아래 밑줄이 margin-top(-23px) + border(12px) = -11px 만큼 컨테이너 바닥을 끌어올린다.
     그만큼 더해 타이틀 -> 본문 간격을 사이트 공통 25px 로 맞춘다. index 히어로와 동일 */
  padding-bottom: 36px;
}
.sec__service02_wrap .sec__service02-txt .under-highlight {
  width: 100%;
  /* 밑줄이 글자에 걸치는 정도까지 index 히어로(.sec__about01__hero)와 동일하게 */
  margin-top: -23px;
}
.sec__service02_wrap .sec__service02-txt .sub-txt {
  /* 타이틀 -> 본문 간격은 .highlight-container 의 padding-bottom(25px) 만으로 결정한다.
     about01·about02·about03 와 동일 */
  margin-top: 0;
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
  color: var(--body-color);
}

.pc_CaseCon02 {
  position: relative;
  width: 100%;
}

.pc_CaseCon02_arrowL {
  position: absolute;
  top: auto;
  left: 10px;
  bottom: 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.pc_CaseCon02_arrowR {
  position: absolute;
  top: auto;
  right: 10px;
  bottom: 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.pc_CaseCon02_arrowL img, .pc_CaseCon02_arrowR img {
  width: 70px;
  height: 40px;
}

.pc_CaseCon02_list {
  position: relative;
  width: 100%;
}

/* PC 에서는 Swiper 가 초기화되지 않아 단순 나열이 된다. flex 로 두면 이미지 원본 폭
   (415+414+414=1243px) 만큼만 차지해 오른쪽에 57px 이 남고 카드 사이도 붙는다.
   3등분 그리드로 두면 폭을 꽉 채우면서 간격도 균등해진다.
   gap 24px 은 index 카드(.sec__about01__cards)와 동일한 값 */
.pc_CaseCon02_list ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 칸 폭에 맞춰 이미지를 늘린다. img 기본값은 인라인 + 원본 크기라 칸을 채우지 못한다 */
.pc_CaseCon02_list_W25_img img {
  display: block;
  width: 100%;
  height: auto;
  /* 아래 텍스트 박스와 한 장의 카드로 이어지도록 위쪽 모서리만 둥글린다 */
  border-radius: 10px 10px 0 0;
}

.pc_CaseCon02_list ul li {
  cursor: pointer;
  /* 그리드가 li 를 한 줄의 가장 큰 높이로 늘려주지만, 흰 텍스트박스(height:auto)는 내용만큼만
     차서 카드마다 흰 박스 높이가 달라 보인다. li 를 세로 flex 로 두고 아래 텍스트박스를 flex:1 로
     늘려, 텍스트가 짧은 카드도 흰 박스가 같은 높이까지 채워지게 한다 */
  display: flex;
  flex-direction: column;
}

.pc_CaseCon02_list_W25_img {
  position: relative;
  width: 100%;
}

.pc_CaseCon02_list_W25_txtbox {
  /* 위아래 여백의 기준은 index 카드의 사진~텍스트 간격(.about01-card img 의
     margin-bottom) 1.2rem 이지만, 흰 박스 안이라 그대로 두면 답답해 15px 더 준다.
     고정 높이를 두면 아래 여백이 커지므로 내용에 맞춰 늘어나게 한다 */
  height: auto;
  /* li 의 남는 세로 공간을 채워 카드 3장의 흰 박스 높이를 같게 만든다(짧은 카드도 늘어남) */
  flex: 1 1 auto;
  /* 세로 flex 로 두어야 맨 아래 "자세히 보기" 를 margin-top:auto 로 바닥에 붙일 수 있다.
     본문 줄 수가 카드마다 달라도 3장의 CTA 가 같은 높이에 놓인다 */
  display: flex;
  flex-direction: column;
  padding: calc(1.2rem + 15px) 40px;
  /* 위 이미지와 한 장의 카드로 이어지도록 아래쪽 모서리만 둥글린다 */
  border-radius: 0 0 10px 10px;
}

/* 카드 타이틀 타이포는 index 카드(.card-label)와 동일하게 맞춘다.
   색만 #333333 로 남아 있어 .card-label / about03 / careers 카드(#424242)와
   모바일 .m-case__title(--title = #424242) 어느 쪽과도 어긋났다 */
.pc_CaseCon02_list_W25_txt01 {
  margin: 0 0 20px 0;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color: #424242;
}

.pc_CaseCon02_list_W25_txt02 {
  font-weight: 500;
  font-size: 15px;
  line-height: 2em;
  letter-spacing: -0.08em;
  color: #333333;
}

/* 카드 본문 타이포는 index 카드(.card-desc)와 동일하게 맞춘다 */
.pc_CaseCon02_list_W25_txt03 {
  /* 아래 CTA 와의 간격은 .pc_CaseCon02_list_W25_more 의 padding-top 이 전담한다.
     세로 flex 안에서는 마진이 병합되지 않아 <p> 기본 margin-bottom 이 그대로 더해진다 */
  margin: 0;
  font-weight: var(--body-weight);
  font-size: 1rem;
  line-height: 1.48em;
  letter-spacing: -0.03em;
  color: var(--body-color);
}

/* 카드가 클릭 가능하다는 걸 드러내는 CTA. 모바일 .m-case__more(14px/600) 를 PC 본문 크기로 옮겼다.
   margin-top:auto 로 흰 박스 바닥에 붙여 카드 3장의 CTA 높이를 맞추고,
   본문과 최소 16px 은 떨어지도록 그 간격은 padding-top 으로 확보한다 */
.pc_CaseCon02_list_W25_more {
  margin: auto 0 0;
  padding-top: 16px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.48em;
  letter-spacing: -0.03em;
  /* 바로 위 카드 본문(.pc_CaseCon02_list_W25_txt03)과 같은 색.
     굵기(600)와 호버 밑줄이 이미 CTA 임을 알려 주므로 색까지 진하게 둘 필요는 없다 */
  color: var(--body-color);
}
/* 카드 위에 마우스를 올리면 CTA 가 반응해 클릭 가능하다는 신호를 한 번 더 준다 */
.pc_CaseCon02_list ul li:hover .pc_CaseCon02_list_W25_more {
  text-decoration: underline;
}

.pc_Casebox {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1000;
  display: none;
}

.pc_Caseshadow {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: #000;
  opacity: 0.5;
}

.pc_Case_W100 {
  position: fixed;
  width: 100%;
  background: #fff;
  height: 100vh;
  overflow-y: scroll;
}

.pc_Case_btnX {
  position: absolute;
  top: 50px;
  right: 50px;
  cursor: pointer;
}

.pc_Case_W1100 {
  width: 1100px;
  margin: 0 auto;
  padding: 100px;
}

.pc_Case_W1100.full-img {
  position: fixed;
  width: 100%;
  background: #fff;
  height: 100vh;
  overflow-y: scroll;
  margin: 0 0;
  padding-left: 7rem;
}

.pc_Case_W1100.full-img img {
  margin-top: 0;
}

/* 카드를 눌러 열리는 상세 팝업의 제목. 카드 제목(.pc_CaseCon02_list_W25_txt01)에서
   그대로 이어지는 화면이라 같은 사이트 타이틀 색(#424242)을 쓴다 */
.pc_Case_W1100_title {
  font-weight: 600;
  font-size: 42px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  color: #424242;
}

.pc_Case_W1100_txt01 {
  margin: 50px 0 0 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 1em;
  letter-spacing: -0.05em;
  color: #333333;
}

.pc_Case_W1100_txt02 {
  margin: 10px 0 0 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.8em;
  letter-spacing: -0.05em;
  color: #333333;
}

.pc_Case_W1100_img {
  margin: 90px 0 0 0;
}

.pc_Case_W1100_imgbox {
  position: relative;
  width: 100%;
  height: 940px;
  overflow: hidden;
}

.pc_Case_W1100_imgbox img {
  position: absolute;
  width: 2000px;
  height: 940px;
  left: 50%;
  margin: 0 0 0 -1000px;
}

.pc_Con {
  padding-top: 100px;
}

.pc_ContactCon01 {
  position: relative;
  width: 100%;
  height: 1000px;
  background: #333333;
}

/* 검정 패널 : 지도 = 45 : 55 */
.pc_ContactCon01_L {
  position: absolute;
  width: 45%;
  height: 1000px;
  left: 0;
  background: #333333;
}

.pc_ContactCon01_L_txtbox {
  position: absolute;
  /* careers 의 .content-area(1300px 중앙정렬) 왼쪽 끝 = 화면중앙 - 650px 에 맞춘다.
     부모(.pc_ContactCon01_L)가 화면의 45% 이므로 화면중앙(50%)은 부모 폭의 111.1111%.
     right:0 으로 두면 패널 비율이 바뀔 때마다 왼쪽 선이 같이 움직이므로 left 로 고정한다 */
  width: 650px;
  height: 1000px;
  left: calc(111.1111% - 650px);
  right: auto;
}

.pc_ContactCon01_L_title {
  margin: 150px 0 60px 0;
  font-weight: 700;
  /* 다른 페이지 히어로 타이틀(ad-tech/services/careers)과 동일한 4.125rem = 66px */
  font-size: 4.125rem;
  /* 두 줄짜리 타이틀이라 .title-txt 의 1.2 는 줄 사이가 벌어져 보인다.
     여기만 1.1 을 유지한다. 그만큼 글자 위 여백이 6.6px -> 3.3px 로 줄어드는데,
     아래 Question 섹션은 padding-top 에서 그 차이를 빼서 맞춘다 */
  line-height: 1.1em;
  letter-spacing: -0.05em;
  color: #fff;
}

.pc_ContactCon01_L_txtcon {
  width: 650px;
  margin: 20px 0 0 0;
}

.pc_ContactCon01_L_txtcon_txt01 {
  font-weight: 600;
  font-size: 22px;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: #fff;
}

.pc_ContactCon01_L_txtcon_txt01 img {
  width: 35px;
}

.pc_ContactCon01_L_txtcon_txt02 {
  margin: 5px 0 0 40px;
  font-weight: 300;
  /* 크기만 Question 아래 본문(.pc_ContactCon02_subtxt)과 동일한 19px 로.
     굵기·색상은 어두운 패널용이라 그대로 둔다 */
  font-size: var(--body-font-size);
  line-height: 1.8em;
  letter-spacing: -0.03em;
  color: #fff;
}

.pc_ContactCon01_R {
  position: absolute;
  /* 검정 패널 45% 의 나머지 */
  width: 55%;
  height: 1000px;
  right: 0;
  background: #888888;
}

.pc_ContactCon01_R iframe {
  border: 0;
  width: 100%;
  height: 1000px;
}

.pc_Contact_detail {
  font-weight: 600;
  /* ADDRESS/E-MAIL/CALL/FAX 라벨. 아래 값과 같은 19px */
  font-size: var(--body-font-size);
  line-height: 1em;
  letter-spacing: -0.03em;
  color: #fff;
  display: flex;
  align-content: center;
}

.pc_Contact_detail img {
  width: 35px;
}

.pc_Contact_detail span {
  line-height: 2rem;
  margin-left: 0.5rem;
}

.pc_ContactCon02 {
  width: 100%;
  /* 배경 시작 -> 타이틀 글자까지의 거리를 위 섹션과 같게 맞춘다.
     Where we Work: margin-top 150px + line-height 1.1 의 글자 위 여백 3.3px = 153.3px
     Question     : padding-top + line-height 1.2 의 글자 위 여백 6.6px
     -> padding-top 은 153.3 - 6.6 = 146.7px.
     아래 200px 은 다음 섹션과의 간격이라 유지 */
  padding: 146.7px 0 200px 0;
  /* 위 섹션(검정 패널 45% / 지도 55%)과 같은 지점에서 좌우를 나눈다.
     왼쪽 Question 영역은 기존 회색, 오른쪽 폼 영역은 흰색.
     경계가 45% 로 동일해 위아래 섹션의 세로선이 이어진다 */
  background-color: #f3f3f3;
  background-image: linear-gradient(to right, #f3f3f3 45%, #ffffff 45%);
}

.pc_ContactCon02_W1100 {
  position: relative;
  width: 1100px;
  /* 폼이 absolute 라 이 높이가 섹션 높이를 결정한다.
     라벨·입력창 글자가 커진 만큼(항목당 약 15px) 늘려 잡는다 */
  height: 760px;
  /* 가운데 정렬(margin:0 auto)이면 왼쪽 끝이 화면중앙 - 550px 이라
     careers(.content-area 1300px)의 화면중앙 - 650px 보다 100px 안쪽이었다.
     왼쪽 여백을 직접 계산해 두 페이지의 왼쪽 선을 맞춘다 */
  margin: 0 0 0 calc(50% - 650px);
}

.pc_ContactCon02_L {
  position: absolute;
  width: 550px;
  left: 0;
}

.pc_ContactCon02_title {
  font-weight: 700;
  /* 같은 페이지의 Where we Work 와 동일하게 4.125rem */
  font-size: 4.125rem;
  /* line-height 를 따로 선언하지 않는다. 마크업의 .title-txt 가 주는
     var(--title-line-height)=1.2 를 그대로 써야 index 히어로 타이틀과 조건이 같아지고,
     그래야 아래 본문과의 간격 25px 이 index 와 동일하게 보인다 */
  letter-spacing: -0.05em;
  /* 사이트 타이틀 색 통일(#333333 -> #424242) */
  color: #424242;
}

.pc_ContactCon02_subtxt {
  width: 550px;
  /* 타이틀 -> 본문 간격 25px. index 히어로에서 .highlight-container 의
     padding-bottom(36px) 에서 밑줄이 끌어올리는 11px 을 뺀 값과 같다 */
  margin: 25px 0 0 0;
  /* 타이포는 index 히어로 본문(.sec__about01__hero .sub-txt)과 동일하게.
     같은 토큰을 써서 값이 갈라지지 않게 한다 */
  font-weight: var(--body-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: -0.03em;
  color: var(--body-color);
}

.pc_ContactCon02_R {
  position: absolute;
  width: 500px;
  /* 폼 전체를 오른쪽으로 60px. 라벨·입력창·textarea·제출 버튼이
     모두 이 안에 있어 같이 움직인다 */
  right: -60px;
}

.pc_ContactCon02_R_box {
  width: 500px;
  margin: 0 0 20px 0;
}

.pc_ContactCon02_R_txt {
  margin: 0 0 10px 0;
  font-weight: 400;
  /* 회사명/연락처/... 라벨. 왼쪽 본문과 같은 19px */
  font-size: var(--body-font-size);
  line-height: 1em;
  letter-spacing: -0.03em;
  color: #333333;
}

.pc_ContactCon02_R_input {
  width: 480px;
  /* box-sizing:border-box 라 height:20px + padding:10px 면 글자 자리가 0 이 된다.
     19px 글자가 잘리지 않도록 높이는 내용에 맡긴다 */
  height: auto;
  padding: 10px;
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: 1em;
  letter-spacing: -0.03em;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #000000;
  color: #333333;
  background: none;
}

.pc_ContactCon02_R_Textarea {
  width: 480px;
  height: 210px;
  padding: 10px;
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: 1em;
  letter-spacing: -0.03em;
  border: 1px solid #000;
  color: #333333;
  background: none;
}

/* 버튼 모양·배경은 이미지(pc_btn_marketing_round.png, 198x60)가 전부 갖고 있다.
   careers CTA 버튼과 같은 스펙: radius 12px, 좌우 여백 34px, 위아래 16px.
   common.css 의 skew(20deg)·노란 배경은 여기서 해제한다 */
.pc_ContactCon02_R_btn {
  position: absolute;
  width: 198px;
  left: 50%;
  /* 폼 칸(500px) 정중앙. 버튼 폭의 절반 */
  margin: 20px 0 0 -99px;
  padding: 0;
  border: 0;
  background: none;
  transform: none;
  letter-spacing: -0.05em;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

/* 통일 CTA 버튼 — 다른 칩(전체/고객사/파트너사)과 radius·패딩·글자크기 통일 */
.btn__about {
  gap: 20px;
}
/* .btn__about 밖(careers CTA, contact 제출)에서도 같은 버튼을 쓸 수 있도록
   선택자를 클래스 단독으로도 걸어 둔다. 기존 .btn__about 안의 버튼은 그대로다 */
.btn__about .about-btn,
.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  box-sizing: border-box;
  border: none;
  border-radius: 12px;
  /* <button> 은 폰트를 상속하지 않는다 */
  font-family: "Pretendard", sans-serif;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn__about .about-btn > span,
.about-btn > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.btn__about .about-btn .arrow,
.about-btn .arrow {
  font-style: normal;
  font-weight: 600;
}
.btn__about .about-btn.is-outline,
.about-btn.is-outline {
  background: #ffffff;
  color: #424242;
  border: 2px solid #424242;
}
.btn__about .about-btn.is-fill,
.about-btn.is-fill {
  background: #424242;
  color: #ffffff;
  border: 2px solid #424242;
}
/* 브랜드 노랑 버튼(careers CTA 2개, contact 제출).
   글자색은 .is-outline("애드테크 알아보기")과 같은 #424242 */
.about-btn.is-yellow {
  background: #fdd000;
  color: #424242;
  border: 2px solid #fdd000;
}
/* basic.css 마지막의 button{background:none!important;border:none!important} 이
   <button> 으로 만든 버튼의 배경과 테두리를 지운다. 같은 무게로 되돌린다.
   <a> 로 된 careers 버튼은 이 리셋에 걸리지 않아 위 규칙들만으로 충분하다 */
button.about-btn.is-fill {
  background: #424242 !important;
  border: 2px solid #424242 !important;
}
button.about-btn.is-outline {
  background: #ffffff !important;
  border: 2px solid #424242 !important;
}
button.about-btn.is-yellow {
  background: #fdd000 !important;
  border: 2px solid #fdd000 !important;
}
.btn__about .about-btn:hover,
.about-btn:hover {
  opacity: 0.82;
}

/* careers CTA / contact 제출 버튼을 이미지에서 텍스트 버튼으로 바꾼다.
   .about-btn 이 함께 붙은 마크업에만 걸리므로, 아직 이미지 버튼인 영문 페이지는 그대로다.
   두 규칙 다 기존 .pc_* 규칙(display:inline-block, width:198px 등)을 덮기 위해 클래스 2개로 잡는다 */
.pc_CareersCon04_btn.about-btn {
  /* .pc_CareersCon04_L a / _R a 의 display:inline-block 을 덮는다 */
  display: inline-flex;
  width: auto;
}
/* 이 버튼은 이미지(198px) 시절의 잔재로 position:absolute + left:50% + margin-left:-99px +
   transform:skew 취소로 위치를 잡고 있었다. 텍스트 버튼은 폭이 글자에 따라 변해서
   그 좌표 계산이 성립하지 않는다. 흐름 안(static)으로 되돌리고, index 의
   "서비스 알아보기"와 똑같이 글자 폭에 맞춘다(fit-content).
   가로 위치는 가운데가 아니라 왼쪽 - 위 라벨(회사명·연락처…)과 입력칸의 왼쪽 끝에 맞춘다 */
.pc_ContactCon02_R_btn.about-btn {
  position: static;
  display: flex;
  width: fit-content;
  /* 문의내용 박스 -> 버튼 간격을 index 히어로의 본문 -> 버튼 간격과 같게 맞춘다.
     그쪽은 .sec__about01__hero .btn__about 이 margin-top:30px 인데, 위가 글자라
     본문 <p> 아래에 행간 여백((28.5-19)/2 = 4.75px)이 더 붙어 실제로는 약 35px 이 비어 보인다.
     여기는 위가 textarea 박스라 그 여백이 없으므로 35px 을 직접 준다.
     위 .pc_ContactCon02_R_box 의 margin-bottom(20px)과는 인접 마진이라 겹쳐서 35px 이 된다 */
  margin: 35px 0 0;
  transform: none;
}

/* .pc_ContactCon02_R_btnTxt(버튼 안 이미지 래퍼) 규칙과, 300px 짜리 영문 버튼 이미지를
   가운데 맞추던 html[lang="en"] 오버라이드는 국문·영문 모두 텍스트 버튼으로 바뀌면서 필요 없어졌다.
   특히 영문 오버라이드는 특정도가 (0,2,1) 이라 위 .pc_ContactCon02_R_btn.about-btn (0,2,0) 을 이겨
   translateX(-50%) 가 남고 버튼이 폼 왼쪽 밖으로 밀려나 있었다. 그래서 지웠다 */

/* 섹션 콘텐츠 좌측 정렬 통일 — content-area(1300px)와 동일하게 맞춤 */
.sec__about02_wrap > div,
.sec__about03_wrap > div {
  width: 1300px;
  box-sizing: border-box;
}
/* about02 스와이퍼(이미지·스크롤바)를 content-area(1300px) 양쪽에 맞춤 */
.sec__about02_wrap .scroll-horizontal.container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ===== Clients & Partners 섹션 ===== */
.sec__clients_wrap {
  /* 위 0 / 아래 5rem. 다음 about04 그라데이션의 흰 구간(높이의 20%)이 간격 일부를
     맡고, 나머지를 여기서 채운다. 위 블록이 로고(시각적 덩어리가 큰 그래픽)라
     같은 여백도 글자 뒤보다 좁아 보여, 60px 에서 80px 로 올려 광학적으로 맞춘다 */
  padding: 0 0 5rem;
}
.sec__clients_wrap .clients-inner {
  width: 1300px;
  margin: 0 auto;
}
.sec__clients_wrap .clients-title {
  font-size: 3.5rem;
  font-weight: bold;
  letter-spacing: -0.02em;
  color: #424242;
  line-height: var(--title-line-height);
  /* 아래가 본문 텍스트(.cp-group "고객사")라 다른 섹션의 타이틀 -> 본문과 조건이 같다.
     사이트 공통 25px 를 그대로 쓴다. 필터 버튼이 있던 시절엔 아래가 높이 48px 짜리
     '버튼 박스'라 line-height 윗 여백이 없어, 같은 25px 도 좁아 보여 7px 를 더했었다 */
  margin: 0 0 25px;
}
/* 텍스트 폭에 자동으로 맞춰지는 노란 밑줄 하이라이트 */
/* 다른 섹션은 밑줄이 별도 div 라 margin-top(-23px) 으로 글자에 겹친다. 여기는 글자 폭에
   자동으로 맞으라고 인라인 배경 그라데이션을 쓰므로, 같은 위치(글자 밑변에서 11~23px)에
   12px 띠가 오도록 정지점을 올린다 */
.sec__clients_wrap .clients-title .under-highlight-txt {
  background-image: linear-gradient(to top, transparent 11px, var(--yellow) 11px, var(--yellow) 23px, transparent 23px);
}
/* 섹션 리드 문장. 타이포는 사이트 본문과 동일하고, 타이틀 -> 리드 간격은
   .clients-title 의 margin-bottom(25px)이 만든다.
   아래 "고객사" 라벨과는 60px - about02 의 본문 -> 사진과 같은 값이고, 앞 그룹 로고 -> 라벨
   간격과도 같아 두 라벨의 위 여백이 나란히 맞는다.
   영문 페이지에는 이 문단이 없어 타이틀 -> 라벨 25px 가 그대로 유지된다 */
.sec__clients_wrap .clients-lead {
  margin: 0 0 60px;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  letter-spacing: -0.03em;
  color: var(--body-color);
}
.sec__clients_wrap .clients-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.25rem;
  /* 위 여백은 0. 타이틀 -> "고객사" 간격은 .clients-title 의 margin-bottom(25px) 하나로
     결정하고, 여기서 다시 더하지 않는다 */
  padding: 0 2.5rem 2.5rem;
}
/* ---- 그룹 라벨(고객사 / 파트너사) ----
   격자 한 줄을 통째로 차지해 파트너사 첫 항목(NAVER) 앞에서 줄을 바꾸고,
   그 아래 로고가 어느 그룹인지 알려준다.
   크기·색은 사이트 본문과 같은 19px / #666666 이고, 굵기만 600 이다.
   가운데 정렬이라 타이틀과 왼쪽을 맞추던 음수 여백은 두지 않는다. 격자 안쪽 폭(좌우 2.5rem
   제외)의 한가운데가 아래 로고 줄의 한가운데와 정확히 같은 자리다.
   위아래 간격은 일부러 다르다. 위(앞 그룹 로고 -> 라벨)는 about02 의 본문 -> 사진과 같은
   60px 로 벌려 그룹 경계를 만들고, 아래(라벨 -> 자기 그룹 로고)는 '보이는' 간격이 36px 가
   되게 한다. 격자 gap(20px)이 이미 위아래에 있어 위는 40px 를 더한다.
   아래 값은 라벨마다 다른데, 두 그룹의 칸이 글자를 시작하는 높이가 달라서다(아래 참조) */
.sec__clients_wrap .cp-group {
  grid-column: 1 / -1;
  /* 아래 13px + 격자 gap 20px = 33px. 파트너사 칸은 역할 라벨이 칸 위 3px 에서 시작하므로
     보이는 간격은 36px 가 된다 */
  margin: 40px 0 13px;
  text-align: center;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--body-color);
}
/* 첫 라벨("고객사") 위는 격자 gap 이 아니라 리드 문장의 여백(60px)이라 더할 것이 없다.
   아래는 파트너사 라벨보다 26px 더 당긴다. 고객사 칸은 로고가 높이 7rem 칸에 세로 가운데
   정렬이라 글자가 칸 위에서 29px 아래에서 시작하는 반면, 파트너사 칸은 역할 라벨
   ("공식 파트너")이 3px 에서 시작하기 때문이다. 상자 간격을 똑같이 주면 눈에는 고객사 쪽이
   26px 더 벌어져 보인다. -13px + 격자 gap 20px = 7px, 여기에 29px 를 더해 보이는 간격 36px.
   당겨도 칸 위쪽 빈 공간 안이라 로고와 겹치지 않는다.
   모바일은 파트너사 칸 높이(93px)를 이미 그 여백까지 계산해 잡아 둬 보정이 필요 없다 */
.sec__clients_wrap .cp-group:first-child {
  margin-top: 0;
  margin-bottom: -13px;
}
.sec__clients_wrap .cp-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 7rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  box-sizing: border-box;
}
/* ---- 파트너사 행 ----
   라벨(20px) → 간격(8px) → 로고 박스(3.4rem) 순서의 고정 스택.
   상단부터 쌓기 때문에 로고 렌더 높이와 무관하게 모든 라벨의 상단선이 일치한다.
   고객사 행은 data-role 이 없어 이 규칙에서 제외되고 기존 가운데 정렬을 유지한다. */
.sec__clients_wrap .cp-logo[data-role] {
  position: relative;
  justify-content: center;
}
.sec__clients_wrap .cp-logo[data-role]::before {
  content: attr(data-role);
  position: absolute;
  left: 0;
  right: 0;
  /* 행 중앙에서 로고 박스 절반(1.7rem) + 간격 6px 만큼 위. 박스 높이가 고정이라 모든 라벨의 상단선이 일치한다 */
  bottom: calc(50% + 20px + 6px);
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #475467;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}
/* 로고 박스: 높이를 고정해 로고 크기와 상관없이 모든 행의 광학 중심을 맞춘다 */
.sec__clients_wrap .cp-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.375rem;
}
/* 파트너 로고는 PNG 여백을 걷어내 박스가 꽉 차게 채운다.
   고객사 로고의 평균 여백 비율(fill 88%)에 맞춰 시각적 무게를 맞춘다 */
.sec__clients_wrap .cp-logo-box img {
  max-width: 88%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sec__clients_wrap .cp-logo img {
  max-width: 100%;
  max-height: 3.375rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sec__clients_wrap .cp-logo.is-missing::after {
  content: attr(data-name);
  font-size: 1rem;
  font-weight: 600;
  color: #999999;
  text-align: center;
  letter-spacing: -0.02em;
}