/* ──────────────────────────────────────────────────────────────────────────
   Demeter — 판(plate) 레이어 (2026-09-25)

   각 페이지의 인라인 <style> 위에 얹는다. 색과 글꼴은 그대로 두고,
   '판을 짜는 규칙'만 세게 준다: 테두리 한 겹, 큰 표제, 보이는 격자선,
   작은 대문자 꼬리표, 그리고 한 번 뒤집는 띠.

   링크 순서 때문에 항상 인라인 <style> 뒤에 온다 — 여기 쓴 것이 이긴다.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --plate:color-mix(in srgb, var(--grain-base) 30%, transparent);
  --edge:color-mix(in srgb, var(--grain-base) 18%, transparent);
}

/* ── 판 테두리 ─────────────────────────────────────────────────────────────
   화면 가장자리에 한 겹 두른다. 자리를 차지하지 않으므로 sticky 헤더를
   건드리지 않는다(레이아웃에 border 를 주면 sticky 가 어긋난다). */
body::after{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--plate);
}
@media(min-width:900px){ body::after{ box-shadow:inset 0 0 0 2px var(--plate); } }

/* ── 표제 ──────────────────────────────────────────────────────────────────
   작게 조심스럽던 표제를 크게 키우고 자간을 좁힌다. 첫 화면에서 한 문장이
   먼저 꽂히고 설명이 뒤따르게 한다. */
h1{ font-size:clamp(34px,7.4vw,82px) !important; line-height:1.02 !important;
    letter-spacing:-.055em !important; margin-bottom:26px !important; }
h2{ font-size:clamp(24px,4.2vw,42px) !important; line-height:1.1 !important;
    letter-spacing:-.045em !important; }
h3{ letter-spacing:-.02em; }
.lead{ font-size:clamp(16px,1.9vw,20px); line-height:1.75; }

/* ── 꼬리표 ────────────────────────────────────────────────────────────────
   모든 눈썹 글씨 앞에 // 를 붙여 '기계가 찍은 표식'처럼 읽히게 한다. */
.eyebrow{ font-size:11px; letter-spacing:.26em; color:var(--ink-3); }
.eyebrow::before{ content:'// '; color:var(--sun); letter-spacing:.06em; }

/* ── 단추 ──────────────────────────────────────────────────────────────────
   모서리를 각지게. 유령 단추는 테두리를 또렷하게 세운다. */
.btn{ border-radius:0 !important; letter-spacing:.01em; }
.btn.ghost{ border-color:var(--edge) !important; }
.btn.ghost:hover{ border-color:var(--grain) !important; }
.badge, .off, .pill, .card, .kpis, .cycle, .facts, .guide, .pick, .cmd, input, select, textarea{
  border-radius:0 !important;
}

/* ── 격자선 ────────────────────────────────────────────────────────────────
   칸을 카드로 띄우지 않고, 세로선으로 나눈다. 인쇄된 표처럼 보이게. */
.rail{ gap:0 !important; }
.rail > *{ border-top:1px solid var(--edge); padding:20px 0 0; }
@media(min-width:780px){
  .rail{ column-gap:0 !important; }
  .rail > *{ border-top:0; border-left:1px solid var(--edge); padding:2px 26px 0; }
  .rail > *:first-child{ border-left:0; padding-left:0; }
}

/* ── 절기 머리 ─────────────────────────────────────────────────────────────
   번호 · 긴 선 · 오른쪽 끝 표식. 페이지를 가로지르는 선이 장을 나눈다. */
.season{ margin-bottom:22px; }
.season .no{ font-size:11px; letter-spacing:.3em; color:var(--sun); }
.season .rule{ background:var(--edge); }
.season .tag{ font:400 11px var(--mono); letter-spacing:.2em; color:var(--ink-3); white-space:nowrap; }

/* ── 숫자 ──────────────────────────────────────────────────────────────────
   값은 크게, 단위는 작게. 가격과 지표가 멀리서도 읽히게 한다. */
.price{ font-size:clamp(40px,8vw,74px) !important; letter-spacing:-.055em !important; }
.kpi b{ font-size:clamp(22px,4vw,32px) !important; letter-spacing:-.045em !important; }
.facts b{ letter-spacing:-.035em; }

/* ── 뒤집은 띠 ─────────────────────────────────────────────────────────────
   한 페이지에 한 번만. 밀알 바탕에 흙 글씨로 뒤집어 리듬을 끊는다. */
.invert{ background:var(--grain); color:var(--soil-base); border-top:0 !important; }
.invert h1,.invert h2,.invert h3,.invert b,.invert strong,.invert a{ color:var(--soil-base); }
.invert p,.invert li{ color:color-mix(in srgb, var(--soil-base) 74%, var(--grain)); }
.invert .eyebrow{ color:color-mix(in srgb, var(--soil-base) 55%, var(--grain)); }
.invert .eyebrow::before{ color:var(--rust); }
.invert .fill{ color:var(--rust); }
.invert .btn{ background:var(--soil-base); color:var(--grain); border-color:var(--soil-base); }
.invert .btn.ghost{ background:transparent; color:var(--soil-base);
  border-color:color-mix(in srgb, var(--soil-base) 28%, transparent) !important; }
.invert ul.clean li{ border-top-color:color-mix(in srgb, var(--soil-base) 16%, transparent); }

/* ── 바닥글 ────────────────────────────────────────────────────────────────
   상표를 크게 깔아 두고 글씨는 그 위에 올린다. */
footer{ position:relative; overflow:hidden; }
footer .wrap{ position:relative; z-index:1; }
footer::before{
  content:'DEMETER'; position:absolute; left:50%; bottom:-.22em; transform:translateX(-50%);
  font:700 clamp(84px,19vw,230px)/1 var(--mono); letter-spacing:-.06em; white-space:nowrap;
  color:color-mix(in srgb, var(--grain-base) 4%, transparent); pointer-events:none; user-select:none;
}

/* ── 머리 차림 ─────────────────────────────────────────────────────────────
   (떨림은 여기가 아니라 .hide 이름 겹침이었다 — 아래 '가리기' 참고. 블러는 원래대로 둔다.) */
.topnav{ border-top:2px solid var(--sun); }
.topnav a{ font-size:12px; letter-spacing:.04em; }
.topnav .brand{ letter-spacing:.24em; }

/* 좁은 화면에서는 표제를 한 단계 더 눌러 준다 */
@media(max-width:480px){
  h1{ font-size:clamp(30px,8.6vw,40px) !important; letter-spacing:-.045em !important; }
  h2{ letter-spacing:-.035em !important; }
  .rail > *{ padding-top:16px; }
}

/* ── 조건 띠 ───────────────────────────────────────────────────────────────
   버튼 아래 한 줄. 사기 전에 알아야 할 조건 셋을 같은 무게로 늘어놓는다. */
.strip{ display:flex; flex-wrap:wrap; margin:26px 0 24px; border:1px solid var(--edge); }
.strip span{ flex:1 1 auto; padding:13px 16px; font:400 12px/1.5 var(--mono);
  letter-spacing:.02em; color:var(--ink-2); border-left:1px solid var(--edge); white-space:nowrap; }
.strip span:first-child{ border-left:0; color:var(--grain); }
@media(max-width:620px){
  .strip span{ flex:1 1 100%; border-left:0; border-top:1px solid var(--edge); white-space:normal; }
  .strip span:first-child{ border-top:0; }
}

/* 뒤집은 띠는 화면 폭을 꽉 채운다 — 가운데 글은 그대로 1280px 안에서 읽힌다 */
.invert{ padding:74px 0 78px; }
.invert .lead{ max-width:760px; }

/* ── 다른 점 네 가지 ───────────────────────────────────────────────────────
   위 선만 있던 칸에 세로선을 더해 '인쇄된 네 칸'으로 만든다. */
@media(min-width:1120px){
  .gist .g4{ gap:0 !important; }
  .gist .g4 > .gcard{ border-left:1px solid var(--edge); padding-left:26px; margin-left:-1px; }
  .gist .g4 > .gcard:first-child{ border-left:0; padding-left:0; margin-left:0; }
}
.gcard .more::after{ content:' →'; }

/* ── 절기 안내 부제 — 은유 이름 아래 쉬운 말 한 줄(2026-09-26) ──────── */
.cycle .sub{ display:block; margin-top:5px; font:400 11px/1.5 var(--sans); color:var(--ink-3); }
/* 절기 판 안의 눈썹은 h2 바로 위에 붙는다 */
.plate .eyebrow{ margin-bottom:10px; }

/* 숫자가 바뀌어도 폭이 안 흔들리게 — 조건 띠·본문 숫자는 같은 폭 숫자로(2026-09-26) */
.strip span, .lead, .kpi b, td.n, .price { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   밝은 판 — 기본 (2026-09-26)

   이 화면의 색은 전부 "잉크색을 바탕색 위에 몇 % 섞는다"로 만들어져 있다.
   그래서 기준색 두 개만 뒤집으면 --ink·--field·--furrow 같은 파생색이
   전부 따라온다 — CSS 변수는 쓰는 순간에 계산되기 때문이다.

   두 판을 쓰는 법: 아래 규칙은 <html data-theme="dark"> 가 아닐 때만 걸린다.
   어두운 판을 고르면 이 규칙이 통째로 빠지고, 각 페이지 인라인 <style> 의
   원래 어두운 값이 그대로 되살아난다 — 어두운 색을 두 번 적지 않는다.
   표시가 아예 없으면(자바스크립트가 꺼진 경우 포함) 밝은 판이 기본이다.

   주의: 쉼표로 이은 선택자는 칸마다 조건을 따로 붙여야 한다.
   맨 앞에만 붙이면 나머지가 두 판 모두에 걸려, 어두운 판에서 판화가
   반전된 채로 남는다(2026-09-26에 실제로 그랬다).
   ══════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --soil-base:#F5F2E9;
  --grain-base:#153D32;
  --brand:#153D32;
  --gold:#C6A35C;
  --card:#FBF9F4;
  /* 밝은 바탕에서는 원래 강조색이 너무 옅어 읽히지 않는다 → 같은 계열로 진하게 */
  --sprout:#2E7D4F;
  --sun:#7F6126;
  --rust:#B3402B;
  /* 테두리·가장자리 */
  --plate:color-mix(in srgb, var(--grain-base) 22%, transparent);
  --edge:color-mix(in srgb, var(--grain-base) 15%, transparent);
  /* 본문 글자는 옅으면 안 읽힌다 — 잉크를 더 진하게 */
  --ink:#1B2924;
  --ink-2:#4A5A54;
  --ink-3:#5E6C66;
  --field:var(--card);
  --field-2:#ECE8DD;
  --furrow:color-mix(in srgb, var(--grain-base) 20%, transparent);
  --furrow-2:color-mix(in srgb, var(--grain-base) 11%, transparent);
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --soil-base:#0D1A16; --grain-base:#F5F2E9;
  --brand:#C6A35C; --gold:#C6A35C; --card:#13241F;
  --sprout:#91C7A3; --sun:#C6A35C; --rust:#F39C86;
  --ink:#F5F2E9; --ink-2:#CDD7D0; --ink-3:#A9BBB1;
  --field:var(--card); --field-2:#1C322A;
  --plate:#456153; --edge:#3A5247; --furrow:#3A5247; --furrow-2:#2D4438;
}

/* 판화를 종이에 찍는다.
   원본은 어두운 바탕에 밝은 선으로 새긴 그림이다. 밝은 페이지에 그대로 놓으면 검은 상자가 되고,
   그냥 invert 하면 팔레트 색이 뒤집혀 푸르게 된다. 그래서 세 단계를 거친다 —
   ① grayscale 로 색을 빼고 ② invert 로 '흰 종이에 검은 선' 으로 뒤집고
   ③ multiply 로 흰 바탕을 지워, 남은 선만 페이지의 종이색 위에 얹는다. */
:root:not([data-theme="dark"]) .goddess,
:root:not([data-theme="dark"]) .plate img,
:root:not([data-theme="dark"]) .plate video,
:root:not([data-theme="dark"]) .crumbfig img {
  filter:grayscale(1) invert(1) brightness(1.09) contrast(1.06);
  mix-blend-mode:multiply;
}
.plate figure { line-height:0; }

/* 뒤집은 띠는 밝은 판에서 '어두운 띠' 가 된다 — 페이지를 한 번 눌러 주는 자리 */
:root:not([data-theme="dark"]) .invert { background:var(--grain-base); }
:root:not([data-theme="dark"]) .invert h1,
:root:not([data-theme="dark"]) .invert h2,
:root:not([data-theme="dark"]) .invert h3,
:root:not([data-theme="dark"]) .invert b,
:root:not([data-theme="dark"]) .invert strong,
:root:not([data-theme="dark"]) .invert a { color:var(--soil-base); }
:root:not([data-theme="dark"]) .invert p,
:root:not([data-theme="dark"]) .invert li { color:color-mix(in srgb, var(--soil-base) 82%, var(--grain-base)); }
:root:not([data-theme="dark"]) .invert .eyebrow { color:color-mix(in srgb, var(--soil-base) 60%, var(--grain-base)); }
:root:not([data-theme="dark"]) .invert .eyebrow::before { color:#D7A64A; }
:root:not([data-theme="dark"]) .invert .fill { color:#E3B75F; }
:root:not([data-theme="dark"]) .invert .btn { background:var(--soil-base); color:var(--grain-base); border-color:var(--soil-base); }
:root:not([data-theme="dark"]) .invert .btn.ghost { background:transparent; color:var(--soil-base);
  border-color:color-mix(in srgb, var(--soil-base) 34%, transparent) !important; }
:root:not([data-theme="dark"]) .invert ul.clean li { border-top-color:color-mix(in srgb, var(--soil-base) 20%, transparent); }

/* 머리띠·바닥 상표 */
:root:not([data-theme="dark"]) .topnav { border-top-color:var(--sun); }
:root:not([data-theme="dark"]) .topnav .brand { text-shadow:none; }
:root:not([data-theme="dark"]) footer::before { color:color-mix(in srgb, var(--grain-base) 5%, transparent); }

/* 입력칸은 종이보다 살짝 눌러 둔다 — 테두리만으로는 잘 안 보인다 */
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea { background:color-mix(in srgb, var(--grain-base) 3%, var(--soil-base)); }

/* 지표 관계망 그림 — 밝은 바탕에서는 원래 선 색이 종이에 묻힌다 */
:root:not([data-theme="dark"]) .net circle { fill:#FFFFFF; stroke:color-mix(in srgb, var(--grain-base) 45%, transparent); }
:root:not([data-theme="dark"]) .net circle.on { fill:color-mix(in srgb, var(--sun) 16%, #FFFFFF); stroke:var(--sun); stroke-width:1.6; }
:root:not([data-theme="dark"]) .net line { stroke:color-mix(in srgb, var(--grain-base) 26%, transparent); }
:root:not([data-theme="dark"]) .net line.s { stroke:color-mix(in srgb, var(--grain-base) 48%, transparent); }
:root:not([data-theme="dark"]) .net text { fill:color-mix(in srgb, var(--grain-base) 70%, transparent); }
:root:not([data-theme="dark"]) .net .hub { fill:var(--grain-base); font-weight:600; }

/* ── 판 바꾸기 단추 ─────────────────────────────────────────────────────
   해/달 두 아이콘을 겹쳐 두고 지금 판의 반대쪽만 보여 준다 — 누르면 무엇이 될지가 보인다. */
.topnav .mode{ order:9; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:30px; margin-left:10px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--furrow-2); border-radius:0; color:var(--ink-3); }
.topnav .mode:hover{ color:var(--grain); border-color:var(--furrow); }
.topnav .mode svg{ width:15px; height:15px; }
.topnav .mode .i-sun{ display:none; }
html[data-theme="dark"] .topnav .mode .i-sun{ display:block; }
html[data-theme="dark"] .topnav .mode .i-moon{ display:none; }
@media(max-width:720px){
  /* 폰에서는 '메뉴' 단추 바로 옆, 첫 줄에 붙여 둔다 — order 를 풀면 DOM 순서(메뉴 → 판)를 따른다.
     order:9 를 그대로 두면 메뉴를 펼쳤을 때 링크들 뒤로 밀려 맨 아래 혼자 남는다. */
  .topnav .mode{ order:0; margin-left:8px; width:38px; height:34px; }
}

/* ── API 등록 안내(내려받기 페이지) — 탭 넷, 단계 카드 ──────────────────────── */
.tabs{ display:flex; flex-wrap:wrap; gap:0; margin:26px 0 0; border:1px solid var(--edge); }
.tabs .tab{ flex:1 1 160px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px;
  background:none; border:0; border-left:1px solid var(--edge); color:var(--ink-3); cursor:pointer; text-align:left;
  font:500 15px/1.3 var(--sans); }
.tabs .tab:first-child{ border-left:0; }
.tabs .tab small{ font:400 11px/1.4 var(--mono); letter-spacing:.02em; color:var(--ink-3); }
.tabs .tab:hover{ color:var(--grain); }
.tabs .tab.on{ color:var(--grain); background:var(--field-2); box-shadow:inset 0 -2px 0 var(--sun); }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; border:1px solid var(--edge); border-top:0; }
.steps.hide{ display:none; }
@media(min-width:880px){ .steps{ grid-template-columns:repeat(5,1fr); } }
.stepcard{ padding:18px 18px 22px; border-top:1px solid var(--edge); }
@media(min-width:880px){ .stepcard{ border-top:0; border-left:1px solid var(--edge); } .stepcard:first-child{ border-left:0; } }
.stepcard .scr{ display:flex; align-items:center; gap:10px; padding:9px 11px; margin:0 0 14px; border:1px solid var(--edge);
  background:var(--field); font:400 11px/1.4 var(--mono); color:var(--ink-2); }
.stepcard .scr .no{ color:var(--sun); letter-spacing:.14em; }
.stepcard .scr .path{ min-width:0; overflow-wrap:anywhere; }
.stepcard h3{ margin:0 0 8px; font-size:15px; }
.stepcard p{ margin:0; font-size:14px; line-height:1.8; color:var(--ink-2); }
@media(max-width:480px){ .tabs .tab{ flex-basis:50%; padding:10px 12px; } }

/* ── 결제 칸(2026-09-26): 국내 계좌이체 / 해외 PayPal 을 탭으로, 브라우저 지역으로 기본값 ──── */
.paytabs{ display:flex; margin:14px 0 16px; border:1px solid var(--edge); }
.paytabs .ptab{ flex:1 1 50%; display:flex; flex-direction:column; gap:2px; padding:11px 14px; background:none; border:0;
  border-left:1px solid var(--edge); color:var(--ink-3); cursor:pointer; text-align:left; font:500 15px/1.3 var(--sans); }
.paytabs .ptab:first-child{ border-left:0; }
.paytabs .ptab small{ font:400 11px/1.4 var(--mono); color:var(--ink-3); }
.paytabs .ptab.on{ color:var(--grain); background:var(--field-2); box-shadow:inset 0 -2px 0 var(--sun); }
/* 가리기 — 결제 칸 전용. (2026-09-26 오후) 처음엔 범용 .hide 였는데, 머리띠의 스크롤 숨김 상태(.topnav.hide 는 transform 만)와
   이름이 겹쳐 머리띠가 display:none 이 됐다. 문서가 61px 줄어 scrollY 가 튀고 → 스크롤 핸들러가 다시 보이게 하고 → 또 줄고…
   60Hz 로 왕복하는 것이 '헤더 떨림'의 진짜 원인이었다. 그래서 결제 칸 요소로만 한정한다. */
.paylead.hide, .bank.hide, .btn.hide, [data-pay-only].hide, [data-pay-lead].hide{ display:none !important; }
.bank{ margin-top:20px; padding:18px 20px; border:1px solid var(--edge); background:var(--field); }
.bank dl{ margin:0; display:grid; gap:8px; }
.bank dl > div{ display:grid; grid-template-columns:76px 1fr; gap:12px; align-items:baseline; font-size:15px; }
.bank dt{ color:var(--ink-3); font:400 12px var(--mono); letter-spacing:.06em; }
.bank dd{ margin:0; color:var(--grain); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bank .copy{ margin-left:8px; padding:2px 9px; border:1px solid var(--edge); background:none; color:var(--ink-2);
  font:400 11px var(--mono); cursor:pointer; }
.bank .copy:hover{ color:var(--grain); border-color:var(--grain); }

/* ── API 안내: 실제 화면(공식 문서에서 가져온 것) ─────────────────────────── */
.stepcard .shot{ margin:0 0 12px; border:1px solid var(--edge); background:#FFFFFF; line-height:0; }
.stepcard .shot img{ width:100%; height:auto; display:block; }
.stepcard .src{ display:block; margin:6px 0 0; font:400 10px/1.5 var(--mono); color:var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   움직임 (2026-09-26)

   원칙 셋.
   ① 자리는 절대 움직이지 않는다 — opacity 와 transform 만 쓴다(레이아웃이 한 번 흔들린 적이 있다).
   ② 화면에 들어올 때 한 번, 누를 때 한 번. 그 밖에는 가만히 있다.
   ③ '움직임 줄이기'를 켠 분에게는 전부 끈다(site.js 가 html.anim 을 떼어 낸다).

   가림막: 각 페이지 <head> 인라인 스크립트가 그리기 전에 <html class="anim"> 을 찍는다.
   site.js 가 화면에 들어오는 것마다 .in 을 붙여 걷어 낸다. site.js 가 안 오면 같은 스크립트의
   타이머가 2.5초 뒤 .anim-go 를 찍어 전부 보이게 한다 — 어떤 경우에도 글이 숨어 있지는 않는다.
   ══════════════════════════════════════════════════════════════════════ */
:root{ --ease-out:cubic-bezier(.2,.7,.2,1); --ease-inout:cubic-bezier(.76,0,.24,1); }

/* 들어올 때 — 살짝 아래서 떠오른다. 옆으로 늘어선 칸(격자·KPI·절기)은 --i 만큼 차례로. */
html.anim .rv{ opacity:0; transform:translate3d(0,16px,0); }
html.anim .rv.in{ opacity:1; transform:none;
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms); }

/* 판화·영상 — 섞기(mix-blend-mode)가 걸린 그림은 opacity 나 transform 을 주면 섞임이 풀려 흰 상자가 된다.
   그래서 그림은 그대로 두고, 종이색 가림막(::after)이 오른쪽으로 걷힌다. */
html.anim .rv-cur{ position:relative; }
html.anim .rv-cur::after{ content:''; position:absolute; inset:-1px; z-index:2; pointer-events:none;
  background:var(--soil, var(--soil-base)); transform-origin:100% 50%; }
html.anim .rv-cur.in::after{ transform:scaleX(0); transition:transform 1s var(--ease-inout) .1s; }

/* 절기 머리 — 선이 왼쪽에서 그어지고, 번호가 먼저·표식이 나중에 뜬다 */
html.anim .rv-line .rule{ transform:scaleX(0); transform-origin:0 50%; }
html.anim .rv-line .no, html.anim .rv-line .tag{ opacity:0; }
html.anim .rv-line.in .rule{ transform:none; transition:transform .9s var(--ease-inout); }
html.anim .rv-line.in .no{ opacity:1; transition:opacity .5s ease; }
html.anim .rv-line.in .tag{ opacity:1; transition:opacity .5s ease .55s; }

/* 지표 관계망 — 점이 차례로 맺히고, 선과 이름이 뒤따른다 */
html.anim .net.rv-net circle{ transform:scale(0); transform-box:fill-box; transform-origin:center; }
html.anim .net.rv-net line, html.anim .net.rv-net text{ opacity:0; }
html.anim .net.rv-net.in circle{ transform:scale(1); transition:transform .55s var(--ease-out) calc(var(--i,0) * 60ms); }
html.anim .net.rv-net.in line{ opacity:1; transition:opacity .6s ease .35s; }
html.anim .net.rv-net.in text{ opacity:1; transition:opacity .5s ease .55s; }

/* 비상구 — site.js 가 오지 않았거나 인쇄할 때는 전부 보인다 */
html.anim.anim-go .rv, html.anim.anim-go .rv-line *, html.anim.anim-go .net *{ opacity:1 !important; transform:none !important; }
html.anim.anim-go .rv-cur::after{ display:none; }
@media print{
  html.anim .rv, html.anim .rv-line *, html.anim .net *{ opacity:1 !important; transform:none !important; }
  html.anim .rv-cur::after{ display:none; }
}

/* ── 누를 때 ────────────────────────────────────────────────────────────── */
.btn{ transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); transition-duration:.08s; }
button.copy, .cmd button{ transition:color .2s ease, border-color .2s ease; }
.bank .copy.done, .cmd button.done{ color:var(--sprout); border-color:var(--sprout); }

/* 머리띠 링크 — 밑줄이 왼쪽에서 그어진다. 지금 있는 자리는 그어진 채로. */
.topnav .in > a:not(.brand):not(.dl){ position:relative; transition:color .2s ease; }
.topnav .in > a:not(.brand):not(.dl)::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--sun); transform:scaleX(0); transform-origin:0 50%; transition:transform .25s var(--ease-out); }
.topnav .in > a:not(.brand):not(.dl):hover::after, .topnav .in > a[aria-current]:not(.dl)::after{ transform:scaleX(1); }
@media(max-width:720px){ .topnav .in > a:not(.brand):not(.dl)::after{ display:none; } }

/* 더 보기 화살표가 앞으로 나간다 */
.gcard .more::after{ display:inline-block; transition:transform .25s var(--ease-out); }
.gcard .more:hover::after{ transform:translateX(4px); }

/* 절기 여섯 칸 — 이름이 살짝 앞으로 */
.cycle a{ transition:background-color .25s ease; }
.cycle a .nm{ transition:transform .3s var(--ease-out); }
.cycle a:hover .nm{ transform:translateX(4px); }

/* 칸들 — 테두리·바탕만 부드럽게 */
.kpi, .card, .gcard, .stepcard, .mode, .pick, .facts > div, .step, .tabs .tab, .paytabs .ptab, .switch button, ul.menus li{
  transition:border-color .3s ease, background-color .3s ease, color .2s ease, box-shadow .3s ease, opacity .35s ease; }
.kpi:hover{ background:var(--field-2); }
.stepcard .shot{ overflow:hidden; }
.stepcard .shot img{ transition:transform .6s var(--ease-out); }
.stepcard:hover .shot img{ transform:scale(1.025); }

/* 여닫이 — 더하기가 45도 돌아 닫기가 되고, 내용은 위에서 내려온다 */
@keyframes rv-open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.qa summary::after, .guide summary::after{ transition:transform .3s var(--ease-out), color .2s ease; }
.qa[open] summary::after, .guide[open] summary::after{ content:'+'; transform:rotate(45deg); }
.qa[open] .a, .guide[open] > :not(summary), .others[open] > :not(summary){ animation:rv-open .38s var(--ease-out) both; }

/* 탭·결제 칸·안내 글 — 바뀔 때 한 번 내려온다 */
.steps:not(.hide), .paylead:not(.hide), .bank:not(.hide){ animation:rv-open .4s var(--ease-out) both; }
.msg:not(:empty){ animation:rv-open .3s var(--ease-out) both; }

/* 숫자 — 세는 동안 폭이 흔들리지 않게 */
.cnt, [data-count]{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .btn:hover, .btn:active, .gcard .more:hover::after, .cycle a:hover .nm, .stepcard:hover .shot img{ transform:none; }
  .qa[open] .a, .guide[open] > :not(summary), .others[open] > :not(summary), .steps:not(.hide), .paylead:not(.hide), .bank:not(.hide), .msg:not(:empty){ animation:none; }
}

/* ── API 안내 독립 페이지(2026-09-26, scripts/guides.py) — 단계를 세로로, 화면은 오른쪽에 크게 ── */
.guide-page .steps{ grid-template-columns:1fr !important; border-top:1px solid var(--edge); }
.guide-page .stepcard{ border-left:0; border-top:1px solid var(--edge); padding:26px 0; }
.guide-page .stepcard:first-child{ border-top:0; }
.guide-page .stepcard h3{ font-size:20px; margin:0 0 10px; }
.guide-page .stepcard p{ font-size:15.5px; line-height:1.85; }
.guide-page .stepcard .shot{ margin:14px 0 0; }
@media(min-width:880px){
  .guide-page .stepcard{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto auto 1fr; gap:0 32px; align-items:start; }
  .guide-page .stepcard .scr{ grid-column:1; grid-row:1; }
  .guide-page .stepcard h3{ grid-column:1; grid-row:2; }
  .guide-page .stepcard p{ grid-column:1; grid-row:3; }
  .guide-page .stepcard .shot{ grid-column:2; grid-row:1 / span 3; margin:0; }
  .guide-page .stepcard .src{ grid-column:2; grid-row:4; }
}
.guide-page .crumb a{ color:var(--ink-2); text-decoration:none; } .guide-page .crumb a:hover{ color:var(--grain); }
.others-guides{ display:flex; flex-wrap:wrap; margin-top:12px; border:1px solid var(--edge); }
.others-guides a{ flex:1 1 140px; padding:14px 16px; border-left:1px solid var(--edge); text-decoration:none; color:var(--grain); font:400 13px var(--mono); letter-spacing:.02em; }
.others-guides a:first-child{ border-left:0; } .others-guides a:hover{ background:var(--field-2); }
@media(max-width:620px){ .others-guides a{ flex:1 1 100%; border-left:0; border-top:1px solid var(--edge); } .others-guides a:first-child{ border-top:0; } }

/* ── 언어 안내 토스트(2026-09-26) — 브라우저 언어와 페이지 언어가 다르면 아래에 한 줄. 자리를 안 차지한다(fixed). ── */
.langbar{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,0); z-index:70; display:flex; align-items:center; gap:14px;
  max-width:calc(100% - 32px); padding:11px 12px 11px 16px; background:var(--grain); color:var(--soil-base); border:1px solid var(--grain);
  font:400 13px/1.4 var(--mono); letter-spacing:.01em; box-shadow:0 10px 30px rgba(0,0,0,.25); animation:rv-open .4s var(--ease-out) both; }
.langbar a{ color:var(--soil-base); font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.langbar button{ margin-left:2px; width:26px; height:26px; border:0; background:transparent; color:var(--soil-base); font:400 18px/1 var(--mono); cursor:pointer; opacity:.7; }
.langbar button:hover{ opacity:1; }
@media(max-width:520px){ .langbar{ flex-wrap:wrap; gap:6px 12px; bottom:12px; } }

/* ── 설치 순서 카드(2026-09-26) — 내려받기의 '설치 방법'을 API 안내와 같은 단계 카드(01~05)로 ── */
.guide ol.steps.cards{ border-top:1px solid var(--edge); margin:16px 0 0; padding:0; list-style:none; }
.guide ol.steps.cards > li{ margin:0; padding:18px 18px 22px; font-size:inherit; color:inherit; }
.guide ol.steps.cards > li h3{ font-size:15px; }
.guide .alt{ margin-top:18px; padding:14px 16px; border:1px dashed var(--edge); font-size:14px; line-height:1.7; color:var(--ink-2); }
.guide .alt > b{ display:block; margin-bottom:2px; color:var(--grain); }

/* ── 머리띠 개편(2026-09-27): 가격 메뉴 · 국기 언어 선택 · 내려받기 단추 맨 오른쪽 ─────────── */
/* 머리띠의 내려받기 단추. 각 페이지의 인라인 CSS 에 내려받기 **섹션**용 `.dl { display:grid; margin-top:28px }` 가 있어 같은 이름의 이 단추까지
   그리드가 되고 28px 아래로 밀렸다(2026-10-02, 가격 페이지 캡처로 보고). 여기서 display·margin 을 못 박아 섹션 규칙이 단추에 닿지 않게 한다. */
.topnav .in > a.dl{ order:10; display:inline-flex; align-items:center; margin:0 0 0 8px; padding:8px 14px; background:var(--grain); color:var(--soil-base); border:1px solid var(--grain);
  font-weight:600; letter-spacing:.02em; white-space:nowrap; transition:background-color .2s ease, color .2s ease; }
.topnav .in > a.dl:hover{ background:var(--soil-base); color:var(--grain); }
.topnav .langs{ order:8; display:inline-flex; margin-left:auto; border:1px solid var(--furrow-2); }
.topnav .langs a{ display:inline-flex; align-items:center; gap:5px; padding:6px 9px; font:400 12px var(--mono); letter-spacing:.06em; color:var(--ink-3); text-decoration:none; }
.topnav .langs a + a{ border-left:1px solid var(--furrow-2); }
.topnav .langs a:hover{ color:var(--grain); }
.topnav .langs a[aria-current]{ color:var(--soil-base); background:var(--grain); }
.topnav .langs .flag{ font-size:14px; line-height:1; }
.topnav .mode{ order:9; }
@media(max-width:880px){
  /* 첫 줄: 상표 · 국기 둘 · 내려받기 · 메뉴 (판 단추는 메뉴를 펼쳤을 때 맨 아래). 펼친 링크는 그 아래 줄로.
     폭 390px 에 다 들어가도록 국기만 보이고 글자(KR/US)는 숨긴다. */
  .topnav .in{ flex-wrap:wrap; gap:0 10px; padding:12px 18px; }
  .topnav .menu{ display:inline-block; }
  .topnav .in > a:not(.brand):not(.dl){ display:none; }
  .topnav.open .in > a:not(.brand):not(.dl){ display:block; width:100%; padding:11px 0; border-top:1px solid var(--furrow-2); font-size:14px; }
  .topnav .langs{ order:1; margin-left:auto; }
  .topnav .langs a{ padding:6px 7px; gap:0; }
  .topnav .langs a > :not(.flag){ display:none; }
  .topnav .langs a{ font-size:0; } .topnav .langs .flag{ font-size:15px; }
  .topnav .in > a.dl, .topnav.open .in > a.dl{ display:inline-flex !important; order:2; width:auto; padding:6px 10px; border-top:0; font-size:12px; margin:0; align-self:center; }
  .topnav .menu{ order:3; margin-left:0; }
  .topnav .mode{ display:none; }
  .topnav.open .mode{ display:inline-flex; order:20; margin:10px 0 0; }
  .topnav.open .in > a:not(.brand):not(.dl){ order:9; }
}

/* ── 페이지 머리(빵부스러기·표제) — 내려받기·가입·문의에 있던 규칙을 공용으로(가격 페이지도 쓴다) ── */
.pagehead{ padding:40px 0 0; border-top:0; }
.pagehead + section{ padding-top:44px; border-top:0; }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:400 12px var(--mono); letter-spacing:.06em; color:var(--ink-3); margin:0 0 30px; }
.crumb a{ color:var(--ink-3); text-decoration:none; } .crumb a:hover{ color:var(--grain); }
.crumb b{ font-weight:400; color:var(--sun); } .crumb .sep{ opacity:.45; }
.crumbhead{ min-width:0; }
.crumb-note{ margin:0; font-size:18px; line-height:1.75; color:var(--ink); max-width:660px; }
.pricing-page .crumbhead .badge{ margin-bottom:14px; }
.pricing-page .crumbhead h1 .off{ vertical-align:middle; margin-left:16px; letter-spacing:.02em; white-space:nowrap; font-size:14px; line-height:1; padding:7px 11px; }

/* ── API 안내를 넓고 크게(2026-09-27): 탭이 화면 폭을 다 쓰고, 단계 카드와 화면이 커진다 ── */
#api.wide .wrap{ max-width:1640px; }
#api.wide .tabs{ margin-top:32px; }
#api.wide .tabs .tab{ padding:18px 22px; font-size:18px; gap:4px; }
#api.wide .tabs .tab small{ font-size:12px; }
#api.wide .stepcard{ padding:24px 22px 28px; }
#api.wide .stepcard .scr{ font-size:12px; padding:10px 12px; margin-bottom:16px; }
#api.wide .stepcard h3{ font-size:18px; margin-bottom:10px; }
#api.wide .stepcard p{ font-size:15.5px; line-height:1.85; }
#api.wide .stepcard .shot{ margin-bottom:16px; }
#api.wide .lead{ max-width:900px; }
@media(min-width:1400px){ #api.wide .stepcard{ padding:28px 26px 32px; } #api.wide .stepcard h3{ font-size:19px; } }

/* ── 반응형 손질(2026-09-27) ───────────────────────────────────────────────── */
/* 태블릿 폭(721~1000px)에서 영어 머리띠가 한 줄을 넘쳤다 → 간격·글자를 한 단계 줄인다 */
@media(min-width:721px) and (max-width:1000px){
  .topnav .in{ gap:12px; }
  .topnav .in > a:not(.brand){ font-size:11px; }
  .topnav .langs a{ padding:5px 7px; }
  .topnav .in > a.dl{ padding:7px 10px; margin-left:4px; }
  .topnav .mode{ margin-left:4px; }
}
/* 폰에서 터미널 한 줄은 가로로 밀지 말고 줄바꿈 */
@media(max-width:600px){
  .cmd{ flex-wrap:wrap; }
  .cmd code{ white-space:pre-wrap; overflow-wrap:anywhere; flex:1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   그림과 숫자 (2026-10-08) — 24시간 · 다른 점 네 가지 · 왜 만들었나
   아이콘은 선 하나 굵기(1.5), currentColor 로 그려 두 판 모두 강조색(--sun)을 따른다.
   숫자는 '크게, 같은 폭으로, 이름표는 아래에' — 훑어보는 눈이 숫자부터 잡게 한다.
   ══════════════════════════════════════════════════════════════════════ */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ display:block; width:34px; height:34px; margin:0 0 16px; color:var(--sun);
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ico-s{ display:inline-block; width:13px; height:13px; margin-right:5px; vertical-align:-2px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* 큰 숫자 + 아래 이름표 */
.fig{ margin:0 0 16px; }
.fig b{ display:block; font:400 clamp(34px,4.4vw,46px)/1 var(--mono); letter-spacing:-.05em; color:var(--grain);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.fig b small, .kpis.nums b small{ font-size:.42em; letter-spacing:-.01em; color:var(--ink-2); margin-left:4px; }
.fig > span, .fig.pair span{ display:block; margin-top:9px; font:400 11px/1.5 var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.fig.word b{ font-size:clamp(24px,2.6vw,30px); line-height:1.15; letter-spacing:-.04em; white-space:normal; padding-top:6px; }
.fig.pair{ display:grid; grid-template-columns:auto auto; justify-content:start; column-gap:26px; }
.fig.pair .split{ grid-column:1 / -1; display:block; height:6px; margin-top:12px; max-width:220px;
  background:linear-gradient(90deg, var(--sun) 0 80%, transparent 80% calc(80% + 3px), var(--furrow) calc(80% + 3px)); }
.vcard{ display:flex; flex-direction:column; }
.vcard p{ margin-bottom:0; }

/* 24시간 — 시계 링과 시간표 */
.clock{ display:grid; gap:22px 44px; align-items:center; margin-top:34px; padding-top:30px; border-top:1px solid var(--edge); }
@media(min-width:780px){ .clock{ grid-template-columns:minmax(0,260px) minmax(0,1fr); } }
.clock figure{ margin:0; justify-self:center; width:100%; max-width:260px; }
.ring{ display:block; width:100%; height:auto; }
.ring .tk{ stroke:var(--ink-3); stroke-width:1.2; fill:none; }
.ring .cr{ fill:none; stroke:var(--ink-3); stroke-width:3; stroke-dasharray:1.5 3.5; }
.ring .kr, .ring .us{ fill:none; stroke-width:11; stroke-linecap:butt; }
.ring .kr{ stroke:var(--sprout); } .ring .us{ stroke:var(--sun); }
.ring .lt{ opacity:.42; }
.ring text{ font:400 9px var(--mono); fill:var(--ink-3); text-anchor:middle; letter-spacing:.04em; }
.ring text.c{ font-size:10.5px; fill:var(--grain); }
.sessions{ list-style:none; margin:0; padding:0; border-top:1px solid var(--edge); }
.sessions li{ display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:12px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--edge); }
.sessions b{ font-weight:500; font-size:15px; line-height:1.45; }
.sessions li > span{ font:400 clamp(15px,1.7vw,19px)/1.2 var(--mono); letter-spacing:-.03em; color:var(--grain);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.sw{ display:block; width:12px; height:12px; align-self:center; }
.sw.kr{ background:var(--sprout); } .sw.us{ background:var(--sun); }
.sw.lt{ opacity:.42; }
.sw.cr{ border:2px dotted var(--ink-3); }
.clock .note.cap{ margin:10px 0 0; font-size:12px; }
@media(max-width:480px){
  .sessions li{ grid-template-columns:14px minmax(0,1fr); }
  .sessions li > span{ grid-column:2; text-align:left; }
  .sessions li > span:empty{ display:none; }
}

/* 다른 점 — 내 컴퓨터 → 내 계좌 */
.keyflow{ display:grid; gap:0; align-items:stretch; margin:6px 0 30px; }
@media(min-width:760px){ .keyflow{ grid-template-columns:minmax(0,1.3fr) minmax(120px,.7fr) minmax(0,1fr); } }
.kf-box{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:16px 18px; border:1px solid var(--edge); background:var(--field); }
.kf-box .ico{ width:28px; height:28px; margin:0; }
.kf-box > b{ font:400 16px var(--mono); letter-spacing:-.02em; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips > span{ display:inline-flex; align-items:center; padding:4px 10px; border:1px solid var(--edge);
  font:400 12px/1.4 var(--mono); color:var(--ink-2); background:var(--soil); }
.chips > span:has(.ico-s){ color:var(--sun); border-color:color-mix(in srgb, var(--sun) 45%, transparent); }
.kf-arrow{ position:relative; display:flex; align-items:center; justify-content:center; min-height:54px; padding:0 14px; }
.kf-arrow::before{ content:''; position:absolute; left:50%; top:0; bottom:0; border-left:1px dashed var(--sun); }
.kf-arrow::after{ content:''; position:absolute; left:calc(50% - 4px); bottom:0; border:4px solid transparent; border-top:6px solid var(--sun); border-bottom:0; }
.kf-arrow span{ position:relative; z-index:1; padding:2px 8px; background:var(--soil); font:400 11px var(--mono); letter-spacing:.06em; color:var(--sun); }
@media(min-width:760px){
  .kf-arrow::before{ left:0; right:0; top:50%; bottom:auto; border-left:0; border-top:1px dashed var(--sun); }
  .kf-arrow::after{ left:auto; right:0; bottom:auto; top:calc(50% - 4px); border:4px solid transparent; border-left:6px solid var(--sun); border-right:0; }
}
.gcard .ico{ width:30px; height:30px; }
.gcard .fig b{ font-size:clamp(32px,3.6vw,42px); }
.gcard .fig.word b{ font-size:clamp(22px,2.2vw,26px); }

/* 왜 만들었나 — 다섯 개 대 2,639개, 관문 숫자 */
.rail .ico{ width:30px; height:30px; margin-bottom:14px; }
.versus{ display:grid; gap:10px 36px; align-items:center; margin:32px 0; }
.versus .pull{ margin:0; }
@media(min-width:880px){ .versus{ grid-template-columns:minmax(0,1fr) minmax(0,300px); } }
.vs{ display:block; width:100%; max-width:300px; height:auto; }
.vs .p{ fill:var(--grain); }
.vs .sep{ stroke:var(--edge); }
.vs .m{ stroke:var(--sun); stroke-width:3.6; stroke-linecap:round; }
.kpis.nums{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; margin:26px 0 24px; max-width:760px; }
.kpis.nums .kpi{ padding:18px 18px 16px; }
.kpis.nums b{ font-size:clamp(34px,5vw,52px) !important; line-height:1 !important; font-variant-numeric:tabular-nums; }
.kpis.nums .kpi > span{ margin-top:10px; }
.gatebar{ display:block; width:80px; height:8px; margin-top:10px; }
.gatebar rect{ fill:none; stroke:var(--ink-3); stroke-width:1; }
@media(max-width:480px){ .kpis.nums .kpi{ padding:14px 12px; } .kpis.nums .kpi > span{ font-size:10px; letter-spacing:.04em; } }

/* 자주 묻는 것 — 넓은 화면 구성(2026-10-08). 모든 페이지 같은 틀(.faqx > .faq-h + .faq-l, scripts/guides.py 도 같은 틀을 그린다).
   넓은 화면: 왼쪽 열에 제목·질문 수·문의 단추가 따라 내려오고, 오른쪽 넓은 열에 번호 붙은 질문. 좁은 화면: 위아래로.
   질문·답 태그(<details class="qa"><summary>…</summary><div class="a">)는 seo.py 가 FAQPage 로 읽으니 바꾸지 않는다 — 번호는 CSS 카운터. */
#faq .faqx{ display:grid; gap:28px; }
#faq .faq-h .eyebrow{ margin-bottom:14px; }
#faq .faq-h h2{ margin:0 0 18px; font-size:clamp(26px,3vw,38px); line-height:1.2; }
#faq .faq-n{ margin:0 0 22px; font:400 13px/1.5 var(--mono); color:var(--ink-3); }
#faq .faq-n b{ font:500 clamp(30px,3.4vw,42px)/1 var(--mono); color:var(--sun); margin-right:6px; vertical-align:-4px; font-variant-numeric:tabular-nums; }
#faq .faq-more{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--furrow); border-radius:999px;
  background:var(--field); color:var(--ink); font-size:14px; text-decoration:none; transition:border-color .2s ease, color .2s ease, background-color .2s ease; }
#faq .faq-more:hover{ border-color:var(--sun); color:var(--sun); background:var(--field-2); }
#faq .faq-more span{ transition:transform .2s ease; }
#faq .faq-more:hover span{ transform:translateX(3px); }
#faq .faq-l{ counter-reset:faq; }
#faq .faq-l .qa{ counter-increment:faq; border-top:1px solid var(--furrow-2); transition:background-color .2s ease; }
#faq .faq-l .qa:last-child{ border-bottom:1px solid var(--furrow-2); }
#faq .faq-l .qa summary{ padding:20px 44px 20px 46px; font-size:clamp(16px,1.35vw,18px); line-height:1.5; }
#faq .faq-l .qa summary::before{ content:counter(faq, decimal-leading-zero); position:absolute; left:4px; top:23px;
  font:500 13px/1.4 var(--mono); color:var(--sun); letter-spacing:.04em; }
#faq .faq-l .qa summary::after{ right:10px; top:19px; }
#faq .faq-l .qa .a{ padding:0 44px 24px 46px; max-width:none; }
#faq .faq-l .qa .a p{ font-size:15px; line-height:1.75; color:var(--ink-2); }
#faq .faq-l .qa[open]{ background:var(--field); }
#faq .faq-l .qa summary:hover{ background:var(--field); }
#faq .faq-l .qa[open] summary:hover{ background:none; }
@media(min-width:900px){
  #faq .faqx{ grid-template-columns:minmax(260px,1fr) minmax(0,2.4fr); gap:72px; align-items:start; }
  #faq .faq-h{ position:sticky; top:96px; }
  #faq .faq-l .qa summary{ padding:24px 56px 24px 64px; }
  #faq .faq-l .qa summary::before{ left:18px; top:28px; }
  #faq .faq-l .qa summary::after{ right:22px; top:23px; }
  #faq .faq-l .qa .a{ padding:0 56px 28px 64px; }
}
@media(max-width:480px){
  #faq .faq-l .qa summary{ padding:18px 36px 18px 38px; }
  #faq .faq-l .qa summary::before{ left:0; top:21px; }
  #faq .faq-l .qa summary::after{ right:4px; top:17px; }
  #faq .faq-l .qa .a{ padding:0 8px 20px 38px; }
}

/* 구독 요금제(2026-10-08) — 가격 페이지 두 칸(월간·연간, 연간 강조) + 공통 포함 목록 + 체험 신청의 요금제 고르기 */
.plans{ display:grid; gap:18px; margin-top:34px; }
@media(min-width:760px){ .plans{ grid-template-columns:1fr 1fr; gap:22px; } }
.plans .plan{ position:relative; padding:30px 30px 28px; display:flex; flex-direction:column; }
.plans .plan .eyebrow{ margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.plans .plan .price{ display:block; font-variant-numeric:tabular-nums; }
.plans .plan .plan-sub{ margin:12px 0 0; font-size:14px; color:var(--ink-2); }
.plans .plan ul.clean{ margin-top:18px; flex:1; }
.plans .plan .btns{ margin-top:22px; }
.plans .plan .btns .btn{ width:100%; justify-content:center; text-align:center; }
.plans .plan.best{ border-color:var(--sun); box-shadow:0 0 0 1px var(--sun) inset; }
.plans .save{ display:inline-block; padding:4px 9px; border-radius:999px; background:var(--sun); color:var(--soil-base);
  font:500 11px/1 var(--mono); letter-spacing:.04em; }
.plan-all{ margin-top:22px; padding:22px 26px; border:1px solid var(--furrow-2); border-radius:3px; }
.plan-all .eyebrow{ margin-bottom:6px; }
@media(min-width:760px){ .plan-all ul.clean{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; } .plan-all ul.clean li:nth-child(2){ border-top:0; } }
fieldset.pick{ border:0; padding:0; margin:6px 0 0; display:grid; gap:10px; }
@media(min-width:560px){ fieldset.pick{ grid-template-columns:1fr 1fr; } }
fieldset.pick label{ margin:0; display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--furrow-2); border-radius:3px;
  font:400 14px var(--sans); letter-spacing:0; color:var(--ink); cursor:pointer; background:var(--soil); }
fieldset.pick label:has(input:checked){ border-color:var(--sun); box-shadow:0 0 0 1px var(--sun) inset; }
fieldset.pick input{ width:auto; min-height:0; margin:0; accent-color:var(--sun); }
#price .plan-all + .prow{ margin-top:64px; padding-top:64px; border-top:1px solid var(--furrow-2); }
.plans .plan .price{ font-size:clamp(36px,8.6vw,60px); white-space:nowrap; }
.plans .plan .price small{ white-space:nowrap; }
@media(max-width:480px){ .plans .plan .price small{ display:inline !important; margin:0 0 0 8px !important; white-space:nowrap !important; } .plans .plan{ padding:24px 22px; } }

/* 환불·해지 정책 페이지(2026-10-09) — 넓은 화면은 두 열 카드, 좁은 화면은 한 열 */
.policy{ display:grid; gap:18px; }
@media(min-width:900px){ .policy{ grid-template-columns:1fr 1fr; gap:22px; } .policy > .note{ grid-column:1 / -1; } }
.policy .pol{ border:1px solid var(--furrow-2); background:var(--field); border-radius:3px; padding:24px 26px; }
#policy .policy .pol h2{ font-size:clamp(19px,1.9vw,23px) !important; line-height:1.35; margin:0 0 10px; display:flex; align-items:baseline; gap:12px; }
.policy .pol h2 .n{ font:500 13px var(--mono); color:var(--sun); letter-spacing:.04em; }
.policy .pol ul.clean li{ font-size:15px; line-height:1.7; }
.policy .pol .ex{ margin:14px 0 0; padding:14px 16px; border-radius:3px; background:var(--soil); border:1px dashed var(--furrow); font-size:14px; color:var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   소개 페이지 개편(2026-10-09, 로빈후드 벤치마크)
   굵은 산세리프 표제 · 둥근 카드와 알약 단추 · 제품 화면이 주인공 · 화면 테두리 없음.
   색과 판화는 그대로다. 아래 규칙은 모든 페이지에 걸린다(표제·단추·카드 모서리).
   ══════════════════════════════════════════════════════════════════════════ */
body::after{ display:none; }
h1, h2, h3{ font-family:var(--sans) !important; font-weight:760; letter-spacing:-.035em !important; }
h1{ font-size:clamp(38px,6.2vw,72px) !important; line-height:1.06 !important; }
h2{ font-size:clamp(28px,3.9vw,46px) !important; line-height:1.12 !important; }
h3{ font-weight:650; letter-spacing:-.02em !important; }
.eyebrow{ font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--sun); }
.eyebrow::before{ content:none; }
.lead{ font-size:clamp(17px,1.5vw,20px); line-height:1.7; }
.btn{ border-radius:999px !important; font-family:var(--sans) !important; font-weight:600; font-size:15px; min-height:50px; padding:0 24px; }
.card, .kpi, .gcard, .pick, .guide, .plan, .plan-all, .pol-box, .policy .pol, .stepcard, .vcard, .mode, .kf-box, .facts > div, .callout, .cmd{ border-radius:16px; }
.kpis{ gap:14px !important; background:transparent !important; border:0 !important; overflow:visible !important; }
.kpi{ border:1px solid var(--furrow-2); }
.facts{ gap:12px; background:transparent; border:0; overflow:visible; }
.facts > div{ border:1px solid var(--furrow-2); }
.badge{ border-radius:999px; font-family:var(--sans); font-weight:600; letter-spacing:.02em; font-size:12px; }
.topnav .menu{ border-radius:999px; }
.topnav a.dl{ border-radius:999px; }

/* ── 첫 화면: 왼쪽 글, 오른쪽 제품 화면(창틀 + 떠 있는 말풍선 둘) ── */
.hero-sec{ padding-top:56px !important; }
.hero2{ display:grid; gap:40px; align-items:center; }
@media(min-width:980px){ .hero2{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; } }
.hero2 .lead{ max-width:560px; }
.hero2 .btns{ margin-top:28px; }
.hero2 .trust{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:20px 0 0; font-size:13px; color:var(--ink-3); }
.hero2 .trust span{ display:inline-flex; align-items:center; gap:7px; }
.hero2 .trust .ico-s{ width:14px; height:14px; color:var(--sprout); flex:none; }
.hero-shot{ position:relative; }
.explore-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:28px; }
.explore-link{ position:relative; padding:24px 30px 24px 0; border-top:1px solid var(--furrow-2); color:inherit; text-decoration:none; }
.explore-link h3{ margin:0 0 8px; }
.explore-link p{ margin:0; color:var(--ink-3); }
.explore-link > span{ position:absolute; top:24px; right:0; color:var(--sun); }
.explore-link:hover h3{ color:var(--sun); }
.principle-step{ display:block; padding:52px 0; border-top:1px solid var(--furrow-2); scroll-margin-top:90px; }
.principle-step:last-child{ padding-bottom:0; }
.principle-number{ display:block; margin-bottom:12px; font:500 13px var(--mono); color:var(--ink-3); }
@media(max-width:600px){ .explore-links{ grid-template-columns:1fr; gap:0; } }
.shotwin{ position:relative; border-radius:18px; overflow:hidden; border:1px solid color-mix(in srgb, var(--grain-base) 18%, transparent);
  background:#0b0e0a; box-shadow:0 30px 70px -28px rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.25); }
.shotwin .bar{ height:32px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#15181b; border-bottom:1px solid rgba(255,255,255,.06); }
.shotwin .bar i{ width:10px; height:10px; border-radius:50%; background:#3a4046; }
.shotwin .bar i:first-child{ background:#5c5f63; }
.shotwin img{ display:block; width:100%; height:auto; }
.chips{ display:grid; gap:10px; margin-top:14px; }
.chip{ background:var(--soil); border:1px solid var(--furrow); border-radius:14px; padding:12px 14px 13px; box-shadow:0 14px 34px -18px rgba(0,0,0,.35); font-size:13px; line-height:1.5; color:var(--ink-2); }
.chip .k{ display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--sun); margin-bottom:6px; }
.chip .k .ico-s{ width:13px; height:13px; }
.chip b{ display:block; font-size:14px; line-height:1.4; color:var(--grain); font-weight:650; }
.chip .s{ display:block; margin-top:2px; }
@media(min-width:980px){
  .chips{ display:contents; }
  .chip{ position:absolute; max-width:240px; }
  .chip.c1{ top:9%; right:-18px; }
  .chip.c2{ bottom:9%; left:-22px; }
  html.anim .chip{ animation:chipin .8s cubic-bezier(.2,.7,.2,1) both; }
  html.anim .chip.c1{ animation-delay:.5s; } html.anim .chip.c2{ animation-delay:.8s; }
}
@media(min-width:1360px){ .chip.c1{ right:-40px; } .chip.c2{ left:-44px; } }
@keyframes chipin{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }

/* ── AI 기능: 글과 화면이 번갈아 가며 한 줄에 한 가지 ── */
#ai .feat{ display:grid; gap:26px; align-items:center; padding:52px 0; border-top:1px solid var(--furrow-2); }
#ai .feat:first-of-type{ border-top:0; padding-top:36px; }
@media(min-width:900px){
  #ai .feat{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; padding:64px 0; }
  #ai .feat.flip .ftxt{ order:2; }
}
#ai .ftxt .eyebrow{ margin-bottom:14px; }
#ai .ftxt h3{ font-size:clamp(24px,2.7vw,34px) !important; line-height:1.2; margin:0 0 14px; letter-spacing:-.03em !important; }
#ai .ftxt p{ font-size:17px; line-height:1.75; max-width:460px; }
#ai .ftxt .more{ display:inline-flex; align-items:center; gap:8px; font:600 14px var(--sans); color:var(--grain); text-decoration:none; border-bottom:1px solid var(--furrow); padding-bottom:2px; }
#ai .ftxt .more:hover{ color:var(--sun); border-bottom-color:var(--sun); }
#ai .shotwin{ box-shadow:0 24px 60px -30px rgba(0,0,0,.4); }

/* ── 지키는 장치: 네 칸 ── */
.safe-grid{ gap:14px; margin-top:8px; }
@media(min-width:760px){ .safe-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1120px){ .safe-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.safe-card{ padding:26px 24px 24px; border:1px solid var(--furrow-2); border-radius:16px; background:var(--field); transition:transform .25s ease, border-color .25s ease; }
.safe-card:hover{ transform:translateY(-2px); border-color:var(--furrow); }
.safe-card .ico{ width:34px; height:34px; margin:0 0 16px; color:var(--sun); }
.safe-card h3{ font-size:18px; line-height:1.35; margin:0 0 10px; }
.safe-card p{ font-size:15px; line-height:1.75; margin:0; }
#safe .keyflow{ margin:30px 0 26px; }

/* ── 여섯 절기: 탭으로 하나씩 ── */
.stabs{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:28px; }
@media(min-width:680px){ .stabs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:980px){ .stabs{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.stabs button{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px; border:1px solid var(--furrow-2); border-radius:14px;
  background:var(--field); color:var(--ink-2); cursor:pointer; text-align:left; font-family:var(--sans); transition:border-color .2s ease, background-color .2s ease, transform .2s ease; }
.stabs button:hover{ border-color:var(--furrow); transform:translateY(-1px); }
.stabs button img{ width:56px; height:56px; border-radius:10px; object-fit:cover; display:block; }
:root:not([data-theme="dark"]) .stabs button img{ filter:grayscale(1) invert(1) brightness(1.09) contrast(1.06); mix-blend-mode:multiply; }
.stabs button .no{ font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.stabs button .nm{ font-size:15px; font-weight:650; color:var(--grain); margin-top:-4px; line-height:1.3; }
.stabs button[aria-selected="true"]{ border-color:var(--sun); box-shadow:0 0 0 1px var(--sun) inset; background:var(--soil); }
.seasons .sp{ display:none; padding-top:34px; }
.seasons .sp.on{ display:block; }   /* 움직임을 주면 판화의 multiply 섞기가 고립돼 흰 상자가 생긴다 — 판은 그냥 보인다 */
.seasons .sp .season{ display:none; }
.seasons .sp .plate h2{ font-size:clamp(26px,3.2vw,38px) !important; }

/* ── 구독 요약 ── */
#plans .plans{ margin-top:30px; max-width:860px; }
#plans .plan{ padding:26px 26px 22px; }
#plans .plain{ margin-top:22px; }

/* ── 마무리 띠: 글 왼쪽, 여신 오른쪽. 판화는 어두운 바탕에 밝은 선이라 밝은 판의 어두운 띠에는 그대로 놓고, 어두운 판의 밝은 띠에서만 뒤집는다 ── */
.closing .wrap{ display:grid; gap:36px; align-items:center; }
@media(min-width:900px){ .closing .wrap{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; } }
.closing .lead{ max-width:560px; }
.closing picture{ display:block; line-height:0; }
.closing .goddess2{ width:100%; max-width:400px; height:auto; display:block; margin:0 auto; }
:root:not([data-theme="dark"]) .closing .goddess2{ mix-blend-mode:lighten; }   /* 판화의 검은 바탕을 띠 색에 녹인다 */
:root[data-theme="dark"] .closing .goddess2{ filter:grayscale(1) invert(1) brightness(1.09) contrast(1.06); mix-blend-mode:multiply; }
.closing .note{ color:color-mix(in srgb, var(--soil-base) 55%, var(--grain)); }
:root:not([data-theme="dark"]) .closing .note{ color:color-mix(in srgb, var(--soil-base) 62%, var(--grain-base)); }
@media(max-width:480px){ .hero-sec{ padding-top:36px !important; } .shotwin{ border-radius:12px; } .shotwin .bar{ height:24px; } .shotwin .bar i{ width:7px; height:7px; } }

/* 독립 페이지 머리(내려받기·가입·문의·환불)의 h1 은 페이지 CSS 가 font 축약형으로 글꼴을 되돌린다 — 여기서 다시 굵은 산세리프로 */
.crumbhead h1{ font-family:var(--sans) !important; font-weight:760; font-size:clamp(34px,4.8vw,54px) !important; line-height:1.1 !important; letter-spacing:-.035em !important; }
html[lang="en"] .hero2 h1{ font-size:clamp(34px,4.6vw,56px) !important; }

/* ── 첫 화면 살아 있는 관계망(2026-10-09, 저녁에 앱 '지표 관계망' 과 같은 모습으로) ──
   앱 화면 그대로: 어두운 캔버스(#0B0E11), 분류별 색 점, 양(+)은 청록·음(−)은 주황 선, 허브만 이름, 아래 범례. 두 판 모두 어둡다. */
.livenet{ position:relative; border-radius:18px; overflow:hidden; background:#0B0E11; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.55); color:#9AA3AE; }
.livenet .ln-head{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:12px 16px 8px; font-size:12px; border-bottom:1px solid rgba(255,255,255,.06); }
.livenet .ln-meta{ width:100%; order:9; }
.livenet .ln-head > b{ font-weight:600; color:#E6E8EB; font-size:13.5px; margin-right:auto; white-space:nowrap; }
.livenet .ln-live{ display:inline-flex; align-items:center; gap:6px; font:700 10px/1 var(--sans); letter-spacing:.14em; color:#34D399; }
.livenet .ln-live i{ width:7px; height:7px; border-radius:50%; background:#34D399; }
html.anim .livenet .ln-live i{ animation:lnpulse 1.8s ease-out infinite; }
@keyframes lnpulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5); } 70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.livenet .ln-meta{ font:400 11px var(--mono); color:#6B7380; min-height:33px; }
.livenet .ln-meta b{ font-weight:400; color:#C9D1DA; }
.livenet canvas{ display:block; width:100%; aspect-ratio:640 / 430; cursor:default; touch-action:pan-y; }
.livenet .ln-legend{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px 12px; height:68px; overflow-y:auto; padding:8px 14px 10px; font:400 11px/15px var(--mono); color:#8B94A0; border-top:1px solid rgba(255,255,255,.06); }
.livenet .ln-legend span{ display:inline-flex; align-items:center; gap:5px; }
.livenet .ln-legend i{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.livenet .ln-foot{ display:flex; flex-wrap:wrap; gap:6px 18px; padding:9px 16px 13px; border-top:1px solid rgba(255,255,255,.06); font-size:12px; color:#6B7380; }
.livenet .ln-foot b{ font:500 13px var(--mono); color:#E6E8EB; font-variant-numeric:tabular-nums; margin-right:4px; }
@media(max-width:480px){ .livenet canvas{ aspect-ratio:4 / 3.4; } .livenet .ln-legend{ height:100px; } }
.hero2 .def{ display:none; }
.kpi-sec .def{ margin:18px 0 0; max-width:760px; font-size:14px; line-height:1.7; color:var(--ink-3); }

/* ── 글만 있는 구역은 좌우를 다 쓴다(2026-10-09, 사용자: "오른쪽에 그림이 없으면 화면 전체를") ──
   .split: 왼쪽 제목·설명, 오른쪽 수치·목록·카드. 독립 페이지 머리(.crumbhead)도 같은 틀: 왼쪽 제목, 오른쪽 안내 문장. */
.split{ display:grid; gap:24px; }
@media(min-width:900px){ .split{ grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr); gap:64px; align-items:start; } }
.split .sl h2{ margin-top:0; }
.split .kpis.nums{ max-width:none !important; margin-top:0; }
.split ul.clean{ max-width:none; }
.split .plans{ max-width:none; margin-top:0; }
.split .plain{ max-width:none; }
.split .beat{ margin-top:28px; }
@media(min-width:900px){
  .crumbhead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"b n" "e n" "h d"; column-gap:64px; row-gap:0; align-items:end; }
  .crumbhead .badge{ grid-area:b; justify-self:start; }
  .crumbhead .eyebrow{ grid-area:e; }
  .crumbhead h1{ grid-area:h; margin-bottom:0 !important; }
  .crumbhead .crumb-note, .crumbhead .lead{ grid-area:n; align-self:end; margin:0 0 14px; max-width:none; }
  .crumbhead .def{ grid-area:d; align-self:start; margin:0 !important; max-width:none !important; }
}
.livenet .ln-meta{ white-space:normal; line-height:1.5; }
.hero2 > div, .livenet{ min-width:0; }
.kpi-sec .def{ max-width:none; }

/* ── 정의 구역(2026-10-09 저녁) — "데메테르란": 정의 문장을 큰 글로 좌우 전체에, 아래에 사실 셋. .def 는 검색·AI 답변 엔진이 읽는 문장이라 한 문장 그대로 둔다 ── */
.kpi-sec{ padding-bottom:28px !important; }
#define{ padding-top:0 !important; border-top:0 !important; }
.define{ border:1px solid var(--furrow-2); border-radius:18px; background:var(--field); padding:34px 36px 30px; }
.define .eyebrow{ margin-bottom:16px; }
.define .def{ font-size:clamp(19px,2vw,27px) !important; line-height:1.55 !important; color:var(--grain) !important; font-weight:500; letter-spacing:-.02em; margin:0 0 26px !important; max-width:none !important; word-break:keep-all; }
.dfacts{ gap:14px; }
.dfact{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 14px; padding:18px 18px 16px; border:1px solid var(--furrow-2); border-radius:14px; background:var(--soil); }
.dfact .ico{ grid-row:1 / span 2; width:30px; height:30px; margin:2px 0 0; color:var(--sun); }
.dfact b{ font-size:15px; font-weight:650; color:var(--grain); line-height:1.4; }
.dfact span{ font-size:14px; line-height:1.65; color:var(--ink-2); }
@media(max-width:600px){ .define{ padding:24px 20px 20px; border-radius:14px; } }

/* ── 기능 페이지: 들어 있는 지표·데이터 출처(2026-10-09 저녁) — 실시간 수치, 분류별 막대와 수집처 목록 ── */
ul.cats{ list-style:none; margin:0; padding:0; display:grid; gap:6px 22px; grid-template-columns:1fr; }
@media(min-width:640px){ ul.cats{ grid-template-columns:1fr 1fr; } }
@media(min-width:1120px){ ul.cats{ grid-template-columns:1fr 1fr 1fr; } }
ul.cats li{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; grid-template-rows:auto 4px; gap:2px 10px; align-items:center; padding:6px 0 8px; border-bottom:1px solid var(--furrow-2); font-size:14px; }
ul.cats li i{ width:10px; height:10px; border-radius:50%; grid-row:1; }
ul.cats li .nm{ color:var(--ink); grid-row:1; }
ul.cats li b{ font:500 14px var(--mono); color:var(--grain); font-variant-numeric:tabular-nums; grid-row:1; }
ul.cats li em{ grid-column:2 / span 2; grid-row:2; display:block; height:3px; border-radius:2px; background:color-mix(in srgb, var(--grain-base) 28%, transparent); min-width:4px; }
ul.srcs{ list-style:none; margin:0; padding:0; display:grid; gap:0 22px; grid-template-columns:1fr; }
@media(min-width:760px){ ul.srcs{ grid-template-columns:1fr 1fr; } }
ul.srcs li{ display:grid; grid-template-columns:8px auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--furrow-2); font-size:13.5px; }
ul.srcs li i{ width:8px; height:8px; border-radius:50%; background:var(--sprout); }
ul.srcs li i.lag{ background:var(--sun); }
ul.srcs li b{ font:500 12px var(--mono); color:var(--grain); letter-spacing:.02em; }
ul.srcs li span{ color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
ul.srcs li em{ font:500 13px var(--mono); color:var(--ink-3); font-style:normal; font-variant-numeric:tabular-nums; }
#data .note, #sources .note{ margin-top:14px; }

/* ── 엔진 페이지(2026-10-09 저녁) — 아홉 단계 띠 + 구역마다 왼쪽 "쉽게 말하면" · 오른쪽 "기술적으로는" ── */
ol.pipe{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:pipe; }
ol.pipe li{ position:relative; }
ol.pipe a{ display:flex; flex-direction:column; gap:4px; padding:14px 12px 12px; border:1px solid var(--furrow-2); border-radius:14px; background:var(--field); text-decoration:none; color:var(--ink-2); min-height:100%; transition:border-color .2s ease, transform .2s ease; }
ol.pipe a:hover{ border-color:var(--sun); transform:translateY(-2px); }
ol.pipe .n{ font:600 11px/1 var(--mono); letter-spacing:.1em; color:var(--sun); }
ol.pipe b{ font-size:14px; font-weight:650; color:var(--grain); line-height:1.3; }
ol.pipe .s{ font-size:12px; color:var(--ink-3); line-height:1.4; }
/* 2026-10-12 사용자 지시: 아홉 단계를 한 줄 9칸 대신 3행 3열 큰 카드로 — 넓은 화면에서 글자가 작아 안 보이던 것 */
@media(min-width:700px){ ol.pipe{ gap:14px; margin-top:34px; } ol.pipe a{ padding:22px 24px 20px; gap:8px; border-radius:16px; } ol.pipe .n{ font-size:12px; } ol.pipe b{ font-size:19px; } ol.pipe .s{ font-size:14px; } }
@media(min-width:700px){ ol.pipe li:not(:nth-child(3n))::after{ content:'›'; position:absolute; right:-12px; top:50%; transform:translateY(-55%); color:var(--ink-3); font-size:16px; z-index:1; } }
section.eng{ padding:72px 0; }
section.eng .tag, #limits .tag{ font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:18px 0 8px; }
section.eng .sl .lead{ font-size:17px; margin:0; }
.tech{ border:1px solid var(--furrow-2); border-radius:16px; background:var(--field); padding:18px 22px 6px; }
.tech .tag{ margin:0 0 6px; }
.tech .kv{ display:grid; grid-template-columns:minmax(120px,160px) minmax(0,1fr); gap:6px 18px; padding:12px 0; border-top:1px solid var(--furrow-2); }
.tech .kv:first-of-type{ border-top:0; }
.tech dt{ font:500 12.5px/1.6 var(--mono); color:var(--sun); letter-spacing:.01em; word-break:keep-all; }
.tech dd{ margin:0; font-size:14px; line-height:1.7; color:var(--ink-2); }
.tech dd b{ font:500 14px var(--mono); color:var(--grain); font-variant-numeric:tabular-nums; }
@media(max-width:560px){ .tech .kv{ grid-template-columns:1fr; gap:2px; } .tech{ padding:16px 16px 6px; } }
#limits ul.clean li.no{ font-size:15px; }
#cta{ text-align:left; }

/* 자주 묻는 질문 한 장(2026-10-12, scripts/faq.py) — 분류 탭 + 분류별 판. 스크립트가 없으면 판이 모두 펼쳐진 한 장으로 보인다.
   다른 페이지의 FAQ 칸은 그 분류로 가는 짧은 안내(.faq-go)로 바뀌었다. */
#faq .faq-r{ min-width:0; }
#faq .faq-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
#faq .faq-tabs a{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--furrow); border-radius:999px;
  font:500 14px/1.3 var(--sans, inherit); color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:border-color .2s ease, color .2s ease, background-color .2s ease; }
#faq .faq-tabs a span{ font:400 12px/1 var(--mono); color:var(--ink-3); font-variant-numeric:tabular-nums; }
#faq .faq-tabs a:hover{ border-color:var(--sun); color:var(--sun); }
#faq .faq-tabs a[aria-current="true"]{ border-color:var(--ink); background:var(--ink); color:var(--soil-base); }
#faq .faq-tabs a[aria-current="true"] span{ color:inherit; opacity:.7; }
#faq .faq-p{ scroll-margin-top:96px; }
#faq .faq-p + .faq-p{ margin-top:44px; }
#faq .faq-t{ margin:0 0 12px; font-size:clamp(18px,1.7vw,22px); line-height:1.3; }
#faq .faq-sub{ margin:0; padding:22px 4px 10px; font:500 12px/1.4 var(--mono); letter-spacing:.06em; color:var(--sun); border-top:1px solid var(--furrow-2); }
#faq .faq-l .faq-sub:first-child{ border-top:0; padding-top:4px; }
#faq .faq-r.tabs-on .faq-p{ display:none; margin-top:0; }
#faq .faq-r.tabs-on .faq-p.on{ display:block; }
#faq .faq-r.tabs-on .faq-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:640px){
  #faq .faq-tabs{ flex-wrap:nowrap; overflow-x:auto; margin-right:-20px; padding:0 20px 4px 0; scrollbar-width:none; }
  #faq .faq-tabs::-webkit-scrollbar{ display:none; }
}
.faq-go{ padding:clamp(44px,6vw,72px) 0; }
.faq-go-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; padding:clamp(22px,3vw,34px); border:1px solid var(--furrow-2); border-radius:16px; background:var(--field); }
.faq-go-in .eyebrow{ margin-bottom:10px; }
.faq-go-in h2{ margin:0 0 8px; font-size:clamp(20px,2.2vw,28px); line-height:1.25; }
.faq-go-in p:last-child{ margin:0; font-size:15px; line-height:1.7; color:var(--ink-2); }
.faq-go .faq-more{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--furrow); border-radius:999px; color:var(--ink); text-decoration:none; font-size:14px; white-space:nowrap; transition:border-color .2s ease, color .2s ease; }
.faq-go .faq-more:hover{ border-color:var(--sun); color:var(--sun); }
.faq-go .faq-more span{ transition:transform .2s ease; }
.faq-go .faq-more:hover span{ transform:translateX(3px); }

/* ── 2026-10-12 독립 페이지 머리 통일(엔진·가격·회원가입·FAQ·문의): '홈 ›' 길잡이 숨김, 두 열 대신 FAQ 처럼 제목 → 한 줄 안내 → 정의 문장 한 열. 길잡이는 구조화 데이터(BreadcrumbList)로만 남긴다 ── */
.pagehead.plainhead .crumb{ display:none; }
.pagehead.plainhead .crumbhead, .crumbhead.plainhead{ display:block; }
.plainhead .badge, .plainhead .eyebrow{ display:none; }
.pagehead.plainhead h1, .crumbhead.plainhead h1{ font-size:clamp(34px,4.8vw,54px) !important; line-height:1.1 !important; margin:0 0 22px !important; max-width:900px; }
.pagehead.plainhead .crumb-note, .pagehead.plainhead .lead, .crumbhead.plainhead .lead{ margin:0 0 10px; max-width:820px; font-size:18px; line-height:1.75; color:var(--ink); }
.pagehead.plainhead .def, .crumbhead.plainhead .def{ margin:0 !important; max-width:820px !important; font-size:15px !important; line-height:1.7 !important; color:var(--ink-2) !important; }

/* Brand: evergreen headings, harvest accents, quiet reading surfaces. */
:root{ --cta-bg:#153D32; --cta-ink:#F5F2E9; }
:root[data-theme="dark"]{ --cta-bg:#C6A35C; --cta-ink:#0D1A16; }
.btn{ background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg); }
.btn:hover{ background:color-mix(in srgb, var(--cta-bg) 88%, var(--ink)); border-color:var(--cta-bg); }
.btn.ghost{ background:transparent; color:var(--brand); border-color:var(--brand) !important; }
.btn.ghost:hover{ background:var(--field-2); }
.btn:focus-visible, a:focus-visible, button:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.eyebrow{ letter-spacing:.04em; text-transform:none; }
.fill, .eyebrow{ color:var(--sun); }
.topnav{ background:color-mix(in srgb, var(--soil-base) 94%, transparent); border-bottom-color:var(--furrow-2); }
.topnav a.on{ color:var(--brand); border-bottom-color:var(--brand); }
.topnav a.dl{ background:var(--cta-bg); color:var(--cta-ink); }
.badge, .off{ background:var(--gold); color:#153D32; border-color:var(--gold); border-radius:999px !important; }
.card, .kpi, .gcard, .plan, .plan-all, .facts > div, .tech, .callout, .stepcard{ background:var(--card); border-color:var(--furrow-2); }
.kpi, .facts > div{ padding:24px; }
.plan.best{ border-color:var(--brand); box-shadow:inset 0 3px 0 var(--brand); }
.plans .save{ background:var(--gold); color:#153D32; }
#faq .faq-tabs a[aria-current="true"], .stabs button[aria-selected="true"]{ border-color:var(--brand); color:var(--brand); background:var(--field-2); }
footer{ background:var(--field); border-top-color:var(--furrow-2); }
:root:not([data-theme="dark"]) .invert{ background:#153D32; }
:root:not([data-theme="dark"]) .invert h1,
:root:not([data-theme="dark"]) .invert h2,
:root:not([data-theme="dark"]) .invert h3,
:root:not([data-theme="dark"]) .invert b,
:root:not([data-theme="dark"]) .invert strong,
:root:not([data-theme="dark"]) .invert a{ color:#F5F2E9; }
:root:not([data-theme="dark"]) .invert p,
:root:not([data-theme="dark"]) .invert li{ color:#DEE5DD; }
:root:not([data-theme="dark"]) .invert .eyebrow,
:root:not([data-theme="dark"]) .invert .fill{ color:#C6A35C; }
:root:not([data-theme="dark"]) .invert .btn{ background:#F5F2E9; color:#153D32; border-color:#F5F2E9; }
:root:not([data-theme="dark"]) .invert .btn.ghost{ background:transparent; color:#F5F2E9; border-color:#F5F2E9 !important; }
.hero2 .trust{ gap:12px 18px; line-height:1.6; }
.hero2 .btns{ gap:12px; }
@media(max-width:560px){ .hero2 .btns{ display:grid; grid-template-columns:1fr; } .hero2 .btns .btn{ justify-content:center; } }
.livenet{ background:#0D1A16; border-color:#2D4438; }

.card, .kpi, .gcard, .plan, .plan-all, .facts > div, .tech, .callout, .stepcard{ border-radius:16px !important; }

.livenet{ box-shadow:0 18px 48px -32px rgba(21,61,50,.4); }

/* Every detail page opens with a short heading and one readable introduction. */
.pagehead[data-page-intro]{ padding-top:64px; padding-bottom:12px; }
.pagehead[data-page-intro] h1{ max-width:24ch; text-wrap:balance; }
.pagehead[data-page-intro] .crumb-note.def{ max-width:62ch !important; font-size:clamp(17px,1.6vw,19px) !important; line-height:1.7 !important; color:var(--ink-2) !important; }
@media(max-width:560px){ .pagehead[data-page-intro]{ padding-top:36px; } }

/* 계정 진입과 통합 도움말 */
#limits[hidden],.account-access [hidden]{display:none!important}
.account-access .auth-shell{max-width:860px}
.account-access .auth-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;border:1px solid var(--furrow);border-radius:18px;background:var(--field-2);margin-bottom:24px}
.account-access [role="tab"]{font:inherit;font-weight:650;color:var(--ink-2);padding:14px 8px;border:0;border-radius:12px;background:transparent;cursor:pointer}
.account-access [role="tab"][aria-selected="true"]{background:var(--brand);color:#F5F2E9;box-shadow:inset 0 -3px var(--gold)}
.account-access [role="tab"]:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.account-access .auth-panel h2{font-size:clamp(23px,3vw,30px)!important;margin:0 0 12px}
.account-access .auth-panel>p{line-height:1.7;color:var(--ink-2)}
.account-access .formgrid{grid-template-columns:1fr}
.account-access .auth-panel .btns{margin-top:20px}
.account-access #fResetConfirm>label{display:block;margin-top:16px}
#contact h2{font-size:clamp(26px,4vw,38px)}
@media(max-width:560px){.account-access [role="tab"]{font-size:14px;padding:13px 4px}.account-access .formfoot{align-items:stretch}.account-access .formfoot .btn{width:100%}}