/* 호신부 주머니 (public/js/charms.js) · 해태의 심판 (public/js/uber.js)
   주머니 그림·호신부·인장 아이콘은 tools/blender/charm_art.py 가 렌더한다 (ui/pouch.png · ui/charms.png).
   주머니 칸 자리(%)는 charm_art.py 의 SLOTS 와 같아야 한다. */

/* ── 행낭 아래 「주머니」 단추: 작은 복주머니 그림 + 들어 있는 수 ── */
.ch-btn { position: relative; white-space: nowrap; }
body.phone .ch-btn-t { display: none; }                    /* 휴대폰: 좁은 발치 — 그림·符·수만 */
body.phone .inv-foot .lq-btn { white-space: nowrap; }
.ch-btn-ic { width: 22px; height: 22px; margin: -4px 0 -4px -6px; background: url("../ui/pouch_ic.png") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.ch-btn-n { font-family: var(--font); font-size: 11px; font-weight: 400; letter-spacing: 0; color: #f0d890; margin-left: 2px; font-variant-numeric: tabular-nums; }
.ch-btn.empty .ch-btn-n { color: #b89a70; }
.ch-btn.on { box-shadow: inset 0 0 0 1px #e8c060, 0 0 10px rgba(240,190,90,0.45); }

/* ── 주머니: 행낭 창 왼쪽에 매달린다 (터치는 창 위에 겹친다) ── */
#ch-pouch { position: absolute; width: 300px; padding: 0; max-height: none; overflow: visible; z-index: 7; color: #f2e2bc; pointer-events: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.7)); }
#ch-pouch.hidden { display: none; }
.ch-art { position: relative; width: 300px; height: 280px; background: url("../ui/pouch.png") center / contain no-repeat; }
#ch-pouch:not(.art) .ch-art { background: radial-gradient(ellipse 46% 40% at 50% 62%, #7a1a24 0 92%, transparent 94%), radial-gradient(ellipse 18% 14% at 50% 20%, #5a1018 0 90%, transparent 92%); }
.ch-slots { position: absolute; inset: 0; }
.ch-slot { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(20,6,6,0.25), rgba(20,6,6,0.55) 70%, transparent 72%); }
/* 칸 자리 = ui/pouch.png 의 수놓은 금실 테 (3+3 두 줄 완만한 호, 2026-10 다시 그림 — 예전 한 줄 넷은 오륜기처럼 보였다). 위 1·2·3, 아래 5(왼)·4(가운데)·6(오른) — 끝판에 트이는 5·6 이 아래 양 끝 */
.ch-slot:nth-child(1) { left: 28%; top: 58.5%; } .ch-slot:nth-child(2) { left: 50%; top: 62.5%; }
.ch-slot:nth-child(3) { left: 72%; top: 58.5%; } .ch-slot:nth-child(4) { left: 50%; top: 83.5%; }
.ch-slot:nth-child(5) { left: 30%; top: 80%; } .ch-slot:nth-child(6) { left: 70%; top: 80%; }   /* 끝판 목표로 트이는 칸 (말세 엔딩 · 해태) */
/* 잠긴 칸: 남빛 비단 덮개를 붉은 실로 봉했다 (ui/charms.png ch_lock). 귀띔은 한지 쪽지 */
.ch-slot.lock { cursor: help; background: none; }
.ch-slot.lock img { width: 46px; height: 46px; opacity: 0.92; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.ch-slot.lock:hover { box-shadow: none; }
.ch-hint { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); width: max-content; max-width: 176px; padding: 3px 7px 4px; z-index: 3;
  font-size: 11.5px; line-height: 1.3; color: #3a2416; text-align: center; white-space: normal; pointer-events: none; opacity: 0; transition: opacity 0.12s;
  background: url("../ui/tex_hanji.png") center / 200px, #e6d8b8; border: 1px solid #6d5636; border-left: 3px solid #a8241a; box-shadow: 0 3px 8px rgba(0,0,0,0.55); }
.ch-hint b { display: block; font-family: var(--title); font-weight: 400; font-size: 12px; color: #8e2a22; letter-spacing: 1px; }
.ch-slot.lock:hover .ch-hint, .ch-slot.lock.show .ch-hint { opacity: 1; }
body.touch .ch-slot.lock:hover .ch-hint { opacity: 0; } body.touch .ch-slot.lock.show .ch-hint { opacity: 1; }
.ch-slot img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); pointer-events: none; }
.ch-slot:hover { box-shadow: 0 0 0 2px rgba(255,214,120,0.55), 0 0 14px rgba(255,200,110,0.45); }
.ch-slot.g-myeong { box-shadow: 0 0 0 2px rgba(201,138,60,0.85), 0 0 12px rgba(220,140,50,0.55); }
.ch-slot.g-sang { box-shadow: 0 0 0 1px rgba(127,156,255,0.6); }
.ch-slot.off img { filter: grayscale(1) brightness(0.5); }
.ch-slot.off::after { content: '不'; position: absolute; right: -2px; bottom: -2px; font-family: var(--title); font-size: 13px; color: #ff9a8a; text-shadow: 0 0 3px #000; }
.ch-knot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0d080, #8a6420); opacity: 0.5; }
.ch-cap { display: flex; align-items: center; gap: 6px; margin: -6px 10px 0; padding: 4px 8px; font-family: var(--title); font-size: 15px; letter-spacing: 2px; color: #f6e2b0;
  background: url("../ui/tex_bandaji.png") center / 200px, #3a2416; border: 1px solid #1a0e08; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(216,180,90,0.35); }
.ch-cap .w-hanja { font-size: 11px; color: #c8a868; letter-spacing: 1px; }
.ch-x { margin-left: auto; background: none; border: none; color: #e8c890; font-size: 14px; padding: 0 2px; }
.ch-sum { margin: 0 10px; padding: 5px 8px 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: #3a2416;
  background: url("../ui/tex_hanji.png") center / 300px, #e6d8b8; border: 1px solid #6d5636; border-top: none; }
.ch-sum span { white-space: nowrap; color: #2c3f73; }
.ch-sum em { font-style: normal; color: #5a4a36; line-height: 1.35; }
body.touch #ch-pouch { left: 50% !important; top: 44px !important; transform: translateX(-50%) !important; z-index: 48; }   /* 행낭 창 위 (설명창 50 아래) */
body.touch #ch-pouch::before { content: ''; position: absolute; inset: -30px -90px -20px; background: rgba(8,4,3,0.72); z-index: -1; border-radius: 4px; }
body.touch .ch-slot { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
body.touch .ch-slot.lock img { width: 52px; height: 52px; }
/* 휴대폰 가로(낮은 화면 360px): 주머니(그림 + 이름·합)를 세로로 쌓으면 아래가 잘린다 → 그림 왼쪽, 이름·합 오른쪽 */
body.phone.short #ch-pouch { top: 6px !important; width: 500px; display: grid; grid-template-columns: 270px 1fr; grid-template-rows: min-content 1fr; align-items: start; }
body.phone.short .ch-art { width: 270px; height: 252px; grid-row: 1 / 3; }
body.phone.short .ch-cap { margin: 36px 0 0; }
body.phone.short .ch-sum { margin: 0; max-height: 170px; overflow-y: auto; }
body.phone.short .ch-slot { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
body.phone.short .ch-slot img, body.phone.short .ch-slot.lock img { width: 44px; height: 44px; }

/* 설명창: 호신부 줄 */
#tip .ch-tl { margin: 4px 0 2px; font-size: 12px; color: #e8c890; }
#tip .ch-tl.on { color: #8fe0a0; } #tip .ch-tl.off { color: #ff9a8a; }

/* ── 세공방 「해태의 심판」 ── */
.ub-flame { display: inline-block; width: 9px; height: 13px; margin: 0 5px; vertical-align: -1px; border-radius: 50% 50% 45% 45% / 70% 70% 35% 35%;
  background: radial-gradient(circle at 50% 70%, #fff0b0 0, #ff8a2a 40%, #a0180c 85%); box-shadow: 0 0 8px rgba(255,110,40,0.75); animation: ub-flk 0.35s infinite alternate; }
@keyframes ub-flk { from { transform: scaleY(0.9) skewX(-4deg); } to { transform: scaleY(1.1) skewX(4deg); } }
.ub-cube { margin: 2px 0 10px; padding: 6px 8px 5px; border: 1px solid #6d5636; border-left: 4px solid #c0302a; color: var(--ink);
  background: url("../ui/tex_hanji.png") center / 300px, rgba(180,40,20,0.06); }
.ub-cube.can { box-shadow: inset 0 0 0 1px rgba(230,120,60,0.7), 0 0 12px rgba(220,80,40,0.25); }
.ub-cube header { display: flex; align-items: center; gap: 4px; font-family: var(--title); font-size: 15px; color: #7a1a10; }
.ub-cube header .w-hanja { font-size: 12px; opacity: 0.7; }
.ub-diff { margin-left: auto; font-size: 11px; padding: 1px 6px; border: 1px solid #b8402a; color: #8e2a1a; border-radius: 2px; background: rgba(255,250,235,0.4); }
.ub-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.ub-row em { font-style: normal; color: #6d5636; }
.ub-seal { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 1px; border-bottom: 2px solid var(--c); background: rgba(40,20,10,0.06); }
.ub-seal img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); }
.ub-seal b { font-size: 12px; font-variant-numeric: tabular-nums; }
.ub-seal small { font-family: var(--title); font-size: 11px; color: #5a4a36; }
.ub-seal.short { opacity: 0.55; } .ub-seal.short b { color: #a0281c; }
.ub-out { font-family: var(--title); font-size: 14px; color: #a02818; display: inline-flex; flex-direction: column; line-height: 1.1; }
.ub-out small { font-size: 10px; color: #5a4a36; font-family: var(--font); }
.ub-row button, .ub-rr button { margin-left: auto; padding: 4px 12px; font-family: var(--title); font-size: 14px; letter-spacing: 1px; background: url("../ui/tex_bandaji.png") center / 160px, #6a0e08; border: 1px solid #e0a850; color: #ffe8c0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }
.ub-row button:disabled, .ub-rr button:disabled { filter: grayscale(0.8) brightness(0.8); cursor: default; }
.ub-rr { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 5px; border-top: 1px dotted rgba(90,60,30,0.5); font-size: 12px; }
.ub-rr-t { font-family: var(--title); font-size: 13px; color: #2c3f73; }
.ub-rr select { max-width: 190px; font-size: 12px; background: #f2e6c8; border: 1px solid #6d5636; color: var(--ink); }
.ub-rr-c.short { color: #a0281c; }

/* ── 근정전 머리 두루마리 ── */
#ub-hud { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 340px; z-index: 6; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); }
#ub-hud.hidden { display: none; }
.ub-paper { padding: 5px 12px 4px; background: url("../ui/tex_hanji.png") center / 300px, #e3d3b0; color: var(--ink); border-left: 3px solid #b0281a; border-right: 3px solid #b0281a; }
.ub-t { text-align: center; font-family: var(--title); font-size: 15px; color: #7a1a10; letter-spacing: 1px; }
.ub-r { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; }
.ub-r > span:last-child { width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.ub-l { font-family: var(--title); color: #8e2a22; width: 14px; }
.ub-bar { flex: 1; height: 9px; background: rgba(60,40,20,0.25); border: 1px solid rgba(60,40,20,0.5); }
.ub-bar i { display: block; height: 100%; background: linear-gradient(#ff8a3a, #b0200e 60%, #5a0a06); transition: width 0.35s; }
.ub-sh { display: flex; justify-content: center; gap: 6px; margin: 2px 0; }
.ub-sd { position: relative; width: 38px; padding: 1px 0 3px; text-align: center; font-family: var(--title); font-size: 12px; color: rgba(60,40,20,0.35); border: 1px solid rgba(60,40,20,0.25); }
.ub-sd.alive { color: #3c2a50; border-color: #5a3a7a; background: rgba(90,60,130,0.12); }
.ub-sd.gone { color: rgba(60,40,20,0.6); text-decoration: line-through; }
.ub-sd i { position: absolute; left: 0; bottom: 0; height: 2px; background: #6a3a9a; }
.ub-st { text-align: center; font-size: 12px; color: #4a3a2a; min-height: 15px; }
#ub-hud.urgent .ub-st { color: #a0201a; font-weight: 700; }
/* 태블릿(터치+키보드): 위 가운데 작은 메뉴(#mini, 위 10~60px) 아래로. 왼쪽 위 알림 줄은 두루마리 왼쪽까지만 */
body.tablet #ub-hud { top: 68px; }
body.tablet.ub-on #sysbox { width: min(520px, calc(50vw - 186px)); }
/* 휴대폰: 예전엔 아래(bottom 262px)에 떠 말 줄·알림 줄을 덮었다 → 위쪽 빈 틈으로. 표적 패는 ui.js placeTarget 이 'ub-hud' 를 비켜 간다
   세로: 구슬 오른쪽 · 오른쪽 세로 메뉴(tmenu) 왼쪽 · 지역 이름 아래 (기운 줄 #buffs 는 두루마리 아래로 내려간다)
   가로: 위 메뉴 줄 아래, 허리띠 오른쪽 (알림 줄 #sysbox 는 두루마리 오른쪽으로 좁힌다) */
body.phone #ub-hud { top: 50px; bottom: auto; left: max(calc(50% - 92px), 368px); transform: none; width: 184px; }
body.phone.portrait #ub-hud { top: 30px; left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 46px); width: min(150px, calc(100vw - 240px)); }
body.phone .ub-st { display: none; }
body.phone .ub-paper { padding: 2px 7px 1px; }
body.phone #ub-hud .eg-dh-rod { height: 7px; margin: 0 -7px; }
body.phone .ub-t { font-size: 12px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.phone .ub-flame { width: 7px; height: 10px; margin: 0 3px; }
body.phone .ub-r { gap: 4px; margin: 1px 0 2px; font-size: 11px; }
body.phone .ub-r > span:last-child { width: 36px; }
body.phone .ub-l { width: 11px; }
body.phone .ub-bar { height: 7px; }
body.phone .ub-sh { gap: 3px; margin: 1px 0 3px; }
body.phone .ub-sd { width: auto; flex: 1; max-width: 38px; font-size: 11px; padding: 0 0 2px; }
body.phone.portrait.ub-on #buffs { top: 112px; }
body.phone:not(.portrait).ub-on #sysbox { width: min(300px, 45vw, calc(100vw - 562px)); }