/* 개편 전 de7532d의 창문 표현을 그대로 유지한다. 아래 콘텐츠 스타일과 분리한다. */
.hero-intro, .hero-intro *, .hero-intro *::before, .hero-intro *::after { box-sizing:border-box; margin:0; padding:0; }
.hero-intro { font-family:'SUIT Variable',SUIT,'Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; }
    .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;
    }
    /* ── 히어로 → 다음 섹션 이음매 (2026-08-05) ──────────────────────────────
       사진 하단 벽(밝기 ~231)과 아래 `.msn`(밝기 ~246) 사이에 가로선 하나가 생겨서
       지운다. 구 웜 페이퍼 팔레트에선 배경도 94% 라 사진과 이어져 보였는데, 배경을
       순백+쿨 그레이로 바꾸면서 드러난 자리다. 사진을 더 밝혀 없애는 방법도 있지만
       창문 주변 은은한 글로우가 납작해져서 CSS 로 처리한다(사진 원본을 안 건드린다).

       ⚠️ 도착색은 히어로 **바로 아래 섹션의 배경**과 같아야 한다. 지금은 `.msn` 이 배경을
          안 깔아서 `--bg`(순백)다 — 아래 섹션에 배경을 도로 깔면 여기도 같이 볼 것.
       ⚠️ 마크업 위치가 규칙의 일부다: `<picture>` 바로 뒤 · `.hero-mid` 앞.
          z-index 없이 DOM 순서로만 로고·스크롤 신호 아래에 깔린다(z-index 를 주면
          `.hero-mid` 안 조립 애니메이션까지 새 쌓임 맥락에 갇힌다).
       ⚠️ 높이 104px 는 스크롤 신호(`.hero-cue`, 아래에서 156px 를 쓴다)보다 낮게 잡은
          값이다 — 더 키우면 신호 글자 뒤가 통째로 단색 판이 되어 사진에서 떨어져 보인다. */
    .hero-fade {
      position: absolute; left: 0; right: 0; bottom: 0; height: 104px;
      background: linear-gradient(to bottom, transparent 0%, var(--bg) 92%);
      pointer-events: none;
    }
    /* ⚠️ 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: 700; 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; }

    /* ── 히어로 시작 버튼 — 단일 [시작하기] → #doors(2026-08-19 2차 오너 확정) ─────
       오너 "조잡하다, 그냥 시작하기로 바꾸고 4개의 문에서 고르게". 1차 스택(챌린지
       주버튼+갈래 분할 바 .hcta-row·.hcta-chip)은 같은 날 폐지 — 유리 폭(375px 실측
       143px)에 갈래 둘을 눌러 담는 구조라 어떻게 줄여도 조잡했다. 레퍼런스 실측
       (넷플릭스·듀오링고·클래스101) 공통 문법: 히어로엔 동사 하나, 선택은 다음 화면
       (#doors 네 개의 문)이 담당. 착지는 전역 scroll-behavior:smooth + .doors 의
       scroll-margin-top 이 맡는다(별도 JS 없음).
       ⚠️ .hi-kor(absolute) 안에 있어 로고 창 중앙 배치에 영향이 없고, 등장은 한글 줄과
          한 몸으로 탄다(타임라인 kor 인라인 opacity). 부모의 nowrap·JS 자간을 여기서 푼다. */
    /* ⚠️ 폭 상한은 고정값이 아니라 **유리 실측 폭 --glass-w**(fitWindow 가 .hero-mid 에
       넣는다) — 구 280px 고정폭은 유리(모바일 ~150px)의 두 배라 창을 뚫고 나갔다
       (2026-08-19 오너 "창문 안에 이쁘게 들어가게"). 폴백 260px 는 JS 가 죽었을 때만 쓰인다. */
    /* 간격 16→32(2026-08-20 오너 "약간 아래쪽으로" — 배치 목업 4안 중 B 확정:
       outputs/hero-cta-layout-mockup.html). 세로 중심은 fitWindow 의 korH 가 이 margin 까지
       재서 다시 잡는다 — 로고 ~8px ↑ · 버튼 ~8px ↓ 로 재중앙 정렬되어 간격만 16px 벌어진다. */
    .hi-cta { display: block; margin-top: 32px; white-space: normal; letter-spacing: 0; }
    /* 버튼 입체감(2026-08-19 오너 "클래스101 느낌이 없다, 그냥 박스다") — 새 색을 만들지 않고
       토큰 네이비 위에 흰 광 그라데이션을 얹어 클래스101 주버튼의 볼륨감을 낸다. */
    /* 폭은 글자에 맞게(2026-08-19 오너 "바를 좀 줄이면 되잖아") — 유리 폭 채움에서 축소.
       max-width 가드는 유리를 다시 뚫지 않기 위한 안전선. */
    .hcta-main {
      display: block; width: max-content; max-width: calc(var(--glass-w, 260px) * .98);
      margin: 0 auto; padding: 12px 18px; border-radius: 12px;
      background: var(--action);
      background-image: linear-gradient(170deg, rgba(255, 255, 255, .20) 0%,
        rgba(255, 255, 255, .05) 45%, rgba(0, 0, 0, .12) 100%);
      color: var(--action-ink);
      font-size: 14px; font-weight: 800; line-height: 1.45; letter-spacing: .01em;
      text-decoration: none;
      box-shadow: 0 8px 18px rgba(27, 58, 107, .26), inset 0 1px 0 rgba(255, 255, 255, .25);
      pointer-events: auto;   /* .hero-mid 의 pointer-events:none 해제 — 눌리는 요소는 여기뿐 */
      position: relative; overflow: hidden;   /* 광 줄기(::before) 기준·클리핑 — 아래 '버튼 모션' */
    }
    @media (hover: hover) { .hcta-main:hover { filter: brightness(1.07); } }
    .hcta-main:active { transform: scale(.98); }

    /* ── 버튼 모션 — 둥실 플로팅 + 샤인 스윕(2026-08-19 3차 · 오너 "밋밋한거같은데" →
       모션 목업 5안 중 1안+4안 조합 확정 "1+4로 가자" · 기각안 바운스·펄스·이륙 보존:
       outputs/hero-cta-motion-mockup.html) ──
       둥실(3.2s)과 광 스침(4s)은 주기를 다르게 둬야 한 덩어리 루프로 안 읽힌다(목업 그대로).
       delay 1.8s: 타임라인(total 1.70)이 로드 직후 시작하는 보통 경우에 '한글 착지 후 움직임'이
       되게 하는 값. 시작이 이미지 게이트(index.html start() — 최대 1.2s 폴백)로 늦으면 한글
       페이드(0.3s) 중에 이미 돌 수 있지만 그 사이 변위는 2px 이하라 무시한다. 스크롤 신호
       (hcFlow·hcNudge)와 같은 문법 — 무한 모션은 로드부터 돌고, 보임은 타임라인(kor 인라인
       opacity)이 제어한다. 원장의 '별도 타임라인 항목 금지'는 그대로 지킨다.
       ⚠️ 플로팅은 .hi-cta(래퍼)에 건다 — .hcta-main 에 걸면 돌고 있는 애니메이션이
          :active 의 transform: scale(.98) 을 덮어 누름 반응이 죽는다(애니메이션 > 일반 선언).
       ⚠️ 샤인은 left/width 가 아니라 transform 으로만 움직인다 — 챌린지 카드 모집 띠
          광 스윕(.ch-band::after)과 같은 문법·같은 이유(left 는 매 프레임 페인트). */
    .hi-cta { animation: hctaFloat 3.2s ease-in-out 1.8s infinite; }
    @keyframes hctaFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }   /* 목업 -7px 를 유리 실측(모바일 143px) 비례로 -6px */
    }
    /* 광 줄기 — 버튼 폭 34%짜리 흰 그라데이션 띠가 사선(-18deg)으로 왼→오 스친다.
       translateX 의 % 는 띠 자기 폭 기준이라 버튼 폭이 달라져도 끝까지 지나간다. */
    .hcta-main::before {
      content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0),
        rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
      transform: translateX(-160%) skewX(-18deg);
      animation: hctaShine 4s ease-in-out 1.8s infinite;
    }
    @keyframes hctaShine {
      0% { transform: translateX(-160%) skewX(-18deg); }
      22%, 100% { transform: translateX(420%) skewX(-18deg); }
    }
    /* 움직임을 끈 사람에겐 정지 상태 — 광 줄기는 멈춰 있으면 얼룩이라 아예 없앤다. */
    @media (prefers-reduced-motion: reduce) {
      .hi-cta { animation: none; }
      .hcta-main::before { display: none; }
    }

    /* 스크롤 안내 — 애니메이션이 끝난 뒤에만 뜨고, 스크롤이 시작되면 사라진다.
       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;
      /* --cue-lift 는 JS(fitWindow)가 창틀 하단(FRAME_B) 실측으로 넣는다 — 34px 는 JS 폴백 */
      bottom: calc(var(--cue-lift, 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: 14px; font-weight: 800; letter-spacing: .01em; }
    /* 12.5px — 원칙 1번의 하한(12px) 바로 위. 자간은 구 .14em 에서 줄였다(넓은 자간이
       작은 글자를 더 흐리게 만든다). 잉크 네이비라 배경(#ECE4DB) 대비 10.4:1. */
    .hc-label { display: block; font-size: 12px; 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; }
    /* 신호가 창틀에 올라타는 화면(세로 짧은 인앱·낮은 데스크톱 창)에서 JS(fitWindow)가
       cue-tight 를 붙인다 — 세 조각 한 벌은 유지하고 사이 여백만 30px 압축.
       (구 데스크톱 전용 media 핵은 2026-08-19 폐기 — 모바일 인앱에서 같은 침범이 나서
       fitWindow 가 사진별 창틀 하단(FRAME_B) 실측으로 두 방향 모두 처리한다.) */
    .hero-cue.cue-tight .hc-tag { margin-bottom: 4px; }
    .hero-cue.cue-tight .hc-rail { margin-top: 6px; }
    .hero-cue.cue-tight .hc-arrow { margin-top: 2px; }
    /* 움직임을 끈 사람에겐 흐름 대신 '도착한 상태'로 고정 — 크기·대비 개선은 그대로 남는다. */
    @media (prefers-reduced-motion: reduce) {
      .hc-rail::after { animation: none; top: 28px; }
      .hc-arrow { animation: none; opacity: 1; }
    }


.hero-purpose { position:absolute; bottom:38px; left:20px; right:20px; z-index:4; margin:0; text-align:center; color:var(--action); font-size:14px; font-weight:700; line-height:1.6; }
.hero-intro .hero-cue { visibility:hidden; }