/* ============================================================================
   stage.css  ·  렌탈아지트 1차 샘플(라우터형 · 영상 무대)  ·  무대·헤더·푸터·문서·폼의 유일한 CSS (소유: styles / 임무 A)
   정본: ai-world/shared/sop-video-stage.md §2-2(DOM 계약) §4(토큰·반응형)
         기획_홈페이지/BUILD_PLAN_v1.0.md §2-3(팔레트) · 계산기 전용 스타일은 calc.css(다른 소유자)
   토큰 이관(2026-09-09 · 임무 I1): 색값 정본은 §1-1 ② 시맨틱 토큰. 채움 버튼 = .btn--brown(클래스 이름은 유지 · 값은 브랜드 블루) · 서체 = Pretendard 우선
   규칙: 390 기본 → min-width 768 / 876 / 1200 / 1440 확장 (max-width 미디어 0건)
         애니메이션은 transform · opacity(+visibility 지연)만. 전체 속성 트랜지션 0건.
         그라디언트는 --cs-overlay + 텍스트 밴드 스크림 1겹(같은 요소). 순검정 0건. 글래스 0건. r16 초과 0건.
         타이포는 §1-3 --cs-text-xs/sm/md/lg/xl 5단만 쓴다(새 px 크기 추가 금지).
   옛 「계약 편차 3건」은 2026-09-06 14:27 에 정본으로 흡수됐다(CONTRACT §4-2·§4-3·§6, BUILD_PLAN §6-2·§13,
   등록 = docs/CONTRACT_ISSUES.md 「2차 수정 잔여분 처리」). 지금 이 파일과 계약은 같은 값을 말한다:
         ① <1200 이전/다음은 카드 좌우 중앙(top:50%)이 아니라 하단 flex 컨트롤 행
         ② --cs-h1 하한 <768 = 1.375rem(360폭 넘침 방지), ≥768 계약값 복원
         ③ ≥1200 홈 푸터 높이 44 = 하한(2행 허용)
         ④ --cs-seg-hit-w 기본값 = 폭 비례 clamp(24~36), ≥768 36 재고정 — 세그는 WCAG 2.5.8 하한 24
         ⑤ 홈 스크롤 잠금에 (min-height:720px) 조건, 카드 높이는 svh
   목차: 1 토큰  2 리셋  3 유틸  4 버튼  5 헤더  6 무대  7 페이저  8 목차 리스트
         9 푸터  10 서브 셸  11 서브 컴포넌트  12 폼  13 다리  14 404
         15 브레이크포인트  16 reduced-motion
   ========================================================================== */


/* 1-0. 서체 — SiteSans(Pretendard OFL 서브셋 수정본) 셀프호스팅 (2026-09-09 · 임무 F → 2026-09-15 signup-copy 11 · I-21 · 검증 라운드 1 지적 4)
   OFL 예약 서체 이름 때문에 수정본은 「Pretendard」 라는 이름을 쓰지 않는다(서체 파일 안 이름 · CSS 별칭 · 파일 이름 셋 다 SiteSans · check-html ⓗ-5).
   @font-face 는 이 파일에 두지 않는다. 선언 정본 = site/assets/css/fonts.css(생성물 · tools/subset-fonts.mjs)이고 head.html 이 이 파일보다 먼저 싣는다.
   굵기는 400 · 700 두 종류뿐이다(이 트리 CSS 의 font-weight 500 은 400, 600 · 800 은 700 으로 치환했다 · check-html ⓩ-11 이 그 밖의 값을 막는다).
   각 굵기를 코어(사이트 원천 글자) · 확장(나머지 글자) 서브셋으로 나눠 unicode-range 로 선언한다 — 첫 방문은 코어 2종만 받는다(font-budget-probe ≤ 500KB).
   local() 을 쓰지 않는다(기기 설치본이 우리 파일을 이긴다). 주석 안에 별표와 슬래시를 붙여 쓰지 않는다(주석 조기 종료 사고). */


/* 1. 토큰 ------------------------------------------------------------------ */

/* 1-1. 색·서체·모션 (이식사양서 §3 · :root 1블록 · 미디어쿼리 재선언 금지)
   🔴 2026-09-09 임무 I1 — 배경 흰색 전환. 지시: 「배경은 흰색으로하고 깔끔하게. 정책도 참고 사이트이랑 동일하게 연동」
      아이보리 #F2EDE3 · 테라코타 #9C4E22 계열은 이 트리에서 전량 폐기했다(잔존 0건 · grep 으로 확인).
      팔레트 정본 = 랜딩 시안 c3「투톤·세로 띠」(2026-09-19) · 시맨틱 이름·치환 규칙은 이식사양 §3-3·§3-4 를 잇는다.

   토큰은 3층이다. 아래로만 참조한다(위를 참조하지 않는다).
     ① 원시 팔레트  --p-*  --g-*  --sys-*   ← 사양서 §3-2 의 색값. 이 목록 밖의 색값을 새로 만들지 않는다.
     ② 시맨틱       --bg-* --fg-* --border-* --font-primary  ← 사양서 §3-3 이름 그대로. 다른 임무는 이 이름을 쓴다.
     ③ 파일 로컬    --cs-*(stage·calc·catalog) · --rg-*(home)  ← ②의 별칭. 기존 선택자를 건드리지 않기 위해 남긴다.

   🔴 대비 재계산 (sRGB 상대휘도 · 2026-09-29 세로띠 그린 전환 시점 실계산 · tools 스크립트와 같은 식)
      밝은 바탕 네 종류 순서 = 지면 #fafbf9 / 판 #eef0ec / 액센트면 #e8ece9 / 판-강 #e2e6e1
     본문 #101f1b (글자)                    16.40 · 14.84 · 14.27 · 13.49   ✅
     브랜드 #17302a (버튼 채움·제목)             13.55 · 12.27 · 11.80 · 11.15   ✅
     보조 #46574f                         7.39 · 6.69 · 6.43 · 6.08   ✅
     3차 #5a655e                         5.85 · 5.30 · 5.09 · 4.81   ✅
     악센트 #9a3b1f (링크·눈썹)                6.70 · 6.06 · 5.83 · 5.51   ✅
     오류 #c81212                         5.70 · 5.16 · 4.96 · 4.69   ✅
     완료 #097038                         5.97 · 5.41 · 5.20 · 4.91   ✅
     ── 반전면(브랜드 채움 #17302a) 위 ──
     지면색 글자 #fafbf9 = 13.55 · #eef0ec = 12.27 · 보조 #b9c6bf = 7.97
     흐림 #9aada4 = 5.95 · 악센트 #e8a88f = 6.99   ✅
     ── 가장 짙은 면(#101f1b) 위 ──
     #fafbf9 = 16.40 · #b9c6bf = 9.64 · #9aada4 = 7.20 · #e8a88f = 8.45   ✅
   🔴 명도를 조정한 3건 (원값이 4.5:1 을 못 넘겨 이 트리에서만 낮춘 값 · 근거 수치 함께 남긴다)
     오류: red700 #e61414 = 지면 4.52 / 판 **4.09 미달** → **#c81212**(5.16) ✅ (색상각 동일 계열)
     완료: green500 #0cb459 = 지면 **2.63 미달** → 09-09 에 #0a8043 으로,
           09-29 투톤 전환에서 다시 **#097038** 로. 옛 #0a8043 은 회녹 판 위 4.38 · 판-강 3.98 로 미달했다.
           #0cb459 는 글자에 쓰지 않는다. 면·아이콘 채움으로만 남긴다(--sys-green-fill).
     3차 글자: 옛 #666d74 는 회녹 지면에서 4.57 로 내려앉아 **#5a655e**(5.30) 로 내렸다.
   🔴 비텍스트 대비(WCAG 1.4.11 · 3:1)
     선 색 #cbd1c9(지면 위 1.50) · #e2e6e1(1.22) 은 **장식선 전용**이다. 버튼 윤곽·입력 상자처럼
     그 선이 부품을 알아보는 유일한 단서인 자리에는 --border-strong **#6c766e**(4.54 · 4.11 · 3.95 · 3.74)만 쓴다.
     🔴 #6c766e 는 네 면 모두 3:1 은 넘지만 4.5 에는 못 미친다 — **글자로는 쓰지 않는다.**
   🔴 링크는 브랜드가 아니라 악센트다 — 브랜드 #17302a 는 본문 #101f1b 와 1.21 로 갈리지 않는다.
      악센트 #9a3b1f 는 본문과 2.45 로 갈린다(밑줄과 함께 WCAG 1.4.1 충족).
   🔴 금지: 팔레트 밖 색값 신설 · 그라데이션 텍스트 · 글로우 · 유리 카드 · r16 초과(카드 20 은 사양서 지정분만)
   🔴 링크색 규칙을 새로 넣을 때는 반드시 제외 토큰을 함께 쓴다(§2 불변식 A):
      :where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)) */
