/**
 * Stage 2 Pattern — space-station pastel UI
 */
:root {
  --s2-ink: #1a2b49;
  --s2-muted: #64748b;
  --s2-cream: #f7f9fc;
  --s2-sky: #dff0ff;
  --s2-lavender: #ebe8ff;
  --s2-mint: #dff8f0;
  --s2-coral: #ff6b4a;
  --s2-glow: #60a5fa;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  color: var(--s2-ink);
  background:
    radial-gradient(circle at 10% 20%, rgba(223, 240, 255, 0.9), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(235, 232, 255, 0.8), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(223, 248, 240, 0.55), transparent 42%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 28%, #f7f9fc 28%);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.s2-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  min-height: 100vh;
}

.s2-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.s2-nav a {
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.s2-hero {
  text-align: center;
  color: #f8fafc;
  margin-bottom: 16px;
}

.s2-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 8px;
}

.s2-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 900;
}

.s2-hero p {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.5;
}

.s2-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  padding: 18px 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.s2-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--s2-muted);
  margin-bottom: 10px;
}

.s2-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.s2-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
}

.s2-dot.on {
  background: var(--s2-glow);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

.s2-dot.done { background: #34d399; }

.s2-door {
  position: relative;
  height: 56px;
  margin: 0 auto 14px;
  max-width: 280px;
  border-radius: 14px;
  background: linear-gradient(90deg, #334155, #1e293b);
  overflow: hidden;
  border: 3px solid #0f172a;
}

.s2-door-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, #475569, #334155);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.s2-door-panel.left { left: 0; border-right: 2px solid #0f172a; }
.s2-door-panel.right { right: 0; border-left: 2px solid #0f172a; }

.s2-door.is-open .s2-door-panel.left { transform: translateX(-105%); }
.s2-door.is-open .s2-door-panel.right { transform: translateX(105%); }

.s2-door.is-open::after {
  content: "";
  position: absolute;
  inset: 8px 20%;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.55), transparent);
  animation: s2-beam 1.2s ease infinite;
}

.s2-title {
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 6px;
}

.s2-prompt {
  text-align: center;
  font-size: clamp(0.95rem, 3vw, 1.05rem);
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 14px;
}

.s2-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

@media (max-width: 560px) {
  .s2-slots {
    grid-template-columns: 1fr 1fr;
  }
}

.s2-slot {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 8px 6px 10px;
  min-height: 110px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.s2-slot.is-target {
  border-style: solid;
  border-color: var(--s2-glow);
  background: linear-gradient(165deg, #eff6ff, #fff);
  cursor: pointer;
}

.s2-slot.is-drop {
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.35);
}

.s2-slot.is-glow {
  border-color: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25), 0 0 24px rgba(96, 165, 250, 0.45);
  animation: s2-pulse 0.8s ease;
}

.s2-slot-no {
  display: block;
  font-size: 10px;
  font-weight: 900;
  color: var(--s2-muted);
  text-align: center;
  margin-bottom: 6px;
}

.s2-slot-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}

.s2-slot-empty {
  font-size: 1.5rem;
  font-weight: 900;
  color: #94a3b8;
}

.s2-palette {
  background: linear-gradient(165deg, #f8fafc, #eef2ff);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  margin-bottom: 12px;
}

.s2-palette.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

.s2-dial-row {
  margin-bottom: 12px;
}

.s2-dial-row:last-child { margin-bottom: 0; }

.s2-dial-label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--s2-muted);
  margin-bottom: 8px;
}

.s2-dial-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.s2-dial-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 3px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.s2-dial-btn.is-active {
  border-color: var(--s2-ink);
  box-shadow: 0 0 0 3px rgba(26, 43, 73, 0.12);
  transform: scale(1.06);
}

