/* ─────────────────────────────────────────────────────────────────────────
   아이템 목록 화면(items.html)**만**의 규칙.

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

   **토큰을 다시 적지 않는다.** `--gold`·`--cream`·`--line`·읽기용/장식용 희미한 토큰 … 은 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 }` 하나가 막는다.
   여기 있던 자리별 규칙은 그리로 갔다 — 자리마다 막다가 네 번 샜기 때문이다. */


/* 시안의 금색 소문자 라벨. 자간이 이 화면만의 값이라 여기 남는다(.22em).
   ⚠ **크기는 여기서 안 정한다** — `.flabel` 은 계산 탭(build.html)도 쓰는데 그
   화면은 이 파일을 안 싣는다. 크기는 둘 다 싣는 skin.css 가 쥔다(그쪽 주석 참고).
   여기 있던 `font-size: 11px` 은 어차피 지던 죽은 선언이라 걷었다. */
.flabel {
  flex: none; 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;
}
/* ── 신선도 배지 (2026-08-24) ────────────────────────────────────────────
   보고서 §5-4 「목록 단계부터 신선도 신호」. 어느 게임 데이터판을 보고 있는지
   목록 화면에서 바로 알려 준다.
   ⚠ **조용해야 한다** — 신뢰 신호지 강조가 아니다. 눈에 띄면 거르개를 가린다.
   ⚠ **`display` 를 주지 않는다.** 값이 없으면 마크업이 `hidden` 인 채로 남는데
      (app.js 의 `신선도배지()`), 여기서 `display` 를 주면 그 `hidden` 을 이겨
      **빈 줄이 뜬다.** 이 저장소가 `hidden` 으로 네 번 데인 자리다. */
.freshbadge {
  margin: 6px 0 0; font-size: 11px; letter-spacing: .04em;
  color: var(--faint-readable); font-variant-numeric: tabular-nums;
}

/* ── 칩 옆의 결과 개수 (2026-08-24) ──────────────────────────────────────
   디자인 조사 보고서 §5-6 「필터 칩 + **실시간 결과 개수** + 활성 필터 칩 상시
   표시 — 0건 데드엔드 방지」. 태그 거르개는 이미 개수를 달고 있었는데 슬롯·등급·
   막 칩에는 없어서, 눌러 보기 전에는 몇 개가 남는지 알 수 없었다.

   ⚠ **라벨보다 조용해야 한다** — 수가 이름만큼 세면 무엇을 고르는 화면인지가 흐려진다.
   ⚠ 자릿수를 고정한다. 칩이 가로로 늘어서서 수가 바뀔 때마다 폭이 흔들리면
      옆 칩들이 밀린다(1,183 ↔ 406 처럼 자릿수가 자주 바뀐다). */
.fchip .n {
  font-size: 11px; color: var(--faint-readable);
  font-variant-numeric: tabular-nums;
}
.fchip.on .n { color: var(--gold-dim); }
/* 눌러도 빈 목록인 칩. **감추지 않는다** — 없어지면 「그 축이 아예 없다」로 읽히고,
   조건을 하나 풀면 다시 생기는 것을 사람이 못 짐작한다. 흐리게 두고 알려만 준다.
   ⚠ `disabled` 를 안 준다: 지금 걸린 조건 때문에 0 인 것이지 그 값이 없는 게
   아니라서, 눌러서 그쪽으로 갈아타는 길을 막으면 안 된다. */
.fchip.empty { opacity: .45; }
.fchip.empty:hover { opacity: 1; }

/* 등급 점. 색은 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 {
  padding: 0; cursor: default;
}
#list .item-row,
#list .spell-row {
  display: flex; width: 100%; gap: 10px; align-items: flex-start;
  padding: 5px 7px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}
#list .item-row:hover,
#list .spell-row:hover { background: #ffffff0a; }
#list .item-row:focus-visible,
#list .spell-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
#list li.selected { background: #2a211680; box-shadow: inset 2px 0 0 var(--gold); }
#list li.missing { box-shadow: inset 2px 0 0 var(--warn); }
/* 못 얻는 아이템. `.missing`(입수처 미확인)과 **다른 축**이라 색도 다르다 —
   실측(2026-08-17, 워크트리 DB 기준. 잣대: `.missing` 은
   `acquisition_confidence === 'missing'`, 즉 non-namu 입수 행이 아예 없는 것):
   못 얻는 88개 중 **68개**는 화면에 이미 다른 경고 줄이 떠 있었지만,
   **20개는 이 표시가 없으면 평범한 아이템으로 보였다.**
   (결함④ 고침: 이전 주석의 69/19 는 `confidence !== 'confirmed'` 로 잰 다른
   모집단 수치였다.) */
#list li.unobtainable { opacity: .62; }
/* `.tt-unobtainable` 은 여기 없다 — web/tooltip.css 에 있다(결함① 고침,
   2026-08-17). 빌더(web/build.html)는 style.css 를 안 싣는데 같은 툴팁을
   그리므로, 툴팁 규칙은 두 화면이 같이 싣는 파일에 둬야 한다. `#list` 는
   items.html 에만 있어 이 규칙은 그대로 여기 남는다. */
#list li.unobtainable .unobtainable-tag { color: var(--warn); font-size: .85em; }
#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-readable); display: block; padding: 12px 8px; }
#list li.none:hover { background: none; }

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

/* ── 상세 ── */
#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-readable); }
.source { margin-top: 22px; font-size: 11px; color: var(--faint-readable); }

/* #list 의 높이 제한은 web/mobile.css 가 쥔다 — 여기 두면 같은 폭에 반대되는
   규칙이 둘이 되어 다음 사람이 한쪽을 「정리」한다(리뷰 M-3). */
@media (max-width: 720px) {
  main { grid-template-columns: 1fr; }
  .vpane { margin: 8px; padding: 8px 10px 10px; }
  /* 검색 탭 다섯의 한 줄 폭이 390px 화면의 안쪽 폭보다 크다.
     탭이 수축하면 `아이템`도 `아이·템`처럼 갈라지므로, 글자는 고정하고
     320px 화면까지 들어오도록 간격·안여백만 좁힌다. */
  /* 영어 탭도 잘라 숨기지 않고 다음 줄에서 모두 고를 수 있게 한다. */
  #stabs { gap: 1px; flex-wrap: wrap; }
  .stabs .stab {
    white-space: nowrap; flex-shrink: 0; min-width: var(--m-touch);
    padding-inline: clamp(4px, calc(10vw - 28px), 14px);
  }
}

/* ── 태그 필터 (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-readable); 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-readable); 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-readable); font-size: 11px; line-height: 1.7;
}
.scope b { color: var(--muted); font-weight: normal; }
/* 꼬리말의 생김새는 skin.css 가 정한다(정본 web/lib/site-nav.js 꼬리말HTML). 아이템
   화면은 꼬리말이 <main> 밖에 있어 .vpane 과 같은 22px 안쪽 여백만 여기서 준다. */
.footnote { margin: 0 22px 20px; }

/* ── 넓은 화면도 좁은 화면 흐름을 쓴다 (2026-08-25) ───────────────────────
   여기 있던 시안 배치(1240px 이상)는 필터를 왼쪽 세로 칸으로 옮기고 목록·상세를
   그 오른쪽에 나란히 두는 3열이었다(시안 `아이템 필터.dc.html` 을 따른 것).

   운영 화면 두 장(넓은 화면·좁은 화면)을 보고 받은 지시: **좁은 화면 쪽(필터가
   상단 가로 전폭, 그 아래 목록+상세 2열)을 넓은 화면 기준으로도 쓴다.** 필터
   왼쪽 열이 필요했던 까닭(태그 4열)은 진작 사라졌었다 — 태그는 이미 세 칸
   아래 전폭 줄로 내려가 있었다(바로 아래 「① 제일 넓은 칸이 비어 있었다」의
   실측이 그 세로 칸이 얼마나 비어 있었는지를 보여 준다). 남는 것은 칩과
   검색창뿐이라 세로 칸을 없애도 잃는 것이 없다.

   그래서 **필터를 모든 폭에서 상단 가로 전폭으로 고정**한다 — 미디어 쿼리 밖의
   기본 규칙(위 `.vgrid`·`main`·`#list`·`#detail`)이 이미 720px 이상에서 그렇게
   그리고 있었으므로, 그 규칙을 넓은 화면까지 그대로 편다. 그래서 이 자리에
   있던 두 `@media (min-width: 1240px)` 블록(`.vgrid` 3열 배치와 그 폭 조정)을
   통째로 걷어냈다 — `.vfilters`·`#tagbar`·`#list`·`#detail`·`main` 은 이제
   어느 폭에서도 미디어 쿼리 밖 기본 규칙만 따른다.

   ⚠ **720px 미만(진짜 모바일)은 그대로다** — 그 아래 `@media (max-width: 720px)`
   가 목록·상세를 1열로 접는 것은 이 변경과 무관한 자리라 안 건드린다.
   ⚠ **새 중단점을 만들지 않는다** — 걷어낸 것이지 늘린 것이 아니다. 1240 은
   skin.css 의 「한눈에」 열이 여전히 쓴다(그쪽 966행 주석). */

/* ══════════════════════════════════════════════════════════════════════════
   개편 2차 — 아이템 탭 (2026-08-23)

   ⚠ **임시로 파일 끝에 얹는다.** 방향이 정해지면 제자리로 접는다.
   ⚠ **`web/app.js` 를 안 건드린다** — 다른 세션이 그 파일의 **문구**를 훑는 중이라
   마크업을 같이 만지면 정면 충돌이다. 아래는 전부 지금 있는 마크업만 쓰는 CSS 다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 제일 넓은 칸이 비어 있었다 (2026-08-23, 2026-08-25 걷어냄) ──────────
   실측(1,761px 창, 2026-08-23): 필터 569px(내용 227px, 아래는 텅 빔) · 목록
   360px(148행이 두 줄로 접힘) · 상세 796px. 여기서 필터 칸의 폭만 좁혀 봤지만,
   위 「넓은 화면도 좁은 화면 흐름을 쓴다」에서 그 세로 칸 자체를 없앴다 —
   **비어 있던 진짜 원인은 폭이 아니라 칸이 있다는 것**이었다. */

/* ── ② 행이 다섯을 한 줄에 욱여넣고 있었다 ────────────────────────────────
   `아이콘 · 한글이름 · 영문이름 · 경고 · 등급` 이 전부 **가로 형제**라, 이름이 길면
   서로를 밀어 148행이 접혔다. 접힌 행만 높이가 달라 목록이 들쭉날쭉했다.

   격자로 바꾸면 **영문 이름이 한글 밑으로 내려가고** 모든 행이 같은 꼴이 된다.
   ⚠ **마크업을 안 고치고 한다** — 「못 얻습니다」 경고는 있을 때도 없을 때도 있어서
   이름 붙인 영역(`grid-template-areas`)은 못 쓴다. 열만 정하고 **자동 배치**에
   맡기면 경고가 있으면 셋째 줄로, 없으면 없는 대로 앉는다. */
#list .item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  padding: 8px 10px;
}
#list .item-row > .thumb  { grid-column: 1; grid-row: 1 / -1; }
#list .item-row > .rarity { grid-column: 3; grid-row: 1 / -1; margin-left: 0; }
#list .item-row > .name,
#list .item-row > .en,
#list .item-row > .kind,
#list .item-row > .matched,
#list .item-row > .unobtainable-tag { grid-column: 2; min-width: 0; }
/* 장비 종류(「장검 · 군용 무기」). 영문명과 같은 위계의 보조줄이라 크기를 맞추고,
   색만 갈라 둔다 — 영문은 이름의 다른 표기이고 이쪽은 다른 사실이다. */
#list .item-row > .kind { font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); }
/* 고른 성향·세부 속성에 **왜** 걸렸나(web/app.js 의 `걸린효과` — 「피해 저항 · 화염, 냉기」).
   고른 것이 없으면 줄 자체가 없다. 후보를 견줄 때 읽는 줄이라 종류 줄(흐린 색)과 갈라
   본문색으로 둔다. 단서(「조건부」·「취약」)는 **글자로** 붙고 색은 거들 뿐이다. */
#list .item-row > .matched { font-size: var(--fs-sm); line-height: 1.35; color: var(--cream); }
#list .item-row > .matched .matched-note { color: var(--muted); }
#list .item-row > .matched .matched-note.is-vulnerable { color: var(--warn); }
/* 한글 이름이 줄을 이끈다 — 영문은 한 칸 아래 위계다. */
#list .item-row > .name { font-size: var(--fs-base); line-height: 1.35; }
#list .item-row > .en { font-size: var(--fs-sm); line-height: 1.3; }

/* ── ③ 상세 칸의 제목 ─────────────────────────────────────────────────────
   크기·자간은 skin.css 의 절 제목 규칙이 이미 잡는다(2026-08-23). 여기서는
   그 규칙이 지운 **밑줄 구분선**만 되살린다 — 상세는 절이 촘촘해서 선이 있어야
   덩어리가 갈린다. */
#detail h3 { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* 주문 상세는 목록과 같은 작은 툴팁이 아니라 읽는 본문이다. 기존에는
   게임 툴팁 기본값(아이콘 34px·본문 12px)이 그대로 적용되어 넓은 화면에서도
   카드가 지나치게 작게 보였다. 상세 카드에만 여유를 주고, 목록용 툴팁은 건드리지 않는다. */
#detail > .st { padding: 14px 16px; }
#detail > .st .st-head { gap: 12px; }
#detail > .st .st-icon { width: 52px; height: 52px; }
#detail > .st .st-name { font-size: 18px; line-height: 1.35; }
#detail > .st .st-kind { font-size: 13px; margin-top: 3px; }
#detail > .st .st-body { margin-top: 10px; font-size: 14px; line-height: 1.65; }
#detail > .st .st-stats,
#detail > .st .st-foot { gap: 12px; margin-top: 10px; padding-top: 8px; font-size: 13px; }
#detail > .st .st-classes { margin-top: 10px; padding-top: 8px; font-size: 13px; }
#detail > .st .st-class-icon { width: 18px; height: 18px; }

@media (max-width: 720px) {
  #detail > .st { padding: 11px 12px; }
  #detail > .st .st-icon { width: 44px; height: 44px; }
  #detail > .st .st-name { font-size: 16px; }
  #detail > .st .st-body { font-size: 13px; line-height: 1.55; }
}

/* ── ④ 필터 라벨 ──────────────────────────────────────────────────────────
   ⚠ **이 규칙은 skin.css 로 옮겼다** (2026-08-24). 여기 두면 `items.html` 에만
   닿고 `build.html`(style.css 를 안 싣는다)의 「명중」·「피해」는 15px 로 남는다 —
   실제로 그렇게 새 있었다. 값을 두 곳에 적지 않으려고 여기서는 **뗀다.**
   까닭과 값은 skin.css 의 `.flabel` 주석에 있다. */