/* ═══════════════════════════════════════════════════════════
   무당집 분위기 — 색, 글꼴, 배경, 촛불
   오방색(청·백·적·흑·황) 중 적·황·흑을 주로 쓴다.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* 어둠 */
  --ink:        #0a0607;   /* 가장 깊은 어둠 */
  --ink-2:      #140b0d;
  --ink-3:      #1f1215;

  /* 오방색 */
  --red:        #b3121f;   /* 적 — 부적의 붉은 주사 */
  --red-bright: #e63946;
  --gold:       #d4a017;   /* 황 — 놋그릇, 촛불 */
  --gold-soft:  #f0c75e;
  --blue:       #1d5a8a;   /* 청 — 무복 */
  --white-jade: #efe6d6;   /* 백 — 한지 */

  /* 글자 */
  --text:       #efe6d6;
  --text-dim:   #a8998a;

  /* 촛불 빛 */
  --candle-glow: rgba(212, 160, 23, 0.35);

  --font-brush: "Nanum Brush Script", "HY견고딕", "배달의민족 주아",
                "Gungsuh", "궁서", serif;
  --font-body:  "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif;
}

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

/* [hidden]은 브라우저 기본 스타일(UA origin)이라 우리가 쓴 display가 뭐든
   무조건 진다. .field-row { display: flex } 하나에 숨김이 뚫린다.
   숨김이 항상 이기도록 못 박아 둔다. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  position: relative;

  /* 한국어 줄바꿈 — 단어(어절) 중간에서 자르지 않는다.
     이게 없으면 "읊어주신다"가 "읊 / 어주신다"로 꺾인다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 신당 배경 ───────────────────────────────────────────── */
/* 픽셀 신당 그림이 화면 전체를 덮는다. 그 위에 촛불 일렁임과 향 연기,
   맨 위에 가독성용 장막. 내용(.shrine)은 z-index 2라 항상 이 위다. */
.shrine-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);      /* 그림이 늦게 뜰 때의 바탕색 */
}

/* background-size: cover 를 실제 요소로 흉내낸다.
   이래야 안의 효과들이 그림 좌표(%)에 정확히 붙는다.
   그림 비율 1536:1024 = 3:2 → 가로가 최소 150vh는 되어야 세로를 덮는다. */
.shrine-bg__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 150vh);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  /* webp 240KB — 원본 png(2.2MB)는 소스 보관용. 트래픽은 1/9이다 */
  background: url('/assets/bg/sindang.webp') center / 100% 100% no-repeat;
  image-rendering: pixelated;  /* 확대돼도 픽셀이 뭉개지지 않게 */
}

/* 가독성 장막 — 가운데(무당·자막 자리)는 옅고 가장자리는 짙다 */
.shrine-bg__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 46%,
                    rgba(10, 6, 7, 0.08) 0%, rgba(10, 6, 7, 0.42) 100%),
    rgba(10, 6, 7, 0.30);
}

/* ── 촛불 일렁임 ─────────────────────────────────────────── */
/* 그림 속 촛불 위에 얹는 빛무리. steps() 타이밍이라 부드럽게 굴지 않고
   툭툭 끊겨 깜빡인다 — 픽셀아트 톤에 맞춘 의도적 선택. */
.cglow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 195, 85, 0.50) 0%,
              rgba(255, 140, 30, 0.20) 42%,
              transparent 70%);
  mix-blend-mode: screen;      /* 그림 위에 빛으로만 섞인다 */
  animation: cglow-flicker 2.1s steps(2, jump-none) infinite;
}

/* 넷이 같은 박자로 깜빡이면 가짜 티가 난다 — 주기를 다 다르게 */
.cglow--alt  { animation-duration: 1.6s; animation-delay: -0.5s; }
.cglow--alt2 { animation-duration: 2.7s; animation-delay: -1.4s; }

/* 등롱은 갓이 씌워져 있으니 더 작고 얌전하게 */
.cglow--lantern {
  width: 6.5%;
  opacity: 0.75;
  animation-duration: 3.6s;
}

@keyframes cglow-flicker {
  0%, 100% { opacity: 0.9;  transform: translate(-50%, -50%) scale(1); }
  22%      { opacity: 0.6;  transform: translate(-50%, -50%) scale(0.95); }
  46%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
  71%      { opacity: 0.72; transform: translate(-50%, -50%) scale(0.98); }
}

/* ── 향 연기 ─────────────────────────────────────────────── */
/* 향로 꼭지에서 연기 세 가닥이 시차를 두고 피어오른다.
   올라가며 좌우로 흐물거리고, 퍼지면서 옅어져 사라진다. */
.incense {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

.incense__smoke {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 7px;
  height: 26px;
  border-radius: 45%;
  background: linear-gradient(180deg,
              rgba(232, 228, 218, 0) 0%,
              rgba(232, 228, 218, 0.42) 55%,
              rgba(232, 228, 218, 0.30) 100%);
  filter: blur(1.5px);
  opacity: 0;
  animation: smoke-rise 8.5s linear infinite;
}

.incense__smoke--2 { animation-delay: 2.8s; animation-duration: 9.5s; }
.incense__smoke--3 { animation-delay: 5.7s; animation-duration: 7.8s; }

@keyframes smoke-rise {
  0%   { opacity: 0;    transform: translate(-50%, 0) scale(0.7); }
  12%  { opacity: 0.55; }
  35%  { transform: translate(calc(-50% + 8px), -62px) scale(1.05) rotate(4deg); }
  58%  { opacity: 0.34; transform: translate(calc(-50% - 8px), -122px) scale(1.5) rotate(-5deg); }
  100% { opacity: 0;    transform: translate(calc(-50% + 6px), -195px) scale(2.2) rotate(3deg); }
}

/* ── 촛불이 방 전체를 흔드는 느낌 ────────────────────────── */
@keyframes room-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.93; }
}

/* ── 접근성: 움직임 줄이기 ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}