/* Pretendard (SIL OFL 1.1) — scripts/build_fonts.py 가 **이 페이지에 쓰인 글자만** 남긴
   서브셋이다(웨이트당 약 50KB). 문구를 고치면 스크립트를 다시 돌려야 한다 —
   안 돌리면 새 글자만 폴백으로 떨어지는데 육안으로 잘 안 보인다.
   tests/test_site_fonts.py 가 그 누락을 매 실행 잡는다.
   local() 을 먼저 두어 이미 설치한 사람은 내려받지 않게 한다.
   font-display:swap — 폰트를 기다리며 글자가 사라지느니 폴백으로 먼저 읽히는 편이 낫다. */
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:400; font-display:swap;
            src:local("Pretendard Regular"),url("font/pretendard-400.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:600; font-display:swap;
            src:local("Pretendard SemiBold"),url("font/pretendard-600.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:700; font-display:swap;
            src:local("Pretendard Bold"),url("font/pretendard-700.woff2") format("woff2"); }

/* ══ Naiad 랜딩 ══
   구조 규범 = linear.app (서피스 사다리 · 희소한 악센트 · 제품 스크린샷이 주인공).
   색은 앱 정본 팔레트(frontend/css/style.css)와 같은 값을 쓴다 — 사이트와 앱이 같은 세계로 읽혀야 한다.
   라벤더 자리에 들어가는 유일한 유채색 = 시안 #6CC8FF. 두 번째 악센트는 두지 않는다. */
:root{
  /* ★라이트모드 OS 에서도 페이지는 다크로 고정이다. 이 선언이 없으면 브라우저가 그리는
     것들(스크롤바·라디오 버튼 등)만 밝게 떠서 어두운 페이지 옆에 흰 막대가 생긴다. */
  color-scheme:dark;
  /* 서피스 사다리 */
  --canvas:#0B0E13;
  --surface-1:#1A1D24;
  --surface-2:#20242C;
  --surface-3:#262A33;
  --hair:#272B34;
  --hair-strong:#363B46;

  /* 활자 — **색으로는 위계를 만들지 않는다.** 전부 같은 흰색이고, 위계는 크기와
     굵기로만 낸다. 배경이 빛으로 바뀌며 밝기 폭이 커져(어두운 바탕 ~ 흰 후광) 회색은
     자리에 따라 묻혔다 — 흐린 글씨는 어디서든 읽히지 않는 쪽으로만 작동했다.
     ★토큰 이름은 남긴다(35군데에서 쓴다). 값만 같게 둔다 — 나중에 다시 단계를 주고
       싶으면 여기 네 줄만 고치면 된다. */
  --ink:#E9ECF1;
  --ink-2:#E9ECF1;
  --ink-3:#E9ECF1;
  --ink-4:#E9ECF1;

  /* 악센트 — 나이아드 시그니처 */
  --cyan:#6CC8FF;
  --cyan-hi:#9BDCFF;
  --cyan-dim:#3F6F8C;
  --cyan-glow:rgba(108,200,255,.22);

  /* 의미색만(장식 금지) */
  --brass:#E0A94E;
  --brick:#E0705F;
  --ok:#7FB98A;

  /* 폰트 정책 = **OFL 만 서빙한다.** 자체 호스팅은 곧 방문자에게 폰트를 배포하는 것이라,
     MS·Apple 번들 폰트는 이름으로만 부르고(각자 설치본이 렌더) 파일은 올리지 않는다.
     Pretendard = SIL OFL 1.1 → font/OFL.txt 로 고지 동봉(재배포 조건).
     ★sans 를 자체 호스팅하는 이유: 안 하면 방문자 대부분이 맑은 고딕으로 보게 되어
       우리가 맞춘 디자인을 소수만 본다(Pretendard·Noto Sans KR 은 윈도우 기본이 아니다).
     ★mono 는 자체 호스팅하지 않는다 — Consolas 가 윈도우 기본이라 폴백이 확실하고,
       숫자 정렬(고정폭)이 유지되므로 150KB 를 더 쓸 값이 없다. */
  --sans:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Cascadia Code","D2Coding",ui-monospace,"Consolas",monospace;
  /* ★mono 는 **순수 라틴·숫자에만** 쓴다. 한글이 섞이면 한 단어 안에서 폰트가 갈린다 —
     고정폭 폰트에 한글 글리프가 없어서 그 글자만 다른 폰트로 떨어지기 때문이다
     (`20,000원` = Consolas 숫자 + 맑은 고딕 '원'). 숫자를 정렬해야 하면 mono 대신
     sans + font-variant-numeric:tabular-nums 를 쓴다(Pretendard 가 tnum 을 지원한다).
     ★결국 mono 는 **워드마크(Naiad/NAIAD) 하나에만** 남았다. 숫자를 mono 로 두면 폰트가
     섞이지는 않아도 옆의 한글과 서체가 갈려 '다른 글꼴' 로 읽힌다 — 방문자 PC 마다
     그 글꼴이 달라지는 문제(Consolas/Menlo)도 같이 따라온다. */
  --tnum:tabular-nums;

  /* ── 청수 유리 ── 앱 정본(frontend/css/style.css)과 **같은 값**. 경면 금지,
     볼록은 inset 음영(lip=윗입술 하이라이트 / belly=아랫배 그림자)으로만 만든다. */
  --glass-sheen:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 46%,rgba(108,200,255,.08));
  --glass-border:rgba(255,255,255,.26);
  --glass-blur:blur(9px) saturate(160%);
  --glass-lip:inset 0 1.5px 0 rgba(255,255,255,.42);
  --glass-belly:inset 0 -14px 22px rgba(4,16,26,.4);
  --glass-drop:0 12px 26px rgba(0,0,0,.4);
  --glass-tint:rgba(22,26,33,.34);
  --glass-tint-panel:rgba(18,21,27,.6);

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --pill:9999px;
  --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px;
  /* ★라벨+설명 2단 블록(.flow·.specs)이 **같은 세로 기준선**을 쓰게 하는 격자.
     블록마다 분할 폭이 다르면(180+28 / 160+24) 폭 전체를 가로지르는 가로줄이 매번
     다른 자리를 지나가, 줄이 구조가 아니라 장식으로 읽힌다. */
  --col-label:180px; --col-gap:28px;
  --section:96px;
  --wrap:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; }
}
body{
  margin:0; background:var(--canvas); color:var(--ink-2);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* 한글은 기본 규칙상 어절 중간에서도 끊긴다("단면을" → "단면"/"을").
     keep-all 로 어절을 붙여 두고, 끊을 데가 없는 긴 라틴 토큰만 예외로 넘긴다. */
  word-break:keep-all; overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,ul{ margin:0; }
ul{ padding:0; list-style:none; }
::selection{ background:var(--cyan-glow); color:var(--ink); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ── 활자 스케일 ──
   linear 은 80px/-3px 까지 당기지만 그 자간은 라틴 전용이다. 한글은 자소가 뭉개지므로
   em 기준으로 완만하게(-.02em) 잡고, 라틴 전용 요소(.wordmark·수치)만 더 당긴다. */
.display{ font-size:clamp(34px,5.4vw,62px); line-height:1.12; letter-spacing:-.022em;
          font-weight:700; color:var(--ink); }
.h2{ font-size:clamp(26px,3.2vw,38px); line-height:1.2; letter-spacing:-.02em;
     font-weight:650; color:var(--ink); }
.lead{ font-size:clamp(16px,1.6vw,18px); line-height:1.65; color:var(--ink-2); }
.small{ font-size:13.5px; line-height:1.6; color:var(--ink-3); }
.lead strong{ color:var(--ink); font-weight:600; }
/* '01 강우분석' 처럼 한글이 붙으므로 sans. 대문자 라틴('AGENT FOR…')도 자간이 살아 있다. */
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
          color:var(--cyan); font-family:var(--sans); font-variant-numeric:var(--tnum); }
/* .mono = '숫자를 정렬한다' 는 뜻으로만 남긴다(글꼴을 바꾸지 않는다). */
.mono{ font-variant-numeric:var(--tnum); }

/* ── 버튼 ── */
/* ★font-family 를 명시한다. <button>·<input> 은 body 폰트를 **상속하지 않고** 브라우저
   기본(윈도우=맑은 고딕)으로 떨어진다 — 페이지 전체가 Pretendard 인데 버튼만 다른 폰트가
   된다. 실제로 결제창 버튼이 그렇게 나가 있었다. */
.btn{ display:inline-flex; align-items:center; gap:8px; min-height:40px;
      padding:9px 16px; border-radius:var(--r-md); border:1px solid transparent;
      font-family:var(--sans);
      font-size:14px; font-weight:600; line-height:1.2; cursor:pointer; white-space:nowrap;
      transition:background .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary{ background:var(--cyan); color:#0B1016; }
.btn-primary:hover{ background:var(--cyan-hi); }
.btn-secondary{ background:var(--surface-1); color:var(--ink); border-color:var(--hair-strong); }
.btn-secondary:hover{ background:var(--surface-2); border-color:#6A6F79; }
.btn-lg{ min-height:46px; padding:12px 22px; font-size:15px; }

/* ══ 버튼 — variant 시안 반영 ══════════════════════════════════════════
   시안의 버튼(INITIALIZE MODEL PARSE)은 **각진 모서리 · 얇은 테두리 · 속이 빈 사각형**에
   자간을 크게 벌린 모노 대문자였다. 그 언어를 가져오되 두 가지는 바꾼다:
   ★한글은 자간을 크게 벌리면 오히려 읽기 나빠진다 → 라틴만큼 벌리지 않고 .045em 에서 멈춘다.
   ★모노스페이스는 라틴 전용이라 한글 버튼에 못 쓴다(대응 글꼴이 사실상 없다) → Pretendard 유지.
   ★주 버튼을 속 빈 형태로 두면 눈에 덜 띈다 → 테두리·글자를 시안색 원색으로 두고
     hover 에서 꽉 채워 뒤집는다(어두운 바탕에서 충분히 도드라진다). */
.btn{ border-radius:0; letter-spacing:.045em; min-height:44px; padding:12px 24px; }
.btn-lg{ min-height:52px; padding:15px 30px; font-size:15px; letter-spacing:.055em; }

.btn-primary{ background:transparent; color:var(--cyan);
              border-color:rgba(108,200,255,.62);
              box-shadow:0 0 0 1px rgba(108,200,255,.10), 0 0 22px rgba(108,200,255,.07); }
.btn-primary:hover{ background:var(--cyan); color:#0B1016; border-color:var(--cyan);
                    box-shadow:0 0 26px rgba(108,200,255,.20); }

.btn-secondary{ background:transparent; color:var(--ink-2); border-color:var(--hair-strong); }
.btn-secondary:hover{ background:rgba(255,255,255,.035); border-color:#6A6F79; }

/* 상단바 버튼은 작게 유지 — 여기까지 커지면 내비가 무거워진다 */
.nav-cta .btn{ min-height:38px; padding:9px 18px; font-size:13.5px; }

/* 포커스 테두리도 각지게(버튼 모양과 어긋나면 눈에 띈다) */
:where(a,button):focus-visible{ border-radius:0; }
:where(a,button,input,select):focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:var(--r-sm); }

/* ── 상단바 ── */
.nav{ position:sticky; top:0; z-index:50; height:60px;
      background:rgba(20,22,27,.82); backdrop-filter:blur(12px);
      border-bottom:1px solid var(--hair); }
.nav-in{ height:100%; display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; gap:22px; margin-left:8px; }
.nav-links a{ font-size:14px; color:var(--ink-3); transition:color .15s; }
.nav-links a:hover{ color:var(--cyan); }      /* 활자가 전부 흰색이라 밝기로는 표시 못 한다 */
.nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* 로고 락업 — 마크 + 워드마크 */
.lockup{ display:inline-flex; align-items:center; gap:10px; }
.lockup svg{ display:block; }
.wordmark{ font-family:var(--mono); font-weight:700; font-size:17px;
           letter-spacing:.16em; color:var(--ink); text-transform:uppercase; }

/* ── 섹션 리듬 ── */
.section{ padding:var(--section) 0; border-top:1px solid var(--hair); }
.section:first-of-type{ border-top:0; }
.section-head{ max-width:720px; margin-bottom:var(--sp-2xl); }
.section-head .eyebrow{ display:block; margin-bottom:14px; }
.section-head .lead{ margin-top:16px; }

/* 제품 스크린샷 패널 */
.shot{ background:var(--surface-1); border:1px solid var(--hair); border-radius:var(--r-xl);
       padding:10px; overflow:hidden; }
/* height:auto 를 빼면 안 된다 — img 의 height 속성이 표현 힌트로 살아남아 세로로 늘어난다
   (width 만 100% 로 주면 종횡비가 깨진다). */
.shot img{ border-radius:10px; width:100%; height:auto; }
.shot-cap{ margin-top:12px; padding:0 6px 4px; color:var(--ink-4); font-size:12.5px; }

/* 배지 — 앱과 같은 청수 유리 알약. 시안 점(빛나는 표식)은 걷어냈다.
   ★belly 정본값(inset 0 -14px 22px)은 이 알약 높이(≈24px)보다 커서 아랫배가 아니라
     알약 전체를 어둡게 덮는다 → 높이에 맞춰 줄인 값을 쓴다. */
.badge{ display:inline-flex; align-items:center; padding:4px 13px;
        border-radius:var(--pill); border:1px solid var(--glass-border);
        background-color:var(--glass-tint); background-image:var(--glass-sheen);
        -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
        box-shadow:var(--glass-lip), inset 0 -7px 11px rgba(4,16,26,.34);
        color:var(--ink); font-size:12px; letter-spacing:.045em; }

/* ── 푸터 ── */
.footer{ border-top:1px solid var(--hair); padding:56px 0 64px; color:var(--ink-4); font-size:13px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; align-items:start; }
.footer h4{ margin:0 0 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
            color:var(--ink-3); font-weight:600; }
.footer li{ margin-bottom:8px; }
.footer a:hover{ color:var(--cyan); }
.footer-legal{ margin-top:40px; padding-top:20px; border-top:1px solid var(--hair);
               display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }

/* ══ 섹션별 ══ */

/* ── 히어로 ── */
.hero{ padding-top:72px; }
.hero-head{ max-width:760px; }
.hero-kicker{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.hero-top{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:center; }

/* ── 히어로 우측 화면 녹화 — .shot 과 같은 액자를 쓴다(사이트 안에서 같은 물건으로 읽히게) ── */
.hero-viz{ margin:0; background:var(--surface-1); border:1px solid var(--hair);
           border-radius:var(--r-lg); padding:8px; }
.hero-viz video{ display:block; width:100%; height:auto; border-radius:7px;
                 background:var(--canvas); }
.hero-viz .shot-cap{ margin-top:9px; padding:0 4px 2px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* ── 히어로의 3단계 — 실제 설계 흐름 순서(강우 → 홍수량 → 개수)를 그대로 보인다.
      이미지 대신 이것이 히어로의 시각 앵커다. ── */
.pipe-hero{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px;
            border-top:1px solid var(--hair-strong); }
/* ★세로줄은 칸 사이 여백의 **한가운데**에 와야 한다. 오른쪽만 26px 을 주고 왼쪽을 0 으로
   두면 선이 다음 칸 글자에 달라붙어, 어느 칸에도 속하지 않은 장식처럼 읽힌다. */
.pipe-hero > div{ padding:22px 26px 4px; border-right:1px solid var(--hair); }
.pipe-hero > div:first-child{ padding-left:0; }
.pipe-hero > div:last-child{ border-right:0; padding-right:0; }
.pipe-hero .n{ font-variant-numeric:var(--tnum); font-size:12px; color:var(--cyan);
               letter-spacing:.08em; }
.pipe-hero .t{ display:block; margin:9px 0 7px; font-size:17px; font-weight:650;
               color:var(--ink); letter-spacing:-.01em; }
.pipe-hero .d{ font-size:13.5px; line-height:1.55; color:var(--ink-3); }

/* ── 공정 나열(라벨 + 설명) — 강우 전처리·배치처럼 '단계가 여럿'인 것을 카드 없이 보인다 ── */
.flow{ margin:0; border-top:1px solid var(--hair); }
.flow > div{ display:grid; grid-template-columns:var(--col-label) 1fr; gap:var(--col-gap);
             align-items:baseline;
             padding:18px 0; border-bottom:1px solid var(--hair); }
.flow dt{ font-size:14px; color:var(--ink); font-weight:600; }
.flow dd{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.flow .tag{ display:block; margin-top:6px; font-size:12px; color:var(--ink-4);
            letter-spacing:.02em; }
/* 02 홍수량 — 항목이 하나뿐이라 라벨도 구분선도 두지 않는다(둘 다 비교할 짝이 없다). */
.flood-line{ margin:0; font-size:15px; line-height:1.6; font-weight:700; color:var(--ink); }

/* ── 경계(가장 조용한 화면) ── */
.quiet-in{ max-width:720px; }
.quiet-in .h2{ margin:14px 0 20px; }
.quiet-in .lead{ max-width:64ch; }
.eyebrow-mute{ color:var(--ink-4); }

/* ── 규격 ── */
.specs{ margin:0; border-top:1px solid var(--hair); }
.specs > div{ display:grid; grid-template-columns:var(--col-label) 1fr; gap:var(--col-gap);
              align-items:baseline;
              padding:14px 0; border-bottom:1px solid var(--hair); }
.specs dt{ font-size:13px; color:var(--ink-3); font-weight:600; }   /* 위계 = 굵기 */
.specs dd{ margin:0; font-size:13.5px; color:var(--ink); font-variant-numeric:var(--tnum); }

/* ── CTA 배너 ── */
.cta-banner{ max-width:960px; background:var(--surface-1); border:1px solid var(--hair);
             border-radius:var(--r-lg); padding:48px; }
.cta-banner .h2{ margin:14px 0 18px; }
.cta-banner .lead{ max-width:60ch; }
.cta-note{ margin-top:20px; color:var(--ink-4); font-size:12px; }

/* ── 구매 모달 ──
   구조 규범 = 앱 강우분석의 **분석 방법 선택 딥티크**(.rf-diptych/.rf-dip). 사이트에서 고르는
   경험과 앱에서 고르는 경험이 같은 물건으로 읽혀야 한다 — 번호·제목·코드·설명·특징·「선택 →」
   순서와 호버 시 좌측 시안 바까지 그대로 옮겼다. 색만 사이트 팔레트로 바꿨다.
   <dialog> 네이티브 — ESC 닫기·포커스 트랩·배경 비활성화를 브라우저가 준다. */
.buy{ width:min(760px,calc(100vw - 32px)); padding:26px 28px 24px;
      border:1px solid var(--glass-border); border-radius:var(--r-xl);
      background-color:var(--glass-tint-panel); background-image:var(--glass-sheen);
      -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
      box-shadow:var(--glass-lip),var(--glass-belly),0 20px 44px rgba(0,0,0,.5);
      color:var(--ink-2); }
.buy::backdrop{ background:rgba(10,12,16,.62); backdrop-filter:blur(6px) saturate(120%); }

.buy-folio{ display:flex; align-items:baseline; gap:8px; padding-bottom:14px;
            border-bottom:1px solid var(--hair); }
.buy-wm{ font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.16em;
         color:var(--cyan); }
.buy-sep{ color:var(--ink-4); }
.buy-rh{ font-size:12px; letter-spacing:.04em; color:var(--ink-3); }

/* 딥티크 — 칸들을 하나의 액자 안에 붙여 놓고 사이만 실선으로 가른다.
   ★칸 수를 3 으로 못 박지 않는다. 무료 배포 기간에는 안내 카드가 **한 장**이라
     repeat(3,1fr) 이면 카드가 왼쪽 1/3 에 몰리고 액자 오른쪽 2/3 가 빈 채로 남는다.
     auto-fit 은 빈 칸을 접어 남은 칸이 액자를 채우게 한다(카드 3장이면 그대로 3열). */
.diptych{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:16px;
          border:1px solid var(--glass-border); border-radius:16px; overflow:hidden;
          background-color:var(--glass-tint); background-image:var(--glass-sheen);
          -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
          box-shadow:var(--glass-lip),var(--glass-belly),var(--glass-drop); }
.dip input{ position:absolute; opacity:0; width:0; height:0; }
.dip:nth-child(n+2) .dip-in{ border-left:1px solid var(--glass-border); }
.dip-in{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
         height:100%; padding:24px 22px; cursor:pointer; position:relative;
         transition:background .15s ease; }
.dip-in:hover{ background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 62%); }
.dip-in::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
                 background:var(--cyan); opacity:0; transition:opacity .15s ease; }
.dip-in:hover::before, .dip input:checked + .dip-in::before{ opacity:1; }
.dip input:checked + .dip-in{ background:linear-gradient(180deg,var(--cyan-glow),transparent 72%);
                              box-shadow:var(--glass-lip); }
.dip input:focus-visible + .dip-in{ outline:2px solid var(--cyan); outline-offset:-2px; }

.dip-n{ font-variant-numeric:var(--tnum); font-weight:700; font-size:34px;
        line-height:1; color:var(--ink-4); transition:color .15s ease; }
.dip-in:hover .dip-n, .dip input:checked + .dip-in .dip-n{ color:var(--cyan); }
.dip-t{ margin-top:13px; font-size:19px; font-weight:600; color:var(--ink); }
/* ★.dip-code · .dip-price 는 유료 요금제 카드용이다. 무료 배포 기간에는 가격이 안
   그려지지만 **지우지 않는다** — 서버가 무료 종료일을 비우는 순간(11/1) 요금제 화면이
   그대로 되살아난다(index.html drawPlans). 여기를 지우면 그날 가격표가 민얼굴로 뜬다. */
.dip-code{ font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--cyan); }
/* 이 칸은 'EARLY ACCESS' 같은 **영문 대문자**용이다. 한글에 같은 자간을 주면 낱자가
   흩어져 보인다(한글은 이미 정사각 자폭이라 트래킹이 필요 없다). */
.dip-code.ko{ font-family:var(--sans); letter-spacing:0; font-size:11.5px; }
.dip-price{ margin:12px 0 4px; font-variant-numeric:var(--tnum); }
.dip-price s{ color:var(--ink-4); font-size:12.5px; margin-right:8px; }
.dip-price b{ color:var(--ink); font-size:19px; }
.dip-price em{ display:block; margin-top:3px; font-style:normal; font-size:11.5px;
               color:var(--ink-3); }
.dip-feat{ margin:8px 0 0; padding:0; font-size:11.5px; line-height:1.95; color:var(--ink-2); }
.dip-feat li::before{ content:"— "; color:var(--ink-4); }
.dip-go{ margin-top:auto; padding-top:16px; font-size:12px; color:var(--cyan); }
/* 한 장짜리(무료 안내·발급 결과) — 고르는 물건이 아니므로 손가락 커서와 호버 강조를 끈다 */
.diptych.one .dip-in{ cursor:default; }
.diptych.one .dip-in:hover{ background:none; }
.diptych.one .dip-in:hover::before{ opacity:0; }
/* 발급된 라이선스 키 — 길어서 여러 줄이다. 고르기 쉽게 textarea 로 두되 읽기 전용이다. */
.buy-key{ width:100%; margin-top:12px; padding:10px 12px; font-family:var(--mono);
          font-size:12px; line-height:1.55; color:var(--ink); resize:vertical;
          background:rgba(0,0,0,.28); border:1px solid var(--glass-border); border-radius:8px; }

.buy-foot{ margin-top:18px; }
.hidden{ display:none!important; }
/* 구글 로그인 — 버튼 자체는 GSI 가 **iframe 으로** 그려서 내부를 CSS 로 못 고친다.
   그래서 감싸는 패널이 디자인을 낸다(요금제 카드와 같은 유리 테두리로 맞췄다). */
.signin{ margin-top:16px; padding:16px 18px;
         border:1px solid var(--glass-border); border-radius:var(--r-lg);
         background:rgba(255,255,255,.02); }
.signin-t{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink);
           letter-spacing:-.01em; }
.signin-d{ margin:5px 0 12px; font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.signin-btn{ display:flex; justify-content:center; }
.buy-who{ margin:2px 0 0; font-size:13px; color:var(--ink-2); }
.buy-who::before{ content:"✓ "; color:var(--cyan); }
/* 산출물 검토 고지 — 링크 뒤에 숨기지 않고 결제 버튼 바로 위에 **보이게** 둔다.
   ★작게 흐리게 쓰면 "고객이 알 수 있게 했다"가 무색해진다. 본문과 같은 밝기로 둔다. */
.buy-notice{
  margin:14px 0 0; padding:12px 14px; font-size:12.5px; line-height:1.65;
  color:var(--ink-2); background:rgba(108,200,255,.045);
  border-left:2px solid var(--cyan); border-radius:0 6px 6px 0;
}
.buy-notice strong{ color:var(--ink-1); }
.buy-terms{ margin:12px 0 0; line-height:1.6; }
.buy-msg{ min-height:20px; margin-top:12px; font-size:13px; color:var(--ink-3); }
.buy-msg.bad{ color:var(--brick); }
.buy-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* ── 반응형 ── */
/* ── AI 섹션 — 챗 패널 캡처는 실제 폭이 320px 고정이라 전폭 .shot 프레임에 넣으면
      늘어난다. 설명 옆에 실제 크기 비율로 세운다. ── */
.ai-split{ display:grid; grid-template-columns:1fr 330px; gap:44px; align-items:start; }
.ai-panel{ margin:0; }
.ai-panel img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--hair); }

@media (max-width:1024px){
  :root{ --section:76px; }
  .hero-top{ grid-template-columns:1fr; gap:36px; }
  .hero-viz{ max-width:420px; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  /* 상단바에 버튼 둘을 다 남기면 라벨이 두 줄로 접힌다 — 주 CTA 하나만 둔다 */
  .nav-cta .btn-secondary{ display:none; }
  /* 데스크톱 줄바꿈용 <br> 이 좁은 화면에선 "단면을" 한 줄짜리 고아 행을 만든다 */
  .display br{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .specs > div{ grid-template-columns:1fr; gap:4px; }
  .flow > div{ grid-template-columns:1fr; gap:6px; }
  .pipe-hero{ grid-template-columns:1fr; }
  .ai-split{ grid-template-columns:1fr; gap:32px; }
  .ai-panel{ max-width:330px; }
  .pipe-hero > div{ border-right:0; border-bottom:1px solid var(--hair); padding:18px 0; }
  .pipe-hero > div:last-child{ border-bottom:0; }
  .cta-banner{ padding:32px 24px; }
  .hero{ padding-top:52px; }
  :root{ --section:60px; }
}
/* 종단도 캡처는 2360×494 극단 가로형 — 좁은 화면에서 페이지를 밀지 않고 패널 안에서만 스크롤 */
@media (max-width:520px){
  .shot{ overflow-x:auto; }
  .shot img{ min-width:480px; }
}

/* 요금제 여러 단은 좁은 화면에서 글자가 눌린다 — 세로로 내리고 경계선을 가로로 돌린다.
   .dip:nth-child(n+2) 의 왼쪽 선이 그대로 남으면 세로 배치에서 엉뚱한 자리에 그어진다. */
@media (max-width: 720px){
  .diptych{ grid-template-columns:1fr; }
  .dip:nth-child(n+2) .dip-in{ border-left:0; border-top:1px solid var(--glass-border); }
  .dip-in{ padding:18px 20px; }
  .dip-n{ font-size:26px; }
}

/* ── 약관 문서(legal.html) ── 읽는 문서라 폭을 좁히고 행간을 넉넉히 준다. */
.legal{ padding:56px 0 40px; }
.legal .wrap{ max-width:760px; }
.legal-sec{ margin-bottom:64px; }
.legal-sec h3{ margin:28px 0 8px; font-size:15px; color:var(--ink); }
.legal-sec p{ margin:0 0 12px; color:var(--ink-2); line-height:1.85; font-size:14.5px; }
.legal-sec ol, .legal-sec ul{ margin:0 0 12px; padding-left:20px;
                              color:var(--ink-2); line-height:1.85; font-size:14.5px; }
.legal-sec li{ margin-bottom:5px; }
.legal-sec ul ul, .legal-sec ol ul{ margin-top:6px; }
.legal-sec .specs{ margin:12px 0 16px; }
.legal-meta{ font-size:12.5px; color:var(--ink-4); }
/* 아직 채우지 못한 항목 — 결제 개시 전에 실제 값으로 바꿔야 한다. */
.pending{ color:var(--ink-4); font-style:italic; }

/* ── 내려받기 페이지 ──────────────────────────────────────────────────
   ★고지는 **링크 뒤가 아니라 여기 그대로** 보인다(결제창 .buy-notice 와 같은 문구).
     작게 흐리게 쓰면 "고객이 알 수 있게 했다"가 무색해지므로 본문 밝기로 둔다. */
.dl-notice{
  margin:16px 0 0; padding:16px 18px;
  background:rgba(108,200,255,.045); border-left:2px solid var(--cyan);
  border-radius:0 6px 6px 0;
}
.legal-sec .dl-notice p:first-child{ margin-bottom:10px; color:var(--ink-1); }
.dl-notice ol{ margin-bottom:8px; }
.legal-sec .dl-notice p:last-child{ margin-bottom:0; }
/* ★`.legal-sec p` 가 (0,2,0) 이라 클래스 하나짜리 규칙을 덮는다 — 같은 층에서 쓴다.
     안 그러면 여백이 조용히 무시돼 안내 문구와 버튼이 붙어 버린다. */
.legal-sec .dl-actions{ margin:24px 0 0; }
/* ★aria-disabled 는 링크의 클릭을 막지 않는다 — 자바스크립트가 막고, 여기서는 모양만 준다. */
.dl-actions .btn[aria-disabled="true"]{ opacity:.42; cursor:not-allowed; }
.legal-sec .dl-msg{ min-height:20px; margin:12px 0 0; font-size:13px; color:var(--ink-3); }


/* ══ 수면 배경(화면 고정) ═══════════════════════════════════════════════
   수위는 고정. 커서는 높이를 바꾸지 않고 물결만 일으킨다(JS 참조).
   수면 색은 앱이 종단도에서 계획홍수위를 그리는 색 계열이다.
   ★본문 뒤에 항상 깔린다 — 농도는 낮게. 글이 먼저 읽혀야 한다.
   ★body 배경(--canvas)은 불투명이지만, position:fixed 요소는 그 위에 그려진다.
     그래서 내용에는 z-index 를 줘서 물 위로 올린다(아래 규칙). */
.page-water{
  position:fixed; top:0; left:0; right:0; z-index:0; pointer-events:none;
  /* ★높이를 **주소창과 무관하게** 못박는다. 모바일 브라우저는 스크롤 중 주소창을 접었다
     펴는데, inset:0(=bottom:0) 이면 레이어 높이가 그때마다 같이 흔들린다. 배경 기하가
     거기 묶여 있어 스크롤만 해도 빛이 위아래로 튀었다(안드로이드 50px·iOS 36px 측정).
     lvh 는 '주소창이 접힌 큰 뷰포트' 로 **고정**이라 스크롤에 흔들리지 않는다. */
  height:100vh;                         /* lvh 미지원 구형 브라우저 대비 */
  height:100lvh;
  contain:layout paint;                 /* 배경 갱신이 본문 레이아웃을 건드리지 않게 */
}
.page-water .pw-svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  will-change:contents;
}
/* 수면 = 빛. 번지는 겹 셋을 그룹으로 묶어 **진짜 블러**를 걸고, 또렷한 코어만
   블러 밖에 둔다 — 흐릿한 빛 속을 물길 하나가 지나가는 그림이 된다.
   ★또렷한 코어는 두지 않는다. 배경에 경계가 생기는 순간 눈이 그리로 끌려가 본문이
     밀린다 — 배경은 **어디서 시작하고 끝나는지 알 수 없을수록** 글을 잘 읽게 한다.
   ★블러는 곡선이 움직이는 동안 매 프레임 다시 계산된다. 무겁게 느껴지면 blur 반경을
     줄이거나, JS 의 WAVE=false 로 두면 곡선이 멈춰 블러도 재계산되지 않는다.
   ★stroke-linejoin:round — 굵은 획에서 꺾임마다 뾰족한 뿔이 생기는 것을 막는다. */
/* ★블러는 CSS 가 아니라 index.html 의 SVG 필터(#pw-blur)가 건다 — 사파리가 <g> 의
   CSS filter 를 무시한다. 여기 되살리면 Chromium 에서 이중으로 걸린다. */
.page-water .pw-line{
  fill:none; stroke:#6CC8FF; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.page-water .pw-fill{ fill:url(#pw-under); }                  /* 아래로 번지는 잔광 */
.page-water .pw-l1{ stroke-width:440; stroke-opacity:.055; }  /* 바깥 후광 */
.page-water .pw-l2{ stroke-width:210; stroke-opacity:.11; }   /* 번짐 */
.page-water .pw-l3{ stroke-width:95;  stroke-opacity:.24; }   /* 속빛 */
/* ★밝기는 여기서 낸다. 블러 **안**이라 아무리 밝혀도 가장자리가 생기지 않는다 —
   블러 밖에 두면(앞 판) 그 순간 "선"이 되어 본문에서 눈을 뺏는다.
   ★심만 흰빛에 가깝다. 후광은 시안, 중심은 흰빛 — 밝은 광원이 실제로 그렇게 보인다.
   (전부 같은 시안이면 아무리 밝혀도 '파란 띠'에서 더 올라가지 않는다) */
.page-water .pw-l4{ stroke-width:34;  stroke-opacity:1; stroke:#E6F5FF; }     /* 심 */
/* ★획 굵기는 절대값이라 좁은 화면에서 후광(440px)이 화면(390px)보다 넓어진다 —
   화면 전체가 빛으로 덮여 글이 그 위에 뜬다. 폭에 맞춰 함께 줄인다. */
@media (max-width:760px){
  .page-water .pw-l1{ stroke-width:150; }
  .page-water .pw-l2{ stroke-width:72; }
  .page-water .pw-l3{ stroke-width:33; }
  .page-water .pw-l4{ stroke-width:12; }
}

/* 내용은 물 위로 — 물이 fixed 라 명시하지 않으면 글자가 물에 잠긴다. */
.nav, .section, .footer{ position:relative; z-index:1; }

@media (prefers-reduced-motion:reduce){ .page-water .pw-svg{ will-change:auto; } }
@media (hover:none) and (pointer:coarse){ .page-water .pw-svg{ will-change:auto; } }
/* 모바일 폭에서는 수면이 아예 움직이지 않는다(JS 쪽 live() 참조) */
@media (max-width:760px){ .page-water .pw-svg{ will-change:auto; } }

/* 내용은 물 위에 */
.section > .wrap{ position:relative; z-index:1; }




/* ══ 히어로 로고 ══════════════════════════════════════════════════════
   앱을 켜면 나오는 아스키 배너와 같은 형상을 **SVG 도형**으로 그린다.
   ★글자로 두면 안 된다 — 블록문자는 모노스페이스 글꼴에만 있는데 이 사이트가
     동봉하는 건 Pretendard(본문용) 뿐이다. 방문자 PC 에 모노 글꼴이 없으면
     로고가 통째로 깨진다. 도형은 글꼴과 무관하다.
   ★두 색은 상단바 마크·파비콘과 같은 값 — 면=시그니처 시안 / 모서리=짙은 파랑.
   ★크기는 폭으로만 준다(비율은 viewBox 가 지킨다). */
.hero-logo{ margin:0 0 18px; }
.hero-logo .ascii{
  display:block; width:clamp(200px, 27vw, 400px); height:auto;
  filter:drop-shadow(0 0 30px rgba(108,200,255,.20));
}
.hero-logo .ascii .f{ fill:var(--n-face, #6CC8FF); }
.hero-logo .ascii .b{ fill:var(--n-bevel, #2B5470); }

/* 히어로 문구는 이 한 줄뿐이다 */
.hero-tag{
  margin:0; font-size:clamp(17px, 1.5vw, 22px); line-height:1.35;
  letter-spacing:.02em; color:var(--ink-2); font-weight:500;
}

@media (max-width:1024px){
  .hero-logo .ascii{ width:clamp(200px, 42vw, 360px); }
}