/* 빛나 웹 — 무대(도면)·픽셀 움직임 모듈. 모든 규칙은 .stage-mod / .pixel-mod 아래에만. */

/* ═════════ 무대(도면) ═════════ */
.stage-mod {
  --sm-blue: oklch(0.62 0.19 255);
  --sm-blue-2: oklch(0.72 0.14 245);
  --sm-panel: oklch(0.17 0.006 70 / 0.72);
  container-type: inline-size;
  position: relative;
  color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
.stage-mod .sm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: stretch; }
.stage-mod .sm-plan { align-self: start; }
.stage-mod .sm-insp { height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.stage-mod button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage-mod svg { max-width: none; }

.stage-mod .sm-plan {
  position: relative;
  width: 100%; min-width: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-l);
  overflow: hidden;
  background: #0b0b0c;
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px -50px oklch(0 0 0 / 0.9), 0 1px 0 0 oklch(1 0 0 / 0.05) inset;
  touch-action: pan-y;
  isolation: isolate;
  user-select: none; -webkit-user-select: none;
}
.stage-mod .sm-plan.is-edit, .stage-mod .sm-plan.sm-zoomed { touch-action: none; }
.stage-mod .sm-plan.sm-zoomed .sm-front { cursor: grab; }
.stage-mod .sm-plan.is-pan .sm-front { cursor: grabbing; }
.stage-mod .sm-back, .stage-mod .sm-front, .stage-mod .sm-beams {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.stage-mod .sm-beams { mix-blend-mode: screen; pointer-events: none; transition: opacity .6s var(--ease-out); }
.stage-mod .sm-plan.no-beams .sm-beams { opacity: 0.08; }
.stage-mod .sm-plan::after { /* 가장자리 어둡게 */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 60%, oklch(0 0 0 / 0.5) 100%);
}

/* 바닥·방 이름 */
.stage-mod .sm-room { font: 600 24px var(--font); fill: oklch(1 0 0 / 0.26); letter-spacing: -0.02em; }
.stage-mod .sm-floor { opacity: 0; transition: opacity .9s var(--ease-out); }
.stage-mod.sm-in .sm-floor { opacity: 1; }

/* 벽 */
.stage-mod .sm-walls path {
  fill: none; stroke: #5d6066; stroke-width: 16; stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .85s var(--ease-io);
}
.stage-mod.sm-in .sm-walls path { stroke-dashoffset: 0; }
.stage-mod .sm-walls path:nth-child(n+4) { transition-delay: .18s; }
.stage-mod .sm-win { opacity: 0; transition: opacity .6s .5s; }
.stage-mod.sm-in .sm-win { opacity: 1; }
.stage-mod .sm-win line { stroke: oklch(0.85 0.05 240 / 0.55); stroke-width: 2.5; }

/* 가구 */
.stage-mod .sm-furn { opacity: 0; transition: opacity .9s .45s var(--ease-out); }
.stage-mod.sm-in .sm-furn { opacity: 1; }
.stage-mod .sm-furn rect, .stage-mod .sm-furn circle { fill: oklch(1 0 0 / 0.028); stroke: oklch(1 0 0 / 0.17); stroke-width: 2; }
.stage-mod .sm-furn .sm-cush { fill: oklch(1 0 0 / 0.04); stroke: oklch(1 0 0 / 0.1); }
.stage-mod .sm-furn .sm-tvglass { fill: oklch(1 0 0 / 0.16); stroke: none; }
.stage-mod .sm-furn .sm-seam { stroke: oklch(1 0 0 / 0.08); stroke-width: 2; }
.stage-mod .sm-furn .sm-door { stroke: oklch(1 0 0 / 0.35); stroke-width: 3; fill: none; }
.stage-mod .sm-furn .sm-door-arc { stroke: oklch(1 0 0 / 0.18); stroke-width: 2; fill: none; stroke-dasharray: 6 6; }

/* 카메라 */
.stage-mod .sm-cams { opacity: 0; transition: opacity .8s .7s; }
.stage-mod.sm-in .sm-cams { opacity: 1; }
.stage-mod .sm-fov { stroke: oklch(1 0 0 / 0.5); stroke-width: 2.2; stroke-dasharray: 9 9; }
.stage-mod .sm-cam-body { fill: #e9e9ec; }
.stage-mod .sm-cam-lens { fill: #c3c6cc; }
.stage-mod .sm-lbl.sm-lbl-cam .sm-lbl-bg { fill: #f2f2f4; stroke: none; }
.stage-mod .sm-lbl.sm-lbl-cam text { fill: #141416; }

/* 조명 */
.stage-mod .sm-fx-g { outline: none; cursor: pointer; opacity: 0; transition: opacity .6s var(--ease-out) var(--d, 1s); }
.stage-mod.sm-in .sm-fx-g { opacity: 1; }
.stage-mod .sm-fx-g .sm-shell { fill: #2b2d32; stroke: #a4a7ad; stroke-width: 2.2; transition: fill .3s, stroke .3s; }
.stage-mod .sm-fx-g .sm-lens { transition: opacity .4s; }
.stage-mod .sm-fx-g.is-off .sm-lens { opacity: 0.18; }
.stage-mod .sm-fx-g.is-off .sm-shell { stroke: #6b6e74; }
.stage-mod .sm-hit { fill: transparent; }
.stage-mod .sm-ring { fill: oklch(0.62 0.19 255 / 0.12); stroke: var(--sm-blue-2); stroke-width: 3.5; opacity: 0; transition: opacity .3s; }
.stage-mod .sm-fx-g.is-hover .sm-ring { opacity: 0.5; }
.stage-mod .sm-fx-g.is-sel .sm-ring { opacity: 1; }
.stage-mod .sm-fx-g:focus-visible .sm-ring { opacity: 1; stroke: var(--amber); }
.stage-mod .sm-plan.is-edit .sm-fx-g { cursor: grab; }
.stage-mod .sm-fx-g.is-drag { cursor: grabbing; }
.stage-mod .sm-fx-g.is-drag .sm-ring { stroke-dasharray: 8 6; }
.stage-mod .sm-plan.is-focus .sm-fx-g:not(.is-sel):not(.is-hover) { opacity: .55; }

/* 라벨 알약 */
.stage-mod .sm-lbl { pointer-events: none; transition: opacity .3s; }
.stage-mod .sm-lbl-bg { fill: oklch(0.13 0.004 70 / 0.9); stroke: oklch(1 0 0 / 0.22); stroke-width: 1.5; transition: fill .3s; }
.stage-mod .sm-lbl text { font: 600 19px var(--font); fill: #ececef; letter-spacing: -0.02em; }
.stage-mod .sm-fx-g.is-sel .sm-lbl-bg { fill: oklch(0.66 0.15 240); stroke: none; }
.stage-mod .sm-fx-g.is-sel .sm-lbl text { fill: #fff; }
.stage-mod .sm-plan.sm-compact .sm-fx-g:not(.is-sel):not(.is-hover) .sm-lbl,
.stage-mod .sm-plan.sm-compact .sm-lbl-cam { opacity: 0; }

/* A캠에서 보기 */
.stage-mod .sm-camdim { pointer-events: none; opacity: 0; transition: opacity .7s var(--ease-out); }
.stage-mod .sm-plan.is-cam .sm-camdim { opacity: 1; }
.stage-mod .sm-camdim-shade { fill: oklch(0.05 0 0 / 0.66); }
.stage-mod .sm-camdim-edge { fill: oklch(0.72 0.14 245 / 0.06); stroke: var(--sm-blue-2); stroke-width: 3; }
.stage-mod .sm-plan.is-cam .sm-cam[data-cam="A"] .sm-fov { stroke: var(--sm-blue-2); stroke-dasharray: none; }

/* 위 도구 */
.stage-mod .sm-bar { position: absolute; z-index: 3; display: flex; gap: 8px; align-items: center; }
.stage-mod .sm-bar-tl { top: 14px; left: 14px; }
.stage-mod .sm-bar-tr { top: 14px; right: 14px; }
.stage-mod .sm-seg, .stage-mod .sm-pill, .stage-mod .sm-zoom {
  background: var(--sm-panel); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px -14px oklch(0 0 0 / 0.8);
}
.stage-mod .sm-seg { display: flex; padding: 4px; border-radius: 999px; }
.stage-mod .sm-seg button {
  border: 0; background: transparent; color: var(--ink-3); height: 36px; min-width: 56px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 620; transition: background .25s, color .25s;
}
.stage-mod .sm-seg button[aria-pressed="true"] { background: oklch(1 0 0 / 0.12); color: var(--ink); }
.stage-mod .sm-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
  color: var(--ink-2); font-size: 14px; font-weight: 600; transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease-out);
}
.stage-mod .sm-pill:active { transform: scale(0.96); }
.stage-mod .sm-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage-mod .sm-pill[aria-pressed="true"] { color: var(--ink); background: oklch(0.3 0.006 70 / 0.8); }
.stage-mod .sm-pill[data-act="beams"][aria-pressed="false"] { color: var(--ink-4); }
.stage-mod .sm-pill-cam[aria-pressed="true"] { background: oklch(0.62 0.19 255 / 0.9); border-color: transparent; color: #fff; box-shadow: 0 0 40px -10px var(--sm-blue); }
.stage-mod .sm-hint {
  position: absolute; z-index: 3; top: 68px; left: 14px; max-width: calc(100% - 28px);
  padding: 9px 14px; border-radius: 12px; font-size: 13.5px; color: var(--ink);
  background: oklch(0.62 0.19 255 / 0.92); box-shadow: 0 12px 30px -12px oklch(0.62 0.19 255 / 0.7);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out);
}
.stage-mod .sm-hint.is-on { opacity: 1; transform: none; }
.stage-mod .sm-zoom {
  position: absolute; z-index: 3; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; border-radius: 999px; padding: 3px;
}
.stage-mod .sm-zoom button {
  width: 44px; height: 40px; border: 0; background: transparent; color: var(--ink-2); font-size: 20px; line-height: 1; border-radius: 999px;
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.stage-mod .sm-zoom button:hover { background: oklch(1 0 0 / 0.08); color: var(--ink); }
.stage-mod .sm-zoom button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-mod .sm-zoom output { min-width: 44px; text-align: center; font-size: 12px; font-weight: 640; color: var(--ink-2); padding: 2px 0; }
.stage-mod .sm-zoom-sep { width: 20px; height: 1px; background: var(--line-2); margin: 2px 0; }
.stage-mod .sm-zoom [data-act="zin"] { order: 1; } .stage-mod .sm-zoom output { order: 2; } .stage-mod .sm-zoom [data-act="zout"] { order: 3; } .stage-mod .sm-zoom-sep { order: 4; } .stage-mod .sm-zoom [data-act="fit"] { order: 5; }

/* 고른 조명 칸 */
.stage-mod .sm-insp {
  border-radius: var(--r-l); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: oklch(0.165 0.006 70 / 0.82);
  transition: opacity .4s;
}
.stage-mod .sm-ih { display: flex; align-items: flex-start; gap: 12px; }
.stage-mod .sm-ih-txt { flex: 1; min-width: 0; }
.stage-mod .sm-ih-name { margin: 0; font-size: 21px; font-weight: 720; letter-spacing: -0.03em; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stage-mod .sm-tag { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 2px 8px; border-radius: 7px; background: oklch(1 0 0 / 0.08); letter-spacing: 0; }
.stage-mod .sm-ih-model { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.stage-mod .sm-power {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid oklch(1 0 0 / 0.22); background: transparent; color: var(--ink-3);
  transition: background .3s, border-color .3s, color .3s, box-shadow .4s, transform .2s var(--ease-out);
}
.stage-mod .sm-power:active { transform: scale(0.92); }
.stage-mod .sm-power svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.stage-mod .sm-power[aria-pressed="true"] { background: var(--sm-blue); border-color: var(--sm-blue); color: #fff; box-shadow: 0 0 30px -6px oklch(0.62 0.19 255 / 0.8); }
.stage-mod .sm-preview { width: 100%; height: 60px; flex: none; border-radius: 14px; border: 1px solid var(--line); display: block; }
.stage-mod .sm-insp.is-off .sm-preview, .stage-mod .sm-insp.is-off .sm-fxcard, .stage-mod .sm-insp.is-off .sm-swatches { opacity: .45; }
.stage-mod .sm-card { border-radius: 16px; background: oklch(1 0 0 / 0.035); border: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; transition: opacity .3s; }
.stage-mod .sm-fxhead { display: flex; align-items: center; gap: 10px; }
.stage-mod .sm-fxicon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.stage-mod .sm-fxicon-police { background: linear-gradient(90deg, #e3262b 0 45%, #1f4fff 55% 100%); filter: saturate(1.1) blur(.3px); box-shadow: 0 0 20px -6px #e3262b; }
.stage-mod .sm-fxicon-city { background: repeating-linear-gradient(180deg, #ffb24a 0 3px, transparent 3px 5px), #1d1d22; }
.stage-mod .sm-fxicon-strike { background: radial-gradient(circle at 60% 30%, #dfe8ff, #4a5578 60%, #14161d); }
.stage-mod .sm-fxicon-candle { background: radial-gradient(circle at 50% 65%, #ffbf4a, #b4450c 45%, #1b1209 80%); }
.stage-mod .sm-fxicon-tv { background: repeating-linear-gradient(180deg, #7ea4ff 0 2px, #2b3a66 2px 4px); }
.stage-mod .sm-fxtxt { flex: 1; min-width: 0; display: grid; }
.stage-mod .sm-fxtxt b { font-size: 15px; font-weight: 680; }
.stage-mod .sm-fxstate { font-size: 12.5px; margin-top: -2px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.stage-mod .sm-fxstate.is-on { color: var(--green); }
.stage-mod .sm-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.stage-mod .sm-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: oklch(1 0 0 / 0.06); color: var(--ink); font-size: 13.5px; font-weight: 620;
  transition: background .2s, transform .2s var(--ease-out);
}
.stage-mod .sm-btn:hover { background: oklch(1 0 0 / 0.1); }
.stage-mod .sm-btn:active { transform: scale(0.96); }
.stage-mod .sm-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.stage-mod .sm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-3); }
.stage-mod .sm-row output { color: var(--ink); font-weight: 650; font-size: 14px; }
.stage-mod .sm-row small { font-size: 12px; }
.stage-mod .sm-row-tight { margin-bottom: -4px; }
.stage-mod .sm-row-bri { margin-top: 2px; align-items: flex-end; }
.stage-mod .sm-row-bri output { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stage-mod .sm-row-bri output small { font-size: 15px; color: var(--ink-3); margin-left: 1px; }

.stage-mod .sm-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stage-mod .sm-sw {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--line); background: oklch(1 0 0 / 0.04); color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: left;
  transition: border-color .2s, background .2s;
}
.stage-mod .sm-sw i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 14px -2px var(--c); }
.stage-mod .sm-sw[aria-pressed="true"] { border-color: oklch(1 0 0 / 0.5); background: oklch(1 0 0 / 0.1); color: var(--ink); }
.stage-mod .sm-sw.is-static { cursor: default; }

.stage-mod .sm-slider {
  position: relative; height: 40px; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: oklch(1 0 0 / 0.08); touch-action: none; outline-offset: 3px; isolation: isolate;
}
.stage-mod .sm-slider-big { height: 52px; border-radius: 14px; }
.stage-mod .sm-slider-fill { position: absolute; inset: 0; background: #e9e9ec; transform: translateX(-100%); will-change: transform; border-radius: 0 6px 6px 0; }
.stage-mod .sm-slider.is-drag .sm-slider-fill { background: #fff; }
.stage-mod .sm-slider-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #222; mix-blend-mode: difference; filter: invert(1); width: 20px; height: 20px; }
.stage-mod .sm-slider-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@container (max-width: 900px) {
  .stage-mod .sm-grid { grid-template-columns: minmax(0, 1fr); }
  .stage-mod .sm-insp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; height: auto; min-height: 0; overflow: visible; }
  .stage-mod .sm-insp > * { grid-column: 1 / -1; }
}
@container (min-width: 600px) and (max-width: 900px) {
  .stage-mod .sm-insp > .sm-fxcard { grid-column: 1; grid-row: 3 / span 4; }
  .stage-mod .sm-insp > :is(.sm-row-tight, .sm-swatches, .sm-row-bri, .sm-slider) { grid-column: 2; }
}
@container (max-width: 560px) {
  .stage-mod .sm-plan { aspect-ratio: 1 / 1; border-radius: var(--r-m); }
  .stage-mod .sm-bar-tl { top: 8px; left: 8px; gap: 6px; }
  .stage-mod .sm-bar-tr { top: auto; bottom: 8px; right: 8px; }
  .stage-mod .sm-zoom { right: auto; left: 8px; top: auto; bottom: 8px; transform: none; flex-direction: row; }
  .stage-mod .sm-zoom output { display: none; }
  .stage-mod .sm-zoom-sep { display: none; }
  .stage-mod .sm-zoom button { width: 40px; height: 40px; }
  .stage-mod .sm-pill { height: 40px; padding: 0 12px; font-size: 13px; }
  .stage-mod .sm-pill[data-act="beams"] span { display: none; }
  .stage-mod .sm-seg button { height: 32px; min-width: 48px; padding: 0 10px; font-size: 13px; }
  .stage-mod .sm-hint { top: 56px; left: 8px; }
  .stage-mod .sm-insp { padding: 14px; }
}

/* ═════════ 픽셀 하나까지 ═════════ */
.pixel-mod {
  container-type: inline-size;
  position: relative;
  display: grid; gap: 14px;
  color: var(--ink); font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
.pixel-mod button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pixel-mod .px-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-m); }
.pixel-mod .px-head-icon { width: 42px; height: 42px; border-radius: 11px; background: #18181c; border: 1px solid var(--line); display: grid; gap: 3px; padding: 7px 6px; flex: none; }
.pixel-mod .px-head-icon i { display: block; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, oklch(0.83 0.15 75) 0 4px, transparent 4px 5px); opacity: .9; }
.pixel-mod .px-head-txt { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.pixel-mod .px-head-txt b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pixel-mod .px-head-txt span { font-size: 13px; color: var(--ink-3); }
.pixel-mod .px-readout { text-align: right; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.pixel-mod .px-readout b { color: var(--blue-2); font-weight: 680; }

.pixel-mod .px-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.pixel-mod .px-stage {
  position: relative; width: 100%; min-width: 0; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 100%, oklch(0.2 0.01 70 / 0.6), transparent 70%),
    linear-gradient(180deg, #0a0a0b 0%, #0d0d0f 78%, #121214 100%);
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px -50px oklch(0 0 0 / 0.9);
}
.pixel-mod .px-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.pixel-mod .px-floor { position: absolute; inset: auto 0 0 0; height: 20%; pointer-events: none; background: linear-gradient(180deg, transparent, oklch(0 0 0 / 0.35)); }

.pixel-mod .px-panel { border-radius: var(--r-l); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: oklch(0.165 0.006 70 / 0.82); min-width: 0; }
.pixel-mod .px-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pixel-mod .px-chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: oklch(1 0 0 / 0.04); color: var(--ink-2); font-size: 14px; font-weight: 620;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease-out);
}
.pixel-mod .px-chip:hover { background: oklch(1 0 0 / 0.09); color: var(--ink); }
.pixel-mod .px-chip:active, .pixel-mod .is-press { transform: scale(0.94); }
.pixel-mod .px-chip.is-press { background: oklch(0.62 0.19 255 / 0.3); border-color: var(--blue-2); color: #fff; }
.pixel-mod .px-label { display: flex; justify-content: space-between; align-items: flex-end; font-size: 13px; color: var(--ink-3); margin-bottom: -4px; }
.pixel-mod .px-label-bri output { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.pixel-mod .px-label-bri output small { font-size: 15px; color: var(--ink-3); margin-left: 1px; }
.pixel-mod .px-swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pixel-mod .px-sw {
  height: 44px; border-radius: 12px; border: 1px solid var(--line); background: oklch(1 0 0 / 0.04); display: grid; place-items: center;
  transition: border-color .2s, background .2s, transform .2s var(--ease-out);
}
.pixel-mod .px-sw i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px -2px var(--c); }
.pixel-mod .px-sw[aria-pressed="true"], .pixel-mod .px-sw.is-press { border-color: oklch(1 0 0 / 0.6); background: oklch(1 0 0 / 0.1); }
.pixel-mod .px-hue {
  --hc: #f0f; position: relative; height: 28px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.1) inset; margin: 8px 11px;
}
.pixel-mod .px-hue::before { content: ""; position: absolute; inset: -8px -11px; }
.pixel-mod .px-hue-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform; pointer-events: none; }
.pixel-mod .px-hue-rail i {
  position: absolute; left: -13px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--hc); border: 3px solid #fff; box-shadow: 0 2px 10px oklch(0 0 0 / 0.6);
}
.pixel-mod .px-slider { position: relative; height: 52px; border-radius: 14px; overflow: hidden; cursor: pointer; background: oklch(1 0 0 / 0.08); touch-action: none; isolation: isolate; }
.pixel-mod .px-slider-fill { position: absolute; inset: 0; background: #e9e9ec; transform: translateX(-100%); will-change: transform; border-radius: 0 6px 6px 0; }
.pixel-mod .px-slider.is-drag .px-slider-fill { background: #fff; }
.pixel-mod .px-slider-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #222; mix-blend-mode: difference; filter: invert(1); }
.pixel-mod .px-slider-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pixel-mod.px-nosel :is(.px-swatches, .px-hue, .px-slider) { opacity: .4; }
.pixel-mod :is(.px-swatches, .px-hue, .px-slider) { transition: opacity .3s; }
.pixel-mod .px-caption { margin: -2px 0 0; font-size: 12.5px; color: var(--ink-4); }
.pixel-mod .px-status {
  margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 52px; padding: 6px 6px 6px 14px; border-radius: 14px; border: 1px solid var(--line); background: oklch(1 0 0 / 0.03);
  font-size: 13px; color: var(--ink-2); transition: border-color .3s, background .3s;
}
.pixel-mod .px-status.is-on { border-color: oklch(0.83 0.15 75 / 0.35); background: oklch(0.83 0.15 75 / 0.06); }
.pixel-mod .px-status span { flex: 1; min-width: 0; }
.pixel-mod .px-status b { color: var(--amber); font-weight: 680; }
.pixel-mod .px-status-idle { color: var(--ink-4); }
.pixel-mod .px-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); flex: none; }
.pixel-mod .px-release {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid oklch(0.83 0.15 75 / 0.45);
  background: oklch(0.83 0.15 75 / 0.12); color: var(--amber); font-size: 13px; font-weight: 650; transition: background .2s, transform .2s var(--ease-out);
}
.pixel-mod .px-release:hover { background: oklch(0.83 0.15 75 / 0.2); }

/* 유령 커서 */
.pixel-mod .px-ghost {
  position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease-out); will-change: transform;
}
.pixel-mod .px-ghost.is-on { opacity: 1; }
.pixel-mod .px-ghost i {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, oklch(1 0 0 / 0.95) 0 22%, oklch(0.95 0.03 85 / 0.45) 34%, oklch(0.9 0.05 85 / 0.12) 60%, transparent 72%);
  box-shadow: 0 0 30px 6px oklch(0.95 0.04 85 / 0.18);
  transition: transform .25s var(--ease-out);
}
.pixel-mod .px-ghost.is-down i { transform: scale(0.78); }
.pixel-mod .px-ghost::after {
  content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid oklch(1 0 0 / 0.7); opacity: 0; transform: scale(0.4);
}
.pixel-mod .px-ghost.is-tap::after { animation: px-tap .5s var(--ease-out); }
@keyframes px-tap { 0% { opacity: .9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.3); } }

.pixel-mod .px-replay {
  justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: oklch(1 0 0 / 0.04); color: var(--ink-2); font-size: 14px; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .4s, transform .4s var(--ease-out), visibility 0s .4s, background .2s;
}
.pixel-mod.px-manual:not(.px-still) .px-replay { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .4s var(--ease-out), visibility 0s, background .2s; }
.pixel-mod .px-replay:hover { background: oklch(1 0 0 / 0.08); color: var(--ink); }
.pixel-mod .px-replay svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@container (max-width: 860px) {
  .pixel-mod .px-body { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 559px) {
  .pixel-mod .px-stage { aspect-ratio: 1 / 1; border-radius: var(--r-m); }
  .pixel-mod .px-head { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .pixel-mod .px-readout { width: 100%; text-align: left; }
  .pixel-mod .px-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pixel-mod .px-chip { padding: 0 6px; font-size: 13.5px; }
  .pixel-mod .px-swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .pixel-mod .px-panel { padding: 14px; }
}
.stage-mod .sm-insp > * { flex-shrink: 0; }