#growth-dialog{width:min(440px,90vw);max-height:78dvh;overflow:auto;background:var(--ui-panel-a48-growth-dialog-background);color:var(--ui-panel-a48-growth-dialog-text);border:1px solid var(--ui-panel-a48-growth-dialog-border);border-radius:16px;padding:20px;z-index:1200}#growth-dialog::backdrop{background:var(--ui-panel-a48-growth-dialog-background-2)}#growth-dialog button{min-height:40px;padding:8px 14px;margin:4px;border-radius:10px}#growth-dialog .growth-close{float:right}#growth-dialog .gain{color:var(--c-success-a48-growth-dialog-gain-text)}#growth-dialog .loss{color:var(--c-danger-a48-growth-dialog-loss-text)}.showcase-choice{display:flex;align-items:center;width:100%;gap:8px}.bag-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px}.bag-tools button{font-size:12px;padding:7px}#bag-capacity{font-size:12px;margin-right:auto}.shop-actions{display:flex;gap:6px}.shop-actions button{flex:1}#skill3-button{position:fixed;z-index:8;right:142px;bottom:calc(var(--hud-bottom,16px) + 84px);width:50px;height:50px;min-height:0;box-sizing:border-box;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;line-height:1.1;border-radius:12px;font-size:10px;background:conic-gradient(var(--ui-hud-a48-skill3-button-background) calc(var(--cd,0)*1turn),var(--ui-hud-a48-skill3-button-background-2) 0);color:var(--ui-hud-a48-skill3-button-text);border:1px solid var(--ui-hud-a48-skill3-button-border);touch-action:none}#skill3-button small{display:block}#mana-hud{position:fixed;right:22px;bottom:calc(var(--hud-bottom,16px) + 140px);width:170px;height:13px;border-radius:6px;overflow:hidden;background:var(--ui-hud-a48-mana-hud-background);z-index:7;color:var(--ui-hud-a48-mana-hud-text);font-size:10px;text-align:center;pointer-events:none}#mana-fill{position:absolute;inset:0;background:var(--c-resource-a48-mana-fill-background);transform-origin:left}#mana-text{position:relative}.status-equip{grid-template-columns:repeat(4,minmax(0,1fr))!important}.equip-name{font-size:11px}#exit-choice{left:50%!important;right:auto!important;top:46%!important;bottom:auto!important;transform:translate(-50%,-50%);width:min(340px,84vw)!important;max-height:40dvh;z-index:30;padding:14px;font-size:15px;background:var(--ui-hud-a48-exit-choice-background);color:var(--ui-hud-a48-exit-choice-text);border-radius:12px;pointer-events:auto}.quest-pin{color:var(--ui-panel-a48-quest-pin-text)!important;background:var(--ui-panel-a48-quest-pin-background)!important;border:2px solid var(--ui-panel-a48-quest-pin-border)!important}.desktop-ui #skill3-button{width:76px;height:76px;right:220px;bottom:132px;font-size:12px}.desktop-ui #mana-hud{right:32px;bottom:214px;width:264px}.desktop-ui .bag-tools button{font-size:15px}

/* F92: 칭호 창(#titles-dialog) · 정보창 칭호 칸 · 새 칭호 점. 320px 폭에서도 가로로 넘치지 않게 글은 줄을 바꾼다. */
#titles-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:min(80dvh,calc(100dvh - 24px));overflow:auto;overscroll-behavior:contain;background:var(--ui-panel-a48-titles-dialog-background);color:var(--ui-panel-a48-titles-dialog-text);border:1px solid var(--ui-panel-a48-titles-dialog-border);border-radius:16px;padding:14px}
#titles-dialog::backdrop{background:var(--ui-panel-a48-titles-dialog-background-2)}
#titles-dialog .titles-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#titles-dialog h2{margin:0;font-size:18px}
#titles-dialog .titles-close{min-height:40px;margin:0;padding:8px 14px;border-radius:10px}
#titles-dialog .titles-current{margin:8px 0 10px;font-size:13px;overflow-wrap:anywhere}
#titles-dialog .titles-list{display:grid;gap:6px}
#titles-dialog .title-row{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;margin:0;padding:8px 10px;border:1px solid var(--ui-panel-a48-titles-dialog-title-row-border);border-image:none;border-radius:10px;background:var(--ui-panel-a48-titles-dialog-title-row-background);color:var(--ui-panel-a48-titles-dialog-title-row-text);text-align:left;text-shadow:none;font-weight:400;opacity:1}
#titles-dialog .title-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#titles-dialog .title-main b{font-size:14px;overflow-wrap:anywhere}
#titles-dialog .title-main small{font-size:11px;color:var(--ui-panel-a48-titles-dialog-title-main-text);overflow-wrap:anywhere}
#titles-dialog .title-progress{display:flex;flex-direction:column;gap:3px;margin-top:3px;min-width:0}
#titles-dialog .title-progress-count{font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums}
#titles-dialog .title-progress-bar{display:block;width:100%;height:4px;border-radius:2px;overflow:hidden;background:var(--ui-panel-a48-titles-dialog-title-progress-bar-background)}
#titles-dialog .title-progress-fill{display:block;height:100%;background:var(--ui-panel-a48-titles-dialog-title-progress-fill-background)}
#titles-dialog .title-action{flex:none;padding:3px 8px;border-radius:8px;background:var(--ui-panel-a48-titles-dialog-title-action-background);font-size:12px;white-space:nowrap}
#titles-dialog .title-row.equipped{border-color:var(--ui-panel-a48-titles-dialog-title-row-equipped-border-color);box-shadow:inset 0 0 0 1px var(--ui-panel-a48-titles-dialog-title-row-equipped-shadow);background:var(--ui-panel-a48-titles-dialog-title-row-equipped-background)}
#titles-dialog .title-row.equipped .title-action{background:var(--ui-panel-a48-titles-dialog-title-row-equipped-background-2);color:var(--ui-panel-fg)}

