/* 사주빛 (SajuBit) — 온라인 불공 (온라인 사찰 예불) 스타일
   css/style.css · css/tools.css 와 함께 로드. 외부 의존성 없음.
   애니메이션은 transform / opacity 만 사용 (성능). */

/* ================= 사찰 장면 (히어로 SVG) ================= */
.temple-stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 0 8px;
}
/* 부처님 뒤 부드러운 광배 빛 */
.temple-stage::before {
  content: "";
  position: absolute;
  inset: -8% -6% auto;
  height: 78%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 46% 52% at 50% 42%,
    rgba(232, 201, 106, 0.22),
    rgba(201, 162, 39, 0.08) 55%,
    transparent 72%
  );
}
.temple-scene {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 880px;
  margin: 0 auto;
}

/* ================= 향 (클릭 가능) ================= */
.incense {
  cursor: pointer;
}
/* 불꽃: .lit 이 붙기 전에는 숨김 */
.incense .flame {
  opacity: 0;
  transform-origin: 50% 100%;
  transform-box: fill-box;
  transition: opacity 0.6s ease;
}
.incense.lit .flame {
  opacity: 1;
  animation: flame-flicker 0.9s ease-in-out infinite;
}
@keyframes flame-flicker {
  0%, 100% { opacity: 1; transform: scale(1, 1); }
  25%      { opacity: 0.82; transform: scale(0.94, 1.08); }
  50%      { opacity: 0.95; transform: scale(1.05, 0.96); }
  75%      { opacity: 0.88; transform: scale(0.97, 1.04); }
}
/* 불씨: 점화되면 따뜻하게 빛남 */
.incense .ember {
  opacity: 0.35;
  transform-box: fill-box;
  transition: opacity 0.8s ease;
}
.incense.lit .ember {
  opacity: 1;
  fill: #ff9a3c;
  filter: drop-shadow(0 0 6px rgba(255, 140, 40, 0.9));
}
/* 연기: .lit 일 때만 올라가는 물결 */
.incense .smoke {
  opacity: 0;
}
.incense.lit .smoke {
  animation: smoke-rise 4.5s ease-in-out infinite;
}
@keyframes smoke-rise {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 0.5; }
  70%  { opacity: 0.35; }
  100% { opacity: 0; transform: translateY(-46px); }
}
/* 타들어가는 향: 천천히 짧아짐 (~90초) */
.incense .stick {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  transition: transform 90s linear;
}
.incense.burning .stick {
  transform: scaleY(0.55);
}

/* ================= 공양물 슬롯 등장 ================= */
#slot-flower .placed,
#slot-fruit .placed,
#slot-tea .placed {
  animation: offering-in 1.1s ease-out both;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes offering-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================= 절하는 모습 ================= */
.bow-figure {
  transform-box: fill-box;
  transform-origin: 50% 90%;
}
.bow-figure.bowing {
  animation: bow-down 2.4s ease-in-out 1;
}
@keyframes bow-down {
  0%, 100% { transform: rotateX(0deg) translateY(0); }
  40%, 60% { transform: rotateX(24deg) translateY(10px); }
}

/* ================= 말씀 카드 ================= */
#word-card[hidden] { display: none; }
#word-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  max-width: 640px;
  margin: 26px auto 0;
  padding: 26px 30px;
  text-align: center;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.10), rgba(179, 49, 42, 0.06));
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 16px;
}
#word-card.visible {
  opacity: 1;
  transform: translateY(0);
}
#word-card .word-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 2;
  color: var(--gold-light);
  margin-bottom: 10px;
}
#word-card .word-src {
  font-size: 0.8rem;
  color: var(--cream-dim);
  letter-spacing: 2px;
}

/* ================= 소원 목패 ================= */
.wish-tablet {
  position: relative;
  width: 168px;
  min-height: 108px;
  margin: 26px 10px 8px;
  padding: 26px 16px 16px;
  background: linear-gradient(160deg, #8a5a2b 0%, #6d431f 55%, #4f2f14 100%);
  border: 1px solid rgba(232, 201, 106, 0.35);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 225, 160, 0.25);
  color: #f3e3bd;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.7;
  text-align: center;
  animation: tablet-sway 6s ease-in-out infinite;
  transform-origin: 50% -18px;
  transition: opacity 1.2s ease;
}
/* 매다는 끈 */
.wish-tablet::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 2px;
  height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--gold));
}
.wish-tablet::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
  border-radius: 2px;
}
@keyframes tablet-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}
/* 올리기(소원 전송): 불씨처럼 사라짐 */
.wish-tablet.releasing {
  opacity: 0;
  animation: none;
  box-shadow: 0 0 34px rgba(255, 140, 40, 0.85), 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* ================= 소원 벽 ================= */
#wish-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6px 4px;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

/* ================= 단계 안내 ================= */
.steps {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.step .step-no {
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 5px;
}
.step h2 {
  font-size: 1.5rem;
  color: var(--cream);
}
.step p.lead {
  color: var(--cream-dim);
  font-size: 0.95rem;
  line-height: 1.9;
  max-width: 560px;
}
.step .btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* 조용한 공양 버튼 — 게임스럽지 않게 */
.temple-btn,
#bell-toggle,
#bow-btn,
#offer-flower,
#offer-fruit,
#offer-tea,
#wish-submit {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--gold-light);
  background: rgba(201, 162, 39, 0.07);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 999px;
  padding: 13px 34px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.temple-btn:hover,
#bell-toggle:hover,
#bow-btn:hover,
#offer-flower:hover,
#offer-fruit:hover,
#offer-tea:hover,
#wish-submit:hover {
  border-color: var(--gold-light);
  background: rgba(201, 162, 39, 0.14);
  box-shadow: 0 0 22px rgba(201, 162, 39, 0.28);
}
.temple-btn:focus-visible,
#bell-toggle:focus-visible,
#bow-btn:focus-visible,
#offer-flower:focus-visible,
#offer-fruit:focus-visible,
#offer-tea:focus-visible,
#wish-submit:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
/* 눌러진/선택된 공양 버튼 */
.temple-btn.done,
#offer-flower.done,
#offer-fruit.done,
#offer-tea.done {
  background: rgba(201, 162, 39, 0.22);
  color: #1a1408;
  background: var(--gold);
  border-color: var(--gold);
}
/* 비활성 상태 */
.temple-btn[disabled],
.temple-btn[aria-disabled="true"],
#bell-toggle[disabled],
#bell-toggle[aria-disabled="true"],
#bow-btn[disabled],
#bow-btn[aria-disabled="true"],
#offer-flower[disabled],
#offer-flower[aria-disabled="true"],
#offer-fruit[disabled],
#offer-fruit[aria-disabled="true"],
#offer-tea[disabled],
#offer-tea[aria-disabled="true"],
#wish-submit[disabled],
#wish-submit[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

/* 단계 힌트 */
#step-hint {
  text-align: center;
  color: var(--gold-light);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 2.2em;
}

/* 소원 입력 */
.wish-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
}
.wish-form textarea {
  width: 100%;
  min-height: 96px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.8;
  padding: 14px 16px;
  resize: vertical;
}
.wish-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.20);
}
.wish-form textarea::placeholder { color: var(--cream-dim); }

/* 공덕 안내 — 작고 은은하게 */
#merit-note {
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.75rem;
  line-height: 1.8;
  max-width: 560px;
  margin: 34px auto 0;
  padding: 0 20px;
}

/* .yt-banner 는 style.css 에 정의 — 여기서 재정의하지 않음 */

/* ================= SVG 분위기: 안개 · 촛불 · 연등 ================= */
.mist {
  opacity: 0.14;
  animation: mist-drift 36s ease-in-out infinite alternate;
}
.mist.mist-2 { animation-duration: 52s; animation-delay: -18s; }
@keyframes mist-drift {
  from { transform: translateX(-26px); }
  to   { transform: translateX(26px); }
}
.candle-flame {
  opacity: 1;
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: candle-flicker 1.6s ease-in-out infinite;
}
@keyframes candle-flicker {
  0%, 100% { opacity: 1; transform: scale(1, 1); }
  30%      { opacity: 0.9; transform: scale(0.96, 1.05); }
  60%      { opacity: 0.95; transform: scale(1.03, 0.97); }
}
/* 연등 빛무리: 부드럽게 숨쉬듯 */
.lotus-glow {
  animation: lotus-breathe 4s ease-in-out infinite;
}
@keyframes lotus-breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ================= 움직임 최소화 ================= */
@media (prefers-reduced-motion: reduce) {
  .incense.lit .flame,
  .incense.lit .smoke,
  .bow-figure.bowing,
  #slot-flower .placed,
  #slot-fruit .placed,
  #slot-tea .placed,
  .wish-tablet,
  .mist,
  .candle-flame,
  .lotus-glow {
    animation: none;
  }
  .incense.lit .flame { opacity: 1; }
  .incense .stick,
  #word-card,
  .wish-tablet {
    transition: none;
  }
}

/* ================= 모바일 (≤720px) ================= */
@media (max-width: 720px) {
  .steps { gap: 40px; padding: 34px 16px 16px; }
  .step .btn-row { flex-direction: column; align-items: stretch; }
  .temple-btn,
  #bell-toggle,
  #bow-btn,
  #offer-flower,
  #offer-fruit,
  #offer-tea,
  #wish-submit {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 14px 20px;
  }
  #word-card { margin: 20px 16px 0; padding: 22px 18px; }
  #word-card .word-text { font-size: 1.1rem; }
  .wish-tablet { width: 150px; min-height: 100px; margin: 22px 6px 6px; }
  .temple-stage::before { inset: -4% -10% auto; }
}