/* ========================================
   타로 페이지 스타일
   프리미엄 미스틱 카드 디자인
   ======================================== */

.tarot-page {
  padding-top: 80px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(212, 168, 67, 0.3));
  margin-bottom: 0.5rem;
  padding-top: 2rem;
}

.section-desc {
  text-align: center;
  color: var(--gray);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.hidden { display: none !important; }

/* ── 카테고리 선택 ── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.category-card {
  background: var(--card-bg);
  border: 1px solid rgba(205, 170, 80, 0.18);
  border-radius: 16px;
  padding: 2rem 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--white);
  font-family: inherit;
}

.category-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.15);
}

.cat-icon { font-size: 2.5rem; display: block; margin-bottom: 0.8rem; }

/* ── 카테고리 카드 기하학 심볼 ── */
.cat-geo {
  width: 90px;
  height: 90px;
  margin: 0 auto 0.8rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.cat-geo-svg {
  width: 100%;
  height: 100%;
}

/* 기본 상태: 선이 어둡고 안 보임 (dash로 숨김) */
.geo-line {
  fill: none;
  stroke: rgba(180, 150, 60, 0.15);
  stroke-width: 1;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 0s, stroke 0.3s, filter 0.3s;
}

.geo-dot {
  fill: rgba(180, 150, 60, 0.1);
  stroke: none;
  transition: fill 0.3s, filter 0.3s;
}

/* 초기 표시 상태 (선이 보이되 어둡게) */
.cat-geo-svg .geo-line {
  stroke-dashoffset: 0;
  stroke: rgba(180, 150, 60, 0.18);
  stroke-width: 0.8;
}

.cat-geo-svg .geo-dot {
  fill: rgba(180, 150, 60, 0.15);
}

/* ── 호버: 중앙→외곽 도미노 + 글로우 ── */
.category-card:hover .geo-line {
  stroke-dashoffset: 0;
  stroke-width: 1.2;
}

/* 중앙 점 — 즉시 빛남 */
.category-card:hover .geo-dot {
  fill: rgba(255, 215, 80, 0.8);
  filter: drop-shadow(0 0 6px rgba(255, 215, 80, 0.8));
  transition: fill 0.15s, filter 0.15s;
}

/* 코어 (중앙 원/삼각형) — 0.15s 후 그려짐 */
.category-card:hover .geo-core {
  stroke: rgba(240, 200, 70, 0.7);
  stroke-dashoffset: 0;
  stroke-dasharray: 500;
  animation: drawLine 0.6s ease-out 0.1s both;
  filter: drop-shadow(0 0 4px rgba(255, 215, 80, 0.4));
}

/* 꽃잎/내부 — 0.4s 후 그려짐 */
.category-card:hover .geo-petal {
  stroke: rgba(230, 190, 65, 0.6);
  stroke-dashoffset: 0;
  stroke-dasharray: 500;
  animation: drawLine 0.5s ease-out 0.35s both;
  filter: drop-shadow(0 0 3px rgba(255, 215, 80, 0.3));
}

/* 내부 원 — 0.3s 후 */
.category-card:hover .geo-inner {
  stroke: rgba(245, 210, 75, 0.75);
  animation: drawLine 0.4s ease-out 0.25s both;
  filter: drop-shadow(0 0 5px rgba(255, 215, 80, 0.5));
}

/* 광선 — 0.5s 후 빠르게 */
.category-card:hover .geo-ray {
  stroke: rgba(240, 200, 70, 0.55);
  animation: drawLine 0.3s ease-out 0.5s both;
  filter: drop-shadow(0 0 3px rgba(255, 215, 80, 0.3));
}

/* 외곽 원 — 0.7s 후 마지막에 그려짐 */
.category-card:hover .geo-outer {
  stroke: rgba(230, 190, 65, 0.55);
  animation: drawLine 0.8s ease-out 0.6s both;
}

/* 전체 완성 후 글로우 폭발 (1.2s 후) */
.category-card:hover .cat-geo-svg {
  animation: geoGlowBurst 0.6s ease-out 1.2s both;
}

@keyframes drawLine {
  0% {
    stroke-dashoffset: 500;
    opacity: 0.3;
  }
  60% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes geoGlowBurst {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 215, 80, 0));
  }
  40% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 80, 0.6)) drop-shadow(0 0 40px rgba(255, 200, 50, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 12px rgba(255, 215, 80, 0.4)) drop-shadow(0 0 25px rgba(255, 200, 50, 0.15));
  }
}

/* 호버 해제 시 부드럽게 사라짐 */
.category-card .geo-line {
  transition: stroke 0.5s ease, filter 0.5s ease;
}
.category-card .geo-dot {
  transition: fill 0.5s ease, filter 0.5s ease;
}
.category-card .cat-geo-svg {
  transition: filter 0.5s ease;
}
.category-card h3 {
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}
.category-card p { color: var(--gray); font-size: 0.9rem; margin-bottom: 0.8rem; }
.cat-cards {
  display: inline-block;
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

/* ── 카드 선택 단계 ── */
.step-select {
  text-align: center;
  padding-bottom: 3rem;
}

/* 선택된 카드 슬롯 */
.selected-slots {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
  min-height: 140px;
  flex-wrap: wrap;
  padding: 0 1rem;
}

.slot {
  width: 90px;
  height: 130px;
  border: 2px dashed rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.8rem;
  transition: all 0.3s;
  position: relative;
  background: rgba(26, 10, 46, 0.3);
}

.slot.filled {
  border-style: solid;
  border-color: rgba(205, 170, 80, 0.7);
  background: linear-gradient(145deg, #0a0a0a 0%, #1a1510 50%, #0a0a0a 100%);
  box-shadow: 0 0 18px rgba(205, 170, 80, 0.25), inset 0 0 10px rgba(205, 170, 80, 0.08);
  position: relative;
  overflow: hidden;
  padding: 0;
  font-size: 0;
}

/* 슬롯 안의 뒷면 아트 */
.slot.filled .card-back-art {
  position: absolute;
  inset: 0;
}
.slot.filled .slot-label {
  font-size: 0.75rem;
}

.slot-label {
  position: absolute;
  bottom: -22px;
  font-size: 0.75rem;
  color: var(--gray);
  white-space: nowrap;
}

/* ── 카드 덱 (부채형 배치) ── */
.card-deck {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 300px;
  margin: 1rem auto 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── 카드 뒷면 디자인 (덱) ── */
.deck-card {
  position: absolute;
  width: 75px;
  height: 115px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s;
  transform-origin: bottom center;
  user-select: none;

  /* 블랙+골드 뒷면 */
  background: linear-gradient(145deg, #0a0a0a 0%, #1a1510 50%, #0a0a0a 100%);
  border: 1.5px solid rgba(205, 170, 80, 0.45);
  overflow: hidden;
}

/* 외곽 장식 이중 테두리 */
.deck-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(205, 170, 80, 0.25);
  border-radius: 5px;
  z-index: 2;
}

/* 기하학 문양 + 중앙 심볼 */
.deck-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* 중앙 원 */
    radial-gradient(circle at 50% 50%, rgba(205, 170, 80, 0.12) 0%, transparent 30%),
    /* 십자선 */
    linear-gradient(0deg, transparent 46%, rgba(205, 170, 80, 0.08) 50%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(205, 170, 80, 0.08) 50%, transparent 54%),
    /* 대각선 */
    linear-gradient(45deg, transparent 46%, rgba(205, 170, 80, 0.05) 50%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(205, 170, 80, 0.05) 50%, transparent 54%),
    /* 방사형 */
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(205, 170, 80, 0.03) 0deg 5deg,
      transparent 5deg 15deg
    ),
    /* 코너 악센트 */
    radial-gradient(circle at 12% 12%, rgba(205, 170, 80, 0.08) 0%, transparent 18%),
    radial-gradient(circle at 88% 12%, rgba(205, 170, 80, 0.08) 0%, transparent 18%),
    radial-gradient(circle at 12% 88%, rgba(205, 170, 80, 0.08) 0%, transparent 18%),
    radial-gradient(circle at 88% 88%, rgba(205, 170, 80, 0.08) 0%, transparent 18%);
}

.deck-card:hover {
  transform: var(--fan-transform) translateY(-20px) !important;
  box-shadow:
    0 0 15px rgba(205, 170, 80, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.5);
  border-color: rgba(205, 170, 80, 0.8);
  z-index: 100 !important;
}

.deck-card.selected {
  opacity: 0.25;
  pointer-events: none;
  transform: var(--fan-transform) translateY(10px) !important;
  filter: grayscale(0.5);
}

.deck-card.glow-select {
  animation: cardGlow 0.6s ease;
}

@keyframes cardGlow {
  0% { box-shadow: 0 0 0 rgba(205, 170, 80, 0); }
  40% { box-shadow: 0 0 40px rgba(205, 170, 80, 0.5), inset 0 0 15px rgba(205, 170, 80, 0.1); }
  100% { box-shadow: 0 0 0 rgba(205, 170, 80, 0); }
}

/* ── 결과 단계 ── */
.step-result {
  padding: 0 1.5rem 3rem;
  max-width: 800px;
  margin: 0 auto;
}

.result-cards {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.result-card {
  perspective: 1000px;
  width: 180px;
  height: 270px;
}

.result-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-card.flipped .result-card-inner {
  transform: rotateY(180deg);
}

.result-card-front, .result-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 결과 카드 뒷면 (뒤집기 전) - 블랙+골드 */
.result-card-front {
  background: linear-gradient(145deg, #0a0a0a 0%, #1a1510 50%, #0a0a0a 100%);
  border: 2px solid rgba(205, 170, 80, 0.4);
}

.result-card-front::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(205, 170, 80, 0.2);
  border-radius: 8px;
}

.result-card-front::after {
  content: '';
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(205, 170, 80, 0.1) 0%, transparent 35%),
    linear-gradient(0deg, transparent 46%, rgba(205, 170, 80, 0.06) 50%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(205, 170, 80, 0.06) 50%, transparent 54%),
    linear-gradient(45deg, transparent 46%, rgba(205, 170, 80, 0.04) 50%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(205, 170, 80, 0.04) 50%, transparent 54%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(205,170,80,0.03) 0deg 5deg, transparent 5deg 15deg);
}

/* 결과 카드 앞면 (뒤집힌 후) - 블랙+골드 */
.result-card-back {
  transform: rotateY(180deg);
  padding: 12px 8px;
  text-align: center;
  background: linear-gradient(170deg, #0d0d0d 0%, #151210 30%, #1a1510 60%, #0d0d0d 100%);
  border: 2px solid rgba(205, 170, 80, 0.6);
  box-shadow:
    0 0 20px rgba(205, 170, 80, 0.15),
    inset 0 0 20px rgba(10, 10, 10, 0.5);
}

/* 앞면 외곽 이중 테두리 */
.result-card-back::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(205, 170, 80, 0.3);
  border-radius: 7px;
  pointer-events: none;
  z-index: 1;
}

/* 배경 미세 장식 */
.result-card-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(205, 170, 80, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(205, 170, 80, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.result-card-back .card-symbol {
  font-size: 2.8rem;
  margin-bottom: 0.2rem;
  display: block;
  filter: drop-shadow(0 0 8px rgba(205, 170, 80, 0.35));
  z-index: 2;
  position: relative;
}

.result-card-back .card-number {
  font-size: 0.8rem;
  color: rgba(205, 170, 80, 0.85);
  margin-bottom: 0.2rem;
  letter-spacing: 3px;
  z-index: 2;
  position: relative;
  font-weight: 300;
}

.result-card-back .card-name {
  font-size: 0.65rem;
  color: rgba(230, 220, 200, 0.9);
  line-height: 1.4;
  word-break: keep-all;
  padding: 0 0.4rem;
  z-index: 2;
  position: relative;
}

.result-card-back .card-direction {
  font-size: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  z-index: 2;
  position: relative;
}

.result-card-back .card-direction.upright {
  color: rgba(168, 200, 220, 0.9);
  background: rgba(168, 200, 220, 0.1);
  border: 1px solid rgba(168, 200, 220, 0.2);
}

.result-card-back .card-direction.reversed {
  color: rgba(220, 168, 180, 0.9);
  background: rgba(220, 168, 180, 0.1);
  border: 1px solid rgba(220, 168, 180, 0.2);
}

/* 카드 뒤집기 빛 효과 */
.result-card.flipped .result-card-back {
  animation: cardRevealGlow 1.2s ease-out;
}

@keyframes cardRevealGlow {
  0% { box-shadow: 0 0 0 rgba(205, 170, 80, 0); }
  30% { box-shadow: 0 0 40px rgba(205, 170, 80, 0.4), 0 0 60px rgba(205, 170, 80, 0.15); }
  100% { box-shadow: 0 0 20px rgba(205, 170, 80, 0.15); }
}

.card-position-label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 0.6rem;
}

/* 결과 카드 페이드인 등장 */
.result-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.result-card.appeared {
  opacity: 1;
  transform: translateY(0);
}

/* 클릭해서 뒤집는 단계: 커서 + 호버 강조 */
.result-card.clickable {
  cursor: pointer;
}
.result-card.clickable:hover .result-card-inner {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 8px 18px rgba(205, 170, 80, 0.35));
}

/* 카드 뒤집으세요 안내 */
.card-flip-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--gold);
  margin-top: 0.35rem;
  letter-spacing: 0.5px;
  animation: flip-hint-pulse 1.6s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.card-flip-hint.hidden {
  opacity: 0;
  animation: none;
  pointer-events: none;
}
@keyframes flip-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* 해석 대기 메시지 */
.flip-waiting-msg {
  text-align: center;
  color: var(--gray);
  font-size: 0.92rem;
  padding: 1.2rem 0;
  letter-spacing: 0.3px;
}

/* ── 해석 결과 ── */
.result-interpretation {
  background: var(--card-bg);
  border: 1px solid rgba(205, 170, 80, 0.15);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  line-height: 1.9;
  font-size: 0.95rem;
  color: var(--white);
  backdrop-filter: blur(10px);
}
.result-interpretation .premium-interpretation p {
  margin-bottom: 0.8rem;
}
.result-interpretation .interp-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  margin: 1.5rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(205, 170, 80, 0.2);
}
.result-interpretation .interp-label {
  color: var(--gold);
  font-weight: 600;
}
.result-interpretation .premium-interpretation {
  word-break: keep-all;
}

/* ── 로딩 스피너 ── */
.loading-spinner {
  text-align: center;
  padding: 2rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 215, 0, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner p {
  color: var(--gray);
  font-size: 0.9rem;
}

/* ── 결과 액션 ── */
.result-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

/* ── 다른 서비스 유도 ── */
.cross-links {
  border-top: 1px solid rgba(205, 170, 80, 0.12);
  padding-top: 2rem;
}

.cross-links h3 {
  text-align: center;
  color: var(--gray);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.cross-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.cross-card {
  background: var(--card-bg);
  border: 1px solid rgba(205, 170, 80, 0.12);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cross-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.cross-card span { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.cross-card p { color: var(--gray); font-size: 0.85rem; }

/* ── 모바일 반응형 ── */
@media (max-width: 768px) {
  .section-title { font-size: 1.5rem; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .card-deck { height: 250px; }
  .deck-card { width: 55px; height: 85px; }
  .deck-card::after { font-size: 1.1rem; }
  .result-card { width: 145px; height: 218px; }
  .result-card-back .card-symbol { font-size: 2.2rem; }
  .result-card-back .card-name { font-size: 0.6rem; }
  .result-card-back .card-number { font-size: 0.8rem; }
  .selected-slots { gap: 0.8rem; }
  .slot { width: 70px; height: 100px; }
  .result-cards { gap: 0.8rem; }
}

@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr; }
  .result-card { width: 108px; height: 162px; }
  .result-card-back .card-symbol { font-size: 1.8rem; }
  .result-cards { gap: 0.6rem; }
  .step-result { padding: 0 0.8rem 3rem; }
}

@media (max-width: 360px) {
  .result-card { width: 98px; height: 147px; }
  .result-cards { gap: 0.5rem; }
}