@charset "utf-8";
/* Alfred 2026-08 시안 구현 — 공용 디자인 시스템
   정본: Figma bjcKaH5t4lTEFZLQK1bNIJ (작업완료 띠)
   좌표·크기는 1920 기준 실측값. 그 아래 폭은 좌우 여백만 줄여 맞춘다(레이아웃 재설계 없음). */

/* ── 폰트 ─────────────────────────────────────────────────────────────── */
@font-face{font-family:Pretendard;font-weight:100 900;font-display:swap;
  src:url("fonts/PretendardVariable.woff2") format("woff2-variations")}

/* ── 토큰 ─────────────────────────────────────────────────────────────── */
:root{
  --brand:#FF6000;
  --ink:#000;
  --ink-2:#111;
  --body:#5B5B5B;
  --body-dim:#8A8A8A;
  --line:#E6E6E6;
  --paper:#fff;
  --surface:#F0F0F0;
  --surface-2:#FAFAFA;
  --dark:#000;

  /* 폭 스케일 — 1920 기준 설계를 1200~1920 구간에서 "비례 축소"만 한다(레이아웃 재설계 없음).
     S(1920 기준 px) → clamp(S*0.625, S/19.2 vw, S) 이면 1200에서 정확히 62.5% 축소된다.
     본문 글자만 예외로 하한을 높인다 — 비례 축소하면 1200에서 읽기 어려워진다. */
  --gutter:clamp(20px, 8.334vw, 160px);
  --maxw:1600px;

  --fs-display:clamp(41px, 3.3854vw, 65px);  --lh-display:clamp(52px, 3.9583vw, 76px);
  --fs-hero:clamp(41px, 3.4375vw, 66px);     --lh-hero:clamp(54px, 3.9583vw, 76px);
  --fs-h2:clamp(28px, 2.3438vw, 45px);       --lh-h2:clamp(38px, 3.125vw, 60px);
  --fs-h3:clamp(21px, 1.7188vw, 33px);       --lh-h3:clamp(30px, 2.0833vw, 40px);
  --fs-lead:clamp(16px, 1.0417vw, 20px);     --lh-lead:clamp(25px, 1.5625vw, 30px);
  --fs-body:clamp(15px, .9375vw, 18px);      --lh-body:clamp(26px, 1.5625vw, 30px);
  --fs-sm:clamp(14px, .8333vw, 16px);        --lh-sm:clamp(23px, 1.3542vw, 26px);
  --fs-xs:clamp(12px, .7292vw, 14px);        --lh-xs:clamp(19px, 1.1458vw, 22px);

  /* 세로 리듬 — 1920 기준 160px */
  --pad-sec:clamp(72px, 8.3333vw, 160px);
  --r-lg:clamp(20px, 2.0833vw, 40px);   /* 섹션 상단 라운드 40 */
  --r-md:clamp(14px, 1.25vw, 24px);     /* 카드 라운드 24 */

  --nav-h:clamp(58px, 4.1667vw, 80px);
  --radius:20px;
  --radius-sm:12px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:1023px){
  :root{
    --nav-h:56px;   /* 모바일 시안 360:63330 = 375x56 (padding 20/14 + 로고 24) */
    /* 모바일 타입 스케일 = 시안 토큰 그대로 (급여 614:6311 실측).
       display-bold/xs 32/44 · 28/34 · heading-bold/md 24/30 · heading-bold/sm 20/26
       · body-regular/sm-r 16/24 · body-regular/md-r 14/21 · 12/18 */
    --fs-display:28px; --lh-display:34px;
    --fs-hero:32px;    --lh-hero:44px;
    --fs-h2:24px;      --lh-h2:30px;
    --fs-h3:20px;      --lh-h3:26px;
    --fs-lead:16px;    --lh-lead:24px;
    --fs-body:16px;    --lh-body:24px;
    --fs-sm:14px;      --lh-sm:21px;
    --fs-xs:12px;      --lh-xs:18px;
    --gutter:20px;
    --pad-sec:100px;   /* 시안 모바일 섹션 상하 여백 100 (614:6311 전 섹션 공통) */
  }
}

/* ── 리셋 ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 한글은 어절 단위로 끊는다. keep-all 만 두면 긴 단어가 넘치므로 break-word 를 같이 둔다. */
  word-break:keep-all;overflow-wrap:break-word}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── 레이아웃 ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative}