.s2-color-red { background: #ef4444 !important; }
.s2-color-blue { background: #3b82f6 !important; }
.s2-color-yellow { background: #f59e0b !important; }

.s2-count-slider {
  width: 100%;
  accent-color: var(--s2-glow);
}

.s2-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.s2-preview {
  min-width: 120px;
  min-height: 90px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.s2-preview.is-dragging {
  opacity: 0.7;
  cursor: grabbing;
}

.s2-preview-hint {
  font-size: 12px;
  font-weight: 800;
  color: var(--s2-muted);
}

.s2-feedback {
  text-align: center;
  min-height: 2.8em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 8px;
}

.s2-feedback.is-ok {
  background: linear-gradient(135deg, #ecfdf5, #dff8f0);
  color: #065f46;
}

.s2-feedback.is-bad {
  background: linear-gradient(135deg, #fff1f2, #ffe8dc);
  color: #9f1239;
}

.s2-reflect {
  margin: 10px 0 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ebe8ff, #dff0ff);
}

.s2-reflect-q {
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
}

.s2-reflect-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s2-reflect-btn {
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  color: var(--s2-ink);
}

.s2-reflect-btn.is-correct {
  border-color: #34d399;
  background: #ecfdf5;
}

.s2-reflect-btn.is-wrong {
  border-color: #fb7185;
  background: #fff1f2;
}

.s2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.s2-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.s2-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.s2-btn-ghost {
  background: #fff;
  color: var(--s2-ink);
  border: 2px solid #e2e8f0;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.s2-done {
  display: none;
  text-align: center;
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--s2-lavender), var(--s2-sky));
}

.s2-done.show {
  display: block;
  animation: s2-pop 0.4s ease;
}

.s2-done h2 { margin: 0 0 6px; }
.s2-done p { margin: 0 0 12px; font-weight: 700; color: var(--s2-muted); font-size: 14px; }

.s2-note {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--s2-muted);
  line-height: 1.5;
}

.s2-note a { color: #3b82f6; font-weight: 800; }

.is-rattle {
  animation: s2-rattle 0.45s ease;
}

@keyframes s2-rattle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@keyframes s2-beam {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes s2-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes s2-pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .s2-door-panel,
  .s2-door.is-open::after,
  .is-rattle,
  .s2-slot.is-glow,
  .s2-done.show {
    animation: none !important;
    transition: none !important;
  }
  .s2-door.is-open .s2-door-panel.left,
  .s2-door.is-open .s2-door-panel.right {
    transform: none;
    opacity: 0.15;
  }
}

/* —— Stage1-style visual boost —— */
.s2-decor{pointer-events:none;position:fixed;inset:0;z-index:0;overflow:hidden}
.s2-decor span{position:absolute;font-size:clamp(1.3rem,3.5vw,2rem);opacity:.45;animation:s2-drift 10s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.s2-decor span:nth-child(1){left:5%;top:14%}
.s2-decor span:nth-child(2){left:90%;top:20%;animation-delay:-2s}
.s2-decor span:nth-child(3){left:12%;top:78%;animation-delay:-4s}
.s2-decor span:nth-child(4){left:80%;top:72%;animation-delay:-1s}
.s2-wrap{position:relative;z-index:1}
.s2-card{border:3px solid rgba(255,255,255,.95)!important;box-shadow:0 18px 48px rgba(15,23,42,.18),0 0 0 6px rgba(96,165,250,.15)!important}
.s2-prompt{font-size:clamp(1.1rem,3.4vw,1.3rem)!important;font-weight:900!important;padding:12px 16px;border-radius:18px;background:linear-gradient(135deg,#eff6ff,#e0e7ff);border:2px dashed #60a5fa;color:#1e3a8a}
.s2-slot{animation:s2-item-pop .45s cubic-bezier(.34,1.56,.64,1) both}
.s2-slot:nth-child(1){animation-delay:.02s}.s2-slot:nth-child(2){animation-delay:.06s}.s2-slot:nth-child(3){animation-delay:.1s}.s2-slot:nth-child(4){animation-delay:.14s}
.s2-slot.is-target{box-shadow:0 0 0 4px rgba(255,107,74,.35)}
.s2-dial-btn{transition:transform .15s,box-shadow .15s}
.s2-dial-btn:hover,.s2-dial-btn.is-on{transform:translateY(-3px) scale(1.05)}
.s2-preview{animation:s2-float 2.8s ease-in-out infinite;filter:drop-shadow(0 10px 16px rgba(26,43,73,.18))}
.s2-feedback.is-ok{border:2px solid #4ade80;background:linear-gradient(135deg,#dcfce7,#bbf7d0)!important}
.s2-feedback.is-bad{border:2px solid #fb7185;background:linear-gradient(135deg,#ffe4e6,#ffedd5)!important}
.s2-btn{box-shadow:0 10px 24px rgba(255,107,74,.32)!important}
.s2-hero h1{font-size:clamp(1.5rem,5vw,2rem)!important}
@keyframes s2-drift{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(8deg)}}
@keyframes s2-item-pop{from{opacity:0;transform:scale(.5) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes s2-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.s2-decor span,.s2-slot,.s2-preview{animation:none!important}}