/* ================================================================
마사지로그 — Design Token System (theme.css)
================================================================
이 파일은 전체 디자인 시스템의 단일 진실 공급원(Single Source of Truth)입니다.
컬러, 타이포그래피, 간격, 그림자, 애니메이션 토큰을 모두 이곳에서 관리합니다.
사용법: style.css 보다 먼저 로드하여 변수를 선언합니다.
── 색상 철학 ────────────────────────────────────────────────────
Primary : Teal (#0D9488) — 신뢰·웰니스·프리미엄 느낌
Accent : Orange (#F97316) — 할인·신규·에너지 강조
Base : Off-white (#F8FAF9) — 부드럽고 따뜻한 배경
Dark text: #111827 — 명확한 가독성
================================================================ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
라이트 모드 (기본)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
/* ── 브랜드 컬러: Primary (Teal) ── */
--primary: #0D9488; /* Teal-600 — 주 CTA, 링크, 활성상태 */
--primary-dark: #0F766E; /* Teal-700 — hover */
--primary-hover: #0E8A7E; /* Teal-650 — 버튼 hover */
--primary-light: #CCFBF1; /* Teal-100 — 배지 배경, 선택 영역 */
--primary-glow: rgba(13,148,136,0.22);
--primary-glow2: rgba(13,148,136,0.10);
/* ── 브랜드 컬러: Accent (Orange) ── */
--secondary: #F97316; /* Orange-500 — 할인, 신규, 에너지 */
--secondary-dark: #EA6C0A; /* Orange-600 — hover */
--secondary-light: #FFF7ED; /* Orange-50 — 배경 강조 */
/* ── 기능 색상 ── */
--accent: #F59E0B; /* Amber-400 — 별점, 포인트 */
--accent-light: #FFFBEB;
--success: #16A34A; /* Green-600 — 성공, 영업중 */
--success-light: #DCFCE7;
--danger: #DC2626; /* Red-600 — 오류, 마감 */
--danger-light: #FEE2E2;
--info: #2DD4BF; /* Teal-300 — 정보 강조 */
/* ── 배경 색상 ── */
--bg: #F8FAF9; /* 페이지 배경 — 따뜻한 오프화이트 */
--bg-card: #FFFFFF; /* 카드 배경 */
--bg-card2: #F0FFFE; /* 보조 카드 */
--bg-glass: rgba(255,255,255,0.72);
--bg-glass-dark: rgba(255,255,255,0.50);
--bg-input: #F0FFFE;
--bg-sidebar: #FFFFFF;
/* ── 헤더 배경 (다크 틸) ── */
--bg-header: #0B1F1E; /* 헤더 */
--bg-topbar: #061514; /* 상단바 */
--bg-mainnav: #072420; /* 탭 네비게이션 */
/* ── 텍스트 색상 ── */
--text-primary: #111827; /* Slate-900 — 주 본문 */
--text-secondary: #374151; /* Slate-700 — 보조 본문 */
--text-muted: #6B7280; /* Slate-500 — 보조 정보 */
--text-on-primary: #FFFFFF;
/* ── 테두리 ── */
--border: #D1FAF5; /* 기본 경계선 */
--border-hover: #0D9488;
--border-input: #A7D9D6;
/* ── 그림자 (teal 기반) ── */
--shadow-xs: 0 1px 2px rgba(13,148,136,0.06);
--shadow-sm: 0 2px 8px rgba(13,148,136,0.10);
--shadow-md: 0 4px 16px rgba(13,148,136,0.13);
--shadow-lg: 0 8px 32px rgba(13,148,136,0.16);
--shadow-xl: 0 16px 48px rgba(13,148,136,0.20);
--shadow-card: 0 2px 12px rgba(13,148,136,0.09), 0 0 0 1px rgba(13,148,136,0.04);
--shadow-card-hover: 0 8px 28px rgba(13,148,136,0.18), 0 0 0 1.5px rgba(13,148,136,0.15);
/* ── 사이드바 섹션 헤더 컬러 ── */
--sb-login-bg: #0D9488; /* 로그인 */
--sb-region-bg: #F97316; /* 지역별 */
--sb-cat-bg: #F59E0B; /* 카테고리 */
--sb-comm-bg: #16A34A; /* 커뮤니티 */
--sb-vip-bg: #DC2626; /* VIP */
/* ── 레이아웃 치수 ── */
--topbar-h: 0px;
--header-h: 64px;
--mainnav-h: 44px;
--total-header-h: 108px;
--sidebar-left-w: 224px;
--sidebar-right-w: 185px;
--sidebar-w: 224px;
--max-w: 1400px;
/* ── 디자인 토큰: 간격 ── */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* ── 디자인 토큰: 모서리 반경 ── */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-2xl: 32px;
--radius-pill:999px;
/* ── 디자인 토큰: 전환 ── */
--transition: 0.20s cubic-bezier(0.4,0,0.2,1);
--transition-slow: 0.40s cubic-bezier(0.4,0,0.2,1);
--transition-bounce: 0.35s cubic-bezier(0.34,1.56,0.64,1);
/* ── 타이포그래피 ── */
--font: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* ── 2026 Aurora 디자인 토큰 ── */
--aurora-1: #0D9488; /* Teal-600 */
--aurora-2: #14B8A6; /* Teal-500 */
--aurora-3: #F97316; /* Orange-500 */
--aurora-4: #2DD4BF; /* Teal-300 */
--glow-primary: rgba(13,148,136,0.35);
--glow-secondary: rgba(20,184,166,0.25);
/* ── 글래스모피즘 토큰 ── */
--glass-bg: rgba(255,255,255,0.06);
--glass-border: rgba(255,255,255,0.12);
--glass-blur: blur(20px) saturate(180%);
/* ── 히어로 그라디언트 ── */
--hero-bg: #042F2E;
--hero-gradient: linear-gradient(135deg, #042F2E 0%, #0A4F48 35%, #063E38 65%, #021A19 100%);
/* ── 노이즈 텍스처 ── */
--noise-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
다크 모드 오버라이드
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] {
--bg: #071311;
--bg-card: #0D1F1E;
--bg-card2: #091817;
--bg-glass: rgba(13,31,30,0.80);
--bg-glass-dark: rgba(7,19,17,0.85);
--bg-header: #0B1F1E;
--bg-topbar: #041110;
--bg-mainnav: #082320;
--bg-sidebar: #091817;
--bg-input: #102524;
--text-primary: #E2FAF8;
--text-secondary: #7DB8B5;
--text-muted: #3D6D6A;
--text-on-primary: #FFFFFF;
--border: rgba(13,148,136,0.18);
--border-hover: #2DD4BF;
--border-input: rgba(13,148,136,0.32);
--shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.50);
--shadow-md: 0 4px 16px rgba(0,0,0,0.55);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.60);
--shadow-xl: 0 16px 48px rgba(0,0,0,0.65);
--shadow-card: 0 2px 12px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04);
--shadow-card-hover: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(45,212,191,0.25);
--sb-login-bg: #0A3330;
--sb-region-bg: #9A3412;
--sb-cat-bg: #92400E;
--sb-comm-bg: #065F46;
--sb-vip-bg: #7F1D1D;
--primary-light: rgba(13,148,136,0.15);
--secondary-light: rgba(249,115,22,0.15);
--accent-light: rgba(245,158,11,0.15);
--success-light: rgba(22,163,74,0.15);
--glass-bg: rgba(13,31,30,0.60);
--glass-border: rgba(255,255,255,0.08);
--hero-gradient: linear-gradient(135deg, #021A19 0%, #063530 35%, #042F2E 65%, #010D0C 100%);
}