/* 도감 페이지 공통 스타일 */

/*
 * ⚠ 이 규칙은 skin.css 에도 있지만, 그 파일은 지금 다른 브랜치가 고치는 중이라
 * 도감이 제 것을 지고 다닌다.
 *
 * /statuses/ 의 거르기가 hidden 을 쓰므로 이것이 없으면 필터된 아이템들이
 * 조용히 보인다.
 */
[hidden] {
  display: none !important;
}

/* ── 색 규칙 ──────────────────────────────────────────────────────────────
 * 이 파일은 `#rrggbb` 색 리터럴을 한 글자도 안 쓴다 — 색은 전부 이 브랜치
 * web/skin.css `:root` 의 기존 토큰(var(--gold) 등)만 참조한다.
 * tests/codex-css.test.js 가 그것을 잰다 — 대비 그물 tests/contrast.test.js 는
 * web/skin.css·style.css 만 읽어서 codex.css 는 그 그물의 사각지대다.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── 본문 폭 · 껍데기 배치 ────────────────────────────────────────────────
 * skin.css 의 `.bg3-main.narrow`(빌드 화면의 「한 칸 읽기 폭」 modifier, 40rem)를
 * 참고해 같은 폭을 쓴다 — 도감도 격자가 아니라 한 칸짜리 읽는 화면이다.
 * 아이템 툴팁(.tt)의 최대폭이 620px(=38.75rem)이라 40rem 이면 여유가 남는다.
 * ───────────────────────────────────────────────────────────────────────── */
.cx-main {
  max-width: 40rem;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* 머리말 배치는 일반 화면의 `skin.css .bg3-header` 하나가 맡는다. 클래스는
 * 도감 껍데기 계약과 스타일 선택자 그물을 위해 남긴다. */
.cx-head {
  box-sizing: border-box;
}

.cx-home {
  box-sizing: border-box;
  color: inherit;
}

.cx-fresh {
  margin: 0;
  font-size: 11px;
  color: var(--faint-readable);
}

.cx-main {
  padding-top: 20px;
  padding-bottom: 60px;
}
.cx-main.wide {
  max-width: 82rem;
}
/* 사이트 꼬리말(정본 web/lib/site-nav.js 꼬리말HTML · 껍데기 skin.css .footnote).
 * 도감은 격자가 아니라 한 칸이라 `grid-column` 은 안 먹고, 본문과 붙지 않게 위 여백만
 * 더 준다. 아래 60px 은 .cx-main 의 padding-bottom 이 이미 준다. */
.cx-main > .footnote {
  margin-top: 40px;
}
/* 좁은 도감 칸(40rem ≈ 640px)은 데스크톱이어도 두 칸 격자가 눌린다 — 실측
 * (구운 아이템 쪽, 1280px 창): 한 줄 소개가 접히고 안내 링크 셋이 두 줄이 됐다.
 * 그래서 넓은 쪽(.wide, 82rem)만 두 칸을 쓰고, 나머지는 skin.css 의 모바일 꼴처럼
 * 한 칸으로 쌓는다(단추는 전폭이 아니라 왼쪽에 둔다 — 폰이 아니다). */
/* ⚠ 미디어 질의를 안 쓴다 — 중단점은 다섯뿐이다(tests/mobile.test.js). 폰(≤720px)에서는
 * skin.css 가 단추를 `flex: 1` 로 펴는데, 그러려면 단추 상자가 칸을 채워야 한다 —
 * 그래서 `justify-self: stretch` 다(start 로 두면 폰에서 단추가 왼쪽에 작게 뭉친다).
 * 데스크톱 좁은 칸에서는 상자만 넓고 단추는 제 폭으로 왼쪽에 선다. */
.cx-main:not(.wide) > .footnote {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "brand" "community" "legal" "meta";
}
.cx-main:not(.wide) > .footnote .sf-community { justify-self: stretch; }
.cx-main:not(.wide) > .footnote .sf-meta { justify-self: start; text-align: left; }
/* ⚠ **직계 자식으로만 겨눈다 — 후손 선택자를 쓰지 않는다.** 아이템 쪽은
 * renderTooltip() 이 만든 `<h2 class="tt-name">`(tooltip.css, 27px)를
 * `.cx-main` 안에 그대로 안는다. `.cx-main h2`(후손, 특정도 0,1,1)로 적으면
 * `.tt-name`(단일 클래스, 특정도 0,1,0)보다 특정도가 높아 **그 제목 크기를
 * 조용히 덮어썼을 것**이다(실측 — 코드 검토로 잡았다, 렌더 확인은 못 함).
 * 이 저장소가 실제로 쓰는 `<h1>`·`<h2>`는 색인·상태 쪽뿐이고 둘 다
 * `.cx-main` 의 직계 자식(h1) 또는 그 아래 <section> 의 직계 자식(h2)이라
 * `>` 로 좁혀도 놓치는 자리가 없다. */
/* ── 표제로 올라간 상세쪽 이름 ────────────────────────────────────────────
 *
 * `tools/codex/shell.mjs` 의 `표제올리기` 가 상세쪽 표제를 `<h1>` 로 올린다
 * (검색엔진이 쪽의 주제를 읽는 자리라 필요했다 — 올리기 전 1,778쪽 중 h1 이
 * 23쪽뿐이었다). **태그만 바뀌고 보이는 것은 그대로여야 한다.**
 *
 * 아이템은 원래 `<h2 class="tt-name">` 이라 `body.bg3 h1, h2`(skin.css)가 양쪽에
 * 똑같이 걸린다 — 바뀌는 게 없다. 주문·종족은 원래 `<div class="st-name">` 이라
 * `h1` 이 되면서 **둘을 새로 받는다**: UA 의 `margin: .67em 0` 과
 * `body.bg3 h1` 의 세리프·굵기. 그 둘만 되돌린다.
 *
 * ⚠ 특정도: `body.bg3 h1` 은 (0,1,2)라 `.st-name`(0,1,0)을 이긴다. 그래서 여기를
 *    `.cx-main h1.st-name`(0,2,2)으로 적어야 실제로 이긴다 — 클래스 하나로는
 *    조용히 진다. */
.cx-main h1.st-name {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
}

.cx-main > h1 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--gold);   /* 2026-09-05: 그라디언트의 대체색 — 같은 계열이어야 한다 */
}
.cx-main > section > h2 {
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
}
.cx-main ul {
  margin: 0 0 4px;
  padding-left: 20px;
  line-height: 1.8;
}

/* ── 색인 목록 — **누를 수 있는 크기로, 세로는 안 늘리고** ────────────────
 *
 * 실측 2026-08-29(헤드리스 크롬 320px): 인라인 `<a>` 는 **높이 15px** 이고 폭도
 * 글자만큼이라, 손가락으로 겨눌 자리가 사실상 없었다. `/item/` 1,182개 ·
 * `/spell/` 562개가 **전부** 44px 미만이었다(--m-touch 기준).
 *
 * ⚠ **한 줄씩 44px 로 키우면 안 된다.** 아이템 색인은 1,182줄이라 23 → 44 는
 *    문서 높이를 31,289 → 약 56,000px 으로 만든다(+79%). 「누르기 쉬워졌는데
 *    아무도 안 내려가는」 쪽이 된다.
 *
 * 그래서 **격자로 편다.** 320px 에서 2열이라 줄 수가 절반이 되고, 그 절반에
 * 44px 을 줘도 총 높이가 그대로다. 넓은 화면에서는 열이 더 생겨 **오히려
 * 짧아진다** — 여태 데스크톱에서도 1,182줄짜리 한 줄 목록이었다.
 *
 * ⚠ `list-style` 을 없앤다. 격자 칸마다 점을 찍으면 칸 안에서 글자가 밀려
 *    44px 상자의 왼쪽 끝이 안 맞는다.
 *
 * ⚠ **폭 문턱을 320 이 아니라 「칸」으로 잰다.** 처음에 `minmax(150px, 1fr)` 로
 *    두고 「150×2 + 간격 6 = 306 ≤ 320 이니 2열」이라 적었는데 **틀렸다.**
 *    320px 기기에서 이 목록이 놓이는 칸은 **273px** 이다(뷰포트 320 → `main`
 *    안여백). 그래서 1열로 떨어졌고 문서높이가 31,289 → **67,353** 이 됐다
 *    (실측). 지금 값 120px 은 273 안에 2열이 들어가는 값이다(120×2 + 6 = 246).
 *
 * ⚠ **`box-sizing` 을 같이 건다.** 도감 쪽에는 `* { box-sizing: border-box }`
 *    가 없어 `min-height: 44px` 이 **안여백 밖**으로 재진다 — 실측 52px 이었다.
 *    (같은 함정을 오늘 `skin.css` 의 `.formula` 에서도 밟았다.) */
.cx-index {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  line-height: 1.35;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 2px 6px;
}
.cx-index > li { margin: 0; }
.cx-index > li > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--m-touch);
  padding: 4px 8px;
  /* 긴 이름이 칸을 넘지 않게. 자르지 않고 **줄바꿈**한다 — 도감은 이름으로
     찾는 자리라 `text-overflow: ellipsis` 로 뒷글자를 지우면 못 고른다. */
  overflow-wrap: anywhere;
}

/* 색인 넷의 「N종」 한 줄과 상태 쪽의 같은 줄이 공유한다. */
/* ⚠ **`<code>` 는 안 접힌다.** 상태 쪽은 한국어 이름을 못 읽은 상태를
   `<code>내부이름</code>` 으로 드러내는데(「모르는 것을 참으로 치지 않는다」),
   그 내부 이름이 밑줄로 이어진 한 낱말이라 **줄바꿈 자리가 없다.** 실측
   2026-08-29: 320px 에서 `LOW_BLOOMRIDGEPARK_DISGUISEDCULTIST_CIRIAN`(42자)가
   오른끝 345 로 나가 `/statuses/` 가 통째로 가로로 샜다.
   ⚠ 자르지 않고 **접는다** — 이 글자는 「무엇을 못 읽었나」를 알리는 값이라
   뒤를 지우면 쓸모가 없어진다. */
.cx-main code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cx-count {
  margin: 2px 0 18px;
  font-size: 12px;
  color: var(--faint-readable);
}

/* ── 도구줄 — 상태 쪽 검색·유형 거르기 (cx-toolbar·cx-kinds·cx-kind) ───── */
.cx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cx-toolbar input[type="search"] {
  flex: 1 1 200px;
  min-width: 140px;
}
.cx-toolbar #cxcount {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint-readable);
  white-space: nowrap;
}
.cx-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
/* `cursor: pointer` 를 다는 요소는 tests/mobile.test.js 가 44px 촉감 하한을
 * 요구한다(전수 그물, web/ 아래 모든 .css 를 훑는다). 그 그물은 `확보됨` 예외
 * 목록에 새 줄을 못 넣게 막아 둔다(「예외 목록은 줄어들기만 한다」). 도감 껍데기도
 * mobile.css 를 싣으므로 공유 정본 `var(--m-touch)` 를 그대로 쓴다. */
.cx-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--m-touch);
  font-size: 12px;
  color: var(--cream);
  cursor: pointer;
}
.cx-kind input {
  accent-color: var(--gold-dim);
}

