/* MIRAE 2.0 UI (docs/MIRAE-2.0-UI-REFERENCE-V1.md, frozen 2026-10-05). Phone first; tablet from 768px, desktop from
   1120px (the reading rail from 1280px). The cascade is layered (tokens.css declares the order): base → layout (the l-*
   primitives) → components (c-* and the shared controls, the reading's grammar) → pages (every screen, UI Reference v1
   PAGE-SPECS). The legacy layer of the Mission 7–8 rules is empty since Mission 11 (Phases C–J): every screen is on the
   primitives. Membership-owned elements are styled outside the layers, at the end. No page may add its own widths, gaps or
   colours: tokens only. */
@layer tokens, base, layout, components, pages, legacy;

@layer base{
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:120px}
body{margin:0;background:var(--page-bg);color:var(--text-secondary);font:400 var(--t-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* headings and dialogs get focus programmatically on each screen change (for screen readers); they are not controls */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
[aria-invalid=true]{border-color:var(--error)!important}
h1,h2,h3{margin:0;color:var(--text-primary);font-family:var(--font-serif);font-weight:400;letter-spacing:-.005em}
p{margin:0}
.label{display:block;margin:0 0 var(--s-3);font:700 var(--t-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.muted{color:var(--text-tertiary)}
.fine{font-size:var(--t-small);line-height:1.5;color:var(--text-tertiary)}
.hanja{font-family:var(--font-brush);font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}
}

/* ---- layout: the frame and the four layout types (UI Reference v1 §4–§5) ---- */
@layer layout{
/* the frame: one column on a phone; on a tablet one column of --main-max; on a desktop --content-max */
.l-shell{width:100%;max-width:calc(var(--content-max) + var(--page-gutter) * 2);margin:0 auto;padding:var(--page-top) var(--page-gutter) var(--space-3xl)}
.l-shell.has-tabbar{padding-bottom:calc(var(--tabbar-h) + var(--space-2xl) + var(--safe-bottom))}
.l-shell.has-actionbar{padding-bottom:calc(var(--actionbar-h) + var(--space-2xl) + var(--safe-bottom))}
/* B main + contextual sidebar · C dashboard · D article + sticky context: on phones and tablets one column, in source order */
.l-sidebar,.l-dashboard,.l-article{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--section-gap);align-items:start}
.l-main,.l-aside,.l-rail{min-width:0}
/* A editorial: the text measure (the art column joins it on a desktop) */
.l-editorial{max-width:var(--text-max)}
@media (min-width:768px){
  .l-shell{max-width:calc(var(--main-max) + var(--page-gutter) * 2)}
  .l-shell.has-tabbar{padding-bottom:var(--space-3xl)}
  .l-shell.has-actionbar{padding-bottom:calc(var(--actionbar-h) + var(--space-2xl))}
}
@media (min-width:1120px){
  .l-shell{max-width:calc(var(--content-max) + var(--page-gutter) * 2)}
  /* B: the main column and the aside beside it (sticky); either may come first in the source — Ask names its chart first */
  .l-sidebar{grid-template-columns:minmax(0,var(--main-max)) var(--aside-w);column-gap:var(--column-gap);justify-content:space-between}
  .l-sidebar>.l-main{grid-column:1;grid-row:1}
  .l-sidebar>.l-aside{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + var(--space-xl))}
  /* C: the main column and the right column; two halves (My Chart) */
  .l-dashboard{grid-template-columns:minmax(0,1fr) var(--aside-w-wide);column-gap:var(--column-gap)}
  .l-dashboard.l-halves{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* D: the article and the context column (sticky); 1120–1279: the section rail above the context */
  .l-article{grid-template-columns:minmax(0,var(--reading-max)) var(--aside-w);grid-template-rows:auto 1fr;column-gap:var(--column-gap);justify-content:space-between}
  .l-article>.l-main{grid-column:1;grid-row:1/span 2}
  .l-article>.l-rail{grid-column:2;grid-row:1}
  .l-article>.l-aside{grid-column:2;grid-row:2;position:sticky;top:calc(var(--header-h) + var(--space-lg))}
  .l-article:not(.has-rail)>.l-aside{grid-row:1/span 2}
  /* D for a document (the privacy notice): its "On this page" rail on the left, the text beside it */
  .l-article.is-doc{grid-template-columns:var(--aside-w-rail) minmax(0,var(--text-max));grid-template-rows:auto;justify-content:start}
  .l-article.is-doc>.l-rail{grid-column:1;grid-row:1;position:sticky;top:calc(var(--header-h) + var(--space-lg))}
  .l-article.is-doc>.l-main{grid-column:2;grid-row:1}
  /* A: the text measure and the art column */
  .l-editorial{display:grid;grid-template-columns:minmax(0,var(--text-max)) minmax(0,1fr);column-gap:var(--column-gap);max-width:none;align-items:start}
}
@media (min-width:1280px){
  /* D from 1280 (D-7): the section rail on the left, the article, the context column */
  .l-article.has-rail:not(.is-doc){grid-template-columns:var(--rail-w) minmax(0,var(--reading-max)) var(--aside-w-article);grid-template-rows:auto;column-gap:calc(var(--column-gap) - var(--space-md))}
  .l-article.has-rail:not(.is-doc)>.l-rail{grid-column:1;grid-row:1;position:sticky;top:calc(var(--header-h) + var(--space-lg))}
  .l-article.has-rail:not(.is-doc)>.l-main{grid-column:2;grid-row:1}
  .l-article.has-rail:not(.is-doc)>.l-aside{grid-column:3;grid-row:1}
}
}

/* ---- components: the shell (c-*) and the controls every screen shares ---- */
@layer components{
/* the app bar (ui.js Header; shell-html.mjs for the server pages). Phone: back · MIRAE (centred) · one action; from 768px:
   MIRAE · the destinations (the current one underlined) · the account item; a flow shows its step instead. */
.c-appbar{position:sticky;top:0;z-index:20;background:var(--bar-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.c-appbar-inner{display:grid;grid-template-columns:var(--tap) minmax(0,1fr) var(--tap);align-items:center;height:var(--header-h);max-width:calc(var(--content-max) + var(--page-gutter) * 2);margin:0 auto;padding:0 calc(var(--page-gutter) - var(--space-sm))}
.c-appbar-inner>*{grid-row:1}
.c-appbar-back{grid-column:1}
.c-appbar-logo{grid-column:2;justify-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 10px 0 calc(10px + .24em);font:400 19px/1 var(--font-serif);letter-spacing:.24em;color:var(--text-primary);text-decoration:none}
.c-appbar-nav{display:none}
.c-appbar-end{grid-column:3;justify-self:end;display:flex;align-items:center}
.c-appbar-btn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);cursor:pointer;text-decoration:none}
.c-appbar-btn:hover{background:var(--page-bg-deep)}
.c-appbar-step{margin-right:var(--space-sm);font:600 var(--t-small)/1 var(--font-sans);color:var(--text-tertiary);font-variant-numeric:tabular-nums}
@media (min-width:768px){
  .c-appbar{border-bottom:1px solid var(--border)}
  .c-appbar-inner{grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:var(--space-xs);padding:0 var(--page-gutter)}
  .c-appbar-back:empty,.c-appbar-phone{display:none}
  .c-appbar-logo{justify-self:start;padding-left:2px;font-size:20px}
  .c-appbar-nav{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--space-md)}
  .c-appbar-end{grid-column:4}
  .c-appbar[data-variant=app] .c-appbar-end,.c-appbar[data-variant=marketing] .c-appbar-end{display:none}
  .c-appbar-nav ul{display:flex;gap:var(--space-md);margin:0;padding:0;list-style:none}
  .c-appbar-nav svg{flex-shrink:0}
  .c-appbar-nav li a{position:relative;display:inline-flex;align-items:center;gap:var(--space-xs);height:var(--header-h);color:var(--text-tertiary);text-decoration:none;font:600 var(--type-nav)/1 var(--font-sans);white-space:nowrap}
  .c-appbar-nav li a:hover{color:var(--text-primary)}
  .c-appbar-nav li a[aria-current=page]{color:var(--text-primary)}
  .c-appbar-nav li a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:var(--space-md);height:2px;border-radius:2px;background:var(--accent)}
  .c-appbar-account{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:40px;padding:0 var(--space-md) 0 var(--space-sm);border:1px solid var(--border-strong);border-radius:var(--radius-pill);color:var(--text-primary);text-decoration:none;font:600 14px/1 var(--font-sans);white-space:nowrap}
  .c-appbar-account:hover{border-color:var(--text-tertiary)}
  .c-appbar-account[aria-current=page]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  .c-appbar-account img{width:24px;height:24px;border-radius:50%;object-fit:cover}
  /* a server page before the account answers (page.js): a neutral round control, no label that states either */
  .c-appbar-account.is-neutral{width:40px;padding:0;justify-content:center}
  .c-appbar .c-appbar-cta{width:auto;min-height:40px;padding:0 var(--space-md);font-size:14px;white-space:nowrap}
  .c-appbar[data-variant=marketing] .c-appbar-app,.c-appbar[data-variant=app] .c-appbar-links,.c-appbar[data-variant=app] .c-appbar-cta{display:none}
  /* the marketing bar is the site's: the mark and the links lead everywhere, so it has no back button (as on the landing) */
  .c-appbar[data-variant=marketing] .c-appbar-back{display:none}
}
/* the tablet keeps the items closer so the marketing bar (four links, Sign in, Start free) fits at 768 */
@media (min-width:1120px){.c-appbar-nav,.c-appbar-nav ul{gap:var(--space-lg)}}
/* the phone's tab bar; from 768px the app bar carries the destinations */
.c-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--border);padding-bottom:var(--safe-bottom);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.c-tabbar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--content-max);margin:0 auto;padding:0;list-style:none}
.c-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tabbar-h);color:var(--text-tertiary);text-decoration:none;font:600 12px/1 var(--font-sans)}
.c-tabbar a[aria-current=page]{color:var(--accent)}
.c-tabbar a[aria-current=page] svg{stroke-width:2.1}
@media (min-width:768px){.c-tabbar{display:none}}
/* the site footer (Landing, Privacy, Data deletion) */
.c-footer{border-top:1px solid var(--border)}
.c-footer-inner{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);max-width:calc(var(--content-max) + var(--page-gutter) * 2);margin:0 auto;padding:var(--space-sm) var(--page-gutter) var(--space-lg);font-size:13px;line-height:1.5;color:var(--text-tertiary)}
.c-footer a{display:inline-flex;align-items:center;min-height:32px;color:var(--text-tertiary)}
/* the head of a migrated page: progress (flows), a note, the title, the lead */
.c-pagehead{display:grid;gap:var(--space-xs);margin:0 0 var(--space-lg)}
.c-pagehead>.progress{max-width:var(--aside-w);margin:0}
.c-pagehead>.c-note{margin:var(--space-xs) 0 0}
.c-pagehead-title{margin:var(--space-xs) 0 0;font:400 var(--type-h1)/1.25 var(--font-serif);color:var(--text-primary);letter-spacing:-.005em;text-wrap:balance}
.c-pagehead-lead{max-width:56ch;font-size:var(--type-lead);line-height:1.55;color:var(--text-tertiary)}
.c-pagehead-eyebrow{margin:0}
.c-pagehead-kicker{margin:0;font-size:var(--type-lead);line-height:1.4;color:var(--text-tertiary)}
.c-pagehead-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);margin-top:var(--space-2xs);font-size:var(--type-small);line-height:1.5;color:var(--text-tertiary)}
@media (min-width:1120px){
  .c-pagehead{margin-bottom:var(--space-xl)}
  .c-pagehead-title{line-height:1.12}
}
/* a short note in the flow (a new chart keeps the one already here; an edit writes the free reading again) */
.c-note{padding:10px 14px;border-radius:var(--radius-control);background:var(--surface-tint);color:var(--text-primary);font-size:var(--type-small);line-height:1.5}
/* a bounded group: an aside card, the chart beside a reading, the account on My Chart */
.c-card{padding:var(--space-card);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 20px;border-radius:var(--radius-control);border:1px solid transparent;font:650 var(--t-body)/1.25 var(--font-sans);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{flex:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-press)}
.btn-primary:disabled{background:var(--accent-disabled);cursor:not-allowed}
.btn-secondary{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.btn-secondary:hover{background:var(--surface);border-color:var(--text-tertiary)}
.btn-text{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 2px;border:0;background:none;color:var(--accent);font:650 var(--t-body)/1.3 var(--font-sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.btn-row{display:grid;gap:var(--s-3)}
.btn[aria-busy=true]{cursor:progress;opacity:.8}

/* the calculated chart: four pillars */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.pillar{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px 8px;border:1px solid var(--border);border-radius:var(--radius-tile);background:var(--surface-muted);text-align:center}
.pillar small{font:600 11px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.pillar .hanja{font-size:28px;line-height:1.15;color:var(--text-primary);letter-spacing:.02em}
.pillar .rom{font-size:12px;line-height:1.3;color:var(--text-tertiary)}
.pillar.is-day{border-color:var(--accent);background:var(--surface)}
.pillar.is-day::after{content:"You";position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:700 10px/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.pillar.is-missing .hanja{color:var(--ink-mute)}

/* flow progress */
.progress{height:3px;margin:0 0 var(--s-2);border-radius:3px;background:var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:3px}


/* form controls */
.field{margin:0 0 var(--s-6);padding:0;border:0;min-width:0}
legend{padding:0}
.field-label{display:block;margin:0 0 var(--s-2);font:650 var(--t-body)/1.35 var(--font-sans);color:var(--text-primary)}
.field-label .opt{font-weight:500;color:var(--text-tertiary)}
.field-hint{margin:var(--s-2) 0 0;font-size:var(--t-small);line-height:1.45;color:var(--text-tertiary)}
.field-error{margin:var(--s-2) 0 0;font-size:var(--t-small);line-height:1.45;color:var(--error);font-weight:600}
.field-error:empty{display:none}
.row-3{display:grid;grid-template-columns:1.25fr .8fr 1fr;gap:8px}
.row-time{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.input-num{font-variant-numeric:tabular-nums}
.select,.input,.textarea{display:block;width:100%;min-height:var(--tap);padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-tile);background:var(--surface);color:var(--text-primary);font-size:16px;line-height:1.3}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356625D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.select:disabled,.input:disabled{opacity:.55}
.textarea{min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.select:focus,.input:focus,.textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--focus-ring)}
.count{display:block;margin-top:6px;text-align:right;font-size:var(--t-label);color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;border:1px solid var(--border-strong);border-radius:var(--radius-tile);background:var(--surface)}
.seg label{position:relative;display:grid;place-items:center;min-width:52px;min-height:44px;padding:0 12px;border-radius:7px;font:600 15px/1 var(--font-sans);color:var(--text-tertiary);cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label.is-checked{background:var(--accent);color:var(--on-accent)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.seg.wide{display:grid;width:100%}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-tile);background:var(--surface);cursor:pointer;font-size:15px;line-height:1.3;color:var(--text-primary)}
.choice input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
.choice.is-checked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sheet-actions{margin-top:var(--s-5)}
.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);margin-top:var(--s-1);font-size:15px;color:var(--text-secondary);cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
.confirm{margin:var(--s-2) 0 0;font-size:var(--t-small);font-weight:600;color:var(--success)}
.confirm:empty{display:none}
.city-box{position:relative}
.city-box .input{padding-left:42px}
.city-box>svg{position:absolute;left:14px;top:14px;color:var(--text-tertiary);pointer-events:none}
.city-list{margin:6px 0 0;padding:4px;list-style:none;border:1px solid var(--border-strong);border-radius:var(--radius-tile);background:var(--surface);box-shadow:var(--shadow-card);max-height:260px;overflow:auto}
.city-list button{display:block;width:100%;min-height:var(--tap);padding:10px 12px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;line-height:1.35}
.city-list button:hover,.city-list button:focus-visible{background:var(--surface-tint)}
/* sticky actions on long entry screens (phone and tablet): the next step stays in reach while the page scrolls */
.actionbar{position:sticky;bottom:0;z-index:15;display:grid;gap:2px;margin:var(--s-4) calc(var(--page-gutter) * -1) 0;padding:var(--s-3) var(--page-gutter) calc(var(--s-2) + var(--safe-bottom));background:linear-gradient(to bottom,transparent,var(--page-bg) 18px)}
.actionbar .center-row{margin-top:0}
/* the privacy notice of the birth form */
.privacy{display:grid;grid-template-columns:20px 1fr;gap:10px;margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--radius-control);background:var(--page-bg-deep);font-size:var(--t-small);line-height:1.5;color:var(--text-secondary)}
.privacy svg{margin-top:2px;color:var(--accent)}
.privacy b{color:var(--text-primary)}

/* sheet (dialog), notices, feedback */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.sheet{width:100%;max-width:var(--content);max-height:88svh;overflow:auto;padding:var(--s-3) var(--page-gutter) calc(var(--s-6) + var(--safe-bottom));border-radius:22px 22px 0 0;background:var(--page-bg);box-shadow:var(--shadow-sheet)}
.sheet-grip{width:40px;height:4px;margin:0 auto var(--s-3);border-radius:2px;background:var(--border-strong)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-3)}
.sheet-head h2{font-size:22px;line-height:1.3}
.sheet p+p{margin-top:var(--s-3)}
.notice{padding:var(--s-4);border-radius:var(--radius-control);background:var(--surface);border:1px solid var(--border);font-size:15px;line-height:1.55}
.notice dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:var(--s-3) 0 0;font-size:13px}
.notice dt{color:var(--text-tertiary)}
.notice dd{margin:0;color:var(--text-primary);overflow-wrap:anywhere}
.error-box{margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--radius-control);background:var(--error-bg);color:var(--error);font-size:15px;line-height:1.5}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite;vertical-align:-3px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px + var(--safe-bottom));z-index:60;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border-radius:var(--radius-pill);background:var(--text-primary);color:var(--page-bg);font-size:var(--t-small);box-shadow:var(--shadow-card)}
.center{text-align:center}
.center-row{display:flex;justify-content:center;margin-top:var(--s-3)}
.after{margin-top:var(--s-5)}
.boot-error{max-width:var(--content);margin:var(--s-8) auto;padding:0 var(--page-gutter)}
@media (min-width:768px){
  .sheet-wrap{align-items:center}
  .sheet{max-width:520px;border-radius:22px;padding-bottom:var(--s-6)}
  .sheet-grip{display:none}
  .toast{bottom:32px}
}

/* ---- the chart this browser keeps access to, its readings, and the shared blocks of the app screens (UI Reference v1 §7) ---- */
/* status chip: where a chart is kept, which chart is current, what a reading is doing */
.c-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface-tint);color:var(--accent);font:700 12px/1.3 var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.c-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-chip.is-current{background:var(--accent);color:var(--on-accent)}
.c-chip.is-earlier{background:var(--surface-muted);color:var(--text-tertiary);box-shadow:inset 0 0 0 1px var(--border)}
.c-chip.is-status{background:var(--gold-soft);color:var(--label)}
/* chart card: nature image · name · pillars in hanja · chip; links under it */
.c-chart-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-sm) var(--space-md);align-items:center}
.c-chart-card-img{display:block;width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--surface-muted)}
.c-chart-card-text{display:grid;gap:4px;justify-items:start;min-width:0}
.c-chart-card-label{margin:0;font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.c-chart-card-name{margin:0;font:400 21px/1.25 var(--font-serif);color:var(--text-primary)}
.c-chart-card-meta{margin:0;color:var(--text-secondary)}
.c-chart-card-meta .hanja{font-size:18px;letter-spacing:.08em}
.c-chart-card>.c-links{grid-column:1/-1}
.c-chart-card.is-compact{grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-sm)}
.c-chart-card.is-compact .c-chart-card-img{width:40px;height:40px;border-radius:10px}
.c-chart-card.is-compact .c-chart-card-name{font-size:18px}
.c-chart-card.is-compact .c-chart-card-meta .hanja{font-size:15px;letter-spacing:.04em}
.c-chart-card-text .c-chip{max-width:100%;white-space:normal}
/* the core nature: the nature image large, its words, the day master */
.c-nature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);align-items:center;color:inherit;text-decoration:none}
.c-nature-img{display:block;width:96px;height:96px;border-radius:var(--radius-card);object-fit:cover;background:var(--surface-muted)}
.c-nature.is-lg .c-nature-img{width:132px;height:132px;border-radius:20px}
.c-nature-text{display:grid;gap:var(--space-xs);justify-items:start;min-width:0}
.c-nature-text .label{margin:0}
.c-nature-words{margin:0;font:400 var(--type-h2)/1.22 var(--font-serif);color:var(--text-primary)}
.c-nature.is-lg .c-nature-words{font-size:25px}
.c-nature-words span{display:block}
.c-nature-dm{margin:0;font-size:var(--type-small);line-height:1.5;color:var(--text-tertiary)}
.c-nature-dm .hanja{font-size:16px;color:var(--text-secondary)}
.c-nature-note{margin:0;font:400 var(--type-lead)/1.45 var(--font-serif);color:var(--text-secondary)}
a.c-nature:hover .c-nature-words{color:var(--accent)}
/* navigation-like actions: text links in a row */
.c-links{display:flex;flex-wrap:wrap;gap:0 var(--space-lg);margin:0}
.c-links a{display:inline-flex;align-items:center;min-height:44px;font:650 15px/1.3 var(--font-sans);color:var(--accent)}
/* label and value rows */
.c-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm) var(--space-lg);margin:0;font-size:var(--type-small);line-height:1.5}
.c-facts dt{font-weight:650;color:var(--text-primary)}
.c-facts dd{margin:0;color:var(--text-secondary);overflow-wrap:anywhere}
/* nothing here yet: one sentence and at most one action */
.c-empty{display:grid;gap:var(--space-md);justify-items:center;padding:var(--space-lg) var(--space-md);border:1px dashed var(--border-strong);border-radius:var(--radius-card);text-align:center;color:var(--text-tertiary)}
.c-empty .btn{max-width:var(--aside-w)}
.c-card>.label,.c-card>section>.label{margin:0}
.c-card{display:grid;gap:var(--space-md);align-content:start}
.c-card-text{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary)}
.c-loading{display:flex;align-items:center;gap:var(--space-xs)}
/* the readings, in one bordered list: date · title · type · chart · status · chevron */
.c-reading-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);overflow:hidden}
.c-reading-list>li+li{border-top:1px solid var(--border)}
.c-reading-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2xs) var(--space-md);align-items:center;padding:var(--space-md);color:inherit;text-decoration:none}
.c-reading-row:hover{background:var(--surface-muted)}
.c-reading-row:hover .c-reading-title{color:var(--accent)}
.c-reading-row>svg{color:var(--text-tertiary)}
.c-reading-date{align-self:start;min-width:52px;padding-top:2px;font:600 13px/1.6 var(--font-sans);color:var(--text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-reading-main{display:grid;gap:var(--space-2xs);min-width:0}
.c-reading-title{font:400 17px/1.4 var(--font-serif);color:var(--text-primary);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c-reading-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-sm);font:650 13px/1.4 var(--font-sans)}
.c-reading-type{color:var(--accent)}
.c-reading-type.is-paid{color:var(--paid)}
.c-reading-chart{font-weight:500;color:var(--text-tertiary)}
.c-reading-list.is-compact .c-reading-row{padding:var(--space-sm) var(--space-md)}
.c-reading-list.is-compact .c-reading-title{font-size:16px;-webkit-line-clamp:2}
/* a paid product's line: name · price · scope */
.c-price-line{margin:0;font-size:15px;line-height:1.5;color:var(--text-tertiary)}
.c-price-line strong{color:var(--text-primary);font-weight:700}
/* the promo card: once per screen at most (Home's next question) */
.c-promo{display:grid;gap:var(--space-sm);margin:0 calc(var(--page-gutter) * -1);padding:var(--space-xl) var(--page-gutter);background:radial-gradient(120% 80% at 50% 0%,var(--wash),transparent 70%),var(--page-bg-deep)}
.c-promo .label{margin:0}
.c-promo-title{margin:0;font:400 26px/1.25 var(--font-serif);color:var(--text-primary)}
.c-promo-text{margin:0 0 var(--space-xs);font-size:16px;line-height:1.6;color:var(--text-secondary)}
.c-promo .c-price-line{text-align:center}
/* one area of My Saju */
.c-saju-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);align-items:center;width:100%;min-height:72px;padding:var(--space-md);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);text-align:left;cursor:pointer;color:inherit}
.c-saju-card:hover{border-color:var(--border-strong)}
.c-saju-card:hover b{color:var(--accent)}
.c-saju-card>svg{color:var(--text-tertiary)}
.c-saju-card-text{display:grid;gap:3px;min-width:0}
.c-saju-card-text b{font:400 19px/1.3 var(--font-serif);color:var(--text-primary)}
.c-saju-card-text small{font-size:14px;line-height:1.4;color:var(--text-tertiary)}
/* underline tabs */
.c-tabs{display:flex;gap:var(--space-lg);margin:0 0 var(--space-lg);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.c-tab{position:relative;flex:none;min-height:var(--tap);padding:0 2px;border:0;background:none;color:var(--text-tertiary);font:650 15px/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.c-tab:hover,.c-tab[aria-selected=true]{color:var(--text-primary)}
.c-tab[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
/* the section rail of a reading or a document: hidden on phones and tablets unless a page sets it out (the reading strip) */
.c-section-rail{display:none}
.c-section-rail ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.c-section-rail-title{margin:0 0 var(--space-xs);font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.c-section-rail-item,.c-section-rail a{display:block;width:100%;padding:7px 10px;border:0;border-left:2px solid transparent;border-radius:0 8px 8px 0;background:none;text-align:left;font:500 14px/1.35 var(--font-sans);color:var(--text-secondary);text-decoration:none;cursor:pointer}
.c-section-rail-item:hover,.c-section-rail a:hover{background:var(--surface-tint);color:var(--text-primary)}
.c-section-rail [aria-current=true]{border-left-color:var(--accent);color:var(--text-primary);font-weight:650}
@media (min-width:1120px){.c-section-rail{display:block}}
/* the action bar of a purchase step, fixed to the bottom (elevation 2) */
.c-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:var(--space-sm) var(--page-gutter) calc(var(--space-sm) + var(--safe-bottom));background:var(--bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-float);border-top:1px solid var(--border)}
.c-actionbar-inner{display:grid;gap:6px;max-width:var(--main-max);margin:0 auto}
.c-actionbar .trust{margin:0}
/* the ink-wash landscape beside an editorial page (About, Account): decorative, desktop only */
.c-art{display:none}
.c-icon-btn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);cursor:pointer;text-decoration:none}
.c-icon-btn:hover{background:var(--page-bg-deep)}
@media (min-width:768px){
  .c-facts{font-size:var(--type-body)}
  .c-promo{margin:0;padding:var(--space-xl);border-radius:var(--radius-card)}
  .c-reading-row{padding:var(--space-md) var(--space-lg);column-gap:var(--space-lg)}
  .c-reading-date{min-width:64px}
  .c-reading-title{font-size:18px}
}
@media (min-width:1120px){
  .c-nature-img{width:120px;height:120px}
  .c-nature.is-lg{gap:var(--space-xl)}
  .c-nature.is-lg .c-nature-img{width:184px;height:184px}
  .c-nature.is-lg .c-nature-words{font-size:34px}
  .c-actionbar-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-lg);max-width:var(--content-max)}
  .c-actionbar-inner .btn{width:auto;min-width:340px;order:2}
  .c-actionbar-inner .trust{order:1;text-align:left}
  .c-art{display:block;align-self:stretch;min-height:520px;overflow:hidden;border-radius:var(--radius-card)}
  .c-art img{width:100%;height:100%;object-fit:cover;object-position:right 35%;-webkit-mask-image:linear-gradient(to right,transparent 0,black 40%);mask-image:linear-gradient(to right,transparent 0,black 40%)}
}
@media (max-width:370px){.c-nature.is-lg .c-nature-img{width:112px;height:112px}.c-nature.is-lg .c-nature-words{font-size:23px}}

