html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
button,button *,a,summary,#stick,#knob{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input,textarea{user-select:text;-webkit-user-select:text;font-size:16px!important}
#lobby{top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);max-height:none;height:fit-content;max-height:calc(100dvh - 24px);overscroll-behavior:contain}
body.editing-text #lobby{top:calc(var(--visible-top) + 8px);bottom:auto;max-height:calc(var(--visible-height) - 16px)}
body.editing-text #social-panel{top:calc(var(--visible-top) + 8px);bottom:auto;max-height:calc(var(--visible-height) - 16px)}
body.editing-text #chat-log{height:48px}body.editing-text #emote-list{display:none}
#bag{padding-top:0}#bag>.panel-heading,#quest-panel>.panel-heading{position:sticky;top:0;background:var(--ui-panel-a12-bag-panel-heading-quest-panel-background);z-index:1;padding:10px 0;gap:12px}#bag h2,#quest-panel h2{margin:0;flex:1;min-width:0}#bag-close,#quest-close{flex-shrink:0;width:auto;margin:0}
/* A113: 좁은 폰(320·360)에서 의뢰 창 제목이 한 글자씩 세로로 꺾이지 않게 — 제목은 한 줄로 두고, 그래도 넘치면 단추가 다음 줄로 간다. 400px 이하 간격 8px, 380px 이하 제목 16px·단추 13px, 340px 이하 단추 12px. */
#quest-panel>.panel-heading{flex-wrap:wrap;row-gap:6px}#quest-panel h2{white-space:nowrap;min-width:max-content}@media(max-width:400px){#quest-panel>.panel-heading{column-gap:8px}}@media(max-width:380px){#quest-panel h2{font-size:16px}#quest-panel>.panel-heading>button{font-size:13px;padding:6px 9px}}@media(max-width:340px){#quest-panel>.panel-heading>button{font-size:12px;padding:6px 8px}}
.quest-card summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;touch-action:manipulation}.quest-card summary h3{margin:0;min-width:0;overflow-wrap:anywhere}.quest-card summary .quest-state{flex-shrink:0;white-space:nowrap}.quest-card summary::after{content:'▾'}.quest-card:not([open]) summary::after{content:'▸'}.quest-card:not([open]){opacity:.85}
.track-quest{font-size:12px;padding:6px 10px;margin-top:6px}.track-quest.active{background:var(--ui-panel-a12-track-quest-active-background);border-color:var(--ui-panel-a12-track-quest-active-border-color)}
/* F475: 안 눌린 「길 안내」는 흰 바탕 + 진한 테두리 — 카드(soft)·대화 창(흰색) 어느 쪽 위에서도 단추로 보이게. A285 창 단추 규칙(ui-skin.css)이 id 를 써서 위 .track-quest 를 덮으므로 같은 창 id 로 한 단계 세게 씀. 눌린 상태(.active)는 위 규칙 그대로. */
html body :is(#quest-panel,#map-panel,#dialogue) .track-quest:not(.active){background:var(--ui-panel-a12-track-quest-background);border-color:var(--ui-panel-a12-track-quest-border-color)}
#dialogue-portrait{width:64px;height:64px;float:left;margin:0 12px 8px 0;background:var(--ui-panel-a12-dialogue-portrait-background);border-radius:8px;image-rendering:pixelated}#dialogue-text{min-height:64px}
.map-people{display:flex;justify-content:center;gap:4px;margin-top:3px}.party-dot{font-size:11px;color:var(--ui-panel-a12-party-dot-text);line-height:1}.party-dot.self{color:var(--ui-panel-a12-party-dot-self-text)}.map-place.quest-target{border:2px dashed var(--ui-panel-a12-map-place-quest-target-border)}
#party-list{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11px;margin-top:10px}#party-list span{max-width:100%;overflow-wrap:anywhere}
#quest-tracker{align-items:center;gap:8px;background:var(--ui-hud-a12-quest-tracker-background);border:1px solid var(--ui-hud-a12-quest-tracker-border);border-radius:10px;padding:5px 9px;font-size:11px}#quest-tracker button{padding:4px 8px;font-size:11px;white-space:nowrap}#quest-tracker p{margin:0}
#give-status{grid-column:1/-1;margin:0}#world-map{min-width:760px}.map-place{width:84px}
@media(orientation:landscape) and (max-height:500px){
 #stick{left:max(30px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:100px;height:100px}
 #sword-attack{right:max(30px,env(safe-area-inset-right));bottom:24px;width:76px;height:76px}
 #evade{right:max(130px,calc(env(safe-area-inset-right) + 100px));bottom:24px;width:60px;height:60px}
 #skill-button{right:max(30px,env(safe-area-inset-right));bottom:147px;width:76px;height:48px}
 body.online #interact{right:max(125px,calc(env(safe-area-inset-right) + 95px));bottom:152px}
 #health{right:max(30px,env(safe-area-inset-right));bottom:113px}#hp-bar{right:max(30px,env(safe-area-inset-right));bottom:108px;width:76px}
 #quest-tracker{font-size:10px}
 #world-map{height:285px}#view-button{font-size:11px;padding:7px 8px}
}
@media(orientation:portrait){#view-button{font-size:10px;padding:6px}header nav{flex-wrap:wrap;justify-content:flex-end;max-width:60vw}}