/* 공통 배치 — 값은 tokens.css 변수만 사용 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
img, svg { display: block; }
.serif { font-family: var(--font-serif); }
.muted { color: var(--color-ink-3); }
.sub { color: var(--color-ink-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 머리글 */
.site-header {
  min-height: var(--header-h);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  position: relative;
  z-index: 5;
}
.site-header .logo {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  text-decoration: none;
  letter-spacing: 0.08em;
}
/* 머리글 탭 — 괘 뽑기 / 읽을거리 */
.site-tabs { display: flex; gap: var(--space-5); margin-top: var(--space-1); font-size: var(--fs-sm); }
.site-tabs a { padding: var(--space-1) var(--space-1) var(--space-2); text-decoration: none; color: var(--color-ink-2); border-bottom: 2px solid transparent; }
.site-tabs a:hover { color: var(--color-ink); }
.site-tabs a[aria-current="page"] { color: var(--color-ink); font-weight: var(--fw-bold); border-bottom-color: var(--color-ink); }

/* 광고 자리 — ads.js 가 광고 단위를 넣은 자리만 보인다(.is-on). 단위 코드가 없거나 광고가 안 채워지면 숨김 */
.ad-slot {
  flex: none;
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  position: relative;
  z-index: 5;
}
.ad-slot:not(.is-on),
.ad-slot:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad-slot .ad-box {
  position: relative;
  width: var(--ad-w);
  max-width: 100%;
  height: var(--ad-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot--header { border-bottom: 1px solid var(--color-line); }

/* 버튼 */
.btn {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn:hover { background: var(--color-hover); }
.btn:focus-visible, a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
  font-weight: var(--fw-bold);
  padding: var(--space-3) var(--space-6);
}
.btn--primary:hover { background: var(--color-primary); opacity: 0.9; }

/* 바닥글 링크 */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-ink-3);
}
.footer-links a { text-decoration: none; }
.site-footer { padding: var(--space-4) var(--space-4) var(--space-6); }
.copyright { text-align: center; font-size: var(--fs-2xs); color: var(--color-ink-3); margin: var(--space-2) 0 0; }
.footer-links a:hover { text-decoration: underline; }

/* 괘판 (메인 연출 · 결과 페이지 공통, wheel-core.js 가 그림) */
.wheel-board .slot-g { transition: opacity 0.3s; }
.wheel-board .slot-edge { fill: none; stroke: var(--color-bg); stroke-width: 1.5; }
/* 3효 기호: 배경 원 없이 그림 위에 바로. 막대에 얇은 밝은 테두리만 둘러 윤곽을 살린다 */
.wheel-board .glyph rect { stroke: var(--wheel-glyph-halo); stroke-width: var(--wheel-glyph-halo-width); paint-order: stroke; }
.wheel-board .glyph { transition: opacity 0.3s; }
.wheel-board .hub { fill: var(--color-bg); }
.wheel-board .window { fill: none; stroke: var(--color-ink); stroke-width: 2; transition: opacity 0.3s; }
.wheel-board .dim { opacity: 0.28; }

/* 괘상 막대 테두리 */
.hex-bar { stroke: var(--hex-outline); stroke-width: var(--hex-outline-width); }

/* 효 변화 아이콘 — 시작 원 → 태극 나타남 → 제자리 회전 → 태극 사라짐 → 끝 원
   음→양: 검은 원 → 흰 원 / 양→음: 흰 원 → 검은 원 */
.taiji { display: inline-block; vertical-align: middle; overflow: visible; }
.taiji .taiji-light-fill { fill: var(--color-taiji-light); }
.taiji .taiji-dark-fill { fill: var(--color-taiji-dark); }
.taiji .taiji-rim { fill: none; stroke: var(--color-taiji-rim); stroke-width: 1; }
.taiji--to-yang .taiji-from, .taiji--to-yin .taiji-to { fill: var(--color-taiji-dark); }
.taiji--to-yin .taiji-from, .taiji--to-yang .taiji-to { fill: var(--color-taiji-light); }

/* 끝 원은 태극이 사라지기 시작할 때 아래에 깔린다 */
.taiji .taiji-to {
  opacity: 0;
  animation: taiji-show 0s linear calc(var(--taiji-in) + var(--taiji-spin)) forwards;
}
/* 제자리 회전: 기준 상자를 원 자체(fill-box)로 잡아 중심에서 돈다 */
.taiji .taiji-spin {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    taiji-fade-in var(--taiji-in) ease-out forwards,
    taiji-cw var(--taiji-spin) cubic-bezier(0.45, 0, 0.25, 1) var(--taiji-in) both,
    taiji-fade-out var(--taiji-out) ease-in calc(var(--taiji-in) + var(--taiji-spin)) forwards;
}
.taiji--to-yin .taiji-spin { animation-name: taiji-fade-in, taiji-cw, taiji-fade-out; }
.taiji--to-yang .taiji-spin { animation-name: taiji-fade-in, taiji-ccw, taiji-fade-out; }
@keyframes taiji-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes taiji-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes taiji-show { to { opacity: 1; } }
@keyframes taiji-cw { from { transform: rotate(0deg); } to { transform: rotate(calc(360deg * var(--taiji-turns))); } }
@keyframes taiji-ccw { from { transform: rotate(0deg); } to { transform: rotate(calc(-360deg * var(--taiji-turns))); } }
@media (prefers-reduced-motion: reduce) {
  .taiji .taiji-spin { animation: none; opacity: 0; }
  .taiji .taiji-to { animation: none; opacity: 1; }
}

/* 팔괘 색 견본 */
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: var(--space-1);
  vertical-align: -1px;
  border: 1px solid;
}

/* 인스타그램 아이콘 */
.insta-icon { display: inline-block; flex: none; vertical-align: -4px; }