/* ===========================================================
   flexx Claude guide — Claude Dark 테마 오버라이드
   site.css(원본 레이아웃) 뒤에 로드된다. 레이아웃/타이포는 건드리지 않고
   색 토큰과 하드코딩된 라이트 컬러만 교체한다.
   =========================================================== */

:root {
  /* 표면 */
  --cream: #1f1e1d;   /* 페이지 바탕 */
  --band:  #262624;   /* 밴드 / 카드 A */
  --card:  #2c2b29;   /* 카드 B */
  --footer:#141413;   /* 푸터 / 코드블록 */

  /* 텍스트 */
  --ink: #faf9f5;
  --sub: #c2c0b6;

  /* 액센트 (Claude clay) */
  --red: #d97757;
  --red-deep: #c15f3c;
  --honey: #e3b341;

  --line: #faf9f524;

  color-scheme: dark;
}

/* 형광펜 밑줄(.u) — 오렌지 밴드 위 어두운 글자 */
:root {
  --u-fg: var(--red);
  --u-band-fg: var(--red);
  --u-band: #d9775740;
  --u-rule: var(--red);
  --u-ink: var(--ink);
}

html, body { background: var(--cream); }
body { color: var(--ink); }

::selection { background: #d9775759; color: #fff; }

/* ---------- 상단 네비 / 필터 바 ---------- */
.nav { background: #1f1e1deb; border-bottom: 1px solid var(--line); }
.filter-bar { background: #1f1e1df5; border-bottom: 1px solid var(--line); }
.navlinks > a:after { background: #d9775761; }
.navlinks > a[aria-current="page"]:after { background: var(--red); }
.brand { color: var(--ink); }

/* ---------- 히어로(flood) : 진한 클레이 패널 ---------- */
.flood {
  background: radial-gradient(120% 140% at 12% 0%, #3a2a22 0%, #262421 46%, #1f1e1d 100%);
  color: var(--ink);
  border-bottom: 1px solid #d9775733;
}
.flood, .chpanel, .gate-col--pitch {
  --u-fg: var(--ink);
  --u-band-fg: #1f1e1d;
  --u-band: var(--red);
  --u-rule: var(--red);
  --u-ink: var(--ink);
}
.flood .h1, .flood .h2 { color: var(--ink); }
.flood-body { color: var(--sub); }
.pen-note, .flood .pen-note { color: var(--honey); }

/* 킥커 배지 */
.kicker {
  background: var(--red);
  color: #1f1e1d;
  box-shadow: 4px 4px 0 #00000073;
}

/* ---------- 버튼 ---------- */
.btn-red { background: var(--red); color: #1f1e1d; }
.btn-red:hover:not(:disabled) { background: #e08a6d; color: #1f1e1d; }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 2px #faf9f552; }
.btn-line:hover { color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }

/* ---------- 가이드 목록 ---------- */
.guide-row {
  background: var(--band);
  border: 1px solid #d9775726;
}
.guide-row:nth-child(4n+2), .guide-row:nth-child(4n+3) { background: var(--card); }
.guide-row:hover {
  border-color: #d9775780;
  box-shadow: 0 16px 44px #00000059;
}
.guide-row__title { color: var(--ink); }
.guide-row__desc, .guide-row__meta { color: var(--sub); }
.guide-row__tag { color: var(--red); }
.guide-row__arrow { background: var(--red); color: #1f1e1d; }

/* 필터 칩 */
.filter-chip { background: #faf9f512; color: var(--ink); border-color: #0000; }
.filter-chip:hover { background: #faf9f521; }
.filter-chip[aria-pressed="true"] {
  background: var(--red); border-color: var(--red); color: #1f1e1d;
}
.filter-search { background: #262624; border-color: #faf9f52e; color: var(--ink); }
.filter-search::placeholder { color: #faf9f561; }
.filter-search:focus { border-color: var(--red); outline-color: var(--red); }

/* ---------- 본문 ---------- */
.article-meta, .tag { color: var(--sub); }
.tag { border-color: var(--line); }
.prose { color: var(--ink); }
.prose a:not(.btn) { color: var(--red); }
.prose a:not(.btn):hover { color: #eb9d80; }
.prose :not(pre) > code {
  color: #eda588;
  background: #d9775724;
}
.prose blockquote { background: var(--band); color: var(--ink); border-left-color: var(--honey); }
.prose th { background: #30302e; color: var(--ink); }
.prose :is(th, td) { border-color: var(--line); }
.prose img {
  border: 1px solid var(--line);
  background: #262624;
  box-shadow: 0 8px 22px #00000066;
}
.prose hr { border-top-color: var(--line); }
.prose h2 { border-top-color: var(--line); }

.callout { background: var(--band); border-color: var(--line); }
.toggle { background: var(--card); border-color: var(--line); }
.toggle > summary { color: var(--ink); }

/* 코드블록 */
.codeblock { background: #141413; border: 1px solid #faf9f51a; }
.codeblock code { color: #ece7dc; }
.codeblock .copy { background: #faf9f51f; color: var(--ink); }
.codeblock .copy:hover { background: #faf9f533; }
.codeblock .copy.done { background: var(--red); color: #1f1e1d; }
.codeblock .slot { color: #ffd9a8; background: #e3b3413d; }
.slot { background: #e3b34133; border-bottom-color: var(--honey); }

/* 폴라로이드 등 흰 배경 잔재 */
.polaroid { background: var(--card); border-color: var(--line); box-shadow: 0 16px 40px #00000073; }
.card { background: var(--card); }

/* ---------- 푸터 ---------- */
.foot { background: var(--footer); color: var(--sub); border-top: 1px solid var(--line); }
.foot a { color: var(--ink); }
.foot a:hover { color: var(--red); }
.foot .fine { color: var(--sub); }

/* ---------- 스크롤바 ---------- */
* { scrollbar-color: #4a4945 #1f1e1d; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #1f1e1d; }
::-webkit-scrollbar-thumb { background: #4a4945; border: 3px solid #1f1e1d; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #6a6862; }

/* 목록이 필터로 숨겨질 때 */
.guide-row[hidden] { display: none !important; }