:root{color-scheme:dark;font-family:system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;background:#091619;color:#e8f1e8;--gold:#f4d58a;--muted:#9ab5b5;--line:#2a4548}*{box-sizing:border-box}body{margin:0;padding:28px clamp(16px,3vw,48px) 20px;max-width:1800px;margin-inline:auto}button,select,input{font:inherit}button,select{border:1px solid #36585b;background:#162d32;color:#e7f2ea;border-radius:9px;padding:10px 13px}button{cursor:pointer;touch-action:manipulation;transition:background .12s}button:hover{background:#29484b}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button[aria-pressed=true],button.primary{background:var(--gold);color:#1e2d28;border-color:var(--gold);font-weight:750}button:disabled{opacity:.4;cursor:default}input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;margin:0}h1,h2,p{margin:0}h1{font-size:clamp(25px,2.6vw,40px);letter-spacing:-.04em;margin:7px 0 8px}h1 span{font-size:18px;color:#80a99d;padding:0 6px}h2{font-size:16px;margin:0 0 14px}.eyebrow{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.12em}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head p{font-size:13px;color:var(--muted)}.demo-badge{font-size:12px;border:1px solid var(--line);border-radius:40px;padding:10px 14px;color:#bed0c4;white-space:nowrap}main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.screen-panel{min-width:0;background:#102328;border:1px solid var(--line);border-radius:16px;overflow:hidden}.arena{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(#132f40 75%,#2d4c40 75%);container-type:inline-size}.background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.background-missing{position:absolute;top:30%;left:10%;right:10%;text-align:center;font-size:12px;color:#ffd998}.names{position:absolute;left:22px;right:22px;top:18px;display:flex;justify-content:space-between;font-weight:800;font-size:clamp(12px,1.3vw,18px);text-shadow:0 2px 8px black;z-index:2}.names small{font-size:9px;color:#cde2c9;margin:0 5px;letter-spacing:.07em}.actor{--s:min(38cqw,480px);position:absolute;width:var(--s);height:var(--s);top:75%;transform:translate(-50%,-87.890625%);z-index:3;pointer-events:none}.player{left:30%}.enemy{left:70%}.motion-layer,.facing-layer{width:100%;height:100%;transform-origin:50% 87.890625%;position:relative}.enemy .facing-layer{transform:scaleX(-1)}.sprite{width:100%;height:100%;object-fit:contain;display:block}.sprite[hidden]{display:none}.missing{position:absolute;inset:15%;display:grid;place-items:center;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;border:2px dashed #ffcda2;background:#15252ccc;color:#ffe4c5;font:12px/1.5 ui-monospace,monospace;padding:8px}.missing[hidden]{display:none}.pose-box{position:absolute;inset:0;border:1px dashed #ffee8e;display:none}.show-bounds .pose-box{display:block}.anchor{position:absolute;left:50%;top:87.890625%;width:12px;height:12px;border:1px solid #ffe092;border-radius:50%;transform:translate(-50%,-50%);display:none}.anchor:before,.anchor:after{content:'';position:absolute;background:#ffe092}.anchor:before{width:22px;height:1px;top:5px;left:-6px}.anchor:after{width:1px;height:22px;left:5px;top:-6px}.ground-guide{position:absolute;top:75%;left:0;right:0;border-top:1px dashed #ffe092;z-index:7;display:none;pointer-events:none}.ground-guide span{display:block;font-size:10px;color:#fff0b0;background:#11221cbb;width:max-content;padding:4px}.show-guides .anchor,.show-guides .ground-guide{display:block}.arena[data-mode=defense] .actor{--s:96px}.arena[data-mode=defense] .player{left:calc(50% - 80px)}.arena[data-mode=defense] .enemy{left:calc(50% + 80px)}#effects{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}.cutin{position:absolute;inset:0;z-index:8;background:#152419;overflow:hidden}.cutin[hidden]{display:none}.cutin img{width:100%;height:100%;object-fit:cover}.cutin strong{position:absolute;bottom:8%;right:5%;font-size:clamp(18px,4vw,54px);text-shadow:0 3px 5px #123016;color:#fff4b1}.pose-readout{position:absolute;bottom:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;z-index:9;pointer-events:none}.pose-readout code{background:#09191bbf;padding:5px 7px;border-radius:4px;color:#d8e3d8;font-size:9px;max-width:48%;overflow-wrap:anywhere}.scene-status{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);gap:12px;font-size:13px}#phase{color:var(--gold);font-weight:750}#runState{color:var(--muted)}.transport{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 16px 8px}.transport button,.transport select{font-size:12px;padding:9px 11px}.transport label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.transport .check{margin:0 7px}.transport output{font:12px ui-monospace,monospace;color:var(--muted);margin-left:auto}.scrubber{display:block;padding:0 16px 12px}.scrubber input{width:100%;accent-color:var(--gold);cursor:pointer}.chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 16px 16px}.chapters button{font-size:11px;padding:9px 4px;background:#10252a}.chapters button.current{border-color:#d4b46a;color:var(--gold)}.control-panel{background:#102328;border:1px solid var(--line);border-radius:16px;padding:20px}.control-panel section+section{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.section-title{display:flex;justify-content:space-between;gap:10px}.section-title span{color:var(--gold);font-size:12px}.mode-switch{display:flex;gap:6px}.mode-switch button{flex:1;font-size:12px;padding:10px 5px}.toggles{display:grid;gap:12px;margin-top:18px}.toggles label{display:flex;align-items:center;gap:9px;font-size:13px}.note,.notes p{font-size:12px;color:var(--muted);line-height:1.65;margin-top:12px}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.actions button{font-size:11px;padding:9px 2px}.actions button.selected{color:var(--gold);border-color:var(--gold)}a{color:#b5ddbf;font-size:12px}.notes a{display:inline-block;margin-top:10px}footer{font-size:11px;color:#6f9293;margin-top:20px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}@media(max-width:1080px){main{grid-template-columns:minmax(0,1fr) 260px}.control-panel{padding:16px}.names small{display:none}}@media(max-width:800px){body{padding:18px 12px}.page-head{align-items:start}.demo-badge{display:none}main{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px}.control-panel section+section{border:0;padding:0;margin:0}.control-panel section:first-child{grid-row:span 2}.notes{grid-column:1/-1}.names{left:12px;right:12px;top:10px}.pose-readout{bottom:5px;left:6px;right:6px}.pose-readout code{font-size:7px;padding:2px 4px}.scene-status{font-size:11px}.transport output{margin-left:0}.ground-guide span{font-size:8px}}@media(max-width:440px){.control-panel{grid-template-columns:1fr}.control-panel section:first-child{grid-row:auto}.control-panel section+section{border-top:1px solid var(--line);padding-top:16px}.chapters{grid-template-columns:repeat(4,1fr)}.chapters button{font-size:9px}.arena[data-mode=defense] .player{left:calc(50% - 64px)}.arena[data-mode=defense] .enemy{left:calc(50% + 64px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.roster-panel{border:1px solid var(--line);border-radius:16px;background:#102328;padding:20px;margin-bottom:22px}.roster-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.roster-heading h2{margin:0}.roster-heading label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}#loadStatus{font-size:12px;color:var(--muted);margin:10px 0 18px}#loadStatus.error{color:#ffd998}.roster-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.roster-columns h3{font-size:13px;color:var(--gold);margin:0 0 10px}.roster-picker{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 9px}.roster-card{flex:0 0 108px;min-height:44px;padding:6px;text-align:left}.roster-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:5px;margin-bottom:6px}.roster-card strong,.roster-card small{display:block;white-space:normal}.roster-card strong{font-size:12px}.roster-card small{font-size:9px;margin-top:4px;line-height:1.4;opacity:.8}.actor img{user-select:none}@media(max-width:800px){.roster-columns{grid-template-columns:1fr;gap:12px}.roster-card{flex-basis:90px}.roster-panel{padding:14px}.roster-heading label{font-size:12px}}
.roster-columns>section{min-width:0}.roster-picker{min-width:0}

/* 기술 컷인·배너·Canvas는 skill-fx.js의 공통 스타일을 사용한다. */
.actions details{grid-column:1/-1;margin-top:8px}.actions summary{font-size:12px;color:var(--muted);cursor:pointer;padding:10px 0}.status-badge{border:1px solid #537675;border-radius:4px;padding:3px}.review-mode{padding:0;margin:0;max-width:none}.review-mode .page-head,.review-mode .roster-panel,.review-mode .control-panel,.review-mode footer,.review-mode .transport,.review-mode .scrubber,.review-mode .chapters{display:none}.review-mode main{display:block}.review-mode .screen-panel{border:0;border-radius:0}.review-mode .arena{height:420px;aspect-ratio:auto}.review-mode .actor{--s:240px}.review-mode .player{left:25%}.review-mode .enemy{left:75%}.review-mode .sprite{filter:drop-shadow(0 12px 6px #0005)}

.play-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;color:var(--muted);font-size:13px}.play-entry a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--gold);border-radius:10px;color:var(--gold);font-size:14px;font-weight:700;text-decoration:none}.play-entry a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.review-mode .play-entry{display:none}@media(max-width:800px){.demo-badge{display:inline-block;margin-top:10px}.page-head{flex-wrap:wrap;gap:8px}}