/* COUNSELING_CONSTELLATION_STAGE_V14 */

/*
  Mystic Flow 고민상담 프리미엄 성좌 무대
  - V11/V12/V13 누적 좌표를 제거한 단일 설계
  - 카드의 top 값을 카드 상단 기준으로 사용
  - 선택 화면과 결과 화면 동일 배치
  - PC와 모바일 전용 배경 및 좌표 분리
*/

#counselingSpread > .counseling-position:nth-of-type(n+9),
#counselingResultSpread > .counseling-position:nth-of-type(n+9) {
  display: none !important;
}

.counseling-position
  > .counseling-position__card
  ~ .counseling-position__card,
.counseling-position
  > .counseling-position__label
  ~ .counseling-position__label {
  display: none !important;
}

.counseling-selection,
.counseling-result {
  width: min(1220px, 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#counselingSpread,
#counselingResultSpread {
  position: relative !important;
  isolation: isolate !important;
  width: min(1180px, calc(100% - 32px)) !important;
  height: clamp(650px, 62.5vw, 760px) !important;
  min-height: 650px !important;
  margin: 12px auto 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 228, 165, 0.42) !important;
  border-radius: 38px !important;
  background:
    url(
      "/static/images/counseling/counseling-constellation-stage-pc-v14.svg"
    )
    center center / cover no-repeat !important;
  box-shadow:
    0 32px 85px rgba(42, 24, 70, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.13) inset,
    0 0 80px rgba(144, 102, 199, 0.12) inset !important;
}

#counselingSpread::before,
#counselingResultSpread::before {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 12, 34, 0.22),
      transparent 17% 83%,
      rgba(8, 12, 34, 0.22)
    ),
    linear-gradient(
      180deg,
      rgba(15, 12, 40, 0.05),
      transparent 55%,
      rgba(6, 15, 35, 0.3)
    ) !important;
}

#counselingSpread::after,
#counselingResultSpread::after {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background-image:
    radial-gradient(
      circle at 17% 24%,
      rgba(255, 242, 184, 0.92) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(236, 212, 255, 0.88) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 69% 72%,
      rgba(255, 233, 160, 0.8) 0 1px,
      transparent 2px
    );
  background-size:
    93px 89px,
    127px 113px,
    151px 137px !important;
  opacity: 0.55 !important;
  animation:
    counselingV14Stars 5.6s ease-in-out infinite !important;
}

.counseling-spread__glow {
  position: absolute !important;
  z-index: 3 !important;
  top: 25% !important;
  left: 50% !important;
  width: 39% !important;
  height: 51% !important;
  display: block !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  border: 1px solid rgba(255, 228, 153, 0.48) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(
      circle,
      rgba(255, 248, 205, 0.2),
      rgba(201, 160, 245, 0.08) 54%,
      transparent 73%
    ) !important;
  box-shadow:
    0 0 42px rgba(255, 225, 141, 0.22),
    inset 0 0 40px rgba(239, 214, 255, 0.12) !important;
  animation:
    counselingV14Portal 4.8s ease-in-out infinite !important;
}

.counseling-spread__center {
  position: absolute !important;
  z-index: 20 !important;
  top: 39% !important;
  left: 50% !important;
  width: min(35%, 380px) !important;
  min-height: 112px !important;
  padding: 20px 24px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 232, 175, 0.52) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255, 252, 238, 0.94),
      rgba(245, 231, 255, 0.9)
    ) !important;
  box-shadow:
    0 16px 40px rgba(16, 7, 39, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 28px rgba(255, 225, 150, 0.14) !important;
  text-align: center !important;
  backdrop-filter: blur(12px) !important;
}

