/* 진플로우 온보딩 — 몰입형 풀스크린 (모바일 기준, 데스크톱은 중앙 폭 고정) */

:root {
  --accent: #8b7cf6;
  --gold: #e8c462;        /* 금박 라인 (입력·선택지·사주판) */
  --gold-soft: #f3dc9a;
  --gold-line: rgba(232, 196, 98, 0.28);
  --ink: rgba(16, 14, 24, 0.55); /* 먹색 서책 바탕 */
  --bg: #08090d;
  --panel-bg: rgba(8, 9, 13, 0.72);
  --text: #f3f1ea;
  --text-dim: #9a96a8;
  --font: 'Noto Sans KR', system-ui, sans-serif;
  --font-brush: 'Song Myung', 'Noto Sans KR', serif; /* 제목용 명조 붓글씨풍 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #000;
  color: var(--text);
  font-family: var(--font);
  display: flex;
  justify-content: center;
  word-break: keep-all;        /* 한국어 어절 단위 줄바꿈 — 단어 중간에서 잘리지 않게 */
  overflow-wrap: break-word;
}

#stage {
  position: relative;
  width: min(100vw, 430px);
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- 씬 골격 ---------- */

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 패널은 항상 하단 (씬 아트가 있어도) */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.scene.on { opacity: 1; }

/* 배경 슬롯: 에셋 없을 땐 별빛 그라디언트 플레이스홀더 */
.slot-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.6), transparent),
    radial-gradient(ellipse at 50% 120%, #1b1440 0%, var(--bg) 60%);
}
.slot-bg video { width: 100%; height: 100%; object-fit: cover; }

/* 씬 아트 (캐릭터+배경 통합 일러스트) */
.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 캐릭터 슬롯: 에셋 없을 땐 실루엣 플레이스홀더 */
.slot-char {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}
.slot-char::before {
  content: '🌠';
  font-size: 96px;
  filter: grayscale(0.3) drop-shadow(0 0 24px rgba(139, 124, 246, 0.45));
  opacity: 0.85;
  margin-bottom: 8vh;
}
.slot-char video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot-char:has(video)::before { display: none; }

/* ---------- 별자리 진행 인디케이터 (답할 때마다 별이 켜지고 이어진다) ---------- */

.constellation {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  padding: 7px 16px 5px;
  border-radius: 999px;
  background: rgba(5, 6, 14, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.scene.on .constellation { opacity: 1; }
.constellation svg { display: block; width: 170px; height: 48px; overflow: visible; }

.cst-line {
  stroke: rgba(232, 196, 98, 0.5);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
}
.cst-line.lit { opacity: 1; }
.cst-line.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cstDraw 0.7s ease 0.25s forwards;
}
@keyframes cstDraw { to { stroke-dashoffset: 0; } }

.cst-star {
  fill: rgba(255, 255, 255, 0.32);
  transform-box: fill-box;
  transform-origin: center;
}
.cst-star.lit {
  fill: #e8c462;
  filter: drop-shadow(0 0 5px rgba(232, 196, 98, 0.9));
}
.cst-star.new { animation: cstPop 0.6s ease; }
@keyframes cstPop {
  0% { transform: scale(0.2); }
  55% { transform: scale(2); }
  100% { transform: scale(1); }
}
/* 지금 답하면 켜질 별: 은은하게 숨쉬기 */
.cst-star.pending { animation: cstPulse 1.8s ease-in-out infinite; }
@keyframes cstPulse {
  0%, 100% { fill: rgba(243, 220, 154, 0.22); }
  50% { fill: rgba(243, 220, 154, 0.75); }
}
/* 완성: 국자 닫는 선까지 그어지고 전체가 한 번 크게 빛난다 */
.constellation.done svg { animation: cstGlow 2s ease 0.9s; }
@keyframes cstGlow {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 10px rgba(232, 196, 98, 0.85)) brightness(1.5); }
}

/* 하단 패널 */
.panel {
  position: relative;
  z-index: 2;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(transparent, var(--panel-bg) 30%);
  /* 화면이 낮거나(짧은 폰·데스크톱 창) 키보드가 올라와 패널이 화면보다 길어지면 패널 전체가 스크롤된다 —
     예전엔 폼 안쪽만 56dvh로 잘라 스크롤해 마지막 줄(태어난 곳)이 '다음' 버튼 뒤에 숨은 것처럼 보였다 */
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ---------- 텍스트 ---------- */

.dialogue-text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.4px;
  min-height: 1.45em;
  cursor: pointer;
  text-wrap: pretty; /* 줄 끝 고아 단어 방지 — 마지막 줄에 한 단어만 남는 것 최소화 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6); /* 밝은 씬 아트 위 가독성 */
}
/* 금빛 글로우 자막 (theme.text = "glow-gold", 재물운·금오): 흰 글자에 금빛 번짐 — 열쇠·궤짝의 금빛과 한 톤 */
html[data-text="glow-gold"] .dialogue-text,
html[data-text="glow-gold"] .cinematic-text,
html[data-text="glow-gold"] .loading-note {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-shadow:
    0 0 6px rgba(255, 244, 214, 0.6),
    0 0 16px rgba(255, 214, 120, 0.65),
    0 0 32px rgba(217, 164, 65, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.9);
}
/* 글로우 자막 (theme.text = "glow", 궁합·소월): 흰 글자에 연보라 빛번짐 — 밤 배경 위에서 떠 보이게 */
html[data-text="glow"] .dialogue-text,
html[data-text="glow"] .cinematic-text,
html[data-text="glow"] .loading-note {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 16px rgba(196, 184, 255, 0.65),
    0 0 32px rgba(139, 124, 246, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.8);
}
/* 문장 묶음: 한 줄에 안 들어가면 문장 전체가 다음 줄로 (중간에서 안 잘림) */
.tw-sent { display: inline-block; max-width: 100%; }

