/* 용병(傭兵) — public/js/merc.js · lib/merc.js
   용병 패: 옻칠 바탕에 금테 두른 초상(실제 몸 그림을 잘라 씀) + 붉은 낙관(갈래 한자) + 체력 줄.
   행수 창: 한지 명부. 후보마다 초상·낙관·기술 패. 행낭 「용병」 책갈피: 무기·머리·몸 세 칸. */

/* 낙관: 인주 바른 네모 도장 (색은 성질) */
.mc-seal { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; font-family: 'Noto Serif KR', var(--title); font-weight: 700; font-size: 13px; font-style: normal; line-height: 1;
  color: #fbeedd; background: #8e2a22; border-radius: 2px; transform: rotate(-4deg); vertical-align: middle;
  box-shadow: inset 0 0 0 1.5px rgba(255,236,214,0.55), inset 0 0 0 3px rgba(0,0,0,0.12), 0 1px 2px rgba(40,10,6,0.45); text-shadow: 0 0 1px rgba(0,0,0,0.4); }
.mc-seal.sm { width: 18px; height: 18px; font-size: 11px; }
.mc-seal.big { width: 32px; height: 32px; font-size: 19px; margin-right: 8px; }

/* ── 용병 패 (왼쪽 위) ── */
#mc-frame { position: absolute; left: 16px; top: 44px; width: 214px; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; cursor: pointer; pointer-events: auto;
  border-left: 2px solid #c9a24f; background: linear-gradient(90deg, rgba(20,9,6,0.92), rgba(20,9,6,0.62) 78%, rgba(20,9,6,0)); text-shadow: 0 1px 2px #000; z-index: 5; }
#mc-frame:hover { background: linear-gradient(90deg, rgba(64,26,14,0.95), rgba(30,14,9,0.72) 78%, rgba(14,9,6,0)); }
.mcf-por { position: relative; flex: none; width: 46px; height: 46px; border-radius: 3px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3a2414, #120804 75%); box-shadow: 0 0 0 1px #0a0503, 0 0 0 2.5px #b08a48, 0 0 0 3.5px #2a1408, 0 3px 6px rgba(0,0,0,0.7); }
.mcf-por canvas { position: absolute; left: 50%; top: 0; width: 56px; height: 56px; margin-left: -28px; }
.mcf-por::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 8px rgba(0,0,0,0.85); pointer-events: none; }
.mcf-seal { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; display: grid; place-items: center; font: 700 10px/1 'Noto Serif KR', serif; font-style: normal; color: #fbeedd;
  background: #8e2a22; box-shadow: inset 0 0 0 1px rgba(255,236,214,0.5); border-radius: 1px; z-index: 1; }
.mcf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mcf-nm { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; overflow: hidden; }
.mcf-nm b { font-family: var(--title); font-weight: 400; font-size: 15px; color: #f0e0b8; overflow: hidden; text-overflow: ellipsis; }
.mcf-nm small { font-size: 11px; color: #c8b48a; }
.mcf-bar { position: relative; display: block; height: 9px; margin-top: 3px; background: #1a0d0a; border: 1px solid #4a3220; box-shadow: inset 0 1px 2px #000; }
.mcf-bar i { display: block; height: 100%; background: linear-gradient(#ff6a4a, #a3170c 60%, #6a0a05); transition: width 0.3s; }
.mcf-bar.low i { animation: mcf-low 0.9s infinite alternate; }
@keyframes mcf-low { to { filter: brightness(1.6); } }
.mcf-bar em { position: absolute; inset: -2px 0 0; font-size: 9.5px; font-style: normal; text-align: center; color: #ffe8d0; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.mcf-st { font-size: 11px; color: #b8a27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#mc-frame.dead .mcf-nm b { color: #9a8f78; text-decoration: line-through rgba(160,40,30,0.7); }
#mc-frame.dead .mcf-st { color: #e08a70; }
#mc-frame.far .mcf-por { opacity: 0.6; }
/* 자리: 동행 패·기운 줄·알림과 겹치지 않게 (social.js has-party 와 같은 방식) */
body.has-merc:not(.phone) #buffs { left: 244px; }
body.has-merc.pc #sysbox, body.has-merc.tablet #sysbox { left: 244px; width: min(520px, calc(100vw - 580px)); }
body.has-merc #pty-frames { top: 100px; }
body.has-merc:not(.phone) #buffs { max-width: min(520px, max(244px, calc(50vw / var(--uis, 1) - 244px - 164px))); }
/* 휴대폰: 구슬·허리띠 아래 (동행 패 자리), 동행 패·할 일은 그만큼 내린다 */
body.phone #mc-frame { left: max(10px, env(safe-area-inset-left)); top: 156px; width: 168px; padding: 2px 8px 2px 3px; gap: 6px; }
body.phone.portrait #mc-frame { top: 158px; }
body.phone.short #mc-frame { top: 156px; width: 156px; }
body.phone .mcf-por { width: 34px; height: 34px; }
body.phone .mcf-por canvas { width: 44px; height: 44px; margin-left: -22px; }
body.phone .mcf-nm b { font-size: 13px; } body.phone .mcf-st { display: none; } body.phone .mcf-bar { height: 8px; }
body.phone.has-merc #pty-frames { top: 196px; }
body.phone.portrait.has-merc #pty-frames { top: 204px; }
body.phone.has-merc.mc-side #pty-frames { top: 156px; }   /* 가로: 용병 패가 물약 칸 아래로 갔으니 동행 패는 제자리 */
body.phone.has-merc #tracker { margin-top: max(var(--pty-h, 0px), var(--mc-h, 46px)); }
body.phone.has-merc.mc-side #tracker { margin-top: var(--pty-h, 0px); }   /* 가로: 용병 패가 물약 칸 아래로 갔으니 추적 창은 제자리 */   /* --mc-h: merc.js 가 잰 용병 패 아랫변 · 동행 패가 있으면 그 아래 (--pty-h) */

/* ── 행낭 책갈피 ── */
#mc-tabs { display: flex; gap: 4px; margin: -2px 0 6px; }
#mc-tabs.hidden { display: none; }
#mc-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px 4px 12px; font-family: var(--title); font-size: 15px; letter-spacing: 2px; color: #c8b48a;
  background: linear-gradient(#2a1a10, #170d07); border: 1px solid #6d5636; border-bottom-color: #b08a48; border-radius: 3px 3px 0 0; }
#mc-tabs button i { font-style: normal; font-size: 11px; padding: 1px 3px; color: #2a0806; background: #8a7450; border-radius: 2px; }
#mc-tabs button.on { color: #f6e2b0; background: linear-gradient(#8a2216, #5a0f09 70%); border-color: #c9a24f; box-shadow: inset 0 1px 0 rgba(255,220,160,0.3); }
#mc-tabs button.on i { background: #d8b45a; }
#mc-doll-grid { position: relative; margin: 2px 0 10px; color: #ecdcb6; min-height: 296px; }
#mc-doll-grid.hidden { display: none; }
.mcd-head { display: flex; gap: 12px; align-items: stretch; padding: 4px 4px 8px; border-bottom: 1px solid rgba(176,138,72,0.35); }
.mcd-por { position: relative; flex: none; width: 108px; height: 124px; overflow: hidden; border-radius: 2px;
  background: radial-gradient(ellipse at 50% 40%, #3a2414, #0e0603 78%); box-shadow: 0 0 0 1px #0a0503, 0 0 0 3px #b08a48, 0 0 0 4px #2a1408, inset 0 0 14px #000; }
.mcd-por canvas { position: absolute; left: 50%; bottom: -4px; width: 132px; height: 150px; margin-left: -66px; }
.mcd-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mcd-nm { display: flex; align-items: center; gap: 8px; }
.mcd-nm b { font-family: var(--title); font-weight: 400; font-size: 22px; color: #f6e2b0; letter-spacing: 2px; text-shadow: 1px 1px 0 #000; }
.mcd-ty { font-size: 13px; color: #d8c290; } .mcd-ty small { color: #a8926a; }
.mcd-lv { font-family: var(--title); font-size: 15px; color: #ffd77a; } .mcd-lv small { font-family: var(--font); font-size: 11px; color: #a8926a; }
.mcd-xp { height: 5px; background: #120a06; border: 1px solid #4a3220; } .mcd-xp i { display: block; height: 100%; background: linear-gradient(90deg, #8a4a12, #e0a040); }
.mcd-wk { font-size: 12px; color: #b8a27a; } .mcd-wk b { color: #ecd8a8; font-weight: 400; }
.mcd-dead { margin-top: 2px; padding: 3px 8px; font-size: 12.5px; color: #ffd0c0; background: rgba(140,30,20,0.35); border-left: 3px solid #c0302a; }
.mcd-row { display: flex; gap: 14px; padding-top: 10px; }
.mcd-gear { position: relative; flex: none; width: 190px; height: 228px; }
.mcd-slot { cursor: pointer; }
.mcd-slot.ok { box-shadow: inset 0 0 10px #000, 0 0 0 2px #e8c060, 0 0 12px rgba(240,190,90,0.55); }
.mcd-slot.sel { box-shadow: inset 0 0 10px #000, 0 0 0 2px #e05030; }
.mcd-side { flex: 1; min-width: 0; }
.mcd-st { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 8px; margin: 0 0 8px; font-size: 12.5px; }
.mcd-st dt { color: #a8926a; } .mcd-st dd { margin: 0; color: #f0e0b8; font-variant-numeric: tabular-nums; }
.mcd-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 0; font-size: 12px; color: #d8c290; }
.mcd-act:empty { display: none; }
/* 기술 패 (책갈피·명부 같이) */
.mc-sk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-sk li { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 2px 6px; font-size: 12px; line-height: 1.4; }
.mc-sk li b { font-family: var(--title); font-weight: 400; font-size: 14px; color: inherit; }
.mc-sk li small { font-size: 10.5px; opacity: 0.7; justify-self: start; }
.mc-sk li span { grid-column: 2 / 4; opacity: 0.9; }
#mc-doll-grid .mc-sk li b { color: #f6e2b0; }
#mc-doll-grid .mc-sk li.au b { color: #ffd77a; }
#mc-doll-grid .mc-sk li.gk b { color: #e8c070; }                 /* 혼각에서 온 오라·발동 (lib/gakaura.js) — 혼각 금빛 */
#mc-doll-grid .mc-sk li.gk .mc-seal { box-shadow: 0 0 0 1px #d8b46a, 0 0 6px rgba(216,180,106,0.6); }
.mcd-got { margin-top: 6px; border-top: 1px dashed rgba(216,180,106,0.35); padding-top: 4px; }
.mcd-got h5 { margin: 0 0 3px; font: 400 12px var(--title); color: #a8926a; letter-spacing: 0.1em; }
.mcd-got ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mcd-got li { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 0 6px; font-size: 11.5px; color: #d8c8a0; }
.mcd-got li b { font-family: var(--title); font-weight: 400; color: #bfe0ff; }
.mcd-got li span { opacity: 0.85; }

/* ── 행수 창: 한지 명부 ── */
#panel-merc { left: 18px; top: 60px; width: 560px; max-width: calc(100vw - 24px); max-height: min(84vh, 760px); overflow: auto; z-index: 21; }
#panel-merc h3 { display: flex; align-items: center; gap: 0; position: sticky; top: -6px; z-index: 2; background: inherit; }
#panel-merc h3 .mcp-t small { font-family: var(--font); font-size: 12px; color: var(--ink2); margin-left: 8px; letter-spacing: 0; }
#panel-merc h3 .close { margin-left: auto; background: none; border: none; color: var(--ink2); font-size: 17px; }
#panel-merc .line b { font-family: var(--title); font-weight: 400; color: var(--red); margin-right: 4px; }
.mcp-blurb { margin: -4px 0 10px; font-size: 13px; color: #4a3a2a; line-height: 1.6; }
.mcp-blurb span { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 12px; color: #fbeedd; background: #6d5636; border-radius: 2px; }
.mcp-gate { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; padding: 10px 12px; color: #3a2416; font-size: 14px; line-height: 1.6;
  background: rgba(142,42,34,0.07); border: 1px dashed rgba(142,42,34,0.55); }
.mcp-gate i { font-style: normal; flex: none; display: grid; place-items: center; width: 40px; height: 40px; font: 700 22px/1 'Noto Serif KR', serif; color: #fbeedd; background: #5a4a3a;
  border-radius: 2px; transform: rotate(-5deg); box-shadow: inset 0 0 0 2px rgba(255,236,214,0.4); }
.mcp-gate b { font-family: var(--title); font-weight: 400; color: var(--red); font-size: 16px; }
.mcp-cur { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 6px 8px; background: rgba(40,24,12,0.08); border-left: 3px solid #b08a48; }
.mcp-cur canvas { flex: none; width: 50px; height: 58px; background: radial-gradient(ellipse at 50% 40%, #3a2414, #120804 80%); box-shadow: 0 0 0 2px #b08a48, 0 0 0 3px #2a1408; }
.mcp-cur > div { flex: 1; min-width: 0; }
.mcp-cur.dead { border-left-color: #c0302a; background: rgba(160,30,20,0.08); }
.mcp-cn b { font-family: var(--title); font-weight: 400; font-size: 17px; color: var(--ink); }
.mcp-cn small, .mcp-cn em { font-size: 12px; color: var(--ink2); font-style: normal; }
.mcp-cs { font-size: 12.5px; color: #4a3a2a; margin-top: 2px; } .mcp-cs b { color: #2c3f73; }
.mcp-res b, .mcp-hire b { font-weight: 400; letter-spacing: 0; }
.mcp-resline { margin: 0 0 8px 12px; font-size: 13px; color: #6a1a10; }
.mcp-h { margin: 12px 0 6px; font-family: var(--title); font-size: 17px; color: var(--red); letter-spacing: 3px; border-bottom: 1px solid rgba(110,80,40,0.45); }
.mcp-h small { font-family: var(--font); font-size: 11.5px; letter-spacing: 0; color: var(--ink2); margin-left: 8px; }
.mcp-list { display: flex; flex-direction: column; gap: 8px; }
.mcp-card { position: relative; display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: start; padding: 8px; color: var(--ink);
  background: url("../ui/tex_hanji.png") center / 300px, rgba(255,250,235,0.35); border: 1px solid #a08a62; box-shadow: inset 0 0 0 1px rgba(255,250,235,0.5); }
.mcp-card:hover { box-shadow: inset 0 0 0 1px rgba(255,250,235,0.5), 0 0 0 1px #8a2a18; }
.mcp-pc { width: 84px; height: 104px; background: radial-gradient(ellipse at 50% 40%, #4a2e18, #120804 80%); box-shadow: 0 0 0 1px #0a0503, 0 0 0 3px #b08a48, 0 0 0 4px #2a1408; }
.mcp-cb { min-width: 0; }
.mcp-cn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcp-vn { font-family: var(--title); font-size: 14px; color: #6a1a10; }
.mcp-vd { font-size: 12px; color: #5a4a36; margin: 2px 0; line-height: 1.45; }
.mcp-card .mc-sk { margin-top: 4px; }
.mcp-card .mc-sk li span { color: #3a2a1a; }
.mcp-hire { align-self: center; flex-direction: column; gap: 2px; min-width: 92px; justify-content: center; padding: 6px 10px; }
.mcp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--ink2); }
.mcp-foot .gold { margin: 0; font-size: 14px; }
/* 휴대폰: 화면 가득, 후보 칸은 단추를 아래로 */
body.touch #panel-merc { left: 50%; transform: translateX(-50%); top: max(8px, env(safe-area-inset-top)); width: min(560px, calc(100vw - 16px)); max-height: calc(100vh - 16px); }
@media (max-width: 600px) {
  .mcp-card { grid-template-columns: 64px 1fr; }
  .mcp-pc { width: 64px; height: 80px; }
  .mcp-hire { grid-column: 1 / 3; flex-direction: row; justify-content: center; }
  .mcd-row { flex-direction: column; }
}
body.uis #hud #panel-merc { max-height: min(calc(84vh / var(--uis, 1)), 760px); }
/* 낮은 휴대폰 가로: 초상을 줄여 장비 칸이 한눈에 */
body.phone .mcd-por { width: 74px; height: 86px; }
body.phone .mcd-por canvas { width: 92px; height: 104px; margin-left: -46px; bottom: -3px; }
body.phone .mcd-nm b { font-size: 18px; }
body.phone .mcd-head { padding-bottom: 6px; }
/* ── 용병 책갈피: 싸움 능력치 (장비 몫이 보이게, 2026-10-08) ── */
.mcd-dps { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 12px; margin: 0 0 8px; padding: 5px 8px 6px;
  background: linear-gradient(180deg, rgba(60,34,14,0.55), rgba(20,10,4,0.55)); border: 1px solid rgba(176,138,72,0.45); box-shadow: inset 0 0 10px rgba(0,0,0,0.6); }
.mcd-dps-n { display: flex; flex-direction: column; line-height: 1.1; }
.mcd-dps-n small { font-size: 10.5px; color: #a8926a; letter-spacing: 0.08em; }
.mcd-dps-n b { font-family: var(--title); font-weight: 400; font-size: 24px; color: #ffd77a; text-shadow: 1px 1px 0 #000; font-variant-numeric: tabular-nums; }
.mcd-dps-k { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: #b8a27a; padding-bottom: 3px; }
.mcd-dps-k b { font-family: var(--title); font-weight: 400; font-size: 14px; color: #f0d090; }
.mcd-dps-k .bar { height: 5px; background: #120a06; border: 1px solid #4a3220; }
.mcd-dps-k .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a4a18, #d8b46a); }
.mcd-st dt[title], .mcd-st dd[title] { cursor: help; }
.dlt { font-style: normal; font-size: 10.5px; margin-left: 4px; letter-spacing: 0; }
.dlt.up { color: #8fdc7a; } .dlt.dn { color: #ff8a6a; }
.mcd-dps-n .dlt { font-size: 12px; margin: 0; }
.mcd-res { display: flex; gap: 4px; margin: 0 0 8px; }
.mcd-res span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 1px 0; font-size: 12px; color: #f0e0b8; font-variant-numeric: tabular-nums;
  background: rgba(10,5,2,0.45); border: 1px solid color-mix(in srgb, var(--c) 55%, #2a1408); }
.mcd-res span i { font-style: normal; font-size: 10.5px; color: color-mix(in srgb, var(--c) 70%, #f0e0b8); }
.mcd-res span.cap { box-shadow: inset 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.mcd-res span.neg { color: #ff8a6a; }
.mcd-res .dlt { margin-left: 0; }
/* 먹이기 단추 (merc.js): 허리띠의 체력 탕약을 한 번에 — 패 오른쪽 끝, 손가락 크기 */
.mcf-feed { position: relative; flex: none; width: 34px; height: 34px; margin-left: 2px; padding: 0; border: 1px solid #a8803e; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #5a2a14, #2a1208); box-shadow: 0 1px 3px rgba(0,0,0,0.7), inset 0 0 4px rgba(0,0,0,0.5); pointer-events: auto; }
.mcf-feed.hidden { display: none; }
.mcf-feed i { position: absolute; inset: 3px; background: center / contain no-repeat; }
.mcf-feed b { position: absolute; right: -5px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 2px; border-radius: 8px; background: #1e1610; color: #ffd27a; font: 700 10px/15px 'Gowun Batang', serif; text-align: center; }
.mcf-feed:hover, .mcf-feed:active { border-color: #ffd27a; }
.mcf-feed.urge { animation: mcf-urge 0.8s ease-in-out infinite alternate; }
@keyframes mcf-urge { to { box-shadow: 0 0 0 3px rgba(255,90,60,0.55), inset 0 0 4px rgba(0,0,0,0.5); } }
body.touch .mcf-feed { width: 40px; height: 40px; }