/* SajuPaper UI 2026-10-03: routes, mobile menu, input contract, reading book, backup import.
   Loaded after the existing stylesheets. Brand colours, characters and illustrations are unchanged. */

/* ---------- Mobile menu (≤949px) ---------- */
.mobile-menu{display:none;position:relative;flex:none}
.mobile-menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 13px;border:1px solid #b9b29f;border-radius:6px;background:#fffcf4;color:#263e34;font:600 15px/1.2 PaperSans,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu[open]>summary{background:#285341;color:#fffdf3;border-color:#285341}
.mobile-menu>summary:focus-visible{outline:3px solid #966536;outline-offset:3px}
body .site-header .mobile-menu>nav,body .xp-header .mobile-menu>nav{position:absolute;right:0;top:calc(100% + 8px);z-index:80;display:flex!important;flex-direction:column;gap:2px;width:min(260px,calc(100vw - 32px));padding:8px;background:#fffdf6;border:1px solid #dcd3c0;border-radius:8px;box-shadow:0 16px 36px #1c2a2333;font-size:16px;font-weight:500}
body .site-header .mobile-menu>nav a,body.illustrated-experience .xp-header .mobile-menu>nav a{display:flex!important;align-items:center;min-height:48px;padding:6px 14px;text-decoration:none;color:#263e34;border-radius:4px}
.mobile-menu>nav a:hover,.mobile-menu>nav a:focus-visible{background:#edf2e7}
.mobile-menu>nav a:first-child{font-weight:700;color:#285341}
@media(max-width:949px){
  .mobile-menu{display:block}
  body .site-header>nav,body.illustrated-experience .xp-header>nav{display:none!important}
  body .site-header{gap:10px}
  body .site-header .brand{margin-right:auto;min-width:0}
}
@media(max-width:380px){
  body .site-header .button.small{padding:8px 10px;font-size:12px}
  body .site-header .brand span{font-size:20px}
}

/* ---------- Horizontal overflow at 701~781px ----------
   aspect-ratio:16/9 + min-height:440px transferred a 782px minimum width to the hero. */
@media(max-width:949px) and (min-width:701px){
  .illustrated-experience .experience-hero.full-scene{min-height:0}
}
.illustrated-experience .steps li{word-break:keep-all;overflow-wrap:normal}

/* ---------- Home: category books open the input screen ---------- */
.book-card{display:flex;flex-direction:column;align-items:stretch}
.book-card-main{display:block;flex:1 0 auto;color:inherit;text-decoration:none}
.book-card-main:focus-visible{outline:3px solid #966536;outline-offset:4px}
.book-card-more{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:44px;padding:4px 8px;font-size:13px;color:#4f5a4b;text-underline-offset:4px}
.book-card-more:hover{color:#834b5a}

/* ---------- Home: generated book photo preview (no text over the photo) ---------- */
.book-photo{margin:0;min-width:0}
.book-photo img{display:block;width:100%;height:auto;aspect-ratio:1580/995;border-radius:10px;box-shadow:0 14px 30px #3b2c1a2e;background:#efe5d2}
.book-photo figcaption{margin-top:14px;font-size:14px;line-height:1.75;color:#4f5a4b}
.book-photo figcaption strong{color:#263e34}
.report-preview .preview-facts{margin:16px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.8;color:#3f483c}
.report-preview .preview-facts li{padding-left:18px;position:relative;word-break:keep-all}
.book-photo figcaption,.report-preview>div>p{word-break:keep-all}
.report-preview .preview-facts li::before{content:'·';position:absolute;left:4px;color:#834b5a}
@media(max-width:650px){.book-photo img{border-radius:6px}.book-photo figcaption{font-size:14px}}

/* ---------- Start: topic bar, question, new contract fields ---------- */
.topic-bar{margin:0 0 22px;padding:0 0 20px;border-bottom:1px solid var(--line,#dcd3c0)}
.topic-bar .eyebrow{margin:0 0 4px}
.topic-bar h2{margin:0 0 14px;font-size:24px;line-height:1.45}
.topic-pills{display:flex;flex-wrap:wrap;gap:8px}
.topic-pill{position:relative}
.topic-pill input{position:absolute;opacity:0;width:1px;height:1px}
.topic-pill span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #c9bfa9;border-radius:999px;background:#fbf7ee;font-size:15px;line-height:1.3;cursor:pointer;white-space:nowrap}
.topic-pill input:checked+span{background:#285341;border-color:#285341;color:#fffdf3;font-weight:700}
.topic-pill input:focus-visible+span{outline:3px solid #966536;outline-offset:3px}
.topic-pill.is-unavailable{opacity:.42;cursor:not-allowed}.topic-pill.is-unavailable span{cursor:not-allowed}
.question-field select{height:auto;min-height:52px;white-space:normal;font-size:16px;line-height:1.5}
.field-note{margin:-12px 0 18px;font-size:13px}
.zi-field,.age-field{padding:16px 18px;border:1px solid #d7ccb7;border-radius:8px;background:#fbf8ef}
.zi-field legend,.age-field legend{float:left;width:100%;font:700 16px/1.6 PaperSans,system-ui,sans-serif;margin:0 0 10px;padding:0}
.zi-field .check,.age-field .check{min-height:44px;font-size:16px}
.zi-field .check small{margin-left:4px;font-size:13px}
.zi-field .field-help,.age-field .field-help{clear:both;margin:6px 0 0}
.choice-row{display:flex;flex-wrap:wrap;gap:4px 22px;clear:both}
.place-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.place-fields .field{margin-bottom:6px}
@media(max-width:700px){
  .place-fields{grid-template-columns:1fr}
  .topic-bar h2{font-size:21px}
  .topic-pills{gap:6px}
  .topic-pill span{padding:8px 12px;font-size:14px}
  /* The input screen should start near the top on phones: keep the scene, drop the repeated benefits row. */
  body[data-page=start] .experience-benefits{display:none}
  body[data-page=start] .experience-hero.full-scene .hero-art{height:clamp(220px,62vw,300px)}
  body[data-page=start] .experience-hero.full-scene .hero-copy{padding-top:16px}
  body[data-page=start] .experience-hero.full-scene .hero-copy h1{font-size:28px;margin:6px 0 10px}
}
@media(max-width:440px){body[data-page=start].has-selected-journey .selection-receipt{display:none!important}}
.question-field{margin:4px 0 22px}
body .question-field legend,body.illustrated-experience .question-field legend{font:700 16px/1.6 PaperSans,system-ui,sans-serif;letter-spacing:0;margin:0 0 10px}
.question-list{display:grid;gap:8px}
.question-option{position:relative;display:block}
.question-option input{position:absolute;opacity:0;width:1px;height:1px}
.question-option span{position:relative;display:block;padding:12px 14px 12px 46px;border:1px solid #d3c9b4;border-radius:8px;background:#fffdf7;font-size:16px;line-height:1.55;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere}
.question-option span::before{content:'';position:absolute;left:15px;top:15px;width:18px;height:18px;border:2px solid #8f8a7a;border-radius:50%;background:#fff;box-sizing:border-box}
.question-option input:checked+span{border-color:#285341;background:#edf2e7;box-shadow:inset 0 0 0 1px #285341}
.question-option input:checked+span::before{border:5px solid #285341}
.question-option input:focus-visible+span{outline:3px solid #966536;outline-offset:2px}
.more-questions summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:15px;color:#285341}
.more-questions[open] summary{margin-bottom:8px}
.more-questions .question-option+.question-option{margin-top:8px}

/* ---------- Report: the answer comes first ---------- */
.report-paper.first-reading{margin:20px 0 30px;scroll-margin-top:110px}
.report-paper.first-reading:has(.reading-book){background:none;border:0;box-shadow:none;padding:0}
.first-reading .chapter{border-bottom:0;margin-bottom:0;padding-bottom:0}
.question-notice{margin:0 0 20px;padding:12px 16px;border-left:3px solid #834b5a;background:#f8f1ec;font-size:16px;line-height:1.7}
.question-notice small{display:block;margin-top:4px;font-size:13px;color:#5a604f}
.summary-question{font-family:var(--serif,serif);font-size:16px;line-height:1.7;margin:10px 0}
.report-switch .field-help{flex-basis:100%;margin:2px 0 0}
.boundary-candidates ul{margin:8px 0;padding-left:20px}

/* ---------- Report: reading book (PC spread, phone single page) ---------- */
.reading-chapter>h2{font-size:27px;line-height:1.5;margin:0 0 18px}
.reading-eyebrow{display:block;font:600 14px/1.6 PaperSans,system-ui,sans-serif;letter-spacing:.02em;color:#834b5a;margin-bottom:6px}
.reading-book{margin:0 0 12px;scroll-margin-top:110px}
.reading-book+.reading-book,.reading-book+.topic-chapter,.topic-chapter+.reading-book{margin-top:34px}
.reading-toc{margin:0 0 18px;padding:14px 16px;border:1px solid #e0d6c2;border-radius:8px;background:#fbf8f0}
.reading-toc-title{margin:0 0 6px;font-weight:700;font-size:14px;color:#4f5a4b}
.reading-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.reading-toc button{display:flex;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:6px;background:transparent;text-align:left;font:15px/1.5 PaperSans,system-ui,sans-serif;color:#263e34;cursor:pointer}
.reading-toc button:hover{background:#f1ece0}
.reading-toc button[aria-current=true]{background:#e6eddf;font-weight:700}
.reading-toc b{flex:none;color:#834b5a}
.reading-toc .is-locked>span{display:flex;gap:10px;padding:8px 10px;color:#6f6f63;font-size:15px}
.reading-toc .field-help{margin:8px 0 0}
.reading-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:linear-gradient(90deg,#fbf6ea 0,#fdf9f0 46%,#efe6d3 49.4%,#d8caae 50%,#efe6d3 50.6%,#fdf9f0 54%,#fbf6ea 100%);border:1px solid #dacdb3;border-radius:6px 6px 10px 10px;box-shadow:0 18px 30px -20px #3b2c1a66,0 3px 0 #ebe2cf,0 6px 0 #dfd3bb}
.reading-page{min-width:0;padding:40px 46px 34px}
.reading-left{padding-right:56px}
.reading-right{padding-left:56px}
.reading-kicker{margin:0 0 8px!important;font-size:14px!important;letter-spacing:.06em;color:#834b5a!important}
.reading-title{font-size:25px;line-height:1.5;margin:0 0 18px;color:#1f3a2e;word-break:keep-all}
.illustrated-experience .report-paper .reading-page p,.illustrated-experience .report-paper .reading-page li,.reading-page p,.reading-page li{font-size:18px;line-height:1.85;color:#2c3830}
.reading-p{margin:0 0 16px}
.illustrated-experience .report-paper .reading-page .reading-p.slot-answer,.reading-p.slot-answer{font-size:19px;font-weight:600;color:#1f3a2e}
.reading-badge{display:inline-block;margin:4px 0 8px;padding:2px 10px;border-radius:999px;background:#efe3d6;color:#6b4a3a!important;font-size:13px!important;line-height:1.7!important}
.reading-quote{margin:18px 0;padding:4px 0 4px 18px;border-left:3px solid #b49557;font-family:var(--serif,serif)}
.reading-quote p{margin:0 0 8px}
.reading-aside{margin:18px 0;padding:14px 16px;border-radius:8px;background:#f1ece0}
.reading-aside p{margin:0}
.reading-cells{margin:12px 0 18px;padding-left:20px}
.illustrated-experience .report-paper .reading-page .reading-ui,.illustrated-experience .report-paper .reading-page .reading-preview{font-size:15px;color:#4f5a4b}
.reading-evidence,.reading-appendix{margin-top:18px;border-top:1px solid #e0d6c2;padding-top:8px}
.reading-evidence summary,.reading-appendix summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:15px;color:#285341}
.illustrated-experience .report-paper .reading-page .reading-evidence li,.illustrated-experience .report-paper .reading-page .reading-evidence p{font-size:15px;line-height:1.7}
.reading-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:18px 0 8px}
.reading-nav .secondary{justify-self:start}
.reading-nav .primary{justify-self:end}
.reading-nav button:disabled{opacity:.45}
.reading-count{margin:0;font-size:15px;color:#4f5a4b}
.reading-progress-line{margin:0 0 18px}
.reading-follow{margin-top:22px;padding:18px;border:1px dashed #c8bda5;border-radius:8px;background:#fffdf7}
.reading-follow h4{margin:0 0 10px;font:700 16px/1.6 PaperSans,system-ui,sans-serif}
.reading-follow div{display:flex;flex-direction:column;gap:8px}
.reading-follow .secondary{justify-content:flex-start;text-align:left;width:100%}
.illustrated-experience .report-large .report-paper .reading-page p,.illustrated-experience .report-large .report-paper .reading-page li{font-size:21px}
@media(max-width:1023px){
  .reading-spread{grid-template-columns:minmax(0,1fr);background:#fdf9f0;box-shadow:0 12px 26px -18px #3b2c1a66,0 3px 0 #ebe2cf}
  .reading-page,.reading-left,.reading-right{padding:26px 26px}
  .reading-right{padding-top:0}
}
@media(max-width:700px){
  .reading-chapter>h2{font-size:22px}
  .reading-toc ol{grid-template-columns:minmax(0,1fr)}
  /* Phone body: 18px / 1.8 (contract start 17~18px, 1.65~1.85), chosen after reading the 360·390 captures. */
  .illustrated-experience .report-paper .reading-page p,.illustrated-experience .report-paper .reading-page li{font-size:18px;line-height:1.8}
  .illustrated-experience .report-paper .reading-page .reading-p.slot-answer{font-size:18px}
  .reading-title{font-size:22px}
  .reading-page,.reading-left,.reading-right{padding:22px 18px}
  .reading-right{padding-top:0}
  .reading-nav{grid-template-columns:1fr 1fr;gap:10px}
  .reading-count{grid-column:1/-1;grid-row:1;text-align:center}
  .reading-nav .secondary,.reading-nav .primary{justify-self:stretch;padding-inline:10px}
  /* Shorter way to the first answer on phones. */
  body[data-page=report] .report-heading.full-scene{min-height:0;padding-bottom:14px;margin-bottom:12px}
  body[data-page=report] .report-heading.full-scene .hero-art{height:clamp(190px,52vw,240px);object-position:center 28%}
  body[data-page=report] .report-heading.full-scene .hero-copy{padding:14px 20px 0}
  body[data-page=report] .report-heading.full-scene .hero-copy h1{font-size:26px;margin:6px 0 8px}
  body[data-page=report] .report-heading.full-scene .hero-copy>p{font-size:14px;margin:4px 0;line-height:1.7}
  body[data-page=report] .report-controls{gap:6px;margin:10px 0}
  body[data-page=report] .report-controls button,body[data-page=report] .report-controls a{min-height:44px;padding:8px 10px;font-size:13px}
  .report-paper.first-reading{margin-top:12px}
}
@media print{
  .reading-spreads .reading-spread[hidden]{display:grid!important;break-before:page}
  .reading-toc,.reading-follow,.reading-nav,.reading-progress-line,.mobile-menu{display:none!important}
  .reading-spread{box-shadow:none;background:#fff}
}
.reading-toc>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;list-style:none}
.reading-toc>summary::-webkit-details-marker{display:none}
.reading-toc>summary::after{content:'펼치기';margin-left:auto;font-weight:400;font-size:13px;color:#285341}
.reading-toc[open]>summary::after{content:'접기'}
.reading-toc[open]>summary{margin-bottom:6px}
.reading-toc button span,.reading-follow .secondary,.reading-title,.reading-chapter>h2{word-break:keep-all;overflow-wrap:anywhere}
.reading-page p,.reading-page li{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- Library: backup import / export ---------- */
.backup-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 28px;padding:20px 22px;border:1px solid #d7ccb7;border-radius:8px;background:#fbf8ef}
.backup-tools h2{margin:0 0 6px;font-size:21px}
.backup-tools p{margin:0;font-size:15px;line-height:1.75;color:#4f5a4b}
.backup-actions{display:flex;flex-wrap:wrap;gap:8px;flex:none}
@media(max-width:700px){.backup-tools{flex-direction:column;align-items:stretch;padding:18px}.backup-actions>.secondary{flex:1}}
.zi-field .check,.age-field .check{flex-wrap:wrap;min-width:0}
.zi-field .check small{margin-left:0}
/* Help text contrast: #686f62 measured 4.49:1 on the page; #585f53 is 5.6~6.5:1 on the paper colours used here. */
.illustrated-experience .field-help{color:#585f53}
/* The legend floats (keeps it inside the box); everything after it starts below it. */
.zi-field>.check,.age-field>.check{clear:both;display:flex;width:100%}

/* ---------- 2026-10-03 v2: real engine wiring (guide speech, notices, follow-ups, place/23시 inputs) ---------- */
.reading-hook{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px}
.reading-hook img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid #e3d6bd;background:#efe3d6}
.reading-hook p{position:relative;margin:0!important;padding:10px 14px;border-radius:4px 14px 14px 14px;background:#f3ead8;border:1px solid #e3d6bd;min-width:0}
.reading-speaker{display:block;font:700 14px/1.6 PaperSans,system-ui,sans-serif;color:#834b5a;letter-spacing:.02em}
.illustrated-experience .report-paper .reading-page .reading-hook-line,.reading-hook-line{display:block;font-size:18px;line-height:1.7;color:#1f3a2e;font-family:var(--serif,serif)}
.reading-aside-label{margin:0 0 4px!important;font:700 13px/1.6 PaperSans,system-ui,sans-serif!important;color:#6b4a3a!important;letter-spacing:.04em}
.reading-aside{border-left:3px solid #b49557}
.reading-aside p+p{margin-top:6px}
.reading-pending{margin:14px 0 4px;border-top:1px solid #e0d6c2;padding-top:6px}
.reading-pending summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:15px;color:#285341}
.reading-pending ul{margin:6px 0 0;padding-left:20px}
.reading-pending li{margin:0 0 8px;font-size:15px;line-height:1.7}
.reading-pending li strong{display:block;font-weight:600;color:#2c3830}
.reading-pending li span{display:block;color:#585f53}
.reading-follow .field-help{margin:0 0 10px}
.reading-follow .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:15px;color:#285341;text-decoration:underline;text-underline-offset:3px}
.question-weak{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#7a4b2a}
.time-policy-note strong{font-weight:700;color:#1f3a2e}
.boundary-candidates strong{display:block}
.boundary-candidates strong+ul{margin-top:6px}
.boundary-candidates ul+strong{margin-top:10px}
.place-fields #place-detail-required{margin-left:4px}
@media(max-width:700px){
  .reading-hook{gap:10px}
  .reading-hook img{width:48px;height:48px}
  .illustrated-experience .report-paper .reading-page .reading-hook-line{font-size:17px}
}
/* Contrast (measured by tests/ui-flow.test.mjs at 360~1440): the shared muted grey #707168 was 4.22~4.49:1 on the
   paper colours; #5f6258 is 5.3:1 or more there. Small print below 12px is raised to 12px. */
.illustrated-experience{--muted:#5f6258}
.summary-footnote{font-size:12px}
.price-caption{color:#5a6356}
.preview-label{font-size:12px;color:#5f5a4e}
/* 밤 11시 choice: the dated option text sits beside its radio (it wrapped under it at 360px). */
.zi-field>.check{flex-wrap:nowrap;align-items:flex-start;gap:10px}
.zi-field>.check>input{flex:none;margin-top:4px}
.zi-field>.check>[data-zi-label]{flex:1 1 0;min-width:0;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.pillar .pillar-alt{display:block;margin:-6px 4px 6px;font-size:13px;line-height:1.5;color:#6b4a3a;word-break:keep-all}
/* Fact tables on phones: "연주" and "천간 십성" broke inside the word. */
.data-table th,.data-table td{word-break:keep-all;overflow-wrap:break-word}
.data-table tbody th{white-space:nowrap}
/* 701~949px: the form column is ~420px, so the two place selects (≈185px each) cut "미국 (지역 선택 필요)". Stack them. */
@media(max-width:949px) and (min-width:701px){.place-fields{grid-template-columns:1fr}}
/* Korean words stay whole in the narrow 3-up time cards and in form questions ("알아/요", "있나/요?"). */
.time-modes strong,.time-modes small,#birth-form legend{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- 2026-10-03 v3: two cases side by side, alternative day line, notes after the answer ---------- */
/* PC spread: one case per page (left/right of the binding); phone: one after the other. Same box for both cases so
   neither reads as the 'right' one. */
.reading-case{margin:0 0 18px;padding:14px 16px 4px;border:1px solid #d9cbb0;border-radius:8px;background:#fffaf0}
.reading-case-title{margin:0 0 10px;font:700 16px/1.6 PaperSans,system-ui,sans-serif;color:#5b3d2c;word-break:keep-all;overflow-wrap:anywhere}
.illustrated-experience .report-paper .reading-page .reading-case .reading-p.slot-answer,.reading-case .reading-p.slot-answer{font-size:18px}
.reading-day-alternative{border-left-color:#7b6a9a;background:#efecf3}
.reading-day-alternative .reading-aside-label{color:#4e3f6d!important}
.illustrated-experience .report-paper .reading-page .reading-aside-fact,.reading-aside-fact{margin-top:8px!important;font:500 14px/1.6 PaperSans,system-ui,sans-serif!important;color:#3f3654!important}
.reading-note{background:#eef1ea;border-left-color:#7d9070}
.reading-note .reading-aside-label{color:#3d5233!important}
@media print{.reading-case{break-inside:avoid}}

/* ---------- 2026-10-03 v5: qa_v1 (화면 QA MAJOR 12 · MINOR 19) ---------- */
/* CD-06 chapter head: one 읽기 기준 line under the title, then the answer. */
.reading-basis-line{margin:-6px 0 14px!important;padding:8px 12px;border-left:3px solid #7b6a9a;background:#f3f0f6;border-radius:0 6px 6px 0;font-size:16px!important;line-height:1.7!important;color:#2f2a3d!important;word-break:keep-all;overflow-wrap:anywhere}
.reading-basis-label{display:inline-block;margin-right:8px;font:700 13px/1.6 PaperSans,system-ui,sans-serif;color:#4e3f6d;letter-spacing:.02em}
.reading-hook{margin-bottom:12px}
.reading-condition{background:#f3f0f6;border-left-color:#7b6a9a}
.reading-condition .reading-aside-label{color:#4e3f6d!important}
.reading-fact{background:#eef1ea;border-left-color:#5f7a52}
.reading-fact .reading-aside-label{color:#334a2a!important}
.reading-range{background:#f4efe4;border-left-color:#b49557}
.reading-range .reading-aside-label{color:#5b3d2c!important}
.reading-nature{background:#f1efe9;border-left-color:#8a8476}
.reading-nature .reading-aside-label{color:#45423a!important}
.reading-end-link{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}
.consensus-basis-title{margin:20px 0 6px;font-size:18px}
.question-limited{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:#5b3d2c}
.question-method{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:#3f4f5f}
.interval-line{margin:6px 0 0;font-size:16px;line-height:1.8;color:#4c604d;overflow-wrap:anywhere}
.question-option.is-limited span{background:#fbf8f1}
.date-help{margin:-6px 0 12px;padding:8px 12px;border-left:3px solid #a95c4e;background:#f8eee9;color:#5b2f25}
.storage-note{margin:0 0 18px;padding:10px 14px;border-radius:6px;background:#eef1ea;color:#334a2a;font-size:15px;line-height:1.7}
.storage-note.is-near{background:#f8eee9;color:#5b2f25;border-left:3px solid #a95c4e}
.book-question{color:#263e34!important;font-family:var(--serif,serif);line-height:1.55!important;word-break:keep-all;overflow-wrap:anywhere}
.book-facts{word-break:keep-all;overflow-wrap:anywhere}
.shelf-question{display:block;font-size:14px;line-height:1.5;color:#3f483c;word-break:keep-all;overflow-wrap:anywhere}
.record-book-title h3,.record-book-title span,.shelf-mini strong{word-break:keep-all!important;overflow-wrap:anywhere}

/* ⑦ 기록지기 고르기: name on one line, round portrait, whole words (360px stacked the name letter by letter). */
.persona-option>.persona-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;min-height:44px;text-align:center}
body .persona-option img{flex:none;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:50%}
.persona-text{display:flex;flex-direction:column;align-items:center;min-width:0}
.persona-name{font-size:15px;font-weight:700;line-height:1.4;white-space:nowrap;color:#263e34}
body .persona-option small{margin-top:3px;font-size:13px;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:520px){
  body .persona-options{grid-template-columns:minmax(0,1fr);gap:6px}
  body .persona-option>.persona-card{flex-direction:row;align-items:center;gap:12px;padding:8px 12px;text-align:left}
  body .persona-option img,body.illustrated-experience .persona-option img{width:52px;height:52px}
  .persona-text{align-items:flex-start}
  body .persona-option small{font-size:14px}
}

/* ⑪ Touch targets 44px everywhere (summary, check labels, filters, card actions, footer and header links). */
details>summary{min-height:44px;box-sizing:border-box;padding-top:9px;padding-bottom:9px}
.reading-toc>summary,.more-questions summary,.reading-evidence summary,.reading-appendix summary,.reading-pending summary,.mobile-menu>summary{padding-top:0;padding-bottom:0}
label.check{min-height:44px}
.illustrated-experience .sort-row .check{min-height:44px;font-size:15px}
.filter-tabs button{min-height:44px}
.book-actions button,.book-actions a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.book-actions [data-delete]{padding-inline:10px}
#record-search{min-height:44px}
.report-sidebar nav a{min-height:44px;display:flex;align-items:center}
.site-header .brand{min-height:44px;display:inline-flex;align-items:center}
.site-header .button.small{min-height:44px;display:inline-flex;align-items:center}
footer nav a,.xp-footer a,.report-end a,.library-ending a,.private-note a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;column-gap:16px}

/* ⑩ Phones: body copy 17px or more, small print 13px or more (meta of 9~12px raised). */
@media(max-width:700px){
  /* body copy */
  .hero .lead,.hero-copy>p:not(.eyebrow),.experience-hero .hero-copy>p:not(.eyebrow),#guide-quote,.section-intro,.faq details p,.faq>div>p,
  .price-card>p:not(.price-kicker):not(.price-caption),.price-card li,.preview-facts li,.guide blockquote,.how-section li p,.steps-section li p,
  .recommendations article p,.topic-reading article p,.illustrated-page article>p,.illustrated-page .section div>p,
  #selected-topics-field>p,.product-field>p:not(.field-help),details.advanced>p,.review-list dd,
  .chapter>p:not(.field-help):not(.soft-note):not(.reading-kicker),.chapter li,.time-consensus-summary p,.uncertainty-list li,.consensus-facts li,.interval-list li,.interval-line,
  .reading-pending li,.boundary-candidates li,.empty-library p:not(.eyebrow),.library-ending p:not(.eyebrow),.library-intro blockquote,
  .report-end p,.reading-follow .secondary{font-size:17px!important;line-height:1.75}
  .illustrated-experience .report-paper .reading-page .reading-evidence li,.illustrated-experience .report-paper .reading-page .reading-evidence p,.reading-pending li span{font-size:16px!important}
  /* help and notes */
  .field-help,.soft-note,.private-note,.illustrated-experience .library-main>.private-note,.pricing-footnote,.input-guidance>p,.input-guidance dd,.storage-note{font-size:15px!important;line-height:1.7}
  /* labels, captions and meta: 13~15px */
  .eyebrow,.price-kicker,.price-caption,.preview-label,.guide .guide-category,.trust-row li,.reading-kicker,.reading-badge,.reading-aside-label,.reading-basis-label,.reading-speaker,
  .demo-badge,.summary-footnote,.demo-summary .summary-card small,.required,.optional,.reading-aside-fact,.illustrated-experience .report-paper .reading-page .reading-aside-fact{font-size:14px!important}
  .illustrated-experience .steps li{font-size:14px}
  .illustrated-experience .steps b{font-size:14px}
  .experience-process span{font-size:15px}
  .product-choice b small{font-size:13px}
  .product-choice em{font-size:15px}
  .illustrated-experience .report-switch label{font-size:15px}
  .technical dt{font-size:14px}
  .technical dd{font-size:16px}
  .pillar header{font-size:14px}
  .pillar span{font-size:13px}
  .pillar strong.unresolved{font-size:14px;line-height:1.5;word-break:keep-all}
  .data-table th,.data-table td{font-size:15px}
  .guide-note small,#guide-role,.guide-note .eyebrow{font-size:13px!important}
  .illustrated-experience .book-meta p,.book-meta p{font-size:14px!important}
  .illustrated-experience .book-meta .book-question{font-size:16px!important}
  .book-actions button,.book-actions a{font-size:15px!important}
  .record-book-title span{font-size:13px!important}
  .shelf-mini strong{font-size:15px}
  .shelf-mini small{font-size:13px}
  .filter-tabs button{font-size:14px}
  .shelf-heading .primary{font-size:15px}
  .library-intro blockquote small{font-size:14px}
  footer p,footer small,.xp-footer p,footer nav a,.xp-footer a{font-size:14px!important}
  .site-header .button.small{font-size:14px!important}
  /* the brand's small tagline (8~9px) is decoration on a phone */
  .site-header .brand small,.xp-brand small{display:none}
}
.illustrated-experience .report-large .report-paper .reading-page .reading-p.slot-answer{font-size:23px}
.report-large .field-help,.report-large .soft-note,.report-large .reading-aside p,.report-large .reading-basis-line,.report-large .review-list dd,.report-large .chapter li,.report-large .reading-evidence li,.report-large .reading-evidence p{font-size:19px!important}
.report-large .reading-hook-line{font-size:21px!important}

/* ⑧ (style side) the hidden line breaks keep their space in the HTML; nothing else needed here. */
/* MINOR 13: the month/day boxes keep their placeholder visible at 360px. */
@media(max-width:400px){.form-grid select[name=month],.form-grid select[name=day]{padding-right:26px}}

/* MINOR 27: contrast 4.5:1 — step numbers, footer small print, topic badges, hero meta over the picture. */
.illustrated-experience .steps b,.steps li b{color:#6b6253}
.illustrated-page footer small{color:#5c6559}
footer .biz,.xp-footer .biz{display:block;margin-top:8px;font-size:13px}
.xp-footer .biz{color:#d8dccf}
.illustrated-page .section div>p,.illustrated-page article>p{color:#565b52}
.elements span:nth-child(3){background:#85672f}
.elements span:nth-child(4){background:#696a61}
.question-grid p{color:#555a51}
@media(max-width:700px){.elements span{width:28px;height:28px;font-size:13px}}
body[data-page=report] .report-heading .hero-copy>p:not(.eyebrow){display:inline-block;background:#fffdf6e6;border-radius:6px;padding:2px 8px;color:#263e34}
/* v5 second pass (measured at 360·390): the rules above lost to older, more specific ones here. */
details>summary{min-height:44px!important}
.filter-tabs button,.illustrated-experience .filter-tabs button{min-height:44px!important}
.book-actions button,.book-actions a,.illustrated-experience .book-actions button,.illustrated-experience .book-actions a{min-height:44px!important}
#record-search{min-height:44px!important;box-sizing:border-box}
.xp-header .xp-brand,.site-header .brand{min-height:44px!important;display:inline-flex!important;align-items:center}
@media(max-width:700px){
  .bottom-cta p,.illustrated-experience .report-paper .reading-page .reading-evidence li,.illustrated-experience .report-paper .reading-page .reading-evidence p,.reading-pending li span,.technical dd,
  .illustrated-experience .book-meta .book-question,.illustrated-experience .report-paper .reading-page .reading-basis-line,.reading-basis-line{font-size:17px!important}
  .book-card-main p{font-size:15px!important}
  .reading-toc button,.reading-toc .is-locked>span{font-size:16px}
  .library-intro blockquote small,.guide blockquote small,blockquote small{font-size:14px!important}
  .filter-tabs button,.illustrated-experience .filter-tabs button{font-size:14px!important}
  .shelf-heading .primary,.illustrated-experience .shelf-heading .primary{font-size:15px!important}
  .sort-row label,.illustrated-experience .sort-row label{font-size:14px!important}
}
footer .brand{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:700px){.guide-message small{font-size:14px!important}.guide-message p{font-size:17px!important}}
@media(max-width:700px){.chapter dd,.demo-products>div>p:not(.field-help),.backup-tools p{font-size:17px!important}}
/* v5 third pass (measured at 768·1280·1440): small print of 9~12px raised to 13px or more at every width; header links 44px. */
@media(min-width:701px){
  .site-header .brand small,.xp-brand small,.illustrated-experience .xp-brand small{font-size:13px!important;letter-spacing:.08em!important}
  .eyebrow,.illustrated-experience .eyebrow,span.eyebrow,#guide-role{font-size:14px!important}
  .experience-benefits small,.trust-row li,.preview-label,.required,.optional,.product-choice b small,.demo-summary .summary-card small,.summary-card small,.guide-note small,.guide-message small,blockquote small,.shelf-mini small,.record-book-title span,footer small,.xp-footer small{font-size:13px!important}
  .demo-badge,.illustrated-experience .book-meta p,.book-meta p,.book-actions button,.book-actions a,.illustrated-experience .book-actions button,.illustrated-experience .book-actions a,footer p,footer nav a{font-size:14px!important}
  .illustrated-experience .book-meta .book-question{font-size:15px!important}
  .section-intro,.topic-reading .section-intro{font-size:15px!important}
}
.site-header>nav a{min-height:44px;display:inline-flex;align-items:center}
/* s9ui (qa_v2 2026-10-04) */
/* N1: a chosen question that puts its first answer off with the time unknown: said under the time field and on step 3. */
.question-option.is-holding .question-limited{color:#7a3b22;font-weight:600}
.question-hold-note{margin:14px 0 18px;padding:16px 18px;border:1px solid #c99a72;border-left:5px solid #a4572f;border-radius:8px;background:#fbf1e6;color:#3c2a1f;word-break:keep-all;overflow-wrap:anywhere}
.question-hold-note p{margin:0 0 8px;font-size:16px;line-height:1.65}
.question-hold-note .question-hold-title strong{display:block;font-size:14px;color:#7a3b22;margin-bottom:2px}
.question-hold-note .question-hold-target{font-size:15px;color:#4a3a2c}
.question-hold-note button{min-height:44px;margin-top:4px;padding:8px 16px;font-size:16px;white-space:normal;word-break:keep-all;text-align:left}
.question-hold-note.is-done{border-color:#9fb393;border-left-color:#285341;background:#eef3e8;color:#1f3a2e}
.question-hold-note.is-done p{margin:0}
.question-hold-note:focus{outline:3px solid #966536;outline-offset:2px}
@media(max-width:700px){.question-hold-note button{width:100%;text-align:center}.question-hold-note p,.question-hold-note .question-hold-target{font-size:17px}}
/* N2: the workbook day re-reads one chapter's 요점 under that chapter's title. */
.practice-chapter{margin:4px 0 6px!important;font-size:16px!important;line-height:1.55;font-weight:700;color:#3d4e40}
/* n3: whole words on a line. experience.css set word-break:normal on report paragraphs, which lets Korean break inside
   a word ('되어/도', '적었습/니다'). Break between words; a word longer than the line still wraps (no sideways scroll). */
.illustrated-experience main p,.illustrated-experience main li,.illustrated-experience main dd,.illustrated-experience main dt,.illustrated-experience main summary,.illustrated-experience main small,.illustrated-experience main blockquote,.illustrated-experience main label,.illustrated-experience main figcaption,
.illustrated-experience .report-paper .chapter p,.illustrated-experience .report-paper .chapter li,.illustrated-experience .report-paper .chapter dd,.illustrated-experience .reading-aside p,.illustrated-experience .reading-basis-line,.illustrated-experience .review-list dd{word-break:keep-all;overflow-wrap:anywhere}
/* n4: chapter 1 and its first answer near the first phone screen. The question is printed once (chapter 1 title); the
   section heading keeps it for screen readers. The reading tools fold on a phone (open on a wider screen). */
.reading-chapter>h2 .reading-heading-question{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.report-tools{margin:8px 0 4px}
.report-tools>summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:44px;padding:8px 14px;border:1px solid #c9bfa9;border-radius:8px;background:#fffdf6;cursor:pointer;font-weight:700;color:#1f3a2e;list-style:none}
.report-tools>summary::-webkit-details-marker{display:none}
.report-tools>summary::after{content:'펼치기';margin-left:auto;font-weight:400;font-size:14px;color:#285341}
.report-tools[open]>summary::after{content:'접기'}
.report-tools>summary small{font-weight:400;font-size:14px;color:#4f5a4b}
@media(min-width:701px){.report-tools>summary{display:none}.report-tools{margin:0}}
@media(max-width:700px){
  body[data-page=report] .report-heading.full-scene{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:4px 12px;align-items:center;padding:12px 18px;margin-bottom:6px}
  body[data-page=report] .report-heading.full-scene .hero-copy{display:contents}
  body[data-page=report] .report-heading.full-scene .hero-copy>.eyebrow{display:none}
  body[data-page=report] .report-heading.full-scene .hero-copy h1{grid-column:1;grid-row:1;font-size:22px;line-height:1.4;margin:0}
  body[data-page=report] .report-heading.full-scene .hero-art{grid-column:2;grid-row:1;align-self:center;position:static!important;width:64px!important;height:64px!important;border-radius:50%!important;object-fit:cover;object-position:50% 20%;border:2px solid #e3d8c3!important;background:#efe6d4!important}
  body[data-page=report] .report-heading.full-scene .hero-copy>p:not(.eyebrow){grid-column:1/-1;grid-row:2;justify-self:start;font-size:14px;margin:2px 0 0;line-height:1.6}
  body[data-page=report] .report-heading.full-scene::after{display:none}
  body[data-page=report] .report-tools .report-controls{margin:10px 0 4px}
  body[data-page=report] .report-tools>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px}
  body[data-page=report] .report-tools>summary>span{grid-column:1;grid-row:1}
  body[data-page=report] .report-tools>summary::after{grid-column:2;grid-row:1}
  body[data-page=report] .report-tools>summary small{grid-column:1/-1;grid-row:2}
  body[data-page=report] #first-reading{margin-top:8px}
  body[data-page=report] .reading-toc:not([open]){padding-top:0;padding-bottom:0;margin-bottom:10px}
  body[data-page=report] #interpretation>h2{margin-bottom:10px}
  body[data-page=report] .reading-spread .reading-left{padding-top:14px}
  body[data-page=report] .reading-spread .reading-title{margin-bottom:12px}
}
/* n12: small labels (tool buttons, chapter numbers, 오행·대운 labels, contents links, guide notes) 13px → 14px on a phone. */
@media(max-width:700px){
  body[data-page=report] .report-controls button,body[data-page=report] .report-controls a,.report-sidebar nav a,.fortune-cell span,.pillar>span,.pillar .pillar-alt,.chapter-number,#progress-label,details.technical>summary,.product-choice b small,
  .book-card-more,.trust-row li span,.report-preview a.button,.time-modes small,#guide-role,.guide-note small,.paper-spread small,.paper-spread .elements span,.record-book-title span,.illustrated-experience .record-book-title span,.shelf-mini small,.legal-sheet .eyebrow,.reading-toc>summary::after{font-size:14px!important}
}
/* v1-27: hero copy over the picture on the home and topic pages (768·1024 measured 2.75~3.5:1): a translucent paper
   behind the lead and the eyebrow; the trust chips opaque with dark icons (every width). */
@media(min-width:701px) and (max-width:1279px){
  .illustrated-page .hero-copy .lead,.illustrated-page .hero-copy .eyebrow,.illustrated-page .hero-copy .topic-subtitle{background:rgba(251,248,241,.92);border-radius:8px;padding:6px 12px;width:fit-content;max-width:100%;box-sizing:border-box}
  .illustrated-page .hero-copy .eyebrow,.illustrated-page .hero-copy .topic-subtitle{padding:2px 10px}
}
.illustrated-page .trust-row li{background:#f1ebdf}
.illustrated-page .trust-row li span{color:#26342f}
/* s10ui (qa_v3 · fix list R10 lane B, 2026-10-04) */
/* B5 (qa_v3 n3 rest): whole words in every page body, the workbook chapter titles and day lines, the pillar cards and the
   guide quotes included. break-word (not anywhere) so a word longer than its line still wraps without shrinking a
   column's min-content. The workbook date never splits at its hyphens. */
.illustrated-experience main,.illustrated-page main{word-break:keep-all;overflow-wrap:break-word}
.practice-chapter,.practice-day>summary,.pillar>span,.pillar>strong,.pillar .pillar-alt,.boundary-candidates strong,.illustrated-page blockquote,.illustrated-experience main legend{word-break:keep-all;overflow-wrap:break-word}
.practice-date{white-space:nowrap}
/* B7 (qa_v3 m4): no text under 14px on a wider screen either (the 13px labels, help lines, captions and footers of
   768·1280·1440), as on a phone (n12). :not(#_) lifts these above the per-page 13px rules that use !important. */
@media(min-width:701px){
  :is(.brand small,.xp-brand small,.site-header a.button,.site-header>nav a,.trust-row li,.guide-category,.book-card-more,.price-kicker,.price-caption,.preview-label,.bottom-cta a.button,footer small,.guide-message small,.paper-spread small,.seasons article p,.experience-benefits small,.guide-note small,.input-guidance>p,.form-paper .steps li,.form-paper .steps b,.required,.optional,.field-help,.time-modes small,.product-choice em,.product-choice b small,.persona-text small,blockquote small,.private-note,.private-note a,.record-book-title span,.shelf-mini small,.reading-badge,.summary-card small,#progress-label,.chapter-number,.pillar>span,.pillar-alt,.fortune-cell span,details.technical>summary,.reading-basis-label,.reading-aside-label):not(#_){font-size:14px!important}
  .reading-toc>summary:not(#_)::after{font-size:14px!important}
  /* v1-27 rest: the start and library hero lead over the picture (768: 3.51·3.98:1) on the same translucent paper as home. */
  body[data-page=start] .experience-hero .hero-copy>p:not(.eyebrow),body[data-page=library] .experience-hero .hero-copy>p:not(.eyebrow){background:rgba(251,248,241,.92);border-radius:8px;padding:6px 12px;width:fit-content;max-width:100%;box-sizing:border-box}
}
/* B7 (qa_v3 m5): every report contents link is at least 44px wide on a phone ('사업' was 43px). */
.report-sidebar nav a{min-width:44px;box-sizing:border-box;text-align:center}
/* B6 (qa_v3 n4·n6): time unknown and 입춘 two cases: chapter 1's first answer inside the first 390×844 screen. The
   chapter head and the guide's question are set tighter on a phone; the 두 경우 note leads into the case boxes. */
.reading-aside.reading-case-lead{margin:0 0 12px}
.reading-case-lead .reading-aside-label{display:inline;margin:0 4px 0 0}
@media(max-width:700px){
  /* The section heading's topic · guide line repeats the line under the page title right above it: kept for screen
     readers, not printed twice (the free preview keeps it: it says 무료 미리보기). */
  body[data-page=report] .reading-chapter>h2{margin-bottom:0}
  body[data-page=report] .reading-chapter>h2 .reading-eyebrow:not(.is-preview){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
  body[data-page=report] .reading-chapter>h2:has(.is-preview){margin-bottom:8px}
  body[data-page=report] .report-heading.full-scene{grid-template-columns:minmax(0,1fr) 52px;padding:8px 18px}
  body[data-page=report] .report-heading.full-scene .hero-art{width:52px!important;height:52px!important}
  body[data-page=report] .report-heading.full-scene .hero-copy h1{font-size:20px;line-height:1.35}
  body[data-page=report] .report-heading.full-scene .hero-copy>p:not(.eyebrow){font-size:15px!important;line-height:1.55!important;padding:2px 8px}
  body[data-page=report] .report-heading.full-scene{margin-bottom:4px}
  body[data-page=report] .report-tools{margin:6px 0 2px}
  /* The folded reading tools take one row: the list of tools follows the label and is cut with … where the row ends
     (its full text stays the summary's name). */
  body[data-page=report] .report-tools>summary{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding-block:6px}
  body[data-page=report] .report-tools>summary small{grid-column:2;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-page=report] .report-tools>summary::after{grid-column:3}
  body[data-page=report] .reading-page,body[data-page=report] .reading-left,body[data-page=report] .reading-right{padding-left:16px;padding-right:16px}
  body[data-page=report] .reading-toc{padding-top:0;padding-bottom:0;margin-bottom:8px}
  body[data-page=report] .reading-toc:not([open])>summary{margin-bottom:0}
  body[data-page=report] .reading-spread .reading-left{padding-top:8px}
  body[data-page=report] .reading-kicker{margin-bottom:4px!important}
  body[data-page=report] .reading-spread .reading-title{margin-bottom:10px}
  .illustrated-experience .report-paper .reading-page .reading-basis-line,body[data-page=report] .reading-basis-line{font-size:15px!important;line-height:1.6!important;padding:6px 10px;margin-bottom:10px!important}
  body[data-page=report] .reading-hook{gap:8px;margin-bottom:10px}
  body[data-page=report] .reading-hook img{width:40px;height:40px}
  body[data-page=report] .reading-hook p,.illustrated-experience .report-paper .reading-page .reading-hook p{padding:6px 12px;font-size:17px;line-height:1.55}
  .illustrated-experience .report-paper .reading-page .reading-hook-line{font-size:17px;line-height:1.55}
  body[data-page=report] .reading-case{padding:8px 12px 2px;margin-bottom:12px}
  body[data-page=report] .reading-case-title{font-size:14px;line-height:1.5;margin-bottom:4px}
  body[data-page=report] .reading-aside.reading-case-lead{padding:6px 10px;margin-bottom:10px}
  body[data-page=report] .reading-aside.reading-case-lead p,.illustrated-experience .report-paper .reading-page .reading-case-lead p{font-size:17px!important;line-height:1.6!important;margin:0}
  body[data-page=report] .reading-hook .reading-speaker{display:inline;margin-right:6px}
  .illustrated-experience .report-paper .reading-page .reading-hook .reading-hook-line{display:inline}
}
/* s11ui B1 (CD-11): the server asked for the region of a multi-timezone country. Its sentence sits right under the
   region list (both columns on a wide screen), in the form's error colours. */
.place-region-note{grid-column:1/-1;margin:0 0 14px;padding:12px 14px;border:1px solid #cd988c;border-left:4px solid #a4572f;border-radius:4px;background:#f9e9e3;color:#803a30;font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.place-region-note[hidden]{display:none}
.place-fields select[aria-invalid=true]{border-color:#a4572f;box-shadow:0 0 0 2px #f2d3c7}
@media(max-width:700px){.place-region-note{font-size:17px}}
/* s11ui B3 (qa_v4 m4): the opened '이 기록의 계산 기준' list was 12px on a wide screen (experience.css .technical dl).
   14px at every width; a phone keeps its larger dt 14px / dd 16~17px below. */
details.technical dl{font-size:14px}
/* s11ui B4 (qa_v4 n4): 입춘 two cases with the time unknown, in a single-topic and a 종합 report: chapter 1's first
   answer inside the first 844px screen at 360 and 390. Only the spacing and line height of the chapter head change;
   body copy stays 17px (qa_v1 ⑩). */
@media(max-width:700px){
  /* The first book's topic title repeats the topic named in the line under the report title and in chapter 1's kicker
     right below it: kept for screen readers and the reading position, not printed a third time on a phone. The other
     books of a 종합·심화 report keep their titles. */
  body[data-page=report] #interpretation>.reading-book:first-of-type>.topic-chapter-title{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
  body[data-page=report] .report-heading.full-scene{padding-block:6px}
  body[data-page=report] .reading-spread .reading-left{padding-top:6px}
  body[data-page=report] .reading-kicker{margin-bottom:2px!important}
  body[data-page=report] .reading-spread .reading-title{line-height:1.4;margin-bottom:8px}
  .illustrated-experience .report-paper .reading-page .reading-basis-line,body[data-page=report] .reading-basis-line{line-height:1.5!important;padding:5px 10px;margin-bottom:8px!important}
  body[data-page=report] .reading-hook{margin-bottom:8px}
  body[data-page=report] .reading-hook p,.illustrated-experience .report-paper .reading-page .reading-hook p{padding:4px 12px;line-height:1.5}
  .illustrated-experience .report-paper .reading-page .reading-hook-line{line-height:1.5}
  body[data-page=report] .reading-aside.reading-case-lead{padding:5px 10px;margin-bottom:8px}
  body[data-page=report] .reading-aside.reading-case-lead p,.illustrated-experience .report-paper .reading-page .reading-case-lead p{line-height:1.5!important}
  body[data-page=report] .reading-case{padding-top:6px}
  body[data-page=report] .reading-case-title{line-height:1.4;margin-bottom:2px}
}
/* s11ui B1 on the report: the link to the region list sits above the restore button with a gap. */
.status .region-handoff{margin:12px 0 8px}
/* FIX_LIST_R12 C4 (qa_v5 N2): 대운 띠의 시작 나이(예: 100세부터)는 낱말 중간에서 줄을 바꾸지 않는다. 칸은 글자 폭만큼 넓어지고 띠는 가로로 넘겨 본다. */
.fortune-cell{flex:0 0 auto}
.fortune-cell span{white-space:nowrap}

/* 2026-10-08 product-first book flow. Product depth is explained before any birth data is requested. */
body[data-page=start] .form-paper>.topic-bar{display:none}
body[data-page=start] [data-step="1"]>.topic-bar{display:block;margin:18px 0;padding:18px;border:1px solid #d9ccb4;border-radius:10px;background:#faf5e9}
.product-first-intro{margin:0 0 18px;padding:0;border:0;background:none;color:#585f53}
body[data-page=start] .product-field{margin-top:0}
body[data-page=start] #product-options.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.product-choice>span{height:100%;box-sizing:border-box}
.product-choice em{display:block;margin:8px 0 0;color:#35443b;font-style:normal;font-weight:650;line-height:1.6}
.product-reading-order{display:block;margin:10px 0 0;padding:10px 12px;border-radius:7px;background:#f3ecdc;color:#3f392e;font-size:14px;line-height:1.6}
.product-reading-order small{display:block;margin-bottom:2px;color:#8b4a35;font-weight:800;letter-spacing:.04em}
.product-includes{display:grid;gap:2px;margin-top:9px;color:#55594e;font-size:14px;line-height:1.55}
.preview-once-note{display:block;margin-top:10px;padding-top:8px;border-top:1px solid #d8cdb8;color:#75502d;font-size:14px;font-weight:750;line-height:1.55}
.product-choice.is-used>span{background:#f3eee5;border-style:dashed}
body[data-page=start] .persona-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-page=start] .persona-option{display:block}
body[data-page=start] .persona-card{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:start;height:100%;padding:0;overflow:hidden}
body[data-page=start] .persona-card>img{align-self:start;justify-self:center;width:112px;height:112px;min-height:0;margin-top:14px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#ede3cf}
body[data-page=start] .persona-text{display:flex;flex-direction:column;align-items:flex-start;padding:14px}
body[data-page=start] .persona-text small{margin-top:3px;color:#8b4a35;font-weight:750}
.persona-story{display:block;margin-top:9px;color:#4d554e;font-size:14px;line-height:1.65}
.persona-text em{display:block;margin-top:10px;color:#254b3e;font-size:14px;font-style:normal;font-weight:700;line-height:1.55}
.persona-text b{display:block;margin-top:auto;padding-top:10px;color:#75603c;font-size:14px;line-height:1.5}

/* The calculation frame is motion-ready but the still poster is never animated as a substitute for a real clip. */
.calculation-scene{display:grid;grid-template-columns:minmax(180px,30%) minmax(0,1fr);gap:22px;align-items:center;margin:20px 0;padding:22px;border:1px solid #b8aa91;border-left:6px solid #285341;border-radius:12px;background:#f6efdf;box-shadow:0 15px 30px -26px #2c2318}
.calculation-scene[hidden]{display:none}
.calculation-scene__media{aspect-ratio:4/5;overflow:hidden;border:6px solid #76644f;border-radius:4px;background:#e7dcc7}
.calculation-scene__media :is(img,video){display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.calculation-scene h2{margin:4px 0 10px;font-size:clamp(22px,3vw,34px);line-height:1.35}
.calculation-scene p{line-height:1.7}
.calculation-scene small{color:#5b625b;font-size:14px;line-height:1.6}

/* True five-second media keeps the still as the exact layout/poster. The video is a silent,
   pointer-transparent replacement only while decoded frames are playing: no slide, glow, zoom,
   opacity transition or synthetic movement is used as a substitute. */
.true-motion-frame{position:relative;isolation:isolate;display:block;overflow:hidden}
.true-motion-frame>img{position:relative;z-index:1}
.true-motion-frame>.true-motion-video{position:absolute!important;z-index:2;inset:0;width:100%!important;height:100%!important;margin:0!important;border:0!important;border-radius:inherit;object-fit:cover;object-position:50% 20%;opacity:0!important;pointer-events:none!important;filter:none!important;transform:none!important;transition:none!important;animation:none!important}
.true-motion-frame.is-motion-playing>.true-motion-video{opacity:1!important}
.book-jacket.true-motion-frame{overflow:hidden}
.book-jacket.true-motion-frame>.true-motion-video{object-fit:contain;object-position:center}
.book-jacket.true-motion-frame>span{z-index:3;pointer-events:none}
#guides .guide,#services .book-card{transition:none!important}
#guides .guide:hover,#services .book-card:hover{transform:none!important}
body[data-page=start] .persona-card>.true-motion-frame{align-self:start;justify-self:center;width:112px;height:112px;margin-top:14px;border-radius:50%;background:#ede3cf}
body[data-page=start] .persona-card>.true-motion-frame>:is(img,video){display:block;width:100%!important;height:100%!important;min-height:0;border-radius:50%;object-fit:cover;object-position:50% 20%}
.illustrated-experience .guide-note>.true-motion-frame{width:90px;height:90px;margin:0;border:1px solid #d7c6aa;border-radius:50%;background:#ede3cf}
.illustrated-experience .guide-note>.true-motion-frame>:is(img,video){display:block;width:100%!important;height:100%!important;margin:0;border:0;border-radius:50%;object-fit:cover;object-position:50% 20%}
@media(max-width:950px){.illustrated-experience .guide-note>.true-motion-frame{width:65px;height:65px}}
@media(max-width:700px){
  body[data-page=start] .persona-card>.true-motion-frame{width:96px;height:96px;min-height:0}
  body[data-page=start] .persona-card>.true-motion-frame>:is(img,video){min-height:0}
  .illustrated-experience .guide-note>.true-motion-frame{width:80px;height:80px}
}
@media(prefers-reduced-motion:reduce){.true-motion-video{display:none!important}}

/* A page turn happens in place: the outgoing leaf rotates over the already rendered next spread. */
.reading-spreads{position:relative;perspective:1800px;transform-style:preserve-3d}
@media screen{
  /* One stable book viewport on every screen, with room for the actual answer below the opening. */
  .reading-book:has(.reading-nav) .reading-spreads{height:min(65dvh,660px);min-height:0!important;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
}
@media screen and (max-width:700px){
  .reading-book:has(.reading-nav) .reading-spreads{height:min(63dvh,620px)}
}
@media screen and (min-width:701px){
  .reading-book:has(.reading-nav) .reading-page{padding-top:24px}
  .reading-book .narrative-order li,.reading-book .narrative-order li::before{font-size:14px!important;line-height:1.3!important}
}
.reading-page-turn-leaf{position:absolute!important;z-index:5;margin:0!important;background:#fdf9f0;backface-visibility:hidden;pointer-events:none;will-change:transform;overflow:hidden;box-shadow:0 10px 24px rgba(45,36,25,.2)}
.reading-page-turn-leaf.is-forward{transform-origin:left center}
.reading-page-turn-leaf.is-backward{transform-origin:right center}
.reading-book:focus-visible{outline:3px solid #a06a37;outline-offset:5px}
.narrative-order{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none;counter-reset:story-step}
.narrative-order li{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:#eee4d1;color:#5a5142;font-size:14px;font-weight:700;line-height:1.3;counter-increment:story-step}
.narrative-order li::before{content:counter(story-step);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#285341;color:#fff;font-size:14px}
.reading-stage-label{margin:12px 0 5px!important;color:#8c542f!important;font:800 14px/1.4 PaperSans,system-ui,sans-serif!important;letter-spacing:.04em}
@media(max-width:650px){.reading-stage-label{font-size:17px!important}}
@media(max-width:700px){
  /* The book itself already presents these six stages in order. On a phone the repeated legend used 118px and pushed
     the customer's first direct answer below the fixed book viewport, so keep it for assistive technology only. */
  .narrative-order{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
  /* A two-case boundary note still leads into the boxes, but does not spend an extra blank line before the answer. */
  body[data-page=report] .reading-spread.has-cases .reading-hook{margin-bottom:4px}
  body[data-page=report] .reading-spread.has-cases .reading-aside.reading-case-lead{padding-top:3px;padding-bottom:3px;margin-bottom:4px}
  /* The question title and the first answer are already visually distinct. Keep their stage names for
     assistive technology without spending the first phone screen on two repeated labels. */
  .reading-stage-label[data-reading-stage=hook],.reading-stage-label[data-reading-stage=answer]{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
  /* Topic, guide and date are repeated by the first book immediately below. Keep the metadata in the
     accessibility tree and give the customer's first direct answer the first phone screen. */
  body[data-page=report] .report-heading.full-scene .hero-copy>p:not(.eyebrow){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
}
.locked-continuation{margin-top:18px;padding:22px;border:1px solid #bda875;border-radius:12px;background:linear-gradient(135deg,#183f35,#285341);color:#fff;box-shadow:0 18px 32px -28px #132d26}
.locked-continuation__guide{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.locked-continuation__guide img{width:64px;height:80px;border:2px solid #ead9ad;border-radius:5px;object-fit:cover;object-position:50% 20%}
.locked-continuation__guide p{margin:0!important}
.locked-continuation__guide :is(strong,span){display:block}
.locked-continuation__guide span{margin-top:3px;color:#efe6d3;font-size:14px;line-height:1.55}
.locked-continuation .eyebrow{color:#f0cf73!important}
.locked-continuation h4{margin:5px 0 10px;color:#fff;font-size:22px;line-height:1.45}
.locked-continuation>p:not(.eyebrow){color:#f2eee5}
.locked-continuation__actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 10px}
.locked-continuation__actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 16px;border-radius:5px;text-decoration:none}
.locked-continuation__actions .primary{background:#efd58f;color:#17372e}
.locked-continuation__actions .secondary{border:1px solid #d7c89f;color:#fff;background:transparent}
.locked-continuation>small{color:#d9d6cb;font-size:13px}

/* Home cards gain fictional lore and keep product choice separate from guide choice. */
.guide p.guide-story{display:block;margin:10px 0 0;color:#555c55;font-size:14px;line-height:1.65}
.guide-products{display:block;margin-top:8px;color:#84603d;font-size:14px;font-weight:750;line-height:1.5}
.pricing-grid .price-card.is-preview-compact{grid-column:1/-1;display:grid;grid-template-columns:minmax(160px,.65fr) minmax(220px,1.35fr) auto;align-items:center;gap:12px 24px}
.pricing-grid .price-card.is-preview-compact :is(.price-kicker,h3,.price-amount,.price-caption,p,ul){margin-top:0;margin-bottom:4px}
.pricing-grid .price-card.is-preview-compact .button{min-width:180px}

@media(max-width:700px){
  body[data-page=start] #product-options.product-grid,body[data-page=start] .persona-options{grid-template-columns:1fr}
  body[data-page=start] .persona-card{grid-template-columns:112px minmax(0,1fr)}
  body[data-page=start] .persona-card>img{width:96px;height:96px;min-height:0}
  .calculation-scene{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px}
  .calculation-scene__media{align-self:start}
  .calculation-scene h2{font-size:20px}
  .narrative-order{gap:4px}.narrative-order li{font-size:11px;padding:3px 6px}
  .locked-continuation{padding:18px 16px}.locked-continuation__actions{display:grid}.locked-continuation__actions a{width:100%;box-sizing:border-box;text-align:center}
  .pricing-grid .price-card.is-preview-compact{display:block}
}
@media(prefers-reduced-motion:reduce){.reading-page-turn-leaf{display:none!important}}

/* 2026-10-07: test-reading contract. Keep the answer close while making the exact customer input auditable. */
.screen-test-context{margin:10px 0 8px;border:1px solid #bcae94;border-left:5px solid #285341;border-radius:10px;background:#fffaf0;overflow:hidden}
.screen-test-context>summary{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;min-height:48px;padding:8px 14px;cursor:pointer;list-style:none;color:#1f382e}
.screen-test-context>summary::-webkit-details-marker{display:none}
.screen-test-context>summary::after{content:'입력 확인';font:700 14px/1.2 PaperSans,system-ui,sans-serif;color:#285341}
.screen-test-context[open]>summary::after{content:'접기'}
.screen-test-context>summary>span:last-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#555d53}
.screen-test-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;background:#b54035;color:#fff;font:800 14px/1 PaperSans,system-ui,sans-serif;letter-spacing:.08em}
.screen-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;border-top:1px solid #ded4c1;background:#f7f1e4}
.screen-test-grid>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px;border:1px solid #ded4c1;border-radius:8px;background:#fffdf7}
.screen-test-grid small{font-size:14px;color:#746856}
.screen-test-grid strong{font-size:17px;line-height:1.55;color:#203a30}
.screen-test-grid span{font-size:15px;line-height:1.65;color:#50594e}
.screen-test-context>a{display:inline-flex;align-items:center;min-height:44px;margin:0 14px 12px;color:#24523f;font-weight:700}
.first-page-core{margin:28px 0;padding:28px;border:1px solid #cdbfa6;border-radius:12px;background:linear-gradient(135deg,#fffdf7,#f1e9d8)}
.first-page-core .section-heading{margin:0 0 18px;text-align:left}
.first-page-core .section-heading h2{font-size:28px;line-height:1.45}
.first-page-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.first-page-evidence article{min-width:0;padding:18px;border:1px solid #d9ccb4;border-top:4px solid #285341;border-radius:8px;background:#fffdf8}
.first-page-evidence small{display:block;margin-bottom:8px;font-size:14px;color:#8a493e}
.first-page-evidence strong{display:block;font-size:18px;line-height:1.55;color:#203a30;word-break:keep-all;overflow-wrap:anywhere}
.first-page-evidence p{margin:8px 0 0;font-size:15px;line-height:1.7;color:#525b50}
.core-three-lines{display:grid;gap:8px;margin:16px 0 0;padding:16px 18px 16px 42px;border-radius:8px;background:#1f493b;color:#fff}
.core-three-lines li{font-size:17px;line-height:1.7;padding-left:4px}
.compare-test-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px;padding:10px 18px;border-radius:8px;background:#1f493b;color:#fff;text-decoration:none;font-weight:700}
@media(max-width:700px){
  .screen-test-context{margin:4px 0}
  .screen-test-context>summary{grid-template-columns:auto minmax(0,1fr) auto;min-height:44px;padding:6px 10px;gap:6px 8px}
  .screen-test-context>summary>span:last-of-type{display:none}
  .screen-test-grid{grid-template-columns:1fr;padding:10px}
  .screen-test-grid strong{font-size:17px}.screen-test-grid span{font-size:16px}
  .first-page-core{padding:20px 14px;margin:22px 0}
  .first-page-core .section-heading h2{font-size:24px}
  .first-page-evidence{grid-template-columns:1fr}
  .first-page-evidence article{padding:15px}
  .first-page-evidence p,.core-three-lines li{font-size:17px}
}
@media print{.screen-test-context{display:none!important}.first-page-core{box-shadow:none;break-inside:avoid}}

/* One product contract: five distinct customer promises, with the 990원 entry clearly recommended. */
#pricing .pricing-grid:has(.price-card[data-product]){grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
#pricing .price-card[data-product]{position:relative;display:flex;flex-direction:column;min-width:0}
#pricing .price-card[data-product] .button{margin-top:auto;min-height:48px;white-space:normal;text-align:center}
#pricing .price-card[data-product] .price-amount{font-size:34px}
#pricing .price-card[data-product] .price-caption{font-size:14px!important;line-height:1.55;color:#6c5844}
#pricing .price-card[data-product] li{word-break:keep-all;overflow-wrap:anywhere}
#pricing .price-card[data-product=quick]{border-color:#a33d34;box-shadow:0 14px 30px #6e2d211f}
.product-recommendation{display:block;margin-top:10px;padding:8px;border-radius:6px;background:#a33d34;color:#fff;font-size:14px;line-height:1.5;text-align:center}
@media(max-width:1279px){#pricing .pricing-grid:has(.price-card[data-product]){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#pricing .pricing-grid:has(.price-card[data-product]){grid-template-columns:1fr}#pricing .price-card[data-product]{min-height:0}}

/* S12 release readability: journey.css is appended after this sheet, so these customer-facing mobile values use
   !important to keep the shared 14px label/control floor. The billing notice is body copy, not metadata. */
@media(max-width:700px){
  .selection-receipt__demo span{font-size:17px!important;line-height:1.45}
  .selection-receipt__item>span{font-size:14px!important;line-height:1.4}
  .selection-receipt__actions button,.selection-receipt__actions a{font-size:14px!important;line-height:1.4}
}

/* Product-first home and character routes: four paid ranges read first; the one-time free first page is secondary. */
#pricing .pricing-grid:has(.price-card[data-product]){grid-template-columns:repeat(4,minmax(0,1fr))}
#pricing .product-reading-way{margin:14px 0 2px;padding:12px 13px;border-left:3px solid #285341;background:#f4eddf;color:#3d473f;font-size:14px;line-height:1.7}
#pricing .product-reading-way strong{display:block;margin-bottom:3px;color:#7e4934;font-size:14px}
#pricing .price-card[data-product=preview].is-preview-compact{grid-column:1/-1;display:grid;grid-template-columns:minmax(150px,.55fr) minmax(260px,1.45fr) minmax(190px,.75fr);align-items:center;gap:10px 24px}
#pricing .price-card[data-product=preview].is-preview-compact :is(.price-kicker,h3,.price-amount,.price-caption){grid-column:1}
#pricing .price-card[data-product=preview].is-preview-compact>p:not(.price-kicker):not(.price-amount):not(.price-caption),#pricing .price-card[data-product=preview].is-preview-compact>ul{grid-column:2}
#pricing .price-card[data-product=preview].is-preview-compact>.button{grid-column:3;grid-row:1/6;align-self:center;margin:0}
.guide-pick{display:block;margin-top:9px;padding-top:8px;border-top:1px solid #d8cdbb;color:#244b3e;font-size:14px;line-height:1.5}
.persona-compare-route{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.65fr) auto;align-items:center;gap:8px 18px;min-height:74px;padding:14px 16px;border:1px solid #bda875;border-radius:9px;background:#173f35;color:#fff;text-decoration:none}
.persona-compare-route strong{color:#f1d485;font-size:17px;line-height:1.5}
.persona-compare-route span{color:#e8eee9;font-size:14px;line-height:1.65}
.persona-compare-route em{color:#fff;font-size:14px;font-style:normal;font-weight:750;white-space:nowrap}
.persona-compare-route:hover,.persona-compare-route:focus-visible{color:#fff;background:#245647}
@media(max-width:1279px){#pricing .pricing-grid:has(.price-card[data-product]){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:949px) and (min-width:701px){
  #pricing .price-card[data-product=preview].is-preview-compact{grid-template-columns:minmax(105px,.55fr) minmax(0,1.45fr) minmax(145px,.75fr);gap:10px 14px}
  #pricing .price-card[data-product=preview].is-preview-compact>.button{width:100%;min-width:0}
}
@media(max-width:700px){
  #pricing .pricing-grid:has(.price-card[data-product]){grid-template-columns:1fr}
  #pricing .price-card[data-product=preview].is-preview-compact{display:flex;grid-column:auto}
  .persona-compare-route{display:block}.persona-compare-route :is(strong,span,em){display:block}.persona-compare-route span{margin:5px 0 8px}
}

/* Customer status stays a quiet note; comparison choices need a clear gap after the cover. */
.customer-status-note{margin:0 0 12px;color:#585f53;font-size:14px;line-height:1.7;font-weight:400}
.compare-page .compare-hero{margin-bottom:32px}
.compare-page .compare-hero-copy>.customer-status-note{display:block;width:auto;max-width:100%;margin:18px 0 0;padding:0;border:0;border-radius:0;background:none;color:#526056;font:400 14px/1.7 PaperSans,Pretendard,sans-serif;letter-spacing:0}
.privacy-detail-link>a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}