/* Approved reading palette. Keep generated wording and the window-scroll reader intact. */
.saju-reading-design {
  --muted:#c2cbbc;
  --report-surface:#1b211c;
  --report-highlight:#202c23;
  --reading-action:#22291e;
}
.theme-light .saju-reading-design {
  --muted:#586153;
  --report-surface:#fffdf6;
  --report-highlight:#e8ecdf;
  --reading-action:#ececde;
}
.saju-reading-design .studio-outline {min-width:0}
.saju-reading-design .studio-outline > h2 {font-size:25px}
.reading-sample {
  margin:0 0 42px;padding:28px;
  background:var(--report-surface);border:1px solid var(--line);border-radius:6px;
}
.reading-sample [lang="en"] {display:none}
html[lang="en"] .reading-sample [lang="ko"] {display:none}
html[lang="en"] .reading-sample [lang="en"] {display:block}
.reading-sample .reading-sample-folio {
  display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;
  border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.06em;color:var(--muted);
}
.saju-reading-design .reading-sample-folio > span {margin:0;font-size:inherit}
.saju-reading-design .reading-sample h2 {font-size:24px;line-height:1.7;color:var(--accent);margin:22px 0}
.saju-reading-design .reading-sample h3 {font:600 12px/1.8 system-ui,sans-serif;color:var(--accent);margin:0 0 10px}
.reading-sample-answer {background:var(--report-highlight);border:1px solid var(--line);padding:20px;border-radius:4px}
.reading-sample-answer > p {font:18px/1.95 'Noto Serif KR',Batang,Georgia,serif;color:var(--ink)}
.reading-sample-evidence {margin-top:24px;padding:24px 0;border-top:1px solid var(--line)}
.reading-sample-evidence > p {font-size:14px;line-height:2;color:var(--muted)}
.reading-sample-action {padding:20px;border-left:2px solid var(--accent);background:var(--reading-action)}
.reading-sample-action > p {font-size:14px;line-height:2;color:var(--ink)}
.reading-sample :is(.reading-sample-answer,.reading-sample-evidence,.reading-sample-action) > p:last-child {margin-bottom:0}
.reading-sample .reading-sample-note {font-size:12px;line-height:1.9;color:var(--muted);margin:22px 0 0}

/* Answer, chart evidence and a practical step remain the original report fields. */
.saju-reading-design .studio-chapter {
  margin:24px 0;padding:36px;gap:32px;
  background:var(--report-surface);border:1px solid var(--line);border-radius:6px;
}
.saju-reading-design .studio-chapter-rail h2 {color:var(--accent)}
.saju-reading-design :is(.studio-summary-box,.studio-question-verdict) {
  background:var(--report-highlight);border:1px solid var(--line);border-radius:4px;padding:24px;
}
.saju-reading-design .studio-question-verdict {border-left:2px solid var(--accent)}
.saju-reading-design .studio-chapter-summary {font-size:20px;line-height:1.95}
.saju-reading-design .studio-chapter-facts {padding:0 0 24px;margin-bottom:28px}
.saju-reading-design :is(.studio-facts-label,.studio-verdict-label) {font-size:12px;color:var(--accent)}
.saju-reading-design .studio-chapter-facts dl > div {grid-template-columns:140px minmax(0,1fr)}
.saju-reading-design .studio-chapter-facts dt {font-size:13px}
.saju-reading-design .studio-chapter-facts dd {font-size:13px;line-height:1.95}
.saju-reading-design .studio-chapter-content > .studio-prose {font-size:16px;line-height:2.1;color:var(--muted)}
.saju-reading-design .studio-action {margin-top:30px;padding:23px 24px;background:var(--reading-action);border-left-width:2px}
.saju-reading-design .studio-action small {display:block;font-size:12px;color:var(--accent);margin-bottom:10px}
.saju-reading-design .studio-action p {font-size:16px;line-height:2;color:var(--ink)}

/* Match the existing symbol-report hierarchy without changing its layout or text. */
html body.reading-design-page.goblin-salon #result-section {
  --salon-muted:#c2cbbc;
}
html.theme-light body.reading-design-page.goblin-salon #result-section {--salon-muted:#586153}
html body.reading-design-page.goblin-salon #result-section .symbol-chapter > h3 {color:var(--salon-gold)!important}
html body.reading-design-page.goblin-salon #result-section .symbol-chapter-body {line-height:2.05}
html body.reading-design-page.goblin-salon #result-section .symbol-chapter {border-color:var(--salon-line);padding-top:32px;padding-bottom:32px}

/* A footer in document flow cannot cover a form or a paragraph while reading.
   Do not move scrolling to main: the reader uses window scroll for its position. */
html body.site-ui.reading-design-page {padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
html body.site-ui.reading-design-page .bottom-tabbar {
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;margin:24px auto 0!important;box-shadow:none!important;
}
@media(max-width:700px) {
  .reading-sample {padding:22px 20px;margin-bottom:32px}
  .saju-reading-design .reading-sample h2 {font-size:23px}
  .reading-sample-answer,.reading-sample-action {padding:18px}
  .reading-sample-answer > p {font-size:17px}
  .saju-reading-design .studio-chapter {padding:24px 20px;margin:20px 0;gap:24px}
  .saju-reading-design .studio-chapter-rail h2 {text-wrap:balance}
  .saju-reading-design :is(.studio-summary-box,.studio-question-verdict) {padding:20px}
  .saju-reading-design .studio-summary-box > .studio-line-icon {display:none}
  .saju-reading-design .studio-chapter-summary {font-size:18px}
  .saju-reading-design .studio-chapter-facts dl > div {grid-template-columns:1fr;gap:6px}
  .saju-reading-design .studio-action {padding:20px}
}
@media(max-width:360px) {
  .reading-sample {padding:18px 15px}
  .saju-reading-design .studio-chapter {padding:22px 16px}
  .saju-reading-design .studio-summary-box {gap:10px;padding:17px}
  .saju-reading-design .studio-chapter-summary {font-size:17px}
}
@media print {
  .reading-sample {display:none!important}
  .saju-reading-design {--reading-action:transparent}
  .saju-reading-design .studio-chapter {background:transparent;margin:0;padding:20px 0;border:0;border-bottom:1px solid var(--line)}
  .saju-reading-design .studio-chapter-content > .studio-prose {color:var(--ink)}
  html body.site-ui.reading-design-page .bottom-tabbar {display:none!important}
}