/* =========================================================
   SYNC-T 검사 진행 페이지 (intro / test / preview / calc / result)
   ========================================================= */

/* ── 라우터 로딩 / 공통 ── */
.st-route-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--txt-dim);
  font-size: var(--fz-sm);
}

/* ── App shell ── */
.st-app {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  min-height: 100vh;
}
@media (min-width: 768px) {
  .st-app { max-width: 720px; }
}

/* ── INTRO ── */
.st-page-intro {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-9);
}
/* 한 화면에 들어오게 컴팩트화 — 아이콘·여백·팁 카드 모두 축소 */
.st-intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  padding-top: var(--sp-3);
}
.st-intro-icon {
  font-size: 44px;
  filter: drop-shadow(0 4px 16px rgba(255, 138, 101, 0.4));
  margin-bottom: -4px;
}
.st-intro-title {
  letter-spacing: var(--tracking-tight);
  font-size: clamp(20px, 5.4vw, 26px);
  margin: 0;
}
.st-intro-subtitle {
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  font-size: var(--fz-md);
}
.st-intro-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--sp-3);
  justify-content: center;
  font-size: 12px;
  color: var(--txt-dim);
  margin: 0;
  padding: 0;
}
.st-intro-meta li { white-space: nowrap; }
.st-divider {
  width: 44px;
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--sp-1) auto;
}
.st-tips {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  padding: 0;
  margin: 0;
}
.st-tips li {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.st-tips strong {
  font-size: var(--fz-sm);
  color: var(--txt);
  display: block;
  margin-bottom: 2px;
}
.st-tips p {
  font-size: 12px;
  color: var(--txt-dim);
  line-height: 1.5;
  margin: 0;
}
.st-intro-foot {
  font-size: 11px;
  color: var(--txt-mute);
  margin-top: 0;
}
/* 시작하기 버튼 — sticky bottom으로 항상 가시권 */
.st-page-intro .st-btn-hero {
  margin-top: var(--sp-2);
  padding: 14px 32px;
}

/* ── TEST ── */
.st-page-test {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-8);
}
.st-test-header {
  padding-bottom: var(--sp-3);
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: var(--sp-3);
}
.st-test-header .st-progress-meta { grid-column: 2; }
.st-test-back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: var(--txt, #fff);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  grid-row: 1 / span 2;
}
.st-test-back:hover { background: rgba(255,255,255,0.12); transform: translateX(-2px); }
.st-test-back:active { transform: translateX(-2px) scale(0.94); }
.st-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: var(--fz-xs);
  color: var(--txt-dim);
}
.st-progress-num { font-family: var(--font-mono); }

.st-test-main {
  padding: var(--sp-5) 0;
}

.st-q-category {
  font-size: var(--fz-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-3);
}

.st-q-text {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
  margin-bottom: var(--sp-5);
  word-break: keep-all;
}

/* 강제결정·자극반응 강조 */
.st-test-main[data-qtype="forced_decision"] .st-q-text {
  color: var(--c-fire-burn);
}
.st-test-main[data-qtype="stimulus_reaction"] .st-q-text::before {
  content: '⚡ ';
}

/* 카운트다운 */
.st-countdown {
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.st-countdown-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 91, 60, 0.15);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.st-countdown-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb649, #ff5b3c);
  border-radius: var(--r-pill);
  transition: width 1s linear;
}
.st-countdown-num {
  font-family: var(--font-mono);
  font-size: var(--fz-md);
  font-weight: 800;
  color: var(--c-fire-burn);
  min-width: 56px;
  text-align: right;
}

/* 옵션 리스트 */
.st-options {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.st-option-row { width: 100%; }

.st-option-btn {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: left;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fz-md);
  line-height: var(--lh-snug);
  color: var(--txt);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  word-break: keep-all;
}
.st-option-btn:hover {
  background: var(--bg-glass-hi);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.st-option-btn:active { transform: scale(0.98); }
.st-option-btn.is-selected {
  background: linear-gradient(135deg, rgba(44, 95, 141, 0.4), rgba(255, 138, 101, 0.4));
  border-color: var(--c-ideal);
  box-shadow: 0 0 0 2px var(--c-ideal) inset, 0 12px 32px rgba(255, 138, 101, 0.3);
}

.st-option-key {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fz-sm);
  font-weight: 800;
  color: var(--txt-dim);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease-out);
}
.st-option-btn.is-selected .st-option-key {
  color: #fff;
  background: var(--c-ideal);
}

.st-option-label { flex: 1; }

.st-test-foot {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fz-xs);
  color: var(--txt-mute);
}

/* ── PREVIEW ── */
.st-page-preview {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-9);
}
.st-preview {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
}
.st-preview-icon {
  font-size: 64px;
  filter: drop-shadow(0 4px 16px rgba(255, 138, 101, 0.4));
}
.st-preview-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-5);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.st-preview-half-pentagon {
  width: 200px;
  height: 200px;
  margin: 0 auto var(--sp-4);
  position: relative;
}
.st-preview-orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--c-real), transparent 70%);
  filter: blur(16px);
  animation: float-1 8s ease-in-out infinite;
}
.st-preview-hint {
  font-size: var(--fz-md);
  color: var(--txt-dim);
  line-height: var(--lh-normal);
}
.st-preview-hint em {
  font-style: normal;
  color: var(--c-ideal);
  font-weight: 700;
}
.st-preview-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
}

/* ── CALCULATING ── */
.st-page-calc {
  padding-top: var(--sp-9);
}
.st-calc {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
}
.st-calc-icon {
  font-size: 80px;
  animation: float-1 4s ease-in-out infinite;
}
.st-calc-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fz-sm);
  color: var(--txt-dim);
  text-align: left;
  width: 100%;
  max-width: 280px;
}
.st-calc-steps li {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  animation: calc-step 4s ease-in-out infinite;
}
.st-calc-steps li:nth-child(1) { animation-delay: 0s; }
.st-calc-steps li:nth-child(2) { animation-delay: 0.7s; }
.st-calc-steps li:nth-child(3) { animation-delay: 1.4s; }
.st-calc-steps li:nth-child(4) { animation-delay: 2.1s; }
@keyframes calc-step {
  0%, 80%, 100% { opacity: 0.4; transform: translateX(0); }
  10%, 30% { opacity: 1; transform: translateX(4px); }
}

/* ── RESULT (placeholder) ── */
.st-page-result { padding-top: var(--sp-5); padding-bottom: var(--sp-9); }
.st-result-stub {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
}
.st-result-stub .st-pentagon-host { width: 280px; max-width: 70vw; }
.st-result-summary {
  width: 100%;
  text-align: left;
  font-size: var(--fz-sm);
}
.st-result-summary pre {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--txt-dim);
  max-height: 240px;
  overflow: auto;
}
.st-result-actions {
  display: flex;
  gap: var(--sp-3);
}

/* ── RMET 이미지 문항 ── */
.st-q-image {
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.st-q-image[hidden] { display: none; }
.st-q-image img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md, 12px);
  border: 1px solid rgba(255,255,255,0.12);
  background: #0a0a0a;
  filter: grayscale(100%) contrast(1.05);
}
.st-q-image-caption {
  font-size: var(--fz-xs, 12px);
  color: var(--txt-dim, rgba(255,255,255,0.55));
  letter-spacing: 0.02em;
}