@charset "utf-8";
/* 급여 에이전트 페이지 전용 — Figma 187:59838 (1920x14821) 실측 기준 */

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero-grid{grid-template-columns:52.688% 38.125%;justify-content:space-between;gap:0}
.hero-visual{position:relative;margin-top:clamp(-198px,-10.31vw,-64px)}
/* 히어로 비주얼은 영상이다(디자이너 전달 클립을 세로 카드 비율로 잘라 씀).
   정지 이미지와 같은 규격·라운드를 유지해 chip 오버레이 좌표가 그대로 맞는다. */
.hero-visual>img,
.hero-visual>video{width:100%;height:auto;display:block;border-radius:var(--r-md);
  object-fit:cover;aspect-ratio:610/758}

.chip{position:absolute;width:59.02%;padding:clamp(13px,1.04vw,20px);border-radius:var(--r-md);
  background:rgba(28,28,30,.34);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 48px rgba(0,0,0,.24);
  animation:chip-float 6s ease-in-out infinite}
.chip-t{display:flex;align-items:center;gap:8px;font-size:clamp(11px,.729vw,14px);line-height:1.45;font-weight:700;letter-spacing:-.02em}
.chip-b{margin-top:8px;font-size:clamp(13px,.9375vw,18px);line-height:1.5;color:#fff;letter-spacing:-.02em}
.chip-1{left:34.10%;top:45.38%;animation-delay:0s}
.chip-2{left:6.89%;top:64.51%;animation-delay:-2s}
.chip-3{left:28.85%;top:76.52%;animation-delay:-4s}
.chip-1 .chip-t{color:#F58281}
.chip-2 .chip-t{color:#4FD1C5}
.chip-3 .chip-t{color:#45D97C}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.chip{animation:none}}

.ic{flex:0 0 auto;width:1.15em;height:1.15em;border-radius:50%;position:relative;background:currentColor}
.ic::before{content:"";position:absolute;left:50%;top:5px;translate:-50% 0;
  width:2px;height:7px;background:rgba(0,0,0,.72);border-radius:1px}
.ic::after{content:"";position:absolute;left:50%;bottom:4px;translate:-50% 0;
  width:2px;height:2px;background:rgba(0,0,0,.72);border-radius:50%}
.ic-check::before{top:6px;width:8px;height:4px;border-left:2px solid rgba(0,0,0,.72);
  border-bottom:2px solid rgba(0,0,0,.72);background:none;border-radius:0;rotate:-45deg}
.ic-check::after{display:none}

@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{margin-top:0}
  .chip{position:static;width:auto;margin-top:12px;animation:none;
    background:#1C1C1E;box-shadow:0 8px 24px rgba(0,0,0,.14)}
  .chip-b{font-size:16px;line-height:25px}
}

/* ── pain point ───────────────────────────────────────────────────────── */
.pain-head{display:flex;align-items:flex-start;gap:40px}
.pain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.625%;
  margin-top:clamp(56px,9.27vw,178px)}
/* 시안 주석(김형주 2026-08-25): mouse hover 시 상단 stroke Gray_4 → Primary.
   Gray_4 = #E8E8E8 (Figma 원본 변수 실측). 홈·에이전트·플랫폼 공통. */
.pain-item{grid-column:span 1;min-height:clamp(0px,13.021vw,250px);padding-top:21px}
.pain-item:first-child{grid-column-start:2}
/* 테두리는 커서를 "따라간다" — 한 번에 하나만 주황이다.
   그리드에 마우스가 들어오면 기본 주황(lead)을 회색으로 내리고, 지금 가리킨 카드만 주황으로 올린다.
   (이 처리가 없으면 lead 가 계속 주황이라 주황이 둘이 되고, 옮겨간 것으로 안 보인다 — 에이전트 카드와 같은 규칙) */
/* 시안 데스크톱 332:60064 — 26/32 SemiBold ls -0.4. 굵기만이 아니라 크기(28)·행간(1.16)
   ·자간(-0.84)도 어긋나 있었다. 홈·세무와 같은 토큰이라 값도 같다(ark-2b 실측). */
.pain-n{font-size:clamp(20px,1.3542vw,26px);line-height:clamp(26px,1.6667vw,32px);
  font-weight:600;letter-spacing:-.0154em}
.pain-n span{font-size:.86em}
/* 시안 332:60066: 24/36 Regular #646464 ls -0.2 (행간 1.5=36 은 맞고 색·자간이 달랐다) */
.pain-l{margin-top:6px;font-size:clamp(16px,1.25vw,24px);line-height:1.5;color:#646464;
  letter-spacing:-.00833em}
.pain-r{margin-top:clamp(24px,3.39vw,65px);text-align:right;font-size:clamp(16px,1.1458vw,22px);line-height:1.55;font-weight:700;
  color:var(--brand);letter-spacing:-.02em}
.pain-r::before{content:"→";margin-right:10px;font-weight:400}
@media (max-width:1100px){
  .pain-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6%}
  .pain-item:first-child{grid-column-start:1}
}
/* 모바일 시안 614:6379 — 항목마다 상단 회색선 + 위아래 20 여백, 화살표 줄은 우측 정렬 */
@media (max-width:1023px){
  .pain-head{flex-direction:column;gap:16px}
  .pain-grid{grid-template-columns:1fr;gap:0;margin-top:58px}
  .pain-item{min-height:0;padding:20px 0}
  .pain-n{font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.02em}
  .pain-n span{font-size:1em}
  .pain-l{margin-top:2px;font-size:16px;line-height:24px;color:#646464}
  .pain-r{margin-top:10px;text-align:right;font-size:20px;line-height:26px}
  .pain-r::before{margin-right:6px}
}

/* ── structure ────────────────────────────────────────────────────────── */
.structure .lead{margin-top:8px}
/* 도식은 시안 1100x784 (1920 기준 57.29vw). 세무의 같은 도식과 규칙을 맞춘다 —
   전에는 급여만 max-width:68.75% 라 모바일에서 241px 로 쪼그라들었고(세무는 350px),
   같은 그림이 페이지마다 다른 크기로 나왔다.
   ※ 모바일은 2026-08-29 부터 전용 자산(pay-structure-m.png)을 쓴다 — 아래 모바일 블록 참조.
     데스크톱 자산 확대로는 라벨 크기가 시안과 달라 안 맞는다(대기 해소). */
/* 데스크톱: PC 시안 그대로 — 도식 1100x784 를 100% 로, 바깥 흰 원 포함(2026-08-30 복원, 세무 .tp-frame 과 동일).
   이전 판(창 1130x1096 + 자산 194% 확대 + 원 지운 pay-structure-flat.jpg)은 시안에 없는 변형이었다.
   spot·설명선 % 좌표는 도형(1100x784) 기준이라 그대로 산다. */
.structure-frame{position:relative;margin:clamp(20px,2.1875vw,42px) auto 0;
  width:min(1100px,57.2917vw);max-width:100%}
/* ── 구조도 — 시안 레이어 재조립 (도식 752:57659 / hover 632:58642 / 카드 1042:66594) ──
   좌표 전부 시안 실측: 도식 박스 686@ (207,49) in 1100x784. 라벨 클러스터 중심 ±159/201/190/207.5.
   화살표 2·4 는 export 가 회전 미적용이라 CSS rotate(시안 111.92° / -68.08°). */
.tp-fig{position:relative;margin:0;aspect-ratio:1100/784;text-align:left}
.tp-crop{display:none}
.tp-dgm{position:absolute;left:18.818%;top:6.25%;width:62.364%;aspect-ratio:1/1;margin:0}
.tp-ring{position:absolute;display:block}
.tp-r1{inset:0;width:100%;height:100%}
.tp-r2{inset:11.52%;width:76.96%;height:76.96%}
.tp-r3{inset:24.05%;width:51.9%;height:51.9%}
.tp-core{position:absolute;inset:40.52%;display:flex;align-items:center;justify-content:center;
  background:var(--brand);box-shadow:0 0 0 clamp(5px,.469vw,9px) #FFF1E3;border-radius:999px}
.tp-core img{width:40%;height:auto}
.tp-ar{position:absolute}   /* 배치 = 시안 design-context inset(회전 후 bbox) 중심 + 회전각. 메타데이터 x/y(회전 전)로 잡으면 틀린다 */
.tp-a1{left:30.440%;top:37.245%;width:12.342%;height:18.817%;transform:translate(-50%,-50%)}
.tp-a2{left:69.495%;top:37.005%;width:12.679%;height:18.367%;transform:translate(-50%,-50%) rotate(111.92deg)}
.tp-a3{left:68.825%;top:63.155%;width:13.891%;height:19.938%;transform:translate(-50%,-50%) rotate(180deg)}
.tp-a4{left:31.290%;top:63.280%;width:13.239%;height:20.297%;transform:translate(-50%,-50%) rotate(-68.08deg)}
.tp-lab{position:absolute;transform:translate(-50%,-50%);z-index:2}
.tp-lab-1{left:50%;top:24.198%}
.tp-lab-2{left:80.25%;top:49.271%}
.tp-lab-3{left:50%;top:76.676%}
.tp-lab-4{left:22.30%;top:49.708%}
.tp-pill{border:0;cursor:help;background:#000;color:#fff;border-radius:999px;font-family:inherit;
  font-weight:700;font-size:clamp(15px,1.0417vw,20px);line-height:1.3;letter-spacing:-.02em;white-space:nowrap;
  padding:clamp(7px,.469vw,9px) clamp(13px,.885vw,17px) clamp(8px,.573vw,11px);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
/* 검정 필은 24/30, 흰 필은 20/26 — 시안 632:58664 vs 632:58685. 세무는 전부 20/26 이고
   tax.html 이 payroll.css 를 먼저 읽으므로 급여 전용 값은 .p-payroll 로 가둔다(누수 방지) */
.p-payroll .tp-pill:not(.is-white){font-size:clamp(18px,1.25vw,24px);line-height:1.25;letter-spacing:-.0167em}
.tp-pill.is-white{background:#fff;color:#000;border:1px solid #E0E0E0;padding-block:clamp(7px,.469vw,9px);padding-inline:clamp(11px,.781vw,15px)}
.tp-pill:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.tp-who{position:absolute;top:calc(100% + clamp(4px,.3125vw,6px));left:50%;transform:translateX(-50%);width:max-content;display:flex;align-items:center;gap:4px;padding:3px 4px;background:#fff;border-radius:8px;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.12));font-weight:700;color:rgba(0,0,0,.7);white-space:nowrap;
  font-size:clamp(11px,.7292vw,14px);line-height:1.5;letter-spacing:-.2px}
.tp-who img{width:clamp(18px,1.25vw,24px);height:clamp(18px,1.25vw,24px)}
.tp-ava{border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
/* hover — 필 10px 상승 + 그림자, 배지는 사라지고 그 자리에 카드 */
/* hover 히트영역 고정 — 필이 transform 으로 올라가고 배지가 사라져도 판정이 흔들리지 않게 한다.
   고정 전에는 배지 위에 마우스를 두면 hover→배지 display:none→hover 해제→배지 복귀가 무한 반복되어
   카드가 opacity 0.31~0.58 중간값에 갇혔다(실측 2026-09-01, 2페이지×4라벨 전부 재현). */
.tp-lab::after{content:"";position:absolute;inset:0;border-radius:999px}
.tp-pill{position:relative;z-index:1}
.tp-who{pointer-events:none}
.tp-lab:hover,.tp-lab:focus-within{z-index:6}
.tp-lab:hover .tp-pill,.tp-lab:focus-within .tp-pill{transform:translateY(-10px);filter:drop-shadow(0 8px 10px rgba(255,96,0,.6))}
.tp-lab:hover .tp-who,.tp-lab:focus-within .tp-who{display:none} /* opacity/visibility 로는 잔상이 남았다(실측) */
.tp-note{position:absolute;margin:0;width:clamp(240px,16.667vw,320px);color:#000;text-align:left;
  transform:translate(-50%,6px);border-radius:clamp(15px,1.0417vw,20px);padding:clamp(15px,1.0417vw,20px);
  background:linear-gradient(105deg,#fff 0%,rgba(255,255,255,.4) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-size:clamp(13px,.9375vw,18px);line-height:1.556;letter-spacing:-.011em;
  opacity:0;pointer-events:none;z-index:5;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.tp-note b{color:var(--brand)}
.tpn-h{display:flex;align-items:center;gap:6px;margin:0 0 clamp(6px,.4167vw,8px);font-weight:700;color:var(--brand);
  font-size:clamp(12px,.8333vw,16px);line-height:1.5}
.tpn-h img{width:clamp(18px,1.25vw,24px);height:clamp(18px,1.25vw,24px)}
.tpn-h-x{color:var(--ink)}
.tp-n1{left:50%;top:30.612%}
.tp-n2{left:68.86%;top:52.296%}
.tp-n3{left:50%;top:76.531%}
.tp-n4{left:32.73%;top:52.679%}
.tp-fig:has(.tp-lab-1:hover) .tp-n1,.tp-fig:has(.tp-lab-1 :focus-visible) .tp-n1,
.tp-fig:has(.tp-lab-2:hover) .tp-n2,.tp-fig:has(.tp-lab-2 :focus-visible) .tp-n2,
.tp-fig:has(.tp-lab-3:hover) .tp-n3,.tp-fig:has(.tp-lab-3 :focus-visible) .tp-n3,
.tp-fig:has(.tp-lab-4:hover) .tp-n4,.tp-fig:has(.tp-lab-4 :focus-visible) .tp-n4{opacity:1;transform:translate(-50%,0)}
/* 마우스가 없는 기기에서는 hover 로 볼 수 없으므로 목록을 남긴다 */
.structure-notes{display:none}
@media (hover:none){.structure-notes{display:block}}
/* 시안 587:74966 — 도식은 375x369 창에 원이 꽉 차게 들어간다(캔버스 686 을 1.83배로 확대해
   좌우·상하를 잘라낸 구도). 폭에 맞춰 통째로 줄이면 원이 절반 크기로 쪼그라든다(사용자 지적). */
@media (max-width:1023px){
  /* 모바일은 전용 export(.tp-crop) — PC 조립 도식·카드는 숨긴다(목록은 .structure-notes) */
  .structure-frame{aspect-ratio:auto;overflow:visible;width:100%;margin:0}
  .tp-fig{aspect-ratio:auto}
  .tp-dgm,.tp-note{display:none}
  /* 시안 서브카피는 14/21 이다(실측 pitch 21). 16/24 로 두면 세 줄로 흘러 도식이
     29px 아래로 밀린다. */
  .structure .lead{font-size:14px;line-height:21px}
  /* 모바일은 전용 자산(pay-structure-m.png, 375x369)을 풀블리드로 깐다 — 데스크톱 자산을
     확대·크롭하던 방식으로는 라벨 크기가 시안과 달라 아무리 맞춰도 그림이 안 나온다.
     시안 위치: 제목 밑 24 · 높이 369 · 그 아래 24 에 번호 목록. */
  .tp-crop{display:block;position:relative;width:calc(100% + var(--gutter)*2);max-width:none;
    height:auto;margin:24px calc(var(--gutter)*-1) 0;overflow:visible;left:auto;top:auto}
  /* 태블릿(600~1023)에서는 본문 열이 560 으로 고정된다. 도식만 600(열+거터)으로 퍼지면
     다른 미디어보다 좌우 20 씩 튀어나와 어긋나 보인다 — 이 구간만 열 폭에 맞춘다.
     599 이하는 시안 관계(도식이 카드보다 거터만큼 넓다)를 그대로 둔다. */
  @media (min-width:600px){
    .tp-crop{width:100%;margin-inline:0}
  }
  .tp-crop img{position:static;translate:none;width:100%;max-width:none;height:auto}
}
@media (max-width:1023px){
  /* 좁은 화면에서는 툴팁이 갈 자리가 없다. 다이어그램 아래 목록으로 보여준다. */
  .spot{display:none}
  /* 시안 960:58936 — 번호 매긴 목록. 제목 16/20 Bold, 설명 14/21 이 24 들여쓰기 */
  .structure-notes{display:grid;gap:24px;margin-top:24px;text-align:left;counter-reset:sn}
  .structure-notes li{counter-increment:sn;font-size:14px;line-height:21px;color:#8D8D8D;
    letter-spacing:-.0143em;padding-left:24px}
  /* 번호가 본문 열보다 5px 왼쪽으로 튀어나와 있었다 — 시안 실측: 번호 첫 글자 x26,
     설명 x45. 우리는 21/45 였다. 제목 블록을 5px 안으로 들인다. */
  .structure-notes b{display:block;margin:0 0 4px -19px;font-size:16px;line-height:20px;
    color:var(--ink);font-weight:700;letter-spacing:-.0125em}
  .structure-notes b::before{content:counter(sn) ". "}
}

/* ── value (dark) ─────────────────────────────────────────────────────── */
.value>.wrap>.display{margin-bottom:clamp(48px,7.0833vw,136px)}
.value-row{display:grid;grid-template-columns:44.375% 38.125%;justify-content:space-between;
  align-items:center;gap:0}
.value-row+.value-row{margin-top:clamp(56px,7.08vw,136px)}
.value-row.is-flip{grid-template-columns:38.125% 44.375%}
.value-row.is-flip .value-copy{order:2}
.value-row.is-flip .value-media{order:1}
.value-copy .h2 .soft{color:rgba(255,255,255,.42)}
/* 시안 실측: 제목 48/60(2줄=120), 본문 24/36. 홈과 같은 값이다.
   세무는 이 규칙이 아예 없어 기본 h3(21px)로 떨어져 있었고, 급여는 본문이 18px 였다. */
.value-copy h3{font-size:clamp(30px,2.5vw,48px);line-height:clamp(40px,3.125vw,60px);
  font-weight:700}
/* 시안 원본(293:50041): 48px 에 letter-spacing -0.4px, 본문 24px 에 -0.2px — 둘 다 -0.00833em.
   -.03em/-.02em 으로 잡아 글자가 줄마다 2~3% 좁았다(잉크폭 실측 338→329). */
.value-copy p{margin-top:clamp(12px,1.0417vw,20px);font-size:clamp(15px,1.25vw,24px);
  line-height:1.5;color:rgba(255,255,255,.8);letter-spacing:-.00833em}
.value-media img{width:100%;height:auto;border-radius:var(--r-md);aspect-ratio:1/1;object-fit:cover}
@media (max-width:1023px){
  .value{padding-block:72px}
  .value>.wrap>.display{margin-bottom:44px}
  /* .is-flip 의 열 정의가 더 구체적이라 같은 구체성으로 눌러야 1열이 된다 */
  /* gap:28 은 근거 없는 값이었다 — 시안(614:6452)은 이미지 밑 12 이고 그 12 는 다른 데서
     이미 나온다. 게다가 .is-flip(0,2,0)이 mobile.css 의 .value-row(0,1,0)를 이겨
     짝수 블록만 28 이 더 붙어 있었다(실측: 1·3행 478/457 = 시안값, 2행 485 = +28). */
  .value-row,.value-row.is-flip{grid-template-columns:1fr;row-gap:0}
  /* QA 944:57764 "(모든 화면 공통) 디자인처럼 상단 이미지 - 하단 헤드라인으로 수정".
     모바일 시안은 이미지가 위, 카피가 아래다. 전에는 반대였다. */
  .value-row .value-media,.value-row.is-flip .value-media{order:1}
  .value-row .value-copy,.value-row.is-flip .value-copy{order:2}
  .value-row+.value-row{margin-top:56px}
  .value-copy p{margin-top:14px;line-height:28px}
}

/* ── features ─────────────────────────────────────────────────────────── */
.feat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4%;
  margin-top:clamp(48px,7.24vw,139px)}
.feat i{display:block;width:clamp(34px,2.5vw,48px);height:clamp(34px,2.5vw,48px);background:center/contain no-repeat}
.feat i.fic-won{background-image:url("fic-1.png")}
.feat i.fic-book{background-image:url("fic-2.png")}
.feat i.fic-receipt{background-image:url("fic-3.png")}
.feat i.fic-sign{background-image:url("fic-4.png")}
.feat i.fic-cv{background-image:url("fic-5.png")}
.feat h3{margin-top:clamp(16px,1.56vw,30px);font-size:clamp(20px,1.4583vw,28px);line-height:1.21;font-weight:700;letter-spacing:-.02em}
.feat p{margin-top:8px;font-size:clamp(15px,1.0417vw,20px);line-height:1.5;color:#767676;letter-spacing:-.02em}
@media (max-width:1100px){
  .feat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 4%}
}
/* 모바일 시안 631:6422 — 2열 카드가 아니라 1열 리스트고, 아이콘은 오른쪽 끝 24px */
@media (max-width:1023px){
  .feat-grid{grid-template-columns:1fr;gap:36px;margin-top:64px}
  .feat{display:grid;grid-template-columns:minmax(0,1fr) 24px;column-gap:20px;align-items:start}
  .feat i{grid-area:1/2;width:24px;height:24px}
  .feat h3{grid-area:1/1;margin-top:0;font-size:20px;line-height:26px;letter-spacing:-.02em}
  .feat p{grid-area:2/1;margin-top:4px;font-size:16px;line-height:24px;color:#8D8D8D}
}

/* ── time saving (dark) ───────────────────────────────────────────────── */
/* 시안 632:59179 는 마우스를 올리면 배경에 따뜻한 빛이 번진다(기본형은 검정).
   실측: 우하단 (134,102,71) · 중앙우 (97,52,37) · 좌상단 (3,3,2). */
/* 시안 752:57860(1920x1156) 실측: 여백 200/200 · 제목→블록 96 · 라벨 24/30 Bold ·
   gap 10 · 숫자 96 ExtraBold(800) lh1.3 ls-1 (막대 165) · gap 10 · 설명 16/24 Medium white.7 ·
   블록 사이 48. 이전 값(116/122 등)은 근거가 약했다. */
.saving{position:relative;isolation:isolate;
  padding-block:clamp(100px,10.4167vw,200px)}
.saving::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity 1s var(--ease);
  background:
    radial-gradient(58% 62% at 96% 96%, rgba(190,140,92,.55) 0%, rgba(190,140,92,0) 70%),
    radial-gradient(52% 56% at 68% 68%, rgba(150,72,48,.45) 0%, rgba(150,72,48,0) 72%),
    radial-gradient(60% 60% at 22% 96%, rgba(90,88,66,.30) 0%, rgba(90,88,66,0) 74%)}
.saving:hover::before,.saving:focus-within::before{opacity:1}
@media (hover:none),(max-width:1023px){.saving::before{opacity:1}}
.saving .display{margin-bottom:clamp(48px,5vw,96px)}
/* 이 섹션 제목만 56/68 이다(다른 섹션 display 65/76 보다 작다 — 시안 752:57860).
   모바일은 28/34 라(실측 pitch 34) PC 구간에만 건다 — 전 구간에 걸면 모바일이 34/42 가 된다. */
@media (min-width:1024px){
  .saving .display{font-size:clamp(46px,2.9167vw,56px);line-height:clamp(56px,3.5417vw,68px)}
}
/* 숫자 줄은 전체 폭을 쓴다 — 게이지 막대가 콘텐츠 폭(1600)까지 뻗어야 하기 때문. */
.saving-list{margin:0}   /* dl 기본 여백 1em(16) 이 섹션 아래쪽에 남아 있었다 */
.saving-row{max-width:none}
.saving-row dt,.saving-b{max-width:51.25%}
.saving-row+.saving-row{margin-top:clamp(24px,2.5vw,48px)}
.saving-row dt{font-size:clamp(16px,1.25vw,24px);line-height:1.25;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:-.0167em}
.saving-row dd{margin:0}
/* 숫자 줄은 96x1.3=125 인데 막대는 165 라 위아래로 20 씩 넘친다 — 시안 간격 10 에 그만큼을
   더해 잡아야 라벨·설명을 덮지 않는다(10+20=30). PC 시안은 ExtraBold(800)다 —
   모바일 인스턴스(56/68 Bold)와 다르므로 아래 모바일 블록에서 700 으로 되돌린다. */
.saving-n{margin-top:clamp(16px,1.5625vw,30px);padding-left:0;
  font-size:clamp(48px,5vw,96px);line-height:1.3;font-weight:800;
  letter-spacing:-.0104em;color:#fff}
.saving-row.is-after .saving-n{color:#fff}
.saving-b{margin-top:clamp(16px,1.5625vw,30px);font-size:clamp(13px,.8333vw,16px);line-height:1.5;
  font-weight:500;color:rgba(255,255,255,.7);letter-spacing:-.0125em}

/* 게이지 — 시안 632:59179. 마우스를 올리면 숫자 뒤로 막대가 차오른다.
   실측(1920): 막대 높이 165, 도입 전 x160..1760(=콘텐츠 폭 100%), 도입 후 x160..490(20.625%).
   색은 왼쪽 투명 → 오른쪽 불투명으로 이어지는 그라디언트다(한 가지 색이 아니다). */
.saving-n{position:relative;z-index:0}
.saving-gauge{position:absolute;left:0;top:50%;translate:0 -50%;z-index:-1;
  width:0;height:clamp(56px,8.594vw,165px);border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 34%,rgba(255,255,255,.70) 100%);
  transition:width .9s cubic-bezier(.16,1,.3,1)}
.saving-row.is-after .saving-gauge{
  background:linear-gradient(90deg,rgba(255,96,0,0) 0%,rgba(255,96,0,.45) 42%,#FF6000 100%);
  transition-delay:.14s}
.saving:hover .saving-gauge,.saving:focus-within .saving-gauge{width:100%}
.saving:hover .saving-row.is-after .saving-gauge,
.saving:focus-within .saving-row.is-after .saving-gauge{width:20.625%}
/* hover:none 만 걸면 좁게 줄인 데스크톱 창에서 막대가 0 인 채로 남는다(사용자 지적) */
@media (hover:none),(max-width:1023px){
  .saving-gauge{width:100%}
  .saving-row.is-after .saving-gauge{width:20.625%}
}
/* 모바일 시안 실측(632:59086) — 막대 높이 108, '도입 후' 막대 폭 43.6%(데스크톱 20.6% 아님),
   숫자는 막대 안에 들어간다. 라벨 16/20 · 설명 14/21. */
/* 시안 모바일 실측(급여 PNG 픽셀, 섹션 h724 기준):
   여백 100 / 제목 28·34 / gap 56 / 라벨 16·20 / gap 10 / 막대 108(숫자 56·68) /
   gap 10 / 설명 13·16 / 블록 사이 56 / 여백 100. 합 724. */
@media (max-width:1023px){
  .saving{padding-block:100px}
  .saving-row dt,.saving-b{max-width:none}
  .saving .display{margin-bottom:56px}
  .saving-row dt{font-size:16px;line-height:20px}
  /* 모바일 인스턴스는 56/68 Bold — PC 의 ExtraBold 와 다르다 */
  .saving-n{margin-top:10px;padding-left:0;font-size:56px;line-height:108px;font-weight:700;letter-spacing:-.02em}
  .saving-gauge{height:108px}
  .saving-row.is-after .saving-gauge{width:43.6%}
  /* 시안 description/md-m = 13/16 Medium(500) ls -0.4. 400·-0.13 로 그려 두면 글이 넓어져
     세무 설명이 한 줄 더 흐른다(756 vs 시안 740). 데스크톱 토큰은 별개라 여기서만 바꾼다. */
  .saving-b{margin-top:10px;font-size:13px;line-height:16px;font-weight:500;letter-spacing:-.4px}
  .saving-row+.saving-row{margin-top:56px}
}

/* ── data value / cost ────────────────────────────────────────────────── */
.duo{padding-block:clamp(80px,11.98vw,230px) clamp(56px,6.25vw,120px)}
.duo-grid{display:grid;grid-template-columns:767fr 797fr;gap:2.25%}
.duo-card{margin:0}
.duo-card img{width:100%;height:auto;border-radius:var(--r-md)}
@media (max-width:1023px){.duo{padding-block:72px}.duo-grid{grid-template-columns:1fr;gap:20px}}

/* ── trust ────────────────────────────────────────────────────────────── */
.trust .lead{margin-top:14px}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25%;
  margin-top:clamp(36px,4.58vw,88px)}
/* 기본 흑백 → hover 컬러 (2026-08-31 사용자 확인).
   근거: 이전 자산(1a3ceb4 이전, 기본 아트보드 export)은 채도 0 의 흑백이고,
   hover 아트보드(632:59193 "mouse hover") 노드 export 는 컬러다 — 두 상태가 실제로 다르다.
   8/29 에 "흑백 대신 컬러" 지시를 받고 hover 를 구현하는 대신 기본까지 컬러로 바꾼 것이 오류였다.
   지금은 컬러 자산(632:59199/59203/59207)을 깔고 기본에 grayscale(1), hover 에서 해제한다. */
.trust-grid img{width:100%;height:auto;border-radius:var(--r-md);aspect-ratio:520/540;object-fit:cover}
.trust-grid li{overflow:hidden;border-radius:var(--r-md)}
/* 흑백은 hover 가 있는 기기에서만 — 모바일 시안(631:6493)은 컬러다(채도 실측 12.7/21.3).
   스코프 없이 걸면 터치 기기에서 영원히 흑백으로 남는다. */
@media (hover:hover){
  .trust-grid img{filter:grayscale(1);transition:filter .3s var(--ease)}
  .trust-grid li:hover img,.trust-grid li:focus-within img{filter:grayscale(0)}
}
/* 시안 631:6493(h1346): 여백 100/100 · 제목 3줄 102 + 서브 42(14/21) · 제목블록→카드 48 ·
   카드 300 높이 gap 20. 카드 폭은 시안이 325(x20, 우측 30)로 비대칭인데 그건 시안 쪽
   실수로 보여 335(열 폭)로 두고 높이만 300 에 맞춘다 — 섹션 합계는 동일하다. */
@media (max-width:1023px){
  /* mobile.css 의 `.trust{padding:24px 0 108px}` 는 홈 NPS 카드용인데 클래스가 같아
     급여 사진 그리드에도 걸린다. 페이지로 스코프해 되돌린다(0,2,0 > 0,1,0). */
  .p-payroll .trust{padding-block:100px}
  .p-payroll .trust .lead{margin-top:14px;font-size:14px;line-height:21px}
  /* gap 도 mobile.css 의 홈용 14 가 이긴다 — 같이 스코프한다 */
  .p-payroll .trust-grid{grid-template-columns:1fr;gap:20px;margin-top:48px}
  .p-payroll .trust-grid img{aspect-ratio:335/300}
}

/* ── interview ────────────────────────────────────────────────────────── */
.interview{padding-block:var(--pad-sec) clamp(80px,10.94vw,210px);
  border-radius:var(--r-lg) var(--r-lg) 0 0}
/* 시안 614:6566(h1200): 여백 125/125, 카드 298·298·322 gap 16 — 카드는 이미 맞다 */
@media (max-width:1023px){ .interview{padding-block:125px} }

/* ── for CEO ──────────────────────────────────────────────────────────── */
.forceo{padding-block:var(--pad-sec) clamp(56px,6.25vw,120px)}
.forceo .display{margin-bottom:clamp(28px,2.92vw,56px)}
.forceo-grid{display:grid;grid-template-columns:repeat(2,35%);justify-content:center;gap:3%}
.forceo-grid figure{margin:0}
.forceo-grid img{width:100%;height:auto;border-radius:var(--r-md);aspect-ratio:1/1;object-fit:cover}
.forceo-grid figcaption{margin-top:clamp(12px,.94vw,18px)}
.forceo-grid figcaption p{margin-top:8px;font-size:var(--fs-sm);line-height:1.6}
@media (max-width:1023px){
  /* 시안 614:6631(h1180): 여백 124/54 · 제목 68 · 제목→카드 36 · 카드 425 두 장 gap 48 */
  .forceo{padding-block:124px 54px}
  .forceo-grid{grid-template-columns:1fr;gap:48px;margin-top:36px}
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-sec{padding-block:clamp(56px,6.25vw,120px) clamp(80px,10.42vw,200px)}
.faq-sec .display{margin-bottom:clamp(28px,2.92vw,56px)}
@media (max-width:1023px){.faq-sec{padding-block:72px}}


/* ── 히어로 — 시안 819:6713 (1856x875 라운드 카드) ─────────────────────
   세무와 같은 형식이다. 이미지에 카피가 구워져 있어 좁은 폭에서는 읽히지 않으므로
   그때만 실제 텍스트 블록을 낸다(세무와 동일한 처리). */
/* QA 944:57880 (급여·세무 공통) 헤더와 히어로 이미지 사이 여백.
   시안(819:6713)은 히어로 카드가 y=80, 즉 nav 아래에서 시작하고 nav 는 흰 바탕이다.
   구현은 이미지를 y=0 부터 깔고 nav 를 그 위에 얹어(data-nav=dark) 여백이 없었다. */
.pyhero{padding-top:var(--nav-h);padding-bottom:0}
.pyhero .wrap{padding-inline:clamp(8px,1.667vw,32px);max-width:none}
/* QA 944:58122 — 카피·버튼·채팅카드를 이미지에서 빼내 DOM 으로 그린다.
   시안 실측(819:6713): 카드 1856x875 라운드 48 · padding 160/100 · 아래정렬 좌우 끝 ·
   딤 linear-gradient(270deg, 검정 .5 → .43) · 아이브로 20/30 Medium ·
   헤드라인 56/68 Bold(-0.4, "승인만" #FF6000) · 간격 16 / 32 ·
   버튼 흰 배경 180x58 라운드 12, 글자 20/26 Bold 검정 ·
   채팅카드 360w 라운드 16 p20 gap12, bg 검정 .1 + 흰 테두리 .3 + blur 16 ·
   라벨 16/20 Bold(첫 두 장 opacity .7) · 본문 18/22 Medium 흰색 · 첫 장 왼쪽 64 들여쓰기 */
.pyhero-fig{position:relative;margin:0;border-radius:clamp(24px,2.5vw,48px);overflow:hidden;
  aspect-ratio:1856/875;isolation:isolate}
.pyhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pyhero-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.43))}
.pyhero-in{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(24px,3.33vw,64px);
  padding:clamp(32px,5.208vw,100px) clamp(24px,8.333vw,160px);color:#fff}
.pyhero-title{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(8px,.8333vw,16px)}
.pyhero-eyebrow{font-size:clamp(15px,1.0417vw,20px);line-height:1.5;font-weight:500;
  letter-spacing:-.01em}
.pyhero-title h1{font-size:clamp(30px,2.9167vw,56px);line-height:1.2143;font-weight:700;
  letter-spacing:-.00714em}
.pyhero-title h1 .hl{color:var(--brand)}
.pyhero-cta{margin-top:clamp(8px,.8333vw,16px);display:inline-flex;align-items:center;justify-content:center;
  width:clamp(120px,9.375vw,180px);padding-block:clamp(10px,.8333vw,16px);
  border-radius:clamp(8px,.625vw,12px);background:#fff;color:#000;
  font-size:clamp(15px,1.0417vw,20px);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.pyhero-cta:hover{background:var(--brand);color:#fff}
.pyhero-chat{display:flex;flex-direction:column;gap:clamp(8px,.625vw,12px);flex:0 0 auto}
.pyhero-chat-row{display:flex}
.pyhero-chat-row.is-indent{padding-left:clamp(20px,3.333vw,64px)}
.pyhero-chat-row.is-end{justify-content:flex-end}
.ph-card{width:clamp(240px,18.75vw,360px);padding:clamp(12px,1.0417vw,20px);
  border-radius:clamp(10px,.8333vw,16px);background:rgba(0,0,0,.1);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;gap:clamp(5px,.4167vw,8px)}
.ph-who{display:flex;align-items:center;gap:6px;
  font-size:clamp(12px,.8333vw,16px);line-height:1.25;letter-spacing:-.025em}
.ph-who img{width:clamp(18px,1.25vw,24px);height:clamp(18px,1.25vw,24px);flex:0 0 auto}
.ph-who b{font-weight:700;opacity:.7}
.ph-who b.is-solid{opacity:1}
.ph-msg{font-size:clamp(13px,.9375vw,18px);line-height:1.2222;font-weight:500;
  letter-spacing:-.0222em;color:#fff}
.pyhero-copy{display:none}
/* 모바일 시안 632:58756 실측 — 데스크톱과 순서가 뒤집힌다.
   카피(y128) → 이미지(y406, 335x600) 순서고, 알림 카드 3장은 이미지 *안*에 남는다.
   기존 구현은 이미지를 위에 놓고 카드를 통째로 감췄다(사용자 지적 2026-08-28). */
@media (max-width:1023px){
  .pyhero .wrap{display:flex;flex-direction:column;padding-inline:0}
  .pyhero-copy{display:block;order:1;padding:72px var(--gutter) 0}
  .pyhero-copy h1{font-size:var(--fs-hero);line-height:var(--lh-hero);
    font-weight:700;letter-spacing:-.0125em}
  .pyhero-copy h1 .hl{color:var(--brand)}
  .pyhero-sub{margin-top:8px;font-size:14px;line-height:21px;font-weight:500;
    letter-spacing:-.0143em;color:var(--body)}
  .pyhero-cta2{display:inline-flex;margin-top:20px;padding:10px 16px;border-radius:8px;
    background:var(--ink);color:#fff;font-size:16px;line-height:20px;font-weight:700;
    letter-spacing:-.0125em}

  /* 시안은 375 기준이다 — 태블릿 폭에서 그대로 늘리면 히어로가 1500px 넘게 길어진다. 상한을 둔다. */
  /* 폭은 다른 미디어(카드·도식)와 같이 열 폭을 쓴다 — 420 상한을 두면 460~599 에서
     히어로만 420, 카드는 560 이라 어긋난다(사용자가 태블릿에서 지적한 것과 같은 증상). */
  .pyhero-fig{order:2;margin:36px 0 0;align-self:center;
    width:calc(100% - var(--gutter)*2);max-width:none;
    aspect-ratio:335/600;max-height:752px;border-radius:24px}
  /* 시안은 원본을 823폭으로 깔고 x=-97 에 놓는다 → cover 기준 가로 21% 지점 */
  .pyhero-bg{object-position:21% 50%}
  /* 모바일 사진은 시안 노드 export 를 그대로 쓴다(<picture>) — 색보정·딤이 이미 구워져
     있으므로 CSS 로 다시 손대지 않는다. 데스크톱은 기존 자산 + ::after 딤 유지. */
  .pyhero-fig::after{display:none}
  /* 카드만 남긴다 — 카피는 위에서 이미 텍스트로 나갔다 */
  /* 시안(375)은 마지막 카드 밑선이 이미지 밑에서 32 다. 위에서 41.667% 로 잡으면
     이미지가 커질 때(태블릿 폭에서 열 폭 560) 카드만 그대로라 밑에 300px 넘게 빈다 —
     실측 900 에서 밑여백 307. 아래를 기준으로 붙여 어느 폭에서든 밑선이 맞게 한다. */
  .pyhero-in{display:block;position:absolute;inset:auto 0 5.33% 0;
    padding:0;height:auto}
  .pyhero-title{display:none}
  .pyhero-chat{gap:12px}
  /* 시안 좌표(이미지 335 기준): 카드 x54/19/103, 폭 260/263/232 */
  .pyhero-chat-row,.pyhero-chat-row.is-indent{padding:0}
  .pyhero-chat-row.is-indent .ph-card{margin-left:16.12%}
  .pyhero-chat-row:nth-child(2) .ph-card{margin-left:5.67%}
  .pyhero-chat-row.is-end .ph-card{margin-left:auto;margin-right:5.97%}
  /* 시안 632:58765 — 흰 10% 바탕 · 라운드 16 · 패딩 14 · 라벨 13/16 · 본문 16/20 */
  .ph-card{width:auto;padding:14px;border-radius:16px;gap:8px;background:rgba(255,255,255,.1)}
  .pyhero-chat-row:nth-child(1) .ph-card{width:77.6%}
  .pyhero-chat-row:nth-child(2) .ph-card{width:78.5%}
  .pyhero-chat-row:nth-child(3) .ph-card{width:69.3%}
  .ph-who{gap:8px;font-size:13px;line-height:16px;font-weight:500}
  .ph-who img{width:20px;height:20px}
  /* 전역 keep-all 은 어절 단위로만 끊어 세 줄이 된다. 시안(Figma)은 글자 단위로 흐른다. */
  .ph-msg{font-size:16px;line-height:20px;word-break:normal}
  .ph-msg br{display:none}
}

/* value 제목 그라데이션 각 — 시안 블록별 실측값 (293:50042 / 50100 / 50107) */
.value-row:nth-of-type(1) .grad{--ga:106.9486deg}
.value-row:nth-of-type(2) .grad{--ga:107.4641deg}
.value-row:nth-of-type(3) .grad{--ga:107.4641deg}
/* 375 보다 좁으면 이미지도 같이 줄지만 카드 글자는 16px 고정이라 두 번째 카드가 세 줄이 된다
   — 실측 360 에서 마지막 카드가 이미지 밑선을 4px 넘었다. 묶음을 조금 위에서 시작한다. */
/* 태블릿(600~1023)은 미디어가 열 폭(560)이라 시안 비율(335:600)을 그대로 쓰면
   히어로가 1003 높이가 된다 — 사진 한 장에 스크롤 1000px 은 과하다. 시안에 태블릿 판이
   없어 높이만 낮춘다(335:450 → 560x752). 세무·플랫폼도 같은 값(ark-2b, mobile.css). */
/* 열 폭이 420 을 넘으면 시안 비율(335:600)로는 사진이 1000px 가까이 길어진다.
   비율을 갈아끼우면 경계에서 높이가 186 튀므로(459 750 → 460 564) max-height 로 막는다 —
   폭을 따라 752 까지 자라다 멈춰서 어디서도 튀지 않는다. 시안에 이 구간 판은 없다. */
@media (min-width:460px) and (max-width:1023px){
  /* 높이가 눌린 만큼 세로가 잘린다 — 가운데로 자르면 인물 머리가 날아간다. 위 기준으로. */
  .pyhero-bg{object-position:21% 6%}
}

/* ≤374 의 시작 위치 보정은 아래 기준 정렬로 불필요해졌다(카드가 길어져도 위로 자란다) */
/* 320(구형 SE)에서는 카드 두 장이 세 줄로 늘어 이미지를 54px 넘겼다 — 글자·여백을 한 단 줄인다 */
@media (max-width:359px){
  .ph-card{padding:11px;gap:6px}
  .ph-msg{font-size:14px;line-height:19px}
}