/* GalaxyDresser site — GENERATED by tools/site/sync-design.mjs from design/tokens.css + design/components/base.css
 * + design/components/site.css. Do not edit here: edit design/ and run the script (design/README.md). */

/* ===== design/tokens.css ===== */
/* GalaxyDresser — "Silver Night" design tokens (v3)
 * Near-black night, silver type and graphite surfaces, ONE electric-blue accent.
 * Restrained and precise: no paper, no cream, no grain. The atelier survives only as line —
 * the hanger mark, hang tags, a stitched seam, a measuring tape.
 * Every text/background pair and every control boundary is measured by tools/check-contrast.py;
 * tools/shoot.py also measures the text actually rendered on each page against the pixels behind it.
 *
 * Rules
 *  - Blue (--accent) is the thread: seams being sewn, tag strings, the current page, the brand's tail —
 *    and ONE primary button per page (.btn--primary). Markers, numbers, chips and notes are silver.
 *  - Text is silver on night or graphite: --fg / --fg-2 / --fg-3. Nothing else carries body text.
 *  - Control boundaries (inputs, toggles, ghost buttons, chips, search) use --ctl (3:1 or more).
 *    --rule / --rule-2 are decorative seams and dividers only.
 *  - There is one context. No surface flips the colours, so a component looks the same wherever it sits.
 */
:root {
  color-scheme: dark;

  /* ── Night (backgrounds) — neutral, no blue or violet cast ─────── */
  --night-0: #050506;          /* deepest: admin rail, footer */
  --night-1: #0A0B0D;          /* page */
  --night-2: #111316;          /* quiet card */
  --night-3: #181A1F;          /* raised / hover */
  --night-4: #1F2228;          /* selected row */

  /* ── Silver (type and line on night) ──────────────────────────── */
  --silver: #F2F4F7;           /* 17.9:1 on night-1 */
  --silver-2: #C4C9D2;         /* 11.8:1 secondary */
  --silver-3: #9AA1AD;         /* 7.6:1 muted; still 5.8:1 on surface-3 */
  --line: rgb(242 244 247 / .12);    /* decorative divider */
  --line-2: rgb(242 244 247 / .24);  /* decorative seam */
  --line-3: rgb(242 244 247 / .5);   /* control boundary: 4.9:1 on night-1, 4.7:1 on night-4 (≥3) */
  --light: 214 220 230;        /* rgb triplet: the soft silver light (hero beams, haze) */

  /* ── Graphite surfaces (tags, sheets, forms) — not paper ──────── */
  --surface: #15171B;          /* a raised surface */
  --surface-2: #1B1E23;        /* inset on a surface: field, memo strip, summary */
  --surface-3: #22262C;        /* toggle track, pressed */
  --surface-edge: #3E434D;     /* the 1px edge of a surface (decorative) */
  --surface-sheen: rgb(255 255 255 / .035);   /* top light on a surface */

  /* ── Blue (the one accent) ────────────────────────────────────── */
  --blue: #3D8BFF;             /* 5.9:1 on night-1, 5.0:1 on surface-2 */
  --blue-hi: #66A3FF;          /* hover */
  --blue-deep: #1F4E99;        /* the back strand of a tag string (decorative) */
  --on-blue: #03060D;          /* text on a blue button: 6.1:1 (white would be 3.3:1) */
  --blue-soft: rgb(61 139 255 / .14);

  /* ── Status (semantic, not accent; app and admin only) ────────── */
  --ok: #7FD3A9;
  --warn: #E8C27A;
  --info: #A8BEDF;             /* silver-blue, kept apart from the accent */
  --no: #FF8A80;

  /* ── Semantic (what components use) ───────────────────────────── */
  --bg: var(--night-1);
  --fg: var(--silver);
  --fg-2: var(--silver-2);
  --fg-3: var(--silver-3);
  --rule: var(--line);
  --rule-2: var(--line-2);
  --ctl: var(--line-3);
  --ctl-hover: var(--silver-2);
  --accent: var(--blue);
  --accent-hi: var(--blue-hi);
  --on-accent: var(--on-blue);
  --focus: #9CC4FF;            /* 11.0:1 on night-1, 9.4:1 on surface-2 */
  --focus-halo: rgb(10 11 13 / .9);
  --field-bg: rgb(242 244 247 / .045);

  /* ── Type ─────────────────────────────────────────────────────── */
  /* Font draft K (2026-10-10): one sans family for text and headings, a space-age Latin face for the wordmark.
     GD Sans    = Pretendard 400–800: body, labels, buttons; headings 700 (--fw-display), the hero's big line 800
                  (--fw-hero), prices and big numbers 700 (--fw-num), quotes 500. h3 and card/panel titles stay 700.
     GD Sans JP = Pretendard JP 400–800: the same roles on Japanese pages (:lang(ja) below). Second in the other
                  stacks, so Japanese in user data (a BOOTH prefab name, a ticket) still gets Japanese forms; kanji
                  outside its subset go to the Japanese system gothics next (Hiragino, Yu Gothic UI), not to Malgun
                  in the middle of a word. Those have no Hangul, so Hangul beyond GD Sans still reaches the Korean
                  ones; only Hanja in Korean text (rare) takes Japanese forms.
     GD Logo    = Xolonium 400, ASCII: the wordmark (.brand-word) only.
     GD Mono    = Cascadia Mono, Latin and digits only. A label written in Korean is set in GD Sans
                  (see .label:lang(ko) in components/base.css), never tracked, never under 12px.
     --font-display is the heading stack: the same family as the body, kept as its own token. */
  --font-body: "GD Sans", "GD Sans JP", "Hiragino Sans", "Yu Gothic UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Meiryo", sans-serif;
  --font-display: "GD Sans", "GD Sans JP", "Hiragino Sans", "Yu Gothic UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Meiryo", sans-serif;
  --font-logo: "GD Logo", "GD Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "GD Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "GD Sans", "GD Sans JP", "Malgun Gothic", monospace;
  --fw-display: 700;          /* h1, h2, .display */
  --fw-hero: 800;              /* the home hero's big line */
  --fw-num: 700;               /* prices, step numbers, KPI and usage figures, the support contacts */
  --fw-quote: 500;             /* a quoted clause in the policies */
  --fw-logo: 400;              /* Xolonium has one weight */

  --fs-hero: clamp(3.9rem, 1.2rem + 7.4vw, 8rem);           /* the one huge line */
  --fs-hero-sm: clamp(1.7rem, 1.05rem + 2.5vw, 3.15rem);     /* the lines around it */
  --fs-h1: clamp(2.5rem, 1.75rem + 2.6vw, 4rem);
  --fs-h2: clamp(2.05rem, 1.5rem + 1.9vw, 3.25rem);
  --fs-h3: 1.1875rem;          /* Sans 700 */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-prose: 1.0625rem;       /* long-form reading (terms, privacy) */
  --fs-small: .875rem;
  --fs-ko-min: .8125rem;       /* 13px: the smallest Korean text (12px only in dense admin tables) */
  --fs-label: .75rem;          /* 12px mono, Latin/digits only */
  --fs-micro: .6875rem;        /* 11px mono, digits/codes only */

  --lh-display: 1.06;
  --lh-head: 1.18;
  --lh-body: 1.72;
  --lh-prose: 1.86;
  --measure: 40rem;            /* long-form line length (~38 Hangul syllables) */
  --track-latin: .12em;        /* uppercase mono labels; Hangul is never tracked */
  --track-head: -.03em;        /* headings */
  --track-hero: -.05em;        /* the hero's big line */
  --track-logo: 0;             /* the wordmark */

  /* ── Space, shape, depth ──────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 136px;
  /* Section rhythm: pick by the weight of what follows, not one size for all */
  --sec-s: clamp(56px, 7vw, 96px);
  --sec-m: clamp(72px, 9vw, 128px);
  --sec-l: clamp(88px, 11vw, 160px);
  --col: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-xs: 2px;                 /* crisp corners */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --shadow-surface: inset 0 1px 0 var(--surface-sheen), 0 18px 40px -20px rgb(0 0 0 / .8), 0 2px 6px rgb(0 0 0 / .35);
  --shadow-lift: 0 30px 60px -24px rgb(0 0 0 / .85), 0 6px 14px rgb(0 0 0 / .45);

  /* ── Stitch & tape ────────────────────────────────────────────── */
  --stitch-len: 7px;           /* one stitch */
  --stitch-gap: 5px;           /* one gap */
  --stitch-w: 1.5px;
  --stitch-inset: 7px;
  --tape-unit: 48px;           /* one "cm" on a measuring tape */

  /* ── Motion ───────────────────────────────────────────────────── */
  /* One orchestrated load on the two marketing pages, finished by ~1.2 s. App screens: none. */
  --ease-out: cubic-bezier(.16, .84, .24, 1);
  --spring: linear(0, .32 6%, .78 13%, 1.09 21%, 1.16 27%, 1.08 36%, .97 47%, .96 56%, 1.01 68%, 1);
  --t-fast: 140ms;
  --t-mid: 320ms;
  --t-reveal: 560ms;
  --t-stitch: 700ms;
  --t-sway: 1400ms;
  --stagger: 60ms;
  --sway: 1.1deg;              /* hover nudge of a hanging tag, around its eyelet */

  /* ── Layers ───────────────────────────────────────────────────── */
  /* The Paddle checkout overlay is appended to <body> as a fixed iframe with a very high z-index.
     Keep every layer of ours well under it, and never put transform/filter/contain on html/body. */
  --z-sky: -1;
  --z-raised: 2;
  --z-sticky: 10;
  --z-header: 20;
  --z-popover: 40;
  --z-ceiling: 100;            /* nothing in this system goes above this */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; --t-reveal: 0ms; --t-stitch: 0ms; --t-sway: 0ms; --stagger: 0ms; }
}

/* Japanese (the site's /ja/ and the app in Japanese): everything but the wordmark is GD Sans JP (Pretendard JP) — Latin,
   digits, punctuation (full-width 「」、。, with the halt base.css's text-spacing-trim needs), kana, kanji and the
   Hangul those pages show (한국어 in the switch, the business line). GD Sans after it only for Hangul in user data.
   Kanji outside our copy fall to the system Japanese gothic. The plugin's loopback page has no web fonts and gets the
   system Japanese ones. */
:lang(ja) {
  --font-body: "GD Sans JP", "GD Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-display: "GD Sans JP", "GD Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-logo: "GD Logo", "GD Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-mono: "GD Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "GD Sans JP", "GD Sans", monospace;
}

/* ===== design/components/base.css ===== */
/* GalaxyDresser — "Silver Night" · base.css
 * Shared by every page: reset, type, sky, motion primitives, seams, labels, buttons, brand,
 * header, surfaces, chips, footer. Load order: fonts/fonts.css → tokens.css → base.css → site|app|admin.css
 * CSP-safe: no inline styles needed, no scripts. Images: data: and 'self' (img/stars.svg).
 * Paddle-safe: decoration sits behind content (z-index -1) and html/body never get
 * transform / filter / backdrop-filter / contain / will-change.
 */

/* ───────────────────────── Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  font-synthesis: none;              /* GD Logo has one weight (400) and GD Sans stops at 800: never fake a bold */
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  background: transparent;           /* html paints the night; the sky sits between them */
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  font-kerning: normal;
  word-break: keep-all;              /* Korean: break between words, not syllables */
  overflow-wrap: break-word;         /* …but never overflow on long IDs */
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Korean: 「」 are narrow in GD Sans (Pretendard draws them 0.34 em wide), so "옷장에서 「…」" is one space wide, not two;
   halt does the same for 『』（）in GD Sans JP (a Japanese word inside Korean text) and in fallback fonts that have it.
   Copy rule: a normal space before 「 and none inside the brackets. Hangul is not affected by halt. */
body:lang(ko) { font-feature-settings: "halt"; }
/* Japanese: brackets stay full-width. text-spacing-trim, through the halt that subset-fonts.py adds to GD Sans JP (Pretendard
   JP has none), trims a bracket that starts a line and the blank between adjacent ones (」、 ）（ → 1.5 em). */
:lang(ja) body, body:lang(ja) { word-break: normal; font-feature-settings: normal; text-spacing-trim: trim-start; }
:lang(ja) :is(p, li, h1, h2, h3, .lead) { word-break: auto-phrase; }   /* Chrome 119+: no break inside a phrase (VRChatア|バター); normal elsewhere */
:where(:not(:lang(ja))) > :where(:lang(ja)) { font-family: var(--font-body); }   /* a Japanese word in Korean or English text */

img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
/* Display = the heading style: GD Sans 700, large, tight (font draft K). h1/h2, and big figures through --fw-num. */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
/* h3 and below, and every card/panel title, are Sans 700. */
h3, h4, .title-sans {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.4;
  letter-spacing: -.01em;
}
strong, b { font-weight: 700; }
code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: var(--r-sm);
}

[hidden] { display: none !important; }
/* A value still marked TODO in site/business.json or config.json (tools/site/apply-business.mjs). */
[data-todo] { color: var(--warn); text-decoration: underline dashed rgb(232 194 122 / .6); text-underline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-4); top: -60px; z-index: var(--z-ceiling);
  padding: 10px 16px; background: var(--silver); color: var(--night-1);
  font-weight: 700; border-radius: var(--r-sm); text-decoration: none;
}
.skip:focus-visible { top: var(--s-3); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }       /* phone numbers, and words glued to a bracket: 아바타(소체)용 */

/* ───────────────────────── Sky ─────────────────────────
 * Dark and quiet everywhere: a neutral night gradient, one faint silver haze, and one non-repeating
 * star field (img/stars.svg) dimmed over the content column. No grain. The one strong light lives in
 * the home hero (.beams in site.css). Fixed, z-index -1, pointer-events none: never above Paddle.
 */
.sky {
  position: fixed; inset: 0; z-index: var(--z-sky); pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 44% at 84% -8%, rgb(var(--light) / .085), transparent 70%),
    radial-gradient(80% 50% at 50% 120%, rgb(var(--light) / .045), transparent 70%),
    linear-gradient(180deg, #0D0E11 0%, var(--night-1) 40%, #070709 100%);
}
.sky::before {            /* stars: one 1600×1200 field, sparse and dimmed where the text column is */
  content: ""; position: absolute; inset: 0;
  background: url("img/stars.svg") 50% 0 / 1600px 1200px repeat;
  --col-fade: linear-gradient(90deg, #000 0, #000 calc(50% - 700px), rgb(0 0 0 / .3) calc(50% - 560px),
                              rgb(0 0 0 / .3) calc(50% + 560px), #000 calc(50% + 700px), #000 100%);
  -webkit-mask-image: var(--col-fade);
          mask-image: var(--col-fade);
  opacity: .9;
}
.sky--quiet { background: linear-gradient(180deg, #0C0D10, var(--night-1)); }
.sky--quiet::before { opacity: .35; }

/* Drafting grid: faint 12px / 60px silver lines, faded at the edges. Put on any section. */
.cut-grid { position: relative; isolation: isolate; }
.cut-grid::before {
  content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(242 244 247 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(242 244 247 / .045) 1px, transparent 1px),
    linear-gradient(rgb(242 244 247 / .018) 1px, transparent 1px),
    linear-gradient(90deg, rgb(242 244 247 / .018) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  background-position: center;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 85%);
          mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 85%);
}

/* ───────────────────────── Motion primitives ─────────────────────────
 * Marketing pages only, once, done by ~1.2 s. Headings and lead copy are never hidden at load (LCP).
 * App and admin screens use none of these.
 */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.rv { animation: rise var(--t-reveal) var(--ease-out) both; animation-delay: calc(var(--d, 0) * var(--stagger)); }
.rv-fade { animation-name: fade; }
.d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; }
.d6 { --d: 6; } .d7 { --d: 7; } .d8 { --d: 8; } .d9 { --d: 9; } .d10 { --d: 10; }

/* SVG thread that sews itself in: a dashed path revealed by a solid mask path (pathLength="1"). */
.sew-mask { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw var(--t-stitch) var(--ease-out) forwards; animation-delay: calc(var(--d, 2) * var(--stagger) + 120ms); }
.stitch-path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: var(--stitch-len) var(--stitch-gap); }
.stitch-path--silver { stroke: var(--line-3); }

