/* sheslab — 테마 시스템 * * 사용법: (기본) | * theme-switcher.js가 localStorage 영속화 + 속성 토글 * * 원칙: * - default 테마는 변경 없음 (각 페이지의 :root 변수 그대로) * - eink 테마만 [data-theme="eink"] selector로 override * - 국기 emoji는 별도 컨테이너에 있어 영향 받지 않음 (글로브 SVG에만 grayscale filter) */ /* ============================================================ * E-Ink 테마 — 종이톤 배경 + 흑백 그레이 * ============================================================ */ html[data-theme="eink"] { --primary: #2D2D2D; --primary-dark: #1A1A1A; --secondary: #5C5C5C; --accent: #3D3D3D; --hot: #1A1A1A; --rose-soft: #F0F0F0; --lilac-soft: #ECECEC; --bg: #FFFFFF; /* 대장님 명령: 기본 배경 white */ --text: #1A1A1A; --text-muted: #6A6A6A; --shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* community.css가 사용하는 추가 변수 (있다면 fallback) */ --text-light: #888888; --primary-text: #1A1A1A; } /* 대장님 명령: 기본 배경 white + 완벽한 그레이스케일 */ html[data-theme="eink"] { background: #FFFFFF !important; } html[data-theme="eink"] body { background: #FFFFFF !important; /* NUCLEAR — 완벽한 그레이스케일 (모든 컬러 자동 회색) */ filter: grayscale(1); -webkit-filter: grayscale(1); } /* fixed/sticky 요소도 body filter 영향 받게 (브라우저 그래픽 호환) */ html[data-theme="eink"] body { isolation: isolate; } /* 글로브 SVG도 grayscale 영향 받음 (body filter로 자동 처리) — 룰 제거 */ /* 매거진 헤더의 텍스트 그라데를 단색 (검정)으로 — gradient-text 효과 평탄화 */ html[data-theme="eink"] .mast-title, html[data-theme="eink"] .community-title, html[data-theme="eink"] .featured-quote-text { background: none !important; -webkit-text-fill-color: #1A1A1A !important; color: #1A1A1A !important; } /* 그라데 버튼 → 단색 검정 */ html[data-theme="eink"] .sl-fab, html[data-theme="eink"] .sl-modal-submit, html[data-theme="eink"] .ct-tab.active, html[data-theme="eink"] .cf-write-cta { background: #1A1A1A !important; color: #FFFFFF !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important; } html[data-theme="eink"] .sl-fab:hover, html[data-theme="eink"] .sl-modal-submit:hover { background: #2A2A2A !important; } /* hover/액션 색상 (좋아요, 댓글, 공유) 모두 다크 그레이 */ html[data-theme="eink"] .cf-action.like:hover, html[data-theme="eink"] .cf-action.share:hover, html[data-theme="eink"] .cf-action.like.liked { color: #1A1A1A !important; } html[data-theme="eink"] .cf-action.like.liked .cf-icon { color: #1A1A1A; } /* 카드 highlight pulse는 그레이로 */ html[data-theme="eink"] .cf-card--highlight { border-left-color: #1A1A1A !important; } @keyframes cf-pulse-eink { 0% { background: rgba(0, 0, 0, 0.10); } 40% { background: rgba(0, 0, 0, 0.05); } 100% { background: transparent; } } html[data-theme="eink"] .cf-card--highlight { animation-name: cf-pulse-eink !important; } /* avatar 그라데 → grayscale */ html[data-theme="eink"] .cf-avatar { background: linear-gradient(135deg, #E8E8E8, #CCCCCC) !important; border-color: rgba(0, 0, 0, 0.12) !important; } /* 탭바 active 라인 그라데 → 검정 */ html[data-theme="eink"] .sl-tabbar a.active::before { background: #1A1A1A !important; } /* 모달/입력 폼 보더 */ html[data-theme="eink"] .sl-modal, html[data-theme="eink"] .sl-modal-textarea, html[data-theme="eink"] .sl-modal-nick { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.18) !important; } html[data-theme="eink"] .sl-modal-textarea:focus, html[data-theme="eink"] .sl-modal-nick:focus { border-color: #1A1A1A !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.10) !important; } /* 글로브 stage/배경 그라데 평탄화 */ html[data-theme="eink"] #feed-stage, html[data-theme="eink"] .globe-section, html[data-theme="eink"] .featured-quote { background: transparent !important; } /* 뜨거운 도시 hot color (--hot)는 단색 검정 — 글로브 위 활성 표시도 그레이 */ html[data-theme="eink"] .hot-dot, html[data-theme="eink"] .active-flags-label { color: #1A1A1A !important; } /* drop-shadow도 무채색으로 */ html[data-theme="eink"] .mast-logo, html[data-theme="eink"] .community-flag { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.10)) !important; } /* ============================================================ * E-Ink — emoji/아이콘 흑백화 (국기 emoji는 예외로 컬러 유지) * ============================================================ */ /* 기타 작은 텍스트성 emoji는 grayscale로 (badges, ad labels 등) */ html[data-theme="eink"] .tip-badge, html[data-theme="eink"] .cf-badge, html[data-theme="eink"] .fq-badge, html[data-theme="eink"] .cf-icon, html[data-theme="eink"] .love-hero-badge, html[data-theme="eink"] .love-extras-summary, html[data-theme="eink"] .ad-label, html[data-theme="eink"] .love-disclaimer { filter: grayscale(1) brightness(0.55) !important; } /* ============================================================ * E-Ink — 핵심 emoji를 가는 선 SVG 라인 아이콘으로 완전 교체 * (대장님 명령: 가는 선에 의한 아이콘으로 대체) * 패턴: emoji text는 color:transparent + font-size:0으로 숨김, * background-image의 SVG data URI로 라인 아이콘 표시 * ============================================================ */ /* 공통 — emoji 텍스트 숨김 + SVG 표시 준비 */ html[data-theme="eink"] .sl-tab-icon, html[data-theme="eink"] .love-menu-icon, html[data-theme="eink"] .love-wrap .brand-mark, html[data-theme="eink"] .cf-avatar { color: transparent !important; text-shadow: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: none !important; /* grayscale 룰 제거 */ } /* 탭바 아이콘 사이즈 보장 */ html[data-theme="eink"] .sl-tab-icon { display: inline-block !important; width: 22px !important; height: 22px !important; font-size: 0 !important; line-height: 0 !important; } @media (max-width: 380px) { html[data-theme="eink"] .sl-tab-icon { width: 20px !important; height: 20px !important; } } /* 메뉴 카드 아이콘 사이즈 */ html[data-theme="eink"] .love-menu-icon { display: inline-block !important; width: 44px !important; height: 44px !important; font-size: 0 !important; line-height: 0 !important; } /* brand-mark 사이즈 */ html[data-theme="eink"] .love-wrap .brand-mark { display: inline-block !important; width: 22px !important; height: 22px !important; font-size: 0 !important; line-height: 0 !important; vertical-align: middle; } /* cf-avatar (community ✦) — 그라데 배경은 유지 + 별 모양만 SVG */ html[data-theme="eink"] .cf-avatar { background: linear-gradient(135deg, #E8E8E8, #CCCCCC) !important; font-size: 0 !important; position: relative; } html[data-theme="eink"] .cf-avatar::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 60%; } /* ── 탭바 6종 SVG (stroke 1.5, 24x24 viewBox) ── */ html[data-theme="eink"] .sl-tabbar a[data-tab="whispers"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .sl-tabbar a[data-tab="playbook"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .sl-tabbar a[data-tab="mbti"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .sl-tabbar a[data-tab="saju"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .sl-tabbar a[data-tab="hall"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .sl-tabbar a[data-tab="game"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } /* MAKE-UP — 립스틱 outline (열린 캡 + body) */ html[data-theme="eink"] .sl-tabbar a[data-tab="makeup"] .sl-tab-icon { background-image: url("data:image/svg+xml;utf8,") !important; } /* ── 메뉴 카드 6종 SVG (stroke 1.5) ── */ html[data-theme="eink"] .love-menu-card--compat .love-menu-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .love-menu-card--tactic .love-menu-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .love-menu-card--strategy .love-menu-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .love-menu-card--event .love-menu-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .love-menu-card--saju .love-menu-icon { background-image: url("data:image/svg+xml;utf8,") !important; } html[data-theme="eink"] .love-menu-card--game .love-menu-icon { background-image: url("data:image/svg+xml;utf8,") !important; } /* ── 헤더 brand-mark (페이지 식별 — sl-tabbar active로) ── */ /* Whisper */ html[data-theme="eink"] body:has(.sl-tabbar a[data-tab="whispers"].active) .love-wrap .brand-mark { background-image: url("data:image/svg+xml;utf8,") !important; } /* Playbook */ html[data-theme="eink"] body:has(.sl-tabbar a[data-tab="playbook"].active) .love-wrap .brand-mark { background-image: url("data:image/svg+xml;utf8,") !important; } /* 폴백 — :has() 미지원 브라우저는 그대로 unicode 표시 (font-size:0 미적용) */ html[data-theme="eink"] body:not(:has(.sl-tabbar a.active)) .love-wrap .brand-mark { color: #1A1A1A !important; font-size: 1rem !important; background-image: none !important; } /* 국기 emoji는 컬러 유지 (대장님 명령: 국기는 그대로) */ html[data-theme="eink"] .flag, html[data-theme="eink"] .tip-flag, html[data-theme="eink"] .community-flag, html[data-theme="eink"] .fq-flag { filter: none !important; } /* community 페이지 ✦ avatar (이미 grayscale 그라데로 처리, font도 흑백) */ html[data-theme="eink"] .cf-avatar { background: linear-gradient(135deg, #E8E8E8, #CCCCCC) !important; color: #1A1A1A !important; } /* ============================================================ * E-Ink — love.css 컬러 카드 배경 모두 평탄 종이톤 * ============================================================ */ html[data-theme="eink"] .love-menu-card--compat, html[data-theme="eink"] .love-menu-card--tactic, html[data-theme="eink"] .love-menu-card--strategy, html[data-theme="eink"] .love-menu-card--event, html[data-theme="eink"] .love-menu-card--saju, html[data-theme="eink"] .love-menu-card--game { --card-bg: #FFFFFF !important; background: #FFFFFF !important; color: #1A1A1A !important; border: 1px solid rgba(0, 0, 0, 0.16) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } html[data-theme="eink"] .love-menu-card:hover { border-color: rgba(0, 0, 0, 0.32) !important; background: #F5F5F5 !important; transform: translateY(-1px) !important; } html[data-theme="eink"] .love-menu-title-card, html[data-theme="eink"] .love-menu-desc, html[data-theme="eink"] .love-menu-cta { color: #1A1A1A !important; text-shadow: none !important; } html[data-theme="eink"] .love-menu-desc { color: #5A5A5A !important; } /* love header 그라데 hero/title 평탄화 */ html[data-theme="eink"] .love-hero, html[data-theme="eink"] .love-hero-title, html[data-theme="eink"] .love-hero-line1, html[data-theme="eink"] .love-hero-line2, html[data-theme="eink"] .love-section-title, html[data-theme="eink"] .love-menu-title, html[data-theme="eink"] .brand-name { background: none !important; -webkit-text-fill-color: #1A1A1A !important; color: #1A1A1A !important; } html[data-theme="eink"] .love-hero-sub, html[data-theme="eink"] .love-section-desc { color: #5A5A5A !important; } html[data-theme="eink"] .love-hero { background: transparent !important; } /* love primary/secondary btn 그라데 → 단색 */ html[data-theme="eink"] .love-primary-btn { background: #1A1A1A !important; color: #FFFFFF !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important; } html[data-theme="eink"] .love-secondary-btn { background: transparent !important; color: #1A1A1A !important; border: 1px solid rgba(0, 0, 0, 0.30) !important; } html[data-theme="eink"] .love-secondary-btn:hover { background: rgba(0, 0, 0, 0.05) !important; } /* love-card/love-screen 등 큰 컨테이너도 종이톤 */ html[data-theme="eink"] .love-card, html[data-theme="eink"] .love-gate-card, html[data-theme="eink"] .love-result-card { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.14) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } html[data-theme="eink"] .love-mbti-select, html[data-theme="eink"] .love-mbti-value { background: #FFF !important; color: #1A1A1A !important; border-color: rgba(0, 0, 0, 0.18) !important; } /* 광고 슬롯 placeholder는 더 옅게 */ html[data-theme="eink"] .ad-slot { background: rgba(0, 0, 0, 0.03) !important; border: 1px dashed rgba(0, 0, 0, 0.15) !important; } /* love header back link 컬러 */ html[data-theme="eink"] .love-back, html[data-theme="eink"] .love-back-link { color: #5A5A5A !important; } html[data-theme="eink"] .love-back:hover { background: rgba(0, 0, 0, 0.04) !important; } /* love-extras (게임 details) */ html[data-theme="eink"] .love-extras-summary { color: #1A1A1A !important; } html[data-theme="eink"] .love-divider span { color: #5A5A5A !important; } /* 메뉴 hero badge */ html[data-theme="eink"] .love-hero-badge { background: rgba(0, 0, 0, 0.06) !important; color: #1A1A1A !important; } /* ============================================================ * E-Ink — community/floating-write 추가 평탄화 * ============================================================ */ html[data-theme="eink"] .community-tabs { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.14) !important; } html[data-theme="eink"] .community-meta { color: #5A5A5A !important; } /* 모든 매거진 brand text 또는 컬러 텍스트 — 위에서 처리 못 한 곳들 */ html[data-theme="eink"] .cf-nick, html[data-theme="eink"] .fq-author, html[data-theme="eink"] .mast-edition, html[data-theme="eink"] .mast-date, html[data-theme="eink"] .footer-copy, html[data-theme="eink"] .footer-nav a { color: #1A1A1A !important; } html[data-theme="eink"] .footer-nav a:hover { color: #5A5A5A !important; } /* ============================================================ * 테마 토글 버튼 (우상단) * ============================================================ */ .sl-theme-toggle { position: fixed; top: 18px; /* lang-switcher(top:16, height:34)와 시각 정렬 */ right: 110px; /* lang-switcher 왼쪽 옆 — 가려짐 방지 */ z-index: 1101; /* lang-switcher(1100)보다 위 */ width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(232, 164, 184, 0.30); background: rgba(254, 252, 250, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--primary-dark, #8E5878); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; box-shadow: 0 6px 20px rgba(232, 164, 184, 0.18); } .sl-theme-toggle:hover { transform: scale(1.08); background: rgba(254, 252, 250, 0.95); border-color: rgba(181, 115, 158, 0.45); } .sl-theme-toggle:active { transform: scale(0.94); } html[data-theme="eink"] .sl-theme-toggle { background: rgba(239, 236, 226, 0.92); color: #1A1A1A; border-color: rgba(0, 0, 0, 0.22); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); } @media (max-width: 480px) { .sl-theme-toggle { width: 28px; height: 28px; top: 14px; right: 90px; /* 모바일 lang-switcher 더 작아짐 — right: ~80px 충돌 회피 */ font-size: 0.92rem; } } /* RTL (아랍어) — lang-switcher가 좌측이라 theme toggle도 좌측으로 */ html[dir="rtl"] .sl-theme-toggle { right: auto; left: 110px; } @media (max-width: 480px) { html[dir="rtl"] .sl-theme-toggle { right: auto; left: 90px; } } /* ============================================================ * E-Ink 완전 평탄화 + UI 단순화 (reading-first) * 대장님 명령: 'E-Ink는 심플 — 컬러 잔존 + 복잡 UI 모두 제거' * 종이 위에 잉크 인쇄된 느낌. 모든 그라데/그림자/컬러 액센트 제거. * ============================================================ */ /* ── 1. 모든 컬러 텍스트 → 검정/그레이 (잔존 평탄화) ── */ html[data-theme="eink"] .tips-nick, html[data-theme="eink"] .tips-mini-nick, html[data-theme="eink"] .tips-mini-like, html[data-theme="eink"] .love-event-tagline, html[data-theme="eink"] .love-result-title, html[data-theme="eink"] .love-result-body, html[data-theme="eink"] .love-event-ideas-col-title, html[data-theme="eink"] .love-event-idea-item, html[data-theme="eink"] .love-event-section-label, html[data-theme="eink"] .tips-status.ok, html[data-theme="eink"] .tips-status.err, html[data-theme="eink"] .tips-status.info { color: #1A1A1A !important; } html[data-theme="eink"] .love-event-tagline { color: #5A5A5A !important; font-style: italic; } html[data-theme="eink"] .love-event-script-list li, html[data-theme="eink"] .love-event-ng-list li { color: #1A1A1A !important; } /* ── 2. love-event-ideas-col 그라데(저예산 초록/중예산 노랑/고예산 보라) 완전 평탄 ── */ html[data-theme="eink"] .love-event-ideas-col, html[data-theme="eink"] .love-event-ideas-col--low, html[data-theme="eink"] .love-event-ideas-col--mid, html[data-theme="eink"] .love-event-ideas-col--high { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; box-shadow: none !important; } /* ── 3. tips-badge 그라데(gold/silver/bronze) → 단색 ── */ html[data-theme="eink"] .tips-badge-gold, html[data-theme="eink"] .tips-badge-silver, html[data-theme="eink"] .tips-badge-bronze { background: rgba(0, 0, 0, 0.08) !important; color: #1A1A1A !important; } /* ── 4. tips-mini-like 핑크 → 종이톤 ── */ html[data-theme="eink"] .tips-mini-like { background: transparent !important; border: 1px solid rgba(0, 0, 0, 0.20) !important; color: #1A1A1A !important; } html[data-theme="eink"] .tips-mini-like-heart { filter: grayscale(1) !important; } /* ── 5. tips-context-pill 그라데 → 단색 ── */ html[data-theme="eink"] .tips-context-pill { background: rgba(0, 0, 0, 0.06) !important; color: #1A1A1A !important; } html[data-theme="eink"] .tips-context-icon, html[data-theme="eink"] .tips-context-label { color: #1A1A1A !important; } /* ── 6. 모든 결과/카드 배경 → 종이톤 + 그림자 제거 ── */ html[data-theme="eink"] .love-result-card, html[data-theme="eink"] .love-event-rich, html[data-theme="eink"] .love-tactic-result > *, html[data-theme="eink"] .love-stage-result > *, html[data-theme="eink"] .love-compat-result > *, html[data-theme="eink"] .featured-quote, html[data-theme="eink"] .tip-card { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.12) !important; box-shadow: none !important; } /* ── 7. script-list / ng-list 컬러 액센트 → 단색 hairline ── */ html[data-theme="eink"] .love-event-script-list li, html[data-theme="eink"] .love-event-ng-list li { background: transparent !important; border: none !important; border-left: 2px solid rgba(0, 0, 0, 0.20) !important; padding-left: 12px !important; } html[data-theme="eink"] .love-event-ng-list li { border-left-color: rgba(0, 0, 0, 0.40) !important; } /* ── 8. 글로브 단색 그레이 (활성 국가 hot 명도 단순화) ── */ html[data-theme="eink"] #globe svg path { fill: #D8D5CB !important; stroke: rgba(0, 0, 0, 0.16) !important; stroke-width: 0.5 !important; filter: none !important; } /* ── 9. lang-switcher / 입력 폼 / form 모두 종이톤 ── */ html[data-theme="eink"] .lang-switcher--select { background: rgba(239, 236, 226, 0.92) !important; border-color: rgba(0, 0, 0, 0.18) !important; color: #1A1A1A !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } html[data-theme="eink"] .lang-select { color: #1A1A1A !important; } html[data-theme="eink"] input, html[data-theme="eink"] textarea, html[data-theme="eink"] select { background: #FFFFFE !important; color: #1A1A1A !important; border-color: rgba(0, 0, 0, 0.18) !important; } /* ── 10. 광고 슬롯 완전 hide (E-Ink reading-first) ── */ html[data-theme="eink"] .ad-slot, html[data-theme="eink"] .ad-label { display: none !important; } /* ── 11. love-divider 평탄화 ── */ html[data-theme="eink"] .love-divider { color: #5A5A5A !important; } html[data-theme="eink"] .love-divider::before, html[data-theme="eink"] .love-divider::after { background: rgba(0, 0, 0, 0.15) !important; } /* ── 12. mast/featured (홈 매거진 그라데) 텍스트 모두 단색 ── */ html[data-theme="eink"] .mast-title, html[data-theme="eink"] .mast-subtitle, html[data-theme="eink"] .mast-line, html[data-theme="eink"] .featured-label, html[data-theme="eink"] .featured-quote-text, html[data-theme="eink"] .featured-quote-meta { background: none !important; -webkit-text-fill-color: #1A1A1A !important; color: #1A1A1A !important; } html[data-theme="eink"] .mast-date, html[data-theme="eink"] .mast-edition, html[data-theme="eink"] .mast-line, html[data-theme="eink"] .featured-label, html[data-theme="eink"] .featured-quote-meta { color: #5A5A5A !important; } html[data-theme="eink"] .fq-author { color: #1A1A1A !important; } /* ── 13. 글로브 stage 배경 모두 종이톤/투명 ── */ html[data-theme="eink"] #feed-stage, html[data-theme="eink"] .globe-section, html[data-theme="eink"] .mast-row, html[data-theme="eink"] .featured-quote-section { background: transparent !important; } /* ── 14. UI 단순화 — 메뉴 카드 6열 그리드 → 1열 list (reading-first) ── */ html[data-theme="eink"] .love-menu-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.10); border-bottom: 1px solid rgba(0, 0, 0, 0.10); } html[data-theme="eink"] .love-menu-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; padding: 18px 12px !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; min-height: auto !important; } html[data-theme="eink"] .love-menu-card:last-child { border-bottom: none !important; } html[data-theme="eink"] .love-menu-card:hover { background: rgba(0, 0, 0, 0.03) !important; transform: none !important; border-color: rgba(0, 0, 0, 0.12) !important; } html[data-theme="eink"] .love-menu-icon { width: 32px !important; height: 32px !important; margin: 0 !important; flex-shrink: 0; } html[data-theme="eink"] .love-menu-card > div:not(.love-menu-icon), html[data-theme="eink"] .love-menu-card > button:not(.love-menu-icon) { flex: 1; min-width: 0; } html[data-theme="eink"] .love-menu-title-card { font-size: 1rem !important; font-weight: 700 !important; margin: 0 !important; color: #1A1A1A !important; } html[data-theme="eink"] .love-menu-desc { font-size: 0.86rem !important; color: #5A5A5A !important; margin: 3px 0 0 !important; line-height: 1.45 !important; } html[data-theme="eink"] .love-menu-cta { display: none !important; } html[data-theme="eink"] .love-menu-card::after { content: '›'; color: rgba(0, 0, 0, 0.35); font-size: 1.4rem; margin-left: auto; padding-left: 12px; } /* ── 15. extras (게임 details) 단순화 ── */ html[data-theme="eink"] .love-extras { margin-top: 12px !important; border: none !important; background: transparent !important; } html[data-theme="eink"] .love-extras-summary { padding: 14px 12px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; background: transparent !important; color: #1A1A1A !important; font-weight: 600 !important; } /* ── 16. love-hero 단순화 (badge/그라데 텍스트 제거) ── */ html[data-theme="eink"] .love-hero { background: transparent !important; padding: 32px 0 24px !important; text-align: left !important; } html[data-theme="eink"] .love-hero-badge { background: transparent !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; color: #1A1A1A !important; padding: 4px 10px !important; } html[data-theme="eink"] .love-hero-title { font-size: 1.8rem !important; line-height: 1.25 !important; } html[data-theme="eink"] .love-hero-sub { color: #5A5A5A !important; font-size: 0.94rem !important; } /* ── 17. love-menu-title (섹션 제목) 단순화 ── */ html[data-theme="eink"] .love-menu-title { font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #5A5A5A !important; margin: 24px 0 12px !important; text-align: left !important; } /* ── 18. love-header 단순화 ── */ html[data-theme="eink"] .love-header { background: transparent !important; border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important; padding: 14px 0 !important; backdrop-filter: none !important; box-shadow: none !important; } html[data-theme="eink"] .brand-name { font-weight: 700 !important; letter-spacing: 0.05em !important; } /* ── 19. 글쓰기 CTA, 모든 그라데 버튼 → 단색 (이미 일부 처리됐지만 최종 보장) ── */ html[data-theme="eink"] .write-cta, html[data-theme="eink"] .cta-btn, html[data-theme="eink"] .saju-btn, html[data-theme="eink"] .submit-btn { background: #1A1A1A !important; color: #FFFFFF !important; box-shadow: none !important; border: none !important; } /* ── 20. community 카드 더욱 단순화 ── */ html[data-theme="eink"] .cf-card { border-bottom-color: rgba(0, 0, 0, 0.08) !important; background: transparent !important; } html[data-theme="eink"] .cf-card:hover { background: rgba(0, 0, 0, 0.02) !important; } html[data-theme="eink"] .community-head { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } /* ── 21. footer 단순화 ── */ html[data-theme="eink"] .portal-footer, html[data-theme="eink"] .love-footer { background: transparent !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; padding: 16px 0 !important; } html[data-theme="eink"] .footer-nav a { color: #5A5A5A !important; } html[data-theme="eink"] .footer-nav a:hover { color: #1A1A1A !important; } html[data-theme="eink"] .footer-copy { color: #5A5A5A !important; } /* ── 22. love-card 결과 카드 단순화 (보더 hairline + 종이톤) ── */ html[data-theme="eink"] .love-card, html[data-theme="eink"] .love-gate-card { border-radius: 4px !important; padding: 18px 16px !important; } /* ── 23. 모바일 글로브/카드 stream 단순화 ── */ html[data-theme="eink"] .feed-stage, html[data-theme="eink"] .featured-quote-section { background: transparent !important; } html[data-theme="eink"] .tip-card { border-radius: 6px !important; padding: 10px 12px !important; } /* ── 24. saju-input/saju-result 등 사주 페이지 종이톤 ── */ html[data-theme="eink"] .saju-card, html[data-theme="eink"] .saju-result { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.12) !important; box-shadow: none !important; } /* ============================================================ * E-Ink 완전 완성 — Universal Nuclear Reset * 대장님 명령: '완벽한 E-Ink 완성 안 됨' → 모든 잔존 컬러 일괄 제거 * 국기 emoji(.flag/.tip-flag/.community-flag/.fq-flag)만 예외 컬러 유지 * ============================================================ */ /* ── 1. 모든 그라데/그림자/box-shadow 일괄 제거 (nuclear) ── */ html[data-theme="eink"] body * { background-image: none !important; box-shadow: none !important; } /* ── 2. 그라데 텍스트(background-clip:text)는 단색 잉크로 ── */ html[data-theme="eink"] body * { -webkit-text-fill-color: initial; background-clip: initial; } html[data-theme="eink"] :is( .brand-name, .love-hero-title, .love-hero-line1, .love-hero-line2, .saju-title, .mbti-title, .love-menu-title, .love-section-title, .mast-title, .mast-subtitle, .featured-label, .featured-quote-text, .featured-quote-meta, .signature-logo, .love-result-title, .community-title, .love-menu-title-card, .love-hero-sub, .love-hero-badge, .mast-mark, .mast-edition, .mast-date, .mast-line, .fq-author, .saju-result-title, .saju-section-title ) { background: none !important; -webkit-text-fill-color: #1A1A1A !important; background-clip: initial !important; color: #1A1A1A !important; } /* ── 3. 모든 카드/박스 일괄 종이톤 + 검정 hairline ── */ html[data-theme="eink"] :is( .tip-card, .featured-quote, .love-result-card, .love-card, .love-gate-card, .love-event-rich, .saju-card, .saju-result, .saju-input-card, .mbti-card, .mbti-result, .stat-card, .info-card, .cf-card, .love-menu-card, .love-extras, .tips-widget, .tips-mini-widget, .tips-list, .saju-stat-card, .saju-pair-card, .mbti-question-card, .mbti-option-card, .mbti-result-card, .community-tabs, .lang-switcher--select, .sl-modal, .signature-logo, .love-result-section ) { background-color: transparent !important; border-color: rgba(0, 0, 0, 0.12) !important; } /* 명시적 종이톤이 필요한 큰 카드들만 #FFFFFF */ html[data-theme="eink"] :is( .love-result-card, .love-card, .love-gate-card, .saju-card, .saju-result, .love-event-rich, .featured-quote, .tip-card, .saju-input-card, .saju-result-section, .mbti-result-card ) { background-color: #FFFFFF !important; } /* ── 4. lang-switcher / theme-toggle / 매거진 시그니처 thin rule ── */ html[data-theme="eink"] .lang-switcher--select { background: rgba(239, 236, 226, 0.92) !important; border-color: rgba(0, 0, 0, 0.20) !important; color: #1A1A1A !important; } html[data-theme="eink"] .lang-select { color: #1A1A1A !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 12px !important; } html[data-theme="eink"] .sl-theme-toggle { background: rgba(239, 236, 226, 0.92) !important; color: #1A1A1A !important; border-color: rgba(0, 0, 0, 0.22) !important; } /* ── 5. SHESLAB / hero / menu thin double rule — E-Ink 모두 검정 hairline ── */ html[data-theme="eink"] :is( .signature-logo::before, .signature-logo::after, .love-hero::after, .love-hero::before, .love-menu-title::before, .love-menu-title::after, .mast-rule, .mast-rule.top, .mast-rule.bottom ) { background: rgba(0, 0, 0, 0.32) !important; background-image: none !important; opacity: 0.6 !important; } /* ── 6. love.css 매거진 톤 (방금 추가)의 E-Ink 강제 평탄화 ── */ html[data-theme="eink"] .love-hero { background: transparent !important; background-image: none !important; } html[data-theme="eink"] .love-hero-badge { background: transparent !important; border: 1px solid rgba(0, 0, 0, 0.25) !important; color: #1A1A1A !important; } html[data-theme="eink"] .love-hero-sub { color: #5A5A5A !important; } html[data-theme="eink"] .love-menu-title { color: #1A1A1A !important; } /* ── 7. mbti/saju 페이지 일반 컬러 잔존 reset ── */ html[data-theme="eink"] :is( .mbti-page, .saju-page, .mbti-wrap, .saju-wrap, .mbti-section, .saju-section ) { background: transparent !important; color: #1A1A1A !important; } html[data-theme="eink"] :is( .mbti-question-text, .mbti-option-text, .saju-input-label, .saju-result-text, .mbti-result-text, .mbti-result-summary ) { color: #1A1A1A !important; } html[data-theme="eink"] :is( .mbti-option-card, .saju-pair-card, .saju-stat-card ) { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.14) !important; } html[data-theme="eink"] :is( .mbti-option-card.selected, .mbti-option-card:hover, .saju-pair-card.active, .love-menu-card:hover ) { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.32) !important; } /* ── 8. 모든 a/button hover의 컬러 액센트 평탄화 ── */ html[data-theme="eink"] a:hover, html[data-theme="eink"] button:hover { background-color: rgba(0, 0, 0, 0.04) !important; } html[data-theme="eink"] a:hover { color: #1A1A1A !important; } /* ── 9. 모든 input/select/textarea focus 핑크 → 검정 ── */ html[data-theme="eink"] input:focus, html[data-theme="eink"] textarea:focus, html[data-theme="eink"] select:focus { outline: none !important; border-color: #1A1A1A !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important; } /* ── 10. featured-quote section / mast-row 배경 평탄화 ── */ html[data-theme="eink"] :is( .featured-quote-section, .mast-row, .mast-block, .globe-section, .globe-wrap, #feed-stage, #globe, .mast-decor, .mast-meta ) { background: transparent !important; background-image: none !important; } /* ── 11. 글로브 stage decorative 요소 모두 종이톤 ── */ html[data-theme="eink"] #globe svg { background: transparent !important; } /* ── 12. badges, pills, chips (모든 둥근 액세서리) 평탄화 ── */ html[data-theme="eink"] :is( .tips-badge, .tips-badge-gold, .tips-badge-silver, .tips-badge-bronze, .tip-badge, .cf-badge, .fq-badge, .tips-context-pill, .tips-mini-chip ) { background: rgba(0, 0, 0, 0.06) !important; background-image: none !important; color: #1A1A1A !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; } /* ── 13. 모든 한글/영문 헤드라인의 inline style 그라데 보호 ── */ html[data-theme="eink"] [style*="linear-gradient"], html[data-theme="eink"] [style*="gradient"] { background-image: none !important; } html[data-theme="eink"] [style*="color:"] { color: #1A1A1A !important; } /* ── 14. placeholder 페이지 (whispers/playbook/hall) inline style 시정 ── */ html[data-theme="eink"] [style*="color:#8E5878"], html[data-theme="eink"] [style*="color:#B5739E"], html[data-theme="eink"] [style*="color:#E8A4B8"] { color: #1A1A1A !important; }