/* 글꼴 (2026-10-10): 모두 같은 글꼴로 보이게 public/fonts/에 둔 파일을 쓴다. 파일이 없으면 아래 순서의 설치 글꼴 */
@font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap;
  src: url('/fonts/PretendardVariable.woff2') format('woff2'); }
@font-face { font-family: 'Hahmlet'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/fonts/hahmlet.woff') format('woff'), url('/fonts/Hahmlet-VariableFont_wght.ttf') format('truetype'); } /* hahmlet.woff = 한글 2350자·영문만 줄인 판 (원본 3.5MB → 1MB) */
@font-face { font-family: 'Oxanium'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/fonts/Oxanium-Bold.woff2') format('woff2'); } /* 숫자·영문 표시용 (OFL, Oxanium-OFL.txt) */
/* ==== 디자인 토큰 (1단계: 지금 값 그대로 한 곳에 모음) ====
   바꿀 때는 여기 값만 고친다. 테마(프리셋)는 이 값 세트만 바꾼다. 자세한 설명은 DESIGN-TOKENS.md */
:root {
  /* 글자 */
  --ui-fs: 1.06; /* 글자 크기 배율 (설정 ‘글자 크기’) */
  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-serif: Hahmlet, 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif;
  --font-mono: ui-monospace, Consolas, 'D2Coding', monospace;
  --font-display: 'Oxanium', var(--font-sans); /* 주사위 결과 숫자·연출 띠의 영문 */
  /* 바탕·선·글자 */
  --bg: #0e1118; /* 가장 아래 바탕 */
  --bg2: #141924; /* 패널·카드 */
  --bg3: #1b212e; /* 입력칸·한 단 위 */
  --bg4: #252c3b; /* 두 단 위 */
  --ink: #0c0e12; /* 가장 어두운 바탕 (툴팁·영상 뒤) */
  --line: #242b39; /* 구분선·테두리 */
  --line2: #333c4f; /* 진한 테두리 */
  --text: #ebe8e3; /* 본문 글자 */
  --muted: #8e97ab; /* 흐린 글자·안내 */
  --text-dim: #c3c8d4; /* 도구 막대 아이콘 글자 */
  --on-light: #111111; /* 밝은 바탕 위 글자 */
  /* 강조·상태 */
  --accent: #22bde6; /* 강조 (시안) */
  --accent2: #6ddcf7; /* 밝은 강조 */
  --accent-ink: #04202a; /* 강조 바탕 위 글자 */
  --accent-soft: color-mix(in srgb, var(--accent) 12.2%, transparent);
  --gold: #f2c14e; /* 금색 (중요·GM·주사위 결과) */
  --ok: #4fc58a; /* 성공·접속 */
  --bad: #e5604f; /* 위험·실패 */
  --purple: #a77bff; /* 보조 강조 (엑스트라·특수) */
  --navy: #2f3d66;
  --platinum: #d8cfc2;
  /* 덧칠 */
  --tint: #ffffff; /* 밝게 덧칠할 색 (반투명으로 씀) */
  --shade: #000000; /* 어둡게 덧칠할 색 (반투명으로 씀) */
  /* 모서리 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-pill: 99px;
  --r-round: 50%;
  --radius: 10px; /* 예전 이름 (= --r-lg) */
  /* 그림자 */
  --shadow: 0 10px 32px color-mix(in srgb, var(--shade) 50.2%, transparent); /* 대화창·큰 창 */
  --shadow-sm: 0 1px 4px color-mix(in srgb, var(--shade) 53.3%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--shade) 46.7%, transparent);
  --shadow-lg: 0 10px 30px color-mix(in srgb, var(--shade) 66.7%, transparent);
  --shadow-xl: 0 16px 40px color-mix(in srgb, var(--shade) 80%, transparent);
  /* 글자 크기 */
  --text-10: calc(10px * var(--ui-fs, 1));
  --text-10-5: calc(10.5px * var(--ui-fs, 1));
  --text-11: calc(11px * var(--ui-fs, 1));
  --text-11-5: calc(11.5px * var(--ui-fs, 1));
  --text-12: calc(12px * var(--ui-fs, 1));
  --text-12-5: calc(12.5px * var(--ui-fs, 1));
  --text-13: calc(13px * var(--ui-fs, 1));
  --text-13-5: calc(13.5px * var(--ui-fs, 1));
  --text-14: calc(14px * var(--ui-fs, 1));
  --text-14-5: calc(14.5px * var(--ui-fs, 1));
  --text-15: calc(15px * var(--ui-fs, 1));
  --text-16: calc(16px * var(--ui-fs, 1));
  --text-18: calc(18px * var(--ui-fs, 1));
  --text-20: calc(20px * var(--ui-fs, 1));
  --text-22: calc(22px * var(--ui-fs, 1));
  --text-24: calc(24px * var(--ui-fs, 1));
  --text-28: calc(28px * var(--ui-fs, 1));
  font-family: var(--font-sans);
  color-scheme: dark;
}
.media-library { min-width: 0; }
.media-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
.media-tabs .on { border-color: var(--accent); background: #14384a; }
.media-library > .row > button.on { border-color: var(--accent); background: #14384a; }
.media-library > .row > input[type=search] { flex: 1; min-width: 0; }
.media-library > .row > select { width: 150px; flex: none; }
body.viewer .board-edit { display: none; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.media-item { border: 1px solid var(--line); padding: 5px; border-radius: var(--r-sm); min-width: 0; }
.media-item.selected { border-color: var(--accent); }
.media-pick { width: 100%; padding: 4px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.media-pick img { width: 100%; height: 92px; object-fit: contain; display: block; }
.media-pick span { display: block; font-size: var(--text-12); }
.media-tracks .media-item { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.media-tracks .media-pick { flex: 1; }
.media-tracks .media-pick { display:flex; align-items:center; gap:12px; min-width:0; }
.media-tracks .media-pick span:last-child { min-width:0; overflow-wrap:anywhere; }
.media-add { font-size: var(--text-22); width:36px; height:34px; padding:0; }
.media-playback { padding:8px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.media-playback label { margin:0; }
.media-library input[type=range] { width:130px; }
.media-audio-icon { font-size: var(--text-24) !important; }
.media-library audio { width: 100%; }
.media-folder-checks, .media-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.media-editor { padding: 12px; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-sm); }
.board-selection-box { position: absolute; z-index: 45; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 13.3%, transparent); pointer-events: none; }
@media(max-width: 600px) { .media-tracks .media-item { flex-wrap: wrap; } .media-tracks .media-pick { flex-basis: 100%; } .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-size: var(--text-14); }
body:has(#app:not(.hidden)) { overflow:hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  white-space: nowrap;
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { background: var(--accent2); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--bg3); }
button.small { padding: 2px 8px; font-size: var(--text-12); }
button:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=number], input[type=email], select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; }
label { display: block; color: var(--muted); font-size: var(--text-12); margin: 10px 0 4px; }
a { color: var(--accent2); }
.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }

/* ---------- 로비 ---------- */
.lobby { max-width: 640px; margin: 0 auto; padding: 40px 16px; }
.lobby h1 { font-size: calc(26px * var(--ui-fs, 1)); margin: 0 0 4px; letter-spacing: -.5px; }
.lobby h1 span { color: var(--accent); }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.room-list { list-style: none; padding: 0; margin: 8px 0 0; }
.room-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.room-list li:first-child { border-top: 0; }
.room-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.room-list a:hover { color: var(--accent2); }
.badge { font-size: var(--text-11); padding: 1px 6px; border-radius: var(--r-lg); background: var(--bg3); color: var(--muted); }
.badge.gm { background: #14384a; color: var(--accent2); }

/* ---------- 방 레이아웃 ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px 1fr; height: 100vh; height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
.topbar .title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence { display: flex; gap: 2px; margin-left: 8px; }
.avatar { width: 24px; height: 24px; border-radius: var(--r-round); background: var(--bg3); object-fit: cover; display: inline-grid; place-items: center; font-size: var(--text-11); border: 2px solid transparent; }
.avatar.on { border-color: var(--ok); }
.main { display: grid; grid-template-columns: 260px minmax(0, 1fr) 420px; min-height: 0; min-width: 0; }
.panel { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width:0; }
.panel-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
.panel-body { overflow: auto; flex: 1; padding: 8px; }

.stage { position: relative; background: #0d0e11 center/cover no-repeat; min-height: 0; overflow: hidden; }
.stage-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #3b404d; font-size: var(--text-13); text-align: center; padding: 16px; }

/* 캐릭터 카드 */
.char-card { display: flex; gap: 8px; padding: 8px; border-radius: var(--radius); background: var(--bg3); margin-bottom: 6px; cursor: pointer; border: 1px solid transparent; }
.char-card:hover { border-color: var(--line); }
.char-card.active { border-color: var(--accent); }
.char-card .face { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg); flex: none; }
.char-card .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-card .owner { font-size: var(--text-11); color: var(--muted); }
.stat { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px; font-size: var(--text-11); margin-top: 2px; }
.stat .bar { position: relative; height: 14px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.stat .bar i { position: absolute; inset: 0 auto 0 0; background: #3b6fd1; }
.stat .bar span { position: relative; padding-left: 4px; line-height: 14px; }
.stat.erosion .bar i { background: #b0405a; }
.stat.erosion.over100 .bar i { background: var(--bad); }
.stat.lois .bar i { background: #b48a2e; }

/* ---------- 채팅 ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; min-width:0; background: var(--bg2); border-left: 1px solid var(--line); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-radius: 0; background: transparent; padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs button .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: var(--r-round); margin-left: 4px; vertical-align: middle; }
.log { flex: 1; min-height:0; overflow-y: auto; overflow-x:hidden; padding: 6px 0; }
.msg { display: flex; gap: 8px; padding: 6px 10px; position: relative; }
.msg:hover { background: color-mix(in srgb, var(--tint) 2.4%, transparent); }
.msg .face { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--bg3); }
.msg .face.none { visibility: hidden; }
.msg .head { display: flex; gap: 6px; align-items: baseline; }
.msg .who { font-weight: 700; }
.msg .time { font-size: var(--text-11); color: var(--muted); }
.msg .body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.msg .tools { position: absolute; right: 6px; top: 4px; display: none; gap: 2px; }
.msg:hover .tools { display: flex; }
.msg.t-system { color: var(--muted); font-size: var(--text-12); padding: 3px 10px 3px 62px; }
.msg.t-status .body { color: #b9c3e6; }
.dice { margin-top: 3px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--bg); border-left: 3px solid #4a5163; font-family: var(--font-mono); font-size: var(--text-13); white-space: pre-wrap; word-break: break-all; }
.dice.critical { border-left-color: var(--gold); }
.dice.critical .total { color: var(--gold); }
.dice.fumble { border-left-color: var(--bad); }
.dice.fumble .total { color: var(--bad); }
.dice.success { background: #16261e; }
.dice.fail { background: #2a1a1a; }
.dice.secret { color: var(--muted); font-style: italic; }
.dice .total { font-weight: 700; font-size: var(--text-15); }
.portrait-pop { position: fixed; pointer-events: none; z-index: 50; width: 320px; max-height: 70vh; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 8px 30px color-mix(in srgb, var(--shade) 66.7%, transparent); background: color-mix(in srgb, var(--shade) 53.3%, transparent); }

/* 입력창 */
.composer { border-top: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.composer .who-row { display: flex; gap: 6px; align-items: center; }
.composer select { width: auto; max-width: 200px; }
.expr-btn { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; }
.expr-btn img { width: 28px; height: 28px; border-radius: var(--r-xs); object-fit: cover; background: var(--bg); }
.composer textarea { min-height: 116px; max-height: 240px; }
.hint { font-size: var(--text-11); color: var(--muted); }

/* 표정 팝업 */
.popover { position: fixed; z-index: 40; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: 0 10px 30px color-mix(in srgb, var(--shade) 53.3%, transparent); max-width: 400px; max-height: 360px; overflow: auto; }

/* 대화상자 */
dialog { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: color-mix(in srgb, var(--shade) 66.7%, transparent); }
dialog .d-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
dialog .d-body { padding: 4px 16px 16px; overflow: auto; max-height: calc(100vh - 160px); }
dialog .d-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }
dialog.floating-window { position:fixed; margin:0; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); min-height:160px; box-shadow:0 12px 48px color-mix(in srgb, var(--shade) 60%, transparent); }
dialog.floating-window[open] { display:flex; flex-direction:column; }
dialog.floating-window .d-head { cursor:move; flex:none; touch-action:none; user-select:none; }
dialog.floating-window .d-head:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
dialog.floating-window .d-body { flex:1; min-height:0; max-height:none; }
dialog.floating-window .d-foot { flex:none; flex-wrap:wrap; }
.window-grip { position:absolute; width:20px; height:20px; right:0; bottom:0; cursor:nwse-resize; touch-action:none; background:linear-gradient(135deg,transparent 55%,var(--muted) 56%,transparent 62%,var(--muted) 70%,transparent 76%); }
.sound-compact { display:flex; align-items:center; gap:4px; }
.sound-compact input { width:90px; }
.char-portrait { position:relative; flex:none; }
.initiative-badge { position:absolute; left:-3px; top:-5px; min-width:22px; text-align:center; padding:2px 4px; background:var(--gold); color:#14161b; border-radius:5px; font-size: var(--text-12); box-shadow:0 1px 4px color-mix(in srgb, var(--shade) 60%, transparent); }
.xp-total { display:block; color:var(--gold); background:var(--bg3); padding:10px; margin-bottom:8px; border-radius:var(--r-sm); font-weight:600; }
.works-table { margin-top:8px; }
.works-table table { width:100%; border-collapse:collapse; }
.works-table td,.works-table th { padding:6px; border-bottom:1px solid var(--line); text-align:left; }
.effect-group { overflow-x:auto; }
.effect-group .eff-head,.effect-group .eff-row { min-width:980px; }
.combo-preview { white-space:pre-wrap; line-height:1.7; }
.sheet-pane .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.skill-row,.skill-head { grid-template-columns:minmax(85px,1fr) 42px 58px 32px 66px !important; }
.skill-head { text-align:center; }
.skill-head span:first-child { text-align:left; }
.sheet-pane .derived > div { min-width:120px; padding:8px 12px; }
.portrait-pop { z-index:3000; pointer-events:none; }
.stand-layer { pointer-events:none; }
.dialogue-box { position:absolute; left:50%; transform:translateX(-50%); bottom:30px; width:min(700px,calc(100% - 24px)); background:#151821ed; border:1px solid #687187; border-radius:var(--r-lg); box-shadow:0 6px 26px color-mix(in srgb, var(--shade) 60%, transparent); display:flex; align-items:flex-start; padding:14px; gap:14px; pointer-events:auto; cursor:pointer; max-height:40%; overflow:auto; }
.dialogue-portrait { width:100px; height:120px; object-fit:contain; flex:none; align-self:flex-start; }
.dialogue-content { min-width:0; font-size: var(--text-16); line-height:1.65; }
.dialogue-content p { white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0 0; }
.scene-pick { display:flex; align-items:center; gap:12px; text-align:left; flex:1; min-width:0; white-space:normal; }
.scene-transition { position:absolute; inset:0; background:var(--shade); z-index:90; pointer-events:none; animation:scene-fade .8s both; }
.scene-transition.left { animation-name:scene-left; }
.scene-transition.right { animation-name:scene-right; }
@keyframes scene-fade { 0%,100% { opacity:0; } 40%,60% { opacity:1; } }
@keyframes scene-left { 0%{clip-path:inset(0 0 0 100%)} 40%,60%{clip-path:inset(0)} 100%{clip-path:inset(0 100% 0 0)} }
@keyframes scene-right { 0%{clip-path:inset(0 100% 0 0)} 40%,60%{clip-path:inset(0)} 100%{clip-path:inset(0 0 0 100%)} }
@media(max-width:600px){ .sheet-pane .grid4 {grid-template-columns:1fr;} .dialogue-portrait{width:64px;height:90px;} .dialogue-content{font-size: var(--text-14);} .media-playback{gap:8px;} }
.grid-status { display: grid; grid-template-columns: 1fr 80px 80px 32px; gap: 6px; align-items: center; }
.expr-edit { display: grid; grid-template-columns: 56px 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.expr-edit img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-xs); background: var(--bg); }
.dropzone { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; text-align: center; color: var(--muted); cursor: pointer; }
.dropzone.over { border-color: var(--accent); color: var(--text); }
.member-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: color-mix(in srgb, var(--shade) 86.7%, transparent); padding: 8px 14px; border-radius: var(--r-md); z-index: 100; max-width: 90vw; }
.conn-state { font-size: var(--text-11); color: var(--bad); }

/* 모바일 */
.mobile-tabs { display: none; }
@media (max-width: 900px) {
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
  .topbar { min-width: 0; overflow-x: auto; }
  .topbar > * { flex-shrink: 0; }
  .topbar .title { max-width: 140px; }
  .main > * { display: none; }
  .main > .show { display: flex; }
  .main > .stage.show { display: block; }
  .app { grid-template-rows: 44px 1fr 44px; }
  .mobile-tabs { display: flex; background: var(--bg2); border-top: 1px solid var(--line); }
  .mobile-tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
  .mobile-tabs button.on { color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
  .portrait-pop { display: none; }
}

/* ---------- 캐릭터 시트 ---------- */
dialog.wide { width: min(1100px, calc(100vw - 24px)); }
.sheet-tabs { position: sticky; top: 0; background: var(--bg2); z-index: 2; margin: 0 -16px; padding: 0 8px; overflow-x: auto; }
.sheet-pane { padding-top: 6px; }
.sheet input[type=text], .sheet input[type=number], .sheet select { padding: 4px 6px; }
.sheet input:disabled, .sheet textarea:disabled, .sheet select:disabled { opacity: .85; }
.fld label { margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.grid5 { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 0 8px; }
.derived { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.derived > div { background: var(--bg3); border-radius: var(--r-sm); padding: 4px 10px; display: flex; gap: 8px; align-items: baseline; font-size: var(--text-12); }
.ability-block { background: var(--bg3); border-radius: var(--radius); padding: 8px; }
.ability-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ability-head > b:first-child { flex: 1; font-size: var(--text-15); }
.skill-row, .skill-head { display: grid; grid-template-columns: minmax(0,1fr) 24px 44px 22px auto; gap: 4px; margin-top: 4px; align-items: center; }
.skill-head { font-size: var(--text-10); margin-top: 8px; }
.wbonus { color: var(--gold); font-size: var(--text-12); text-align: center; }
.stotal { text-align: center; }
.ab-total { font-size: var(--text-20); color: var(--accent2); min-width: 28px; text-align: right; }
.ab-break { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.lois-row { display: grid; grid-template-columns: 90px 1fr 1fr 1fr 1fr auto auto 32px; gap: 6px; align-items: center; padding: 6px; border-radius: var(--r-sm); margin-bottom: 4px; background: var(--bg3); }
.lois-row.titus { opacity: .55; }
.lois-row.v { box-shadow: inset 3px 0 0 var(--gold); }
.lois-row label { font-size: var(--text-12); color: var(--text); white-space: nowrap; }
.emo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--bg); color: var(--muted); font-size: var(--text-11); cursor: pointer; flex: none; }
.emo.on { background: var(--accent); color: var(--accent-ink); }
.eff-head, .eff-row { display: grid; grid-template-columns: 2.2fr 48px 48px 1fr 1fr .8fr .8fr .7fr .7fr 1fr 56px; gap: 4px; align-items: center; }
.eff-head { font-size: var(--text-11); color: var(--muted); padding: 0 2px; }
.eff { margin-top: 4px; }
.eff-detail { margin: 4px 0 8px 30px; }
.combo { background: var(--bg3); border-radius: var(--radius); padding: 8px; margin-bottom: 8px; }
.combo-preview { margin-top: 6px; font-family: var(--font-mono); color: var(--gold); }
.combo-preview.err { color: var(--bad); }
.item-head, .item-row { display: grid; grid-template-columns: 28px 1.8fr .9fr .8fr .5fr .6fr .5fr .6fr .5fr .5fr .5fr .6fr 34px 32px; gap: 4px; align-items: center; margin-top: 4px; }
.item-head { font-size: var(--text-11); color: var(--muted); }
.lib-list { margin-top: 8px; max-height: 60vh; overflow: auto; }
.lib-item { border-top: 1px solid var(--line); padding: 8px 0; }
.lib-text { white-space: pre-wrap; font-size: var(--text-12); line-height: 1.5; margin-top: 4px; color: #c9cdd8; max-height: 7.5em; overflow: auto; }
.palette { min-width: 260px; max-width: 420px; max-height: 60vh; }
.pal-group { font-size: var(--text-11); color: var(--muted); margin: 6px 2px 2px; }
.pal-item { display: flex; width: 100%; gap: 8px; text-align: left; margin-bottom: 2px; background: transparent; border-color: transparent; }
.pal-item:hover { background: var(--bg3); }
@media (max-width: 900px) {
  .grid2, .grid3, .grid5 { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .lois-row { grid-template-columns: 1fr 1fr; }
  .eff-head { display: none; }
  .eff-row { grid-template-columns: 1fr 1fr 1fr; }
  .item-head { display: none; }
  .item-row { grid-template-columns: 28px 1fr 1fr 1fr; }
}

.skill-row input[type=text] { font-size: var(--text-12); padding: 4px; }
.ab-warn { color: var(--bad); font-size: var(--text-11); }

/* ---------- 맵(보드) ---------- */
.stage { touch-action: none; }
.board { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; background: transparent center/cover no-repeat; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 18.8%, transparent); isolation: isolate; }
.board-underlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.board-underlay .obj { pointer-events: auto; }
.board-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.board-layer .obj { pointer-events: auto; }
.board-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--tint) 14.9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--tint) 14.9%, transparent) 1px, transparent 1px); }
.obj { position: absolute; user-select: none; touch-action: none; }
.obj.selected { outline: 2px dashed color-mix(in srgb, var(--gold) 45.1%, transparent); outline-offset: 3px; }
.obj.is-hidden { opacity: .45; }
.token { cursor: grab; }
.token img, .token .token-blank { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.token img { filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--shade) 53.3%, transparent)); }
.token .token-blank { border-radius: var(--r-lg); border: 3px solid color-mix(in srgb, var(--tint) 18.8%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--shade) 53.3%, transparent); }
.token .token-blank { display: grid; place-items: center; font-size: calc(32px * var(--ui-fs, 1)); color: color-mix(in srgb, var(--shade) 66.7%, transparent); font-weight: 700; }
.token-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; font-size: var(--text-15); font-weight: 700; text-shadow: 0 0 4px var(--shade), 0 0 2px var(--shade); pointer-events: none; }
.token-hp { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px; background: color-mix(in srgb, var(--shade) 66.7%, transparent); border-radius: 3px; overflow: hidden; pointer-events: none; }
.token-hp i { position: absolute; inset: 0 auto 0 0; background: var(--ok); }
.token-er { position: absolute; right: -6px; top: -8px; font-size: var(--text-12); padding: 1px 5px; border-radius: var(--r-md); background: color-mix(in srgb, var(--shade) 80%, transparent); color: #e9a0b0; pointer-events: none; }
.token-er.over { color: var(--tint); background: var(--accent); }
.engage { border: 3px dashed; border-radius: var(--r-round); cursor: move; }
.engage-label { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font-weight: 700; font-size: var(--text-16); white-space: nowrap; text-shadow: 0 0 4px var(--shade); }
.obj.panel { background: transparent; border: 0; display: block; overflow: visible; }
.obj.panel img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.panel-label { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: var(--text-13); text-shadow: 0 0 4px var(--shade); }
.board-toolbar { position: absolute; z-index: 30; display: flex; gap: 3px; flex-wrap: wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; box-shadow: 0 6px 20px color-mix(in srgb, var(--shade) 60%, transparent); max-width: 360px; }
.board-toolbar button.on { border-color: var(--gold); color: var(--gold); }
.board-toolbar input[type=color] { width: 28px; height: 24px; padding: 0; border: 0; background: none; }
.zoom-bar { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 3px; z-index: 20; }
.board-gm { position: absolute; left: 8px; bottom: 44px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 20; max-width: calc(100% - 16px); }
.init-panel { position: absolute; left: 8px; top: 8px; z-index: 20; background: #14161be6; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; min-width: 200px; max-height: 60%; overflow: auto; }
.init-panel:empty { display: none; }
.init-head { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.init-row { display: flex; gap: 6px; align-items: center; padding: 3px 4px; border-radius: var(--r-xs); font-size: var(--text-13); }
.init-row.current { background: color-mix(in srgb, var(--gold) 13.3%, transparent); }
.init-row.done { opacity: .5; }
.init-mark { width: 12px; color: var(--gold); }
.char-card.acting { box-shadow: inset 3px 0 0 var(--gold); }
.msg .to { font-size: var(--text-11); color: #c9a0ff; }
.msg.t-sound { color: #8fb7d9; }
.sound-row { display: flex; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.sound-row.playing { color: var(--gold); }
.now-playing { margin: 6px 0; font-weight: 700; }

/* ---------- 상태·연출·씬 ---------- */
.conds { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.cond { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-11); padding: 1px 6px; border-radius: var(--r-lg); background: #5a2a6b; color: #f0d4ff; }
.cond-val { width: 34px !important; padding: 0 3px !important; font-size: var(--text-11); background: transparent !important; border: 0 !important; color: inherit; }
.token-conds { position: absolute; left: -4px; top: -26px; display: flex; gap: 2px; pointer-events: none; transform:scale(var(--token-label-scale,1)); transform-origin:left bottom; }
.token-conds span { font-size: var(--text-16); font-weight:700; line-height:1.4; padding:2px 6px; border:1px solid #ce91ef; border-radius:var(--r-sm); background:#502568f2; color:var(--tint); white-space:nowrap; box-shadow:0 2px 5px color-mix(in srgb, var(--shade) 60%, transparent); }
.board-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 1; }
.stage-empty { z-index: 4; pointer-events: none; }
.stage:focus { outline: none; }
.resize-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--gold); border: 2px solid #222; border-radius: 3px; cursor: nwse-resize; opacity: 0; z-index: 10; }
.obj:hover .resize-handle, .obj.selected .resize-handle { opacity: 1; }
.obj.is-locked { cursor: grab; }
.board-menu { position: absolute; z-index: 40; display: flex; flex-direction: column; min-width: 180px; max-width: calc(100% - 8px); max-height: calc(100% - 8px); overflow: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; box-shadow: 0 6px 20px color-mix(in srgb, var(--shade) 60%, transparent); }
.board-menu button { text-align: left; border: 0; background: transparent; }
.board-menu button:hover { background: var(--bg3); }
.board-menu,.popover { z-index:2500; }
.board-preview { display: block; max-width: 100%; max-height: 75vh; margin: auto; object-fit: contain; }
.image-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 10px; }
.token.plain-token { background: transparent; border-color: transparent; box-shadow: none; }
.token.plain-token:hover, .token.plain-token.selected { border-color: var(--gold); }
.template-drop { border: 1px dashed var(--muted); padding: 8px 12px; border-radius: var(--r-md); }
.template-drop.over { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6.7%, transparent); }
.template-drop label { margin: 0; }
.template-drop input { display: block; margin-top: 10px; max-width: 100%; }
.template-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0e11 center / cover no-repeat; margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.template-preview-world { position: absolute; transform-origin: 0 0; }
.template-preview-world img { position: absolute; left: 0; top: 0; max-width: none; }
.template-warnings { color: var(--gold); font-size: var(--text-12); }
.image-picker-item { padding: 5px; min-width: 0; }
.image-picker-item img { width: 100%; height: 80px; object-fit: contain; }
.image-picker-item span { display: block; font-size: var(--text-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-layer, .cutin-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 15; }
.stand { position: absolute; bottom: 0; max-height: 85%; max-width: 45%; object-fit: contain; opacity: 0; transition: opacity .35s, transform .35s; filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--shade) 73.3%, transparent)); }
.stand-left { left: 2%; transform: translateX(-20px); }
.stand-right { right: 2%; transform: translateX(20px); }
.stand.in { opacity: 1; transform: none; }
.cutin { position: absolute; opacity: 0; transition: opacity .35s, transform .35s; object-fit: contain; pointer-events: none; z-index: 40; }
.cutin.in { opacity: 1; transform: none !important; }
.cutin-center { left: 10%; top: 10%; width: 80%; height: 80%; transform: scale(.92); }
.cutin-left { left: 0; bottom: 0; height: 90%; max-width: 55%; transform: translateX(-40px); }
.cutin-right { right: 0; bottom: 0; height: 90%; max-width: 55%; transform: translateX(40px); }
img.cutin-full { position: fixed; inset: 0; width: 100vw; height: 100vh; background: color-mix(in srgb, var(--shade) 80%, transparent); z-index: 200; transform: scale(1.04); }
.scene-thumb { max-width: 100%; max-height: 140px; border-radius: var(--r-sm); display: block; margin-bottom: 6px; }
.scene-mini { width: 64px; height: 40px; object-fit: cover; border-radius: var(--r-xs); background: var(--bg); display: inline-block; flex: none; }
.cutin-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.cutin-row .dropzone { padding: 4px 10px; }
.stand-thumb { height: 80px; border-radius: var(--r-xs); }
.msg .edited { font-size: var(--text-11); color: var(--muted); }
.zoom-bar button.on { border-color: var(--gold); color: var(--gold); }

/* ---------- 탭·입력 중·관전·메모·파일 ---------- */
.tabs { overflow-x: auto; }
.tabs .tab-edit { margin-left: auto; color: var(--muted); }
.typing { min-height: 16px; padding: 0 10px; font-size: var(--text-11); color: var(--muted); }
body.viewer:not(.chan-sub) .composer, body.viewer #btnNewChar, body.viewer #btnImport, body.viewer .board-gm, body.viewer #paletteBtn { display: none !important; }
body.viewer .topbar::after { content: '관전 중'; font-size: var(--text-11); padding: 2px 8px; border-radius: var(--r-lg); background: #2b3550; color: #a9c1ff; }
.badge.viewer { background: #2b3550; color: #a9c1ff; }
.phase { font-size: var(--text-11); padding: 1px 6px; border-radius: var(--r-md); background: var(--bg3); }
.phase-setup { color: #8fd3ff; } .phase-main { color: var(--gold); } .phase-cleanup { color: #c9a0ff; }
.memo-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-height: 360px; }
.memo-list { display: flex; flex-direction: column; gap: 4px; }
.memo-item { text-align: left; background: transparent; border-color: transparent; }
.memo-item.on { border-color: var(--accent); background: var(--bg3); }
.memo-edit textarea { margin-top: 6px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.file-card { background: var(--bg3); border-radius: var(--r-md); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.file-card.unused { outline: 1px dashed color-mix(in srgb, var(--bad) 53.3%, transparent); }
.file-card img, .file-audio { width: 100%; height: 90px; object-fit: contain; background: var(--bg); border-radius: var(--r-xs); display: grid; place-items: center; font-size: var(--text-28); color: var(--muted); }
.file-name { font-size: var(--text-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick { min-width: 220px; }
.quick-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border-color: transparent; margin-top: 2px; }
.quick-item.on { border-color: var(--accent); background: var(--bg3); }
.quick-item img, .quick-blank { width: 28px; height: 28px; border-radius: var(--r-xs); object-fit: cover; background: var(--bg); flex: none; }
@media (max-width: 900px) { .memo-wrap { grid-template-columns: 1fr; } }

/* ---------- 캐릭터 선택 격자 ---------- */
dialog.grid-dialog { width: min(820px, calc(100vw - 24px)); }
.char-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; }
.grid-recent { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; }
.grid-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: var(--bg3); border: 2px solid transparent; border-radius: var(--r-lg); }
.grid-card img, .grid-blank { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--bg); display: grid; place-items: center; font-size: var(--text-22); color: var(--muted); }
.grid-card.focus { border-color: var(--accent); }
.grid-card.current { box-shadow: inset 0 0 0 1px var(--gold); }
.grid-card.recent img, .grid-card.recent .grid-blank { aspect-ratio: 1; }
.grid-name { font-size: var(--text-12); width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-star { position: absolute; left: 6px; top: 4px; font-size: var(--text-16); color: color-mix(in srgb, var(--tint) 66.7%, transparent); text-shadow: 0 0 3px var(--shade); cursor: pointer; z-index: 1; }
.grid-star.on { color: var(--gold); }
.grid-badge { position: absolute; right: 6px; top: 6px; font-size: var(--text-10); padding: 0 5px; border-radius: var(--r-sm); background: var(--gold); color: var(--shade); }
.d-head button.on { border-color: var(--gold); color: var(--gold); }
@media (max-width: 600px) { .char-grid, .grid-recent { grid-template-columns: repeat(3, 1fr); } }

/* 2026-10-06: 내용 영역의 최소 너비와 스크롤 경계 */
input,select,textarea,.fld,.row>* { min-width:0; }
input[type=search] { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); }
.row.wrap { flex-wrap:wrap; }
.grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid5 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.d-head,.d-foot,.sheet,.sheet-pane,.d-body { min-width:0; }
dialog .d-body { overflow-y:auto; overflow-x:hidden; }
.sheet-tabs { margin:0; padding:0; flex-wrap:wrap; overflow:visible; }
.tabs button { padding:8px 10px; }
.composer { flex:none; min-width:0; }
.composer .who-row { flex-wrap:wrap; }
.composer .who-row select { flex:1; min-width:80px; max-width:none; }
.expr-btn { padding:2px; flex:none; }
.speaker-results { display:flex; flex-wrap:wrap; gap:4px; max-height:110px; overflow-y:auto; padding:4px 0; }
.topbar { min-width:0; }
.topbar .title { min-width:0; flex:1; }
.topbar .grow { flex:0; }
.autosave-state { display:block; font-size: var(--text-11); color:var(--muted); padding:5px 0; }
.name-color { width:36px; height:28px; padding:0; border:0; background:none; flex:none; }
.resource-slot { display:grid; grid-template-columns:64px minmax(0,1fr) auto 28px; align-items:center; gap:10px; margin:10px 0; padding:10px; background:var(--bg3); border-radius:var(--r-md); }
.resource-slot>img { width:64px; height:72px; object-fit:contain; }
.resource-info .row { margin-top:6px; }
.resource-slot .on { color:var(--gold); border-color:var(--gold); }
.combo-heading { display:grid; grid-template-columns:24px minmax(100px,2fr) minmax(80px,1fr) minmax(80px,1fr) auto auto auto auto; gap:6px; align-items:center; }
.combo-heading label { margin:0; }
.combo-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.combo.is-held { opacity:.6; }
.combo-preview { display:block; white-space:normal; overflow-wrap:anywhere; }
.message-effect { margin-top:8px; color:var(--muted); }
.message-effect summary { cursor:pointer; font-size: var(--text-12); }
.message-effect>div { white-space:pre-wrap; overflow-wrap:anywhere; padding:8px 0; line-height:1.6; }
.token-conds { top:-18px; }
.token-conds span { font-size: var(--text-10); padding:1px 4px; border-radius:var(--r-xs); box-shadow:0 1px 3px color-mix(in srgb, var(--shade) 60%, transparent); }
.stage::before { content:''; position:absolute; inset:-14px; pointer-events:none; filter:blur(10px); background-position:center; background-size:cover; background-repeat:no-repeat; }
.stage::before { background-image:var(--stage-background); }
.dialogue-layout { position:absolute; left:2%; right:2%; bottom:28px; display:grid; grid-template-columns:minmax(0,26%) minmax(0,1fr); align-items:end; gap:14px; pointer-events:auto; }
.dialogue-portrait { width:100%; height:300px; max-height:65vh; object-fit:contain; object-position:bottom; align-self:end; filter:drop-shadow(0 3px 5px color-mix(in srgb, var(--shade) 53.3%, transparent)); }
.dialogue-box { position:static; left:auto; bottom:auto; transform:none; width:auto; min-height:120px; max-height:none; padding:16px; display:block; border:1px solid #42464d; border-radius:var(--r-xl); background:#11151beb; box-shadow:none; overflow:visible; cursor:pointer; }
.dialogue-heading { display:flex; align-items:baseline; gap:10px; color:#b5b6bd; }
.dialogue-heading small { font-size: var(--text-10); color:#929bad; }
.dialogue-text { max-height:30vh; overflow-y:auto; overflow-x:hidden; font-size: var(--text-14); line-height:1.65; }
.dialogue-text p { white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0 0; }
.dialogue-dice { font-family:var(--font-mono); color:var(--gold); }
.scene-transition { animation:none; pointer-events:auto; }
.transition-reveal { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#1c1f26; color:var(--tint); }
.scene-manager { display:flex; flex-direction:column; min-height:0; }
.scene-controls { position:sticky; top:-4px; z-index:3; padding:8px 0 12px; background:var(--bg2); border-bottom:1px solid var(--line); }
.scene-transition-controls { display:grid; grid-template-columns:1fr 70px 100px 100px; gap:8px; align-items:end; }
.scene-transition-controls input[type=color] { width:100%; height:32px; }
.scene-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.scene-card { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-md); }
.scene-card .scene-pick { padding:4px; border:0; background:transparent; }
.scene-card .scene-mini { width:108px; height:64px; }
.scene-card .scene-pick b { overflow-wrap:anywhere; }
.scene-actions { display:flex; flex-wrap:wrap; gap:4px; max-width:160px; }
.cutin-card { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:12px; margin:10px 0; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-md); }
.cutin-card .cutin-thumb { width:96px; height:100px; object-fit:contain; }
.cutin-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cutin-fields label { margin-top:0; }
@media(max-width:900px){.grid2,.grid3,.grid5{grid-template-columns:1fr}.topbar{overflow-x:auto;scrollbar-width:none}.topbar::-webkit-scrollbar{display:none}.topbar .grow{display:none}.combo-heading{grid-template-columns:24px minmax(80px,1fr) minmax(70px,1fr)}.combo-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-transition-controls{grid-template-columns:1fr 60px}.resource-slot{grid-template-columns:52px minmax(0,1fr) 28px}.resource-slot>img{width:52px;height:64px}.resource-slot .resource-button{grid-column:2}.resource-slot>button.ghost{grid-column:3;grid-row:1}.scene-card .scene-mini{width:72px;height:48px}.scene-actions{max-width:100px}.dialogue-layout{gap:8px}.dialogue-portrait{height:210px}.dialogue-box{padding:12px;min-height:100px}.composer textarea{min-height:100px}.cutin-card{grid-template-columns:72px minmax(0,1fr)}.cutin-card .cutin-thumb{width:72px;height:90px}}
.scene-mini-panels { position:relative; display:block; overflow:hidden; flex:none; background:#111317; }
.scene-mini-empty { display:grid; place-items:center; color:var(--muted); font-size: var(--text-12); }
/* 시트 창을 줄여도 입력 행이 창 자체를 밀어내지 않는다. */
.sheet { container-type:inline-size; }
.effect-group .eff-head,.effect-group .eff-row { min-width:0; }
@container (max-width:800px) {
  .grid2,.grid3,.grid5 { grid-template-columns:minmax(0,1fr); }
  .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eff-head,.item-head { display:none; }
  .eff-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .eff-detail { margin-left:0; }
  .combo-heading { grid-template-columns:24px minmax(80px,1fr) minmax(70px,1fr); }
  .combo-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lois-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .item-row { grid-template-columns:28px repeat(3,minmax(0,1fr)); }
  .resource-slot { grid-template-columns:52px minmax(0,1fr) 28px; }
  .resource-slot .resource-button { grid-column:2; }
  .resource-slot>button.ghost { grid-column:3; grid-row:1; }
}
@container (max-width:480px) {
  .grid4,.combo-fields { grid-template-columns:minmax(0,1fr); }
  .eff-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .combo-heading { grid-template-columns:24px minmax(0,1fr); }
  .sheet-pane>.row,.eff-detail>.row { flex-wrap:wrap; }
}

.eff-cell { margin:0; }
.eff-cell-label { display:none; }
@container(max-width:800px){.eff-cell-label{display:block;font-size: var(--text-11);margin-bottom:3px;}}
@media(max-width:900px){.eff-cell-label{display:block;font-size: var(--text-11);margin-bottom:3px;}}

.stage:has(.board-gm:not(.hidden)) .dialogue-layout { bottom:84px; }

/* =====================================================================
   2026-10-06 UI 다듬기 (Claude) — SVG 아이콘·도구 묶음·여백 정리
   이 블록만 지우면 이전 모양으로 돌아갑니다. (원본: .local-backups/ui-polish-20261006)
   ===================================================================== */
::selection { background: color-mix(in srgb, var(--accent) 33.3%, transparent); }
* { scrollbar-width: thin; scrollbar-color: #343a47 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #343a47; border-radius: var(--r-md); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 아이콘 */
svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
svg.ic.inline { width: 14px; height: 14px; margin: 0 3px; vertical-align: -2px; }
button.small svg.ic, .small svg.ic { width: 15px; height: 15px; }

/* 버튼 */
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-md); background: var(--bg3); border: 1px solid var(--line2); color: var(--text); transition: background .12s, border-color .12s, color .12s; }
button:hover:not(:disabled) { background: var(--bg4); border-color: #4a5162; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.small { min-height: 28px; padding: 0 9px; font-size: var(--text-12-5); border-radius: 7px; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover:not(:disabled) { background: var(--bg3); border-color: transparent; color: var(--text); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); }
button.primary-soft { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 33.3%, transparent); color: #bfeaf5; }
button.primary-soft:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: #e9fbff; }
button.icon-only { padding: 0; width: 32px; }
button.small.icon-only { width: 28px; }
button.on { border-color: var(--accent); color: #cdeff7; background: var(--accent-soft); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], select, textarea { background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-md); transition: border-color .12s, box-shadow .12s; }
input[type=password] { width: 100%; padding: 6px 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13.3%, transparent); }
input[type=range] { accent-color: var(--accent); height: 4px; cursor: pointer; }
input[type=checkbox] { accent-color: var(--accent); }
label { color: var(--muted); }
a.icon-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); color: var(--muted); text-decoration: none; flex: none; }
a.icon-link:hover { background: var(--bg3); color: var(--text); }
a.icon-link svg.ic { width: 18px; height: 18px; }

/* 상단바 */
.app { grid-template-rows: 52px 1fr; }
.topbar { gap: 8px; padding: 0 12px 0 8px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.tb-room { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 1 auto; line-height: 1.2; }
.topbar .title { flex: none; font-size: var(--text-15); font-weight: 700; letter-spacing: -.2px; max-width: 32vw; }
.conn-state { font-size: var(--text-11); color: var(--bad); white-space: nowrap; }
.conn-state:empty { display: none; }
.presence { gap: 0; margin-left: 4px; padding-left: 4px; }
.presence .avatar { width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--bg2); box-shadow: 0 0 0 1.5px var(--ok); font-weight: 700; color: var(--text); }
.presence .avatar:first-child { margin-left: 0; }
.topbar .grow { flex: 1; }
.tb-group { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); flex: none; }
.tb-group:not(:has(> :not(.hidden))) { display: none; }
.tb-group > button, .tb-group .sound-compact > button { background: transparent; border-color: transparent; color: var(--text-dim); min-height: 30px; font-size: var(--text-13); }
.tb-group > button:hover:not(:disabled), .tb-group .sound-compact > button:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
.tb-group > button.icon-only, .tb-group .sound-compact > button.icon-only { width: 30px; }
.tb-sound { gap: 4px; padding-right: 8px; }
.sound-compact { gap: 2px; }
.sound-compact input[type=range] { width: 76px; margin-left: 4px; }
.sound-compact button[aria-pressed=true] { color: var(--bad); }
#btnUnlock { animation: tb-pulse 1.6s ease-in-out infinite; }
@keyframes tb-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } }
body.viewer .topbar::after { order: 10; }
@media (max-width: 1240px) {
  .tb-group > button:not(.icon-only) { font-size: 0; gap: 0; width: 30px; padding: 0; }
  .tb-group > button:not(.icon-only) svg.ic { width: 17px; height: 17px; }
}

/* 패널 머리 */
.main { grid-template-columns: 272px minmax(0, 1fr) var(--chat-w, 420px); }
.panel { background: var(--bg2); border-right: 1px solid var(--line); }
.panel-head { min-height: 46px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); gap: 4px; }
.panel-title { font-size: var(--text-13); font-weight: 700; letter-spacing: .2px; color: #cfd3dd; }
.panel-body { padding: 10px; }

/* 캐릭터 카드 */
.char-card { gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: var(--r-xl); background: var(--bg3); border: 1px solid var(--line); transition: border-color .12s, background .12s; }
.char-card:hover { border-color: var(--line2); background: #222731; }
.char-card.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7.8%, transparent), transparent 70%), var(--bg3); }
.char-card.acting { box-shadow: inset 3px 0 0 var(--gold); }
.char-card .face { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--bg); }
.face.placeholder { display: grid; place-items: center; font-size: var(--text-20); font-weight: 700; color: var(--ph, var(--muted)); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tint) 6.3%, transparent), transparent 60%), var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ph, #8d95a8) 55%, transparent); user-select: none; }
.char-card .name { font-size: var(--text-14); line-height: 1.3; }
.char-card .row { gap: 4px; align-items: flex-start; }
.char-card .row > button { margin: -4px -4px 0 0; }
.char-card .owner { font-size: var(--text-11); color: var(--muted); margin: 1px 0 4px; }
.initiative-badge { left: auto; right: -5px; top: auto; bottom: -5px; min-width: 22px; height: 20px; line-height: 16px; padding: 1px 5px; border-radius: 7px; font-size: var(--text-11-5); font-weight: 700; background: var(--gold); color: #17140c; border: 2px solid var(--bg3); box-shadow: none; }
.stat { grid-template-columns: 40px 1fr; gap: 6px; font-size: var(--text-11); margin-top: 4px; }
.stat > .muted { color: #8b93a5; }
.stat .bar { height: 15px; border-radius: 5px; background: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 3.9%, transparent); }
.stat .bar i { background: linear-gradient(90deg, #2f5fbf, #4d86ea); border-radius: 5px; }
.stat .bar span { padding-left: 6px; line-height: 15px; font-variant-numeric: tabular-nums; font-weight: 600; text-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 53.3%, transparent); }
.stat.erosion .bar i { background: linear-gradient(90deg, #8e2f48, #c2445f); }
.stat.erosion.over100 .bar i { background: linear-gradient(90deg, #c2304a, #ff5470); }
.stat.lois .bar i { background: linear-gradient(90deg, #8a6a22, #c99a32); }
.cond { background: #3b2350; color: #e9d2ff; border: 1px solid #6b3f8c; }

/* 판면 */
.stage { background-color: #0b0c10; }
.stage-empty { color: #4a5060; line-height: 1.9; font-size: var(--text-13); }
.board-gm, .zoom-bar { gap: 2px; padding: 4px; background: #14171ee0; border: 1px solid color-mix(in srgb, var(--tint) 7.8%, transparent); border-radius: var(--r-xl); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
.board-gm { left: 12px; bottom: 12px; }
.zoom-bar { right: 12px; bottom: 12px; }
.board-gm > button, .zoom-bar > button { background: transparent; border-color: transparent; color: var(--text-dim); }
.board-gm > button:hover:not(:disabled), .zoom-bar > button:hover:not(:disabled) { background: color-mix(in srgb, var(--tint) 6.3%, transparent); color: var(--tint); }
.zoom-bar > button.on { color: var(--gold); background: color-mix(in srgb, var(--gold) 9.4%, transparent); }
.stage:has(.board-gm:not(.hidden)) .dialogue-layout { bottom: 64px; }
.init-panel { left: 12px; top: 12px; background: #14171ee8; border: 1px solid color-mix(in srgb, var(--tint) 7.8%, transparent); border-radius: var(--r-xl); padding: 8px; box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
.init-row { border-radius: 7px; padding: 4px 6px; }
.board-toolbar { border-radius: var(--r-xl); padding: 5px; gap: 3px; background: #161920f2; border-color: var(--line2); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.board-menu { border-radius: var(--r-xl); padding: 4px; box-shadow: var(--shadow); border-color: var(--line2); }
.board-menu button { border-radius: 7px; justify-content: flex-start; }

/* 채팅 */
.chat { background: var(--bg2); border-left: 1px solid var(--line); }
.tabs { min-height: 46px; align-items: stretch; padding: 0 6px; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button { min-height: 0; border: 0; border-radius: 0; background: transparent; padding: 0 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs button:hover:not(:disabled) { background: transparent; color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .tab-edit { width: 34px; padding: 0; }
.log { padding: 8px 0; }
.msg { gap: 10px; padding: 7px 14px; }
.msg:hover { background: color-mix(in srgb, var(--tint) 2%, transparent); }
.msg .face { width: 40px; height: 40px; border-radius: var(--r-lg); }
.msg .face.placeholder { font-size: var(--text-16); }
.msg .head { gap: 8px; margin-bottom: 1px; }
.msg .who { font-size: var(--text-13-5); }
.msg .time { font-size: var(--text-11); color: #6c7488; font-variant-numeric: tabular-nums; }
.msg .body { line-height: 1.6; }
.msg .tools { right: 10px; top: 5px; padding: 2px; gap: 1px; background: var(--bg3); border: 1px solid var(--line2); border-radius: var(--r-md); box-shadow: 0 4px 12px color-mix(in srgb, var(--shade) 40%, transparent); }
.msg .tools button { min-height: 24px; }
.msg .tools button.icon-only { width: 24px; }
.msg.t-system { padding: 4px 14px 4px 64px; color: #7d8598; font-size: var(--text-12); }
.dice { margin-top: 5px; padding: 6px 10px; border-radius: var(--r-md); background: var(--ink); border: 1px solid color-mix(in srgb, var(--tint) 3.9%, transparent); border-left: 3px solid #4a5163; font-size: var(--text-12-5); line-height: 1.55; }
.dice .total { font-size: calc(15.5px * var(--ui-fs, 1)); }
.dice.success { background: #0f2219; border-color: color-mix(in srgb, var(--ok) 13.3%, transparent); border-left-color: var(--ok); }
.dice.fail { background: #22131499; border-color: color-mix(in srgb, var(--bad) 12.2%, transparent); border-left-color: #8b3b36; }
.dice.critical { border-left-color: var(--gold); }
.dice.fumble { border-left-color: var(--bad); }
.typing { padding: 0 14px; min-height: 18px; }

/* 입력창 */
.composer { padding: 8px 10px 10px; gap: 8px; border-top: 1px solid var(--line); background: var(--bg2); }
.composer .who-row { gap: 6px; flex-wrap: nowrap; }
.composer .who-row select { flex: 1 1 auto; min-width: 70px; height: 32px; padding: 0 8px; }
.expr-btn { min-height: 32px; height: 32px; width: 32px; padding: 0; overflow: hidden; }
.expr-btn img { width: 30px; height: 30px; border-radius: 7px; }
.expr-btn img:not([src]), .expr-btn img[src=""] { display: none; }
.speaker-search { position: relative; flex: 0 1 132px; margin: 0; min-width: 72px; }
.speaker-search::before { content: ''; position: absolute; left: 9px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); pointer-events: none; opacity: .55; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--text); }
.speaker-search input[type=search] { height: 32px; padding: 0 8px 0 28px; font-size: var(--text-12-5); }
.speaker-results { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 220px; max-width: 320px; max-height: 220px; padding: 6px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.speaker-results button { justify-content: flex-start; background: transparent; border-color: transparent; }
.speaker-results button:hover { background: var(--bg3); }
.input-wrap { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-xl); transition: border-color .12s, box-shadow .12s; }
.input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12.2%, transparent); }
.input-wrap textarea, .composer .input-wrap textarea { border: 0; background: transparent; box-shadow: none !important; min-height: 84px; max-height: 240px; padding: 10px 12px 4px; line-height: 1.55; resize: none; }
.input-actions { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px; }
.input-actions .grow { flex: 1; }
.input-actions #paletteBtn { background: transparent; border-color: transparent; color: var(--text-dim); }
.input-actions #paletteBtn:hover { background: var(--bg3); }
#btnSend { padding: 0 12px 0 10px; }

/* 대화상자 */
dialog { border-radius: var(--r-2xl); border-color: var(--line2); box-shadow: 0 24px 64px color-mix(in srgb, var(--shade) 66.7%, transparent); }
dialog::backdrop { background: #05060acc; backdrop-filter: blur(2px); }
dialog .d-head { min-height: 50px; padding: 8px 10px 8px 18px; font-size: var(--text-14-5); border-bottom: 1px solid var(--line); gap: 6px; }
dialog .d-head > button.ghost { color: var(--muted); }
dialog .d-body { padding: 8px 18px 18px; }
dialog .d-foot { padding: 10px 14px; border-top: 1px solid var(--line); background: #13161c; border-radius: 0 0 14px 14px; }
.popover { border-radius: var(--r-xl); border-color: var(--line2); box-shadow: var(--shadow); padding: 8px; }
.toast { background: #1d2028f2; border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 10px 16px; box-shadow: var(--shadow); }
.sheet-tabs button, .media-tabs button { min-height: 32px; }
.member-row { padding: 8px 0; }

/* 로비 */
.lobby { max-width: 680px; padding: 56px 18px; }
.lobby h1 { display: flex; align-items: center; gap: 10px; font-size: var(--text-28); letter-spacing: -.6px; }
.lobby h1::before { content: ''; width: 34px; height: 34px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent), var(--navy)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 26.7%, transparent); flex: none; -webkit-mask: none; }
.lobby > .muted { margin-left: 44px; }
.card { border-radius: var(--r-2xl); border-color: var(--line); padding: 18px; background: var(--bg2); }
.card > b:first-child { font-size: var(--text-14); }
.room-list li { padding: 12px 2px; border-top-color: var(--line); }
.room-list a { font-size: var(--text-14-5); }
.badge { padding: 2px 8px; font-weight: 600; }

/* 모바일 */
@media (max-width: 900px) {
  .app { grid-template-rows: 50px 1fr 56px; }
  .topbar { gap: 6px; padding: 0 8px 0 4px; }
  .topbar .title { max-width: 34vw; font-size: var(--text-14); }
  .presence { display: none; }
  .tb-group > button:not(.icon-only) { font-size: 0; gap: 0; width: 30px; padding: 0; }
  .sound-compact input[type=range] { width: 56px; }
  .mobile-tabs { padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); gap: 4px; background: var(--bg2); }
  .mobile-tabs button { flex-direction: column; gap: 2px; min-height: 0; border-radius: var(--r-lg); font-size: var(--text-11); color: var(--muted); }
  .mobile-tabs button svg.ic { width: 19px; height: 19px; }
  .mobile-tabs button.on { color: var(--text); background: var(--bg3); box-shadow: none; }
  .composer .who-row { flex-wrap: wrap; }
  .speaker-search { flex: 1 1 100%; order: 5; }
}
.tb-overflow { display: contents; }
#tbStage { order: 1; } .tb-sound { order: 2; } #tbTools { order: 3; } .tb-more { order: 4; display: none !important; }
@media (max-width: 900px) {
  .main { grid-template-columns: minmax(0, 1fr); }
  .topbar { overflow: visible; }
  .tb-room { flex: 1 1 auto; }
  .topbar .title { max-width: none; }
  .topbar .grow { display: none; }
  .tb-more { display: inline-flex !important; width: 34px; padding: 0; }
  .tb-overflow { display: none; }
  .topbar.more-open .tb-overflow { display: flex; flex-direction: column; gap: 8px; position: fixed; top: 54px; right: 8px; z-index: 2600; padding: 8px; min-width: 190px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-2xl); box-shadow: var(--shadow); }
  .topbar.more-open .tb-more { background: var(--bg3); color: var(--text); }
  .tb-overflow .tb-group { flex-direction: column; align-items: stretch; background: transparent; border: 0; padding: 0; }
  .tb-overflow .tb-group + .tb-group { border-top: 1px solid var(--line); padding-top: 8px; border-radius: 0; }
  .tb-overflow .tb-group:not(:has(> :not(.hidden):not(.tb-menu))):not(:has(.tb-menu-pop > :not(.hidden))) { display: none; }
  .tb-overflow .tb-group > button:not(.icon-only) { font-size: var(--text-13-5); gap: 10px; width: auto; padding: 0 10px; min-height: 38px; justify-content: flex-start; }
  .sound-compact input[type=range] { width: 52px; margin-left: 2px; }
  .tb-sound { padding-right: 3px; }
}
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 18px; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--accent) 0 var(--fill, 50%), #3a404d var(--fill, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: var(--r-xs); background: #3a404d; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: var(--r-xs); background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: var(--r-round); background: var(--tint); border: 0; box-shadow: var(--shadow-sm); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: var(--r-round); background: var(--tint); border: 0; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) {
  .board-gm > button:not(.icon-only), .zoom-bar > button:not(.icon-only) { font-size: 0; gap: 0; width: 30px; padding: 0; }
  .board-gm { flex-wrap: nowrap; max-width: calc(100% - 210px); overflow-x: auto; }
}
.lobby h1::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.5l1.9 6.2 6.4.1-5.2 3.8 2 6.2L12 15l-5.1 3.8 2-6.2-5.2-3.8 6.4-.1z'/%3E%3Ccircle cx='19' cy='4.5' r='1.1' fill-opacity='.6'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, var(--accent), var(--navy)); }
input[type=file] { font-size: var(--text-12-5); color: var(--muted); }
input[type=file]::file-selector-button { font: inherit; color: var(--text); background: var(--bg3); border: 1px solid var(--line2); border-radius: 7px; padding: 5px 10px; margin-right: 10px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--bg4); }
.template-drop { border-radius: var(--r-lg); border-color: var(--line2); padding: 12px 14px; background: color-mix(in srgb, var(--tint) 1.2%, transparent); }
.room-list li { border-radius: var(--r-md); }
.room-list li:hover { background: color-mix(in srgb, var(--tint) 2%, transparent); }
.media-tabs button, .media-library .row > button { border-radius: 999px; }
.face.placeholder { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ph, #8d95a8) 40%, transparent); }

/* =====================================================================
   2026-10-06 서브 창 다듬기 (Claude) — 캐릭터 편집·자료실·씬·컷인·메모·로그
   ===================================================================== */
input:not([type]) { width: 100%; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-md); transition: border-color .12s, box-shadow .12s; }
input:not([type]):disabled { opacity: .85; }
input[type=color] { cursor: pointer; }
label { margin: 12px 0 5px; }
.check { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; color: var(--text); font-size: var(--text-13); cursor: pointer; white-space: nowrap; }
.check input { margin: 0; width: 15px; height: 15px; flex: none; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.field > span { font-size: var(--text-12); color: var(--muted); }
.sec-title { margin: 18px 0 6px; font-size: var(--text-13); color: #cfd3dd; }
.hint { line-height: 1.55; }
dialog .d-body { overflow-x: hidden; }
dialog .d-body > :first-child > label:first-child, dialog .d-body > label:first-child { margin-top: 6px; }

/* 세그먼트 탭·개수 배지 */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); }
.segmented > button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: var(--text-13); }
.segmented > button:hover:not(:disabled) { background: color-mix(in srgb, var(--tint) 3.1%, transparent); border: 0; color: var(--text); }
.segmented > button.on { background: var(--bg4); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--shade) 40%, transparent); border: 0; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: color-mix(in srgb, var(--tint) 7.1%, transparent); color: var(--muted); font-size: var(--text-11); font-weight: 600; }
.chip { border-radius: 999px; min-height: 26px; padding: 0 10px; font-size: var(--text-12); }
.chip.ghost { border: 1px dashed var(--line2); }
.empty-line { margin: 2px 0 6px; }

/* ---------- 캐릭터 편집창 ---------- */
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.sheet > * { grid-column: 1 / -1; }
.sheet > .xp-total { grid-column: 1; grid-row: 1; margin: 6px 0 0; padding: 8px 12px; font-size: var(--text-13); border-radius: var(--r-lg); background: color-mix(in srgb, var(--gold) 5.1%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.sheet > .autosave-state { grid-column: 2; grid-row: 1; margin-top: 6px; padding: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.sheet > .autosave-state::before { content: ''; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--ok); opacity: .8; }
.sheet-tabs, .sheet > .tabs { position: sticky; top: -8px; z-index: 5; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 10px -18px 0; padding: 0 12px; background: var(--bg2); border-bottom: 1px solid var(--line); min-height: 42px; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tabs button { flex: none; min-height: 42px; }
.sheet-pane { padding-top: 14px; min-width: 0; }
.sheet-sec { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.sheet-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.sheet-sec > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--text-13); font-weight: 700; color: #d6dae3; }
.sheet-sec > h4::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); }
.sheet-sec .fld > label:first-child { margin-top: 0; }
.sheet-sec .grid2, .sheet-sec .grid3 { gap: 10px 12px; }
.base-ident { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) !important; }
.grid-status { grid-template-columns: minmax(0, 1fr) 84px 84px 30px; gap: 6px; margin-bottom: 6px; }
.grid-status.muted { margin-bottom: 2px; font-size: var(--text-11-5); }
.sheet-sec > div > button.small, .sheet-sec button.small:has(> svg.lead[data-icon=plus]) { margin-top: 4px; }
.conds:not(:empty) { margin-bottom: 8px; }
.cond { padding: 3px 4px 3px 10px; font-size: var(--text-12); gap: 4px; }
.cond .cond-val { width: 40px !important; }
.cond button { min-height: 20px; width: 20px; padding: 0; }
.sheet-base .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 2px 14px; }
.owner-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.owner-row select { max-width: 280px; }
.owner-row .fld > label { margin-top: 12px; }
.derived-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.derived { margin: 0; gap: 6px; }
.derived > div { padding: 6px 10px; border-radius: var(--r-md); background: var(--bg3); border: 1px solid var(--line); }
.derived > div b { color: var(--text); font-variant-numeric: tabular-nums; }
.grid4 { gap: 12px; margin-top: 0; }
.ability-block { padding: 12px; border-radius: var(--r-xl); border: 1px solid var(--line); }
.ability-head > b:first-child { font-size: var(--text-15); }
.ab-break { margin-bottom: 4px; }
.skill-row { gap: 6px; margin-top: 6px; }
.skill-row .row { gap: 2px; }
.ability-block > button.ghost { margin-top: 6px; }
.works-table summary, details > summary { cursor: pointer; color: var(--text-dim); font-size: var(--text-12-5); margin: 8px 0; }
.pane-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lois-row { gap: 8px; padding: 8px 10px; border-radius: var(--r-lg); margin-bottom: 6px; border: 1px solid var(--line); }
.lois-row .row { gap: 4px; }
.emo { width: 24px; height: 24px; border-radius: var(--r-sm); font-weight: 700; }
.effect-group > h3 { display: flex; align-items: center; margin: 14px 0 8px; font-size: var(--text-13-5); }
.effect-group:first-of-type > h3 { margin-top: 2px; }
.eff { border-radius: var(--r-md); }
.eff-row { gap: 5px; }
.eff-row > .row:first-child { gap: 2px; }
.eff-detail { padding: 10px 12px; margin: 6px 0 10px 30px; background: color-mix(in srgb, var(--tint) 2%, transparent); border: 1px solid var(--line); border-radius: var(--r-lg); }
.eff-detail-opts { gap: 6px 16px; margin-top: 8px; align-items: flex-end; }
.eff-detail-opts .fld { flex: 1 1 180px; }
.combo { padding: 10px 12px 12px; border-radius: var(--r-xl); border: 1px solid var(--line); margin-bottom: 10px; }
.combo-heading { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
.combo-heading > button.ghost:first-child { flex: none; }
.combo-heading > input { flex: 2 1 150px; width: auto; }
.combo-heading > select { flex: 1 1 130px; width: auto; }
.combo-heading > input:nth-of-type(2) { flex: 1 1 110px; }
.combo-heading > .check { margin: 0 4px; }
.combo-heading > button { flex: none; }
.combo-preview { margin: 8px 0 0 30px; font-size: var(--text-13); }
.combo-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.combo-fields { gap: 4px 12px; }
.combo-fields .fld > label, .combo-detail > .fld > label { margin-top: 6px; }
.item-cats { margin-bottom: 12px; }
.item-row { gap: 5px; }
.item-eqp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--text); font-size: var(--text-12); }
.item-eqp span { display: none; }
.resource-slot { grid-template-columns: 72px minmax(0, 1fr) auto 32px; gap: 12px; padding: 10px 12px; border-radius: var(--r-xl); border: 1px solid var(--line); margin: 8px 0; }
.resource-slot > img { width: 72px; height: 72px; border-radius: var(--r-md); background: var(--ink); object-fit: contain; }
.resource-info input { max-width: 340px; }
.resource-info .row { gap: 6px; margin-top: 8px; }
.palette-example { margin: 8px 0 12px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); font-family: var(--font-mono); white-space: pre-wrap; }
@container (max-width: 800px) {
  .base-ident { grid-template-columns: minmax(0, 1fr) !important; }
  .eff { padding: 10px; margin-bottom: 8px; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-xl); }
  .eff-row > :first-child, .eff-row > :last-child { grid-column: 1 / -1; }
  .eff-row > :last-child { justify-content: flex-end; }
  .eff-detail { margin-left: 0; }
  .item-row { grid-template-columns: 28px repeat(3, minmax(0, 1fr)) !important; padding: 8px; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .item-row > button:first-child { grid-row: span 3; align-self: start; }
  .item-eqp span { display: inline; }
  .resource-slot { grid-template-columns: 60px minmax(0, 1fr) 32px; }
  .resource-slot > img { width: 60px; height: 60px; }
  .resource-slot .resource-button { grid-column: 2; justify-self: start; }
  .lois-row > select, .lois-row > input { grid-column: span 1; }
}
@container (max-width: 480px) {
  .grid-status { grid-template-columns: minmax(0, 1fr) 64px 64px 28px; }
  .combo-preview { margin-left: 0; }
}

/* ---------- 자료실 ---------- */
.media-library { display: flex; flex-direction: column; min-height: 0; }
.media-top { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.media-top .media-add { width: auto; height: auto; font-size: var(--text-12-5); padding: 0 12px; }
.media-library > .hint { margin: 8px 0 12px; }
.media-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; margin-bottom: 12px; background: color-mix(in srgb, var(--tint) 1.6%, transparent); border: 1px solid var(--line); border-radius: var(--r-xl); }
.media-playback, .media-preview { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 0; border: 0; }
.media-playback .field select { width: 190px; }
.media-playback .field.grow, .media-preview .field.grow { flex: 1 1 160px; }
.media-playback input[type=range], .media-preview input[type=range], .media-library input[type=range] { width: 100%; min-width: 120px; }
.media-playback .check { padding-bottom: 6px; }
.media-preview + .media-playback, .media-playback + .media-preview { padding-top: 12px; border-top: 1px solid var(--line); }
.media-filter { display: flex; gap: 8px; }
.media-filter input[type=search] { flex: 1; min-width: 0; height: 34px; }
.media-filter select { width: 150px; flex: none; height: 34px; }
.media-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 4px; }
.media-folders .media-tabs { flex: 1 1 auto; margin: 0; gap: 4px; }
.media-tabs button { min-height: 26px; padding: 0 11px; font-size: var(--text-12); }
.media-tabs button.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 53.3%, transparent); color: #cdeff7; }
.media-folder-tools { display: flex; gap: 2px; margin-left: auto; }
.media-folder-tools button { background: transparent; border-color: transparent; color: var(--muted); }
.media-folder-tools button:hover:not(:disabled) { background: var(--bg3); color: var(--text); border-color: transparent; }
.media-library > .media-tabs + .row, .media-library .row > button { border-radius: 7px; }
.media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.media-tracks { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.media-item { padding: 6px; border-radius: var(--r-xl); background: var(--bg3); border: 1px solid var(--line); transition: border-color .12s; }
.media-item:hover { border-color: var(--line2); }
.media-item.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.media-pick { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; min-height: 0; background: transparent; border: 0; text-align: left; }
.media-pick:hover:not(:disabled) { background: transparent; border: 0; }
.media-pick img { width: 100%; height: 104px; border-radius: var(--r-md); background: var(--ink); object-fit: contain; }
.media-pick span { font-size: var(--text-12); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; padding: 0 2px; }
.media-item > .row { gap: 2px; margin-top: 4px; flex-wrap: wrap; }
.media-item > .row input[type=checkbox] { margin: 0 4px; }
.media-item > button.small { width: 100%; margin-top: 4px; }
.media-tracks .media-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.media-tracks .media-pick { flex-direction: row; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.media-tracks .media-item > .row { margin: 0; flex-wrap: nowrap; }
.media-audio-icon { display: grid !important; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-md); background: var(--ink); font-size: 0 !important; -webkit-line-clamp: unset !important; }
.media-audio-icon::before { content: ''; width: 16px; height: 16px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.5l10-2V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.5l10-2V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.media-empty { grid-column: 1 / -1; margin: 0; padding: 36px 16px; text-align: center; color: var(--muted); font-size: var(--text-12-5); line-height: 1.7; border: 1px dashed var(--line2); border-radius: var(--r-xl); }
.media-editor { padding: 14px; margin: 10px 0; border-radius: var(--r-xl); border-color: var(--line2); }
.media-editor > label { margin-top: 10px; }
.media-folder-checks { margin-top: 10px; gap: 4px 14px; }
.media-folder-checks label { margin: 0; color: var(--text); }
.media-editor > .row:last-child { margin-top: 12px; }
.media-foot { position: sticky; bottom: -18px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px -18px -18px; padding: 10px 18px; background: var(--bg2); border-top: 1px solid var(--line); }
.media-pages { flex: 1 1 220px; }
.media-foot .media-actions { flex: 1 1 auto; justify-content: flex-end; }
.media-foot .media-actions .grow { display: none; }
@media (max-width: 600px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-filter select { width: 120px; } }

/* ---------- 씬 ---------- */
.scene-manager { container-type: inline-size; }
.scene-controls { top: -8px; padding: 8px 0 14px; }
.scene-new input { flex: 1; height: 34px; }
.scene-new button { min-height: 34px; }
.scene-transition-controls { grid-template-columns: minmax(0, 1fr) 64px 92px 92px; gap: 10px; margin-top: 2px; }
.scene-transition-controls label { margin-bottom: 0; }
.scene-transition-controls input, .scene-transition-controls select { margin-top: 5px; }
.scene-transition-controls input[type=color] { height: 34px; padding: 3px; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-md); }
.scene-options { margin-top: 10px; gap: 6px; }
.scene-list { gap: 8px; margin-top: 14px; }
.scene-card { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 6px; border-radius: var(--r-xl); border-color: var(--line); transition: border-color .12s, background .12s; }
.scene-card:hover { border-color: var(--line2); background: #222731; }
.scene-card .scene-pick { gap: 14px; min-height: 0; padding: 0; justify-content: flex-start; }
.scene-card .scene-pick:hover { background: transparent; }
.scene-card .scene-mini { width: 120px; height: 68px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--tint) 6.3%, transparent); }
.scene-card .scene-pick b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-14); line-height: 1.4; }
.scene-card .scene-pick .hint { margin-top: 3px; }
.scene-actions { flex-wrap: nowrap; align-items: center; gap: 4px; max-width: none; }
@container (max-width: 560px) {
  .scene-transition-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scene-transition-controls > label:first-child { grid-column: 1 / -1; }
  .scene-card { grid-template-columns: 22px minmax(0, 1fr); }
  .scene-actions { grid-column: 2; justify-content: flex-end; }
  .scene-card .scene-mini { width: 88px; height: 52px; }
}

/* ---------- 컷인 ---------- */
.cutin-list, dialog[data-window-key=cutins] .d-body > div { container-type: inline-size; }
.cutin-card { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 14px; margin: 0 0 10px; border-radius: var(--r-xl); border-color: var(--line); }
.cutin-card .cutin-thumb { width: 128px; height: 100px; border-radius: var(--r-lg); background: var(--ink); object-fit: contain; }
.cutin-thumb-empty { display: grid; place-items: center; color: var(--muted); font-size: var(--text-12); border: 1px dashed var(--line2); }
.cutin-fields { gap: 0 12px; }
.cutin-fields label { margin: 0 0 8px; }
.cutin-fields label > input, .cutin-fields label > select { margin-top: 5px; }
.cutin-actions { gap: 6px; align-items: center; margin-top: 2px; }
.cutin-sound { margin: 0 4px; }
@container (max-width: 560px) {
  .cutin-card { grid-template-columns: minmax(0, 1fr); }
  .cutin-card .cutin-thumb { width: 100%; height: 120px; }
}

/* ---------- 배경·전경 ---------- */
.field-form .grid2 { gap: 12px 16px; }
.scene-img > label { margin-top: 6px; }
.scene-img-frame { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.scene-img-frame .scene-thumb { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; border-radius: 0; }
.scene-img-frame .hint { margin: 0; }
.scene-img .row { margin-top: 8px; gap: 6px; }
.form-section { margin-top: 4px; }
.form-section .checks { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 26px; }

/* ---------- 메모 ---------- */
.memo-wrap { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; min-height: 380px; }
.memo-list { gap: 2px; padding: 6px; background: color-mix(in srgb, var(--tint) 1.6%, transparent); border: 1px solid var(--line); border-radius: var(--r-xl); align-self: start; }
.memo-item { justify-content: flex-start; min-height: 34px; color: var(--text-dim); }
.memo-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-item.on { background: var(--accent-soft); border-color: transparent; color: var(--tint); }
.memo-list > button.small { justify-content: flex-start; margin-top: 4px; color: var(--muted); background: transparent; border: 1px dashed var(--line2); }
.memo-edit { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.memo-edit > input { font-size: var(--text-15); font-weight: 600; height: 38px; }
.memo-edit textarea { flex: 1; min-height: 300px; margin: 0; line-height: 1.6; }
.memo-edit > .row { gap: 10px; }
@media (max-width: 900px) { .memo-wrap { grid-template-columns: 1fr; } }

/* ---------- 파일 관리 ---------- */
.files-head { margin-top: 4px; }
.files-head > span { white-space: nowrap; }
.files-head > select { width: 160px; flex: none; }
.file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.file-card { padding: 6px; border-radius: var(--r-xl); border: 1px solid var(--line); gap: 4px; }
.file-card img, .file-audio { height: 96px; border-radius: var(--r-md); background: var(--ink); }
.file-card.unused { outline: 0; border: 1px dashed color-mix(in srgb, var(--bad) 53.3%, transparent); }
.file-card > button { margin-top: 2px; }

/* ---------- 로그 저장·백업 ---------- */
.export-card { padding: 14px 16px; margin: 6px 0 12px; background: color-mix(in srgb, var(--tint) 1.6%, transparent); border: 1px solid var(--line); border-radius: var(--r-xl); }
.export-card > h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: var(--text-14); }
.export-card > .hint { margin: 0 0 12px; }
.export-card > .check { margin-bottom: 10px; white-space: normal; align-items: flex-start; }
.export-card > .check input { margin-top: 2px; }
.export-replay select { flex: 1 1 200px; width: auto; }
.export-card .row { gap: 8px; }
.export-card > .hint:last-child { margin: 10px 0 0; }

/* ---------- 멤버 ---------- */
.members-form .row { gap: 6px; }
.members-form .row > input { flex: 1; }
.members-form > div > p.hint { margin: 6px 0 0; }
.member-list { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 2px 12px; }
.member-list .member-row:first-child { border-top: 0; }
.member-row select { width: auto; }

/* ---------- 기타 창 ---------- */
.obj-form .fld > label { margin-top: 12px; }
.obj-form .row > input { flex: 1; }
.char-grid, .grid-recent { grid-template-columns: repeat(auto-fill, minmax(104px, 132px)); gap: 10px; }
.grid-card { border-radius: var(--r-xl); border-width: 1.5px; }
.grid-card.focus { border-color: var(--accent); }
dialog.grid-dialog .hint { margin-top: 12px; }
.lib-item { padding: 10px 0; }

.sheet .grid2, .sheet .grid3, .sheet .grid5 { row-gap: 8px; }
.sheet .fld > label { margin-top: 0; }
.sheet .grid3 > .fld, .sheet .grid2 > .fld { margin-top: 4px; }
.sheet-sec > .fld + .fld, .sheet-sec .fld + .grid3, .sheet-sec .grid3 + .fld, .sheet-sec .hint + .fld, .sheet-sec details + .fld { margin-top: 10px; }
.media-pages { flex: 0 1 auto; gap: 8px; }
.media-pages .grow { flex: none; }
@container (max-width: 800px) {
  .item-row > button:first-child { grid-row: span 4; }
  .item-row > .item-eqp { grid-column: 2 / span 2; justify-content: flex-start; }
}
.lib-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lib-bar > input { flex: 2 1 220px; width: auto; height: 34px; }
.lib-bar > select { flex: 1 1 160px; width: auto; height: 34px; }
.lib-manage { flex: none; gap: 4px; }
.lib-list { margin-top: 10px; }
.lib-item { padding: 12px 2px; border-top-color: var(--line); }
.lib-item-head { gap: 8px; }
.lib-item-head b { font-size: var(--text-14); }
.lib-item .hint { margin-top: 2px; }
.lib-text { margin-top: 6px; color: var(--text-dim); max-height: 9em; }
@container (max-width: 800px) {
  .lois-row { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lois-row > select { grid-column: span 2; }
  .lois-row > input:nth-of-type(1) { grid-column: span 4; }
  .lois-row > input:nth-of-type(2) { grid-column: 1 / -1; }
  .lois-row > .row { grid-column: span 3; }
  .lois-row > .check { grid-column: span 2; }
  .lois-row > button:last-child { grid-column: span 2; justify-self: end; }
}
@container (max-width: 480px) { .lois-row > .row { grid-column: 1 / -1; } }

/* =====================================================================
   2026-10-06 서플리먼트·D/E로이스·팔레트 창 등 (Claude)
   ===================================================================== */
/* 룰 창 */
.rules-house { font-size: var(--text-14); margin-top: 6px; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 8px; }
.sup-item { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; column-gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 1.6%, transparent); color: var(--text); cursor: pointer; }
.sup-item:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.sup-item input { margin: 0; width: 15px; height: 15px; }
.sup-name { font-weight: 700; font-size: var(--text-13); }
.sup-meta { grid-column: 2 / -1; font-size: var(--text-11-5); line-height: 1.45; }
.erosion-table { display: grid; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.erosion-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); grid-template-columns: 76px; gap: 2px; font-variant-numeric: tabular-nums; }
.erosion-row > span { padding: 6px 4px; text-align: center; background: var(--bg3); font-size: var(--text-12-5); }
.erosion-row > span:first-child { text-align: left; padding-left: 10px; color: var(--muted); background: transparent; }
.erosion-row.head > span { color: var(--muted); font-size: var(--text-11-5); background: color-mix(in srgb, var(--tint) 2.4%, transparent); }
.erosion-row:first-child > span:nth-child(2) { border-top-left-radius: 8px; }
.erosion-row:last-child > span:nth-child(2) { border-bottom-left-radius: 8px; }
.erosion-row:first-child > span:last-child { border-top-right-radius: 8px; }
.erosion-row:last-child > span:last-child { border-bottom-right-radius: 8px; }
.badge.sup { background: #2a3550; color: #a9c1ff; }
.badge.free { background: #1f3a2b; color: #8fe0b2; }

/* 로이스 */
.lois-wrap { margin-bottom: 6px; }
.lois-wrap > .lois-row { margin-bottom: 0; }
.lois-row { grid-template-columns: 26px 92px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto auto 30px; }
.lois-row.special { grid-template-columns: 26px 30px minmax(0, 2fr) minmax(0, 1fr) auto auto 30px; }
.lois-row.special.d { box-shadow: inset 3px 0 0 #6aa7ff; }
.lois-row.special.e { box-shadow: inset 3px 0 0 #b26bff; }
.lois-caret.icon-only { width: 26px; min-height: 26px; }
.lois-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-weight: 800; font-size: var(--text-13); color: var(--tint); background: #3c64b4; }
.lois-row.e .lois-badge { background: #7a44b8; }
.lois-ref { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lois-detail { margin: 4px 0 4px 30px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 1.6%, transparent); }
.lois-detail .fld + .fld { margin-top: 8px; }
.dlois-effects { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.dlois-effect { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); background: var(--bg3); }
.dlois-effect .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 800px) {
  .lois-row { grid-template-columns: 26px repeat(6, minmax(0, 1fr)) !important; }
  .lois-row > .lois-caret { grid-row: span 4; align-self: start; }
  .lois-row > select { grid-column: span 2; }
  .lois-row > input:nth-of-type(1) { grid-column: span 4; }
  .lois-row > input:nth-of-type(2) { grid-column: 2 / -1; }
  .lois-row > .row { grid-column: span 3; }
  .lois-row > .check { grid-column: span 2; }
  .lois-row > button:last-child { grid-column: span 2; justify-self: end; }
  .lois-row.special { grid-template-columns: 26px 30px minmax(0, 1fr) auto auto 30px !important; }
  .lois-row.special > .lois-caret { grid-row: auto; }
  .lois-row.special > input { grid-column: auto !important; }
  .lois-row.special > .lois-ref { grid-column: 3 / -1; grid-row: 2; }
  .lois-row.special > .check { grid-column: auto; }
  .lois-row.special > button:last-child { grid-column: auto; justify-self: auto; }
  .lois-detail { margin-left: 0; }
}

/* 토큰 크기 */
.token-size { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.token-size input { width: 72px !important; height: 28px; padding: 2px 6px; }
.token.glide { transition: left .2s cubic-bezier(.22, .8, .3, 1), top .2s cubic-bezier(.22, .8, .3, 1); }

/* 팔레트 */
.pal-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.pal-head b { font-size: var(--text-13); }
dialog.palette-window { min-width: 240px; }
dialog.palette-window .d-head { min-height: 42px; padding: 4px 6px 4px 14px; font-size: var(--text-13-5); }
.palette-body { padding: 6px 8px 12px !important; }
.pal-who { font-weight: 700; font-size: var(--text-13); padding: 4px 6px 2px; }
.palette-body .pal-item, .palette .pal-item { min-height: 30px; justify-content: flex-start; padding: 0 8px; border-radius: 7px; }
.palette-body .pal-item .muted, .palette .pal-item .muted { font-size: var(--text-11-5); }

/* 자료실 끌어놓기 */
.media-library { position: relative; }
.media-drop-hint { display: none; }
.media-library.drop-over .media-drop-hint { position: absolute; inset: -4px; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--accent); border-radius: var(--r-2xl); background: #0f1116e0; color: var(--text); pointer-events: none; }
.media-drop-hint span { color: var(--muted); font-size: var(--text-12); }
.erosion-table { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1px; max-width: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); position: relative; }
.erosion-cell { padding: 5px 10px; background: var(--bg2); font-size: var(--text-12-5); font-variant-numeric: tabular-nums; text-align: center; }
.erosion-cell.range { text-align: left; color: var(--text-dim); }
.erosion-cell.head { background: var(--bg3); color: var(--muted); font-size: var(--text-11-5); text-align: center; }
.erosion-cell.head:first-child { text-align: left; }

/* 대화창: 넓은 화면에서도 너무 길어지지 않게 가운데 고정 폭 */
.dialogue-layout { left: 50%; right: auto; width: min(96%, 1000px); transform: translateX(-50%); grid-template-columns: clamp(110px, 24%, 230px) minmax(0, 1fr); }
/* 표정이 없어도 대화창 시작 위치는 같게: 빈 칸이 표정 자리를 차지 */
.dialogue-layout > div:first-child:not(.dialogue-box) { visibility: hidden; }
.dialogue-portrait { height: clamp(160px, 30vh, 300px); object-position: bottom center; }

/* 씬 편집 */
.scene-card.editing { border-color: var(--line2); }
.scene-editor { grid-column: 1 / -1; padding: 10px 12px 4px; margin-top: 2px; border-top: 1px solid var(--line); }
.scene-editor label { margin-top: 6px; }
.scene-editor .grid2 { gap: 0 12px; }
.scene-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; color: #b9c0cf; }

/* 대화창 색 */
.dialogue-colors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: center; }
.dlg-color-list { display: flex; flex-direction: column; gap: 6px; }
.dlg-color { display: flex; align-items: center; gap: 10px; }
.dlg-color .check { width: 80px; }
.dlg-color input[type=color] { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--line2); border-radius: 7px; background: var(--bg); }
.dlg-color input[type=color]:disabled { opacity: .35; }
.dlg-color input[type=range] { width: 110px; }
.dialogue-preview { position: static !important; transform: none !important; width: auto !important; min-height: 0 !important; padding: 12px 14px !important; display: block; border: 1px solid #42464d; border-radius: var(--r-xl); background: #11151beb; color: var(--text); }
@container (max-width: 640px) { .dialogue-colors { grid-template-columns: minmax(0, 1fr); } }

/* 영상 함께 보기 */
.video-layer { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; width: min(92%, 960px); pointer-events: none; }
.video-card { pointer-events: auto; border-radius: var(--r-2xl); overflow: hidden; background: var(--shade); border: 1px solid color-mix(in srgb, var(--tint) 12.2%, transparent); box-shadow: 0 16px 48px color-mix(in srgb, var(--shade) 73.3%, transparent); }
.video-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; background: #14171ef2; font-size: var(--text-13); }
.video-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--shade); }
.video-paused { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--muted); background: #0b0c10; }
.video-layer.minimized { width: auto; min-width: 260px; }
.video-form .row { margin-top: 10px; }

/* 목록 글자 크기·마우스오버 미리보기 */
.lib-item-head b { font-size: var(--text-14-5); }
.lib-item .hint { font-size: var(--text-12-5); }
.lib-text { font-size: var(--text-13); line-height: 1.6; }
.lib-item { cursor: default; border-radius: var(--r-md); padding: 10px 8px; }
.lib-item:hover { background: color-mix(in srgb, var(--tint) 2.4%, transparent); }
.lib-preview { position: fixed; z-index: 5000; max-height: calc(100vh - 16px); overflow: hidden; padding: 16px 18px; border-radius: var(--r-2xl); background: #191c23f7; border: 1px solid var(--line2); box-shadow: 0 18px 50px color-mix(in srgb, var(--shade) 80%, transparent); pointer-events: none; animation: lib-pop .12s ease-out; }
.lib-preview .lib-item-head { margin-bottom: 6px; }
.lib-preview .lib-item-head b { font-size: calc(17px * var(--ui-fs, 1)); }
.lib-preview .hint { font-size: var(--text-13-5); line-height: 1.55; }
.lib-preview .lib-text { font-size: var(--text-15); line-height: 1.75; max-height: none; color: var(--text); margin-top: 10px; }
.lib-preview .badge { font-size: var(--text-12); }
@keyframes lib-pop { from { opacity: 0; transform: translateY(4px); } }

/* 자료실: 분류로 끌어 넣기, 음원 줄 */
.media-library.dragging-asset .media-tabs button[data-folder]:not([data-folder=""]):not([data-folder="recent"]) { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 53.3%, transparent); }
.media-tabs button.drop-target { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; transform: scale(1.05); }
.media-item[draggable=true] { cursor: grab; }
.media-tracks { gap: 4px; }
.media-tracks .media-item.track { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; padding: 6px 8px; }
.media-tracks .media-item.track.playing { border-color: color-mix(in srgb, var(--gold) 53.3%, transparent); background: color-mix(in srgb, var(--gold) 5.1%, transparent); }
.track-play.small { width: 34px; height: 34px; padding: 0; border-radius: 9px; }
.media-tracks .media-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.track-name { font-size: var(--text-13-5) !important; font-weight: 600; color: var(--text); white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block !important; -webkit-line-clamp: unset !important; }
.track-meta { font-size: var(--text-11-5) !important; color: var(--muted); white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block !important; -webkit-line-clamp: unset !important; }
.media-tracks .media-item.track input[type=checkbox] { margin: 0 6px; }

/* 2026-10-07 자료실: 목록이 짧아도 아래 막대(페이지·닫기)를 창 바닥에 */
dialog.floating-window .d-body:has(> .media-library) { display: flex; flex-direction: column; }
dialog.floating-window .d-body > .media-library { flex: 1 0 auto; display: flex; flex-direction: column; }
.media-library > .media-foot { margin-top: auto; }

/* 2026-10-07 채팅 로그 접기 */
.log-more { text-align: center; padding: 6px; }

/* 2026-10-08 시트: 개요·로어·커스텀 */
.dlg-color-label { width: 80px; color: var(--muted); font-size: var(--text-13); padding-left: 26px; }
.ov-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-xl); background: color-mix(in srgb, var(--tint) 2%, transparent); }
.ov-face { width: 112px; height: 112px; border-radius: var(--r-xl); overflow: hidden; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; }
.ov-face img { width: 100%; height: 100%; object-fit: cover; }
.ov-face .face.placeholder { width: 100%; height: 100%; font-size: calc(40px * var(--ui-fs, 1)); border-radius: 0; border: 0; }
.ov-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--text-18); margin-bottom: 4px; }
.ov-line { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; font-size: var(--text-13-5); }
.ov-abilities { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.ov-ab { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 10px; background: var(--bg); }
.ov-ab-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ov-ab-head span { color: var(--muted); font-weight: 600; }
.ov-ab-head b { font-size: var(--text-20); color: var(--gold); }
.ov-skill { display: flex; justify-content: space-between; font-size: var(--text-13); padding: 1px 0; }
.ov-skill.zero { color: var(--muted); opacity: .65; }
.ov-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ov-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.ov-tile span { font-size: var(--text-12); }
.ov-tile b { font-size: var(--text-18); }
.ov-weapons { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ov-weapon { display: grid; grid-template-columns: minmax(110px, 2fr) repeat(6, minmax(44px, 1fr)); gap: 8px; padding: 6px 12px; font-size: var(--text-13-5); border-top: 1px solid var(--line); }
.ov-weapon.head { border-top: 0; font-size: var(--text-12); background: color-mix(in srgb, var(--tint) 2.4%, transparent); }
.ov-attack { color: var(--accent2); }
.ov-mods { margin-top: 10px; }
.ov-mods summary { cursor: pointer; color: var(--muted); font-size: var(--text-13); }
.ov-mods .grid3 { margin-top: 8px; }
@container (max-width: 640px) { .ov-abilities, .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-card { grid-template-columns: 80px minmax(0, 1fr); } .ov-face { width: 80px; height: 80px; } }

.lore-profile { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 8px; }
.lore-pic { position: relative; width: 180px; aspect-ratio: 1; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; }
.lore-pic img { width: 100%; height: 100%; object-fit: cover; }
.lore-pic.editable { cursor: pointer; }
.lore-pic-edit { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--shade) 73.3%, transparent); font-size: var(--text-12); opacity: 0; transition: opacity .15s; }
.lore-pic.editable:hover .lore-pic-edit { opacity: 1; }
.lore-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lore-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--text-22); }
.lore-fields { margin-bottom: 10px; }
.lore-field { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.lore-field-head { display: flex; gap: 4px; align-items: center; }
.lore-field-head input { flex: 1; font-weight: 700; background: transparent; border-color: transparent; padding-left: 4px; }
.lore-field-head input:focus { border-color: var(--line); }
.lore-field textarea { min-height: 52px; }
@container (max-width: 640px) { .lore-profile { grid-template-columns: 110px minmax(0, 1fr); } .lore-pic { width: 110px; } }
.lib-filters { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 1.6%, transparent); position: relative; }
.lib-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lib-filter-label { width: 52px; flex: none; font-size: var(--text-12-5); color: var(--muted); font-weight: 600; }
.lib-filters .chip { padding: 2px 9px; font-size: var(--text-12-5); border-radius: var(--r-pill); }
.lib-filters .chip.on { background: #14384a; border-color: var(--accent); color: var(--tint); }
.lib-filter-reset { position: absolute; right: 8px; top: 6px; }
.lib-count { padding: 2px 0 6px; }
.combo-toolbar { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.combo-help { flex: 1; min-width: 0; font-size: var(--text-13); color: var(--muted); }
.combo-help summary { cursor: pointer; }
.combo-help ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.combo-help code { color: var(--gold); background: color-mix(in srgb, var(--tint) 3.9%, transparent); padding: 0 4px; border-radius: var(--r-xs); }
.combo-var-pop { position: fixed; z-index: 5000; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; min-width: 200px; padding: 6px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 12px 30px color-mix(in srgb, var(--shade) 66.7%, transparent); }
.combo-var-pop button { justify-content: flex-start; text-align: left; }

/* 2026-10-08 채팅창 폭 조절 */
.chat { position: relative; }
.chat-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 20; }
.chat-resize::after { content: ''; position: absolute; left: 3px; top: 50%; width: 2px; height: 40px; transform: translateY(-50%); border-radius: 2px; background: var(--line); opacity: 0; transition: opacity .15s; }
.chat-resize:hover::after, body.chat-resizing .chat-resize::after { opacity: 1; background: var(--accent); }
body.chat-resizing { cursor: col-resize; user-select: none; }
body.chat-resizing iframe { pointer-events: none; }
@media (max-width: 900px) { .chat-resize { display: none; } }
.d10-btn { font-weight: 700; letter-spacing: .3px; font-size: var(--text-12); padding: 0 8px; }
/* 캐릭터 카드: 이니셔티브를 이름 줄 오른쪽 작은 칩으로 */
.init-pill { flex: none; display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--tint) 3.1%, transparent); font-size: var(--text-12); font-weight: 700; color: var(--text); line-height: 1.5; }
.init-pill small { font-size: var(--text-10); font-weight: 600; color: var(--muted); }
.char-card.acting .init-pill { border-color: var(--gold); color: var(--gold); }
.scene-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.scene-opt-label { font-size: var(--text-13); color: var(--muted); }
.scene-at button { font-size: var(--text-12-5); padding: 3px 10px; }
.obj-list .obj-row { align-items: center; }
.obj-thumb { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.obj-thumb.blank { display: inline-block; border-style: dashed; }
.obj-preview { position: fixed; z-index: 5000; width: 260px; max-height: 260px; padding: 8px; border-radius: var(--r-xl); background: #191c23f7; border: 1px solid var(--line); box-shadow: var(--shadow-xl); pointer-events: none; display: grid; place-items: center; }
.obj-preview img { max-width: 100%; max-height: 244px; object-fit: contain; }
.combo-bottom { gap: 8px; margin-top: 8px; }
.combo-bottom .on { color: var(--gold); }
.combo-help { margin-top: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 1.6%, transparent); }
.combo-detail-bar { gap: 12px; margin: 6px 0; }
.combo-vars { margin-top: 8px; }
.combo-vars summary { cursor: pointer; color: var(--text); }
.combo-var-group { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; margin-top: 8px; align-items: start; font-size: var(--text-12-5); }
.combo-var-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.combo-var-chips small { color: var(--muted); }
.combo-var-pop .combo-var-title { padding: 2px 4px 6px; }
.combo-var-pop.multi .combo-var-item { padding: 4px 6px; border-radius: var(--r-sm); }
.combo-var-pop.multi .combo-var-item:hover { background: color-mix(in srgb, var(--tint) 3.9%, transparent); }
.combo-var-pop > .primary { margin-top: 6px; }
.item-eqp.hand select { width: 100%; padding: 2px 4px; font-size: var(--text-12); }
.ov-mod-grid { margin-top: 8px; }
@container (max-width: 640px) { .combo-var-group { grid-template-columns: minmax(0, 1fr); } }

/* 2026-10-08 토큰 효과 (토큰 탭에서 토큰마다) */
.token { --fx-base: drop-shadow(0 3px 5px color-mix(in srgb, var(--shade) 53.3%, transparent)); }
.token.fx-border { --fx-base: drop-shadow(2px 0 0 var(--fx-border)) drop-shadow(-2px 0 0 var(--fx-border)) drop-shadow(0 2px 0 var(--fx-border)) drop-shadow(0 -2px 0 var(--fx-border)) drop-shadow(0 3px 5px color-mix(in srgb, var(--shade) 53.3%, transparent)); }
.token img { filter: var(--fx-base); }
.token.fx-border .token-blank { border-color: var(--fx-border); }
.token.fx-glow img, .token.fx-glow .token-blank { animation: tok-glow 2.2s ease-in-out infinite; }
@keyframes tok-glow { 0%, 100% { filter: var(--fx-base) drop-shadow(0 0 3px var(--fx-glow)); } 50% { filter: var(--fx-base) drop-shadow(0 0 12px var(--fx-glow)) drop-shadow(0 0 4px var(--fx-glow)); } }
.token.fx-aura::before { content: ''; position: absolute; left: -12%; right: -12%; bottom: -10%; height: 34%; border-radius: var(--r-round); background: radial-gradient(closest-side, var(--fx-aura), transparent); opacity: .75; z-index: -1; pointer-events: none; animation: tok-aura 2.6s ease-in-out infinite; }
@keyframes tok-aura { 50% { opacity: .35; transform: scale(1.08); } }
.token.fx-ghost img, .token.fx-ghost .token-blank { opacity: .45; }
.token.fx-flip img { transform: scaleX(-1); }

/* 배드 스테이터스 자동 효과 (룰 창에서 끌 수 있음) */
.token.cond-poison img, .token.cond-poison .token-blank { animation: cond-poison 1.8s ease-in-out infinite; }
@keyframes cond-poison { 50% { filter: var(--fx-base) drop-shadow(0 0 10px #4fd16a) sepia(.4) hue-rotate(60deg); } }
.token.cond-berserk::after { content: ''; position: absolute; inset: -14%; border-radius: var(--r-round); background: radial-gradient(closest-side, #ff2a2a66, transparent 75%); pointer-events: none; z-index: -1; animation: cond-berserk 1s ease-in-out infinite; }
@keyframes cond-berserk { 50% { transform: scale(1.12); opacity: .55; } }
.token.cond-hidden img, .token.cond-hidden .token-blank { opacity: .5; }
.token.cond-down img, .token.cond-down .token-blank { filter: grayscale(1) brightness(.6) var(--fx-base); transform: rotate(-12deg); }
.token.cond-rigor img { filter: var(--fx-base) saturate(.5) hue-rotate(170deg) brightness(.95); }
.token.cond-dazed img, .token.cond-dazed .token-blank { animation: cond-dazed 2.4s ease-in-out infinite; }
@keyframes cond-dazed { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.token.cond-pressure img { filter: var(--fx-base) drop-shadow(0 8px 6px #3c1a6e) brightness(.85); }
.token.cond-hatred img { filter: var(--fx-base) drop-shadow(0 0 6px #b0102a); }
.token.cond-fear img, .token.cond-fear .token-blank { animation: cond-fear .35s linear infinite; }
@keyframes cond-fear { 25% { translate: -1px 0; } 75% { translate: 1px 0; } }
@media (prefers-reduced-motion: reduce) { .token img, .token .token-blank, .token::before, .token::after { animation: none !important; } }

.token-fx { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; align-items: center; font-size: var(--text-13); }
.token-fx .fx-color input[type=color] { width: 32px; height: 22px; padding: 1px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); }
.token-fx .fx-color input[type=color]:disabled { opacity: .35; }
.token-fx-default { grid-template-columns: minmax(0, 1fr) !important; }

/* 2026-10-08 화면 연출 (필터·비네트·번쩍임·프로세스 띠) */
.sfx-overlay { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.sfx-overlay.sfx-mono { backdrop-filter: grayscale(1) contrast(1.05); }
.sfx-overlay.sfx-sepia { backdrop-filter: sepia(.85) contrast(.95) brightness(.95); }
.sfx-overlay.sfx-red { backdrop-filter: sepia(.6) saturate(2.4) hue-rotate(-40deg) brightness(.9); background: #ff1e1e14; }
.sfx-overlay.sfx-blue { backdrop-filter: saturate(.7) hue-rotate(160deg) brightness(.9); background: #1e5aff10; }
.sfx-overlay.sfx-desat { backdrop-filter: saturate(.35) brightness(.92); }
.sfx-overlay.sfx-blur { backdrop-filter: blur(3px) brightness(.95); }
.sfx-overlay.sfx-noise { backdrop-filter: contrast(1.1) saturate(.8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); animation: sfx-noise .25s steps(3) infinite; }
@keyframes sfx-noise { 33% { background-position: 37px -21px; } 66% { background-position: -53px 44px; } }
.sfx-overlay.sfx-scan { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--shade) 0%, transparent) 0 2px, color-mix(in srgb, var(--shade) 22%, transparent) 2px 4px); backdrop-filter: saturate(.8) brightness(.95); }
.sfx-overlay.sfx-scan::after { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--tint) 0%, transparent) 40%, color-mix(in srgb, var(--tint) 6.3%, transparent) 50%, color-mix(in srgb, var(--tint) 0%, transparent) 60%); background-size: 100% 300%; animation: sfx-scan 4s linear infinite; }
@keyframes sfx-scan { from { background-position: 0 100%; } to { background-position: 0 -200%; } }
.sfx-overlay.sfx-vignette { box-shadow: inset 0 0 18vmin 6vmin color-mix(in srgb, var(--shade) 86.7%, transparent); }
.sfx-flash { position: absolute; inset: 0; z-index: 88; pointer-events: none; opacity: 0; }
.sfx-banner-layer { position: absolute; inset: 0; z-index: 85; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.sfx-banner { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 70px; min-width: 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--shade) 0%, transparent), #0c0e13e8 18%, #0c0e13e8 82%, color-mix(in srgb, var(--shade) 0%, transparent)); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: skewX(-12deg); }
.sfx-banner > * { transform: skewX(12deg); }
.sfx-banner b { font-size: calc(30px * var(--ui-fs, 1)); letter-spacing: 2px; color: var(--tint); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
.sfx-banner span { font-size: var(--text-14); color: var(--gold); letter-spacing: 1px; }
.sfx-banner.main { border-color: var(--gold); }
.sfx-banner.main b { font-size: var(--text-24); }
.sfx-panel { position: fixed; z-index: 5000; width: 340px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-xl); background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
.sfx-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sfx-row.top { align-items: flex-start; }
.sfx-label { width: 48px; flex: none; font-size: var(--text-12-5); color: var(--muted); font-weight: 600; }
.sfx-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.sfx-chips .chip { padding: 2px 9px; font-size: var(--text-12-5); border-radius: var(--r-pill); }
.sfx-chips .chip.on { background: #14384a; border-color: var(--accent); color: var(--tint); }
.sfx-panel select { width: auto; }
/* 팔레트: 전투 중 지금 타이밍 강조 */
/* 팔레트 타이밍 강조 (2026-10-10): 지금 쓸 수 있는 것은 흰 테두리가 빛나고 왼쪽에서 반짝이가 흩날림 */
.pal-item.pal-now, .pal-item.pal-soft { position: relative; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--tint) 81.6%, transparent) !important; background: color-mix(in srgb, var(--tint) 5.1%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 33.3%, transparent) inset, 0 0 10px color-mix(in srgb, var(--tint) 25.1%, transparent); animation: pal-glow 2.4s ease-in-out infinite; }
.pal-item.pal-now .grow, .pal-item.pal-soft .grow { color: var(--tint); font-weight: 700; }
@keyframes pal-glow { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 60%, transparent) inset, 0 0 16px color-mix(in srgb, var(--tint) 40%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pal-item.pal-now, .pal-item.pal-soft { animation: none; } }
/* 판면 정보 카드 (편집 모드가 아닐 때 클릭) */
.board-toolbar.info { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 10px 12px; min-width: 200px; max-width: 280px; }
.info-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.info-head b { font-size: var(--text-15); }
.info-hp { color: #7fe0a8; font-size: var(--text-12-5); font-weight: 700; }
.info-er { color: #e9a0b0; font-size: var(--text-12-5); font-weight: 700; }
.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.info-grid > div { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--tint) 3.1%, transparent); }
.info-grid span { font-size: var(--text-10-5); color: var(--muted); }
.info-grid b { font-size: var(--text-14); }
.info-weapons > div { display: flex; gap: 6px; align-items: baseline; font-size: var(--text-12-5); }
.info-weapons b { color: var(--accent2); }
.info-weapons small { color: var(--muted); }
.info-conds { display: flex; flex-wrap: wrap; gap: 3px; }
.info-conds span { font-size: var(--text-11-5); padding: 1px 6px; border-radius: 5px; background: #502568; color: var(--tint); }
.info-memo { font-size: var(--text-12-5); color: var(--muted); white-space: pre-wrap; max-height: 120px; overflow: auto; }
.info-foot { display: flex; align-items: center; gap: 8px; }
.edit-mode-btn.on { color: var(--gold); border-color: var(--gold); }
.board.sfx-shaking-weak { animation: sfx-shake-weak .5s linear infinite; }
.board.sfx-shaking-strong { animation: sfx-shake-strong .32s linear infinite; }
@keyframes sfx-shake-weak { 0%, 100% { translate: 0 0; } 20% { translate: -3px 2px; } 40% { translate: 3px -2px; } 60% { translate: -2px -3px; } 80% { translate: 2px 3px; } }
@keyframes sfx-shake-strong { 0%, 100% { translate: 0 0; } 20% { translate: -9px 6px; } 40% { translate: 8px -7px; } 60% { translate: -7px -8px; } 80% { translate: 9px 7px; } }
.erosion-init-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 7.1%, transparent), transparent 55%); }
.erosion-init-row .ei-grp { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.erosion-init-row .ei-value { min-width: 48px; gap: 1px; }
.erosion-init-row .ei-value output { min-width: 0; font-size: calc(19px * var(--ui-fs, 1)); }
.erosion-init-row .ei-value small { margin: 0; }
.erosion-init-row .erosion-extra { width: 54px !important; height: 28px; padding: 2px 6px; text-align: center; }
.erosion-init-row .ei-apply { margin-left: auto; height: 28px; padding: 0 10px; }
.erosion-init-row output { font-size: var(--text-18); font-weight: 700; color: var(--gold); }
.free-xp .free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 10px; margin-top: 8px; }
.free-cell { display: flex; align-items: center; gap: 6px; font-size: var(--text-12-5); color: var(--muted); min-width: 0; }
.free-cell span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.free-cell input { width: 52px !important; flex: none; padding: 2px 6px; height: 28px; }
.free-cell.wide { grid-column: span 2; }
.combo-var-order { display: inline-grid; place-items: center; min-width: 16px; height: 16px; font-size: var(--text-10-5); border-radius: var(--r-round); color: var(--on-light); background: var(--gold); }
.combo-var-order:empty { display: none; }
.info-adjs { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.info-adj { display: flex; align-items: center; gap: 4px; font-size: var(--text-12-5); }
.info-adj > span { width: 44px; color: var(--muted); }
.info-adj .info-num { width: 52px !important; height: 26px; padding: 2px 6px; text-align: center; }
.info-adj button { min-width: 26px; }

/* 2026-10-08 로그 저장 창 */
.export-dialog { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 86vw); }
.export-dialog .export-card { margin: 0; padding: 14px 16px; border-radius: var(--r-xl); border: 1px solid var(--line); background: color-mix(in srgb, var(--tint) 1.6%, transparent); display: flex; flex-direction: column; gap: 10px; }
.export-dialog .export-main { border-color: color-mix(in srgb, var(--accent) 33.3%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5.1%, transparent), color-mix(in srgb, var(--tint) 1.2%, transparent) 60%); }
.export-head { display: flex; gap: 12px; align-items: flex-start; }
.export-head h4 { margin: 0 0 2px; font-size: var(--text-15); }
.export-head p { margin: 0; }
.export-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--bg3); color: var(--accent2); }
.export-main .export-icon { background: var(--accent); color: var(--accent-ink); }
.export-icon svg.ic { width: 18px; height: 18px; margin: 0; }
.export-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.export-row.end { justify-content: flex-end; }
.export-row[hidden] { display: none; }
.export-label { width: 34px; flex: none; font-size: var(--text-12-5); color: var(--muted); font-weight: 600; }
.export-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.export-tabs .chip { border-radius: var(--r-pill); padding: 2px 11px; font-size: var(--text-12-5); }
.export-tabs .chip.on { border-color: var(--c, var(--accent)); color: var(--c, var(--tint)); background: color-mix(in srgb, var(--tint) 3.9%, transparent); }
.export-status { margin-right: auto; }
.export-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); cursor: pointer; text-align: center; }
.export-drop:hover, .export-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 3.9%, transparent); }
.export-more summary { cursor: pointer; color: var(--muted); font-size: var(--text-13); padding: 2px 0 8px; }
/* 거리 재기 */
/* 판면 오른쪽 아래 막대: 좁은 화면에서는 아이콘만 (이름은 마우스를 올리면) */
@media (max-width: 1800px) {
  .zoom-bar > button[data-icon] { font-size: 0; gap: 0; min-width: 30px; padding: 0 6px; }
  .zoom-bar > button[data-icon] svg.ic { width: 16px; height: 16px; margin: 0; }
}

