/* ══ Naiad 랜딩 ══
   구조 규범 = linear.app (서피스 사다리 · 희소한 악센트 · 제품 스크린샷이 주인공).
   색은 앱 정본 팔레트(frontend/css/style.css)와 같은 값을 쓴다 — 사이트와 앱이 같은 세계로 읽혀야 한다.
   라벤더 자리에 들어가는 유일한 유채색 = 시안 #6CC8FF. 두 번째 악센트는 두지 않는다. */
:root{
  /* 서피스 사다리 */
  --canvas:#14161B;
  --surface-1:#1A1D24;
  --surface-2:#20242C;
  --surface-3:#262A33;
  --hair:#272B34;
  --hair-strong:#363B46;

  /* 활자 */
  --ink:#E9ECF1;
  --ink-2:#AEB4BE;
  --ink-3:#828892;
  --ink-4:#6A6F79;

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

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

  /* 폰트 정책 = OFL 우선(앱 style.css 와 같은 규칙). 이 사이트는 폰트 파일을 **서빙하지
     않는다** — 자체 호스팅하는 순간 방문자에게 폰트를 배포하는 것이 되므로, 넣으려면
     OFL 폰트 + OFL 고지 동봉이어야 한다. Microsoft 폰트는 뒤쪽 폴백으로만. */
  --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;

  /* ── 청수 유리 ── 앱 정본(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;
  --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; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
          color:var(--cyan); font-family:var(--mono); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ── 버튼 ── */
.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-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:var(--ink-4); }
.btn-lg{ min-height:46px; padding:12px 22px; font-size:15px; }
: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(--ink); }
.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;
           font-family:var(--mono); }

/* 배지 */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
        border-radius:var(--pill); background:var(--surface-2); border:1px solid var(--hair);
        color:var(--ink-2); font-size:12px; font-family:var(--mono); }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }

/* ── 푸터 ── */
.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(--ink-2); }
.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-sub{ margin-top:22px; max-width:62ch; }
.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); }
.pipe-hero > div{ padding:22px 26px 4px 0; border-right:1px solid var(--hair); }
.pipe-hero > div:last-child{ border-right:0; padding-right:0; }
.pipe-hero .n{ font-family:var(--mono); 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:180px 1fr; gap:28px; 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);
            font-family:var(--mono); letter-spacing:.04em; }

/* ── 경계(가장 조용한 화면) ── */
.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:160px 1fr; gap:24px; align-items:baseline;
              padding:14px 0; border-bottom:1px solid var(--hair); }
.specs dt{ font-size:13px; color:var(--ink-3); }
.specs dd{ margin:0; font-size:13.5px; color:var(--ink); }

/* ── 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-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3); }

/* 딥티크 — 두 칸을 하나의 액자 안에 붙여 놓고 가운데만 실선으로 가른다 */
.diptych{ display:grid; grid-template-columns:1fr 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-family:var(--mono); font-variant-numeric:tabular-nums; 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{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--cyan); }
.dip-price{ margin:12px 0 4px; font-family:var(--mono); }
.dip-price s{ color:var(--ink-4); font-size:12.5px; margin-right:8px; }
.dip-price b{ color:var(--ink); font-size:19px; }
.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); }

.buy-foot{ margin-top:18px; }
.hidden{ display:none!important; }
.signin{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.buy-who{ margin:2px 0 0; font-size:13px; color:var(--ink-2); }
.buy-who::before{ content:"✓ "; color:var(--cyan); }
.fld{ display:block; font-size:12px; font-family:var(--mono); letter-spacing:.04em;
      color:var(--ink-3); }
.fld input{ display:block; width:100%; margin-top:7px; padding:10px 12px;
            background:rgba(10,13,18,.5); color:var(--ink);
            font-family:var(--sans); font-size:14px;
            border:1px solid var(--glass-border); border-radius:var(--r-md);
            box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }
.fld input::placeholder{ color:var(--ink-4); }
.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; }
}