/* ─────────────────────────────────────────────────────────────────────────
   데이터 검증 화면(index.html)**만**의 규칙.

   ⚠ 껍데기는 여기 없다 — 색·글꼴·판 테두리·구분선·아이콘 틀·`.chip` 은 전부
   `web/skin.css` 가 쥔다(2026-08-07부터 이 화면도 그것을 싣는다). 여기 있는 것은
   이 화면에만 있는 배치뿐이다: 필터 줄 · 결과 목록 · 상세 칸 · 검색 탭.

   **토큰을 다시 적지 않는다.** `--gold`·`--cream`·`--line`·`--faint` … 는 skin.css 의
   `:root` 에 있다. 여기서 색을 새로 정하면 그것이 둘째 생산자이고, 한쪽만
   고쳐지는 어긋남이 이 저장소의 지배적 결함이다(CLAUDE.md).

   ⚠ **선택자를 지우지 않는다.** 2026-08-07 에 이 파일을 인게임 껍데기로 옮기면서
   한 번 통째로 갈아치웠다가 ⑤b 의 3열 배치와 태그 고르개가 통째로 날아갈 뻔했다.
   **옮겨 적는 것이지 갈아치우는 것이 아니다.**
   ───────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* 머리글의 개수 줄. `.bg3-header` 안에서 제목과 링크 사이에 앉는다. */
.hdrstats { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
/* ⚠ **머리글 nav 는 가로다.** 아래 필터 규칙이 `nav` 를 통째로 겨눠서 머리글까지
   세로로 세웠다(리뷰 I-4). 아래 선택자를 필터 둘로 좁혔지만, 방향은 여기서
   못박아 둔다 — 그래야 다음에 누가 다시 넓혀도 머리글이 안 무너진다. */
.bg3-header nav { flex-direction: row; flex-wrap: wrap; row-gap: 4px; }

/* 화면 전체를 감싸는 판. skin.css 의 `.pane` 이 9-slice 테두리를 준다. */
.vpane { margin: 16px 22px; padding: 12px 18px 14px; }
.vgrid { display: grid; gap: 12px; }

/* ── 필터 ── */
#itemfilter,
#spellfilter { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0; }
/* `hidden` 은 skin.css 의 `[hidden] { display: none !important }` 하나가 막는다.
   여기 있던 자리별 규칙은 그리로 갔다 — 자리마다 막다가 네 번 샜기 때문이다. */


/* 시안의 금색 소문자 라벨. skin.css 의 `h3.sub` 와 같은 자간이다. */
.flabel {
  flex: none; font-size: 11px; color: var(--gold-dim);
  letter-spacing: .22em; white-space: nowrap;
}

/* ── 필터 칩 (시안) ───────────────────────────────────────────────────────
   드롭다운 셋을 칩으로 바꿨다. 값은 시안(`아이템 필터.dc.html` 의 `chipCss`)에서
   그대로 왔다. 마크업은 web/app.js 가 정본에서 그린다 — 손으로 안 적는다. */
.frow { display: flex; gap: 10px; align-items: baseline; }
.frow + .frow { margin-top: 2px; }
.fchips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; white-space: nowrap;
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 4px 12px; letter-spacing: .04em;
  background: #1a150f; border: 1px solid var(--line); color: var(--muted);
  transition: border-color .15s, color .15s;
}
.fchip:hover { color: var(--cream); border-color: var(--gold-dim); }
.fchip.on {
  background: #2a2116; border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 10px #c8a24c33;
}
/* 등급 점. 색은 web/lib/rarity.js 가 인라인 `--c` 로 넣는다 — 여기 다시 안 적는다. */
.fdot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px var(--c);
}

/* ⚠ **글자 칸만 겨눈다.** `#itemfilter input` 으로 적었더니 태그 목록의 **체크박스까지**
   먹어서 11px 네모가 20×12px 로 찌그러졌다(실측). 체크박스는 아래 `.taggroup input`
   이 따로 그린다. */
#itemfilter input[type="search"],
#spellfilter input[type="search"],
.tagtools input[type="search"] {
  font: inherit; font-size: 13px; color: var(--cream);
  background: #120e09; border: 1px solid var(--line); padding: 5px 9px; outline: none;
}
#itemfilter input[type="search"]:focus,
#spellfilter input[type="search"]:focus,
.tagtools input[type="search"]:focus { border-color: var(--gold-dim); }
/* ⚠ 선택자가 `nav .row #q` 였는데 마크업이 `.frow` 로 바뀌면서 **안 맞게 됐다** —
   검색창이 `flex:1` 을 잃고 기본 폭으로 줄어 있었다(리뷰 M-1). `.frow` 로 옮긴다. */
.frow #q,
.frow #sq { flex: 1; min-width: 12rem; }

#count,
#scount { color: var(--muted); font-size: 12px; white-space: nowrap; margin-left: auto; }

/* ── 목록 + 상세 ── */
main { display: grid; grid-template-columns: minmax(300px, 1fr) 1.5fr; gap: 18px; }

#list { list-style: none; margin: 0; padding: 0 6px 0 0; max-height: 70vh; overflow: auto; }
/* align-items 는 flex-start 다 — center 면 이름이 2줄인 줄만 아이콘이 아래로
   내려간다(2026-08-02 실측: 1179개 중 191개가 2줄). */
#list li {
  display: flex; gap: 10px; align-items: flex-start; padding: 5px 7px; cursor: pointer;
}
#list li:hover { background: #ffffff0a; }
#list li.selected { background: #2a211680; box-shadow: inset 2px 0 0 var(--gold); }
#list li.missing { box-shadow: inset 2px 0 0 var(--warn); }
#list .name { color: var(--rarity, var(--cream)); }

/* 시안의 38px 아이콘 틀. **그림이 없어도 칸은 남는다** — skin.css 의 규칙
   (「색과 테두리를 먼저 주고 그림은 그 위에 얹는다」)을 그대로 따른다. */
#list .thumb {
  flex: none; width: 38px; height: 38px; object-fit: contain;
  border: 1px solid var(--line);
  background: #100c08 url('skin/features_slot_d.png') center/100% 100% no-repeat;
}

/* 빈 결과 안내. **누를 수 있는 항목처럼 보이면 안 된다** — #list li 의 cursor·hover 를
   물려받아 눌러도 아무 일 없는 줄이 됐다(리뷰 Minor). */
#list li.none { cursor: default; color: var(--faint); display: block; padding: 12px 8px; }
#list li.none:hover { background: none; }

.en { color: var(--faint); font-size: 11px; display: block; }
.rarity { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.hint { color: var(--faint); }

/* ── 상세 ── */
#detail { max-height: 70vh; overflow: auto; padding-right: 4px; }
#detail h2 {
  margin: 0 0 2px; font-size: 19px; font-weight: normal;
  color: var(--gold); letter-spacing: .06em;
}
#detail h3 {
  margin: 18px 0 8px; font-size: 11px; font-weight: normal;
  color: var(--gold-dim); letter-spacing: .22em;
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
#detail ul { margin: 0; padding-left: 18px; }
.meta { color: var(--muted); font-size: 12px; }
.damage { font-variant-numeric: tabular-nums; }
blockquote {
  margin: 4px 0 0; padding-left: 10px;
  border-left: 2px solid var(--line); color: var(--muted); font-size: 12px;
}
.missing { color: var(--warn); }
.flavor { font-style: italic; color: var(--faint); }
.source { margin-top: 22px; font-size: 11px; color: var(--faint); }

/* #list 의 높이 제한은 web/mobile.css 가 쥔다 — 여기 두면 같은 폭에 반대되는
   규칙이 둘이 되어 다음 사람이 한쪽을 「정리」한다(리뷰 M-3). */
@media (max-width: 720px) {
  main { grid-template-columns: 1fr; }
  .vpane { margin: 8px; padding: 8px 10px 10px; }
}

/* ── 태그 필터 (web/lib/item-filter.js 가 마크업을 만든다) ─────────────────
   ⚠ `.chip` 은 여기 없다 — **skin.css 에 있다.** 이 부품은 빌더 고르기 창에도
   붙는데 그 화면은 style.css 를 안 실었다(⑤a 리뷰 C-1). 지금은 셋이 같은
   껍데기를 싣지만, 그래도 두 곳에 붙는 부품의 규칙은 skin.css 에 둔다 —
   tests/mobile.test.js 의 「두 곳에 붙는 부품의 CSS」가 그것을 강제한다. */
#tagbar { font-size: 12px; }
.tagchosen { display: flex; gap: 6px; flex-wrap: wrap; }
.tagchosen:not(:empty) {
  margin-bottom: 6px; padding: 7px 9px;
  background: #16110c; border: 1px solid #2d2417;
}

.tagpicker summary {
  cursor: pointer; color: var(--gold-dim); font-size: 11px; letter-spacing: .22em;
  border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 8px;
}
.tagpicker summary:hover { color: var(--gold); }
.tagtools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.tagtools .tagq { width: min(18rem, 100%); }
.raretoggle { color: var(--faint); display: flex; align-items: center; gap: 4px; font-size: 11px; }
.raretoggle input { accent-color: var(--gold-dim); }

.taglist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 4px 16px; max-height: 22rem; overflow-y: auto; padding-right: 4px; align-content: start;
}
.taggroup h4 {
  margin: 0 0 4px; font-size: 10px; font-weight: normal;
  letter-spacing: .18em; color: var(--gold-dim);
  border-bottom: 1px solid #241c11; padding-bottom: 3px;
}
.taggroup label {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px; cursor: pointer; font-size: 12px; color: var(--cream);
}
.taggroup label:hover { background: #ffffff08; }
/* 시안의 11px 네모 체크. **네이티브 체크박스를 그대로 두면 OS 마다 딴 모양이 된다** —
   `appearance: none` 으로 우리 네모를 그린다. `:has()` 없이도 되는 방식이라
   지원 안 되는 브라우저에서도 칸은 제대로 뜬다. */
.taggroup input {
  appearance: none; -webkit-appearance: none;
  width: 11px; height: 11px; margin: 0; flex: none;
  /* ⚠ **`padding: 0` 이 없으면 11px 네모가 안 나온다.** `skin.css` 의
     `input, select, textarea { padding: 5px 8px }` 가 여기까지 닿는데,
     `box-sizing: border-box` 라 **패딩+테두리가 최소 크기가 되어** 18×12px 로
     부풀었다(실측). 작은 것을 그릴 때는 물려받은 패딩을 먼저 지운다. */
  padding: 0;
  border: 1px solid #4a3e2a; background: transparent; cursor: pointer;
}
.taggroup input:checked {
  background: var(--gold); border-color: var(--gold); box-shadow: 0 0 7px #c8a24c88;
}
/* 고른 줄은 배경과 글자색으로도 말한다 — 네모 하나로는 훑을 때 안 보인다. */
.taggroup label:has(input:checked) { background: #241c11; color: var(--gold); }
/* 개수는 오른쪽 끝. 게임 글꼴은 숫자가 좁아 자릿수가 흔들린다 — 등폭으로 세운다. */
.taggroup .n {
  color: var(--faint); font-size: 10px; margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* 태그 필터의 바텀 시트 규칙은 **web/mobile.css 에 있다** — 이 부품은 빌더 고르기
   창에도 붙는데 그 화면은 style.css 를 안 싣는다(리뷰 C-1). */

/* ── 검색 탭 넷 (⑤b) ──────────────────────────────────────────────────────
   마크업은 web/app.js 가 web/lib/search-tabs.js 의 정본에서 그린다. */
.stabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.stab {
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px;
  padding: 7px 18px; cursor: pointer; margin-bottom: -1px; letter-spacing: .06em;
}
.stab:hover { color: var(--cream); }
.stab[aria-selected="true"] {
  color: var(--gold); border-color: var(--line);
  background: #16110c; border-bottom: 1px solid #16110c;
}

/* 무엇을 세고 무엇을 못 싣는지. **수는 /api/spells/population 에서 온다.** */
.scope {
  margin: 12px 0 0; padding: 10px 12px;
  border-left: 2px solid var(--gold-dim); background: #16110c;
  color: var(--faint); font-size: 11px; line-height: 1.7;
}
.scope b { color: var(--muted); font-weight: normal; }
.footnote { margin: 0 22px 20px; font-size: 11px; text-align: center; }

/* ── 시안 배치 (1240px 이상) ──────────────────────────────────────────────
   시안(`아이템 필터.dc.html`)은 **필터를 왼쪽 넓은 칸에** 두고 태그를 4열로 펼친다.
   그 칸이 넓어야 태그가 접히지 않는다 — 그것이 시안의 요지다.

   ⚠ **시안에는 상세 칸이 없다.** 시안은 필터를 굴리는 화면이고 우리 화면은 상세도
   쥔다(인게임 툴팁). 그래서 **셋으로 나눈다** — 필터 · 목록 · 상세.
   시안을 그대로 안 옮긴 자리라 여기 적어 둔다.
   ⚠ **새 중단점을 만들지 않는다** — 1240 은 이미 쓰는 값이다(skin.css 의 「한눈에」 열).
   처음에 1241 로 적었다가 tests/mobile.test.js 에 걸렸다. 그물이 제 일을 했다. */
@media (min-width: 1240px) {
  .vgrid {
    grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1.4fr);
    grid-template-areas: 'filter list detail';
    gap: 18px;
  }
  .vfilters { grid-area: filter; border-right: 1px solid var(--line); padding-right: 18px; align-self: start; }
  /* ⚠ **태그 목록은 판 전체 폭으로 내린다.** 시안은 필터 칸이 화면의 3분의 2라
     태그가 4열로 펴지는데, 우리 화면은 상세 칸까지 쥐어서 그 칸이 340px 밖에
     안 된다 — 거기 두면 **1열**이 되어 416개를 세로로 훑게 된다(실측).
     세 칸 아래로 내려 폭을 주면 시안과 같은 밀도가 나온다.
     ⚠ 필터 칸에는 칩(슬롯·등급·막)과 검색창이 남는다 — 그건 좁아도 읽힌다. */
  .vgrid { grid-template-areas: 'filter list detail' 'tags tags tags'; }
  #tagbar { grid-area: tags; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
  /* ⚠ **세 열의 높이를 각자 두지 않으면 제일 긴 것이 나머지를 끌고 간다.**
     실측: 목록 1,179개가 늘어나 상세 칸까지 44,224px 이 됐다. 목록만 제 상자 안에서
     스크롤하게 하고 나머지는 내용만큼만 차지하게 한다(align-self: start). */
  #list { grid-area: list; max-height: calc(100vh - 210px); overflow-y: auto; align-self: start; }
  #detail { grid-area: detail; max-height: calc(100vh - 210px); align-self: start; }
  main { display: contents; }
  /* 태그를 접지 않고 펼친다 — 시안의 요지다. */
  .tagpicker[open] .taglist,
  .tagpicker .taglist { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); max-height: 26rem; }
}