/* ============================================================ SPINE GAME HUB — tokens.css (공통 디자인 시스템) ------------------------------------------------------------ 모든 화면(허브 + 게임)이 이 파일을 가장 먼저 로드한다: 게임별 테마는 스코프로 변수만 재정의한다. 컴포넌트 규칙(.sgh-*)은 전 화면 공통. ------------------------------------------------------------ 브레이크포인트 (전 화면 통일): 모바일 < 640px (1열) 태블릿 640–1023 (2열) PC >= 1024 (3열+) ============================================================ */ :root { /* ---- 중립 색 (다크 베이스) ---- */ --sgh-bg-0: #0f1216; /* 페이지 배경 */ --sgh-bg-1: #161b22; /* 패널/카드 표면 */ --sgh-bg-2: #1d242e; /* 상승 표면 (모달, 헤더) */ --sgh-bg-3: #252e3a; /* 호버 표면 */ --sgh-text-1: #e9edf2; /* 제목/본문 강조 */ --sgh-text-2: #a9b3c0; /* 본문 */ --sgh-text-3: #707c8c; /* 보조/캡션 */ --sgh-border-1: rgba(255, 255, 255, 0.09); --sgh-border-2: rgba(255, 255, 255, 0.16); /* ---- 브랜드 색 (절제된 인디고 1색 + 보조) ---- */ --sgh-brand: #6f7cf5; --sgh-brand-hover: #8590f7; --sgh-brand-ink: #10131f; /* 브랜드 배경 위 텍스트 */ --sgh-success: #4da583; --sgh-danger: #d05b52; --sgh-warn: #d9a441; /* ---- 게임 액센트 (게임 스코프에서 재정의) ---- */ --game-accent: var(--sgh-brand); --game-accent-soft: rgba(111, 124, 245, 0.14); /* ---- 타이포그래피 ---- */ --sgh-font: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --sgh-font-display: var(--sgh-font); /* 게임 스코프에서 세리프로 교체 가능 */ --sgh-fs-display: clamp(1.6rem, 1.1rem + 2vw, 2.2rem); --sgh-fs-h1: 1.45rem; --sgh-fs-h2: 1.15rem; --sgh-fs-h3: 1rem; --sgh-fs-body: 0.95rem; --sgh-fs-small: 0.86rem; --sgh-fs-caption: 0.78rem; /* ---- 간격 (4px 기준 스케일) ---- */ --sgh-sp-1: 4px; --sgh-sp-2: 8px; --sgh-sp-3: 12px; --sgh-sp-4: 16px; --sgh-sp-5: 20px; --sgh-sp-6: 24px; --sgh-sp-7: 32px; --sgh-sp-8: 48px; /* ---- 모서리 ---- */ --sgh-r-sm: 8px; --sgh-r-md: 10px; --sgh-r-lg: 14px; --sgh-r-pill: 999px; /* ---- 그림자 (절제 — 네온 글로우 금지) ---- */ --sgh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --sgh-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.35); /* ---- 레이아웃 ---- */ --sgh-header-h: 56px; --sgh-maxw: 1200px; --sgh-touch: 44px; /* 최소 터치 영역 */ /* ---- 모션 ---- */ --sgh-t-fast: 0.15s ease; --sgh-t-med: 0.25s ease; } /* ============================================================ 게임별 테마 스코프 — 변수만 재정의 ============================================================ */ /* 장기: 먹색 베이스 + 따뜻한 원목·한지, 초(녹)/한(적) */ :root[data-game="janggi"] { --sgh-bg-0: #14110d; --sgh-bg-1: #1c1812; --sgh-bg-2: #241e16; --sgh-bg-3: #2d261c; --sgh-border-1: rgba(233, 217, 176, 0.1); --sgh-border-2: rgba(233, 217, 176, 0.18); --game-accent: #3f8f6e; /* 초 — 차분한 녹 */ --game-accent-soft: rgba(63, 143, 110, 0.14); --game-cho: #3f8f6e; --game-han: #b2483d; /* 한 — 깊은 적 */ --game-wood: #a97e55; /* 원목 */ --game-wood-deep: #6f4f33; --game-hanji: #ead9b0; /* 한지 */ --sgh-font-display: "Noto Serif KR", "Pretendard", serif; } /* 오목: 흑백 모노크롬 — 가장 미니멀 */ :root[data-game="omok"] { --sgh-bg-0: #101214; --sgh-bg-1: #16181b; --sgh-bg-2: #1c1f23; --sgh-bg-3: #24282d; --game-accent: #c9d2dc; /* 밝은 회백 — 포인트 최소화 */ --game-accent-soft: rgba(201, 210, 220, 0.1); --game-stone-black: #17191c; --game-stone-white: #edeef0; --game-board: #d9b878; /* 반상 목색 (은은하게) */ } /* 핀볼: 현대 아케이드 — 시안 + 앰버 포인트 제한 사용 */ :root[data-game="pinball"] { --sgh-bg-0: #0d1119; --sgh-bg-1: #141a25; --sgh-bg-2: #1b2231; --sgh-bg-3: #232c3e; --game-accent: #3fc1e0; /* 시안 — 공/진행 */ --game-accent-soft: rgba(63, 193, 224, 0.13); --game-alert: #e0a33f; /* 앰버 — 위험/강조 */ --game-rank: #f0d264; /* 순위 골드 */ } /* ============================================================ 공통 베이스 ============================================================ */ .sgh-base, body.sgh-base { margin: 0; font-family: var(--sgh-font); font-size: var(--sgh-fs-body); color: var(--sgh-text-1); background: var(--sgh-bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sgh-wrap { width: 100%; max-width: var(--sgh-maxw); margin: 0 auto; padding: 0 var(--sgh-sp-5); } /* ---- 키보드 포커스 (전 화면 공통) ---- */ .sgh-base :focus-visible, :root[data-game] :focus-visible { outline: 2px solid var(--game-accent); outline-offset: 2px; border-radius: 4px; } /* ============================================================ 공통 헤더 — 높이 56px, 구조 통일 [로고: SPINE GAME HUB] [현재 게임명] ······ [홈 / 게임 목록] ============================================================ */ .sgh-header { position: sticky; top: 0; z-index: 100; height: var(--sgh-header-h); background: color-mix(in srgb, var(--sgh-bg-0) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--sgh-border-1); } .sgh-header__inner { max-width: var(--sgh-maxw); height: 100%; margin: 0 auto; padding: 0 var(--sgh-sp-5); display: flex; align-items: center; gap: var(--sgh-sp-4); } .sgh-logo { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; min-height: var(--sgh-touch); align-self: center; align-items: center; } .sgh-logo__spine { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--sgh-text-1); } .sgh-logo__rest { font-weight: 500; font-size: 0.8rem; letter-spacing: 0.22em; color: var(--game-accent); } .sgh-header__game { font-size: var(--sgh-fs-small); color: var(--sgh-text-3); padding-left: var(--sgh-sp-4); border-left: 1px solid var(--sgh-border-1); white-space: nowrap; } .sgh-header__nav { margin-left: auto; display: flex; align-items: center; gap: var(--sgh-sp-2); } .sgh-header__nav a { display: inline-flex; align-items: center; min-height: var(--sgh-touch); padding: 0 var(--sgh-sp-3); border-radius: var(--sgh-r-md); font-size: var(--sgh-fs-small); color: var(--sgh-text-2); text-decoration: none; transition: background var(--sgh-t-fast), color var(--sgh-t-fast); } .sgh-header__nav a:hover { background: var(--sgh-bg-2); color: var(--sgh-text-1); } /* ============================================================ 버튼 — 크기·라운드·눌림·비활성 통일 ============================================================ */ .sgh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--sgh-touch); padding: 0 var(--sgh-sp-5); border: 1px solid transparent; border-radius: var(--sgh-r-md); font-family: inherit; font-size: var(--sgh-fs-body); font-weight: 600; color: var(--sgh-text-1); background: var(--sgh-bg-2); cursor: pointer; text-decoration: none; user-select: none; transition: background var(--sgh-t-fast), border-color var(--sgh-t-fast), transform var(--sgh-t-fast), opacity var(--sgh-t-fast); } .sgh-btn:hover { background: var(--sgh-bg-3); } .sgh-btn:active { transform: translateY(1px); } .sgh-btn:disabled, .sgh-btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; transform: none; } /* 주 행동 버튼 — 화면당 1개 원칙 */ .sgh-btn--primary { background: var(--game-accent); color: var(--sgh-brand-ink); border-color: transparent; } .sgh-btn--primary:hover { background: color-mix(in srgb, var(--game-accent) 85%, white); } /* 외곽선 버튼 */ .sgh-btn--ghost { background: transparent; border-color: var(--sgh-border-2); color: var(--sgh-text-2); } .sgh-btn--ghost:hover { border-color: var(--game-accent); color: var(--sgh-text-1); background: var(--game-accent-soft); } /* 위험 행동 (기권 등) */ .sgh-btn--danger { background: transparent; border-color: rgba(208, 91, 82, 0.5); color: var(--sgh-danger); } .sgh-btn--danger:hover { background: rgba(208, 91, 82, 0.12); } /* 작은 버튼 — PC 밀집 영역 전용 (모바일 노출 영역엔 사용 금지) */ .sgh-btn--sm { min-height: 36px; padding: 0 var(--sgh-sp-3); font-size: var(--sgh-fs-small); } /* 선택 버튼 그룹 (세그먼트) */ .sgh-seg { display: inline-flex; background: var(--sgh-bg-1); border: 1px solid var(--sgh-border-1); border-radius: var(--sgh-r-md); padding: 3px; gap: 3px; } .sgh-seg button { min-height: 38px; padding: 0 var(--sgh-sp-4); border: 0; border-radius: calc(var(--sgh-r-md) - 3px); background: transparent; color: var(--sgh-text-2); font-family: inherit; font-size: var(--sgh-fs-small); font-weight: 600; cursor: pointer; transition: background var(--sgh-t-fast), color var(--sgh-t-fast); } .sgh-seg button:hover { color: var(--sgh-text-1); } .sgh-seg button[aria-pressed="true"], .sgh-seg button.selected { background: var(--game-accent); color: var(--sgh-brand-ink); } @media (pointer: coarse) { .sgh-seg button { min-height: var(--sgh-touch); } .sgh-btn--sm { min-height: var(--sgh-touch); } } /* ============================================================ 패널 — 배경·테두리·그림자·여백 통일 ============================================================ */ .sgh-panel { background: var(--sgh-bg-1); border: 1px solid var(--sgh-border-1); border-radius: var(--sgh-r-lg); padding: var(--sgh-sp-5); box-shadow: var(--sgh-shadow-1); } .sgh-panel__title { margin: 0 0 var(--sgh-sp-3); font-size: var(--sgh-fs-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sgh-text-3); } /* ============================================================ 모달 / 오버레이 ============================================================ */ .sgh-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--sgh-sp-5); background: rgba(8, 10, 14, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .sgh-modal { width: 100%; max-width: 440px; max-height: min(86vh, 720px); overflow-y: auto; background: var(--sgh-bg-2); border: 1px solid var(--sgh-border-2); border-radius: var(--sgh-r-lg); padding: var(--sgh-sp-6); box-shadow: var(--sgh-shadow-2); } .sgh-modal__title { margin: 0 0 var(--sgh-sp-4); font-size: var(--sgh-fs-h2); font-weight: 700; } /* ============================================================ 토글 스위치 ============================================================ */ .sgh-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; } .sgh-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .sgh-toggle__track { position: absolute; inset: 0; border-radius: var(--sgh-r-pill); background: var(--sgh-bg-3); border: 1px solid var(--sgh-border-2); transition: background var(--sgh-t-fast); pointer-events: none; } .sgh-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--sgh-text-2); transition: transform var(--sgh-t-fast), background var(--sgh-t-fast); } .sgh-toggle input:checked + .sgh-toggle__track { background: var(--game-accent); border-color: transparent; } .sgh-toggle input:checked + .sgh-toggle__track::after { transform: translateX(20px); background: #fff; } .sgh-toggle input:focus-visible + .sgh-toggle__track { outline: 2px solid var(--game-accent); outline-offset: 2px; } /* ============================================================ 상태 표시 (차례, 장군, 준비 중 등) ============================================================ */ .sgh-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 var(--sgh-sp-3); border-radius: var(--sgh-r-pill); font-size: var(--sgh-fs-small); font-weight: 600; background: var(--sgh-bg-2); border: 1px solid var(--sgh-border-1); color: var(--sgh-text-2); } .sgh-status--active { background: var(--game-accent-soft); border-color: var(--game-accent); color: var(--sgh-text-1); } .sgh-status--alert { background: rgba(208, 91, 82, 0.12); border-color: var(--sgh-danger); color: var(--sgh-danger); } .sgh-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--game-accent); flex: 0 0 auto; } /* ============================================================ 푸터 (간결 공통형) ============================================================ */ .sgh-footer { margin-top: var(--sgh-sp-8); padding: var(--sgh-sp-6) 0; border-top: 1px solid var(--sgh-border-1); text-align: center; font-size: var(--sgh-fs-small); color: var(--sgh-text-3); } .sgh-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sgh-sp-2) var(--sgh-sp-5); margin-bottom: var(--sgh-sp-3); } .sgh-footer a { color: var(--sgh-text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; } .sgh-footer a:hover { color: var(--game-accent); } /* ============================================================ 모션 절제 ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }