/* Original preview.css rules scoped to the live F01 result. */
@scope (main:has(.sample)) {
.sample { animation: sample-in 180ms ease-out both; }
@keyframes sample-in { from { opacity: .75; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.sample-eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .04em; }
.sample-title { margin: 0; font-size: clamp(29px, 4vw, 38px); line-height: 1.25; letter-spacing: -.045em; font-weight: 760; }
.sample-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.sample-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.sample-meta span + span { position: relative; }
.sample-meta span + span::before { position: absolute; left: -10px; content: "·"; color: #aca2b8; }

.zodiac-heading { display: grid; grid-template-columns: minmax(0, 1fr) 108px; align-items: center; gap: 18px; margin: 0 0 15px; }
.zodiac-heading .sample-eyebrow { margin-bottom: 3px; }
.zodiac-art { width: 108px; height: 108px; object-fit: contain; display: block; }
.zodiac-art-placeholder { width: 116px; height: 116px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 15px; font-weight: 700; }
.verdict { padding: 22px; border: 1px solid #e5d9f0; border-radius: 12px; background: var(--primary-soft); }
.verdict-label { display: block; margin-bottom: 7px; color: var(--primary); font-size: 13px; font-weight: 750; }
.verdict-text { margin: 0; font-size: clamp(21px, 2.7vw, 27px); line-height: 1.48; letter-spacing: -.03em; font-weight: 730; word-break: keep-all; }
.verdict-support { margin: 11px 0 0; color: #51485f; font-size: 14px; line-height: 1.68; }
.verdict-support p { margin: 0; }
.verdict-context { color: var(--primary); font-weight: 650; }
.verdict-context + p { margin-top: 3px; }

.section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 28px 0 8px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.section-nav a { min-height: 38px; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 7px; color: #55476a; font-size: 13px; text-decoration: none; }
.section-nav a:hover { background: var(--primary-soft); color: var(--primary); }
.section-heading { margin: 0; font-size: 23px; line-height: 1.4; letter-spacing: -.035em; font-weight: 730; }
.section-lead { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.total-section { margin-top: 35px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.total-section > p { margin: 10px 0 0; color: #373044; font-size: 16px; line-height: 1.8; }
.domains-section { margin-top: 35px; }
.domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 38px; row-gap: 0; margin-top: 8px; }
.domain-section { min-width: 0; padding: 22px 0 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 124px; }
.domain-section h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.45; letter-spacing: -.02em; font-weight: 720; }
.domain-section p { margin: 0; color: #373044; font-size: 16px; line-height: 1.78; }
.domain-section--wide { grid-column: 1 / -1; }
.flow-section { margin-top: 44px; }
.flow-list { margin-top: 14px; border-top: 1px solid var(--line); }
.flow-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.flow-period { margin: 0; padding-top: 1px; color: var(--primary); font-size: 14px; font-weight: 720; }
.flow-text { margin: 0; color: #373044; font-size: 15px; line-height: 1.75; }
.action-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.action-block { padding: 19px 20px 21px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.action-block h3 { margin: 0 0 10px; font-size: 16px; font-weight: 720; }
.action-block ul { margin: 0; padding-left: 19px; color: #373044; font-size: 14px; line-height: 1.8; }
.action-block li + li { margin-top: 5px; }
.action-block--avoid h3 { color: #754c1c; }
.related-area { margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--line); }
.related-area h2 { margin: 0 0 12px; font-size: 17px; font-weight: 720; }
.related-links { display: flex; flex-wrap: wrap; gap: 9px; }
.related-link { min-height: 44px; display: inline-flex; align-items: center; padding: 7px 13px; border: 1px solid #d9cce7; border-radius: 8px; color: var(--primary); font-size: 14px; font-weight: 650; text-decoration: none; }
.related-link:hover { background: #f4edf9; }
.link-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; }

.tarot-question { margin: 22px 0 14px; color: var(--muted); font-size: 14px; }
.tarot-lead { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); align-items: center; gap: 34px; padding: 22px 0 27px; border-bottom: 1px solid var(--line); }
.tarot-verdict { margin: 0; color: var(--ink); font-size: 28px; line-height: 1.48; letter-spacing: -.04em; font-weight: 730; word-break: keep-all; }
.tarot-verdict-support { margin: 9px 0 0; color: #51485f; font-size: 17px; line-height: 1.62; }
.tarot-verdict em { color: var(--primary); font-style: normal; }
.tarot-verdict-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.tarot-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.tarot-card { min-width: 0; }
.tarot-card img { width: 100%; aspect-ratio: 2 / 3; display: block; border: 1px solid #d9c99e; border-radius: 7px; background: #f4f0e8; object-fit: cover; }
.tarot-card img.tarot-card__image--reversed { transform: rotate(180deg); }
.tarot-card__position { margin: 9px 0 1px; color: var(--muted); font-size: 12px; font-weight: 650; }
.tarot-card__name { margin: 0; color: var(--ink); font-size: 15px; font-weight: 720; line-height: 1.4; }
.tarot-interpretation { margin-top: 28px; }
.tarot-intro { max-width: 70ch; margin: 8px 0 20px; color: #373044; font-size: 15px; line-height: 1.8; }
.reading-list { border-top: 1px solid var(--line); }
.reading-item { padding: 20px 0 21px; border-bottom: 1px solid var(--line); scroll-margin-top: 124px; }
.reading-item__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; margin-bottom: 7px; }
.reading-item__position { color: var(--primary); font-size: 12px; font-weight: 700; }
.reading-item__name { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 720; }
.reading-item__text { margin: 0; color: #373044; font-size: 15px; line-height: 1.8; }
.reading-more { margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reading-more summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--primary); font-size: 14px; font-weight: 680; list-style: none; }
.reading-more summary::-webkit-details-marker { display: none; }
.reading-more summary::after { content: "+"; font-size: 18px; }
.reading-more[open] summary::after { content: "−"; }
.reading-more__body { padding: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.card-reading { padding: 14px 0; border-top: 1px solid var(--line); }
.card-reading__position, .reading-more__body .reading-item__position { margin: 0 0 2px; color: var(--muted); font-size: 12px; }
.card-reading h3 { margin: 0 0 5px; color: var(--ink); font-size: 15px; }
.card-reading p:last-child { margin: 0; }
.page-disclaimer { max-width: 76ch; margin: 26px auto 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.bottom-nav { position: fixed; z-index: 6; right: 0; bottom: 0; left: 0; width: min(100%, 760px); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgb(255 255 255 / .98); box-shadow: 0 -6px 20px rgb(31 23 51 / .035); }
.bottom-nav a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 7px; color: #5b5369; font-size: 13px; font-weight: 560; text-decoration: none; white-space: nowrap; }
.bottom-nav a:hover { background: #f7f3fb; color: var(--primary); }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .review-toolbar__inner { min-height: 58px; justify-content: center; padding: 7px 12px; gap: 0; }
  .review-label, .review-note { display: none; }
  .sample-tabs { width: 100%; max-width: 420px; }
  .sample-tab { flex: 1; padding-inline: 8px; font-size: 12px; }
  .sample-tab span { display: none; }
  .site-header__inner { height: 58px; padding: 0 20px; }
  .brand { font-size: 20px; }
  .page-shell { width: auto; min-height: calc(100vh - 166px); padding: 28px 20px 104px; }
  .sample-title { font-size: 30px; }
  .zodiac-heading { grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; margin-bottom: 12px; }
  .zodiac-art { width: 104px; height: 104px; }
  .zodiac-art-placeholder { width: 82px; height: 82px; border-radius: 13px; }
  .verdict { padding: 20px 21px; }
  .verdict-text { font-size: 22px; }
  .verdict-support { font-size: 13px; line-height: 1.62; }
  .section-nav { gap: 3px; margin-top: 24px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { min-height: 36px; padding-inline: 9px; flex: 0 0 auto; font-size: 12px; }
  .section-heading { font-size: 21px; }
  .domain-grid { grid-template-columns: 1fr; column-gap: 0; }
  .total-section { margin-top: 29px; }
  .total-section > p { font-size: 15px; }
  .domains-section { margin-top: 29px; }
  .domain-section, .domain-section--wide { grid-column: auto; padding: 18px 0 19px; }
  .domain-section h3 { font-size: 17px; }
  .domain-section p { font-size: 15px; line-height: 1.78; }
  .flow-section { margin-top: 34px; }
  .flow-item { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 14px 0; }
  .flow-period { font-size: 13px; }
  .flow-text { font-size: 14px; }
  .action-sections { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .action-block { padding: 16px 16px 17px; }
  .action-block ul { font-size: 14px; }
  .related-area { margin-top: 32px; }
  .related-links { display: grid; grid-template-columns: 1fr; }
  .related-link { justify-content: space-between; }
  .tarot-lead { grid-template-columns: 1fr; gap: 22px; padding: 18px 0 22px; }
  .tarot-verdict { font-size: 24px; }
  .tarot-cards { width: min(100%, 304px); margin: 0 auto; gap: 10px; }
  .tarot-card img { height: 184px; aspect-ratio: auto; object-fit: cover; }
  .tarot-card__position { margin-top: 7px; font-size: 11px; }
  .tarot-card__name { font-size: 13px; }
  .tarot-interpretation { margin-top: 24px; }
  .tarot-intro, .reading-item__text { font-size: 14px; }
  .reading-item { padding: 17px 0 18px; }
  .reading-item__name { font-size: 17px; }
  .page-disclaimer { margin-top: 21px; font-size: 11px; }
  .bottom-nav { padding-inline: 5px; }
  .bottom-nav a { min-height: 47px; font-size: 12px; }
}

@media (max-width: 360px) {
  .page-shell { padding-inline: 16px; }
  .sample-tab { font-size: 11px; }
  .sample-tab span { display: block; margin: 0; }
  .zodiac-heading { grid-template-columns: minmax(0, 1fr) 72px; }
  .zodiac-art, .zodiac-art-placeholder { width: 66px; height: 66px; }
  .tarot-cards { gap: 7px; }
  .tarot-card__name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 2026-10-13 reader review: clear body type and shorter reading units. */
body { line-height: 1.8; }
.verdict-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.verdict-top .verdict-label { margin: 0; }
.grade-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border-radius: 999px; background: #fff4d9; color: #694312; font-size: 15px; font-weight: 780; }
.verdict-support, .tarot-verdict-support { color: var(--ink); font-size: 17px; line-height: 1.8; }
.verdict-support p + p { margin-top: 12px; }
.fortune-summary { display: flex; align-items: center; gap: 18px; margin-top: 19px; padding-top: 17px; border-top: 1px solid #d9cae8; }
.score-ring { flex: 0 0 86px; width: 86px; height: 86px; border: 6px solid #d6c7e7; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; }
.score-ring span { color: var(--primary); font-size: 13px; line-height: 1.2; font-weight: 700; }
.score-ring strong { color: var(--ink); font-size: 25px; line-height: 1.2; }
.lucky-preview { min-width: 0; }
.lucky-preview > span { display: block; margin-bottom: 7px; color: var(--primary); font-size: 14px; font-weight: 740; }
.lucky-preview > div { display: flex; flex-wrap: wrap; gap: 6px; }
.lucky-preview > div > span { padding: 4px 9px; border: 1px solid #d9c8e8; border-radius: 999px; background: white; color: var(--ink); font-size: 14px; }
.lucky-preview strong { margin-left: 3px; }
.domain-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.domain-section, .reading-item, .card-reading { padding: 23px 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 4px 18px rgb(31 23 51 / .035); }
.domain-section h3, .reading-item h3 { margin-bottom: 12px; color: var(--primary-deep); font-size: 21px; }
.reading-list { display: grid; gap: 14px; border: 0; margin-top: 16px; }
.reading-copy p, .domain-section p, .total-section p, .flow-item p, .card-reading p:not(.reading-item__position) { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.8; word-break: keep-all; }
.reading-copy p + p { margin-top: 15px; }
.domain-audience + .domain-audience { margin-top: 19px; padding-top: 17px; border-top: 1px solid #eee8f3; }
.domain-audience h4 { margin: 0 0 7px; color: var(--primary); font-size: 17px; font-weight: 750; }
.total-section { padding: 22px 24px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.total-section .reading-copy { margin-top: 10px; }
.flow-list { border: 0; }
.flow-item { border-bottom-color: var(--line); }
.flow-period, .action-block h3, .reading-more summary { font-size: 17px; }
.action-block ul, .reading-more__body { color: var(--ink); font-size: 17px; line-height: 1.8; }
.tarot-lead { grid-template-columns: 1fr; gap: 22px; padding: 23px 24px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.tarot-cards { width: min(100%, 470px); }
.tarot-card__name { font-size: 17px; }
.reading-more__body { display: grid; gap: 12px; padding-bottom: 16px; }
.card-reading { padding: 20px; }
@media (max-width: 640px) {
  .page-shell { width: min(100% - 32px, var(--page-width)); }
  .verdict { padding: 19px; }
  .fortune-summary { gap: 11px; }
  .score-ring { flex-basis: 76px; width: 76px; height: 76px; }
  .domain-section, .reading-item, .total-section { padding: 19px; }
  .tarot-lead { padding: 19px; }
  .reading-copy p, .domain-section p, .total-section p, .flow-item p, .card-reading p:not(.reading-item__position), .action-block ul { font-size: 17px; line-height: 1.8; }
  .tarot-card__name { font-size: 15px; }
}

.domain-icon { display: inline-block; min-width: 1.55em; font-size: .9em; line-height: 1; vertical-align: .04em; }
.review-toolbar__inner { max-width: 1220px; }
.sample-tabs { max-width: min(100%, 850px); overflow-x: auto; scrollbar-width: thin; }
.sample-tab { flex: 0 0 auto; }
.feature-verdict { margin-top: 20px; }
.feature-support { margin: 13px 0 0; color: var(--ink); font-size: 17px; line-height: 1.8; word-break: keep-all; }
.grade-badge--purple { background: #e4d4f2; color: var(--primary-deep); }
.feature-section { margin-top: 34px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pillar { display: grid; place-content: center; gap: 6px; min-height: 98px; border: 1px solid var(--line); border-radius: 13px; background: white; text-align: center; }
.pillar span { color: var(--muted); font-size: 14px; font-weight: 700; }
.pillar strong { color: var(--ink); font-size: 22px; }
.pillar--active { border: 2px solid var(--primary); background: var(--primary-soft); }
.pillar--active span, .pillar--active strong { color: var(--primary-deep); }
.feature-reading { margin-top: 18px; }
.feature-reading h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
.feature-next { margin-top: 32px; padding: 21px 24px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.feature-next h2 { margin: 0 0 12px; font-size: 19px; }
.feature-next > div { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-next span { padding: 6px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font-size: 15px; font-weight: 650; }
.score-note { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.55; }
.reflection-question { margin-top: 17px !important; padding: 14px 16px; border-radius: 10px; background: #f5f0fa; }
.reflection-question strong { display: block; margin-bottom: 3px; color: var(--primary); font-size: 15px; }
@media (max-width: 850px) {
  .review-label, .review-note { display: none; }
  .review-toolbar__inner { padding-inline: 12px; }
  .sample-tabs { width: 100%; }
}
@media (max-width: 640px) {
  .sample-tab { font-size: 13px; }
  .sample-tab span { display: none; }
  .pillar-grid { gap: 6px; }
  .pillar { min-height: 82px; }
  .pillar strong { font-size: 19px; }
}

.feature-support.reading-copy p { margin: 0; }
.feature-support.reading-copy p + p { margin-top: 10px; }
.feature-examples { margin: 16px 0 0; padding: 15px 18px 15px 34px; border-radius: 10px; background: #f7f3fa; color: var(--ink); font-size: 17px; line-height: 1.8; }
.feature-examples li + li { margin-top: 7px; }
.feature-reading { margin-top: 15px; }
.feature-muted { margin: 7px 0 15px; color: var(--ink); font-size: 17px; line-height: 1.8; }
.element-list { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.element-list > div { display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px; align-items: center; gap: 12px; font-size: 16px; }
.element-track { height: 11px; overflow: hidden; border-radius: 999px; background: #eee8f3; }
.element-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.sample--personal .flow-item { grid-template-columns: 60px minmax(0, 1fr); }
.sample--personal .flow-item .reading-copy > strong { display: block; margin-bottom: 5px; color: var(--primary-deep); font-size: 17px; line-height: 1.5; }
.domain-verdict { margin: 0 0 15px !important; padding: 13px 16px; border-radius: 10px; background: var(--primary-soft); color: var(--ink); font-size: 18px !important; line-height: 1.65 !important; font-weight: 680; }
.real-life { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.real-life h4, .topic-more h4 { margin: 0 0 9px; color: var(--primary-deep); font-size: 18px; }
.real-life > div { padding: 13px 0; border-bottom: 1px solid #eee8f3; }
.real-life > div strong { color: var(--primary); font-size: 17px; }
.real-life > div p { margin: 4px 0 0; color: var(--ink); font-size: 17px; line-height: 1.8; }
.topic-more { margin-top: 14px; border-top: 1px solid var(--line); }
.topic-more summary { color: var(--primary); font-size: 17px; font-weight: 700; }
.topic-more ol { margin: 7px 0 0; padding-left: 24px; color: var(--ink); font-size: 17px; line-height: 1.8; }
.topic-more li + li { margin-top: 6px; }

.astro-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.astro-heading > div { min-width: 0; }
.astro-symbol { flex: none; display: grid; place-items: center; width: 94px; height: 94px; border: 2px solid #d9c7e9; border-radius: 50%; background: #f6f0fb; color: var(--primary); font: 64px/1 Georgia, serif; }
.sample--astrology .grade-badge { max-width: 130px; white-space: nowrap; }
.dream-variation { position: relative; }
.dream-variation__number { display: inline-block; margin-bottom: 7px; color: var(--primary); font-size: 14px; font-weight: 780; letter-spacing: .08em; }
.dream-variation h3 { margin-bottom: 10px; }
.sample--dream .total-section { margin-top: 30px; }
@media (max-width: 640px) {
  .astro-symbol { width: 68px; height: 68px; font-size: 47px; }
  .astro-heading .sample-title { font-size: 28px; }
}

/* Distinct visual language for the astrology and dream previews. */
.sample--astrology .astro-heading, .sample--dream .dream-heading { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 176px; padding: 27px 30px; border-radius: 20px; }
.sample--astrology .astro-heading { background: #17142d; color: #fff; }
.sample--astrology .astro-heading::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8; background-image: radial-gradient(circle at 8% 22%, #ead5ff 0 1px, transparent 2px), radial-gradient(circle at 26% 74%, #ead5ff 0 1.5px, transparent 2.5px), radial-gradient(circle at 48% 17%, #ead5ff 0 1px, transparent 2px), radial-gradient(circle at 63% 63%, #ead5ff 0 1px, transparent 2px), radial-gradient(circle at 89% 26%, #ead5ff 0 1.5px, transparent 2.5px), radial-gradient(circle at 96% 81%, #ead5ff 0 1px, transparent 2px); }
.astro-heading > div:first-child, .dream-heading > div:first-child { position: relative; z-index: 1; min-width: 0; }
.astro-heading .sample-eyebrow { color: #e5d0ff; }
.astro-heading .sample-title { max-width: 14ch; margin: 8px 0 0; color: #fff; }
.astro-caption, .dream-caption { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.astro-caption { color: #e2d9f0; }
.astro-disc { position: relative; display: grid; flex: 0 0 142px; place-items: center; width: 142px; height: 142px; border: 1px solid #aa8dc8; border-radius: 50%; box-shadow: 0 0 0 12px rgb(185 143 218 / .1), inset 0 0 0 14px rgb(255 255 255 / .04); }
.astro-disc__orbit { position: absolute; inset: 20px; border: 1px dashed #bba2d1; border-radius: 50%; opacity: .8; }
.astro-disc__symbol { color: #f2dcac; font: 80px/1 Georgia, serif; }
.astro-disc__star { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f7dca9; box-shadow: 0 0 12px #f7dca9; }
.astro-disc__star--one { top: 9px; left: 33px; }.astro-disc__star--two { top: 36px; right: 2px; }.astro-disc__star--three { bottom: 4px; left: 34px; }
.sample--astrology .feature-verdict { border-top: 3px solid #a784c9; }
.sample--astrology .domain-section { border-left: 3px solid #bfa6d7; }
.sample--dream .dream-heading { background: #ece9f2; border: 1px solid #dcd4e7; }
.sample--dream .dream-heading::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 82% 32%, #faf8ff 0 2px, transparent 3px), radial-gradient(circle at 93% 78%, #faf8ff 0 2px, transparent 3px), radial-gradient(circle at 57% 75%, #faf8ff 0 1px, transparent 2px); }
.dream-heading .sample-eyebrow { color: #654788; }
.dream-heading .sample-title { max-width: 15ch; margin: 8px 0 0; color: #30244b; }
.dream-caption { color: #5b4b70; }
.dream-moon { position: relative; flex: 0 0 142px; height: 142px; }
.dream-moon__disc { position: absolute; top: 11px; left: 20px; width: 108px; height: 108px; border-radius: 50%; background: #ead8ac; box-shadow: 0 0 0 11px rgb(255 255 255 / .47), 0 0 35px #e7dcbf; }
.dream-moon__disc::after { content: ""; position: absolute; top: -9px; left: 36px; width: 102px; height: 102px; border-radius: 50%; background: #ece9f2; }
.dream-moon__star { position: absolute; color: #76549b; font-size: 20px; }.dream-moon__star--one { top: 8px; right: 9px; }.dream-moon__star--two { bottom: 8px; left: 7px; }
.sample--dream .feature-verdict { border-top: 3px solid #a28bb8; }
.dream-flow-label { display: flex; justify-content: space-between; max-width: 760px; margin: 7px 0 17px; color: #654788; font-size: 15px; font-weight: 700; }
.dream-flow-label span { letter-spacing: .22em; }
.sample--dream .domain-grid { position: relative; padding-left: 19px; }
.sample--dream .domain-grid::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 5px; border-left: 2px dotted #b49fc9; }
.sample--dream .dream-variation::before { content: ""; position: absolute; top: 27px; left: -21px; width: 10px; height: 10px; border: 2px solid #a68dc1; border-radius: 50%; background: #fff; }
.dream-variation__number { color: #654788; }
.dream-variation__number span { margin-right: 5px; font-size: 20px; }
@media (max-width: 640px) {
  .sample--astrology .astro-heading, .sample--dream .dream-heading { min-height: 162px; padding: 22px 20px; }
  .astro-heading .sample-title, .dream-heading .sample-title { font-size: 26px; line-height: 1.24; }
  .astro-disc { flex-basis: 88px; width: 88px; height: 88px; box-shadow: 0 0 0 6px rgb(185 143 218 / .1); }
  .astro-disc__orbit { inset: 12px; }.astro-disc__symbol { font-size: 54px; }
  .astro-disc__star--one { top: 4px; left: 19px; }.astro-disc__star--two { top: 20px; right: 0; }.astro-disc__star--three { bottom: 2px; left: 20px; }
  .dream-moon { flex-basis: 88px; height: 88px; }
  .dream-moon__disc { top: 9px; left: 7px; width: 68px; height: 68px; box-shadow: 0 0 0 7px rgb(255 255 255 / .47), 0 0 25px #e7dcbf; }
  .dream-moon__disc::after { top: -6px; left: 23px; width: 65px; height: 65px; }
  .dream-moon__star { font-size: 15px; }.dream-moon__star--one { right: 0; }.dream-moon__star--two { bottom: 0; }
  .astro-caption, .dream-caption { font-size: 13px; }
}

/* Four-pillar seal and monthly almanac for the first two personal previews. */
.saju-heading, .personal-heading { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 176px; padding: 27px 30px; border-radius: 20px; }
.saju-heading > div:first-child, .personal-heading > div:first-child { position: relative; z-index: 1; min-width: 0; }
.saju-heading { border: 1px solid #dccfba; background: #f3ecdf; }
.saju-heading::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background: repeating-linear-gradient(90deg, transparent 0 42px, #d7c8b2 43px 44px, transparent 45px 86px); mask-image: linear-gradient(90deg, transparent, #000); }
.saju-heading .sample-eyebrow { color: #695a49; }
.saju-heading .sample-title { max-width: 16ch; margin: 8px 0 0; color: #392e32; }
.saju-caption, .personal-caption { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.saju-caption { color: #675448; }
.saju-seal { display: flex; flex: 0 0 118px; flex-direction: column; align-items: center; justify-content: center; width: 118px; height: 118px; border: 5px double #8f4c4e; background: #f7f1e8; color: #773f45; transform: rotate(-5deg); box-shadow: 7px 8px 0 rgb(108 73 67 / .11); }
.saju-seal span { font-size: 13px; font-weight: 740; }.saju-seal strong { font-size: 39px; line-height: 1.2; letter-spacing: -.08em; }
.sample--saju .feature-verdict { border-top: 3px solid #a56b6d; }
.sample--saju .pillar { border-color: #d8c5bb; background: #fbf7f1; }
.sample--saju .pillar--active { border-color: #a56b6d; background: #f6e8e2; }
.personal-heading { border: 1px solid #d9cbe7; background: #eee9f5; }
.personal-heading::before { content: ""; position: absolute; inset: auto 0 0; height: 34px; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 45px, rgb(126 92 166 / .12) 46px 47px, transparent 48px 90px); }
.personal-heading .sample-eyebrow { color: #5f4783; }
.personal-heading .sample-title { max-width: 16ch; margin: 8px 0 0; color: #2e2544; }
.personal-caption { color: #58476b; }
.month-card { position: relative; display: flex; flex: 0 0 111px; flex-direction: column; align-items: center; justify-content: center; width: 111px; height: 126px; padding-top: 11px; border: 1px solid #ad96c8; border-radius: 9px; background: #fff; color: #593781; box-shadow: 6px 7px 0 rgb(100 72 139 / .13); }
.month-card::before { content: ""; position: absolute; top: -8px; left: 14px; right: 14px; height: 15px; background: repeating-linear-gradient(90deg, #8262a7 0 6px, transparent 7px 27px); }
.month-card span { font-size: 13px; font-weight: 730; }.month-card strong { font-size: 60px; line-height: 1; letter-spacing: -.08em; }.month-card em { font-size: 12px; font-style: normal; font-weight: 760; letter-spacing: .14em; }
.sample--personal .feature-verdict { border-top: 3px solid #a88bc8; }
.sample--personal .flow-list { position: relative; padding-left: 16px; }
.sample--personal .flow-list::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 3px; border-left: 2px dotted #b89fcf; }
@media (max-width: 640px) {
  .saju-heading, .personal-heading { min-height: 162px; padding: 22px 20px; }
  .saju-heading .sample-title, .personal-heading .sample-title { font-size: 26px; line-height: 1.24; }
  .saju-caption, .personal-caption { font-size: 13px; }
  .saju-seal { flex-basis: 78px; width: 78px; height: 78px; border-width: 3px; }.saju-seal span { font-size: 10px; }.saju-seal strong { font-size: 27px; }
  .month-card { flex-basis: 76px; width: 76px; height: 88px; padding-top: 6px; }.month-card span { font-size: 10px; }.month-card strong { font-size: 43px; }.month-card em { font-size: 9px; }
}

/* Tarot reading table: the real cards stay central and the ornament stays behind the text. */
.tarot-heading { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 152px; padding: 24px 30px; border: 1px solid #645476; border-radius: 20px; background: #241c33; color: #fff; }
.tarot-heading::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 17% 22%, #a99270 0 1px, transparent 2px), radial-gradient(circle at 53% 80%, #a99270 0 1px, transparent 2px), radial-gradient(circle at 87% 18%, #a99270 0 1px, transparent 2px), radial-gradient(circle at 95% 78%, #a99270 0 1px, transparent 2px); }
.tarot-heading > div:first-child { position: relative; z-index: 1; min-width: 0; }
.tarot-heading .sample-eyebrow { color: #e9d5a8; }
.tarot-heading .sample-title { margin: 8px 0 0; color: #fff; }
.tarot-caption { margin: 12px 0 0; color: #e3dbea; font-size: 15px; line-height: 1.5; }
.tarot-emblem { position: relative; display: grid; flex: 0 0 112px; place-items: center; width: 112px; height: 112px; border: 1px solid #bd9f6d; border-radius: 50%; color: #e5c687; box-shadow: 0 0 0 9px rgb(229 198 135 / .08); }
.tarot-emblem::before, .tarot-emblem::after { content: ""; position: absolute; inset: 12px; border: 1px solid #9e8465; transform: rotate(45deg); }
.tarot-emblem::after { transform: rotate(0); }
.tarot-emblem span { position: absolute; top: 14px; font-size: 20px; line-height: 1; }
.tarot-emblem i { position: absolute; top: 39px; width: 30px; border-top: 1px solid #bd9f6d; }
.tarot-emblem b { margin-top: 35px; font: 25px/1 Georgia, serif; }
.sample--tarot .tarot-lead { border-top: 3px solid #c4a36b; }
.sample--tarot .tarot-cards { position: relative; padding-top: 13px; }
.sample--tarot .tarot-cards::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; border-top: 1px solid #c8b58e; }
.sample--tarot .tarot-card { text-align: center; }
.tarot-card__frame { padding: 5px; border: 1px solid #c7ae7a; border-radius: 9px; background: #f7f1e6; box-shadow: 0 5px 13px rgb(47 31 56 / .12); }
.sample--tarot .tarot-card img { border-color: #8e774b; }
.sample--tarot .tarot-card__position { margin-top: 10px; color: #654672; font-weight: 760; }
.tarot-card__position span { margin-right: 3px; color: #86683b; font: 17px/1 Georgia, serif; }
.sample--tarot .reading-item { border-left: 3px solid #c9ae76; }
@media (max-width: 640px) {
  .tarot-heading { min-height: 126px; padding: 19px 20px; }
  .tarot-heading .sample-title { font-size: 27px; }
  .tarot-caption { font-size: 13px; }
  .tarot-emblem { flex-basis: 72px; width: 72px; height: 72px; box-shadow: 0 0 0 5px rgb(229 198 135 / .08); }
  .tarot-emblem::before, .tarot-emblem::after { inset: 8px; }
  .tarot-emblem span { top: 7px; font-size: 13px; }.tarot-emblem i { top: 27px; width: 18px; }.tarot-emblem b { margin-top: 25px; font-size: 18px; }
  .tarot-card__frame { padding: 3px; }
  .sample--tarot .tarot-card__position { font-size: 11px; }
  .tarot-card__position span { font-size: 13px; }
}

/* Relationship and question previews retain the same reading scale with their own cues. */
.compat-heading, .concern-heading { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 172px; padding: 25px 29px; border-radius: 20px; }
.compat-heading > div:first-child, .concern-heading > div:first-child { position: relative; z-index: 1; min-width: 0; }
.compat-heading { border: 1px solid #dbc7d4; background: #f1e8ef; }
.compat-heading::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background: radial-gradient(circle at 79% 50%, transparent 0 70px, #c8a4bd 71px 72px, transparent 73px 95px, #c8a4bd 96px 97px, transparent 98px); }
.compat-heading .sample-eyebrow { color: #70465e; }.compat-heading .sample-title { max-width: 17ch; margin: 8px 0 0; color: #39283a; }
.compat-caption, .concern-caption { margin: 11px 0 0; font-size: 15px; line-height: 1.5; }.compat-caption { color: #674f61; }
.compat-mark { position: relative; display: flex; flex: 0 0 122px; justify-content: space-between; align-items: center; width: 122px; height: 95px; }
.compat-mark span { position: relative; z-index: 1; display: grid; place-items: center; width: 65px; height: 65px; border: 2px solid #996d88; border-radius: 50%; background: #fcf8fb; color: #603f58; font-size: 15px; font-weight: 800; box-shadow: 0 5px 13px rgb(82 43 68 / .1); }
.compat-mark span:last-child { margin-left: -18px; border-color: #b38ca6; background: #e1ccd9; }
.compat-mark i { position: absolute; top: 49%; left: 22px; right: 22px; border-top: 2px dotted #895b78; }
.sample--compatibility .feature-verdict { border-top: 3px solid #a87d99; }
.compat-scene { margin-top: 16px; padding: 22px; border: 1px solid #dfd2dc; border-radius: 15px; background: white; }
.compat-trigger { margin: 0 0 16px; color: #35263d; font-size: 18px; font-weight: 740; line-height: 1.65; }
.compat-perspectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.compat-perspectives section { padding: 17px 19px; border-radius: 12px; background: #f8f3f7; }.compat-perspectives section:last-child { background: #f2edf7; }
.compat-perspectives h3 { margin: 0 0 7px; color: #69485f; font-size: 17px; }.compat-perspectives p { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.8; }
.compat-question { margin: 15px 0 0 !important; padding-top: 13px; border-top: 1px solid #e7dce6; color: #69485f !important; font-weight: 710; }
.compat-steps { margin: 15px 0 0; padding-left: 24px; color: var(--ink); font-size: 17px; line-height: 1.8; }.compat-steps li + li { margin-top: 9px; }
.compat-prompt { margin: 18px 0 0 !important; padding: 16px 19px; border-left: 3px solid #a87d99; border-radius: 8px; background: #f7f0f5; font-weight: 700; }
.concern-heading { border: 1px solid #d6c9e4; background: #f1ecf7; }.concern-heading .sample-eyebrow { color: #634a80; }
.concern-heading .sample-title { margin: 8px 0 0; color: #302440; }.concern-caption { color: #665677; }
.concern-heading::before { content: ""; position: absolute; right: -10px; bottom: -37px; width: 210px; height: 140px; border: 1px solid #c8b5dc; border-radius: 50%; transform: rotate(-25deg); }
.concern-mark { display: grid; flex: 0 0 104px; place-items: center; width: 104px; height: 104px; border: 2px solid #9372b5; border-radius: 50%; background: #fbf9fd; color: #654188; box-shadow: 0 0 0 9px rgb(167 136 198 / .16); }
.concern-mark span { margin-bottom: -20px; font-size: 60px; font-weight: 350; line-height: 1; }.concern-mark i { font-size: 11px; font-style: normal; font-weight: 760; }
.sample--concern .feature-verdict { border-top: 3px solid #a88bc8; }.sample--concern .grade-badge { background: #e6d9f2; color: #573376; }
.sample--concern .concern-scene { border-left: 3px solid #b8a2d0; }.sample--concern .concern-choice { border-left: 3px solid #9877ba; }
@media (max-width: 640px) {
  .compat-heading, .concern-heading { min-height: 160px; padding: 21px 20px; }
  .compat-heading .sample-title, .concern-heading .sample-title { font-size: 25px; line-height: 1.25; }
  .compat-caption, .concern-caption { font-size: 13px; }
  .compat-mark { flex-basis: 76px; width: 76px; height: 72px; }.compat-mark span { width: 47px; height: 47px; font-size: 12px; }.compat-mark span:last-child { margin-left: -16px; }
  .concern-mark { flex-basis: 68px; width: 68px; height: 68px; box-shadow: 0 0 0 5px rgb(167 136 198 / .16); }.concern-mark span { margin-bottom: -12px; font-size: 40px; }.concern-mark i { font-size: 8px; }
  .compat-perspectives { grid-template-columns: 1fr; }
  .compat-scene { padding: 19px; }
}

/* A useful date grid and a character-led name reading, within the shared purple palette. */
.calendar-heading, .name-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 166px; padding: 25px 29px; border-radius: 20px; }
.calendar-heading > div:first-child, .name-heading > div:first-child { min-width: 0; }
.calendar-heading { border: 1px solid #d9cbe6; background: #f0eaf6; }.calendar-heading .sample-eyebrow { color: #62477b; }.calendar-heading .sample-title { max-width: 17ch; margin: 8px 0 0; color: #302440; }
.calendar-caption, .name-caption { margin: 11px 0 0; color: #625471; font-size: 15px; line-height: 1.5; }
.calendar-mark { display: flex; flex: 0 0 107px; flex-direction: column; align-items: center; justify-content: center; width: 107px; height: 109px; border: 2px solid #9b77b8; border-radius: 12px; background: white; color: #654283; box-shadow: 6px 7px 0 rgb(101 66 131 / .12); }.calendar-mark span { font-size: 52px; font-weight: 800; line-height: 1; }.calendar-mark strong { font-size: 17px; line-height: 1.2; }
.sample--calendar .feature-verdict { border-top: 3px solid #ac8bca; }
.calendar-date-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }.calendar-date-facts span { padding: 7px 11px; border-radius: 9px; background: white; color: #5f4d70; font-size: 15px; }.calendar-date-facts strong { color: var(--ink); }
.calendar-sheet { margin-top: 17px; padding: 16px; border: 1px solid #dfd6e9; border-radius: 15px; background: white; }.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }.calendar-weekdays { margin-bottom: 8px; text-align: center; color: #604d72; font-size: 14px; font-weight: 760; }
.calendar-day { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 74px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: #faf8fc; text-align: left; cursor: pointer; }.calendar-day strong { color: var(--ink); font-size: 17px; }.calendar-day small { max-width: 100%; overflow: hidden; color: #6c5b79; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.calendar-day--holiday strong, .calendar-day--holiday small { color: #a3334d; }.calendar-day--selected { border-color: #744596; background: #eee2f7; box-shadow: inset 0 0 0 1px #744596; }.calendar-day--selected strong { color: #4e286f; }.calendar-day:hover { border-color: #b89dd0; }
.calendar-events { display: grid; gap: 9px; margin-top: 16px; }.calendar-events > div { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid #e4dcea; border-radius: 11px; background: white; }.calendar-events time { color: #694787; font-weight: 800; }.calendar-events strong { color: var(--ink); font-size: 16px; }.calendar-events span { color: #6e607b; font-size: 14px; }
.calendar-month-snapshot { margin-top: 25px; }.calendar-month-snapshot h2 { margin: 0 0 11px; color: var(--ink); font-size: 21px; }.calendar-month-snapshot > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.calendar-month-snapshot span { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 13px 15px; border: 1px solid #e2d6eb; border-radius: 11px; background: white; }.calendar-month-snapshot strong { color: #543374; font-size: 16px; }.calendar-month-snapshot small { color: #635470; font-size: 13px; line-height: 1.45; }
.calendar-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 8px; }.calendar-controls button, .calendar-step-actions button { min-height: 38px; padding: 7px 12px; border: 1px solid #d7c8e4; border-radius: 9px; background: white; color: #50316d; font-size: 15px; font-weight: 710; cursor: pointer; }.calendar-controls button[aria-pressed="true"] { border-color: #765098; background: #e9def2; }.calendar-step-actions button:disabled { opacity: .45; cursor: default; }.calendar-legend { margin: 0 0 6px; color: #5f526b; font-size: 14px; line-height: 1.6; }
.calendar-day { position: relative; }.calendar-son-mark { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #e9dcf4; color: #573279; font-size: 11px; font-style: normal; font-weight: 800; }
.calendar-date-list { display: grid; gap: 7px; margin-top: 13px; }.calendar-date-list button { display: grid; grid-template-columns: 120px 1fr 1fr; align-items: center; gap: 10px; min-height: 50px; padding: 10px 14px; border: 1px solid #e3d9ec; border-radius: 10px; background: white; text-align: left; cursor: pointer; }.calendar-date-list button[aria-pressed="true"] { border-color: #8d64ac; background: #f2ebf8; }.calendar-date-list strong, .calendar-date-list span, .calendar-date-list em { color: var(--ink); font-size: 15px; font-style: normal; }.calendar-date-list em { color: #765391; font-weight: 700; }
.calendar-detail { margin-top: 36px; }.calendar-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }.calendar-detail-grid > div { display: flex; flex-direction: column; gap: 5px; padding: 17px 19px; border: 1px solid #e1d7e9; border-radius: 12px; background: white; }.calendar-detail-grid span { color: #6a4c83; font-size: 15px; font-weight: 720; }.calendar-detail-grid strong { color: var(--ink); font-size: 17px; line-height: 1.6; }.calendar-detail-grid small { color: #635770; font-size: 14px; }.calendar-boundary { margin: 15px 0 0; padding: 15px 18px; border-left: 3px solid #a788c2; border-radius: 8px; background: #f4eff8; color: var(--ink); font-size: 16px; line-height: 1.7; }.calendar-step-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.name-heading { border: 1px solid #d6c9e5; background: #eee8f5; }.name-heading .sample-eyebrow { color: #61457d; }.name-heading .sample-title { max-width: 16ch; margin: 8px 0 0; color: #342645; }
.name-mark { display: grid; flex: 0 0 116px; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 116px; padding: 8px; border: 4px double #8f66ae; background: #fbf9fd; transform: rotate(4deg); }.name-mark span { display: grid; place-items: center; height: 75px; color: #553375; font-size: 37px; font-weight: 750; }
.sample--name .feature-verdict { border-top: 3px solid #9979ba; }.name-character { position: relative; padding-right: 94px; }.name-character__glyph { position: absolute; top: 16px; right: 20px; color: #e3d4f0; font-size: 69px; font-weight: 780; line-height: 1; }.name-character__note { margin-top: 16px !important; padding-top: 13px; border-top: 1px solid #eee7f3; color: #594b66 !important; font-size: 15px !important; }
.sample--name .name-heading .sample-title { max-width: none; }
.name-subheading { margin: 25px 0 10px; color: #4f2a70; font-size: 18px; }.name-checks { display: grid; gap: 9px; padding: 0; list-style: none; }.name-checks li { padding: 12px 14px; border-radius: 9px; background: #f7f2fa; }.name-checks strong { display: block; color: var(--ink); font-size: 16px; }.name-checks span { display: block; margin-top: 3px; color: #5b4c67; font-size: 14px; }
.name-alternatives { display: grid; gap: 10px; margin-top: 16px; }.name-alternatives > div { padding: 12px 14px; border-radius: 9px; background: #f7f3fa; }.name-alternatives strong { color: #4c2a6c; font-size: 17px; }.name-alternatives p { margin-top: 4px !important; }
@media (min-width: 900px) { .review-toolbar__inner { max-width: 1400px; }.sample-tabs { max-width: calc(100vw - 280px); }.sample-tab span { display: none; } }
@media (max-width: 640px) {
  .calendar-heading, .name-heading { min-height: 156px; padding: 21px 20px; }.calendar-heading .sample-title, .name-heading .sample-title { font-size: 25px; line-height: 1.25; }.calendar-caption, .name-caption { font-size: 13px; }
  .calendar-mark { flex-basis: 72px; width: 72px; height: 77px; }.calendar-mark span { font-size: 37px; }.calendar-mark strong { font-size: 12px; }
  .calendar-sheet { padding: 7px; }.calendar-weekdays, .calendar-days { gap: 2px; }.calendar-day { min-height: 61px; padding: 5px 3px; }.calendar-day strong { font-size: 16px; }.calendar-day small { font-size: 11px; }.calendar-events > div { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 5px; padding: 11px 9px; }.calendar-events strong { font-size: 16px; }.calendar-events span { font-size: 13px; }
  .calendar-month-snapshot span { padding: 10px 8px; }.calendar-month-snapshot strong { font-size: 14px; }.calendar-month-snapshot small { font-size: 11px; }.calendar-controls button { font-size: 14px; padding-inline: 9px; }.calendar-son-mark { top: 5px; right: 3px; width: 16px; height: 16px; font-size: 10px; }
  .calendar-date-list button { grid-template-columns: 93px 1fr; gap: 4px 8px; }.calendar-date-list em { grid-column: 2; }.calendar-date-list strong, .calendar-date-list span, .calendar-date-list em { font-size: 14px; }
  .calendar-detail-grid { grid-template-columns: 1fr; }.calendar-detail-grid > div { padding: 14px 16px; }
  .name-mark { flex-basis: 72px; width: 72px; padding: 4px; }.name-mark span { height: 50px; font-size: 26px; }.name-character { padding-right: 19px; }.name-character__glyph { top: 15px; right: 16px; font-size: 49px; opacity: .42; }
}

/* F03 manuscript and F08 year reading. */
.tojeong-heading, .year-animal-heading { display: flex; align-items: center; justify-content: space-between; gap: 17px; min-height: 170px; padding: 26px 30px; border: 1px solid #d8c7e5; border-radius: 20px; background: #f0e9f6; }
.tojeong-heading .sample-title, .year-animal-heading .sample-title { margin: 8px 0 0; color: #30213f; }
.tojeong-caption, .year-animal-caption { margin: 10px 0 0; color: #584866; font-size: 15px; }
.tojeong-seal { display: flex; flex: 0 0 108px; flex-direction: column; align-items: center; justify-content: center; width: 108px; height: 108px; border: 4px double #825698; border-radius: 4px; background: #fffdfc; color: #603977; transform: rotate(4deg); box-shadow: 7px 8px 0 #dbcbe8; }
.tojeong-seal b { font-size: 39px; line-height: 1.1; }.tojeong-seal span { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.sample--tojeong .feature-verdict, .sample--year-animal .feature-verdict { border-top: 3px solid #9872b5; }
.tojeong-first, .year-animal-lead { margin: 12px 0 0; color: var(--ink); font-size: 17px; line-height: 1.8; }
.tojeong-source-note { margin: 13px 0 0; color: #5e5070; font-size: 14px; line-height: 1.65; }
.section-lead { margin: 0 0 14px; color: var(--ink); font-size: 17px; line-height: 1.8; }
.tojeong-paper { padding: 20px; border: 1px solid #d9cae2; border-radius: 13px; background: #fffdfb; box-shadow: inset 0 0 0 5px #faf5f9; }
.classic-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #e7dce8; border-radius: 8px; background: #e7dce8; }
.classic-lines span { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding: 12px; background: #fffdfc; color: #382540; font-size: 17px; font-weight: 670; }
.classic-lines small { color: #ad99b6; font-size: 10px; }.tojeong-paper details, .tojeong-month-card details { margin-top: 16px; color: var(--ink); font-size: 16px; line-height: 1.8; }.tojeong-paper summary, .tojeong-month-card summary { color: #563373; font-weight: 750; cursor: pointer; }
.tojeong-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-bottom: 15px; }.tojeong-months button { min-height: 42px; border: 1px solid #d8c6e5; border-radius: 9px; background: #fff; color: #553575; font-size: 15px; font-weight: 750; cursor: pointer; }.tojeong-months button[aria-pressed="true"] { border-color: #7e54a0; background: #e9dff2; }
.tojeong-month-card { padding: 21px; }.tojeong-month-headline { margin: 7px 0 14px !important; color: var(--ink) !important; font-size: 17px !important; line-height: 1.8 !important; }.tojeong-month-card .classic-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tojeong-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.tojeong-facts > div { display: flex; flex-direction: column; gap: 5px; padding: 15px 18px; border: 1px solid #e5daea; border-radius: 10px; background: white; }.tojeong-facts span { color: #695378; font-size: 14px; }.tojeong-facts strong { color: var(--ink); font-size: 17px; }
.sample--tojeong .domain-grid { grid-template-columns: 1fr; }.sample--tojeong .feature-verdict .verdict-text { max-width: 31ch; }.tojeong-theme h3 { margin: 0 0 9px; color: #48305d; font-size: 19px; }.tojeong-theme p, .tojeong-month-card p { color: var(--ink); font-size: 17px; line-height: 1.8; }.tojeong-anchor { margin: 15px 0 0 !important; padding-top: 11px; border-top: 1px solid #ebe3ef; color: #6b5580 !important; font-size: 14px !important; }.tojeong-month-card h3 { margin: 5px 0 10px; color: #412955; font-size: 20px; }.tojeong-month-card details .classic-lines { margin: 13px 0; }.tojeong-original { margin: 28px 0; padding: 17px 20px; border: 1px solid #dfd3e7; border-radius: 12px; background: #fbf8fd; color: var(--ink); font-size: 16px; line-height: 1.7; }.tojeong-original summary { color: #55336f; font-weight: 750; cursor: pointer; }.tojeong-original > p { margin: 12px 0; }
.sample--tojeong .tojeong-reading-p { margin: 0 0 10px; }.sample--tojeong .tojeong-reading-p:last-of-type { margin-bottom: 0; }
.year-animal-heading { background: radial-gradient(circle at 85% 30%, #e0d0ec, transparent 40%), #f0e9f7; }.year-animal-emblem { display: flex; flex: 0 0 105px; flex-direction: column; align-items: center; justify-content: center; width: 105px; height: 105px; border: 2px solid #9c76b8; border-radius: 50%; background: #fbf9fd; color: #5e3b7b; box-shadow: 0 0 0 8px rgb(147 103 181 / .14); }.year-animal-emblem span { font-size: 47px; font-weight: 750; line-height: 1; }.year-animal-emblem small { font-size: 13px; font-weight: 800; }
.year-animal-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }.year-animal-chips span { padding: 7px 11px; border-radius: 999px; background: #f2eaf7; color: #553774; font-size: 14px; font-weight: 720; }
.year-basis-list { display: grid; gap: 9px; }.year-basis-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 16px 19px; border: 1px solid #e0d4e9; border-radius: 11px; background: white; }.year-basis-list span { color: #5f4b70; font-size: 16px; }.year-basis-list strong { color: var(--ink); font-size: 17px; }
.year-target-card { display: flex; align-items: center; gap: 20px; }.year-target-glyph { flex: 0 0 95px; color: #895fa6; font-size: 47px; font-weight: 750; line-height: 1.1; text-align: center; }.year-target-card h3 { margin: 0 0 7px; color: #422e55; font-size: 20px; }.year-target-card p { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.8; }
#year-samjae .domain-section { padding: 23px 24px; background: #fff; }
.year-samjae-verdict { display: inline-flex; margin: 0 0 13px !important; padding: 5px 12px; border-radius: 999px; background: #efe6f7; color: #4d3066 !important; font-size: 17px !important; font-weight: 780; }
#year-samjae .domain-section > p:not(.year-samjae-verdict, .calendar-boundary) { margin: 0; font-size: 17px; line-height: 1.65; }
.year-samjae-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 21px; }
.year-samjae-track span { position: relative; display: flex; min-height: 89px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px 6px 12px; border: 1px solid #e6dceb; border-radius: 12px; background: #faf8fc; color: #685476; font-size: 14px; line-height: 1.25; text-align: center; }
.year-samjae-track b { color: #392548; font-size: 21px; line-height: 1.2; }
.year-samjae-track .is-current { border: 2px solid #77509a; background: #eee3f6; color: #4d3066; font-weight: 750; box-shadow: 0 5px 14px rgb(91 42 134 / .1); }
.year-samjae-track .is-current::before { content: "올해"; position: absolute; top: 5px; right: 7px; color: #674182; font-size: 11px; font-weight: 800; }
#year-samjae .calendar-boundary { margin-top: 20px; padding: 15px 0 0; border: 0; border-top: 1px solid #e7ddeb; border-radius: 0; background: transparent; color: #63556f; font-size: 15px; line-height: 1.65; }
@media (max-width: 640px) { #year-samjae .domain-section { padding: 19px 18px; }.year-samjae-track { gap: 7px; }.year-samjae-track span { min-height: 82px; padding-inline: 3px; }.year-samjae-track b { font-size: 19px; } }
@media (max-width: 640px) { .tojeong-heading, .year-animal-heading { min-height: 155px; padding: 21px 20px; }.tojeong-heading .sample-title, .year-animal-heading .sample-title { font-size: 25px; }.tojeong-caption, .year-animal-caption { font-size: 13px; }.tojeong-seal, .year-animal-emblem { flex-basis: 74px; width: 74px; height: 74px; }.tojeong-seal b { font-size: 28px; }.tojeong-seal span { font-size: 8px; }.year-animal-emblem span { font-size: 33px; }.classic-lines, .tojeong-month-card .classic-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }.classic-lines span { padding: 9px; font-size: 15px; }.tojeong-months { grid-template-columns: repeat(4, 1fr); }.tojeong-facts { grid-template-columns: 1fr; }.year-basis-list > div { flex-direction: column; gap: 4px; padding: 13px 16px; }.year-target-card { align-items: flex-start; gap: 10px; }.year-target-glyph { flex-basis: 58px; font-size: 31px; } }
@media (max-width: 640px) { .year-animal-heading { gap: 7px; }.year-animal-heading .sample-title { font-size: 23px; letter-spacing: -.055em; }.year-animal-emblem { flex-basis: 58px; width: 58px; height: 58px; box-shadow: 0 0 0 4px rgb(147 103 181 / .14); }.year-animal-emblem span { font-size: 27px; }.year-animal-emblem small { font-size: 10px; } }

}
main:has(.sample) .sample { --bg:#fcfbfe; --surface:#fff; --ink:#1f1733; --muted:#6b6480; --primary:#5b2a86; --primary-deep:#3b1a5c; --primary-soft:#f0e9f8; --line:#e3dcee; --gold:#9a6b17; --good:#1f7a4d; --warn:#a92c35; font-family:Pretendard,"Malgun Gothic",sans-serif; word-break:normal; overflow-wrap:normal; }
main:has(.sample) .sample { width:100%; max-width:760px; margin-inline:auto; }
main:has(.sample) .sample { line-height:1.75; }
main[data-feature-id="F04"] #p4-result .sample--zodiac .verdict { padding:22px; }
main[data-feature-id="F04"] #p4-result .sample--zodiac .domain-audience h4 { margin:0 0 7px; }
main[data-feature-id="F05"] .sample--astrology { line-height:1.8; }
main[data-feature-id="F05"] #p4-result .sample--astrology .feature-verdict { margin:20px 0 0; }
main[data-feature-id="F05"] .sample--astrology .action-block h3 { line-height:1.8; }
main[data-feature-id="F05"] .sample--astrology .action-block li { margin:0; }
main[data-feature-id="F05"] .sample--astrology .action-block li + li { margin-top:5px; }
main[data-feature-id="F05"] #p4-result .sample--astrology .domain-audience h4 { margin:0 0 7px; }
main[data-feature-id="F08"] .form-layout:has(.sample--year-animal) { max-width:760px; }
main[data-feature-id="F10"] .form-layout:has(.sample--tarot) { max-width:760px; }
main[data-feature-id="F11"] .form-layout:has(.sample--dream) { max-width:760px; }
main[data-feature-id="F12"] .form-layout:has(.sample--name) { max-width:760px; }
main[data-feature-id="F12"] .sample--name .name-checks li { margin:0; }
main[data-feature-id="F12"] .sample--name .name-subheading { line-height:1.8; }
main[data-feature-id="F09"] .sample--calendar { line-height:1.8; }
main[data-feature-id="F09"] .sample--calendar .calendar-month-snapshot h2 { line-height:1.8; }
main[data-feature-id="F03"] .sample--tojeong { line-height:1.8; }
main[data-feature-id="F03"] .sample--tojeong .feature-verdict { margin-bottom:0; }
main[data-feature-id="F03"] .sample--tojeong .tojeong-month-card { margin:0; }
main[data-feature-id="F03"] .sample--tojeong .tojeong-months button { min-height:42px; padding:0 8px; line-height:1.8; }
main[data-feature-id="F06"] .sample--compatibility .compat-scene { line-height:1.8; }
main[data-feature-id="F06"] .sample--compatibility .compat-perspectives h3 { line-height:1.8; }
main[data-feature-id="F06"] .compatibility-editorial-status { max-width:760px; margin:18px auto 0; padding:10px 14px; border-left:3px solid #9c78b8; border-radius:7px; background:#f4eff8; color:#5d4971; font-size:14px; line-height:1.65; }
main[data-feature-id="F08"] .sample--year-animal { line-height:1.8; }
main[data-feature-id="F11"] .sample--dream { line-height:1.8; }
main[data-feature-id="F12"] .sample--name { line-height:1.8; }
main[data-feature-id="F10"] .sample--tarot .reading-item h3 { margin:21px 0 12px; line-height:1.8; }
main[data-feature-id="F10"] .sample--tarot .tarot-conclusion .verdict-label { margin-top:13px; }
main[data-feature-id="F10"] .sample--tarot .reading-more summary { padding:0; }
main[data-feature-id="F01"] .sample--saju { width:100%; max-width:760px; margin-inline:auto; word-break:normal; overflow-wrap:normal; }
/* The source's selectors that repeat the scoping root need explicit live selectors. */
main[data-feature-id="F01"] .sample--saju .feature-verdict { border-top:3px solid #a56b6d; }
main[data-feature-id="F01"] .sample--saju .pillar { padding:0; border-color:#d8c5bb; background:#fbf7f1; }
main[data-feature-id="F01"] .sample--saju .pillar--active { border-color:#a56b6d; background:#f6e8e2; }
main[data-feature-id="F01"] .sample--saju .feature-examples li { margin:0; }
main[data-feature-id="F01"] .sample--saju .feature-examples li + li { margin-top:7px; }
main[data-feature-id="F01"] .sample--saju .saju-availability { margin:15px 0 0; padding-top:12px; border-top:1px solid #d9cae8; color:#6b6480; font-size:14px; line-height:1.6; }
main:has(.sample) .sample .topic-more summary { min-height:0; padding:0; }
main:has(.sample) .sample--tojeong .tojeong-month-card details summary,
main:has(.sample) .sample--tojeong .tojeong-original summary { padding:0; }
@media (max-width:700px) { main[data-feature-id="F01"]:has(>.sample--saju) { padding-inline:36px; } }
@media (max-width:700px) { main[data-feature-id="F01"] .sample--saju { font-size:16px; } }
@media (max-width:700px) { main:has(.sample) .sample { font-size:16px; } }
@media (max-width:700px) { main[data-feature-id="F04"] #p4-result .sample--zodiac .verdict { padding:19px; } }
@media (max-width:700px) { main:has(.sample) { padding-inline:36px; } }