#titles-dialog .title-new{flex:none;padding:1px 6px;border-radius:9px;background:var(--ui-panel-a48-titles-dialog-title-new-background);color:var(--c-warning-a48-titles-dialog-title-new-text);font:normal 700 12px system-ui;white-space:nowrap}
body #status-head .titles-button{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0;min-height:36px;margin:6px 0 0;padding:6px 10px;font-size:12px;text-align:left}
body #status-head .titles-button .titles-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.title-dot{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ui-panel-a48-title-dot-background);box-shadow:0 0 0 2px var(--ui-panel-a48-title-dot-shadow)}
.title-dot[hidden]{display:none}
#status-button.has-new-title{position:relative}
#status-button.has-new-title::after{content:'';position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--ui-panel-a48-status-button-has-new-title-background);box-shadow:0 0 0 2px var(--ui-panel-a48-status-button-has-new-title-shadow)}

#skill3-button[hidden]{display:none}.desktop-ui #skill3-button{padding-bottom:16px}.desktop-ui #skill3-button::before{content:attr(data-key);position:absolute;bottom:3px;left:0;right:0;font:11px system-ui;text-align:center}body #map-panel #world-map .region-map-marker.quest-pin i{font:700 10.5px system-ui;color:var(--ui-panel-a48-map-panel-world-map-region-map-marker-text);text-align:center}body #map-panel #world-map .region-map-marker.quest-pin.quest-progress i{color:var(--ui-panel-muted)}

/* A60: each learned tier is one A/B pair. B buttons exist only when the server
   includes that progress field, so warrior/archer never get empty controls. */
body #skill-controls{position:fixed;z-index:8;right:max(22px,calc(env(safe-area-inset-right) + 8px));bottom:calc(var(--hud-bottom,16px) + 84px);display:flex;align-items:center;gap:8px;pointer-events:none}
body #skill-controls[hidden]{display:none!important}
body #skill-controls .skill-pair{display:flex;align-items:center;gap:4px;pointer-events:auto}
body #skill-controls button{position:relative!important;right:auto!important;bottom:auto!important;width:50px!important;height:50px!important;min-width:0;min-height:0;padding:3px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden;border:2px solid var(--ui-hud-a48-skill-controls-border)!important;border-image:none!important;border-radius:50%!important;background:var(--ui-hud-a48-skill-controls-background)!important;color:var(--ui-hud-a48-skill-controls-text)!important;font-size:9px!important;line-height:1.05;touch-action:none}
body #skill-controls button[data-skill-slot$="B"]{background:var(--ui-hud-a48-skill-controls-background-2)!important;border-color:var(--ui-hud-a48-skill-controls-border-color)!important}
body #skill-controls button[hidden]{display:none!important}
body #skill-controls button::after{content:'';position:absolute;z-index:0;inset:0;border-radius:50%;background:conic-gradient(var(--ui-hud-a48-skill-controls-background-3) calc(var(--cd,0)*100%),transparent 0);pointer-events:none;opacity:0}
body #skill-controls button.cooling::after{opacity:1}
/* A226: only the button and its painted overlay need the changing cooldown.
   Browsers without @property retain the original inherited custom property. */
