/* 저승사자 공용 스킨 — 옻칠한 검은 바탕 · 금박 회문(回紋) 띠 · 단청 오방색 · 붉은 인장
   그림 파일 없이 CSS 와 SVG 무늬만 쓴다. */
:root{
  --ink:#0b090e;--lac:#17121a;--lac2:#211922;--lac3:#2c212b;
  --gold:#c9a45a;--gold2:#8a6a2e;--gold3:#f0d9a0;
  --red:#7e1f2b;--red2:#b83644;--jade:#3f8f7f;--blue:#34507e;--paper:#e9dfc8;
  --tx:#efe6d2;--mu:#a2977f;--ln:#4a3a2a;
  /* 회문(번개무늬) 띠 */
  --meander:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 8H15V1.5H4.5V5H10.5' fill='none' stroke='%23c9a45a' stroke-width='1.1'/%3E%3C/svg%3E");
  /* 창살(격자) 무늬 */
  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 14H28M14 0V28M4 4H10V10H4zM18 18H24V24H18z' fill='none' stroke='%23c9a45a' stroke-opacity='.07'/%3E%3C/svg%3E");
  /* 구름무늬 */
  --cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M2 12c4 0 5-5 9-5s4 4 8 4 5-8 10-8 6 6 5 9c3-1 6 1 6 3' fill='none' stroke='%23c9a45a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --serif:"Nanum Myeongjo","Batang","Noto Serif KR",serif;
}
*{box-sizing:border-box}
body.sk{margin:0;background:var(--ink);color:var(--tx);font-family:var(--serif);-webkit-tap-highlight-color:transparent}

/* ── 판(패널): 옻칠 바탕 + 위아래 회문 띠 + 금 테 ── */
.pn{position:relative;background:var(--lattice),linear-gradient(180deg,var(--lac2),var(--lac) 60%,#120e15);border:1px solid var(--gold2);border-radius:4px;
  box-shadow:0 0 0 3px var(--ink),0 0 0 4px #5a4420,0 10px 30px #000a,inset 0 0 40px #0008;padding:22px 16px 20px}
.pn::before,.pn::after{content:"";position:absolute;left:8px;right:8px;height:9px;background:var(--meander) repeat-x center;opacity:.85}
.pn::before{top:5px}.pn::after{bottom:5px;transform:scaleY(-1)}
/* 제목: 구름무늬 사이의 글씨 + 오방색 띠 */
.ttl{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 10px;font-size:20px;letter-spacing:6px;color:var(--gold3);text-shadow:0 2px 0 #000}
.ttl::before,.ttl::after{content:"";width:44px;height:16px;background:var(--cloud) no-repeat center;flex:none}
.ttl::after{transform:scaleX(-1)}
.obang{height:3px;margin:0 auto 12px;max-width:260px;background:linear-gradient(90deg,#34507e 0 20%,#b83644 0 40%,#d9b23e 0 60%,#e9dfc8 0 80%,#17121a 0);border:1px solid #0008}
.sub{color:var(--mu);font-size:12.5px;line-height:1.6}

/* ── 단추: 모서리를 딴 팔각 장석 ── */
.bt{font-family:var(--serif);font-size:14px;color:var(--tx);min-height:44px;padding:8px 16px;cursor:pointer;border:0;position:relative;
  background:linear-gradient(180deg,#3a2c33,#231a20);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  box-shadow:inset 0 0 0 1px var(--gold2),inset 0 0 0 2px #0008,inset 0 10px 14px #ffffff0c;letter-spacing:1px}
.bt:hover{background:linear-gradient(180deg,#4a3840,#2c2028);color:var(--gold3)}
.bt:active{transform:translateY(1px)}
.bt:disabled{opacity:.4;cursor:default}
.bt.pri{background:linear-gradient(180deg,#a02c3a,#6a1823);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 2px #0006,inset 0 10px 14px #ffffff18;color:#fff3da;font-size:16px;letter-spacing:4px}
.bt.pri:hover{background:linear-gradient(180deg,#b83644,#7e1f2b)}
.bt.on{box-shadow:inset 0 0 0 1px var(--gold3),inset 0 0 0 3px var(--gold2),inset 0 0 18px #c9a45a44;color:var(--gold3)}
.bt.sm{min-height:36px;padding:5px 10px;font-size:12.5px}
/* 닫기: 붉은 인장 */
.xb{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;cursor:pointer;background:radial-gradient(circle,#a02c3a 0 52%,#6a1823 54% 62%,transparent 64%);color:#fff3da;font-size:17px;font-family:var(--serif);z-index:2}

/* ── 칸(슬롯): 금 테 사각 + 등급 색 모서리 ── */
.slot{position:relative;background:linear-gradient(180deg,#261c24,#17121a);border:1px solid var(--gold2);box-shadow:inset 0 0 0 2px #0009,inset 0 0 14px #000;min-height:64px;cursor:pointer;padding:6px}
.slot:hover,.slot.sel{border-color:var(--gold3);box-shadow:inset 0 0 0 2px #0009,inset 0 0 16px #c9a45a55}
.slot .g{position:absolute;left:0;top:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--gc,#9a94a8) transparent transparent transparent}
.slot .lv{position:absolute;right:4px;bottom:2px;font-size:11px;color:var(--gold3)}
.slot.eq::after{content:"着";position:absolute;right:3px;top:2px;font-size:10px;color:#fff3da;background:var(--red);padding:0 3px}
.slot.lock{opacity:.45}

/* ── 표 · 줄 ── */
.tb{width:100%;border-collapse:collapse;font-size:13.5px}
.tb th{text-align:left;font-weight:400;color:var(--mu);padding:5px 0;border-bottom:1px solid #ffffff10;white-space:nowrap}
.tb td{text-align:right;padding:5px 0;border-bottom:1px solid #ffffff10}
.rw{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.rw>.bt{flex:1}
.ga{height:8px;background:#0a0709;border:1px solid var(--gold2);position:relative}.ga>i{display:block;height:100%;background:linear-gradient(180deg,var(--gold3),var(--gold2))}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border:1px solid var(--gold2);color:var(--gold3);margin:2px 3px 2px 0}
.coin::before{content:"";display:inline-block;width:11px;height:11px;border:2px solid #d9b23e;border-radius:50%;margin-right:5px;vertical-align:-2px;box-shadow:inset 0 0 0 2px var(--lac),inset 0 0 0 4px #d9b23e}
.jade::before{content:"";display:inline-block;width:10px;height:10px;background:linear-gradient(135deg,#9fe6cf,#3f8f7f);transform:rotate(45deg);margin:0 7px 0 3px;vertical-align:-1px}
.ok{color:#8fd8a8}.no{color:#ff8a7a}.gd{color:var(--gold3)}

/* ── 아래 메인 메뉴: 기와 처마 아래 다섯 칸 ── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:2px;padding:10px 8px 8px;
  background:linear-gradient(180deg,transparent,#0b090ef2 34%);pointer-events:none}
.nav::before{content:"";position:absolute;left:0;right:0;top:20px;height:9px;background:var(--meander) repeat-x center;opacity:.55}
.nav .bt{pointer-events:auto;flex:1;max-width:150px;min-height:58px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px}
.nav .bt svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ── 위 재화 줄 ── */
.top{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:14px;padding:8px 12px 16px;background:linear-gradient(180deg,#0b090ef2 55%,transparent);font-size:14px}
.top h1{font-size:18px;letter-spacing:5px;margin:0;color:var(--gold3)}
.top .sp{margin-left:auto}
/* ── 화면(메뉴 하나) ── */
.page{position:fixed;inset:46px 0 78px;z-index:5;overflow:auto;padding:8px 12px 16px;display:none}
.page.open{display:block}
.page>.pn{max-width:980px;margin:0 auto}
.dlgbg{position:fixed;inset:0;background:#000b;z-index:20;display:none;align-items:center;justify-content:center;padding:12px}
.dlgbg.open{display:flex}
.dlgbg>.pn{width:min(480px,100%);max-height:92vh;overflow:auto}
@media (max-width:700px){.ttl{font-size:17px;letter-spacing:3px}.nav .bt{font-size:12px}}

/* ═════════ 2판: 무늬를 더 얹는다 — 칠보문 · 귀갑문 · 단청 띠 · 번개문 모서리 · 현판 · 매듭 ═════════ */
:root{
  /* 칠보문(七寶紋): 맞물린 동그라미 */
  --chilbo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23c9a45a' stroke-opacity='.2'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3Ccircle cx='0' cy='0' r='12'/%3E%3Ccircle cx='24' cy='0' r='12'/%3E%3Ccircle cx='0' cy='24' r='12'/%3E%3Ccircle cx='24' cy='24' r='12'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23c9a45a' fill-opacity='.28'/%3E%3C/svg%3E");
  /* 귀갑문(龜甲紋): 거북 등 육각 */
  --gwigap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 0v8L0 16v16l14 8v8M14 8l14 8v16l-14 8' fill='none' stroke='%23c9a45a' stroke-opacity='.09'/%3E%3C/svg%3E");
  /* 단청 띠: 녹 · 적 · 청 · 황 연꽃잎 */
  --dancheong:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12'%3E%3Crect width='64' height='12' fill='%2317121a'/%3E%3Cpath d='M0 12a8 8 0 0116 0z' fill='%233f8f7f'/%3E%3Cpath d='M16 12a8 8 0 0116 0z' fill='%23b83644'/%3E%3Cpath d='M32 12a8 8 0 0116 0z' fill='%2334507e'/%3E%3Cpath d='M48 12a8 8 0 0116 0z' fill='%23d9b23e'/%3E%3Cg fill='none' stroke='%23e9dfc8' stroke-opacity='.75' stroke-width='.8'%3E%3Cpath d='M0 12a8 8 0 0116 0M16 12a8 8 0 0116 0M32 12a8 8 0 0116 0M48 12a8 8 0 0116 0'/%3E%3Cpath d='M4 12a4 4 0 018 0M20 12a4 4 0 018 0M36 12a4 4 0 018 0M52 12a4 4 0 018 0'/%3E%3C/g%3E%3Cpath d='M0 .5h64' stroke='%23c9a45a'/%3E%3C/svg%3E");
  /* 번개문 모서리 (왼쪽 위 기준) */
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M1 25V1h24M5 21V5h16M9 17V9h8v4h-4' fill='none' stroke='%23f0d9a0' stroke-width='1.3'/%3E%3C/svg%3E");
  --cornerTR:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath transform='matrix(-1 0 0 1 26 0)' d='M1 25V1h24M5 21V5h16M9 17V9h8v4h-4' fill='none' stroke='%23f0d9a0' stroke-width='1.3'/%3E%3C/svg%3E");
  --cornerBL:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath transform='matrix(1 0 0 -1 0 26)' d='M1 25V1h24M5 21V5h16M9 17V9h8v4h-4' fill='none' stroke='%23f0d9a0' stroke-width='1.3'/%3E%3C/svg%3E");
  --cornerBR:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath transform='matrix(-1 0 0 -1 26 26)' d='M1 25V1h24M5 21V5h16M9 17V9h8v4h-4' fill='none' stroke='%23f0d9a0' stroke-width='1.3'/%3E%3C/svg%3E");
  --cS:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 11V1h10M4.5 8V4.5H8' fill='none' stroke='%23f0d9a0' stroke-width='1.2'/%3E%3C/svg%3E");
  --cSTR:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath transform='matrix(-1 0 0 1 12 0)' d='M1 11V1h10M4.5 8V4.5H8' fill='none' stroke='%23f0d9a0' stroke-width='1.2'/%3E%3C/svg%3E");
  --cSBL:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath transform='matrix(1 0 0 -1 0 12)' d='M1 11V1h10M4.5 8V4.5H8' fill='none' stroke='%23f0d9a0' stroke-width='1.2'/%3E%3C/svg%3E");
  --cSBR:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath transform='matrix(-1 0 0 -1 12 12)' d='M1 11V1h10M4.5 8V4.5H8' fill='none' stroke='%23f0d9a0' stroke-width='1.2'/%3E%3C/svg%3E");
  /* 매듭과 술 */
  --tassel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='44'%3E%3Cpath d='M8 0v8' stroke='%23c9a45a'/%3E%3Cpath d='M8 8l5 5-5 5-5-5z' fill='%23b83644' stroke='%23f0d9a0' stroke-width='.8'/%3E%3Ccircle cx='8' cy='21' r='2.2' fill='%23d9b23e'/%3E%3Cpath d='M5 24h6l1 18H4z' fill='%23b83644'/%3E%3Cpath d='M6 26v15M8 26v16M10 26v15' stroke='%237e1f2b' stroke-width='.7'/%3E%3C/svg%3E");
  --cloudR:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath transform='matrix(-1 0 0 1 44 0)' d='M2 12c4 0 5-5 9-5s4 4 8 4 5-8 10-8 6 6 5 9c3-1 6 1 6 3' fill='none' stroke='%23c9a45a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 판: 위아래에 회문 + 단청 띠, 네 모서리에 번개문 장석, 바탕에 귀갑문 */
.pn{padding:40px 18px 36px;
  background:var(--corner) no-repeat 5px 24px,var(--cornerTR) no-repeat right 5px top 24px,var(--cornerBL) no-repeat left 5px bottom 24px,var(--cornerBR) no-repeat right 5px bottom 24px,var(--gwigap),var(--lattice),linear-gradient(180deg,var(--lac2),var(--lac) 60%,#120e15);
  box-shadow:0 0 0 3px var(--ink),0 0 0 4px #5a4420,0 0 0 7px var(--ink),0 0 0 8px #3a2c16,0 12px 34px #000b,inset 0 0 44px #0009}
.pn::before{top:0;left:0;right:0;height:21px;opacity:1;background:var(--meander) repeat-x center 1px,var(--dancheong) repeat-x center 10px}
.pn::after{bottom:0;left:0;right:0;height:21px;opacity:1;transform:scaleY(-1);background:var(--meander) repeat-x center 1px,var(--dancheong) repeat-x center 10px}
/* 제목: 현판(懸板) — 금 테 두른 검은 널, 양쪽에 구름, 양 끝에 매듭 술 */
.ttl{width:max-content;max-width:100%;margin:4px auto 24px;padding:9px 64px 10px;position:relative;font-size:20px;letter-spacing:8px;color:var(--gold3);
  background:var(--cloud) no-repeat 10px center,var(--cloudR) no-repeat right 10px center,var(--chilbo),linear-gradient(180deg,#2e2024,#150f13);
  border:1px solid var(--gold);box-shadow:inset 0 0 0 3px #0b090e,inset 0 0 0 4px var(--gold2),0 3px 0 #000,0 0 18px #c9a45a22}
.ttl::before,.ttl::after{content:"";position:absolute;top:100%;width:16px;height:44px;background:var(--tassel) no-repeat center;transform:none;flex:none}
.ttl::before{left:14px}.ttl::after{right:14px}
.obang{display:none}
/* 칸: 칠보문 바탕 + 겹 금 테 + 네 귀 장석 */
.slot{padding:9px 6px 6px;border:1px solid var(--gold2);
  background:var(--cS) no-repeat 3px 3px,var(--cSTR) no-repeat right 3px top 3px,var(--cSBL) no-repeat left 3px bottom 3px,var(--cSBR) no-repeat right 3px bottom 3px,var(--chilbo),radial-gradient(circle at 50% 38%,#33262e,#140f14 78%);
  box-shadow:inset 0 0 0 1px #0b090e,inset 0 0 0 2px #6a5226,inset 0 0 16px #000}
.slot:hover,.slot.sel{border-color:var(--gold3);box-shadow:inset 0 0 0 1px #0b090e,inset 0 0 0 2px var(--gold),inset 0 0 22px #c9a45a66,0 0 10px #c9a45a44}
.slot .g{left:1px;top:1px;border-width:15px 15px 0 0;filter:drop-shadow(0 0 2px #000)}
/* 글 상자: 귀갑문 + 모서리 장석 + 왼쪽 오방색 세로줄 */
.det{position:relative;border:1px solid var(--gold2);padding:12px 16px 12px 20px;
  background:var(--cSTR) no-repeat right 3px top 3px,var(--cSBR) no-repeat right 3px bottom 3px,var(--gwigap),linear-gradient(180deg,#1c1519,#120d11);
  box-shadow:inset 0 0 0 2px #0b090e,inset 0 0 0 3px #4a3a1e}
.det::before{content:"";position:absolute;left:6px;top:7px;bottom:7px;width:4px;background:linear-gradient(180deg,#34507e 0 20%,#b83644 0 40%,#d9b23e 0 60%,#e9dfc8 0 80%,#3f8f7f 0);box-shadow:0 0 0 1px #0b090e}
/* 단추: 안쪽 금줄 + 칠보문 */
.bt{background:var(--chilbo),linear-gradient(180deg,#3d2e35,#231a20);box-shadow:inset 0 0 0 1px var(--gold2),inset 0 0 0 3px #0b090e,inset 0 0 0 4px #6a522688,inset 0 10px 14px #ffffff0c}
.bt:hover{background:var(--chilbo),linear-gradient(180deg,#4a3840,#2c2028)}
.bt.pri{background:var(--chilbo),linear-gradient(180deg,#a02c3a,#6a1823);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 3px #4a1018,inset 0 0 0 4px #f0d9a066,inset 0 10px 14px #ffffff18}
.bt.pri:hover{background:var(--chilbo),linear-gradient(180deg,#b83644,#7e1f2b)}
.bt.on{background:var(--chilbo),linear-gradient(180deg,#5a4426,#2a2014);box-shadow:inset 0 0 0 1px var(--gold3),inset 0 0 0 3px #0b090e,inset 0 0 0 4px var(--gold),inset 0 0 18px #c9a45a44}
.tag{background:#0b090e;border-color:var(--gold2)}
/* 줄(스테이지 · 물건): 칠보문 + 왼쪽 색 띠 */
.sr,.good{background:var(--chilbo),linear-gradient(180deg,#201820,#161015)!important;border:1px solid #5a4420!important;box-shadow:inset 4px 0 0 var(--gold2),inset 0 0 0 1px #0b090e}
.sr.boss{box-shadow:inset 4px 0 0 #b83644,inset 0 0 0 1px #0b090e}.sr.bonus{box-shadow:inset 4px 0 0 #d9b23e,inset 0 0 0 1px #0b090e}.sr.hidden{box-shadow:inset 4px 0 0 #7a4ad0,inset 0 0 0 1px #0b090e}
.sr.sel{border-color:var(--gold3)!important;box-shadow:inset 4px 0 0 var(--gold3),inset 0 0 18px #c9a45a44}
.sr{padding-left:12px!important}
/* 아래 메뉴: 단청 처마 */
.nav{padding-top:28px}
.nav::before{top:4px;height:21px;opacity:.95;background:var(--meander) repeat-x center 1px,var(--dancheong) repeat-x center 10px}
.nav .bt.on{background:var(--chilbo),linear-gradient(180deg,#8a2434,#4a1420);color:#fff3da}
.top h1{padding-left:18px;background:var(--cS) no-repeat left 2px}
.tb th,.tb td{border-bottom:1px dotted #c9a45a44}
/* 스킬 목록 */
.skg{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-top:6px}
.skg .slot{text-align:center;font-size:12.5px;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.skg .slot b{font-size:20px;color:var(--gold3);line-height:1;text-shadow:0 2px 0 #000}.skg .slot.lock b{color:#6a6058}
.skg .slot .k{position:absolute;right:3px;top:3px;font-size:10px;color:#fff3da;background:var(--red);padding:0 4px;border:1px solid var(--gold2)}

.skg .slot .pr{font-size:10.5px;color:var(--gold3);line-height:1.2}
.skg .slot.lock{opacity:.62}
/* 좁은 화면(폰 세로)에서 제목이 한 글자씩 접히던 것 */
.top h1{white-space:nowrap;flex:none}.top .sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.top{gap:7px;font-size:13px}.top h1{font-size:15px;letter-spacing:1px}.top{flex-wrap:wrap;row-gap:0;padding-bottom:10px}.top .sub{flex:1 1 40%;order:9;font-size:11.5px;line-height:1.2}.top #bFree{margin-left:auto}.top #bAll{order:10;margin-left:auto}.page{inset:74px 0 78px}.top .coin,.top .jade{font-size:12px}}

/* ── 판 고르기 쪽지 (등불 위에 붙는다 · 왼쪽 설명 + 오른쪽 입장) ── */
#stpop{position:fixed;z-index:9;width:min(330px,calc(100vw - 12px));padding:26px 12px 12px 18px!important;display:none;grid-template-columns:1fr 78px;gap:8px;align-items:stretch;box-shadow:0 8px 30px rgba(0,0,0,.7)}
#stpop.open{display:grid;animation:spIn .16s ease-out}
@keyframes spIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#stpop::after{content:"";position:absolute;left:calc(var(--ax,50%) - 7px);bottom:-7px;width:12px;height:12px;background:#17121a;border-right:1px solid var(--gold2);border-bottom:1px solid var(--gold2);transform:rotate(45deg)}
#stpop.dn::after{bottom:auto;top:-7px;transform:rotate(225deg);background:#211922}
#stpop .xb{position:absolute;right:-10px;top:-10px;width:38px;height:38px;font-size:14px}
#stpop.boss{border-color:#a3231b}#stpop.hell{box-shadow:0 0 0 1px #c8324a,0 8px 30px rgba(0,0,0,.7)}
.sp-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-tag{font-size:10.5px;letter-spacing:2px;color:var(--gold)}.sp-nm{font-size:15px;letter-spacing:1px;color:var(--gold3);line-height:1.25}
.sp-warn{margin:0;font-size:11px;color:#ff6a5a}.sp-goal{margin:1px 0 0;font-size:12px;line-height:1.35}.sp-foe{margin:0;font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;margin-top:2px;gap:6px}.sp-row small{color:var(--mu)}
.sp-go{min-height:0;height:auto;font-size:17px;letter-spacing:0;writing-mode:vertical-rl;text-orientation:upright;padding:6px 0}
#chban{position:fixed;left:50%;top:44px;transform:translateX(-50%);z-index:7;text-align:center;pointer-events:none;display:none;text-shadow:0 2px 4px #000}
#chban.open{display:block}#chban b{display:block;font-size:20px;letter-spacing:6px;color:var(--gold3)}#chban span{font-size:12px;color:#d8ccb0}#chban em{font-style:normal;color:#ff6a5a}
#mtoast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:30;background:rgba(11,9,14,.92);border:1px solid var(--gold2);padding:10px 16px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none}#mtoast.on{opacity:1}
#bCont{position:fixed;right:12px;bottom:96px;z-index:7;flex-direction:column;align-items:flex-start;gap:1px;min-height:52px;padding:6px 16px;max-width:46vw}
#bCont small{font-size:11px;letter-spacing:2px;opacity:.8}#bCont b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 가로로 눕힌 폰(높이가 낮다): 위 · 아래 띠를 얇게 해 지도를 넓힌다 */
@media (max-height:500px){
 .nav{padding:4px 6px 4px!important}.nav .bt{min-height:42px;flex-direction:row;gap:6px;font-size:12.5px}.nav .bt svg{width:18px;height:18px}
 .top{padding:4px 10px 8px}#rtbar{bottom:54px!important}#bCont{bottom:58px;min-height:44px}#chban{top:38px}#chban b{font-size:16px}
#mtoast{bottom:64px}
 /* 2026-10-07 폰 가로(높이 375): 장식 띠·큰 제목이 화면을 다 먹어 내용이 안 보이던 것 — 메뉴 화면은 내용부터 */
 .page{inset:40px 0 52px;padding:4px 8px 10px}
 .page .pn{padding:14px 10px 12px}.page .pn::before,.page .pn::after{height:8px;background:var(--dancheong) repeat-x center 0}
 .page .pn>.ttl,.page .pn>.obang{display:none}
 .page .tabs,.page .rw{margin:6px 0}
 #rtbar{left:8px!important;right:auto!important;justify-content:flex-start!important;max-width:calc(100% - 340px);overflow-x:auto;flex-wrap:nowrap!important}
 #rtbar .bt{flex:none;white-space:nowrap}
}

body.inch #rtbar,body.inch #bCont{display:none!important}