/* UI v8 "불씨 석양" (docs/design/ember-v8.md). ui.css(v7 짜임) 뒤에 불러와 색·로비 배치·HUD 패널·모션을 덮는다.
   시안: docs/lobby-mockups/33-logo-block-glow.png (로비), 41-ingame-floating.png (인게임).
   v7 이름(--paper 판, --ink 글자)은 그대로 쓰고 값만 어둡게 뒤집는다: --paper = 어두운 판, --ink = 크림 글자. */
:root {
  --bg: #0d0908;
  --paper: #16110f; --paper2: #241b16; --ink: #ffe2c4; --dim: #a89282;
  --rule: #ff8a4038; --rule2: #ffe2c41a; --sig: #ff6a00; --sig-hi: #ff8c1a; --sig-glow: #ffb347; --warn: #ff4a3a;
  --panel: rgba(20, 15, 13, 0.86); --ease: cubic-bezier(.2, .8, .2, 1);
  --cut: 12px; /* 패널 모서리 깎기 */
}
html, body { background: var(--bg); color: var(--ink); }
#boot { background: var(--bg); color: var(--dim); }
:focus-visible { outline-color: var(--sig-glow); }

/* ── 공통 부품 ─────────────────────────────────────────── */
.card, .fr { background: var(--panel); border-color: var(--rule); }
.btn { border-color: var(--rule); background: var(--paper); color: var(--ink); transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s; }
.btn:hover { background: var(--paper2); color: var(--ink); border-color: var(--sig); }
.btn:active { transform: translateY(1px); }
.btn.cta { border-color: var(--sig); background: linear-gradient(180deg, #ff7d1f, #ff5a00); color: #fff8ef; text-shadow: 0 1px 0 #8a2a0088; }
.btn.cta:hover { background: linear-gradient(180deg, #ff9133, #ff6a0a); border-color: var(--sig-hi); color: #fff; }
kbd { color: var(--ink); background: #ffe2c412; border-color: var(--rule); }
.lbl { color: var(--dim); }
.chips { background: var(--paper); border-color: var(--rule); }
.chip { color: var(--dim); border-left-color: var(--rule2); }
.chip:hover { color: var(--ink); background: var(--paper2); }
.chip[aria-pressed="true"] { background: var(--sig); color: #fff8ef; }

/* ── 로비 ─────────────────────────────────────────────── */
/* 하늘: 행성 뒤(오른쪽 가운데)에서 번지는 핏빛 석양. 별·불씨는 #embers 캔버스 */
body:has(#lobby:not(.hidden)) { background: radial-gradient(ellipse 52% 62% at 66% 50%, #ffc061 0%, #ff7a1f 12%, #e0400c 30%, #8c1a06 54%, #3a0c06 76%, #150706 100%); }
#lobby > * { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.lb-title { left: 56px; top: 40px; }
.lb-title .logo { height: clamp(64px, 10vh, 108px); filter: drop-shadow(0 0 18px #ff6a0066); }
.lb-title p { margin-top: 12px; max-width: 24em; font-size: 13px; color: #ffe2c4b3; text-shadow: 0 1px 2px #0008; }
/* 오른쪽 위 글자 메뉴 */
.lb-menu { left: auto; right: 48px; top: 44px; width: auto; flex-direction: row; gap: 4px; }
.lb-menu .btn { height: 38px; padding: 0 12px; gap: 8px; border: 0; background: none; font-size: 14px; font-weight: 700; color: #ffe2c4e6; text-shadow: 0 1px 3px #0009; }
.lb-menu .btn:hover { color: #fff; background: #0000002e; }
.lb-menu .mi { width: 16px; height: 16px; flex-basis: 16px; }
/* 사선 판 위 묶음: 세력 설명 → 카드 3장 → 설정 줄 */
.lb-dock { position: absolute; left: 56px; bottom: 84px; width: min(1000px, calc(100vw - 112px - 290px)); display: flex; flex-direction: column; gap: 14px; }
.lb-brief { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.lb-brief h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -1px; line-height: 1.05; color: var(--ink); }
.lb-brief h2 i { width: 14px; height: 14px; flex: 0 0 14px; background: var(--ac); box-shadow: 0 0 12px var(--ac); }
.lb-brief .sub { font-size: 13px; font-weight: 700; color: var(--sig-glow); letter-spacing: 0.2px; }
.lb-brief .sub b { color: var(--ink); }
.lb-brief p { margin: 2px 0 0; max-width: 40em; font-size: 14px; line-height: 1.55; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-cards { position: static; transform: none; left: auto; bottom: auto; grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 0.9fr); gap: 10px; align-items: end; }
#lobby.leaving .lb-cards { transform: translateY(30px); }
.fcard { height: 100px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 0; background: linear-gradient(180deg, #221915e6, #140f0de6); color: var(--ink); align-items: flex-start; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); transition: transform 0.18s var(--ease), border-color 0.15s, background 0.15s; }
.fcard .art { position: absolute; right: -6px; bottom: -8px; width: 58%; height: 118%; flex: none; background-color: transparent; background-position: right bottom; background-size: contain; opacity: 0.5; filter: saturate(0.55) brightness(0.62) sepia(0.35);
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%); mask-image: linear-gradient(to left, #000 35%, transparent 95%); transition: opacity 0.2s, transform 0.3s var(--ease); }
.fcard .tx { position: relative; z-index: 1; gap: 4px; }
.fcard .no { font: 600 11px var(--num); color: var(--dim); letter-spacing: 1px; }
.fcard .hd i { width: 10px; height: 10px; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.fcard b { font-size: 19px; font-weight: 900; color: var(--ink); }
.fcard em { color: var(--dim); }
.fcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--sig), var(--sig-glow)); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease); pointer-events: none; }
.fcard:hover { border-color: #ff8a4080; transform: translateY(-2px); } .fcard:hover .art { opacity: 0.7; transform: scale(1.04); }
.fcard[aria-pressed="true"] { border-color: var(--sig); background: linear-gradient(180deg, #3a2014f0, #1a110cf0); transform: translateY(-4px); box-shadow: none; }
.fcard[aria-pressed="true"]::after { transform: scaleX(1); left: 0; right: 0; height: 3px; border-radius: 0; background: linear-gradient(90deg, var(--sig), var(--sig-glow)); }
.fcard[aria-pressed="true"] .art { opacity: 0.85; }
.fcard[aria-pressed="true"] em { color: var(--sig-glow); }
/* 카드 줄 맨 오른쪽 맵 선택: 세력 카드와 구분선으로 떼고, 판 모양도 다르게 (모서리 안 자름, 비치는 바탕, 왼쪽에 지도 그림) */
.lb-sep { align-self: stretch; width: 1px; margin: 4px 14px; background: linear-gradient(180deg, transparent, #ffe2c466 20%, #ffe2c466 80%, transparent); }
.mapview { height: 100px; padding: 10px; border: 1px solid var(--rule2); border-radius: 2px; background: #0d0908a6; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ink); font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; overflow: hidden; transition: border-color 0.15s, background 0.15s; }
.mapview .mv-art { flex: 0 0 auto; height: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #0d0908; border: 1px solid var(--rule2); font: 800 28px var(--num, sans-serif); color: var(--sig-glow); }
.mapview .mv-art img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.mapview .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mapview small { font-size: 12px; font-weight: 800; color: var(--sig); }
.mapview b { font-size: 14px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mapview .go { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--dim); transition: color 0.15s; }
.mapview .go i { font-style: normal; display: inline-block; transition: transform 0.15s; }
.mapview:hover, .mapview:focus-visible { border-color: var(--sig); background: #1a110cd9; }
.mapview:hover .go, .mapview:focus-visible .go { color: var(--sig-glow); } .mapview:hover .go i { transform: translateX(3px); }
#lobby.intro .mapview { animation: rise 0.45s var(--ease) 0.48s both; }
/* 설정 줄: 주황 이름표 + 값 글자. 고른 값은 크림 + 밑줄 */
.lb-opts { position: static; display: flex; flex-wrap: wrap; gap: 6px 22px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; padding-top: 12px; }
.lb-opts section, .lb-opts section:first-child { flex-direction: row; align-items: center; gap: 10px; padding: 0; border: 0; min-width: 0; }
.lb-opts h2 { font-size: 14px; font-weight: 800; color: var(--sig); letter-spacing: 0; }
.lb-opts h2 .mi { display: none; }
.lb-opts .chips { display: flex; border: 0; background: none; overflow: visible; gap: 2px; }
.lb-opts .chip { height: 28px; padding: 0 6px; border: 0; font-size: 13px; color: var(--dim); background: none; position: relative; }
.lb-opts .chip:hover { color: var(--ink); background: none; }
.lb-opts .chip[aria-pressed="true"] { color: var(--ink); background: none; font-weight: 800; }
.lb-opts .chip[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: var(--sig); }
.lb-opts .chip + .chip::before { content: "/"; position: absolute; left: -3px; color: #ffe2c433; font-weight: 400; }
/* 출격: 오른쪽 아래 주황 덩어리. 숨쉬듯 빛이 번진다 */
.btn.cta.lb-go { position: absolute; right: 56px; bottom: 96px; width: clamp(180px, 15vw, 236px); height: clamp(76px, 10vh, 96px); justify-content: center; flex-direction: column; gap: 4px; border: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); font-size: clamp(24px, 2.2vw, 30px); font-weight: 900; letter-spacing: 2px; animation: goPulse 2.4s ease-in-out infinite; }
.lb-go kbd { margin: 0; font-size: 10px; color: #fff8efcc; background: #00000022; border-color: #ffffff33; letter-spacing: 0; }
@keyframes goPulse { 0%, 100% { filter: drop-shadow(0 0 6px #ff6a0066); } 50% { filter: drop-shadow(0 0 22px #ff8c1acc); } }
.lb-foot { right: 56px; bottom: 40px; flex-direction: row; gap: 16px; color: #ffe2c4b3; }
.lb-foot kbd { background: #00000033; }
/* 처음 열릴 때만: 로고 → 사선 판 → 카드 차례 → 출격 */
#lobby.intro .lb-title { animation: logoIn 0.6s var(--ease) both; }
#lobby.intro .lb-brief { animation: rise 0.45s var(--ease) 0.25s both; }
#lobby.intro .fcard { animation: rise 0.45s var(--ease) both; }
#lobby.intro .fcard:nth-child(1) { animation-delay: 0.3s; } #lobby.intro .fcard:nth-child(2) { animation-delay: 0.36s; } #lobby.intro .fcard:nth-child(3) { animation-delay: 0.42s; }
#lobby.intro .lb-opts { animation: rise 0.45s var(--ease) 0.5s both; }
#lobby.intro .lb-go { animation: goIn 0.5s var(--ease) 0.55s both, goPulse 2.4s ease-in-out 1.1s infinite; }
#lobby.intro .lb-menu, #lobby.intro .lb-foot { animation: fade 0.6s ease 0.4s both; }
@keyframes logoIn { from { opacity: 0; transform: translateY(8px); filter: brightness(2.2) blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes goIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* 출격 순간: 판이 아래로 빠지고 하늘만 남는다 */
#lobby.leaving .lb-dock { transform: translateY(60px); }
#lobby.leaving .lb-go { transform: translateX(40px); }

/* 불씨·별 캔버스 (src3d/embers.js) */
#embers { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }

/* ── 인게임 HUD: 떠 있는 패널 셋 ─────────────────────────── */
#cap { background: linear-gradient(180deg, #0d0908f2, #0d0908c4); border-bottom: 1px solid var(--rule); box-shadow: 0 1px 0 #ff6a0022, 0 10px 30px -18px #000; }
#cap .em { width: 84px; height: 30px; flex-basis: 84px; filter: drop-shadow(0 0 6px #ff6a0055); }
#cap .r, #clk { border-left-color: var(--rule2); }
#cap b, #clkv { color: var(--ink); font-size: 20px; }
#clk { color: var(--dim); }
#mnu { border-color: var(--rule); background: var(--paper2); }
@keyframes rup { 0% { color: var(--sig-glow); text-shadow: 0 0 10px var(--sig); } 100% { color: var(--ink); text-shadow: none; } }
@keyframes rdn { 0% { color: var(--warn); } 100% { color: var(--ink); } }
#hud::after { display: none; }
#mmw, #sel, #grid { background: var(--panel); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--rule); box-shadow: inset 0 2px 0 var(--sig), 0 14px 40px -20px #000;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
#mmw { left: 12px; bottom: 12px; width: calc(var(--dock) - 12px); height: calc(var(--dock) - 12px); padding: 12px; }
#mm { border-color: var(--rule); background: #0d0908; }
#grid { right: 12px; bottom: 12px; height: calc(var(--dock) - 12px); padding: 12px; grid-template-rows: repeat(3, minmax(0, calc((var(--dock) - 36px - 12px) / 3))); }
#sel { left: calc(var(--dock) + 12px); right: calc(3 * 60px + 2 * 6px + 24px + 24px); bottom: 12px; height: calc(var(--dock) - 12px); padding: 14px 20px; }
.pring { background: radial-gradient(ellipse at 50% 70%, #3a1e12, #120c0a 75%); }
.pring::after { background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.sinfo .nm small { color: var(--ink); border-color: var(--rule); }
.bars i { background: #0d0908; border-color: var(--rule2); }
.bi { background: var(--ink); }
.stats, .stats span, .sdesc dl div, .mh span, .sprod { border-color: var(--rule2); }
.prog { background: #0d0908; } .prog s { background: linear-gradient(90deg, var(--sig), var(--sig-glow)); }
.q button { background: var(--paper2); border-color: var(--rule); } .q button:hover { background: #3a1410; border-color: var(--warn); }
.multi button { background: var(--paper2); border-color: var(--rule2); } .multi button:hover { border-color: var(--sig); }
.idle { color: var(--dim); } .idle b { color: var(--ink); }
.ab { background: linear-gradient(180deg, #2a201b, #1a1411); border-color: var(--rule); border-radius: 2px; transition: background 0.1s, border-color 0.1s, transform 0.1s, box-shadow 0.1s; }
.ab:hover, .ab:focus-visible { background: linear-gradient(180deg, #ff7d1f, #ff5a00); border-color: var(--sig-hi); box-shadow: 0 0 14px -2px #ff6a00aa; }
.ab:active { transform: scale(0.94); background: var(--sig-glow); }
.ab kbd { color: #ffe2c480; }
.ab .ico { background: var(--ink); }
.ab.off kbd { color: #ffe2c433; }
.ab.empty { background: none; border-color: var(--rule2); }
/* 알림: 왼쪽 주황 막대, 어두운 바탕. 밀려 들어온다 */
#toasts { bottom: calc(var(--dock) + 16px); }
.toast { background: var(--panel); border-color: var(--rule); color: var(--ink); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: toastIn 0.22s var(--ease) both; }
.toast::before { background: var(--sig); box-shadow: 0 0 8px var(--sig); }
.toast.warn { background: #2a0e0bf0; color: #ffd9cf; border-color: #ff4a3a66; } .toast.warn::before { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
#tip { background: #0d0908f5; color: var(--ink); border: 1px solid var(--rule); border-left: 3px solid var(--sig); }
#tip b { color: #fff3e4; } #tip div { color: var(--dim); }
#modal { background: #0d0908cc; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mpanel { background: linear-gradient(180deg, #1d1512, #120d0b); border-color: var(--rule); box-shadow: inset 0 2px 0 var(--sig), 0 30px 80px -30px #000; animation: rise 0.3s var(--ease) both; }
.mpanel h2.win { color: var(--sig-glow); text-shadow: 0 0 24px #ff6a0088; } .mpanel h2.lose { color: var(--ink); }
.help { color: #d9c4b0; }
#idlew { border-color: var(--sig); background: var(--panel); color: var(--ink); left: 14px; bottom: calc(var(--dock) + 14px); }
#idlew:hover { background: var(--sig); color: #fff; }
#dbgres { background: none; }
/* 게임 시작: 위 띠는 위에서, 아래 패널은 아래에서 차례로 */
#hud.intro #cap { animation: capIn 0.45s var(--ease) both; }
#hud.intro #mmw { animation: rise 0.45s var(--ease) 0.08s both; }
#hud.intro #sel { animation: rise 0.45s var(--ease) 0.16s both; }
#hud.intro #grid { animation: rise 0.45s var(--ease) 0.24s both; }
@keyframes capIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
/* 보급소·기록 */
.season .bar, .note { background: var(--paper2); }
.sw { border-color: #fff3; }

@media (max-width: 1280px) {
  .lb-dock { width: min(900px, calc(100vw - 112px - 250px)); }
  .fcard { height: 88px; } .fcard b { font-size: 17px; }
  .mapview { height: 88px; }
}
@media (max-width: 1120px) {
  .lb-title { left: 28px; } .lb-menu { right: 20px; } .lb-menu .btn { padding: 0 8px; font-size: 13px; }
  .lb-dock { left: 28px; bottom: 70px; width: calc(100vw - 56px - 190px); gap: 10px; }
  .btn.cta.lb-go { right: 24px; bottom: 80px; width: 160px; height: 72px; font-size: 22px; }
  .lb-brief p { display: none; }
  .fcard { height: 76px; padding: 10px; } .fcard b { font-size: 15px; } .fcard .art { opacity: 0.35; }
  .mapview { height: 76px; padding: 8px; gap: 8px; } .mapview b { font-size: 13px; } .lb-sep { margin: 6px 4px; }
  .lb-opts { gap: 4px 14px; } .lb-opts .chip { padding: 0 4px; font-size: 12px; }
  .lb-foot { display: none; }
}
@media (max-width: 860px) {
  .lb-title p { display: none; }
  .lb-menu .btn span.t { display: none; }
}
/* 마우스 다시 고정 안내 (src3d/cursor.js 가 인라인으로 그리는 v7 종이색 상자를 덮는다) */
#curhint { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-left: 3px solid var(--sig) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* 로딩: 가운데 로고 + 글자 + 흐르는 주황 막대 */
#boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse 60% 50% at 50% 60%, #3a1208 0%, #150706 60%, #0d0908 100%); color: #ffe2c4b3; font: 700 14px var(--font); letter-spacing: 0.5px; }
#boot::before { content: ""; width: min(320px, 50vw); aspect-ratio: 1200 / 451; background: var(--logo, url("../assets/ui8/logo.png")) center / contain no-repeat; filter: drop-shadow(0 0 24px #ff6a0077); animation: bootGlow 1.6s ease-in-out infinite; }
#boot::after { content: ""; width: min(260px, 40vw); height: 2px; background: linear-gradient(90deg, transparent, var(--sig), var(--sig-glow), transparent) 0 0 / 50% 100% no-repeat, #ffe2c41a; animation: bootBar 1.1s linear infinite; order: 2; }
@keyframes bootGlow { 50% { filter: drop-shadow(0 0 40px #ff8c1aaa); } }
@keyframes bootBar { from { background-position: -50% 0, 0 0; } to { background-position: 150% 0, 0 0; } }

/* ── 지도 고르기 (src3d/map-picker.js) ──────────────────── */
.lb-opts .chip.map-pick { color: var(--ink); font-weight: 800; }
.lb-opts .chip.map-pick::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: var(--sig); }
.lb-opts .chip.map-pick:hover { color: var(--sig-glow); }
.map-panel { width: min(980px, 94vw); max-width: none; max-height: 90vh; }
.map-panel > .btn[data-a="x"] { align-self: flex-start; min-width: 200px; }
.chips.five { grid-template-columns: repeat(5, 1fr); }
.map-tabs .chip { height: 38px; font-size: 14px; }
.maps { list-style: none; margin: 4px 0; padding: 0 4px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; overflow-y: auto; min-height: 0; }
.mapcard { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; transition: border-color 0.12s, background 0.12s; }
.mapcard:hover { border-color: var(--sig); background: var(--paper2); }
.mapcard[aria-pressed="true"] { border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }
.mapcard .thumb { flex: 0 0 96px; width: 96px; height: 96px; display: grid; place-items: center; background: #0d0908; border: 1px solid var(--rule2); }
.mapcard .thumb img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.mapcard .thumb.rnd { font: 800 40px var(--num, sans-serif); color: var(--sig-glow); }
.mapcard .nm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mapcard .nm b { font-size: 16px; font-weight: 800; }
.mapcard .nm small { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.mapcard .nm small.spec { color: var(--sig-glow); font-weight: 700; }
@media (max-width: 560px) { .maps { grid-template-columns: 1fr; } .chips.five { grid-template-columns: repeat(3, 1fr); } .mapcard .thumb { flex-basis: 72px; width: 72px; height: 72px; } }
.mapcard .nm small.rush { color: var(--ink); font-weight: 600; }

/* ── 일시정지 · 설정 (src3d/main.js pause/settings) ──────────── */
.mi.gear { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='3.2'/><path d='M12 2.8v2.6M12 18.6v2.6M2.8 12h2.6M18.6 12h2.6M5.5 5.5l1.9 1.9M16.6 16.6l1.9 1.9M5.5 18.5l1.9-1.9M16.6 7.4l1.9-1.9'/><circle cx='12' cy='12' r='6.4'/></svg>"); }
.pz-panel { width: min(760px, 94vw); max-width: none; }
.pz { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.9fr); gap: 22px; align-items: start; }
.pz-menu { display: flex; flex-direction: column; gap: 8px; }
.pz-menu .btn { min-width: 0; height: 46px; font-size: 15px; }
.pz-menu .btn.cta { height: 56px; }
.pz-menu .btn kbd { font-size: 11px; opacity: 0.8; }
.pz-menu .btn .mi { width: 18px; height: 18px; flex-basis: 18px; color: var(--dim); }
.pz-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--rule2); }
.pz-menu [data-a="g"], .pz-menu [data-a="q"], .pz-menu [data-a="re"] { height: 40px; font-size: 14px; color: var(--dim); }
.pz-info { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule2); background: #0d0908aa; }
.pz-info div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule2); }
.pz-info div:last-child { border-bottom: 0; }
.pz-info dt { font-size: 13px; color: var(--dim); }
.pz-info dd { margin: 0; font: 600 14px var(--num); color: var(--ink); text-align: right; }
.mpanel .btn:focus-visible, .mpanel .chip:focus-visible, .mpanel .tab:focus-visible, .mpanel input:focus-visible { outline: 2px solid var(--sig-glow); outline-offset: 2px; }
.mtext { margin: 0 0 6px; color: var(--dim); font-size: 14px; line-height: 1.6; }
.mrow { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.mpanel .mrow .btn { min-width: 150px; height: 48px; font-size: 15px; justify-content: center; }
.btn.cta.warn { background: linear-gradient(180deg, #e8473a, #b8261b); border-color: #e8473a; }
.btn.cta.warn:hover { background: linear-gradient(180deg, #ff5a4a, #cc3022); }
.set-panel { width: min(720px, 94vw); max-width: none; max-height: 92vh; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); }
.tab { height: 40px; padding: 0 18px; border: 0; background: none; color: var(--dim); font: 700 15px var(--font); cursor: pointer; position: relative; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--sig); }
.set-body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding-right: 4px; }
.srow { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(250px, 1.2fr); gap: 18px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule2); }
.sl { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.sl small { font-size: 12px; font-weight: 500; color: var(--dim); line-height: 1.4; }
.mpanel .srow .chips { display: flex; border: 1px solid var(--rule); }
.srow .chip { flex: 1; height: 32px; font-size: 13px; padding: 0 8px; }
.slide { display: flex; align-items: center; gap: 12px; }
.slide input { flex: 1; accent-color: var(--sig); height: 20px; cursor: pointer; }
.slide output { min-width: 44px; text-align: right; font: 600 14px var(--num); color: var(--ink); }
.snote { margin: 10px 0 0; font-size: 12.5px; color: var(--sig-glow); }
#fps { margin-left: auto; padding: 0 12px; font: 600 13px var(--num); color: var(--dim); }
#fps:not(.hidden) + #dbgres, #fps:not(.hidden) + #mnu { margin-left: 10px; }
@media (max-width: 640px) {
  .pz { grid-template-columns: 1fr; } .pz-info { display: none; }
  .srow { grid-template-columns: 1fr; gap: 8px; }
  .tab { padding: 0 10px; font-size: 14px; }
}
.mpanel.still { animation: none; }