@property --cd{syntax:"<number>";inherits:false;initial-value:0}
body #evade::after,body #skill-controls button::after{--cd:inherit}
body #skill-controls button>span,body #skill-controls button>small,body #skill-controls .skill-variant{position:relative;z-index:1;max-width:43px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #skill-controls .skill-variant{position:absolute;top:2px;left:5px;font:700 8px system-ui;color:var(--ui-hud-a48-skill-controls-skill-variant-text)}
body #skill-controls button[data-skill-slot$="B"] .skill-variant{color:var(--ui-hud-a48-skill-controls-skill-variant-text-2)}
body #skill-controls button.mana-low{opacity:.38}
/* F103: 이름은 말줄임(…) 없이 두 줄까지 — skill-label.mjs 가 --skill-fs 를 12→9px 로 맞춘다. 한국어는 낱말 가운데서 안 끊는다. !important 는 a20.css 옛 #skill-button #skill-name(42px·9px) 을 이기려고. A113: 두 줄은 길이를 고르게(回転斬/り → 回転/斬り, text-wrap:balance — 줄 수·글자 크기는 그대로). */
body #skill-controls .skill-pair>button[data-skill-slot]>span[id]{max-width:40px!important;white-space:normal;text-wrap:balance;text-overflow:clip;text-align:center;line-height:1.1;font-size:var(--skill-fs,12px)!important}
body #skill-controls .skill-pair>button[data-skill-slot]>span[id]:lang(ko){word-break:keep-all}
body #skill-controls .skill-pair>button[data-skill-slot]>span[id]:lang(ja){line-break:strict} /* A119: マルチシ/ョット 처럼 작은 가나·ー 앞에서 안 끊는다(a18.css 알림과 같은 금칙) */
body.desktop-ui #skill-controls .skill-pair>button[data-skill-slot]>span[id]{max-width:60px!important}
body:not(.desktop-ui) #skill-controls .skill-pair>button[data-skill-slot]{padding:2px 0!important}
/* 남은 시간·잠김(🔒 Lv.20)은 버튼 가운데에 겹쳐 띄우고 이름은 흐리게 — 둥근 버튼에 두 줄 이름 밑 셋째 줄 자리가 없다(데스크톱도 같게). */
body #skill-controls .skill-pair>button:is(.cooling,.locked)>small[id]{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;max-width:none;padding:0 7px;white-space:normal;text-overflow:clip;text-align:center;line-height:1.1;font-weight:700;text-shadow:0 1px 2px var(--ui-hud-a48-skill-controls-skill-pair-cooling-text-shadow),0 0 4px var(--ui-hud-a48-skill-controls-skill-pair-cooling-text-shadow-2)}
body #skill-controls .skill-pair>button:is(.cooling,.locked)>:is(span[id],.skill-variant){opacity:.22}
body.desktop-ui #skill-controls{right:32px;bottom:132px;gap:12px}
body.desktop-ui #skill-controls .skill-pair{gap:6px}
body.desktop-ui #skill-controls button{width:76px!important;height:76px!important;padding:5px 3px 18px!important;font-size:12px!important}
body.desktop-ui #skill-controls button>span,body.desktop-ui #skill-controls button>small{max-width:66px}
/* A464: mobile A/B labels share the flex column; keep the sprite viewport 28px. */
body #skill-controls .skill-pair>button[data-skill-slot]>span.skill-icon{display:block;flex:none;width:28px;height:28px;background-image:url('./icons/skills.svg');background-size:448px 28px;background-repeat:no-repeat}
body #skill-controls span.skill-icon[data-icon="0"]{background-position:0 0}
body #skill-controls span.skill-icon[data-icon="1"]{background-position:-28px 0}
body #skill-controls span.skill-icon[data-icon="2"]{background-position:-56px 0}
body #skill-controls span.skill-icon[data-icon="3"]{background-position:-84px 0}
body #skill-controls span.skill-icon[data-icon="4"]{background-position:-112px 0}
body #skill-controls span.skill-icon[data-icon="5"]{background-position:-140px 0}
body #skill-controls span.skill-icon[data-icon="6"]{background-position:-168px 0}
body #skill-controls span.skill-icon[data-icon="7"]{background-position:-196px 0}
body #skill-controls span.skill-icon[data-icon="8"]{background-position:-224px 0}
body #skill-controls span.skill-icon[data-icon="9"]{background-position:-252px 0}
body #skill-controls span.skill-icon[data-icon="10"]{background-position:-280px 0}
body #skill-controls span.skill-icon[data-icon="11"]{background-position:-308px 0}
body #skill-controls span.skill-icon[data-icon="12"]{background-position:-336px 0}
body #skill-controls span.skill-icon[data-icon="13"]{background-position:-364px 0}
body #skill-controls span.skill-icon[data-icon="14"]{background-position:-392px 0}
body #skill-controls span.skill-icon[data-icon="15"]{background-position:-420px 0}
body.desktop-ui #skill-controls .skill-variant{top:5px;left:7px;font-size:10px}
/* Every skill slot, including dynamically created B buttons, shows its bound key. */
body.desktop-ui #skill-controls button::before{content:attr(data-key);position:absolute;z-index:2;bottom:5px;left:0;right:0;text-align:center;font:700 12px/1.2 system-ui;color:var(--ui-hud-a48-skill-controls-text);opacity:1;pointer-events:none;text-shadow:0 1px 2px var(--ui-hud-a48-skill-controls-text-shadow)}
@media(orientation:portrait){
 body:not(.desktop-ui) #skill-controls{display:grid;grid-template-columns:repeat(3,50px);gap:6px;right:max(12px,env(safe-area-inset-right));bottom:calc(var(--hud-bottom,18px) + 84px)}
 body:not(.desktop-ui) #skill-controls .skill-pair{display:contents}
 body:not(.desktop-ui) #skill-controls button{pointer-events:auto}
 body:not(.desktop-ui) #skill-controls [data-skill-slot="skill"]{grid-area:2/3}
 body:not(.desktop-ui) #skill-controls [data-skill-slot="skill2"]{grid-area:2/2}
 body:not(.desktop-ui) #skill-controls [data-skill-slot="skill3"]{grid-area:2/1}
 body:not(.desktop-ui) #skill-controls [data-skill-slot="skillB"]{grid-area:1/2/2/4;justify-self:center}
 body:not(.desktop-ui) #skill-controls [data-skill-slot="skill2B"]{grid-area:1/1/2/3;justify-self:center}
 body:not(.desktop-ui) #activity-actions{bottom:calc(var(--hud-bottom,18px) + 262px)}
}
/* A132: 가방 위 가진 골드 한 줄, 탭 단추의 사용/칸, 골드 모자라면 넓히기 흐리게, 기타 탭 '재료' 표시(못 누름) */
/* 첫 줄 = 가진 골드 + 지금 탭 칸, 둘째 줄 = 넓히기·자랑하기(탭을 바꿔도·KO/JA 모두 같은 자리) */
html body #bag .bag-tools #bag-gold{flex:1 1 auto;order:0;font-size:13px;font-weight:700;line-height:1.3}
html body #bag .bag-tools #bag-capacity{order:1;margin:0 0 0 auto}
html body #bag .bag-tools::after{content:'';order:2;flex:0 0 100%;height:0;margin-top:-6px}
html body #bag .bag-tools>button{order:3}
html body #bag .bag-tools #bag-sort{min-height:44px;white-space:nowrap;overflow-wrap:normal}
html body #bag #give-box :is(input,select){min-height:44px}
html body.desktop-ui #bag .bag-tools #bag-gold{font-size:16px}
html body #bag-tabs button .bag-tab-count{display:block;font-size:10px;line-height:1.2;color:var(--ui-panel-a48-bag-tabs-bag-tab-count-text);opacity:.9;white-space:nowrap}
html body.desktop-ui #bag-tabs button .bag-tab-count{font-size:12px}
html body #bag-items .item-slot.material{height:auto;min-height:118px;padding-block:10px;gap:6px}
html body #bag-items .item-slot.material>small{position:static;display:block;flex:none;margin:0;max-width:100%;font-size:10px;line-height:1.3;color:var(--ui-panel-muted);opacity:1}
/* A273: recent companions reuse friend rows and stay inside the dialog. */
#friends-recent-section[hidden]{display:none!important}
#friends-recent-list{list-style:none;margin:0;padding:0;overflow-wrap:anywhere}
#friends-recent-section h3{margin:16px 0 4px}
.friends-recent-note{display:block;font-size:.85em;color:var(--ui-panel-a48-friends-recent-note-text)}
#friends-recent-list .friends-presence::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ui-panel-a48-friends-recent-list-friends-presence-background)}
#friends-recent-list .friends-online .friends-presence::before{background:var(--ui-panel-a48-friends-recent-list-friends-online-friends-presence-background)}
#menu-panel #install-open{min-height:44px;min-width:0;white-space:normal;overflow-wrap:anywhere}#install-panel{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:80dvh;overflow:auto;background:var(--ui-panel-a48-install-panel-background);color:var(--ui-panel-a48-install-panel-text);border:1px solid var(--ui-panel-a48-install-panel-border);border-radius:16px;padding:16px;font-size:var(--readable-font-size,16px)}#install-panel::backdrop{background:var(--ui-panel-a48-install-panel-background-2)}#install-panel .panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}#install-panel h2{margin:0;font-size:1.15em;min-width:0}#install-panel button{flex:none;min-height:44px}#install-panel p{line-height:1.6;overflow-wrap:anywhere}
/* A275: goals dialog follows the title dialog with readable, wrapping sections. */
#menu-goals[hidden]{display:none!important}.goals-dot{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--ui-panel-a48-goals-dot-background)}.goals-dot[hidden]{display:none}
#goals-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:var(--ui-panel-a48-goals-dialog-background);color:var(--ui-panel-a48-goals-dialog-text);border:1px solid var(--ui-panel-a48-goals-dialog-border);border-radius:16px;padding:16px;overflow-wrap:anywhere}
#goals-dialog::backdrop{background:var(--ui-panel-a48-goals-dialog-background-2)}#goals-dialog .panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}#goals-dialog h2{margin:0;font-size:18px}#goals-dialog button{min-height:44px;margin:0}
#goals-dialog .goals-section{padding:12px 0;border-bottom:1px solid var(--ui-panel-a48-goals-dialog-goals-section-border-bottom)}#goals-dialog h3{margin:0 0 8px;font-size:16px}#goals-dialog p{margin:6px 0;line-height:1.5;font-size:14px}#goals-dialog .goals-count,#goals-dialog .goals-mine{font-variant-numeric:tabular-nums}#goals-dialog .goals-region,#goals-dialog .goals-status{font-weight:700;color:var(--ui-panel-a48-goals-dialog-goals-region-goals-dialog-text)}
#goals-dialog .goals-bar{height:6px;border-radius:3px;overflow:hidden;background:var(--ui-panel-a48-goals-dialog-goals-bar-background)}#goals-dialog .goals-fill{display:block;height:100%;background:var(--ui-panel-a48-goals-dialog-goals-fill-background)}#goals-dialog #goals-reset{margin-top:12px;font-size:12px;color:var(--ui-panel-a48-goals-dialog-goals-reset-text)}
/* A278: keep the dialog heading and ranking actions inside their own rows. */
#growth-dialog{box-sizing:border-box;max-width:calc(100vw - 24px)}
#growth-dialog .growth-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#growth-dialog .growth-heading h2{min-width:0;margin:0;overflow-wrap:anywhere}
#growth-dialog .growth-close{float:none;flex:none;min-height:44px;margin:0}
#growth-dialog .a264-ranking-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:8px 0}
#growth-dialog .a264-ranking-row>span{min-width:0;overflow-wrap:anywhere}
#growth-dialog .a264-ranking-row>button{min-height:44px;margin:0;justify-self:end}
/* A283: a single, equal-height action row, even with Japanese labels. */
html body #bag .bag-tools>button{flex:1 1 0;min-width:0;min-height:44px;box-sizing:border-box;align-self:stretch;margin:0;white-space:normal;overflow-wrap:anywhere}
html body #bag .bag-tools :is(#bag-sort,#bag-expand){padding-inline:4px;font-size:12px;white-space:nowrap;overflow-wrap:normal}
html body #bag .bag-tools :is(#bag-sort,#bag-expand){flex:0 0 auto;width:auto}
/* A293: each action keeps its label on one line, including showcase. */
html body.pack-ui #bag .bag-tools{gap:4px;margin-inline:0}
html body.pack-ui #bag .bag-tools :is(#bag-sort,#bag-expand,#bag-showcase){flex:1 0 auto;width:auto;padding-inline:2px;font-size:12px;white-space:nowrap;overflow-wrap:normal}
#titles-dialog .title-row:is(.equipped,:active,.pressed) .title-main small{color:var(--ui-panel-acc-fg)}
html body #bag-items .item-slot:is(:active,.pressed)>small{color:var(--ui-panel-acc-fg)}
html body #bag-tabs button:is(:active,.pressed) .bag-tab-count{color:var(--ui-panel-acc-fg);opacity:1}
#titles-dialog .title-row.owned:not(.equipped):is(:active,.pressed) .title-action{color:var(--ui-panel-fg)}
/* F232: ja 칭호 창 "새 칭호" 표시도 일본어 글꼴(위 font: normal 700 10px system-ui 를 ja 에서만 덮음) */
:root:lang(ja) #titles-dialog .title-new{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif}