/* =========================================================
   별의 종말 — 19차 UI 「성휘의 마법서」 (배치 · 모양만. 기능 · 내용은 그대로)
   넓은 화면: [밤하늘 띠: 제목 · 세계 인장 · 이름 · 지갑]
              [색인 탭 + 양피지 쪽 | 책등 주메뉴 | 여백의 전령(채팅)]
   중간 화면: 채팅은 떠 있는 독 · 좁은 화면(휴대폰): 주메뉴는 아래 리본 띠
   색은 테마 변수만 씀 → 기존 5개 테마 + 마법서 테마 5개 모두 같은 배치
   ========================================================= */
:root {
  --f-title: "Song Myung", "Noto Serif KR", serif;
  --f-latin: "Cinzel", "Noto Serif KR", serif;
  --leather: color-mix(in srgb, var(--bg) 70%, #000);
  --leather-2: color-mix(in srgb, var(--bg) 40%, #000);
  --gold: var(--accent);
  --gold-2: color-mix(in srgb, var(--accent) 55%, #fff);
  --gold-3: color-mix(in srgb, var(--accent) 60%, #000);
  --page: var(--bg);
  --page-tex: none;
  --band-1: #05040c; --band-2: #15102a; --band-glow: rgba(200, 70, 42, .45);
  --spine-on: color-mix(in srgb, var(--bad) 75%, #000);
  --spine-w: 5.75rem;
  --chat-w: 22rem;
  --band-h: 9.25rem;
}

/* ----- 마법서 테마 (양피지 · 가죽 · 금박). 기본 = 진홍 ----- */
html[data-theme^="tome"] {
  --bg: #efe2c2; --page: #efe2c2; --panel: #f7eed8; --panel-sunk: #e9dab5; --panel-edge: 0 0 0 1px #cdb27a, inset 0 0 18px rgba(150, 105, 40, .12);
  --raised: #eadbb4; --raised-hover: #e0cd9c; --line: #c2a56e; --line-soft: #d8c497; --input-bg: #fbf5e6; --placeholder: #7a6448;
  --text: #2a1a0e; --text-2: #4e3822; --text-3: #614a30;
  --accent: #8e1b22; --accent-hover: #a3262c; --accent-ink: #fff3d6; --accent-soft: rgba(142, 27, 34, .1);
  --ok: #26703a; --warn: #7a5600; --bad: #a3262c; --info: #4e3822;
  --ok-soft: rgba(43, 122, 61, .09); --warn-soft: rgba(196, 140, 20, .12); --bad-soft: rgba(163, 38, 44, .09); --bad-row: rgba(163, 38, 44, .06);
  --live-bg: #a3262c; --on-bad: #fff; --hp: #3f8f55; --hp-enemy: #c4452f; --burn: #b85a12; --focus: #7a3fb0; --npc: #157a6c; --player: #b8925a; --player-ink: #1b1b1b;
  --g0: #5e5648; --g1: #23702f; --g2: #2a5e9e; --g3: #6a3aa0; --g4: #9a5800;
  --ink-shadow: rgba(255, 248, 228, .85); --shadow: rgba(60, 35, 10, .16); --shadow-lg: rgba(40, 20, 5, .35); --overlay: rgba(20, 8, 4, .55);
  --toast-bg: #f7eed8; --doc-bg: #f7eed8; --disabled-o: .45; --disabled-text: #8a7a60;
  --sky-star: #fff; --sky-star-2: #ddd; --sky-star-3: #bbb; --sky-star-4: #ccc; --sky-star-5: #eee; --sky-tint-0: rgba(91, 62, 142, .25);
  --leather: #3a1418; --leather-2: #22090d; --gold: #d8b25a; --gold-2: #f6e3a2; --gold-3: #8a6a26; --spine-on: #7a1414;
  --page-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .5 -.06'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
html[data-theme="tome-night"] { --leather: #141a3a; --leather-2: #0a0e22; --gold: #c9c0a0; --gold-2: #eef0ff; --gold-3: #6a6f8e; --spine-on: #2a3f7a;
  --accent: #2c4f8a; --accent-hover: #355c9e; --bg: #e8e6df; --page: #e8e6df; --panel: #f3f2ec; --panel-sunk: #dddbd2; --raised: #dfddd3; --line: #a9a99a; --band-glow: rgba(90, 130, 220, .4); }
html[data-theme="tome-forest"] { --leather: #17301f; --leather-2: #0b1a10; --gold: #c9a85a; --gold-2: #f0e2a8; --gold-3: #6e5a26; --spine-on: #2f6b4a;
  --accent: #2b5e40; --accent-hover: #34704c; --bg: #ebe4c8; --page: #ebe4c8; --panel: #f5f0dc; --band-glow: rgba(120, 200, 140, .3); }
html[data-theme="tome-ash"] { --leather: #2a2a2e; --leather-2: #151517; --gold: #b5ab92; --gold-2: #e8e2d2; --gold-3: #6a6456; --spine-on: #5a2a22;
  --accent: #6e2e22; --accent-hover: #823a2c; --bg: #e2ded5; --page: #e2ded5; --panel: #efece5; --panel-sunk: #d6d1c6; --raised: #dad5ca; --line: #a8a090; --band-glow: rgba(200, 120, 80, .3); }
html[data-theme="tome-rose"] { --leather: #4a1830; --leather-2: #2a0a1a; --gold: #e0a88e; --gold-2: #f8dccd; --gold-3: #8a5040; --spine-on: #8a2a50;
  --accent: #9a2a52; --accent-hover: #ae3462; --accent-soft: rgba(154, 42, 82, .1); --bg: #f1e1d8; --page: #f1e1d8; --panel: #f8ece5; --panel-sunk: #e8d4ca; --raised: #ecd9cf; --line: #b8988c; --band-glow: rgba(230, 120, 160, .35); }
html[data-theme="tome-amethyst"] { --leather: #2e1a46; --leather-2: #170c26; --gold: #cbb8e6; --gold-2: #f0e8ff; --gold-3: #6e5a8e; --spine-on: #5a3a8a;
  --accent: #5e3a96; --accent-hover: #6c46a8; --accent-soft: rgba(94, 58, 150, .1); --bg: #e9e2e8; --page: #e9e2e8; --panel: #f3eef2; --panel-sunk: #ddd3dc; --raised: #e2d9e0; --line: #a898aa; --band-glow: rgba(170, 120, 230, .38); }
html[data-theme="tome-sea"] { --leather: #0f3338; --leather-2: #061c20; --gold: #c9a95e; --gold-2: #f0e2b0; --gold-3: #6e5a2a; --spine-on: #1e6a70;
  --accent: #1d6168; --accent-hover: #237078; --accent-soft: rgba(29, 97, 104, .1); --bg: #e5e4d3; --page: #e5e4d3; --panel: #f0efe2; --panel-sunk: #d9d8c6; --raised: #dddcc9; --line: #a0a28e; --band-glow: rgba(80, 190, 200, .32); }
html[data-theme="tome-ember"] { --leather: #4a1f08; --leather-2: #2a0f02; --gold: #eaa548; --gold-2: #ffe0a8; --gold-3: #8a5a1a; --spine-on: #9a3a0e;
  --accent: #a3420e; --accent-hover: #b84e14; --accent-soft: rgba(163, 66, 14, .1); --bg: #f0dcbc; --page: #f0dcbc; --panel: #f7eada; --panel-sunk: #e6cfaa; --raised: #ead4b0; --line: #b89670; --band-glow: rgba(255, 140, 50, .4); }
html[data-theme="tome-frost"] { --leather: #1c3448; --leather-2: #0c1a28; --gold: #bcd4e4; --gold-2: #f0f8ff; --gold-3: #5e7a8e; --spine-on: #2e5a80;
  --accent: #2a5a86; --accent-hover: #336898; --accent-soft: rgba(42, 90, 134, .1); --bg: #e3eaee; --page: #e3eaee; --panel: #f0f4f6; --panel-sunk: #d4dde3; --raised: #d9e2e8; --line: #98a8b4; --band-glow: rgba(150, 200, 240, .4); }
html[data-theme="tome-sun"] { --leather: #3a2a0c; --leather-2: #1e1404; --gold: #f2cc52; --gold-2: #fff0b0; --gold-3: #8a6a10; --spine-on: #7a5a10;
  --accent: #7d5a06; --accent-hover: #8e6808; --accent-soft: rgba(125, 90, 6, .1); --bg: #f3ead0; --page: #f3ead0; --panel: #faf4e2; --panel-sunk: #e8dcb8; --raised: #ece2c2; --line: #b8a678; --band-glow: rgba(255, 210, 80, .4); }
html[data-theme="tome-abyss"] { color-scheme: dark;
  --bg: #241c2a; --page: #241c2a; --panel: #31273a; --panel-sunk: #2a2132; --panel-edge: 0 0 0 1px #4a3a52; --raised: #3d3146; --raised-hover: #4a3c54; --line: #5a4862; --line-soft: #463850; --input-bg: #2a2132; --placeholder: #9a8aa0;
  --text: #f0e4cc; --text-2: #d8c8ac; --text-3: #bcab90; --accent: #e3a94f; --accent-hover: #f0b964; --accent-ink: #1c1407; --accent-soft: rgba(227, 169, 79, .16);
  --ok: #8fd19e; --warn: #e3c14f; --bad: #e27a63; --info: #c8b8a0; --g0: #b4aca0; --g1: #74c95c; --g2: #8bbbea; --g3: #cdaaee; --g4: #f0a640; --live-bg: #d9674f; --hp: #7cc48c; --hp-enemy: #d9674f;
  --ink-shadow: #000; --shadow: rgba(0, 0, 0, .35); --shadow-lg: rgba(0, 0, 0, .55); --overlay: rgba(0, 0, 0, .65); --toast-bg: #3d3146; --doc-bg: #2a2132; --disabled-text: #8a7f90;
  --leather: #120c18; --leather-2: #07040b; --gold: #d8b25a; --gold-2: #f6e3a2; --gold-3: #8a6a26; --spine-on: #6e1414; --page-tex: none; }

/* ----- 공통 모양 ----- */
.section-title, .h2, .page-title { font-family: var(--f-title); font-weight: 400; letter-spacing: .02em; }
html[data-theme^="tome"] body { background: radial-gradient(ellipse 80% 50% at 50% 0%, #2a1030, transparent 70%), linear-gradient(180deg, #08060f, #160a14); }
html[data-theme^="tome"] .panel-box { background: color-mix(in srgb, var(--panel) 82%, transparent); }
.sky { display: none; }

/* 밤하늘 띠 (상단) */
.topbar { position: relative; overflow: hidden; border-radius: .75rem .75rem 0 0; padding: .875rem 1.25rem; color: var(--gold-2);
  background: radial-gradient(ellipse 30% 140% at 50% 100%, var(--band-glow), transparent 70%), radial-gradient(ellipse 40% 100% at 85% 0%, rgba(91, 62, 142, .45), transparent 70%), linear-gradient(180deg, var(--band-1), var(--band-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), inset 0 -10px 20px rgba(0, 0, 0, .5); }
.topbar::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfe8ff, transparent), radial-gradient(1.5px 1.5px at 260px 20px, #fff4cf, transparent), radial-gradient(1px 1px at 340px 66px, #fff, transparent), radial-gradient(1px 1px at 60px 60px, #bcd6ff, transparent);
  background-size: 380px 100px; }
.topbar::after { content: ''; position: absolute; left: 58%; top: 18%; width: 9rem; height: 2px; transform: rotate(-28deg); pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 160, .3) 40%, #fff6dc); box-shadow: 0 0 6px rgba(255, 220, 150, .8); opacity: .8; }
.topbar > * { position: relative; z-index: 1; }
.topbar, .topbar .muted, .topbar dt { color: var(--gold-2); }
.topbar .muted, .topbar dt { opacity: .8; }
.logo-small { font-family: var(--f-title); font-size: 1.75rem; letter-spacing: .08em; background: linear-gradient(180deg, #fff6d6, #e5c06a 55%, #9c7426); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .conn { color: #c9b88e !important; background: rgba(10, 6, 20, .55) !important; border: 1px solid var(--gold-3) !important; }
.world-chip { white-space: nowrap; font-family: var(--f-title); font-size: 1rem; color: #fff3d6 !important; padding: .375rem 1rem !important; border-radius: 999px !important;
  background: radial-gradient(circle at 50% 40%, #b8261c, #4a0808 75%) !important; border: 2px solid var(--gold) !important; box-shadow: 0 0 14px rgba(255, 110, 60, .55), inset 0 0 8px rgba(0, 0, 0, .5); }
.world-chip::before { content: '✦ '; color: #ffcf9a; }
.topbar .icon-btn { color: var(--gold-2); background: radial-gradient(circle at 35% 30%, #6a2a30, #2a0b10 70%); border: 2px solid var(--gold-3); border-radius: 50%; }
.topbar .wallet > div { background: linear-gradient(180deg, rgba(58, 20, 24, .9), rgba(20, 8, 12, .9)); border: 1px solid var(--gold-3); border-radius: 999px; padding: .125rem .875rem; }
.topbar .wallet dd { color: #fff3d6; font-family: var(--f-num); }
.topbar .wallet dd.accent { color: #ffcf9a; }
.topbar .wallet > div { display: grid; grid-template-columns: auto auto; column-gap: .375rem; align-items: center; }
.topbar .wallet > div::before { content: '★'; grid-row: span 2; font-size: 1rem; color: #ff8a4a; text-shadow: 0 0 4px rgba(255, 160, 90, .7); }
.topbar .wallet > div:nth-child(2)::before { content: '●'; color: #e2b23e; } .topbar .wallet > div:nth-child(3)::before { content: '◆'; color: #7fd8ff; } .topbar .wallet > div:nth-child(4)::before { content: '⬢'; color: #aab4d6; }

/* 책등 주메뉴 (공통 모양) */
.tabs { border: 0; gap: 0; }
.tab { font-family: var(--f-title); font-weight: 400; color: var(--gold-2); background: transparent; border: 0; position: relative; }
.tab[hidden] { display: none !important; }
.tab::before { content: ''; display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto .25rem; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.tab[data-id="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M15 3l3 9h9l-7 6 3 9-8-6-8 6 3-9-7-6h9z'/%3E%3C/svg%3E"); }
.tab[data-id="battle"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 25L22 8l3-3-1 4L7 26zM25 25L8 8 5 5l1 4 17 17z'/%3E%3C/svg%3E"); }
.tab[data-id="char"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M15 3l10 4v8q0 8-10 12Q5 23 5 15V7z'/%3E%3Cpath d='M15 9v12M10 14h10'/%3E%3C/svg%3E"); }
.tab[data-id="shop"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='15' cy='15' r='10'/%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3C/svg%3E"); }
.tab[data-id="admin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M15 4l12 6-12 6L3 10zM7 12v8q8 6 16 0v-8'/%3E%3C/svg%3E"); }
.tab[aria-selected="true"], .tab.active, .tab[aria-current] { color: #fff3d6; background: var(--spine-on); text-shadow: 0 0 10px rgba(255, 200, 150, .8); box-shadow: inset 0 1px 0 var(--gold-2), inset 0 -1px 0 var(--gold-2); }
.tab .badge { font-family: var(--f-body); }

/* 색인 탭 (하위 메뉴) */
.subnav { gap: .25rem; padding: .5rem .75rem 0; align-items: flex-end; }
.subtab { border-radius: .5rem .5rem 0 0 !important; font-family: var(--f-title); font-size: .95rem; color: #3a250f !important; border: 0 !important;
  background: linear-gradient(180deg, #f3dfa0, #c99a3e) !important; box-shadow: 0 -2px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6); padding: .375rem 1rem !important; }
.subtab[aria-selected="true"] { color: #fff3d6 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--spine-on) 80%, #fff 10%), var(--spine-on)) !important; padding-top: .5rem !important; }
.subnav .page-title { color: var(--gold-2); align-self: center; }

/* 양피지 쪽 (본문) */
.game > .panel, #dyn-panels > .panel { background: var(--page-tex), radial-gradient(ellipse 70% 80% at 50% 50%, transparent 60%, rgba(110, 65, 20, .22) 100%), var(--page); background-blend-mode: multiply, normal, normal;
  padding: 1.25rem; box-shadow: inset 0 0 50px rgba(110, 70, 20, .3); }
html[data-theme="tome-abyss"] .game > .panel, html[data-theme="tome-abyss"] #dyn-panels > .panel { box-shadow: inset 0 0 50px rgba(0, 0, 0, .5); }

/* 채팅 = 여백의 전령 */
.inbox.chat-dock { background: var(--page-tex), var(--panel); background-blend-mode: multiply, normal; border: 1px solid var(--line); }
.chat-dock .inbox-head .section-title::before { content: '信'; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-right: .375rem; border-radius: 50%; font-size: .875rem; color: #f6d0b0; vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18); }
.avatar { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px color-mix(in srgb, var(--leather) 70%, transparent); }

/* ===== 넓은 화면 (1100px 이상): 시안 그대로 — [밤하늘 띠] / [왼쪽 쪽 | 책등 | 오른쪽 쪽 + 여백의 전령]
   본문은 여러 단(column)으로 흘려 쪽을 나눔: 1600px 이상 = 왼쪽 2단 · 오른쪽 1단 + 채팅 여백 / 그 아래 = 왼쪽 1단 · 오른쪽 1단
   책등은 언제나 화면 한가운데 (쪽 여백을 계산해 맞춤) ===== */
@media (min-width: 1100px) {
  :root { --band-h: 9.5rem; --spine-w: 6rem; --gut: 7.25rem; --pp: 2rem; }
  .game { container-type: inline-size; max-width: none; margin: 0; gap: 0; padding: 0 .75rem .75rem !important; min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr) var(--spine-w) minmax(0, 1fr); grid-template-rows: var(--band-h) auto; align-items: stretch;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cg%3E%3Cpath d='M2 56V14Q2 2 14 2h42v8H16q-6 0-6 6v40z' fill='%23c9973a' stroke='%233a2608'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%237a1414' stroke='%23f6e3a2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 3.5rem no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cg transform='matrix(-1 0 0 1 58 0)'%3E%3Cpath d='M2 56V14Q2 2 14 2h42v8H16q-6 0-6 6v40z' fill='%23c9973a' stroke='%233a2608'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%237a1414' stroke='%23f6e3a2'/%3E%3C/g%3E%3C/svg%3E") 100% 0 / 3.5rem no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cg transform='matrix(1 0 0 -1 0 58)'%3E%3Cpath d='M2 56V14Q2 2 14 2h42v8H16q-6 0-6 6v40z' fill='%23c9973a' stroke='%233a2608'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%237a1414' stroke='%23f6e3a2'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 3.5rem no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cg transform='matrix(-1 0 0 -1 58 58)'%3E%3Cpath d='M2 56V14Q2 2 14 2h42v8H16q-6 0-6 6v40z' fill='%23c9973a' stroke='%233a2608'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%237a1414' stroke='%23f6e3a2'/%3E%3C/g%3E%3C/svg%3E") 100% 100% / 3.5rem no-repeat,
      linear-gradient(135deg, var(--leather), var(--leather-2)); }
  .topbar { grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 25; height: var(--band-h); margin-top: .75rem; height: calc(var(--band-h) - .75rem);
    display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "a . b i" "a . w w"; align-items: center; gap: .375rem 1rem; padding: .75rem 1.75rem 1.5rem; }
  .topbar > .who:first-child { grid-area: a; display: grid; justify-items: start; gap: .25rem; }
  .topbar > .who:first-child .logo-small { font-size: 2.4rem; line-height: 1; }
  .topbar > .who:nth-child(2) { grid-area: b; justify-self: end; } .topbar .head-icons { grid-area: i; } .topbar .wallet { grid-area: w; justify-self: end; }
  .world-chip { background: none !important; border: 0 !important; box-shadow: none; padding: 0 !important; font-size: .9rem; color: #c9b88e !important; }
  .world-chip::before { content: '세계 · '; color: #c9b88e; }
  .doom-seal { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 8.25rem; height: 8.25rem; z-index: 3; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-content: center; text-align: center; border-radius: 50%; filter: drop-shadow(0 0 12px rgba(255, 110, 60, .45)); }
  .doom-seal .ds-ring { position: absolute; inset: 0; } .doom-seal .ds-ring svg { width: 100%; height: 100%; }
  .doom-seal .ds-d { position: relative; margin-top: 2.25rem; font-family: var(--f-latin); font-weight: 700; font-size: .82rem; letter-spacing: .25em; color: #ffcf9a; }
  .doom-seal .ds-t { position: relative; font-family: var(--f-latin); font-weight: 700; font-size: 1.15rem; color: #fff3d6; text-shadow: 0 0 10px rgba(255, 120, 70, .7); }
  /* 색인 탭: 띠 아래 가장자리, 인장 바로 왼쪽 */
  .subnav { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; position: sticky; top: calc(var(--band-h) - 2.6rem); z-index: 26; padding: 0 1rem 0 0; margin-right: 5.75rem; max-width: calc(100% - 17rem); overflow-x: auto; scrollbar-width: none; }
  .subnav .subtab { font-size: .9rem; padding: .3rem .75rem !important; } .subnav .subtab[aria-selected="true"] { padding-top: .45rem !important; }
  .subnav .page-title { color: var(--gold-2); }
  /* 쪽: 본문 단 나눔 */
  .game > .panel, #dyn-panels > .panel { grid-column: 1 / -1; grid-row: 2; display: block; column-gap: var(--gut); column-fill: balance; min-height: calc(100dvh - var(--band-h) - .75rem);
    padding: 1.75rem var(--pp) 2rem; border-radius: 0 0 .5rem .5rem;
    background: linear-gradient(90deg, transparent calc(50% - var(--spine-w) / 2 - 1.5rem), rgba(60, 30, 10, .35) calc(50% - var(--spine-w) / 2), transparent calc(50% - var(--spine-w) / 2), transparent calc(50% + var(--spine-w) / 2), rgba(60, 30, 10, .35) calc(50% + var(--spine-w) / 2), transparent calc(50% + var(--spine-w) / 2 + 1.5rem)),
      var(--page-tex), radial-gradient(ellipse 70% 80% at 50% 50%, transparent 60%, rgba(110, 65, 20, .22) 100%), var(--page); background-blend-mode: normal, multiply, normal, normal; }
  .game > .panel[hidden], #dyn-panels > .panel[hidden] { display: none; }
  #dyn-panels { display: contents; }
  .panel > .grid, .panel > .home-grid, .panel > .char-page, .panel > .stack, .panel > .grid > .stack { display: contents; }
  .panel > *, .panel > .grid > *, .panel > .home-grid > *, .panel > .char-page > *, .panel > .stack > *, .panel > .grid > .stack > * { break-inside: avoid; margin: 0 0 var(--gap); }
  .panel .panel-box { overflow-x: auto; }
  /* 1100~1599: 왼쪽 1단 | 오른쪽 1단 (채팅은 떠 있는 독) */
  .game > .panel, #dyn-panels > .panel { column-count: 2; }
  /* 책등 (주메뉴) — 두 쪽 사이 한가운데, 쪽과 같은 높이 */
  #main-nav { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: var(--band-h); z-index: 22; height: calc(100dvh - var(--band-h) - .75rem); flex-direction: column; overflow: hidden;
    background: linear-gradient(90deg, #1a0609, var(--leather) 22%, color-mix(in srgb, var(--leather) 85%, #fff 8%) 50%, var(--leather) 78%, #1a0609); border-block: .6rem solid var(--gold); box-shadow: -6px 0 12px rgba(0, 0, 0, .45), 6px 0 12px rgba(0, 0, 0, .45); }
  #main-nav .tab { flex: 1 1 0; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: .5rem .25rem; font-size: 1.1rem; border-radius: 0; border-bottom: .6rem solid var(--gold);
    writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .25em; }
  #main-nav .tab:last-child, #main-nav .tab:has(+ .tab[hidden]) { border-bottom: 0; }
  #main-nav .tab::before { writing-mode: horizontal-tb; margin: 0 0 .625rem; width: 1.9rem; height: 1.9rem; }
  #main-nav .tab .badge { writing-mode: horizontal-tb; letter-spacing: 0; margin-top: .5rem; }
  .game:has(#main-nav .tab:nth-child(5)[hidden]) #main-nav .tab:nth-child(4) { border-bottom: 0; }
  /* 여백의 전령 (채팅) — 펼쳐 두면 오른쪽 쪽의 바깥 여백 */
  .inbox.chat-dock { left: auto; right: 1rem; }
  #game-screen { padding-bottom: .75rem; }
  .avatar.avatar-lg { width: 4.5rem; height: 4.5rem; }
}
@media (min-width: 1600px) {
  :root { --chat-w: calc(var(--pp) / 2 + 25cqw + var(--gut) / 4 - 1.25rem); }
  .game > .panel, #dyn-panels > .panel { column-count: 3; padding-right: calc(var(--pp) / 2 + 25cqw + var(--gut) / 4); }
  .game:has(#inbox:not(.dock-open)) > .panel, .game:has(#inbox:not(.dock-open)) #dyn-panels > .panel { column-count: 4; padding-right: var(--pp); }
  #tab-admin, .game:has(#inbox:not(.dock-open)) #tab-admin { column-count: 1 !important; padding-right: calc(50cqw + var(--gut) / 2) !important; }
  .inbox.chat-dock.dock-open { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; position: sticky; top: var(--band-h); left: auto; right: auto; bottom: auto; z-index: 21;
    width: var(--chat-w); height: calc(100dvh - var(--band-h) - .75rem); max-height: none; margin: 0; border: 0; border-left: 3px double var(--gold-3); border-radius: 0;
    background: linear-gradient(90deg, rgba(120, 72, 22, .08), rgba(120, 72, 22, .02)); box-shadow: none; padding: 1.25rem 1.25rem 1rem 1.25rem; }
  .inbox.chat-dock.dock-open.inbox-dm-wide { width: var(--chat-w); }
  .inbox.chat-dock.dock-open .ib-thread-box { height: calc(100dvh - var(--band-h) - 16rem); }
}

/* ===== 중간 화면 (761~1099px): 한 쪽 · 책등은 위쪽 가로 띠 · 채팅은 떠 있는 독 ===== */
@media (min-width: 761px) and (max-width: 1099px) {
  .game { max-width: none; padding: .5rem; gap: 0; background: linear-gradient(135deg, var(--leather), var(--leather-2)); }
  #main-nav { background: linear-gradient(180deg, var(--leather), var(--leather-2)); border-block: 3px solid var(--gold); }
  #main-nav .tab { flex: 1; padding: .375rem .25rem .5rem; border-right: 3px solid var(--gold-3); border-radius: 0; }
  .inbox.chat-dock { left: auto; right: .75rem; }
  .doom-seal { display: none; }
}

/* ===== 휴대폰 (760px 이하): 아래 리본 메뉴 · 색인 탭 가로 스크롤 ===== */
@media (max-width: 760px) {
  .game { padding: 0 0 6.5rem !important; gap: 0; background: linear-gradient(135deg, var(--leather), var(--leather-2)); }
  .topbar { border-radius: 0; padding: .625rem .75rem; }
  .logo-small { font-size: 1.25rem; }
  #main-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; padding: 0 .25rem; overflow: visible;
    background: linear-gradient(0deg, rgba(26, 8, 12, .98), rgba(26, 8, 12, .9)); border-top: 2px solid var(--gold); }
  #main-nav .tab { flex: 1; min-width: 0; padding: .375rem 0 .5rem; font-size: .875rem; border-radius: 0 0 .5rem .5rem; }
  #main-nav .tab::before { width: 1.25rem; height: 1.25rem; }
  .subnav { position: sticky; top: 0; z-index: 20; background: var(--leather-2); padding: .375rem .5rem 0; }
  .game > .panel, #dyn-panels > .panel { padding: .75rem; }
  .inbox.chat-dock { bottom: 4.25rem; }
  .doom-seal { display: none; }
}
@media (prefers-reduced-motion: reduce) { .topbar::after { display: none; } }

/* =========================================================
   19차 UI — 전투(전장의 마법진) · 원정 성도 · 별자리 지도 (시안 그대로)
   ========================================================= */
/* 어두운 의식판 (유성 소원 의식과 같은 결) */
.tome-field, .tome-chart, .tome-astro .star-map-wrap {
  position: relative; color: #eadcb8; border-radius: 4px; overflow: hidden;
  background: radial-gradient(1px 1px at 30px 40px, #fff, transparent) 0 0 / 220px 180px, radial-gradient(1px 1px at 140px 120px, #cfe8ff, transparent) 0 0 / 260px 200px,
    radial-gradient(ellipse at 50% 0%, rgba(20, 14, 48, .97), rgba(10, 6, 24, .99) 75%) !important;
  border: 1px solid var(--gold-3); box-shadow: inset 0 0 30px rgba(91, 62, 142, .45), 0 0 0 1px rgba(0, 0, 0, .5); }
.tome-field .muted, .tome-chart .muted, .tome-field .small, .tome-chart .small { color: #b8a47a; }
.tome-field .section-title, .tome-chart .section-title { color: #f6e3a2; }

/* --- 전장의 마법진 --- */
.tome-field { padding: 1rem 1rem .75rem; display: grid; gap: .5rem; }
.tome-field .run-head { display: grid; gap: .5rem; }
.tome-field .run-title .h2 { font-family: var(--f-title); font-size: 1.5rem; color: #f6e3a2; text-shadow: 0 0 10px rgba(216, 178, 90, .5); }
.tome-field .run-head .actions { justify-content: center; order: 9; }
.tome-field .stage { position: relative; display: block; aspect-ratio: 1; max-width: 26rem; width: 100%; margin: 0 auto; background: none; padding: 0; box-shadow: none; }
.tome-field .tf-ring { position: absolute; inset: 0; }
.tome-field .tf-ring svg { width: 100%; height: 100%; display: block; }
.tf-ring .c1 { fill: rgba(91, 62, 142, .16); stroke: #8a6a26; stroke-width: 1.2; } .tf-ring .c2 { fill: none; stroke: rgba(216, 178, 90, .5); stroke-dasharray: 1 4; }
.tf-ring .c3 { fill: none; stroke: rgba(216, 178, 90, .25); } .tf-ring .hex { fill: none; stroke: rgba(216, 178, 90, .2); }
.tf-ring .tk { stroke: #4a3a40; stroke-width: 1.8; stroke-linecap: round; } .tf-ring .tk.on { stroke: #f2d27a; } .tf-ring .tk.now { stroke: #ff7a4a; stroke-width: 3.2; filter: drop-shadow(0 0 3px #ff7a4a); }
.tf-ring .sd rect { fill: #140c20; stroke: #8a6a26; } .tf-ring .sd text { font: 700 8px var(--f-latin); fill: #ff9a80; }
.tf-ring .sd.done rect { fill: #c99a3e; stroke: #f6e3a2; } .tf-ring .sd.done text { fill: #3a250f; } .tf-ring .sd.now rect { fill: #7a1414; stroke: #ffb2a0; } .tf-ring .sd.now text { fill: #fff; }
.tome-field .monster-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62%; display: grid; justify-items: center; gap: .25rem; text-align: center; background: none; padding: 0; }
.tome-field .token { width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; position: relative;
  background: radial-gradient(circle at 45% 38%, #3a4a7a, #1a1436 60%, #0a0614) !important; border: 2px solid #d8b25a; box-shadow: 0 0 30px rgba(200, 70, 42, .45); }
.tome-field .token::after { content: ''; position: absolute; inset: -.6rem; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#e0473a calc(var(--mhp, 1) * 360deg), rgba(255, 255, 255, .08) 0); -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px)); }
.tome-field .token img { border-radius: 50%; }
.tome-field .mon-info { display: grid; gap: .2rem; width: 100%; }
.tome-field .mon-name { font-family: var(--f-title); font-size: 1.15rem; color: #ffd9c8; }
.tome-field .hpbar-big { height: .75rem; } .tome-field .hptext { color: #fff; }
.tome-field .progress-line { font-size: .85rem; color: #b8a47a; }
.tome-field .timer-box { position: absolute; right: -.25rem; top: -.5rem; text-align: right; background: none; padding: 0; display: grid; justify-items: end; gap: .125rem; width: 8rem; }
.tome-field .timer { font: 700 1.6rem var(--f-latin); color: #fff3d6; text-shadow: 0 0 12px rgba(255, 120, 70, .6); }
.tome-field .timer-box .bar { width: 100%; }
/* 파티 문장 */
.tf-party .section-title { font-size: .95rem; text-align: center; }
.tome-field .party-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.tome-field .slot { background: transparent; box-shadow: none; padding: .25rem; text-align: center; justify-items: center; color: #eadcb8; }
.tome-field .slot-top { flex-direction: column; gap: .25rem; }
.tome-field .slot-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; position: relative; overflow: visible; background: radial-gradient(circle at 40% 35%, #5f8cc0, #12233f); border: 2px solid #d8b25a; }
.tome-field .slot-npc .slot-icon { background: radial-gradient(circle at 40% 35%, #9a74d8, #2a1748); }
.tome-field .slot-icon > * { border-radius: 50%; overflow: hidden; }
.tome-field .slot-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#6fd08a calc(var(--hp, 1) * 360deg), rgba(255, 255, 255, .1) 0); -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px)); }
.tome-field .slot-name { font-family: var(--f-title); color: #fff3d6; font-size: .95rem; } .tome-field .slot-sub, .tome-field .hp-line { color: #b8a47a; font-size: .8rem; }
.tome-field .slot .hpbar { display: none; } .tome-field .skill-line { font-size: .8rem; color: #f6e3a2; width: 100%; }
.tome-field .slot-empty { color: #8a7a68; box-shadow: inset 0 0 0 1px rgba(216, 178, 90, .25); border-radius: 50%; aspect-ratio: 1; min-height: 0; }

/* --- 원정 성도 (던전 목록 → 별자리 길) --- */
.tome-chart { padding: 1rem; min-height: 34rem; }
.tome-chart .list { position: relative; display: block; height: 30rem; margin-top: .5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolyline points='22,90 72,76 26,62 74,46 30,32 70,14' fill='none' stroke='%23d8b25a' stroke-width='.35' stroke-dasharray='1.5 1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tome-chart .list-btn { position: absolute; transform: translate(-1.1rem, -50%); width: auto; max-width: 62%; display: grid; grid-template-columns: 2.2rem auto; column-gap: .5rem; align-items: center; text-align: left;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: .25rem; color: #fff3d6; }
.tome-chart .list-btn::before { content: '★'; grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.2rem; color: #f6e3a2;
  background: radial-gradient(circle, rgba(246, 227, 162, .45), transparent 70%); text-shadow: 0 0 8px #f6e3a2; }
.tome-chart .list-btn .min0 b { font-family: var(--f-title); font-weight: 400; font-size: 1.05rem; }
.tome-chart .list-btn .right { grid-column: 2; text-align: left; color: #b8a47a; }
.tome-chart .list-btn.selected::before { color: #fff; font-size: 1.5rem; background: radial-gradient(circle, rgba(255, 150, 90, .7), transparent 70%); box-shadow: 0 0 0 2px #f6e3a2, 0 0 0 7px rgba(196, 65, 58, .35); }
.tome-chart .list-btn.selected .min0 b { color: #fff; text-shadow: 0 0 10px #ff9a6a; }
.tome-chart .list-btn:disabled { opacity: 1; } .tome-chart .list-btn:disabled::before { content: '✧'; color: #8e1b22; text-shadow: none; background: radial-gradient(circle, rgba(200, 60, 40, .35), transparent 70%); }
.tome-chart .list-btn:disabled .min0 b { color: #9a8070; }
.tome-chart .list-btn:nth-child(1) { left: 22%; top: 90%; } .tome-chart .list-btn:nth-child(2) { left: 52%; top: 76%; } .tome-chart .list-btn:nth-child(3) { left: 14%; top: 62%; }
.tome-chart .list-btn:nth-child(4) { left: 54%; top: 46%; } .tome-chart .list-btn:nth-child(5) { left: 18%; top: 32%; } .tome-chart .list-btn:nth-child(6) { left: 50%; top: 14%; }
.tome-chart .list-btn:nth-child(n+7) { position: relative; transform: none; left: auto; top: auto; display: inline-grid; margin: .25rem; }
.tome-chart .recent-row .chip { background: rgba(10, 6, 20, .6); color: #eadcb8; border-color: rgba(216, 178, 90, .6); }

/* --- 별자리 지도 (세로 성도) --- */
.tome-astro .star-map-wrap { padding: .5rem; }
.tome-astro .star-map { max-height: none; width: 100%; }
.tome-astro .star-link { stroke: rgba(216, 178, 90, .3); } .tome-astro .star-link.lit { stroke: #d8b25a; }
.tome-astro .star-node circle { fill: #6a5a60; stroke: none; }
.tome-astro .star-node text { fill: #8a7a78; font-family: var(--f-title); font-size: 3.2px; opacity: 1; }
.tome-astro .star-deco { fill: #6a5a60; stroke: none !important; } .tome-astro .star-deco-l { stroke: rgba(106, 90, 96, .5); stroke-width: .25; }
.tome-astro .star-unlocked circle, .tome-astro .star-unlocked .star-deco { fill: #f6e3a2; filter: drop-shadow(0 0 1px #f6e3a2); }
.tome-astro .star-unlocked .star-deco-l { stroke: rgba(246, 227, 162, .7); } .tome-astro .star-unlocked text { fill: #fff3d6; }
.tome-astro .star-ready circle { fill: none; stroke: #e7f2ff; stroke-width: .5; } .tome-astro .star-ready .star-deco { fill: none; stroke: #e7f2ff !important; stroke-width: .3; } .tome-astro .star-ready text { fill: #fff; }
.tome-astro .star-observing circle:not(.star-obs):not(.star-obs-bg), .tome-astro .star-observing .star-deco { fill: #9fd0ff; stroke: none !important; filter: drop-shadow(0 0 1px #9fd0ff); }
.tome-astro .star-obs-bg { fill: rgba(127, 190, 255, .12) !important; stroke: rgba(159, 208, 255, .25) !important; stroke-width: 1 !important; }
.tome-astro .star-obs { fill: none !important; stroke: #9fd0ff !important; stroke-width: 1 !important; stroke-linecap: round; filter: none !important; }
.tome-astro .star-observing text { fill: #bfe3ff; }
.tome-astro .is-sel > circle:not(.star-deco):not(.star-obs):not(.star-obs-bg) { stroke: #f6e3a2; stroke-width: .7; }
.tome-astro .only-narrow { display: none !important; }

/* --- 넓은 화면: 이 세 화면은 [왼쪽 쪽 = 의식판] / [오른쪽 쪽 = 글] 로 고정 배치 --- */
@media (min-width: 1100px) {
  .panel:not([hidden]):has(> .tome-field), .panel:not([hidden]):has(.tome-chart), .panel:not([hidden]):has(.tome-astro) { display: grid !important; column-count: auto !important; align-items: start; align-content: start;
    grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr); column-gap: 0; }
  .panel:not([hidden]):has(> .tome-field) > *, .panel:not([hidden]):has(.tome-chart) > *, .panel:not([hidden]):has(.tome-chart) > .grid > *, .panel:not([hidden]):has(.tome-astro) > *, .panel:not([hidden]):has(.tome-astro) > .grid > * { grid-column: 3; margin: 0 0 var(--gap); }
  .panel > .tome-field, .panel .tome-chart, .panel .tome-astro { grid-column: 1 !important; grid-row: 1 / span 20; }
  .panel:not([hidden]):has(> .tome-field) > .result { grid-column: 1; grid-row: auto; }
}
@media (min-width: 1600px) {
  .panel:not([hidden]):has(> .tome-field), .panel:not([hidden]):has(.tome-chart), .panel:not([hidden]):has(.tome-astro) { grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr) var(--gut) minmax(0, 1fr); }
  .panel:not([hidden]):has(> .tome-field) > *, .panel:not([hidden]):has(.tome-chart) > *, .panel:not([hidden]):has(.tome-chart) > .grid > *, .panel:not([hidden]):has(.tome-astro) > *, .panel:not([hidden]):has(.tome-astro) > .grid > * { grid-column: 5; }
  .panel > .tome-field, .panel .tome-chart, .panel .tome-astro { grid-column: 1 / 4 !important; }
  .panel:not([hidden]):has(> .tome-field) > .result { grid-column: 1 / 4; }
  .game:has(#inbox:not(.dock-open)) .panel:not([hidden]):has(> .tome-field), .game:has(#inbox:not(.dock-open)) .panel:not([hidden]):has(.tome-chart), .game:has(#inbox:not(.dock-open)) .panel:not([hidden]):has(.tome-astro) {
    grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr) var(--gut) minmax(0, 1fr) var(--gut) minmax(0, 1fr); }
  .game:has(#inbox:not(.dock-open)) .panel:not([hidden]):has(> .tome-field) > *, .game:has(#inbox:not(.dock-open)) .panel:not([hidden]):has(.tome-chart) > .grid > *, .game:has(#inbox:not(.dock-open)) .panel:not([hidden]):has(.tome-astro) > .grid > * { grid-column: 5 / 8; }
}
/* 전장의 마법진 다듬기 */
.tome-field { display: flex !important; flex-direction: column; }
.tome-field .run-head { display: contents; }
.tome-field .run-head .actions { order: 99; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.tome-field .tf-party { order: 50; }
.tome-field .btn { color: #e7d3a0; background: transparent; border: 1px solid #8a6a26; }
.tome-field .btn-primary { color: #fff3d6; background: linear-gradient(180deg, #a3302a, #6e1414); border-color: #3a0606; }
.tome-field .kind { color: #e7d3a0; }
.tome-field .stage .monster-box { display: flex !important; flex-direction: column; align-items: center; }
.tome-field .stage .mon-info { text-align: center; justify-items: center; }
.tome-field .progress-line { justify-content: center; }
.tome-field .token::after, .tome-field .slot-icon::after { -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.tome-field .token::after { inset: -.45rem; }
.tome-field .stage .timer-box { position: absolute; top: -3.6rem; right: 0; }
.tome-field .slot-empty { width: 3.25rem; height: 3.25rem; padding: 0; align-self: start; justify-self: center; font-size: .76rem; display: grid; place-items: center; }
.tome-field .slot-empty strong { color: #8a7a68; font-weight: 400; }
.tome-field .skill-line .bar { height: .25rem; }
.tome-astro .star-map { max-width: 30rem; margin: 0 auto; }
.tome-astro .star-node > circle:not(.star-deco):not(.star-obs):not(.star-obs-bg) { r: 1.9px; }
.tome-astro .star-node.is-sel > circle:not(.star-deco):not(.star-obs):not(.star-obs-bg) { r: 2.3px; }
.tome-astro .star-deco { r: .55px; }
.tome-astro .star-node text { font-size: 3px; }
/* 고정된 띠 · 메뉴가 버튼을 가리지 않도록 (자동 스크롤 · 포커스 이동 시 비켜 섬) */
@media (min-width: 1100px) { html { scroll-padding-top: calc(var(--band-h) + 1rem); scroll-padding-bottom: 1rem; } }
@media (max-width: 760px) { html { scroll-padding-top: 3rem; scroll-padding-bottom: 5.5rem; } }
@media (max-width: 760px) {
  .tome-chart { min-height: 0; }
  .tome-chart .list { height: auto; display: flex; flex-direction: column-reverse; gap: .25rem; padding-left: .25rem;
    background: linear-gradient(90deg, transparent 1.3rem, rgba(216, 178, 90, .5) 1.3rem, rgba(216, 178, 90, .5) calc(1.3rem + 1px), transparent calc(1.3rem + 1px)); }
  .tome-chart .list-btn, .tome-chart .list-btn:nth-child(n) { position: relative; left: auto; top: auto; transform: none; max-width: none; width: 100%; }
}

/* =========================================================
   19차 UI · 시안 부품 (t-*) — 시안 B 「성휘의 마법서」의 카드 · 제목 · 인장 버튼 · 게이지 · 의식판을 그대로 옮김
   ========================================================= */
.cz { font-family: var(--f-latin); letter-spacing: .04em; }
.t-h2 { display: flex; align-items: baseline; gap: .625rem; font-family: var(--f-title); font-size: 1.3rem; color: var(--text); margin: 0 0 .375rem; line-height: 1.3; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .t-h2 { color: #3a1a0a; }
.t-h2 .cz { font-size: .8rem; color: var(--text-3); letter-spacing: .08em; }
.t-h2 .more, .t-h2 > .more { margin-left: auto; font-family: var(--f-body); font-size: .82rem; color: var(--accent); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.t-h2.sm2 { font-size: 1.1rem; }
.t-card { position: relative; padding: .625rem .75rem; margin-bottom: 1rem; background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid color-mix(in srgb, var(--gold-3) 70%, transparent); border-radius: 3px; box-shadow: inset 0 0 12px rgba(160, 120, 50, .15); }
.t-card::before, .t-card::after { content: '❦'; position: absolute; color: var(--gold-3); font-size: .85rem; line-height: 1; pointer-events: none; }
.t-card::before { left: 4px; top: 3px; } .t-card::after { right: 4px; bottom: 3px; transform: rotate(180deg); }
.t-card.blood { background: linear-gradient(180deg, rgba(142, 27, 34, .09), rgba(142, 27, 34, .03)); border-color: rgba(142, 27, 34, .5); }
.t-label { font-size: .8rem; color: var(--text-3); }
.t-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.t-gauge { position: relative; height: 9px; border-radius: 5px; background: rgba(60, 35, 10, .18); border: 1px solid rgba(90, 60, 20, .5); overflow: hidden; flex: 1; min-width: 3rem; }
.t-gauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--c, #3d7a4a) 70%, #fff), var(--c, #3d7a4a)); }
.t-tag { white-space: nowrap; display: inline-block; padding: 0 .45rem; border-radius: 10px; font-size: .76rem; border: 1px solid currentColor; line-height: 1.1rem; background: none; }
.t-tag.red { color: var(--bad); } .t-tag.gd { color: #b7781a; } .t-tag.az { color: var(--g2); } .t-tag.jd { color: var(--ok); }
.t-rule { height: 14px; margin: .25rem 0 .5rem; position: relative; background: linear-gradient(90deg, transparent, var(--gold-3) 15%, var(--gold-3) 85%, transparent) center / 100% 1px no-repeat; }
.t-rule::after { content: '◆'; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); color: var(--gold-3); font-size: .8rem; }
.t-dropcap::first-letter { float: left; font-family: var(--f-title); font-size: 2.5rem; line-height: .9; margin: .25rem .375rem 0 0; color: var(--accent); text-shadow: 1px 1px 0 var(--gold); }
.t-note { font-size: .8rem; color: var(--text-2); font-style: italic; margin: -.375rem 0 1rem; }
.t-post { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; padding: .25rem 0; width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.t-post:hover { color: var(--accent); }
.t-q { display: grid; grid-template-columns: 1fr 6rem 3.25rem; gap: .625rem; align-items: center; padding: .3rem 0; border-bottom: 1px dotted rgba(138, 106, 38, .5); font-size: .8rem; }
.t-q:last-child { border: 0; }
.t-eq { display: grid; grid-template-columns: 3.1rem 1fr auto; gap: .375rem; font-size: .8rem; padding: .1rem 0; }
.t-region { display: grid; grid-template-columns: 1fr auto; font-size: .85rem; padding: .2rem 0; border-bottom: 1px dotted rgba(138, 106, 38, .35); }
.t-rank { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; font-size: .8rem; padding: .2rem 0; border-bottom: 1px dotted rgba(138, 106, 38, .4); }
.t-rank b.rn { font-family: var(--f-latin); color: var(--gold-3); }
.t-raidname { font-family: var(--f-title); font-size: 1.4rem; color: var(--accent); }
.t-quote { text-align: center; margin-top: 1rem; color: var(--text-2); }
.t-quote .sm { font-family: var(--f-title); font-size: 1.05rem; color: var(--text); }
.g0 { color: var(--g0); } .g1 { color: var(--g1); } .g2 { color: var(--g2); } .g3 { color: var(--g3); } .g4 { color: var(--g4); }

/* 인장 버튼 (시안의 seal-btn) — 게임의 모든 버튼 */
html[data-theme^="tome"] .btn { font-family: var(--f-title); font-weight: 400; border-radius: 3px; color: var(--text-2); background: rgba(255, 248, 228, .6); border: 1px solid rgba(138, 106, 38, .7); box-shadow: 0 1px 0 rgba(138, 106, 38, .6); }
html[data-theme^="tome"] .btn:hover:not(:disabled) { background: rgba(255, 248, 228, .9); color: var(--text); }
html[data-theme^="tome"] .btn-primary { color: #fff3d6; background: linear-gradient(180deg, #a3302a, #6e1414); border: 1px solid #3a0606; box-shadow: inset 0 1px 0 rgba(255, 220, 180, .35), 0 2px 0 #3a0606, 0 3px 6px rgba(0, 0, 0, .35); }
html[data-theme^="tome"] .btn-primary:hover:not(:disabled) { color: #fff; background: linear-gradient(180deg, #b23a32, #7a1414); }
html[data-theme^="tome"] .btn.t-gold { color: #3a250f; background: linear-gradient(180deg, #f3dfa0, #c99a3e); border-color: #6a4a12; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #6a4a12; }
html[data-theme="tome-abyss"] .btn:not(.btn-primary):not(.t-gold) { color: var(--text); background: var(--raised); }
/* 모든 화면의 상자 · 제목도 시안 카드 · 제목 모양 */
html[data-theme^="tome"] .panel-box { border-radius: 3px; box-shadow: inset 0 0 12px rgba(160, 120, 50, .15); border: 1px solid color-mix(in srgb, var(--gold-3) 60%, transparent); position: relative; }
html[data-theme^="tome"] .panel-box::after { content: '❦'; position: absolute; right: 4px; bottom: 3px; transform: rotate(180deg); color: var(--gold-3); font-size: .85rem; line-height: 1; pointer-events: none; }
html[data-theme^="tome"] .section-title { font-family: var(--f-title); font-weight: 400; font-size: 1.25rem; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .section-title { color: #3a1a0a; }
html[data-theme^="tome"] body { font-family: "Noto Serif KR", var(--f-body); }

/* 어두운 의식판 (전장의 마법진 · 원정 성도 · 별자리 지도) */
.t-rite { position: relative; border-radius: 3px; overflow: hidden; color: #eadcb8;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 14, 48, .96), rgba(10, 6, 24, .98) 75%); border: 1px solid var(--gold-3); box-shadow: inset 0 0 30px rgba(91, 62, 142, .45); }
.t-rite > svg { display: block; width: 100%; height: auto; }
.t-rite .meteor { position: absolute; height: 2px; transform-origin: right center; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 226, 160, .25) 40%, rgba(255, 246, 220, .95) 96%, #fff); filter: drop-shadow(0 0 4px rgba(255, 220, 150, .8)); }
.t-rite .foot { display: flex; justify-content: center; gap: .5rem; padding: 0 .75rem .75rem; flex-wrap: wrap; }
.t-rite .foot .btn:not(.btn-primary) { background: transparent; color: #e7d3a0; border-color: #8a6a26; box-shadow: none; }
.t-rite .note { text-align: center; font-size: .8rem; color: #b8a47a; padding: 0 .875rem .625rem; }
.t-rite text { font-family: "Noto Serif KR", serif; }
.t-rite .ov { position: absolute; }

/* ===== 시안 펼침면 (t-spread): 왼쪽 쪽 [c1 | c2] · 책등 · 오른쪽 쪽 [c3] (+ 채팅 여백) — 책등은 언제나 정가운데 ===== */
.t-spread.home-grid, .t-spread { display: block; }
.t-col > section, .t-col > div { margin-bottom: 1rem; }
@media (min-width: 1100px) {
  .game { --gs: 1.875rem; --R: var(--pp); }
  .panel:not([hidden]):has(> .t-spread) { display: block !important; column-count: auto !important; padding-right: var(--R) !important; }
  .panel > .t-spread.home-grid, .panel > .t-spread { display: grid !important; align-items: start; column-gap: 0;
    grid-template-columns: minmax(0, 1fr) var(--gs) minmax(0, 1fr) var(--gut) calc(50cqw - var(--gut) / 2 - var(--R)); }
  .t-spread > .t-c1 { grid-column: 1; } .t-spread > .t-c2 { grid-column: 3; } .t-spread > .t-c3 { grid-column: 5; }
  .t-spread > .t-left { grid-column: 1 / 4; } .t-spread > .t-right { grid-column: 5; }
}
@media (min-width: 1600px) {
  .game { --R: calc(var(--pp) / 2 + 25cqw + var(--gut) / 4); }
  .game:has(#inbox:not(.dock-open)) { --R: var(--pp); }
}

/* ===== 띠 — 시안 그대로 (제목 · ELION · 성휘 연결 줄 · 인장 · 이름 · 둥근 단추 · 금화) ===== */
.topbar > .who:first-child { display: grid !important; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: .5rem; row-gap: .125rem; }
.topbar > .who:first-child .logo-small { grid-column: 1 / -1; font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 0 #2a1406) drop-shadow(0 0 14px rgba(229, 192, 106, .35)); }
.topbar > .who:first-child::after { content: 'ELION · THE DYING STAR'; grid-column: 1 / -1; grid-row: 2; font-family: "Cinzel Decorative", var(--f-latin); font-size: .8rem; letter-spacing: .3em; color: var(--gold); margin-top: .125rem; }
.topbar .conn { grid-row: 3; background: none !important; border: 0 !important; padding: 0 !important; font-size: .85rem; color: #c9b88e !important; }
.topbar .conn::before { content: '◆ '; color: #7dd99a; }
.topbar .world-chip { grid-row: 3; font-size: .85rem !important; }
.topbar .world-chip::before { content: '·  세계 '; }
.doom-seal { width: 250px !important; height: 170px !important; border-radius: 0 !important; filter: none !important; transform: translate(-50%, -50%) scale(.82) !important; }
.doom-seal .ds-d { margin-top: 3.4rem !important; font-size: .8rem !important; letter-spacing: .25em; color: #ffcf9a; text-shadow: 0 0 8px rgba(200, 70, 42, .9); }
.doom-seal .ds-t { font-size: 1.55rem !important; letter-spacing: .06em; line-height: 1.05; text-shadow: 0 2px 0 #3a0d0d, 0 0 14px rgba(255, 120, 70, .65) !important; }
.topbar > .who:nth-child(2) b { font-family: var(--f-title); font-weight: 400; font-size: 1.2rem; color: var(--gold-2); }
.topbar .icon-btn { width: 2.4rem; height: 2.4rem; font-size: 0 !important; color: transparent !important; position: relative; box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0, 0, 0, .8), 0 0 10px rgba(216, 178, 90, .25);
  background: center / 1.25rem no-repeat var(--ico), radial-gradient(circle at 35% 30%, #6a2a30, #2a0b10 70%) !important; }
.topbar .icon-btn .badge { font-size: .76rem !important; position: absolute; top: -4px; right: -4px; }
#inbox-btn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12' rx='1' fill='none' stroke='%23f6e3a2' stroke-width='1.5'/%3E%3Cpath d='M3 7l9 6 9-6' fill='none' stroke='%23f6e3a2' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='14' r='2.2' fill='%23c4413a'/%3E%3C/svg%3E"); }
.topbar .icon-btn[data-action="openSettings"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.2' fill='none' stroke='%23f6e3a2' stroke-width='1.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1' stroke='%23f6e3a2' stroke-width='1.5'/%3E%3C/svg%3E"); }
.topbar .wallet { gap: .375rem; }
.topbar .wallet > div { padding: .25rem .75rem .25rem .375rem !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(58, 20, 24, .95), rgba(34, 9, 13, .95)) !important; border: 1px solid var(--gold-3) !important; box-shadow: inset 0 1px 0 rgba(246, 227, 162, .25), 0 2px 6px rgba(0, 0, 0, .6); }
.topbar .wallet > div::before { content: '' !important; width: 1.125rem; height: 1.125rem; background: center / contain no-repeat var(--gem); text-shadow: none !important; }
.topbar .wallet > div:nth-child(1) { --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l3 6 6 1-4.5 4 1 7L10 16l-5.5 3 1-7L1 8l6-1z' fill='%23ff8a4a' stroke='%23ffd9a0' stroke-width='.8'/%3E%3C/svg%3E"); }
.topbar .wallet > div:nth-child(2) { --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23d8a63a' stroke='%23fff0b8'/%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%238a5e14'/%3E%3Cpath d='M10 6.5l1 2.4 2.5.2-1.9 1.6.6 2.5L10 11.9l-2.2 1.3.6-2.5-1.9-1.6 2.5-.2z' fill='%238a5e14'/%3E%3C/svg%3E"); }
.topbar .wallet > div:nth-child(3) { --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l6 6-6 12L4 7z' fill='%237fd8ff' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cpath d='M4 7h12M10 1v18' stroke='%232a7fa8' stroke-width='.6'/%3E%3C/svg%3E"); }
.topbar .wallet > div:nth-child(4) { --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 6l6-4 6 4v8l-6 4-6-4z' fill='%239aa6c6' stroke='%23eef2ff' stroke-width='.8'/%3E%3Cpath d='M4 6l6 4 6-4M10 10v8' stroke='%234a5478' stroke-width='.7' fill='none'/%3E%3C/svg%3E"); }
.topbar .wallet dt { font-family: "Noto Serif KR", serif; font-size: .76rem !important; color: #b89f6e !important; opacity: 1 !important; line-height: 1; }
.topbar .wallet dd { font-family: var(--f-latin) !important; font-weight: 700; font-size: .8rem; color: var(--gold-2) !important; line-height: 1.2; }

/* ===== 책등 — 시안 그대로 (금띠 · 금박 문양 · 진홍 상감) ===== */
@media (min-width: 1100px) {
  #main-nav { border-block: 0 !important; padding: 0; }
  #main-nav .tab { border-bottom: 0 !important; box-shadow: none; color: #e9cf86; text-shadow: 0 1px 0 #000; }
  #main-nav .tab + .tab:not([hidden]), #main-nav::before, #main-nav::after { border-top: 10px solid transparent; border-image: linear-gradient(180deg, #f3dfa0, #a87d2c 60%, #5a4214) 1; }
  #main-nav::before, #main-nav::after { content: ''; display: block; flex: none; }
  #main-nav::after { order: 99; }
  #main-nav .tab[aria-selected="true"] { color: #fff3d6; background: radial-gradient(ellipse at 50% 50%, rgba(255, 120, 70, .35), transparent 70%), linear-gradient(90deg, transparent 8%, var(--spine-on, #7a1414) 8% 92%, transparent 92%) !important; box-shadow: none !important; position: relative; }
  #main-nav .tab[aria-selected="true"]::after { content: ''; position: absolute; left: 8%; right: 8%; top: 6px; bottom: 6px; border-block: 1px solid #f6e3a2; pointer-events: none; }
  #main-nav .tab .badge { position: absolute; top: 12px; right: 10px; margin: 0; font-family: var(--f-latin); font-weight: 700; font-size: 11px; padding: 0 4px; border-radius: 6px; background: #f6e3a2; color: #6b1a24; }
}

/* ===== 여백의 전령 (채팅) — 시안 그대로 ===== */
@media (min-width: 1600px) {
  .inbox.chat-dock.dock-open { background: linear-gradient(90deg, rgba(120, 72, 22, .07), rgba(120, 72, 22, .02)) !important; padding: 1.625rem 1.375rem 1.125rem 1.25rem !important; display: flex !important; flex-direction: column; }
  .chat-dock.dock-open .inbox-head { flex-wrap: wrap !important; row-gap: .625rem; }
  .chat-dock.dock-open #ib-title { font-size: 0 !important; display: flex; align-items: center; gap: .625rem; }
  .chat-dock.dock-open #ib-title::before { width: 2.6rem; height: 2.6rem; font-size: 1rem; margin: 0; }
  .chat-dock.dock-open #ib-title::after { content: '여백의 전령\A MARGINALIA · CHAT'; white-space: pre; font-family: var(--f-title); font-size: 1.3rem; line-height: 1.05; color: #3a1a0a; }
  .chat-dock.dock-open .dock-toggle { margin-left: auto; font-size: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  .chat-dock.dock-open .dock-toggle::after { content: '접기 ⟩'; font-size: .8rem; color: var(--text-3); }
  .chat-dock.dock-open .inbox-tabs { order: 3; flex: 1 1 100% !important; border-bottom: 1px solid rgba(138, 106, 38, .55); padding-bottom: .375rem; background: none; gap: .75rem; }
  .chat-dock.dock-open .inbox-tabs .seg-btn { background: none !important; border: 0 !important; padding: 0 !important; font-size: .86rem; color: var(--text-2); box-shadow: none !important; }
  .chat-dock.dock-open .inbox-tabs .seg-btn[aria-selected="true"] { color: var(--accent); font-weight: 700; }
  .chat-dock.dock-open .inbox-tabs .badge { background: var(--accent); color: #fff; font-family: var(--f-latin); font-size: 11px; }
  .chat-dock.dock-open .inbox-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .chat-dock.dock-open .ib-thread-box { flex: 1; height: auto !important; min-height: 0; background: none; border: 0; display: flex; flex-direction: column; gap: .5rem; padding: .375rem 0; }
  .chat-dock.dock-open .chat-input { border-top: 1px solid rgba(138, 106, 38, .55); padding-top: .625rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
  .chat-dock.dock-open .chat-input textarea { background: repeating-linear-gradient(180deg, transparent 0 20px, rgba(138, 106, 38, .5) 20px 21px) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-style: italic; line-height: 21px; min-height: 2.75rem; padding: 0 .125rem; }
  .chat-dock.dock-open .chat-input .btn-primary { color: #3a250f; background: linear-gradient(180deg, #f3dfa0, #c99a3e); border-color: #6a4a12; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #6a4a12; }
}
.t-line { display: block !important; font-size: .86rem; line-height: 1.5; color: #3a2614; background: none !important; padding: 0 !important; }
html[data-theme="tome-abyss"] .t-line { color: var(--text); }
.t-line .avatar { width: 20px !important; height: 20px !important; font-size: .8rem !important; vertical-align: -5px; margin-right: .3rem; display: inline-grid; }
.t-line .t-nm { font-family: var(--f-title); font-size: .9rem; color: var(--accent); margin-right: .3rem; text-decoration: none; }
.t-line.msg-me .t-nm { color: var(--g2); }
.t-line .msg-bubble { display: inline; background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; color: inherit; }
.t-line .t-tm { font-family: var(--f-latin); font-size: .74rem; color: var(--text-3); margin-left: .3rem; }

/* ===== 원정 성도 · 던전 정보 (시안 그대로) ===== */
.t-chart .t-dn { cursor: pointer; outline: none; } .t-chart .t-dn.lock { cursor: default; }
.t-chart .t-dn:focus-visible > circle:first-child { stroke: #fff; stroke-width: 2; }
.t-chip { background: rgba(255, 248, 228, .6) !important; color: var(--text-2) !important; border: 1px solid rgba(138, 106, 38, .8) !important; font-size: .8rem; padding: .1rem .55rem; border-radius: 10px; }
.t-chip.on { color: #3a250f !important; background: linear-gradient(180deg, #f3dfa0, #c99a3e) !important; border-color: #6a4a12 !important; }
.t-diffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; }
.t-dseal { display: grid; justify-items: center; text-align: center; padding: .3rem .1rem .25rem; border: 1px solid rgba(138, 106, 38, .6); border-radius: 3px; background: rgba(255, 248, 228, .5); color: var(--text); cursor: pointer; font: inherit; }
.t-dseal .ring { width: 1.9rem; height: 1.9rem; margin-bottom: .125rem; border-radius: 50%; display: grid; place-items: center; font: 700 .75rem var(--f-latin); color: #fff3d6; background: radial-gradient(circle at 35% 30%, var(--dc1), var(--dc2)); border: 2px solid #d8b25a; }
.t-dseal b { font-family: var(--f-title); font-weight: 400; font-size: .9rem; line-height: 1.2; } .t-dseal .tm { font-family: var(--f-latin); font-size: .8rem; color: var(--text-2); } .t-dseal .lb { font-size: .74rem; color: var(--text-3); }
.t-dseal.on { border-color: var(--accent); background: rgba(142, 27, 34, .1); box-shadow: 0 0 0 2px rgba(142, 27, 34, .3); }
.t-dseal:disabled { opacity: .5; filter: grayscale(.7); cursor: default; }
.t-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; margin: .5rem 0; }
.t-facts > div { text-align: center; padding: .375rem .25rem; border: 1px solid rgba(138, 106, 38, .55); border-radius: 3px; background: rgba(255, 248, 228, .45); }
.t-facts b { display: block; font-family: var(--f-latin); font-size: .95rem; color: var(--text); } .t-facts span { font-size: .74rem; color: var(--text-3); }
.t-two { display: grid; grid-template-columns: 1.25fr 1fr; gap: .75rem; }
.t-list { list-style: none; padding: .125rem .625rem !important; margin-bottom: .5rem !important; }
.t-list li { font-size: .85rem; padding: .2rem 0; border-bottom: 1px dotted rgba(138, 106, 38, .45); } .t-list li:last-child { border: 0; }
.t-fold { margin: 0 0 .5rem; padding: .375rem .625rem; border: 1px dashed rgba(138, 106, 38, .7); border-radius: 3px; font-size: .85rem; color: var(--text-2); }
.t-fold > summary { font-family: var(--f-title); font-size: .9rem; color: var(--text); cursor: pointer; }
.t-fold > summary::marker { color: var(--accent); }
.t-ledger { border: 0; padding: 0; }
.t-repeat { gap: .75rem; margin-top: .25rem; }
.t-start { font-size: 1.25rem !important; letter-spacing: .08em; padding: .625rem 0 !important; width: 100%; }

/* ===== 전장의 마법진 (시안 그대로) ===== */
.t-field { padding-bottom: .25rem; }
.tf-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: 1rem 1.375rem 0; }
.tf-title { font-family: var(--f-title); font-size: 1.45rem; color: #f6e3a2; text-shadow: 0 0 8px rgba(216, 178, 90, .5); line-height: 1.2; }
.tf-sub { font-size: .8rem; color: #b8a47a; margin-top: .25rem; }
.tf-time { text-align: right; min-width: 7rem; }
.tf-time .t-label { color: #a9926a; } .tf-time .timer { display: block; font: 700 1.55rem var(--f-latin); color: #fff3d6; line-height: 1.1; }
.tf-time .bar { height: 3px; margin: .2rem 0; background: rgba(255, 255, 255, .08); } .tf-time .bar-fill { background: #d8b25a; }
.tf-stage { position: relative; width: min(100%, 25rem); aspect-ratio: 1; margin: -.25rem auto 0; }
.tf-stage .tf-ring { position: absolute; inset: 0; } .tf-stage .tf-ring svg { width: 100%; height: 100%; display: block; }
.tf-ring .c1 { fill: rgba(91, 62, 142, .16); stroke: #8a6a26; stroke-width: 1.2; } .tf-ring .c2 { fill: none; stroke: rgba(216, 178, 90, .55); stroke-dasharray: 1 4; }
.tf-ring .c3 { fill: none; stroke: rgba(216, 178, 90, .25); } .tf-ring .hex { fill: none; stroke: rgba(216, 178, 90, .22); }
.tf-ring .tk { stroke: #4a3a40; stroke-width: 1.8; stroke-linecap: round; } .tf-ring .tk.on { stroke: #f2d27a; } .tf-ring .tk.now { stroke: #ff7a4a; stroke-width: 3.4; filter: drop-shadow(0 0 3px #ff7a4a); }
.tf-ring .sd rect { fill: #140c20; stroke: #8a6a26; } .tf-ring .sd text { font: 700 8px "Cinzel", serif; fill: #ff9a80; }
.tf-ring .sd.done rect { fill: #c99a3e; stroke: #f6e3a2; } .tf-ring .sd.done text { fill: #3a250f; } .tf-ring .sd.now rect { fill: #7a1414; stroke: #ffb2a0; } .tf-ring .sd.now text { fill: #fff; }
.tf-mon { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 66%; display: flex !important; flex-direction: column; align-items: center; gap: .125rem; text-align: center; background: none !important; padding: 0 !important; box-shadow: none !important; }
.tf-mon .token { width: 7.6rem; height: 7.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; position: relative; margin-top: -1.5rem;
  background: radial-gradient(circle at 45% 38%, #3a4a7a, #1a1436 60%, #0a0614) !important; border: 1.6px solid #d8b25a !important; box-shadow: 0 0 30px rgba(200, 70, 42, .45) !important; }
.tf-mon .token::after { content: ''; position: absolute; inset: -.55rem; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#c4413a calc(var(--mhp, 1) * 360deg), rgba(255, 255, 255, .08) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.tf-mon .token img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
.tf-mon .mon-name { font-family: var(--f-title); font-size: 1.2rem; color: #ffd9c8; margin-top: .375rem; }
.tf-mon .mon-status { color: #d8a890 !important; min-height: .9rem; }
.tf-mon .hpbar-big { width: 70%; height: .5rem; background: rgba(255, 255, 255, .08); border-radius: 4px; position: relative; overflow: hidden; }
.tf-mon .hpbar-big .hptext { position: static; display: block; font: 700 .62rem var(--f-latin); color: #ffcf9a; margin-top: .55rem; }
.tf-mon .tf-kills { font: 700 .75rem var(--f-latin); color: #f2d27a; margin-top: .6rem; }
.t-field .tf-party { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .25rem; padding: .25rem 1rem .75rem; }
.t-field .tf-party.party-grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.t-pm { background: none !important; box-shadow: none !important; padding: 0 !important; display: grid !important; justify-items: center; text-align: center; gap: .1rem !important; color: #eadcb8; min-height: 0 !important; }
.t-pm .slot-icon { width: 3.4rem; height: 3.4rem; border-radius: 50% !important; position: relative; overflow: visible !important; display: grid; place-items: center; font-size: 1.4rem;
  background: radial-gradient(circle at 40% 35%, #5f8cc0, #12233f) !important; border: 2px solid #d8b25a; margin-bottom: .375rem; }
.t-pm.slot-npc .slot-icon { background: radial-gradient(circle at 40% 35%, #9a74d8, #2a1748) !important; }
.t-pm .slot-icon > * { border-radius: 50%; overflow: hidden; }
.t-pm .slot-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: conic-gradient(#6fd08a calc(var(--hp, 1) * 360deg), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.t-pm .slot-icon::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none; z-index: 1; background: conic-gradient(rgba(246, 227, 162, .9) calc(var(--cd, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.t-pm.slot-empty .slot-icon { background: none !important; border: 1px dashed rgba(216, 178, 90, .35); } .t-pm.slot-empty .slot-icon::after, .t-pm.slot-empty .slot-icon::before { display: none; }
.t-pm .slot-name { font-family: var(--f-title); font-size: .95rem; color: #fff3d6; } .t-pm.slot-empty .slot-name { color: #8a7a68; font-size: .85rem; }
.t-pm .slot-sub { font-size: .74rem; color: #b8a47a; } .t-pm .hp-line { font: 700 .62rem var(--f-latin); color: #d8c8a0; }
.t-pm .hpbar { display: none; } .t-pm .skill-line { font-size: .74rem; color: #f6e3a2; width: 100%; display: grid; gap: .1rem; } .t-pm .skill-line .bar { height: 3px; background: rgba(255, 255, 255, .1); }
.t-pm.down { opacity: .45; }
.t-field .foot .kind { color: #e7d3a0; font-size: .85rem; align-self: center; }
.t-battle .log { font-size: .85rem; } .t-battle .log li { padding: .2rem 0; border-bottom: 1px dotted rgba(138, 106, 38, .35); }

/* ===== 별자리 지도 · 숙련도 · 오프라인 (시안 그대로) ===== */
.t-astro .star-map { display: block; width: 100%; height: auto; max-height: none; }
.t-astro .star-node { cursor: pointer; outline: none; } .t-astro .star-node:focus-visible circle:first-child { stroke: #fff; stroke-width: 2; }
.t-astro .t-sname { font-family: var(--f-title); font-weight: 400; font-size: 1.2rem; }
.t-mseal { width: 4.6rem; height: 4.6rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: "Cinzel Decorative", var(--f-latin); font-size: 2.1rem; color: #fff3d6;
  background: radial-gradient(circle at 35% 30%, #c0503a, #6e1414 65%, #3a0606); border: 3px solid #d8b25a; box-shadow: 0 0 0 2px #3a0606, 0 4px 10px rgba(0, 0, 0, .35); }
.t-gtab { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: .375rem; }
.t-gtab td, .t-gtab th { padding: .125rem .375rem; border-bottom: 1px dotted rgba(138, 106, 38, .45); text-align: left; } .t-gtab th { font-weight: 400; color: var(--text-3); }
.t-gtab tr.cur td { background: rgba(142, 27, 34, .08); color: var(--accent); } .t-gtab td:first-child { font: 700 .75rem var(--f-latin); }
.t-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; margin-top: .5rem; }
.t-acts > div { display: grid; align-content: start; gap: .25rem; padding: .3rem .5rem; border: 1px solid rgba(138, 106, 38, .5); border-radius: 3px; font-size: .8rem; color: var(--text-3); background: rgba(255, 248, 228, .35); }
.t-acts b { font-family: var(--f-title); font-weight: 400; font-size: .85rem; color: var(--text-2); } .t-acts .btn { justify-self: start; }
.t-acts .on { border-color: var(--g2); background: rgba(47, 95, 138, .1); } .t-acts .on b { color: var(--g2); }
@media (max-width: 760px) { .t-diffs, .t-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-two, .t-acts { grid-template-columns: minmax(0, 1fr); } .tf-head { flex-wrap: wrap; } }
.t-chart > svg, .t-astro .star-map { max-width: 33.25rem; margin: 0 auto; }
@media (min-width: 1600px) {
  .chat-dock.dock-open .inbox-head { position: relative; }
  .chat-dock.dock-open #ib-title::after { content: '여백의 전령'; white-space: normal; padding-bottom: .8rem; }
  .chat-dock.dock-open .inbox-head::after { content: 'MARGINALIA · CHAT'; position: absolute; left: 3.25rem; top: 1.75rem; font-family: var(--f-latin); font-size: .72rem; letter-spacing: .25em; color: var(--text-3); pointer-events: none; }
}
.t-astro .star-node circle, .t-astro .star-node text, .t-astro .star-node line, .t-astro .star-node path { stroke: none; stroke-width: 0; opacity: 1; filter: none; fill: none; }
.t-astro .star-node line, .t-astro .star-node path { stroke: currentColor; }
.t-h2 { min-width: 0; } .t-h2 > .cz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.t-gtab th { white-space: nowrap; }

/* ===== 모든 메뉴: 시안 카드 양식 (제목은 카드 바깥 위, 테두리는 제목 아래부터) ===== */
html[data-theme^="tome"] .panel-box.tb-on { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 .25rem !important; isolation: isolate; overflow: visible !important; }
html[data-theme^="tome"] .panel-box.tb-on::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: var(--ht, 2.5rem); z-index: -1; border-radius: 3px; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid color-mix(in srgb, var(--gold-3) 70%, transparent); box-shadow: inset 0 0 12px rgba(160, 120, 50, .15); }
html[data-theme^="tome"] .panel-box.tb-on > :not(.tb-head) { margin-inline: .75rem; }
html[data-theme^="tome"] .panel-box.tb-on > .tb-head + * { margin-top: .625rem; }
html[data-theme^="tome"] .panel-box.tb-on > .tb-head { margin-bottom: 0; }
html[data-theme^="tome"] .panel-box.tb-on > .tb-head, html[data-theme^="tome"] .panel-box.tb-on > .tb-head .section-title { font-size: 1.3rem; }
.tb-lat { font-size: .8rem !important; color: var(--text-3); letter-spacing: .08em; margin-left: .625rem; font-weight: 400; }
html[data-theme^="tome"] .panel-box.tb-on::after { bottom: 3px; }

/* ===== 헤더를 시안 비율로 크게 · 여유 있게 ===== */
@media (min-width: 1100px) {
  :root { --band-h: 12rem; }
  .topbar { padding: 1rem 2.25rem 1.75rem !important; gap: .625rem 1.25rem !important; }
  .topbar > .who:first-child .logo-small { font-size: 3rem !important; }
  .topbar > .who:first-child::after { font-size: .82rem; }
  .topbar .conn, .topbar .world-chip { font-size: .85rem !important; }
  .doom-seal { transform: translate(-50%, -50%) scale(1.06) !important; top: 50% !important; }
  .topbar > .who:nth-child(2) { gap: .75rem; } .topbar > .who:nth-child(2) b { font-size: 1.55rem !important; } .topbar > .who:nth-child(2) .muted { font-size: .9rem; }
  .topbar .icon-btn { width: 3rem !important; height: 3rem !important; background-size: 1.5rem, auto !important; }
  .topbar .wallet { gap: .625rem !important; }
  .topbar .wallet > div { padding: .375rem 1.05rem .375rem .55rem !important; column-gap: .5rem !important; }
  .topbar .wallet > div::before { width: 1.5rem !important; height: 1.5rem !important; }
  .topbar .wallet dt { font-size: .82rem !important; } .topbar .wallet dd { font-size: 1.05rem !important; }
  .subnav { top: calc(var(--band-h) - 2.6rem) !important; }
  .subnav .subtab { font-size: 1rem !important; padding: .375rem 1rem !important; }
}
@media (min-width: 1100px) {
  /* 큰 상자 하나뿐인 화면: 상자가 쪽을 넘어 이어짐 (줄 · 항목은 쪼개지지 않음) */
  .panel > .panel-box:only-child, .panel > .panel-box:only-of-type { break-inside: auto !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  html[data-theme^="tome"] .panel > .panel-box.tb-on:only-of-type::before { display: none; }
  html[data-theme^="tome"] .panel > .panel-box.tb-on:only-of-type > :not(.tb-head) { margin-inline: 0; }
  html[data-theme^="tome"] .panel > .panel-box.tb-on:only-of-type .item, html[data-theme^="tome"] .panel > .panel-box.tb-on:only-of-type > p { background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid color-mix(in srgb, var(--gold-3) 60%, transparent); border-radius: 3px; padding: .5rem .625rem; margin-bottom: .5rem; }
  .panel-box > *, .panel-box .item, .panel-box .list-row, .panel-box li, .panel-box tr { break-inside: avoid; }
  /* 게시판: 글 목록 · 글쓰기는 한 단 안에서 위아래로 */
  .bd-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .bd-compose { position: relative !important; top: auto !important; }
}
.t-spread, .t-left, .t-right, .t-col, .t-spread section { min-width: 0; max-width: 100%; }
.t-gtab { table-layout: fixed; } .t-gtab td { overflow-wrap: anywhere; }
@media (max-width: 760px) { .subnav .subtab { flex: none; } .subnav { overflow-x: auto; scrollbar-width: none; } }
/* 휴대폰: 하위 메뉴는 잘리지 않게 여러 줄 색인 탭(모두 한눈에) · 헤더 압축 */
@media (max-width: 760px) {
  .subnav { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .25rem !important; overflow: visible !important; padding: .375rem .5rem .375rem !important; position: static !important; }
  .subnav .subtab { border-radius: .4rem !important; text-align: center; padding: .4rem .25rem !important; font-size: .82rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 2.25rem; }
  .subnav .subtab[aria-selected="true"] { padding-top: .4rem !important; }
  .subnav .page-title { grid-column: 1 / -1; }
  .topbar { padding: .5rem .625rem !important; gap: .25rem .5rem !important; }
  .topbar > .who:first-child::after { display: none; }
  .logo-small { font-size: 1.35rem !important; }
  .topbar .wallet { width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem !important; }
  .topbar .wallet > div { padding: .15rem .35rem !important; column-gap: .25rem !important; min-width: 0; }
  .topbar .wallet > div::before { width: .95rem !important; height: .95rem !important; }
  .topbar .wallet dt { font-size: .72rem !important; } .topbar .wallet dd { font-size: .85rem !important; }
  .topbar .icon-btn { width: 2.25rem !important; height: 2.25rem !important; }
}

/* ===== 20차 다듬기: 헤더와 본문 사이 여백 · 색인 탭 줄 따로 · 잘림 없음 · 책 안을 꽉 채움 · 그림은 쪽 가운데 ===== */
@media (min-width: 1100px) {
  :root { --band-h: 12.75rem; }
  .game { grid-template-rows: var(--band-h) auto auto !important; }
  .topbar { height: calc(var(--band-h) - 1.5rem) !important; margin-bottom: .75rem; }
  .subnav { grid-column: 1 !important; grid-row: 2 !important; justify-self: stretch !important; align-self: end !important; position: sticky !important; top: var(--band-h) !important;
    margin: 0 !important; max-width: none !important; overflow: visible !important; display: flex !important; flex-wrap: wrap; gap: .3rem !important; padding: .5rem 1.25rem 0 !important; background: var(--leather-2); z-index: 24; }
  .subnav .subtab { white-space: nowrap; flex: none; }
  .game > .panel, #dyn-panels > .panel { grid-row: 3 !important; }
  #main-nav { grid-row: 2 / 4 !important; height: calc(100dvh - var(--band-h) - .75rem) !important; }
  .inbox.chat-dock.dock-open { grid-row: 2 / 4 !important; }
  .game > .panel, #dyn-panels > .panel, .inbox.chat-dock.dock-open { font-size: clamp(14px, .3vw + 9.5px, 19px); }
  .panel { column-fill: balance; }
  .t-rite { max-width: min(100%, 44rem); margin-inline: auto; }
  .t-left > .t-h2, .t-left > .t-row, .t-left > .t-card, .t-left > div:not(.t-rite):not(.t-row) { max-width: min(100%, 44rem); margin-inline: auto; }
  .panel img.pv-img, .panel .avatar-lg, .panel .pic-lg { margin-inline: auto; }
}
@media (min-width: 1100px) and (max-height: 820px) { :root { --band-h: 11rem; } .doom-seal { transform: translate(-50%, -50%) scale(.9) !important; } }
@media (min-width: 1100px) {
  .game > .panel > *, #dyn-panels > .panel > * { zoom: var(--pz, 1); }
  .game { --pz: 1.08; }
}
@media (min-width: 1600px) { .game { --pz: 1.18; } }
@media (min-width: 2200px) { .game { --pz: 1.4; } }
@media (min-width: 2800px) { .game { --pz: 1.7; } }
@media (min-width: 1100px) {
  .game > .panel > .t-spread, #dyn-panels > .panel > .t-spread { zoom: 1; }
  .t-spread > .t-col > *, .t-spread > .t-left > *, .t-spread > .t-right > * { zoom: var(--pz, 1); }
  .inbox.chat-dock.dock-open { background: var(--page-tex), linear-gradient(90deg, rgba(120, 72, 22, .07), rgba(120, 72, 22, .02)), var(--page) !important; background-blend-mode: multiply, normal, normal; }
}
@media (min-width: 1100px) and (max-width: 1599px) {
  .panel > .t-spread.home-grid { grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr) !important; }
  .t-spread > .t-c2 { grid-column: 1 !important; } .t-spread > .t-c3 { grid-column: 3 !important; grid-row: 1 / span 2; }
}
@media (min-width: 2200px) { :root { --band-h: 15.5rem; } .topbar > .who, .topbar > .head-icons, .topbar > .wallet { zoom: 1.3; } .doom-seal { transform: translate(-50%, -50%) scale(1.3) !important; } #main-nav .tab { font-size: 1.45rem; } .subnav .subtab { font-size: 1.25rem !important; } }
@media (min-width: 2200px) { .inbox.chat-dock.dock-open > * { zoom: 1.3; } }

/* =====================================================================
   21차 정리: 밤하늘 위에 떠 있는 마법서 — 헤더는 하늘에 직접 새김(상자 없음), 책은 아래에 따로,
   상자 사이를 넉넉하게, 책등 그림자가 글을 덮지 않게, 휴대폰은 차분한 리본 메뉴 · 밀랍 인장 채팅
   ===================================================================== */
html[data-theme^="tome"] body { background: #06050d; }
html[data-theme^="tome"] .sky { display: block !important; position: fixed; inset: 0; height: auto; z-index: 0; opacity: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 72% 12%, rgba(91, 62, 142, .35), transparent 70%),
    radial-gradient(ellipse 50% 35% at 18% 20%, rgba(47, 95, 138, .28), transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(200, 70, 42, .35), rgba(142, 27, 34, .15) 40%, transparent 75%),
    linear-gradient(180deg, #05040c 0%, #0b0a1e 45%, #1a0b18 100%); }
html[data-theme^="tome"] .sky::before, html[data-theme^="tome"] .sky::after { content: ''; position: absolute; inset: 0; opacity: .8;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfe8ff, transparent), radial-gradient(1.5px 1.5px at 260px 40px, #fff4cf, transparent),
    radial-gradient(1px 1px at 340px 160px, #fff, transparent), radial-gradient(1px 1px at 60px 200px, #bcd6ff, transparent), radial-gradient(1px 1px at 200px 250px, #fff, transparent);
  background-size: 380px 280px; }
html[data-theme^="tome"] .sky::after { background-size: 530px 410px; transform: translate(90px, 60px); opacity: .5; }
html[data-theme="tome-abyss"] .sky { opacity: .9 !important; }

@media (min-width: 1100px) {
  :root { --band-h: 13rem; --spine-w: 6rem; --gut: 9.5rem; --pp: 2.75rem; }
  .game { background: none !important; max-width: 1880px; margin: 0 auto !important; padding: 0 1.75rem 1.75rem !important; row-gap: 0 !important;
    grid-template-rows: var(--band-h) auto auto !important; }
  /* 책 테두리(가죽 · 금박)는 띠 아래 세 줄 전체를 감싸는 한 장 */
  .game::before { content: ''; grid-column: 1 / -1; grid-row: 2 / 4; margin: -14px; border-radius: 12px; z-index: 0; pointer-events: none;
    background: linear-gradient(135deg, var(--leather), var(--leather-2) 45%, var(--leather) 75%, var(--leather-2));
    box-shadow: 0 0 0 2px #120406, 0 0 0 4px var(--gold-3), 0 0 0 5px #120406, 0 30px 60px rgba(0, 0, 0, .8), 0 0 80px rgba(200, 70, 42, .18); }
  .game > * { position: relative; z-index: 1; }
  /* 헤더: 상자 없이 하늘에 — 아래 책과 넉넉히 떨어짐 */
  .topbar { position: relative !important; top: auto !important; height: calc(var(--band-h) - 2.25rem) !important; margin: 0 0 2.25rem !important;
    background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 1.25rem .5rem 0 !important; overflow: visible !important; }
  .topbar::before { display: none; }
  .subnav { top: 0 !important; background: linear-gradient(180deg, var(--leather-2), var(--leather)) !important; padding: .625rem 1.5rem 0 !important; border-radius: 6px 0 0 0; }
  #main-nav { top: .75rem !important; height: calc(100dvh - 1.5rem) !important; max-height: 60rem; }
  .inbox.chat-dock.dock-open { top: .75rem !important; height: calc(100dvh - 1.5rem) !important; max-height: 60rem; border-radius: 0 6px 6px 0 !important; }
  .game > .panel, #dyn-panels > .panel { border-radius: 0 0 6px 6px; min-height: calc(100dvh - var(--band-h) - 4rem) !important; padding: 2.25rem var(--pp) 2.5rem !important; overflow: visible; }
  /* 상자 사이 여백 · 숨 쉴 공간 */
  .panel > *, .panel > .grid > *, .panel > .home-grid > *, .panel > .char-page > *, .panel > .stack > *, .panel > .grid > .stack > * { margin-bottom: 1.75rem !important; }
  .t-col > section, .t-col > div, .t-left > *, .t-right > * { margin-bottom: 1.75rem; }
  .t-card { padding: .9rem 1.1rem; margin-bottom: 0; }
  .t-h2 { margin-bottom: .6rem; }
  html[data-theme^="tome"] .panel-box.tb-on > :not(.tb-head) { margin-inline: 1rem; }
  html[data-theme^="tome"] .panel-box.tb-on > .tb-head + * { margin-top: .9rem; }
  html[data-theme^="tome"] .panel-box.tb-on { padding-bottom: .75rem !important; gap: .75rem; }
  .panel-box { line-height: 1.6; }
  .panel > .t-spread.home-grid, .panel > .t-spread { grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) var(--gut) calc(50cqw - var(--gut) / 2 - var(--R)) !important; }
  /* 의식판은 쪽 가운데 · 알맞은 크기 */
  .t-rite, .t-left > * { max-width: 40rem !important; margin-inline: auto !important; }
  .t-astro .star-detail { max-width: 40rem; margin-inline: auto; }
}
@media (min-width: 1100px) and (max-width: 1599px) { .panel > .t-spread.home-grid { grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr) !important; } }
@media (min-width: 1600px) { .inbox.chat-dock.dock-open { padding: 1.75rem 1.5rem 1.25rem !important; } }

/* ===== 휴대폰: 하늘 위 가벼운 헤더 · 차분한 리본 메뉴 · 밀랍 인장 채팅 ===== */
@media (max-width: 760px) {
  .game { background: none !important; padding: 0 .625rem 6rem !important; }
  .topbar { background: none !important; box-shadow: none !important; padding: .75rem .25rem .25rem !important; margin-bottom: .75rem; }
  .topbar::before { display: none; }
  .topbar .wallet { display: flex !important; justify-content: space-between; border-top: 1px solid rgba(216, 178, 90, .35); padding-top: .5rem; }
  .topbar .wallet > div { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .topbar .world-chip { background: none !important; border: 1px solid var(--gold-3) !important; box-shadow: none !important; }
  .subnav { background: none !important; padding: 0 0 .625rem !important; }
  .subnav .subtab { background: rgba(239, 226, 194, .1) !important; color: #e7d3a0 !important; box-shadow: none !important; border: 1px solid rgba(216, 178, 90, .35) !important; border-radius: 3px !important; font-family: var(--f-title); }
  .subnav .subtab[aria-selected="true"] { background: rgba(142, 27, 34, .55) !important; color: #fff3d6 !important; border-color: #d8b25a !important; }
  .game > .panel, #dyn-panels > .panel { border-radius: 8px; padding: 1.1rem .9rem 1.5rem !important; box-shadow: 0 0 0 1px #120406, 0 0 0 3px var(--gold-3), 0 12px 30px rgba(0, 0, 0, .7) !important; }
  .panel > * { margin-bottom: 1.25rem; }
  .t-card { padding: .75rem .875rem; }
  #main-nav { background: linear-gradient(0deg, #12060a, rgba(26, 8, 12, .96)) !important; border-top: 1px solid var(--gold-3) !important; padding: 0 .5rem env(safe-area-inset-bottom) !important; height: auto; }
  #main-nav .tab { background: none !important; box-shadow: none !important; color: #c9b88e; padding: .5rem 0 .55rem !important; border-radius: 0 !important; position: relative; }
  #main-nav .tab[aria-selected="true"] { color: #fff3d6; text-shadow: 0 0 8px rgba(255, 200, 150, .6); }
  #main-nav .tab[aria-selected="true"]::after { content: ''; position: absolute; left: 30%; right: 30%; top: 0; height: 3px; background: #d8b25a; border-radius: 0 0 3px 3px; box-shadow: 0 0 8px #d8b25a; }
  /* 접힌 채팅 = 밀랍 인장 단추 (아래 메뉴 위 오른쪽) */
  .inbox.chat-dock:not(.dock-open) { left: auto !important; right: .875rem !important; bottom: 4.75rem !important; width: 3.4rem !important; height: 3.4rem; padding: 0 !important; border-radius: 50% !important; overflow: visible;
    background: radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808) !important; border: 2px solid #d8b25a !important; box-shadow: 0 6px 14px rgba(0, 0, 0, .6) !important; }
  .inbox.chat-dock:not(.dock-open) .inbox-tabs, .inbox.chat-dock:not(.dock-open) #ib-title { font-size: 0 !important; }
  .inbox.chat-dock:not(.dock-open) .inbox-tabs { display: none; }
  .inbox.chat-dock:not(.dock-open) #ib-title::before { display: none; }
  .inbox.chat-dock:not(.dock-open) #ib-title .badge { position: absolute; top: -4px; right: -4px; font-size: .76rem; z-index: 2; }
  .inbox.chat-dock:not(.dock-open) .dock-toggle { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: none !important; border: 0 !important; font-size: 0 !important; color: transparent; box-shadow: none !important; }
  .inbox.chat-dock:not(.dock-open) .dock-toggle::after { content: '信'; font-family: var(--f-title); font-size: 1.3rem; color: #f6d0b0; }
  .inbox.chat-dock.dock-open { bottom: 4.25rem !important; max-height: 70vh; }
}
/* 넓은 화면 채움은 글자 기준(rem) 전체 비례로 — 상자 확대(zoom)는 단 · 책등과 어긋나 잘림이 생겨 쓰지 않음 */
.game { --pz: 1 !important; }
.game > .panel > *, #dyn-panels > .panel > *, .t-spread > .t-col > *, .t-spread > .t-left > *, .t-spread > .t-right > * { zoom: 1 !important; }
@media (min-width: 2200px) { .topbar > .who, .topbar > .head-icons, .topbar > .wallet, .inbox.chat-dock.dock-open > * { zoom: 1 !important; } .doom-seal { transform: translate(-50%, -50%) scale(1.06) !important; } }
@media (min-width: 1600px) { html:has(#game-screen:not([hidden])) { font-size: calc(clamp(16px, calc(.55vw + 7px), 22px) * var(--fs-k, 1)); } }
@media (min-width: 1100px) { .panel-box, .t-card, .t-col > section { overflow-wrap: anywhere; } .panel .panel-box { overflow-x: visible; } }

/* =====================================================================
   22차: 한 화면에 책 전체 — 책은 화면 높이에 맞춰 고정, 긴 내용은 책 안에서만 넘김
   책등 · 여백의 전령 · 양피지는 같은 윗선(색인 탭 줄 아래)에서 시작해 같은 아랫선에서 끝남
   ===================================================================== */
#dyn-panels > * { position: relative; z-index: 1; }
@media (min-width: 1100px) and (min-height: 640px) {
  html:has(#game-screen:not([hidden])) { font-size: calc(clamp(14.5px, min(calc(.42vw + 8.5px), 1.72vh), 19.5px) * var(--fs-k, 1)) !important; }
  html:has(#game-screen:not([hidden])), html:has(#game-screen:not([hidden])) body { height: 100%; overflow: hidden; }
  #game-screen.game { height: 100dvh; min-height: 0 !important; grid-template-rows: var(--band-h) auto minmax(0, 1fr) !important; padding-bottom: 1.5rem !important; }
  .game::before { grid-row: 2 / 4 !important; }
  .subnav { position: relative !important; top: auto !important; grid-row: 2 !important; }
  .game > .panel, #dyn-panels > .panel { grid-row: 3 !important; min-height: 0 !important; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent; }
  #main-nav { grid-row: 3 !important; position: relative !important; top: auto !important; height: auto !important; max-height: none !important; align-self: stretch !important; }

  .inbox.chat-dock.dock-open .ib-thread-box { height: auto !important; }
  .topbar { margin-bottom: 1.75rem !important; }
  .subnav { border-radius: 6px 6px 0 0; }
}
@media (min-width: 1100px) {
  .game > .panel, #dyn-panels > .panel { padding-right: var(--R, var(--pp)) !important; }
  .panel > *, .panel > .grid > *, .panel > .char-page > *, .panel > .stack > * { max-width: 100%; min-width: 0; }
  .panel .shop-grid, .panel .npc-grid, .panel .job-grid, .panel .gacha-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  #game-screen.game { position: fixed !important; inset: 0; margin: 0 auto !important; width: 100%; }
}
@media (min-width: 1100px) {
  :root { --spine-w: 5.5rem; --gut: 7rem; --pp: 2rem; }
  #main-nav { box-shadow: -3px 0 6px rgba(0, 0, 0, .35), 3px 0 6px rgba(0, 0, 0, .35) !important; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  .tf-stage { width: min(100%, 25rem, calc(100dvh - var(--band-h) - 24rem)) !important; }
  .t-astro .star-map { max-height: calc(100dvh - var(--band-h) - 17rem); width: auto !important; max-width: 100%; }
  .t-chart > svg { max-height: calc(100dvh - var(--band-h) - 12rem); width: auto !important; max-width: 100%; margin-inline: auto; }
  .t-col > .t-quote { margin-top: .5rem; }
}

/* =====================================================================
   23차: 쪽 단위 배치 — 단(column) 흐름을 버리고, 묶음을 통째로 왼쪽 쪽(.tp-l) · 오른쪽 쪽(.tp-r)에 담음
   왼쪽 쪽 폭 = 책등까지, 오른쪽 쪽 = 책등 오른쪽 ~ 채팅 앞. 각 쪽은 자기 안에서만 넘김
   ===================================================================== */
.tp { min-width: 0; }
@media (max-width: 1099px) { .tp { display: contents; } }
@media (min-width: 1100px) {
  .game > .panel, #dyn-panels > .panel { column-count: auto !important; }
  .game > .panel:not([hidden]):has(> .tp), #dyn-panels > .panel:not([hidden]):has(> .tp) { display: grid !important; align-items: start; gap: 0 var(--gut) !important;
    grid-template-columns: calc(50cqw - var(--gut) / 2 - var(--pp)) minmax(0, 1fr); padding-right: var(--R, var(--pp)) !important; }
  .tp > * { margin: 0 0 1.75rem !important; break-inside: auto; }
  .tp > *:last-child { margin-bottom: .5rem !important; }
  .panel.tp-one > .tp-r { display: none; }
  #tab-admin:has(> .tp) { grid-template-columns: calc(50cqw - var(--gut) / 2 - var(--pp)) minmax(0, 1fr) !important; }
  /* 시안 화면(t-spread) 도 같은 쪽 계산 */
  .panel > .t-spread.home-grid, .panel > .t-spread { grid-template-columns: calc(25cqw - var(--gut) / 4 - var(--pp) / 2 - 1.25rem) 2.5rem calc(25cqw - var(--gut) / 4 - var(--pp) / 2 - 1.25rem) var(--gut) minmax(0, 1fr) !important; }
}
@media (min-width: 1100px) and (max-width: 1599px) {
  .panel > .t-spread.home-grid, .panel > .t-spread { grid-template-columns: calc(50cqw - var(--gut) / 2 - var(--pp)) var(--gut) minmax(0, 1fr) !important; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  .game > .panel, #dyn-panels > .panel { overflow: hidden !important; padding-top: 1.75rem !important; padding-bottom: 0 !important; }
  .tp, .t-spread > .t-col, .t-spread > .t-left, .t-spread > .t-right { height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0 .375rem 1.5rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold-3) 70%, transparent) transparent; overscroll-behavior: contain; }
  .panel:has(> .tp) { align-items: stretch !important; }
  .panel > .t-spread { height: 100%; align-items: stretch !important; }
  .t-spread > .t-c2 { grid-row: auto !important; }
}
@media (min-width: 1100px) and (max-width: 1599px) and (min-height: 640px) {
  .t-spread > .t-c1, .t-spread > .t-c2 { height: auto; overflow: visible; }
  .t-spread > .t-c1 { grid-column: 1; grid-row: 1; } .t-spread > .t-c2 { grid-column: 1 !important; grid-row: 2 !important; }
}
/* 모든 시안 화면: [왼쪽 쪽] [책등 자리] [오른쪽 쪽] — 홈의 왼쪽 쪽은 안에서 두 단 */
@media (min-width: 1100px) {
  .panel > .t-spread.home-grid, .panel > .t-spread { grid-template-columns: calc(50cqw - var(--gut) / 2 - var(--pp)) var(--gut) minmax(0, 1fr) !important; }
  .t-spread > .t-left { grid-column: 1 !important; grid-row: 1 !important; } .t-spread > .t-right { grid-column: 3 !important; grid-row: 1 !important; }
  .t-lpair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; align-content: start; }
  .t-lpair > .t-col { grid-column: auto !important; grid-row: auto !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
}
@media (min-width: 1600px) { .t-lpair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) and (min-height: 640px) {
  .tf-stage { width: min(100%, 24rem, calc(100dvh - var(--band-h) - 27rem)) !important; }
  .t-astro .star-map { max-height: calc(100dvh - var(--band-h) - 20rem) !important; }
}

/* ===== 그림 문장 (이모지 대신 금선 그림) ===== */
.tg { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--gold-3); line-height: 1; }
html[data-theme="tome-abyss"] .tg, .topbar .tg, .t-rite .tg, .tome-field .tg, .tf-mon .tg, .inbox .tg { color: #e9c870; }
.tg-svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tg-med { display: inline-grid !important; place-items: center; border-radius: 50% !important; overflow: hidden; aspect-ratio: 1; color: #f6e3a2 !important;
  background: radial-gradient(circle at 42% 36%, #34406e, #161230 62%, #0a0614) !important; box-shadow: 0 0 0 2px #c99a3e, 0 0 0 3px rgba(26, 8, 12, .8), inset 0 0 10px rgba(0, 0, 0, .6) !important; border: 0 !important; }
.tg-med > .tg { width: 62%; height: 62%; color: #f6e3a2; filter: drop-shadow(0 0 3px rgba(246, 227, 162, .55)); }
.tg-med > .tg .tg-svg { stroke-width: 1.4; }
.tf-mon .token.tg-med, .tf-mon .token { box-shadow: 0 0 30px rgba(200, 70, 42, .45) !important; border: 1.6px solid #d8b25a !important; }
.tf-mon .token .tg { width: 58%; height: 58%; color: #d8f0ff; filter: drop-shadow(0 0 5px rgba(160, 210, 255, .6)); }
.t-pm .slot-icon .tg { width: 60%; height: 60%; color: #fff3d6; }
.t-pm.slot-player .slot-icon { background: radial-gradient(circle at 40% 35%, #5f8cc0, #12233f) !important; }
.t-pm.slot-npc .slot-icon { background: radial-gradient(circle at 40% 35%, #9a74d8, #2a1748) !important; }

/* ===== 24차 자체 점검 수정 ===== */
/* (1) 휴대폰: 밤하늘(.sky)이 양피지 위를 덮어 쪽 바탕 · 제목이 안 보이던 문제 */
.game > .topbar, .game > .subnav, .game > .panel, #dyn-panels > .panel { position: relative; z-index: 1; }
@media (max-width: 760px) {
  /* (2) 아래 오른쪽 밀랍 인장(채팅)이 마지막 버튼을 가리지 않게 · 알림이 아래 메뉴를 덮지 않게 */
  .game > .panel, #dyn-panels > .panel { padding-bottom: 5.5rem !important; }
  .toasts { bottom: 8.75rem !important; left: .75rem !important; right: 4.75rem !important; }
  /* (3) 헤더 압축: 제목 · 아이콘 한 줄, 연결 · 세계 · 이름 한 줄 */
  .topbar { display: grid !important; grid-template-columns: 1fr auto; align-items: center; row-gap: .375rem !important; }
  .topbar > .who:first-child { grid-column: 1; grid-template-columns: auto auto auto !important; }
  .topbar > .who:first-child .logo-small { grid-column: auto !important; }
  .topbar > .who:nth-child(2) { grid-column: 1; grid-row: 2; }
  .topbar .head-icons { grid-column: 2; grid-row: 1 / 3; }
  .topbar .wallet { grid-column: 1 / -1; }
}
/* (4) 넓은 화면: 묶음이 하나뿐인 화면의 빈 오른쪽 쪽에 쪽 장식(꺼져 가는 별 문장) — 빈 공간이 아니라 책의 한 쪽 */
@media (min-width: 1100px) {
  .panel.tp-one > .tp-r { display: grid !important; place-content: center; text-align: center; color: var(--text-3); gap: .5rem; }
  .panel.tp-one > .tp-r::before { content: ''; width: 9rem; height: 9rem; margin: 0 auto; opacity: .55;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='54' fill='none' stroke='%238a6a26' stroke-dasharray='2 5'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%238a6a26'/%3E%3Cpath d='M60 26l7 20 21 1-17 13 6 20-17-12-17 12 6-20-17-13 21-1z' fill='none' stroke='%238a6a26' stroke-width='1.5'/%3E%3Cpath d='M57 40l5 10-4 6 5 9' fill='none' stroke='%23a3302a' stroke-width='1.5'/%3E%3C/svg%3E"); }
  .panel.tp-one > .tp-r::after { content: '"별은 꺼지지 않는다. 꺼지지 않게 한다."'; font-family: var(--f-title); font-size: 1.05rem; color: var(--text-2); }
  /* (5) 원정 준비: 입장 버튼은 쪽을 넘겨도 늘 보이게 */
  .t-right > .t-start { position: sticky; bottom: .5rem; z-index: 3; box-shadow: 0 -6px 14px rgba(239, 226, 194, .9), 0 4px 10px rgba(0, 0, 0, .35) !important; }
}
.section-title[data-lat]::after { content: attr(data-lat); font-family: var(--f-latin); font-size: .8rem; color: var(--text-3); letter-spacing: .08em; margin-left: .625rem; font-weight: 400; }
.tg-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tg { position: relative; }
.t-eq { font-size: .95rem; }
/* 공지 · 이벤트: 홈 맨 위 한 줄 (펼침면 위) */
.t-notices { margin: 0 0 1rem; } .t-notices .nt-list { display: flex; gap: .75rem; flex-wrap: wrap; } .t-notices .nt-list > * { flex: 1 1 18rem; }
@media (min-width: 1100px) and (min-height: 640px) {
  .panel:has(> .t-notices) { grid-template-rows: auto minmax(0, 1fr); display: grid !important; }
  .panel > .t-notices { max-height: 8rem; overflow: auto; }
}
.eq-name { font-size: 1rem; }
.t-h2 { font-weight: 400; }
/* 쪽 안의 넓은 내용(관리 표 등)은 그 쪽 안에서만 가로로 넘김 — 책등 밑으로 들어가 가려지지 않게 */
@media (min-width: 1100px) {
  .tp, .t-spread > .t-left, .t-spread > .t-right { overflow-x: auto !important; min-width: 0; }
  .tp > *, .tp .panel-box, .tp .grid, .tp .stack { min-width: 0; max-width: 100%; }
  .tp table { max-width: none; }
}
@media (min-width: 1100px) and (max-width: 1599px) { .tp, .t-spread > .t-left, .t-spread > .t-right { padding-bottom: 4.5rem !important; } }
.panel .eq-name { font-size: max(1.15rem, 16px); }

@media (min-width: 1600px) and (min-height: 640px) {
  .inbox.chat-dock.dock-open { grid-row: 3 !important; position: relative !important; top: auto !important; height: auto !important; max-height: none !important; align-self: stretch !important; min-height: 0; }
}
/* 하위 메뉴 띠: 왼쪽 쪽 · 책등 · 오른쪽 쪽(채팅까지) 위를 한 줄로 가로지름 — 책등은 띠 아래에서 시작 */
@media (min-width: 1100px) {
  .subnav { grid-column: 1 / -1 !important; border-radius: 6px 6px 0 0 !important; padding: .625rem 1.5rem 0 !important;
    background: linear-gradient(180deg, var(--leather-2), var(--leather)) !important; box-shadow: inset 0 -1px 0 rgba(216, 178, 90, .35); }
  #main-nav { grid-row: 3 !important; }
  .inbox.chat-dock.dock-open { border-top-right-radius: 0 !important; }
}
.t-mets { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
@media (max-width: 760px) { html[data-theme^="tome"] .panel-box.tb-on > :not(.tb-head) { margin-inline: .2rem !important; } }
/* 하위 메뉴가 없는 화면(관리자 등)도 같은 띠를 비워서 둠 — 모든 메뉴에서 책 윗선이 같은 높이 */
@media (min-width: 1100px) { .subnav[hidden] { display: flex !important; min-height: 2.65rem; visibility: visible; } .subnav[hidden] > * { display: none; } }
@media (min-width: 1100px) { #tab-admin, .game:has(#inbox:not(.dock-open)) #tab-admin { padding-right: var(--R, var(--pp)) !important; } }
/* 1599px 이하: 접힌 채팅은 오른쪽 아래 작은 밀랍 인장 하나 — 쪽 내용을 가리지 않게 */
@media (min-width: 761px) {
  .inbox.chat-dock:not(.dock-open) { left: auto !important; right: 1rem !important; bottom: 1rem !important; width: 3.4rem !important; height: 3.4rem; padding: 0 !important; border-radius: 50% !important; overflow: visible;
    background: radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808) !important; border: 2px solid #d8b25a !important; box-shadow: 0 6px 14px rgba(0, 0, 0, .6) !important; }
  .inbox.chat-dock:not(.dock-open) .inbox-tabs { display: none; }
  .inbox.chat-dock:not(.dock-open) #ib-title { font-size: 0 !important; }
  .inbox.chat-dock:not(.dock-open) #ib-title::before { display: none; }
  .inbox.chat-dock:not(.dock-open) #ib-title .badge { position: absolute; top: -4px; right: -4px; font-size: .76rem; z-index: 2; }
  .inbox.chat-dock:not(.dock-open) .dock-toggle { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: none !important; border: 0 !important; font-size: 0 !important; color: transparent; box-shadow: none !important; }
  .inbox.chat-dock:not(.dock-open) .dock-toggle::after { content: '信'; font-family: var(--f-title); font-size: 1.3rem; color: #f6d0b0; }
}
/* 헤더: 모든 요소를 띠의 세로 가운데에 · 오른쪽 묶음(이름 · 직업 · 레벨 · 우편함 · 설정 · 재화)은 오른쪽 정렬, 화면 끝에서 여백 */
@media (min-width: 1100px) {
  .topbar { padding: 0 2.5rem 0 1.25rem !important; align-content: center !important; align-items: center !important;
    grid-template-columns: auto 1fr auto auto !important; grid-template-rows: auto auto !important; grid-template-areas: "a . b i" "a . w w" !important; row-gap: .6rem !important; }
  .topbar > .who:first-child { align-self: center !important; }
  .topbar > .who:nth-child(2) { justify-self: end !important; align-self: center; display: flex; align-items: baseline; gap: .5rem; }
  .topbar .head-icons { justify-self: end; align-self: center; display: flex; gap: .5rem; }
  .topbar .wallet { justify-self: end !important; margin: 0 !important; }
  .doom-seal { top: 50% !important; }
}
@media (min-width: 1100px) {
  .topbar { grid-template-columns: auto 1fr auto calc(6rem + .5rem) !important; column-gap: .75rem !important; }
  .topbar > .who:nth-child(2) { justify-self: end !important; }
  .topbar .head-icons { justify-self: end !important; }
}
@media (min-width: 1100px) and (max-height: 860px) { .doom-seal { transform: translate(-50%, -50%) scale(.86) !important; } }
/* 채팅 독 · 우편 팝업은 언제나 떠 있는 창 (책 격자 안으로 끼어들지 않게) — 넓은 화면에서 펼친 채팅만 여백 칸 */
.game > #inbox, .game > #mailpop { position: fixed !important; }
@media (min-width: 1600px) and (min-height: 640px) { .game > #inbox.dock-open { position: relative !important; } }
@media (max-width: 760px) {
  .game > .panel, #dyn-panels > .panel { padding-left: .6rem !important; padding-right: .6rem !important; }
  .game { padding-left: .4rem !important; padding-right: .4rem !important; }
}
@media (max-width: 1099px) { .t-astro .star-map { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } }

/* ===== 접근성 · 테마 정리: 헤더는 어느 테마에서나 밤하늘 위 (글자가 바탕에 묻히지 않게) ===== */
html:not([data-theme^="tome"]) body { background: #06050d; }
html:not([data-theme^="tome"]) .sky { display: block !important; position: fixed; inset: 0; height: auto; z-index: 0; opacity: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 72% 12%, rgba(91, 62, 142, .35), transparent 70%), radial-gradient(ellipse 70% 45% at 50% 110%, rgba(200, 70, 42, .3), transparent 75%), linear-gradient(180deg, #05040c, #0b0a1e 45%, #1a0b18); }
.topbar { color: #f6e3a2; } .topbar .wallet dt { color: #c9b88e !important; }
/* 양피지가 아닌 테마(어둠 · 밝기 · 분홍 · 하늘 · 연두)에서는 시안 부품 바탕을 그 테마의 면 색으로 */
html:not([data-theme^="tome"]) :is(.t-card, .t-facts > div, .t-dseal, .t-acts > div, .t-list, .t-chip, .t-fold) { background: var(--panel-sunk) !important; color: var(--text); border-color: var(--line) !important; }
html:not([data-theme^="tome"]) :is(.t-h2, .t-facts b, .t-dseal b, .t-acts b) { color: var(--text) !important; }
html:not([data-theme^="tome"]) :is(.t-label, .t-facts span, .t-dseal .lb, .t-dseal .tm) { color: var(--text-2) !important; }
html:not([data-theme^="tome"]) .btn:not(.btn-primary):not(.t-gold) { color: var(--text); }
.t-tag.gd { color: #7a4e08; } html[data-theme="tome-abyss"] .t-tag.gd, html[data-theme="dark"] .t-tag.gd { color: #f0b964; }
/* 시계(종말 인장): 밤하늘 띠 전체(헤더 ~ 갈색 하위 메뉴 띠 위)의 세로 가운데 — 화면 위에 붙지 않게 */
@media (min-width: 1100px) { .topbar .doom-seal, .doom-seal { top: calc(var(--band-h) / 2) !important; } }

/* 글자 크기 작게 · 보통 · 크게: 넓은 화면의 화면 맞춤 글자 크기에도 같은 비율로 적용 */
html[data-font="s"] { --fs-k: .875; } html[data-font="m"] { --fs-k: 1; } html[data-font="l"] { --fs-k: 1.125; }

/* 홈 오른쪽 쪽도 왼쪽 쪽처럼 두 단 (재앙핵 · 광장 | 서신 · 랭킹), 맺음말은 아래 가운데 — 네 단이 같은 폭으로 정렬 */
.t-c3.t-lpair > .t-quote { grid-column: 1 / -1; }

/* 한눈에 찾기: 갈색 띠 오른쪽 끝에 현재 위치, 각 묶음의 바로가기는 또렷한 작은 단추 */
@media (min-width: 1100px) {
  .subnav[data-where]::after { content: '현재 위치  ·  ' attr(data-where); margin-left: auto; align-self: center; padding: .3rem 1rem; font-family: var(--f-title); font-size: .95rem; letter-spacing: .04em; color: var(--gold-2, #f6e3a2); white-space: pre; border: 1px solid rgba(216, 178, 90, .45); border-radius: 999px; background: rgba(0, 0, 0, .22); }
}
.t-h2 .more, .t-h2 > .more { font-size: .86rem !important; padding: .2rem .65rem !important; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--accent) 7%, transparent) !important; line-height: 1.3; }
.t-h2 .more:hover, .t-h2 > .more:hover { background: var(--accent) !important; color: var(--accent-ink, #fff) !important; }
/* 상점 · 목록형 화면: 한 쪽 안에서 카드 두 줄 — 같은 묶음은 한 쪽에, 한눈에 비교 */
@media (min-width: 1100px) {
  .tp > .shop-grid, .tp > .market-grid, .tp > .card-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; align-content: start; }
  .tp > .shop-grid > .shop-card { margin: 0 !important; }
}
/* 우편함 팝업은 펼친 채팅 위에 (겹칠 때 우편이 가려져 누를 수 없던 문제) */
.game > #mailpop { z-index: 60 !important; }

/* ===== 책등(가운데 메뉴) 다듬기: 얇은 가죽 책등 · 가는 금선 구분 · 작은 아이콘과 세로 글씨 · 선택 메뉴는 책갈피 끈 ===== */
@media (min-width: 1100px) {
  :root { --spine-w: 4.25rem !important; --gut: 5.75rem !important; }
  #main-nav { width: var(--spine-w); justify-self: center; padding: 0 !important; border: 0 !important; border-radius: 3px;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 18%, rgba(255, 255, 255, .05) 46%, transparent 54%, transparent 82%, rgba(0, 0, 0, .55)),
      linear-gradient(180deg, var(--leather), var(--leather-2)) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent), -6px 0 14px rgba(0, 0, 0, .35), 6px 0 14px rgba(0, 0, 0, .35) !important; }
  /* 위 · 아래 끝: 두꺼운 금띠 대신 가는 이중 금선 */
  #main-nav::before, #main-nav::after { content: '' !important; display: block; flex: none; height: 9px !important; border: 0 !important; border-image: none !important; margin: .55rem .55rem;
    background: linear-gradient(var(--gold), var(--gold)) top / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom / 100% 1px no-repeat !important; opacity: .7; }
  #main-nav .tab { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column !important; align-items: center; justify-content: center; gap: .55rem;
    padding: .5rem 0 !important; margin: 0 .3rem; border: 0 !important; border-image: none !important; border-radius: 2px !important; box-shadow: none !important;
    font-family: var(--f-title); font-size: .82rem !important; letter-spacing: .32em; color: color-mix(in srgb, var(--gold-2) 72%, transparent) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
    background: none !important; transition: color .2s, background-color .2s; }
  /* 메뉴 사이: 가운데 작은 마름모가 있는 가는 금선 */
  #main-nav .tab + .tab:not([hidden]) { border-top: 0 !important; }
  #main-nav .tab + .tab:not([hidden])::after { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 7px; transform: translateY(-50%); pointer-events: none; border: 0 !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 70%, transparent) 30%, transparent 44%, transparent 56%, color-mix(in srgb, var(--gold) 70%, transparent) 70%, transparent) center / 100% 1px no-repeat,
      linear-gradient(45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 7px 7px no-repeat; }
  #main-nav .tab::before { margin: 0 !important; width: 1.3rem !important; height: 1.3rem !important; opacity: .85; transition: transform .2s, opacity .2s; }
  #main-nav .tab:hover:not([aria-selected="true"]) { color: var(--gold-2) !important; background: rgba(255, 255, 255, .04) !important; }
  #main-nav .tab:hover::before { opacity: 1; transform: translateY(-1px); }
  /* 선택된 메뉴: 책등 위로 늘어진 책갈피 끈 (테마 색) + 양옆 금 실선 + 은은한 빛 */
  #main-nav .tab[aria-selected="true"] { color: #fff6df !important; margin: 0 .2rem; border-radius: 2px !important;
    background: radial-gradient(ellipse 80% 55% at 50% 45%, rgba(255, 200, 140, .22), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--spine-on, #7a1414) 88%, #fff 12%), var(--spine-on, #7a1414) 55%, color-mix(in srgb, var(--spine-on, #7a1414) 75%, #000 25%)) !important;
    box-shadow: inset 1px 0 0 var(--gold), inset -1px 0 0 var(--gold), inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .45) !important; }
  #main-nav .tab[aria-selected="true"]::before { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 220, 160, .8)); }
  #main-nav .tab[aria-selected="true"]::after { content: '' !important; position: absolute; left: 50%; right: auto !important; top: auto !important; bottom: -6px !important; width: 0; height: 0; transform: translateX(-50%); border: 0 !important; background: none !important;
    border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; border-top: 6px solid color-mix(in srgb, var(--spine-on, #7a1414) 75%, #000 25%) !important; z-index: 2; }
  #main-nav .tab .badge { position: absolute !important; top: .35rem !important; right: .2rem !important; margin: 0 !important; font-size: 11px !important; line-height: 14px; min-width: 14px; padding: 0 3px !important; letter-spacing: 0; text-align: center; border-radius: 7px !important;
    background: var(--gold-2) !important; color: #4a1018 !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); writing-mode: horizontal-tb; }
}
@media (min-width: 1100px) {
  /* 세로 글쓰기에서는 row 방향이 위→아래: 아이콘 위, 글씨 아래 */
  #main-nav .tab { flex-direction: row !important; }
}
/* 묶음 제목은 한 줄로 — 공간이 모자라면 라틴 부제가 먼저 줄어듦 */
.t-h2 { white-space: nowrap; flex-wrap: nowrap !important; }
.t-h2 .cz { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-h2 .more { flex: none; }
@media (min-width: 1100px) {
  #main-nav .tab + .tab:not([hidden])::after { height: 9px !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 75%, transparent) 25%, transparent 42%) left center / 100% 1px no-repeat,
      linear-gradient(270deg, transparent, color-mix(in srgb, var(--gold) 75%, transparent) 25%, transparent 42%) right center / 100% 1px no-repeat !important;
    -webkit-mask: none; }
  #main-nav .tab + .tab:not([hidden])::after { box-shadow: none; }
  #main-nav .tab + .tab:not([hidden]) > .tg-sep, #main-nav .tab + .tab:not([hidden]) { background-image: none; }
  #main-nav .tab + .tab:not([hidden]) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%23d8b25a'/%3E%3C/svg%3E") center top / 7px 7px no-repeat !important; }
}
@media (min-width: 1100px) {
  #main-nav .tab.tab[aria-selected="true"] {
    background: radial-gradient(ellipse 80% 55% at 50% 45%, rgba(255, 200, 140, .22), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--spine-on, #7a1414) 88%, #fff 12%), var(--spine-on, #7a1414) 55%, color-mix(in srgb, var(--spine-on, #7a1414) 75%, #000 25%)) !important; }
}
@media (min-width: 1100px) { #main-nav .tab.tab[aria-selected="true"] { background-position: 0 0 !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } }
@media (min-width: 1100px) { #main-nav .tab.tab.tab[aria-selected="true"]::after { height: 0 !important; top: auto !important; left: 50% !important; right: auto !important; bottom: -6px !important; transform: translateX(-50%) !important; background: none !important; border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; border-top: 6px solid color-mix(in srgb, var(--spine-on, #7a1414) 75%, #000 25%) !important; } }
/* 선택 메뉴 바로 아래 칸의 구분 마름모는 끈 끝에 가리지 않게 숨김 */
@media (min-width: 1100px) { #main-nav .tab[aria-selected="true"] + .tab:not([hidden]) { background: none !important; } }
/* 책등이 얇아진 만큼 쪽 안쪽 여백을 조금 더 — 책등 그늘에 단추가 닿지 않게 */
@media (min-width: 1100px) { .t-spread > .t-left, .tp-l { padding-right: .9rem !important; } .t-spread > .t-right, .tp-r { padding-left: .9rem !important; } }
/* 제목은 한 줄 유지, 자리가 모자라면 바로가기 단추가 다음 줄 오른쪽으로 (칸 폭을 넘지 않게) */
.t-h2 { flex-wrap: wrap !important; row-gap: .3rem; white-space: normal; }
.t-h2 .more { margin-left: auto; white-space: nowrap; }
.t-lpair > .t-col, .t-spread > .t-col { min-width: 0; }

/* ===== 글꼴 정리: 제목은 굵고 큰 명조(Noto Serif KR 900), 본문은 또렷한 명조(500), 라틴 부제는 Cinzel ===== */
:root, html[data-theme] { --f-title: "Noto Serif KR", "Nanum Myeongjo", serif; --f-body: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo", serif; }
body, .game, .panel, .modal, .inbox, button, input, select, textarea { font-family: var(--f-body); }
body { font-weight: 500; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
b, strong, th { font-weight: 700; }
/* 제목: 크고 굵게 */
.t-h2, .section-title, .panel h2, .modal h2 { font-family: var(--f-title) !important; font-weight: 900 !important; letter-spacing: -.01em; }
.t-h2 { font-size: 1.42rem !important; line-height: 1.25; }
.panel-box.tb-on > .tb-head .section-title, .section-title { font-size: 1.32rem !important; }
.panel h3, .modal h3, .t-card h3, .eq-name, .pcard-name, .shop-card b:first-child { font-family: var(--f-title); font-weight: 700; }
.t-h2 .cz, .section-title[data-lat]::after { font-weight: 400; font-size: .72rem !important; letter-spacing: .2em; }
/* 상단 띠 · 책등 · 하위 메뉴도 같은 글꼴로 굵게 */
.logo, .logo-small { font-family: var(--f-title) !important; font-weight: 900 !important; }
.subnav .subtab { font-family: var(--f-title) !important; font-weight: 700 !important; font-size: 1rem !important; }
#main-nav .tab { font-family: var(--f-title) !important; font-weight: 700 !important; font-size: .9rem !important; }
.topbar .who b, .topbar .who strong, .topbar .who .name { font-family: var(--f-title); font-weight: 900; }
/* 가장 작은 글씨도 읽히도록 최소 크기 */
.small, small, .muted.small, .t-label, .hint, .note, .meta, .chip, .tag, .t-tag, .rate-chip, .grade { font-size: max(.82rem, 12.5px) !important; }
.btn { font-weight: 700; }
.btn-sm { font-size: max(.85rem, 13px) !important; }
/* 큰 글씨에서도 낱말이 중간에서 끊기지 않게: 지역 목록은 칸 폭에 맞춰 1~2줄, 이름 · 상태는 한 줄 */
.home-sw .t-card > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)) !important; }
.t-region { gap: .6rem; } @media (min-width: 761px) { .t-region > span { white-space: nowrap; } }
.home-doom .doom-label, .t-label.doom-label { white-space: nowrap; }
.t-facts span, .t-facts b, .t-chip, .t-tag, .chip, .btn { word-break: keep-all; }
.panel, .modal, .inbox { word-break: keep-all; overflow-wrap: anywhere; }
.home-doom { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .1rem; text-align: left; }
.home-doom #hp-doom { white-space: nowrap; }
.home-doom > :last-child { flex: 1 1 100%; }
@media (max-width: 760px) { .subnav .subtab { font-size: .86rem !important; letter-spacing: -.02em; padding-inline: .3rem !important; text-overflow: clip !important; white-space: nowrap; } }
/* 펼친 채팅 (1100~1599px): 헤더를 덮지 않고 책 윗선부터 아래 여백까지, 오른쪽에 떠 있는 양피지 패널 */
@media (min-width: 1100px) and (max-width: 1599px) {
  .game > #inbox.chat-dock.dock-open { position: fixed !important; top: calc(var(--band-h) + 3.25rem) !important; bottom: 1.5rem !important; right: 1.5rem !important; left: auto !important;
    width: min(24rem, 38vw) !important; height: auto !important; max-height: none !important; margin: 0 !important; z-index: 40 !important;
    border: 1px solid var(--gold-3) !important; border-radius: 6px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4) !important;
    background: var(--page-tex, none), linear-gradient(180deg, var(--panel, #f6ecd6), var(--page, #efe2c2)) !important; display: flex !important; flex-direction: column; }
  .game > #inbox.chat-dock.dock-open .inbox-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .game > #inbox.chat-dock.dock-open .ib-thread-box { flex: 1; min-height: 0; height: auto !important; overflow: auto; }
}
@media (min-width: 1100px) and (max-width: 1599px) and (max-height: 700px) { .game > #inbox.chat-dock.dock-open { top: 1rem !important; } }
/* 1600px 이상에서 채팅을 여백에 펼치면 오른쪽 쪽이 좁아지므로, 오른쪽 쪽 묶음은 한 단으로 */
@media (min-width: 1600px) { .game:has(#inbox.dock-open) .t-c3.t-lpair { grid-template-columns: minmax(0, 1fr) !important; } }
/* 그림 원판(몬스터 · NPC · 직업 · 아이템)은 전장 밖에서는 프로필 사진처럼 작게 — 이름 옆에 */
.tg-med:not(.tome-field .tg-med):not(.tf-mon .tg-med) { width: 2.25rem !important; height: 2.25rem !important; min-width: 0 !important; min-height: 0 !important; max-width: 2.25rem !important; max-height: 2.25rem !important;
  flex: none !important; vertical-align: middle; margin: 0 .5rem 0 0 !important; padding: 0 !important; font-size: 1rem !important; border: 1px solid var(--gold-3) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important; }
.tg-med:not(.tome-field .tg-med):not(.tf-mon .tg-med) > .tg { width: 62% !important; height: 62% !important; }
.sb-who { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
/* 프로필 사진 자르기: 원 밖은 어둡게, 원 테두리는 금선 — 원 안이 실제 프로필로 보이는 부분 */
.crop-stage { position: relative; width: min(300px, 100%); aspect-ratio: 1; border-radius: .5rem; overflow: hidden; background: #1a1012; }
.crop-stage #crop-canvas { width: 100% !important; height: 100% !important; display: block; border: 0 !important; border-radius: 0 !important; cursor: grab; touch-action: none; }
.crop-stage #crop-canvas.dragging { cursor: grabbing; }
.crop-stage #crop-canvas:focus-visible { outline: none; }
.crop-stage:has(#crop-canvas:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.crop-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent calc(50% - 1px), rgba(216, 178, 90, .95) calc(50% - 1px), rgba(216, 178, 90, .95) 50%, rgba(10, 4, 6, .62) calc(50% + .5px)); }
.crop-zoom-row { display: flex; align-items: center; gap: .75rem; width: min(300px, 100%); }
.crop-zoom-row input { flex: 1; accent-color: var(--accent); }
.crop-stage::after { background: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 1.5px), rgba(216, 178, 90, .95) calc(100% - 1.5px), rgba(216, 178, 90, .95) 100%, rgba(10, 4, 6, .62) 100%) !important; }

/* ===== 크기 · 여백 재정리: 자주 볼 필요 없는 것은 작게, 본문은 읽기 좋은 크기, 쪽과 상자에 숨 쉴 여백 ===== */
.t-h2 { font-size: 1.28rem !important; margin-bottom: .75rem !important; }
.section-title, .panel-box.tb-on > .tb-head .section-title { font-size: 1.18rem !important; }
.t-h2 .cz, .section-title[data-lat]::after { font-size: .64rem !important; letter-spacing: .22em; opacity: .85; }
.t-h2 .more { font-size: .74rem !important; padding: .14rem .6rem !important; }
@media (min-width: 1100px) {
  /* 헤더: 우편함 · 설정 · 재화는 한 단계 작게 */
  .topbar .head-icons .icon-btn, .topbar .icon-btn { width: 2.35rem !important; height: 2.35rem !important; min-width: 0 !important; }
  .topbar .icon-btn .tg, .topbar .icon-btn svg { width: 1rem; height: 1rem; }
  .topbar .wallet { gap: .45rem !important; }
  .topbar .wallet > div { padding: .25rem .7rem .25rem .55rem !important; min-height: 0 !important; border-radius: 999px; }
  .topbar .wallet dt { font-size: .62rem !important; }
  .topbar .wallet dd { font-size: .92rem !important; }
  .topbar .wallet > div::before { width: 1.1rem !important; height: 1.1rem !important; }
  .topbar > .who:nth-child(2) b, .topbar > .who:nth-child(2) .name { font-size: 1.15rem !important; }
  /* 현재 위치: 작은 안내 글씨로 */
  .subnav[data-where]::after { font-size: .74rem !important; padding: .2rem .8rem !important; letter-spacing: .03em; opacity: .9; }
  .subnav .subtab { font-size: .92rem !important; }
  /* 쪽 안쪽 여백 · 묶음 사이 여백 */
  .tp, .t-spread > .t-col, .t-spread > .t-left { padding-top: 1.75rem !important; padding-bottom: 2rem !important; }
  .t-lpair > .t-col { padding-top: 0 !important; padding-bottom: 0 !important; }
  .tp-l, .t-spread > .t-left { padding-left: 2.5rem !important; padding-right: 1.6rem !important; }
  .tp-r, .t-spread > .t-right { padding-right: 2.5rem !important; padding-left: 1.6rem !important; }
  .t-lpair { column-gap: 2.25rem !important; }
}
.panel-box, .t-card { padding: 1.05rem 1.25rem 1.15rem !important; }
.tp > * + *, .t-col > * + *, .panel > .grid > * + * { margin-top: 1.6rem; }
.panel-box > * + *, .t-card > * + * { margin-top: .6rem; }
.panel p, .panel li, .panel .small, .t-card p { line-height: 1.65; }
/* 한 줄을 다 차지해 늘어나던 입력칸 · 선택칸: 알맞은 폭으로, 버튼은 옆에 */
.panel .input:not(textarea), .panel select.input, .panel select:not(.input) { width: auto; max-width: min(100%, 24rem); }
.panel .actions:has(> .input) { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.panel .actions > .input { flex: 1 1 14rem; max-width: 22rem; margin: 0; }
#craft-q { flex: 1 1 16rem; max-width: 24rem; }
.craft-search { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-bottom: .25rem; }
.craft-groups { display: flex; flex-wrap: wrap; gap: .3rem; }
.craft-groups .seg-btn[aria-pressed="true"] { background: var(--accent) !important; color: var(--accent-ink, #fff) !important; border-color: var(--accent) !important; }
/* 장착 스킬 칸: 같은 높이, 「빼기」는 모두 아래쪽 같은 줄에 */
.skill-slots, .slot-grid { align-items: stretch !important; }
.skill-slot { display: flex !important; flex-direction: column; gap: .3rem; padding: .85rem .95rem !important; }
.skill-slot > .btn, .skill-slot > .actions, .skill-slot > button:last-child { margin-top: auto !important; align-self: stretch; }
/* 원정의 장: 바깥 빨간 세로줄 대신 상자 안 표시 · 「방금 돌아온 원정」은 상자 아래 정돈된 한 줄 */
.home-run.is-live { border-left: 0 !important; }
.home-run.is-live .t-card { box-shadow: inset 3px 0 0 var(--accent); }
.home-run .t-note { margin: .6rem 0 0 !important; padding: .55rem .8rem; font-style: normal; font-size: .8rem; line-height: 1.55; border-left: 2px solid var(--gold-3); background: rgba(138, 106, 38, .06); border-radius: 0 4px 4px 0; }
/* 상자 안 빈 안내 글은 가운데 쪽으로 차분하게 */
.panel-box > p.muted:only-of-type { margin: .25rem 0; }
/* 카드 목록(상점 · 제작 · 거래소): 쪽 폭에 맞춰 여러 줄 — 넓은 카드 한 줄로 늘어나지 않게 */
@media (min-width: 1100px) {
  .tp .shop-grid, .tp .market-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)) !important; gap: .85rem !important; align-items: stretch; }
  .tp .shop-grid > .shop-card { margin: 0 !important; display: flex; flex-direction: column; gap: .35rem; }
  .tp .shop-grid > .shop-card > .actions:last-child, .tp .shop-grid > .shop-card > .row-between:last-child { margin-top: auto !important; padding-top: .35rem; }
}
/* 홈 오른쪽 쪽: 묶음 사이 간격을 모두 같게 (단이 하나일 때도 두 단일 때도) */
.t-lpair { row-gap: 1.6rem !important; }
.t-lpair > * { margin-top: 0 !important; }
.t-lpair > .t-col > :last-child { margin-bottom: 0 !important; }
.t-lpair > .t-col > * + * { margin-top: 1.6rem !important; }
.t-lpair > * { margin-bottom: 0 !important; }

/* ===================================================================
   색감 통일: 화려하지 않고 차분한 빛바랜 색 — 모든 마법서 테마 공통
   종이: 오래된 양피지 (섬유 · 얼룩 · 바랜 가장자리) / 책등 · 표지: 가죽 결 · 바느질 · 눌린 테두리
   =================================================================== */
:root {
  --leather-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.9 .62'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 .78'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3Crect width='220' height='220' filter='url(%23l)' opacity='.75'/%3E%3C/svg%3E");
  --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .07' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .14 0 0 0 -1.4 .72'/%3E%3C/filter%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .34 0 0 0 0 .12 0 0 0 -2.4 1.05'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23s)' opacity='.32'/%3E%3Crect width='480' height='480' filter='url(%23f)' opacity='.13'/%3E%3C/svg%3E");
}
/* 차분한 색 (모든 밝은 마법서 테마) */
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) {
  --text: #3a2a1d; --text-2: #5a4632; --text-3: #7a6448;
  --ok: #56703f; --warn: #8a6a24; --bad: #8c3a32; --info: #5a4632; --focus: #6a5a88;
  --g0: #6a6052; --g1: #567040; --g2: #46638a; --g3: #6c5688; --g4: #9a6a26;
  --hp: #5f8558; --hp-enemy: #a4523e; --live-bg: #8c3a32; --npc: #3f6e66;
  --line: rgba(110, 80, 40, .32); --line-soft: rgba(110, 80, 40, .18);
}
html[data-theme="tome"] { --accent: #7a302b; --accent-hover: #8a3a33; --spine-on: #6e2622; }
html[data-theme="tome-night"] { --accent: #3a5276; --accent-hover: #44608a; --spine-on: #2c3f66; }
html[data-theme="tome-forest"] { --accent: #405e47; --accent-hover: #4a6c52; --spine-on: #34573f; }
html[data-theme="tome-ash"] { --accent: #6a4136; --accent-hover: #7a4b3f; --spine-on: #573229; }
html[data-theme="tome-rose"] { --accent: #84485a; --accent-hover: #945466; --spine-on: #74394c; }
html[data-theme="tome-amethyst"] { --accent: #5c4b80; --accent-hover: #68578e; --spine-on: #4e3e72; }
html[data-theme="tome-sea"] { --accent: #315f63; --accent-hover: #3a6c70; --spine-on: #285458; }
html[data-theme="tome-ember"] { --accent: #84502a; --accent-hover: #945c33; --spine-on: #74431f; }
html[data-theme="tome-frost"] { --accent: #42607a; --accent-hover: #4c6c88; --spine-on: #36526c; }
html[data-theme="tome-sun"] { --accent: #7a6024; --accent-hover: #886c2c; --spine-on: #6a5220; }
html[data-theme^="tome"] { --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); --gold: #c9a865; --gold-2: #ecdcae; }
html[data-theme="tome-abyss"] { --g1: #8fb07a; --g2: #8eaacb; --g3: #b8a2d4; --g4: #d6a85c; --ok: #9cbf8a; --bad: #d28a78; }

/* ---- 양피지 쪽: 섬유 · 얼룩 · 바랜 가장자리 ---- */
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .game > .panel, html[data-theme^="tome"]:not([data-theme="tome-abyss"]) #dyn-panels > .panel {
  background:
    radial-gradient(ellipse 75% 85% at 50% 50%, transparent 58%, rgba(105, 70, 28, .26) 100%),
    radial-gradient(circle at 12% 18%, rgba(160, 115, 50, .10), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(150, 100, 40, .09), transparent 30%),
    var(--paper-fiber), var(--page-tex), var(--page) !important;
  background-blend-mode: normal, normal, normal, multiply, multiply, normal !important; }
/* 상자는 하얀 판이 아니라 종이 위에 덧댄 얇은 종이 */
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) :is(.panel-box, .t-card, .shop-card, .skill-slot, .t-list, .t-facts > div, .t-acts > div, .item, .sb, .nt-box) {
  background: linear-gradient(180deg, rgba(255, 249, 232, .38), rgba(240, 226, 196, .22)) !important;
  border-color: rgba(110, 80, 40, .28) !important; box-shadow: inset 0 1px 0 rgba(255, 252, 240, .45), 0 1px 2px rgba(80, 50, 20, .08) !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .t-card.blood { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, rgba(255, 249, 232, .3)), rgba(240, 226, 196, .18)) !important; border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; }
/* 입력칸 · 표 · 막대도 같은 종이 톤 */
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel :is(.input, select, textarea) { background: rgba(255, 250, 236, .55) !important; border-color: rgba(110, 80, 40, .35) !important; color: var(--text) !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel .bar, html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .t-gauge { background: rgba(110, 80, 40, .14) !important; }
/* 버튼: 차분한 잉크색 · 금박은 은은하게 */
html[data-theme^="tome"] .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff 18%), var(--accent)) !important; border-color: color-mix(in srgb, var(--accent) 70%, #000 30%) !important; color: #f8efdc !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 3px rgba(40, 20, 10, .25) !important; text-shadow: none !important; }
html[data-theme^="tome"] .btn-primary:hover:not(:disabled) { background: var(--accent-hover) !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .btn:not(.btn-primary):not(.t-gold) { background: rgba(255, 250, 236, .5) !important; border-color: rgba(110, 80, 40, .38) !important; color: var(--text) !important; box-shadow: none !important; }
html[data-theme^="tome"] .t-h2 .more { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; background: transparent !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel a, html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel .link { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) :is(.t-tag, .chip, .kind) { filter: saturate(.75); }

/* ---- 가죽: 책등 · 갈색 띠(표지 윗단) · 책 가장자리 ---- */
@media (min-width: 1100px) {
  #main-nav { background:
      linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 16%, rgba(255, 240, 210, .06) 46%, transparent 56%, transparent 84%, rgba(0, 0, 0, .55)),
      var(--leather-tex), linear-gradient(180deg, var(--leather), var(--leather-2)) !important;
    background-blend-mode: normal, multiply, normal !important; }
  /* 바느질 선 */
  #main-nav { outline: 1px dashed color-mix(in srgb, var(--gold) 38%, transparent); outline-offset: -5px; }
  .subnav { background: var(--leather-tex), linear-gradient(180deg, var(--leather), var(--leather-2)) !important; background-blend-mode: multiply, normal !important;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold) 45%, transparent), inset 0 1px 0 rgba(255, 240, 210, .08) !important; position: relative; }
  .subnav::before { content: ''; position: absolute; left: .6rem; right: .6rem; top: .35rem; height: 0; border-top: 1px dashed color-mix(in srgb, var(--gold) 35%, transparent); pointer-events: none; }
  /* 책 표지: 쪽 둘레에 가죽 테두리가 살짝 드러남 */
  .game > .panel:not([hidden]), #dyn-panels > .panel:not([hidden]) { box-shadow: 0 0 0 7px var(--leather-2), 0 0 0 8px color-mix(in srgb, var(--gold) 30%, transparent), 0 18px 40px rgba(0, 0, 0, .55) !important; }
  .subnav .subtab { background: linear-gradient(180deg, #e8d9b4, #cdb98c) !important; color: #3a2a1d !important; border: 1px solid rgba(60, 35, 15, .5) !important; box-shadow: inset 0 1px 0 rgba(255, 250, 230, .5) !important; }
  .subnav .subtab[aria-selected="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff 15%), var(--accent)) !important; color: #f8efdc !important; border-color: color-mix(in srgb, var(--gold) 60%, transparent) !important; }
  .subnav[data-where]::after { color: color-mix(in srgb, var(--gold-2) 85%, transparent) !important; border-color: color-mix(in srgb, var(--gold) 35%, transparent) !important; background: rgba(0, 0, 0, .18) !important; }
}
/* 휴대폰: 아래 메뉴 · 하위 메뉴도 가죽 결 */
@media (max-width: 760px) {
  #main-nav { background: var(--leather-tex), linear-gradient(0deg, var(--leather-2), var(--leather)) !important; background-blend-mode: multiply, normal !important; }
  .subnav .subtab[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 80%, transparent) !important; }
}
/* 헤더 재화 · 아이콘도 차분하게 */
.topbar .wallet > div { background: var(--leather-tex), linear-gradient(180deg, color-mix(in srgb, var(--leather) 85%, #000), var(--leather-2)) !important; background-blend-mode: multiply, normal !important; border-color: color-mix(in srgb, var(--gold) 45%, transparent) !important; }
/* 묶음 제목 줄은 종이 위 글씨 그대로 (상자 바탕 없음) */
html[data-theme^="tome"] .panel-box.tb-on > .tb-head, html[data-theme^="tome"] .t-h2 { background: none !important; box-shadow: none !important; border: 0 !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel-box.tb-on { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel-box.tb-on > :not(.tb-head) { }

/* ===== 20차: 캐릭터 한 화면 (항목 카드) · 도감 ===== */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: .75rem; }
.hub-card { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .85rem .95rem; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 249, 232, .42), rgba(240, 226, 196, .24)); border: 1px solid rgba(110, 80, 40, .3); border-radius: 4px; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, .5), 0 1px 2px rgba(80, 50, 20, .08); transition: transform .15s, box-shadow .15s, border-color .15s; font: inherit; }
.hub-card:hover, .hub-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 4px 12px rgba(80, 50, 20, .16); transform: translateY(-1px); }
.hub-glyph { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem; color: var(--gold-2, #ecdcae);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--leather) 70%, #fff 10%), var(--leather-2)); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.hub-glyph .tg { width: 1.2rem; height: 1.2rem; }
.hub-txt { display: grid; min-width: 0; line-height: 1.35; }
.hub-txt b { font-family: var(--f-title); font-weight: 900; font-size: 1.06rem; }
.hub-txt .cz { font-family: var(--f-latin); font-size: .58rem; letter-spacing: .22em; color: var(--text-3); }
.hub-line { font-size: .86rem; color: var(--text); margin-top: .15rem; }
.hub-sub { font-size: .76rem; color: var(--text-3); }
.hub-go { font-size: 1.4rem; color: var(--gold-3); }
.hub-me-head { display: flex; align-items: center; gap: 1rem; }
.hub-name { font-family: var(--f-title); font-weight: 900; font-size: 1.35rem; }
.hub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; margin: 1rem 0 0; }
.hub-stats > div { padding: .45rem .6rem; border: 1px solid rgba(110, 80, 40, .2); border-radius: 3px; background: rgba(255, 250, 236, .3); }
.hub-stats dt { font-size: .74rem; color: var(--text-3); } .hub-stats dd { margin: 0; font-weight: 700; font-size: 1.02rem; }
.hub-note { margin-top: 1rem; }
.subnav .sub-back { font-weight: 900 !important; }
/* 도감 */
.cx-score { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: flex-end; margin-bottom: .6rem; }
.cx-score > div { display: grid; gap: .1rem; } .cx-big { font-family: var(--f-title); font-size: 2rem; line-height: 1; }
.cx-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .9rem 0 .4rem; }
.cx-sum > div { padding: .5rem .7rem; border: 1px solid rgba(110, 80, 40, .2); border-radius: 3px; } .cx-sum dt { font-size: .74rem; color: var(--text-3); } .cx-sum dd { margin: 0; font-weight: 700; }
.cx-filters { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: .9rem; }
.cx-filters #cx-q { flex: 1 1 10rem; max-width: 16rem; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .55rem; }
.cx-cell { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid rgba(110, 80, 40, .25); border-radius: 3px; background: rgba(255, 250, 236, .32); }
.cx-cell b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pic { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-3); background: radial-gradient(circle at 35% 30%, #3b3550, #15111f); color: #ecdcae; font-size: 1rem; }
.cx-unk { opacity: .62; border-style: dashed; background: transparent; } .cx-unk .cx-pic { background: rgba(110, 80, 40, .12); color: var(--text-3); border-style: dashed; font-family: var(--f-title); }
.cx-pts { font-size: .78rem; color: var(--text-3); white-space: nowrap; } .cx-pts.got { color: var(--ok); font-weight: 700; }
.cx-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .9rem; }
@media (max-width: 760px) { .hub-stats, .cx-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== 20차: 상점 › 뽑기 펼침면 (시안 그대로) ===== */
.t-h2 .more-note { border: 0 !important; background: none !important; padding: 0 !important; color: var(--accent) !important; cursor: default; font-family: var(--f-body); }
.wish-box { position: relative; overflow: hidden; border: 1px solid #6a5426; border-radius: 3px; padding: 1.6rem 1rem 0; text-align: center; color: #f2e6c4;
  background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(60, 70, 140, .55), transparent 70%), linear-gradient(180deg, #1b1934, #121027 60%, #0d0b1d); box-shadow: inset 0 0 0 1px rgba(216, 178, 90, .25), inset 0 0 40px rgba(0, 0, 0, .6); }
.wish-title { font-family: var(--f-title); font-weight: 900; font-size: 1.45rem; color: #f3dfa0; letter-spacing: .02em; }
.wish-sub { font-size: .76rem; color: #b9ae94; margin-top: .3rem; }
.wish-meteor { position: absolute; height: 1.5px; width: 7rem; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85)); transform: rotate(-28deg); border-radius: 2px; pointer-events: none; }
.wish-meteor::after { content: ''; position: absolute; right: -2px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
.wish-meteor.m1 { left: 12%; top: 34%; } .wish-meteor.m2 { right: 6%; top: 18%; width: 6rem; } .wish-meteor.m3 { right: 4%; top: 58%; width: 5rem; }
.wish-ring { position: relative; width: 11.5rem; height: 11.5rem; margin: 1.1rem auto .9rem; border-radius: 50%; border: 2px solid #b8913e; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(120, 140, 230, .4), rgba(40, 40, 90, .25) 60%, transparent 70%); box-shadow: 0 0 30px rgba(120, 140, 255, .25), inset 0 0 25px rgba(120, 140, 255, .3); }
.wish-ring-in { position: absolute; inset: 1.1rem; border-radius: 50%; border: 1.5px dashed rgba(216, 178, 90, .7); }
.wish-star { width: 6.4rem; height: 6.4rem; position: relative; filter: drop-shadow(0 0 10px rgba(220, 230, 255, .9)); }
.wish-btns { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.wish-btns .btn { min-width: 9.5rem; padding: .55rem 1.2rem !important; font-family: var(--f-title); font-weight: 700; font-size: .9rem !important; border-radius: 3px !important; }
.wish-gold { background: linear-gradient(180deg, #f2df9e, #d1a94e) !important; color: #3a2508 !important; border: 1px solid #8a6420 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .45) !important; }
.wish-red { background: linear-gradient(180deg, #b23a30, #7c1d18) !important; color: #f8e8cc !important; border: 1px solid #4a0d0a !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 6px rgba(0, 0, 0, .45) !important; }
.wish-off { color: #e8b0a0; font-size: .85rem; margin-bottom: 1rem; }
.wish-rates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: 0 -.2rem; padding: 0 .2rem .85rem; }
.wish-rates > span { font-size: .72rem; color: #cfc4a8; padding-top: .45rem; border-top: 2px solid var(--c); white-space: nowrap; }
.rite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rite-card { position: relative; padding: .8rem .95rem .85rem; border: 1px solid rgba(110, 80, 40, .32); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 249, 232, .5), rgba(240, 226, 196, .3)); box-shadow: inset 0 1px 0 rgba(255, 252, 240, .5); min-height: 6.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.rite-name { font-family: var(--f-title); font-weight: 900; font-size: 1.02rem; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.rite-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rite-sub { font-size: .76rem; color: var(--text-3); line-height: 1.5; }
.rite-open { margin-top: auto !important; padding: .2rem .8rem !important; }
.rite-last { background: linear-gradient(180deg, rgba(196, 110, 100, .16), rgba(196, 110, 100, .08)) !important; border-color: rgba(150, 60, 50, .4) !important; }
.rite-last b { font-family: var(--f-title); font-weight: 900; color: #8c3a32; }
.ledger { margin-bottom: 1.4rem; }
.ledger-row { display: grid; grid-template-columns: minmax(7rem, 1.1fr) minmax(0, 1.6fr) auto auto; gap: .8rem; align-items: center; padding: .5rem .2rem; border-bottom: 1px dotted rgba(110, 80, 40, .4); }
.ledger-row > b { font-family: var(--f-title); font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-mid { font-size: .78rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-num { font-variant-numeric: tabular-nums; font-size: .88rem; text-align: right; min-width: 4.5rem; }
.ledger-row .btn { padding: .2rem .75rem !important; }
.ledger-note { font-size: .74rem; color: var(--text-3); padding: .45rem .2rem; }
.ledger-empty { padding: .6rem .2rem; }
.ledger-foot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .6rem 0 0; }
.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.fc-card { padding: .85rem .95rem; border: 1px solid rgba(110, 80, 40, .32); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 249, 232, .5), rgba(240, 226, 196, .3)); display: flex; flex-direction: column; gap: .35rem; }
.fc-card .t-h2 { font-size: 1.02rem !important; margin: 0 0 .1rem !important; }
.fc-card .btn { align-self: flex-start; margin-top: .35rem; }
.fc-item { font-size: .9rem; }
@media (max-width: 760px) { .wish-rates { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledger-row { grid-template-columns: minmax(0, 1fr) auto auto; } .ledger-row .lg-mid { grid-column: 1 / -1; grid-row: 2; } .fc-grid, .rite-grid { grid-template-columns: 1fr; } }
/* 뽑기 펼침면: 한 화면에 들어오게 촘촘히 (시안 비율) */
.t-h2 .more-link { border: 0 !important; background: none !important; padding: 0 !important; color: var(--accent) !important; font-family: var(--f-body); font-size: .76rem !important; }
.t-h2 .more-link:hover { text-decoration: underline; text-underline-offset: 3px; background: none !important; color: var(--accent-hover) !important; }
@media (min-width: 1100px) {
  .gacha-spread > .t-col { padding-top: 1.2rem !important; padding-bottom: 1rem !important; }
  .gacha-spread .t-h2 { margin-bottom: .55rem !important; }
  .gacha-spread .t-col > * + * { margin-top: 1rem !important; }
}
.wish-box { padding-top: 1.05rem; }
.wish-title { font-size: 1.3rem; }
.wish-ring { width: 8.8rem; height: 8.8rem; margin: .8rem auto .75rem; }
.wish-ring-in { inset: .8rem; }
.wish-star { width: 5rem; height: 5rem; }
.wish-btns { margin-bottom: .85rem; }
.wish-rates { padding-bottom: .7rem; }
.rite-card { min-height: 0; padding: .65rem .85rem .7rem; }
.rite-grid { gap: .65rem; }
.fc-card { padding: .7rem .85rem; }
.ledger { margin-bottom: 1rem; }
.ledger-row { padding: .38rem .2rem; }
/* 시안처럼 비활성이어도 색은 유지 (흐리게만) */
.wish-btns .btn:disabled { opacity: .55; filter: saturate(.8); cursor: not-allowed; }
.wish-gold:disabled { background: linear-gradient(180deg, #f2df9e, #d1a94e) !important; color: #3a2508 !important; }
.wish-red:disabled { background: linear-gradient(180deg, #b23a30, #7c1d18) !important; color: #f8e8cc !important; }
html[data-theme] .wish-box .btn.wish-gold:not(#_) { background: linear-gradient(180deg, #f2df9e, #d1a94e) !important; color: #3a2508 !important; border: 1px solid #8a6420 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .45) !important; }
html[data-theme] .wish-box .btn.wish-red:not(#_) { background: linear-gradient(180deg, #b23a30, #7c1d18) !important; color: #f8e8cc !important; border: 1px solid #4a0d0a !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 6px rgba(0, 0, 0, .45) !important; }
html[data-theme] .wish-box .btn.wish-gold:hover:not(:disabled) { filter: brightness(1.06); } html[data-theme] .wish-box .btn.wish-red:hover:not(:disabled) { filter: brightness(1.12); }
.hub-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; padding: .28rem 0; border-bottom: 1px dotted rgba(110, 80, 40, .28); }
.hub-row:last-child { border-bottom: 0; } .hub-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.hub-sep { height: .5rem; }
.hub-eq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.hub-eq-col .hub-row { grid-template-columns: 3.6rem minmax(0, 1fr); } .hub-eq-col .hub-row > :nth-child(3) { display: none; }
@media (max-width: 1099px) { .hub-eq { grid-template-columns: 1fr; } }
.hub-eq-col { padding: .55rem .7rem !important; } .hub-eq-col .hub-row { padding: .18rem 0; font-size: .86rem; }
.jt-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.jt-branch { display: grid; gap: .5rem; padding: .55rem; border: 1px dashed rgba(110, 80, 40, .35); border-radius: 4px; }
.jt-leaves { display: grid; gap: .5rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.jt-root > *, .jt-branch .job-card, .jt-leaves .job-card { margin: 0 !important; }
@media (max-width: 760px) { .jt-branches { grid-template-columns: 1fr; } }
.jt-branches { grid-template-columns: 1fr !important; }
.jt-leaves { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; border-left: 0; }
.jt-branch .job-card { font-size: .92em; }
@media (max-width: 760px) { .jt-leaves { grid-template-columns: 1fr; } }
.jobs-spread .job-card { padding: .55rem .75rem !important; line-height: 1.5; }
.jobs-spread .job-card > * { margin-top: .12rem !important; margin-bottom: 0 !important; }
.jobs-spread .job-card p, .jobs-spread .job-card li { font-size: .82rem; }
.jobs-spread .t-col > * + * { margin-top: .9rem !important; }
.jobs-spread .jt-branch { padding: .45rem; gap: .4rem; } .jobs-spread .jt-leaves { gap: .4rem; }
.tp-cont-h { font-family: var(--f-title); font-weight: 900; font-size: 1.05rem; color: var(--text); margin-bottom: .6rem; }
/* 넓은 쪽의 카드 목록은 세 줄 (상점 · 칭호 · 도감 · 제작) */
@media (min-width: 1600px) {
  .tp .shop-grid, .tp .market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)) !important; }
  #tab-titles .tp :is(.grid, .title-grid, .shop-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1600px) { .tp .cx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) {
  .panel .tp .shop-grid, .panel .tp .market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.4rem), 1fr)) !important; gap: .7rem !important; }
  .panel .tp .shop-grid > .shop-card { padding: .7rem .8rem !important; font-size: .92em; }
}

.topbar .conn, .topbar .world-chip, .topbar .who .conn-txt { white-space: nowrap; }
@media (max-width: 760px) { .topbar .conn { font-size: .78rem; } }
.cx-score > div > b + .muted { margin-left: .25rem; } .cx-score > div:first-child { display: block; } .cx-score > div:first-child .t-label { display: block; }
/* 홈 「종말 기록」 지역은 두 줄 · 캐릭터 능력치는 두 줄 · 별자리 지도는 쪽 높이에 맞춤 */
.home-sw .t-card > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: .9rem !important; }
@media (max-width: 420px) { .home-sw .t-card > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } .topbar .conn { white-space: normal; } }
.home-sw .t-region { font-size: .8rem; }
@media (min-width: 1100px) {
  #tab-char .stat-table.stat-big { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr) auto); column-gap: 1.2rem; row-gap: .2rem; align-items: baseline; }
  #tab-char .stat-table.stat-big dd { margin: 0; text-align: right; }
  .t-left .t-astro { max-height: calc(100% - .5rem); } .t-left .t-astro svg, .t-left .t-astro .star-map { max-height: 30rem; width: auto !important; margin-inline: auto; display: block; }
}
@media (min-width: 1100px) {
  .tp, .t-spread > .t-col, .t-spread > .t-left, .t-spread > .t-right { padding-top: 1.3rem !important; padding-bottom: 1rem !important; }
  .tp > * + *, .t-col > * + * { margin-top: 1.15rem; }
  .t-lpair > .t-col > * + * { margin-top: 1.15rem !important; } .t-lpair { row-gap: 1.15rem !important; }
  .t-h2 { margin-bottom: .55rem !important; }
}
@media (min-width: 1600px) { .tp .skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .6rem !important; } .tp .skill-grid > * { font-size: .9em; } }
.cx-cell .muted.small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-cell { padding: .45rem .6rem; }
@media (min-width: 1100px) { .tp .bd-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)) !important; } }

/* ===== 20차: 길 안내형 튜토리얼 (비추기 · 말풍선) ===== */
#tour { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
#tour.tour-center::before { content: ''; position: fixed; inset: 0; background: rgba(8, 4, 10, .55); }
.tour-hole { position: fixed; border: 2px solid #f2d27a; box-shadow: 0 0 0 9999px rgba(8, 4, 10, .58), 0 0 18px 4px rgba(242, 210, 122, .55); transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.tour-hole.tour-act { animation: tour-pulse 1.4s ease-in-out infinite; }
@keyframes tour-pulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(8, 4, 10, .58), 0 0 12px 2px rgba(242, 210, 122, .5); } 50% { box-shadow: 0 0 0 9999px rgba(8, 4, 10, .58), 0 0 26px 9px rgba(242, 210, 122, .85); } }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } .tour-hole.tour-act { animation: none; } }
.tour-tip { position: fixed; pointer-events: auto; padding: .9rem 1rem .8rem; border-radius: 6px; color: var(--text, #3a2a1d);
  background: var(--paper-fiber, none), linear-gradient(180deg, #f7ecd2, #ead9b4); background-blend-mode: multiply, normal; border: 1px solid #8a6a26; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); transition: left .25s, top .25s; }
.tour-tip h3 { font-family: var(--f-title); font-weight: 900; font-size: 1.12rem; margin: .45rem 0 .3rem; }
.tour-tip p { font-size: .9rem; line-height: 1.6; margin: 0 0 .4rem; }
.tour-tip .eyebrow { color: var(--accent); font-weight: 700; font-size: .74rem; letter-spacing: .08em; }
.tour-btns { display: flex; gap: .4rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.tour-btns .btn-ghost { margin-right: auto; }
.tour-pass { font-size: .78rem !important; }
.guide-plan { margin: .8rem 0 0; padding-left: 1.2rem; columns: 2; font-size: .86rem; color: var(--text-2); } .guide-plan li { margin: .1rem 0; break-inside: avoid; }
@media (max-width: 760px) { .guide-plan { columns: 1; } }
body:has(#tour:not([hidden])) .inbox.chat-dock:not(.dock-open) { visibility: hidden; }
/* 채팅 인장: 한자 대신 말풍선 그림 (금박 각인) — 누르면 채팅이 열린다는 것이 바로 보이게 */
:root { --chat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6e3a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 20 17H11l-4.5 3.5V17H4a1.5 1.5 0 0 1-1.5-1.5V7A1.5 1.5 0 0 1 4 5.5z'/%3E%3Ccircle cx='8' cy='11.3' r='.9' fill='%23f6e3a2'/%3E%3Ccircle cx='12' cy='11.3' r='.9' fill='%23f6e3a2'/%3E%3Ccircle cx='16' cy='11.3' r='.9' fill='%23f6e3a2'/%3E%3C/svg%3E"); }
.inbox.chat-dock:not(.dock-open) .dock-toggle::after { content: '' !important; width: 1.55rem; height: 1.55rem; display: block; background: var(--chat-ico) center / contain no-repeat; filter: drop-shadow(0 1px 0 rgba(60, 10, 8, .9)); }
.inbox.chat-dock:not(.dock-open) .dock-toggle { display: grid !important; place-items: center; }
.chat-dock .inbox-head .section-title::before { content: '' !important; background: var(--chat-ico) center / 62% no-repeat, radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808) !important; }
.inbox.chat-dock:not(.dock-open) .dock-toggle { position: absolute; } .inbox.chat-dock:not(.dock-open)::after { content: '채팅'; position: absolute; left: 50%; bottom: -1.05rem; transform: translateX(-50%); font-size: .62rem; color: #ecdcae; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
html[data-theme] .game > .inbox.chat-dock:not(.dock-open):not(#_) { opacity: 1 !important; filter: none !important; background: radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808) !important; border: 2px solid #d8b25a !important; box-shadow: 0 0 0 3px rgba(122, 20, 20, .35), 0 6px 14px rgba(0, 0, 0, .6) !important; }
@media (max-width: 760px) { .inbox.chat-dock:not(.dock-open)::after { display: none; } }
html[data-theme] .inbox.chat-dock:not(.dock-open) .btn.dock-toggle:not(#_) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* 말풍선은 인장 원의 정가운데 (인장 자체의 바탕으로 그림) */
html[data-theme] .game > .inbox.chat-dock:not(.dock-open):not(#_) { background: var(--chat-ico) 50% 50% / 46% 46% no-repeat, radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808) !important; }
.inbox.chat-dock:not(.dock-open) .dock-toggle::after { content: none !important; display: none !important; }
html[data-theme] .inbox.chat-dock:not(.dock-open) .btn.dock-toggle:not(#_) { position: absolute !important; inset: -2px !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; }
.inbox.chat-dock:not(.dock-open) .dock-toggle:focus-visible { outline: 2px solid #f2d27a; outline-offset: 3px; }
html[data-theme] .inbox.chat-dock:not(.dock-open) .btn.dock-toggle:not(#_) { background: var(--chat-ico) 50% 50% / 48% 48% no-repeat !important; filter: drop-shadow(0 1px 0 rgba(60, 10, 8, .9)); z-index: 3; }
html[data-theme] .game > .inbox.chat-dock:not(.dock-open):not(#_) { background: radial-gradient(circle at 35% 30%, #c4413a, #7a1414 60%, #4a0808) !important; }

/* ===== 길 안내 튜토리얼 2판: 화면을 가리지 않는 안내 ===== */
#tour .tour-dim { position: fixed; inset: 0; pointer-events: none; }
#tour.tour-center .tour-dim { background: rgba(8, 4, 10, .45); }
#tour.tour-center::before { content: none !important; }
.tour-hole { box-shadow: 0 0 0 9999px rgba(8, 4, 10, .38), 0 0 18px 4px rgba(242, 210, 122, .55) !important; border: 2px solid #f2d27a; }
#tour.tour-do .tour-hole { box-shadow: 0 0 0 3px rgba(242, 210, 122, .35), 0 0 22px 6px rgba(242, 210, 122, .65) !important; animation: tour-glow 1.3s ease-in-out infinite; }
@keyframes tour-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(242, 210, 122, .3), 0 0 14px 3px rgba(242, 210, 122, .5); } 50% { box-shadow: 0 0 0 6px rgba(242, 210, 122, .45), 0 0 30px 10px rgba(242, 210, 122, .85); } }
.tour-point { position: fixed; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; animation: tour-bob 1s ease-in-out infinite; z-index: 2; }
.tour-point span { padding: .25rem .65rem; border-radius: 999px; background: #7a1414; color: #fff3d6; font-weight: 700; font-size: .78rem; white-space: nowrap; border: 1px solid #f2d27a; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.tour-point i { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #f2d27a; }
.tour-point.up { flex-direction: column-reverse; } .tour-point.up i { border-top: 0; border-bottom: 10px solid #f2d27a; }
@keyframes tour-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tour-point.up { animation-name: tour-bob-up; } @keyframes tour-bob-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { #tour.tour-do .tour-hole, .tour-point { animation: none !important; } }
.tour-tip { padding: 1rem 1.1rem .9rem !important; border-radius: 8px !important; border: 1px solid #8a6a26 !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .25) inset !important; transition: left .2s, top .2s; z-index: 3; }
.tour-tail { position: absolute; width: 14px; height: 14px; background: #f1e3c4; border: 1px solid #8a6a26; transform: rotate(45deg); }
.tour-tip[data-side=below] .tour-tail { top: -8px !important; margin-left: -7px; border-right: 0; border-bottom: 0; }
.tour-tip[data-side=above] .tour-tail { top: auto !important; bottom: -8px; margin-left: -7px; border-left: 0; border-top: 0; background: #ead9b4; }
.tour-tip[data-side=right] .tour-tail { left: -8px !important; margin-top: -7px; border-top: 0; border-right: 0; }
.tour-tip[data-side=left] .tour-tail { left: auto !important; right: -8px; margin-top: -7px; border-bottom: 0; border-left: 0; }
.tour-top { display: flex; justify-content: space-between; align-items: center; }
.tour-kind { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
#tour.tour-do .tour-kind::before { content: '● '; color: #c99a3e; }
.tour-tip .guide-count { font-size: .76rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tour-bar { height: 4px; border-radius: 4px; background: rgba(110, 80, 40, .18); margin: .5rem 0 .2rem; overflow: hidden; } .tour-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c99a3e, #8c3a32); border-radius: 4px; transition: width .3s; }
.tour-tip h3 { font-size: 1.18rem !important; margin: .5rem 0 .3rem !important; }
.tour-tip p { font-size: .94rem !important; line-height: 1.65 !important; color: var(--text, #3a2a1d); }
.tour-hint { font-size: .8rem !important; color: var(--text-3) !important; margin-top: .2rem !important; }
.tour-lost { font-size: .8rem !important; color: #8c3a32 !important; }
.tour-btns { margin-top: .7rem !important; }
.tour-btns .btn { min-height: 2.1rem; }
.guide-plan-h { font-family: var(--f-title); font-weight: 900; margin-top: 1rem; font-size: .95rem; }
.guide-plan { counter-reset: none; }
@media (max-width: 760px) { .tour-tip p { font-size: .9rem !important; } .tour-point span { font-size: .74rem; } }
body:has(#tour:not([hidden])) #toasts { z-index: 100 !important; } #tour { z-index: 130 !important; }