/* ============================================================================
   [이식 구역] style.css → landing.css  (2026-08-12)

   랜딩(공개 페이지)은 더 이상 style.css 를 로드하지 않는다.
   style.css 는 17,805줄 / 1,513개 클래스의 **관장·관원 앱 전용** 시트인데,
   랜딩 7개 페이지가 실제로 쓰던 건 11개 클래스뿐이었다 (belt·kakao-chat-fab·
   motion-orb·motion-gradient-num·sr-only). 그 11개를 위해 gzip 125KB 를
   렌더 블로킹으로 받던 것을 끊고, 아래로 필요한 부분만 옮겨왔다.

   ── 옮겨온 것 (style.css 원본 순서 그대로 = 캐스케이드 보존) ──
     1. 디자인 토큰 :root          (구 style.css 11~232)
     2. Reset & Base               (구 269~300)
     3. Cross-document View Transitions  (구 302~439) — fragments/vt-direction 이 소비
     4. body · a · .sr-only · button/input/img · focus-visible  (구 511~608)
     5. Typography                 (구 610~652)
     6. .belt*                     (구 5574~5685) — fragments/belt
     7. .kakao-chat-fab*           (구 13842~13926) — fragments/kakao-chat-fab
     8. .motion-orb · .motion-gradient-num (구 17289~17332) — body[data-motion="delight"]

   ── 의도적으로 안 옮긴 것 ──
     · style.css §1.1 DARK THEME (`[data-theme="dark"]` 토큰 23개) — 랜딩 body 는
       `data-motion` 만 달고 `data-theme` 를 걸지 않는다(랜딩 트리 사용처 0건).
       랜딩에 다크 모드를 들이면 그때 함께 옮길 것.

   ⚠️ 이 구역은 style.css 와 **더 이상 자동 동기화되지 않는다.**
      style.css 의 위 8개 영역(특히 디자인 토큰·View Transitions)을 고치면
      여기도 같이 고쳐야 랜딩과 앱의 어휘가 어긋나지 않는다.
   ⚠️ 랜딩에 앱 컴포넌트(.btn·.card·.modal 등)를 새로 쓰려면 style.css 에 있다고
      그냥 되지 않는다 — 여기로 옮겨오거나 landing.css 자체 스타일을 쓸 것.
   ============================================================================ */

/* ========================================
   1. DESIGN TOKENS - Color System
   ========================================
   Brand Mono (Strict): Emerald(var(--color-primary-600)) + Soft Dark(var(--color-slate-600)) 2색 기본.
   시맨틱 Error(#ef4444)는 Toast/Form error 등 최소 사용.
   본문 Warning/Info 토큰은 모두 Slate neutral 매핑(amber/indigo 폐지).
   Toast 는 --status-success/-error 2색만 사용 (--toast-* 토큰 2026-05 제거).
   2026-08-09 C안: Toast 면은 흰 면 + hairline — -bg tint 소비 종료, 상태색은 dot 한 점.
   ======================================== */
:root {
  /* ── Brand Primary - Emerald ── */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;

  /* ── Brand Secondary - Emerald Light (Primary 와 동일, 호환 alias) ── */

  /* ── 이용권 뱃지 dot 4-shade 램프 — style.css :root 원본의 이식 사본 (2026-08-12 랜딩 CSS 단일화) ──
     랜딩은 style.css 를 로드하지 않아 여기 사본이 랜딩 목업 dot 의 실소비 값.
     램프 변경 시 style.css :root 와 이 블록 양쪽 동기 의무 (한쪽만 바꾸면 랜딩 목업 dot 이 조용히 갈린다). */
  --pass-dot-period: var(--color-primary-300);
  --pass-dot-count: var(--color-primary-500);
  --pass-dot-weekly: var(--color-primary-700);
  --pass-dot-day: var(--color-primary-900);

  /* ── Brand Base - Soft Dark (Slate) ── */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Level Colors - 띠 색상 팔레트 (slate 외엔 도메인 전용 hex) */

  /* Gradient - 수평 방향 (Emerald 톤) */

  /* Background Colors — 시맨틱 alias → palette ref */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-slate-50);
  --bg-tertiary: var(--color-slate-100);
  --bg-hover: #f0fdf4;

  /* Text Colors — 시맨틱 alias → palette ref */
  /* 주 잉크 = slate-900 단일 (2026-08-31 톤 수렴, style.css 사본 동기 의무) */
  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-600);
  --text-tertiary: var(--color-slate-400);
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-default: var(--color-slate-200);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-strong: var(--color-slate-300);
  --border-hairline: #eaecef;  /* D.MONO CONCIERGE 카드/모달 1px 외곽선 */

  /* auth 단일 컬럼 폭 (ADR 0025 카드리스) — 5곳 하드코딩 통합 (2026-07-30) */
  --auth-col-width: 460px;

  /* Accent - Primary (Emerald) — 시맨틱 alias → palette ref */
  --accent-primary: var(--color-primary-600);
  --accent-primary-hover: var(--color-primary-700);
  --accent-primary-subtle: rgba(5, 150, 105, 0.08);

  /* Status Colors — Emerald palette ref */
  --status-success: var(--color-primary-600);

  /* Brand Mono Strict (2026-04 재설계, 2026-05 Toast 2색 정리):
     본문(뱃지/배너/모달/캘린더 등)에서는 amber/indigo 폐지 → Slate neutral.
     Toast 도 4색 → 2색 정리 (success+info=Emerald, error+warning=Red).
     "좋음/나쁨" 두 축. warning/info 클래스는 API 호환만 유지 — 색은 success/error 와 동일. */

  --status-error: #ef4444;
  --status-error-bg: #fef2f2;
  --status-error-border: #fee2e2;
  --status-error-text: #991b1b;


  /* Typography */
  --font-sans: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-8: 2rem;

  /* Border Radius - Clean Scale */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadow Scale - 미니멀 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Transitions - 부드러운 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-smooth: 0.25s ease;

  /* Layout */
  --top-nav-height: 64px;
  --content-padding: 24px; /* 32→24 (2026-06-15) — admin/system 바깥 여백 압축. page-container + top-nav 좌우 정렬 동시 적용 */
  --sidebar-width: 240px;
  --sidebar-header-height: 75px;

  /* Borders & Backgrounds */
  --border-light: #f1f5f9;
  --bg-card: #ffffff;

  /* Z-Index */
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Premium Redesign Tokens ── */

  /* Glass Morphism */

  /* Glow Effects Extended */

  /* Animation Tokens */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* 토스트·바텀시트 감속 (오버슈트 없음) */
  --ease-vt: cubic-bezier(0.32, 0.72, 0, 1);          /* View Transition push/pop (iOS 곡선, 값 박제) */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 강한 오버슈트 (transition-bounce 짝) */
  --duration-medium: 0.4s;
  --stagger-delay: 0.06s;

  /* Surface Colors (Glass layers) */

  /* Sidebar Premium */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;

  /* Card Premium */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
}


/* ========================================
   2. Reset & Base
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* hidden 속성은 display 를 지정하는 클래스(.btn flex 등)보다 항상 우선.
   author 클래스(.btn{display:inline-flex})가 UA [hidden]{display:none} 을 덮어쓰는 footgun 차단. */
[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 모바일 텍스트 자동 확대(iOS Safari text autosizing · Chrome Android font boosting) 차단.
     기본값 auto 는 블록 폭·텍스트 양으로 배율을 스스로 정하고, DOM 이 바뀌어 리플로우가 일어나면
     (스텝 전환·모달 open 시 body overflow:hidden 등) 배율을 다시 계산한다 → "버튼 눌렀더니 갑자기
     글자만 커짐". 우리 타이포는 전부 px 박제라 자동 배율은 이득 없이 위계만 깨뜨린다.
     100% (none ❌ — 사용자 확대 접근성 보존) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* body 와 동일 배경 — 페이지 이동 시 html 기본 흰색이 잠깐 비쳐 번쩍이는 것 방지 */
  background: var(--bg-secondary);
  /* 스크롤바 자리 항상 확보 — 짧은(스크롤 없음)↔긴(스크롤 있음) 페이지 이동 시 스크롤바가
     생겼다 사라지며 본문이 가로로 출렁이는 점프 차단. (macOS 오버레이 스크롤바엔 무해, Windows/항상표시에 효과) */
  scrollbar-gutter: stable;
}

/* ============================================================
   페이지 전환 — Cross-document View Transitions
   서버사이드 렌더(MPA) 네비게이션 = 전체 리로드 → 흰 화면 번쩍.
   지속 셸(사이드바·헤더·네비)은 제자리 고정, 본문만 부드럽게 전환.
   미지원 브라우저(Firefox 등)는 기존 즉시 이동으로 graceful degrade.
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* 지속 셸 — 전환 그룹에서 분리(named)해 본문(root)에서 떼어냄.
   관리자: sidebar / mobile-header / mobile-bottom-nav
   회원:   top-nav / member-bottom-nav  (페이지당 각 1개 → 이름 충돌 없음) */
.sidebar           { view-transition-name: vt-admin-sidebar; }
.mobile-header     { view-transition-name: vt-mobile-header; }
.mobile-bottom-nav { view-transition-name: vt-mobile-nav; }
.top-nav           { view-transition-name: vt-member-topnav; }
.member-bottom-nav { view-transition-name: vt-member-nav; }

/* 드로어 모드(≤1024px)에선 사이드바를 지속 셸에서 제외 — 닫힌 드로어는
   transform: translateX(-100%) 로 화면 밖인데, 이름을 유지하면 스냅샷 그룹이
   뷰포트 왼쪽(0,0 240×844)에 잡혀 잉크(그림자 등)가 전환 내내 왼쪽 세로 띠로
   노출된다. 드로어는 화면 밖이라 '지속 셸 고정' 이득도 없음 — root 에 포함시켜
   자연스럽게 본문과 함께 전환 (2026-07-17 모바일 전환 회색 띠 버그) */
@media (max-width: 1024px) {
  .sidebar { view-transition-name: none; }
}

/* 회원 PWA 모바일(≤768px)에선 상단 바를 지속 셸에서 제외 — 세 탭의 상단 바가 서로 다르다:
   홈=.top-nav 64px / 내 정보=.mobile-header 56px(top-nav 숨김) / 결제=.pay-head(이름 없음).
   짝이 없는 쪽에서 animation:none 은 '고정'이 아니라 하드컷으로 작동했다 — 도착 바가 0ms 에
   통째로 즉시 등장하고, 떠나는 바는 320ms 얼어붙어 있다가 마지막 프레임에 소멸(상단 밴드만
   하드컷 2회). 게다가 본문 시작선이 56↔64px 라 슬라이드해 들어오는 본문이 8px 어긋났다.
   → 이름을 주지 않아 상단 바가 root 스냅샷에 포함 = 화면이 한 덩어리로 push/pop.
   iOS 와 같은 분담(네비 바는 화면과 함께 이동, 탭 바만 고정)이고, 이미 그렇게 동작하던
   .pay-head 에 세 탭이 정렬된다. 드로어 모드 .sidebar 와 같은 계열 예외.
   데스크톱은 세 페이지 모두 .top-nav 라 짝이 맞으므로 불변(즉시 스왑 유지).
   관리자(admin)는 .mobile-header 가 전 페이지 공통이라 대상 아님 — .member-portal 스코프 필수.
   (2026-08-11 사용자 확정 A안, 시안 static/mockups/member-tab-transition-motion.html) */
@media (max-width: 768px) {
  .member-portal .top-nav,
  .member-portal .mobile-header { view-transition-name: none; }
}

/* 섹션 탭 바(.tabs)는 지속 셸이 아니다 — 2026-08-04 잔상 수정으로 vt-section-tabs 폐지.
   구 설계(2026-06-23)는 "탭 클릭 = 페이지 이동" 전제로 탭 바를 사이드바처럼 고정했으나,
   ① payments/history 가 index 라디오 탭으로 흡수되며 라우팅 탭(<a class="tab-item">)이
      코드베이스에서 0개가 됐고(.tabs 4곳 전부 인페이지 radio 필터) 고정의 목적이 소멸
   ② 고정된 탭 바는 animation:none 으로 0ms 즉시 스왑돼, 본문(root)의 순차 페이드
      (110ms out → 150ms in)와 어긋나 **새 탭 바가 아직 살아있는 옛 본문 위에 겹쳐** 그려졌다
   ③ 양쪽 다 탭이 있으면(결제 2탭 → 이용권 5탭) 옛 스냅샷이 새 그룹 폭으로 늘어나
      4배 확대된 흐릿한 유령으로 전환 내내 남았다. 이를 막으려던
      ::view-transition-old(vt-section-tabs):not(:only-child){display:none} 은 실효 없음(실측).
   → 이름을 주지 않아 탭 바가 root 스냅샷에 자연 포함 = 본문과 같은 순차 페이드(겹침 0).
   라우팅 탭이 다시 생기면 섹션별 이름(vt-tabs-{section})으로 재도입할 것 — 전역 단일 이름 ❌. */

/* 셸은 애니메이션 없이 즉시 스왑 — 흔들림 없이 단단하게 고정.
   (active 메뉴 하이라이트만 즉시 바뀜) */
::view-transition-old(vt-admin-sidebar),
::view-transition-new(vt-admin-sidebar),
::view-transition-old(vt-mobile-header),
::view-transition-new(vt-mobile-header),
::view-transition-old(vt-mobile-nav),
::view-transition-new(vt-mobile-nav),
::view-transition-old(vt-member-topnav),
::view-transition-new(vt-member-topnav),
::view-transition-old(vt-member-nav),
::view-transition-new(vt-member-nav) {
  animation: none;
}

/* 본문(root) — 겹침 제로 순차 페이드. 셸(named)은 고정.
   이전 화면(old)이 '완전히' 사라진 뒤(110ms out)에야 새 화면(new)이 페이드인(110ms 지연).
   두 화면이 동시에 반투명으로 노출되는 구간이 0이라, 구조가 다른 두 페이지가
   함께 비치던 잔상(ghosting)을 '완화'가 아니라 원천 제거. 갭 순간은 html 배경=페이지색
   이라 흰 번쩍임 없이 페이지색 한 겹만 스침(즉시 스왑의 '탁' 거슬림도 페이드라 완화).
   (2026-07-06, 구 '겹침 최소화' 크로스페이드 supersede — 잔상 원천 제거) */
::view-transition-old(root) {
  animation: 110ms ease-in both vt-root-out;
}
::view-transition-new(root) {
  animation: 150ms var(--ease-out-quint) 110ms both vt-root-in;
}
@keyframes vt-root-out { to { opacity: 0; } }
@keyframes vt-root-in  { from { opacity: 0; } }

/* 모바일 방향 슬라이드 — iOS Push/Pop (2026-07-15, A안 사용자 확정)
   fragments/vt-direction.html 이 pageswap/pagereveal 에서 네비 방향을 감지해
   transition types(slide-forward/slide-back + tab-forward/tab-back)를 얹는다.
   매칭 selector 가 여기(모바일)뿐이라
   데스크톱·타입 미지정(reload·판정 불가)·미지원 브라우저는 위 순차 페이드 그대로.
   두 스냅샷 모두 불투명(body bg 포함)이라 크로스페이드 잔상 없음 — 잔상 원천 제거 설계 유지.
   mix-blend-mode: normal 필수 — UA 기본 plus-lighter 는 불투명 두 장이 겹치면 백화(白化). */
@media (max-width: 768px) {
  /* 앞으로(push) — 새 화면이 오른쪽에서 시트처럼 진입, 이전 화면은 28% 물러나며 디밍.
     셸 네비(tab-forward)도 동일 push — 전 구간 push/pop 단일 문법 (2026-07-16 사용자 확정
     A안, ADR 0054 — 구 "셸 네비=30px 마이크로 슬라이드" ADR 0052 supersede.
     tab-* 타입 이름은 vt-direction 판정·data-vt-dir 힌트 호환 위해 유지, 모션만 동일). */
  html:active-view-transition-type(slide-forward)::view-transition-old(root),
  html:active-view-transition-type(tab-forward)::view-transition-old(root) {
    animation: 340ms var(--ease-vt) both vt-push-recede;
    mix-blend-mode: normal;
  }
  html:active-view-transition-type(slide-forward)::view-transition-new(root),
  html:active-view-transition-type(tab-forward)::view-transition-new(root) {
    animation: 340ms var(--ease-vt) both vt-push-enter;
    mix-blend-mode: normal;
    box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16);
  }
  /* 뒤로(traverse back·tab-back) — 현재 화면이 오른쪽으로 퇴장, 이전 화면이 복귀 (pop).
     z-index: 나가는 화면(old)이 위 — 기본 페인트 순서(new 위)의 역전 필요 */
  html:active-view-transition-type(slide-back)::view-transition-old(root),
  html:active-view-transition-type(tab-back)::view-transition-old(root) {
    animation: 320ms var(--ease-vt) both vt-pop-exit;
    mix-blend-mode: normal;
    z-index: 1;
    box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16);
  }
  html:active-view-transition-type(slide-back)::view-transition-new(root),
  html:active-view-transition-type(tab-back)::view-transition-new(root) {
    animation: 320ms var(--ease-vt) both vt-pop-return;
    mix-blend-mode: normal;
  }
}
@keyframes vt-push-enter  { from { transform: translateX(100%); } }
@keyframes vt-push-recede { to   { transform: translateX(-28%); filter: brightness(0.92); } }
@keyframes vt-pop-exit    { to   { transform: translateX(100%); } }
@keyframes vt-pop-return  { from { transform: translateX(-28%); filter: brightness(0.92); } }

/* 모션 최소화 설정 — 전환 애니메이션 전부 끄고 즉시 스왑 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}


body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-secondary);
  /* 화면 높이 = vh fallback + dvh override (2026-08-12 「헛스크롤」 제거).
     모바일에서 100vh = 주소창이 숨은 「큰 뷰포트」라, 주소창이 보이는 동안 문서가 화면보다
     60~90px 더 길어진다 → 콘텐츠가 짧아 스크롤할 게 없는 페이지(관원 프로필·결제·회원목록 등)
     에서도 "볼 것 없이 화면만 스르륵 내려가는" 헛스크롤이 항상 생김. dvh 는 현재 뷰포트를
     그대로 따라가 헛여백이 0. 아래 화면높이 컨테이너 전부 같은 규칙 (frontend-guide §모바일 시트 높이 동일 패턴). */
  min-height: 100vh;
  min-height: 100dvh;
  /* 한국어 줄바꿈 — 어절(공백) 단위로 줄바꿈하여 조사·의존명사가 분리되지 않도록.
     긴 영어 단어/URL은 overflow-wrap으로 컨테이너 넘침 방지. (frontend-guide §22) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a {
  color: var(--accent-primary);
  text-decoration: none !important;
}

a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}
@media (hover: hover) {
  a:hover {
    color: var(--accent-primary-hover);
  }
}

/* Screen reader only (a11y) — 시각적으로 숨기고 스크린리더에만 노출 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 키보드 focus 박제 — 페이지 인라인 .X:focus { outline:none } 가 키보드 진입 시 덮어쓰지 못하도록
   접근성 보장. 마우스/터치 focus 는 :focus-visible 매칭 안 되어 영향 없음.
   ※ input/select/textarea 는 :focus-visible 휴리스틱이 마우스 클릭에도 matches 되어
   자체 :focus (border + box-shadow ring) 와 outline 이 동시에 표시되는 이중 테두리 버그 → 제외.
   텍스트 컨트롤의 a11y indicator 는 각 컨트롤 :focus 규칙(.form-input/.form-select/.form-textarea/
   .float-field input/.ios-item:focus-within 등) 이 책임.
   ※ [tabindex] 는 input/textarea/select 와 .custom-select-trigger 를 명시 제외 — flatpickr 가
   date-picker input 에 tabindex="0" 을 주입해 [tabindex] 에 걸리면 자체 ring + outline 이
   동시에 표시되는 이중 테두리 회귀가 발생한다 (frontend-guide §27). */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not(input):not(textarea):not(select):not(.custom-select-trigger):focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px;
}

/* 본문 앵커 안전판 — `#main-content` 는 swipe-back.js 의 transform 대상이자 common.js 의 스크롤 컨테이너
   폴백이다(포커스 타깃 아님). skip-link 는 미사용이고(ADR 0072) 고아 `tabindex="-1"` 도 2026-07-31 에
   6개 레이아웃에서 제거해 지금은 위 [tabindex] 규칙에 걸리지 않는다. 이 규칙은 누군가 스크립트로
   `.focus()` 를 걸거나 tabindex 를 되살렸을 때 본문 전체(수천 px)에 emerald 테두리가 그려지는 것만 막는다. */
#main-content:focus,
#main-content:focus-visible {
  outline: none !important;
}

/* ========================================
   3. Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--text-primary);
}

h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }


.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-tertiary); }


.belt {
  /* 면직 노이즈 1장(베이크된 feTurbulence data-URI)을 모든 띠가 background 로 공유 → 100개여도 텍스처 1장 비용 */
  --belt-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%3E%3Cfilter%20id='b'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9%200.4'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='0.2'%20intercept='0.4'/%3E%3CfeFuncG%20type='linear'%20slope='0.2'%20intercept='0.4'/%3E%3CfeFuncB%20type='linear'%20slope='0.2'%20intercept='0.4'/%3E%3CfeFuncA%20type='linear'%20slope='0'%20intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='30'%20height='30'%20filter='url(%23b)'/%3E%3C/svg%3E");
  --belt-color: var(--color-slate-300);
  --belt-tape: #16171d;
  --belt-stripe: #efeadd;
  --belt-stitch: rgba(255,255,255,0.20);
  --belt-w: 48px;
  --belt-h: 14px;
  --belt-tape-w: 16px;
  --belt-stripe-w: 2px;
  --belt-stripe-gap: 1.5px;
  display: inline-flex;
  align-items: stretch;
  width: var(--belt-w);
  height: var(--belt-h);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.20);
  flex-shrink: 0;
  vertical-align: middle;
}
.belt__main {
  flex: 1;
  background-color: var(--belt-color);
  /* 트윈 스티칭(상·하 dashed) + 매트 sheen + 면직 grain(soft-light) */
  background-image:
    repeating-linear-gradient(90deg, var(--belt-stitch) 0 1.6px, transparent 1.6px 3.6px),
    repeating-linear-gradient(90deg, var(--belt-stitch) 0 1.6px, transparent 1.6px 3.6px),
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%, rgba(0,0,0,0.18)),
    var(--belt-grain);
  background-size: 100% 1px, 100% 1px, 100% 100%, 30px 30px;
  background-position: 0 31%, 0 69%, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat, repeat;
  background-blend-mode: normal, normal, normal, soft-light;
}
.belt__tape {
  width: var(--belt-tape-w);
  background-color: var(--belt-tape);
  /* 입체 wrap 랭크바: 좌측 seam 그림자 + 상하 음영 */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.22));
  box-shadow: inset 1.5px 0 0 rgba(0,0,0,0.30);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--belt-stripe-gap);
  padding: 0 2px;
}
.belt__stripe {
  width: var(--belt-stripe-w);
  height: 100%;
  background: var(--belt-stripe);
  border-radius: 0.5px;
}

/* 흰 벨트: 따뜻한 아이보리 + 보더 + 어두운 스티칭 */
.belt--white {
  --belt-color: #f7f5ef;
  --belt-stitch: rgba(70,58,34,0.16);
}
.belt--white .belt__main {
  box-shadow: inset 0 0 0 1px #cfc8b6;
}
/* 블랙 벨트: 본체 + 옥스블러드 랭크바 + 흰색 그랄 */
.belt--black {
  --belt-color: #14151a;
  --belt-tape: #cf2233;
  --belt-stripe: #fff;
}

/* 사이즈 변형 */
.belt--xs {
  --belt-w: 24px;
  --belt-h: 8px;
  --belt-tape-w: 8px;
  --belt-stripe-w: 1px;
  --belt-stripe-gap: 1px;
}
.belt--sm {
  --belt-w: 36px;
  --belt-h: 12px;
  --belt-tape-w: 12px;
  --belt-stripe-w: 1.5px;
  --belt-stripe-gap: 1.25px;
}
.belt--md {
  --belt-w: 48px;
  --belt-h: 14px;
  --belt-tape-w: 16px;
  --belt-stripe-w: 2px;
  --belt-stripe-gap: 1.5px;
}
.belt--lg {
  --belt-w: 56px;
  --belt-h: 16px;
  --belt-tape-w: 18px;
  --belt-stripe-w: 2px;
  --belt-stripe-gap: 1.75px;
}
.belt--xl {
  --belt-w: 80px;
  --belt-h: 22px;
  --belt-tape-w: 26px;
  --belt-stripe-w: 3px;
  --belt-stripe-gap: 2px;
  border-radius: 4px;
}

/* xs 사이즈에서 tape 폭이 좁아 4그랄 이상 시 스트라이프 간격 더 압축 */
.belt--xs .belt__tape { padding: 0 1px; }
.belt--xs .belt__stripe { border-radius: 0; }


.kakao-chat-fab {
  /* 글리프 색 소유 — icons :: kakao 는 fill: currentColor 라 여기가 카카오 규정색을 준다.
     이 줄이 없으면 랜딩 body 의 emerald(#059669) 를 상속해 말풍선이 초록으로 렌더된다
     (2026-08-22 UI 감사 A안이 style.css 만 갱신하고 이 사본을 빠뜨린 회귀 — 2026-08-23 복구).
     style.css `.kakao-chat-fab` 와 **쌍둥이** — 한쪽만 바꾸지 ❌ */
  color: #3C1E1E;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FEE500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(254, 229, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.3s ease;
  z-index: var(--z-dropdown);
  text-decoration: none;
}

@media (hover: hover) {
  .kakao-chat-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(254, 229, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

.kakao-chat-fab:active {
  transform: translateY(-1px) scale(1.02);
}

.kakao-chat-fab svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 768px) {
  /* FAB 스택 기준선(--fab-anchor) = 스택 최하단 y 오프셋.
     랜딩 sticky CTA(72px) 유무에 따라 자동 보정.
     .kakao-chat-fab(상시) 가 스택 최하단, .fab(페이지 액션) 이 그 위로 적층 → 절대 겹침 방지.
     .fab 의 적층 오프셋은 mobile-shell.css 에서 var(--fab-anchor) 를 소비. */
  /* 문법은 정본(style.css §하단 적층 토큰, [[0372]])과 동일한 dock 파생형 —
     한쪽만 고쳤을 때 반대편 상수를 놓치지 않게 두 시트가 같은 모양을 유지한다.
     구 상수식(`calc(64px + 16px + env())`) 복귀 ❌.
     바텀네비 분기는 랜딩 셸이 `.mobile-bottom-nav` 를 렌더하지 않아 삭제(죽은 규칙) */
  body {
    --bottom-dock: env(safe-area-inset-bottom, 0px);
    --fab-anchor: 16px;
  }
  body:has(.landing-mobile-cta.show) {
    --bottom-dock: calc(72px + env(safe-area-inset-bottom, 0px));
    --fab-anchor: calc(var(--bottom-dock) + 16px);
  }

  .kakao-chat-fab {
    bottom: var(--fab-anchor, 16px);
    right: 16px;
    width: 54px;
    height: 54px;
  }

  .kakao-chat-fab svg {
    width: 26px;
    height: 26px;
  }

}

/* `.kakao-chat-fab--mobile-only` · `.fab` 규칙은 이 시트에 두지 않는다 — 랜딩 셸은 카카오 FAB
   **기본형만** 렌더하고, mobile-only 변형은 `layout/admin` 단독 · `.fab` 은 `admin/members/list`
   단독이라 랜딩에서 매치 횟수가 0 이었다 (2026-08-23 UI 감사 사용자 확정 A안 — 위 :673
   바텀네비 분기 삭제와 같은 처리). 두 시트를 쌍둥이로 두는 목적은 **값 동기화**지 미매치 규칙
   보존이 아니다. 원본 = `style.css` 「하단 적층 토큰」 구역. 랜딩에 재도입 ❌ */

/* ── delight 전용: ambient 오브 (마크업 <i class="motion-orb">) ── */
@keyframes motionOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-16px, 14px) scale(1.08); }
}

body[data-motion="delight"] .motion-orb {
  /* fixed = 소비처 6곳이 인라인으로 쓰던 실제 값. 구 `absolute` 는 전 소비처가 덮어
     한 번도 적용된 적 없는 죽은 선언이었다 (2026-08-23 UI 감사 R, 렌더 변화 0).
     면·모션·position 은 CSS 소유 · 크기·오프셋은 자리마다 달라 소비처 인라인 소유 */
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(34px);
  opacity: 0.5;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.8), rgba(167, 243, 208, 0) 70%);
  animation: motionOrbDrift 9s ease-in-out infinite;
  z-index: 0;
}

body[data-motion="rich"] .motion-orb { display: none; }

/* ── delight 전용: hero 글로우 펄스 — 구현 없음 (2026-08-23 확인) ──
   2026-08-21 고아 CSS 정리에서 `.motion-glow` 가 사용처 0 으로 소멸했고, SSOT
   (project-frontend-guide §모션 시스템) 의 delight 어휘 목록에서도 같은 날 뺐다.
   이 주석만 남아 「있는데 비어 있다」로 읽히던 자리 — 되살리려면 새로 설계할 것. */


/* ── delight 전용: 그라데이션 숫자 (hero 강조 숫자만) ── */
@keyframes motionGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body[data-motion="delight"] .motion-gradient-num {
  background: linear-gradient(90deg, #047857, #10b981, #047857);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: motionGradientShift 4s ease infinite;
}


/* CTA 안 작은 전진 셰브론 — 아이콘은 `icons :: chevronRight`(ADR 0374, 구 인라인 사본 폐지).
   **랜딩은 style.css 를 로드하지 않으므로**(이 파일 머리 참조) 같은 규칙이 여기에도 있어야 한다 —
   style.css 쪽에만 두면 랜딩 셰브론이 크기 없이 렌더된다. 굵기 3 = 구 인라인 값 그대로. */
.icon-cta-chev { width: 12px; height: 12px; stroke-width: 3; flex-shrink: 0; }

/* ==================== 이식 구역 끝 · 이하 기존 landing.css ==================== */

/* ============================================
   Landing Page CSS (모바일 퍼스트)
   기본 스타일 = 모바일, @media(min-width:769px) = 데스크톱
   ============================================ */

:root {
  --landing-primary: #059669;
  --landing-primary-dark: #047857;
  --landing-primary-light: #d1fae5;
  --landing-gray-50: #f8fafc;
  --landing-gray-100: #f1f5f9;
  --landing-gray-200: #e2e8f0;
  --landing-gray-300: #cbd5e1;
  --landing-gray-400: #94a3b8;
  --landing-gray-500: #64748b;
  --landing-gray-600: #475569;
  --landing-gray-700: #334155;
  --landing-gray-800: #1e293b;
  --landing-gray-900: #0f172a;
}

/* ── Reset & Base ── */
/* 앵커 네비(#features·#events·#pricing) 클릭 시 부드럽게 이동. 모션 민감 사용자는 즉시 점프 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.landing-page * { margin: 0; padding: 0; box-sizing: border-box; }
.landing-page {
  /* 폰트 스택 SSOT = 위 「이식 구역」의 --font-sans (2026-08-12 style.css 링크 폐지로 이관) */
  font-family: var(--font-sans);
  color: var(--landing-gray-800); line-height: 1.7;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: #f8fdfb;
  background-image:
    radial-gradient(ellipse 900px 600px at -10% 0%, rgba(167,243,208,0.55), transparent),
    radial-gradient(ellipse 800px 500px at 110% 100%, rgba(167,243,208,0.5), transparent);
}
/* 기능 상세 페이지(히어로 없는 짧은 페이지)는 좌상단 ambient blob이 섹션 헤더를 덮어 톤이 들쭉날쭉 →
   홈 본문 섹션과 동일하게 평면 #f8fdfb 로 통일. 홈(.landing-features--home)은 히어로가 blob을 흡수하므로 제외.
   법률 2페이지(.legal-page)도 동일 — 히어로 없이 좌상단이 곧 h1+목차라 같은 근거 (2026-08-13 UI 감사 A안).
   ⚠️ `:not(.landing-features--home)` 안의 클래스는 **사용처 0 이어도 규칙이 죽지 않는다** — 없는 클래스를 부정하면
   조건이 「항상 참」이 되어 오히려 넓어진다. 죽은 CSS 스윕에서 이 두 셀렉터를 지웠다가 features 4페이지 배경·
   모바일 순서가 깨져 즉시 원복했다(2026-08-24). `:not()`·`:has()` 안쪽 클래스는 스윕 대상 ❌ */
.landing-page:has(.landing-features:not(.landing-features--home)),
.landing-page:has(.legal-page) { background-image: none; }
.landing-page a { text-decoration: none; color: inherit; }
@media (hover: hover) {
  .landing-page a:hover { color: inherit; }
}

.landing-container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.landing-section { padding: 15px 0; }
/* sticky 네비(약 69px) 가 앵커 섹션 제목을 가리지 않도록 스크롤 오프셋 (법률 페이지 80px 컨벤션 일치) */
.landing-section[id] { scroll-margin-top: 80px; }

/* ── Navigation ── */
.landing-nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff; backdrop-filter: none;
  border-bottom: 1px solid var(--landing-gray-200); padding: 10px 0;
}
.landing-nav .landing-container { display: flex; align-items: center; justify-content: space-between; position: relative; }
/* 모바일: 홈 nav 는 메뉴/CTA 가 숨겨져 우측이 비므로 로고 중앙 정렬. 법률 페이지(.nav-back-group)는 space-between 유지 */
.landing-nav .landing-container:has(.nav-menu) { justify-content: center; }

.nav-logo { display: flex; align-items: center; gap: 8px; }
.nav-logo-wordmark { height: 48px; width: auto; display: block; }
/* .nav-left 삭제 (2026-08-12 UI 감사) — 자식이 a.nav-logo 하나뿐인 잉여 flex 래퍼였고
   홈·법률 3페이지는 로고를 직접 배치해 features 4종만 DOM 이 갈렸다. 재도입 ❌ */
/* 서브페이지 백링크 — feature(← 홈)·법률(← 돌아가기) 공용 .nav-back 단일 어휘 (2026-07-22) */
/* 히트박스 확대 idiom — padding 으로 44px 확보 + 같은 크기 음수 margin 으로 되돌려 레이아웃·nav 높이 불변
   (2026-08-10 UI 감사 A안. 구 padding 0 은 히트 ≈26px, 법률 2페이지는 sticky CTA 가 없어 이 nav 가
   유일한 모바일 복귀 동선). 가로는 건드리지 않는다 — .nav-back-group gap 20px 이 시각적으로 좁아진다 */
/* .landing-page 프리픽스 = 특이도 (0,2,0) — 위 `.landing-page a { color: inherit }` (0,1,1) 에
   색 선언이 밀려 세 링크가 상속색 slate-800 으로 렌더되던 것 교정 (2026-08-19 UI 감사 —
   landing-footer 가 2026-08-04 같은 문제를 고친 선례. .nav-cta 의 !important 와 같은 원인) */
.landing-page .nav-back {
  display: inline-flex; align-items: center;
  padding: 13px 0; margin: -13px 0;
  /* 14 = nav 링크 한 값([[0491]]) — `.nav-cta` 주석이 이미 「nav 링크 = `.nav-link` 와 같은 14」를
     박제해 뒀고, 형제 `.nav-back-link`(14/700)와 «같은 그룹 안 gap 20 으로 나란히» 서는데 혼자 15 였다.
     구 15 에는 크기 근거 주석이 없었다(있던 주석은 히트박스·특이도·색). 15 재도입 ❌
     ⚠ 짝 = 위 히트박스 idiom — 15 → 14 로 낮춰도 `padding 13px` 그대로 **50px**(44 바닥 충족),
     nav 높이도 73(데스크톱)·57(모바일) 불변이라 padding 재계산 불필요(실측). */
  color: var(--landing-gray-500); font-size: 14px; font-weight: 700; transition: color .2s;
}
@media (hover: hover) {
  .landing-page .nav-back:hover { color: var(--landing-gray-900); }
}
.nav-back-group { display: flex; align-items: center; gap: 20px; }
.landing-page .nav-back-link { color: var(--landing-gray-500); font-size: 14px; font-weight: 700; transition: color .2s; }
@media (hover: hover) {
  .landing-page .nav-back-link:hover { color: var(--landing-primary); }
}

/* nav CTA = Text Hierarchy (테두리 없는 텍스트 CTA + 화살표). nav-link(회색 600)와 emerald 800 으로 위계 차별 */
.nav-cta {
  display: none; align-items: center; gap: 6px;
  color: var(--landing-primary-dark) !important;
  /* 14 = `.nav-link` 와 같은 값 ([[0473]] 후속) — 위계는 바로 위 주석이 스스로 적어 둔 대로
     «emerald + 800» 이 지므로 크기는 위계 수단이 아니다. 구 14.5 는 [[0470]] 이 「랜딩에 0.5px 단위
     font-size 0」을 박제한 뒤 남은 마지막 하나였고, 같은 파일 `.pricing-formula-foot` 주석도
     「14.5 재도입 ❌」로 그 값을 이미 한 번 폐기했다. 14.5 재도입 ❌ */
  padding: 8px 2px; font-weight: 800; font-size: 14px; transition: color .15s;
}
/* 화살표 = icons :: arrowRight (lucide 단일 기하, 2026-08-22 사용자 확정 A안 — 구 인라인 13벌·표기 2종 정리).
   크기·굵기 소유자는 여기 — 프래그먼트는 치수를 안 들고 나온다(ADR 0374). stroke-width 는 구 인라인 값
   그대로 보존해 렌더 굵기가 바뀌지 않게 한다. 인라인 stroke-width 재도입 ❌ */
.nav-cta svg { width: 14px; height: 14px; stroke-width: 2.5; transition: transform .15s; }
/* 법률 페이지(terms·privacy) 한정 — 모바일에도 노출 (2026-08-07 UI 감사 사용자 확정 A안).
   기본 .nav-cta 는 모바일 display:none 인데 법률 2페이지는 sticky CTA fragment 미포함 + footer 에
   /login 링크가 없어, 「nav 한 곳만」으로 확정된 전환 동선(2026-08-07 B안)이 모바일에서 통째로 사라졌다.
   법률 nav 는 .nav-back-group 3항목이라 360px 에서도 폭 여유 확인. */
/* 히트박스 44px — 기본 .nav-cta padding 8px 을 12px 로 올리고 차액을 음수 margin 으로 상쇄 (2026-08-10 A안) */
.nav-cta--legal {
  display: inline-flex;
  padding-top: 12px; padding-bottom: 12px;
  margin-top: -4px; margin-bottom: -4px;
}
/* CTA 노출로 375px 에서 3항목(교차 링크·돌아가기·CTA)이 넘쳐 「돌아가기」가 2줄로 꺾임(실측 52px) —
   모바일은 교차 링크를 접는다. 약관↔방침 교차 이동은 landing-footer 링크가 이미 담당. */
@media (max-width: 768px) {
  .nav-back-group:has(.nav-cta--legal) .nav-back-link { display: none; }
}
@media (hover: hover) {
  .landing-page .nav-cta:hover { color: var(--landing-primary) !important; }
}
@media (hover: hover) {
  .landing-page .nav-cta:hover svg { transform: translateX(2px); }
}

.nav-menu { display: flex; align-items: center; gap: 24px; }
.landing-page .nav-link { display: none; font-size: 14px; font-weight: 600; color: var(--landing-gray-600); transition: color .15s; }
/* style.css 전역 .nav-link(admin/회원 네비) 의 padding·솔리드 배경이 새어 들어오는 것 차단 — 랜딩은 순수 Text Hierarchy */
@media (hover: hover) {
  .landing-page .nav-link:hover { background: transparent; color: var(--landing-gray-900); }
}
/* 스크롤 스파이: 현재 보고 있는 섹션 메뉴 강조 = emerald + 800 (Text Hierarchy, 채움·밑줄 없음) */
.landing-page .nav-link.active { background: transparent; color: var(--landing-primary-dark); font-weight: 800; }

/* ── Buttons ── */
/* Raised Hierarchy (admin 정합, 2026-06-23 — ADR 0034). primary=흰 면+emerald hairline+raised shadow+lift hover / secondary=흰 면+연민트 hairline(그림자 없음, 보조로 후퇴) */
.landing-btn-primary {
  /* 흰 면 위 14~15px CTA 글자 → primary-dark (3.77 → 5.48:1, ADR 0495 · 2026-08-26 사용자 확정 A안).
     ⚠ 면(hover 시 #ecfdf5)·테두리는 불변 — 바뀐 것은 «글자»뿐. --landing-primary 복귀 ❌ */
  background: #fff; color: var(--landing-primary-dark) !important;
  padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 800;
  border: 1px solid #a7f3d0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; min-height: 48px; width: 100%; justify-content: center;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 2px 8px -2px rgba(5,150,105,.18);
}
@media (hover: hover) {
  .landing-btn-primary:hover { background: #ecfdf5; color: var(--landing-primary-dark) !important; border-color: #6ee7b7; box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 8px 18px -4px rgba(5,150,105,.28); transform: translateY(-1px); }
}

/* 구 .landing-btn-secondary — hero CTA 가 primary 단독이 되며 사용처 0건 dead 삭제 (2026-08-07 UI 감사).
   스펙은 frontend-guide §11 랜딩 절에 남아 있어 필요 시 복원 가능 */


/* 홈 features 섹션 끝 — 주제별 "더 알아보기" 행 (래퍼 + 라벨) */
/* 정렬 = 좌측 단일 축 (2026-08-25 UI 감사). 구 `text-align: center` 는 라벨만 가운데인데 자식
   `.deep-list` 는 좌측이라 한 블록 안에서 축이 둘이었다 — ADR 0453 배경 절이 「데스크톱은 라벨만
   가운데·목록은 왼쪽이라 축까지 어긋났다」로 직접 지목했으나 그 결정은 크기만 다뤘고 트레이드오프에도
   미등재라 남아 있던 잔여다. 라벨이 12 → 17/19px 로 커지며 어긋남이 더 도드라졌다.
   모바일은 ADR 0435 가 이미 좌측 통일 — 이제 두 폭이 한 축.
   ⚠ `.deep-kakao` 도 2026-08-26 부터 «좌측» — 구 서술 「자기 선언이 center 를 따로 갖고 있어 영향 없음」은
      그 선언이 left 로 바뀌며 거짓이 됐다(아래 `.deep-kakao` 주석 참조).
   중앙 복귀 ❌ · 적용 = 클래스 전체(홈 「하나씩 둘러보기」 + features crosslinks `--xlink`, ADR 0453). */
.deep-textrow { margin-top: 52px; text-align: left; }
/* crosslinks(`--xlink`)는 «자기 섹션»이라 위 여백을 섹션 패딩이 단독으로 진다 — 52px 은 홈에서
   이 블록이 «장점 셋 아래 같은 섹션 안»에 붙는 자리라 정해진 값이고, 홈 보정
   `.landing-benefits .deep-textrow`(28px)는 홈 전용 스코프라 여기 안 닿았다.
   실측(390px): 위 85px ↔ 아래 −3px = 비대칭 88px, ADR 0435 섹션 간격 48px 계단 초과.
   선언 0 이던 `--xlink` 수식자에 첫 역할을 주는 것이라 홈·이벤트 목록은 한 글자도 안 바뀐다.
   제3의 간격값(12px 등) 신설 ❌ — 더 뗄 근거가 없다. (2026-08-28 UI 감사) */
.deep-textrow--xlink { margin-top: 0; }
/* 라벨 = «소제목» 체급 ([[0453]], 2026-08-25 사용자 확정 C안 · 시안 landing-deep-textrow-label-size).
   구 12px/800/slate-500 마이크로 라벨은 «머리말이 자기 자식보다 작은» 자리였다 — 바로 아래
   `.deep-row-label` 이 15px/800, 위 `.tour-meta b` 가 13px/800 이라 이 자리에서 가장 작은 글자가
   머리말 노릇을 했다. 이제 36(섹션 h2) → 19(이 소제목) → 15(목록 이름) 한 계단씩.
   ⚠ 2026-08-26 [[0469]] 로 «빌려 쓰던 짝»이 갈렸다 — `.ben-head h3` 는 항목 제목이라 15 로 내려갔고
   이 라벨만 «머리말» 로 17 / ≥769px 19 를 유지한다(800 · -0.02em · line-height 1.4 · slate-900).
   그 분리가 이 조항의 목적(「머리말이 자기 자식보다 작지 않다」)을 오히려 완성한다 — 다시 한 선언으로
   묶기 ❌ · 이 라벨을 15 로 내려 항목 제목과 합치기 ❌(머리말이 다시 사라진다).
   데스크톱 승격은 아래 min-width:769px 블록이 이 셀렉터 «단독»으로 소유한다.
   구 12px UPPERCASE 회색 라벨 재도입 ❌ · 랜딩 12px 라벨 롤(.03em 자간) 대상 아님. */
.deep-textrow-label { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--landing-gray-900); line-height: 1.4; margin-bottom: 14px; }

/* 핵심 기능 — 홈 하단 기능 요약 (헤어라인 에디토리얼 행, 라벨 고정폭 좌측 정렬) */
.deep-list { margin-top: 12px; text-align: left; }
/* 좌우 padding 0 = «선과 글자가 같은 자리» ([[0473]], 2026-08-26).
   구 4px 은 hairline 은 행 박스 끝(0)에 그려지는데 글자만 4px 안쪽에서 시작해, 좌우 0 인
   `.ben-item`(장점 셋)과 «같은 목록 어휘인데 시작선이 둘»이었다. 모바일은 [[0435]] 가
   같은 사유로 이미 `13px 0` 으로 통일했고(「선은 20px 인데 글자만 24px 라 4px 어긋나
   두 목록의 문법이 갈렸다」) 데스크톱만 남아 있던 자리다 — 4px 재도입 ❌.
   ⚠ `.landing-draw.armed` 가 대체선을 `::before { left:0; right:0 }` 로 그리므로
   행 padding 을 다시 넣으면 그 선과 글자가 또 어긋난다. */
.deep-row { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--landing-gray-200); }
.deep-row:last-child { border-bottom: 1px solid var(--landing-gray-200); }
/* hover 밀림 = transform (모션 가드레일 「transform/opacity/box-shadow 만」 — 구 padding-left 전환은 행마다 리플로우).
   화살표는 margin-left:auto + padding-right 불변이라 제자리 유지, 라벨·설명만 밀린다 (구 구현과 시각 동일). */
.deep-row-label, .deep-row-desc { transition: transform .15s ease; }
@media (hover: hover) {
  .deep-row:hover .deep-row-label,
  .deep-row:hover .deep-row-desc { transform: translateX(8px); }
}
/* min-width 96 = `.deep-list` 세 목록(홈 둘러보기 · 홈 이벤트 · features crosslinks) 단일 값
   (2026-08-26 사용자 확정 B안 · 시안 `landing-deep-row-label-width`).
   [[0435]] ⑤ 가 이미 「84 ↔ 96 → 96 단일」로 판정했지만, 같은 ADR 의 구현 규약(「base 수정 ❌ —
   되돌리기 = 모바일 블록 통삭제」) 때문에 수렴이 모바일 블록 «안에서만» 이뤄졌다. 그 규약의 대가 절이
   덮는 것은 «데스크톱↔모바일» 축 갈림(두 화면이 동시에 안 보인다)인데, 이 84↔96 은 **같은 데스크톱
   한 스크롤 안**에서 두 목록이 나란히 서며 설명 시작선이 102 ↔ 114 로 갈리던 자리라 그 근거가 안 선다.
   84 로 통일 ❌ — 「데이터 이전」(6자)이 넘쳐 행마다 시작선이 또 갈린다 ([[0435]] ⑤ 실측).
   ⚠️ **[[0435]] 의 「되돌리기 = 모바일 블록 통삭제」 경로는 이 변경으로 깨졌다** — 이제 그 블록만
   지워도 데스크톱이 84 로 안 돌아온다(여기 base 가 96 을 쥔다). 0435 를 되돌릴 일이 생기면
   이 선언도 함께 볼 것. */
/* line-height 1.4 = 항목 제목 롤 토큰 ([[0469]] 이 「15 · 800 · -0.02em · line-height 1.4」로 정한 값).
   구 상태는 이 선언만 line-height 를 안 가져 body 1.7 을 상속했다 — 같은 롤인 `.ben-head h3`·`.ben-price`
   가 1.4 라 한 롤 안에서 행간이 둘이었다. 1.7 상속으로 되돌리기 ❌ */
.deep-row-label { font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; color: var(--landing-gray-900); min-width: 96px; flex-shrink: 0; }
/* 설명 롤 = 14 / 400 / 1.7 / gray-600 «한 값» ([[0470]], 2026-08-26 사용자 확정 A안 · 시안 `landing-desc-scale`).
   구 13/500/1.55 는 형제 설명문(`.ben-desc` 14/400/1.7 · `.soon-strip span` 13.5/400/1.7)과
   크기·굵기·행간 «세 축 모두» 갈려 있어, 같은 역할 글자가 스크롤할 때마다 다른 무게로 읽혔다.
   960px 실측 최장 행 479px < 가용 756px 이라 14 로 올려도 줄바꿈 0.
   구 13/500/1.55 재도입 ❌ · 「행 설명만 한 단 작게」(문단 14 / 행 13 두 단) 재제안 ❌ */
.deep-row-desc { font-size: 14px; font-weight: 400; color: var(--landing-gray-600); line-height: 1.7; }
/* stroke-width 는 이식 구역 의무 — 랜딩은 style.css 를 안 읽어서, 여기 없으면 프래그먼트 기본값 2.25 로 조용히 갈린다 */
/* 이름은 arrow 지만 글리프는 셰브론(ADR 0379 수렴) — 화살표 복원 ❌ */
.deep-row-arrow { margin-left: auto; width: 16px; height: 16px; stroke-width: 2.5; color: var(--landing-gray-400); flex-shrink: 0; align-self: center; transition: color .15s ease, transform .15s ease; }
@media (hover: hover) {
  .deep-row:hover .deep-row-arrow { color: var(--landing-primary); transform: translateX(3px); }
}
/* 각주 롤 = 12 / 600 / gray-500 «한 값» ([[0470]]) — 짝은 `.pricing-cta-note`(시작 문턱 각주).
   구 12.5/400 은 랜딩에 남은 0.5px 값 둘 중 하나였고, 같은 「블록 아래 조용한 한 줄」인데
   요금 카드 각주와 크기·굵기가 둘 다 달랐다. 구 12.5/400 재도입 ❌ */
/* 좌측 정렬 — 이 각주는 «바로 위 4행(둘러보기 목록)»에 딸린 줄이라 그 목록과 시작선이 같아야 한다.
   [[0435]] 가 모바일에서 같은 사유로 이미 `text-align: left` 로 덮어 뒀고(「바로 위 4행이 좌측인데
   각주 하나가 가운데 떠 있었다」) 데스크톱만 center 로 남아 있던 자리다 — [[0473]] 의 시작선 누락과 같은 패턴.
   ⚠ features crosslinks(`--xlink`)엔 `.deep-kakao` 가 없어 이 변경의 영향 밖. center 재도입 ❌ */
.deep-kakao { margin-top: 18px; text-align: left; font-size: 12px; font-weight: 600; color: var(--landing-gray-500); }
/* 히트박스 44px — 세로 padding 15px + 동값 음수 마진 ([[0499]] 푸터 연락처와 «같은 부류»:
   무면 인라인 텍스트 링크 + 외부 앱으로 나가는 동선이라 오탭 대가가 크다).
   ⚠ 짝 = 위 「그 밖의 기능」 행까지 실측 21px — 확장분 15px 를 빼도 6px 남아 **간격 조정 불필요**.
   푸터 연락처는 12.4px 밖에 없어 gap 을 함께 벌려야 했던 것과 갈리는 지점이다(자리마다 실측할 것).
   인라인이라 줄 높이는 안 밀린다. 패딩 제거 ❌ */
.deep-kakao a { color: var(--landing-primary-dark); font-weight: 700; padding: 15px 0; margin: -15px 0; }
/* 모바일 숨김 폐지 — [[0416]] (2026-08-23 사용자 확정)
   구 규칙은 홈 「하나씩 둘러보기」를 ≤768px 에서 숨겼고, 그 근거가
   「홈은 이미 요금·이벤트·마감 CTA 까지 «긴 페이지»라」 였다.
   같은 날 랜딩 개편으로 홈이 4,007 → 2,539px (−37%) 이 되면서 그 전제가 사라졌고,
   기능 소개 교차 4행까지 함께 폐지돼 «폰 방문자는 벨트·그랄·관원 화면을 한 번도 못 보는»
   상태가 됐다 — 하위 페이지로 가는 길도 그 목록뿐이라 도달 경로가 0 이었다.
   「유입의 본체 = 인스타 DM = 폰」은 2026-08-22 결정이 --xlink 예외를 만들 때 든 근거와
   같은 사실이고, 이제 그 논리를 홈에도 적용한다.
   ⚠ 숨김 재도입 ❌ — 되돌리려면 「홈이 다시 길어졌다」가 먼저 참이어야 한다.
   (--xlink 는 원래부터 폰 노출이라 이 변경의 영향을 안 받는다) */

/* ── Hero Section ── */
/* 이 선언은 «데스크톱 base» — 모바일 값은 `@media (max-width:768px)` 블록이 소유한다(`padding: 26px 0 0`,
   [[0435]] ③ 간격 3단). 구 주석의 「모바일 하단 8px · hero→01 간격 23px」은 사실이 아니다 —
   「01」(기능 소개 교차 4행)은 [[0416]] 으로 폐지됐고 하단 8px 도 그 모바일 블록이 0 으로 덮는다. */
.landing-hero {
  padding: 16px 0 8px; position: relative; overflow: hidden;
}
.landing-hero .landing-container { text-align: center; position: relative; z-index: 1; }

.hero-text h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; color: var(--landing-gray-900); line-height: 1.18; margin-bottom: 12px; }
/* `.hero-ln` = «마스크 창» 원자 — 스코프 없음 (홈 히어로 h1 + 기능 소개 4페이지 h1 공용, [[0429]]).
   이름은 히어로에서 났지만 하는 일은 「제목을 창에 가두고 안에서 밀어 올린다」라 표면과 무관하다 —
   두 번째 원자(`.feat-ln` 등) 신설 ❌ (같은 목적 모션 = 공용 어휘 하나, [[0104]]). */
.hero-ln { display: block; overflow: hidden; }
/* 줄 안쪽 span = 마스크 안에서 «움직이는 것» — 색은 emerald 줄만 (구 `.hero-text h1 span` 무구분
   선택자는 마스크 래퍼까지 잡아 첫 줄도 emerald 로 물들였다). 재도입 ❌ */
.hero-ln > span { display: block; }
.hero-text h1 .hero-ln--em > span { color: var(--landing-primary); }
/* margin-bottom 0 — 모바일은 p 가 hero 마지막 가시 요소(CTA 숨김)라 아래 간격은 hero padding 이 담당.
   ⚠ 이 전제를 깨는 요소를 p 아래 추가 ❌ — 구 시작 문턱 각주가 그 자리에서 「버튼 없는 각주」가 돼
   요금 카드 CTA 아래로 이전됐다([[0425]]).
   데스크톱은 인접 .hero-cta margin-top(26px) 이 마진 상쇄로 동일 간격을 유지하므로 영향 없음 */
.hero-text p { font-size: 15px; font-weight: 500; color: var(--landing-gray-600); line-height: 1.8; margin-bottom: 0; }
/* 모바일 = 문장 하나가 줄 하나 — `@media (max-width:768px)` 의 `.hero-text p > span { display: block }`
   ([[0435]] ②). 구 주석의 「첫 문장만 노출」은 사실이 아니다 — 숨기던 `.hero-sub-extra`·
   `.feat-p-mobile-hide` 는 2026-08-24 죽은 CSS 스윕에서 삭제됐고 지금은 전 문장이 노출된다. */


/* Hero CTA — 모바일은 하단 sticky 바가 전담하므로 숨김(데스크톱에서만 노출) */
.hero-cta { display: none; flex-direction: column; gap: 10px; margin-top: 22px; }

/* ============================================
   랜딩 영상 — 유튜브 세로 숏츠 (2026-08-23 신설)
   ============================================
   데스크톱 = 셋이 나란히 / 모바일 = 넘기기(peek + 도트 + 이름·순번).
   ⚠ 가로(16:9) 영상을 섞으면 모바일 슬라이드 높이가 198px ↔ 427px 로 튄다 — 9:16 전제. */
.landing-videos { padding: 4px 0 10px; position: relative; z-index: 1; }

.vid-rail {
  display: flex; gap: 12px;
  /* 모바일 = 한 장씩 스냅 + 다음 장 가장자리가 살짝 걸린다(넘길 게 더 있다는 유일한 가시 신호) */
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* 가운데 정렬 peek — 좌우 여백을 트랙이 소유한다 */
  padding: 4px calc(50% - 131px) 6px;
}
.vid-rail::-webkit-scrollbar { display: none; }

.vid-card { flex: 0 0 262px; scroll-snap-align: center; }

.vid-thumb {
  display: block; position: relative; aspect-ratio: 9 / 16;
  border: 1px solid var(--landing-gray-200); border-radius: 14px; overflow: hidden;
  background: var(--landing-gray-100);
  box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .45);
  transition: transform .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--landing-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .5);
  transition: transform .25s var(--ease-spring);
}
.vid-play svg { width: 20px; height: 20px; margin-left: 2px; }

/* hover 반응 = lift + 재생 버튼 확대 (2026-08-23 사용자 확정 모션 B).
   ⚠ 3D 틸트 재도입 ❌ — 틸트와 lift 는 같은 transform 속성이라 겹칠 수 없고,
   9:16 세로 카드는 위아래로 기울면 왜곡이 커 보인다. */
/* 판정은 `(hover: hover)` 단독 — `(pointer: fine)` 병기 ❌ (터치스크린 노트북에서 마우스 hover 가 죽는다).
   frontend-guide §28 · 2026-08-23 UI 감사. 병기 재도입 ❌ */
@media (hover: hover) {
  .vid-thumb:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .5); }
  .vid-thumb:hover .vid-play { transform: translate(-50%, -50%) scale(1.12); }
}

/* 탭하면 그 자리에 주입되는 iframe — 썸네일과 같은 지오메트리 */
.vid-frame {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  border: 0; border-radius: 14px; background: #000;
}

/* 정렬 = 좌측([[0490]] ②안) — 구 `center` 는 카드 안 글자를 240px 폭 가운데 놓아, 카드 상자가 좌측 축으로
   와도 «글자»는 여전히 기준선을 벗어났다([[0480]] 이 잰 축은 «글자 x» 다). 형제 `.tour-meta`·모바일
   [[0435]] 좌측 축과도 한 벌. 뷰포트 분기 없음 — 한 값이라 양쪽이 갈릴 수 없다. `center` 복귀 ❌ */
.vid-meta { margin-top: 9px; text-align: left; }
.vid-meta b { display: block; font-size: 13px; font-weight: 800; color: var(--landing-gray-900); }
.vid-meta span { display: block; font-size: 12px; font-weight: 600; color: var(--landing-gray-500); margin-top: 2px; }

/* ── 넘기기 보조 표지 (모바일 전용 · 영상 2편 이상일 때만 JS 가 켠다) ── */
.vid-cap { text-align: center; margin-top: 12px; }
.vid-cap b { font-size: 13px; font-weight: 800; color: var(--landing-gray-900); }
.vid-cap span { font-size: 12px; font-weight: 700; color: var(--landing-gray-400); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* gap 18 = 히트영역 짝 규칙 — 아래 ::after 가 가로로 ±6px 나가므로 확장분 2배(12) + 잔여 6 분리.
   6px 로 되돌리면 이웃 도트 판정이 겹쳐 오탭이 난다 ❌ */
.vid-dots { display: flex; gap: 18px; justify-content: center; margin-top: 10px; }
/* 스와이프만 되면 키보드·스크린리더가 못 넘긴다 — 도트는 실제 버튼 */
.vid-dot {
  position: relative;
  width: 6px; height: 6px; border: 0; padding: 0; border-radius: 99px;
  background: var(--landing-gray-300); cursor: pointer;
  transition: width .25s var(--ease-out-quint), background .25s;
}
/* 44px 터치 하한 — 이 컨트롤은 min-width:769px 에서 display:none 인 «탭 전용»인데 판정이 6×6px 이었다.
   보이는 상자가 6px 라 「패딩 + 음수 마진」 idiom 대신 ::after 오버레이(선례 .mbr-dup-undo inset:-12px -8px, [[0317]]).
   세로만 44px(6 + 19×2) — 가로는 ±6px 만, 짝으로 .vid-dots gap 을 18 로 벌려 이웃과 안 겹친다.
   보이는 dot 6px·활성 18px·is-on 트랜지션 불변 = 시각 치수 변화 0 */
.vid-dot::after { content: ''; position: absolute; inset: -19px -6px; }
.vid-dot.is-on { width: 18px; background: var(--landing-gray-900); }

/* 12px 바닥 ([[0038]]) — 11.5px 신규 선언 ❌. 색은 slate-500 = §slate-400 승격 기준의
   「그 자리의 유일한 신호」 — 도트는 «넘길 게 있다»만 말하고, «무엇이 더 있는지»(관장님 폰·관원 폰)는
   이 줄에만 있다. 400 복귀 ❌ */
.vid-hint { font-size: 12px; font-weight: 700; color: var(--landing-gray-500); text-align: center; margin-top: 9px; }

/* 재생시간 배지 — 유튜브와 «같은 자리»(썸네일 우측 하단), 2026-08-25 사용자 확정 A안.
   보조 문구 뒤에 「· 0:58」로 붙이는 안은 240px 카드에서 줄이 접혀 세 카드의 글줄 수가 어긋난다.
   12px 바닥([[0038]]) — 11px 로 줄이기 ❌. 먹판은 썸네일 밝기를 모르므로 대비 확보용. */
.vid-dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(15, 23, 42, .72); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.45;
  border-radius: 6px; padding: 0 6px;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   기능 한 바퀴 — 가로(16:9) 한 편 (2026-08-25 신설)
   ============================================
   「하나씩 둘러보기」 바로 위 «단독 블록». 위 세로 레일과 같은 어휘(.vid-thumb·.vid-play·.vid-dur)를
   그대로 쓰고 화면비·폭만 여기서 덮는다 — 가로 전용 카드 어휘 신설 ❌.
   ⚠ 레일에 4번째 카드로 합치기 ❌ — [[0416]] 실측으로 모바일 슬라이드 높이가 198 ↔ 427px 요동한다.
   ⚠ 폭 제한 필수 — 컨테이너 전폭(920px)이면 920×517px 짜리 검은 면이 페이지 한복판에 생긴다. */
/* 위 여백 = 아래 `.deep-textrow`(52px)와 «같은 값». 이 블록은 [[0442]] ① 로 아래 「하나씩 둘러보기」의
   머리말인데, 위가 좁으면(구 34px) 근접성이 위쪽 `.soon-strip` 쪽으로 기울어 그 카드 소속으로 읽힌다.
   모바일도 같은 규칙(28px = .deep-textrow 모바일값). 34px 로 되돌리기 ❌ */
.landing-tour { margin-top: 52px; }
/* 썸네일(탭 전)과 주입 iframe(탭 후)은 «같은 상자» — 한쪽만 고치면 교체 순간 레이아웃이 튄다.
   그래서 두 값이 갈릴 수 없게 «한 선언»으로 묶는다. 규칙을 다시 쪼개기 ❌
   ⚠ `margin: 0` = 홈 좌측 기준선([[0490]]) — 구 `0 auto` 는 720px 상자를 896 컨테이너 가운데 놓아
   x 360 으로 88px 들여보냈다. `auto` 복귀 ❌. 모바일은 폭이 720 미만이라 값 변화 0. */
.tour-thumb,
.tour-frame { aspect-ratio: 16 / 9; max-width: 720px; margin: 0; }
/* 「한 편 전제」가 List 라 타입으로 안 막힌다 — 둘 이상 들어와도 16:9 검은 면이 맞붙지 않게 하는 안전망.
   1편일 때는 매칭 0이라 렌더 변화 없음 */
.landing-tour .tour-item + .tour-item { margin-top: 20px; }
/* 세로 카드(.vid-meta)는 제목·보조가 2줄로 쌓이지만, 여기는 폭이 720px 라 «한 줄»이 자연스럽다.
   ⚠ 정렬 = 좌측([[0490]]) — 구 `center` 는 위 썸네일이 가운데였을 때의 짝이었다. 썸네일이 좌측 축으로
   오면서 base 가 좌측이 됐고, 그 결과 모바일 블록의 `text-align: left`([[0435]])는 «중복»이 되어 삭제.
   `center` 복귀 ❌ — 되돌리면 썸네일과 메타의 축이 갈린다(둘은 한 벌). */
.tour-meta { margin-top: 9px; text-align: left; max-width: 720px; }
.tour-meta b { font-size: 13px; font-weight: 800; color: var(--landing-gray-900); }
.tour-meta span { font-size: 12px; font-weight: 600; color: var(--landing-gray-500); margin-left: 6px; }

/* ============================================
   장점 셋 — 카드·아이콘·번호 없는 텍스트 배치
   ============================================
   frontend-guide §0 「동일 카드 그리드 반복 ❌」·「번호 마커 01/02/03 남발 ❌」.
   나누는 것은 여백·굵기·hairline 뿐 — 카드/아이콘/번호 재도입 ❌ */
.ben-list { margin-top: 22px; }
.ben-item { padding: 18px 0; border-bottom: 1px solid var(--landing-gray-200); }
.ben-item:first-child { border-top: 1px solid var(--landing-gray-200); }
/* 마지막 장점 행의 «닫는 선» 은 바로 아래 `.soon-strip` 이 자기 `border-top` 으로 대신 진다 ([[0480]]).
   ⚠ 짝 규칙 — `.landing-draw.armed` 가 실제 border 를 transparent 로 죽이고 `:last-child::after` 로
   «그려지는 선» 을 세우므로 **둘 다** 꺼야 한다. 하나만 끄면 JS 생존 여부에 따라 선이 겹치거나 남는다.
   (모바일은 [[0435]] ④ 가 같은 두 줄을 이미 끄고 있다 — 이 규칙은 그 처리를 데스크톱으로 넓힌 것) */
.ben-list .ben-item:last-child { border-bottom: none; }
.ben-list.landing-draw.armed > *:last-child::after { content: none; }
/* 항목 제목 = «목록 항목 제목» 롤 15px 단일 ([[0469]], 2026-08-26 사용자 확정 A안 · 시안 `landing-title-scale`).
   구 17 / ≥769px 19 는 홈에서 «가장 큰 항목 제목»이라, 같은 성격 목록인 `.deep-row-label`(15)·
   `.vid-meta b`(13) 과 나란히 두면 한 페이지에 항목 제목이 3벌이었다. 게다가 그룹 머리말
   `.deep-textrow-label` 과 «같은 19» 라 머리말이 머리말로 안 읽혔다.
   → 데스크톱 36(섹션) → 19(머리말) → 15(항목 제목) → 14(설명) 한 계단씩.
   ⚠ 반응형 승격 없음 — 모바일·데스크톱 모두 15 (`.deep-row-label` 이 원래부터 전 뷰포트 15).
   구 17/19 재도입 ❌ · `.deep-textrow-label` 과 다시 한 선언으로 묶기 ❌([[0453]] 개정). */
.ben-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--landing-gray-900); line-height: 1.4; }
.ben-desc { font-size: 14px; color: var(--landing-gray-600); line-height: 1.7; margin-top: 7px; }

/* 가격 슬롯 = 「제목(한정 조건) + 금액」 두 줄, 글자 크기 1종 — 2026-08-24 사용자 확정
   (시안 landing-ben-price-final). 금액은 .ben-head h3 와 «완전히 같은 토큰»(2026-08-26 [[0469]] 로 둘 다 15)이고 「월」·「원」도 상속만 한다
   — 구 28px 금액 + 15px/700/gray-600 「월·원」 조판은 한 줄 안에서 크기가 3번 바뀌어(15→28→15)
   제목이 같은 슬롯에 들어온 뒤 형제 두 항목과 스캔 라인이 어긋났다. 크기·색 재분리 ❌.
   위 여백 8px = .ben-desc margin-top 7px 과 같은 리듬 (제목과 금액이 한 덩어리로 붙어 보이지 않게 하는 최소값).
   구 .ben-price-cond(12.5px 조건줄)는 문구가 h3 로 올라가 사용처 0 → 폐지. 재도입 ❌.
   훅 = 「한정」이라는 조건이 맡는다. 배지·정가 취소선·할인 리본은 여전히 ❌(아래 요금 섹션은 「계산기」) */
.ben-price {
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4;
  color: var(--landing-gray-900); margin-top: 8px; font-variant-numeric: tabular-nums;
}
.ben-price::before { content: "월 "; }
.ben-price small { font-size: inherit; font-weight: inherit; color: inherit; }

/* ── 곧 나올 기능 한 줄 (장점 셋 바로 아래) = «무면 hairline 행» ──
   [[0480]] (2026-08-26 사용자 확정 ②안 · 시안 `landing-soon-strip-rail`).
   구 「흰 면 + hairline 카드 + 안쪽 rail 32」는 홈에서 **좌측 시작선을 벗어나는 유일한 글자**였다
   — 카드 padding 탓에 라벨이 x 298, 나머지 전 블록은 265. [[0473]]·[[0478]] 로 축을 하나로 모은 뒤
   남은 마지막 예외라 면을 걷고 장점 목록에 이어 붙는 행으로 내렸다.
   ⚠ **면이 지던 「이건 예고지 기능이 아니다」 신호를 이제 emerald 라벨 하나가 진다** — 라벨 색을
   중립으로 내리면 그 순간 「4번째 장점」이 된다(그 위험은 확정 시 인지된 대가로 수용).
   ⚠ **자기 top 선을 자기가 소유한다** — 짝으로 `.ben-item:last-child` 의 닫는 선을 꺼야 겹치지 않는다(아래).
   아이콘·배지 ❌ (§아이콘 「상태 알림 surface 픽토 ❌」). 카드 면·radius·안쪽 rail 32 재도입 ❌ */
.soon-strip {
  margin-top: 0;
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--landing-gray-200);
  padding: 14px 0;
}
.soon-strip b {
  flex: none;
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em; /* 랜딩 마이크로 라벨 롤 = .03em 통일 */
  color: var(--landing-primary-dark);
}
/* 설명 롤 14 ([[0470]]) — 구 13.5 는 랜딩에 남은 0.5px 값 둘 중 하나였다. 재도입 ❌ */
.soon-strip span {
  flex: 1; min-width: 220px;
  font-size: 14px; color: var(--landing-gray-600); line-height: 1.7;
}

/* ============================================
   가짜 제품 화면 (실제 어드민 토큰 미러)
   ============================================ */
.shot { background: #fff; border: 1px solid var(--landing-gray-200); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px -24px rgba(15,23,42,.3); }
.shot-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid var(--landing-gray-100); }
.shot-body { padding: 16px; }
/* 목업 «안»의 블록 라벨. 남은 사용처 = 「결제 방법」 2곳(둘 다 `--tight`) — [[0474]] 이
   탭과 낱말이 겹치던 2곳(「이용권 4종」·「이번 달 출석」)을 걷었다. 새 목업에 무조건 달지 ❌:
   판정은 «탭이 이미 그 말을 하나» 하나뿐이다(2026-08-20 UI 감사 규칙, 템플릿 주석 4곳에 박제). */
.shot-h { font-size: 12px; font-weight: 800; color: var(--landing-gray-900); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; }
/* 결제수단 목업처럼 바로 아래 카드가 붙는 자리 (구 인라인 style="margin:0 0 10px" 이관, 2026-07-28 UI 감사) */
.shot-h--tight { margin-bottom: 10px; }

/* 회원 행: 이름 위 + 띠 라인(belt 바 + 레벨명·그랄) 아래 + 우측 이용권.
   띠는 실제 belt 컴포넌트(style.css §.belt) 재사용 — 가짜 컬러 알약 폐기.
   실제 모바일 회원 카드(mb-belt-line) 패턴과 동일. */
.mrow { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #eaecef; border-radius: 10px; margin-bottom: 8px; background: #fff; }
.mrow:last-child { margin-bottom: 0; }
/* style.css .belt 의 tape 패딩이 .landing-page * 리셋(padding:0)에 먹히지 않도록 복구 */
.landing-page .belt__tape { padding: 0 2px; }
.m-belt-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.m-belt-name { font-size: 12px; font-weight: 700; color: var(--landing-gray-700); white-space: nowrap; }
.m-belt-grau { font-size: 12px; font-weight: 500; color: var(--landing-gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 사범 행 보조줄 (more.html) — 벨트가 아니라 계정 정보(로그인 채널 · 합류일). 실제 admin/admins 미러. */
.m-meta { font-size: 12px; font-weight: 500; color: var(--landing-gray-500); }
/* 구 .mmeta·.fm-*(구 빠른시작 폼 목업)·.af-input--select/.af-chev — templates·JS 사용처 0건 dead 삭제 (2026-08-04 UI 감사) */

/* 승급 대상 조회 (hero shot) — 조건 칩 + 진급 라인(현재 띠 ─→ 진급 후 띠).
   목업은 데스크톱 전용 — 모바일은 hero-shot 통째 숨김(features 목업 전부 숨김 정책과 동일, 페이지 길이 축소) */


/* 조건 칩 = 제품 활성 필터 토큰(hairline pill + emerald) 어휘 미러 (2026-07-05, 구 slate-900 솔리드 폐지 — sf-chip--on 과 통일) */

/* .pc-chip svg — 체크 아이콘 폐지 (2026-07-30 UI 감사, §아이콘 라벨 중복): 제품 필터 칩 미러는 라벨+hairline 만 */
/* 벨트 필터 칩 — 임계값 칩(체크)과 구분되는 카테고리 필터. 좌측 원형 dot = 제품 벨트 필터(.level-dot 10px)
   미러 (2026-08-07 사용자 확정 A안 — 구 15×5px 미니 막대는 제품에 없는 제3 어휘였다. BJJ 벨트 컬러 예외) */


/* 후보 행: 이름+스탯 헤더 위 · 현재 띠 ─→ 진급 후 띠 진행 라인 아래. 박스 대신 hairline 구분선 */


/* 빠른 시작 폼 목업 (feat-shot · 01 쉽게 시작) */

/* 관원 화면 목업 (member-app · 01 내 이용권) — 벨트 정체성 헤더(실제 .belt 컴포넌트 재사용)
   + 이용권 스트립 + 일시정지 보조.
   스트립 = 랜딩 공용 `.lf-passbar` — 카드 3층 (2026-08-09 제품 카드 승격 미러, 랜딩 3곳 모두 같은 어휘).
   구 게이지 변형(`--gauge` + `.lf-pbg-top/-type/-bar`)은 2026-08-02 무면 전환 때 소멸 — 재도입 ❌ */
/* 한 줄 인라인 락업 — `.lf-idcard` 와 같은 어휘 (2026-08-02 A안, 제품 `.md-id` 미러. 구 belt xl 2줄 스택 supersede) */
.ma-id { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 9px; margin-bottom: 10px; min-width: 0; } /* 10px — 아래가 테두리 있는 카드(.lf-passbar)라 구 무면 시절 4px 는 붙어 보임 (2026-08-09 카드 승격) */
.ma-id-text { display: contents; } /* display:contents 는 박스를 안 만들어 min-width 무효 — 축소 허용은 부모 .ma-id 소유 */
.ma-name { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--landing-gray-900); line-height: 1.25; }
.ma-grade { font-size: 12.5px; font-weight: 600; color: var(--landing-gray-500); }
/* 일시정지 = 풋터 slate 텍스트 링크 (제품 2026-08-09 A-1안 미러, ADR 0112 — 구 .ma-pause 전폭 행 supersede).
   구매 CTA(.lf-pb-btn)와 동체급 12.5/800, 색만 slate 한 단계 뒤 — 제품 .md-pb-pause 와 같은 문법 */
.lf-pb-actions { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lf-pb-pause { display: inline-flex; align-items: center; gap: 4px; color: var(--landing-gray-600); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
/* 아이콘 = icons :: pause — 크기 소유자는 여기 (프래그먼트는 치수를 안 들고 나온다, ADR 0374).
   제품 style.css `.md-pb-pause svg` 와 미러 — 한쪽만 고치지 ❌ */
.lf-pb-pause svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* 만료일 일괄 연장 목업 (more.html · 01) — Hairline 행 + 만료일 Before→After.
   emerald 는 신호 위치(+N일·이후 날짜·화살표)에만 — 배경 칠 없음(carded surface color rail 금지). */
.ext-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ext-title { font-size: 13px; font-weight: 800; color: var(--landing-gray-900); letter-spacing: -.01em; }
.ext-tag { font-size: 12px; font-weight: 800; color: var(--landing-primary-dark); font-variant-numeric: tabular-nums; }
.ext-sub { font-size: 12px; font-weight: 600; color: var(--landing-gray-500); margin-bottom: 8px; }
.ext-sub b { color: var(--landing-gray-900); font-weight: 800; }
.ext-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid #eef1f4; }
.ext-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ext-name { font-size: 13px; font-weight: 700; color: var(--landing-gray-900); }
.ext-dates { margin-left: auto; display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.ext-from { font-size: 12px; font-weight: 600; color: var(--landing-gray-500); } /* 제품 대응 토큰 .data-value-prev(slate-500) 정합 (2026-08-04 UI 감사) */
.ext-arrow { flex: 0 0 auto; color: var(--landing-primary); display: inline-flex; }
.ext-arrow svg { width: 13px; height: 13px; stroke-width: 2.4; display: block; }
.ext-to { font-size: 13px; font-weight: 800; color: var(--landing-primary-dark); }

/* 도장 개설 입력 폼 목업 (feat-shot · 01 쉽게 시작) — 입력 중 화면 연출 */





/* 결과 캡션 — 「이미 끝난 일」은 CTA 옷을 입지 않는다 (2026-08-19 UI 감사).
   `.af-btn` 은 흰 면 + emerald 테두리 + 그림자 + hover 부상까지 갖춘 **누를 수 있는 것**의 어휘라,
   「24명 등록 완료」·「결제 완료」 같은 결과가 그 옷을 입으면 목업 안에서 버튼으로 읽힌다
   (홈 `.af-btn` 「바로 시작하기 →」가 같은 클래스의 정상 용법이라 한 토큰이 두 뜻으로 갈렸다).
   문구·아이콘은 그대로 두고 면·테두리·그림자·hover 만 걷어낸다. `.af-btn` 재부여 ❌ */
.af-result { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 12.5px; font-weight: 700; color: var(--landing-primary); }
.af-result svg { width: 14px; height: 14px; }
/* 셀렉트형 필드(띠·이용권) — belt/text/chevron 정렬 (member-management 등록 폼) */

/* 검색 + 필터 칩 목업 (member-management 조회 shot · 등록 방법 탭 공용) */
.sf-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--landing-gray-200); border-radius: 10px; padding: 10px 13px; height: 42px; margin-bottom: 10px; }
.sf-search svg { width: 15px; height: 15px; stroke: var(--landing-gray-400); flex: 0 0 auto; }
.sf-search span { font-size: 13px; font-weight: 600; color: var(--landing-gray-400); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
/* 목업 하단 칩 행 — 위 여백만 (구 인라인 style="margin:12px 0 0" 이관, 2026-07-28 UI 감사) */
.sf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 50px; white-space: nowrap; }
/* off 칩 dot 제거 (2026-08-13 UI 감사) — 제품 .filter-chip 은 활성·비활성 모두 무 dot 인데
   비활성에만 dot 이 붙으면 「선택됨」 신호로 뒤집혀 읽힌다 (.pc-chip-belt 「제3 어휘」 판정과 같은 근거) */
.sf-chip--off { color: var(--landing-gray-600); background: #fff; border: 1px solid var(--landing-gray-200); }
.sf-chip--on { color: var(--landing-primary-dark); background: #fff; border: 1px solid #a7f3d0; font-weight: 800; }
.sf-chip--on .sf-x { opacity: .7; font-weight: 800; }
.sf-result { font-size: 12px; font-weight: 700; color: var(--landing-gray-500); margin-bottom: 10px; }
.sf-result b { color: var(--landing-gray-900); font-weight: 800; }
.xls-file { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--landing-gray-200); border-radius: 10px; padding: 11px 13px; margin-bottom: 11px; }
.xls-ic { width: 18px; height: 18px; stroke-width: 2; color: var(--landing-primary); flex: 0 0 auto; }
.xls-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--landing-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 카운트 pill = 흰 bg + hairline (채움 폐지 2026-06-26 어휘 — 구 참조원 md-card-count 는 2026-08-09 폐지, 이 pill 은 목업 자체 카운트라 유지) */
.xls-count { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--landing-primary-dark); background: #fff; border: 1px solid var(--landing-gray-200); padding: 3px 9px; border-radius: 50px; font-variant-numeric: tabular-nums; }

/* 구 .belt-row-main (승급/벨트 목업) — templates·JS 사용처 0건 dead 삭제 (2026-08-07 UI 감사) */

/* 관원 내려받기 목업 (feat-shot · 03 부담 없이) */
.lst-tool { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lst-count { font-size: 12px; font-weight: 600; color: var(--landing-gray-500); }
.lst-count b { font-weight: 800; color: var(--landing-gray-900); font-variant-numeric: tabular-nums; }
.lst-dls { display: flex; gap: 6px; }
.dl-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--landing-gray-700); background: #fff; border: 1px solid var(--landing-gray-200); padding: 6px 11px; border-radius: 8px; }
.dl-mini svg { width: 13px; height: 13px; stroke: var(--landing-primary); flex: 0 0 auto; }
.m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mname { font-size: 13px; font-weight: 700; color: var(--landing-gray-900); }
.passb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--landing-gray-700); background: #fff; border: 1px solid var(--landing-gray-200); padding: 4px 10px; border-radius: 50px; white-space: nowrap; }
.passb::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--landing-primary); flex: 0 0 auto; }
/* 상태 스탯(승급/출석) = 순수 텍스트 미러 (2026-08-09 UI 감사 사용자 확정 A안 — 구 .passb-c2 pill 폐지, 재도입 ❌) */
.m-stat { font-size: 12px; font-weight: 800; color: var(--landing-primary-dark); white-space: nowrap; }
/* 사범 관리 목업 「제거」 — 실화면(admin/admins) btn-danger btn-sm raised 미러 (2026-08-07 UI 감사 A안: 역할 pill → 제품 미러) */
/* 목업 안 파괴 액션 글자 = 흰 면 위 12px red → 실물 규칙과 같은 한 단계 (3.76 → 4.83:1, ADR 0495).
   면(#fff)·테두리(#fecaca)·그림자는 불변 — 바뀐 건 «글자»뿐. #ef4444 복귀 ❌ */
.m-remove { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #dc2626; background: #fff; border: 1px solid #fecaca; border-radius: 8px; padding: 4px 11px; box-shadow: 0 1px 2px rgba(239, 68, 68, .08); white-space: nowrap; }
/* 이용권 타입 pill 은 제품 dot 램프 미러 (landing.css :root --pass-dot-* — style.css 원본의 이식 사본) — hex 하드코딩 ❌.
   .passb = 이용권 타입 전용 (역할 pill 2026-08-07 · 스탯 pill 2026-08-09 순차 폐지 — 상태 신호는 .m-stat 순수 텍스트). */
.passb--period::before { background: var(--pass-dot-period); }
.passb--count::before { background: var(--pass-dot-count); }
.lst-foot { text-align: center; font-size: 12px; font-weight: 600; color: var(--landing-gray-500); margin-top: 11px; }


/* ── feat 02: 띠 체계 세로 사다리 (그리드로 띠 칸 고정 — 전부 같은 너비·정렬선) ── */


/* 결제수단 칩 (띠 사다리 옆) */


/* 카드 픽토 = icons :: creditCard 프래그먼트 (2026-08-21 UI 감사 — 인라인 사본 흡수). 굵기는 CSS 소유 —
   12px 렌더에서 기본 2 는 흐릿해 2.4 유지 (ADR 0378 순서 규약: CSS 먼저 → 프래그먼트 치환) */


/* .pm-logo-card 텍스트 토큰 삭제 — 마크가 픽토 SVG 로 전환 (2026-08-17 UI 감사 A안, 구 「카드」 2글자 타일 넘침) */


/* 「곧 출시」 표기 — 앱 `.pay-status-banner-badge`(admin/settings/payment.html) 어휘 승계
   (2026-08-23 사용자 확정 B1→F1, 시안 coming-soon-badge-style·chip-wrap-fix).

   ① `.soon-pill` = 인라인 Hairline Pill — 치수·색·구조 전부 앱과 동일(12px/dot 6px).
      §12px 바닥이 축소를 막고, 같은 뜻 배지가 두 치수로 갈릴 이유도 없다. 11px 축소 ❌ · 색 채운 배지 ❌
      쓰는 곳 = 폭이 넉넉한 `feat-list--labeled` 설명 끝 (features/member-app).

   ② `.pm-soon-head` = **그룹 소제목** — 홈 결제수단 칸 전용. 이 칸은 벨트 사다리와 반반이라
      **칩 실폭이 175px 고정**이라서 인라인 pill 을 넣으면 「신용·체크카드」가 두 줄로 접힌다(실측 59px,
      형제 칩 37px). 칩에서 배지를 빼고 소제목으로 묶으면 높이가 37px 로 균일해지고 「곧 출시」도
      3회→1회가 된다. dot 은 pill 의 것을 그대로 승계해 어휘를 유지. 칩 인라인 pill 복원 ❌ */
/* 자간 없음 = 랜딩 800 pill 어휘(`.ext-tag`·`.pay-type`·`.pay-brand`·`.dl-mini`·`.xls-count` 전부 무자간).
   구 .02em 은 6종 중 이 하나뿐이었다 — 재도입 ❌ */
.soon-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--landing-gray-600); border: 1px solid var(--landing-gray-200); white-space: nowrap; }
.soon-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--landing-gray-400); flex: 0 0 auto; }


