:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --bg: #090b10;
  --panel: #11141c;
  --panel-2: #171b24;
  --line: #2a303d;
  --text: #f4f6fa;
  --muted: #9ba5b5;
  --brand: #f5b800;
  --brand-ink: #211a0c;
  --success: #62e6a7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 70% 15%, rgba(73, 88, 118, .17), transparent 34rem),
    linear-gradient(135deg, #080a0f, #10131a 62%, #080a0e);
}

button, select, a { font: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: .75rem 1rem;
  border-radius: .65rem;
  color: #111;
  background: white;
}

.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 10, 15, .72);
  backdrop-filter: blur(18px);
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: -.035em; }

.eyebrow, .section-label {
  margin-bottom: .4rem;
  color: var(--brand);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .17em;
}

.environment {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .72rem;
  border: 1px solid rgba(98, 230, 167, .22);
  border-radius: 999px;
  color: #bff6db;
  background: rgba(98, 230, 167, .07);
  font-size: .8rem;
}

.environment span {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 1rem var(--success);
}

.topbar-actions { display: flex; align-items: center; gap: .7rem; }
.cms-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 .9rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .7rem;
  color: var(--text);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
}
.cms-link:hover { background: rgba(255,255,255,.09); }
.cms-link:focus-visible { outline: 3px solid rgba(245,184,0,.45); outline-offset: 2px; }

.workspace {
  width: min(1600px, 100%);
  min-height: calc(100vh - 82px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
}

.control-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: rgba(13, 16, 23, .76);
}

.field {
  display: grid;
  gap: .5rem;
  color: #c9d0dc;
  font-size: .8rem;
  font-weight: 700;
}

select {
  width: 100%;
  min-height: 46px;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  color: var(--text);
  background: var(--panel-2);
}

select:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(245, 184, 0, .45);
  outline-offset: 2px;
}

.mode-control,
.view-control { display: grid; gap: .65rem; }
.mode-control__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #c9d0dc; font-size: .8rem; }
.mode-control__heading strong { color: #ffe071; font-size: .75rem; }
.mode-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; padding: .35rem; border: 1px solid var(--line); border-radius: .85rem; background: #0c0f15; }
.mode-buttons button { min-width: 0; min-height: 44px; padding: .4rem; color: var(--muted); border: 1px solid transparent; border-radius: .62rem; background: transparent; font-size: .74rem; font-weight: 850; cursor: pointer; }
.mode-buttons button.is-active { color: var(--brand-ink); border-color: #ffe071; background: linear-gradient(135deg,#ffd84d,var(--brand)); box-shadow: 0 .45rem 1rem rgba(245,184,0,.16); }
.view-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; padding: .35rem; border: 1px solid var(--line); border-radius: .85rem; background: #0c0f15; }
.view-buttons button { min-width: 0; min-height: 42px; padding: .4rem; color: var(--muted); border: 1px solid transparent; border-radius: .62rem; background: transparent; font-size: .74rem; font-weight: 850; cursor: pointer; }
.view-buttons button.is-active { color: var(--brand-ink); border-color: #ffe071; background: linear-gradient(135deg,#ffd84d,var(--brand)); box-shadow: 0 .45rem 1rem rgba(245,184,0,.16); }

.manifest-card {
  margin-top: .25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}

.manifest-card > div {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .86rem;
}

.status-dot {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: var(--success);
}

dl { margin: .9rem 0 0; display: grid; gap: .5rem; }
dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; }
dt { color: var(--muted); }
dd { margin: 0; color: #dfe4ec; }

.stage-panel {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stage-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.stage {
  position: relative;
  min-height: 600px;
  flex: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.4rem;
  background:
    linear-gradient(to bottom, rgba(28, 34, 46, .72), rgba(8, 10, 14, .96)),
    radial-gradient(circle at center, #253043, #0d1118);
  box-shadow: inset 0 0 6rem rgba(0, 0, 0, .4);
}

.blender-render {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  background: #090c12;
  pointer-events: none;
}

.scene-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.scene-camera { position: absolute; inset: 0; }
body[data-experience-mode="single"] .screen-panel[data-panel="1"],
body[data-experience-mode="single"] .screen-panel[data-panel="2"],
body[data-experience-mode="dual"] .screen-panel[data-panel="2"] { visibility: hidden; }

.player-source-probe,
.player-control-probe { display: none; }

.screen-panel {
  --ticker-height: 14%;
  --circuit-width: 1.5%;
  position: absolute;
  z-index: 3;
  top: 24.25%;
  width: 18.78%;
  height: 52.35%;
  overflow: hidden;
  background: #030303;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .92);
}
.screen-panel.is-mode-inactive { visibility: hidden; }

.screen-1 { left: 21.05%; }
.screen-2 { left: 40.72%; }
.screen-3 { left: 60.27%; }

.panel-plane {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: none !important;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

.content-viewport {
  position: absolute;
  z-index: 2;
  inset: 0 var(--circuit-width) var(--ticker-height) 0;
  overflow: hidden;
  background: #050505;
}
.screen-panel.is-no-ticker .content-viewport { bottom: 0; }

.screen-panel.is-fullscreen .content-viewport { z-index: 8; bottom: 0; }
.screen-panel.is-fullscreen .ticker-strip { visibility: hidden; }

.screen-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.screen-layer img,
.screen-layer > video,
.campaign-layer video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: #050505;
}

.campaign-layer { background: #050505; }
.campaign-layer.is-preparing { opacity: 0; pointer-events: none; }
.screen-layer.incoming { transform: translateX(99.6%); }
.screen-panel.is-sliding .screen-layer.current { animation: screen-out .95s cubic-bezier(.65, 0, .35, 1) forwards; }
.screen-panel.is-sliding .screen-layer.incoming { animation: screen-in .95s cubic-bezier(.65, 0, .35, 1) forwards; }

@keyframes screen-out { to { transform: translateX(-100.4%); } }
@keyframes screen-in { to { transform: translateX(-.4%); } }

.ticker-strip {
  position: absolute;
  z-index: 7;
  right: var(--circuit-width);
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--ticker-height);
  overflow: hidden;
  color: #fff;
  background: #07090c;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: Inter, Pretendard, "Noto Sans KR", "Segoe UI Emoji", sans-serif;
  font-size: clamp(9px, .825vw, 22.5px);
  font-weight: 900;
  letter-spacing: -.035em;
  white-space: nowrap;
  contain: layout paint;
}

.ticker-track,
.ticker-sequence {
  display: inline-flex;
  align-items: center;
  width: max-content;
  height: 100%;
}

.ticker-track {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.ticker-sequence { flex: 0 0 auto; }
.ticker-message { display: inline-block; flex: 0 0 auto; padding-right: 5.5em; white-space: nowrap; }

.circuit-strip {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--circuit-width);
  background: #808080;
  border-left: 1px solid rgba(0, 0, 0, .18);
  pointer-events: none;
}

.notice-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 13% 9% 9%;
  color: #0f172a;
  background: linear-gradient(165deg, #fff 0%, #f8fafc 64%, #e8edf5 100%);
  isolation: isolate;
}

.notice-slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 2.4%;
  background: var(--notice-accent, #2563eb);
}

.notice-kicker { margin: 0 0 11%; color: var(--notice-accent, #2563eb); font-size: clamp(6px, .55vw, 14px); font-weight: 850; letter-spacing: .08em; }
.notice-heading { margin: 0; font-size: clamp(13px, 1.25vw, 31px); line-height: 1.12; letter-spacing: -.055em; word-break: keep-all; }
.notice-body { margin: 9% 0 0; color: #334155; font-size: clamp(7px, .55vw, 14px); line-height: 1.5; white-space: pre-line; word-break: keep-all; }
.notice-footer { margin-top: auto; padding-top: 8%; border-top: 1px solid #cbd5e1; color: #64748b; font-size: clamp(6px, .42vw, 11px); font-weight: 700; }
.notice-slide.is-urgent { color: #fff; background: linear-gradient(160deg, #7f1d1d, #dc2626); }
.notice-slide.is-urgent .notice-kicker { color: #fde68a; }
.notice-slide.is-urgent .notice-body,
.notice-slide.is-urgent .notice-footer { color: #fff; border-color: rgba(255, 255, 255, .3); }

.playback-status {
  position: absolute;
  z-index: 6;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 40px;
  padding: 0 .8rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .75rem;
  color: #e8edf5;
  background: rgba(4, 7, 12, .82);
  font-size: .72rem;
  font-weight: 750;
  backdrop-filter: blur(12px);
}

.playback-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 .8rem var(--success);
}

.playback-countdown {
  min-width: 1.7rem;
  color: #ffe071;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: right;
}

.mode-benefit {
  position: absolute;
  z-index: 6;
  right: 1rem;
  bottom: 4.35rem;
  left: 1rem;
  width: fit-content;
  max-width: calc(100% - 2rem);
  min-height: 42px;
  margin: 0 auto;
  padding: .58rem .92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgba(245, 184, 0, .25);
  border-radius: 999px;
  color: #f4f6fa;
  background: rgba(5, 8, 13, .9);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .24);
  font-size: clamp(.8rem, 1.05vw, .98rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-align: center;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.mode-benefit::before {
  content: "";
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 .75rem rgba(245, 184, 0, .65);
}

.render-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  padding: .45rem .65rem;
  border: 1px solid rgba(98,230,167,.3);
  border-radius: 999px;
  color: #bff6db;
  background: rgba(8,12,18,.76);
  font-size: .68rem;
  font-weight: 850;
  backdrop-filter: blur(10px);
}
.render-badge[data-state="rendering"] { color: #ffe58c; border-color: rgba(245,184,0,.35); }

.stage-glow {
  position: absolute;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(245, 184, 0, .08);
  filter: blur(80px);
}

.floor-line {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.device-rail {
  position: relative;
  z-index: 2;
  width: min(94%, 1020px);
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(.25rem, 1vw, .75rem);
  perspective: 1200px;
}

.device {
  --device-width: clamp(82px, 13vw, 164px);
  position: relative;
  width: var(--device-width);
  aspect-ratio: 1600 / 2560;
  padding: 5px;
  border-radius: .42rem .42rem .7rem .42rem;
  background: linear-gradient(110deg, #f6f5f0, #ffffff 62%, #cfd3d9);
  box-shadow:
    1.1rem 1.25rem 2.2rem rgba(0,0,0,.42),
    inset -.45rem 0 .65rem rgba(168,174,186,.33);
  transform: rotateX(-2deg) rotateY(-4deg);
  transform-origin: bottom center;
}

.device::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: 0;
  width: 30%;
  height: 23%;
  z-index: -1;
  border-radius: 0 .55rem .3rem 0;
  background: linear-gradient(135deg, #fdfdfb, #c8ced7);
  transform: skewY(-14deg);
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .18rem;
  color: white;
  background: #050608;
}

.creative {
  width: 100%;
  height: 100%;
  padding: 13% 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 70% 42%, rgba(255, 216, 77, .54), transparent 28%),
    linear-gradient(150deg, #1b1208, #3a2410 55%, #17100a);
  background-position: center;
  background-size: cover;
}

.creative::before {
  content: "";
  position: absolute;
  inset: auto 10% 12%;
  height: 2px;
  background: var(--accent, #f5b800);
  opacity: .55;
}

.creative small {
  color: #ffe58c;
  font-size: clamp(.42rem, .65vw, .65rem);
  font-weight: 800;
  letter-spacing: .1em;
}

.creative h3 {
  max-width: 8ch;
  font-size: clamp(.78rem, 1.65vw, 1.65rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.creative-copy { display: grid; gap: .45rem; }
.creative-copy p {
  max-width: 14ch;
  color: rgba(255,255,255,.78);
  font-size: clamp(.34rem, .48vw, .5rem);
  line-height: 1.35;
}
.creative.has-image { text-shadow: 0 2px 12px rgba(0,0,0,.8); }

.creative-badge {
  align-self: flex-start;
  padding: .32rem .45rem;
  border-radius: 999px;
  color: #261a08;
  background: var(--accent, #ffd84d);
  font-size: clamp(.36rem, .55vw, .55rem);
  font-weight: 900;
}

.device.is-publishing { animation: publish-pulse .75s ease; }

body.is-embedded .topbar,
body.is-embedded .control-panel { display: none; }
body.is-embedded .workspace { min-height: 100vh; grid-template-columns: 1fr; }
body.is-embedded .stage-panel { min-height: 100vh; padding: 1rem; }
body.is-embedded .stage { min-height: 0; }
body.is-embedded .device { --device-width: clamp(72px, 14vw, 145px); }

@keyframes publish-pulse {
  0%, 100% { transform: rotateX(-2deg) rotateY(-4deg) translateY(0); }
  45% { transform: rotateX(-2deg) rotateY(-4deg) translateY(-10px); filter: brightness(1.25); }
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .control-panel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .stage { min-height: 520px; }
}

@media (max-width: 560px) {
  .topbar, .stage-heading { align-items: flex-start; }
  .topbar { min-height: auto; }
  .environment { display: none; }
  .cms-link { min-height: 44px; }
  .stage-heading { flex-direction: column; }
  .stage-panel { padding: 1rem; }
  .stage { min-height: 430px; }
  .device { --device-width: clamp(52px, 20vw, 100px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .ticker-track { transform: translate3d(0, 0, 0) !important; }
}