/* ============================================================
지대모 — 지적 대화를 위한 모임
Design System / Shared Tokens
============================================================
v2.0 — Pretendard Edition
Synthesized from the live landing page (Pretendard system).
Drop-in via .
============================================================ */
/* ── Pretendard variable (KR display + body) ─────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
/* ── DM Mono (technical labels, dates, meta) ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');
:root {
color-scheme: dark;
/* ── SURFACE ──────────────────────────────────── */
--bg: #0d0d0f; /* primary canvas */
--bg-2: #131318; /* raised surface */
--bg-3: #17171c; /* card / inset surface */
--bg-4: #1c1c22; /* hover surface */
/* ── INK ──────────────────────────────────────── */
--text: #ece7dc; /* primary ink, warm cream */
--text-dim: #8d8478; /* body / dim ink */
--text-muted: #4a4540; /* tertiary / labels */
/* ── PRIMARY: GOLD ────────────────────────────── */
--gold: #c9a96e; /* canonical brand gold */
--gold-light: #e8c98a;
--gold-dim: #7a6030;
--gold-tint: rgba(201,169,110,0.08);
/* ── SECONDARY ACCENTS ────────────────────────── */
--rust: #b84d35; /* heat, friction */
--rust-light: #d4614a;
--rust-tint: rgba(184, 77, 53, 0.08);
--teal: #5a9a8e; /* depth, dialogue */
--teal-light: #7fb8ad;
--teal-tint: rgba( 90,154,142, 0.08);
--blue: #6a88b5; /* analytic */
--blue-light: #8aa6cf;
--blue-tint: rgba(106,136,181, 0.08);
--purple: #7c5c9c; /* critique */
--purple-light: #a085c0;
--purple-tint: rgba(124, 92,156, 0.08);
/* ── LINES ────────────────────────────────────── */
--line: rgba(201,169,110,0.20);
--line-dim: rgba(255,255,255,0.06);
--line-faint: rgba(255,255,255,0.03);
/* ── CHROME TOKENS (theme-aware nav / overlays) ── */
--nav-bg-fade: rgba(13,13,15,0.90);
--nav-bg-solid: rgba(13,13,15,0.95);
--grid-line: rgba(255,255,255,0.03);
--selection-bg: rgba(201,169,110,0.35);
--hero-glow-1: rgba(201,169,110,0.10);
--hero-glow-2: rgba(184, 77, 53,0.06);
--hero-glow-3: rgba( 90,154,142,0.05);
/* ── TYPE FAMILIES ────────────────────────────── */
--font-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif;
--font-mono: 'DM Mono', ui-monospace, "SF Mono", Menlo, monospace;
/* Back-compat aliases — older pages may still reference these names */
--font-serif-kr: var(--font-display);
--font-serif-en: var(--font-display);
--font-sans: var(--font-display);
/* ── RHYTHM ───────────────────────────────────── */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--space-8: 128px;
/* ── ELEVATION ────────────────────────────────── */
--shadow-1: 0 8px 24px rgba(0,0,0,0.35);
--shadow-2: 0 20px 48px rgba(0,0,0,0.55);
--shadow-gold: 0 0 32px rgba(201,169,110,0.18);
}
/* ============================================================
LIGHT THEME OVERRIDES
----------------------------------------------------------
Applied when . The theme controller
in system/theme.js sets this attribute based on user choice
(light / dark / system).
Palette intent: warm parchment + ink, matching the dark
theme's gold-cream personality. Gold is darkened to #8b6d2c
so it still reads as "gold" but passes contrast on cream bg.
The `*-light` accent variants flip semantics on light mode —
they become the DARKER, higher-contrast version (used for
text on tinted chips).
============================================================ */
:root[data-theme="light"] {
color-scheme: light;
/* SURFACE — warm cream stack */
--bg: #f5f0e4;
--bg-2: #ece5d3;
--bg-3: #e3dac2;
--bg-4: #d8cdb0;
/* INK */
--text: #1a1610;
--text-dim: #5a5247;
--text-muted: #8d8478;
/* GOLD — darkened for AA on cream */
--gold: #8b6d2c;
--gold-light: #6b5320; /* darker = higher contrast for chip text */
--gold-dim: #c9a96e; /* lighter, decorative */
--gold-tint: rgba(139,109,44,0.10);
/* ACCENTS — darkened to read on cream */
--rust: #a13e26;
--rust-light: #7a2d18;
--rust-tint: rgba(161,62,38,0.08);
--teal: #3d7d72;
--teal-light: #2c5e54;
--teal-tint: rgba(61,125,114,0.08);
--blue: #4c6da0;
--blue-light: #354f78;
--blue-tint: rgba(76,109,160,0.08);
--purple: #5f4282;
--purple-light: #432e5b;
--purple-tint: rgba(95,66,130,0.08);
/* LINES — dark hairlines on light bg */
--line: rgba(139,109,44,0.30);
--line-dim: rgba(26,22,16,0.12);
--line-faint: rgba(26,22,16,0.07);
/* CHROME — flip the dark nav fade to a cream fade */
--nav-bg-fade: rgba(245,240,228,0.90);
--nav-bg-solid: rgba(245,240,228,0.95);
--grid-line: rgba(26,22,16,0.05);
--selection-bg: rgba(139,109,44,0.30);
--hero-glow-1: rgba(139,109,44,0.12);
--hero-glow-2: rgba(161,62,38,0.08);
--hero-glow-3: rgba(61,125,114,0.06);
/* ELEVATION — softer shadows on light */
--shadow-1: 0 6px 20px rgba(30,22,8,0.10);
--shadow-2: 0 16px 40px rgba(30,22,8,0.16);
--shadow-gold: 0 0 28px rgba(139,109,44,0.20);
}
/* ============================================================
RESET + BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background: var(--bg); }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-display);
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
word-break: keep-all;
transition: background-color 0.4s ease, color 0.4s ease;
}
::selection { background: var(--selection-bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }
/* ============================================================
UTILITIES — colorways for accent components
============================================================ */
.is-gold { --c: var(--gold); --c-light: var(--gold-light); --c-tint: var(--gold-tint); }
.is-rust { --c: var(--rust); --c-light: var(--rust-light); --c-tint: var(--rust-tint); }
.is-teal { --c: var(--teal); --c-light: var(--teal-light); --c-tint: var(--teal-tint); }
.is-blue { --c: var(--blue); --c-light: var(--blue-light); --c-tint: var(--blue-tint); }
.is-purple { --c: var(--purple); --c-light: var(--purple-light); --c-tint: var(--purple-tint); }
/* ============================================================
TYPE — canonical scale (Pretendard-only)
----------------------------------------------------------
Hierarchy is built from weight + tracking, not family swaps.
Use .accent (span) inside headings for gold-coloured emphasis
— the old `` italic pattern is retired.
============================================================ */
.eyebrow {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
font-weight: 400;
}
.display {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(3rem, 8vw, 7.5rem);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--text);
}
.display .accent { color: var(--gold); }
.h-section {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 3.5rem);
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--text);
}
.h-section .accent { color: var(--gold); }
.lede {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
font-weight: 500;
line-height: 1.8;
color: var(--text-dim);
letter-spacing: -0.005em;
}
.prose {
font-family: var(--font-display);
font-size: 0.95rem;
line-height: 1.95;
color: var(--text-dim);
font-weight: 400;
}
.prose strong { color: var(--text); font-weight: 600; }
.prose .accent { color: var(--gold); font-weight: 600; }
.label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 400;
}
/* Back-compat: pages authored against v1 used for emphasis.
Render it as gold weight-emphasis, not italic. */
.display em, .h-section em, .prose em {
font-style: normal;
color: var(--gold);
font-weight: inherit;
}
/* ============================================================
ATOMS — chips, dividers, scroll progress
============================================================ */
.chip {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: 2px;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 500;
background: var(--c-tint, var(--gold-tint));
color: var(--c-light, var(--gold-light));
border: 1px solid color-mix(in oklab, var(--c, var(--gold)) 25%, transparent);
letter-spacing: -0.005em;
}
.rule {
height: 1px;
border: 0;
background: linear-gradient(to right, transparent, var(--line), transparent);
margin: var(--space-6) 0;
}
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));
z-index: 9999;
transition: width 0.1s linear;
}
/* ============================================================
MOLECULES — section header, finding card, pull quote, callout
============================================================ */
.section-tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
font-weight: 400;
}
.section-tag::before {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
}
.finding-card {
background: var(--bg-2);
border: 1px solid var(--line-dim);
border-radius: 2px;
padding: 28px;
transition: transform 0.4s ease, border-color 0.4s ease;
position: relative;
overflow: hidden;
}
.finding-card::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0%; height: 1px;
background: var(--c, var(--gold));
transition: width 0.4s ease;
}
.finding-card:hover {
transform: translateY(-3px);
border-color: var(--line);
}
.finding-card:hover::after { width: 100%; }
.finding-card h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.45;
color: var(--text);
margin-bottom: 10px;
letter-spacing: -0.015em;
}
.finding-card p {
font-family: var(--font-display);
font-size: 0.85rem;
line-height: 1.8;
color: var(--text-dim);
font-weight: 400;
}
.pull-quote {
margin: 56px 0;
padding: 36px 44px;
border-left: 3px solid var(--c, var(--gold));
background: linear-gradient(135deg, var(--c-tint, var(--gold-tint)), transparent);
position: relative;
}
.pull-quote::before {
content: '\201C';
font-family: var(--font-display);
font-weight: 900;
font-size: 6rem;
line-height: 0;
color: color-mix(in oklab, var(--c, var(--gold)) 25%, transparent);
position: absolute;
top: 44px;
left: 18px;
}
.pull-quote p {
font-family: var(--font-display);
font-size: 1.2rem;
line-height: 1.75;
color: var(--text);
font-style: normal;
font-weight: 500;
padding-left: 44px;
letter-spacing: -0.01em;
}
.callout {
background: linear-gradient(135deg, var(--gold-tint), rgba(184,77,53,0.04));
border: 1px solid rgba(201,169,110,0.2);
border-radius: 2px;
padding: 28px 32px;
margin: 32px 0;
}
.callout .label { color: var(--gold); }
.callout p {
font-family: var(--font-display);
font-size: 0.95rem;
line-height: 1.85;
color: var(--text);
margin-top: 10px;
font-weight: 400;
}
/* ============================================================
GRIDS
============================================================ */
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-auto { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
@media (max-width: 900px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.grid-4 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
}
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; } to { opacity: 1; }
}
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }