/* RED Guide — 다크 모드 테마. html.dark 에서 활성.
   전략: "다크 셸(헤더·사이드바·TOC·배경) + 라이트 콘텐츠 카드".
   스크랩된 AS-IS 본문은 자체 색/이미지를 가지므로 흰 카드 위에 그대로 둬서 가독성·정확도 보존. */

html.dark{color-scheme:dark}
html.dark body{background:#0e1014}

/* ===== 상단 헤더 ===== */
html.dark .top{background:#15181e;border-bottom-color:#262a31}
html.dark .topnav a{color:#aeb4bd}
html.dark .topnav a:hover,html.dark .topnav a.active{color:var(--color-primary)}
html.dark .brand .en{color:#f2f4f7}
html.dark .brand .ko{color:#878d96}
html.dark .search{background:#1b1f26;border-color:#2c313a}
html.dark .search input{color:#e6e8ec}
html.dark .search input::placeholder{color:#787e88}
html.dark .search kbd{background:#1b1f26;border-color:#2c313a;color:#878d96}
html.dark .search:focus-within{border-color:#3a4150;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
html.dark .search .s-ico{filter:invert(.55)}

/* 헤더 아이콘 버튼(언어·다크) — 하드코딩 stroke 다크 대응 */
html.dark .lang-btn svg path,html.dark .theme-btn svg path{stroke:#dfe3e8}
html.dark .lang-btn svg rect,html.dark .theme-btn svg rect{stroke:#3a4150}

/* ===== 좌측 사이드바 ===== */
html.dark .side .sec > h4{color:#e6e8ec}
html.dark .side .sec > h4:hover{background:#1b1f26}
html.dark .side li a{color:#aeb4bd}
html.dark .side li a:hover{background:#1b1f26;color:#f2f4f7}
html.dark .side li a.active,html.dark .side .subnav li a.active{color:var(--color-primary)}
html.dark .side .subnav{border-left-color:#2c313a}
html.dark .side .subnav li a{color:#9aa0a9}
html.dark .side .subnav li a:hover{background:#1b1f26;color:#f2f4f7}
/* data-URI 글리프(아코디언/세브론/외부링크)는 invert로 밝게 */
html.dark .side .acc,html.dark .side .chev,html.dark .side .ext-ico{filter:invert(.82)}

/* ===== 우측 On this page ===== */
html.dark .toc h5{color:#878d96}
html.dark .toc a{color:#878d96;border-left-color:#262a31}
html.dark .toc a:hover,html.dark .toc a.active{color:var(--color-primary);border-left-color:var(--color-primary)}

/* ===== 콘텐츠 = 하이브리드 다크 (2026-06-29) =====
   본문 텍스트는 모두 --prose-* 변수를 쓰므로, 변수만 밝게 재정의 → 제목·breadcrumb·본문 전부
   자동으로 밝아짐(클래스 일일이 안 건드림). 검정 선 SVG 도표·표·이미지는 흰 타일로 가독성 보존.
   기획자 클레임("콘텐츠가 백색") 대응 — 본문 영역이 다크 + 밝은 글자, 시각요소만 흰 타일. */
html.dark .content{
  --prose-body:#c8ccd2; --prose-heading:#f2f4f7; --prose-muted:#9aa0a9; --prose-line:#3a4150;
  background:transparent;
}
html.dark .docs-prose{background:transparent;box-shadow:none;padding:8px 0 40px}
/* 검정 선 SVG 도표만 흰 타일(다크에 묻히면 안 보임). 표·이미지는 흰 타일 안 함. */
html.dark .docs-prose figure,
html.dark .docs-prose svg{background:#fff;border-radius:10px;color:#1c1d1f}
html.dark .docs-prose figure{padding:14px}
html.dark .docs-prose svg{padding:8px;box-sizing:border-box}
html.dark .docs-prose .detail-img img,html.dark .docs-prose .img img,html.dark .docs-prose figure img{background:#fff}
/* 용지표 등 표 = 다크 배경 + 밝은 글자 (var 상속). 용지명 칸은 muted 변수라 다크 위에서 보임 */
html.dark .docs-prose table,html.dark .docs-prose .paper-table{background:transparent;color:var(--prose-body)}
html.dark .docs-prose table th,html.dark .docs-prose .paper-table th{color:#e6e8ec;border-color:#2c313a;background:#15181e}
html.dark .docs-prose table td,html.dark .docs-prose .paper-table td{border-color:#262a31}
html.dark .docs-prose .paper-table tbody tr:hover{background:#1b1f26}
/* 어두운 배경에서 보라 강조색만 살짝 밝게(핑크·옐로는 그대로 가독) */
html.dark .docs-prose .fc-purple{color:#c97fce}
/* 라이트 배경 UI(다운로드 버튼·접이식 라벨·경고박스·다운로드카드) — 다크 표면+밝은 글자로 글자 묻힘 방지 */
html.dark .docs-prose .list-item li a{background:#1b1f26;color:#e6e8ec;border-color:#2c313a}
html.dark .docs-prose .list-item li a:hover{background:#22272f;border-color:var(--color-primary);color:var(--color-primary)}
html.dark .docs-prose .guide-accordion>label{background:#1b1f26;color:#e6e8ec}
html.dark .docs-prose .spec-list li.warn{background:#2a2412;color:#e6d9b8}
html.dark .docs-prose .dl{background:#15181e;border-color:#2c313a}
/* 콜아웃 박스(info/tip/warn/note) — 라이트 배경 → 다크 표면(글자는 var 상속으로 밝음) */
html.dark .docs-prose .callout.info{background:#1b1f26}
html.dark .docs-prose .callout.tip{background:#11241a}
html.dark .docs-prose .callout.warn{background:#2a2412}
html.dark .docs-prose .callout.note{background:#15181e}

/* ===== 검색 드롭다운 ===== */
html.dark .gsearch-dd{background:#15181e !important;border-color:#2c313a !important;box-shadow:0 12px 40px rgba(0,0,0,.6) !important}
html.dark .gsearch-dd .gs-item:hover,html.dark .gsearch-dd .gs-item.sel{background:#1b1f26 !important}
html.dark .gsearch-dd .gs-t{color:#f2f4f7}
html.dark .gsearch-dd .gs-c,html.dark .gsearch-dd .gs-head,html.dark .gsearch-dd .gs-empty{color:#9aa0a9}

/* ===== 허브(index.html) 카드 ===== */
html.dark .wrap h1,html.dark .wrap h2,html.dark .wrap h3,html.dark .grp > h2{color:#e6e8ec}
html.dark .lead,html.dark .note{color:#9aa0a9}
html.dark .card{background:#15181e;border-color:#262a31}
html.dark .card .t{color:#f2f4f7}
html.dark .card .d{color:#9aa0a9}
html.dark .card:hover{border-color:#3a4150;background:#1b1f26}

/* ===== 토글 버튼 스타일(허브에 .lang-btn 정의가 없을 때 공통 사용) ===== */
.theme-btn{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;line-height:0;border-radius:50%;transition:opacity .12s}
.theme-btn:hover{opacity:.7}

/* ===== 섹션 딥링크(#앵커) 스크롤 오프셋 — 고정 헤더(64px) 가림 방지. 다크모드와 무관, 공통. ===== */
.docs-prose h2, .docs-prose .detail-title{scroll-margin-top:84px}