*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    /* 제목 글꼴 — tokens.css 와 같은 값(SUIT). 이름 --serif 는 명조 시절의 흔적이다. */
    :root { --serif: 'SUIT Variable', SUIT, sans-serif; }

    /* ═══════════════════════════════════════════════════════════════
       홈 팔레트 — 딥 네이비 on 웜 페이퍼 (2026-07-29 오너 확정, 목업 outputs/home-color-mockup.html B안)
       오너 지시: "폰트에 색을 너무 많이 추가한 것 같다 / 오렌지는 탈피 / 깔끔하고 단정하게".

       ⚠️ 팔레트 본체는 **tokens.css 에 있다**(2026-07-29 전 사이트 전환 완료 — 챌린지·특강·
          승준노트·후기·마이페이지까지 같은 네이비다). 여기 남은 것은 **홈에만 필요한 값**뿐.

       ⚠️ 색 사용 규칙 — 액센트(#1B3A6B)는 **세 자리만**: 섹션 라벨 · 숫자 3개 중 '가능성' 하나 · 링크.
          제목은 잉크(--ink), 본문은 웜그레이. 개편 전엔 오렌지 하나가 홈 스토리 영역에만
          9자리(라벨 대시·라벨·숫자·"가능성"·문 링크 3개·칩·"옵니다"·버튼)에 쓰여
          강조가 너무 많아 아무것도 강조되지 않았다. 새 색을 자리마다 늘리지 말 것.
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --border: rgba(40,34,26,.14);
      --border-soft: rgba(40,34,26,.10);

      /* 다크 무대는 마무리 CTA 한 곳뿐 — 구 갈색(#26221C) 대신 잉크 네이비로 통일 */
      --bg-dark: #1C2A3A;
      --text-on-dark: #F1EFE9;

      /* 제목 잉크. 본문(--text)·보조(--text-muted)는 웜그레이를 유지해 종이 톤과 붙인다. */
      --ink: #1C2A3A;
      --text: #2E2A24;
      --text-muted: #645D51;
      --text-dim: #736C5E;
    }

    /* ── View Transitions API (reduced-motion 아닐 때만) ──
       문서 간(index→상세) 이동 시 root 크로스페이드 + challenge-name morph.
       문서 내(Finder 문항 전환)는 하단 스크립트가 startViewTransition으로 구동. */
    @media (prefers-reduced-motion: no-preference) {
      @view-transition { navigation: auto; }
      ::view-transition-old(root) { animation: vt-fade-out .22s both; }
      ::view-transition-new(root) { animation: vt-fade-in .34s both; }
      @keyframes vt-fade-out { to { opacity: 0; } }
      @keyframes vt-fade-in { from { opacity: 0; } }
      /* Finder 문항 전환: 옛 문항은 위로 슬라이드아웃, 새 문항은 아래에서 슬라이드인 */
      ::view-transition-old(finder) { animation: vt-fin-out .28s both; }
      ::view-transition-new(finder) { animation: vt-fin-in .44s .05s both; }
      @keyframes vt-fin-out { to { opacity: 0; transform: translateY(-16px); } }
      @keyframes vt-fin-in { from { opacity: 0; transform: translateY(20px); } }
    }

    body {
      font-family: 'SUIT Variable', SUIT, 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      /* hidden은 body를 스크롤 컨테이너로 만들어 자식 position:sticky(창문 인트로
         .zoom-exit-pin)를 뷰포트가 아닌 body에 묶어 고정이 풀린다 → clip으로 교체
         (스크롤 컨테이너를 만들지 않음, tokens.css html 규칙과 동일 패턴).
         hidden은 clip 미지원 구형 브라우저(iOS<16) 폴백. (2026-07-10) */
      overflow-x: hidden;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg3); }
    ::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 99px; }

    /* ── UTILS ── */
    .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

    .badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 700;
      background: linear-gradient(135deg, rgba(36, 26, 18,.12), rgba(154, 91, 30,.1));
      color: var(--primary); border: 1px solid rgba(36, 26, 18,.25);
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 28px; border-radius: 99px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      text-decoration: none; transition: all .25s ease; border: none; outline: none;
      -webkit-tap-highlight-color: transparent;
    }
    /* ── Action 버튼 (틸) — 신청/시작/참여 전환 CTA 전용 ── */
    .btn-action {
      background: var(--action); color: var(--action-ink);
      border-radius: 14px; padding: 16px 28px; font-weight: 700;
      box-shadow: var(--shadow-action);
    }
    .btn-action:hover { background: var(--action-hover); transform: translateY(-2px); box-shadow: var(--shadow-action-lg); }
    .btn-action:active { transform: translateY(0) scale(.99); box-shadow: var(--shadow-action); }
    .btn-action:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }

    .mobile-cta-bar {
      display: block; position: fixed; z-index: 95;
      left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      max-width: 460px; margin: 0 auto;
    }
    .mobile-cta-btn {
      display: flex; width: 100%; min-height: 56px;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 2px; line-height: 1.25; white-space: nowrap;
      border-radius: 16px; padding: 10px 20px;
      /* 네이비 틴트 프로스티드 글래스(2026-07-29 오렌지 탈피) — 사진 위에 떠 있어도 가볍게 */
      background: rgba(27,58,107,.88);
      backdrop-filter: blur(16px) saturate(1.35);
      -webkit-backdrop-filter: blur(16px) saturate(1.35);
      border: 1px solid rgba(255,255,255,.30);
      box-shadow: 0 10px 34px rgba(27,58,107,.28), inset 0 1px 0 rgba(255,255,255,.28);
      color: #fff;
    }
    .mobile-cta-btn .mcta-main { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
    .mobile-cta-btn .mcta-sub  { font-size: 12px; font-weight: 600; opacity: .92; }
    .mcta-badge { font-weight: 800; }
    .mcta-badge[hidden] { display: none; }
    .mcta-badge::after { content: " · "; }
    /* ⚠️⚠️ 히어로를 보는 동안엔 바를 통째로 숨긴다(2026-07-30 오너 지시).
       구 버전은 인트로 구간에 '몬크 더 알아보기'로 라벨을 바꿔 달고 광 스윕까지 넣었는데,
       그 바가 자리를 차지해 **스크롤 안내가 위로 밀려 창문을 침범했다**(오너 신고).
       그 상태의 목적(인트로에서 유일한 버튼을 눌러 아무것도 안 보고 가격 페이지로 떨어지는 것을
       막기)은 이제 스크롤 신호(#heroCue)가 대신한다 — 버튼을 안 보여주면 잘못 누를 일이 없다.
       구 `.mcta-browse`/`.mcta-apply`/`.mcta-arrow`/광 스윕·화살표 까딱 애니메이션은 전부 삭제.
       ⚠️ visibility 까지 끄는 이유: opacity 만 0으로 두면 **투명한 버튼이 그대로 눌린다**
          (그리고 키보드 포커스도 그 자리에 멈춘다). */
    .mobile-cta-bar {
      transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
    }
    .mobile-cta-bar.is-intro {
      opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px);
      transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    }
    @media (prefers-reduced-motion: reduce) { .mobile-cta-bar { transition: none; } }
    /* 플로팅 바가 콘텐츠를 가리지 않도록 여백 확보 */
    body { padding-bottom: 96px; }
    /* 에이브로우 라벨 — 목업 시그니처: 코랄 대시(—) 프리픽스(inline-flex라 좌·중앙 정렬 모두 대응) */
    .section-label {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--accent-ink);
      margin-bottom: 10px;
    }
    .section-label::before {
      content: ''; width: 26px; height: 1.5px; background: var(--action); flex: none;
    }
    /* ⚠️ 구 .section-title/.section-desc 규칙 삭제(2026-07-30) — 홈 마크업에 쓰는 자리가
       하나도 없었다(제목은 섹션마다 자기 클래스를 쓴다). 다른 페이지의 같은 이름은 각자
       인라인 <style> 와 tokens.css 의 h2.section-title 이 담당하니 여기 되살릴 필요 없다.
       ⚠️ 구 .btn-primary/.btn-ghost 규칙도 같은 이유로 삭제 — 홈 버튼은 .btn-action(하단 CTA)
       과 .closing-btn(마무리) 둘뿐이다. 상세 4종의 같은 이름은 그 페이지 인라인 규칙이다. */
    /* ⚠️ 구 .gradient-text 규칙 삭제(2026-07-30) — 홈 마크업에 쓰는 자리가 하나도 없었다.
       상세 4종에서도 같은 날 단색으로 바꿨다: background-clip:text + text-fill-color:transparent 는
       변수 하나가 미정의가 되는 순간 글자가 통째로 사라진다(실제로 터진 자리). 되살리지 말 것. */

    /* ⚠️ NAV 스타일은 nav.css 로 옮겼다(2026-07-30) — 메뉴가 전 페이지 공용이 되면서
       index 전용 파일에 둘 이유가 없어졌다. 여기에 다시 적으면 특이도 싸움이 난다. */
    



    @media (max-width: 768px) {
      /* 스토리 섹션 — 모바일 상하 여백 축소 */
      .msn { padding: 64px 0 56px; }
      /* ⚠️ 좌우 20px는 지킬 것 — 문이 테두리 있는 카드가 된 뒤로 0이면 카드가 화면에 붙는다. */
      .doors { padding: var(--section-y-mobile) 20px 64px; }
      .closing { padding: var(--section-y-mobile) 0; }

      /* Footer */
      .footer-inner { flex-direction: column; text-align: center; }
      .footer-links { justify-content: center; }
    }

    @media (max-width: 480px) {
      .container { padding: 0 16px; }
    }

    /* ═══════════════════════════════════════════════════
       HERO — 창문 정적 배경 + 로고 흩날림 (2026-07-29 전면 교체)
       구 창 통과 줌(.hero-window-intro / .zoom-exit-pin / .hero-window-sky-* /
       .zoom-content-fade / .zoom-bezel-fade / .zoom-tone-bridge / .hero-tagline / .ht-*)은
       통째로 삭제했다. 새 배경 이미지가 창+하늘 합본이라 '창을 통과'하는 연출이
       구조적으로 불가능하고(확대하면 그림 전체가 커질 뿐), 오너가 정적 배경을 지정했다.

       ⚠️ 스크롤 연동이 아니다 — 러웨이·핀·sticky가 없으므로 body의 overflow-x: clip을
          hidden 으로 되돌려도 되지만, tokens.css html 규칙과 짝이라 그대로 둔다.
       ⚠️ 되살리려면 하늘/창틀 2겹 이미지부터 필요하다(합본으로는 안 된다).
    ═══════════════════════════════════════════════════ */

    .hero-intro {
      position: relative;
      /* 화면 한 장. svh 라야 모바일 주소창 토글에 높이가 튀지 않는다(dvh 는 스크롤마다 재계산). */
      height: 100svh; min-height: 520px;
      overflow: clip;
      background: var(--bg);   /* 이미지 로딩 전 플래시 방지 */
    }
    .hero-shot {
      position: absolute; inset: 0; display: block;
      width: 100%; height: 100%; object-fit: cover; object-position: center;
    }
    /* ⚠️ top 은 폴백값이다 — 실제 자리는 JS(fitWindow)가 배경 이미지의 개구부를 실측해
       px 로 덮어쓴다. 배경이 cover 로 잘리는 양에 따라 창의 세로 위치가 달라져서
       퍼센트로는 못 맞춘다(2026-07-30 오너 "위치도 중앙이 아니다"). */
    .hero-mid {
      position: absolute; left: 0; right: 0; top: 45.7%;
      transform: translateY(-50%);
      text-align: center; padding: 0 20px; pointer-events: none;
    }
    /* 한글 줄을 absolute 로 뺐으므로 이 블록의 높이 = 조립 무대 높이 → 중심이 곧 로고 중심 */
    @media (min-aspect-ratio: 1/1) { .hero-mid { top: 46.4%; } }
    /* 조립 무대 — 문장과 로고가 같은 자리에 겹쳐 있고, 높이는 로고 기준으로 고정한다.
       ⚠️ 높이를 고정하지 않으면 조립되며 글자가 커질 때 아래 한글 줄이 밀려 내려간다. */
    .hi-stack {
      position: relative; display: flex; align-items: center; justify-content: center;
      height: clamp(46px, 13vw, 60px);   /* 로고 기준 — 문장은 absolute 라 이 높이에 영향 없다 */
    }
    /* 중앙 기준 배치(left:50% + translateX(-50%) + width:max-content) — 두 줄 중 넓은 줄을
       기준으로 가운데에 선다. left/right:0 방식은 내용이 컨테이너보다 넓어지는 순간
       왼쪽 기준이 되어 오른쪽으로만 삐져나간다(구 한 줄 시절 실측으로 밟은 자리). */
    .hi-phrase {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: max-content; white-space: nowrap;
      /* ⚠️ 문장은 **첫 화면에 다 보여야 한다**(2026-07-30 오너). 두 줄로 접어 크기를 살리되,
         그래도 넘치는 화면에서는 JS(fitPhrase)가 폭에 맞춰 줄인다 — 기기 폭이 제각각이라
         clamp 만으로는 '화면 안'을 보장할 수 없다. 구 clamp(84px,22vw,160px)는 375px 에서
         화면의 241%였다(오너 신고 화면). */
      /* ⚠️ 로고가 창 폭에 맞춰 커지면(JS fitWindow) 문장도 같이 키워야 '축소하며 들어오는' 감이
         산다 — 배율이 1에 가까우면 크기가 그대로인 것처럼 보인다(실측). 지금은 0.55~0.65. */
      font-size: clamp(48px, 16vw, 128px); font-weight: 300; letter-spacing: 0;
      line-height: 1.14; color: var(--text);
    }
    .hi-line { display: block; }
    .hi-w { display: inline-block; white-space: nowrap; }
    /* ⚠️ 글자 하나하나가 FLIP 대상 — will-change 를 빼면 조립 구간에서 매 프레임 리페인트가 난다. */
    .hi-l { display: inline-block; will-change: transform, opacity; }
    .hi-l.is-mark { font-weight: 800; color: var(--accent); }

    /* 도착 좌표계 + 조립 완료 후 교체될 네이티브 로고.
       ⚠️ 자간을 letter-spacing 이 아니라 margin 으로 준다 — letter-spacing 은 글자 박스를
          부풀려서 getBoundingClientRect 중심이 실제 글자 중심과 어긋난다(구 인트로에서 밟은 함정).
       ⚠️ visibility:hidden 이라 자리는 차지한다 — JS 가 이 좌표를 도착점으로 읽는다. 지우지 말 것. */
    .hi-target {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: max-content; visibility: hidden;
      /* ⚠️ 폴백 크기다 — 실제 크기는 JS(fitWindow)가 개구부 폭의 90%로 역산한다.
         개구부 폭이 세로형 38.1% · 가로형 15.7%로 달라 하나의 vw 값으로는 둘 다 못 맞추므로,
         이 값은 **어느 화면에서도 창을 넘지 않는 안전한 하한**으로 잡았다(넘치면 창틀에 올라탄다). */
      font-size: clamp(28px, 10vw, 52px); font-weight: 800; letter-spacing: 0;
      line-height: 1.15; color: var(--accent);
    }
    .hi-target span { display: inline-block; margin: 0 .035em; }

    /* ⚠️ 한글 줄은 흐름에서 빼서 절대 배치한다 — 흐름에 두면 이 줄 높이만큼 블록 중심이
       내려가 로고가 창 정중앙에서 벗어난다(실측 49.1% vs 목표 52.6%). */
    .hi-kor {
      position: absolute; left: 0; right: 0; top: 100%;
      margin-top: 18px; white-space: nowrap; opacity: 0;
      font-size: clamp(13px, 3.6vw, 15px); font-weight: 600; letter-spacing: 0;
      color: var(--text-muted); will-change: opacity, transform;
    }
    /* ⚠️ 자간은 CSS 고정값이 아니라 JS(fitKor)가 로고 폭에 맞춰 계산해 넣는다 —
       로고 폭이 창 크기에 따라 달라지므로 고정 .05em 으로는 양끝이 절대 안 맞는다.
       inline-block 이라야 마지막 글자 뒤 자간을 margin-right 로 도로 뺄 수 있다
       (안 빼면 그 여백까지 폭에 잡혀 가운데정렬이 왼쪽으로 밀린다). */
    .hi-kl { display: inline-block; }
    /* 한 줄로 펴면 자간이 음수가 되는 좁은 화면에서만 두 줄이 된다 */
    .hi-kbr { display: none; }
    .hi-kor.two .hi-kbr { display: inline; }
    /* ⚠️ 두 줄 모드의 행간은 **덩어리로 읽히도록 좁게**(2026-07-30 오너 "서브타이틀 간의
       간격도 좀 줄여야지"). 구 1.7 은 줄 사이가 0.92em 이라 로고와의 간격(0.52em)보다도
       넓어서 두 줄이 따로 놀았다 — 위계상 **줄 사이 < 로고와의 간격**이어야 한다. */
    /* ⚠️ 행간은 **부모(.hi-kor)에** 걸어야 한다 — .hi-kl 은 inline-block 이라 줄 간격이
       자식 높이가 아니라 부모의 strut(기본 행간 1.7)으로 정해진다. 자식에만 주면
       값이 무시된 것처럼 보인다(실제로 한 번 밟은 자리 — 13px 그대로였다). */
    .hi-kor.two { line-height: 1.28; }

    /* 스크롤 안내 — 애니메이션이 끝난 뒤에만 뜨고, 스크롤이 시작되면 사라진다.
       2026-07-30 오너가 목업 4안 중 D안 선택(`outputs/hero-scroll-cue-mockup.html` — 기각안 A·B·C 보존).
       ⚠️ 구 안(11.5px 'SCROLL' + 1px×16px 세로선, --text-dim)은 **활자가 원칙 1번(12px) 미달,
          대비 4.15:1 로 원칙 4번(4.5:1) 미달**이었고 결정적으로 등장 후 멈춰 있었다(전부 실측).
          '내려라'는 신호는 크기가 아니라 **움직임**이 만든다 — 활자·대비만 올리고 애니메이션을
          빼면 같은 문제로 돌아간다.
       ⚠️⚠️ bottom 34px 은 **'아래에 하단 CTA 바가 없다'는 전제**로 잡은 값이다(2026-07-30).
          구 96px 은 인트로용 '몬크 더 알아보기' 바(56px + 여백 14px)를 피한 자리였는데,
          그만큼 안내가 위로 밀려 **창문을 침범했다**(오너 신고). 그 바를 히어로 구간에서
          숨기면서 이 값을 내렸다 — **바를 되살리면 이 값도 같이 올릴 것.** */
    .hero-cue {
      position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom, 0px));
      text-align: center; color: var(--ink); opacity: 0; will-change: opacity;
      transition: opacity .35s ease;
    }
    /* 정체 한 줄 — 히어로에서 유일하게 '승무원'을 말하는 글자(2026-08-02).
       cue 안에 있어 등장(1.8s 페이드)·스크롤 시 숨김(is-gone)을 그대로 따른다. */
    .hc-tag { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
    /* 12.5px — 원칙 1번의 하한(12px) 바로 위. 자간은 구 .14em 에서 줄였다(넓은 자간이
       작은 글자를 더 흐리게 만든다). 잉크 네이비라 배경(#ECE4DB) 대비 10.4:1. */
    .hc-label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; opacity: .78; }
    /* 레일 — 흐릿한 트랙 위로 빛 한 줄기가 아래로 지나간다. 트랙을 깔아야 '길'로 읽힌다. */
    .hc-rail {
      display: block; width: 2px; height: 46px; margin: 10px auto 0; border-radius: 2px;
      background: rgba(28, 42, 58, .16); position: relative; overflow: hidden;
    }
    .hc-rail::after {
      content: ''; position: absolute; left: 0; right: 0; height: 18px; border-radius: 2px;
      background: linear-gradient(to bottom, transparent, var(--ink));
      animation: hcFlow 1.9s cubic-bezier(.45, 0, .25, 1) infinite;
    }
    @keyframes hcFlow { 0% { top: -20px; } 70% { top: 46px; } 100% { top: 46px; } }
    /* 화살표는 빛이 레일 끝에 닿는 순간(70%) 밝아지며 따라 내려간다 — 둘의 주기가 같아야
       '흘러내려 도착했다'로 읽힌다. 주기를 따로 두면 두 개가 각자 움직이는 것으로 보인다. */
    .hc-arrow { display: block; margin: 4px auto 0; animation: hcNudge 1.9s cubic-bezier(.45, 0, .25, 1) infinite; }
    @keyframes hcNudge {
      0%, 55% { transform: translateY(0); opacity: .35; }
      72% { transform: translateY(3px); opacity: 1; }
      100% { transform: translateY(0); opacity: .35; }
    }
    /* ⚠️ 스크롤이 시작되면 숨긴다(오너 지시) — !important 인 이유는 타임라인 JS 가
       인라인 style.opacity 를 쓰기 때문이다. 저자 !important 가 인라인을 이긴다. */
    .hero-cue.is-gone { opacity: 0 !important; }
    /* 움직임을 끈 사람에겐 흐름 대신 '도착한 상태'로 고정 — 크기·대비 개선은 그대로 남는다. */
    @media (prefers-reduced-motion: reduce) {
      .hc-rail::after { animation: none; top: 28px; }
      .hc-arrow { animation: none; opacity: 1; }
    }

    /* ═══════════════════════════════════════════════════
       왜 몬크인가(.msn #home) + 세 개의 문(.doors) + 마무리(.closing)
       — 2026-07-29 스토리형 개편(오너 스케치 + outputs/homepage-story-mockup.html v4).
       구 #pillars·히어로 챌린지 목록(.hero-scene · .hs- · .ch- 계열)은 삭제 —
       카드 4장은 challenges.html로 이사(카드 CSS도 그 파일 인라인).

       ⚠️⚠️ 주석 안에서 **클래스 이름을 슬래시로 나열하지 말 것** — 별표 바로 뒤에
          슬래시가 오면 그 자리에서 주석이 닫힌다. 실제로 2026-07-29 스토리 개편 때
          hero-scene, hs-, ch- 세 계열을 슬래시로 이어 적으면서 별표+슬래시가 생겼고,
          뒤따르던 구분선 종료 기호가 문법 오류가 되면서 파서가 **바로 다음 규칙인
          `.msn { ... }` 을 통째로 삼켰다.** 결과: 미션 섹션에 배경이 안 깔린 채
          제목·브릿지만 다크용 밝은 글씨로 남아 **베이지 배경에 흰 글씨**가 됐다
          (오너 신고 "배경에 흰색 글씨라 안 보인다"). 규칙 하나가 조용히 사라지는
          종류의 오타라 눈으로는 안 잡힌다.
    ═══════════════════════════════════════════════════ */

    /* ── ① 왜 몬크인가 — 막막함 (2026-07-30 서사 개편 C안) ──
       ⚠️ 2026-07-29 다크 무대에서 밝은 종이로 전환(오너 확정). 되돌리지 말 것 —
          미션과 마무리가 둘 다 다크라 홈의 절반이 어두웠다. 다크는 마무리 CTA 한 곳만 남긴다.
       구 숫자 3타일(.msn-stats)·브릿지(.msn-bridge)는 ④ .nums 로 이사했다. */
    .msn {
      background: var(--bg2); color: var(--text);
      padding: 84px 0 72px;
      /* 하단 CTA 바 '몬크 더 알아보기' 착지점 — 고정 nav(모바일 57px)에 제목이 가리지 않게 */
      scroll-margin-top: 60px;
    }
    /* ⚠️ 데스크톱 바 높이(현재 66px) + 여유 12px. nav 높이를 바꾸면 여기도 같이 볼 것 —
       모자라면 '#home'으로 내려왔을 때 라벨이 고정 바 밑에 깔린다. */
    @media (min-width: 769px) { .msn { scroll-margin-top: 78px; } }
    .msn-inner { max-width: 560px; margin: 0 auto; padding: 0 var(--space-3); }
    .msn-title {
      font-family: var(--serif); font-weight: 800;
      font-size: clamp(24px, 6.4vw, 34px); line-height: 1.46; letter-spacing: -0.01em;
      margin-top: 14px; color: var(--ink); word-break: keep-all;
    }
    .msn-lead { margin-top: 18px; font-size: var(--fs-body-sm, 15px); line-height: 1.85; color: var(--text-muted); word-break: keep-all; }
    /* 강조는 색이 아니라 잉크 굵기 — 액센트 세 자리 규칙(라벨·숫자 하나·링크) 밖이다. */
    .msn-lead em { font-style: normal; font-weight: 800; color: var(--ink); }

    /* 질문 카드 — "그래서 저는 지금 뭘 준비해야 하나요?"
       ⚠️ 지원자의 말이라 따옴표째 큰 활자로 둔다(설명문으로 풀어 쓰면 남의 말이 된다). */
    .worry {
      margin-top: 26px; padding: 22px 18px;
      background: linear-gradient(140deg, var(--surface) 0%, #FBF7F1 100%);
      border: 1px solid var(--border-soft); border-radius: var(--radius);
      box-shadow: 0 8px 26px rgba(28,42,58,.06);
      position: relative; overflow: hidden;
    }
    /* 종이 위 옅은 원 하나 — 카드가 평평한 상자로 보이지 않게 하는 최소 장치 */
    .worry::after {
      content: ""; position: absolute; right: -100px; top: -130px;
      width: 220px; height: 220px; border-radius: 50%;
      background: var(--accent-tint); opacity: .55;
    }
    .wr-q {
      position: relative; z-index: 1;
      font-family: var(--serif); font-weight: 800;
      font-size: clamp(19px, 5vw, 23px); line-height: 1.5; color: var(--ink); word-break: keep-all;
    }
    .wr-sub { position: relative; z-index: 1; margin-top: 10px; font-size: var(--fs-caption); line-height: 1.7; color: var(--text-dim); word-break: keep-all; }

    /* ── ② 열 가지 → 세 가지 (2026-07-30 신설) ──
       칩 10개가 하나씩 체크된 뒤 세 그룹으로 날아가 붙는다(JS가 FLIP으로 이동).
       ⚠️ 칩 최소 높이 44px — 누르는 요소는 아니지만 글자 13px + 체크박스라 이보다 낮으면
          375px에서 두 줄 칩과 한 줄 칩의 높이가 들쭉날쭉해진다(실측).
       ⚠️ .sort-pool 과 .sgrp-list 는 **같은 칩 크기·같은 gap** 이어야 한다 — 다르면 FLIP이
          '이동'이 아니라 '크기 변화'로 보여 정리되는 느낌이 사라진다. */
    .sortsec { background: var(--bg); padding: 64px 0 12px; }
    .sort-inner { max-width: 560px; margin: 0 auto; padding: 0 var(--space-3); }
    .sort-title {
      font-family: var(--serif); font-weight: 800;
      font-size: clamp(23px, 6vw, 32px); line-height: 1.5; color: var(--ink); word-break: keep-all;
    }
    .sort-title em { font-style: normal; box-shadow: inset 0 -11px 0 var(--accent-tint); }
    /* ⚠️ min-height 는 index.html 의 reserve() 가 넣는다 — 정렬 전(칩 한 덩어리)과 정렬 후
       (세 그룹) 중 큰 높이를 미리 잡아, 바뀌는 순간 아래 내용이 밀리지 않게 한다.
       여기 CSS 에 고정값으로 박지 말 것(JS 가 죽으면 빈 칸이 영영 남는다). */
    .sortwrap { margin-top: 26px; }
    .sort-pool, .sgrp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .sc {
      min-height: 44px; padding: 11px 12px;
      display: flex; align-items: center; gap: 9px;
      background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px;
      font-size: 13px; font-weight: 700; color: var(--text-muted);
      transition: background .22s ease, color .22s ease, border-color .22s ease;
    }
    /* 칩 안쪽 글 — 이름 + 괄호 설명(2026-07-30 오너가 준 부제). 설명이 없는 칩도 있어
       한 줄·두 줄이 섞이는데, 그리드 칸이 같은 줄끼리 높이를 맞춰 주므로 짝은 어긋나지 않는다.
       ⚠️ line-height 를 여기서 1.35 로 낮추는 게 핵심 — body 의 1.7 을 그대로 물려받으면
          두 줄 칩이 64px 까지 부풀어 목록이 화면 하나를 통째로 먹는다(실측).
       ⚠️ 부제 12px 하한(9대 원칙 1). 더 줄이지 말 것 — 위계는 크기가 아니라 굵기·색이 만든다. */
    .sc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
    .sc-t em {
      font-style: normal; font-size: 12px; font-weight: 600;
      color: var(--text-dim); letter-spacing: 0; word-break: keep-all;
    }
    .sc.is-on .sc-t em { color: var(--accent); opacity: .78; }
    .sc i {
      flex: 0 0 20px; width: 20px; height: 20px;
      display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900;
      border: 1.5px solid rgba(28,42,58,.28); border-radius: 6px; background: var(--surface);
      color: transparent; transition: background .22s ease, color .22s ease, border-color .22s ease;
    }
    .sc.is-on { background: var(--accent-tint); border-color: rgba(27,58,107,.32); color: var(--accent); }
    .sc.is-on i { background: var(--accent); border-color: var(--accent); color: #fff; }
    /* ⚠️ 필수 — display:grid 가 UA [hidden] 을 이긴다(.door[hidden] 과 같은 함정).
       없으면 정렬이 끝난 뒤에도 빈 칩 상자가 그대로 남는다. */
    .sort-pool[hidden], .sort-groups[hidden] { display: none; }
    .sgrp { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; }
    .sgrp + .sgrp { margin-top: 12px; }
    /* 그룹이 나타날 때만 살짝 떠오른다 — 칩 이동(FLIP)과 리듬을 맞추려고 지연을 준다.
       ⚠️ 0.38초는 칩 이동(0.45초)과 한 쌍 — 더 길면 카드가 칩보다 늦게 도착해 따로 논다. */
    .sgrp { opacity: 0; transform: translateY(10px); transition: opacity .38s ease, transform .38s ease; }
    .is-sorted .sgrp { opacity: 1; transform: none; }
    .sgrp-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; font-size: 15px; font-weight: 800; color: var(--accent); }
    .sgrp-h span { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; }
    @media (prefers-reduced-motion: reduce) {
      .sgrp { opacity: 1; transform: none; transition: none; }
      .sc, .sc i { transition: none; }
    }

    /* ── 세 개의 문 — 테두리 있는 사진 카드 ──
       글 옆에 사진이 좌우로 번갈아 붙는 리듬(door-2만 rev)은 유지.
       ⚠️ 2026-07-29 오너 요청으로 **테두리 있는 흰 카드**가 됐다(목업 B안). 이전의
          '모바일에서 사진이 화면 끝까지 나가 잘리는 블리드 + 카드마다 다른 높이'는
          카드 박스와 양립할 수 없어 함께 폐지 — 블리드로 되돌리지 말 것.
          세 개가 같은 급의 '문'으로 묶여 보이는 것이 이 요청의 목적이다.
       ⚠️ 카드 자리는 사진이다 — 텍스트 목록·미니 UI 덩어리로 되돌리지 말 것(오너 2회 기각). */
    .doors { background: var(--bg); padding: 40px 20px 76px; overflow: clip; }
    /* ── 타임라인 마커 (2026-07-30 C안) — 문 위에 '언제'를 얹어 나열을 순서로 바꾼다.
       ⚠️ 라벨·연결선은 카드 **바깥 가운데**에 둔다. 왼쪽 레일(세로줄+점) 방식은 375px에서
          카드 폭을 26px 잡아먹어 사진 카드가 눈에 띄게 좁아진다(실측). */
    .tl-step { max-width: 560px; margin: 0 auto; position: relative; }
    .tl-step + .tl-step { margin-top: 34px; }
    /* 앞 카드와 이 라벨을 잇는 짧은 세로선 — 첫 칸엔 없다(위에 이을 것이 없다). */
    .tl-step + .tl-step::before {
      content: ""; position: absolute; left: 50%; top: -26px;
      width: 2px; height: 18px; background: var(--accent); opacity: .35;
    }
    .tl-when {
      text-align: center; margin-bottom: 12px;
      /* 14px — 2026-07-30 오너 "글씨가 너무 작다"로 12에서 올림(데스크톱 16). 문 제목(20/28)보다는 작게 유지. */
      font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--accent);
    }
    /* ⚠️ 필수 — 특강이 없을 때 문 전체(라벨 포함)를 숨긴다. display:flex 를 쓰는 .door 와 달리
       .tl-step 은 블록이지만, 여기서도 명시해 두지 않으면 마크업 구조를 바꿀 때 같은 함정을 밟는다. */
    .tl-step[hidden] { display: none; }
    .door {
      display: flex; gap: 14px; align-items: stretch;
      max-width: 560px; margin: 0 auto; padding: 16px;
      background: var(--surface); border: 1px solid var(--border-soft);
      border-radius: var(--radius); box-shadow: 0 2px 10px rgba(40,34,26,.05);
    }
    /* ⚠️ rev(승준노트)는 사진이 왼쪽·글이 오른쪽이므로 **글도 오른쪽 정렬**이다
       (2026-07-29 오너 지적 "브리핑룸이 변칙인데 왜 텍스트는 왼쪽 정렬이냐" — 당시 이름).
       왼쪽 정렬로 두면 글 블록 오른쪽에 빈 띠가 남아 카드가 한쪽으로 쏠려 보인다.
       라벨 대시(::before)와 링크 화살표는 inline 요소라 자동으로 함께 따라간다. */
    .door.rev { flex-direction: row-reverse; }
    .door.rev .dr-txt { text-align: right; }
    /* ⚠️ 필수 — display:flex가 UA [hidden]을 이긴다. 없으면 특강이 없어도 특강 문이 보인다. */
    .door[hidden] { display: none; }
    .dr-txt { flex: 1; min-width: 0; }
    .dr-title {
      font-family: var(--serif); font-weight: 800;
      font-size: 20px; line-height: 1.38; letter-spacing: -0.01em;
      margin-top: 8px; color: var(--ink); word-break: keep-all;
    }
    .dr-ds { margin-top: 8px; font-size: var(--fs-body-sm, 15px); line-height: 1.6; color: var(--text-muted); word-break: keep-all; }
    .dr-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
    .dr-link:hover { text-decoration: underline; }
    .dr-card {
      flex: 0 0 44%; display: block; position: relative; overflow: hidden;
      min-height: 152px; border-radius: 12px;
      background: var(--bg3); border: 1px solid var(--border-soft);
    }
    /* ⚠️ 사진은 absolute — 카드가 글 높이에 맞춰 늘어나야 하므로(align-items:stretch)
       img 가 흐름에 있으면 자기 높이로 카드를 밀어버린다. */
    .dr-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
    /* ⚠️⚠️ 사진별 **가로 초점** — 모바일에서 카드가 실측 132×220~244 라 세로로 긴 상자다.
       cover 가 가로를 잘라내서 원본의 **34~45% 만** 남는다(briefing 36 · challenge 34 · lecture 45%).
       그래서 `center` 로 두면 가운데에 주인공이 없는 사진은 뜻이 통째로 사라진다 — 실측으로
       확인한 두 자리:
         · 승준노트: 인물이 원본 오른쪽에 있어 **얼굴이 반으로 잘렸고** 노트북·노트가 다 빠져
           "흰 옷 입은 사람 반쪽"만 남았다. 66% 로 옮기면 인물·노트에 더해 벽에 붙인
           항공 사진(구름·비행기 날개)까지 들어와 '승준생 책상'이 읽힌다.
         · 특강: 강사가 원본 오른쪽 끝(x≈65~80%)이라 잘려나가고 TV 화면만 남아
           '강의실'이 아니라 '모니터 사진'으로 읽혔다. 72% 면 가리키는 강사 + 화면 +
           수강생 뒷머리가 함께 들어온다.
       ⚠️ 챌린지는 정면 인물이 이미 가운데라 center 를 유지한다(옮기면 얼굴이 치우친다).
       ⚠️ 데스크톱에는 거의 영향이 없다 — 카드가 372×241(비 1.54)이라 briefing(1.50)·
          lecture(1.30) 은 가로가 꽉 차고 **세로가** 잘리므로 x 값이 쓰이지 않는다.
          가로가 잘리는 건 challenge(1.78) 뿐이고 그건 안 건드렸다.
       ⚠️ 사진을 교체하면 이 두 값을 다시 잡을 것(주인공이 가운데 있는 사진이면 지워도 된다). */
    .door-1 .dr-card img { object-position: 66% 30%; }
    .door-3 .dr-card img { object-position: 72% 30%; }
    /* ── 사진 위 라벨 = 스크림 + 대시 (2026-07-30 오너가 목업 4안 중 C안 선택 —
          `outputs/door-chip-mockup.html` 이 결정 기록, 기각안 A·B·D 도 그 파일에 보존).
       ⚠️⚠️ **상자(배경·테두리·border-radius)를 다시 씌우지 말 것.** 오너 신고
          "알약이 아니라 드럼통 같다"의 원인이 바로 그 상자였다: 사진 칸은 375px 에서
          **실측 132px** 뿐이라 한 줄에 한글 7자밖에 안 들어가는데, 12~13자짜리 문구가
          두 줄로 풀리면서 `border-radius:999px`(반원)가 **122×53px = 2.3:1 짜리 둥근 통**이
          됐다. 알약은 한 줄일 때만 알약이다. 상자를 없애면 두 줄이 돼도 그냥 두 줄이라
          이 문제가 **구조적으로** 사라진다(문구 길이를 관리할 필요도 없어진다).
       ⚠️ 스크림(::after)은 `pointer-events:none` 필수 — .dr-card 가 <a> 라 덮으면 클릭이 죽는다.
       ⚠️ 칩에 z-index 를 줘야 스크림 위로 올라온다(둘 다 .dr-card 의 자식).
       ⚠️ 폭은 width 가 아니라 `left+right` 로 잡는다 — 두 줄째가 카드 밖으로 나가지 않게.
       ⚠️ 대시·숫자 강조는 **--action-on-dark(밝은 하늘색)** 다. 네이비(--accent)는 어두운
          스크림 위에서 1.4:1 로 묻힌다(팔레트 규칙 '다크 면 위 강조' 참조).
       ⚠️ text-shadow 를 지우지 말 것 — 글자 윗줄은 스크림이 옅어지는 구간에 걸쳐서,
          하늘·흰 벽처럼 밝은 사진에서 이것 없이는 대비가 떨어진다.
       ⚠️⚠️ 스크림 세기(.94/.66)는 **대비 손잡이다 — 사진이 어둡다고 낮추지 말 것.**
          2026-07-30 사진 3장을 교체하며 다시 실측했다(최악 픽셀 기준, text-shadow 제외):
          구 .84/.56 에서 하늘색 강조(대시 `— `·<b>숫자</b>)가 **모바일 4.11~4.49 /
          데스크톱 3.64~3.92** 로 9대 원칙 4번(4.5:1)에 미달이었다. 새 사진 셋 중 둘이
          하단이 흰 책상·흰 유니폼이라 더 빠듯해졌지만, **구 사진도 이미 4.32 로 미달**이라
          교체가 만든 회귀가 아니라 원래 있던 구멍이다(구 주석의 5.3 은 흰 글자 수치).
          .94/.66 에서 하늘색 **5.14~5.82 / 흰 글자 8.93 이상**으로 통과한다.
       ⚠️ 데스크톱이 모바일보다 항상 나쁘다 — 크롭이 약해 밝은 영역이 더 많이 글자 밑에 온다.
          한쪽만 재고 넘어가지 말 것.
       ⚠️ '아래만 진하고 위로 빨리 걷히는' 급경사(.94/.60@24% 등)는 **역효과**다(실측 3.13) —
          칩은 2줄까지 늘어나고 그 윗줄이 스크림 옅은 구간에 걸린다. 40% 정지점을 앞으로
          당기지 말 것.
       ⚠️ 강조색을 밝히는 쪽(#C9DCF7 등)으로 푸는 방법도 통하지만(5.21) 채택하지 않았다 —
          팔레트에 없는 색을 이 자리에만 새로 만드는 셈이라 '새 색을 자리마다 늘리지 말 것'에
          걸린다. --action-on-dark 를 건드리는 대신 스크림으로 맞춘다. */
    .dr-card::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
      background: linear-gradient(to top,
        rgba(18,28,46,.94) 0%, rgba(18,28,46,.66) 40%, rgba(18,28,46,0) 100%);
      pointer-events: none;
    }
    .dr-chip {
      position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2;
      font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .01em;
      color: #fff; word-break: keep-all; text-shadow: 0 1px 2px rgba(0,0,0,.4);
    }
    .dr-chip::before { content: "— "; color: var(--action-on-dark); font-weight: 800; }
    .dr-chip b { color: var(--action-on-dark); font-weight: 800; }
    /* 데스크톱 — 컬럼이 화면 폭보다 좁아 '끝까지 붙는' 블리드가 성립하지 않으므로
       카드 폭을 넓힌다. ⚠️ 폭의 주인은 이제 .tl-step 이다(문이 타임라인 칸 안에 들어갔다) —
       .door 는 칸을 꽉 채우기만 하면 된다. 둘 다 max-width 를 갖고 있으면 좁은 쪽이 이겨
       큰 화면에서 카드가 안 커진다(실측으로 밟은 자리). */
    @media (min-width: 720px) {
      .tl-step { max-width: 640px; }
      .door, .door.rev { max-width: 100%; gap: 24px; padding: 20px; }
    }

    /* ── ④ 숫자 — 몬크가 쌓아온 것 (2026-07-30 ①에서 여기로 이사) ──
       타일 자체는 구 .msn-stat 그대로다(클래스 이름만 자리에 맞게 바꿨다).
       ⚠️ 구 '업계 현실' 3타일(2만·350여·0.18%)과 브릿지 문장은 오너 지시로 삭제됐다
          (index.html 주석 참조). 그래서 이 섹션의 타일은 **네 개, 2×2 한 덩어리**뿐이고
          액센트 타일(.num.is-hot)도 없다 — 관련 CSS 도 같이 지웠으니 되살릴 땐 함께 볼 것. */
    .nums { background: var(--bg2); padding: 72px 0; }
    .nums-inner { max-width: 560px; margin: 0 auto; padding: 0 var(--space-3); }
    .nums-title {
      font-family: var(--serif); font-weight: 800;
      font-size: clamp(24px, 6.4vw, 34px); line-height: 1.46; letter-spacing: -0.01em;
      margin-top: 14px; margin-bottom: 26px; color: var(--ink); word-break: keep-all;
    }
    /* ⚠️⚠️ 2×2 고정 — 데스크톱에서도 4열로 펴지 말 것. 720px 컨테이너를 4열로 나누면
       타일 안쪽이 131.5px 인데 '30,000+명'은 38px 활자로 그보다 넓어 단위가 다음 줄로
       떨어진다(구 '30,000+여 명' 실측 159.3px = 숫자 105.7 + '+' 22.9 + 단위 30.7).
       들어가게 하려면 활자를 26px 까지 내려야 하는데 그러면 숫자가 이 섹션의 주인공 자리를
       잃는다. 2열이면 타일 안쪽이 309px 라 38px 그대로 넉넉하다(원칙 10 '큼직한 레이아웃'). */
    .nums-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
    .num {
      background: var(--surface); border: 1px solid var(--border-soft);
      border-radius: var(--radius-sm); padding: 18px 8px 15px; text-align: center;
    }
    .num strong {
      display: block; font-family: var(--serif); font-weight: 800;
      font-size: clamp(22px, 6vw, 30px); color: var(--ink);
      font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    }
    .num strong em { font-style: normal; font-size: 14px; margin-left: 1px; }
    /* '+'는 숫자의 60% 크기로 살짝 올려 붙인다 — 숫자와 같은 크기면 '+'가 자릿수처럼 커 보인다(2026-08-03 오너) */
    .num strong .np { font-style: normal; font-size: .6em; vertical-align: .3em; }
    /* ⚠️ 단위(em·+)는 카운트가 멈춘 뒤에 뜬다 — 굴러가는 동안 '0여 명' 같은 조합을 안 보이게 하고,
       착지에 마침표를 찍는다. `.is-armed` 안에서만 숨기는 이유는 JS 가 없거나 죽은 환경에서
       단위가 영영 안 보이면 안 되기 때문이다(JS 가 관측을 걸 때 .is-armed 를 붙인다). */
    .nums-grid.is-armed .num strong em,
    .nums-grid.is-armed .num strong .np {
      display: inline-block; opacity: 0; transform: translateY(3px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .nums-grid.is-armed .num.is-done strong em,
    .nums-grid.is-armed .num.is-done strong .np { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .nums-grid.is-armed .num strong em,
      .nums-grid.is-armed .num strong .np { transition: none; }
    }
    /* 두 줄짜리 설명(예: '몬크와 함께했던 승준생')이 있어 행간을 잡는다 — grid stretch 라
       같은 줄 타일 높이는 저절로 맞는다. */
    .num > span { display: block; font-size: 13px; line-height: 1.45; color: var(--text-muted); margin-top: 7px; letter-spacing: .02em; word-break: keep-all; }
    .nums-line {
      font-family: var(--serif); font-weight: 800;
      font-size: clamp(23px, 6vw, 32px); line-height: 1.5;
      margin-top: 44px; color: var(--ink); word-break: keep-all;
    }
    /* ⚠️ 강조는 색이 아니라 밑줄이다 — 색으로 칠하면 라벨·링크와 같은 액센트가
       문장 한가운데 또 나와 산만해진다(2026-07-29 오너 "색을 너무 많이 넣었다"). */
    .nums-line em { font-style: normal; box-shadow: inset 0 -11px 0 var(--accent-tint); }

    /* ── 마무리 CTA — 서비스 선언 + 버튼 2개(홈에서 유일한 다크 무대) ── */
    .closing { background: var(--bg-dark); color: var(--text-on-dark); padding: 84px 0; text-align: center; }
    .closing-title {
      font-family: var(--serif); font-weight: 800;
      font-size: clamp(22px, 5.8vw, 30px); line-height: 1.5; word-break: keep-all;
    }
    /* ⚠️ 서비스명 '몬크ON'만 색이 붙는다 — 다크 무대 위라 네이비(--accent)는 배경에 묻히므로
       반드시 밝은 쪽(--action-on-dark)이다. 강조를 문장 다른 곳으로 늘리지 말 것. */
    .closing-title em { font-style: normal; color: var(--action-on-dark); }
    /* ⚠️ 다크 무대 위 CTA는 **흰 알약 + 네이비 글씨**다 — .btn-action 기본값(네이비 배경)을
       그대로 두면 네이비 무대 위 네이비 버튼이라 사실상 안 보인다(대비 1.2:1). */
    /* 버튼 2개 — 375px에선 세로로 쌓고 480px 이상부터 나란히. 실측: 두 라벨 모두 글자 폭
       147px + 좌우 여백 48px = 알약 하나가 195px이라, 나란히 두면 400px이 필요한데
       375px 화면의 콘텐츠 폭은 335px뿐이다(글자가 두 줄로 깨진다). */
    .closing-tabs { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
    .closing-btn {
      width: 100%; max-width: 320px; min-height: 56px;
      font-size: 16px; padding: 16px 24px; border-radius: 999px;
      background: #FFFFFF; color: var(--accent); box-shadow: 0 8px 24px rgba(10,18,30,.35);
      /* ⚠️ 투명 테두리를 빼지 말 것 — 오른쪽 고스트 버튼에는 1.5px 테두리가 있어서,
         여기 자리를 비워 두면 나란히 놓였을 때 두 알약의 높이가 3px 어긋난다(실측). */
      border: 1.5px solid transparent;
    }
    .closing-btn:hover { background: #EEF2F8; box-shadow: 0 12px 32px rgba(10,18,30,.45); }
    .closing-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
    /* ⚠️ 둘 중 하나만 흰 알약이다 — 두 버튼이 같은 무게면 어디를 눌러야 할지 알 수 없다.
       오른쪽(무료 도구)은 테두리 버튼. 다크 무대라 글자는 흰색이고 배경은 아주 옅게만 채운다. */
    .closing-btn.is-ghost {
      background: transparent; color: #FFFFFF;
      border: 1.5px solid rgba(255,255,255,.55); box-shadow: none;
    }
    .closing-btn.is-ghost:hover { background: rgba(255,255,255,.10); box-shadow: none; }
    @media (min-width: 480px) {
      .closing-tabs { flex-direction: row; justify-content: center; }
      .closing-btn { width: auto; max-width: none; flex: 0 1 auto; }
    }
    .closing-note { margin-top: 14px; font-size: 13px; color: #A7AFBB; }
    .closing-note a { color: #FFFFFF; font-weight: 700; text-decoration: underline; }

    /* 무료 도구 직접 링크 (2026-08-02 C-5) — 다크 면 위라 흰 글자로 뒤집는다.
       ⚠️ 다크 배경 위에서 네이비(--accent-ink)는 1.4:1 로 묻힌다. 여기 색을 토큰으로
          바꾸지 말 것(팔레트 규칙: 다크 면 위 강조는 흰색 또는 --action-on-dark).
       ⚠️ 터치 44px — 링크가 촘촘하면 오터치가 난다. padding 으로 높이를 만든다. */
    .closing-free {
      margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 2px 4px; font-size: 13px; color: #A7AFBB;
    }
    .closing-free b {
      flex: 0 0 100%; margin-bottom: 4px;
      font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #A7AFBB;
    }
    .closing-free a {
      display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
      font-size: 14px; font-weight: 700; color: #FFFFFF; text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,.35);
    }
    .closing-free a:hover { border-bottom-color: #FFFFFF; }
    .closing-free a:focus-visible { outline: 3px solid var(--action-on-dark, #A8C7F0); outline-offset: 2px; }

    /* ── FOOTER ──
       ⚠️ 2026-07-29 복구 — 스토리 개편(index.css 2006→673줄)에서 footer 규칙이 통째로
          날아가 있었다. 스타일이 하나도 없으니 링크가 **브라우저 기본 파란 밑줄**(#0000EE)로
          떴다 — 사이트 어디에도 없는 색이라 홈 맨 아래에서만 튀었다. 지우지 말 것. */
    footer { background: var(--bg2); border-top: 1px solid var(--border-soft); padding: 46px 0 40px; }
    .footer-inner { display: flex; flex-direction: column; gap: 18px; }
    .footer-logo img { height: 24px; width: auto; display: block; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
    /* 표적 하한 24px(WCAG 2.5.8 AA) — 구 20px. 전 페이지 공용 푸터라 여기 한 곳이 정본이다. */
    .footer-links a { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
    .footer-links a:hover { color: var(--accent); text-decoration: underline; }
    .footer-copy { font-size: 13px; line-height: 1.8; color: var(--text-dim); }

    /* ── 데스크톱 — 스토리 컬럼 확대(2026-07-29 오너 "웹인데 따닥따닥 붙어있다") ──
       구조(세로로 읽어 내려가는 한 줄기 스토리 + 좌우 번갈아 붙는 사진)는 그대로 두고
       폭과 활자만 큰 화면 급으로 올린다. 실측 근거: 1440px에서 미션 560px(화면의 39%)·
       문 640px(44%)에 문 제목 22px·설명 14px이 375px 모바일 값 그대로였다 —
       clamp가 미션/마무리 제목에만 걸려 있어 문 섹션은 아예 커지지 않았다.
       ⚠️ 문을 3열 카드로 펼치지 말 것(오너 기각) — 좌우 교차 리듬이 이 섹션의 구도이고,
          3열로 펴면 challenges.html 카드 목록과 구분이 사라진다. */
    @media (min-width: 1024px) {
      .msn { padding: 120px 0 104px; }
      .msn-inner { max-width: 720px; }
      .msn-title { font-size: 42px; margin-top: 18px; }
      .msn-lead { font-size: 19px; margin-top: 24px; }
      .worry { margin-top: 38px; padding: 34px 30px; }
      .wr-q { font-size: 28px; }
      .wr-sub { font-size: 16px; margin-top: 13px; }

      .sortsec { padding: 110px 0 20px; }
      .sort-inner { max-width: 720px; }
      .sort-title { font-size: 40px; }
      .sortwrap { margin-top: 38px; }
      /* 큰 화면에선 칩이 한 줄에 세 개 — 열 개가 2열로 다섯 줄이면 세로로 길어져
         '한눈에 많다'는 인상이 오히려 약해진다. */
      .sort-pool, .sgrp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
      .sc { min-height: 52px; font-size: 15px; padding: 14px 16px; }
      .sgrp { padding: 20px; }
      .sgrp-h { font-size: 18px; margin-bottom: 14px; }
      .sgrp-h span { font-size: 13px; }

      /* ── 세 그룹을 가로로 (2026-07-30 오너 승인) ──
         넓은 화면에서 '세 가지'가 한눈에 들어오고, 무엇보다 **정렬 전 빈 자리가 크게 준다**:
         칩 목록은 3열이라 5줄에서 끝나는데 카드를 세로로 쌓으면 두 배 넘게 길어져,
         자리를 미리 잡아 두는 구조(reserve)에서 366px 이 비어 있었다. 가로로 놓으면
         가장 큰 카드 하나 높이면 되므로 실측 366 → 약 100px 로 준다.
         ⚠️ `.sgrp + .sgrp { margin-top }` 을 되살리지 말 것 — 가로 배치에선 gap 이 맡는다.
         ⚠️ 카드가 좁아지므로 카드 **안**의 칩은 한 줄에 하나다. 위 `.sort-pool, .sgrp-list`
            3열 선언 **뒤**에 와야 이긴다(특이도가 같아 순서로 결정된다).
         ⚠️ 높이를 맞추지 말고 늘리지도 말 것 — 기본 stretch 로 세 카드가 같은 높이가 되어야
            '한 세트'로 읽힌다(align-items:start 로 바꾸면 아래가 들쭉날쭉해진다).
         ⚠️ `.sort-groups[hidden]{display:none}` 가드는 특이도가 높아 여기 display:grid 를
            이긴다 — 그래도 가드를 지우지 말 것(지우면 정렬 전에 빈 카드 3개가 보인다). */
      .sort-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
      .sgrp-list { grid-template-columns: minmax(0, 1fr); }

      .doors { padding: 80px 20px 120px; }
      .tl-step { max-width: min(900px, calc(100% - 96px)); }
      .tl-step + .tl-step { margin-top: 52px; }
      .tl-step + .tl-step::before { top: -38px; height: 26px; }
      .tl-when { font-size: 16px; margin-bottom: 18px; }

      .nums { padding: 112px 0; }
      .nums-inner { max-width: 720px; }
      .nums-title { margin-bottom: 34px; }
      .nums-grid { gap: 14px; margin-top: 24px; }
      /* 4열로 펴지 말 것 — 근거는 위 .nums-grid 주석(타일 안쪽 131.5px 에 여섯 자리 숫자). */
      .num { padding: 26px 12px 22px; }
      .num strong { font-size: 38px; }
      .num strong em { font-size: 16px; }
      .num > span { font-size: 14px; margin-top: 9px; }
      .nums-line { font-size: 40px; margin-top: 56px; }
      /* 폭은 .tl-step 이 정한다(위 min()으로 좌우 최소 여백 48px 확보) — 여기선 안쪽 여백만. */
      .door, .door.rev { max-width: 100%; gap: 34px; padding: 26px; }
      .dr-title { font-size: 28px; margin-top: 12px; }
      .dr-ds { font-size: 17px; margin-top: 12px; }
      .dr-link { font-size: 16px; margin-top: 18px; }
      .dr-card { min-height: 240px; border-radius: 16px; }
      /* ⚠️ padding 은 없다 — 상자가 아니라 사진 위에 얹은 글자다(위 .dr-chip 주석 참조). */
      .dr-chip { left: 14px; right: 14px; bottom: 12px; font-size: 14px; }

      .closing { padding: 112px 0; }
      .closing-title { font-size: 38px; }
      .closing-tabs { margin-top: 38px; gap: 14px; }
      .closing-btn { font-size: 17px; padding: 18px 34px; min-height: 60px; }
      .closing-note { margin-top: 18px; font-size: 14px; }
    }