/* ---- the reading's grammar (free reading, Full Reading, Additional Question, earlier MIRAE, safety): one editorial page —
   large insight, whitespace, explanation, small evidence — not a stack of cards ---- */
.ink{width:72px;height:2px;margin:var(--space-2xl) 0;border-radius:2px;background:linear-gradient(90deg,var(--text-primary) 0,color-mix(in srgb,var(--text-primary) 55%,transparent) 45%,transparent 100%)}
.rd-hero{padding-top:var(--space-sm)}
.rd-chip{margin:0 0 var(--space-md);font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--topic)}
.rd-headline{margin:0;font:400 31px/1.24 var(--font-serif);letter-spacing:-.01em;color:var(--text-primary);text-wrap:balance}
.rd-words{margin:var(--space-card) 0 0;font:600 14px/1.5 var(--font-sans);letter-spacing:.04em;color:var(--text-tertiary)}
.rd-basis{margin:var(--space-md) 0 0;max-width:34em;font-size:var(--type-small);line-height:1.55;color:var(--text-tertiary)}
.rd-sec{margin:0 0 var(--space-3xl)}
.rd-body{margin:0 0 var(--space-md);font-size:var(--type-reading);line-height:1.72;color:var(--text-secondary)}
.rd-body:last-child{margin-bottom:0}
.rd-lead{margin:0 0 var(--space-card);font:400 23px/1.42 var(--font-serif);color:var(--text-primary)}
.rd-came{margin:0;font:400 24px/1.3 var(--font-serif);color:var(--text-primary)}
.rd-now-insight{margin:var(--space-lg) 0 var(--space-sm);font:400 21px/1.45 var(--font-serif);color:var(--text-primary)}
.rd-now-insight.muted{color:var(--text-tertiary);font-size:18px}
.rd-now-insight.long{font-size:18px;line-height:1.5}
.rd-reflect{margin:0 calc(var(--page-gutter) * -1) var(--space-2xl);padding:var(--space-3xl) var(--page-gutter);text-align:center;background:radial-gradient(120% 80% at 50% 0%,var(--wash),transparent 70%),var(--page-bg-deep)}
.rd-reflect p{max-width:26ch;margin:0 auto;font:italic 400 25px/1.38 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.rd-reflect .rd-perspective{max-width:none;font:400 19px/1.6 var(--font-serif);text-align:left;text-wrap:pretty}
.rd-evidence{margin:0 0 var(--space-lg)}
.rd-foot{margin:0 0 var(--space-2xl);text-align:center;font-size:var(--type-small);line-height:1.55;color:var(--text-tertiary)}
.rd-end{display:grid;gap:var(--space-sm);margin-top:var(--space-xl)}
.points{list-style:none;margin:0;padding:0}
.points li{display:grid;grid-template-columns:40px 1fr;gap:4px;padding:var(--space-md) 0;border-top:1px solid var(--border)}
.points li:first-child{border-top:0;padding-top:0}
.points-n{font:400 15px/1.75 var(--font-serif);color:var(--gold);font-variant-numeric:tabular-nums}
.points p{margin:0;font-size:var(--type-reading);line-height:1.62;color:var(--text-primary)}
.points b{display:block;font:600 17px/1.4 var(--font-sans);color:var(--text-primary)}
.points li div p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--text-tertiary)}
.quote{margin:0;padding:0}
.quote-mark{display:block;height:36px;font:400 64px/1 var(--font-serif);color:var(--sun)}
.quote p{margin:0;font:italic 400 26px/1.34 var(--font-serif);color:var(--text-primary);overflow-wrap:anywhere;text-wrap:balance}
.quote.quote-md p{font-size:21px;line-height:1.42}
.quote.quote-sm p{font-size:18px;line-height:1.55;text-wrap:pretty}
/* Past → Now → Next */
.tlb ol{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;margin:0;padding:22px 0 0;list-style:none;text-align:center}
.tlb ol::before{content:"";position:absolute;top:29px;left:16%;right:16%;height:1px;background:var(--border-strong)}
.tlb li{position:relative;padding-top:20px;min-width:0}
.tlb li::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--page-bg);border:1.5px solid var(--border-strong)}
.tlb li.is-now::before{width:20px;height:20px;margin-left:-10px;top:-4px;background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--surface-tint)}
.tlb small{display:block;font:700 11px/1.3 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
.tlb li.is-now small{color:var(--accent)}
.tlb .hanja{display:block;margin-top:6px;font-size:22px;line-height:1.2;color:var(--text-tertiary)}
.tlb li.is-now .hanja{font-size:30px;color:var(--text-primary)}
.tlb-rom,.tlb-age{display:block;font-size:12px;line-height:1.45;color:var(--text-tertiary)}
.tlb li.is-now .tlb-age{color:var(--text-secondary);font-weight:600}
.tlb-year{margin:var(--space-md) 0 0;text-align:center;font-size:14px;line-height:1.5;color:var(--text-tertiary)}
.tlb-year .hanja{display:inline;margin:0;font-size:16px;color:var(--text-secondary)}
.tlb-lg li .hanja{font-size:24px}
.tlb-lg li.is-now .hanja{font-size:36px}
/* a quiet resting point between long sections */
.rest{height:112px;margin:var(--space-xs) calc(var(--page-gutter) * -1) 0;overflow:hidden}
.rest img{width:100%;height:100%;object-fit:cover;object-position:50% 92%;opacity:.9;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 45%,black 65%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black 45%,black 65%,transparent 100%)}
/* the evidence: quiet accordions */
.acc{margin:0 0 var(--space-sm);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:56px;padding:0 var(--space-md);cursor:pointer;list-style:none;font:650 var(--t-body)/1.35 var(--font-sans);color:var(--text-primary)}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{transition:transform .2s;color:var(--text-tertiary);flex:none}
.acc[open] summary svg{transform:rotate(45deg)}
.acc-body{padding:0 var(--space-md) var(--space-md)}
.acc.quiet{margin:0;border:0;border-top:1px solid var(--border);border-radius:0;background:none}
.acc.quiet:last-child{border-bottom:1px solid var(--border)}
.acc.quiet summary{padding:0}
.acc.quiet .acc-body{padding:0 0 var(--space-card)}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
.why-list b{display:block;font-weight:650;color:var(--text-primary);line-height:1.4}
.why-list span{display:block;font-size:var(--type-small);line-height:1.5;color:var(--text-tertiary)}
.dm{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;margin:var(--space-md) 0}
.dm img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--surface-muted)}
.dm b{display:block;color:var(--text-primary);font-weight:650}
.dm span{display:block;font-size:var(--type-small);line-height:1.45;color:var(--text-tertiary)}
.dm b .hanja{display:inline;font-size:inherit;color:inherit}
.bars{display:grid;gap:6px;margin:var(--space-sm) 0 0;padding:0;list-style:none}
.bars li{display:grid;grid-template-columns:52px 1fr 18px;gap:8px;align-items:center;font-size:13px;color:var(--text-secondary)}
.bars i{display:block;height:8px;border-radius:4px;background:var(--border)}
.bars i b{display:block;height:100%;border-radius:4px;background:var(--accent)}
.bars em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.chart-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:var(--space-md) 0 0;font-size:var(--type-small);line-height:1.45}
.chart-dl dt{font-weight:650;color:var(--text-primary)}
.chart-dl dd{margin:0;color:var(--text-secondary)}
.basis-note{margin-top:var(--space-sm);font-size:13px;line-height:1.5;color:var(--text-tertiary)}
.stand-in{margin:var(--space-md) 0 0;padding:10px 12px;border:1px dashed var(--sun);border-radius:var(--radius-tile);background:var(--sun-soft);font-size:13px;line-height:1.45;color:var(--stand-in-ink)}
/* the free reading → the Full Reading: the reading continues */
.tr{margin:0;padding-top:var(--space-2xl);border-top:1px solid var(--border)}
.tr-title{margin:0;font:400 26px/1.3 var(--font-serif);color:var(--text-primary)}
.tr-thread{margin:var(--space-card) 0 0;padding-left:var(--space-md);border-left:2px solid var(--sun)}
.tr-thread-title{margin:0;font:italic 400 24px/1.35 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.tr-thread-detail{margin:var(--space-xs) 0 0;font-size:16px;line-height:1.6;color:var(--text-secondary)}
.tr-more{margin-top:var(--space-2xl)}
.tr-source{margin:var(--space-sm) 0 0;font-size:13px;color:var(--text-tertiary)}
.tr-note{margin:var(--space-xl) 0 var(--space-card);font-size:16px;line-height:1.62;color:var(--text-secondary)}
.tr .points{margin-bottom:var(--space-lg)}
.trust{margin:var(--space-xs) 0 0;text-align:center;font-size:var(--type-small);color:var(--text-tertiary)}
.tr-alt{margin:var(--space-card) 0 0;text-align:center;font-size:15px;line-height:1.5;color:var(--text-secondary)}
.tr-alt a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--accent)}
/* the Full Reading's path, the threads it starts from, what an Additional Question reads through */
.path{position:relative;list-style:none;margin:0;padding:0 0 0 26px}
.path::before{content:"";position:absolute;left:5px;top:12px;bottom:14px;width:1px;background:var(--border-strong)}
.path li{position:relative;padding:0 0 var(--space-card)}
.path li:last-child{padding-bottom:0}
.path li::before{content:"";position:absolute;left:-26px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--page-bg);border:1.5px solid var(--accent)}
.path b{display:block;font:600 17px/1.4 var(--font-sans);color:var(--text-primary)}
.path p{margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--text-tertiary)}
.path li.is-off b{color:var(--text-tertiary)}
.path li.is-off::before{border-color:var(--border-strong)}
.path li.is-off p{font-style:italic}
.threads{list-style:none;margin:0;padding:0}
.threads li{padding:var(--space-sm) 0;border-top:1px solid var(--border);font:italic 400 19px/1.4 var(--font-serif);color:var(--text-primary)}
.threads li:first-child{border-top:0;padding-top:0}
.includes{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);overflow:hidden}
.includes li{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:14px var(--space-md);border-top:1px solid var(--border)}
.includes li:first-child{border-top:0}
.includes li>span{font:700 12px/22px var(--font-sans);color:var(--gold);font-variant-numeric:tabular-nums}
.includes b{display:block;color:var(--text-primary);font-weight:650;line-height:1.35}
.includes p{margin-top:2px;font-size:var(--type-small);line-height:1.5;color:var(--text-tertiary)}
/* the paid answer */
.ddr-hero .quote{margin-top:var(--space-card)}
.ddr-continuity{margin:var(--space-card) 0 0;font-size:16px;line-height:1.6;color:var(--text-tertiary)}
.ddr-tension{margin:0 0 var(--space-card);font:400 26px/1.32 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.ddr-evidence{margin:var(--space-md) 0 0;font-size:13px;line-height:1.55;color:var(--text-tertiary)}
.ddr-evidence span{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:var(--gold)}
.ddr-options{list-style:none;margin:0;padding:0}
.ddr-option{padding:var(--space-lg) 0;border-top:1px solid var(--border)}
.ddr-option:first-child{border-top:0;padding-top:0}
.ddr-option-n{margin:0;font:700 11px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.ddr-option-label{margin:var(--space-2xs) 0 var(--space-md);font:400 26px/1.25 var(--font-serif);color:var(--text-primary)}
.ddr-group{margin:var(--space-md) 0 0}
.ddr-group-t{margin:0 0 var(--space-2xs);font:700 11px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ddr-group ul{margin:0;padding:0 0 0 18px}
.ddr-group li{font-size:16px;line-height:1.55;color:var(--text-secondary)}
.ddr-group li+li{margin-top:4px}
.ddr-distinction{margin:var(--space-lg) 0 0;padding:var(--space-card) 0 0 var(--space-md);border-left:2px solid var(--sun)}
.ddr-distinction p:last-child{margin:0;font:italic 400 21px/1.42 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.ddr-part{margin:0 0 var(--space-lg)}
.ddr-part:last-child{margin-bottom:0}
.ddr-part-t{margin:var(--space-card) 0 var(--space-xs);font:400 21px/1.3 var(--font-serif);color:var(--text-primary)}
.ddr-part .ddr-part-t{margin-top:0}
.ddr-limits{margin:0;padding:0 0 0 18px}
.ddr-limits li{font-size:15px;line-height:1.55;color:var(--text-secondary)}
.ddr-limits li+li{margin-top:var(--space-xs)}
.ddr-sim{margin:var(--space-md) 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--text-tertiary)}
/* the evidence bridges, and the Saju infographic (four pillars, the day master set apart, the five elements) */
.qf-bridges{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-lg)}
.qf-bridge{padding-left:var(--space-md);border-left:2px solid var(--gold-soft)}
.qf-marker{margin:0 0 var(--space-xs);font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.45;color:var(--gold)}
.qf-implication{margin:0;font:400 17px/1.5 var(--font-serif);color:var(--text-primary)}
.saju-strip{display:grid;gap:var(--space-sm)}
.saju-strip .pillars{margin:0}
.strip-dm{margin:0;font-size:14px;color:var(--text-primary)}
.strip-el .fine{margin:0 0 var(--space-xs)}
.strip-el .bars li{grid-template-columns:84px 1fr 18px}
.safety-now{font-size:19px}
/* the steps of the building and writing screens */
.ld-steps{list-style:none;margin:0 0 var(--space-lg);padding:0;display:grid;gap:var(--space-md)}
.ld-step{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.ld-step b{display:block;font:600 var(--t-body)/1.4 var(--font-sans);color:var(--text-tertiary)}
.ld-step small{display:block;margin-top:2px;font-size:var(--type-small);color:var(--text-tertiary)}
.ld-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;color:var(--on-accent)}
.ld-step[data-state=done] .ld-dot{border-color:var(--accent);background:var(--accent)}
.ld-step[data-state=done] b,.ld-step[data-state=active] b{color:var(--text-primary)}
.ld-step[data-state=active] .ld-dot{border-color:var(--border-strong);border-top-color:var(--accent);animation:spin .9s linear infinite}
/* Korean readings (a question asked in Korean): words stay whole at line ends, as Korean typesetting expects */
.rd-article p,.rd-article li,.rd-article h1,.rd-article h3,.quote p,.ld-step b{word-break:keep-all;overflow-wrap:break-word}
@media (min-width:768px){
  .rd-headline{font-size:36px}
  .rd-lead{font-size:25px}
  .rd-reflect{margin-left:0;margin-right:0;border-radius:var(--radius-card)}
  .rest{margin-left:0;margin-right:0}
}
@media (min-width:1120px){
  .rd-headline{font-size:42px}
  .quote p{font-size:28px}
}
@media (max-width:370px){.ddr-tension{font-size:24px}.ddr-option-label{font-size:24px}.rd-headline{font-size:28px}.quote p{font-size:24px}.rd-reflect p{font-size:23px}.rd-lead{font-size:21px}}
}

/* ---- pages: every screen (PAGE-SPECS v1): Landing, Intent, Birth details (Phase B); notices, the building and writing
   screens, a reading, the Full Reading offer, Home, My Chart, Readings, Ask, Account, About, Contact, the privacy notice and
   data deletion, the earlier MIRAE reader (Phases C–J) ---- */
@layer pages{
/* Landing (/; markup in assets.mjs, state in app.js applyLanding). Phone: the two-screen landing as before. Tablet: the
   painting behind the right side, the words and actions on the left, the four inclusions under them. Desktop: the
   marketing page in the 1180 frame; the second screen becomes "How it works" beside the example. */
.lp{display:block}
.lp-hero{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h));max-height:860px;overflow:hidden;padding:var(--s-5) var(--page-gutter) 0}
.lp-hero-art{position:absolute;inset:auto 0 0 0;height:66%;z-index:0;pointer-events:none}
.lp-hero-art picture{display:block;width:100%;height:100%}
.lp-hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 52px);mask-image:linear-gradient(to bottom,transparent 0,black 52px)}
.lp-frame{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;width:100%;max-width:var(--content);margin:0 auto}
.lp-welcome{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);border-radius:var(--radius-control);background:var(--surface-tint);color:var(--text-primary);font-size:var(--t-small)}
.lp-welcome a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);font-weight:700}
.lp-eyebrow{margin:0 0 var(--s-4);font:700 var(--t-label)/1.4 var(--font-sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--label)}
.lp-copy h1{font-size:var(--type-display);line-height:var(--lh-tight);max-width:13ch}
.lp-sub{margin-top:var(--s-4);max-width:30ch;font-size:var(--t-lead);line-height:1.5;color:var(--text-secondary)}
.lp-disclose{margin-top:var(--s-3);font-size:var(--t-small);color:var(--text-tertiary)}
.lp-actions{display:grid;gap:var(--s-3);margin-top:auto;padding:56px var(--page-gutter) var(--s-5);margin-inline:calc(var(--page-gutter) * -1);background:linear-gradient(to bottom,transparent 0,var(--veil) 46px,color-mix(in srgb,var(--page-bg) 95%,transparent) 100%)}
.lp-actions .btn-secondary{background:color-mix(in srgb,var(--surface) 82%,transparent)}
.lp-example-link{justify-self:center;display:inline-flex;align-items:center;min-height:40px;font:650 15px/1.3 var(--font-sans);color:var(--accent);text-underline-offset:4px}
.lp-micro{margin-top:var(--s-1);text-align:center;font-size:var(--t-small);line-height:1.5;color:var(--text-tertiary)}
.lp-micro span{display:block}
.lp-hero[data-variant=chart] .lp-cta-question{order:2}
.lp-hero[data-variant=chart] .lp-cta-explore{order:1}
.lp-features{display:none}
.lp-preview{max-width:var(--content);margin:0 auto;padding:var(--s-7) var(--page-gutter) var(--s-4);scroll-margin-top:var(--header-h)}
.lp-preview h2{font-size:var(--t-h2);line-height:1.25;max-width:16ch}
.lp-example{margin:var(--s-4) 0 var(--s-5);padding:var(--s-4) var(--s-4) 14px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);scroll-margin-top:calc(var(--header-h) + var(--space-lg))}
.lp-example-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-3)}
.lp-example-head b{font:700 var(--t-label)/1.4 var(--font-sans);letter-spacing:var(--track-label);color:var(--text-primary)}
.lp-example-head span{font-size:var(--t-label);color:var(--text-tertiary)}
.lp-example .pillars{margin:0 0 var(--s-4)}
.lp-example dl{margin:0;display:grid;gap:var(--s-3)}
.lp-example dt{font:700 var(--t-label)/1.4 var(--font-sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--label)}
.lp-example dd{margin:2px 0 0;color:var(--text-primary);font-size:15px;line-height:1.5}
.lp-example dd.words{font:400 17px/1.4 var(--font-serif)}
.lp-includes-title{font:700 var(--t-body)/1.4 var(--font-sans);color:var(--text-primary);margin-bottom:var(--s-2)}
.checklist{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;font-size:15px;line-height:1.4}
.checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--text-secondary)}
.checklist svg{flex:none;margin-top:2px;color:var(--accent)}
.lp-steps{display:none}
@media (min-width:768px){
  .lp-hero{display:grid;align-content:center;min-height:min(700px,calc(100svh - var(--header-h)));max-height:none;padding:var(--space-2xl) var(--page-gutter)}
  .lp-hero-art{inset:0;height:auto}
  .lp-hero-art img{object-position:right 30%;-webkit-mask-image:linear-gradient(to right,transparent 22%,black 58%);mask-image:linear-gradient(to right,transparent 22%,black 58%)}
  .lp-frame{display:grid;gap:var(--space-xl);max-width:var(--content-max)}
  .lp-copy,.lp-actions{max-width:var(--hero-copy-max)}
  .lp-actions{margin:0;padding:0;background:none}
  .lp-actions .btn-secondary{background:var(--surface)}
  .lp-example-link{justify-self:start}
  .lp-micro{text-align:left}
  .lp-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--space-lg);margin:0;padding:var(--space-lg);list-style:none;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--veil)}
  .lp-features li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-sm);align-items:start;align-content:start}
  .lp-features svg{grid-row:1/span 2;margin-top:2px;color:var(--accent)}
  .lp-features b{font:650 15px/1.35 var(--font-sans);color:var(--text-primary)}
  .lp-features span{font-size:var(--t-small);line-height:1.45;color:var(--text-tertiary)}
  .lp-preview{max-width:calc(var(--main-max) + var(--page-gutter) * 2);padding-block:var(--space-3xl) var(--space-2xl)}
}
@media (min-width:1120px){
  .lp-hero{min-height:min(760px,calc(100svh - var(--header-h)));padding:var(--space-3xl) var(--page-gutter) var(--space-2xl)}
  .lp-frame{grid-template-columns:minmax(0,var(--hero-copy-max)) minmax(0,1fr);column-gap:var(--column-gap);row-gap:var(--space-xl)}
  .lp-copy,.lp-actions{grid-column:1}
  .lp-features{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title ex" "steps ex" "cta ex" "micro ex";column-gap:var(--column-gap);align-items:start;max-width:calc(var(--content-max) + var(--page-gutter) * 2);padding-block:var(--space-4xl)}
  .lp-preview h2{grid-area:title;font-size:var(--type-h1);max-width:14ch}
  .lp-example{grid-area:ex;margin:0}
  .lp-includes-title,.lp-preview .checklist{display:none}
  .lp-steps{grid-area:steps;display:block;margin:var(--space-xl) 0 var(--space-lg)}
  .lp-steps ol{display:grid;gap:var(--space-md);margin:var(--space-sm) 0 0;padding:0;list-style:none;counter-reset:step}
  .lp-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-md);counter-increment:step}
  .lp-steps li::before{content:counter(step,decimal-leading-zero);grid-row:1/span 2;font:400 15px/1.6 var(--font-serif);color:var(--label);font-variant-numeric:tabular-nums}
  .lp-steps b{font:650 17px/1.4 var(--font-sans);color:var(--text-primary)}
  .lp-steps span{font-size:15px;line-height:1.5;color:var(--text-tertiary)}
  .lp-cta-preview{grid-area:cta;width:auto;justify-self:start;padding-inline:var(--space-xl)}
  .lp-preview>.lp-micro{grid-area:micro;text-align:left}
}

/* The free start (#/intent; #/birth for the chart alone) — type B: the question and what is happening, then the birth
   details; the privacy notice and the one button beside them (at the end on a phone and a tablet) */
.st-main{display:grid;gap:var(--space-xl);align-content:start}
.st-birth{display:grid;gap:var(--space-xs)}
.st-h2{margin:0;font:400 var(--type-h2)/1.25 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.st-lead{margin:0 0 var(--space-md);font-size:var(--type-lead);line-height:1.55;color:var(--text-tertiary)}
#start-form{row-gap:var(--space-lg)}

/* Birth details (#/birth, #/chart/edit) — type B: the fields; the privacy notice, the note and the action beside them.
   The fields take two columns once the main column is 760 (1280); below that half a column is too narrow for the
   calendar choices, so they stay in one column as on a phone today. */
#birth-form{row-gap:0}
.bf-fields{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--space-xl);align-items:start}
.bf-aside{display:grid;gap:var(--space-md)}
.bf-aside .privacy,.bf-aside .c-note,.bf-aside .error-box{margin:0}
@media (min-width:1280px){.bf-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){
  .bf-aside{padding:var(--space-lg);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
  .bf-aside .actionbar{position:static;margin:0;padding:0;background:none}
}

/* Notices (type A): the existing-chart gate (S1), a reading that cannot open here (S3), the payment return, an edit that
   couldn't open — the title, one line, at most two actions */
.notice-actions,.gate-actions{display:grid;gap:var(--space-sm);max-width:var(--aside-w)}
.gate .center-row{justify-content:flex-start}
.notice-page .c-loading{margin-top:var(--space-md)}
.notice-page .quote{margin:0 0 var(--space-xl)}

/* The building and writing screens (type A): the steps the backend really runs, the landscape at the foot */
.ld{display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h))}
.ld .c-pagehead{margin-bottom:var(--space-lg)}
.ld .quote{margin:0 0 var(--space-lg)}
.ld-note{font-size:var(--type-small);line-height:1.55;color:var(--text-tertiary)}
.ld-art{flex:none;height:220px;margin:auto calc(var(--page-gutter) * -1) calc(var(--space-3xl) * -1);padding-top:var(--space-xl);overflow:hidden}
.ld-art img{width:100%;height:100%;object-fit:cover;object-position:50% 78%;opacity:.9;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 40%);mask-image:linear-gradient(to bottom,transparent 0,black 40%)}
@media (min-width:768px){.ld-steps,.ld .ld-note{max-width:var(--text-max)}}

