:root {
  --ink: #2b2620;
  --paper: #f3ecdc;
  --paper2: #e9dfc8;
  --red: #a3271d;
  --gold: #c9a14a;
  --glass: rgba(34, 30, 24, .55);
  --glass-b: rgba(255, 240, 210, .18);
  --text: #f6efdf;
  --muted: #cbbfa6;
  --serif: "Noto Serif KR", "AppleMyungjo", "Batang", "Songti TC", "Songti SC", "SimSun-ExtB", "MingLiU-ExtB", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c1a16; color: var(--text); font-family: var(--sans); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.hanja, .serif { font-family: var(--serif); }

/* 이름표·말풍선 */
.nametag { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(250, 245, 232, .92); color: #3a3128; font-size: 12px; display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transform-origin: 50% 100%; transition: background .2s, box-shadow .2s; }
.nametag .dot { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; color: #fff; font-family: var(--serif); }
.nametag small { color: #8a7d68; }
.nametag.speaking { background: #fff6dc; box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0, 0, 0, .35); }
.nametag.me { background: rgba(40, 36, 30, .8); color: #fff; padding: 3px 10px; }
.nametag.king { background: #f7e3a7; font-weight: 600; }
.bubble { position: absolute; left: 0; top: 0; max-width: 300px; padding: 9px 13px; border-radius: 14px; background: rgba(255, 252, 244, .97); color: #2b2620; font-family: var(--serif); font-size: 13px; line-height: 1.55; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s; pointer-events: none; transform-origin: 50% 100%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.bubble.on { opacity: 1; }
body.no-bubble .bubble { display: none !important; }
.t-king { background: #b3241c } .t-daesin { background: #a83a2c } .t-dangsang { background: #b8483a } .t-okdang { background: #2f5d8c } .t-daegan { background: #3c6f98 } .t-sagwan { background: #4f7d4a } .t-jong { background: #9b3d55 } .t-mu { background: #36507a } .t-guest { background: #8c8577 }

/* HUD */
.hud { position: fixed; z-index: 20; }
.top-left { top: 22px; left: 22px; display: flex; gap: 10px; align-items: flex-start; }
.top-right { top: 22px; right: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pill { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(14px); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room-pill { padding: 8px 16px 8px 12px; gap: 10px; font-size: 14px; }
.brand { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-weight: 700; letter-spacing: 1px; }
.brand b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: var(--red); color: #f6e7c1; font-size: 13px; }
.sep { width: 1px; height: 14px; background: var(--glass-b); }
#roomName { color: var(--muted); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#roomName b { color: var(--text); font-weight: 600; }
.chev { color: var(--muted); }
.menu { position: absolute; top: 56px; left: 54px; width: min(460px, 86vw); max-height: 62vh; overflow: auto; padding: 8px; border-radius: 18px; background: rgba(30, 27, 22, .92); border: 1px solid var(--glass-b); backdrop-filter: blur(16px); display: none; }
.menu.open { display: block; }
.menu button { width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; display: flex; gap: 10px; align-items: baseline; }
.menu button:hover, .menu button.on { background: rgba(255, 240, 210, .1); }
.menu .yr { font-family: var(--serif); min-width: 120px; color: var(--muted); font-size: 13px; }
.tools button { display: flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 999px; font-size: 13px; }
.tools button:hover, .tools button.on { background: rgba(255, 240, 210, .12); }
.card { background: rgba(32, 29, 24, .94); border: 1px solid var(--glass-b); border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(16px); }
.settings { display: none; padding: 14px 16px; font-size: 13px; flex-direction: column; gap: 9px; min-width: 240px; }
.settings.open { display: flex; }
.settings select { background: #2b2620; color: var(--text); border: 1px solid var(--glass-b); border-radius: 8px; padding: 3px 6px; margin-left: 6px; }
.hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.toast { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(14px); font-size: 13px; opacity: 0; transition: opacity .3s; z-index: 30; pointer-events: none; }
.toast.on { opacity: 1; }

/* 자막 */
.subtitle { max-height: 38vh; overflow: auto; position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(860px, 92vw); padding: 14px 20px 15px; border-radius: 18px; background: rgba(24, 21, 17, .72); border: 1px solid var(--glass-b); backdrop-filter: blur(14px); z-index: 15; transition: opacity .3s; }
.subtitle.empty { opacity: 0; pointer-events: none; }
.subtitle .who { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.subtitle .role { color: var(--gold); }
.subtitle .name { font-weight: 600; cursor: pointer; }
.subtitle p { margin: 0; line-height: 1.75; }
.subtitle .hanja { font-size: 16.5px; letter-spacing: .5px; max-height: 6.6em; overflow: auto; }
.subtitle .hangul { font-size: 14px; color: #e7dcc4; margin-top: 6px; max-height: 6em; overflow: auto; }
.subtitle .hangul:empty, .subtitle .hanja:empty { display: none; }
body.no-hanja .subtitle .hanja { display: none; }
body.no-hangul .subtitle .hangul { display: none; }
.subtitle.narr .role { color: #9fc2a8; }

/* 하단 */
.bottom { left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.player { padding: 6px 14px 6px 6px; gap: 2px; }
.player button { width: 38px; height: 38px; border-radius: 50%; font-size: 14px; }
.player button:hover { background: rgba(255, 240, 210, .12); }
.player .play { background: var(--red); color: #fff; }
.track { display: flex; align-items: center; gap: 10px; margin-left: 8px; font-size: 12px; color: var(--muted); }
.track input { width: min(280px, 40vw); accent-color: var(--gold); }
.actions { padding: 8px 14px; gap: 10px; }
.actions button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 82px; padding: 5px 0; border-radius: 14px; font-size: 12px; }
.actions button b { font-family: var(--serif); font-size: 19px; }
.actions button:hover { background: rgba(255, 240, 210, .12); }

/* 서랍 */
.drawer { position: fixed; top: 84px; right: 22px; bottom: 24px; width: min(420px, 92vw); z-index: 25; display: flex; flex-direction: column; background: rgba(30, 27, 22, .95); border: 1px solid var(--glass-b); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transform: translateX(120%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 8px; }
.drawer-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; }
.x { width: 32px; height: 32px; border-radius: 50%; font-size: 20px; color: var(--muted); }
.x:hover { background: rgba(255, 240, 210, .1); }
.tabs { display: flex; gap: 4px; padding: 0 14px 8px; border-bottom: 1px solid var(--glass-b); }
.tabs button { padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.tabs button.on { background: rgba(255, 240, 210, .12); color: var(--text); }
.drawer-body { overflow: auto; padding: 12px 14px 20px; font-size: 13.5px; }
.sec-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 2px 4px 12px; }
.row-person { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 12px; cursor: pointer; }
.row-person:hover { background: rgba(255, 240, 210, .07); }
.row-person .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); color: #fff; font-size: 13px; }
.row-person .nm { font-weight: 600; }
.row-person .nm .hj { font-family: var(--serif); font-weight: 400; color: var(--muted); margin-left: 5px; }
.row-person .rl { font-size: 12px; color: var(--muted); }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 240, 210, .1); color: var(--muted); white-space: nowrap; }
.badge.gold { background: rgba(201, 161, 74, .22); color: #f1d898; }
.badge.red { background: rgba(163, 39, 29, .35); color: #ffd3c8; }
.badge.green { background: rgba(80, 140, 100, .3); color: #cfeedc; }
.jw { width: 100%; border-collapse: collapse; }
.jw td { padding: 9px 6px; border-bottom: 1px solid rgba(255, 240, 210, .08); vertical-align: top; }
.jw td:first-child { color: var(--muted); width: 32%; }
.jw .hj { font-family: var(--serif); }
.jw tr.present td { background: rgba(201, 161, 74, .08); }
.status { cursor: help; }
.edict { padding: 12px; border-radius: 14px; background: rgba(255, 240, 210, .05); margin-bottom: 8px; cursor: pointer; border: 1px solid transparent; }
.edict:hover { border-color: var(--glass-b); }
.edict .t { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.edict .t .ttl { flex: 1; font-size: 13px; }
.edict .txt { font-family: var(--serif); color: #e7dcc4; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.edict.done { opacity: .62; }
.turn { padding: 9px 10px; border-radius: 12px; cursor: pointer; line-height: 1.65; }
.turn:hover { background: rgba(255, 240, 210, .06); }
.turn.on { background: rgba(201, 161, 74, .16); }
.turn .sp { font-size: 12px; color: var(--gold); }
.turn .tx { font-family: var(--serif); }
.turn.narr .sp { color: #9fc2a8; }
.trans p { line-height: 1.85; margin: 0 0 10px; }
.scene-sep { margin: 14px 4px 6px; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--glass-b); padding-top: 10px; }
.linkrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.linkrow a, .btn { font-size: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 240, 210, .1); text-decoration: none; }
.linkrow a:hover, .btn:hover { background: rgba(255, 240, 210, .18); }

/* 인물 카드 */
.person { position: fixed; left: 22px; top: 90px; width: min(330px, 88vw); padding: 18px; z-index: 26; display: none; }
.person.open { display: block; }
.person h3 { margin: 0 0 2px; font-size: 20px; }
.person h3 .hj { font-family: var(--serif); font-weight: 400; color: var(--muted); font-size: 16px; margin-left: 6px; }
.person .role { color: var(--gold); font-size: 13px; }
.person .desc { font-size: 13px; line-height: 1.65; color: #e3d8c0; margin: 10px 0; }
.person .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.person .x { position: absolute; right: 10px; top: 10px; }
.person .quote { font-family: var(--serif); font-size: 13px; color: #e7dcc4; border-left: 2px solid var(--gold); padding-left: 10px; margin: 10px 0 0; line-height: 1.6; max-height: 7.5em; overflow: auto; }

/* 교지 검토 */
.modal { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(10, 8, 6, .62); backdrop-filter: blur(4px); }
.modal.open { display: grid; }
.doc-wrap { position: relative; display: flex; gap: 16px; max-width: 96vw; max-height: 90vh; }
.doc { position: relative; width: min(560px, 60vw); height: min(78vh, 720px); padding: 46px 40px; border-radius: 6px; color: #2b2620; background:
  radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .5), transparent 60%),
  repeating-linear-gradient(90deg, rgba(120, 90, 50, .04) 0 2px, transparent 2px 7px),
  linear-gradient(#f4ecd6, #e9dcbc); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 0 60px rgba(150, 110, 60, .25); overflow: hidden; }
.doc .vert { width: 100%; writing-mode: vertical-rl; text-orientation: upright; font-family: var(--serif); height: 100%; overflow-x: auto; overflow-y: hidden; font-size: 21px; line-height: 2.05; letter-spacing: 3px; direction: ltr; }
.doc .vert .head { font-size: 26px; font-weight: 700; margin-left: 22px; letter-spacing: 8px; }
.doc .vert .date { margin-right: 26px; font-size: 18px; color: #4a3d2d; }
.doc .stamp { position: absolute; width: 96px; height: 96px; border: 4px double #b2271a; color: #b2271a; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; line-height: 1.1; text-align: center; transform: rotate(-4deg); opacity: .78; mix-blend-mode: multiply; left: 36px; bottom: 44px; }
.doc .yeol { position: absolute; left: 30px; top: 30px; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #b2271a; color: #b2271a; display: grid; place-items: center; font-family: var(--serif); font-size: 26px; transform: rotate(8deg) scale(.6); opacity: 0; transition: all .35s cubic-bezier(.2, 1.6, .4, 1); mix-blend-mode: multiply; }
.doc.read .yeol { opacity: .85; transform: rotate(8deg) scale(1); }
.review { width: 330px; padding: 18px; border-radius: 18px; background: rgba(32, 29, 24, .96); border: 1px solid var(--glass-b); overflow: auto; font-size: 13px; }
.review h4 { margin: 0 0 4px; font-size: 16px; font-family: var(--serif); }
.review .kind-desc { color: var(--muted); line-height: 1.6; margin: 6px 0 12px; }
.review .tr { line-height: 1.75; color: #e7dcc4; white-space: pre-wrap; max-height: 30vh; overflow: auto; background: rgba(255, 240, 210, .05); padding: 10px; border-radius: 10px; }
.review textarea { width: 100%; min-height: 90px; margin-top: 8px; border-radius: 10px; border: 1px solid var(--glass-b); background: #221f1a; color: var(--text); padding: 9px; font: inherit; resize: vertical; }
.review .check { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 10px; border-radius: 12px; background: rgba(163, 39, 29, .2); cursor: pointer; }
.doc-wrap > .x { position: absolute; right: -6px; top: -42px; color: #fff; }

.shot { padding: 14px; max-width: 90vw; }
.shot img { display: block; max-width: 80vw; max-height: 64vh; border-radius: 10px; }
.shot .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.shot .row button { padding: 9px 14px; border-radius: 999px; background: rgba(255, 240, 210, .12); font-size: 13px; }

/* 로비 */
.lobby { position: fixed; inset: 0; z-index: 50; overflow: auto; color: var(--ink); transition: opacity .5s; background:
  linear-gradient(180deg, rgba(239,231,212,0) 0, rgba(239,231,212,0) 26vh, rgba(239,231,212,.88) 40vh, #e9dfc8 62vh); }
.lobby-inner .seal, .lobby h1, .lobby .sub { text-shadow: 0 1px 12px rgba(255,250,235,.9); }
.lobby-credit-3d { position: fixed; right: 16px; top: 12px; font-size: 11px; color: rgba(43,38,32,.6); }
.lobby.hide { opacity: 0; pointer-events: none; }
.lobby-inner { max-width: 880px; margin: 0 auto; padding: 36vh 22px 60px; display: flex; flex-direction: column; align-items: center; }
.seal { width: 64px; height: 64px; border-radius: 8px; background: var(--red); color: #f6e7c1; display: grid; place-items: center; font-family: var(--serif); font-size: 36px; box-shadow: 0 8px 20px rgba(120, 30, 20, .3); }
.lobby h1 { margin: 16px 0 4px; font-family: var(--serif); font-size: 34px; letter-spacing: 10px; padding-left: 10px; font-weight: 700; }
.lobby .sub { margin: 0; color: #6f6556; font-size: 14px; }
.today { margin: 22px 0 14px; font-family: var(--serif); font-size: 18px; text-align: center; line-height: 1.6; }
.today small { display: block; font-family: var(--sans); font-size: 12px; color: #7d7262; }
.date-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.date-bar input { font: inherit; padding: 7px 10px; border-radius: 10px; border: 1px solid #cdbf9f; background: #faf5e8; color: var(--ink); }
.date-bar .ghost, .ghost { padding: 7px 12px; border-radius: 10px; border: 1px solid #cdbf9f; background: #faf5e8; }
.shot .ghost { border: 0; background: rgba(255, 240, 210, .06); }
.seg { display: flex; background: #e1d5b9; padding: 3px; border-radius: 12px; }
.seg button { padding: 6px 12px; border-radius: 9px; font-size: 13px; color: #6f6556; }
.seg button.on { background: #faf5e8; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.progress { width: min(420px, 90%); margin: 26px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: #7d7262; }
.progress .bar { width: 100%; height: 3px; background: #d7caad; border-radius: 3px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.progress.done { display: none; }
.rooms { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 18px; }
.room { text-align: left; padding: 16px 16px 14px; border-radius: 16px; background: #faf6ea; border: 1px solid #ddd0b3; box-shadow: 0 2px 10px rgba(80, 60, 30, .06); display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s; animation: rise .4s both; }
.room:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(80, 60, 30, .14); }
.room .yr { font-size: 12px; color: #7d7262; }
.room .ttl { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.room .ttl small { font-weight: 400; color: #6f6556; font-size: 14px; margin-left: 4px; }
.room .bk { font-family: var(--serif); color: #5b4e3c; font-size: 14px; }
.room .meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.room .meta span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #efe5cf; color: #6f6556; }
.room .meta span.tr { background: #e6efd9; color: #4d6a3c; }
.room.best { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 161, 74, .35); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.empty-note { text-align: center; color: #6f6556; font-size: 14px; line-height: 1.8; margin-top: 16px; }
.nolecture { width: 100%; margin-top: 22px; }
.nolecture summary { cursor: pointer; color: #6f6556; font-size: 13px; }
.nolecture .days { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 10px; }
.nolecture .days button { text-align: left; padding: 8px 10px; border-radius: 10px; background: #f6f0e1; font-size: 12px; color: #5b4e3c; }
.nolecture .days button:hover { background: #fffaf0; }
.nolecture .days b { font-family: var(--serif); }
.credit { margin-top: 34px; font-size: 11.5px; color: #8a7e6c; text-align: center; line-height: 1.7; }

body.in-lobby .hud, body.in-lobby .subtitle, body.in-lobby .drawer { visibility: hidden; }

@media (max-width: 720px) {
  .actions button { width: 64px; }
  .subtitle { bottom: 160px; }
  .doc-wrap { flex-direction: column; overflow: auto; }
  .doc { width: 90vw; height: 60vh; }
  .review { width: 90vw; }
  .tools button span { display: none; }
}

.all-toggle { margin-top: 16px; font-size: 13px; color: #6f6556; }
.venue-note { position: fixed; left: 22px; bottom: 18px; z-index: 14; font-size: 11px; color: rgba(246,239,223,.6); max-width: 30vw; line-height: 1.5; pointer-events: none; }
body.in-lobby .venue-note { display: none; }

/* 전각 선택 */
.halls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin: 22px 0 6px; }
.halls button { padding: 16px 14px; border-radius: 16px; background: rgba(250,246,234,.92); border: 1px solid #ddd0b3; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .15s, box-shadow .15s; }
.halls button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(80,60,30,.14); }
.halls button.on { border-color: var(--red); box-shadow: 0 0 0 2px rgba(163,39,29,.25); }
.halls b { font-size: 22px; letter-spacing: 3px; }
.halls span { font-weight: 600; }
.halls small { color: #7d7262; font-size: 12px; }
.hall-panel { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.hall-panel[hidden] { display: none; }
.crumbs { align-self: flex-start; margin: 10px 0; font-size: 14px; color: #7d7262; }
.crumbs a { color: var(--red); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#navBox { width: 100%; }
.nav-grid { display: grid; gap: 8px; width: 100%; }
.nav-grid.kings { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.nav-grid.years { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.nav-grid.months { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.nav-grid.days { grid-template-columns: repeat(7, 1fr); }
.nav-grid button { position: relative; padding: 12px 8px; border-radius: 12px; background: #faf6ea; border: 1px solid #e0d4b8; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); }
.nav-grid button:hover { background: #fffaf0; border-color: #c9b48a; }
.nav-grid b { font-size: 16px; } .nav-grid.kings b { font-size: 22px; }
.nav-grid small { color: #8a7e6c; font-size: 11px; } .nav-grid i { font-style: normal; font-size: 10px; color: #4d6a3c; }
.nav-grid.days button.stored { background: #fffaf0; }
.dot-l, .dot-s { position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%; }
.dot-l { right: 6px; background: var(--gold); } .dot-s { right: 16px; background: #5e9a6a; }
.lobby .sec-note { color: #7d7262; align-self: flex-start; }
.mt-status { align-self: flex-start; font-size: 13px; color: #5b4e3c; }
.mt-status code { background: #efe5cf; padding: 1px 5px; border-radius: 4px; }
#mtIn { width: 100%; min-height: 130px; border-radius: 14px; border: 1px solid #cdbf9f; background: #fffdf6; padding: 14px; font-size: 17px; line-height: 1.8; color: var(--ink); }
.lobby .btn { background: #efe5cf; color: var(--ink); } .lobby .btn.primary { background: var(--red); color: #fff; } .lobby .btn:disabled { opacity: .45; cursor: not-allowed; }
.mt-result { width: 100%; min-height: 60px; background: #faf6ea; border: 1px solid #e0d4b8; border-radius: 14px; padding: 12px 16px; line-height: 1.8; }
.lobby .muted, .day-pane .muted { color: #8a7e6c; }

/* 하루 보기 */
.day-pane { position: fixed; inset: 0; z-index: 60; background: rgba(30,26,20,.45); backdrop-filter: blur(4px); display: none; overflow: auto; }
.day-pane.open { display: block; }
.day-inner { position: relative; max-width: 1080px; margin: 4vh auto; background: linear-gradient(#f6f0e1, #efe6cf); color: var(--ink); border-radius: 18px; padding: 28px 32px 40px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.day-head .yr { color: #7d7262; font-size: 13px; }
.day-head h2 { margin: 4px 0 8px; font-size: 28px; } .day-head h2 small { font-size: 16px; color: #7d7262; }
.day-head .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.day-head .meta span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #e9dec3; color: #5b4e3c; } .day-head .meta span.tr { background: #e1ecd5; color: #4d6a3c; }
.day-head .x { position: absolute; right: 18px; top: 16px; color: #7d7262; }
.day-inner h3 { font-size: 14px; color: var(--red); margin: 22px 0 8px; letter-spacing: 2px; }
.day-summary p { line-height: 1.85; margin: 0; } .day-summary .by { color: #8a7e6c; font-size: 11px; }
.day-lectures .lec { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 6px; border-radius: 12px; background: #fff8e6; border: 1px solid var(--gold); }
.day-lectures .lec span { margin-left: auto; color: var(--red); font-weight: 600; }
.day-jw p { font-size: 13px; line-height: 1.9; color: #5b4e3c; }
.art { border-bottom: 1px solid #e0d4b8; }
.art-head { display: flex; gap: 8px; align-items: center; padding: 10px 4px; cursor: pointer; }
.art-head:hover { background: rgba(255,255,255,.4); }
.art-head .no { width: 26px; color: #a0937c; font-size: 12px; text-align: right; }
.art-head .ttl { flex: 1; font-size: 14px; }
.art-sum { margin: -4px 0 8px 34px; font-size: 13px; color: #5b4e3c; line-height: 1.7; }
.art-body { display: none; padding: 0 4px 16px 34px; } .art.open .art-body { display: block; }
.art .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.art .col { background: #fffdf6; border: 1px solid #e6dcc4; border-radius: 12px; padding: 12px 14px; max-height: 46vh; overflow: auto; }
.art .col h4 { margin: 0 0 6px; font-size: 13px; color: var(--red); } .art .col h4 small { color: #8a7e6c; font-weight: 400; }
.art .col p { margin: 0; line-height: 1.85; font-size: 14px; white-space: pre-wrap; }
.art .col.mt { background: #f3f7fb; border-color: #cddbea; }
.day-pane .badge { background: #e9dec3; color: #5b4e3c; } .day-pane .badge.gold { background: #f3e3b5; color: #7a5a14; } .day-pane .badge.red { background: #f3d5cf; color: #8e2a1e; }
.day-pane .badge.green { background: #dcead1; color: #3f6131; } .day-pane .badge.blue { background: #d8e5f2; color: #2c4f78; }
.day-pane .btn { background: #e9dec3; color: var(--ink); margin-top: 10px; } .day-pane .btn:disabled { opacity: .45; }
.day-pane .linkrow a { background: #e9dec3; color: var(--ink); }
.day-pane .credit { margin-top: 26px; font-size: 11px; color: #8a7e6c; }
@media (max-width: 860px) { .art .cols { grid-template-columns: 1fr; } .halls { grid-template-columns: 1fr; } }
.nametag.hall-tag { font-size: 14px; padding: 6px 14px; background: rgba(250,245,232,.95); z-index: 5; }
.nametag.hall-tag b { color: var(--red); letter-spacing: 2px; }
body:not(.in-lobby) .nametag.hall-tag { display: none !important; }
/* 입궐 화면의 빈 곳은 3D 마당으로 클릭이 통과 */
.lobby, .lobby-inner { pointer-events: none; }
.lobby-inner > *, .lobby-credit-3d { pointer-events: auto; }
body.in-lobby #overlay { z-index: 55; }
body.lobby-scrolled .nametag.hall-tag { display: none !important; }
.nametag.hall-tag.on { background: var(--red); color: #fff; box-shadow: 0 0 0 3px rgba(163,39,29,.3), 0 6px 18px rgba(0,0,0,.25); }
.nametag.hall-tag.on b { color: #f6e7c1; }
.mt-eval { width: 100%; } .mt-eval .ev { padding: 10px 0; border-bottom: 1px solid #e0d4b8; font-size: 13px; } .mt-eval .ev p { margin: 4px 0 0; }

/* 자동 표점 */
.punct { line-height: 2.1; } .punct.big { font-size: 19px; }
.pm { font-style: normal; font-weight: 700; padding: 0 1px; border-radius: 3px; }
.pm.ok { color: #2f7d3b; } .pm.miss { color: #a59a88; text-decoration: line-through; } .pm.bad { color: #c0392b; background: #fbe3df; } .pm.diff { color: #c46a00; background: #fdf0d9; }
table.score { border-collapse: collapse; margin: 8px 0; font-size: 13px; } table.score td, table.score th { padding: 5px 10px; border-bottom: 1px solid #e0d4b8; text-align: right; } table.score td:first-child, table.score th:first-child { text-align: left; }
.btn.mini { font-size: 11px; padding: 3px 8px; margin: 0 0 0 6px; vertical-align: middle; }
.punct-sum { background: #eef5e9; border: 1px solid #cfe2c3; border-radius: 12px; padding: 10px 14px; }

/* 자막: 오른쪽 세로 패널(시야를 가리지 않게) */
@media (min-width: 900px) {
  .subtitle { left: auto; right: 22px; top: 88px; bottom: auto; transform: none; width: min(400px, 32vw); max-height: calc(100vh - 250px); padding: 16px 18px 18px; transition: right .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .subtitle .hanja { font-size: 17px; max-height: none; }
  .subtitle .hangul { font-size: 14.5px; max-height: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,240,210,.14); }
  .subtitle .who { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,240,210,.14); }
  body.drawer-open .subtitle { right: calc(min(420px, 92vw) + 34px); }
  .top-right .settings.open ~ * { }
}
/* 숨긴 입궐 화면은 클릭을 받지 않음 */
.lobby.hide { visibility: hidden; transition: opacity .5s, visibility 0s linear .5s; }
.lobby.hide, .lobby.hide * { pointer-events: none !important; }