/* Absolute roles: nested .muted/.qt never multiply their parent's font size. */
:root {
  --ui-note:12px; --ui-label:13px; --ui-body:14px; --ui-heading:15px;
  --ui-title:18px; --ui-display:22px; --hud-left-bottom:100px;
}
:root[data-ui-text="small"] {
  --ui-note:11px; --ui-label:12px; --ui-body:13px; --ui-heading:14px;
  --ui-title:16px; --ui-display:20px;
}
:root[data-ui-text="large"] {
  --ui-note:14px; --ui-label:15px; --ui-body:16px; --ui-heading:17px;
  --ui-title:20px; --ui-display:24px;
}
html,body{font-size:var(--ui-body)}
button,input,select,textarea,summary{min-height:44px}
input[type=checkbox],input[type=radio]{min-height:0}
.guildcheck,.guildadmin-check,.art-check,.art-layers label{min-height:44px}
button,summary{overflow-wrap:anywhere}
button{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
/* CSS pixel geometry, not zoom/transform: keep world coordinates unchanged. */
#pbody,#admbody,.support-card,#start .box,#link .box{overflow-wrap:anywhere}
#start{overflow-y:auto;overflow-x:hidden;align-items:start;overscroll-behavior:contain}
#start .wrap{margin-block:auto;overflow-wrap:anywhere;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
#start .credit{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 9px;margin-top:12px}
#start .credit a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:0;max-width:100%}
#stars{pointer-events:none}
@media(max-height:760px){
  #start .wrap{padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  #start .tag{line-height:1.5;margin-bottom:12px}
  #start .tag b.hook{line-height:1.5;margin-bottom:6px}
  #start .logo .en{letter-spacing:.3em;text-indent:.3em;margin-top:6px}
  #start .rule{margin:10px auto}
}
.kv{gap:8px;flex-wrap:wrap;align-items:baseline}
.kv>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.sec h3{gap:6px;flex-wrap:wrap}
.item .qt,.item button,.row button{white-space:normal;overflow-wrap:anywhere}
.item .qt{min-width:0;max-width:100%}
.row{min-width:0;flex-wrap:wrap}
.row>*{min-width:0;max-width:100%}
#pbody .trade-stack-head output{white-space:normal;overflow-wrap:anywhere;max-width:55%}
#pbody .racepot b,.guildshop-wallet strong{overflow-wrap:anywhere}
.guildsummary,.guildadmin-summary{min-width:0}
.guildsummary>*,.guildadmin-summary>*{min-width:0;overflow-wrap:anywhere}
#admbody .admrow,#pbody .admrow{flex-wrap:wrap}
#admbody .admrow>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
#pbody details.lore>summary{min-height:44px;line-height:1.45}
.readability-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.readability-options button{min-height:44px;padding:9px 3px}
.readability-options button.on{color:var(--gold);border-color:var(--gold);background:#2a2114}
#ui-text-current{display:block;color:var(--faint);font-size:var(--ui-note);margin-top:5px}
.help-quick{line-height:1.65;margin-bottom:14px}
.help-quick p{margin:6px 0}
#wclock{white-space:normal;overflow-wrap:anywhere;letter-spacing:0}
#selfname{letter-spacing:0}
#stat{line-height:1.4}
#zonelbl{overflow-wrap:anywhere;letter-spacing:0}
.bar{min-height:calc(var(--ui-note) + 6px)}
.bar span,#cast .bar span{display:grid;place-items:center;line-height:1.2}
#feedtools{flex-wrap:wrap}
#feedtools button,#feedopen,#feedpeek{min-height:44px}
#feedpeek{left:92px}
#skills{max-width:calc(100vw - 16px)}
#skills .sk{height:auto;min-height:64px;min-width:0;flex:0 1 72px;width:72px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 28px auto auto;
  grid-template-areas:"key rank" "icon icon" "name name" "auto auto";gap:2px;padding:4px}
#skills .sk-key,#skills .sk-rank,#skills .sk-auto{position:static;line-height:1.2}
#skills .sk-key{grid-area:key;justify-self:start}
#skills .sk-rank{grid-area:rank;justify-self:end}
#skills .sk-icon{grid-area:icon;justify-self:center;width:28px;height:28px}
#skills .sk-name{grid-area:name;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
#skills .sk-auto{grid-area:auto;justify-self:center;padding:1px 3px}
#pclose{min-width:44px;width:44px;height:44px;flex-basis:44px}
#support-close{min-width:44px;width:44px;height:44px}
.lottery-fanfare>button{width:44px;height:44px}
#admbody .admfield input,#admbody .admfield select{min-height:44px}
.guildtabs button,.guildrow footer button{min-height:44px}
#pbody .dollmid .qt{white-space:nowrap;font-size:var(--ui-label)}
#pbody .dolltrait{text-align:center;color:var(--dim);font-size:var(--ui-label);line-height:1.5;margin:-2px 0 9px}
.invsummary b{white-space:normal;overflow-wrap:anywhere}
/* Five 72px skill keys and the 430px dock need separate rows through laptop widths. */
@media(min-width:761px) and (max-width:1360px){
  #skills{bottom:calc(var(--barh) + 18px)}
  #feed{width:min(30vw,300px)}
}
@media(max-width:760px){
  #topleft{width:calc(100vw - 124px);max-width:calc(100vw - 124px)}
  #ann{top:calc(var(--hud-left-bottom) + 7px);right:112px}
  #actions>button{white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding:7px 2px}
  #actions .cnt{display:block;margin:2px 0 0}
  #skills{width:calc(100vw - 16px);gap:4px}
  #skills .sk{flex-basis:64px;width:64px;height:auto}
  #feedpeek{left:92px}
  #feedhide{flex-basis:60px!important}
  #pbody .trade-money-controls{grid-template-columns:minmax(68px,1fr) repeat(3,minmax(44px,auto))}
  #pbody .trade-stack-controls{grid-template-columns:minmax(68px,1fr) repeat(3,minmax(44px,auto))}
  .skilldash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skilldash small{white-space:normal;text-align:center}
}
/* The short landscape layout in index.html also applies below 761px. Keep the
   portrait readability overrides from widening the status card across combat,
   and keep the skill keys clear of the right-side objective card. */
@media(max-width:1000px) and (max-height:520px) and (min-aspect-ratio:6/5){
  #topleft{width:auto;max-width:min(220px,28vw)}
  #ann{top:8px;right:auto}
  #skills{width:max-content;max-width:calc(100vw - 16px)}
  #skills .sk{flex-basis:60px;width:60px}
  #feedpeek{left:66px}
}

/* Combat stays in the centre. Inspectable information belongs at the edges;
   touch targets stay at least 44px without four rows of text in each skill. */
#map-status{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
/* 묶음 AB — 구역·PK 상태는 판 하나(배지)다. 판 없이 월드 위에 두 줄로 쓰여 성벽·장식과 겹쳐 읽히지 않았다 */
#map-status{flex-direction:row;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:#0e0c0ad9;box-shadow:0 2px 8px #0008}
#map-status #zonelbl{width:auto;text-shadow:none;text-align:left}
#view-options{display:none;position:relative;pointer-events:auto}
#view-options summary{display:grid;place-items:center;list-style:none;width:44px;
  border:1px solid var(--line);border-radius:6px;background:#171a1ee8;color:var(--ink);cursor:pointer}
#view-options summary::-webkit-details-marker{display:none}
#view-options #zoom-controls{position:absolute;right:0;top:calc(100% + 4px);z-index:12;
  display:grid;grid-template-columns:repeat(2,44px);padding:4px;border:1px solid var(--line);background:#131619}
/* 묶음 SM2(DESIGN 14.441 남은 것 · 14.452) — 휠도 [−]/[=] 키도 없는 넓은 터치 화면(태블릿 — 짧은 변 520px 초과라 아래 휴대폰 배치 밖)에도
   [시야]. 마우스·트랙패드가 붙은 기기는 hover 가 있어 그대로 휠을 쓴다 */
@media (hover:none) and (pointer:coarse){
  #view-options{display:block}
}
@media(max-width:760px), (max-width:1000px) and (max-height:520px){
  #view-options{display:block}
  /* Q299 — 미니맵 틀 안쪽 여백(pixel-theme 5px)·[시야]·구역 배지를 한 단계 줄인다(누름 높이 40px — 사용자 「최소 40px 안팎」) */
  #mini-zoom{flex-direction:row;align-items:flex-start;gap:4px}
  #mini-zoom #miniwrap{padding:2px}
  canvas#mini{width:64px;height:64px}
  #view-options summary{width:40px;height:40px;min-height:40px}
  #rightstack{width:128px;gap:4px}
  #map-status{flex-direction:row;align-items:center;gap:5px;max-width:128px;padding:2px 5px;box-sizing:border-box}
  #wring{width:24px;height:24px}
  #wring i{inset:3px}
  #zonelbl{width:auto;flex:1 1 auto;min-width:0;font-size:var(--ui-note);line-height:1.15}
  #topleft{width:auto;max-width:calc(100vw - 154px);padding:3px 6px 4px}   /* HUD1 — 초상·체력·경험치 줄이 더해진 만큼 안쪽 여백을 1px 씩 덜었다 */
  #stat{margin-top:1px}
  #crimeself,#goalline{width:128px;padding:0 6px;border-width:1px;border-radius:5px}
  /* R77 remainder(DESIGN 14.357) — the same 128px column as the two siblings above and #rightstack.
     Left at index.html's 150px they reached 12px under #topleft (max-width 100vw-154px) at 375~390px. */
  #debuffself,#siegehud{width:128px;padding:5px 6px;border-width:1px;border-radius:5px}
  #crimeself::before,#crimeself::after,#goalline::before,#goalline::after{display:none}
  #goalline .goal-toggle{padding:0;min-height:40px;font-size:var(--ui-note)}
  #crimeself summary{min-height:44px;font-size:var(--ui-note)}
  #crimeself .crime-content{padding-bottom:6px}
  #goalline.expanded{width:min(240px,calc(100vw - 20px))}
  #goal-content{max-height:30dvh;overflow-y:auto;overscroll-behavior:contain}
  /* Q299 — 스킬 줄은 오른쪽 아래 한 덩어리([표적 바꾸기]가 바로 위 — ui/attack-button.js). 세로 폰은 행동 줄 위, 왼쪽 끝은 [기록] */
  #skills{gap:3px;bottom:calc(var(--barh) + 6px);left:auto;right:8px;transform:none;width:max-content;justify-content:flex-end}
  /* 묶음 UI2b(DESIGN 14.439) — 폰 스킬 칸은 아이콘 + 짧은 이름. 전에는 여기서 `.sk-name` 까지 숨겨, index.html 이 넣은
     이름 규칙(묶음 AB)을 뒤에서 이겼다 — 검사기는 문자열만 봐서 통과였다. 폰 스킬 칸 규칙은 이 한 자리다(check-client 가 우선순위로 잰다).
     Q299 — 56×58 → 52×44(이름 넉 자가 한 줄에 드는 폭은 그대로) */
  #skills .sk{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:0 0 52px;width:52px;height:44px;min-height:40px;
    padding:2px 2px;border-radius:8px;background:#151a1de8}
  #skills .sk-icon{width:20px;height:20px}
  #skills .sk-key,#skills .sk-rank,#skills .sk-auto{display:none}
  #skills .sk-name{display:block;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:var(--ui-note);line-height:1.15;color:var(--dim)}
  #skills .sk.auto::after{content:'';position:absolute;right:5px;bottom:5px;
    width:5px;height:5px;border-radius:50%;background:#a9e6ae}
  #skills .sk i:empty{display:none}
  #skills .sk.cd{color:#d4b66a}
  #skills .sk i{background:conic-gradient(rgba(10,9,7,.78) calc(var(--cdp,100) * 1%),rgba(10,9,7,.22) 0);font-size:var(--ui-title)}  /* HUD1 — 원형 덮개(폰도 같은 모양) */
  /* Q299 — 행동 칸 셋 + 다섯 칸이 한 줄(index.html). 높이 48 → 40px, 숫자는 이름 아래 둘째 줄(좁은 칸에서도 안 잘린다) */
  #actions{gap:3px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-top-width:1px}
  #actions>button,#mainbar button{padding:2px 1px;min-height:40px;border-radius:6px;line-height:1.2}
  #actions .cnt{display:block;margin:0;font-size:var(--ui-note);line-height:1.15}
  /* [기록] — 같은 높이의 작은 칸, 안 읽은 수는 둘째 줄 */
  #feedopen{width:44px;min-height:40px;padding:2px 0;line-height:1.2;text-align:center}
  #feedopen.unread b{display:block;margin:0}
  /* 미리보기는 큰 버튼이 아니라 한 줄 알림이다(누르면 기록이 열린다 — 큰 문은 [기록]) */
  #feedpeek{left:8px;min-height:28px;line-height:1.3}
  #ann{top:calc(var(--hud-left-bottom) + 6px);left:8px;right:148px;text-align:left}
  #ann div{-webkit-line-clamp:1;padding:3px 5px;font-size:var(--ui-note)}
}
@media(max-width:1000px) and (max-height:520px) and (min-aspect-ratio:6/5){
  /* 묶음 CL2(DESIGN 14.458) → HUD1(14.468) → Q299 — 초상·체력·경험치 줄 + 작은 한 줄(세계·시각·은화). 30vw 상한(전투 시야 — mobile-view-browser)
     안에서 220px·28vw, 초상 22px. 이름은 캐릭터 머리 위에 늘 있으니 가로 폰 상태판에서는 뺀다(작은 줄이 두 줄 → 한 줄) */
  #topleft{max-width:min(220px,28vw);padding-right:10px}   /* 오른쪽 아래 모서리 장식에 「은화」 끝 글자가 닿지 않게 */
  #selfface{width:22px;height:22px}
  #metaname{display:none}
  /* Q299(사용자 실보고 10-13 갤럭시 가로 사진 — 「UI가 화면 반을 가린다」) — 아래 왼쪽은 [기록] + 행동 칸 셋 + 다섯 칸 **한 줄**(높이 40px),
     아래 오른쪽은 스킬 줄 + [표적 바꾸기] 한 덩어리. 전에는 두 줄 버튼 묶음이 화면 왼쪽 44% × 아래 27%였다.
     칸 폭은 고정(40px · 700px 이하 34px)이라 줄 끝이 스킬 줄 앞에서 멈춘다(640px 에서도 안 만난다 — mobile-view-browser) */
  #feedopen{left:8px;bottom:6px}
  #actions{left:55px;right:auto;bottom:6px;width:auto;padding:0;
    background:transparent;border:0;gap:3px}
  #actions>button,#mainbar button{flex:0 0 40px;width:40px}
  #mainbar{flex:none}
  /* 미니맵 60px · 스킬 칸 높이 42px — 가로 폰 한 화면의 HUD 를 20% 아래로(Q299 측정 — mobile-view-browser) */
  canvas#mini{width:60px;height:60px}
  #skills .sk{height:42px}
  /* 경험치 줄은 화면 맨 아래 가는 줄(전에는 버튼 묶음 위를 가로질렀다) */
  #xpline{bottom:0;height:3px}
  #skills{left:auto;right:8px;transform:none;bottom:6px;width:max-content;gap:3px}
  #auto-more{left:0;right:auto;width:min(330px,calc(100vw - 16px))}
  /* 미리보기·보상은 행동 줄 바로 위 왼쪽 가장자리. 보상 조각은 화면 가운데(가로 30%~70%)에 닿지 않는 폭 */
  #feedpeek{left:8px;right:auto;bottom:calc(var(--barh) + 12px);width:auto;max-width:min(300px,40vw)}
  #ann{top:calc(var(--hud-left-bottom) + 6px);left:8px;right:auto;transform:none;width:min(240px,34vw)}
  #toasts{top:auto;bottom:calc(var(--barh) + 46px);width:auto;max-width:calc(30vw - 16px)}
  #crimeself:has(details[open]),#goalline.expanded{position:fixed;right:8px;top:8px;
    width:240px;z-index:15;background:#201d1af5;max-height:calc(100dvh - 76px);overflow-y:auto}
  #crimeself .crime-content,#goalline.expanded #goal-content{max-height:calc(100dvh - 130px)}
}
/* Q299 — 700px 이하 가로(작은 폰)는 칸 폭 34px: [기록]+여덟 칸이 348px 에서 끝나 스킬 줄(52px × 5)과 안 만난다 */
@media(max-width:700px) and (max-height:520px) and (min-aspect-ratio:6/5){
  #actions>button,#mainbar button{flex-basis:34px;width:34px}
}