/** * theme.css — 13.Seohyeon 테마 색상 시스템 v5.0 * 위치: /var/www/test_seohyeon/public/assets/css/theme.css * 역할: 시간대별 테마 변수 정의 * - [data-theme="light"] : Theme A — Light Ice (05:00 ~ 17:59) * - [data-theme="dark"] : Theme B — Deep Ice (18:00 ~ 04:59) * 전환 방식: theme.js가 를 설정 * 수정이력: * 2026-03-08 최초 작성 (WBS 1-03 리팩토링) * 2026-03-12 v5.0 — 색상 팔레트 전면 업데이트 (styles.css 기반) * 더 세련된 블루/아이스 팔레트, 글로우·그림자 강화 */ /* ══════════════════════════════════════════════ 공통 상수 (테마 무관) ══════════════════════════════════════════════ */ :root { --radius-xl: 28px; --radius-lg: 20px; --radius-md: 16px; --radius-sm: 12px; --transition: .26s cubic-bezier(.4,0,.2,1); --accent: #ff7a3d; /* 따뜻한 오렌지 액센트 (공통) */ --accent-cold: #2de2ff; /* 차가운 시안 액센트 (공통) */ --card-blur: blur(16px) saturate(140%); } /* ══════════════════════════════════════════════ THEME A — Light Ice (밝은 얼음) 05:00 ~ 17:59 적용 ══════════════════════════════════════════════ */ [data-theme="light"] { /* ── 기본 배경 ── */ --bg: #edf5fb; --surface: rgba(255,255,255,0.76); --surface--l: rgba(255,255,255,0.56); --drawerOverlay: rgba(15,27,43,0.28); /* ── 브랜드 블루 ── */ --blade: #1ea7ff; --bladeL: rgba(30,167,255,0.12); --primary-2: #78e4ff; /* ── 헤더/푸터 배경용 ── */ --dark: #0e2740; --steel: #164e73; /* ── 텍스트 ── */ --text: #10233a; --muted: #6f8598; /* ── 그림자 / 글로우 ── */ --shadow: 0 18px 50px rgba(17,50,78,0.12); --glow: 0 0 0 1px rgba(30,167,255,0.18), 0 14px 34px rgba(30,167,255,0.12); /* ── 선 (border) ── */ --line: rgba(21,92,151,0.12); --line-strong: rgba(21,92,151,0.22); /* ── 서피스 변형 ── */ --surface-strong: #ffffff; --surface-soft: rgba(230,241,250,0.70); /* ── 페이지 배경 그라데이션 (body background) ── */ --page-grad: radial-gradient(circle at 15% 10%, rgba(30,167,255,0.24), transparent 28%), radial-gradient(circle at 88% 18%, rgba(120,228,255,0.28), transparent 22%), linear-gradient(180deg,#e9f7ff 0%,#eef5fb 48%,#edf4fa 100%); /* ── 헤더 전용 ── */ --hd-bg: linear-gradient(90deg,#d7eefc,#e9f7ff 40%,#d4efff 100%); --hd-border: rgba(147,197,253,0.50); --hd-shadow: 0 1px 0 rgba(147,197,253,0.30), 0 2px 12px rgba(14,165,233,0.08); --hd-logo-num: #1ea7ff; --hd-logo-dot: rgba(30,167,255,0.30); --hd-logo-name: #164e73; --hd-nav-color: #164e73; --hd-nav-hover: #1ea7ff; --hd-nav-active-border: #1ea7ff; --hd-btn-login-bg: #1ea7ff; --hd-btn-login-color: #fff; --hd-btn-login-border:#1ea7ff; --hd-btn-login-hover: #0284c7; --hd-btn-logout-bg: rgba(30,167,255,0.08); --hd-btn-logout-color:#164e73; --hd-btn-logout-border:rgba(30,167,255,0.20); --hd-btn-my-bg: rgba(30,167,255,0.08); --hd-btn-my-border: rgba(30,167,255,0.20); --hd-btn-my-color: #1ea7ff; --hd-burger-color: #164e73; --hd-drawer-bg: rgba(247,251,255,0.97); --hd-drawer-border: rgba(147,197,253,0.30); --hd-drawer-link: #17314f; --hd-drawer-active-bg:rgba(30,167,255,0.07); --hd-nick-color: #164e73; /* ── 푸터 전용 ── */ --ft-bg: linear-gradient(180deg,rgba(215,238,252,0.80) 0%,rgba(233,247,255,0.95) 100%); --ft-border: rgba(147,197,253,0.40); --ft-logo-num: #1ea7ff; --ft-logo-dot: rgba(30,167,255,0.30); --ft-logo-name: #164e73; --ft-desc: #6f8598; --ft-title: #1ea7ff; --ft-title-big: #1ea7ff; --ft-link: #334155; --ft-link-hover: #1ea7ff; --ft-tag-line: #1ea7ff; --ft-copy: #94a3b8; --ft-copy-border: rgba(147,197,253,0.30); --ft-logout-color: #334155; --ft-hidden-color: rgba(92,209,229,0.20); /* ── 마이페이지 전용 ── */ --mp-side-bg: #ffffff; --mp-card-bg: #ffffff; --mp-input-bg: #ffffff; --mp-input-ro-bg: #edf5fb; --mp-th-bg: #164e73; --mp-th-color: rgba(255,255,255,0.85); /* ── 링크장 카드 전용 ── */ --rink-card-bg: rgba(255,255,255,0.82); --rink-thumb-grad: linear-gradient(145deg,#9de2ff,#1a4c73); --rink-tag-bg: rgba(30,167,255,0.08); --rink-tag-color: #1ea7ff; --rink-featured-border: rgba(30,167,255,0.34); --rink-map-bg: linear-gradient(140deg,#d7decf 0%,#e9e2d9 38%,#ccd8c9 100%); } /* ══════════════════════════════════════════════ THEME B — Deep Ice (딥 아이스) 18:00 ~ 04:59 적용 ══════════════════════════════════════════════ */ [data-theme="dark"] { /* ── 기본 배경 ── */ --bg: #07111d; --surface: rgba(9,19,33,0.72); --surface--l: rgba(9,19,33,0.32); --drawerOverlay: rgba(0,0,0,0.52); /* ── 브랜드 블루 ── */ --blade: #34b4ff; --bladeL: rgba(52,180,255,0.12); --primary-2: #7fe7ff; /* ── 헤더/푸터 ── */ --dark: #030b18; --steel: #0f1e3a; /* ── 텍스트 ── */ --text: #e8f6ff; --muted: #88a4b8; /* ── 그림자 / 글로우 ── */ --shadow: 0 24px 60px rgba(0,0,0,0.38); --glow: 0 0 0 1px rgba(52,180,255,0.22), 0 18px 40px rgba(0,0,0,0.32); /* ── 선 (border) ── */ --line: rgba(104,196,255,0.10); --line-strong: rgba(104,196,255,0.22); /* ── 서피스 변형 ── */ --surface-strong: rgba(12,24,40,0.92); --surface-soft: rgba(17,34,58,0.72); /* ── 페이지 배경 그라데이션 ── */ --page-grad: radial-gradient(circle at 15% 10%, rgba(30,167,255,0.18), transparent 26%), radial-gradient(circle at 88% 18%, rgba(120,228,255,0.10), transparent 20%), linear-gradient(180deg,#08111d 0%,#07111d 52%,#091523 100%); /* ── 헤더 전용 ── */ --hd-bg: linear-gradient(90deg,#071526,#0a1f36 44%,#0d1730 100%); --hd-border: rgba(52,180,255,0.18); --hd-shadow: 0 1px 0 rgba(52,180,255,0.15), 0 2px 12px rgba(0,0,0,0.42); --hd-logo-num: #34b4ff; --hd-logo-dot: rgba(52,180,255,0.25); --hd-logo-name: rgba(232,246,255,0.72); --hd-nav-color: rgba(136,164,184,0.75); --hd-nav-hover: #88a4b8; --hd-nav-active-border: #34b4ff; --hd-btn-login-bg: transparent; --hd-btn-login-color: #34b4ff; --hd-btn-login-border:rgba(52,180,255,0.40); --hd-btn-login-hover: rgba(52,180,255,0.10); --hd-btn-logout-bg: rgba(52,180,255,0.06); --hd-btn-logout-color:rgba(136,164,184,0.80); --hd-btn-logout-border:rgba(52,180,255,0.20); --hd-btn-my-bg: rgba(52,180,255,0.06); --hd-btn-my-border: rgba(52,180,255,0.20); --hd-btn-my-color: #34b4ff; --hd-burger-color: rgba(136,164,184,0.85); --hd-drawer-bg: rgba(7,17,29,0.97); --hd-drawer-border: rgba(52,180,255,0.12); --hd-drawer-link: rgba(232,246,255,0.58); --hd-drawer-active-bg:rgba(52,180,255,0.09); --hd-nick-color: rgba(136,164,184,0.85); /* ── 푸터 전용 ── */ --ft-bg: linear-gradient(180deg,rgba(10,22,40,0.99) 0%,rgba(3,11,24,1) 100%); --ft-border: rgba(52,180,255,0.22); --ft-logo-num: #34b4ff; --ft-logo-dot: rgba(52,180,255,0.22); --ft-logo-name: rgba(232,246,255,0.58); --ft-desc: rgba(136,164,184,0.65); --ft-title: #34b4ff; --ft-title-big: #d4f4fa; --ft-link: rgba(232,246,255,0.40); --ft-link-hover: #88a4b8; --ft-tag-line: rgba(212,244,250,0.82); --ft-copy: rgba(136,164,184,0.38); --ft-copy-border: rgba(52,180,255,0.22); --ft-logout-color: rgba(232,246,255,0.40); --ft-hidden-color: rgba(52,180,255,0.08); /* ── 마이페이지 전용 ── */ --mp-side-bg: rgba(9,19,33,0.80); --mp-card-bg: rgba(9,19,33,0.72); --mp-input-bg: rgba(7,17,29,0.85); --mp-input-ro-bg: rgba(7,17,29,0.55); --mp-th-bg: rgba(52,180,255,0.14); --mp-th-color: rgba(136,164,184,0.90); /* ── 링크장 카드 전용 ── */ --rink-card-bg: rgba(12,24,40,0.78); --rink-thumb-grad: linear-gradient(145deg,#1a3a5c,#0d2038); --rink-tag-bg: rgba(52,180,255,0.10); --rink-tag-color: #34b4ff; --rink-featured-border: rgba(52,180,255,0.30); --rink-map-bg: linear-gradient(140deg,#213349 0%,#2c3b3f 38%,#1d2a3b 100%); } /* ══════════════════════════════════════════════ 테마 전환 부드럽게 ══════════════════════════════════════════════ */ html { transition: background .35s ease; }