/* ===== 별이 잠든 땅 — UI ===== */
:root{
  --bg:#0a0b10;
  --ink:#e8e3d4;
  --dim:#9b957f;
  --gold:#d8a94b;
  --frame:#3b3527;
  --frame2:#1b1a16;
  --hp:#c8433c;
  --mp:#3f7fd0;
  --xp:#c9a227;
  --r0:#b8b8b8; --r1:#5fc45f; --r2:#4f9cf0; --r3:#a866e8; --r4:#e8912a; --r5:#e8484f;
  /* 강조색 — 누를 수 있는 것은 전부 이 하나만 쓴다(맨 아래 "누를 수 있는 것 한 벌").
     제 색이 있는 자리(난이도·분기·위험)는 --hi 만 갈아 끼우면 모양이 그대로 따라온다. */
  --hi:#d8a94b;
}
/* 게임 글꼴 Ashfall(Pretendard 고친 판 · OFL — assets/fonts/OFL.txt) — tools/mkfont.py 가 굽고 ?v= 도 맞춘다. 일본어 · 중국어는 기기 글꼴 */
@font-face{font-family:"Ashfall";font-weight:400;font-display:swap;src:url("../assets/fonts/ashfall-regular.woff2?v=ed2c9966") format("woff2")}
@font-face{font-family:"Ashfall";font-weight:700;font-display:swap;src:url("../assets/fonts/ashfall-bold.woff2?v=3c382bdf") format("woff2")}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{
  font-family:"Ashfall","Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,system-ui,sans-serif;
  color:var(--ink); user-select:none; -webkit-font-smoothing:antialiased;
}
/* 언어별 글꼴 — engine/i18n/fonts.ts 와 같은 스택. ★ 한국어 글꼴이 앞에 있으면 일본어·중국어 한자가 한국식 자형으로 나온다.
   일본어·중국어는 띄어쓰기가 없어 줄을 글자 단위로 끊되 금칙(문장부호로 시작하는 줄)을 지킨다. */
