/* site-shell.css — 공개 페이지 공통 셸 토큰 + 타이포 (2026-06-27, A1 Step 1) * 목적: 홈·게임정보·로드맵·지원·Community 가 같은 "한 사이트"로 보이도록 * 디자인 토큰(색)과 폰트 스택을 단일 출처로 통일한다. * 안전 원칙: 클래스 충돌·레이아웃 변경 0 — element 레벨 타이포 + :root 토큰만. * (글로벌 네비/푸터 마크업·JS 정합이 필요한 "크롬 통일"은 Step 2에서 별도 진행.) * 적용: 각 페이지 의 페이지 CSS '뒤'( 직전)에 링크 → 폰트가 일관 적용. * Google Fonts(Inter+Cinzel+Noto Sans KR+JetBrains Mono)는 각 페이지가 로드. */ :root { /* 배경/표면 */ --bg-950: #0a0a0b; --bg-900: #0f1013; --bg-800: #17181d; --bg-700: #21232a; /* 텍스트 */ --text-100: #e7e7ea; --text-300: #b8bac2; --text-400: #9aa0ab; /* 브랜드(보라) — 전 페이지 공통 */ --brand-500: #8b5cf6; --brand-600: #7c3aed; --brand-soft: rgba(139, 92, 246, 0.16); --brand-border: rgba(139, 92, 246, 0.45); /* 보더/링 */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --ring: rgba(255, 255, 255, 0.08); /* 폰트 스택 (단일 출처) */ --font-body: Inter, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: Cinzel, Inter, "Noto Sans KR", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── 타이포 통일 (element 레벨 → 클래스 무관하게 전 페이지 적용) ── * 본문은 Inter, 디스플레이(제목)는 Cinzel 로 일관. 크기/색/레이아웃은 각 페이지 유지. */ body { font-family: var(--font-body); } h1, h2, h3, .section-title, .card-title, .gi-hero-title, .ms-title { font-family: var(--font-display); } /* 포커스 링 통일 (접근성) */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; } /* ── 글로벌 네비/푸터 크롬 (캐노니컬 = 랜딩 헤더). 캐노니컬 마크업 * (.site-header > .row > .brand + #nav-toggle + #site-nav.site-nav + .nav-cta + #site-lang-select) * 을 쓰는 페이지에만 적용. 홈은 자체 .nav 를 쓰므로 무충돌. ── */ .site-header { position: sticky; top: 0; z-index: 120; backdrop-filter: saturate(120%) blur(12px); -webkit-backdrop-filter: saturate(120%) blur(12px); background: rgba(10, 10, 11, 0.72); border-bottom: 1px solid var(--border); } .site-header .row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 16px; max-width: 1100px; margin: 0 auto; } .site-header .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; text-decoration: none; color: var(--text-100); } .site-header .brand-icon { width: 32px; height: 32px; border-radius: 8px; display: block; } .site-nav { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; } .site-nav a { color: #d4d4d8; text-decoration: none; padding: 6px 12px; border-radius: 8px; } .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .site-nav .nav-cta { color: #fff !important; border: 1px solid var(--brand-border); background: var(--brand-soft); font-weight: 800; } .site-header .site-lang-select { height: 32px; min-width: 150px; max-width: min(190px, 38vw); padding: 0 30px 0 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--text-100); font: inherit; font-size: 12px; font-weight: 700; } .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--text-100); cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 99px; } @media (max-width: 767px) { .site-header .brand { font-size: 16px; } .site-header .nav-toggle { display: inline-flex; } .site-header .site-nav { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(15, 16, 19, 0.98); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4); } .site-header .site-nav.is-open { display: flex; } .site-header .site-nav a { padding: 10px 12px; } .site-header .site-nav .nav-cta { text-align: center; margin-top: 4px; } .site-header .site-lang-select { width: 100%; max-width: none; margin-top: 4px; } } .site-footer { position: relative; z-index: 5; background: var(--bg-950); border-top: 1px solid var(--border); color: #9ca3af; font-size: 12px; padding: 28px 16px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .site-footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; } .site-footer p { margin: 0; color: #9ca3af; } .footer-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .footer-links a { color: #9ca3af; text-decoration: none; } .footer-links a:hover { color: #e5e7eb; } .footer-links .separator { color: #4b5563; } @media (max-width: 640px) { .site-footer .row { flex-direction: column; align-items: center; text-align: center; gap: 10px; } }