/* ═══════════════════════════════════════════════════════════
 *  Macro Weather — 공통 스타일
 *  index.html · features.html · pricing.html · founders.html · faq.html
 *  전 페이지 공통 리셋·색상·컴포넌트·섹션 스타일 (2026-07-29)
 * ═══════════════════════════════════════════════════════════ */

  /* ─── View Transitions API ─────────────────────────────
   *  같은 도메인 페이지 이동 시 부드러운 크로스페이드 + 슬라이드.
   *  미지원 브라우저는 자동으로 기존 방식(하드 리로드).
   * ──────────────────────────────────────────────────── */
  @view-transition { navigation: auto; }

  ::view-transition-old(root){
    animation: mw-fade-out .18s ease both;
  }
  ::view-transition-new(root){
    animation: mw-fade-in .28s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes mw-fade-out{
    to{ opacity:0; transform:translateY(-6px); }
  }
  @keyframes mw-fade-in{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    ::view-transition-old(root),
    ::view-transition-new(root){ animation-duration:.01ms; }
  }

  /* 상단 네비게이션은 전환 중 고정 — 껌뻑임 방지 */
  .nav{ view-transition-name: mw-nav; }
  ::view-transition-group(mw-nav){ animation-duration:.28s; }

  /* ─── Reveal on Scroll · Apple-style (less but better) ───
   *  단일 모션: fade + 14px slide-up. 550ms, 부드러운 ease-out.
   *  그리드 자식은 60ms 스태거로 순차 등장.
   *  자바스크립트 미로드 or reduced-motion 시 즉시 표시.
   * ──────────────────────────────────────────────────── */
  .reveal,
  .reveal-group > *{
    opacity:0;
    transform:translateY(14px);
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in,
  .reveal-group.in > *{
    opacity:1;
    transform:translateY(0);
  }
  /* 그리드 자식 스태거 */
  .reveal-group.in > *:nth-child(1){ transition-delay:0ms; }
  .reveal-group.in > *:nth-child(2){ transition-delay:60ms; }
  .reveal-group.in > *:nth-child(3){ transition-delay:120ms; }
  .reveal-group.in > *:nth-child(4){ transition-delay:180ms; }
  .reveal-group.in > *:nth-child(5){ transition-delay:240ms; }
  .reveal-group.in > *:nth-child(6){ transition-delay:300ms; }
  .reveal-group.in > *:nth-child(n+7){ transition-delay:360ms; }

  /* 접근성 · 모션 축소 사용자는 즉시 표시 */
  @media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal-group > *{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }
  /* JS 미로드 대비 fallback: no-js 클래스 없으면 즉시 */
  html:not(.js-ready) .reveal,
  html:not(.js-ready) .reveal-group > *{
    opacity:1;
    transform:none;
    transition:none;
  }

  /* ⚠ MWHeadKR(Gmarket Sans Bold 서브셋)을 걷어냈다 (34차).
     사용자 지적 "화면이 고급스럽지 않다"의 진짜 원인이 이 서체였다 — 둥글고 친근한
     제목체라 한글 제목이 말랑해 보였다. 파일(fonts/mwhead-kr.woff2)은 남겨 두되
     어디서도 부르지 않는다. 되돌리려면 이 @font-face 를 살리고 --font-hd 앞에 넣으면 된다.

     지금 체계 (타입 시스템 v2 · 34차):
       한글 제목  Wanted Sans Variable  가변축 400~1000 · jsDelivr · SIL OFL 1.1
       한글 본문  Pretendard Variable   가변축  45~ 920 · jsDelivr · SIL OFL 1.1
       라틴·숫자  Schibsted Grotesk     가변축 400~ 900 · jsDelivr · SIL OFL 1.1
     ⚠ 셋 다 **가변축**이다. 굵기를 몇 벌 쓰든 파일이 한 벌이라 무게 조정에 용량 비용이 없다.
       정적 Pretendard 는 9굵기 × 92조각 = 828개 @font-face 라 굵기 수가 곧 전송량이었다. */

  /* 라틴·숫자 — unicode-range 로 라틴에만 잠근다. 한글은 아래 두 서체가 그린다. */
  @font-face{
    font-family:'Schibsted Grotesk';
    font-style:normal; font-weight:400 900; font-display:swap;
    src:url('https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/files/schibsted-grotesk-latin-wght-normal.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                  U+2000-2017,U+201E-2025,U+2027-206F,U+20AC,U+2122,U+2191,U+2193,
                  U+2212,U+2215,U+FEFF,U+FFFD;
  }

/* ── 화면이 넓어지면 글자도 함께 커진다 (34차) ────────────────────
   사용자 지적: "앱에서는 폰트 크기가 적당한데 노트북·컴퓨터로 볼 때는 너무 작다."
   실측 원인: 앱 컬럼은 폰 390px → 데스크톱 720px 로 **1.85배** 넓어지는데
     글자는 14.8px → 16px 로 1.08배밖에 안 커졌다. 안쪽 요소가 전부 고정 px 이라
     화면이 넓어져도 그대로였다(실제 본문의 60%가 11~12px).
   ⚠ 그래서 고정 px 을 calc(NNpx * var(--fs)) 로 바꿔 두고 여기서 배율만 준다.
     px 값 1,630곳을 하나씩 고르는 대신 배율 하나로 조절한다 —
     비율이 무너지지 않고, 되돌릴 때도 이 블록만 지우면 된다.
   ⚠ clamp() 안의 px 은 건드리지 않았다. 이미 유동값이라 두 번 스케일되면 과해진다. */
:root{--fs:1;}
@media (min-width:  760px){ :root{--fs:1.06;} }
@media (min-width: 1024px){ :root{--fs:1.13;} }
@media (min-width: 1440px){ :root{--fs:1.19;} }
@media (min-width: 1800px){ :root{--fs:1.24;} }


  :root{
    /* Sunrise Amber — 매크로웨더 브랜드 컬러 시스템 */
    --gold:#E27C1F; --gold-deep:#B85C0E; --gold-soft:#FEF3E2; --gold-tint:#FFF8ED;
    --gold-light:#F2A83E;
    --sky:#58CCEE; --sky-deep:#249FC4; --sky-soft:#E3F6FC;
    --grass:#58CC02; --grass-deep:#3E8E00; --grass-soft:#E7F9D5;
    --coral:#FF6B6B; --coral-deep:#D64545; --coral-soft:#FFE7E7;
    --grape:#A78BFA; --grape-deep:#7C5CE3; --grape-soft:#F0EAFF;

    /* 텍스트 전용 — -deep 색들은 자기 -soft 배경 위에서 AA 미달(2.7~4.4:1)이라
       글자에는 아래 토큰을 쓴다. -deep은 버튼 그림자·테두리 등 면 전용. */
    --gold-text:#8F5B0A; --sky-text:#0E6E8C; --grass-text:#2F6B00;
    --grape-text:#5B3FC4; --coral-text:#A82F2F;
    --mint:#5EEAD4; --mint-deep:#0EA5A0; --mint-soft:#DDFBF3;
    --rose:#F472B6; --rose-deep:#DB2777; --rose-soft:#FDE8F1;
    --amber:#FF9F1C; --amber-deep:#D77800; --amber-soft:#FFEED0;

    --ink:#1F2937; --ink2:#4B5563; --ink3:#6B7280; --ink4:#9CA3AF;
    --line:#E5E7EB; --line2:rgba(31,41,55,.10);
    --bg:#FFFBF2; --white:#FFFFFF; --paper:#FFFDF6;
    --navy:#0B1220; --navy2:#111827;

    /* ⚠ 순서가 곧 규칙이다. Schibsted 는 라틴만 담고(위 unicode-range),
       한글은 그다음 서체가 그린다. 마지막 Pretendard Variable 은 두 서체 모두에
       없는 글자(희귀 음절·기호)를 받는 안전망이다. */
    --font-hd:'Schibsted Grotesk','Wanted Sans Variable','Pretendard Variable','Apple SD Gothic Neo',sans-serif;
    --font-body:'Schibsted Grotesk','Pretendard Variable','Apple SD Gothic Neo',-apple-system,sans-serif;
    --font-mono:'DM Mono',ui-monospace,monospace;
    --font-head:var(--font-hd);   /* 일부 페이지가 쓰는 별칭 */

    /* ⚠ 한글 본문 굵기 (34차 · 사용자 지적 "글씨가 빈약해보이고 잘 안 읽혀").
       한글은 한 글자에 들어가는 획이 라틴보다 많아 같은 400 이라도 흐려 보인다.
       가변축이라 550 같은 중간값을 쓸 수 있고, 굵기를 늘려도 파일이 안 늘어난다. */
    --w-body:550;   /* 본문 */
    --w-em:760;     /* 본문 속 강조 */
    --w-hd:800;     /* 제목 */

    --shadow:0 8px 20px rgba(31,41,55,.08);
    --shadow-lg:0 18px 40px rgba(31,41,55,.12);
    --shadow-xl:0 30px 60px rgba(31,41,55,.18);
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);color:var(--ink);
    /* ⚠ 한글 본문은 550 부터가 제대로 읽힌다 (34차). 가변축이라 비용 없음. */
    font-family:var(--font-body);font-weight:var(--w-body,550);line-height:1.6;
    /* ⚠ -webkit-font-smoothing:antialiased 를 뺐다 (34차 · "글씨가 선명하게 안 보여").
     macOS 에서 이 값은 글자를 **일부러 얇게** 그린다. 굵기를 900→800 으로 낮춘 것과
     겹쳐 흐릿해졌다. 기본값(auto)이 획을 제 두께로 그려 또렷하다. */overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
  .wrap-wide{max-width:1240px;margin:0 auto;padding:0 24px;}

  /* ═══════════ SHARED BUTTONS ═══════════ */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--font-body);font-weight:800;text-decoration:none;cursor:pointer;
    user-select:none;border:none;transition:transform .1s ease,box-shadow .1s ease,filter .15s;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--gold);color:#3B2A00;padding:12px 22px;border-radius:16px;font-size:calc(15px * var(--fs,1));
    box-shadow:0 1px 2px rgba(31,41,55,.10),0 10px 24px -10px rgba(226,124,31,.5);
  }
  .btn-primary:hover{filter:brightness(1.04);}
  .btn-primary:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(31,41,55,.12);}
  /* .nav-links a (구체성 0-1-1)가 .btn-primary (0-1-0)의 color를 덮어써서
     헤더 "앱 열기" 버튼이 골드 배경 위 회색 글씨(2.6:1)가 되던 문제.
     nav 안에서도 버튼 색을 유지한다. */
  .nav-links a.btn-primary{color:#3B2A00;}
  .btn-lg{padding:17px 30px;font-size:calc(17px * var(--fs,1));border-radius:16px;box-shadow:0 1px 2px rgba(31,41,55,.10),0 10px 25px -10px rgba(31,41,55,.30);}
  .btn-lg:active{box-shadow:0 1px 2px rgba(31,41,55,.10),0 2px 5px -2px rgba(31,41,55,.30);}
  .btn-ghost{
    background:#fff;color:var(--ink);padding:15px 26px;border-radius:16px;font-size:calc(16px * var(--fs,1));font-weight:800;
    box-shadow:inset 0 0 0 2px var(--line);
  }
  .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);background:#FAFAFA;}
  .btn-dark{background:#3B2A00;color:#FEF3E2;padding:15px 26px;border-radius:16px;font-size:calc(16px * var(--fs,1));font-weight:800;box-shadow:0 1px 2px rgba(31,41,55,.10),0 10px 25px -10px rgba(31,41,55,.30);}
  .btn-dark:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(15,23,42,.16);}
  /* --grape(#A78BFA)에 흰 글씨는 2.7:1로 WCAG AA 미달 → 채움을 한 톤 진하게(4.7:1) */
  .btn-grape{background:var(--grape-deep);color:#fff;box-shadow:0 1px 2px rgba(31,41,55,.10),0 12px 26px -12px rgba(124,92,227,.55);}
  .btn-grape:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(31,41,55,.12);}

  /* ═══════════ NAV ═══════════ */
  .nav{
    position:sticky;top:0;z-index:80;
    background:rgba(255,251,242,.92);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line2);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1240px;margin:0 auto;gap:20px;}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-hd);font-weight:800;font-size:calc(20px * var(--fs,1));letter-spacing:-.5px;text-decoration:none;color:var(--ink);}
  /* 랜딩에서 브랜드명을 h1으로 올리기 위한 래퍼. h1 기본 마진·폰트크기를 지워
     기존 <a class="brand">가 직접 flex 자식이던 때와 렌더 결과가 같도록 맞춘다. */
  .brand-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;display:flex;align-items:center;}
  /* 브랜드 마크 — 앱 아이콘(main.svg)이 아니라 로고 심볼(타륜-캔들)을 쓴다.
     앱 아이콘은 홈화면용이고 여기는 로고가 놓이는 자리다. 골드 라운드 스퀘어 +
     3px 하단 그림자는 디자인 시스템 공통 스타일이라 유지한다. */
  .brand-logo{
    width:36px;height:36px;border-radius:12px;
    background:url('/icons/brand/symbol-mono-white.svg') center/74% no-repeat,
               linear-gradient(140deg,var(--gold-light) 0%,var(--gold) 100%);
    display:grid;place-items:center;font-size:0;box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);
  }
  .nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
  .nav-links a{padding:9px 12px;border-radius:12px;font-weight:800;font-size:calc(14px * var(--fs,1));color:var(--ink2);text-decoration:none;}
  .nav-links a:hover{background:var(--gold-soft);color:var(--ink);}
  @media(max-width:1000px){ .nav-links a.nl-item{display:none;} }

  /* ═══════════ HERO ═══════════ */
  .hero{position:relative;padding:64px 0 48px;overflow:hidden;}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(60% 60% at 12% 8%, rgba(226,124,31,.38), transparent 60%),
      radial-gradient(50% 50% at 88% 12%, rgba(88,204,238,.28), transparent 65%),
      radial-gradient(50% 50% at 90% 90%, rgba(167,139,250,.22), transparent 65%);
  }
  .hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;}
  @media(max-width:900px){.hero-in{grid-template-columns:1fr;gap:28px;}}
  .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line2);font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--ink2);}
  .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--grass);animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(1.35);}}
  /* 태그 선택자(h1.hero-h)였다가 클래스 선택자로 완화 — 랜딩 h1을 브랜드명(.brand-h)에
     넘기고 히어로 카피는 h2가 됐다. 타이포는 그대로 유지된다(2026-08-11). */
  .hero-h{font-family:var(--font-hd);font-weight:800;letter-spacing:-1.2px;font-size:clamp(40px,6vw,66px);line-height:1.02;margin:20px 0 18px;color:var(--ink);}
  .hero-h .u{background:linear-gradient(180deg,transparent 62%,var(--gold-soft) 62%);padding:0 4px;border-radius:4px;}
  .hero-h .em{color:var(--gold-text);}
  p.hero-sub{font-size:calc(18px * var(--fs,1));color:var(--ink2);max-width:540px;line-height:1.65;}
  .hero-sub b{color:var(--ink);}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
  .hero-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px;max-width:520px;}
  .hero-mini > div{padding:14px 10px;background:#fff;border-radius:16px;border:1px solid var(--line2);text-align:center;box-shadow:var(--shadow);}
  .hero-mini b{display:block;font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));color:var(--gold-text);font-weight:800;letter-spacing:-.4px;}
  .hero-mini small{color:var(--ink3);font-size:calc(12px * var(--fs,1));font-weight:700;}
  @media(max-width:520px){.hero-mini{grid-template-columns:repeat(2,1fr);}}

  /* Hero device — 유일한 폰 목업 */
  .device{position:relative;width:100%;max-width:380px;aspect-ratio:9/17.2;margin:0 auto;background:var(--navy);border-radius:44px;padding:12px;box-shadow:0 30px 60px rgba(15,23,42,.28),inset 0 0 0 2px var(--navy2);}
  .device::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:100px;height:26px;background:var(--navy);border-radius:0 0 18px 18px;z-index:3;}
  .device-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(160deg,#FEF3E2 0%,#FBCB84 55%,#E27C1F 100%);display:flex;flex-direction:column;}
  .ds-top{padding:44px 20px 14px;display:flex;justify-content:space-between;align-items:center;color:#3B2A00;}
  .ds-top .greet{font-family:var(--font-hd);font-weight:800;font-size:calc(20px * var(--fs,1));}
  .ds-top .streak{background:#fff;border-radius:999px;padding:5px 12px;font-weight:800;font-size:calc(13px * var(--fs,1));color:var(--coral-text);box-shadow:var(--shadow);}
  .ds-card{margin:12px 14px;padding:16px;border-radius:24px;background:#fff;box-shadow:var(--shadow);}
  .ds-card h4, .ds-card .ds-card-h{font-family:var(--font-hd);font-weight:800;font-size:calc(15px * var(--fs,1));margin-bottom:8px;}
  .ds-q{font-size:calc(15px * var(--fs,1));color:var(--ink);line-height:1.4;font-weight:600;}
  .ds-opts{display:grid;gap:8px;margin-top:12px;}
  .ds-opt{padding:11px 14px;border-radius:16px;font-weight:800;font-size:calc(14px * var(--fs,1));box-shadow:inset 0 0 0 2px var(--line);background:#fff;color:var(--ink2);display:flex;align-items:center;gap:8px;}
  .ds-opt.correct{box-shadow:inset 0 0 0 2px var(--grass),0 3px 0 var(--grass-deep);color:var(--grass-text);background:var(--grass-soft);}
  .ds-opt .k{font-family:var(--font-mono);color:var(--ink3);font-size:calc(12px * var(--fs,1));background:#F3F4F6;padding:2px 6px;border-radius:8px;}
  .ds-xp{margin:6px 14px 14px;padding:11px 14px;border-radius:16px;background:linear-gradient(90deg,#fff,#FEF3E2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);}
  .ds-xp b{font-family:var(--font-hd);font-weight:800;color:var(--gold-text);}
  .float-badge{position:absolute;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;font-weight:800;font-size:calc(13px * var(--fs,1));animation:float 3.4s ease-in-out infinite;}
  .fb-1{top:6%;left:-28px;color:var(--sky-text);}
  .fb-2{bottom:16%;right:-24px;color:var(--grape-text);animation-delay:.8s;}
  .fb-3{top:44%;right:-32px;color:var(--coral-text);animation-delay:1.6s;}
  .fb-emoji{font-size:calc(22px * var(--fs,1));}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

  /* ═══════════ SECTION SHELL ═══════════ */
  section{padding:104px 0;position:relative;}
  @media(max-width:640px){section{padding:72px 0;}}
  .eyebrow{display:inline-block;font-family:var(--font-mono);text-transform:uppercase;font-size:calc(12px * var(--fs,1));letter-spacing:2px;color:var(--gold-text);font-weight:600;padding:5px 12px;background:var(--gold-soft);border-radius:999px;}
  .eyebrow.sky{color:var(--sky-text);background:var(--sky-soft);}
  .eyebrow.grape{color:var(--grape-text);background:var(--grape-soft);}
  .eyebrow.grass{color:var(--grass-text);background:var(--grass-soft);}
  .eyebrow.rose{color:var(--rose-deep);background:var(--rose-soft);}
  .eyebrow.coral{color:var(--coral-text);background:var(--coral-soft);}
  .eyebrow.amber{color:var(--amber-deep);background:var(--amber-soft);}
  .eyebrow.mint{color:var(--mint-deep);background:var(--mint-soft);}
  .eyebrow.dark{color:var(--gold);background:rgba(226,124,31,.15);}
  h2.sec-h{font-family:var(--font-hd);font-weight:800;letter-spacing:-.8px;font-size:clamp(30px,4.2vw,44px);line-height:1.15;margin:16px 0 12px;}
  h2.sec-h .u{background:linear-gradient(180deg,transparent 62%,var(--gold-soft) 62%);padding:0 4px;border-radius:4px;}
  .sec-lead{font-size:calc(17px * var(--fs,1));color:var(--ink2);max-width:660px;line-height:1.7;}
  .sec-center{text-align:center;}
  .sec-center .sec-lead{margin:0 auto;}

  /* ═══════════ PROOF STRIP ═══════════ */
  .proof{background:#fff;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:22px 24px;}
  .proof-in{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;color:var(--ink3);font-size:calc(13px * var(--fs,1));}
  .proof-in > div{display:flex;align-items:center;gap:8px;font-weight:700;}
  .proof-in b{color:var(--ink);font-family:var(--font-hd);font-weight:800;}
  .proof-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}

  /* ═══════════ WHY (Split — 임팩트 강화) ═══════════ */
  .why{background:linear-gradient(180deg,#FFFDF6 0%,#FEF3E2 100%);}
  .why-vs{
    margin-top:60px;position:relative;
    display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:stretch;
  }
  @media(max-width:820px){.why-vs{grid-template-columns:1fr;gap:20px;}.why-vs .vs-line{display:none;}}
  .why-side{padding:36px;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line2);}
  .why-side.no{background:linear-gradient(180deg,#fff,#FFF6F6);border-color:rgba(214,69,69,.2);}
  .why-side.yes{background:linear-gradient(180deg,#fff,#EFFDE9);border-color:rgba(62,142,0,.22);}
  .why-side h3{
    font-family:var(--font-hd);font-weight:800;font-size:calc(22px * var(--fs,1));letter-spacing:-.4px;
    display:flex;align-items:center;gap:10px;margin-bottom:22px;
  }
  .why-side.no h3{color:var(--coral-text);}
  .why-side.yes h3{color:var(--grass-text);}
  .why-list{list-style:none;display:grid;gap:12px;}
  .why-list li{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;background:rgba(0,0,0,.03);}
  .why-side.no li{background:rgba(255,107,107,.06);}
  .why-side.yes li{background:rgba(88,204,2,.07);}
  .why-list .li-em{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:calc(19px * var(--fs,1));background:#fff;box-shadow:var(--shadow);}
  .why-list li h5, .why-list li h4{font-family:var(--font-hd);font-weight:800;font-size:calc(15px * var(--fs,1));margin-bottom:2px;}
  .why-list li p{font-size:calc(13px * var(--fs,1));color:var(--ink2);line-height:1.5;}
  .vs-line{
    position:relative;display:grid;place-items:center;
  }
  .vs-arrow{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),#F5A652);color:#3B2A00;
    display:grid;place-items:center;font-family:var(--font-hd);font-weight:800;font-size:calc(20px * var(--fs,1));
    box-shadow:0 8px 20px rgba(226,124,31,.5);border:4px solid #fff;
    z-index:2;
  }
  .vs-line::before{
    content:"";position:absolute;top:50%;left:0;right:0;height:2px;
    background:repeating-linear-gradient(90deg,var(--gold-deep) 0 6px,transparent 6px 12px);
  }

  /* ═══════════ FEATURES SPOTLIGHT (alternating) ═══════════ */
  .fspot-wrap{background:linear-gradient(180deg,#FFFBF2 0%,#FFFDF6 100%);}
  .fspot{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
    margin-top:72px;
  }
  .fspot:first-of-type{margin-top:52px;}
  .fspot.rev{direction:rtl;}
  .fspot.rev > *{direction:ltr;}
  @media(max-width:900px){.fspot{grid-template-columns:1fr;gap:32px;}.fspot.rev{direction:ltr;}}
  .fspot-copy .num{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:calc(12px * var(--fs,1));letter-spacing:2px;color:var(--ink3);
    font-weight:600;text-transform:uppercase;
  }
  .fspot-copy .num .n{
    width:28px;height:28px;border-radius:50%;background:var(--gold);color:#3B2A00;
    display:grid;place-items:center;font-family:var(--font-hd);font-weight:800;font-size:calc(13px * var(--fs,1));
    box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);
  }
  .fspot-copy h3{
    font-family:var(--font-hd);font-weight:800;font-size:calc(32px * var(--fs,1));letter-spacing:-.6px;
    margin:14px 0 14px;line-height:1.15;
  }
  .fspot-copy p{font-size:calc(16px * var(--fs,1));color:var(--ink2);line-height:1.7;}
  .fspot-copy .bullets{margin-top:18px;list-style:none;display:grid;gap:9px;}
  .fspot-copy .bullets li{display:flex;gap:10px;align-items:flex-start;font-size:calc(15px * var(--fs,1));color:var(--ink);font-weight:600;}
  .fspot-copy .bullets li::before{content:"✦";color:var(--gold-text);font-weight:800;flex-shrink:0;}
  .fspot-tag{display:inline-block;margin-top:20px;font-size:calc(12px * var(--fs,1));font-family:var(--font-mono);padding:5px 12px;border-radius:999px;color:var(--ink2);background:#F3F4F6;letter-spacing:.5px;}

  /* ─── Custom visual: 1) MTSI 온도계 ─── */
  .viz-mtsi{
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);color:#F1F5F9;
    border-radius:32px;padding:32px;box-shadow:var(--shadow-xl);position:relative;overflow:hidden;
    aspect-ratio:1/1.05;display:flex;flex-direction:column;justify-content:space-between;
  }
  .viz-mtsi::before{
    content:"";position:absolute;inset:0;background:
      radial-gradient(50% 60% at 25% 15%,rgba(226,124,31,.18),transparent 60%),
      radial-gradient(40% 60% at 85% 85%,rgba(88,204,238,.14),transparent 60%);
  }
  .viz-mtsi > *{position:relative;}
  .viz-mtsi-top{display:flex;justify-content:space-between;align-items:flex-start;}
  .viz-mtsi-top .lbl{font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));letter-spacing:1.5px;color:#94A3B8;}
  .viz-mtsi-top .mood{background:var(--gold);color:#3B2A00;padding:6px 12px;border-radius:999px;font-weight:800;font-size:calc(12px * var(--fs,1));box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);}
  .viz-mtsi-mid{text-align:center;padding:20px 0;}
  .viz-mtsi-num{font-family:var(--font-hd);font-weight:800;font-size:calc(96px * var(--fs,1));line-height:1;color:var(--gold);letter-spacing:-3px;}
  .viz-mtsi-num .max{font-size:calc(32px * var(--fs,1));color:#64748B;font-weight:800;}
  .viz-mtsi-desc{color:#CBD5E1;font-size:calc(13px * var(--fs,1));margin-top:6px;}
  .viz-gauge{
    position:relative;height:14px;border-radius:999px;
    background:linear-gradient(90deg,#F87171 0%,#FBBF24 40%,#4ADE80 70%,#E27C1F 100%);
    box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
  }
  .viz-gauge::after{
    content:"";position:absolute;top:-6px;left:62%;
    width:4px;height:26px;background:#fff;border-radius:4px;
    box-shadow:0 0 8px rgba(255,255,255,.6);
  }
  .viz-mtsi-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:calc(10px * var(--fs,1));color:#64748B;margin-top:8px;letter-spacing:.5px;}
  .viz-mtsi-rows{margin-top:22px;display:grid;gap:8px;}
  .viz-mtsi-r{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:10px;font-size:calc(12px * var(--fs,1));}
  .viz-mtsi-r .k{color:#94A3B8;font-family:var(--font-mono);}
  .viz-mtsi-r .b{height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;position:relative;}
  .viz-mtsi-r .b > i{display:block;height:100%;background:linear-gradient(90deg,#F472B6,#E27C1F);}
  .viz-mtsi-r .v{text-align:right;font-family:var(--font-mono);color:#F1F5F9;}
  .viz-mtsi-r .v.up{color:#F87171;} .viz-mtsi-r .v.dn{color:#5B9BF5;} /* 상승 빨강·하락 파랑(한국 관습 · 앱 --up/--down 과 동일) */

  /* ─── Custom visual: 2) 차트 with 패턴 오버레이 ─── */
  .viz-chart{
    background:#fff;border-radius:24px;padding:26px;box-shadow:var(--shadow-lg);border:1px solid var(--line2);
    aspect-ratio:1/1;display:flex;flex-direction:column;
  }
  .viz-chart-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .viz-chart-hd h5, .viz-chart-hd .hd{font-family:var(--font-hd);font-weight:800;font-size:calc(15px * var(--fs,1));}
  .viz-chart-hd .badge{background:var(--sky-soft);color:var(--sky-text);padding:4px 10px;border-radius:999px;font-size:calc(11px * var(--fs,1));font-weight:800;font-family:var(--font-mono);letter-spacing:1px;}
  .viz-svg{width:100%;flex:1;background:linear-gradient(180deg,#F8FBFF,#EEF6FA);border-radius:16px;padding:14px;position:relative;}
  .viz-legend{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap;font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--ink2);}
  .viz-legend .k{display:inline-flex;align-items:center;gap:6px;}
  .viz-legend .sw{width:14px;height:6px;border-radius:999px;}
  .viz-answer{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--grass-soft);color:var(--grass-text);font-weight:800;text-align:center;font-size:calc(14px * var(--fs,1));border:2px solid var(--grass);box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);}

  /* ─── Custom visual: 3) Oracle 인증서 (실사이즈) ─── */
  .viz-cert{
    background:linear-gradient(160deg,#1e1b4b 0%,#4c1d95 55%,#7c3aed 100%);
    border-radius:32px;padding:36px;box-shadow:var(--shadow-xl);
    aspect-ratio:1/1.15;display:flex;flex-direction:column;justify-content:center;align-items:center;
    position:relative;overflow:hidden;
  }
  .viz-cert::before{
    content:"";position:absolute;inset:0;background:
      radial-gradient(45% 55% at 50% 20%,rgba(226,124,31,.28),transparent 60%),
      radial-gradient(60% 40% at 50% 100%,rgba(167,139,250,.35),transparent 70%);
  }
  .viz-cert::after{
    content:"";position:absolute;inset:20px;border:2px solid rgba(255,255,255,.15);border-radius:24px;pointer-events:none;
  }
  .cert-inner{
    background:linear-gradient(180deg,#fff,#F0EAFF);border-radius:24px;padding:30px 24px;text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 0 0 3px rgba(124,92,227,.15);
    width:88%;position:relative;
  }
  .cert-seal{
    position:absolute;top:-24px;right:20px;width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,#E27C1F,#B85C0E);color:#3B2A00;
    display:grid;place-items:center;font-size:calc(28px * var(--fs,1));
    box-shadow:0 6px 14px rgba(0,0,0,.25);border:3px solid #fff;
    transform:rotate(-10deg);
  }
  .cert-tiny{font-family:var(--font-mono);font-size:calc(10px * var(--fs,1));color:var(--grape-text);letter-spacing:3px;font-weight:600;}
  .cert-title{font-family:var(--font-hd);font-weight:800;font-size:calc(22px * var(--fs,1));color:var(--grape-text);margin:6px 0 20px;letter-spacing:-.3px;}
  .cert-divider{width:44px;height:3px;background:var(--grape);border-radius:999px;margin:0 auto 20px;}
  .cert-name-lbl{font-family:var(--font-mono);font-size:calc(10px * var(--fs,1));color:var(--ink3);letter-spacing:1.5px;}
  .cert-name{font-family:var(--font-hd);font-weight:800;font-size:calc(26px * var(--fs,1));letter-spacing:-.4px;margin:4px 0 16px;}
  .cert-meta{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px dashed rgba(31,41,55,.15);font-family:var(--font-mono);font-size:calc(10px * var(--fs,1));color:var(--ink3);letter-spacing:.5px;}
  .cert-meta b{display:block;color:var(--ink);font-family:var(--font-hd);font-weight:800;margin-top:2px;font-size:calc(12px * var(--fs,1));letter-spacing:0;}

  /* ─── Custom visual: 4) AI 튜터 채팅 ─── */
  .viz-chat{
    background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow-lg);border:1px solid var(--line2);
    aspect-ratio:1/1.05;display:flex;flex-direction:column;
  }
  .viz-chat-hd{display:flex;align-items:center;gap:10px;padding:4px 4px 14px;border-bottom:1px solid var(--line);}
  .viz-chat-ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--sky));display:grid;place-items:center;font-size:calc(19px * var(--fs,1));}
  .viz-chat-hd h5, .viz-chat-hd .hd{font-family:var(--font-hd);font-weight:800;font-size:calc(15px * var(--fs,1));}
  .viz-chat-hd small{font-size:calc(11px * var(--fs,1));color:var(--grass-text);font-weight:800;display:flex;align-items:center;gap:5px;}
  .viz-chat-hd small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grass);}
  .viz-chat-body{flex:1;overflow:hidden;padding:16px 4px;display:flex;flex-direction:column;gap:12px;}
  .msg{display:flex;gap:10px;align-items:flex-end;}
  .msg.me{justify-content:flex-end;}
  .msg .m-ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--mint-soft),var(--mint));display:grid;place-items:center;font-size:calc(15px * var(--fs,1));flex-shrink:0;}
  .msg.me .m-ava{background:linear-gradient(135deg,var(--gold-soft),var(--gold));order:2;}
  .bubble{padding:11px 14px;border-radius:16px;font-size:calc(14px * var(--fs,1));line-height:1.5;max-width:78%;}
  .msg .bubble{background:var(--mint-soft);color:var(--ink);border-bottom-left-radius:4px;}
  .msg.me .bubble{background:var(--gold);color:#3B2A00;border-bottom-right-radius:4px;font-weight:600;}
  .bubble b{font-weight:800;}
  .bubble code{font-family:var(--font-mono);background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;font-size:calc(12px * var(--fs,1));}
  .viz-chat-in{border-top:1px solid var(--line);padding-top:12px;display:flex;gap:8px;align-items:center;}
  .viz-chat-in input{flex:1;border:none;background:#F3F4F6;padding:12px 14px;border-radius:12px;font-size:calc(13px * var(--fs,1));font-family:inherit;color:var(--ink3);pointer-events:none;}
  .viz-chat-in button{width:38px;height:38px;border-radius:12px;background:var(--mint-deep);color:#fff;border:none;font-size:calc(16px * var(--fs,1));display:grid;place-items:center;}
  .viz-chat-credit{margin-top:10px;font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));color:var(--ink3);text-align:center;letter-spacing:.5px;}

  /* ─── Custom visual: 5) 타임머신 타임라인 ─── */
  .viz-tm{
    background:linear-gradient(160deg,#312E81 0%,#4C1D95 100%);
    border-radius:24px;padding:32px;box-shadow:var(--shadow-lg);color:#F5F3FF;
    aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  }
  .viz-tm::before{
    content:"⏳";position:absolute;top:16px;right:20px;font-size:calc(80px * var(--fs,1));opacity:.1;
  }
  .viz-tm-hd{font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));letter-spacing:2px;color:#C4B5FD;}
  .viz-tm-title{font-family:var(--font-hd);font-weight:800;font-size:calc(20px * var(--fs,1));margin-top:4px;color:#fff;}
  .viz-tm-timeline{position:relative;margin:24px 0;padding-left:24px;}
  .viz-tm-timeline::before{content:"";position:absolute;top:0;bottom:0;left:8px;width:2px;background:linear-gradient(180deg,#E27C1F,#A78BFA);border-radius:4px;}
  .viz-tm-e{position:relative;margin-bottom:14px;}
  .viz-tm-e::before{content:"";position:absolute;left:-20px;top:6px;width:14px;height:14px;border-radius:50%;background:#312E81;border:3px solid #E27C1F;}
  .viz-tm-e.active::before{background:#E27C1F;box-shadow:0 0 12px #E27C1F;}
  .viz-tm-e .yr{font-family:var(--font-hd);font-weight:800;font-size:calc(16px * var(--fs,1));color:#fff;}
  .viz-tm-e .ev{font-size:calc(12px * var(--fs,1));color:#C4B5FD;margin-top:2px;}
  .viz-tm-e.active .ev{color:#FDE68A;}
  .viz-tm-choice{background:rgba(255,255,255,.08);border-radius:16px;padding:14px;backdrop-filter:blur(10px);}
  .viz-tm-choice .q{font-size:calc(12px * var(--fs,1));color:#C4B5FD;font-family:var(--font-mono);letter-spacing:1px;margin-bottom:8px;}
  .viz-tm-choice .a{display:grid;gap:6px;}
  .viz-tm-choice .a > div{background:rgba(255,255,255,.06);padding:8px 12px;border-radius:8px;font-size:calc(12px * var(--fs,1));font-weight:700;}
  .viz-tm-choice .a > div.pick{background:var(--gold);color:#3B2A00;box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);}

  /* ─── Custom visual: 6) 데일리 미션 3-step ─── */
  .viz-mission{
    background:linear-gradient(160deg,#FEF3E2,#FBCB84);border-radius:24px;padding:32px;
    box-shadow:var(--shadow-lg);aspect-ratio:1/.9;display:flex;flex-direction:column;justify-content:center;
  }
  .viz-m-hd{font-family:var(--font-hd);font-weight:800;font-size:calc(20px * var(--fs,1));color:#3B2A00;text-align:center;margin-bottom:8px;}
  .viz-m-sub{text-align:center;font-size:calc(13px * var(--fs,1));color:var(--ink2);margin-bottom:22px;}
  .viz-m-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center;}
  .viz-m-step{background:#fff;border-radius:16px;padding:14px 10px;text-align:center;box-shadow:var(--shadow);border:2px solid transparent;}
  .viz-m-step.done{border-color:var(--grass);background:linear-gradient(180deg,#fff,var(--grass-soft));}
  .viz-m-step.now{border-color:var(--gold);background:linear-gradient(180deg,#fff,var(--gold-soft));}
  .viz-m-step .em{font-size:calc(26px * var(--fs,1));line-height:1;}
  .viz-m-step .lbl{font-family:var(--font-hd);font-weight:800;font-size:calc(12px * var(--fs,1));margin-top:6px;letter-spacing:-.2px;}
  .viz-m-step .st{font-size:calc(10px * var(--fs,1));color:var(--ink3);margin-top:2px;font-family:var(--font-mono);letter-spacing:.5px;}
  .viz-m-step.done .st{color:var(--grass-text);}
  .viz-m-step.now .st{color:var(--gold-text);}
  .viz-m-conn{font-family:var(--font-mono);color:var(--ink3);font-weight:800;font-size:calc(14px * var(--fs,1));}
  .viz-m-reward{margin-top:22px;padding:14px 18px;background:#3B2A00;color:#FDD9A6;border-radius:16px;text-align:center;font-family:var(--font-hd);font-weight:800;font-size:calc(15px * var(--fs,1));box-shadow:0 1px 2px rgba(31,41,55,.10),0 8px 20px -8px rgba(31,41,55,.30);}
  .viz-m-reward small{display:block;font-size:calc(11px * var(--fs,1));color:#E27C1F;margin-top:2px;font-family:var(--font-mono);letter-spacing:1px;}

  /* ═══════════ MINI FEATURES (6개 small) ═══════════ */
  .mini-wrap{background:linear-gradient(180deg,#FFFDF6 0%,#F7F4FF 100%);}
  .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;}
  @media(max-width:900px){.mini-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.mini-grid{grid-template-columns:1fr;}}
  .mini{
    background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line2);
    display:flex;gap:16px;align-items:flex-start;position:relative;
  }
  .mini-em{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:calc(24px * var(--fs,1));flex-shrink:0;}
  .mini-em.gold{background:var(--gold-soft);}
  .mini-em.sky{background:var(--sky-soft);}
  .mini-em.grape{background:var(--grape-soft);}
  .mini-em.rose{background:var(--rose-soft);}
  .mini-em.mint{background:var(--mint-soft);}
  .mini-em.amber{background:var(--amber-soft);}
  .mini h5, .mini h3{font-family:var(--font-hd);font-weight:800;font-size:calc(17px * var(--fs,1));margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .mini h5 .tag, .mini h3 .tag{font-size:calc(10px * var(--fs,1));font-family:var(--font-mono);padding:2px 7px;border-radius:999px;font-weight:700;letter-spacing:.5px;}
  .mini h5 .tag.pro, .mini h3 .tag.pro{background:var(--gold);color:#3B2A00;}
  .mini h5 .tag.oracle, .mini h3 .tag.oracle{background:var(--grape-text);color:#fff;}
  .mini h5 .tag.master, .mini h3 .tag.master{background:linear-gradient(135deg,#7C5CE3,#F472B6);color:#fff;}
  .mini p{font-size:calc(14px * var(--fs,1));color:var(--ink2);line-height:1.6;}

  /* ═══════════ SECTORS (원형 페르소나) ═══════════ */
  .sectors{background:radial-gradient(60% 60% at 50% 30%,rgba(226,124,31,.14),transparent 70%),var(--bg);}
  .sec-hero-q{
    max-width:520px;margin:32px auto 0;padding:22px 26px;
    background:#fff;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line2);
    display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--font-hd);font-weight:800;font-size:calc(17px * var(--fs,1));
  }
  .sec-hero-q .q{font-size:calc(22px * var(--fs,1));}
  .sec-circle-grid{
    margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  }
  @media(max-width:900px){.sec-circle-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.sec-circle-grid{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto;}}
  .sec-circ{text-align:center;position:relative;}
  .sec-orb{
    width:160px;height:160px;border-radius:50%;margin:0 auto 20px;
    display:grid;place-items:center;font-size:calc(66px * var(--fs,1));
    box-shadow:0 20px 40px rgba(31,41,55,.15);position:relative;
    transition:transform .2s ease;
  }
  .sec-orb:hover{transform:translateY(-6px) scale(1.03);}
  .sec-orb::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(255,255,255,.4);}
  /* 팀 상징 받침 (29차) — 오브 배경이 팀 색 그라디언트라 같은 색 아이콘이 묻힌다.
     앱의 티어 아이콘과 같은 방식(크림 씰 위에 상징)으로 맞춘다. */
  .sec-orb-disc{
    width:104px;height:104px;border-radius:50%;background:#FFFDF6;
    display:grid;place-items:center;position:relative;z-index:1;
    box-shadow:inset 0 2px 7px rgba(31,41,55,.14);
  }
  .sec-orb-disc svg{display:block;}
  .sec-orb.T{background:radial-gradient(circle at 35% 30%,#8B8FF0,#4338CA);}
  .sec-orb.S{background:radial-gradient(circle at 35% 30%,#5D7EDC,#1E3A8A);}
  .sec-orb.F{background:radial-gradient(circle at 35% 30%,#F0C558,#8A6D24);}
  .sec-orb.E{background:radial-gradient(circle at 35% 30%,#8DAB8D,#4A6B4A);}
  .sec-tag{
    display:inline-block;font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));letter-spacing:2px;
    padding:4px 10px;border-radius:999px;color:#fff;font-weight:700;margin-bottom:6px;
  }
  .sec-orb.T + .sec-tag, .T-tag{background:#4338CA;color:#fff;}
  .sec-orb.S + .sec-tag, .S-tag{background:#1E3A8A;color:#fff;}
  .sec-orb.F + .sec-tag, .F-tag{background:#8A6D24;color:#fff;}
  .sec-orb.E + .sec-tag, .E-tag{background:#4A6B4A;color:#fff;}
  .sec-name{font-family:var(--font-hd);font-weight:800;font-size:calc(19px * var(--fs,1));letter-spacing:-.3px;}
  .sec-team{font-size:calc(13px * var(--fs,1));color:var(--ink2);margin-top:4px;font-weight:700;}
  .sec-desc{font-size:calc(13px * var(--fs,1));color:var(--ink3);line-height:1.55;margin-top:10px;max-width:220px;margin-left:auto;margin-right:auto;}
  .sec-etf{margin-top:12px;font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));color:var(--ink3);letter-spacing:1px;}

  /* ═══════════ JOURNEY 타임라인 (수직) ═══════════ */
  .journey{background:linear-gradient(180deg,#F1FBFE 0%,#FFFDF6 100%);}
  .jn-time{max-width:820px;margin:60px auto 0;position:relative;padding-left:60px;}
  @media(max-width:640px){.jn-time{padding-left:44px;}}
  .jn-time::before{
    content:"";position:absolute;top:0;bottom:0;left:22px;width:3px;
    background:linear-gradient(180deg,var(--sky),var(--gold),var(--grape),var(--coral));
    border-radius:4px;
  }
  @media(max-width:640px){.jn-time::before{left:14px;}}
  .jn-item{position:relative;margin-bottom:32px;padding-bottom:12px;}
  .jn-item:last-child{margin-bottom:0;}
  .jn-time-dot{
    position:absolute;left:-53px;top:6px;width:44px;height:44px;border-radius:50%;
    background:#fff;box-shadow:var(--shadow);border:3px solid var(--sky);
    display:grid;place-items:center;font-size:calc(22px * var(--fs,1));z-index:2;
  }
  @media(max-width:640px){.jn-time-dot{left:-40px;width:32px;height:32px;font-size:calc(16px * var(--fs,1));}}
  .jn-item:nth-child(2) .jn-time-dot{border-color:var(--gold);}
  .jn-item:nth-child(3) .jn-time-dot{border-color:var(--grape);}
  .jn-item:nth-child(4) .jn-time-dot{border-color:var(--coral);}
  .jn-card{
    background:#fff;border-radius:24px;padding:22px 24px;box-shadow:var(--shadow);border:1px solid var(--line2);
    display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  }
  @media(max-width:640px){.jn-card{grid-template-columns:1fr;gap:10px;text-align:left;}}
  .jn-time-lbl{
    font-family:var(--font-mono);font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--ink3);
    background:var(--sky-soft);padding:6px 12px;border-radius:8px;color:var(--sky-text);
    letter-spacing:.5px;white-space:nowrap;text-align:center;min-width:88px;
  }
  .jn-item:nth-child(2) .jn-time-lbl{background:var(--gold-soft);color:var(--gold-text);}
  .jn-item:nth-child(3) .jn-time-lbl{background:var(--grape-soft);color:var(--grape-text);}
  .jn-item:nth-child(4) .jn-time-lbl{background:var(--coral-soft);color:var(--coral-text);}
  .jn-body h4, .jn-body h3{font-family:var(--font-hd);font-weight:800;font-size:calc(17px * var(--fs,1));margin-bottom:4px;letter-spacing:-.3px;}
  .jn-body p{font-size:calc(14px * var(--fs,1));color:var(--ink2);line-height:1.55;}
  .jn-xp{
    font-family:var(--font-mono);font-size:calc(12px * var(--fs,1));color:var(--gold-text);font-weight:700;
    background:var(--gold-soft);padding:6px 12px;border-radius:8px;letter-spacing:.5px;
    white-space:nowrap;text-align:center;
  }

  /* ═══════════ LEAGUE 산 등반 ═══════════ */
  .league{background:linear-gradient(180deg,#FFFBF2 0%,#FEF3E2 60%,#FFFDF6 100%);overflow:hidden;}
  .mtn-wrap{margin-top:52px;position:relative;padding:0 12px;}
  .mtn-svg{width:100%;height:auto;display:block;}
  .mtn-cards{
    display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px;
  }
  @media(max-width:900px){.mtn-cards{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.mtn-cards{grid-template-columns:1fr;}}
  .mtn-card{
    background:#fff;border-radius:16px;padding:20px 14px;text-align:center;
    box-shadow:var(--shadow);border:2px solid transparent;transition:transform .15s;
  }
  .mtn-card:hover{transform:translateY(-4px);}
  .mtn-card.gold{border-color:var(--gold);background:linear-gradient(180deg,#fff,var(--gold-soft));box-shadow:0 10px 30px rgba(226,124,31,.35);}
  .mtn-em{font-size:calc(38px * var(--fs,1));line-height:1;}
  .mtn-name{font-family:var(--font-hd);font-weight:800;font-size:calc(16px * var(--fs,1));margin-top:6px;}
  .mtn-xp{font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));color:var(--ink3);margin-top:2px;letter-spacing:.5px;}
  .mtn-card.gold .mtn-xp{color:var(--gold-text);font-weight:700;}
  .mtn-perks{
    margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
    display:grid;gap:5px;text-align:left;
  }
  .mtn-perks li{list-style:none;font-size:calc(12px * var(--fs,1));color:var(--ink2);font-weight:600;padding-left:12px;position:relative;line-height:1.4;}
  .mtn-perks li::before{content:"◆";position:absolute;left:0;color:var(--gold-text);font-size:calc(10px * var(--fs,1));top:4px;}
  .mtn-star{
    position:absolute;top:-10px;right:12px;background:var(--coral-text);color:#fff;
    font-size:calc(11px * var(--fs,1));font-weight:800;padding:3px 9px;border-radius:999px;box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);
  }

  /* ═══════════ AGE MODES (색깔 강한 카드) ═══════════ */
  .age-wrap{background:linear-gradient(180deg,#FFFDF6 0%,#FDE8F1 100%);}
  .age-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;}
  @media(max-width:820px){.age-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}}
  .age{
    border-radius:24px;padding:32px;position:relative;overflow:hidden;color:#fff;
    box-shadow:var(--shadow-lg);
  }
  .age.kids{background:linear-gradient(160deg,#FF9F1C,#F472B6);}
  .age.teen{background:linear-gradient(160deg,#58CCEE,#7C5CE3);}
  .age.adult{background:linear-gradient(160deg,#1F2937,#4B5563);}
  .age::before{content:"";position:absolute;top:-30px;right:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.1);}
  .age-em{font-size:calc(52px * var(--fs,1));position:relative;}
  .age-h{font-family:var(--font-hd);font-weight:800;font-size:calc(24px * var(--fs,1));margin-top:12px;letter-spacing:-.4px;position:relative;}
  .age-age{font-family:var(--font-mono);font-size:calc(12px * var(--fs,1));letter-spacing:1.5px;opacity:.75;margin-top:2px;position:relative;}
  .age-desc{font-size:calc(14px * var(--fs,1));margin-top:16px;line-height:1.6;opacity:.95;position:relative;}
  .age-focus{margin-top:20px;display:grid;gap:10px;position:relative;}
  .age-focus li{
    list-style:none;font-size:calc(13px * var(--fs,1));font-weight:600;padding:8px 12px;
    background:rgba(255,255,255,.15);border-radius:12px;backdrop-filter:blur(6px);
  }

  /* ═══════════ COMPARE TABLE ═══════════ */
  .compare{background:#fff;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);}
  .cmp-tbl{margin-top:44px;background:var(--paper);border-radius:24px;padding:10px;box-shadow:var(--shadow);border:1px solid var(--line2);overflow:hidden;}
  .cmp-scroll{overflow-x:auto;}
  .cmp-tbl table{width:100%;min-width:640px;border-collapse:collapse;}
  .cmp-tbl th, .cmp-tbl td{padding:16px 18px;text-align:left;font-size:calc(14px * var(--fs,1));}
  .cmp-tbl thead th{font-family:var(--font-hd);font-weight:800;font-size:calc(14px * var(--fs,1));color:var(--ink);background:var(--gold-soft);}
  .cmp-tbl thead th:first-child{border-radius:16px 0 0 16px;}
  .cmp-tbl thead th:last-child{border-radius:0 16px 16px 0;background:var(--gold);color:#3B2A00;}
  .cmp-tbl tbody tr{border-bottom:1px dashed var(--line);}
  .cmp-tbl tbody tr:last-child{border-bottom:none;}
  .cmp-tbl tbody td{color:var(--ink2);font-weight:600;}
  .cmp-tbl tbody td:first-child{color:var(--ink);font-weight:800;font-family:var(--font-hd);}
  .cmp-tbl tbody td.us{background:rgba(226,124,31,.08);color:var(--ink);font-weight:800;}
  .cmp-yes{color:var(--grass-text);font-family:var(--font-hd);font-weight:800;}
  .cmp-no{color:var(--ink4);}

  /* ═══════════ PRICING ═══════════ */
  .pricing{background:linear-gradient(180deg,#FFFDF6 0%,#FEF3E2 100%);}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;}
  @media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}}
  .plan{background:#fff;border-radius:24px;padding:32px 28px;box-shadow:var(--shadow);border:2px solid var(--line);display:flex;flex-direction:column;position:relative;}
  .plan.hot{border-color:var(--gold);box-shadow:0 16px 40px rgba(226,124,31,.28);transform:translateY(-8px);}
  @media(max-width:900px){.plan.hot{transform:none;}}
  .plan-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3B2A00;font-weight:800;font-size:calc(12px * var(--fs,1));padding:6px 14px;border-radius:999px;letter-spacing:.5px;box-shadow:0 1px 2px rgba(31,41,55,.10),0 6px 15px -6px rgba(31,41,55,.30);white-space:nowrap;}
  .plan-icon{font-size:calc(34px * var(--fs,1));line-height:1;margin-bottom:8px;}
  .plan-name{font-family:var(--font-hd);font-weight:800;font-size:calc(22px * var(--fs,1));letter-spacing:-.3px;}
  .plan-desc{color:var(--ink3);font-size:calc(14px * var(--fs,1));margin-top:4px;min-height:42px;line-height:1.5;}
  .plan-price{display:flex;align-items:baseline;gap:6px;margin:18px 0 6px;font-family:var(--font-hd);font-weight:800;}
  .plan-price .amt{font-size:calc(40px * var(--fs,1));letter-spacing:-1px;}
  .plan-price .per{font-size:calc(14px * var(--fs,1));color:var(--ink3);font-weight:800;}
  .plan-price .free{font-size:calc(32px * var(--fs,1));color:var(--grass-text);}
  .plan-hi{margin:10px 0 20px;padding:12px 14px;border-radius:12px;background:var(--gold-soft);font-size:calc(13px * var(--fs,1));color:var(--gold-text);font-weight:800;}
  .plan.hot .plan-hi{background:var(--gold);color:#3B2A00;}
  .plan ul{list-style:none;margin:6px 0 26px;display:grid;gap:11px;flex:1;}
  .plan li{display:flex;gap:10px;font-size:calc(15px * var(--fs,1));color:var(--ink);align-items:flex-start;}
  .plan li .ck{color:var(--grass-text);font-weight:800;flex-shrink:0;font-size:calc(16px * var(--fs,1));}
  .plan li.crown .ck{color:var(--gold-text);}
  .plan li b{font-weight:800;}
  .plan .btn{width:100%;padding:14px;border-radius:16px;font-size:calc(15px * var(--fs,1));}
  .price-foot{text-align:center;color:var(--ink3);font-size:calc(13px * var(--fs,1));margin-top:22px;}

  /* ═══════════ VOICES ═══════════ */
  .voices{background:#fff;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);}
  .voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
  @media(max-width:900px){.voice-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;}}
  .voice{background:var(--bg);border-radius:24px;padding:26px;position:relative;border:1px solid var(--line2);}
  .voice::before{content:"“";position:absolute;top:14px;left:22px;font-family:'Georgia',serif;font-size:calc(56px * var(--fs,1));color:var(--gold);opacity:.7;line-height:.7;}
  .voice p{font-size:calc(15px * var(--fs,1));color:var(--ink);line-height:1.6;margin-top:24px;font-style:italic;}
  .voice .who{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:12px;}
  .voice .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:calc(22px * var(--fs,1));flex-shrink:0;}
  .a-gold{background:linear-gradient(135deg,#FFF3C4,var(--gold));}
  .a-sky{background:linear-gradient(135deg,#CDEFFA,var(--sky));}
  .a-grape{background:linear-gradient(135deg,#E1D6FF,var(--grape));}
  .voice .who h6, .voice .who h3{font-family:var(--font-hd);font-weight:800;font-size:calc(14px * var(--fs,1));}
  .voice .who .r{font-size:calc(12px * var(--fs,1));color:var(--ink3);font-family:var(--font-mono);}

  /* ═══════════ FAQ ═══════════ */
  .faq-wrap{max-width:820px;margin:44px auto 0;}
  details.faq{background:#fff;border-radius:16px;padding:0;margin-bottom:12px;box-shadow:var(--shadow);border:1px solid var(--line2);overflow:hidden;}
  details.faq[open]{border-color:var(--gold);}
  details.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--font-hd);font-weight:800;font-size:calc(17px * var(--fs,1));color:var(--ink);}
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary::after{content:"+";font-size:calc(26px * var(--fs,1));color:var(--gold-text);font-weight:800;transition:transform .2s;flex-shrink:0;}
  details.faq[open] summary::after{transform:rotate(45deg);}
  details.faq .a{padding:0 22px 22px;font-size:calc(15px * var(--fs,1));color:var(--ink2);line-height:1.7;}
  details.faq .a b{color:var(--ink);}

  /* ═══════════ TEAM + CONTACT ═══════════ */
  .team{background:linear-gradient(180deg,#FFFDF6,#F7F4FF);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);}
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
  @media(max-width:820px){.team-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}}
  .member{background:#fff;border-radius:24px;padding:26px;text-align:center;border:1px solid var(--line2);box-shadow:var(--shadow);}
  .ava-lg{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:calc(44px * var(--fs,1));box-shadow:var(--shadow);}
  .ava-gold{background:linear-gradient(135deg,#FFF3C4,var(--gold));}
  .ava-sky{background:linear-gradient(135deg,#CDEFFA,var(--sky));}
  .ava-grape{background:linear-gradient(135deg,#E1D6FF,var(--grape));}
  .member h4, .member h3{font-family:var(--font-hd);font-weight:800;font-size:calc(18px * var(--fs,1));}
  .member .role{font-family:var(--font-mono);font-size:calc(12px * var(--fs,1));color:var(--gold-text);letter-spacing:1px;text-transform:uppercase;margin:4px 0 12px;}
  .member p{font-size:calc(14px * var(--fs,1));color:var(--ink2);line-height:1.6;}
  .contact-box{max-width:820px;margin:44px auto 0;background:linear-gradient(135deg,#FFFDF6,var(--gold-soft));border-radius:24px;padding:38px 34px;border:1px solid rgba(226,124,31,.4);display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;}
  @media(max-width:720px){.contact-box{grid-template-columns:1fr;}}
  .contact-box h3{font-family:var(--font-hd);font-weight:800;font-size:calc(24px * var(--fs,1));letter-spacing:-.4px;}
  .contact-box p{font-size:calc(15px * var(--fs,1));color:var(--ink2);margin-top:8px;line-height:1.65;}
  .contact-list{display:grid;gap:12px;}
  .contact-item{background:#fff;border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .12s;}
  .contact-item:hover{transform:translateY(-2px);}
  .contact-item .em{font-size:calc(24px * var(--fs,1));}
  .contact-item .k{font-weight:800;font-size:calc(14px * var(--fs,1));}
  .contact-item .v{font-family:var(--font-mono);font-size:calc(13px * var(--fs,1));color:var(--ink3);}

  /* ═══════════ FINAL CTA ═══════════ */
  .final{margin:0 24px 72px;background:linear-gradient(140deg,var(--gold) 0%,#F5A652 100%);border-radius:32px;padding:60px 32px;text-align:center;color:#3B2A00;box-shadow:0 30px 60px rgba(226,124,31,.35);position:relative;overflow:hidden;}
  .final::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.4),transparent 70%);pointer-events:none;}
  .final h2{font-family:var(--font-hd);font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:-.6px;position:relative;}
  .final p{font-size:calc(16px * var(--fs,1));margin:10px 0 26px;position:relative;opacity:.85;}
  .final-tiny{margin-top:16px;font-size:calc(12px * var(--fs,1));font-family:var(--font-mono);color:#5A3E00;letter-spacing:.5px;position:relative;}

  /* ═══════════ FOOTER ═══════════ */
  footer{background:var(--navy);color:#9CA3AF;padding:56px 24px 32px;}
  .foot-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;}
  @media(max-width:900px){.foot-in{grid-template-columns:1fr 1fr 1fr;}.foot-brand{grid-column:1/-1;}}
  @media(max-width:560px){.foot-in{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1/-1;}}
  .foot-brand .brand{color:#fff;}
  .foot-brand p{font-size:calc(13px * var(--fs,1));margin-top:12px;line-height:1.65;}
  .foot-col h5, .foot-col h3{color:#fff;font-family:var(--font-hd);font-weight:800;font-size:calc(14px * var(--fs,1));margin-bottom:14px;}
  .foot-biz{max-width:1080px;margin:18px auto 0;padding:14px 24px 0;border-top:1px solid rgba(255,255,255,.12);
    font-size:calc(13px * var(--fs,1));line-height:1.7;color:rgba(255,255,255,.55);}
  .foot-biz a{color:rgba(255,255,255,.7);}
  .foot-col a{display:block;padding:5px 0;font-size:calc(13px * var(--fs,1));color:#9CA3AF;text-decoration:none;}
  .foot-col a:hover{color:var(--gold);}
  .foot-bottom{max-width:1160px;margin:36px auto 0;padding-top:22px;border-top:1px solid #374151;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:calc(12px * var(--fs,1));font-family:var(--font-mono);}
  .foot-bottom a{color:inherit;text-decoration:none;}

  ::selection{background:var(--gold);color:#3B2A00;}
  .founders{
    background:linear-gradient(160deg,#0B1220 0%,#1E1B4B 60%,#4C1D95 100%);
    color:#F5F3FF;overflow:hidden;position:relative;
  }
  .founders::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(50% 60% at 20% 20%,rgba(226,124,31,.18),transparent 60%),
      radial-gradient(40% 60% at 88% 80%,rgba(167,139,250,.18),transparent 60%),
      radial-gradient(30% 40% at 50% 50%,rgba(88,204,238,.10),transparent 70%);
  }
  .founders > *{position:relative;}
  .founders .eyebrow{background:rgba(226,124,31,.18);color:var(--gold);border:1px solid rgba(226,124,31,.35);}
  .founders h2.sec-h{color:#fff;}
  .founders .sec-lead{color:#CBD5E1;}

  .fdr-warn{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.08);color:#FDE68A;
    padding:8px 16px;border-radius:999px;
    font-family:var(--font-mono);font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:1px;
    margin-bottom:14px;border:1px solid rgba(255,255,255,.12);
  }
  .fdr-warn .live{width:8px;height:8px;border-radius:50%;background:#4ADE80;animation:pulse 1.6s ease-in-out infinite;}

  .tier-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;
    text-align:left;
  }
  @media(max-width:900px){.tier-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}}

  .tier{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;padding:28px 26px;
    backdrop-filter:blur(8px);position:relative;overflow:hidden;
    transition:transform .18s ease,border-color .18s ease;
    display:flex;flex-direction:column;
  }
  .tier:hover{transform:translateY(-4px);}
  .tier.bronze{border-color:rgba(205,127,50,.4);background:linear-gradient(160deg,rgba(205,127,50,.12),rgba(255,255,255,.03));}
  .tier.silver{border-color:rgba(203,213,225,.4);background:linear-gradient(160deg,rgba(203,213,225,.12),rgba(255,255,255,.03));transform:scale(1.02);}
  .tier.gold{border-color:rgba(226,124,31,.5);background:linear-gradient(160deg,rgba(226,124,31,.15),rgba(255,255,255,.03));box-shadow:0 20px 40px rgba(226,124,31,.18);}
  @media(max-width:900px){.tier.silver{transform:none;}}

  .tier-medal{
    width:64px;height:64px;border-radius:50%;
    display:grid;place-items:center;font-size:calc(32px * var(--fs,1));
    margin-bottom:16px;position:relative;
  }
  .tier.bronze .tier-medal{background:linear-gradient(140deg,#CD7F32,#8B4513);box-shadow:0 6px 18px rgba(205,127,50,.4);}
  .tier.silver .tier-medal{background:linear-gradient(140deg,#E5E7EB,#9CA3AF);box-shadow:0 6px 18px rgba(203,213,225,.4);}
  .tier.gold .tier-medal{background:linear-gradient(140deg,#E27C1F,#B85C0E);box-shadow:0 6px 18px rgba(226,124,31,.5);}

  .tier-lvl{
    font-family:var(--font-mono);font-size:calc(11px * var(--fs,1));letter-spacing:2px;
    color:#94A3B8;font-weight:600;text-transform:uppercase;
  }
  .tier.bronze .tier-lvl{color:#E8B57F;}
  .tier.silver .tier-lvl{color:#F1F5F9;}
  .tier.gold .tier-lvl{color:#FDE68A;}

  .tier-name{
    font-family:var(--font-hd);font-weight:800;font-size:calc(24px * var(--fs,1));letter-spacing:-.4px;
    color:#fff;margin-top:4px;
  }
  .tier-cond{
    margin-top:14px;padding:10px 14px;border-radius:12px;
    background:rgba(0,0,0,.25);font-size:calc(13px * var(--fs,1));color:#CBD5E1;line-height:1.5;
    border:1px dashed rgba(255,255,255,.14);
  }
  .tier-cond b{color:#fff;font-family:var(--font-hd);font-weight:800;}

  .tier-perks{
    list-style:none;margin:20px 0 0;display:grid;gap:11px;flex:1;
  }
  .tier-perks li{
    display:flex;gap:10px;align-items:flex-start;
    font-size:calc(14px * var(--fs,1));color:#E2E8F0;line-height:1.5;
  }
  .tier-perks li .ck{color:#4ADE80;font-weight:800;flex-shrink:0;font-size:calc(16px * var(--fs,1));line-height:1.5;}
  .tier.silver .tier-perks li .ck{color:#F1F5F9;}
  .tier.gold .tier-perks li .ck{color:var(--gold);}
  .tier-perks li b{color:#fff;font-weight:800;}

  .tier-inherit{
    margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.15);
    font-size:calc(12px * var(--fs,1));color:#94A3B8;font-family:var(--font-mono);letter-spacing:.5px;
  }

  .fdr-cta{
    margin:52px auto 0;max-width:660px;text-align:center;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:24px;padding:28px;
  }
  .fdr-cta h4, .fdr-cta .fdr-cta-h{font-family:var(--font-hd);font-weight:800;font-size:calc(19px * var(--fs,1));color:#fff;margin-bottom:8px;}
  .fdr-cta p{font-size:calc(14px * var(--fs,1));color:#CBD5E1;line-height:1.6;margin-bottom:20px;}
  .fdr-cta .btn{background:var(--gold);color:#3B2A00;box-shadow:0 1px 2px rgba(31,41,55,.12),0 14px 30px -12px rgba(226,124,31,.5);}
  .fdr-cta .btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(31,41,55,.14);}

  /* ═══════════════════════════════════════════════════════════
   *  모바일 네비게이션 + 기기별 밀도 조정 (2026-08-10)
   *
   *  ⚠ 이 파일은 breakpoint가 520·560·640·720·820·900·1000px으로 흩어져 있어
   *    "어느 기기에서 어떻게 보이는가"를 예측하기 어려웠다. 아래 블록은 기기 계층을
   *    명시적으로 나눈다 — 모바일 ≤600 / 태블릿 601~1024 / 데스크탑 ≥1025.
   *    (파일 끝에 두어 앞선 규칙을 의도적으로 덮어쓴다)
   * ═══════════════════════════════════════════════════════════ */

  /* ── 햄버거 버튼 ── */
  #nav-toggle{
    display:none;width:40px;height:40px;padding:0;margin-left:4px;
    background:none;border:1px solid var(--line2);border-radius:12px;
    cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  }
  #nav-toggle span{display:block;width:18px;height:2px;border-radius:4px;background:var(--ink2);transition:transform .2s ease,opacity .2s ease;}
  #nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  #nav-toggle.open span:nth-child(2){opacity:0;}
  #nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  /* ── 펼침 패널 ── */
  #nav-panel{
    display:none;border-top:1px solid var(--line2);
    background:var(--bg,#fff);padding:8px 16px 14px;
  }
  #nav-panel.open{display:block;}
  #nav-panel a{
    display:block;padding:13px 12px;border-radius:12px;
    font-weight:800;font-size:calc(15px * var(--fs,1));color:var(--ink2);text-decoration:none;
    min-height:44px;box-sizing:border-box;   /* 터치 타깃 44px (AAA) */
  }
  #nav-panel a:hover,#nav-panel a.on{background:var(--gold-soft);color:var(--gold-text);}

  /* ── 태블릿 이하: 네비 항목 숨김 + 햄버거 노출 ── */
  @media(max-width:1000px){
    #nav-toggle{display:flex;}
  }

  /* ── 태블릿 (601~1024px) ── */
  @media(max-width:1024px){
    section{padding:76px 0;}
    .wrap,.wrap-wide{padding:0 20px;}
  }

  /* ── 모바일 (≤600px) — 여백을 줄여 스크롤 피로를 낮춘다 ── */
  @media(max-width:600px){
    section{padding:48px 0;}
    .wrap,.wrap-wide{padding:0 16px;}
    .hero{padding:36px 0 28px;}
    .nav-in{padding:11px 16px;gap:10px;}
    .brand{font-size:calc(17px * var(--fs,1));}
    .brand-logo{width:30px;height:30px;border-radius:12px;}
    .nav-links a.btn-primary{padding:9px 13px;font-size:calc(13px * var(--fs,1));}
  }


/* ─────────────────────────────────────────────────────────────
   접근성 (30차) — 키보드 사용자용 공통 스타일
   ───────────────────────────────────────────────────────────── */
/* 본문 건너뛰기 링크: 평소엔 화면 밖에 숨고, Tab으로 포커스되면 좌상단에 나타난다.
   display:none으로 숨기면 키보드로도 못 닿으므로 위치 이동 방식을 쓴다. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 20px;
  background:var(--gold,#E27C1F);color:#fff;font-weight:800;font-size:calc(15px * var(--fs,1));
  border-radius:0 0 12px 0;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.skip-link:focus{left:0;}
/* 포커스 링: :focus-visible이므로 마우스 클릭에는 안 뜨고 키보드 이동에만 보인다.
   outline:none으로 지우는 것은 WCAG 2.4.7 위반이므로 절대 하지 말 것. */
:focus-visible{outline:3px solid var(--gold-deep,#B85C0E);outline-offset:2px;border-radius:4px;}