html:lang(ja) body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;line-break:strict}
html:lang(zh-Hans) body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;line-break:strict}
html:lang(en) body,html:lang(de) body,html:lang(es) body{font-family:"Ashfall",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html:lang(ja) *,html:lang(zh-Hans) *{word-break:normal!important}
html:lang(de) body,html:lang(es) body{hyphens:auto}
#app{position:fixed;inset:0}
#game{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair;background:#05060a}

button{
  font:inherit;color:var(--ink);background:linear-gradient(#2a2a22,#171612);
  border:1px solid var(--frame);border-radius:3px;padding:9px 16px;cursor:pointer;letter-spacing:.02em;
}

/* ================= HUD ================= */
#hud{position:absolute;inset:0;pointer-events:none;font-size:13px}
/* UI 크기(설정 --ui-scale) · 안전 영역(노치) — 둘 다 기본값이면 예전 그대로. 툴팁은 커서 좌표로 자리를 잡아 zoom 에서 뺀다. */
:root{--ui-scale:1}
#hud{zoom:var(--ui-scale);inset:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.panel,#dialogue,.modal-box,.settings,#toasts{zoom:var(--ui-scale)}
/* 폰을 세로로 들면 — 가로 화면만 맞춘다(계획 §8-6) */
#rotate-hint{display:none;position:fixed;inset:0;z-index:500;background:#07080cf2;color:#e8dcc0;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:17px}
#rotate-hint .rh-ic{font-size:54px;animation:rh-turn 2.4s ease-in-out infinite}
@keyframes rh-turn{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media (orientation:portrait) and (max-width:600px){body.touch #rotate-hint{display:flex}body.touch #touchpad{display:none}}
/* 터치: 스킬 칸을 손가락으로 쓴다 · 누를 곳은 44px 이상 */
body.touch #skillbar{pointer-events:auto}
body.ctl-off #touchpad .ti-stick,body.ctl-off #touchpad .ti-btns,body.ctl-off #touchpad .ti-alt{visibility:hidden}
body.touch #skillbar .sk{min-width:44px;min-height:44px;touch-action:none}
#touchpad .ti-fs{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:44px;height:32px;border-radius:8px;
  display:grid;place-items:center;font:16px system-ui,sans-serif;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);pointer-events:auto}
#hud-left{position:absolute;left:14px;top:12px;width:280px}
.orb-row{background:linear-gradient(#14130fee,#0c0b09ee);border:1px solid var(--frame);
  border-radius:5px;padding:10px 11px 9px;box-shadow:0 4px 18px #000b,inset 0 0 0 1px #00000050;
  position:relative;
  background-image:
    linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(#14130fee,#0c0b09ee);
  background-repeat:no-repeat;
  background-size:11px 2px,2px 11px, 11px 2px,2px 11px, 11px 2px,2px 11px, 11px 2px,2px 11px, 100% 100%;
  background-position:top -1px left -1px,top -1px left -1px, top -1px right -1px,top -1px right -1px,
    bottom -1px left -1px,bottom -1px left -1px, bottom -1px right -1px,bottom -1px right -1px, 0 0}
.orb-row:before{content:'';position:absolute;left:10px;right:10px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#d8a94bab,transparent)}
/* ★ 줄 사이는 margin 이 아니라 **flex gap** 으로 벌린다. margin-bottom + :last-child 로
     하면 맨 아랫줄이 숨어 있을 때(전하·추진기·숨은 평소 display:none) 그 앞줄이
     margin 을 그대로 들고 있어 틀 아래에 빈 6px 이 남는다. gap 은 보이는 것끼리만
     벌리므로, 줄 차례를 바꿔도 따라올 것이 없다. */
.orb-row{display:flex;flex-direction:column;gap:6px}
.bar{position:relative;height:19px;background:#0e0d0b;border:1px solid var(--frame);
  border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 4px #000d,0 1px 0 #ffffff0a;padding-left:20px;
  flex:0 0 auto}
.bar:before{content:'';position:absolute;left:0;top:0;bottom:0;width:19px;
  background:radial-gradient(circle at 50% 40%,#332c1e,#100f0c 75%);border-right:1px solid var(--frame);
  display:flex;align-items:center;justify-content:center;font-size:10px;z-index:2;
  text-shadow:0 0 5px currentColor}
.bar.hp:before{content:'♥';color:#e0736c}
.bar.mp:before{content:'✦';color:#7fb4f0}
.bar.xp:before{content:'★';color:#e5c455;font-size:8px}
.bar .fill{position:relative;height:100%;width:100%;transition:width .16s ease-out;overflow:hidden}
.bar .fill:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 48%,rgba(0,0,0,.12) 100%)}
.bar .fill:before{content:'';position:absolute;top:0;bottom:0;left:0;width:26%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:barShine 3.4s ease-in-out infinite; animation-delay:.3s}
.bar.mp .fill:before{animation-delay:1.1s}
.bar.xp .fill:before{animation-delay:1.9s}
@keyframes barShine{0%,15%{transform:translateX(-140%)}55%,100%{transform:translateX(420%)}}
.bar.hp .fill{background:linear-gradient(#e0605a,#a02a26)}
.bar.mp .fill{background:linear-gradient(#5f9fe8,#2a55a0)}
.bar.pw{display:none}
.orb-row.has-pw .bar.pw{display:block}
.bar.pw .fill{background:linear-gradient(#7fd8ff,#3f7fd0)}
.bar.pw:before{content:'⚡';color:#9fd8ff}
/* 제트팩 열 — 제트팩을 낀 동안에만 나타난다. 과열되면 회색으로 죽는다 */
.bar.jet{display:none}
.orb-row.has-jet .bar.jet{display:block}
.bar.jet .fill{background:linear-gradient(#ffd08a,#e0662a)}
.bar.jet.over .fill{background:linear-gradient(#8a8a92,#4a4a52)}
.bar.jet:before{content:'🚀';color:#ffb04a;font-size:9px}
.bar.air{display:none}
.orb-row.has-air .bar.air{display:block}
.bar.air .fill{background:linear-gradient(#9fe8ff,#2f7fb8)}
.bar.air:before{content:'🫧';color:#bfe8ff}
.bar.air.low{animation:hpWarn 1.1s ease-in-out infinite}
.bar.hp.low{animation:hpWarn 1.1s ease-in-out infinite}
@keyframes hpWarn{0%,100%{box-shadow:inset 0 1px 4px #000d,0 0 0 rgba(224,96,90,0)}
  50%{box-shadow:inset 0 1px 4px #000d,0 0 13px 2px rgba(224,96,90,.8)}}
.bar.hp.low:before{animation:hpIconWarn 1.1s ease-in-out infinite}
@keyframes hpIconWarn{0%,100%{color:#e0736c}50%{color:#ff9a94}}
.bar.xp{height:11px;padding-left:16px}
.bar.xp:before{width:15px}
.bar.xp .fill{background:linear-gradient(#e5c455,#9c7413)}
.bar.xp .bar-label{left:15px;font-size:9.5px}
.bar-label{position:absolute;left:19px;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.04em;text-shadow:0 1px 2px #000,0 0 4px #000}
#buffs{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.buff{width:28px;height:28px;border:1px solid var(--frame);background:#12110ecc;border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:15px;position:relative}
.buff .bt{position:absolute;bottom:-1px;right:1px;font-size:9px;color:var(--gold)}

#hud-right{position:absolute;right:14px;top:12px;text-align:right}
#clock-box{display:inline-flex;gap:12px;align-items:center;background:#0c0b09cc;border:1px solid var(--frame);
  padding:5px 11px;border-radius:3px;font-size:12px;margin-bottom:6px}
#clock-icon{font-size:14px}
#minimap{display:block;border:1px solid var(--frame);background:#07080cdd;border-radius:3px;box-shadow:0 3px 12px #000a}

#quest-tracker{position:absolute;right:14px;top:198px;width:230px;max-width:38vw;background:#0c0b09c4;border:1px solid var(--frame);
  border-left:2px solid var(--gold);padding:9px 11px;border-radius:2px;font-size:12px;line-height:1.65}
.qt-title{color:var(--gold);font-size:11px;letter-spacing:.14em;margin-bottom:5px}
.qt-obj{color:#cfc9b6}
.qt-obj.done{color:#6a8a5a;text-decoration:line-through}
.qt-obj b{color:#fff;font-weight:600}
/* 골라서 하는 준비 목록. "다 하라"가 아니라 "여기서 고르라"로 읽혀야 하므로
   본 줄보다 한 단 낮추고 색을 죽인다 — 눈이 먼저 가는 것은 위의 준비 n/m 이다. */
.qt-list{margin-top:3px;padding-left:2px;border-left:1px solid #3a352c}
.qt-pick{color:#a09884;font-size:11px;line-height:1.5;padding-left:6px}
.qt-pick b{color:#cfc9b6;font-weight:600}
.qt-pick.done{color:#5f7a52;text-decoration:line-through}
.qt-pick.done b{color:#5f7a52}
.qt-pick.must{color:#c9b07a}
.qt-must{color:#c06a4a;font-size:9.5px;margin-right:2px;white-space:nowrap}
/* 제목과 '필수'를 한 줄로 묶는다 — 따로 두면 좁은 HUD 에서 '필수'만 다음 줄로 내려간다 */
.qt-line{display:block}
/* 과제는 부제다 — 이야기 한 줄 아래 작게. 눈이 먼저 가는 것은 이야기 쪽이어야 한다 */
.qt-task{display:block;color:#7f7869;font-size:10px;line-height:1.4;padding-left:10px}
.qt-task b{color:#a09884;font-weight:600}
/* 여정의 기록 — 목표 한 줄 아래 붙는 과제 줄 */
.obj-task{display:block;color:#8a8272;font-size:10.5px;line-height:1.5;margin-top:2px;padding-left:14px}
.obj-task b{color:#c9c2ae;font-weight:600}
.obj.ok .obj-task{color:#5f7a52}
.obj.ok .obj-task b{color:#5f7a52}
.qt-obj .qt-task{padding-left:0}

#hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:5px;pointer-events:auto}
#skillbar{position:absolute;left:50%;transform:translateX(-50%);bottom:82px;display:flex;gap:7px}
/* 화면 아래 오른쪽 탭 단추 — 조작키로 여는 탭을 마우스로도(ui.js bindTabBar). 핫바와 같은 결의 어두운 판 */
#tabbar{position:absolute;right:14px;bottom:14px;display:flex;gap:4px;pointer-events:auto}
#tabbar .tb{position:relative;width:48px;height:52px;padding:10px 0 0;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:#15130fcc;border:1px solid var(--frame2);border-radius:4px;color:#d8cdb4;font:inherit;font-size:10px;cursor:pointer}
#tabbar .tb:hover{border-color:var(--frame);background:#231f17e6}
#tabbar .tb.on{border-color:#d8a94b;box-shadow:0 0 0 1px #d8a94b66 inset;color:#fff}
#tabbar .tb-ic{width:22px;height:22px;background-size:contain;background-repeat:no-repeat;image-rendering:auto}
#tabbar .tb-n{line-height:1}
#tabbar kbd{position:absolute;top:1px;right:2px;font:9px/1 monospace;color:#b8a888;background:none;border:0;padding:0}
/* 패널 제목 앞 아이콘 */
.panel header h2,.panel header .title-ic{vertical-align:middle}
.panel header .title-ic{display:inline-block;width:22px;height:22px;margin-right:6px;background-size:contain;background-repeat:no-repeat}
.panel header{display:flex;align-items:center}
.panel header h2{flex:1}
.sk{width:46px;height:46px;border:1px solid var(--frame);background:#12110ed8;border-radius:4px;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 2px 8px #000a}
.sk .key{position:absolute;top:-1px;left:3px;font-size:9px;color:var(--dim)}
.sk .cdmask{position:absolute;inset:0;background:#000a;border-radius:3px}
.sk .cdnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;text-shadow:0 1px 3px #000}
.sk.empty{opacity:.3}
/* 유틸리티 칸(Z · X) — 스킬 칸과 같은 판, 사이를 조금 띄운다. 산소통처럼 저절로 쓰이는 도구는 키 없이 흐리게 */
.usl{width:46px;height:46px;border:1px solid #4d6b73;background:#0f1416d8;border-radius:4px;position:relative;display:flex;align-items:center;justify-content:center}
#skillbar .sk + .usl{margin-left:12px}
.usl[hidden]{display:none}
.usl .key{position:absolute;top:-1px;left:3px;font-size:9px;color:#8fb6bf}
.usl .cdnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;text-shadow:0 1px 3px #000}
.usl .ic{width:34px;height:34px;background-size:contain;background-repeat:no-repeat;background-position:center}
.usl.passive{opacity:.55}
.usl.deny{animation:sk-deny .17s ease-out}
body.touch #skillbar .usl{min-width:44px;min-height:44px;touch-action:none}
.sk.ready{border-color:#6a6045}

.slot{width:46px;height:46px;border:1px solid var(--frame);background:#12110ed8;border-radius:3px;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.slot .cnt{position:absolute;bottom:0;right:3px;font-size:10px;color:#e8e3d4;text-shadow:0 1px 2px #000}
.slot .num{position:absolute;top:0;left:3px;font-size:9px;color:var(--dim)}
.slot.r1{background:#12200fd8}.slot.r2{background:#0e1a2ad8}.slot.r3{background:#1c0f2ad8}
.slot.r4{background:#2a1a08d8}.slot.r5{background:#2a0d0fd8}
.slot.r1{border-color:#3a6a3a}.slot.r2{border-color:#2f5f96}.slot.r3{border-color:#6a3f9c}
.slot.r4{border-color:#9c6218}.slot.r5{border-color:#9c2f34}

/* ================= 패널 ================= */
#panels{position:absolute;inset:0;pointer-events:none}
.panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);
  width:720px;max-width:95vw;max-height:82vh;overflow:auto;display:none;opacity:0;
  background:linear-gradient(#16150f,#0e0d0a);border:1px solid var(--frame);border-radius:5px;
  box-shadow:0 20px 60px #000d, 0 0 0 1px #000 inset;pointer-events:auto;
  transition:opacity .12s, transform .12s;
}
.panel.wide{width:880px;max-width:96vw}
.panel.fullmap{width:1040px;max-width:96vw;height:82vh;max-height:82vh;display:none}
.panel.fullmap.open{display:flex;flex-direction:column}
.panel.fullmap header{flex:0 0 auto}
#fullmap-wrap{position:relative;flex:1 1 auto;min-height:0;background:#050609}
#fullmap-canvas{display:block;width:100%;height:100%;cursor:grab}
#fullmap-canvas:active{cursor:grabbing}
#fullmap-hint{position:absolute;left:10px;bottom:8px;font-size:11px;color:#8a8470;
  background:#000a;padding:4px 9px;border-radius:3px;pointer-events:none}
#minimap{cursor:pointer;pointer-events:auto}
.panel.open{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
.panel header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--frame);background:#100f0b;position:sticky;top:0;z-index:5}
.panel h2{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--gold)}
.panel .x{padding:2px 9px;font-size:13px;background:none;border-color:transparent}
.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#33301f;border-radius:4px}

.inv-wrap{display:flex;gap:36px;padding:16px;align-items:flex-start}
/* 장비 열은 칸 폭(2×46 + 틈 6 = 98)에 딱 맞춘다.
   116px으로 고정해 뒀더니 열 오른쪽에 18px이 남아, 열 사이 틈(18)과 합쳐져
   왼쪽만 36px로 벌어졌다 — 눈에는 그게 "간격이 다르다"로 보인다. */
.equip-col{flex:0 0 98px;width:98px}
.bag-col{min-width:0}
.stat-col{flex:0 0 128px;width:128px}
/* 정리 버튼 — 소지품 칸 **정중앙** 아래 */
.bag-foot{margin-top:10px;display:flex;justify-content:center}
/* 세 열의 위쪽 선을 맞춘다 — 제목 높이가 달라 능력치만 내려앉아 보였다 */
.inv-wrap>div{align-self:stretch}
/* 소지품 열은 칸 폭(10칸 505px)에 딱 맞춘다.
   flex:1 1 auto로 두면 열 상자만 남는 폭을 다 먹어서, 마지막 칸과 능력치 사이가
   왼쪽 틈(18px)보다 훨씬 벌어졌다 — 눈에는 그게 "간격이 다르다"로 보인다. */
.bag-col{flex:0 0 auto;width:min-content}   /* 폭은 칸 격자가 정한다 — 제목 옆 안내 글이 길면(독일어) 열을 넓히지 말고 접는다. 폰에서 능력치 칸이 창 밖으로 밀렸다 */
#bag-grid{width:max-content}
/* 가방 창만 넓힌다 — 장비(116) + 소지품(10칸 505) + 능력치(128) + 여백/틈이 817px라
   기본 패널 폭 720px에서는 능력치 열이 삐져나와 소지품 칸 위에 겹쳐 찍혔다. */
/* 32(양쪽 여백) + 98(장비) + 36 + 505(소지품 10칸) + 36 + 128(능력치) = 835 */
#panel-inv{width:835px}
#hotbar{max-width:100vw;flex-wrap:nowrap}
/* 아이콘과 글자의 **가운데 선**을 맞춘다. baseline로 두면 아이콘이 글자 위로 떠 보인다. */
.equip-title{font-size:11px;letter-spacing:.12em;color:var(--dim);margin-bottom:8px;
  display:flex;align-items:center;gap:5px;line-height:15px;min-height:15px}
.equip-title small{letter-spacing:0;color:#5f5b4d}
.section-ic{width:15px;height:15px;display:block;background:center/contain no-repeat;
  image-rendering:pixelated;flex:0 0 15px;align-self:center}
.equip-grid{display:grid;grid-template-columns:repeat(2,46px);gap:6px}
.slot.equip .eqtag,.slot.trash-zone .eqtag{position:absolute;bottom:1px;left:0;right:0;text-align:center;
  font-size:8.5px;color:#57533f;pointer-events:none;z-index:3;text-shadow:0 1px 2px #000;
  /* '유틸리티'처럼 네 글자가 넘어가면 칸(46px) 밖으로 삐져나가 잘려 보였다 */
  white-space:nowrap;letter-spacing:-.04em;transform:scale(.94);transform-origin:bottom center}
.slot.equip.filled .eqtag{display:none}
/* 빈 장비 칸의 실루엣 — 아이템이 들어오면 가려진다 */
/* 버리기(휴지통) 아이콘과 같은 밀도로: 위쪽에 작게, 아래는 eqtag 라벨을 위해 비워 둔다 */
.eqic{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:27px;height:27px;
  background-repeat:no-repeat;background-position:center;
  background-size:contain;image-rendering:pixelated;opacity:.34;pointer-events:none;z-index:1}
.slot.equip.filled .eqic{display:none}
.slot.equip:hover .eqic{opacity:.55}
.slot.trash-zone .eqic{opacity:.42}
.slot.trash-zone:hover .eqic{opacity:.75}
.slot.trash-zone{background:#1a1210d8;border-color:#4a2e28;cursor:pointer}
.slot.trash-zone .eqtag{font-size:9px;color:#8a5a52}
.trash-ic{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:25px;height:25px;
  background:center/contain no-repeat;image-rendering:pixelated;filter:drop-shadow(0 1px 2px #000a)}
#bag-grid{display:grid;grid-template-columns:repeat(10,46px);gap:5px}
#bag-grid .slot.hb-slot{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 6px #d8a94b33}
#bag-grid .slot.locked{opacity:.18;pointer-events:none;background:repeating-linear-gradient(45deg,#0e0d0a,#0e0d0a 4px,#151310 4px,#151310 8px)}
#stat-sheet{font-size:12px;line-height:1.9;color:#b9b3a0;width:124px}
#stat-sheet .sv{color:#fff;float:right}
#stat-sheet h4{font-size:10px;letter-spacing:.12em;color:var(--dim);margin:10px 0 4px;font-weight:500}

.skill-top{padding:14px 16px;border-bottom:1px solid var(--frame)}
.pts{font-size:12px;color:var(--dim);margin-bottom:10px}
.pts b{color:var(--gold);font-size:14px}
/* 네 칸을 한 줄에 — 언어마다 글 길이가 달라 flex-wrap 이면 독일어·일본어에서 넷째 칸만 다음 줄로 떨어졌다. 설명은 칸 안에서 두 줄까지 접는다 */
#stat-alloc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat-chip{display:flex;align-items:center;gap:8px;background:#13120d;border:1px solid var(--frame);
  padding:6px 10px;border-radius:3px;font-size:12px;min-width:0}
.stat-chip .sname{color:#d8d2be;min-width:2.6em}
.stat-chip .snum{color:#fff;font-weight:600;min-width:22px;text-align:right}
.stat-chip button{padding:1px 8px;font-size:12px;line-height:1.4}
.stat-chip .sdesc{font-size:10.5px;color:#6f6b5c;flex:1;min-width:0;line-height:1.25}

/* ===== 특성 트리 (v1.1) =====
   예전에는 분기마다 여섯 줄을 세로로 쌓은 목록이었다. 이제 4단 × 3열의 판이고,
   칸과 칸은 SVG 선으로 이어진다. 칸 자리는 js 가 left(%)·top(px)으로 넣는다. */
.sk-tabs{display:flex;gap:6px;padding:10px 16px 0}
.sk-tab{background:#13120d;border:1px solid var(--frame);color:#8d8874;font:inherit;font-size:11.5px;
  letter-spacing:.06em;padding:5px 14px;border-radius:3px 3px 0 0;cursor:pointer}
.sk-pane{display:none}
.sk-pane.on{display:block}

/* ★ 판 하나에 서른 칸. 갈래마다 테두리를 두르던 판 셋을 걷어냈다 — 벽이 있으면
   갈래를 가로지르는 선을 그을 자리가 없다. 갈래는 위쪽 머리글과 칸 색으로만 남는다. */
#tree-wrap{background:#100f0a;border:1px solid #262418;border-radius:4px;
  padding:12px 12px 6px;margin:14px 16px 4px}
.bheads{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:8px}
.bhead{--hi:var(--bc);padding-left:9px;border-left:3px solid var(--bc)}   /* 글자가 색 막대에 붙지 않게 */
.bhead h3{font-size:12.5px;letter-spacing:.08em;margin-bottom:3px;color:var(--bc)}
.bhead .btag{font-size:10px;color:#65614f;margin-bottom:2px}
.bnote{font-size:10.5px;color:#6b6553;margin:0 0 4px;padding:3px 8px;
  background:#0d0c08;border:1px solid #221f15;border-radius:3px}
.bnote b{color:#9a9079;font-weight:600}
.bgrid{position:relative}
.blines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bline{stroke:#2a2719;stroke-width:2;stroke-linecap:round}
.bline.on{stroke:var(--bc);opacity:.42}
.bline.full{opacity:.85;stroke-width:2.6;filter:drop-shadow(0 0 3px var(--bc))}
/* 갈래를 건너는 선 — 점선이라 "여기서 넘어올 수 있다"가 한눈에 갈린다. 실선으로 두면
   같은 갈래 안의 선과 구별이 안 되어 트리가 그냥 빽빽해 보인다. */
.bline.cross{stroke-dasharray:5 7;stroke-width:1.6;opacity:.85}
.bline.cross.on{opacity:.55}
.bline.cross.full{stroke-width:2.2;opacity:.95}
/* 습득한 순간 그 칸에 닿는 선으로 빛이 한 번 흐른다 */
.bline.flow{stroke:#fff6d8;opacity:1;stroke-width:3;stroke-dasharray:10 12;animation:blineflow .9s linear}
@keyframes blineflow{from{stroke-dashoffset:44;opacity:1}to{stroke-dashoffset:0;opacity:.55}}

.node{position:absolute;width:86px;margin-left:-43px;text-align:center;cursor:pointer;user-select:none}
.node .nbox{position:relative;width:44px;height:44px;margin:0 auto;border-radius:6px;
  background:#16150e;border:1px solid #322e1e;display:flex;align-items:center;justify-content:center;
  transition:transform .12s,box-shadow .18s,border-color .18s}
.node .nic{width:28px;height:28px;display:block;filter:grayscale(.75) brightness(.62)}
.node .nlock{position:absolute;right:-3px;bottom:-3px;font-size:9px;opacity:0}
.node .nname{font-size:9.5px;color:#6f6b5c;margin-top:3px;line-height:1.25;
  /* 두 줄까지 접힌다 — 한 줄로 잘라 두었더니 '사냥꾼의 표식'이 '사냥꾼의 표'가 되었다 */
  height:2.5em;overflow:hidden;word-break:keep-all}
.node .nrank{font-size:9px;color:#514e42;letter-spacing:.04em}
.node:hover .nname{color:#cfc9b6}
.node.can .nbox{border-color:#6a5f33;box-shadow:0 0 0 1px #6a5f3355,0 0 10px #d8a94b26}
.node.can .nic{filter:grayscale(.35) brightness(.9)}
.node.learned .nbox{border-color:var(--bc);background:#1b1810;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bc) 45%,transparent),0 0 12px color-mix(in srgb,var(--bc) 30%,transparent)}
.node.learned .nic{filter:none}
.node.learned .nname{color:#d6cfb8}
.node.learned .nrank{color:var(--gold)}
.node.maxed .nbox{background:#221d0e;box-shadow:0 0 0 1px var(--bc),0 0 16px color-mix(in srgb,var(--bc) 42%,transparent)}
.node.locked{opacity:.4}
/* 아직 먼 칸 — 무엇인지는 숨기고 '여기에 칸이 있다'는 빈 틀만 남긴다 */
.bline.unseen{visibility:hidden}
.node.unseen{opacity:1;pointer-events:none}
.node.unseen .nbox{background:transparent;border:1px dashed #3a3524;box-shadow:none}
.node.unseen .nic,.node.unseen .nlock,.node.unseen .nname,.node.unseen .nrank{visibility:hidden}
.node.locked .nlock{opacity:.9}
.node.active .nbox::after{content:'';position:absolute;inset:-4px;border-radius:8px;
  border:1px solid var(--gold);opacity:.75;pointer-events:none}

/* 습득 연출 — 칸이 한 번 부풀고 둘레로 불티가 튄다 */
.node.just .nbox{animation:nodepop .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes nodepop{
  0%{transform:scale(1)}
  22%{transform:scale(1.32);box-shadow:0 0 0 3px #fff6d8aa,0 0 26px #ffe08a}
  100%{transform:scale(1)}
}
.nspark{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;
  background:#ffe9a8;pointer-events:none;animation:nspark .62s ease-out forwards}
@keyframes nspark{
  from{transform:translate(-50%,-50%);opacity:1}
  to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4);opacity:0}
}

/* ===== 생활 숙련 ===== */
#prof-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px 16px}
.prof{background:#100f0a;border:1px solid #262418;border-radius:4px;padding:12px 13px}
.prof .phead{display:flex;align-items:baseline;gap:7px}
.prof .pic{font-size:15px}
.prof .pn{font-size:13px;color:var(--pc);letter-spacing:.06em}
.prof .plv{margin-left:auto;font-size:11px;color:var(--gold)}
.prof .pline{font-size:10.5px;color:#65614f;margin:4px 0 9px;line-height:1.6}
.prof .pbar{height:7px;background:#1a1811;border:1px solid #2a271b;border-radius:4px;overflow:hidden}
.prof .pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--pc),#fff6d8);
  transition:width .35s ease}
.prof .pxp{font-size:9.5px;color:#514e42;text-align:right;margin-top:3px}
.prof .plin{display:flex;flex-wrap:wrap;gap:4px 8px;margin:8px 0 10px}
.prof .pl{font-size:10.5px;color:#7b7666;background:#16150e;border:1px solid #2a271b;
  border-radius:3px;padding:2px 7px}
.prof .pl b{color:var(--pc);margin-right:5px}
.prof .perk{display:flex;align-items:baseline;gap:7px;font-size:10.5px;color:#5a5749;
  padding:4px 0;border-top:1px solid #1e1c14}
.prof .perk .pk{flex:0 0 34px;color:#4b4839;letter-spacing:.04em}
.prof .perk .pkn{color:#7b7666;white-space:nowrap}
.prof .perk .pkd{color:#4b4839;line-height:1.5}
.prof .perk.on{color:#b9b3a0}
.prof .perk.on .pk{color:var(--pc)}
.prof .perk.on .pkn{color:#e6dcc0}
.prof .perk.on .pkd{color:#8d8874}

.skill-assign{padding:0 16px 16px}
#skill-slots{display:flex;gap:8px}
.ss{width:52px;height:52px;border:1px dashed #3b3527;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:22px;position:relative;background:#100f0a;cursor:pointer}
.ss .key{position:absolute;top:1px;left:4px;font-size:9px;color:var(--dim)}
.ss.filled{border-style:solid;border-color:#5a5133}

#quest-body{padding:16px}
/* 세션 탭 — 셋 이상이면 줄바꿈 대신 **가로 스크롤**. 줄바꿈하면 탭이 두 줄이 되어
   아래 장 목록이 통째로 밀린다. 스크롤바는 얇게 그려 창 분위기를 안 깨뜨린다. */
.session-tabs{display:flex;gap:10px;margin-bottom:12px;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:thin}
.session-tabs>*{flex:0 0 auto}
.session-tabs::-webkit-scrollbar{height:6px}
.session-tabs::-webkit-scrollbar-thumb{background:#33301f;border-radius:3px}
.session-tabs::-webkit-scrollbar-track{background:transparent}
.session-note{font-size:11px;color:#8a8470;background:#161309;border:1px solid #2f2a1e;border-radius:4px;
  padding:7px 10px;margin-bottom:12px}
.session-note b{color:var(--gold)}
.session-tab{flex:1;min-width:130px;border:1px solid #2f2a1e;background:#120f09;color:#8d8874;padding:10px 12px;border-radius:5px;text-align:left;font-size:13px;display:flex;flex-direction:column;gap:3px;cursor:pointer;position:relative;box-sizing:border-box;overflow:visible;transition:none}
.session-tab strong{font-size:15px;color:#f0e2b1;letter-spacing:.04em}
.session-tab span{font-size:11px;color:#8d8570}
.session-tab.done{color:#8d8874}
.session-tab.done strong{color:#f0e2b1}
.session-tab.done span{color:#8d8570}
.session-tab.locked{opacity:1}
.session-tab.locked strong{color:#f0e2b1}
.session-tab.locked span{color:#8d8570}
.session-tab.is-selected strong{color:#f0e2b1}
.session-tab.is-selected span{color:#8d8570}
/* 기존: .session-tab.is-selected::after { ... }  →  아래로 변경 */
.session-tab.is-current::after{
  content:attr(data-cur);             /* 글은 quest.ts 가 tr 로 넣는다(다른 언어) */
  position:absolute;
  top:6px;
  right:8px;
  font-size:9px;
  letter-spacing:.12em;
  color:var(--gold);
  font-weight:700;
  text-transform:uppercase;
  pointer-events:none
}
/* 다 지난 세션은 같은 자리에 초록 '완료'. '진행 중'과 자리를 나눠 쓰지만 겹칠 일은
   없다 — 진행 중인 세션은 정의상 아직 done이 아니기 때문이다(done ? 'done' : ...). */
.session-tab.done::after{
  content:attr(data-done);
  position:absolute;
  top:6px;
  right:8px;
  font-size:9px;
  letter-spacing:.12em;
  color:#6fbf5a;
  font-weight:700;
  pointer-events:none
}
.chap{border-left:2px solid #2b2818;padding:0 0 16px 14px;margin-left:6px;position:relative}
.chap:before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:#2b2818}
.chap.done:before{background:#5f7a4a}.chap.cur:before{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.chap h3{font-size:13px;margin-bottom:3px;color:#8d8874}
.chap.cur h3{color:var(--gold)}.chap.done h3{color:#6f8a5c}
.chap-badge{display:inline-block;font-size:10px;letter-spacing:.08em;padding:2px 6px;border-radius:3px;margin-bottom:6px;color:#6f6b5c;background:#1a170f;border:1px solid #2b2818}
.chap-badge.cur{color:#e8d6a0;border-color:#8a6a2a;background:#221a0f}
.chap-badge.done{color:#8bb56c;border-color:#4f643d;background:#171d12}
.chap .cdesc{font-size:11.5px;color:#6f6b5c;line-height:1.7;margin-bottom:7px}
.chap .cdesc p{margin:0 0 7px}
.chap .cdesc-sep{margin:10px 0 6px;font-size:10px;letter-spacing:.16em;color:var(--gold);opacity:.8;
  border-top:1px solid #2e2a1e;padding-top:8px}
.chap .cdesc-hook{color:#a89a6a;font-style:italic;border-left:2px solid #5a4a24;padding-left:8px;margin-top:9px}
.chap .obj{font-size:12px;color:#bdb7a4;line-height:1.8}
.chap .obj.ok{color:#6a8a5a}
.chap.locked .cdesc,.chap.locked .obj,.chap.locked .obj-head{display:none}
/* 준비 / 결착 — 목록을 두 덩이로 갈라 놓는다. "넷 중 둘"이라는 게 한눈에 보여야
   고르는 맛이 생긴다. 예전에는 그냥 다섯 줄이 나란히 있어서 전부 필수로 읽혔다. */
.chap .obj-head{font-size:10px;letter-spacing:.12em;color:#6f6b5c;margin:9px 0 2px}
.chap .obj-head b{color:var(--gold);font-weight:600;letter-spacing:0}
.chap .obj-head em{color:#c08a5a;font-style:normal;letter-spacing:0}
.chap .obj .objreq{font-size:9.5px;color:#c08a5a;border:1px solid #4a3826;
  border-radius:2px;padding:0 4px;margin-right:3px;vertical-align:1px;white-space:nowrap}
.chap .obj.must{color:#d6cfb8}
.chap .obj.goal{color:var(--gold)}
.chap .obj.goal.locked{color:#6a6656}

.side-head{font-size:11px;letter-spacing:.14em;color:var(--gold);margin:18px 0 10px;padding-top:16px;border-top:1px solid #262418}
.side-npc{margin-bottom:12px}
.side-npc b{color:#d8d2be;font-size:12.5px}
.side-done{font-size:10.5px;color:#6f6b5c;margin-left:8px}
.side-q{font-size:11.5px;color:#8d8774;margin-top:4px;padding-left:8px;line-height:1.6}
.side-q b{color:#fff}
.side-q.ok{color:#6a8a5a}
.side-q.empty{color:#5c5849;font-style:italic}
.side-rw{display:block;font-size:10.5px;color:#6f6b5c;margin-top:2px}
.qt-side{margin-top:6px;font-size:10.5px;color:var(--gold)}

#craft-note{padding:12px 16px;font-size:11.5px;color:#6f6b5c;border-bottom:1px solid var(--frame)}
#craft-list{padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.recipe{display:flex;gap:10px;align-items:center;background:#100f0a;border:1px solid #262418;border-radius:3px;padding:8px 10px;cursor:pointer}
.recipe.no{opacity:.45;cursor:not-allowed}
.recipe .ric{font-size:22px}
.recipe .rname{font-size:12px}
.recipe .rmat{font-size:10.5px;color:#6f6b5c;margin-top:2px}
.recipe .rmat .lack{color:#a8524c}
.craft-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid #2a2820}
.craft-filter input{width:130px;min-width:0;background:#0c0b08;border:1px solid var(--frame);color:var(--ink);padding:5px 8px;border-radius:2px;font:inherit;font-size:11px}
.craft-filter input:focus{outline:none;border-color:var(--gold)}
.craft-filter button{padding:5px 8px;font-size:10.5px;line-height:1.25}
.craft-count{margin-left:auto;font-size:10.5px;color:#77715f;white-space:nowrap}

/* ---- 제작 시설 탭 / 개조 ---- */
.craft-tabs{display:flex;gap:6px;margin-bottom:10px}
.ctab{padding:6px 13px;font-size:11.5px;border-radius:3px;background:linear-gradient(#1c1b15,#121109);
  border:1px solid #2a2820;color:#8d8873;letter-spacing:0}
.st-info{font-size:11.5px;color:#8d8873;line-height:1.7}
.st-info b{color:var(--gold)}
.st-info .lack{color:#a8524c}
.st-up{margin-top:9px;padding:8px 11px;background:#151309;border:1px solid #3a3320;border-radius:3px;cursor:pointer}
.st-up .rname{font-size:12px;color:var(--gold)}
.st-up .rmat{font-size:10.5px;color:#6f6b5c;margin-top:3px}
.st-up .rmat .lack{color:#a8524c}
.st-up.no{opacity:.5;cursor:not-allowed}
.st-up.done{cursor:default;color:#5c5849;font-size:11px;font-style:italic;border-style:dashed}

/* ---- 마을 회관 ---- */
#panel-town{width:min(560px,94vw)}
#town-body{padding:14px 16px 18px}
.tv{margin-bottom:12px;padding:11px 13px;border:1px solid #262418;border-radius:4px;background:#100f0a}
.tv.done{border-color:#3a5a34;background:#0e150c}
.tv.next{border-color:var(--gold);background:#171308;box-shadow:0 0 0 1px #d8a94b22 inset}
.tv.far{opacity:.5}
.tv-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.tv-head b{color:var(--gold)}
.tv.done .tv-head b{color:#7fc45f}
.tv-tag{font-size:10px;letter-spacing:.1em;color:#6f6b5c}
.tv.next .tv-tag{color:var(--gold)}
.tv-desc{font-size:11.5px;color:#8d8873;margin:5px 0 7px;line-height:1.7}
.tv-gain{list-style:none;font-size:11.5px;color:#a49e88;line-height:1.85}
.tv-gain li:before{content:'· ';color:var(--gold)}
.tv-cost{margin-top:9px;font-size:11px;color:#6f6b5c}
.tv-cost .lack{color:#a8524c}
.tv-btn{margin-top:9px;width:100%;padding:8px;font-size:12px}
.tv-btn.no{opacity:.45;cursor:not-allowed}
.tv-note{margin-top:6px;font-size:10.5px;color:#5c5849;font-style:italic;line-height:1.7}

/* ---- 기계 패널 ---- */
#panel-machine{width:min(560px,94vw)}
#mach-body{padding:14px 16px 18px}
.mach-desc{font-size:11.5px;color:#7d7969;line-height:1.75;margin-bottom:10px;
  padding-left:9px;border-left:2px solid var(--frame)}
.mach-row{font-size:11.5px;color:#a49e88;line-height:1.9;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mach-row b{color:var(--ink)}
.mach-row.dim{color:#6a6656;font-size:10.5px}
.mach-row .lack,.mach-row.lack{color:#c8635a}
.mdot{width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor}
.mach-btns{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.mbtn{padding:6px 12px;font-size:11.5px;border-radius:3px}
.mach-sec{margin-top:14px;margin-bottom:6px;font-size:10.5px;letter-spacing:.12em;color:var(--gold)}
.mach-sec small{letter-spacing:0;color:#6a6656;margin-left:5px}
.mach-grid{display:grid;grid-template-columns:repeat(auto-fill,46px);gap:5px;
  max-height:150px;overflow-y:auto}
.mach-empty{grid-column:1/-1;font-size:11px;color:#5c5849;font-style:italic;padding:4px 0}
.mach-prog{position:relative;height:18px;margin:8px 0 2px;background:#15140f;border:1px solid var(--frame);border-radius:3px;overflow:hidden}
.mach-prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#5a7a3a,#8fbf5a);transition:width .1s linear}
.mach-prog span{position:relative;display:block;font-size:10.5px;line-height:16px;padding:0 7px;color:var(--ink);text-shadow:0 1px 2px #000}
.mrecs{display:flex;flex-direction:column;gap:3px;max-height:132px;overflow-y:auto}
.mrec{display:flex;align-items:center;gap:3px;padding:2px 6px;border:1px solid #2a2820;border-radius:3px;font-size:10.5px;color:#8a8574}
.mrec.ok{border-color:#3f5a2e;background:#1a2214}
.mrec.cur{border-color:var(--gold);background:#2a2412}
.mrec b{margin:0 5px;color:#6a6656}
.mrec small{margin-right:4px;color:var(--ink)}
.mrec em{margin-left:auto;font-style:normal;color:#6a6656}
.ri{width:18px;height:18px;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}
#mg-bag .slot.no{opacity:.35}

#chest-grid{padding:16px;display:grid;grid-template-columns:repeat(8,46px);gap:5px}
.inv-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 14px}
.inv-actions button{padding:6px 14px;font-size:11.5px}
.equip-title .mini{float:right;padding:3px 10px;font-size:11px;margin-left:8px}

/* ---- 여명 마을 시설 ---- */
.vault-gold-row{display:flex;align-items:center;gap:10px;padding:10px 16px 0;font-size:12px;color:#a49e88}
.vault-gold-row b{color:var(--gold);font-size:14px;margin-left:2px}
.vault-gold-row button{padding:6px 14px;font-size:11.5px;margin-left:auto}
.vault-gold-row button+button{margin-left:0}
.vault-wrap{display:flex;gap:22px;padding:16px;align-items:flex-start}
.vault-col{display:flex;flex-direction:column;gap:8px}
#vault-grid,#vault-bag{display:grid;grid-template-columns:repeat(6,46px);gap:5px}
#board-body{padding:16px}
.quest-card{background:#100f0a;border:1px solid #262418;border-left:2px solid #2b2818;border-radius:3px;padding:10px 12px;margin-bottom:9px}
.quest-card.ready{border-left-color:var(--gold)}
.quest-card.done{opacity:.45}
.quest-card .qc-title{font-size:12.5px;color:#d8d2be;margin-bottom:4px}
.quest-card .qc-obj{font-size:11.5px;color:#bdb7a4}
.quest-card.ready .qc-obj{color:var(--gold)}
.quest-card .qc-rw{font-size:10.5px;color:#6f6b5c;margin-top:3px}
.quest-card .qc-line{font-size:11.5px;color:#9a9484;line-height:1.55;margin-bottom:1px}
.quest-card .qc-say{font-size:11.5px;color:#8f8a78;font-style:italic;line-height:1.55;margin-bottom:3px}
.quest-card .qc-from{font-size:10.5px;color:#6f6b5c;text-align:right;margin:3px 0 6px}
.quest-card .qc-obj b{color:#d8d2be}
/* 못 쓰는 스킬을 눌렀을 때 — 칸이 한 번 튕긴다. 입력을 삼키지 않았다는 표시다 */
@keyframes sk-deny{0%{transform:translateX(0)}25%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}100%{transform:translateX(0)}}
#skillbar .sk.deny{animation:sk-deny .17s ease-out}
#skillbar .sk.deny .ic{filter:grayscale(1) brightness(.5)}
.quest-card button{margin-top:8px;padding:4px 12px;font-size:11px}
#reforge-note,#anvil-note{padding:12px 16px;font-size:11.5px;color:#6f6b5c;border-bottom:1px solid var(--frame)}
#reforge-grid,#anvil-grid{padding:16px;display:grid;grid-template-columns:repeat(8,46px);gap:5px}

/* ================= 대화 ================= */
#dialogue{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:center;padding:0 0 26px;pointer-events:auto}
#dialogue.open{display:flex}
.dlg-box{width:min(860px,92vw);background:linear-gradient(#14130ef2,#0b0a08f2);border:1px solid var(--frame);
  border-top:2px solid var(--gold);border-radius:4px;padding:18px 20px;display:flex;gap:16px;box-shadow:0 16px 50px #000c}
.dlg-portrait{width:62px;height:62px;flex:0 0 62px;border:1px solid var(--frame);border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:30px;background:#0a0906}
.dlg-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dlg-name{font-size:13px;color:var(--gold);letter-spacing:.06em}
/* 다시 듣기는 대화가 아니라 창의 기능이다 — 선택지 줄에서 빼내 이름 옆에 둔다 */
.dlg-replay{margin-left:auto;font-size:10.5px;padding:3px 8px;color:#77725f;
  background:#13120d;border:1px solid #262418;border-radius:3px;line-height:1.3}
.dlg-replay:hover{color:#c8c2ac;border-color:#3a3626}
.dlg-text{font-size:14px;line-height:1.85;color:#ddd7c4;min-height:52px;white-space:pre-line}
.dlg-choices{margin-top:11px;display:flex;flex-direction:column;gap:4px}
/* 대화 진행 화살표 — 이모지 대신 CSS로 직접 그린 삼각형 아이콘(시스템 폰트 의존 없음) */
.dlg-next{font-size:11px;color:#5f5b4d;display:flex;align-items:center;gap:6px}
.dlg-next-ic{width:0;height:0;flex:0 0 auto;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:7px solid #8a8468;animation:dlgNextPulse 1.1s ease-in-out infinite}
@keyframes dlgNextPulse{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
.dchoice{text-align:left;font-size:12.5px;padding:6px 12px;background:#15140e;border:1px solid #2b2818}
/* 대화를 마치는 것과 되돌아가는 것은 고르는 말이 아니다 — 눈이 안 가게 낮춘다 */
.dchoice.meta{font-size:11.5px;padding:5px 12px;color:#77725f;background:#110f0b}
.dchoice.quest{border-left:2px solid var(--gold)}
/* 내가 하는 말 — 기능 버튼(가게·의뢰)과 한눈에 갈라 보이게 따옴표를 두르고 색을 낮춘다 */
.dchoice.say{border-left:2px solid #6a6a8a;color:#cfcfe0;font-style:italic}
.dchoice.say::before{content:'“'}
.dchoice.say::after{content:'”'}

/* ================= 연출 ================= */
#chapter-card{position:absolute;left:0;right:0;top:26%;text-align:center;opacity:0;pointer-events:none;transition:opacity .8s}
#chapter-card.show{opacity:1}
.cc-sub{font-size:11px;letter-spacing:.5em;color:var(--gold);margin-bottom:12px}
.cc-title{font-size:40px;font-weight:300;letter-spacing:.16em;text-shadow:0 4px 24px #000,0 0 40px #000}
.cc-line{font-size:13px;color:#8d8774;margin-top:14px;letter-spacing:.08em}

/* ================= 보스 막대 =================
   틀은 셋이 같다 — 이름 · 막대 · 체력 숫자. 등급(BOSS_TIER)이 바꾸는 것은 **크기와
   장식뿐**이라, 어느 막대를 봐도 읽는 법이 같다.
     mini   얇게, 장식 없이
     normal 양 끝에 붙는 꺾쇠 · 이름 양옆 선
     grand  한 겹 더 두른 바깥 틀 · 양 끝 마름모 · 숨 쉬는 번짐

   ★ 장식은 **막대 바깥에만** 붙인다(.bb-rail 이 그 자리다). 막대 안에 얹으면 정작
     읽어야 할 체력을 덮는다 — 쓸고 지나가던 빛을 뺀 것도 그래서다.
   ★ 페이즈를 금으로 나누지 않는다. 대신 **마지막 페이즈에 막대가 보라색이 된다**(.last).
     금은 "어디서 바뀌나"를 미리 알려 주지만 막대를 토막 내서 남은 양이 잘 안 읽혔다. */
#bossbar{position:absolute;left:50%;transform:translateX(-50%);top:22px;width:min(620px,80vw);display:none}
#bossbar.show{display:block}
.bb-name{text-align:center;font-size:13px;letter-spacing:.2em;color:#e7d9b0;margin-bottom:6px;text-shadow:0 2px 8px #000}
.bb-rail{position:relative}
.bb-track{height:13px;background:#0c0908;border:1px solid #4a3a22;border-radius:2px;overflow:hidden;position:relative}
.bb-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#d0564c,#7a1f1c);
  transition:width .2s,background .45s ease;z-index:2}
/* 방금 깎인 몫이 늦게 따라온다 — 한 방에 얼마가 들어갔는지가 눈에 남는다 */
.bb-ghost{position:absolute;left:0;top:0;bottom:0;background:#e8c8a0;opacity:.30;
  transition:width .5s cubic-bezier(.3,0,.2,1) .18s,background .45s ease;z-index:1}
/* 체력 숫자는 막대 **아래**에 따로 둔다. 트랙 안에 넣었더니 미니보스(높이 9px)에서
   9px 글자가 위아래로 잘렸다 — 칸이 글자보다 작으면 어떤 값을 줘도 잘린다. */
.bb-hp{text-align:center;margin-top:4px;font-size:10px;letter-spacing:.08em;color:#cfc4a6;
  text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums}

/* 마지막 페이즈 — 막대가 보라색으로 넘어간다. 금 대신 이것이 "규칙이 바뀌었다"를 말한다 */
#bossbar.last .bb-fill{background:linear-gradient(#c86ce8,#5a1a7a)}
#bossbar.last .bb-ghost{background:#e0c0f0}
#bossbar.last .bb-hp{color:#dcc0ee}

/* ---- 미니보스 — 더 뺄 것이 없는 상태가 기준이다 ---- */
#bossbar.t-mini{width:min(400px,66vw)}
#bossbar.t-mini .bb-name{font-size:11px;color:#bdb49a;letter-spacing:.16em;margin-bottom:4px}
#bossbar.t-mini .bb-track{height:9px;border-color:#3f3324}
#bossbar.t-mini .bb-fill{background:#b04840}
#bossbar.t-mini.last .bb-fill{background:#9a48b8}
#bossbar.t-mini .bb-hp{font-size:9.5px;margin-top:3px}

/* ---- 일반 보스 — 양 끝에 꺾쇠가 하나씩 붙는다(막대 바깥) ---- */
#bossbar.t-normal .bb-track{height:14px;box-shadow:0 2px 10px #000a}
#bossbar.t-normal .bb-name{color:var(--gold)}
#bossbar.t-normal .bb-name::before,#bossbar.t-normal .bb-name::after{
  content:'';display:inline-block;width:26px;height:1px;background:#6a5432;vertical-align:middle;margin:0 10px}
#bossbar.t-normal .bb-rail::before,#bossbar.t-normal .bb-rail::after{
  content:'';position:absolute;top:50%;transform:translateY(-50%);width:3px;height:calc(100% + 8px);
  background:var(--gold);box-shadow:0 0 6px #d8a94b66;pointer-events:none}
#bossbar.t-normal .bb-rail::before{left:-9px}
#bossbar.t-normal .bb-rail::after{right:-9px}

/* ---- 대형 보스 — 바깥 틀을 한 겹 더 두르고, 양 끝에 마름모가 붙는다 ---- */
#bossbar.t-grand{width:min(700px,88vw)}
#bossbar.t-grand .bb-name{font-size:15px;letter-spacing:.26em;color:#f0d89a;margin-bottom:9px;
  text-shadow:0 2px 10px #000,0 0 22px #c8963caa}
#bossbar.t-grand .bb-name::before,#bossbar.t-grand .bb-name::after{
  content:'';display:inline-block;width:44px;height:1px;vertical-align:middle;margin:0 14px;
  background:linear-gradient(90deg,transparent,var(--gold))}
#bossbar.t-grand .bb-name::after{background:linear-gradient(90deg,var(--gold),transparent)}
/* 바깥 틀 — 트랙과 사이를 4px 띄워 두 겹으로 보이게 한다 */
#bossbar.t-grand .bb-rail{padding:4px;border:1px solid #7a6132;border-radius:4px;
  background:#14100ab0;box-shadow:0 4px 18px #000c}
/* 숨 쉬는 번짐. ★ box-shadow 를 **애니메이션하지 않는다** — 흐린 넓은 면을 매 프레임
   다시 칠해서, 재 보니 대형 보스가 떠 있는 동안 프레임 p95 가 33.4 → 49.9ms 로
   한 프레임 통째로 밀렸다. 번짐은 고정해 두고 **투명도만** 움직인다(합성만 하면 된다). */
.bb-glow{display:none}
#bossbar.t-grand .bb-glow{display:block;position:absolute;inset:-2px;border-radius:6px;
  box-shadow:0 0 26px #c8963c;opacity:.30;pointer-events:none;will-change:opacity;
  animation:bbglow 3.6s ease-in-out infinite}
@keyframes bbglow{0%,100%{opacity:.22}50%{opacity:.62}}
#bossbar.t-grand.last .bb-glow{box-shadow:0 0 26px #a24ec8}
#bossbar.t-grand .bb-track{height:18px;border-color:#5a4628}
#bossbar.t-grand .bb-fill{background:linear-gradient(#e8705e,#d0564c 42%,#6e1a18)}
#bossbar.t-grand.last .bb-fill{background:linear-gradient(#e08cff,#c86ce8 42%,#4a1268)}
#bossbar.t-grand .bb-hp{font-size:12px;letter-spacing:.12em;margin-top:6px}
/* 양 끝 마름모 — 바깥 틀에 붙어 선다 */
#bossbar.t-grand .bb-rail::before,#bossbar.t-grand .bb-rail::after{
  content:'';position:absolute;top:50%;width:9px;height:9px;background:var(--gold);
  transform:translateY(-50%) rotate(45deg);box-shadow:0 0 8px #d8a94b88;pointer-events:none}
#bossbar.t-grand .bb-rail::before{left:-15px}
#bossbar.t-grand .bb-rail::after{right:-15px}
#bossbar.t-grand.last .bb-rail::before,#bossbar.t-grand.last .bb-rail::after{
  background:#d89cf0;box-shadow:0 0 10px #c86ce899}

#toasts{position:absolute;left:50%;transform:translateX(-50%);top:120px;display:flex;flex-direction:column;
  align-items:center;gap:6px;pointer-events:none}
.toast{background:#0e0d0ae8;border:1px solid var(--frame);border-left:2px solid var(--gold);
  padding:8px 16px;border-radius:2px;font-size:12.5px;animation:tin .3s ease-out;box-shadow:0 6px 24px #000a}
.toast.good{border-left-color:#5fc45f}.toast.bad{border-left-color:#c8433c}
/* 패널이 열려 있으면 알림이 패널 내용(스탯·탭 줄)을 덮는다 — 화면 맨 위로 올리고 가장 새 것 하나만 */
#app:has(.panel.open) #toasts{top:8px}
#app:has(.panel.open) #toasts .toast:not(:last-child){display:none}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}

#tooltip{position:absolute;display:none;width:270px;background:#0b0a07f5;border:1px solid var(--frame);
  border-radius:4px;padding:11px 13px;font-size:12px;line-height:1.65;pointer-events:none;z-index:99;
  box-shadow:0 10px 34px #000c}
#tooltip .tname{font-size:13.5px;font-weight:600;margin-bottom:2px}
#tooltip .ttype{font-size:10.5px;color:#6f6b5c;letter-spacing:.06em;margin-bottom:7px}
#tooltip .tstat{color:#b9b3a0}
#tooltip .tstat b{color:#fff}
#tooltip .taff{color:#7fb0e0}
/* 가방 정리 버튼 · 잠긴 칸 */
.mini-btn{float:right;background:#1a1812;border:1px solid var(--frame);color:#c8bfa4;
  font:inherit;font-size:10.5px;padding:2px 9px;border-radius:4px;cursor:pointer}
.slot.is-locked{box-shadow:inset 0 0 0 1px #e0c86a}
.slot.is-locked::after{content:'🔒';position:absolute;right:1px;top:0;font-size:8px;opacity:.85;pointer-events:none}

/* 장비 비교 — 지금 차고 있는 것 대비 증감 */
#tooltip .tcmp{margin-top:8px;padding-top:7px;border-top:1px solid #2a271e;
  display:flex;flex-wrap:wrap;gap:3px 9px;font-size:10.5px}
#tooltip .tcmp .cmp-h{width:100%;color:#6f6b5c;letter-spacing:.04em;margin-bottom:1px}
#tooltip .tcmp .up{color:#7fd08a}
#tooltip .tcmp .down{color:#d08a7f}
#tooltip .tcmp.new{color:#c8a86a;border-top:1px solid #2a271e}
#tooltip .tcmp.same{color:#6f6b5c;border-top:1px solid #2a271e}
#tooltip .tdesc{margin-top:8px;font-size:11px;color:#7b7666;font-style:italic;line-height:1.6}
#tooltip .thint{margin-top:7px;font-size:10.5px;color:#5c5849}
/* 특성 칸 툴팁 */
#tooltip .tmeta{font-size:10.5px;color:#6f6b5c;letter-spacing:.04em;margin-bottom:7px}
#tooltip .tnext{margin-top:6px;font-size:11px;color:#8fb9e0;line-height:1.6}
#tooltip .tgood{margin-top:7px;font-size:10.5px;color:#7fd08a}
#tooltip .tbad{margin-top:7px;font-size:10.5px;color:#d08a7f}
#tooltip .tdim{margin-top:7px;font-size:10.5px;color:#5c5849}
.c0{color:var(--r0)}.c1{color:var(--r1)}.c2{color:var(--r2)}.c3{color:var(--r3)}.c4{color:var(--r4)}.c5{color:var(--r5)}

/* ================= 화면 ================= */
#title-screen,#pause-screen,#death-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#141422 0%,#06070c 62%);z-index:50}
.ts-version{position:absolute;right:16px;bottom:12px;font-size:11px;color:#6f6b5c;letter-spacing:.06em;opacity:.75}
#pause-screen,#death-screen{display:none;background:#04050ae0;backdrop-filter:blur(3px)}
#pause-screen.open,#death-screen.open{display:flex}
.ts-inner{text-align:center;max-width:740px;padding:20px}
.ts-sub{font-size:12px;letter-spacing:.42em;color:var(--gold);margin-bottom:14px;opacity:.9}
/* ---- 로고 — tools/mklogo.py 가 굽는 픽셀 그림(글꼴 파일 없이 어느 언어에서나 같은 모양) ---- */
.ts-inner h1{margin:0 auto 18px;line-height:0}
.ts-logo{width:707px;max-width:min(707px,98vw);height:auto}   /* logo_title.png — 글자는 예전 556px 로고와 같은 크기, 둘레 장식만큼 넓다 */
.ts-tag{font-size:13px;color:#8d8774;line-height:1.9;margin-bottom:34px}
.ts-menu{display:flex;flex-direction:column;gap:9px;width:230px;margin:0 auto}
.ts-menu button{padding:11px}
.ts-inner h1{position:relative}
.ts-inner h1::before{content:"";position:absolute;left:14%;right:14%;top:22%;bottom:10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,52,.2),rgba(255,110,40,.07) 55%,transparent);filter:blur(6px)}
.ts-seed{margin-top:22px;font-size:11px;color:#6f6b5c}
.ts-seed input{background:#0c0b08;border:1px solid var(--frame);color:var(--ink);padding:5px 9px;
  border-radius:2px;font:inherit;font-size:11px;width:150px;margin-left:6px}
/* ---- 세이브 슬롯 목록 (타이틀 화면) ---- */
.slot-list{display:flex;flex-direction:column;gap:10px;width:100%;margin:0 auto}
.slot-card{border:1px solid var(--frame);border-radius:4px;background:#0e0d09b0;padding:12px 16px;
  text-align:left}
.slot-card.filled{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  transition:border-color .15s}
.slot-name{font-size:14px;color:#fff;font-weight:600;margin-bottom:3px}
.slot-meta{font-size:11px;color:#8d8774}
.slot-actions{display:flex;gap:6px;flex-shrink:0}
.slot-actions button{padding:7px 12px;font-size:12px}
.slot-del-btn{color:#c47a6a;border-color:#5a3a32}
.slot-card.empty{text-align:center}
.slot-empty-label{font-size:12px;color:#6f6b5c;margin-bottom:9px}
.slot-new-btn{width:100%;padding:10px}
/* ---- 타이틀에서 뜨는 팝업들 (슬롯 · 새 게임 · 크레딧 · 작별) ---- */
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:#04050ae8;backdrop-filter:blur(3px);z-index:52;padding:20px;overflow:auto}
.modal.open{display:flex}
.modal-box{width:360px;max-height:calc(100vh - 40px);overflow:auto;text-align:left;
  background:#100f0ad0;border:1px solid var(--frame);border-radius:5px;
  padding:16px 18px 14px;box-shadow:0 6px 26px #000c}
.credits{font-size:12.5px;line-height:1.9;color:#a8a292;margin:4px 0 14px}
.credits dt{color:var(--gold);font-size:10.5px;letter-spacing:.14em;margin-top:11px}
.credits dd{color:#fff;font-size:13.5px}
.credits dd a{color:#e8c87a;text-decoration:underline;text-underline-offset:2px}
.credits dd a:hover{color:#ffe3a0}
.modal-box.bye{width:300px;text-align:center;font-size:13px;color:#a8a292;line-height:2}
/* ---- 유적 암호문 (브라우저 prompt 대신) ---- */
.modal-box.code-box{width:300px;text-align:center}
#confirm-screen{z-index:60}   /* 새 게임 · 슬롯 창 위에 뜬다 */
.confirm-msg{white-space:pre-line;font-size:13px;line-height:1.8;color:#d8cfb8;margin:6px 0 14px}
.code-line{font-size:12.5px;color:#a8a292;line-height:1.9;margin:6px 0 14px}
.code-hint{font-size:11.5px;color:var(--dim)}
/* 문설주에 새겨진 것 — 답이 아니라 **풀어야 할 것**이라, 홈(입력칸)과 구별되게
   돌에 새긴 글씨처럼 둔다. 갈래가 '해독'인 자물쇠에서만 보인다. */
.code-carved{font-size:17px;letter-spacing:.22em;color:#cfc08a;text-align:center;
  margin:2px 0 12px;text-shadow:0 1px 0 #000,0 0 10px rgba(200,170,90,.22)}
.code-input{width:150px;margin:0 auto;display:block;background:#0c0b08;
  border:1px solid var(--frame);border-radius:3px;color:var(--gold);
  font:inherit;font-size:30px;font-weight:700;letter-spacing:.36em;text-align:center;
  padding:8px 0 8px .36em;outline:none}
.code-input:focus{border-color:var(--gold)}
.code-msg{min-height:1.4em;margin:9px 0 2px;font-size:11.5px;color:#c47a6a}
.code-msg.ok{color:#8fb87a}
.code-btns{display:flex;gap:8px;margin-top:8px}
.code-btns button{flex:1;padding:8px!important;font-size:12px}
.bye-sub{font-size:11.5px;color:#6f6b5c}
.set-help{list-style:none;font-size:11.5px;line-height:1.95;color:#8d8774}
.set-help b{color:#c9c2ad;font-weight:600}
.ps-inner,.ds-inner{text-align:center}
.ps-inner h2,.ds-inner h2{font-size:28px;font-weight:300;letter-spacing:.2em;margin-bottom:22px}
.ds-inner h2{color:#b8433c}
.ps-inner button,.ds-inner button{display:block;width:250px;margin:8px auto}
/* 위 버튼에 딸린 선택지. 같은 폭으로 두면 다섯 번째 메뉴로 읽히므로,
   한 단 작고 붙여서 "저장하기의 곁가지"로 보이게 한다. */
.ps-inner button.ps-sub{
  width:250px;margin:-4px auto 8px;font-size:11px;padding:5px 8px;
  opacity:.78;letter-spacing:0;
}
.ps-inner button.ps-sub:hover{opacity:1}
/* ---- 설정 (타이틀·일시정지 공통 오버레이) ---- */
#settings-screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:#04050ae0;backdrop-filter:blur(3px);z-index:51;padding:20px;overflow:auto}
#settings-screen.open{display:flex}
/* 세 갈래(화면·소리 / 알림 / 조작)로 나눠 세로 길이를 잡는다.
   예전에는 한 줄로 이어 붙여 화면 높이의 두 배를 넘었고, 조작키를 보려면
   한참을 굴려 내려가야 했다. 이제 머리(탭)와 발(닫기)은 붙박이고 가운데만 구른다. */
.settings{width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 56px);
  display:flex;flex-direction:column;text-align:left;
  background:#100f0ad0;border:1px solid var(--frame);
  border-radius:5px;padding:14px 16px 12px;box-shadow:0 6px 22px #000a}
.set-head{flex:0 0 auto}
.set-body{flex:1 1 auto;overflow:auto;min-height:0;padding:2px 2px 0 0}
.set-foot{flex:0 0 auto;display:flex;gap:8px;padding-top:10px;margin-top:8px;
  border-top:1px solid var(--frame)}
.set-foot .set-reset,.set-foot .set-close{flex:1;margin:0!important;width:auto!important}
.set-title{color:var(--gold);font-size:11px;letter-spacing:.16em;margin-bottom:10px}
.set-tabs{display:flex;gap:6px;margin-bottom:12px}
.set-tabs .set-tab{flex:1;padding:7px 4px!important;font-size:11.5px;
  background:#15130ca0;border:1px solid var(--frame);color:#8d8774;border-radius:3px;
  cursor:pointer;font:inherit;font-size:11.5px;transition:color .14s,border-color .14s}
.set-pane{display:none}
.set-pane.on{display:block}
/* 알림 갈래와 조작키는 항목이 많다 — 두 칸으로 접어 세로를 절반으로 줄인다 */
.set-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 16px}   /* minmax(0,…) — 긴 이름(독일어)이 오른쪽 열을 창 밖으로 밀었다 */
.set-grid .set-row{margin-bottom:5px;min-width:0}
.set-grid .set-row span{width:auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.set-grid .set-row.chk{justify-content:space-between}
.set-row{display:flex;align-items:center;gap:9px;font-size:12px;color:#a49e88;
  margin-bottom:9px;cursor:pointer}
.set-row span{width:80px;flex:0 0 80px}
.set-row select{flex:1 1 auto;background:#15130f;color:var(--ink);border:1px solid #4a4332;border-radius:4px;padding:4px 6px;font:inherit;font-size:12px;cursor:pointer}
.set-row b{width:42px;text-align:right;color:var(--ink);font-weight:500;font-size:11.5px}
.set-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;
  background:#2a2820;border-radius:2px;outline:none;cursor:pointer}
.set-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 1px 3px #000}
.set-row.chk{justify-content:flex-start}
.set-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}
.set-reset{width:100%!important;margin:12px 0 0!important;padding:6px!important;font-size:11.5px}
.set-close{width:100%!important;margin:8px 0 0!important;padding:6px!important;font-size:11.5px}
@media (max-width:820px){.settings{width:calc(100vw - 32px)}.help-inner{width:270px}
  .set-grid{grid-template-columns:1fr}}
#death-line{font-size:13px;color:#8d8774;margin-bottom:22px;line-height:1.8}

/* ===== 절차 생성 스프라이트 아이콘 ===== */
.slot .ic,.sk .ic,.ss .ic,.recipe .ric,.node .nic,.buff .bi,.tip-ic,.ui-ic,#clock-icon,#dlg-portrait{
  background-repeat:no-repeat;background-position:center;background-size:contain;
  image-rendering:pixelated;image-rendering:crisp-edges;display:inline-block;
}
.slot .ic{width:36px;height:36px}
.sk .ic,.ss .ic{width:34px;height:34px}
.recipe .ric{width:32px;height:32px;flex:0 0 32px}
.node .nic{width:28px;height:28px;flex:0 0 28px}
.buff .bi{width:22px;height:22px}
.tip-ic{width:26px;height:26px;vertical-align:middle;margin-right:7px;flex:0 0 26px}
.ui-ic{width:15px;height:15px;vertical-align:-3px;margin-right:3px}
#clock-icon{width:16px;height:16px;vertical-align:-3px}
#dlg-portrait{background-size:88%}
#tooltip .thead{display:flex;align-items:center;margin-bottom:2px}
#tooltip .tname{font-size:13.5px;font-weight:600}
.sk.empty .ic{background-image:none !important}

/* ===== 손그림 애셋 ===== */
/* 타이틀 배경은 이제 움직이는 캔버스다(js/titlebg.js). 그림 한 장을 벽지처럼 깔던
   자리를 대신하고, 그 그림(title_key.png)은 로딩 화면으로 옮겼다. */
#title-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#title-screen .ts-inner{position:relative;z-index:1}
#title-screen .ts-version{z-index:1}
#title-screen.has-art .ts-inner{position:relative;z-index:1}

#cc-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.04);
  width:min(1280px,92vw);aspect-ratio:16/9;opacity:0;pointer-events:none;z-index:4;
  background-size:cover;background-position:center;image-rendering:pixelated;
  transition:opacity 1s, transform 4s ease-out;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 74%);
  mask-image:radial-gradient(ellipse at center,#000 42%,transparent 74%)}
#cc-art.show{opacity:.42;transform:translate(-50%,-50%) scale(1)}
/* 이야기 장면 동안은 삽화를 위로 올려 두고, 대사창이 아래에서 읽히게 한다 */
#cc-art.story{top:38%;opacity:.5;transition:opacity .6s}

body.sprites-on #game{cursor:url(../assets/ui/cursor_aim.png?v=15bacb7f) 16 16, crosshair}
body.sprites-on #game.mining{cursor:url(../assets/ui/cursor_pick.png?v=e4f44957) 3 29, pointer}

/* ===== 로딩 =====
   옛 타이틀 배경(별똥별)이 여기로 왔다. 처음 켤 때부터 애셋이 다 붙을 때까지,
   그리고 세계를 빚는 동안 이 화면이 떠 있는다. */
#loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:#05060a url(../assets/bg/title_key.png?v=d51cada6) center/cover no-repeat;
  image-rendering:pixelated;z-index:60;opacity:1;transition:opacity .45s}
#loading:before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 44%,#080a1466 0%,#04050bcc 62%,#04050bee 100%)}
#loading.open{display:flex}
#loading.fade{opacity:0;pointer-events:none}
.ld-inner{text-align:center;position:relative;z-index:1}
.ld-mark{margin-bottom:22px;line-height:0}
.ld-mark img{width:302px;max-width:70vw;height:auto}
.ld-spin{width:34px;height:34px;margin:0 auto 16px;border:2px solid #2b2818;border-top-color:var(--gold);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading-text{font-size:12px;letter-spacing:.2em;color:var(--dim)}
/* 다 불러올 때까지 타이틀은 숨겨 둔다 — 배경 없는 맨 글자가 한 프레임 비치지 않게 */
body.booting #title-screen{visibility:hidden}

/* ===== 레이어 순서 ===== */
#chapter-card{z-index:5}
#panels{z-index:20}
#dialogue{z-index:22}
#toasts{z-index:30}
#bossbar{z-index:6}

/* ================= 누를 수 있는 것 한 벌 =================
   여태 버튼·탭·선택칸이 저마다 다르게 반응했다. 어떤 것은 테두리만 금색이 되고,
   어떤 것은 바탕만 밝아지고, 어떤 것은 글씨색만 바뀌고, 아예 아무 반응이 없는 것도
   있었다(난이도 칸). 골라 둔 모습은 더 갈렸다 — 제작 시설 탭만 금색으로 꽉 차서
   검은 글씨가 되고, 설정 탭은 테두리만 두르고, 특성 탭은 또 다른 회색이었다.

   이제 셋뿐이다 — **올렸을 때 / 누르는 순간 / 골라 둔 것**.
   덧씌우는 방식(inset box-shadow)이라 바탕이 무엇이든(단색·그러데이션·등급색)
   같은 세기로 얹힌다. 그래서 가방 칸의 등급색도 지워지지 않는다.
   색은 --hi 하나로 정하고, 제 색이 있는 자리만 그 값을 바꾼다. */

/* 이 목록이 "누를 수 있는 것"의 전부다. 새 버튼을 만들면 여기에 한 줄만 넣으면 된다. */
:is(button, .mini-btn, .sk-tab, .set-tabs .set-tab, .ctab,
    .craft-filter .cg, .craft-filter .lock-toggle,
    .dchoice, .recipe, .st-up, .ng-char, .ng-mode,
    .session-tab, .slot, .ss, .slot-card.filled, .slot-del-btn, .node .nbox) {
  transition: border-color .13s ease, color .13s ease, box-shadow .16s ease, transform .07s ease;
}

/* ① 올렸을 때 — 테두리가 강조색으로 서고, 면이 한 겹 밝아진다.
   .no/.done/[disabled] 는 못 누르는 것이므로 반응하지 않는다. */
:is(button, .mini-btn, .sk-tab, .set-tabs .set-tab, .ctab,
    .craft-filter .cg, .craft-filter .lock-toggle,
    .dchoice, .recipe, .st-up, .ng-char, .ng-mode,
    .session-tab, .slot, .ss, .slot-card.filled, .slot-del-btn, .node .nbox
   ):hover:not(.no):not(.done):not([disabled]),
.session-tab.is-hovered {
  border-color: var(--hi);
  color: #fff;
  /* 400px 는 "이 요소를 다 덮을 만큼" 이다 — 칸이 46px 든 탭이 260px 든 같게 덮인다 */
  box-shadow: inset 0 0 0 400px color-mix(in srgb, var(--hi) 9%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--hi) 30%, transparent);
}

/* ② 누르는 순간 — 한 칸 눌린다 */
:is(button, .mini-btn, .sk-tab, .set-tabs .set-tab, .ctab,
    .craft-filter .cg, .craft-filter .lock-toggle,
    .dchoice, .recipe, .st-up, .ng-char, .ng-mode,
    .session-tab, .slot, .ss, .slot-card.filled, .slot-del-btn, .node .nbox
   ):active:not(.no):not(.done):not([disabled]) {
  transform: translateY(1px);
}

/* ③ 골라 둔 것 — 어디서나 같은 모습이다. 테두리가 차고, 면이 물들고, 글씨가 강조색이 된다.
   .on(대부분) · .is-selected(세션 탭) · .sel(핫바 칸) 이 같은 뜻이다. */
:is(button, .mini-btn, .sk-tab, .set-tabs .set-tab, .ctab,
    .craft-filter .cg, .craft-filter .lock-toggle,
    .dchoice, .ng-char, .ng-mode, .session-tab, .slot, .ss).on,
.session-tab.is-selected,
.slot.sel {
  border-color: var(--hi);
  color: var(--hi);
  box-shadow: inset 0 0 0 400px color-mix(in srgb, var(--hi) 15%, transparent),
              inset 0 0 0 1px var(--hi),
              0 0 10px color-mix(in srgb, var(--hi) 20%, transparent);
}

/* ④ 키보드로 옮겨 다닐 때 — 여태 아무 표시가 없었다 */
:is(button, .mini-btn, .sk-tab, .set-tabs .set-tab, .ctab,
    .craft-filter .cg, .craft-filter .lock-toggle,
    .dchoice, .recipe, .st-up, .ng-char, .ng-mode,
    .session-tab, .slot, .ss, .slot-card.filled, .slot-del-btn):focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}

/* ⑤ 못 누르는 것 */
:is(button, .mini-btn, .ctab, .recipe, .st-up, .ng-char, .ng-mode).no,
:is(button, .mini-btn, .ctab, .recipe, .st-up).done,
:is(button, .mini-btn, .ctab)[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* 제 색이 있는 자리 — 모양은 위 그대로, 색만 갈아 끼운다 */
.ng-mode { --hi: var(--mc); }          /* 난이도색 */
.bhead, .node { --hi: var(--bc); }     /* 특성 분기색 (머리글 · 트리 칸) */
.slot.trash-zone { --hi: var(--hp); }  /* 버리기 = 위험 */
.slot-del-btn    { --hi: #c8635a; }    /* 슬롯 지우기 = 위험 */

/* ===== 좁은 화면 대응 ===== */
@media (max-width:820px){
  #bag-grid{grid-template-columns:repeat(6,46px)}
  #chest-grid{grid-template-columns:repeat(6,46px)}
  /* 좁은 화면에서는 아홉 칸이 뭉개진다 — 가로로 밀어 보게 둔다(칸 크기는 지킨다) */
  #tree-wrap{overflow-x:auto}
  .bgrid,.bheads{min-width:660px}
  #prof-wrap{grid-template-columns:1fr}
  #craft-list{grid-template-columns:1fr}
  #quest-tracker{width:190px;font-size:11px}
  .ts-logo{width:496px}
  #hotbar .slot,.sk{width:42px;height:42px;font-size:19px}
  #skillbar{bottom:74px}
  /* 좁은 화면에서는 등급별 폭을 vw 로만 가른다 — 등급 규칙(t-*)이 여기 뒤에 오므로
     셋을 다 적어 주지 않으면 대형이 미니보다 좁아진다.
     ★ 장식이 막대 **바깥**에 붙으므로 양옆을 그만큼 비워 둬야 한다. 94vw 로 두었더니
       390px 화면에서 양 끝 마름모가 반씩 잘렸다(찍어서 확인). 미니는 장식이 없어 넓게. */
  #bossbar{top:112px;width:min(560px,88vw)}
  #bossbar.t-mini{width:min(420px,78vw)}
  #bossbar.t-grand{width:min(600px,84vw)}
  #bossbar.t-grand .bb-name{font-size:13px;letter-spacing:.18em}
  #bossbar.t-grand .bb-track{height:15px}
  #bossbar.t-grand .bb-rail::before{left:-13px}
  #bossbar.t-grand .bb-rail::after{right:-13px}
}
@media (max-width:560px){
  #bag-grid,#chest-grid{grid-template-columns:repeat(5,42px)}
  #vault-grid,#vault-bag,#reforge-grid,#anvil-grid{grid-template-columns:repeat(5,42px)}
  .inv-wrap,.vault-wrap{flex-wrap:wrap}
  #hotbar{gap:3px}
  #hotbar .slot,.sk{width:36px;height:36px;font-size:16px}
  #skillbar{bottom:62px;gap:5px}
  #quest-tracker{display:none}
}

/* ================= 새 게임 팝업 — 캐릭터 · 난이도 · 이름 · 씨앗 ================= */
/* 여기서 고른 캐릭터와 난이도는 되돌릴 수 없다(설정에 없다).
   그래서 캐릭터를 가장 크게 두고, 고르는 자리에 무엇이 달라지는지 붙여 둔다.
   초상은 그 캐릭터의 실제 시트 첫 프레임이다 — 시트가 1040x160(13프레임 x 4배)이라
   그대로 깔면 한 칸이 80x160, 절반으로 깔면 40x80이 된다. */
.ng-box{width:560px}
.ng-sec{color:var(--gold);font-size:11px;letter-spacing:.14em;margin:15px 0 8px}
.ng-sec:first-child{margin-top:2px}
.ng-chars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ng-char{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  padding:9px 4px 8px;font-size:11.5px;color:#8d8774;border:1px solid var(--frame);
  border-radius:4px;background:linear-gradient(#1a1915,#0f0e0a)}
/* 시트 한 프레임을 잘라 보여 준다 — 프레임이 22x41(4배 = 88x164)로 넓어졌으므로
   (잘린 가장자리를 되살리며 여백이 생겼다)
   상자 크기와 background-size 도 같이 맞춘다. 어긋나면 옆 프레임이 물려 보인다.
   ★ tools/mkplayer.py 가 망토 자락 자리까지 칸을 넓혀 36×46(4배 144×184)이다.
   서 있는 장은 망토 쪽(왼쪽)으로 치우쳐(몸 20~108 / 144) 두 칸 오른쪽으로 민다. */
.ng-char .por{width:72px;height:92px;background-size:936px 92px;background-position:4px 0;
  background-repeat:no-repeat}
.ng-detail{display:flex;gap:15px;margin-top:11px;padding:13px 14px;
  border:1px solid var(--frame2);border-radius:4px;background:#0b0a07a0}
.ng-detail .por-big{flex:none;width:144px;height:184px;background-size:1872px 184px;
  background-position:8px 0;background-repeat:no-repeat;image-rendering:pixelated;
  border:1px solid var(--frame);border-radius:3px;background-color:#15140f}
.ng-body{min-width:0}
.ng-name{font-size:17px;color:#fff;font-weight:600;margin-bottom:5px}
.ng-desc{font-size:12px;color:var(--gold);line-height:1.6;margin-bottom:7px}
.ng-story{font-size:11.5px;color:#8d8676;line-height:1.85;margin-bottom:10px;min-height:3.7em}
.ng-stats{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:#8d8774}
.ng-stats b{color:#e8e0cc;font-weight:600;font-size:12px}
.ng-kit{font-size:11px;color:#8d8774;line-height:1.8;margin-top:8px}
.ng-kit b{color:#c9c2ad;font-weight:600}
.ng-modes{display:flex;gap:8px}
.ng-mode{flex:1;padding:10px;font-size:13px;border-radius:3px;
  background:linear-gradient(#22221c,#141310);
  border:1px solid color-mix(in srgb,var(--mc) 45%,var(--frame))}
.ng-mdesc{font-size:11.5px;color:var(--dim);line-height:1.6;margin:9px 0 2px;min-height:2.2em}
.ng-fields{display:flex;gap:10px;margin-top:6px}
.ng-fields label{flex:1;font-size:11px;color:#8d8774}
.ng-fields input{width:100%;margin-top:5px;padding:7px 9px;border-radius:3px;
  background:#0c0b08;border:1px solid var(--frame);color:var(--ink);
  font-family:inherit;font-size:12.5px}
.ng-btns{display:flex;gap:8px;margin-top:15px}
.ng-btns button{flex:1;padding:10px}
.ng-start{border-color:var(--gold);color:#fff}
@media (max-width:620px){
  .ng-box{width:100%}
  .ng-chars{grid-template-columns:repeat(3,1fr)}
  .ng-detail{flex-direction:column;align-items:center;text-align:center}
  .ng-stats{justify-content:center}
}

/* ================= 설정 — 시야 · 알림 · 조작키 ================= */
.set-sub{color:var(--gold);font-size:11px;letter-spacing:.14em;margin:16px 0 6px;
  border-top:1px solid var(--frame2);padding-top:12px}
.set-note{font-size:11px;color:var(--dim);line-height:1.6;margin:2px 0 8px}
.set-row.key{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0}
.keybtn{flex:0 1 132px;min-width:88px;padding:5px 8px;font-size:11.5px;font-family:inherit;white-space:normal;overflow-wrap:anywhere}
.keybtn.waiting{border-color:var(--gold);color:var(--gold)}

/* 불가능 모드로 기록이 지워진 사망 화면 — 부활 버튼이 의미 없으므로 감춘다 */
#death-screen.wipe #btn-respawn{display:none}
/* 강화 모루 — 재련대와 같은 짜임. MAX에 닿은 칸은 눌러도 소용없으니 눌러 보이지 않게 */
#anvil-grid .slot.dim{opacity:.42;cursor:default}
#anvil-grid .slot .cnt{color:#ffd24a}

/* 펫 경험치 막대 — 툴팁 안에 얇게 */
.petxp{height:4px;margin:3px 0 1px;background:#241f18;border:1px solid var(--frame);border-radius:2px;overflow:hidden}
.petxp i{display:block;height:100%;background:linear-gradient(90deg,#c8a058,#ffd24a)}

/* 여정의 기록 — 상단 탭(여정 / 업적) */
/* 탭 줄은 #quest-body의 padding(16px)에 그대로 맞춘다. 예전에 제 padding을 14px
   더 준 탓에 탭 버튼만 87px에서 시작하고, 아래 세션 탭·장 목록·의뢰는 73px에서
   시작해 **탭만 안쪽으로 밀려 보였다**(실측).
   좌우 margin을 음수로 빼서 sticky 막대가 창 폭을 꽉 채우게 하고, 그만큼 padding으로
   되돌려 글자 시작점은 73px에 맞춘다. */
.qtabs{display:flex;gap:6px;margin:-16px -16px 12px;padding:14px 16px 10px;
  position:sticky;top:-16px;background:var(--panel);z-index:2;
  border-bottom:1px solid var(--frame)}
.qtab{background:#1f1b15;border:1px solid var(--frame);color:#8a8271;font:inherit;font-size:12.5px;
  padding:6px 14px;border-radius:4px;cursor:pointer}
.qtab:hover{color:#c8bda4}
.qtab.on{background:#332b1e;border-color:#7a6a44;color:#e8dcc0}
.qtab b{color:#c8a058;font-weight:600}

/* 업적 */
.ach-head{display:flex;justify-content:space-between;align-items:baseline;
  margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--frame);
  color:#c8bda4;font-size:12.5px}
.ach-head span{color:#7a7263;font-size:11px}
/* 한 줄의 칸 폭을 **고정**한다. 예전엔 난이도 배지와 날짜가 auto 폭이라
   글자 수("쉬움" 2자 / "어려움" 3자)와 날짜 유무에 따라 줄마다 좌우로 흔들렸다 —
   목록이 들쭉날쭉해 보이던 이유가 이것이다. */
.ach{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:7px 10px;
  background:#1a1712;border:1px solid var(--frame);border-radius:4px}
.ach.on{background:#221d13;border-color:#5a4a2a}
.ach.off{opacity:.55}
.ach-ic{width:24px;height:24px;flex:0 0 24px;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.ach.off .ach-ic{filter:grayscale(.85) brightness(.72)}
.ach-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ach-txt b{font-size:12.5px;color:#e8dcc0;font-weight:600}
.ach.off .ach-txt b{color:#8a8271}
.ach-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* 설명은 접는다 — 긴 언어(스페인어)에서 말줄임으로 잘렸다 */
.ach-txt i{font-style:normal;font-size:11px;color:#8a8271;line-height:1.4}
.ach-when{font-size:10.5px;color:#6a6250;flex:0 0 72px;text-align:right}

/* 유적 탐사 기록 — 유적 하나가 카드 하나. 왼쪽 큰 글자가 등급이다 */
.rv-note{font-size:11.5px;color:#8a8271;line-height:1.55;padding:0 0 10px}
.rv-note b{color:#c8bda4;font-weight:600}
.rv{display:flex;gap:12px;align-items:flex-start;margin:0 0 6px;padding:9px 11px;
  background:#1a1712;border:1px solid var(--frame);border-radius:4px}
.rv.off{opacity:.5}
.rv-rank{flex:0 0 38px;text-align:center;font:700 26px/1 "Hahmlet","Pretendard",serif}
.rv-rank small{display:block;font:500 10px/1.6 "Ashfall","Pretendard",sans-serif;color:#7a7263}
.rv-body{flex:1;min-width:0}
.rv-body h4{margin:0 0 5px;font-size:13px;color:#e8dcc0;font-weight:600}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:3px 10px;font-size:11px;color:#8a8271}
.rv-grid span.ok{color:#c8e0a0}
.rv-grid b{color:#c8bda4;font-weight:600}
.rv-seal{margin-top:5px;font-size:11px;color:#c8a058}
.rv-next{margin-top:5px;font-size:11px;color:#bda888;line-height:1.5}

/* 업적 — 난이도 표시 */
.ach-sum{display:flex;gap:14px;padding:0 0 10px;font-size:11.5px;color:#8a8271}
.ach-sum b{font-weight:600}
.ach-tier{flex:0 0 52px;box-sizing:border-box;text-align:center;font-size:10px;padding:2px 0;
  border:1px solid;border-radius:9px;letter-spacing:.02em}
.ach.off .ach-tier{opacity:.7}
.ach.on.t-easy{border-color:#3f6a34}
.ach.on.t-mid{border-color:#7a6428}
.ach.on.t-hard{border-color:#7a3428}

/* 숨은 업적 — 아직 못 한 것. 이름 자리를 물음표로 채운다 */
.ach.hid .ach-txt b{color:#6f6858;letter-spacing:.12em}
.ach.hid .ach-txt i{color:#645d4e;font-style:italic}

/* 손댄 세이브 — 목록에서 바로 보이게 */
.slot-card.tampered{border-color:#7a3428}
.slot-card.tampered .slot-name{color:#a8968c}
.slot-card.tampered .slot-meta{color:#d05a4a}
.slot-card.tampered .slot-load-btn{opacity:.45;cursor:not-allowed}

/* 탭 단추 — 핫바(가운데 약 520px)와 겹치는 폭에서는 핫바 **위** 오른쪽으로 올리고, 좁으면 이름을 뺀다 */
@media (max-width:1180px){ #tabbar{bottom:78px} }
@media (max-width:820px){ #tabbar{bottom:70px;right:8px} #tabbar .tb{width:36px;height:38px;padding-top:9px} #tabbar .tb-n{display:none} #tabbar .tb-ic{width:20px;height:20px} }

/* 단추·소제목 앞 아이콘(itemart UISPEC — 새 게임 · 슬롯 · 타이틀) */
.ui-ic{display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-4px;
  background-size:contain;background-repeat:no-repeat;flex:none}
.ng-sec .ui-ic{width:16px;height:16px;vertical-align:-3px}
.ng-mode{display:flex;align-items:center;justify-content:center}
.ng-mode .ui-ic{width:24px;height:24px;vertical-align:middle}
.ng-fields label .ui-ic{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
#title-screen button .ui-ic{width:20px;height:20px;vertical-align:-5px}

/* 화면 구성(설정) — 끈 것은 숨긴다. 퀘스트 추적은 ui.js 가 display 를 직접 만지므로 !important */
body.hide-tabbar #tabbar,body.hide-quest #quest-tracker,body.hide-buffs #buffs,
body.hide-clock #clock-box,body.hide-hotbar #hotbar{display:none!important}
/* 터치 조작(?touch=1)을 켠 낮은 화면(폰 가로) — 오른쪽 단추가 미니맵·퀘스트 창과 겹친다. 둘은 탭 단추 줄의 '지도'·'일지'로 본다. */
@media (max-height:540px){
  body.touch #minimap,body.touch #quest-tracker{display:none!important}
}
.ps-ic{display:inline-block;width:26px;height:26px;margin-right:10px;vertical-align:-5px;
  background-size:contain;background-repeat:no-repeat}
.set-title .ps-ic{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.ps-inner .ps-menu .ui-ic{width:18px;height:18px;margin-right:8px;vertical-align:-4px}
.set-tabs .set-tab .ui-ic{width:15px;height:15px;margin-right:4px;vertical-align:-3px}
/* ---- 멀티플레이 창 · 일시정지 방 줄 ---- */
.modal-box.mp-box{width:400px}
.mp-lead{font-size:12px;color:#a8a292;line-height:1.7;margin-bottom:4px}
.mp-sec{color:var(--gold);font-size:11.5px;letter-spacing:.08em;margin:14px 0 6px;padding-top:10px;border-top:1px solid #2a261c}
.mp-sec .ui-ic{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.mp-note{font-size:11px;color:#8d8774;line-height:1.6;margin:2px 0 8px}
.mp-wide{width:100%;padding:9px}
.mp-wide .ui-ic{width:15px;height:15px;margin-right:6px;vertical-align:-3px}
@media (max-width:480px){.modal-box.mp-box{width:100%}}
/* ★ .ps-inner button 의 display:block 이 hidden 을 이긴다 — 상태에 따라 숨기는 방 단추가 다 보였다 */
.ps-inner [hidden]{display:none!important}
/* 파티 목록(HUD) — 보기만 한다(HUD 는 클릭을 안 받는다). 내보내기는 일시정지 창 */
#party{margin-top:8px;background:#0b0a08b8;border:1px solid #2a261c;border-radius:4px;padding:5px 8px;font-size:11px}
.pt-head{color:var(--gold);font-size:10.5px;letter-spacing:.08em;margin-bottom:3px}
.pt-row{display:grid;grid-template-columns:1fr auto auto;gap:2px 8px;align-items:center;padding:2px 0}
.pt-row.me .pt-name{color:#e8dcb8}
.pt-name{color:#c8bfa4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-host{font-style:normal;color:var(--gold);font-size:9.5px;margin-right:4px;border:1px solid #6a5a30;border-radius:2px;padding:0 3px}
.pt-lv{color:#8d8774}
.pt-ping{color:#6f8a6a;min-width:38px;text-align:right}
.pt-hp{grid-column:1/-1;height:3px;background:#2a1412;border-radius:2px;overflow:hidden}
.pt-hp i{display:block;height:100%;background:#b8433c}
/* 채팅 — 핫바 위 왼쪽. HUD 는 클릭을 안 받으니 입력 칸만 받는다 */
#chat{position:absolute;left:14px;bottom:96px;width:380px;max-width:calc(100% - 28px)}
#chat-log{display:flex;flex-direction:column;gap:2px}
.ch-line{background:#0b0a08b0;border-radius:3px;padding:2px 7px;font-size:12px;color:#e0d8c0;
  width:fit-content;max-width:100%;overflow-wrap:anywhere;text-shadow:0 1px 1px #000}
.ch-line b{color:var(--gold);font-weight:600;margin-right:4px}
#chat-input{pointer-events:auto;width:100%;margin-top:4px;padding:6px 9px;border-radius:3px;background:#0c0b08e8;
  border:1px solid var(--gold);color:var(--ink);font-family:inherit;font-size:12.5px}
.pt-pvp{color:#e07a5a;font-weight:600}

/* 참가 창 — 이름 한 열(max-content) · 입력 한 열. 새 캐릭터 줄도 같은 두 열(subgrid)이라 어느 언어든 입력 칸 끝이 맞는다 */
.mp-form{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px;align-items:center}
.mp-form>label,.mp-new>label{font-size:11px;color:#8d8774;white-space:nowrap}
.mp-form input,.mp-form select{width:100%;min-width:0;padding:7px 9px;border-radius:3px;background:#0c0b08;
  border:1px solid var(--frame);color:var(--ink);font-family:inherit;font-size:12.5px}
.mp-code-box{position:relative;width:max-content;max-width:100%}
.mp-cells{display:flex;gap:6px}
.mp-cells i{width:32px;height:38px;display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:19px;font-weight:600;color:var(--ink);background:#0c0b08;border:1px solid var(--frame);border-radius:3px}
.mp-cells i.opt{border-style:dashed;opacity:.75}
.mp-cells i.cur{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
/* ★ 투명 입력 칸은 네모 위를 그대로 덮는다 — 16px 밑이면 iOS 가 확대한다 */
.mp-form .mp-code{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;
  color:transparent;caret-color:transparent;font-size:16px;outline:none;cursor:text}
.mp-hint{grid-column:2;font-size:10.5px;color:#8d8774;margin:-3px 0 2px}
.mp-wide-note{grid-column:1/-1;margin:0}
@media (max-width:480px){.mp-cells{gap:4px}.mp-cells i{width:28px;height:34px;font-size:17px}}

/* 일시정지 — 멀티플레이면 두 열(왼쪽 메뉴 · 오른쪽 방). 한 열일 때는 예전 그대로 */
.ps-cols{display:flex;justify-content:center;align-items:flex-start;gap:28px}
.ps-cols .ps-menu{flex:0 0 auto}
.ps-side{flex:0 0 290px;text-align:left;background:#0b0a08cc;border:1px solid #2a261c;border-radius:5px;padding:12px 14px;margin-top:8px}
.ps-side-title{color:var(--gold);font-size:12.5px;letter-spacing:.1em;margin-bottom:8px}
.ps-side-title .ui-ic{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.ps-side-sec{color:#8d8774;font-size:10.5px;letter-spacing:.08em;margin:10px 0 5px;padding-top:8px;border-top:1px solid #2a261c}
.ps-room{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#8d8774}
.ps-room b{color:var(--gold);font-size:17px;letter-spacing:.25em;flex:1}
.ps-inner .ps-side .mini-btn{float:none;display:inline-block;width:auto;margin:0;padding:3px 10px;font-size:11px;white-space:nowrap}
.ps-party{display:flex;flex-direction:column;gap:4px}
.ps-guest{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#c8bfa4;
  background:#14120d;border:1px solid #2a261c;border-radius:3px;padding:4px 8px;min-height:28px}
.ps-guest span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-guest .pt-host{font-style:normal}
.ps-cfg{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:#c8bfa4}
.ps-cfg label{display:flex;align-items:center;gap:7px;cursor:pointer}
.ps-cfg input{accent-color:var(--gold);flex:0 0 auto}
.ps-cfg input:disabled+*,.ps-cfg label:has(input:disabled){cursor:default;opacity:.75}
.ps-cfg-note{font-size:10.5px;color:#6f6b5c;margin-top:6px}
.ps-inner .ps-side button:not(.mini-btn){width:100%;margin:12px 0 0}
@media (max-width:640px),(max-height:440px){.ps-cols{gap:14px}.ps-side{flex-basis:250px;padding:9px 11px}}

/* 단추·탭은 한 줄 — 두 줄로 꺾이면 단추가 두꺼워져 줄이 어긋난다(ui-audit ⑥). 길면 말줄임, 발의 단추들은 줄째로 넘긴다 */
.set-tabs .set-tab{flex:1 1 auto;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.set-foot{flex-wrap:wrap}
.set-foot button{flex:1 1 auto!important;white-space:nowrap}
/* 조작키 — 이름 한 열(고정 폭) · 단추 한 열. 이름이 길면 이름만 꺾이고 단추의 왼쪽 끝은 그대로 */
.set-grid .set-row.key{display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:8px}
.set-grid .set-row.key .keybtn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}
/* 낮은 화면(폰 가로)의 일시정지 — 제목·단추를 줄여 두 열이 화면에 들어오게 */
#pause-screen{overflow:auto}
@media (max-height:440px){
  .ps-inner h2{font-size:20px;margin-bottom:8px}
  .ps-inner button{margin:5px auto;padding-top:6px;padding-bottom:6px}
  .ps-inner button.ps-sub{margin:-2px auto 5px}
  .ps-side{padding:8px 11px;margin-top:5px}
  .ps-side-sec{margin:6px 0 4px;padding-top:5px}
  .ps-inner .ps-side button:not(.mini-btn){margin-top:8px}
}
/* 터치 기기는 화면 위 가운데에 전체 화면 단추가 떠 있다 — 멈춤 제목이 그 밑에 깔리지 않게 내린다 */
@media (max-height:440px){body.touch #pause-screen{padding-top:calc(44px + env(safe-area-inset-top,0px))}}
#btn-mp-join:disabled{opacity:.45;cursor:default}