/* ==========================================================================
GOLMOK — DESIGN SYSTEM v1.0 "CORAL FIELD"
--------------------------------------------------------------------------
Principles (do not dilute):
1. CONVICTION — full-bleed, high-chroma colour fields. Never a timid grey
page with small white cards.
2. SCALE — headlines are 2–3x normal app size. weight 800–900,
letter-spacing -0.03em, line-height 0.95–1.05.
3. ROUND — 20–36px radii everywhere, buttons are 999px pills at
52–56px tall.
4. LEGIBLE — it is still an information service. Body copy stays
16px/1.6 with real contrast.
Fonts are loaded by index.html ( to Google Fonts):
Figtree 400..900 + Gothic A1 400..900
========================================================================== */
/* ==========================================================================
1. TOKENS
Brand constants never flip between themes. Semantic tokens do.
Light is the base. Dark is redefined in BOTH the media query and the
[data-theme="dark"] block — never colour-only-inside-a-media-query.
========================================================================== */
:root{
color-scheme: light;
/* ---- brand constants (identical in every theme) ---- */
--coral: #FF5A3C;
--coral-deep: #E23B1C;
--coral-tint: #FFE7DF;
--cream: #FFF6F0;
--ink: #17120F;
--forest: #14332B;
--forest-lift: #1D4A3D;
--lime: #D9F24B;
--lime-deep: #B9D22C;
/* ---- semantic surface / text ---- */
--bg: #FFF6F0; /* page ground */
--surface: #FFFFFF; /* raised card */
--surface-2: #FFEFE7; /* recessed / tinted well */
--fg: #17120F; /* primary text */
--fg-sub: #6A574C; /* secondary text */
--fg-mute: #968376; /* tertiary text, icon strokes */
--line: #F0E1D7; /* hairline */
--line-strong: #E2CEC1; /* visible border on inputs / ghost buttons */
--tint: #FFE7DF; /* warm coral wash: bands, wells, icon pads */
--tint-fg: #C3350F; /* text/icon on --tint */
--tint-line: transparent; /* pill edge for small --tint chips (dark only) */
/* ---- colour fields ---- */
--hero-bg: #FF5A3C; /* home hero + spot hero */
--hero-fg: #17120F; /* black headline on coral (mindtrip DNA) */
--hero-sub: rgba(23,18,15,.74);
--pop: #D9F24B; /* lime field (companions) */
--pop-fg: #17120F;
--panel: #14332B; /* dark field (district head, teaser, foot) */
--panel-fg: #F4EDE7;
--panel-sub: rgba(244,237,231,.70);
--panel-line: rgba(244,237,231,.17);
--panel-pop: #D9F24B; /* accent inside a dark field */
/* ---- interactive ---- */
--accent: #FF5A3C; /* fills, dots, rules */
--accent-ink: #C3350F; /* coral as TEXT on light ground (AA) */
--btn-fill: #17120F; /* .btn-primary background */
--btn-fill-fg: #FFF6F0;
--focus: #17120F;
/* ---- status ---- */
--ok: #1B7A55;
--ok-soft: #E3F2E9;
--warn: #A65209;
--warn-soft: #FCE9D6;
/* ---- elevation (warm shadows, never grey) ---- */
--sh-1: 0 1px 2px rgba(60,30,18,.05), 0 4px 14px rgba(60,30,18,.05);
--sh-2: 0 2px 6px rgba(60,30,18,.06), 0 16px 38px rgba(60,30,18,.10);
--sh-3: 0 4px 12px rgba(60,30,18,.08), 0 28px 64px rgba(60,30,18,.14);
--sh-pop: 0 10px 26px rgba(226,59,28,.30);
/* ---- radius scale ---- */
--r-xs: 10px;
--r-sm: 14px;
--r-md: 20px;
--r-lg: 28px;
--r-xl: 36px;
--r-2xl: 48px;
--r-pill: 999px;
/* ---- space scale ---- */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--s9: 96px;
/* ---- type scale ---- */
--fs-display: clamp(46px, 13.5vw, 92px); /* .hero h1 */
--fs-h1: clamp(34px, 9vw, 58px); /* page titles */
--fs-h2: clamp(28px, 7vw, 42px); /* .sec-head h2 */
--fs-h3: clamp(19px, 4.6vw, 23px); /* card titles */
--fs-lead: clamp(16px, 4.2vw, 20px); /* hero sub, story */
--fs-body: 16px;
--fs-sm: 14px;
--fs-xs: 12.5px;
--fs-kicker: 12px;
/* ---- layout ---- */
--wrap: 760px;
--gutter: 20px;
--header-h: 72px;
--font-ui: 'Figtree','Gothic A1',-apple-system,BlinkMacSystemFont,'Segoe UI',
'Apple SD Gothic Neo','Malgun Gothic','Hiragino Sans','Yu Gothic UI',
'PingFang SC','Microsoft YaHei',sans-serif;
}
/* ---- dark: system preference (unless the user forced light) ---- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme: dark;
--bg: #0E211C;
--surface: #16332B;
--surface-2: #1C4034;
--fg: #F4EDE7;
--fg-sub: #AEC0B7;
--fg-mute: #86998F;
--line: #23473B;
--line-strong: #2F5A4A;
--tint: #3B2119;
--tint-fg: #FFA48E;
--tint-line: rgba(255,164,142,.50); /* = --tint-fg at 50% */
--hero-bg: #FF5A3C; /* chroma held, never muddied */
--hero-fg: #17120F;
--hero-sub: rgba(23,18,15,.76);
--pop: #D9F24B;
--pop-fg: #17120F;
--panel: #1D4A3D; /* lifts off the dark ground */
--panel-fg: #F4EDE7;
--panel-sub: rgba(244,237,231,.72);
--panel-line: rgba(244,237,231,.20);
--panel-pop: #D9F24B;
--accent: #FF6E52;
--accent-ink: #FFA48E;
--btn-fill: #F4EDE7;
--btn-fill-fg: #14332B;
--focus: #D9F24B;
--ok: #63C79B;
--ok-soft: #16362A;
--warn: #F0A868;
--warn-soft: #3A2A18;
--sh-1: 0 1px 2px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.30);
--sh-2: 0 2px 6px rgba(0,0,0,.36), 0 16px 38px rgba(0,0,0,.42);
--sh-3: 0 4px 12px rgba(0,0,0,.40), 0 28px 64px rgba(0,0,0,.50);
--sh-pop: 0 10px 26px rgba(255,90,60,.26);
}
}
/* ---- dark: explicit user toggle (must win in both directions) ---- */
:root[data-theme="dark"]{
color-scheme: dark;
--bg: #0E211C;
--surface: #16332B;
--surface-2: #1C4034;
--fg: #F4EDE7;
--fg-sub: #AEC0B7;
--fg-mute: #86998F;
--line: #23473B;
--line-strong: #2F5A4A;
--tint: #3B2119;
--tint-fg: #FFA48E;
--tint-line: rgba(255,164,142,.50);
--hero-bg: #FF5A3C;
--hero-fg: #17120F;
--hero-sub: rgba(23,18,15,.76);
--pop: #D9F24B;
--pop-fg: #17120F;
--panel: #1D4A3D;
--panel-fg: #F4EDE7;
--panel-sub: rgba(244,237,231,.72);
--panel-line: rgba(244,237,231,.20);
--panel-pop: #D9F24B;
--accent: #FF6E52;
--accent-ink: #FFA48E;
--btn-fill: #F4EDE7;
--btn-fill-fg: #14332B;
--focus: #D9F24B;
--ok: #63C79B;
--ok-soft: #16362A;
--warn: #F0A868;
--warn-soft: #3A2A18;
--sh-1: 0 1px 2px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.30);
--sh-2: 0 2px 6px rgba(0,0,0,.36), 0 16px 38px rgba(0,0,0,.42);
--sh-3: 0 4px 12px rgba(0,0,0,.40), 0 28px 64px rgba(0,0,0,.50);
--sh-pop: 0 10px 26px rgba(255,90,60,.26);
}
/* ==========================================================================
2. BASE
========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
/* v0.7: no global scroll-behavior:smooth. With a path router every screen
change calls scrollTo() (top for a new screen, the old spot on Back); a
global smooth value turned that into a visible glide over the NEW page.
In-page jumps ([data-scroll], form errors) still glide — app.js passes
behavior:'smooth' itself and drops it under prefers-reduced-motion. */
html{
-webkit-text-size-adjust:100%;
overflow-x:hidden; /* belt-and-braces: no page-level h-scroll */
}
body{
margin:0;
background:var(--bg); /* explicit — never inherit the host ground */
color:var(--fg);
font-family:var(--font-ui);
font-size:var(--fs-body);
line-height:1.6;
letter-spacing:-.006em;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-synthesis-weight:none;
}
h1,h2,h3,h4{
margin:0;
font-weight:800;
letter-spacing:-.03em;
line-height:1.02;
text-wrap:balance;
word-break:keep-all; /* Korean: never break mid-word */
overflow-wrap:break-word; /* English: still break monster words */
}
h1{ font-weight:900 }
p{ margin:0 }
ol,ul{ margin:0; padding:0 }
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{
font:inherit; color:inherit; letter-spacing:inherit;
background:none; border:0; padding:0; margin:0;
cursor:pointer; text-align:left;
}
/* Card links. The navigation cards (.dcard .spot .sib-card .saved-item .ccard) are real
links (new tab, copy link, crawlable), not buttons. a{} above already gives
inherited font/colour and no underline; these lines keep the rest of the old button box:
left-aligned text, and for the two cards without their own display (.sib-card,
.saved-item) content centred vertically when a grid row or min-height makes the card
taller than its content — what a block-level