/* ============================================================================
   언더독 스택 — "Plumbline"
   잉크-온-쿨화이트 제품 표면. YC 스튜디오가 실제 출시할 법한 개발도구 톤.
   1px plumb-line(콘텐츠 좌측 엣지)이 페이지 전체를 관통하고, 모든 좌측 엣지가
   여기에 스냅된다(엔지니어드, 스타일드 아님). 깊이는 헤어라인 보더 + 단일 부드러운
   스택 섀도 하나에서. 단일 코발트 액센트(#2F6BFF)는 오직 인터랙티브에만.
   12/13 도구가 '무료'라 반복 무료 배지는 노이즈 → free_tier의 진짜 변별을
   하나의 mono provenance 라벨(2px 코발트 좌측 틱)로 표면화 — 이 시스템의 시그니처.
   웜/누리끼리 톤 전면 금지. 모든 중성색 Blue >= Red. serif 디스플레이 없음.
   모바일 우선, 점진적 향상(JS 없어도 완전 동작), prefers-reduced-motion 존중.
   ========================================================================== */

:root{
  /* ---- color (cool/neutral only — every gray Blue-channel >= Red-channel) -- */
  --bg:#FFFFFF;            /* page canvas + row/card surfaces (cool white) */
  --canvas:#FAFBFC;        /* subtle cool page variant, never warm off-white */
  --band:#F4F6F8;          /* alternating band, stepper rail bg, mono spec block */
  --ink:#16181D;           /* primary text/headlines (faintly cool, not pure black) */
  --slate:#5B616E;         /* body prose, one_liner, sub-headlines (6.2:1) */
  --mute:#6B7280;          /* informational mono meta — provenance/last_checked (4.83:1) */
  --faint:#8A909C;         /* DECORATIVE/DISABLED only (3.21:1) — never essential text */
  --line:#E6E8EB;          /* all 1px borders, dividers, the persistent plumb-line */
  --line-strong:#D7DBE0;   /* emphasized divider / hover border on neutral chips */
  --accent:#2F6BFF;        /* ONLY: links, primary CTA, focus ring, free tick, active node */
  --accent-press:#1F58F0;  /* CTA hover/active (darker, keeps AA) */
  --accent-tint:rgba(47,107,255,.10); /* hover row wash / hover border tint */

  /* ---- space (4-based scale) ---------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- radius (fixed 3-value set) ----------------------------------------- */
  --r-chip:6px;            /* chips, inputs, mono tags */
  --r-card:10px;           /* rows/cards/panels (and 8px buttons) */
  --r-pill:9999px;         /* reserved ONLY for the single hero CTA */

  /* ---- elevation (depth from hairlines first; at most ONE soft stacked) ---- */
  --shadow-0:none;
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);

  /* ---- layout ------------------------------------------------------------- */
  --maxw:1180px; --maxw-detail:760px;
  --gutter:clamp(20px,5vw,48px);
  --grid-left:24px;        /* single source of the plumb-line */

  /* ---- type scale (restrained ~1.25 ratio) -------------------------------- */
  --t-hero:clamp(34px,5vw,52px);
  --t-section:clamp(26px,3.4vw,32px);
  --t-h3:24px;
  --t-lead:18px;           /* row name lead / detail h1 small */
  --t-lede:clamp(17px,2.2vw,20px);
  --t-body:16px;
  --t-body-sm:15px;
  --t-meta:13px;
  --t-kicker:12px;

  /* ---- font stacks -------------------------------------------------------- */
  --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Do Hyeon","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --brand:"Jua","Do Hyeon","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---- reset ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(56px + var(--s8) + var(--s1)); /* 헤더(56) + 스티키 stage-rail 높이 보정 */
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  font-feature-settings:"cv01","ss03","calt","liga";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%}

/* 한글 헤딩: 자간 음수(디스플레이) + 어절 단위 줄바꿈 + 균형 줄바꿈 */
h1,h2,h3{
  font-family:var(--sans);
  font-weight:700;
  margin:0;
  word-break:keep-all;
  text-wrap:balance;
}
/* 큰 헤더는 배민 도현체로 캐릭터 부여(작은 헤딩·본문은 Noto Sans KR) */
.hero h1,.section-title{ font-family:var(--display); font-weight:400; letter-spacing:0 }

main{display:block}

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ---- skip link (FIRST focusable; cobalt ring) ----------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:0 0 var(--r-chip) 0;
  font-weight:500; font-size:var(--t-body-sm);
  text-decoration:none;
}
.skip-link:focus{
  left:0; outline:none;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---- shared focus ring (Linear-grade keyboard floor) ---------------------- */
.focusable:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-chip);
}

/* container helper: content snaps to the plumb-line */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
}

/* ===========================================================================
   SITE HEADER (sticky, 56px, hairline; gains shadow once scrolled)
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:box-shadow .12s ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-card) }
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  min-height:56px;
  padding:var(--s2) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
}
.brand{
  display:inline-flex; align-items:baseline; gap:9px;
  font-family:var(--brand); font-weight:400; font-size:20px; letter-spacing:0;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.brand span{
  font-family:var(--sans); font-weight:400; font-size:var(--t-meta);
  letter-spacing:0; color:var(--mute);
}
.header-cta{
  font-weight:500; font-size:var(--t-body-sm);
  color:var(--accent); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent; transition:border-color .12s;
}
.header-cta:hover{ border-color:var(--accent) }

/* ===========================================================================
   PLUMB-LINE — 1px persistent left edge running the content column
   ========================================================================= */
.plumb{ position:relative }
/* 좌측 plumb-line 제거 — 콘텐츠에 딱 붙어 거슬린다는 피드백 반영.
   구조는 섹션 헤어라인/정렬로 충분히 유지된다. */

/* ===========================================================================
   HERO — LEFT-aligned claim against the plumb-line + evidence stack panel
   ========================================================================= */
.hero{
  padding-block:clamp(48px,8vw,88px) var(--s9);
  display:grid; gap:var(--s8);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
@media (max-width:880px){
  .hero{ grid-template-columns:1fr; gap:var(--s7); padding-bottom:var(--s8) }
}
.hero-kicker{
  font-family:var(--mono); font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
  margin:0 0 var(--s4);
}
.hero h1{
  font-size:var(--t-hero); font-weight:600; line-height:1.06;
  letter-spacing:-.022em; max-width:18ch; margin:0 0 var(--s5);
}
.hero-lede{
  font-size:var(--t-lede); font-weight:400; line-height:1.55;
  color:var(--slate); max-width:60ch; margin:0 0 var(--s6);
}
.hero-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  margin:0 0 var(--s5);
}
.hero-promise{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.02em; color:var(--mute); margin:0;
}
.hero-promise .sep{ color:var(--faint); margin:0 6px }

/* primary CTA — the ONE pill */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 20px;
  background:var(--accent); color:#fff;
  font-family:var(--sans); font-weight:500; font-size:var(--t-body-sm);
  text-decoration:none; border:0; border-radius:var(--r-pill);
  transition:background .14s ease;
}
.btn-primary:hover{ background:var(--accent-press) }
.btn-primary .arw{ font-size:.9em }

/* ghost text link */
.link-ghost{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:500; font-size:var(--t-body-sm);
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .12s;
}
.link-ghost:hover{ border-color:var(--accent) }

/* EVIDENCE: the 6-step stack rendered as a real bordered panel (the artifact) */
.hero-evidence{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg); box-shadow:var(--shadow-card);
  padding:var(--s5);
}
.hero-evidence-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); padding-bottom:var(--s4); margin-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.hero-evidence-head .lbl{
  font-family:var(--mono); font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
}
.hero-evidence-head .cnt{
  font-family:var(--mono); font-size:var(--t-kicker); color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.hero-evidence ol{ list-style:none; margin:0; padding:0 }
.evi-step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:baseline; padding:10px 0;
  border-top:1px solid var(--line); text-decoration:none; color:inherit;
}
.evi-step:first-child{ border-top:0 }
.evi-step .n{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.evi-step .nm{ font-weight:600; font-size:var(--t-body-sm); letter-spacing:-.01em }
.evi-step .st{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  margin-left:6px; font-weight:400;
}
.evi-step:hover .nm{ color:var(--accent) }

/* ===========================================================================
   STAGE RAIL — sticky horizontal sub-nav, scroll-spy, graceful anchors
   ========================================================================= */
.stage-rail{
  position:sticky; top:56px; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.stage-rail-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--s3) var(--gutter);
}
.stage-rail ol{
  list-style:none; margin:0; padding:0;
  display:flex; gap:var(--s2); overflow-x:auto;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.stage-rail li{ flex:0 0 auto }
.stage-rail a{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg); text-decoration:none; color:var(--mute);
  font-size:var(--t-body-sm); font-weight:500; white-space:nowrap;
  transition:border-color .12s, color .12s;
}
.stage-rail a .rn{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--mute); font-variant-numeric:tabular-nums;
}
.stage-rail a:hover{ border-color:var(--line-strong); color:var(--ink) }
.stage-rail a.is-current{
  color:var(--ink); border-color:var(--line-strong);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.stage-rail a.is-current .rn{ color:var(--accent) }

/* ===========================================================================
   SECTION SCAFFOLD (role-scoped titles — no blanket "section h2")
   ========================================================================= */
.section{ padding-block:var(--s9) }
.section + .section{ border-top:1px solid var(--line); padding-top:var(--s9) }
.section-head{ margin:0 0 var(--s7); max-width:var(--maxw-detail) }
.section-kicker{
  font-family:var(--mono); font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
  margin:0 0 var(--s3);
}
.section-title{
  font-size:var(--t-section); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; margin:0;
}
.section-lede{ color:var(--slate); margin:var(--s3) 0 0; max-width:62ch }

/* ===========================================================================
   PAINS — hairline grid, flat (depth via border)
   ========================================================================= */
.pains{
  list-style:none; padding:0; margin:0; display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.pain{ display:flex; flex-direction:column; padding-top:var(--s4);
  border-top:1px solid var(--line) }
.pain-label{
  font-family:var(--mono); font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mute);
  margin:0 0 var(--s3);
}
.pain h3{
  font-size:var(--t-lead); font-weight:600; line-height:1.3;
  letter-spacing:-.01em; margin:0 0 var(--s2);
}
.pain p{ margin:0 0 var(--s4); color:var(--slate); font-size:var(--t-body-sm);
  line-height:1.55 }
.pain-jump{
  margin-top:auto; align-self:flex-start;
  font-weight:500; font-size:var(--t-body-sm);
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .12s;
}
.pain-jump:hover{ border-color:var(--accent) }
.pain-jump .arw{ margin-left:2px }

/* ===========================================================================
   STACK STEPPER — the ONE justified numbering (real chronology 01–06)
   ========================================================================= */
.stepper{ list-style:none; margin:0; padding:0; max-width:var(--maxw-detail) }
.step{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:var(--s5);
  padding:var(--s5) 0;
}
.step + .step{ border-top:1px solid var(--line) }
.step-rail{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  min-width:40px;
}
.step-n{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.04em; color:var(--mute); font-variant-numeric:tabular-nums;
  padding:2px 0;
}
.step-node{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:var(--bg);
  margin-top:6px; transition:background .2s ease, border-color .2s ease;
}
.step.is-active .step-node{ background:var(--accent); border-color:var(--accent) }
/* cobalt connector hairline down the spine (between nodes) */
.step:not(:last-child) .step-rail::after{
  content:""; position:absolute; top:34px; bottom:calc(-1 * var(--s5));
  left:50%; transform:translateX(-50%);
  width:1px; background:var(--line);
}
.step-body{ display:flex; flex-direction:column; gap:6px; padding-top:1px }
.step-stage{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mute);
}
.step-name{
  font-size:var(--t-lead); font-weight:600; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; width:max-content; max-width:100%;
  border-bottom:1px solid transparent; transition:color .12s, border-color .12s;
}
.step-name:hover{ color:var(--accent); border-color:var(--accent) }
.step-context{ color:var(--slate); font-size:var(--t-body-sm); line-height:1.55 }

/* ===========================================================================
   GROUPS + TOOL SPEC ROWS (data-as-aesthetic; rows, not gallery cards)
   ========================================================================= */
.group{ padding-top:var(--s8) }
.group:first-of-type{ padding-top:0 }
/* Anchor clearance: sticky header (56px) + sticky stage-rail (~48px) stack on the
   index page, so jumps to a group must clear both. Per-section scroll-margin keeps
   detail pages (no stage-rail) on the global scroll-padding-top. */
.group[id]{ scroll-margin-top:calc(56px + var(--s7)) }
.group-head{
  display:flex; align-items:baseline; gap:var(--s3);
  padding-bottom:var(--s3); margin-bottom:0;
  border-bottom:1px solid var(--line-strong);
}
.group-num{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.group-title{
  font-size:var(--t-h3); font-weight:600; letter-spacing:-.012em; margin:0;
}

/* spec row */
.rows{ display:block }
.row{
  position:relative;
  display:grid; align-items:start;
  grid-template-columns:minmax(220px,1fr) 2fr minmax(190px,auto);
  gap:var(--s5);
  padding:var(--s5) var(--s4);
  border-top:1px solid var(--line);
  border-radius:var(--r-card);
  text-decoration:none; color:inherit;
  transition:background .15s cubic-bezier(.16,1,.3,1),
             border-color .15s cubic-bezier(.16,1,.3,1),
             transform .15s cubic-bezier(.16,1,.3,1);
}
.row:first-child{ border-top:1px solid var(--line) }
.row:hover{
  background:var(--accent-tint);
  border-color:var(--accent-tint);
  transform:translateY(-1px);
}
.row:hover .row-idx{ color:var(--accent) }

/* col 1 — index + name + category chip */
.row-lead{ display:flex; flex-direction:row; align-items:flex-start; gap:var(--s3); min-width:0 }
.row-id{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.row-logo{ flex:0 0 auto; align-self:flex-start; margin-top:1px }
.logo{ width:40px; height:40px; border-radius:9px; border:1px solid var(--line);
  background:#fff; object-fit:contain; padding:5px; display:block }
.logo-fallback{ display:grid; place-items:center; padding:0;
  font-family:var(--brand); font-size:18px; line-height:1; color:var(--accent);
  background:var(--accent-tint); border-color:transparent }
.row-idx{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.06em; color:var(--mute); font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}
.row-name{
  font-size:var(--t-lead); font-weight:600; line-height:1.3;
  letter-spacing:-.01em; color:var(--ink);
}
.row-cat{
  align-self:flex-start;
  font-family:var(--mono); font-size:11px; font-weight:400;
  color:var(--mute); letter-spacing:.02em;
  border:1px solid var(--line); border-radius:var(--r-chip);
  padding:2px 8px;
}

/* col 2 — one_liner */
.row-desc{ color:var(--slate); font-size:var(--t-body-sm); line-height:1.55;
  min-width:0 }

/* col 3 — value rail: provenance + pricing + last_checked */
.row-value{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  text-align:right;
}
.prov{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  color:var(--ink); letter-spacing:.01em;
  border-left:2px solid var(--accent); padding-left:8px;
  white-space:nowrap;
}
.prov.is-trial{ color:var(--mute); border-left-color:transparent; padding-left:10px }
.row-price{
  font-family:var(--mono); font-size:var(--t-meta); color:var(--mute);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.row-checked{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* stretched link → whole row is one tab stop */
.row::after{ content:""; position:absolute; inset:0; border-radius:inherit }
.row:focus-visible{ outline:2px solid var(--accent); outline-offset:-1px;
  border-radius:var(--r-card) }

@media (max-width:720px){
  .row{ grid-template-columns:1fr; gap:var(--s3); padding:var(--s5) var(--s3) }
  .row-value{ align-items:flex-start; text-align:left;
    flex-flow:row wrap; gap:var(--s2) var(--s4) }
  .prov{ order:-1 }
}

/* ===========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ border-top:1px solid var(--line); margin-top:var(--s9) }
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--s7) var(--gutter) var(--s8);
}
.disclosure{
  background:var(--band); color:var(--slate);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 16px; margin:0 0 var(--s4); font-size:var(--t-body-sm);
  line-height:1.55; max-width:var(--maxw-detail);
}
.footer-meta{
  font-family:var(--mono); font-size:var(--t-meta); color:var(--mute);
  letter-spacing:.02em; margin:0; font-variant-numeric:tabular-nums;
}

/* ===========================================================================
   DETAIL PAGE — single 760px column, left-aligned to plumb-line
   ========================================================================= */
.tool{ max-width:var(--maxw-detail); margin:0 auto; padding-inline:var(--gutter) }

.crumbs{ padding-top:var(--s6); margin:0 0 var(--s6) }
.crumbs-top{ margin:0; font-family:var(--mono); font-size:var(--t-meta);
  color:var(--mute) }
.crumbs-top a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .12s;
}
.crumbs-top a:hover{ border-color:var(--accent) }
.crumbs-nav{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); margin-top:var(--s4) }
.crumbs-nav a{
  display:inline-flex; align-items:baseline; gap:7px;
  font-size:var(--t-body-sm); color:var(--slate); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px;
  transition:border-color .12s, color .12s;
}
.crumbs-nav a:hover{ border-color:var(--line-strong); color:var(--ink) }
.crumbs-nav a .lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mute);
}

/* tool head */
.tool-head{ padding:var(--s5) 0 var(--s6); border-bottom:1px solid var(--line);
  margin-bottom:var(--s7) }
.tool-id{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4) }
.tool-id .logo{ width:56px; height:56px; border-radius:12px; padding:7px }
.tool-id .logo-fallback{ font-size:24px }
.tool-id-text{ min-width:0 }
.tool-id-text .tool-idx{ margin:0 0 var(--s1) }
.tool-id-text h1{ margin:0 }
.tool-preview{ margin:var(--s6) 0 0; border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; background:var(--band) }
.tool-preview img{ display:block; width:100%; height:auto }
.tool-preview figcaption{ font-family:var(--mono); font-size:11px; color:var(--mute);
  padding:8px var(--s4); border-top:1px solid var(--line); letter-spacing:.02em }
.tool-idx{
  display:block; font-family:var(--mono); font-size:var(--t-meta);
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute); margin:0 0 var(--s4);
}
.tool-head h1{
  font-size:clamp(28px,4.6vw,40px); font-weight:600; line-height:1.1;
  letter-spacing:-.02em; margin:0 0 var(--s4);
}
.tool-oneliner{ font-size:var(--t-lede); color:var(--slate); line-height:1.5;
  margin:0 0 var(--s5) }
.tool-meta{
  display:flex; align-items:center; gap:var(--s4) var(--s5); flex-wrap:wrap;
  margin-bottom:var(--s6);
}
.tool-meta .region-meta,
.tool-meta .price{
  font-family:var(--mono); font-size:var(--t-meta); color:var(--mute);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.visit{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 20px;
  background:var(--accent); color:#fff; text-decoration:none;
  font-family:var(--sans); font-weight:500; font-size:var(--t-body-sm);
  border-radius:var(--r-card); transition:background .14s ease;
}
.visit:hover{ background:var(--accent-press) }
.visit .arw{ font-size:.95em }

/* content blocks */
.tool-block{ padding-top:var(--s6) }
.tool-block:first-of-type{ padding-top:0 }
.block-title{ font-size:var(--t-lead); font-weight:600; letter-spacing:-.01em;
  margin:0 0 var(--s3) }
.tool-block p{ margin:0; color:var(--ink); line-height:1.6 }
.tool-block .muted{ color:var(--slate); margin-bottom:var(--s2) }

/* why_underrated — cobalt-tick callout on band (NOT serif pull-quote) */
.gem{
  border-left:2px solid var(--accent);
  background:var(--band);
  border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--s4) var(--s5);
}
.gem p{ font-size:var(--t-lede); line-height:1.5; color:var(--ink); margin:0 }

/* key_points — hairline-divided list, cobalt em-dash markers (no checks) */
.key-points{ list-style:none; margin:0; padding:0 }
.key-points li{
  position:relative; padding:var(--s3) 0 var(--s3) var(--s5);
  border-top:1px solid var(--line); color:var(--ink); line-height:1.55;
}
.key-points li:first-child{ border-top:0 }
.key-points li::before{
  content:"—"; position:absolute; left:0; top:var(--s3);
  color:var(--accent); font-weight:500;
}

/* plans — mono spec block on band (definition-list, tabular) */
.plans dl{
  display:grid; grid-template-columns:max-content 1fr; gap:var(--s3) var(--s5);
  margin:0; background:var(--band); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s5);
}
.plans dt{
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mute);
  padding-top:2px;
}
.plans dd{ margin:0; color:var(--ink); font-size:var(--t-body-sm); line-height:1.5 }

/* pairs_with — cobalt-bordered linked mono chips */
.pairs{
  display:grid; gap:var(--s3); margin-top:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.pair{
  display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 16px; text-decoration:none; color:inherit;
  transition:border-color .14s ease, background .14s ease;
}
.pair:hover{ border-color:var(--accent); background:var(--accent-tint) }
.pair .rel{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent);
}
.pair strong{ font-weight:600; font-size:var(--t-body-sm); letter-spacing:-.01em;
  color:var(--ink) }
.pair .desc{ font-size:var(--t-meta); color:var(--slate); line-height:1.45 }

/* sources — mono footnotes */
.sources{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) }
.sources li{ display:flex; gap:var(--s3); align-items:baseline;
  font-size:var(--t-body-sm) }
.sources .fn{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  flex:0 0 auto; letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.sources a{
  font-family:var(--mono); font-size:var(--t-meta);
  color:var(--slate); text-decoration:none; word-break:break-all;
  border-bottom:1px solid var(--line);
}
.sources a:hover{ color:var(--accent); border-color:var(--accent) }

.checked{
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.02em;
  color:var(--mute); margin:var(--s7) 0 0; font-variant-numeric:tabular-nums;
}
.aff-note{
  font-size:var(--t-body-sm); color:var(--slate); line-height:1.55;
  background:var(--band); border:1px solid var(--line);
  border-radius:var(--r-card); padding:12px 16px; margin:var(--s4) 0 0;
}

/* ===========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:560px){
  :root{ --t-body:16px }
  .header-inner{ gap:var(--s3) }
  .brand span{ display:none }
  .plans dl{ grid-template-columns:1fr; gap:var(--s1) var(--s5) }
  .plans dt{ margin-top:var(--s3) }
  .plans dt:first-child{ margin-top:0 }
}

/* ===========================================================================
   REDUCED MOTION — disable transforms/reveals; keep color/border, no translate
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .row:hover{ transform:none }
  .reveal{ opacity:1 !important; transform:none !important }
}

/* ===========================================================================
   SCROLL REVEAL (opt-in via .reveal, JS toggles .is-in; default visible)
   ========================================================================= */
/* Hide ONLY once app.js confirms it is running (sets .reveal-ready on <html>).
   If app.js is blocked/fails, .reveal-ready is never set → content stays visible.
   This preserves the "app.js 없어도 완전 동작" progressive-enhancement contract. */
.reveal-ready .reveal{ opacity:0; transform:translateY(8px);
  transition:opacity .24s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1) }
.reveal-ready .reveal.is-in{ opacity:1; transform:none }