/* ============================================================ Base Typography & Layout — Noto Sans KR ============================================================ */ /* Noto Sans KR은 index.html 에서 preconnect+link로 로드 (여기서 @import 시 렌더 블로킹) */ body { font: var(--md-sys-typescale-body-large); color: var(--md-sys-color-on-background); background-color: var(--md-sys-color-background); } /* FOUC 방지: 컴포넌트 로딩 전 숨김 */ body.loading .header-placeholder, body.loading .footer-placeholder { min-height: 72px; background: var(--md-sys-color-surface); } /* ── Container ── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .container--narrow { max-width: 900px; } .container--wide { max-width: 1400px; } /* ── Headings ── */ h1 { font: var(--md-sys-typescale-display-small); } h2 { font: var(--md-sys-typescale-headline-large); } h3 { font: var(--md-sys-typescale-headline-medium); } h4 { font: var(--md-sys-typescale-headline-small); } h5 { font: var(--md-sys-typescale-title-large); } h6 { font: var(--md-sys-typescale-title-medium); } /* ── Links ── */ a:hover { color: var(--md-sys-color-primary); } a:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-xs); } /* ── Selection ── */ ::selection { background-color: var(--knvf-navy); color: var(--knvf-white); } /* ── Screen Reader Only ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Section spacing ── */ .section { padding: var(--space-3xl) 0; } .section--alt { background-color: var(--md-sys-color-surface-variant); } .section__header { text-align: center; margin-bottom: var(--space-2xl); } .section__label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-sm); } .section__title { font: var(--md-sys-typescale-headline-large); color: var(--md-sys-color-on-background); margin-bottom: var(--space-sm); } .section__desc { font: var(--md-sys-typescale-body-large); color: var(--md-sys-color-on-surface-variant); max-width: 600px; margin: 0 auto; } /* ── Prose content ── */ .prose p { margin-bottom: var(--space-md); line-height: 1.8; } .prose strong { font-weight: 600; } .prose ul, .prose ol { margin-bottom: var(--space-md); padding-left: var(--space-lg); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: var(--space-xs); line-height: 1.7; } /* ── Scroll Animations ── */ .section--animate { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .section--animate.section--visible, .no-js .section--animate { opacity: 1; transform: translateY(0); } /* ── Material Symbols Icon ── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }