/** * AI Link App Dark Mode — 앱 일반 페이지 (mypage·cases·reps·newsletter·etc.) * * 적용: * - 페이지 head에 `` 로드 * - OS prefers-color-scheme: dark 또는 명시적 시 활성 * - auth-dark.css는 auth/* 페이지 전용, app-dark는 일반 페이지 * * 전략: * - 일반 셀렉터 (body, .card 류, h1-h3, input, button, .al2-* 공통 클래스) * - inline 라이트 컬러는 !important로 오버라이드 * - 페이지별 커스텀은 inline CSS의 [data-theme="dark"] 블록에서 별도 처리 */ /* OS 자동 감지: 페이지가 명시적으로 라이트 강제하지 않으면 적용 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } } /* 명시적 다크 또는 OS 다크 모두 매칭 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background: #0f172a !important; color: #e2e8f0; } } [data-theme="dark"] body { background: #0f172a !important; color: #e2e8f0; } /* 공통 카드·박스 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .al2-card, html:not([data-theme="light"]) .al2-cases-card, html:not([data-theme="light"]) .nl-pub-card, html:not([data-theme="light"]) .nl-issue-item, html:not([data-theme="light"]) .rep-card, html:not([data-theme="light"]) .al2-mp-card, html:not([data-theme="light"]) .al2-cust-card, html:not([data-theme="light"]) [class*="ci-row"] { background: #1e293b !important; color: #e2e8f0; border-color: #334155 !important; } } [data-theme="dark"] .al2-card, [data-theme="dark"] .al2-cases-card, [data-theme="dark"] .nl-pub-card, [data-theme="dark"] .nl-issue-item, [data-theme="dark"] .rep-card, [data-theme="dark"] .al2-mp-card, [data-theme="dark"] .al2-cust-card, [data-theme="dark"] [class*="ci-row"] { background: #1e293b !important; color: #e2e8f0; border-color: #334155 !important; } /* 헤더 텍스트 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) h1, html:not([data-theme="light"]) h2, html:not([data-theme="light"]) h3, html:not([data-theme="light"]) .al2-mp-title, html:not([data-theme="light"]) .nl-section-title, html:not([data-theme="light"]) .al2-cases-card-name { color: #f1f5f9 !important; } } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] .al2-mp-title, [data-theme="dark"] .nl-section-title, [data-theme="dark"] .al2-cases-card-name { color: #f1f5f9 !important; } /* 보조 텍스트 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) p, html:not([data-theme="light"]) .al2-mp-sub, html:not([data-theme="light"]) .nl-section-sub, html:not([data-theme="light"]) .al2-cases-card-master, html:not([data-theme="light"]) .al2-cases-card-stats span { color: #cbd5e1 !important; } } [data-theme="dark"] p, [data-theme="dark"] .al2-mp-sub, [data-theme="dark"] .nl-section-sub, [data-theme="dark"] .al2-cases-card-master, [data-theme="dark"] .al2-cases-card-stats span { color: #cbd5e1 !important; } /* Input·Select·Textarea */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) input[type="text"], html:not([data-theme="light"]) input[type="email"], html:not([data-theme="light"]) input[type="search"], html:not([data-theme="light"]) input[type="tel"], html:not([data-theme="light"]) input[type="password"], html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } html:not([data-theme="light"]) input::placeholder, html:not([data-theme="light"]) textarea::placeholder { color: #64748b !important; } } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="password"], [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; } /* 필터·뱃지·chip */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .al2-cases-card-cat, html:not([data-theme="light"]) .al2-chip, html:not([data-theme="light"]) [class*="chip"]:not(.unlocked):not(.locked) { background: #2a1e4a !important; color: #c4b5fd !important; border-color: #4c1d95 !important; } } [data-theme="dark"] .al2-cases-card-cat, [data-theme="dark"] .al2-chip, [data-theme="dark"] [class*="chip"]:not(.unlocked):not(.locked) { background: #2a1e4a !important; color: #c4b5fd !important; border-color: #4c1d95 !important; } /* hr / divider */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) hr { border-color: #334155 !important; } } [data-theme="dark"] hr { border-color: #334155 !important; } /* 그래데이션 hero · welcome banner (mypage customer) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .al2-mp-hero, html:not([data-theme="light"]) .al2-cust-hero, html:not([data-theme="light"]) [style*="linear-gradient(135deg,#f0f9ff"], html:not([data-theme="light"]) [style*="linear-gradient(135deg, #f0f9ff"] { background: linear-gradient(135deg, #1e293b 0%, #1a1e3a 100%) !important; color: #e2e8f0 !important; } } [data-theme="dark"] .al2-mp-hero, [data-theme="dark"] .al2-cust-hero, [data-theme="dark"] [style*="linear-gradient(135deg,#f0f9ff"], [data-theme="dark"] [style*="linear-gradient(135deg, #f0f9ff"] { background: linear-gradient(135deg, #1e293b 0%, #1a1e3a 100%) !important; color: #e2e8f0 !important; } /* sticky filter bar */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .al2-cases-filters, html:not([data-theme="light"]) .nl-filter-bar, html:not([data-theme="light"]) [class*="sticky"][class*="filter"] { background: rgba(15, 23, 42, 0.94) !important; border-color: #334155 !important; } } [data-theme="dark"] .al2-cases-filters, [data-theme="dark"] .nl-filter-bar, [data-theme="dark"] [class*="sticky"][class*="filter"] { background: rgba(15, 23, 42, 0.94) !important; border-color: #334155 !important; } /* Modal overlay 미세 조정 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .al2-modal-card, html:not([data-theme="light"]) [class*="modal-card"] { background: #1e293b !important; color: #e2e8f0 !important; } } [data-theme="dark"] .al2-modal-card, [data-theme="dark"] [class*="modal-card"] { background: #1e293b !important; color: #e2e8f0 !important; }