.counseling-spread__center span {
  color: #9a6d38 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.counseling-spread__center p {
  display: -webkit-box !important;
  max-height: 76px !important;
  margin: 9px 0 0 !important;
  overflow: hidden !important;
  color: #49335f !important;
  font-size: clamp(14px, 1.45vw, 19px) !important;
  font-weight: 850 !important;
  line-height: 1.52 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

.counseling-position,
.counseling-position--1,
.counseling-position--2,
.counseling-position--3,
.counseling-position--4,
.counseling-position--5,
.counseling-position--6,
.counseling-position--7,
.counseling-position--8 {
  position: absolute !important;
  z-index: 15 !important;
  width: clamp(82px, 9vw, 116px) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

.counseling-position__card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 242, 194, 0.95) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(
      140deg,
      #fff1ad,
      #8c5bb1 45%,
      #f4c66c
    ) !important;
  box-shadow:
    0 0 0 2px rgba(93, 48, 122, 0.66),
    0 13px 29px rgba(7, 7, 28, 0.54),
    0 0 25px rgba(219, 164, 255, 0.2) !important;
  cursor: zoom-in !important;
  aspect-ratio: 2 / 3.12 !important;
  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease !important;
}

.counseling-position__card::before {
  position: absolute !important;
  z-index: 3 !important;
  inset: -60% !important;
  content: "" !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      118deg,
      transparent 42%,
      rgba(255, 255, 255, 0.66) 50%,
      transparent 58%
    ) !important;
  transform: translateX(-62%) rotate(8deg) !important;
  opacity: 0 !important;
}

.counseling-position.is-filled
  .counseling-position__card::before {
  animation:
    counselingV14CardShine 3.6s ease-in-out infinite !important;
}

.counseling-position.is-active
  .counseling-position__card {
  transform: translateY(-4px) scale(1.035) !important;
  box-shadow:
    0 0 0 2px rgba(255, 244, 194, 0.95),
    0 0 34px rgba(255, 222, 136, 0.78),
    0 16px 32px rgba(8, 5, 28, 0.55) !important;
}

.counseling-position.is-filled
  .counseling-position__card {
  box-shadow:
    0 0 0 2px rgba(255, 239, 179, 0.87),
    0 0 25px rgba(229, 172, 255, 0.42),
    0 15px 30px rgba(7, 5, 27, 0.5) !important;
}

.counseling-position__card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

.counseling-position__card.is-reversed img {
  transform: rotate(180deg) !important;
}

.counseling-position__label {
  display: flex !important;
  width: 118% !important;
  margin-top: 7px !important;
  margin-left: -9% !important;
  padding: 5px 7px 6px !important;
  align-items: center !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #fff6dc !important;
  border: 1px solid rgba(255, 226, 155, 0.35) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(
      145deg,
      rgba(38, 25, 70, 0.86),
      rgba(74, 42, 99, 0.76)
    ) !important;
  box-shadow:
    0 7px 17px rgba(8, 4, 28, 0.26) !important;
  font-size: clamp(9px, 0.9vw, 12px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  backdrop-filter: blur(8px) !important;
}

.counseling-position__label strong {
  display: inline-grid !important;
  width: 21px !important;
  height: 21px !important;
  place-items: center !important;
  color: #4b315e !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(
      145deg,
      #fff5bf,
      #e7b963
    ) !important;
  box-shadow:
    0 0 12px rgba(255, 226, 140, 0.42) !important;
  font-size: 10px !important;
}

.counseling-position__label span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #fff7e6 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/*
  PC 성좌형 배치
  카드 top은 카드 중심이 아닌 카드 상단 기준입니다.
*/
.counseling-position--1 {
  top: 5% !important;
  left: 50% !important;
}

.counseling-position--2 {
  top: 17% !important;
  left: 30% !important;
}

.counseling-position--3 {
  top: 39% !important;
  left: 15% !important;
}

.counseling-position--4 {
  top: 61% !important;
  left: 29% !important;
}

.counseling-position--5 {
  top: 67% !important;
  left: 50% !important;
}

.counseling-position--6 {
  top: 60% !important;
  left: 71% !important;
}

.counseling-position--7 {
  top: 36% !important;
  left: 85% !important;
}