/* A reading (type D; free reading, paid readings, Ask Mirae, earlier MIRAE, safety): the article at its measure; the
   context column from 1120 (the chart it was read from; the free reading's next step); on a tablet the section rail is a
   strip under the app bar */
.rd-article{max-width:var(--text-max)}
.rd-article>section,.rd-article>header{scroll-margin-top:calc(var(--header-h) + var(--space-3xl))}
.rd-context{display:none}
.rd-ctx-text{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary)}
.rd-ctx-offer .trust{margin:0}
/* Readings (#/our-readings): what each reading is — the Free Reading plain, the Deep Dive on a card, Complete with a cover
   of its own and its five parts in a grid: each reading gets more room than the one before (an editorial page, not a price
   table); the glimpses are marked as sample wording */
.rg-page{max-width:var(--main-max);margin-inline:auto}
.rg-product{display:grid;gap:var(--space-md);margin:var(--space-2xl) 0 0}
.rg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border)}
.rg-id{display:grid;gap:2px}
.rg-name{margin:0;font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.rg-tag{margin:0;font-size:var(--type-small);line-height:1.4;color:var(--text-tertiary)}
.rg-price{margin:0;font:400 var(--type-h2)/1 var(--font-serif);color:var(--text-primary);font-variant-numeric:tabular-nums}
.rg-title{margin:0;font:400 var(--type-h2)/1.25 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.rg-desc{margin:0;max-width:60ch;font-size:var(--type-reading);line-height:1.65;color:var(--text-secondary)}
.rg-list{display:grid;gap:var(--space-2xs);margin:0;padding:0 0 0 1.1em;font-size:var(--type-body);line-height:1.55;color:var(--text-primary)}
.rg-cta,.rg-end{display:grid;max-width:var(--aside-w)}
.rg-deep{padding:var(--space-lg);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.rg-inside .label{margin-bottom:var(--space-sm)}
.rg-toc{list-style:none;margin:0;padding:0;display:grid;counter-reset:toc;border-top:1px solid var(--border)}
.rg-toc li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-xs);padding:10px 0;border-bottom:1px solid var(--border);counter-increment:toc;font-size:var(--type-body);line-height:1.45;color:var(--text-primary)}
.rg-toc li::before{content:counter(toc,decimal-leading-zero);flex:none;min-width:2.2em;font:400 14px/1.45 var(--font-serif);color:var(--gold);font-variant-numeric:tabular-nums}
.rg-toc small{font-size:var(--type-small);font-style:italic;color:var(--text-tertiary)}
.rg-glimpse{margin:0;padding:var(--space-md);border-left:2px solid var(--gold);border-radius:0 var(--radius-control) var(--radius-control) 0;background:var(--surface-muted)}
.rg-glimpse-t{margin:0;font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.rg-glimpse-part{margin:var(--space-xs) 0 0;font:600 var(--type-small)/1.4 var(--font-sans);color:var(--text-primary)}
.rg-glimpse-q{margin:var(--space-2xs) 0 0;padding:0}
.rg-glimpse-q p{margin:0;font:italic 400 19px/1.5 var(--font-serif);color:var(--text-primary)}
.rg-glimpse-note{margin:var(--space-sm) 0 0;font-size:12px;line-height:1.45;color:var(--text-tertiary)}
.rg-more{display:grid;gap:var(--space-2xs);padding-top:var(--space-md);border-top:1px solid var(--border)}
.rg-more-t{margin:0;font:600 var(--type-body)/1.4 var(--font-sans);color:var(--text-primary)}
.rg-more-text{margin:0;font-size:var(--type-body);line-height:1.55;color:var(--text-secondary)}
.rg-more-sub{margin:var(--space-xs) 0 0;font-size:var(--type-small);color:var(--text-tertiary)}
.rg-qs{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs);font:italic 400 16px/1.5 var(--font-serif);color:var(--text-secondary)}
.rg-path{margin:0;font-size:var(--type-small);line-height:1.55;color:var(--text-tertiary)}
.rg-complete{gap:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.rg-cover{display:grid;gap:var(--space-sm);padding:var(--space-lg);background:var(--accent);color:var(--on-accent)}
.rg-cover .rg-head{border-bottom-color:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.rg-cover .rg-name,.rg-cover .rg-price{color:var(--on-accent)}
.rg-cover .rg-tag{color:color-mix(in srgb,var(--on-accent) 78%,transparent)}
.rg-cover-text{margin:0;font:400 19px/1.45 var(--font-serif);color:var(--on-accent)}
.rg-cover-soon{justify-self:start;margin:0;padding:2px 10px;border:1px solid color-mix(in srgb,var(--on-accent) 45%,transparent);border-radius:999px;font:600 12px/1.6 var(--font-sans);letter-spacing:.06em;color:var(--on-accent)}
.rg-body{display:grid;gap:var(--space-md);padding:var(--space-lg)}
.rg-groups{display:grid;gap:var(--space-md)}
.rg-group{padding-top:var(--space-sm);border-top:2px solid var(--accent)}
.rg-group-t{margin:0 0 var(--space-xs);font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rg-group ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font:400 17px/1.45 var(--font-serif);color:var(--text-primary)}
.rg-soon{margin:0;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-control);background:var(--surface-tint);font-size:var(--type-small);line-height:1.55;color:var(--text-primary)}
.rg-trust{margin:var(--space-2xl) 0 var(--space-md);text-align:center;font-size:var(--type-small);color:var(--text-tertiary)}
.rg-end{margin:0 auto}
@media (min-width:768px){
  .rg-deep,.rg-cover,.rg-body{padding:var(--space-xl)}
  .rg-toc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-xl)}
  .rg-groups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-xl);row-gap:var(--space-lg)}
  .rg-deep{margin-inline:32px}
  .rg-complete{margin-top:var(--space-3xl)}
  .rg-complete .rg-cover{grid-template-columns:minmax(0,1fr);padding-block:var(--space-xl)}
  .rg-complete .rg-body{padding:var(--space-2xl) var(--space-xl)}
}
/* the person's situation under their question, as its context (the free reading and the Deep Dive); the way to the next
   question; before a Deep Dive, the Additional Question says what comes first */
.rd-sit{margin:var(--space-md) 0 0;padding:var(--space-sm) var(--space-md);border-left:2px solid var(--border-strong);border-radius:0 var(--radius-control) var(--radius-control) 0;background:var(--surface-muted)}
.rd-sit-t{margin:0 0 2px;font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.rd-sit-text{margin:0;font-size:var(--type-body);line-height:1.6;color:var(--text-secondary);overflow-wrap:anywhere}
.dd-next{display:grid;gap:var(--space-sm)}
.dd-next .label,.dd-next .rd-body{margin:0}
.dd-next-sub{margin:0 0 var(--space-2xs);font-size:var(--type-small);color:var(--text-tertiary)}
.dd-next-qs ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs)}
.dd-next-q{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);width:100%;min-height:48px;padding:10px var(--space-md);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);font:italic 400 17px/1.4 var(--font-serif);color:var(--text-primary);text-align:left;cursor:pointer}
.ask-later{display:grid;gap:var(--space-md);max-width:var(--aside-w)}
/* the free start: what is happening opens once there is a question (closed, it keeps its words), and its box is tall enough
   for its example to be read whole */
.st-sit-lock{margin:0 0 var(--s-2)}
.st-sit.is-locked .textarea{background:var(--surface-muted);opacity:.6;cursor:not-allowed}
#situation{min-height:calc(1.5em * 10 + 26px)}
@media (min-width:768px){#situation{min-height:calc(1.5em * 6 + 26px)}}
/* the paid reading's two evidence parts (each its own place in the section rail) read as one group */
.rd-evidence+.rd-evidence{margin-top:calc(var(--space-lg) * -1)}
.rd-evidence+.rd-evidence .acc.quiet{border-top:0}
/* the free reading's chart after its answer: the strip, and the chart in detail under it */
.strip-more{margin:var(--space-xs) 0 0}
/* the free answer -> the Deep Dive: what it adds, in three values */
.tr-lead{margin:var(--space-sm) 0 var(--space-card);font-size:var(--type-reading);line-height:1.62;color:var(--text-secondary)}
.dd-values b{font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.dd-values li div p{margin-top:var(--space-2xs);font:400 19px/1.45 var(--font-serif);color:var(--text-primary)}
/* the Deep Dive's own parts: the question named; what pulls against what; the sides of the question (side by side from
   768px, one under the other on a phone); what to watch; where to go next */
.dd-q-label{margin:0}
.dd-ask.is-inside{margin:0 0 var(--space-2xl);padding-top:0}
.dd-tension-t{margin:0 0 var(--space-card);font:400 28px/1.28 var(--font-serif);color:var(--text-primary);text-wrap:balance;overflow-wrap:anywhere}
.dd-tension-lead{margin:0 0 var(--space-card);font:400 20px/1.5 var(--font-serif);color:var(--text-primary);text-wrap:pretty}
.dd-sides{display:grid;gap:var(--space-md);margin:var(--space-card) 0}
.dd-sides:last-child{margin-bottom:0}
.dd-side{min-width:0;padding:var(--space-card);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.dd-side-t{margin:0 0 var(--space-sm);font:400 22px/1.3 var(--font-serif);color:var(--text-primary);overflow-wrap:anywhere}
.dd-side .rd-body{font-size:16px;line-height:1.65}
.dd-watch-list b{font:400 19px/1.45 var(--font-serif)}
.dd-next-q:hover{border-color:var(--border-strong)}
.dd-next-q-text{flex:1;min-width:0;overflow-wrap:anywhere}
.dd-next-q-price{display:inline-flex;flex:none;align-items:center;gap:var(--space-2xs);font:650 var(--type-small)/1 var(--font-sans);color:var(--accent)}
.dd-next-note{margin:0;text-align:center;font-size:var(--type-small);color:var(--text-tertiary)}
@media (min-width:768px){.dd-sides.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Complete: a reading dossier — the parts set by type and space, not by boxes */
.cx-preview{margin:0 0 var(--space-lg)}
.cx-hero{display:grid;gap:var(--space-xs);margin:0 0 var(--space-xl)}
.cx-hero .rd-chip,.cx-hero .label{margin:0}
.cx-title{margin:0;font:400 36px/1.15 var(--font-serif);color:var(--text-primary);text-wrap:balance;overflow-wrap:anywhere}
.cx-lead{margin:var(--space-xs) 0 0;font:italic 400 20px/1.5 var(--font-serif);color:var(--text-secondary);text-wrap:pretty}
.cx-part{margin:0 0 var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--border-strong)}
.cx-part-n{margin:0;font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cx-part-t{margin:var(--space-2xs) 0 var(--space-xl);font:400 34px/1.15 var(--font-serif);color:var(--text-primary)}
.cx-topic{margin:0 0 var(--space-xl)}
.cx-topic:last-child{margin-bottom:0}
.cx-topic-t{margin:0 0 var(--space-sm);font:400 23px/1.3 var(--font-serif);color:var(--text-primary)}
.cx-ahead{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-md)}
.cx-ahead li{min-width:0;padding-top:var(--space-sm);border-top:2px solid var(--border)}
.cx-ahead li:first-child{border-top-color:var(--accent)}
.cx-ahead-t{margin:0 0 var(--space-2xs);font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.cx-included{margin:0 0 var(--space-md);font:600 var(--type-small)/1.4 var(--font-sans);color:var(--text-tertiary)}
.cx-part .rd-sec:last-child{margin-bottom:0}
.cx-q-evidence{margin-top:var(--space-lg)}
.cx-why-t{margin:0 0 var(--space-sm);font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
@media (min-width:768px){.cx-ahead{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-title{font-size:44px}}
@media (min-width:768px) and (max-width:1119px){
  .rd .l-article{row-gap:var(--space-lg)}
  .rd .c-section-rail:not([hidden]){display:block;position:sticky;top:var(--header-h);z-index:10;margin:calc(var(--page-top) * -1) calc(var(--page-gutter) * -1) 0;padding:0 var(--page-gutter);border-bottom:1px solid var(--border);background:var(--bar-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-x:auto;scrollbar-width:none}
  .rd .c-section-rail-title{display:none}
  .rd .c-section-rail ol{display:flex;gap:var(--space-2xs)}
  .rd .c-section-rail-item{flex:none;width:auto;padding:13px 10px 11px;border-left:0;border-bottom:2px solid transparent;border-radius:0;white-space:nowrap}
  .rd .c-section-rail [aria-current=true]{border-bottom-color:var(--accent)}
}
@media (min-width:1120px){
  .rd-context{display:grid;gap:var(--space-md);align-content:start}
  .rd .l-rail{align-self:start}
}

/* Reading options (2026-10-05): the question it starts from, small and editable; then two readings, each with what it
   holds before its price — the Deep Dive light, Complete under its dark cover; side by side from 1120px (desktop), one under the
   other below it */
.pl-page{max-width:var(--content-max);margin-inline:auto}
.pl-q{display:grid;gap:var(--space-xs);max-width:var(--main-max);margin:0 0 var(--space-xl);padding:var(--space-md) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pl-q .label{margin:0}
.pl-q-view{display:grid;gap:var(--space-2xs);justify-items:start}
.pl-q-text{margin:0;font:italic 400 20px/1.45 var(--font-serif);color:var(--text-primary);overflow-wrap:anywhere;text-wrap:pretty}
.pl-q-sit{margin:0;font-size:var(--type-small);color:var(--text-tertiary)}
.pl-q-edit{min-height:44px}
.pl-edit .field{margin-bottom:var(--space-md)}
.pl-edit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}
.pl-options{display:grid;gap:var(--space-lg);align-items:start}
.pl-option{display:grid;gap:var(--space-md);min-width:0;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.pl-deep{padding:var(--space-lg)}
.pl-complete{gap:0;overflow:hidden}
.pl-cover{display:grid;gap:var(--space-md);padding:var(--space-lg);background:var(--accent);color:var(--on-accent)}
.pl-body{display:grid;gap:var(--space-md);padding:var(--space-lg)}
.pl-id{display:grid;gap:2px;padding-bottom:var(--space-sm);border-bottom:1px solid var(--border)}
.pl-name{margin:0;font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.pl-tag{margin:0;font:600 var(--type-small)/1.4 var(--font-sans);color:var(--text-tertiary)}
.pl-cover .pl-id{border-bottom-color:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.pl-cover .pl-name,.pl-cover .pl-title{color:var(--on-accent)}
.pl-cover .pl-tag{color:color-mix(in srgb,var(--on-accent) 78%,transparent)}
.pl-title{margin:0;font:400 var(--type-h2)/1.25 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.pl-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--border)}
.pl-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-xs);padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--type-body);line-height:1.45;color:var(--text-primary)}
.pl-list small{font-size:var(--type-small);font-style:italic;color:var(--text-tertiary)}
.pl-list-whole li{font:400 17px/1.45 var(--font-serif)}
.pl-plus{margin:0;font:600 var(--type-body)/1.4 var(--font-sans);color:var(--accent)}
.pl-meta{margin:0;font-size:var(--type-small);line-height:1.55;color:var(--text-tertiary)}
.pl-buy{display:grid;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--border)}
.pl-price{margin:0;font:400 var(--type-h2)/1 var(--font-serif);color:var(--text-primary);font-variant-numeric:tabular-nums}
.pl-soon-btn:disabled{opacity:1;color:var(--text-tertiary);cursor:not-allowed}
.pl-soon{margin:0;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-control);background:var(--surface-tint);font-size:var(--type-small);line-height:1.55;color:var(--text-primary)}
.pl-foot{margin:var(--space-xl) 0 0;text-align:center;font-size:var(--type-small);color:var(--text-tertiary)}
.pl-foot a{font-weight:650;color:var(--accent)}
@media (min-width:1120px){.pl-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Your Mirae (Home, type C): the core nature, My Now and My Saju; the next question, the latest reading and the chart beside them */
.hm-grid{row-gap:var(--space-2xl)}
@media (min-width:768px){.hm-grid{display:block;max-width:var(--main-max);margin-inline:auto}.hm-main,.hm-side{display:contents}}
.hm-main,.hm-side{display:grid;gap:var(--space-2xl);align-content:start}
.hm-main .label,.hm-side .label{margin:0}
.hm-next{gap:0;padding:0;overflow:hidden}
.hm-next-path{display:grid;gap:var(--space-sm);padding:var(--space-card)}
.hm-next-path .c-promo-title,.hm-next-path .c-promo-text{margin:0}
.hm-next-complete{border-top:1px solid var(--border);background:var(--surface-muted)}
.hm-next>.c-linkrow{margin:0 var(--space-card) var(--space-card)}
.hm-pending{display:grid;gap:var(--space-sm);padding:var(--space-md);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface)}
.hm-pending p{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary)}
.hm-pending-actions{display:grid;gap:var(--space-xs)}
.hm-now .rd-now-insight{font-size:20px}
.hm-open{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:650 14px/1 var(--font-sans);color:var(--accent)}
.hm-saju{display:grid;gap:var(--space-md)}
.hm-saju-cards{display:grid;gap:var(--space-xs);margin:0;padding:0;list-style:none}
.hm-latest{display:grid;gap:var(--space-md)}
.hm-latest-card{display:grid;gap:var(--space-sm);padding:var(--space-card);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.hm-latest-meta{margin:0;font:600 13px/1.5 var(--font-sans);color:var(--text-tertiary)}
.hm-latest-title{margin:0;font:400 20px/1.4 var(--font-serif);color:var(--text-primary);overflow-wrap:anywhere}
.hm-questions{display:grid;gap:var(--space-sm);padding:var(--space-card);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface-muted)}
.hm-questions-lead{margin:-4px 0 var(--space-xs);color:var(--text-secondary);font-size:14px}
.hm-question-list{display:grid;gap:8px}.hm-question{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;text-align:left;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-primary);font:400 16px/1.35 var(--font-serif);cursor:pointer}.hm-question:hover{border-color:var(--accent)}.hm-question-other{grid-template-columns:auto 1fr auto;font-family:var(--font-sans);font-size:14px}
.hm-complete-card{display:grid;gap:var(--space-sm);padding:var(--space-xl);border-radius:var(--radius-card);background:var(--accent);color:var(--surface)}.hm-complete-card .label{color:var(--surface)}.hm-complete-title{margin:0;font:400 34px/1.1 var(--font-serif)}.hm-complete-text{margin:0 0 var(--space-sm);line-height:1.55;color:var(--surface)}.hm-complete-card .btn-secondary{background:var(--surface);color:var(--accent);border-color:transparent}
.hm-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.hm-section-head a{font-size:14px;color:var(--accent)}.hm-recent{display:grid;gap:var(--space-md)}.hm-recent-grid{display:grid;gap:var(--space-md)}
.hm-save{display:grid;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--border)}
.hm-save p{margin:0;font-size:14px;line-height:1.55;color:var(--text-tertiary)}
@media (min-width:768px){.hm-saju-cards,.hm-recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-side{gap:var(--space-lg)}}
@media (max-width:767px){.hm-grid{display:flex;flex-direction:column}.hm-main{display:contents}.hm-side{display:contents}.hm-main>.c-nature{order:1}.hm-main>.hm-now{order:2}.hm-side>.hm-latest{order:3}.hm-side>.hm-questions,.hm-side>.hm-next-simple,.hm-side>.c-promo{order:4}.hm-main>.hm-recent{order:5}.hm-side>.hm-complete-card{order:6}.hm-main>.hm-chart{order:7}.hm-main>.hm-saju{order:8}.hm-main>.hm-pending{order:2}.hm-complete-card{padding:var(--space-card)}.hm-question{font-size:15px}}

/* My Chart (type C, two halves): the identity and the four pillars side by side; the birth details and the actions beside
   the other charts and the account */
.mc-grid{row-gap:var(--space-2xl)}
.mc-flow{display:grid;gap:var(--space-2xl);max-width:var(--main-max);margin-inline:auto}
/* 2026-10 unified page foundation: one content column and one MIRAE palette. */
.lp-hook{margin-top:var(--space-md);max-width:38ch;font:400 17px/1.55 var(--font-serif);color:var(--text-primary)}
.mc>.c-pagehead,.mc>.mc-flow,.rg>.rg-page,.pl>.pl-page{width:100%;max-width:var(--main-max);margin-left:auto;margin-right:auto}
.rg-product{width:100%;max-width:none}
.rg-deep,.rg-complete{background:var(--surface);border-color:var(--border)}
.rg-cover{background:var(--surface-muted);color:var(--text-primary);border-bottom:1px solid var(--border)}
.rg-cover .rg-name,.rg-cover .rg-price,.rg-cover .rg-title,.rg-cover-text,.rg-cover-soon{color:var(--text-primary)}
.rg-cover .rg-tag{color:var(--text-tertiary)}
.rg-cover-soon{border-color:var(--border-strong)}
.rg-group{border-top:1px solid var(--border)}
.rg-group-t{color:var(--label)}
.hm-complete-card.mc-complete{background:transparent;color:var(--text-primary);border-top:1px solid var(--border);border-radius:0;padding:var(--space-xl) 0}
.hm-complete-card.mc-complete .label,.hm-complete-card.mc-complete .hm-complete-text{color:inherit}
.hm-complete-card.mc-complete .hm-complete-title{font-size:var(--type-h2)}
.hm-complete-card.mc-complete .btn-secondary{background:transparent;color:var(--accent);border-color:var(--border-strong)}
.mc-birth,.mc-others{padding-left:0;padding-right:0;border-left:0;border-right:0;border-radius:0;background:transparent}
@media (min-width:768px){.lp-hero-art img{object-position:center 38%}}
@media (min-width:1120px){
.lp-hero-art img{object-position:center 36%;-webkit-mask-image:linear-gradient(to right,transparent 12%,black 52%);mask-image:linear-gradient(to right,transparent 12%,black 52%)}
.lp-preview{display:block;max-width:calc(var(--main-max) + var(--page-gutter) * 2)}
.lp-preview h2{max-width:18ch}
.lp-steps{display:block;margin:var(--space-xl) 0 var(--space-lg)}
.lp-cta-preview{width:auto;margin-top:var(--space-lg)}
}
.mc-now-section{display:grid;gap:var(--space-sm)}
.mc-continue,.mc-readings{display:grid;gap:var(--space-md)}
.mc-continue-context{margin:0;color:var(--text-secondary);font:400 18px/1.5 var(--font-serif)}
.mc-continue .hm-questions{padding:0;border:0;background:transparent}
.mc-continue .hm-questions>.label,.mc-continue .hm-questions-lead{display:none}
.mc-reading-list{display:grid;gap:var(--space-md)}
.mc-complete{margin-top:var(--space-xs)}
.mc-birth{display:grid;gap:var(--space-md)}
.mc-new-chart{display:grid}
.mc-pillars{display:grid;gap:var(--space-md)}
.mc-pillars .label{margin:0}
.mc-now{margin:0;font:400 17px/1.5 var(--font-serif);color:var(--text-primary)}
.mc-now b{font:700 var(--type-label)/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.mc-col{display:grid;gap:var(--space-lg);align-content:start}
.mc-actions{display:grid;gap:var(--space-sm)}
.mc-chart-list{display:grid;gap:var(--space-md);margin:0;padding:0;list-style:none}
.mc-chart-list li{display:grid;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--border)}
.mc-chart-list li:first-child{padding-top:0;border-top:0}
@media (min-width:768px){.mc-actions{grid-template-columns:1fr}}

/* Readings (type C: the list and its rail): the tabs; on a phone the filter row above the list and the note under it; on a
   desktop the filters and the note in the rail */
.rds .c-pagehead{margin-bottom:var(--space-md)}
.rds-grid{row-gap:var(--space-lg)}
.rds-flow{display:grid;gap:var(--space-xl);max-width:var(--main-max);margin-inline:auto}
.rds-filters{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:var(--space-xs);align-items:center}
.rds-filters .label{margin:0}
.rds-filters .select{min-height:44px;font-size:15px}
.rds-panels{min-width:0}
.rds-panel{display:grid;gap:var(--space-md)}
.rds-side{display:grid;gap:var(--space-md);align-content:start}
.rds-ask{display:grid;gap:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border)}
.rds-ask .btn{padding-inline:var(--space-sm);font-size:15px}
.rds-note{margin:0;font-size:14px;line-height:1.55;color:var(--text-tertiary)}
.rds-signin{display:grid;gap:var(--space-sm);justify-items:start}
.rds-signin p{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary)}
.rds-panel .error-box{margin:0}
@media (min-width:1120px){
  .rds-grid{grid-template-columns:minmax(0,1fr) var(--aside-w-rail);grid-template-rows:auto 1fr;column-gap:var(--column-gap)}
  .rds-filters{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr)}
  .rds-panels{grid-column:1;grid-row:1/span 2}
  .rds-side{grid-column:2;grid-row:2}
  .rds-filters[hidden]+.rds-panels+.rds-side{grid-row:1/span 2}
}

