/* ===== UI v3 (2026-11-09) =====
   테일즈 오브 베스페리아 · 파이널 판타지 느낌: 왼쪽 세로 메뉴 + 오른쪽 내용, 큰 글씨, 금색 선택 막대.
   그림 파일은 손대지 않고(기존 패널 그림 그대로) 배치·글자·색만 바꾼다. */
:root{--ui-gold:#ecc979;--ui-gold2:#b38b3c;--ui-ink:#f5f0e3;--ui-sub:#b4c6da;--ui-line:rgba(236,201,121,.32);
 --ui-sel:linear-gradient(90deg,rgba(236,201,121,.42),rgba(236,201,121,.10) 75%,transparent);
 --ui-glass:linear-gradient(160deg,rgba(18,36,66,.93),rgba(7,15,32,.95));
 --ui-font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
#overlay,#location,#walkStatus,.battle-ui{font-family:var(--ui-font)}

/* 메뉴 창이 오른쪽으로 밀려 잘리던 문제: 창은 늘 화면 기준으로 놓는다 */
.menu.window{position:absolute}

/* ── 필드 메뉴: 왼쪽 세로 명령 + 오른쪽 내용 ── */
.menu.v2{inset:4% 4%;display:grid;grid-template-columns:clamp(150px,17vw,214px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px 18px;font-size:clamp(14px,1.45vw,19px);color:var(--ui-ink)}
.menu.v2 .tabs{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;flex-wrap:nowrap;gap:3px;padding:6px 12px 6px 0;border-right:1px solid var(--ui-line);min-height:0;overflow:auto}
#overlay .menu.v2 .tabs button{border-image:none!important;background:none;border-radius:6px;text-align:left;justify-content:flex-start;padding:10px 14px 10px 26px;min-height:46px;min-width:0;font-size:1.02em;font-weight:600;color:var(--ui-ink);position:relative;filter:none;transform:none}
#overlay .menu.v2 .tabs button:hover,#overlay .menu.v2 .tabs button:focus-visible{background:rgba(255,255,255,.06)}
#overlay .menu.v2 .tabs button.on{background:var(--ui-sel)!important;color:var(--ui-gold);box-shadow:inset 3px 0 0 var(--ui-gold)}
#overlay .menu.v2 .tabs button.on::before{content:"▶";position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:.62em;color:var(--ui-gold)}
#overlay .menu.v2 .tabs button.locked{opacity:.4}
.menu.v2 .tabs .gold{margin:auto 0 0;padding:10px 12px;border-top:1px solid var(--ui-line);color:var(--ui-gold);font-size:1.1em;font-weight:700;text-align:right;letter-spacing:.03em}
.menu.v2 .choices{grid-column:2;grid-row:1;padding-right:52px;min-height:0}
.menu.v2 .choices:empty{display:none}
.menu.v2 .tabbody{grid-column:2;grid-row:2;overflow:auto;padding:4px 8px 4px 2px;min-height:0}
.menu.v2>p{grid-column:2;grid-row:3;margin:0;padding:8px 14px;border-left:3px solid var(--ui-gold);background:rgba(236,201,121,.08);color:var(--ui-ink)}
#overlay .menu.v2 .close{position:absolute;right:12px;top:8px;width:42px;height:42px;font-size:24px;color:var(--ui-gold);z-index:2}
.menu.v2 h3{color:var(--ui-gold);font-size:1em;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--ui-line)}
.menu.v2 h3 small{color:var(--ui-sub);font-weight:400;margin-left:6px}
.menu.v2 .jobs{max-height:none}

/* 파티 카드: 크게, 두 줄 */
.pcards{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px}
.pcard{grid-template-columns:96px 1fr;padding:14px 16px;gap:14px}
.pcard canvas{width:96px;height:108px}
.pcard b{font-size:1.15em}
.pcard .job{display:block;margin:2px 0 4px;font-size:.82em}
.pcard small{font-size:.82em;font-variant-numeric:tabular-nums}
.gauge{height:13px}

/* 공용 목록 줄 */
.itemrow,.shop-row{transition:background .12s}
.itemrow:hover,.shop-row:hover{filter:brightness(1.12)}
.objective{font-size:1.02em}

/* ── 대화창: 이름표를 창 위에 따로, 글씨 크게 ── */
.dialogue{left:5%;right:5%;bottom:3%;min-height:25%;padding:26px 30px 20px;gap:22px;font-family:var(--ui-font)}
.dialogue .dlgtools{display:none!important}
.dialogue .speaker{position:absolute;top:-17px;left:150px;margin:0;padding:5px 26px 6px;font-size:clamp(14px,1.45vw,19px);color:var(--ui-gold);background:var(--ui-glass);border:1px solid var(--ui-gold2);border-radius:4px 16px 4px 16px;box-shadow:0 3px 10px #0008;letter-spacing:.06em;white-space:nowrap}
.dialogue .portrait.none+div .speaker{left:28px}
.dialogue .text{font-size:clamp(16px,1.65vw,22px);line-height:1.75;color:var(--ui-ink);text-shadow:0 1px 2px #000a;padding-top:4px}
.dialogue .next{right:18px;bottom:8px;font-size:16px;color:var(--ui-gold);animation:uiNext 1s ease-in-out infinite}
@keyframes uiNext{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(4px);opacity:.55}}

/* 화면 위 장소 이름 · 걸음 상태 · 메뉴 단추 */
#location{left:2.5%;top:3.5%;padding:6px 26px 7px 18px;background:linear-gradient(90deg,rgba(7,15,32,.85),rgba(7,15,32,0));border-left:3px solid var(--ui-gold);font-size:clamp(14px,1.5vw,20px)}
#walkStatus{font-family:var(--ui-font)}

/* ── 전투: 명령은 목록처럼, 선택은 금색 막대 ── */
.battle-ui .battle-bottom{left:2.5%;right:2.5%;bottom:2.5%;height:25%;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:12px}
.battle-ui .battle-window{background:var(--ui-glass);border:1px solid var(--ui-gold2);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 6px 18px #000a;padding:10px 16px}
.battle-ui .battle-caption{color:var(--ui-gold);font-weight:700;font-size:clamp(12px,1.3vw,17px);padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid var(--ui-line)}
.battle-ui .battle-window{overflow:hidden;display:flex;flex-direction:column}
.battle-ui .battle-commands{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 10px;flex:1;min-height:0;max-height:none;overflow:auto;align-content:start}
.battle-ui .battle-commands.many{grid-template-columns:repeat(3,minmax(0,1fr))}
.battle-ui .battle-commands button,.battle-ui .battle-continue{border-image:none!important;background:none;border:0;border-radius:5px;min-height:34px;padding:3px 10px 3px 24px;position:relative;font-size:clamp(13px,1.4vw,18px);font-weight:600;color:var(--ui-ink);filter:none;transform:none;text-align:left}
.battle-ui .battle-commands button:hover,.battle-ui .battle-commands button:focus,.battle-ui .battle-continue:hover,.battle-ui .battle-continue:focus{background:var(--ui-sel);color:var(--ui-gold);border:0;outline:none}
.battle-ui .battle-commands button:focus::before,.battle-ui .battle-commands button:hover::before{content:"▶";position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:.6em;color:var(--ui-gold)}
.battle-ui .battle-commands button:disabled{color:#6f7f93;background:none}
.battle-ui .battle-continue{text-align:center;padding-left:10px;border:1px solid var(--ui-gold2)}
.battle-ui .battle-member{font-size:clamp(13px,1.45vw,19px);font-weight:600;border-radius:5px;padding:0 6px}
.battle-ui .battle-member.selected{color:var(--ui-gold);background:var(--ui-sel)}
.battle-ui .battle-member small{color:var(--ui-sub)}
.battle-ui .battle-banner{font-family:var(--ui-font);background:var(--ui-glass);border:1px solid var(--ui-gold2);border-radius:10px;letter-spacing:.03em}
.battle-ui .battle-result{color:var(--ui-gold);font-weight:700;letter-spacing:.08em}
.battle-ui .battle-rewards{font-size:clamp(13px,1.45vw,19px)}

/* ── 상점: 창 안에 다 들어오게 ── */
.menu.window.shop{font-size:clamp(14px,1.4vw,18px);top:5%;bottom:5%;left:50%;right:auto;transform:translateX(-50%);display:flex;flex-direction:column;overflow:hidden}
.menu.window.shop .shop-list{flex:1 1 auto;min-height:0;max-height:none}
.menu.window.shop h2 small{margin-right:56px}
.menu.window.shop>*{flex:none}
.menu.window.shop>.shop-list{flex:1 1 auto}
.shop-name b{font-size:1.02em}

/* 장비·직업 글자 키우기 */
.eqslot .sn{font-size:13px;opacity:.8}
.eqslot small{font-size:12px}
.jt small{font-size:12px}
.jobs .jdesc{font-size:.85em;color:var(--ui-sub)}
.jobs .jsk b{color:var(--ui-ink)}

/* 작은 화면 */
@media (max-width:820px),(max-height:480px){
 .menu.v2{inset:2% 2%;grid-template-columns:118px minmax(0,1fr);gap:6px 10px;font-size:13px}
 #overlay .menu.v2 .tabs button{min-height:38px;padding:6px 8px 6px 20px;font-size:13px}
 #overlay .menu.v2 .tabs button.on::before{left:6px}
 .dialogue{padding:18px 16px 12px;gap:12px}
 .dialogue .speaker{left:84px;top:-14px;padding:3px 16px}
 .dialogue .text{font-size:15px;line-height:1.55}
 .pcard{grid-template-columns:70px 1fr;padding:10px}
 .pcard canvas{width:70px;height:80px}
}
#overlay .menu.window.shop>.close{position:absolute;right:14px;top:10px;width:42px;height:42px;min-width:0;z-index:2}
.menu.window.shop{width:min(900px,94%)!important;max-width:none}
/* 대열 단추 */
.pcard .prow{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
#overlay .pcard .prow button{min-height:34px;min-width:64px;padding:2px 12px;font-size:.85em}
.pcard .prow small{color:var(--ui-sub);font-size:.75em}
#overlay .pcard .prow button.selected{border-image:none!important;background:linear-gradient(180deg,#f2d488,#c99b45);color:#2a1d10;border-radius:6px;text-shadow:none}

/* ===== 전투 UI v2 (파이널 판타지 식) =====
   아래 창을 낮게: 왼쪽 = 적 이름 (명령 차례엔 명령 목록), 오른쪽 = 동료 이름·HP·MP 한 줄씩. 고전 FF 파란 창. */
.battle-ui{--ff-win:linear-gradient(180deg,rgba(40,62,150,.94),rgba(14,22,74,.96));--ff-line:#d9dff0}
.battle-ui .battle-bottom{left:1.5%;right:1.5%;bottom:1.5%;height:21%;grid-template-columns:minmax(0,30%) minmax(0,1fr);gap:8px}
.battle-ui .battle-window{background:var(--ff-win);border:2px solid var(--ff-line);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),0 4px 12px #0009;padding:6px 12px}
.battle-ui .battle-caption{color:#fff;border-bottom:1px solid rgba(255,255,255,.22);font-size:clamp(11px,1.15vw,15px);padding-bottom:3px;margin-bottom:3px}
.battle-ui .battle-commands{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
.battle-ui .battle-commands.many{grid-template-columns:repeat(2,minmax(0,1fr))}
.battle-ui .battle-commands button,.battle-ui .battle-continue{min-height:27px;padding:1px 8px 1px 22px;font-size:clamp(12px,1.25vw,16px);color:#fff;text-shadow:1px 1px 0 #000}
.battle-ui .battle-commands button:hover,.battle-ui .battle-commands button:focus{background:rgba(255,255,255,.14);color:#fff}
.battle-ui .battle-commands button:focus::before,.battle-ui .battle-commands button:hover::before{content:"☛";font-size:.95em;left:3px;color:#fff}
.battle-ui .battle-commands button:disabled{color:#8590b8}
.battle-ui .battle-foes{display:flex;flex-direction:column;gap:2px;font-size:clamp(12px,1.3vw,17px);color:#fff;text-shadow:1px 1px 0 #000;overflow:auto;padding-top:2px}
.battle-ui .battle-window.left:not(.cmd) .battle-caption{display:none}
.battle-ui .battle-member{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr);gap:12px;min-height:26px;font-size:clamp(12px,1.3vw,17px);color:#fff;text-shadow:1px 1px 0 #000;padding:0 6px;border-radius:4px}
.battle-ui .battle-window.four .battle-member{min-height:24px;font-size:clamp(11px,1.2vw,16px)}
.battle-ui .battle-member.selected{color:#ffe9a0;background:rgba(255,255,255,.14)}
.battle-ui .battle-member small{color:#b9c6ff}
.battle-ui .battle-continue{border:1px solid var(--ff-line);text-align:center;padding-left:8px}
.battle-ui .battle-banner{background:var(--ff-win);border:2px solid var(--ff-line);border-radius:8px;color:#fff;text-shadow:1px 1px 0 #000}
.battle-ui .battle-result{color:#ffe9a0}
/* 창의 × 단추: 테두리·포커스 상자 없이 글자만 */
#overlay button.close,#overlay button.close:hover,#overlay button.close:focus,#overlay button.close:focus-visible{border:0!important;border-image:none!important;outline:none!important;background:none!important;box-shadow:none!important}
#overlay button.close:hover,#overlay button.close:focus-visible{color:#fff}
.battle-ui .battle-commands button.wide{grid-column:span 2}
#overlay .battle-ui .battle-commands button{margin:0!important;min-height:26px;line-height:1.2;padding:2px 8px 2px 22px!important}
/* 전투 창 3칸(FF5 식): 명령 | 대상·기술 고르는 창(평소엔 적 이름) | 동료.  대기 중엔 2칸(FF2 식): 적 이름 | 동료 */
.battle-ui .battle-bottom{height:23%}
.battle-ui .battle-bottom.three{grid-template-columns:minmax(0,17%) minmax(0,27%) minmax(0,1fr)}
.battle-ui .battle-bottom.two{grid-template-columns:minmax(0,34%) minmax(0,1fr)}
.battle-ui .battle-commands.one{grid-template-columns:1fr!important;align-content:start}
.battle-ui .battle-commands.sub{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start}
.battle-ui .cmdwin{padding-top:8px}
#overlay .battle-ui .battle-commands button[data-top]{color:#c8d0f0}
#overlay .battle-ui .battle-commands button.cur{background:rgba(255,255,255,.16);color:#ffe9a0}
#overlay .battle-ui .battle-commands button.cur::before{content:"☛";position:absolute;left:3px;top:50%;transform:translateY(-50%);color:#ffe9a0}
.battle-ui .battle-foes>div{display:flex;justify-content:space-between;gap:10px;padding:1px 4px}
.battle-ui .battle-foes b{font-weight:600}
.battle-ui .battle-window.mid .battle-caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overlay .battle-ui .autooff{margin-top:6px!important}
#overlay .battle-ui .battle-commands.one button{min-height:24px}
.battle-ui .cmdwin{padding-top:5px;padding-bottom:4px}
/* 이전 단추: 명령 창 왼쪽 아래 고정 */
.battle-ui .battle-bottom{height:25%}
.battle-ui .cmdwin{display:flex;flex-direction:column}
.battle-ui .cmdwin .battle-commands.one{flex:1;min-height:0;overflow:auto}
#overlay .battle-ui .battle-back{margin:2px 0 0!important;padding:2px 8px!important;min-height:24px;align-self:flex-start;border:0!important;border-image:none!important;background:none;color:#fff;font-size:clamp(11px,1.15vw,15px);text-shadow:1px 1px 0 #000;border-top:1px solid rgba(255,255,255,.22)!important;width:100%;text-align:left}
#overlay .battle-ui .battle-back:disabled{color:#7d88b4}
#overlay .battle-ui .battle-back:not(:disabled):hover,#overlay .battle-ui .battle-back:focus{background:rgba(255,255,255,.14);color:#ffe9a0;outline:none;filter:none}
/* 동료 창: 줄 사이를 위아래 고르게 */
.battle-ui .battle-bottom>.battle-window:last-child{display:flex;flex-direction:column;justify-content:space-evenly}
.battle-ui .battle-bottom>.battle-window:last-child .battle-member{min-height:0}
/* 이전 단추는 가운데 창 왼쪽 아래 고정 */
.battle-ui .cmdwin{display:block}
.battle-ui .battle-window.mid{display:flex;flex-direction:column}
.battle-ui .battle-window.mid>.battle-commands,.battle-ui .battle-window.mid>.battle-foes{flex:1;min-height:0;overflow:auto}
.battle-ui .battle-window.mid>.battle-back{margin-top:auto!important}
/* 주인공 기술 창: 위쪽 「기술 | 코덱스」 넘기기 */
.battle-ui .battle-tabs{display:flex;gap:4px;margin:0 0 3px}
#overlay .battle-ui .battle-tabs button{margin:0!important;padding:1px 12px!important;min-height:22px;border:0!important;border-image:none!important;background:rgba(255,255,255,.08);border-radius:4px;color:#c8d0f0;font-size:clamp(11px,1.1vw,14px);filter:none}
#overlay .battle-ui .battle-tabs button.on{background:rgba(255,255,255,.22);color:#ffe9a0}
#overlay .battle-ui .battle-tabs button:disabled{color:#7d88b4}
#overlay .battle-ui .battle-tabs button:focus{outline:1px solid #ffe9a0}

/* ── 전체 지도 (메뉴 › 지도, 2026-11-10) ── */
.worldmap{--wmh:min(60vh,540px);position:relative;height:var(--wmh);overflow:auto;border:2px solid #c9a24a;border-radius:8px;background:#1b4f7a;cursor:zoom-in;text-align:center;-webkit-overflow-scrolling:touch}
.worldmap .wm-inner{position:relative;display:inline-block;line-height:0;vertical-align:top}
.worldmap img{height:calc(var(--wmh) - 4px);width:auto;display:block;user-select:none;pointer-events:none}
.worldmap.zoom{cursor:zoom-out;text-align:left}
.worldmap.zoom img{height:calc(var(--wmh) * 2.6)}
.worldmap i{position:absolute;transform:translate(-50%,-50%);font-style:normal;pointer-events:none;line-height:1}
.wm-here{width:18px;height:18px;border-radius:50%;background:#ff4d4d;border:3px solid #fff;box-shadow:0 0 0 3px rgba(255,77,77,.45),0 0 14px #ff4d4d;animation:wmPulse 1.2s ease-in-out infinite}
.wm-wanted{font-size:20px;color:#fff;text-shadow:0 0 4px #000,0 0 8px #b00}
@keyframes wmPulse{50%{box-shadow:0 0 0 9px rgba(255,77,77,0),0 0 18px #ff4d4d}}
.wm-note{margin:.5em 0 0;font-size:.95em;line-height:1.5}
.wm-key{display:inline-block;vertical-align:middle}
.wm-key.here{width:12px;height:12px;border-radius:50%;background:#ff4d4d;border:2px solid #fff}


/* 마을 지도 한눈에 (2026-11-10): 지도를 크게, 지도 위에 이름표, 옆 목록은 종류별 */
#overlay .menu.window.kitmap{inset:3% 2%;width:auto;max-width:none;transform:none;display:flex;flex-direction:column;overflow:hidden}
#overlay .kitmap h2{margin:0 0 8px}
#overlay .kitmap-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;align-items:stretch}
#overlay .kitmap-map{position:relative;min-height:0;min-width:0}
#overlay .kitmap canvas{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px;background:#0b1622;cursor:pointer}
#overlay .kitmap-list{display:flex;flex-direction:column;gap:3px;max-height:none;min-height:0;overflow:auto;padding-right:2px}
#overlay .kitmap-list h3{margin:8px 0 2px;font-size:12px;color:#e8c77a;letter-spacing:.05em}
#overlay .kitmap-list h3:first-child{margin-top:0}
#overlay .kitmap-list button{display:flex;align-items:center;gap:8px;text-align:left;padding:5px 9px;font-size:13px;min-height:0}
#overlay .kitmap-list button[hidden]{display:none}
#overlay .kitmap-list i{display:inline-block;min-width:10px;width:10px;height:10px;border-radius:50%}
#overlay .kitmap .shop-hint{margin:8px 0 0;font-size:13px}
@media (max-width:760px),(max-aspect-ratio:1/1){#overlay .kitmap-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}#overlay .kitmap-list{max-height:28vh;flex-flow:row wrap}}
#overlay .menu.window.kitmap>.close{position:absolute;right:14px;top:10px;width:42px;height:42px;min-width:0;z-index:2;float:none}

/* 영어판 글자 겹침 2곳 (2026-11-10): 직업 칸 이름이 길면 칸이 늘어나고, 장비 칸 이름 열은 글자 길이에 맞춤 */
.jobs .jt b{white-space:nowrap}
html[lang=en] .jobs .jt b{font-size:15px;letter-spacing:-.01em}
.eqslot{grid-template-columns:max-content 36px auto 1fr}
.eqslot .sn{white-space:nowrap}
@media (max-width:720px){.eqslot{grid-template-columns:max-content 32px 1fr}}

/* 메뉴 정리 (2026-11-10 저녁): 왼쪽 목록에 그림 아이콘·묶음 구분선, 오른쪽 위에 지금 칸 제목 */
#overlay .menu.v2 .tabs button{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 12px}
#overlay .menu.v2 .tabs button.on::before{content:none}
#overlay .menu.v2 .tabs button .ti,#overlay .menu.v2 .tabhead .ti{width:28px;height:28px;object-fit:contain;flex:0 0 28px;filter:drop-shadow(0 1px 2px #0008)}
#overlay .menu.v2 .tabs button .ti.lock{display:inline-flex;align-items:center;justify-content:center;font-size:16px}
#overlay .menu.v2 .tabs button:not(.on) .ti{opacity:.82}
#overlay .menu.v2 .tabs button.on .ti{opacity:1;transform:scale(1.08)}
#overlay .menu.v2 .tabs .tsep{display:block;height:1px;margin:5px 8px;background:var(--ui-line);opacity:.8}
#overlay .menu.v2 .tabhead{grid-column:2;grid-row:1;display:flex;align-items:center;gap:12px;padding:2px 52px 10px 2px;border-bottom:1px solid var(--ui-line);min-height:0}
#overlay .menu.v2 .tabhead .ti{width:40px;height:40px;flex-basis:40px}
#overlay .menu.v2 .tabhead h2{margin:0;font-size:1.3em;line-height:1.15;color:var(--ui-gold);letter-spacing:.02em}
#overlay .menu.v2 .tabhead small{display:block;margin-top:2px;font-size:.78em;opacity:.7}
#overlay .menu.v2 .tabhead .choices{margin-left:auto;padding:0;display:flex;gap:6px;flex-wrap:wrap}
#overlay .menu.v2 .tabbody{padding-top:8px}
@media (max-width:720px),(max-height:520px){
 #overlay .menu.v2 .tabs button{gap:6px;padding:6px 6px}
 #overlay .menu.v2 .tabs button .ti{width:22px;height:22px;flex-basis:22px}
 #overlay .menu.v2 .tabhead .ti{width:30px;height:30px;flex-basis:30px}
 #overlay .menu.v2 .tabhead h2{font-size:1.1em}
 #overlay .menu.v2 .tabs .tsep{margin:3px 4px}
}

/* 프롤로그 (2026-11-10) */
#overlay .prologue{position:fixed;inset:0;z-index:40;background:#05070c;overflow:hidden;cursor:pointer;opacity:1;transition:opacity .45s}
#overlay .prologue.out{opacity:0}
#overlay .prologue .pl-scene{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
#overlay .prologue .pl-scene.on{opacity:1}
#overlay .prologue .pl-scene>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
#overlay .prologue .pl-scene.on>img:first-child{animation:plZoom 14s ease-out forwards}
@keyframes plZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
#overlay .prologue .pl-text{position:absolute;left:0;right:0;bottom:0;padding:9vh 8vw 7vh;background:linear-gradient(transparent,rgba(4,6,12,.82) 42%);text-align:center}
#overlay .prologue .pl-text p{margin:.35em auto;max-width:56em;color:#f3ead6;font-size:clamp(15px,2vw,24px);line-height:1.6;letter-spacing:.02em;text-shadow:0 2px 6px #000;opacity:0;transform:translateY(8px)}
#overlay .prologue .pl-scene.on .pl-text p{animation:plLine .9s ease forwards}
#overlay .prologue .pl-scene.on .pl-text p:nth-child(1){animation-delay:.5s}
#overlay .prologue .pl-scene.on .pl-text p:nth-child(2){animation-delay:2.2s}
@keyframes plLine{to{opacity:1;transform:none}}
#overlay .prologue .pl-logo{position:absolute;left:50%;top:9vh;width:min(46vw,620px);transform:translateX(-50%);opacity:0;filter:drop-shadow(0 4px 14px #0009)}
#overlay .prologue .pl-scene.on .pl-logo{animation:plLogo 2.4s ease 1.6s forwards}
@keyframes plLogo{to{opacity:1}}
#overlay .prologue .pl-skip{position:absolute;right:18px;top:16px;z-index:2;padding:8px 16px;min-height:0;font-size:14px;background:rgba(10,16,28,.55);border:1px solid rgba(255,255,255,.25);color:#e8dcc0;border-radius:20px;border-image:none!important}
@media (prefers-reduced-motion:reduce){#overlay .prologue .pl-scene.on>img:first-child{animation:none}}

/* 전체 지도: 지도 칸을 그림 모양에 맞추고 오른쪽에 정보 칸 (2026-11-10) */
.wmwrap{--wmh:min(58vh,520px);display:flex;gap:16px;align-items:stretch}
.wmwrap .worldmap{flex:0 0 auto;width:calc((var(--wmh) - 4px) * var(--wmar) + 4px);height:var(--wmh);background:#0b1a2b}
.wmwrap .wm-side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;max-height:var(--wmh);overflow:auto}
.wm-card{background:rgba(255,255,255,.04);border:1px solid var(--ui-line);border-radius:10px;padding:12px 14px}
.wm-card h3{margin:0 0 8px;font-size:.82em;letter-spacing:.06em;color:var(--ui-gold);display:flex;align-items:center;gap:8px;font-weight:700}
.wm-card h3 em{font-style:normal;margin-left:auto;background:#7a1c1c;color:#fff;border-radius:10px;padding:0 8px;font-size:.95em}
.wm-card .wm-place{display:block;font-size:1.25em;line-height:1.3;color:#fff}
.wm-card small{display:block;margin-top:4px;opacity:.75;font-size:.82em}
.wm-card small.dim{opacity:.5}
.wm-wl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wm-wl li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.wm-wl li b{display:block;font-size:.95em}
.wm-wl li small{margin-top:1px}
.wm-wl li.none{opacity:.65;font-size:.88em}
.wm-wl .wm-key.wanted{font-size:16px;color:#fff;text-shadow:0 0 4px #b00;margin-top:2px}
.wm-tip{margin:auto 0 0;font-size:.8em;opacity:.6;line-height:1.5}
@media (max-width:760px),(max-aspect-ratio:1/1){.wmwrap{flex-direction:column}.wmwrap .worldmap{width:100%;--wmh:min(52vh,420px)}.wmwrap .wm-side{max-height:none}}
/* 명령: 터치하기 편한 2×2 칸 (공격 기술 / 방어 아이템) + 아래 가운데 자동 */
.battle-ui .battle-bottom.three{grid-template-columns:minmax(0,22%) minmax(0,1fr) minmax(0,36%)}
.battle-ui .cmdwin{display:flex!important;flex-direction:column;padding:6px!important}
.battle-ui .battle-commands.grid{flex:1;display:grid;grid-template-columns:1fr 1fr!important;grid-auto-rows:1fr;gap:5px!important;align-content:stretch;overflow:hidden}
#overlay .battle-ui .battle-commands.grid button{min-height:0!important;height:100%;padding:2px 4px!important;text-align:center;border:1px solid rgba(217,223,240,.55)!important;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03));font-size:clamp(12px,1.4vw,19px)}
#overlay .battle-ui .battle-commands.grid button::before{content:none!important}
#overlay .battle-ui .battle-commands.grid button:not(:disabled):hover,#overlay .battle-ui .battle-commands.grid button:focus,#overlay .battle-ui .battle-commands.grid button.cur{background:linear-gradient(180deg,rgba(255,233,160,.38),rgba(255,233,160,.12));border-color:#ffe9a0!important;color:#ffe9a0}
#overlay .battle-ui .battle-commands.grid button:active:not(:disabled){transform:translateY(1px)}
#overlay .battle-ui .battle-commands.grid button:disabled{opacity:.45}
#overlay .battle-ui .battle-commands.grid button[data-kind=auto],#overlay .battle-ui .battle-commands.grid button[data-top=auto]{grid-column:1/-1;justify-self:center;width:60%}
/* 승리: 가운데 보상 창 (다른 전투 창과 같은 모양, 장식 없이) */
.battle-ui .battle-bottom.solo{grid-template-columns:minmax(0,1fr);left:30%;right:1.5%}
.battle-ui .battle-popwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:12%;pointer-events:auto}
.battle-ui .battle-popup{width:min(320px,40%);padding:10px 14px 12px;background:var(--ff-win);border:2px solid var(--ff-line);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),0 4px 12px #0009}
.battle-ui .battle-poptitle{font-size:clamp(14px,1.6vw,20px);font-weight:700;color:#fff;text-shadow:1px 1px 0 #000;padding-bottom:5px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.22)}
.battle-ui .battle-poplist{list-style:none;margin:0 0 10px;padding:0}
.battle-ui .battle-poplist li{display:flex;justify-content:space-between;gap:16px;padding:3px 2px;font-size:clamp(12px,1.35vw,17px);color:#fff;text-shadow:1px 1px 0 #000}
.battle-ui .battle-poplist b{font-weight:600}
#overlay .battle-ui .battle-popup .battle-continue{width:100%;min-height:clamp(28px,3.6vw,38px);margin:0!important;display:block;border:1px solid var(--ff-line)!important;border-radius:5px;background:rgba(255,255,255,.06);color:#fff;font-size:clamp(12px,1.3vw,16px);text-align:center;padding:2px 8px!important}
#overlay .battle-ui .battle-popup .battle-continue:hover,#overlay .battle-ui .battle-popup .battle-continue:focus{background:rgba(255,255,255,.16);outline:none}
/* 낮은 화면(폰 가로): 가운데 창이 기술 목록을 보여 줄 수 있게 위아래를 아낀다 */
@media (max-height:480px){
.battle-ui .battle-bottom{height:30%}
.battle-ui .battle-window.mid{padding:3px 8px}
.battle-ui .battle-window.mid .battle-caption{padding-bottom:1px;margin-bottom:1px;font-size:11px}
#overlay .battle-ui .battle-tabs{margin:0 0 1px}
#overlay .battle-ui .battle-tabs button{min-height:16px;padding:0 10px!important;font-size:11px}
#overlay .battle-ui .battle-window.mid .battle-commands.sub button{min-height:20px;padding:0 6px 0 18px!important;font-size:12px}
#overlay .battle-ui .battle-back{min-height:16px;padding:0 6px!important;font-size:11px}
}

/* 걸음 표시를 눌러서 빠른걸음 켜고 끄기 */
#walkStatus{pointer-events:auto!important;cursor:pointer;user-select:none;min-height:28px;display:flex;align-items:center}
#walkStatus[hidden]{display:none!important}
/* 마을 지도: 지도 크기를 그림 비율에 맞춰 양옆 검은 여백 없이, 남는 자리는 오른쪽 목록 */
#overlay .kitmap-body{grid-template-columns:auto minmax(150px,1fr)!important;align-items:start!important}
/* 메뉴 파티: 한 줄에 두 명 */
.pcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* 소지품: 한 줄에 세 칸 */
.itemgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.itemgrid .itemrow{min-width:0}
.itemgrid .itemrow .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px),(max-height:480px){
 .pcard{grid-template-columns:52px minmax(0,1fr)!important;gap:8px!important;padding:8px!important}
 .pcard canvas{width:52px!important;height:60px!important}
 #overlay .pcard .prow button{min-height:28px;min-width:48px;padding:2px 8px}
 .itemgrid .itemrow{grid-template-columns:26px minmax(0,1fr) auto!important;gap:5px!important;padding:6px!important;font-size:12px}
 .itemgrid .itemrow img{width:26px!important;height:26px!important}
 .itemgrid .itemrow button{grid-column:1/-1;min-height:28px!important;padding:2px 6px!important}
}
#overlay .kitmap-body{grid-template-rows:minmax(0,1fr)}
#overlay .kitmap-list{align-self:stretch;max-height:100%;overflow:auto}
#overlay .kitmap-list button{flex-shrink:0;min-height:30px!important}
/* 장비: 왼쪽 장비 칸(한 줄씩) | 오른쪽 능력치 */
.eqs .eqmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,30%);gap:12px;align-items:start}
.eqs .eqmain .eqslots{grid-template-columns:minmax(0,1fr)!important;margin:0}
.eqs .eqmain .eqstats{display:flex!important;flex-direction:column;gap:2px;margin:0;padding:8px 12px}
.eqs .eqmain .eqstats span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.eqs .eqmain .eqstats span:last-child{border-bottom:0}
/* 메뉴 파티: 카드를 누르면 전열·후열 고르는 창 */
.pcard[data-act^="rowpop:"]{cursor:pointer}
.pcard[data-act^="rowpop:"]:hover,.pcard[data-act^="rowpop:"]:focus-visible{filter:brightness(1.12);outline:none}
.pcard .rowtag{display:inline-block;padding:1px 10px;border-radius:5px;border:1px solid var(--ui-gold2,#c9a35a);color:#ffe2a0;font-size:.82em;font-weight:700}
.pcard .rowtag.back{border-color:#7fa6d8;color:#cfe0ff}
.rowpop{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);border-radius:inherit}
.rowpop-box{width:min(340px,86%);display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:linear-gradient(180deg,#183257,#0d1d38);border:2px solid #d9dff0;border-radius:8px;box-shadow:0 6px 18px #000a}
.rowpop-box h3{margin:0 0 2px;font-size:15px;color:#fff;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.2)}
#overlay .rowpop-box button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:48px;padding:6px 12px;margin:0}
#overlay .rowpop-box button small{font-size:11px;opacity:.85;font-weight:400}
#overlay .rowpop-box button.selected{border-image:none!important;background:linear-gradient(180deg,#f2d488,#c99b45);color:#2a1d10;border-radius:6px;text-shadow:none}
#overlay .rowpop-box .rowpop-x{align-items:center;min-height:34px}
/* 전체 지도: 지도를 남는 높이만큼 크게, 마을 지도 단추는 오른쪽 칸 맨 위 */
.wmwrap{--wmh:clamp(200px,calc(100vh - 200px),640px)}
@media (max-height:480px){.wmwrap{--wmh:calc(100vh - 125px)}}
.wmwrap .wm-btns{display:flex;flex-wrap:wrap;gap:6px;margin:0}
#overlay .wmwrap .wm-btns button{flex:1 1 auto;margin:0}
.wmwrap .worldmap{--wmh:inherit}
.wmwrap .wm-btns{flex-shrink:0}
#overlay .wmwrap .wm-btns button{width:100%;min-height:36px}
.wmwrap .wm-side>*{flex-shrink:0}
#overlay .wmwrap .wm-btns button{max-width:none!important;flex:1 1 100%}
/* 메뉴 파티: 이름 옆에 직업·레벨 */
.pcard .job{display:inline!important;margin:0 0 0 8px!important;white-space:nowrap}
.pcard b+.job{vertical-align:baseline}
/* 타이틀 설정: 왼쪽 이름 칸 고정, 오른쪽 단추들은 같은 크기로 줄 맞춰 */
.tsettings .sysrow.trow{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:8px}
.tsettings .sysrow.trow>span{min-width:0}
.tsettings .sysbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-items:center}
#overlay .tsettings .sysbtns>button{margin:0!important;width:100%;min-width:0;white-space:nowrap}
.tsettings .sysbtns .vol{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;white-space:nowrap}
#overlay .tsettings .sysbtns .vol button{margin:0!important;min-width:34px;width:auto}
.tsettings .sysbtns .vol b{min-width:44px;text-align:center}
.tsettings>.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
#overlay .tsettings>.choices button{margin:0!important;width:100%}
@media (max-width:900px),(max-height:480px){.tsettings .sysrow.trow{grid-template-columns:80px minmax(0,1fr)}.tsettings .sysbtns{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
.tsettings .sysbtns{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tsettings .sysbtns .vol{justify-content:flex-start}
.tsettings>.choices{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media (max-width:900px),(max-height:480px){.tsettings .sysbtns,.tsettings>.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.tsettings .sysbtns .vol{grid-column:span 1}#overlay .tsettings .sysbtns>button{font-size:13px;padding-left:4px;padding-right:4px}}