@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* ---------- 토큰 ---------- */
:root {
  --color-ink:           #1a1611;
  --color-ink-raised:    #221d16;
  --color-ink-raised-2:  #2b241a;
  --color-parchment:     #e7dcc0;
  --color-parchment-dim: #a6987c;
  --color-gold:          #c9a227;
  --color-gold-bright:   #e0bf4e;
  --color-gold-dim:      #7d661e;
  --color-oxblood:       #7a2e22;
  --color-oxblood-bright:#c96450;

  --font-serif: 'Nanum Myeongjo', 'Batang', Georgia, serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --radius-sm: 2px;
  --radius-md: 4px;

  --wrap-max: 720px;

  --dur-flip: 0.7s;
  --dur-fade: 0.3s;
  --ease-flip: cubic-bezier(.4,.2,.2,1);

  --border-gold: 1px solid rgba(201, 162, 39, 0.35);
}

/* ---------- 리셋 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(201,162,39,0.08), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 110%, rgba(122,46,34,0.10), transparent 55%),
    var(--color-ink);
  color: var(--color-parchment);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2 { font-family: var(--font-serif); font-weight: 700; margin: 0; }
p { margin: 0; }

/* ---------- 레이아웃 ---------- */
.page {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-header {
  text-align: center;
  padding-top: var(--space-3);
}

.site-header::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-2);
  background: no-repeat center / contain url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0NSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzlhMjI3IiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuNTUiLz48cG9seWdvbiBwb2ludHM9IjUwLDEwIDg3LDc2IDEzLDc2IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOWEyMjciIHN0cm9rZS13aWR0aD0iMiIvPjxwb2x5Z29uIHBvaW50cz0iNTAsOTAgMTMsMjQgODcsMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YTIyNyIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNCIgZmlsbD0iI2M5YTIyNyIgb3BhY2l0eT0iMC44Ii8+PC9zdmc+");
  opacity: 0.9;
}

.site-header h1 {
  font-size: var(--text-xl);
  letter-spacing: 0.12em;
  color: var(--color-gold-bright);
}

.site-header .site-subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-parchment-dim);
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

.site-nav a {
  color: var(--color-parchment-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-fade), border-color var(--dur-fade);
}

.site-nav a:hover {
  color: var(--color-gold-bright);
}

.site-nav a.is-current {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold-dim);
}

.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gold-dim);
}
.ornament-divider::before,
.ornament-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-gold-dim), transparent);
}
.ornament-divider .glyph {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: no-repeat center / contain url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBvbHlnb24gcG9pbnRzPSIyMCw0IDM0LDMyIDYsMzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YTIyNyIgc3Ryb2tlLXdpZHRoPSIxLjYiIG9wYWNpdHk9IjAuODUiLz48cG9seWdvbiBwb2ludHM9IjIwLDM2IDYsOCAzNCw4IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOWEyMjciIHN0cm9rZS13aWR0aD0iMS42IiBvcGFjaXR5PSIwLjg1Ii8+PC9zdmc+");
}

/* ---------- 실시간 지표 ---------- */
.live-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
  letter-spacing: 0.02em;
}

.live-indicator::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ---------- 패널 공통 ---------- */
.panel {
  background: var(--color-ink-raised);
  border: var(--border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* ---------- 폼 ---------- */
.reading-form,
.lookup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field-group {
  border: var(--border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-ink-raised);
}

.field-group legend {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-parchment-dim);
}

input[type="text"],
input[type="number"],
select,
textarea {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-parchment);
  background: var(--color-ink);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-gold-bright);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18);
}

textarea { resize: vertical; }

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
  font-style: italic;
}

.spread-options {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.spread-option {
  flex: 1 1 130px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-parchment-dim);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fade), color var(--dur-fade), background var(--dur-fade);
}

.spread-option:hover {
  border-color: var(--color-gold);
  color: var(--color-parchment);
}

.spread-option:has(input:checked) {
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, 0.10);
  color: var(--color-gold-bright);
}

.spread-option input { accent-color: var(--color-gold); }

/* ---------- 버튼 ---------- */
.btn {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--color-gold-bright);
  background: transparent;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fade), color var(--dur-fade);
}

.btn:hover:not(:disabled) {
  background: var(--color-gold);
  color: var(--color-ink);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-ink);
  border-color: var(--color-gold);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  color: var(--color-ink);
}

.btn-ghost {
  border-color: var(--color-gold-dim);
  color: var(--color-parchment-dim);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.btn-ghost:hover:not(:disabled) {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.error-box,
.error-section {
  border: 1px solid var(--color-oxblood);
  background: rgba(122, 46, 34, 0.15);
  color: var(--color-oxblood-bright);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

[hidden] {
  display: none !important;
}

/* ---------- 리딩 화면: 덱 ---------- */
.draw-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- 덱 더미(부채꼴) ---------- */
.deck {
  position: relative;
  width: 84px;
  height: 140px;
  margin: var(--space-3) auto 0;
  cursor: pointer;
  outline-offset: 4px;
}

.deck[aria-busy="true"] {
  cursor: default;
}

.deck:focus-visible {
  outline: 2px solid var(--color-gold-bright);
}

.deck-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold-dim);
  pointer-events: none;
  transform:
    translateX(calc(var(--i) * 3px))
    translateY(calc(var(--absoff) * 1.5px))
    rotate(calc(var(--i) * 2deg));
  transition: border-color var(--dur-fade);
  animation: deck-beckon 2.8s ease-in-out infinite;
  animation-delay: calc(var(--absoff) * -280ms);
}

@keyframes deck-beckon {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 39, 0); }
  50%      { box-shadow: 0 0 14px rgba(201, 162, 39, 0.45); }
}

.deck:hover .deck-card,
.deck:focus-visible .deck-card {
  animation: none;
}

.deck:hover .deck-card:first-child,
.deck:focus-visible .deck-card:first-child {
  border-color: var(--color-gold-bright);
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.55);
}

/* ---------- 셔플 ---------- */
.deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.shuffle-count {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
}

@keyframes tarot-split-merge {
  0%, 100% {
    transform:
      translateX(calc(var(--i) * 3px))
      translateY(calc(var(--absoff) * 1.5px))
      rotate(calc(var(--i) * 2deg));
  }

  42% {
    transform:
      translateX(calc(var(--i) * 15px))
      translateY(calc(var(--i) * -6px))
      rotate(calc(var(--i) * 6deg));
  }

  68% {
    transform:
      translateX(calc(var(--i) * -9px))
      translateY(3px)
      rotate(calc(var(--i) * -3deg));
  }
}

.deck.is-shuffling .deck-card {
  animation: tarot-split-merge 900ms cubic-bezier(.65, 0, .35, 1) both;
  animation-delay: calc(var(--absoff) * -40ms);
}

/* ---------- 덱→슬롯 비행 오버레이 ---------- */
.tarot-flight {
  position: fixed;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  perspective: 900px;
  transform-origin: top left;
}

.tarot-flight__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.tarot-flight__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold-dim);
  background: var(--color-ink-raised-2);
}

.tarot-flight__back {
  background: var(--color-ink-raised-2) url("/images/tarot/tarot_card_back.png") center / cover no-repeat;
}

.tarot-flight__front {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarot-flight__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 카드 슬롯 + 3D 플립 ---------- */
.slot-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  padding: var(--space-3) 0;
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 92px;
}

.slot-label {
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-parchment-dim);
  min-height: 2.4em;
}

.slot-label.is-next {
  color: var(--color-gold-bright);
  font-weight: 700;
}

.slot-label.is-revealed {
  color: var(--color-gold);
}

.slot-name {
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-gold-bright);
}

.slot-placeholder {
  width: 84px;
  height: 140px;
  border: 1px dashed var(--color-gold-dim);
  border-radius: var(--radius-sm);
  background: var(--color-ink-raised);
}

/* ---------- 안착 피드백 ---------- */
@keyframes tarot-settle-scale {
  0%   { transform: scale(0.94); }
  55%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes tarot-settle-glow {
  0%   { box-shadow: 0 0 0 rgba(201, 162, 39, 0); }
  45%  { box-shadow: 0 0 16px rgba(201, 162, 39, 0.6); }
  100% { box-shadow: 0 0 0 rgba(201, 162, 39, 0); }
}

.slot.is-settling {
  animation: tarot-settle-scale 440ms cubic-bezier(.34, 1.56, .64, 1);
}

.slot.is-settling .card-flip,
.slot.is-settling-reduced .card-flip {
  animation: tarot-settle-glow 400ms ease-out;
}

.card-flip {
  width: 84px;
  height: 140px;
  perspective: 800px;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--dur-flip) var(--ease-flip);
}

.card-flip.is-revealed .card-flip-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold-dim);
  overflow: hidden;
  background: var(--color-ink-raised-2);
}

.card-face-back {
  background: var(--color-ink-raised-2) url("/images/tarot/tarot_card_back.png") center / cover no-repeat;
}

.card-face-front {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-face-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-fade);
}

/* ---------- 켈틱 크로스 배열 ---------- */
/* 모바일 기본: 십자 클러스터(above/left/cross/right/below)는 12열 중 가운데 4열씩
   3등분(=뷰포트 중앙 정렬), 스태프 4장은 12열을 4등분한 하단 1행으로 배치한다.
   12는 클러스터 3분할과 스태프 4분할의 최소공배수라 두 그룹 모두 대칭이 맞는다.
   cross 칸 바로 아래 caption 행은 교차(2번) 슬롯의 포지션명·카드명을 위한 전용 자리다. */
.slot-area.spread-celtic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    ".    .    .    .    above   above   above   above   .     .     .     ."
    "left left left left cross   cross   cross   cross   right right right right"
    ".    .    .    .    caption caption caption caption .     .     .     ."
    ".    .    .    .    below   below   below   below   .     .     .     ."
    "staff1 staff1 staff1 staff2 staff2 staff2 staff3 staff3 staff3 staff4 staff4 staff4";
  gap: var(--space-3) var(--space-2);
  justify-items: center;
}

.slot-area.spread-celtic .slot { width: 100%; max-width: 84px; }

.slot-area.spread-celtic .slot:nth-child(1)  { grid-area: cross; z-index: 1; }
.slot-area.spread-celtic .slot:nth-child(2)  { grid-area: cross; z-index: 2; }
.slot-area.spread-celtic .slot:nth-child(2) .card-flip { transform: rotate(90deg) scale(0.86); }
.slot-area.spread-celtic .slot:nth-child(2) .slot-placeholder { transform: rotate(90deg) scale(0.86); }
.slot-area.spread-celtic .slot:nth-child(3)  { grid-area: above; }
.slot-area.spread-celtic .slot:nth-child(4)  { grid-area: below; }
.slot-area.spread-celtic .slot:nth-child(5)  { grid-area: right; }
.slot-area.spread-celtic .slot:nth-child(6)  { grid-area: left; }
.slot-area.spread-celtic .slot:nth-child(7)  { grid-area: staff1; }
.slot-area.spread-celtic .slot:nth-child(8)  { grid-area: staff2; }
.slot-area.spread-celtic .slot:nth-child(9)  { grid-area: staff3; }
.slot-area.spread-celtic .slot:nth-child(10) { grid-area: staff4; }

/* 중심(1번)과 교차(2번) 슬롯은 같은 칸에 포개져 십자를 이룬다. 카드 겹침은 그대로 두되,
   2번의 포지션명·카드명은 1번과 같은 자리에서 겹쳐 뭉개지므로 숨기고 caption 행으로 옮긴다. */
.slot-area.spread-celtic .slot:nth-child(2) .slot-label {
  visibility: hidden;
}

.slot-area.spread-celtic .slot:nth-child(2) .slot-name {
  display: none;
}

.slot-area.spread-celtic .celtic-cross-caption {
  grid-area: caption;
  width: 100%;
  text-align: center;
}

.slot-area.spread-celtic .celtic-cross-caption-label {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
}

.slot-area.spread-celtic .celtic-cross-caption-label.is-next {
  color: var(--color-gold-bright);
  font-weight: 700;
}

.slot-area.spread-celtic .celtic-cross-caption-label.is-revealed {
  color: var(--color-gold);
}

.slot-area.spread-celtic .celtic-cross-caption-name {
  font-size: var(--text-xs);
  color: var(--color-gold-bright);
}

@media (min-width: 560px) {
  .slot-area.spread-celtic {
    grid-template-columns: repeat(3, minmax(0, 96px)) minmax(24px, 1fr) minmax(0, 96px);
    grid-template-areas:
      ".    above    .      .  staff4"
      "left cross    right  .  staff3"
      ".    caption  .      .  ."
      ".    below    .      .  staff2"
      ".    .        .      .  staff1";
  }
}

/* ---------- 대기 스피너 ---------- */
.waiting-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

.spinner-star {
  position: relative;
  width: 56px;
  height: 56px;
}

.spinner-star-tri {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(160deg, var(--color-gold-bright), var(--color-gold-dim));
}

.spinner-star-up   { animation: spin-cw 3.2s linear infinite; opacity: 0.95; }
.spinner-star-down { animation: spin-ccw 3.2s linear infinite; opacity: 0.55; }

@keyframes spin-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(180deg); } to { transform: rotate(-180deg); } }

#waitingText { color: var(--color-parchment-dim); font-size: var(--text-sm); }

/* ---------- 결과 ---------- */
.result-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.result-meta {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
  letter-spacing: 0.04em;
}

.result-text {
  font-size: var(--text-md);
  line-height: 1.9;
  white-space: pre-wrap;
  max-width: 62ch;
  color: var(--color-parchment);
}

.result-heading {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.result-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  padding: var(--space-2) 0;
}

.result-card {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.result-card img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold-dim);
}

.result-card img.is-reversed {
  transform: rotate(180deg);
}

.result-card-pos {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
  text-align: center;
}

.result-card-name {
  font-size: var(--text-xs);
  color: var(--color-gold-bright);
  text-align: center;
}

.progress-track {
  width: min(320px, 80%);
  height: 4px;
  background: var(--color-ink-raised-2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-gold-dim), var(--color-gold-bright));
  transition: width 1.5s linear;
}

.recall-block {
  border-left: 2px solid var(--color-gold-dim);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.recall-item {
  font-size: var(--text-sm);
  color: var(--color-parchment-dim);
  white-space: pre-wrap;
}

.recall-label {
  color: var(--color-gold);
  margin-right: var(--space-2);
  letter-spacing: 0.08em;
}

.access-key-box {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.access-key-box input {
  flex: 1 1 220px;
  letter-spacing: 0.03em;
  font-size: var(--text-sm);
}

.copy-status {
  font-size: var(--text-xs);
  color: var(--color-gold-bright);
  min-height: 1em;
}

/* ---------- 조회 화면 ---------- */
.lookup-form {
  flex-direction: row;
  gap: var(--space-2);
}

.lookup-form input { flex: 1 1 auto; }

.expires-text {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
}

.tip-link {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(201, 162, 39, 0.18);
  text-align: center;
  font-size: var(--text-xs);
}

.tip-link a {
  color: var(--color-parchment-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold-dim);
  padding-bottom: 1px;
  transition: color var(--dur-fade);
}

.tip-link a:hover {
  color: var(--color-gold-bright);
}

/* ---------- 후기 게시판 ---------- */
.review-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-item:last-child {
  margin-bottom: 0;
}

.review-meta {
  font-size: var(--text-xs);
  color: var(--color-parchment-dim);
  letter-spacing: 0.04em;
}

.review-item summary {
  color: var(--color-gold);
  cursor: pointer;
  font-size: var(--text-sm);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-parchment-dim);
}

/* ---------- 반응형 최소 폭 ---------- */
@media (max-width: 359px) {
  .slot { width: 78px; }
  .card-flip { width: 70px; height: 118px; }
  .slot-placeholder { width: 70px; height: 118px; }
  .deck { width: 70px; height: 118px; }
}

/* ---------- 모션 축소 선호 ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck-card {
    animation: none;
  }
  .deck.is-shuffling .deck-card {
    animation: none;
  }
  .slot.is-settling,
  .slot.is-settling .card-flip,
  .slot.is-settling-reduced .card-flip {
    animation-duration: 1ms;
  }
  .card-flip-inner {
    transition: none;
  }
  .spinner-star-up,
  .spinner-star-down {
    animation: none;
  }
  .progress-fill {
    transition: none;
  }
}