.cinematic-text {
  font-size: 20px; /* 대사 자막(.dialogue-text)과 동일 위계 — 밝은 아트 위에서 묻히지 않게 */
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
  text-align: center;
  line-height: 1.55;
  padding-bottom: 8vh;
  text-wrap: balance; /* 중앙 정렬 자막은 줄 길이 균등하게 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.8);
}

/* ---------- 랜딩 ---------- */

.panel-landing { padding-bottom: 40px; }
.landing-title {
  font-family: var(--font-brush);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f9edc4 20%, var(--gold) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 8px rgba(232, 196, 98, 0.25));
}
.landing-sub {
  color: var(--text);
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6); /* 밝은 아트 위 가독성 */
}
.landing-proof {
  font-size: 13px;
  color: var(--accent-soft, #b3a7ff);
  background: rgba(16, 14, 24, 0.62); /* 먹색 받침 — 밝은 배경에서도 알약이 뜨지 않게 */
  border: 1px solid rgba(139, 124, 246, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  align-self: center;
  margin-top: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---------- 버튼 ---------- */

.btn-cta {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #6a5ae0);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn-cta:active { transform: scale(0.98); filter: brightness(1.1); }

.options { display: flex; gap: 10px; flex-wrap: wrap; }
.options-grid { max-height: 40dvh; overflow-y: auto; }
.options-backrow { display: flex; justify-content: flex-start; }
.options-backrow:empty { display: none; }

/* 선택지: 먹색 서책 조각 + 금박 라인 */
.btn-option {
  flex: 1 1 calc(50% - 5px);
  appearance: none;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 13px 16px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(180deg, rgba(24, 21, 34, 0.6), var(--ink));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  white-space: nowrap;
}
.btn-option.picked {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(232, 196, 98, 0.16), rgba(232, 196, 98, 0.07));
  box-shadow: 0 0 10px rgba(232, 196, 98, 0.18);
}

.btn-ghost {
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
  padding: 6px;
}
/* 토글형 ghost 버튼(예: "태어난 시간을 몰라요")이 선택된 상태 — 링크가 금박 알약으로 변해 선택이 분명히 보인다 */
.btn-ghost.picked {
  color: var(--gold-soft);
  text-decoration: none;
  border: 1px solid rgba(232, 196, 98, 0.45);
  border-radius: 6px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(232, 196, 98, 0.16), rgba(232, 196, 98, 0.07));
  box-shadow: 0 0 10px rgba(232, 196, 98, 0.18);
}

/* 시간 미상 선택 시 비활성화된 시/분 칸 — 더 이상 쓰지 않음이 보이게 */
.field-time:disabled { opacity: 0.35; }

/* 이전 단계로 (입력 구간 상단 좌측) */
.btn-back {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 14px;
  z-index: 3;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: rgba(8, 9, 13, 0.55);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.btn-back:active { transform: scale(0.96); }

.btn-skip {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: 14px;
  color: #d9d6e4;
  text-decoration: underline;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* 소리 토글 (우상단) */
.btn-sound {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 16, 0.55);
  backdrop-filter: blur(6px);
  color: #eee;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.btn-sound span { font-size: 12px; font-weight: 700; color: #f3dc9a; }
.btn-sound.muted { opacity: 0.75; }
.btn-sound.muted span { color: #cfcbd9; font-weight: 600; }
.btn-sound.blocked { border-color: rgba(243, 220, 154, 0.7); animation: sound-pulse 1.4s ease-in-out infinite; }
@keyframes sound-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 220, 154, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(243, 220, 154, 0); }
}

/* ---------- 입력 ---------- */

/* 입력창: 먹색 서책 + 금박 라인. focus 시 금박이 밝아진다 */
.field {
  appearance: none;
  width: 100%;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 15px 16px;
  font-family: var(--font);
  font-size: 16px;
  text-align: center;
  color: var(--text);
  background: linear-gradient(180deg, rgba(24, 21, 34, 0.6), var(--ink));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  caret-color: var(--gold);
}
.field:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(232, 196, 98, 0.2);
}
.field::placeholder { color: var(--text-dim); }
/* 고민 입력: 서책 괘선(가로줄) */
.field-area {
  min-height: 118px;
  text-align: left;
  resize: none;
  line-height: 28px;
  padding-top: 10px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(232, 196, 98, 0.12) 27px 28px),
    linear-gradient(180deg, rgba(24, 21, 34, 0.6), var(--ink));
  background-attachment: local, scroll; /* 괘선은 글과 같이 스크롤 */
}

.time-row { display: flex; align-items: center; gap: 10px; }

/* ---------- 한 화면 입력 폼 (form 씬) ---------- */
.form { display: flex; flex-direction: column; gap: 10px; } /* 잘라서 안쪽 스크롤하지 않는다 — 패널이 스크롤 */
.panel-form { padding-top: 64px; } /* 스크롤 맨 위에서 대사가 '이전' 버튼·별자리(위 60px) 아래에 오도록 */
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: -0.2px; }
.field-sm { padding: 11px 12px; font-size: 15px; }
/* 지역 선택 드롭다운 — 기본 select는 바탕이 흰색으로 떠서 글자가 묻힌다. 배경·글자·펼친 목록 색을 직접 지정하고 화살표를 그려 넣는다 */
select.field-sm {
  text-align: left;
  text-align-last: left;
  color-scheme: dark;
  color: var(--text);
  background-color: #16131f;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%),
    linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
select.field-sm option { background-color: #16131f; color: var(--text); }
select.field-sm:disabled { opacity: 0.45; cursor: default; }
select.field-sm option:checked { color: var(--gold-soft); }
.seg { display: flex; gap: 8px; }
.seg-btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: linear-gradient(180deg, rgba(24, 21, 34, 0.6), var(--ink));
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn.picked {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(232, 196, 98, 0.16), rgba(232, 196, 98, 0.07));
  box-shadow: 0 0 10px rgba(232, 196, 98, 0.18);
}
.time-row .seg-btn { flex: 0 0 auto; }
.field-time { flex: 1; }
.time-colon { font-weight: 900; }

.field-error {
  font-size: 13px;
  color: #ff6b81;
  min-height: 1em;
  text-align: center;
}

/* 서술형 입력 글자 수 카운터 (풀이 반영 한도 안내) */
.field-counter {
  margin: 4px 2px 0;
  font-size: 11.5px;
  color: rgba(232, 196, 98, .55);
  text-align: right;
}
.field-counter.full { color: #ff6b81; }

/* ---------- 사주판 ---------- */

/* ---------- 로딩 ---------- */

/* 로딩 씬의 유천 대사 — 다른 대사 자막(.dialogue-text)과 동일한 타이포로 통일 */
.loading-note {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.4px;
  text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
  margin-bottom: 14px;
}
.loading-step { font-size: 15px; font-weight: 600; }
.loading-pct { font-size: 13px; color: var(--text-dim); text-align: right; }
.bar-wrap {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #b3a7ff);
  transition: width 0.15s linear;
}

/* ---------- 서술형 입력 안내 (고민 칸): 입력창 안에 placeholder처럼, 첫 줄 금색 굵게 + 예시 연하게 ---------- */
.field-wrap { position: relative; }
.field-ph {
  position: absolute; left: 16px; right: 16px; top: 10px;
  pointer-events: none; text-align: left; line-height: 28px; /* 괘선과 줄 맞춤 */
}
.field-ph b { display: block; font-size: 15px; font-weight: 700; color: var(--gold); }
.field-ph span { display: block; font-size: 14px; color: rgba(231, 228, 242, 0.5); }
.field-ph[hidden] { display: none; }

/* ---------- 고민 칸 새 안내(실험 concern_v2): 칸 아래 안내 · 부드러운 되묻기 · 작은 건너뛰기 ---------- */
.field-sub { margin: -2px 2px 0; font-size: 12px; color: rgba(231, 228, 242, 0.55); text-align: left; }
.field-nudge { color: var(--gold-soft); }
.btn-skip-soft { font-size: 12.5px; color: rgba(231, 228, 242, 0.45); text-decoration: none; padding: 2px 6px 0; }
.btn-skip-soft:hover { text-decoration: underline; }