:root{
  /* ① 원시 팔레트 — 사양서 §3-2. 이 목록 밖의 색값을 만들지 않는다 --------- */
  /* 🔴 2026-09-29 세로띠 투톤 전환 — 중성축이 회색에서 **회녹**으로 바뀌었다.
     정본은 랜딩 시안 c3(투톤·세로 띠)의 팔레트다(2026-09-19 고객 확정).
     이름(--g-*)은 그대로 둔다 — 시맨틱②·별칭③ 층이 전부 이 이름을 참조하고 있어
     이름을 바꾸면 트리 전체가 흔들린다. 「g = gray」가 아니라 「g = ground(지면)」로 읽는다.
     --g-white 는 순백(#ffffff)이 아니라 지면 계열의 가장 밝은 면이다. */
  --g-white:#fafbf9;  --g-050:#eef0ec;  --g-100:#e2e6e1;  --g-200:#cbd1c9;  --g-300:#b9c6bf;
  --g-400:#9aada4;    --g-500:#86918a;  --g-600:#6c766e;  --g-700:#46574f;  --g-800:#2a4239;
  --g-900:#101f1b;    --g-black:#000000;
  --g-a15:#00000026;  --g-a20:#00000033; --g-a30:#0000004d;
  /* 브랜드 — 파랑에서 **딥그린**으로. --p-600 이 시안의 --ink 다.
     200·300 은 반전면(잉크면·영상 위) 전용 밝은 단이다 — 밝은 바탕 위 글자로 쓰면 미달한다. */
  --p-050:#e8ece9;  --p-100:#ccd6d1;  --p-200:#b9c6bf;  --p-300:#9aada4;  --p-400:#6f8479;
  --p-500:#3d5a4f;  --p-600:#17302a;  --p-700:#12261f;  --p-800:#0f231e;  --p-900:#0a1915;
  /* 악센트 — 테라코타. 링크·눈썹·차례 숫자처럼 「누르는 곳」이 아닌 강조에 쓴다(시안 --accent).
     브랜드 딥그린이 본문 글자와 가까워 링크를 초록으로 두면 글자와 구분되지 않는다. 그 자리를 이 색이 맡는다.
     a-600 흰 6.70 · 지면 6.06 · 판 5.51 ✅ / a-300 은 잉크면 위 6.99 ✅ (밝은 바탕엔 쓰지 않는다) */
  --a-050:#fdf0ea;  --a-300:#e8a88f;  --a-600:#9a3b1f;  --a-700:#7e3018;
  --sys-red:#c81212;         /* 오류 글자 (사양서 #e61414 의 명도 조정본 · 위 계산 참조) */
  --sys-red-fill:#e61414;    /* 오류 면·아이콘 채움 전용 (글자로 쓰지 않는다) */
  --sys-green:#097038;       /* 완료 글자. 🔴 09-29 투톤 전환에서 한 단 더 내렸다 — 옛 #0a8043 은 회녹 지면 4.38 · 판 3.98 로 미달했다(새 값 5.41 · 4.91 ✅) */
  --sys-green-fill:#0cb459;  /* 완료 면·아이콘 채움 전용 */
  --sys-kakao:#fee500;  --sys-naver:#03c75a;
  --grad-badge:linear-gradient(164.55deg,#2f5a4c,#17302a);   /* 번호 배지 (09-29 투톤) */
  --grad-inquiry:linear-gradient(95deg,#f7f9f7,#d8e2dc);     /* 홈B 문의 섹션 바닥 (09-29 투톤) */

  /* ② 시맨틱 — 사양서 §3-3 이름 그대로. 다른 임무는 이 이름만 쓴다 ---------- */
  /* 배경 */
  --bg-primary:            var(--g-white);
  --bg-secondary:          var(--g-050);
  --bg-surface-plain:      var(--g-white);
  --bg-surface-subtle:     var(--g-050);
  --bg-surface-strong:     var(--g-100);      /* 푸터 바닥 */
  --bg-surface-inverse:    var(--g-900);
  --bg-brand:              var(--p-600);
  --bg-brand-hover:        var(--p-700);
  --bg-brand-pressed:      var(--p-800);
  --bg-brand-disabled:     var(--p-200);
  --bg-brand-subtle:       var(--p-050);
  --bg-brand-subtle-hover: var(--p-100);
  --bg-neutral:            var(--g-100);
  --bg-neutral-hover:      var(--g-200);
  --bg-dimmed:             var(--g-a30);
  /* 글자 */
  --fg-primary:      var(--g-900);
  --fg-secondary:    var(--g-700);
  /* 🔴 명도 조정 3번째 (2026-09-09 임무 I1 · 실렌더 게이트가 잡아낸 값)
     사양서 §3-3 은 --fg-tertiary 를 gray-500 #8c939a 로 적었다. 그런데 그 값은 글자로 쓰면
     흰 위 3.11 · 연회색면 2.87 · 푸터면 2.71 · 연블루면 2.77 로 네 바탕 전부 4.5:1 미달이다
     (render-contrast 실측: 이 한 토큰으로 트리 전체 🔴 346건). 검사를 낮추는 대신 색을 내렸다.
       #666d74 = 흰 5.24 · 연회색면 4.85 · 푸터면 4.58 · 연블루면 4.67  ✅ (네 바탕 모두 4.5 이상)
     #8c939a 는 --g-500 으로 남는다 — 글자가 아닌 아이콘·구분선 채움에만 쓴다.
     🔴 홈B 문의 그라디언트 끝 #cde2ff 위에서는 이 값도 3.98 이다. 그 면 위 글자는 --fg-primary 를 쓴다. */
  --fg-tertiary:     #5a655e;
  --fg-on-color:     var(--g-white);
  --fg-on-inverse-soft:var(--g-400);          /* 반전면 위 보조 글자 · 09-29 투톤: #9aada4 on 잉크면 #17302a = 5.95 · 짙은 면 #101f1b = 7.20 ✅ */
  --fg-placeholder:  #5a655e;                 /* placeholder 도 글자다 — gray-500 은 3.11 로 미달 */
  --fg-disabled:     var(--g-400);
  --fg-brand:        var(--p-600);
  --fg-brand-hover:  var(--p-800);
  --fg-brand-media:  var(--p-300);             /* 반전면·영상 위 액센트 글자 · #1f2429 위 6.57 */
  --fg-error:        var(--sys-red);
  --fg-success:      var(--sys-green);
  /* 테두리 */
  --border-primary:   var(--g-300);
  --border-secondary: var(--g-200);
  --border-tertiary:  var(--g-100);
  --border-strong:    #6c766e;                 /* 🔴 WCAG 1.4.11 전용 — 부품 윤곽·입력 상자. 09-29 투톤 실측: 지면 #fafbf9 4.54 · 판 #eef0ec 4.11 · 액센트면 #e8ece9 3.95 — 셋 다 3:1 충족, 글자로는 쓰지 않는다 */
  --border-brand:     var(--p-600);
  --border-brand-light:var(--p-100);
  --border-selected:  var(--p-600);
  /* 서체 — 사양서 §3-3. 정본은 이 토큰 하나다. 다른 파일은 --font-primary 를 참조만 한다(값을 다시 쓰지 않는다).
     "SiteSans" = fonts.css 의 @font-face(우리가 배포하는 woff2 · §1-0). 기기 설치 여부와 무관하게 이게 뜬다. 외부 CDN 링크 0.
     그 뒤 목록은 서브셋에 없는 희귀 글자 1자가 나왔을 때만 쓰이는 폴백이다. */
  --font-primary:"SiteSans",-apple-system,BlinkMacSystemFont,system-ui,
                 "Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue","Malgun Gothic",Arial,sans-serif;

  /* ③ 파일 로컬 별칭 — 기존 선택자를 그대로 두기 위한 층 ------------------- */
  --cs-paper:var(--bg-primary);      --cs-paper-deep:var(--bg-secondary);
  --cs-ink:var(--fg-primary);        --cs-ink-soft:var(--fg-secondary);
  --cs-ink-deep:var(--bg-surface-inverse);
  --cs-brand:var(--fg-brand);        --cs-brand-deep:var(--bg-brand-hover);
  --cs-brand-tint:var(--bg-brand-subtle);
  --cs-hair:var(--border-tertiary);
  --cs-btn-edge:var(--border-strong);
  --cs-stage-dark:var(--bg-surface-inverse);
  --cs-overlay:linear-gradient(180deg,transparent 0%,rgb(16 31 27 / .3) 62%,rgb(16 31 27 / .92) 100%);
  --cs-on-media:var(--fg-on-color);  --cs-on-media-soft:rgb(255 255 255 / .9);
  /* 알파를 곁들여 쓰는 자리(스크림·오버레이·스크롤바·그림자)의 채널값. 색값을 개별 선언에 박지 않기 위한 토큰이다 */
  --cs-ink-rgb:16 31 27;  --cs-on-media-rgb:255 255 255;  --cs-shadow-rgb:0 0 0;
  --cs-brand-media:var(--fg-brand-media);
  --cs-title-shadow:0 2px 20px rgb(16 31 27 / .3);
  --cs-shadow-card:0 4px 24px rgb(0 0 0 / .08);
  --cs-shadow-panel:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);
  --cs-shadow-hover:0 4px 14px rgb(0 0 0 / .12);
  --cs-font:var(--font-primary);
  --cs-font-quote:var(--cs-font);
  /* --cs-h1 만 모바일 우선으로 하한을 낮춘다(360폭 H1 한 줄 넘침 · FINDINGS perf-mobile-5).
     계약값 clamp(1.625rem,3.4vw,3rem) 은 §15 ≥768 에서 그대로 복원한다(768에서 3.4vw=26.1px 로 연속). */
  --cs-h1:clamp(1.375rem,6.7vw,1.625rem); --cs-h1-lh:1.25; --cs-h1-track:-0.01em;
  --cs-sub:clamp(1rem,1.4vw,1.125rem); --cs-sub-lh:1.6;
  --cs-page-title:clamp(2rem,5vw,56px); --cs-h2:clamp(1.5rem,2.6vw,40px);
  --cs-radius-card:16px; --cs-radius-bar:12px; --cs-radius-btn:10px; --cs-radius-pill:9999px;
  --cs-gap-stack:10px; --cs-header-blur:0;
  --cs-scene-dwell:16s; --cs-stage-lock:hidden;
  --cs-ease-out:cubic-bezier(.23,1,.32,1);
  --cs-t-fast:.2s; --cs-t-text-out:200ms; --cs-t-text-in:400ms; --cs-t-video:400ms;
  --cs-t-dd-in:.22s; --cs-t-dd-item:.32s; --cs-dd-stagger:70ms; --cs-wheel-lock:700ms;
  --cs-focus-w:2px; --cs-focus-offset:3px;
}

/* 1-2. 기하 토큰 기본값 = 390 (CONTRACT §4-2 첫 열) */
:root{
  /* 🔴 2026-09-09 임무 I1 — 사양서 §2-1 그리드. 모바일 375: 거터 20 · 헤더 48 · 하단 탭바 60.
     PC(≥1024): 컨테이너 1064 · 헤더 108. 헤더 높이는 아래 --cs-card-h 산식이 그대로 참조한다(값 이중 관리 금지). */
  --cs-page-x:20px;
  --cs-page-top:26px;
  --cs-page-bottom:16px;
  --cs-header-h:48px;
  --cs-header-pad:0 20px;     /* 헤더 48 안에 터치 타깃 44(로고·버거)가 세로로 다 들어간다(48-44=4 여유). 가로 20 = 거터와 같은 기준선 */
  --cs-tabbar-h:60px;         /* 모바일 하단 탭바(§6-4). ≥768 에서 0 으로 되돌린다 */
  --rg-dock-h:0px;            /* 🔴 2026-09-17 홈 하단 도크(.rg-dock)가 탭바 위에 겹쳐 앉는다. 홈에서만 자리를 비운다(아래) */
  --cs-nav-gap:12px;
  /* 🔴 09-06 기획 결정: 모바일은 영상에만 집중. 카드가 헤더 아래 화면 전부를 채우고
     장면 목차는 감춘다. 푸터는 화면 밖으로 밀려 스크롤해야 나온다.
     헤더 61 + 상하 gap(10×2) = 81 만 뺀다(종전 247 = 목차·푸터까지 뺀 값). */
  --cs-card-h:calc(100vh - var(--cs-header-h) - 20px);
  --cs-track-left:16px;  --cs-track-right:24px;
  --cs-track-bottom:72px;
  --cs-track-max:92%;
  --cs-cta-h:48px;  --cs-cta-font:14px;  --cs-cta-pad:12px 14px;  --cs-cta-gap:10px;
  --cs-pager-right:50%;  --cs-pager-bottom:16px;
  --cs-seg-w:28px;  --cs-seg-h:3px;
  /* <1200 컨트롤 한 줄 총폭 = 44(이전) + 6×seg-hit + 44(다음) + 44(정지) ≤ 카드폭(100vw - 48).
     360폭까지 넘치지 않도록 seg-hit 를 폭에 비례시키고 계약값 36 을 상한으로 둔다(≥768은 36 재선언). */
  --cs-seg-hit-w:clamp(24px,calc(16.6vw - 31px),36px);  --cs-hit:44px;
  --cs-footer-h:auto;
  --cs-dd-mega-mt:12px;  --cs-dd-center-mt:28px;  --cs-dd-center-w:560px;
  --cs-tab-w:100%;  --cs-tab-h:52px;
  /* 텍스트 밴드 스크림(§6 .stage__overlay 2번째 레이어)의 앵커. 카드 높이 비율로 고정하면
     세로로 긴 모바일 크롭에서 H1 이 램프 위쪽(투명 구간)으로 올라가 밝은 영상 위에 흰 글자가 남는다
     (390 장면2 실측 루마 159 · 2.8:1 · FINDINGS mobile-1·fidelity-1·fresh-3).
     기본 티어는 트랙이 카드 상단 31% 부터 시작하므로 스크림도 그 위에서 시작한다. ≥1200 은 계약값(35/75) 복원. */
  --cs-scrim-top:0%;  --cs-scrim-full:26%;  --cs-scrim-a:.45;
  --cs-form-w:100%;  --cs-form-pad:24px 16px;
  --cs-inner-max:100%;
  --cs-quote-size:20px;
  --cs-content-scale:1;
}

/* 카드 높이는 dvh 가 아니라 svh 로 잡는다. dvh 는 모바일 툴바가 접힐 때 60~100px 커져
   스크롤 도중 카드가 늘어난다(레이아웃 시프트). 미지원 브라우저는 위 vh 값을 그대로 쓴다.
   body{min-height:100dvh} 는 그대로 (FINDINGS perf-mobile-7) */
@supports (height:100svh){
  :root{ --cs-card-h:calc(100svh - var(--cs-header-h) - 20px) }
}

/* 1-3. styles 내부 전용 (다른 파일이 참조하지 않는다) */
:root{
  /* 🔴 2026-09-09 임무 I1 — oklch 로 적혀 있던 값을 전부 ② 시맨틱 토큰으로 옮겼다.
     오류색은 사양서 §3-2 시스템색 red 계열이되 명도를 낮춘 값이다(#e61414 은 연회색면 위 4.34 로 미달 · §1-1 계산 참조).
     오류 바탕은 팔레트 밖 분홍(#F6E4E8)을 새로 만들지 않고 연회색면 #f4f6fa 를 쓰고,
     구분은 색이 아니라 오류색 테두리와 문구가 맡는다(색만으로 뜻을 전하지 않는다 · WCAG 1.4.1). */
  --cs-x-error:var(--fg-error);
  --cs-x-error-tint:var(--bg-secondary);
  --cs-x-valid:var(--fg-success);
  --cs-x-field-bg:var(--bg-surface-plain);
  /* 폼 컨트롤 전용 보더: 장식선(#ecf0f4 · 1.15:1)은 WCAG 1.4.11(비텍스트 3:1) 미달이라 입력 상자에만 별도 값 */
  --cs-x-field-border:var(--border-strong);
  --cs-x-media-dim:rgb(16 31 27 / .5);
  --cs-x-media-hover:rgb(255 255 255 / .14);
  --cs-x-section-gap:48px;
  /* 타이포 스케일 (12~20 사이 1px 9단계를 5단으로 정리 · FINDINGS craft-contract-5).
     본문 기본 = md. 새 크기를 이 목록 밖에서 만들지 않는다. */
  --cs-text-xs:12px;  --cs-text-sm:14px;  --cs-text-md:16px;
  --cs-text-lg:20px;  --cs-text-xl:25px;
}


/* 2. 리셋 -------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--cs-paper)}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;gap:var(--cs-gap-stack);
  padding:var(--cs-page-top) var(--cs-page-x) var(--cs-page-bottom);
  background:var(--cs-paper);color:var(--cs-ink);
  font:400 16px/1.6 var(--cs-font);-webkit-font-smoothing:antialiased;word-break:keep-all;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}

/* ── 2-1. 세로띠 그린 — **색만 가져오고 기둥은 세우지 않는다** (2026-09-29) ──────
   랜딩 시안 c3「투톤·세로 띠」에서 가져온 것은 **팔레트 하나**다(§1 원시 팔레트 ① 참조).
   시안의 왼쪽 세로 기둥·지면 분할은 이 사이트에 **세우지 않는다**.
   첫 화면은 2026-09-20 합의대로 **히어로 영상 + 얇은 가로 띠배너** 구조를 그대로 둔다
   (커밋 85e8290 · home.css §11-0·§11-2). 분할 조판은 그때 「파티션이 복잡하다」로 물러난 안이다.
   🔴 그러니 여기에 body 패딩·배경 그라디언트로 기둥을 세우지 않는다. 세우면 그 합의를 되돌리는 것이 된다. */

h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset,legend{margin:0}
ul,ol{padding:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
/* 🔴 RV5 근본원인 차단 (2026-09-08 · 임무 F1) — 안 ⓒ 채택
   종전 `a{color:var(--cs-brand)}` 가 버튼 글자까지 액센트로 칠했고, 그 번짐을 되돌리려 뒤에 넣은
   `.calc--home a{color:inherit}` 류(0,1,1)가 `.btn--paper{color:var(--cs-ink)}`(0,1,0)를 이겨
   본문 CTA 글자가 주변 본문색을 상속했다(실측 홈 1.00:1 · 목록 1.34:1).

   ▶ 불변식 A — 일반 a 선택자(요소·자손 스코프)는 버튼 글자색에 관여하지 않는다.
     버튼 글자색은 .btn--* / .rg-btn--* 선언만이 정한다. 링크색 규칙을 새로 넣을 때는
     반드시 아래 제외 토큰을 함께 적는다:  :where(:not(.btn):not(.rg-btn):not(.rg-fullbtn))
   ▶ 🔴 제외는 반드시 :where() 로 감싼다 — 특정도를 1 도 올리지 않기 위해서다.
     맨 :not() 체인으로 쓰면 이 규칙이 (0,3,1) 로 올라가 .site-nav__link · .skip-link ·
     .panel-card--cat 같은 (0,1,0) 컴포넌트 색을 전부 덮어쓴다(1차 시도에서 실측 461건 오염 확인).
   ▶ 체인형 :not() 을 쓴다 — :not(a,b) 선택자 리스트는 Safari 16.4+ 라 쓰지 않는다. */
a{text-decoration-thickness:1px;text-underline-offset:.15em}
/* 🔴 2026-09-29 투톤 전환 — 링크는 브랜드가 아니라 **악센트(테라코타)** 다.
   브랜드가 딥그린 #17302a 가 되면서 본문 글자 #101f1b 와 1.21 밖에 안 갈린다 — 링크가 글자에 묻는다.
   테라코타 #9a3b1f 는 지면 위 6.06 ✅ 이면서 본문 글자와 2.45 로 갈린다(시안 c3 의 --accent 와 같은 임무).
   밑줄은 위 a 규칙이 이미 그리고 있다(WCAG 1.4.1 — 색만으로 구분하지 않는다). */
a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){color:var(--a-600)}
abbr[title]{text-decoration:none;border:0}
address{font-style:normal}
table{border-collapse:collapse;border-spacing:0}
::selection{background:var(--cs-brand-tint);color:var(--cs-ink)}

:focus-visible{outline:var(--cs-focus-w) solid var(--cs-brand);outline-offset:var(--cs-focus-offset)}
.stage :focus-visible,
.bridge-hero :focus-visible{outline-color:var(--cs-on-media)}


/* 3. 유틸 -------------------------------------------------------------------- */

[hidden]{display:none!important}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip-link{
  position:absolute;left:var(--cs-page-x);top:-100px;z-index:100;
  padding:12px 16px;border-radius:var(--cs-radius-btn);
  background:var(--cs-brand);color:var(--cs-paper);font-weight:700;text-decoration:none;
}
.skip-link:focus-visible{top:8px;outline-color:var(--cs-ink)}

/* 국문 어절 묶음. `word-break:keep-all` 은 음절 분리만 막고 닫는 괄호 뒤(UAX-14 CL)는 그대로 줄바꿈
   기회라 「제주자랑(주)」/「은 역할이…」처럼 법인명과 조사가 갈린다. 빌드가 이 span 으로 묶는다
   (FINDINGS mobile-5·fresh-5·fresh-12) */
.nb{white-space:nowrap}

.scroll-progress{
  position:fixed;top:0;left:0;z-index:60;height:3px;width:0;
  background:var(--cs-brand);pointer-events:none;
}


/* 4. 버튼 (8상태: default · hover · focus-visible · active · disabled · loading · error · success) */

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:14px 28px;border:0;border-radius:var(--cs-radius-btn);
  font:700 var(--cs-text-md)/1.5 var(--cs-font);text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--cs-t-fast) var(--cs-ease-out);
}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--cs-shadow-hover);opacity:0;
  transition:opacity var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn:hover::after{opacity:1}
  .btn--ghost:hover{background:var(--cs-x-media-hover)}
  .btn--brown:hover{background:var(--cs-brand-deep)}
  .btn--outline:hover{background:var(--cs-brand-tint)}
  .btn--primary:hover{background:var(--cs-paper-deep)}
}
.btn:active{transform:scale(.97);transition-duration:160ms}
.btn:active::after{opacity:0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

.btn--primary.btn--primary{background:var(--cs-paper);color:var(--cs-ink)}
.btn--ghost.btn--ghost{background:transparent;color:var(--cs-paper);box-shadow:inset 0 0 0 1.5px var(--cs-paper)}
.btn--brown.btn--brown{background:var(--cs-brand);color:var(--cs-paper)}
.btn--outline.btn--outline{background:transparent;color:var(--cs-brand);box-shadow:inset 0 0 0 1.5px var(--cs-brand)}
.btn--sm{height:var(--cs-hit);padding:10px 20px;font-size:var(--cs-text-xs)}  /* 터치 타깃 44 (BUILD_PLAN §7-2) */


/* 5. 헤더 (CONTRACT §3-2 · 떠 있는 둥근 바 61 · 불투명 paper · 블러 0) --------- */

.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--cs-header-h);
  background:var(--cs-paper);border-bottom:1px solid var(--cs-hair);
  border-radius:var(--cs-radius-bar);
}
.site-header__bar{
  position:static;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--cs-header-pad);
}
.site-header__actions{display:flex;align-items:center;gap:12px}

/* 로고는 홈으로 가는 실제 링크다 — 모든 폭에서 노출되므로 터치 타깃 44 (BUILD_PLAN §7-2 · FINDINGS a11y-10).
   헤더 내용상자가 60(61 − 보더 1) − 세로 패딩 16 = 44 라 헤더 높이·로고 이미지 28 은 불변 */
.site-header__logo{
  display:inline-flex;align-items:center;min-height:var(--cs-hit);flex:none;
  color:var(--cs-ink);text-decoration:none;
}
/* 붓글씨 워드마크(고객 지급). 폭은 비율대로 흐르게 두고 높이만 잡는다 — 모바일 헤더 48 에 28,
   PC 본줄 72 에 40(참고 사이트 로고 132×40 과 같은 높이). 벡터라 어느 배율에서도 안 뭉갠다 */
.site-header__mark{display:block;height:28px;width:auto;flex:none}
/* 첫 화면에서 「어느 단체인가」에 답하는 한 줄. 뿌리 설명이 5번째 장면에 있어 첫 3초에 주체가 없었다
   (FINDINGS fresh-6). 폭이 모자라는 구간에서 내비를 밀지 않도록 ≥1200 에서만 노출한다 */
.site-header__descriptor{display:none}