/* 알타이르 이름 (2026-10-09) */
.lobby h1 small { font-size: var(--text-14); font-weight: 600; color: var(--muted); letter-spacing: 0; align-self: flex-end; margin-bottom: 4px; }

/* 끌어서 배치하는 격자 (2026-10-09) */
.flow-grid { position: relative; display: flex; flex-direction: column; gap: 10px; }
.fg-row { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; }
.fg-item { transition: opacity .15s, box-shadow .15s, border-color .15s; }
.flow-grid:not(.fg-dragging) .fg-item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.fg-placeholder { opacity: .28; outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
.fg-ghost { position: fixed; z-index: 10000; pointer-events: none; margin: 0; opacity: .94; transform: rotate(-1.2deg) scale(1.02); box-shadow: 0 22px 48px color-mix(in srgb, var(--shade) 80%, transparent), 0 0 0 1px var(--accent); border-radius: var(--r-lg); cursor: grabbing; transition: transform .12s; }
.fg-dragging, .fg-dragging * { cursor: grabbing !important; user-select: none; }
.fg-indicator { position: absolute; z-index: 5; pointer-events: none; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 2px var(--tint); opacity: 0; transition: opacity .12s, left .12s, top .12s, width .12s, height .12s; }
.fg-indicator.on { opacity: 1; }
.lore-fields .fg-item { cursor: grab; }
.lore-fields .lore-field { padding: 10px 12px 12px; }
.lore-field .lore-del { opacity: 0; transition: opacity .15s; }
.lore-field:hover .lore-del, .lore-field:focus-within .lore-del { opacity: 1; }
.lore-field-head input { cursor: text; }
.lore-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@container (max-width: 640px) { .lore-fields .fg-row { grid-template-columns: repeat(min(var(--n, 1), 2), minmax(0, 1fr)); } }
.combo-var-pop.vars { max-width: min(520px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; }
.combo-var-pop.vars .combo-var-group { display: grid; gap: 4px; margin-top: 8px; }
.combo-var-pop.vars .combo-var-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.combo-var-pop.vars .combo-var-item { font-family: var(--font-mono); font-size: var(--text-12); }
/* 씬 목록: 끌어서 배치 · 설정 묶음 켜기 (2026-10-09) */
.scene-list .scene-grid { gap: 8px; }
.scene-list .fg-row { gap: 8px; }
.scene-list .scene-card { display: block; padding: 8px 10px; container-type: inline-size; cursor: grab; }
.scene-card-in { display: flex; align-items: center; gap: 10px; }
.scene-card-in .scene-pick { cursor: grab; }
.scene-card-in .scene-pick:active { cursor: grabbing; }
.scene-badges { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.scene-badges span { font-size: var(--text-10-5); padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 11%, transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
@container (max-width: 430px) {
  .scene-card-in { flex-direction: column; align-items: stretch; gap: 6px; }
  .scene-card-in .scene-pick { flex-direction: column; align-items: stretch; gap: 6px; }
  .scene-card-in .scene-mini { width: 100%; height: auto; aspect-ratio: 21 / 9; }
  .scene-card-in .scene-actions { flex-wrap: wrap; justify-content: flex-start; }
  .scene-card-in .scene-actions .small { padding-inline: 7px; }
}
.scene-editors { display: grid; gap: 8px; }
.scene-editor-wrap { border: 1px solid var(--line2); border-radius: var(--r-xl); background: var(--bg3); padding: 8px 12px 10px; animation: scene-ed-in .18s ease-out; }
@keyframes scene-ed-in { from { opacity: 0; transform: translateY(-4px); } }
.scene-editor-title { font-size: var(--text-13); }
.scene-editor-wrap .scene-editor { border-top: 0; padding: 4px 0 0; margin: 0; }
.scene-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.scene-toggle.on { background: color-mix(in srgb, var(--gold) 13.3%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); }
.scene-opt { padding: 8px 10px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 2.4%, transparent); border: 1px solid var(--line); animation: scene-ed-in .15s ease-out; }

.scene-opt-transition input[type=number] { width: 64px; }
.scene-cam-hint.flash { animation: cam-flash 1.2s ease-out; }
@keyframes cam-flash { 0% { color: var(--tint); text-shadow: 0 0 10px var(--gold); } 100% { color: inherit; text-shadow: none; } }
/* 주사위 굴림 연출 (2026-10-09, 10-10 유리 질감) */
.dice-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.dice-fx { position: absolute; left: 0; top: 0; pointer-events: none; }
.dice-fx.top { z-index: 1; }
.dice-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dz { position: absolute; left: 0; top: 0; display: grid; place-items: center; will-change: transform; --glow: var(--accent); --num: var(--tint); --num-glow: var(--tint);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--glow) 70%, transparent)) drop-shadow(0 2px 3px color-mix(in srgb, var(--shade) 53.3%, transparent)); }
.dz .dz-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dz b { position: relative; margin-top: -2px; font: 700 22px/1 var(--font-serif); color: var(--num); text-shadow: 0 0 6px var(--num-glow), 0 1px 2px color-mix(in srgb, var(--shade) 80%, transparent); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.5px; }
.dz.dz-landed b { animation: dz-pop .18s ease-out; }
@keyframes dz-pop { from { transform: scale(1.35); } }
.dz.dz-crit { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tint) 20%, transparent)) drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 3px var(--tint)) drop-shadow(0 8px 10px color-mix(in srgb, var(--shade) 66.7%, transparent)); }
.dz.dz-crit b { color: var(--tint); text-shadow: 0 0 8px var(--tint), 0 0 14px var(--glow); }
.dz.dz-old { opacity: .62 !important; transition: opacity .2s; }
.dz-gold b { text-shadow: 0 1px 0 color-mix(in srgb, var(--tint) 53.3%, transparent), 0 0 4px color-mix(in srgb, var(--tint) 26.7%, transparent); }
/* 황금: 멈춘 뒤 한 번만 빛이 스침 */
.dz-glint { position: absolute; inset: 14% 14% 18%; clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); background: linear-gradient(115deg, transparent 38%, #fffbe8cc 50%, transparent 62%); background-size: 300% 100%; background-position: 150% 0; mix-blend-mode: screen; pointer-events: none; }
.dz-landed .dz-glint { animation: dz-glint .7s ease-out .1s 1 both; }
@keyframes dz-glint { to { background-position: -150% 0; } }
.dz-total { position: absolute; z-index: 2; padding: 6px 16px; border-radius: var(--r-xl); background: #0d0f13e6; border: 1px solid color-mix(in srgb, var(--tint) 16.5%, transparent); font: 800 28px/1 var(--font-sans); color: var(--tint); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); font-variant-numeric: tabular-nums; }
.dz-total.critical { color: #ffe08a; border-color: color-mix(in srgb, var(--gold) 53.3%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 33.3%, transparent), 0 10px 30px color-mix(in srgb, var(--shade) 66.7%, transparent); }
.dz-total.fumble { color: #9aa3b2; font-size: var(--text-22); }
.dice-color-row { align-items: center; gap: 12px; }
.dice-sample { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none; --sample: var(--accent); --sample-dark: color-mix(in srgb, var(--sample) 45%, var(--shade)); --sample-light: color-mix(in srgb, var(--sample) 55%, var(--tint)); filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--shade) 53.3%, transparent)); }
.dice-sample svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dice-sample b { position: relative; margin-top: -4px; font-size: var(--text-13); color: var(--tint); text-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 53.3%, transparent); }
/* 설정 창 */
.settings-form .sec-title small { font-weight: 400; }
.settings-list { display: grid; gap: 4px; margin-bottom: 8px; }
.settings-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: color-mix(in srgb, var(--tint) 1.6%, transparent); }
.settings-check > span { display: grid; gap: 2px; min-width: 0; }
.settings-check small { font-size: var(--text-12); white-space: normal; overflow-wrap: anywhere; }
.settings-check.disabled { opacity: .6; }
.autocomplete { max-width: min(520px, calc(100vw - 16px)); }
.autocomplete .ac-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.autocomplete .ac-group { font-size: var(--text-10-5); padding: 1px 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tint) 6.3%, transparent); color: var(--muted); flex: none; }
.autocomplete .ac-sub { font-size: var(--text-12); font-family: var(--font-mono); }
.info-adj .hint { width: auto !important; font-size: var(--text-12); }
.info-adj .info-ok { margin-left: auto; color: var(--gold); }
.info-adj .info-ok svg { width: 15px; height: 15px; }
.prestige-select { width: auto !important; }
.prestige-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-12); padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--gold) 33.3%, transparent); color: var(--gold); background: color-mix(in srgb, var(--gold) 7.8%, transparent); }
.prestige-chip.p-crystal { color: #9fe0ff; border-color: #9fe0ff55; background: #9fe0ff12; }
.prestige-chip.p-obsidian { color: #c4a6ff; border-color: color-mix(in srgb, var(--purple) 33.3%, transparent); background: color-mix(in srgb, var(--purple) 7.1%, transparent); }
.prestige-chip.p-galaxy { color: #a9c0ff; border-color: #8fa8ff55; background: #8fa8ff12; }
.prestige-chip.p-rose { color: #ffb3c6; border-color: #ff7b9c55; background: #ff7b9c12; }

.fg-noselect, .fg-noselect * { user-select: none !important; -webkit-user-select: none !important; }
/* @표정·#캐릭터 선택 격자 (2026-10-10) */
.pick-pop { display: flex; gap: 10px; padding: 10px; z-index: 2999; max-width: min(640px, calc(100vw - 16px)); }
.pick-main { min-width: 0; }
.pick-hint { margin-bottom: 6px; font-size: var(--text-11-5); }
.pick-grid { display: grid; grid-template-columns: repeat(4, 86px); grid-auto-rows: 96px; gap: 6px; max-height: calc(96px * 4 + 6px * 3); overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.pick-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 4px; border-radius: var(--r-lg); border: 1px solid transparent; background: color-mix(in srgb, var(--tint) 2.4%, transparent); font-size: var(--text-11); min-width: 0; }
.pick-item img, .pick-blank { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; background: var(--bg); flex: none; }
.pick-blank { display: grid; place-items: center; font-size: calc(26px * var(--ui-fs, 1)); font-weight: 800; color: var(--c); border: 2px solid var(--c); background: color-mix(in srgb, var(--shade) 40%, transparent); }
.pick-label { width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-item.cur { border-color: color-mix(in srgb, var(--tint) 18.8%, transparent); }
.pick-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* 앱 안 입력·확인 창 (2026-10-10) */
.ask-dialog { border: 1px solid var(--line2); border-radius: var(--r-2xl); background: var(--bg2); color: var(--text); padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px color-mix(in srgb, var(--shade) 80%, transparent); animation: ask-in .14s ease-out; }
.ask-dialog::backdrop { background: color-mix(in srgb, var(--shade) 53.3%, transparent); backdrop-filter: blur(2px); }
@keyframes ask-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.ask-form { display: grid; gap: 10px; padding: 16px 18px; }
.ask-title { font-size: var(--text-15); }
.ask-message { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.ask-hint { margin: -4px 0 0; }
.ask-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
button.danger { background: #c8364a; border-color: #c8364a; color: var(--tint); }
button.danger:hover { background: #d9455a; }
.msg-edit-box { display: grid; gap: 4px; margin-top: 2px; }
.msg-edit { width: 100%; min-height: 54px; resize: vertical; font: inherit; line-height: 1.5; }
.msg-edit-bar { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.msg-edit-bar .hint { margin-right: auto; font-size: var(--text-11-5); }
.scene-opt-transition .sot-f { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin: 0; white-space: nowrap; font-size: var(--text-12-5); color: var(--muted); }
.scene-opt-transition select { width: auto; }
.scene-opt-transition input:disabled, .scene-opt-transition select:disabled { opacity: .45; }
.scene-opt-label { white-space: nowrap; }
/* 귓속말·연습장 (2026-10-10) */
#toBtn.whisper-on { color: #c9b6ff; border-color: color-mix(in srgb, var(--purple) 53.3%, transparent); background: color-mix(in srgb, var(--purple) 9.4%, transparent); }
#input.whispering { border-color: color-mix(in srgb, var(--purple) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 26.7%, transparent) inset; }
.msg.t-whisper { background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 7.8%, transparent), transparent 70%); border-left: 2px solid color-mix(in srgb, var(--purple) 53.3%, transparent); }
.msg.t-whisper .to { color: #c9b6ff; }
/* 내 캐릭터 보관함 (2026-10-10) */
.vault { display: grid; gap: 14px; }
.vault-sub { margin-bottom: 6px; }
.vault-room, .vault-list { display: grid; gap: 6px; }
.vault-row, .vault-card { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg3); }
.vault-card img, .vault-card .vault-blank { width: 64px; height: 64px; border-radius: var(--r-lg); object-fit: cover; flex: none; background: var(--bg); }
.vault-face, .vault-blank.small { width: 40px; height: 40px; border-radius: var(--r-md); object-fit: cover; flex: none; }
.vault-blank { display: grid; place-items: center; font-weight: 800; font-size: var(--text-22); color: var(--c); border: 2px solid var(--c); background: color-mix(in srgb, var(--shade) 40%, transparent); }
.vault-actions { display: flex; gap: 4px; flex: none; }
/* UGN 신상 보고서 (2026-10-10) */
dialog.report { width: min(900px, 96vw); }
.ugn-wrap { padding: 4px; }
.ugn-doc { --ink: #1d2230; --ink2: #4b5262; --line-p: #cfc6b3; --red: #b4262f; --navy: #1f3a6b;
  position: relative; color: var(--ink); background: #f4f0e6; background-image: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--shade) 3.9%, transparent) 27px 28px); border-radius: var(--r-xs); padding: 30px 34px 22px; box-shadow: 0 2px 0 #d8d0bd, 0 18px 40px color-mix(in srgb, var(--shade) 53.3%, transparent); font-family: var(--font-serif); overflow: hidden; }
.ugn-doc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--navy), #2c5299); }
.ugn-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; border-bottom: 3px double var(--ink); padding-bottom: 12px; }
.ugn-emblem { width: 60px; height: 60px; border-radius: var(--r-round); border: 3px solid var(--navy); display: grid; place-items: center; position: relative; background: radial-gradient(circle, var(--tint) 0 52%, transparent 53%); }
.ugn-emblem::before, .ugn-emblem::after { content: ''; position: absolute; background: var(--navy); }
.ugn-emblem::before { width: 2px; top: 4px; bottom: 4px; left: calc(50% - 1px); opacity: .25; }
.ugn-emblem::after { height: 2px; left: 4px; right: 4px; top: calc(50% - 1px); opacity: .25; }
.ugn-emblem span { font: 800 15px/1 var(--font-serif); letter-spacing: 1px; color: var(--navy); position: relative; z-index: 1; }
.ugn-title { display: grid; gap: 2px; }
.ugn-title b { font-size: var(--text-24); letter-spacing: 2px; }
.ugn-title small { font: 600 10.5px/1.3 var(--font-sans); letter-spacing: 2px; color: var(--ink2); }
.ugn-meta { display: grid; gap: 2px; font-family: var(--font-mono); font-size: var(--text-11-5); min-width: 170px; }
.ugn-meta .ugn-kv { grid-template-columns: 60px 1fr; padding: 1px 0; border: 0; }
.ugn-stamp { position: absolute; right: 36px; top: 96px; transform: rotate(-12deg); border: 3px solid var(--red); color: var(--red); padding: 4px 14px; font: 800 20px/1.1 var(--font-sans); letter-spacing: 6px; opacity: .72; border-radius: var(--r-sm); box-shadow: 0 0 0 2px #f4f0e6, 0 0 0 4px #b4262f55; pointer-events: none; mix-blend-mode: multiply; }
.ugn-sec { margin-top: 18px; }
.ugn-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--text-14); letter-spacing: 1px; color: var(--navy); border-bottom: 1px solid var(--line-p); padding-bottom: 4px; }
.ugn-sec h3 i { font: 700 11px/1 var(--font-mono); font-style: normal; color: var(--tint); background: var(--navy); padding: 3px 6px; border-radius: 3px; }
.ugn-id { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
.ugn-photo { margin: 0; padding: 6px 6px 4px; background: var(--tint); box-shadow: 0 2px 6px color-mix(in srgb, var(--shade) 20%, transparent); transform: rotate(-1.5deg); position: relative; }
.ugn-photo::before { content: ''; position: absolute; top: -9px; left: 50%; width: 34px; height: 16px; translate: -50% 0; background: #c9cfd8; border-radius: 3px; box-shadow: inset 0 0 0 2px #aab2be; }
.ugn-photo img, .ugn-nophoto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #ddd; filter: saturate(.92) contrast(1.02); }
.ugn-nophoto { display: grid; place-items: center; color: #888; font-size: var(--text-12); }
.ugn-photo figcaption { font: 10px/1.6 var(--font-sans); color: var(--ink2); text-align: center; }
.ugn-idgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-content: start; }
.ugn-kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted var(--line-p); }
.ugn-kv span { font: 600 11px/1.4 var(--font-sans); color: var(--ink2); letter-spacing: 1px; }
.ugn-kv b { font-weight: 700; font-size: var(--text-14); overflow-wrap: anywhere; }
.ugn-kv.wide { grid-column: 1 / -1; }
.ugn-kv.big b { font-size: var(--text-22); letter-spacing: 1px; }
.ugn-erosion { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: center; }
.ugn-gauge { position: relative; height: 16px; border: 1px solid var(--ink); background: repeating-linear-gradient(90deg, var(--tint) 0 9.5%, color-mix(in srgb, var(--shade) 10.2%, transparent) 9.5% 10%); }
.ugn-gauge-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3a6fb3, #c79a2e 60%, #b4262f); }
.ugn-gauge-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--red); }
.ugn-gauge-mark span { position: absolute; top: -14px; left: 50%; translate: -50% 0; font: 700 9.5px/1 var(--font-mono); color: var(--red); }
.ugn-erosion-text { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; }
.ugn-erosion-text b { font-size: var(--text-28); font-family: var(--font-serif); }
.ugn-erosion-text small { grid-column: 1 / -1; font: 11px/1.4 var(--font-sans); color: var(--ink2); }
.ugn-grade { justify-self: start; font: 800 12px/1 var(--font-sans); padding: 3px 8px; border: 2px solid currentColor; letter-spacing: 2px; }
.ugn-erosion.ok .ugn-grade { color: #2f6b3c; } .ugn-erosion.mid .ugn-grade { color: #8a6a12; } .ugn-erosion.warn .ugn-grade { color: #b25a14; } .ugn-erosion.danger .ugn-grade { color: var(--red); }
.ugn-abilities { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.ugn-ab { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 8px; align-items: center; font: 600 12.5px/1 var(--font-sans); }
.ugn-ab b { font: 700 16px/1 var(--font-serif); text-align: right; }
.ugn-bar { height: 9px; background: color-mix(in srgb, var(--shade) 7.1%, transparent); border: 1px solid color-mix(in srgb, var(--shade) 20%, transparent); }
.ugn-bar i { display: block; height: 100%; background: var(--navy); }
.ugn-skills { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: var(--text-12-5); }
.ugn-skills b { margin-left: 3px; color: var(--navy); }
.ugn-combat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); }
.ugn-combat > div { display: grid; padding: 6px 10px; border-right: 1px solid var(--line-p); border-bottom: 1px solid var(--line-p); }
.ugn-combat span { font: 600 10.5px/1.4 var(--font-sans); color: var(--ink2); }
.ugn-combat b { font: 700 18px/1.2 var(--font-serif); }
.ugn-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--text-12-5); }
.ugn-table th { font: 600 10.5px/1.4 var(--font-sans); color: var(--ink2); text-align: left; border-bottom: 1px solid var(--ink); padding: 4px 6px; }
.ugn-table td { padding: 5px 6px; border-bottom: 1px dotted var(--line-p); }
.ugn-effects { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.ugn-effect { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 4px 0; border-bottom: 1px dotted var(--line-p); }
.ugn-effect span { font: 700 11px/1.6 var(--font-mono); color: var(--navy); }
.ugn-effect small { grid-column: 1 / -1; font: 10.5px/1.4 var(--font-sans); color: var(--ink2); }
.ugn-lois { display: grid; gap: 4px; }
.ugn-loi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 5px 0; border-bottom: 1px dotted var(--line-p); font-size: var(--text-13); }
.ugn-loi-type { font: 700 10px/1.6 var(--font-sans); padding: 0 6px; border: 1px solid var(--ink2); color: var(--ink2); letter-spacing: 1px; }
.ugn-loi.t-D .ugn-loi-type, .ugn-loi.t-E .ugn-loi-type { border-color: var(--navy); color: var(--tint); background: var(--navy); }
.ugn-loi small { color: var(--ink2); }
.ugn-feel { margin-left: auto; font-size: var(--text-12); color: var(--ink2); }
.ugn-feel em { font-style: normal; }
.ugn-feel em.on { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ugn-loi.titus > b { text-decoration: line-through 2px var(--red); }
.ugn-titus { font: 800 11px/1 var(--font-sans); color: var(--red); border: 2px solid var(--red); padding: 2px 6px; transform: rotate(-4deg); }
.ugn-quote { margin: 0 0 8px; padding: 6px 12px; border-left: 3px solid var(--navy); font-style: italic; white-space: pre-wrap; }
.ugn-note { margin-top: 6px; }
.ugn-note b { font-size: var(--text-12); color: var(--navy); letter-spacing: 1px; }
.ugn-note p { margin: 2px 0 0; white-space: pre-wrap; line-height: 1.75; font-size: var(--text-13-5); }
.ugn-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--ink); font: 10.5px/1.4 var(--font-sans); color: var(--ink2); }
.ugn-sign b { font: 700 14px/1 var(--font-serif); color: var(--ink); border-bottom: 1px solid var(--ink); padding: 0 12px; }
@media (max-width: 640px) { .ugn-doc { padding: 20px 16px; } .ugn-head { grid-template-columns: 48px 1fr; } .ugn-meta { grid-column: 1 / -1; } .ugn-id, .ugn-erosion, .ugn-abilities { grid-template-columns: 1fr; } .ugn-photo { width: 150px; } .ugn-combat { grid-template-columns: repeat(2, 1fr); } .ugn-idgrid { grid-template-columns: 1fr; } .ugn-stamp { top: 70px; right: 12px; font-size: var(--text-15); } }
@media print { .ugn-doc { box-shadow: none; } }
.scene-opt select { width: auto; max-width: 100%; }

/* 제목류는 함렛 */
button, input, select, textarea { font-family: inherit; }
.lobby h1, dialog .d-head, .sec-title, .dialogue-heading b, .scene-editor-title b, .ugn-doc, .pick-float b { font-family: var(--font-serif); }

.pick-float { width: 320px; max-height: none; display: grid; gap: 6px; padding: 8px; background: #0d0f13f0; border: 1px solid var(--line2); z-index: 3001; }
.pick-float img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-sm); display: block; }
.pick-float b { text-align: center; font-size: var(--text-13); }
.pick-float[hidden] { display: none; }

.pal-p { position: absolute; z-index: -1; left: 0; top: 0; border-radius: var(--r-round); background: var(--tint); box-shadow: 0 0 4px var(--tint), 0 0 8px color-mix(in srgb, var(--tint) 66.7%, transparent); pointer-events: none; will-change: transform, opacity; }
.settings-row { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 4px; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
/* 하단 대화창은 씬 전환 화면보다 위 (중간 화면 유지 중에도 대사가 보이게) */
.stand-layer { z-index: 95 !important; }
.eff-gear { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: var(--r-lg); display: grid; gap: 6px; }
.eff-gear-head { align-items: center; gap: 10px; }
.eff-gear-head select { width: auto; }
.eff-gear-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }

/* 고르기 창 (타이터스 승화 등) */
.ask-choice { min-width: min(420px, 90vw); }
.ask-choice-group { display: grid; gap: 6px; margin-top: 6px; }
.ask-choice-item { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px 12px; }
.ask-choice-item b { font-weight: 600; }
/* 고르기 창(타이터스 승화 등): 왼쪽 정렬 카드, 넓으면 두 칸 */
.ask-choice .ask-choice-group { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 12px; }
.ask-choice .ask-choice-group:first-of-type { margin-top: 4px; }
.ask-choice .ask-choice-group .sec-title { grid-column: 1 / -1; margin: 0; font-size: var(--text-12); color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.ask-choice .ask-choice-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 3px; padding: 10px 12px; min-height: 60px; height: auto; white-space: normal; }
.ask-choice .ask-choice-item .hint { font-size: var(--text-12); line-height: 1.45; }
.ask-choice-top { display: flex; align-items: center; gap: 6px; width: 100%; }
.ask-choice-top b { flex: 1; font-size: var(--text-14); }
.ask-choice-tag { flex: none; font-size: var(--text-10-5); padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); }
.ask-choice .ask-choice-group { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.ask-choice .ask-actions { margin-top: 12px; }
.lois-row label.done { color: var(--gold); font-weight: 600; }
.eff-lvadj { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-12); color: var(--muted); white-space: nowrap; }
.eff-lvadj input { width: 56px; height: 28px; text-align: center; }

