/* v3 n4 — design pass. Loads after v3-color.css; g.css untouched.
   Builds on the n2 tokens (--s-1/2/3 = 96/160/224, --t-*) and the n3 colour tokens; no raw colours here.
   Type scale, one list:  13 mono tag · 14 small · 17 body · 17→21 lead · 21→28 h3 · 32→52 h2 · 40→64 title · 40→86 display.
   (13 is only the DM Mono "Fig. 01" tag: mono at 14 reads a size larger than Hangul at 14.) */
:root{
  --t-meta:13px;
  --t-title:clamp(2.5rem,4.4vw,4rem);        /* 40 → 64: titles of tool / notice pages */
  --gap-1:8px;--gap-2:16px;--gap-3:24px;--gap-4:32px;--gap-6:48px;--gap-8:64px;  /* inside a section */
}
@media (max-width:860px){:root{--gap-6:32px;--gap-8:48px}}

/* ---------- type: one small size, real weights only ---------- */
.label,.index li,.pg small,.pg dt,.form label,.foot nav b,.sec-index .label,
.price-table caption,.price-table thead th,.note,.help,.actions small,.plate figcaption,
.biz,.steps .you,.verbs .you,.policy .muted{font-size:var(--t-small);letter-spacing:.02em}
.label,.index li,.pg small,.pg dt,.form label,.foot nav b,.price-table caption,.price-table thead th{letter-spacing:.04em}
.note,.help,.actions small,.plate figcaption,.steps .you,.verbs .you,.policy .muted{line-height:1.6;letter-spacing:0}
.plate figcaption .label,.team-plate figcaption .label{font-family:var(--f-label);font-size:var(--t-meta);letter-spacing:.06em}
.biz a b{font-weight:600}                      /* 400 / 600 only: MaruBuri has nothing else */
p,li,dd,td,th{font-variant-numeric:lining-nums}
.num{font-variant-numeric:oldstyle-nums}

/* titles: MaruBuri, tracked by size, never a widow */
h1,h2,h3,.kinds b,.ix b,.verbs b,.reach b,.pg h3,.faq summary,.rewards b,.crew h3{font-family:var(--f-display)}
.hero h1,.inner .hero h1{line-height:1.14;letter-spacing:-.03em}
.sec h2,.ask h2,.policy h1,.inner .head h2{line-height:1.24;letter-spacing:-.025em}
h3,.kinds b,.ix b,.verbs b,.reach b,.pg h3,.crew h3{letter-spacing:-.015em;line-height:1.35}
.faq summary{letter-spacing:-.01em;line-height:1.45}
.sec h2,.ask h2{max-width:18em}
p{text-wrap:pretty}

/* ---------- openings: one treatment per page job ---------- */
/* home: the statement, full display size (from n2). about: an essay — the regular cut of MaruBuri,
   so the title reads like the first line of a page, not a poster */
.hero.op-essay h1{font-weight:400;letter-spacing:-.02em}
/* make / process: guides — one step under the home statement */
.hero.op-menu h1,.hero.op-steps h1{font-size:clamp(2.5rem,5vw,4.5rem)}
/* price: a ledger, the title is the table's heading; review / portfolio / shop: honest notices beside one picture */
.hero.op-ledger h1,.hero.op-wait h1{font-size:var(--t-title)}
.hero .label{margin-bottom:var(--gap-3)}
.hero .actions,main .hero .actions{margin-top:var(--gap-6)}
.hero .actions small{flex-basis:100%;max-width:44em;color:var(--text-muted)}
@media (min-width:861px){
  .op-ledger h1{white-space:nowrap}
  .op-ledger .hero-row .index{margin-top:12px}
}
@media (max-width:860px){.op-steps .hero-row .index{margin-bottom:var(--gap-3)}}

/* ---------- spacing inside sections (between the 96/160/224 section steps) ---------- */
.sec h2 + .lead,.inner .head .lead{margin-top:var(--gap-3)}
/* essay sections (about): bare paragraphs under the heading read as one column */
.sec-main > h2 + p:not(.lead){margin-top:var(--gap-4)}
.sec-main > p:not(.lead):not(.more) + p:not(.more){margin-top:var(--gap-2)}
.sec-main > p:not(.lead){max-width:36em}
.kinds,.verbs,.reach,.pg,.faq,.crew article:first-child,.table-wrap,.form{margin-top:var(--gap-6)}
.table-wrap + .note{margin-top:var(--gap-2)}
.note + .table-wrap{margin-top:var(--gap-8)}
.more{margin-top:var(--gap-4)}
.sec .actions{margin-top:var(--gap-6)}
.team-main .head{margin-bottom:var(--gap-3)}
.kinds li,.ix{padding:var(--gap-3) 0}
.verbs li{padding:var(--gap-4) 0}
.crew article{padding:var(--gap-6) 0 var(--gap-4)}
.reach li{padding:var(--gap-4) 0 var(--gap-6)}
.dark .plate{margin-top:var(--s-1)}