.site-nav{display:none;position:static;min-width:0}
.site-nav__list{display:flex;align-items:center;gap:var(--cs-nav-gap);list-style:none}
.site-nav__item{position:static;display:block}
.site-nav__item[data-nav="family"]{position:relative}
.site-nav__link,
.site-nav__trigger{
  display:inline-flex;align-items:center;gap:4px;min-height:var(--cs-hit);padding:12px 8px;
  border-radius:8px;color:var(--cs-ink);font:700 var(--cs-text-sm)/20px var(--cs-font);
  text-decoration:none;white-space:nowrap;cursor:pointer;background:none;border:0;
}
@media (hover:hover){
  .site-nav__link:hover,.site-nav__trigger:hover{color:var(--cs-brand)}
}
.site-nav__link:active,.site-nav__trigger:active{background:var(--cs-paper-deep)}
.site-nav__link[aria-current="page"],
.site-nav__trigger[aria-expanded="true"]{color:var(--cs-brand)}
.site-nav__chevron{width:12px;height:12px;flex:none;transition:transform .15s var(--cs-ease-out)}
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron{transform:rotate(180deg)}

.site-header__cta{display:none;flex:none}

.site-header__burger{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--cs-hit);height:var(--cs-hit);border-radius:8px;color:var(--cs-ink);
}
.site-header__burger svg{width:20px;height:20px}
@media (hover:hover){ .site-header__burger:hover{background:var(--cs-paper-deep)} }
.site-header__burger:active{transform:scale(.94)}

/* 5-1. 드롭다운 패널 (REF §1-5 기하 · 진입 fade .22s + 항목 fade-in-down .32s 스태거 70ms) */
.site-nav__panel{
  position:absolute;z-index:60;top:100%;
  background:var(--cs-paper);border-radius:var(--cs-radius-card);
  box-shadow:var(--cs-shadow-panel);
  animation:dd-in var(--cs-t-dd-in) ease-out both;
}
.site-nav__panel--mega{left:0;right:0;margin-top:var(--cs-dd-mega-mt);padding:4px}
/* 링크 패널(파트너 입점) — 기하는 메가와 같은 전폭이다. 새 위치 규칙을 만들지 않은 이유:
   .site-nav__item 이 position:static 이라 트리거 기준 정렬을 하려면 그 전제부터 깨야 하고,
   그러면 1200 미만에서 패널이 뷰포트 밖으로 잘리는 문제(--center 가 이미 겪은 자리)를 다시 만든다. */
.site-nav__panel--links{left:0;right:0;margin-top:var(--cs-dd-mega-mt);padding:20px 20px 12px}
.site-nav__panel--links .panel-foot{display:flex;padding:4px 0 0}
/* 패밀리 패널: <1200 에서는 트리거(헤더 우측)를 중심으로 펴면 뷰포트 오른쪽을 넘어 잘린다.
   기본은 트리거 우측 정렬, 중앙 정렬은 ≥1200 에서만 (FINDINGS perf-mobile-13) */
.site-nav__panel--center{
  right:0;left:auto;width:var(--cs-dd-center-w);max-width:calc(100vw - 2 * var(--cs-page-x));
  margin-top:var(--cs-dd-center-mt);padding:24px;
}
@keyframes dd-in{from{opacity:0}}
@keyframes dd-item{from{opacity:0;transform:translateY(-10px)}}

.panel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none}
.panel-list{display:grid;gap:4px;list-style:none}
.panel-grid > li,
.panel-list > li,
.panel-intro{animation:dd-item var(--cs-t-dd-item) ease-out both}
.panel-grid > li:nth-child(1),.panel-list > li:nth-child(1){animation-delay:0ms}
.panel-grid > li:nth-child(2),.panel-list > li:nth-child(2){animation-delay:calc(var(--cs-dd-stagger) * 1)}
.panel-grid > li:nth-child(3),.panel-list > li:nth-child(3){animation-delay:calc(var(--cs-dd-stagger) * 2)}
.panel-grid > li:nth-child(4),.panel-list > li:nth-child(4){animation-delay:calc(var(--cs-dd-stagger) * 3)}
/* 🔴 2026-09-09 — 종전엔 4번까지만 지연이 있었다. 대분류도 파트너도 항목이 8개라 5~8 이 지연 0 으로
   한꺼번에 떠서 스태거가 중간에 끊겨 보였다. 8까지 잇는다. */
.panel-grid > li:nth-child(5),.panel-list > li:nth-child(5){animation-delay:calc(var(--cs-dd-stagger) * 4)}
.panel-grid > li:nth-child(6),.panel-list > li:nth-child(6){animation-delay:calc(var(--cs-dd-stagger) * 5)}
.panel-grid > li:nth-child(7),.panel-list > li:nth-child(7){animation-delay:calc(var(--cs-dd-stagger) * 6)}
.panel-grid > li:nth-child(8),.panel-list > li:nth-child(8){animation-delay:calc(var(--cs-dd-stagger) * 7)}

.panel-intro{margin:0 0 16px;font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft)}

div.panel-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:4px;border-radius:var(--cs-radius-bar)}
button.panel-card{
  display:flex;flex-direction:column;gap:12px;width:100%;min-width:0;padding:4px;
  border-radius:var(--cs-radius-bar);color:var(--cs-ink);text-align:left;
  transition:transform var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){
  button.panel-card:hover{background:var(--cs-paper-deep)}
}
button.panel-card:active{transform:scale(.985)}
.panel-card__img{
  width:100%;aspect-ratio:16/10;min-height:120px;object-fit:cover;
  border-radius:8px;background:var(--cs-stage-dark);
}
.panel-card__title{display:block;font:700 var(--cs-text-md)/1.3 var(--cs-font);color:var(--cs-ink);padding:0 4px}
/* <button> 안에는 phrasing 만 올 수 있어 p 대신 span 을 쓴다(FINDINGS craft-contract-11) → display:block 필요 */
.panel-card__desc{display:block;font-size:var(--cs-text-sm);line-height:1.5;color:var(--cs-ink-soft);padding:0 4px 4px}
.panel-card__more{
  display:inline-flex;align-items:center;min-height:var(--cs-hit);padding:0 8px;align-self:flex-start;
  border-radius:8px;color:var(--cs-brand);font:700 var(--cs-text-sm)/1 var(--cs-font);text-decoration:none;
}
@media (hover:hover){ .panel-card__more:hover{background:var(--cs-brand-tint)} }
.panel-card__more:active{background:var(--cs-brand-tint);transform:scale(.97)}
/* 파트너 로그인 진입(2026-09-12 임무 ③ · SCENES nav[partner].access) — 링크 패널 panel-foot 의 두 번째 링크. 기하는 .panel-card__more 와 같고(44px 히트)
   색만 잉크 보조색으로 낮춰 「분야 상관없이 문의하기」(브랜드색) 뒤에 조용히 선다. panel-foot 의 space-between 이 오른쪽 끝에 놓는다. */
.panel-card__access{
  display:inline-flex;align-items:center;min-height:var(--cs-hit);padding:0 8px;align-self:flex-start;margin-left:auto;
  border-radius:8px;color:var(--cs-ink-soft);font:400 var(--cs-text-sm)/1 var(--cs-font);text-decoration:none;
}
@media (hover:hover){ .panel-card__access:hover{background:var(--cs-paper-deep);color:var(--cs-ink)} }
.panel-card__access:active{background:var(--cs-paper-deep);transform:scale(.97)}

/* 패밀리 패널: 행형 카드 */
.panel-list > li{display:flex;align-items:center;gap:8px;min-height:44px;border-radius:var(--cs-radius-bar)}
.panel-list button.panel-card{flex:1;flex-direction:row;align-items:center;gap:12px;padding:8px}
.panel-list .panel-card__img{width:56px;height:56px;min-height:0;aspect-ratio:1/1;flex:none}
.panel-list .panel-card__title{padding:0;font-size:var(--cs-text-md)}
.panel-list .panel-card__desc{padding:0;font-size:var(--cs-text-sm)}
.panel-list > li > a.panel-card__more:only-child{
  flex:1;justify-content:flex-start;padding:8px 12px;font-size:var(--cs-text-md);color:var(--cs-ink);
}

/* 5-2. 모바일 메뉴 (<876 · 2026-09-22 876 → 1024 로 올렸던 것을 2026-09-26 876 으로 되돌렸다 · 헤더 아래 카드 · 열림 동안 body.menu-open) */
/* 2026-09-15 묶음 services(I-36) — 드로어 기하: 헤더 아래 끝까지 채우는 고정 시트(높이 100dvh 기준 · 폴백 100vh) + 뒤 딤(.mobile-menu-dim · 누르면 닫힘).
   body.menu-open{overflow:hidden} 이 뒤 문서 스크롤을 잠근다. 시트 top 은 stage.js 가 열 때 헤더 아랫변(--mm-top)으로 맞춘다(스크롤 전 body 위 여백). */
/* 🔴 2026-09-30 — 높이를 계산하지 않고 위아래를 못 박는다.
   증상: 폰에서 메뉴를 열고 아래로 내리면 스크롤이 스르륵 되돌아가 「로그인 · 회원가입」을 누르기 어려웠다(홍회장 지적).
   원인: 높이를 100dvh 로 재던 것. iOS 사파리는 스크롤하는 동안 주소창이 접히며 dvh 가 실제로 변한다 —
         그때마다 이 요소의 높이가 다시 계산되고, 브라우저가 스크롤 위치를 그 높이에 맞춰 되돌린다.
   고침: top 과 bottom 을 함께 주면 높이는 브라우저가 정한다. 주소창이 접혀도 아래변이 따라가므로 재계산이 없다.
   🔴 svh 로 바꾸는 길은 택하지 않았다 — 이 사이트의 미리보기 환경에서 svh 가 0 으로 풀린 적이 있다(home.css §11-0 주석). */
.mobile-menu{
  position:fixed;left:0;right:0;top:var(--mm-top,var(--cs-header-h));bottom:0;z-index:80;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom,0px));background:var(--cs-paper);border-top:1px solid var(--cs-hair);
  animation:dd-in var(--cs-t-dd-in) ease-out both;
}
.mobile-menu-dim{position:fixed;left:0;right:0;bottom:0;top:var(--mm-top,var(--cs-header-h));z-index:70;background:rgb(var(--cs-ink-rgb) / .4)}
.mobile-menu__logout{border:0;background:transparent;cursor:pointer}
.mobile-menu__inner{max-width:520px;margin:0 auto;display:flex;flex-direction:column}
.mobile-menu__label{margin:16px 0 4px;font:700 var(--cs-text-xs)/1.4 var(--cs-font);color:var(--cs-ink-soft)}
.mobile-menu__label:first-child{margin-top:0}
.mobile-menu ul{list-style:none}
.mobile-menu__link{
  display:flex;align-items:center;width:100%;min-height:var(--cs-hit);padding:8px;
  border-radius:8px;color:var(--cs-ink);font:400 var(--cs-text-md)/1.6 var(--cs-font);
  text-decoration:none;text-align:left;
}
.mobile-menu__link[aria-current="page"]{color:var(--cs-brand);font-weight:700}
.mobile-menu__link:active{background:var(--cs-paper-deep)}
/* 판독기 진입(2026-09-12 · SCENES partnerAccess). 드로어 맨 아래(상담 CTA 뒤 · .mobile-menu__inner 마지막 요소) — 얇은 윗줄로 떼고 한 단계 작은 글자(sm)로 소비자 항목과 구분한다.
   색은 잉크 보조색이라 대비 게이트 안이고, 히트 44px 는 .mobile-menu__link 가 준다. 푸터 쪽 링크는 12px 링크줄을 그대로 상속한다(따로 규칙 없음).
   2026-09-13 검증 지적: ul 마지막 li 였을 때 바로 위 아코디언 .mobile-menu__acc 의 border-bottom 과 이 border-top 이 8px 간격으로 겹쳐 선이 두 줄로 보였다 →
   항목을 CTA 뒤로 옮겨 인접 선이 없어졌다(CTA 는 테두리 버튼이 아니라 채움 버튼). 윗줄 하나 + 16px 여백으로 CTA 와 뗀다. */
.mobile-menu__link--access{margin-top:16px;border-top:1px solid var(--cs-hair);border-radius:0 0 8px 8px;font-size:var(--cs-text-sm);color:var(--cs-ink-soft)}
.mobile-menu__cta{margin-top:20px;align-self:flex-start}


/* 6. 무대 (CONTRACT §3-1 · §4-3) ------------------------------------------ */

main.stage-wrap{display:flex;flex-direction:column;gap:var(--cs-gap-stack);flex:1;min-height:0;position:relative}


.stage{
  position:relative;height:var(--cs-card-h);min-height:520px;
  border-radius:var(--cs-radius-card);overflow:hidden;
  background:var(--cs-stage-dark);box-shadow:var(--cs-shadow-card);
  /* pan-y 단독은 핀치줌까지 막는다(WCAG 1.4.4). 가로 스와이프 인식에는 pan-x 차단만 필요 */
  /* 세로·가로 제스처를 모두 장면 전환으로 받는다(09-06). 확대는 계속 허용해 WCAG 1.4.4 를 지킨다.
     트랙이 넘칠 때의 스크롤은 .stage__track 이 따로 pan-y 로 되돌린다. */
  touch-action:pinch-zoom;color:var(--cs-on-media);
}

.stage__bg{position:absolute;inset:0;z-index:0}
.stage__video{position:absolute;inset:0;opacity:0;transition:opacity var(--cs-t-video) linear}
.stage__video.is-live{opacity:1}
.stage__poster,
.stage__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.stage__poster:not([src]),
.stage__poster[src=""],
/* 대기 슬롯은 투명 1px data URI 로 시작한다(정적 검사기가 src 없는 img 를 깨진 이미지로 잡는다).
   실제 포스터가 들어오기 전까지는 종전과 똑같이 숨긴 상태여야 한다 */
.stage__poster[src^="data:"]{visibility:hidden}

/* 한옥 컷은 등불이 가로 72% 지점에 있다. 세로로 긴 화면에서 가운데를 잡으면 등불이 잘려
   장면의 초점이 사라진다(390 실측: 하늘과 담장만 남는다). 좁은 화면에서는 크롭 기준을 등불로 옮기고,
   카드가 16:9 에 가까워지는 ≥1200 에서 가운데로 되돌린다. */
.stage:has(.scene.is-active[data-scene-id="root"]) .stage__poster,
.stage:has(.scene.is-active[data-scene-id="root"]) .stage__vid{object-position:72% 50%}
/* 슬롯 안 포스터 → 첫 프레임 페이드인. 커밋(슬롯 간 크로스페이드)이 포스터 상태에서 끝나도
   영상은 첫 프레임이 실제로 그려질 때(playing) 포스터 위로 400ms 겹쳐 들어온다 — 하드 팝 제거.
   stage.js 가 playing/emptied 에서 .is-playing 을 붙였다 뗀다 (FINDINGS perf-mobile-15) */
.stage__vid{background:transparent;opacity:0;transition:opacity var(--cs-t-video) linear}
.stage__vid.is-playing{opacity:1}

/* 오버레이 = 계약 그라디언트 + 텍스트 밴드 국소 스크림 1겹.
   스크림은 카드 높이 35~100% 를 균일하게 눌러, 텍스트 대비가 포스터·영상 밝기에 의존하지 않게 한다
   (계약 오버레이만으로는 텍스트가 놓이는 50~65% 밴드 알파가 .25~.3 뿐 · FINDINGS a11y-21) */
.stage__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,transparent var(--cs-scrim-top),rgb(var(--cs-ink-rgb) / var(--cs-scrim-a)) var(--cs-scrim-full),rgb(var(--cs-ink-rgb) / var(--cs-scrim-a)) 100%),
    var(--cs-overlay);
}
/* 밝기 편차는 장면 단위 문제라 장면 단위로 고친다(스크림을 전 장면 일괄로 올리면 어두운 장면이 탁해진다).
   장면2(웰다잉)만 밝은 실내 포스터라 흰 텍스트가 뜬다 · FINDINGS fresh-3.
   :has 미지원 브라우저는 기본 스크림(.45)으로 떨어진다 — 그 값만으로도 390 H1 밴드가 5.8:1 이다 */
.stage:has(.scene.is-active[data-scene-id="welldying"]) .stage__overlay{ --cs-scrim-a:.58 }

.stage__track{
  /* 🔴 R1(V1ⓐ) 09-08 — pan-y 를 기본값에서 뺐다(→ .stage 와 같은 pinch-zoom).
     실측으로 확인한 것: 트랙은 overflow-y:auto 라 스크롤 컨테이너이고, 블링크는 스크롤 컨테이너에서
     조상의 touch-action 제한을 되돌린다. 즉 .stage 의 pinch-zoom 은 트랙 위 터치에 적용된 적이 없고,
     트랙 자신의 값이 곧 유효값이다(auto 로 두자 장면 0 에서도 페이지가 그냥 굴러갔다 — 390 실측 0@882).
     넘칠 때·경계 양보에서만 pan-y 를 되살린다 — 아래 .is-scrollable / .stage.is-pan .stage__track. */
  touch-action:pinch-zoom;
  position:absolute;left:var(--cs-track-left);right:var(--cs-track-right);bottom:var(--cs-track-bottom);
  z-index:2;max-width:var(--cs-track-max);
  /* 확대(텍스트 200%)·짧은 뷰포트에서 카드 밖으로 넘친 카피에 닿을 경로 (FINDINGS a11y-23) */
  max-height:calc(100% - 72px);overflow-y:auto;
  /* 🔴 R1(V1ⓐ) 09-08 — overscroll-behavior:contain 을 기본값에서 뺐다.
     overflow-y:auto 는 트랙이 넘치지 않아도 트랙을 스크롤 박스로 만들고(평시 scrollHeight===clientHeight),
     거기 붙은 contain 이 스크롤 연쇄를 끊어서 「마지막 장면 + 커서가 카피(H1·CTA) 위」면 아래로 휠해도
     페이지가 1px 도 안 내려갔다. 1440×900 실측(휠 deltaY 120 ×6): 카피 위 scrollY 0→0 ·
     영상 여백 위 0→480, 그때 문서에 남은 여유 7,803px.
     contain 의 원래 목적은 「넘친 카피를 읽는 동안 페이지가 딸려가지 않게」라서 실제로 넘칠 때만 필요하다.
     목적을 죽이지 않고 조건부로 옮겼다 — 켜는 주체는 stage.js 의 syncTrackScroll()
     (scrollHeight > clientHeight + 1 실측 · rAF 로 묶어 goTo·resize·scroll 에서 갱신). */
  overscroll-behavior-y:auto;
  /* 🔴 09-06 실측: 기본 상태에서도 트랙이 8px 넘쳐 카드 한가운데 흰 스크롤바가 영상 위에 떴다.
     여유를 넓히고(88→72 · 116→100), 그래도 넘치는 확대·짧은 뷰포트에서는 카드 톤에 맞는
     얇은 반투명 스크롤바로 보이게 한다(숨기지 않는다 — 스크롤 가능성은 보여야 한다). */
  scrollbar-width:thin;scrollbar-color:rgb(var(--cs-on-media-rgb) / .32) transparent;
}
/* 트랙이 실제로 넘칠 때(텍스트 200% 확대 · 짧은 폰)만 원래 규칙을 켠다 — a11y-23 의 목적은 그대로 산다.
   두 일을 두 클래스로 나눴다(stage.js syncTrackScroll):
   · .is-scrollable = 넘친 카피를 터치로 굴릴 수 있게 (pan-y)
   · .is-contain    = 읽는 동안 페이지가 딸려가지 않게 (연쇄 차단). 단 경계 장면(마지막/첫 장면 + 문서 여유)
     에서는 붙이지 않는다 — 거기서 연쇄를 막으면 트랙을 다 굴린 뒤 다시 갇혀 V1ⓐ 가 그대로 재발한다. */
.stage__track.is-scrollable{touch-action:pan-y pinch-zoom}
.stage__track.is-contain{overscroll-behavior:contain}
/* 경계 양보 — 마지막 장면에서 문서에 아래 여유가 있거나 첫 장면에서 위 여유가 있을 때만
   무대 전체(영상 여백 + 카피 트랙)에 세로 팬을 허용한다. stage.js syncTrackScroll() 가 붙였다 뗀다.
   이걸 켜지 않으면 touchend 가 「양보」해도 굴러갈 페이지가 없다(무대는 touch-action:pinch-zoom).
   평시에는 붙지 않으므로 「세로 스와이프 = 장면 전환」(09-06 실기기 결정)은 그대로다. */
.stage.is-pan,
.stage.is-pan .stage__track{touch-action:pan-y pinch-zoom}
.stage__track::-webkit-scrollbar{width:6px}
.stage__track::-webkit-scrollbar-track{background:transparent}
.stage__track::-webkit-scrollbar-thumb{background:rgb(var(--cs-on-media-rgb) / .32);border-radius:3px}
/* 첫 방문 힌트가 떠 있는 동안에만 트랙 상한을 힌트 밴드(y 12~24) 아래로 내린다.
   힌트는 <1200 에서 카드 상단 absolute 라, 트랙이 최대로 자라면 y16 까지 올라와 8px 겹쳤다
   (FINDINGS fidelity-11 ↔ a11y-23 충돌). :has 미지원 브라우저는 종전대로 88 — 겹쳐도 잘리진 않는다 */
.stage:has(.pager__hint:not([hidden])) .stage__track{max-height:calc(100% - 100px)}
/* 영상 옵트인 버튼(.pager__video)은 hover:none 에서만 보이고 카드 좌상단 44×44 를 먹는다.
   글자 200% 확대에서 트랙이 최대로 자라면 H1 첫 줄이 그 버튼 아래로 들어간다(a11y-live-2 실측 36×44 겹침).
   힌트와 같은 방식으로 트랙 상한을 버튼 밴드 아래로 내린다. ≥768 은 버튼이 없으므로 §15 에서 되돌린다 */
/* 버튼 밴드 = 카드 상단 8 + 44 + 여유 8 = 60, 트랙 하단 여백 72 → 100% − 132 (390 실측: 트랙 top 157 > 버튼 bottom 149) */
@media (hover:none){
  .stage__track,
  .stage:has(.pager__hint:not([hidden])) .stage__track{max-height:calc(100% - 132px)}
}
.scene{
  /* 🔴 진입 초기값을 아래(+8)에서 위(-8)로 뒤집었다. absolute 자식이라도 아래로 민 8px 는
     트랙 scrollHeight 에 그대로 더해져 상시 스크롤바를 띄웠다(09-06 실측). 트랙은 bottom 기준이라
     위로 8px 는 안쪽으로 들어가 넘침이 0 이고, 화면에서는 「제자리로 내려앉는」 같은 크기의 움직임이다. */
  position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(-8px);visibility:hidden;
  transition:opacity var(--cs-t-text-out) ease-out,transform var(--cs-t-text-out) ease-out,visibility 0s var(--cs-t-text-out);
}
/* 진입은 퇴장이 끝난 뒤 시작한다(BUILD_PLAN §6-1 「200ms out → 400ms in」).
   delay 가 없으면 두 장면이 200ms 겹쳐 보인다 (FINDINGS fidelity-6) */
.scene.is-active{
  position:relative;opacity:1;transform:none;visibility:visible;
  transition:opacity var(--cs-t-text-in) var(--cs-ease-out) var(--cs-t-text-out),
             transform var(--cs-t-text-in) var(--cs-ease-out) var(--cs-t-text-out);
}
/* eyebrow = 「지금 어느 사업 이야기인지」 이름표(2026-09-06 기획 결정).
   섹션마다 붙는 장식 eyebrow(anti-slop)와 다르다 — 무대는 장면이 갈아끼워지는 자리라
   이름표가 없으면 방문자가 무엇을 보고 있는지 알 방법이 없다. 그래서 점·괘선 같은 장식을 붙이지 않고
   글자만 액센트색으로 둔다. 그림자는 H1 과 공유해 같은 스크림 위에서 같은 강도로 뜬다. */
.scene__eyebrow{
  margin:0 0 6px;font:700 var(--cs-text-sm)/1.4 var(--cs-font);letter-spacing:.06em;
  color:var(--cs-brand-media);text-shadow:var(--cs-title-shadow);
}
.scene__h1{
  font:700 var(--cs-h1)/var(--cs-h1-lh) var(--cs-font);letter-spacing:var(--cs-h1-track);
  color:var(--cs-on-media);text-shadow:var(--cs-title-shadow);margin:0 0 16px;text-wrap:balance;
}
.scene__copy{
  font-size:var(--cs-sub);line-height:var(--cs-sub-lh);color:var(--cs-on-media-soft);margin:0 0 24px;
  text-shadow:0 1px 12px rgb(var(--cs-shadow-rgb) / .25);
}
.scene__ctas{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--cs-cta-gap);align-items:stretch}
.scene__ctas .btn{width:100%;height:var(--cs-cta-h);padding:var(--cs-cta-pad);font-size:var(--cs-cta-font)}

/* 라이브 영역: 무대 밖 형제. 시각적 숨김은 .visually-hidden 이 맡고 여기서는 흐름 이탈만 보증 */
.stage__live{position:absolute}


/* 7. 페이저 (BUILD_PLAN §6-2 산식 · 세그 28×3, 히트 seg-hit-w×44, 스윕 seg-sweep) */

/* <1200: .pager 가 카드 전체를 덮는 투명 레이어.
   🔴 이전/다음을 카드 좌우 중앙(top:50%)에 두던 배치는 폐기했다. 텍스트 트랙이 bottom 72 에서
   위로 400px 자라 세로 중앙(y≈298)을 점유하므로 44 히트와 40 어두운 원이 H1·본문을 덮고 탭을
   가로챘다(BUILD_PLAN §13 「텍스트 트랙과 겹침 0」 위반 · FINDINGS a11y-9·craft-contract-4·fidelity-4·perf-mobile-1).
   대신 데스크톱과 같은 순서(이전 · 세그 6 · 다음 · 정지)로 하단 컨트롤 행에 합류시킨다.
   🔴 행 배치는 left:calc() 절대좌표가 아니라 flex 다. 절대좌표는 폭이 모자랄 때(≤331px) 카드 밖으로
   삐져나가 overflow:hidden 에 잘렸다(FINDINGS 회귀 · 320폭 4px 넘침). flex 는 남는 폭을 넘지 않는다.
   총폭 = 44×3(이전·다음·정지) + 6×seg-hit(폭 비례 clamp 24~36, §1-2) ≤ 카드폭(100vw − 48).
   실측 390 → 334.4 / 360 → 304.6 (둘 다 여유 있음). 설계 하한 360 아래에서만 세 버튼이 40 까지 줄어든다.
   세그 6개는 서로 붙어 있어 WCAG 2.5.8(최소 24, 간격 예외 없음) 을 하한으로 지킨다 — 44 는 카드폭이
   모자라 물리적으로 불가능하다(44×9 = 396 > 360폭 카드 312). 근거·판정은 CONTRACT_ISSUES.md 참조.
   호버 조건 노출을 쓰지 않으므로 터치 기기에서도 그대로 조작된다. */
.pager{
  position:absolute;inset:0;z-index:3;pointer-events:none;color:var(--cs-on-media);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 var(--cs-pager-bottom);
}
.pager > *{pointer-events:auto}

/* 🔴 flex:0 1 auto 는 빈 <button> 이라 내재 폭이 0 → li 가 min-width(24) 합으로 눌렸다.
   설계값 33.7(390)·36(≥768)·40(≥1200) 대신 하한 24 로 렌더되고 시각 바도 min(28,24)=24 가 됐다
   (컨트롤 행에 66px 가 남아 있는데도 · FINDINGS mobile-4). 폭을 산식 그대로 명시한다 */
.pager__segs{
  display:flex;align-items:center;list-style:none;
  flex:0 0 calc(var(--cs-seg-hit-w) * 6);min-width:0;
}
.pager__segs > li{display:block;flex:0 0 var(--cs-seg-hit-w);min-width:24px}
.pager__seg{
  position:relative;display:block;width:100%;height:var(--cs-hit);
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
}
.pager__seg::after,
.pager__seg::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(var(--cs-seg-w),100%);height:var(--cs-seg-h);border-radius:2px;
  transform:translate(-50%,-50%);
}
.pager__seg::after{background:rgb(var(--cs-on-media-rgb) / .35)}
.pager__seg::before{
  background:var(--cs-on-media);
  transform:translate(-50%,-50%) scaleX(0);transform-origin:left center;
}
.pager__seg.is-active::before{transform:translate(-50%,-50%) scaleX(1)}
.pager__seg.is-sweeping::before{animation:seg-sweep var(--cs-scene-dwell) linear forwards}
/* 정지 상태의 시각 진실 — animation-play-state 는 비상속이라 호스트 <button> 인라인 스타일로는 의사요소를
   멈출 수 없다. 상태 원천인 .stage[data-paused] 를 CSS 가 직접 읽는다(FINDINGS a11y-1·fidelity-1).
   stage.js 의 WAAPI 제어와 병행 — WAAPI 를 못 쓰는 브라우저에서도 바가 멈춘다 */
.stage[data-paused="true"] .pager__seg.is-sweeping::before{animation-play-state:paused}
@keyframes seg-sweep{
  from{transform:translate(-50%,-50%) scaleX(0)}
  to{transform:translate(-50%,-50%) scaleX(1)}
}
@media (hover:hover){
  .pager__seg:hover::after{background:rgb(var(--cs-on-media-rgb) / .55)}
}
.pager__seg:active::after{background:rgb(var(--cs-on-media-rgb) / .7)}

/* 하단 컨트롤 행: 왼쪽부터 이전 · 세그 6 · 다음 · 정지 (DOM = 시각 = 포커스 순서).
   flex:0 1 로 두어 설계 하한(360) 아래에서만 40 까지 줄고, 그 위에서는 항상 44 를 지킨다 */
.pager__prev,
.pager__next,
.pager__pause{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 1 var(--cs-hit);width:var(--cs-hit);height:var(--cs-hit);min-width:40px;border-radius:50%;
  color:var(--cs-on-media);background:none;border:0;cursor:pointer;padding:0;
  transition:transform var(--cs-t-fast) var(--cs-ease-out);
}
.pager__prev svg,.pager__next svg,.pager__pause svg{width:20px;height:20px;position:relative;z-index:1}
.pager__prev::before,
.pager__next::before{
  content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--cs-x-media-dim);
}
@media (hover:hover){
  .pager__pause:hover{background:var(--cs-x-media-hover)}
  .pager__prev:hover::before,.pager__next:hover::before{background:rgb(var(--cs-ink-rgb) / .7)}
}
.pager__prev:active,
.pager__next:active,
.pager__pause:active{transform:scale(.94)}

/* 첫 방문 힌트: 컨트롤 행 위(트랙 바닥 72와 4px 겹침)가 아니라 카드 상단 중앙에 둔다
   (트랙·컨트롤의 12px 간격을 힌트가 깨지 않게 · FINDINGS fidelity-11) */
.pager__hint{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  font:700 var(--cs-text-xs)/1 var(--cs-font);color:var(--cs-on-media-soft);white-space:nowrap;
  text-shadow:0 1px 8px rgb(var(--cs-shadow-rgb) / .4);
}

/* 모바일 영상 옵트인(BUILD_PLAN §8 「사용자가 재생 버튼을 누르면 로드」).
   컨트롤 행에 넣으면 총폭이 44 늘어 카드폭을 넘기므로 카드 좌상단에 둔다(트랙은 하단 정렬이라 겹침 0).
   노출 조건 = 영상이 자동 재생되지 않는 기기뿐: hover 가 있거나(마우스) ≥768 이면 숨긴다 */
.pager__video{display:none !important;
  position:absolute;top:8px;left:8px;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--cs-hit);height:var(--cs-hit);border-radius:50%;padding:0;
  color:var(--cs-on-media);background:none;border:0;cursor:pointer;
}
.pager__video svg{width:20px;height:20px;position:relative;z-index:1}
.pager__video::before{
  content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--cs-x-media-dim);
}
.pager__video:active{transform:scale(.94)}
/* 라벨 고정 + aria-pressed 로 상태를 말한다(라벨을 뒤집으면 상태가 거꾸로 읽힌다 · a11y-12).
   시각 상태는 원 배경 밝기로만 구분한다(아이콘 교체 없음) */
.pager__video[aria-pressed="true"]::before{background:var(--cs-brand-deep)}
@media (hover:hover){ .pager__video{display:none} }


/* 8. 모바일 장면 목차 (BUILD_PLAN §6-4 · 행 44 · ≥1200 숨김) ------------------ */

.scene-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--cs-hair)}
.scene-list > li{display:block}
.scene-list__item{
  display:flex;align-items:center;width:100%;height:var(--cs-hit);padding:0 8px;
  border-bottom:1px solid var(--cs-hair);color:var(--cs-ink);
  font:400 var(--cs-text-md)/1 var(--cs-font);text-align:left;cursor:pointer;
}
/* 상태 원천은 aria-current 하나 — 클래스와 속성을 둘 다 쓰면 SSR·JS 가 어긋난다 (FINDINGS a11y-15) */
.scene-list__item[aria-current="true"]{color:var(--cs-brand);font-weight:700}
@media (hover:hover){ .scene-list__item:hover{color:var(--cs-brand)} }
.scene-list__item:active{background:var(--cs-paper-deep)}


/* 9. 푸터 3행 (CONTRACT §3-4 · BUILD_PLAN §7-3) ------------------------------- */

/* 가로 패딩 = --cs-page-x(20) → 헤더 워드마크와 같은 좌측 기준선.
   옛 12 는 푸터 글자를 헤더보다 6px 왼쪽에 두어 첫 화면에 어긋난 기준선 둘을 만들었다(FINDINGS fresh-15)
   🔴 2026-09-09 임무 I1 — 사양서 §3-5·§6-2: 푸터는 흰 면이 아니라 **#ecf0f4 전폭 띠**다. pad 32/0/16.
      body 가 좌우 --cs-page-x 를 물고 있으므로 그만큼 음수 마진으로 되돌려 화면 끝까지 칠한다
      (홈 본문 .home-body 가 쓰는 것과 같은 수법). 안쪽 글줄은 .site-footer__inner 가 1056 으로 잡는다. */
