:root {
  --bg: #12161d;
  --panel: #181e28;
  --panel2: #1e2531;
  --line: #2a3342;
  --text: #dde4ef;
  --dim: #8b97ab;
  --faint: #5d687a;
  --accent: #6aa8ff;
  --accent2: #8ad1b5;
  --warn: #f0b95a;
  --err: #f07a7a;
  --info: #7fb3ff;
  --note: #d9b95c;
  --scene: #8ad1b5;
  --pv-w: 600px;
  --gut: 46px;
  --mono: "Cascadia Mono", "D2Coding", "Malgun Gothic", "Apple SD Gothic Neo", monospace;
  --ui: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--ui); display: flex; flex-direction: column; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
kbd { font: 11px var(--mono); background: #232c3a; border: 1px solid #364255; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: #b9c4d6; }
code { font-family: var(--mono); }

/* ── 상단 ── */
.top { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: #0f131a; border-bottom: 1px solid var(--line); flex: none; }
.brand { font-weight: 600; letter-spacing: .2px; white-space: nowrap; color: #c8d3e6; }
.brand b { color: #fff; font-weight: 700; }
.snow { color: #9fd3ff; margin-right: 2px; }
.brand-badge { font-size: 10.5px; font-weight: 600; color: #9fd3ff; background: #1b2a40; border: 1px solid #2c4466; border-radius: 999px; padding: 0 7px; margin-left: 4px; vertical-align: 2px; }
.projname { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; padding-left: 12px; border-left: 1px solid var(--line); }
.projname:empty { display: none; }
.spacer { flex: 1; }
.top-right { display: flex; align-items: center; gap: 10px; }
.savestate { font-size: 12px; color: var(--faint); min-width: 54px; text-align: right; }
.savestate.dirty { color: var(--warn); }

.btn { background: #222b39; border: 1px solid #34405a; border-radius: 8px; padding: 5px 11px; cursor: pointer; transition: background .12s, border-color .12s; }
.btn:hover { background: #2a3548; border-color: #46567a; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: #2d5fb8; border-color: #3b74d8; color: #fff; }
.btn.primary:hover { background: #3569c8; }
.btn.ghost { background: transparent; border-color: #2f3a4e; color: #b8c3d6; }
.btn.small { padding: 3px 8px; font-size: 12.5px; }
.btn.danger { border-color: #6a3434; color: #ffb3b3; background: #2a1b1f; }
.btn.danger:hover { background: #3a2026; border-color: #8a4444; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--dim); font-size: 12px; cursor: pointer; text-decoration: underline; text-decoration-color: #3a4558; text-underline-offset: 3px; }
.linkbtn:hover { color: #fff; }
select { background: #1b2230; border: 1px solid #34405a; border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: #b8c3d6; user-select: none; }
.switch input { accent-color: var(--accent); }
.switch.small { font-size: 12.5px; }

/* ── 메인 그리드 ── */
.main { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(380px, 1fr) var(--pv-w); }
.side, .ed, .pv { min-height: 0; min-width: 0; }
.side { border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 10px 10px 20px; }
.side h3 { margin: 14px 4px 6px; font-size: 12px; color: var(--dim); font-weight: 600; text-transform: none; letter-spacing: .3px; }
.side h3 small { color: var(--faint); font-weight: 400; }
.side section:first-child h3 { margin-top: 4px; }
.side h3 { display: flex; align-items: center; gap: 6px; }
.h3btn { margin-left: auto; background: #1e2633; border: 1px solid #2f3a4e; border-radius: 6px; padding: 0 7px; font-size: 11.5px; color: #b8c3d6; cursor: pointer; line-height: 1.7; }
.h3btn:hover { color: #fff; border-color: #4a6296; background: #243049; }

/* 문서 목록 */
.doc-list { display: flex; flex-direction: column; gap: 2px; }
.docs-sec .linkbtn { margin: 6px 6px 0; }
.dgroup { margin-bottom: 2px; }
.dg-head { display: flex; align-items: center; gap: 5px; padding: 3px 6px; font-size: 11.5px; color: var(--faint); cursor: pointer; border-radius: 6px; user-select: none; }
.dg-head:hover { color: var(--dim); background: #1c2430; }
.dg-head .caret { font-size: 9px; transition: transform .12s; }
.dgroup.col .dg-head .caret { transform: rotate(-90deg); }
.dg-head .dg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dg-head .n { font-variant-numeric: tabular-nums; }
.drow { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 16px; border-radius: 7px; cursor: pointer; color: #bcc7da; }
.drow:hover { background: #212a38; }
.drow.on { background: #223049; color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.drow .dt { flex: 1; min-width: 0; line-height: 1.3; }
.drow .dtitle { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow small { display: block; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow.on small { color: #8fa6cf; }
.drow .dact { display: none; gap: 1px; flex: none; }
.drow:hover .dact { display: flex; }
.drow .dact button { background: #1b2230; border: 1px solid #2f3a4e; border-radius: 5px; width: 21px; height: 21px; padding: 0; font-size: 11px; line-height: 1; color: #aab6ca; cursor: pointer; }
.drow .dact button:hover { color: #fff; border-color: #4a6296; background: #26324a; }
.drow .dact button[data-dact="del"]:hover { border-color: #8a4444; color: #ffb3b3; background: #3a2026; }
.drow .dro { font-size: 10px; color: var(--faint); border: 1px solid #2f3a4e; border-radius: 6px; padding: 0 5px; flex: none; }
.doc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; color: var(--dim); font-size: 12.5px; border: 1px dashed #2f3a4e; border-radius: 8px; margin-bottom: 6px; }

.scene-list { display: flex; flex-direction: column; gap: 1px; }
.scene { display: flex; gap: 6px; align-items: baseline; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: #bcc7da; font-size: 13px; line-height: 1.35; }
.scene:hover { background: #212a38; }
.scene.on { background: #25334d; color: #fff; }
.scene .n { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.scene.branch { padding-left: 18px; color: #9fb0c9; }
.scene .sig { color: var(--scene); flex: none; }
.scene small { color: var(--faint); font-size: 11px; }
.scene .scopy { flex: none; visibility: hidden; background: none; border: 1px solid #2f3a4e; border-radius: 5px; padding: 0 4px; font-size: 11px; line-height: 1.4; color: var(--dim); cursor: pointer; }
.scene:hover .scopy { visibility: visible; }
.scene .scopy:hover { color: #fff; border-color: #4a6296; background: #26324a; }
.cast[data-char] { cursor: pointer; }

.cast-list { display: flex; flex-direction: column; gap: 1px; }
.cast { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; font-size: 13px; }
.cast:hover { background: #212a38; }
.cast .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cast .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast code { font-size: 11px; color: var(--faint); }
.cast .cnt { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.cast .tag { font-size: 10px; padding: 0 5px; border-radius: 8px; background: #2a2f3b; color: #8791a5; }
.cast .tag.game { background: #1f3a31; color: #7fd3ad; }

.docinfo { margin-top: 16px; padding: 10px; border: 1px dashed #2a3342; border-radius: 10px; color: var(--dim); font-size: 12.5px; }

/* ── 편집 ── */
.ed { display: flex; flex-direction: column; background: var(--bg); }
.ed-body { flex: 1; min-height: 0; display: flex; }
.ed-body > .editor { flex: 1; min-width: 220px; }
.boardcol { flex: none; width: clamp(190px, 40%, 360px); min-width: 0; border-left: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.ed-body.with-board .boardcol { display: flex; flex-direction: column; }
.ed-body:not(.with-board) .boardcol { display: none; } /* board.css 의 .sdb { display:flex } 보다 강하게 */
.boardtoggle.on { background: #223049; border-color: #3b74d8; color: #fff; }
.ed.is-empty .linebar, .ed.is-empty .tagbar { opacity: .4; pointer-events: none; }
.ed.is-empty .linebar .boardtoggle { pointer-events: auto; }
.ed-empty { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--dim); font-size: 15px; background: var(--bg); }
.linebar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #151b25; flex-wrap: wrap; min-height: 54px; }
.linebar.off .lb-group, .linebar.off .focus, .linebar.off #btnSwap { opacity: .35; pointer-events: none; }
.lb-group { display: flex; align-items: center; gap: 6px; }
.lb-label { font-size: 11.5px; color: var(--faint); }
.who { display: flex; align-items: center; gap: 7px; background: #1c2431; border: 1px solid #33405a; border-radius: 10px; padding: 3px 9px 3px 4px; cursor: pointer; min-width: 128px; }
.who:hover { border-color: #5373b5; background: #222d40; }
.who .thumb { width: 32px; height: 32px; border-radius: 7px; background: #2a3243 center/contain no-repeat; image-rendering: pixelated; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; font-size: 15px; }
.who .who-name { font-weight: 600; flex: 1; text-align: left; white-space: nowrap; }
.who code { font-size: 11px; color: var(--faint); }
.focus { position: relative; display: flex; background: #1c2431; border: 1px solid #33405a; border-radius: 999px; padding: 3px; cursor: pointer; font-size: 12px; }
.focus span { padding: 3px 10px; border-radius: 999px; color: var(--faint); transition: all .12s; white-space: nowrap; }
.focus[data-at="L"] .fl { background: #2d5fb8; color: #fff; }
.focus[data-at="R"] .fr { background: #2d5fb8; color: #fff; }
.line-hint { margin-left: auto; font-size: 12px; color: var(--dim); max-width: 36%; text-align: right; }

.tagbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: #131922; align-items: center; }
.tagbar .grp { display: flex; gap: 3px; align-items: center; padding-right: 8px; margin-right: 4px; border-right: 1px solid #263042; }
.tagbar .grp:last-child { border: 0; }
.tagbar .glabel { font-size: 11px; color: var(--faint); margin-right: 3px; }
.tb { background: #1c2431; border: 1px solid #2d384c; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; cursor: pointer; color: #cbd5e6; }
.tb:hover { background: #26324a; border-color: #4a6296; }
.sw { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.sw:hover { transform: scale(1.15); }
.swl { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 4px 0 0; cursor: pointer; color: #cbd5e6; }
.swl:hover .sw { transform: scale(1.15); }
.swl:hover .sw-label { color: #fff; }
.sw-label { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.tb-color { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.tb-color::-webkit-color-swatch-wrapper { padding: 0; }
.tb-color::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.25); border-radius: 5px; }
.tb-color::-moz-color-swatch { border: 1px solid rgba(255,255,255,.25); border-radius: 5px; }
.tb-hex { width: 70px; background: #121823; border: 1px solid #2d384c; border-radius: 6px; padding: 1px 6px; font: 12px var(--mono); color: #cbd5e6; outline: none; }
.tb-hex:focus { border-color: var(--accent); }
.tb-recent { display: inline-flex; gap: 3px; margin-left: 2px; }
.tb-recent:empty { display: none; }

.editor { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.overlay, #ta {
  position: absolute; inset: 0; margin: 0; border: 0;
  padding: 10px 16px 120px calc(var(--gut) + 10px);
  font: 15px/1.75 var(--mono); letter-spacing: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4;
  scrollbar-width: none;
}
.overlay { overflow: hidden; pointer-events: none; color: #d6deec; }
.overlay::-webkit-scrollbar, #ta::-webkit-scrollbar { display: none; }
#ta { background: transparent; color: transparent; caret-color: #fff; resize: none; outline: none; overflow-y: auto; z-index: 2; }
#ta::selection { background: rgba(106,168,255,.38); color: transparent; }
#ta::placeholder { color: var(--faint); }
.ln { position: relative; min-height: 1.75em; border-radius: 4px; }
.ln .gut { position: absolute; left: calc(-1 * var(--gut)); width: calc(var(--gut) - 10px); text-align: right; color: #4a5568; font-size: 11.5px; user-select: none; padding-right: 2px; }
.ln.cur { background: rgba(106,168,255,.09); }
.ln.cur .gut { color: #9fc2ff; }
.ln.is-err .gut::after { content: "●"; color: var(--err); margin-left: 3px; }
.ln.is-warn .gut::after { content: "●"; color: var(--warn); margin-left: 3px; }
.ln.is-info .gut::after { content: "●"; color: var(--info); margin-left: 3px; }
/* 주의: 이 레이어는 textarea 와 줄 높이/글자 폭이 정확히 같아야 한다. 굵기, 여백, 패딩을 넣지 말 것 */
.ln.t-scene { color: var(--scene); background: linear-gradient(90deg, rgba(138,209,181,.10), transparent 70%); }
.ln.t-scene::before { content: ""; position: absolute; left: -8px; top: .3em; bottom: .3em; width: 3px; background: var(--scene); border-radius: 2px; opacity: .8; }
.ln.t-note { color: var(--note); opacity: .82; }
.h-key { color: #4e5b70; }
.h-pipe { color: #3a4558; }
.h-code { border-radius: 3px; }
.h-at { color: #7fb3ff; }
.h-tag { color: #c9a0ff; background: rgba(160,110,255,.12); border-radius: 3px; }
.h-tag.bad { color: #ff9d9d; background: rgba(240,90,90,.2); text-decoration: wavy underline #f07a7a; }
.h-nl { color: #6ec1d3; background: rgba(90,200,220,.13); border-radius: 3px; }
.h-miss { background: rgba(240,90,90,.28); border-bottom: 2px solid var(--err); }
.h-bad { color: #ff9d9d; text-decoration: wavy underline #f07a7a; }

/* ── 미리보기 ── */
.pv { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; overflow-y: auto; }
.stage { position: relative; margin: 10px 12px 0; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 28px rgba(0,0,0,.45); aspect-ratio: 16 / 9; flex: none; }
.stage canvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.stage:fullscreen { border-radius: 0; margin: 0; display: grid; place-items: center; background: #000; }
.stage:fullscreen canvas { width: auto; height: 100%; max-width: 100%; aspect-ratio: 16/9; }
.stage-badges { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 6px; pointer-events: none; }
.badge { font-size: 11px; background: rgba(10,14,22,.75); color: #cdd7e8; padding: 2px 7px; border-radius: 999px; }
.controls { display: flex; align-items: center; gap: 5px; padding: 8px 12px; flex-wrap: wrap; }
.controls select { padding: 5px 6px; }
.controls .spacer { flex: 1; }
.readbox-wrap { margin: 0 12px 8px; }
.readlabel { font-size: 12px; color: var(--dim); margin: 0 2px 4px; }
.readbox { background: #d8dad9; color: #111; border-radius: 10px; padding: 12px 16px; font: 17px/1.6 var(--ui); min-height: 52px; word-break: keep-all; overflow-wrap: anywhere; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.readbox .rb-empty { color: #889; }
.readbox .fx-shake { display: inline-block; animation: rbshake .25s infinite; }
.readbox .fx-wave { display: inline-block; animation: rbwave 1s ease-in-out infinite; }
.readbox .fx-rainbow { background: linear-gradient(90deg,#e33,#e90,#3b3,#39e,#93e); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
@keyframes rbshake { 0%{transform:translate(0,0)} 25%{transform:translate(1px,-1px)} 50%{transform:translate(-1px,1px)} 75%{transform:translate(1px,1px)} 100%{transform:translate(0,0)} }
@keyframes rbwave { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.main.noside { grid-template-columns: 0 minmax(380px, 1fr) var(--pv-w); }
.main.noside .side { display: none; }
.inspect { margin: 0 12px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: #b4bfd1; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.inspect b { color: var(--dim); font-weight: 500; }
.inspect .mono { font-family: var(--mono); color: #d8e0ee; }
.inspect.empty { display: block; color: var(--faint); }

.tabs { display: flex; gap: 2px; margin: 12px 12px 0; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; padding: 7px 12px; cursor: pointer; color: var(--dim); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: #fff; border-color: var(--accent); }
.tabs b { font-weight: 600; background: #2a3446; border-radius: 9px; padding: 0 7px; font-size: 11.5px; margin-left: 3px; }
.tabs b.has { background: #5b3b2a; color: #ffcf99; }
.tabs b.haserr { background: #5b2a2a; color: #ffb3b3; }
.panel { padding: 10px 12px 30px; font-size: 13px; }

.issue { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.issue:hover { background: #212a38; }
.issue .sev { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.issue.error .sev { background: var(--err); }
.issue.warn .sev { background: var(--warn); }
.issue.info .sev { background: var(--info); }
.issue .ln-no { flex: none; font: 11.5px var(--mono); color: var(--faint); width: 34px; text-align: right; margin-top: 2px; }
.issue .msg { flex: 1; color: #cbd5e6; }
.issue .fixbtn { flex: none; align-self: center; }
.issue-sum { color: var(--dim); font-size: 12px; padding: 0 8px 6px; }
.ok-msg { color: #8ad1b5; padding: 8px; }

.xp h4 { margin: 14px 0 6px; font-size: 12.5px; color: var(--dim); font-weight: 600; }
.xp h4:first-child { margin-top: 2px; }
.xp p { color: var(--dim); margin: 4px 0 8px; font-size: 12.5px; }
.xp .row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.xp .row .btn { font-size: 12.5px; }
.xp-base { font-size: 12px; padding: 6px 9px; border-radius: 8px; margin: 6px 0; }
.xp-base.ok { background: #16261f; border: 1px solid #23493a; color: #8ad1b5; }
.xp-base.warn { background: #2a2416; border: 1px solid #4d4024; color: #e6c27a; }
.xp-err { background: #2a1b1f; border: 1px solid #6a3434; color: #ffb3b3; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; margin: 6px 0; }
.xp-busy { color: var(--dim); font-size: 12.5px; padding: 6px 2px; }
.xp-report { border: 1px solid var(--line); background: var(--panel2); border-radius: 10px; padding: 8px 10px; margin: 6px 0 4px; font-size: 12.5px; }
.xr-title { color: var(--dim); font-weight: 600; margin-bottom: 4px; }
.xr-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: baseline; }
.xr-grid b { color: var(--dim); font-weight: 500; white-space: nowrap; }
.xr-grid code { font-size: 11.5px; background: #10151d; border: 1px solid #2a3342; border-radius: 4px; padding: 0 4px; color: #cfe0ff; display: inline-block; margin: 1px 0; }
.xr-grid details summary { cursor: pointer; color: var(--dim); display: inline; }
.xr-grid .dim { color: var(--faint); }
.xr-warn { margin-top: 8px; color: #e6c27a; }
.xr-warn ul { margin: 2px 0 0; padding-left: 18px; }
.xp-name { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12.5px; color: var(--dim); }
.xp-name input { flex: 1; min-width: 0; background: #121823; border: 1px solid #33405a; border-radius: 8px; padding: 4px 8px; outline: none; }
.xp-name input:focus { border-color: var(--accent); }
.xp pre { background: #10151d; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-height: 190px; overflow: auto; font: 12px/1.55 var(--mono); color: #b9c6dc; white-space: pre; margin: 6px 0; }

/* ── 캐릭터 선택 팝업 ── */
.picker { position: fixed; z-index: 50; width: 360px; max-height: 70vh; overflow: auto; background: #1b2332; border: 1px solid #3a4a68; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.6); padding: 8px; }
.picker h5 { margin: 4px 6px 8px; font-size: 12px; color: var(--dim); font-weight: 600; display: flex; justify-content: space-between; }
.pk-search { width: 100%; background: #121823; border: 1px solid #33405a; border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; outline: none; }
.pk-search:focus { border-color: var(--accent); }
.pk-char { padding: 6px; border-radius: 8px; }
.pk-char:hover { background: #222d41; }
.pk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pk-head .dot { width: 10px; height: 10px; border-radius: 3px; }
.pk-head b { font-size: 13px; }
.pk-head small { color: var(--faint); font-size: 11px; }
.pk-faces { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-face { width: 62px; padding: 4px 2px 3px; background: #131a26; border: 1px solid #2f3b52; border-radius: 8px; cursor: pointer; text-align: center; font-size: 11px; color: #aab6ca; }
.pk-face:hover { border-color: #6d92e0; background: #1a2436; }
.pk-face.sel { border-color: var(--accent); background: #213350; color: #fff; }
.pk-face .thumb { width: 44px; height: 44px; margin: 0 auto 2px; border-radius: 8px; background: #263047 center/contain no-repeat; image-rendering: pixelated; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; }
.pk-face code { display: block; color: var(--faint); font-size: 10.5px; }
.pk-add { margin-top: 4px; font-size: 11.5px; color: var(--dim); background: none; border: 1px dashed #34405a; border-radius: 8px; padding: 2px 8px; cursor: pointer; }
.pk-add:hover { color: #fff; border-color: #5d79b5; }
.picker h5 .linkbtn { font-size: 11.5px; margin-right: 6px; }
.pk-none { color: var(--faint); font-size: 12px; padding: 6px 8px; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #26324a; border: 1px solid #4a6296; padding: 8px 16px; border-radius: 999px; z-index: 99; box-shadow: 0 8px 26px rgba(0,0,0,.5); }

.modal { position: fixed; inset: 0; background: rgba(5,8,14,.72); z-index: 80; display: grid; place-items: center; }
.modal-card { background: #19202c; border: 1px solid #34405a; border-radius: 16px; width: min(860px, 92vw); max-height: 88vh; overflow: auto; padding: 24px 30px 28px; line-height: 1.7; }
.modal-card h2 { margin: 0 0 4px; }
.modal-card h3 { margin: 22px 0 6px; color: #9fc2ff; font-size: 15px; }
.modal-card table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 13.5px; }
.modal-card td, .modal-card th { border-bottom: 1px solid #2a3342; padding: 5px 8px; text-align: left; vertical-align: top; }
.modal-card th { color: var(--dim); font-weight: 500; }
.modal-card code { background: #10151d; border: 1px solid #2a3342; border-radius: 4px; padding: 0 5px; font-size: 12.5px; color: #cfe0ff; }

@media (max-width: 1280px) { :root { --pv-w: 480px; } .main { grid-template-columns: 210px minmax(340px,1fr) var(--pv-w); } }

/* ── 작은 입력 창 / 시작 화면 ── */
.form-card { width: min(470px, 92vw); padding: 20px 22px 18px; }
.form-card h2 { font-size: 17px; margin-bottom: 12px; }
.ff { display: block; margin-bottom: 10px; }
.ff > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 3px; }
.ff input { width: 100%; background: #121823; border: 1px solid #33405a; border-radius: 8px; padding: 6px 9px; outline: none; }
.ff input:focus { border-color: var(--accent); }
.ff input:disabled { opacity: .55; }
.ff small { display: block; color: var(--faint); font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
.form-err { color: var(--err); font-size: 12.5px; min-height: 1.2em; }
.form-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.start-card { width: min(560px, 92vw); }
.start-card h2 { font-size: 20px; }
.start-sub { color: var(--dim); margin: 4px 0 14px; }
.start-opts { display: flex; flex-direction: column; gap: 8px; }
.start-opt { text-align: left; background: #1e2633; border: 1px solid #34405a; border-radius: 12px; padding: 12px 16px; cursor: pointer; }
.start-opt:hover { border-color: #5d79b5; background: #243049; }
.start-opt b { display: block; font-size: 15px; color: #fff; }
.start-opt span { display: block; color: var(--dim); font-size: 12.5px; }
.start-err { color: var(--err); font-size: 13px; min-height: 1.2em; margin-top: 8px; }
.start-note { color: var(--faint); font-size: 12px; margin: 4px 0 0; }
.fatal { margin: 60px auto; width: min(640px, 92vw); background: #2a1b1f; border: 1px solid #6a3434; border-radius: 14px; padding: 22px 26px; color: #ffd0d0; }
.fatal pre { background: #10151d; border-radius: 8px; padding: 8px 10px; color: #ffb3b3; }

/* ── 캐릭터 관리 창 ── */
.cm-card { width: min(1000px, 96vw); height: min(720px, 88vh); padding: 0; display: flex; flex-direction: column; overflow: hidden; line-height: 1.5; }
.cm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cm-head h2 { margin: 0; font-size: 17px; }
.cm-hint { color: var(--faint); font-size: 11.5px; }
.cm-err { color: var(--err); font-size: 11.5px; }
.cm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; }
.cm-list { border-right: 1px solid var(--line); overflow: auto; padding: 8px; background: var(--panel); }
.cm-row { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.cm-row:hover { background: #212a38; }
.cm-row.on { background: #223049; color: #fff; }
.cm-row .dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cm-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row code { font-size: 11px; color: var(--faint); }
.cm-row .cnt { font-size: 11px; color: var(--dim); min-width: 14px; text-align: right; }
.tag { font-size: 10px; padding: 0 6px; border-radius: 8px; background: #2a2f3b; color: #8791a5; white-space: nowrap; }
.tag.game { background: #1f3a31; color: #7fd3ad; }
.tag.new { background: #2b2a44; color: #b9b3ff; }
.cm-new { width: 100%; margin-top: 8px; }
.cm-game { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px; }
.cm-sub { width: 100%; font-size: 11.5px; color: var(--faint); }
.cm-game code { font-size: 10.5px; color: var(--faint); }
.cm-empty { color: var(--faint); font-size: 12.5px; padding: 8px; }
.cm-empty.big { padding: 40px 20px; text-align: center; font-size: 14px; }
.cm-edit { overflow: auto; padding: 14px 18px 20px; }
.cm-edit h4 { margin: 18px 0 6px; font-size: 13px; color: var(--dim); font-weight: 600; }
.cm-edit h4 small { color: var(--faint); font-weight: 400; }
.cm-grid { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; align-items: center; }
.cm-grid > label { font-size: 12.5px; color: var(--dim); }
.cm-grid input:not([type=color]), .cm-grid textarea, .cm-faces input { width: 100%; background: #121823; border: 1px solid #33405a; border-radius: 7px; padding: 5px 8px; outline: none; }
.cm-grid textarea { resize: vertical; font: inherit; }
.cm-grid input:focus, .cm-grid textarea:focus, .cm-faces input:focus { border-color: var(--accent); }
.cm-grid input[type=color] { width: 44px; height: 28px; padding: 0; border: 1px solid #33405a; border-radius: 6px; background: none; cursor: pointer; vertical-align: middle; }
.cm-grid select, .cm-faces select { padding: 3px 6px; }
.cm-faces { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cm-faces th { text-align: left; color: var(--faint); font-weight: 500; font-size: 11.5px; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.cm-faces td { padding: 5px 6px; border-bottom: 1px solid #222a37; vertical-align: middle; }
.cm-thumb { width: 52px; height: 52px; border-radius: 8px; background: #263047 center/contain no-repeat; image-rendering: pixelated; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #fff; }
.cm-codecell { white-space: nowrap; }
.cm-codecell code { color: var(--dim); margin-right: 1px; }
.cm-imgcell { white-space: nowrap; }
.cm-uses { font-size: 11px; color: var(--faint); margin-top: 2px; }
.cm-x { padding: 1px 7px; }
.cm-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }