/* 나인드라실 — 밝고 단순한 눈마을 화면 */
:root {
  --bg: #e8f0f5;
  --card: #ffffff;
  --ink: #23323e;
  --ink-soft: #5d6f7c;
  --line: #d3dee6;
  --accent: #3a7cb8;
  --accent-ink: #ffffff;
  --gold: #c9962b;
  --good: #2f8a57;
  --warn: #c0504d;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(30, 60, 90, .14);
  --soft: #f2f6f9;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #16202a; --card: #1f2b36; --ink: #e6eef4; --ink-soft: #9fb1be; --line: #33444f; --accent: #5aa0dc; --soft: #283743;
  --shadow: 0 6px 24px rgba(0,0,0,.4);
} }
:root[data-theme="dark"] {
  --bg: #16202a; --card: #1f2b36; --ink: #e6eef4; --ink-soft: #9fb1be; --line: #33444f; --accent: #5aa0dc; --soft: #283743;
  --shadow: 0 6px 24px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
body { overscroll-behavior: none; }
#app { height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
button { white-space: nowrap; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; min-height: 40px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.big { min-height: 48px; font-size: 1.05rem; padding: 10px 22px; }
button.warn { background: var(--warn); color: #fff; border-color: var(--warn); }
input[type=text] { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; min-height: 42px; width: 100%; background: var(--card); color: var(--ink); }
.muted { color: var(--ink-soft); }
.tiny { font-size: .78rem; }
.tnum { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.screen { flex: 1; min-height: 0; }
.screen.center { display: grid; place-items: center; padding: 16px; overflow: auto; }

/* 타이틀 */
.title-card { text-align: center; display: grid; gap: 14px; width: min(360px, 100%); }
.eyebrow { margin: 0; letter-spacing: .3em; font-size: .8rem; color: var(--ink-soft); }
.logo { margin: 0; font-size: clamp(2.4rem, 10vw, 3.4rem); letter-spacing: .06em;
  background: linear-gradient(180deg, #3a7cb8, #6fb6cc); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 캐릭터 만들기 */
.create { width: min(560px, 100%); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 16px; }
.create h2 { margin: 0; font-size: 1.25rem; }
.steps { display: flex; gap: 6px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps i.on { background: var(--accent); }
.look { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
@media (max-width: 480px) { .look { grid-template-columns: 1fr; } }
.preview { background: linear-gradient(180deg, #f4f8fb, #dfeaf1); /* 눈밭 배경은 어두운 모드에서도 그대로 */ border-radius: 12px; display: grid; place-items: center; height: 170px; }
.choice { display: grid; gap: 6px; }
.choice b { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opts button { padding: 6px 10px; min-height: 36px; font-size: .9rem; }
.opts button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); font-weight: 700; }
.swatch { width: 18px; height: 18px; border-radius: 50%; display: inline-block; vertical-align: -4px; margin-right: 4px; border: 1px solid rgba(0,0,0,.15); }
.stat-row { display: grid; grid-template-columns: 52px 1fr 40px 32px 40px; gap: 8px; align-items: center; }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.meet { display: grid; justify-items: center; gap: 10px; text-align: center; }
.meet img { width: min(240px, 70%); filter: drop-shadow(0 8px 12px rgba(30,60,90,.2)); animation: hop 2.4s ease-in-out infinite; }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.err { color: var(--warn); font-size: .85rem; min-height: 1.2em; margin: 0; }

/* 게임 화면 */
#screen-game { position: relative; display: flex; flex-direction: column; }
.hud { display: flex; gap: 8px; align-items: center; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--card) 92%, transparent); border-bottom: 1px solid var(--line); z-index: 2; }
.chip-btn { display: flex; gap: 8px; align-items: center; padding: 4px 10px 4px 4px; border-radius: 999px; min-height: 40px; }
.chip-btn img { width: 43px; height: 32px; object-fit: contain; }
.chip-btn canvas { width: 32px; height: 32px; object-fit: contain; }
.chip-btn .lv { font-size: .8rem; color: var(--ink-soft); }
.icon-btn { width: 40px; padding: 0; font-size: 1.1rem; }
.silver { font-weight: 700; color: var(--gold); white-space: nowrap; }
#world { flex: 1; width: 100%; min-height: 0; display: block; touch-action: none; }
.map-name { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); background: rgba(35,50,62,.78); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: .85rem; pointer-events: none; z-index: 1; transition: opacity .6s; }
.toast { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(35,50,62,.9); color: #fff; padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px); z-index: 3; font-size: .92rem; text-align: center; }
.panel-wrap { position: absolute; inset: 0; background: rgba(20,35,48,.35); display: grid; place-items: center; padding: 16px; z-index: 4; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 18px; display: grid; gap: 12px; }
.panel h3 { margin: 0; font-size: 1.15rem; }
.panel .say { background: var(--soft); border-radius: 12px; padding: 10px 12px; margin: 0; }
.panel .say b { color: var(--accent); }
.pet-head { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.pet-head img { width: 128px; height: 96px; object-fit: contain; }
.el { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: var(--soft); }
.el i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* 능력치: 세로로 한 줄씩 */
.stats4 { display: grid; grid-template-columns: 1fr; gap: 4px; max-width: 260px; }
.stats4 div { display: flex; justify-content: space-between; align-items: center; background: var(--soft); border-radius: 10px; padding: 5px 12px; font-size: .85rem; color: var(--ink-soft); }
.stats4 b { color: var(--ink); font-size: 1rem; }
.skills { display: grid; gap: 6px; font-size: .86rem; }
.skills div { border-left: 3px solid var(--line); padding-left: 8px; }
.skills div.locked { color: var(--ink-soft); }
.grade { font-weight: 800; color: var(--accent); }

/* 전투 */
.battle { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-rows: 1fr auto auto; gap: 8px; padding: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #dbe8f0 0%, #eef4f8 45%, #f6f9fb 100%); color: #23323e; overflow: auto; }
.b-field { display: grid; gap: 4px; align-content: center; max-width: min(640px, calc(100dvh - 300px)); width: 100%; margin: 0 auto; }
.b-label { font-size: .75rem; color: #5d6f7c; margin-top: 4px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.slot { aspect-ratio: 1 / 1.02; border-radius: 12px; border: 1px dashed rgba(90,120,140,.25); min-width: 0; }
.slot:not(.empty) { border: none; }
.unit { position: relative; height: 100%; border-radius: 12px; background: rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(30,60,90,.12);
  display: grid; grid-template-rows: 1fr auto auto auto; padding: 4px 6px 6px; gap: 2px; transition: transform .15s, box-shadow .15s, opacity .3s; }
.unit .art { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; container-type: size; }
.unit .art img { width: 100%; height: 100%; object-fit: contain; }
.unit .art canvas { position: absolute; inset: 0; margin: auto; height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.mon-art { font-size: 58cqh; line-height: 1; filter: drop-shadow(0 3px 3px rgba(30,60,90,.25)); padding: 4px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--el) 22%, transparent) 0 60%, transparent 62%); }
.unit .st { position: absolute; top: 0; right: 0; font-size: .9rem; }
.unit .nm { font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit .nm span { font-weight: 400; color: #5d6f7c; }
.hpbar { height: 6px; border-radius: 3px; background: #d3dee6; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: #3fa46a; transition: width .35s; }
.hpbar i.low { background: #d9583b; }
.hpnum { font-size: .66rem; color: #5d6f7c; min-height: .9em; }
.unit.down { opacity: .32; filter: grayscale(1); }
.unit.acting { box-shadow: 0 0 0 3px #3a7cb8, 0 4px 12px rgba(30,60,90,.2); transform: translateY(-2px); }
.unit.target { box-shadow: 0 0 0 3px #d9583b; cursor: pointer; animation: pulse 1s ease-in-out infinite; }
.unit.blocked { opacity: .55; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(217,88,59,.45); } }
.unit.shake { animation: shake .3s; }
/* 맞으면 그림이 잠깐 붉게 번쩍 (2026-11-08) */
.unit.shake .art img { animation: hitflash .35s; }
@keyframes hitflash { 0%, 100% { filter: none; } 30% { filter: brightness(1.3) saturate(1.1); } }   /* 맞을 때 색만 살짝 밝게 (빨간 빛 테두리는 버프처럼 보여서 뺌, 2026-11-09 대표) */
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pop { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 800; color: #c0392b; font-size: 1.15rem;
  text-shadow: 0 1px 0 #fff, 0 0 4px #fff; pointer-events: none; animation: rise .9s ease-out forwards; }
.pop.crit { color: #e67e22; font-size: 1.45rem; }
@keyframes rise { to { transform: translate(-50%, -26px); opacity: 0; } }
.b-cmd { max-width: 720px; width: 100%; margin: 0 auto; background: #fff; border-radius: 14px; box-shadow: 0 4px 16px rgba(30,60,90,.14); padding: 10px 12px; display: grid; gap: 8px; }
.b-who { font-size: .95rem; }
.b-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.b-btns button { flex: 1 1 auto; }
.b-btns .auto { display: flex; gap: 4px; align-items: center; font-size: .85rem; padding: 0 4px; }
.b-timer { height: 4px; border-radius: 2px; background: #e3ebf1; overflow: hidden; }
.b-timer i { display: block; height: 100%; width: 100%; background: #3a7cb8; transition: width .25s linear; }
.b-wait { text-align: center; padding: 8px; }
.b-result { display: grid; gap: 8px; }
.b-result h3 { margin: 0; }
.b-result .level { color: #2f8a57; font-weight: 700; }
.b-result .grade { color: #3a7cb8; font-weight: 800; }
.b-result .skill { color: #8a5a1a; font-weight: 700; }
.b-result .say { background: #f2f6f9; border-radius: 10px; padding: 8px 10px; margin: 0; }

/* 진형 */
.fm-label { font-size: .78rem; color: var(--ink-soft); }
.fm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }   /* 8:8 (2026-11-09): 한 줄 4칸 */
.fm-slot { aspect-ratio: 1; padding: 4px; display: grid; place-items: center; border-style: dashed; font-size: .72rem; gap: 0; }
.fm-slot.has { border-style: solid; }
.fm-slot.pick { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.fm-slot img, .fm-slot canvas { width: 70%; height: auto; max-height: 60%; object-fit: contain; }

/* 우두머리: 조금 크고, 발밑에 은은한 호박빛 원 */
.unit.chief { box-shadow: 0 0 0 2px #c98a3a, 0 3px 12px rgba(201,138,58,.35); }
.unit.chief .art > img, .unit.chief .art > .mon-art { transform: scale(1.15); }
.unit .aura { position: absolute; left: 50%; bottom: 6%; width: 78%; height: 22%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(230,160,70,.55), rgba(230,160,70,0) 70%); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; transform: translateX(-50%) scale(.9); } }
.unit .nm em { font-style: normal; color: #b06f1e; font-weight: 800; }
/* 포획 가능 */
.unit.wild { box-shadow: 0 0 0 2px #3fa46a, 0 3px 10px rgba(63,164,106,.25); }
.unit .badge { position: absolute; left: 2px; top: 2px; font-size: .6rem; font-weight: 700; color: #fff; background: #3fa46a; padding: 1px 5px; border-radius: 999px; }
.b-btns .cap { border-color: #3fa46a; color: #2f8a57; font-weight: 700; }
.unit.heal.target { box-shadow: 0 0 0 3px #3fa46a; animation: none; }
.pop.heal { color: #2f8a57; }
.b-result .caught { color: #2f8a57; font-weight: 800; }
/* 상점·펫 목록 */
.shop-item { background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.pet-list { display: grid; gap: 6px; }
.pet-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid var(--line); }
.pet-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.pet-row img { width: 64px; height: 48px; object-fit: contain; }
.chip { font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--accent); font-weight: 700; }
details.test summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft); }
.unit.chief .nm { white-space: normal; line-height: 1.15; }
.unit.chief .nm em { display: block; font-size: .64rem; }
.b-btns .sk { display: grid; line-height: 1.1; border-color: #8fb3d4; background: color-mix(in srgb, #3a7cb8 8%, #fff); }
.b-btns .sk small { font-size: .66rem; color: #5d6f7c; }
.pet-act { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pet-act button { min-height: 34px; padding: 4px 8px; font-size: .82rem; }
/* 펫 목록: 버튼은 아래 줄로 */
.pet-list .pet-row { grid-template-columns: 48px minmax(0, 1fr); }
.pet-list .pet-act { grid-column: 1 / -1; }

/* 룬 표시: 1룬 초록, 2룬 금색 */
.rune { display: inline-block; font-size: .66rem; font-weight: 800; padding: 1px 5px; border-radius: 999px; margin-right: 4px; color: #1d3a2a; vertical-align: 1px; }
.rune.r1 { background: #65F5A0; }
.rune.r2 { background: #FFD76A; color: #4a3510; }
.altar-box { display: grid; gap: 8px; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.pet-act button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* 보스 */
.unit.boss { box-shadow: 0 0 0 2px #6a4f8a, 0 4px 16px rgba(106,79,138,.35); }
.unit.boss .mon-art { font-size: 72cqh; }
/* 위쪽 줄: 좁은 화면에서 넘치지 않게 */
.hud { min-width: 0; overflow: hidden; }
.chip-btn { min-width: 0; flex-shrink: 1; }
.chip-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn img, .chip-btn canvas { flex-shrink: 0; }
@media (max-width: 480px) { .chip-btn .lv + .lv { display: none; } }

/* 전투 화면은 어두운 모드에서도 밝은 눈밭 색을 쓴다 (버튼이 검게 보이지 않게) */
.battle { color-scheme: light; --card: #ffffff; --ink: #23323e; --ink-soft: #5d6f7c; --line: #d3dee6; --soft: #f2f6f9; --accent: #3a7cb8; }
.battle button { background: #fff; color: #23323e; border-color: #d3dee6; }
.battle button.primary { background: #3a7cb8; color: #fff; border-color: #3a7cb8; }
.battle button.sk { background: #eef4fa; border-color: #8fb3d4; }
.battle button.cap { color: #2f8a57; border-color: #3fa46a; }
/* 자동 전투 버튼: 늘 보이는 곳 */
.b-auto { position: absolute; top: 8px; right: 10px; z-index: 2; min-height: 34px; padding: 4px 12px; font-size: .85rem; border-radius: 999px; }
.b-auto[aria-pressed="true"] { background: #3a7cb8 !important; color: #fff !important; border-color: #3a7cb8 !important; animation: pulse-auto 1.6s ease-in-out infinite; }
@keyframes pulse-auto { 50% { box-shadow: 0 0 0 4px rgba(58,124,184,.25); } }

/* 캐릭터 능력치 점수 */
.pts { flex-shrink: 0; font-size: .72rem; font-weight: 800; color: #fff; background: #e07a3a; border-radius: 999px; padding: 2px 7px; animation: pulse-auto 1.6s ease-in-out infinite; }
.altar-box .stat-row { grid-template-columns: 52px 1fr 36px 36px 44px; }
.altar-box .stat-row button { min-height: 34px; padding: 2px 6px; }
.up { color: #2f8a57; font-weight: 800; }

/* 자동사냥 버튼: 사냥터 지도 오른쪽 아래 */
.hunt-btn { position: absolute; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2; border-radius: 999px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(30,60,90,.2); }
.hunt-btn.on { background: #3a7cb8; color: #fff; border-color: #3a7cb8; animation: pulse-auto 1.6s ease-in-out infinite; }


.b-next { width: 100%; background: #f2f6f9; color: #5d6f7c; border-style: dashed; }

/* 채팅창: 투명한 배경, 테두리 있는 글씨 (옛 스톤에이지 느낌). 지도와 전투에서 같은 창 */
.chat { position: absolute; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: min(460px, calc(100% - 16px)); z-index: 2;
  display: grid; gap: 4px; pointer-events: none; }
.chat-log { max-height: 7.6em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: .86rem; line-height: 1.35;
  color: #fff; font-weight: 600; letter-spacing: .01em;
  text-shadow: -1px -1px 0 #1b2530, 1px -1px 0 #1b2530, -1px 1px 0 #1b2530, 1px 1px 0 #1b2530, 0 0 3px rgba(0,0,0,.6); }
.chat-log p { margin: 0; }
.chat-log b { font-weight: 800; }
.chat-log .good { color: #6dff6d; }
.chat-log .bad { color: #ff6b6b; }
.chat-log .info, .chat-log .skill, .chat-log .status, .chat-log .down { color: #8fd3ff; }
.chat-log .crit { color: #ffb347; }
.chat-log .chief { color: #ffd76a; }
.chat-log .miss { color: #d7dee4; }
.chat-log .turn { color: #ffe680; }
.chat-input { display: flex; gap: 6px; align-items: center; pointer-events: auto; position: relative; }
.chat-input input { min-height: 32px; padding: 4px 10px; font-size: .85rem; background: rgba(255,255,255,.55); border-color: rgba(60,80,100,.35); color: #1b2530; }
.chat-color { width: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: var(--c) !important; border: 2px solid #1b2530 !important; flex-shrink: 0; }
.chat-palette { position: absolute; bottom: 38px; left: 0; display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(27,37,48,.85); }
.chat-palette button { width: 28px; min-height: 28px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid #fff; }
/* 알림 띠는 위쪽으로 (아래는 채팅창) */
.toast { top: 108px; bottom: auto; }
/* 자동사냥 버튼: 좁은 화면에서는 채팅창 위로 */
@media (max-width: 620px) { .hunt-btn { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 8.6em + 44px); } }
/* 전투 화면 안에서는 기록 자리에 놓인다 */
.b-chat { max-width: 720px; width: 100%; margin: 0 auto; min-height: 92px; }
.b-chat .chat { position: static; width: 100%; pointer-events: auto; }
.b-chat .chat-log { max-height: 6.8em; }
.battle { grid-template-rows: 1fr auto auto; }

/* 펫 창 오른쪽 6칸: 가진 펫 바로 보기 */
.panel.wide { width: min(580px, 100%); }
.pd { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 12px; align-items: start; }
.pd-main { display: grid; gap: 12px; min-width: 0; }
.pd-tabs { display: grid; gap: 6px; position: sticky; top: 0; }
.pd-slot { position: relative; display: grid; justify-items: center; gap: 0; padding: 4px; min-height: 0; height: 70px; border-radius: 12px; }
.pd-slot img { width: 56px; height: 42px; object-fit: contain; }
.pd-slot span { font-size: .7rem; color: var(--ink-soft); }
.pd-slot i { position: absolute; top: 2px; left: 3px; font-style: normal; font-size: .58rem; font-weight: 800; color: var(--accent); }
.pd-slot.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pd-slot.empty { display: block; height: 70px; border: 1px dashed var(--line); border-radius: 12px; }
/* 좁은 화면: 6칸을 위쪽 한 줄로 */
@media (max-width: 520px) {
  .pd { grid-template-columns: 1fr; }
  .pd-tabs { order: -1; grid-template-columns: repeat(6, minmax(0, 1fr)); position: static; }
  .pd-slot, .pd-slot.empty { height: 58px; }
  .pd-slot img { width: 100%; height: 34px; }
}

/* 채팅창: 10줄이 보이고, 글씨는 크게, 지난 글은 위로 넘겨 본다 */
.chat { width: min(760px, calc(100% - 16px)); }
.chat-log { font-size: 1.275rem; line-height: 1.3; font-family: "Nanum Gothic", "Pretendard", "Malgun Gothic", sans-serif; font-weight: 800; max-height: calc(10 * 1.3em); overflow-y: auto; display: block; pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; overscroll-behavior: contain; }
@media (max-width: 620px) { .chat-log { font-size: .9rem; } .hunt-btn { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 13em + 44px); } }
.b-chat .chat-log { font-size: .98rem; max-height: calc(5 * 1.3em); }
@media (max-width: 620px) { .b-chat .chat-log { font-size: .81rem; } }
/* 상태창 오른쪽 줄: 캐릭터 + 펫 6칸 */
.pd-tabs { grid-template-columns: 1fr; }
.pd-line { height: 1px; background: var(--line); margin: 2px 4px; }
.pd-slot.char canvas { width: 56px; height: 42px; }
.pd-slot .hp { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #3fa46a var(--hp), rgba(127,127,127,.25) var(--hp)); }
.pd-slot em { position: absolute; inset: auto 0 14px; font-style: normal; font-size: .55rem; color: #ff6b6b; font-weight: 800; }
.pd-slot .pts-dot { color: #fff; background: #e07a3a; border-radius: 999px; padding: 0 4px; }
@media (max-width: 520px) { .pd-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); } .pd-line { display: none; } }
/* 휴대폰: 전투 카드를 조금 길게 해서 그림 자리를 넓힌다 */
@media (max-width: 620px) { .slot { aspect-ratio: 1 / 1.15; } .unit .nm { font-size: .66rem; } }
.unit.boss .art > img { transform: scale(1.2); }
/* 펫 창 안의 출전·탑승·잠금·방생 버튼 줄 */
.pd-main > .pet-act { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; justify-content: flex-start; }
/* 휴대폰 옆줄: 캐릭터 칸 그림도 펫 칸과 같은 크기 */
@media (max-width: 620px) { .pd-slot.char canvas { width: 100%; height: 34px; object-fit: contain; } }

/* ── 석판 창 (펫·캐릭터 창부터 시험) ─────────────────────
   크림색 돌판 + 도톰한 가장자리 + 새긴 글씨. 강조(고른 칸·주요 버튼)만 금빛.
   밝은/어두운 화면 모두 같은 돌 색을 쓴다. */
.panel.stone {
  --card: #f5efe3; --ink: #3a3228; --ink-soft: #7a6d5a; --line: #d6c9b2; --soft: rgba(122, 100, 66, .08);
  --accent: #a9823a; --accent-ink: #fffaf0; --gold: #b8913f;
  color: var(--ink); border-radius: 24px; padding: 22px;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(160, 140, 110, .07) 38.4%, transparent 39.2% 70%, rgba(160, 140, 110, .06) 70.3%, transparent 71%),
    linear-gradient(160deg, #fbf7ef 0%, #f0e8d9 55%, #e7ddca 100%);
  border: 1px solid rgba(140, 118, 82, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(120, 98, 62, .15),
    0 6px 0 #cbbb9e, 0 7px 0 rgba(110, 90, 60, .35), 0 22px 44px rgba(35, 25, 12, .38);
}
.panel.stone h3 { font-size: 1.2rem; letter-spacing: .04em; color: #4a3f31; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
.panel.stone b { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
/* 새긴 칸: 능력치·기술·안내 */
.panel.stone .stats4 div, .panel.stone .say, .panel.stone .el {
  background: rgba(122, 100, 66, .08); box-shadow: inset 0 1px 2px rgba(90, 70, 40, .22), 0 1px 0 rgba(255, 255, 255, .7); }
.panel.stone .skills div { border-left-color: var(--gold); }
.panel.stone .grade { color: #9a7428; }
/* 돌 버튼 */
.panel.stone button { background: linear-gradient(#faf6ee, #e9dfcc); border: 1px solid #cdbd9f; color: var(--ink);
  box-shadow: 0 2px 0 #c7b694, inset 0 1px 0 rgba(255, 255, 255, .9); }
.panel.stone button:hover:not(:disabled) { border-color: var(--gold); }
.panel.stone button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #c7b694; }
.panel.stone button:disabled { opacity: .55; }
.panel.stone button.primary { background: linear-gradient(#d6b468, #ad8538); border-color: #93712e; color: #fffaf0;
  text-shadow: 0 1px 0 rgba(80, 55, 15, .5); box-shadow: 0 2px 0 #7f6127, inset 0 1px 0 rgba(255, 240, 200, .7); }
.panel.stone button.warn { background: linear-gradient(#e8a184, #c8664a); border-color: #a24f37; color: #fff; }
.panel.stone .chip { background: rgba(169, 130, 58, .16); color: #7d5d1f; }
.panel.stone input[type=text] { background: rgba(255, 252, 245, .8); border-color: #cdbd9f; box-shadow: inset 0 1px 3px rgba(90, 70, 40, .2); }
/* 옆줄 칸: 돌에 판 홈, 고른 칸은 금테 */
.panel.stone .pd-slot { background: linear-gradient(#f3ecdf, #e8dece); border-color: #d2c3a7; box-shadow: inset 0 1px 3px rgba(90, 70, 40, .2); }
.panel.stone .pd-slot.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), inset 0 1px 3px rgba(90, 70, 40, .15); }
.panel.stone .pd-slot.empty { background: rgba(122, 100, 66, .05); border-color: rgba(140, 118, 82, .3); }
.panel.stone .pd-slot i { color: #9a7428; }
.panel.stone .pd-line { border-color: rgba(140, 118, 82, .35); background: rgba(140, 118, 82, .35); }
.panel.stone .pet-row { background: rgba(255, 252, 245, .45); border-color: #d6c9b2; }
.panel.stone .pet-row.on { border-color: var(--gold); background: rgba(214, 180, 104, .12); }

/* ── 석판 UI (모든 창·위쪽 줄·아래 띠·알림·전투 명령) ─────────
   크림색 돌판, 도톰한 가장자리, 새긴 글씨. 강조만 금빛.
   니플헤임 눈밭에 묻히지 않게 가장자리와 그림자를 조금 진하게. */
:root {
  --st-face: linear-gradient(160deg, #fbf7ef 0%, #f0e8d9 55%, #e4d9c4 100%);
  --st-edge: rgba(105, 84, 52, .55);
  --st-lip: #c2b08f;
  --st-ink: #3a3228; --st-soft: #7a6d5a; --st-gold: #a9823a;
  --st-shadow: 0 3px 0 var(--st-lip), 0 4px 0 rgba(90, 70, 40, .45), 0 8px 18px rgba(20, 30, 40, .38);
}
.ico { width: 22px; height: 22px; flex-shrink: 0; display: block; }
img.ico { object-fit: contain; }
.stone-ico, .stone-pill, .hud-band, .toast, .map-name, .b-cmd {
  color: var(--st-ink); background: var(--st-face); border: 1px solid var(--st-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(120, 98, 62, .14), var(--st-shadow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.stone-ico:hover:not(:disabled), .stone-pill:hover:not(:disabled) { border-color: var(--st-gold); }
.stone-ico:active:not(:disabled), .stone-pill:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 var(--st-lip), 0 3px 8px rgba(20,30,40,.3); }

/* 위쪽: 지도 위에 뜬 돌판들 */
.hud { position: absolute; top: 0; left: 0; right: 0; background: none; border: 0; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
  align-items: flex-start; pointer-events: none; overflow: visible; z-index: 2; }
.hud > * { pointer-events: auto; }
.hud .spacer { pointer-events: none; }
.hud-icons { display: flex; gap: 8px; }
.stone-ico { position: relative; width: 54px; height: 54px; min-height: 0; padding: 4px 0 3px; border-radius: 14px;
  display: grid; place-items: center; gap: 1px; color: #5a4a33; }
.stone-ico .ico { width: 24px; height: 24px; }
.stone-ico span { font-size: .66rem; font-weight: 800; letter-spacing: .02em; }
.stone-ico .dot { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: .64rem; font-weight: 800; color: #fff; background: #e07a3a;
  border-radius: 999px; padding: 1px 5px; text-shadow: none; box-shadow: 0 1px 2px rgba(0,0,0,.3); animation: pulse-auto 1.6s ease-in-out infinite; }
.hud-right { display: grid; gap: 8px; justify-items: end; }
.hud-row { display: flex; gap: 8px; }
.stone-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 12px 4px 9px; border-radius: 999px; font-weight: 800; font-size: .86rem; }
.stone-pill .ico { width: 20px; height: 20px; }
.stone-pill.silver { color: #8a6a24; }
#hud-auto[aria-pressed="true"], .hunt-btn.on { background: linear-gradient(#e2c27a, #b58c3d); color: #fffaf0; border-color: #8a6a28;
  text-shadow: 0 1px 0 rgba(80, 55, 15, .5); animation: pulse-gold 1.8s ease-in-out infinite; }
@keyframes pulse-gold { 50% { box-shadow: inset 0 1px 0 rgba(255,240,200,.7), var(--st-shadow), 0 0 0 4px rgba(214, 180, 104, .35); } }
/* 자동사냥 버튼: 위쪽 오른쪽, 은화 줄 아래 (옛 아래쪽 자리 규칙을 덮음) */
.hud .hunt-btn, .hud .hunt-btn.on { position: static; right: auto; bottom: auto; }
@media (max-width: 620px) { .hud .hunt-btn { bottom: auto; } }
.hunt-btn:disabled { opacity: .7; }

/* 맨 아래 얇은 석판 띠: 이름·Lv·HP·출전 펫·장소 */
.hud-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 0; height: calc(40px + env(safe-area-inset-bottom));
  padding: 0 12px env(safe-area-inset-bottom); border-radius: 14px 14px 0 0; border-bottom: 0;
  display: flex; align-items: center; gap: 10px; font-size: .85rem; text-align: left; overflow: hidden; }
.hud-band canvas { width: 30px; height: 30px; flex-shrink: 0; }
.hud-band .band-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.hud-band .lv { color: var(--st-soft); font-size: .78rem; }
.hud-band .band-hp, .hud-band .band-pet, .hud-band .band-place { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.hud-band small { font-size: .66rem; font-weight: 800; color: var(--st-soft); }
.hud-band .band-hp .tnum { font-size: .74rem; color: var(--st-soft); }
.hud-band .band-place { margin-left: auto; color: #5a4a33; font-weight: 800; }
.hud-band .band-place .ico { width: 16px; height: 16px; color: var(--st-gold); }
.mini-hp { display: inline-block; width: 64px; height: 7px; border-radius: 4px; background: rgba(90, 70, 40, .2); box-shadow: inset 0 1px 2px rgba(60, 45, 20, .35); overflow: hidden; }
.mini-hp i { display: block; height: 100%; background: linear-gradient(#5cc085, #2f8a57); }
.band-pet .mini-hp { width: 40px; }
@media (max-width: 520px) {
  .hud-band { gap: 7px; padding-left: 8px; padding-right: 8px; font-size: .8rem; }
  .hud-band .band-hp .tnum, .hud-band .band-pet .lv { display: none; }
  .mini-hp { width: 44px; }
  .band-pet .mini-hp { width: 28px; }
}
/* 채팅은 띠 위에 (투명 그대로) */
.chat { bottom: calc(48px + env(safe-area-inset-bottom)); }
.b-chat .chat { bottom: auto; }

/* 알림 띠·장소 이름도 석판 */
.toast { top: 128px; border-radius: 14px; font-weight: 700; }
.map-name { top: 78px; border-radius: 999px; font-weight: 800; letter-spacing: .06em; padding: 6px 18px; }
@media (max-width: 520px) { .toast { top: 136px; } .map-name { top: 128px; } }

/* 창 뒤 어둡게: 석판이 떠 보이게 */
.panel-wrap { background: rgba(20, 28, 36, .42); }
/* 모든 석판 창 안의 칸들: 새긴 홈 */
.panel.stone .shop-item, .panel.stone .altar-box { background: rgba(122, 100, 66, .08); box-shadow: inset 0 1px 3px rgba(90, 70, 40, .22), 0 1px 0 rgba(255, 255, 255, .7); }
.panel.stone .opts button.on { border-color: var(--gold); background: linear-gradient(#f3e3b8, #e2c98c); }
.panel.stone .silver { color: #8a6a24; }
.panel.stone details.test summary { color: var(--ink-soft); }
.panel.stone .fm-slot.pick { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.panel.stone .bar { background: rgba(90, 70, 40, .18); }
.panel.stone .bar i { background: var(--gold); }

/* 전투: 명령 상자·자동 전투 버튼도 석판 */
.b-cmd { border-radius: 18px; padding: 12px 14px; }
.battle .b-cmd button { background: #f3ecdf linear-gradient(#faf6ee, #e9dfcc); border: 1px solid #cdbd9f; color: #3a3228; box-shadow: 0 2px 0 #c7b694, inset 0 1px 0 rgba(255,255,255,.9); }
.battle .b-cmd button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #c7b694; }
.battle .b-cmd button.primary { background: linear-gradient(#d6b468, #ad8538); border-color: #93712e; color: #fffaf0; text-shadow: 0 1px 0 rgba(80,55,15,.5); }
.battle .b-cmd button.sk { background: linear-gradient(#f6f0e2, #e6d9bf); border-color: #c4ab78; }
.battle .b-cmd button.sk small { color: #7a6d5a; }
.battle .b-cmd button.cap { color: #2f6e45; border-color: #6fae84; }
.b-timer { background: rgba(90, 70, 40, .18); }
.b-timer i { background: linear-gradient(90deg, #d6b468, #a9823a); }
.b-next { background: rgba(122, 100, 66, .08) !important; color: #7a6d5a !important; border-style: dashed !important; box-shadow: none !important; }
.battle .b-auto { background: linear-gradient(160deg, #fbf7ef, #e4d9c4); color: #3a3228; border: 1px solid rgba(105, 84, 52, .55); box-shadow: 0 2px 0 #c2b08f, 0 4px 10px rgba(20,30,40,.25); font-weight: 800; }
.battle .b-auto[aria-pressed="true"] { background: linear-gradient(#e2c27a, #b58c3d) !important; color: #fffaf0 !important; border-color: #8a6a28 !important; animation: pulse-gold 1.8s ease-in-out infinite; }

/* ── 펫 상태 창 (스톤에이지 PET STATUS 정리) ─────────── */
.panel.stone h3 { font-size: 1.05rem; }
.pet-head { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; }
.pet-head img { width: 104px; height: 82px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(60, 45, 20, .25)); }
.ph-info { display: grid; gap: 5px; min-width: 0; }
.ph-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ph-name b { font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph-name .lv { color: var(--ink-soft); font-weight: 800; font-size: .9rem; white-space: nowrap; }
.ph-name .rune { margin: 0; }
.panel.stone .pen { width: 28px; min-height: 28px; height: 28px; padding: 0; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.pen .ico { width: 16px; height: 16px; }
.ph-sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.meter { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: .74rem; }
.meter small { font-weight: 800; color: var(--ink-soft); font-size: .66rem; }
.meter .tnum { color: var(--ink-soft); min-width: 4.5em; text-align: right; }
.mbar { height: 9px; border-radius: 5px; background: rgba(90, 70, 40, .18); box-shadow: inset 0 1px 2px rgba(60, 45, 20, .35); overflow: hidden; }
.mbar i { display: block; height: 100%; }
.meter.xp .mbar i { background: linear-gradient(#e6c983, #b58c3d); }
.meter.hp .mbar i { background: linear-gradient(#5cc085, #2f8a57); }
.rename .err { margin-top: 2px; }
/* 능력치 4줄(왼쪽) + 기술 칸(오른쪽) */
.pet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.pet-body .stats4 { max-width: none; }
.sk-col { display: grid; gap: 6px; }
.sk-chips { display: grid; gap: 4px; }
.panel.stone .sk-chip { min-height: 30px; padding: 3px 10px; font-size: .84rem; font-weight: 800; border-radius: 10px; text-align: left; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--gold); }
.panel.stone .sk-chip.on { background: linear-gradient(#f3e3b8, #e2c98c); border-color: var(--gold); }
.sk-desc { background: rgba(122, 100, 66, .08); box-shadow: inset 0 1px 3px rgba(90, 70, 40, .22); border-radius: 10px; padding: 6px 9px; font-size: .84rem; line-height: 1.35; }
/* 아래 버튼 한 줄: 아이콘 위, 글자 아래 */
.pd-main > .pet-act { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.pd-main > .pet-act .tool { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 4px 2px; border-radius: 10px; display: grid; place-items: center; gap: 1px; }
.pd-main > .pet-act .tool span { font-size: .68rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pd-main > .pet-act .tool .ico { width: 20px; height: 20px; }
.panel.stone .tool.on { border-color: var(--gold); color: #7d5d1f; background: linear-gradient(#f6ecd2, #e8d6a8); opacity: 1; }
/* 목록 창 안의 탑승 버튼 (가로 모양) */
.pet-list .tool { display: inline-flex; align-items: center; gap: 4px; }
.pet-list .tool .ico { width: 16px; height: 16px; }
/* 휴대폰: 한 화면에 들어가게 조금 줄임 */
@media (max-width: 520px) {
  .panel.stone { padding: 14px; border-radius: 20px; }
  .panel-wrap { padding: 10px; }
  .pd { gap: 8px; }
  .pd-main { gap: 8px; }
  .pet-head { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .pet-head img { width: 84px; height: 66px; }
  .stats4 div { padding: 3px 10px; }
  .pet-body { gap: 8px; }
}
/* 휴대폰 위쪽 오른쪽: 자동 전투는 아이콘만, 자동사냥 글씨는 작게 */
@media (max-width: 520px) {
  .hud { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .hud-icons { gap: 6px; }
  .stone-ico { width: 50px; height: 50px; }
  .hud-right { gap: 6px; max-width: calc(100vw - 186px); }
  .hud-row { gap: 6px; }
  #hud-auto { padding: 4px 9px; }
  #hud-auto span { display: none; }
  .stone-pill { min-height: 34px; font-size: .8rem; }
  .hud .hunt-btn { font-size: .7rem; padding: 4px 10px 4px 7px; white-space: normal; text-align: right; line-height: 1.15; }
  .hud-band .pts { display: none; }
}
@media (max-width: 420px) { .hud-band .band-pet { display: none; } }
/* 휴대폰 조이스틱: 터치 화면에서만, 오른쪽 아래 (아래 석판 띠 48px + 채팅 입력칸 바로 위, 채팅 글은 왼쪽부터라 덜 가림) */
.stick { display: none; position: absolute; right: 14px; bottom: calc(48px + env(safe-area-inset-bottom) + 50px); z-index: 3;
  width: 116px; height: 116px; border-radius: 50%; background: rgba(255,255,255,.28); border: 2px solid rgba(35,50,62,.25);
  touch-action: none; -webkit-user-select: none; user-select: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: 2px solid rgba(35,50,62,.35); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.stick.on { background: rgba(255,255,255,.4); }
@media (hover: none) and (pointer: coarse) { .stick { display: block; } }

/* ── 가로 화면 하나의 배치 (PC·휴대폰 가로 공통) ───────────────────
   전투: 왼쪽 마당(우리 편 | 적, 좌우로 마주 봄) + 오른쪽 기록·명령 상자 */
.battle {
  --cell: min(calc((100dvh - 64px) / 4 - 6px), calc((100vw - 400px) / 4 - 8px), 190px);
  grid-template-columns: auto minmax(280px, 560px); grid-template-rows: 1fr auto;
  grid-template-areas: "field chat" "field cmd"; justify-content: center; column-gap: 16px; row-gap: 8px;
}
.b-field { grid-area: field; max-width: none; width: auto; margin: 0; display: flex; gap: 22px; align-items: center; justify-content: center; }
.b-side { display: grid; gap: 4px; }
.b-side.enemy .b-label { text-align: right; }
.b-side .grid4 { grid-template-columns: repeat(2, var(--cell)); grid-auto-rows: var(--cell); }
.b-side .slot, .b-side .slot:not(.empty) { aspect-ratio: auto; }
.b-chat { grid-area: chat; align-self: end; max-width: none; min-height: 0; }
.b-chat .chat-log { max-height: max(calc(3 * 1.3em), min(calc(12 * 1.3em), calc(100dvh - 210px))); }
.b-cmd { grid-area: cmd; max-width: none; }
.b-auto { right: max(10px, env(safe-area-inset-right)); }
/* 세로로 긴 창(좁은 PC 창 등): 마당을 위, 기록·명령을 아래로 */
@media (orientation: portrait) {
  .battle { --cell: min(calc((100vw - 60px) / 4 - 6px), calc((100dvh - 320px) / 4 - 6px), 150px);
    grid-template-columns: minmax(0, 720px); grid-template-rows: 1fr auto auto; grid-template-areas: "field" "chat" "cmd"; }
  .b-field { gap: 14px; }
  .b-chat .chat-log { max-height: calc(5 * 1.3em); }
}
/* 작은 칸: 글씨를 줄여 그림 자리를 남긴다 */
@media (max-height: 500px) {
  .unit { padding: 3px 4px 4px; }
  .unit .nm { font-size: .62rem; }
  .hpnum { font-size: .6rem; min-height: 0; }
  .unit .badge { font-size: .52rem; padding: 0 4px; }
  .b-cmd { padding: 8px 10px; gap: 6px; }
  .b-btns button { min-height: 36px; padding: 6px 10px; }
  .b-who { font-size: .88rem; }
  /* 지도 채팅: 낮은 화면에서는 글씨를 줄이고 6줄만 */
  .chat-log { font-size: .86rem; max-height: calc(6 * 1.3em); }
}

/* 휴대폰 가로: 펫·캐릭터 창이 왼쪽에 붙으므로 조이스틱은 오른쪽 아래(석판 띠 위). 채팅은 왼쪽 아래, 조이스틱 자리를 비켜 선다 */
@media (hover: none) and (pointer: coarse) {
  .stick { left: auto; right: max(14px, env(safe-area-inset-right)); bottom: calc(48px + env(safe-area-inset-bottom) + 8px); }
  .chat { width: min(620px, calc(100% - 116px - 44px - env(safe-area-inset-right))); }
}
@media (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .stick { width: 104px; height: 104px; }
  .chat { width: min(620px, calc(100% - 104px - 44px - env(safe-area-inset-right))); }
}
/* 채팅을 치는 동안: 키보드 바로 위(보이는 화면 아래쪽)에 붙인다 (chat.js가 top을 맞춤) */
.chat.typing { position: fixed !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto; bottom: auto !important;
  width: min(760px, calc(100vw - 16px)) !important; transform: translateY(-100%); z-index: 60;
  background: rgba(20, 28, 36, .6); border-radius: 12px; padding: 6px; }
.chat.typing .chat-log { max-height: min(calc(5 * 1.3em), calc(var(--vvh, 300px) - 64px)); }

/* 휴대폰을 세로로 들었을 때: 가로로 돌리라는 안내 (돌리면 바로 사라짐) */
.rotate-hint { display: none; }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .rotate-hint { display: grid; place-content: center; justify-items: center; gap: 14px; position: fixed; inset: 0; z-index: 100;
    background: linear-gradient(180deg, #2a3a48, #16202a); color: #f3ecdf; text-align: center; padding: 24px; }
  .rotate-hint .ri-phone { width: 64px; height: 104px; border: 4px solid #d6b468; border-radius: 14px; position: relative;
    animation: ri-turn 2.4s ease-in-out infinite; }
  .rotate-hint .ri-phone::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; background: #d6b468; }
  .rotate-hint p { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; }
  .rotate-hint small { color: #b9ad97; font-size: .85rem; }
}
@keyframes ri-turn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* 왼쪽에 붙는 창(펫·캐릭터 창): 배경을 어둡게 하지 않고 지도를 누를 수 있다. 위 아이콘 줄과 아래 석판 띠 사이에 선다 */
.panel-wrap.dock { background: transparent; pointer-events: none; place-items: start; justify-content: start;
  padding: calc(64px + env(safe-area-inset-top)) 10px calc(56px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.panel-wrap.dock .panel { pointer-events: auto; max-height: 100%; }
@media (max-height: 500px) { .panel-wrap.dock { padding-bottom: calc(46px + env(safe-area-inset-bottom)); } }

/* ── 비스듬한 전장 (서머너즈워식 공간 배치) ─────────────────────
   규칙은 4×2 그대로. 우리 편 왼쪽 아래, 적 오른쪽 위. 머리 위: 이름 · [레벨 동그라미|HP 막대] · 효과 아이콘 */
.b-field.stage { position: relative; display: block; grid-area: field; align-self: center; justify-self: center; margin: 0;
  width: min(calc(100vw - 340px), calc((100dvh - 24px) * 1.55), 1100px); max-width: none; aspect-ratio: 1.55; container-type: size; }
@media (orientation: portrait) { .b-field.stage { width: min(100%, 900px); } }
.b-ground { position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(ellipse 30% 26% at 30% 66%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 30% 24% at 70% 38%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 52%, #eef4f8 0%, #dbe7ef 60%, #c9d8e3 100%);
  box-shadow: inset 0 0 0 1px rgba(90,120,140,.18), inset 0 -30px 60px rgba(70,100,125,.12); }
.b-field.stage[data-area$="Cave"] .b-ground, .b-field.stage[data-area="cave"] .b-ground {
  background:
    radial-gradient(ellipse 30% 26% at 30% 66%, rgba(200,225,240,.55), transparent 70%),
    radial-gradient(ellipse 30% 24% at 70% 38%, rgba(200,225,240,.5), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 52%, #c7d6e1 0%, #a9bccb 60%, #8ea3b4 100%); }
.b-team { position: absolute; inset: 0; pointer-events: none; }
.stage .slot { position: absolute; width: 14cqw; transform: translate(-50%, -100%); aspect-ratio: auto; border: none; border-radius: 0; pointer-events: auto; }
.stage .slot:has(.boss) { width: 24cqw; }
.stage .unit { height: auto; display: grid; padding: 0; gap: 0; background: none; box-shadow: none; border-radius: 0; transition: transform .15s, opacity .3s; cursor: default; }
.stage .unit .art { aspect-ratio: 4 / 3; overflow: visible; }
.stage .unit .art img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.stage .unit.mine .art img { transform: scaleX(-1); }          /* 펫 그림은 왼쪽을 보고 있다: 우리 편(왼쪽 아래)만 뒤집어 적(오른쪽 위)을 보게 */
.stage .unit.chief .art > img { transform: scale(1.15); }
.stage .unit .art canvas { z-index: 2; }
.stage .unit .art .mount { position: absolute; inset: 0; }
.stage .unit .art canvas.rider { inset: auto 0 34% 0; height: 72%; }
.stage .unit .foot { position: absolute; left: 14%; right: 14%; bottom: 0; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40,60,80,.32), transparent); z-index: 0; }
.stage .unit .head { position: relative; display: grid; justify-items: center; gap: 1px; margin-bottom: 1px; z-index: 3; }
.stage .unit .nm { font-size: clamp(9px, 1.25cqw, 12px); font-weight: 800; color: #24313c; max-width: 100%;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.stage .unit .nm em { color: #a8691b; }
.stage .unit .hpline { display: flex; align-items: center; gap: 2px; width: 86%; }
.stage .unit .lv { flex: none; width: clamp(14px, 1.9cqw, 18px); height: clamp(14px, 1.9cqw, 18px); border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(8px, 1cqw, 10px); font-weight: 900; color: #fff; background: #3a7cb8; border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.stage .unit.foe .lv { background: #c0473a; }
.stage .unit .hpbar { flex: 1; height: clamp(4px, .7cqw, 6px); border-radius: 3px; background: rgba(30,40,50,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.stage .unit.foe .hpbar i { background: #d9583b; }
.stage .unit .hpnum { font-size: clamp(8px, 1cqw, 10px); min-height: 0; color: #2f3e4a; text-shadow: 0 0 2px #fff, 0 0 2px #fff; line-height: 1.1; }
.stage .unit .fx { display: flex; gap: 2px; align-items: center; min-height: clamp(14px, 2cqw, 18px); }
/* 고를 수 있는 대상·지금 차례·우두머리·포획 가능·보스: 발밑 원으로 */
.stage .unit.target .foot { background: radial-gradient(closest-side, rgba(217,88,59,.55), rgba(217,88,59,.12) 70%, transparent); box-shadow: 0 0 0 2px #d9583b; animation: pulse 1s ease-in-out infinite; }
.stage .unit.heal.target .foot { background: radial-gradient(closest-side, rgba(63,164,106,.5), transparent); box-shadow: 0 0 0 2px #3fa46a; animation: none; }
.stage .unit.target { cursor: pointer; animation: none; box-shadow: none; }
.stage .unit.acting { transform: translateY(-3px); box-shadow: none; }
.stage .unit.acting .foot { box-shadow: 0 0 0 2px #d6b468; background: radial-gradient(closest-side, rgba(214,180,104,.55), transparent); }
.stage .unit.wild .foot { box-shadow: 0 0 0 2px #3fa46a; }
.stage .unit.boss .foot { box-shadow: 0 0 0 2px #6a4f8a; }
.stage .unit.chief, .stage .unit.wild, .stage .unit.boss { box-shadow: none; }
.stage .unit .badge { top: auto; bottom: 18%; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; }
.stage .unit .pop { top: 10%; z-index: 6; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
/* 효과 아이콘: 초록 상승 · 빨강 감소 · 보라 상태 이상 · 주황 테두리 분노. 오른쪽 아래 숫자 = 남은 턴 */
.fx-ic { position: relative; flex: none; width: clamp(14px, 2cqw, 18px); height: clamp(14px, 2cqw, 18px); border-radius: 5px; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(0,0,0,.3); }
.fx-ic svg { width: 72%; height: 72%; }
.fx-ic.up { background: linear-gradient(#5cc27f, #2f8a52); }
.fx-ic.dn { background: linear-gradient(#e2735a, #b0402b); }
.fx-ic.stx { background: linear-gradient(#9284c0, #5b4a8a); }
.fx-ic.rage { background: linear-gradient(#f0a03c, #c8641e); box-shadow: 0 0 0 1.5px #ffd27a, 0 1px 0 rgba(0,0,0,.3); }
.fx-ic i { position: absolute; left: -3px; top: -4px; font-style: normal; font-size: 8px; line-height: 1; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.8); }
.fx-ic b { position: absolute; right: -4px; bottom: -4px; min-width: 11px; height: 11px; padding: 0 2px; border-radius: 6px; background: #2b2620; color: #fff;
  font-size: 8px; line-height: 11px; text-align: center; border: 1px solid #fbf7ef; }
.fx-more { font-size: 9px; font-weight: 800; color: #3a3228; text-shadow: 0 0 2px #fff; }
/* 새로 걸린 효과: 머리 위로 떠올랐다 사라짐 */
.fx-pop { position: absolute; left: 50%; bottom: 100%; display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; white-space: nowrap;
  background: rgba(20,28,36,.78); color: #fff; font-size: clamp(10px, 1.3cqw, 13px); font-weight: 800; pointer-events: none; z-index: 8;
  animation: fx-up 1.1s ease-out forwards; }
.fx-pop .fx-ic { width: 16px; height: 16px; }
@keyframes fx-up { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; transform: translate(-50%, -14px); } 100% { opacity: 0; transform: translate(-50%, -20px); } }
/* 기술 이름 띠: 쓴 쪽 가장자리에서 미끄러져 나왔다 들어감 */
.b-banner { position: absolute; top: 6%; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; z-index: 2000; pointer-events: none;
  background: linear-gradient(160deg, #fbf7ef, #e9dfcc); border: 1px solid rgba(140,118,82,.4); box-shadow: 0 4px 0 #cbbb9e, 0 10px 22px rgba(35,25,12,.3); color: #3a3228; }
.b-banner.mine { left: 0; border-radius: 0 16px 16px 0; }
.b-banner.foe { right: 0; flex-direction: row-reverse; padding: 6px 8px 6px 16px; border-radius: 16px 0 0 16px; text-align: right; }
.b-banner img, .b-banner canvas { width: 46px; height: 40px; object-fit: contain; }
.b-banner .mon-art { font-size: 30px; }
.b-banner small { display: block; font-size: 11px; color: #7a6d5a; }
.b-banner b { font-size: 16px; letter-spacing: .03em; }
.b-banner.show.mine { animation: bn-l 1s ease-out; }
.b-banner.show.foe { animation: bn-r 1s ease-out; }
@keyframes bn-l { 0% { transform: translateX(-100%); opacity: 0; } 15%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes bn-r { 0% { transform: translateX(100%); opacity: 0; } 15%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; } }
/* 겹친 유닛끼리 누르기를 가로막지 않게: 머리 위 정보와 빈 자리는 통과, 그림만 누른다 */
.stage .slot, .stage .unit, .stage .unit .head { pointer-events: none; }
.stage .unit .art { pointer-events: auto; }
.stage .unit .art .foot { pointer-events: none; }

/* ── 전투 화면 전체를 전장으로 (서머너즈워식) ─────────────────────
   전장은 화면 가득. 채팅은 왼쪽 위에 작게(투명), 명령 상자는 오른쪽 아래에 겹쳐 올린다. 자동 전투는 오른쪽 위. */
.battle:not([hidden]) { display: block !important; padding: 0 !important; overflow: hidden; }
.battle .b-field.stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-width: none; margin: 0; }
.battle .b-ground { border-radius: 0; box-shadow: none; }
.battle .b-chat { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 8px; width: min(42%, 460px); max-width: none; min-height: 0; margin: 0; z-index: 1500; pointer-events: none; }
.battle .b-chat .chat { pointer-events: none; }
.battle .b-chat .chat-input { display: none; }            /* 전투 중 입력칸은 숨김 (지도에서 씀) */
.battle .b-chat .chat-log { font-size: .86rem !important; max-height: calc(4 * 1.3em) !important; pointer-events: auto; }
.battle .b-cmd { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(48%, 520px); max-width: none; margin: 0; z-index: 1500;
  padding: 8px 10px; gap: 6px; background: rgba(251, 247, 239, .9); }
.battle .b-cmd .b-btns button { min-height: 38px; padding: 6px 10px; }
.battle .b-auto { top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 1600; }
.battle .b-banner { top: 22%; }
@media (max-height: 500px) {
  .battle .b-cmd { width: min(52%, 460px); padding: 6px 8px; }
  .battle .b-cmd .b-btns button { min-height: 32px; padding: 4px 8px; font-size: .8rem; }
  .battle .b-cmd .b-who { font-size: .8rem; }
  .battle .b-chat .chat-log { font-size: .74rem !important; max-height: calc(3 * 1.3em) !important; }
}
/* 펫 크기는 화면의 가로·세로 중 좁은 쪽에 맞춘다 (휴대폰 가로에서 머리가 잘리지 않게) */
.battle .stage .slot { width: min(14cqw, 23cqh); }
.battle .stage .slot:has(.boss) { width: min(24cqw, 38cqh); }

/* 화면 구석 배치 (사용자 결정, 서머너즈워·33 원정대 지침): 우리 편 왼쪽 아래 → 적 오른쪽 위
   채팅 왼쪽 위 · 행동 순서 위 가운데 · 자동 전투 오른쪽 위 · 명령 상자 오른쪽 아래 */
.battle .b-chat { top: max(8px, env(safe-area-inset-top)); bottom: auto; width: min(34%, 400px); }
.battle .b-cmd { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); }
.battle .b-auto { top: max(8px, env(safe-area-inset-top)); bottom: auto; }
.battle .b-banner { top: auto; bottom: 32%; }
.battle .b-ground {
  background:
    radial-gradient(ellipse 30% 26% at 30% 70%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 30% 26% at 70% 44%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 52%, #eef4f8 0%, #dbe7ef 60%, #c9d8e3 100%); }
.battle .b-field.stage[data-area$="Cave"] .b-ground, .battle .b-field.stage[data-area="cave"] .b-ground {
  background:
    radial-gradient(ellipse 30% 26% at 30% 70%, rgba(200,225,240,.55), transparent 70%),
    radial-gradient(ellipse 30% 26% at 70% 44%, rgba(200,225,240,.55), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 52%, #c7d6e1 0%, #a9bccb 60%, #8ea3b4 100%); }
/* 행동 순서 줄: 위 가운데, 동그란 얼굴. 우리 편 파란 테, 적 빨간 테, 지금 차례는 금테로 크게 */
.b-order { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; gap: 4px; align-items: center;
  padding: 4px 8px; border-radius: 999px; background: rgba(251, 247, 239, .78); box-shadow: 0 2px 8px rgba(20,30,40,.2); max-width: 46%; overflow: hidden; pointer-events: none; }
.b-order i { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; border: 2px solid #3a7cb8; transition: transform .2s; }
.b-order i.foe { border-color: #c0473a; }
.b-order i.now { border-color: #d6b468; box-shadow: 0 0 0 2px #d6b468; transform: scale(1.18); }
.b-order img { width: 120%; height: 120%; object-fit: contain; }
.b-order i.mine img { transform: scaleX(-1); }
.b-order canvas { width: 100%; height: 100%; }
.b-order span { font-size: 16px; }
@media (max-height: 500px) { .b-order i { width: 22px; height: 22px; } }
/* 차례인 유닛: 살짝 커지고 발밑이 금빛 */
.stage .unit.acting { transform: translateY(-3px) scale(1.06); }
.stage .unit .pop.miss { color: #5d6f7c; font-size: 1rem; }
/* 낮은 화면(휴대폰 가로): 머리 위 이름은 숨기고(우두머리 표시는 남김), 행동 순서 줄은 왼쪽 아래로 */
@media (max-height: 500px) {
  .battle .stage .unit .nm { display: none; }
  .battle .stage .unit.chief .nm, .battle .stage .unit.boss .nm { display: none; font-size: 9px; }
  .battle .stage .slot { width: min(14cqw, 21cqh); }
  .b-order { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); transform: none; max-width: 38%; }
}
/* 펫 크기: 줄끼리 덜 겹치게 조금 작게 (서머너즈워처럼 전장이 넓어 보이게) */
.battle .stage .slot { width: min(11.5cqw, 19cqh); }
.battle .stage .slot:has(.boss) { width: min(20cqw, 34cqh); }
@media (max-height: 500px) { .battle .stage .slot { width: min(11.5cqw, 18cqh); } }

/* 머리 위 (서머너즈워식): 효과 아이콘은 HP 막대 위, HP 막대는 얇게 + 왼쪽 레벨 동그라미. 이름·HP 숫자는 숨김(우두머리 표시만 남김) */
.battle .stage .unit .nm, .battle .stage .unit .hpnum { display: none; }
.battle .stage .unit.chief .nm, .battle .stage .unit.boss .nm { display: none; font-size: 10px; }   /* 정예·보스도 머리 위 이름 안 띄움 (2026-11-10 대표) */
.battle .stage .unit.chief .nm span, .battle .stage .unit.chief .nm, .battle .stage .unit.boss .nm span, .battle .stage .unit.boss .nm { white-space: nowrap; }
.battle .stage .unit .fx { justify-content: center; min-height: 0; margin-bottom: 2px; }
.battle .stage .unit .hpline { width: 80%; }
.battle .stage .unit .hpbar { height: clamp(4px, .55cqw, 5px); }

/* 효과 글자 (서머너즈워식): 배경 없이 테두리 굵은 색깔 글자. 해로운 것 보라, 이로운 것 초록, 분노 주황. 여러 개면 위로 쌓임 */
.fx-pop { background: none; padding: 0; gap: 3px; font-size: clamp(11px, 1.45cqw, 15px); font-weight: 900; letter-spacing: .02em;
  bottom: calc(100% + var(--stack, 0) * 1.25em);
  text-shadow: -1px -1px 0 #1b2530, 1px -1px 0 #1b2530, -1px 1px 0 #1b2530, 1px 1px 0 #1b2530, 0 0 4px rgba(0,0,0,.5); }
.fx-pop.up { color: #7dff8a; }
.fx-pop.dn, .fx-pop.stx { color: #f08cff; }
.fx-pop.rage { color: #ffb347; }
.fx-pop .fx-ic { width: 15px; height: 15px; }

/* 고를 수 있는 적: 머리 위 초록 화살표 (서머너즈워식) */
.stage .unit.target .head::before { content: "▼"; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); color: #4be06a; font-size: 18px; line-height: 1;
  text-shadow: 0 0 2px #1b2530, 0 1px 0 #1b2530; animation: tgt-bob .8s ease-in-out infinite; }
.stage .unit.heal.target .head::before { color: #7dff8a; }
@keyframes tgt-bob { 50% { transform: translate(-50%, -4px); } }
/* 기술 이름: 쓰는 유닛 머리 옆 */
.cast-label { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; white-space: nowrap; z-index: 9;
  font-size: clamp(11px, 1.4cqw, 15px); font-weight: 900; color: #fff; pointer-events: none; animation: cast-in .25s ease-out;
  text-shadow: -1px -1px 0 #1b2530, 1px -1px 0 #1b2530, -1px 1px 0 #1b2530, 1px 1px 0 #1b2530, 0 0 4px rgba(0,0,0,.5); }
.cast-label i { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(#f3d27a, #b8913f); box-shadow: 0 0 0 1px #1b2530; }
@keyframes cast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
/* 치명타: 큰 노란 글자 */
.stage .unit .pop.crit-word { top: -6%; font-size: clamp(14px, 2cqw, 22px); color: #ffd84a; font-weight: 900;
  text-shadow: -1px -1px 0 #6b3a00, 1px -1px 0 #6b3a00, -1px 1px 0 #6b3a00, 1px 1px 0 #6b3a00; }
/* 왼쪽 펫·캐릭터 창: 누를 때마다 크기가 바뀌지 않게 너비·높이를 고정 (내용이 길면 창 안에서 스크롤) */
.panel-wrap.dock { grid-template-columns: min(460px, calc(100vw - 20px)); grid-template-rows: minmax(0, 1fr); }
.panel-wrap.dock .panel { width: 100%; height: 100%; max-height: none; align-content: start; }
@media (min-height: 501px) { .panel-wrap.dock { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } }   /* 아래 채팅 입력칸은 가리지 않게 */

/* ── 펫 창 업그레이드 (2026-11-06, 서머너즈워 몬스터 창 참고) ─────────
   큰 그림(속성 색 빛) + 이름·등급·성향 + EXP/HP + 정보·기술·룬 각성 탭.
   옆줄·목록 아이콘에 속성 색 바탕, 레벨, 출전·탑승, 잠금 표시. */
.pet-hero { position: relative; height: 172px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse 62% 58% at 50% 70%, color-mix(in srgb, var(--el) 42%, transparent) 0, transparent 70%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--el) 18%, transparent), transparent 75%),
    linear-gradient(#f1e9da, #e3d7c0);
  box-shadow: inset 0 2px 6px rgba(90, 70, 40, .28), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255, 255, 255, .7); }
.pet-hero::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 46%; height: 14px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(rgba(60, 45, 20, .32), transparent 70%); }
.pet-hero img { position: relative; z-index: 1; height: 150px; max-width: 86%; object-fit: contain; margin-top: -6px;
  filter: drop-shadow(0 5px 4px rgba(60, 45, 20, .22)); animation: pet-breathe 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes pet-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3px) scale(1.012, .992); } }
.pet-hero.down img { filter: grayscale(.75) opacity(.7); animation: none; }
.hero-down { position: absolute; z-index: 2; right: 10px; bottom: 8px; font-style: normal; font-weight: 900; font-size: .78rem; color: #c8483a; }
.hero-badges { position: absolute; z-index: 2; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.pb { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  color: #6b5a40; background: rgba(255, 252, 245, .85); border: 1px solid rgba(140, 118, 82, .4); white-space: nowrap; }
.pb .ico { width: 12px; height: 12px; }
.pb.on { color: #fffaf0; background: linear-gradient(#d6b468, #ad8538); border-color: #93712e; }
.pb.lk { color: #7d5d1f; }
/* 성장 등급 알약: 낮음(갈색) · 중간(초록) · 높음(금) · SEVEN(무지개) */
.gpill { display: inline-block; font-size: .7rem; font-weight: 900; padding: 1px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.gpill.t1 { background: rgba(122, 100, 66, .16); color: #6b5a40; }
.gpill.t2 { background: #d9ecdc; color: #2f6e45; box-shadow: inset 0 0 0 1px #9fcaa9; }
.gpill.t3 { background: linear-gradient(#f3dc98, #d3a548); color: #5a3f0c; box-shadow: inset 0 0 0 1px #b88a2c; }
.gpill.t4 { background: linear-gradient(90deg, #e86a6a, #e8b45a, #7fcf7a, #5aa9e6, #a07ae0); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.panel.stone .pet-head { display: grid; grid-template-columns: 1fr; gap: 4px; }
.ph-meters { display: grid; gap: 4px; }
/* 탭: 돌에 판 홈 안에서 고른 탭만 도드라짐 */
.ptabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px;
  background: rgba(122, 100, 66, .12); box-shadow: inset 0 1px 3px rgba(90, 70, 40, .25); }
.panel.stone .ptabs button { min-height: 32px; padding: 2px 6px; border-radius: 9px; font-size: .84rem; font-weight: 800; color: var(--ink-soft);
  background: transparent; border: 1px solid transparent; box-shadow: none; }
.panel.stone .ptabs button[aria-selected="true"] { color: #6e521a; background: linear-gradient(#fbf7ef, #eadfc9); border-color: #cdbd9f; box-shadow: 0 1px 0 #c7b694, inset 0 1px 0 rgba(255, 255, 255, .9); }
.ptabs small { font-size: .7rem; color: var(--gold); }
.ptab { min-height: 168px; display: grid; gap: 8px; align-content: start; }
/* 정보 탭: 능력치 세로 4줄 + 막대(이 펫 안에서 어느 능력치가 높은지) + 소개 */
.pstats { display: grid; gap: 4px; }
.pstat { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 2.8em; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 10px; font-size: .85rem; color: var(--ink-soft);
  background: rgba(122, 100, 66, .08); box-shadow: inset 0 1px 2px rgba(90, 70, 40, .22), 0 1px 0 rgba(255, 255, 255, .7); }
.pstat b { color: var(--ink); font-size: 1rem; text-align: right; }
.pbar { display: block; height: 6px; border-radius: 4px; background: rgba(90, 70, 40, .14); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #d9be7c, #b58c3d); }
.pet-intro { margin: 0; padding: 7px 10px; border-radius: 10px; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); border-left: 3px solid var(--gold); background: rgba(255, 252, 245, .45); }
/* 기술 탭: 아이콘(액티브 금색 별, 패시브 청회색 방패) + 이름 + 효과 */
.skcards { display: grid; gap: 6px; }
.skc { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; align-items: start; padding: 7px 9px; border-radius: 12px;
  background: rgba(122, 100, 66, .08); box-shadow: inset 0 1px 2px rgba(90, 70, 40, .22), 0 1px 0 rgba(255, 255, 255, .7); }
.skc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; align-content: center; gap: 0; color: #fffaf0;
  background: linear-gradient(#d9b866, #a67c2e); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .7), 0 2px 0 #7f6127; }
.skc.pas .skc-ic { background: linear-gradient(#a9bfcc, #6c8798); box-shadow: inset 0 1px 0 rgba(235, 245, 250, .7), 0 2px 0 #50687a; }
.skc-ic .ico { width: 18px; height: 18px; }
.skc-ic small { font-size: .56rem; font-weight: 900; line-height: 1; }
.skc-txt { min-width: 0; display: grid; gap: 2px; font-size: .8rem; line-height: 1.4; }
.skc-txt b { font-size: .9rem; }
.skc-type { font-size: .64rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(169, 130, 58, .16); color: #7d5d1f; vertical-align: 1px; }
.skc.pas .skc-type { background: rgba(108, 135, 152, .18); color: #3f5a6b; }
.skc-desc { font-size: .74rem; color: var(--ink-soft); }
.pt-empty, .pt-next { margin: 0; }
/* 룬 각성 탭: 기본 → 1룬 → 2룬 */
.rsteps { display: flex; align-items: center; gap: 4px; }
.rstep { display: grid; justify-items: center; gap: 0; padding: 6px 10px; border-radius: 12px; min-width: 64px; color: var(--ink-soft);
  background: rgba(122, 100, 66, .08); box-shadow: inset 0 1px 2px rgba(90, 70, 40, .22); }
.rstep small { font-size: .62rem; }
.rstep.done { background: rgba(101, 245, 160, .22); color: #2f6e45; }
.rstep.now { background: linear-gradient(#f6ecd2, #e8d6a8); color: #6e521a; box-shadow: 0 0 0 2px var(--gold); }
.rline { flex: 1; height: 2px; min-width: 8px; background: rgba(140, 118, 82, .35); }
/* 옆줄 칸: 속성 색 바탕 + 잠금 자물쇠 + 탑승 표시 */
.panel.stone .pd-slot.pet { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--el) 34%, transparent) 0 40%, transparent 72%), linear-gradient(#f3ecdf, #e8dece); }
.pd-slot s.lk { position: absolute; top: 3px; right: 3px; text-decoration: none; color: #7d5d1f; line-height: 0; }
.pd-slot s.lk .ico { width: 11px; height: 11px; }
.panel.stone .pd-slot i.ride { color: #2f6e45; }
/* 펫 목록: 그림 칸(속성 색) + 이름·Lv·등급 + 속성·상태 + HP 막대, 아래 버튼 줄 */
.pet-list .pet-row { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 14px; }
.panel.stone .pr-art { position: relative; width: 76px; height: 62px; min-height: 0; padding: 0; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--el) 34%, transparent) 0 42%, transparent 74%), linear-gradient(#f3ecdf, #e8dece);
  border-color: #d2c3a7; box-shadow: inset 0 1px 3px rgba(90, 70, 40, .2); }
.pet-list .pr-art img { width: 70px; height: 56px; object-fit: contain; }
.pr-art em { position: absolute; bottom: 2px; inset-inline: 0; font-style: normal; font-size: .58rem; font-weight: 900; color: #c8483a; }
.pr-info { display: grid; gap: 3px; min-width: 0; align-content: center; }
.pr-name { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.pr-name b { font-size: 1rem; }
.pr-name .lv { color: var(--ink-soft); font-weight: 800; font-size: .84rem; }
.pr-name .rune { margin: 0; }
.pr-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pr-hp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.pr-hp .mbar { height: 6px; }
.pr-hp .mbar i { background: linear-gradient(#5cc085, #2f8a57); }
.pet-list .pet-act button { display: inline-flex; align-items: center; gap: 4px; }
.pet-list .pet-act .ico { width: 15px; height: 15px; }
.panel.stone .pet-list .pet-act button.on { border-color: var(--gold); color: #7d5d1f; background: linear-gradient(#f6ecd2, #e8d6a8); }
@media (max-width: 520px) {
  .pet-hero { height: 132px; }
  .pet-hero img { height: 116px; }
  .pet-hero::after { bottom: 10px; }
  .ptab { min-height: 150px; }
  .pstat { padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { .pet-hero img { animation: none; } }
/* 펫 창(왼쪽에 붙은 창): 창 크기는 그대로, 탭 칸만 넘겨 보고 아래 버튼 줄은 늘 보이게 */
.panel-wrap.dock .panel.petview { grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; }
.panel.petview .pd { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.panel.petview .pd-tabs { align-self: start; }
.panel.petview .pd-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.panel.petview .pd-main > * { flex-shrink: 0; }
.panel.petview .ptab { flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding: 1px 2px 2px; }
.panel.petview .pd-main > .pet-act { margin-top: auto; }
@media (max-width: 520px) { .panel.petview .pd { grid-template-rows: auto minmax(0, 1fr); } }
/* 펫 목록 버튼: 한 줄에 들어가게 조금 작게 */
.pet-list .pet-act { gap: 4px; flex-wrap: nowrap; }
.panel.stone .pet-list .pet-act button { min-height: 30px; padding: 3px 8px; font-size: .78rem; white-space: nowrap; }
.pet-list .pet-act .ico { width: 14px; height: 14px; }
/* 창 높이가 낮은 PC: 그림 칸을 조금 줄여 탭 칸 자리를 넓힘 */
@media (min-width: 521px) and (max-height: 820px) { .pet-hero { height: 148px; } .pet-hero img { height: 128px; } }
/* 아래 버튼 줄: 글자가 길면 두 줄로 (탑승 2룬, 회복약 3이 잘리지 않게) */
.pd-main > .pet-act .tool span { white-space: normal; word-break: keep-all; line-height: 1.05; text-overflow: clip; text-align: center; }
/* 옆줄(캐릭터+펫 6칸)이 창보다 길면 옆줄만 넘겨 보기 */
.panel.petview .pd-tabs { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
/* ── 휴대폰 가로 (높이 낮음): 펫 창을 넓게, 왼쪽 그림·이름·막대 / 오른쪽 탭, 아래 버튼 줄 ── */
@media (orientation: landscape) and (max-height: 500px) {
  .panel-wrap.dock { grid-template-columns: min(580px, calc(100vw - 160px)); }
  .panel.stone.petview { padding: 10px 12px; border-radius: 18px; }
  .panel.petview .pd { gap: 8px; grid-template-columns: minmax(0, 1fr) 64px; }
  .panel.petview .pd-slot, .panel.petview .pd-slot.empty { height: 58px; }
  .panel.petview .pd-slot img, .panel.petview .pd-slot.char canvas { width: 48px; height: 34px; }
  .panel.petview .pd-main { display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hero tabs" "hero pane" "head pane" "meter pane" "ren pane" "act act"; gap: 5px 10px; overflow: hidden; }
  .panel.petview .pet-hero { grid-area: hero; height: 70px; border-radius: 12px; }
  .panel.petview .pet-hero img { height: 64px; margin-top: 0; }
  .panel.petview .pet-hero::after { bottom: 4px; height: 8px; }
  .panel.petview .hero-badges { top: 4px; left: 4px; }
  .panel.petview .pb { font-size: .6rem; padding: 1px 5px; }
  .panel.petview .pet-head { grid-area: head; gap: 2px; }
  .panel.petview .ph-name b { font-size: 1rem; }
  .panel.petview .ph-sub { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .panel.petview .ph-sub > span { overflow: hidden; text-overflow: ellipsis; }
  .panel.petview .ph-meters { grid-area: meter; gap: 2px; }
  .panel.petview .meter { grid-template-columns: 26px minmax(0, 1fr) auto; font-size: .66rem; }
  .panel.petview .meter .tnum { min-width: 0; }
  .panel.petview .rename { grid-area: ren; }
  .panel.petview .ptabs { grid-area: tabs; }
  .panel.petview .ptabs button { min-height: 28px; font-size: .8rem; }
  .panel.petview .ptab { grid-area: pane; min-height: 0; }
  .panel.petview .pstat { padding: 3px 9px; font-size: .8rem; }
  .panel.petview .pstat b { font-size: .9rem; }
  .panel.petview .pd-main > .pet-act { grid-area: act; margin-top: 0; }
  .panel.petview .pd-main > .pet-act .tool { min-height: 40px; padding: 2px; }
  .panel.petview .pd-main > .pet-act .tool .ico { width: 16px; height: 16px; }
  .panel.petview .pd-main > .pet-act .tool span { font-size: .62rem; }
}
/* 아주 작은 휴대폰 가로 (높이 360 이하): 더 촘촘하게 */
@media (orientation: landscape) and (max-height: 360px) {
  .panel.petview .pd-main { grid-template-columns: clamp(124px, 36%, 172px) minmax(0, 1fr); gap: 4px 8px; }
  .panel.petview .pet-hero { height: 54px; }
  .panel.petview .pet-hero img { height: 50px; }
  .panel.stone.petview .pen { width: 22px; height: 22px; min-height: 22px; }
  .panel.petview .ph-name { gap: 4px; }
  .panel.petview .ph-name b { font-size: .92rem; }
  .panel.petview .ph-name .lv { font-size: .8rem; }
  .panel.petview .ptabs button { min-height: 26px; padding: 1px 2px; font-size: .74rem; }
  .panel.petview .pd-main > .pet-act .tool { min-height: 34px; }
  .panel.petview .pd-main > .pet-act .tool .ico { width: 14px; height: 14px; }
  .panel.petview .pd-main > .pet-act .tool span { font-size: .56rem; }
}

/* ── 중심 UI 틀: 두께감 있는 상아색 틀 (.panel.stone.thick) ─────────────
   바깥: 도톰하고 둥근 상아색 테두리(빛은 왼쪽 위, 그늘은 오른쪽 아래)
   안쪽: 한 단 들어간 판(가는 테두리 + 안쪽 그림자). 지금은 펫 창에만 붙였다. */
.panel.stone.thick { padding: 13px; border-radius: 26px;
  background: linear-gradient(150deg, #fffdf8 0%, #f6f0e4 40%, #ebe2d1 78%, #ddd2bd 100%);
  border: 1px solid rgba(140, 120, 88, .5);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 2px 0 1px rgba(255, 255, 255, .7),
    inset 0 -3px 3px rgba(120, 98, 62, .22), inset -2px 0 2px rgba(120, 98, 62, .12),
    0 2px 0 #d3c6ad, 0 3px 0 rgba(110, 90, 60, .35), 0 16px 34px rgba(30, 22, 10, .34); }
.panel.stone.thick > .pd { border-radius: 16px; padding: 10px;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(160, 140, 110, .06) 38.4%, transparent 39.2% 70%, rgba(160, 140, 110, .05) 70.3%, transparent 71%),
    linear-gradient(160deg, #f8f2e6 0%, #efe6d4 60%, #e8dcc6 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 88, 56, .38), inset 0 3px 8px rgba(80, 60, 30, .26), inset 0 -1px 0 rgba(255, 255, 255, .5),
    0 1px 0 rgba(255, 255, 255, .95); }

/* 넓은 펫 창 (가로 화면 공통): 왼쪽 큰 그림 · 가운데 탭 · 오른쪽 옆줄, 아래 버튼 줄. 빈칸 없이 창 높이를 다 쓴다 */
@media (min-width: 600px) {
  .panel-wrap.dock:has(.panel.thick) { grid-template-columns: min(780px, calc(100vw - 20px)); }
  .panel-wrap.dock .panel.stone.thick { grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; }
  .panel.thick .pd { height: 100%; min-height: 0; gap: 10px; grid-template-columns: minmax(0, 1fr) 72px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .panel.thick .pd-main { display: grid; min-height: 0; overflow: hidden;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "hero tabs" "hero pane" "head pane" "ren pane" "meter pane" "act act"; gap: 6px 12px; }
  .panel.thick .pet-hero { grid-area: hero; height: auto; min-height: 0; border-radius: 14px; }
  .panel.thick .pet-hero img { position: absolute; inset: 0; margin: auto; width: 90%; height: 88%; max-width: none; object-fit: contain; }
  .panel.thick .pet-hero::after { bottom: 7%; width: 52%; height: 6%; }
  .panel.thick .hero-badges { top: 8px; left: 8px; }
  .panel.thick .pet-head { grid-area: head; gap: 3px; }
  .panel.thick .ph-sub { flex-wrap: wrap; }
  .panel.thick .rename { grid-area: ren; }
  .panel.thick .ph-meters { grid-area: meter; gap: 3px; }
  .panel.thick .ptabs { grid-area: tabs; }
  .panel.thick .ptab { grid-area: pane; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .panel.thick .pd-main > .pet-act { grid-area: act; margin: 0; }
  /* 옆줄: 7칸이 창 높이를 고르게 나눠 채운다 */
  .panel.thick .pd-tabs { position: static; align-self: stretch; height: 100%; max-height: none; overflow: hidden;
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto repeat(6, minmax(0, 1fr)); gap: 5px; }
  .panel.thick .pd-slot, .panel.thick .pd-slot.empty { height: auto; min-height: 0; }
  .panel.thick .pd-slot img, .panel.thick .pd-slot.char canvas { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
  .panel.thick .pd-slot { grid-template-rows: minmax(0, 1fr) auto; }
}
/* 낮은 가로 화면(휴대폰): 조이스틱 자리를 남기고, 글씨·간격을 줄인다 */
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock:has(.panel.thick) { grid-template-columns: min(680px, calc(100vw - 150px)); }
  .panel.stone.thick { padding: 8px; border-radius: 20px; }
  .panel.stone.thick > .pd { padding: 6px; border-radius: 13px; gap: 6px; grid-template-columns: minmax(0, 1fr) 54px; }
  .panel.thick .pd-main { gap: 4px 8px; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .panel.thick .pet-hero { border-radius: 10px; }
  .panel.thick .pd-tabs { gap: 3px; }
  .panel.thick .pd-slot span { font-size: .56rem; }
}
/* 정보 탭: 능력치 줄이 남는 높이를 나눠 가져 빈칸이 생기지 않게 */
@media (min-width: 600px) {
  .panel.thick .ptab[data-pane="info"]:not([hidden]) { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .panel.thick .ptab[data-pane="info"] .pstats { display: grid; grid-auto-rows: minmax(26px, 1fr); gap: 5px; }
  .panel.thick .ptab[data-pane="info"] .pstat { height: auto; }
}
/* 낮은 가로 화면: 그림이 왼쪽 높이를 다 쓰고, 이름·EXP·HP는 오른쪽으로. 옆줄은 2열 */
@media (min-width: 600px) and (max-height: 500px) {
  .panel.thick .pd-main { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "hero tabs" "hero pane" "hero head" "hero ren" "hero meter" "act act"; }
  .panel.thick .pet-hero img { width: 94%; height: 92%; }
  .panel.thick .ph-sub > span.tiny:last-child { display: none; }
  .panel.stone.thick > .pd { grid-template-columns: minmax(0, 1fr) 104px; }
  .panel.thick .pd-tabs { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .panel.thick .pd-tabs .pd-line { display: none; }
}
@media (min-width: 600px) {
  .panel.thick .ptab[data-pane="info"] .pstats { grid-auto-rows: minmax(26px, 44px); align-content: space-evenly; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel.thick .ptab[data-pane="info"]:not([hidden]) { grid-template-rows: auto auto; align-content: start; }
  .panel.thick .ptab[data-pane="info"] .pstats { grid-auto-rows: 24px; gap: 3px; }
  .panel.thick .pstat { padding: 1px 8px; font-size: .74rem; }
  .panel.thick .pstat b { font-size: .82rem; }
  .panel.thick .pet-intro { font-size: .72rem; padding: 4px 8px; }
}
/* 누르는 자리: 그림 칸(투명한 여백 포함)이 옆 칸과 겹쳐서, 뒤에 선 펫을 누르면 앞 펫이 골라졌다.
   그림 칸 전체 대신 몸통(아래쪽 가운데)만 누를 수 있게 한다. 옆 줄과 겹치지 않는 너비. */
.stage .slot, .stage .unit, .stage .unit * { pointer-events: none; }
.stage .unit::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 58%; pointer-events: auto; cursor: inherit; }
/* 펫 그림 칸: 속성 색 빛 없이 따뜻한 상아색 바탕, 펫을 가운데에 크게 (떠 보이는 그림자 없앰) */
.panel.thick .pet-hero { background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(255, 253, 247, .95) 0, rgba(255, 253, 247, 0) 72%), linear-gradient(#f4ede0, #e6dbc6); }
.panel.thick .pet-hero::after { display: none; }
@media (min-width: 600px) {
  .panel.thick .pet-hero img { width: 100%; height: 100%; padding: 4%; box-sizing: border-box; transform-origin: 50% 60%;
    filter: drop-shadow(0 8px 6px rgba(60, 45, 20, .22)); }
}
/* 큰 그림은 img/pets/big/(여백 잘라 낸 선명한 그림). 그 파일이 없으면 작은 그림을 키워서 보여 준다 */
@media (min-width: 600px) {
  .panel.thick .pet-hero img { padding: 6% 5% 5%; }
  .panel.thick .pet-hero img.small { padding: 0; scale: 1.4; }
}

/* ── 두꺼운 석판 (홈페이지 석판처럼) ─────────────────────────
   아이보리 돌판 앞면 + 아래로 보이는 두께(옆면을 여러 겹 쌓아 그린다) + 둥근 모서리 + 테두리 빛.
   큰 창은 두께 10px, 작은 돌판(아이콘·알약·알림·명령 상자)은 5px. 누르면 두께만큼 눌려 들어간다. */
:root {
  --sl-face: linear-gradient(165deg, #fcfaf6 0%, #f3eee5 58%, #eae3d6 100%);
  --sl-line: rgba(150, 130, 100, .38);
  --sl-rim: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -4px 8px rgba(140, 120, 90, .10);
  --sl-thin: 0 1px 0 #e7e0d3, 0 2px 0 #e1d9ca, 0 3px 0 #dad1c1, 0 4px 0 #d3c9b7, 0 5px 0 #cbc0ac,
    0 6px 1px rgba(105, 85, 55, .38), 0 10px 18px rgba(35, 28, 15, .24);
  --sl-thin-down: 0 1px 0 #dad1c1, 0 2px 0 #cbc0ac, 0 3px 1px rgba(105, 85, 55, .38), 0 5px 10px rgba(35, 28, 15, .2);
  --sl-thick: 0 1px 0 #e8e1d4, 0 2px 0 #e4dccf, 0 3px 0 #e0d8c9, 0 4px 0 #dcd3c3, 0 5px 0 #d7cebd,
    0 6px 0 #d3c9b7, 0 7px 0 #cec3b0, 0 8px 0 #c9bea9, 0 9px 0 #c3b7a2, 0 10px 0 #bcb09a,
    0 11px 2px rgba(95, 75, 45, .42), 0 26px 44px rgba(30, 22, 10, .34);
}
.panel.stone {
  background: var(--sl-face); border: 1px solid var(--sl-line); border-radius: 28px;
  box-shadow: var(--sl-rim), var(--sl-thick);
}
.stone-ico, .stone-pill, .toast, .map-name, .b-cmd, .battle .b-auto {
  background: var(--sl-face); border: 1px solid var(--sl-line);
  box-shadow: var(--sl-rim), var(--sl-thin);
}
.stone-ico { border-radius: 16px; }
.b-cmd { border-radius: 22px; }
.stone-ico:active:not(:disabled), .stone-pill:active:not(:disabled), .battle .b-auto:active {
  transform: translateY(3px); box-shadow: var(--sl-rim), var(--sl-thin-down);
}
/* 창 안 버튼도 작은 석판 */
.panel.stone button, .battle .b-cmd button {
  background: #f6f2ea linear-gradient(170deg, #fdfbf7, #efe9de); border: 1px solid rgba(150, 130, 100, .42);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #e1d9ca, 0 2px 0 #d6cdbc, 0 3px 0 #cbc0ac, 0 4px 6px rgba(35, 28, 15, .18);
}
.panel.stone button:active:not(:disabled), .battle .b-cmd button:active:not(:disabled) {
  transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #cbc0ac, 0 2px 3px rgba(35, 28, 15, .16);
}
.panel.stone button.primary, .battle .b-cmd button.primary {
  background: #c6a259 linear-gradient(170deg, #dcbd76, #b08a3c); border-color: #93712e; color: #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, .7), 0 1px 0 #a07c33, 0 2px 0 #92702c, 0 3px 0 #826326, 0 4px 6px rgba(35, 28, 15, .22);
}
/* 아래 석판 띠: 위쪽 가장자리에 두께(돌판 윗면이 살짝 보이게) */
.hud-band {
  background: var(--sl-face); border: 1px solid var(--sl-line); border-bottom: 0;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), 0 -1px 0 #e1d9ca, 0 -2px 0 #d8cfbe, 0 -3px 0 #cfc5b2, 0 -6px 14px rgba(35, 28, 15, .18);
}
/* 중심 UI 틀(.thick)도 같은 두께: 안쪽 빛·그늘은 그대로, 아래로 두께 10px */
.panel.stone.thick {
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 2px 0 1px rgba(255, 255, 255, .7),
    inset 0 -3px 3px rgba(120, 98, 62, .22), inset -2px 0 2px rgba(120, 98, 62, .12), var(--sl-thick);
}
/* 더 도톰하게: 테두리 자체가 둥글게 솟은 돌(왼쪽 위 빛·오른쪽 아래 그늘을 넓게), 아래 두께 14px */
:root {
  --sl-bevel: inset 3px 4px 6px rgba(255, 255, 255, .95), inset -4px -6px 10px rgba(120, 98, 62, .26),
    inset 0 0 0 1px rgba(255, 255, 255, .45);
  --sl-thick: 0 1px 0 #ebe5d9, 0 2px 0 #e7e0d3, 0 3px 0 #e3dbcd, 0 4px 0 #dfd7c8, 0 5px 0 #dbd2c2,
    0 6px 0 #d7cdbd, 0 7px 0 #d2c8b7, 0 8px 0 #cec3b1, 0 9px 0 #c9beab, 0 10px 0 #c4b8a5,
    0 11px 0 #bfb39f, 0 12px 0 #b9ad98, 0 13px 0 #b3a691, 0 14px 0 #ac9f8a,
    0 15px 3px rgba(85, 66, 38, .45), 0 30px 50px rgba(30, 22, 10, .36);
  --sl-thin: 0 1px 0 #e7e0d3, 0 2px 0 #e1d9ca, 0 3px 0 #dad1c1, 0 4px 0 #d3c9b7, 0 5px 0 #cbc0ac, 0 6px 0 #c3b7a2,
    0 7px 1px rgba(95, 75, 45, .42), 0 12px 20px rgba(35, 28, 15, .26);
  --sl-thin-down: 0 1px 0 #d3c9b7, 0 2px 0 #c3b7a2, 0 3px 1px rgba(95, 75, 45, .42), 0 6px 10px rgba(35, 28, 15, .2);
}
.panel.stone, .panel.stone.thick { box-shadow: var(--sl-bevel), var(--sl-thick); }
.stone-ico, .stone-pill, .toast, .map-name, .b-cmd, .battle .b-auto {
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .95), inset -2px -3px 5px rgba(120, 98, 62, .22), var(--sl-thin);
}
.stone-ico:active:not(:disabled), .stone-pill:active:not(:disabled), .battle .b-auto:active {
  transform: translateY(4px); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .95), inset -2px -3px 5px rgba(120, 98, 62, .22), var(--sl-thin-down);
}

/* ── 캐릭터 창 (2026-11-06): 펫 창과 따로 ─────────────────────────────
   왼쪽: 장비 인형(스톤에이지 장비 칸) — 가운데 캐릭터, 왼쪽 세트 3칸(머리·몸·신발), 오른쪽 무기·장신구 + 세트 n/3
         아래 이름·속성·EXP·HP
   오른쪽: 능력치(점수 나누기) · 장비 · 탑승 탭. 맨 아래 버튼 줄. 틀은 펫 창과 같은 두께감 있는 상아색 틀. */
.panel.stone.thick > .cv { border-radius: 16px; padding: 10px;
  background: linear-gradient(160deg, #f8f2e6 0%, #efe6d4 60%, #e8dcc6 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 88, 56, .38), inset 0 3px 8px rgba(80, 60, 30, .26), inset 0 -1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(255, 255, 255, .95); }
.cv { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.cv-left, .cv-right { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cv > .pet-act { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.cv > .pet-act .tool { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 4px 2px; border-radius: 10px; display: grid; place-items: center; gap: 1px; }
.cv > .pet-act .tool span { font-size: .68rem; font-weight: 800; white-space: normal; word-break: keep-all; line-height: 1.05; text-align: center; }
.cv > .pet-act .tool .ico { width: 20px; height: 20px; }
/* 장비 인형 */
.char-doll { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; padding: 10px; border-radius: 14px; min-height: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(255, 253, 247, .95) 0, rgba(255, 253, 247, 0) 72%), linear-gradient(#f4ede0, #e6dbc6);
  box-shadow: inset 0 2px 6px rgba(90, 70, 40, .28), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255, 255, 255, .7); }
.gcol { display: grid; gap: 8px; align-content: center; }
.panel.stone .gslot { position: relative; width: 58px; height: 58px; min-height: 0; padding: 0; border-radius: 13px; display: grid; place-items: center; align-content: center; gap: 1px;
  color: rgba(110, 88, 56, .55); background: linear-gradient(#ece3d2, #e2d6c0); border: 1px solid rgba(140, 118, 82, .45);
  box-shadow: inset 0 2px 4px rgba(90, 70, 40, .3), 0 1px 0 rgba(255, 255, 255, .8); }
.gslot .ico { width: 24px; height: 24px; }
.gslot small { font-size: .62rem; font-weight: 800; color: #8a7556; }
.panel.stone .gslot.has { color: #7d5d1f; background: linear-gradient(#fbf3de, #ecdcb4); border-color: #c9a85e; }
.panel.stone .gslot.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), inset 0 2px 4px rgba(90, 70, 40, .2); color: #7d5d1f; }
.gset { display: grid; place-items: center; gap: 0; width: 58px; padding: 4px 0; border-radius: 12px; border: 1px dashed rgba(140, 118, 82, .45); color: #8a7556; }
.gset b { font-size: .9rem; color: #6e521a; }
.gset small { font-size: .6rem; font-weight: 800; }
.doll-fig { position: relative; display: grid; place-items: end center; min-height: 0; }
.doll-fig { min-height: 150px; }
.doll-fig canvas { position: absolute; z-index: 1; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; }
.char-doll.down canvas { filter: grayscale(.75) opacity(.7); }
.doll-ride { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #2f6e45; background: rgba(255, 252, 245, .85); border: 1px solid #9fcaa9; }
.doll-ride .ico { width: 12px; height: 12px; }
/* 능력치 탭: 점수가 있으면 줄 끝에 − + */
.pstat.can { grid-template-columns: 3.2em minmax(0, 1fr) 3.6em auto; }
.pstat em.up { font-style: normal; font-size: .8rem; color: #2f8a57; margin-left: 2px; }
.pstat em.gear { font-style: normal; font-size: .8rem; color: #b07a1a; margin-left: 3px; font-weight: 700; }
.pm { display: inline-flex; gap: 4px; }
.panel.stone .pm button { width: 30px; height: 28px; min-height: 0; padding: 0; border-radius: 8px; font-weight: 900; }
.panel.stone .pm button.p5 { width: 36px; font-size: .78rem; }
.pts-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(224, 122, 58, .1); box-shadow: inset 0 0 0 1px rgba(224, 122, 58, .35); }
.pts-box b { font-size: .84rem; }
.panel.stone .pts-box button { min-height: 32px; padding: 2px 12px; }
/* 장비 탭: 5부위 줄 + 세트 효과 */
.glist { display: grid; gap: 4px; }
.panel.stone .grow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; min-height: 0; padding: 5px 10px; border-radius: 10px;
  background: rgba(122, 100, 66, .08); border: 1px solid transparent; box-shadow: inset 0 1px 2px rgba(90, 70, 40, .22), 0 1px 0 rgba(255, 255, 255, .7); color: var(--ink); }
.panel.stone .grow.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: rgba(110, 88, 56, .6); background: linear-gradient(#ece3d2, #e2d6c0); box-shadow: inset 0 1px 3px rgba(90, 70, 40, .3); }
.gi .ico { width: 18px; height: 18px; }
.gtxt { display: grid; gap: 0; min-width: 0; }
.gtxt b { font-size: .86rem; }
.gtxt small { font-size: .72rem; color: var(--ink-soft); }
.gtag { font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(169, 130, 58, .16); color: #7d5d1f; }
.set-box { display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; border-left: 3px solid var(--gold); background: rgba(255, 252, 245, .45); }
.set-box b { font-size: .84rem; }
.set-box small { font-size: .74rem; color: var(--ink-soft); line-height: 1.4; }
/* 탑승 탭 */
.ride-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px;
  background: radial-gradient(circle at 30px 50%, color-mix(in srgb, var(--el) 28%, transparent) 0 26px, transparent 40px), rgba(122, 100, 66, .08);
  box-shadow: inset 0 1px 2px rgba(90, 70, 40, .22); }
.ride-card img { width: 64px; height: 52px; object-fit: contain; }
.ride-card .lv { color: var(--ink-soft); font-weight: 800; font-size: .86rem; }
/* 펫 창 옆줄: 캐릭터 칸이 빠져 펫 6칸만 */
@media (max-width: 520px) { .pd-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 600px) { .panel.thick .pd-tabs { grid-template-rows: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-height: 500px) { .panel.thick .pd-tabs { grid-template-rows: repeat(3, minmax(0, 1fr)); } }

/* 넓은 화면: 왼쪽 인형·이름, 오른쪽 탭, 아래 버튼 줄. 창 높이를 다 쓰고 탭 칸만 넘겨 본다 */
@media (min-width: 600px) {
  .panel-wrap.dock:has(.panel.charview) { grid-template-columns: min(720px, calc(100vw - 20px)); }
  .panel-wrap.dock .panel.stone.charview { grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; }
  .panel.charview .cv { height: 100%; min-height: 0; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .panel.charview .cv-left { grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
  .panel.charview .cv-right { grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .panel.charview .ptab { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1px 2px 2px; }
  .panel.charview .cv > .pet-act { grid-column: 1 / -1; }
  .panel.charview .char-doll { align-items: stretch; }
}
/* 낮은 가로 화면(휴대폰 가로): 칸·글씨를 줄이고 인형은 칸을 위아래로 */
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock:has(.panel.charview) { grid-template-columns: min(680px, calc(100vw - 150px)); }
  .panel.stone.thick.charview { padding: 8px; border-radius: 20px; }
  .panel.stone.thick > .cv { padding: 6px; border-radius: 13px; gap: 4px 8px; }
  .panel.charview .cv-left, .panel.charview .cv-right { gap: 4px; }
  .panel.charview .char-doll { padding: 4px 6px; gap: 4px; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .panel.charview .gcol { gap: 3px; }
  .panel.stone.charview .gslot { width: 40px; height: 40px; border-radius: 10px; }
  .panel.charview .gslot .ico { width: 18px; height: 18px; }
  .panel.charview .gslot small { display: none; }
  .panel.charview .gset { width: 40px; padding: 1px 0; }
  .panel.charview .gset small { display: none; }
  .panel.charview .ph-name b { font-size: 1rem; }
  .panel.charview .meter { grid-template-columns: 26px minmax(0, 1fr) auto; font-size: .66rem; }
  .panel.charview .meter .tnum { min-width: 0; }
  .panel.charview .ptabs button { min-height: 28px; font-size: .8rem; }
  .panel.charview .pstat { padding: 2px 8px; font-size: .78rem; }
  .panel.charview .pstat b { font-size: .86rem; }
  .panel.stone.charview .pm button { width: 26px; height: 24px; }
  .panel.stone.charview .pm button.p5 { width: 32px; }
  .panel.charview .grow { padding: 2px 8px; }
  .panel.charview .gi { width: 26px; height: 26px; }
  .panel.charview .cv > .pet-act .tool { min-height: 40px; padding: 2px; }
  .panel.charview .cv > .pet-act .tool .ico { width: 16px; height: 16px; }
  .panel.charview .cv > .pet-act .tool span { font-size: .62rem; }
}
/* 펫 창 틀(.thick)의 칸 이름이 캐릭터 창에 섞이지 않게 */
.panel.charview .pet-head, .panel.charview .ph-meters, .panel.charview .ptabs, .panel.charview .ptab { grid-area: auto; }
@media (min-width: 600px) and (max-height: 500px) { .panel.charview .doll-fig { min-height: 0; } }

/* 전장 유닛 크기: 유닛 수가 적으면 크게 (--k: battleView.js layoutFor, 3마리 1.55배 ~ 7·8마리 그대로). 보스는 1.1배까지만 */
.battle .stage .slot { width: calc(min(11.5cqw, 19cqh) * var(--k, 1) * var(--sz, 1)); }
.battle .stage .slot:has(.boss) { width: calc(min(20cqw, 34cqh) * min(var(--k, 1), 1.1)); }
@media (max-height: 500px) { .battle .stage .slot { width: calc(min(11.5cqw, 18cqh) * var(--k, 1) * var(--sz, 1)); } }

/* ── 위쪽 알약 석판 (은화·자동 전투·자동사냥) — 홈페이지 석판에 맞춤 (2026-11-06) ──────
   알약(양 끝 반원) 대신 반듯한 판 + 모서리만 살짝 둥글게(9px).
   앞면: 거의 흰 상아, 위 가장자리는 빛, 아래 가장자리는 둥글게 깎인 그늘.
   두께: 앞면보다 조금 어두운 상아색 옆면 한 가지(5px) + 가는 외곽선. 갈색으로 짙어지지 않는다.
   그림자: 짧고 연하게. */
.hud .stone-pill {
  border-radius: 9px; border: 0;
  background: linear-gradient(180deg, #fdfcf9 0%, #f6f3ed 62%, #ece7de 100%);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 1.5px 0 0 rgba(255, 255, 255, .7),
    inset 0 -2px 2px -1px rgba(150, 135, 110, .38),
    0 0 0 1px rgba(150, 138, 115, .36),
    0 5px 0 0 #ddd8ce,
    0 5px 0 1px rgba(140, 128, 104, .34),
    0 9px 8px -3px rgba(60, 50, 30, .16),
    0 14px 22px -8px rgba(60, 50, 30, .14);
}
.hud .stone-pill:hover:not(:disabled) { border: 0; }
.hud .stone-pill:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 1.5px 0 #fff, inset 0 -2px 2px -1px rgba(150, 135, 110, .38),
    0 0 0 1px rgba(150, 138, 115, .36),
    0 2px 0 0 #ddd8ce, 0 2px 0 1px rgba(140, 128, 104, .34),
    0 5px 6px -3px rgba(60, 50, 30, .16);
}
/* 켜진 상태(자동 전투 켬·자동사냥 중): 같은 판 모양, 금빛 앞면 + 짙은 금 옆면 */
.hud #hud-auto[aria-pressed="true"], .hud .hunt-btn.on {
  border: 0; color: #fffaf0;
  background: linear-gradient(180deg, #e6c886 0%, #cfa75a 62%, #bf9445 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 244, 214, .85),
    inset 0 -2px 2px -1px rgba(110, 80, 25, .45),
    0 0 0 1px rgba(128, 96, 36, .6),
    0 5px 0 0 #a8833a,
    0 5px 0 1px rgba(110, 82, 30, .55),
    0 9px 8px -3px rgba(60, 45, 15, .2),
    0 14px 22px -8px rgba(60, 45, 15, .16);
}
/* 펫 그림 칸 바탕: 누런 크림색 대신 홈페이지 석판 안쪽처럼 색이 거의 없는 밝은 회백색 (2026-11-06) */
.panel.thick .pet-hero, .panel.stone .pet-hero {
  background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, 0) 72%), linear-gradient(#f4f3f0, #e6e4df);
  box-shadow: inset 0 0 0 1px rgba(120, 112, 100, .22), inset 0 2px 6px rgba(70, 62, 50, .16); }
.pet-hero::after { display: none; }
/* 펫 그림 뒤 속성 색 빛(빛 속성은 누렇게 보임) 없앰: 옆줄 칸·펫 목록 그림·탑승 카드도 펫 그림 칸과 같은 회백색 (2026-11-06) */
.panel.stone .pd-slot.pet, .panel.stone .pd-slot, .panel.stone .pr-art {
  background: linear-gradient(#f4f3f0, #e6e4df); border-color: rgba(120, 112, 100, .32); }
.panel.stone .pd-slot.empty { background: rgba(120, 112, 100, .05); }
.ride-card { background: rgba(120, 112, 100, .08); }

/* 능력치별 성장 등급: 숫자 오른쪽에 작은 등급 알약, 아래에 총 등급과 다음에 다시 매기는 레벨 */
.pstat.graded { grid-template-columns: 3.2em minmax(0, 1fr) 2.6em 3.4em; }
.pstat.graded .gpill { justify-self: end; font-size: .64rem; padding: 1px 6px; }
.grade-note { margin: 2px 2px 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* 펫 창 오른쪽 줄 (넓은 화면): 빈칸은 얇은 줄로 줄이고, 펫이 있는 칸이 남는 높이를 나눠 가져 그림을 크게 + 이름 (2026-11-06) */
.pd-slot .nm { display: none; }
@media (min-width: 600px) and (min-height: 501px) {
  .panel.stone.thick > .pd { grid-template-columns: minmax(0, 1fr) 92px; }
  .panel.thick .pd-tabs { grid-template-rows: var(--rows, repeat(6, minmax(0, 1fr))); }
  .panel.thick .pd-slot.pet { grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; padding: 16px 4px 9px; gap: 1px; }
  .panel.thick .pd-slot.pet img { width: 100%; height: 100%; max-height: 110px; align-self: center; object-fit: contain; }
  .panel.thick .pd-slot .nm { display: block; font-size: .72rem; font-weight: 800; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel.thick .pd-slot.empty { border-radius: 9px; }
}
/* 펫 창 큰 그림: 몸통이 가운데 오도록 오른쪽으로 조금 */
@media (min-width: 600px) { .panel.thick .pet-hero img { translate: 3% 0; } }
/* 전투 HP 막대·레벨 동그라미: 원색 대신 차분한 색 (펫 그림보다 튀지 않게, 2026-11-06)
   우리 편 연한 풀색, 적 산호색. 빈 부분은 반투명한 어두운 색이라 막대 자리는 또렷하게 보인다 */
.stage .unit .hpbar { background: rgba(40, 48, 56, .28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.stage .unit .hpbar i { background: #7cc69a; }
.stage .unit .hpbar i.low { background: #e6a07a; }
.stage .unit.foe .hpbar i { background: #e58a7c; }
.stage .unit .lv { background: #6d9cc6; border-color: rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.stage .unit.foe .lv { background: #d67c70; }

/* ── 성장 등급 글자: 바탕 없이 큰 글자만, 글자(C·B·A·S·SEVEN)마다 다른 글자색 (2026-11-06) ──────────────
   C·C+ 회색 · B·B+ 초록 · A·A+ 파랑 · S·S+ 금빛 · SEVEN 무지개 글자 */
.gpill, .gpill[class*="g-"] { background: none; box-shadow: none; border: 0; padding: 0; min-width: 0; border-radius: 0;
  font-size: 1.35rem; font-weight: 900; line-height: 1; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); vertical-align: middle; }
.pstat.graded { grid-template-columns: 3.2em minmax(0, 1fr) 2.6em 4.2em; }
.pstat.graded .gpill { font-size: 1.3rem; justify-self: center; }
.pstat.graded .gpill.g-SEVEN { font-size: .95rem; }
.grade-note .gpill { font-size: 1.15rem; }
.gpill.g-C, .gpill.g-Cp { color: #7d848c; }
.gpill.g-B, .gpill.g-Bp { color: #2c8a4a; }
.gpill.g-A, .gpill.g-Ap { color: #2b68c2; }
.gpill.g-S, .gpill.g-Sp { color: #d08309; text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 0 6px rgba(240, 180, 60, .35); }
.gpill.g-SEVEN { background: linear-gradient(90deg, #e05555, #e0a030, #4fb84f, #3f8fd8, #8a5ad8); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* ── 석판을 홈페이지 1번 느낌으로 (2026-11-06) ─────────────────────────
   얇고 반듯한 판. 아래 두께는 2px 옆선만, 모서리는 덜 둥글게, 그림자는 넓고 옅게 퍼진다.
   앞면은 누런 크림색 대신 색이 거의 없는 무광 석회암(밝은 회백 상아). 위에 쌓인 '도톰한 석판' 규칙을 덮어쓴다. */
:root {
  --sl-face: linear-gradient(180deg, #faf9f6 0%, #f3f1ec 100%);
  --sl-line: rgba(120, 112, 100, .24);
  --sl-edge: 0 1px 0 #e4e1da, 0 2px 0 #d9d5cd;                              /* 얇은 옆면 2px */
  --sl-soft: 0 6px 12px -4px rgba(50, 44, 34, .10), 0 18px 36px -10px rgba(50, 44, 34, .16);   /* 넓고 옅은 그림자 */
  --sl-top: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(120, 112, 100, .10);
}
/* 큰 창 */
.panel.stone, .panel.stone.thick {
  background: var(--sl-face); border: 1px solid var(--sl-line); border-radius: 16px;
  box-shadow: var(--sl-top), var(--sl-edge), 0 10px 20px -8px rgba(50, 44, 34, .14), 0 30px 60px -16px rgba(50, 44, 34, .22);
}
/* 중심 틀 안쪽 판: 한 단 들어간 화면(가는 선 + 옅은 안쪽 그늘) */
.panel.stone.thick > .pd, .panel.stone.thick > .cv {
  border-radius: 10px;
  background: linear-gradient(180deg, #f1efea 0%, #ebe8e2 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 102, 90, .22), inset 0 2px 6px rgba(60, 52, 40, .10), 0 1px 0 #fff;
}
/* 작은 석판: 위 아이콘·알약·알림·장소 이름·전투 명령 상자·자동 전투 */
.stone-ico, .stone-pill, .toast, .map-name, .b-cmd, .battle .b-auto,
.hud .stone-pill {
  background: var(--sl-face); border: 1px solid var(--sl-line);
  box-shadow: var(--sl-top), var(--sl-edge), var(--sl-soft);
}
.stone-ico { border-radius: 10px; }
.hud .stone-pill { border-radius: 8px; border: 1px solid var(--sl-line); }
.hud .stone-pill:hover:not(:disabled) { border: 1px solid var(--sl-line); }
.b-cmd { border-radius: 12px; }
.stone-ico:active:not(:disabled), .stone-pill:active:not(:disabled), .hud .stone-pill:active:not(:disabled), .battle .b-auto:active {
  transform: translateY(1px); box-shadow: var(--sl-top), 0 1px 0 #d9d5cd, 0 3px 8px -3px rgba(50, 44, 34, .14);
}
/* 켜진 상태(자동 전투 켬·자동사냥 중): 같은 얇은 판, 금빛 앞면 */
.hud #hud-auto[aria-pressed="true"], .hud .hunt-btn.on {
  border: 1px solid rgba(128, 96, 36, .55); color: #fffaf0;
  background: linear-gradient(180deg, #dcbd76 0%, #c49a4c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .7), 0 1px 0 #ad8840, 0 2px 0 #9c7934, var(--sl-soft);
}
/* 창 안 버튼·전투 명령 버튼: 얇은 판 */
.panel.stone button, .battle .b-cmd button {
  background: linear-gradient(180deg, #fcfbf9, #f2f0eb) #f6f4f0; border: 1px solid rgba(120, 112, 100, .28);   /* 바탕색도 함께(어두운 모드에서 검게 보이지 않게) */
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ddd9d1, 0 3px 6px -3px rgba(50, 44, 34, .14);
}
.panel.stone button:active:not(:disabled), .battle .b-cmd button:active:not(:disabled) {
  transform: translateY(1px); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(50, 44, 34, .10);
}
.panel.stone button.primary, .battle .b-cmd button.primary {
  background: linear-gradient(180deg, #d8b96f, #bb9343) #c9a659; border-color: #9c7934; color: #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, .6), 0 1px 0 #9c7934, 0 3px 6px -3px rgba(50, 44, 34, .2);
}
/* 아래 석판 띠: 위쪽에 얇은 선 하나 + 옅은 그림자 */
.hud-band {
  background: var(--sl-face); border: 1px solid var(--sl-line); border-bottom: 0;
  box-shadow: inset 0 1px 0 #fff, 0 -1px 0 #e4e1da, 0 -8px 20px -8px rgba(50, 44, 34, .14);
}

/* 휴대폰 떠다니는 조이스틱 (2026-11-06): 고정 자리 없이, 지도를 누른 채로 끌 때만 누른 곳에 나타난다 */
@media (hover: none) and (pointer: coarse) {
  .stick, .stick.on { display: none; }
  .stick.on { display: block; position: fixed; right: auto; bottom: auto; transform: translate(-50%, -50%); pointer-events: none;
    background: rgba(255, 255, 255, .22); border-color: rgba(35, 50, 62, .2); }
  #world { touch-action: none; }
}
/* 휴대폰 가로 펫 창: 이름·속성·EXP·HP는 왼쪽 그림 아래로, 오른쪽은 탭+능력치만 → 능력치·총 등급이 스크롤 없이 다 보임 (2026-11-06) */
@media (min-width: 600px) and (max-height: 500px) {
  .panel.thick .pd-main { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "hero tabs" "hero pane" "head pane" "ren pane" "meter pane" "act act"; }
  .panel.thick .pet-hero { min-height: 60px; }
  .panel.thick .ptab[data-pane="info"] .pstats { gap: 4px; }
}
@media (min-width: 600px) and (max-height: 370px) { .panel.thick .ptab[data-pane="info"] .pet-intro { display: none; } }
.hud-band .band-place { cursor: default; }   /* 장소 글자는 눌러도 아무 일 없음 */

/* 휴대폰 지도 채팅 (2026-11-06): 평소엔 왼쪽 아래에 작게(4줄), 입력칸을 누르면 화면 너비로 길어짐(.typing). 입력칸 바탕은 흰색 */
@media (hover: none) and (pointer: coarse) {
  .chat:not(.typing) { width: min(280px, 42vw) !important; }
  .chat:not(.typing) .chat-log { font-size: .78rem; max-height: calc(4 * 1.3em); }
}
.chat-input input { background: #fff; }
/* 전체 화면 버튼: 왼쪽 위 은화 앞의 작은 아이콘 하나 (전체 화면일 때는 숨김, 끄기는 메뉴에서) (2026-11-06) */
.hud .fs-btn { width: 38px; padding: 0; justify-content: center; }
.hud .fs-btn .ico { width: 20px; height: 20px; }
.fs-btn[hidden] { display: none; }
#m-fs { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#m-fs .ico { width: 18px; height: 18px; }
/* 조이스틱으로 걷는 동안 채팅·아래 띠는 아래로 내려가 숨음, 손을 떼면 다시 올라옴 (2026-11-06) */
#screen-game > .chat, #screen-game > .hud-band { transition: transform .25s ease, opacity .25s ease; }
#screen-game.walking > .chat { transform: translateY(calc(100% + 60px)); opacity: 0; pointer-events: none; }
#screen-game.walking > .hud-band { transform: translateY(100%); opacity: 0; pointer-events: none; }
/* 휴대폰: 작은 채팅 글 위를 눌러도 지도(조이스틱)로 넘어가게. 지난 글 넘겨 보기는 입력칸을 눌러 넓힌 뒤에 */
@media (hover: none) and (pointer: coarse) { .chat:not(.typing) .chat-log { pointer-events: none; } }
/* 채팅 보내기 버튼 (2026-11-06). 휴대폰은 입력칸을 눌러 넓혔을 때만 보임 */
.chat-send { min-height: 32px; padding: 4px 12px; font-size: .85rem; font-weight: 800; flex-shrink: 0; }
@media (hover: none) and (pointer: coarse) { .chat:not(.typing) .chat-send { display: none; } }
/* 아래 띠는 통째로 누르는 버튼이 아님: 눌렀을 때 내려가는 모양 없앰, 얼굴·이름·HP만 누를 수 있는 손가락 표시 */
.hud-band, .hud-band:hover, .hud-band:active { cursor: default; transform: none; }

/* 넓은 펫 창: 그림 칸을 넓게 — 그림 : 능력치 = 6 : 4 (2026-11-06)
   낮은 가로 화면(휴대폰)은 그림이 높이에 막혀 넓혀도 커지지 않으므로 예전 비율 그대로 */
@media (min-width: 600px) and (min-height: 501px) {
  .panel.thick .pd-main { grid-template-columns: minmax(0, 60%) minmax(0, 1fr); }
}

/* ── 화면 배치 정리 (2026-11-06) ─────────────────────────────────────
   왼쪽 위: 은화·자동 전투·자동사냥 한 줄 / 오른쪽 위: 지도(미니맵) 자리 비워 둠
   아래 석판 띠 오른쪽 끝: 캐릭터·펫·진형·메뉴 버튼 4개 (옛 스톤에이지 아래 메뉴 줄처럼, 띠 위로 살짝 솟은 돌판) */
.hud-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: calc(100% - 200px); }
.minimap { width: 176px; height: 128px; flex-shrink: 0; pointer-events: none; }   /* 나중에 지도가 들어갈 자리 (지금은 비어 있음) */
.band-menu { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: calc(5px + env(safe-area-inset-bottom)); z-index: 3;
  display: flex; gap: 6px; }
.band-menu .stone-ico { width: 58px; height: 52px; border-radius: 10px; }
.hud-band { padding-right: calc(4 * 58px + 3 * 6px + 28px); }   /* 장소 글자가 버튼 밑에 깔리지 않게 */
#screen-game > .band-menu { transition: transform .25s ease, opacity .25s ease; }
#screen-game.walking > .band-menu { transform: translateY(calc(100% + 10px)); opacity: 0; pointer-events: none; }
body:has(#battle:not([hidden])) .band-menu { display: none; }
@media (max-width: 760px), (max-height: 500px) {
  .minimap { width: 120px; height: 86px; }
  .hud-status { max-width: calc(100% - 136px); gap: 6px; }
  .band-menu { gap: 4px; }
  .band-menu .stone-ico { width: 48px; height: 44px; }
  .band-menu .stone-ico .ico { width: 20px; height: 20px; }
  .band-menu .stone-ico span { font-size: .6rem; }
  .hud-band { padding-right: calc(4 * 48px + 3 * 4px + 20px); }
}
@media (max-width: 520px) { .hud-band .band-place { display: none; } }

/* ── 넓은 펫 창 (서머너즈워 몬스터 창처럼, 2026-11-06) ─────────────────────
   창을 화면 가득: 왼쪽 큰 그림 · 가운데 세로 탭(정보·기술·룬 각성) · 오른쪽 이름·막대·능력치,
   아래 버튼 줄, 맨 아래 펫 목록은 가로 한 줄. (가로 화면 600px 이상) */
@media (min-width: 600px) {
  .panel-wrap.dock:has(.panel.thick) { grid-template-columns: min(1180px, calc(100vw - 20px)); }
  .panel-wrap.dock .panel.thick .pd { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .panel-wrap.dock .panel.thick .pd-main {
    grid-template-columns: minmax(0, 44%) 104px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hero tabs head" "hero tabs ren" "hero tabs meter" "hero tabs pane" "act act act"; gap: 6px 14px; }
  .panel-wrap.dock .panel.thick .ptabs { grid-area: tabs; display: flex; flex-direction: column; gap: 6px; align-self: start; height: auto; }
  .panel-wrap.dock .panel.thick .ptabs button { flex: 0 0 auto; min-height: 42px; width: 100%; border-radius: 10px; }
  .panel-wrap.dock .panel.thick .pet-hero { background: none; box-shadow: none; }
  /* 펫 목록: 아래 가로 한 줄 */
  .panel-wrap.dock .panel.thick .pd-tabs { display: flex; flex-direction: row; gap: 6px; height: auto; max-height: none; overflow-x: auto; overflow-y: hidden;
    grid-template-columns: none; grid-template-rows: none; padding: 2px; scrollbar-width: thin; }
  .panel-wrap.dock .panel.thick .pd-tabs .pd-line { display: none; }
  .panel-wrap.dock .panel.thick .pd-slot, .panel-wrap.dock .panel.thick .pd-slot.empty { flex: 0 0 78px; width: 78px; height: 74px; min-height: 0; }
  .panel-wrap.dock .panel.thick .pd-slot img { width: 100%; height: 44px; object-fit: contain; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick .pd-main { grid-template-columns: minmax(0, 40%) 84px minmax(0, 1fr); gap: 4px 10px; }
  .panel-wrap.dock .panel.thick .ptabs button { min-height: 32px; }
  .panel-wrap.dock .panel.thick .pd-slot, .panel-wrap.dock .panel.thick .pd-slot.empty { flex-basis: 60px; width: 60px; height: 54px; }
  .panel-wrap.dock .panel.thick .pd-slot img { height: 30px; }
}
/* 아래 가로 펫 목록: 그림 + Lv만 (이름은 그림과 겹쳐서 숨김, 마우스를 올리면 이름이 뜸) */
@media (min-width: 600px) {
  .panel-wrap.dock .panel.thick .pd-slot { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 3px 3px 5px; }
  .panel-wrap.dock .panel.thick .pd-slot .nm { display: none; }
}
/* 휴대폰 가로(낮은 화면): 이름·막대를 그림 아래로, 오른쪽은 능력치만. 능력치 줄은 낮게 */
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstats { grid-auto-rows: 22px; gap: 3px; align-content: start; }
  .panel-wrap.dock .panel.thick .pet-head { gap: 1px; }
  .panel-wrap.dock .panel.thick .ph-meters { gap: 1px; }
  .panel-wrap.dock .panel.thick .pet-act .tool { min-height: 32px; }
}
/* 휴대폰 가로: 아래 펫 목록(왼쪽)과 버튼 줄(오른쪽)을 한 줄로 합쳐 위쪽 능력치 칸을 넓힌다 */
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick .pd {
    grid-template-columns: minmax(0, 40%) 84px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hero tabs head" "hero tabs ren" "hero tabs meter" "hero tabs pane" "strip strip act"; gap: 4px 10px; }
  .panel-wrap.dock .panel.thick .pd-main { display: contents; }
  .panel-wrap.dock .panel.thick .pd-tabs { grid-area: strip; }
  .panel-wrap.dock .panel.thick .pd-main > .pet-act { grid-area: act; align-self: center; }
  .panel-wrap.dock .panel.thick .pet-act .tool span { font-size: .56rem; }
}

/* ── 전투 명령 (포켓몬식, 2026-11-06): 오른쪽 끝 세로 행동 순서 · 그 왼쪽 알약 [공격·방어·가방·반복·도망] · 그 왼쪽 흰 목록(기술 / 가방) ── */
#battle .b-order { position: absolute; top: auto; left: auto; transform: none; max-width: none;
  right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); max-height: calc(100% - 64px);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; padding: 6px 4px; border-radius: 22px;
  background: rgba(30, 40, 50, .26); box-shadow: none; overflow: hidden; }
#battle .b-order::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 22px; width: 3px; margin-left: -1.5px; background: rgba(255, 255, 255, .55); border-radius: 2px; }
#battle .b-order i { position: relative; width: 30px; height: 30px; transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
#battle .b-order i.now { width: 42px; height: 42px; border-width: 3px; transform: none; box-shadow: 0 0 0 3px rgba(255, 214, 110, .75), 0 2px 6px rgba(0, 0, 0, .4); }
@media (max-height: 500px) { #battle .b-order i { width: 24px; height: 24px; } #battle .b-order i.now { width: 34px; height: 34px; } }
/* 휴대폰 가로(낮은 화면): 조금 작게 */

/* 기술 목록은 흰 상자 없이 투명하게 (포켓몬처럼): 테두리 글씨 기술 이름 + 오른쪽 속성 마름모. 글꼴은 둥근 Jua (2026-11-06) */


/* 그림 캐릭터(여주인공): 만들기 미리보기·캐릭터 창은 그림을 칸에 맞게, 전투는 펫처럼 발을 아래에 */
.create .preview .c-art { width: 150px; height: 220px; object-fit: contain; display: block; }
.doll-fig .c-art { position: absolute; z-index: 1; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; }
.stage .unit .art img.char-art.pic { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: none; }
.stage .unit .art img.char-art.rider { position: absolute; inset: auto 0 34% 0; height: 80%; z-index: 2; }

/* 전투 레벨 동그라미: Lv.100(세 자리)은 글자를 줄이고 옆으로 살짝 늘려 잘리지 않게 (2026-11-06) */
.stage .unit .lv.l3 { width: auto; min-width: clamp(14px, 1.9cqw, 18px); padding: 0 2px; border-radius: 999px; font-size: clamp(7px, .85cqw, 9px); letter-spacing: -.03em; }
/* 캐릭터 만들기: 주인공 그림 중 하나를 바로 고르기 */
.char-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.char-pick button { padding: 4px 2px 0; min-height: 0; height: 92px; border-radius: 12px; display: grid; place-items: end center; overflow: hidden; }
.char-pick button img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.char-pick button.on { border-color: #3a7cb8; box-shadow: 0 0 0 2px #3a7cb8; background: #eaf3fb; }
/* 전투 행동 순서 줄: 오른쪽 위에 고정 (자동 전투 버튼 바로 아래), 위에서부터 '먼저' → 순서대로 (2026-11-06) */
#battle .b-order { top: calc(max(8px, env(safe-area-inset-top)) + 50px); bottom: auto; flex-direction: column; max-height: calc(100% - 70px); }
#battle .b-order::before { top: 22px; bottom: 10px; }
@media (max-height: 500px) { #battle .b-order { top: calc(max(8px, env(safe-area-inset-top)) + 42px); max-height: calc(100% - 56px); gap: 3px; padding: 4px 3px; } }

/* ── 아래 띠 버튼을 띠 안에 (2026-11-06) ─────────────────────────────
   캐릭터·펫·진형·메뉴 버튼(52px)이 띠(40px) 위로 삐져나와 걸쳐 보이던 것을 고침:
   띠 높이를 버튼 + 위아래 4px로 맞추고, 버튼은 띠 안 가운데에. 채팅은 띠 바로 위로 */
:root { --band-h: 60px; }
@media (max-width: 760px), (max-height: 500px) { :root { --band-h: 52px; } }
.hud-band { height: calc(var(--band-h) + env(safe-area-inset-bottom)); }
.band-menu { bottom: calc(4px + env(safe-area-inset-bottom)); }
.chat { bottom: calc(var(--band-h) + 8px + env(safe-area-inset-bottom)); }
.b-chat .chat { bottom: auto; }
/* 캐릭터 만들기: 고른 캐릭터 종류 이름 (예: 은발 청년) */
/* 캐릭터 만들기 미리보기: 그림(키 큰 캐릭터 포함)과 종류 이름이 밝은 칸 안에 다 들어가게 (칸 높이를 내용에 맞춤) */
.create .preview { height: auto; align-content: start; gap: 2px; padding: 8px 0 8px; }
.create .preview .c-art { height: 210px; }

/* 캐릭터 만들기: 이름 칸 옆 다음 버튼 · 휴대폰 가로(낮은 화면)에서 스크롤 없이 한 화면에 (2026-11-06) */
.name-row { display: flex; gap: 8px; align-items: center; margin: 0; }
.name-row input { flex: 1; min-width: 0; }
.name-row button { flex-shrink: 0; }
@media (max-height: 500px) {
  #screen-create.screen.center { padding: 6px 10px; }
  .create { width: min(760px, 100%); padding: 10px 14px; gap: 8px; }
  .create h2 { font-size: 1rem; }
  .create .look { grid-template-columns: 112px 1fr; gap: 12px; }
  .create .preview { padding: 4px 0; }
  .create .preview .c-art { width: 112px; height: 140px; }
  .create .choice { gap: 4px; }
  .create .choice b { font-size: .78rem; }
  .create .char-pick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 56px; overflow-x: auto; padding-bottom: 2px; }
  .create .char-pick button { height: 72px; }
  .create .stack { gap: 8px; }
  .create .row button, .name-row button, .name-row input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  .create .meet img { max-height: 120px; }
}

/* 채팅 입력칸: 평소엔 숨기고, Enter(휴대폰은 말풍선 버튼)를 누르면 나온다. 채팅 글은 그대로 보인다 */
.chat:not(.open) .chat-input { display: none; }
.chat-open { display: none; pointer-events: auto; justify-self: start; width: 34px; min-height: 34px; height: 34px; padding: 0; border-radius: 50%;
  place-items: center; color: #3a3228; background: rgba(255, 255, 255, .6); border: 1px solid rgba(60, 80, 100, .3); opacity: .75; }
@media (hover: none) and (pointer: coarse) { .chat:not(.open) .chat-open { display: grid; } }
.battle .chat-open { display: none !important; }

/* ══ 전투 화면 테마: 33 원정대 분위기 + 그리스 석판 + 먹 붓 (2026-11-06) ══════════════
   구도는 그대로(비스듬한 경기장, 우리 편 왼쪽 아래 → 적 오른쪽 위). 어둡고 깊은 색, 가운데 대리석 원형 단,
   명령·기술 이름은 먹 붓 획, 순서 줄·자동 전투는 대리석 석판에 금빛 뇌문 띠, 데미지는 큰 금색 숫자. */
.battle { --ink: #16130f; --gold: #e2bd66; --marble: linear-gradient(160deg, #fbf9f4 0%, #efe9dd 55%, #e2d9c7 100%);
  --brush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20400%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M10%2013C46%205%20120%209%20200%206S352%203%20392%209L398%2020L389%2028L397%2038C362%2055%20262%2051%20182%2054S44%2058%209%2050L2%2041L10%2033L1%2023Z%27%20fill%3D%27%2316130f%27%20fill-opacity%3D%27.93%27/%3E%3Cpath%20d%3D%27M20%209C120%204%20280%205%20386%207%27%20stroke%3D%27%2316130f%27%20stroke-opacity%3D%27.5%27%20stroke-width%3D%272%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M14%2052C130%2056%20270%2055%20380%2049%27%20stroke%3D%27%2316130f%27%20stroke-opacity%3D%27.45%27%20stroke-width%3D%272%27%20fill%3D%27none%27/%3E%3C/svg%3E"); --brush-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20400%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23e9c979%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%239c7426%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M10%2013C46%205%20120%209%20200%206S352%203%20392%209L398%2020L389%2028L397%2038C362%2055%20262%2051%20182%2054S44%2058%209%2050L2%2041L10%2033L1%2023Z%27%20fill%3D%27url%28%23g%29%27/%3E%3C/svg%3E"); --meander: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2724%27%20height%3D%2712%27%20viewBox%3D%270%200%2024%2012%27%3E%3Cpath%20d%3D%27M0%2011H12V1H4V7H8V4%27%20fill%3D%27none%27%20stroke%3D%27%23a98545%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M12%2011H24%27%20fill%3D%27none%27%20stroke%3D%27%23a98545%27%20stroke-width%3D%271.6%27/%3E%3C/svg%3E"); }
.battle .b-ground {
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(6, 10, 18, .78) 100%),
    radial-gradient(ellipse 33% 19% at 50% 56%, transparent 97%, rgba(226, 189, 102, .45) 98%, transparent 100%),
    radial-gradient(ellipse 46% 27% at 50% 56%, transparent 95.5%, rgba(236, 214, 160, .7) 96.5%, rgba(150, 120, 70, .55) 99%, transparent 100%),
    radial-gradient(ellipse 46% 27% at 50% 56%, rgba(232, 228, 216, .6) 0, rgba(176, 182, 186, .4) 60%, rgba(124, 134, 146, .3) 96%, transparent 100%),
    radial-gradient(ellipse 46.5% 28.5% at 50% 58.5%, rgba(10, 14, 20, .55) 90%, transparent 100%),
    linear-gradient(180deg, #1d2a3a 0%, #2b3b4d 38%, #3b4c5c 70%, #2a3644 100%);
}
.battle .b-field.stage[data-area$="Cave"] .b-ground, .battle .b-field.stage[data-area="cave"] .b-ground {
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 50%, rgba(3, 6, 12, .85) 100%),
    radial-gradient(ellipse 46% 27% at 50% 56%, transparent 95.5%, rgba(140, 180, 210, .45) 97%, transparent 100%),
    radial-gradient(ellipse 46% 27% at 50% 56%, rgba(150, 175, 195, .4) 0, rgba(90, 110, 130, .25) 70%, transparent 100%),
    linear-gradient(180deg, #121a24 0%, #1d2836 50%, #18212c 100%);
}
/* 어두운 바닥 위 글씨·막대 */
.battle .stage .unit .nm { color: #f3ead8; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.battle .stage .unit .hpbar { background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 1px rgba(226, 189, 102, .55); }
.battle .stage .unit .foot { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }

/* 큰 금색 데미지 숫자 (33 원정대) */
.battle .stage .unit .pop { top: 0; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 900; font-size: clamp(22px, 3.2cqw, 40px); letter-spacing: -.02em;
  color: #ffd979; text-shadow: 0 0 1px #3a2606, 0 2px 0 #3a2606, 2px 0 0 #3a2606, -2px 0 0 #3a2606, 0 -2px 0 #3a2606, 0 4px 10px rgba(0, 0, 0, .7);
  animation: ink-pop 1s cubic-bezier(.2, .9, .3, 1) forwards; }
.battle .stage .unit .pop.crit { font-size: clamp(30px, 4.6cqw, 58px); color: #ffe7a3; }
.battle .stage .unit .pop.heal { color: #a9f0c0; text-shadow: 0 2px 0 #0f3b22, 2px 0 0 #0f3b22, -2px 0 0 #0f3b22, 0 -2px 0 #0f3b22, 0 4px 10px rgba(0, 0, 0, .6); }
.battle .stage .unit .pop.miss { color: #dfe6ec; font-size: clamp(16px, 2cqw, 24px); text-shadow: 0 2px 0 #1a222b, 2px 0 0 #1a222b, -2px 0 0 #1a222b, 0 -2px 0 #1a222b; }
.battle .stage .unit .pop.crit-word { top: -18%; font-size: clamp(14px, 1.9cqw, 22px); color: #fff3d2; padding: 2px 16px;
  background: var(--brush) center / 100% 100% no-repeat; text-shadow: none; letter-spacing: .12em; }
@keyframes ink-pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.55); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.18); }
  32% { transform: translate(-50%, -4px) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }

/* 기술 이름: 머리 위 먹 붓 띠 + 화면 위 가운데 행동 띠 */
.battle .cast-label { background: var(--brush) center / 100% 100% no-repeat; color: #f6e7bf; padding: 5px 18px; border: 0; border-radius: 0; box-shadow: none;
  font-weight: 800; letter-spacing: .04em; text-shadow: none; }
.battle .cast-label i { display: none; }


/* 대리석 석판 + 금빛 뇌문 띠: 행동 순서 줄·자동 전투 */
.battle .b-order, .battle .b-auto { background: var(--marble) !important; color: #3a3228; border: 1px solid rgba(150, 130, 100, .5) !important;
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .95), inset -2px -3px 5px rgba(120, 98, 62, .22), 0 1px 0 #d6cdbc, 0 2px 0 #cbc0ac, 0 3px 0 #bfb39f, 0 6px 14px rgba(0, 0, 0, .45) !important; }
.battle .b-auto { position: absolute; padding-bottom: 9px; }
.battle .b-auto::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 6px; background: var(--meander) left center / auto 100% repeat-x; opacity: .9; }

/* 명령: 먹 붓 획 버튼 (33 원정대) */

/* ── 전투 화면: 클레르 옵스퀴르 33 원정대식 배치 (2026-11-06)
   전투 화면은 이것 하나다(포켓몬식은 2026-11-06 없앰). #battle에 늘 .s33이 붙는다. ─────────────────────
   바탕은 석판 규칙 그대로, 명령·설명은 붓 띠(진한 갈색 먹 + 붉은 흙빛·금빛 강조).
   왼쪽 위 행동 순서 · 위 가운데 보스 막대와 적 행동 설명 · 차례인 유닛 옆 비스듬한 명령 띠 ·
   오른쪽 기술 설명 · 오른쪽 아래 우리 편 카드 · 왼쪽 아래 반복·도망 · 차례 유닛 쪽으로 화면 당기기 */
#battle.s33 {
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C20 3 50 6 80 4 C120 1 160 5 192 7 L198 13 L193 18 L199 24 L192 32 C150 36 110 34 70 37 C45 39 20 35 6 33 L2 26 L7 21 L1 15 Z' fill='%23231a13' fill-opacity='.7'/%3E%3C/svg%3E");
  --brush-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C40 2 90 4 140 3 C170 2 190 4 198 6 L196 9 C150 11 90 10 40 11 C20 11 8 10 2 7 Z' fill='%23c9913f'/%3E%3C/svg%3E");
  --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M30 12 C60 2 120 8 160 6 C185 5 196 30 192 60 C198 100 190 140 196 170 C190 192 150 196 110 192 C70 198 30 196 12 186 C2 150 8 110 4 70 C2 40 8 20 30 12 Z' fill='%23231a13' fill-opacity='.72'/%3E%3C/svg%3E");
}
#battle.s33 .x-cmd, #battle.s33 .x-side, #battle.s33 .x-info, #battle.s33 .x-say, #battle.s33 .x-boss, #battle.s33 .x-party {
  position: absolute; z-index: 1600; font-family: "Jua", "Pretendard", "Apple SD Gothic Neo", sans-serif; color: #f4ead8; }
/* 명령 띠: 한 줄씩 오른쪽으로 비스듬히 내려간다 */
#battle.s33 .x-cmd { display: none; width: 190px; }
#battle.s33 .x-cmd.show { display: block; }
#battle.s33 .x-who { font-size: .82rem; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .6); margin: 0 0 4px 4px; }
#battle.s33 .x-who span { color: #e2c27a; margin-left: 4px; }
#battle.s33 .x-rows { display: grid; gap: 5px; }
#battle.s33 .x-rows > :nth-child(2) { margin-left: 12px; } #battle.s33 .x-rows > :nth-child(3) { margin-left: 24px; }
#battle.s33 .x-rows > :nth-child(4) { margin-left: 36px; } #battle.s33 .x-rows > :nth-child(5) { margin-left: 48px; }
#battle.s33 .x-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 170px; min-height: 36px;
  padding: 4px 18px 4px 16px; border: 0; border-radius: 0; background: var(--brush) center / 100% 100% no-repeat; box-shadow: none;
  color: #f4ead8; font-family: inherit; font-size: 1rem; font-weight: 400; text-align: left; cursor: pointer; transition: transform .12s, color .12s; }
#battle.s33 .x-row::after { content: ""; position: absolute; left: 10%; right: 8%; bottom: 1px; height: 5px; background: var(--brush-hi) center / 100% 100% no-repeat;
  opacity: 0; transform: scaleX(.3); transform-origin: left; transition: opacity .15s, transform .2s; }
#battle.s33 .x-row:hover:not(:disabled), #battle.s33 .x-row:focus-visible { color: #ffe3a3; transform: translateX(4px); }
#battle.s33 .x-row:hover:not(:disabled)::after, #battle.s33 .x-row:focus-visible::after, #battle.s33 .x-row.main::after { opacity: 1; transform: none; }
#battle.s33 .x-row:disabled { opacity: .45; cursor: default; }
#battle.s33 .x-row.back { min-height: 30px; font-size: .86rem; color: #d8cbb4; width: 120px; }
#battle.s33 .x-row.empty span { font-size: .8rem; color: #b9ab93; }
#battle.s33 .x-n { font-family: "Oswald", sans-serif; font-weight: 600; font-size: .85rem; color: #e2c27a; }
#battle.s33 .x-ask { padding: 6px 14px; background: var(--brush) center / 100% 100% no-repeat; font-size: .9rem; color: #ffe3a3; width: 200px; }
/* 왼쪽 아래: 반복·도망·남은 시간 */
#battle.s33 .x-side { left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; }
#battle.s33 .x-side .x-row { width: auto; min-height: 30px; padding: 3px 18px; font-size: .86rem; }
#battle.s33 .x-side .b-timer { width: 90px; }
/* 오른쪽: 기술 설명 먹물 칸 */
#battle.s33 .x-info { right: max(12px, env(safe-area-inset-right)); top: 34%; width: 220px; padding: 18px 18px 20px; background: var(--blob) center / 100% 100% no-repeat;
  display: grid; gap: 4px; font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif; }
#battle.s33 .x-info[hidden] { display: none; }
#battle.s33 .x-info b { font-family: "Jua", sans-serif; font-weight: 400; font-size: 1.05rem; color: #ffe3a3; }
#battle.s33 .x-info small { font-size: .74rem; color: #d8b77a; }
#battle.s33 .x-info p { margin: 2px 0 0; font-size: .78rem; line-height: 1.45; color: #efe4d0; }
#battle.s33 .x-info p.d { color: #b9ab93; }
/* 위 가운데: 보스·우두머리 막대 + 적 행동 설명 */
#battle.s33 .x-boss { left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(46%, 520px); display: grid; justify-items: center; gap: 2px;
  font-size: .9rem; text-shadow: 0 1px 2px #000; }
#battle.s33 .x-boss[hidden] { display: none; }
#battle.s33 .x-bar { width: 100%; height: 7px; background: rgba(20, 14, 10, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
#battle.s33 .x-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8442f, #e58a7c); transition: width .35s; }
#battle.s33 .x-say { left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 40px); transform: translateX(-50%); padding: 6px 18px; border-radius: 3px;
  background: rgba(18, 14, 11, .72); box-shadow: 0 0 0 1px rgba(232, 214, 180, .35); font-family: "Pretendard", sans-serif; font-size: .88rem; white-space: nowrap; }
#battle.s33 .x-say[hidden] { display: none; }
/* 오른쪽 아래: 우리 편 카드 */
#battle.s33 .x-party { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; }
#battle.s33 .x-card { position: relative; width: 132px; padding: 6px 8px 7px 50px; background: var(--brush) center / 100% 100% no-repeat; font-size: .78rem; transition: transform .2s; }
#battle.s33 .x-card.now { transform: translateY(-6px); }
#battle.s33 .x-card.now::after { content: ""; position: absolute; left: 12%; right: 10%; bottom: -3px; height: 5px; background: var(--brush-hi) center / 100% 100% no-repeat; }
#battle.s33 .x-card.down { filter: grayscale(.8); opacity: .7; }
#battle.s33 .x-face { position: absolute; left: 4px; bottom: 4px; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #3a2e24; box-shadow: 0 0 0 2px #c9913f; }
#battle.s33 .x-face img, #battle.s33 .x-face canvas { width: 100%; height: 100%; object-fit: contain; }
#battle.s33 .x-meta { display: flex; justify-content: space-between; gap: 4px; }
#battle.s33 .x-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#battle.s33 .x-lv { color: #e2c27a; font-family: "Oswald", sans-serif; font-size: .74rem; }
#battle.s33 .x-hp { height: 6px; margin-top: 3px; background: rgba(0, 0, 0, .45); }
#battle.s33 .x-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fae7c, #8fd2a6); transition: width .35s; }
#battle.s33 .x-hp i.low { background: linear-gradient(90deg, #c46a45, #e6a07a); }
#battle.s33 .x-hpn { display: block; text-align: right; font-family: "Oswald", sans-serif; font-size: .78rem; color: #efe4d0; }
/* 우리 편 머리 위 HP 막대는 카드로 옮겼으니 숨김 (효과 아이콘은 그대로) */
#battle.s33 .stage .unit.mine .hpline, #battle.s33 .stage .unit.mine .hpnum { display: none; }
/* 행동 순서: 33처럼 왼쪽 위, 위에서부터 */
#battle.s33 .b-order { left: max(10px, env(safe-area-inset-left)); right: auto; top: max(10px, env(safe-area-inset-top)); bottom: auto; flex-direction: column;
  max-height: calc(100% - 120px); background: none; padding: 0; gap: 4px; }
#battle.s33 .b-order::before { display: none; }
#battle.s33 .b-order i { border-radius: 4px; width: 38px; height: 38px; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
#battle.s33 .b-order i.now { width: 52px; height: 52px; border-width: 3px; }
/* 채팅은 순서 줄 오른쪽 위, 작게 */
#battle.s33 .b-chat { left: calc(max(10px, env(safe-area-inset-left)) + 64px); top: max(8px, env(safe-area-inset-top)); bottom: auto; width: min(30%, 340px); }
/* 차례 유닛 쪽으로 화면 당기기 (카메라 대신) */
/* 카메라는 다른 세션이 만든 클로즈업(.b-field --cam)을 그대로 쓴다 */
/* 데미지 숫자: 큰 금빛 숫자 + 쉼표 (33 원정대 느낌, 글꼴 Cinzel) */
#battle.s33 .stage .unit .pop:not(.crit-word):not(.miss) { font-family: "Cinzel", "Oswald", "Pretendard", serif; font-weight: 900; font-size: clamp(22px, 3.4cqw, 40px);
  letter-spacing: .01em; color: #f2b544; background: linear-gradient(#ffe08a, #e89a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 0 1px #3b2410) drop-shadow(0 0 1px #3b2410) drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }   /* 테두리를 획 위가 아닌 둘레 그림자로 (Cinzel 4의 가는 획이 묻히지 않게) */
#battle.s33 .stage .unit .pop.crit:not(.crit-word) { font-size: clamp(28px, 4.4cqw, 52px); background: linear-gradient(#fff2b3, #f0b22f 55%, #d9741c); -webkit-background-clip: text; background-clip: text; }
#battle.s33 .stage .unit .pop.heal { background: linear-gradient(#d6ffd9, #59c27c); -webkit-background-clip: text; background-clip: text; }
/* 보통 데미지는 흰색 Cinzel 500, 살짝 좁게 + 부드러운 그림자 (33 원정대 숫자처럼). 치명타만 금색 굵게, 회복은 초록 (2026-11-06) */
#battle.s33 .stage .unit .pop:not(.crit-word):not(.miss):not(.crit):not(.heal) { font-weight: 500; letter-spacing: -.03em; color: #f6f7f3; background: none; -webkit-text-fill-color: #f6f7f3;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 6px rgba(0, 0, 0, .35)); }
#battle.s33 .stage .unit .pop.crit:not(.crit-word) { font-weight: 700; }
#battle.s33 .stage .unit .pop.heal { font-weight: 700; }
/* 휴대폰 가로 (낮은 화면): 조금씩 작게 */
@media (max-height: 500px) {
  #battle.s33 .x-row { width: 140px; min-height: 30px; font-size: .86rem; padding: 3px 14px; }
  #battle.s33 .x-rows > :nth-child(n) { margin-left: 0; } #battle.s33 .x-rows > :nth-child(2) { margin-left: 8px; } #battle.s33 .x-rows > :nth-child(3) { margin-left: 16px; } #battle.s33 .x-rows > :nth-child(4) { margin-left: 24px; }
  #battle.s33 .x-cmd { width: 170px; }
  #battle.s33 .x-card { width: 112px; padding-left: 42px; font-size: .7rem; }
  #battle.s33 .x-face { width: 36px; height: 36px; }
  #battle.s33 .x-info { width: 180px; top: 26%; padding: 12px 14px 14px; }
  #battle.s33 .x-info p { font-size: .7rem; }
  #battle.s33 .b-order i { width: 28px; height: 28px; } #battle.s33 .b-order i.now { width: 38px; height: 38px; }
  #battle.s33 .b-chat { left: calc(max(8px, env(safe-area-inset-left)) + 46px); }
}
/* 33 원정대식: 전투가 끝나면 '지도로 돌아가는 중' 띠를 아래 가운데에 */
#battle.s33 .x-cmd.done { left: 50%; top: auto; bottom: 18%; transform: translateX(-50%); width: auto; }
#battle.s33 .x-cmd.done .b-next { padding: 8px 26px; border: 0; background: var(--brush) center / 100% 100% no-repeat; color: #ffe3a3; font-family: inherit; font-size: 1rem; }
/* 33 원정대식 명령 띠: 띠 사이 빈 곳은 눌러도 뒤의 유닛이 눌리게 */
#battle.s33 .x-cmd { pointer-events: none; }
#battle.s33 .x-cmd .x-row, #battle.s33 .x-cmd .b-next { pointer-events: auto; }

/* 카메라 (차례인 펫에게 다가가기): 바닥과 유닛만 움직이고 버튼·순서 줄·기술 띠는 그대로 */
.battle .b-field.stage .b-ground, .battle .b-field.stage .b-team {
  transform-origin: var(--cam-o, 50% 50%); transform: var(--cam, none); transition: transform .55s cubic-bezier(.25, .8, .3, 1), transform-origin .55s; }
.battle .stage .slot:has(.boss) { width: calc(min(11.5cqw, 19cqh) * var(--k, 1) * 1.6); }

/* ── 33 원정대식 다듬기 (2026-11-06) ─────────────────────────────────────
   ① 행동 순서: 얼굴 가로 칸 + 먹 붓 바탕(반투명), 지금 차례는 크게 + 뒤에 금빛 햇살, 다음 차례들은 조금 흐리게
   ② 가장자리 정보 반투명(붓 바탕 70%), 자동 전투 버튼도 먹 붓으로
   ③ 쓰러진 적은 흐려지며 사라짐, 쓰러진 우리 편은 덜 흐리게
   ④ 데미지 숫자는 쓰러져도 늘 금빛 (흐림은 그림에만)
   ⑤ 명령을 고르는 동안 차례인 유닛 12% 크게, 나머지는 살짝 어둡게 */
#battle.s33 .b-order { gap: 3px; }
#battle.s33 .b-order i.o33 { position: relative; display: block; width: 62px; height: 40px; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; opacity: .78; transition: width .2s, height .2s, opacity .2s; }
#battle.s33 .b-order i.o33::before { content: ""; position: absolute; inset: -3px -10px -3px -6px; background: var(--brush) center / 100% 100% no-repeat; }
#battle.s33 .b-order i.o33 .o33-face { position: absolute; inset: 3px 6px 3px 4px; overflow: hidden; transform: skewX(-8deg); background: rgba(20, 15, 10, .35);
  box-shadow: inset 0 0 0 1.5px rgba(244, 234, 216, .85); }
#battle.s33 .b-order i.o33.foe .o33-face { box-shadow: inset 0 0 0 1.5px rgba(214, 112, 96, .9); background: rgba(80, 20, 15, .35); }
#battle.s33 .b-order i.o33 .o33-face img, #battle.s33 .b-order i.o33 .o33-face canvas { position: absolute; left: -10%; top: -6%; width: 150%; height: 150%; object-fit: cover; object-position: 18% 12%; transform: skewX(8deg); }
#battle.s33 .b-order i.o33.mine img { transform: skewX(8deg) scaleX(-1); object-position: 82% 12%; left: -40%; }
#battle.s33 .b-order i.o33 .o33-face canvas { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
#battle.s33 .b-order i.o33.now { width: 86px; height: 54px; opacity: 1; margin-bottom: 4px; }
#battle.s33 .b-order i.o33.now::after { content: ""; position: absolute; z-index: -1; left: -14px; top: 50%; width: 70px; height: 70px; transform: translateY(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(226, 189, 102, .55) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  animation: o33-sun 12s linear infinite; }
#battle.s33 .b-order i.o33.now .o33-face { box-shadow: inset 0 0 0 2px #e2bd66; }
@keyframes o33-sun { to { transform: translateY(-50%) rotate(360deg); } }
@media (max-height: 500px) { #battle.s33 .b-order i.o33 { width: 48px; height: 30px; } #battle.s33 .b-order i.o33.now { width: 66px; height: 40px; } }
/* ② 자동 전투 버튼도 먹 붓 */
#battle.s33 .b-auto, #battle.s33 .b-auto[aria-pressed="true"] { background: var(--brush) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important;
  color: #f4ead8 !important; font-family: "Jua", sans-serif; font-weight: 400; padding: 8px 22px; animation: none !important; }
#battle.s33 .b-auto[aria-pressed="true"] { color: #ffe3a3 !important; }
/* ③④ 쓰러짐: 흐림은 그림과 머리 위에만 (데미지 숫자는 그대로 금빛) */
#battle.s33 .stage .unit.down { opacity: 1; filter: none; }
#battle.s33 .stage .unit.down .art { filter: grayscale(1); opacity: .55; transition: opacity .5s, filter .5s; }
#battle.s33 .stage .unit.foe.down .art, #battle.s33 .stage .unit.foe.down .head { opacity: 0; transition: opacity .6s; }
/* ⑤ 차례인 유닛 크게, 나머지 살짝 어둡게 (명령 고르는 동안만) */
#battle.s33 .stage .unit { transition: transform .25s ease, filter .25s; }
#battle.s33 .stage .unit.acting { transform: translateY(-4px) scale(1.12); }
#battle.s33 .stage:has(.unit.acting) .unit:not(.acting):not(.target) .art { filter: brightness(.85); }
#battle.s33 .stage .unit.acting .foot { animation: o33-breathe 1.8s ease-in-out infinite; }
@keyframes o33-breathe { 50% { box-shadow: 0 0 0 3px rgba(240, 210, 140, .9), 0 0 14px rgba(240, 210, 140, .6); } }
/* 순서 줄 바깥 상자(대리석)는 33식에서 없앰 — 칸마다 먹 붓 바탕 */
#battle.s33 .b-order { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 10px 4px 6px; overflow: visible; border-radius: 0; }
#battle.s33 .b-chat { left: calc(max(10px, env(safe-area-inset-left)) + 112px); }
@media (max-height: 500px) { #battle.s33 .b-chat { left: calc(max(8px, env(safe-area-inset-left)) + 84px); } }
/* 33 원정대식 순서 줄: 아래로 갈수록 점점 흐리게 (맨 위 지금 차례 100% → 85 → 70 → 58 → 48 → 40% …) */
#battle.s33 .b-order i.o33:nth-child(1) { opacity: 1; }
#battle.s33 .b-order i.o33:nth-child(2) { opacity: .85; }
#battle.s33 .b-order i.o33:nth-child(3) { opacity: .7; }
#battle.s33 .b-order i.o33:nth-child(4) { opacity: .58; }
#battle.s33 .b-order i.o33:nth-child(5) { opacity: .48; }
#battle.s33 .b-order i.o33:nth-child(n+6) { opacity: .4; }
/* 아래 줄 크게 (2026-11-06): 왼쪽 반복·도망·시간 막대, 오른쪽 우리 편 카드 */
#battle.s33 .x-side { gap: 10px; }
#battle.s33 .x-side .x-row { min-height: 42px; padding: 6px 26px; font-size: 1.1rem; }
#battle.s33 .x-side .b-timer { width: 130px; height: 7px; }
#battle.s33 .x-party { gap: 12px; }
#battle.s33 .x-card { width: 182px; padding: 9px 12px 10px 70px; font-size: 1rem; }
#battle.s33 .x-face { width: 62px; height: 62px; left: 5px; bottom: 6px; box-shadow: 0 0 0 2.5px #c9913f; }
#battle.s33 .x-lv { font-size: .95rem; }
#battle.s33 .x-hp { height: 9px; margin-top: 5px; }
#battle.s33 .x-hpn { font-size: 1rem; }
@media (max-height: 500px) {
  #battle.s33 .x-side .x-row { min-height: 34px; padding: 4px 18px; font-size: .95rem; }
  #battle.s33 .x-side .b-timer { width: 100px; }
  #battle.s33 .x-card { width: 140px; padding: 6px 9px 7px 52px; font-size: .82rem; }
  #battle.s33 .x-face { width: 46px; height: 46px; }
  #battle.s33 .x-lv, #battle.s33 .x-hpn { font-size: .82rem; }
  #battle.s33 .x-hp { height: 7px; }
}

/* 명령 줄을 크게, 부채꼴로 (33 원정대 화면처럼): 캐릭터 옆에서 퍼지는 긴 먹 붓 획 */
#battle.s33 .x-cmd { width: 290px; }
#battle.s33 .x-rows { gap: 9px; }
#battle.s33 .x-rows > :nth-child(n) { margin-left: 0; }
#battle.s33 .x-rows > .x-row { width: 250px; min-height: 44px; padding: 6px 24px 6px 22px; font-size: 1.15rem;
  transform-origin: 0 50%; transform: translateX(var(--dx, 0)) rotate(var(--rot, 0deg)); }
#battle.s33 .x-rows > .x-row:hover:not(:disabled), #battle.s33 .x-rows > .x-row:focus-visible { transform: translateX(calc(var(--dx, 0px) + 6px)) rotate(var(--rot, 0deg)); }
#battle.s33 .x-rows > .x-row.back { width: 170px; min-height: 36px; font-size: .95rem; }
#battle.s33 .x-who { font-size: 1.05rem; margin-bottom: 6px; }
@media (max-height: 500px) {
  #battle.s33 .x-cmd { width: 220px; }
  #battle.s33 .x-rows { gap: 5px; }
  #battle.s33 .x-rows > .x-row { width: 190px; min-height: 34px; padding: 4px 18px; font-size: .95rem; }
  #battle.s33 .x-rows > .x-row.back { width: 130px; min-height: 28px; }
}
@media (max-height: 500px) { #battle.s33 .x-cmd { width: 200px; } #battle.s33 .x-rows > .x-row { width: 168px; } }

/* 이전 명령 반복: 차례인 유닛 왼쪽에 따로 (33 원정대 '조준' 자리), 먹 붓 + R 키 */
#battle.s33 .x-rep { position: absolute; z-index: 1700; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 18px 6px 24px; border: 0; border-radius: 0;
  background: var(--brush) center / 100% 100% no-repeat; color: #f4ead8; font-family: inherit; font-size: 1.05rem; cursor: pointer; transform: rotate(-3deg); transition: transform .12s, color .12s; }
#battle.s33 .x-rep[hidden] { display: none; }
#battle.s33 .x-rep:hover { color: #ffe3a3; transform: rotate(-3deg) translateX(-4px); }
#battle.s33 .x-rep kbd { font: 600 .78rem/1 "Oswald", sans-serif; padding: 3px 6px; border: 1px solid rgba(244, 234, 216, .6); border-radius: 4px; color: #e2c27a; }
@media (hover: none) and (pointer: coarse) { #battle.s33 .x-rep kbd { display: none; } }
@media (max-height: 500px) { #battle.s33 .x-rep { min-height: 34px; font-size: .9rem; padding: 4px 14px 4px 18px; } }
.battle .x-rep { display: none; }
#battle.s33 .x-rep:not([hidden]) { display: flex; }
/* 도망: 왼쪽 아래 그 자리에서 살짝 위로 */
#battle.s33 .x-side { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 18px); }

/* ── 전투 배경: 니플헤임 (2026-11-06) ─────────────────────────────────────
   오로라 밤하늘 · 끝이 하얀 얼음 산 · 펫이 서는 눈밭 · 흩날리는 눈. 그림 파일 없이 코드로 (동굴은 기존 동굴 색 그대로).
   나중에 그림 배경이 생기면 이 규칙의 background를 url("img/bg/니플헤임.webp") center / cover 로 바꾸면 된다. */
#battle .b-field.stage:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground {
  background:
    radial-gradient(1px 1px at 10% 15%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 78% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 16%, #fff 50%, transparent 51%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 60%, rgba(6, 12, 24, .55) 100%),
    linear-gradient(180deg, transparent 21%, rgba(190,215,235,.55) 27%, transparent 33%),
    radial-gradient(ellipse 52% 30% at 50% 58%, rgba(255,255,255,.55) 0, rgba(225,238,247,.35) 55%, transparent 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201600%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20260%20L120%20170%20L210%20230%20L330%20120%20L430%20210%20L560%2090%20L690%20200%20L800%20140%20L930%20230%20L1040%20110%20L1170%20210%20L1290%20150%20L1420%20230%20L1520%20170%20L1600%20210%20L1600%20400%20L0%20400Z%22%20fill%3D%22%235d7f9e%22%20opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M330%20120%20L360%20150%20L345%20152%20L330%20140%20L315%20158%20L300%20150Z%20M560%2090%20L595%20128%20L575%20130%20L560%20115%20L545%20135%20L528%20126Z%20M1040%20110%20L1072%20146%20L1055%20147%20L1040%20132%20L1024%20150%20L1010%20142Z%22%20fill%3D%22%23eaf4fb%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M0%20300%20L150%20230%20L280%20280%20L420%20210%20L560%20270%20L700%20220%20L860%20280%20L990%20230%20L1130%20285%20L1270%20225%20L1420%20280%20L1600%20240%20L1600%20400%20L0%20400Z%22%20fill%3D%22%233e5f7d%22%20opacity%3D%22.75%22/%3E%3C/svg%3E") left 0 top 12% / 100% 18% no-repeat,
    linear-gradient(180deg, transparent 0, transparent 27%, #d3e3ef 27.5%, #eef5fa 58%, #cfe0ec 100%),
    radial-gradient(ellipse 60% 14% at 30% 6%, rgba(120,255,200,.35), transparent 70%),
    radial-gradient(ellipse 50% 12% at 70% 4%, rgba(140,200,255,.35), transparent 70%),
    linear-gradient(180deg, #0f1c33 0%, #1d3557 14%, #3b5f86 25%, #6d8fae 27%);
}
#battle .b-field.stage:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.9) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90px 80px, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 150px 20px, rgba(255,255,255,.85) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60px 140px, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size: 180px 180px; opacity: .8; }

/* 오른쪽 아래 우리 편 카드: 지금 차례인 카드는 조금 더 크게 + 뒤에 황금 먹 붓 테두리 (33 원정대처럼, 2026-11-06) */
#battle.s33 .x-card.now { transform: translateY(-8px) scale(1.12); transform-origin: 60% 100%; background: none; z-index: 2; }
#battle.s33 .x-card.now::before { content: ""; position: absolute; inset: -12px -16px -10px -16px; z-index: -2;   /* 흐릿하게 번지는 금빛 먹 붓 (가장자리로 갈수록 옅게) */
  background: var(--brush-gold) center / 100% 100% no-repeat, radial-gradient(ellipse 45% 55% at 30% 55%, rgba(255, 214, 120, .5), transparent 80%);
  filter: blur(1.6px) saturate(1.1); opacity: .95;
  -webkit-mask-image: radial-gradient(ellipse 52% 60% at 48% 52%, #000 60%, rgba(0, 0, 0, .5) 82%, transparent 100%);
          mask-image: radial-gradient(ellipse 52% 60% at 48% 52%, #000 60%, rgba(0, 0, 0, .5) 82%, transparent 100%); }
#battle.s33 .x-card.now::after { left: 0; right: 0; top: 0; bottom: 0; height: auto; z-index: -1; background: var(--brush) center / 100% 100% no-repeat; }
#battle.s33 .x-card.now .x-face { box-shadow: 0 0 0 2.5px #e9bd62, 0 0 12px 3px rgba(255, 205, 100, .45); }

/* 전투 HP 줄: 유닛이 적어 크게 보이거나(최대 1.55배) 중형·대형 펫이라 칸이 커져도, HP 줄은 보통 칸(배율 1) 길이를 넘지 않게 (2026-11-06) */
.battle .stage .unit .hpline { width: min(80%, 9.2cqw, 15cqh); }
/* 33 원정대식: 적 HP 줄은 겨누는 적(마우스를 올린 적, 없으면 앞 칸 첫 적) 하나만, 그리고 맞은 적은 잠깐 보인다 (2026-11-06) */
#battle.s33 .stage .unit.foe .hpline { opacity: 0; transition: opacity .2s; }
#battle.s33 .stage .unit.foe.aim .hpline, #battle.s33 .stage .unit.foe.hp-show .hpline { opacity: 1; }
/* 전투 들어갈 때 연출: 카메라 속도는 --cam-t·--cam-ease로, 연출 중에는 명령·버튼·카드를 숨김 */
.battle .b-field.stage .b-ground, .battle .b-field.stage .b-team {
  transition: transform var(--cam-t, .55s) var(--cam-ease, cubic-bezier(.25, .8, .3, 1)), transform-origin var(--cam-t, .55s) var(--cam-ease, cubic-bezier(.25, .8, .3, 1)); }
#battle.intro .x-cmd, #battle.intro .x-rep, #battle.intro .x-side, #battle.intro .x-party, #battle.intro .b-order, #battle.intro .b-auto, #battle.intro .x-info {
  opacity: 0 !important; pointer-events: none !important; }
#battle .x-party, #battle .x-side, #battle .b-order, #battle .b-auto { transition: opacity .35s; }
/* 명령 줄 촤라락: 아래에서 올라오며 왼쪽→오른쪽으로 붓이 그어지듯 (줄마다 조금씩 늦게) */
#battle.s33 .x-cmd.enter .x-rows > * { animation: x-swipe .42s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
#battle.s33 .x-cmd.enter .x-who { animation: x-swipe .3s ease-out both; }
#battle.s33 .x-rep.enter { animation: x-swipe .42s cubic-bezier(.2, .9, .3, 1) both; animation-delay: 120ms; }
@keyframes x-swipe { from { opacity: 0; translate: -28px 30px; clip-path: inset(0 100% 0 0); } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); } }
/* "공격할 적을 고르세요" 안내: 밝은 눈밭 배경에서도 또렷하게 (진한 먹 바탕 + 크고 굵은 글씨 + 글자 그림자) */
#battle.s33 .x-ask { position: relative; width: 250px; min-height: 44px; padding: 9px 22px; font-size: 1.08rem; font-weight: 800; letter-spacing: .02em;
  color: #ffe9b0; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .9); background: none; isolation: isolate; }
#battle.s33 .x-ask::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; background: var(--brush) center / 100% 100% no-repeat; filter: brightness(.55) contrast(1.4); }
@media (max-height: 500px) { #battle.s33 .x-ask { width: 200px; min-height: 36px; padding: 7px 16px; font-size: .95rem; } }

/* 포획 가능 펫: 3초마다 "통!" (표시가 커졌다 돌아오고 발밑 초록 원에서 빛이 퍼짐) + 몸 둘레 초록빛 (2026-11-06) */
.stage .unit.wild .badge { font-size: clamp(10px, 1.1cqw, 13px); padding: 2px 9px; background: linear-gradient(#4cc27e, #2f8f57); box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(0, 0, 0, .35);
  animation: wild-badge 3s ease-in-out infinite; }
.stage .unit.wild .foot { animation: wild-ring 3s ease-out infinite; }
.stage .unit.wild .art img { filter: drop-shadow(0 0 6px rgba(90, 230, 150, .75)) drop-shadow(0 0 2px rgba(90, 230, 150, .9)); }
.stage .slot:nth-child(even) .unit.wild .badge, .stage .slot:nth-child(even) .unit.wild .foot { animation-delay: -1.5s; }   /* 두 마리면 엇갈려서 */
@keyframes wild-badge { 0%, 78%, 100% { transform: translateX(-50%) scale(1); } 84% { transform: translateX(-50%) scale(1.35) translateY(-3px); } 90% { transform: translateX(-50%) scale(.95); } 95% { transform: translateX(-50%) scale(1.05); } }
@keyframes wild-ring { 0%, 78% { box-shadow: 0 0 0 2px #3fa46a, 0 0 0 0 rgba(90, 230, 150, 0); } 84% { box-shadow: 0 0 0 3px #5fe39a, 0 0 0 4px rgba(90, 230, 150, .7); }
  100% { box-shadow: 0 0 0 2px #3fa46a, 0 0 0 22px rgba(90, 230, 150, 0); } }
@media (prefers-reduced-motion: reduce) { .stage .unit.wild .badge, .stage .unit.wild .foot { animation: none; } }
/* 전투 중 채팅: 6줄까지 보이고 (휴대폰 가로 5줄), 글씨를 반투명하게 해서 전장을 덜 가림. 스크롤 막대도 숨김. 마우스를 올리면 또렷하게 */
#battle .b-chat .chat-log { max-height: calc(6 * 1.3em) !important; opacity: .55; transition: opacity .2s; scrollbar-width: none; }
#battle .b-chat .chat-log::-webkit-scrollbar { display: none; }
#battle .b-chat .chat-log:hover { opacity: 1; }
@media (max-height: 500px) { #battle .b-chat .chat-log { max-height: calc(5 * 1.3em) !important; } }

/* 기술을 누르면: 검은 먹 붓이 왼쪽→오른쪽으로 크게 흩어지고, 배운 기술 카드가 차례로 나온다 (33 원정대처럼, 2026-11-06) */
#battle.s33 .x-cmd.sk { width: 330px; }
#battle.s33 .x-rows > .x-row.x-sk { width: 310px; min-height: 0; padding: 10px 26px 13px 22px; display: grid; justify-items: start; gap: 3px; text-align: left; white-space: normal; }
#battle.s33 .x-sk .x-sk-nm { display: flex; align-items: center; gap: 7px; font-size: 1.1rem; color: #ffe3a3; }
#battle.s33 .x-sk .x-sk-nm small { font-size: .7rem; color: #d8b77a; margin-left: 2px; }
#battle.s33 .x-sk .x-el { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); background: var(--el); box-shadow: 0 0 0 1.5px #fff8e6; flex: none; }
#battle.s33 .x-sk .x-sk-d { font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif; font-size: .74rem; line-height: 1.38; color: #efe4d0; }
#battle.s33 .x-sk.empty .x-sk-nm { font-size: .86rem; color: #b9ab93; }
#battle.s33 .x-cmd .x-sweep { position: absolute; left: -60px; top: 6px; width: 520px; height: 260px; z-index: -1; pointer-events: none;
  background: var(--brush) center / 100% 100% no-repeat; transform-origin: left center; filter: brightness(.45); animation: x-sweep .62s cubic-bezier(.2, .85, .3, 1) both; }
@keyframes x-sweep {
  0% { clip-path: inset(0 100% 0 0); opacity: .95; transform: scale(.85, .6) skewX(-14deg); }
  50% { clip-path: inset(0 0 0 0); opacity: .92; transform: scale(1, 1) skewX(-6deg); }
  100% { clip-path: inset(0 0 0 0); opacity: 0; transform: scale(1.18, 1.1) skewX(0); filter: brightness(.45) blur(3px); } }
#battle.s33 .x-cmd.sweep .x-rows > * { animation: x-skin .4s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(230ms + var(--i, 0) * 90ms); }
@keyframes x-skin { from { opacity: 0; translate: -40px 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); } }
@media (max-height: 500px) {
  #battle.s33 .x-cmd.sk { width: 270px; }
  #battle.s33 .x-rows > .x-row.x-sk { width: 250px; padding: 7px 20px 9px 16px; }
  #battle.s33 .x-sk .x-sk-nm { font-size: .95rem; } #battle.s33 .x-sk .x-sk-d { font-size: .64rem; }
  #battle.s33 .x-cmd .x-sweep { width: 400px; height: 200px; }
}
/* 명령 띠는 늘 우리 편 카드·순서 줄보다 위 (좁은 창에서 겹쳐도 누를 수 있게) */
#battle.s33 .x-cmd { z-index: 1700; }
/* 전투 주인공 그림: 왼쪽을 보고 그려진 주인공(검은 머리 소년·고양이 귀 소녀)은 좌우를 뒤집어 적이 있는 오른쪽을 보게 (2026-11-06) */
.stage .unit .art img.char-art.pic.flip { transform: scaleX(-1); }

/* ── 펫 도감 (게임 안, 2026-11-06): 어두운 판 + 왼쪽 칸 목록, 오른쪽 자세히. 한 마리라도 잡으면 초기치 범위가 열림 ── */
.panel.stone.book { --bk-gold: #ffe3a3; width: min(1080px, 100%); height: min(680px, 100%); padding: 18px 20px; color: #f3ead8; font-family: Jua, var(--font, sans-serif);
  background: radial-gradient(ellipse at 50% 20%, #2b3d55, #121a26 75%); border: 1px solid rgba(255, 227, 163, .25);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }
.panel.stone.book b, .panel.stone.book h3 { text-shadow: none; }
.panel.stone.book button { font-family: inherit; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; min-height: 0; height: 100%; }
.bk-left { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.bk-h { display: flex; align-items: baseline; gap: 12px; }
.panel.stone.book .bk-h h3 { color: var(--bk-gold); font-weight: 400; font-size: 1.5rem; margin: 0; }
.bk-h small { color: #d8c9ad; font-size: .92rem; } .panel.stone.book .bk-h small b { color: var(--bk-gold); font-weight: 400; }
.panel.stone.book .bk-x { margin-left: auto; padding: 4px 14px; background: rgba(255, 255, 255, .08); border: 0; color: #e9dcc0; box-shadow: none; border-radius: 14px; }
.bk-tabs { display: flex; gap: 8px; }
.panel.stone.book .bk-tabs button { padding: 4px 14px; border-radius: 14px; border: 0; box-shadow: none; background: rgba(255, 255, 255, .08); color: #cdbfa6; font-size: .9rem; }
.panel.stone.book .bk-tabs button.on { background: #c99d45; color: #1d160c; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; overflow: auto; align-content: start; padding: 3px; }
.panel.stone.book .bk-cell { position: relative; height: 96px; padding: 0 0 5px; border-radius: 12px; border: 0; background: rgba(15, 22, 32, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 227, 163, .15); display: grid; justify-items: center; align-content: end; color: #f3ead8; }
.bk-cell img { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); height: 56px; max-width: 80px; object-fit: contain; }
.bk-cell img.sil { filter: brightness(0) opacity(.35); }
.bk-cell .no { position: absolute; top: 3px; left: 6px; font: 500 .6rem Cinzel, serif; color: #8fa0b4; }
.bk-cell b { font-weight: 400; font-size: .82rem; }
.panel.stone.book .bk-cell:disabled { opacity: 1; } .bk-cell.none b { color: #6b7787; }
.bk-cell.seen { opacity: .75; } .bk-cell.seen b { color: #bfb39c; }
.panel.stone.book .bk-cell.caught { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, .55); }
.panel.stone.book .bk-cell.sel { box-shadow: 0 0 0 3px #f0c46a, 0 0 16px rgba(255, 205, 100, .5); background: rgba(60, 48, 26, .6); opacity: 1; }
.bk-cell > i { position: absolute; top: 5px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #d9a441); }
.bk-card { background: rgba(12, 17, 25, .78); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 227, 163, .25); padding: 16px 18px; display: grid; gap: 10px; align-content: start; overflow: auto; }
.bk-hero { height: 180px; border-radius: 14px; background: radial-gradient(ellipse 46% 26% at 50% 70%, rgba(255, 255, 255, .18), transparent); display: grid; place-items: center; }
.bk-hero img { max-height: 170px; max-width: 100%; object-fit: contain; }
.bk-hero.sm { height: 140px; } .bk-hero.sm img { max-height: 130px; }
.bk-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 1.45rem; color: var(--bk-gold); }
.bk-nm small { font-size: .85rem; color: #c9b998; }
.bk-el { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; padding: 2px 10px; border-radius: 12px; color: #f3f6fa;
  background: color-mix(in srgb, var(--c) 30%, transparent); }
.bk-el i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 0 1px #fff; }
.bk-sec { font-size: .85rem; color: #c9b998; margin-top: 4px; display: flex; justify-content: space-between; } .bk-sec span { color: #8fa0b4; }
.bk-st { display: grid; grid-template-columns: 40px 62px 1fr 44px; align-items: center; gap: 10px; font-size: .95rem; }
.bk-v { font: 700 1rem Cinzel, serif; color: #fff; text-align: right; } .bk-v em { color: #ffd24a; font-style: normal; margin-left: 2px; }
.bk-foot { margin: 0; font-size: .78rem; color: #9fb0c2; line-height: 1.5; }
/* 좁은 화면(휴대폰 세로): 위 목록, 아래 자세히 */
@media (max-width: 760px) {
  .panel.stone.book { height: 100%; padding: 14px; }
  .bk { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .bk-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .panel.stone.book .bk-cell { height: 84px; } .bk-cell img { height: 48px; }
  .bk-card { max-height: 46vh; } .bk-hero { height: 120px; } .bk-hero img { max-height: 112px; }
}
/* 대상 고르기 안내 밑에 조작법 한 줄 (←→ 키로 겨누고 Enter로 결정 / 한 번 눌러 겨누고 다시 눌러 결정) (2026-11-06) */
#battle.s33 .x-ask .x-hint { display: block; margin-top: 2px; font-size: .74rem; font-weight: 700; letter-spacing: 0; color: #f1dcae; opacity: .9; }

/* ── 펫 보관소 (2026-11-06): 왼쪽 반 맡긴 펫 48칸, 오른쪽 반 고른 펫(펫 창 모양), 아래 소지 펫 ── */
.panel.storage { width: min(1180px, 100%); height: min(690px, 100%); max-height: 100%; padding: 14px; display: block; }
.st { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.st-h { display: flex; align-items: center; gap: 12px; margin: 0; }
.st-h small { font-size: .85rem; font-weight: 600; color: #8a7556; letter-spacing: 0; }
.st-h button { min-height: 32px; padding: 0 12px; }
.st-main { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
.st-box { border-radius: 14px; padding: 10px; min-height: 0; background: linear-gradient(160deg, rgba(248, 242, 230, .9), rgba(237, 227, 208, .9));
  box-shadow: inset 0 0 0 1px rgba(110, 88, 56, .3), inset 0 3px 8px rgba(80, 60, 30, .16); }
.st-left { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; }
.st-bar { display: flex; align-items: center; gap: 4px; position: relative; z-index: 2; }
.st-chip { min-height: 30px; padding: 0 11px; border-radius: 9px; font-size: .85rem; font-weight: 700; background: #efe8db; border: 1px solid #d6c9b0; color: #3a3228; }
.st-chip.on { background: #e7cf93; border-color: #b8913f; color: #5a3f0c; }
.st-find { padding: 0 9px; display: grid; place-items: center; }
.st-sortw { position: relative; }
.st-dd { position: absolute; top: calc(100% + 4px); left: 0; display: grid; min-width: 110px; padding: 4px; border-radius: 10px; background: #fbf8f1; border: 1px solid #d6c9b0; box-shadow: 0 8px 18px rgba(60, 45, 20, .25); }
.st-dd button { text-align: left; border: 0; background: none; box-shadow: none; min-height: 32px; padding: 0 10px; border-radius: 7px; font-size: .85rem; font-weight: 600; color: #3a3228; }
.st-dd button[aria-selected="true"] { background: #e7cf93; color: #5a3f0c; font-weight: 800; }
.st-eb { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; }
.st-fe { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; background: none; box-shadow: none; }
.st-fe .st-eb { width: 22px; height: 22px; background: color-mix(in srgb, var(--el) 85%, #3a3228); box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .3); }
.st-fe.on { border-color: #b8913f; }
.st-q { width: 100%; box-sizing: border-box; min-height: 32px; }
.st-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 6px; min-height: 0; }
.st-c { position: relative; min-height: 0; padding: 0; border-radius: 8px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) 18px;
  border: 2px solid color-mix(in srgb, var(--el) 75%, #5a4a33);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--el) 30%, #fff) 0 30%, color-mix(in srgb, var(--el) 15%, #ece7de) 75%); }
.st-c img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 30% 15%; }
.st-c::after { content: ""; grid-row: 2; background: color-mix(in srgb, var(--el) 70%, #3a3228); }
.st-c .st-eb { position: absolute; bottom: 2px; left: 3px; }
.st-c > span { position: absolute; bottom: 0; right: 4px; line-height: 18px; font-size: .72rem; font-weight: 900; color: #fff; text-shadow: 0 0 2px #000, 0 1px 2px #000; }
.st-c .st-lk { position: absolute; bottom: 2px; right: 24px; color: #fff; text-decoration: none; display: grid; }
.st-c .st-lk svg, .st-k .st-lk svg { width: 12px; height: 12px; }
.st-new { position: absolute; top: 2px; right: 2px; font-style: normal; font-size: .6rem; font-weight: 900; color: #fff; background: #e07a3a; border-radius: 6px; padding: 0 4px; line-height: 1.5; }
.panel.storage .st-c.on, .panel.storage .st-k.on { outline: 3px solid #d6b468; outline-offset: 1px; }
.st-c.empty, .st-k.empty { border: 1px dashed rgba(140, 118, 82, .35); background: rgba(120, 112, 100, .06); border-radius: 8px; }
.st-pg { display: flex; justify-content: center; align-items: center; gap: 10px; }
.st-pg button { min-height: 28px; padding: 0 10px; border: 0; background: none; box-shadow: none; }
.st-pv { display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px 14px; }
.st-img { display: grid; place-items: center; min-height: 0; }
.st-img img { width: 100%; height: 100%; max-height: 380px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(60, 45, 20, .25)); }
.st-info { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 6px; min-height: 0; }
.st-info .ph-name { display: flex; align-items: center; gap: 8px; }
.st-info .ph-name b { font-size: 1.35rem; }
.st-info .ph-sub { display: flex; align-items: center; gap: 8px; }
.st-info .ph-meters { display: grid; gap: 3px; }
.st-stats { align-content: space-evenly; margin-top: 8px; }
.st-stats .pstat { min-height: 40px; }
.st-skills { align-content: start; overflow: auto; margin-top: 8px; }
.st-acts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.st-acts button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.st-acts button svg { width: 15px; height: 15px; }
.st-acts .warn { background: linear-gradient(#e58a7c, #c9604f); color: #fff; border-color: #a94c3d; }
.st-carry { display: flex; align-items: center; gap: 8px; }
.st-carry b { white-space: nowrap; margin-right: 4px; }
.st-k { position: relative; width: 96px; height: 64px; padding: 0; border-radius: 11px; display: grid; place-items: center; }
.st-k img { height: 46px; width: 90%; object-fit: contain; }
.st-k > span { position: absolute; bottom: 1px; font-size: .7rem; font-weight: 700; color: #6b5a40; }
.st-k i { position: absolute; top: 2px; left: 5px; font-style: normal; font-size: .62rem; font-weight: 900; color: #9a7428; }
.st-k .st-lk { position: absolute; top: 3px; right: 5px; text-decoration: none; color: #8a7556; display: grid; }
/* 낮은 화면(휴대폰 가로): 창 안을 한 번에 넘겨 본다 */
@media (max-height: 560px) {
  .panel.storage { height: 100%; overflow: auto; padding: 10px; }
  .st { height: auto; }
  .st-main { height: max(330px, calc(100vh - 150px)); }
  .st-grid { grid-template-rows: repeat(6, minmax(34px, 1fr)); gap: 4px; }
  .st-c { grid-template-rows: minmax(0, 1fr) 14px; }
  .st-c > span { line-height: 14px; font-size: .64rem; }
  .st-c .st-eb { bottom: 0; }
  .st-fe { width: 26px; height: 26px; } .st-fe .st-eb { width: 19px; height: 19px; }
  .st-chip { min-height: 26px; padding: 0 8px; font-size: .78rem; }
  .st-k { width: 70px; height: 50px; } .st-k img { height: 34px; }
  .st-stats .pstat { min-height: 30px; }
  .st-acts button { min-height: 32px; font-size: .8rem; }
}
/* 치명타 글자: 좁은 화면(휴대폰 가로)에서 유닛 칸이 좁아도 줄바꿈하지 않게 → 아래 숫자를 가리지 않음 */
.stage .unit .pop.crit-word { white-space: nowrap; }
.battle .stage .unit .pop.crit-word { top: min(-18%, -1.7em); }   /* 유닛이 작아도 숫자 위로 충분히 띄움 */
/* 캐릭터 창(넓은 화면·휴대폰 가로): 세로 탭은 오른쪽 위, 능력치 칸은 남은 높이를 다 써서 스크롤 없이 4줄 + 확정 줄이 다 보이게 */
@media (min-width: 600px) {
  .panel-wrap.dock .panel.thick.charview .cv-right { grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "pane tabs"; gap: 6px 10px; }
  .panel-wrap.dock .panel.thick.charview .ptabs { grid-area: tabs; }
  .panel-wrap.dock .panel.thick.charview .ptab { grid-area: pane; }
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"]:not([hidden]) { display: grid; grid-template-rows: auto auto; align-content: start; }   /* 확정 줄은 능력치 바로 아래 (아래 끝에 붙이면 PC에서 멀리 떨어짐) */
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"] .pstats { grid-auto-rows: minmax(24px, 46px); align-content: start; gap: 6px; }
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"] .pstat { height: auto; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick.charview .cv-right { grid-template-columns: minmax(0, 1fr) 84px; }
  .panel-wrap.dock .panel.thick.charview .pstat .pm button { min-height: 0; height: 22px; padding: 0 6px; }
  .panel-wrap.dock .panel.thick.charview .pts-box { padding: 3px 6px; gap: 4px; }
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"] .pstats { grid-auto-rows: 28px; gap: 4px; }   /* 휴대폰 가로: 4줄 + 확정 줄이 스크롤 없이 */
  .panel.stone.thick.charview .pts-box button { min-height: 26px; padding: 0 10px; }
}

/* 캐릭터 창: 탑승으로 더해지는 능력치 (파란 글씨) */
.pstats.riding .pstat { grid-template-columns: 3.2em minmax(0, 1fr) 4.6em; }
.pstats.riding .pstat.can { grid-template-columns: 3.2em minmax(0, 1fr) 4.6em auto; }
.pstat em.ride, .ride-note em.ride { font-style: normal; font-size: .8rem; color: #2f74b5; margin-left: 3px; font-weight: 700; }
.ride-note { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; color: var(--ink-soft); }
.ride-note svg { width: 16px; height: 16px; color: #2f74b5; flex: none; }
.ride-ups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 8px; }
.ride-ups span { display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border-radius: 10px; background: rgba(47, 116, 181, .08); }
.ride-ups small { font-size: .72rem; color: var(--ink-soft); }
.ride-ups b { color: #2f74b5; font-size: .95rem; }

/* 포획 (캐릭터 차례, 방어 아래): 잡을 펫이 없으면 흐리고 조금 작게, 잡을 수 있으면 원래 크기 (2026-11-07) */
#battle.s33 .x-rows > #c-capture:disabled { transform: scale(.82); transform-origin: left center; margin-top: -4px; }

/* 33 원정대식 적 HP 줄 (2026-11-07): 동그라미 대신 가는 'Lv.11' 글자, 막대는 얇은 붉은 선 (양 끝 눈금은 2026-11-07 뺌) */
#battle.s33 .stage .unit.foe .hpline { gap: 6px; align-items: center; }
#battle.s33 .stage .unit.foe .lv, #battle.s33 .stage .unit.foe .lv.l3 {
  display: inline-block; flex: none; width: auto; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: italic 700 clamp(9px, 1.05cqw, 12px)/1 Georgia, "Noto Serif KR", serif; letter-spacing: .02em; color: #f1e2bd;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .8); white-space: nowrap; }
#battle.s33 .stage .unit.foe .lv::before { content: "Lv."; font-size: .8em; opacity: .85; margin-right: 1px; }
#battle.s33 .stage .unit.foe .hpbar { position: relative; overflow: visible; height: 3px; border-radius: 0;
  background: rgba(10, 8, 6, .7); box-shadow: 0 0 0 1px rgba(226, 189, 102, .45), 0 1px 3px rgba(0, 0, 0, .6); }
#battle.s33 .stage .unit.foe .hpbar i, #battle.s33 .stage .unit.foe .hpbar i.low { border-radius: 0; background: linear-gradient(90deg, #a92f22, #e0563f); box-shadow: 0 0 4px rgba(224, 86, 63, .6); }
/* 펫 창 정보 탭: 아래 '총' 줄을 뺐으니, 남는 높이만큼 능력치 4줄을 위아래로 키워 빈칸을 채움 (2026-11-07) */
@media (min-width: 600px) {
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"]:not([hidden]), .panel.thick .ptab[data-pane="info"]:not([hidden]) {
    display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstats, .panel.thick .ptab[data-pane="info"] .pstats {
    grid-auto-rows: minmax(22px, 58px); align-content: space-evenly; gap: 6px; min-height: 0; }
}
/* 펫 창 이름 줄: 이름·고치기는 왼쪽, Lv·룬·총 등급은 오른쪽 끝으로 크게 (빈 공간 활용, 2026-11-07) */
.panel.petview .ph-name .lv, .st-info .ph-name .lv { margin-left: auto; font-size: 1.15rem; color: var(--ink); }
.panel.petview .ph-name .gpill, .st-info .ph-name .gpill { font-size: 1.75rem; line-height: 1; min-width: 1.9em; text-align: center; margin-right: 6px; }
.panel.petview .ph-name .gpill.g-SEVEN, .st-info .ph-name .gpill.g-SEVEN { font-size: 1.2rem; }
@media (max-height: 500px) {
  .panel.petview .ph-name .lv, .st-info .ph-name .lv { font-size: 1rem; }
  .panel.petview .ph-name .gpill, .st-info .ph-name .gpill { font-size: 1.45rem; }
}
/* 펫 창 (2026-11-07 2차): Lv·총 등급은 이름 오른쪽 빈 공간의 가운데에 크게. 능력치 줄은 스톤에이지처럼 큼직하게 */
.panel.petview .ph-name .lv, .st-info .ph-name .lv { margin-left: auto; font-size: 1.5rem; }
.panel.petview .ph-name > :last-child, .st-info .ph-name > :last-child { margin-right: auto; }
.panel.petview .ph-name .gpill, .st-info .ph-name .gpill { font-size: 2.4rem; margin-left: 10px; }
.panel.petview .ph-name .gpill.g-SEVEN, .st-info .ph-name .gpill.g-SEVEN { font-size: 1.6rem; }
@media (min-width: 600px) {
  .panel.thick .ptab[data-pane="info"] .pstat { font-size: 1.05rem; padding: 4px 14px; gap: 12px; grid-template-columns: 3.4em minmax(0, 1fr) 2.8em 2.4em; }
  .panel.thick .ptab[data-pane="info"] .pstat b { font-size: 1.45rem; }
  .panel.thick .ptab[data-pane="info"] .pstat .pbar { height: 12px; border-radius: 6px; }
  .panel.thick .ptab[data-pane="info"] .pstat .pbar i { border-radius: 6px; }
  .panel.thick .ptab[data-pane="info"] .pstat .gpill { font-size: 1.6rem; }
  .panel.thick .ptab[data-pane="info"] .pstat .gpill.g-SEVEN { font-size: 1rem; }
}
@media (max-height: 500px) {
  .panel.petview .ph-name .lv, .st-info .ph-name .lv { font-size: 1.15rem; }
  .panel.petview .ph-name .gpill, .st-info .ph-name .gpill { font-size: 1.7rem; }
  .panel.petview .ph-name .gpill.g-SEVEN, .st-info .ph-name .gpill.g-SEVEN { font-size: 1.15rem; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel.thick .ptab[data-pane="info"] .pstat { font-size: .92rem; padding: 2px 12px; }
  .panel.thick .ptab[data-pane="info"] .pstat b { font-size: 1.2rem; }
  .panel.thick .ptab[data-pane="info"] .pstat .pbar { height: 10px; }
  .panel.thick .ptab[data-pane="info"] .pstat .gpill { font-size: 1.35rem; }
}
/* 펫 창 아래 펫 6칸: 왼쪽에만 몰려 오른쪽이 비던 것 → 6칸이 줄 전체 너비를 나눠 가짐 (2026-11-07) */
@media (min-width: 600px) {
  .panel-wrap.dock .panel.thick .pd-tabs { overflow-x: hidden; }
  .panel-wrap.dock .panel.thick .pd-slot, .panel-wrap.dock .panel.thick .pd-slot.empty { flex: 1 1 0; width: auto; min-width: 0; height: 84px; }
  .panel-wrap.dock .panel.thick .pd-slot img { height: 54px; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick .pd-slot, .panel-wrap.dock .panel.thick .pd-slot.empty { height: 54px; }
  .panel-wrap.dock .panel.thick .pd-slot img { height: 30px; }
}
/* 펫 창 (2026-11-07 3차): Lv 줄 아래(EXP·HP·능력치)가 남는 높이를 다 쓰게. 능력치 줄은 칸 높이에 맞춰 글자·막대도 커짐 */
@media (min-width: 600px) {
  .panel.thick .ptab[data-pane="info"]:not([hidden]) { container-type: size; }
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstats, .panel.thick .ptab[data-pane="info"] .pstats {
    height: 100%; grid-auto-rows: minmax(22px, 1fr); align-content: stretch; gap: clamp(4px, 2.2cqh, 12px); }
  .panel.thick .ptab[data-pane="info"] .pstat { font-size: clamp(.9rem, 5cqh, 1.45rem); }
  .panel.thick .ptab[data-pane="info"] .pstat b { font-size: clamp(1.2rem, 7cqh, 2.1rem); }
  .panel.thick .ptab[data-pane="info"] .pstat .gpill { font-size: clamp(1.35rem, 7.5cqh, 2.3rem); }
  .panel.thick .ptab[data-pane="info"] .pstat .gpill.g-SEVEN { font-size: clamp(.9rem, 4.5cqh, 1.4rem); }
  .panel.thick .ptab[data-pane="info"] .pstat .pbar { height: clamp(10px, 3cqh, 18px); border-radius: 9px; }
  .panel.thick .ptab[data-pane="info"] .pstat .pbar i { border-radius: 9px; }
}
@media (min-width: 600px) and (min-height: 501px) {
  .panel.thick .ph-meters { gap: 6px; }
  .panel.thick .ph-meters .meter { font-size: .9rem; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .panel.thick .ph-meters .meter small { font-size: .85rem; }
  .panel.thick .ph-meters .mbar { height: 14px; border-radius: 7px; }
}
/* 펫 창 이름 줄 (2026-11-07 4차): 종족 이름 안내 뺌, 속성은 이름 오른쪽에 크게, 이름·Lv·총 등급 더 크게 */
.panel.petview .ph-name, .st-info .ph-name { gap: 8px; }
.panel.petview .ph-name b, .st-info .ph-name b { font-size: 1.7rem; line-height: 1.1; }
.panel.petview .ph-name .el, .st-info .ph-name .el { font-size: 1.1rem; font-weight: 800; padding: 4px 12px; gap: 6px; flex: none; }
.panel.petview .ph-name .el i, .st-info .ph-name .el i { width: 12px; height: 12px; }
.panel.petview .ph-name .lv, .st-info .ph-name .lv { font-size: 1.85rem; }
.panel.petview .ph-name .gpill, .st-info .ph-name .gpill { font-size: 2.9rem; }
.panel.petview .ph-name .gpill.g-SEVEN, .st-info .ph-name .gpill.g-SEVEN { font-size: 1.9rem; }
@media (max-height: 500px) {
  .panel.petview .ph-name, .st-info .ph-name { gap: 6px; }
  .panel.petview .ph-name b, .st-info .ph-name b { font-size: 1.3rem; }
  .panel.petview .ph-name .el, .st-info .ph-name .el { font-size: .9rem; padding: 2px 9px; }
  .panel.petview .ph-name .el i, .st-info .ph-name .el i { width: 10px; height: 10px; }
  .panel.petview .ph-name .lv, .st-info .ph-name .lv { font-size: 1.35rem; }
  .panel.petview .ph-name .gpill, .st-info .ph-name .gpill { font-size: 2rem; }
  .panel.petview .ph-name .gpill.g-SEVEN, .st-info .ph-name .gpill.g-SEVEN { font-size: 1.3rem; }
}
/* 펫 창: 왼쪽 그림 칸과 오른쪽 정보 칸(탭+이름·막대·능력치)을 반반으로 (2026-11-07) */
@media (min-width: 600px) {
  .panel-wrap.dock .panel.thick .pd-main { grid-template-columns: calc(50% - 7px) 104px minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick .pd-main { grid-template-columns: calc(50% - 5px) 84px minmax(0, 1fr); }
  .panel-wrap.dock .panel.thick .pd { grid-template-columns: calc(50% - 5px) 84px minmax(0, 1fr); }
}
/* 능력치 막대는 짧게, 능력치 이름·숫자는 더 크게 (2026-11-07) */
@media (min-width: 600px) {
  .panel.thick .ptab[data-pane="info"] .pstat { grid-template-columns: 3.2em minmax(0, 1fr) 2.6em 2.2em; padding: 4px 16px; }
  .panel.thick .ptab[data-pane="info"] .pstat > span:first-child { font-size: 1.25em; font-weight: 800; color: var(--ink); }
  .panel.thick .ptab[data-pane="info"] .pstat .pbar { width: min(100%, 170px); justify-self: center; }
}
/* EXP·HP 막대를 능력치 막대와 같은 길이·같은 자리로 (칸 너비를 px로 맞춤, 2026-11-07) */
@media (min-width: 600px) {
  .panel.thick .ptab[data-pane="info"] .pstat { grid-template-columns: 64px minmax(0, 1fr) 56px 44px; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .panel.thick.petview .ph-meters .meter { grid-template-columns: 64px minmax(0, 1fr) 112px; gap: 12px; padding: 0 16px; }
  .panel.thick.petview .ph-meters .meter .mbar { width: min(100%, 170px); justify-self: center; }
  .panel.thick.petview .ph-meters .meter .tnum { min-width: 0; }
}
/* EXP·HP 옆 숫자(MAX·132/132)를 왼쪽 정렬, 아래 능력치 숫자와 같은 왼쪽 선에 맞춤 (2026-11-07) */
@media (min-width: 600px) {
  .panel.thick.petview .ph-meters .meter .tnum { text-align: left; }
  .panel.thick .ptab[data-pane="info"] .pstat b { text-align: left; }
}

/* 펫 창 큰 그림: 크기(소형·준중형·중형·대형)에 따라 살짝 줄임. 발밑 기준으로 줄어 땅에 서 있게 (2026-11-07) */
@media (min-width: 600px) {
  .panel.thick .pet-hero img { scale: var(--hs, .85); transform-origin: 50% 88%; }
  .panel.thick .pet-hero img.small { scale: calc(1.4 * var(--hs, .85)); }
}

/* ── 2.5D 전장 (2026-11-07) ─────────────────────────────────────────────
   ① 지평선을 위로(27%) 올려 모든 유닛이 바닥에 서게 + 바닥에 원근 얼음 결
   ② 카메라를 층마다 따로: 하늘·바닥(--cam-sky), 우리 편(--cam-a), 적(--cam-e). 왼쪽 위 기준으로 옮기고 키움 (battleView.js setCam)
   ③ 내 차례에는 다른 우리 편·배경을 살짝 흐리게 (.dof, --blur-sky) */
#battle .b-field.stage:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::before { content: ""; position: absolute; left: -60%; right: -60%; top: 27%; height: 150%;
  transform-origin: 50% 0; transform: perspective(520px) rotateX(72deg); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(130, 165, 195, .06) 0 1px, transparent 1px 170px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 260px),
    radial-gradient(ellipse 22% 10% at 35% 12%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(ellipse 18% 8% at 70% 22%, rgba(255, 255, 255, .45), transparent 70%); }
.battle .b-field.stage .b-ground { transform-origin: 0 0; transform: var(--cam-sky, none); filter: var(--blur-sky, none); }
.battle .b-field.stage #b-ally { transform-origin: 0 0; transform: var(--cam-a, none); }
.battle .b-field.stage #b-enemy { transform-origin: 0 0; transform: var(--cam-e, none); }
.battle .b-field.stage .b-ground, .battle .b-field.stage .b-team {
  transition: transform var(--cam-t, .55s) var(--cam-ease, cubic-bezier(.25, .8, .3, 1)), filter var(--cam-t, .55s); }
.battle .stage .slot.dof { filter: blur(1.6px); opacity: .45; }   /* 내 차례에 다른 우리 편: 흐리고 옅게 (명령 띠·적을 가리지 않게) */
.battle .stage .slot { transition: filter .35s, opacity .35s; }

/* 캐릭터 창: 경험치바와 체력바 길이를 같게 (숫자 칸 너비를 고정, 2026-11-07) */
.panel.charview .cv .ph-meters .meter { grid-template-columns: 34px minmax(0, 200px) auto; justify-content: start; gap: 8px; }   /* 막대는 짧게(최대 200px), EXP·HP 길이·시작선 같게, 숫자는 막대 바로 옆 왼쪽부터 (2026-11-07) */
.panel.charview .cv .ph-meters .meter .tnum { min-width: 0; text-align: left; white-space: nowrap; padding-left: 4px; }

/* 대상 고르기(적)의 '행동 취소': 차례인 내 캐릭터·펫 그림 한가운데 (2026-11-07) */
#battle.s33 .x-cmd .x-undo { position: absolute; width: auto !important; min-height: 38px; padding: 4px 26px; font-size: 1rem; white-space: nowrap; z-index: 2; }

/* 아래 띠 출전 펫: 캐릭터와 같은 순서(그림 · 이름 Lv · HP 막대 · 숫자), 누르면 펫 창 (2026-11-07) */
.hud-band .band-pet .band-pname { white-space: nowrap; margin-right: 5px; }   /* 펫 Lv와 HP 사이 = 캐릭터 Lv와 HP 사이(10px) */
.hud-band .band-pet { margin-left: 22px; }   /* 캐릭터 HP와 펫 사이를 띄움 (2026-11-09 대표) */
.hud-band .band-pet .band-pname .lv { color: var(--st-soft); font-size: .78rem; }
.hud-band .band-pet .tnum { font-size: .74rem; color: var(--st-soft); }
.band-pet .mini-hp { width: 64px; }
@media (max-width: 520px) { .band-pet .mini-hp { width: 44px; } .hud-band .band-pet .tnum { display: none; } }
/* 휴대폰 가로: 캐릭터·펫 모두 HP 숫자는 빼고 이름·Lv·막대만 (이름이 잘리지 않게) */
@media (max-width: 900px) and (max-height: 500px) { .hud-band .band-hp .tnum, .hud-band .band-pet .tnum { display: none; } .band-pet .mini-hp, .band-hp .mini-hp { width: 48px; } }

/* 진형 바꾸기: 고른 주인공 그림으로 (전신 그림이라 세로로 길게) */
.fm-slot img.fm-art { width: 38%; height: auto; max-height: none; }

/* 펫 도감·포획 카드: 내가 잡은 펫의 초기치만 (도감 원본의 최저~최고·위치 막대는 안 보임, 2026-11-07) */
.bk-st.my { grid-template-columns: 52px 1fr; }
.bk-st.my .bk-v { text-align: left; }
.bk-card .bk-sec { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-card .bk-foot { min-height: 3em; }
.bk-pop .bk-st.cr { grid-template-columns: 52px 44px 1fr 66px; }
.bk-st.cr .bk-rg { font-family: inherit; font-size: .82rem; color: #c9b998; }

/* 치명타 숫자: 흰 일반 숫자와 확 구분되는 빨강 주황 + 붉은 빛, 0.4초 더 오래 (2026-11-07) */
#battle.s33 .stage .unit .pop.crit:not(.crit-word) { font-weight: 900; background: linear-gradient(#ffb36b, #ff5a2a 50%, #d61f1f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #3a0a06) drop-shadow(0 0 1px #3a0a06) drop-shadow(0 0 1px #3a0a06) drop-shadow(0 0 10px rgba(255, 70, 30, .55)); }
.battle .stage .unit .pop.crit, .battle .stage .unit .pop.crit-word { animation-duration: 1.4s; }
@media (min-width: 600px) and (max-height: 380px) {
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"] .pstats { grid-auto-rows: 24px; gap: 3px; }
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"]:not([hidden]) { gap: 4px; }
}
/* 캐릭터 창 '능력치 점수 남음' 줄: 되돌리기·확정은 늘 오른쪽에 나란히, 좁으면 글자만 두 줄로 (확정이 혼자 아랫줄로 떨어지던 것) */
.panel.charview .pts-box { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.panel.charview .pts-box .spacer { display: none; }
.panel.charview .pts-box b { line-height: 1.25; word-break: keep-all; }   /* "342점"이 중간에서 안 끊기게 */
@media (min-width: 600px) and (max-height: 500px) {
  .panel.charview .pts-box b { font-size: .72rem; }
  .panel.stone.thick.charview .pts-box button { padding: 0 8px; font-size: .78rem; }
}
/* 캐릭터 창 능력치: 막대 없앰 (대표 2026-11-07, 쓸모없이 자리만 차지) → 이름 · 숫자 · (오른쪽 끝) − + +5 */
.panel.charview .pstats .pstat, .panel.charview .pstats.riding .pstat { grid-template-columns: 3.2em minmax(0, 1fr); }
.panel.charview .pstats .pstat.can, .panel.charview .pstats.riding .pstat.can { grid-template-columns: 3.2em minmax(0, 1fr) auto; }
.panel.charview .pstats .pstat b { text-align: center; }   /* 능력치 숫자: 이름과 버튼 사이 가운데 */
/* 캐릭터 창 빈 곳 맞추기 (막대 없앤 뒤, 2026-11-07): PC는 창 너비를 줄이고, 능력치 묶음(4줄 + 남음 줄)을 칸 세로 가운데에, 숫자는 조금 크게 */
@media (min-width: 600px) and (min-height: 501px) {
  .panel-wrap.dock:has(.panel.thick.charview) { grid-template-columns: min(920px, calc(100vw - 20px)); }
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"]:not([hidden]) { align-content: start; }   /* 오른쪽 탭과 첫 줄 높이를 맞춤 (가운데 정렬 X) */
  .panel-wrap.dock .panel.thick.charview .ptab[data-pane="stat"] .pstats { grid-auto-rows: 60px; gap: 8px; }
  .panel.charview .pstats .pstat { padding: 4px 14px; font-size: .95rem; }
  .panel.charview .pstats .pstat b { font-size: 1.25rem; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .panel.charview .cv .ph-meters .meter { grid-template-columns: 26px minmax(0, 130px) auto; gap: 6px; }
}
/* 펫 창 휴대폰 가로 (2026-11-07): 그림 칸을 줄여(40% → 30%) 펫 옆 빈 곳을 오른쪽 정보에 쓰고, 이름 줄이 넘쳐 옆으로 스크롤되던 것·'1룬'이 두 줄로 꺾이던 것 고침 */
.panel.petview .ph-name > * { flex-shrink: 0; }
.panel.petview .ph-name > b { flex-shrink: 1; }
.panel.petview .ph-name .rune { white-space: nowrap; }
.panel.petview .pet-head, .panel.petview .ph-name { min-width: 0; }
@media (min-width: 600px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick.petview .pd, .panel-wrap.dock .panel.thick.petview .pd-main { grid-template-columns: minmax(0, 33%) 84px minmax(0, 1fr); }
  .panel.petview .ph-name { gap: 6px; }
  .panel.petview .ph-name .lv { font-size: 1.15rem; }
  .panel.petview .ph-name .gpill { font-size: 1.7rem; margin-left: 6px; }
  .panel.petview .ph-name .gpill.g-SEVEN { font-size: 1.15rem; }
}
@media (min-width: 600px) and (max-width: 720px) and (max-height: 500px) {
  .panel-wrap.dock .panel.thick.petview .pd, .panel-wrap.dock .panel.thick.petview .pd-main { grid-template-columns: minmax(0, 29%) 76px minmax(0, 1fr); }
  .panel.petview .ph-name { gap: 4px; }
  .panel.petview .ph-name .lv { font-size: .98rem; }
  .panel.petview .ph-name .gpill.g-SEVEN { font-size: 1rem; }
  .panel.petview .ph-name .gpill { font-size: 1.4rem; margin: 0; }
}
/* 진형 바꾸기: 휴대폰 가로에서 스크롤 없이 한 화면에 (칸 높이를 남는 높이에 맞춤, 2026-11-07) */
@media (max-height: 500px) {
  #panel:has(.fm-grid) { padding-top: 10px; padding-bottom: 10px; gap: 4px; overflow: hidden; }
  #panel:has(.fm-grid) h3 { margin: 0; font-size: 1rem; }
  #panel:has(.fm-grid) > p { font-size: .72rem; line-height: 1.3; }
  #panel .fm-label { font-size: .7rem; line-height: 1.2; }
  #panel .fm-grid { gap: 6px; }
  #panel .fm-slot { aspect-ratio: auto; height: clamp(44px, calc((100dvh - 210px) / 2), 120px); }
  #panel .fm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #panel .fm-slot { grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; min-width: 0; }
  #panel .fm-slot img, #panel .fm-slot canvas, #panel .fm-slot img.fm-art { width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: contain; }
  #panel:has(.fm-grid) .row button { min-height: 34px; padding: 4px 16px; }
}

/* 진형 바꾸기: '적 쪽 ▲ · 전열'은 창 가운데 위로 (2026-11-07) */
.fm-label.fm-foe { text-align: center; font-weight: 800; color: var(--ink); }
/* 캐릭터 창 '○○ 탑승 중': 능력치 바로 아래에 크게 (머리 위 작은 표시는 뺌, 2026-11-07) */
.ride-now { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font-size: 1.15rem; font-weight: 800; color: #2f6e45;
  background: rgba(101, 245, 160, .14); box-shadow: inset 0 0 0 1.5px #9fcaa9; }
.ride-now b { color: #1f5a37; }
.ride-now .ico, .ride-now svg { width: 22px; height: 22px; flex: none; }
@media (max-height: 500px) { .ride-now { padding: 4px 10px; font-size: .95rem; gap: 6px; } .ride-now .ico, .ride-now svg { width: 18px; height: 18px; } }
/* 능력치 막대는 게임 어디에도 안 씀 (대표 2026-11-07): 펫 창·보관소·캐릭터 만들기 → 이름 · 숫자(가운데) · 등급/버튼 */
.pstats .pstat.graded { grid-template-columns: 3.4em minmax(0, 1fr) 4.2em !important; }   /* 등급 칸 너비 고정: A+·S·SEVEN 이어도 숫자가 같은 자리에 (2026-11-07) */
.pstats .pstat.graded > :last-child { justify-self: end; white-space: nowrap; }
.pstats .pstat.graded b { text-align: center !important; }
.create .stat-row { grid-template-columns: minmax(0, 1fr) 40px 48px 40px; }
.pbar { display: none !important; }
/* 탑승 탭 펫 칸: 그림 · 이름 Lv · 속성을 한 줄로, 칸 가운데에 (2026-11-07) */
.ride-card { display: flex; justify-content: center; align-items: center; gap: 14px; }
.ride-card .rc-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ride-card .rc-line b { font-size: 1.15rem; }
.ride-card .rc-line .rune { margin: 0; }
/* 캐릭터 창·펫 창: 한 줄짜리 칸·안내는 가운데로 (대표 2026-11-07) */
.ride-now { justify-content: center; }
.set-box { text-align: center; justify-items: center; }
.panel.charview .pt-empty, .panel.petview .pt-empty { text-align: center; }
.panel.charview .pt-next, .panel.petview .pt-next { text-align: center; }
/* 펫 창 EXP·HP: 막대 짧게, 숫자는 막대 바로 옆, 줄 전체는 칸 가운데 (캐릭터 창과 같은 모양) */
.panel.petview .ph-meters .meter, .panel.thick.petview .ph-meters .meter { grid-template-columns: 34px minmax(0, 200px) 6.5em !important; justify-content: center; gap: 8px; padding: 0; }
.panel.petview .ph-meters .meter .mbar, .panel.thick.petview .ph-meters .meter .mbar { width: 100% !important; justify-self: stretch; }
.panel.petview .ph-meters .meter .tnum { text-align: left !important; min-width: 0; white-space: nowrap; }
@media (max-height: 500px) { .panel.petview .ph-meters .meter, .panel.thick.petview .ph-meters .meter { grid-template-columns: 26px minmax(0, 150px) 5.5em !important; } }
/* 펫·캐릭터 창(가로 화면): 아이폰처럼 양옆에 안전 영역(노치)이 있어도 화면 가운데에, 화면 밖으로 넘쳐 옆으로 밀리지 않게 (2026-11-07) */
@media (min-width: 600px) {
  .panel-wrap.dock:has(.panel.thick) { justify-content: center; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .panel-wrap.dock:has(.panel.thick) { grid-template-columns: min(1180px, 100%); }
  .panel-wrap.dock:has(.panel.thick.charview) { grid-template-columns: min(920px, 100%); }
}
@media (min-width: 600px) and (max-height: 380px) {
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstats, .panel.thick .ptab[data-pane="info"] .pstats { grid-auto-rows: minmax(18px, 1fr); gap: 3px; }
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstat { padding-top: 0; padding-bottom: 0; font-size: .82rem; line-height: 1.1; }
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstat b { font-size: 1rem; }
  .panel-wrap.dock .panel.thick .ptab[data-pane="info"] .pstat .gpill { font-size: 1.05rem; }
  .panel.thick .ptab[data-pane="info"] .pstat .gpill.g-SEVEN { font-size: .8rem; }
}

/* 펫 기술 탭 (휴대폰 가로): 2×2 작은 카드(그림·이름)만 보이고, 누르면 그 기술만 설명과 함께 크게 → 스크롤 없음 (2026-11-07) */
@media (min-width: 600px) and (max-height: 500px) {
  .panel.thick .ptab[data-pane="skill"]:not([hidden]) { overflow: hidden; }
  .ptab[data-pane="skill"] .skcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ptab[data-pane="skill"] .skc { grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 6px; cursor: pointer; min-height: 0; }
  .ptab[data-pane="skill"] .skc-ic { width: 30px; height: 30px; border-radius: 8px; }
  .ptab[data-pane="skill"] .skc-ic .ico { width: 13px; height: 13px; }
  .ptab[data-pane="skill"] .skc-ic small { font-size: .5rem; }
  .ptab[data-pane="skill"] .skc-txt b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .ptab[data-pane="skill"] .skc-txt > div:first-child { min-width: 0; overflow: hidden; }
  .ptab[data-pane="skill"] .skc-type, .ptab[data-pane="skill"] .skc-line { display: none; }
  .ptab[data-pane="skill"] .skcards.open { grid-template-columns: minmax(0, 1fr); }
  .ptab[data-pane="skill"] .skcards.open .skc:not(.on) { display: none; }
  .ptab[data-pane="skill"] .skcards.open .skc.on { grid-template-columns: 38px minmax(0, 1fr); align-items: start; padding: 6px 8px; }
  .ptab[data-pane="skill"] .skcards.open .skc.on .skc-ic { width: 38px; height: 38px; }
  .ptab[data-pane="skill"] .skcards.open .skc.on .skc-type { display: inline; }
  .ptab[data-pane="skill"] .skcards.open .skc.on .skc-txt b { display: inline; white-space: normal; }
  .ptab[data-pane="skill"] .skcards.open .skc.on .skc-line { display: block; font-size: .78rem; line-height: 1.35; }
  .ptab[data-pane="skill"] .pt-next { margin: 3px 2px 0; font-size: .68rem; }
  .ptab[data-pane="skill"] .skcards.open ~ .pt-next { display: none; }
}
/* 펫 보관소 휴대폰 가로: 스크롤 없이 한 화면에 (아래 쪽 넘기기가 잘리던 것). 칸 높이를 남는 높이에 맞춤 (2026-11-07) */
@media (max-height: 560px) {
  .panel.storage { height: 100%; overflow: hidden; padding: 8px 10px; }
  .panel.storage .st { height: 100%; gap: 6px; }
  .panel.storage .st-main { height: auto; min-height: 0; }
  .panel.storage .st-left { min-height: 0; gap: 5px; }
  .panel.storage .st-grid { grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .panel.storage .st-acts button { min-height: 28px; }
}
/* EXP·HP 막대 옆 숫자는 어디서나 왼쪽부터 (대표 2026-11-07) */
.meter .tnum { text-align: left !important; }
@media (max-height: 560px) {
  .panel.storage .st-pv { gap: 6px 10px; min-height: 0; }
  .panel.storage .st-info { gap: 3px; overflow: hidden; }
  .panel.storage .st-info .ph-name { gap: 4px; flex-wrap: nowrap; min-width: 0; }
  .panel.storage .st-info .ph-name b { font-size: 1rem; }
  .panel.storage .st-info .ph-name .lv { font-size: 1rem; margin-left: 4px; }
  .panel.storage .st-info .ph-name .gpill { font-size: 1.3rem; margin: 0 0 0 4px; min-width: 0; }
  .panel.storage .st-info .ph-name .gpill.g-SEVEN { font-size: .9rem; }
  .panel.storage .st-info .ph-name .el { font-size: .8rem; padding: 2px 8px; }
  .panel.storage .st-stats { margin-top: 2px; gap: 3px; align-content: start; }
  .panel.storage .st-stats .pstat { min-height: 0; height: 26px; padding-top: 0; padding-bottom: 0; }
}
@media (max-height: 560px) {
  .panel.storage .st-pv { grid-template-columns: 36% minmax(0, 1fr); }
  .panel.storage .st-info .ph-meters .meter { font-size: .62rem; line-height: 1.1; }
  .panel.storage .st-acts button { min-height: 26px; font-size: .74rem; }
}
@media (max-height: 380px) {
  .panel.storage .st-stats .pstat { height: 22px; font-size: .76rem; }
  .panel.storage .st-stats .pstat b { font-size: .9rem; }
  .panel.storage .st-stats { gap: 2px; }
  .panel.storage .st-info .ph-meters { gap: 1px; }
}
/* 보관소: 왼쪽(목록)·오른쪽(펫) 반반을 지킴 — 좁은 휴대폰에서 거르기 단추 줄이 왼쪽을 넓혀 오른쪽이 밀려나던 것 */
.panel.storage .st-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel.storage .st-left, .panel.storage .st-bar { min-width: 0; }
@media (max-width: 760px) and (max-height: 560px) {
  .panel.storage .st-bar { gap: 3px; flex-wrap: nowrap; }
  .panel.storage .st-fe { width: 21px; height: 21px; flex: none; } .panel.storage .st-fe .st-eb { width: 15px; height: 15px; }
  .panel.storage .st-chip { padding: 0 5px; font-size: .7rem; min-height: 22px; }
}
@media (max-width: 760px) and (max-height: 560px) {
  .panel.storage .st-acts { gap: 3px; }
  .panel.storage .st-acts button { padding: 0 4px; font-size: .7rem; min-width: 0; }
}
/* 보관소 '자세히'(기술): 스크롤 없이 기술 4개가 다 보이게 — 그림 칸을 접고 기술을 2×2로 작게 (2026-11-07) */
.panel.storage .st-pv.more { grid-template-columns: minmax(0, 1fr); }
.panel.storage .st-pv.more .st-img { display: none; }
.panel.storage .st-pv.more .st-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; overflow: hidden; align-content: stretch; }
.panel.storage .st-pv.more .skc { min-height: 0; overflow: hidden; padding: 6px 8px; gap: 8px; }
.panel.storage .st-pv.more .skc-txt { min-width: 0; }
.panel.storage .st-pv.more .skc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 560px) {
  .panel.storage .st-pv.more .skc { padding: 3px 6px; gap: 6px; font-size: .74rem; }
  .panel.storage .st-pv.more .skc b { font-size: .8rem; }
  .panel.storage .st-pv.more .skc-ic { width: 30px; height: 30px; }
  .panel.storage .st-pv.more .skc-ic svg { width: 13px; height: 13px; }
  .panel.storage .st-pv.more .skc-type { font-size: .6rem; padding: 0 4px; }
  .panel.storage .st-pv.more .skc-line { font-size: .68rem; line-height: 1.25; }
}
@media (max-height: 400px) {
  .panel.storage .st-pv.more .ph-meters { display: none; }   /* 아주 낮은 화면: 기술 볼 때만 EXP·HP 줄을 접어 기술 칸에 자리를 줌 */
}
.panel.storage .st-pv.more .skc-txt > div:first-child { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.panel.storage .st-pv.more .skc-txt > div:first-child b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 880px) and (max-height: 560px) {
  .panel.storage .st-bar { gap: 2px; }
  .panel.storage .st-fe { width: 18px; height: 18px; border-width: 1px; } .panel.storage .st-fe .st-eb { width: 13px; height: 13px; }
  .panel.storage .st-fe .st-eb svg { width: 9px; height: 9px; }
  .panel.storage .st-chip { padding: 0 4px; font-size: .64rem; min-height: 20px; }
}
@media (max-width: 700px) and (max-height: 560px) {
  .panel.storage .st-bar { gap: 1px; }
  .panel.storage .st-fe { width: 17px; height: 17px; } .panel.storage .st-fe .st-eb { width: 12px; height: 12px; }
  .panel.storage .st-chip { padding: 0 3px; font-size: .6rem; }
}
@media (max-width: 760px) and (max-height: 560px) { .panel.storage .st-pv.more .skc-type { display: none; } }   /* 좁으면 기술 이름이 안 잘리게 (액티브·패시브는 왼쪽 아이콘으로 구분) */
/* 보관소 휴대폰 가로: 한 쪽 24칸(6×4), 목록 칸은 조금 좁게·펫 칸은 넓게 */
@media (max-height: 560px) {
  .panel.storage .st-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .panel.storage .st-main { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
/* 정렬 점검 (2026-11-07): 펫 목록 버튼이 칸 밖으로 안 나가게 줄바꿈, HP 글자 칸 너비 고정(막대 길이 같게), 보관소 소지 펫 칸은 그림 아래에 Lv (겹침 없음) */
.pet-list .pet-act { flex-wrap: wrap; }
.pr-hp { grid-template-columns: minmax(0, 1fr) 5.6em; }
.panel.stone .pet-list .pet-act { gap: 3px; }
.panel.stone .pet-list .pet-act button { padding: 3px 6px; }
.pr-hp > .tnum { text-align: right; white-space: nowrap; }
.st-k { grid-template-rows: minmax(0, 1fr) auto; padding: 3px 0 2px; gap: 0; }
.st-k img { height: 100%; max-height: 40px; min-height: 0; }
.st-k > span { position: static; line-height: 1.1; }
@media (max-height: 500px) { .st-k img { max-height: 30px; } }

/* 펫 창: 이름·연필은 정보·기술·룬 각성 칸 위로 (이름 길이에 따라 Lv·등급이 움직이지 않게). 긴 이름은 왼쪽 펫 그림 쪽 빈 곳으로 넘어가도 됨 (2026-11-07) */
.ph-title { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.ph-title b { font-size: 1.7rem; line-height: 1.1; white-space: nowrap; }
@media (min-width: 600px) {
  .panel.thick.petview .ph-title { grid-area: tabs; align-self: start; justify-self: end; position: relative; z-index: 2; height: 44px; }
  .panel.thick.petview .ptabs { margin-top: 52px; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .ph-title b { font-size: 1.3rem; }
  .panel.thick.petview .ph-title { height: 34px; }
  .panel.thick.petview .ptabs { margin-top: 40px; }
}

/* 속성도 이름 옆(왼쪽)으로 (2026-11-07) */
.ph-title .el { font-size: 1.1rem; font-weight: 800; padding: 4px 12px; gap: 6px; flex: none; }
.ph-title .el i { width: 12px; height: 12px; }
@media (max-height: 500px) { .ph-title .el { font-size: .9rem; padding: 2px 9px; } .ph-title .el i { width: 10px; height: 10px; } }

/* 펫 창 오른쪽 위 정렬 (2026-11-07): Lv·총 등급·EXP·HP를 아래 능력치 줄과 같은 칸 선에 맞춤
   칸: [이름 52px] [숫자·막대] [등급 60px], 좌우 여백 16px. Lv는 숫자 칸 가운데, 총 등급은 등급 칸 가운데, EXP·HP 글자는 능력치 이름 칸, 막대는 숫자 칸부터, 숫자는 오른쪽 끝 */
@media (min-width: 600px) {
  .panel-wrap.dock .panel.thick.petview .ptab[data-pane="info"] .pstat.graded { grid-template-columns: 52px minmax(0, 1fr) 60px; column-gap: 12px; padding-left: 16px; padding-right: 16px; }
  .panel.thick.petview .ph-name.ph-lvrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 60px; column-gap: 12px; padding: 0 16px; align-items: center; }
  .panel.thick.petview .ph-lvrow .ph-lvbox { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .panel.thick.petview .ph-lvrow .ph-lvbox .lv { margin: 0; }
  .panel.thick.petview .ph-lvrow > :last-child { grid-column: 3; justify-self: center; margin: 0; }
  .panel.thick.petview .ph-meters { padding: 0 16px; }
  .panel.thick.petview .ph-meters .meter { grid-template-columns: 52px minmax(0, 1fr) auto !important; justify-content: stretch; column-gap: 12px; padding: 0; }
  .panel.thick.petview .ph-meters .meter .mbar { width: 100%; justify-self: stretch; }
  .panel.thick.petview .ph-meters .meter .tnum { text-align: right; min-width: 4.5em; }
}
/* 펫·캐릭터 창을 열면 위쪽 버튼 줄(전체 화면·은화·자동 전투·자동사냥)까지 덮어 창을 위로 넓게 (2026-11-07) */
@media (min-width: 600px) {
  .panel-wrap.dock:has(.panel.thick) { padding-top: max(8px, env(safe-area-inset-top)); }
}
@media (min-width: 600px) { .panel.thick.petview .ph-meters .meter small { justify-self: start; text-align: left; } }

/* 펫 창 잠금: 아래 버튼 줄의 '잠금' 칸 대신 그림 왼쪽 위 자물쇠 하나 (잠김 금색 / 풀림 흐린 회색, 2026-11-07) */
.hero-lock { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid rgba(120, 100, 70, .25);
  background: rgba(255, 252, 245, .85); color: #a8a091; box-shadow: none; cursor: pointer; }
.hero-lock .ico { width: 16px; height: 16px; }
.panel .hero-badges .hero-lock.on, .panel .hero-badges .hero-lock.on:hover { background: linear-gradient(#e6c983, #b58c3d) !important; color: #fffaf0 !important; border-color: #93712e !important; }
.hero-badges { align-items: center; }
@media (max-height: 500px) { .hero-lock { width: 26px; height: 26px; } .hero-lock .ico { width: 14px; height: 14px; } }
/* 아래 줄 캐릭터 이름·Lv: 룬 각성하면 색이 바뀜 (1룬 초록 #65F5A0, 2룬 금색 #FFD76A). 밝은 바탕에서도 보이게 짙은 테두리 (2026-11-07) */
/* 펫 이름·Lv도 같은 색. 아래 줄에는 '1룬·2룬' 글자 표시 안 함 (대표 2026-11-07) */
.hud-band :is(.band-who, .band-pname).rn1 :is(b, .lv) { color: #1E9E52; }
.hud-band :is(.band-who, .band-pname).rn2 :is(b, .lv) { color: #7B3FC4; }   /* 2룬 보라 (1룬 초록, 2026-11-07 대표) */
.hud-band :is(.band-who, .band-pname):is(.rn1, .rn2) :is(b, .lv) {
  text-shadow: -1px 0 #3a2f22, 1px 0 #3a2f22, 0 -1px #3a2f22, 0 1px #3a2f22; }

/* 1룬 초록 이름: 검은 테두리 없이 조금 진한 초록으로 선명하게 (2026-11-07 대표) */
.hud-band :is(.band-who, .band-pname):is(.rn1, .rn2) :is(b, .lv) { text-shadow: none; }   /* 2룬 금색도 테두리 없이 (2026-11-07 대표) */
/* 채팅 글씨: 검은 테두리 없앰 (대표 2026-11-07) — 지도·전투·입력 중 모든 채팅 */
.chat-log, .chat-log *, .b-chat .chat-log, .b-chat .chat-log * { text-shadow: none !important; }
/* 지도(밝은 눈밭) 채팅: 테두리 없이도 읽히게 진한 글씨 — 전투 채팅(어두운 하늘)은 밝은 글씨 그대로 */
#screen-game > .chat .chat-log { color: #2a2f36; font-weight: 800; }
#screen-game > .chat .chat-log .good { color: #138a3c; }
#screen-game > .chat .chat-log .bad { color: #c62828; }
#screen-game > .chat .chat-log :is(.info, .skill, .status, .down) { color: #1f6fb5; }
#screen-game > .chat .chat-log .crit { color: #c4620a; }
#screen-game > .chat .chat-log .chief { color: #9a6a00; }
#screen-game > .chat .chat-log .miss { color: #59626b; }
#screen-game > .chat .chat-log .turn { color: #8a6d00; }
#screen-game > .chat .chat-log p[style*="#ffffff"] { color: #2a2f36 !important; }   /* 하양으로 고른 글씨도 지도에서는 진하게 */
#screen-game > .chat .chat-log p[style*="#6dff6d"] { color: #138a3c !important; }

/* 채팅 색 고르기: 동그라미 색 = 지도 채팅에 실제로 보이는 색 (하양 → 진한 검정, 초록 → 진한 초록). 전투 채팅은 고른 색 그대로 (2026-11-07 대표) */
#screen-game > .chat :is([data-chat-color="white"], #chat-color[data-c="white"]) { --c: #2a2f36 !important; }
#screen-game > .chat :is([data-chat-color="green"], #chat-color[data-c="green"]) { --c: #138a3c !important; }
/* 우르드 앞마당 전투 배경: 그림 한 장 (지평선 위에서 37%, config urdFront.horizon). 눈 내림·바닥 격자 없음 (2026-11-07) */
#battle .b-field.stage[data-area="urdFront"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground { background: #9cbf7c url("img/urd/bg_front.webp") center / cover no-repeat; }
#battle .b-field.stage[data-area="front"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground { background: #cfdbe6 url("img/nif/bg_front.webp") center / cover no-repeat; }   /* 니플헤임 앞마당 전투 배경 (2026-11-10 나노바나나) */
#battle .b-field.stage[data-area="urdFront"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::before,
#battle .b-field.stage[data-area="urdFront"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::after { display: none; }

/* 탑승으로 깎이는 능력치는 빨간 숫자 (2026-11-07) */
.pstat em.ride.down, .ride-ups b.down { color: #c0392b; }
/* 캐릭터 만들기: 첫 동료 고르기 (9개 마을 스타팅). 왼쪽 3×3 칸, 오른쪽 고른 펫. 휴대폰 가로에서도 스크롤 없이 (2026-11-07) */
.create .meet img.tree { width: auto; max-width: 70%; max-height: 240px; animation: none; }
.st-pick { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.st-grid9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-grid9 button { min-height: 0; height: 84px; padding: 2px 2px 4px; border-radius: 12px; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 0; }
.st-grid9 button img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.st-grid9 button b { font-size: .78rem; line-height: 1.1; }
.st-grid9 button.on { border-color: #3a7cb8; box-shadow: 0 0 0 2px #3a7cb8; background: #eaf3fb; }
.st-show { display: grid; justify-items: center; gap: 4px; text-align: center; }
.st-show img { width: min(220px, 90%); height: 150px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(30,60,90,.2)); animation: hop 2.4s ease-in-out infinite; }
.st-show .st-nm { font-size: 1.2rem; }
.st-show .st-from { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.st-show .say { margin: 0; font-size: .85rem; }
@media (max-width: 560px) { .st-pick { grid-template-columns: 1fr; } .st-show img { height: 110px; } }
@media (max-height: 500px) {
  .st-grid9 button { height: 62px; }
  .st-grid9 button b { font-size: .68rem; }
  .st-show img { height: 96px; }
  .st-show .st-nm { font-size: 1rem; }
  .st-show .say { font-size: .76rem; }
  .create .meet img.tree { max-height: 150px; }
}

/* 첫 동료 고르기: 세계수 9세계 받침 위에 스타팅 펫 (2026-11-07 대표 그림). 고르지 않은 아이는 졸고, 고른 아이는 깨어나 받침이 속성 색으로 빛남 */
.create.st-wide { width: min(880px, 100%); }
.st-pick { grid-template-columns: auto minmax(0, 1fr); }
.st-tree { position: relative; width: min(500px, calc(100dvh - 230px), 58vw); aspect-ratio: 1; border-radius: 16px; overflow: hidden; justify-self: center; box-shadow: 0 6px 18px rgba(30,60,90,.18); }
.st-tree .bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-tree .st-slot { position: absolute; z-index: 1; width: 23%; height: 18%; transform: translate(-50%, -100%); padding: 0; margin: 0; border: 0; background: none; box-shadow: none; min-height: 0; border-radius: 0; cursor: pointer; }
.st-tree .st-slot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: saturate(.5) brightness(.9) drop-shadow(0 3px 3px rgba(0,0,0,.25)); transform-origin: 50% 100%; animation: st-doze 3.2s ease-in-out infinite; }
.st-tree .st-slot b { position: absolute; z-index: 2; left: 50%; top: 116%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(.6rem, 1.7vw, .8rem); line-height: 1; padding: 3px 7px; border-radius: 99px; background: rgba(255,255,255,.82); color: #23323e; }
.st-tree .st-slot::after { content: "z"; position: absolute; z-index: 2; right: 14%; top: 4%; font: 700 clamp(.6rem, 1.6vw, .85rem)/1 sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); animation: st-zz 2.4s ease-in-out infinite; }
.st-tree .st-slot .glow { position: absolute; left: 50%; bottom: -16%; width: 120%; height: 38%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, var(--el) 0%, color-mix(in srgb, var(--el) 40%, transparent) 45%, transparent 72%); opacity: 0; }
.st-tree .st-slot.on img { filter: drop-shadow(0 0 8px var(--el)) drop-shadow(0 4px 4px rgba(0,0,0,.25)); animation: hop 1.6s ease-in-out infinite; }
.st-tree .st-slot.on::after { display: none; }
.st-tree .st-slot[style*="top:2"] { z-index: 3; } .st-tree .st-slot[style*="top:4"] { z-index: 2; }
.st-tree .st-slot.on .glow { opacity: 1; animation: st-glow 1.6s ease-in-out infinite; }
.st-tree .st-slot.on b { background: var(--el); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
@keyframes st-doze { 0%, 100% { transform: rotate(-2deg) scaleY(1); } 50% { transform: rotate(2deg) scaleY(.96); } }
@keyframes st-zz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -12px); } }
@keyframes st-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.st-talk { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; text-align: left; font-size: .82rem; background: #f3f7fb; border-radius: 12px; padding: 6px 10px 6px 6px; }
.st-talk img { animation: none; filter: none; width: 44px; height: 44px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; background: #dfe9f3; flex: none; }
.st-talk b { display: block; font-size: .76rem; color: #3a7cb8; }
.st-show img.st-big { width: min(220px, 90%); height: 150px; }
@media (max-width: 560px) { .st-pick { grid-template-columns: 1fr; } .st-tree { width: min(100%, calc(100dvh - 330px)); } .st-show img.st-big { display: none; } }
@media (max-height: 500px) {
  .st-tree { width: min(500px, calc(100dvh - 150px), 52vw); }
  .st-show img.st-big { height: 80px; }
  .st-talk { font-size: .72rem; padding: 4px 8px 4px 4px; } .st-talk img { width: 34px; height: 34px; }
}
/* 전투 채팅도 지도 채팅과 똑같이: 진한 글씨 + 줄마다 옅은 흰 바탕 (밝은 우르드 전투 배경에서 안 보였음, 2026-11-07 대표) */
#battle .b-chat .chat-log { color: #2a2f36; opacity: .85; }
#battle .b-chat .chat-log .good { color: #138a3c; }
#battle .b-chat .chat-log .bad { color: #c62828; }
#battle .b-chat .chat-log :is(.info, .skill, .status, .down) { color: #1f6fb5; }
#battle .b-chat .chat-log .crit { color: #c4620a; }
#battle .b-chat .chat-log .chief { color: #9a6a00; }
#battle .b-chat .chat-log .miss { color: #59626b; }
#battle .b-chat .chat-log .turn { color: #8a6d00; }
#battle .b-chat .chat-log p[style*="#ffffff"] { color: #2a2f36 !important; }
#battle .b-chat .chat-log p[style*="#6dff6d"] { color: #138a3c !important; }
/* 채팅 (지도·전투): 바탕 칸 없이 스톤에이지처럼 글씨만. 진한 글씨에 얇은 흰 테두리로 풀밭·하늘 어디서나 읽히게 (2026-11-07 대표) */
#screen-game > .chat .chat-log p, #screen-game > .chat .chat-log p *, #battle .b-chat .chat-log p, #battle .b-chat .chat-log p * {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 3px rgba(255, 255, 255, .9) !important; }
/* 채팅 스크롤 막대 숨김 (스톤에이지처럼 글만, 휠·손가락으로 올려 보기는 그대로) (2026-11-07 대표) */
.chat-log { scrollbar-width: none; }
.chat-log::-webkit-scrollbar { display: none; }
/* 승리·보상 같은 좋은 소식: 첫 마을 우르드가 풀밭이라 초록 대신 진한 주황 (지도·전투 채팅, 2026-11-07 대표) */
#screen-game > .chat .chat-log .good, #battle .b-chat .chat-log .good { color: #c25400; }

/* 아래 띠 캐릭터 이름(아이디): 아주 약간 크고 두껍게 (2026-11-07 대표) */
.hud-band .band-who b { font-size: 1.12em; font-weight: 900; }

/* 공격하고 돌아올 때 펫이 돌아서서 걸어온다 (움직이는 펫, 2026-11-07) */
.stage .unit.turn .art img[data-anim] { transform: scaleX(-1); }
.stage .unit.mine.turn .art img[data-anim] { transform: none; }

/* 첫 동료 고르기: 휴대폰 가로(주소창 때문에 높이가 낮음)에서도 세계수를 크게, 스크롤 없이 (2026-11-08 대표 "모바일 너무 작게 보인다").
   버튼·안내는 오른쪽 칸 아래로 옮겼고, 세계수는 화면 높이를 거의 다 쓴다 */
.st-show .st-note { margin: 2px 0 0; text-align: center; }
.st-show .st-btns { width: 100%; margin-top: 4px; }
.st-talk span { color: #23323e; }
.st-tree { width: min(520px, calc(100dvh - 150px), 56vw); }
@media (max-height: 500px) {
  .create.st-wide { padding: 8px 12px; gap: 6px; width: min(980px, 100%); max-height: 100dvh; }
  .create.st-wide .steps { display: none; }
  .create.st-wide h2 { font-size: .95rem; }
  .st-pick { gap: 12px; align-items: stretch; }
  .st-tree { width: min(520px, calc(100dvh - 52px), 58vw); }
  .st-show { align-content: center; gap: 3px; }
  .st-show img.st-big { height: min(90px, 22dvh); }
  .st-talk { font-size: .72rem; padding: 4px 8px 4px 4px; margin: 0; } .st-talk img { width: 30px; height: 30px; }
  .st-show .st-nm { font-size: 1rem; } .st-show .say { font-size: .74rem; } .st-show .st-note { font-size: .64rem; }
  .st-show .st-btns button { min-height: 34px; padding: 4px 14px; }
}
@media (max-height: 340px) {
  .create.st-wide h2 { display: none; }
  .st-tree { width: min(520px, calc(100dvh - 20px), 58vw); }
  .st-show img.st-big, .st-show .st-note { display: none; }
  .st-talk span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 성장 등급 글자: Cinzel 굵게 (로마 비석 글자, 데미지 숫자와 같은 글꼴, 2026-11-08 대표) */
.gpill, .gpill[class*="g-"] { font-family: "Cinzel", "Pretendard", serif; font-weight: 700; letter-spacing: .01em; }
/* 회복 숫자: 밝은 연두 + 짙은 초록 테두리 (2026-11-08 대표) */
#battle.s33 .stage .unit .pop.heal:not(.crit-word):not(.miss) { background: linear-gradient(#c4ff8a, #6ee03f 55%, #45b52a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #0d3b0f) drop-shadow(0 0 1px #0d3b0f) drop-shadow(0 0 1px #0d3b0f) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); font-weight: 700; }
.battle .stage .unit .pop.heal { color: #7ce24e; }
/* 성장 등급 색: 노랑(C) → 초록(B) → 파랑(A) → 보라(S) → 무지개(SEVEN 그대로) (2026-11-08 대표) */
.gpill.g-C, .gpill.g-Cp { color: #d4a106; }
.gpill.g-S, .gpill.g-Sp { color: #7b3fc4; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

/* 아이템 창 (I 키, 2026-11-08): 위 장착 칸 한 줄, 아래 가방 칸(돌 바닥 타일 느낌), 맨 아래 설명 줄 */
@media (min-width: 600px) { .panel-wrap.dock:has(.panel.itemview) { grid-template-columns: min(640px, 100%); } }
.panel.itemview .iv { display: grid; grid-template-rows: auto auto auto auto auto auto; gap: 6px; align-content: start; }
.iv-sec { display: flex; align-items: center; gap: 8px; font-size: .9rem; padding: 0 2px; }
.iv-sec .silver { display: inline-flex; align-items: center; gap: 4px; color: #7d5d1f; }
.iv-sec .silver .ico { width: 16px; height: 16px; }
.gset2 { font-size: .8rem; color: #8a7556; } .gset2 b { color: #7d5d1f; }
.eq-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bag-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 12px;
  background: #6f6253; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); }
.panel.stone .eq-cell, .bag-cell { position: relative; aspect-ratio: 1; min-height: 0; padding: 0; display: grid; place-items: center; align-content: center; gap: 2px; }
.panel.stone .eq-cell { border-radius: 12px; background: linear-gradient(#efe6d4, #ddd0b6); border: 1px solid #c2ad86;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(120, 95, 55, .25); color: #8a7556; }
.panel.stone .eq-cell.has { background: linear-gradient(#fbf3de, #ecdcb4); border-color: #c9a85e; color: #7d5d1f; }
.eq-cell .ico { width: 42%; height: 42%; }
.eq-cell small { font-size: .66rem; font-weight: 800; }
.bag-cell { border-radius: 6px; background: linear-gradient(135deg, #a89a86, #8d7f6c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.panel.stone .bag-cell.has { cursor: pointer; border: 0; color: #fff6e2; background: linear-gradient(135deg, #b8a98f, #998a74); }
.panel.stone .bag-cell.on, .panel.stone .eq-cell.on { box-shadow: 0 0 0 2px #7ce24e, inset 0 0 0 1px rgba(0, 0, 0, .3); }
.bag-cell .ico { width: 55%; height: 55%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.bag-cell b { position: absolute; right: 4px; bottom: 2px; font-size: .72rem; color: #fff; text-shadow: 0 1px 2px #000; }
.iv-info { display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; background: #3b3128; color: #f1e7d2; font-size: .8rem; min-height: 2.6em; align-content: center; }
.iv-info b { color: #ffd979; } .iv-info .muted { color: #b9ab93; }
.panel.itemview .pet-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.panel.itemview .pet-act .tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
@media (max-height: 500px) {
  .panel.itemview .iv { gap: 4px; }
  .iv-sec { font-size: .78rem; }
  .eq-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .panel.stone .eq-cell { aspect-ratio: auto; height: clamp(34px, 11vh, 52px); grid-auto-flow: column; gap: 6px; }
  .eq-cell .ico { width: 20px; height: 20px; }
  .bag-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 4px; gap: 3px; }
  .bag-cell { aspect-ratio: auto; height: clamp(26px, 9vh, 40px); }
  .bag-cell .ico { width: auto; height: 60%; }
  .iv-info { padding: 4px 8px; font-size: .72rem; min-height: 2.2em; }
  .panel.itemview .pet-act .tool { min-height: 34px; flex-direction: row; gap: 6px; }
}
/* 아이템 창: 가방 칸이 남는 높이를 채움(아래 빈 곳 없게), 휴대폰 장착 칸은 아이콘·글자를 가운데로 모음 */
.panel.itemview .iv { height: 100%; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
.panel.itemview .bag-grid { min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.panel.itemview .bag-cell { aspect-ratio: auto; height: auto; min-height: 0; }
@media (max-height: 500px) {
  .panel.itemview .bag-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .panel.stone.itemview .eq-cell { justify-content: center; }
}

/* 감정 표현 창 (2026-11-08) */
.emote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.emote-grid button { min-height: 40px; }

/* 아이템 창 시안 3 (2026-11-08 대표): 왼쪽 = 장착 칸(왼쪽 줄 악세사리·무기·반지, 오른쪽 줄 머리·갑옷·신발), 오른쪽 = 가방 */
.panel.itemview .iv { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; column-gap: 12px; }
.panel.itemview .iv-eq, .panel.itemview .iv-bagside { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-height: 0; }
.panel.itemview .iv-info, .panel.itemview .pet-act { grid-column: 1 / -1; }
.panel.itemview .eq-grid { grid-template-columns: repeat(2, var(--eq, 74px)); grid-template-rows: repeat(3, var(--eq, 74px)); grid-auto-flow: column; gap: 8px; align-content: center;
  grid-template-areas: "acc head" "weapon body" "ring shoes"; }
.panel.itemview .eq-cell[data-eq="acc"] { grid-area: acc; } .panel.itemview .eq-cell[data-eq="weapon"] { grid-area: weapon; } .panel.itemview .eq-cell[data-eq="ring"] { grid-area: ring; }
.panel.itemview .eq-cell[data-eq="head"] { grid-area: head; } .panel.itemview .eq-cell[data-eq="body"] { grid-area: body; } .panel.itemview .eq-cell[data-eq="shoes"] { grid-area: shoes; }
.panel.stone.itemview .eq-cell { aspect-ratio: 1; height: auto; grid-auto-flow: row; gap: 2px; }
.panel.itemview .bag-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
@media (min-width: 600px) { .panel-wrap.dock:has(.panel.itemview) { grid-template-columns: min(720px, 100%); } }
@media (max-height: 500px) {
  .panel.itemview .eq-grid { --eq: clamp(40px, 15vh, 62px); gap: 5px; }
  .panel.stone.itemview .eq-cell small { font-size: .58rem; }
  .panel.itemview .bag-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 400px) { .panel.stone.itemview .eq-cell small { display: none; } }
.panel.itemview .eq-grid { --eq: clamp(64px, 15vh, 112px); }
.panel.stone.itemview .eq-cell .ico { width: calc(var(--eq) * .36); height: calc(var(--eq) * .36); }
.panel.stone.itemview .eq-cell small { font-size: clamp(.58rem, 1.6vh, .8rem); }
@media (max-height: 500px) { .panel.itemview .eq-grid { --eq: clamp(40px, 15vh, 62px); } }
.panel.stone.itemview .bag-cell .ico { width: auto; height: 46%; aspect-ratio: 1; }
/* SEVEN 무지개 글자: 글자색을 바탕 그림으로 칠해서, 글자 칸 밖으로 나온 N 오른쪽 줄·S 왼쪽이 잘려 보이던 것 (2026-11-08 대표)
   → 양옆에 여유를 주고 같은 만큼 바깥 여백을 빼서 자리는 그대로 */
.gpill.g-SEVEN { padding-left: .18em !important; padding-right: .18em !important; margin-left: -.18em; margin-right: -.18em; }
/* 아이템 창 (2026-11-08 대표): 가방 칸은 정사각형으로 작게, 가방 너비는 전보다 약 2/3 */
.panel.itemview .iv-bagside { grid-template-rows: auto auto; align-content: start; justify-content: start; }
.panel.itemview .bag-grid { grid-template-columns: repeat(6, var(--bc, 50px)); grid-template-rows: none; grid-auto-rows: var(--bc, 50px); justify-content: start; align-content: start; width: max-content; }
.panel.itemview .bag-cell { aspect-ratio: 1; height: auto; }
.panel.itemview .iv { grid-template-columns: auto auto; justify-content: center; }
@media (min-width: 600px) { .panel-wrap.dock:has(.panel.itemview) { grid-template-columns: min(600px, 100%); } }
.panel.itemview .bag-grid { --bc: clamp(40px, 6.6vh, 54px); }
@media (max-height: 500px) {
  .panel.itemview .bag-grid { grid-template-columns: repeat(8, var(--bc)); --bc: clamp(26px, 10vh, 40px); }
  .panel-wrap.dock:has(.panel.itemview) { grid-template-columns: min(560px, 100%) !important; }
}
/* 아이템 창: 창 크기를 내용에 맞춤 (빈 곳 없게), 화면 가운데 */
.panel-wrap.dock:has(.panel.itemview) { grid-template-columns: max-content !important; grid-template-rows: max-content !important; place-content: center; }
.panel-wrap.dock .panel.itemview { height: auto; max-height: 100%; }
.panel.itemview .iv { height: auto; grid-template-rows: auto auto auto; align-items: start; }
.panel.itemview .iv-info { max-width: 100%; }
/* 아이템 창: 장착 칸 높이 = 가방 높이 (가방 6×4, 정사각형). 장착 칸 크기는 가방 칸에서 계산 */
.panel.itemview .bag-grid { grid-template-columns: repeat(6, var(--bc)) !important; }
.panel.itemview .eq-grid { --eq: calc(var(--bc-eq, 54px) * 1.38); }
.panel.itemview { --bc-eq: clamp(40px, 6.6vh, 54px); }
.panel.itemview .bag-grid { --bc: var(--bc-eq); }
@media (max-height: 500px) { .panel.itemview { --bc-eq: clamp(28px, 9.5vh, 46px); } .panel.itemview .eq-grid { --eq: calc(var(--bc-eq) * 1.38); } .panel.itemview .bag-grid { --bc: var(--bc-eq); } }
@media (max-height: 400px) { .panel.stone.itemview .eq-cell small { display: none; } }

/* 캐릭터 창 장비 탭: 가방 (아이템 창과 같은 정사각형 칸 6×4) */
.cv-bag { display: grid; gap: 6px; align-content: start; }
.cv-bag .bag-grid { display: grid; grid-template-columns: repeat(6, var(--bc)); grid-auto-rows: var(--bc); gap: 4px; padding: 6px; width: max-content; --bc: clamp(30px, 6.4vh, 50px); }
.cv-bag .bag-cell { aspect-ratio: 1; }
.panel.stone .cv-bag .bag-cell .ico { width: auto; height: 46%; aspect-ratio: 1; }
@media (max-height: 500px) { .cv-bag .bag-grid { --bc: clamp(24px, 8.4vh, 40px); gap: 3px; padding: 4px; } .cv-bag .iv-info { padding: 4px 8px; font-size: .72rem; } }

/* ── 33원정대 분위기 창 (2026-11-08 대표, 진형 창부터) ─────────────────────────
   어두운 판 + 깨진 돌 같은 밝은 테두리 + 안쪽 가는 선 + 옅은 마름모 무늬. 칸은 먹 번짐, 고른 칸은 금색 붓 원 */
.panel.stone.p33 { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20470%20444%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27r%27%20x%3D%27-5%25%27%20y%3D%27-5%25%27%20width%3D%27110%25%27%20height%3D%27110%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20seed%3D%277%27/%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%274%27/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%27M14%202%20H456%20L468%2014%20V430%20L456%20442%20H14%20L2%20430%20V14%20Z%27%20fill%3D%27rgba%2820%2C18%2C17%2C.97%29%27%20stroke%3D%27%23efe6d2%27%20stroke-width%3D%273%27%20filter%3D%27url%28%23r%29%27/%3E%3Cpath%20d%3D%27M20%2010%20H450%20L460%2020%20V424%20L450%20434%20H20%20L10%20424%20V20%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23d9c9a3%27%20stroke-width%3D%271%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
  color: #efe6d2; padding: 24px 30px 22px; position: relative; isolation: isolate; }
.panel.stone.p33::before { content: ""; position: absolute; inset: 16px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2012%20L12%200%20L24%2012%20L12%2024%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23efe6d2%27%20stroke-width%3D%27.6%27/%3E%3C/svg%3E") 0 0 / 24px 24px; opacity: .05; z-index: -1; pointer-events: none; }
.panel.stone.p33 h3 { margin: 0; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 900; font-size: 1.9rem; font-style: italic; transform: skewX(-6deg);
  color: #efe6d2; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); letter-spacing: -.01em; }
.panel.stone.p33 b { text-shadow: none; }
.p33 .t33 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.p33 .ul33 { height: 7px; width: 42%; margin: -6px 0 0 -2px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M2%207%20C40%202%2090%204%20140%203%20C170%202%20190%204%20198%206%20L196%209%20C150%2011%2090%2010%2040%2011%20C20%2011%208%2010%202%207%20Z%27%20fill%3D%27%23c9913f%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.p33 .fm-foe { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #cdbf9f; }
.p33 .fm-foe i { display: block; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, #d9c9a3); }
.p33 .fm-row { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; }
.p33 .fm-lab { writing-mode: vertical-rl; letter-spacing: .3em; font-size: .85rem; color: #cdbf9f; justify-self: center; }
.panel.stone.p33 .fm-grid { gap: 4px; }
.panel.stone.p33 .fm-slot { position: relative; aspect-ratio: auto; height: 108px; padding: 0 0 22px; border: 0; background: none; box-shadow: none; display: grid; place-items: end center; color: #efe6d2; }
.panel.stone.p33 .fm-slot::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 14px; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(239, 230, 210, .16), rgba(239, 230, 210, .05) 55%, transparent 72%); }
.panel.stone.p33 .fm-slot:not(.has)::after { content: ""; position: absolute; left: 50%; bottom: 27px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: rgba(239, 230, 210, .35); }
.panel.stone.p33 .fm-slot.pick::before { background: radial-gradient(ellipse at center, rgba(201, 145, 63, .35), rgba(201, 145, 63, .12) 55%, transparent 72%); }
.panel.stone.p33 .fm-slot.pick::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 8px; height: 36px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M20%2032%20C25%2012%2090%206%20130%209%20C175%2012%20195%2024%20188%2036%20C180%2052%20110%2056%2070%2052%20C35%2049%2012%2044%2016%2030%27%20fill%3D%27none%27%20stroke%3D%27%23c9913f%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.panel.stone.p33 .fm-slot:hover:not(:disabled) { border: 0; }
.panel.stone.p33 .fm-slot img, .panel.stone.p33 .fm-slot canvas { position: relative; z-index: 1; width: auto; height: auto; max-width: 92%; max-height: 78px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
.panel.stone.p33 .fm-slot span { position: absolute; bottom: -2px; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 800; font-size: .86rem; color: #efe6d2; white-space: nowrap; }
.p33 .foot33 { align-items: center; gap: 10px; }
.panel.stone.p33 button.g33 { background: none; border: 0; box-shadow: none; color: #cdbf9f; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 800; padding: 8px 10px; min-height: 0; }
.panel.stone.p33 button.b33 { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4%209%20C20%203%2050%206%2080%204%20C120%201%20160%205%20192%207%20L198%2013%20L193%2018%20L199%2024%20L192%2032%20C150%2036%20110%2034%2070%2037%20C45%2039%2020%2035%206%2033%20L2%2026%20L7%2021%20L1%2015%20Z%27%20fill%3D%27%23efe6d2%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; border: 0; box-shadow: none; color: #231a13; text-shadow: none;
  font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 900; font-size: 1.05rem; padding: 10px 30px; transform: rotate(-2deg); }
.panel.stone.p33 button.b33:hover { transform: rotate(-2deg) translateY(-1px); filter: brightness(1.05); }
@media (max-height: 500px) {
  .panel.stone.p33 { padding: 14px 22px 12px; gap: 6px; }
  .panel.stone.p33 h3 { font-size: 1.35rem; }
  .panel.stone.p33 .fm-slot { height: min(92px, 22dvh); padding-bottom: 18px; }
  .panel.stone.p33 .fm-slot img, .panel.stone.p33 .fm-slot canvas { max-height: min(66px, 15dvh); }
}
/* 진형 창 다듬기 (대표 2026-11-08): 발 높이를 칸마다 똑같이, 금색 원이 이름을 가리지 않게, 이름은 더 크고 또렷하게 */
.panel.stone.p33 .fm-slot { height: 116px; padding-bottom: 30px; }
.panel.stone.p33 .fm-slot::before { bottom: 22px; height: 24px; }
.panel.stone.p33 .fm-slot:not(.has)::after { bottom: 32px; }
.panel.stone.p33 .fm-slot.pick::after { bottom: 18px; height: 32px; left: 8%; right: 8%; }
.panel.stone.p33 .fm-slot img, .panel.stone.p33 .fm-slot canvas { z-index: 2; }
.panel.stone.p33 .fm-slot span { z-index: 3; bottom: 0; font-size: 1rem; font-weight: 900; color: #fff6e2; letter-spacing: .02em;
  text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .8); }
@media (max-height: 500px) {
  .panel.stone.p33 .fm-slot { height: min(100px, 24dvh); padding-bottom: 24px; }
  .panel.stone.p33 .fm-slot::before { bottom: 17px; height: 20px; }
  .panel.stone.p33 .fm-slot:not(.has)::after { bottom: 25px; }
  .panel.stone.p33 .fm-slot.pick::after { bottom: 14px; height: 26px; }
  .panel.stone.p33 .fm-slot span { font-size: .88rem; }
}

/* ══ 33원정대 분위기 (2026-11-08 대표) ═══════════════════════════════════════
   모든 창: 나노바나나로 그린 먹 판(game/img/ui/), 상아색 글씨, 금색은 가는 선만.
   창을 열면 주위를 어둡게. 버튼은 양 끝이 뾰족한 먹 판, 주요 버튼은 상아색 붓 자국 */
.panel-wrap { background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(8, 7, 6, .55), rgba(4, 3, 3, .86)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.panel-wrap.dock { background: linear-gradient(90deg, rgba(4, 3, 3, .72), rgba(4, 3, 3, .35) 60%, rgba(4, 3, 3, .2)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel.stone.p33 {
  --card: #141211; --ink: #efe6d2; --ink-soft: #b9ab8f; --line: rgba(239, 230, 210, .18); --soft: rgba(255, 255, 255, .04);
  --accent: #c9a256; --accent-ink: #1c1712; --gold: #c9a256;
  color: var(--ink); border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  background: url(img/ui/panel_wide.webp) center / 100% 100% no-repeat; padding: 30px 44px 28px; isolation: isolate;
}
.panel.stone.p33[data-ar="tall"] { background-image: url(img/ui/panel_tall.webp); padding: 34px 34px 30px; }
.panel.stone.p33[data-ar="sq"] { background-image: url(img/ui/panel_sq.webp); padding: 34px 40px 30px; }
.panel.stone.p33::before { content: none; }
.panel.stone.p33 h3 { margin: 0 0 2px; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 700; font-size: 1.55rem; letter-spacing: .02em;
  color: #efe6d2; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); font-style: normal; transform: none; }
.panel.stone.p33 h3::after { content: ""; display: block; height: 1px; width: min(260px, 70%); margin-top: 6px; background: linear-gradient(90deg, #d9c9a3, rgba(217, 201, 163, .2)); }
.panel.stone.p33 b { text-shadow: none; }
.panel.stone.p33 .muted, .panel.stone.p33 .tiny { color: var(--ink-soft); }
/* 칸·글 상자: 옅은 먹 */
.panel.stone.p33 .stats4 div, .panel.stone.p33 .say, .panel.stone.p33 .el, .panel.stone.p33 .shop-item, .panel.stone.p33 .altar-box,
.panel.stone.p33 .pet-row, .panel.stone.p33 .pstat, .panel.stone.p33 .skills div, .panel.stone.p33 .choice {
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(239, 230, 210, .14); box-shadow: none; color: var(--ink); }
.panel.stone.p33 .pet-row.on { border-color: rgba(201, 162, 86, .7); background: rgba(201, 162, 86, .1); }
/* 버튼: 먹 판 (양 끝 뾰족) */
.panel.stone.p33 button { background: url(img/ui/plate.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; color: #efe6d2;
  box-shadow: none; text-shadow: 0 1px 2px #000; font-weight: 700; }
.panel.stone.p33 button:hover:not(:disabled) { filter: brightness(1.25); }
.panel.stone.p33 button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.panel.stone.p33 button:disabled { opacity: .45; }
.panel.stone.p33 button.on, .panel.stone.p33 .opts button.on, .panel.stone.p33 .tool.on, .panel.stone.p33 .ptab.on {
  background-image: url(img/ui/plate_sel.webp); color: #fff6e2; }
.panel.stone.p33 button.primary { background: url(img/ui/brush_ivory.webp) center / 100% 100% no-repeat; color: #1c1712; text-shadow: none; font-weight: 900; }
.panel.stone.p33 button.warn { filter: sepia(.6) hue-rotate(-40deg) saturate(2.2); color: #ffe2d6; }
.panel.stone.p33 .chip { background: rgba(201, 162, 86, .16); color: #e9cf8f; }
.panel.stone.p33 input[type=text] { background: rgba(0, 0, 0, .5); border: 1px solid rgba(239, 230, 210, .3); color: #efe6d2; box-shadow: none; }
/* 펫·장비 칸 */
.panel.stone.p33 .pd-slot { background: url(img/ui/slot.webp) center / 100% 100% no-repeat; border: 0; box-shadow: none; color: var(--ink); }
.panel.stone.p33 .pd-slot.on { box-shadow: 0 0 0 2px #c9a256, 0 0 12px rgba(201, 162, 86, .45); }
.panel.stone.p33 .pd-slot.empty { opacity: .55; }
.panel.stone.p33 .pd-slot i { color: #e9cf8f; }
.panel.stone.p33 .pd-line { border-color: rgba(239, 230, 210, .2); background: rgba(239, 230, 210, .2); }
.panel.stone.p33 .bar { background: rgba(239, 230, 210, .12); }
.panel.stone.p33 .bar i { background: #c9a256; }
.panel.stone.p33 .silver { color: #e9cf8f; }
.panel.stone.p33 .grade { color: #e9cf8f; }
.panel.stone.p33 details.test summary { color: var(--ink-soft); }
/* 진형 창: 따로 그리던 판 대신 공통 먹 판 */
.panel.stone.p33.fm33 h3 { font-size: 1.9rem; }
.panel.stone.p33.fm33 h3::after { display: none; }
/* 33 테마: 두께감 있던 상아색 창(펫·캐릭터·아이템)·보관소 안쪽 판도 먹색으로 */
.panel.stone.p33, .panel.stone.p33.thick { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.panel.stone.p33.thick { background: url(img/ui/panel_wide.webp) center / 100% 100% no-repeat !important; padding: 26px 40px 24px; }
.panel.stone.p33.thick[data-ar="tall"] { background-image: url(img/ui/panel_tall.webp) !important; }
.panel.stone.p33.thick[data-ar="sq"] { background-image: url(img/ui/panel_sq.webp) !important; }
.panel.stone.p33.thick > .pd, .panel.stone.p33.thick > .cv, .panel.stone.p33 .st-box {
  background: rgba(0, 0, 0, .28) !important; box-shadow: inset 0 0 0 1px rgba(239, 230, 210, .12) !important; border-radius: 4px !important; }
.panel.stone.p33 .pet-hero, .panel-wrap .panel.stone.p33.thick .pet-hero {
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(239, 230, 210, .10), rgba(239, 230, 210, 0) 70%) !important; box-shadow: none !important; }
.panel.stone.p33 .ptabs button, .panel.stone.p33 .ptabs button[aria-selected="true"] { text-shadow: 0 1px 2px #000; }
.panel.stone.p33 .ptabs button[aria-selected="true"] { background-image: url(img/ui/plate_sel.webp) !important; color: #fff6e2 !important; box-shadow: none !important; border: 0 !important; }
.panel.stone.p33 .ptabs button:not([aria-selected="true"]) { color: #cdbf9f !important; }
/* 능력치 줄·장비 칸·가방 칸·보관소 단추 */
.panel.stone.p33 .pstat { background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(239, 230, 210, .12) !important; box-shadow: none !important; }
.panel.stone.p33 .pstat span, .panel.stone.p33 .pstat b, .panel.stone.p33 .ph-name, .panel.stone.p33 .ph-name b { color: #efe6d2 !important; text-shadow: none !important; }
.panel.stone.p33 .eq-cell { background: url(img/ui/tile.webp) center / 100% 100% no-repeat !important; border: 0 !important; color: #cdbf9f !important; box-shadow: none !important; }
.panel.stone.p33 .eq-cell.has { color: #e9cf8f !important; box-shadow: 0 0 0 1px rgba(201, 162, 86, .6) !important; }
.panel.stone.p33 .bag-cell { background: rgba(0, 0, 0, .45) !important; box-shadow: inset 0 0 0 1px rgba(239, 230, 210, .12) !important; border-radius: 2px !important; }
.panel.stone.p33 .bag-cell.has { background: rgba(201, 162, 86, .14) !important; color: #fff6e2 !important; }
.panel.stone.p33 .st-chip, .panel.stone.p33 .st-dd { background: rgba(0, 0, 0, .55) !important; border: 1px solid rgba(239, 230, 210, .2) !important; color: #efe6d2 !important; }
.panel.stone.p33 .st-h small { color: #b9ab8f; }
.panel.stone.p33 .st-c, .panel.stone.p33 .st-k { background: rgba(0, 0, 0, .4) !important; border-color: rgba(239, 230, 210, .12) !important; box-shadow: none !important; }
/* 경험치·HP 줄 바탕 */
.panel.stone.p33 .meter, .panel.stone.p33 .meter > i:first-child { background-color: rgba(239, 230, 210, .1); }
/* 글자색: 밝은 판에 맞춰 짙게 칠해 둔 글자를 상아색으로 */
.panel.stone.p33 :is(p, span, small, label, li, dt, dd, td, th, div) { border-color: rgba(239, 230, 210, .14); }
.panel.stone.p33 :is(.skc, .skc-txt, .say, .pet-row, .shop-item, .altar-box, .cv-left, .cv-right, .st-left, .st-pv) { color: #efe6d2; }
/* 33 테마 2: 먹 판이 창 끝까지 닿게(안쪽은 진한 먹으로 채우고 붓 끝은 여백에), 캐릭터 그림 칸, 고른 버튼은 자줏빛 먹 */
.panel.stone.p33, .panel.stone.p33.thick {
  background: url(img/ui/panel_wide.webp) center / 100% 100% no-repeat, rgba(13, 11, 10, .94) content-box !important; }
.panel.stone.p33[data-ar="tall"], .panel.stone.p33.thick[data-ar="tall"] {
  background: url(img/ui/panel_tall.webp) center / 100% 100% no-repeat, rgba(13, 11, 10, .94) content-box !important; }
.panel.stone.p33[data-ar="sq"], .panel.stone.p33.thick[data-ar="sq"] {
  background: url(img/ui/panel_sq.webp) center / 100% 100% no-repeat, rgba(13, 11, 10, .94) content-box !important; }
.panel.stone.p33 .char-doll { background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(239, 230, 210, .10), rgba(239, 230, 210, 0) 72%), rgba(0, 0, 0, .3) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 230, 210, .12) !important; border: 0 !important; }
.panel.stone.p33 button.on, .panel.stone.p33 .opts button.on, .panel.stone.p33 .tool.on, .panel.stone.p33 .ptab.on, .panel.stone.p33 .ptabs button[aria-selected="true"] {
  background: linear-gradient(rgba(122, 52, 96, .62), rgba(96, 38, 76, .62)) center / 84% 58% no-repeat, url(img/ui/plate.webp) center / 100% 100% no-repeat !important; }
.panel.stone.p33 button.primary { min-height: 42px; padding-left: 26px; padding-right: 26px; font-size: 1rem; }
/* 33 테마 3: 위쪽 버튼·아래 띠·알림·장소 이름도 먹 판 (2026-11-08) */
.stone-ico, .stone-pill, .hud .stone-pill, .toast, .map-name {
  background: url(img/ui/tile.webp) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; color: #efe6d2 !important; text-shadow: 0 1px 2px #000 !important; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.stone-pill, .hud .stone-pill, .toast, .map-name { background-image: url(img/ui/plate.webp) !important; padding-left: 18px !important; padding-right: 18px !important; }
.stone-ico .ico, .stone-pill .ico { color: #e9cf8f; }
.stone-pill.silver { color: #e9cf8f !important; }
.stone-ico:hover:not(:disabled), .stone-pill:hover:not(:disabled) { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)) brightness(1.25); }
.stone-ico:active:not(:disabled), .stone-pill:active:not(:disabled) { transform: translateY(2px); box-shadow: none !important; }
#hud-auto[aria-pressed="true"], .hunt-btn.on {
  background: linear-gradient(rgba(122, 52, 96, .7), rgba(96, 38, 76, .7)) center / 84% 58% no-repeat, url(img/ui/plate.webp) center / 100% 100% no-repeat !important;
  color: #fff6e2 !important; animation: none; }
.hud-band { background: linear-gradient(rgba(14, 12, 11, .93), rgba(6, 5, 5, .97)) !important; border: 0 !important; border-top: 1px solid rgba(217, 201, 163, .45) !important;
  border-radius: 0 !important; box-shadow: 0 -6px 18px rgba(0, 0, 0, .35) !important; color: #efe6d2 !important; text-shadow: none !important; }
.hud-band .lv, .hud-band small, .hud-band .band-hp .tnum { color: #b9ab8f !important; }
.hud-band .band-place { color: #efe6d2 !important; }
.hud-band .band-place .ico { color: #e9cf8f !important; }
.mini-hp { background: rgba(239, 230, 210, .12) !important; box-shadow: none !important; border-radius: 0 !important; }
.mini-hp i { background: linear-gradient(#c9433d, #8f2a26) !important; }
.hud-band .stone-ico { filter: none; }
/* 진형 창: 공통 먹 판에 맞춰 넓이·여백, 확정 버튼은 공통 상아색 붓 버튼 */
.panel.stone.p33.fm33 { width: min(600px, 100%); padding: 34px 48px 30px !important; }
.panel.stone.p33.fm33 button.b33 { background: url(img/ui/brush_ivory.webp) center / 100% 100% no-repeat !important; transform: none; min-height: 44px; padding: 8px 34px; font-size: 1.05rem; color: #1c1712; }
.panel.stone.p33.fm33 button.g33 { background: none !important; }
.panel.stone.p33.fm33 .ul33 { display: none; }
.panel.stone.p33.fm33 .t33 { border-bottom: 1px solid rgba(217, 201, 163, .4); padding-bottom: 6px; margin-bottom: 4px; }
/* 주요 버튼: 붓 그림이 작은 버튼에서 찌그러져서, 같은 육각 먹 판 안을 상아색으로 칠한 모양으로 */
.panel.stone.p33 button.primary, .panel.stone.p33.fm33 button.b33 {
  background: linear-gradient(#f3ead6, #d8c79f) center / 88% 64% no-repeat, url(img/ui/plate.webp) center / 100% 100% no-repeat !important;
  color: #1c1712 !important; text-shadow: none !important; font-weight: 900; min-height: 40px; padding: 6px 30px; transform: none; }
/* 휴대폰 가로(낮은 화면): 먹 판 여백을 줄여 스크롤 없이 */
@media (max-height: 500px) {
  .panel.stone.p33, .panel.stone.p33.thick { padding: 16px 26px 14px !important; }
  .panel.stone.p33.fm33 { padding: 16px 30px 12px !important; }
  .panel.stone.p33 h3 { font-size: 1.2rem; }
  .panel.stone.p33.fm33 h3 { font-size: 1.3rem; }
  .panel.stone.p33 button.primary { min-height: 34px; padding: 4px 24px; }
}
@media (max-height: 500px) {   /* 메뉴: 휴대폰 가로에서 스크롤 없이 */
  .panel.stone.p33 .stack { gap: 3px; }
  .panel.stone.p33 .stack > button { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
}
/* 발밑 그림자: 진한 먹 그림자 + 넓게 번지는 옅은 그늘 (입체감, 2026-11-08 대표) */
.ground { position: absolute; z-index: 0; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, .62) 30%, rgba(0, 0, 0, .22) 56%, rgba(0, 0, 0, 0) 72%); }
.ground::after { content: ""; position: absolute; left: -22%; right: -22%; top: -40%; bottom: -40%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%); }
.pet-hero > img, .st-img > img, .doll-fig > img, .bk-hero > img { position: relative; z-index: 1; object-position: 50% 100%; }
.panel.stone.p33 .pet-hero > img, .panel.stone.p33 .st-img > img, .panel.stone.p33 .doll-fig > img { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
/* 검은 판 위에서는 검은 그림자가 안 보여서: 발밑에 옅은 상아빛 바닥(조명) + 그 가운데 진한 그림자 */
.ground { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .95) 0, rgba(0, 0, 0, .8) 26%, rgba(0, 0, 0, .25) 48%, rgba(0, 0, 0, 0) 62%); }
.ground::after { z-index: -1; left: -38%; right: -38%; top: -95%; bottom: -95%;
  background: radial-gradient(ellipse at center, rgba(239, 226, 196, .30) 0, rgba(239, 226, 196, .14) 38%, rgba(239, 226, 196, 0) 70%); }
.ground { isolation: isolate; }
.ground { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, .88) 30%, rgba(0, 0, 0, .35) 52%, rgba(0, 0, 0, 0) 66%); }
.ground::after { left: -45%; right: -45%; top: -110%; bottom: -110%;
  background: radial-gradient(ellipse at center, rgba(244, 230, 200, .42) 0, rgba(244, 230, 200, .2) 34%, rgba(244, 230, 200, .06) 56%, rgba(244, 230, 200, 0) 70%); }
/* 33 테마 다듬기 (2026-11-08 대표): 창 안쪽은 붓 자국이 비치지 않게 진한 먹으로 덮고(붓 끝은 여백에만),
   성장 등급 글자색 되살리기, 경험치·HP 숫자 또렷하게, 자줏빛 고른 표시 없애기, 주요 버튼도 같은 먹 판 */
.panel.stone.p33, .panel.stone.p33.thick {
  background: linear-gradient(rgba(14, 12, 11, .9), rgba(14, 12, 11, .9)) content-box, url(img/ui/panel_wide.webp) center / 100% 100% no-repeat !important; }
.panel.stone.p33[data-ar="tall"], .panel.stone.p33.thick[data-ar="tall"] {
  background: linear-gradient(rgba(14, 12, 11, .9), rgba(14, 12, 11, .9)) content-box, url(img/ui/panel_tall.webp) center / 100% 100% no-repeat !important; }
.panel.stone.p33[data-ar="sq"], .panel.stone.p33.thick[data-ar="sq"] {
  background: linear-gradient(rgba(14, 12, 11, .9), rgba(14, 12, 11, .9)) content-box, url(img/ui/panel_sq.webp) center / 100% 100% no-repeat !important; }
/* 등급 글자: 상아색으로 덮였던 것 되돌림 (C 노랑 · B 초록 · A 파랑 · S 보라 · SEVEN 무지개) */
.panel.stone.p33 .gpill { text-shadow: 0 1px 2px rgba(0, 0, 0, .7) !important; }
.panel.stone.p33 .pstat .gpill.g-C, .panel.stone.p33 .pstat .gpill.g-Cp, .panel.stone.p33 .gpill.g-C, .panel.stone.p33 .gpill.g-Cp { color: #e8b923 !important; }
.panel.stone.p33 .gpill.g-B, .panel.stone.p33 .gpill.g-Bp { color: #4fc36b !important; }
.panel.stone.p33 .gpill.g-A, .panel.stone.p33 .gpill.g-Ap { color: #4d9cf0 !important; }
.panel.stone.p33 .gpill.g-S, .panel.stone.p33 .gpill.g-Sp { color: #b87af0 !important; }
.panel.stone.p33 .gpill.g-SEVEN { color: transparent !important; text-shadow: none !important; }
/* 경험치·HP 숫자와 줄 */
.panel.stone.p33 .meter small { color: #cdbf9f !important; }
.panel.stone.p33 .meter .tnum { color: #fff6e2 !important; text-shadow: 0 1px 2px #000 !important; font-weight: 700; }
.panel.stone.p33 .mbar { background: rgba(239, 230, 210, .14) !important; box-shadow: inset 0 0 0 1px rgba(239, 230, 210, .18) !important; }
/* 고른 버튼·탭·칸: 자줏빛 대신 같은 먹 판에 금빛 글씨 + 금빛 테 */
.panel.stone.p33 button.on, .panel.stone.p33 .opts button.on, .panel.stone.p33 .tool.on, .panel.stone.p33 .ptab.on, .panel.stone.p33 .ptabs button[aria-selected="true"],
#hud-auto[aria-pressed="true"], .hunt-btn.on {
  background: url(img/ui/plate.webp) center / 100% 100% no-repeat !important; color: #f0d48e !important;
  filter: drop-shadow(0 0 1px #c9a256) drop-shadow(0 0 5px rgba(201, 162, 86, .45)) !important; }
.panel.stone.p33 .pd-slot.on { background: url(img/ui/slot.webp) center / 100% 100% no-repeat !important; }
/* 주요 버튼(닫기·확정 등): 상아색 네모 대신 같은 먹 판, 글씨만 밝은 금빛으로 */
.panel.stone.p33 button.primary, .panel.stone.p33.fm33 button.b33 {
  background: url(img/ui/plate.webp) center / 100% 100% no-repeat !important; color: #fff1cf !important;
  text-shadow: 0 1px 2px #000 !important; filter: brightness(1.15) drop-shadow(0 0 4px rgba(201, 162, 86, .35)); }
/* SEVEN이 펫 창 오른쪽 끝(넘치면 잘리는 칸)에 붙어 N이 잘리던 것: 바깥으로 빼던 여백을 없애고 줄 끝에 여유 */
.gpill.g-SEVEN { margin-right: 0 !important; }
.ph-lvrow, .ph-name { padding-right: .35em; }
/* 펫 창 위 줄의 등급 칸은 60px인데 SEVEN은 그보다 넓어서 가운데 맞춤이면 오른쪽이 잘림 → 오른쪽 끝에 맞추고 왼쪽으로 넘치게 */
.panel.thick.petview .ph-lvrow > .gpill.g-SEVEN:last-child { justify-self: end; }
/* 아이템 쓰기: '사용' → 먹일 대상 줄 (캐릭터·펫 얼굴 + HP). 못 쓰는 대상은 흐리게 (2026-11-08) */
.iv-info .use-go { margin-top: 6px; justify-self: start; }
/* 장비 장착·빼기 단추는 이름 오른쪽에 (휴대폰에서 설명 칸 높이를 늘리지 않게) */
.iv-info:has(.gear-go) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
.iv-info:has(.gear-go) > :not(.gear-go) { grid-column: 1; }
.iv-info .gear-go { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
/* 상점 장비 줄: 이름·효과와 사기 단추를 한 줄에 */
.shop-item.shop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 6px; }
.use-row { display: grid; gap: 6px; margin-top: 6px; }
.use-ts { display: flex; flex-wrap: wrap; gap: 6px; }
.use-t { display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; min-height: 0; padding: 4px 14px 4px 8px; text-align: left; }
.use-t img { grid-row: span 2; width: 38px; height: 38px; object-fit: contain; }
.use-t b { font-size: .8rem; white-space: nowrap; }
.use-t .mini-hp { width: 56px; }
.use-t small { grid-column: 2; font-size: .62rem; color: #b9ab8f; display: none; }
.use-t.no { opacity: .38; }
.panel.stone.p33 .use-t { background: url(img/ui/plate.webp) center / 100% 100% no-repeat !important; padding: 6px 22px 6px 16px; }
.panel.stone.p33 .use-t:not(.no):hover { filter: brightness(1.3) drop-shadow(0 0 4px rgba(201, 162, 86, .5)); }
/* ══ 전체 점검 고침 (2026-11-08) ══════════════════════════════════════ */
/* 아이템 창·캐릭터 장비 탭: 갈색 칸·둥근 판을 먹색으로, 먹 판 가장자리가 보이게 여백 */
.panel.stone.p33.itemview { padding: 28px 40px 24px !important; }
.panel.stone.p33 .bag-grid { background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(239, 230, 210, .16) !important; border-radius: 2px !important; box-shadow: none !important; }
.panel.stone.p33 .iv-info { background: rgba(0, 0, 0, .42) !important; border: 1px solid rgba(239, 230, 210, .14); border-radius: 2px !important; }
.panel.stone.p33 .iv-info b { color: #f0d48e; }
.panel.stone.p33 .bag-cell { background: rgba(255, 255, 255, .04) !important; box-shadow: inset 0 0 0 1px rgba(239, 230, 210, .1) !important; }
.panel.stone.p33 .bag-cell.has { background: rgba(201, 162, 86, .16) !important; box-shadow: inset 0 0 0 1px rgba(201, 162, 86, .5) !important; }
.panel.stone.p33 .bag-cell.on { box-shadow: 0 0 0 2px #c9a256, 0 0 8px rgba(201, 162, 86, .5) !important; }
.panel.stone.p33 .iv-sec b, .panel.stone.p33 .iv-sec { color: #efe6d2; }
/* 보관소 위 '닫기 ✕'·흐린 버튼 */
.panel.stone.p33 .st-h button { min-height: 32px; padding: 0 18px; }
.panel.stone.p33 button:disabled { opacity: .4; filter: grayscale(.6); }
/* 포탈: 휴대폰 가로에서 목록을 두 줄로, 스크롤 없이 */
@media (max-height: 500px) {
  .panel.stone.p33 .stack:has(> [data-go]), .panel.stone.p33 .stack:has(> button[disabled][title]) { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  .panel.stone.p33 .stack > [data-go], .panel.stone.p33 .stack > button[disabled] { min-height: 28px; font-size: .74rem; padding: 2px 10px; }
  .panel.stone.p33 .say { margin: 2px 0; padding: 4px 8px; font-size: .78rem; }
}
/* 타이틀·캐릭터 만들기: 밝은 화면을 먹 분위기로 (첫 화면부터 같은 게임처럼) */
#screen-title, #screen-create { background: radial-gradient(ellipse 80% 70% at 50% 45%, #2a2420, #0d0b0a 75%); color: #efe6d2; }
#screen-title .title-card { padding: 34px 44px 28px; background: linear-gradient(rgba(14, 12, 11, .9), rgba(14, 12, 11, .9)) content-box, url(img/ui/panel_sq.webp) center / 100% 100% no-repeat; width: min(440px, 100%); }
#screen-title .logo { background: linear-gradient(180deg, #f6e7c2, #c9a256); -webkit-background-clip: text; background-clip: text; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 900; }
#screen-title .eyebrow, #screen-title .muted { color: #b9ab8f; }
#screen-title button, #screen-create button { background: url(img/ui/plate.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; color: #efe6d2; box-shadow: none; text-shadow: 0 1px 2px #000; font-weight: 700; }
#screen-title button.primary, #screen-create button.primary { color: #fff1cf; filter: brightness(1.15) drop-shadow(0 0 4px rgba(201, 162, 86, .35)); }
#screen-title button:hover, #screen-create button:hover { filter: brightness(1.3); }
#screen-create .create { background: linear-gradient(rgba(14, 12, 11, .9), rgba(14, 12, 11, .9)) content-box, url(img/ui/panel_wide.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; padding: 30px 40px 26px; color: #efe6d2; }
#screen-create .create h2 { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; color: #efe6d2; }
#screen-create .steps i { background: rgba(239, 230, 210, .18); } #screen-create .steps i.on { background: #c9a256; }
#screen-create .say, #screen-create .muted, #screen-create .tiny { color: #cdbf9f; }
#screen-create input[type=text] { background: rgba(0, 0, 0, .5); border: 1px solid rgba(239, 230, 210, .3); color: #efe6d2; }
#screen-create .preview, #screen-create .st-show, #screen-create .choice { background: rgba(0, 0, 0, .3); border-color: rgba(239, 230, 210, .14); color: #efe6d2; }
#screen-create .char-pick button { background: rgba(0, 0, 0, .35); border: 1px solid rgba(239, 230, 210, .16); }
#screen-create .char-pick button.on { box-shadow: 0 0 0 2px #c9a256; background: rgba(201, 162, 86, .14); }
#screen-create .st-talk { background: rgba(0, 0, 0, .4); }
#screen-create .st-talk span { color: #efe6d2; } #screen-create .st-talk b { color: #f0d48e; }
#screen-create .meet img.tree { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
@media (max-height: 500px) { #screen-create .create { padding: 16px 26px 12px; } }
/* 포탈: 휴대폰 가로에서 창을 넓혀 글씨가 잘리지 않게, 세 줄로 */
@media (max-height: 500px) {
  .panel.stone.p33:has(.stack > [data-go]) { width: min(760px, 100%); max-width: 100%; }
  .panel.stone.p33 .stack:has(> [data-go]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .panel.stone.p33 .stack > [data-go], .panel.stone.p33 .stack:has(> [data-go]) > button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .68rem !important; padding: 2px 12px !important; }
}
/* 속성 표시(흰 알약)도 어두운 화면에 맞게 */
#screen-create .el, .panel.stone.p33 .el { background: rgba(0, 0, 0, .45) !important; color: #efe6d2 !important; border: 1px solid rgba(239, 230, 210, .2); box-shadow: none !important; }
@media (max-height: 500px) {   /* 포탈: 아래 '그냥 두기'까지 보이게 더 촘촘히 */
  .panel.stone.p33:has(.stack > [data-go]) { padding-top: 10px !important; padding-bottom: 8px !important; gap: 4px; }
  .panel.stone.p33 .stack:has(> [data-go]) > button { min-height: 23px !important; }
  .panel.stone.p33:has(.stack > [data-go]) h3 { font-size: 1rem; }
}
/* ══ 33원정대식 불러오기(타이틀) 화면 (2026-11-08 대표) ══════════════════════════
   왼쪽: 먹 바탕에 '게임 불러오기' + 저장 카드(장소 그림·장소·저장한 때·펫·플레이 시간). 오른쪽: 그 장소 그림이 먹 속에서 번져 나옴 */
#screen-title { position: relative; overflow: hidden; background: #0b0a09 url(img/ui/lattice.webp) 0 0 / 220px 220px; display: block; padding: 0; }
#screen-title::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 40%, rgba(12, 10, 9, .55), rgba(5, 4, 4, .92)); pointer-events: none; }
.ld { position: relative; height: 100%; display: grid; grid-template-columns: minmax(300px, 46%) 1fr; }
.ld-art { position: absolute; inset: 0 0 0 34%; background: #111 center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 10%, #000 30%), url(img/ui/panel_wide.webp);
  -webkit-mask-size: 100% 100%, 140% 120%; -webkit-mask-position: 0 0, 40% 50%; -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 10%, #000 30%), url(img/ui/panel_wide.webp); mask-size: 100% 100%, 140% 120%; mask-position: 0 0, 40% 50%; }
.ld-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 4, 4, .55), transparent 30%, transparent 80%, rgba(5, 4, 4, .4)); }
.ld-place { position: absolute; z-index: 1; left: 30%; top: 9%; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  color: #f3e6c8; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); letter-spacing: .04em; }
.ld-left { position: relative; z-index: 2; display: grid; align-content: center; gap: 14px; padding: max(24px, 5vh) 0 max(20px, 4vh) max(28px, 5vw); }
/* 큰·넓은 모니터에서 왼쪽(제목·불러오기 카드·단추)이 너무 작던 것 (2026-11-10 대표): 화면 높이에 맞춰 통째로 키움 (--tz는 main.js가 계산) */
#screen-title .ld-left > * { zoom: var(--tz, 1); }
.ld-brand { display: grid; gap: 2px; }
.ld-brand .eyebrow { color: #a8997e; letter-spacing: .5em; font-size: .72rem; }
#screen-title .ld-brand .logo { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); text-align: left; }
.ld-sec { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; color: #efe6d2; font-size: 1.05rem; padding: 0 0 6px 18px; position: relative;
  border-bottom: 1px solid rgba(217, 201, 163, .45); width: min(100%, 420px); }
.ld-sec::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border: 1px solid #c9a256; transform: rotate(45deg); }
.ld-card { all: unset; box-sizing: border-box; cursor: pointer; width: min(100%, 460px); display: grid; grid-template-columns: 46% 1fr; gap: 14px; align-items: center;
  padding: 14px 18px 14px 14px; background: linear-gradient(rgba(10, 9, 8, .85), rgba(10, 9, 8, .85)) content-box, url(img/ui/panel_wide.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); transition: transform .15s, filter .15s; }
.ld-card:hover, .ld-card:focus-visible { transform: translateX(4px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px rgba(201, 162, 86, .35)); }
.ld-thumb { aspect-ratio: 16 / 9; background: center / cover no-repeat;
  -webkit-mask: url(img/ui/panel_wide.webp) center / 108% 115% no-repeat; mask: url(img/ui/panel_wide.webp) center / 108% 115% no-repeat; }
.ld-txt { display: grid; gap: 3px; color: #efe6d2; min-width: 0; }
.ld-txt > b { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-size: 1.15rem; color: #f3e6c8; }
.ld-when { font-weight: 800; font-size: .86rem; color: #fff6e2; }
.ld-txt small { font-size: .7rem; color: #a8997e; margin-top: 2px; }
.ld-play { font-size: 1.35rem; font-weight: 800; color: #fff6e2; letter-spacing: .02em; line-height: 1; }
.ld-pets { display: flex; gap: 4px; margin: 2px 0; }
.ld-pets i { width: 26px; height: 26px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid rgba(201, 162, 86, .55); background: rgba(0, 0, 0, .5); }
.ld-pets i.on { border-color: #e9cf8f; box-shadow: 0 0 6px rgba(201, 162, 86, .5); }
.ld-pets img { width: 30px; height: 30px; object-fit: contain; transform: rotate(-45deg); }
.ld-hello { margin: 0; color: #cdbf9f; width: min(100%, 420px); line-height: 1.6; }
.ld-btns { display: flex; gap: 10px; width: min(100%, 460px); }
.ld-btns button { flex: 1; min-height: 46px; }
#screen-title #save-where { color: #8f826a; width: min(100%, 460px); margin: 0; }
@media (max-height: 500px) {
  .ld-left { gap: 8px; padding: 14px 0 12px 22px; }
  #screen-title .ld-brand .logo { font-size: 1.5rem; } .ld-brand .eyebrow { font-size: .6rem; }
  .ld-card { padding: 10px 14px 10px 10px; gap: 10px; } .ld-txt > b { font-size: .95rem; } .ld-play { font-size: 1.05rem; } .ld-when { font-size: .74rem; }
  .ld-pets i { width: 20px; height: 20px; } .ld-pets img { width: 24px; height: 24px; }
  .ld-btns button { min-height: 36px; }
}
@media (max-width: 620px) and (min-height: 501px) { .ld { grid-template-columns: 1fr; } .ld-art { inset: 0; opacity: .45; } .ld-left { padding-right: 20px; } }
/* 불러오기 카드: 33원정대처럼 찢긴 먹 종이 카드 + 장소 그림도 찢긴 가장자리 (2026-11-08 대표) */
.ld-card { background: url(img/ui/card_torn.webp) center / 100% 100% no-repeat !important; padding: 16px 22px 16px 16px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)); }
.ld-card.on { box-shadow: none; }
.ld-card:hover, .ld-card:focus-visible { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)) brightness(1.12); }
.ld-thumb { -webkit-mask: url(img/ui/mask_torn.png) center / 100% 100% no-repeat; mask: url(img/ui/mask_torn.png) center / 100% 100% no-repeat; }
.ld-txt > b { font-weight: 400; font-size: 1.25rem; letter-spacing: .03em; }
.ld-txt small { margin-top: 4px; }
/* 오른쪽 큰 그림: 왼쪽 가장자리를 찢긴 먹 결로 */
.ld-art { -webkit-mask-image: url(img/ui/mask_torn.png), linear-gradient(90deg, transparent 0, #000 22%); -webkit-mask-size: 118% 112%, 100% 100%; -webkit-mask-position: 0 50%, 0 0;
  mask-image: url(img/ui/mask_torn.png), linear-gradient(90deg, transparent 0, #000 22%); mask-size: 118% 112%, 100% 100%; mask-position: 0 50%, 0 0; -webkit-mask-composite: source-in; mask-composite: intersect; }

/* 우르드 사냥터 2·3 (세계수 뿌리 숲·바위 고개): 전투 배경은 우선 앞마당 그림 (2026-11-08, 사냥터 그림은 나중에) */
#battle .b-field.stage[data-area="urdRoots"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground { background: #7f9c5a url("img/urd/bg_roots.webp") center / cover no-repeat; }
#battle .b-field.stage[data-area="urdPass"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground { background: #a7a77c url("img/urd/bg_pass.webp") center / cover no-repeat; }
#battle .b-field.stage[data-area="urdRoots"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::before, #battle .b-field.stage[data-area="urdRoots"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::after,
#battle .b-field.stage[data-area="urdPass"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::before, #battle .b-field.stage[data-area="urdPass"]:not([data-area$="Cave"]):not([data-area="cave"]) .b-ground::after { display: none; }

/* 그림자 규칙 하나 (2026-11-08): 빛은 왼쪽 위 → 발밑에서 오른쪽 아래로 살짝, 따뜻한 짙은 갈색, 부드러운 가장자리. 지도(shadow.js)와 같은 색 */
.stage .unit .art::before { content: ""; position: absolute; left: 20%; right: 8%; bottom: -5%; height: 15%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(52,36,22,.68), rgba(52,36,22,.42) 55%, rgba(52,36,22,0)); }
.stage .unit.boss .art::before { left: 10%; right: 2%; }
.battle .stage .unit .foot { background: none; }   /* 고리(차례·대상) 전용, 그림자는 위 ::before */

/* ── 아이템 화면: 화면 전체 (I, 2026-11-08 대표 "아얘 화면 들어가버리게", 33원정대 장비 화면처럼) ─────────────
   먹색 바탕 + 옅은 마름모 무늬 + 가운데 주인공에 은은한 빛. 왼쪽 장착(붓 띠 목록) · 가운데 주인공 · 오른쪽 이름·레벨·HP / 가방 / 설명 */
#panel-wrap.full { padding: 0; background: #0b0a09; place-items: stretch; z-index: 20; }
#panel-wrap.full #panel { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 !important; border-radius: 0; filter: none; overflow: hidden;
  background: radial-gradient(ellipse 30% 48% at 50% 56%, rgba(214, 190, 140, .13), transparent 72%),
    repeating-linear-gradient(45deg, rgba(217, 201, 163, .04) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, rgba(217, 201, 163, .04) 0 1px, transparent 1px 28px), #0d0c0b !important; }
#panel-wrap.full #panel::before, #panel-wrap.full #panel::after { content: none; }
#panel.fullview .fv { height: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(210px, 25%) minmax(0, 1fr) minmax(330px, 36%); grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 2.4vw; padding: max(16px, 3.4vh) max(20px, 3.4vw) max(10px, 2.2vh); color: #efe6d2; }
#panel.fullview .fv-left, #panel.fullview .fv-right { display: flex; flex-direction: column; gap: 1.3vh; min-height: 0; }
#panel.fullview h3 { margin: 0 0 1vh; }
#panel.fullview .fv-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 201, 163, .22);
  font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 700; font-size: 1.02rem; color: #d0c297; }
#panel.fullview .fv-sec small { font-family: system-ui, sans-serif; font-weight: 600; font-size: .78rem; color: #9d917a; margin-left: 4px; }
#panel.fullview .fv-sec em { font-style: normal; font-family: system-ui, sans-serif; font-size: .8rem; color: #b9ab93; display: inline-flex; align-items: center; gap: 4px; }
#panel.fullview .fv-sec em b { color: #efe6d2; }
#panel.fullview .fv-sec .ico { width: 15px; height: 15px; }
/* 장착: 비스듬히 잘린 붓 띠 */
#panel.fullview .fv-slots { display: flex; flex-direction: column; gap: 1.1vh; }
#panel.fullview .fv-slot { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 1vh 26px 1vh 14px; min-height: 0; clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(239, 230, 210, .11), rgba(239, 230, 210, .035) 80%, transparent); color: #efe6d2; }
#panel.fullview .fv-slot .ico { grid-row: 1 / span 2; width: 22px; height: 22px; opacity: .8; justify-self: center; }
#panel.fullview .fv-slot .fv-sn { font-size: .74rem; color: #9d917a; line-height: 1.2; }
#panel.fullview .fv-slot small { font-size: .98rem; font-weight: 700; color: #6f6656; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.fullview .fv-slot.has small { color: #efe6d2; }
#panel.fullview .fv-slot.has .ico { opacity: 1; color: #e9cf8f; }
#panel.fullview .fv-slot:hover { background: linear-gradient(90deg, rgba(239, 230, 210, .17), rgba(239, 230, 210, .05) 80%, transparent); }
#panel.fullview .fv-slot.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .16) 80%, transparent); }
/* 가운데 주인공 */
#panel.fullview .fv-mid { min-height: 0; display: grid; }
#panel.fullview .fv-fig { position: relative; min-height: 0; height: 100%; display: grid; place-items: end center; }
#panel.fullview .fv-fig > img { position: relative; z-index: 1; width: 100%; height: 94%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .65)); }
/* 오른쪽: 이름판 */
#panel.fullview .fv-who { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: end; padding: 1.4vh 16px 1.6vh;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(239, 230, 210, .12); }
#panel.fullview .fv-name { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#panel.fullview .fv-name b { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 700; font-size: 1.7rem; color: #efe6d2; letter-spacing: .03em; }
#panel.fullview .fv-lv { grid-row: 2 / span 2; display: grid; justify-items: start; line-height: 1; }
#panel.fullview .fv-lv small { font-size: .74rem; color: #d0c297; }
#panel.fullview .fv-lv b { font-family: "Noto Serif KR", serif; font-size: 2.3rem; color: #efe6d2; }
#panel.fullview .fv-bar { display: grid; gap: 2px; }
#panel.fullview .fv-bar span { justify-self: end; font-size: .74rem; color: #cdbf9f; }
#panel.fullview .fv-bar i { display: block; height: 7px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(239, 230, 210, .25); }
#panel.fullview .fv-bar i b { display: block; height: 100%; }
#panel.fullview .fv-bar.xp i b { background: linear-gradient(90deg, #a88b4f, #e3c98d); }
#panel.fullview .fv-bar.hp i b { background: linear-gradient(90deg, #7d1f1f, #c0392b); }
/* 가방 */
#panel.fullview .bag-grid { display: grid; grid-template-columns: repeat(6, var(--bc)); grid-auto-rows: var(--bc); gap: 5px; width: max-content; --bc: clamp(30px, 6.4vh, 56px); }
#panel.fullview .bag-cell { aspect-ratio: 1; height: auto; }
#panel.fullview .bag-cell .ico { width: auto; height: 50%; aspect-ratio: 1; }
#panel.fullview .iv-info { flex: 0 0 auto; min-height: 4.6em; border-radius: 0; background: rgba(0, 0, 0, .42); border: 1px solid rgba(239, 230, 210, .14); font-size: .86rem; }
#panel.fullview .iv-info b { color: #f0d48e; }
#panel.fullview .fv-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 1vh; }
#panel.fullview .fv-foot .tool { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; min-height: 38px; padding: 0 22px; }
/* 휴대폰 가로 */
@media (max-height: 500px) {
  #panel.fullview .fv { grid-template-columns: minmax(150px, 24%) minmax(0, 1fr) minmax(250px, 40%); column-gap: 2vw; padding: 10px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); }
  #panel.fullview .fv-left, #panel.fullview .fv-right { gap: 5px; }
  #panel.fullview h3 { font-size: 1.1rem !important; margin: 0; }
  #panel.fullview .fv-sec { font-size: .82rem; padding-bottom: 2px; }
  #panel.fullview .fv-slots { gap: 3px; }
  #panel.fullview .fv-slot { padding: 3px 18px 3px 8px; grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; }
  #panel.fullview .fv-slot .ico { width: 16px; height: 16px; }
  #panel.fullview .fv-slot .fv-sn { font-size: .62rem; }
  #panel.fullview .fv-slot small { font-size: .78rem; }
  #panel.fullview .fv-who { padding: 5px 10px 6px; row-gap: 3px; }
  #panel.fullview .fv-name b { font-size: 1.15rem; }
  #panel.fullview .fv-lv b { font-size: 1.5rem; }
  #panel.fullview .fv-bar span { font-size: .62rem; }
  #panel.fullview .fv-bar i { height: 5px; }
  #panel.fullview .bag-grid { --bc: clamp(22px, 8.2vh, 34px); gap: 3px; }
  #panel.fullview .iv-info { min-height: 3.4em; font-size: .7rem; padding: 4px 8px; }
  #panel.fullview .fv-foot { padding-top: 3px; }
  #panel.fullview .fv-foot .tool { min-height: 28px; padding: 0 14px; font-size: .8rem; }
}
#panel-wrap.full #panel { display: block; position: relative; }
#panel.fullview .fv { position: absolute; inset: 0; height: auto; }
#panel.fullview .fv-fig { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
#panel.fullview .fv-fig > img { min-height: 0; align-self: end; }
/* 아이템 화면: '사용'·'장착'·'빼기' 단추는 이름 오른쪽에, 먹일 대상 줄은 아래 한 줄 전체 */
#panel.fullview .iv-info:has(.use-go) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
#panel.fullview .iv-info:has(.use-go) > b, #panel.fullview .iv-info:has(.use-go) > span { grid-column: 1; }
#panel.fullview .iv-info .use-go { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
#panel.fullview .iv-info .use-row { grid-column: 1 / -1; }
@media (max-height: 500px) {
  #panel.fullview .bag-grid { grid-template-columns: repeat(8, var(--bc)); --bc: clamp(22px, 7.6vh, 31px); }
  #panel.fullview .iv-info .use-row { gap: 3px; }
  #panel.fullview .iv-info .use-t { min-height: 0; padding-block: 2px; }
}

/* ── 펫 화면 (P, 2026-11-08 대표 확정 시안): 33원정대 캐릭터 화면처럼 화면 전체 ───────────────
   왼쪽 위 방패 탭 6칸 · 그 아래 기술 · 가운데 펫 크게 · 양옆 3분의 1에 앞뒤 펫 흐릿하게 · 오른쪽 위 이름·능력치 판 · 오른쪽 아래 할 일 */
#panel-wrap.full #panel.petfull { background: radial-gradient(ellipse 34% 55% at 50% 58%, rgba(120, 70, 40, .2), transparent 70%), #0a0908 !important; }
#panel-wrap.full #panel.petfull::before { content: "" !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6; background: url(img/ui/lattice.webp) 0 0 / 22vh;
  -webkit-mask-image: linear-gradient(90deg, transparent 58%, #000 100%); mask-image: linear-gradient(90deg, transparent 58%, #000 100%); }
#panel-wrap.full #panel.petfull .fp { position: absolute; inset: 0; color: #efe6d2; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; overflow: hidden; }
#panel-wrap.full #panel.petfull .fp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 48% 52%, transparent 55%, rgba(0, 0, 0, .7)); z-index: 0; }
#panel-wrap.full #panel.petfull button { font-family: inherit; }
/* 가운데 펫 · 양옆 펫 */
#panel-wrap.full #panel.petfull .fp-hero { position: absolute; left: 50%; bottom: 9vh; height: calc(68vh * min(1.15, var(--hs, 1))); transform: translateX(-50%); z-index: 1; display: flex; align-items: flex-end; }
#panel-wrap.full #panel.petfull .fp-hero > img { height: 100%; width: auto; filter: drop-shadow(0 1.6vh 2.6vh rgba(0, 0, 0, .7)); }
#panel-wrap.full #panel.petfull .fp-stage.down .fp-hero > img { filter: grayscale(.8) brightness(.6) drop-shadow(0 1.6vh 2.6vh rgba(0, 0, 0, .7)); }
#panel-wrap.full #panel.petfull .fp-down { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); font-style: normal; font-size: 3vh; color: #e88; text-shadow: 0 2px 6px #000; }
#panel-wrap.full #panel.petfull .fp-side { position: absolute; bottom: 9vh; height: 62vh; z-index: 0; transform: translateX(-50%); filter: brightness(.22) saturate(.6) blur(1px); opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); pointer-events: none; }
#panel-wrap.full #panel.petfull .fp-side img { height: 100%; width: auto; }
#panel-wrap.full #panel.petfull .fp-side.l { left: 17%; } #panel-wrap.full #panel.petfull .fp-side.r { left: 83%; }
/* 왼쪽 위 방패 탭 */
#panel-wrap.full #panel.petfull .fp-tabs { position: absolute; top: 2.6vh; left: 3.4vw; display: flex; gap: .5vw; align-items: flex-start; z-index: 3; }
#panel-wrap.full #panel.petfull .fp-tab { all: unset; box-sizing: border-box; position: relative; width: 9.6vh; height: 8.4vh; display: grid; place-items: center; cursor: pointer; opacity: .8;
  background: linear-gradient(180deg, #5d564c, #2b2723); clip-path: polygon(0 0, 100% 0, 90% 74%, 50% 100%, 10% 74%); }
#panel-wrap.full #panel.petfull .fp-tab::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: radial-gradient(ellipse at 50% 35%, #2a241e, #0e0c0a 80%); }
#panel-wrap.full #panel.petfull .fp-tab img { position: relative; height: 6vh; width: auto; margin-top: -1.2vh; filter: drop-shadow(0 2px 3px #000); }
#panel-wrap.full #panel.petfull .fp-tab.on { width: 12.6vh; height: 11vh; opacity: 1; background: linear-gradient(180deg, #efe3c4, #9c8352); }
#panel-wrap.full #panel.petfull .fp-tab.on::before { inset: 3px; background: radial-gradient(ellipse at 50% 35%, #4a2c1c, #120d0a 80%); }
#panel-wrap.full #panel.petfull .fp-tab.on img { height: 8vh; }
#panel-wrap.full #panel.petfull .fp-tab.down img { filter: grayscale(.9) brightness(.6); }
#panel-wrap.full #panel.petfull .fp-tab.empty { opacity: .35; cursor: default; }
#panel-wrap.full #panel.petfull .fp-tab:not(.on):hover { opacity: 1; }
#panel-wrap.full #panel.petfull .fp-tab s { position: absolute; left: 14%; top: 10%; text-decoration: none; color: #d0c297; }
#panel-wrap.full #panel.petfull .fp-tab s .ico { width: 1.3vh; height: 1.3vh; }
/* 왼쪽 기술 */
#panel-wrap.full #panel.petfull .fp-left { position: absolute; left: 4vw; top: 18.5vh; width: 30vw; z-index: 2; }
#panel-wrap.full #panel.petfull .fp-h, #panel-wrap.full #panel.petfull .fp-hd { font-size: 2.4vh; font-weight: 700; color: #d6c290; letter-spacing: .1em; }
#panel-wrap.full #panel.petfull .fp-h { margin: 0 0 1.4vh; display: flex; align-items: center; gap: 1vw; }
#panel-wrap.full #panel.petfull .fp-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214, 194, 144, .55), transparent); }
#panel-wrap.full #panel.petfull .fp-sk { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 1.2vh; height: 6.6vh; margin-bottom: 1.1vh; width: 23vw; padding-left: .6vh; cursor: pointer;
  background: linear-gradient(90deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .03) 75%, transparent); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
#panel-wrap.full #panel.petfull .fp-sk.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .12) 80%, transparent); }
#panel-wrap.full #panel.petfull .fp-sk.off { cursor: default; opacity: .45; }
#panel-wrap.full #panel.petfull .fp-dm { width: 4.6vh; height: 4.6vh; flex: none; margin-left: .6vh; transform: rotate(45deg); background: #15110d; outline: 1px solid rgba(214, 190, 140, .7); outline-offset: -3px; display: grid; place-items: center; }
#panel-wrap.full #panel.petfull .fp-dm b { transform: rotate(-45deg); font: 700 1.6vh system-ui, sans-serif; color: #e3c98d; }
#panel-wrap.full #panel.petfull .fp-sk span { display: grid; line-height: 1.2; }
#panel-wrap.full #panel.petfull .fp-sk span b { font-size: 2.15vh; font-weight: 700; }
#panel-wrap.full #panel.petfull .fp-sk span small { font: 600 1.35vh system-ui, sans-serif; color: #a89a80; }
#panel-wrap.full #panel.petfull .fp-card { margin-top: 1.6vh; width: 23vw; box-sizing: border-box; padding: 1.4vh 1.6vh 1.6vh; background: url(img/ui/card_torn.webp) center / 100% 100%; font-family: system-ui, sans-serif; font-size: 1.65vh; line-height: 1.5; color: #e6dcc6; }
#panel-wrap.full #panel.petfull .fp-card b { display: block; font-family: "Noto Serif KR", serif; font-size: 2.2vh; color: #f0d48e; margin-bottom: .4vh; }
#panel-wrap.full #panel.petfull .fp-card p { margin: 0; }
#panel-wrap.full #panel.petfull .fp-meta { display: flex; gap: 1.6vh; margin-top: .8vh; color: #b9ab93; font-size: 1.45vh; }
/* 오른쪽 위 판 */
#panel-wrap.full #panel.petfull .fp-right { position: absolute; right: 1.4vw; top: 1.6vh; width: 25vw; box-sizing: border-box; padding: 2.2vh 2.4vw 2vh; z-index: 2;
  background: linear-gradient(rgba(14, 12, 10, .86), rgba(14, 12, 10, .86)), url(img/ui/lattice.webp) 0 0 / 16vh; border: 1px solid rgba(217, 201, 163, .28);
  box-shadow: inset 0 0 0 4px rgba(10, 9, 8, .9), inset 0 0 0 5px rgba(217, 201, 163, .14), 0 0 3vh rgba(0, 0, 0, .8); }
#panel-wrap.full #panel.petfull .fp-right::before, #panel-wrap.full #panel.petfull .fp-right::after { content: ""; position: absolute; width: 1.6vh; height: 1.6vh; border: 1px solid rgba(217, 201, 163, .55); }
#panel-wrap.full #panel.petfull .fp-right::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } #panel-wrap.full #panel.petfull .fp-right::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
#panel-wrap.full #panel.petfull .fp-nm { position: relative; text-align: center; padding: .2vh 0 1vh; }
#panel-wrap.full #panel.petfull .fp-nm b { font-size: 4.2vh; font-weight: 700; letter-spacing: .14em; }
#panel-wrap.full #panel.petfull .fp-nm .el { position: absolute; right: 0; top: 1vh; font-family: system-ui, sans-serif; font-size: 1.4vh; }
#panel-wrap.full #panel.petfull .fp-nm::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 201, 163, .6), transparent); }
#panel-wrap.full #panel.petfull .rename { margin-top: 1vh; }
#panel-wrap.full #panel.petfull .rename input { min-width: 0; flex: 1; }
#panel-wrap.full #panel.petfull .fp-lvb { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6vh; margin-top: 1.4vh; align-items: end; }
#panel-wrap.full #panel.petfull .fp-lv { display: grid; line-height: 1; justify-items: start; gap: .3vh; }
#panel-wrap.full #panel.petfull .fp-lv small { font-size: 1.5vh; color: #cdbf9f; }
#panel-wrap.full #panel.petfull .fp-lv b { font-size: 5.4vh; font-weight: 700; color: #e9d6a4; }
#panel-wrap.full #panel.petfull .fp-lv .rune { font-size: 1.3vh; }
#panel-wrap.full #panel.petfull .fp-bar { display: grid; gap: .25vh; margin-bottom: .6vh; }
#panel-wrap.full #panel.petfull .fp-bar span { justify-self: end; font-size: 1.5vh; color: #cdbf9f; }
#panel-wrap.full #panel.petfull .fp-bar i { display: block; height: 1vh; background: #0c0a08; clip-path: polygon(1.2% 0, 98.8% 0, 100% 50%, 98.8% 100%, 1.2% 100%, 0 50%); box-shadow: inset 0 0 0 1px rgba(217, 201, 163, .4); position: relative; }
#panel-wrap.full #panel.petfull .fp-bar i u { position: absolute; left: 1.2%; top: 20%; bottom: 20%; display: block; max-width: 97.6%; }
#panel-wrap.full #panel.petfull .fp-bar.xp u { background: linear-gradient(90deg, #8c7445, #e9d6a4); } #panel-wrap.full #panel.petfull .fp-bar.hp u { background: linear-gradient(90deg, #6e1414, #b62a22); }
#panel-wrap.full #panel.petfull .fp-hd { margin: 2.2vh 0 .8vh; font-weight: 500; font-size: 2.2vh; color: #c79a63; letter-spacing: 0; }
#panel-wrap.full #panel.petfull .fp-cs { display: grid; grid-template-columns: auto 1fr; column-gap: 2vh; row-gap: .5vh; font-family: system-ui, sans-serif; font-size: 1.75vh; align-items: center; }
#panel-wrap.full #panel.petfull .fp-cs span { color: #d9cdb5; } #panel-wrap.full #panel.petfull .fp-cs b { text-align: right; font-weight: 700; color: #efe6d2; }
#panel-wrap.full #panel.petfull .fp-radar { position: relative; width: 100%; height: 27vh; margin: 4.2vh 0 3.2vh; }
#panel-wrap.full #panel.petfull .fp-radar svg { position: absolute; left: 50%; top: 50%; width: 17vh; height: 17vh; transform: translate(-50%, -50%); }
#panel-wrap.full #panel.petfull .fp-st { position: absolute; white-space: nowrap; text-align: center; line-height: 1.15; transform: translate(-50%, -50%); font-family: system-ui, sans-serif; }
#panel-wrap.full #panel.petfull .fp-st small { display: block; font-size: 1.6vh; color: #d9cdb5; }
#panel-wrap.full #panel.petfull .fp-st em { font-style: normal; color: #8f8270; }
#panel-wrap.full #panel.petfull .fp-st b { font-size: 2.3vh; font-weight: 700; }
#panel-wrap.full #panel.petfull .gpill { font-family: "Noto Serif KR", serif; font-size: 1.5vh !important; text-shadow: none !important; }
#panel-wrap.full #panel.petfull .fp-cs .gpill { font-size: max(15px, 2.6vh) !important; }   /* 총 등급 크게 (2026-11-09 대표) */
#panel-wrap.full #panel.petfull .fp-st small .n { font-style: normal; font-weight: 700; color: #efe6d2; font-size: 1.15em; }
#panel-wrap.full #panel.petfull .fp-st b.g { display: block; line-height: 1.1; }
#panel-wrap.full #panel.petfull .fp-st b.g .gpill { font-size: max(14px, 2.5vh) !important; }   /* 능력치별 등급: 숫자 자리에 크게 */
#panel-wrap.full #panel.petfull .gpill.g-C, #panel-wrap.full #panel.petfull .gpill.g-Cp { color: #e0b52e; }
#panel-wrap.full #panel.petfull .gpill.g-B, #panel-wrap.full #panel.petfull .gpill.g-Bp { color: #4fbf6e; }
#panel-wrap.full #panel.petfull .gpill.g-A, #panel-wrap.full #panel.petfull .gpill.g-Ap { color: #4f8fe6; }
#panel-wrap.full #panel.petfull .gpill.g-S, #panel-wrap.full #panel.petfull .gpill.g-Sp { color: #a274e6; }
/* 오른쪽 아래 할 일 */
#panel-wrap.full #panel.petfull .fp-foot { position: absolute; right: 3.6vw; bottom: 2.6vh; display: flex; gap: 2.4vh; z-index: 3; }
#panel-wrap.full #panel.petfull .fp-act { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .7vh; font: 600 1.7vh system-ui, sans-serif; color: #cdbf9f; }
#panel-wrap.full #panel.petfull .fp-act i { width: 2.7vh; height: 2.7vh; border: 1px solid rgba(239, 230, 210, .5); border-radius: 50%; display: grid; place-items: center; }
#panel-wrap.full #panel.petfull .fp-act i .ico { width: 1.6vh; height: 1.6vh; }
#panel-wrap.full #panel.petfull .fp-act:hover { color: #efe6d2; }
#panel-wrap.full #panel.petfull .fp-act.on { color: #e3c98d; } #panel-wrap.full #panel.petfull .fp-act.on i { border-color: #e3c98d; }
#panel-wrap.full #panel.petfull .fp-act.warn { color: #ff8d6a; }
#panel-wrap.full #panel.petfull .fp-act:disabled { opacity: .35; cursor: default; }
@media (max-height: 500px) {
  #panel-wrap.full #panel.petfull .fp-act, #panel-wrap.full #panel.petfull .fp-st small, #panel-wrap.full #panel.petfull .fp-bar span, #panel-wrap.full #panel.petfull .fp-lv small, #panel-wrap.full #panel.petfull .fp-sk span small, #panel-wrap.full #panel.petfull .fp-meta { font-size: max(9px, 1.5vh); }
  #panel-wrap.full #panel.petfull .fp-cs, #panel-wrap.full #panel.petfull .fp-card { font-size: max(10px, 1.65vh); }
}
/* 펫 화면: 창 단추 공통 무늬(판 그림·금테·눌림)를 쓰지 않음 */
#panel-wrap.full #panel.petfull .fp-tab, #panel-wrap.full #panel.petfull .fp-sk, #panel-wrap.full #panel.petfull .fp-act { min-height: 0 !important; box-shadow: none !important; border: 0 !important; text-shadow: none !important; transform: none !important; filter: none !important; padding-top: 0; padding-bottom: 0; }
#panel-wrap.full #panel.petfull .fp-act { background: none !important; padding: 0 !important; }
#panel-wrap.full #panel.petfull .fp-tab { background: linear-gradient(180deg, #5d564c, #2b2723) !important; padding: 0 !important; }
#panel-wrap.full #panel.petfull .fp-tab.on { background: linear-gradient(180deg, #efe3c4, #9c8352) !important; }
#panel-wrap.full #panel.petfull .fp-sk { background: linear-gradient(90deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .03) 75%, transparent) !important; padding: 0 0 0 .6vh !important; color: #efe6d2 !important; }
#panel-wrap.full #panel.petfull .fp-sk.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .12) 80%, transparent) !important; }
#panel-wrap.full #panel.petfull .fp-act.on { color: #e3c98d !important; }
#panel-wrap.full #panel.petfull .fp-act.warn { color: #ff8d6a !important; }
#panel-wrap.full #panel.petfull .fp-act:disabled { opacity: .35; }

/* 펫 화면 룬 표시: 이름 왼쪽, 1룬 초록 · 2룬 보라 (아래 띠 이름 색과 같음, 2026-11-07 대표) */
#panel-wrap.full #panel.petfull .fp-nm .rune { position: absolute; left: 0; top: 1vh; margin: 0; font: 800 1.4vh system-ui, sans-serif; padding: .3vh 1vh; border-radius: 99px; color: #fff; }
#panel-wrap.full #panel.petfull .fp-nm .rune.r1 { background: #1E9E52; }
#panel-wrap.full #panel.petfull .fp-nm .rune.r2 { background: #7B3FC4; }

/* 펫 화면 막대 이름: EXP·HP (위 막대를 체력으로 잘못 읽지 않게) */
#panel-wrap.full #panel.petfull .fp-bar span { justify-self: stretch; display: flex; justify-content: space-between; align-items: baseline; }
#panel-wrap.full #panel.petfull .fp-bar span small { font: 700 1.3vh system-ui, sans-serif; letter-spacing: .06em; color: #9d917a; }
#panel-wrap.full #panel.petfull .fp-bar.hp span small { color: #c06a5e; }

/* 펫 화면 크기 (소형 75% · 준중형 87% · 중형 100% · 대형 110%): 그림 칸의 높이·너비에 같이 곱하고 그 안에 비율대로 (2026-11-08 대표) */
#panel-wrap.full #panel.petfull .fp-hero { height: auto; display: block; }
#panel-wrap.full #panel.petfull .fp-hero > img { display: block; height: calc(68vh * var(--ps, 1)); width: calc(42vw * var(--ps, 1)); object-fit: contain; object-position: 50% 100%; }
#panel-wrap.full #panel.petfull .fp-side { height: auto; }
#panel-wrap.full #panel.petfull .fp-side img { display: block; height: calc(62vh * var(--ps, 1)); width: calc(32vw * var(--ps, 1)); object-fit: contain; object-position: 50% 100%; }

/* 펫 넘기기 효과: 고른 펫이 옆자리(3분의 1 지점)에서 어둠을 벗고 가운데로 스르륵, 양옆 펫·글자는 살며시 나타남 */
@keyframes fpHeroIn { from { transform: translateX(calc(-50% + var(--dir) * 33vw)) scale(.82); filter: brightness(.25) saturate(.6) blur(1.5px); opacity: .7; } to { transform: translateX(-50%) scale(1); filter: none; opacity: 1; } }
@keyframes fpSideIn { from { opacity: 0; translate: calc(var(--dir) * 6vw) 0; } to { opacity: .9; translate: 0 0; } }
@keyframes fpFadeIn { from { opacity: .15; } to { opacity: 1; } }
#panel-wrap.full #panel.petfull .fp-stage.slide .fp-hero { animation: fpHeroIn var(--dur, .7s) cubic-bezier(.22, .8, .3, 1) both; }
#panel-wrap.full #panel.petfull .fp-stage.slide .fp-side { animation: fpSideIn calc(var(--dur, .7s) + .05s) ease-out both; }
#panel-wrap.full #panel.petfull .fp.slide :is(.fp-right, .fp-left) { animation: fpFadeIn .55s ease-out both; }
@media (prefers-reduced-motion: reduce) { #panel-wrap.full #panel.petfull .fp.slide :is(.fp-hero, .fp-side, .fp-right, .fp-left), #panel-wrap.full #panel.petfull .fp-stage.slide :is(.fp-hero, .fp-side) { animation: none; } }
#panel-wrap.full #panel.petfull .fp-hero > img { width: min(46vw, calc(42vw * var(--ps, 1))); }

/* 원래 가운데 펫은 옆자리로 물러나며 어두워짐 (뒤 번호로 가면 왼쪽으로, 앞 번호로 가면 오른쪽으로) → "내 옆으로 옮겨 갔구나" */
@keyframes fpToSide { from { translate: calc(var(--dir) * 33vw) 0; scale: 1.1; filter: brightness(.9) saturate(1) blur(0); opacity: 1; } to { translate: 0 0; scale: 1; filter: brightness(.22) saturate(.6) blur(1px); opacity: .9; } }
#panel-wrap.full #panel.petfull .fp-stage.s-next .fp-side.l, #panel-wrap.full #panel.petfull .fp-stage.s-prev .fp-side.r { animation: fpToSide var(--dur, .7s) cubic-bezier(.22, .8, .3, 1) both; }

#panel-wrap.full #panel.petfull .fp-stage { position: absolute; inset: 0; pointer-events: none; }

/* 펫 줄(필름): 모든 펫이 한 줄로 서 있고 --o(가운데에서 몇 칸)에 따라 자리·크기·밝기가 정해진다. 자리가 바뀌면 부드럽게 미끄러짐 */
#panel-wrap.full #panel.petfull .fp-strip { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#panel-wrap.full #panel.petfull .fp-car { position: absolute; left: 50%; bottom: 9vh;
  --ab: max(var(--o), calc(var(--o) * -1));   /* |o| */
  transform: translateX(calc(-50% + var(--o) * 33vw)) scale(calc(1 - .09 * min(var(--ab), 1)));
  transform-origin: 50% 100%;
  filter: brightness(calc(1 - .78 * min(var(--ab), 1))) saturate(calc(1 - .4 * min(var(--ab), 1))) blur(calc(1px * min(var(--ab), 1)));
  opacity: calc(1 - .1 * min(var(--ab), 1) - .9 * max(0, var(--ab) - 1));
  z-index: calc(3 - var(--ab));
  }   /* 움직임은 main.js에서 예전 자리 → 새 자리로 (element.animate) */
#panel-wrap.full #panel.petfull .fp-car img { display: block; height: calc(68vh * var(--ps, 1)); width: min(46vw, calc(42vw * var(--ps, 1))); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 1.6vh 2.6vh rgba(0, 0, 0, .7)); }
#panel-wrap.full #panel.petfull .fp-car::before { content: ""; position: absolute; left: 50%; bottom: -1vh; width: 60%; height: 5vh; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8), transparent 70%); }
#panel-wrap.full #panel.petfull .fp-car.down img { filter: grayscale(.8) brightness(.6); }
#panel-wrap.full #panel.petfull .fp-car:not(.c) .fp-down { display: none; }
/* 로기르 등 2K 서 있는 그림: 발은 바닥에 붙인 채 숨쉬기 (2026-11-08 대표 B안: 2.4초에 한 번, 세로 2.5%·가로 1.2%) */
@keyframes still-breath { 0%, 100% { scale: 1 1; } 50% { scale: 1.012 1.025; } }
.stage .unit .art img[src*="img/pets/still/"] { transform-origin: 50% 100%; animation: still-breath 2.4s ease-in-out infinite; }

/* 전투에서 펫 고르기는 그림 픽셀로 (battleView.js unitAt): 칸의 투명한 여백을 눌러도 그 펫이 골라지지 않음 (2026-11-08) */

/* 아래 띠 글씨를 또렷하게 (2026-11-08 대표: 잘 안 보이고 필체가 어색함)
   이름은 펫 창 제목과 같은 명조(Noto Serif KR), Lv·HP 숫자는 밝게, HP 줄은 두껍고 테두리 */
.hud-band .band-who b, .hud-band .band-pname b { font-family: "Noto Serif KR", serif; font-weight: 900; font-size: 1.22rem; letter-spacing: .02em; color: #f3e6c4; text-shadow: 0 1px 3px #000; }
.hud-band .lv { color: #e2cf9e !important; font-weight: 700; font-size: .84rem !important; }
.hud-band small { color: #d9c08a !important; font-weight: 800; letter-spacing: .05em; font-size: .72rem; }
.hud-band .tnum, .hud-band .band-hp .tnum { color: #f0e6d0 !important; font-weight: 700; font-size: .88rem !important; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.hud-band .mini-hp { height: 9px !important; border-radius: 5px !important; background: #1b1311 !important; box-shadow: inset 0 0 0 1px rgba(217, 201, 163, .4), 0 1px 2px #000 !important; overflow: hidden; }
.hud-band .mini-hp i { border-radius: 5px; background: linear-gradient(#e2564c, #a3302a 60%, #7e211d) !important; }
.hud-band .band-place { font-family: "Noto Serif KR", serif; font-weight: 700; }
/* 룬 색은 그대로 (1룬 초록, 2룬 보라) */
.hud-band :is(.band-who, .band-pname).rn1 :is(b, .lv) { color: #3cc173 !important; }
.hud-band :is(.band-who, .band-pname).rn2 :is(b, .lv) { color: #a46ae6 !important; }

/* 메뉴 버튼 5개(캐릭터·펫·감정·진형·메뉴)를 오른쪽 위로 (2026-11-08 대표)
   아래 띠는 이름·Lv·HP·장소만 → 장소 이름이 버튼에 가려지지 않는다. 걸을 때도 버튼은 그대로 보인다 */
.band-menu { top: max(10px, env(safe-area-inset-top)); bottom: auto !important; z-index: 4; }
#screen-game.walking > .band-menu { transform: none; opacity: 1; pointer-events: auto; }
.hud-band { padding-right: max(18px, env(safe-area-inset-right)) !important; }
.hud-status { max-width: calc(100% - (5 * 58px + 4 * 6px + 34px)); }
.minimap { display: none; }   /* 아직 비어 있는 지도 자리: 버튼이 쓴다 (지도가 생기면 버튼 아래로) */
@media (max-width: 760px), (max-height: 500px) {
  .hud-status { max-width: calc(100% - (5 * 48px + 4 * 4px + 24px)); }
}
@media (max-width: 520px) { .hud-band .band-place { display: inline-flex; } }
/* 버튼이 빠져 자리가 생겼으니 휴대폰에서도 HP 숫자를 보인다 */
@media (max-width: 900px) and (max-height: 500px) { .hud-band .band-hp .tnum, .hud-band .band-pet .tnum { display: inline; } }

/* 펫 화면 오른쪽 아래 단추(출전·잠금·이름·방생·아이템·뒤로): 휴대폰에서 너무 작아 손가락으로 누르기 어려움 (2026-11-08 대표) */
@media (max-height: 500px) {
  #panel-wrap.full #panel.petfull .fp-foot { gap: 14px; right: max(14px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  #panel-wrap.full #panel.petfull .fp-act { font-size: 13px !important; font-weight: 700; gap: 5px; min-height: 34px !important; }
  #panel-wrap.full #panel.petfull .fp-act i { width: 26px; height: 26px; }
  #panel-wrap.full #panel.petfull .fp-act i .ico { width: 15px; height: 15px; }
}

/* 펫 화면 가운데 양옆 ‹ › : 누르면 옆 펫으로 (2026-11-08 대표) */
#panel-wrap.full #panel.petfull .fp-nav { all: unset; box-sizing: border-box; position: absolute; top: 56%; transform: translateY(-50%); z-index: 3; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font: 400 38px/1 "Noto Serif KR", serif; color: #e3c98d; padding-bottom: 5px;
  background: radial-gradient(rgba(12, 10, 9, .72), rgba(12, 10, 9, .35)); border: 1px solid rgba(227, 201, 141, .55);
  box-shadow: 0 0 0 4px rgba(12, 10, 9, .25), 0 2px 10px rgba(0, 0, 0, .6); transition: transform .12s, border-color .12s, color .12s; }
#panel-wrap.full #panel.petfull .fp-nav.prev { left: calc(50% - 21vw); }
#panel-wrap.full #panel.petfull .fp-nav.next { left: calc(50% + 21vw - 52px); }
#panel-wrap.full #panel.petfull .fp-nav:hover { color: #fff3cf; border-color: #e3c98d; }
#panel-wrap.full #panel.petfull .fp-nav:active { transform: translateY(-50%) scale(.92); }
@media (max-height: 500px) {
  #panel-wrap.full #panel.petfull .fp-nav { width: 42px; height: 42px; font-size: 30px; padding-bottom: 4px; }
  #panel-wrap.full #panel.petfull .fp-nav.next { left: calc(50% + 21vw - 42px); }
}

/* 타이틀 오른쪽 위 전체 화면 단추 (2026-11-09 대표) */
.ld-fs { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font: 700 13px "Noto Sans KR", system-ui, sans-serif; color: #efe6d2; letter-spacing: .04em;
  background: rgba(12, 10, 9, .62); border: 1px solid rgba(227, 201, 141, .55); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.ld-fs .ico { width: 18px; height: 18px; color: #e3c98d; }
.ld-fs:hover { border-color: #e3c98d; color: #fff3cf; }
.ld-fs[hidden] { display: none; }

/* 포획도 다른 줄과 같은 크기로 (잡을 펫이 없으면 흐리게만, 작게·겹치게 하지 않음) (2026-11-09 대표) */
#battle.s33 .x-rows > #c-capture:disabled { transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg)); margin-top: 0; }

/* ── 창 모양 하나로 (2026-11-09 대표): 내 창(캐릭터·펫·소지품·도감·보관소)은 펫 화면(P)처럼 화면 전체, 상점·메뉴·진형·제단 같은 작은 창은 지도 위 그대로 두고 같은 판·글씨 ── */
/* 화면 전체 공통: 먹색 + 오른쪽에 은은한 마름모 무늬 + 가장자리 어둡게, 명조 글씨 */
#panel-wrap.full #panel.u33 { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; overflow: hidden;
  background: radial-gradient(ellipse 40% 55% at 45% 58%, rgba(120, 80, 40, .16), transparent 70%), #0a0908 !important; color: #efe6d2; }
#panel-wrap.full #panel.u33::before { content: "" !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6; background: url(img/ui/lattice.webp) 0 0 / 22vh;
  -webkit-mask-image: linear-gradient(90deg, transparent 58%, #000 100%); mask-image: linear-gradient(90deg, transparent 58%, #000 100%); }
#panel-wrap.full #panel.u33::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 48% 52%, transparent 55%, rgba(0, 0, 0, .7)); z-index: 0; }
#panel.u33, #panel.u33 :is(h3, b, button, span, p, div) { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; }
#panel.u33 :is(.tnum, small, .muted, input) { font-family: system-ui, sans-serif; }
/* 판: 펫 화면 오른쪽 판과 같음 (먹 판 + 가는 금테 두 줄) */
#panel.u33 .u33-panel { background: linear-gradient(rgba(14, 12, 10, .86), rgba(14, 12, 10, .86)), url(img/ui/lattice.webp) 0 0 / 16vh !important; border: 1px solid rgba(217, 201, 163, .28) !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 4px rgba(10, 9, 8, .9), inset 0 0 0 5px rgba(217, 201, 163, .14), 0 0 3vh rgba(0, 0, 0, .8) !important; }
/* 뒤로: 오른쪽 아래 동그라미 아이콘 + 글자 */
#panel.u33 .u33-back { all: unset; box-sizing: border-box; cursor: pointer; position: fixed; right: 3.6vw; bottom: 2.6vh; z-index: 5; display: inline-flex; align-items: center; gap: .7vh; font: 600 1.7vh system-ui, sans-serif; color: #cdbf9f; }
#panel.u33 .u33-back .ico { width: 2.7vh; height: 2.7vh; padding: .5vh; border: 1px solid rgba(239, 230, 210, .5); border-radius: 50%; box-sizing: border-box; }
#panel.u33 .u33-back:hover { color: #efe6d2; }
/* 도감 */
#panel.b33 { --bk-gold: #e9d6a4; }
#panel.b33 .bk { position: absolute; inset: 0; z-index: 1; padding: 3.4vh 1.4vw 7vh 3.6vw; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) 30vw; gap: 2.4vw; }
#panel.b33 .bk-h h3 { font-size: 3vh !important; font-weight: 700 !important; letter-spacing: .1em; color: #d6c290 !important; }
#panel.b33 .bk-h h3::before { content: "◇ "; }
#panel.b33 .bk-h small, #panel.b33 .bk-h small b { font-family: system-ui, sans-serif; color: #b9ab93 !important; }
#panel.b33 .bk-tabs button { border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #a89a80 !important; padding: .6vh 1.4vw !important; border: 0 !important; border-bottom: 2px solid transparent !important; font-size: 1.8vh !important; }
#panel.b33 .bk-tabs button.on { color: #efe6d2 !important; border-bottom-color: #c9a256 !important; }
#panel.b33 .bk-cell { border-radius: 0 !important; background: linear-gradient(180deg, rgba(239, 230, 210, .06), rgba(239, 230, 210, .02)) !important; box-shadow: inset 0 0 0 1px rgba(217, 201, 163, .14) !important; clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 0 100%); }
#panel.b33 .bk-cell.caught { box-shadow: inset 0 0 0 1px rgba(217, 201, 163, .45) !important; }
#panel.b33 .bk-cell.sel { background: linear-gradient(180deg, rgba(201, 162, 86, .4), rgba(201, 162, 86, .1)) !important; box-shadow: inset 0 0 0 2px #c9a256 !important; }
#panel.b33 .bk-cell .no { color: #8f8270 !important; }
#panel.b33 .bk-card { padding: 2.4vh 2vw !important; align-self: start; min-width: 0; max-height: none; overflow: hidden; }
#panel.b33 .bk-card .bk-nm { height: 2.6em; flex-shrink: 0; align-content: center; }
#panel.b33 .bk-hero { background: none !important; border-radius: 0 !important; position: relative; }   /* 펫 창과 같게 (2026-11-09 대표): 뒤에 빛 없이 어두운 바탕 + 검은 그림자 */
#panel.b33 .bk-hero > .ground::after { display: none; }   /* 도감만: 발밑 상아빛 바닥(빛)을 끄고 검은 발밑 그림자만 */
#panel.b33 .bk-hero > img { filter: drop-shadow(0 1.6vh 2.6vh rgba(0, 0, 0, .7)); }
/* 도감 그림: 실제 몸체를 같은 체급 틀에, 발밑을 같은 선에 맞춤 */
#panel.b33 .bk-hero > img[data-bk-src] { position: absolute; inset: auto; left: 50%; bottom: 1vh; transform: translateX(-50%); width: calc(100% * var(--bk-scale)); height: calc((100% - 3vh) * var(--bk-scale)); max-width: none; max-height: none !important; object-fit: contain; object-position: 50% 100%; }
#panel.b33 .bk-cell > img[data-bk-src] { top: auto; bottom: 26px; width: calc(80px * var(--bk-scale)); height: calc(56px * var(--bk-scale)); max-width: calc(100% - 12px); object-position: 50% 100%; }
@media (max-width: 760px) { #panel.b33 .bk-cell > img[data-bk-src] { height: calc(48px * var(--bk-scale)); } }
@media (max-height: 500px) { #panel.b33 .bk-cell > img[data-bk-src] { height: calc(38px * var(--bk-scale)) !important; bottom: 20px; } }
#panel.b33 .bk-nm { color: #efe6d2 !important; justify-content: center; font-weight: 700; letter-spacing: .08em; }
#panel.b33 :is(.bk-sec, .bk-foot) { color: #c79a63 !important; }
#panel.b33 .bk-v { font-family: "Noto Serif KR", serif !important; }
/* 오른쪽 카드를 '뒤로' 위까지 채운다 (2026-11-09 대표: 아래 빈 곳을 버리지 말고 더 써라). 남는 높이는 그림이 받아서 크게 */
@media (min-height: 501px) {
  #panel.b33 .bk-card { align-self: stretch; margin-bottom: 4vh; display: flex; flex-direction: column; gap: 1.6vh; }
  #panel.b33 .bk-hero { flex: 1 1 0; min-height: 22vh; height: auto; position: relative; }
  #panel.b33 .bk-hero img { position: absolute; inset: 2vh 0 1vh; width: 100%; height: calc(100% - 3vh); max-height: none; object-fit: contain; object-position: 50% 100%; }
  #panel.b33 .bk-nm { font-size: 1.5rem; }
  #panel.b33 .bk-sec { font-size: 1.05rem; }
  #panel.b33 .bk-st { font-size: 1.15rem; padding: .4vh 0; }
  #panel.b33 .bk-foot { font-size: .95rem; margin: 0; }
}
@media (max-height: 500px) {
  #panel.b33 .bk-hero { height: 20vh !important; } #panel.b33 .bk-hero img { max-height: 19vh !important; }
  #panel.b33 .bk-card { gap: .6vh !important; padding: 1.6vh 1.6vw !important; font-size: .78rem; }
  #panel.b33 .bk-nm { font-size: 1.05rem !important; } #panel.b33 .bk-st { font-size: .78rem !important; gap: 6px !important; }
  #panel.b33 .bk-cell { height: 64px !important; } #panel.b33 .bk-cell img { height: 38px !important; }
}
/* 보관소 */
#panel.s33 .st { position: absolute; inset: 0; z-index: 1; padding: 3.4vh 3vw 6vh; box-sizing: border-box; width: auto !important; height: auto !important; max-width: none !important; }
#panel.s33 .st-h { font-size: 3vh; color: #d6c290; letter-spacing: .08em; }
#panel.s33 .st-h::before { content: "◇ "; }
#panel.s33 .st-box { border-radius: 0 !important; }
#panel.s33 :is(.st-c, .st-k) { border-radius: 0 !important; }
/* 지도 위 작은 창 (상점·메뉴·진형·제단·병원·포탈 …): 펫 화면 오른쪽 판과 같은 틀, 명조 글씨, ◇ 금빛 제목 */
.panel.stone.p33:not(.u33):not(.fullview) { background: linear-gradient(rgba(14, 12, 10, .94), rgba(14, 12, 10, .94)), url(img/ui/lattice.webp) 0 0 / 16vh !important; border: 1px solid rgba(217, 201, 163, .28) !important; border-radius: 0 !important; filter: none !important;
  box-shadow: inset 0 0 0 4px rgba(10, 9, 8, .9), inset 0 0 0 5px rgba(217, 201, 163, .14), 0 1.4vh 4vh rgba(0, 0, 0, .75) !important; padding: 24px 28px 20px !important; }
.panel.stone.p33:not(.u33):not(.fullview)::before { content: "" !important; position: absolute; left: -1px; top: -1px; inset: auto; width: 14px; height: 14px; border: 1px solid rgba(217, 201, 163, .6); border-right: 0; border-bottom: 0; background: none !important; }
.panel.stone.p33:not(.u33):not(.fullview)::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border: 1px solid rgba(217, 201, 163, .6); border-left: 0; border-top: 0; pointer-events: none; }
.panel.stone.p33:not(.u33):not(.fullview), .panel.stone.p33:not(.u33):not(.fullview) :is(h3, b, button, span, p, div, li) { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; }
.panel.stone.p33:not(.u33):not(.fullview) :is(.tnum, input) { font-family: system-ui, sans-serif; }
.panel.stone.p33:not(.u33):not(.fullview) h3 { color: #d6c290 !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: .1em; font-style: normal !important; transform: none !important; }
.panel.stone.p33:not(.u33):not(.fullview) h3::before { content: "◇ "; }
.panel.stone.p33:not(.u33):not(.fullview) :is(.say, .shop-item, .altar-box) { background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(239, 230, 210, .12) !important; border-radius: 0 !important; box-shadow: none !important; color: #e6dcc6 !important; }
.panel.stone.p33:not(.u33):not(.fullview) .say b { color: #e9cf8f !important; }
@media (max-height: 500px) { .panel.stone.p33:not(.u33):not(.fullview) { padding: 14px 18px 12px !important; } .panel.stone.p33:not(.u33):not(.fullview) h3 { font-size: 1.15rem !important; } }
@media (max-height: 500px) {
  .panel.stone.p33:not(.u33):not(.fullview) :is(.say, .shop-item) { padding: 5px 10px !important; font-size: .78rem; }
  .panel.stone.p33:not(.u33):not(.fullview) .shop-item .row { margin-top: 3px !important; }
  .panel.stone.p33:not(.u33):not(.fullview) .shop-item button { min-height: 26px !important; padding: 0 12px !important; font-size: .78rem; }
  .panel.stone.p33:not(.u33):not(.fullview) > .row button { min-height: 28px !important; }
}

/* ── 캐릭터 창 (C, 2026-11-09 대표): 화면 전체. 왼쪽 주인공 + 오른쪽 장비 6칸(3줄×2칸), 오른쪽에 능력치 판과 가방 판을 위아래로 이어 붙임
   (레벨업 점수가 있어 능력치 판이 길어지면 가방이 그만큼 내려감). 장비 칸 1개 = 가방 칸 2개 + 틈 ── */
#panel.c33 { --gs: 11vh; --bs: 5.2vh; --gp: .6vh; }
#panel.c33 .cv { position: absolute; inset: 0; display: block !important; z-index: 1; }
#panel.c33 .cv-left { position: absolute; left: 3vw; top: 10vh; bottom: 9vh; width: 64vw; display: block !important; }
#panel.c33 .char-doll { position: absolute; inset: 0; display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 1.6vw; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#panel.c33 .doll-fig { height: 100%; display: grid; place-items: end center; background: none !important; border: 0 !important; box-shadow: none !important; }
#panel.c33 .doll-fig img { height: 74vh !important; max-height: none !important; width: auto !important; filter: drop-shadow(0 1.6vh 2.6vh rgba(0, 0, 0, .7)); }
#panel.c33 .c-slots { display: grid; grid-template-columns: repeat(2, var(--gs)); grid-auto-rows: var(--gs); gap: var(--gp); align-content: center; }
#panel.c33 .c-slots .gslot { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: .9vh;
  background: linear-gradient(160deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .025)); border: 1px solid rgba(217, 201, 163, .22);
  box-shadow: inset 0 0 0 3px rgba(10, 9, 8, .55), inset 0 0 0 4px rgba(217, 201, 163, .08); color: #b9ab93; }
#panel.c33 .c-slots .gslot .ico { width: 3.6vh; height: 3.6vh; opacity: .85; }
#panel.c33 .c-slots .gslot small { font-size: 1.45vh; letter-spacing: .06em; font-family: "Noto Serif KR", serif; }
#panel.c33 .c-slots .gslot.has { border-color: rgba(217, 180, 110, .7); color: #e9cf8f; background: linear-gradient(160deg, rgba(201, 162, 86, .28), rgba(201, 162, 86, .06)); }
#panel.c33 .c-slots .gslot.on { border-color: #e3c98d; box-shadow: inset 0 0 0 3px rgba(10, 9, 8, .55), 0 0 0 1px #e3c98d; }
#panel.c33 .c-slots .gslot:hover { border-color: rgba(217, 201, 163, .5); color: #efe6d2; }
#panel.c33 .c-col { position: absolute; right: 1.4vw; top: 7vh; width: 30vw; display: flex; flex-direction: column; gap: 1.6vh; z-index: 2; max-height: calc(100% - 15vh); }
#panel.c33 .c-right { box-sizing: border-box; padding: 2.2vh 2vw 2vh; color: #efe6d2; }
#panel.c33 .c-right .ph-name { justify-content: center; } #panel.c33 .c-right .ph-name b { font-size: 3.6vh; letter-spacing: .1em; color: #efe6d2 !important; }
#panel.c33 .c-right .meter { grid-template-columns: 3.4em 1fr auto !important; }
#panel.c33 .cv-right { display: block !important; }
#panel.c33 .c-right .ptabs { display: flex !important; flex-direction: row !important; gap: .6vw; justify-content: center; margin-top: 1.6vh; }
#panel.c33 .c-right .ptabs button { flex: 1; min-height: 4.4vh !important; }
#panel.c33 .c-right .pstats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1vh; margin-top: 1.4vh; }
#panel.c33 .c-right .pstat { min-height: 0 !important; padding: 1.2vh 1.2vw !important; background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(239, 230, 210, .12) !important; }
#panel.c33 .c-right .pstat span { font-size: 1.7vh; color: #d9cdb5 !important; } #panel.c33 .c-right .pstat b { font-size: 2.6vh; }
#panel.c33 .c-right .pts-box { margin-top: 1.2vh; }
#panel.c33 .c-bag { box-sizing: border-box; padding: 1.8vh 1.6vw; }
#panel.c33 .c-bag .cv-bag { display: block; }
#panel.c33 .c-bag .iv-sec { margin-bottom: .8vh; font-size: 1.8vh; color: #c79a63; }
#panel.c33 .c-bag .bag-grid { display: grid; grid-template-columns: repeat(8, var(--bs)) !important; grid-auto-rows: var(--bs) !important; justify-content: space-between; width: 100% !important; gap: var(--gp) !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
#panel.c33 .c-bag .bag-cell { width: var(--bs) !important; height: var(--bs) !important; aspect-ratio: 1; border-radius: 0 !important;
  background: linear-gradient(160deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .025)) !important; border: 1px solid rgba(217, 201, 163, .22) !important; box-shadow: inset 0 0 0 2px rgba(10, 9, 8, .55) !important; }
#panel.c33 .c-bag .bag-cell.has { border-color: rgba(217, 180, 110, .6) !important; color: #e9cf8f; }
#panel.c33 .c-bag .bag-cell.on { border-color: #e3c98d !important; }
#panel.c33 .c-bag .bag-cell .ico { height: 52% !important; width: auto; }
#panel.c33 .c-bag .iv-info { margin-top: .8vh; background: rgba(0, 0, 0, .4) !important; border-radius: 0 !important; }
#panel.c33 .u33-acts { position: absolute; right: 3.6vw; bottom: 2.6vh; display: flex !important; gap: 2.4vh !important; z-index: 3; background: none !important; }
#panel.c33 .u33-acts .tool { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .7vh !important; font: 600 1.7vh system-ui, sans-serif !important; color: #cdbf9f !important; }
#panel.c33 .u33-acts .ico { width: 2.7vh !important; height: 2.7vh !important; padding: .5vh; border: 1px solid rgba(239, 230, 210, .5); border-radius: 50%; box-sizing: border-box; }
#panel.c33 .u33-acts .tool:hover { color: #efe6d2 !important; }
/* 레벨업 점수가 있을 때: 능력치를 한 줄에 하나씩(이름 · 숫자 · − + +5), 아래에 '남음 · 되돌리기 · 확정' 한 줄. 가방은 그만큼 아래로 */
#panel.c33 .c-right .pstats:has(.pstat.can) { grid-template-columns: 1fr; gap: .6vh; }
#panel.c33 .c-right .pstat.can { display: grid !important; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; padding: .6vh 1vw !important; }
#panel.c33 .c-right .pstat.can b { font-size: 2.2vh; text-align: left; }
#panel.c33 .c-right .pstat .pm { display: flex; gap: .4vw; }
#panel.c33 .c-right .pstat .pm button { min-height: 3.4vh !important; min-width: 3.4vh; padding: 0 .7vw !important; font-size: 1.6vh; }
#panel.c33 .c-right .pts-box { display: flex; flex-wrap: wrap; align-items: center; gap: .6vw; font-size: 1.7vh; }
#panel.c33 .c-right .pts-box button { min-height: 3.6vh !important; padding: 0 1vw !important; font-size: 1.6vh; }
@media (max-height: 500px) {
  #panel.c33 .c-col { top: 3vh; gap: 1vh; max-height: calc(100% - 11vh); }
  #panel.c33 .c-right { padding: 1.4vh 1.6vw 1.2vh; }
  #panel.c33 .c-right .ptabs { margin-top: .8vh; } #panel.c33 .c-right .ptabs button { min-height: 3.6vh !important; }
  #panel.c33 .c-right .pstats { margin-top: .8vh; }
  #panel.c33 .c-right .pstat.can { padding: .3vh .8vw !important; }
  #panel.c33 .c-bag { padding: 1.2vh 1.4vw; }
  #panel.c33:has(.pstat.can) .c-bag .iv-info { display: none; }
}
#panel.c33 .doll-fig { min-width: 0; overflow: visible; }
#panel.c33 .doll-fig img { max-width: 100% !important; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
/* 타이틀 전체 화면 단추: 화면 가운데 조금 위, 2배 크기 + 안내 글 (2026-11-09 대표) */
.ld-fsbox { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5; display: grid; justify-items: center; gap: 10px; pointer-events: none; }
.ld-fsbox[hidden] { display: none; }
.ld-fsbox .ld-fs { position: static; pointer-events: auto; padding: 14px 32px; gap: 12px; font-size: 26px; letter-spacing: .06em; }
.ld-fsbox .ld-fs .ico { width: 34px; height: 34px; }
.ld-fsbox p { margin: 0; font: 600 16px "Noto Serif KR", serif; color: #efe6d2; letter-spacing: .08em; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
@media (max-height: 500px) {
  .ld-fsbox .ld-fs { padding: 10px 24px; font-size: 20px; } .ld-fsbox .ld-fs .ico { width: 26px; height: 26px; } .ld-fsbox p { font-size: 13px; }
}
/* 전체 화면 전에는 타이틀 전체를 어둡게 덮고, 가운데 조금 위에 단추 + 안내 (어디를 눌러도 전체 화면) (2026-11-09 대표: 우리 게임은 전체 화면으로) */
.ld-fsbox { inset: 0; left: 0; top: 0; transform: none; place-content: center; align-content: center; padding-bottom: 12vh; gap: 14px;
  background: radial-gradient(ellipse at 50% 42%, rgba(10, 8, 7, .55), rgba(6, 5, 4, .9) 70%); pointer-events: auto; cursor: pointer; }
.ld-fsbox p { font-size: 18px; }
@media (max-height: 500px) { .ld-fsbox { padding-bottom: 10vh; } .ld-fsbox p { font-size: 14px; } }

/* 레벨업 연출 (2026-11-09): 어두운 먹 띠 위에 펫이 금빛 테두리로 떠오름. 누르면 닫힘 */
#battle .lvup { position: absolute; inset: 0; z-index: 9500; display: grid; place-items: center; cursor: pointer; animation: lvup-fade 2.6s ease forwards; }
#battle .lvup-band { position: absolute; left: 0; right: 0; top: 50%; height: min(64%, 520px); translate: 0 -50%;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(201,150,60,.22), transparent 70%), linear-gradient(180deg, rgba(10,8,6,0), rgba(10,8,6,.9) 14%, rgba(10,8,6,.9) 86%, rgba(10,8,6,0)); }
#battle .lvup-title { position: absolute; top: calc(50% - min(32%, 260px) + 10px); left: 0; right: 0; text-align: center; font: 900 clamp(26px, 5vw, 52px)/1 "Noto Serif KR", serif; letter-spacing: .14em;
  background: linear-gradient(#fff3c4, #e9c979 45%, #a97a2a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgba(233,190,100,.55)); animation: lvup-title .6s cubic-bezier(.2,.9,.3,1.3) both; }
#battle .lvup-cards { position: relative; display: flex; gap: clamp(16px, 5vw, 70px); align-items: flex-end; margin-top: clamp(30px, 6vh, 60px); }
#battle .lvup-card { display: grid; justify-items: center; gap: 4px; animation: lvup-card .5s .12s cubic-bezier(.2,.9,.3,1.2) both; }
#battle .lvup-art { height: min(30vh, 240px); display: grid; place-items: end center; }
#battle .lvup-art img { position: static !important; height: min(30vh, 240px) !important; width: auto !important; max-width: 40vw !important; object-fit: contain; transform: none !important; animation: none !important; filter: drop-shadow(0 0 14px rgba(255,200,110,.75)); }
@media (max-width: 600px) { #battle .lvup-art, #battle .lvup-art img { height: min(22vh, 170px) !important; } #battle .lvup-cards { gap: 12px; } #battle .lvup-st { max-width: 160px; } }
#battle .lvup-name { font: 700 clamp(14px, 1.8vw, 18px)/1.2 "Noto Serif KR", serif; color: #e9dcc0; }
#battle .lvup-lv { display: flex; gap: 8px; align-items: baseline; font: 800 clamp(15px, 2vw, 20px)/1 "Noto Serif KR", serif; color: #b9a98a; }
#battle .lvup-lv i { font-style: normal; color: #a98545; }
#battle .lvup-lv b { color: #f3d38a; font-size: 1.35em; }
#battle .lvup-st { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; max-width: 280px; font-size: clamp(12px, 1.5vw, 14px); color: #cdbf9f; }
#battle .lvup-st b { color: #8fe08a; }
@keyframes lvup-fade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lvup-title { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes lvup-card { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #battle .lvup, #battle .lvup-title, #battle .lvup-card { animation-duration: .01s; } }

/* ── 아이템 화면 (I, 2026-11-09 대표 A안: 33원정대 무기 화면처럼) ── */
#panel.itemfull .iv33 { position: absolute; inset: 0; z-index: 1; color: #efe6d2; }
#panel.itemfull .iv-tabs { position: absolute; left: 3.4vw; top: 3.4vh; display: flex; gap: 1.4vw; align-items: center; z-index: 3; }
#panel.itemfull .iv-tabs b { font-size: 3.2vh; font-weight: 700; letter-spacing: .1em; color: #d6c290; margin-right: 1.4vw; }
#panel.itemfull .iv-tabs button { all: unset; cursor: pointer; font-size: 1.9vh; color: #a89a80; padding: .4vh .2vw; border-bottom: 2px solid transparent; }
#panel.itemfull .iv-tabs button.on { color: #efe6d2; border-color: #c9a256; }
#panel.itemfull .iv-silver { position: absolute; right: 3vw; top: 3.4vh; font-size: 2.6vh; display: flex; align-items: center; gap: .8vh; z-index: 3; }
#panel.itemfull .iv-silver .ico { width: 2.6vh; height: 2.6vh; color: #d0c297; }
#panel.itemfull .iv-silver b { font-family: "Noto Serif KR", serif; }
#panel.itemfull .iv-list { position: absolute; left: 3vw; top: 10vh; bottom: 10vh; width: 25vw; overflow: hidden; z-index: 2; }
#panel.itemfull .iv-sec2 { font-size: 1.7vh; color: #c79a63; margin: 1.6vh 0 .8vh; display: flex; align-items: center; gap: 1vw; }
#panel.itemfull .iv-sec2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217, 201, 163, .4), transparent); }
#panel.itemfull .iv-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 4vh 1fr auto; align-items: center; gap: 1vw; height: 6.2vh; margin-bottom: .9vh; padding: 0 1.4vw 0 .8vw;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); background: linear-gradient(90deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .03) 75%, transparent); }
#panel.itemfull .iv-row:hover { background: linear-gradient(90deg, rgba(239, 230, 210, .16), rgba(239, 230, 210, .05) 75%, transparent); }
#panel.itemfull .iv-row.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .12) 80%, transparent); }
#panel.itemfull .iv-row .ic { width: 4vh; height: 4vh; display: grid; place-items: center; color: #d0c297; }
#panel.itemfull .iv-row .ic .ico { width: 2.8vh; height: 2.8vh; }
#panel.itemfull .iv-row .nm { display: grid; line-height: 1.25; min-width: 0; }
#panel.itemfull .iv-row .nm b { font-size: 2.1vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.itemfull .iv-row .nm small { font-size: 1.4vh; color: #a89a80; }
#panel.itemfull .iv-row .cnt { font: 700 2vh "Noto Serif KR", serif; color: #e9d6a4; }
#panel.itemfull :is(.eqtag, .iv-card .tag) { font: 700 1.3vh system-ui, sans-serif; color: #1a140c; background: linear-gradient(90deg, #c9a256, #f0d48e); padding: .2vh .9vh; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); white-space: nowrap; }
#panel.itemfull .iv-empty { color: #8f8270; font-size: 1.8vh; margin-top: 3vh; }
#panel.itemfull .iv-hero { position: absolute; left: 50%; bottom: 7vh; height: 76vh; transform: translateX(-42%); z-index: 1; pointer-events: none; }
#panel.itemfull .iv-hero img { height: 100%; filter: drop-shadow(0 1.6vh 2.6vh rgba(0, 0, 0, .7)); }
#panel.itemfull .iv-hero::before { content: ""; position: absolute; left: 50%; bottom: -1vh; width: 60%; height: 5vh; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, .85), transparent 70%); }
#panel.itemfull .iv-card { position: absolute; z-index: 3; padding: 1.6vh 1.8vw 1.8vh; min-width: 20vw; box-sizing: border-box;
  background: linear-gradient(rgba(14, 12, 10, .9), rgba(14, 12, 10, .9)), url(img/ui/lattice.webp) 0 0 / 16vh; border: 1px solid rgba(217, 201, 163, .3);
  box-shadow: inset 0 0 0 4px rgba(10, 9, 8, .9), inset 0 0 0 5px rgba(217, 201, 163, .14), 0 0 3vh rgba(0, 0, 0, .8); }
#panel.itemfull .iv-card .tag { position: absolute; left: 1.8vw; top: -1.3vh; }
#panel.itemfull .iv-card .t { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; }
#panel.itemfull .iv-card .t b { font-size: 2.6vh; font-weight: 700; letter-spacing: .06em; }
#panel.itemfull .iv-card .t small { font-size: 1.4vh; color: #a89a80; }
#panel.itemfull .iv-card .k { display: flex; gap: 2.6vw; margin-top: 1vh; }
#panel.itemfull .iv-card .k div { display: grid; justify-items: start; gap: .2vh; }
#panel.itemfull .iv-card .k small { font-size: 1.4vh; color: #cdbf9f; }
#panel.itemfull .iv-card .k strong { font: 700 4.4vh "Noto Serif KR", serif; line-height: 1; }
#panel.itemfull .iv-card.sel { left: 30vw; top: 22vh; }
#panel.itemfull .iv-card.cur { right: 3vw; bottom: 12vh; opacity: .92; }
#panel.itemfull .iv-use { position: absolute; left: 30vw; top: 40vh; z-index: 3; max-width: 40vw; padding: 1.4vh 1.4vw; background: rgba(10, 9, 8, .88); border: 1px solid rgba(217, 201, 163, .25); }
#panel.itemfull .iv-foot { position: absolute; right: 3.6vw; bottom: 2.6vh; display: flex; gap: 2.4vh; z-index: 3; }
#panel.itemfull .iv-act { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .7vh; font: 600 1.8vh system-ui, sans-serif; color: #cdbf9f; }
#panel.itemfull .iv-act i { font-style: normal; width: 2.9vh; height: 2.9vh; border: 1px solid rgba(239, 230, 210, .5); border-radius: 50%; display: grid; place-items: center; }
#panel.itemfull .iv-act i .ico { width: 1.6vh; height: 1.6vh; }
#panel.itemfull .iv-act:hover { color: #efe6d2; }
#panel.itemfull .iv-act:first-child:not([id="i-char"]):not([data-close]) { color: #f0d48e; } #panel.itemfull .iv-act:first-child:not([id="i-char"]):not([data-close]) i { border-color: #e3c98d; }
#panel.itemfull .iv-act:disabled { opacity: .35; cursor: default; }
/* 아이템 화면: 창 단추 공통 무늬(판 그림)를 쓰지 않음 */
#panel-wrap.full #panel.itemfull :is(.iv-row, .iv-tabs button, .iv-act) { min-height: 0 !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; transform: none !important; border-radius: 0 !important; }
#panel-wrap.full #panel.itemfull .iv-tabs button { background: none !important; padding: .4vh .2vw !important; border-bottom: 2px solid transparent !important; color: #a89a80 !important; }
#panel-wrap.full #panel.itemfull .iv-tabs button.on { border-bottom-color: #c9a256 !important; color: #efe6d2 !important; }
#panel-wrap.full #panel.itemfull .iv-act { background: none !important; padding: 0 !important; color: #cdbf9f !important; }
#panel-wrap.full #panel.itemfull .iv-act:first-child:not([id="i-char"]):not([data-close]) { color: #f0d48e !important; }
#panel-wrap.full #panel.itemfull .iv-row { background: linear-gradient(90deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .03) 75%, transparent) !important; padding: 0 1.4vw 0 .8vw !important; color: #efe6d2 !important; }
#panel-wrap.full #panel.itemfull .iv-row.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .12) 80%, transparent) !important; }
/* 덮개 없앰 (2026-11-09 대표): 이어 하기·새로 시작·기록 고르기를 바로 누를 수 있게. 큰 전체 화면 단추는 오른쪽 그림 칸 가운데 조금 위에만 */
.ld-fsbox { inset: auto; left: 73%; top: 40%; transform: translate(-50%, -50%); background: none; padding: 0; pointer-events: none; cursor: default; }
.ld-fsbox .ld-fs { pointer-events: auto; }

/* 예비 펫 (2026-11-09): 설 자리 고르기 상자, 나올 때 반짝 */
.reserve-pick { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9000; display: grid; gap: 8px; justify-items: center;
  padding: 16px 20px; background: rgba(12, 10, 9, .92); border: 1px solid rgba(227, 201, 141, .6); box-shadow: 0 8px 30px rgba(0, 0, 0, .7); color: #efe6d2; }
.reserve-pick b { font: 700 18px "Noto Serif KR", serif; color: #f3e6c4; } .reserve-pick small { color: #c9b98f; font-size: 13px; }
.reserve-pick .rp-row { display: grid; grid-template-columns: 34px repeat(3, 84px); gap: 6px; align-items: center; }
.reserve-pick .rp-row i { font-style: normal; font-size: 12px; color: #b9ab8f; }
.reserve-pick .rp-row button, .reserve-pick .rp-row span { height: 40px; display: grid; place-items: center; font-size: 13px; border-radius: 6px; }
.reserve-pick .rp-row button { all: unset; box-sizing: border-box; height: 40px; display: grid; place-items: center; cursor: pointer; border: 1px dashed rgba(227, 201, 141, .7); color: #e3c98d; border-radius: 6px; font-size: 13px; }
.reserve-pick .rp-row button.def, .reserve-pick .rp-row button:hover { background: rgba(227, 201, 141, .18); border-style: solid; }
.reserve-pick .rp-row span { background: rgba(255, 255, 255, .06); color: #8f8471; }
.unit.reserve-in .art { animation: reserveIn .8s ease-out; }
@keyframes reserveIn { 0% { opacity: 0; transform: translateY(-30px) scale(.9); filter: brightness(2); } 100% { opacity: 1; transform: none; filter: none; } }

/* 진형 창: 데려가는 펫 줄 (2026-11-09) */
.fm-pets-h { margin-top: 6px; font: 700 14px "Noto Serif KR", serif; color: #e3c98d; } .fm-pets-h small { font: 500 11px system-ui, sans-serif; color: #b9ab8f; margin-left: 6px; }
.fm-pets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fm-pet { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 4px 2px 6px;
  border: 1px solid rgba(239, 230, 210, .18); border-radius: 6px; background: rgba(255, 255, 255, .03); min-width: 0; }
.fm-pet img { width: 100%; height: 44px; object-fit: contain; }
.fm-pet span { font-size: 11px; color: #efe6d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .fm-pet small { color: #b9ab8f; }
.fm-pet b { position: absolute; top: 2px; left: 2px; font-size: 10px; padding: 1px 5px; border-radius: 3px; background: #2c2620; color: #d9c08a; }
.fm-pet.out { border-color: #e3c98d; background: rgba(227, 201, 141, .12); } .fm-pet.out b { background: #e3c98d; color: #1a1410; }
.fm-pet.res { border-color: rgba(140, 180, 230, .7); } .fm-pet.res b { background: #3a5b80; color: #e6f0ff; }
.fm-pet:disabled { opacity: .45; cursor: default; }
.fm-slot .fm-no { position: absolute; top: 3px; left: 5px; font: 700 11px system-ui; color: #e3c98d; font-style: normal; }
.fm-slot { position: relative; }
/* 진형 창 휴대폰: 데려가는 펫 줄이 생겨서 칸 높이를 더 줄임 (닫기·진형 확정이 화면 안에, 2026-11-09) */
@media (max-height: 500px) {
  #panel .fm-slot { height: clamp(44px, calc((100dvh - 262px) / 2), 110px); }
  .fm-pets-h { margin-top: 2px; font-size: 12px; } .fm-pets-h small { font-size: 10px; }
  .fm-pet { padding: 2px 2px 3px; } .fm-pet img { height: 30px; } .fm-pet span { font-size: 10px; }
}

/* 우리 편 4명 이상(6:6): 작은 카드 3장씩 2줄로 오른쪽 아래에 모아, 전장을 덜 가리게 (2026-11-09) */
#battle.s33 .x-party.many { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 6px; align-items: end; }
#battle.s33 .x-party.many .x-card { width: 124px; padding: 4px 7px 5px 42px; font-size: .74rem; }
#battle.s33 .x-party.many .x-face { width: 36px; height: 36px; left: 3px; bottom: 3px; box-shadow: 0 0 0 2px #c9913f; }
#battle.s33 .x-party.many .x-lv { font-size: .7rem; }
#battle.s33 .x-party.many .x-hp { height: 5px; margin-top: 2px; }
#battle.s33 .x-party.many .x-hpn { font-size: .7rem; line-height: 1.1; }
#battle.s33 .x-party.many .x-card.now { transform: translateY(-3px); }
@media (max-height: 500px) {
  #battle.s33 .x-party.many .x-card { width: 104px; padding: 3px 6px 4px 34px; font-size: .66rem; }
  #battle.s33 .x-party.many .x-face { width: 28px; height: 28px; }
  #battle.s33 .x-party.many .x-hpn { font-size: .62rem; }
}

/* ── 오른쪽 아래 행동 단추 통일 (2026-11-09 대표: 33원정대처럼 크고 멋지게) ──────────────
   펫 화면(.fp-act)·아이템 화면(.iv-act)·캐릭터 화면(.u33-acts .tool) 모두 같은 모양:
   먹 붓 띠 위에 육각 먹 판(plate.webp), 왼쪽 금테 동그라미 아이콘, 명조 글씨. 첫 단추(사용·출전 등 주 행동)는 금빛 */
#panel-wrap.full #panel :is(.fp-foot, .iv-foot, .u33-acts) {
  right: 2.2vw !important; bottom: 2.2vh !important; gap: 10px !important; align-items: center; padding: 14px 26px 14px 40px !important;
  background: url(img/ui/hud_strip.webp) center / 100% 100% no-repeat !important; }
#panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool) {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px !important;
  height: 54px; min-height: 54px !important; padding: 0 30px 0 22px !important; transform: none !important;
  background: url(img/ui/plate.webp) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important;
  font: 700 20px "Noto Serif KR", serif !important; letter-spacing: .06em; color: #efe6d2 !important; text-shadow: 0 1px 3px #000 !important; white-space: nowrap;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); transition: filter .15s, color .15s, transform .12s; }
#panel-wrap.full #panel :is(.fp-act, .iv-act) i,
#panel-wrap.full #panel .u33-acts .tool .ico {
  width: 32px !important; height: 32px !important; flex: none; padding: 0 !important; box-sizing: border-box; display: grid; place-items: center; font-style: normal;
  border: 1.5px solid #c9ab6a !important; border-radius: 50%; background: radial-gradient(#2a221b, #120e0b) !important; color: #e3c98d;
  box-shadow: 0 0 0 3px rgba(12, 10, 9, .6), inset 0 0 6px rgba(227, 201, 141, .25); }
#panel-wrap.full #panel .u33-acts .tool .ico { padding: 6px !important; }
#panel-wrap.full #panel :is(.fp-act, .iv-act) i .ico { width: 17px !important; height: 17px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
#panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool) span { font: inherit !important; color: inherit !important; }
/* 마우스를 올리면 금빛으로 */
#panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool):hover:not(:disabled) { color: #ffe9b0 !important; filter: drop-shadow(0 0 10px rgba(227, 190, 110, .55)) drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
#panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool):active:not(:disabled) { transform: translateY(2px) !important; }
/* 주 행동(첫 단추)·켜진 단추: 보랏빛 먹 판(plate_sel) + 금빛 글씨 */
#panel-wrap.full #panel .iv-foot > .iv-act:first-child:not(#i-char):not([data-close]),
#panel-wrap.full #panel .fp-act.on,
#panel-wrap.full #panel .fp-foot > .fp-act:first-child:not(.on) {
  background-image: url(img/ui/plate_sel.webp) !important; color: #f6dc9a !important; }
#panel-wrap.full #panel :is(.iv-foot > .iv-act:first-child:not(#i-char):not([data-close]), .fp-act.on, .fp-foot > .fp-act:first-child) i { border-color: #f0d48e !important; box-shadow: 0 0 10px rgba(240, 212, 142, .55), inset 0 0 6px rgba(240, 212, 142, .35) !important; }
#panel-wrap.full #panel .fp-act.warn { color: #ff9b78 !important; }
#panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool):disabled { opacity: .38; cursor: default; filter: grayscale(.6); }
/* 닫기·뒤로는 조금 작게 */
#panel-wrap.full #panel :is(.fp-act[data-close], .iv-act[data-close], .u33-acts .tool[data-close]) { padding: 0 24px 0 18px !important; font-size: 18px !important; }
/* 휴대폰(가로, 낮은 화면) */
@media (max-height: 500px) {
  #panel-wrap.full #panel :is(.fp-foot, .iv-foot, .u33-acts) { right: max(8px, env(safe-area-inset-right)) !important; bottom: max(4px, env(safe-area-inset-bottom)) !important; gap: 5px !important; padding: 8px 12px 8px 22px !important; }
  #panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool) { height: 40px; min-height: 40px !important; padding: 0 18px 0 13px !important; gap: 6px !important; font-size: 15px !important; }
  #panel-wrap.full #panel :is(.fp-act, .iv-act) i, #panel-wrap.full #panel .u33-acts .tool .ico { width: 25px !important; height: 25px !important; }
  #panel-wrap.full #panel .u33-acts .tool .ico { padding: 4px !important; }
  #panel-wrap.full #panel :is(.fp-act, .iv-act) i .ico { width: 13px !important; height: 13px !important; }
  #panel-wrap.full #panel :is(.fp-act[data-close], .iv-act[data-close], .u33-acts .tool[data-close]) { padding: 0 14px 0 11px !important; font-size: 14px !important; }
}
/* 펫 화면: 커진 오른쪽 아래 단추 줄에 발이 가리지 않게 펫을 조금 위로 (2026-11-09 대표) */
#panel-wrap.full #panel.petfull .fp-car { bottom: max(9vh, 100px); }
@media (max-height: 500px) { #panel-wrap.full #panel.petfull .fp-car { bottom: 62px; } }

/* ── 모든 창의 선택 단추를 크게, 33원정대식으로 (2026-11-09 대표 "작아, 다 보고 고쳐") ─────────────
   1) 화면 전체 창의 '뒤로'(보관소·펫 도감) = 펫 화면 오른쪽 아래 단추와 같은 육각 먹 판
   2) 보관소 아래 단추(맡기기·자세히·잠금·방생), 펫 목록 단추(출전·자세히·잠금·방생), 캐릭터 탭(능력치·탑승)
   3) 일반 창(상점·제단·메뉴·포탈·에이르의 집·진형·퀘스트·처음 시작) 단추 = 조금 더 크게 + 명조 */
#panel.u33 .u33-back {
  all: unset; box-sizing: border-box; cursor: pointer; position: fixed; right: 2.2vw; bottom: 2.2vh; z-index: 6;
  display: inline-flex !important; align-items: center; gap: 10px; height: 54px; padding: 0 30px 0 20px;
  background: url(img/ui/plate.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
  font: 700 19px "Noto Serif KR", serif !important; letter-spacing: .06em; color: #efe6d2 !important; text-shadow: 0 1px 3px #000; }
#panel.u33 .u33-back .ico { width: 32px !important; height: 32px !important; box-sizing: border-box; padding: 7px; border: 1.5px solid #c9ab6a; border-radius: 50%;
  background: radial-gradient(#2a221b, #120e0b); color: #e3c98d; box-shadow: 0 0 0 3px rgba(12, 10, 9, .6); }
#panel.u33 .u33-back:hover { color: #ffe9b0 !important; filter: drop-shadow(0 0 10px rgba(227, 190, 110, .55)) drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }

#panel .st-acts button, #panel .pet-act button:not(.pr-art), #panel .ptabs button {
  min-height: 42px !important; padding: 0 16px !important; font: 700 15px "Noto Serif KR", serif !important; letter-spacing: .04em;
  background: url(img/ui/plate.webp) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; color: #efe6d2 !important; text-shadow: 0 1px 2px #000 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; }
#panel .st-acts button .ico, #panel .st-acts button svg, #panel .pet-act button .ico { width: 18px !important; height: 18px !important; color: #e3c98d; }
#panel .st-acts button.on, #panel .pet-act button.on, #panel .ptabs button[aria-selected="true"], #panel .st-acts button:first-child:not(:disabled) {
  background-image: url(img/ui/plate_sel.webp) !important; color: #f6dc9a !important; }
#panel .st-acts .warn, #panel .pet-act .warn { color: #ff9b78 !important; }
#panel :is(.st-acts, .pet-act, .ptabs) button:hover:not(:disabled) { color: #ffe9b0 !important; filter: drop-shadow(0 0 8px rgba(227, 190, 110, .5)); }
#panel :is(.st-acts, .pet-act, .ptabs) button:disabled { opacity: .38; }

#panel.p33 :is(.row, .foot33) > button, #panel.p33 .opts button, #panel.p33 > button, #panel.p33 .altar-box > button, #panel.p33 .menu-list button, #screen-create .row button {
  min-height: 46px; font: 700 17px "Noto Serif KR", serif !important; letter-spacing: .05em; }
@media (max-height: 500px) {
  #panel.u33 .u33-back { right: max(8px, env(safe-area-inset-right)); bottom: max(4px, env(safe-area-inset-bottom)); height: 40px; padding: 0 18px 0 12px; font-size: 15px !important; }
  #panel.u33 .u33-back .ico { width: 25px !important; height: 25px !important; padding: 5px; }
  #panel .st-acts button, #panel .pet-act button:not(.pr-art), #panel .ptabs button { min-height: 34px !important; padding: 0 10px !important; font-size: 13px !important; }
  #panel.p33 :is(.row, .foot33) > button, #panel.p33 .opts button, #panel.p33 > button, #panel.p33 .altar-box > button, #panel.p33 .menu-list button, #screen-create .row button { min-height: 38px; font-size: 14px !important; }
}
/* 상점: 휴대폰 가로에서 스크롤 없이 (2026-11-09 검수: 나가기가 화면 밖으로 밀려 있었음) → 넓게, 물건을 2열로 */
@media (max-height: 500px) {
  #panel.shopview { width: min(96vw, 820px) !important; max-width: none !important; max-height: calc(100dvh - 12px) !important; overflow: hidden !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  #panel.shopview h3 { margin: 0; font-size: 1rem; }
  #panel.shopview .say { margin: 2px 0; padding: 4px 10px; font-size: 12px; }
  #panel.shopview .shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
  #panel.shopview .shop-item { margin: 0; padding: 4px 8px; font-size: 12px; }
  #panel.shopview .shop-item .row { margin-top: 2px !important; gap: 4px; }
  #panel.shopview .shop-item button { min-height: 30px !important; font-size: 12px !important; padding: 0 10px; }
  #panel.shopview > .row > button { min-height: 34px; }
}
/* 좁은 화면(세로 휴대폰 등): 단추 줄이 화면 밖으로 나가지 않게 두 줄로 */
@media (max-width: 900px) {
  #panel-wrap.full #panel :is(.fp-foot, .iv-foot, .u33-acts) { left: 8px !important; right: 8px !important; flex-wrap: wrap !important; justify-content: flex-end; padding: 8px 10px !important; gap: 5px !important; background-size: 100% 100% !important; }
  #panel-wrap.full #panel :is(.fp-act, .iv-act, .u33-acts .tool) { height: 40px; min-height: 40px !important; padding: 0 16px 0 12px !important; gap: 6px !important; font-size: 15px !important; }
  #panel-wrap.full #panel :is(.fp-act, .iv-act) i, #panel-wrap.full #panel .u33-acts .tool .ico { width: 25px !important; height: 25px !important; }
}
/* 진형 창 크게·스크롤 없이 + 같은 열(1·4, 2·5, 3·6)을 잇는 연한 점선 (2026-11-09 대표) */
.panel.stone.p33.fm33 { width: min(760px, 100%); overflow: hidden !important; --fmh: clamp(96px, calc((100dvh - 400px) / 2), 150px); --fmc: 34px; }
.panel.stone.p33.fm33 .fm-field { position: relative; display: grid; gap: 6px; }
.panel.stone.p33.fm33 .fm-slot { height: var(--fmh); }
.panel.stone.p33.fm33 .fm-slot img, .panel.stone.p33.fm33 .fm-slot canvas { max-width: 96%; max-height: calc(var(--fmh) - 40px); }
.panel.stone.p33.fm33 .fm-slot span { font-size: 1.1rem; }
.panel.stone.p33.fm33 .fm-slot .fm-no { top: 6px; left: 10px; font-size: 13px; }
.fm-cols { position: absolute; left: 36px; right: 0; top: 6px; bottom: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; pointer-events: none; }   /* 열(1·4 | 2·5 | 3·6) 사이에 연한 실선 2줄 (대표) */
.fm-cols i { border-right: 1px solid rgba(217, 201, 163, .22); margin-right: -3px; } .fm-cols i:last-child { border-right: 0; }
.panel.stone.p33.fm33 .fm-pets-h { font-size: 15px; } .panel.stone.p33.fm33 .fm-pets-h small { font-size: 12px; }
.panel.stone.p33.fm33 .fm-pet img { height: 58px; } .panel.stone.p33.fm33 .fm-pet span { font-size: 12.5px; }
@media (max-height: 500px) {
  .panel.stone.p33.fm33 { --fmh: clamp(56px, calc((100dvh - 228px) / 2), 110px); --fmc: 27px; }
  #panel.fm33 .fm-slot { height: var(--fmh); grid-template-rows: none; place-items: end center; overflow: visible; }
  #panel.fm33 .fm-slot img, #panel.fm33 .fm-slot canvas, #panel.fm33 .fm-slot img.fm-art { width: auto; height: auto; max-width: 96%; max-height: calc(var(--fmh) - 26px); }
  .panel.stone.p33.fm33 .fm-slot span { font-size: .9rem; }
  .panel.stone.p33.fm33 .fm-pet img { height: 32px; } .panel.stone.p33.fm33 .fm-pet span { font-size: 10px; }
  .panel.stone.p33.fm33 .fm-pets-h { font-size: 12px; } .panel.stone.p33.fm33 .fm-pets-h small { font-size: 10px; }
}
.panel.stone.p33.fm33 .foot33 .fm-pets-h { margin: 0; align-self: center; }   /* 데려가는 펫 안내: 닫기·진형 확정 줄 왼쪽 (2026-11-09 대표) */
/* 데려가는 펫 육각 칸을 위아래로 더 길게 (2026-11-09 대표) */
.panel.stone.p33.fm33 .fm-pet { padding: 14px 2px 16px; } .panel.stone.p33.fm33 .fm-pet img { height: 64px; }
@media (max-height: 500px) { .panel.stone.p33.fm33 .fm-pet { padding: 9px 2px 10px; } .panel.stone.p33.fm33 .fm-pet img { height: 38px; } }

/* ── 스톤에이지식 8:8 (2026-11-09 대표 확정, 기준 화면 art/look_test/lay_SA16P_pc.png) ──
   그림은 원래 크기·발 기준: 칸 너비 = 그림 크기(--tgt), 그림은 battleView.js fitFoot가 발을 칸 아래 가운데에 맞춤 */
#battle.sa8 .stage .slot, #battle.sa8 .stage .slot:has(.boss) { width: var(--tgt); }
#battle.sa8 .stage .unit .art { aspect-ratio: 1 / 1; overflow: visible; position: relative; }
#battle.sa8 .stage .unit .art > img:not(.rider) { position: absolute; max-width: none; max-height: none; object-fit: fill; }
#battle.sa8 .stage .unit.chief .art > img, #battle.sa8 .stage .unit.boss .art > img, #battle.sa8 .unit.chief .art > img, #battle.sa8 .unit.boss .art > img { transform: none; }
#battle.sa8 .stage .unit.mine .art > img[data-dir="NE"] { transform: none; }
#battle.sa8 .stage .unit .foot { left: 22%; right: 22%; height: 12%; bottom: -4%; }
/* 순서 줄: 아래로 갈수록 흐리게 (시안과 같음) */
#battle.sa8 .b-order i.o33:nth-child(-n+4) { opacity: 1; }
#battle.sa8 .b-order i.o33:nth-child(n+5) { opacity: .6; }
#battle.sa8 .b-order i.o33:nth-child(n+7) { opacity: .4; }
#battle.sa8 .b-order i.o33:nth-child(n+9) { opacity: .25; }
#battle.sa8 .b-order i.o33:nth-child(n+11) { opacity: .15; }

/* ── 출전 표시 (2026-11-09 대표): 능력치 판 아래 '출전' 깃발 + 위 펫 칸 아래 금색 띠. 자리는 main.js placeOutFlag ── */
#panel.petfull .fp-tbn { position: absolute; z-index: 6; transform: translateX(-50%); padding: .25vh 1.4vh .45vh; font: 800 max(10px, 1.7vh) "Noto Serif KR", serif; color: #2a1c0c; background: linear-gradient(#f3d38a, #c9913f); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); white-space: nowrap; pointer-events: none; }
#panel.petfull .fp-out { position: absolute; z-index: 6; pointer-events: none; width: var(--w); transform: translateX(-50%); }
#panel.petfull .fp-out-rod { position: relative; height: calc(var(--w) * .09); margin: 0 calc(var(--w) * -.18); border-radius: 99px; background: linear-gradient(#f3d38a, #a8691b); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#panel.petfull .fp-out-rod::before, #panel.petfull .fp-out-rod::after { content: ""; position: absolute; top: 50%; width: calc(var(--w) * .17); height: calc(var(--w) * .17); border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 35%, #fff0c4, #c9913f 60%, #7a4a14); }
#panel.petfull .fp-out-rod::before { left: calc(var(--w) * -.1); }
#panel.petfull .fp-out-rod::after { right: calc(var(--w) * -.1); }
#panel.petfull .fp-out-cord { position: absolute; top: calc(var(--w) * -.32); width: 1.5px; height: calc(var(--w) * .36); background: #c9913f; }
#panel.petfull .fp-out-cord.l { left: 12%; }
#panel.petfull .fp-out-cord.r { right: 12%; }
#panel.petfull .fp-out-body { position: relative; height: var(--h); margin-top: -1px; box-sizing: border-box; background: linear-gradient(#2c1c11, #140c07);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--w) * .08); padding-bottom: calc(var(--h) * .15); }
#panel.petfull .fp-out-body::before { content: ""; position: absolute; inset: 0; background: #c9913f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%, 0 0, 6% 0, 6% 91%, 50% 79.5%, 94% 91%, 94% 0, 6% 0); }
#panel.petfull .fp-out-body i { font-style: normal; color: #e3c98d; font-size: calc(var(--w) * .24); line-height: 1; }
#panel.petfull .fp-out-body b { font: 900 calc(var(--w) * .34) / 1.08 "Noto Serif KR", serif; color: #f3d38a; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .04em; text-shadow: 0 0 8px rgba(255, 190, 80, .45); }
#panel.petfull .fp-out.wide .fp-out-cord { display: none; }
#panel.petfull .fp-out.wide .fp-out-rod { height: 4px; margin: 0 -8px; }
#panel.petfull .fp-out.wide .fp-out-rod::before, #panel.petfull .fp-out.wide .fp-out-rod::after { width: 9px; height: 9px; }
#panel.petfull .fp-out.wide .fp-out-rod::before { left: -4px; }
#panel.petfull .fp-out.wide .fp-out-rod::after { right: -4px; }
#panel.petfull .fp-out.wide .fp-out-body { flex-direction: row; gap: calc(var(--h) * .12); padding-bottom: calc(var(--h) * .16); }
#panel.petfull .fp-out.wide .fp-out-body b { writing-mode: horizontal-tb; font-size: calc(var(--h) * .42); letter-spacing: .12em; }
#panel.petfull .fp-out.wide .fp-out-body i { font-size: calc(var(--h) * .32); }

/* ── 캐릭터 창 = 캐릭터 + 소지품 하나로 (2026-11-09 대표) ─────────────────────
   왼쪽: 소지품(장비/소모품) 목록 · 가운데: 주인공 크게 + 장비 6칸 · 오른쪽: 이름·EXP/HP·능력치/탑승
   고른 물건 카드는 주인공 옆 위, 같은 자리에 낀 장비(비교)는 그 아래. 오른쪽 아래: 장착·빼기·사용 / 펫 창 / 진형 / 닫기 */
#panel.cvinv .iv-tabs { left: 2.6vw; top: 3.4vh; }
#panel.cvinv .iv-tabs .iv-silver { position: static; margin-left: 1.2vw; font-size: 2.2vh; display: inline-flex; align-items: center; gap: .6vh; color: #e9d6a4; }
#panel.cvinv .iv-tabs .iv-silver .ico { width: 2.2vh; height: 2.2vh; }
#panel.cvinv .iv-list { left: 2.4vw; top: 9.6vh; bottom: 13vh; width: 23vw; }
#panel.cvinv .cv-left { left: 23vw; width: 46vw; top: 8vh; bottom: 11vh; }
#panel.cvinv .doll-fig img { height: 72vh !important; }
#panel.cvinv .iv-card.sel { left: 26.5vw; top: 9vh; min-width: 17vw; }
#panel.cvinv .iv-card.cur { left: 26.5vw; right: auto; top: 27vh; bottom: auto; min-width: 17vw; }
#panel.cvinv .iv-use { left: 26.5vw; top: 26vh; }
#panel.cvinv .c-col { width: 29vw; }
@media (max-height: 500px) {
  #panel.cvinv .iv-tabs { left: 2vw; top: 2vh; } #panel.cvinv .iv-tabs b { font-size: 2.8vh; }
  #panel.cvinv .iv-list { top: 9vh; bottom: 15vh; width: 24vw; }
  #panel.cvinv .iv-row { height: 7.4vh; }
  #panel.cvinv .cv-left { left: 22vw; width: 46vw; bottom: 14vh; }
  #panel.cvinv .doll-fig img { height: 66vh !important; }
  #panel.cvinv .iv-card.sel, #panel.cvinv .iv-card.cur, #panel.cvinv .iv-use { left: 25vw; min-width: 15vw; }
}

/* 캐릭터 창: 펫 창·진형은 주 행동이 아니므로 금빛 강조 안 함, 휴대폰 목록 글씨 조금 크게 */
#panel-wrap.full #panel.cvinv .iv-foot > :is(#c-pet, #c-form) { background-image: url(img/ui/plate.webp) !important; color: #efe6d2 !important; }
#panel-wrap.full #panel.cvinv .iv-foot > :is(#c-pet, #c-form) i { border-color: #c9ab6a !important; box-shadow: 0 0 0 3px rgba(12, 10, 9, .6), inset 0 0 6px rgba(227, 201, 141, .25) !important; }
@media (max-height: 500px) { #panel.cvinv .iv-row .nm b { font-size: 13px; } #panel.cvinv .iv-row .nm small { font-size: 10px; } #panel.cvinv .iv-sec2 { font-size: 11px; } }

/* 캐릭터 창 장비 6칸: 조금 크게, 주인공 오른쪽 위로 (2026-11-09 대표) */
#panel.cvinv { --gs: 13.6vh; --gp: 1vh; }
#panel.cvinv .char-doll { align-items: start; }
#panel.cvinv .c-slots { align-self: start; margin-top: 3vh; margin-left: -3.5vw; }
#panel.cvinv .c-slots .gslot .ico { width: 4.4vh; height: 4.4vh; }
#panel.cvinv .c-slots .gslot small { font-size: 1.7vh; }
@media (max-height: 500px) {
  #panel.cvinv { --gs: 14.5vh; --gp: 1.2vh; }
  #panel.cvinv .c-slots { margin-top: 2vh; margin-left: -3vw; }
  #panel.cvinv .c-slots .gslot .ico { width: 5vh; height: 5vh; }
}

/* 펫 창 단추는 주 행동이 아니므로 금빛 강조 없이 (우선순위를 확실히) */
#panel-wrap.full #panel.cvinv .iv-foot > #c-pet:not(#x1):not(#x2) { background-image: url(img/ui/plate.webp) !important; color: #efe6d2 !important; }
#panel-wrap.full #panel.cvinv .iv-foot > #c-pet:not(#x1):not(#x2) i { border-color: #c9ab6a !important; box-shadow: 0 0 0 3px rgba(12, 10, 9, .6), inset 0 0 6px rgba(227, 201, 141, .25) !important; }

/* 오른쪽 위 단추 5개: 33원정대 느낌의 마름모 금속 단추 그림 (2026-11-09 대표, 나노바나나 1K, 원본 art/ui/hud_2026-11-09/)
   그림이 단추 전체, 글씨는 아래에 명조로. 크기는 예전보다 1.3배쯤 */
#band-menu { gap: 0; }
#band-menu .stone-ico { width: 80px; height: 104px; padding: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; }
#band-menu .stone-ico::before { content: ""; display: block; width: 94px; height: 94px; margin: -4px -7px 0; flex: none; background: var(--hud-img) center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); transition: transform .12s, filter .12s; }
#band-menu .stone-ico .ico { display: none; }
#band-menu .stone-ico span { margin-top: -12px; font: 700 14px "Noto Serif KR", serif; color: #efe6d2; letter-spacing: .04em; text-shadow: 0 1px 3px #000, 0 0 6px #000, 0 0 2px #000; }
#band-menu .stone-ico:hover:not(:disabled)::before { filter: drop-shadow(0 0 8px rgba(255, 200, 100, .55)) brightness(1.12); }
#band-menu .stone-ico:active:not(:disabled) { transform: none; }
#band-menu .stone-ico:active:not(:disabled)::before { transform: translateY(2px) scale(.97); }
#band-menu .stone-ico .dot { top: 6px; right: 8px; }
#hud-char-ico { --hud-img: url(img/ui/hud/char.webp); }
#hud-pet { --hud-img: url(img/ui/hud/pet.webp); }
#hud-emote { --hud-img: url(img/ui/hud/emote.webp); }
#hud-form { --hud-img: url(img/ui/hud/form.webp); }
#hud-menu { --hud-img: url(img/ui/hud/menu.webp); }
.hud-status { max-width: calc(100% - (5 * 80px + 34px)); }
@media (max-width: 760px), (max-height: 500px) {
  #band-menu .stone-ico { width: 60px; height: 78px; }
  #band-menu .stone-ico::before { width: 72px; height: 72px; margin: -4px -6px 0; }
  #band-menu .stone-ico span { margin-top: -10px; font-size: 11px; }
  #band-menu .stone-ico .dot { top: 4px; right: 4px; }
  .hud-status { max-width: calc(100% - (5 * 60px + 24px)); }
}

/* 캐릭터 창 왼쪽: 장착 중 6자리 + 가방 (2026-11-09) */
#panel.cvinv .iv-list { overflow: hidden; }
#panel.cvinv .iv-row { height: 5.6vh; margin-bottom: .6vh; }
#panel.cvinv .iv-row.empty { opacity: .5; cursor: default; } #panel.cvinv .iv-row.empty .nm b { font-weight: 500; color: #a89a80; }
@media (max-height: 500px) { #panel.cvinv .iv-row { height: 6.6vh; margin-bottom: .5vh; } }

/* 가방 넘기기 ‹ 1/2 › */
#panel.cvinv .iv-sec2 .iv-pg { order: 2; display: inline-flex; align-items: center; gap: .6vw; margin-left: auto; }
#panel.cvinv .iv-sec2::after { order: 1; }
#panel.cvinv .iv-pg button { all: unset; cursor: pointer; width: 3vh; height: 3vh; display: grid; place-items: center; border: 1px solid rgba(201, 171, 106, .6); border-radius: 50%; color: #e3c98d; font: 700 2vh "Noto Serif KR", serif; }
#panel.cvinv .iv-pg button:disabled { opacity: .3; cursor: default; }
#panel.cvinv .iv-pg small { color: #cdbf9f; font-size: 1.5vh; }
/* 휴대폰: 장착 중·가방 칸을 2열로 (스크롤 없이) */
@media (max-height: 500px) {
  #panel.cvinv .iv-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; align-content: start; }
  #panel.cvinv .iv-list .iv-sec2 { grid-column: 1 / -1; margin: 4px 0 2px; }
  #panel.cvinv .iv-list .iv-row { height: 30px; margin-bottom: 3px; grid-template-columns: 18px 1fr auto; gap: 4px; padding: 0 4px !important; }
  #panel.cvinv .iv-list .iv-row .nm small { display: none; }
  #panel.cvinv .iv-list .iv-row .nm b { font-size: 11.5px; }
  #panel.cvinv .iv-list .iv-row .ic { width: 18px; height: 18px; } #panel.cvinv .iv-list .iv-row .ic .ico { width: 14px; height: 14px; }
  #panel.cvinv .iv-list .eqtag { display: none; }
  #panel.cvinv .iv-pg button { width: 18px; height: 18px; font-size: 13px; } #panel.cvinv .iv-pg small { font-size: 10px; }
}

@media (max-height: 500px) { #panel.cvinv .iv-list .iv-row[data-item]:not([data-item^="eq:"]):not([data-item^="gear:"]) { grid-column: 1 / -1; } }   /* 소모품은 한 줄 가득 (이름이 잘리지 않게) */

/* 가방 = 오른쪽 아래 판 (능력치 판 아래, 2026-11-09 대표). 2열 */
#panel.cvinv .c-bagx { box-sizing: border-box; padding: 1.2vh 1.2vw 1.4vh; display: grid; grid-template-columns: 1fr 1fr; column-gap: .6vw; align-content: start; }
#panel.cvinv .c-bagx .iv-sec2 { grid-column: 1 / -1; margin: 0 0 .8vh; }
#panel.cvinv .c-bagx .iv-row { height: 5.2vh; margin-bottom: .6vh; grid-template-columns: 3vh 1fr; gap: .5vw; padding: 0 .6vw !important; }
#panel.cvinv .c-bagx .iv-row .nm b { font-size: 1.8vh; } #panel.cvinv .c-bagx .iv-row .nm small { font-size: 1.25vh; }
#panel.cvinv .c-bagx .iv-row .ic { width: 3vh; height: 3vh; } #panel.cvinv .c-bagx .iv-row .ic .ico { width: 2.2vh; height: 2.2vh; }
#panel.cvinv .c-bagx .iv-row > span:last-child:empty { display: none; }
#panel.cvinv .c-bagx .iv-empty { grid-column: 1 / -1; margin: 0; font-size: 1.6vh; }
/* 휴대폰: 능력치 판을 조금 줄이고 가방은 아이콘 칸 한 줄(6칸) */
@media (max-height: 500px) {
  #panel.cvinv .c-col { gap: 4px; top: 2vh; max-height: calc(100% - 17vh); }
  #panel.cvinv .c-right { padding: 1.2vh 1vw 1.2vh !important; }
  #panel.cvinv .c-right .pstat { padding: .4vh .8vw !important; }
  #panel.cvinv .c-right .pts-box { margin-top: .6vh; }
  #panel.cvinv .c-bagx { grid-template-columns: repeat(6, 1fr); column-gap: 4px; padding: 4px 8px 6px; }
  #panel.cvinv .c-bagx .iv-sec2 { margin: 0 0 2px; font-size: 10px; }
  #panel.cvinv .c-bagx .iv-row { height: 30px; grid-template-columns: 1fr; place-items: center; padding: 0 !important; margin: 0; }
  #panel.cvinv .c-bagx .iv-row .nm { display: none; }
  #panel.cvinv .c-bagx .iv-row .ic { width: 22px; height: 22px; } #panel.cvinv .c-bagx .iv-row .ic .ico { width: 17px; height: 17px; }
}

/* 아주 낮은 휴대폰(높이 380 이하): 능력치 판을 더 줄여 가방이 아래 단추와 겹치지 않게 */
@media (max-height: 380px) {
  #panel.cvinv .c-col { top: 4px; gap: 3px; }
  #panel.cvinv .c-right { padding: 4px 8px 6px !important; }
  #panel.cvinv .c-right .ph-name b { font-size: 15px !important; }
  #panel.cvinv .c-right .meter { min-height: 0 !important; margin: 0 !important; font-size: 10px; }
  #panel.cvinv .c-right .ptabs { margin-top: 3px !important; } #panel.cvinv .c-right .ptabs button { min-height: 24px !important; font-size: 11px !important; }
  #panel.cvinv .c-right .pstats { gap: 2px !important; margin-top: 3px !important; } #panel.cvinv .c-right .pstat { padding: 1px 6px !important; }
  #panel.cvinv .c-right .pstat .pm button { min-height: 0 !important; height: 18px; }
  #panel.cvinv .c-right .pts-box { margin-top: 3px; padding: 2px 6px !important; }
  #panel.cvinv .c-bagx { padding: 2px 6px 4px; } #panel.cvinv .c-bagx .iv-row { height: 24px; }
}

/* ── 캐릭터 창 (2026-11-09 대표): 행동 단추 줄은 가운데 아래, 가방은 오른쪽 아래에 칸으로 크게 ── */
#panel-wrap.full #panel.cvinv .iv-foot { left: 47vw !important; right: auto !important; transform: translateX(-50%); flex-wrap: nowrap !important; }
#panel.cvinv .c-col { max-height: calc(100% - 9vh); }
#panel.cvinv .c-bagx { display: block; padding: 1.4vh 1.2vw 1.6vh; }
#panel.cvinv .c-bagx .iv-sec2 small { color: #a89a80; font-size: 1.4vh; margin-left: .6vw; }
#panel.cvinv .c-bagx .bag-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8vh; }
#panel.cvinv .c-bagx .bag-cell { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 1; display: grid; place-items: center; cursor: default;
  background: radial-gradient(rgba(30, 25, 20, .9), rgba(12, 10, 9, .95)); border: 1px solid rgba(217, 201, 163, .16); box-shadow: inset 0 0 8px rgba(0, 0, 0, .7); }
#panel.cvinv .c-bagx .bag-cell.has { cursor: pointer; border-color: rgba(201, 171, 106, .55); background: radial-gradient(rgba(70, 56, 36, .75), rgba(18, 14, 11, .95)); color: #e9cf8f; }
#panel.cvinv .c-bagx .bag-cell .ico { width: 52%; height: 52%; }
#panel.cvinv .c-bagx .bag-cell b { position: absolute; right: 4px; bottom: 2px; font: 700 1.4vh system-ui; color: #f3e6c4; text-shadow: 0 1px 2px #000; }
#panel.cvinv .c-bagx .bag-cell.has:hover { border-color: #e3c98d; box-shadow: inset 0 0 8px rgba(0, 0, 0, .7), 0 0 8px rgba(227, 190, 110, .45); }
#panel.cvinv .c-bagx .bag-cell.on { border: 2px solid #f0d48e; box-shadow: 0 0 12px rgba(240, 212, 142, .6), inset 0 0 10px rgba(240, 212, 142, .25); }
@media (max-height: 500px) {
  #panel.cvinv .c-col { max-height: calc(100% - 6px); }
  #panel.cvinv .c-bagx { padding: 4px 8px 6px; }
  #panel.cvinv .c-bagx .bag-grid { gap: 3px; grid-template-columns: repeat(8, 1fr); }
  #panel.cvinv .c-bagx .bag-cell b { font-size: 9px; right: 2px; bottom: 0; }
  #panel-wrap.full #panel.cvinv .iv-foot { left: 46vw !important; }
}
@media (max-width: 900px) { #panel-wrap.full #panel.cvinv .iv-foot { left: 44vw !important; right: auto !important; } }

#panel.cvinv .c-bagx .bag-grid { grid-template-columns: repeat(8, 1fr); }   /* 24칸 = 8×3 (화면 안에) */

/* 회복약 '누구에게 쓸까요': 가방 바로 왼쪽에 (멀리 오른쪽 아래 단추까지 가지 않게, 2026-11-09 대표) */
#panel.cvinv .iv-use { left: auto !important; right: calc(1.4vw + 29vw + 1vw); top: auto; bottom: 14vh; z-index: 6; max-width: 34vw; }
@media (max-height: 500px) { #panel.cvinv .iv-use { right: calc(1.4vw + 29vw + 6px); bottom: 64px; max-width: 40vw; padding: 6px 8px; } }

/* 아이템 판(오른쪽 아래) 머리: '아이템' + 장비·소모품·재료 탭 (2026-11-09 대표) */
#panel.cvinv .iv-bagh { display: flex; align-items: baseline; gap: 1vw; margin-bottom: 1vh; }
#panel.cvinv .iv-bagh b { font: 700 2.4vh "Noto Serif KR", serif; color: #d6c290; letter-spacing: .08em; margin-right: .4vw; }
#panel.cvinv .iv-bagh button { all: unset; cursor: pointer; font: 600 1.8vh "Noto Serif KR", serif; color: #a89a80; padding: .2vh .2vw; border-bottom: 2px solid transparent; }
#panel.cvinv .iv-bagh button.on { color: #efe6d2; border-color: #c9a256; }
#panel.cvinv .iv-bagh small { margin-left: auto; color: #a89a80; font-size: 1.4vh; }
#panel-wrap.full #panel.cvinv .iv-bagh button { min-height: 0 !important; background: none !important; box-shadow: none !important; }
@media (max-height: 500px) {
  #panel.cvinv .iv-bagh { margin-bottom: 3px; gap: 8px; } #panel.cvinv .iv-bagh b { font-size: 12px; } #panel.cvinv .iv-bagh button { font-size: 11px; } #panel.cvinv .iv-bagh small { font-size: 9px; }
}

@media (max-height: 500px) { #panel.cvinv .c-bagx .bag-grid { gap: 2px; } #panel.cvinv .c-bagx .bag-cell { aspect-ratio: 5 / 4; } #panel.cvinv .c-bagx { padding: 3px 8px 4px; } }

/* 캐릭터 창 행동 단추 줄(장착·펫 창·닫기)은 다시 오른쪽 아래, 가방 판 밑 (2026-11-09 대표) */
#panel-wrap.full #panel.cvinv .iv-foot { left: auto !important; right: 1.4vw !important; transform: none; }
#panel.cvinv .c-bagx .bag-cell { aspect-ratio: 5 / 4; }
@media (max-height: 500px) {
  #panel-wrap.full #panel.cvinv .iv-foot { left: auto !important; right: 8px !important; bottom: 1px !important; transform: scale(.68); transform-origin: right bottom; }
  #panel.cvinv .c-col { gap: 2px; } #panel.cvinv .c-bagx .bag-cell { aspect-ratio: 2 / 1; }
}
@media (max-width: 900px) { #panel-wrap.full #panel.cvinv .iv-foot { left: auto !important; right: 8px !important; } }

/* 캐릭터 창 왼쪽 목록: 장착 중 6 + 가방 6이 PC에서도 스크롤 없이 (2026-11-09 대표: 오른쪽 아래 가방 판 없앰, 탭 누르면 왼쪽에 바로) */
@media (min-height: 501px) { #panel.cvinv .iv-list .iv-row { height: 5vh; margin-bottom: .4vh; } #panel.cvinv .iv-list .iv-sec2 { margin: .6vh 0 .5vh; } }
/* 가방은 휴대폰만 한 번에 10개 (2026-11-09 대표), PC는 처음 크기로 6개 */
@media (max-height: 500px) { #panel.cvinv .iv-list .iv-row { height: 26px; margin-bottom: 2px; } }
/* 행동 순서: 위 4칸만 얼굴, 그다음은 작은 동그라미로 순서만 (우리 편 금색 · 적 빨강, 2026-11-09 대표) */
#battle.s33 .b-order .o33-rest { position: relative; display: flex; flex-direction: column; align-items: center; width: 62px; padding: 0 0 2px; margin-top: -3px; }
#battle.s33 .b-order .o33-link { display: block; flex: none; width: 4px; height: 7px; border-radius: 1px; background: linear-gradient(#e3c98d, #8a6a3a); box-shadow: 0 0 0 1px rgba(20, 15, 10, .55); }   /* 작은 칸 사이를 잇는 줄 (칸 위로 지나가지 않게 칸 사이에만, 대표) */
#battle.s33 .b-order i.o33-dot { position: relative; display: block; flex: none; width: 40px; height: 24px; margin-top: 0; overflow: hidden; opacity: .85;   /* 위 얼굴 칸과 같은 기울어진 네모, 작게 겹쳐 쌓음 · 반투명 (대표) */
  transform: skewX(-8deg); background: rgba(20, 15, 10, .55); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1.5px rgba(244, 234, 216, .85), 0 2px 3px rgba(0, 0, 0, .45); }
#battle.s33 .b-order i.o33-dot:first-child { margin-top: 0; }
#battle.s33 .b-order i.o33-dot.foe { background: rgba(80, 20, 15, .55); box-shadow: inset 0 0 0 1.5px rgba(214, 112, 96, .9), 0 2px 3px rgba(0, 0, 0, .45); }
#battle.s33 .b-order i.o33-dot img, #battle.s33 .b-order i.o33-dot canvas { position: absolute; left: -10%; top: -10%; width: 150%; height: 160%; object-fit: cover; object-position: 18% 12%; transform: skewX(8deg); }
@media (max-height: 500px) { #battle.s33 .b-order .o33-rest { width: 48px; } #battle.s33 .b-order i.o33-dot { width: 30px; height: 18px; } #battle.s33 .b-order .o33-link { height: 4px; } }

/* 캐릭터 창: 능력치 판을 장비 칸(3줄)과 위·아래 선 맞춤 (2026-11-09 대표 "오와 열") */
#panel.cvinv .c-col { top: 11vh !important; }
#panel.cvinv .c-right { box-sizing: border-box; height: auto; display: flex; flex-direction: column; gap: 1vh; }   /* 위 선만 장비 칸과 맞춤, 높이는 내용만큼 아래로 (2026-11-09 대표) */
@media (max-height: 500px) { #panel.cvinv .c-col { top: 10vh !important; } }
/* 능력치 점수가 남았을 때도 2×2로 (같은 높이 안에) */
#panel.cvinv .c-right .pstats { grid-template-columns: 1fr !important; }   /* 점수 남았을 때는 한 줄에 하나씩 (아래로 길게) */
#panel.cvinv .c-right .pstats .pstat span { white-space: nowrap; }
#panel.cvinv .c-right { gap: 1.6vh; padding-bottom: 2.2vh !important; }   /* 아래 칸이 남아서 조금 더 길게 (2026-11-09 대표) */
#panel.cvinv .c-right .pstats { gap: 1.4vh !important; }
#panel.cvinv .c-right .pstats .pstat { min-height: 6.4vh; box-sizing: border-box; align-items: center; }
/* 더해지는 숫자(+점수·+장비·+탑승)는 숫자 오른쪽에 붙고, 숫자 자리는 움직이지 않게 (2026-11-09 대표) */
#panel.cvinv .c-right .pstat b { position: relative; display: inline-block; justify-self: center; width: auto !important; }
#panel.cvinv .c-right .pstat.can b { justify-self: start; }
#panel.cvinv .c-right .pstat.can b .adds { position: static; display: inline-flex; }   /* 점수 찍을 때는 숫자가 왼쪽 고정이라 그대로 이어 붙임 (− 단추를 덮지 않게) */
#panel.cvinv .c-right .pstat b .adds { pointer-events: none; }
#panel.cvinv .c-right .pstat b .adds { position: absolute; left: 100%; bottom: .1em; display: flex; gap: .25em; padding-left: .3em; font-style: normal; white-space: nowrap; }
#panel.cvinv .c-right .pstat b .adds em { margin-left: 0 !important; }
#panel.cvinv .c-right .pts-box { min-height: 6.4vh; box-sizing: border-box; }
#panel.cvinv .c-right .pstats .pstat.can .pm button.p5 { min-width: 5.2vh !important; padding: 0 .6vw !important; }   /* 맨 오른쪽 +칸은 두 자리 숫자도 들어가게 (2026-11-09 대표) */
#panel.cvinv .c-right .pstats .pstat.can { grid-template-columns: auto auto 1fr !important; column-gap: .4vw; padding: .5vh .5vw !important; }
#panel.cvinv .c-right .pstats .pstat.can .pm { justify-self: end; display: flex; gap: .25vw; }
#panel.cvinv .c-right .pstats .pstat.can .pm button { min-width: 0 !important; width: auto; padding: 0 .45vw !important; height: 3.2vh; min-height: 0 !important; font-size: 1.5vh; }
#panel.cvinv .c-right .pts-box { margin-top: 0 !important; }
@media (max-height: 500px) {
  #panel.cvinv .c-right .pstats .pstat.can { padding: 1px 3px !important; column-gap: 3px; }
  #panel.cvinv .c-right .pstats .pstat.can span { font-size: 8px; }
  #panel.cvinv .c-right .pstats .pstat.can .pm { gap: 1px; }
  #panel.cvinv .c-right .pstats .pstat.can .pm button { height: 16px !important; padding: 0 3px !important; font-size: 9px; }
}
@media (max-height: 380px) { #panel.cvinv .c-right .pts-box { padding-top: 0 !important; padding-bottom: 0 !important; } #panel.cvinv .c-right .pstats { gap: 1px !important; } }
/* 캐릭터 그림은 뒤로: 이 창의 주인공은 장비 칸·능력치 판 (2026-11-09 대표) */
#panel.cvinv .doll-fig { position: relative; z-index: 0; }
#panel.cvinv .c-slots { position: relative; z-index: 3; }
#panel.cvinv .c-slots .gslot { background-color: #15120f; }

/* 얼굴만 잘라 보여 주기 (2026-11-09 대표): 행동 순서 칸·작은 칸·오른쪽 아래 카드. 얼굴 자리는 js/faces.js
   --ta: 칸 가로/세로, --k: 얼굴 둘레 여유 */
#battle.s33 img.fc { position: absolute !important; max-width: none !important; max-height: none !important; height: auto !important; object-fit: fill !important;
  width: calc(100% / var(--fs) / var(--k, 1.15)) !important; left: calc(50% - var(--fx) * 100% / var(--fs) / var(--k, 1.15)) !important;
  top: calc(50% - var(--fy) * var(--ar) / var(--fs) / var(--k, 1.15) * var(--ta, 1) * 100%) !important; }
#battle.s33 .b-order i.o33 .o33-face { --ta: 1.53; }
#battle.s33 .b-order i.o33-dot { --ta: 1.67; }
#battle.s33 .b-order i.o33-dot.mine img.fc, #battle.s33 .b-order i.o33 .o33-face img.fc { transform: skewX(8deg) !important; }
#battle.s33 .x-face { --ta: 1; --k: 1.1; position: absolute; }
#battle.s33 .x-face img.fc { transform: none !important; }
/* 작은 칸 줄은 아래로 갈수록 투명하게 (2026-11-09 대표) */
#battle.s33 .b-order .o33-rest { -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .08) 100%); mask-image: linear-gradient(rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .08) 100%); }
#battle.s33 .b-order i.o33-dot { opacity: 1; }

/* 장착·빼기·사용은 고른 물건 카드 안에서 바로, 오른쪽 아래는 펫 창·닫기만 (2026-11-09 대표) */
#panel.cvinv .iv-cact { margin-top: 1.4vh; display: flex; }
#panel-wrap.full #panel.cvinv .iv-cact .iv-act { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .8vw; min-height: 5vh; padding: 0 1.6vw;
  background: url(img/ui/plate_sel.webp) center / 100% 100% no-repeat; color: #fff4dc; font: 700 2vh "Noto Serif KR", serif; letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
#panel.cvinv .iv-cact .iv-act i { display: grid; place-items: center; width: 3.4vh; height: 3.4vh; border: 1.5px solid #f0d48e; border-radius: 50%; }
#panel.cvinv .iv-cact .iv-act i .ico { width: 1.9vh; height: 1.9vh; }
#panel.cvinv .iv-cact .iv-act:hover:not(:disabled) { filter: brightness(1.15); }
#panel.cvinv .iv-cact .iv-act:disabled { opacity: .4; cursor: default; }
@media (max-height: 500px) {
  #panel.cvinv .iv-cact { margin-top: 4px; }
  #panel-wrap.full #panel.cvinv .iv-cact .iv-act { min-height: 24px; font-size: 11px; gap: 5px; }
  #panel.cvinv .iv-cact .iv-act i { width: 16px; height: 16px; } #panel.cvinv .iv-cact .iv-act i .ico { width: 10px; height: 10px; }
}

/* '누구에게 쓸까요'는 처음 누른 곳 가까이: 고른 물건 카드 안, 사용 단추 자리 (2026-11-09 대표) */
#panel.cvinv .iv-card .iv-use { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; max-width: none !important;
  margin-top: 1.2vh; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
@media (max-height: 500px) { #panel.cvinv .iv-card .iv-use { margin-top: 4px; } }
@media (max-height: 500px) {
  #panel.cvinv .iv-card .iv-use .use-t { grid-template-columns: 24px auto; padding: 3px 14px 3px 10px !important; column-gap: 4px; }
  #panel.cvinv .iv-card .iv-use .use-t img { width: 24px; height: 24px; }
  #panel.cvinv .iv-card .iv-use .use-t b { font-size: 10px; } #panel.cvinv .iv-card .iv-use .use-t .mini-hp { width: 40px; }
  #panel.cvinv .iv-card .iv-use :is(p, b.t, .use-q, h4) { font-size: 11px; }
}
/* 펫 창 잠금 단추: 글씨 없이 자물쇠만, 능력치 판 왼쪽 위 바깥 (2026-11-09 대표). 자리는 main.js placeOutFlag */
#panel.petfull .fp-lockbtn { all: unset; box-sizing: border-box; position: absolute; z-index: 6; cursor: pointer; width: max(34px, 5.2vh); height: max(34px, 5.2vh); display: grid; place-items: center; }
#panel.petfull .fp-lockbtn i { width: 100%; height: 100%; box-sizing: border-box; border: 1px solid rgba(239, 230, 210, .5); border-radius: 50%; display: grid; place-items: center; background: rgba(14, 12, 10, .75); color: #cdbf9f; transition: border-color .15s, color .15s; }
#panel.petfull .fp-lockbtn i .ico { width: 48%; height: 48%; }
#panel.petfull .fp-lockbtn:hover i { border-color: #e3c98d; color: #efe6d2; }
#panel.petfull .fp-lockbtn.on i { border-color: #e3c98d; color: #e3c98d; box-shadow: 0 0 10px rgba(227, 201, 141, .35); }

/* 오른쪽 아래 단추 줄: 휴대폰(가로)도 PC와 같은 모양으로 (2026-11-09 대표: "pc랑 모바일이 왜 다르냐")
   좁은 화면 규칙(가로 900px 이하)이 띠를 화면 끝까지 늘리고 단추를 오른쪽에 몰아 붙이던 것 → 띠는 단추 뒤에만, 간격·여백은 PC와 같은 비율로 줄임 */
@media (max-height: 500px) {
  #panel-wrap.full #panel :is(.fp-foot, .iv-foot, .u33-acts) { left: auto !important; max-width: calc(100% - 16px); flex-wrap: wrap !important; justify-content: flex-end;
    gap: 7px !important; padding: 10px 19px 10px 30px !important; background-size: 100% 100% !important; }
}

/* 퀘스트 창: 휴대폰(가로)에서 '닫기'가 화면 밖으로 잘리던 것 → 줄 간격·글씨를 줄여 한 화면에 (2026-11-09 대표: PC·휴대폰 전부 확인) */
@media (max-height: 500px) {
  #panel.questview { max-height: calc(100dvh - 12px) !important; overflow: hidden !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  #panel.questview h3 { margin: 0 0 2px; font-size: 1rem; }
  #panel.questview .shop-item { margin: 0 0 4px; padding: 4px 10px; font-size: 12px; line-height: 1.35; }
  #panel.questview .shop-item .tiny { font-size: 11px; }
  #panel.questview > p.tiny { font-size: 11px; }
  #panel.questview > .row { margin-top: 4px; }
  #panel.questview > .row > button { min-height: 32px; }
}

/* 휴대폰(가로)에서 화면 높이(vh)로 줄어 거의 안 보이던 글씨를 읽을 수 있는 크기로 (2026-11-09 대표: PC·휴대폰 전부 확인)
   캐릭터 창 탭·능력치 이름, 펫 창 기술 레벨·속성·EXP, 도감 탭, 진형 Lv */
@media (max-height: 500px) {
  #panel .iv-tabs button { font-size: 12px !important; }
  #panel .pstat span { font-size: 11px !important; }
  #panel .pstat b { font-size: 12px !important; }
  #panel-wrap.full #panel.petfull .fp-dm b { font-size: 10px !important; }
  #panel-wrap.full #panel.petfull .fp-nm .el { font-size: 10px !important; }
  #panel-wrap.full #panel.petfull .fp-bar small { font-size: 9px !important; }
  #panel-wrap.full #panel.petfull .fp-h { font-size: 11px !important; }
  #panel.b33 .bk-tabs button { font-size: 12px !important; }
  #panel .fm-pet small { font-size: 10px !important; }
}
@media (max-height: 500px) { #panel.b33 .bk-foot { word-break: keep-all; } }   /* 도감 카드 아래 글이 '선/물'처럼 글자 중간에서 끊기던 것 */

/* 고른 펫 방패 아래 '출전하기' 단추 (2026-11-09 대표): 출전 표시(금색 띠)와 구분되게 어두운 바탕에 금색 글씨, 살짝 빛남 */
#panel.petfull .fp-tbq { all: unset; box-sizing: border-box; position: absolute; z-index: 6; transform: translateX(-50%); cursor: pointer; white-space: nowrap;
  padding: .45vh 1.6vh .6vh; font: 800 max(11px, 1.8vh) "Noto Serif KR", serif; color: #f3d38a; background: linear-gradient(#2a221b, #120e0b);
  border: 1.5px solid #c9913f; border-radius: 3px; box-shadow: 0 0 10px rgba(240, 200, 120, .35), 0 2px 6px rgba(0, 0, 0, .6); animation: fpTbq 1.8s ease-in-out infinite; }
#panel.petfull .fp-tbq:hover { color: #fff1c8; background: linear-gradient(#3a2e22, #1a140f); }
@keyframes fpTbq { 50% { box-shadow: 0 0 16px rgba(240, 200, 120, .6), 0 2px 6px rgba(0, 0, 0, .6); } }
@media (max-height: 500px) { #panel.petfull .fp-tbq { padding: 1px 7px 2px; font-size: 10px; } }

/* 펫 창: 이름 바꾸기 = 이름 옆 연필, 방생 = 오른쪽 판 오른쪽 아래 구석 (2026-11-09 대표). 아래 단추 줄은 출전·탑승·아이템·뒤로만 */
#panel-wrap.full #panel.petfull .fp-pen { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: max(24px, 3.2vh); height: max(24px, 3.2vh);
  margin-left: .8vh; vertical-align: middle; position: relative; top: -.4vh; border: 1px solid rgba(239, 230, 210, .45); border-radius: 50%; color: #cdbf9f; }
#panel-wrap.full #panel.petfull .fp-pen .ico { width: 52%; height: 52%; }
#panel-wrap.full #panel.petfull .fp-pen:hover { border-color: #e3c98d; color: #efe6d2; }
#panel-wrap.full #panel.petfull .fp-right { padding-bottom: 5.6vh !important; }
#panel-wrap.full #panel.petfull .fp-rel { position: absolute; right: 1.6vw; bottom: 1.4vh; display: flex; align-items: center; gap: .8vh; font: 600 max(11px, 1.5vh) "Noto Serif KR", serif; }
#panel-wrap.full #panel.petfull .fp-rel b { color: #ff9b78; font-weight: 700; }
#panel-wrap.full #panel.petfull .fp-relb { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .5vh; padding: .3vh 1vh; color: #a89a80;
  border: 1px solid rgba(217, 201, 163, .25); border-radius: 3px; font: inherit; }
#panel-wrap.full #panel.petfull .fp-relb .ico { width: max(11px, 1.5vh); height: max(11px, 1.5vh); }
#panel-wrap.full #panel.petfull .fp-relb:hover:not(:disabled) { color: #efe6d2; border-color: rgba(217, 201, 163, .6); }
#panel-wrap.full #panel.petfull .fp-relb.warn { color: #ff9b78; border-color: rgba(255, 155, 120, .6); }
#panel-wrap.full #panel.petfull .fp-relb:disabled { opacity: .35; cursor: default; }

/* 사이 각도 전투: 우리 편 HP 카드는 아래 한 줄 (2026-11-09 대표) */
#battle.s33.sa8 .x-party.many { gap: 6px; }

/* 사이 각도 전투: 차례인 펫도 크기는 그대로(발밑 금빛 고리로만 표시), 모두 같은 크기로 보이게 (2026-11-09 대표) */
#battle.s33.tilt .stage .unit.acting { transform: translateY(-4px); }
/* 행동 순서 작은 칸: 사이 줄 없이 약간 겹쳐 쌓기 (2026-11-09 대표 "약간 겹쳐도 되잖아") */
#battle.s33 .b-order .o33-rest .o33-link { display: none; }
#battle.s33 .b-order .o33-rest i.o33-dot + i.o33-dot, #battle.s33 .b-order .o33-rest .o33-link + i.o33-dot { margin-top: -6px; }
@media (max-height: 500px) { #battle.s33 .b-order .o33-rest i.o33-dot + i.o33-dot, #battle.s33 .b-order .o33-rest .o33-link + i.o33-dot { margin-top: -4px; } }

/* ── 33원정대식 기술 연출 (2026-11-09 대표, battleView.js cast33Start) ── */
#battle .b-field .slot, #battle .b-field .b-ground { transition: filter .35s, opacity .35s; }
#battle.cast33 .b-field .b-ground { filter: brightness(.45) saturate(.7); }
#battle.cast33 .b-field .slot:not(.c33-me) { filter: brightness(.4) saturate(.6); }
#battle.cast33 .b-field .slot.c33-me { filter: drop-shadow(0 0 18px rgba(255, 140, 40, .55)); }
#battle.cast33 :is(.b-order, .x-party, .x-side, .b-auto) { opacity: .25; transition: opacity .3s; }
/* 기술 이름: 왼쪽에서 먹 붓 띠가 스윽 + 금색 붓글씨 */
#battle .c33-title { position: absolute; left: 0; top: 30%; z-index: 1800; pointer-events: none; padding: 1.4vh 6vw 1.6vh 4vw; display: flex; align-items: center;
  animation: c33in .45s cubic-bezier(.2, .9, .25, 1) both; }
#battle .c33-title i { position: absolute; inset: 0; background: url(img/ui/hud_strip.webp) left center / 100% 100% no-repeat; filter: brightness(.9); transform-origin: left center; animation: c33brush .45s cubic-bezier(.2, .9, .25, 1) both; }
#battle .c33-title b { position: relative; font: 900 clamp(26px, 6vh, 54px) "Noto Serif KR", serif; letter-spacing: .16em; color: #f6dc9a;
  text-shadow: 0 0 12px rgba(255, 150, 50, .7), 0 2px 4px #000; animation: c33text .5s .12s ease-out both; }
#battle .c33-title.out { animation: c33out .35s ease-in both; }
@keyframes c33in { from { opacity: 0; } to { opacity: 1; } }
@keyframes c33brush { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes c33text { from { opacity: 0; transform: translateX(-24px); letter-spacing: .4em; } to { opacity: 1; transform: none; letter-spacing: .16em; } }
@keyframes c33out { to { opacity: 0; transform: translateX(-30px); } }
/* 기 모으기: 화면 가장자리가 붉게 */
#battle .b-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1600; opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(220, 60, 10, .55)); }
#battle.c33-heat .b-field::after { opacity: 1; }
/* 터지는 순간: 하얗게 번쩍 (0.08초) */
#battle .c33-flash { position: absolute; inset: 0; z-index: 1750; pointer-events: none; background: #fff6e0; animation: c33flash .26s ease-out both; }
@keyframes c33flash { 0% { opacity: 0; } 15% { opacity: .85; } 35% { opacity: .5; } 100% { opacity: 0; } }
/* 기술 피해 숫자는 크게 */
#battle.cast33 .pop:not(.heal):not(.miss):not(.c33-pop) { font-size: 1.6em; }
@media (max-height: 500px) { #battle .c33-title { top: 24%; } }
#battle.cast33.c33-lit .b-field .slot:not(.c33-me) { filter: none; }   /* 터지는 순간부터 맞는 적·피해 숫자가 밝게 */

/* 메뉴 창: 단추를 2~3칸으로, 작게 → '테스트용'을 열어도 PC·휴대폰 모두 스크롤 없이 (2026-11-09 대표 "테스트용 아래 내용 못 본다") */
#panel.menuview { width: min(92vw, 860px); max-width: none; }
#panel.menuview > .stack, #panel.menuview details.test > .stack { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
#panel.menuview details.test > .stack > .row { grid-column: span 2; gap: 6px; }
#panel.menuview details.test > .stack > .row select { min-width: 0; flex: 1 1 auto; }
#panel.menuview .stack button { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.menuview details.test { margin-top: 10px; }
#panel.menuview details.test summary { cursor: pointer; }
@media (max-height: 500px) {
  #panel.menuview h3 { margin: 0 0 4px !important; font-size: 1rem !important; }
  #panel.menuview > .stack, #panel.menuview details.test > .stack { gap: 4px 6px; }
  #panel.menuview .stack button { padding-top: 5px !important; padding-bottom: 5px !important; font-size: .78rem; }
  #panel.menuview details.test { margin-top: 4px; } #panel.menuview details.test > .stack { margin-top: 4px !important; }
  #panel.menuview details.test summary { font-size: .8rem; }
  #panel.menuview > .row { margin-top: 4px; } #panel.menuview > .row button { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 0 !important; }
}
#panel.menuview details.test > .stack > .row > button { flex: 1 1 0; min-width: 0; font-size: .8rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.menuview details.test > .stack > .row > select { flex: 0 0 34%; }
@media (max-height: 500px) { #panel.menuview details.test > .stack > .row > button { font-size: .7rem; } }

/* 33식 기술 피해 숫자: 맨 위 층, 크게, 맞은 펫 머리 위 (2026-11-09 대표) */
#battle .pop.c33-pop { position: absolute; z-index: 1900; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  font: 900 clamp(40px, 9vh, 84px) "Cinzel", "Oswald", "Pretendard", serif; letter-spacing: -.02em; line-height: 1;
  color: #fff3d2; -webkit-text-fill-color: #fff3d2; background: none;
  text-shadow: 0 0 2px #3a1206, 0 3px 0 #3a1206, 3px 0 0 #3a1206, -3px 0 0 #3a1206, 0 -3px 0 #3a1206, 0 0 22px rgba(255, 120, 30, .9), 0 6px 14px rgba(0, 0, 0, .7);
  animation: c33pop 1.3s cubic-bezier(.2, .9, .3, 1) forwards; }
#battle .pop.c33-pop.crit { color: #ffd36b; -webkit-text-fill-color: #ffd36b; font-size: clamp(48px, 11vh, 100px); }
#battle .pop.c33-pop.c33-word { font: 900 clamp(16px, 3vh, 28px) "Noto Serif KR", serif; color: #ffe7a3; -webkit-text-fill-color: #ffe7a3; }
@keyframes c33pop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); } 14% { opacity: 1; transform: translate(-50%, -100%) scale(1.25); } 26% { transform: translate(-50%, -100%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -125%); } 100% { opacity: 0; transform: translate(-50%, -145%); } }
/* 기술 이름: 화면 맨 위 가운데, 먹 붓 띠에 금빛 큰 글씨 (2026-11-09 대표) */
#battle.s33 .x-skname { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 14px); transform: translateX(-50%); z-index: 1600; pointer-events: none; white-space: nowrap;
  padding: 14px 70px 16px; background: var(--brush) center / 100% 100% no-repeat; font: 900 40px "Noto Serif KR", serif; letter-spacing: .18em; color: #f6dc9a;
  text-shadow: 0 0 8px rgba(255, 190, 90, .55), 0 2px 3px #000; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); animation: skName .22s ease-out; }
#battle.s33 .x-skname[hidden] { display: none; }
@keyframes skName { from { opacity: 0; transform: translateX(-50%) scale(.85); } }
#battle.s33 .x-say.low { top: calc(max(8px, env(safe-area-inset-top)) + 96px); }
@media (max-height: 500px) { #battle.s33 .x-skname { padding: 8px 40px 10px; font-size: 24px; } #battle.s33 .x-say.low { top: calc(max(8px, env(safe-area-inset-top)) + 62px); } }
/* 33식 기술 이름도 화면 맨 위 가운데로 (2026-11-09 대표): 먹 붓 띠가 가운데서 양옆으로 펼쳐짐 */
#battle .c33-title { left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 10px); transform: translateX(-50%); padding: 1.4vh 5vw 1.6vh; white-space: nowrap; }
#battle .c33-title i { transform-origin: center; background-position: center; }
#battle .c33-title.out { animation: c33outTop .35s ease-in both; }
@keyframes c33outTop { to { opacity: 0; } }
@media (max-height: 500px) { #battle .c33-title { top: calc(max(6px, env(safe-area-inset-top)) + 6px); } #battle .c33-title b { font-size: 24px; } }

/* 캐릭터 창 오른쪽 아래 단추 줄: 휴대폰에서 0.68배로 줄여 펫 창보다 작아 보이던 것 → 펫 창과 같은 크기 (2026-11-10 대표) */
@media (max-height: 500px) {
  #panel-wrap.full #panel.cvinv .iv-foot { transform: none !important; bottom: max(4px, env(safe-area-inset-bottom)) !important; }
}
/* 펫 창 위쪽 펫 방패 줄을 위 가운데로 (2026-11-10 대표: 왼쪽 위는 다른 것 자리) */
#panel-wrap.full #panel.petfull .fp-tabs { left: 50% !important; transform: translateX(-50%); }
/* 펫 보관소: 맡긴 펫이 없어도 칸이 처음부터 꽉 찬 크기로 (2026-11-10 대표). 칸 판이 남는 높이를 다 쓰고 쪽 번호는 맨 아래에 */
.panel.storage .st-left { display: flex !important; flex-direction: column; }
.panel.storage .st-left > .st-grid { flex: 1 1 0; min-height: 0; }

/* 펫 보관소 오른쪽: '자세히' 없이 한 화면에 펫 그림·능력치·기술 4칸 (2026-11-10 대표) */
.panel.storage .st-pv.st-all { grid-template-columns: 40% minmax(0, 1fr); }
.panel.storage .st-all .st-img { align-self: stretch; place-items: center; }
.panel.storage .st-all .st-img img { height: auto; max-height: 92%; width: 100%; object-position: 50% 50%; }
.panel.storage .st-all .st-info { grid-template-rows: auto auto auto minmax(0, 1fr); }
.panel.storage .st-all .st-stats { margin-top: 4px; }
.panel.storage .st-all .st-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; overflow: hidden; align-content: stretch; margin-top: 6px; }
.panel.storage .st-all .skc { min-height: 0; overflow: hidden; padding: 6px 8px; gap: 8px; }
.panel.storage .st-all .skc-txt { min-width: 0; }
.panel.storage .st-all .skc-txt > div:first-child { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.panel.storage .st-all .skc-txt > div:first-child b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.panel.storage .st-all .skc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; line-height: 1.3; }
.panel.storage .st-all .skc.lock { opacity: .45; }
.panel.storage .st-all .st-acts { grid-template-columns: repeat(3, 1fr); }
@media (max-height: 500px) {
  .panel.storage .st-all .st-skills { gap: 3px; margin-top: 3px; }
  .panel.storage .st-all .skc { padding: 2px 6px; gap: 5px; font-size: .7rem; }
  .panel.storage .st-all .skc b { font-size: .74rem; }
  .panel.storage .st-all .skc-ic { width: 26px; height: 26px; }
  .panel.storage .st-all .skc-ic svg { width: 12px; height: 12px; }
  .panel.storage .st-all .skc-type { display: none; }
  .panel.storage .st-all .skc-line { font-size: .62rem; -webkit-line-clamp: 1; }
}
.panel.storage .st-pv.st-all { grid-template-columns: 34% minmax(0, 1fr); }
.panel.storage .st-all .ph-name b { flex: none; }
.panel.storage .st-all .ph-name .lv { font-size: 1.5rem; margin-left: auto; }
.panel.storage .st-all .ph-name .gpill { font-size: 2.1rem; margin-left: 8px; }
.panel.storage .st-all .ph-name .gpill.g-SEVEN { font-size: 1.4rem; }
.panel.storage .st-all .st-skills { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.panel.storage .st-all .skc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 3px 8px; }
.panel.storage .st-all .skc-ic { width: 34px; height: 34px; }
.panel.storage .st-all .skc-line { -webkit-line-clamp: 1; font-size: .74rem; }
@media (max-height: 500px) {
  .panel.storage .st-all .st-stats .pstat { height: 20px; font-size: .7rem; }
  .panel.storage .st-all .st-stats .pstat b { font-size: .82rem; }
  .panel.storage .st-all .st-stats { gap: 2px; margin-top: 2px; }
  .panel.storage .st-all .st-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
  .panel.storage .st-all .skc { padding: 1px 4px; gap: 4px; }
  .panel.storage .st-all .skc-ic { width: 22px; height: 22px; }
  .panel.storage .st-all .skc-ic small { display: none; }
  .panel.storage .st-all .skc-line { display: none; }
  .panel.storage .st-all .ph-name .lv { font-size: 1rem; }
  .panel.storage .st-all .ph-name .gpill { font-size: 1.3rem; }
}
@media (max-height: 500px) {   /* 휴대폰: 능력치를 2줄(2칸씩)로 줄여 기술 칸 자리를 만든다 */
  .panel.storage .st-all .st-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; }
  .panel.storage .st-all .st-stats .pstat { height: 22px !important; min-height: 0 !important; padding: 0 6px !important; }
  .panel.storage .st-all .skc { min-height: 22px; }
  .panel.storage .st-all .skc b { font-size: .7rem; }
}
/* 펫 보관소 오른쪽 펫 그림을 조금 작게 (2026-11-10 대표) */
.panel.storage .st-all .st-img img { max-height: 55% !important; width: 60% !important; }   /* 30% 더 작게 (2026-11-10 대표) */
.panel.storage .st-pv.st-all { grid-template-columns: 26% minmax(0, 1fr); }   /* 그림이 작아진 만큼 오른쪽(능력치·기술)을 넓게 */
.panel.storage .st-all .st-img img { max-height: 72% !important; width: 82% !important; }

/* 감정 표현: 화면을 어둡게 하지 않고 감정 단추 바로 아래 작은 창 (2026-11-10 대표) */
#emote-pop.emote-pop { position: absolute; z-index: 30; width: auto; height: auto; max-width: calc(100% - 16px); max-height: none; margin: 0; overflow: visible; pointer-events: auto; }
#emote-pop .emote-grid { min-width: 360px; }
@media (max-height: 500px) { #emote-pop .emote-grid { min-width: 300px; gap: 5px; } #emote-pop .emote-grid button { min-height: 34px; } #emote-pop h3 { margin-bottom: 2px; } }
/* 안 배운 기술 칸: 자물쇠와 레벨만 (2026-11-10 대표) */
#battle.s33 .x-sk.empty .x-sk-nm { gap: 6px; }
#battle.s33 .x-sk.empty .x-sk-nm .ico { width: 14px; height: 14px; opacity: .8; }
/* 진형 창: 위 진형 단추로 열면 화면을 어둡게 하지 않고 단추 바로 아래에 (2026-11-10 대표) */
#panel-wrap.fmpop { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: block; padding: 0; }
#panel-wrap.fmpop #panel { position: absolute; margin: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
#panel-wrap.fmpop .panel.stone.p33.fm33 { --fmh: clamp(70px, calc((100dvh - 470px) / 2), 140px); }
@media (max-height: 500px) { #panel-wrap.fmpop .panel.stone.p33.fm33 { --fmh: clamp(44px, calc((100dvh - 300px) / 2), 96px); } }
@media (max-height: 500px) {   /* 휴대폰: 펫 칸을 작게 해서 진형 칸(사람·펫)이 보이게 */
  #panel-wrap.fmpop .panel.stone.p33.fm33 { --fmh: 74px; padding-top: 10px !important; padding-bottom: 8px !important; }
  #panel-wrap.fmpop .panel.stone.p33.fm33 h3 { font-size: 1.05rem; }
  #panel-wrap.fmpop .panel.stone.p33.fm33 .fm-pet { padding: 3px 2px 4px !important; }
  #panel-wrap.fmpop .panel.stone.p33.fm33 .fm-pet img { height: 26px !important; }
}

/* 보관소 오른쪽 = 펫 창과 같은 모양 (2026-11-10 대표): 펫 창의 능력치 카드·기술 줄 모양을 그대로 옮김 (아래는 펫 창 규칙을 .st-fp 안으로 복사) */
#panel-wrap.full #panel.storage .st-fp .fp-h, #panel-wrap.full #panel.storage .st-fp .fp-hd { font-size: 2.4vh; font-weight: 700; color: #d6c290; letter-spacing: .1em; }
#panel-wrap.full #panel.storage .st-fp .fp-h { margin: 0 0 1.4vh; display: flex; align-items: center; gap: 1vw; }
#panel-wrap.full #panel.storage .st-fp .fp-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214, 194, 144, .55), transparent); }
#panel-wrap.full #panel.storage .st-fp .fp-sk { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 1.2vh; height: 6.6vh; margin-bottom: 1.1vh; width: 23vw; padding-left: .6vh; cursor: pointer;
  background: linear-gradient(90deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .03) 75%, transparent); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
#panel-wrap.full #panel.storage .st-fp .fp-sk.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .12) 80%, transparent); }
#panel-wrap.full #panel.storage .st-fp .fp-sk.off { cursor: default; opacity: .45; }
#panel-wrap.full #panel.storage .st-fp .fp-dm { width: 4.6vh; height: 4.6vh; flex: none; margin-left: .6vh; transform: rotate(45deg); background: #15110d; outline: 1px solid rgba(214, 190, 140, .7); outline-offset: -3px; display: grid; place-items: center; }
#panel-wrap.full #panel.storage .st-fp .fp-dm b { transform: rotate(-45deg); font: 700 1.6vh system-ui, sans-serif; color: #e3c98d; }
#panel-wrap.full #panel.storage .st-fp .fp-sk span { display: grid; line-height: 1.2; }
#panel-wrap.full #panel.storage .st-fp .fp-sk span b { font-size: 2.15vh; font-weight: 700; }
#panel-wrap.full #panel.storage .st-fp .fp-sk span small { font: 600 1.35vh system-ui, sans-serif; color: #a89a80; }
/* 오른쪽 위 판 */
#panel-wrap.full #panel.storage .st-fp .fp-right { position: absolute; right: 1.4vw; top: 1.6vh; width: 25vw; box-sizing: border-box; padding: 2.2vh 2.4vw 2vh; z-index: 2;
  background: linear-gradient(rgba(14, 12, 10, .86), rgba(14, 12, 10, .86)), url(img/ui/lattice.webp) 0 0 / 16vh; border: 1px solid rgba(217, 201, 163, .28);
  box-shadow: inset 0 0 0 4px rgba(10, 9, 8, .9), inset 0 0 0 5px rgba(217, 201, 163, .14), 0 0 3vh rgba(0, 0, 0, .8); }
#panel-wrap.full #panel.storage .st-fp .fp-right::before, #panel-wrap.full #panel.storage .st-fp .fp-right::after { content: ""; position: absolute; width: 1.6vh; height: 1.6vh; border: 1px solid rgba(217, 201, 163, .55); }
#panel-wrap.full #panel.storage .st-fp .fp-right::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
#panel-wrap.full #panel.storage .st-fp .fp-right::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
#panel-wrap.full #panel.storage .st-fp .fp-nm { position: relative; text-align: center; padding: .2vh 0 1vh; }
#panel-wrap.full #panel.storage .st-fp .fp-nm b { font-size: 4.2vh; font-weight: 700; letter-spacing: .14em; }
#panel-wrap.full #panel.storage .st-fp .fp-nm .el { position: absolute; right: 0; top: 1vh; font-family: system-ui, sans-serif; font-size: 1.4vh; }
#panel-wrap.full #panel.storage .st-fp .fp-nm::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 201, 163, .6), transparent); }
#panel-wrap.full #panel.storage .st-fp .fp-lvb { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6vh; margin-top: 1.4vh; align-items: end; }
#panel-wrap.full #panel.storage .st-fp .fp-lv { display: grid; line-height: 1; justify-items: start; gap: .3vh; }
#panel-wrap.full #panel.storage .st-fp .fp-lv small { font-size: 1.5vh; color: #cdbf9f; }
#panel-wrap.full #panel.storage .st-fp .fp-lv b { font-size: 5.4vh; font-weight: 700; color: #e9d6a4; }
#panel-wrap.full #panel.storage .st-fp .fp-lv .rune { font-size: 1.3vh; }
#panel-wrap.full #panel.storage .st-fp .fp-bar { display: grid; gap: .25vh; margin-bottom: .6vh; }
#panel-wrap.full #panel.storage .st-fp .fp-bar span { justify-self: end; font-size: 1.5vh; color: #cdbf9f; }
#panel-wrap.full #panel.storage .st-fp .fp-bar i { display: block; height: 1vh; background: #0c0a08; clip-path: polygon(1.2% 0, 98.8% 0, 100% 50%, 98.8% 100%, 1.2% 100%, 0 50%); box-shadow: inset 0 0 0 1px rgba(217, 201, 163, .4); position: relative; }
#panel-wrap.full #panel.storage .st-fp .fp-bar i u { position: absolute; left: 1.2%; top: 20%; bottom: 20%; display: block; max-width: 97.6%; }
#panel-wrap.full #panel.storage .st-fp .fp-bar.xp u { background: linear-gradient(90deg, #8c7445, #e9d6a4); }
#panel-wrap.full #panel.storage .st-fp .fp-bar.hp u { background: linear-gradient(90deg, #6e1414, #b62a22); }
#panel-wrap.full #panel.storage .st-fp .fp-hd { margin: 2.2vh 0 .8vh; font-weight: 500; font-size: 2.2vh; color: #c79a63; letter-spacing: 0; }
#panel-wrap.full #panel.storage .st-fp .fp-cs { display: grid; grid-template-columns: auto 1fr; column-gap: 2vh; row-gap: .5vh; font-family: system-ui, sans-serif; font-size: 1.75vh; align-items: center; }
#panel-wrap.full #panel.storage .st-fp .fp-cs span { color: #d9cdb5; }
#panel-wrap.full #panel.storage .st-fp .fp-cs b { text-align: right; font-weight: 700; color: #efe6d2; }
#panel-wrap.full #panel.storage .st-fp .fp-radar { position: relative; width: 100%; height: 27vh; margin: 4.2vh 0 3.2vh; }
#panel-wrap.full #panel.storage .st-fp .fp-radar svg { position: absolute; left: 50%; top: 50%; width: 17vh; height: 17vh; transform: translate(-50%, -50%); }
#panel-wrap.full #panel.storage .st-fp .fp-st { position: absolute; white-space: nowrap; text-align: center; line-height: 1.15; transform: translate(-50%, -50%); font-family: system-ui, sans-serif; }
#panel-wrap.full #panel.storage .st-fp .fp-st small { display: block; font-size: 1.6vh; color: #d9cdb5; }
#panel-wrap.full #panel.storage .st-fp .fp-st em { font-style: normal; color: #8f8270; }
#panel-wrap.full #panel.storage .st-fp .fp-st b { font-size: 2.3vh; font-weight: 700; }
#panel-wrap.full #panel.storage .st-fp .fp-cs .gpill { font-size: max(15px, 2.6vh) !important; }
/* 총 등급 크게 (2026-11-09 대표) */
#panel-wrap.full #panel.storage .st-fp .fp-st small .n { font-style: normal; font-weight: 700; color: #efe6d2; font-size: 1.15em; }
#panel-wrap.full #panel.storage .st-fp .fp-st b.g { display: block; line-height: 1.1; }
#panel-wrap.full #panel.storage .st-fp .fp-st b.g .gpill { font-size: max(14px, 2.5vh) !important; }
@media (max-height: 500px) {
  #panel-wrap.full #panel.storage .st-fp .fp-st small, #panel-wrap.full #panel.storage .st-fp .fp-bar span, #panel-wrap.full #panel.storage .st-fp .fp-lv small, #panel-wrap.full #panel.storage .st-fp .fp-sk span small { font-size: max(9px, 1.5vh); }
  #panel-wrap.full #panel.storage .st-fp .fp-cs { font-size: max(10px, 1.65vh); }
}
#panel-wrap.full #panel.storage .st-fp .fp-sk { min-height: 0 !important; box-shadow: none !important; border: 0 !important; text-shadow: none !important; transform: none !important; filter: none !important; padding-top: 0; padding-bottom: 0; }
#panel-wrap.full #panel.storage .st-fp .fp-sk { background: linear-gradient(90deg, rgba(239, 230, 210, .10), rgba(239, 230, 210, .03) 75%, transparent) !important; padding: 0 0 0 .6vh !important; color: #efe6d2 !important; }
#panel-wrap.full #panel.storage .st-fp .fp-sk.on { background: linear-gradient(90deg, rgba(201, 162, 86, .55), rgba(201, 162, 86, .12) 80%, transparent) !important; }
2026-11-07 대표) */
#panel-wrap.full #panel.storage .st-fp .fp-nm .rune { position: absolute; left: 0; top: 1vh; margin: 0; font: 800 1.4vh system-ui, sans-serif; padding: .3vh 1vh; border-radius: 99px; color: #fff; }
#panel-wrap.full #panel.storage .st-fp .fp-nm .rune.r1 { background: #1E9E52; }
#panel-wrap.full #panel.storage .st-fp .fp-nm .rune.r2 { background: #7B3FC4; }
/* 펫 화면 막대 이름: EXP·HP (위 막대를 체력으로 잘못 읽지 않게) */
#panel-wrap.full #panel.storage .st-fp .fp-bar span { justify-self: stretch; display: flex; justify-content: space-between; align-items: baseline; }
#panel-wrap.full #panel.storage .st-fp .fp-bar span small { font: 700 1.3vh system-ui, sans-serif; letter-spacing: .06em; color: #9d917a; }
#panel-wrap.full #panel.storage .st-fp .fp-bar.hp span small { color: #c06a5e; }
방생 = 오른쪽 판 오른쪽 아래 구석 (2026-11-09 대표). 아래 단추 줄은 출전·탑승·아이템·뒤로만 */
#panel-wrap.full #panel.storage .st-fp .fp-pen { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: max(24px, 3.2vh); height: max(24px, 3.2vh);
  margin-left: .8vh; vertical-align: middle; position: relative; top: -.4vh; border: 1px solid rgba(239, 230, 210, .45); border-radius: 50%; color: #cdbf9f; }
#panel-wrap.full #panel.storage .st-fp .fp-pen .ico { width: 52%; height: 52%; }
#panel-wrap.full #panel.storage .st-fp .fp-pen:hover { border-color: #e3c98d; color: #efe6d2; }
#panel-wrap.full #panel.storage .st-fp .fp-right { padding-bottom: 5.6vh !important; }
/* 보관소 안 배치: 왼쪽(작은 펫 + 기술) · 오른쪽(능력치 카드) */
#panel.storage .st-pv .st-fp { display: grid; grid-template-columns: 1fr minmax(0, 52%); gap: 1.4vw; height: 100%; min-height: 0; box-sizing: border-box; }
#panel.storage .st-fp .st-fpl { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
#panel.storage .st-fp .st-pic { display: grid; place-items: center; min-height: 0; position: relative; }
#panel.storage .st-fp .st-pic img { max-height: 70%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 1.2vh 1.2vh rgba(0, 0, 0, .6)); }
#panel-wrap.full #panel.storage .st-fp .fp-sk { width: 100%; cursor: default; }
#panel-wrap.full #panel.storage .st-fp .fp-right { position: relative; right: auto; top: auto; width: auto; height: 100%; overflow: hidden; z-index: 0; }
#panel-wrap.full #panel.storage .st-fp .fp-radar { height: 22vh; margin: 2.4vh 0 1.6vh; }
#panel.storage .st-pv:has(.st-fp) { display: grid !important; grid-template-rows: minmax(0, 1fr) auto; }
#panel.storage .st-pv:has(.st-fp) .st-acts { position: static !important; }
#panel.storage .st-pv:has(.st-fp) { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
#panel.storage .st-pv .st-fp { grid-column: 1 / -1; grid-row: 1; width: 100%; grid-area: auto !important; }
#panel.storage .st-pv:has(.st-fp) .st-acts { grid-column: 1 / -1; grid-row: 2; grid-area: auto !important; }
@media (max-height: 500px) {
  #panel.storage .st-fp .st-pic img { max-height: 100%; max-width: 60%; height: 100%; } #panel.storage .st-fp .st-pic { overflow: hidden; }
  #panel.storage .st-fp .st-fpl { grid-template-rows: minmax(0, 1fr) auto; gap: 2px; }
  #panel-wrap.full #panel.storage .st-fp .fp-sk { height: 22px; margin-bottom: 3px; }
  #panel-wrap.full #panel.storage .st-fp .fp-h { margin-bottom: 3px; font-size: 10px !important; }
  #panel-wrap.full #panel.storage .st-fp .fp-dm { width: 16px; height: 16px; }
  #panel-wrap.full #panel.storage .st-fp .fp-dm b { font-size: 8px !important; }
  #panel-wrap.full #panel.storage .st-fp .fp-sk span b { font-size: 10px; } #panel-wrap.full #panel.storage .st-fp .fp-sk span small { font-size: 8px; }
  #panel-wrap.full #panel.storage .st-fp .fp-right { padding: 4px 8px !important; }
  #panel-wrap.full #panel.storage .st-fp .fp-nm { padding: 0 0 2px; } #panel-wrap.full #panel.storage .st-fp .fp-nm b { font-size: 14px; }
  #panel-wrap.full #panel.storage .st-fp .fp-lvb { margin-top: 2px; } #panel-wrap.full #panel.storage .st-fp .fp-lv b { font-size: 18px; } #panel-wrap.full #panel.storage .st-fp .fp-lv small { font-size: 8px; }
  #panel-wrap.full #panel.storage .st-fp .fp-bar { margin-bottom: 1px; } #panel-wrap.full #panel.storage .st-fp .fp-bar span { font-size: 8px; } #panel-wrap.full #panel.storage .st-fp .fp-bar i { height: 4px; }
  #panel-wrap.full #panel.storage .st-fp .fp-hd { margin: 3px 0 1px; font-size: 9px; }
  #panel-wrap.full #panel.storage .st-fp .fp-cs { font-size: 9px; row-gap: 0; } #panel-wrap.full #panel.storage .st-fp .fp-cs .gpill { font-size: 12px !important; }
  #panel-wrap.full #panel.storage .st-fp .fp-radar { height: 92px; margin: 2px 0 0; } #panel-wrap.full #panel.storage .st-fp .fp-radar svg { width: 46px; height: 46px; }
  #panel-wrap.full #panel.storage .st-fp .fp-st small { font-size: 8px; } #panel-wrap.full #panel.storage .st-fp .fp-st b.g .gpill { font-size: 11px !important; }
}
@media (max-height: 380px) {
  #panel-wrap.full #panel.storage .st-fp .fp-radar { height: 74px; } #panel-wrap.full #panel.storage .st-fp .fp-radar svg { width: 38px; height: 38px; }
  #panel-wrap.full #panel.storage .st-fp .fp-hd { display: none; }
  #panel-wrap.full #panel.storage .st-fp .fp-sk { height: 19px; margin-bottom: 2px; }
}

/* 보관소 아래 소지 펫 칸을 크게 (2026-11-10 대표 "너무 작다"): 화면 높이에 맞춰 */
#panel.storage .st-carry { gap: 1vw; }
#panel.storage .st-carry b { font-size: max(14px, 2.4vh); }
#panel.storage .st-k { width: max(96px, 12vh); height: max(64px, 10.5vh); }
#panel.storage .st-k img { max-height: max(40px, 7.4vh) !important; }
#panel.storage .st-k > span { font-size: max(11px, 1.6vh); }
#panel.storage .st-k i { font-size: max(10px, 1.4vh); }
@media (max-height: 500px) { #panel.storage .st-k { width: 74px; height: 52px; } #panel.storage .st-k img { max-height: 34px !important; } #panel.storage .st-carry b { font-size: 12px; } }
/* 아이템 카드 안 사용·장착·빼기 단추: 오른쪽 아래 단추(펫 창·닫기)와 같은 육각 먹 판 모양으로, 옆으로 늘이지 않고 (2026-11-10 대표) */
#panel.cvinv .iv-card.sel { padding-bottom: 2.4vh; }
#panel.cvinv .iv-cact { margin-top: 2vh; justify-content: center; }
#panel-wrap.full #panel.cvinv .iv-cact .iv-act { flex: none; height: 54px; min-height: 54px; padding: 0 30px 0 22px; gap: 10px;
  background: url(img/ui/plate_sel.webp) center / 100% 100% no-repeat !important; font: 700 20px "Noto Serif KR", serif !important; letter-spacing: .06em; color: #f6dc9a !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
#panel.cvinv .iv-cact .iv-act i { width: 32px; height: 32px; border: 1.5px solid #f0d48e; background: radial-gradient(#2a221b, #120e0b); box-shadow: 0 0 10px rgba(240, 212, 142, .45); color: #e3c98d; }
#panel.cvinv .iv-cact .iv-act i .ico { width: 17px; height: 17px; }
@media (max-height: 500px) {
  #panel.cvinv .iv-card.sel { padding-bottom: 8px; }
  #panel.cvinv .iv-cact { margin-top: 6px; }
  #panel-wrap.full #panel.cvinv .iv-cact .iv-act { height: 36px; min-height: 36px; padding: 0 18px 0 13px; gap: 6px; font-size: 14px !important; }
  #panel.cvinv .iv-cact .iv-act i { width: 22px; height: 22px; } #panel.cvinv .iv-cact .iv-act i .ico { width: 12px; height: 12px; }
}
#panel.cvinv .iv-card.sel { z-index: 4; }   /* 고른 물건 카드(단추 있음)가 아래 '장착 중' 카드보다 위에 */
#panel.cvinv .iv-card.cur { top: calc(9vh + 21vh) !important; }   /* 고른 카드가 커진 만큼 '장착 중' 카드를 아래로 */
@media (max-height: 500px) { #panel.cvinv .iv-card.cur { top: calc(9vh + 33vh) !important; } }

/* 위 단추 5개 창 (2026-11-10 대표): 단추 아래 창은 바깥(지도·위 단추)을 그대로 누를 수 있게 */
#panel-wrap.fmpop, #panel-wrap.fdrop { pointer-events: none; }
#panel-wrap.fmpop #panel, #panel-wrap.fdrop #panel { pointer-events: auto; }
/* 캐릭터·펫 창을 위 단추로 열면: 화면 전체 모양 그대로 줄여서 단추 바로 아래 (오른쪽 맞춤) */
#panel-wrap.full.fdrop { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: block; }
#panel-wrap.full.fdrop #panel, #panel-wrap.full.fdrop #panel.u33 { position: absolute !important; inset: var(--drop-top, 0px) 8px auto auto !important; width: 100% !important; height: 100% !important; transform-origin: top right; border: 1px solid rgba(217, 201, 163, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .65); }

/* 마우스 포인터: 33원정대 느낌 검은 먹 화살 (2026-11-10 대표, 금색 룬 화살 위에 검은 먹 화살, 40px, 원본 art/ui/cursor_2026-11-10/gold_black.png). 끝(0,0)이 누르는 자리 */
html, body, body * { cursor: url(img/ui/cursor.png) 0 0, auto !important; }   /* !important: 펫·단추에 올려도 일반 손가락 포인터로 바뀌지 않게 (2026-11-10 대표) */
@supports (cursor: image-set(url(x.png) 1x)) { html, body, body * { cursor: image-set(url(img/ui/cursor.png) 1x, url(img/ui/cursor@2x.png) 2x) 0 0, auto !important; } }
input[type="text"], textarea, [contenteditable] { cursor: text !important; }

/* 왼쪽 위 전체 화면·은화·자동 전투: 모양은 그대로, 크기만 1.5배 (2026-11-10 대표) */
.hud .hud-status > :is(#fs-btn, #hud-silver, #hud-auto) { min-height: 56px !important; height: 56px; font-size: 20px !important; padding-left: 26px !important; padding-right: 26px !important; }
.hud .hud-status > #fs-btn { width: 56px; padding: 0 !important; display: grid; place-items: center; }
.hud .hud-status > #fs-btn[hidden] { display: none; }
.hud .hud-status > :is(#fs-btn, #hud-silver, #hud-auto) .ico { width: 22px !important; height: 22px !important; }
@media (max-width: 760px), (max-height: 500px) {
  .hud .hud-status > :is(#fs-btn, #hud-silver, #hud-auto) { min-height: 42px !important; height: 42px; font-size: 15px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .hud .hud-status > #fs-btn { width: 42px; }
  .hud .hud-status > :is(#fs-btn, #hud-silver, #hud-auto) .ico { width: 17px !important; height: 17px !important; }
}

/* 캐릭터·펫 창을 위 단추 아래로 띄울 때도 감정·진형·메뉴 창과 같은 금색 테두리 (2026-11-10 대표)
   창을 통째로 줄여(scale) 띄우므로 테두리 굵기는 줄인 만큼 되돌려 화면에서 같은 굵기로 */
#panel-wrap.full.fdrop #panel, #panel-wrap.full.fdrop #panel.u33 { border: calc(1px / var(--drop-s, 1)) solid rgba(217, 201, 163, .28) !important;
  box-shadow: inset 0 0 0 calc(4px / var(--drop-s, 1)) rgba(10, 9, 8, .9), inset 0 0 0 calc(5px / var(--drop-s, 1)) rgba(217, 201, 163, .14), 0 14px 40px rgba(0, 0, 0, .65) !important; }
#panel-wrap.full.fdrop #panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  box-shadow: inset 0 0 0 calc(4px / var(--drop-s, 1)) rgba(10, 9, 8, .9), inset 0 0 0 calc(5px / var(--drop-s, 1)) rgba(217, 201, 163, .14); }

/* 캐릭터 창 오른쪽 판: 펫 창과 같은 이름·큰 레벨·EXP/HP·최대 HP·마름모 그래프 (2026-11-10 대표). 아래는 펫 창 규칙을 그대로 옮긴 것 */
#panel-wrap.full #panel.charview .cfp .fp-nm { position: relative; text-align: center; padding: .2vh 0 1vh; }
#panel-wrap.full #panel.charview .cfp .fp-nm b { font-size: 4.2vh; font-weight: 700; letter-spacing: .14em; }
#panel-wrap.full #panel.charview .cfp .fp-nm .el { position: absolute; right: 0; top: 1vh; font-family: system-ui, sans-serif; font-size: 1.4vh; }
#panel-wrap.full #panel.charview .cfp .fp-nm::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 201, 163, .6), transparent); }
#panel-wrap.full #panel.charview .cfp .fp-lvb { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6vh; margin-top: 1.4vh; align-items: end; }
#panel-wrap.full #panel.charview .cfp .fp-lv { display: grid; line-height: 1; justify-items: start; gap: .3vh; }
#panel-wrap.full #panel.charview .cfp .fp-lv small { font-size: 1.5vh; color: #cdbf9f; }
#panel-wrap.full #panel.charview .cfp .fp-lv b { font-size: 5.4vh; font-weight: 700; color: #e9d6a4; }
#panel-wrap.full #panel.charview .cfp .fp-lv .rune { font-size: 1.3vh; }
#panel-wrap.full #panel.charview .cfp .fp-bar { display: grid; gap: .25vh; margin-bottom: .6vh; }
#panel-wrap.full #panel.charview .cfp .fp-bar span { justify-self: end; font-size: 1.5vh; color: #cdbf9f; }
#panel-wrap.full #panel.charview .cfp .fp-bar i { display: block; height: 1vh; background: #0c0a08; clip-path: polygon(1.2% 0, 98.8% 0, 100% 50%, 98.8% 100%, 1.2% 100%, 0 50%); box-shadow: inset 0 0 0 1px rgba(217, 201, 163, .4); position: relative; }
#panel-wrap.full #panel.charview .cfp .fp-bar i u { position: absolute; left: 1.2%; top: 20%; bottom: 20%; display: block; max-width: 97.6%; }
#panel-wrap.full #panel.charview .cfp .fp-bar.xp u { background: linear-gradient(90deg, #8c7445, #e9d6a4); } #panel-wrap.full #panel.charview .cfp .fp-bar.hp u { background: linear-gradient(90deg, #6e1414, #b62a22); }
#panel-wrap.full #panel.charview .cfp .fp-cs { display: grid; grid-template-columns: auto 1fr; column-gap: 2vh; row-gap: .5vh; font-family: system-ui, sans-serif; font-size: 1.75vh; align-items: center; }
#panel-wrap.full #panel.charview .cfp .fp-cs span { color: #d9cdb5; } #panel-wrap.full #panel.charview .cfp .fp-cs b { text-align: right; font-weight: 700; color: #efe6d2; }
#panel-wrap.full #panel.charview .cfp .fp-radar { position: relative; width: 100%; height: 27vh; margin: 4.2vh 0 3.2vh; }
#panel-wrap.full #panel.charview .cfp .fp-radar svg { position: absolute; left: 50%; top: 50%; width: 17vh; height: 17vh; transform: translate(-50%, -50%); }
#panel-wrap.full #panel.charview .cfp .fp-st { position: absolute; white-space: nowrap; text-align: center; line-height: 1.15; transform: translate(-50%, -50%); font-family: system-ui, sans-serif; }
#panel-wrap.full #panel.charview .cfp .fp-st small { display: block; font-size: 1.6vh; color: #d9cdb5; }
#panel-wrap.full #panel.charview .cfp .fp-st em { font-style: normal; color: #8f8270; }
#panel-wrap.full #panel.charview .cfp .fp-st b { font-size: 2.3vh; font-weight: 700; }
#panel-wrap.full #panel.charview .cfp .fp-cs .gpill { font-size: max(15px, 2.6vh) !important; }   /* 총 등급 크게 (2026-11-09 대표) */
#panel-wrap.full #panel.charview .cfp .fp-st small .n { font-style: normal; font-weight: 700; color: #efe6d2; font-size: 1.15em; }
#panel-wrap.full #panel.charview .cfp .fp-st b.g { display: block; line-height: 1.1; }
#panel-wrap.full #panel.charview .cfp .fp-st b.g .gpill { font-size: max(14px, 2.5vh) !important; }   /* 능력치별 등급: 숫자 자리에 크게 */
#panel-wrap.full #panel.charview .cfp .fp-nm .rune { position: absolute; left: 0; top: 1vh; margin: 0; font: 800 1.4vh system-ui, sans-serif; padding: .3vh 1vh; border-radius: 99px; color: #fff; }
#panel-wrap.full #panel.charview .cfp .fp-nm .rune.r1 { background: #1E9E52; }
#panel-wrap.full #panel.charview .cfp .fp-nm .rune.r2 { background: #7B3FC4; }
#panel-wrap.full #panel.charview .cfp .fp-bar span { justify-self: stretch; display: flex; justify-content: space-between; align-items: baseline; }
#panel-wrap.full #panel.charview .cfp .fp-bar span small { font: 700 1.3vh system-ui, sans-serif; letter-spacing: .06em; color: #9d917a; }
#panel-wrap.full #panel.charview .cfp .fp-bar.hp span small { color: #c06a5e; }
#panel-wrap.full #panel.charview .cfp .fp-bar i { position: relative; }
#panel-wrap.full #panel.charview .cfp .ptabs { margin-top: 1.6vh; }
#panel-wrap.full #panel.charview .cfp .fp-cs { margin-top: 1.4vh; font-size: 1.7vh; }
#panel-wrap.full #panel.charview .cfp .fp-radar { height: 25vh; margin: 2.6vh 0 2.4vh; }
#panel-wrap.full #panel.charview .cfp .fp-st .adds { display: block; font-style: normal; line-height: 1; }
#panel-wrap.full #panel.charview .cfp .fp-st .adds em { font-style: normal; font-size: 1.4vh; font-weight: 700; margin: 0 2px; }
#panel-wrap.full #panel.charview .cfp .fp-st .adds .up { color: #8fd18f; } #panel-wrap.full #panel.charview .cfp .fp-st .adds .gear { color: #e9c46a; }
#panel-wrap.full #panel.charview .cfp .fp-st .adds .ride { color: #7fb8e8; } #panel-wrap.full #panel.charview .cfp .fp-st .adds .ride.down { color: #e08a7a; }
#panel-wrap.full #panel.charview .cfp .fp-st .pm { display: flex; gap: 4px; justify-content: center; margin-top: 3px; }
#panel-wrap.full #panel.charview .cfp .fp-st .pm button { all: unset; cursor: pointer; width: 2.6vh; height: 2.6vh; display: grid; place-items: center; font: 700 1.8vh system-ui; color: #f0d48e; border: 1px solid rgba(240, 212, 142, .6); border-radius: 50%; background: rgba(20, 15, 10, .8); }
#panel-wrap.full #panel.charview .cfp .fp-st .pm button:disabled { opacity: .3; cursor: default; }
#panel-wrap.full #panel.charview .cfp .fp-radar.can { margin-bottom: 4vh; }
#panel-wrap.full #panel.charview .cfp .pts-box { justify-content: center; gap: 12px; background: none; border: 0; } #panel-wrap.full #panel.charview .cfp .pts-box .spacer { display: none; }
#panel-wrap.full #panel.charview .cfp .fp-st .pm button.p5 { width: auto; padding: 0 .8vh; border-radius: 1.3vh; font-size: 1.4vh; }
#panel-wrap.full #panel.charview .cfp .fp-cs .pts-box { grid-column: 1 / -1; margin: .4vh 0 0; padding: 0; justify-content: flex-end; }
#panel-wrap.full #panel.charview .cfp .fp-radar.can { height: 27vh; margin: 2vh 0 2.6vh; }
/* 은화 칸: 숫자가 '9,999'·'15.3만'까지 늘어도 칸 크기가 그대로 (2026-11-10 대표) */
.hud .hud-status > #hud-silver > span { display: inline-block; min-width: 4.4em; text-align: center; }

/* 캐릭터 창 오른쪽 아래 단추 줄을 펫 창과 같은 기준점(오른쪽·아래 여백)으로 (2026-11-10 대표: 두 창의 오와 열이 달랐음) */
#panel-wrap.full #panel.cvinv .iv-foot { right: 2.2vw !important; bottom: 2.2vh !important; }
@media (max-height: 500px) { #panel-wrap.full #panel.cvinv .iv-foot { right: max(8px, env(safe-area-inset-right)) !important; bottom: max(4px, env(safe-area-inset-bottom)) !important; } }

#panel-wrap.full #panel.charview .cfp .fp-cs .pts-box { background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; }

/* 전투 우리 편 주인공: 뒷모습 서 있기 그림(사람 키가 그림의 92.7%)을 앞모습 그림과 같은 키로 (2026-11-10) */
.stage .unit .art img.char-art.pic.stand { height: 107.9%; bottom: -1.3%; }

/* 명령 줄: 쓸 수 없는 단추(잡을 펫이 없을 때 포획 등)를 흐리게 (2026-11-10: 펼쳐지는 움직임이 opacity를 1로 덮어써서 안 흐려지던 것 → filter로) */
#battle.s33 .x-rows > .x-row:disabled { filter: opacity(.45) saturate(.6); }

/* 공격 누른 뒤 고르기 전만: 적 발밑 원 아래 가운데에 전열·후열 (2026-11-10 대표, 크기가 달라도 줄이 맞게 발에 붙임) */
#battle.rows-show .stage .slot[data-team="e"]::after { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 115%); padding: 2px 10px; border-radius: 4px; font: 700 14px/1.3 sans-serif; letter-spacing: .1em; pointer-events: none; z-index: 3; white-space: nowrap; }
#battle.rows-show .stage .slot[data-team="e"]:is([data-slot="0"], [data-slot="1"], [data-slot="2"], [data-slot="3"])::after { content: "전열"; background: rgba(40, 28, 14, .85); color: #ffd27a; border: 1px solid #c9913f; }
#battle.rows-show .stage .slot[data-team="e"]:is([data-slot="4"], [data-slot="5"], [data-slot="6"], [data-slot="7"])::after { content: "후열"; background: rgba(30, 34, 44, .8); color: #dfe6ef; border: 1px solid #3a4150; }

/* 'OOO의 차례' 제목: 맨 위 단추(공격)와 같은 폭·같은 기울기로 바로 위에 (2026-11-10 대표: 부채꼴과 어긋나 보였음) */
#battle.s33 .x-cmd:not(.sk):not(.asking) .x-who { width: 250px; box-sizing: border-box; padding-left: 22px; margin: 0 0 2px 0; transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg)); transform-origin: 0 50%; }
@media (max-width: 760px), (max-height: 500px) { #battle.s33 .x-cmd:not(.sk):not(.asking) .x-who { width: 168px; padding-left: 18px; } }

/* 시련 도전 확인 창 (2026-11-10 대표): 도전 = '출전 중'과 같은 보랏빛 먹 판 + 금빛 글씨, 닫기 = 보통 먹 판 */
#panel.tr-confirm { width: min(520px, 100%); }
#panel.tr-confirm .tr-ask { text-align: center; font-weight: 700; color: #f3d78e !important; margin: 6px 0 2px; background: none !important; border: 0 !important; box-shadow: none !important; font-size: 1.05rem; }
#panel.tr-confirm .tr-btns { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
#panel.tr-confirm .tr-btns button { all: unset; box-sizing: border-box; cursor: pointer; min-width: 150px; height: 54px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center;
  font: 700 20px "Noto Serif KR", serif; letter-spacing: .1em; text-shadow: 0 1px 3px #000; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); transition: filter .15s, transform .12s; }
#panel.tr-confirm .tr-go { background: url(img/ui/plate_sel.webp) center / 100% 100% no-repeat !important; color: #f6dc9a !important; border: 0 !important; box-shadow: none !important; }
#panel.tr-confirm .tr-no { background: url(img/ui/plate.webp) center / 100% 100% no-repeat !important; color: #efe6d2 !important; border: 0 !important; box-shadow: none !important; }
#panel.tr-confirm .tr-btns button:hover { filter: drop-shadow(0 0 10px rgba(227, 190, 110, .55)) drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); color: #ffe9b0; }
#panel.tr-confirm .tr-btns button:active { transform: translateY(2px); }
@media (max-height: 500px) { #panel.tr-confirm .tr-btns button { min-width: 120px; height: 42px; font-size: 16px; } }

/* 겨눈 적 알림 (2026-11-10 대표 "마우스가 가면 걔를 선택하고 있는지 알려주는 신호"): 겨눈 적 몸 둘레에 흰 테두리 + 금빛 */
/* 맨 앞으로 올리기는 뺌 (2026-11-10 대표): 대신 겨누지 않은 적을 조금 투명하게 해서 뒤에 가려진 겨눈 적이 비쳐 보이게 */
.stage .unit.foe.target:not(.aim) .art { opacity: .78; transition: opacity .15s; }
/* 못 고르는 적(앞이 막힌 후열)도 같은 정도로만 (예전 .55는 너무 투명, 2026-11-10 대표) */
.stage .unit.foe.blocked { opacity: 1; }
.stage .unit.foe.blocked .art { opacity: .78; }
.stage .unit.foe.aim .art img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 7px rgba(255, 214, 92, .95)) !important; }
/* 겨눈 적 머리 위 화살표: 조금 크게, 빨갛게 (2026-11-10 대표). 다른 고를 수 있는 적은 작은 초록 화살표 그대로 */
.stage .unit.target .head::before { font-size: clamp(12px, 1.4vw, 18px); }   /* 고를 수 있는 적 화살표도 화면에 맞춰 (PC 18px·휴대폰 12px), 겨눈 적보다 작게 */
.stage .unit.target.aim .head::before { color: #ff3b2f; font-size: clamp(16px, 1.75vw, 22px); text-shadow: 0 0 2px #1b2530, 0 1px 0 #1b2530, 0 0 8px rgba(255, 59, 47, .8); }   /* 깜빡임은 뺌, 크기는 화면에 맞춰 PC 약 22px·휴대폰 약 16px (2026-11-10 대표) */
/* 한 열 기술로 고를 때: 같이 맞는 적은 화살표만 빨강 (고른 적은 위의 큰 빨간 화살표 + 흰 테두리, 2026-11-10 대표) */
.rowpick .stage .unit.foe.target .head::before { color: #ff3b2f; }

/* 보스 도전 창 (2026-11-10 대표): 왼쪽 '도전'·오른쪽 '뒤로' 두 단추를 같은 크기로 */
#panel .row.boss-row > button { width: 128px; min-width: 128px; padding-left: 0 !important; padding-right: 0 !important; justify-content: center; text-align: center; box-sizing: border-box; }
@media (max-width: 760px), (max-height: 500px) { #panel .row.boss-row > button { width: 104px; min-width: 104px; } }
/* 메뉴에서 연 퀘스트 창: 높이 제한 없이 그리고, 들어갈 자리에 맞게 통째로 줄인다 (스크롤 없이, 2026-11-10) */
#panel-wrap.fmpop #panel.questview { max-height: none !important; overflow: visible !important; }

/* 전투 아래 띠 (2026-11-10 대표 1안): 지도의 아래 띠 그대로, 오른쪽 아래 우리 편 카드는 없앰. 마우스를 올린 유닛 정보는 띠의 빈 곳(장소 왼쪽)에 */
#battle .x-party { display: none !important; }
#battle .b-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; padding-right: 18px; pointer-events: auto; }
#battle .b-band .band-pet { margin-left: 22px; }
#battle .b-band .band-info { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #efe6d2; font-size: .9rem; }
#battle .b-band .band-info b { font-size: 1.05em; }
#battle .b-band .band-info em { font-style: normal; font-weight: 800; color: #e9cf8f; }
#battle .b-band .band-info .b-el { font-style: normal; font-weight: 800; color: var(--c); }
#battle .b-band .band-place { margin-left: 26px; }
#battle.s33 .x-side { bottom: calc(var(--band-h) + 10px + env(safe-area-inset-bottom)); }   /* 도망 줄은 아래 띠 위로 */
/* 좌클릭으로 찍은 유닛: 발밑 동그란 띠 (2026-11-10 대표). 명령을 기다릴 때만 보임 */
#battle .stage .unit.pinned .foot { box-shadow: 0 0 0 4px #ffe9a8, 0 0 16px 4px rgba(255, 214, 120, .8); background: radial-gradient(closest-side, rgba(255, 226, 150, .45), transparent); }
/* 전투 아래 띠: 이름 Lv · 속성 · HP 바 · 숫자 (우리 편·오른쪽 적 같은 모양), 체력바 20% 짧게 (2026-11-10 대표) */
#battle .b-band .mini-hp { width: 51px !important; }
#battle .b-band .b-el { font-style: normal; font-weight: 800; color: var(--c); font-size: .82rem; margin: 0 2px 0 4px; }
#battle .b-band .band-hp, #battle .b-band .band-pet { gap: 5px; }
#battle .b-band .b-st { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; line-height: 1.1; margin: 0 3px 0 4px; }
#battle .b-band .b-st > * { display: block; line-height: 1.1; }
#battle .b-band .b-st .b-el { margin: 0; font-size: .72rem; }
#battle .b-band .b-st .lv { font-size: .72rem; }
#battle .b-band .b-hp { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
#battle .b-band .b-hp .tnum { font-size: .72rem; line-height: 1; }
#battle .b-band .b-hp { align-items: stretch; }
#battle .b-band .b-hp .mini-hp { width: 100% !important; }   /* 체력바 길이 = 아래 숫자 폭 */
#battle .b-band .b-st { gap: 6px; }   /* 속성(위)과 Lv(아래) 사이 행간을 조금 띄움 (2026-11-10 대표) */
#battle .b-band .b-hp { gap: 6px; }   /* 체력바(위)와 숫자(아래) 사이도 속성·Lv와 같은 행간 (2026-11-10 대표) */
#battle .b-band .b-st .b-el { font-size: .84rem; }   /* 속성 글자 = Lv 글자 크기 (13.4px, 2026-11-10 대표) */
#battle .b-band .b-hp { font-size: .88rem; width: 5.55em; align-items: center; }   /* 체력바 길이 고정(네 자리/네 자리 폭), 숫자는 그 아래 가운데 */
#battle .b-band .b-hp .tnum { text-align: center; font-size: 1em !important; }
/* 우리 편 5~6칸: 사이 간격과 이름 글씨를 조금 줄여 한 줄에 (2026-11-10 대표) */
#battle .b-band.many .band-pet { margin-left: 14px; }
#battle .b-band.many :is(.band-who, .band-pname) b { font-size: .95em; }
#battle .b-band.many { padding-left: 12px; padding-right: 12px; }
/* 우리 편 칸 사이 흐린 금빛 세로 선 (2026-11-10 대표) */
#battle .b-band .band-pet { position: relative; }
#battle .b-band .band-pet::before { content: ""; position: absolute; left: calc(var(--sep-gap, 32px) / -2); top: 50%; height: 26px; width: 1px; transform: translate(-50%, -50%); background: linear-gradient(transparent, rgba(233, 207, 143, .45), transparent); }
#battle .b-band { --sep-gap: 32px; } #battle .b-band.many { --sep-gap: 24px; }   /* 앞 칸 끝~다음 칸 사이 폭: 선은 그 한가운데 */

/* 지도 아래 띠도 전투 띠와 같은 모양 (2026-11-10 대표): 속성(위)/Lv(아래), 빨간 바(위)/숫자(아래, 가운데), 칸 사이 흐린 금빛 선 */
#hud-char .band-hp, #hud-char .band-pet { gap: 5px; }
#hud-char .b-st { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; line-height: 1.1; margin: 0 3px 0 4px; }
#hud-char .b-st > * { display: block; line-height: 1.1; }
#hud-char .b-st .b-el { font-style: normal; font-weight: 800; color: var(--c); font-size: .84rem; margin: 0; }
#hud-char .b-st .lv { font-size: .72rem; }
#hud-char .b-hp { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; font-size: .88rem; width: 5.55em; }
#hud-char .b-hp .mini-hp { width: 100% !important; }
#hud-char .b-hp .tnum { text-align: center; font-size: 1em !important; line-height: 1; }
#hud-char .band-pet { position: relative; }
#hud-char .band-pet::before { content: ""; position: absolute; left: -16px; top: 50%; height: 26px; width: 1px; transform: translate(-50%, -50%); background: linear-gradient(transparent, rgba(233, 207, 143, .45), transparent); }