/* ═══════════════════════════════════════════════════════════
   화면 구조 — 입력 화면, 굿판 화면, 폼, 버튼
   ═══════════════════════════════════════════════════════════ */

.shrine {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  padding: 6vh 20px 12vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 화면 전환 ───────────────────────────────────────────── */
.screen { display: none; }
.screen--active {
  display: block;
  animation: screen-in 0.7s ease-out both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 제목 ────────────────────────────────────────────────── */
.title {
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.1;
}

.title__sub {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold);
  margin-bottom: 10px;
}

.title__main {
  display: block;
  font-family: var(--font-brush);
  font-size: clamp(3rem, 12vw, 4.5rem);
  color: var(--white-jade);
  text-shadow: 0 0 24px rgba(230, 57, 70, 0.5),
               0 0 60px rgba(212, 160, 23, 0.25);
}

.tagline {
  text-align: center;
  color: var(--text-dim);
  font-size: 1rem;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

/* ── 폼 ──────────────────────────────────────────────────── */
.form {
  background: linear-gradient(180deg,
              rgba(31, 18, 21, 0.85) 0%, rgba(10, 6, 7, 0.9) 100%);
  border: 1px solid rgba(212, 160, 23, 0.28);
  border-radius: 3px;
  padding: 28px 24px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7),
              inset 0 0 60px rgba(179, 18, 31, 0.06);
}

.field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.field {
  flex: 1;
  min-width: 0;    /* 이게 없으면 좁은 화면에서 숫자 입력칸이 안 줄어들어
                      행이 통째로 화면 밖으로 넘친다 (flex 기본값 함정) */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--wide { flex: 2; }

.field__label {
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.15em;
}

.field input,
.field select {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.field input::placeholder { color: rgba(168, 153, 138, 0.4); }

.field input:focus,
.field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 20px rgba(212, 160, 23, 0.2);
}

.field select option {
  background: var(--ink-2);
  color: var(--text);
}

/* 숫자 입력의 스피너는 분위기를 깬다 */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="number"] { -moz-appearance: textfield; }

/* 입력 칸 밑에 붙는 설명 */
.field-hint {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: -8px 0 18px;
  padding-left: 2px;
}

/* ── 토글 (양력/음력, 남/여) ─────────────────────────────── */
.toggle-group {
  flex: 1;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toggle-group > legend { padding: 0; }

.toggle-group {
  position: relative;
}

.toggle-group .toggle {
  display: inline-block;
}

/* legend 밑에 버튼 두 개를 나란히 */
.toggle-group::after { content: ""; display: block; }

.toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.toggle-group > legend { grid-column: 1 / -1; }

.toggle input { position: absolute; opacity: 0; pointer-events: none; }

.toggle span {
  display: block;
  text-align: center;
  padding: 11px 8px;
  font-size: 0.92rem;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 160, 23, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.25s;
}

.toggle input:checked + span {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-color: var(--gold-soft);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(212, 160, 23, 0.4);
}

.toggle input:focus-visible + span {
  outline: 2px solid var(--red-bright);
  outline-offset: 2px;
}

/* ── 체크박스 ────────────────────────────────────────────── */
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 18px;
  cursor: pointer;
}

.checkbox input { accent-color: var(--red); width: 16px; height: 16px; }

/* ── 무당 고르기 ─────────────────────────────────────────── */
.face-pick {
  border: none;
  margin-bottom: 18px;
}

.face-pick > legend {
  padding: 0;
  margin-bottom: 8px;
}

.face-pick__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.face-opt input { position: absolute; opacity: 0; pointer-events: none; }

.face-opt__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 160, 23, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.25s;
}

.face-opt__card img {
  width: 66px;                     /* 인물 상반신이 크게 보이게 */
  image-rendering: pixelated;
  /* 세로가 긴 원본(48x72)에서 위쪽 상반신만 보여준다 */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}