@media (prefers-reduced-motion: reduce) {
  .rv, .sew-mask { animation: none !important; }
  .sew-mask { stroke-dashoffset: 0; }
  * { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ───────────────────────── Seams ─────────────────────────
 * A seam is a dashed line in silver (decorative) or blue (the thread). Never a solid border pretending.
 * A seam thinner than 2px (--stitch-w, 1.5px) is drawn as a border cut into stitches by a mask, never as a
 * 1.5px-tall box: border widths snap to whole device pixels, a box does not, so a row of 1.5px boxes rendered
 * some seams one pixel tall and some two (on a 1x screen the blue eyebrow thread looked grey on one page).
 */
.stitch-h {        /* a horizontal seam as a divider */
  height: 0; border: 0; margin: 0; border-top: var(--stitch-w) solid var(--stitch-color, var(--rule-2));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap)));
          mask: repeating-linear-gradient(90deg, #000 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap)));
}
.stitched { position: relative; }
.stitched::after {      /* a seam just inside the edge of a surface */
  --c: var(--stitch-color, var(--rule));
  content: ""; position: absolute; inset: var(--stitch-inset); pointer-events: none; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg,  var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) left top / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) right top / 1px 100% no-repeat,
    repeating-linear-gradient(270deg, var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) right bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg,   var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) left bottom / 1px 100% no-repeat;
}
.basted {          /* a dashed outline instead of an edge: something not sewn yet ("coming soon") */
  --c: var(--rule-2);
  background:
    repeating-linear-gradient(90deg,  var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) left top / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) right top / 1px 100% no-repeat,
    repeating-linear-gradient(270deg, var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) right bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg,   var(--c) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))) left bottom / 1px 100% no-repeat;
}

/* ───────────────────────── Labels & small type ─────────────────────────
 * .label is mono, uppercase, tracked — for Latin and digits only (mark it lang="en").
 * The same class in Korean (the page default) becomes GD Sans 13px, untracked, sentence case.
 */
.label {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: var(--track-latin);
  text-transform: uppercase;
  color: var(--fg-3);
}
.label:lang(ko), .label:lang(ja) {
  font: 500 var(--fs-ko-min)/1.45 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.latin {           /* a Latin run inside Korean text that should look like a label */
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--track-latin); text-transform: uppercase;
}
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s-4);
  font: 500 .9375rem/1.4 var(--font-body); color: var(--fg-2);
}
.eyebrow::before {   /* a short run of thread */
  content: ""; flex: 0 0 34px; height: 0; border-top: var(--stitch-w) solid var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 10px);
          mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 10px);
}
.eyebrow:lang(en) { font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--track-latin); text-transform: uppercase; }
.eyebrow b { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--track-latin); text-transform: uppercase; color: var(--fg); }
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--fg-2); max-width: 36em; }
.muted { color: var(--fg-3); }
.small { font-size: var(--fs-small); }
.accent { color: var(--accent); }

/* ───────────────────────── Buttons ─────────────────────────
 * One blue (.btn--primary) per page: its main action. Then silver-filled (.btn--silver) for a strong
 * secondary action, and the ghost .btn for everything else.
 */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--ctl);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: 0 1.3em;
  font: 600 .9375rem/1.1 var(--font-body); text-decoration: none; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover { --btn-bd: var(--ctl-hover); background-color: rgb(242 244 247 / .06); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent; --btn-stitch: rgb(3 6 13 / .3); }
.btn--primary:hover { --btn-bd: transparent; background-color: var(--accent-hi); }
.btn--silver { --btn-bg: var(--silver); --btn-fg: var(--night-1); --btn-bd: transparent; --btn-stitch: rgb(10 11 13 / .26); }
.btn--silver:hover { --btn-bd: transparent; background-color: #FFFFFF; }
.btn--primary::after,
.btn--silver::after {          /* a woven-label seam inside the filled buttons */
  content: ""; position: absolute; inset: 4px; border-radius: 2px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--btn-stitch) 0 5px, transparent 5px 9px) left top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--btn-stitch) 0 5px, transparent 5px 9px) left bottom / 100% 1px no-repeat;
}
.btn--danger { --btn-fg: var(--no); --btn-bd: rgb(255 138 128 / .7); }
.btn--sm { min-height: 38px; padding: 0 1em; font-size: .875rem; }
.btn--lg { min-height: 54px; padding: 0 1.6em; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--quiet { --btn-bd: transparent; padding-inline: .7em; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .3em; }
.btn--quiet:hover { --btn-bd: transparent; text-decoration-color: var(--fg); }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--fg); text-decoration: none; }
.link-arrow svg { width: 1em; height: 1em; transition: translate var(--t-fast) ease; }
.link-arrow:hover svg { translate: 3px 0; }

/* ───────────────────────── Brand ─────────────────────────
 * #gd-mark: the hanger mark (viewBox 32) — a hanger drawn as a constellation: silver lines, five stars,
 * the hook an arc of stars ending in the blue needle-point. Wordmark: GD Logo (Xolonium 400); a blue seam under
 * "Dresser" continues the tail of the y.
 */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--silver); text-decoration: none; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-word { font: var(--fw-logo) 1.4375rem/1 var(--font-logo); letter-spacing: var(--track-logo); white-space: nowrap; }
.brand-word .tail { position: relative; }
.brand-word .tail::after {
  content: ""; position: absolute; left: -.14em; right: .02em; bottom: .1em; border-top: 1.5px solid var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
          mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
}
.mark-line { fill: none; stroke: rgb(242 244 247 / .8); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mark-star { fill: var(--silver); }
.mark-accent { fill: var(--accent); }

/* ───────────────────────── Header ───────────────────────── */
.site-top {
  position: sticky; top: 0; z-index: var(--z-header);
  background: linear-gradient(180deg, rgb(10 11 13 / .94), rgb(10 11 13 / .84));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-top::after {        /* the header's bottom seam */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap)));
}
.top-inner { display: flex; align-items: center; gap: var(--s-6); min-height: 72px; }
.top-nav { display: flex; gap: var(--s-1); margin-right: auto; }
.top-nav a {
  position: relative; padding: 10px 12px; color: var(--silver-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.top-nav a:hover { color: var(--silver); }
.top-nav a[aria-current="page"] { color: var(--silver); }
.top-nav a[aria-current="page"]::after {   /* current page: a short run of thread */
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; border-top: 1.5px solid var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
}
.top-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--track-latin); text-transform: uppercase; color: var(--silver-2); text-decoration: none; padding: 12px 6px; }
.lang:lang(ko) { font: 500 .875rem/1 var(--font-body); letter-spacing: 0; text-transform: none; }
.lang:hover { color: var(--silver); }

/* Optional menu button for app screens that need one (a <details>, no script). */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  border: 1px solid var(--ctl); border-radius: var(--r-sm);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 20px; height: 20px; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-popover); min-width: 220px;
  display: grid; padding: var(--s-2); background: var(--night-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.menu-panel a { padding: 12px 14px; text-decoration: none; color: var(--silver); border-radius: var(--r-sm); }
.menu-panel a:hover { background: var(--night-4); }

/* App header variant (signed-in) */
.app-top .top-inner { min-height: 64px; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--ctl); border-radius: var(--r-pill); text-decoration: none; color: var(--silver); font-size: .875rem; font-weight: 500; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--silver); color: var(--night-1); font: 700 .8125rem/1 var(--font-body); }
.avatar--staff { background: var(--night-4); color: var(--silver); border: 1px solid var(--line-2); }
.avatar--staff svg { width: 20px; height: 20px; }

/* ───────────────────────── Measuring tape & ruler ─────────────────────────
 * Graphite strip, silver ticks, mono numbers. Decorative only (aria-hidden).
 */
.tape {
  position: relative; height: 28px; overflow: hidden;
  background: linear-gradient(180deg, #1C1F25, var(--surface));
  border-block: 1px solid var(--surface-edge);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / .8);
}
.tape svg { position: absolute; left: 0; top: 0; width: 2400px; height: 28px; max-width: none; }
.tape-band { overflow: clip; padding-block: 14px; }
.tape--tilt { rotate: -1.2deg; margin-inline: -2%; }
.tape-tick { stroke: var(--silver-3); stroke-width: 1; }
.tape-num { font: 600 9.5px var(--font-mono); fill: var(--silver-2); }
.ruler {        /* a hairline ruler, a quiet divider */
  height: 12px; border-top: 1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px var(--tape-unit)) top left / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(var(--tape-unit) / 8)) top left / 100% 5px no-repeat;
}

/* ───────────────────────── Surfaces ─────────────────────────
 * .surface: graphite, a 1px edge, a sheen on top, a soft drop. Add .stitched for the seam inside the
 * edge. .card-night is the quieter panel (no sheen, no drop) for lists and app panels.
 */
.surface {
  background: var(--surface) linear-gradient(180deg, var(--surface-sheen), transparent 45%);
  border: 1px solid var(--surface-edge);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-surface);
}
.surface-2 { background: var(--surface-2); border-radius: var(--r-sm); }
.card-night { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-md); }

/* ───────────────────────── Chips (status) ─────────────────────────
 * Korean text: GD Sans 13px. Latin codes (lang="en"): mono 11px uppercase.
 */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border: 1px solid currentColor; border-radius: var(--r-xs);
  font: 600 var(--fs-ko-min)/1.55 var(--font-body); white-space: nowrap;
}
.chip:lang(en) { font: 600 var(--fs-micro)/1.7 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip--ok { color: var(--ok); }
.chip--warn { color: var(--warn); }
.chip--no { color: var(--no); }
.chip--info { color: var(--info); }
.chip--mute { color: var(--silver-3); }

/* ───────────────────────── Footer ───────────────────────── */
.site-foot { position: relative; margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-6); background: rgb(5 5 6 / .88); }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 var(--stitch-len), transparent var(--stitch-len) calc(var(--stitch-len) + var(--stitch-gap))); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .875rem; }
.foot-nav a { color: var(--silver-2); text-decoration: none; padding: 6px 0; }
.foot-nav a:hover { color: var(--silver); text-decoration: underline; text-decoration-color: var(--accent); }
.foot-nav a[aria-current="page"] { color: var(--silver); }
.foot-nav strong { color: var(--silver); }
.foot-legal { font-size: .8125rem; line-height: 1.75; color: var(--silver-3); max-width: 62rem; }
.foot-legal p { margin: 0 0 .5em; }
.foot-legal a { color: var(--silver-2); }

/* ───────────────────────── Shared responsive ───────────────────────── */
@media (max-width: 760px) {
  .top-inner { flex-wrap: wrap; gap: 0 var(--s-3); min-height: 0; padding-top: 10px; }
  .top-inner:not(:has(.top-nav)) { min-height: 60px; padding-top: 0; }   /* brand only (404): no second row */
  .top-inner > .brand { margin-right: auto; }
  .top-actions { order: 2; }
  .top-nav { order: 3; flex: 1 0 100%; margin: 2px 0 0 -12px; overflow-x: auto; scrollbar-width: none; }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { white-space: nowrap; padding-block: 12px; }
  .top-nav a:focus-visible { outline-offset: -4px; box-shadow: none; }   /* the row scrolls, so a ring outside the link was cut off */
  .app-top .top-nav, .top-actions .hide-sm { display: none; }
  .app-top .menu { display: block; }
  .app-top .top-inner { flex-wrap: nowrap; padding-top: 0; min-height: 60px; }
  .user-chip .name { display: none; }
  .user-chip { padding: 3px; }
}
@media (max-width: 400px) {      /* brand and actions stay on one row down to 360px */
  .top-inner { column-gap: var(--s-2); }
  .brand { gap: 8px; }
  .brand-word { font-size: 1.25rem; }
  .brand-mark { width: 28px; height: 28px; }
  .top-actions { gap: 6px; }
  .top-actions .lang { padding-inline: 4px; }
  .top-actions .btn--sm { padding-inline: .8em; }
}

/* ===== design/components/site.css ===== */
/* GalaxyDresser — "Silver Night" · site.css
 * The public site: home, pricing, support, terms / refund / privacy, 404.
 * Needs tokens.css + base.css. No scripts, no inline styles (the site's CSP blocks both).
 */

/* ───────────────────────── Section rhythm ─────────────────────────
 * The gap above a section is its own padding-top (no bottom padding, so gaps never add up), chosen by
 * the weight of what comes next: .sec-s 56–96, .sec-m 72–128, .sec-l 88–160 px. The last section of
 * <main> closes with .sec-s before the footer.
 */
.section { padding-block: var(--sec-m) 0; }
.sec-s { padding-top: var(--sec-s); }
.sec-m { padding-top: var(--sec-m); }
.sec-l { padding-top: var(--sec-l); }
main > .section:last-child, main > .wrap > .section:last-child { padding-bottom: var(--sec-s); }
.section-head { display: grid; gap: var(--s-2); margin-bottom: clamp(32px, 5vw, 56px); max-width: 46rem; }
.section-head .eyebrow { margin-bottom: var(--s-2); }

