:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: #202b3c;
  background: #f4f6fa;
  font-size: 16px;
  line-height: 1.7;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  background: white;
  border-bottom: 1px solid #dce2eb;
  padding: 16px max(16px, calc((100% - 960px) / 2));
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
a {
  color: #2446a0;
  text-underline-offset: 4px;
}
header > a {
  font-size: 21px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
nav {
  display: flex;
  gap: 16px;
  font-size: 14px;
}
main {
  max-width: 800px;
  margin: auto;
  padding: 32px 18px 60px;
}
.eyebrow {
  color: #405e98;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
h1 {
  font-size: clamp(32px, 7vw, 46px);
  line-height: 1.3;
  letter-spacing: -1.7px;
  margin: 12px 0 20px;
}
h2 {
  font-size: 23px;
  line-height: 1.4;
  margin: 0 0 18px;
}
h3 {
  font-size: 18px;
  margin: 24px 0 8px;
}
.intro {
  color: #56647a;
}
.card {
  background: white;
  padding: 28px;
  border: 1px solid #dce2eb;
  border-radius: 18px;
  margin: 22px 0;
}
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.steps li {
  font-size: 13px;
  background: #e8edf6;
  padding: 7px 12px;
  border-radius: 30px;
  counter-increment: step;
}
.steps li:before {
  content: counter(step) '. ';
  color: #405e98;
}
label {
  display: block;
  margin: 18px 0 8px;
  font-weight: 600;
}
input,
select,
button {
  font: inherit;
  min-width: 0;
  max-width: 100%;
}
input:not([type='checkbox']),
select {
  display: block;
  width: 100%;
  border: 1px solid #b6c1d2;
  border-radius: 9px;
  background: white;
  color: #202b3c;
  padding: 12px;
  margin-top: 7px;
}
input:focus,
select:focus,
button:focus-visible {
  outline: 3px solid #95b8ff;
  outline-offset: 2px;
}
button {
  border: 0;
  border-radius: 10px;
  padding: 13px 18px;
  background: #244eaf;
  color: white;
  cursor: pointer;
  margin: 12px 8px 0 0;
  font-weight: 700;
}
form > button,
#pay {
  width: 100%;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.secondary {
  color: #28416c;
  background: #edf1f8;
}
.danger {
  background: #fff0f0;
  color: #a12727;
}
small,
.muted {
  font-size: 13px;
  color: #5c6a7d;
  font-weight: 400;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
}
.check input {
  margin-top: 6px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
details {
  margin: 22px 0;
  background: #f6f8fc;
  padding: 14px;
  border-radius: 10px;
  overflow-wrap: anywhere;
}
summary {
  cursor: pointer;
  font-weight: 600;
}
details p {
  font-size: 14px;
}
.notice {
  background: #fff5d8;
  border: 1px solid #ead294;
  border-radius: 10px;
  padding: 16px;
}
#message {
  color: #98412a;
  overflow-wrap: anywhere;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pillar {
  padding: 13px 4px;
  text-align: center;
  border-radius: 10px;
  background: #eff3fa;
}
.pillar strong {
  display: block;
  font-size: 23px;
}
.pillar small {
  display: block;
}
.elements {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.element {
  border-radius: 10px;
  background: #eaf2ec;
  padding: 10px 14px;
}
.evidence {
  font-size: 12px;
  color: #626f83;
}
.evidence pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.price {
  font-weight: 800;
  font-size: 30px;
}
.policy {
  font-size: 14px;
  border-top: 1px solid #e0e5ed;
  margin: 20px 0;
  padding-top: 8px;
}
footer {
  text-align: center;
  color: #63718a;
  font-size: 13px;
  margin-top: 40px;
}
footer > a {
  margin: 0 10px;
}
ul,
ol {
  padding-left: 24px;
}
li {
  margin-bottom: 6px;
}
[hidden] {
  display: none !important;
}
.report-section {
  border-top: 1px solid #dce2eb;
  padding-top: 22px;
  margin-top: 30px;
}
.report-section h2 {
  color: #264779;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
td,
th {
  padding: 10px;
  border-bottom: 1px solid #dde3ec;
  text-align: left;
  overflow-wrap: anywhere;
}
.table-scroll {
  overflow-x: auto;
}
#orders td:first-child {
  max-width: 200px;
}
#private-link,
#recovery-code {
  font-size: 13px;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  main {
    padding: 24px 14px;
  }
  .card {
    padding: 20px 16px;
    border-radius: 14px;
  }
  header {
    padding: 13px 14px;
    gap: 10px;
  }
  nav {
    gap: 9px;
    font-size: 12px;
  }
  .pillar strong {
    font-size: 19px;
  }
  .pillar small {
    font-size: 11px;
  }
  .two {
    gap: 10px;
  }
  .steps li {
    padding: 5px 8px;
    font-size: 12px;
  }
  button {
    max-width: 100%;
  }
}

/* Customer reading experience. Admin and method pages retain their own styles. */
.saju-experience {
  background: #0c0c0b;
  color: #d4cbb8;
  font-family: 'AppleMyungjo', 'Batang', 'Noto Serif KR', Georgia, serif;
  min-height: 100vh;
  color-scheme: dark;
  --gold: #c4ab75;
  --line: #3d372c;
}
.saju-experience header {
  background: transparent;
  border: 0;
  max-width: 760px;
  margin: auto;
  padding: 22px 24px;
}
.saju-experience header > a { font-size: 15px; font-weight: 400; letter-spacing: 2px; }
.saju-experience nav { font-size: 12px; }
.saju-experience a { color: #b8a581; }
.saju-experience main { max-width: 660px; padding: 0 24px 48px; }
.saju-experience .opening { text-align: center; padding: 34px 0 18px; }
.opening-brand { font-size: 12px; letter-spacing: 4px; color: #998c73; }
.saju-seal {
  width: 152px; height: 190px; margin: 35px auto;
  border: 1px solid #756344; border-radius: 50%;
  outline: 1px solid #393126; outline-offset: 7px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: radial-gradient(ellipse, #29231a 0%, #12110e 65%);
}
.saju-seal span { font-size: 45px; letter-spacing: 9px; padding-left: 9px; color: #c9b486; }
.saju-seal small { font-size: 10px; letter-spacing: 2px; color: #a18f6e; margin-top: 12px; }
.saju-experience .eyebrow { color: #b09a71; font-weight: 400; font-size: 12px; letter-spacing: 2px; }
.saju-experience h1 { font-size: clamp(35px, 8vw, 48px); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: #e3d5b7; }
.saju-experience h2 { font-size: 27px; font-weight: 400; line-height: 1.65; color: #e1d0ac; }
.saju-experience h3 { font-size: 19px; color: #d9c49c; font-weight: 400; }
.opening-story { font-size: 16px; line-height: 2.1; color: #b9ae97; }
.opening-story p { margin: 25px 0; }
.saju-experience button { background: #c2aa77; color: #16130e; border: 1px solid #c2aa77; border-radius: 0; font-weight: 400; padding: 16px 18px; }
.saju-experience .opening-button { background: transparent; color: #e0cda5; width: min(100%, 350px); margin: 20px 0 0; }
.opening-button span { margin-left: 25px; }
.opening-note { color: #b5a17a; font-size: 12px; letter-spacing: 1px; }
.opening-disclaimer { color: #8c8578; font-size: 11px; margin-top: 35px; line-height: 1.9; }
.saju-experience .card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 38px 0; margin: 0; }
.saju-experience #input-panel { padding-top: 12px; border-top: 0; max-width: 480px; margin: auto; }
.saju-experience #input-panel h2 { margin-top: 24px; }
.saju-experience label { font-weight: 400; font-size: 15px; margin-top: 25px; }
.saju-experience input:not([type='checkbox']), .saju-experience select { background: #12120f; color: #e0d6c2; border: 1px solid #554b39; border-radius: 0; padding: 15px 12px; }
.saju-experience input::placeholder { color: #918776; }
.saju-experience input:focus, .saju-experience select:focus, .saju-experience button:focus-visible { outline: 2px solid #cfb583; }
.saju-experience input[type='checkbox'] { accent-color: #c2aa77; }
.saju-experience small, .saju-experience .muted { color: #aaa18f; font-size: 12px; }
.saju-experience details { background: #141410; border-radius: 0; border: 1px solid #302c23; padding: 16px; }
.saju-experience summary { font-weight: 400; font-size: 13px; color: #bfa97e; }
.saju-experience .check { font-size: 12px; color: #b9ae97; line-height: 1.9; }
.saju-experience .notice { background: transparent; color: #a89a7f; border: 1px solid #393225; border-radius: 0; padding: 10px 14px; font-size: 11px; text-align: center; }
.saju-experience #message { color: #d6bd89; font-size: 14px; }
.saju-experience #message:empty { display: none; }
.saju-experience .text-button { border: 0; background: transparent; color: #ad9b78; padding: 8px 0; font-size: 12px; }
.saju-experience .secondary { background: transparent; border-color: #65583e; color: #cdbd9e; font-size: 12px; }
.saju-experience .danger { background: transparent; color: #c99888; border-color: #664d42; font-size: 12px; }
.saju-experience .pillars { gap: 1px; background: #49402f; border: 1px solid #49402f; margin: 28px 0; }
.saju-experience .pillar { background: #171611; border-radius: 0; padding: 20px 2px; }
.saju-experience .pillar strong { color: #e4c98d; font-size: 25px; margin: 12px 0; font-weight: 400; }
.saju-experience .element { border: 1px solid #484132; border-radius: 0; background: transparent; color: #c6b999; font-size: 14px; padding: 8px 14px; }
.saju-experience article { margin: 38px 0; }
.saju-experience article > p { line-height: 2.1; font-size: 16px; word-break: keep-all; overflow-wrap: anywhere; }
.saju-experience .evidence { color: #a49a86; }
.saju-experience .report-section { border-color: var(--line); padding-top: 35px; margin-top: 45px; }
.saju-experience .report-section h2 { color: #d6be8d; }
.saju-experience #paid-offer { border: 1px solid #685639; padding: 30px 24px; background: #14130f; margin-bottom: 35px; }
.saju-experience #toc { list-style: decimal-leading-zero; padding-left: 32px; }
.saju-experience #toc li { padding: 12px 0 12px 8px; border-bottom: 1px solid #332e23; font-size: 15px; }
.saju-experience #toc li::marker { color: #9b8357; }
.saju-experience .price { color: #e0c693; font-size: 30px; font-weight: 400; margin-bottom: 5px; }
.saju-experience #checkout-mode, .saju-experience #order-info { font-size: 12px; color: #b1a38a; overflow-wrap: anywhere; }
.saju-experience .policy { border-color: #49402f; }
.saju-experience footer { border-top: 1px solid #332e25; padding-top: 25px; color: #918777; font-size: 11px; }
@media (max-width: 480px) {
  .saju-experience header { padding: 18px 20px; }
  .saju-experience header > a { font-size: 13px; }
  .saju-experience nav { font-size: 11px; gap: 12px; }
  .saju-experience main { padding: 0 22px 35px; }
  .saju-experience .opening { padding-top: 16px; }
  .saju-seal { width: 122px; height: 152px; margin: 30px auto; }
  .saju-seal span { font-size: 36px; }
  .opening-story { font-size: 15px; }
  .saju-experience .pillar strong { font-size: 21px; }
  .saju-experience .pillar small { font-size: 10px; }
  .saju-experience .elements { gap: 6px; }
  .saju-experience .element { padding: 7px 11px; }
  .saju-experience #paid-offer { padding: 25px 16px; }
}

/* Post-input reading: analysis, narrative, chapter preview and book reader. */
.saju-experience .analysis-scene { min-height: 75svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 55px 0; }
.analysis-orbit { width: 150px; height: 150px; border: 1px solid #71613e; border-radius: 50%; display: grid; place-items: center; margin-bottom: 38px; box-shadow: 0 0 65px #a7854222, inset 0 0 40px #ab823318; animation: saju-breathe 2.6s ease-in-out infinite; }
.analysis-orbit span { font-size: 34px; letter-spacing: 8px; padding-left: 8px; color: #cdb888; }
.saju-experience .analysis-scene h2 { font-size: 24px; }
#analysis-status { font-size: 13px; color: #c4b697; line-height: 1.9; }
.analysis-notes { margin-top: 25px; font-size: 14px; line-height: 2.2; color: #958973; }
@keyframes saju-breathe { 50% { box-shadow: 0 0 90px #a7854240, inset 0 0 50px #ab823326; } }
.reading-title { text-align: center; margin: 45px 0 36px; }
.saju-experience .reading-title h1 { font-size: clamp(29px, 6vw, 40px); overflow-wrap: anywhere; }
.red-rule { display: block; width: 45px; height: 2px; background: #813d27; margin: 25px auto; }
.saju-experience .chart-details { background: transparent; border: 0; padding: 0; margin-bottom: 36px; }
.saju-experience .chart-details > summary { list-style: none; text-align: center; border: 1px solid #503b2c; background: #1b130d; padding: 14px 10px; font-size: 12px; }
.chart-details > summary::-webkit-details-marker { display: none; }
.chart-toggle { display: block; color: #b9a78b; font-size: 11px; margin-top: 5px; }
.chart-toggle::after { content: ' ▾'; }
.chart-details[open] .chart-toggle::after { content: ' ▴'; }
.saju-experience .chart-details h2, .saju-experience .chart-details h3 { text-align: center; margin-top: 28px; }
.birth-chart { table-layout: fixed; width: 100%; margin-top: 22px; }
.birth-chart caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.saju-experience .birth-chart th, .saju-experience .birth-chart td { border: 1px solid #3c3225; padding: 10px 3px; text-align: center; font-weight: 400; font-size: 12px; }
.birth-chart th:first-child { width: 42px; }
.birth-chart td strong { display: block; font-size: 26px; font-weight: 400; }
.saju-experience .birth-chart td small { display: block; font-size: 10px; }
.unconfirmed { font-size: 10px; color: #9c9281; }
.element-wood { --element-color: #80aa73; }
.element-fire { --element-color: #ca8d7b; }
.element-earth { --element-color: #c5b574; }
.element-metal { --element-color: #c2c0b7; }
.element-water { --element-color: #879dcc; }
.birth-chart td[class^='element-'] { color: var(--element-color); background: color-mix(in srgb, var(--element-color) 14%, #100f0c); }
.element-bars { display: grid; gap: 12px; margin: 22px 0; }
.element-bar { display: grid; grid-template-columns: 24px 1fr 32px; align-items: center; gap: 12px; color: var(--element-color); font-size: 13px; }
.element-bar progress { display: block; width: 100%; height: 12px; border: 1px solid #3a342a; border-radius: 0; background: #171612; accent-color: var(--element-color); }
.element-bar progress::-webkit-progress-bar { background: #171612; }
.element-bar progress::-webkit-progress-value { background: var(--element-color); }
.element-bar progress::-moz-progress-bar { background: var(--element-color); }
.saju-experience .reading-seal { margin-top: 50px; margin-bottom: 36px; }
.reading-intro { text-align: center; color: #ac9b7e; font-size: 13px; line-height: 2; margin-bottom: 45px; }
.saju-experience .narrative article { margin: 45px 0 65px; }
.saju-experience .narrative h3 { font-size: 19px; display: flex; align-items: center; gap: 13px; margin-bottom: 27px; }
.chapter-symbol { font-size: 33px; color: #b76640; font-weight: 400; }
.saju-experience .narrative article > p { font-size: 18px; line-height: 2.15; margin: 22px 0; color: #d1c3a6; }
.saju-experience .narrative .evidence { border: 0; border-top: 1px solid #30291f; background: transparent; padding: 14px 0; margin-top: 28px; }
.saju-experience .narrative .evidence summary { font-size: 11px; color: #a09277; }
.saju-experience #paid-offer { border: 0; border-top: 1px solid #53422d; padding: 40px 0 20px; background: transparent; margin: 35px 0; }
.offer-intro { text-align: center; margin: 0 0 38px; }
.offer-intro > p { font-size: 14px; line-height: 2; color: #b6a68a; }
.saju-experience #toc { padding: 0; list-style: none; }
.saju-experience #toc li { position: relative; padding: 24px 18px 24px 57px; margin-bottom: 10px; border: 1px solid #3c3021; background: linear-gradient(110deg, #20170f, #100f0c); }
.chapter-number { position: absolute; top: 28px; left: 17px; color: #aa7950; font-size: 19px; }
.saju-experience #toc h3 { font-size: 17px; margin: 0 0 9px; }
.saju-experience #toc p { font-size: 13px; color: #aaa08d; line-height: 1.9; margin: 0 0 10px; }
.saju-experience #toc .chapter-lock { color: #a68d67; font-size: 10px; }
.saju-experience .sample-reading { background: transparent; border-color: #453b29; margin-top: 35px; }
.sample-reading article { margin: 20px 0; }
.offer-price { text-align: center; margin: 42px 0 0; border-top: 1px solid #433623; padding-top: 30px; }
.offer-price > p { font-size: 13px; color: #b8a789; }
.saju-experience .offer-price .price { font-size: 31px; margin: 14px 0; color: #e4c693; }
.saju-experience #continue-reading { width: 100%; background: #7c3926; border-color: #aa6944; color: #f0dcba; margin: 20px 0 0; }
.saju-experience .checkout-panel { border: 1px solid #5a4930; padding: 24px; margin: 36px 0; background: #15120e; scroll-margin-top: 18px; }
.checkout-panel h2 { margin-top: 16px; }
.saju-experience .checkout-panel #access-panel { padding: 25px 0; }
.saju-experience .checkout-panel #access-panel h2 { font-size: 20px; }
.checkout-panel #access-panel > p { font-size: 13px; }
.saju-experience .checkout-panel #pay { background: #7c3926; border-color: #aa6944; color: #f0dcba; }
.book-reader { margin: 40px 0; scroll-margin-top: 28px; }
.saju-experience .book-reader > h2 { font-size: 26px; }
.saju-experience .chapter-jump { font-size: 12px; color: #b1a17f; }
.book-controls { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #4e3f2b; padding-top: 16px; gap: 8px; }
.book-controls button { margin: 0; }
#chapter-progress { font-size: 13px; color: #ac9b7f; white-space: nowrap; }
.reading-tools { border-top: 1px solid #3e3324; margin-top: 40px; padding-top: 20px; }
.saju-experience button:disabled { cursor: default; }
@media (max-width: 480px) {
  .reading-title { margin-top: 25px; }
  .saju-experience .reading-title h1 { font-size: 30px; }
  .saju-experience .narrative article > p { font-size: 16px; }
  .saju-experience .checkout-panel { padding: 18px 14px; }
  .saju-experience #toc li { padding-left: 48px; padding-right: 12px; }
  .chapter-number { left: 12px; }
  .saju-experience .birth-chart th, .saju-experience .birth-chart td { font-size: 11px; padding: 9px 2px; }
  .saju-experience .birth-chart td small { font-size: 9px; }
  .birth-chart td strong { font-size: 23px; }
  .book-controls button { padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) { .analysis-orbit { animation: none; } }
.saju-experience .reading-title h1, .saju-experience .book-reader h2, .saju-experience .offer-intro h2 { word-break: keep-all; overflow-wrap: anywhere; }
.checkout-summary { color: #d8bd8b; font-size: 14px; line-height: 1.9; }
.reading-intro { word-break: keep-all; }

/* Center the customer reading, including the preview and purchased chapters. */
.saju-experience #result-panel { text-align: center; }
.saju-experience .narrative h3 { justify-content: center; }
.saju-experience .narrative article > p,
.saju-experience #sample article > p { max-width: 520px; margin-left: auto; margin-right: auto; text-align: center; word-break: keep-all; }
.saju-experience #toc li { padding: 24px 18px; }
.saju-experience .chapter-number { position: static; display: block; margin-bottom: 10px; }
.saju-experience #result-panel .check { justify-content: center; }
.saju-experience #result-panel .evidence pre { text-align: left; }
.saju-experience #result-panel .element-bars { text-align: center; }
.saju-experience #warnings { list-style-position: inside; padding-left: 0; }

/* Free beta: reach the interpretation first; technical material stays behind chapter 7. */
.beta-reading .reading-title { margin: 24px auto 20px; padding: 0; }
.beta-reading .reading-title h1 { font-size: clamp(25px, 6vw, 38px); }
.beta-reading .reading-title .red-rule { margin: 16px auto; }
.beta-reading .book-reader { padding-top: 12px; }
.beta-reading .narrative article { margin: 24px auto 36px; padding: 0; }
.beta-reading .narrative h3 { font-size: clamp(21px, 5vw, 28px); margin: 22px 0; }
.beta-reading .narrative p { font-family: system-ui, sans-serif; font-size: 17px; line-height: 1.9; margin: 18px auto; max-width: 620px; word-break: keep-all; overflow-wrap: anywhere; }
.beta-reading .part-label { display: block; color: #c7af78; font-size: 13px; margin-bottom: 5px; }
.beta-reading .period-tags { font-size: 13px; color: #c7af78; }
.beta-reading .evidence { font-size: 13px; margin: 24px 0; }
.beta-reading .evidence p { font-size: 14px; }
.beta-reading .book-controls { position: static; }
.beta-reading #book-version { font-size: 12px; }
.beta-reading #mode { font-size: 13px; padding: 10px; }
.beta-reading .chapter-jump { margin-bottom: 18px; }
@media(max-width:480px) {
 .beta-reading .narrative p { font-size: 16px; line-height: 1.85; }
 .beta-reading .reading-title { margin-top: 18px; }
 .beta-reading .book-controls { gap: 6px; }
 .beta-reading .book-controls button { padding: 12px 8px; font-size: 13px; }
}

.beta-reading .flow-timeline { border: 1px solid #554a34; padding: 14px; margin: 24px 0; }
.beta-reading .flow-timeline ul { padding-left: 0; list-style: none; font: 14px/1.9 system-ui,sans-serif; }
.beta-reading .flow-timeline li { margin: 10px 0; overflow-wrap: anywhere; }

.story-basis { padding: 18px 0; border-bottom: 1px solid #554a34; }
.story-basis > summary { cursor: pointer; line-height: 1.7; }

/* One continuous story; only quiet, unnumbered topic breaks. */
.saju-experience .story-section { margin: 0 auto; padding: 32px 0; max-width: 680px; }
.saju-experience .story-section + .story-section { border-top: 1px solid #493c2b; }
.saju-experience .story-section > h3 { color: #c7af78; font-size: 21px; font-weight: 500; margin: 0 0 26px; }
.saju-experience .story-section:first-child { padding-top: 16px; }
@media (max-width:480px) {
 .saju-experience .story-section { padding: 26px 0; }
 .saju-experience .story-section > h3 { font-size: 19px; }
}

/* Reference reading typography: Nanum Myeongjo, one sentence per paragraph. */
@font-face {
 font-family: 'Nanum Myeongjo'; font-style: normal; font-weight: 400; font-display: swap;
 src: url('/saju/fonts/NanumMyeongjo-Regular.ttf') format('truetype');
}
.saju-experience .narrative article {
 display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 28px auto;
}
.saju-experience .narrative article > p {
 font-family: 'Nanum Myeongjo', Gungsuh, Batang, serif;
 font-size: 19px; font-weight: 400;
 line-height: 2; letter-spacing: .01em; text-align: left;
 color: #e0d5bf; word-break: keep-all; overflow-wrap: anywhere;
 width: 100%; max-width: none; margin: 0; padding: 0;
}
.saju-experience .story-section > h3 {
 font-family: 'Nanum Myeongjo', Gungsuh, Batang, serif; font-weight: 400;
}

/* Keep line wrapping stable while Korean graphemes appear. */
.reading-letter { opacity: 0; transition: opacity 90ms ease-out; }
.reading-letter.is-written { opacity: 1; }
.reading-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saju-experience #skip-reading-motion { display: block; width: auto; margin: 12px auto 28px; font-size: 12px; padding: 9px 14px; }
.saju-experience #skip-reading-motion[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .reading-letter { opacity: 1; transition: none; } }
@media print { .reading-letter { opacity: 1; } #skip-reading-motion { display: none !important; } }

/* Readable story rhythm: related sentences stay close; a new thought gets space. */
.saju-experience .narrative article > .story-paragraph-start { margin-top: 20px; }
.saju-experience .narrative article > .period-tags {
 display: flex; flex-direction: column; gap: 6px; width: auto;
 padding: 12px 16px; margin-bottom: 12px; border-left: 2px solid #9e855b;
 background: #191713; font: 14px/1.7 system-ui, sans-serif; color: #d6c5a5;
}
.saju-experience .story-section > h3 { font-size: 23px; color: #e8d2a3; margin-bottom: 28px; }
.saju-experience .story-section { padding: 40px 0; }
.saju-experience #skip-reading-motion { min-height: 44px; color: #d6c5a5; font-size: 13px; }
@media (max-width:480px) {
 .saju-experience main { padding-left: 20px; padding-right: 20px; }
 .saju-experience .narrative article > p { font-size: 18px; line-height: 2; }
 .saju-experience .story-section { padding: 32px 0; }
 .saju-experience .story-section > h3 { font-size: 22px; }
 .saju-experience .narrative article > .period-tags { font-size: 13px; }
}
/* Simple checkout choices; native radios remain keyboard-accessible. */
.payment-methods { border: 1px solid #51432e; border-radius: 10px; padding: 16px; margin: 24px 0; min-width: 0; }
.payment-methods legend { padding: 0 8px; }
.payment-methods .check { padding: 12px; border: 1px solid #51432e; border-radius: 8px; cursor: pointer; }
.payment-methods .check:has(input:checked) { border-color: #ceb27c; background: #302719; }
#free-limits { margin: 24px 0; line-height: 1.8; }
.report-save { margin: 48px 0; padding: 24px 16px; border: 1px solid #51432e; border-radius: 12px; text-align: center; }
.report-save p { line-height: 1.8; }
.report-save button { display: block; width: 100%; margin: 12px 0; }
@media print {
 body.saju-experience { background: white !important; color: black !important; }
 body.saju-experience header, body.saju-experience footer, main > :not(#result-panel),
 #result-panel > :not(#full-report), #full-report > :not(#chapter-content):not(#book-title),
 #report-save { display: none !important; }
 body.saju-experience main, #full-report { max-width: none; width: auto; margin: 0; padding: 0; }
 .saju-experience .narrative *, .saju-experience .story-section > h3, #book-title { color: black !important; background: white !important; }
 .saju-experience .narrative article > p { font-size: 12pt; line-height: 1.8; }
 .saju-experience .story-section { break-inside: auto; }
 .saju-experience .story-section > h3 { break-after: avoid; }
}
/* Lightweight book animation while the real calculation/request is pending. */
.analysis-book { position:relative; width:220px; height:152px; margin:12px auto 42px; perspective:750px; filter:drop-shadow(0 14px 22px #0008); }
.book-cover { position:absolute; inset:3px -7px -7px; border-radius:5px 10px 10px 5px; background:#554128; border:1px solid #a58a55; transform:rotateX(12deg); }
.book-left,.book-right,.book-leaf { position:absolute; top:0; width:110px; height:144px; padding:22px; box-sizing:border-box; background:#e4d3ab; color:#705936; font:22px/1.45 'SajuMyeongjo',serif; letter-spacing:6px; border:1px solid #ad9363; }
.book-left { left:0; border-radius:7px 0 0 7px; background:linear-gradient(90deg,#decca4,#eee0c1 80%,#b9a17c); }
.book-right { right:0; border-radius:0 7px 7px 0; background:linear-gradient(90deg,#baa07a,#eee0c1 20%,#decca4); }
.book-leaf { left:50%; border-radius:0 7px 7px 0; transform-origin:left center; backface-visibility:visible; animation:saju-page-turn 3.6s ease-in-out infinite; }
.book-leaf span { display:block; opacity:.7; }
.leaf-one { animation-delay:-2.4s; }
.leaf-two { animation-delay:-1.2s; }
.leaf-three { animation-delay:0s; }
@keyframes saju-page-turn { 0%,12% { transform:rotateY(0deg); z-index:4; } 48%,82% { transform:rotateY(-178deg); z-index:4; } 83%,100% { transform:rotateY(-178deg); z-index:1; } }
.saju-experience #personal-teaser { margin:24px auto; padding:20px 16px; max-width:520px; border-top:1px solid #665131; border-bottom:1px solid #665131; color:#efd5a4; font-size:19px; line-height:1.9; word-break:keep-all; }
@media(prefers-reduced-motion:reduce) { .book-leaf { animation:none; } .leaf-one,.leaf-two { display:none; } }
/* Continuous reading into a decorative lock; no paid text in the masked DOM. */
.money-story-mask { max-width:510px; margin:20px auto -18px; padding:0 12px; overflow:hidden; user-select:none; pointer-events:none; -webkit-mask-image:linear-gradient(#0008,#0000); mask-image:linear-gradient(#0008,#0000); }
.money-story-mask span { display:block; height:15px; margin:20px auto; width:94%; filter:blur(4px); opacity:.55; background:repeating-linear-gradient(90deg,#b8a782 0 9px,transparent 9px 14px); }
.money-story-mask span:nth-child(2n) { width:78%; }
.money-story-mask span:nth-child(3n) { width:87%; }
.saju-experience #paid-offer { border-top:0; margin:0; padding:0 0 20px; }
#paid-offer .offer-intro { margin:0 0 24px; }
#paid-offer .offer-price { margin-top:24px; padding-top:0; border-top:0; }
/* Preview topics flow as paragraphs without chapter headings. */
.saju-experience #preview > section + section { margin-top:28px; }
.saju-experience #preview > section { padding:0; }

.saju-experience .continuous-story .story-section { padding:12px 0; }
.saju-experience .continuous-story .story-section > .reading-accessible { margin:0; padding:0; }