/* ---------- figures: the caption belongs to the picture above it ---------- */
.plate figcaption,.team-plate figcaption{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding-top:12px;color:var(--text-muted)}
.plate figcaption > span:not(.label){color:var(--text-body)}
.dark .plate figcaption > span:not(.label){color:var(--text-on-dark-muted)}
@media (max-width:860px){.plate figcaption{flex-direction:row}}

/* ---------- price tables: one face for numbers, rules instead of a filled row ---------- */
.price-table tbody th{font-size:var(--t-body);color:var(--text)}
.price-table tbody th small{font-size:var(--t-small)}
.price-table td,.price-table td b{font-family:var(--f-body);font-weight:600;font-size:var(--t-body);letter-spacing:0}
.price-table tr.hi > *{background:none;box-shadow:inset 0 1px 0 var(--accent),inset 0 -1px 0 var(--accent)}
.band .price-table tr.hi > *{background:none}
.price-table tr.hi > :first-child{padding-left:0}
.price-table tr.hi > :last-child{padding-right:0}
/* what each package does: marks and short phrases, in the body voice at the regular weight */
.price-table.fit td{font-weight:400;text-align:center;color:var(--text)}
.price-table.fit thead th:not(:first-child){text-align:center}
.price-table.fit tbody tr:nth-child(4) td{font-size:var(--t-small);line-height:1.5;white-space:normal;color:var(--text-body)}
@media (min-width:861px){.price-table.fit th:not(:first-child),.price-table.fit td{width:20%}}
.quote{border:0;border-top:1px solid var(--accent);border-bottom:1px solid var(--rule);padding:var(--gap-3) 0;background:none;border-radius:0}

/* ---------- packages on make: a catalogue of rows, not three identical cards ---------- */
@media (min-width:861px){
  .pg{grid-template-columns:1fr;gap:0}
  .pg article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-auto-flow:dense;gap:0 var(--gap-4);align-content:start;padding:var(--gap-6) 0 var(--gap-4);border-bottom:0}
  .pg article:last-child{border-bottom:1px solid var(--rule)}
  .pg article > h3,.pg article > small,.pg article > b{grid-column:1}
  .pg article > dl{grid-column:2}
  .pg article > b{grid-row:3/span 2;align-self:start}
}
.pg b{font-family:var(--f-body);font-weight:600;font-size:var(--t-lead);letter-spacing:0;margin:var(--gap-2) 0 var(--gap-3)}
.pg dl{grid-template-columns:88px minmax(0,1fr);gap:var(--gap-2);padding:var(--gap-1) 0;border-top:1px solid var(--rule)}
.pg dl:first-of-type{border-top:0}
.pg dt{padding-top:3px}

/* ---------- actions: the matted main button stays; the rest share its height and voice ---------- */
.btn,.btn-line{border-radius:var(--r-sm);letter-spacing:.01em}
.actions .btn,.actions .btn-line{min-height:56px;padding:0 28px;font-size:var(--t-body)}
.top .btn-line{font-size:var(--t-small);padding:0 16px}
.kakao,.me-menu,.form input[type=file],.form input[type=file]::file-selector-button{border-radius:var(--r-sm)}
.tlink{font-size:var(--t-body)}

/* ---------- rules over boxes ---------- */
.policy table{border-top:1px solid var(--rule)}
.policy th,.policy td{border:0;border-bottom:1px solid var(--rule);padding:12px 16px 12px 0}
.policy th{background:none;font-weight:600;color:var(--text);font-size:var(--t-small);letter-spacing:.02em;white-space:nowrap}
.policy td{font-size:var(--t-small);line-height:1.6}
.policy h2{font-size:var(--t-lead);line-height:1.4;letter-spacing:-.01em;margin:var(--gap-8) 0 var(--gap-2);padding-top:var(--gap-3);border-top:1px solid var(--rule)}
.policy .toc{margin-top:var(--gap-4)}
.policy .toc + h2{border-top:0;padding-top:0}

/* ---------- the browser's own surfaces ---------- */
::selection{background:var(--main-tint);color:var(--text)}
html{accent-color:var(--accent);scrollbar-color:var(--rule) transparent}