/* Ask — the Additional Question (type B): the chart that answers first on a phone, beside the question on a desktop */
.ask-ctx:empty{display:none}
.ask-main{display:grid;align-content:start}
.ask-includes{margin:var(--space-xs) 0 var(--space-xl)}
.ask-buy{display:grid;gap:var(--space-sm)}
.ask-buy .trust{margin:0}

/* Account: signed out, type A with the landscape; signed in, type B */
.acct-text,.acct-main{display:grid;gap:var(--space-lg);align-content:start}
.acct-text .c-pagehead{margin:0}
.acct-state{display:flex;align-items:center;gap:var(--space-sm);margin:0;font:650 17px/1.3 var(--font-sans);color:var(--text-primary)}
.acct-state img{border-radius:50%;object-fit:cover}
.acct-lead{margin:0;max-width:56ch;font-size:var(--type-lead);line-height:1.55;color:var(--text-secondary)}
.acct-actions{display:grid;gap:var(--space-sm);max-width:var(--aside-w)}
.acct-kept-list{display:grid;gap:4px;margin:0}
.acct-kept-list dt{margin-top:var(--space-sm);font:650 15px/1.4 var(--font-sans);color:var(--text-primary)}
.acct-kept-list dt:first-child{margin-top:0}
.acct-kept-list dd{margin:0;font-size:14px;line-height:1.55;color:var(--text-tertiary)}