.sec-pad{padding-block:var(--pad-sec)}

.on-dark{background:var(--dark);color:#fff}
.on-surface{background:var(--surface)}

/* ── 타이포 유틸 ──────────────────────────────────────────────────────── */
.display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;letter-spacing:-.02em}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.02em}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--body);font-weight:500}
.small{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.dim{color:var(--body)}
.on-dark .dim,.on-dark .lead{color:rgba(255,255,255,.8)}
.hl{color:var(--brand)}
.center{text-align:center}

/* 섹션 라벨 — 히어로 아이브로우 등 (pain 섹션의 "Pain Point" 배지는 2026-08-28 QA 로 삭제) */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);line-height:22px;
  font-weight:600;color:var(--body-dim);letter-spacing:0}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;display:block}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:clamp(46px,3.02vw,58px);padding-inline:clamp(22px,1.67vw,32px);border-radius:10px;
  font-size:clamp(15px,.9375vw,18px);line-height:1;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  transition:transform .18s var(--ease),background-color .18s var(--ease),
             color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{background:var(--brand);border-color:var(--brand);box-shadow:0 10px 28px rgba(255,96,0,.28)}
.btn:active{transform:translateY(1px)}
.btn-sm{height:40px;padding-inline:20px;font-size:clamp(14px,.8333vw,16px);border-radius:8px}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(0,0,0,.24)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.on-dark .btn,.footer .btn{background:#fff;color:var(--ink);border-color:#fff}
.on-dark .btn:hover,.footer .btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.on-dark .btn-ghost,.footer .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.on-dark .btn-ghost:hover,.footer .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ── 네비게이션 ───────────────────────────────────────────────────────── */
/* 시안 360:62018 — 상단 바(80) + 그 아래 전체 폭 메가메뉴 패널(#191919).
   패널은 항목 제목 + 설명 한 줄을 갖는다. 모바일은 전체 화면 서랍. */
.nav{position:fixed;inset:0 0 auto;z-index:90;
  /* 바·패널·글자·버튼이 같은 시간·같은 곡선으로 움직여야 한 덩어리로 바뀐다.
     .nav 자신은 전환하지 않는다 — 여기서 color 를 애니메이션하면 color:inherit 인
     자식이 '움직이는 값'을 다시 쫓아가 전환이 두 번 겹치고(실질 0.4s) 글자만 늦는다. */
  --t-nav:.2s}
.nav-bar{position:relative;height:var(--nav-h)}
/* 바 뒤로 지나가는 본문이 메뉴 글자와 겹쳐 읽히는 것을 막는 막(스크림).
   레퍼런스 사이트도 바 전체에 세로 그라디언트를 깐다(실측: 검정 알파 126→0, 선형).
   우리는 밝은 구간에서 메뉴 글자가 잉크색이라 흰 막을, 어두운 구간에서는 검은 막을 쓴다.
   바보다 조금 더 내려오게 해서 글자가 갑자기 튀어나오지 않고 서서히 드러난다.
   .nav 의 ::before 로 둔다 — .nav-bar 보다 먼저 그려져 로고·메뉴 아래에 깔린다. */
/* 디자인 리뷰(송지영 2026-08-28): "에이전트 페이지 상단에 흰색 그라데이션이 이미지영역까지
   내려온다" — 밝은 구간의 흰 막이 바보다 1.6배 길어 히어로 카드 위를 40px 덮고 있었다.
   가이드(271:49049)의 흰 네비게이션은 그라디언트가 아니라 '바 높이만큼의 흰 판'이다.
   어두운 구간(영상 위)만 아래로 흐르는 막을 쓴다. */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;
  height:var(--nav-h);pointer-events:none;background:#fff}
.nav.is-dark::before{height:calc(var(--nav-h) * 1.6);
  background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 42%,rgba(0,0,0,0) 100%)}
/* 패널이 열리면 흰 판이 그 자리를 덮으므로 막은 필요 없다 */
.nav.has-mega::before,.nav.has-drawer::before{opacity:0;transition:opacity var(--t-nav) var(--ease)}
/* 바의 흰 판. 패널과 완전히 같은 채널(opacity)·같은 시간·같은 곡선으로 나타난다. */
.nav-bar::before{content:"";position:absolute;inset:0;background:#fff;opacity:0;
  pointer-events:none;transition:opacity var(--t-nav) var(--ease)}
