/* 창고 화면(결정 AY1·AY2·AY4 2026-09-28) — screens_storage.js 전용. 공통 토큰만 쓴다(--phos 없음: 결정 AQ1 라이트 검정 원칙).
   넓은 화면 예외(D4 .tw-layout-wide)를 AY2 '넓은 화면 좌우 두 목록' 때문에 쓴다: 1100px 이상에서 두 목록을 좌우로 둔다.
   결정 CN·CQ·CR(갈래 C, 2026-09-30): 칸 바탕 없음·모서리 16·8·3, 왼쪽 색 띠 → 외곽선·글자 색(CR15), 마디 막대(가림 무늬) → 가는 둥근 막대, 점선 → 가는 줄. */
.tw-st { display: grid; gap: var(--sp-3); min-width: 0; }

/* 사용 칸 막대: n / 50칸 + 남은 칸 칩. 80% 이상 주의색, 가득 차면 위험색(색만으로 전달하지 않게 칩·안내 글자를 함께) */
.tw-st-meter { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); border: var(--bw) solid var(--line); border-radius: var(--radius); background: transparent; min-width: 0; }
.tw-st-meter__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); min-width: 0; }
.tw-st-meter__top > span { font-size: var(--fs-card); letter-spacing: var(--ls-card); color: var(--fg-2); font-weight: 700; }
.tw-st-meter__top b { font-size: var(--fs-bignum); line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-st-meter__top .tw-chip { margin-left: auto; }
.tw-st-meter__bar { height: 6px; border-radius: 999px; overflow: hidden; background: var(--track); }
.tw-st-meter__bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .4s ease-out; }
.tw-st-meter__note { font-size: var(--fs-sub); color: var(--fg); line-height: var(--lh-base); }
.tw-st-meter.is-warn { border-color: var(--edge-warn); }
.tw-st-meter.is-warn .tw-st-meter__bar > span { background: var(--warn); }
.tw-st-meter.is-full { border-color: var(--edge-bad); }
.tw-st-meter.is-full .tw-st-meter__bar > span { background: var(--bad); }
.tw-st-meter.is-full .tw-st-meter__top b { color: var(--bad); }

/* 도구 줄: 종류 탭(2단 탭 모양, 누름 = 거르기) · 상태 필터(하나만) · 정렬 — 결정 CL9: 목록(창고 보관 중·가방)마다 하나씩, CL10: 검색 없음 */
.tw-st-tools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-st-cats > [aria-pressed="true"] { color: var(--fg-2); border-bottom-color: var(--sel); font-weight: 600; }
.tw-st-cats small { font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-st-bar .tw-filters { flex: 1 1 100%; }
.tw-st-sort { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); flex: 0 1 auto; min-width: 0; }
.tw-st-sort select { min-width: 0; }
@media (min-width: 760px) { .tw-st-bar .tw-filters { flex: 0 1 auto; } }

/* 두 목록: 좁으면 위아래, 1100px 이상 좌우 */
.tw-st-cols { display: grid; gap: var(--sp-4); min-width: 0; }
@media (min-width: 1100px) { .tw-st-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.tw-st-col { display: grid; gap: var(--sp-2); min-width: 0; align-content: start; }
.tw-st-colhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding-bottom: var(--sp-1); border-bottom: var(--bw) solid var(--line); }
.tw-st-colhead h2 { margin: 0; font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); color: var(--fg-2); }
.tw-st-count { font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-st-colsub { font-size: var(--fs-cap); color: var(--muted); }
.tw-st-colnote { font-size: var(--fs-sub); color: var(--warn); padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--edge-warn); border-radius: var(--radius-sm); background: transparent; }

/* 줄: [아이콘] 등급색 이름 ×수량 / 핵심 수치 한 줄 / 상태 표시 — 오른쪽 [찾기]·[맡기기]. 맡길 수 없으면 이유 글자 + 비활성 */
/* 목록이 길면(가득 찬 창고 50줄) 목록 안에서만 세로 이동 — 좁은 화면에서 '가방' 목록이 한참 아래로 밀리지 않게 */
.tw-st-list { display: grid; min-width: 0; max-height: min(64vh, 620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-bottom: var(--bw) solid var(--rule); }
.tw-st-act .tw-ct-in.is-short { width: 4.5em; }
.tw-st-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); border-bottom: var(--bw) solid var(--rule); border-left: 2px solid transparent; min-width: 0; }
.tw-st-row.is-new { border-left-color: var(--ok); }   /* 방금 들어온 줄(한 번에 하나 — CR15) */
/* 검토 2026-09-28: 190px이면 375px에서 수량 칸 + [맡기기] 줄이 다음 줄로 밀려 줄마다 모양이 달라졌다 → 160px(360px 규칙과 같게) */
.tw-st-row__main { flex: 1 1 160px; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: 44px; padding: var(--sp-1) 2px; font: inherit; text-align: left; color: var(--fg); background: none; border: 0; cursor: pointer; }
.tw-st-row__main:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tw-st-row__main:hover .tw-st-row__name .tw-ct-g { text-decoration: underline; text-underline-offset: 3px; }
.tw-st-row__main .tw-eqi { flex: none; }
.tw-st-row__text { display: grid; gap: 2px; min-width: 0; }
.tw-st-row__name { font-size: var(--fs-body); overflow-wrap: anywhere; line-height: var(--lh-tight); }
.tw-st-row__name .tw-chip { font-size: var(--fs-cap); padding: 0 var(--sp-1); vertical-align: 1px; }
.tw-st-qty { color: var(--fg-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-st-row__brief { font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; line-height: var(--lh-base); }
.tw-st-flags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-st-flag.tw-tag { color: var(--fg); }   /* 귀속·잠금·봉인·전리품 상자 = 상태 태그(결정 BU3 — 테두리 없음, 공용 .tw-tag 모양) */
.tw-st-act { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.tw-st-act .tw-btn { min-height: 44px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); }
.tw-st-why { flex: 1 1 100%; font-size: var(--fs-cap); color: var(--warn); padding: 0 0 var(--sp-1) 2px; line-height: var(--lh-base); }
/* 검토 2026-09-28: 맡길 수 없는 줄의 핵심 수치를 --faint(다크 대비 약 3:1)로 흐리면 어떤 물건인지 읽기 어렵다.
   비활성은 흐린 버튼(공용 .38) + 이유 글자로 이미 전달되므로 핵심 수치는 --muted 그대로 둔다(규칙 삭제). 결정 CN: 옛 점선 버튼 없음. */
.tw-st .tw-empty .tw-btn { min-height: 44px; }

/* 상세: 모든 폭에서 하단 시트(결정 BG5 ② — 인벤토리와 같게, 옛 '넓은 화면 가운데 창' 대체. BZ7 창고 포함).
   아래 붙음(공통 하단 시트 모양 — 결정 CN: 떠 있는 겹 칸 = 불투명 바탕 + 선 + 위 모서리 16 + 부드러운 그림자), 폭은 본문 폭까지(넓은 화면 예외 폭 = 최대 960px).
   결정 CN: 제목 반전 막대(인디고 채움) 없음 — 카드 제목 모양 */
.tw-st-sheet { border: 0; border-top: var(--bw) solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; background: var(--bg); color: var(--fg); padding: 0; margin: auto auto 0;
  width: min(100%, var(--content-w, 600px) + 2 * var(--gutter, 12px)); max-width: 100%; max-height: min(88vh, 720px); box-shadow: var(--pop-shadow); }
@media (min-width: 760px) { .tw-st-sheet { width: min(100%, 720px); } }
.tw-st-sheet[open] { animation: tw-sheet-up .16s ease-out; }
.tw-st-sheet::backdrop { background: var(--scrim, #000c); }
.tw-st-sheet__bar { margin: 0; font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); padding: var(--sp-3) var(--sp-4) var(--sp-2); background: var(--bg); color: var(--fg-2); border-bottom: var(--bw) solid var(--rule); position: sticky; top: 0; z-index: 1; }
.tw-st-sheet__in { padding: var(--sp-2) var(--sp-4) 0; border-top: 0; }
.tw-st-sheet__act { display: grid; gap: var(--sp-1); position: sticky; bottom: 0; background: var(--bg); padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom)); border-top: var(--bw) solid var(--rule); }
.tw-st-sheet__act .tw-st-act { margin-left: 0; justify-content: flex-end; }
@media (max-width: 480px) {
  .tw-st-sheet__act .tw-st-act .tw-btn { flex: 1 1 auto; }
  .tw-st-sheet__act .tw-st-act { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tw-st-sheet[open] { animation: none; } }

@media (max-width: 420px) {
  .tw-st-meter { padding: var(--sp-3); }
  .tw-st-meter__top b { font-size: var(--fs-section); }
}
@media (max-width: 360px) {
  .tw-st-act .tw-btn { padding: var(--sp-2) var(--sp-3); }
}