.destiny-page {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 38px 20px 120px;
}

.destiny-intro {
  margin-bottom: 28px;
  text-align: center;
}

.destiny-intro__eyebrow {
  margin: 0 0 8px;
  color: #8d6cc5;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.destiny-intro__title {
  margin: 0;
  color: #40364d;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.24;
  letter-spacing: -0.045em;
}

.destiny-intro__description {
  max-width: 580px;
  margin: 17px auto 0;
  color: #776e7e;
  line-height: 1.8;
}

.destiny-progress {
  display: flex;
  max-width: 630px;
  margin: 0 auto 28px;
  justify-content: center;
  gap: 8px;
}

.destiny-progress span {
  flex: 1;
  border-radius: 999px;
  background: #eee8f2;
  padding: 10px;
  color: #9b91a2;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.destiny-progress span.is-active {
  background: #9b7bd1;
  color: #ffffff;
}

.destiny-panel,
.destiny-loading {
  border: 1px solid rgba(120, 92, 151, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(225, 209, 246, 0.58),
      transparent 32%
    ),
    #fffdfb;
  padding: clamp(22px, 5vw, 48px);
  box-shadow:
    0 24px 60px
    rgba(84, 58, 107, 0.1);
}

.panel-heading {
  display: flex;
  margin-bottom: 28px;
  align-items: center;
  gap: 14px;
}

.panel-heading--center {
  justify-content: center;
}

.panel-heading__icon {
  display: grid;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: #f0e6f7;
  place-items: center;
  font-size: 1.4rem;
}

.panel-heading p,
.result-card__label {
  margin: 0 0 4px;
  color: #9274b1;
  font-size: 0.75rem;
  font-weight: 800;
}

.panel-heading h2 {
  margin: 0;
  color: #493e54;
  font-size: 1.45rem;
}

#destinyProfileForm {
  display: grid;
  gap: 23px;
}

.field {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.field label,
.field__label,
.field legend {
  color: #51475c;
  font-size: 0.9rem;
  font-weight: 800;
}

.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #ded5e6;
  border-radius: 14px;
  outline: none;
  background: #ffffff;
  padding: 14px 15px;
  color: #4a4154;
  font: inherit;
  box-sizing: border-box;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #a98bd2;
  box-shadow:
    0 0 0 4px
    rgba(169, 139, 210, 0.13);
}

.field small {
  color: #9a91a0;
  text-align: right;
}

.choice-row,
.interest-grid {
  display: grid;
  gap: 10px;
}

.choice-row {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.interest-grid {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}

.choice-row input,
.interest-grid input {
  position: absolute;
  opacity: 0;
}

.choice-row label span,
.interest-grid label span {
  display: grid;
  min-height: 48px;
  border: 1px solid #ddd4e4;
  border-radius: 14px;
  background: #ffffff;
  padding: 10px;
  place-items: center;
  color: #74697d;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.choice-row input:checked + span,
.interest-grid input:checked + span {
  border-color: #a382ca;
  background: #f1e7f8;
  color: #68478e;
}

.privacy-note {
  margin: 0;
  border-radius: 15px;
  background: #f6f1f8;
  padding: 14px 16px;
  color: #7d7285;
  font-size: 0.79rem;
  line-height: 1.6;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 50px;
  border: 0;
  border-radius: 15px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
}

.primary-button {
  background:
    linear-gradient(
      135deg,
      #9270bf,
      #bd86b3
    );
  color: #ffffff;
  box-shadow:
    0 13px 24px
    rgba(129, 87, 158, 0.21);
}

.secondary-button {
  border: 1px solid #d8cde2;
  background: #ffffff;
  color: #6f5a80;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.card-guide,
.selection-message {
  color: #756b7c;
  text-align: center;
  line-height: 1.7;
}

.tarot-deck {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  width: min(100%, 560px);
  margin: 34px auto 38px;
  gap: clamp(14px, 4vw, 28px);
  perspective: 1200px;
  isolation: isolate;
}

.tarot-card {
  display: flex;
  aspect-ratio: 0.62;
  border: 5px solid #f5e8c8;
  border-radius: 14px;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 235, 164, 0.2),
      transparent 24%
    ),
    linear-gradient(
      160deg,
      #5f477f,
      #30294e
    );
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f1d993;
  cursor: pointer;
  box-shadow:
    0 14px 25px
    rgba(64, 43, 86, 0.2);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.tarot-card:hover {
  transform: translateY(-8px);
}

.tarot-card.is-selected {
  transform:
    translateY(-14px)
    scale(1.05);
  box-shadow:
    0 0 0 5px
    rgba(241, 207, 112, 0.2),
    0 22px 34px
    rgba(64, 43, 86, 0.27);
}

.tarot-card span {
  font-size: 2rem;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.text-button {
  display: block;
  margin: 20px auto 0;
  border: 0;
  background: transparent;
  color: #8d7b9b;
  cursor: pointer;
}

.destiny-loading {
  text-align: center;
}

.destiny-loading > div {
  display: grid;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff,
      #dbc7ee 35%,
      #8662ad 72%
    );
  place-items: center;
  color: #ffffff;
  font-size: 1.8rem;
  animation:
    float-orb 1.7s
    ease-in-out infinite;
}

@keyframes float-orb {
  50% {
    transform: translateY(-8px);
  }
}

.result-header {
  margin-bottom: 24px;
  text-align: center;
}

.result-header > p {
  margin: 0 0 8px;
  color: #9473b0;
  font-size: 0.8rem;
  font-weight: 800;
}

.result-header h2 {
  margin: 0 0 10px;
  color: #43374e;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.25;
}

.result-header > span {
  color: #7a6e82;
}

.demo-notice {
  width: fit-content;
  margin: 17px auto 0;
  border-radius: 12px;
  background: #fff4dc;
  padding: 10px 14px;
  color: #8d6b35;
  font-size: 0.76rem;
}

.result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.result-card {
  border: 1px solid rgba(119, 91, 145, 0.13);
  border-radius: 24px;
  background: #fffdfb;
  padding: 27px;
  box-shadow:
    0 16px 38px
    rgba(76, 54, 93, 0.07);
}

.result-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: #f0e6f7;
  place-items: center;
}

.result-card h3 {
  margin: 0 0 12px;
  color: #493e54;
}

.result-card > strong {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #f0e4f6;
  padding: 7px 11px;
  color: #765395;
  font-size: 0.75rem;
}

.result-card p,
.synthesis-card p {
  color: #706676;
  line-height: 1.8;
}

.result-card small {
  display: block;
  margin-top: 16px;
  border-top: 1px dashed #ddd3e2;
  padding-top: 13px;
  color: #9e95a5;
  line-height: 1.6;
}

.soft-box {
  margin-top: 18px;
  border-radius: 15px;
  background: #f5eef8;
  padding: 14px 15px;
}

.soft-box p {
  margin: 6px 0 0;
}

.element-list {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  margin: 16px 0;
  gap: 6px;
}

.element-item {
  border-radius: 12px;
  background: #f2f6f2;
  padding: 10px 4px;
  text-align: center;
}

.element-item strong,
.element-item span {
  display: block;
}

.element-item span {
  margin-top: 4px;
  color: #87968a;
  font-size: 0.66rem;
}

.element-item.is-low {
  background: #fff0e8;
}

.element-item.is-high {
  background: #e3f4e7;
}

.synthesis-card {
  display: grid;
  grid-template-columns:
    180px minmax(0, 1fr);
  margin-top: 20px;
  border-radius: 27px;
  background:
    linear-gradient(
      135deg,
      #f3e8f7,
      #fff4e5
    );
  padding: 30px;
  align-items: center;
  box-shadow:
    0 20px 44px
    rgba(87, 59, 106, 0.11);
}

.synthesis-card__animal {
  font-size: 5.5rem;
  text-align: center;
}

.synthesis-card h3 {
  margin: 0;
  color: #493c51;
}

.result-buttons {
  margin-top: 22px;
}

.save-message {
  min-height: 22px;
  color: #7d668a;
  text-align: center;
}

.error-box {
  margin-top: 18px;
  border: 1px solid #efb8c2;
  border-radius: 14px;
  background: #fff0f2;
  padding: 14px 16px;
  color: #a3495b;
}

[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .interest-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .tarot-deck {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    max-width: 500px;
  }

  .result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .destiny-page {
    padding:
      25px 14px 110px;
  }

  .destiny-progress span {
    padding: 9px 4px;
    font-size: 0.65rem;
  }

  .interest-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .button-row {
    flex-direction: column;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .synthesis-card {
    grid-template-columns: 1fr;
    padding: 23px 18px;
    text-align: center;
  }

  .synthesis-card__animal {
    font-size: 4.3rem;
  }
}

/* THREE_CARD_SHUFFLE_START */

.tarot-deck .tarot-card {
  position: relative;
  transform-origin: center bottom;
  will-change:
    transform,
    opacity,
    filter;
}

.tarot-deck:not(.is-shuffling) .tarot-card {
  animation:
    tarot-card-arrive
    520ms
    cubic-bezier(0.2, 0.75, 0.25, 1)
    both;
}

.tarot-deck:not(.is-shuffling) .tarot-card:nth-child(1) {
  animation-delay: 40ms;
}

.tarot-deck:not(.is-shuffling) .tarot-card:nth-child(2) {
  animation-delay: 120ms;
}

.tarot-deck:not(.is-shuffling) .tarot-card:nth-child(3) {
  animation-delay: 200ms;
}

.tarot-deck.is-shuffling {
  pointer-events: none;
}

.tarot-deck.is-shuffling .tarot-card {
  z-index: 2;
  animation:
    tarot-card-shuffle
    920ms
    cubic-bezier(0.42, 0, 0.2, 1)
    both;
}

.tarot-deck.is-shuffling .tarot-card:nth-child(1) {
  --shuffle-x: 115px;
  --shuffle-back: -38px;
  --shuffle-rotate: 9deg;
  animation-delay: 0ms;
}

.tarot-deck.is-shuffling .tarot-card:nth-child(2) {
  --shuffle-x: 0px;
  --shuffle-back: 30px;
  --shuffle-rotate: -7deg;
  animation-delay: 90ms;
}

.tarot-deck.is-shuffling .tarot-card:nth-child(3) {
  --shuffle-x: -115px;
  --shuffle-back: 38px;
  --shuffle-rotate: 9deg;
  animation-delay: 180ms;
}

.tarot-card.is-selected {
  animation:
    selected-card-glow
    720ms
    cubic-bezier(0.2, 0.75, 0.25, 1)
    both;
}

.tarot-card.is-selected::after {
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(247, 211, 119, 0.66);
  border-radius: 20px;
  content: "";
  pointer-events: none;
  animation:
    selected-ring
    1.4s
    ease-in-out
    infinite;
}

@keyframes tarot-card-arrive {
  0% {
    transform:
      translateY(26px)
      rotateY(18deg)
      scale(0.9);
    opacity: 0;
    filter: blur(4px);
  }

  100% {
    transform:
      translateY(0)
      rotateY(0)
      scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tarot-card-shuffle {
  0% {
    transform:
      translateX(0)
      translateY(0)
      rotate(0)
      scale(1);
    opacity: 1;
  }

  28% {
    transform:
      translateX(var(--shuffle-x))
      translateY(-20px)
      rotate(var(--shuffle-rotate))
      scale(0.92);
  }

  52% {
    transform:
      translateX(0)
      translateY(-36px)
      rotate(0)
      scale(1.06);
    box-shadow:
      0 28px 42px
      rgba(63, 43, 86, 0.3);
  }

  76% {
    transform:
      translateX(var(--shuffle-back))
      translateY(-12px)
      rotate(var(--shuffle-rotate))
      scale(0.95);
  }

  100% {
    transform:
      translateX(0)
      translateY(0)
      rotate(0)
      scale(1);
    opacity: 1;
  }
}

@keyframes selected-card-glow {
  0% {
    transform:
      translateY(0)
      scale(1);
  }

  45% {
    transform:
      translateY(-22px)
      scale(1.08);
  }

  100% {
    transform:
      translateY(-14px)
      scale(1.05);
  }
}

@keyframes selected-ring {
  0%,
  100% {
    transform: scale(0.97);
    opacity: 0.42;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.95;
  }
}

@media (max-width: 600px) {
  .tarot-deck {
    width: min(100%, 390px);
    gap: 11px;
  }

  .tarot-card {
    border-width: 4px;
    border-radius: 12px;
  }

  .tarot-deck.is-shuffling .tarot-card:nth-child(1) {
    --shuffle-x: 68px;
    --shuffle-back: -22px;
  }

  .tarot-deck.is-shuffling .tarot-card:nth-child(2) {
    --shuffle-x: 0px;
    --shuffle-back: 18px;
  }

  .tarot-deck.is-shuffling .tarot-card:nth-child(3) {
    --shuffle-x: -68px;
    --shuffle-back: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-deck .tarot-card,
  .tarot-deck.is-shuffling .tarot-card,
  .tarot-card.is-selected,
  .tarot-card.is-selected::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* THREE_CARD_SHUFFLE_END */

/* TWELVE_CARD_SELECTION_START */

.tarot-deck {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  width: min(100%, 920px);
  margin: 34px auto 30px;
  gap: 16px;
  perspective: 1200px;
}

.tarot-card {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 0.64;
  transform-origin: center;
  will-change:
    transform,
    opacity;
}

.tarot-card__order {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 5;
  display: none;
  width: 34px;
  height: 34px;
  border: 3px solid #fffaf0;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #f2c86a,
      #ca8f4d
    );
  place-items: center;
  color: #ffffff;
  font-size: 0.9rem !important;
  font-weight: 900;
  box-shadow:
    0 8px 18px
    rgba(82, 52, 103, 0.28);
}

.tarot-card.is-selected
.tarot-card__order {
  display: grid;
}

.tarot-card.is-selected {
  transform:
    translateY(-10px)
    scale(1.04);
  border-color: #f2ca70;
  box-shadow:
    0 0 0 4px
    rgba(242, 202, 112, 0.24),
    0 24px 38px
    rgba(64, 43, 86, 0.28);
}

.tarot-deck.is-shuffling {
  pointer-events: none;
}

.tarot-deck.is-shuffling
.tarot-card {
  animation:
    twelve-card-shuffle
    900ms
    cubic-bezier(0.42, 0, 0.2, 1)
    both;
}

.tarot-deck.is-shuffling
.tarot-card:nth-child(3n + 1) {
  --shuffle-x: 45px;
  --shuffle-r: 7deg;
}

.tarot-deck.is-shuffling
.tarot-card:nth-child(3n + 2) {
  --shuffle-x: -34px;
  --shuffle-r: -8deg;
}

.tarot-deck.is-shuffling
.tarot-card:nth-child(3n) {
  --shuffle-x: 22px;
  --shuffle-r: 5deg;
}

@keyframes twelve-card-shuffle {
  0% {
    transform:
      translateX(0)
      translateY(0)
      rotate(0)
      scale(1);
  }

  35% {
    transform:
      translateX(var(--shuffle-x))
      translateY(-22px)
      rotate(var(--shuffle-r))
      scale(0.92);
  }

  65% {
    transform:
      translateX(calc(var(--shuffle-x) * -0.7))
      translateY(10px)
      rotate(calc(var(--shuffle-r) * -1))
      scale(0.97);
  }

  100% {
    transform:
      translateX(0)
      translateY(0)
      rotate(0)
      scale(1);
  }
}

.selected-card-status {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  width: min(100%, 620px);
  margin: 18px auto 24px;
  gap: 10px;
}

.selected-card-status__item {
  display: flex;
  min-height: 50px;
  border: 1px solid #e2d9e8;
  border-radius: 14px;
  background: #faf7fb;
  padding: 9px 11px;
  align-items: center;
  gap: 9px;
  color: #92889a;
  font-size: 0.76rem;
}

.selected-card-status__item span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
  background: #e9e2ed;
  place-items: center;
  font-weight: 900;
}

.selected-card-status__item.is-complete {
  border-color: #b998d4;
  background: #f1e8f7;
  color: #67497f;
}

.selected-card-status__item.is-complete span {
  background: #9a71c2;
  color: #ffffff;
}

.result-card--wide {
  grid-column: 1 / -1;
}

.three-tarot-results {
  display: grid;
  margin-top: 22px;
  gap: 15px;
}

.tarot-result-item {
  display: grid;
  grid-template-columns:
    105px minmax(0, 1fr);
  border: 1px solid #e5dce9;
  border-radius: 19px;
  background:
    linear-gradient(
      135deg,
      #fffdfb,
      #f9f3fb
    );
  padding: 17px;
  align-items: center;
  gap: 18px;
}

.tarot-result-item__visual {
  display: flex;
  width: 90px;
  aspect-ratio: 0.64;
  border: 4px solid #f0dba0;
  border-radius: 11px;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 235, 164, 0.18),
      transparent 25%
    ),
    linear-gradient(
      160deg,
      #644b84,
      #332950
    );
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #f1d37b;
  box-shadow:
    0 13px 24px
    rgba(64, 43, 86, 0.18);
}

.tarot-result-item__visual span {
  font-size: 1.55rem;
}

.tarot-result-item__position {
  margin: 0 0 5px !important;
  color: #936eb1 !important;
  font-size: 0.76rem;
  font-weight: 900;
}

.tarot-result-item h4 {
  margin: 0 0 8px;
  color: #493d53;
  font-size: 1.05rem;
}

.tarot-result-item__keyword {
  display: inline-block;
  border-radius: 999px;
  background: #eee1f5;
  padding: 6px 10px;
  color: #765090;
  font-size: 0.72rem;
}

.tarot-result-item__description {
  margin: 10px 0 4px !important;
  color: #9b8ca3 !important;
  font-size: 0.77rem;
}

.tarot-result-item__message {
  margin: 5px 0 0 !important;
}

@media (max-width: 900px) {
  .tarot-deck {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    width: min(100%, 680px);
  }
}

@media (max-width: 600px) {
  .tarot-deck {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    width: min(100%, 390px);
    gap: 10px;
  }

  .tarot-card {
    border-width: 3px;
    border-radius: 10px;
  }

  .tarot-card__order {
    top: -8px;
    right: -7px;
    width: 27px;
    height: 27px;
    border-width: 2px;
    font-size: 0.75rem !important;
  }

  .selected-card-status {
    grid-template-columns: 1fr;
  }

  .selected-card-status__item {
    min-height: 42px;
  }

  .tarot-result-item {
    grid-template-columns:
      72px minmax(0, 1fr);
    padding: 13px;
    gap: 12px;
  }

  .tarot-result-item__visual {
    width: 65px;
    border-width: 3px;
  }

  .tarot-result-item h4 {
    font-size: 0.92rem;
  }
}

/* TWELVE_CARD_SELECTION_END */


/* RICH_DESTINY_STYLE_START */

.today-story-card {
  display: grid;
  grid-template-columns:
    120px minmax(0, 1fr);
  margin: 0 0 22px;
  border: 1px solid
    rgba(126, 91, 155, 0.14);
  border-radius: 27px;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.92),
      transparent 22%
    ),
    linear-gradient(
      135deg,
      #eee2f7,
      #fff1dc
    );
  padding: 28px;
  align-items: center;
  gap: 24px;
  box-shadow:
    0 20px 45px
    rgba(78, 53, 98, 0.1);
}

.today-story-card__moon {
  display: grid;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 32%,
      #ffffff,
      #f6e4ad 33%,
      #9b79c4 72%
    );
  place-items: center;
  color: #ffffff;
  font-size: 2.5rem;
  box-shadow:
    0 15px 32px
    rgba(96, 65, 119, 0.25);
}

.today-story-card__label {
  margin: 0 0 5px;
  color: #8c69a8;
  font-size: 0.76rem;
  font-weight: 900;
}

.today-story-card h3 {
  margin: 0;
  color: #493b53;
  font-size: clamp(
    1.45rem,
    3vw,
    2.1rem
  );
}

.today-story-card__content > p {
  color: #73687a;
  line-height: 1.75;
}

.destiny-keywords {
  display: flex;
  margin: 14px 0;
  flex-wrap: wrap;
  gap: 8px;
}

.destiny-keyword,
.palace-chip {
  display: inline-flex;
  min-height: 32px;
  border-radius: 999px;
  padding: 6px 12px;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 900;
}

.destiny-keyword {
  background: #ffffff;
  color: #75508e;
  box-shadow:
    0 6px 15px
    rgba(87, 59, 103, 0.09);
}

.today-story-card__line {
  border-radius: 15px;
  background:
    rgba(255, 255, 255, 0.68);
  padding: 14px 16px;
}

.today-story-card__line strong {
  color: #76558c;
  font-size: 0.79rem;
}

.today-story-card__line p {
  margin: 5px 0 0;
  color: #564a5d;
  line-height: 1.7;
}

.deep-reading-section {
  margin-top: 24px;
}

.deep-reading-section__heading {
  margin-bottom: 15px;
}

.deep-reading-section__heading p {
  margin: 0 0 4px;
  color: #9472ad;
  font-size: 0.78rem;
  font-weight: 900;
}

.deep-reading-section__heading h3 {
  margin: 0;
  color: #493d52;
}

.deep-reading-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.deep-reading-card {
  border: 1px solid #e3d9e8;
  border-radius: 23px;
  background: #fffdfb;
  padding: 23px;
  box-shadow:
    0 14px 34px
    rgba(75, 51, 92, 0.07);
}

.deep-reading-card__icon {
  display: grid;
  width: 45px;
  height: 45px;
  margin-bottom: 13px;
  border-radius: 14px;
  background: #f0e6f6;
  place-items: center;
  font-size: 1.25rem;
}

.deep-reading-card__label {
  margin: 0 0 5px;
  color: #9370ad;
  font-size: 0.73rem;
  font-weight: 900;
}

.deep-reading-card h4 {
  margin: 0 0 13px;
  color: #4c4054;
  line-height: 1.5;
}

.deep-reading-card > p,
.deep-reading-card__soft p {
  color: #716777;
  line-height: 1.75;
}

.deep-reading-card__soft {
  margin-top: 13px;
  border-radius: 14px;
  background: #f6eff8;
  padding: 13px 14px;
}

.deep-reading-card__soft b {
  color: #6f4f84;
  font-size: 0.79rem;
}

.deep-reading-card__soft p {
  margin: 5px 0 0;
  font-size: 0.86rem;
}

.deep-reading-card small {
  display: block;
  margin-top: 15px;
  border-top: 1px dashed #ddd3e2;
  padding-top: 12px;
  color: #9b91a1;
  font-size: 0.71rem;
  line-height: 1.6;
}

.reading-details,
.calculation-status {
  margin-top: 14px;
  border-radius: 13px;
  background: #faf7fb;
  padding: 11px 13px;
  color: #75677e;
  font-size: 0.78rem;
}

.reading-details summary,
.calculation-status summary {
  cursor: pointer;
  color: #705484;
  font-weight: 900;
}

.reading-details ul {
  margin: 11px 0 0;
  padding-left: 19px;
  line-height: 1.8;
}

.palace-chips {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 7px;
}

.palace-chip {
  background: #ebe1f4;
  color: #704e89;
}

.signal-section {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  margin-top: 22px;
  gap: 15px;
}

.signal-card {
  border-radius: 22px;
  padding: 23px;
}

.signal-card > span {
  font-size: 1.35rem;
}

.signal-card h3 {
  margin: 9px 0 12px;
  color: #493d52;
}

.signal-card ul {
  margin: 0;
  padding-left: 20px;
  color: #6e6474;
  line-height: 1.8;
}

.signal-card li + li {
  margin-top: 7px;
}

.signal-card--common {
  border: 1px solid #d8e8cf;
  background:
    linear-gradient(
      135deg,
      #f2f8ed,
      #fffdf8
    );
}

.signal-card--contrast {
  border: 1px solid #e8d7e8;
  background:
    linear-gradient(
      135deg,
      #f7eef8,
      #fffdf8
    );
}

.avoid-card {
  margin-top: 15px;
  border: 1px solid #efd5bd;
  border-radius: 18px;
  background: #fff6e9;
  padding: 17px 20px;
}

.avoid-card span {
  color: #a46c35;
  font-size: 0.76rem;
  font-weight: 900;
}

.avoid-card p {
  margin: 5px 0 0;
  color: #705a49;
  line-height: 1.7;
}

.mission-card {
  margin-top: 18px;
  border-radius: 25px;
  background:
    linear-gradient(
      135deg,
      #edf6ed,
      #fff9ea
    );
  padding: 25px;
}

.mission-card__heading {
  display: flex;
  margin-bottom: 17px;
  align-items: center;
  gap: 12px;
}

.mission-card__heading > span {
  font-size: 1.8rem;
}

.mission-card__heading p {
  margin: 0 0 3px;
  color: #799074;
  font-size: 0.75rem;
  font-weight: 900;
}

.mission-card__heading h3 {
  margin: 0;
  color: #4d5c4b;
}

.mission-list {
  display: grid;
  gap: 10px;
}

.mission-item {
  display: grid;
  grid-template-columns:
    31px minmax(0, 1fr);
  border: 1px solid
    rgba(111, 142, 105, 0.18);
  border-radius: 15px;
  background:
    rgba(255, 255, 255, 0.73);
  padding: 13px 15px;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

.mission-item input {
  position: absolute;
  opacity: 0;
}

.mission-item__check {
  display: grid;
  width: 27px;
  height: 27px;
  border: 2px solid #b7c9b3;
  border-radius: 8px;
  place-items: center;
}

.mission-item.is-complete
.mission-item__check {
  border-color: #7aa174;
  background: #7aa174;
}

.mission-item.is-complete
.mission-item__check::after {
  color: #ffffff;
  content: "✓";
  font-weight: 900;
}

.mission-item__content {
  display: grid;
  gap: 3px;
}

.mission-item__content small {
  color: #8ba087;
  font-size: 0.68rem;
  font-weight: 900;
}

.mission-item__content strong {
  color: #4c5c4a;
}

.mission-item__content > span {
  color: #71806f;
  font-size: 0.82rem;
  line-height: 1.55;
}

.mission-item.is-complete {
  opacity: 0.68;
}

.mission-item.is-complete strong,
.mission-item.is-complete
.mission-item__content > span {
  text-decoration: line-through;
}

.animal-guide-card {
  display: grid;
  grid-template-columns:
    115px minmax(0, 1fr);
  margin-top: 18px;
  border-radius: 25px;
  background:
    linear-gradient(
      135deg,
      #eee4f6,
      #fff1dd
    );
  padding: 24px;
  align-items: center;
  gap: 19px;
}

.animal-guide-card__animal {
  font-size: 4.6rem;
  text-align: center;
}

.animal-guide-card p {
  margin: 0 0 4px;
  color: #9172a6;
  font-size: 0.75rem;
  font-weight: 900;
}

.animal-guide-card h3 {
  margin: 0;
  color: #493d52;
}

.animal-guide-card blockquote {
  margin: 10px 0 0;
  color: #6d6373;
  font-style: normal;
  line-height: 1.8;
}

.calculation-status {
  margin: 16px 0 20px;
}

.calculation-status dl {
  display: grid;
  grid-template-columns:
    90px minmax(0, 1fr);
  margin: 13px 0 0;
  gap: 8px 13px;
}

.calculation-status dt {
  color: #6e5182;
  font-weight: 900;
}

.calculation-status dd {
  margin: 0;
  color: #807486;
}

@media (max-width: 900px) {
  .deep-reading-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .today-story-card {
    grid-template-columns: 1fr;
    padding: 23px 18px;
    text-align: center;
  }

  .today-story-card__moon {
    width: 82px;
    height: 82px;
    margin: 0 auto;
  }

  .destiny-keywords {
    justify-content: center;
  }

  .signal-section {
    grid-template-columns: 1fr;
  }

  .animal-guide-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .animal-guide-card__animal {
    font-size: 4rem;
  }

  .calculation-status dl {
    grid-template-columns: 1fr;
  }

  .calculation-status dd {
    margin-bottom: 6px;
  }
}

/* RICH_DESTINY_STYLE_END */


/* PERSONALIZED_PROFILE_STYLE_START */

.profile-context-note {
  color: #95899c !important;
  font-size: 0.72rem !important;
  line-height: 1.55;
  text-align: left !important;
}

.demo-notice {
  max-width: 640px;
  line-height: 1.55;
}

/*
  실제 계산 기반 균형 모듈이 연결될 때까지
  임의 수치처럼 보일 수 있는 균형 표시는 감춥니다.
*/
#elementList,
#elementList + p {
  display: none;
}

.result-card small {
  line-height: 1.7;
}

@media (min-width: 760px) {
  #destinyProfileForm {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #destinyProfileForm .interest-grid,
  #destinyProfileForm .privacy-note,
  #destinyProfileForm .primary-button,
  #destinyProfileForm fieldset,
  #destinyProfileForm .field:has(textarea) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  #destinyProfileForm {
    grid-template-columns: 1fr;
  }
}

/* PERSONALIZED_PROFILE_STYLE_END */


/* DAILY_DESTINY_LOCK_STYLE_START */

.tarot-result-item__visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

#saveMessage:not(:empty) {
  display: block;
  margin-top: 12px;
  border: 1px solid
    rgba(126, 91, 155, 0.15);
  border-radius: 14px;
  background:
    rgba(247, 239, 250, 0.85);
  padding: 12px 15px;
  color: #705681;
  font-size: 0.79rem;
  line-height: 1.65;
}

#cardSelectionMessage {
  line-height: 1.65;
}

/* DAILY_DESTINY_LOCK_STYLE_END */


/* MEMBER_AUTH_GATE_STYLE_START */

.auth-entry-notice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(126, 91, 155, 0.13);
  border-radius: 17px;
  background: linear-gradient(135deg, #faf5fc, #fffaf0);
  padding: 14px 16px;
  align-items: start;
  gap: 11px;
}

.auth-entry-notice__icon {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eee2f7;
  place-items: center;
}

.auth-entry-notice__content strong {
  display: block;
  color: #5b4868;
  font-size: 0.82rem;
}

.auth-entry-notice__content p {
  margin: 4px 0 0;
  color: #8a7c91;
  font-size: 0.72rem;
  line-height: 1.6;
}

