/* ============================================================ 2208 WORLD CLOCK — Color Themes (data-theme) 색상 테마 = 팔레트만. 레이아웃/컴포넌트 형태는 style.css. 킷 × 색 직교(architecture.md §6). data-theme 을 · 에 부여. ============================================================ */ :root { --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Sans KR', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; --radius: 16px; --radius-sm: 10px; --ease: cubic-bezier(.22, .61, .36, 1); } /* ── 다크 테마 ───────────────────────────────── */ /* midnight (기본) — 딥 네이비 · 인디고 글로우 */ [data-theme="midnight"] { --scheme: dark; --bg: #0b0f1a; --bg-grad: radial-gradient(1200px 600px at 15% -10%, #1a2036 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, #171a2e 0%, transparent 55%); --surface: #131829; --surface-2: #1a2038; --border: #262d47; --border-soft:#1e2540; --text: #eef1fb; --text-dim: #aeb6d4; --text-mute: #6f77a0; --accent: #818cf8; --accent-2: #c084fc; --accent-soft:rgba(129,140,248,.14); --day: #fbbf24; --night: #6366f1; --shadow: 0 18px 44px -20px rgba(0,0,0,.7); } /* carbon — 뉴트럴 near-black · 시안 액센트 */ [data-theme="carbon"] { --scheme: dark; --bg: #0c0d0f; --bg-grad: radial-gradient(1000px 500px at 50% -20%, #17191d 0%, transparent 60%); --surface: #141619; --surface-2: #1c1f24; --border: #282c33; --border-soft:#20242a; --text: #f3f4f6; --text-dim: #b3b8c2; --text-mute: #6b7280; --accent: #22d3ee; --accent-2: #38bdf8; --accent-soft:rgba(34,211,238,.13); --day: #facc15; --night: #38bdf8; --shadow: 0 18px 44px -22px rgba(0,0,0,.75); } /* aurora — 다크 · 청록/그린 오로라 */ [data-theme="aurora"] { --scheme: dark; --bg: #071410; --bg-grad: radial-gradient(1100px 600px at 10% -10%, #0d2a22 0%, transparent 60%), radial-gradient(800px 500px at 100% 10%, #10231f 0%, transparent 55%); --surface: #0c1c17; --surface-2: #12261f; --border: #1d3a30; --border-soft:#173029; --text: #e7fbf2; --text-dim: #9fd3c1; --text-mute: #5f8577; --accent: #34d399; --accent-2: #2dd4bf; --accent-soft:rgba(52,211,153,.14); --day: #fcd34d; --night: #2dd4bf; --shadow: 0 18px 44px -20px rgba(0,0,0,.7); } /* sunset — 다크 · 자주/오렌지 노을 */ [data-theme="sunset"] { --scheme: dark; --bg: #140a16; --bg-grad: radial-gradient(1100px 600px at 20% -10%, #35163a 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, #3a1424 0%, transparent 55%); --surface: #1c1020; --surface-2: #26162b; --border: #3a2340; --border-soft:#301c35; --text: #fceef7; --text-dim: #d3aec8; --text-mute: #8a6784; --accent: #fb7185; --accent-2: #f472b6; --accent-soft:rgba(251,113,133,.15); --day: #fbbf24; --night: #a855f7; --shadow: 0 18px 44px -20px rgba(0,0,0,.72); } /* ── 라이트 테마 ──────────────────────────────── */ /* paper — 클린 화이트 */ [data-theme="paper"] { --scheme: light; --bg: #f4f5f8; --bg-grad: radial-gradient(1000px 500px at 15% -10%, #e9ecf5 0%, transparent 55%); --surface: #ffffff; --surface-2: #f7f8fb; --border: #e2e5ee; --border-soft:#eceef4; --text: #171a25; --text-dim: #4d5470; --text-mute: #8a90a6; --accent: #4f46e5; --accent-2: #7c3aed; --accent-soft:rgba(79,70,229,.1); --day: #f59e0b; --night: #6366f1; --shadow: 0 16px 40px -22px rgba(30,40,80,.28); } /* nord — 쿨 그레이블루 라이트 */ [data-theme="nord"] { --scheme: light; --bg: #eceff4; --bg-grad: radial-gradient(1000px 500px at 20% -10%, #e2e8f2 0%, transparent 55%); --surface: #ffffff; --surface-2: #f4f6fa; --border: #d8dee9; --border-soft:#e3e8f0; --text: #2e3440; --text-dim: #4c566a; --text-mute: #8893a5; --accent: #5e81ac; --accent-2: #81a1c1; --accent-soft:rgba(94,129,172,.12); --day: #d08770; --night: #5e81ac; --shadow: 0 16px 40px -22px rgba(46,52,64,.22); } /* mint — 프레시 그린 라이트 */ [data-theme="mint"] { --scheme: light; --bg: #eef7f2; --bg-grad: radial-gradient(1000px 500px at 15% -10%, #dff0e8 0%, transparent 55%); --surface: #ffffff; --surface-2: #f2faf5; --border: #d3e8dd; --border-soft:#e0f0e8; --text: #133029; --text-dim: #3d5f54; --text-mute: #7ba193; --accent: #0d9488; --accent-2: #10b981; --accent-soft:rgba(13,148,136,.11); --day: #f59e0b; --night: #0d9488; --shadow: 0 16px 40px -22px rgba(19,48,41,.2); } /* rose — 웜 로즈 라이트 */ [data-theme="rose"] { --scheme: light; --bg: #fbeff2; --bg-grad: radial-gradient(1000px 500px at 20% -10%, #f7e0e7 0%, transparent 55%); --surface: #ffffff; --surface-2: #fdf3f6; --border: #f2d7de; --border-soft:#f7e4ea; --text: #3a1520; --text-dim: #7a4353; --text-mute: #b3808f; --accent: #e11d63; --accent-2: #db2777; --accent-soft:rgba(225,29,99,.1); --day: #f59e0b; --night: #be185d; --shadow: 0 16px 40px -22px rgba(58,21,32,.22); }