/* QQQ depth study: a physical device and tactile UI, without distorting the content. */
:root,[data-theme="light"]{
  --depth-edge:rgba(255,255,255,.95);
  --depth-card:0 3px 0 #e1dfe7,0 5px 8px rgba(30,26,53,.06),0 18px 29px -13px rgba(33,27,59,.3);
  --depth-card-hover:0 3px 0 #dddbe5,0 7px 11px rgba(30,26,53,.06),0 20px 30px -14px rgba(33,27,59,.31);
  --depth-frame:4px 4px 0 #13151e,9px 10px 0 #363947,15px 19px 15px rgba(26,23,48,.16),27px 47px 72px rgba(26,23,48,.27),inset 1px 1px 0 rgba(255,255,255,.3);
}
[data-theme="dark"]{
  --depth-edge:rgba(255,255,255,.13);
  --depth-card:0 3px 0 #101117,0 6px 9px rgba(0,0,0,.22),0 20px 30px -12px rgba(0,0,0,.61);
  --depth-card-hover:0 3px 0 #101117,0 8px 12px rgba(0,0,0,.23),0 21px 32px -13px rgba(0,0,0,.64);
  --depth-frame:4px 4px 0 #05060b,9px 10px 0 #3c3e4a,15px 19px 15px rgba(0,0,0,.35),27px 47px 72px rgba(0,0,0,.57),inset 1px 1px 0 rgba(255,255,255,.18);
}

/* Only the opening question changes face; all other copy retains its prior font. */
.screen-title.question-title{
  font-family:"IBM Plex Sans KR","Noto Sans KR",sans-serif;
  font-size:27px;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.33;
}

/* A quiet instrument-grid behind the device, rather than a decorative neon field. */
.stage{position:relative;isolation:isolate}
.stage::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:36px -12px 55px;
  border:1px solid color-mix(in srgb,var(--color-violet) 13%,transparent);
  border-radius:32px;
  background-color:color-mix(in srgb,var(--color-violet-wash) 24%,var(--color-bg));
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--color-violet) 7%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--color-violet) 7%,transparent) 1px,transparent 1px);
  background-size:24px 24px;
  box-shadow:inset 0 1px 0 var(--depth-edge),0 18px 48px -40px rgba(37,31,74,.35);
}
[data-theme="dark"] .stage::before{
  background-color:color-mix(in srgb,var(--color-violet-wash) 55%,var(--color-bg));
  border-color:color-mix(in srgb,var(--color-violet) 23%,transparent);
}
.stage-topline{position:relative}
.phone-frame{
  border-color:#2d303b;
  box-shadow:var(--depth-frame);
  transform:perspective(1500px) rotateY(-5deg) rotateX(1.2deg) translateZ(12px);
  transform-origin:50% 45%;
  transition:box-shadow .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.phone-frame::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:35px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 3px 0 4px rgba(255,255,255,.07),inset -3px 0 5px rgba(0,0,0,.16);
}
@media(hover:hover) and (min-width:1141px){
  .stage:has(.phone-frame:hover) .phone-frame{
    transform:perspective(1500px) rotateY(-2.5deg) rotateX(.5deg) translateZ(19px);
    box-shadow:5px 6px 0 #13151e,11px 12px 0 #363947,17px 22px 18px rgba(26,23,48,.18),31px 54px 85px rgba(26,23,48,.29);
  }
  [data-theme="dark"] .stage:has(.phone-frame:hover) .phone-frame{
    box-shadow:5px 6px 0 #05060b,11px 12px 0 #484a58,17px 22px 18px rgba(0,0,0,.42),31px 54px 85px rgba(0,0,0,.6);
  }
}
.phone-appbar{
  position:relative;z-index:2;
  box-shadow:0 5px 14px -12px rgba(35,31,62,.35);
}
.phone-actions{
  box-shadow:0 -10px 20px -16px rgba(35,31,62,.32),inset 0 1px 0 var(--depth-edge);
}
.phone-progress{box-shadow:inset 0 1px 2px rgba(35,31,62,.12)}
.phone-progress>div{box-shadow:0 0 6px color-mix(in srgb,var(--color-primary) 55%,transparent)}

.phone-content .card,
.phone-content .model-card,
.phone-content .variant-card{
  box-shadow:var(--depth-card),inset 0 1px 0 var(--depth-edge);
}
.phone-content button.card,
.phone-content .model-card,
.phone-content .variant-card{
  transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive),background var(--transition-interactive);
}
@media(hover:hover){
  .phone-content button.card:not(:disabled):hover,
  .phone-content .model-card:hover,
  .phone-content .variant-card:hover{
    transform:translateY(-1px);
    box-shadow:var(--depth-card-hover),inset 0 1px 0 var(--depth-edge);
  }
}
.phone-content button.card:not(:disabled):active,
.phone-content .model-card:active,
.phone-content .variant-card:active{
  transform:translateY(1px);
  box-shadow:0 1px 2px rgba(30,26,53,.1),inset 0 2px 5px rgba(30,26,53,.07);
}
.phone-content .card.active,
.phone-content .model-card.active,
.phone-content .variant-card.active{
  box-shadow:0 0 0 1px var(--color-violet),0 4px 0 color-mix(in srgb,var(--color-violet) 42%,var(--color-border)),0 12px 17px rgba(33,27,59,.12),0 25px 36px -14px rgba(33,27,59,.36),inset 0 1px 0 var(--depth-edge);
}
.phone-content button.card.active:hover,
.phone-content .model-card.active:hover,
.phone-content .variant-card.active:hover{
  box-shadow:0 0 0 1px var(--color-violet),0 4px 0 color-mix(in srgb,var(--color-violet) 42%,var(--color-border)),0 12px 17px rgba(33,27,59,.12),0 25px 36px -14px rgba(33,27,59,.36),inset 0 1px 0 var(--depth-edge);
}
[data-theme="dark"] .phone-content .card.active,
[data-theme="dark"] .phone-content .model-card.active,
[data-theme="dark"] .phone-content .variant-card.active,
[data-theme="dark"] .phone-content button.card.active:hover,
[data-theme="dark"] .phone-content .model-card.active:hover,
[data-theme="dark"] .phone-content .variant-card.active:hover{
  box-shadow:0 0 0 1px var(--color-violet),0 4px 0 #565075,0 13px 20px rgba(0,0,0,.43),0 25px 40px -12px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.18);
}
.select-card .select-icon{
  transform:perspective(160px) rotateY(-12deg) rotateX(7deg);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--color-violet) 12%,var(--color-border)),inset 0 1px 0 var(--depth-edge),0 7px 10px rgba(32,28,56,.17);
}
.select-card[data-action="deliverable"] .select-icon{
  transform:none;
  background:#fff8ed;
  border:1px solid #eadac1;
  color:#a66c2f;
  box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(90,55,20,.09);
}
.select-card[data-action="deliverable"] .select-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.select-card[data-action="deliverable"] .select-icon .accent{
  fill:#efd2a2;
  stroke:currentColor;
}
[data-theme="dark"] .select-card[data-action="deliverable"] .select-icon{
  background:#382e24;
  border-color:#6a5138;
  color:#f0bc7f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 2px 5px rgba(0,0,0,.25);
}
[data-theme="dark"] .select-card[data-action="deliverable"] .select-icon .accent{
  fill:#8b5e30;
}
.primary-btn{
  box-shadow:0 5px 0 #bc7c32,0 13px 20px -10px rgba(143,88,20,.67);
  transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),background var(--transition-interactive);
}
.primary-btn:not(:disabled):active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #bc7c32,0 4px 9px -7px rgba(143,88,20,.5);
}
.primary-btn:disabled{
  box-shadow:none;
  transform:none;
}
.field input,.field select,.field textarea{
  box-shadow:inset 0 2px 4px rgba(35,31,62,.055),0 1px 0 var(--depth-edge);
}
.draft,.campaign-preview,.media-cover{
  box-shadow:0 4px 0 color-mix(in srgb,var(--color-violet) 20%,var(--color-border)),0 11px 13px rgba(33,27,59,.11),0 24px 32px -16px rgba(33,27,59,.44);
}
.future-format{
  box-shadow:inset 0 1px 0 var(--depth-edge),0 5px 11px -10px rgba(33,27,59,.23);
}

@media(max-width:760px){
  .stage::before{inset:5px 8px 42px}
  .phone-frame{transform:none}
}
@media(max-width:430px){
  .stage::before{display:none}
  .phone-frame{box-shadow:none;border:0;transform:none}
  .phone-frame::before{display:none}
  .phone-screen{background:var(--color-surface)}
  .screen-title.question-title{font-size:26px}
}
@media(max-width:340px){
  .screen-title.question-title{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .phone-frame,.phone-content button.card,.phone-content .model-card,.phone-content .variant-card,.primary-btn{transition-duration:.01ms}
}