/* 인벤토리 화면(결정 BG1·BG3, 2026-09-28) — screens_inventory.js 전용.
   새 스타일(결정 CN·CQ·CR 2단계 갈래 A, 2026-09-30 — 시안 docs/ui_shots_20260929_cn_style/S7_final): 바탕 한 가지(칸 바탕 없음, CN2) · 구분은 외곽선만 ·
   강조는 색만(인디고) · 모서리 16(카드)·8(칸·줄·단추)·3(칩) · 한 묶음 색 세로선 최대 1개(CR15). 공통 토큰·부품(app.css '영역: 공통'·'CN 새 부품')만 쓴다.
   아이템 상세 본문 모양(.tw-av-detail·.tw-av-dhead·.tw-av-dsec …)은 내 정보·상점·창고와 함께 쓰므로 screens_avatar.css 에 있다. */
.tw-inv { display: grid; gap: var(--gap); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }   /* 한국어 낱말 중간에서 줄이 끊기지 않게, 긴 이름은 anywhere */
.tw-inv-top { display: grid; gap: var(--gap); align-items: start; min-width: 0; }
@media (min-width: 900px) { .tw-inv-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.tw-inv-card { gap: 8px; min-width: 0; }
.tw-inv-card > * { min-width: 0; }

/* 결과 한 줄(다시 읽은 화면 맨 위): 외곽선 + 제목 글자 색(바탕 없음) */
.tw-inv-result { font-size: var(--fs-sub); line-height: var(--lh-base); padding: 8px 12px; border: var(--bw) solid var(--ok); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.tw-inv-result b { color: var(--ok); margin-right: var(--sp-1); }

/* 카드 머리 곁말: 'n / 7칸 · 외형 관리 · 프리셋' / '설정'(누르는 글자 = 링크 모양 단추) */
.tw-inv-eqcard .tw-card__aside { gap: 10px; }
.tw-inv-setbtn { font: inherit; font-size: var(--fs-cap); background: none; border: 0; padding: 0; cursor: pointer; }
.tw-inv .tw-card__aside .tw-link { font-size: var(--fs-cap); }

/* ① 장착 중인 장비: 칸 7개(휴대폰 2열 · ≥600px 3열). 칸 = [그림 32 | 부위(선 아이콘) · 등급색 이름 +N] · [위력 · 속성], 등급색을 옅게 섞은 외곽선 */
.tw-inv-eq { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
@media (min-width: 600px) { .tw-inv-eq { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tw-inv-eq__slot { position: relative; display: grid; min-width: 0; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); }
.tw-inv-eq__slot.is-advanced { border-color: color-mix(in srgb, var(--g-advanced) 45%, var(--line)); }
.tw-inv-eq__slot.is-rare { border-color: color-mix(in srgb, var(--g-rare) 45%, var(--line)); }
.tw-inv-eq__slot.is-heroic { border-color: color-mix(in srgb, var(--g-heroic) 45%, var(--line)); }
.tw-inv-eq__slot.is-legendary { border-color: color-mix(in srgb, var(--g-legendary) 45%, var(--line)); }
.tw-inv-eq__slot.is-empty { border-style: dashed; border-color: var(--line-strong); padding: 6px 8px; gap: 4px; align-content: start; }
.tw-inv-eq__slot.is-new { border-color: var(--ok); }
.tw-inv-eq__slot:has(.tw-inv-eq__btn:hover) { border-color: var(--line-hover); }
.tw-inv-eq__btn { font: inherit; text-align: left; color: var(--fg); background: none; border: 0; border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; min-width: 0; min-height: 44px;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-content: start; }
.tw-inv-eq__art { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.tw-inv-eq__art .tw-eqi { border: 0; }
.tw-inv-eq__art .tw-li { width: 20px; height: 20px; }
.tw-inv-eq__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tw-inv-eq__label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-cap); line-height: 1.3; }
.tw-inv-eq__label .tw-li { width: 12px; height: 12px; }
.tw-inv-eq__name { font-size: var(--fs-sub); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tw-inv-eq__stat { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding-right: 52px; font-size: var(--fs-cap); color: var(--muted); line-height: 1.35; font-variant-numeric: tabular-nums; }
.tw-inv-eq__none { display: grid; gap: 2px; font-size: var(--fs-sub); color: var(--muted); }
/* 교체 후보 n: 칸 오른쪽 아래 작은 인디고 글자 단추(보이는 높이 28 · 누름 44는 투명 ::before) */
.tw-inv-eq__find { position: absolute; right: 6px; bottom: 4px; font: inherit; font-size: var(--fs-cap); font-weight: 600; color: var(--accent); background: none; border: 0; padding: 4px 2px; min-height: 28px; cursor: pointer; }
.tw-inv-eq__find::before { content: ""; position: absolute; inset: -8px -4px; }
.tw-inv-eq__slot.is-empty .tw-inv-eq__find { position: relative; right: auto; bottom: auto; justify-self: start; }
.tw-inv-eq__find:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ② 가방 칸 막대: 라벨 왼쪽 · 값 오른쪽 · 가는 둥근 막대(가방 인디고 · 전리품 녹, 80% 이상 주의색 · 가득 위험색 — 칩 글자도 함께) */
.tw-inv-meter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; margin-top: 2px; }
.tw-inv-meter__row { display: grid; gap: 5px; min-width: 0; }
.tw-inv-meter__top { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: var(--fs-cap); color: var(--muted); }
.tw-inv-meter__top b { margin-left: auto; font-size: var(--fs-value); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-inv-meter__top b small { font-weight: 400; }
.tw-inv-meter__bar { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.tw-inv-meter__bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--stamina); transition: width .4s ease-out; }
.tw-inv-meter__row.is-loot .tw-inv-meter__bar > span { background: var(--ok); }
.tw-inv-meter__row.is-warn .tw-inv-meter__bar > span { background: var(--warn); }
.tw-inv-meter__row.is-full .tw-inv-meter__bar > span { background: var(--bad); }
.tw-inv-meter__row.is-full .tw-inv-meter__top b { color: var(--bad); }
.tw-inv-meter__note { font-size: var(--fs-cap); color: var(--fg); line-height: var(--lh-base); padding: 6px 10px; border: var(--bw) solid var(--warn); border-radius: var(--radius-sm); }
.tw-inv-meter__note.is-info { border-color: var(--line); color: var(--muted); }
.tw-inv-link { font: inherit; color: var(--accent); font-weight: 600; background: none; border: 0; padding: 0; min-height: 28px; cursor: pointer; }
.tw-inv-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-inv-link { position: relative; }
.tw-inv-link::before { content: ""; position: absolute; inset: -8px -2px; }   /* 검토(2026-09-30): 글 속 단추 누름 영역 44px(보이는 28px + 위아래 8px) */
.tw-inv-adform { padding-top: 6px; border-top: var(--bw) solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .tw-inv-meter__bar > span { transition: none; } }

/* ③ 목록 카드: 위치 탭 수 · 분류 칩 한 줄(CR6) · 조건 칩 + 정렬 한 줄(CR7) — 둘 다 .tw-swipe(좌우로 밀어 봄) */
.tw-inv .tw-av-tabs small { font-size: var(--fs-cap); color: inherit; opacity: .8; font-variant-numeric: tabular-nums; }
.tw-inv .tw-fchip small { font-size: var(--fs-cap); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-inv .tw-fchip[aria-pressed="true"] small { color: inherit; }
.tw-inv-fic { display: inline-grid; place-items: center; color: var(--muted); }
.tw-inv-fic .tw-li { width: 16px; height: 16px; }
.tw-inv-sort { position: relative; display: inline-flex; align-items: center; min-height: 36px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); }
.tw-inv-sort::before { content: ""; position: absolute; inset: -5px -1px; pointer-events: none; }
/* 검토(2026-09-30): 라벨 ::before(pointer-events 없음)는 select 를 넓히지 못해 누름 34px 였음 → select 자체를 44px(위아래 -5px, 보이는 틀 36px 그대로) */
.tw-inv-sort select { font: inherit; font-size: var(--fs-cap); font-weight: 600; min-height: 44px; margin: -5px 0; padding: 0 6px 0 10px; border: 0; border-radius: var(--radius-chip); background: transparent; color: var(--fg); cursor: pointer; }
.tw-inv-sort option { background: var(--bg); color: var(--fg-2); }
.tw-inv-sort:focus-within { border-color: var(--accent); }
.tw-inv-sort select:focus-visible { outline: 0; }
.tw-inv-loottools { justify-content: flex-end; }

/* 목록 줄 = 칸(외곽선 · 모서리 8). 휴대폰 1열(결정 CR10) · ≥600px 2열 · ≥900px 3열.
   줄 = [여는 단추: 그림 | 등급색 이름 +N ×수량 / 부위 · 위력 N ↑12 · 속성 / 표지·이유] + [오른쪽 세로 칸의 빠른 행동 단추 56×44(CQ14)] */
.tw-inv-count { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-cap); color: var(--muted); margin-bottom: 6px; }
.tw-inv-count .tw-btn { min-height: 32px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-cap); }
.tw-inv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
@media (min-width: 600px) { .tw-inv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tw-inv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tw-inv-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; min-width: 0; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); }
.tw-inv-row.has-act { grid-template-columns: minmax(0, 1fr) auto; }
.tw-inv-row:has(.tw-av-item:hover) { border-color: var(--line-hover); }
.tw-inv-row.is-sel, .tw-inv-row:has(.tw-av-item[aria-pressed="true"]) { border-color: var(--accent); }
.tw-inv-row.is-new { border-color: var(--ok); }
.tw-inv .tw-av-item { font: inherit; width: 100%; min-height: 56px; text-align: left; background: none; color: var(--fg); border: 0; border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; min-width: 0;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-content: center; }
.tw-inv .tw-av-item[aria-pressed="true"] { background: none; box-shadow: none; }
.tw-inv .tw-av-item:hover .tw-av-item__name > .tw-av-g { text-decoration: underline dotted; text-underline-offset: 3px; }
.tw-inv-row__art { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; align-self: start; }
.tw-inv-row__art .tw-eqi { border: 0; }
.tw-inv-glyph { display: inline-grid; place-items: center; color: var(--muted); }
.tw-inv-glyph .tw-li { width: 22px; height: 22px; }
.tw-inv .tw-av-item__name { grid-column: 2; font-size: var(--fs-sub); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.tw-inv .tw-av-item__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 2px; font-size: var(--fs-cap); color: var(--muted); line-height: 1.35; font-variant-numeric: tabular-nums; }
.tw-inv-dot { white-space: pre; }
.tw-inv-power { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tw-inv .tw-av-item__flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-cap); color: var(--muted); line-height: 1.35; }
.tw-inv .tw-av-item__flags > span { display: inline-flex; align-items: center; gap: 3px; }
.tw-inv .tw-av-item__flags .tw-li { width: 12px; height: 12px; }
.tw-inv-new { color: var(--accent); font-weight: 600; }
.tw-inv-qty { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-inv-emptyslot { color: var(--accent); font-weight: 600; }
/* 오르내림(결정 CR8 — 위력 값 바로 옆): 오름 녹 · 내림 빨강, 선 아이콘 + 숫자(색만으로 전하지 않게 낭독기 글자) */
.tw-inv-up, .tw-inv-down { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; }
.tw-inv-up .tw-li, .tw-inv-down .tw-li { width: 12px; height: 12px; }
.tw-inv-up { color: var(--ok); }
.tw-inv-down { color: var(--bad); }
.tw-inv-same { color: var(--muted); }
.tw-inv-row__act { display: flex; align-items: center; padding: 6px 8px 6px 0; }
.tw-inv-row__act .tw-btn { min-height: 44px; min-width: 56px; padding: 0 12px; font-size: var(--fs-sub); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
.tw-inv-row__act .tw-btn:hover:not(:disabled) { border-color: var(--accent); }
.tw-inv-row__act .tw-btn:disabled { color: var(--fg); border-color: var(--line-strong); }   /* 못 누름 = 흐리게(.38, 공통) — 이유는 같은 줄 표지 글자 */
.tw-inv-row.is-off .tw-inv-row__art { opacity: .6; }
.tw-inv-why { color: var(--warn); }

/* ④ 상세 = 하단 시트(모든 폭 — 결정 BG1). 모달이 아니다: 목록은 위에서 계속 고를 수 있고, 목록 아래에 시트 높이만큼 여백을 둔다.
   떠 있는 겹 칸이라 불투명 바탕(--bg) + 위 모서리 16 + 그림자. 머리(제목·닫기)는 위, 행동 줄(주 버튼 오른쪽)은 아래에 고정 */
.tw-inv-listwrap { min-width: 0; }
.tw-inv-listwrap.is-open { padding-bottom: 58vh; }
.tw-inv-sheet.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; margin: 0 auto; width: 100%; max-width: calc(var(--content-w, 600px) + 2 * var(--gutter, 12px));
  max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; border: var(--bw) solid var(--line-strong); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 var(--gutter, var(--sp-3)); background: var(--bg); box-shadow: var(--pop-shadow); }
.tw-inv-sheet.is-sheet[hidden] { display: none; }
.tw-inv-sheet.is-sheet .tw-av-dhead { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: var(--sp-2) 0 var(--sp-1); border-bottom: var(--bw) solid var(--rule); }
.tw-inv-sheet.is-sheet .tw-av-dacts { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: var(--bw) solid var(--rule); }
.tw-inv-sheet .tw-inv-why { text-align: right; }
.tw-inv-sheet .tw-av-dacts .tw-btn { flex: 1 1 auto; }
.tw-inv-sheet .tw-av-dacts .tw-btn.is-primary { flex: 2 1 auto; }
@media (min-width: 760px) { .tw-inv-sheet.is-sheet { max-height: 60vh; } .tw-inv-listwrap.is-open { padding-bottom: 62vh; } }
.tw-inv-dcmp__who { font-size: var(--fs-sub); overflow-wrap: anywhere; }
.tw-inv-dcmp .tw-table { font-size: var(--fs-sub); }
.tw-inv-dcmp .tw-table th[scope="row"] { color: var(--muted); font-weight: 400; white-space: nowrap; }