.site-footer{
  display:flex;flex-direction:column;gap:4px;
  margin-left:calc(var(--cs-page-x) * -1);
  margin-right:calc(var(--cs-page-x) * -1);
  margin-bottom:calc(var(--cs-page-bottom) * -1);
  padding:32px var(--cs-page-x) calc(16px + var(--cs-tabbar-h) + var(--rg-dock-h, 0px));
  background:var(--bg-surface-strong);
  font-size:var(--cs-text-xs);line-height:1.5;color:var(--cs-ink-soft);
}
.site-footer__inner{display:flex;flex-direction:column;gap:4px;width:100%;max-width:1056px;margin:0 auto}
/* 🔴 2026-09-17 홈 하단 도크 자리표시. calc-home.js 가 실측 px 로 덮어쓰고, 도크가 숨으면 이 값으로 되돌아온다 —
   숨는 전환 중에도 푸터가 자리를 유지해야 사이트맵 링크가 도크·탭바에 덮이지 않는다(qa-390-probe (b3)). */
body.is-home{ --rg-dock-h:64px; }
@media (min-width:768px){ body.is-home{ --rg-dock-h:0px; } }   /* 도크는 모바일 전용(home.css 353행) */
/* 히트 영역은 세로(min-height)만이 아니라 가로도 하한이 필요하다 — 「소개」·「조직」처럼 2글자 링크는
   폭이 25px 에 그친다(09-06 실측). 글자는 왼쪽에 두고 영역만 넓혀 정렬은 그대로 둔다. */
.site-footer a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){color:var(--cs-brand);text-decoration:none;display:inline-flex;align-items:center;justify-content:flex-start;min-height:var(--cs-hit);min-width:var(--cs-hit);padding:0 2px}
@media (hover:hover){ .site-footer a:hover{text-decoration:underline} }
.site-footer a:active{text-decoration:underline;color:var(--cs-brand-deep)}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px;align-items:center}

.site-footer__sitemap{position:relative}
.site-footer__sitemap > summary{
  /* 인셋 2 = 같은 푸터의 링크·헤더 워드마크와 같은 좌측 기준선(FINDINGS fresh-15) */
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;
  list-style:none;cursor:pointer;color:var(--cs-brand);font-weight:700;
}
.site-footer__sitemap > summary::-webkit-details-marker{display:none}
.site-footer__sitemap > summary::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s var(--cs-ease-out);
}
.site-footer__sitemap[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.site-footer__sitemap > ul{padding:0 4px}

.site-footer__family{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.site-footer__family-label{font-weight:700;color:var(--cs-ink);display:inline-flex;align-items:center;min-height:44px}

.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.site-footer__legal > span,
.site-footer__legal address{display:inline-flex;align-items:center;min-height:44px;flex-wrap:wrap;gap:0 12px}

/* 홈도 이제 긴 문서다 — 푸터는 다른 페이지와 같은 세로 배치를 쓴다(2026-09-08 하이브리드) */


/* 10. 서브 셸 (REF §5-2 · page-main · ScrollProgress · 진입 모션) ------------- */

main.page-main{flex:1;padding:2rem 24px 3rem;position:relative}
.page-main__inner{
  width:100%;max-width:var(--cs-inner-max);margin:0 auto;
  animation:page-in .4s var(--cs-ease-out) both;
}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}}
.page-main__inner > * + *{margin-top:var(--cs-x-section-gap)}

:where(.page-main) :where(h2){font:700 var(--cs-h2)/1.3 var(--cs-font);letter-spacing:-0.01em;margin:0 0 16px;color:var(--cs-ink)}
:where(.page-main) :where(h3){font:700 clamp(1.25rem,1.6vw,25px)/1.3 var(--cs-font);margin:0 0 12px;color:var(--cs-ink)}
:where(.page-main) :where(p){margin:0 0 1em}
:where(.page-main) :where(p:last-child){margin-bottom:0}
:where(.page-main) :where(ul,ol){padding-left:1.25em;margin:0 0 1em}
/* 🔴 2026-09-09 — 「클래스 없는 목록」으로 좁혔다.
   종전 규칙은 .page-main 안의 모든 li 에 걸렸다. 산문에서는 맞지만, 그리드·플렉스로 깔린
   카드 목록에서는 **첫 항목에만 안 붙어** 2번째부터 아래로 밀리고 첫 카드가 홀로 솟아 보인다.
   같은 사고가 두 번 났다 — catalog.css 는 이미 11곳에서 손으로 무력화하고 있었고,
   인터넷 페이지의 .int-cards · .int-scroller__track · .int-carriers · .int-chips 는 빠져 있었다.
   클래스를 붙였다는 건 그 목록을 누군가 직접 배치했다는 뜻이므로 산문 기본값을 얹지 않는다.
   실측 근거(tools/list-gap-probe.mjs 로 25라우트 × 2뷰포트 전수): 이 여백에 의존하던
   「클래스 있는」 목록은 0종이었다. .ajd-solve 의 48px 는 자기 컴포넌트 규칙이라 영향받지 않는다.
   회귀는 list-gap-probe 가 막는다(같은 줄 항목의 top 이 1px 넘게 어긋나면 🔴). */
:where(.page-main) :where(ul:not([class]), ol:not([class])) > :where(li + li){margin-top:.35em}
:where(.page-main) :where(table){width:100%;display:block;overflow-x:auto;font-size:var(--cs-text-sm);line-height:1.5}
:where(.page-main) :where(th,td){padding:12px;border-bottom:1px solid var(--cs-hair);text-align:left;vertical-align:top}
:where(.page-main) :where(th){font-weight:700;color:var(--cs-ink)}
:where(.page-main) :where(thead th){border-bottom-width:2px}
.table-wrap,.doc__table-wrap{overflow-x:auto}

/* 문서형 목차 (privacy · ol.hero-doc__lead.doc-toc) */
.doc-toc{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px}
.doc-toc li + li{margin-top:0}
/* 🔴 2026-09-19 — 목차 링크만 min-height 를 기준선(44)보다 4px 높게 잡는다(48).
   사유(실측): 이 링크의 레이아웃 높이는 정확히 44 다(offsetHeight 44 · clientHeight 44). 그런데
   .hero-doc 는 등장 대상(effects.js SELECTORS)이라 fxRise 가 도는 동안 조상에 소수 translate 가 걸리고,
   그때 getBoundingClientRect 는 레이아웃 사각형을 float 로 매핑해 top·bottom 을 각각 따로 반올림한다 —
   실측 height 43.99998474121094(= 44 − 1.5e-5 · 레이아웃은 그대로 44). 기준이 44 인 검사는 이 값을 「44 미만」으로 잡는다.
   2026-09-18 · 2026-09-19 두 번 같은 자리에서 붉었고(qa-390-probe (c) · 단독 3회 중 2회 재현), 서체 해시가
   바뀌며 로드 타이밍이 밀리자 측정 프레임이 애니메이션 꼬리에 더 자주 걸렸다.
   👉 검사를 낮추지 않는다(기준은 44 그대로). 경계에 딱 걸쳐 있던 화면 쪽 값에 여유를 준다(손가락 타깃도 커진다).
      영향 범위는 .doc-toc 를 쓰는 /privacy/ 한 장뿐이다(2026-09-19 기준 site 전체 검색 결과 1건). */
.doc-toc a{display:inline-flex;align-items:center;min-height:calc(var(--cs-hit) + 4px);padding:0 2px;font-weight:700;text-decoration:none}
@media (hover:hover){ .doc-toc a:hover{text-decoration:underline} }
.doc-toc a:active{text-decoration:underline;color:var(--cs-brand-deep)}
:where(.page-main) :where(pre,code){overflow-x:auto}

body.is-doc .page-main__inner{max-width:760px}
body.is-doc .page-main__inner > * + *{margin-top:32px}
/* doc.html 은 절을 article.doc > section.doc__section 으로 한 겹 더 감싼다.
   위 규칙은 .page-main__inner 의 직계(= article.doc 하나)에만 걸려 5개 절 사이 간격이 0 이 된다
   (h2 margin-bottom 16 · p:last-child margin-bottom 0). 래퍼 안에서도 같은 리듬을 준다. */
.doc > * + *{margin-top:32px}


/* 11. 서브 컴포넌트 (CONTRACT §3-3 · REF §5-3·§5-4) --------------------------- */

/* 11-1. 문서형 히어로 */
.hero-doc{text-align:center;max-width:990px;margin-left:auto;margin-right:auto}
.hero-doc__title{
  font:700 var(--cs-page-title)/1.25 var(--cs-font);letter-spacing:-0.01em;
  color:var(--cs-ink);margin:0 0 20px;text-wrap:balance;
}
/* 좁은 단에서 5~6줄짜리 국문 리드를 가운데 정렬하면 오른쪽 끝이 들쭉날쭉해 읽기 부담이 커지고,
   바로 아래 좌측 정렬 블록과 기준선이 갈린다(FINDINGS mobile-6·mobile-12·fresh-17). 제목만 가운데로 두고
   본문은 왼쪽에서 시작한다. ≥768 은 단이 넓어지므로 §15 에서 가운데로 되돌린다 */
.hero-doc__lead{font-size:var(--cs-text-md);line-height:1.6;color:var(--cs-ink-soft);max-width:990px;margin:0 auto;text-align:left}

/* 11-2. 탭 스위처 (트랙 945×52 r9999 pad 4 paper-deep, 활성 밝은 필 shadow 0 1px 3px) */
/* 라벨(「기업·단체 제휴 신청」)이 360~390 슬롯에서 잘리던 문제: 말줄임을 걷고 2줄을 허용한다.
   1차 내비를 자르는 것은 어절 꺾임보다 나쁘다 (FINDINGS craft-contract-9·perf-mobile-6) */
.tabs{
  display:flex;width:var(--cs-tab-w);max-width:100%;min-height:var(--cs-tab-h);padding:4px;
  margin-left:auto;margin-right:auto;
  background:var(--cs-paper-deep);border-radius:var(--cs-radius-pill);
}
.tabs__tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;
  border-radius:var(--cs-radius-pill);color:var(--cs-ink-soft);
  font:700 var(--cs-text-sm)/1.2 var(--cs-font);text-decoration:none;text-align:center;
  transition:transform var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){ .tabs__tab:hover{color:var(--cs-ink)} }
.tabs__tab:active{transform:scale(.98)}
.tabs__tab[aria-current="page"]{
  background:var(--cs-x-field-bg);color:var(--cs-ink);
  box-shadow:0 1px 3px rgb(var(--cs-shadow-rgb) / .12);
}

/* 11-3. 미디어 카드 그리드 (2열 461×404 gap 24 r16 pad 4 / 1열) */
.media-grid{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:945px;margin-left:auto;margin-right:auto;padding:0}
.media-card{
  border-radius:var(--cs-radius-card);padding:4px;background:var(--cs-paper);
  box-shadow:var(--cs-shadow-card);transition:transform var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){ .media-card:hover{transform:translateY(-2px)} }
.media-card:active{transform:scale(.99)}
.media-card > a{display:flex;flex-direction:column;min-height:var(--cs-hit);color:var(--cs-ink);text-decoration:none;border-radius:12px}
.media-card img{width:100%;min-height:140px;aspect-ratio:412/273;object-fit:cover;border-radius:12px;background:var(--cs-paper-deep)}
.media-card__body{padding:24px}
.media-card h3,.media-card strong{display:block;font:700 var(--cs-text-lg)/1.3 var(--cs-font);color:var(--cs-ink);margin:0}
.media-card p{font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft);margin:8px 0 0}
.media-card__meta{font-size:var(--cs-text-xs);color:var(--cs-brand);font-weight:700;margin-bottom:8px}
/* 고객 자료 대기 카드: 공백 없는 긴 토큰이 들어와도 배경 밖으로 나가지 않는다(FINDINGS fidelity-7·mobile-6).
   대기 블록은 화면에서 감추지만(hidden), 자료가 들어와 노출되는 순간의 회귀도 여기서 함께 막는다 */
.media-card--pending,
.person-card--pending{padding:24px;min-width:0;overflow-wrap:anywhere}
.state-note{
  max-width:945px;margin-left:auto;margin-right:auto;padding:24px;
  border:1px dashed var(--cs-hair);border-radius:var(--cs-radius-card);
  background:var(--cs-paper);color:var(--cs-ink-soft);
  font-size:var(--cs-text-md);line-height:1.7;
}

/* 11-4. 2열 사설 + 스티키 이미지 (442 + 442 gap 60 / 1열 이미지 먼저) */
.essay{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;max-width:945px;margin-left:auto;margin-right:auto;align-items:start}
.essay__media{order:-1;margin:0}
.essay__media img{width:100%;max-width:442px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--cs-radius-card);background:var(--cs-stage-dark)}
.essay__media figcaption{margin-top:8px;font-size:var(--cs-text-xs);color:var(--cs-ink-soft)}
.essay__text h2{font:700 clamp(1.25rem,1.7vw,24px)/1.25 var(--cs-font);margin:0 0 20px}
.essay__text p{font-size:var(--cs-text-md);line-height:1.75;color:var(--cs-ink)}
.essay__text p + p{margin-top:1em}
.essay.essay--text{grid-template-columns:minmax(0,760px);justify-content:center}

/* 11-5. 인용 (Gowun Batang은 about 1곳만. 다리는 §13에서 Pretendard로 되돌린다) */
.quote{
  font:400 var(--cs-quote-size)/1.6 var(--cs-font-quote);color:var(--cs-ink);
  margin:40px 0;padding:0;text-wrap:balance;
}
.quote p{margin:0;font:inherit}
.quote cite,.quote small,.quote footer{
  display:block;margin-top:12px;font:400 var(--cs-text-sm)/1.5 var(--cs-font);color:var(--cs-ink-soft);font-style:normal;
}

/* 11-6. 타임라인 (자리만) */
.timeline{display:block}

/* 11-7. Featured 35/65 (1105×476 r16 1px hair / 1열) */
.featured{
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:1105px;margin-left:auto;margin-right:auto;   /* 콘텐츠 컬럼 1105 계승 (REF §5-3) */
  border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);overflow:hidden;background:var(--cs-paper);
}
.featured__copy{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:28px 24px}
.featured__copy h2{font:700 var(--cs-h2)/1.2 var(--cs-font);letter-spacing:-0.01em;margin:0}
.featured__copy p{font-size:var(--cs-text-md);line-height:1.65;color:var(--cs-ink-soft);margin:0}
.featured__copy .btn{align-self:flex-start;margin-top:8px}
.featured__tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;background:var(--cs-paper-deep);font:700 var(--cs-text-xs)/1 var(--cs-font);color:var(--cs-ink-soft);align-self:flex-start}
.featured__media{
  position:relative;order:-1;min-height:220px;background:var(--cs-stage-dark);
  background-size:cover;background-position:50% 50%;
}
.featured__media img,.featured__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 11-8. 행 스택 25/75 (미디어 276 카피 828 pad 32/48 외곽 1px hair / 1열) */
.rows{
  max-width:1105px;margin-left:auto;margin-right:auto;   /* 콘텐츠 컬럼 1105 계승 (REF §5-3) */
  border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);overflow:hidden;background:var(--cs-paper);
}
.rows__head{padding:24px 24px 8px}
.rows__head h2{margin:0}
.row{display:grid;grid-template-columns:minmax(0,1fr)}
.row + .row,
.rows__head + .row{border-top:1px solid var(--cs-hair)}
.row__media{position:relative;min-height:200px;background:var(--cs-paper-deep);background-size:cover;background-position:50% 50%}
.row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 자료가 오기 전에는 빈 회색 사각형(가짜 미디어)을 그리지 않고 1열 텍스트 행으로 접는다.
   이미지가 들어오면 자동으로 2열로 복귀한다 (FINDINGS craft-contract-17) */
.row__media:empty{display:none}
.row:has(.row__media:empty){grid-template-columns:minmax(0,1fr)}
.row__copy{padding:24px}
.row__copy h3{font:700 clamp(1.25rem,1.6vw,25px)/1.3 var(--cs-font);margin:0 0 12px}
.row__copy p{font-size:var(--cs-text-md);line-height:1.7;color:var(--cs-ink-soft);margin:0}
.row__copy p + p{margin-top:.75em}
.row__copy strong{color:var(--cs-ink);font-weight:700}

