/* ── UI 크기 (설정 화면 'UI 크기' 80~130%, settings.js → body.uis · --uis) ──
   DOM 판·창은 CSS zoom 으로 함께 키운다 (자리·여백도 같이 커져 캔버스 HUD 의 U 배율과 맞는다).
   손가락·마우스 자리에 붙어 다니는 것(설명창·끌기 그림·차림표)은 화면 좌표로 놓으므로 zoom 하지 않는다. */
body.uis #hud > :not(#tip):not(#drag):not(#bf-tip):not(#sk-pick):not(#soc-menu):not(#intro):not(#records):not(.tr-ghost):not(.skt-ghost):not(.eg-stamp) { zoom: var(--uis, 1); }
/* zoom 안에서 vh·vw 는 그대로 화면 길이라 커지면 넘친다 — 창 높이 상한을 배율로 나눈다 */
body.uis #hud .panel { max-height: calc(80vh / var(--uis, 1)); }
body.uis #hud #panel-set { max-height: min(calc(84vh / var(--uis, 1)), 620px); }
body.uis #hud #panel-help { max-height: min(calc(84vh / var(--uis, 1)), 700px); }
body.uis #panel-skills, body.uis #panel-stash { max-width: calc(100vw / var(--uis, 1) - 24px); }
body.uis.touch #hud #panel-set { max-height: calc(100vh / var(--uis, 1) - 64px); }
body.uis.phone.short #hud #panel-set { max-height: calc(100vh / var(--uis, 1) - 16px); }

/* ── 동행 패: 걸린 기운 (social.js · lib/party.js partyBuffs) ── */
.pf-bf { display: flex; gap: 3px; margin-top: 3px; align-items: center; min-height: 0; }
.pf-bf:empty { display: none; }
.pf-b { position: relative; width: 16px; height: 16px; flex: none; background: #120b07; overflow: hidden;
  box-shadow: 0 0 0 1px #0a0604, 0 0 0 2px #8a6a34; }
.pf-b .bf-ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-b .bf-gl { font-size: 11px; }
.pf-b.c-d { box-shadow: 0 0 0 1px #0a0604, 0 0 0 2px #b8301e, 0 0 5px rgba(210,50,25,0.6); }
.pf-b.c-d .bf-gl { color: #e0452c; background: radial-gradient(circle at 50% 45%, #3a0e08, #140504 75%); }
.pf-b.c-a, .pf-b.c-f { box-shadow: 0 0 0 1px #0a0604, 0 0 0 2px #e0b85a; }
.pf-bf em { font-style: normal; font-size: 10px; color: #e8d6a6; margin-left: 2px; text-shadow: 0 1px 1px #000; }
/* PC·태블릿: 동행 패(왼쪽 위)와 기운 줄이 겹치지 않게 — 기운 줄은 패 오른쪽으로 (알림 글과 같은 줄) */
body.has-party:not(.phone) #buffs { left: 232px; }
body.phone .pf-b { width: 14px; height: 14px; } body.phone .pf-b .bf-gl { font-size: 10px; }

/* ── 신문고 (voc.js) ── */
#panel-voc { left: 50%; top: 8vh; transform: translateX(-50%); width: 560px; max-width: calc(100vw - 16px); max-height: min(84vh, 640px); overflow: hidden; display: flex; flex-direction: column; z-index: 22; }
#panel-voc.hidden { display: none; }
#panel-voc h3 { flex: none; display: flex; align-items: center; gap: 8px; }
#panel-voc h3 .close { margin-left: auto; background: none; border: none; color: var(--ink2); font-size: 16px; cursor: pointer; }
/* 북: 붉은 테를 두른 둥근 인주 낙관 */
.voc-drum { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; color: #fbeedd; letter-spacing: 0;
  background: radial-gradient(circle at 32% 28%, #c4503a, #8e2a22 58%, #5a120c); box-shadow: 0 0 0 2px #e9dcc0, 0 0 0 3.5px #8e2a22, 0 2px 4px rgba(60,10,6,0.45); transform: rotate(-6deg); }
.voc-tabs { margin-top: 2px; }
.voc-body { padding: 8px 12px 12px; }
.voc-lead { font-size: 13px; color: #4a3a2a; line-height: 1.6; margin: 4px 0 8px; }
.voc-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.voc-cats button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 7px; cursor: pointer; color: #4a3a2a;
  background: rgba(255,250,235,0.5); border: 1.5px dashed rgba(122,90,50,0.6); border-radius: 3px; transition: transform 0.12s; }
.voc-cats button i { font-style: normal; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 15px; width: 26px; height: 26px; display: grid; place-items: center;
  color: #8e2a22; border: 1.5px solid #8e2a22; border-radius: 2px; }
.voc-cats button b { font-family: var(--title); font-weight: 400; font-size: 16px; letter-spacing: 2px; }
.voc-cats button small { font-size: 10.5px; color: #6d5636; text-align: center; line-height: 1.3; }
.voc-cats button.on { color: #fbeedd; background: radial-gradient(circle at 30% 25%, #b8402e, #8e2a22 60%, #6a1a12); border: 1.5px solid #5a120c; transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 2px rgba(255,220,200,0.25), 0 2px 5px rgba(60,10,6,0.4); }
.voc-cats button.on i { color: #fbeedd; border-color: #fbeedd; }
.voc-cats button.on small { color: #f0c8b0; }
.voc-tgt { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-family: var(--title); font-size: 15px; color: #4a1a10; }
.voc-tgt.hidden { display: none; }
.voc-tgt input { flex: 1; min-width: 0; padding: 5px 8px; font-family: var(--font); font-size: 15px; color: var(--ink); background: rgba(255,252,240,0.75); border: 1px solid #8a6a3a; border-radius: 2px; }
.voc-ta { position: relative; margin-top: 10px; }
.voc-ta textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; max-height: 40vh; padding: 8px 10px 20px; font-family: var(--font); font-size: 15px; line-height: 1.6;
  color: var(--ink); background: url("../ui/tex_hanji.png") center / 300px, #f4ead2; border: 1px solid #8a6a3a; border-radius: 2px; box-shadow: inset 0 1px 6px rgba(80,50,20,0.25); }
.voc-ta textarea:focus, .voc-tgt input:focus { outline: 2px solid rgba(142,42,34,0.45); outline-offset: 0; }
.voc-n { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: #8a7458; pointer-events: none; }
.voc-ctx { margin-top: 8px; font-size: 12px; color: #6d5636; }
.voc-ctx summary { cursor: pointer; font-family: var(--title); font-size: 13px; color: #6a1810; }
.voc-ctx p { margin: 4px 0 0 12px; line-height: 1.6; }
.voc-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.voc-msg { flex: 1; min-width: 0; font-size: 13px; color: #2a5a2a; line-height: 1.5; }
.voc-msg.bad { color: #9a2a20; }
.voc-go { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; cursor: pointer; font-family: var(--title); font-size: 17px; letter-spacing: 2px; color: #f6e2b0;
  background: linear-gradient(100deg, rgba(255,210,150,0.1), transparent 40%), linear-gradient(#9a2a1e, #5a0e08); border: 1px solid #c9a24f; border-radius: 3px;
  box-shadow: 0 0 0 2px #1a0b06, 0 3px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,220,160,0.2); }
.voc-go i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; color: #5a0e08; background: radial-gradient(circle at 35% 30%, #fbe3a0, #c9a24f 60%, #7a5418); }
.voc-go:hover { filter: brightness(1.15); } .voc-go:active { transform: translateY(1px); }
.voc-mine.hidden, .voc-write.hidden { display: none; }
.voc-item { padding: 8px 2px; border-bottom: 1px dashed rgba(120,90,50,0.38); }
.vi-h { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #6d5636; }
.vi-cat { font-family: var(--title); font-size: 14px; color: #fbeedd; background: #6d5636; padding: 0 7px; border-radius: 2px; }
.vi-st { font-family: var(--title); font-size: 14px; color: #b0661a; }
.voc-item.st-doing .vi-st { color: #2c3f73; } .voc-item.st-done .vi-st { color: #2a6a2a; }
.vi-d { margin-left: auto; font-size: 11px; }
.vi-t { margin: 4px 0 2px; font-size: 14px; color: var(--ink); line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.vi-r { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; padding: 6px 8px; background: rgba(255,250,235,0.55); border-left: 3px solid #8e2a22; font-size: 13.5px; color: #3a2416; line-height: 1.55; }
.vi-r i { font-style: normal; flex: none; font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 12px; color: #fbeedd; background: #8e2a22; padding: 1px 4px; border-radius: 2px; }
.vi-r span { flex: 1; white-space: pre-wrap; word-break: break-all; }
.vi-r small { flex: none; font-size: 10.5px; color: #8a7458; }
/* 회답이 왔다: 설정 단추·신문고 현판에 붉은 점 */
body.voc-new .setb, body.voc-new .voc-plq { position: relative; }
body.voc-new .setb::after, body.voc-new .voc-plq::after { content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #e0452c; box-shadow: 0 0 0 1.5px #1a0b06, 0 0 6px rgba(255,80,40,0.8); }
body.voc-new .voc-plq::after { right: 30px; top: 6px; }
@media (max-width: 600px) {
  .voc-cats { grid-template-columns: repeat(2, 1fr); }
  .voc-cats button { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 5px 8px; }
  .voc-cats button small { display: none; }
}
body.touch #panel-voc { max-height: calc(100vh - 24px); top: max(10px, env(safe-area-inset-top)); }
body.phone.short #panel-voc { top: 6px; max-height: calc(100vh - 12px); }
body.phone.short .voc-cats { grid-template-columns: repeat(4, 1fr); }
body.phone.short .voc-cats button small { display: none; }
body.phone.short .voc-ta textarea { min-height: 64px; }
body.phone.short .voc-lead { display: none; }
body.uis #hud #panel-voc { max-height: min(calc(84vh / var(--uis, 1)), 640px); }
body.uis.touch #hud #panel-voc { max-height: calc(100vh / var(--uis, 1) - 24px); }

/* 설정 'UI 크기': 단추 여섯 — 좁은 화면에서는 이름 아래 줄로 */
@media (max-width: 600px) {
  .set-row:has(.uis-pick) { flex-wrap: wrap; }
  .set-row:has(.uis-pick) label { flex-basis: 100%; }
  .uis-pick button { padding: 5px 8px; }
}

/* zoom 안의 창 너비·높이: 화면 길이(vw·vh)를 UI 크기로 나눈다 — 안 나누면 UI 크기를 키운 휴대폰에서 흥정·궤짝·기술 창이 화면 양옆 밖으로 넘쳤다 */
body.uis.touch #hud .panel { max-width: calc(100vw / var(--uis, 1) - 16px); max-height: calc(100vh / var(--uis, 1) - 64px); }
body.uis.phone #hud #panel-trade { width: calc(100vw / var(--uis, 1) - 12px); max-width: calc(100vw / var(--uis, 1) - 12px); max-height: calc(100vh / var(--uis, 1) - 12px); }
body.uis.phone #hud #panel-skills { width: calc(100vw / var(--uis, 1) - 12px); }
body.uis.touch #hud #panel-eg { width: calc(100vw / var(--uis, 1) - 16px); }
body.uis.phone #hud #panel-stash { width: calc(100vw / var(--uis, 1) - 12px); --mc: min(32px, calc((100vw / var(--uis, 1) - 84px) / 10)); }
body.uis.phone #hud #panel-stats { width: min(560px, calc(100vw / var(--uis, 1) - 12px)); }
body.uis.touch #hud #panel-merc { width: min(560px, calc(100vw / var(--uis, 1) - 16px)); max-height: calc(100vh / var(--uis, 1) - 16px); }
body.uis.phone:not(.portrait) #hud #panel-market { height: calc(100vh / var(--uis, 1) - 8px); width: min(820px, calc(100vw / var(--uis, 1) - 8px)); }
body.uis.phone.portrait #hud #panel-help, body.uis.phone.portrait #hud #panel-set { max-width: calc(100vw / var(--uis, 1) - 8px); width: calc(100vw / var(--uis, 1) - 8px); }
body.uis.phone #hud #dialog { width: calc(100vw / var(--uis, 1) - 16px); }
body.uis.phone.short #hud #dialog { width: min(640px, calc(100vw / var(--uis, 1) - 300px)); }
body.uis.phone.portrait #hud #tracker { width: calc(100vw / var(--uis, 1) - 80px); }
body.uis.phone.portrait #hud #chatbox { width: calc(100vw / var(--uis, 1) - 20px); }
body.uis.phone.portrait #hud #sysbox { width: calc(100vw / var(--uis, 1) - 80px); }

/* 행낭·잠룡·기술·실록·인연 창의 닫기 ✕ (동행 창·살펴보기 창과 같은 모양) — 터치는 손가락 크기로 */
#panel-inv h3 .close, #panel-stats h3 .close, #panel-skills h3 .close, #panel-chron h3 .close, #panel-mentor h3 .close {
  float: right; background: none; border: none; color: var(--ink2); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; text-shadow: none; }
#panel-inv h3 .close { color: #c8a868; }
body.touch #panel-inv h3 .close, body.touch #panel-stats h3 .close, body.touch #panel-skills h3 .close, body.touch #panel-chron h3 .close, body.touch #panel-mentor h3 .close {
  font-size: 18px; min-width: 34px; min-height: 30px; margin: -6px -6px 0 0; }
/* 낮은 가로 휴대폰의 잠룡 창은 제목 줄을 감춘다 — ✕ 만 오른쪽 위 구석에 남긴다 */
body.phone.short #panel-stats h3 { display: block; height: 0; margin: 0; padding: 0; border: 0; overflow: visible; font-size: 0; position: relative; z-index: 4; }
body.phone.short #panel-stats h3 > :not(.close) { display: none; }
body.phone.short #panel-stats h3 .close { position: absolute; right: 0; top: 0; margin: 0; }
body.phone.short #panel-stats .cs-plate .cs-xp { margin-right: 34px; }   /* ✕ 자리를 비운다 */
/* 행낭 도움말: PC 는 마우스, 터치는 손가락 */
body.touch .inv-help .pc-only, body:not(.touch) .inv-help .touch-only { display: none; }
/* 터치 풀이 쪽지 (ui.js — title 을 누르면). 기운 줄 설명창(#bf-tip)과 같은 자개 테 */
#ttip { position: fixed; z-index: 60; max-width: min(280px, calc(100vw - 12px)); padding: 3px 8px 5px; border: 12px solid transparent;
  border-image: url("../ui/frame_najeon.png") 58 stretch; background: rgba(12,8,6,0.95); background-clip: padding-box; color: #e8dcbc; font-size: 13px; line-height: 1.45;
  white-space: pre-line; pointer-events: none; text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,0.7); word-break: keep-all; }
#ttip.hidden { display: none; }