/* ───────────────────────── Hero ───────────────────────── */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(36px, 5vw, 72px) clamp(72px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-title { margin-bottom: var(--s-6); text-wrap: initial; letter-spacing: var(--track-head); }
.hero-title .ln { display: block; font-size: var(--fs-hero-sm); line-height: 1.2; text-wrap: balance; }
.hero-title .ln-big { font-size: var(--fs-hero); font-weight: var(--fw-hero); line-height: .98; margin: .06em 0 .25em -.05em; letter-spacing: var(--track-hero); }
.thread-word { position: relative; display: inline-block; white-space: nowrap; padding-bottom: .08em; }
.thread-word svg { position: absolute; left: .02em; bottom: -.18em; width: 100%; height: .18em; }   /* clear of the Hangul baseline */
.thread-word .stitch-path { stroke-width: 2.2; stroke-dasharray: 11 7; }
.hero .lead { margin-bottom: var(--s-6); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero-note { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-4) 0 0; font-size: var(--fs-small); color: var(--silver-3); }
.hero-note::before {      /* a small star, not a status dot; level with the first line when the note wraps */
  content: ""; width: 11px; height: 11px; margin-top: calc((1lh - 11px) / 2); flex: none; background: var(--silver-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0c.5 3 2 4.6 6 6-4 1.4-5.5 3-6 6-.5-3-2-4.6-6-6 4-1.4 5.5-3 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0c.5 3 2 4.6 6 6-4 1.4-5.5 3-6 6-.5-3-2-4.6-6-6 4-1.4 5.5-3 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The figure: the hanger mark drawn large as a constellation, soft silver light falling from its
   shoulders (.beams, the one strong light on the site), and the at-a-glance tag hanging from its
   right shoulder on a blue thread. All decoration (aria-hidden); the tag is real content. */
.hero-figure { position: relative; width: min(100%, 540px); aspect-ratio: 560 / 640; margin-inline: auto; }
.beams { position: absolute; z-index: -1; left: -21.43%; top: -12.5%; width: 142.86%; max-width: none; height: 134.38%; pointer-events: none; overflow: visible; opacity: .62; }
.figure-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-line { fill: none; stroke: rgb(242 244 247 / .62); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.c-star { fill: var(--silver); }
.c-star--dim { fill: rgb(242 244 247 / .5); }
.c-accent { fill: var(--accent); }
.c-thread { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }

.hero-tag {               /* the small tag on the hanger: what you get, at a glance */
  --tilt: -1deg; --eyelet: 16px;
  position: absolute; left: 75%; top: calc(70.6% - var(--eyelet)); width: 216px; translate: -50% 0;
  rotate: var(--tilt); transform-origin: 50% var(--eyelet);
  padding: 34px 18px 16px;
  background: var(--surface) linear-gradient(180deg, rgb(255 255 255 / .05), transparent 40%);
  clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px);
  -webkit-mask: radial-gradient(circle 5px at 50% var(--eyelet), #0000 96%, #000 100%);
          mask: radial-gradient(circle 5px at 50% var(--eyelet), #0000 96%, #000 100%);
  transition: rotate var(--t-sway) var(--ease-out);
}
.hero-tag::before {       /* seam that follows the tag outline */
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px dashed var(--line-2); border-top: 0;
  clip-path: polygon(0 24px, 100% 24px, 100% 100%, 0 100%);
}
.hero-tag .eyelet { width: 18px; height: 18px;
  background: radial-gradient(circle, transparent 4.6px, #6B717C 5px, #E6E9EE 6.5px, #9AA1AD 8px, transparent 8.6px); }
.hero-tag h2 { font: 700 .875rem/1.3 var(--font-body); letter-spacing: 0; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hero-tag ul { display: grid; gap: 10px; }
.hero-tag strong { display: block; font-size: .875rem; line-height: 1.4; }
.hero-tag li > span { display: block; font-size: var(--fs-ko-min); line-height: 1.5; color: var(--silver-2); }

/* Hero load (≈1.2 s): the h1 and copy are there from the first paint. The light breathes in, the
   hanger is drawn, the thread drops from its shoulder, the tag swings in on it. */
@keyframes swing-in { from { opacity: 0; rotate: 7deg; } to { opacity: 1; rotate: var(--tilt); } }
@keyframes beams-in { from { opacity: 0; } to { opacity: .62; } }
.beams { animation: beams-in 900ms ease-out both; }
.c-line--draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 760ms var(--ease-out) 80ms forwards; }
.c-thread--draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 420ms var(--ease-out) 560ms forwards; }
.c-twinkle { animation: fade 420ms ease-out both; animation-delay: calc(var(--d, 0) * 50ms + 60ms); }
.hero-tag { animation: swing-in 520ms var(--ease-out) 760ms backwards; }   /* backwards: hover can rotate it afterwards */
@supports (transition-timing-function: linear(0, 1)) {
  .hero-tag { animation-timing-function: var(--spring); }
}
@media (prefers-reduced-motion: reduce) {
  .beams, .c-line--draw, .c-thread--draw, .c-twinkle, .hero-tag { animation: none !important; }
  .c-line--draw, .c-thread--draw { stroke-dashoffset: 0; }
}

/* ───────────────────────── How it works: three steps, sewn together ─────────────────────────
 * Each step is a graphite surface with the real screen as a monochrome print. A blue thread joins
 * the steps; only its stitches in the gaps show.
 */
.steps { --gap: clamp(24px, 3.4vw, 48px); --pad: 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.step { position: relative; display: flex; flex-direction: column; padding: var(--pad); }
.step-shot { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--night-0); }
.step-shot img { width: 100%; height: auto; border-radius: 1px; filter: grayscale(1) contrast(1.04) brightness(.94); }
.step:not(:last-child) .step-shot::after {     /* the thread across the gap to the next step */
  content: ""; position: absolute; top: 50%; left: calc(100% + var(--pad) + 2px); width: var(--gap); pointer-events: none;
  border-top: 1.6px solid var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 12px);
          mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 12px);
}
.step-body { padding: 18px 10px 12px; }
.step-num { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font: 500 var(--fs-ko-min)/1.4 var(--font-body); color: var(--silver-3); }
.step-num b { font: var(--fw-num) 3rem/.86 var(--font-display); letter-spacing: -.04em; color: var(--silver); }
.step h3 { margin-bottom: var(--s-2); }
.step-body > p:last-child { margin: 0; color: var(--silver-2); font-size: .9375rem; line-height: 1.75; }

/* ───────────────────────── Requirements: a spec sheet ───────────────────────── */
.sheet { padding: clamp(24px, 4vw, 48px); }
.sheet-head { margin-bottom: var(--s-6); max-width: none; padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--silver-2); box-shadow: 0 4px 0 -3px var(--line-2); }
.sheet-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.sheet-col:first-child { padding-right: clamp(20px, 3vw, 40px); }
.sheet-col + .sheet-col { padding-left: clamp(20px, 3vw, 40px); border-left: 1px dashed var(--line-2); }
.sheet h3 { margin-bottom: var(--s-3); }
.checks li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--line); color: var(--silver); }
.checks li:last-child { border-bottom: 0; }
.checks li::before {      /* an empty box: something to have ready */
  content: ""; position: absolute; left: 0; top: calc(10px + .78em - 9px); width: 18px; height: 18px; background: var(--silver-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='2' y='2' width='14' height='14' rx='1' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='2' y='2' width='14' height='14' rx='1' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checks--ok li { color: var(--silver-2); }
.checks--ok li::before, .xlist li::before {      /* a two-stitch check */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.6l2.9 2.9M8.6 11.2L14.8 4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.6l2.9 2.9M8.6 11.2L14.8 4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ───────────────────────── Coming soon: basted, not sewn yet ───────────────────────── */
.soon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.soon > li { padding: 22px 22px 24px; border-radius: var(--r-xs); }
.soon h3 { font-size: 1.0625rem; margin-bottom: var(--s-2); }
.soon p { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--silver-2); }

/* ───────────────────────── FAQ: the title beside the questions ───────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-side { position: sticky; top: 104px; margin-bottom: 0; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: 1fr 26px; gap: var(--s-4); align-items: center; cursor: pointer; list-style: none;
  padding: 22px 0; font: 600 1.0625rem/1.5 var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--silver); }
.faq summary::after {      /* a cross-stitch: "+" when closed, the finished "×" when open */
  content: ""; width: 26px; height: 26px; background: var(--silver-2); rotate: 45deg;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 8.5l11 11M19.5 8.5l-11 11' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cg%3E%3Ccircle cx='6' cy='6' r='1.4'/%3E%3Ccircle cx='22' cy='6' r='1.4'/%3E%3Ccircle cx='6' cy='22' r='1.4'/%3E%3Ccircle cx='22' cy='22' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 8.5l11 11M19.5 8.5l-11 11' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cg%3E%3Ccircle cx='6' cy='6' r='1.4'/%3E%3Ccircle cx='22' cy='6' r='1.4'/%3E%3Ccircle cx='6' cy='22' r='1.4'/%3E%3Ccircle cx='22' cy='22' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--t-mid) var(--ease-out);
}
.faq details[open] summary::after { rotate: 0deg; background: var(--silver); }
.faq .answer { padding: 0 48px 24px 0; color: var(--silver-2); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer a { color: var(--silver); text-decoration-color: var(--line-3); }
.faq .answer a:hover { text-decoration-color: var(--accent); }

/* ───────────────────────── Hang tags (pricing, closing CTA) ─────────────────────────
 * A graphite tag with clipped top corners, a punched eyelet (a real hole: the mask) with a silver
 * ring, a seam that follows the outline, hung on a blue thread. Hover nudges it ~1° around the eyelet
 * with a damped spring; leaving springs it back (a transition, so nothing snaps).
 */
.hangtag {
  --tilt: -1.4deg; --eyelet: 44px; --corner: 64px;
  position: relative; width: 100%; rotate: var(--tilt); transform-origin: 50% var(--eyelet);
  padding: 74px clamp(20px, 2.4vw, 32px) 30px;
  background: var(--surface) linear-gradient(180deg, rgb(255 255 255 / .05), transparent 34%);
  clip-path: polygon(var(--corner) 0, calc(100% - var(--corner)) 0, 100% var(--corner), 100% 100%, 0 100%, 0 var(--corner));
  -webkit-mask: radial-gradient(circle 9px at 50% var(--eyelet), #0000 97%, #000 100%);
          mask: radial-gradient(circle 9px at 50% var(--eyelet), #0000 97%, #000 100%);
  transition: rotate var(--t-sway) var(--ease-out);
}
@supports (transition-timing-function: linear(0, 1)) {
  .hangtag, .hero-tag { transition-timing-function: var(--spring); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tag-hang:hover .hangtag, .cta-hang:hover .hangtag, .hero-figure:hover .hero-tag { rotate: calc(var(--tilt) + var(--sway)); }
}
.hangtag::before {            /* the seam following the tag outline */
  --c: var(--line-2); --k: calc(var(--corner) - 4px);
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px) left 0 bottom 0 / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, var(--c) 0 6px, transparent 6px 10px) left 0 bottom 0 / 1px calc(100% - var(--k)) no-repeat,
    repeating-linear-gradient(0deg, var(--c) 0 6px, transparent 6px 10px) right 0 bottom 0 / 1px calc(100% - var(--k)) no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px) var(--k) 0 / calc(100% - 2 * var(--k)) 1px no-repeat;
}
.tag-corner-seam { position: absolute; top: 10px; width: calc(var(--corner) - 4px); height: calc(var(--corner) - 4px); pointer-events: none; }
.tag-corner-seam--l { left: 10px; }
.tag-corner-seam--r { right: 10px; }
.tag-corner-seam line { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.eyelet {                 /* silver ring around the punched hole */
  position: absolute; left: 50%; top: var(--eyelet); width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, transparent 8.5px, #6B717C 9px, #E6E9EE 11px, #9AA1AD 13.5px, rgb(0 0 0 / .3) 14.5px, transparent 15px);
  pointer-events: none;
}

/* Pricing: the head beside the tags from 1240px; on a phone the tags come right after the head. */
.price-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.price-head { padding-block: clamp(32px, 5vw, 64px) var(--s-5); }
.price-head h1 { font-size: clamp(2.5rem, 1.8rem + 1.6vw, 3.2rem); margin-bottom: var(--s-5); }
.price-head h1 .ln { display: block; }
.price-head h1 .ln:lang(ko) { white-space: nowrap; }
.price-head .lead { font-size: 1.0625rem; max-width: 30rem; margin: 0; }
@media (min-width: 1240px) {
  .price-top { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .price-head { padding-top: clamp(56px, 7vw, 104px); }
  .plans-sec { padding-top: 28px; }
  .price-top .hangtags { justify-content: space-evenly; }
}

.rail-wrap { position: relative; padding-top: 34px; }
.rail {          /* a polished silver rod */
  position: absolute; left: 0; right: 0; top: 18px; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #F2F4F7 0%, #9AA1AD 45%, #3A3F48 100%);
  box-shadow: 0 6px 14px rgb(0 0 0 / .55);
}
.rail::before, .rail::after { content: ""; position: absolute; top: -12px; width: 6px; height: 18px; background: linear-gradient(90deg, #5B616C, #D2D6DD, #5B616C); }
.rail::before { left: 4%; } .rail::after { right: 4%; }
.hangtags { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; gap: clamp(28px, 4vw, 48px); }
.tag-hang { position: relative; display: grid; justify-items: center; align-content: start; min-width: 0; }
.tag-string { width: 70px; height: 92px; margin: -13px 0 -48px; position: relative; z-index: 3; }
.tag-string .str { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.tag-string .str-back { fill: none; stroke: var(--blue-deep); stroke-width: 1.8; stroke-linecap: round; }
.tag-hang:nth-child(2) .hangtag { --tilt: 1.2deg; }
.tag-name { margin-bottom: var(--s-1); font-size: 1.125rem; }
.tag-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: var(--s-3) 0 0; }
.tag-amount { font: var(--fw-num) clamp(2.9rem, 2.2rem + 1.3vw, 3.4rem)/1 var(--font-display); letter-spacing: -.045em; color: var(--silver); white-space: nowrap; }
.tag-amount .won { font-size: .4em; letter-spacing: 0; margin-left: .08em; }
.tag-per { font: 500 var(--fs-ko-min)/1.4 var(--font-body); color: var(--silver-3); }
.hangtag .ruler { margin: var(--s-5) -4px var(--s-5); }
.xlist { display: grid; gap: 10px; margin-bottom: var(--s-6); }
.xlist li { position: relative; padding-left: 30px; font-size: .9688rem; line-height: 1.6; color: var(--silver); }
.xlist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background: var(--silver-2);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hangtag .agree { font-size: var(--fs-ko-min); line-height: 1.6; color: var(--silver-2); margin: var(--s-3) 0 0; }
.hangtag .agree a { color: var(--silver); text-decoration-color: var(--line-3); }

/* Notes under the prices: one sheet, two columns. */
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: clamp(24px, 4vw, 44px); }
.notes > div:first-child { padding-right: clamp(20px, 3vw, 44px); }
.notes > div + div { padding-left: clamp(20px, 3vw, 44px); border-left: 1px dashed var(--line-2); }
.notes h3 { margin-bottom: var(--s-3); }
.notes ul + p { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.75; color: var(--silver-3); }
.notes :is(ul, p) + h3 { margin-top: var(--s-6); }
.notes a { color: var(--silver); text-decoration-color: var(--line-3); }

/* Lists with a short seam as the marker (notes, support). */
.dash-list li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--silver-2); font-size: .9688rem; line-height: 1.75; }
.dash-list li:last-child { margin-bottom: 0; }
.dash-list li::before, .doc ul > li::before {   /* two stitches (a border cut by a mask: see Seams in base.css) */
  content: ""; position: absolute; left: 1px; top: .86em; width: 11px; height: 0; border-top: 1.5px solid var(--silver-3);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
          mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px); }
.num-list { counter-reset: n; }
.num-list li { counter-increment: n; position: relative; padding-left: 34px; margin-bottom: 10px; color: var(--silver-2); font-size: .9688rem; line-height: 1.75; }
.num-list li:last-child { margin-bottom: 0; }
.num-list li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 500 var(--fs-label)/1.5 var(--font-mono); color: var(--silver-3); }
.dash-list a, .num-list a { color: var(--silver); text-decoration-color: var(--line-3); }

/* Closing CTA: a tag hung from a star */
.cta-hang { display: grid; justify-items: center; }
.cta-thread { width: 60px; height: 120px; margin-bottom: -46px; position: relative; z-index: 3; }
.hangtag--cta { --tilt: -.8deg; --corner: 48px; --eyelet: 36px; max-width: 600px; padding: 68px clamp(24px, 5vw, 56px) 44px; text-align: center; }
.hangtag--cta h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: var(--s-6); }
.c-star-glow { fill: url(#ctaGlow); }

/* ───────────────────────── Page head (support, legal; pricing has its own) ───────────────────────── */
.section-near { padding-top: var(--s-2); }
.page-head { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); max-width: 48rem; }
.page-head h1 { margin-bottom: var(--s-4); }
.page-head .lead { margin: 0; }
.page-head .cta-row { margin-top: var(--s-5); }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: var(--fs-small); color: var(--silver-3); }
.draft-note { color: var(--warn); }