/* 11-9. 아코디언 (86 gap 12 r16 1px hair) */
.accordion{display:flex;flex-direction:column;gap:12px;max-width:var(--cs-form-w);margin-left:auto;margin-right:auto}
.accordion__item{border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);background:var(--cs-paper)}
.accordion__item > summary{
  position:relative;display:flex;align-items:center;gap:16px;min-height:84px;padding:20px 84px 20px 24px;
  list-style:none;cursor:pointer;font:700 var(--cs-text-md)/1.4 var(--cs-font);color:var(--cs-ink);
}
.accordion__item > summary::-webkit-details-marker{display:none}
.accordion__item > summary::before{
  content:"";position:absolute;right:20px;top:50%;width:44px;height:44px;border-radius:50%;
  transform:translateY(-50%);background:var(--cs-paper-deep);
}
.accordion__item > summary::after{
  content:"";position:absolute;right:37px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--cs-ink);border-bottom:1.5px solid var(--cs-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--cs-t-fast) var(--cs-ease-out);
}
.accordion__item[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
@media (hover:hover){ .accordion__item > summary:hover::before{background:var(--cs-brand-tint)} }
.accordion__item > summary:active::before{transform:translateY(-50%) scale(.94)}
.accordion__item > :not(summary){padding:0 24px 24px;font-size:var(--cs-text-md);line-height:1.7;color:var(--cs-ink-soft)}

/* 11-10. 임원 그리드 (타이포 카드, 3열 / 1열, 가짜 아바타 없음) */
.people-grid{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:0}
.person-card{border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);padding:24px;background:var(--cs-paper)}
.person-card h3,.person-card__name{font:700 var(--cs-text-lg)/1.3 var(--cs-font);margin:0 0 4px;color:var(--cs-ink)}
.person-card__role{display:block;font:700 var(--cs-text-sm)/1.4 var(--cs-font);color:var(--cs-brand)}
.person-card p{font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft);margin:12px 0 0}
.people-greeting,
.director__greeting{padding:28px 24px;border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);font-size:var(--cs-text-md);line-height:1.75}
.director__name{margin-top:12px;font-weight:700;color:var(--cs-ink)}
.people-partners{display:block}


/* 12. 폼 (CONTRACT §3-5 · §7-1 · 라벨 위, 오류 아래, 상태별) --------------------- */

/* 파트너 입점 분야 칩 — 폼 맨 위에서 「어느 분야로 들어왔는지」를 한 줄로 확인시킨다.
   기본 hidden 이고 stage.js 가 켠다. 색만으로 구분하지 않도록 테두리를 함께 준다. */
.form-partner{
  display:inline-flex;align-items:center;align-self:flex-start;
  margin:0 0 16px;padding:6px 12px;
  border:1px solid var(--cs-brand);border-radius:999px;
  background:var(--cs-brand-tint);color:var(--cs-brand);
  font:700 var(--cs-text-sm)/1.4 var(--cs-font);
}
.form-card{
  width:100%;max-width:var(--cs-form-w);margin-left:auto;margin-right:auto;padding:var(--cs-form-pad);
  border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);background:var(--cs-paper);
}
.join-form{display:flex;flex-direction:column;gap:24px}

.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field__label,
.field__group > legend{display:block;font:700 var(--cs-text-sm)/1.4 var(--cs-font);color:var(--cs-ink)}
.field__group > legend{margin-bottom:8px}
/* 필수 별표는 시각 전용(`abbr title` 은 대부분의 SR 이 읽지 않는다 · a11y-8).
   필수 사실은 컨트롤의 required 속성이 말하고, 그게 없는 다중선택 legend 만 visually-hidden 텍스트로 보완한다 */
.field__req{color:var(--cs-x-error);margin-left:2px;font-weight:700}
/* 선택 칸 표시(2026-09-15 signup-copy A · 파트너 가입 상호·사업자등록번호). 필수 별표 자리에 「선택」 글자를 옅게 둔다 */
.field__opt{margin-left:6px;font-weight:400;color:var(--cs-ink-soft)}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea{
  display:block;width:100%;min-height:50px;padding:12px 16px;
  font:400 var(--cs-text-md)/1.5 var(--cs-font);color:var(--cs-ink);
  /* 보더는 hair 가 아니라 field-border: 필드 배경(99.2%)과 카드(97.2%)가 거의 같아
     입력 위치를 알리는 단서가 이 선 하나뿐이다(WCAG 1.4.11 3:1) */
  background:var(--cs-x-field-bg);border:1px solid var(--cs-x-field-border);border-radius:var(--cs-radius-btn);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:96px;resize:vertical}
.field select{
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='rgb(70,87,79)' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M208 96l-80 80-80-80'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
}
@media (hover:hover){
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--cs-ink-soft)}
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline-offset:1px;border-color:var(--cs-brand)}
/* opacity 로 흐리면 합성 대비가 2.6:1 로 떨어진다. ink-soft 원색(7.4:1)을 그대로 쓴다 */
.field input::placeholder,.field textarea::placeholder{color:var(--cs-ink-soft);opacity:1}

.field[data-valid="true"] input,
.field[data-valid="true"] select,
.field[data-valid="true"] textarea{border-color:var(--cs-x-valid)}
.field [aria-invalid="true"],
.field[data-valid="false"] input,
.field[data-valid="false"] select,
.field[data-valid="false"] textarea{border-color:var(--cs-x-error)}

.field__hint{font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft);margin:0}
/* 장식 상태 점 없음(BUILD_PLAN §4 금지). 오류는 색 + aria-invalid 보더 + 문구로 전달된다 */
.field__error{font:400 var(--cs-text-sm)/1.5 var(--cs-font);color:var(--cs-x-error);margin:0}

/* 다중 선택 체크박스 */
.field__group{display:block}
.field__group .field__options{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.check{
  display:flex;align-items:center;gap:10px;min-height:var(--cs-hit);padding:0 6px;
  border-radius:8px;font-size:var(--cs-text-md);line-height:1.4;color:var(--cs-ink);cursor:pointer;
}
@media (hover:hover){ .check:hover{background:var(--cs-paper-deep)} }
.check:active,.consent:active{background:var(--cs-paper-deep)}
.check input,
.consent input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--cs-brand);cursor:pointer}
.check:has(input:checked){color:var(--cs-brand);font-weight:700}

/* 동의 */
.consent{
  display:flex;align-items:flex-start;gap:10px;min-height:var(--cs-hit);padding:4px 0;
  font-size:var(--cs-text-md);line-height:1.5;color:var(--cs-ink);cursor:pointer;
}
.consent input{margin-top:2px}
.consent a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){color:var(--cs-brand)}

/* 허니팟 */
.field--hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Turnstile — 2026-09-23 은퇴(위젯 자리 · 스크립트 · CSP 허용을 함께 걷었다). 자리 높이 규칙도 쓰는 곳이 없어 뺐다 */

/* 요약 알림 (폼 카드 상단) */
.join-form__alert{
  padding:12px 16px;border:1px solid var(--cs-x-error);border-radius:var(--cs-radius-btn);
  background:var(--cs-x-error-tint);color:var(--cs-x-error);font:400 var(--cs-text-md)/1.5 var(--cs-font);
}

/* 🔴 2026-09-13 임무 ④ — /api/join 501 채팅 폴백 (알림 바로 아래).
   알림(빨강)과 톤을 구분해 「오류」가 아니라 「다른 길」로 읽히게 한다. 색은 이미 있는 토큰만 쓴다.
   버튼은 .btn--sm 이 이미 height:var(--cs-hit) 이지만, 라벨이 두 줄로 늘어난 상태에서도 44 아래로 내려가지 않도록 min-height 를 못 박는다. */
.join-form__fallback{
  display:flex;flex-direction:column;gap:12px;padding:16px;
  border:1px solid var(--border-secondary);border-radius:var(--cs-radius-btn);background:var(--cs-brand-tint);
}
.join-form__fallback-note{margin:0;font:400 var(--cs-text-md)/1.5 var(--cs-font);color:var(--cs-ink)}
.join-form__fallback-cta.join-form__fallback-cta{align-self:flex-start;min-height:var(--cs-hit)}

/* 제출 · 로딩 */
.join-form__submit{align-self:stretch}
.join-form[data-state="submitting"] .join-form__submit{opacity:.6;pointer-events:none}
/* 상호작용만 막고 시각이 그대로면 「멈췄나」로 읽힌다. disabled 시각을 같이 준다 */
.join-form[data-state="submitting"] .field{opacity:.6;pointer-events:none}

/* 성공 카드 */
.join-form__success{
  padding:32px 24px;border-radius:var(--cs-radius-card);
  background:var(--cs-brand-tint);color:var(--cs-ink);font-size:var(--cs-text-lg);line-height:1.6;
}
.join-form__success p{margin:0}
.join-form__success .btn{margin-top:20px}


/* 13. 다리 페이지 (body.is-bridge · 다크 히어로 → paper 지면) ------------------- */

body.is-bridge main{flex:1}
.bridge-hero{
  position:relative;overflow:hidden;
  padding:clamp(64px,12vw,140px) 24px;border-radius:var(--cs-radius-card);
  background:var(--cs-stage-dark);color:var(--cs-on-media);text-align:center;
  animation:page-in .4s var(--cs-ease-out) both;
}
.bridge-hero > *{position:relative;max-width:720px;margin-left:auto;margin-right:auto}
.bridge-hero > * + *{margin-top:24px}
/* 같은 크기·반경의 어두운 카드인데 미디어가 없어 1120×648 검은 판에 텍스트만 26% 떠 있었다
   (레퍼런스의 「어두운 카드 = 미디어 카드」 문법과 어긋남 · FINDINGS fidelity-12).
   무대와 같은 소재(scene5_family)를 깔고 균일 스크림으로 텍스트 대비를 히어로와 동일하게 유지한다 */
.bridge-hero__media,
.bridge-hero__scrim{position:absolute;inset:0;max-width:none;width:100%;height:100%;margin:0}
.bridge-hero__media{object-fit:cover;object-position:50% 50%}
.bridge-hero__scrim{
  pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--cs-ink-rgb) / .74),rgb(var(--cs-ink-rgb) / .82));
}
.bridge-hero h1{
  font:700 var(--cs-page-title)/1.2 var(--cs-font);letter-spacing:-0.01em;
  color:var(--cs-on-media);text-shadow:var(--cs-title-shadow);text-wrap:balance;
}
.bridge-hero p{font-size:var(--cs-sub);line-height:var(--cs-sub-lh);color:var(--cs-on-media-soft)}
.bridge-hero .page-main__inner{max-width:720px}
.bridge-hero .page-main__inner > * + *{margin-top:24px}
.bridge-body .page-main__inner{max-width:760px}
.bridge-hero .quote{color:var(--cs-on-media-soft)}
.bridge-hero .quote cite,.bridge-hero .quote small{color:var(--cs-on-media-soft)}
.bridge-hero a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){color:var(--cs-on-media)}

.bridge-body{
  padding:clamp(48px,8vw,96px) 24px 3rem;background:var(--cs-paper);color:var(--cs-ink);
  animation:page-in .4s var(--cs-ease-out) both;animation-delay:.08s;
}
.bridge-body > *{max-width:760px;margin-left:auto;margin-right:auto}
.bridge-body > * + *{margin-top:var(--cs-x-section-gap)}
.bridge-body p{font-size:var(--cs-text-md);line-height:1.75}
.bridge-body p + p{margin-top:1em}
.bridge-body h2{font:700 var(--cs-h2)/1.3 var(--cs-font);letter-spacing:-0.01em;margin:0 0 16px}
body.is-bridge .quote{font-family:var(--cs-font);font-weight:400}
.bridge-boundary,
.bridge-body__note,
.bridge-body .note{
  padding:20px 24px;border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);
  font-size:var(--cs-text-md);line-height:1.7;color:var(--cs-ink-soft);
}
.bridge-ctas{display:flex;flex-direction:column;gap:12px;align-items:stretch}
/* 세로 스택 구간에서는 라벨을 접을 수 있게 둔다. 「긴 버튼 라벨」(16px 기준 텍스트 ≈184 + 패딩 56)
   가 nowrap 이면 좁은 폭에서 컨테이너를 넘어 body{overflow-x:hidden} 에 조용히 잘린다. 높이는 하한으로만 */
.bridge-ctas .btn{width:100%;white-space:normal;height:auto;min-height:52px;text-align:center}
.bridge-meta{display:block}


/* 14. 404 ------------------------------------------------------------------- */

main.not-found{flex:1;padding:3rem 24px;text-align:center;animation:page-in .4s var(--cs-ease-out) both}
.not-found h1{font:700 var(--cs-page-title)/1.25 var(--cs-font);letter-spacing:-0.01em;margin:0 0 16px;text-wrap:balance}
.not-found p{font-size:var(--cs-text-md);line-height:1.6;color:var(--cs-ink-soft);max-width:560px;margin:0 auto}
.not-found ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px;max-width:760px;margin:32px auto 0;padding:0}
.not-found li a{display:inline-flex;align-items:center;min-height:var(--cs-hit);padding:0 4px;color:var(--cs-brand);font-weight:700;text-decoration:none}
@media (hover:hover){ .not-found li a:hover{text-decoration:underline} }
.not-found li a:active{text-decoration:underline;color:var(--cs-brand-deep)}


/* 15. 브레이크포인트 (min-width 전용 · CONTRACT §4-2 · §6) ---------------------- */

/* T ≥768: 트랙 24/24/60, CTA 가로 1줄 52, 미디어 카드 2열, 체크 2열 */
@media (min-width:768px){
  :root{
    --cs-page-top:20px;
    --cs-page-bottom:0px;
    --cs-tabbar-h:0px;   /* 하단 탭바는 모바일 전용(사양서 §2-1: 「하단 탭바 PC 없음」) */
    /* 계약값 복원(§4-1). 360폭 하한만 기본 티어에서 낮췄다 */
    --cs-h1:clamp(1.625rem,3.4vw,3rem);
    --cs-track-left:24px;  --cs-track-right:24px;
    /* 🔴 계약표의 60 은 CTA 행 바닥과 페이저 행 머리가 정확히 같은 y 에 붙는다(768 실측 ctaBottom 808 = prevY 808).
       같은 표의 주석이 요구하는 「페이저와 12px 간격」을 지키도록 84 로 올린다 = 간격 24
       (터치 기기라 44 히트가 서로 붙으면 오탭이 난다 · FINDINGS mobile-10·fidelity-13 · CONTRACT_ISSUES 등록) */
    --cs-track-bottom:84px;
    --cs-cta-h:52px;  --cs-cta-font:14px;  --cs-cta-pad:12px 16px;  --cs-cta-gap:16px;
    --cs-seg-hit-w:36px;   /* 계약값(§4-2). 기본 티어의 폭 비례 clamp 를 여기서 고정한다 */
    --cs-quote-size:22px;
    --cs-x-section-gap:64px;
  }
  .scene__ctas{flex-direction:row;align-items:center}
  .scene__ctas .btn{width:auto}
  /* H1 이 1.625rem 이상으로 커지는 구간이라 이름표도 한 단 올린다(390 에서는 22px H1 옆 14px 가 맞다) */
  .scene__eyebrow{font-size:var(--cs-text-md);margin-bottom:8px}
  /* ≥768 은 영상 자동 경로다(stage.js mobileNoVideo = hover:none · <768). 옵트인 버튼은 필요 없다 */
  .pager__video{display:none}
  /* 옵트인 버튼이 없으므로 기본 티어의 트랙 상한 축소(hover:none 100px)를 되돌린다 */
  @media (hover:none){
    .stage__track{max-height:calc(100% - 72px)}
    .stage:has(.pager__hint:not([hidden])) .stage__track{max-height:calc(100% - 100px)}
  }
  /* 페이저를 카드 중앙에 띄우면 좌측 CTA 두 개와 축이 갈려 하단이 좌우로 쪼개져 보인다(FINDINGS mobile-10·fresh-20).
     CTA 와 같은 좌측 기준선(트랙 left 24, 원 지름 40 이 히트 44 안에 2px 인셋)에 맞춘다 */
  .pager{justify-content:flex-start;padding-left:calc(var(--cs-track-left) - 2px)}
  .hero-doc__lead{text-align:center}
  /* 탭 라벨: 슬롯이 충분해지므로 계약 크기·패딩 복원(말줄임은 쓰지 않는다) */
  .tabs__tab{padding:0 16px;font-size:var(--cs-text-md);line-height:1}
  .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field__group .field__options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .join-form__submit{align-self:flex-start}
  .bridge-ctas{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .bridge-ctas .btn{width:auto;white-space:nowrap;height:52px;min-height:0}   /* 가로 1줄 구간은 계약 기하 복원 */
  :where(.page-main) :where(table){display:table}
}

/* nav ≥876: 내비 표시, 버거 숨김 · 헤더 CTA 는 ≥1024 에서만(아래 블록)
   🔴 2026-09-26 되돌림 — 09-22 개편이 전환점을 876 → 1024 로 올렸고, 그 뒤 876~1023 폭에서 상단 메뉴 바가
      새로 사라졌다(고객 「PC 모바일 다 없어졌네요」 · 노트북 반쪽 창 900~1000 · 폰 「데스크톱 사이트」 980 이 이 띠다).
      09-22 당시의 「876 에서는 한 줄에 안 들어간다」는 그때 서식(14px · 여백 8 · 간격 12) 기준이고 사실이었다 —
      실측 876 에서 −128.9px 넘침. 그런데 같은 날 밤 08616c2 가 서식을 13px · 여백 12/5 · 간격 2 로 조였고,
      그 서식이면 876 에서 여유 +30.1px 로 들어간다(2026-09-26 실측 · 12칸 내비 고유폭 656 · 첫 합격 폭 820).
      876 이 ≥1024 보다 오히려 넉넉한 이유: <1024 는 유틸 줄이 숨어 단추 묶음이 84.3px 이다(≥1024 는 180.5px).
      그래서 헤더 CTA 는 올리지 않고 ≥1024 에 그대로 둔다 — 올리면 이 여유가 사라진다.
      🔴 stage.js initHeader 의 matchMedia 와 docs/HEADER_FIT.json navVisibleFromPx 와 같은 값이어야 한다(header-fit-probe 가 셋을 대조한다) */
@media (min-width:876px){
  :root{ --cs-nav-gap:12px }
  .site-nav{display:block}
  .site-header__burger{display:none}
  .mobile-menu,.mobile-menu-dim{display:none!important}
}
/* 헤더 CTA(btn--sm 40) — ≥1024 에서만. 876~1023 에서 이 단추를 켜면 내비 여유 30.1 → −60 대로 뒤집힌다 */
@media (min-width:1024px){
  .site-header__cta{display:inline-flex}
}

/* D ≥1200: 홈 잠금, body 20/80/0, 카드 flex:1, 트랙 80/80/40 max 600, 페이저 우하 50/40 총폭 372 */
@media (min-width:1200px){
  /* 카드가 16:9 에 가까워져 좌우가 거의 안 잘린다 — 한옥 컷 크롭 기준을 계약값(가운데)으로 되돌린다 */
  .stage:has(.scene.is-active[data-scene-id="root"]) .stage__poster,
  .stage:has(.scene.is-active[data-scene-id="root"]) .stage__vid{object-position:50% 50%}
  :root{
    --cs-page-x:80px;
    --cs-page-top:20px;
    --cs-page-bottom:0px;
    --cs-nav-gap:24px;
    /* 🔴 2026-09-08 하이브리드: 종전 auto 는 「body.is-home{height:100vh}」 잠금 안에서 flex:1 로 자라는 값이었다.
       잠금을 걷었으므로 무대는 스스로 첫 화면을 채워야 한다. 오프셋 = page-top 20 + 헤더 61 + gap 10 = 91,
       거기서 49 를 더 빼 아래 섹션이 손톱만큼 보이게 둔다(스크롤이 더 있다는 신호). svh 는 아래 @supports 가 덮는다. */
    --cs-card-h:calc(100vh - var(--cs-header-h) - 79px);
    --cs-track-left:80px;  --cs-track-right:80px;
    --cs-track-bottom:40px;
    /* 🔴 1200~1439 는 카드폭(뷰포트-160)이 좁아 트랙 600 + 페이저 행 422 가 가로로 물린다(09-06 실측).
       1440 이상에서 600 을 되돌린다(아래 1440 티어). */
    --cs-track-max:512px;
    --cs-cta-h:52px;  --cs-cta-font:16px;  --cs-cta-pad:14px 28px;  --cs-cta-gap:16px;
    --cs-pager-right:50px;  --cs-pager-bottom:40px;
    --cs-seg-hit-w:40px;  --cs-hit:44px;
    --cs-footer-h:44px;
    --cs-tab-w:945px;
    --cs-form-w:1040px;  --cs-form-pad:48px 32px;
    --cs-inner-max:1064px;   /* 🔴 임무 I1 · 사양서 §2-1 콘텐츠 컨테이너 1064 (종전 1200) */
    --cs-quote-size:24px;
    --cs-x-section-gap:88px;
    /* 16:9 에 가까운 데스크톱 카드에서는 텍스트 트랙이 하단 밴드에만 놓인다 — 계약 스크림(35~75%) 복원.
       실측 1440 장면2 H1 밴드 루마 95(6.4:1)로 이 값에서 이미 통과한다 */
    --cs-scrim-top:35%;  --cs-scrim-full:75%;
  }
  /* 🔴 데스크톱 티어는 svh 로 덮지 않는다. svh 는 모바일 툴바 접힘을 위한 단위이고 데스크톱엔 그 문제가 없다.
     09-08 미리보기 실측: 이 환경에서 100svh 가 0 으로 풀려 카드 높이가 calc(0 - 140px) → 0 이 됐다.
     vh 는 모든 환경에서 안정적이고, .stage 의 min-height:520 이 계산 실패의 바닥을 한 번 더 받친다. */

  /* 🔴 짧은 데스크톱(≤700h)은 카드가 낮아 텍스트 밴드가 스크림 시작선 위로 올라간다
     (실측 1280×620 장면2 H1 3.78:1). 밴드를 위로 넓혀 4.5:1 을 회복한다. */
  @media (max-height:700px){
    .stage__overlay{ --cs-scrim-top:8%; --cs-scrim-full:52%; }
    .stage:has(.scene.is-active[data-scene-id="welldying"]) .stage__overlay{ --cs-scrim-a:.66 }
  }

  /* 잠금은 폭만이 아니라 높이도 본다. 짧은 뷰포트·텍스트 확대에서 잘린 카피에 닿지 못하는 것을 막는다
     (잠금 자체는 아래 (min-height:720px) 블록에서만 켠다 · FINDINGS a11y-23) */
  .stage{height:auto;flex:1;min-height:520px}
  .scene-list{display:none}
  .site-header__logo{gap:10px;min-width:0}
  .site-header__mark{height:40px}
  .site-header__descriptor{
    display:inline-block;max-width:300px;min-width:0;
    padding-left:10px;border-left:1px solid var(--cs-hair);
    font:400 var(--cs-text-xs)/1.4 var(--cs-font);color:var(--cs-ink-soft);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .site-nav__panel--center{left:50%;right:auto;transform:translateX(-50%)}

  /* 페이저: 우하단 한 줄 (prev 44 + seg 40×6 + next 44 + pause 44 = 372) */
  .pager{
    inset:auto;right:var(--cs-pager-right);bottom:var(--cs-pager-bottom);
    display:flex;align-items:center;pointer-events:auto;padding:0;
  }
  .pager__segs,.pager__pause,.pager__prev,.pager__next,.pager__hint{position:static;transform:none}
  /* li 의 flex-basis 를 auto 로 되돌리지 않는다 — `.pager__seg{width:100%}` 가 기준을 잃는다.
     ≥1200 의 .pager 는 폭 제약이 없어 축소가 걸리지 않는다(basis = 40 그대로) */
  /* 힌트가 컨트롤 행 안(static)이라 트랙과 겹치지 않는다 — 기본 티어의 상한 축소를 되돌린다 */
  .stage:has(.pager__hint:not([hidden])) .stage__track{max-height:calc(100% - 72px)}
  .pager__prev::before,.pager__next::before{content:none}
  .pager__hint{margin-left:8px;top:auto;left:auto}
  /* hover 배경은 hover 격리 안에서만. 밖에 두면 터치 기기에서 배경이 고착된다 */
  @media (hover:hover){
    .pager__prev:hover,.pager__next:hover{background:var(--cs-x-media-hover)}
  }

  /* 🔴 2026-09-08: 홈 푸터 1행 압축(가로 정렬 · 사이트맵 위로 펼침 · 링크 높이 24)을 걷었다.
     그 규칙들은 「홈은 한 화면, 푸터는 그 화면 안 한 줄」이라는 잠금 레이아웃의 부속이었다.
     하이브리드에서 푸터는 긴 문서의 끝이므로 다른 페이지와 같은 세로 푸터를 쓴다 —
     링크 히트 44 도 예외 없이 그대로 지켜진다(WCAG 2.5.8 압축 예외가 필요 없어졌다). */

  /* 서브 셸. 상단 = 계약값 「헤더 하단 +101」에서 body 세로 gap 10 을 뺀 값(CONTRACT §3-3) */
  main.page-main{padding:calc(101px - var(--cs-gap-stack)) 80px 4rem}
  .hero-doc__lead{font-size:var(--cs-text-lg)}

  .essay{grid-template-columns:442px 442px;gap:60px;justify-content:center}
  .essay__media{order:0;position:sticky;top:200px}
  .essay__media img{width:442px;height:442px}
  .essay__text p{font-size:var(--cs-text-lg)}

  .featured{grid-template-columns:35fr 65fr;min-height:476px}
  .featured__copy{padding:32px 40px}
  .featured__media{order:0;min-height:0}

  .rows__head{padding:32px 48px 12px}
  .row{grid-template-columns:25fr 75fr}
  .row__media{min-height:320px}
  .row__copy{padding:32px 48px;border-left:1px solid var(--cs-hair)}
  .row:has(.row__media:empty) .row__copy{border-left:0}   /* 미디어 칸이 접히면 세로 구분선도 없다 */

  .people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field__group .field__options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .join-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

  .bridge-hero{padding-left:80px;padding-right:80px}
  .bridge-body{padding-left:80px;padding-right:80px}
}

/* 🔴 2026-09-08 하이브리드 전환: 홈 스크롤 잠금(body.is-home{height:100vh;overflow:hidden})을 걷었다.
   홈이 「무대 한 장 + 본문 8섹션」이 되어 페이지가 실제로 스크롤돼야 하고, 잠금이 있으면
   stage.js 의 탈출 가드(canScrollDown = 문서에 남은 스크롤 여유)가 영원히 거짓이라 마지막 장면에서
   아래로 굴려도 본문으로 넘어가지 못한다. 무대 높이는 --cs-card-h 가 직접 책임진다(위 D 티어).
   토큰 --cs-stage-lock 은 남겨 둔다 — 잠금이 다시 필요해질 때 값 하나로 되살릴 자리다.
   🔴 min-height:520 을 걷던 `body.is-home .stage{min-height:0}` 도 함께 지웠다 — 잠금이 없는 지금은
   그 하한이 높이 계산이 실패했을 때의 바닥(빈 화면 방지)이다. */

/* 짧은 노트북(1280×620)에서는 카드 하한 520 때문에 푸터가 화면 밖으로 밀리고 페이지 스크롤바가 생긴다.
   레퍼런스 문법(내비 + 카드 + 푸터가 한 화면)을 이 대역에서도 지키도록 카드 하한만 낮춘다
   (잠금은 위 블록에서 이미 걸지 않는다 · FINDINGS fidelity-11) */
@media (min-width:1200px) and (max-height:719.98px){
  .stage{min-height:420px}
}

/* XL ≥1440: 카드·헤더·푸터 1280 상한 중앙. 서브 inner 1200 유지 */
@media (min-width:1440px){
  /* 카드가 1280 로 고정되는 구간에서는 트랙 600 + 페이저 422 가 함께 들어간다(계약값 복원) */
  :root{ --cs-track-max:600px; }
  .site-header,
  main.stage-wrap{width:100%;max-width:1280px;margin-left:auto;margin-right:auto}
  /* 🔴 임무 I1: 푸터는 배경 띠라 1280 로 잘리면 안 된다. 폭은 화면 끝까지, 글줄만 .site-footer__inner 가 1056 으로 잡는다 */
}


/* 16. reduced-motion (CONTRACT §4-3 · 페이드·스윕·스태거 제거, 즉시 전환) ------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scene,
  .scene.is-active,
  .stage__video,
  .stage__vid,
  .site-nav__panel,
  .site-nav__panel *,
  .mobile-menu,
  .panel-grid > li,
  .panel-list > li,
  .panel-intro,
  .btn,
  .btn::after,
  .site-nav__chevron,
  .tabs__tab,
  .media-card,
  button.panel-card,
  .pager__prev,.pager__next,.pager__pause,
  .accordion__item > summary::after,
  .site-footer__sitemap > summary::after,
  body.is-home .site-footer__sitemap > ul,
  .page-main__inner,
  .bridge-hero,
  .bridge-body,
  main.not-found{transition:none;animation:none}
  .scene{transform:none}
  /* `.pager__seg.is-sweeping::before`(0,2,1) 를 이기려면 같은 특이성이 필요하다 — 단일 클래스로 쓰면
     RM 인데도 스윕이 그대로 재생된다(FINDINGS a11y-1 (b)) */
  .pager__seg::before,
  .pager__seg.is-sweeping::before{animation:none}
  .btn:hover{transform:none}
  .media-card:hover{transform:none}
}

/* /network 협력 네트워크 목록 (09-06 실데이터 적용) */
.net-group{margin-top:2.5rem}
.net-group__title{font-size:var(--cs-text-lg);font-weight:700;color:var(--cs-ink);padding-bottom:.5rem;border-bottom:1px solid var(--cs-hairline)}
.net-list{list-style:none;display:grid;grid-template-columns:1fr;gap:0}
.net-list__item{border-bottom:1px solid var(--cs-hairline)}
.net-list__link{display:flex;align-items:center;min-height:56px;padding:0 4px;color:var(--cs-ink);text-decoration:none;font-size:var(--cs-text-md)}
.net-list__link::after{content:"↗";margin-left:auto;color:var(--cs-ink-soft);font-size:var(--cs-text-sm)}
@media (hover:hover){.net-list__link:hover{color:var(--cs-brand)}}
.net-list__link:active{color:var(--cs-brand-deep)}
.net-note{margin-top:2rem;font-size:var(--cs-text-sm);color:var(--cs-ink-soft)}
.hero-doc__note{margin-top:1rem;color:var(--cs-ink-soft)}
@media (min-width:768px){ .net-list{grid-template-columns:1fr 1fr;column-gap:2rem} }


/* ══════════════════════════════════════════════════════════════
   🔴 모바일 = 영상 전용 화면 (2026-09-06 기획 결정: "16:9 꽉차게 영상만, 밑에 아예 없게")
   장면 목차를 감추고 카드를 좌우 끝까지 붙여 헤더 아래 화면 전부를 영상이 차지한다.
   푸터는 화면 밖으로 밀려 스크롤해야 나온다. ≥768 은 종전 카드 형태 유지.
   이 블록은 .scene-list 정의보다 뒤에 와야 이긴다(같은 특이도 → 소스 순서).
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  .scene-list{display:none !important}
  .stage{
    border-radius:0;
    margin-left:calc(var(--cs-page-x) * -1);
    margin-right:calc(var(--cs-page-x) * -1);
  }
  main.stage-wrap{gap:0}
  body{padding-bottom:0}
  .site-footer{margin-top:var(--cs-gap-stack)}
}


/* 17. 하이브리드 홈 · 대분류 메가메뉴 · 검색 · 푸터 묶음 (2026-09-08 · 임무 A) ----
   추가만 한다. 위 §1~16 의 선택자를 다시 쓰지 않는다.
   대비 실측(sRGB · 2026-09-09 임무 I1 재계산): ink #1f2429 on paper #ffffff = 15.64 · ink-soft #575e64 on paper = 6.58
                    brand #145ce6 on paper = 5.67 · paper on brand = 5.67 · hair #ecf0f4 는 장식선(텍스트 아님)
   ------------------------------------------------------------------------- */

/* 17-1. 종이 버튼 — 흰 바탕 위 본문색 글자. 헤더 파트너 · 목록 페이지 보조 CTA 가 쓴다.
   🔴 종전에는 calc.css 에만 있어 calc.css 를 싣지 않는 페이지(/products · /c/*)와 헤더에서 무스타일이었다. 기본 팔레트라 여기로 올린다 */
/* 불변식 B: 자기중복으로 (0,2,0). 자손 스코프 링크 규칙(0,1,1)이 다시 삼키지 못하게 한다 */
.btn--paper.btn--paper{background:var(--cs-paper);color:var(--cs-ink);box-shadow:inset 0 0 0 1.5px var(--cs-btn-edge)}
@media (hover:hover){ .btn--paper:hover{background:var(--cs-paper-deep)} }

/* 17-2. 하이브리드 홈 본문 — 무대 아래로 이어지는 8섹션.
   섹션 배경(흰 면 · 연회색면 · 반전면)이 페이지 좌우 끝까지 닿도록 body 가로 패딩만큼만 되민다.
   🔴 100vw 를 쓰지 않는다 — 스크롤바 폭만큼 가로 넘침이 생긴다(모바일 375 가로 overflow 0 요구). */
.home-body{margin:var(--cs-gap-stack) calc(var(--cs-page-x) * -1) 0}
/* 도크(<768 position:fixed)가 마지막 요소를 가리지 않도록 아래 여백을 둔다 */
@media (max-width:767.98px){
  .home-body{padding-bottom:88px}
}
/* 무대 아래 섹션으로 앵커 이동할 때 고정 헤더에 가리지 않게 한다 */
.home-body [id]{scroll-margin-top:calc(var(--cs-header-h) + 12px)}

/* 17-3. FAQ 블록(임무 D content/faq.html) — 아코디언은 가운데 정렬(.accordion)인데 제목·꼬리는 전폭이라
   좌우 기준선이 어긋난다. 같은 폭으로 묶는다(임무 D handoff [4] 요청 3줄) */
.faq{max-width:var(--cs-form-w);margin-left:auto;margin-right:auto}
.faq__title{margin-bottom:20px}
.faq__more{margin-top:20px;font-size:var(--cs-text-sm);color:var(--cs-ink-soft)}

/* 17-4. 대분류 메가메뉴 카드 — 링크형(button.panel-card 는 장면 점프용이라 그대로 둔다) */
/* 파트너 입점 카드 — 건수 줄이 없어 한 줄짜리다. 최소 44 높이로 터치 타깃을 지킨다. */
a.panel-card--link{
  display:flex;align-items:center;min-height:var(--cs-hit);padding:0 12px;
  border-radius:var(--cs-radius-bar);text-decoration:none;
  transition:background-color var(--cs-t-fast) var(--cs-ease-out), transform var(--cs-t-fast) var(--cs-ease-out);
}
a.panel-card--link .panel-card__title{padding:0}
@media (hover:hover){ a.panel-card--link:hover{background:var(--cs-brand-tint)} }
a.panel-card--link:active{transform:scale(.985)}
a.panel-card--cat{
  display:flex;flex-direction:column;gap:2px;min-height:var(--cs-hit);
  padding:10px 12px;border-radius:var(--cs-radius-bar);
  text-decoration:none;color:var(--cs-ink);background:transparent;
  transition:background var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){ a.panel-card--cat:hover{background:var(--cs-paper-deep)} }
a.panel-card--cat:active{background:var(--cs-paper-deep)}
a.panel-card--cat[aria-current="page"]{background:var(--cs-brand-tint);color:var(--cs-brand-deep)}
a.panel-card--cat .panel-card__desc{color:var(--cs-ink-soft);font-size:var(--cs-text-sm)}
.panel-foot{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;
  margin-top:12px;padding:12px;border-top:1px solid var(--cs-hair);
}

/* 17-5. 헤더 검색창 — 상품 이관 전이라 disabled. 왜 막혀 있는지를 화면이 직접 말한다 */
.site-search{display:flex;flex-direction:column;gap:6px;min-width:min(320px,100%)}
.site-search__label{margin:0;font:700 var(--cs-text-xs)/1.4 var(--cs-font);color:var(--cs-ink-soft)}
.site-search__row{display:flex;gap:8px;align-items:center}
.site-search__input{
  flex:1 1 auto;min-width:0;height:var(--cs-hit);padding:0 12px;
  border:1px solid var(--cs-x-field-border);border-radius:var(--cs-radius-btn);
  background:var(--cs-x-field-bg);color:var(--cs-ink);font:400 var(--cs-text-sm)/1.5 var(--cs-font);
}
.site-search__input:disabled{background:var(--cs-paper-deep);color:var(--cs-ink-soft);cursor:not-allowed}
.site-search__btn{flex:none}
.site-search__note{margin:0;font-size:var(--cs-text-xs);line-height:1.5;color:var(--cs-ink-soft)}

/* 17-6. 모바일 드로어 — 대분류 아코디언 */
.mobile-menu__acc{border-bottom:1px solid var(--cs-hair)}
.mobile-menu__acc > summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:var(--cs-hit);padding:0 4px;list-style:none;cursor:pointer;
  font:700 var(--cs-text-md)/1.4 var(--cs-font);color:var(--cs-ink);
}
.mobile-menu__acc > summary::-webkit-details-marker{display:none}
.mobile-menu__acc > summary::after{
  content:"";flex:none;width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s var(--cs-ease-out);
}
.mobile-menu__acc[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.mobile-menu__sub{padding:0 0 8px 12px}
.mobile-menu__link--sub{font-weight:400;justify-content:space-between;gap:12px}
/* 파트너 로그인(2026-09-12 임무 ③) — 파트너 입점 아코디언 마지막 항목. 얇은 윗줄로 분야 8개와 떼고 잉크 보조색(대비 게이트 안) */
.mobile-menu__link--login{margin-top:4px;border-top:1px solid var(--cs-hair);border-radius:0 0 8px 8px;color:var(--cs-ink-soft)}
.mobile-menu__note{margin:16px 0 0;font-size:var(--cs-text-xs);line-height:1.5;color:var(--cs-ink-soft)}
.mobile-menu__partner{margin-top:16px;align-self:flex-start}

/* 17-7. 푸터 — 사이트맵 묶음 + 사업자 정보 접이식 */
.site-footer__group{margin-top:8px}
.site-footer__group-label{margin:0 0 2px;padding:0 2px;font-weight:700;color:var(--cs-ink)}
.site-footer__biz-toggle > summary{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--cs-hit);padding:0 2px;
  list-style:none;cursor:pointer;color:var(--cs-brand);font-weight:700;
}
.site-footer__biz-toggle > summary::-webkit-details-marker{display:none}
.site-footer__biz-toggle > summary::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s var(--cs-ease-out);
}
.site-footer__biz-toggle[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
/* 2026-09-08 통합(임무 M): §13① 라벨 8개를 span 으로 모으면서 라벨과 값이 한 줄에 붙어 읽혔다.
   항목 사이를 벌리고 라벨을 값보다 여리게 둔다. 라벨 #575e64 / 푸터면 #ecf0f4 = 5.75:1 (4.5:1 충족).
   R3 handoff 의 「라벨을 흐리게(--cs-ink-soft)」 요청을 여기서 처리했다. */
.site-footer__biz{display:flex;flex-wrap:wrap;gap:4px 16px}
.site-footer__biz-label{color:var(--cs-ink-soft);font-weight:400}

/* 17-8. 헤더 우측 파트너 버튼 — 내비가 보이는 구간에서만(그 아래는 드로어 안에 있다).
   876~1023 은 5항목 내비 + 버튼 둘이 함께 서면 바가 넘쳐 파트너를 감춘다 */
.site-header__partner{display:none;flex:none}
@media (min-width:1024px){
  .site-header__partner{display:inline-flex}
}

/* 🔴 임무 I1 · 사양서 §2-1 — PC 헤더 108(모바일 48). 전환점은 사양서의 tablet 브레이크포인트 1024 다.
   --cs-card-h · body.is-home .stage 의 min-height 가 이 토큰을 그대로 참조하므로 값을 두 번 적지 않는다 */
@media (min-width:1024px){
  :root{ --cs-header-h:108px; --cs-header-pad:0 20px }
}

@media (prefers-reduced-motion: reduce){
  a.panel-card--cat,
  .mobile-menu__acc > summary::after,
  .site-footer__biz-toggle > summary::after{transition:none;animation:none}
}

/* 17-9. 🔴 무대·본문은 줄어들지 않는다 (2026-09-08 실측)
   main.stage-wrap 은 세로 flex 컨테이너이고 자식들의 flex-shrink 기본값은 1 이다. 홈이 길어지면서
   컨테이너가 자식 합보다 조금 작아지는 순간 무대가 583 → 520(min-height 바닥)으로 눌렸다
   (Chrome 1241×723 실측: --cs-card-h 는 calc(100vh - 140px)=583 인데 사용 높이는 520).
   높이를 지시한 요소가 조용히 줄지 않도록 shrink 를 끈다. */
main.stage-wrap > .stage,
main.stage-wrap > .home-body{flex:none}

/* 17-10. 🔴 히어로 높이는 min-height 로 못박는다 (2026-09-08 실기기 실측)
   `height:var(--cs-card-h)` 만으로는 세로 flex 안에서 사용 높이가 min-height 바닥(520)까지 눌렸다
   (Chrome 1241×723: 토큰은 583 으로 정확히 풀리는데 사용 높이는 520). min-height 는 눌리지 않는다.
   ≥1200 에서만 건다 — <1200 은 종전 --cs-card-h 계산과 520 하한을 그대로 쓴다. */
@media (min-width:1200px){
  body.is-home .stage{min-height:calc(100vh - var(--cs-header-h) - 79px)}
}


/* 18. 헤더 유틸 줄 · 준비 중 내비 · 모바일 하단 탭바 · 푸터 면책 (2026-09-09 · 임무 I1) ----
   정본 = 기획_참고 사이트방식/00_이식사양.md §2-1(그리드) · §6-1(헤더) · §6-2(푸터) · §6-4(탭바).
   추가만 한다. §1~17 의 선택자는 값이 아니라 형태를 바꿀 때만 다시 쓴다(아래 .site-header 반경 1건).
   대비 실측(sRGB · 2026-09-09):
     유틸 링크 #575e64 / 흰 = 6.58 · 준비중 표시 #575e64 / 흰 = 6.58
     탭바 라벨 #575e64 / 흰 = 6.58 · 현재 탭 #145ce6 / 흰 = 5.67 · 탭바 윗선 #dee2e6 = 장식선
     푸터 면책 #575e64 / 푸터면 #ecf0f4 = 5.75  ← 사양서는 #8c939a(13/20)를 적었으나 푸터면 위 2.71 로
       4.5:1 에 못 미친다. 크기(13/20)는 사양서대로 두고 색만 한 단 진하게 내렸다(불변 규칙 7: 검사를 낮추지 않는다). */

/* 18-1. 헤더 — 참고 사이트 헤더는 떠 있는 알약이 아니라 화면 폭에 붙은 바다 */
.site-header{border-radius:0}

/* 18-2. 유틸 줄 — PC(≥1024)에서만. 모바일 헤더는 1줄 48 이다(§2-1) */
.site-header__util{display:none}
.site-header__util-list{
  display:flex;align-items:center;justify-content:flex-end;gap:0 20px;
  height:100%;max-width:1064px;margin:0 auto;padding:0 var(--cs-page-x);list-style:none;
}
.site-header__util-link{
  display:inline-flex;align-items:center;min-height:32px;
  color:var(--fg-secondary);font:400 var(--cs-text-xs)/1 var(--cs-font);text-decoration:none;
}
@media (hover:hover){ .site-header__util-link:hover{color:var(--fg-brand)} }
/* 회원 칩 li — 로그인 상태면 stage.js 가 a(이름님 · 내 계정) + button(로그아웃) 둘을 넣는다. 유틸 줄 gap 은 li 사이에만 붙으므로 li 안에도 간격을 둔다
   (2026-09-13 검증 라운드 1: 「내 계정로그아웃」 한 덩어리 회귀 · auth-probe 가 로그아웃 left ≥ 계정 링크 right + 8 을 잰다). 버튼은 링크와 같은 글꼴 · 테두리 0 */
.site-header__auth{display:inline-flex;align-items:center;gap:0 16px}
@media (min-width:1024px){
  .site-header__util{display:block;height:36px;border-bottom:1px solid var(--border-tertiary)}
  .site-header__bar{height:calc(100% - 36px)}
}

/* 18-3. 아직 만들지 않은 페이지의 내비 항목 — 링크가 아니라 표시다.
   링크로 두면 404 로 떨어지고 check-html 「깨진 내부 링크」에도 걸린다.
   글자색은 --fg-tertiary(#8c939a · 흰 위 3.11)가 아니라 --fg-secondary 를 쓴다 — 3.11 은 본문 하한 미달이다. */
.site-nav__link--pending{color:var(--fg-secondary);cursor:default}
.site-nav__pending{
  margin-left:6px;padding:0 6px;border-radius:6px;background:var(--bg-neutral);
  font:400 11px/18px var(--cs-font);color:var(--fg-secondary);white-space:nowrap;
}
.mobile-menu__link--pending{color:var(--fg-secondary);cursor:default}
.mobile-menu__link--pending small{color:var(--fg-secondary);font-weight:400}

/* 18-4. 모바일 하단 탭바 (§6-4 · 375×60 · PC 에는 없다) */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1072;
  display:flex;height:var(--cs-tabbar-h);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--bg-primary);border-top:1px solid var(--border-secondary);
}
.tabbar__item{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--cs-hit);color:var(--fg-secondary);text-decoration:none;
  font:400 11px/1.2 var(--cs-font);
}
.tabbar__item[aria-current="page"]{color:var(--fg-brand)}
.tabbar__ic{width:22px;height:22px;flex:none}
@media (min-width:768px){ .tabbar{display:none} }
/* 🔴 도크(.rg-dock)와 탭바는 둘 다 화면 아래 고정이라 겹친다. 도크를 탭바 위로 올리는 규칙은
   home.css §7 에 둔다 — home.css 가 stage.css 뒤에 실리므로 여기 적으면 같은 특정도에서 진다(실측). */

