/* 웍스 정적 가이드(public/guides/**) 다크 테마.
   - 값은 앱 토큰 styles/theme-tokens.css 의 .dark 블록을 그대로 옮긴 것. 토큰 값이 바뀌면 여기도 맞춘다.
   - 인라인 style="color:#333" 로 준 색은 guide-theme.js 가 토큰 변수로 바꿔 넣는다 (여기 변수를 참조). 이 파일은 변수 정의와
     <style> 블록으로 색을 주는 파일의 클래스·요소 셀렉터만 덮는다.
   - <style> 블록을 가진 파일(agent/index.html, agent.html, agent/00-create-agent.html, schedule/schedule-guide.html)은 그 클래스·요소 셀렉터를 아래 "클래스 기반" 절에서 덮는다.
   - html.dark 는 guide-theme.js 가 붙인다. 라이트에서 바뀌는 건 맨 아래 "가이드 목록 아이콘" 절의 크기 통일뿐.
   - 스크린샷·svg 일러스트(흰 바탕 아이콘 등)는 손대지 않는다. */

html.dark {
  color-scheme: dark;
  --ui-bg: #16171a;
  --ui-bg-2: #1e1f23;
  --ui-bg-3: #26272c;
  --ui-bg-4: #303137;
  --ui-fg: #f0f3fa;
  --ui-fg-2: #c2c8d1;
  --ui-fg-3: #b3b9c3;
  --ui-fg-4: #a4aab4;
  --ui-muted: #878c94;
  --ui-border: #2e2f35;
  --ui-border-soft: #242529;
  --ui-border-2: #3a3c43;
  --ui-border-strong: #4a4c55;
  --ui-primary-text: #9b9cf8;
  --ui-primary-soft: #232441;
  --ui-accent-text: #6faeff;
  --ui-accent-soft: #1a2638;
  --ui-accent-soft-strong: #1f3350;
  --ui-accent-border: #2a4368;
  --ui-danger: #f87171;
  --ui-danger-text: #f87171;
  --ui-danger-soft: #3a1a1a;
  --ui-warning-light: #fbbf24;
  --ui-warning-soft: #3a2e10;
  --ui-success-text: #4ade80;
  --ui-success-soft: #14301f;
  --ui-indigo-text: #a5b4fc;
  --ui-indigo-soft: #25284a;
  --ui-mint-text: #34d399;
  --ui-mint-soft: #14302a;
}

/* ───────── 바닥·기본 글자 ───────── */
html.dark body {
  background: var(--ui-bg) !important;
  color: var(--ui-fg) !important;
}
/* 인라인·클래스 색이 없는 링크만 (카드형 <a class> 는 color:inherit 유지) */
html.dark a:not([style*="color" i]):not([class]) {
  color: var(--ui-accent-text);
}

/* ───────── 클래스 기반: agent.html · agent/00-create-agent.html (body/h1/h2/code/pre/blockquote/.warn/td) ───────── */
html.dark h1 {
  border-bottom-color: var(--ui-border-strong);
}
html.dark h2 {
  border-bottom-color: var(--ui-border);
}
html.dark hr {
  border-top-color: var(--ui-border);
}
html.dark code,
html.dark pre {
  background: var(--ui-bg-3);
}
html.dark blockquote {
  background: var(--ui-indigo-soft);
  border-left-color: var(--ui-indigo-text);
}
html.dark .warn {
  background: var(--ui-warning-soft);
  border-left-color: var(--ui-warning-light);
}
html.dark td {
  border-color: var(--ui-border);
}
html.dark td.label {
  background: var(--ui-bg-2);
}
html.dark .figure img {
  border-color: var(--ui-border);
}
html.dark .figure .cap {
  color: var(--ui-fg-3);
}