.counseling-position--8 {
  top: 14% !important;
  left: 71% !important;
}

@keyframes counselingV14Stars {
  0%,
  100% {
    opacity: 0.4;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.78;
    filter: brightness(1.18);
  }
}

@keyframes counselingV14Portal {
  0%,
  100% {
    opacity: 0.62;
    transform: translateX(-50%) scale(0.97);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.035);
  }
}

@keyframes counselingV14CardShine {
  0%,
  36% {
    opacity: 0;
    transform: translateX(-66%) rotate(8deg);
  }

  48% {
    opacity: 0.72;
  }

  66%,
  100% {
    opacity: 0;
    transform: translateX(66%) rotate(8deg);
  }
}

/* 태블릿·작은 PC */
@media (min-width: 641px) and (max-width: 960px) {
  #counselingSpread,
  #counselingResultSpread {
    width: calc(100% - 24px) !important;
    height: 680px !important;
    min-height: 680px !important;
    border-radius: 30px !important;
  }

  .counseling-position,
  .counseling-position--1,
  .counseling-position--2,
  .counseling-position--3,
  .counseling-position--4,
  .counseling-position--5,
  .counseling-position--6,
  .counseling-position--7,
  .counseling-position--8 {
    width: clamp(76px, 10vw, 92px) !important;
  }

  .counseling-spread__center {
    width: min(37%, 300px) !important;
    padding: 17px 15px !important;
  }

  .counseling-position--3 {
    left: 13% !important;
  }

  .counseling-position--7 {
    left: 87% !important;
  }
}

/* 모바일 */
@media (max-width: 640px) {
  .counseling-selection,
  .counseling-result {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #counselingSpread,
  #counselingResultSpread {
    width: 100% !important;
    height: clamp(560px, 146vw, 720px) !important;
    min-height: 560px !important;
    margin: 8px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      url(
        "/static/images/counseling/counseling-constellation-stage-mobile-v14.svg"
      )
      center center / cover no-repeat !important;
    box-shadow:
      0 22px 52px rgba(39, 22, 67, 0.24) !important;
  }

  #counselingSpread::before,
  #counselingResultSpread::before,
  #counselingSpread::after,
  #counselingResultSpread::after {
    border-radius: 0 !important;
  }

  .counseling-spread__glow {
    top: 36% !important;
    width: 52% !important;
    height: 37% !important;
  }

  .counseling-spread__center {
    top: 3% !important;
    width: 64% !important;
    min-height: 78px !important;
    padding: 10px 13px !important;
    border-radius: 18px !important;
  }

  .counseling-spread__center span {
    font-size: 9px !important;
  }

  .counseling-spread__center p {
    max-height: 42px !important;
    margin-top: 5px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }

  .counseling-position,
  .counseling-position--1,
  .counseling-position--2,
  .counseling-position--3,
  .counseling-position--4,
  .counseling-position--5,
  .counseling-position--6,
  .counseling-position--7,
  .counseling-position--8 {
    width: clamp(50px, 15vw, 68px) !important;
  }

  .counseling-position__card {
    padding: 2px !important;
    border-radius: 8px !important;
  }

  .counseling-position__card img {
    border-radius: 6px !important;
  }

  .counseling-position__label {
    width: 128% !important;
    margin-top: 4px !important;
    margin-left: -14% !important;
    padding: 3px 3px 4px !important;
    gap: 1px !important;
    border-radius: 8px !important;
    font-size: clamp(6px, 1.8vw, 9px) !important;
  }

  .counseling-position__label strong {
    width: 17px !important;
    height: 17px !important;
    font-size: 8px !important;
  }

  .counseling-position--1 {
    top: 17% !important;
    left: 50% !important;
  }

  .counseling-position--2 {
    top: 28% !important;
    left: 27% !important;
  }

  .counseling-position--3 {
    top: 45% !important;
    left: 11% !important;
  }

  .counseling-position--4 {
    top: 62% !important;
    left: 28% !important;
  }

  .counseling-position--5 {
    top: 72% !important;
    left: 50% !important;
  }

  .counseling-position--6 {
    top: 62% !important;
    left: 72% !important;
  }

  .counseling-position--7 {
    top: 45% !important;
    left: 89% !important;
  }

  .counseling-position--8 {
    top: 28% !important;
    left: 73% !important;
  }

  .counseling-selection__progress {
    margin: 13px 14px 0 !important;
  }

  .counseling-deck-section {
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  .counseling-selection__complete {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #counselingSpread::after,
  #counselingResultSpread::after,
  .counseling-spread__glow,
  .counseling-position__card::before {
    animation: none !important;
  }
}

/* COUNSELING_PREMIUM_STAGE_V15_START */

/* 업로드한 프리미엄 일러스트를 선택·결과 무대에 적용 */
#counselingSpread,
#counselingResultSpread {
  background:
    linear-gradient(
      180deg,
      rgba(8, 5, 28, 0.04),
      rgba(8, 5, 28, 0.13)
    ),
    url(
      "/static/images/counseling/counseling-premium-stage-v15.png?v=20260724"
    )
    center center / cover no-repeat !important;

  box-shadow:
    0 36px 90px rgba(35, 20, 62, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 96px rgba(181, 125, 255, 0.12) inset !important;
}

/* 별빛 오버레이 */
#counselingSpread::after,
#counselingResultSpread::after {
  opacity: 0.8 !important;
  animation:
    counselingV15Twinkle 4.4s ease-in-out infinite !important;
}

/* 중앙 마법진 호흡 효과 */
.counseling-spread__glow {
  box-shadow:
    0 0 52px rgba(255, 222, 133, 0.26),
    0 0 90px rgba(190, 137, 255, 0.15),
    inset 0 0 48px rgba(247, 229, 255, 0.13) !important;

  animation:
    counselingV15PortalPulse 4s ease-in-out infinite !important;
}

/* 중앙 고민 표시판 */
.counseling-spread__center {
  border-color:
    rgba(255, 228, 159, 0.64) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 250, 239, 0.96),
      rgba(245, 231, 255, 0.92)
    ) !important;

  box-shadow:
    0 18px 46px rgba(18, 10, 42, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 34px rgba(255, 227, 148, 0.17) !important;
}

/* 카드 테두리 */
.counseling-position__card {
  border-color:
    rgba(255, 244, 196, 0.96) !important;

  background:
    linear-gradient(
      140deg,
      #fff2b2,
      #9b63c1 43%,
      #f3c56a
    ) !important;

  box-shadow:
    0 0 0 2px rgba(96, 47, 129, 0.72),
    0 14px 30px rgba(5, 3, 24, 0.58),
    0 0 23px rgba(217, 160, 255, 0.24) !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease !important;
}

/* 카드 표면을 가로지르는 금빛 광선 */
.counseling-position__card::before {
  position: absolute !important;
  z-index: 4 !important;
  inset: -60% !important;
  content: "" !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      118deg,
      transparent 42%,
      rgba(255, 255, 255, 0.84) 50%,
      transparent 58%
    ) !important;

  opacity: 0;
  transform:
    translateX(-68%)
    rotate(8deg) !important;
}

/* PC hover */
@media (hover: hover) and (pointer: fine) {
  .counseling-position__card:hover {
    z-index: 30 !important;
    transform:
      translateY(-9px)
      scale(1.055) !important;

    filter:
      brightness(1.09)
      saturate(1.08) !important;

    box-shadow:
      0 0 0 2px rgba(255, 247, 200, 1),
      0 0 42px rgba(255, 221, 116, 0.72),
      0 22px 38px rgba(6, 3, 27, 0.64) !important;
  }

  .counseling-position__card:hover::before {
    animation:
      counselingV15CardShine 1.7s ease-in-out infinite !important;
  }
}