/* 18-5. 푸터 통신판매중개자 면책 표시 (§6-2) — 사업자 표시 블록 안에서 한 줄을 통째로 쓴다 */
.site-footer__broker{
  flex:1 1 100%;margin-top:8px;
  font-size:13px;line-height:20px;color:var(--fg-secondary);
}

/* ── 🔴 2026-09-13 임무 ④ 마감 라운드 — 거친 포인터(휴대폰) 터치 타깃 44 ──────────────
   /apply · /signup 의 <details> 는 여닫이 손잡이(summary)에 크기 규칙이 없어 브라우저 기본 26px 이었다
   (qa-390-probe (c) 실측: 자세히 보기 268×26). 홈은 calc.css 가 따로 맞춘다.
   데스크톱은 그대로 두고 손가락으로 누르는 화면에서만 키운다(calc.css 164행과 같은 방식). */
@media (hover:none){
  .consent__details > summary{ display:flex; align-items:center; min-height:var(--cs-hit); }
}

/* 18-6. 🔴 2026-09-22 첫 화면 개편 — 생활 서비스 9개를 가전렌탈 뒤에 펼친 헤더 한 줄 맞춤 ─────────────
   내비가 3칸 → 11칸(인터넷·TV · 가전렌탈 ▾ · 이사 · 청소 · 부동산 · 인테리어 · 상조 · 보험 · 매장패키지 · 정책자금 · 광고·홍보)이 됐다.
   🔴 이름표는 줄이지 않는다(지시 원문 그대로). 폭은 글자 크기 · 안쪽 여백 · 간격 · 디스크립터로만 맞춘다.
   <876 은 드로어다(위 「nav ≥876」 · stage.js matchMedia · docs/HEADER_FIT.json 과 같은 값). 합격선은 header-fit-probe 가 폭 전수에서 잰다:
     마지막 메뉴 오른쪽 끝 ≤ 단추 묶음 왼쪽 − 8 · 내비가 자기 칸 안 · 모든 링크 한 줄 · 44×44 이상.
   구간  1024~1199 13px · 여백 12/6 · 간격 4 · 디스크립터 숨김
         1200~1439 14px · 여백 12/6 · 간격 4 · 디스크립터 숨김(종전 ≥1200 노출을 ≥1440 으로 옮겼다)
         ≥1440     14px · 여백 12/8 · 간격 12 · 디스크립터 보임(헤더 바 1280 고정)
   🔴 2026-09-22 기획 결정 ② 「인터넷 TV / 정수기 / 가전렌탈 … 정수기를 아예 분리해서 상단탭에 반영」 — 인터넷·TV 와 가전렌탈 사이에 「정수기」가 들어와 12칸이 됐다.
      실측(header-fit-probe · 홈): 종전 값 그대로면 1024 여유 −13.7 · 1200 −12.9 · 1440 +4.2(합격선 = 단추 묶음 왼쪽 − 8 까지). 항목은 숨기지 않고 간격 · 여백만 줄인다:
   구간  876~1199  13px · 여백 12/5 · 간격 2 · 디스크립터 숨김 (🔴 2026-09-26 바닥을 1024 → 876 으로 내렸다 · 876 여유 +30.1)
         1200~1439 14px · 여백 12/5 · 간격 2 · 디스크립터 숨김
         ≥1440     14px · 여백 12/8 · 간격 8 · 디스크립터 보임
      두 글자 이름(이사 · 청소 · 상조 · 보험)은 최소 폭 44 가 폭을 정하므로 여백을 줄여도 그대로다 — 줄어드는 것은 긴 이름의 좌우 여백과 칸 사이 간격뿐이다. */
.site-nav__link,
.site-nav__trigger{min-width:var(--cs-hit);justify-content:center;text-align:center}
/* 🔴 2026-09-26 — 촘촘 서식의 바닥을 1024 → 876 으로 내렸다. 내비가 보이는 폭과 촘촘 서식이 적용되는 폭이
   같아야 한다(어긋나면 876~1023 에서 기본 14px · 간격 12 로 그려져 −128.9px 넘침). 위 「nav ≥876」 블록과 같은 값이다 */
@media (min-width:876px){
  :root{ --cs-nav-gap:2px }
  .site-nav__link,
  .site-nav__trigger{padding:12px 5px;font-size:13px}
  .site-header__descriptor{display:none}
}
@media (min-width:1200px){
  :root{ --cs-nav-gap:2px }
  .site-nav__link,
  .site-nav__trigger{font-size:var(--cs-text-sm)}
  .site-header__descriptor{display:none}
}
@media (min-width:1440px){
  :root{ --cs-nav-gap:8px }
  .site-nav__link,
  .site-nav__trigger{padding:12px 8px}
  .site-header__descriptor{display:inline-block}
}