/* 자료실: 선택한 자료 한 번에 분류 */
.media-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; margin: 4px 0; border: 1px solid var(--accent, #6aa0ff); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent, #6aa0ff) 10%, transparent); }
.media-bulk select { max-width: 220px; }

/* 씬: 편집 중인 씬은 목록 위에 고정 */
.scene-dock { position: sticky; top: 0; z-index: 5; max-height: 55vh; overflow: auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 8px; margin: 6px 0; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.scene-dock[hidden] { display: none; }
.scene-dock .scene-editor-title { display: flex; align-items: center; gap: 6px; }
.scene-actions { display: flex; gap: 4px; }
.scene-actions .icon-only.del:hover { color: var(--bad); }

.memo-item { display: flex; align-items: center; gap: 6px; }
.memo-item-by { margin-left: auto; font-size: var(--text-11); white-space: nowrap; }
.memo-by { margin: 2px 0 4px; font-size: var(--text-12); }

.info-grid .info-sheet { align-self: stretch; justify-self: stretch; min-height: 0; padding: 2px 6px; }

.char-portrait { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.char-portrait .init-pill { padding: 0 6px; font-size: var(--text-11-5); }
.char-card .owner.codename { color: #c9cfdc; font-size: var(--text-11-5); }
@media (max-width: 600px) { .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pick-float { display: none; } }

/* 주사위 그림자 (높이에 따라 작아짐) */
.dz-shadow { position: absolute; left: 0; top: 0; width: 62px; height: 22px; border-radius: var(--r-round); background: radial-gradient(closest-side, color-mix(in srgb, var(--shade) 80%, transparent), color-mix(in srgb, var(--shade) 0%, transparent)); pointer-events: none; will-change: transform, opacity; opacity: 0; }

/* 이펙트 장비 */
.gear-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-size: var(--text-12-5); }
.gear-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--bg3); }
.eff-gear-hint { margin: 4px 0 6px; font-size: var(--text-12); line-height: 1.55; }
.eff-gear-hint code { padding: 0 4px; border-radius: var(--r-xs); background: var(--bg4); }
.eff-gear-now { color: var(--gold); }
.info-gear { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.info-gear span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-11-5); padding: 1px 2px 1px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tint) 5.1%, transparent); }
.eff-gear .eff-cell-label { display: block; font-size: var(--text-11); margin-bottom: 3px; color: var(--muted); }
.eff-gear-head > .eff-cell-label { display: inline; font-size: var(--text-12); margin: 0; }

/* 로이스 감정 고르기·메모리 */
.emo-field { display: flex; gap: 4px; min-width: 0; flex: 1; }
.emo-field select { min-width: 0; flex: 1; }
.emo-field .emo-custom { min-width: 0; flex: 1; }
.memory-box { margin-top: 14px; }
.memory-list { display: grid; gap: 6px; }
.memory-row { display: grid; gap: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg3); }
.memory-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.sort-list .fg-row { display: block; }
.sort-list .fg-item { cursor: grab; }
.flow-grid.sort-list { gap: 0; }
.sort-list .fg-row { gap: 0; }
.sort-list:not(.fg-dragging) .fg-item:hover { border-color: inherit; }
.resource-sort.flow-grid { gap: 8px; }

/* 행동치 0 미만 경고 */
.neg, .neg b, .init-pill.neg, .ov-tile.neg b { color: var(--bad) !important; }
.init-pill.neg { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10.2%, transparent); }
.ov-tile.neg, .info-grid > div.neg { box-shadow: inset 0 0 0 1px var(--bad); }
.warn-line { margin: 6px 0; padding: 6px 10px; border-radius: var(--r-md); color: #ffb3a8; background: color-mix(in srgb, var(--bad) 10.2%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); font-size: var(--text-12-5); }

.eff-buff { margin-top: 8px; }
.info-gear span.buff { background: color-mix(in srgb, var(--purple) 12.2%, transparent); }

.toast-undo { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.toast-undo button { flex: none; }

/* 이펙트 표 간단히 보기 */
.eff-head.compact, .eff-row.compact { grid-template-columns: 2.4fr 52px 52px 1.2fr 1.1fr .8fr 56px; }
.effect-group .eff-head.compact, .effect-group .eff-row.compact { min-width: 0; }
.eff-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.eff-more .eff-cell-label { display: block; font-size: var(--text-11); margin-bottom: 3px; color: var(--muted); }

/* 엑스트라 (대사 전용 캐릭터) */
.extra-group { margin-top: 10px; border-top: 1px dashed var(--line2); padding-top: 6px; }
.extra-head { display: flex; gap: 6px; align-items: center; }
.extra-toggle { justify-content: flex-start; text-align: left; color: var(--muted); }
.extra-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; margin-top: 6px; }
.extra-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--r-md); background: var(--bg3); border: 1px solid transparent; cursor: pointer; min-width: 0; }
.extra-row:hover { border-color: var(--line2); }
.extra-row.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.extra-row .face { width: 26px; height: 26px; border-radius: var(--r-sm); object-fit: cover; flex: none; font-size: var(--text-12); }
.extra-row .name { font-size: var(--text-12-5); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 팔레트 우클릭 메뉴 */
.pal-menu { position: fixed; z-index: 3002; min-width: 240px; display: grid; gap: 2px; padding: 6px; }
.pal-adj-title { font-size: var(--text-13); margin: 2px 2px 6px; }
.pal-adj-f { display: grid; grid-template-columns: 80px 70px 1fr; align-items: center; gap: 6px; margin: 2px; font-size: var(--text-12-5); }
.pal-adj-f input { width: 70px; }
.pal-adj-preview { font-family: var(--font-mono); color: var(--gold); font-size: var(--text-12-5); margin: 6px 2px; min-height: 1em; }
.pal-adj-actions { gap: 6px; margin-top: 4px; }

.init-panel.idle { min-width: 0; padding: 6px; }

.board-menu button { display: flex; align-items: center; gap: 12px; }
.menu-key { font: 600 10.5px/1 var(--font-mono); color: var(--muted); border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 2px 5px; background: color-mix(in srgb, var(--tint) 3.1%, transparent); }

.init-log { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; font-size: var(--text-12); }
.init-log summary { cursor: pointer; color: var(--muted); }
.init-log-list { max-height: 160px; overflow: auto; display: grid; gap: 2px; margin-top: 4px; }

.init-idle { gap: 6px; }

/* FS 판정 패널 */
.fs-panel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 22; width: min(560px, calc(100% - 24px)); background: #12151cee; border: 1px solid color-mix(in srgb, var(--tint) 11%, transparent); border-radius: var(--r-xl); padding: 10px 12px; box-shadow: 0 10px 30px color-mix(in srgb, var(--shade) 53.3%, transparent); backdrop-filter: blur(8px); display: grid; gap: 8px; }
.fs-panel[hidden] { display: none; }
.fs-head { display: flex; align-items: baseline; gap: 10px; }
.fs-head b { font: 700 16px/1.2 var(--font-serif); }
.fs-meta { font-size: var(--text-12); color: var(--muted); }
.fs-cells { display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); gap: 3px; }
.fs-cell { text-align: center; font: 600 11.5px/22px var(--font-sans); color: #7d8599; border: 1px dashed color-mix(in srgb, var(--tint) 10.2%, transparent); border-radius: 5px; }
.fs-cell.mile { color: #cfd5e2; border-style: solid; border-color: color-mix(in srgb, var(--tint) 18.8%, transparent); font-weight: 800; }
.fs-cell.on { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--tint); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fs-cell.cur { box-shadow: 0 0 0 2px var(--gold) inset; }
.fs-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--tint) 3.9%, transparent); font-size: var(--text-13); }
.fs-note { white-space: pre-wrap; font-size: var(--text-12); }
.fs-actions { gap: 6px; }
.fs-editor { display: flex; flex-direction: column; gap: 18px; }
.fs-sec { display: flex; flex-direction: column; gap: 10px; }
.fs-sec .sec-title { margin: 0; }
.fs-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.fs-grid.two { grid-template-columns: 1fr 1fr; }
.fs-grid.one { grid-template-columns: 160px; }
.fs-editor .field { display: flex; flex-direction: column; gap: 5px; }
.fs-abilities { display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 34px; align-items: center; }
.fs-table { display: grid; gap: 6px; }
.fs-row { display: grid; gap: 6px; align-items: center; }
.fs-row.head { font-size: var(--text-11); color: var(--muted); }
.fs-stage { grid-template-columns: 58px 58px minmax(0, 1.8fr) 66px minmax(0, 1.6fr) 32px; align-items: start; }
.fs-hap { grid-template-columns: 58px 58px minmax(0, 1fr) 32px; }
.fs-table > button { justify-self: start; }
.fs-current.hap { background: #c8a2400f; }
.fs-cell.event { border-color: var(--gold); }
@media (max-width: 700px) { .fs-grid, .fs-grid.two { grid-template-columns: 1fr; } .fs-stage { grid-template-columns: 48px 48px 1fr 56px 28px; } .fs-stage > input:nth-child(5) { grid-column: 1 / -2; } }

/* ---- 내 페이지 ---- */
.lobby.me-page { max-width: 1100px; }
.me-tabs { margin-top: 12px; }
.me-dot { display: inline-block; width: 32px; height: 32px; border-radius: var(--r-round); }
.me-chars .avatar { width: 40px; height: 40px; object-fit: cover; }
.me-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.me-file { margin: 0; background: var(--bg3); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.me-file img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.me-file audio { width: 100%; margin: 8px 0; }
.me-file figcaption { display: flex; align-items: center; gap: 4px; padding: 4px 6px; font-size: var(--text-12); }
.me-file figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; padding: 4px 12px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.exp-summary { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.exp-summary .field { max-width: 220px; }
.exp-big { display: flex; flex-direction: column; }
.exp-big b { font-size: var(--text-28); line-height: 1.1; color: var(--accent2); }
.exp-counts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exp-wrap { overflow-x: auto; margin: 0 -4px 10px; }
.exp-table { border-collapse: collapse; width: 100%; min-width: 960px; font-size: var(--text-13); }
.exp-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.exp-table td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
.exp-table td.c { text-align: center; }
.exp-table input[type=text] { width: 100%; min-width: 140px; }
.exp-table input[type=date] { width: 130px; }
.exp-table .w-num { width: 64px; }
.exp-table tr.gm { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.exp-table .gm-cell .row { gap: 8px; align-items: center; }

/* ---- 실행 버튼 · 연출 프리셋 ---- */
.obj.board-button { display: flex; padding: 4px; border-radius: var(--r-xl); background: transparent; }
.obj.board-button.is-hidden { outline: 2px dashed var(--muted); }
.board-run { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 100%; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--btn, var(--accent)) 70%, var(--tint) 0%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn, var(--accent)) 85%, var(--tint) 15%), var(--btn, var(--accent))); color: var(--tint); font-weight: 700; font-size: var(--text-16); box-shadow: 0 4px 14px color-mix(in srgb, var(--btn, var(--accent)) 40%, transparent); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-run:hover:not(:disabled) { filter: brightness(1.1); }
.board-run:active:not(:disabled) { transform: translateY(1px); }
.board-run:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
.board-run-icon { font-size: .8em; opacity: .9; }
.act-editor { display: grid; grid-template-columns: 200px 1fr; gap: 14px; min-height: 360px; }
.act-side { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 10px; }
.act-item { display: flex; align-items: center; gap: 6px; text-align: left; background: transparent; border: 1px solid transparent; }
.act-item.on { background: var(--bg3); border-color: var(--line); }
.act-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.act-steps { margin: 0; }
.act-steps .sort-list .fg-item + .fg-item, .act-steps .fg-row + .fg-row { margin-top: 8px; }
.act-step-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-round); background: var(--bg4); font-size: var(--text-11); color: var(--muted); flex: none; }
.act-step { background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.act-step-body { display: flex; flex-direction: column; gap: 6px; cursor: default; }
.act-step .row { gap: 8px; align-items: flex-end; }
@media (max-width: 700px) { .act-editor { grid-template-columns: 1fr; } .act-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; } }
.fs-state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-12); }
/* 실행 버튼이 된 패널: 누르면 눌리는 느낌 */
.obj.panel.action-panel.can-run { cursor: pointer; transition: transform .08s ease, filter .12s ease, box-shadow .15s ease; }
.obj.panel.action-panel.can-run:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 25.1%, transparent), 0 6px 18px color-mix(in srgb, var(--shade) 46.7%, transparent); }
.obj.panel.action-panel.can-run.pressed, .obj.panel.action-panel.can-run:active { transform: translateY(2px) scale(.97); filter: brightness(.88); box-shadow: 0 1px 4px color-mix(in srgb, var(--shade) 53.3%, transparent) inset; }
.obj.panel.action-panel.fired { animation: action-fire .45s ease-out; }
@keyframes action-fire { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tint) 66.7%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--tint) 0%, transparent); } }
.obj.panel.action-panel::after { content: '▶'; position: absolute; right: 4px; top: 4px; font-size: var(--text-10); line-height: 1; padding: 3px 5px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--shade) 66.7%, transparent); color: var(--tint); pointer-events: none; opacity: .75; }
.obj.panel.action-panel:not(.can-run)::after { display: none; }
.exp-guide { margin: 4px 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg3); }
.exp-guide summary { cursor: pointer; font-weight: 700; font-size: var(--text-15); }
.exp-guide-lead { margin: 10px 0 12px; line-height: 1.6; }
.exp-guide-list { display: grid; grid-template-columns: minmax(180px, max-content) 1fr; gap: 8px 16px; margin: 0; }
.exp-guide-list dt { display: flex; align-items: center; gap: 8px; }
.exp-guide-list dd { margin: 0; line-height: 1.55; color: var(--text); }
.exp-guide-gm { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.exp-guide-gm p { margin: 6px 0 0; line-height: 1.6; }
.exp-table th small { display: block; font-weight: 400; font-size: var(--text-11); opacity: .8; }
.exp-table th[title] { cursor: help; }
@media (max-width: 700px) { .exp-guide-list { grid-template-columns: 1fr; } .exp-guide-list dd { margin-bottom: 6px; } }
.exp-table select { min-width: 72px; }
/* ---- 관리자 ---- */
.admin-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.admin-stat { display: flex; flex-direction: column; gap: 2px; }
.admin-stat b { font-size: var(--text-22); }
.admin-title { margin: 0 0 10px; font-size: var(--text-15); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-13); }
.admin-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table td:last-child { text-align: right; }
.admin-danger { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.admin-danger p { line-height: 1.6; }
.card:has(> .admin-table) { overflow-x: auto; }
.admin-text { line-height: 1.6; margin: 0 0 10px; }
/* 장면 목록의 씬 구분선 (창 너비 가득, 버튼은 마우스를 올리면 줄 위에 겹쳐 보임) */
.scene-divider { position: relative; display: flex; align-items: center; gap: 12px; padding: 0; min-height: 30px; cursor: grab; color: var(--muted); }
.scene-divider b { font: 700 13px/1 var(--font-serif); letter-spacing: 1px; color: var(--accent2); white-space: nowrap; }
.scene-divider-name { font-size: var(--text-12-5); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; margin-left: -4px; }
.scene-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line2) 12%, var(--line2) 88%, transparent); min-width: 20px; }
.scene-divider-actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px 2px 2px 10px; border-radius: var(--r-md); background: linear-gradient(90deg, transparent, var(--bg2) 14px); opacity: 0; pointer-events: none; transition: opacity .15s; }
.scene-divider:hover .scene-divider-actions, .scene-divider:focus-within .scene-divider-actions { opacity: 1; pointer-events: auto; }
.scene-divider.current b { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.scene-divider.current .scene-divider-line { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 12%, color-mix(in srgb, var(--accent) 55%, transparent) 88%, transparent); }
/* 지금 씬 표시 */
.scene-rule-now { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--bg3); font-size: var(--text-12-5); color: var(--muted); }
.scene-rule-now:not(.on) { padding-right: 12px; }
.scene-rule-now b { font-weight: 700; }
.scene-rule-dot { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--muted); opacity: .5; }
.scene-rule-now.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--bg3)); color: var(--text); }
.scene-rule-now.on b { color: var(--accent2); }
.scene-rule-now.on .scene-rule-dot { background: var(--accent); opacity: 1; box-shadow: 0 0 8px var(--accent); }
.scene-rule-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.scene-rule-end { min-height: 0; height: 22px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--text-12); background: transparent; border-color: var(--line2); color: var(--muted); }
button.scene-rule-end:hover:not(:disabled) { color: var(--text); border-color: var(--accent); background: transparent; }
.init-scene-chip { font-size: var(--text-12); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent2); }
.prestige-chip.p-azure { color: #8ae6ff; border-color: #36d1ff55; background: #36d1ff12; }
.prestige-chip.p-emerald { color: #9ff5cf; border-color: #3fe0a055; background: #3fe0a012; }
.prestige-chip.p-flame { color: #ffc35a; border-color: #ff7a1f55; background: #ff7a1f12; }
.prestige-chip.p-frost { color: #e6f6ff; border-color: #cfefff55; background: #cfefff12; }
.prestige-chip.p-bloodstone { color: #ff8a9a; border-color: #d0203c66; background: #d0203c14; }
.prestige-chip.p-pearl { color: #f7e9ff; border-color: #f7d9ff55; background: #f7d9ff12; }
.dice-sample.is-white b { color: #1a2130; text-shadow: none; }
/* 판정 능력치·기능 고르기 */
.skill-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 34px; padding: 3px 4px; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--bg); min-width: 0; }
.skill-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; border-radius: var(--r-pill); background: var(--bg4); font-size: var(--text-12-5); white-space: nowrap; }
.skill-chip.ab { background: color-mix(in srgb, var(--accent) 18%, var(--bg4)); color: var(--accent2); }
.skill-chip-x { min-height: 0; height: 18px; width: 18px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-round); font-size: var(--text-13); }
.skill-chip-x:hover:not(:disabled) { background: color-mix(in srgb, var(--tint) 7.8%, transparent); color: var(--text); }
select.skill-add { width: auto; min-width: 84px; height: 26px; min-height: 0; padding: 0 6px; font-size: var(--text-12-5); border-style: dashed; background: transparent; }
.skill-sub-wrap { display: inline-flex; align-items: center; gap: 2px; }
.skill-sub-wrap b { font-size: var(--text-12-5); color: var(--accent2); }
input.skill-sub { width: 140px; height: 26px; min-height: 0; padding: 0 6px; font-size: var(--text-12-5); }
/* 로어 테마 BGM */
.lore-bgm { display: flex; flex-direction: column; gap: 8px; }
.lore-bgm-row { gap: 8px; align-items: center; }
.lore-bgm-name { font-size: var(--text-13); color: var(--text); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lore-bgm-frame { width: 320px; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); }
/* 공사중 */
.wip-cover { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #16202ff2, #07090ef8 70%); backdrop-filter: blur(14px); }
.wip-cover.hidden { display: none; }
.wip-card { position: relative; width: min(420px, calc(100vw - 48px)); padding: 34px 28px 28px; border-radius: 16px; border: 1px solid var(--line2); background: #121722e6; text-align: center; overflow: hidden; box-shadow: 0 30px 80px color-mix(in srgb, var(--shade) 66.7%, transparent); }
.wip-stripes { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, #121722 14px 28px); opacity: .85; animation: wip-slide 1.2s linear infinite; }
@keyframes wip-slide { to { background-position: 39.6px 0; } }
.wip-card b { display: block; font: 700 26px/1.2 var(--font-serif); letter-spacing: 6px; color: var(--accent2); margin: 6px 0 12px; }
.wip-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.wip-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.wip-dots i { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--accent); opacity: .3; animation: wip-dot 1.2s ease-in-out infinite; }
.wip-dots i:nth-child(2) { animation-delay: .2s; } .wip-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes wip-dot { 40% { opacity: 1; transform: translateY(-3px); } }
body.wip-on > :not(.wip-cover):not(dialog) { visibility: hidden; }
.wip-banner { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 14px; border-radius: var(--r-pill); background: #121722f0; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--shade) 53.3%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); font-size: var(--text-12-5); color: var(--muted); }
.wip-banner.hidden { display: none; }
.wip-banner b { color: var(--accent2); letter-spacing: 2px; }
#btnWip.on { color: var(--accent2); border-color: var(--accent); }
/* 씬 시작 연출 */
.scene-banner { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 22px; pointer-events: none; background: radial-gradient(ellipse at center, #05070cb0 0%, #05070c60 35%, transparent 70%); animation: sb-bg 3.4s ease forwards; }
.sb-body { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sb-body small { font: 600 13px/1 var(--font-sans); letter-spacing: 10px; color: var(--accent2); opacity: 0; animation: sb-in .7s .15s ease forwards, sb-out .6s 2.6s ease forwards; padding-left: 10px; }
.sb-body b { font: 700 72px/1 var(--font-serif); color: var(--tint); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 2px var(--tint); opacity: 0; animation: sb-num 1s .25s cubic-bezier(.2,.9,.3,1) forwards, sb-out .6s 2.7s ease forwards; }
.sb-body span { margin-top: 8px; font: 500 18px/1.3 var(--font-serif); letter-spacing: 3px; color: var(--text); opacity: 0; animation: sb-in .8s .6s ease forwards, sb-out .6s 2.7s ease forwards; }
.sb-line { height: 1px; width: 0; background: linear-gradient(90deg, transparent, var(--accent)); box-shadow: 0 0 10px var(--accent); animation: sb-line 1s .1s cubic-bezier(.2,.9,.3,1) forwards, sb-out .6s 2.6s ease forwards; }
.sb-line.r { background: linear-gradient(270deg, transparent, var(--accent)); }
@keyframes sb-line { to { width: min(22vw, 220px); } }
@keyframes sb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sb-num { from { opacity: 0; transform: scale(1.35); filter: blur(6px); letter-spacing: 18px; } to { opacity: 1; transform: none; filter: none; letter-spacing: 2px; } }
@keyframes sb-out { to { opacity: 0; } }
@keyframes sb-bg { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 다이스 커스텀 (캐릭터 편집 → 커스텀 → 주사위) */
.dice-swatch { display: inline-block; width: 18px; height: 18px; flex: none; border: 1px solid color-mix(in srgb, var(--tint) 40%, transparent); border-radius: var(--r-xs); transform: rotate(45deg) scale(.86); box-shadow: 0 1px 4px color-mix(in srgb, var(--shade) 46.7%, transparent); }
.dice-custom { display: grid; gap: 12px; }
.dice-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dice-preset { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: var(--r-pill); font-size: var(--text-12-5); background: var(--bg); border: 1px solid var(--line2); }
.dice-preset:hover:not(:disabled) { border-color: var(--accent); }
.dice-preset.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.dice-parts { gap: 12px; align-items: flex-end; }
.dice-parts .field { margin: 0; min-width: 150px; }
.dice-parts .field > span { display: block; font-size: var(--text-12); color: var(--muted); margin-bottom: 4px; }
.dice-body-pick { display: flex; align-items: flex-end; gap: 8px; }
.dice-body-pick > .dice-swatch { margin-bottom: 8px; }
.dice-body-pick input[type=color] { width: 40px; height: 34px; padding: 3px; }
.prestige-chip.p-custom { color: var(--accent2); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.lifepath { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lifepath-card { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--bg); }
.lifepath-title { font-size: var(--text-12); letter-spacing: .08em; color: var(--accent2); }
@media (max-width: 760px) { .lifepath { grid-template-columns: 1fr; } }
.dice-fx-pick { display: grid; gap: 6px; }
.dice-fx-color { gap: 8px; align-items: center; font-size: var(--text-12); }
.dice-fx-color input[type=color] { width: 40px; height: 28px; padding: 2px; }
.dice-fx-color input[type=color]:disabled { opacity: .35; }
.lore-bgm-slot { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--line2); }
.lore-bgm-slot:last-of-type { border-bottom: 0; }
.lore-bgm-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-sm); font-size: var(--text-11); font-weight: 700; color: var(--accent-ink); background: var(--accent); }
.lore-bgm-volwrap { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.lore-bgm-vol { width: 90px; }
.lore-bgm-play.on { border-color: var(--accent); color: var(--accent2); }
.lore-bgm-foot { align-items: center; gap: 10px; margin-top: 4px; }
.pal-info { display: block; font-size: var(--text-11); color: var(--muted); margin-top: 1px; font-weight: 400; }
.combo-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auto-grow { resize: none; overflow: hidden; }

/* 입력칸 도구: 특수문자 · 계산기 */
.sym-btn { font-size: var(--text-12); letter-spacing: -1px; padding-inline: 7px; }
.popover.symbols { width: 296px; padding: 8px; }
.sym-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.sym { min-width: 0; height: 32px; padding: 0; font-size: var(--text-15); background: var(--bg); border: 1px solid var(--line2); border-radius: 7px; }
.sym:hover { border-color: var(--accent); color: var(--accent2); }
.sym-foot { margin-top: 6px; font-size: var(--text-11); }
.popover.calc { width: 248px; padding: 10px; display: grid; gap: 6px; }
.calc-expr { font: 600 15px/1.2 var(--font-mono, ui-monospace, monospace); }
.calc-out { font: 700 20px/1.2 var(--font-mono, ui-monospace, monospace); color: var(--accent2); text-align: right; min-height: 24px; }
.calc-out.err { font-size: var(--text-12); font-weight: 400; color: var(--bad); }
.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.calc-key { height: 34px; padding: 0; font-size: var(--text-15); background: var(--bg); border: 1px solid var(--line2); border-radius: 7px; }
.calc-key.op { color: var(--accent2); }
.calc-key.wide { grid-column: span 3; }
.calc-foot { align-items: center; gap: 6px; }
.calc-foot .hint { font-size: var(--text-11); }
.sym-setting input { flex: 1; }
.lore-field-title { display: block; padding: 5px 2px; font-size: var(--text-13-5); font-weight: 700; }
/* 신상 조서: 한마디 · 개인 기록 */
.ugn-motto { grid-column: 1 / -1; margin: 4px 0 0; padding: 10px 16px; border-left: 4px solid var(--navy); background: #1f3a6b0d; font: 700 16px/1.6 var(--font-serif); color: var(--ink); white-space: pre-wrap; }
.ugn-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ugn-trait { padding: 7px 12px 8px; border: 1px solid var(--line-p); border-left: 4px solid var(--navy); background: #fffdf8; }
.ugn-trait.t-like { border-left-color: #c2456a; } .ugn-trait.t-dislike { border-left-color: #6b7280; } .ugn-trait.t-skill { border-left-color: #b4862e; } .ugn-trait.t-hobby { border-left-color: #2f7a6a; }
.ugn-trait span { font: 600 10.5px/1.4 var(--font-sans); color: var(--ink2); letter-spacing: 1px; }
.ugn-trait p { margin: 2px 0 0; font-size: var(--text-13-5); font-weight: 600; white-space: pre-wrap; line-height: 1.55; }
.ugn-lifepath { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; border: 1px solid var(--ink); }
.ugn-lifepath > div { display: grid; align-content: start; gap: 2px; padding: 7px 12px; border-right: 1px solid var(--line-p); }
.ugn-lifepath > div:last-child { border-right: 0; }
.ugn-lifepath span { font: 600 10.5px/1.4 var(--font-sans); color: var(--ink2); letter-spacing: 1px; }
.ugn-lifepath b { font: 700 14.5px/1.35 var(--font-serif); }
.ugn-lifepath small { font: 11.5px/1.5 var(--font-sans); color: var(--ink2); white-space: pre-wrap; }
@media (max-width: 640px) { .ugn-traits, .ugn-lifepath { grid-template-columns: 1fr; } }
.ugn-idgrid .ugn-kv { grid-template-columns: minmax(74px, max-content) minmax(0, 1fr); }
.cutin-sound { font-size: var(--text-12-5); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cutin-vol { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.cutin-vol input { width: 90px; }
.cutin-vol small { min-width: 22px; font-variant-numeric: tabular-nums; }
.give-box { margin-top: 6px; padding: 5px 8px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line2)); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: var(--text-13); display: grid; gap: 5px; }
.give-text b { color: var(--accent2); font-size: var(--text-12); }
.give-actions { gap: 8px; align-items: center; }
.mod-chip.debuff b { color: #ff9a8a; }
.give-editor { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r-lg); margin: 4px 0 8px; }
.give-head { gap: 10px; align-items: center; }
.give-head select { width: auto; }
.give-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.give-cell { display: grid; gap: 3px; font-size: var(--text-11-5); color: var(--muted); margin: 0; }
.give-cell input { text-align: center; }
.give-conds { gap: 6px; align-items: center; }
.give-cond { display: inline-flex; gap: 4px; align-items: center; }
.give-cond input { width: 64px; }
@media (max-width: 820px) { .give-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cond.mod { border-style: dashed; color: var(--accent2); }
.ask-dialog:has(.ask-choice.sublimate) { width: min(520px, 94vw); max-width: none; }
.ask-choice.sublimate .ask-choice-group { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.admin-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-pw { width: 100%; font-size: var(--text-18); letter-spacing: 1px; text-align: center; padding: 8px; }
.admin-folder { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r-md); background: var(--bg3); overflow-wrap: anywhere; }
.admin-pending { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-room-tools { gap: 8px; margin: 8px 0; align-items: center; }
.admin-empty { margin-left: 6px; }
.ask-dialog.admin-members-dlg { width: min(560px, calc(100vw - 32px)); }
/* 전경 편집 */
.fg-edit { position: absolute; z-index: 9000; border: 2px dashed var(--gold); background: color-mix(in srgb, var(--gold) 7.8%, transparent); cursor: move; box-sizing: border-box; touch-action: none; }
.fg-handle { position: absolute; width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--gold); border: 2px solid var(--on-light); }
.fg-handle.nw { left: -10px; top: -10px; cursor: nwse-resize; } .fg-handle.se { right: -10px; bottom: -10px; cursor: nwse-resize; }
.fg-handle.ne { right: -10px; top: -10px; cursor: nesw-resize; } .fg-handle.sw { left: -10px; bottom: -10px; cursor: nesw-resize; }
.fg-edit-bar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 12px; border-radius: var(--r-xl); background: var(--bg2); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); box-shadow: var(--shadow-lg); max-width: calc(100% - 24px); }
.fg-edit-bar b { color: var(--gold); font-size: var(--text-13); }
.fg-edit-read { font-size: var(--text-12); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 160px; }
/* 핸드아웃 */
.ho-view { display: flex; flex-direction: column; gap: 16px; }
.ho-trailer { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px; border-radius: var(--r-2xl); background: linear-gradient(135deg, #1b2230, #11151c); border: 1px solid var(--line); }
.ho-trailer:not(:has(.ho-poster)) { grid-template-columns: minmax(0, 1fr); }
.ho-poster { width: 100%; border-radius: var(--r-lg); object-fit: cover; box-shadow: 0 10px 30px color-mix(in srgb, var(--shade) 60%, transparent); }
.ho-trailer-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ho-title { margin: 0; font-family: var(--font-serif, serif); font-size: var(--text-24); letter-spacing: .5px; }
.ho-intro { margin: 0; white-space: pre-wrap; line-height: 1.8; color: #d7dbe4; }
.ho-video { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 640px; border-radius: var(--r-lg); overflow: hidden; background: var(--shade); }
.ho-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ho-bgm { gap: 8px; align-items: center; }
.ho-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ho-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-xl); background: var(--bg3); border: 1px solid var(--line); }
.ho-card.mine { border-color: color-mix(in srgb, var(--accent) 53.3%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset; }
.ho-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ho-label { font-size: var(--text-15); color: var(--accent2, var(--accent2)); }
.ho-card-title { font-weight: 600; }
.ho-who { margin-left: auto; font-size: var(--text-12); color: var(--muted); }
.ho-card-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-md); }
.ho-lois { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: var(--text-13); }
.ho-lois dt { color: var(--muted); } .ho-lois dd { margin: 0; }
.ho-emo { opacity: .7; } .ho-emo.on { opacity: 1; font-weight: 700; color: var(--gold); }
.ho-cover { margin: 0; font-size: var(--text-13); }
.ho-body { margin: 0; white-space: pre-wrap; line-height: 1.7; font-size: var(--text-14); }
.ho-secret { padding: 10px 12px; border-radius: var(--r-lg); border: 1px dashed color-mix(in srgb, var(--bad) 60%, transparent); background: color-mix(in srgb, var(--bad) 7.1%, transparent); }
.ho-secret b { color: #ff9a8c; font-size: var(--text-12-5); } .ho-secret p { margin: 6px 0 4px; white-space: pre-wrap; line-height: 1.6; font-size: var(--text-14); }
.ho-card-foot { justify-content: flex-end; margin-top: auto; }
.ho-edit { display: flex; flex-direction: column; gap: 14px; }
.ho-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-xl); background: var(--bg3); border: 1px solid var(--line); }
.ho-sec h3 { margin: 0; font-size: var(--text-14); }
.ho-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-12); color: var(--muted); min-width: 0; }
.ho-field input, .ho-field textarea, .ho-field select { width: 100%; }
.ho-item-head { gap: 6px; } .ho-label-in { width: 80px; font-weight: 700; }
.ho-lois-edit { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr auto; gap: 8px; }
@media (max-width: 760px) { .ho-lois-edit { grid-template-columns: 1fr 1fr; } .ho-trailer { grid-template-columns: minmax(0, 1fr); } }
.ho-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); }
.ho-secret-edit textarea { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.ho-page { max-width: 1080px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ho-page-bar { align-items: center; gap: 10px; }
.ho-share { gap: 6px; }
.ho-image .ho-card-foot { display: none; }
/* 판면 핑 */
.board-ping { position: absolute; width: 0; height: 0; z-index: 9500; pointer-events: none; --s: var(--token-label-scale, 1); }
.board-ping i { position: absolute; left: calc(-28px * var(--s)); top: calc(-28px * var(--s)); width: calc(56px * var(--s)); height: calc(56px * var(--s)); border-radius: var(--r-round); border: calc(3px * var(--s)) solid var(--gold); box-shadow: 0 0 calc(12px * var(--s)) color-mix(in srgb, var(--gold) 66.7%, transparent); animation: board-ping 1.1s ease-out 2 both; }
.board-ping i + i { animation-delay: .35s; }
.board-ping.mine i { border-color: var(--accent); box-shadow: 0 0 calc(12px * var(--s)) color-mix(in srgb, var(--accent) 66.7%, transparent); }
.board-ping-name { position: absolute; left: 50%; top: calc(34px * var(--s)); transform: translateX(-50%) scale(var(--s)); transform-origin: top center; white-space: nowrap; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--shade) 80%, transparent); color: var(--tint); font-size: var(--text-12); animation: board-ping-name 2.2s ease-out both; }
@keyframes board-ping { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes board-ping-name { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* 관전자: 잡담 탭에서만 입력 (주사위·팔레트 없이) */
body.viewer.chan-sub .composer #paletteBtn, body.viewer .composer .dice-quick { display: none !important; }
.vault-face-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; }
.vault-face { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: var(--r-lg); border: 2px solid var(--line); background: var(--bg3); cursor: pointer; font-size: var(--text-11-5); color: var(--muted); }
.vault-face img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: var(--r-sm); }
.vault-face.on { border-color: var(--gold); color: var(--text); }
.ask-dialog.vault-faces { width: min(560px, calc(100vw - 32px)); }
/* 재생목록 */
.pl-edit { display: flex; flex-direction: column; gap: 12px; }
.pl-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-xl); background: var(--bg3); border: 1px solid var(--line); }
.pl-list.playing { border-color: color-mix(in srgb, var(--gold) 53.3%, transparent); }
.pl-head { gap: 6px; align-items: center; }
.pl-head input[type=text] { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.pl-head select { flex: none; width: auto; }
.pl-tracks { list-style: decimal inside; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-tracks li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--r-md); font-size: var(--text-13); }
.pl-tracks li.now { background: color-mix(in srgb, var(--gold) 9.4%, transparent); color: var(--gold); }
.pl-tracks input[type=range] { width: 90px; flex: none; }
.pl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-list > .small { align-self: flex-start; }
/* 판정 요청 */
.req-box { margin-top: 6px; padding: 8px 10px; border-radius: var(--r-lg); background: var(--bg3); border: 1px solid var(--line); }
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.req-row { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: var(--text-13); }
.req-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-res { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: var(--text-15); }
.req-res i { font-style: normal; font-size: var(--text-11); font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.req-res i.ok { color: #7fe0a8; } .req-res i.ng { color: #ff9a8c; }
.req-row.crit .req-res { color: var(--gold); } .req-row.fum .req-res { color: #ff8a7a; }
.req-count { margin-top: 4px; font-size: var(--text-11-5); }
.req-form { display: flex; flex-direction: column; gap: 10px; }
.req-quick { gap: 6px; }
/* 손들기 · 자리비움 */
.hands { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hands-label { font-size: var(--text-11); color: var(--gold); }
.hand-chip { height: 24px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 9.4%, transparent); color: var(--gold); font-size: var(--text-12); cursor: pointer; }
#btnHand.on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.avatar.away { opacity: .45; filter: grayscale(.6); outline: 2px dashed var(--muted); outline-offset: 1px; }
/* 체력 상태 */
.bar.vague span { font-weight: 600; }
.bar.vague.lv1 i, .token-hp.vague.lv1 i { background: var(--bad); }
.bar.vague.lv2 i, .token-hp.vague.lv2 i { background: #f0a040; }
/* 내레이션 자막 */
.narration { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 9999; max-width: min(820px, calc(100% - 40px)); padding: 18px 30px; border-radius: var(--r-2xl); background: #05070ad0; box-shadow: 0 20px 60px color-mix(in srgb, var(--shade) 80%, transparent); pointer-events: none; animation: narr-in .6s ease-out both; }
.narration p { margin: 0; white-space: pre-wrap; text-align: center; font-family: var(--font-serif, serif); font-size: calc(21px * var(--ui-fs, 1)); line-height: 1.8; color: #f3f0e6; letter-spacing: .3px; }
.narration.out { animation: narr-out .9s ease-in both; }
@keyframes narr-in { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes narr-out { to { opacity: 0; } }
.msg.t-narration { justify-content: center; padding: 10px 14px; }
.msg.t-narration .narr-text { flex: 1; text-align: center; white-space: pre-wrap; font-family: var(--font-serif, serif); font-size: var(--text-14-5); line-height: 1.8; color: #e9e4d6; font-style: italic; }
/* 토큰 말풍선 */
.ping-wheel { position: absolute; width: 0; height: 0; z-index: 9600; pointer-events: none; }
.ping-wheel-center { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: var(--r-round); border: 2px dashed color-mix(in srgb, var(--tint) 53.3%, transparent); background: color-mix(in srgb, var(--shade) 40%, transparent); }
.ping-wheel-item { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; padding: 6px 8px; border-radius: var(--r-xl); background: #0b1426e6; border: 2px solid var(--pc, var(--gold)); color: var(--tint); font-size: var(--text-12); white-space: nowrap; box-shadow: 0 4px 14px color-mix(in srgb, var(--shade) 53.3%, transparent); transition: transform .08s; }
.ping-wheel-item b { font-size: var(--text-18); line-height: 1; color: var(--pc, var(--gold)); }
.ping-wheel-item.on { transform: translate(-50%, -50%) scale(1.15); background: var(--pc, var(--gold)); color: var(--on-light); }
.ping-wheel-item.on b { color: var(--on-light); }
.ping-look { --pc: var(--gold); } .ping-danger { --pc: #ff5a5a; } .ping-move { --pc: #3ddc84; } .ping-search { --pc: #b58cff; } .ping-gather { --pc: var(--accent); }
.board-ping.ping-danger i, .board-ping.ping-move i, .board-ping.ping-search i, .board-ping.ping-gather i { border-color: var(--pc); box-shadow: 0 0 calc(12px * var(--s)) var(--pc); }
.board-ping-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(var(--s)); font-size: var(--text-22); color: var(--pc); text-shadow: 0 0 6px var(--shade); animation: board-ping-name 2.2s ease-out both; }
@keyframes bub-in { from { opacity: 0; margin-top: 0; } }
/* 투표 */
.poll-box { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--bg3); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.poll-box.closed { opacity: .8; }
.poll-q { font-size: var(--text-14); }
.poll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.poll-opt { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg2); cursor: pointer; overflow: hidden; text-align: left; font-size: var(--text-13); }
.poll-opt:disabled { cursor: default; }
.poll-opt.on { border-color: var(--accent); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 12.2%, transparent); pointer-events: none; }
.poll-label { position: relative; flex: 1; } .poll-n { position: relative; font-weight: 700; }
.poll-who { padding-left: 10px; font-size: var(--text-11-5); }
.poll-foot { align-items: center; }
body.viewer #btnPoll { display: none !important; }
/* 비밀 언어 */
.lang-tag { font-size: var(--text-10-5); padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--purple) 53.3%, transparent); color: #c9b0ff; }
.lang-tag.hidden-lang { border-style: dashed; color: var(--muted); }
.lang-sel { max-width: 110px; }
/* 날씨·입자 효과 · 장면 정보 띠 */
.sfx-weather { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; display: none; }
.sfx-weather.on { display: block; }
.scene-info { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; max-width: calc(100% - 340px); white-space: nowrap; overflow: hidden; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: var(--r-md); background: linear-gradient(90deg, #070a10e0, #070a1099); border-left: 3px solid var(--gold); color: #ece7d9; font-size: var(--text-13); letter-spacing: .5px; box-shadow: var(--shadow-md); pointer-events: none; backdrop-filter: blur(4px); }
.scene-info.hidden { display: none; }
.scene-info .si-0 { font-family: var(--font-serif, serif); font-weight: 700; color: var(--gold); }
.scene-info .si-sep { width: 1px; height: 12px; background: color-mix(in srgb, var(--tint) 25.1%, transparent); }
.si-panel { width: 360px; display: flex; flex-direction: column; gap: 10px; }
.si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.si-field { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-12); color: var(--muted); }
/* 주사위 통계 */
.stats-box { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--bg3); border: 1px solid color-mix(in srgb, var(--gold) 26.7%, transparent); display: flex; flex-direction: column; gap: 8px; }
.st-head { display: flex; align-items: baseline; gap: 8px; } .st-head b { color: var(--gold); }
.st-his { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.st-hi { display: flex; flex-direction: column; padding: 6px 10px; border-radius: var(--r-md); background: var(--bg2); }
.st-hi small { color: var(--muted); font-size: var(--text-11); } .st-hi b { font-size: var(--text-20); } .st-hi span { font-size: var(--text-12); }
.st-table { width: 100%; border-collapse: collapse; font-size: var(--text-12-5); }
.st-table th, .st-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.st-table th:first-child, .st-table td:first-child { text-align: left; }
.st-range { gap: 6px; }

.fg-editing .scene-info { visibility: hidden; }
.pal-mods { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.pal-mod { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--pm, color-mix(in srgb, var(--gold) 53.3%, transparent)); background: color-mix(in srgb, var(--gold) 7.8%, transparent); font-size: var(--text-12); overflow: hidden; }
.pal-mod b { white-space: nowrap; color: var(--pm, var(--gold)); }
.pal-mod small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-mod.buff, .pal-mod.gear { --pm: var(--accent); background: color-mix(in srgb, var(--accent) 7.8%, transparent); }
.pal-mod.got { --pm: #3ddc84; background: #3ddc8414; }
.pal-mod.debuff { --pm: #ff6b6b; background: #ff6b6b14; }
/* 좌하단 내 상태창 */
.userbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); background: #0a1120; flex: none; min-width: 0; }
.ub-pic { padding: 0; border: 0; background: none; border-radius: var(--r-round); cursor: pointer; flex: none; line-height: 0; }
.ub-pic:hover .ub-avatar { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--accent); }
.avatar.ub-avatar { width: 34px; height: 34px; font-size: var(--text-14); }
.avatar.ub-avatar.away { outline: 0; opacity: .6; }
.ub-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ub-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-13); }
.ub-role { color: var(--muted); font-size: var(--text-11); }
.ub-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg3); color: var(--text); font-size: var(--text-11); white-space: nowrap; cursor: pointer; }
.ub-status i { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--ok); }
.ub-status.away i { background: var(--gold); }
.ub-status.away { color: var(--gold); }
.ub-btn { flex: none; }
.ub-btn.on { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.avatar.me-avatar { width: 36px; height: 36px; }
.me-avatar-row { gap: 6px; margin-right: 8px; }
.help { display: flex; flex-direction: column; gap: 10px; }
.help-search { width: 100%; }
.help-tabs { flex-wrap: wrap; }
.help-tabs[hidden] { display: none; }
.help-body { display: flex; flex-direction: column; gap: 16px; }
.help-group h5 { margin: 0 0 8px; font-size: var(--text-12); font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.help-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 2%, transparent); }
.help-name { font-size: var(--text-14); color: var(--text); }
.help-tab { font-size: var(--text-11); color: var(--accent2); }
.help-where { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: var(--text-12); }
.help-where span { padding: 1px 7px; border-radius: var(--r-pill); background: var(--bg3); color: var(--gold); }
.help-where i { font-style: normal; color: var(--muted); font-size: var(--text-11); }
.help-card ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; font-size: var(--text-13); line-height: 1.5; color: color-mix(in srgb, var(--text) 88%, transparent); }
.help kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); font: 600 var(--text-11)/1.6 var(--font-sans); text-align: center; color: var(--text); }
.help-dice { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.help-dice-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--text-13); align-items: baseline; }
.help-dice-row:first-child { border-top: 0; }
.help-dice-row code { color: var(--gold); font-size: var(--text-13); }
.help-none { text-align: center; padding: 20px; }
@media (max-width: 600px) { .help-dice-row { grid-template-columns: 1fr; gap: 2px; } .help-grid { grid-template-columns: 1fr; } }
.hp-cost-add { color: var(--muted); }
/* 이펙트 탭: 왼쪽 목록 + 오른쪽 편집 */
.eff-md { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: 12px; align-items: start; }
.eff-list { display: flex; flex-direction: column; gap: 8px; max-height: 64vh; overflow: auto; padding-right: 2px; }
.eff-list .effect-group h3 { margin: 4px 0; font-size: var(--text-12); color: var(--muted); }
.eff-li { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 6px 9px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--bg3); cursor: pointer; margin-bottom: 4px; }
.eff-li:hover { border-color: var(--line); }
.eff-li.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10.2%, transparent); }
.eff-li-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eff-li-lv { color: var(--gold); font-size: var(--text-12); }
.eff-li-sub { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eff-li-tag { justify-self: start; font-size: var(--text-10-5); padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 13.3%, transparent); color: var(--accent); margin-right: 4px; }
.eff-li > .eff-li-tag ~ .eff-li-tag { grid-column: auto; }
.eff-edit { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg2); min-width: 0; }
.eff-edit.empty { align-items: center; justify-content: center; min-height: 160px; }
.eff-edit-head { gap: 8px; align-items: flex-end; }
.eff-edit-name { flex: 1; min-width: 0; font-size: var(--text-15); font-weight: 600; }
.eff-cell.eff-lv { width: 64px; flex: none; }
.eff-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.eff-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eff-text { display: flex; flex-direction: column; gap: 3px; }
.eff-text textarea { width: 100%; box-sizing: border-box; }
.eff-adv { border-top: 1px solid var(--line); padding-top: 8px; }
.eff-adv > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.eff-adv[open] > summary { margin-bottom: 8px; color: var(--text); }
.eff-adv > * + * { margin-top: 8px; }
@media (max-width: 760px) { .eff-md { grid-template-columns: 1fr; } .eff-list { max-height: 34vh; } .eff-grid4 { grid-template-columns: repeat(2, 1fr); } }
.eff-edit .eff-cell { display: flex; flex-direction: column; min-width: 0; }
.eff-edit .eff-cell-label { display: block; font-size: var(--text-11); margin-bottom: 3px; color: var(--muted); }
.eff-edit .eff-cell input, .eff-edit .eff-cell select { width: 100%; box-sizing: border-box; }
.eff-edit .eff-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; max-width: 420px; }
@media (max-width: 760px) { .pane-bar { flex-wrap: wrap; } .pane-bar > .muted.grow { flex-basis: 100%; } }
.export-dialog .export-card.export-danger { border-color: #ff6b6b55; }
.item-sec + .item-sec { margin-top: 14px; }
.item-sec-title { margin: 6px 0 4px; font-size: var(--text-13); color: var(--gold); display: flex; align-items: center; gap: 6px; }
.eff-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.combo-effects-row { display: flex; gap: 8px; align-items: flex-end; }
.combo-effects-row > .grow { flex: 1; min-width: 0; }
.combo-tools { gap: 6px; flex: none; }
.combo-li { grid-template-columns: 1fr auto; }
.combo-li-roll { padding: 0 6px; line-height: 1.4; }
.eff-li.is-held, .combo-edit.is-held { opacity: .6; }
.eff-li-sub.err { color: var(--bad); }
.combo-edit .combo-preview { display: block; padding: 6px 10px; border-radius: var(--r-md); background: var(--bg3); font-family: var(--font-mono, monospace); font-size: var(--text-12-5); }
@media (max-width: 760px) { .combo-effects-row { flex-direction: column; align-items: stretch; } }
/* 주사위 고르기 */
.dice-custom { display: flex; flex-direction: column; gap: 12px; }
.dice-custom .dice-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.dice-custom .dice-preset { flex-direction: column; justify-content: center; gap: 8px; padding: 12px 6px 9px; border-radius: var(--r-xl); background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 3.1%, transparent), color-mix(in srgb, var(--shade) 12.5%, transparent)); border: 1px solid var(--line); }
.dice-custom .dice-preset .dice-swatch { width: 26px; height: 26px; border-radius: var(--r-sm); box-shadow: 0 3px 10px color-mix(in srgb, var(--shade) 66.7%, transparent), inset 0 1px 0 color-mix(in srgb, var(--tint) 33.3%, transparent); }
.dice-custom .dice-preset:hover:not(:disabled) .dice-swatch { transform: rotate(45deg) scale(.95); }
.dice-custom .dice-preset.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dice-preset-name { font-size: var(--text-12); }
.dice-parts-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-xl); background: color-mix(in srgb, var(--tint) 2%, transparent); }
.dice-part { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dice-part-label { font-size: var(--text-11-5); color: var(--muted); }
.dice-part-row { gap: 8px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.dice-part-row select { flex: 1; min-width: 0; }
.dice-own { gap: 4px; white-space: nowrap; }
.dice-custom input[type=color] { width: 28px; height: 28px; padding: 0; border: 2px solid color-mix(in srgb, var(--tint) 25.1%, transparent); border-radius: var(--r-round); background: none; cursor: pointer; flex: none; overflow: hidden; }
.dice-custom input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.dice-custom input[type=color]::-webkit-color-swatch { border: 0; border-radius: var(--r-round); }
.dice-custom input[type=color]:disabled { opacity: .35; cursor: default; }
.dice-try { align-self: end; }
@media (max-width: 760px) { .dice-parts-card { grid-template-columns: 1fr; } }
/* 커스텀 탭: 캐릭터 종류 카드 · 표시 설정 묶음 */
.kind-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.kind-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; text-align: left; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg3); color: var(--text); --kc: var(--accent); }
.kind-card b { font-size: var(--text-14); }
.kind-card small { color: var(--muted); line-height: 1.4; font-size: var(--text-11-5); }
.kind-card::before { content: ''; width: 10px; height: 10px; border-radius: var(--r-round); border: 2px solid var(--line2, #556); margin-bottom: 2px; }
.kind-card.on { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, var(--bg3)); box-shadow: 0 0 0 1px var(--kc); }
.kind-card.on::before { background: var(--kc); border-color: var(--kc); }
.kind-card.enemy { --kc: #ff6b6b; } .kind-card.extra { --kc: #b58cff; } .kind-card.hide { --kc: var(--gold); }
.check-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.check-group { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tint) 1.6%, transparent); }
.check-group-title { font-size: var(--text-11-5); color: var(--muted); margin-bottom: 2px; }
/* S로이스 강조 */
.lois-row.s { box-shadow: inset 3px 0 0 #ff7aa8, 0 0 0 1px #ff7aa855; background: linear-gradient(90deg, #ff7aa81f, transparent 60%), var(--bg3); }
/* 최대 HP 직접 입력 표시 */
input.manual-max { border-color: var(--gold) !important; color: var(--gold); }
.status-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 4px 8px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 7.8%, transparent); color: var(--gold); font-size: var(--text-12); }
.status-note span { flex: 1; }
/* 이펙트 LV 색: 최대 LV에 가까워질수록, 넘으면 +5까지 단계별 */
.lv-near2 { --lvc: #8fb8d8; } .lv-near { --lvc: #bfe6ff; } .lv-max { --lvc: var(--gold); } .lv-over1 { --lvc: #ffb04a; } .lv-over2 { --lvc: #ff8a3d; } .lv-over3 { --lvc: #ff5f5f; } .lv-over4 { --lvc: #ff4f9a; } .lv-over5 { --lvc: #c06bff; }
.eff-li-lv[class*="lv-"] { color: var(--lvc); font-weight: 700; text-shadow: 0 0 8px color-mix(in srgb, var(--lvc) 45%, transparent); }
.eff-lv input[class*="lv-"] { border-color: var(--lvc) !important; color: var(--lvc); font-weight: 700; }
/* 표정 격자 (한 줄 4개) */
.sort-list.expr-grid .fg-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.expr-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg3); min-width: 0; }
.expr-card.default { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.expr-pic { display: block; padding: 0; border: 0; background: color-mix(in srgb, var(--shade) 40%, transparent); border-radius: 9px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.expr-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: filter .15s; }
.expr-pic:hover:not(:disabled) img { filter: brightness(1.12); }
.expr-pic:disabled { cursor: default; }
.expr-star, .expr-del { position: absolute; top: 10px; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--tint) 18.8%, transparent); background: color-mix(in srgb, var(--shade) 66.7%, transparent); color: var(--tint); font-size: var(--text-11-5); backdrop-filter: blur(3px); opacity: .75; }
.expr-star { left: 10px; }
.expr-del { right: 10px; padding: 2px 7px; opacity: 0; }
.expr-card:hover .expr-del, .expr-card:focus-within .expr-del { opacity: .85; }
.expr-star:hover:not(:disabled), .expr-del:hover { opacity: 1; }
.expr-star.on { opacity: 1; color: var(--on-light); background: var(--gold); border-color: var(--gold); font-weight: 700; }
.expr-name { width: 100%; box-sizing: border-box; text-align: center; }
@media (max-width: 760px) { .sort-list.expr-grid .fg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .expr-del { opacity: .85; } }
.kind-card { white-space: normal; } .kind-card small { white-space: normal; }
@keyframes btn-flash { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 66.7%, transparent); } }
button.flash { animation: btn-flash .8s ease-in-out 4; }
/* 판면 아래 두 도구줄(GM 막대·확대 막대)이 좁은 화면에서 겹치지 않게: GM 막대를 한 줄 위로 */
#paneStage { container: stage / inline-size; }
@container stage (max-width: 980px) { .board-gm { bottom: 62px; } }
/* 로비: 코코포리아 ZIP 고르기 버튼을 앱 버튼 모양으로 */
.lobby input[type=file]::file-selector-button { margin-right: 10px; padding: 5px 12px; border-radius: var(--r-md); border: 1px solid var(--line2, #3a4256); background: var(--bg3); color: var(--text); font: inherit; cursor: pointer; }
.lobby input[type=file] { color: var(--muted); font-size: var(--text-12-5); }
/* 로그 창: 고르기 칸이 줄 전체로 늘어나지 않게 */
.export-dialog .export-row select { width: auto; min-width: 200px; max-width: 100%; }
.settings-row select { max-width: 240px; }
/* 묶음 메뉴 (상단 연출·자료·방, 입력칸 ＋) */
.tb-menu { position: relative; display: flex; }
.tb-menu:not(:has(.tb-menu-pop > :not(.hidden))) { display: none; }
.tb-group > .tb-menu > .tb-menu-btn { background: transparent; border-color: transparent; color: var(--text-dim); min-height: 30px; font-size: var(--text-13); }
.tb-group > .tb-menu > .tb-menu-btn:hover, .tb-menu.open > .tb-menu-btn { background: var(--bg3); color: var(--text); }
.tb-group > .tb-menu > .tb-menu-btn::after { content: ''; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; opacity: .7; }
.tb-menu-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 2600; flex-direction: column; gap: 2px; min-width: 150px; padding: 6px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-xl); box-shadow: var(--shadow); }
#mnRoom > .tb-menu-pop { left: auto; right: 0; }
.tb-menu-pop.up { top: auto; bottom: calc(100% + 6px); }
.tb-menu.open > .tb-menu-pop { display: flex; }
.tb-menu-pop > button { justify-content: flex-start; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; background: transparent; border-color: transparent; color: var(--text); font-size: var(--text-13); white-space: nowrap; }
.tb-menu-pop > button:hover:not(:disabled) { background: var(--bg3); }
.tb-menu-pop > button.flash, .tb-menu-btn.flash { animation: tb-pulse 1s ease-in-out 4; }
.tb-menu-pop .sym-mark { width: 16px; text-align: center; letter-spacing: -1px; font-size: var(--text-12); }
.tb-menu-pop > .sym-btn { letter-spacing: 0; font-size: var(--text-13); padding-inline: 10px; }
.input-menu > .tb-menu-btn { font-size: var(--text-16); width: 30px; padding: 0; }
@media (max-width: 900px) {
  .tb-overflow .tb-menu { flex-direction: column; }
  .tb-overflow .tb-menu > .tb-menu-btn { display: none; }
  .tb-overflow .tb-menu-pop { display: flex; position: static; min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .tb-overflow .tb-menu.tb-sep, .tb-overflow .tb-group > button.tb-sep { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; border-radius: 0; }
  .tb-overflow .tb-menu-pop > button { min-height: 38px; font-size: var(--text-13-5); }
}
/* 리플레이 공유 링크 */
.replay-share-box { align-items: flex-start; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.replay-share-box .row { gap: 6px; margin: 6px 0; }
.replay-share-box .row input { flex: 1; min-width: 0; }
.replay-shares { display: flex; flex-direction: column; gap: 4px; }
.replay-share-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); font-size: var(--text-13); }
.replay-share-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-share-row a.small { padding: 2px 8px; border: 1px solid var(--line2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
/* 관리자: 화면 오류 */
.admin-errors { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.admin-error { border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 10px; background: var(--bg); font-size: var(--text-13); }
.admin-error summary { cursor: pointer; }
.admin-error b { color: var(--bad); font-weight: 600; }
.admin-error pre { white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; font-family: var(--font-mono); font-size: var(--text-11-5); color: var(--muted); }
.package-start { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* 소개·업데이트 노트 */
body.about-body { background: radial-gradient(1200px 600px at 50% -200px, color-mix(in srgb, var(--accent) 14%, transparent), transparent), var(--bg); color: var(--text); min-height: 100vh; }
.about { max-width: 980px; margin: 0 auto; padding: 56px 20px 40px; }
.about a { color: var(--accent2); }
.about-hero { text-align: center; padding: 24px 0 40px; }
.about-hero h1 { font-family: var(--font-serif); font-size: var(--text-28); font-size: clamp(32px, 6vw, 56px); margin: 0; letter-spacing: -1px; }
.about-hero h1 span { color: var(--accent); }
.about-hero h1 small { display: block; font-size: var(--text-14); letter-spacing: 4px; color: var(--muted); margin-top: 6px; font-family: var(--font-sans); }
.about-lead { font-size: var(--text-16); line-height: 1.7; color: var(--text-dim); margin: 22px auto 26px; max-width: 620px; }
.about-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.about .btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--text); text-decoration: none; font-weight: 600; background: var(--bg2); }
.about .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.about-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: color-mix(in srgb, var(--bg2) 85%, transparent); }
.about-card h3 { margin: 12px 0 6px; font-size: var(--text-16); }
.about-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: var(--text-14); }
.about-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--r-xl); background: var(--accent-soft); color: var(--accent); }
.about-ic svg.ic { width: 20px; height: 20px; margin: 0; }
.about-dice { margin: 28px 0; padding: 26px; border-radius: var(--r-2xl); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%), var(--bg2); }
.about-dice h2 { margin: 0 0 6px; font-size: var(--text-18); color: var(--gold); }
.about-dice p { margin: 0; color: var(--text-dim); }
.about-foot { margin-top: 36px; text-align: center; color: var(--muted); font-size: var(--text-12-5); line-height: 1.8; }
.updates { max-width: 760px; }
.updates-head h1 { font-family: var(--font-serif); margin: 0 0 4px; }
.update { padding: 18px 0; border-bottom: 1px solid var(--line); }
.update h2 { margin: 6px 0 8px; font-size: var(--text-16); }
.update ul { margin: 0; padding-left: 20px; color: var(--text-dim); line-height: 1.7; font-size: var(--text-14); }
.update-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--text-12-5); }
.update-ver { padding: 1px 8px; border-radius: var(--r-pill); background: var(--bg3); font-family: var(--font-mono); font-size: var(--text-11); }
.lobby-links { margin-top: 4px; font-size: var(--text-13); }
.lobby-links a { color: var(--muted); }
/* 연출 팩 (fxpack.js) */
.sfx-particles { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: none; }
.sfx-particles.on { display: block; }
.sfx-particles canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none !important; }
.sfx-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 86; pointer-events: none; }
.sfx-once { position: absolute; inset: 0; z-index: 87; pointer-events: none; }
.sfx-once.sfx-ring { inset: auto; left: 50%; top: 50%; width: 46vmin; height: 46vmin; border-radius: 50%; border: 18px solid color-mix(in srgb, var(--tint) 85%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--accent2) 70%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent2) 50%, transparent); }
.sfx-once.sfx-white { background: #ffffff; opacity: 0; }
.sfx-once.sfx-white.bluish { background: radial-gradient(circle at 60% 20%, #ffffff, #cfe3ff 60%, #8fb2ff); }
.sfx-once.sfx-speed { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--tint) 55%, transparent) 0deg 1.2deg, transparent 1.2deg 9deg); mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 70%); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 70%); }
.sfx-once.sfx-glitch { background: repeating-linear-gradient(0deg, color-mix(in srgb, #ff2d55 22%, transparent) 0 3px, transparent 3px 9px, color-mix(in srgb, #22e6ff 18%, transparent) 9px 11px, transparent 11px 23px); mix-blend-mode: screen; animation: sfx-glitch-move .7s steps(7) both; }
@keyframes sfx-glitch-move { 0% { transform: translateY(0); } 25% { transform: translate(-8px, 12px); } 50% { transform: translate(10px, -6px); clip-path: inset(20% 0 40% 0); } 75% { transform: translate(-4px, 18px); clip-path: inset(55% 0 10% 0); } 100% { transform: translate(0, 0); } }
.sfx-once.sfx-warn { box-shadow: inset 0 0 120px 40px color-mix(in srgb, #e0303f 75%, transparent); background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, #e0303f 25%, transparent)); opacity: 0; }
.sfx-once.sfx-flashback { background: radial-gradient(ellipse at center, transparent 40%, color-mix(in srgb, #fff3dc 55%, transparent) 100%); opacity: 0; }
.sfx-banner.erosion { border-color: #e0303f; }
.sfx-banner.erosion b { text-shadow: 0 0 18px color-mix(in srgb, #e0303f 75%, transparent); }
.sfx-banner.erosion span { color: #ff8a9a; font-weight: 700; letter-spacing: 2px; }
/* 크리티컬·펌블 연출 (critfx.js) */
.crit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 39; pointer-events: none; } /* 주사위·결과 숫자(40) 뒤 */
.crit-text-layer { position: absolute; inset: 0; z-index: 89; pointer-events: none; overflow: hidden; container-type: size; }
.crit-text { position: absolute; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; transform: translate(-50%, -50%); font-family: var(--font-serif); font-style: italic; }
.crit-text.center { left: 50%; top: 42%; }
.crit-text b { font-weight: 900; letter-spacing: 3px; font-size: calc(34px * var(--ui-fs, 1)); color: #fff; -webkit-text-stroke: 1.5px var(--c); text-shadow: 0 0 6px var(--c), 0 0 22px var(--c), 0 0 48px var(--c), 0 4px 0 color-mix(in srgb, var(--shade) 55%, transparent); }
.crit-text span { font-weight: 900; font-size: calc(26px * var(--ui-fs, 1)); color: var(--c); text-shadow: 0 0 14px var(--c); }
.crit-text.t2 b { font-size: calc(46px * var(--ui-fs, 1)); }
.crit-text.t3 b { font-size: clamp(40px, 12cqw, 120px); letter-spacing: 6px; -webkit-text-stroke-width: 2.5px; background: linear-gradient(180deg, #fffbe8 10%, #ffd27a 55%, #e08a1e 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crit-text.t3 span { font-size: clamp(28px, 7cqw, 72px); color: #fff3cc; }

/* 연출 띠 다시 디자인 (전투 개시·프로세스·침식률): 기울임 없이 가는 선 + 넓은 자간 + 영문 머리말 */
.sfx-banner { position: relative; transform: none; gap: 6px; padding: 18px 0 16px; min-width: 0; width: min(760px, 92%); background: radial-gradient(ellipse 62% 100% at 50% 50%, color-mix(in srgb, var(--ink) 94%, transparent), color-mix(in srgb, var(--ink) 60%, transparent) 55%, transparent 80%); border: 0; --line: var(--accent); }
.sfx-banner > * { transform: none; }
.sfx-banner::before, .sfx-banner::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 30%, color-mix(in srgb, var(--tint) 90%, transparent) 50%, var(--line) 70%, transparent); transform-origin: 50% 50%; animation: sfx-line 1.9s cubic-bezier(.2,.8,.2,1) both; }
.sfx-banner::before { top: 0; } .sfx-banner::after { bottom: 0; }
@keyframes sfx-line { 0% { transform: scaleX(0); opacity: 0; } 18% { transform: scaleX(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: scaleX(1.05); opacity: 0; } }
.sfx-banner i.k { font: 700 calc(12px * var(--ui-fs, 1))/1 var(--font-display); letter-spacing: .55em; padding-left: .55em; color: var(--line); font-style: normal; text-transform: uppercase; }
.sfx-banner b { font: 800 calc(30px * var(--ui-fs, 1))/1.15 var(--font-sans); letter-spacing: .16em; padding-left: .16em; white-space: nowrap; color: var(--tint); text-shadow: 0 0 24px color-mix(in srgb, var(--line) 45%, transparent); }
.sfx-banner span { font: 600 var(--text-13)/1.2 var(--font-sans); letter-spacing: .18em; color: color-mix(in srgb, var(--tint) 70%, transparent); }
.sfx-banner.main { --line: var(--gold); }
.sfx-banner.main b { font-size: calc(26px * var(--ui-fs, 1)); }
.sfx-banner.erosion { --line: #ff4d5e; border: 0; }
.sfx-banner.erosion b { text-shadow: 0 0 24px color-mix(in srgb, #ff4d5e 60%, transparent); }
.sfx-banner.erosion span { color: #ff9aa6; font-weight: 700; letter-spacing: .22em; }
/* 주사위 결과 숫자 */
.dz-total { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; white-space: nowrap; font: 700 34px/1 var(--font-display); letter-spacing: 1px; padding: 6px 16px 4px; border-radius: var(--r-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 94%, transparent), color-mix(in srgb, var(--ink) 94%, transparent)); border-color: color-mix(in srgb, var(--tint) 14%, transparent); }
.dz-total.critical { color: #ffe7a3; border-color: color-mix(in srgb, var(--gold) 55%, transparent); text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent); }
.dz-total.fumble { font: 700 var(--text-20)/1 var(--font-sans); letter-spacing: .2em; color: #9aa3b2; }

.dz-total small { display: block; font: 700 calc(10px * var(--ui-fs, 1))/1 var(--font-display); letter-spacing: .32em; margin-right: -.32em; color: var(--gold); text-shadow: none; }

/* 경험점 시트 (세션 카드) */
.xp-page { max-width: 860px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 14px; }
.xp-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg2)), var(--bg2) 65%); }
.xp-sum { display: flex; flex-direction: column; gap: 2px; }
.xp-sum small { font-size: var(--text-13); color: var(--muted); }
.xp-sum b { font-family: var(--font-display); font-size: calc(48px * var(--ui-fs, 1)); line-height: 1; color: var(--accent2); font-variant-numeric: tabular-nums; }
.xp-meta { font-size: var(--text-13); color: var(--muted); margin-top: 4px; }
.xp-nick { display: flex; flex-direction: column; gap: 4px; width: 200px; max-width: 100%; }
.xp-nick span { font-size: var(--text-12); color: var(--muted); }
.xp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xp-status { font-size: var(--text-12); }
.xp-guide[hidden] { display: none; }
.xp-guide { border: 1px solid var(--line); border-radius: var(--r-xl, 14px); background: var(--bg2); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.xp-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.xp-guide-item { background: var(--bg3); border-radius: var(--r-lg); padding: 10px 12px; }
.xp-guide-item.gm { background: color-mix(in srgb, var(--accent) 8%, var(--bg3)); }
.xp-guide-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.xp-guide-top b { font-size: var(--text-14); }
.xp-guide-item p { margin: 6px 0 0; font-size: var(--text-13); line-height: 1.55; color: var(--muted); }
.xp-pts { flex: none; font-size: var(--text-12); font-weight: 700; color: var(--gold); }
.xp-list { display: flex; flex-direction: column; gap: 10px; }
.xp-empty { text-align: center; color: var(--muted); padding: 30px 12px; border: 1px dashed var(--line2, var(--line)); border-radius: var(--r-xl, 14px); }
.xp-card { border: 1px solid var(--line); border-radius: var(--r-xl, 14px); background: var(--bg2); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.xp-card.gm { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.xp-head { display: flex; align-items: center; gap: 8px; }
.xp-head .xp-date { width: 138px; flex: none; font-size: var(--text-13); color: var(--muted); }
.xp-head input.xp-title { flex: 1; min-width: 0; font-size: var(--text-15); font-weight: 600; background: transparent; border-color: transparent; padding-left: 6px; }
.xp-head input.xp-title:hover, .xp-head input.xp-title:focus { border-color: var(--line); background: var(--bg); }
.xp-head b.xp-title { flex: 1; min-width: 0; font-size: var(--text-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-role { flex: none; width: auto; min-width: 70px; font-size: var(--text-13); font-weight: 600; }
span.xp-role { min-width: 0; padding: 2px 9px; border-radius: var(--r-pill); background: var(--bg3); }
.xp-role.gm { color: var(--accent2); }
.xp-score { flex: none; display: flex; align-items: baseline; gap: 2px; min-width: 58px; justify-content: flex-end; }
.xp-score b { font-family: var(--font-display); font-size: var(--text-24); color: var(--text); font-variant-numeric: tabular-nums; }
.xp-score small { font-size: var(--text-12); color: var(--muted); }
.xp-del { flex: none; }
.xp-body { display: flex; flex-direction: column; gap: 10px; }
.xp-card.gm .xp-body { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: var(--text-14); }
.xp-chip small { font-size: var(--text-12); opacity: .7; }
.xp-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); color: var(--text); }
.xp-chip.on small { color: var(--accent2); opacity: 1; }
.xp-chip:disabled { cursor: default; opacity: 1; }
.xp-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.xp-field { display: flex; flex-direction: column; gap: 4px; }
.xp-field > span { font-size: var(--text-12); color: var(--muted); }
.xp-field.sm input { width: 80px; }
.xp-field select { min-width: 150px; }
.xp-inline { display: flex; align-items: center; gap: 8px; }
.xp-inline input { width: 96px; }
.xp-calc { font-size: var(--text-14); color: var(--accent2); font-weight: 600; white-space: nowrap; }
.xp-ro { font-size: var(--text-14); }
@media (max-width: 600px) {
  .xp-hero { padding: 16px; }
  .xp-nick { width: 100%; }
  .xp-head { flex-wrap: wrap; }
  .xp-head .xp-date { order: 1; }
  .xp-head .xp-role { order: 2; }
  .xp-head .xp-score { order: 3; margin-left: auto; }
  .xp-head input.xp-title, .xp-head b.xp-title { order: 4; flex: 1 1 calc(100% - 48px); padding-left: 0; }
  .xp-fields { gap: 8px; flex-wrap: nowrap; }
  .xp-field.sm input { width: 64px; }
  .xp-field select { min-width: 0; width: 100%; }
  .xp-fields .xp-field:not(.sm) { flex: 1; min-width: 0; }
  .xp-head .xp-del { order: 5; }
}

/* 판면 오른쪽 아래 버튼 줄: 판면 도구 | 나만 보는 화면 */
.zoom-bar .zb-sep { flex: none; width: 1px; align-self: stretch; margin: 4px 3px; background: color-mix(in srgb, var(--tint) 14%, transparent); }
body.viewer .zoom-bar .zb-sep { display: none; }
/* 방 설정 (방·룰·연출 탭) */
.room-settings { display: flex; flex-direction: column; gap: 14px; }
.room-settings > [hidden] { display: none !important; }
.room-settings .rs-tabs { align-self: flex-start; }
.settings-group { display: flex; flex-direction: column; gap: 6px; }
.settings-group + .settings-group { margin-top: 6px; }
/* 화면 연출 패널: 한 번 / 계속 */
.sfx-panel .sfx-sec { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--text-12); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.sfx-panel .sfx-sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sfx-panel .sfx-sec-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 400; letter-spacing: 0; }
.sfx-panel .sfx-sec-tools select { height: 26px; font-size: var(--text-12); }
.scene-info-row { align-items: center; gap: 8px; margin-top: 6px; }

/* 휴대폰 방 화면 */
.sound-compact > [hidden] { display: none !important; }
@media (max-width: 900px) {
  body:not(.many-speakers) .speaker-search { display: none; }
}
@media (max-width: 900px) { .palette .pal-detach { display: none; } .popover.palette { left: 8px !important; right: 8px; width: auto !important; max-width: none; } }

/* 캠페인 (내 페이지) */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; min-height: 120px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-xl); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--bg2)), var(--bg2) 60%); }
.cp-card:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cp-name { font-size: var(--text-16); }
.cp-meta, .cp-note { font-size: var(--text-12); color: var(--muted); }
.cp-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-xp { margin-top: auto; display: flex; align-items: baseline; gap: 2px; }
.cp-xp b { font-family: var(--font-display); font-size: var(--text-22); color: var(--accent2); }
.cp-xp small { font-size: var(--text-12); color: var(--muted); }
.cp-hero { align-items: stretch; }
.cp-hero-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-title { font-size: var(--text-20); font-weight: 700; background: transparent; border-color: transparent; padding-left: 4px; }
.cp-title:hover, .cp-title:focus { border-color: var(--line); background: var(--bg); }
.cp-notes { resize: vertical; min-height: 60px; font-size: var(--text-13); line-height: 1.6; }
.cp-xpbox { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 160px; }
.cp-xpbox small { font-size: var(--text-12); color: var(--muted); }
.cp-xpbox b { font-family: var(--font-display); font-size: calc(40px * var(--ui-fs, 1)); line-height: 1; color: var(--accent2); }
.cp-eps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-ep { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg2); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cp-ep-head, .cp-ep-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-no { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg3); font-family: var(--font-display); font-size: var(--text-13); color: var(--accent2); }
.cp-ep-title { flex: 1 1 200px; min-width: 0; font-weight: 600; font-size: var(--text-14); }
.cp-ep-date { width: 140px; flex: none; }
.cp-ep-tools { display: flex; gap: 2px; margin-left: auto; }
.cp-ep-body select { flex: 0 1 260px; min-width: 0; }
.cp-ep-note { flex: 1 1 200px; min-width: 0; }
.cp-enter { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: var(--text-13); }
.cp-shares { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-shares:empty { display: none; }
.cp-share { font-size: var(--text-12); padding: 2px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); text-decoration: none; }
@media (max-width: 600px) { .cp-ep-tools { margin-left: 0; } .cp-ep-body select { flex-basis: 100%; } }
/* 새 창으로 떼어 낸 창 */
body.popout-page { margin: 0; height: 100vh; overflow: hidden; background: var(--bg2); }
dialog.popout { position: static; display: flex; flex-direction: column; width: 100%; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
dialog.popout > .d-body { flex: 1; max-height: none; min-height: 0; }
dialog.popout .pop-head { cursor: default; }
/* 채팅 고정 */
.pin-bar { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--gold) 6%, var(--bg2)); }
.pin-bar.hidden { display: none; }
.pin-ic { color: var(--gold); padding-top: 4px; flex: none; }
.pin-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow: auto; }
.pin-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pin-main { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; border: 0; background: transparent; text-align: left; font-size: var(--text-13); color: var(--text); justify-content: flex-start; }
.pin-main:hover:not(:disabled) { background: color-mix(in srgb, var(--tint) 5%, transparent); }
.pin-main b { flex: none; font-size: var(--text-12-5); }
.pin-main span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-more { flex: none; color: var(--gold); }
.pin-x { flex: none; }
.msg.pinned { box-shadow: inset 3px 0 0 var(--gold); }
.msg.pinned .pin-tool { color: var(--gold); }
.msg.flash-pin { animation: pin-flash 1.4s ease-out; }
@keyframes pin-flash { 0%, 40% { background: color-mix(in srgb, var(--gold) 18%, transparent); } 100% { background: transparent; } }

/* ---- 2026-10-23: 사용 횟수·조합 이펙트 칩 ---- */
.eff-uses { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.eff-uses select { width: auto; }
.eff-uses input[type=number] { width: 64px; }
.eff-uses-left { font-size: var(--text-12); color: var(--text-dim); padding: 1px 8px; border-radius: 999px; background: var(--bg3); }
.eff-uses-left.out { color: var(--danger, #ff6b6b); }
.combo-effects-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-md, 8px); background: var(--ink); }
.combo-effects-box.editable { cursor: pointer; }
.combo-effects-box.editable:hover, .combo-effects-box:focus-visible { border-color: var(--accent); }
.combo-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--bg3)); font-size: var(--text-12-5, 12.5px); white-space: nowrap; }
.combo-chip small { color: var(--muted); }
.combo-chip small.out { color: var(--danger, #ff6b6b); }
.combo-chip.missing { background: color-mix(in srgb, #ff4d4d 22%, var(--bg3)); color: #ffb3b3; }
button.combo-chip-x, button.combo-chip-x.icon-only { min-height: 0; height: 18px; width: 18px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 50%; }
.combo-chip-x:hover { background: var(--bg3); color: var(--text); }

/* 팔레트 탭·접는 묶음 */
.pal-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 6px; position: sticky; top: -6px; z-index: 1; background: var(--bg2); }
.pal-tabs:empty { display: none; }
.popover.palette { display: flex; flex-direction: column; }
.popover.palette .pal-list { overflow: auto; min-height: 0; }
.popover.palette { overflow: hidden; }
button.pal-group { display: flex; width: 100%; min-height: 0; padding: 4px 4px 2px; border: 0; background: transparent; justify-content: flex-start; font-weight: 600; cursor: pointer; }
button.pal-group::before { content: '▾'; margin-right: 4px; opacity: .6; }
button.pal-group.closed::before { content: '▸'; }
button.pal-group:hover { color: var(--text); }

/* 백트랙 패널·띠 */
.bt-panel { display: flex; flex-direction: column; gap: 6px; top: auto; bottom: 64px; max-height: 50%; overflow: auto; }
.bt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; border-radius: var(--r-md, 8px); background: color-mix(in srgb, var(--tint) 5%, transparent); }
.bt-row.done { opacity: .85; }
.bt-name { font-weight: 700; }
.bt-er { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.bt-lois { display: inline-flex; align-items: center; gap: 4px; }
.bt-lois .check { font-size: var(--text-12); }
.bt-banner .sb-body b { font-size: 56px; letter-spacing: 6px; }

/* 세션 끝 뒤(애프터플레이) */
.msg.t-after { opacity: .55; }
.msg.t-endmark { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 6px; }

/* 대기 */
.init-wait { color: var(--accent2); font-size: var(--text-11); }
.init-waitbtn { min-height: 0; padding: 0 6px; font-size: var(--text-11); }
.admin-limits input[type=number] { width: 110px; }
.admin-limits td:first-child { width: 45%; }
.lib-usage { margin-bottom: 10px; }
.lib-usage-bar { position: relative; height: 6px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: var(--bg3); }
.lib-usage-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.lib-usage-bar.warn i { background: var(--bad); }
.lib-usage-warn { color: var(--bad); }

/* 업로드 트레이 (왼쪽 아래 내 계정 위) */
.upload-tray { position: fixed; z-index: 4500; width: 260px; max-height: 40vh; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line2, var(--line)); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.upload-tray[hidden] { display: none; }
.ut-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); font-size: var(--text-13); }
.ut-list { overflow: auto; padding: 4px 0; }
.ut-row { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; }
.ut-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-12-5, 12.5px); min-width: 0; flex: 0 1 auto; }
.ut-state { color: var(--text-dim); font-size: var(--text-11-5, 11.5px); }
.ut-row.ok .ut-state { color: var(--accent); }
.ut-row.fail .ut-state { color: var(--bad); }
.ut-bar { position: relative; height: 3px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.ut-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width .15s; }
.ut-row.ok .ut-bar, .ut-row.fail .ut-bar { display: none; }
.ut-acts { gap: 4px; }
.portrait-pop.avatar-pop { width: 256px; height: 256px; max-height: none; object-fit: cover; border-radius: 18px; }

/* 이펙트 효과 조각 · 콤보 합산 내역 */
.eff-parts { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 4%, transparent); display: flex; flex-direction: column; gap: 8px; }
.eff-parts-head { align-items: baseline; gap: 6px; }
.eff-parts-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.eff-part-now { min-height: 1em; }
@media (max-width: 900px) { .eff-parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.combo-parts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: var(--text-12); color: var(--text-dim); }
.combo-parts:empty { display: none; }
.combo-parts .cp-row b { color: var(--text); font-weight: 600; }
.combo-parts .cp-row.warn, .combo-parts .cp-row.warn b { color: var(--warn, #e0a030); }