.auth-entry-notice__actions {
  display: flex;
  margin-top: 7px;
  flex-wrap: wrap;
  gap: 10px;
}

.auth-text-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #825c9a;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-gate[hidden] {
  display: none !important;
}

.auth-gate {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
}

.auth-gate__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(52, 39, 61, 0.56);
  backdrop-filter: blur(7px);
  cursor: default;
}

.auth-gate__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(126, 91, 155, 0.18);
  border-radius: 28px;
  background: #fffdfb;
  padding: 28px;
  box-shadow: 0 28px 80px rgba(43, 30, 52, 0.28);
}

.auth-gate__close {
  position: absolute;
  top: 16px;
  right: 17px;
  display: grid;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f3ebf6;
  place-items: center;
  color: #76578a;
  font-size: 1.3rem;
  cursor: pointer;
}

.auth-gate__symbol {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 19px;
  background: linear-gradient(135deg, #eadcf5, #fff0cf);
  place-items: center;
  font-size: 1.65rem;
}

.auth-gate__eyebrow {
  margin: 0 0 4px;
  color: #9271a7;
  font-size: 0.76rem;
  font-weight: 900;
}

.auth-gate__panel h2 {
  margin: 0;
  color: #493d52;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
}

.auth-gate__description {
  margin: 10px 0 0;
  color: #796e7f;
  font-size: 0.86rem;
  line-height: 1.75;
}

.auth-gate__benefits {
  margin: 16px 0;
  border-radius: 16px;
  background: #f8f3fa;
  padding: 14px 16px 14px 34px;
  color: #675b6d;
  font-size: 0.78rem;
  line-height: 1.85;
}

.auth-gate__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 15px;
  border-radius: 14px;
  background: #f3edf5;
  padding: 4px;
  gap: 4px;
}

.auth-gate__tab {
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #88778f;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.auth-gate__tab.is-active {
  background: #ffffff;
  color: #704e87;
  box-shadow: 0 5px 14px rgba(76, 51, 91, 0.09);
}

.auth-gate__form {
  display: grid;
  gap: 13px;
}

.auth-gate__form[hidden] {
  display: none;
}

.auth-gate__form label:not(.auth-gate__agreement) {
  display: grid;
  gap: 6px;
}

.auth-gate__form label > span {
  color: #65566d;
  font-size: 0.75rem;
  font-weight: 900;
}

.auth-gate__form input[type="email"],
.auth-gate__form input[type="password"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid #ded1e3;
  border-radius: 12px;
  background: #ffffff;
  padding: 0 14px;
  color: #4f4355;
  font: inherit;
  outline: none;
}

.auth-gate__form input:focus {
  border-color: #a679bf;
  box-shadow: 0 0 0 3px rgba(166, 121, 191, 0.13);
}

.auth-gate__agreement {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.auth-gate__agreement input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: #9a6db3;
}

.auth-gate__agreement span {
  color: #807486 !important;
  font-size: 0.71rem !important;
  font-weight: 500 !important;
  line-height: 1.55;
}

.auth-gate__submit {
  min-height: 49px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #9c70bc, #bd7fb7);
  padding: 0 18px;
  color: #ffffff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(129, 86, 153, 0.22);
  cursor: pointer;
}

.auth-gate__submit:disabled {
  opacity: 0.58;
  cursor: wait;
}

.auth-gate__message {
  min-height: 20px;
  margin: 12px 0 0;
  color: #6d805e;
  font-size: 0.75rem;
  line-height: 1.55;
  text-align: center;
}

.auth-gate__message.is-error {
  color: #b45f66;
}

.auth-gate__privacy {
  margin: 10px 0 0;
  color: #a095a5;
  font-size: 0.68rem;
  line-height: 1.55;
  text-align: center;
}

body.auth-gate-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .auth-gate {
    padding: 12px;
    align-items: end;
  }

  .auth-gate__panel {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 25px 25px 18px 18px;
    padding: 24px 18px;
  }
}

/* MEMBER_AUTH_GATE_STYLE_END */


/* SEPARATE_MEMBER_PANEL_START */

.member-choice-panel {
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr);
  margin-top: 14px;
  border: 1px solid
    rgba(145, 103, 177, 0.15);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      #f8f1fb,
      #fff9ec
    );
  padding: 15px 17px;
  align-items: start;
  gap: 12px;
}

.member-choice-panel__icon {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #ecdef5;
  place-items: center;
  color: #8d61ac;
}

.member-choice-panel__content strong {
  display: block;
  color: #594762;
  font-size: 0.8rem;
}

.member-choice-panel__content > p {
  margin: 5px 0 0;
  color: #8b7e90;
  font-size: 0.71rem;
  line-height: 1.55;
}

.member-choice-panel__buttons {
  display: flex;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.member-signup-button {
  min-height: 37px;
  border: 1px solid #ae83c9;
  border-radius: 11px;
  background: #ffffff;
  padding: 7px 17px;
  color: #80579b;
  font-size: 0.75rem;
  font-weight: 900;
  cursor: pointer;
}

.member-login-link {
  color: #8c7197;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.member-profile-message {
  margin-top: 9px !important;
  border-radius: 10px;
  background: rgba(
    255,
    255,
    255,
    0.7
  );
  padding: 9px 11px;
  color: #745585 !important;
  font-weight: 800;
}

.member-choice-panel.is-member {
  border-color:
    rgba(114, 155, 107, 0.22);
  background:
    linear-gradient(
      135deg,
      #f1f8ef,
      #fffaf0
    );
}

@media (max-width: 560px) {
  .member-choice-panel {
    grid-template-columns: 1fr;
  }

  .member-choice-panel__icon {
    width: 34px;
    height: 34px;
  }

  .member-choice-panel__buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .member-signup-button {
    width: 100%;
  }

  .member-login-link {
    padding: 5px;
    text-align: center;
  }
}

/* SEPARATE_MEMBER_PANEL_END */

/* SIGNUP_CLICK_FIX_START */
.member-choice-panel,
.member-choice-panel__content,
.member-choice-panel__buttons {
  position: relative;
  overflow: visible;
  pointer-events: auto;
}

.member-signup-button {
  position: relative;
  z-index: 20;
  display: inline-flex;
  min-height: 37px;
  padding: 7px 17px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}
/* SIGNUP_CLICK_FIX_END */

/* === MYSTIC CLEAN ACTION AREA START === */

.mystic-clean-action-area {
  display: block;
  width: 100%;
  margin: 22px 0 24px;
  box-sizing: border-box;
}

.mystic-clean-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.mystic-clean-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border-radius: 14px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.mystic-clean-signup-button {
  border: 1px solid #a56bc7;
  background: #ffffff;
  color: #8552a6;
  box-shadow:
    0 7px 18px rgba(128, 78, 160, 0.08);
}

.mystic-clean-card-button {
  border: 0;
  background:
    linear-gradient(
      90deg,
      #9468c6 0%,
      #b77db2 100%
    );
  color: #ffffff;
  box-shadow:
    0 9px 20px rgba(135, 85, 171, 0.2);
}

.mystic-clean-action-button:hover {
  transform: translateY(-2px);
}

.mystic-clean-signup-button:hover {
  background: #faf5ff;
  box-shadow:
    0 10px 22px rgba(128, 78, 160, 0.13);
}

.mystic-clean-card-button:hover {
  box-shadow:
    0 12px 25px rgba(135, 85, 171, 0.28);
}

.mystic-clean-information {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(165, 107, 199, 0.14);
  border-radius: 14px;
  background: #f8f3fa;
  box-sizing: border-box;
}

.mystic-clean-information-text {
  min-width: 0;
}

.mystic-clean-information-text strong {
  display: block;
  margin: 0 0 4px;
  color: #59445f;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.mystic-clean-information-text p {
  margin: 0;
  color: #89778e;
  font-size: 11px;
  line-height: 1.55;
}

.mystic-clean-login-area {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  color: #88768d;
  font-size: 11px;
  white-space: nowrap;
}

.mystic-clean-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #b68bcb;
  border-radius: 9px;
  background: #ffffff;
  color: #80519e;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.mystic-clean-login-button:hover {
  background: #faf4ff;
}

.mystic-clean-original-hidden {
  display: none !important;
}

@media (max-width: 620px) {
  .mystic-clean-button-row {
    gap: 8px;
  }

  .mystic-clean-action-button {
    min-height: 48px;
    padding: 0 10px;
    font-size: 13px;
  }

  .mystic-clean-information {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mystic-clean-login-area {
    width: 100%;
    justify-content: space-between;
  }
}

/* === MYSTIC CLEAN ACTION AREA END === */

/* === MYSTIC ACTION WIDTH FIX START === */

/*
  전체 영역은 action_width_sync.js가
  위쪽 개인정보 안내 바의 실제 너비와 위치에 맞춥니다.
*/
#mysticCleanActionArea {
  display: block !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 회원가입과 카드 선택하기를 정확히 같은 비율로 배치 */
#mysticCleanActionArea .mystic-clean-button-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 두 버튼의 너비와 높이를 완전히 동일하게 설정 */
#mysticCleanActionArea .mystic-clean-action-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* 왼쪽 회원가입 */
#mysticCleanActionArea .mystic-clean-signup-button {
  border: 1px solid #a56bc7 !important;
  background: #ffffff !important;
  color: #8552a6 !important;
}

/* 오른쪽 카드 선택 */
#mysticCleanActionArea .mystic-clean-card-button {
  border: 0 !important;
  background:
    linear-gradient(
      90deg,
      #9468c6 0%,
      #b77db2 100%
    ) !important;
  color: #ffffff !important;
}

/* 아래 설명 상자도 버튼 행과 똑같은 전체 너비 */
#mysticCleanActionArea .mystic-clean-information {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 12px 0 0 !important;
  padding: 15px 18px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
}

/* 안내 문구 영역은 남은 공간 전체 사용 */
#mysticCleanActionArea
.mystic-clean-information-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* 로그인 영역은 오른쪽에 정돈 */
#mysticCleanActionArea
.mystic-clean-login-area {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

@media (max-width: 620px) {
  #mysticCleanActionArea
  .mystic-clean-button-row {
    gap: 8px !important;
  }

  #mysticCleanActionArea
  .mystic-clean-action-button {
    min-height: 48px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  #mysticCleanActionArea
  .mystic-clean-information {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #mysticCleanActionArea
  .mystic-clean-login-area {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* === MYSTIC ACTION WIDTH FIX END === */

/* TAROT_RESULT_EXACT_LAYOUT_V3_START */

/*
  상세 결과 패널은 카드 선택 모달의 .tarot-result-card 규칙과
  완전히 분리합니다. 동적으로 뒤늦게 로드되는 CSS보다 우선하도록
  전용 ID와 필요한 곳에만 !important를 사용합니다.
*/
#destinyTarotResultPanel {
  display: block !important;
  grid-template-columns: none !important;
  grid-auto-flow: initial !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  padding: clamp(22px, 3vw, 32px) !important;
  box-sizing: border-box !important;
}

#destinyTarotResultPanel > * {
  min-width: 0;
  box-sizing: border-box;
}

.destiny-tarot-result-header {
  display: flex !important;
  align-items: center;
  width: 100%;
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(119, 91, 145, 0.12);
  gap: 14px;
}

.destiny-tarot-result-header .result-card__icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 15px;
  place-items: center;
}

.destiny-tarot-result-header__text {
  flex: 1 1 auto;
  min-width: 0;
}

.destiny-tarot-result-header .result-card__label {
  margin: 0 0 5px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.destiny-tarot-result-header h3 {
  margin: 0;
  color: #43374e;
  font-size: clamp(1.18rem, 2.6vw, 1.46rem);
  line-height: 1.4;
  word-break: keep-all;
}

#destinyTarotResultPanel .three-tarot-results {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 16px !important;
}

#destinyTarotResultPanel .tarot-result-item {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 207px;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid #e2d7e7;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdfb 0%, #faf4fc 100%);
  gap: 20px !important;
  box-sizing: border-box !important;
}

#destinyTarotResultPanel .tarot-result-item__visual {
  display: block !important;
  justify-self: center;
  width: 100px !important;
  height: auto !important;
  aspect-ratio: 2 / 3.42 !important;
  overflow: hidden;
  border: 2px solid #dfc56d !important;
  border-radius: 11px !important;
  background: #4f3b70;
  box-shadow: 0 11px 22px rgba(64, 43, 86, 0.17);
  box-sizing: border-box;
}

#destinyTarotResultPanel .tarot-result-item__visual img,
#destinyTarotResultPanel .tarot-result-item__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 2 / 3.42 !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  object-position: center !important;
}

#destinyTarotResultPanel .tarot-result-item__content {
  display: block;
  min-width: 0;
  padding: 0;
}

#destinyTarotResultPanel .tarot-result-item__position {
  margin: 0 0 7px !important;
  color: #875ca6 !important;
  font-size: 0.79rem !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  word-break: keep-all;
}

#destinyTarotResultPanel .tarot-result-item h4 {
  margin: 0 0 10px !important;
  color: #403347 !important;
  font-size: clamp(1.02rem, 2vw, 1.16rem) !important;
  line-height: 1.45 !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}

#destinyTarotResultPanel .tarot-result-item__keyword {
  display: inline-flex !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px;
  background: #eee2f5 !important;
  color: #704d88 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  white-space: normal;
  word-break: keep-all;
  box-sizing: border-box;
}

#destinyTarotResultPanel .tarot-result-item__message {
  margin: 11px 0 0 !important;
  color: #5d5362 !important;
  font-size: 0.94rem !important;
  line-height: 1.82 !important;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

#destinyTarotResultPanel .destiny-tarot-question {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 18px 0 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(126, 91, 155, 0.18);
  border-left: 4px solid #a77ac2;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7f0fa 0%, #fffaf4 100%);
  box-sizing: border-box !important;
}

#destinyTarotResultPanel .destiny-tarot-question__title {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  color: #69467f;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.5;
  word-break: keep-all;
}

#destinyTarotResultPanel #tarotQuestion {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #504755 !important;
  font-size: 0.98rem !important;
  line-height: 1.85 !important;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (max-width: 720px) {
  #destinyTarotResultPanel {
    padding: 20px 16px !important;
  }

  #destinyTarotResultPanel .tarot-result-item {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    min-height: 183px;
    padding: 15px !important;
    gap: 15px !important;
  }

  #destinyTarotResultPanel .tarot-result-item__visual {
    width: 88px !important;
  }

  #destinyTarotResultPanel .tarot-result-item__message,
  #destinyTarotResultPanel #tarotQuestion {
    font-size: 0.9rem !important;
    line-height: 1.78 !important;
  }
}

@media (max-width: 430px) {
  .destiny-tarot-result-header {
    align-items: flex-start;
  }

  #destinyTarotResultPanel .tarot-result-item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    min-height: 0;
    padding: 13px !important;
    gap: 12px !important;
  }

  #destinyTarotResultPanel .tarot-result-item__visual {
    width: 72px !important;
  }

  #destinyTarotResultPanel .tarot-result-item h4 {
    font-size: 0.96rem !important;
  }

  #destinyTarotResultPanel .tarot-result-item__keyword {
    font-size: 0.7rem !important;
  }

  #destinyTarotResultPanel .tarot-result-item__message,
  #destinyTarotResultPanel #tarotQuestion {
    font-size: 0.86rem !important;
  }

  #destinyTarotResultPanel .destiny-tarot-question {
    padding: 17px 16px !important;
  }
}

/* TAROT_RESULT_EXACT_LAYOUT_V3_END */


.synthesis-card {
  gap: 24px;
}

.synthesis-card__animal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.synthesis-card__image,
.synthesis-card__fallback {
  width: 100px;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
}

.synthesis-card__image {
  display: block;
  height: auto;
  object-fit: cover;
  border: 1px solid #d9c7e4;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(87, 59, 106, 0.16);
}

.synthesis-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #6f4a92 0%, #563a7b 100%);
  color: #ffe08a;
  font-size: 2rem;
  box-shadow: 0 12px 28px rgba(87, 59, 106, 0.16);
}

@media (max-width: 720px) {
  .synthesis-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .synthesis-card__animal {
    justify-content: flex-start;
  }
}


/* =====================================================
   Situation Fusion Reading Panel
   ===================================================== */

.situation-answer-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(230, 208, 154, 0.28);
  background:
    radial-gradient(circle at top left, rgba(230, 208, 154, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(128, 94, 255, 0.14), transparent 34%),
    rgba(19, 17, 31, 0.82);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.situation-answer-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  pointer-events: none;
}

.situation-answer-panel__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.situation-answer-panel__header h3 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
}

.situation-question-box,
.situation-direct-box,
.situation-action-box,
.situation-flow-card {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(12px);
}

.situation-question-box {
  padding: 18px 20px;
  margin-bottom: 16px;
}

.situation-question-box__label,
.situation-direct-box__label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  opacity: 0.72;
}

.situation-question-box__text {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.45;
}

.situation-direct-box {
  padding: 22px;
  margin-bottom: 18px;
}

.situation-direct-box__answer {
  margin: 0 0 14px;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.55;
  color: #f5ddb1;
}

.situation-direct-box__body {
  margin: 0;
  line-height: 1.85;
  opacity: 0.93;
}

.situation-direct-box__body p {
  margin: 0 0 12px;
}

.situation-direct-box__body p:last-child {
  margin-bottom: 0;
}

.situation-flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
  margin-bottom: 18px;
}

.situation-flow-card {
  padding: 18px;
}

.situation-flow-card h4,
.situation-action-box h4 {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.situation-mini-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.situation-mini-card,
.situation-lens-card {
  border-radius: 18px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.situation-mini-card__title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  opacity: 0.68;
}

.situation-mini-card__name {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.situation-mini-card__keyword {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(230, 208, 154, 0.13);
  font-size: 0.78rem;
  color: #f5ddb1;
}

.situation-mini-card__message {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  opacity: 0.86;
}

.situation-lens-list {
  display: grid;
  gap: 10px;
}

.situation-lens-card h5 {
  margin: 0 0 7px;
  font-size: 0.96rem;
  color: #f5ddb1;
}

.situation-lens-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.88;
}

.situation-action-box {
  padding: 18px 20px;
}

.situation-action-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.situation-action-list li {
  line-height: 1.6;
  padding-left: 4px;
}

@media (max-width: 920px) {
  .situation-flow-grid {
    grid-template-columns: 1fr;
  }

  .situation-mini-card-grid {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   Mystic Flow UI Sections v1
   ===================================================== */

.ui-sections-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(164, 122, 210, 0.22);
  background:
    radial-gradient(circle at top left, rgba(255, 240, 210, 0.8), transparent 32%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(253, 247, 255, 0.98));
}

.ui-sections-panel__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.ui-sections-panel__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(122, 79, 160, 0.1);
  color: #6b3c89;
  font-size: 22px;
}

.ui-sections-panel__header h3 {
  margin: 4px 0 0;
  color: #34203f;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.03em;
}

.ui-sections-list {
  display: grid;
  gap: 20px;
}

.ui-section-block {
  border-radius: 24px;
  padding: 22px;
  border: 1px solid rgba(164, 122, 210, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(80, 48, 110, 0.06);
}

.ui-section-block__header {
  margin-bottom: 18px;
}

.ui-section-block__header h4 {
  margin: 0 0 6px;
  color: #2f203d;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ui-section-block__header p {
  margin: 0;
  color: #8b719a;
  font-size: 0.92rem;
  line-height: 1.6;
}

.ui-section-card-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(246, 235, 255, 0.75), rgba(255, 248, 235, 0.75));
}

.ui-section-card-flow__item {
  width: 92px;
  text-align: center;
}

.ui-section-card-flow__item img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(41, 25, 55, 0.13);
}

.ui-section-card-flow__item strong {
  display: block;
  margin-top: 8px;
  color: #3d2950;
  font-size: 0.86rem;
  line-height: 1.3;
}

.ui-section-card-flow__item span {
  display: block;
  margin-top: 3px;
  color: #8d719c;
  font-size: 0.72rem;
  line-height: 1.35;
}

.ui-section-card-flow__arrow {
  color: #a070c7;
  font-size: 1.45rem;
  font-weight: 800;
}

.ui-section-points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-section-points li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(164, 122, 210, 0.12);
}

.ui-section-points__badge {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6b3c89;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.ui-section-points p {
  margin: 0;
  color: #463a50;
  font-size: 0.97rem;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .ui-section-block {
    padding: 18px;
    border-radius: 20px;
  }

  .ui-section-card-flow {
    justify-content: center;
  }

  .ui-section-card-flow__item {
    width: 76px;
  }

  .ui-section-card-flow__arrow {
    font-size: 1.1rem;
  }

  .ui-section-points li {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px;
  }

  .ui-section-points__badge {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .ui-section-points p {
    font-size: 0.9rem;
  }
}


/* =====================================================
   Mystic Flow Focus Sections v2
   ===================================================== */

.focus-sections-panel {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 225, 165, 0.36), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(155, 104, 211, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(253, 248, 255, 0.98));
  border: 1px solid rgba(166, 119, 206, 0.22);
  border-radius: 28px;
}

.focus-sections-panel__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.focus-sections-panel__icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff2c5, #ead7ff);
  color: #6a3b8f;
  font-size: 24px;
  box-shadow: 0 8px 20px rgba(108, 67, 142, 0.12);
}

.focus-sections-panel__header h3 {
  margin: 4px 0 0;
  color: #33203f;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  letter-spacing: -0.035em;
}

.focus-sections-list {
  display: grid;
  gap: 24px;
}

.focus-section-block {
  border-radius: 26px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(168, 123, 207, 0.18);
  box-shadow: 0 12px 30px rgba(78, 49, 112, 0.065);
}

.focus-section-block__header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.focus-section-block__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(125, 76, 166, 0.1);
  font-size: 20px;
}

.focus-section-block__header h4 {
  margin: 0 0 6px;
  color: #2e203a;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.focus-section-block__header p {
  margin: 0;
  color: #8b7298;
  line-height: 1.55;
  font-size: 0.92rem;
}

.focus-section-card-strip {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) auto minmax(90px, 0.8fr) auto minmax(90px, 0.8fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(246, 236, 255, 0.85), rgba(255, 248, 232, 0.85));
}

.focus-section-card {
  position: relative;
  text-align: center;
  border-radius: 20px;
  padding: 12px;
  border: 1px solid rgba(154, 113, 190, 0.16);
  background: rgba(255, 255, 255, 0.72);
}

.focus-section-card.is-focus {
  border: 2px solid #d7a948;
  box-shadow:
    0 0 0 4px rgba(215, 169, 72, 0.14),
    0 14px 30px rgba(130, 85, 24, 0.14);
  transform: translateY(-2px);
}

.focus-section-card__badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(121, 76, 164, 0.1);
  color: #6d4485;
  font-size: 0.72rem;
  font-weight: 800;
}

.focus-section-card.is-focus .focus-section-card__badge {
  background: linear-gradient(135deg, #f3ce6d, #fff0b8);
  color: #5f3c00;
}

.focus-section-card__image-wrap {
  width: 100%;
  max-width: 118px;
  margin: 0 auto 10px;
  perspective: 800px;
}

.focus-section-card__image-wrap img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(41, 25, 55, 0.18);
  transition: transform 0.2s ease;
}

.focus-section-card.is-reversed .focus-section-card__image-wrap img {
  transform: rotate(180deg);
}

.focus-section-card strong {
  display: block;
  color: #352345;
  font-size: 0.92rem;
  line-height: 1.3;
}

.focus-section-card > span:last-child {
  display: block;
  margin-top: 4px;
  color: #8a7197;
  font-size: 0.74rem;
  line-height: 1.35;
}

.focus-section-card-strip__arrow {
  color: #a576c7;
  font-size: 1.45rem;
  font-weight: 900;
}

.focus-section-points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.focus-section-points li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(166, 119, 206, 0.13);
}

.focus-section-points__number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6c3e88;
  color: #fff;
  font-weight: 900;
  font-size: 0.92rem;
}

.focus-section-points p {
  margin: 0;
  color: #45364f;
  line-height: 1.78;
  font-size: 0.98rem;
}

@media (max-width: 820px) {
  .focus-section-block {
    padding: 18px;
    border-radius: 22px;
  }

  .focus-section-card-strip {
    grid-template-columns: 1fr;
  }

  .focus-section-card-strip__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .focus-section-card__image-wrap {
    max-width: 150px;
  }

  .focus-section-points li {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 13px;
  }

  .focus-section-points__number {
    width: 30px;
    height: 30px;
  }

  .focus-section-points p {
    font-size: 0.92rem;
  }
}


/* =====================================================
   Mystic Flow Integrated Feedback v1
   ===================================================== */

.integrated-feedback-panel {
  border-radius: 30px;
  border: 1px solid rgba(179, 128, 209, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 231, 177, 0.45), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(186, 145, 231, 0.20), transparent 32%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(253, 247, 255, 0.98));
  box-shadow: 0 18px 48px rgba(74, 45, 104, 0.08);
}

.integrated-feedback-panel__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.integrated-feedback-panel__icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff1bc, #ead7ff);
  color: #684087;
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(94, 53, 130, 0.14);
}

.integrated-feedback-panel__header h3 {
  margin: 4px 0 6px;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  color: #30203c;
  letter-spacing: -0.035em;
}

#integratedFeedbackSubtitle {
  margin: 0;
  color: #8c7498;
  line-height: 1.6;
  font-size: 0.95rem;
}

.integrated-feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.integrated-feedback-chips span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(109, 67, 145, 0.10);
  color: #6c4389;
  font-size: 0.78rem;
  font-weight: 800;
}

.integrated-feedback-cards {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr) auto minmax(110px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: 26px;
  background: linear-gradient(90deg, rgba(247, 238, 255, 0.82), rgba(255, 248, 229, 0.82));
}

.integrated-feedback-card {
  text-align: center;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(166, 119, 206, 0.16);
  box-shadow: 0 12px 26px rgba(55, 33, 73, 0.08);
}

.integrated-feedback-card__image {
  max-width: 118px;
  margin: 0 auto 10px;
}

.integrated-feedback-card__image img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(33, 20, 48, 0.18);
}

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

.integrated-feedback-card__badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(112, 70, 150, 0.10);
  color: #704696;
  font-size: 0.75rem;
  font-weight: 800;
}

.integrated-feedback-card strong {
  display: block;
  color: #352345;
  font-size: 0.95rem;
  line-height: 1.35;
}

.integrated-feedback-card p {
  margin: 6px 0 0;
  color: #8a7197;
  font-size: 0.76rem;
  line-height: 1.45;
}

.integrated-feedback-card-arrow {
  color: #a679c5;
  font-size: 1.55rem;
  font-weight: 900;
}

.integrated-feedback-points {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}

.integrated-feedback-points li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(166, 119, 206, 0.13);
}

.integrated-feedback-points li span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #6c3e88;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.integrated-feedback-points li p {
  margin: 0;
  color: #45364f;
  line-height: 1.76;
}

.integrated-feedback-question {
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 239, 194, 0.82), rgba(245, 232, 255, 0.82));
  border: 1px solid rgba(214, 169, 72, 0.24);
}

.integrated-feedback-question__label {
  margin: 0 0 8px;
  color: #7a4c00;
  font-size: 0.82rem;
  font-weight: 900;
}

#integratedFeedbackQuestion {
  margin: 0;
  color: #39263f;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.65;
}

.integrated-feedback-lenses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.integrated-feedback-lenses article {
  padding: 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(166, 119, 206, 0.13);
}

.integrated-feedback-lenses strong {
  display: block;
  margin-bottom: 6px;
  color: #6a3d88;
  font-size: 0.86rem;
}

.integrated-feedback-lenses p {
  margin: 0;
  color: #6b5a73;
  font-size: 0.82rem;
  line-height: 1.55;
}

.integrated-feedback-closing {
  margin: 0;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(105, 62, 139, 0.08);
  color: #45364f;
  line-height: 1.75;
  font-weight: 700;
}

@media (max-width: 900px) {
  .integrated-feedback-cards {
    grid-template-columns: 1fr;
  }

  .integrated-feedback-card-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .integrated-feedback-card__image {
    max-width: 150px;
  }

  .integrated-feedback-lenses {
    grid-template-columns: 1fr;
  }

  .integrated-feedback-points li {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .integrated-feedback-points li span {
    width: 30px;
    height: 30px;
  }
}


/* =====================================================
   Mystic Flow Premium Reading Sections
   ===================================================== */

.premium-reading-sections-panel {
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 231, 177, 0.42), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(182, 143, 226, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(253, 248, 255, 0.98));
  border: 1px solid rgba(179, 128, 209, 0.24);
  box-shadow: 0 18px 48px rgba(74, 45, 104, 0.08);
}

.premium-reading-sections-panel__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.premium-reading-sections-panel__icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff1bc, #ead7ff);
  color: #684087;
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(94, 53, 130, 0.14);
}

.premium-reading-sections-panel__header h3 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  color: #30203c;
  letter-spacing: -0.035em;
}

.premium-reading-sections-list {
  display: grid;
  gap: 24px;
}

.premium-reading-section {
  border-radius: 26px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(166, 119, 206, 0.16);
  box-shadow: 0 12px 30px rgba(74, 45, 104, 0.06);
}

.premium-reading-section__header h4 {
  margin: 0 0 6px;
  color: #30203c;
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.premium-reading-section__header p {
  margin: 0 0 18px;
  color: #8b7198;
  line-height: 1.55;
  font-size: 0.94rem;
}

.premium-section-card-strip {
  display: grid;
  grid-template-columns: minmax(115px, 1fr) auto minmax(115px, 1fr) auto minmax(115px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  margin-bottom: 18px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(247, 238, 255, 0.82), rgba(255, 248, 229, 0.82));
}

.premium-section-card {
  text-align: center;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(166, 119, 206, 0.16);
  box-shadow: 0 12px 26px rgba(55, 33, 73, 0.08);
}

.premium-section-card.is-focus {
  border: 2px solid #d7a948;
  box-shadow:
    0 0 0 4px rgba(215, 169, 72, 0.14),
    0 14px 30px rgba(130, 85, 24, 0.14);
}

.premium-section-card__image {
  max-width: 116px;
  margin: 0 auto 10px;
}

.premium-section-card__image img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(33, 20, 48, 0.18);
}

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

.premium-section-card__badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(112, 70, 150, 0.10);
  color: #704696;
  font-size: 0.75rem;
  font-weight: 800;
}

.premium-section-card.is-focus .premium-section-card__badge {
  background: linear-gradient(135deg, #f3ce6d, #fff0b8);
  color: #5f3c00;
}

.premium-section-card strong {
  display: block;
  color: #352345;
  font-size: 0.95rem;
  line-height: 1.35;
}

.premium-section-card p {
  margin: 6px 0 0;
  color: #8a7197;
  font-size: 0.76rem;
  line-height: 1.45;
}

.premium-section-card-strip__arrow {
  color: #a679c5;
  font-size: 1.55rem;
  font-weight: 900;
}

.premium-reading-section__summary {
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(108, 62, 136, 0.07);
  color: #3f3049;
  line-height: 1.78;
  font-size: 1rem;
  font-weight: 650;
}

.premium-reading-section__highlights {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.premium-reading-section__highlights li {
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(166, 119, 206, 0.12);
  color: #4b3c54;
  line-height: 1.65;
}

.premium-reading-section__extra,
.premium-reading-section__talk {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.premium-reading-section__extra p,
.premium-reading-section__talk p {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 243, 213, 0.78);
  border: 1px solid rgba(215, 169, 72, 0.20);
}

.premium-reading-section__extra strong,
.premium-reading-section__talk strong {
  display: block;
  margin-bottom: 5px;
  color: #744a00;
  font-size: 0.84rem;
}

.premium-reading-section__extra span,
.premium-reading-section__talk span {
  color: #3f3049;
  line-height: 1.6;
}

.premium-reading-section__footer {
  display: block;
  color: #9a86a5;
  border-top: 1px dashed rgba(164, 122, 210, 0.24);
  padding-top: 12px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .premium-section-card-strip {
    grid-template-columns: 1fr;
  }

  .premium-section-card-strip__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .premium-section-card__image {
    max-width: 150px;
  }
}




/* =========================================================
   MF Merge Five Lenses Reading Patch 20260706
   5개 내부 관점은 유지하되 이름을 숨기고,
   그 내용을 종합 리딩으로 먼저 보여준다.
========================================================= */

.integrated-feedback-panel .mf-integrated-lenses-hidden,
.integrated-feedback-panel .mf-original-integrated-message-hidden {
  display: revert !important;
}

.mf-merged-five-lenses-summary {
  margin: 16px 0 18px;
  padding: 20px 22px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.94), rgba(246, 236, 255, 0.92));
  border: 1px solid rgba(207, 171, 103, 0.36);
  box-shadow: 0 14px 34px rgba(92, 64, 34, 0.08);
}

.mf-merged-five-lenses-summary__label {
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #8b5f24;
  letter-spacing: -0.02em;
}

.mf-merged-five-lenses-summary__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  font-weight: 650;
  color: #4d3568;
  word-break: keep-all;
}

.mf-public-lens-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.mf-public-lens-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(132, 91, 166, 0.13);
  box-shadow: 0 10px 24px rgba(57, 38, 76, 0.05);
}

.mf-public-lens-card__title {
  color: #6f3f9a !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

@media (max-width: 980px) {
  .mf-public-lens-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mf-public-lens-grid {
    grid-template-columns: 1fr;
  }

  .mf-merged-five-lenses-summary {
    padding: 17px 18px;
    border-radius: 18px;
  }

  .mf-merged-five-lenses-summary__body {
    font-size: 0.95rem;
    line-height: 1.75;
  }
}

/* END MF Merge Five Lenses Reading Patch 20260706 */



/* destiny-design-restore-safe-v1 */
/* 기능 JS를 건드리지 않고 카드 선택 버튼/회원가입 안내 디자인만 복구 */

#openCardSelectionButton.mystic-destiny-submit-button,
.mystic-destiny-submit-button {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(135deg, #9b6ad6 0%, #b77acb 48%, #d58cbf 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  box-shadow:
    0 18px 34px rgba(155, 106, 214, 0.25),
    0 8px 18px rgba(136, 86, 184, 0.18);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}

#openCardSelectionButton.mystic-destiny-submit-button:hover,
.mystic-destiny-submit-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.06) brightness(1.02);
  box-shadow:
    0 22px 42px rgba(155, 106, 214, 0.3),
    0 10px 22px rgba(136, 86, 184, 0.22);
}

#openCardSelectionButton.mystic-destiny-submit-button:active,
.mystic-destiny-submit-button:active {
  transform: translateY(0);
}

#openCardSelectionButton.mystic-destiny-submit-button:disabled,
.mystic-destiny-submit-button:disabled {
  cursor: wait;
  opacity: 0.72;
  filter: grayscale(0.08);
  transform: none;
}

.mystic-destiny-submit-button__text,
.mystic-destiny-submit-button__arrow {
  pointer-events: none;
}

.mystic-destiny-submit-button__arrow {
  font-size: 1.08rem;
  font-weight: 900;
  transform: translateY(-1px);
}

/* 회원가입 안내 박스 복구 */
.member-choice-panel.mystic-member-choice-panel-restored {
  margin-top: 22px;
  max-width: 420px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(190, 154, 216, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 249, 242, 0.88));
  box-shadow:
    0 14px 30px rgba(83, 55, 112, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}

.member-choice-panel.mystic-member-choice-panel-restored .member-choice-panel__icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(170, 118, 218, 0.16);
  color: #8e57c8;
  font-size: 1rem;
}

.member-choice-panel.mystic-member-choice-panel-restored strong {
  color: #4a315f;
  font-size: 0.92rem;
  line-height: 1.45;
}

.member-choice-panel.mystic-member-choice-panel-restored p {
  margin: 6px 0 12px;
  color: rgba(74, 49, 95, 0.66);
  font-size: 0.8rem;
  line-height: 1.55;
}

.member-choice-panel.mystic-member-choice-panel-restored a,
.member-choice-panel.mystic-member-choice-panel-restored button {
  border-radius: 12px;
}

.member-choice-panel.mystic-member-choice-panel-restored .member-choice-panel__actions,
.member-choice-panel.mystic-member-choice-panel-restored .member-choice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 모바일에서는 전체 폭 */
@media (max-width: 768px) {
  #openCardSelectionButton.mystic-destiny-submit-button,
  .mystic-destiny-submit-button {
    min-height: 54px;
    border-radius: 15px;
    font-size: 0.98rem;
  }

  .member-choice-panel.mystic-member-choice-panel-restored {
    max-width: none;
    width: 100%;
    grid-template-columns: 34px 1fr;
    padding: 16px;
  }
}



/* split-auth-action-v1 */
/* 카드 선택하기 50% + 로그인/회원가입 50% 액션 행 */

.mystic-destiny-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 18px;
}

.mystic-destiny-action-row #openCardSelectionButton.mystic-destiny-submit-button {
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin: 0;
}

.mystic-auth-action-button {
  width: 100%;
  height: 56px;
  min-height: 56px;
  border: 1px solid rgba(173, 128, 214, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 252, 0.92));
  color: #6c3e88;
  box-shadow:
    0 16px 32px rgba(120, 80, 150, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.mystic-auth-action-button:hover,
.mystic-auth-action-button.is-open {
  transform: translateY(-1px);
  border-color: rgba(155, 106, 214, 0.62);
  background:
    linear-gradient(135deg, rgba(252, 247, 255, 0.98), rgba(255, 241, 249, 0.96));
  box-shadow:
    0 20px 38px rgba(120, 80, 150, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.mystic-auth-action-button__title {
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  pointer-events: none;
}

.mystic-auth-action-button__sub {
  font-size: 0.72rem;
  font-weight: 650;
  color: rgba(92, 59, 118, 0.62);
  pointer-events: none;
}

.member-choice-panel.mystic-member-auth-inline-panel {
  margin-top: 14px;
  max-width: none;
  width: 100%;
}

.member-choice-panel.mystic-member-auth-inline-panel[hidden] {
  display: none !important;
}

.mystic-inline-login-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0 12px;
}

.mystic-inline-login-box label {
  display: grid;
  gap: 6px;
  color: rgba(74, 49, 95, 0.78);
  font-size: 0.76rem;
  font-weight: 750;
}

.mystic-inline-auth-input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(186, 151, 218, 0.42);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #3f2a50;
  padding: 0 12px;
  outline: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.mystic-inline-auth-input:focus {
  border-color: rgba(155, 106, 214, 0.8);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(155, 106, 214, 0.12);
}

.mystic-inline-auth-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mystic-inline-auth-primary,
.mystic-inline-auth-secondary {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
}

.mystic-inline-auth-primary {
  background: #8f61c5;
  color: #fff;
  box-shadow: 0 10px 20px rgba(143, 97, 197, 0.2);
}

.mystic-inline-auth-secondary {
  background: rgba(143, 97, 197, 0.1);
  color: #6c3e88;
  border: 1px solid rgba(143, 97, 197, 0.22);
}

@media (max-width: 768px) {
  .mystic-destiny-action-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mystic-inline-login-box {
    grid-template-columns: 1fr;
  }
}



/* split-auth-action-layout-fix-v2 */
/* 카드 선택하기 / 로그인 및 회원가입하기 버튼을 같은 행 50:50으로 고정 */

form .mystic-destiny-action-row,
#destinyProfileForm .mystic-destiny-action-row,
.mystic-destiny-action-row {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 18px 0 0 !important;
}

.mystic-destiny-action-row > #openCardSelectionButton,
.mystic-destiny-action-row > #memberAuthToggleButton {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.mystic-destiny-action-row > #memberAuthToggleButton {
  display: inline-flex !important;
}

.member-choice-panel.mystic-member-auth-inline-panel,
#memberChoicePanel.mystic-member-auth-inline-panel {
  width: 100% !important;
  max-width: none !important;
  margin-top: 14px !important;
}

/* 결과 카드 실제 이미지가 들어갔을 때 비율 유지 */
.mystic-result-card-image-fixed {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
}

img.mystic-result-card-image-fixed {
  object-fit: cover !important;
}

/* PC에서는 반드시 2열 유지 */
@media (min-width: 769px) {
  form .mystic-destiny-action-row,
  #destinyProfileForm .mystic-destiny-action-row,
  .mystic-destiny-action-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* 모바일에서는 세로 배치 */
@media (max-width: 768px) {
  form .mystic-destiny-action-row,
  #destinyProfileForm .mystic-destiny-action-row,
  .mystic-destiny-action-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}



/* split-buttons-equal-size-v3 */
/* 카드 선택하기 / 로그인 및 회원가입하기 버튼을 같은 행, 같은 넓이, 같은 높이로 강제 고정 */

#destinyProfileForm .mystic-destiny-action-row,
form#destinyProfileForm .mystic-destiny-action-row,
.mystic-destiny-action-row {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 18px 0 0 !important;
}

#destinyProfileForm .mystic-destiny-action-row > *,
.mystic-destiny-action-row > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
#destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton,
.mystic-destiny-action-row > #openCardSelectionButton,
.mystic-destiny-action-row > #memberAuthToggleButton {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 왼쪽 카드 선택 버튼 */
#openCardSelectionButton.mystic-destiny-submit-button {
  font-size: 1.05rem !important;
  font-weight: 850 !important;
  text-align: center !important;
}

/* 오른쪽 로그인/회원가입 버튼 */
#memberAuthToggleButton.mystic-auth-action-button {
  flex-direction: column !important;
  gap: 4px !important;
  text-align: center !important;
  white-space: normal !important;
}

#memberAuthToggleButton .mystic-auth-action-button__title {
  display: block !important;
  width: 100% !important;
  font-size: 1.02rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

#memberAuthToggleButton .mystic-auth-action-button__sub {
  display: block !important;
  width: 100% !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* 로그인 패널은 버튼 행 아래 전체 폭 */
#memberChoicePanel.mystic-member-auth-inline-panel,
.member-choice-panel.mystic-member-auth-inline-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 14px !important;
}

/* PC에서는 무조건 2개 같은 폭 */
@media (min-width: 769px) {
  #destinyProfileForm .mystic-destiny-action-row,
  .mystic-destiny-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 모바일에서는 세로 */
@media (max-width: 768px) {
  #destinyProfileForm .mystic-destiny-action-row,
  .mystic-destiny-action-row {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }

  #destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
  #destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton,
  .mystic-destiny-action-row > #openCardSelectionButton,
  .mystic-destiny-action-row > #memberAuthToggleButton {
    height: 58px !important;
    min-height: 58px !important;
    max-height: none !important;
  }
}

/* equal-action-buttons-final-v1 START */
/*
  /destiny 첫 단계 버튼 최종 정렬
  - 카드 선택하기 / 로그인 및 회원가입하기를 같은 행 50:50으로 고정
  - 기존 누적 CSS 충돌을 이 블록에서만 최종 덮어쓰기
  - JS 흐름은 건드리지 않음
*/

#destinyProfileForm .mystic-destiny-action-row,
form#destinyProfileForm .mystic-destiny-action-row,
.mystic-destiny-action-row {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

#destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
#destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton,
.mystic-destiny-action-row > #openCardSelectionButton,
.mystic-destiny-action-row > #memberAuthToggleButton {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  transform: none !important;
}

#openCardSelectionButton.mystic-destiny-submit-button,
.mystic-destiny-action-row > #openCardSelectionButton {
  border: 0 !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #9b5de5 0%, #cf83c9 100%) !important;
  box-shadow: 0 18px 34px rgba(130, 83, 210, 0.26) !important;
}

#memberAuthToggleButton.mystic-auth-action-button,
.mystic-destiny-action-row > #memberAuthToggleButton {
  border: 1px solid rgba(155, 93, 229, 0.22) !important;
  color: #5b3f83 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: #ffffff !important;
  box-shadow: 0 18px 34px rgba(130, 83, 210, 0.12) !important;
}

#openCardSelectionButton .mystic-destiny-submit-button__text,
#openCardSelectionButton .mystic-destiny-submit-button__arrow,
#memberAuthToggleButton .mystic-auth-action-button__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#openCardSelectionButton .mystic-destiny-submit-button__arrow {
  margin-left: 8px !important;
}

#memberAuthToggleButton .mystic-auth-action-button__sub {
  display: none !important;
}

#destinyProfileForm .member-choice-panel.mystic-member-auth-inline-panel,
#memberChoicePanel.mystic-member-auth-inline-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  box-sizing: border-box !important;
}

/* 모바일에서는 버튼을 세로로 쌓되, 둘 다 같은 폭/높이 유지 */
@media (max-width: 640px) {
  #destinyProfileForm .mystic-destiny-action-row,
  form#destinyProfileForm .mystic-destiny-action-row,
  .mystic-destiny-action-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
  #destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton,
  .mystic-destiny-action-row > #openCardSelectionButton,
  .mystic-destiny-action-row > #memberAuthToggleButton {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    font-size: 16px !important;
  }
}
/* equal-action-buttons-final-v1 END */

/* card-login-buttons-v1 START */
/*
  /destiny 버튼 최종 형태:
  [ 카드 선택하기 → ] [ 로그인 ]
  JS 흐름 건드리지 않고 HTML/CSS만 보정
*/

#destinyProfileForm .mystic-destiny-action-row,
form#destinyProfileForm .mystic-destiny-action-row,
.mystic-destiny-action-row {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
#destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton,
.mystic-destiny-action-row > #openCardSelectionButton,
.mystic-destiny-action-row > #memberAuthToggleButton {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* 왼쪽: 카드 선택하기 */
#openCardSelectionButton.mystic-destiny-submit-button,
.mystic-destiny-action-row > #openCardSelectionButton {
  border: 0 !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #9b5de5 0%, #cf83c9 100%) !important;
  box-shadow: 0 18px 34px rgba(130, 83, 210, 0.26) !important;
}

/* 오른쪽: 로그인 */
#memberAuthToggleButton.mystic-auth-action-button,
.mystic-destiny-action-row > #memberAuthToggleButton {
  border: 1px solid rgba(155, 93, 229, 0.22) !important;
  color: #5b3f83 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: #ffffff !important;
  box-shadow: 0 18px 34px rgba(130, 83, 210, 0.12) !important;
}

#openCardSelectionButton .mystic-destiny-submit-button__text,
#openCardSelectionButton .mystic-destiny-submit-button__arrow,
#memberAuthToggleButton .mystic-auth-action-button__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#openCardSelectionButton .mystic-destiny-submit-button__arrow {
  margin-left: 8px !important;
}

/* 로그인 버튼 아래 설명 문구는 버튼 안에서 숨김 */
#memberAuthToggleButton .mystic-auth-action-button__sub {
  display: none !important;
}

/* 로그인 클릭 시 아래에 펼쳐지는 패널 */
#destinyProfileForm .member-choice-panel.mystic-member-auth-inline-panel,
#memberChoicePanel.mystic-member-auth-inline-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  box-sizing: border-box !important;
}

/* 모바일에서는 세로 배치 */
@media (max-width: 640px) {
  #destinyProfileForm .mystic-destiny-action-row,
  form#destinyProfileForm .mystic-destiny-action-row,
  .mystic-destiny-action-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
  #destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton,
  .mystic-destiny-action-row > #openCardSelectionButton,
  .mystic-destiny-action-row > #memberAuthToggleButton {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    font-size: 16px !important;
  }
}
/* card-login-buttons-v1 END */

/* force-action-row-exact-v1 START */
/*
  /destiny 버튼 영역 최종 고정
  목표: [ 카드 선택하기 → ] [ 로그인 ]
  - 같은 행
  - 같은 넓이
  - 같은 높이
  - 카드 선택하기 버튼 현재 크기 기준
  - JS 건드리지 않음
*/

#destinyProfileForm #mysticDestinyActionRow.mystic-destiny-action-row {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 두 버튼을 완전히 같은 크기로 고정 */
#destinyProfileForm #mysticDestinyActionRow > #openCardSelectionButton,
#destinyProfileForm #mysticDestinyActionRow > #memberAuthToggleButton {
  flex: 0 0 292px !important;
  width: 292px !important;
  min-width: 292px !important;
  max-width: 292px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 13px !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* 왼쪽 카드 선택 버튼 */
#destinyProfileForm #openCardSelectionButton.mystic-destiny-submit-button {
  border: 0 !important;
  background: linear-gradient(135deg, #9b5de5 0%, #cf83c9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(130, 83, 210, 0.24) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* 오른쪽 로그인 버튼 */
#destinyProfileForm #memberAuthToggleButton.mystic-auth-action-button {
  border: 1px solid rgba(155, 93, 229, 0.25) !important;
  background: #ffffff !important;
  color: #4f3478 !important;
  box-shadow: 0 14px 28px rgba(130, 83, 210, 0.10) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* 버튼 내부 글자 정렬 */
#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__text,
#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__arrow,
#destinyProfileForm #memberAuthToggleButton .mystic-auth-action-button__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__arrow {
  margin-left: 8px !important;
}

/* 혹시 남아 있는 로그인 보조 문구는 숨김 */
#destinyProfileForm #memberAuthToggleButton .mystic-auth-action-button__sub {
  display: none !important;
}

/* 로그인 클릭 후 펼쳐지는 패널 */
#destinyProfileForm #memberChoicePanel.mystic-member-auth-inline-panel,
#destinyProfileForm .member-choice-panel.mystic-member-auth-inline-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  box-sizing: border-box !important;
}

/* 화면이 좁아질 때도 같은 행 유지하되, 두 버튼은 같은 크기 */
@media (max-width: 760px) {
  #destinyProfileForm #mysticDestinyActionRow.mystic-destiny-action-row {
    gap: 12px !important;
  }

  #destinyProfileForm #mysticDestinyActionRow > #openCardSelectionButton,
  #destinyProfileForm #mysticDestinyActionRow > #memberAuthToggleButton {
    flex: 0 1 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    min-width: 0 !important;
    max-width: calc((100% - 12px) / 2) !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}
/* force-action-row-exact-v1 END */

/* notice-width-buttons-v1 START */
/*
  목표:
  privacy-note 안내 박스와 같은 폭으로 버튼 행을 맞춤
  [ 카드 선택하기 → 50% ][ 로그인 50% ]
  기존 292px 고정값을 최종 덮어씀
*/

#destinyProfileForm #mysticDestinyActionRow.mystic-destiny-action-row,
#destinyProfileForm .mystic-destiny-action-row,
form#destinyProfileForm .mystic-destiny-action-row {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 두 버튼을 안내문 폭 안에서 정확히 50:50 */
#destinyProfileForm #mysticDestinyActionRow > #openCardSelectionButton,
#destinyProfileForm #mysticDestinyActionRow > #memberAuthToggleButton,
#destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
#destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 13px !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* 왼쪽: 카드 선택하기 */
#destinyProfileForm #openCardSelectionButton.mystic-destiny-submit-button {
  border: 0 !important;
  background: linear-gradient(135deg, #9b5de5 0%, #cf83c9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(130, 83, 210, 0.24) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* 오른쪽: 로그인 */
#destinyProfileForm #memberAuthToggleButton.mystic-auth-action-button {
  border: 1px solid rgba(155, 93, 229, 0.25) !important;
  background: #ffffff !important;
  color: #4f3478 !important;
  box-shadow: 0 14px 28px rgba(130, 83, 210, 0.10) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__text,
#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__arrow,
#destinyProfileForm #memberAuthToggleButton .mystic-auth-action-button__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__arrow {
  margin-left: 8px !important;
}

#destinyProfileForm #memberAuthToggleButton .mystic-auth-action-button__sub {
  display: none !important;
}

/* 로그인 클릭 후 펼쳐지는 패널도 안내문 폭과 동일 */
#destinyProfileForm #memberChoicePanel.mystic-member-auth-inline-panel,
#destinyProfileForm .member-choice-panel.mystic-member-auth-inline-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  box-sizing: border-box !important;
}

/* 작은 화면에서도 같은 행 50:50 유지 */
@media (max-width: 640px) {
  #destinyProfileForm #mysticDestinyActionRow.mystic-destiny-action-row,
  #destinyProfileForm .mystic-destiny-action-row,
  form#destinyProfileForm .mystic-destiny-action-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  #destinyProfileForm #mysticDestinyActionRow > #openCardSelectionButton,
  #destinyProfileForm #mysticDestinyActionRow > #memberAuthToggleButton {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}
/* notice-width-buttons-v1 END */

/* separated-wide-buttons-v1 START */
/*
  목표:
  안내 박스 폭 안에서 버튼을 양쪽 정렬
  [ 카드 선택하기 → ]      [ 로그인 ]
  - 붙어 보이지 않게 가운데 간격 확보
  - 두 버튼 넓이/높이 동일
  - 위 privacy-note와 같은 전체 폭 사용
*/

#destinyProfileForm #mysticDestinyActionRow.mystic-destiny-action-row,
#destinyProfileForm .mystic-destiny-action-row,
form#destinyProfileForm .mystic-destiny-action-row {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;

  /* 가운데를 넉넉히 띄워서 합쳐진 느낌 제거 */
  column-gap: 34px !important;

  align-items: stretch !important;
  justify-content: stretch !important;

  margin: 28px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 두 버튼 동일 크기 */
#destinyProfileForm #mysticDestinyActionRow > #openCardSelectionButton,
#destinyProfileForm #mysticDestinyActionRow > #memberAuthToggleButton,
#destinyProfileForm .mystic-destiny-action-row > #openCardSelectionButton,
#destinyProfileForm .mystic-destiny-action-row > #memberAuthToggleButton {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* 왼쪽 버튼 */
#destinyProfileForm #openCardSelectionButton.mystic-destiny-submit-button {
  border: 0 !important;
  background: linear-gradient(135deg, #9b5de5 0%, #cf83c9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(130, 83, 210, 0.24) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* 오른쪽 버튼 */
#destinyProfileForm #memberAuthToggleButton.mystic-auth-action-button {
  border: 1px solid rgba(155, 93, 229, 0.25) !important;
  background: #ffffff !important;
  color: #4f3478 !important;
  box-shadow: 0 14px 28px rgba(130, 83, 210, 0.10) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__text,
#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__arrow,
#destinyProfileForm #memberAuthToggleButton .mystic-auth-action-button__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#destinyProfileForm #openCardSelectionButton .mystic-destiny-submit-button__arrow {
  margin-left: 8px !important;
}

#destinyProfileForm #memberAuthToggleButton .mystic-auth-action-button__sub {
  display: none !important;
}

/* 로그인 클릭 후 펼쳐지는 패널은 안내 박스 폭과 동일 */
#destinyProfileForm #memberChoicePanel.mystic-member-auth-inline-panel,
#destinyProfileForm .member-choice-panel.mystic-member-auth-inline-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  box-sizing: border-box !important;
}

/* 작은 화면에서도 같은 행 유지 */
@media (max-width: 640px) {
  #destinyProfileForm #mysticDestinyActionRow.mystic-destiny-action-row,
  #destinyProfileForm .mystic-destiny-action-row,
  form#destinyProfileForm .mystic-destiny-action-row {
    column-gap: 14px !important;
  }

  #destinyProfileForm #mysticDestinyActionRow > #openCardSelectionButton,
  #destinyProfileForm #mysticDestinyActionRow > #memberAuthToggleButton {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}
/* separated-wide-buttons-v1 END */

/* readable-result-layout-v1 START */
/*
  결과 화면 하단 카드 가독성 정리
  - 2열로 흩어진 카드를 세로 리스트형으로 정렬
  - 각 카드 폭을 동일하게 맞춤
  - 문단 줄간격/여백을 넉넉하게 조정
  - JS 기능 흐름은 건드리지 않음
*/

/* 결과 카드 묶음은 한 줄씩 읽히도록 세로 정렬 */
#resultStep .result-grid,
.result-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

/* 넓은 결과 카드들은 전체 폭 사용 */
#resultStep .result-card,
#resultStep .result-card--wide,
.result-grid > .result-card,
.result-grid > .result-card--wide,
#situationAnswerPanel,
#uiSectionsPanel,
#integratedFeedbackPanel,
#premiumReadingSectionsPanel {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}

/* 깊이 해석 카드도 2열이 아니라 세로 리스트로 */
#resultStep .deep-reading-grid,
.deep-reading-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

/* 깊이 해석 섹션 전체 폭 정렬 */
#resultStep .deep-reading-section,
.deep-reading-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 22px !important;
}

/* 각 카드의 가독성 */
#resultStep .deep-reading-card,
.deep-reading-card,
#resultStep .result-card,
.result-card {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  padding: 26px 28px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

/* 카드 제목 영역 */
#resultStep .deep-reading-card__label,
#resultStep .result-card__label,
.deep-reading-card__label,
.result-card__label {
  margin-bottom: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* 제목 가독성 */
#resultStep .deep-reading-card h3,
#resultStep .deep-reading-card h4,
#resultStep .result-card h3,
#resultStep .result-card h4,
.deep-reading-card h3,
.deep-reading-card h4,
.result-card h3,
.result-card h4 {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.04em !important;
}

/* 본문 가독성 */
#resultStep .deep-reading-card p,
#resultStep .result-card p,
#resultStep .situation-answer-panel p,
.deep-reading-card p,
.result-card p,
.situation-answer-panel p {
  font-size: 15px !important;
  line-height: 1.9 !important;
  letter-spacing: -0.025em !important;
  word-break: keep-all !important;
}

/* 작은 안내문은 아래로 정리 */
#resultStep .deep-reading-card small,
#resultStep .result-card small,
.deep-reading-card small,
.result-card small {
  display: block !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(137, 112, 212, 0.18) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: rgba(72, 56, 96, 0.58) !important;
}

/* 카드 안 강조 박스도 너무 붙지 않게 */
#resultStep .deep-reading-card__soft,
.deep-reading-card__soft {
  margin-top: 16px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
}

/* 아이콘과 제목 간격 */
#resultStep .deep-reading-card__icon,
#resultStep .result-card__icon,
.deep-reading-card__icon,
.result-card__icon {
  margin-bottom: 16px !important;
}

/* 모바일에서는 더 편하게 */
@media (max-width: 720px) {
  #resultStep .deep-reading-card,
  .deep-reading-card,
  #resultStep .result-card,
  .result-card {
    padding: 22px 20px !important;
    border-radius: 18px !important;
  }

  #resultStep .deep-reading-card h3,
  #resultStep .deep-reading-card h4,
  #resultStep .result-card h3,
  #resultStep .result-card h4,
  .deep-reading-card h3,
  .deep-reading-card h4,
  .result-card h3,
  .result-card h4 {
    font-size: 18px !important;
  }

  #resultStep .deep-reading-card p,
  #resultStep .result-card p,
  .deep-reading-card p,
  .result-card p {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
}
/* readable-result-layout-v1 END */



/* personalized-daily-missions-v2 START */
/*
  오늘의 작은 미션 3가지 전용 레이아웃
  - 일반 해석 카드 안에는 미션 생성 금지
  - 미션 섹션에는 정확히 3개만 표시
  - 결과/카드/입력값 기반으로 중복 적은 미션 생성
*/

.personalized-mission-section-v2 {
  padding: 28px 30px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(238, 249, 234, 0.95), rgba(255, 252, 235, 0.95)) !important;
  border: 1px solid rgba(164, 198, 148, 0.18) !important;
  box-sizing: border-box !important;
}

.personalized-mission-heading-v2 {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 18px !important;
}

.personalized-mission-heading-v2__icon {
  font-size: 24px !important;
  line-height: 1 !important;
}

.personalized-mission-heading-v2 p {
  margin: 0 0 4px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(73, 116, 72, 0.82) !important;
}

.personalized-mission-heading-v2 h3 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.04em !important;
  color: #263b2f !important;
}

.personalized-mission-list-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.personalized-mission-item-v2 {
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(130, 170, 130, 0.22) !important;
  box-sizing: border-box !important;
}

.personalized-mission-check-v2 {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  cursor: pointer !important;
}

.personalized-mission-check-v2 input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin-top: 3px !important;
  accent-color: #8bbf8f !important;
}