/* About (type A with the landscape) and Contact (type A): editorial text, one action each */
.about-text,.contact-text{display:grid;gap:var(--space-xl);align-content:start}
.about-text .c-pagehead,.contact-text .c-pagehead{margin:0}
.about-body{display:grid;gap:var(--space-md)}
.about-body p{margin:0;font-size:var(--type-reading);line-height:1.72;color:var(--text-secondary)}
.about-cta{display:grid;gap:var(--space-xs);max-width:var(--aside-w)}
.contact-mail{display:grid;gap:var(--space-sm);padding:var(--space-lg) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.contact-mail .label{margin:0}
.contact-addr{margin:0;font:400 26px/1.3 var(--font-serif);color:var(--text-primary);overflow-wrap:anywhere;user-select:all}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg)}
.contact-actions .btn{width:auto}
.contact-operator{margin:0;font-size:14px;color:var(--text-tertiary)}
@media (min-width:768px){.contact-addr{font-size:30px}}

/* The privacy notice (type D: "On this page" on the left, the text) and data deletion (type A), served by the origin */
.doc h1{margin:0 0 var(--space-sm);font-size:var(--type-h1);line-height:1.15}
.doc-lead{margin:0 0 var(--space-xl);font-size:var(--type-lead);line-height:1.55;color:var(--text-secondary)}
.doc h2{margin:var(--space-2xl) 0 var(--space-sm);font-size:22px;line-height:1.3;scroll-margin-top:calc(var(--header-h) + var(--space-lg))}
.doc p,.doc li{font-size:16px;line-height:1.65;color:var(--text-secondary)}
.doc p{margin:0 0 var(--space-sm)}
.doc ul,.doc ol{display:grid;gap:var(--space-xs);margin:0 0 var(--space-md);padding-left:20px}
.doc strong{color:var(--text-primary)}
.doc code{padding:1px 6px;border-radius:6px;background:var(--page-bg-deep);color:var(--text-primary);font-size:14px;overflow-wrap:anywhere}
.doc-card{padding:var(--space-md) var(--space-card);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.doc-card p:last-child{margin:0}
.doc-mail{font-weight:650;color:var(--text-primary);user-select:all;overflow-wrap:anywhere}
.doc-updated{margin-top:var(--space-2xl);font-size:13px;color:var(--text-tertiary)}
.doc-more a{font-weight:650}
.doc-page>.doc{max-width:var(--text-max)}

/* A reading from the earlier MIRAE (#/legacy/…): its chapters, as it was written */
.lg-ch{margin-top:var(--space-2xl)}
.lg-eyebrow{margin:0 0 var(--space-xs);font:650 12px/1.4 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
.lg-title{margin:0 0 var(--space-xs);font:400 26px/1.25 var(--font-serif);color:var(--text-primary);text-wrap:balance}
.lg-sub{margin-top:var(--space-card)}
.lg-sub h3{margin:0 0 var(--space-xs);font:650 17px/1.35 var(--font-sans);color:var(--text-primary);text-wrap:balance}
.lg-status{display:grid;gap:var(--space-sm);margin:0 0 var(--space-lg);padding:var(--space-md);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface)}
.lg-status p{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary)}
@media (min-width:768px){.lg-title{font-size:30px}}
}

/* ---- outside the layers: the elements the membership worker adds to the page (its own unlayered stylesheet; its
   dialog rules use !important) ---- */
/* mirae.bid: the membership worker adds its member bar (the MIRAE account) to the page at /. MIRAE 2.0 offers the same
   links in its own menu and on the Account screen (app.js memberState), so the bar stays out of the app header; its sign-in
   dialog is still used. */
body > nav.member-bar { display: none !important; }
/* ---- the sign-in dialogs the membership worker adds to the page (its own rules use !important; the second is the reading
   gate's, dialog.login-dialog): MIRAE paper and ink ---- */
body :is(#login-dialog,dialog.login-dialog){background:var(--paper)!important;color:var(--ink-2)!important;border:1px solid var(--line)!important;border-radius:22px!important;padding:var(--s-6)!important;font:400 15px/1.55 var(--font-sans)!important;box-shadow:0 24px 60px -24px rgba(30,42,38,.45)}
body :is(#login-dialog,dialog.login-dialog)::backdrop{background:rgba(30,42,38,.38)}
body :is(#login-dialog,dialog.login-dialog) h2{margin:var(--s-2) 0!important;font:400 26px/1.3 var(--font-serif)!important;color:var(--ink)!important}
body :is(#login-dialog,dialog.login-dialog) p,body :is(#login-dialog,dialog.login-dialog) summary{color:var(--ink-3)!important}
body :is(#login-dialog,dialog.login-dialog) .login-submit{min-height:52px!important;border:1px solid var(--line-strong)!important;border-radius:var(--r-md)!important;background:var(--surface)!important;color:var(--ink)!important;font:650 15px/1.3 var(--font-sans)!important}
body :is(#login-dialog,dialog.login-dialog) .login-submit:hover{border-color:var(--ink-3)!important}
body :is(#login-dialog,dialog.login-dialog) .login-close{color:var(--ink)!important}
body dialog.login-dialog .result-login-cancel{width:100%;min-height:44px;border:0;background:transparent;color:var(--ink-2);font:600 15px/1.3 var(--font-sans);text-decoration:underline;text-underline-offset:3px}