/* ═══════════════════════════════════════════════════════════════════ * briefing-theme-v1.css * * R9 브리핑 메이커 페이지(4종) + 모달 + 관리자 결제 페이지의 * 4-테마 (classic / dark / deepfloat / gradient) 통합 지원. * * 적용 대상: * - briefing_credit.html * - briefing_result.html * - briefing_charge_success.html * - briefing_charge_fail.html * - admin_briefing_payment.html * - assets/js/briefing_starter.js (모달) * * 동작 원리: * 페이지마다 다음 CSS 변수를 var()로 참조하므로, * 값에 따라 토큰만 재정의해도 * 모든 카드/버튼/모달/리스트가 자동으로 테마에 맞게 바뀐다. * * 토큰: --primary --primary2 --navy --gold --gold-bg * --gray-50 --gray-100 --gray-200 --gray-500 --gray-700 --gray-900 * --danger --success --paid --bonus * --bg-page (body 그라데이션/색) * --bg-card (카드/모달 배경) * --bg-soft (테이블 헤더, 토스트 등 부드러운 배경) * --border (카드/모달 보더) * --text (기본 텍스트) * --text-sub (서브 텍스트) * --shadow (카드 그림자) * * 2026-05-23 — R9 Phase 5 UX 보강 * ═══════════════════════════════════════════════════════════════════ */ /* ── 0) 공통 기본값 (classic 테마 = 기존 색감 그대로) ────────────── */ :root, html[data-card-theme="classic"] { --primary: #667eea; --primary2: #764ba2; --navy: #0c2046; --gold: #b78b3a; --gold-bg: #fff8e6; --paid: #2e7d32; --bonus: #b78b3a; --gray-50: #f7f8fa; --gray-100: #eef0f3; --gray-200: #dde1e8; --gray-500: #6b7280; --gray-700: #374151; --gray-900: #111827; --danger: #c62828; --success: #2e7d32; --bg-page: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --bg-card: #ffffff; --bg-soft: #f7f8fa; --border: #dde1e8; --text: #111827; --text-sub:#6b7280; --shadow: 0 5px 20px rgba(0,0,0,0.1); --shadow-sm: 0 4px 14px rgba(0,0,0,0.07); --modal-overlay: rgba(12, 32, 70, 0.55); } /* ── 1) DARK 테마 ────────────────────────────────────────────────── */ html[data-card-theme="dark"] { --primary: #818cf8; --primary2: #a78bfa; --navy: #e2e8f0; /* 다크에서 navy 토큰은 '큰 강조 텍스트'로 쓰임 */ --gold: #fbbf24; --gold-bg: #3f2d10; --paid: #4ade80; --bonus: #fbbf24; --gray-50: #1f2937; --gray-100: #2d3548; --gray-200: #3a4257; --gray-500: #94a3b8; --gray-700: #cbd5e1; --gray-900: #f1f5f9; --danger: #f87171; --success: #4ade80; --bg-page: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); --bg-card: #1e293b; --bg-soft: #0f172a; --border: #334155; --text: #f1f5f9; --text-sub:#94a3b8; --shadow: 0 5px 20px rgba(0,0,0,0.45); --shadow-sm: 0 4px 14px rgba(0,0,0,0.35); --modal-overlay: rgba(0, 0, 0, 0.7); } /* ── 2) DEEPFLOAT 테마 (남청 + 진주 화이트) ─────────────────────── */ html[data-card-theme="deepfloat"] { --primary: #6366f1; --primary2: #8b5cf6; --navy: #1e1b4b; --gold: #c08a3e; --gold-bg: #fef3c7; --paid: #059669; --bonus: #c08a3e; --gray-50: #f1f5f9; --gray-100: #e2e8f0; --gray-200: #cbd5e1; --gray-500: #64748b; --gray-700: #334155; --gray-900: #0f172a; --danger: #dc2626; --success: #059669; --bg-page: linear-gradient(160deg, #1e293b 0%, #312e81 50%, #1e1b4b 100%); --bg-card: #ffffff; --bg-soft: #f8fafc; --border: #e2e8f0; --text: #0f172a; --text-sub:#64748b; --shadow: 0 10px 30px rgba(30, 27, 75, 0.35); --shadow-sm: 0 6px 18px rgba(30, 27, 75, 0.25); --modal-overlay: rgba(30, 27, 75, 0.65); } /* ── 3) GRADIENT 테마 (선셋 그라데이션) ─────────────────────────── */ html[data-card-theme="gradient"] { --primary: #ec4899; --primary2: #f97316; --navy: #831843; --gold: #d97706; --gold-bg: #fef3c7; --paid: #16a34a; --bonus: #d97706; --gray-50: #fff7ed; --gray-100: #fde6d3; --gray-200: #fbcfa3; --gray-500: #78350f; --gray-700: #57210a; --gray-900: #1c0a02; --danger: #dc2626; --success: #16a34a; --bg-page: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%); --bg-card: #ffffff; --bg-soft: #fff7ed; --border: #fde6d3; --text: #1c0a02; --text-sub:#78350f; --shadow: 0 10px 30px rgba(236, 72, 153, 0.25); --shadow-sm: 0 6px 18px rgba(236, 72, 153, 0.18); --modal-overlay: rgba(131, 24, 67, 0.6); } /* ═══════════════════════════════════════════════════════════════════ * 공통 적용 — 페이지 body / 카드 / 모달 표면색 * (기존 스타일이 var()을 참조하지 않는 부분만 보강) * ═══════════════════════════════════════════════════════════════════ */ /* body 배경은 --bg-page 사용 */ body { background: var(--bg-page); color: var(--text); } /* 흰색으로 하드코딩된 카드 → --bg-card */ .header, .card, .ledger-card, .meta-card, .state-box, .result-wrap, .modal, .toast-card, .charge-result, .detail-card, .section-card { background: var(--bg-card); box-shadow: var(--shadow); } .meta-card { box-shadow: var(--shadow-sm); } /* 다크 테마 — 입력 필드 텍스트 가독성 */ html[data-card-theme="dark"] .modal input, html[data-card-theme="dark"] .modal textarea, html[data-card-theme="dark"] .modal select, html[data-card-theme="dark"] input[type="number"], html[data-card-theme="dark"] input[type="text"], html[data-card-theme="dark"] input[type="email"] { background: var(--bg-soft); color: var(--text); border-color: var(--border); } /* 모달 오버레이 */ .modal-overlay { background: var(--modal-overlay); } /* 테이블 호버 — 테마별로 */ html[data-card-theme="dark"] .ledger-table tr:hover td { background: rgba(255,255,255,0.04); } html[data-card-theme="dark"] .ledger-table th { background: var(--bg-soft); color: var(--text-sub); } html[data-card-theme="dark"] .ledger-table td { border-bottom-color: var(--border); color: var(--text); } /* pill 류 — 다크 테마에서 채도 보정 */ html[data-card-theme="dark"] .pill.charge { background: #1e3a8a; color: #93c5fd; } html[data-card-theme="dark"] .pill.bonus_grant { background: #422006; color: #fbbf24; } html[data-card-theme="dark"] .pill.use { background: #4c1d95; color: #c4b5fd; } html[data-card-theme="dark"] .pill.refund { background: #7f1d1d; color: #fca5a5; } html[data-card-theme="dark"] .pill.hold { background: #78350f; color: #fdba74; } html[data-card-theme="dark"] .pill.release { background: #134e4a; color: #5eead4; } /* gradient 테마 — 보너스 배경 대비 보정 */ html[data-card-theme="gradient"] .notice { background: var(--gold-bg); border-color: #fbbf24; color: #78350f; } /* 결과 페이지 iframe 외곽 — 다크 테마에서는 iframe 둘레만 어둡게. iframe 내부(AI 생성 HTML)는 sandbox 격리 + 원본 색감(파랑 fact / 황토 creative) 그대로 유지 */ html[data-card-theme="dark"] .result-toolbar, html[data-card-theme="dark"] .meta-card .lab, html[data-card-theme="dark"] .header .meta { color: var(--text-sub); } /* btn-ghost 가독성 — 다크에서 회색 위 흰 글씨 */ html[data-card-theme="dark"] .btn-ghost { background: var(--bg-soft); color: var(--text-sub); border: 1px solid var(--border); } html[data-card-theme="dark"] .btn-ghost:hover { background: var(--gray-100); color: var(--text); } /* h1/h2/h3 색상 — primary 토큰 사용 */ .header h1, .modal h3 { color: var(--primary); } /* 그림자 사용처 그라데이션 박스 그림자 보정 */ .card, .ledger-card, .state-box { border: 1px solid var(--border); } /* empty / sub 텍스트 */ .empty { color: var(--text-sub); } /* 토스트 (브리핑 결과 페이지) */ .toast { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); } /* admin payment 페이지 호환 토큰 */ .admin-card { background: var(--bg-card); box-shadow: var(--shadow); border: 1px solid var(--border); color: var(--text); }