/* ================================================================ theme.css — 테마 정의 파일 사용법: → 다크 테마 (기존 스타일) → 화이트 테마 (Vercel 스타일) JS: document.documentElement.setAttribute('data-theme', 'white') ================================================================ */ /* ────────────────────────────────────────────── THEME: DARK (기존 다크 테마 — Blue on Black) ────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0c0d10; --bg2: #111318; --bg3: #16181e; --card: #131519; --blue: #5b8def; --blue-lt: #7ca8f5; --blue-dk: #2d5bbf; --blue-dim: rgba(91,141,239,0.07); --text: #e4e8f2; --muted: #727a8f; --subtle: #252a38; --border: rgba(91,141,239,0.11); --border-hv: rgba(91,141,239,0.28); --radius: 20px; --radius-sm: 12px; --th-surface: #1a1d24; --th-border: rgba(91,141,239,0.2); --th-trigger-color: #e4e8f2; } [data-theme="dark"] body::before { background: radial-gradient(ellipse 60% 45% at 75% 0%, rgba(91,141,239,0.07) 0%, transparent 65%), radial-gradient(ellipse 45% 35% at 10% 90%, rgba(45,91,191,0.05) 0%, transparent 60%); } [data-theme="dark"] nav { background: rgba(8,12,20,0.88); border-bottom-color: rgba(91,141,239,0.11); } [data-theme="dark"] .nav-logo em { color: var(--blue-lt); } [data-theme="dark"] .hero::after { background-image: linear-gradient(rgba(91,141,239,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(91,141,239,0.03) 1px, transparent 1px); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 75%); } [data-theme="dark"] .hero-kicker { background: var(--blue-dim); border-color: rgba(91,141,239,0.20); color: var(--blue-lt); } [data-theme="dark"] .hi { color: var(--blue-lt); } [data-theme="dark"] .section-title em, [data-theme="dark"] .flow-title em, [data-theme="dark"] .voice-title em { color: var(--blue-lt); } [data-theme="dark"] .stats-band { background: var(--bg2); border-color: var(--border); } [data-theme="dark"] .step-box { background: var(--card); border-color: var(--border); } [data-theme="dark"] .step-box:hover { border-color: var(--border-hv); } [data-theme="dark"] .step-num { background: var(--blue); color: #fff; box-shadow: 0 0 14px rgba(91,141,239,0.3); } [data-theme="dark"] .flow-wrap { background: var(--bg2); border-color: var(--border); } [data-theme="dark"] .flow-card { background: var(--bg3); border-color: var(--border); } [data-theme="dark"] .flow-card.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 8px 32px rgba(91,141,239,0.15); } [data-theme="dark"] .flow-tag { background: rgba(91,141,239,0.12); color: var(--blue-lt); border-color: rgba(91,141,239,0.25); } [data-theme="dark"] .flow-tag.wait { background: rgba(255,255,255,0.04); color: var(--muted); border-color: var(--border); } [data-theme="dark"] .feat-box { background: var(--card); border-color: var(--border); } [data-theme="dark"] .feat-box:hover { border-color: var(--border-hv); background: var(--bg2); } [data-theme="dark"] .faq-item { border-bottom-color: var(--border); } [data-theme="dark"] .faq-q { color: var(--text); } [data-theme="dark"] .faq-item.open .faq-q { color: var(--blue-lt); } [data-theme="dark"] .faq-a { background: var(--bg2); color: var(--muted); border-top-color: var(--border); } [data-theme="dark"] .cta-inner { background: var(--card); border-color: var(--border); } [data-theme="dark"] footer { border-top-color: var(--border); } [data-theme="dark"] .footer-logo { color: var(--muted); } [data-theme="dark"] .footer-logo em { color: var(--blue-lt); } [data-theme="dark"] .footer-links a { color: var(--muted); } [data-theme="dark"] .footer-links a:hover { color: var(--text); } [data-theme="dark"] .footer-copy { color: var(--muted); } /* ────────────────────────────────────────────── THEME: WHITE (moveto.run 스타일 — Purple/Teal on White) ────────────────────────────────────────────── */ [data-theme="white"] { --bg: #ffffff; --bg2: #111120; /* 다크 서피스는 쓰지 않으나 호환용 */ --bg3: #16162a; --card: #f8fafc; /* moveto.run --surface */ --blue: #5b6ef5; /* moveto.run --accent */ --blue-lt: #9b6ef5; /* moveto.run --accent2 */ --blue-dk: #3a4fd4; --blue-dim: rgba(91,110,245,0.08); --text: #1e293b; --muted: #64748b; --subtle: #e2e8f0; --border: rgba(0,0,0,0.07); --border-hv: rgba(91,110,245,0.35); --radius: 16px; --radius-sm: 10px; --th-surface: #ffffff; --th-border: rgba(0,0,0,0.12); --th-trigger-color: #1e293b; } /* WHITE: body */ [data-theme="white"] body { background: #ffffff; color: #1e293b; } /* WHITE: 배경 그라디언트 — moveto.run 오브 스타일 */ [data-theme="white"] body::before { background: radial-gradient(ellipse 55% 40% at 70% 0%, rgba(91,110,245,0.06) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 15% 90%, rgba(155,110,245,0.05) 0%, transparent 60%); } /* WHITE: nav */ [data-theme="white"] nav { background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,0,0,0.07); } [data-theme="white"] .nav-logo { color: #1e293b; } [data-theme="white"] .nav-logo em { color: #5b6ef5; } [data-theme="white"] .nav-links a { color: #64748b; } [data-theme="white"] .nav-links a:hover { color: #1e293b; } [data-theme="white"] .nav-cta { background: linear-gradient(135deg, #5b6ef5, #9b6ef5); color: #fff; box-shadow: 0 2px 12px rgba(91,110,245,0.25); border-radius: 8px; } [data-theme="white"] .nav-cta:hover { box-shadow: 0 4px 20px rgba(91,110,245,0.38); transform: translateY(-1px); } /* WHITE: hero 그리드 — moveto.run 연한 퍼플 그리드 */ [data-theme="white"] .hero::after { display: block; background-image: linear-gradient(rgba(91,110,245,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(91,110,245,0.05) 1px, transparent 1px); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 75%); } /* WHITE: hero kicker */ [data-theme="white"] .hero-kicker { background: rgba(91,110,245,0.07); border: 1px solid rgba(91,110,245,0.2); color: #5b6ef5; } [data-theme="white"] .kicker-dot { background: #5b6ef5; box-shadow: 0 0 6px rgba(91,110,245,0.5); } /* WHITE: hero title — moveto.run 방식: 검정 텍스트 */ [data-theme="white"] .hero-title { color: #0f172a; } [data-theme="white"] .hi { background: linear-gradient(135deg, #5b6ef5, #9b6ef5, #3ecbf5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="white"] .hero-sub { color: #64748b; } [data-theme="white"] .hero-sub strong { color: #1e293b; } /* WHITE: hero buttons */ [data-theme="white"] .btn-main { background: linear-gradient(135deg, #5b6ef5, #9b6ef5); color: #fff; box-shadow: 0 4px 20px rgba(91,110,245,0.28); border-radius: 100px; } [data-theme="white"] .btn-main:hover { box-shadow: 0 8px 32px rgba(91,110,245,0.38); transform: translateY(-2px); } [data-theme="white"] .btn-sec { border: 1.5px solid rgba(91,110,245,0.25); color: #1e293b; border-radius: 100px; } [data-theme="white"] .btn-sec:hover { border-color: rgba(91,110,245,0.5); color: #5b6ef5; background: rgba(91,110,245,0.05); } /* WHITE: ai badges */ [data-theme="white"] .ai-badge { background: rgba(91,110,245,0.05); border: 1px solid rgba(91,110,245,0.15); color: #1e293b; } [data-theme="white"] .ai-badge:hover { border-color: rgba(91,110,245,0.35); background: rgba(91,110,245,0.08); } [data-theme="white"] .ai-badge .dot { background: #5b6ef5; } [data-theme="white"] .ai-logos-label { color: #64748b; } /* WHITE: stats */ [data-theme="white"] .stats-band { background: #f8fafc; border-top: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07); } [data-theme="white"] .stat-num { color: #0f172a; } [data-theme="white"] .stat-desc { color: #64748b; } /* WHITE: 섹션 공통 */ [data-theme="white"] .section-label { color: #5b6ef5; border: 1px solid rgba(91,110,245,0.2); background: rgba(91,110,245,0.06); display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.08em; } [data-theme="white"] .section-title { color: #0f172a; } [data-theme="white"] .section-title em { color: #5b6ef5; font-style: normal; } [data-theme="white"] .section-sub { color: #64748b; } /* WHITE: step-box — moveto.run 카드 스타일 */ [data-theme="white"] .step-box { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 2px 12px rgba(91,110,245,0.06); } [data-theme="white"] .step-box:hover { border-color: rgba(91,110,245,0.3); box-shadow: 0 8px 28px rgba(91,110,245,0.12); transform: translateY(-3px); } [data-theme="white"] .step-num { background: linear-gradient(135deg, #5b6ef5, #9b6ef5); color: #fff; box-shadow: 0 4px 14px rgba(91,110,245,0.3); border-radius: 12px; } [data-theme="white"] .step-title { color: #0f172a; } [data-theme="white"] .step-desc { color: #64748b; } /* WHITE: flow */ [data-theme="white"] .flow-wrap { background: #f8fafc; border-color: rgba(0,0,0,0.07); } [data-theme="white"] .flow-title { color: #0f172a; } [data-theme="white"] .flow-title em { color: #5b6ef5; font-style: normal; } [data-theme="white"] .flow-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 2px 8px rgba(91,110,245,0.05); } [data-theme="white"] .flow-card.active { border-color: #5b6ef5; box-shadow: 0 0 0 1px #5b6ef5, 0 8px 24px rgba(91,110,245,0.14); } [data-theme="white"] .flow-ico { color: #1e293b; } [data-theme="white"] .flow-label { color: #0f172a; } [data-theme="white"] .flow-desc { color: #64748b; } [data-theme="white"] .flow-arrow { color: #94a3b8; } [data-theme="white"] .flow-tag { background: rgba(91,110,245,0.08); color: #5b6ef5; border: 1px solid rgba(91,110,245,0.2); } [data-theme="white"] .flow-tag.wait { background: #f1f5f9; color: #94a3b8; border-color: rgba(0,0,0,0.07); } /* WHITE: feat-box */ [data-theme="white"] .feat-box { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 2px 12px rgba(91,110,245,0.06); } [data-theme="white"] .feat-box:hover { border-color: rgba(91,110,245,0.3); background: #ffffff; box-shadow: 0 8px 28px rgba(91,110,245,0.12); transform: translateY(-3px); } [data-theme="white"] .feat-title { color: #0f172a; } [data-theme="white"] .feat-desc { color: #64748b; } /* WHITE: faq */ [data-theme="white"] .faq-item { border-bottom: 1px solid rgba(0,0,0,0.07); } [data-theme="white"] .faq-q { color: #1e293b; } [data-theme="white"] .faq-q:hover { color: #5b6ef5; } [data-theme="white"] .faq-item.open .faq-q { color: #5b6ef5; } [data-theme="white"] .faq-icon { color: #94a3b8; } [data-theme="white"] .faq-a { background: rgba(91,110,245,0.04); color: #64748b; border-top: 1px solid rgba(91,110,245,0.1); } /* WHITE: cta */ [data-theme="white"] .cta-inner { background: linear-gradient(135deg, rgba(91,110,245,0.08), rgba(155,110,245,0.06)); border: 1px solid rgba(91,110,245,0.2); border-radius: 20px; } [data-theme="white"] .cta-title { color: #0f172a; } [data-theme="white"] .cta-sub { color: #64748b; } [data-theme="white"] .cta-btn { background: linear-gradient(135deg, #5b6ef5, #9b6ef5); color: #fff; box-shadow: 0 4px 20px rgba(91,110,245,0.28); border-radius: 100px; } [data-theme="white"] .cta-btn:hover { box-shadow: 0 8px 32px rgba(91,110,245,0.38); transform: translateY(-2px); } [data-theme="white"] .cta-btn-sec { border-color: rgba(91,110,245,0.3); color: #5b6ef5; } [data-theme="white"] .cta-btn-sec:hover { border-color: rgba(91,110,245,0.5); background: rgba(91,110,245,0.06); } /* WHITE: footer */ [data-theme="white"] footer { background: #f8fafc; border-top: 1px solid rgba(0,0,0,0.07); } [data-theme="white"] .footer-logo { color: #64748b; } [data-theme="white"] .footer-logo em { color: #3ecbf5; font-style: normal; } [data-theme="white"] .footer-links a { color: #64748b; } [data-theme="white"] .footer-links a:hover { color: #1e293b; } [data-theme="white"] .footer-copy { color: #94a3b8; } /* WHITE: 테마 드롭다운 dot */ [data-theme="white"] .theme-opt[data-target="white"] .th-dot { background: linear-gradient(135deg, #5b6ef5, #9b6ef5); } /* ────────────────────────────────────────────── 테마 드롭다운 공통 스타일 (두 테마 공유) ────────────────────────────────────────────── */ .theme-switcher { position: relative; z-index: 600; } .theme-trigger { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: transparent; border: 1px solid var(--th-border, var(--border)); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--th-trigger-color, var(--text)); letter-spacing: -0.01em; transition: border-color 0.2s, background 0.2s; white-space: nowrap; } .theme-trigger:hover { background: var(--blue-dim, rgba(0,0,0,0.04)); border-color: var(--border-hv, #a3a3a3); } .theme-trigger .th-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background 0.2s; } .theme-trigger .th-arrow { font-size: 0.55rem; color: var(--muted); transition: transform 0.2s; line-height: 1; } .theme-switcher.open .th-arrow { transform: rotate(180deg); } to { opacity: 1; transform: translateY(0); } .theme-opt { display: flex; align-items: center; gap: 8px; padding: 9px 14px; width: 100%; border: none; background: transparent; font-family: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s; white-space: nowrap; } .theme-opt:hover { background: var(--blue-dim, rgba(0,0,0,0.04)); color: var(--text); } .theme-opt.active { color: var(--text); } .theme-opt .th-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .theme-opt[data-target="dark"] .th-dot { background: #5b8def; } .theme-opt[data-target="white"] .th-dot { background: #000; } [data-theme="dark"] .theme-opt[data-target="dark"].active { color: #7ca8f5; } [data-theme="white"] .theme-opt[data-target="white"].active { color: #000; } /* ================================================================ AUTH PAGES — login / signup / reset-password 전용 테마 인라인 style에서 반복되는 색상값을 변수로 관리합니다. ================================================================ */ /* ── DARK 테마 ── */ [data-theme="dark"] { --auth-bg: #0c0d10; --auth-card: #111318; --auth-surface2: #16181e; --auth-input-bg: #16181e; --auth-heading: #e4e8f2; --auth-text: #e4e8f2; --auth-muted: #727a8f; --auth-placeholder: #505870; --auth-card-border: rgba(91,141,239,0.22); --auth-input-border: rgba(255,255,255,0.10); --auth-divider: rgba(255,255,255,0.09); --auth-noise: 1; } /* DARK: body & 배경 */ [data-theme="dark"] body { background: var(--auth-bg); color: var(--auth-text); } [data-theme="dark"] body::before { background: radial-gradient(ellipse 55% 40% at 70% 0%, rgba(91,141,239,0.12) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 15% 90%, rgba(155,110,245,0.09) 0%, transparent 60%); } [data-theme="dark"] body::after { background-image: linear-gradient(rgba(91,141,239,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(91,141,239,0.04) 1px, transparent 1px); } /* DARK: 로고 */ [data-theme="dark"] .logo { color: #e4e8f2; } [data-theme="dark"] .logo em, [data-theme="dark"] .logo span { color: #7ca8f5; } /* DARK: 카드 */ [data-theme="dark"] .card { background: var(--auth-card); border-color: rgba(91,141,239,0.22); box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(91,141,239,0.08); } [data-theme="dark"] .card-title { color: #e4e8f2; } [data-theme="dark"] .card-sub { color: #727a8f; } /* DARK: 스텝 인디케이터 (signup) */ [data-theme="dark"] .step-dot { border-color: rgba(255,255,255,0.15); background: #16181e; color: #727a8f; } [data-theme="dark"] .step-dot.active { border-color: #5b8def; background: #5b8def; box-shadow: 0 0 14px rgba(91,141,239,0.45); } [data-theme="dark"] .step-dot.done { border-color: #34d399; color: #34d399; background: rgba(52,211,153,0.12); } [data-theme="dark"] .step-label { color: #727a8f; } [data-theme="dark"] .step-label.active { color: #e4e8f2; } [data-theme="dark"] .step-line { background: rgba(255,255,255,0.10); } [data-theme="dark"] .step-line.done { background: #34d399; } /* DARK: 필드 */ [data-theme="dark"] .field label { color: #727a8f; } [data-theme="dark"] .field input { background: var(--auth-surface2); border-color: rgba(255,255,255,0.10); color: #e4e8f2; } [data-theme="dark"] .field input::placeholder { color: #505870; } [data-theme="dark"] .field input:focus { border-color: rgba(91,141,239,0.55); background: #1a1d26; box-shadow: 0 0 0 3px rgba(91,141,239,0.14); } /* DARK: 인증 관련 (signup) */ [data-theme="dark"] .btn-sm { background: #16181e; color: #3ecbf5; border-color: rgba(62,203,245,0.3); } [data-theme="dark"] .btn-sm:hover { background: rgba(62,203,245,0.08); } [data-theme="dark"] .verified-badge { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.25); color: #34d399; } [data-theme="dark"] .timer { color: #727a8f; } [data-theme="dark"] .timer.urgent { color: #f87171; } /* DARK: 이메일 디스플레이 (reset-password) */ [data-theme="dark"] .email-display { background: #16181e; border-color: rgba(255,255,255,0.09); color: #3ecbf5; } /* DARK: 버튼 */ [data-theme="dark"] .btn-submit { box-shadow: 0 4px 20px rgba(91,141,239,0.30); } [data-theme="dark"] .btn-submit:hover { box-shadow: 0 8px 32px rgba(91,141,239,0.42); } /* DARK: 구글 버튼 (login) */ [data-theme="dark"] .btn-google { background: #1a1d26; border-color: rgba(255,255,255,0.12); color: #e4e8f2; } [data-theme="dark"] .btn-google:hover { background: #1f2333; border-color: rgba(91,141,239,0.28); } /* DARK: 구분선 */ [data-theme="dark"] .divider::before, [data-theme="dark"] .divider::after { background: rgba(255,255,255,0.09); } [data-theme="dark"] .divider span { color: #727a8f; } /* DARK: 링크 */ [data-theme="dark"] .signup-link, [data-theme="dark"] .login-link { color: #727a8f; } [data-theme="dark"] .signup-link a, [data-theme="dark"] .login-link a { color: #7ca8f5; } [data-theme="dark"] .foot-note { color: #727a8f; } [data-theme="dark"] .btn-forgot { color: #727a8f; } [data-theme="dark"] .btn-forgot:hover { color: #7ca8f5; } /* DARK: 모달 (login) */ [data-theme="dark"] .modal-box { background: #111318; border-color: rgba(91,141,239,0.25); box-shadow: 0 12px 48px rgba(0,0,0,0.6); } [data-theme="dark"] .modal-head { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .modal-head-title { color: #e4e8f2; } [data-theme="dark"] .modal-close { background: #16181e; border-color: rgba(255,255,255,0.10); color: #727a8f; } [data-theme="dark"] .modal-close:hover { border-color: rgba(91,141,239,0.35); color: #e4e8f2; } [data-theme="dark"] .modal-desc { color: #727a8f; } [data-theme="dark"] .modal-input { background: #16181e; border-color: rgba(255,255,255,0.10); color: #e4e8f2; } [data-theme="dark"] .modal-input:focus { border-color: rgba(91,141,239,0.5); box-shadow: 0 0 0 3px rgba(91,141,239,0.12); } [data-theme="dark"] .modal-btn-cancel { border-color: rgba(255,255,255,0.10); color: #727a8f; } [data-theme="dark"] .modal-btn-cancel:hover { border-color: rgba(91,141,239,0.35); color: #e4e8f2; } /* ── WHITE 테마 ── */ [data-theme="white"] { --auth-bg: #ffffff; --auth-card: #ffffff; --auth-surface2: #f8fafc; --auth-input-bg: #f8fafc; --auth-heading: #0f172a; --auth-text: #1e293b; --auth-muted: #64748b; --auth-placeholder: #94a3b8; --auth-card-border: rgba(91,110,245,0.18); --auth-input-border: rgba(0,0,0,0.10); --auth-divider: rgba(0,0,0,0.09); } /* WHITE: body & 배경 */ [data-theme="white"] body { background: #ffffff; color: #1e293b; } [data-theme="white"] body::before { background: radial-gradient(ellipse 55% 40% at 70% 0%, rgba(91,110,245,0.08) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 15% 90%, rgba(155,110,245,0.06) 0%, transparent 60%); } [data-theme="white"] body::after { background-image: linear-gradient(rgba(91,110,245,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(91,110,245,0.04) 1px, transparent 1px); } /* WHITE: 로고 */ [data-theme="white"] .logo { color: #0f172a; } [data-theme="white"] .logo em { color: #5b6ef5; } [data-theme="white"] .logo span { background: linear-gradient(135deg, #5b6ef5, #9b6ef5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* WHITE: 카드 */ [data-theme="white"] .card { background: #ffffff; border-color: rgba(91,110,245,0.18); box-shadow: 0 0 0 1px rgba(91,110,245,0.06), 0 24px 64px rgba(91,110,245,0.10), 0 4px 16px rgba(0,0,0,0.06); } [data-theme="white"] .card-title { color: #0f172a; } [data-theme="white"] .card-sub { color: #64748b; } /* WHITE: 스텝 인디케이터 (signup) */ [data-theme="white"] .step-dot { border-color: rgba(0,0,0,0.12); background: #f8fafc; color: #64748b; } [data-theme="white"] .step-dot.active { border-color: #5b6ef5; background: #5b6ef5; color: #fff; box-shadow: 0 0 14px rgba(91,110,245,0.35); } [data-theme="white"] .step-dot.done { border-color: #059669; color: #059669; background: rgba(5,150,105,0.08); } [data-theme="white"] .step-label { color: #64748b; } [data-theme="white"] .step-label.active { color: #1e293b; } [data-theme="white"] .step-line { background: rgba(0,0,0,0.08); } [data-theme="white"] .step-line.done { background: #059669; } /* WHITE: 필드 */ [data-theme="white"] .field label { color: #64748b; } [data-theme="white"] .field input { background: #f8fafc; border-color: rgba(0,0,0,0.10); color: #1e293b; } [data-theme="white"] .field input::placeholder { color: #94a3b8; } [data-theme="white"] .field input:focus { border-color: rgba(91,110,245,0.50); background: #ffffff; box-shadow: 0 0 0 3px rgba(91,110,245,0.10); } /* WHITE: 인증 관련 (signup) */ [data-theme="white"] .btn-sm { background: #f8fafc; color: #0ea5e9; border-color: rgba(14,165,233,0.30); } [data-theme="white"] .btn-sm:hover { background: rgba(14,165,233,0.06); } [data-theme="white"] .verified-badge { background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.25); color: #059669; } [data-theme="white"] .timer { color: #64748b; } [data-theme="white"] .timer.urgent { color: #dc2626; } /* WHITE: 이메일 디스플레이 (reset-password) */ [data-theme="white"] .email-display { background: #f1f5f9; border-color: rgba(0,0,0,0.07); color: #0ea5e9; } /* WHITE: 버튼 */ [data-theme="white"] .btn-submit { box-shadow: 0 4px 20px rgba(91,110,245,0.28); } [data-theme="white"] .btn-submit:hover { box-shadow: 0 8px 32px rgba(91,110,245,0.38); } /* WHITE: 구글 버튼 (login) */ [data-theme="white"] .btn-google { background: #ffffff; border-color: rgba(0,0,0,0.12); color: #1e293b; } [data-theme="white"] .btn-google:hover { background: #f8fafc; border-color: rgba(91,110,245,0.25); } /* WHITE: 구분선 */ [data-theme="white"] .divider::before, [data-theme="white"] .divider::after { background: rgba(0,0,0,0.09); } [data-theme="white"] .divider span { color: #64748b; } /* WHITE: 링크 */ [data-theme="white"] .signup-link, [data-theme="white"] .login-link { color: #64748b; } [data-theme="white"] .signup-link a, [data-theme="white"] .login-link a { color: #5b6ef5; } [data-theme="white"] .foot-note { color: #94a3b8; } [data-theme="white"] .btn-forgot { color: #64748b; } [data-theme="white"] .btn-forgot:hover { color: #5b6ef5; } /* WHITE: 모달 (login) */ [data-theme="white"] .modal-box { background: #ffffff; border-color: rgba(91,110,245,0.20); box-shadow: 0 12px 48px rgba(91,110,245,0.12), 0 0 0 1px rgba(91,110,245,0.06); } [data-theme="white"] .modal-head { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="white"] .modal-head-title { color: #0f172a; } [data-theme="white"] .modal-close { background: #f8fafc; border-color: rgba(0,0,0,0.10); color: #64748b; } [data-theme="white"] .modal-close:hover { border-color: rgba(91,110,245,0.35); color: #1e293b; } [data-theme="white"] .modal-desc { color: #64748b; } [data-theme="white"] .modal-input { background: #f8fafc; border-color: rgba(0,0,0,0.10); color: #1e293b; } [data-theme="white"] .modal-input:focus { border-color: rgba(91,110,245,0.50); box-shadow: 0 0 0 3px rgba(91,110,245,0.10); } [data-theme="white"] .modal-btn-cancel { border-color: rgba(0,0,0,0.10); color: #64748b; } [data-theme="white"] .modal-btn-cancel:hover { border-color: rgba(91,110,245,0.35); color: #1e293b; } /* ================================================================ ADMIN PAGES (admin.html) — Dark / White 테마 변수 및 오버라이드 l_theme.css 기준으로 통일 ================================================================ */ /* ── DARK ── */ [data-theme="dark"] { --bg: #080c14; --surface: #0f1623; --surface2: #131b2e; --border: rgba(59,130,246,0.11); --border-bright:rgba(59,130,246,0.28); --accent: #5b8def; --accent2: #7ca8f5; --accent3: #60c8f5; --text: #e4e8f2; --muted: #6b7a99; --white: #f0f4ff; --success-color:#34d399; --fail-color: #f87171; --warn-color: #fbbf24; /* toggle */ --toggle-bg: rgba(255,255,255,0.06); --toggle-border: rgba(255,255,255,0.12); --toggle-text: #a0a0b8; --toggle-text-hover: #e4e8f2; --toggle-active-bg: rgba(91,110,245,0.2); --toggle-active-text: #a0a8ff; --toggle-active-border: rgba(91,110,245,0.45); } [data-theme="dark"] body { background: #080c14; color: #e4e8f2; } [data-theme="dark"] body::before { opacity: 0.04; } [data-theme="dark"] nav { background: rgba(8,12,20,0.88); border-bottom-color: rgba(59,130,246,0.11); } [data-theme="dark"] .nav-logo { color: #f0f4ff; } [data-theme="dark"] .nav-link { color: #6b7a99; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #e4e8f2; } [data-theme="dark"] .nav-btn-logout { color: #6b7a99; border-color: rgba(59,130,246,0.28); } [data-theme="dark"] .nav-btn-logout:hover { border-color: rgba(248,113,113,0.4); color: #f87171; } [data-theme="dark"] .nav-dropdown-trigger { background:rgba(91,110,245,0.12); color:#5b8def; border-color:rgba(91,110,245,0.35); } [data-theme="dark"] .nav-dropdown-trigger:hover { background:rgba(91,110,245,0.22); } [data-theme="dark"] .nav-dropdown-menu { background:#0f1623; border-color:rgba(59,130,246,0.28); } [data-theme="dark"] .nav-dropdown-item { color:#6b7a99; border-bottom-color:rgba(59,130,246,0.11); } [data-theme="dark"] .nav-dropdown-item:hover { background:rgba(91,110,245,0.08); color:#e4e8f2; } /* ── WHITE ── */ [data-theme="white"] { --bg: #ffffff; --surface: #f8fafc; --surface2: #f1f5f9; --border: rgba(0,0,0,0.07); --border-bright:rgba(0,0,0,0.13); --accent: #5b6ef5; --accent2: #9b6ef5; --accent3: #0ea5e9; --text: #1e293b; --muted: #64748b; --white: #0f172a; --success-color:#059669; --fail-color: #dc2626; --warn-color: #d97706; /* toggle */ --toggle-bg: rgba(0,0,0,0.04); --toggle-border: rgba(0,0,0,0.10); --toggle-text: #64748b; --toggle-text-hover: #1e293b; --toggle-active-bg: rgba(91,110,245,0.1); --toggle-active-text: #5b6ef5; --toggle-active-border: rgba(91,110,245,0.35); } [data-theme="white"] body { background: #ffffff; color: #1e293b; } [data-theme="white"] body::before { opacity: 0; } [data-theme="white"] nav { background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.08); } [data-theme="white"] .nav-logo { color: #0f172a; } [data-theme="white"] .nav-logo span { background: linear-gradient(135deg,#5b6ef5,#9b6ef5); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } [data-theme="white"] .nav-link { color: #64748b; } [data-theme="white"] .nav-link:hover, [data-theme="white"] .nav-link.active { color: #1e293b; } [data-theme="white"] .nav-btn-logout { color: #64748b; border-color: rgba(0,0,0,0.12); } [data-theme="white"] .nav-btn-logout:hover { border-color: rgba(220,38,38,0.4); color: #dc2626; } [data-theme="white"] .nav-btn-upload { box-shadow: 0 0 14px rgba(91,110,245,0.25); } /* 관리 드롭다운 — white */ [data-theme="white"] .nav-dropdown-trigger { background:rgba(91,110,245,0.07); color:#5b6ef5; border-color:rgba(91,110,245,0.22); } [data-theme="white"] .nav-dropdown-trigger:hover { background:rgba(91,110,245,0.14); color:#3a4fd4; } [data-theme="white"] .nav-dropdown-menu { background:#ffffff; border-color:rgba(0,0,0,0.09); box-shadow:0 8px 32px rgba(0,0,0,0.10); } [data-theme="white"] .nav-dropdown-item { color:#64748b; border-bottom-color:rgba(0,0,0,0.07); } [data-theme="white"] .nav-dropdown-item:hover { background:rgba(91,110,245,0.06); color:#1e293b; } [data-theme="white"] .nav-dropdown-divider { background: rgba(0,0,0,0.07); } /* 통계/테이블 — white */ [data-theme="white"] .stat-card { background:#ffffff; border-color:rgba(0,0,0,0.07); box-shadow:0 1px 4px rgba(0,0,0,0.06); } [data-theme="white"] .stat-card-label { color:#64748b; } [data-theme="white"] .stat-card-value { color:#0f172a; } [data-theme="white"] .table-wrap { background:#ffffff; border-color:rgba(0,0,0,0.07); } [data-theme="white"] .table-toolbar { border-bottom-color:rgba(0,0,0,0.07); } [data-theme="white"] .table-toolbar-title { color:#0f172a; } [data-theme="white"] .total-badge { color:#64748b; background:#f8fafc; border-color:rgba(0,0,0,0.10); } [data-theme="white"] .size-select { background:#f8fafc; border-color:rgba(0,0,0,0.10); color:#64748b; } [data-theme="white"] .log-table th { color:#64748b; border-bottom-color:rgba(0,0,0,0.07); background:rgba(0,0,0,0.015); } [data-theme="white"] .log-table td { color:#1e293b; border-bottom-color:rgba(0,0,0,0.06); } [data-theme="white"] .log-table tbody tr:hover { background:rgba(91,110,245,0.04); } [data-theme="white"] .log-table tr:last-child td { border-bottom:none; } [data-theme="white"] .page-btn { color:#64748b; border-color:rgba(0,0,0,0.10); } [data-theme="white"] .page-btn:hover { background:rgba(91,110,245,0.07); border-color:rgba(91,110,245,0.3); color:#1e293b; } [data-theme="white"] .page-btn.active { background:linear-gradient(135deg,#5b6ef5,#9b6ef5); border-color:transparent; color:#fff; box-shadow:0 0 14px rgba(91,110,245,0.3); } [data-theme="white"] .pagination { border-top-color:rgba(0,0,0,0.07); } /* 모달 — white */ [data-theme="white"] .modal { background:#ffffff; border-color:rgba(0,0,0,0.10); box-shadow:0 16px 64px rgba(0,0,0,0.10); } [data-theme="white"] .modal-header { border-bottom-color:rgba(0,0,0,0.07); } [data-theme="white"] .modal-title { color:#0f172a; } [data-theme="white"] .modal-close { background:#f8fafc; border-color:rgba(0,0,0,0.10); color:#64748b; } [data-theme="white"] .modal-close:hover { background:rgba(220,38,38,0.07); color:#dc2626; } [data-theme="white"] .detail-label { color:#64748b; } [data-theme="white"] .detail-value { background:#f8fafc; border-color:rgba(0,0,0,0.07); color:#1e293b; } [data-theme="white"] .detail-input { background:#f8fafc; border-color:rgba(91,110,245,0.4); color:#1e293b; } [data-theme="white"] .detail-textarea { background:#f8fafc; border-color:rgba(91,110,245,0.4); color:#1e293b; } [data-theme="white"] .btn-modal-edit { background:rgba(91,110,245,0.07); color:#5b6ef5; border-color:rgba(91,110,245,0.3); } [data-theme="white"] .btn-modal-cancel { border-color:rgba(0,0,0,0.12); color:#64748b; } [data-theme="white"] .btn-modal-cancel:hover { background:rgba(0,0,0,0.04); } /* 셀 — white */ [data-theme="white"] .cell-id { color:#64748b; } [data-theme="white"] .cell-user { color:#5b6ef5; } [data-theme="white"] .cell-file-title { color:#1e293b; } [data-theme="white"] .cell-file-name { color:#64748b; } [data-theme="white"] .cell-date { color:#64748b; } [data-theme="white"] .cell-url a { color:#5b6ef5; } [data-theme="white"] .empty-row td { color:#64748b; } [data-theme="white"] .bar-track { background:rgba(0,0,0,0.06); } [data-theme="white"] .bar-count { color:#1e293b; } [data-theme="white"] .bar-label { color:#64748b; } [data-theme="white"] .col-count { color:#1e293b; } [data-theme="white"] .col-label { color:#64748b; } /* 통계 모달 — white */ [data-theme="white"] .stats-overlay { background:rgba(0,0,0,0.35); } [data-theme="white"] .stats-modal { background:#ffffff; border-color:rgba(0,0,0,0.10); box-shadow:0 16px 64px rgba(0,0,0,0.10); } [data-theme="white"] .stats-header { border-bottom-color:rgba(0,0,0,0.07); } [data-theme="white"] .stats-title { color:#0f172a; } [data-theme="white"] .stats-subtitle { color:#64748b; } [data-theme="white"] .stats-close { background:#f8fafc; border-color:rgba(0,0,0,0.10); color:#64748b; } [data-theme="white"] .stats-close:hover { background:rgba(220,38,38,0.07); color:#dc2626; } [data-theme="white"] .stats-kpi { background:#f8fafc; border-color:rgba(0,0,0,0.07); } [data-theme="white"] .stats-kpi-label { color:#64748b; } [data-theme="white"] .stats-kpi-value { color:#0f172a; } [data-theme="white"] .stats-section-title { color:#64748b; } [data-theme="white"] .stats-tab { color:#64748b; border-color:rgba(0,0,0,0.10); } [data-theme="white"] .stats-tab.active { background:rgba(91,110,245,0.10); border-color:rgba(91,110,245,0.35); color:#5b6ef5; } [data-theme="white"] .stats-empty { color:#64748b; } [data-theme="white"] .ratio-legend-item { color:#64748b; } [data-theme="white"] .url-action-btn { color:#64748b; } [data-theme="white"] .url-action-btn:hover { background:rgba(0,0,0,0.06); color:#1e293b; } [data-theme="white"] .url-action-btn.copied { color:#059669; } /* 배지 — white */ [data-theme="white"] .badge-success { background:rgba(5,150,105,0.08); border-color:rgba(5,150,105,0.25); color:#059669; } [data-theme="white"] .badge-fail { background:rgba(220,38,38,0.07); border-color:rgba(220,38,38,0.22); color:#dc2626; } [data-theme="white"] .badge-short { background:rgba(14,165,233,0.07); border-color:rgba(14,165,233,0.2); color:#0ea5e9; } [data-theme="white"] .badge-clicks { background:rgba(91,110,245,0.08); border-color:rgba(91,110,245,0.2); color:#5b6ef5; } /* QR popup — white */ [data-theme="white"] .qr-popup { background:#ffffff; border-color:rgba(0,0,0,0.10); box-shadow:0 16px 64px rgba(0,0,0,0.10); } [data-theme="white"] .qr-popup-title { color:#0f172a; } [data-theme="white"] .qr-popup-close { background:#f8fafc; border-color:rgba(0,0,0,0.10); color:#64748b; } [data-theme="white"] .qr-popup-url { color:#64748b; } [data-theme="white"] .qr-popup-url a { color:#0ea5e9; } [data-theme="white"] .modal-qr-wrap { background:#f8fafc; border-color:rgba(0,0,0,0.07); } [data-theme="white"] .modal-qr-btn-copy { color:#64748b; border-color:rgba(0,0,0,0.12); } [data-theme="white"] .modal-qr-btn-copy:hover { border-color:#0ea5e9; color:#0ea5e9; } [data-theme="white"] .btn-row-delete { background:rgba(220,38,38,0.07); color:#dc2626; } [data-theme="white"] .btn-row-delete:hover { background:rgba(220,38,38,0.14); } [data-theme="white"] .btn-row-qr { background:rgba(14,165,233,0.08); color:#0ea5e9; } [data-theme="white"] .btn-row-qr:hover { background:rgba(14,165,233,0.18); } [data-theme="white"] .btn-stats { background:rgba(91,110,245,0.08); color:#5b6ef5; } [data-theme="white"] .btn-stats:hover { background:rgba(91,110,245,0.18); } /* 페이지 헤더 — white */ [data-theme="white"] .page-title { color:#0f172a; } [data-theme="white"] .page-sub { color:#64748b; } /* ================================================================ THEME TOGGLE DROPDOWN — 공통 스타일 (l_theme.css 기준) .theme-toggle-wrap / .theme-toggle-btn / .theme-dropdown / .theme-option ================================================================ */ .theme-toggle-wrap { position: relative; display: flex; align-items: center; /* 오른쪽에 구분선 — 로그아웃과 분리 */ padding-right: 1rem; border-right: 1px solid var(--border-bright); } .theme-toggle-btn { display: flex; align-items: center; gap: 0.45rem; background: var(--toggle-bg); border: 1px solid var(--toggle-border); border-radius: 8px; padding: 0.42rem 0.8rem; font-size: 0.8rem; font-weight: 600; color: var(--toggle-text); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; } .theme-toggle-btn:hover { color: var(--toggle-text-hover); border-color: var(--border-bright); } .theme-toggle-btn svg { flex-shrink: 0; transition: transform 0.25s; } .theme-toggle-btn[aria-expanded="true"] svg.chevron { transform: rotate(180deg); } .theme-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; background: var(--surface); border: 1px solid var(--border-bright); border-radius: 12px; padding: 0.35rem; box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1); opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 600; } .theme-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .theme-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: var(--toggle-text); cursor: pointer; transition: background 0.15s, color 0.15s; user-select: none; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; border: 1px solid transparent; } .theme-option:hover { background: var(--toggle-active-bg); color: var(--toggle-text-hover); } .theme-option.active { background: var(--toggle-active-bg); color: var(--toggle-active-text); border-color: var(--toggle-active-border); } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-bright); } .theme-swatch-dark { background: #09090f; } .theme-swatch-white { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } /* ── 인라인 style 하드코딩 보완 변수 (ADMIN white override) ── */ [data-theme="dark"] { --nav-bg: rgba(8,12,20,0.88); --table-th-bg: rgba(255,255,255,0.02); --table-row-hover: rgba(59,130,246,0.06); --btn-page-hover-bg: rgba(59,130,246,0.08); --overlay-bg: rgba(0,0,0,0.7); --bar-track-bg: rgba(255,255,255,0.06); --action-btn-hover: rgba(255,255,255,0.08); } [data-theme="white"] { --nav-bg: rgba(255,255,255,0.92); --table-th-bg: rgba(0,0,0,0.02); --table-row-hover: rgba(91,110,245,0.04); --btn-page-hover-bg: rgba(91,110,245,0.07); --overlay-bg: rgba(0,0,0,0.35); --bar-track-bg: rgba(0,0,0,0.06); --action-btn-hover: rgba(0,0,0,0.05); }