/* ───────────────────────── Support ───────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); }
@media (min-width: 680px) {      /* two across; an odd last card takes the whole row instead of leaving a hole */
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {     /* three across only when the e-mail address fits on one line */
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid > :last-child:nth-child(odd) { grid-column: auto; }
}
.contact { display: grid; align-content: start; gap: 8px; padding: 26px 26px 24px; }
.contact h3 { font-size: 1rem; color: var(--silver-2); }
.contact .big { margin: 0; font: var(--fw-num) clamp(1.25rem, 1.05rem + .55vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.contact .big a { color: var(--silver); text-decoration: none; background: linear-gradient(var(--line-3), var(--line-3)) left bottom / 100% 1px no-repeat; padding-bottom: 2px; }
.contact .big a:hover { background-image: linear-gradient(var(--accent), var(--accent)); }
.contact .small { margin: 0; color: var(--silver-3); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.two-col > div { padding: clamp(24px, 3vw, 34px); }
.two-col h3 { margin-bottom: var(--s-4); }
.two-col .small { margin: var(--s-4) 0 0; color: var(--silver-3); }

/* ───────────────────────── Long-form pages (terms, refund, privacy) ─────────────────────────
 * Calm reading: one 40rem column of 17px text at 1.86, bold section titles on a hairline, the
 * contents beside it from 1100px (sticky), tables with hairlines only.
 */
.doc-wrap { padding-bottom: var(--sec-s); }
.doc { max-width: var(--measure); font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--silver-2); }
.doc > p:first-child { color: var(--silver); }
.doc section { margin-top: clamp(40px, 5vw, 60px); scroll-margin-top: 96px; }
.doc section:first-child, .doc .toc + section { margin-top: 0; }
.doc h2 { font-size: clamp(1.45rem, 1.25rem + .7vw, 1.8rem); line-height: 1.32; color: var(--silver); margin-bottom: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc h3 { margin: 28px 0 8px; }
.doc p { margin-bottom: .9em; }
.doc strong { color: var(--silver); }
.doc a { color: var(--silver); text-decoration-color: var(--line-3); }
.doc a:hover { text-decoration-color: var(--accent); }
.doc ul, .doc ol { margin: 0 0 1em; }
.doc li { margin-bottom: 8px; }
.doc ul > li { position: relative; padding-left: 22px; }
.doc ul > li::before { top: .9em; }
.doc ol { list-style: decimal; padding-left: 1.7em; }
.doc ol > li { padding-left: .3em; }
.doc ol > li::marker { font: 500 .8125em var(--font-mono); color: var(--silver-3); }
.doc li > ul { margin: 10px 0 0; }
/* A table scrolls sideways on a phone; a soft light at an edge shows there is more that way. The light is
   driven by the table's own scroll position (a scroll timeline), so it shows only while the table really
   overflows and needs no cover painted in the page colour (the sky is not one flat colour, so a cover
   showed as a dark band). Without scroll timelines: a fixed light on the right, on phones only. */
@property --more-l { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --more-r { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes table-more { from { --more-l: 0; --more-r: 1; } 6% { --more-l: 1; } 94% { --more-r: 1; } to { --more-l: 1; --more-r: 0; } }
.table-scroll {
  overflow-x: auto; margin: 6px 0 22px; border-top: 1px solid var(--line-3);
  background:
    radial-gradient(farthest-side at 0 50%, rgb(242 244 247 / calc(.16 * var(--more-l))), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(242 244 247 / calc(.16 * var(--more-r))), transparent) right / 12px 100% no-repeat;
}
@supports (animation-timeline: scroll()) {
  .table-scroll { animation: table-more linear both; animation-timeline: scroll(self inline); }
}
@supports not (animation-timeline: scroll()) {
  @media (max-width: 560px) { .table-scroll { --more-r: 1; } }
}
.doc table { width: 100%; min-width: 31rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.65; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.doc thead th { font: 600 var(--fs-ko-min)/1.4 var(--font-body); color: var(--silver-3); }
.doc tbody th { font-weight: 700; color: var(--silver); width: 8.5em; }
.doc td { color: var(--silver-2); }
/* A list of facts, each term beside its value (the Japanese 特定商取引法 notice): hairlines only, like the tables.
   On a phone the term sits above its value. */
.doc dl { margin: 0 0 1em; border-top: 1px solid var(--line-3); font-size: .9375rem; line-height: 1.75; }
.doc dl > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.doc dt { font-weight: 700; color: var(--silver); }
.doc dd { margin: 4px 0 0; overflow-wrap: break-word; text-wrap: pretty; }
@media (min-width: 680px) {
  .doc dl > div { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); column-gap: 24px; }
  .doc dd { margin: 0; }
}
blockquote.quote { margin: 4px 0 22px; padding: 2px 0 2px 22px; border-left: 1px solid var(--line-3);
  font: var(--fw-quote) 1.1875rem/1.6 var(--font-display); letter-spacing: -.005em; color: var(--silver); }
.doc .fine { margin-top: clamp(40px, 5vw, 56px); padding-top: 18px; border-top: 1px dashed var(--line-2); font-size: var(--fs-small); line-height: 1.75; color: var(--silver-3); }

.toc { margin: 0 0 clamp(36px, 5vw, 52px); padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.toc h2 { font: 600 var(--fs-ko-min)/1.4 var(--font-body); letter-spacing: 0; color: var(--silver-3); margin: 0 0 10px; padding: 0; border: 0; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; columns: 2; column-gap: 32px; }
.toc li { counter-increment: toc; break-inside: avoid; margin: 0; padding: 0; }
.toc a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); padding: 5px 0; font-size: .875rem; line-height: 1.5; color: var(--silver-2); text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 var(--fs-label)/1.75 var(--font-mono); color: var(--silver-3); }
.toc a:hover { color: var(--silver); }
@media (min-width: 1100px) {
  .doc:has(> .toc) { display: grid; grid-template-columns: 13.5rem minmax(0, var(--measure)); column-gap: clamp(48px, 6vw, 96px); max-width: none; }
  .doc:has(> .toc) > * { grid-column: 2; }
  .doc > .toc { grid-column: 1; grid-row: 1 / span 80; align-self: start; position: sticky; top: 104px;
    margin: 0; padding: 0 0 0 16px; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .toc ol { columns: 1; }
}

/* ───────────────────────── Japanese (/ja/) ─────────────────────────
 * The Japanese font stacks are in tokens.css (the app uses them too); the 日本語 in every page's language switch is
 * lang="ja" as well (base.css).
 */
h1:lang(ja), h2:lang(ja), h3:lang(ja), summary:lang(ja), dt:lang(ja) { word-break: auto-phrase; }   /* headings and terms break between phrases */

/* ───────────────────────── Language switch ─────────────────────────
 * 한국어 / English / 日本語 in the header, each name in its own language; the current one is silver with a short run of
 * thread, like the current page in .top-nav. From 1040px down the names become KO / EN / JA (the names stay for screen
 * readers); where the header is two rows (920px and below) the switch closes the menu row.
 */
.langs { display: flex; align-items: center; margin-right: calc(var(--s-3) - var(--s-6)); }   /* 12px from the app button */
.langs a {
  position: relative; padding: 12px 8px; font: 500 .8125rem/1 var(--font-body); letter-spacing: 0;
  color: var(--silver-2); text-decoration: none; white-space: nowrap;
}
.langs a + a::before { content: ""; position: absolute; left: 0; top: 50%; height: 12px; translate: 0 -50%; border-left: 1px solid var(--line-2); }
.langs a:hover, .langs a[aria-current="page"] { color: var(--silver); }
.langs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; border-top: 1.5px solid var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
}
.langs-code { display: none; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--track-latin); }
@media (max-width: 1040px) {     /* the header gets tight: codes, names for screen readers */
  .langs-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .langs-code { display: inline; }
}
@media (min-width: 921px) and (max-width: 1040px) {     /* still one row: a little less air between its parts */
  .site-top .top-inner { column-gap: var(--s-4); }
  .langs { margin-right: calc(var(--s-3) - var(--s-4)); }
}
/* The site menu has four items ("How it works · Pricing · Your files · Support"), so the site header turns into two rows
   at 920px, above the 760px where base.css does it for every header: the same rules, for .site-top only. */
@media (min-width: 761px) and (max-width: 920px) {
  .site-top .top-inner { flex-wrap: wrap; gap: 0 var(--s-3); min-height: 0; padding-top: 10px; }
  .site-top .top-inner > .brand { margin-right: auto; }
  .site-top .top-actions { order: 2; }
  .site-top .top-nav { order: 3; margin: 2px 0 0 -12px; overflow-x: auto; scrollbar-width: none; }
  .site-top .top-nav::-webkit-scrollbar { display: none; }
  .site-top .top-nav a { white-space: nowrap; padding-block: 12px; }
  .site-top .top-nav a:focus-visible { outline-offset: -4px; box-shadow: none; }
}
@media (max-width: 920px) {
  .site-top .top-inner:has(.langs)::after { content: ""; order: 2; flex: 0 0 100%; }   /* brand + button, then the menu row */
  .site-top .top-inner .top-nav { flex: 1 1 auto; min-width: 0; }
  .langs { order: 4; margin: 2px -8px 0 auto; }   /* where the menu fills its row, the switch gets a row of its own, at the right */
}
@media (max-width: 520px) {     /* the menu and KO / EN / JA share one row: Korean down to 360px, Japanese to 390px, English to 414px */
  .site-top .top-inner { column-gap: var(--s-2); }
  .site-top .top-inner .top-nav { margin-left: -5px; gap: 0; }
  .site-top .top-nav a { padding-inline: 5px; }
  .site-top .top-nav a[aria-current="page"]::after { left: 5px; right: 5px; }
  .langs { margin-right: -5px; }
  .langs a { padding-inline: 5px; }                    /* each code stays a 24px-wide target */
  .langs a[aria-current="page"]::after { left: 5px; right: 5px; }
  .langs-code { letter-spacing: .04em; }
}
@media (max-width: 359px) {     /* GD Logo is a wide face: below 360px the wordmark steps down so the app button keeps its row
                                   (359, not 350: a desktop scrollbar's gutter is in the window width the query sees) */
  .site-top .brand-word { font-size: 1rem; }
}

/* Business details filled in by tools/site/apply-business.mjs: a phone or registration number never breaks at
   its hyphens (a narrow footer split them mid-number). */
[data-v="biz.businessRegistrationNumber"], [data-v="biz.mailOrderReportNumber"] { white-space: nowrap; }

/* ───────────────────────── 404 ───────────────────────── */
.lost { display: grid; justify-items: start; gap: var(--s-4); padding-block: clamp(56px, 9vw, 120px) var(--sec-s); max-width: 52rem; }
.lost-mark { width: 120px; height: 120px; margin-bottom: var(--s-4); }
.lost h2 { margin-top: var(--s-6); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.lost .lead { margin: 0; }
.lost .cta-row { margin-top: var(--s-2); }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1080px) {
  .soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { width: min(70%, 420px); margin-top: var(--s-2); margin-bottom: 64px; }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .step:not(:last-child) .step-shot::after { display: none; }
  .step:not(:last-child)::before {      /* the thread down the gap */
    content: ""; position: absolute; left: 50%; top: calc(100% + 2px); height: calc(var(--gap) - 4px); translate: -50% 0;
    border-left: 1.6px solid var(--accent);
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 12px);
            mask: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 12px);
  }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .faq-side { position: static; }
  .sheet-body, .notes { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .sheet-col:first-child, .notes > div:first-child { padding-right: 0; }
  .sheet-col + .sheet-col, .notes > div + div { padding-left: 0; padding-top: var(--s-5); border-left: 0; border-top: 1px dashed var(--line-2); }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hangtags { grid-template-columns: minmax(0, 440px); gap: 14px; }
  .rail { display: none; }
  .rail-wrap { padding-top: 0; }
  .tag-hang { padding-top: 18px; }
  .tag-hang::before {     /* each tag gets its own short rod to hang from */
    content: ""; position: absolute; top: 12px; left: 50%; width: 120px; height: 6px; translate: -50% 0; border-radius: 3px; z-index: 4;
    background: linear-gradient(180deg, #F2F4F7 0%, #9AA1AD 45%, #3A3F48 100%); box-shadow: 0 5px 10px rgb(0 0 0 / .5);
  }
  .tag-string { height: 64px; margin-bottom: -40px; }
  .hangtag { --eyelet: 34px; --corner: 50px; padding-top: 56px; }   /* compact tags: both prices reach the first screen */
  .hangtag .ruler { display: none; }
  .tag-price { margin-top: var(--s-2); }
  .xlist { margin: var(--s-4) 0 var(--s-5); gap: 6px; }
  .price-head { padding-block: var(--s-6) var(--s-3); }
  .toc ol { columns: 1; }
}
@media (max-width: 600px) {
  .soon { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .hangtag { padding-inline: 22px; --tilt: -.7deg; }
  .tag-hang:nth-child(2) .hangtag { --tilt: .6deg; }
  .hangtags { padding-inline: 4px; }
  .faq .answer { padding-right: 0; }
  .hero-figure { width: min(72%, 420px); }
  .hero-tag { width: 190px; padding: 30px 14px 14px; }
  .sheet, .notes { padding: 22px 18px; }
  .contact { padding: 22px 20px; }
}

/* 「곧 오픈 예정」: a popover (no script) the start buttons open while the beta is not open yet (config.json soon). */
.soon-pop { margin: auto; width: min(92vw, 26rem); padding: var(--s-6) var(--s-6) var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg); text-align: center; box-shadow: var(--shadow-lift); }
.soon-pop::backdrop { background: rgb(5 6 8 / .72); }
.soon-pop .soon-title { margin: 0 0 var(--s-2); font: 700 var(--fs-h3)/1.3 var(--font-display); color: var(--silver); }
.soon-pop p { margin: 0; color: var(--fg-2); }
.soon-pop .btn { margin-top: var(--s-5); }