/* ============================================================================
* Beyond Village — Web Foundation Stylesheet (brand.css)
* Shared design foundation for index / apply / mice pages.
* Derived from system/visual/tokens.css + tokens.json + visual_system.md (v2.1.0)
*
* SINGLE SOURCE OF TRUTH:
* /00 Branding/system/visual/tokens.css (the :root block below is copied verbatim)
* /00 Branding/system/visual/tokens.json (machine-readable rules)
* /00 Branding/system/visual/visual_system.md
*
* HARD RULES (per SYSTEM.md §8 / tokens.json#rules_global):
* - Never invent colors / fonts / spacing. Use the :root tokens ONLY.
* - River Teal (#3E8E8C) is a 10%-MAX accent. Never a full-bleed background.
* - Playfair Display = ENGLISH ONLY (.sig). Korean does not render.
* - Body text = Noto Sans KR / Pretendard. Never Playfair for body.
* - "Hairline rules over color blocks" · flat + crisp · shadows only on hover.
*
* REQUIRED FONT CDN LINKS — paste into each page (per tokens.css header):
*
*
* 1) Pretendard Variable (Korean display):
*
* 2) Noto Sans KR (Korean body) + 3) Playfair Display (EN signature) + 4) JetBrains Mono (mono meta):
*
* ============================================================================ */
/* ---------------------------------------------------------------------------
* 1. DESIGN TOKENS — copied verbatim from tokens.css :root (v2.1.0, 2026-05-28)
* DO NOT EDIT VALUES HERE. Edit tokens.json upstream + re-sync.
* ------------------------------------------------------------------------- */
:root {
/* color · base */
--bv-green: #5C6E57;
--bv-beige: #D9CBB6;
--bv-mist: #C8D0C7;
--bv-clay: #7B6A55;
--bv-charcoal: #2A2A2A;
/* color · accent (use sparingly, max 10% area) */
--bv-teal: #3E8E8C;
/* color · neutral / surfaces */
--bv-paper: #FBF8F2;
--bv-paper-2: #F4EEDF;
--bv-ink: #1A1A1A;
--bv-ink-2: rgba(26, 26, 26, 0.62);
--bv-ink-3: rgba(26, 26, 26, 0.38);
--bv-rule: rgba(26, 26, 26, 0.10);
/* color · functional */
--bv-warn: #B4664B;
--bv-link: var(--bv-teal);
/* typography · families */
--bv-font-display: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
--bv-font-body: 'Noto Sans KR', 'Pretendard', system-ui, sans-serif;
--bv-font-sig: 'Playfair Display', Georgia, serif; /* ENGLISH ONLY */
--bv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* typography · type scale (web defaults; for slides use cqw variant) */
--bv-fz-2xl: clamp(72px, 9vw, 144px);
--bv-fz-xl: clamp(56px, 6.5vw, 96px);
--bv-fz-l: clamp(40px, 4.5vw, 64px);
--bv-fz-m: clamp(28px, 3vw, 40px);
--bv-fz-title: clamp(20px, 2vw, 28px);
--bv-fz-lead: 19px;
--bv-fz-body: 17px;
--bv-fz-caption: 14px;
--bv-fz-micro: 12px;
--bv-lh-display: 0.98;
--bv-lh-title: 1.3;
--bv-lh-body: 1.65;
/* spacing scale */
--bv-sp-1: 4px;
--bv-sp-2: 8px;
--bv-sp-3: 12px;
--bv-sp-4: 16px;
--bv-sp-5: 24px;
--bv-sp-6: 32px;
--bv-sp-7: 48px;
--bv-sp-8: 64px;
--bv-sp-9: 96px;
/* radius */
--bv-radius-sm: 4px;
--bv-radius-md: 6px;
--bv-radius-lg: 12px;
--bv-radius-round: 999px;
/* layout */
--bv-maxw-content: 1200px;
--bv-maxw-narrow: 720px;
}
/* ---------------------------------------------------------------------------
* 1b. DERIVED HELPERS — compositions of existing tokens only (no new primitives).
* River-teal tints reuse the exact #3E8E8C = rgb(62,142,140) from --bv-teal.
* (Matches Brand Book v2 --teal-soft / --teal-mid usage.)
* ------------------------------------------------------------------------- */
:root {
--bv-teal-soft: rgba(62, 142, 140, 0.10); /* faint accent wash — same hue as --bv-teal */
--bv-teal-mid: rgba(62, 142, 140, 0.32); /* ripple / focus ring — same hue as --bv-teal */
--bv-nav-h: 72px; /* fixed nav height (layout constant) */
--bv-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* calm motion, per visual_system §7 */
}
/* ---------------------------------------------------------------------------
* 2. GLOBAL RESET + BASE
* ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
scroll-padding-top: var(--bv-nav-h); /* anchor offset under fixed nav */
}
body {
font-family: var(--bv-font-body);
font-weight: 400;
font-size: var(--bv-fz-body);
line-height: var(--bv-lh-body);
color: var(--bv-ink);
background: var(--bv-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
word-break: keep-all; /* CJK: 단어 중간에서 줄바꿈 방지 (한국어 가독성) */
overflow-wrap: break-word; /* 아주 긴 영문/URL 토큰만 안전하게 분리 */
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--bv-link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--bv-teal); outline-offset: 3px; }
::selection { background: var(--bv-teal-mid); color: var(--bv-ink); }
/* ---------------------------------------------------------------------------
* 3. LAYOUT CONTAINERS
* ------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--bv-maxw-content);
margin-inline: auto;
padding-inline: var(--bv-sp-6);
}
.container-narrow {
width: 100%;
max-width: var(--bv-maxw-narrow);
margin-inline: auto;
padding-inline: var(--bv-sp-6);
}
/* SECTION — vertical rhythm = sp-9 (96px) top/bottom */
.section { padding-block: var(--bv-sp-9); }
.section--tight { padding-block: var(--bv-sp-8); }
.section--paper-2 { background: var(--bv-paper-2); } /* deeper warm surface */
.section--mist { background: var(--bv-mist); } /* secondary bg (sparingly) */
/* hairline section divider — "rules over color blocks" (visual_system §6) */
.rule { border: 0; border-top: 1px solid var(--bv-rule); width: 100%; }
.rule--ink { border-top-color: var(--bv-ink); }
/* ---------------------------------------------------------------------------
* 4. NAV — transparent over hero, paper + blur on scroll
* Toggle the scrolled state by adding .is-scrolled via small JS:
* addEventListener('scroll', () => nav.classList.toggle('is-scrolled', scrollY > 24));
* ------------------------------------------------------------------------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--bv-nav-h);
display: flex;
align-items: center;
background: transparent;
border-bottom: 1px solid transparent;
transition: background .35s var(--bv-ease), border-color .35s var(--bv-ease),
backdrop-filter .35s var(--bv-ease);
}
.nav.is-scrolled {
background: rgba(251, 248, 242, 0.82); /* --bv-paper @ 82% */
border-bottom-color: var(--bv-rule);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.nav__inner {
width: 100%;
max-width: var(--bv-maxw-content);
margin-inline: auto;
padding-inline: var(--bv-sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bv-sp-5);
}
.nav__logo { display: inline-flex; align-items: center; gap: var(--bv-sp-3); }
.nav__logo img { height: 36px; width: auto; }
.nav__logo .nav__wordmark {
font-family: var(--bv-font-display);
font-weight: 800;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--bv-ink);
}
.nav__menu { display: flex; align-items: center; gap: var(--bv-sp-6); }
.nav__link {
font-family: var(--bv-font-body);
font-weight: 500;
font-size: 15px;
color: var(--bv-ink-2);
text-decoration: none;
transition: color .2s var(--bv-ease);
}
.nav__link:hover { color: var(--bv-ink); text-decoration: none; }
.nav__link.is-active { color: var(--bv-ink); }
/* On a dark/photo hero before scroll, opt nav text to paper with this modifier on .nav */
.nav--on-dark:not(.is-scrolled) .nav__wordmark,
.nav--on-dark:not(.is-scrolled) .nav__link { color: var(--bv-paper); }
.nav--on-dark:not(.is-scrolled) .nav__link:hover { color: #fff; }
/* hamburger (mobile) — hidden on desktop */
.nav__toggle { display: none; width: 28px; height: 20px; position: relative; }
.nav__toggle span {
position: absolute; left: 0; right: 0; height: 2px; background: var(--bv-ink);
transition: transform .3s var(--bv-ease), opacity .3s var(--bv-ease);
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 9px; }
.nav__toggle span:nth-child(3) { top: 18px; }
.nav--on-dark:not(.is-scrolled) .nav__toggle span { background: var(--bv-paper); }
/* ---------------------------------------------------------------------------
* 5. TYPOGRAPHY — display titles, lead, signature, eyebrow, mono
* Hierarchy via weight + size + whitespace (NOT mixing families). §visual_system 2
* ------------------------------------------------------------------------- */
.h1 {
font-family: var(--bv-font-display);
font-weight: 800;
font-size: var(--bv-fz-xl);
line-height: var(--bv-lh-display);
letter-spacing: -0.022em;
color: var(--bv-ink);
}
.h2 {
font-family: var(--bv-font-display);
font-weight: 700;
font-size: var(--bv-fz-l);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--bv-ink);
}
.h3 {
font-family: var(--bv-font-display);
font-weight: 700;
font-size: var(--bv-fz-m);
line-height: 1.18;
letter-spacing: -0.005em;
color: var(--bv-ink);
}
.display { /* hero-scale — use once per page max (per tokens.json display_2xl note) */
font-family: var(--bv-font-display);
font-weight: 900;
font-size: var(--bv-fz-2xl);
line-height: var(--bv-lh-display);
letter-spacing: -0.028em;
color: var(--bv-ink);
}
.lead {
font-family: var(--bv-font-body);
font-weight: 400;
font-size: var(--bv-fz-lead);
line-height: var(--bv-lh-body);
color: var(--bv-ink-2);
max-width: 52ch;
}
.body { font-size: var(--bv-fz-body); line-height: var(--bv-lh-body); color: var(--bv-ink-2); }
.caption { font-size: var(--bv-fz-caption); line-height: 1.55; color: var(--bv-ink-2); }
/* EYEBROW — mono, uppercase, tracked, tertiary ink (the recurring section kicker) */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--bv-sp-2);
font-family: var(--bv-font-mono);
font-weight: 600;
font-size: var(--bv-fz-micro);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bv-ink-3);
}
.eyebrow::before { /* optional teal dot — the brand's signature accent point */
content: "";
width: 6px; height: 6px;
border-radius: var(--bv-radius-round);
background: var(--bv-teal);
flex: none;
}
.eyebrow--plain::before { content: none; }
/* SIGNATURE — Playfair Italic, teal, ENGLISH ONLY */
.sig {
font-family: var(--bv-font-sig);
font-style: italic;
font-weight: 400;
color: var(--bv-teal);
line-height: 1.2;
}
/* mono utility (slide numbers, labels, tabular figures) */
.mono { font-family: var(--bv-font-mono); font-variant-numeric: tabular-nums; }
/* teal underline mark — the brand's recurring hand-drawn river underline on a word */
.teal-mark { position: relative; display: inline-block; color: var(--bv-teal); }
.teal-mark::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -0.12em;
height: 0.18em;
background: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%;
}
/* color text helpers (token-bound) */
.t-ink { color: var(--bv-ink); }
.t-ink-2 { color: var(--bv-ink-2); }
.t-ink-3 { color: var(--bv-ink-3); }
.t-green { color: var(--bv-green); }
.t-teal { color: var(--bv-teal); }
.t-clay { color: var(--bv-clay); }
/* ---------------------------------------------------------------------------
* 6. BUTTONS — pill (round). primary = green→teal hover · secondary outline · ghost
* ------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bv-sp-2);
font-family: var(--bv-font-body);
font-weight: 500;
font-size: 15px;
line-height: 1;
padding: var(--bv-sp-4) var(--bv-sp-6);
border-radius: var(--bv-radius-round);
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
transition: background .25s var(--bv-ease), color .25s var(--bv-ease),
border-color .25s var(--bv-ease), transform .2s var(--bv-ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--bv-green);
color: var(--bv-paper);
border-color: var(--bv-green);
}
.btn-primary:hover { background: var(--bv-teal); border-color: var(--bv-teal); color: var(--bv-paper); }
.btn-secondary {
background: transparent;
color: var(--bv-ink);
border-color: var(--bv-ink);
}
.btn-secondary:hover { background: var(--bv-ink); color: var(--bv-paper); }
.btn-ghost {
background: transparent;
color: var(--bv-ink-2);
border-color: transparent;
padding-inline: var(--bv-sp-4);
}
.btn-ghost:hover { color: var(--bv-ink); background: var(--bv-teal-soft); }
/* on-dark variant (over photo hero) */
.btn-secondary.on-dark { color: var(--bv-paper); border-color: rgba(251,248,242,0.7); }
.btn-secondary.on-dark:hover { background: var(--bv-paper); color: var(--bv-ink); }
.btn-sm { padding: var(--bv-sp-3) var(--bv-sp-5); font-size: 14px; }
.btn-lg { padding: var(--bv-sp-4) var(--bv-sp-7); font-size: 16px; }
/* arrow affordance */
.btn .btn__arrow { transition: transform .25s var(--bv-ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
/* ---------------------------------------------------------------------------
* 7. CARD — round lg, hairline, lift on hover (shadow ONLY on hover, §elevation)
* ------------------------------------------------------------------------- */
.card {
background: var(--bv-paper);
border: 1px solid var(--bv-rule);
border-radius: var(--bv-radius-lg);
overflow: hidden;
transition: transform .3s var(--bv-ease), box-shadow .3s var(--bv-ease),
border-color .3s var(--bv-ease);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -18px rgba(42, 42, 42, 0.28); /* charcoal-based, hover only */
border-color: transparent;
}
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bv-mist); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--bv-ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--bv-sp-6); display: flex; flex-direction: column; gap: var(--bv-sp-3); }
.card__title { font-family: var(--bv-font-display); font-weight: 700; font-size: var(--bv-fz-title); line-height: 1.25; color: var(--bv-ink); }
.card__text { font-size: var(--bv-fz-caption); line-height: 1.6; color: var(--bv-ink-2); }
/* flat card variant (no media) — leans on tonal surface + hairline */
.card--flat { background: var(--bv-paper-2); border-color: transparent; }
.card--flat:hover { transform: none; box-shadow: none; }
/* ---------------------------------------------------------------------------
* 8. BADGE / CHIP
* ------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--bv-sp-2);
font-family: var(--bv-font-mono);
font-weight: 600;
font-size: var(--bv-fz-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bv-teal);
background: var(--bv-teal-soft);
padding: var(--bv-sp-2) var(--bv-sp-3);
border-radius: var(--bv-radius-sm);
}
.badge--clay { color: var(--bv-clay); background: rgba(123,106,85,0.10); }
.badge--green { color: var(--bv-green); background: rgba(92,110,87,0.12); }
.chip {
display: inline-flex;
align-items: center;
gap: var(--bv-sp-2);
font-family: var(--bv-font-body);
font-weight: 500;
font-size: 14px;
color: var(--bv-ink-2);
background: transparent;
border: 1px solid var(--bv-rule);
padding: var(--bv-sp-2) var(--bv-sp-4);
border-radius: var(--bv-radius-round);
transition: border-color .2s var(--bv-ease), color .2s var(--bv-ease), background .2s var(--bv-ease);
}
.chip:hover, .chip.is-active { color: var(--bv-ink); border-color: var(--bv-teal); }
.chip.is-active { background: var(--bv-teal-soft); }
/* ---------------------------------------------------------------------------
* 9. FORM CONTROLS — label, input/select/textarea, green focus ring, checkbox-item
* ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--bv-sp-2); margin-bottom: var(--bv-sp-5); }
.label {
font-family: var(--bv-font-body);
font-weight: 500;
font-size: 14px;
color: var(--bv-ink);
}
.label .req { color: var(--bv-warn); margin-left: 2px; }
.field__hint { font-size: 13px; color: var(--bv-ink-3); }
.input, .select, .textarea {
font-family: var(--bv-font-body);
font-size: var(--bv-fz-body);
line-height: 1.5;
color: var(--bv-ink);
background: var(--bv-paper);
border: 1px solid var(--bv-rule);
border-radius: var(--bv-radius-md);
padding: var(--bv-sp-3) var(--bv-sp-4);
width: 100%;
transition: border-color .2s var(--bv-ease), box-shadow .2s var(--bv-ease);
-webkit-appearance: none;
appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--bv-ink-3); }
.textarea { min-height: 140px; resize: vertical; }
/* green focus ring (per brief) */
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--bv-green);
box-shadow: 0 0 0 3px rgba(92, 110, 87, 0.18); /* --bv-green ring */
}
/* select chevron (mono, no extra asset) */
.select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--bv-sp-4) center;
padding-right: var(--bv-sp-7);
}
/* checkbox / radio item — clickable row */
.checkbox-item {
display: flex;
align-items: flex-start;
gap: var(--bv-sp-3);
padding: var(--bv-sp-3) var(--bv-sp-4);
border: 1px solid var(--bv-rule);
border-radius: var(--bv-radius-md);
cursor: pointer;
transition: border-color .2s var(--bv-ease), background .2s var(--bv-ease);
}
.checkbox-item:hover { border-color: var(--bv-teal); }
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] {
accent-color: var(--bv-green);
width: 18px; height: 18px;
margin-top: 2px;
flex: none;
}
.checkbox-item:has(input:checked) { border-color: var(--bv-green); background: var(--bv-teal-soft); }
.checkbox-item__label { font-size: 15px; line-height: 1.45; color: var(--bv-ink); }
.checkbox-item__label small { display: block; font-size: 13px; color: var(--bv-ink-2); margin-top: 2px; }
/* form layout helpers */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bv-sp-5); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--bv-sp-3); }
/* ---------------------------------------------------------------------------
* 10. MOTIF WATERMARK — large faint background motif (decorative extraction)
* Place a motif ![]()
or inline SVG inside .motif-bg; set --motif-color.
* Keep River Teal usage <=10% of any composition.
* ------------------------------------------------------------------------- */
.motif-bg { position: relative; overflow: hidden; }
.motif-bg > .motif-bg__art {
position: absolute;
z-index: 0;
pointer-events: none;
color: var(--bv-ink); /* SVGs use currentColor */
opacity: 0.05; /* faint watermark */
width: 40%;
max-width: 520px;
}
.motif-bg > .motif-bg__art--teal { color: var(--bv-teal); opacity: 0.10; } /* accent, capped */
.motif-bg > .motif-bg__art--tr { top: -2%; right: -4%; }
.motif-bg > .motif-bg__art--bl { bottom: -6%; left: -4%; }
.motif-bg > :not(.motif-bg__art) { position: relative; z-index: 1; }
/* river footer divider — the recurring wave + teal progress dot (Brand Book footer) */
.river-rule { position: relative; height: 16px; width: 100%; color: var(--bv-ink-3); }
.river-rule svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* ---------------------------------------------------------------------------
* 11. HERO — full-viewport photo hero with dark scrim (text on photo = paper)
* Use sparingly; pair with .nav--on-dark.
* ------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: flex-end;
color: var(--bv-paper);
background: var(--bv-charcoal);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { /* readability gradient — NOT teal; charcoal-based */
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.32) 42%, rgba(26,26,26,0.82) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--bv-sp-9); }
.hero .h1, .hero .display { color: var(--bv-paper); }
.hero .lead { color: rgba(251, 248, 242, 0.88); }
.hero .eyebrow { color: rgba(251, 248, 242, 0.72); }
.hero .eyebrow::before { background: var(--bv-teal); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--bv-sp-4); margin-top: var(--bv-sp-6); }
/* hero 안의 퀵내비 chip — 어두운 히어로 위에서 보이도록 라이트 처리 */
.hero .chip { color: var(--bv-paper); border-color: rgba(251, 248, 242, 0.5); background: rgba(251, 248, 242, 0.07); }
.hero .chip:hover, .hero .chip.is-active { color: var(--bv-ink); background: var(--bv-paper); border-color: var(--bv-paper); }
/* ---------------------------------------------------------------------------
* 12. FOOTER — charcoal background, paper text
* ------------------------------------------------------------------------- */
.footer {
background: var(--bv-charcoal);
color: rgba(251, 248, 242, 0.72);
padding-block: var(--bv-sp-8) var(--bv-sp-7);
font-size: var(--bv-fz-caption);
}
.footer a { color: rgba(251, 248, 242, 0.72); }
.footer a:hover { color: var(--bv-paper); text-decoration: none; }
.footer__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--bv-sp-7);
padding-bottom: var(--bv-sp-6);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--bv-sp-3); max-width: 32ch; }
.footer__brand img { height: 40px; width: auto; }
.footer__sig { font-family: var(--bv-font-sig); font-style: italic; color: var(--bv-teal); font-size: 18px; }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--bv-sp-7); }
.footer__col { display: flex; flex-direction: column; gap: var(--bv-sp-3); }
.footer__col-h {
font-family: var(--bv-font-mono);
font-weight: 600;
font-size: var(--bv-fz-micro);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(251, 248, 242, 0.45);
margin-bottom: var(--bv-sp-2);
}
.footer__rule { border: 0; border-top: 1px solid rgba(251, 248, 242, 0.12); margin-block: var(--bv-sp-5); }
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--bv-sp-3);
font-family: var(--bv-font-mono);
font-size: var(--bv-fz-micro);
letter-spacing: 0.06em;
color: rgba(251, 248, 242, 0.45);
}
.footer__river { color: rgba(251, 248, 242, 0.30); height: 16px; margin-block: var(--bv-sp-5); }
.footer__river svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* ---------------------------------------------------------------------------
* 13. SECTION HEADER pattern (eyebrow + title + lead) — shared rhythm
* ------------------------------------------------------------------------- */
/* 제목은 자유 폭(어색한 자동 줄바꿈 방지), 본문 가독 폭은 .lead가 52ch로 자체 제한 */
.section-head { display: flex; flex-direction: column; gap: var(--bv-sp-4); margin-bottom: var(--bv-sp-8); }
.section-head .lead { margin-top: var(--bv-sp-1); }
/* grids for cards / content */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bv-sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bv-sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bv-sp-5); }
/* spacing / display utilities (token-bound) */
.stack > * + * { margin-top: var(--bv-sp-4); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-3 { gap: var(--bv-sp-3); } .gap-4 { gap: var(--bv-sp-4); } .gap-6 { gap: var(--bv-sp-6); }
.mt-5 { margin-top: var(--bv-sp-5); } .mt-6 { margin-top: var(--bv-sp-6); } .mt-7 { margin-top: var(--bv-sp-7); }
.text-center { text-align: center; }
/* ---------------------------------------------------------------------------
* 14. RESPONSIVE — 992 / 768 / 576
* ------------------------------------------------------------------------- */
@media (max-width: 992px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.footer__top { flex-direction: column; gap: var(--bv-sp-6); }
}
@media (max-width: 768px) {
.container, .container-narrow { padding-inline: var(--bv-sp-5); }
.nav__inner { padding-inline: var(--bv-sp-5); }
.section { padding-block: var(--bv-sp-8); }
.section--tight { padding-block: var(--bv-sp-7); }
/* mobile nav drawer */
.nav__toggle { display: block; }
.nav__menu {
position: fixed;
inset: var(--bv-nav-h) 0 auto 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: rgba(251, 248, 242, 0.97);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--bv-rule);
padding: var(--bv-sp-4) var(--bv-sp-5) var(--bv-sp-6);
transform: translateY(-12px);
opacity: 0;
pointer-events: none;
transition: opacity .25s var(--bv-ease), transform .25s var(--bv-ease);
}
.nav__menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav__menu .nav__link { padding: var(--bv-sp-4) 0; border-bottom: 1px solid var(--bv-rule); color: var(--bv-ink-2); font-size: 16px; }
.nav__menu .btn { margin-top: var(--bv-sp-4); }
/* on mobile the open drawer is light, so force ink text regardless of on-dark */
.nav--on-dark:not(.is-scrolled) .nav__menu .nav__link { color: var(--bv-ink-2); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--bv-sp-5); }
.form-row { grid-template-columns: 1fr; }
.hero { min-height: 80vh; }
.footer__cols { gap: var(--bv-sp-6); }
}
@media (max-width: 576px) {
.container, .container-narrow { padding-inline: var(--bv-sp-4); }
.nav__inner { padding-inline: var(--bv-sp-4); }
.nav__logo .nav__wordmark { font-size: 16px; }
.btn { width: 100%; } /* full-width CTAs on phones */
.hero__actions .btn { width: 100%; }
.card__body { padding: var(--bv-sp-5); }
.checkbox-grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; }
}
/* ---------------------------------------------------------------------------
* 15. PAGE TRANSITION — 페이지 간 부드러운 크로스페이드
* transition.js 가 같은 출처 .html 이동 시 .is-leaving 추가 → 페이드아웃.
* 새 페이지는 bvPageIn 으로 페이드인. (opacity만 사용 → fixed nav 영향 없음)
* ------------------------------------------------------------------------- */
@keyframes bvPageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: bvPageIn .42s var(--bv-ease) both; }
html.is-leaving body { opacity: 0; transition: opacity .26s var(--bv-ease); animation: none; }
/* respect reduced-motion (visual_system §7: calm by default) */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
.card:hover { transform: none; }
.card:hover .card__media img { transform: none; }
}