/* tab-stock.css — 재고 탭. 시안 `Unified-Spec.dc.html` §10 「미니 창 · 워커스 재고」 (380×620 프레임) 를 그대로 옮겼다.
색은 전부 tokens.css 토큰 (시안 hex → 토큰 대응은 보고에):
#e2b866 → --gold · #1a1608 → --ongold · rgba(226,184,102,.4/.5) → color-mix(--gold 40/50%) · rgba(226,184,102,.1) → --goldwash ·
#23303f → --line2 · #16202c/#131c27/#1e2a38 → --line · #3a4756 → --line3(구분선) / --dim(0 숫자) · #0d1420 → --bg ·
#f4e7c8 → --strong · #fff/#e9ecf1 → --fg · #c2cad4 → --fg2 · #8b97a6 → --sub · #6f7a8a → --sub2 ·
#9dbcf2/rgba(122,162,232,.4) → --run/color-mix(--run) · rgba(122,162,232,.06) → color-mix(--run 6%) ·
#f0a35a/rgba(240,163,90,.16) → --warn/--warnbg · #f5b8c8/rgba(232,138,166,.16) → --bad2/--badbg ·
#4ade80 → --ok · #c8a6f0 → --collect · #7ee6a0 → --ok
마크업은 **한 벌**이다 (tab-stock.js). 좁은 폭(≤600, 맨 아래 @media 블록)이 시안의 2줄 행이고,
넓은 폭은 같은 행을 grid-template-areas 로 이름|가방|창고|합계|쓰이는 곳|담기 여섯 열에 편 표다 —
.stk-l2{display:contents} 로 2줄째의 조각이 격자 칸이 된다. 넓은 폭 표는 시안이 정하지 않았으므로 옛 배치(1fr 84 84 84 300 96 · 46px)를 지킨다.
#stkSum(요약) · #stkFilt(보기·위치·정렬) · #stkN(결과 수) 는 tab-stock.js 가 #tabCard 에 끼운 노드다.
#tabCard 는 재고·사전이 같이 쓰므로 **사전 탭에서는 여기서 숨긴다** (tab-dict.css 가 제 것을 재고 탭에서 숨기는 것과 짝).
스크롤은 표 안쪽(#tabBody)에만 생긴다. .stk 에는 높이·overflow 를 주지 않는다 —
.card{overflow:hidden} + flex 로 높이에 갇히면 내용이 잘리고 스크롤이 못 생긴다 (overlay-tab.css 끝의 사고 주석). */
#tabDict #stkSum,#tabDict #stkFilt,#tabDict #stkN{display:none}
/* 표가 카드 가장자리까지 닿게 — #tabBody 의 .cb 여백을 재고 탭에서만 없앤다 */
#tabStock #tabBody{padding:0}
/* ── 요약 (시안: gap 7 · padding 9 10 8 · 아래 1px 선). 넓은 폭은 무게 300px | 재화 1fr 두 열 ── */
.stk-sum{display:grid;grid-template-columns:300px minmax(0,1fr);gap:7px 14px;align-items:start;
padding:9px 14px 8px;border-bottom:1px solid var(--line);background:var(--inset);min-width:0}
.stk-sum .grow{flex:1;min-width:0}
/* 무게 한 줄 (시안: 10px · 라벨 --sub · 값 Mono 13px 700 --strong · 최대 Mono --sub2 · 배지 높이 18 · padding 0 6 · radius 5 · 9px 700) */
.stk-wgt{display:flex;flex-direction:column;gap:7px;min-width:0}
.stk-wgt:empty{display:none}
.stk-sum:has(.stk-wgt:empty){grid-template-columns:minmax(0,1fr)} /* 최대 무게를 모르면 무게 블록이 없다 — 재화가 300px 칸에 갇히지 않게 */
.stk-w1{display:flex;align-items:baseline;gap:6px;font-size:10px;line-height:1;min-width:0}
.stk-w1 .lb{color:var(--sub);white-space:nowrap}
.stk-w1 b{font-size:13px;font-weight:700;color:var(--strong)}
.stk-w1 .mx{color:var(--sub2);white-space:nowrap}
.stk-wb{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;font-size:9px;font-weight:700;white-space:nowrap;flex:none}
.stk-wb.warn{background:var(--warnbg);color:var(--warn)}
.stk-wb.bad{background:var(--badbg);color:var(--bad2)}
.stk-wb.line{border:1px solid var(--line2);color:var(--sub)}
/* 막대 (시안: 높이 4 · radius 2 · 초록→골드 70%→주황 · 여유 표식 1.5px 분홍) — 표식(u)은 설정 queue_weight_margin 지점 */
.stk-bar{position:relative;height:4px;border-radius:2px;background:var(--line);min-width:0}
.stk-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--ok),var(--gold) 70%,var(--warn))}
.stk-bar.near i{background:var(--bad)}
.stk-bar u{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--bad2);text-decoration:none}
/* 경고 한 줄 (시안: 9px --sub2 · 수는 Mono --fg2 · 「무게 초과」 주황) */
.stk-w3{font-size:9px;color:var(--sub2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stk-w3 b{font-family:var(--mono);font-weight:400;color:var(--fg2)}
.stk-w3 em{font-style:normal;font-weight:700;color:var(--warn)}
/* 재화 3칸 + 「+N ▾」 (시안: grid 1fr 1fr 1fr auto · gap 5 · 9px) */
.stk-cur{display:flex;flex-direction:column;gap:6px;min-width:0}
.stk-cur:empty{display:none}
.stk-cc3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:5px;font-size:9px;line-height:1;min-width:0}
/* 칸 (시안: 세로 gap 3 · padding 5 7 · radius 7 · 바탕 --bg · 골드 칸 골드 40% 테두리 · 날개 칸 파랑 40% · 그 밖 --line2) */
.stk-cc{display:flex;flex-direction:column;gap:3px;padding:5px 7px;border-radius:7px;background:var(--bg);border:1px solid var(--line2);min-width:0;cursor:default}
.stk-cc .cn{color:var(--sub2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-cc .cv{font-size:11px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-cc.gold{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.stk-cc.gold .cv{color:var(--gold)}
.stk-cc.wings{border-color:color-mix(in srgb,var(--run) 40%,transparent)}
.stk-cc.wings .cv{color:var(--run)}
/* 「+N ▾」 (시안: padding 0 7 · radius 7 · --line2 테두리 · 투명 · --sub / 펼친 상태는 골드 50% 테두리 · 골드 10% 바탕 · 골드 글자) */
.stk-cmore{display:inline-flex;align-items:center;justify-content:center;padding:0 7px;border-radius:7px;border:1px solid var(--line2);
background:transparent;color:var(--sub);font-size:9px;white-space:nowrap;cursor:pointer}
.stk-cmore:hover{border-color:var(--line3)}
.stk-cmore.on{border-color:color-mix(in srgb,var(--gold) 50%,transparent);background:var(--goldwash);color:var(--gold)}
/* 펼침 — 나머지 재화 3열 (시안: repeat(3,1fr) · gap 4 10 · padding 7 8 · radius 8 · 바탕 --bg · --line 테두리 · 9px · line-height 1.2) */
.stk-call{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;padding:7px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line);
font-size:9px;line-height:1.2;max-height:150px;overflow:auto;min-width:0}
.stk-ci{display:flex;justify-content:space-between;gap:4px;min-width:0;cursor:pointer}
.stk-ci .cn{color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-ci .cv{color:var(--fg);white-space:nowrap}
.stk-ci:hover .cn{color:var(--fg)}
.stk-cnote{grid-column:1 / -1;color:var(--sub2);padding-top:3px;border-top:1px solid var(--line)}
/* ── 검색창 오른쪽 끝의 결과 수 (시안: Mono 10px --sub2 「579종」) — 지우기 × 왼쪽 ── */
#tabStock .qwrap input{padding-right:64px}
.stk-n{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;color:var(--sub2);pointer-events:none;white-space:nowrap}
/* ── 보기 4분할 전폭 → 위치 3분할 + 정렬 2분할 한 줄 (시안: gap 6 · padding 8 10 · 세그먼트 높이 24 · radius 7 · 10px · 활성 골드 채움) ──
넓은 폭에서는 세 세그먼트가 한 줄에 흐른다 */
.stk-filt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 14px;border-bottom:1px solid var(--line);min-width:0}
/* 보기 4분할은 줄어들지 않는다(flex:none) — 줄면 버튼이 overflow:hidden 에 잘려 「큐에 쓰임」 「부족」 이 안 보였다 (실테스트 T2, ≥601).
자리가 모자라면 위치·정렬 묶음이 다음 줄로 내려간다 (flex-wrap) */
.stk-view{display:flex;flex:none;max-width:100%;min-width:0}
.stk-ls{display:flex;gap:6px;flex:1;min-width:0}
.stk-ls .l3{flex:1;max-width:300px}
.stk-ls .s2{margin-left:auto}
.stk-seg{display:flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden;font-size:10px;line-height:1;min-width:0}
.stk-seg button{border:none;border-radius:0;height:24px;padding:0 7px;color:var(--sub);font-size:10px;white-space:nowrap;background:transparent;min-width:0}
.stk-seg button.on{background:var(--gold);color:var(--ongold);font-weight:700}
.stk-seg button:disabled{opacity:.35;cursor:default}
.stk-seg.l3 button{flex:1}
/* 넓은 폭의 보기 칸은 글자 폭 그대로 — flex:1(기준 0)이면 네 칸이 같은 폭으로 나뉘어 가장 긴 「큐에 쓰임」 이 1280 에서도 잘렸다 (실테스트 T2) */
.stk-seg.v4 button{flex:none}
/* ── 행 (한 벌). 넓은 폭: 이름 | 가방 | 창고 | 합계 | 쓰이는 곳 | 담기 (옛 표 1fr 84 84 84 300 96 · 46px) ── */
.stk{display:flex;flex-direction:column;min-width:0;container:stk / inline-size}
.stk-list{display:flex;flex-direction:column;min-width:0}
.stk-r{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px 84px 300px 96px;grid-template-areas:"nm b s tt us ad";gap:12px;align-items:center;
height:46px;padding:0 16px;border-bottom:1px solid var(--line);min-width:0}
.stk-r:hover{background:var(--card2)}
/* 큐가 쓰는 재료 행 (시안: 파랑 6% 바탕) */
.stk-r.q{background:color-mix(in srgb,var(--run) 6%,transparent)}
/* 표 머리는 목록 위에 붙는다 — 스크롤은 바깥(#tabBody)이 맡으므로 오프셋 없이 top:0 */
.stk-r.hd{position:sticky;top:0;z-index:3;height:30px;font-size:var(--fs-xs);color:var(--sub);background:var(--inset);border-bottom:1px solid var(--line2)}
.stk-r.hd:hover{background:var(--inset)}
.stk-r.hd .stk-nm,.stk-r.hd .stk-tt{font-size:var(--fs-xs);font-weight:400;color:var(--sub)}
.stk-l2{display:contents}
.stk-nm{grid-area:nm;display:flex;align-items:center;gap:6px;min-width:0}
.stk-b{grid-area:b}.stk-s{grid-area:s}.stk-tt{grid-area:tt}.stk-us{grid-area:us}.stk-ad{grid-area:ad}
.stk-b,.stk-s{text-align:right;font-family:var(--mono);color:var(--fg2)}
.stk-b i,.stk-s i,.stk-vr{display:none} /* 「가방 」「창고 」 라벨과 │ 는 2줄 행에서만 */
.stk-b b,.stk-s b{font-weight:500}
.stk-b .z,.stk-s .z{color:var(--dim)} /* 가방 또는 창고가 0 이면 숫자 흐리게 (표의 0 처리와 동일) */
/* 1줄: 이름 13px 700 --strong 말줄임 · 종류 칩 높이 16 · padding 0 5 · radius 4 · 9px · 부족 −n 빨간 칩 · 합계 Mono 13px 700 --fg 우측 */
.stk-nm .t{font-size:13px;font-weight:700;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stk-tg{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;border:1px solid var(--line2);color:var(--sub);font-size:9px;white-space:nowrap;flex:none}
.stk-tg.c-box{border-color:color-mix(in srgb,var(--collect) 35%,transparent);color:var(--collect)}
.stk-tg.c-food{border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.stk-sh{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;background:var(--badbg);color:var(--bad2);font-size:9px;font-weight:700;white-space:nowrap;flex:none}
.stk-tt{font-size:13px;font-weight:700;color:var(--fg);text-align:right;white-space:nowrap}
/* 쓰이는 곳 (시안: 10px --sub 한 줄 말줄임 「가죽+ ×3 · 가죽 갑옷 신발 ×2」) — 큐 때문에 모자란 레시피는 주황 */
.stk-us{font-size:10px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stk-uch.hot{color:var(--warnfg);font-weight:600}
.stk-dot{color:var(--sub2)}
/* 담기 (시안: 높이 24 · min-width 62 · padding 0 9 · radius 12 · 10px 700 · 골드 채움 / 모르면 「—」 --line 테두리 흐린 글자) */
.stk-ad{text-align:center;min-width:0}
.stk-add{display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:62px;padding:0 9px;border-radius:12px;font-size:10px;font-weight:700;white-space:nowrap}
.stk-add.go{background:var(--gold);border:1px solid var(--gold);color:var(--ongold)}
.stk-add.go:hover{background:var(--goldhover);border-color:var(--goldhover)}
.stk-add.none{background:transparent;border:1px solid var(--line);color:var(--dim);font-weight:400;cursor:default}
/* 등급 배지 — 색은 게임 원문 값(--gc). 라이트 테마에선 흰색 계열이 안 읽혀 어둡게 섞는다 */
.stg{font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;flex:none;
color:var(--gc,var(--gold));background:color-mix(in srgb,var(--gc,#e2b866) 18%,transparent);
border:1px solid color-mix(in srgb,var(--gc,#e2b866) 45%,transparent)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .stg{color:color-mix(in srgb,var(--gc,#b07f14) 62%,#2b2206);background:color-mix(in srgb,var(--gc,#b07f14) 26%,transparent);border-color:color-mix(in srgb,var(--gc,#b07f14) 55%,#8a6a10)}}
:root[data-theme="light"] .stg{color:color-mix(in srgb,var(--gc,#b07f14) 62%,#2b2206);background:color-mix(in srgb,var(--gc,#b07f14) 26%,transparent);border-color:color-mix(in srgb,var(--gc,#b07f14) 55%,#8a6a10)}
.stk-foot{display:flex;align-items:center;gap:8px;padding:8px 16px 10px;font-size:var(--fs-xs);color:var(--sub2)}
.stk-foot .grow{flex:1;min-width:0}
.stk .empty{padding:30px 16px}
.stk .lc-more{padding:8px 16px}
/* ── 넓은 폭 안에서의 중간 폭: 쓰이는 곳 열부터 줄인다 (좁은 폭 규칙은 아래 @media 블록) ── */
@container tab (max-width:900px){.stk-sum{grid-template-columns:minmax(0,1fr)}}
@container stk (max-width:1080px){.stk-r{grid-template-columns:minmax(0,1fr) 76px 76px 80px 220px 92px;gap:10px;padding:0 12px}}
@container stk (max-width:820px){.stk-r{grid-template-columns:minmax(0,1fr) 68px 68px 74px 150px 88px}}
/* 601~700 (본문 530 안팎): 위 열 폭 합이 본문을 다 먹어 **이름 열이 0** 이 되어 이름이 사라졌다 — 숫자 열·쓰이는 곳을 더 줄여 이름에 자리를 남긴다 */
@container stk (max-width:640px){.stk-r{grid-template-columns:minmax(0,1fr) 52px 52px 60px minmax(0,110px) 80px;gap:8px;padding:0 10px}}
/* ── 좁은 폭 (≤600): 시안 §10 그대로 — 요약 한 열 · 검색 전폭 · 보기 4분할 전폭 · 위치+정렬 한 줄 · 2줄 행 ── */
@media (width < 600px){
/* align-items:stretch — 넓은 폭 격자의 align-items:start 가 세로 flex 에 넘어오면 무게·재화 블록이 제 글자 폭(60%)으로 줄어든다 (실테스트 5-5).
시안 §10: 무게 줄·막대·재화 3칸은 카드 전폭 */
.stk-sum{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:9px 10px 8px}
/* 검색(전폭) — 공용 줄(#filterRow)에서 검색만 남긴다 (시안: 높이 32 · radius 9 · 카드색). 결과 수는 검색창 안 오른쪽 끝 */
#tabStock #filterRow{padding:8px 10px 0;border-bottom:none}
#tabStock #filterRow .qwrap{width:100%}
#tabStock #filterRow #q{height:32px;border-radius:9px;background:var(--card);border-color:var(--line2)}
#tabStock #filterRow>.grow,#tabStock #tabSum,#tabStock #sortLbl,#tabStock #sortSeg{display:none}
/* 보기 4분할 전폭 → 위치 3분할 + 정렬 2분할 한 줄 (시안: 세로 gap 6 · padding 8 10) */
.stk-filt{flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px}
.stk-view .stk-seg{flex:1}
.stk-seg.v4 button{flex:1} /* 좁은 폭은 시안대로 전폭 4분할 */
.stk-ls .l3{max-width:none}
.stk-ls .s2{margin-left:0;flex:none}
/* 행 = 2줄: 1줄 이름·종류(·−n) ····· 합계 / 2줄 가방·창고 │ 쓰이는 곳 ····· 담기 (시안: grid 1fr auto · gap 4 10 · padding 8 10) */
.stk-r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm tt" "l2 ad";gap:4px 10px;height:auto;padding:8px 10px}
.stk-r.hd{display:none}
.stk-l2{display:flex;grid-area:l2;align-items:center;gap:8px;min-width:0;font-size:10px;color:var(--sub2);white-space:nowrap;overflow:hidden}
.stk-b,.stk-s{text-align:left;font-family:var(--font);color:var(--sub2);flex:none}
.stk-b i,.stk-s i{display:inline;font-style:normal}
.stk-b b,.stk-s b{font-family:var(--mono);color:var(--fg2)}
.stk-vr{display:inline;color:var(--line3)}
.stk-us{flex:1}
.stk-ad{justify-self:end;text-align:right}
.stk-foot{padding:8px 10px 10px}
}