/* BEAUWHEEL real-frame wheel — extends ai-preview.css tokens */
.wheel-stage { margin-top: clamp(50px, 7vw, 80px); }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.portrait { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #111; aspect-ratio: 3 / 4; }
.portrait .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s ease; }
.portrait .frame.is-visible { opacity: 1; }
.portrait figcaption { position: absolute; z-index: 2; bottom: 14px; left: 14px; padding: 8px 12px; border: 1px solid rgba(216,242,51,.5); border-radius: 999px; background: rgba(9,9,9,.78); color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .06em; backdrop-filter: blur(10px); }
.frame-tag { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 6px 9px; border-radius: 999px; background: rgba(9,9,9,.65); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; backdrop-filter: blur(8px); }

.controls { display: grid; gap: 20px; }
.dial-wrap { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.dial { position: relative; width: min(240px, 60vw); margin: 6px auto 18px; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; outline: none; }
.dial:focus-visible { box-shadow: 0 0 0 3px rgba(216,242,51,.45); }
.dial:active { cursor: grabbing; }
.dial-ring { position: absolute; inset: 0; border: 1px solid rgba(216,242,51,.4); border-radius: 50%; background: radial-gradient(circle at 50% 18%, rgba(216,242,51,.1), transparent 55%), #131313; transition: transform .28s cubic-bezier(.3, 1.4, .5, 1); }
.dial-tick { position: absolute; top: 6px; left: 50%; width: 3px; height: 14px; border-radius: 2px; background: rgba(245,244,239,.35); transform-origin: 50% calc(min(240px, 60vw) / 2 - 6px); transform: translateX(-50%) rotate(var(--a)); }
.dial-knob { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px rgba(216,242,51,.55); }
.dial-knob span { position: absolute; inset: 5px; border-radius: 50%; background: #111; }
.dial-center { position: absolute; inset: 26%; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 1px solid var(--line); background: #0d0d0d; pointer-events: none; }
.dial-center em { font-style: normal; font-size: 21px; font-weight: 900; letter-spacing: -.04em; }
.dial-center small { margin-top: 3px; color: var(--lime); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.dial-stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dial-stop { padding: 11px 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; transition: all .2s; }
.dial-stop:hover { border-color: rgba(216,242,51,.7); color: var(--paper); }
.dial-stop.is-active { border-color: var(--lime); background: var(--lime); color: #111; }
#depthBlock.is-muted { opacity: .38; }
.wheel-cta { text-decoration: none; }
.wheel-note { margin: -6px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 860px) {
  .stage-grid { grid-template-columns: 1fr; }
  .dial { width: min(220px, 64vw); }
  .dial-tick { transform-origin: 50% calc(min(220px, 64vw) / 2 - 6px); }
}
.area-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.area-tab { padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 900; letter-spacing: -.02em; transition: all .2s; }
.area-tab:hover { border-color: rgba(216,242,51,.7); color: var(--paper); }
.area-tab.is-active { border-color: var(--lime); background: var(--lime); color: #111; }

/* v2 — 내 사진으로 시작하기 대형 CTA */
.start-mine {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 20px auto 4px; padding: 17px 30px; max-width: 430px;
  border-radius: 999px; background: var(--lime, #d8f233); color: #0a0a0a;
  font-size: 17px; font-weight: 900; text-decoration: none; letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(216, 242, 51, 0.28);
}
.start-mine:active { transform: scale(0.98); }