.nav-in{position:relative;display:flex;align-items:center;height:100%}
/* 링크 박스를 그림 크기와 같게 두면 좁은 폭에서 터치 높이가 20px 밖에 안 된다.
   그림 비율은 안쪽 svg 가 유지하고, 링크는 최소 44px 높이를 갖게 한다. */
.nav-logo{flex:0 0 auto;display:flex;align-items:center;min-height:44px;color:var(--ink);
  transition:color var(--t-nav) var(--ease)}
.nav-logo svg{width:clamp(80px,5.885vw,113px);height:auto;aspect-ratio:113/28}
.nav-menu{display:flex;align-items:center;gap:clamp(28px,3.33vw,64px);margin-left:clamp(48px,6.875vw,132px)}
.nav-link{position:relative;font-size:clamp(15px,.9375vw,18px);line-height:28px;font-weight:500;
  letter-spacing:-.01em;color:inherit;transition:color var(--t-nav) var(--ease)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav-link:hover,.nav-link[aria-expanded="true"],.nav-link.is-here{color:var(--brand)}
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after,
.nav-link.is-here::after{transform:scaleX(1)}
.nav-cta{margin-left:auto}
.nav .btn{transition:background-color var(--t-nav) var(--ease),color var(--t-nav) var(--ease),
  border-color var(--t-nav) var(--ease)}

/* 메가메뉴 패널 — 기본은 라이트(흰 배경 + 검은 글자).
   시안 360:61873 실측: 배경 #FFF · 카테고리 라벨 #CECECE · 항목 제목 #000 · 세로 구분선 #E8E8E8.
   어두운 히어로 위에서만 다크로 뒤집는다(아래 .nav.is-dark .mega). */
.mega{position:absolute;left:0;right:0;top:var(--nav-h);background:#fff;color:var(--ink);
  border-top:1px solid rgba(0,0,0,.07);border-bottom:1px solid rgba(0,0,0,.07);
  opacity:0;transition:opacity var(--t-nav) var(--ease)}
.mega.is-open{opacity:1}
.mega-in{display:flex;align-items:flex-start;gap:45px;
  padding-block:clamp(24px,1.875vw,36px)}
.mega-label{flex:0 0 auto;width:clamp(120px,10.42vw,200px);
  font-size:clamp(18px,1.25vw,24px);line-height:34px;font-weight:700;color:#CECECE;letter-spacing:-.02em}
.mega-items{flex:1 1 auto;display:grid;gap:20px;
  border-left:1px solid #E8E8E8;padding-left:24px}
.mega-items.is-2col{grid-template-columns:238px 1fr;column-gap:64px;row-gap:20px}
.mega-items.is-plain{gap:20px}
.mega-items a,.mega-items .is-soon{display:block;width:max-content;max-width:100%}
/* 아직 대상이 없는 Resources 항목 — 자리·글자는 링크와 같고 클릭만 없다.
   밑줄 hover 도 걸지 않는다(누를 수 있는 것처럼 보이면 안 된다). */
.mega-items .is-soon b::after,.drawer-group .is-soon b::after{content:none}
.mega-items .is-soon i,.drawer-group .is-soon i,
.mega-items a i,.drawer-group a i{font-style:normal;margin-left:6px;font-size:.8em;opacity:.75}
.drawer-group .is-soon{display:block;margin-top:20px}
/* 제목 밑줄 — 탑메뉴와 같은 원리로 왼쪽에서 오른쪽으로 채운다(사용자 지시 2026-08-28).
   길이는 글자 폭까지만이다(시안 944:6413 근접샷: '급여' 두 글자 아래만 선이 있다).
   기존엔 a 가 width:max-content 인데 자식 중 설명문이 더 넓어 a 폭 = 설명문 폭이 됐고,
   b 가 display:block 이라 그 폭을 꽉 채워 선이 칸 끝까지 갔다 → b 를 제 글자 폭에 가둔다.
   색·두께는 시안 그대로 1px 잉크(주황 아님) — 탑메뉴와 '원리'만 맞추고 값은 시안을 따른다. */
.mega-items b{display:block;width:max-content;max-width:100%;position:relative;
  font-size:clamp(16px,1.0417vw,20px);line-height:30px;font-weight:700;letter-spacing:-.02em}
.mega-items b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease)}
.mega-items span{display:block;margin-top:6px;font-size:clamp(11px,.7292vw,14px);line-height:21px;
  color:#767676;letter-spacing:-.02em}
.mega-items a:hover b::after,.mega-items a:focus-visible b::after,
.mega-items a[aria-current] b::after{transform:scaleX(1)}
/* 지금 보고 있는 페이지는 상시 표시 — 탑메뉴 .is-here 와 짝을 맞춘다.
   JS 는 aria-current 를 붙이고 있었는데 받는 규칙이 없었다. */
.mega-items a[aria-current] b{color:var(--brand)}
.mega-items a:hover span{color:var(--ink-2)}

/* 패널은 어두운 히어로 위에서도 항상 화이트다(사용자 지시 2026-08-23).
   시안 복사본에는 다크 변형도 있으나 레퍼런스 사이트 기준 화이트로 통일한다. */

/* 테마: hero 위(투명) ↔ 스크롤 후(흰 배경) ↔ 다크 섹션 위 */
/* is-solid 는 더 이상 바를 칠하지 않는다(레퍼런스: 스크롤해도 투명 유지).
   클래스는 JS·다른 규칙이 참조하므로 남겨 둔다. */
.nav.is-dark{color:#fff}
.nav.is-dark .nav-logo{color:#fff}
.nav.is-dark .btn{background:#fff;color:var(--ink);border-color:#fff}
.nav.is-dark .btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
/* 열려 있는 동안은 바 본체까지 패널과 같은 흰색이 된다 — 바만 투명하게 남으면
   흰 패널이 공중에 뜬 것처럼 보인다. 닫히면 다시 투명(is-solid 도 칠하지 않음). */
.nav.has-mega .nav-bar::before{opacity:1}
.nav.has-mega,
.nav.is-dark.has-mega{color:var(--ink)}
.nav.has-mega .nav-logo,
.nav.is-dark.has-mega .nav-logo{color:var(--ink)}
.nav.is-dark.has-mega .btn{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 모바일 햄버거 */
.nav-burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center}
.nav-burger span{display:block;position:relative;width:22px;height:2px;background:currentColor;
  transition:background-color .2s var(--ease)}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:currentColor;transition:transform .24s var(--ease),top .2s var(--ease)}
.nav-burger span::before{top:-7px}
.nav-burger span::after{top:7px}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* 모바일 서랍 */
.drawer{position:fixed;inset:var(--nav-h) 0 auto;z-index:89;
  background:#000;color:#fff;max-height:calc(100dvh - var(--nav-h));overflow:auto;
  opacity:0;transition:opacity var(--t-nav) var(--ease)}
.drawer.is-open{opacity:1}
.drawer-in{padding:20px var(--gutter) 40px}
.drawer-group+.drawer-group{margin-top:32px}
.drawer-group h2{font-size:16px;line-height:24px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.drawer-group a{display:block;margin-top:20px}
.drawer-group b{display:block;font-size:19px;line-height:26px;font-weight:700;letter-spacing:-.02em}
.drawer-group span{display:block;margin-top:4px;font-size:14px;line-height:20px;color:#9D9D9D}
.drawer-group.is-plain a{margin-top:16px}
/* 서랍은 시안(nav/mobile-menu.png)대로 검정 — 배경 #000, 제목 흰색, 설명 #9D9D9D.
   2026-08-23 "패널과 같이 화이트" 지시는 2026-08-29 사용자 결정(시안 정합)으로 대체됐다. */

@media (max-width:1023px){
  .nav-menu,.mega{display:none}
  .nav-burger{display:flex;width:24px;height:24px;margin-left:12px}
  /* 시안 모바일 nav(360:63330): 로고 · [상담 신청] · 햄버거. 버튼은 12/16 Bold · 패딩 12/6 · 라운드 6.
     전에는 서랍이 열렸을 때만 보였다 — 시안은 항상 보인다. */
  .nav-cta{display:flex;margin-left:auto}
  .nav-cta .btn{height:auto;padding:6px 12px;border-radius:6px;
    font-size:12px;line-height:16px;letter-spacing:-.0167em}
  /* 서랍이 열리면 상단 바도 서랍과 같은 테마로 — 서랍이 검정이라 바도 다크다
     (시안: 흰 로고 + 흰 상담신청 버튼(글자 검정) + 흰 X) */
  .nav.has-drawer,.nav.is-dark.has-drawer{color:#fff;background:#000}
  .nav.has-drawer .nav-logo,.nav.is-dark.has-drawer .nav-logo{color:#fff}
  .nav.has-drawer .nav-bar::before,
  .nav.is-dark.has-drawer .nav-bar::before{opacity:0}
  .nav.has-drawer .nav-cta{margin-right:0}
  .nav.has-drawer .nav-cta .btn,.nav.is-dark.has-drawer .nav-cta .btn{
    height:34px;padding-inline:14px;font-size:13px;
    background:#fff;color:var(--ink);border-color:#fff}
}
@media (min-width:1024px){.drawer{display:none}}

/* ── 히어로 공통 ──────────────────────────────────────────────────────── */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(48px, 14.48vw, 278px));
  padding-bottom:var(--pad-sec);overflow:hidden}
.hero-grid{display:grid;align-items:start}
.hero h1{font-size:var(--fs-hero);line-height:var(--lh-hero);font-weight:700;letter-spacing:-.03em}
.hero .lead{margin-top:clamp(10px,.78vw,15px)}
.hero .btn{margin-top:clamp(20px,1.61vw,31px)}
@media (max-width:1023px){
  .hero{padding-top:calc(var(--nav-h) + 40px)}
  .hero-grid{grid-template-columns:1fr;gap:40px}
}

/* ── 카드/표면 ────────────────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--radius);overflow:hidden}
.card-quiet{background:var(--surface-2);border:1px solid var(--line)}
.media{border-radius:var(--radius);overflow:hidden;position:relative;background:var(--surface)}
.media img{width:100%;height:100%;object-fit:cover}

/* 대체 비주얼 — 실 자산 전 자리표시 (디자이너 리뷰용) */
.media-ph{aspect-ratio:1/1;display:grid;place-items:center;
  background:linear-gradient(135deg,#FFE9DC 0%,#FFD3B6 45%,#FFB48A 100%);color:#9A5A32;
  font-size:14px;font-weight:600;letter-spacing:.02em}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{max-width:61.25%;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(10px,.83vw,16px)}
/* 시안 실측: 닫힌 항목 #FFF · 열린 항목 #F0F0F0 · 아이콘은 두 상태 다 회색(주황 아님) */
.faq-item{background:#fff;border-radius:16px;overflow:hidden;
  transition:background-color .2s var(--ease)}
.faq-item:hover{background:#F7F7F7}
.faq-item.is-open{background:var(--surface)}
.faq-q{display:flex;align-items:flex-start;gap:24px;width:100%;text-align:left;
  padding:clamp(16px,1.25vw,24px);font-size:var(--fs-lead);line-height:1.5;
  font-weight:600;letter-spacing:-.02em}
.faq-q span{flex:1}
.faq-icon{flex:0 0 auto;width:clamp(24px,1.667vw,32px);height:clamp(24px,1.667vw,32px);border-radius:50%;position:relative;
  background:#C6C6C6;transition:background-color .2s var(--ease),transform .28s var(--ease)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:#fff;border-radius:1px;transition:opacity .2s var(--ease),transform .28s var(--ease)}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px}
.faq-item.is-open .faq-icon{background:#BFBFBF}
.faq-item.is-open .faq-icon::after{opacity:0;transform:rotate(90deg)}
.faq-q:hover .faq-icon{background:#AFAFAF}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 clamp(16px,1.25vw,24px) clamp(16px,1.25vw,24px);
  font-size:var(--fs-sm);line-height:1.75;color:var(--body)}
.faq-a b{color:var(--ink);font-weight:600}
.faq-a a{color:var(--brand);font-weight:600;border-bottom:1px solid transparent;
  padding-block:4px;transition:border-color .15s}
.faq-a a:hover{border-bottom-color:currentColor}
@media (max-width:1023px){
  .faq{max-width:none}
  .faq-q{padding:18px;font-size:17px;line-height:26px;gap:14px}
  .faq-a p{padding:0 18px 18px;font-size:15px;line-height:25px}
}

/* ── 푸터 (닫는 CTA + 링크) ───────────────────────────────────────────── */
.footer{position:relative;color:#fff;isolation:isolate;overflow:hidden;background:#171015;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.footer::before,.footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
.footer::before{background:url("wave.jpg") center/cover no-repeat;opacity:.42;
  mix-blend-mode:overlay;filter:saturate(115%)}
.footer::after{background:
    radial-gradient(120% 90% at 92% 108%, rgba(255,164,104,.30) 0%, rgba(255,164,104,0) 62%),
    radial-gradient(90% 70% at 8% -10%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #221D1E 0%, #1D1719 55%, #33231A 100%)}
.footer::after{z-index:-2}
.footer-cta{padding-block:var(--pad-sec)}
.footer-cta .display{max-width:56.25%}
.footer-cta .lead{margin-top:clamp(8px,.68vw,13px);color:rgba(255,255,255,.72)}
.footer-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,1.875vw,36px)}
.footer-nav{position:relative;padding-bottom:clamp(44px,4.48vw,86px)}
.footer-nav-in{display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(28px,3.125vw,60px);padding-top:clamp(40px,4.48vw,86px)}
.footer-mark{flex:1 1 auto;max-width:52.25%;opacity:.9}
.footer-mark img{width:100%;height:auto}
.footer-cols{flex:0 0 auto;display:flex;gap:clamp(28px,3.125vw,60px);padding-top:4px}
.footer-col h4{font-size:clamp(16px,1.0417vw,20px);line-height:1.5;font-weight:700;
  color:rgba(255,255,255,.62);margin-bottom:10px}
.footer-col a{display:block;font-size:clamp(17px,1.25vw,24px);line-height:1.5;
  margin-bottom:clamp(6px,.52vw,10px);color:rgba(255,255,255,.92);
  transition:color .16s var(--ease),translate .16s var(--ease)}
.footer-col a:hover{color:#fff;translate:2px 0}
.footer-col a[aria-current]{color:var(--brand)}
/* 아직 대상이 없는 Resources 항목 — 링크와 같은 자리·같은 글자, 클릭만 없다 */
.footer-col .is-soon{display:block;font-size:clamp(17px,1.25vw,24px);line-height:1.5;
  margin-bottom:clamp(6px,.52vw,10px);color:rgba(255,255,255,.92);cursor:default}
.footer-col .is-soon i,.footer-col a i{font-style:normal;margin-left:6px;font-size:.8em;opacity:.75}
.footer-meta{margin-top:clamp(40px,4.48vw,86px);text-align:center;font-size:var(--fs-xs);line-height:1.5;color:rgba(255,255,255,.42)}
.footer-meta span{margin-inline:10px}
.footer-meta p+p{margin-top:4px}
@media (max-width:1023px){
  .footer-cta .display{max-width:none}
  .footer-nav-in{flex-direction:column;padding-top:8px}
  .footer-mark{order:2;max-width:100%;opacity:.5}
  .footer-cols{order:1;flex-wrap:wrap;gap:28px 48px}
  .footer-meta{margin-top:32px;text-align:left}
  .footer-meta span{display:block;margin:0}
}

/* ── 스크롤 진입 모션 ─────────────────────────────────────────────────── */
/* 진입 모션은 transition 이 아니라 animation 으로 낸다.
   왜: 카드류(.agent-card, .itv, .trust-nps …)는 hover 용 transition 을 스스로 갖는데
   그게 여기 transition 을 통째로 덮어써서 opacity 가 한 프레임에 0→1 로 튀었다
   (실측: .agent-card 계산값이 'transform, box-shadow / .3s' 였다 = 모션이 안 보임).
   animation 은 transition 과 충돌하지 않아 어떤 컴포넌트에서도 그대로 재생된다.
   .js 가 붙었을 때만 숨긴다 — 스크립트가 죽어도 본문은 보인다. */
.js .reveal{opacity:0}
/* 배포본(landing.css) 실측값과 동일: 28px · .7s · cubic-bezier(.16,1,.3,1) · 지연 .08s */
@keyframes reveal-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* 끝 상태를 정적으로도 적어 둔다 — 캡처 도구가 animation 을 끄면(또는 애니메이션
   미지원) 그대로 보이게. 재생 중에는 fill-mode both 가 이 값을 덮는다. */
.js .reveal.is-in{opacity:1;transform:none;animation:reveal-up .7s cubic-bezier(.16,1,.3,1) both}
.js .reveal-d1.is-in{animation-delay:.08s}
.js .reveal-d2.is-in{animation-delay:.16s}
.js .reveal-d3.is-in{animation-delay:.24s}
.js .reveal-d4.is-in{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1}
  .js .reveal.is-in{animation:none}
}

/* ── 접근성 ───────────────────────────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:200;padding:10px 16px;border-radius:8px;
  background:var(--ink);color:#fff;font-size:14px;left:-9999px}
.skip:focus{left:8px}

/* 푸터 닫는 CTA 제목은 섹션 제목보다 한 단계 작다 (시안 h120/2행 = 행간 60) */
.footer-cta .display{font-size:clamp(30px,2.521vw,48.4px);line-height:clamp(40px,3.125vw,60px)}

/* ── value 섹션 배경 — 오른쪽에서 빛이 드는 음영 (시안 실측) ───────────
   시안(752:57715 등)은 큰 광원 벡터 3개를 깔아 오른쪽에서 빛이 들어오는 인상을 만든다.
   좌표·색은 시안 렌더에서 배경 픽셀을 샘플링해 역산한 값이다:
     좌상단 (54,64,82) 푸른빛 → y10% (73,63,64) → y20% (70,46,33) 따뜻하게 전환
     우측   y50% (76,59,53) 주광원 · y60% (36,46,61) 푸른 반사 · y85% (58,35,23) · y92% (50,41,41)
   페이지마다 따로 두지 않는다 — 홈·급여·세무·플랫폼이 같은 섹션이다(세무는 아예 없었다). */
.value{position:relative;padding-block:clamp(80px,11.98vw,230px);overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;isolation:isolate;background:#000}
.value::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(50% 15% at 0% 1%,     rgba(96,114,146,.56) 0%, rgba(96,114,146,0) 100%),
    radial-gradient(40% 12% at -6% 11%,   rgba(130,112,114,.60) 0%, rgba(130,112,114,0) 100%),
    radial-gradient(36% 10% at -8% 20%,   rgba(125,82,59,.58) 0%, rgba(125,82,59,0) 100%),
    radial-gradient(38% 13% at 106% 51%,  rgba(135,105,95,.72) 0%, rgba(135,105,95,0) 100%),
    radial-gradient(24% 7%  at 106% 61%,  rgba(64,82,109,.62) 0%, rgba(64,82,109,0) 100%),
    radial-gradient(38% 12% at 106% 83%,  rgba(104,62,41,.86) 0%, rgba(104,62,41,0) 100%),
    radial-gradient(28% 8%  at 106% 91%,  rgba(89,73,73,.60) 0%, rgba(89,73,73,0) 100%),
    radial-gradient(22% 6%  at 104% 99%,  rgba(70,78,100,.42) 0%, rgba(70,78,100,0) 100%)}

/* ── value 제목 (홈·급여·세무·플랫폼 공통) ─────────────────────────────
   시안 원본(Frame 1707482110): 48px / line-height 60 / letter-spacing -0.4px,
   본문 24px / 36 / -0.2px. 둘 다 -0.00833em 이다.
   첫 줄은 글자에 그라데이션이 걸려 있다 — background-clip:text 로 #fff 24.425% 에서
   흰색 50% 78.257% 까지 떨어진다. 상자는 줄 전체가 아니라 **그 줄 글자 폭**이라
   width:max-content 가 필요하다(710 으로 늘리면 경사가 완만해져 끝값이 208, 시안은 127).
   각도는 블록마다 다르다 — 디자이너가 손으로 잡은 핸들이라 규칙이 없다.
   블록별 실제 값을 --ga 로 준다(아래 페이지 CSS). */
.value-copy h3,.value-copy .h2{letter-spacing:-.00833em}
.value-copy .ln{display:block}
.value-copy .grad{width:max-content;
  background-image:linear-gradient(var(--ga,107deg),#fff 24.425%,rgba(255,255,255,.5) 78.257%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── pain 카드 상단 스트로크 (홈·급여·세무·플랫폼 공통) ────────────────
   디자인 QA(김형주, 2026-08-27): stroke weight 1px → 3px,
   hover 시 색 변화가 **왼쪽에서 시작해 오른쪽에서 끝나도록**. 모바일은 기존 유지.
   색만 바꾸면 방향이 안 생긴다 — 회색 선 위에 주황 선을 덧대고
   왼쪽을 기준으로 펴서(scaleX) 방향을 만든다.
   페이지별로 1px/2px 로 갈려 있던 것도 여기서 3px 하나로 합친다. */
.pain-item{position:relative;border-top:3px solid #E8E8E8}
.pain-item::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;
  background:var(--brand);transform:scaleX(0);transform-origin:left center;
  transition:transform .42s var(--ease)}
.pain-item.is-lead::before{transform:scaleX(1)}
/* 커서가 그리드에 들어오면 기본 강조를 접고, 가리킨 카드만 편다 — 주황은 항상 하나 */
.pain-grid:hover .pain-item.is-lead::before{transform:scaleX(0)}
.pain-item:hover::before,
.pain-grid:hover .pain-item:hover::before{transform:scaleX(1)}
@media (max-width:1023px){
  .pain-item{border-top-width:1px;border-top-color:#E8E8E8}
  .pain-item::before{display:none}
  /* 시안 모바일(614:6379)은 첫 칸도 회색 선이다 — 주황 강조는 마우스오버가 있는 화면만 */
}
@media (prefers-reduced-motion:reduce){.pain-item::before{transition:none}}

/* 하위 항목이 아직 없는 메뉴 — 자리만 잡는다(QA 2026-08-27 Resources).
   같은 글자 모양을 쓰되 커서·클릭 반응은 주지 않는다. 항목이 정해지면
   data-panel 을 달아 다른 메뉴와 같게 만들면 된다. */
.nav-link.is-empty{cursor:default}
.nav-link.is-empty:hover{color:inherit}

/* ── interview 카드 (홈·급여 공통) ─────────────────────────────────────
   같은 카드가 두 페이지에 들어가는데 home.css / payroll.css 에 각각 복제돼 있었고
   값이 갈라져 있었다(아바타 홈 36~64 라운드 / 급여 40 고정 원형). 여기 한 곳으로 모은다.
   데스크탑 값은 시안 교정본(944:57662) 실측: 라운드 36 · 패딩 48 ·
   제목 32/40 Medium · 본문 20/30 #838383 · 아바타 64 라운드 24 ·
   회사 16/24 #838383 · 대표 20/30 Medium.
   모바일은 모바일 시안(214:60753 > 299:787)이 있다 — 375 폭에서 아바타 42, 회사명 21, 대표 21.
   그 값을 하한으로 둔다(전에는 홈 36 / 급여 40 고정 원형으로 갈라져 있었다). */
.itv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  width:calc(100% - (clamp(20px,6.25vw,120px) - var(--gutter))*2);
  margin-inline:calc(clamp(20px,6.25vw,120px) - var(--gutter))}
.itv{background:#fff;border-radius:clamp(20px,1.875vw,36px);padding:clamp(24px,2.5vw,48px);
  min-height:clamp(0px,21.875vw,420px);display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.itv:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.08)}
.itv h3{font-size:clamp(24px,1.6667vw,32px);line-height:1.25;font-weight:500;letter-spacing:-.0125em}
.itv p{margin-top:10px;font-size:clamp(16px,1.0417vw,20px);line-height:1.5;color:#838383;
  letter-spacing:-.01em;flex:1}
.itv footer{display:flex;align-items:center;gap:10px;margin-top:clamp(24px,2.6vw,50px)}
.itv footer img{width:clamp(42px,3.33vw,64px);height:clamp(42px,3.33vw,64px);
  border-radius:clamp(16px,1.25vw,24px);object-fit:cover}
.itv footer span{display:block}
.itv footer em{display:block;font-style:normal;font-size:clamp(13px,.8333vw,16px);line-height:1.5;
  color:#838383;letter-spacing:-.0125em}
.itv footer b{display:block;font-size:clamp(16px,1.0417vw,20px);line-height:1.5;font-weight:500;
  letter-spacing:-.01em}
@media (max-width:1023px){
  .itv-grid{grid-template-columns:1fr;gap:14px;width:100%;margin-inline:0}
  .itv footer{margin-top:28px}
}

/* 모바일에서만 끊는 줄바꿈 — 시안 모바일이 데스크탑과 줄 나눔이 다를 때 쓴다.
   (예: 홈 히어로 데스크탑 2줄 / 모바일 3줄) */
/* 모바일에서만 넣는 줄바꿈 / 데스크톱에만 있는 낱말 — 시안이 둘로 갈리는 곳에 쓴다 */
.br-m{display:none}
.only-d{display:inline}
@media (max-width:1023px){ .br-m{display:inline} .only-d{display:none} }