/** * AI Link Auth Dark Mode — 5 페이지 공통 (auth/signup/complete/invite/quiz) * * 적용: auth-i18n.js가 OS prefers-color-scheme: dark 감지 시 * attribute 자동 설정 → 아래 셀렉터 활성 * * 전제: 페이지가 일반적인 background / card / h1·h2 / input / button 패턴을 사용 * 페이지별 특수 컴포넌트는 inline CSS의 [data-theme="dark"] 블록에서 별도 처리 */ [data-theme="dark"] body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important; color: #e2e8f0; } [data-theme="dark"] .card, [data-theme="dark"] .auth-card, [data-theme="dark"] .signup-card, [data-theme="dark"] .complete-wrap, [data-theme="dark"] .invite-wrap, [data-theme="dark"] .quiz-wrap { background: #1e293b !important; color: #e2e8f0; border-color: #334155; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] .auth-title, [data-theme="dark"] .quiz-title { color: #f1f5f9 !important; } [data-theme="dark"] p, [data-theme="dark"] .auth-sub, [data-theme="dark"] .quiz-sub, [data-theme="dark"] .body-text { color: #cbd5e1 !important; } [data-theme="dark"] label, [data-theme="dark"] .field-label { color: #cbd5e1 !important; } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #8b5cf6 !important; background: #1a2333 !important; } [data-theme="dark"] .quiz-option { background: #0f172a; border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .quiz-option:hover { border-color: #8b5cf6; background: #1a2333; } [data-theme="dark"] .quiz-option.selected { border-color: #8b5cf6; background: #2a1e4a; color: #c4b5fd; } [data-theme="dark"] .quiz-dot { background: #334155; } [data-theme="dark"] .quiz-dot.active { background: #8b5cf6; } [data-theme="dark"] .btn-ghost, [data-theme="dark"] .back-link, [data-theme="dark"] .footer-text { color: #94a3b8 !important; } [data-theme="dark"] .btn-primary { background: #8b5cf6 !important; color: #fff !important; } [data-theme="dark"] .deep-link { background: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .deep-link:hover { background: #1a2333 !important; border-color: #8b5cf6 !important; color: #c4b5fd !important; } [data-theme="dark"] .email-display { background: #2a1e4a !important; color: #c4b5fd !important; } [data-theme="dark"] .hint, [data-theme="dark"] .quiz-result .confidence { color: #64748b !important; } [data-theme="dark"] .quiz-result .reasoning { background: #0f172a !important; color: #cbd5e1 !important; } /* Lang toggle 다크 적응 */ [data-theme="dark"] #langToggle { background: rgba(30, 41, 59, 0.92) !important; border-color: #475569 !important; color: #cbd5e1 !important; } /* divider, hr */ [data-theme="dark"] hr, [data-theme="dark"] .divider { border-color: #334155 !important; background: #334155 !important; } /* 영업 / 고객 role pick 카드 */ [data-theme="dark"] .role-card, [data-theme="dark"] .role-option { background: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .role-card:hover, [data-theme="dark"] .role-option:hover { border-color: #8b5cf6 !important; background: #1a2333 !important; } [data-theme="dark"] .role-card.selected, [data-theme="dark"] .role-option.selected { border-color: #8b5cf6 !important; background: #2a1e4a !important; }