/* 도감 화면 전용 스타일(app.css 토큰만 사용). MS-DOS 감성: 직각, 점선 구분, 등록 표식, 반전 선택 막대. 상자 남발 금지.
   결정 BS② 2단계(2026-09-29): 글자·간격·줄 간격 = 역할 토큰, 등록 표식·'목록으로'는 선 아이콘(BS4), 규칙·범주 설명은 ⓘ 팝오버(BS5). */
.tw-cx-back { display: inline-flex; align-items: center; gap: var(--sp-1); justify-self: start; }
.tw-cx-overall__row > .tw-tip { margin-block: calc(-1 * var(--sp-3)); }
.tw-cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tw-cx-overall { gap: var(--sp-2); }
.tw-cx-overall__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-body); }
.tw-cx-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sub); }
/* 결정 CN(갈래 C): 수집률 막대 = 가는 둥근 막대(옛 ■··· 글자 막대 없음). 트랙·채움만 색 */
.tw-cx-bar { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 60px; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--track); }
.tw-cx-bar::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
.tw-cx-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.tw-cx-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.tw-cx-marks { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 범주(UI 개편 묶음 4, 결정 AP1): 한 줄 가로 스크롤(모바일), 선택은 밑줄(--sel 3px) + 굵게 — 공통 탭 2단 규격 */
.tw-cx-cats { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tw-cx-cats::-webkit-scrollbar { display: none; }
.tw-cx-cats button { font: inherit; flex: 1 0 auto; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--sp-2) var(--sp-3); min-height: 48px; cursor: pointer; display: grid; gap: 0; text-align: center; justify-items: center; }
.tw-cx-cats button:hover { color: var(--fg-2); }
.tw-cx-cats button[aria-selected="true"] { color: var(--sel); border-bottom-color: var(--sel); }
.tw-cx-cats__name { font-size: var(--fs-body); font-weight: 700; }
.tw-cx-cats__rate { font-size: var(--fs-cap); opacity: .85; font-variant-numeric: tabular-nums; }
.tw-cx-cathead { display: grid; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }

/* 목록·상세: 모바일 한 열, 넓은 화면은 나란히 */
.tw-cx-body { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-cx-listpane, .tw-cx-detail { min-width: 0; display: grid; gap: var(--sp-2); align-content: start; }
.tw-cx-detail { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3); }
@media (max-width: 759px) { .tw-cx-body.is-detail .tw-cx-listpane { display: none; } }
@media (min-width: 760px) {
  .tw-cx-body.is-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-cx-body.is-detail .tw-cx-back { display: none; }
  .tw-cx-detail { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
}

.tw-cx-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tw-cx-q { flex: 1 1 100%; }
.tw-cx-filter input, .tw-cx-filter select { font: inherit; font-size: var(--fs-body); min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2); border-radius: var(--radius-btn); max-width: 100%; }
.tw-cx-filter input { width: 100%; }
.tw-cx-filter select { flex: 1 1 calc(50% - var(--sp-1)); min-width: 0; }

.tw-cx-list { border-top: 1px solid var(--line); }
.tw-cx-list li { border-bottom: 1px solid var(--rule); }
.tw-cx-list .tw-cx-group { padding: var(--sp-3) var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); }   /* [임시] 몬스터 도감 '모드 적' 묶음 제목 */
.tw-cx-list .tw-cx-group h3 { font-size: var(--fs-sub); color: var(--muted); }
.tw-cx-row { font: inherit; width: 100%; background: transparent; color: var(--fg); border: 0; padding: var(--sp-2) var(--sp-1); min-height: 48px; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; text-align: left; }
.tw-cx-row.has-art { grid-template-columns: auto auto minmax(0, 1fr) auto; }   /* [확정 V6] 등록 장비 승인 아이콘 칸 */
.tw-cx-row:hover { color: var(--accent); }
.tw-cx-row.is-current { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }   /* 결정 CN: 반전 막대 → 인디고 글자 + 왼쪽 선 하나 */
.tw-cx-row.is-current b, .tw-cx-row.is-current small { color: inherit; }
.tw-cx-row.is-off b { color: var(--muted); font-weight: 400; }
.tw-cx-row.is-current.is-off b { color: inherit; }
.tw-cx-row__main { display: grid; gap: 0; min-width: 0; }
.tw-cx-row__main b, .tw-cx-row__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-cx-row__meta { font-size: var(--fs-cap); color: var(--muted); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.tw-cx-row.is-current .tw-cx-row__meta { color: inherit; }
.tw-cx-dot { display: inline-flex; color: var(--faint); font-size: var(--fs-body); }   /* 선 아이콘 크기 = 글자 크기 */
.tw-cx-dot.is-on { color: var(--fg-2); }
.tw-cx-row.is-current .tw-cx-dot, .tw-cx-row.is-current .tw-cx-grade { color: inherit; }
.tw-cx-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }

.tw-cx-dhead { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tw-cx-dhead h2 { font-size: var(--fs-strong); color: var(--fg-2); margin-right: auto; }
.tw-cx-sect { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--rule); font-size: var(--fs-body); }
.tw-cx-sect h3 { font-size: var(--fs-sub); color: var(--muted); }

.tw-cx-kv { display: grid; font-size: var(--fs-body); }
.tw-cx-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule); }
.tw-cx-kv > div:last-child { border-bottom: 0; }
.tw-cx-kv dt { color: var(--muted); flex: none; }
.tw-cx-kv dd { text-align: right; color: var(--fg-2); min-width: 0; overflow-wrap: anywhere; }
.tw-cx-plain { display: grid; gap: var(--sp-2); }
.tw-cx-plain li { display: grid; gap: 0; }
.tw-cx-grades { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tw-cx-grade { font-size: var(--fs-cap); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-chip); }   /* 결정 BT4: 배지 테두리는 회색(등급은 글자색) */
/* 통합 검증 2026-09-26: 확정 등급색(INVENTORY_SCREEN_CONTRACT §9, PLANNING_AUDIT 등급색 CONFLICT 권고)으로 맞춤.
   일반 흰 · 고급 녹 · 희귀 파 · 영웅 황금 · 전설 빨강 · 성유물 흰 굵게. 레플리카 색은 NEEDS_UI_DECISION → 기본 글자색(색 지정 없음) */
/* 2026-09-26 UI 후속: 색은 app.css 공통 등급 토큰(--grade-*)으로 */
.tw-cx-grade.is-normal { color: var(--grade-common); }
.tw-cx-grade.is-advanced { color: var(--grade-uncommon); }
.tw-cx-grade.is-rare { color: var(--grade-rare); }
.tw-cx-grade.is-heroic { color: var(--grade-heroic); }
.tw-cx-grade.is-legendary { color: var(--grade-legendary); }
.tw-cx-grade.is-relic { color: var(--grade-relic); font-weight: var(--grade-relic-weight); }
.tw-cx-grade.is-replica { color: var(--grade-replica); }
.tw-cx-table { overflow-x: auto; }
.tw-cx-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.tw-cx-table th, .tw-cx-table td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--rule); vertical-align: top; }
.tw-cx-table th { color: var(--muted); font-weight: 400; border-bottom-color: var(--line); }
.tw-cx-table tr.is-on td { color: var(--fg-2); }
.tw-cx-table tr:not(.is-on) td { color: var(--muted); }

/* 서사: 인용 + 화자. '남겨진 기록'은 설명 뒤 별도 블록 */
.tw-cx-frag { margin: 0; display: grid; gap: var(--sp-1); }
.tw-cx-frag + .tw-cx-frag { padding-top: var(--sp-2); }
.tw-cx-frag blockquote, .tw-cx-remember blockquote { margin: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px solid var(--line); color: var(--fg-2); line-height: var(--lh-loose); }
.tw-cx-frag figcaption { font-size: var(--fs-cap); color: var(--muted); }
.tw-cx-remember { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--rule); }
.tw-cx-remember h3 { font-size: var(--fs-sub); color: var(--muted); }
/* 결정 DL1 A1·A2(2026-09-30): 탁본 한 줄(등록한 항목 상세 머리) · 발문 · '한 줄이 더 있다' · 앞 기록에서 이어진 줄 — 기존 토큰만 */
.tw-cx-rub { margin: 0; font-size: var(--fs-sub); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-cx-after { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sub); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-cx-after__tag { font-size: var(--fs-cap); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--sp-1); }
.tw-cx-after small, .tw-cx-more small { font-size: var(--fs-cap); color: var(--muted); }
.tw-cx-more { margin: 0; font-size: var(--fs-sub); color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.tw-cx-cont { display: grid; gap: var(--sp-1); }
.tw-cx-cont__head { margin: 0; font-size: var(--fs-cap); color: var(--muted); }
.tw-cx-cont blockquote { margin: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px dashed var(--line); color: var(--fg-2); line-height: var(--lh-loose); }


/* 옛 도감 규칙 상자(.tw-cx-rules, [확정]·[임시] 개수)는 결정 BS② 2단계에서 제목 옆 ⓘ 팝오버로 옮겨 지웠다(결정 BS5). */

/* 목록 카드·상세 카드(표면 3단계: 페이지 카드 › 섹션 › 행) */
.tw-cx-list { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-cx-list li:last-child { border-bottom: 0; }
/* [결정 AL3] 특화 원형: 세계관 한 줄·대상 계열 칩 / 도시 상세의 직업경력 특화 사냥터 */
.tw-cx-lore { color: var(--muted); font-size: var(--fs-sub); border-left: 2px solid var(--line); padding-left: var(--sp-2); overflow-wrap: anywhere; }
.tw-cx-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: var(--sp-2); vertical-align: middle; }
p.tw-cx-chips { margin-left: 0; }
.tw-cx-sect details.tw-note { margin-top: var(--sp-1); }
/* 결정 DX3(2026-09-30): 명언 목록은 본문을 줄여 자르지 않고 두 줄까지 감싼다 */
.tw-cx-row.is-quote .tw-cx-row__main b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; }