/* ───────── 클래스 기반: agent/index.html (가이드 목록) ───────── */
html.dark .header {
  border-bottom-color: var(--ui-border-soft);
}
html.dark .header-divider {
  background: var(--ui-border-2);
}
html.dark .header-title {
  color: var(--ui-fg-3);
}
html.dark .hero h1,
html.dark .guide-info h3 {
  color: var(--ui-fg);
}
html.dark .hero p,
html.dark .guide-info p {
  color: var(--ui-fg-4);
}
html.dark .section-label {
  color: var(--ui-muted);
}
html.dark .guide-card {
  border-color: var(--ui-border);
  background: var(--ui-bg-2);
}
html.dark .guide-card:hover {
  border-color: var(--ui-border-2);
  background: var(--ui-bg-3);
}
html.dark .guide-tag {
  color: var(--ui-fg-4);
  background: var(--ui-bg-3);
}
html.dark .guide-arrow {
  color: var(--ui-muted);
}
html.dark .guide-card:hover .guide-arrow {
  color: var(--ui-fg-2);
}
html.dark .footer {
  border-top-color: var(--ui-border-soft);
  color: var(--ui-muted);
}

/* ───────── 클래스 기반: schedule/schedule-guide.html (CSS 변수 기반) ───────── */
html.dark {
  --bg: var(--ui-bg);
  --text: var(--ui-fg);
  --text-secondary: var(--ui-fg-3);
  --border: var(--ui-border);
  --tip-bg: var(--ui-primary-soft);
  --tip-border: var(--ui-primary-text);
  --warn-bg: var(--ui-warning-soft);
  --warn-border: var(--ui-warning-light);
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger);
  --info-bg: var(--ui-accent-soft);
  --info-border: var(--ui-accent-text);
  --code-bg: var(--ui-bg-3);
  --table-header: var(--ui-bg-2);
  --link: var(--ui-accent-text);
}
html.dark .summary-box {
  background: var(--ui-primary-soft);
}
html.dark .feature-card {
  background: var(--ui-bg-2);
}
html.dark .img-wrap img {
  border-color: var(--ui-border);
}
html.dark .step-badge {
  color: var(--ui-bg);
}
html.dark .badge-blue {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
}
html.dark .badge-green {
  background: var(--ui-success-soft);
  color: var(--ui-success-text);
}

/* ───────── 가이드 목록 아이콘 (agent/index.html) — 판 42px · 그림 28px 로 통일 ───────── */
/* 원본은 아이콘마다 형식이 다르다: 28px 이미지(판 없음) / 48px 연한 판이 그려진 svg(42px 로 잘려 판이 됨) / 인라인 바닥색.
   크기는 라이트·다크 공통으로 맞추고, 다크에서는 전부 흰 판 위에 올린다(앱의 data-brand-logo 와 같은 처리). */
.guide-card .guide-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.guide-card .guide-icon > img,
.guide-card .guide-icon > svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
/* 48px 판이 그려진 svg(인라인 svg · img 로 들어간 법령 아이콘): 판이 42px 상자에 딱 맞게 줄인다.
   원본은 48px 그대로 넣고 잘라서 그림이 다른 아이콘보다 크고 가장자리가 잘렸다 */
.guide-card .guide-icon > svg[width="48"],
.guide-card .guide-icon.law > img {
  width: 42px;
  height: 42px;
}
html.dark .guide-card .guide-icon {
  background: #ffffff !important; /* 로고는 흰 판 위에서 원래 색 그대로 — 인라인 바닥색(guide-theme.js 가 바꾼 값 포함)보다 우선 */
}
html.dark .guide-card .guide-icon > svg[width="48"] > rect:first-child {
  fill: #ffffff; /* svg 안에 그려진 연한 판도 흰색으로 */
}

/* ───────── 각 가이드 하단 "다른 가이드" 목록 아이콘 — 다크에서 흰 판 ───────── */
/* <a href="NN-xxx.html"><img|svg 22px>…</a> 형태로 감싸는 상자가 없다. padding 만큼 음수 margin 을 줘서 자리(22px)는 그대로 두고 판만 두른다.
   목록 카드(.guide-icon 으로 감싼 것)는 위 절에서 처리 */
html.dark a[href$=".html"] > :is(img, svg):first-child {
  box-sizing: content-box;
  padding: 4px;
  margin: -4px;
  border-radius: 7px;
  background: #ffffff;
}
html.dark a[href$=".html"] > svg:first-child > rect:first-child {
  fill: #ffffff; /* svg 안에 그려진 연한 판도 흰색으로 */
}