.personalized-mission-item-v2 small {
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(82, 120, 82, 0.82) !important;
}

.personalized-mission-item-v2 b {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.03em !important;
  color: #263b2f !important;
}

.personalized-mission-item-v2 p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  word-break: keep-all !important;
  color: rgba(38, 59, 47, 0.72) !important;
}
/* personalized-daily-missions-v2 END */

/* tarot-image-unified-v2 START */
/*
  tarot_cards.json 기준 실제 카드 이미지 통합 반영
  - 선택한 세 장 카드 이미지
  - 종합 마지막 카드 이미지
  - 오늘의 행운 카드 이미지
*/

#threeTarotResults > .mf-selected-card-result-item-v2 {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: center !important;
}

#threeTarotResults .mf-selected-card-actual-image-wrap-v2 {
  width: 68px !important;
  height: 106px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(89, 60, 130, 0.20) !important;
  border: 1px solid rgba(218, 178, 85, 0.55) !important;
}

#threeTarotResults .mf-selected-card-actual-image-v2 {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

#synthesisCardImage.synthesis-card__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.animal-guide-card.mf-lucky-tarot-guide-v2 {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: center !important;
  padding: 24px 28px !important;
}

.mf-lucky-tarot-guide-v2__imageBox {
  width: 72px !important;
  height: 112px !important;
  min-width: 72px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 12px 24px rgba(95, 65, 136, 0.22) !important;
  border: 1px solid rgba(218, 178, 85, 0.55) !important;
}

.mf-lucky-tarot-guide-v2__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.animal-guide-card.mf-lucky-tarot-guide-v2 p {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(92, 60, 132, 0.78) !important;
}

.animal-guide-card.mf-lucky-tarot-guide-v2 h3 {
  margin: 0 0 10px !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.04em !important;
}

.animal-guide-card.mf-lucky-tarot-guide-v2 blockquote {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  word-break: keep-all !important;
}

@media (max-width: 640px) {
  #threeTarotResults > .mf-selected-card-result-item-v2 {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  #threeTarotResults .mf-selected-card-actual-image-wrap-v2 {
    width: 58px !important;
    height: 92px !important;
    min-width: 58px !important;
  }

  .animal-guide-card.mf-lucky-tarot-guide-v2 {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 22px 20px !important;
  }

  .mf-lucky-tarot-guide-v2__imageBox {
    width: 60px !important;
    height: 94px !important;
    min-width: 60px !important;
  }

  .animal-guide-card.mf-lucky-tarot-guide-v2 h3 {
    font-size: 17px !important;
  }

  .animal-guide-card.mf-lucky-tarot-guide-v2 blockquote {
    font-size: 14px !important;
  }
}
/* tarot-image-unified-v2 END */

/* =========================================================
   RESULT_COMPACT_LAYOUT_V1
   결과 화면 중복 영역 제거:
   - 에너지의 회복
   - 오늘의 회복 포인트
   - 감정과 소통 포인트
   - 추천 행동
   - 회색 보조 설명문
========================================================= */
.mf-compact-hidden,
[data-mf-compact-hidden="1"] {
  display: none !important;
}

/* REMOVE_FEEDBACK_META_CHIPS_V1 */
.mf-hide-feedback-meta-chip-v1 {
  display: none !important;
}

/* FEEDBACK_PUNCH_COPY_V1 */
.mf-punch-feedback-v1 {
  margin: 18px 0 14px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 83, 168, 0.14);
}

.mf-punch-feedback-v1__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
}

.mf-punch-feedback-v1__num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  background: rgba(126, 87, 194, 0.14);
}

.mf-punch-feedback-v1__text {
  font-size: 15px;
  line-height: 1.72;
  word-break: keep-all;
}

.mf-punch-feedback-v1__key {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(255, 244, 218, 0.7);
  border: 1px solid rgba(231, 179, 89, 0.22);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 700;
  word-break: keep-all;
}

.mf-hide-old-feedback-copy-v1 {
  display: none !important;
}






/* =========================================================
   JS가 붙여주는 정확 타겟 클래스용 스타일
========================================================= */

@media (max-width: 768px) {
  .mf-mobile-exact-result-v1 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mf-mobile-exact-section-v1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .mf-mobile-exact-feedback-v1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mf-mobile-exact-three-cards-v1 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  .mf-mobile-exact-three-cards-v1 > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .mf-mobile-exact-three-cards-v1 img {
    width: 78px !important;
    max-width: 78px !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .mf-mobile-exact-no-vertical-v1,
  .mf-mobile-exact-no-vertical-v1 * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .mf-mobile-exact-action-grid-v1,
  .mf-mobile-exact-signal-grid-v1 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mf-mobile-exact-action-grid-v1 > *,
  .mf-mobile-exact-signal-grid-v1 > * {
    min-width: 0 !important;
    text-align: center !important;
  }
}

/* =========================================================
   EXACT_MOBILE_RESULT_CSS_V1
   실제 DOM 확인 후 적용:
   - #resultStep
   - .result-grid
   - #integratedFeedbackPanel
   - #uiSectionsPanel
   - #situationAnswerPanel
   - .focus-section-block--action
   - .situation-action-box
   목적:
   모바일 결과 화면을 첨부 시안처럼 넓게 보이게 함.
   새 DOM 생성/기존 결과 숨김 없음.
========================================================= */

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #fffaf3 !important;
  }

  body,
  body.page,
  body.page--destiny,
  .app-shell,
  .app-main,
  .destiny-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    결과 화면 전체
  */
  #resultStep {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  #resultStep *,
  #integratedFeedbackPanel *,
  #uiSectionsPanel *,
  #situationAnswerPanel * {
    box-sizing: border-box !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /*
    결과 그리드가 하단으로 갈수록 좁아지는 문제 방지
  */
  #resultStep .result-grid,
  .result-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    핵심: 종합피드백 의견 패널
    실제 DOM:
    SECTION#integratedFeedbackPanel.integrated-feedback-panel.result-card.result-card--wide
  */
  #integratedFeedbackPanel,
  section#integratedFeedbackPanel.integrated-feedback-panel,
  #resultStep #integratedFeedbackPanel.result-card.result-card--wide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 10px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  #integratedFeedbackPanel > *,
  #integratedFeedbackPanel .integrated-feedback-panel__header,
  #integratedFeedbackPanel .integrated-feedback-panel__body,
  #integratedFeedbackPanel .integrated-feedback-panel__content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  #integratedFeedbackPanel .integrated-feedback-panel__header {
    padding: 0 !important;
  }

  #integratedFeedbackPanel .result-card__label {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  #integratedFeedbackTitle {
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.035em !important;
    margin: 0 0 6px !important;
  }

  #integratedFeedbackSubtitle {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
  }

  /*
    종합피드백 안의 카드 3장 영역:
    부모 클래스명이 다양해도, integratedFeedbackPanel 내부 이미지를 포함한 카드 흐름은
    3열을 유지하도록 제한적으로 적용
  */
  #integratedFeedbackPanel :is(
    .integrated-feedback-cards,
    .integrated-feedback-card-flow,
    .integrated-feedback-panel__cards,
    .feedback-card-flow,
    .card-flow,
    .tarot-flow,
    .selected-card-flow
  ) {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    class명을 못 맞추는 경우를 대비:
    integratedFeedbackPanel 내부에서 이미지 3개 이상 가진 div만 3열 후보로 처리
    :has는 Edge/Chrome 모바일에서 지원됨.
  */
  #integratedFeedbackPanel div:has(> * img):has(img:nth-of-type(1)) {
    max-width: 100% !important;
  }

  #integratedFeedbackPanel img {
    max-width: 82px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /*
    종합피드백 본문 1/2/3 문장 영역 넓게
  */
  #integratedFeedbackPanel p,
  #integratedFeedbackPanel li,
  #integratedFeedbackPanel div,
  #integratedFeedbackPanel span {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.58 !important;
  }

  /*
    오늘의 핵심 리딩 패널도 하단 좁아짐 방지
  */
  #uiSectionsPanel,
  #uiSectionsList,
  .focus-sections-panel,
  .focus-sections-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  #uiSectionsList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .focus-section-block,
  .focus-section-block--action {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /*
    오늘 바로 해볼 행동:
    세로 글자 깨짐 방지
  */
  .focus-section-block--action,
  .situation-action-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .focus-section-block--action *,
  .situation-action-box * {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /*
    질문 리딩 패널
  */
  #situationAnswerPanel,
  .situation-answer-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /*
    깊이 보기 영역은 기존 compact hidden 유지
  */
  .mf-compact-hidden,
  [data-mf-compact-hidden="1"] {
    display: none !important;
  }

  /*
    전체 결과 카드 공통 폭
  */
  #resultStep .result-card,
  #resultStep .result-card--wide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   MOBILE_SUMMARY_EXACT_V1
   실제 확인된 DOM 기준 모바일 결과 요약형 레이아웃
   확인된 위치:
   - #resultStep
   - .result-grid
   - #integratedFeedbackPanel
   - #uiSectionsPanel
   - #uiSectionsList
   - .focus-section-block--action
   - #situationAnswerPanel
   - .situation-action-box
========================================================= */

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #fffaf3 !important;
  }

  body.page--destiny,
  .app-shell,
  .app-main,
  .destiny-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    결과 화면 전체 폭
  */
  #resultStep {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 6px 18px !important;
    box-sizing: border-box !important;
  }

  #resultStep,
  #resultStep * {
    box-sizing: border-box !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /*
    결과 그리드: 한 열, 전체 폭
  */
  #resultStep .result-grid,
  .result-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
    모든 결과 카드 공통: 하단으로 내려가도 좁아지지 않게
  */
  #resultStep .result-card,
  #resultStep .result-card--wide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
  }

  /*
    종합피드백 의견 패널
  */
  #integratedFeedbackPanel,
  section#integratedFeedbackPanel.integrated-feedback-panel.result-card.result-card--wide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    border-radius: 18px !important;
  }

  #integratedFeedbackPanel > *,
  #integratedFeedbackPanel .integrated-feedback-panel__header,
  #integratedFeedbackPanel .integrated-feedback-panel__body,
  #integratedFeedbackPanel .integrated-feedback-panel__content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #integratedFeedbackPanel .result-card__label {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  #integratedFeedbackTitle {
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.035em !important;
    margin: 0 0 6px !important;
  }

  #integratedFeedbackSubtitle {
    display: none !important;
  }

  /*
    종합피드백 안쪽 카드 이미지/카드 흐름 폭 보정
  */
  #integratedFeedbackPanel img {
    max-width: 82px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  #integratedFeedbackPanel p,
  #integratedFeedbackPanel li,
  #integratedFeedbackPanel div,
  #integratedFeedbackPanel span {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.55 !important;
  }

  /*
    내부 계산 라벨 칩 숨김
  */
  #integratedFeedbackPanel .mf-hide-feedback-meta-chip-v1,
  #integratedFeedbackPanel [data-mf-hide-feedback-meta-chip-v1="1"] {
    display: none !important;
  }

  /*
    긴 상세 리딩 패널 숨김:
    모바일 첫 화면은 요약 결과 카드처럼 보여야 함.
  */
  #uiSectionsPanel,
  #uiSectionsList,
  .focus-sections-panel,
  .focus-sections-list,
  .deep-reading-section,
  .reading-details {
    display: none !important;
  }

  /*
    질문 리딩 패널은 유지하되 폭 좁아짐 방지
  */
  #situationAnswerPanel,
  .situation-answer-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 18px !important;
  }

  /*
    오늘 바로 해볼 행동 영역
  */
  .situation-action-box,
  .focus-section-block--action {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .situation-action-box *,
  .focus-section-block--action * {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  /*
    세로 글자 깨짐 방지
  */
  #resultStep p,
  #resultStep li,
  #resultStep div,
  #resultStep span,
  #resultStep strong,
  #resultStep b {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    letter-spacing: -0.025em !important;
  }

  /*
    너무 긴 설명/보조 설명 축소
  */
  #resultStep .result-card__subtext,
  #resultStep .result-card__description,
  #resultStep small {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /*
    모바일 하단 버튼 폭
  */
  #resultStep button,
  #resultStep a {
    max-width: 100% !important;
  }
}

/* =========================================================
   FEEDBACK_CARDS_SAME_ROW_V1
   종합피드백 카드 3장 모바일 한 행 고정
   - 기존 DOM 교체 없음
   - 기존 결과 숨김 없음
   - #integratedFeedbackPanel 내부 카드 흐름 부모만 타겟
========================================================= */

@media (max-width: 768px) {
  #integratedFeedbackPanel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #integratedFeedbackPanel .mf-feedback-card-row-v1 {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    카드 3장만 직접 자식인 경우
  */
  #integratedFeedbackPanel .mf-feedback-card-row-v1.mf-feedback-card-row-v1--three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /*
    카드 + 화살표 + 카드 + 화살표 + 카드 구조인 경우
  */
  #integratedFeedbackPanel .mf-feedback-card-row-v1.mf-feedback-card-row-v1--arrows {
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr) !important;
  }

  #integratedFeedbackPanel .mf-feedback-card-row-v1 > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    화살표는 같은 행 중앙에 작게
  */
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > .mf-feedback-flow-arrow-v1 {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: #9b70c9 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /*
    카드 박스는 같은 행에서 같은 기준으로 보이게
  */
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    min-height: 0 !important;
    padding: 8px 4px !important;
  }

  #integratedFeedbackPanel .mf-feedback-card-row-v1 img {
    width: 72px !important;
    max-width: 72px !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    margin: 0 auto 6px !important;
    display: block !important;
  }

  #integratedFeedbackPanel .mf-feedback-card-row-v1 p,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 div,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 span,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 strong,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 b {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /*
    카드명
  */
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) strong,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) b,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) h4,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) h5 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  /*
    키워드 설명은 너무 길면 카드 높이를 밀어내므로 작게
  */
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) p,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) span,
  #integratedFeedbackPanel .mf-feedback-card-row-v1 > *:has(img) div {
    font-size: 11px !important;
    line-height: 1.32 !important;
  }
}

/* =========================================================
   LENS CARDS FULL WIDTH ALIGN V1
   - 종합 리딩 아래 핵심 흐름 / 균형 포인트 / 선택 기준 카드
   - 3개 칸을 같은 폭, 같은 높이로 꽉 채움
========================================================= */

#integratedFeedbackLenses,
.integrated-feedback-lenses {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
}

#integratedFeedbackLenses > *,
.integrated-feedback-lenses > * {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 16px 16px !important;
  border-radius: 14px !important;
}

#integratedFeedbackLenses h4,
#integratedFeedbackLenses h5,
#integratedFeedbackLenses strong,
.integrated-feedback-lenses h4,
.integrated-feedback-lenses h5,
.integrated-feedback-lenses strong {
  display: block !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

#integratedFeedbackLenses p,
#integratedFeedbackLenses div,
#integratedFeedbackLenses span,
.integrated-feedback-lenses p,
.integrated-feedback-lenses div,
.integrated-feedback-lenses span {
  line-height: 1.65 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* 아주 좁은 모바일에서는 1열로 무너지지 말고 3칸 유지하되 간격만 줄임 */
@media (max-width: 520px) {
  #integratedFeedbackLenses,
  .integrated-feedback-lenses {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #integratedFeedbackLenses > *,
  .integrated-feedback-lenses > * {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  #integratedFeedbackLenses h4,
  #integratedFeedbackLenses h5,
  #integratedFeedbackLenses strong,
  .integrated-feedback-lenses h4,
  .integrated-feedback-lenses h5,
  .integrated-feedback-lenses strong {
    font-size: 12px !important;
  }

  #integratedFeedbackLenses p,
  #integratedFeedbackLenses div,
  #integratedFeedbackLenses span,
  .integrated-feedback-lenses p,
  .integrated-feedback-lenses div,
  .integrated-feedback-lenses span {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}

/* LENS CARDS FULL WIDTH ALIGN V1 END */

/* =========================================================
   LENS CARDS AUTO FILL GRID V2
   - 3개면 3등분
   - 5개면 3개 + 아래 2개가 반반 꽉 차게
   - 2개면 반반
   - 4개면 2x2
========================================================= */

#integratedFeedbackLenses,
.integrated-feedback-lenses {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
}

/* 기본: 3칸 한 줄 구조 */
#integratedFeedbackLenses > *,
.integrated-feedback-lenses > * {
  grid-column: span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 18px 18px !important;
  border-radius: 14px !important;
}

/* 카드가 1개면 전체 폭 */
#integratedFeedbackLenses:has(> :nth-child(1)):not(:has(> :nth-child(2))) > *,
.integrated-feedback-lenses:has(> :nth-child(1)):not(:has(> :nth-child(2))) > * {
  grid-column: span 6 !important;
}

/* 카드가 2개면 반반 */
#integratedFeedbackLenses:has(> :nth-child(2)):not(:has(> :nth-child(3))) > *,
.integrated-feedback-lenses:has(> :nth-child(2)):not(:has(> :nth-child(3))) > * {
  grid-column: span 3 !important;
}

/* 카드가 4개면 2x2 */
#integratedFeedbackLenses:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *,
.integrated-feedback-lenses:has(> :nth-child(4)):not(:has(> :nth-child(5))) > * {
  grid-column: span 3 !important;
}

/* 카드가 5개면 위 3개, 아래 2개는 반반으로 꽉 채움 */
#integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(1),
#integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(2),
#integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(3),
.integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(1),
.integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(2),
.integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(3) {
  grid-column: span 2 !important;
}

#integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4),
#integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5),
.integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4),
.integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5) {
  grid-column: span 3 !important;
}

/* 텍스트 정렬 */
#integratedFeedbackLenses h4,
#integratedFeedbackLenses h5,
#integratedFeedbackLenses strong,
.integrated-feedback-lenses h4,
.integrated-feedback-lenses h5,
.integrated-feedback-lenses strong {
  display: block !important;
  margin-bottom: 9px !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

#integratedFeedbackLenses p,
#integratedFeedbackLenses div,
#integratedFeedbackLenses span,
.integrated-feedback-lenses p,
.integrated-feedback-lenses div,
.integrated-feedback-lenses span {
  line-height: 1.65 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* 모바일에서는 2열로 안정적으로 꽉 채움 */
@media (max-width: 520px) {
  #integratedFeedbackLenses,
  .integrated-feedback-lenses {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #integratedFeedbackLenses > *,
  .integrated-feedback-lenses > *,
  #integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4),
  #integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5),
  .integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4),
  .integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5) {
    grid-column: span 1 !important;
    padding: 14px 13px !important;
  }

  #integratedFeedbackLenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5),
  .integrated-feedback-lenses:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5) {
    grid-column: span 2 !important;
  }
}

/* LENS CARDS AUTO FILL GRID V2 END */


/* SIMPLE_FREE_PROFILE_STYLE_V2 */

#destinyProfileForm {
  gap: 18px;
}

#destinyProfileForm textarea {
  min-height: 108px;
  line-height: 1.6;
}

#destinyProfileForm .privacy-note {
  grid-column: 1 / -1;
}

@media (max-width: 759px) {
  .destiny-page {
    width: 100%;
    padding: 18px 9px 100px;
    box-sizing: border-box;
  }

  .destiny-panel,
  .destiny-loading {
    width: 100%;
    padding: 21px 14px;
    border-radius: 21px;
    box-sizing: border-box;
  }

  #destinyProfileForm {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  #destinyProfileForm .interest-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #destinyProfileForm
  .interest-grid label:last-child {
    grid-column: 1 / -1;
  }

  #destinyProfileForm
  input[type="text"],
  #destinyProfileForm
  input[type="date"],
  #destinyProfileForm textarea {
    font-size: 16px;
  }

  #destinyProfileForm
  #mysticDestinyActionRow.final-side-action-row {
    grid-template-columns:
      minmax(0, 1.55fr)
      minmax(0, 0.7fr) !important;
    column-gap: 8px !important;
    margin-top: 7px !important;
  }

  #destinyProfileForm
  #mysticDestinyActionRow
  > button {
    padding: 0 7px !important;
    font-size: 12px !important;
  }

  #openCardSelectionButton
  .mystic-destiny-submit-button__arrow {
    display: none;
  }
}

/* FINAL_FREE_INPUT_UX_V3 */

/* 무료 리딩에서는 상세 개인정보 입력란을 숨깁니다. */
#destinyProfileForm .field:has(input[name="calendarType"]),
#destinyProfileForm .field:has(#birthTimeStatus),
#destinyProfileForm #birthTimeField,
#destinyProfileForm .field:has(#birthPlace),
#destinyProfileForm .field:has(#livingRegion),
#destinyProfileForm .field:has(#calculationGender),
#destinyProfileForm .field:has(#lifeStage),
#destinyProfileForm .field:has(#occupationStatus),
#destinyProfileForm .field:has(#tonePreference) {
  display: none !important;
}

#destinyProfileForm {
  gap: 18px;
}

#destinyProfileForm textarea {
  min-height: 108px;
  line-height: 1.65;
}

#destinyProfileForm .privacy-note {
  grid-column: 1 / -1;
  margin: 0;
}

#profileStep .panel-heading h2 {
  line-height: 1.35;
  word-break: keep-all;
}

@media (min-width: 760px) {
  #destinyProfileForm {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #destinyProfileForm fieldset,
  #destinyProfileForm .field:has(#currentState),
  #destinyProfileForm .privacy-note,
  #destinyProfileForm #mysticDestinyActionRow {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  .destiny-page {
    width: 100%;
    padding: 18px 8px 100px;
    box-sizing: border-box;
  }

  .destiny-panel,
  .destiny-loading {
    width: 100%;
    padding: 21px 14px;
    border-radius: 21px;
    box-sizing: border-box;
  }

  #destinyProfileForm {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  #destinyProfileForm .interest-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #destinyProfileForm .interest-grid label:last-child {
    grid-column: 1 / -1;
  }

  #destinyProfileForm .interest-grid label span {
    min-height: 45px;
    padding: 8px 6px;
    font-size: 0.78rem;
  }

  #destinyProfileForm input[type="text"],
  #destinyProfileForm input[type="date"],
  #destinyProfileForm textarea {
    font-size: 16px;
  }

  #destinyProfileForm
  #mysticDestinyActionRow.final-side-action-row {
    grid-template-columns:
      minmax(0, 1.65fr)
      minmax(0, 0.7fr) !important;
    column-gap: 8px !important;
    margin-top: 7px !important;
  }

  #destinyProfileForm
  #mysticDestinyActionRow
  > button {
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
  }

  #openCardSelectionButton
  .mystic-destiny-submit-button__arrow {
    display: none !important;
  }
}

/* COMPACT_RESULT_TOP_STYLE_V1 */

.compact-result-top {
  margin: 16px 0 14px;
  border: 1px solid rgba(139, 101, 180, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      #fffdfb,
      #f7effb
    );
  padding: 23px;
  box-shadow:
    0 18px 40px
    rgba(76, 51, 96, 0.1);
}

.compact-result-top__heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.compact-result-top__heading > span {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      #9971ca,
      #d08cbd
    );
  place-items: center;
  color: #ffffff;
  font-size: 1.1rem;
}

.compact-result-top__heading p {
  margin: 0 0 5px;
  color: #8b69aa;
  font-size: 0.73rem;
  font-weight: 900;
}

.compact-result-top__heading h3 {
  margin: 0;
  color: #44364b;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  line-height: 1.42;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.compact-result-top__summary {
  margin: 17px 0 0;
  color: #675c6b;
  font-size: 0.92rem;
  line-height: 1.75;
  word-break: keep-all;
}

.compact-result-top__action {
  margin-top: 16px;
  border-radius: 15px;
  background: #efe5f6;
  padding: 14px 15px;
}

.compact-result-top__action strong {
  color: #795595;
  font-size: 0.72rem;
}

.compact-result-top__action p {
  margin: 5px 0 0;
  color: #4f4254;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
}

.compact-followup-button {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 0;
  border-radius: 15px;
  background:
    linear-gradient(
      135deg,
      #926bc4,
      #c77fb4
    );
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  box-shadow:
    0 12px 24px
    rgba(126, 82, 159, 0.2);
}

/* 기존 카드 3장을 핵심 리딩 바로 아래에 표시 */
#destinyTarotResultPanel {
  margin-top: 14px;
}

/* 첫 화면의 중복 요약은 감춤 */
#resultStep > .today-story-card {
  display: none !important;
}

@media (max-width: 600px) {
  .compact-result-top {
    margin-top: 11px;
    border-radius: 20px;
    padding: 18px 14px;
  }

  .compact-result-top__heading {
    gap: 9px;
  }

  .compact-result-top__heading > span {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    border-radius: 12px;
  }

  .compact-result-top__summary {
    margin-top: 13px;
    font-size: 0.86rem;
    line-height: 1.68;
  }

  #destinyTarotResultPanel {
    border-radius: 20px;
    padding: 18px 13px;
  }

  #destinyTarotResultPanel
  .tarot-result-item {
    grid-template-columns:
      72px minmax(0, 1fr);
    padding: 11px;
    gap: 11px;
  }

  #destinyTarotResultPanel
  .tarot-result-item__visual {
    width: 65px;
  }
}

/* FOLLOWUP_QUESTION_PANEL_STYLE_V1 */

.followup-question-panel {
  margin: 14px 0;
  border: 1px solid rgba(141, 104, 177, 0.17);
  border-radius: 22px;
  background: #fffdfb;
  padding: 20px;
  box-shadow:
    0 16px 34px
    rgba(75, 50, 94, 0.09);
}

.followup-question-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.followup-question-panel__heading p {
  margin: 0 0 4px;
  color: #9572b2;
  font-size: 0.72rem;
  font-weight: 900;
}

.followup-question-panel__heading h3 {
  margin: 0;
  color: #493b50;
  font-size: 1.15rem;
}

#closeFollowupButton {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f1e8f6;
  color: #76558f;
  cursor: pointer;
  font-size: 1.3rem;
}

.followup-suggestion-list {
  display: grid;
  margin-top: 16px;
  gap: 8px;
}

.followup-suggestion-list button {
  width: 100%;
  border: 1px solid #e5d9ea;
  border-radius: 13px;
  background: #faf6fc;
  padding: 11px 13px;
  color: #64516f;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
}

.followup-question-panel label {
  display: block;
  margin: 17px 0 8px;
  color: #55485c;
  font-size: 0.84rem;
  font-weight: 900;
}

#followupQuestionInput {
  width: 100%;
  min-height: 96px;
  border: 1px solid #ded3e4;
  border-radius: 14px;
  outline: none;
  padding: 13px 14px;
  box-sizing: border-box;
  color: #4b4050;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}

#followupQuestionInput:focus {
  border-color: #a989ca;
  box-shadow: 0 0 0 4px rgba(169, 137, 202, 0.13);
}

.followup-question-panel__footer {
  display: flex;
  margin-top: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.followup-question-panel__footer span {
  color: #8c8192;
  font-size: 0.75rem;
}

#sendFollowupQuestionButton {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      #916bc2,
      #c681b5
    );
  padding: 0 18px;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
}

@media (max-width: 600px) {
  .followup-question-panel {
    border-radius: 19px;
    padding: 17px 13px;
  }

  .followup-question-panel__footer {
    align-items: stretch;
    flex-direction: column;
  }

  #sendFollowupQuestionButton {
    width: 100%;
  }
}

/* FOLLOWUP_ANSWER_STYLE_V1 */

.followup-answer-list {
  display: grid;
  margin-top: 18px;
  gap: 12px;
}

.followup-answer-card {
  border: 1px solid #e4d8ea;
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      #fffdfb,
      #f8f1fb
    );
  padding: 16px;
}

.followup-answer-card__count {
  color: #9270ae;
  font-size: 0.7rem;
  font-weight: 900;
}

.followup-answer-card h4 {
  margin: 7px 0 9px;
  color: #4b3d52;
  font-size: 0.98rem;
  line-height: 1.45;
}

.followup-answer-card p {
  margin: 0;
  color: #675d6b;
  font-size: 0.86rem;
  line-height: 1.72;
  white-space: pre-line;
}

@media (max-width: 600px) {
  .followup-answer-card {
    border-radius: 15px;
    padding: 14px;
  }
}

/* FINAL_RESULT_DETAILS_STYLE_V1 */

.final-result-details {
  margin: 14px 0 0;
  border: 1px solid #e4d9e8;
  border-radius: 18px;
  background: #fffdfb;
  overflow: hidden;
}

.final-result-details > summary {
  display: flex;
  min-height: 54px;
  padding: 0 17px;
  align-items: center;
  justify-content: space-between;
  color: #725780;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
  list-style: none;
}

.final-result-details > summary::-webkit-details-marker {
  display: none;
}

.final-result-details > summary b {
  font-size: 1rem;
  transition: transform 180ms ease;
}

.final-result-details[open] > summary b {
  transform: rotate(180deg);
}

.final-result-details__body {
  display: grid;
  border-top: 1px solid #eee6f0;
  padding: 17px;
  gap: 16px;
}

.final-result-details__body > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 600px) {
  .final-result-details {
    border-radius: 16px;
  }

  .final-result-details > summary {
    min-height: 50px;
    padding: 0 14px;
    font-size: 0.82rem;
  }

  .final-result-details__body {
    padding: 10px;
    gap: 12px;
  }

  .final-result-details__body
  .deep-reading-grid,
  .final-result-details__body
  .signal-section {
    grid-template-columns: 1fr !important;
  }
}

/* MOBILE_FOLLOWUP_FIX_V1 */

@media (max-width: 600px) {
  #compactFollowupButton,
  #sendFollowupQuestionButton,
  #closeFollowupButton,
  [data-followup-question] {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #followupQuestionPanel:not([hidden]) {
    display: block !important;
    position: relative !important;
    z-index: 40 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #followupQuestionPanel[hidden] {
    display: none !important;
  }

  #followupQuestionInput {
    width: 100% !important;
    min-height: 110px !important;
    font-size: 16px !important;
    position: relative !important;
    z-index: 45 !important;
  }

  .followup-completion-panel {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}