/* 읽기 모드 (다크 / 웜톤) — 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); /* 캡슐 --color-* 계열도 뒤집는다 — 푸터·.section--white 가 --color-bg 를 써서 --c-* 오버라이드만으로는 흰색으로 남았다. --color-bg-dark(네이비)는 유지. 2026-08-06 */ --color-bg: #1e1e24; --color-canvas: #15151a; --color-surface-subtle: #26262c; --color-heading: #f2f2f6; --color-text: rgba(242,242,246,0.86); --color-text-muted: #9b9ba6; --color-border: rgba(255,255,255,0.11); } 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); /* --color-* 계열도 웜톤으로 (푸터·.section--white). --color-bg-dark 유지. 2026-08-06 */ --color-bg: #fffaf0; --color-canvas: #f6f0e3; --color-surface-subtle: #efe7d6; --color-heading: #3b352b; --color-text: rgba(59,53,43,0.86); --color-text-muted: #6f6655; --color-border: rgba(59,53,43,0.12); } 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); } /* 읽기 액션바 버튼 간격: blog.css의 .blog-aside__mode{margin-top:8px} 기본값을 그대로 두면 .read-actbar gap:10px + 8px = 18px로 아티클(.arts-actions__mode와 동일)과 일치. 구 -14px 보정은 .read-actbar gap 도입 후 이중보정(net -4px)이 되어 폐기. */ /* ── 헤더 드롭다운/메가 패널 — 내부 흰 배경·검정 텍스트가 다수 하드코딩 → 다크/웜에서 전수 적용 ── */ /* 표면(패널·카드·뉴스·링크 배경): 다크/웜 모두 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; } /* 모바일 햄버거 3선 = rgb(23,23,25) 하드코딩 → 다크에서 묻힘 → 밝게 (warm은 크림 배경이라 그대로) */ html.read-dark .nav-toggle__bar { background: var(--c-text-heading) !important; } /* 최상위 nav 링크(Product·Solutions…) = #1c1c1c 하드코딩 → 다크에서 투명헤더 위 묻힘 → 밝게. 마켓플레이스 아이콘·모바일 드로어(햄버거 열림)도 함께. warm은 크림 배경이라 검정 그대로 보임 → dark만. (2026-08-06 현세: 싱글 다크모드 헤더/햄버거 안 보임) */ html.read-dark .nav-links__trigger, html.read-dark .nav-links__trigger span { color: var(--c-text-heading) !important; } /* 마켓플레이스 아이콘 = store.svg (어두운 색)라 fill로 못 바꾼다 → 반전해 흰색으로. 라벨·캐럿(하드코딩 stroke #999)도 밝게. */ html.read-dark .nav-market__icon { filter: brightness(0) invert(1); } html.read-dark .nav-market__summary, html.read-dark .nav-market__label { color: var(--c-text-heading) !important; } html.read-dark .nav-market__caret path { stroke: var(--c-text-heading) !important; } /* 모바일 드로어 — 배경 다크(.is-open이 #fff 하드코딩이라 그 상태 명시로 특이도 확보) + 텍스트 밝게 */ html.read-dark .nav-mobile, html.read-dark .nav-mobile.is-open { background-color: var(--c-bg-light) !important; } html.read-dark #mobile-drawer .nav-mobile__link, html.read-dark #mobile-drawer .nav-mobile__group-label, html.read-dark #mobile-drawer .nav-mobile__lang-opt, html.read-dark #mobile-drawer .nav-mobile__close, html.read-dark .nav-mobile__link, html.read-dark .nav-mobile__group-label { color: var(--c-text-heading) !important; } html.read-dark #mobile-drawer .nav-mobile__lang-globe { fill: var(--c-text-heading) !important; } html.read-dark #mobile-drawer .nav-mobile__logo img, html.read-dark #mobile-drawer .nav-mobile__logo svg { filter: brightness(0) invert(1); } /* 드로어 안 언어 구분선·보더도 옅게 */ html.read-dark #mobile-drawer .nav-mobile__lang { border-color: rgba(255,255,255,0.14) !important; } /* ─── 읽기 액션바 (복사·다크·웜) — 아티클·블로그 공통 ────────────────── 데스크탑: 기존 세로 스택 유지(레일/사이드). 모바일(≤960px): 하단 중앙 floating pill, 가로 정렬. reading-mode.js가 스크롤 내리면 .is-tucked로 숨기고 올리면 표시. */ .read-actbar { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } @media (max-width: 960px) { .arts-actions.read-actbar, .blog-aside .read-actbar { position: fixed; right: 16px; bottom: 16px; left: auto; transform: none; flex-direction: column; align-items: center; gap: 8px; top: auto; width: auto; flex-basis: auto; z-index: 95; margin: 0; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--c-bg-white, #fff) 45%, transparent); /* 유리처럼 — 뒤 글이 비치되 블러로 아이콘 가독성 유지 */ -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--c-border-light); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); transition: transform 0.26s ease, opacity 0.26s ease; } /* 숨김 — 화면 밖으로 밀면(translateX) fixed가 뷰포트 밖으로 나가 오른쪽 여백/가로스크롤 유발 → 제자리에서 페이드+축소로만 사라지게 */ .arts-actions.read-actbar.is-tucked, .blog-aside .read-actbar.is-tucked { opacity: 0; transform: scale(0.8); pointer-events: none; } /* 유리 느낌 — 개별 버튼 배경도 투명(아이콘만). 활성 모드 버튼(.is-active)은 보라 유지로 현재모드 표시 */ .read-actbar .arts-actions__copy, .read-actbar .arts-actions__mode:not(.is-active), .read-actbar .blog-aside__copy, .read-actbar .blog-aside__mode:not(.is-active) { background: transparent !important; border-color: color-mix(in srgb, currentColor 28%, transparent); } }