/* ── feat 03: 구 `.mini*` 6클래스 폐지 (2026-08-12 사용자 확정 A안, 시안 landing-download-mockup) ──
   홈 이 행에서만 쓰던 고아 세트였고, 같은 「관원 내려받기」 목업을 more 페이지는 `.shot` + `.lst-*`
   공용 어휘로 그려 두 벌이 공존했다. 홈 03 을 그 공용 어휘로 승격하며 삭제 — 재도입 ❌ */

/* ── `.section-eyebrow` 폐지 ([[0468]], 2026-08-26 사용자 확정) ──
   랜딩 섹션 머리 어휘 = «h2(또는 h1) + sec-rule» 두 겹뿐. 홈 「소개」·features 4페이지
   (관원 관리·이용권·관원 화면·그 밖의 기능) 라벨을 함께 걷어내며 토큰까지 삭제했다.
   재도입 ❌ — 되살리려면 새 결정으로 연다. */

/* ============================================
   기능 소개 (alternating rows)
   ============================================ */
.landing-features .section-header { text-align: center; margin-bottom: 12px; }
/* 홈 섹션 헤더 정렬 = «제목은 자기 내용이 있는 자리에 선다» ([[0478]], 2026-08-26 사용자 확정 ③안 ·
   시안 `landing-align-axis`). 구 「셋 다 중앙」은 데스크톱에서 제목(중앙) ↔ 본문(좌측) 축이 다섯 번
   교차하게 했고, 모바일은 [[0435]] 로 이미 전부 좌측이라 «같은 페이지가 폭에 따라 다른 조판»이었다.
   → 전폭 좌측 목록을 거느린 **소개·이벤트는 좌측**, 540px 가운데 카드를 거느린 **요금은 중앙**.
   교차가 «블록이 실제로 옮겨갈 때»에만 일어나 그 교차 자체가 경계 신호가 된다.
   ⚠ `.landing-features .section-header`(features 4페이지)는 대상 아님 — 그 페이지는 h1 hero 라 축이 다르다.
   구 「셋 다 중앙」 재도입 ❌ · 요금까지 좌측으로 「통일」 ❌(제목 좌측 + 카드 중앙이라 새 어긋남이 생긴다 — 미채택 ②안).
   세로 여백은 .ben-list margin-top 이 소유 */
.landing-benefits .section-header { text-align: left; }

/* 섹션 헤딩 톤 = 한 벌 (2026-08-12 UI 감사) — 섹션별로 소유하는 건 margin 뿐.
   구 3벌 선언은 자간이 features 에만 있어 홈을 스크롤하면 같은 24px 제목이 섹션마다
   다르게 조판됐다(타이트 ↔ 느슨). 데스크톱 36px 승격도 아래 한 곳으로 합침 — 재분리 ❌ */
.landing-features .section-header :is(h1, h2),
.landing-benefits .section-header h2,
.landing-events .section-header h2,
.pricing-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--landing-gray-900);
  letter-spacing: -.025em;
}

.feat-row { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; margin-top: 32px; }
/* grid 아이템이 고정폭 자식(.lf-phone 330px 등) min-content 에 끌려가 1fr 트랙이 넓어지는 것 차단 — 좁은 폰 가로 스크롤 방지 */
.feat-row > * { min-width: 0; }
.feat-text h2, .feat-text h3 { font-size: 21px; font-weight: 800; color: var(--landing-gray-900); letter-spacing: -.02em; }
/* 구 .feat-no 번호 마커 폐지 (2026-08-03 UI 감사) — §0 「번호는 순서가 실제 정보일 때만」, 행 구분은 교차 레이아웃 담당.
   마커를 나란히 놓던 flex/gap/baseline + 텍스트 <span> 껍데기도 함께 제거 (2026-08-07 UI 감사 — 자식 하나뿐이라 무의미) */
.feat-text p { font-size: 14px; color: var(--landing-gray-600); margin-top: 10px; line-height: 1.7; }
.feat-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.feat-list li { font-size: 14px; color: var(--landing-gray-700); font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.feat-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--landing-primary); margin-top: 8px; flex: 0 0 auto; }
/* 라벨(방법 이름) + 설명 변형 */
.feat-list--labeled li { align-items: baseline; gap: 12px; }
.feat-list--labeled li::before { margin-top: 9px; }
.feat-list--labeled .fl-label { font-size: 15px; font-weight: 800; color: var(--landing-gray-900); letter-spacing: -.02em; line-height: 1.4; min-width: 96px; flex: 0 0 auto; }
.feat-list--labeled .fl-desc { font-weight: 400; color: var(--landing-gray-600); line-height: 1.7; }
@media (max-width: 768px) {
  /* ⚠️ 폐지 주석 구역 (2026-08-25 UI 감사) — 아래 4묶음은 «지금은 규칙이 0개»다.
     홈 기능 소개 교차 4행이 ADR 0416 로 폐지되며 규칙만 사라지고 서술이 남아, 없는 동작을 설명하는
     주석이 됐다(`:not(.landing-features--home)` 를 같은 함정으로 지웠다 원복한 전례가 있어 삭제 ❌ 존치).
     재도입하려면 「홈이 다시 교차 행을 갖는가」가 먼저 참이어야 한다.

     ① 구 「모바일에서 산문 숨김」(`.feat-p-mobile-hide`) = 폐지, 규칙 없음.
        현행은 오히려 «노출»이다 — 아래 `.feat-text p { order: 2 }`.
     ② 구 「모바일 홈 섹션 머리 sr-only 기법으로 대체」 = 규칙 없음.
        인용된 hero 카피(「꼭 필요한 것만 담았어요」)도 함께 소멸했다.
     ③ 구 「첫 feat-row 상단 여백 제거」·「홈 features 모바일 order(제목→그림→산문→불릿)」 = 규칙 없음.
     ④ 구 「모바일 .feat-shot 3개 숨김」 = 규칙 없음(대상이 홈에서 사라졌다).

     ⬇︎ 여기서부터는 «살아 있는» 규칙 — features 4페이지 전용. */

  /* features 상세 페이지 모바일: 제목 → 그림 → 불릿 (홈 리듬과 동일, 단 목업은 노출 유지).
     불릿 위에 목업이 먼저 보이는 편이 매력적 — feat-text 를 display:contents 로 풀어
     자식(h2·p·ul)이 feat-row flex 에 직접 참여, feat-shot 을 그 사이 order 로 끼움.
     ⚠️ `:not(.landing-features--home)` = 「항상 참」 조건이라 사용처 0 인 클래스가 들어 있어도 **살아 있는 규칙**이다
     (2026-08-24 스윕에서 지웠다가 모바일 순서가 깨져 원복). */
  .landing-features:not(.landing-features--home) .feat-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .landing-features:not(.landing-features--home) .feat-text { display: contents; }
  .landing-features:not(.landing-features--home) .feat-text h2,
  .landing-features:not(.landing-features--home) .feat-text h3 { order: 1; }
  .landing-features:not(.landing-features--home) .feat-text p { order: 2; margin-top: 8px; }
  .landing-features:not(.landing-features--home) .feat-shot { order: 3; }
  .landing-features:not(.landing-features--home) .feat-text .feat-list { order: 4; margin-top: 12px; }
}

/* ── 입체 프레임 ── */
.feat-text { position: relative; }

/* ── 입체 프레임: 글로우 + 겹친 카드 ── */
.feat-shot { position: relative; }
.feat-glow {
  position: absolute; inset: -22px -14px; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 58% at 60% 38%, rgba(5,150,105,.15), transparent 70%);
  filter: blur(6px);
}
.feat-peek {
  position: absolute; z-index: 1; top: 16px; left: 14px; right: -14px; bottom: -14px;
  background: #fff; border: 1px solid var(--landing-gray-200); border-radius: 14px; opacity: .5;
  pointer-events: none;
}
.feat-row-reverse .feat-peek { left: -14px; right: 14px; }
.feat-shot .shot { position: relative; z-index: 2; }

/* ── 윈도우 크롬: shot-bar 를 앱 창처럼 (3 dots + 컨텍스트 칩) ── */
.shot-bar { justify-content: flex-start; }
.shot-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.shot-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--landing-gray-300); }
.shot-tab {
  flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--landing-gray-500);
  background: #fff; border: 1px solid var(--landing-gray-200); border-radius: 50px;
  padding: 4px 12px; max-width: 240px; margin: 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 회원 PWA 폰 목업 (member/dashboard.html md-* 어휘 양식화) ── */

/* ⚠️ 폐지 주석 (2026-08-25 UI 감사) — 아래 신원 블록(`.lf-idcard`·`.lf-id-*`) 규칙은 «0개»다.
   홈 폰 프레임 목업이 ADR 0416 로 폐지되며 2026-08-24 스윕이 규칙만 걷고 서술을 남겼다.
   지금 살아 있는 신원 락업은 features 4페이지가 쓰는 `.ma-id` 쪽(위 1166행)이다 —
   그 어휘를 고칠 때 이 문단을 근거로 삼지 ❌ (여기 적힌 값은 이미 화면에 없다).
   삭제 ❌ 존치 = 재도입 시 ADR 0112 제품 미러 의무의 근거가 이 문단이다. */


/* 이용권 hero = 카드 3층 (2026-08-09 제품 `.md-passbar` 카드 승격 미러 — 구 무면 3층(2026-08-02) supersede).
   재질 = .lf-card 와 동일(흰 면 + hairline + radius 14). 층 = 라벨(dot + 「내 이용권 · {플랜명}」) →
   숫자 → 풋터(만료 ↔ 구매 CTA) 불변 — 카드로 돌아온 건 재질뿐, 구 radius 16 + 2열(숫자 좌·타입 우)
   + 잔여 게이지 막대 재도입 ❌ (제품에 없는 요소를 목업에만 두면 미러가 깨진다) */
.lf-passbar { background: #fff; color: var(--landing-gray-900); border: 1px solid #eaecef; border-radius: 14px; padding: 14px 16px 12px; }
/* 구 .lf-pb-btn 단독 선언(12px) — 사용처 3곳 전부 .lf-pb-foot 자식이라 무효 + 12.5px 와 값 불일치.
   아래 .lf-pb-foot .lf-pb-btn 한 곳으로 수렴 (2026-08-07 UI 감사) */


/* 구 .lf-card-count — 제품 md-card-count 폐지(2026-08-09 B안) 미러로 사용처 0 삭제 */
/* ① 라벨 줄 — 제품 `.pwa-hero-label`. 플랜명을 여기서 흡수하고 상태(구 「사용 중」)는 삭제:
   잔여 숫자가 이미 「쓰는 중」을 말한다 (ADR 0099). emerald = 무면 상단의 신호 위치 2곳 중 하나 */
/* 자간 = 원본 `.pwa-hero-label` 0.04em 미러 ([[0112]] 미러 의무 · [[0479]] 가 앱을 0.06 → 0.04 로 옮겼는데
   이 목업만 구 값에 남아 있었다). 앱이 또 바뀌면 여기도 따라간다 · .06em 복귀 ❌ */
.lf-pb-lab { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--landing-primary-dark); }
.lf-pb-lab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--landing-primary); box-shadow: 0 0 0 3px var(--landing-primary-light, #d1fae5); flex: 0 0 auto; }
/* ② 숫자 — 면이 없어진 자리를 체급이 대신한다 (제품 40px, 목업 폰 폭에 맞춰 34px) */
.lf-pbg-num { font-size: 34px; font-weight: 800; line-height: 1; margin-top: 9px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--landing-gray-900); display: block; }
/* 숫자↔단위 간격 3px — 제품 .md-pb-num small 미러 (2026-08-09 개정, 구 「붙임 0px」 supersede. 5px 재도입 ❌) */
.lf-pbg-num small { font-size: 13px; font-weight: 600; color: var(--landing-gray-600); margin-left: 3px; }
/* ③ 풋터 — 좌 만료·사양 ↔ 우 [일시정지 + 구매 CTA] (2026-08-10 A안: 3개 목업 완전 동형). 양끝이 있을 때만 hairline 이 풋터로 읽힌다.
   flex-wrap: 폰 목업은 뷰포트를 따라 245px 까지 줄어(vw 320 실측) 만료+액션 한 줄이 안 선다 — 액션(flex-shrink:0)이
   폰 프레임 overflow:hidden 에 획째 잘리므로, 안 들어갈 때만 액션 쌍이 둘째 줄로 접힌다(여유 폭에선 현행 한 줄 불변) */
.lf-pb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #eaecef; }
/* 홈 폰 목업 한정 — 만료일은 nowrap 단일 토큰(yy.MM.dd 좁은 자리 포맷, 템플릿 주석 참조). features 목업(356px)은 무보정.
   gap 6 + 액션 gap 10 = 데스크톱 폰(풋터 248px)에서 만료 75 + 6 + 163 = 244 로 한 줄 자격 유지(여유 4px) —
   구 gap 8/14 는 250 > 248 이라 flex 계산상 2px 넘쳐(패딩이 흡수해 눈엔 한 줄) wrap 도입 시 데스크톱까지 접혔다 */


.lf-pbg-exp { font-size: 12px; color: var(--landing-gray-600); font-variant-numeric: tabular-nums; }
/* 실제 앱(.md-pb-btn)과 동일 — emerald 텍스트 + 셰브론. 목업 = 제품 미러 원칙 */
.lf-pb-foot .lf-pb-btn { flex: 0 0 auto; background: transparent; color: var(--landing-primary-dark); font-size: 12.5px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }

/* 출석 — 월간 히트맵 캘린더 (member/dashboard md-cal 미러, 출석일 = 솔리드 emerald).
   셀 정사각(aspect-ratio:1≈32px) 해제 → 높이 27px 고정. 폰 ~20px 낮아지고,
   주 효과는 납작한 셀로 빈 회색칸의 세로 여백이 줄어 '비어보임' 완화 (4줄이라 높이 감소 자체는 작음) */
.lf-mcal-month { font-size: 12px; font-weight: 800; color: var(--landing-gray-500); text-align: center; margin-bottom: 9px; letter-spacing: -.01em; }
.lf-mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
/* 요일 헤더 gray-400 대비 ≈2.56:1 → 500 승격 (.pricing-scale·.legal-date·footer 선례 동형 + 제품 .md-cal-dow=slate-500 미러, 2026-08-09 UI 감사) */
.lf-mcal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--landing-gray-500); padding-bottom: 2px; }
/* 목업 캘린더 주말색 = 실물 관원 앱 미러 (`member/dashboard` `.md-cal-dow--sun/--sat`).
   실물이 대비 미달(3.76 / 3.68)로 한 단계 내려갔으므로([[0495]]) 재현본도 같은 값으로 따라간다 —
   목업이 실물과 다른 색을 쓰면 「이 화면이 저렇게 생겼다」는 약속이 깨진다. #ef4444 / #3b82f6 복귀 ❌ */
.lf-mcal-dow--sun { color: #dc2626; }
.lf-mcal-dow--sat { color: #2563eb; }
/* 미출석 숫자 gray-400 대비 ≈2.34:1 → 500 승격 (2026-08-09 UI 감사 사용자 확정 B안 — 출석 emerald 강조 연출은 유지, 전면 제품 미러는 ADR 0112 명시 범위 밖이라 미확장) */
/* 날짜 숫자 = slate-100 면 위 12px — slate-500 은 이 면에서 4.34:1 로 AA 에 0.16 모자란다.
   slate-600 으로 한 단계 (7.24:1). 실물 관원 앱 `.md-cal-day` 도 slate-700 계열이라 미러 방향이 같다 ([[0495]]) */
.lf-mcal-d { height: 27px; border-radius: 6px; background: var(--landing-gray-100); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--landing-gray-600); font-variant-numeric: tabular-nums; }
/* 목업 출석 채움 = 실물 `.md-cal-day.is-att` 미러 — 실물이 emerald-700 로 갔으므로 재현본도 따라간다 ([[0495]] 예외) */
.lf-mcal-d--att { background: var(--landing-primary-dark); color: #fff; font-weight: 800; }
.lf-mcal-d--off { opacity: .3; }
.lf-mcal-d--today { box-shadow: inset 0 0 0 1.5px var(--landing-primary); color: var(--landing-primary-dark); font-weight: 800; }

/* FAQ 아코디언 — 섹션 폐지로 CSS 제거 (2026-07-22) */

/* ── Events Section ── */
/* 헤딩 톤은 위 공통 셀렉터 소유 — 여기는 margin 만 */
/* margin-bottom 26 = «섹션 머리 → 첫 콘텐츠» 홈 단일값 ([[0473]]) — 짝은 소개(`.ben-list` mt 26)·
   요금(`.pricing-header` mb 26). 구 24 는 이 섹션만 2px 짧아 세 섹션 제목이 뜬 정도가 갈렸다.
   ⚠ 실효 간격은 `.deep-list` mt 12 와 «상쇄»된 max 값이라 여기 값이 그대로 간격이 된다. 24 재도입 ❌ */
/* 좌측 = 아래 3행이 전폭 좌측 목록 ([[0478]]) — 중앙 재도입 ❌ */
.landing-events .section-header { text-align: left; margin-bottom: 26px; }

/* 이벤트 = 「하나씩 둘러보기」와 같은 hairline 행 어휘 (.deep-list/.deep-row 재사용, 2026-08-06 UI 감사).
   구 .events-grid + .event-card* 3열 균등 카드는 §0 「동일 카드 그리드 반복 ❌」 로 폐지 — 재도입 ❌.
   여기 두 규칙은 「링크가 아닌 deep-row」 보정만 소유한다:
   ① hover 밀림 해제 — .deep-row 의 translateX(8px) 는 <a> 의 클릭 어포던스라 정보 행에 붙으면 거짓 신호
   ② ~~라벨 폭 84 → 96~~ — 2026-08-26 에 base(`.deep-row-label`)가 96 을 쥐면서 이 오버라이드는
      «중복»이 돼 삭제했다. 이 목록만 96 이던 상태가 곧 데스크톱 갈림의 원인이었다 — 재도입 ❌ */
@media (hover: hover) {
  .landing-events .deep-row:hover .deep-row-label,
  .landing-events .deep-row:hover .deep-row-desc { transform: none; }
}

/* ── Pricing Section ── */
/* 헤딩 톤은 위 공통 셀렉터 소유 — 여기는 margin 만 */
/* margin-bottom 26 = 위 「섹션 머리 → 첫 콘텐츠」 단일값 ([[0473]]). 구 28 재도입 ❌ */
.pricing-header { text-align: center; margin-bottom: 26px; }
.pricing-header h2 { margin-bottom: 8px; }
/* 구 .pricing-header p — 부제 <p> 제거 후 대상 없는 dead 삭제 (2026-08-07 UI 감사) */

/* ============================================
   Pricing Card - Interactive (V4 B)
   ============================================ */
.pricing-card-single {
  /* 카드 radius 14px 통일 (2026-07-20 — 구 20px, 제품 화면 D.MONO 정합) */
  background: #fff; border-radius: 14px; border: 1px solid var(--landing-gray-200);
  overflow: hidden; max-width: 540px; margin: 0 auto;
}

.pricing-hero {
  padding: 32px 32px 26px; text-align: center;
  background: #fff;
  border-bottom: 1px solid var(--landing-gray-100);
}

/* 구 `.pricing-includes-*` 3종 — 계산 표 각주로 흡수돼 사용처 0 삭제
   (2026-08-26 사용자 확정 A안 · 시안 landing-pricing-includes). 새 소유자 = `.pricing-formula-foot`.
   구 블록(흰 바탕 + 12px/800 라벨 + 14.5px 한 문장) 재도입 ❌ — 사유는 템플릿 주석. */


/* 솔리드 emerald 면 + 흰 글자 ❌ (상태 뱃지 「솔리드 재도입 ❌」 + 랜딩 「솔리드 채움 재도입 ❌」)
   → 같은 카드 .pricing-badge 와 동일 어휘: 연민트 면 + emerald hairline + emerald 텍스트 */

/* gray-500 — gray-400 은 17px/600(WCAG large 미만)에서 ≈2.85:1 대비 미달. 후퇴 위계는 취소선+체급이 담당 */

.pricing-amount {
  font-size: 54px; font-weight: 800; color: var(--landing-primary);
  letter-spacing: -0.03em; line-height: 1;
  font-feature-settings: 'tnum';
}
.pricing-amount .currency { font-size: 20px; font-weight: 800; color: var(--landing-primary); margin-left: 4px; letter-spacing: 0; }
.pricing-period { font-size: 12px; color: var(--landing-gray-500); margin-top: 10px; font-weight: 600; }

.pricing-slider-wrap { padding: 24px 32px 22px; }
.pricing-slider-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.pricing-slider-title { font-size: 12px; font-weight: 800; color: var(--landing-gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.pricing-slider-value {
  /* 흰 면 위 13px 글자 → primary-dark (3.58 → 5.24:1, ADR 0495). --landing-primary 복귀 ❌ */
  font-size: 13px; font-weight: 800; color: var(--landing-primary-dark);
  background: #ecfdf5; padding: 5px 13px; border-radius: 50px;
  border: 1px solid #a7f3d0;
  font-feature-settings: 'tnum';
}
.pricing-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 50px;
  background: var(--landing-gray-200);
  /* pan-y — none 은 모바일 세로 스크롤을 통째로 삼켜 스크롤 트랩 (2026-07-30 UI 감사). 가로 드래그는 슬라이더 소유 */
  touch-action: pan-y;
}
/* 터치 히트박스 44px — input 박스가 8px 뿐이라 28px 썸을 잡아도 터치가 박스를 빗나가면 페이지
   스크롤로 샌다 (admin acctSimSlider 와 같은 처방, 2026-08-19). 트랙은 runnable-track 8px 그대로
   (input 안 수직 중앙), 음수 마진으로 시각 리듬 보존, background 는 트랙 의사요소가 있어 44px 로
   두꺼워지지 않게 소거. position:relative = 뒤 형제 .pricing-scale 보다 히트 레이어 우선. */
@media (pointer: coarse) {
  .pricing-slider { height: 44px; margin: -18px 0; background: transparent; position: relative; }
}
/* outline 을 지우면 대체 indicator 가 없어 키보드 포커스가 사라진다 → thumb 단일 ring 으로 대체 */
.pricing-slider:focus { outline: none; }
/* 벤더 의사요소는 규칙을 분리한다 — 한 셀렉터 리스트로 묶으면 상대 엔진이 모르는 의사요소 탓에
   규칙 전체가 파싱 단계에서 버려져(크롬은 -moz-, 파이어폭스는 -webkit-) 양쪽 다 ring 이 안 걸린다. */
.pricing-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.25);
}
.pricing-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.25);
}
.pricing-slider::-webkit-slider-runnable-track {
  height: 8px; border-radius: 50px;
  background: linear-gradient(90deg, #10b981 0%, #059669 var(--pricing-progress, 30%), var(--landing-gray-200) var(--pricing-progress, 30%), var(--landing-gray-200) 100%);
}
.pricing-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid var(--landing-primary);
  cursor: pointer;
  margin-top: -10px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.18);
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
  .pricing-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.28);
  }
}
.pricing-slider::-moz-range-track { height: 8px; border-radius: 50px; background: var(--landing-gray-200); }
.pricing-slider::-moz-range-progress { height: 8px; border-radius: 50px; background: var(--landing-primary); }
.pricing-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid var(--landing-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.18);
}
.pricing-scale {
  display: flex; justify-content: space-between; margin-top: 10px;
  /* gray-400 대비 ≈2.85:1 → 500 승격 (.legal-date 2026-07-30 · footer 2026-07-28 선례와 동형, 2026-08-04 UI 감사) */
  font-size: 12px; color: var(--landing-gray-500); font-weight: 600;
}

.pricing-formula {
  padding: 22px 32px 30px;
  border-top: 1px solid var(--landing-gray-100);
  background: var(--landing-gray-50);
}
.pricing-formula-title {
  font-size: 12px; font-weight: 800; color: var(--landing-gray-500);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.pricing-formula-title-meta {
  /* 슬라이더 연동 실시간 값(N명 기준) — gray-50 면 위 gray-400 대비 ≈2.5:1 → 500 승격, 위계는 700+tnum 이 담당 (2026-08-09 UI 감사) */
  color: var(--landing-gray-500); font-weight: 700; text-transform: none;
  font-feature-settings: 'tnum';
}
.pricing-formula-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  font-size: 14px;
}
/* solid hairline — 같은 카드의 .pricing-divider 와 정합 (2026-07-28 UI 감사, dashed 는 행 추가 슬롯 전용) */
.pricing-formula-row + .pricing-formula-row { border-top: 1px solid var(--landing-gray-100); }
/* 비활성 = 색으로 후퇴 — 구 opacity .45 는 본문 대비 ≈1.9:1 로 판독 불가 (2026-07-30 UI 감사).
   텍스트 gray-400 → 500 (2026-08-10 UI 감사 A안): 목업이 아니라 슬라이더로 실시간 갱신되는 실 UI 이고
   14px 일반 weight 라 ≈2.75:1 은 AA 미달. 짝인 .pricing-formula-price 가 이미 gray-500 이라 행 안 톤도 정렬되고,
   활성 행이 gray-900 이라 후퇴 위계는 유지 · dot(gray-200)이 비활성을 이중으로 신호. gray-400 복귀 ❌ */
.pricing-formula-row.inactive .pricing-formula-text,
.pricing-formula-row.inactive .pricing-formula-text strong { color: var(--landing-gray-500); }
.pricing-formula-row.inactive .pricing-formula-price { color: var(--landing-gray-500); }
/* 행 마커 = 6px dot (2026-08-04 UI 감사 A안 — §아이콘 「원형 bg + SVG 장식 마커 ❌ → emerald dot」).
   구 18px 원형 tint + 체크 SVG 는 두 행이 *같은 체크*를 그리고 활성/비활성을 배경색으로만 갈라,
   아이콘이 정보를 전혀 안 나르는 데다 비활성 행이 「체크됐는데 회색」이라는 모순을 만들었다(§4).
   위계는 dot 색 + .pricing-formula-text 의 weight/색이 담당. 원형 체크 재도입 ❌ */
.pricing-formula-row-mark {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--landing-gray-200);
}
.pricing-formula-row.active .pricing-formula-row-mark {
  background: var(--landing-primary);
}
.pricing-formula-text { flex: 1; color: var(--landing-gray-600); line-height: 1.4; }
.pricing-formula-text strong { color: var(--landing-gray-900); font-weight: 700; }
.pricing-formula-row.active .pricing-formula-text { color: var(--landing-gray-900); }
.pricing-formula-price { font-weight: 800; color: var(--landing-gray-900); white-space: nowrap; font-feature-settings: 'tnum'; }
/* 계산 표 각주 — 표 전체에 걸리는 전제 문장 (2026-08-26 사용자 확정 A안 · 시안 landing-pricing-includes).
   ① dot 마커 ❌ — 마커는 «계산에 들어가는 행»의 표식이라 각주에 붙이면 셋째 계산 행으로 읽힌다.
      그래서 행 들여쓰기(6+10px)도 안 받고 상자 좌측 레일에서 시작한다.
   ② 구분선 = gray-200 — 행 사이 hairline(gray-100)보다 한 단 진하게 둬야 「행이 하나 더」가 아니라
      「표가 끝나고 각주」로 갈린다. gray-100 통일 ❌
   ③ 14px = 계산 행과 같은 값 — 구 `.pricing-includes-line` 14.5px 는 이 카드의 유일값이었다
      (나머지 전부 12·14·15). 14.5 재도입 ❌
   text-wrap: balance = 「<br> 금지 정책 — CSS 로만 줄바꿈 제어」(style.css:3431·quickstart 선례).
   폰(390px)에서 이 한 문장이 두 줄로 감기는데 기본 wrap 은 「…포함되지 / 않아요.」로 술어를 끊어
   마지막 줄에 3글자만 남겼다. balance 는 「이용권이 없으면 명단에 있어도 / 요금에 포함되지 않아요.」
   = 조건절 ↔ 결과 경계에서 나뉜다(실측 390·360·320px). 데스크톱은 1줄이라 무영향. */
.pricing-formula-foot {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--landing-gray-200);
  /* 행간 1.7 = 설명 롤 ([[0470]]) — 구 1.55 는 이 각주만 형제 설명문과 갈리던 값. 재도입 ❌ */
  font-size: 14px; line-height: 1.7; color: var(--landing-gray-600);
  text-wrap: balance;
}
.pricing-formula-foot strong { color: var(--landing-gray-900); font-weight: 700; }

/* 금액 크기만 520px — «rail 과 다른 축»이라 여기 남는다. 카드 안쪽 rail 은 768px 경계로
   이관됐다(파일 끝 블록, [[0438]]) — 이 둘을 다시 한 블록에 합치지 ❌ */
@media (max-width: 520px) {
  .pricing-amount { font-size: 46px; }
}

/* 요금제 카드 전환 CTA — 가격 확인 직후 동선 (2026-07-01) */
.pricing-cta-wrap { padding: 20px 32px 28px; }
.pricing-cta-wrap .landing-btn-primary { display: block; width: 100%; text-align: center; }
/* 시작 문턱 각주 — 구 `.hero-text .hero-friction` 이전 자리 ([[0425]] · 2026-08-24).
   치수 = **같은 카드 `.pricing-period` 와 한 어휘**(12px/600/gray-500/center) — 역할이 같다
   (값·버튼 아래 붙는 중앙 보조 캡션). 구 hero 시절 12.5px 를 그대로 들고 오면 이 카드에서
   12.5 가 유일값이 돼(`.pricing-period`·`.pricing-formula-title` 전부 12px)
   같은 카드 안 캡션 크기가 두 벌로 갈린다. 12.5px 재도입 ❌ */
.pricing-cta-note {
  font-size: 12px; font-weight: 600; color: var(--landing-gray-500);
  margin: 10px 0 0; line-height: 1.7; text-align: center;
}

/* feature 페이지 하단 마감 CTA — 슬림 카드 배너 (2026-07-05, 구 gray-50 풀폭 밴드 supersede).
   본문 목업 shot 과 같은 카드 어휘(hairline + radius 14 + 미세 그림자)로 페이지 평면(#f8fdfb) 위에 살짝 띄움.
   데스크톱 = 좌 텍스트 · 우 버튼 한 행 / 모바일 = 세로 스택 (버튼은 ≤768px 전역 width:100% 그대로). */
.feature-cta-band { padding-bottom: 44px; }
.feature-cta-card {
  display: flex; flex-direction: column; gap: 16px; text-align: center;
  max-width: 680px; margin: 0 auto; padding: 22px 24px;
  background: #fff; border: 1px solid var(--landing-gray-200); border-radius: 14px;
  box-shadow: 0 10px 30px -18px rgba(15,23,42,.18);
}
.feature-cta-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--landing-gray-900); margin: 0 0 2px; }
.feature-cta-desc {
  /* 설명 롤 편입 (2026-08-31 감사 — ADR 0470/0485 설명 롤 14/400/1.7/gray-600. 구 13/1.5/gray-500 은 롤 밖 잔존) */
  font-size: 14px;
  font-weight: 400;
  color: var(--landing-gray-600);
  line-height: 1.7;
  margin: 0;
}
/* 화살표 SVG 는 2026-08-17 확정 B안(시안 landing-primary-arrow)으로 제거됐다 — 그 아이콘 전용
   규칙(`… .landing-btn-primary svg`)도 같은 날 함께 삭제. `.feature-cta-card` 사용처가 이 fragment
   하나뿐이라 매칭 요소가 0이었고, 「다른 landing-btn-primary 로 확장 ❌」라 되살아날 자리도 없다. */
.feature-cta-card .landing-btn-primary { padding: 11px 26px; min-height: 42px; font-size: 14px; }
@media (min-width: 769px) {
  /* 본문 feat-row 와 좌우 끝단 정렬 — 컨테이너 풀폭 (680px 캡은 모바일 스택 전용) */
  .feature-cta-card { max-width: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; text-align: left; padding: 24px 30px; }
  .feature-cta-card .landing-btn-primary { flex: 0 0 auto; }
}

/* ── Scroll Fade-in Animation ── */
/* 이징 = 토큰 (2026-08-23 사용자 확정 모션 B). 구 `0.7s ease`(브라우저 기본 곡선) 재도입 ❌ —
   랜딩은 delight 티어인데 :root 에 토큰 6종을 정의해 두고 진입에는 하나도 안 쓰고 있었다.
   순차 지연 = 소비처가 인라인 `--i` 로 소유(안 주면 0 = 지금까지와 같은 동시 등장). */
.landing-fade-in {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out-quint), transform 0.55s var(--ease-out-quint);
}
.landing-fade-in.visible {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* 영상 카드만 스프링 — 하나씩 튀어 올라와 「셋이 있다」가 모션으로 전달된다
   (데스크톱엔 넘기기 힌트가 없어 이 신호가 특히 크다) */
.vid-card.landing-fade-in {
  transform: translateY(26px) scale(0.95);
  transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring);
}
.vid-card.landing-fade-in.visible {
  transform: translateY(0) scale(1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* 히어로 진입 = CSS 애니메이션 (IntersectionObserver ❌).
   첫 화면 텍스트를 관찰자에 걸면 JS 가 죽었을 때 히어로가 통째로 안 보인다 —
   목업(구 .hero-shot)과 달리 여기는 «본문»이라 위험의 크기가 다르다. */
@keyframes landingHeroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-text > * {
  animation: landingHeroIn 0.55s var(--ease-out-quint) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.landing-stagger .landing-fade-child {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.landing-stagger .landing-fade-child.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════════
   모션 패키지 B 「호흡」 — 2026-08-24 사용자 확정 ([[0428]] · 시안 landing-motion-packages 4안 중 B)

   홈이 4,007 → 2,539px (−37%) 로 줄며 스크롤 런웨이가 짧아진 자리 처방. 축이 둘이다:
     ⓐ 진입 정밀화 (①~⑤) — 블록 성격마다 «다른 문법». 제목=줄 마스크, 목록=hairline draw,
        계산기=값이 스스로 차오름. 구 「전 블록 18px 페이드업 한 벌」 복귀 ❌
     ⓑ 상시 반복 3종 추가 (⑥~⑧) — 정지 화면에서도 페이지가 숨 쉬게 하는 몫.
        **상시 반복 2 → 5종은 사용자가 시안 4안을 비교한 뒤 고른 결정**이다 (project-frontend-guide
        「상시 반복 모션 안 늘린다」 조항 개정 근거). 「랜딩에 상시 반복이 많다」 감사 재지적 ❌ ·
        4종 이하로 되돌리기 = 새 사용자 컨펌 필요.

   신규 keyframe 은 광택(⑦) 하나뿐 — 나머지는 프로젝트에 이미 있는 어휘를 재사용한다
   (⑥ = `motionGradientShift` 요금 숫자와 공용 · ⑧ = 앱 `setup-banner-ring` 미러).
   틸트·컨페티·파티클 재도입 ❌ · 이징은 토큰 6종만 · 아래 §Reduced Motion 가드와 짝.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 공용 draw — 선이 좌→우로 그려진다 (③ 섹션 룰 · ④ 행 hairline 공용) */
@keyframes landingDrawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── ① 히어로 h1 = 줄 마스크 리빌 ──
   h1 은 컨테이너 페이드(landingHeroIn)에서 «뺀다» — 마스크가 이미 등장을 말하는데 페이드까지
   겹치면 두 모션이 같은 일을 두 번 한다. 나머지 자식(p·CTA)은 그대로 페이드.
   (구 서술의 셋째 자식 `friction` = `.hero-friction` 은 ADR 0425 로 히어로 밖으로 이전·소멸 — 2026-08-25 UI 감사) */
@keyframes motionLineUp { from { transform: translateY(108%); } to { transform: none; } }
.hero-text > h1 { animation: none; }
/* 무스코프 = 마스크 창을 쓰는 곳이면 어디서든 같은 리빌 (홈 히어로 · 기능 4페이지 h1) */
.hero-ln > span { animation: motionLineUp 0.66s var(--ease-out-expo) both; }
.hero-text h1 .hero-ln--em > span { animation-delay: 90ms; }

/* ── ② 시작 CTA = 스프링 오버슈트 ── (모바일은 .hero-cta 가 display:none 이라 무대상) */
@keyframes landingCtaPop {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.hero-text > .hero-cta { animation: landingCtaPop 0.52s var(--ease-spring) 280ms both; }

/* ── ③ 섹션 제목 아래 룰 = 좌우로 펼쳐 그려짐 ──
   base 원점 center — 가운데 정렬 제목(요금 섹션 · features 4페이지)의 축에 맞춘 값.
   좌측 정렬 제목(홈 소개·이벤트)은 바로 아래 규칙이 시작점·원점을 좌측으로 옮긴다. */
.sec-rule {
  display: block; width: 56px; height: 2px;
  background: var(--landing-gray-200); margin: 14px auto 0;
  transform: scaleX(0); transform-origin: center;
}
/* 좌측 머리 = 룰도 좌측에서 시작해 좌→우로 그려진다 ([[0478]]).
   `margin-left: 0` 을 빼면 `auto` 가 룰만 가운데로 밀어 제목과 축이 갈리고,
   `transform-origin` 을 안 옮기면 좌측 룰이 «가운데에서 양옆으로» 펼쳐져 시작선이 어긋나 보인다 — 둘은 짝. */
.landing-benefits .sec-rule,
.landing-events .sec-rule { margin-left: 0; transform-origin: left; }
.landing-fade-in.visible .sec-rule { animation: landingDrawX 0.55s var(--ease-out-quint) 220ms both; }

/* ── ④ 행 hairline draw (장점 셋 · 둘러보기 4행 · 이벤트 3행) ──
   **`.armed` = JS 생존 증거** (셸 observer 초기화 시 부여). 이게 없으면 JS 가 죽었을 때
   테두리를 지워 놓고 대체선을 못 그려 «구분선 없는 목록»이 된다 — 컨테이너가 armed 되기 전엔
   실제 border 를 그대로 쓴다. armed 없이 border 를 transparent 로 두는 구조 ❌
   선 개수는 불변: 원본 border(첫 항목 top + 전 항목 bottom) ↔ 대체선(전 항목 top + 마지막 bottom). */
.landing-draw > * { position: relative; }
.landing-draw.armed > * { border-top-color: transparent; border-bottom-color: transparent; }
.landing-draw.armed > *::before,
.landing-draw.armed > *:last-child::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--landing-gray-200);
  transform: scaleX(0); transform-origin: left;
}
.landing-draw.armed > *::before { top: -1px; }
.landing-draw.armed > *:last-child::after { bottom: -1px; }
.landing-draw.armed > *.visible::before,
.landing-draw.armed > *.visible:last-child::after {
  animation: landingDrawX 0.5s var(--ease-out-quint) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* 텍스트는 «선을 따라» 들어온다 — 축을 X 로 바꾸고 선보다 80ms 늦게 (선 → 내용 순서가 읽힌다) */
.landing-draw > .landing-fade-in,
.landing-draw > .landing-fade-child { transform: translateX(-8px); }
.landing-draw > .landing-fade-in.visible,
.landing-draw > .landing-fade-child.visible {
  transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}

/* ── ⑤ nav 스크롤 진행선 ──
   짧아진 페이지에서 「얼마 안 남았다」를 말하는 유일한 표지. 입력(스크롤) 연동이라 상시 반복 아님.
   .landing-nav 가 sticky = 이미 positioned 라 absolute 기준이 된다.
   ⚠ 이름은 `.nav-scroll-progress` — style.css 의 «앱 페이지 전환 로딩바» `.nav-progress` 와 다른 컴포넌트다.
   signup-complete 가 두 시트를 다 로드하는데(§auth 카드리스 등재 함정) 같은 이름이면 landing.css 가 뒤에
   실려 동특이도로 이겨 로딩바에 scaleX(0)·absolute 가 덮인다 — 실제로 그 화면에서 로딩바가 사멸했다.
   `.nav-progress` 재사용 ❌ (그쪽은 common.js 가 만드는 DOM 계약). */
.nav-scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--landing-primary);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* ── ⑥ [상시 6s] h1 emerald 줄 그라데이션 스윕 ──
   `motionGradientShift` = 요금 숫자(.motion-gradient-num)와 «같은 keyframe» — 같은 목적(강조면
   위를 훑는 빛)이라 어휘를 하나로 둔다([[0104]]). 진입 리빌이 끝난 뒤(800ms) 돌기 시작한다. */
.hero-text h1 .hero-ln--em > span {
  background: linear-gradient(90deg, #047857, #10b981, #047857);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: motionLineUp 0.66s var(--ease-out-expo) 90ms both,
             motionGradientShift 6s ease 800ms infinite;
}

/* ── ⑦ [상시 5s] 시작 CTA 광택 스윕 — 홈 CTA «2곳 한정» ──
   스코프 = 히어로 + 요금 카드. `.landing-btn-primary` 무스코프로 올리면 features 4페이지 CTA 카드와
   모바일 sticky 바까지 번져 「어디나 반짝이는 버튼」이 된다 — 광택이 시선을 모으는 건 유일할 때뿐.
   신규 keyframe 은 이 하나. 55% 이후 정지 구간 = 스윕 사이 «숨 쉬는 텀». */
@keyframes landingBtnSheen {
  0%        { transform: translateX(-130%) skewX(-18deg); }
  55%, 100% { transform: translateX(240%)  skewX(-18deg); }
}
.landing-hero .landing-btn-primary,
.pricing-cta-wrap .landing-btn-primary { position: relative; overflow: hidden; }
.landing-hero .landing-btn-primary::after,
.pricing-cta-wrap .landing-btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(90deg, rgba(16,185,129,0), rgba(16,185,129,.14), rgba(16,185,129,0));
  animation: landingBtnSheen 5s var(--ease-smooth) infinite;
  pointer-events: none;
}

/* ── ⑧ [상시 2.4s] 「곧 나와요」 dot 대기 펄스 ──
   앱 `.setup-banner-dot::after` 미러 — keyframe 이름·값·이징까지 동일(랜딩은 style.css 를
   로드하지 않으므로 사본이 필요하다). SSOT 가 등재 예외로 인정한 «기다리는 상태» 신호와 같은 유형:
   장식이 아니라 「아직 안 나왔다」를 말한다. dot 치수만 랜딩 어휘 6px (앱 8px — .soon-pill·
   .pricing-formula-row-mark 와 같은 값). 정적 dot 강등 ❌ · 8px 승격 ❌ */
@keyframes setup-banner-ring {
  0%   { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(2); }
}
.soon-strip b { display: inline-flex; align-items: center; gap: 7px; }
.soon-dot {
  position: relative; width: 6px; height: 6px; border-radius: 999px;
  background: var(--landing-primary); flex-shrink: 0;
}
.soon-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 2px solid #34d399; opacity: 0;
  animation: setup-banner-ring 2.4s ease-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   기능 소개 4페이지 진입 정밀화 — 2026-08-24 사용자 확정 ([[0429]] · 시안 landing-remaining-candidates ①)
   [[0428]] 홈 패키지 B 의 «진입 문법»만 상세 4페이지로 확장한다 — **상시 반복은 안 옮긴다**
   (광택·h1 스윕·dot 펄스는 홈 전용). 구 「블록 통째 18px 페이드업 한 벌」 복귀 ❌.
   틸트 재도입 아님 — `.feat-shot` 은 진입 1회 scale(.978→1) 이고 hover 는 손대지 않는다.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 섹션 머리 = CSS 애니메이션 (IntersectionObserver ❌) ──
   그 페이지의 «첫 화면 본문»이라 관찰자에 걸면 JS 사망 시 제목이 통째로 안 보인다(홈 히어로와 같은 근거).
   게다가 마스크 리빌은 부모가 opacity 0 인 동안 끝나 버려 «보이지 않는 리빌»이 된다 —
   `.section-header` 에 `.landing-fade-in` 재부여 ❌ */
.landing-features .feat-head .sec-rule {
  animation: landingDrawX 0.55s var(--ease-out-quint) 220ms both;
}

/* ── 교차 2열 = 「글 먼저 → 목업 나중」 ──
   행 자신은 «트리거만» 담당하고 시각 변화를 자식에게 넘긴다(부모까지 페이드하면 두 모션이 겹친다).
   행마다 자기 관찰자를 가지므로 행 간 스태거는 두지 않는다 — 들어온 행만 움직인다. */
.landing-features .feat-row.landing-fade-in { opacity: 1; transform: none; transition: none; }
.landing-features .feat-row > .feat-text,
.landing-features .feat-row > .feat-shot { opacity: 0; }
.landing-features .feat-row > .feat-text {
  transform: translateX(-10px);
  transition: opacity 0.55s var(--ease-out-quint), transform 0.55s var(--ease-out-quint);
}
/* 역방향 행은 글이 오른쪽 칸이라 들어오는 방향도 뒤집는다 (안 뒤집으면 화면 밖에서 오는 게 아니라 안쪽에서 온다) */
.landing-features .feat-row-reverse > .feat-text { transform: translateX(10px); }
.landing-features .feat-row > .feat-shot {
  transform: translateY(22px) scale(0.978);
  transition: opacity 0.62s var(--ease-out-quint) 110ms, transform 0.62s var(--ease-out-quint) 110ms;
}
.landing-features .feat-row.visible > .feat-text,
.landing-features .feat-row.visible > .feat-shot { opacity: 1; transform: none; }

/* ── 기능 불릿 = 한 줄씩 좌측에서 (dot 이 먼저 서고 글이 따라온다) ──
   지연은 `nth-child` 로 CSS 가 소유 — li 마다 인라인 `--i` 를 심으면 4페이지 30여 줄을 손대야 한다.
   6줄까지 = 현행 최장 행(3줄)의 두 배 여유 */
.landing-features .feat-list li {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.45s var(--ease-out-quint), transform 0.45s var(--ease-out-quint);
}
.landing-features .feat-row.visible .feat-list li { opacity: 1; transform: none; }
.landing-features .feat-row.visible .feat-list li:nth-child(1) { transition-delay: 220ms; }
.landing-features .feat-row.visible .feat-list li:nth-child(2) { transition-delay: 290ms; }
.landing-features .feat-row.visible .feat-list li:nth-child(3) { transition-delay: 360ms; }
.landing-features .feat-row.visible .feat-list li:nth-child(4) { transition-delay: 430ms; }
.landing-features .feat-row.visible .feat-list li:nth-child(5) { transition-delay: 500ms; }
.landing-features .feat-row.visible .feat-list li:nth-child(6) { transition-delay: 570ms; }

/* ── 모바일(≤768px) = «행 단위» 페이드로 되돌린다 — 자식 안무가 성립하지 않는 자리 ──
   그 폭에서 `.feat-text` 는 `display: contents`(제목 → 그림 → 불릿 순서를 만들기 위해)라
   **박스가 없어 opacity·transform 이 무시된다** — 실측: 제목·본문은 애니 없이 즉시 뜨고
   목업·불릿만 뒤늦게 등장해 「제목이 먼저 떠 있는데 그림이 튀어 오르는」 반쪽 모션이 됐다.
   게다가 1열이라 「글 먼저 → 목업 나중」은 **DOM 순서가 이미** 말한다.
   그래서 모바일은 행이 통째로 올라오고(홈 모바일 블록 페이드와 같은 어휘) 자식 3종은 중화한다.
   제목 마스크 리빌·룰 draw 는 실박스라 모바일에서도 그대로 산다. 자식 안무 재도입 ❌ */
@media (max-width: 768px) {
  .landing-features .feat-row.landing-fade-in {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s var(--ease-out-quint), transform 0.55s var(--ease-out-quint);
  }
  .landing-features .feat-row.landing-fade-in.visible { opacity: 1; transform: none; }
  .landing-features .feat-row > .feat-text,
  .landing-features .feat-row > .feat-shot,
  .landing-features .feat-list li {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
}

/* ── Footer ── */
.landing-footer { background: #fff; border-top: 1px solid var(--landing-gray-200); color: var(--landing-gray-500); padding: 28px 0; }
/* gap 10 → 32px — 위 `.footer-business a`(히트 44px)와 아래 `.footer-bottom a`(히트 44px)의
   판정이 12.4px 간격에서 겹쳤다. 확장분(위아래 15px) 2배 이상으로 벌린 값 (§히트박스 확대 idiom
   「간격도 확장분 2배와 동치로」 · 2026-08-27 사용자 확정 A안). 10px 복귀 ❌ */
.landing-footer .landing-container { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.footer-business { font-size: 12px; color: var(--landing-gray-500); line-height: 1.7; margin: 12px 0; font-style: normal; text-align: center; }
/* 연락처 링크 = 아래 .footer-bottom a 와 같은 gray-600/600 (2026-08-04 UI 감사 A안).
   밑줄 전면 금지(§5) 아래선 색이 유일한 링크 신호인데, 구 `color: inherit` 은 이메일·전화를
   주변 주소 문장(gray-500)과 같은 색으로 만들어 탭 가능하다는 어포던스가 0이었다.
   같은 푸터 안 법정 링크만 승격돼 어휘가 갈리던 문제도 함께 해소. inherit 복귀 ❌ */
/* 히트박스 44px — 세로 padding 15px + 동값 음수 마진 (2026-08-27 사용자 확정 A안 ·
   시안 `footer-contact-touch`). 구 14px 은 터치 최소치의 3분의 1이었고, mailto/tel 은
   «오탭 대가가 큰» 링크다(메일·전화 앱이 바로 뜬다). 인라인이라 세로 패딩은 줄 높이를 안 밀지만
   **판정은 자란다** — 그래서 아래 `.landing-footer .landing-container` gap 을 함께 벌렸다.
   ⚠ **짝 규칙** (§히트박스 확대 idiom): 이 값을 다시 키우면 «아래 `.footer-bottom` 과의 간격»도
   같이 봐야 한다 — 확장 전 실측 간격이 12.4px 라 그냥 넓히면 「이용약관」 판정을 침범했다.
   가로는 미조정 — 이메일·전화 사이는 「·」 폭이 지고, 둘 다 같은 성격이라 오탭해도 연락 수단이다. */
.footer-business a {
  color: var(--landing-gray-600); font-weight: 600; transition: color .2s;
  padding: 15px 0; margin: -15px 0;
}
@media (hover: hover) {
  .footer-business a:hover { color: var(--landing-gray-900); }
}
/* 저작권(정적) gray-500 · 링크 gray-600 — 밑줄 금지(§5) 아래에선 색이 유일한 링크 신호라
   법정 링크가 주변 정적 텍스트보다 진해야 어포던스가 생긴다. 구 gray-400 은 대비 ≈2.56:1 인 데다
   바로 위 .footer-business(gray-500)보다 흐려 위계가 역전됐다 (2026-07-28 UI 감사, 사용자 확정). */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--landing-gray-500); }
/* 히트박스 44px — 세로 padding + 음수 margin (2026-08-10 A안). 가로는 gap 6px 유지 위해 미조정 */
.footer-bottom a {
  display: inline-flex; align-items: center;
  padding: 13px 0; margin: -13px 0;
  font-size: 12px; color: var(--landing-gray-600); font-weight: 600; transition: color .2s;
}
@media (hover: hover) {
  .footer-bottom a:hover { color: var(--landing-gray-900); }
}
.footer-sep { color: var(--landing-gray-200); }

/* 모바일 푸터 하단 여백 = 카카오 FAB 통과 금지 (2026-08-24 UI 감사 — 랜딩 7페이지 공통).
   페이지 맨 아래에서는 sticky CTA 가 숨고 FAB 만 남는데(위 §kakao-chat-fab 모바일 = --fab-anchor
   16px + 높이 54px), 구 `padding: 28px 0` 로는 저작권 줄이 FAB 에 13~22% 가려졌다.
   **이 자리에 두는 이유 = 캐스케이드.** FAB 규칙 옆(≈672행)에 두면 뒤에 오는
   `.landing-footer { padding: 28px 0 }`(숏핸드, 같은 특이도)에 덮여 죽는다 — 실제로 한 번 겪었다.
   FAB 상수를 바꿀 땐 이 값도 같이 볼 것.
   `var(--fab-anchor)` 를 그대로 쓰지 ❌ — sticky CTA 토글마다 16 ↔ 88+ 로 바뀌어
   스크롤 중 푸터 높이가 흔들린다.

   ⚠ 2026-08-26 — **묶이는 상수가 FAB 이 아니라 sticky CTA 바로 바뀌었다.** 구 84 는 FAB(16+54)만
   보고 잡은 값이라 홈 모바일 하단에서 실측 9px 이 모자랐다: CTA 바 81 + 약관 링크의 **히트박스
   오버플로 13**(`.footer-bottom a` 가 `padding: 13px 0; margin: -13px 0` 로 44px 판정을 만드는
   [[0317]] idiom — 그 확장분은 «줄 상자 밖으로» 나간다). 글자·클릭 자체는 멀쩡했지만 판정이
   46 → 37px 로 잘려 44px 바닥을 밑돌았다. → **97 = 81(CTA) + 13(히트 오버플로) + 여유 3**.
   FAB 기준 70 도 함께 덮는다. 84 재도입 ❌ · **히트박스를 쓰는 요소를 푸터 마지막 줄에 더할 땐
   그 확장분만큼 이 값도 다시 잴 것**(콘텐츠 박스만 보고 재면 또 9px 이 빈다). */
@media (max-width: 768px) {
  .landing-footer { padding-bottom: 97px; }
}

/* ── Mobile Sticky CTA Bar ── */
.landing-mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--landing-gray-200);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  /* visibility 동반 필수 — opacity/pointer-events 만으로는 탭 순서·접근성 트리에서 안 빠져
     숨겨진 바 안의 「시작하기」가 보이지 않는 채 포커스된다(§4 키보드 네비). */
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; pointer-events: none;
}
.landing-mobile-cta.show { opacity: 1; visibility: visible; pointer-events: auto; }
.landing-mobile-cta .landing-btn-primary { width: 100%; }

/* ============================================
   Desktop (min-width: 769px)
   ============================================ */
@media (min-width: 769px) {
  .landing-container { padding: 0 32px; }
  .landing-section { padding: 36px 0; }

  /* Nav */
  .landing-nav .landing-container:has(.nav-menu) { justify-content: space-between; }
  .nav-logo-wordmark { height: 52px; }
  .nav-cta { display: inline-flex; }
  /* 프리픽스 = 위 base(.landing-page .nav-link, 0,2,0)의 display:none 을 이기기 위한 동특이도 + 소스 순서 */
  .landing-page .nav-link { display: inline; }

  /* Hero — 2026-08-23 개편: 우측 목업이 사라지고 영상 블록이 히어로 «아래» 전폭으로 내려갔다.
     구 2열 그리드(`1.05fr 1fr` + `text-align:left`) 재도입 ❌ — 짝이 될 우측 칸이 없다. */
  .landing-hero { padding: 56px 0 24px; }
  .hero-text h1 { font-size: 44px; line-height: 1.3; }
  .hero-text p { font-size: 17px; }
  
  .hero-cta { display: flex; flex-direction: row; justify-content: center; margin-top: 26px; }
  .landing-btn-primary { width: auto; }

  /* 영상 — 데스크톱은 셋이 나란히 (넘기기 보조 표지는 숨는다)
     ⚠ `flex-start` = 홈 좌측 기준선([[0490]]) — 구 `center` 는 카드를 x 340 으로 68px 들여보내
     홈에서 좌측 축을 벗어나는 유일한 블록이었다. `center` 복귀 ❌ (오른쪽 136px 여백은 인지된 대가).
     모바일 base 는 스냅 캐러셀이라 이 선언이 안 닿는다 — 좌우 44px peek 패딩은 그쪽 소유. */
  .vid-rail { justify-content: flex-start; overflow: visible; padding: 6px 0 8px; gap: 20px; scroll-snap-type: none; }
  .vid-card { flex: 0 0 240px; }
  .vid-cap, .vid-dots, .vid-hint { display: none; }

  /* 장점 셋 — 제목 좌 / 설명 우 2열 */
  .ben-list { margin-top: 26px; }
  .ben-item { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: baseline; padding: 22px 0; }
  /* 소제목(그룹 머리말)만 19 로 승격 — 항목 제목은 전 뷰포트 15 ([[0469]]).
     구 선언은 `.ben-head h3`·`.ben-price` 를 여기 함께 묶어 «항목 제목 = 머리말»(둘 다 19)로 만들었다.
     `.deep-textrow-label` 은 여전히 «머리말» 이라 승격 유지 — 36(섹션) → 19(머리말) → 15(항목).
     항목 제목을 이 선언에 다시 넣기 ❌ · 머리말을 15 로 내려 항목과 합치기 ❌(위계가 다시 사라진다).
     ⚠ 제목·금액이 «서로» 같은 값이라는 [[0430]] 규약은 불변 — 둘 다 base 15 를 쓴다. */
  .deep-textrow-label { font-size: 19px; }
  .ben-desc { margin-top: 0; }

  /* 섹션 헤딩 데스크톱 승격 = 한 곳 (2026-08-07 사용자 확정 A안 36px 단일 · 2026-08-12 UI 감사로
     3벌 중복 합침. 구 32px·섹션별 개별 선언 재도입 ❌) */
  .landing-features .section-header :is(h1, h2),
  .landing-benefits .section-header h2,
  .landing-events .section-header h2,
  .pricing-header h2 { font-size: 36px; }
  /* feat-* = features/* 4페이지가 계속 쓴다 (홈에서만 빠졌다) — 삭제 ❌ */
  .feat-row { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; }
  .feat-row-reverse .feat-text { order: 2; }
  .feat-text h2, .feat-text h3 { font-size: 23px; }

  /* Events — 구 .events-grid 3열 오버라이드 폐지 (hairline 행은 폭 무관 1열, 2026-08-06 UI 감사) */


  /* Footer */
  .landing-footer .landing-container { flex-direction: column; }

  /* Hide mobile sticky CTA on desktop */
  .landing-mobile-cta { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   홈 모바일 조판 — 정렬 축 하나 + 근접성 3단 간격
   2026-08-24 사용자 확정 B안 (시안 `landing-mobile-axis`)
   ══════════════════════════════════════════════════════════════════════════════
   ⚠ 이 블록은 «데스크톱을 한 글자도 안 건드린다» 는 것이 설계 조건이다 — base 를 고치면
   min-width:769px 블록에 복원 규칙을 일일이 더해야 하고, 그 누락이 곧 데스크톱 회귀가 된다.
   되돌리기 = 이 블록 통째 삭제. base·데스크톱 블록으로 옮겨 적기 ❌.

   ⚠ 셀렉터는 전부 «홈 전용 컨테이너»로 스코프한다 — `.landing-section`·`.sec-rule`·
   `.deep-row` 는 features 4페이지·법률 2페이지·crosslinks fragment 와
   공유하는 이름이라, 무스코프로 쓰면 그 6페이지가 같이 바뀐다(실측 확인).
   홈에만 있는 컨테이너 = `.landing-hero`·`.landing-benefits`·`.landing-events`·`#pricing`.

   ── 왜 (실측, 390px) ──
   구 상태는 정렬 축이 «중앙 ↔ 좌측» 으로 다섯 번 교차했다: 히어로(중앙) → 섹션 머리(중앙) →
   장점 셋(좌측 20px) → 「하나씩 둘러보기」 라벨(중앙) → 목록 행(좌측 24px) → 이벤트 머리(중앙) →
   이벤트 행(좌측 24px) → 요금 머리(중앙). 머리 어휘가 3벌(24px h2 / 15px eyebrow / 12px 라벨)이던 것도 (eyebrow 는 [[0468]] 로 폐지)
   축이 안 정해져 생긴 «결과» 이지 원인이 아니다 — 축을 정하면 머리는 저절로 정리된다.
   → 히어로만 중앙(로고·제목·부제가 이미 중앙축 락업 = 표지), 본문은 들어서는 순간부터 끝까지 좌측.
   남는 교차 1회는 「여기부터 읽을거리」 경계 신호로 일한다.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── ① 섹션 머리 = 좌측 + h2 20px ──
     24px 은 «중앙 정렬일 때» 필요했던 무게다 — 좌측에선 과해서 본문 h3(17px)와 계단이 안 진다. */
  /* 소개·이벤트는 [[0478]] 로 base 가 좌측이 되며 이 목록에서 «중복»이 돼 빠졌다 —
     모바일에서 좌측이라는 사실은 그대로다. 요금만 여기 남는다(데스크톱은 중앙). 재추가 ❌ */
  .pricing-header { text-align: left; }
  .landing-benefits .section-header h2,
  .landing-events .section-header h2,
  .pricing-header h2 { font-size: 20px; }

  /* sec-rule = 데스크톱 전용으로 후퇴. [[0428]](draw 모션)은 데스크톱에서 온전히 살아 있다 —
     폐지가 아니라 모바일 노출만 접는 것. `.landing-features` 쪽 rule 은 대상 아님.
     («eyebrow 도 여기서 접는다» 였던 짝은 [[0468]] 가 eyebrow 자체를 폐지해 사라졌다.) */
  .landing-benefits .sec-rule,
  .landing-events .sec-rule,
  .pricing-header .sec-rule { display: none; }

  /* ── ② 히어로 부제 = 문장 하나가 줄 하나 ──
     근거·실측은 templates/landing/sport/index.html 히어로 주석 참조. */
  .landing-hero .hero-text p > span { display: block; }

  /* ── ③ 간격 3단 = 덩어리 «안» 7 / 서브블록 «사이» 28 / 섹션 «사이» 48 ──
     구 상태는 히어로→소개 23 · 제목→본문 38 · 섹션 사이 30 으로 셋이 거의 안 갈렸다.
     안쪽은 오히려 붙이고(38→18) 바깥만 벌린다(30→48). */
  .landing-hero { padding: 26px 0 0; }
  /* ⚠ 영상 섹션은 «아직 어디서도 안 보인다» — `LandingViewController.LANDING_VIDEOS` 가 **소스 상수**
     `List.of()` 라 환경과 무관하게 비어 있고(2026-08-26 `main` 브랜치에서 확인), `th:if` 로 섹션째 미렌더다.
     구 주석 「prod 에서만 낀다」는 사실이 아니었다 — **값을 채우면** 히어로와 소개 사이에 낀다. 히어로 padding-bottom 을 0 으로 만든 순간 히어로↔영상이 구 12px(히어로 8 + 영상 4)
     에서 4px 로 붙으므로 그 몫을 영상 쪽이 받는다. 아래 padding 은 0 — 영상↔소개는 소개의 48px 이 담당
     (구 25px = 영상 10 + 소개 15). 히어로 padding 을 만질 땐 이 섹션을 «항상 함께» 볼 것. */
  .landing-videos { padding: 12px 0 0; }
  .landing-benefits,
  .landing-events,
  .landing-section#pricing { padding: 48px 0 0; }
  .landing-benefits .ben-list { margin-top: 20px; }
  /* 20 = 소개(`.ben-list` mt)·요금과 같은 값 ([[0473]]) — 구 16 은 이 섹션만 4px 짧았다. 재도입 ❌ */
  .landing-events .section-header { margin-bottom: 20px; }
  .pricing-header { margin-bottom: 20px; }
  /* 28 = 같은 층위 형제 `.deep-textrow` 와 동값 — [[0435]] 모바일 사다리(7 / 28 / 48) 안쪽.
     구 24 는 셋 중 어디에도 없어 soon-strip → tour → deep-textrow 가 20/24/28 로 흔들렸다.
     데스크톱 34px 은 20/34/52 사다리 안이라 «불변» */
  .landing-benefits .landing-tour { margin-top: 28px; }
  /* 구 `.landing-benefits .tour-meta { text-align: left }` 는 [[0490]] 로 base 가 좌측이 되며 «중복»이라 삭제.
     근거(「홈 모바일 정렬 축 = 좌측, 같은 블록의 .deep-textrow 와 한 벌 — 중앙 복귀 ❌」)는 base 주석이 인계한다. */
  /* 데스크톱은 720px 폭이라 제목·보조가 «한 줄»인데, 모바일은 좁아 문구 길이에 따라 보조줄만
     다음 줄로 떨어진다 — 그때 `margin-left:6px` 가 들여쓰기로 남아 위계가 어긋난다.
     세로 레일 `.vid-meta` 와 같은 「제목 위 / 보조 아래 + 2px」 조판으로 폭과 무관하게 고정. */
  .landing-benefits .tour-meta span { display: block; margin-left: 0; margin-top: 2px; }
  .landing-benefits .deep-textrow { margin-top: 28px; text-align: left; }
  /* 8 → 10 = 라벨이 12px 마이크로 라벨에서 17px 소제목이 되며 다시 잡은 근접성 ([[0453]]) */
  .landing-benefits .deep-textrow-label { margin-bottom: 10px; }
  .landing-benefits .deep-list,
  .landing-events .deep-list { margin-top: 0; }

  /* ── ④ 선은 «사이» 에만 — 감싸는 선(첫 항목 위 · 마지막 아래) 제거 ──
     목록이 위아래 선으로 «닫혀» 있어 「행 4개」가 아니라 「칸 4개」로 읽히던 자리.
     ⚠ 짝 규칙 — `.landing-draw.armed` 가 실제 border 를 transparent 로 죽이고 `::before`/
     `:last-child::after` 로 «그려지는 선» 을 대신 세운다(ADR 0428). border 만 끄면 JS 가 살아 있을 때
     대체선이 그대로 남고, 대체선만 끄면 JS 사망 시 실선이 남는다 — 반드시 둘 다. */
  .landing-benefits .ben-item { padding: 15px 0; }
  .landing-benefits .ben-item:first-child { border-top: none; }
  .landing-benefits .ben-item:last-child { border-bottom: none; }
  .landing-benefits .deep-row,
  .landing-events .deep-row { padding: 13px 0; }
  .landing-benefits .deep-row:first-child,
  .landing-events .deep-row:first-child { border-top: none; }
  .landing-benefits .deep-row:last-child,
  .landing-events .deep-row:last-child { border-bottom: none; }
  .landing-benefits .landing-draw.armed > *:first-child::before,
  .landing-events .landing-draw.armed > *:first-child::before,
  .landing-benefits .landing-draw.armed > *:last-child::after,
  .landing-events .landing-draw.armed > *:last-child::after { content: none; }

  /* ── ⑤ rail 20px 단일 + 설명 시작선 단일 ──
     구 `.deep-row { padding: 16px 4px }` 는 선을 20px 에서 긋고 글자는 24px 에서 시작시켜
     4px 어긋났다(바로 위 장점 셋은 선·글자 둘 다 20px 라 두 목록의 문법이 갈렸다).
     셰브론 우측도 366 → 370px 로 카드·컨테이너와 한 선이 된다.
     라벨 폭은 84(둘러보기) ↔ 96(이벤트) 이라 설명 시작선이 122 ↔ 134 로 갈렸다 → 96 단일.
     84 로 통일 ❌ — 「데이터 이전」이 넘쳐 행마다 시작선이 또 갈린다.
     ⚠️ 2026-08-26: base 가 96 으로 올라가 아래 2줄은 **중복**이다(끄면 96 이 그대로 유지된다).
     스코프 기록으로만 존치 — 이 블록을 통삭제해도 데스크톱이 84 로 안 돌아온다(base 주석 참조). */
  .landing-benefits .deep-row-label,
  .landing-events .deep-row-label { min-width: 96px; }

  /* ── ⑥ 카카오 각주도 본문 축 ──
     `.deep-kakao` 만 `text-align: center` 라, 바로 위 4행이 좌측인데 각주 하나가 가운데 떠 있었다.
     데스크톱은 섹션 머리까지 중앙이라 정합이므로 «모바일에서만» 좌측 (홈 전용 클래스 · 사용처 1곳). */
  /* `.deep-kakao` 좌측 오버라이드는 base 가 좌측이 되며 «중복»이 돼 삭제 (2026-08-26) — 재도입 ❌ */

  /* ── ⑦ nav 슬림 = 로고 48 → 40px (nav 69 → 57px) ──
     홈 모바일 nav 는 메뉴 3개·CTA 가 전부 display:none 이라 «로고 한 개»가 sticky 로 69px 을 상시 점유했다.
     시안 `landing-mobile-axis` 프레임이 이 값으로 그려진 채 확정됐다.

     ⚠ 이 두 줄만 «홈 전용 스코프의 의도된 예외» — 무스코프라 features 4페이지·법률 2페이지에도 걸린다.
     nav 는 «셸» 이라 페이지마다 높이가 다르면 홈 → 기능 페이지 이동에서 상단이 12px 튄다.
     실측(390·320px 전 페이지): nav 57~58px 통일 · 로고 40px · 백링크 히트박스 52px 유지 · 넘침 0.
     홈만 스코프하기 ❌ (그 순간 셸이 페이지마다 두 높이가 된다).
     데스크톱은 min-width:769px 블록의 52px 이 그대로 이긴다 — 불변. */
  .landing-nav { padding: 8px 0; }
  .nav-logo-wordmark { height: 40px; }
  /* ⚠ 짝 규칙 — 로고를 48 → 40 으로 줄이면 `a.nav-logo` 탭 대상이 40px 이 되어 44px 하한을 깬다
     (48 일 때는 저절로 충족했다). 히트박스 확대 idiom = padding + 동값 음수 마진으로
     판정만 44 로 넓히고 nav 높이 57px 은 불변(§액션 행 · `.nav-back` 과 같은 문법).
     **로고 높이를 다시 만질 땐 이 값도 함께 재계산**(44 − 로고높이 ÷ 2). */
  .landing-nav .nav-logo { padding: 2px 0; margin: -2px 0; }

  /* ── ⑧ 카드 안쪽 rail = 24px, 두 카드 공통 ── [[0438]]
     구 상태는 축이 «둘» 갈려 있었다: ① 「곧 나와요」 16 ↔ 요금 카드 24/32 ② 요금 카드만
     `@media (max-width: 520px)` — 랜딩 전체가 768/769 인데 이 파일에서 520px 은 그 규칙들뿐이라,
     **521~768px(태블릿 세로·큰 폰 가로)에서만** 데스크톱 rail 이 걸려 카드가 12px 더 높았다.
     → 두 카드 모두 «모바일 24 / 데스크톱 32», 경계는 랜딩 표준 768.
     데스크톱 요금 카드는 679px 그대로 불변 — 값이 아니라 «경계»만 옮긴 것.
     ⚠ `.pricing-amount { font-size: 46px }` 는 rail 과 다른 축이라 520px 에 남겼다 — 합치지 ❌.
     대가 = 폰에서 「곧 나와요」 +11~23px(390px 3줄→4줄 · 360px 은 변화 0). 구 16px 재도입 ❌ */
  /* `.soon-strip` 은 [[0480]] 로 카드가 아니게 돼 이 «카드 안쪽 rail» 목록에서 빠졌다 —
     좌우 0(base)이라 본문 축 20px 에 그대로 앉는다. 24px rail 재부여 ❌ */
  .pricing-slider-wrap,
  .pricing-formula { padding-left: 24px; padding-right: 24px; }
  .pricing-hero { padding: 28px 24px 24px; }
  .pricing-cta-wrap { padding: 18px 24px 24px; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .landing-fade-in { transition: none; opacity: 1; transform: none; }
  .vid-card.landing-fade-in { transition: none; opacity: 1; transform: none; }
  .hero-text > * { animation: none; }
  .vid-dot { transition: none; }
  .landing-stagger .landing-fade-child { transition: none; opacity: 1; transform: none; }
  /* 구 .event-card 가드 폐지 — .deep-row 계열 hover 트랜지션은 위 .deep-row-label/-desc 규칙이 담당 */

  /* 이식 구역 모션 가드 (2026-08-15 UI 감사) — 2026-08-12 랜딩 CSS 단일화 때 style.css 의
     선언부(구 17289~)만 옮겨오고 바로 아래 있던 reduced-motion 가드는 누락돼, 랜딩에서만
     무한 애니메이션이 살아 있었다. style.css 「모션 시스템 전체 무효」 블록과 같은 어휘. */
  body[data-motion="delight"] .motion-orb,
body[data-motion="delight"] .motion-gradient-num {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 구 `.af-*` steps 깜빡임 가드 — 2026-08-24 죽은 CSS 스윕으로 대상 소멸(사용처 0).
     랜딩 고유 steps 무한 깜빡임을 재도입하면 여기에 가드를 다시 둘 것. */

  /* 모션 패키지 B 가드 ([[0428]]) — 진입 5종은 «끝난 상태»로, 상시 3종은 정지.
     선은 scaleX(1) 로 고정해야 한다 — animation 만 끄면 scaleX(0) 초기값이 남아 hairline 이 사라진다. */
  .hero-ln > span,
  .hero-text > .hero-cta { animation: none; transform: none; }
  .hero-text h1 .hero-ln--em > span {
    background: none; color: var(--landing-primary);
    -webkit-text-fill-color: currentColor;
  }
  .sec-rule,
  .landing-draw.armed > *::before,
  .landing-draw.armed > *:last-child::after { animation: none; transform: scaleX(1); }
  .landing-draw > .landing-fade-in,
  .landing-draw > .landing-fade-child { transform: none; transition-delay: 0s; }
  .landing-hero .landing-btn-primary::after,
  .pricing-cta-wrap .landing-btn-primary::after,
  .soon-dot::after { animation: none; display: none; }
  /* 진행선 = 스크롤 연동 표지라 「정지」가 의미 없다 → 통째로 숨긴다 (JS 도 조기 return) */
  .nav-scroll-progress { display: none; }

  /* 기능 소개 4페이지 가드 ([[0429]]) — 진입 전부 «끝난 상태» */
  .landing-features .feat-head .sec-rule { animation: none; transform: scaleX(1); }
  /* 모바일 행 페이드도 정지 — 위 `@media (max-width:768px)` 규칙과 동특이도라
     이 가드 블록이 «뒤»에 있어야 이긴다 (선언 순서 의존, 위로 옮기지 ❌) */
  .landing-features .feat-row.landing-fade-in { opacity: 1; transform: none; transition: none; }
  .landing-features .feat-row > .feat-text,
  .landing-features .feat-row > .feat-shot,
  .landing-features .feat-list li {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
}

/* ── Legal Pages (이용약관, 개인정보처리방침) ── */
.legal-page { padding: 40px 0; }
.legal-title { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; color: var(--landing-gray-900); margin-bottom: 8px; }
.legal-date { font-size: 13px; color: var(--landing-gray-500); margin-bottom: 24px; } /* gray-400 대비 ≈2.85:1 → 500 (2026-07-30 UI 감사) */

/* 목차 (약관·개인정보 inline 앵커 chips) */
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 28px;
  background: var(--landing-gray-50, #f8fafc);
  border: 1px solid var(--landing-gray-200, #e2e8f0);
  border-radius: 10px;
  max-width: 720px;
}
.legal-toc a {
  font-size: 12px;
  font-weight: 600;
  /* 세로 44px — 구 5px 은 32.4px 로 터치 최소치 미달이었다 (2026-08-27 사용자 확정 B안 ·
     시안 `legal-toc-and-fill-contrast`). 조항 이름을 줄이는 2열안은 «법률 문안 변경»이 따라와 미채택.
     ⚠ 이 칩은 «보이는 상자»(흰 면+테두리+radius)라 히트박스 확대 idiom 을 못 쓴다 — 칩 자체가 커진다.
     그래도 §히트박스 idiom 의 「wrap 격자는 row-gap 도 함께」 함정은 안 걸린다: 여기선 상자가 실제로
     커져 형제가 밀려나므로 겹칠 판정이 없다(투명 확장이 아니다). 대가 = 목차 블록이 높아진다.
     5px 복귀 ❌ */
  padding: 11px 10px;
  background: #fff;
  border: 1px solid var(--landing-gray-200, #e2e8f0);
  border-radius: 6px;
  color: var(--landing-primary-dark);
  text-decoration: none;
  transition: all 0.15s;
}
@media (hover: hover) {
  .legal-toc a:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
  }
}
/* h2 앵커 스크롤 시 상단 고정 nav 높이만큼 offset */
.legal-content h2[id] { scroll-margin-top: 80px; }

.legal-content { max-width: 720px; }
/* weight 800 = 제목 사다리(같은 페이지 `.legal-title` 이 이미 800 · 구 700 은 btn·form-label·badge 체급).
   크기 17·색 gray-800 은 문서 조판이라 그대로 — 홈 머리말 19 로 올리기 ❌ */
.legal-content h2 { font-size: 17px; font-weight: 800; color: var(--landing-gray-800); margin: 28px 0 12px; }
.legal-content p { font-size: 14px; color: var(--landing-gray-600); line-height: 1.8; margin-bottom: 12px; }
.legal-content ol,
.legal-content ul { padding-left: 20px; margin-bottom: 12px; }
.legal-content li { font-size: 14px; color: var(--landing-gray-600); line-height: 1.8; padding: 2px 0; }
.legal-content ul { list-style: disc; }
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 13px; }
.legal-table th,
.legal-table td { padding: 10px 14px; border: 1px solid var(--landing-gray-200); text-align: left; color: var(--landing-gray-600); }
/* 표 안 연락처(mailto/tel)도 히트 44px (2026-08-27 사용자 확정 A안 · 시안 `footer-contact-touch`).
   글자 줄높이 22.1px + 패딩 11px×2 = 44.1 — **14px 로 주면 50.1px 로 과하고** 두 연락처 사이가
   28.1 → 9px 로 좁아진다(실측). 셀 패딩은 원값 유지 — 음수 마진이 지오메트리를 되돌려 표 높이 불변. */
.legal-table a[href^="mailto"],
.legal-table a[href^="tel"] { display: inline-block; padding: 11px 0; margin: -11px 0; }
/* 짝 = 이웃 행과의 간격. 두 연락처가 «인접 행»이라 각자 14.55px 씩 자라면 29.1px 를 먹는데
   원 간격이 28.1px 라 **1px 겹쳤다**(실측). 셀 세로 패딩 10 → 12px 로 행 사이를 4px 벌려 3px 여유.
   §히트박스 확대 idiom 「간격도 함께 벌린다」 — 한쪽만 바꾸면 겹침이 재발한다. */
.legal-table td:has(a[href^="mailto"]),
.legal-table td:has(a[href^="tel"]) { padding-top: 12px; padding-bottom: 12px; }
.legal-table th { background: var(--landing-gray-50); font-weight: 600; color: var(--landing-gray-700); }
/* 가로 스크롤 컨테이너 = 표 래퍼 한 겹 (§이중 스크롤 금지 「표 가로 스크롤 = 축이 다름」 예외는 *표* 대상).
   구 `.legal-content { overflow-x: auto }` 는 min-width 480 인 표 때문에 약관 본문 전체가
   가로 스크롤 컨테이너가 돼, 표를 밀려고 스와이프하면 조문 제목·문단까지 함께 밀렸다.
   세로 hidden 명시 필수 — 미지정 시 CSS 스펙상 overflow-y 가 auto 로 계산돼 세로 스크롤이 생긴다. */
.legal-table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
/* 상시 표시 바 = 「옆으로 더 있다」 신호 ([[0488]]) — 관리자 엑셀 표([[0484]] ③)와 «같은 어휘».
   구 상태는 `overflow-x: auto` 한 줄뿐이라 macOS 기본값에서 크롬이 오버레이 바를 썼다 —
   손을 떼면 사라지고 두께 7px. 390px 에서 wrap 350 vs 표 480 = 27% 가 숨는데 그걸 말하는 신호가 0 이었다.
   ⚠️ `::-webkit-scrollbar` 를 «선언하는 것 자체»가 크롬의 오버레이 모드를 끄고 클래식 바로 되돌린다 —
   두께만 키우려고 `height` 만 적고 트랙·썸 색을 빼면 바가 다시 사라진다(셋이 한 벌).
   ⚠️ JS 토글 불필요 — 넘칠 때만 뜨고 안 넘치면 0px 을 «브라우저가» 판정한다(실측 14px ↔ 0px).
   [[0484]] 의 `Utils.watchScrollEdge` 는 «페이드» 몫이었고 랜딩 셸엔 그 유틸이 없다.
   우측 페이드 미도입 = 인지된 대가([[0488]]) — CSS 만으로는 「끝까지 밀었다」를 못 말한다. */
.legal-table-wrap::-webkit-scrollbar { height: 14px; }
.legal-table-wrap::-webkit-scrollbar-track { background: var(--landing-gray-100); border-radius: 999px; }
/* 썸 테두리 = 트랙과 같은 색 3px — 보이는 두께 8px, 잡히는 판정 14px (히트영역 확대 idiom 의 스크롤바 판) */
.legal-table-wrap::-webkit-scrollbar-thumb {
  background: var(--landing-gray-300); border-radius: 999px; border: 3px solid var(--landing-gray-100);
}
@media (hover: hover) {
  .legal-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--landing-gray-400); }
}
@media (max-width: 768px) {
  .legal-table { min-width: 480px; }
}
.legal-notice { margin-top: 32px; padding: 16px 20px; background: var(--landing-gray-50); border-radius: 10px; } /* 형제 .legal-toc(10px) 정합 (2026-08-04 사용자 확정, 구 8) */
.legal-notice p { margin-bottom: 0; color: var(--landing-gray-500); }
/* 개정 이력 = 시행일과 성격이 다른 누적 블록 (2026-08-22 UI 감사 B안).
   방침만 대상 — 약관은 .legal-notice 안이 <p> 1줄이라 발동하지 않는다 */
/* 자간 = 랜딩 마이크로 라벨 롤 0.03em ([[0487]] — 구 0.02em 은 근거 없는 제N값이었다).
   앱 표준 0.04em 과 의도적 분리(랜딩 한정) · 0.02em 복귀 ❌ */
.legal-rev-head { margin-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: var(--landing-gray-500); }
/* `.legal-content` 스코프 필수 — 맨 셀렉터(0,1,0)는 위쪽 `.legal-content ul`(0,1,1)에 특이도로 져서
   list-style/padding/margin 세 선언이 통째로 죽는다(UA disc + ::before dot 이중 불릿 + 20px 잉여 들여쓰기).
   빌드·렌더 에러가 0이라 조용히 지나간다 — 2026-08-22 UI 감사 실측. 맨 셀렉터 복귀 ❌
   (같은 파일 `.landing-page .nav-back` 이 2026-08-19 에 같은 원인을 같은 방식으로 고친 선례) */
.legal-content .legal-rev-list { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--landing-gray-200); }
.legal-rev-list li { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.8; color: var(--landing-gray-500); }
.legal-rev-list li + li { margin-top: 6px; }
.legal-rev-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--landing-gray-400); }

/* ── 이용권 페이지 (features/membership-pass) 전용 ── */
/* 이용권 종류 목업 행 (shot 내 4종 리스트) */
.ptr { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--landing-gray-100); }
.ptr:first-of-type { border-top: none; }
.ptr-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ptr-name { font-size: 13px; font-weight: 800; color: var(--landing-gray-900); }
.ptr-ex { font-size: 12px; color: var(--landing-gray-500); }
.ptr-price { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--landing-gray-900); font-variant-numeric: tabular-nums; }

/* 결제 방법 목업 — 결제수단 종류 칩 (shot 내) */
.pay-types { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pay-type { font-size: 12px; font-weight: 800; padding: 8px 14px; border-radius: 50px; line-height: 1; background: #fff; color: var(--landing-gray-900); border: 1px solid var(--landing-gray-200); }
/* 간편결제 브랜드 칩 (카카오·네이버페이) — pm-chip 어휘 통일 (2026-07-27 UI 감사 사용자 확정):
   흰 면 + hairline, 브랜드색은 로고 마크(svg 18px 타일)에만 — 브랜드 솔리드 면 재도입 ❌ (Brand Mono Strict) */
/* 간편결제 브랜드 칩 — **복원 대기(고아 아님)**. 2026-08-23 무-토스 전환으로
   features/membership-pass·member-app 목업이 `.pay-type` 「무통장 입금」 하나만 남기며 매칭 요소 0.
   두 템플릿 주석의 「토스 개통 시 되돌린다」와 한 벌이라 삭제 ❌ (2026-08-23 사용자 확정).
   다음 감사에서 「사용처 0 = 죽은 CSS」로 재지적 ❌ */
.pay-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 5px 12px 5px 7px; border-radius: 50px; line-height: 1; white-space: nowrap; background: #fff; color: var(--landing-gray-900); border: 1px solid var(--landing-gray-200); }
.pay-brand svg { width: 18px; height: 18px; padding: 3.5px; box-sizing: border-box; flex: 0 0 auto; }
.pay-brand.kakao svg { background: #fee500; fill: #3C1E1E; border-radius: 50%; }
.pay-brand.naver svg { background: #03c75a; fill: #fff; border-radius: 5px; }