.face-opt__name {
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.face-opt input:checked + .face-opt__card {
  border-color: var(--gold);
  background: rgba(212, 160, 23, 0.12);
  box-shadow: 0 0 16px rgba(212, 160, 23, 0.25);
}

.face-opt input:checked + .face-opt__card .face-opt__name {
  color: var(--gold-soft);
  font-weight: 700;
}

.face-opt input:focus-visible + .face-opt__card {
  outline: 2px solid var(--red-bright);
  outline-offset: 2px;
}

/* ── 에러 ────────────────────────────────────────────────── */
.form-error {
  color: var(--red-bright);
  font-size: 0.88rem;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(179, 18, 31, 0.12);
  border-left: 3px solid var(--red);
}

/* ── 주 버튼 ─────────────────────────────────────────────── */
.btn-main {
  width: 100%;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--white-jade);
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 100%);
  border: 1px solid var(--gold);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.3s;
  box-shadow: 0 0 24px rgba(179, 18, 31, 0.4);
}

.btn-main:hover {
  box-shadow: 0 0 40px rgba(230, 57, 70, 0.65);
  transform: translateY(-1px);
}

.btn-main:active { transform: translateY(1px); }

/* 버튼 위로 훑고 지나가는 빛 — 신기(神氣) */
.btn-main::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, 0.28), transparent);
  animation: sheen 3.5s ease-in-out infinite;
}

@keyframes sheen {
  0%, 60% { left: -100%; }
  100%    { left: 160%; }
}

/* ── 보조 버튼 ───────────────────────────────────────────── */
/* ── 조작 버튼 — 한 줄 팻말 바 ───────────────────────────── */
/* 낱개 버튼 네 개가 흩어져 있으면 산만하다. 금테 하나에 네 칸을
   나눠 담아 "조작부는 여기 하나"로 읽히게 한다. 모바일에선 말풍선
   바로 아래(엄지 닿는 곳), 데스크톱 무대에선 무당 옆 세로 팻말. */
.controls {
  display: flex;
  margin: 20px auto 0;
  max-width: 480px;
  background: rgba(16, 9, 10, 0.85);
  border: 1px solid rgba(212, 160, 23, 0.35);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.btn-ghost {
  flex: 1;
  min-width: 0;
  padding: 13px 4px;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(212, 160, 23, 0.22);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-ghost:first-child { border-left: none; }

.btn-ghost:hover,
.btn-ghost:active {
  color: var(--ink);
  background: var(--gold);
}

/* ── 인앱 브라우저 경고 ──────────────────────────────────── */
.inapp-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;                      /* 모든 오버레이보다 위 */
  padding: 14px 16px;
  background: rgba(20, 11, 13, 0.96);
  border: 1px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.inapp-notice p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text);
  text-wrap: balance;
}

.inapp-notice strong { color: var(--gold-soft); }

.inapp-notice button {
  margin-top: 10px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid rgba(212, 160, 23, 0.3);
  border-radius: 3px;
  cursor: pointer;
}

/* ── 음소거 버튼 ─────────────────────────────────────────── */
.mute-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 40;                      /* 로딩 오버레이(50) 아래 */
  width: 46px;
  height: 46px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold);
  background: rgba(10, 6, 7, 0.75);
  border: 1px solid rgba(212, 160, 23, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

.mute-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(212, 160, 23, 0.35);
}

/* 음소거 중엔 붉게 — 꺼져 있다는 게 한눈에 보이게 */
.mute-btn[aria-pressed="true"] {
  color: var(--red-bright);
  border-color: rgba(230, 57, 70, 0.55);
}

/* ── 목소리 강등 안내 ────────────────────────────────────── */
.voice-notice {
  max-width: 560px;
  margin: 10px auto 0;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
  color: var(--text-dim);
  background: rgba(212, 160, 23, 0.07);
  border: 1px dashed rgba(212, 160, 23, 0.3);
  border-radius: 2px;
  text-wrap: balance;
}

/* ── 예상 질문 칩 ────────────────────────────────────────── */
.followups {
  max-width: 560px;
  margin: 16px auto 0;
  animation: screen-in 0.5s ease-out both;
}

.followups__label {
  font-size: 0.85rem;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.followups__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.followup-chip {
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--white-jade);
  background: rgba(179, 18, 31, 0.18);
  border: 1px solid rgba(230, 57, 70, 0.45);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.followup-chip:hover {
  background: var(--red);
  border-color: var(--red-bright);
  box-shadow: 0 0 16px rgba(230, 57, 70, 0.4);
}

/* ── 사주팔자 여덟 글자 — 목간(나무패) 넉 장 ─────────────── */
/* 신당에 걸린 명패처럼: 어두운 나무 바탕, 위에 오행색 매듭 홈,
   먹띠+실선 두 겹 테. 오행색은 --oh 변수 하나로 흘러들어
   매듭·한자 그림자·십신 글씨가 같은 색 계열로 맞춰진다. */
.palja {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 34px;
}

.pillar {
  --oh: rgba(212, 160, 23, 0.6);      /* 기본값 — data-ohaeng이 덮는다 */
  position: relative;
  text-align: center;
  padding: 20px 6px 14px;
  background: linear-gradient(180deg,
              rgba(30, 18, 15, 0.92) 0%, rgba(13, 7, 8, 0.94) 100%);
  border: 1px solid rgba(212, 160, 23, 0.30);
  border-radius: 3px 3px 7px 7px;
  box-shadow:
    inset 0 0 0 3px rgba(10, 6, 7, 0.85),
    inset 0 0 0 4px rgba(212, 160, 23, 0.16),
    inset 0 -18px 30px rgba(0, 0, 0, 0.45),
    0 6px 16px rgba(0, 0, 0, 0.5);
  /* js가 --i를 넣어 순서대로 나타나게 한다 */
  animation: pillar-in 0.6s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.14s);
}

/* 위쪽 매듭 홈 — 오행색이 여기서 제일 진하게 드러난다 */
.pillar::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: var(--oh);
  box-shadow: 0 0 10px var(--oh);
}

@keyframes pillar-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pillar__name {
  font-size: 0.74rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 2px;
}

.pillar__sub {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.pillar__hanja {
  font-family: var(--font-brush);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--white-jade);
  text-shadow: 0 0 18px var(--oh);
}

.pillar__kr {
  font-size: 0.82rem;
  color: var(--text);
  margin-top: 8px;
}

.pillar__sipsin {
  display: inline-block;
  font-size: 0.66rem;
  color: var(--red-bright);
  border: 1px solid rgba(230, 57, 70, 0.4);
  border-radius: 10px;
  padding: 2px 9px;
  margin-top: 8px;
}

/* 오행별 색 — 전통 오방색 대응 (목청·화적·토황·금백·수흑→청남) */
.pillar[data-ohaeng="목"] { --oh: rgba(76, 160, 106, 0.85); }
.pillar[data-ohaeng="화"] { --oh: rgba(230, 57, 70, 0.85); }
.pillar[data-ohaeng="토"] { --oh: rgba(212, 160, 23, 0.85); }
.pillar[data-ohaeng="금"] { --oh: rgba(216, 211, 200, 0.8); }
.pillar[data-ohaeng="수"] { --oh: rgba(74, 138, 181, 0.85); }

/* ── 만세력 계산 내역 ────────────────────────────────────── */
/* 앱의 신뢰 근거다: "이 여덟 글자가 어떻게 나왔는가".
   세 묶음(태어난 때 → 타고난 것 → 대운)으로 정리하고, 오행은 숫자
   나열 대신 색 알약으로 — 없는 오행은 흐려서 설명 없이도 보인다. */
.detail {
  margin-top: 26px;
  border: 1px solid rgba(212, 160, 23, 0.28);
  border-radius: 4px;
  background: linear-gradient(180deg,
              rgba(24, 14, 12, 0.9) 0%, rgba(12, 7, 8, 0.92) 100%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
  list-style: none;                 /* 기본 ▶ 마커 제거 */
  transition: background 0.2s;
}

.detail summary::-webkit-details-marker { display: none; }

.detail summary:hover { background: rgba(212, 160, 23, 0.07); }

/* 펼침 표시 — 오른쪽 갈고리가 열림에 따라 돈다 */
.detail summary::after {
  content: '❯';
  font-size: 0.8rem;
  color: var(--text-dim);
  transition: transform 0.25s;
}

.detail[open] summary::after { transform: rotate(90deg); }

.detail[open] summary { border-bottom: 1px solid rgba(212, 160, 23, 0.18); }

.detail__body {
  padding: 6px 18px 20px;
  font-size: 0.86rem;
  line-height: 1.8;
}

.detail__grp { margin-top: 18px; }

.detail__grp-title {
  font-size: 0.76rem;
  color: var(--gold);
  letter-spacing: 0.16em;
  padding-bottom: 7px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(212, 160, 23, 0.22);
}

.detail__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 3px 0;
}

