/* ============================================================================ * tokens.css — 강남교회 예약시스템 색 토큰 단일 소스 (Single Source of Truth) * * 목적: 그동안 파일마다 흩어져 값까지 달랐던 색 토큰을 한 곳으로 통일. * → 향후 테마(다크모드/레트로 등)는 [data-theme="..."]에서 이 값만 덮으면 끝. * * ⚠️ 도입 방식(A단계, 렌더 무변화): * 이 파일은 각 페이지에서 "가장 먼저" 로드되고, 페이지 자체 :root가 뒤에서 * 덮어쓰므로 현재 화면은 그대로다. 페이지별 로컬 :root 제거(값 통일)는 * 이후 단계에서 검증과 함께 진행한다. * * 확정된 결정(제안서 5항): * 1) --color-primary-light = #2d5a9e (primary를 충실히 밝힌 톤) * 2) --surface-page = #f4f4f0 (웜그레이로 전 페이지 통일 — 최종 결정) * 3) 회색 = 슬레이트 단일 척도 (muted/faint/border) * ==========================================================================*/ :root { /* ── 브랜드 ──────────────────────────────────────────── */ --color-primary: #1a3a6b; --color-primary-light: #2d5a9e; /* 결정 1 */ --color-accent: #c8a951; --color-accent-light: #e8c97a; --color-accent-strong: #8b7a35; /* 진골드 */ /* ── 표면(배경) ──────────────────────────────────────── */ --surface: #ffffff; /* 카드/패널 */ --surface-page: #f4f4f0; /* 페이지 배경: 웜그레이로 전 페이지 통일(사용자 결정) */ --surface-sunken: #f5f5f5; /* 섹션 구분/연한 바닥 */ --surface-tint: #f0f4fb; /* hover/선택 강조 (최다 사용) */ --surface-tint-2: #e8eef8; /* ── 테두리(슬레이트 척도) ──────────────────────────── */ --border-strong: #cbd5e1; /* ── 텍스트(슬레이트 척도) ──────────────────────────── */ --text: #1a1a1a; --text-muted: #5b6472; /* 결정 3: #555/#666/#64748b 통합 */ --text-faint: #94a3b8; /* 결정 3: #888/#999/#aaa 통합 */ --text-on-primary: #ffffff; /* ── 상태(글자/배경 쌍) ─────────────────────────────── */ --success-fg: #166534; --success-bg: #f0faf4; --warning-fg: #92400e; --warning-bg: #fff8e1; --danger-fg: #c0392b; --danger-bg: #fdf0f0; --info-fg: #1e40af; --info-bg: #eff6ff; /* ── 레거시 별칭(기존 페이지가 쓰는 이름; 점진 제거 예정) ── * 페이지 로컬 :root를 제거하면 이 값으로 수렴한다. * 값은 "확정 결정 + 기존 지배값"을 반영. 실제 적용은 페이지별 검증 후. */ --primary: var(--color-primary); --primary-light: var(--color-primary-light); --primary-on-surface: var(--color-primary); /* '표면 위 글자/아이콘'용 primary. 다크에서 밝은 파랑으로 분리 */ --accent: var(--color-accent); --accent-light: var(--color-accent-light); --bg: var(--surface-page); --white: #ffffff; /* '색 위의 흰 글자' 전용 — 항상 흰색(배경은 --surface 사용) */ --border: #e2e8f0; /* 결정 3: 쿨톤 기본 테두리 */ --card-bg: var(--surface); /* 매뉴얼 페이지 카드 배경 */ --text-light: var(--text-muted); --error: var(--danger-fg); --danger: var(--danger-fg); /* 매뉴얼 페이지 위험색(--error 동의어) */ --success: #1a7a4a; /* 진초록(단정한 톤)으로 전체 통일 — 사용자 결정 */ --warning: #b86e00; /* 진앰버로 통일 */ --status-waiting: #b86e00; --status-confirmed: #1a7a4a; --status-cancelled: #c0392b; /* ── 컴포넌트 액센트(테마별 값; 흩어진 override 흡수용) ── */ --cell-border: #f5f5f5; /* 캘린더 칸 테두리 */ --cal-vehicle-fg: #8b7a35; /* 캘린더 차량 카운트 */ --cal-facility-fg: #1d6b52; /* 캘린더 장소 카운트 */ --tl-base-fg: #334155; /* 타임라인 레이블 기본 */ --tl-vehicle-fg: #5a4d24; --tl-facility-fg: #134a3a; --tl-edu3-fg: #9a3412; --tl-retreat-fg: #5b21b6; --panel-soft: rgba(255, 255, 255, 0.6); /* 반투명 패널(mini-timeline 등) */ } /* ============================================================================ * 다크 테마 — 일 때만 활성. 토큰값만 덮어쓴다. * (--white은 '색 위 흰 글자' 전용이라 다크에서도 #ffffff 유지) * ==========================================================================*/ [data-theme="dark"] { /* 브랜드 */ --color-primary: #3d72bd; /* 버튼 배경용(흰 글자와 대비 확보) */ --color-primary-light: #5a8fd6; --primary-on-surface: #6c9bd6; /* 표면 위 글자/아이콘용(밝은 파랑) */ --color-accent: #d4b86a; --color-accent-light: #e6cf8e; --color-accent-strong: #c8a951; /* 표면(어두울수록 바닥) */ --surface: #1e2230; /* 카드 */ --surface-page: #14161d; /* 페이지 배경 */ --surface-sunken: #0f1116; --surface-tint: #283149; /* hover/선택 */ --surface-tint-2: #2f3a54; /* 테두리 */ --border-strong: #3d4658; --border: #2c3344; /* 레거시 하드코딩 override */ /* 텍스트 */ --text: #e6e9f0; --text-muted: #9aa3b5; --text-faint: #828c9e; /* 표면 위 대비 확보(빈 상태/보조 텍스트) */ --text-on-primary: #ffffff; /* 상태(글자/배경 쌍) */ --success-fg: #4ade80; --success-bg: #16271c; --warning-fg: #fbbf24; --warning-bg: #2a2310; --danger-fg: #f87171; --danger-bg: #2a1715; --info-fg: #7aa7e0; --info-bg: #18233a; /* 레거시 상태색(하드코딩) override — 어두운 배경에서 보이도록 밝게 */ --success: #4ade80; --warning: #fbbf24; --status-waiting: #fbbf24; --status-confirmed: #4ade80; --status-cancelled: #f87171; /* 컴포넌트 액센트 — 다크 */ --cell-border: #3d4658; --cal-vehicle-fg: #fbbf24; --cal-facility-fg: #4ade80; --tl-base-fg: #9aa3b5; --tl-vehicle-fg: #d4b86a; --tl-facility-fg: #5fd3a0; --tl-edu3-fg: #fb923c; --tl-retreat-fg: #b794f4; --panel-soft: var(--surface); } /* ============================================================================ * 레트로 — Hercules (단색 인광 그린 CRT). . * 토큰값만 바꿔 전 페이지를 모노크롬 그린으로. (시안: 색+글로우+스캔라인, * 픽셀폰트는 별도 옵션) * ==========================================================================*/ [data-theme="hercules"] { /* 브랜드 — 골드 대신 인광 그린 */ --color-primary: #2f7d4a; /* 버튼 배경(밝은 글자 대비) */ --color-primary-light: #3fa566; --color-accent: #5cff8f; /* 강조 = 밝은 인광 그린 */ --color-accent-light: #8effb0; --color-accent-strong: #33d06a; /* 표면 — 검정에 가까운 녹흑 */ --surface: #08140b; --surface-page: #030a05; --surface-sunken: #020602; --surface-tint: #0e2415; --surface-tint-2: #123019; /* 테두리 — 어두운 그린 */ --border-strong: #2a7a48; --border: #154a2a; /* 텍스트 — 인광 그린 단계 */ --text: #33d06a; --text-muted: #2aa85a; --text-faint: #1c7a40; --text-on-primary: #eaffef; /* 그린 버튼 위 밝은 글자 */ /* 상태 — 단색 톤(취소만 허용 가능한 웜레드) */ --success-fg: #5cff8f; --success-bg: #06160b; --warning-fg: #b6e84a; --warning-bg: #141a06; --danger-fg: #3f9d63; --danger-bg: #0c1a0e; /* 100% 단색: 위험도 그린(차분한 톤) */ --info-fg: #5cffd0; --info-bg: #06160f; /* 레거시 별칭 override — 전부 그린 계열(상태 구분은 밝기로) */ --primary-on-surface: #5cff8f; /* 표면 위 제목/링크 = 밝은 그린 */ --accent: #5cff8f; --accent-light: #8effb0; --white: #eaffef; /* '색 위 밝은 글자' → 녹백 */ --border: #154a2a; --error: #3f9d63; /* 에러도 그린(차분) */ --success: #33d06a; --warning: #8fd14a; --status-waiting: #8fd14a; /* 대기 = 라임 그린 */ --status-confirmed: #33d06a; /* 확정 = 표준 그린 */ --status-cancelled: #3f9d63; /* 취소 = 차분한(어두운) 그린 */ /* 컴포넌트 액센트 — Hercules(단색 그린) */ --cell-border: #2a7a48; --cal-vehicle-fg: #b6e84a; --cal-facility-fg: #5cff8f; --tl-base-fg: #33d06a; --tl-vehicle-fg: #5cff8f; --tl-facility-fg: #5cff8f; --tl-edu3-fg: #5cff8f; --tl-retreat-fg: #5cff8f; --panel-soft: var(--surface-tint); } /* Hercules: 고정 빨강을 쓰던 토스트도 그린으로(100% 단색) */ [data-theme="hercules"] .toast.error { background: #1f5a36 !important; } [data-theme="hercules"] .toast.success { background: #1a7a4a !important; } /* CRT 느낌: 방사형 인광 배경 + 인광 글로우 + 스캔라인 + 비네팅 — Hercules에서만 */ [data-theme="hercules"] body { background: radial-gradient(1200px 760px at 50% -8%, #0d1e10 0%, #050d06 55%, #020602 100%) !important; background-attachment: fixed !important; text-shadow: none; /* 본문은 또렷하게(글로우 번짐/고스팅 방지) */ } /* 스캔라인 + 가장자리 비네팅(둘 다 클릭 통과) */ [data-theme="hercules"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2147482000; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 4px), radial-gradient(135% 135% at 50% 42%, transparent 60%, rgba(0, 0, 0, 0.45) 100%); } /* 제목/강조는 더 진한 인광 글로우 */ [data-theme="hercules"] h1, [data-theme="hercules"] h2, [data-theme="hercules"] h3, [data-theme="hercules"] strong, [data-theme="hercules"] .header-name { text-shadow: 0 0 3px rgba(92, 255, 143, 0.30); } /* 밝은 그린(accent) 배경 CTA/헤더는 글자를 어둡게 — 흰 글자 저대비 보정 */ [data-theme="hercules"] .page-title-card, [data-theme="hercules"] .page-title-card *, [data-theme="hercules"] .submit-btn, [data-theme="hercules"] .wz-next-btn, [data-theme="hercules"] .success-back-btn, [data-theme="hercules"] .wz-step.active .wz-step-circle, [data-theme="hercules"] .wz-step.done .wz-step-circle, [data-theme="hercules"] .idx-reason-confirm, [data-theme="hercules"] .btn-modal-confirm, [data-theme="hercules"] .tab-waiting-badge { color: #04140a !important; text-shadow: none !important; } /* 밝은 그린 카드(이전 동의 기록 등) → 어두운 표면 + 그린 글자 */ [data-theme="hercules"] .terms-prev-agreed { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* 신청서 모달/대화상자: 표면이 페이지(거의 검정)와 비슷해 안 보임 → 테두리로 분리, * Hercules는 약간 밝은 표면 + 또렷한 그린 테두리로 "떠 보이게" */ html[data-theme] .alert-box, html[data-theme] .place-history-dialog, html[data-theme] .vehicle-history-dialog, html[data-theme] .drum-sheet, html[data-theme] .cal-picker { border: 1px solid var(--border-strong); } [data-theme="hercules"] .alert-box, [data-theme="hercules"] .place-history-dialog, [data-theme="hercules"] .vehicle-history-dialog, [data-theme="hercules"] .drum-sheet, [data-theme="hercules"] .cal-picker { background: var(--surface-tint) !important; border: 1px solid var(--accent) !important; box-shadow: 0 0 18px rgba(92, 255, 143, 0.18), 0 20px 60px rgba(0, 0, 0, 0.6) !important; } [data-theme="hercules"] .alert-confirm-btn { color: #04140a !important; } /* '선택된 날짜' 박스: 하드코딩 밝은 파랑 그라데이션 → 어두운 표면(다크+Hercules) */ html[data-theme] .cal-selected-wrap { background: var(--surface) !important; border-color: var(--border) !important; } /* 픽셀폰트(갈무리) — 폰트 파일은 theme-toggle.js가 Hercules 켤 때만 지연 로드 */ [data-theme="hercules"] body, [data-theme="hercules"] body * { font-family: 'Galmuri11', 'GalmuriMono11', monospace !important; -webkit-font-smoothing: none; }