/* 읽기 모드 (다크 / 웜톤) — single article(우선) · blog · news. * 에 read-dark / read-warm 클래스 토글 → 전역 --c-* 토큰만 오버라이드해 페이지 전체 적용. * 헤더·푸터·본문이 모두 --c-* 토큰을 쓰므로 한 곳에서 색이 따라온다. */ /* ── 다크 ── */ html.read-dark { --c-bg-white: #1e1e24; --c-bg-light: #15151a; --c-bg-light-alt: #26262c; --c-bg-dark: #0e0e12; --c-text-heading: #f2f2f6; --c-text-dark: #f2f2f6; --c-text-strong: rgba(242,242,246,0.86); --c-text-body: rgba(242,242,246,0.82); --c-text-muted: #9b9ba6; --c-text-subtle: rgba(242,242,246,0.5); --c-text-faint: rgba(242,242,246,0.38); --c-border-light: rgba(255,255,255,0.11); --c-border-subtle: rgba(255,255,255,0.07); } html.read-dark body { background: var(--c-bg-light); } /* heading은 ibm-overrides가 #1c1c1c로 강제 → 되돌림(그라데이션 텍스트는 text-fill-color라 영향 없음) */ html.read-dark h1, html.read-dark h2, html.read-dark h3, html.read-dark h4 { color: var(--c-text-heading) !important; } /* ── 웜톤 리딩 ── */ html.read-warm { --c-bg-white: #fffaf0; --c-bg-light: #f6f0e3; --c-bg-light-alt: #efe7d6; --c-text-heading: #3b352b; --c-text-dark: #3b352b; --c-text-strong: rgba(59,53,43,0.86); --c-text-body: rgba(59,53,43,0.82); --c-text-muted: #6f6655; --c-text-subtle: rgba(59,53,43,0.5); --c-text-faint: rgba(59,53,43,0.4); --c-border-light: rgba(59,53,43,0.12); --c-border-subtle: rgba(59,53,43,0.08); } html.read-warm body { background: var(--c-bg-light); } /* ── 모드 버튼 (카피 버튼 아래, 같은 레일) — article(.arts-actions__mode)·blog(.blog-aside__mode) 공용 ── */ .arts-actions__mode, .blog-aside__mode { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border-light); background: var(--c-bg-white); color: var(--c-text-muted); cursor: pointer; padding: 0; margin-top: 8px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; } .arts-actions__mode svg, .blog-aside__mode svg { display: block; width: 18px; height: 18px; } .arts-actions__mode:hover, .blog-aside__mode:hover { border-color: var(--c-accent-violet); color: var(--c-accent-violet); } .arts-actions__mode:active, .blog-aside__mode:active { transform: scale(0.94); } .arts-actions__mode.is-active, .blog-aside__mode.is-active { background: var(--c-accent-violet); border-color: var(--c-accent-violet); color: #fff; } /* 카피 버튼은 background:#fff 하드코딩 → 모드에서 토큰 따르게 */ html.read-dark .arts-actions__copy, html.read-warm .arts-actions__copy, html.read-dark .blog-aside__copy, html.read-warm .blog-aside__copy { background: var(--c-bg-white); } /* 다크에서 어두운 워드마크 로고(img/svg)가 안 보임 → 흰색 반전 (헤더·푸터). 웜톤은 원본 유지. */ html.read-dark .site-header__logo img, html.read-dark .site-header__logo svg, html.read-dark .site-footer img[src*="cubig"], html.read-dark .site-footer__logo img, html.read-dark .site-footer__logo svg { filter: brightness(0) invert(1); } /* ── 다크: --c-* 토큰을 안 거치고 색을 하드코딩한 요소 패치 ── */ /* 본문 prose (진회색 rgba(28,28,28,0.75) 하드코딩 — blog/article 공통) */ html.read-dark .arts-main__content.entry-content, html.read-dark .blog-single__content.entry-content, html.read-dark .entry-content p, html.read-dark .entry-content li { color: var(--c-text-body) !important; } /* 언어 스위처(globe·현재언어·caret — 검정 하드코딩) */ html.read-dark .nav-lang__summary, html.read-dark .nav-lang__current { color: var(--c-text-heading); } /* globe = fill 방식 → fill 밝게 / caret = stroke 방식(fill:none) → stroke 밝게 */ html.read-dark .nav-lang__globe, html.read-dark .nav-lang__globe path { fill: var(--c-text-heading); } html.read-dark .nav-lang__caret, html.read-dark .nav-lang__caret path { stroke: var(--c-text-heading); fill: none; } /* Book architecture review(.btn--contact) — 다크에선 ghost 버튼: 투명 배경 + 밝은 회색 보더 + 밝은 텍스트 */ html.read-dark .btn--contact { background-color: transparent !important; border-color: rgba(255,255,255,0.28) !important; color: var(--c-text-heading) !important; } html.read-dark .btn--contact:hover { border-color: rgba(255,255,255,0.5) !important; } /* Run a sample proof(.btn--dark, charcoal #303135) — 다크 배경에 묻혀 → violet 강조로 띄움 */ html.read-dark .btn--dark { background-color: var(--c-accent-violet) !important; border-color: var(--c-accent-violet) !important; color: #fff !important; } html.read-dark .btn--dark:hover { background-color: var(--c-accent-violet-strong, #6f5cd6) !important; } /* 헤더 배경 — 기본 흰색 + 스크롤 시 frosted 흰색(rgba(255,255,255,0.72))이라 다크/웜에서 깨짐. 다크: 약간 밝은 어두운 회색 frost / 웜: 웜 아이보리 frost. */ html.read-dark .site-header { background-color: var(--c-bg-light); } html.read-dark .site-header.is-scrolled { background: rgba(30,30,36,0.78) !important; } html.read-dark .site-header.is-scrolled .site-header__nav-top { border-bottom-color: rgba(255,255,255,0.08) !important; } html.read-warm .site-header { background-color: var(--c-bg-light); } html.read-warm .site-header.is-scrolled { background: rgba(246,240,227,0.82) !important; } html.read-warm .site-header.is-scrolled .site-header__nav-top { border-bottom-color: rgba(59,53,43,0.10) !important; } /* 블로그 single 섹션 = background:#fff 하드코딩(blog.css .blog-single) → 다크/웜에서 페이지 배경 따르게 */ html.read-dark .blog-single { background: var(--c-bg-light); } html.read-warm .blog-single { background: var(--c-bg-light); } /* 블로그 aside = flex gap:22px라 모드버튼이 너무 벌어짐 → 음수 마진으로 net 8px(아티클 레일과 동일감) */ .blog-aside__mode { margin-top: -14px; } /* ── 헤더 드롭다운/메가 패널 — 내부 흰 배경·검정 텍스트가 다수 하드코딩 → 다크/웜에서 전수 적용 ── */ /* 표면(패널·카드·뉴스·링크 배경): 다크/웜 모두 surface 따르게 */ html.read-dark .nav-links__panel, html.read-warm .nav-links__panel, html.read-dark .nav-mega, html.read-warm .nav-mega, html.read-dark .nav-mega__link, html.read-warm .nav-mega__link, html.read-dark .nav-mega__news-item, html.read-warm .nav-mega__news-item, html.read-dark .nav-mega__card--news, html.read-warm .nav-mega__card--news, html.read-dark .nav-mega__feature, html.read-warm .nav-mega__feature { background-color: var(--c-bg-white) !important; border-color: var(--c-border-light) !important; } /* 다크: 패널 안 검정 텍스트(title·card-text·card-product·news-title·링크 rgb(23,23,25)) → 밝게 */ html.read-dark .nav-mega__title, html.read-dark .nav-mega__card-text, html.read-dark .nav-mega__card-product, html.read-dark .nav-mega__news-title, html.read-dark .nav-mega__link, html.read-dark .nav-links__panel a { color: var(--c-text-heading) !important; } /* 다크: 보조 텍스트(desc·news-cta·news-tag) → muted */ html.read-dark .nav-mega__desc, html.read-dark .nav-mega__news-cta, html.read-dark .nav-mega__news-tag, html.read-dark .nav-mega__feature-note { color: var(--c-text-muted) !important; } /* 호버 배경(연회색 rgb(246,247,249)) → 모드 surface-alt */ html.read-dark .nav-links__panel a:hover, html.read-dark .nav-mega__link:hover, html.read-warm .nav-links__panel a:hover, html.read-warm .nav-mega__link:hover { background-color: var(--c-bg-light-alt) !important; } /* 푸터 Gartner 디스클레이머 = rgba(28,28,28,0.32) faint 검정 → 다크에서 묻힘 → faint 밝은색 */ html.read-dark .footer-bottom__gartner { color: rgba(242,242,246,0.4) !important; } /* nav 메뉴 화살표(chevron) = stroke 검정 하드코딩 → 다크에서 밝게 (stroke 아이콘) */ html.read-dark .nav-links__chevron svg, html.read-dark .nav-links__chevron polyline, html.read-dark .nav-links__chevron path { stroke: var(--c-text-heading) !important; }