.detail__row span { color: var(--text-dim); }

.detail__row b {
  color: var(--white-jade);
  font-weight: 500;
}

/* 오행 알약 — 다섯 기운의 분포가 한눈에 */
.detail__ohaeng {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.oh-pill {
  --oh: rgba(212, 160, 23, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid var(--oh);
  border-radius: 15px;
  color: var(--white-jade);
  font-size: 0.82rem;
}

.oh-pill i {
  font-style: normal;
  font-weight: 700;
  color: var(--oh);
}

.oh-pill[data-oh="목"] { --oh: rgba(76, 160, 106, 0.9); }
.oh-pill[data-oh="화"] { --oh: rgba(230, 57, 70, 0.9); }
.oh-pill[data-oh="토"] { --oh: rgba(212, 160, 23, 0.9); }
.oh-pill[data-oh="금"] { --oh: rgba(216, 211, 200, 0.85); }
.oh-pill[data-oh="수"] { --oh: rgba(74, 138, 181, 0.9); }

/* 없는 오행 — 흐린 알약이 곧 "이 기운이 비었다"는 표시다 */
.oh-pill--none { opacity: 0.32; }

/* 대운 — 나이 순 디딤돌 */
.detail__daeun {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.daeun-step {
  padding: 6px 11px 7px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 160, 23, 0.22);
  border-radius: 3px;
  font-size: 0.84rem;
  color: var(--white-jade);
  text-align: center;
}

.daeun-step em {
  display: block;
  font-style: normal;
  font-size: 0.66rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}

/* ── 로딩 ────────────────────────────────────────────────── */
.loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(10, 6, 7, 0.92);
}


/* 방울 돌아가듯 */
.loading__spinner {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(212, 160, 23, 0.2);
  border-top-color: var(--red-bright);
  border-right-color: var(--gold);
  border-radius: 50%;
  animation: spin 1.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading__text {
  color: var(--gold);
  letter-spacing: 0.25em;
  font-size: 0.9rem;
  animation: pulse-dim 1.6s ease-in-out infinite;
}

@keyframes pulse-dim {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── 신령님의 기운 게이지 ────────────────────────────────── */
/* 남은 하루 TTS 예산을 세계관 언어로. 숫자는 서버의 energy_pct. */
.energy {
  width: min(440px, 100%);
  margin: 0 auto 18px;
  padding: 12px 16px 10px;
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 10px;
  background: rgba(20, 11, 13, 0.65);
}

.energy__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}

.energy__label {
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}

.energy__pct {
  color: var(--gold-soft);
  font-size: 0.8rem;
}

.energy__bar {
  height: 10px;
  border-radius: 5px;
  background: rgba(239, 230, 214, 0.08);
  overflow: hidden;
}

.energy__fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--red-bright), var(--gold), var(--gold-soft));
  box-shadow: 0 0 8px var(--candle-glow);
  transition: width 0.8s ease;
}

.energy__hint {
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.6;
  text-wrap: pretty;      /* 마지막 줄에 한 어절만 남는 꼴을 피한다 */
}

/* 기운이 얼마 안 남으면 촛불 꺼지듯 깜빡인다 */
.energy--low .energy__fill { animation: pulse-dim 1.4s ease-in-out infinite; }

.energy--empty .energy__pct { color: var(--text-dim); }
.energy--empty .energy__bar { opacity: 0.35; }

/* ── 하루 1회 경고 ───────────────────────────────────────── */
.once-warning {
  margin-top: 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.7;
  text-wrap: balance;
}

.once-warning strong { color: var(--red-bright); font-weight: 600; }

/* ── 오방기 뽑기 ─────────────────────────────────────────── */
.lottery {
  position: fixed;
  inset: 0;
  z-index: 55;                          /* 로딩(50)보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 7, 0.94);
  padding: 20px;
}

.lottery__box {
  text-align: center;
  width: min(480px, 100%);
}

.lottery__title {
  font-family: var(--font-brush);
  font-size: 2rem;
  color: var(--gold-soft);
  text-shadow: 0 0 18px var(--candle-glow);
}

.lottery__sub {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.7;
  text-wrap: balance;
}

.lottery__flags {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* 뒤집힌 깃발 — 어느 걸 집든 색은 서버가 정한다 */
.flag {
  position: relative;
  width: 54px;
  height: 130px;
  border: 1px solid rgba(239, 230, 214, 0.25);
  border-radius: 4px 4px 8px 8px;
  background:
    repeating-linear-gradient(135deg,
      rgba(239, 230, 214, 0.06) 0 8px,
      rgba(239, 230, 214, 0.02) 8px 16px),
    #241419;
  cursor: pointer;
  transition: transform 0.35s ease, opacity 0.5s ease, background 0.3s ease;
  animation: flag-sway 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}

/* 깃대 */
.flag::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 3px;
  height: 26px;
  transform: translateX(-50%);
  background: rgba(239, 230, 214, 0.3);
}

@keyframes flag-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

.flag:hover { transform: translateY(-8px); animation-play-state: paused; }

/* 안 뽑힌 깃발은 스르르 처진다 */
.flag--drop {
  opacity: 0.12;
  transform: translateY(14px) rotate(4deg) !important;
  animation: none;
  cursor: default;
}

/* 뽑힌 깃발 — 서버가 정한 색으로 펼쳐진다 */
.flag--open {
  animation: none;
  transform: translateY(-14px) scale(1.25) !important;
  background: var(--flag-color, #888);
  border-color: rgba(239, 230, 214, 0.5);
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.6);
  cursor: default;
}

/* 노란 기 — 신이 내렸다 */
.flag--win {
  box-shadow: 0 0 34px var(--gold), 0 0 80px var(--candle-glow);
  animation: flag-win 0.9s ease-in-out infinite;
}

@keyframes flag-win {
  0%, 100% { box-shadow: 0 0 24px var(--gold), 0 0 60px var(--candle-glow); }
  50%      { box-shadow: 0 0 44px var(--gold-soft), 0 0 110px var(--candle-glow); }
}

.lottery__result { margin-top: 26px; }

.lottery__blessing {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.9;
  max-width: 420px;
  margin: 0 auto;
  text-wrap: balance;
}

.lottery__go { margin-top: 22px; }

/* ── 무대 배치 (데스크톱) ────────────────────────────────── */
/* 배경이 신당 그림이 되면서 캐릭터에 중력이 생겼다. 굿판 화면의 첫
   시야를 "무대"로 쓴다: 무당은 병풍 앞 바닥(뷰포트 78% 지점)에 앉고,
   말풍선은 머리 위 병풍 높이에, 팔자 카드·버튼은 한 스크롤 아래로.
   좌표는 화면(#screen-reading) 기준 = 뷰포트 기준 − .shrine 위 여백 6vh.
   낮은 창(모바일 가로 등)에선 원래 세로 흐름을 유지한다. */
@media (min-width: 768px) and (min-height: 740px) {

  #screen-reading {
    position: relative;
    /* 팔자 카드가 뷰포트 90% 지점부터 고개를 내민다 — 스크롤이
       있다는 자연스러운 신호 */
    padding-top: 84vh;
  }

  /* 무당 — 병풍 발치 바닥에. 6배(288px) 대신 5배(240px)로 한 단계
     줄인다. 배율은 정수여야 픽셀이 안 뭉개져서 10~15%가 아니라 -17%. */
  #screen-reading .mudang {
    position: absolute;
    left: 50%;
    top: 72vh;                             /* 뷰포트 78vh 지점 */
    transform: translate(-50%, -100%);     /* top 좌표가 곧 밑단이 되게 */
    width: 240px;
    margin: 0;
  }

  /* 조작 버튼 — 무당 오른쪽 세로 팻말. 무당 밑단과 아랫줄을 맞춘다.
     (.controls엔 애니메이션이 없어서 transform을 안전하게 쓸 수 있다) */
  #screen-reading .controls {
    position: absolute;
    left: calc(50% + 180px);
    top: 72vh;
    transform: translateY(-100%);
    flex-direction: column;
    width: 136px;
    margin: 0;
    max-width: none;
  }

  #screen-reading .btn-ghost {
    border-left: none;
    border-top: 1px solid rgba(212, 160, 23, 0.22);
    padding: 12px 10px;
  }

  #screen-reading .btn-ghost:first-child { border-top: none; }

  /* 말풍선 — 무당 머리 위, 병풍의 어두운 부분이 자막 배경이 된다.
     무당 머리(72vh − 360px)에 붙여 앉혀서 창 높이가 어중간해도
     겹치지 않는다. 길어지면 위로 자란다. */
  #screen-reading .speech {
    position: absolute;
    left: 50%;
    top: calc(72vh - 360px - 14px);
    transform: translate(-50%, -100%);
    width: min(560px, 100%);
    margin: 0;
  }

  /* 말꼬리를 아래로 뒤집는다 — 이제 말풍선이 무당 위에 있으니 */
  #screen-reading .speech::before {
    top: auto;
    bottom: -9px;
    border-left: none;
    border-top: none;
    border-right: 1px solid rgba(212, 160, 23, 0.3);
    border-bottom: 1px solid rgba(212, 160, 23, 0.3);
  }

  /* 질문 칩 — 무당 발치, 바닥에 놓인 공물처럼.
     어두운 바닥에 묻히지 않게 바탕을 한 겹 더 깐다. */
  /* 주의: .followups 의 등장 애니메이션(screen-in ... both)이 끝나면서
     transform 을 남기므로, translateX(-50%) 중앙정렬은 여기서 못 쓴다.
     left/right + margin auto 로 중앙을 잡는다. */
  #screen-reading .followups {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(72vh + 12px);
    width: min(680px, 100%);
    margin: 0 auto;
    max-width: none;
  }

  #screen-reading .followup-chip {
    background: rgba(31, 18, 21, 0.85);
    border-color: rgba(230, 57, 70, 0.65);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  /* 목소리 안내 — 화면 맨 위 금줄 아래. 무대 요소들과 안 겹친다 */
  #screen-reading .voice-notice {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    width: min(560px, 100%);
    margin: 0;
  }
}

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .shrine { padding: 4vh 14px 8vh; }
  .form { padding: 20px 16px; }

  /* (무당 크기 축소는 mudang.css 끝의 미디어쿼리에 있다 —
      mudang.css가 이 파일보다 나중에 로드돼 여기 두면 덮인다) */

  /* 팔자는 폰에서도 넉 장 한 줄 — 사주는 "네 기둥"이라는 구도 자체가
     정보다. 2×2로 접으면 그게 죽는다. 글자만 줄여서 한 줄을 지킨다. */
  .palja { gap: 6px; margin-top: 26px; }
  .pillar { padding: 16px 3px 10px; }
  .pillar__name { font-size: 0.66rem; letter-spacing: 0.12em; }
  .pillar__sub { font-size: 0.55rem; margin-bottom: 7px; }
  .pillar__hanja { font-size: 1.55rem; }
  .pillar__kr { font-size: 0.7rem; margin-top: 6px; }
  .pillar__sipsin { font-size: 0.6rem; padding: 2px 6px; margin-top: 6px; }

  /* 조작 바 — 엄지 폭에 맞춰 살짝 낮고 촘촘하게 */
  .btn-ghost { padding: 12px 2px; font-size: 0.78rem; letter-spacing: 0; }

  /* 계산 내역 — 좁은 화면에선 라벨 칸을 줄인다 */
  .detail__row { grid-template-columns: 76px 1fr; gap: 8px; }
  .detail__body { padding: 4px 14px 16px; }

  .flag { width: 44px; height: 106px; }
  .lottery__flags { gap: 10px; }
}

/* 띠가 통념과 어긋날 때의 근거 한 줄 (입춘 전 출생).
   값 옆에 작게 붙어 "고장 아님"을 알려준다. */
.detail__note {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-dim);
  word-break: keep-all;
}