/* ══════════════════════════════════════════════ theme.css — moveto.live 테마 일괄 관리 테마: [dark] 기본 어두운 테마 / [white] Vercel 스타일 라이트 테마 사용법: 또는 ══════════════════════════════════════════════ */ /* ── DARK THEME (기본) ── */ [data-theme="dark"], :root { --bg: #09090f; --surface: #111120; --surface2: #16162a; --border: rgba(255,255,255,0.07); --border-bright: rgba(255,255,255,0.15); --accent: #5b6ef5; --accent2: #9b6ef5; --accent3: #3ecbf5; --text: #f0f0fa; --muted: #7878a0; --white: #ffffff; --glow: rgba(91,110,245,0.35); /* Nav */ --nav-bg: rgba(9,9,15,0.75); --nav-border: rgba(255,255,255,0.07); /* Hero grid */ --hero-grid-color: rgba(91,110,245,0.06); /* Buttons */ --btn-primary-bg: linear-gradient(135deg, #5b6ef5, #9b6ef5); --btn-primary-shadow: rgba(91,110,245,0.4); --btn-primary-shadow-hover: rgba(91,110,245,0.6); --btn-outline-color: var(--text); --btn-outline-border: rgba(255,255,255,0.15); --btn-outline-hover-bg: rgba(91,110,245,0.07); --btn-outline-hover-border: rgba(91,110,245,0.5); /* Cards */ --card-bg: var(--surface); --card-border: rgba(255,255,255,0.07); --card-hover-border: rgba(91,110,245,0.4); --card-hover-shadow: rgba(0,0,0,0.3); /* Sample box */ --sample-bar-bg: rgba(255,255,255,0.03); --sample-box-bg: var(--surface2); /* Footer */ --footer-border: rgba(255,255,255,0.07); /* Noise overlay opacity */ --noise-opacity: 0.04; /* Theme toggle */ --toggle-bg: rgba(255,255,255,0.06); --toggle-border: rgba(255,255,255,0.12); --toggle-text: #a0a0b8; --toggle-text-hover: #f0f0fa; --toggle-active-bg: rgba(91,110,245,0.2); --toggle-active-text: #a0a8ff; --toggle-active-border: rgba(91,110,245,0.45); --toggle-icon-filter: none; /* Section bg alternation */ --section-alt-bg: var(--surface); } /* ── WHITE / VERCEL-INSPIRED THEME ── */ [data-theme="white"] { --bg: #ffffff; --surface: #fafafa; --surface2: #f2f2f2; --border: rgba(0,0,0,0.06); --border-bright: rgba(0,0,0,0.12); --accent: #0070f3; --accent2: #7928ca; --accent3: #0ea5e9; --text: #111111; --muted: #666666; --white: #000000; /* 텍스트 강조용 — 화이트 테마에서는 검정 */ --glow: rgba(0,112,243,0.2); /* Nav */ --nav-bg: rgba(255,255,255,0.85); --nav-border: rgba(0,0,0,0.08); /* Hero grid */ --hero-grid-color: rgba(0,112,243,0.05); /* Buttons */ --btn-primary-bg: linear-gradient(135deg, #0070f3, #7928ca); --btn-primary-shadow: rgba(0,112,243,0.25); --btn-primary-shadow-hover: rgba(0,112,243,0.45); --btn-outline-color: #111111; --btn-outline-border: rgba(0,0,0,0.15); --btn-outline-hover-bg: rgba(0,112,243,0.06); --btn-outline-hover-border: rgba(0,112,243,0.4); /* Cards */ --card-bg: #ffffff; --card-border: rgba(0,0,0,0.08); --card-hover-border: rgba(0,112,243,0.35); --card-hover-shadow: rgba(0,0,0,0.08); /* Sample box */ --sample-bar-bg: rgba(0,0,0,0.025); --sample-box-bg: #f6f6f6; /* Footer */ --footer-border: rgba(0,0,0,0.08); /* Noise overlay — 라이트 테마에서는 숨김 */ --noise-opacity: 0; /* Theme toggle */ --toggle-bg: rgba(0,0,0,0.04); --toggle-border: rgba(0,0,0,0.1); --toggle-text: #888888; --toggle-text-hover: #111111; --toggle-active-bg: rgba(0,112,243,0.1); --toggle-active-text: #0070f3; --toggle-active-border: rgba(0,112,243,0.35); --toggle-icon-filter: invert(1); /* Section bg alternation */ --section-alt-bg: #f7f7f7; } /* ══════════════════════════════════════════════ 테마 전환 오버라이드 — white 전용 스타일 ══════════════════════════════════════════════ */ /* Body noise overlay */ [data-theme="white"] body::before { opacity: 0; } /* Nav */ [data-theme="white"] nav { background: var(--nav-bg); border-bottom-color: var(--nav-border); } [data-theme="white"] .nav-logo { color: #111111; } [data-theme="white"] .nav-links a { color: var(--muted); } [data-theme="white"] .nav-links a:hover { color: var(--text); } [data-theme="white"] .nav-cta { background: linear-gradient(135deg, #0070f3, #7928ca); } /* Hero */ [data-theme="white"] .hero::before { background-image: linear-gradient(var(--hero-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px); } [data-theme="white"] .orb-1 { background: radial-gradient(circle, rgba(0,112,243,0.15) 0%, transparent 70%); } [data-theme="white"] .orb-2 { background: radial-gradient(circle, rgba(121,40,202,0.1) 0%, transparent 70%); } [data-theme="white"] .orb-3 { background: radial-gradient(circle, rgba(14,165,233,0.1) 0%, transparent 70%); } [data-theme="white"] .hero-title { color: #111111; } [data-theme="white"] .hero-title .grad { background: linear-gradient(135deg, #0070f3 0%, #7928ca 50%, #0ea5e9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="white"] .hero-sub { color: var(--muted); } [data-theme="white"] .stat-value { color: #111111; } [data-theme="white"] .stat-divider { background: var(--border); } /* Buttons */ [data-theme="white"] .btn-primary { background: var(--btn-primary-bg); box-shadow: 0 0 30px var(--btn-primary-shadow); color: #fff; } [data-theme="white"] .btn-primary:hover { box-shadow: 0 0 50px var(--btn-primary-shadow-hover); } [data-theme="white"] .btn-outline { color: var(--btn-outline-color); border-color: var(--btn-outline-border); } [data-theme="white"] .btn-outline:hover { background: var(--btn-outline-hover-bg); border-color: var(--btn-outline-hover-border); } /* Section label */ [data-theme="white"] .section-label { color: var(--accent); } [data-theme="white"] .section-title { color: #111111; } /* Flow section */ [data-theme="white"] .flow { background: var(--section-alt-bg); } [data-theme="white"] .flow-step:not(:last-child)::after { color: var(--accent); } [data-theme="white"] .flow-num { background: linear-gradient(135deg, #0070f3, #7928ca); box-shadow: 0 0 20px rgba(0,112,243,0.2); } [data-theme="white"] .flow-step h3 { color: #111111; } /* Feature cards */ [data-theme="white"] .feature-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="white"] .feature-card:hover { border-color: var(--card-hover-border); box-shadow: 0 8px 30px var(--card-hover-shadow); } [data-theme="white"] .feature-card h3 { color: #111111; } /* AI cards */ [data-theme="white"] .ai-support { background: var(--bg); } [data-theme="white"] .ai-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } [data-theme="white"] .ai-card:hover { box-shadow: 0 12px 40px var(--card-hover-shadow); } [data-theme="white"] .ai-card-name { color: #111111; } [data-theme="white"] .ai-strip { background: linear-gradient(135deg, rgba(0,112,243,.06), rgba(121,40,202,.04)); border-color: rgba(0,112,243,.18); } [data-theme="white"] .ai-strip-dot { background: var(--accent); box-shadow: 0 0 10px var(--glow); } [data-theme="white"] .ai-strip-text strong { color: #111111; } /* Targets */ [data-theme="white"] .targets { background: var(--section-alt-bg); } [data-theme="white"] .target-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } [data-theme="white"] .target-card:hover { border-color: var(--card-hover-border); } [data-theme="white"] .target-card h3 { color: #111111; } /* Domain section */ [data-theme="white"] .domain-pill { background: var(--card-bg); border-color: var(--card-border); } [data-theme="white"] .domain-pill:hover { border-color: rgba(0,112,243,.35); } [data-theme="white"] .sample-box { background: var(--sample-box-bg); border-color: var(--card-border); box-shadow: 0 2px 12px rgba(0,0,0,0.08); } [data-theme="white"] .sample-box-bar { background: var(--sample-bar-bg); border-bottom-color: var(--border); } /* CTA Card */ [data-theme="white"] .cta-card { background: linear-gradient(135deg, rgba(0,112,243,0.07), rgba(121,40,202,0.05)); border-color: rgba(0,112,243,0.25); } [data-theme="white"] .cta-card::before { background: radial-gradient(circle, rgba(0,112,243,0.15), transparent 70%); } [data-theme="white"] .cta-title { color: #111111; } /* Pricing */ [data-theme="white"] .pricing-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="white"] .pricing-card:hover { box-shadow: 0 12px 40px var(--card-hover-shadow); } [data-theme="white"] .pricing-card.featured { border-color: rgba(0,112,243,0.4); background: linear-gradient(160deg, rgba(0,112,243,0.07), rgba(121,40,202,0.04)); box-shadow: 0 0 40px rgba(0,112,243,0.1); } [data-theme="white"] .featured-badge { background: linear-gradient(135deg, #0070f3, #7928ca); } [data-theme="white"] .pricing-tech { color: var(--accent); } [data-theme="white"] .pricing-title { color: #111111; } [data-theme="white"] .price-num { color: #111111; } [data-theme="white"] .pricing-price { border-bottom-color: var(--border); } [data-theme="white"] .pricing-features li { border-bottom-color: var(--border); } [data-theme="white"] .check { color: var(--accent); } [data-theme="white"] .btn-pricing-primary { background: linear-gradient(135deg, #0070f3, #7928ca); box-shadow: 0 0 20px rgba(0,112,243,0.25); } [data-theme="white"] .btn-pricing-primary:hover { box-shadow: 0 0 40px rgba(0,112,243,0.4); } [data-theme="white"] .btn-pricing-outline { color: var(--text); border-color: var(--card-border); } /* URL ticker */ [data-theme="white"] .url-ticker-wrap { background: var(--card-bg); border-color: var(--card-border); } [data-theme="white"] .url-ticker-head { border-bottom-color: var(--border); } [data-theme="white"] .url-row { border-bottom-color: var(--border); } [data-theme="white"] .url-row:hover { background: rgba(0,112,243,0.04); } [data-theme="white"] .url-link { color: var(--accent); } /* Footer */ [data-theme="white"] footer { border-top-color: var(--footer-border); } [data-theme="white"] .footer-logo { color: var(--muted); } [data-theme="white"] .footer-logo span { color: var(--accent); } /* Nav logo gradient — white theme */ [data-theme="white"] .nav-logo span { background: linear-gradient(135deg, #0070f3, #7928ca); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Badge (hero) */ [data-theme="white"] .badge { background: rgba(0,112,243,0.08); border-color: rgba(0,112,243,0.25); color: #0070f3; } [data-theme="white"] .badge-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* Student promo */ [data-theme="white"] .student-promo { background: linear-gradient(135deg, rgba(14,165,233,0.07), rgba(0,112,243,0.07)); border-color: rgba(14,165,233,0.2); } [data-theme="white"] .promo-title { color: #111111; } [data-theme="white"] .promo-cta { background: linear-gradient(135deg, #0ea5e9, #0070f3); } /* ══════════════════════════════════════════════ THEME TOGGLE DROPDOWN 공통 스타일 ══════════════════════════════════════════════ */ .theme-toggle-wrap { position: relative; display: flex; align-items: center; } .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: '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: 200; } .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: 'Noto Sans KR', sans-serif; } .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: 1px solid var(--toggle-active-border); } .theme-option .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; } /* ══════════════════════════════════════════════ AUTH PAGES (login / signup / reset-password) White 테마 오버라이드 ══════════════════════════════════════════════ */ /* Body background & grid overlay */ [data-theme="white"] body { background: var(--bg); color: var(--text); } [data-theme="white"] body::before { opacity: 0; } [data-theme="white"] body::after { background-image: linear-gradient(rgba(0,112,243,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,112,243,0.04) 1px, transparent 1px); } /* Orbs */ [data-theme="white"] .orb-1 { background: radial-gradient(circle, rgba(0,112,243,0.12) 0%, transparent 70%); } [data-theme="white"] .orb-2 { background: radial-gradient(circle, rgba(121,40,202,0.09) 0%, transparent 70%); } [data-theme="white"] .orb-3 { background: radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%); } /* Logo */ [data-theme="white"] .logo { color: #111111; } [data-theme="white"] .logo span { background: linear-gradient(135deg, #0070f3, #7928ca); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Auth card */ [data-theme="white"] .card { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,112,243,0.06); } [data-theme="white"] .card-title { color: #111111; } /* Form fields */ [data-theme="white"] .field label { color: var(--muted); } [data-theme="white"] .field input { background: #f5f5f5; border-color: rgba(0,0,0,0.12); color: #111111; } [data-theme="white"] .field input::placeholder { color: #aaaaaa; } [data-theme="white"] .field input:focus { border-color: rgba(0,112,243,0.45); box-shadow: 0 0 0 3px rgba(0,112,243,0.1); } [data-theme="white"] .field input.valid { border-color: rgba(52,211,153,0.6); box-shadow: 0 0 0 3px rgba(52,211,153,0.1); } [data-theme="white"] .field input.invalid { border-color: rgba(248,113,113,0.6); box-shadow: 0 0 0 3px rgba(248,113,113,0.1); } [data-theme="white"] .field input:disabled { background: #eeeeee; color: #888888; } /* Small button (코드 발송 etc.) */ [data-theme="white"] .btn-sm { background: #f0f0f0; color: #0070f3; border-color: rgba(0,112,243,0.25); } [data-theme="white"] .btn-sm:hover { background: rgba(0,112,243,0.08); } /* Submit button */ [data-theme="white"] .btn-submit { background: linear-gradient(135deg, #0070f3, #7928ca); box-shadow: 0 0 20px rgba(0,112,243,0.25); } [data-theme="white"] .btn-submit:hover { box-shadow: 0 0 35px rgba(0,112,243,0.45); } /* Verified badge */ [data-theme="white"] .verified-badge { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.25); } /* Step indicator */ [data-theme="white"] .step-dot { border-color: rgba(0,0,0,0.15); color: #888888; background: #f0f0f0; } [data-theme="white"] .step-dot.active { border-color: #0070f3; color: #ffffff; background: #0070f3; box-shadow: 0 0 14px rgba(0,112,243,0.35); } [data-theme="white"] .step-dot.done { border-color: #34d399; color: #34d399; background: rgba(52,211,153,0.1); } [data-theme="white"] .step-line { background: rgba(0,0,0,0.12); } [data-theme="white"] .step-line.done { background: #34d399; } [data-theme="white"] .step-label { color: #888888; } [data-theme="white"] .step-label.active { color: #111111; } /* Divider */ [data-theme="white"] .divider::before, [data-theme="white"] .divider::after { background: rgba(0,0,0,0.1); } /* Google btn */ [data-theme="white"] .btn-google { background: #ffffff; border-color: rgba(0,0,0,0.12); color: #111111; } [data-theme="white"] .btn-google:hover { background: #f5f5f5; border-color: rgba(0,0,0,0.2); } /* Signup / login link */ [data-theme="white"] .signup-link { color: var(--muted); } [data-theme="white"] .signup-link a { color: #0070f3; } [data-theme="white"] .login-link { color: var(--muted); } [data-theme="white"] .login-link a { color: #0070f3; } /* Password reset modal (login.html inline modal) */ [data-theme="white"] #resetOverlay { background: rgba(0,0,0,0.3); } [data-theme="white"] #resetOverlay > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 16px 60px rgba(0,0,0,0.12) !important; } /* Email display (reset-password.html) */ [data-theme="white"] .email-display { background: #f5f5f5; border-color: rgba(0,0,0,0.1); color: #0070f3; } /* Foot note */ [data-theme="white"] .foot-note { color: var(--muted); } [data-theme="white"] .foot-note a { color: var(--muted); } /* ── Nav theme toggle 구분선 ── */ .theme-toggle-wrap { margin-right: 0.5rem; padding-right: 1rem; border-right: 1px solid var(--border-bright); }