/* ── 클래스 성장 트리 ───────────────────────────────────────────────────── */
.cx-class-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}
.cx-class-intro > .st {
  max-width: none;
  margin: 0;
}
.cx-class-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.cx-class-facts > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.cx-class-facts dt {
  color: var(--text-2);
  font-size: 11px;
}
.cx-class-facts dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cx-class-tree {
  margin: 0 0 30px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.cx-tree-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.cx-tree-head h1 {
  margin: 0;
  color: var(--gold);   /* 2026-09-05: 아래 그라디언트의 대체색 — 같은 계열이어야 한다 */
  font-size: 20px;
}
/* 도감 제목의 그라디언트 글자 — skin.css `h2.title` 과 같은 꼴(토큰은 그쪽 :root).
   ⚠ 아이템·주문 이름(`h1.st-name`)에는 **안 얹는다** — 그 자리는 등급색이 정보다. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cx-tree-head h1,
  .cx-main > h1 {
    background-image: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 52%, var(--gold-lo) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.cx-tree-head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 12px;
}
.cx-subclass-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.cx-subclass-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--m-touch);
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 11px;
  text-decoration: none;
}
.cx-subclass-nav a:hover {
  border-color: var(--accent-quiet);
  color: var(--text);
}
.cx-levels,
.cx-branch {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cx-level {
  position: relative;
  min-width: 0;
  padding: 0 8px 10px;
  border: 1px solid var(--line);
  border-top-color: var(--accent-quiet);
  background: var(--surface-2);
}
.cx-level::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -11px;
  width: 10px;
  border-top: 1px solid var(--accent-quiet);
}
.cx-level:first-child::before {
  display: none;
}
.cx-levels > .cx-level:nth-child(6n + 1)::before,
.cx-branch > .cx-level:nth-child(4n + 1)::before {
  display: none;
}
.cx-level-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 38px;
  color: var(--text-2);
  font-size: 11px;
}
.cx-level-number {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.cx-level-nodes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cx-node {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
}
.cx-feature {
  border-left-color: var(--accent-quiet);
}
.cx-node summary,
.cx-choice,
.cx-choice-empty,
.cx-slot,
.cx-improvement,
.cx-subclass-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px;
}
.cx-node summary {
  list-style: none;
}
.cx-node summary::-webkit-details-marker {
  display: none;
}
.cx-node[open] {
  border-color: var(--accent-quiet);
}
.cx-choice {
  border-color: var(--accent-quiet);
}
.cx-choice:hover,
.cx-node summary:hover {
  background: var(--surface-3);
}
.cx-node-icon,
.cx-option-icon {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
}
.cx-node-glyph {
  width: 30px;
  flex: none;
  color: var(--accent);
  font-size: 18px;
  text-align: center;
}
.cx-node-copy {
  min-width: 0;
}
.cx-node-name,
.cx-node-type {
  display: block;
  overflow-wrap: anywhere;
}
.cx-node-name {
  font-size: 12px;
  line-height: 1.25;
}
.cx-node-type {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 10px;
}
.cx-node-body {
  padding: 7px 8px 9px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
}
.cx-level-empty,
.cx-unknown {
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
}
.cx-level-empty {
  padding: 8px 2px;
}
.cx-branch {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}
.cx-option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cx-option {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.cx-option summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px;
  color: var(--text);
  font-size: 12px;
  list-style: none;
}
.cx-option summary::-webkit-details-marker {
  display: none;
}
.cx-option-body {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}
.cx-option .cx-unknown {
  padding: 0;
}

/* ── 서브클래스 · 하위종족 절 (cx-subclass·cx-subrace) ───────────────────── */
.cx-subclass,
.cx-subrace {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1240px) {
  .cx-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cx-branch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-levels > .cx-level:nth-child(n)::before,
  .cx-branch > .cx-level:nth-child(n)::before { display: block; }
  .cx-levels > .cx-level:nth-child(4n + 1)::before,
  .cx-branch > .cx-level:nth-child(3n + 1)::before { display: none; }
}

@media (max-width: 900px) {
  .cx-levels,
  .cx-branch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-class-intro { grid-template-columns: minmax(0, 1fr); }
  .cx-levels > .cx-level:nth-child(n)::before,
  .cx-branch > .cx-level:nth-child(n)::before { display: block; }
  .cx-levels > .cx-level:nth-child(2n + 1)::before,
  .cx-branch > .cx-level:nth-child(2n + 1)::before { display: none; }
}

@media (max-width: 720px) {
  .cx-tree-head { align-items: start; flex-direction: column; }
  .cx-subclass-nav { justify-content: flex-start; }
  .cx-levels,
  .cx-branch,
  .cx-option-list { grid-template-columns: minmax(0, 1fr); }
  .cx-levels > .cx-level:nth-child(n)::before,
  .cx-branch > .cx-level:nth-child(n)::before {
    display: block;
    top: -11px;
    left: 20px;
    width: 0;
    height: 10px;
    border-top: 0;
    border-left: 1px solid var(--accent-quiet);
  }
  .cx-levels > .cx-level:first-child::before,
  .cx-branch > .cx-level:first-child::before { display: none; }
}

/* ── 「빌드에 끼우기」줄 (cx-equip) ────────────────────────────────────────
 * 낄 칸이 없을 때는 같은 자리에 `.hint`(skin.css 정본 — 색·크기 이미 있음)가
 * 대신 온다. 여기서는 여백과 버튼 링크의 밑줄만 잡는다.
 * ───────────────────────────────────────────────────────────────────────── */
.cx-equip {
  margin: 16px 0 0;
}
.cx-equip .btn {
  display: inline-block;
  text-decoration: none;
  /* 주 단추의 양끝 마름모(skin.css .btn.primary)가 4px 밖으로 나간다 — 뒤따르는
     도움말 글이 바로 붙어 있어 틈을 준다(실측: 오른쪽 마름모가 「낄」을 가렸다). */
  margin: 0 12px 0 7px;
}

/* ── 상태 쪽 — 이름별 카드 격자 (cx-section·cx-status) ───────────────────
 * 구획 제목(<h2>)의 활자는 위 `.cx-main > section > h2` 가 맡는다.
 * ───────────────────────────────────────────────────────────────────────── */
.cx-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.cx-main > .cx-section > h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.cx-status {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent-quiet);
  border-radius: 6px;
  scroll-margin-top: 16px;
}
.cx-status:hover,
.cx-status:target,
.cx-status:has(.cx-status-anchor:target) {
  background: var(--surface-3);
  border-color: var(--accent-quiet);
}
.cx-status-anchor {
  position: absolute;
  top: 0;
  left: 0;
  scroll-margin-top: 16px;
}
.cx-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.cx-status-glyph {
  flex: none;
  color: var(--accent);
  font-size: 10px;
}
.cx-status h3 {
  flex: 1 1 140px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}
.cx-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cx-status-badge {
  padding: 2px 7px;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
}
.cx-status p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}
.cx-status-variant + .cx-status-variant {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.cx-status-more {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.cx-status-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--m-touch);
  color: var(--accent);
  font-size: 12px;
  list-style: none;
  cursor: pointer;
}
.cx-status-more > summary::-webkit-details-marker {
  display: none;
}
.cx-status-more > summary::after {
  content: '+';
  font-family: var(--font-num);
  font-size: 16px;
}
.cx-status-more[open] > summary::after {
  content: '−';
}

@media (max-width: 720px) {
  .cx-section {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-status {
    padding: 12px 14px;
  }
}

/* ── 조립식 효과·기본 규칙 블록 ────────────────────────────────────────── */
.cx-codex-graph {
  margin: 24px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cx-codex-roots {
  display: grid;
  gap: 10px;
}
.cx-block-root {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  scroll-margin-top: 14px;
}
.cx-block-root.cx-block-highlight {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 2px var(--gold-dim);
}
.cx-block-root h2 {
  margin: 0 0 4px;
  font-size: 17px;
  color: var(--cream);
}
.cx-block-kind {
  margin: 0 0 4px;
  color: var(--gold-dim);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cx-block-answer {
  margin: 0 0 8px;
  line-height: 1.55;
}
.cx-question-list,
.cx-all-toggle {
  display: none;
}
.cx-js-ready .cx-question-list {
  display: grid;
}
.cx-js-ready .cx-all-toggle {
  display: inline-flex;
}
.cx-question-list {
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cx-question,
.cx-all-toggle {
  box-sizing: border-box;
  align-items: center;
  min-height: var(--m-touch);
  padding: 6px 12px;
  color: var(--cream);
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.cx-question {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}
.cx-all-toggle {
  margin-top: 12px;
}
.cx-question:hover,
.cx-question:focus-visible,
.cx-all-toggle:hover,
.cx-all-toggle:focus-visible {
  border-color: var(--gold-dim);
  outline: 0;
  box-shadow: 0 0 0 2px var(--gold-dim);
}
.cx-question-recommended,
.cx-question-read [data-cx-read-marker] {
  flex: none;
  color: var(--gold-dim);
  font-size: 10px;
}
.cx-question:not(.cx-question-read) [data-cx-read-marker] {
  display: none;
}
.cx-block-direct {
  display: inline-block;
  margin-left: 8px;
  color: var(--gold-dim);
  font-size: 12px;
}
.cx-block-direct:hover,
.cx-block-direct:focus-visible {
  color: var(--cream);
}
.cx-answer-bank {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--gold-dim);
}
.cx-block {
  margin: 0 0 18px;
  padding: 12px 14px 16px;
  background: var(--panel);
  border-left: 2px solid var(--line);
  scroll-margin-top: 14px;
}
.cx-block.cx-block-highlight {
  border-left: 2px solid var(--gold-dim);
  box-shadow: -4px 0 0 var(--gold-dim);
}
.cx-block:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.cx-block-header h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--cream);
}
.cx-block-original h4,
.cx-block-trigger-source h4 {
  margin: 0 0 3px;
  color: var(--gold-dim);
  font-size: 12px;
}
.cx-provenance {
  display: block;
  margin-top: 3px;
  color: var(--faint-readable);
  font-size: 11px;
}
.cx-block-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 12px 0 0;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.cx-block-facts dt {
  color: var(--muted);
}
.cx-block-facts dd {
  margin: 0;
  color: var(--cream);
}
.cx-block-original {
  margin-top: 12px;
}
.cx-block-original blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  line-height: 1.55;
}
.cx-block-trigger-source {
  margin-top: 12px;
}
.cx-block-trigger-source p {
  margin: 0 0 4px;
  color: var(--cream);
  font-size: 12px;
}
.cx-block-trigger-source blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  line-height: 1.55;
}
.cx-block-application {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 10px;
  margin: 6px 0 0;
  font-size: 11px;
}
.cx-block-application dt {
  color: var(--muted);
}
.cx-block-application dd {
  margin: 0;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.cx-block-source-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.cx-block-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cx-tag {
  padding: 3px 8px;
  color: var(--cream);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
}
.cx-codex-unconfirmed {
  margin: 20px 0;
  padding: 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* 접는 「기술 정보」(blocks.mjs, 2026-09-05) — 여닫는 줄만 보이고 원문 키는 펼쳐야 나온다. */
details.cx-codex-unconfirmed summary {
  cursor: pointer; color: var(--text-2);
  display: flex; align-items: center; min-height: var(--m-touch);   /* 누르는 자리 — 손가락 크기 */
}
details.cx-codex-unconfirmed p { margin: 8px 0 0; }
/* flex 로 만들면 브라우저 기본 ▸ 표시가 사라진다 — 여닫는 자리임을 글자로 되돌려 준다. */
details.cx-codex-unconfirmed summary::before { content: '▸'; margin-right: 8px; color: var(--gold-dim); }
details.cx-codex-unconfirmed[open] summary::before { content: '▾'; }

/* ── 빵부스러기 · 형제 (2026-09-05, docs/reports/2026-09-05 §6 E) ─────────────────
   상세가 「빈 방에 카드 하나」였다. 위엔 지금 자리(홈 › 아이템 도감 › 전설 · 무기 › 이름),
   아래엔 같은 묶음의 이전·다음. 색은 전부 skin.css 토큰. */
.cx-crumbs { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.cx-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.cx-crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--faint-readable); }
.cx-crumbs a { color: var(--gold-dim); text-decoration: none; }
.cx-crumbs a:hover, .cx-crumbs a:focus-visible { color: var(--gold); text-decoration: underline; }
.cx-crumbs [aria-current] { color: var(--text-2); }
.cx-siblings {
  margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px;
}
.cx-siblings a {
  display: inline-flex; align-items: center; min-height: var(--m-touch); padding: 0 6px;
  text-decoration: none; color: var(--gold);
}
.cx-siblings a:hover, .cx-siblings a:focus-visible { text-decoration: underline; }
.cx-sib-prev { margin-right: auto; }
.cx-sib-next { margin-left: auto; }
.cx-sib-group { color: var(--text-2); }

/* ── 소개 문단 · 같은 묶음 링크 (2026-09-06, 애드센스 재심사) ──────────────────
   상세 쪽에 문장이 거의 없던 것을 채운 자리(tools/codex/pages.mjs 의 「소개 문단」).
   소개는 빵부스러기와 툴팁 사이의 한 문단, 관련은 형제 줄 바로 위의 링크 칩 무리다. */
.cx-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.cx-related { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.codex .cx-related h2 { margin: 0 0 12px; font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.cx-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.cx-related li { min-width: 0; border-bottom: 1px solid var(--line); }
.codex .cx-related a { display: flex; align-items: center; gap: 12px; min-height: var(--m-touch); padding: 12px 4px;
  font-size: var(--fs-lg); line-height: 1.5; color: var(--text); text-decoration: none; }
.cx-related a:hover { background: var(--surface-3); }
.cx-related a:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.cx-related-icon { width: 36px; height: 36px; flex: none; object-fit: contain; }
.cx-related-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.cx-related-text small { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); }
.cx-siblings a { gap: 6px; min-width: 0; }
.cx-siblings .cx-related-icon { width: 24px; height: 24px; }
.cx-siblings a span { overflow-wrap: anywhere; }
.cx-index-anchor { scroll-margin-top: 24px; }
@media (max-width: 620px) {
  .cx-related ul { grid-template-columns: minmax(0, 1fr); }
  .cx-siblings { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cx-sib-prev, .cx-sib-next { margin: 0; }
}

/* ── 색인의 그림·등급색 (2026-09-05, §6 F) ─────────────────────────────────────
   bg3.wiki 메인의 아이콘 격자·light.gg 의 색인처럼 이름 앞에 그림, 등급은 이름 색으로.
   색은 skin.css 의 `--rar-dark-*`(어두운 판 위의 글자용 등급색) 그대로. */
.cx-index-ico { width: 24px; height: 24px; flex: none; margin-right: 8px; object-fit: contain; }
.cx-index > li > a > span { min-width: 0; }
.cx-index a.rar-story { color: var(--rar-dark-story); }
.cx-index a.rar-legendary { color: var(--rar-dark-legendary); }
.cx-index a.rar-veryrare { color: var(--rar-dark-veryrare); }
.cx-index a.rar-rare { color: var(--rar-dark-rare); }
.cx-index a.rar-uncommon { color: var(--rar-dark-uncommon); }
.cx-index a.rar-common { color: var(--rar-dark-common); }
.cx-index-hint { margin: -10px 0 14px; font-size: 12px; }
/* 효과·규칙 색인 — 항목이 12·4개뿐이라 이름 옆에 **한 줄 설명**을 같이 낸다
   (2026-09-08). 이름만 걸면 껍데기를 뺀 본문이 100자대라, 고치려던 얇음을 새
   주소로 옮기는 꼴이 된다. 위 그리드(120px 칸)로는 문장이 안 들어가므로 이
   목록만 한 칸씩 세로로 쌓는다 — 나머지 색인 넷은 그대로 그리드다. */
/* ⚠ `minmax(0, 1fr)` 이다 — 맨 `1fr` 이면 긴 설명이 칸을 벌려 폰에서 가로로
   넘친다(`tests/page-stylesheets.test.js` 가 이 자리를 잰다). */
.cx-index-desc { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
.cx-index-desc > li > a { min-height: 0; padding: 2px 8px; font-weight: 600; }
.cx-index-desc .cx-index-note {
  display: block;
  padding: 2px 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint-readable);
}


@media (max-width: 620px) {
  .cx-codex-roots {
    display: flex;
    flex-direction: column;
  }
  .cx-answer-bank {
    padding-left: 0;
    border-left: 0;
    border-top: 2px solid var(--gold-dim);
  }
  .cx-question {
    align-items: flex-start;
    flex-direction: column;
  }
}