.moon-lp-shell {
  overflow-x: hidden;
}

@media (max-width: 720px) {
  .moon-lp-page,
  .moon-register-page,
  .moon-routine-page,
  .moon-result-page,
  .moon-premium-page,
  .moon-member-page,
  .moon-love-type-page,
  .moon-tarot-page,
  .moon-compat-page,
  .moon-monthly-page {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
  }

  .moon-lp-page > .moon-lp,
  .moon-register-page > .moon-register,
  .moon-routine-page > .moon-routine,
  .moon-result-page > .moon-result,
  .moon-premium-page > .moon-premium,
  .moon-member-page > .moon-member,
  .moon-love-type-page > .moon-love-type,
  .moon-tarot-page > .moon-tarot,
  .moon-compat-page > .moon-compat,
  .moon-monthly-page > .moon-monthly {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    min-height: 100svh !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: initial !important;
  }

  .moon-lp a,
  .moon-register a,
  .moon-routine a,
  .moon-result a,
  .moon-premium a,
  .moon-member a,
  .moon-love-type a,
  .moon-tarot a,
  .moon-compat a,
  .moon-monthly a {
    -webkit-tap-highlight-color: rgba(244, 219, 157, 0.24);
  }

  .moon-lp p,
  .moon-register p,
  .moon-routine p,
  .moon-result p,
  .moon-premium p,
  .moon-member p,
  .moon-love-type p,
  .moon-tarot p,
  .moon-compat p,
  .moon-monthly p,
  .moon-lp small,
  .moon-register small,
  .moon-routine small,
  .moon-result small,
  .moon-premium small,
  .moon-member small,
  .moon-love-type small,
  .moon-tarot small,
  .moon-compat small,
  .moon-monthly small {
    font-size: max(13px, 1em);
    line-height: 1.65;
  }

  .moon-lp__button,
  .moon-lp__shop-button,
  .moon-register__button,
  .moon-register__submit,
  .moon-routine__cta,
  .moon-result__signup a,
  .moon-premium__primary,
  .moon-premium__bottom-cta,
  .moon-love-type__cta,
  .moon-tarot__button,
  .moon-compat__submit,
  .moon-monthly__pdf a {
    min-height: 56px !important;
    font-size: clamp(16px, 4.5vw, 18px) !important;
    line-height: 1.25 !important;
  }

  .moon-lp__hero,
  .moon-register,
  .moon-routine,
  .moon-result,
  .moon-premium,
  .moon-member,
  .moon-love-type,
  .moon-tarot,
  .moon-compat,
  .moon-monthly {
    background-position: center top !important;
  }

  .moon-lp {
    background: #fffaf4;
  }

  .moon-lp__hero {
    min-height: 560px !important;
    padding: 18px 20px 36px !important;
  }

  .moon-lp__brand,
  .moon-register__brand,
  .moon-premium__brand,
  .moon-result__brand,
  .moon-monthly__brand,
  .moon-love-type__brand,
  .moon-member__brand,
  .moon-tarot__brand,
  .moon-compat__brand {
    font-size: clamp(17px, 4.7vw, 21px) !important;
    line-height: 1.25 !important;
  }

  .moon-lp__login,
  .moon-register__login,
  .moon-premium__login,
  .moon-result__login,
  .moon-monthly__login {
    min-width: 76px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  .moon-lp__menu,
  .moon-register__menu,
  .moon-premium__menu,
  .moon-result__menu,
  .moon-monthly__menu,
  .moon-tarot__menu,
  .moon-compat__menu {
    width: 42px !important;
    height: 42px !important;
  }

  .moon-lp__hero-inner {
    min-height: 440px !important;
    align-items: center !important;
  }

  .moon-lp__hero-copy {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: 0 !important;
    padding-top: 90px !important;
  }

  .moon-lp__ornament {
    display: none !important;
  }

  .moon-lp__hero h1 {
    font-size: clamp(40px, 12vw, 52px) !important;
    line-height: 1.22 !important;
  }

  .moon-lp__hero p {
    max-width: 330px !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.75 !important;
  }

  .moon-lp__button--hero,
  .moon-lp__button--final {
    width: min(92%, 360px) !important;
  }

  .moon-lp__features,
  .moon-lp__premium,
  .moon-lp__shop,
  .moon-lp__faq-row,
  .moon-lp__final {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .moon-lp__free-panel {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .moon-lp__free-panel h2,
  .moon-lp__premium-heading h2,
  .moon-lp__premium h2,
  .moon-lp__final h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.35 !important;
  }

  .moon-lp__free-panel p {
    font-size: 15px !important;
  }

  .moon-lp__free-items,
  .moon-lp__premium,
  .moon-lp__shop,
  .moon-lp__faq-row,
  .moon-lp__final {
    grid-template-columns: 1fr !important;
  }

  .moon-lp__free-item {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    gap: 4px 14px !important;
  }

  .moon-lp__free-item > span {
    width: 54px !important;
    height: 54px !important;
    font-size: 30px !important;
  }

  .moon-lp__free-item strong {
    font-size: 17px !important;
  }

  .moon-lp__free-item small {
    font-size: 13px !important;
  }

  .moon-lp__premium-heading {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    margin: 24px 0 16px !important;
  }

  .moon-lp__premium-heading span {
    display: none !important;
  }

  .moon-lp__feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .moon-lp__feature-card {
    display: grid !important;
    grid-template-columns: 132px 1fr !important;
    min-height: 132px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  .moon-lp__feature-art {
    aspect-ratio: auto !important;
    min-height: 132px !important;
  }

  .moon-lp__feature-title {
    align-self: end;
    margin: 18px 16px 4px !important;
    font-size: 20px !important;
  }

  .moon-lp__feature-text {
    max-width: none !important;
    margin: 0 16px 18px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }

  .moon-lp__price-card {
    width: 100% !important;
    padding: 24px 18px 18px !important;
  }

  .moon-lp__price-row strong {
    font-size: 54px !important;
  }

  .moon-lp__price-card ul {
    font-size: 14px !important;
  }

  .moon-lp__shop {
    gap: 14px !important;
    text-align: left !important;
  }

  .moon-lp__shop-visual {
    width: 100% !important;
    aspect-ratio: 2.8 / 1 !important;
  }

  .moon-lp__shop h2 {
    font-size: 22px !important;
  }

  .moon-lp__faq-row {
    display: grid !important;
    grid-template-columns: 56px 1fr 32px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .moon-lp__faq-row h2 {
    font-size: 21px !important;
  }

  .moon-lp__final {
    min-height: 240px !important;
    padding-top: 44px !important;
    padding-bottom: 36px !important;
  }

  .moon-register,
  .moon-routine,
  .moon-result,
  .moon-premium,
  .moon-member,
  .moon-love-type,
  .moon-tarot,
  .moon-compat,
  .moon-monthly {
    padding: 20px 20px 96px !important;
  }

  .moon-register__hero,
  .moon-premium__hero,
  .moon-routine__hero,
  .moon-result__hero,
  .moon-love-type__hero,
  .moon-compat__hero,
  .moon-monthly__hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 52px 0 32px !important;
  }

  .moon-register__hero h1,
  .moon-premium__hero h1,
  .moon-routine__hero h1,
  .moon-result__hero h1,
  .moon-love-type h1,
  .moon-tarot h1,
  .moon-compat h1,
  .moon-monthly h1 {
    font-size: clamp(34px, 10vw, 42px) !important;
    line-height: 1.32 !important;
  }

  .moon-register__hero p,
  .moon-premium__hero p,
  .moon-routine__hero p,
  .moon-result__hero p,
  .moon-love-type p,
  .moon-tarot p,
  .moon-compat p,
  .moon-monthly p {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.75 !important;
  }

  .moon-routine__mood h2,
  .moon-register__signup h2,
  .moon-register__benefits h2,
  .moon-premium__contents h2,
  .moon-premium__benefits h2,
  .moon-result__routine h2,
  .moon-monthly__pdf h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.4 !important;
  }

  .moon-routine__options {
    gap: 14px !important;
  }

  .moon-routine__option {
    min-height: 70px !important;
    padding: 12px 18px !important;
    font-size: clamp(19px, 5.2vw, 23px) !important;
  }

  .moon-routine__option-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .moon-routine__note {
    min-height: auto !important;
    padding: 18px !important;
  }

  .moon-routine__note p {
    font-size: 15px !important;
  }

  .moon-register__panel,
  .moon-register__benefit,
  .moon-premium__plan,
  .moon-premium__content,
  .moon-premium__benefit,
  .moon-result__summary,
  .moon-result__premium,
  .moon-love-type__steps,
  .moon-love-type__recommend,
  .moon-compat__form,
  .moon-compat__result,
  .moon-monthly__item,
  .moon-monthly__pdf {
    border-radius: 18px !important;
  }

  .moon-register__button,
  .moon-register__submit {
    width: 100% !important;
  }

  .moon-register__benefit {
    grid-template-columns: 74px 1fr !important;
    min-height: auto !important;
    padding: 18px !important;
  }

  .moon-register__benefit-icon {
    width: 62px !important;
    height: 62px !important;
  }

  .moon-register__benefit h3 {
    font-size: 20px !important;
  }

  .moon-register__benefit p {
    font-size: 15px !important;
  }

  .moon-premium__plan,
  .moon-premium__content-grid,
  .moon-premium__benefit-row,
  .moon-result__summary,
  .moon-result__routine > div,
  .moon-result__premium,
  .moon-love-type__recommend,
  .moon-compat__result,
  .moon-monthly__pdf {
    grid-template-columns: 1fr !important;
  }

  .moon-premium__trial {
    width: 108px !important;
    height: 108px !important;
    font-size: 26px !important;
  }

  .moon-premium__content {
    grid-template-columns: 118px 1fr !important;
    min-height: 120px !important;
  }

  .moon-premium__content strong,
  .moon-member__card strong,
  .moon-love-type__recommend strong,
  .moon-monthly__item strong,
  .moon-compat__result h2 {
    font-size: clamp(20px, 5.6vw, 25px) !important;
  }

  .moon-premium__content small,
  .moon-premium__benefit p,
  .moon-member__card small,
  .moon-love-type__recommend small,
  .moon-monthly__item small,
  .moon-compat__result p {
    font-size: 14px !important;
  }

  .moon-result__summary {
    height: auto !important;
    padding: 20px !important;
  }

  .moon-result__summary h2 {
    font-size: 28px !important;
  }

  .moon-result__routine > div {
    gap: 14px !important;
  }

  .moon-result__routine article {
    min-height: 190px !important;
  }

  .moon-result__premium img,
  .moon-result__summary img {
    width: 100% !important;
    height: auto !important;
  }

  .moon-result__signup {
    margin-right: -20px !important;
    margin-left: -20px !important;
    padding: 28px 20px 34px !important;
  }

  .moon-member__message {
    height: auto !important;
    min-height: 260px !important;
    padding: 28px 24px !important;
    background-position: center top !important;
  }

  .moon-member__message p {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  .moon-member__recommend {
    grid-template-columns: 110px 1fr 44px !important;
    min-height: 120px !important;
  }

  .moon-member__recommend strong {
    font-size: 24px !important;
  }

  .moon-member__grid {
    grid-template-columns: 1fr !important;
  }

  .moon-member__card {
    min-height: 170px !important;
  }

  .moon-member__routine > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .moon-love-type__steps {
    padding: 20px !important;
  }

  .moon-love-type__step-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .moon-tarot__hero {
    height: auto !important;
    min-height: 420px !important;
    padding-top: 56px !important;
  }

  .moon-tarot__result {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 20px !important;
  }

  .moon-tarot__card-image {
    width: min(72%, 240px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .moon-tarot__message-grid {
    grid-template-columns: 1fr !important;
  }

  .moon-tarot__message {
    min-height: 150px !important;
    padding: 18px !important;
  }

  .moon-compat__form {
    padding: 20px !important;
  }

  .moon-compat__person {
    grid-template-columns: 1fr !important;
  }

  .moon-compat input,
  .moon-compat select {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .moon-monthly__selector {
    width: 100% !important;
    height: 58px !important;
    font-size: 18px !important;
  }

  .moon-monthly__item {
    grid-template-columns: 78px 1fr 24px !important;
    min-height: 116px !important;
    padding: 16px !important;
  }

  .moon-monthly__icon {
    width: 64px !important;
    height: 64px !important;
  }

  .moon-monthly__pdf {
    min-height: auto !important;
    padding: 18px !important;
  }

  .moon-monthly__pdf-img {
    width: 100% !important;
    height: 150px !important;
    background-size: 360px 120px !important;
  }

  .moon-member__tabs,
  .moon-love-type__tabs,
  .moon-tarot__tabs,
  .moon-compat__tabs,
  .moon-monthly__tabs {
    position: sticky !important;
    right: auto !important;
    bottom: 0 !important;
    left: auto !important;
    height: 78px !important;
    margin: 28px -20px -96px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(5, 10, 35, 0.96) !important;
    backdrop-filter: blur(14px);
  }

  .moon-member__tabs small,
  .moon-love-type__tabs small,
  .moon-tarot__tabs small,
  .moon-compat__tabs small,
  .moon-monthly__tabs small {
    font-size: 11px !important;
  }
}