/* 현재 선택할 슬롯 */
.counseling-position.is-active
  .counseling-position__card {
  transform:
    translateY(-5px)
    scale(1.035) !important;

  box-shadow:
    0 0 0 2px rgba(255, 244, 193, 0.98),
    0 0 37px rgba(255, 219, 115, 0.78),
    0 18px 36px rgba(7, 4, 29, 0.62) !important;

  animation:
    counselingV15ActivePulse 1.9s ease-in-out infinite !important;
}

.counseling-position.is-active
  .counseling-position__card::before {
  animation:
    counselingV15CardShine 2s ease-in-out infinite !important;
}

/* 실제 카드가 놓인 슬롯 */
.counseling-position.is-filled
  .counseling-position__card {
  box-shadow:
    0 0 0 2px rgba(255, 239, 178, 0.95),
    0 0 30px rgba(225, 165, 255, 0.48),
    0 0 20px rgba(255, 225, 143, 0.26),
    0 17px 34px rgba(7, 4, 29, 0.58) !important;

  animation:
    counselingV15FilledFloat 3.2s ease-in-out infinite !important;
}

.counseling-position.is-filled
  .counseling-position__card::before {
  animation:
    counselingV15CardShine 3.4s ease-in-out infinite !important;
}

/* 라벨 */
.counseling-position__label {
  border-color:
    rgba(255, 227, 157, 0.55) !important;

  background:
    linear-gradient(
      145deg,
      rgba(38, 23, 73, 0.94),
      rgba(77, 43, 108, 0.88)
    ) !important;

  box-shadow:
    0 9px 21px rgba(6, 3, 25, 0.38),
    inset 0 0 16px rgba(255, 223, 142, 0.07) !important;
}

.counseling-position__label strong {
  box-shadow:
    0 0 15px rgba(255, 225, 137, 0.52) !important;
}

/*
  모바일:
  가로 배경을 무리하게 cover하면 여우와 태양이 크게 잘리므로
  contain으로 전체 이미지를 보여주고 배경 여백을 같은 색으로 채웁니다.
*/
@media (max-width: 640px) {
  #counselingSpread,
  #counselingResultSpread {
    background-color: #17122f !important;

    background-image:
      linear-gradient(
        180deg,
        rgba(8, 5, 28, 0.03),
        rgba(8, 5, 28, 0.10)
      ),
      url(
        "/static/images/counseling/counseling-premium-stage-v15.png?v=20260724"
      ) !important;

    background-position:
      center center,
      center center !important;

    background-size:
      100% 100%,
      contain !important;

    background-repeat:
      no-repeat,
      no-repeat !important;
  }

  .counseling-position.is-active
    .counseling-position__card {
    transform:
      translateY(-3px)
      scale(1.025) !important;
  }
}

@keyframes counselingV15Twinkle {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.92);
  }

  50% {
    opacity: 0.96;
    filter: brightness(1.2);
  }
}

@keyframes counselingV15PortalPulse {
  0%,
  100% {
    opacity: 0.6;
    transform:
      translateX(-50%)
      scale(0.97);
  }

  50% {
    opacity: 1;
    transform:
      translateX(-50%)
      scale(1.04);
  }
}

@keyframes counselingV15CardShine {
  0%,
  32% {
    opacity: 0;
    transform:
      translateX(-68%)
      rotate(8deg);
  }

  48% {
    opacity: 0.86;
  }

  70%,
  100% {
    opacity: 0;
    transform:
      translateX(68%)
      rotate(8deg);
  }
}

@keyframes counselingV15ActivePulse {
  0%,
  100% {
    filter:
      brightness(0.98)
      saturate(1);
  }

  50% {
    filter:
      brightness(1.14)
      saturate(1.12);
  }
}

@keyframes counselingV15FilledFloat {
  0%,
  100% {
    filter: brightness(0.99);
    transform: translateY(0);
  }

  50% {
    filter: brightness(1.08);
    transform: translateY(-3px);
  }
}

/* COUNSELING_PREMIUM_STAGE_V15_END */