body.lobby-active #settings-button{display:none!important}
body #bag{width:min(460px,94vw);max-height:92dvh;padding:12px;box-sizing:border-box}
body #bag-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:6px 0;padding:0;list-style:none}
body #bag-items>li{display:block;min-width:0;padding:0;border:0;margin:0}
body #bag-items .item-slot,body #bag-items .empty-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;height:64px;min-width:0;width:100%;box-sizing:border-box;padding:4px}
body #bag-items>li.empty-slot{height:64px}
body #bag-items .item-icon{transform:scale(.75);margin:-4px;flex:none}
body #bag-items .item-name{max-width:100%;font-size:12px;line-height:1.1;min-height:13px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
body #bag-items .item-count{position:absolute;right:5px;top:3px;font-size:12px;line-height:1.1;padding:1px 2px;background:var(--ui-panel-a22-ui-bag-items-item-count-background);border-radius:3px;color:var(--ui-panel-a22-ui-bag-items-item-count-text)}
body.pack-ui #bag-items .item-count{font-size:12px}
body #bag-items .item-slot>small{display:none}
body #bag-empty{text-align:center;font-size:12px;margin:4px 0;color:var(--ui-panel-a22-ui-bag-empty-text)}
body #bag>.panel-heading{margin:0;padding:0 0 4px}body #bag>.panel-heading::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:inherit}
body #bag>.panel-heading h2{margin:0}
body #bag #give-box{font-size:11px;margin:8px 0 0;padding:8px}
body #bag #give-box small{font-size:10px}
@media(orientation:landscape) and (max-height:500px){
 body #bag{width:min(660px,94vw);display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.65fr);column-gap:12px;padding:10px;max-height:94dvh}
 body #bag>.panel-heading{grid-column:1/-1}
 body #bag-empty{grid-column:1}
 body #bag #give-box{grid-column:2;grid-row:2/4;align-self:start;margin-top:6px}
 body #bag-items{grid-column:1;gap:4px}
 body #bag-items .item-slot,body #bag-items>li.empty-slot{height:54px;min-height:54px}
 body #bag-items .item-slot>small{display:none}
}
/* F227: 가로 폰 가방 주기 — 아이템 고르기를 한 줄 전체로(이름 잘림 줄임) · 주기 칸이 아이템 줄까지 걸쳐 왼쪽 탭·칸이 안 늘어남 */
@media(orientation:landscape) and (max-height:500px){body #bag #give-box{grid-row:2/5}body #bag #give-box>label:first-of-type{grid-column:1/-1}}
/* A355: 12px auxiliary type (a36.css quick-empty-label); portrait 64px slots retain two lines: 52px inner >= icon 24 + gap 1 + text 26.4. */
@media(orientation:portrait){body:not(.desktop-ui) #bag-items .item-slot{justify-content:flex-start;gap:1px;padding-top:1px;padding-bottom:1px}body:not(.desktop-ui) #bag-items .item-name{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}}
/* F234: 가방 칸 이름 두 줄 줄바꿈 — ko 는 낱말 사이에서만(한 낱말이 칸보다 길 때만 끊음), ja 는 line-break:strict(작은 가나·"ー"·"。"·"、" 가 줄 맨 앞에 안 옴, ja keep-all 금지 F128). 세로 폰만 · 가로 폰·PC 한 줄 … 그대로 */
@media(orientation:portrait){html:lang(ko) body:not(.desktop-ui) #bag-items .item-name{word-break:keep-all;overflow-wrap:anywhere}}
@media(orientation:portrait){html:lang(ja) body:not(.desktop-ui) #bag #bag-items .item-name{word-break:normal!important;line-break:strict}}
/* F234: 가방 "동료에게 건네기" 안내 — ko 만 낱말 사이에서 줄바꿈 */
html:lang(ko) body #bag #give-box small{word-break:keep-all;overflow-wrap:break-word}
/* A306: reserve rows for tools and tabs; only item rows scroll in landscape. */
@media(orientation:landscape) and (max-height:500px){
 html body.pack-ui #bag{box-sizing:border-box;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:10px 14px;overflow:hidden;grid-template-rows:auto auto auto minmax(0,1fr)}
 html body #bag>.panel-heading{grid-column:1/-1;grid-row:1;min-height:44px;padding:0;gap:8px}
 html body #bag .bag-tools{grid-column:1;grid-row:2;margin:4px 0;gap:4px}
 html body #bag .bag-tools button{padding:6px 8px;min-height:44px;margin:0}
 html body #bag #bag-capacity{flex-basis:100%;margin:0}
 html body #bag #bag-tabs{grid-column:1;grid-row:3;margin:0 0 4px;min-height:44px}
 html body #bag #bag-tabs button{padding:6px 8px;min-height:44px}
 html body #bag #bag-items{grid-column:1;grid-row:4;overflow:auto;min-height:0;align-content:start;margin:0;scrollbar-gutter:stable}
 html body #bag #bag-empty{grid-column:1;grid-row:4}
 html body #bag #give-box{grid-column:2;grid-row:2/5;max-height:100%;box-sizing:border-box;overflow:auto;margin:4px 0 0}
 html body #bag #bag-use{grid-column:2;grid-row:2/5;min-height:0;max-height:100%;box-sizing:border-box;overflow:auto;align-self:start}
 html body #bag #bag-use:not([hidden])~#give-box{visibility:hidden}
}
/* F349: 세로 폰 ko 가방 이름 — 크롬은 가운데 맞춘 둘째 줄 뒤에 말줄임표를 붙여 칸 밖으로 최대 5px 넘김. 상자만 오른쪽으로 6px 넓히고 같은 폭 float 로 줄 폭은 그대로 두어 … 이 칸 안에 들게(줄바꿈·글자 자리 그대로). 강화 칸(이름이 flex)·재료 칸(이름 밑 안내 글)은 빼고. */
@media(orientation:portrait){html:lang(ko) body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name{margin-right:-6px;max-width:calc(100% + 6px)}html:lang(ko) body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name::before{content:"";float:right;width:6px;height:2.2em}}
/* F353: 위 F349 규칙을 세로 폰 ja 가방 이름에도 한 벌 더 — 둘째 줄 「…」 셋째 점이 60px 상자 끝에서 잘리던 것(11/289)이 칸 안에 듦. 줄바꿈(F234 ja 줄·F128 그대로)·첫 글자 자리 그대로, ko 줄은 바이트 그대로. */
@media(orientation:portrait){html:lang(ja) body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name{margin-right:-6px;max-width:calc(100% + 6px)}html:lang(ja) body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name::before{content:"";float:right;width:6px;height:2.2em}}
/* A367: opacity only; closing original panels are inert and never intercept input. */
.panel-fade-closing,.panel-fade-closing *{pointer-events:none!important}
#appearance-shop-panel.panel-fade-open::backdrop{animation:panel-fade-in 100ms ease-out}
@keyframes panel-fade-in{from{opacity:0}to{opacity:1}}
/* A435: 세로 일반 가방만 끝을 두 줄에 보존. 윗줄은 앞을 … 로 줄이고, 다른 화면에서는 원래 한 줄 글 흐름 그대로. */
@media(orientation:portrait){body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name:has(>.bag-name-head){width:calc(100% + 6px)}body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name>.bag-name-head,body:not(.desktop-ui) #bag-items .item-slot:not([data-forge-stage]):not(.material) .item-name>.bag-name-tail{display:block;max-width:calc(100% - 6px);white-space:nowrap;overflow:hidden}body:not(.desktop-ui) #bag-items .bag-name-head{direction:rtl;text-overflow:ellipsis}body:not(.desktop-ui) #bag-items .bag-name-head>span{direction:ltr;unicode-bidi:isolate}}
/* F439: one fixed cell size, including empty cells; use headings are not slots. */
html body #bag #bag-items{--bag-cell-height:88px;grid-auto-rows:auto}
html body #bag #bag-items .item-slot,html body #bag #bag-items>li.empty-slot{height:var(--bag-cell-height);min-height:var(--bag-cell-height);max-height:var(--bag-cell-height);overflow:hidden}
html body #bag #bag-items>li.bag-use-heading{grid-column:1/-1;height:auto;min-height:0;padding:4px 0 0}
html body #bag #bag-items .bag-use-heading h3{margin:0;font-size:12px;line-height:1.5;color:var(--ui-panel-muted)}
html body #bag #bag-items .material .item-name{min-height:0;max-width:100%;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden}
html body #bag #bag-items .item-slot.material{padding:4px;gap:1px}
@media(orientation:portrait){html body:not(.desktop-ui) #bag #bag-items{--bag-cell-height:64px}}
@media(orientation:landscape) and (max-height:500px){html body:not(.desktop-ui) #bag #bag-items{--bag-cell-height:54px}}
/* F240: 한국어 화면 전체 — 모든 HTML 글을 낱말 사이에서만 줄바꿈(여/행자의 같은 꺾임 막음), 한 낱말이 칸보다 길 때만 break-word 로 끊어 안 넘침. 일본어는 안 걸림(F128) */
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}