/* 나리야 소개 사이트 공통 스타일.
 *
 * 페이지가 홈·다운로드·요금제 셋으로 나뉘면서 토큰과 컴포넌트를 한 파일로 뺐다.
 * 페이지마다 <style> 을 복사해 두면 언젠가 한쪽만 고쳐지고, 그 순간 같은 사이트인데
 * 페이지마다 다르게 보인다.
 *
 * 팔레트는 종전 소개 페이지 것을 그대로 잇는다 — 구글 브랜딩 심사가 이 화면을 이미
 * 확인했고, 결제 페이지(backend/proxy/static/subscribe.html)도 같은 값을 쓴다. */

:root{
  --ink:#1d1d1b; --paper:#f7f7f5; --card:#ffffff; --sub:#6b6b68;
  --line:#e2e2df; --line-strong:#c9c9c4;
  --warn:#8a5a1f; --warn-bg:#f8f1e6;
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f2f2f0; --paper:#151513; --card:#1e1e1c; --sub:#a3a39f;
    --line:#2c2c29; --line-strong:#3d3d39;
    --warn:#e0b072; --warn-bg:#2a2118;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink); line-height:1.7; font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",
              "Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); }
.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ── 상단바 ──────────────────────────────────────────────────────────── */
.topbar{ border-bottom:1px solid var(--line); background:var(--card); }
.topbar .wrap{ display:flex; align-items:center; gap:26px; padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; text-decoration:none;
        letter-spacing:-.01em; }
.brand svg{ display:block; }
.nav{ display:flex; gap:22px; font-size:15px; }
.nav a{ text-decoration:none; color:var(--sub); padding:4px 0; border-bottom:2px solid transparent; }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }
.nav a:hover{ color:var(--ink); }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
@media (max-width:560px){
  .topbar .wrap{ gap:14px; }
  .nav{ gap:14px; font-size:14px; }
}

/* ── 버튼 ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px; text-decoration:none; font-size:16px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:inherit; cursor:pointer;
}
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.sm{ padding:8px 16px; font-size:14px; }
.btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.btn-note{ font-size:13px; color:var(--sub); margin:12px 0 0; }

/* ── 본문 ────────────────────────────────────────────────────────────── */
.hero{ padding:64px 0 68px; }
h1{ font-size:clamp(32px,6.4vw,50px); line-height:1.16; letter-spacing:-.03em; margin:0 0 14px;
    text-wrap:balance; }
h1.page{ font-size:clamp(26px,4.4vw,34px); }
.lede{ font-size:clamp(17px,2.6vw,20px); color:var(--sub); margin:0 0 30px; max-width:34em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

section{ padding:52px 0; border-top:1px solid var(--line); }
section.first{ border-top:0; padding-top:40px; }
h2{ font-size:clamp(21px,3.4vw,27px); letter-spacing:-.02em; margin:0 0 6px; text-wrap:balance; }
h3{ font-size:17px; margin:0 0 5px; }
.section-lede{ color:var(--sub); margin:0 0 28px; max-width:34em; }
.eyebrow{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--sub);
          font-weight:600; margin:0 0 10px; }

ul.plain{ list-style:none; padding:0; margin:0; }
ul.plain li{ padding:14px 0; border-bottom:1px solid var(--line); }
ul.plain li:last-child{ border-bottom:0; }
ul.plain b{ font-weight:600; }
ul.plain span{ display:block; color:var(--sub); font-size:15px; margin-top:2px; }

.pill{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600;
       padding:3px 11px; border-radius:999px; background:var(--warn-bg); color:var(--warn); }

/* ── 다운로드 카드 ───────────────────────────────────────────────────── */
.dl{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:700px){ .dl{ grid-template-columns:repeat(3,1fr); } }
.dl .card{ border:1px solid var(--line); border-radius:var(--r); padding:22px;
           background:var(--card); display:flex; flex-direction:column; gap:5px; }
.dl .card .spec{ color:var(--sub); font-size:14px; margin:0; }
.dl .card p{ color:var(--sub); font-size:15px; margin:0 0 14px; }
.dl .card .btn{ margin-top:auto; }

/* ── 요금제 행 ───────────────────────────────────────────────────────── */
.plans{ display:grid; gap:12px; margin:0 0 24px; }
.plan{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px 18px;
  border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--card);
}
.plan .name{ font-weight:600; font-size:17px; }
.plan .cap{ grid-column:1; color:var(--sub); font-size:14.5px; }
.plan .price{ grid-row:1 / span 2; grid-column:2; text-align:right; font-size:20px; font-weight:600;
              letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan .price small{ display:block; font-size:12.5px; color:var(--sub); font-weight:400;
                    letter-spacing:0; }
.keep-going{ border:1px solid var(--ink); border-radius:var(--r); padding:22px 24px;
             margin:24px 0 0; background:var(--card); }
.keep-going h3{ margin:0 0 6px; font-size:18px; }
.keep-going p{ margin:0; color:var(--sub); font-size:15px; }
.keep-going .fine{ margin:14px 0 0; font-size:13.5px; }
/* 무료 레인 게시 — 약관 제8조 4항이 수치를 이 페이지로 위임한다(2026-08-20 부칙).
   표를 안 쓰는 이유: 이 사이트 CSS 에 table 규칙이 없어 스타일 없이 뜬다. */
.flash-rows{ display:grid; margin:14px 0 0; }
.flash-row{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
            border-top:1px solid var(--line); padding:10px 0; }
.flash-row .name{ font-weight:600; font-size:15px; color:var(--ink); }
.flash-row .amt{ color:var(--sub); font-size:14px; text-align:right;
                 font-variant-numeric:tabular-nums; }
.plan-note{ color:var(--sub); font-size:14px; margin:22px 0 0; }

/* ── 푸터 ────────────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); padding:36px 0 64px; font-size:14px; color:var(--sub); }
footer a{ color:var(--sub); }
.foot-links{ display:flex; flex-wrap:wrap; gap:16px; margin:0 0 10px; }
.biz{ margin:14px 0 0; line-height:1.9; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }