/* ═══════════════════════════════════════════════════════════════ base.css — 토큰 · 리셋 · 타이포 Louie's Mind Lab · BI v2 (FIELD / AXIS / APERTURE) 페이지는 한 줄로 모드를 켠다. 모드가 바꾸는 것은 --accent 하나와 그래픽 시그니처뿐. 배경 · 서체 · 로고는 전 사이트 고정이다. ═══════════════════════════════════════════════════════════════ */ :root { /* ── 지면 (전 모드 고정) ── */ --ground: #06070A; --surface: #0D1015; --surface-2: #0A0C11; /* ── 잉크 ── */ --ink: #E8EAED; --ink-2: #A8B2BC; --mute: #7C858F; --mute-2: #4B545E; --faint: #343C45; /* ── 선 ── */ --line: #171C23; --line-2: #14181E; /* ── 액센트 (모드가 바꾸는 유일한 색) ── */ --accent: #6E8FA8; /* ── 전역 보조색 ── */ --seal: #7C3A2E; --alpha: #8FB3AA; --paper: #F2EDE4; /* ── 서체 ── */ --font-kr-display: 'Song Myung', serif; --font-en-display: 'Instrument Serif', serif; --font-text: 'IBM Plex Sans KR', system-ui, sans-serif; /* ── 타이포 스케일 7단 ── */ --fs-hero-en: clamp(52px, 8.6vw, 124px); --fs-hero-kr: clamp(25px, 2.9vw, 42px); --fs-d1: clamp(30px, 4.2vw, 60px); --fs-d2: clamp(26px, 3.1vw, 44px); --fs-d3: clamp(20px, 2.0vw, 28px); --fs-t1: clamp(15px, 1.1vw, 16px); --fs-t2: 14.5px; --fs-l1: 11px; --fs-num: clamp(76px, 16vw, 232px); /* ── 간격 ── */ --sp-section: clamp(88px, 9.5vw, 140px); --sp-gutter: clamp(20px, 6.9vw, 100px); --wrap: 1240px; /* ── 모션 ── */ --ease: cubic-bezier(.32, .72, 0, 1); --ease-soft: cubic-bezier(.22, 1, .36, 1); /* ── 레이어 ── */ --z-nav: 60; --z-sheet: 59; } /* ── 모드 오버라이드 — 이 블록이 전부다 ── */ [data-mode="axis"] { --accent: #4E7A5C; /* 일곱 관문. 한 화면에 동시에 쓰지 않는다 — 섹션마다 하나씩 */ --gate-1: #8C4A48; --gate-2: #A8663F; --gate-3: #A08B44; --gate-4: #4E7A5C; --gate-5: #3F6B84; --gate-6: #4A5488; --gate-7: #6D5488; } [data-mode="aperture"] { --accent: #D0AE6B; } /* ═══ 리셋 ═══ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--ground); color: var(--ink); font-family: var(--font-text); font-weight: 300; font-size: var(--fs-t2); line-height: 1.95; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* 국문 조판 — "요."만 떨어지는 widow 방지. 핵심 문장은 수동
병행 */ word-break: keep-all; overflow-wrap: break-word; } /* height:auto 없으면 width/height 속성이 presentational hint 로 들어가 aspect-ratio 를 무력화한다. 속성은 CLS 방지용으로 유지하되 렌더는 CSS 가 잡는다. */ img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: var(--ground); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ═══ 타이포 ═══ */ .t-hero-en { font-family: var(--font-en-display); font-size: var(--fs-hero-en); line-height: .98; letter-spacing: -.03em; } .t-hero-kr { font-family: var(--font-kr-display); font-size: var(--fs-hero-kr); line-height: 1.5; } .t-d1 { font-family: var(--font-kr-display); font-size: var(--fs-d1); line-height: 1.42; } .t-d2 { font-family: var(--font-kr-display); font-size: var(--fs-d2); line-height: 1.45; } .t-d3 { font-family: var(--font-kr-display); font-size: var(--fs-d3); line-height: 1.5; } .t-en { font-family: var(--font-en-display); line-height: 1.5; letter-spacing: -.01em; } .t-lead { font-size: var(--fs-t1); line-height: 2.05; color: var(--mute); } .t-body { font-size: var(--fs-t2); line-height: 1.95; color: var(--mute); } .t-meta { font-size: 12.5px; color: var(--mute-2); } .t-num { font-family: var(--font-en-display); font-size: var(--fs-num); line-height: .86; letter-spacing: -.045em; } .t-label { font-size: var(--fs-l1); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); } .t-label--mute { color: var(--mute-2); } .hl { color: var(--accent); } .strike { color: var(--mute-2); text-decoration: line-through; text-decoration-thickness: 1px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }