/* 메인 괘판 화면 — 값은 tokens.css 변수만 사용 */
/* 첫 화면 = 헤더 + 광고 + 괘판 윗부분. 스크롤하면 괘판 전체 → 바닥글 링크.
   괘판 영역 높이는 wheel.js 가 화면 높이에 맞춰 정한다. */
.stage {
  position: relative;
  flex: none;
  height: 100vh;
  overflow: hidden;
}
/* 바탕 그림 — 화면에 고정, 헤더 · 광고 줄 뒤까지 이어진다 */
.home-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--home-bg-img) var(--home-bg-position) / cover no-repeat;
}
.home-backdrop::after {   /* 다크 모드 등에서 글씨가 잘 읽히도록 덮는 막 */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  opacity: var(--home-bg-veil);
}
.home .site-header,
.home .ad-slot { background: transparent; }

/* 연출 중에는 스크롤 잠금 */
html.is-drawing, html.is-drawing body { overflow: hidden; touch-action: none; overscroll-behavior: none; }
.is-hidden { opacity: 0; pointer-events: none; }

/* 시작 화면 */
.intro {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding: var(--space-6) var(--space-4) 0;
  text-align: center;
  transition: opacity 0.35s;
}
.intro p, .intro h1 { margin: 0; }
/* 시작 안내 문구 — 네 줄, 차분하게 읽히도록 줄 간격을 넉넉히 */
.intro-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  word-break: keep-all;
  text-shadow: var(--text-halo);
}
.intro .btn--primary { margin-top: var(--space-5); }
/* 괘 뽑기 아래 인스타그램 — 연출이 시작되면 안내 문구와 함께 사라진다 */
.insta-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-4) auto 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  text-shadow: var(--text-halo);
  padding: var(--space-1) var(--space-2);
}
.insta-link:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 주역 안내 — 반투명 버튼 셋 */
.guide-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  min-height: 34px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  -webkit-backdrop-filter: blur(var(--chip-blur));
  backdrop-filter: blur(var(--chip-blur));
  font-size: var(--fs-xs);
  color: var(--color-ink-2);
  text-decoration: none;
}
.guide-chip:hover { color: var(--color-ink); border-color: var(--color-line-2); }
.guide-icon { flex: none; }
.intro-msg {
  min-height: 1.6em;
  margin-top: var(--space-2) !important;
  font-size: var(--fs-xs);
  color: var(--color-danger);
}

/* 감응하는 중 — 괘판이 가운데로 올라와 잠시 머무는 동안 */
.reso {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;                     /* wheel.js 가 괘판 중심 높이로 맞춘다 */
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  /* 괘판 그림 위에서도 읽히도록 글자 윤곽 + 넓은 번짐 */
  -webkit-text-stroke: 4px var(--color-bg);
  paint-order: stroke fill;
  text-shadow: 0 0 8px var(--color-bg), 0 0 16px var(--color-bg), 0 0 28px var(--color-bg);
  transition: opacity 0.4s;
}
.reso:not(.is-hidden) { animation: reso-breath 1.6s ease-in-out infinite; }
@keyframes reso-breath { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.reso-dots::after { content: ""; display: inline-block; width: 1.4em; text-align: left; animation: reso-dots 1.2s steps(1) infinite; }
@keyframes reso-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* 뽑는 중 — 위쪽 괘상 영역 */
.draw-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding-top: var(--space-4);
  transition: opacity 0.35s;
}
.draw-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3);
}
.draw-hex { width: 110px; text-align: center; transition: opacity 0.4s; }
.draw-hex svg { margin: 0 auto; }
.draw-name { font-size: var(--fs-xs); margin-top: var(--space-1); min-height: 1.6em; }
.draw-arrow { padding-top: 18px; transition: opacity 0.4s; }
.draw-status {
  text-align: center;
  font-size: var(--fs-xs);
  min-height: 1.6em;
  margin: var(--space-2) var(--space-4) 0;
}
.draw-status b { font-weight: var(--fw-bold); color: var(--color-ink); }

/* 움직이는 효 — 여섯 칸 평면 룰렛 (초효 → 상효, 왼쪽부터) */
.yao-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-1);
  max-width: 360px;
  margin: var(--space-2) auto 0;
  padding: 0 var(--space-3);
  transition: opacity 0.35s;
}
.yao-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--fs-2xs);
  line-height: 1;
  transition: background-color 0.08s, color 0.08s, border-color 0.08s, opacity 0.3s;
}
.yao-cell svg { width: 26px; height: 5px; overflow: visible; }
.yao-cell.is-on,
.yao-cell.is-picked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}
.yao-cell.is-picked { font-weight: var(--fw-bold); }
.yao-row.is-done .yao-cell:not(.is-picked) { opacity: 0.55; }

/* 괘판 */
.wheel {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  will-change: transform;
}
.wheel svg { width: 100%; height: 100%; overflow: visible; }

.pointer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1;
  transition: opacity 0.35s;
}

.noscript { text-align: center; padding: var(--space-4); }

/* 괘판 아래 읽을거리 — 설경 바탕 위에서도 읽히도록 바탕색 면 */
.home-read {
  position: relative;
  z-index: 1;
  flex: none;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-top: var(--space-6);
}
.home-read h2:first-child { margin-top: 0; }
.home-read-links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-5) !important; }
.home .site-footer { background: color-mix(in srgb, var(--color-bg) 94%, transparent); }