/* 스크롤 구간에만 적용해 다른 시안의 레이아웃을 보존한다. */
.playground.scroll-lab {
  --lab-progress: 0;
  --interface-progress: 0;
  --stage-yaw: -12deg;
  --stage-pitch: 8deg;
  --stage-lift: -10px;
  --logo-rx: 0deg;
  --logo-ry: 0deg;
  --lab-header: 76px;
  height: 220svh;
  padding: 0;
  overflow: visible;
  background: radial-gradient(ellipse at 78% 43%, #12314788, transparent 65%);
}
.scroll-lab .playground-pin {
  position: sticky;
  top: var(--lab-header);
  height: calc(100svh - var(--lab-header));
  padding: clamp(22px, 3.6vh, 42px) 0 24px;
  display: flex;
  align-items: center;
}
.scroll-lab .playground-pin > .section-inner {
  height: 100%;
  max-width: 1250px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.7vh, 30px);
}
.scroll-lab .play-heading { gap: 35px; }
.scroll-lab .section-eyebrow { margin-bottom: 15px; }
.scroll-lab .play-heading h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.15;
}
.scroll-lab .play-heading .section-description {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 3px;
}
.scroll-lab .lab {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(35px, 5.5vw, 80px);
  min-height: 0;
  margin: 0;
}
.scroll-lab .lab-controls { align-self: center; }
.scroll-lab .lab-steps { gap: 0; }
.scroll-lab .lab-steps button {
  position: relative;
  padding: 18px 0;
  font-size: 22px;
  color: #7494a8;
  transition: color .25s;
}
.scroll-lab .lab-steps button::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, #87f3eb, #7994ef);
  box-shadow: 0 0 12px #6cdee644;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s;
}
.scroll-lab .lab-steps button[aria-pressed="true"] { color: #d0f9ff; }
.scroll-lab .lab-steps button[aria-pressed="true"]::after { transform: scaleX(1); }
.scroll-lab .lab-scroll-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.scroll-lab .lab-progress-track {
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: #284552;
}
.scroll-lab .lab-progress-track > i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6387ee, #7ff3e0);
  transform: scaleX(var(--lab-progress));
  transform-origin: left;
}
.scroll-lab #lab-progress-value {
  min-width: 31px;
  color: #b2dfeb;
  font: 10px/1.5 Consolas, monospace;
  text-align: right;
}
.scroll-lab #lab-status {
  min-height: 42px;
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.8;
  color: #adc0cf;
}
.scroll-lab .lab-scroll-hint {
  display: block;
  margin: 10px 0 0;
  color: #799bab;
  font-size: 10px;
  letter-spacing: -.01em;
}
.scroll-lab .lab-stage { padding: 14px 0 20px; }
.scroll-lab .lab-stage[data-step] .preview-window {
  transform: translateY(var(--stage-lift)) rotateY(var(--stage-yaw)) rotateX(var(--stage-pitch));
  transition: background .6s, color .6s, border-color .6s, box-shadow .6s;
  will-change: transform;
}
.scroll-lab .lab-stage[data-step="2"] .preview-window {
  border-color: #a3e6f56b;
  box-shadow: 0 0 65px #52aae519, 0 24px 55px #02060b33;
}
.scroll-lab .lab-stage[data-step] .lab-backplate {
  transform: translate(calc(20px * (1 - var(--interface-progress))), calc(20px * (1 - var(--interface-progress)))) rotateY(calc(-12deg * (1 - var(--interface-progress))));
  opacity: calc(.45 - .35 * var(--interface-progress));
  transition: none;
}
.scroll-lab .preview-body { padding: 22px 28px; }
.scroll-lab .preview-nav { margin-bottom: 20px; }
.scroll-lab .preview-grid h3 { font-size: clamp(26px, 2.7vw, 37px); margin: 10px 0 18px; }
.scroll-lab .window-bar,
.scroll-lab .preview-nav img,
.scroll-lab .preview-grid h3,
.scroll-lab .preview-modules span,
.scroll-lab .preview-grid button {
  transition: background .6s, color .6s, opacity .6s, border-color .6s;
}
.scroll-lab .preview-grid button:disabled,
.scroll-lab .preview-nav button:disabled { opacity: .65; }
.scroll-lab .preview-sculpture {
  height: 185px;
  perspective: 650px;
  isolation: isolate;
}
/* 기존 div 전체 선택자가 회전용 부모에 테두리를 만들지 않도록 분리한다. */
.scroll-lab .lab-stage[data-step] .preview-sculpture .sculpture-rotor,
.scroll-lab .preview-window.responded .preview-sculpture .sculpture-rotor {
  position: relative;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotateX(var(--logo-rx)) rotateY(var(--logo-ry));
  transform-style: preserve-3d;
  transition: none;
  will-change: transform;
}
.scroll-lab .lab-stage[data-step][data-tilt="locked"] .preview-sculpture .sculpture-rotor {
  transform: rotateX(0deg) rotateY(0deg);
  transition: none;
  will-change: auto;
}
.scroll-lab .sculpture-rotor > div {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 24px solid #7fbfd7;
  border-radius: 25%;
  box-shadow: inset 3px 2px 3px #d3f8f6, 6px 8px 15px #285e8c28;
  transform: translateZ(-16px) rotateX(30deg) rotateY(25deg) rotateZ(30deg);
  transition: border-color .6s, box-shadow .6s, transform .7s;
}
.scroll-lab .sculpture-rotor > div:nth-child(2) {
  width: 120px;
  height: 120px;
  border-color: #a3b5ef;
  transform: translateZ(4px) rotateX(30deg) rotateY(-30deg) rotateZ(70deg);
}
.scroll-lab .sculpture-rotor > img {
  width: 62px;
  height: 65px;
  transform: translateZ(46px);
  filter: drop-shadow(0 6px 6px #23456d22);
  transition: opacity .6s;
}
.scroll-lab .lab-stage[data-step="0"] .sculpture-rotor > div {
  border: 1px dashed #7dabc6;
  background: transparent;
  box-shadow: none;
}
.scroll-lab .preview-window.responded .sculpture-rotor > div:first-child {
  transform: translateZ(-16px) rotateX(45deg) rotateY(-30deg) rotateZ(125deg);
}
.scroll-lab .preview-window.responded .sculpture-rotor > div:nth-child(2) {
  transform: translateZ(4px) rotateX(-25deg) rotateY(35deg) rotateZ(-50deg);
}
.scroll-lab .logo-pointer-hint {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font: 8px/1.5 Pretendard, sans-serif;
  color: #456a89;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.scroll-lab .lab-stage[data-step="2"][data-tilt="enabled"] .logo-pointer-hint { opacity: 1; }
.scroll-lab .preview-window.dark .logo-pointer-hint { color: #9dc0db; }
.scroll-lab .demo-note { font-size: 9px; color: #7794a5; }

@media (min-width: 701px) and (max-height: 800px) {
  .scroll-lab .playground-pin { padding-top: 20px; padding-bottom: 18px; }
  .scroll-lab .playground-pin > .section-inner { gap: 15px; }
  .scroll-lab .section-eyebrow { margin-bottom: 9px; font-size: 11px; }
  .scroll-lab .play-heading h2 { font-size: clamp(32px, 3.4vw, 46px); }
  .scroll-lab .lab-steps button { padding: 14px 0; font-size: 20px; }
  .scroll-lab .lab-scroll-progress { margin-top: 19px; }
  .scroll-lab .preview-body { padding: 17px 25px; }
  .scroll-lab .preview-nav { margin-bottom: 12px; }
  .scroll-lab .preview-sculpture { height: 162px; }
  .scroll-lab .preview-grid h3 { font-size: 30px; }
  .scroll-lab .preview-modules { margin-top: 9px; }
}
@media (min-width: 701px) and (max-height: 640px) {
  .scroll-lab .playground-pin { padding: 12px 0; }
  .scroll-lab .play-heading h2 { font-size: 29px; }
  .scroll-lab .play-heading h2 br { display: none; }
  .scroll-lab .section-eyebrow { margin-bottom: 5px; }
  .scroll-lab .play-heading .section-description { font-size: 10px; }
  .scroll-lab .lab { grid-template-columns: 165px minmax(0, 1fr); gap: 45px; }
  .scroll-lab .lab-stage { padding: 8px 0 12px; }
  .scroll-lab .preview-body { padding: 12px 23px; }
  .scroll-lab .preview-nav { margin-bottom: 5px; }
  .scroll-lab .preview-grid h3 { margin: 4px 0 10px; font-size: 25px; }
  .scroll-lab .preview-sculpture { height: 130px; }
  .scroll-lab .lab-stage[data-step] .preview-sculpture .sculpture-rotor { scale: .8; }
  .scroll-lab .preview-modules { margin-top: 0; }
  .scroll-lab .preview-modules span { padding: 6px 10px; }
  .scroll-lab #preview-status { margin-top: 7px; min-height: 20px; margin-bottom: 2px; }
}
@media (max-width: 1050px) and (min-width: 701px) {
  .scroll-lab .lab { grid-template-columns: 155px minmax(0, 1fr); gap: 32px; }
  .scroll-lab .play-heading .section-description { max-width: 230px; }
  .scroll-lab .preview-body { padding-left: 20px; padding-right: 20px; }
  .scroll-lab .preview-grid { gap: 8px; }
}
@media (max-width: 700px) {
  .playground.scroll-lab { --lab-header: 68px; height: 220svh; }
  .scroll-lab .playground-pin { padding: 23px 0 18px; }
  .scroll-lab .playground-pin > .section-inner {
    width: 88%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 21px;
  }
  .scroll-lab .play-heading { display: block; }
  .scroll-lab .section-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .scroll-lab .play-heading h2 { font-size: 34px; line-height: 1.13; }
  .scroll-lab .play-heading .section-description { margin: 13px 0 0; font-size: 10px; }
  .scroll-lab .lab { display: grid; grid-template-columns: 1fr; gap: 15px; }
  .scroll-lab .lab-steps { gap: 16px; flex-direction: row; }
  .scroll-lab .lab-steps button { font-size: 18px; padding: 9px 0; }
  .scroll-lab .lab-steps button > span { font-size: 8px; margin-right: 8px; }
  .scroll-lab .lab-scroll-progress { margin-top: 12px; gap: 13px; }
  .scroll-lab #lab-progress-value { font-size: 9px; }
  .scroll-lab #lab-status { display: block; max-width: none; min-height: 17px; font-size: 10px; line-height: 1.7; margin: 8px 0 0; }
  .scroll-lab .lab-scroll-hint { display: none; }
  .scroll-lab .lab-stage { padding: 4px 0 16px; }
  .scroll-lab .preview-body { padding: 15px; }
  .scroll-lab .preview-nav { margin-bottom: 13px; }
  .scroll-lab .preview-grid { grid-template-columns: 1.25fr 1fr; gap: 8px; }
  .scroll-lab .preview-grid h3 { font-size: 23px; margin: 9px 0 14px; }
  .scroll-lab .preview-sculpture { height: 136px; perspective: 400px; }
  .scroll-lab .lab-stage[data-step] .preview-sculpture .sculpture-rotor { width: 105px; height: 120px; }
  .scroll-lab .sculpture-rotor > div { width: 89px; height: 89px; border-width: 16px; }
  .scroll-lab .sculpture-rotor > div:nth-child(2) { width: 78px; height: 78px; border-width: 15px; }
  .scroll-lab .sculpture-rotor > img { width: 43px; height: 46px; transform: translateZ(29px); }
  .scroll-lab .logo-pointer-hint { font-size: 6px; bottom: -1px; }
  .scroll-lab #preview-status { margin-bottom: 4px; min-height: 22px; }
  .scroll-lab .preview-modules { margin-top: 9px; }
  .scroll-lab .preview-modules span { padding: 8px 7px; font-size: 7px; }
  .scroll-lab .lab-axis { font-size: 6px; }
  .scroll-lab .demo-note { font-size: 8px; line-height: 1.6; margin: 0; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .scroll-lab .playground-pin { padding: 14px 0; }
  .scroll-lab .playground-pin > .section-inner { gap: 13px; }
  .scroll-lab .play-heading h2 { font-size: 29px; }
  .scroll-lab .section-eyebrow { margin-bottom: 7px; }
  .scroll-lab .play-heading .section-description { display: none; }
  .scroll-lab .lab { gap: 12px; }
  .scroll-lab .lab-steps button { padding: 7px 0; font-size: 16px; }
  .scroll-lab .lab-scroll-progress { margin-top: 9px; }
  .scroll-lab .preview-body { padding: 12px; }
  .scroll-lab .preview-nav { margin-bottom: 8px; }
  .scroll-lab .preview-grid h3 { font-size: 21px; margin: 7px 0 11px; }
  .scroll-lab .preview-sculpture { height: 117px; }
  .scroll-lab .preview-modules { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-lab *, .scroll-lab *::before, .scroll-lab *::after { transition: none !important; }
}