/* ================================================================ 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.live 스타일 — Purple/Teal on White) ────────────────────────────────────────────── */ [data-theme="white"] { --bg: #ffffff; --bg2: #111120; /* 다크 서피스는 쓰지 않으나 호환용 */ --bg3: #16162a; --card: #f8fafc; /* moveto.live --surface */ --blue: #5b6ef5; /* moveto.live --accent */ --blue-lt: #9b6ef5; /* moveto.live --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.live 오브 스타일 */ [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.live 연한 퍼플 그리드 */ [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.live 방식: 검정 텍스트 */ [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.live 카드 스타일 */ [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); } .theme-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 120px; background: var(--th-surface, var(--card)); border: 1px solid var(--th-border, var(--border)); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12); animation: thDropDown 0.15s ease; } .theme-switcher.open .theme-dropdown { display: block; } @keyframes thDropDown { from { opacity: 0; transform: translateY(-6px); } 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; }