/* Reading room: one spacious inline chapter at a time. */
#experience .intro-panel{grid-column:1/-1;width:100%;margin-top:0;scroll-margin-top:30px}
#experience .intro-panel p{font-size:15.4px;line-height:1.8;margin:12px 0 0}
.intro-sections{display:grid;gap:24px}
.intro-sections>section{padding:22px 26px;background:#f1ede3;border-left:2px solid #bca77f}
.intro-next{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:28px}
.intro-next .text-link{font-size:15.4px;text-align:left}
#reading-intro-toggle[aria-expanded=true] span{display:inline-block;transform:rotate(180deg)}
@media(max-width:680px){.intro-sections>section{padding:18px}.intro-next{flex-direction:column;align-items:flex-start}}
.reading-links{scroll-margin-top:30px}
.reading-links button[aria-expanded=true]{border-top:3px solid #876c3b;background:linear-gradient(#e2d9c655,transparent);padding-left:16px;padding-right:16px}
.reading-links button[aria-expanded=true] b{transform:rotate(135deg)}
.reading-panel{border-top:1px solid #c8b58e;margin-top:24px;padding:60px 0 10px;animation:reading-open .4s ease-out}
.reading-panel-heading{max-width:900px;margin:0 auto 44px}
.reading-panel h3{font-size:34px;line-height:1.6;margin-bottom:24px;word-break:keep-all}
.reading-panel h4{font:26px/1.6 Dalbit;margin:0 0 14px;word-break:keep-all}
.reading-panel p{font-size:21px;line-height:1.95;color:#4e625b;margin:16px 0;word-break:keep-all}
.reading-panel .eyebrow{font-size:16px;color:#99783d}
.reading-callout{padding:36px 40px;background:#e4ddcc77;border-left:3px solid #a88b53;margin:46px 0}
.reading-callout p:last-child{margin-bottom:0}
.pillar-explanations,.education-roles{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:44px 0}
.pillar-explanations article,.education-roles article{border-top:1px solid #bca77f;padding:30px;background:#fbf9f0}
.education-elements{display:grid;gap:28px}
.education-element{display:grid;grid-template-columns:260px 1fr;gap:36px;background:#fcfaf3;align-items:center;overflow:hidden;border:1px solid #e1d8c6;border-radius:8px}
.education-element img{width:100%;height:240px;object-fit:cover}
.education-element>div{padding:20px 32px 20px 0}
.relation-section{margin-top:65px}
.relation-layout{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}
.relation-diagram{margin:0}.relation-diagram svg{width:100%;height:auto;overflow:visible}
.relation-diagram line{fill:none;stroke-width:2.5}.relation-diagram .sheng{stroke:#557c65}.relation-diagram .ke{stroke:#ac804a;stroke-dasharray:7 6}
.relation-diagram circle{fill:#faf7eb;stroke:#bcac8b;stroke-width:1.5}
.relation-diagram text{font:35px Dalbit;text-anchor:middle;fill:#39594c}.relation-diagram .diagram-hanja{font:19px Dalbit}
.diagram-fire text{fill:#aa593e}.diagram-earth text{fill:#9d7d35}.diagram-metal text{fill:#697779}.diagram-water text{fill:#426882}
.relation-diagram figcaption{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:17px;color:#665a43}
.relation-layout .relation-sequence{font-size:18px;color:#8b6b37;border-top:1px solid #d1c3a8;padding-top:15px}
.role-path{display:flex;justify-content:center;align-items:center;gap:25px;padding:35px;background:#203f45;color:#f3e8cd;font-size:20px;border-radius:70px}
.role-path strong{font:32px Dalbit}.role-number{font:24px Georgia;color:#a68b56;display:block;margin-bottom:12px}
@keyframes reading-open{from{opacity:.2;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* Same palette and character artwork as the approved PDF, with live text. */
.natal-sheet{background:#f5eedb url('/assets/pillars/jade-paper.png') center/100% 100% no-repeat;padding:48px 45px 60px;border:1px solid #ad9468;border-radius:5px;max-width:1000px;margin:0 auto}
.natal-sheet>h3{text-align:center;font:36px/1.5 Dalbit;margin-bottom:32px;color:#47351f}
.chart-scroll{overflow-x:auto;padding:10px 6px 18px;scrollbar-color:#b5a075 #eee6d5;border-radius:10px}
.natal-sheet .chart{min-width:610px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:28px 12px;background:#fffdf4dd;border:1px solid #cdbd98;border-radius:10px;box-shadow:0 8px 22px #5d51371a}
.natal-sheet .pillar,.natal-sheet .pillar.day{background:none;border:0;border-radius:0;padding:0 12px;text-align:center}
.natal-sheet .pillar+.pillar{border-left:1px solid #d9cba9}
.natal-sheet .pillar-label{font-size:24px;color:#59492e;margin-bottom:22px}
.pillar-label span{display:block;font-size:18px;color:#877658;margin-top:2px}
.natal-sheet .pillar-part+.pillar-part{border:0;margin-top:18px;padding-top:0}
.natal-sheet .pillar-role{font-size:20px;color:#685236;min-height:36px;margin-bottom:8px}
.natal-sheet .pillar-reading{font-size:24px;color:#7d6948;margin-top:12px}
.natal-sheet .pillar-glyph{display:grid;place-items:center;width:90px;height:90px;margin:auto;border:2px solid var(--tile-edge);border-radius:9px;background:linear-gradient(145deg,var(--tile-top),var(--tile-bottom));box-shadow:inset 0 0 0 2px #ffffff35,0 4px 9px #382c252b;font-size:47px;color:#fff}
.pillar-glyph img{width:74px;height:74px;filter:brightness(0) invert(1);object-fit:contain}
.pillar-glyph.element-metal img{filter:none}
.element-wood{--tile-edge:#185e2d;--tile-top:#38a456;--tile-bottom:#23753b}
.element-fire{--tile-edge:#98252a;--tile-top:#df3b42;--tile-bottom:#b9272e}
.element-earth{--tile-edge:#9a7211;--tile-top:#e5b72c;--tile-bottom:#c89816}
.element-metal{--tile-edge:#56585a;--tile-top:#fffefd;--tile-bottom:#eeeae7}
.element-water{--tile-edge:#090d12;--tile-top:#20242a;--tile-bottom:#0c0f13}
.element-unknown{--tile-edge:#81786f;--tile-top:#aaa198;--tile-bottom:#827a72}
.natal-sheet .day-master .pillar-glyph{outline:4px solid #243b42;outline-offset:3px}
.natal-sheet .day-master .pillar-role{color:#174b63;font-weight:bold}
.example-sheet{max-width:900px}.reading-panel .sheet-person{text-align:center;font-size:18px;color:#715a35}.blank-field{display:inline-block;width:70px;border-bottom:1px solid #bba77c;margin:0 12px}.reading-panel .sheet-caption{font-size:17px;text-align:center;margin-top:-20px}
.example-counts{display:flex;justify-content:center;gap:10px;margin-top:25px;flex-wrap:wrap}.example-counts>span{border:1px solid var(--tile-edge);border-radius:6px;background:#fffaf0;padding:10px 16px;font-size:20px;color:#635335}.example-counts b{margin-left:8px}
/* Result readability: headings and large symbols keep their existing size. */
.result-head>.eyebrow,#chart-section .eyebrow,#elements-section .eyebrow,#animal-section .eyebrow,#complement-section>.eyebrow{font-size:22px}
.result-head>p:not(.eyebrow){font-size:26px}.result-actions .text-link,#chart-section .text-link{font-size:24px}.result-actions{gap:52px;flex-wrap:wrap}
.result-nav{font-size:16.8px;gap:48px;justify-content:safe center;overflow-x:auto;white-space:nowrap;padding:24px}
#chart-section .caption,#elements-section .caption{font-size:14px}
#elements-section .section-heading p:not(.eyebrow){font-size:17px}
#elements .element-label{font-size:24px;display:block;margin:6px 0}
#elements .element-count small{font-size:11px}
#element-insight{font-size:17px;line-height:1.9}
#animal-section .animal-pillar{font-size:26px}#animal-section .keywords{font-size:24px}#animal-section .caption{font-size:13px;line-height:1.9}
#complement-pair small{font-size:14px}#complement-pair p{font-size:16.8px}#complement-pair h3{font-size:23px}
#rationale{font-size:17px;max-width:none;line-height:1.9}
#functions p{font-size:17px;line-height:1.9}
#rationale{word-break:keep-all;overflow-wrap:anywhere}
.result-section,.animal-section,.guide-section{scroll-margin-top:115px}
.chart-swipe-hint{display:none}
@media(max-width:1000px){.relation-layout{grid-template-columns:1fr}.relation-diagram{max-width:580px;margin:auto}.animal-inner{gap:35px}.complement-pair{flex-direction:column}.reading-panel p{font-size:20px}}
@media(max-width:680px){
 .reading-panel{padding-top:34px}.reading-panel h3{font-size:29px}.reading-panel h4{font-size:24px}.reading-panel p{font-size:19px;line-height:1.9}
 .natal-sheet{padding:26px 10px 35px}.natal-sheet>h3{font-size:29px}.natal-sheet .chart{min-width:600px}.chart-scroll{padding:12px 7px 18px}
 .natal-sheet .chart-swipe-hint{display:block;font:15px/1.6 'Malgun Gothic',sans-serif;text-align:center;color:#715c35;margin:0 0 12px}
 .reading-panel .sheet-person{font-size:16px}.blank-field{width:40px;margin:0 5px}.pillar-explanations,.education-roles{grid-template-columns:1fr;gap:20px}
 .pillar-explanations article,.education-roles article{padding:24px}.reading-callout{padding:25px 22px}
 .education-element{grid-template-columns:1fr;gap:0}.education-element img{height:210px}.education-element>div{padding:24px}.role-path{flex-direction:column;gap:10px;border-radius:18px;text-align:center;padding:28px 20px}
 .result-actions{gap:18px}.result-actions .text-link{font-size:24px}.result-nav{gap:30px;font-size:16.8px;padding:18px 20px}
 #chart-section .section-heading,#elements-section .section-heading{align-items:flex-start;flex-direction:column;gap:20px}
 #elements-section .section-heading p:not(.eyebrow){max-width:none;width:100%;align-self:flex-start}
 #elements{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#elements .element-card{padding:20px 16px}#elements .element-label{font-size:24px}
 #element-insight{font-size:17px;padding:20px}.function-grid{grid-template-columns:1fr}
 #complement-pair .complement-card{padding:24px 20px;gap:18px}.complement-seal{flex-shrink:0}#rationale{font-size:17px}.animal-copy .caption{margin-top:26px}
}
@media(prefers-reduced-motion:reduce){.reading-panel{animation:none}}
/* 2026-11-05 final hierarchy: large section titles, 24px subheads, 17px prose. */
#animal-description{font-size:24.7px;line-height:1.9}
#functions h3{font-size:24px}
#elements .element-symbol{display:flex;align-items:center;gap:12px}
#elements .element-symbol svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#guides-section .eyebrow,#routine-section .eyebrow,#recommend-section .eyebrow{font-size:13px}
#guides-section .section-lead{font-size:17px;line-height:1.9;margin-bottom:30px}
.guide-copy h3{font-size:28px;line-height:1.5;word-break:keep-all}
.guide-copy>p:not(.eyebrow),.guide-detail p{font-size:17px;line-height:1.85}
.guide-detail h4{font-size:18px;margin:18px 0 5px}
.guide-copy>.eyebrow{margin-bottom:12px}
.guide-block{gap:40px;padding:34px 0;align-items:start}
.guide-copy{min-width:0}.guide-copy p,.style-card p,.routine p{overflow-wrap:anywhere}
.guide-visual{position:static}
.style-card h4{font-size:24px;line-height:1.6}.style-card p{font-size:17px;line-height:1.85;margin-top:16px}
.accessory-artwork{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 24px}.style-card .accessory-image{width:100%;max-width:none;height:auto;aspect-ratio:695/720;object-fit:contain;margin:0;border-radius:6px}
#routine-section .section-heading>p{font-size:17px;max-width:430px}
.routine-number{font-size:13px}.routine h3{font-size:24px;line-height:1.6;word-break:keep-all}
.routine p{font-size:17px;line-height:1.85}.routine{padding:26px;gap:16px}
#routine-progress{font-size:14px}
#recommend-section>p:not(.eyebrow){font-size:17px;line-height:1.9}
#products .store-panel p{font-size:17px;line-height:1.9}
#products .button{font-size:20px;flex-shrink:0}
#products .store-panel{flex-wrap:wrap}
.experience p:not(.eyebrow){font-size:14.28px}
@media(max-width:1000px){.style-grid{grid-template-columns:1fr}.guide-block{grid-template-columns:1fr}.guide-block:nth-child(even) .guide-visual{order:0}.guide-visual{position:static;max-width:650px}.routines{grid-template-columns:1fr}}
@media(max-width:680px){
 .guide-copy h3{font-size:27px}.guide-block{gap:24px}.guide-detail h4{margin-top:18px}
 #routine-section .section-heading{flex-direction:column;align-items:flex-start;gap:20px}
 #routine-section .section-heading>p{max-width:none;width:100%;align-self:flex-start}
 .routine{padding:24px 18px;gap:14px}.routine h3{font-size:24px}
 #animal-description{font-size:22.1px}
 #products .button{width:100%;padding:20px 16px}.style-card{padding:24px}
}

/* 2026-11-05: compact reading chapters, matching the menu descriptions. */
.reading-panel{padding-top:34px;scroll-margin-top:28px}
.reading-panel-heading{margin-bottom:26px}
.reading-panel p,.reading-panel .sheet-person,.reading-panel .sheet-caption,.reading-panel .relation-sequence{font-size:15.4px;line-height:1.8;margin:12px 0}
.reading-panel h3{font-size:28px;line-height:1.5;margin-bottom:18px}
.reading-panel h4{font-size:22px;line-height:1.5;margin-bottom:12px}
.reading-panel .eyebrow{font-size:13px}
.reading-callout{padding:24px 28px;margin:28px 0}
.pillar-explanations,.education-roles{gap:20px;margin:28px 0}
.pillar-explanations article,.education-roles article{padding:24px}
.education-elements{gap:20px}.education-element{grid-template-columns:210px 1fr;gap:26px}.education-element img{height:200px}
.education-element>div{padding:18px 24px 18px 0}
.relation-section{margin-top:36px}.relation-layout{gap:30px}.relation-diagram{max-width:440px}.relation-diagram figcaption{font-size:15.4px}
.role-path{font-size:17px;padding:22px;gap:18px}.role-path strong{font-size:26px}.role-number{font-size:19px;margin-bottom:8px}
.reading-panel .example-sheet{max-width:680px;padding:22px 26px 28px}
.reading-panel .example-sheet>h3{font-size:29px;margin:12px 0 6px}
.example-sheet .chart-scroll{padding:8px 2px}
.example-sheet .chart{min-width:0;padding:18px 8px}
.example-sheet .pillar{padding:0 8px}
.example-sheet .pillar-label{font-size:18px;margin-bottom:12px}
.example-sheet .pillar-label span{font-size:14px}
.example-sheet .pillar-role{font-size:15px;min-height:24px;margin-bottom:5px}
.example-sheet .pillar-glyph{width:68px;height:68px}
.example-sheet .pillar-glyph img{width:57px;height:57px}
.example-sheet .pillar-reading{font-size:17px;margin-top:7px}
.example-sheet .pillar-part+.pillar-part{margin-top:12px}
.example-sheet .example-counts{margin-top:14px;gap:8px}
.example-sheet .example-counts>span{font-size:15.4px;padding:7px 10px}
.example-sheet .chart-swipe-hint{display:none}
.reading-next{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #c8b58e;padding-top:24px;margin-top:32px}
.reading-next .text-link{font-size:19px;display:flex;align-items:center;gap:22px;padding:10px 0;text-align:left}
@media(max-width:680px){
 .reading-panel h3{font-size:25px}.reading-panel h4{font-size:21px}
 .reading-callout,.pillar-explanations article,.education-roles article{padding:20px}
 .education-element{grid-template-columns:1fr;gap:0}.education-element>div{padding:20px}
 .reading-panel .example-sheet{padding:18px 10px 22px}
 .example-sheet .chart{padding:12px 2px}.example-sheet .pillar{padding:0 3px}
 .example-sheet .pillar-label{font-size:15px;margin-bottom:8px}.example-sheet .pillar-label span{font-size:11px}
 .example-sheet .pillar-role{font-size:12px}.example-sheet .pillar-reading{font-size:13px}
 .example-sheet .pillar-glyph{width:clamp(42px,12vw,60px);height:clamp(42px,12vw,60px);border-radius:6px}
 .example-sheet .pillar-glyph img{width:85%;height:85%}.example-sheet .day-master .pillar-glyph{outline-width:2px;outline-offset:2px}
 .example-sheet .example-counts{gap:4px}.example-sheet .example-counts>span{padding:5px;font-size:12px}.example-counts b{margin-left:4px}
 .reading-next{flex-direction:column;gap:8px}.reading-next .text-link{font-size:17px;justify-content:space-between}
}
/* 2026-11-05: actual result chart at 70%, with full PDF element frames. */
#chart-section .natal-sheet{max-width:700px;padding:33.6px 31.5px 42px}
#chart-section .natal-sheet>h3{font-size:25.2px;margin-bottom:22.4px}
#chart-section .chart-scroll{padding:7px 4.2px 12.6px}
#chart-section .chart{min-width:0;padding:19.6px 8.4px}
#chart-section .pillar{padding:0 8.4px}
#chart-section .pillar-label{font-size:16.8px;margin-bottom:15.4px}
#chart-section .pillar-label span{font-size:12.6px}
#chart-section .pillar-role{font-size:14px;min-height:25.2px;margin-bottom:5.6px}
#chart-section .pillar-reading{font-size:16.8px;margin-top:8.4px}
#chart-section .pillar-glyph{width:63px;height:63px;border-radius:6.3px;font-size:32.9px}
#chart-section .pillar-glyph img{width:51.8px;height:51.8px}
#chart-section .pillar-part+.pillar-part{margin-top:12.6px}
#chart-section .day-master .pillar-glyph{outline-width:2.8px;outline-offset:2.1px}
#chart-section .chart-swipe-hint{display:none}
#complement-pair .complement-card{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:1.5;min-width:0;padding:38px 24px 40px 58px;background:#fffdf4;border-radius:4px;overflow:hidden}
.complement-frame{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.complement-copy{text-align:center;max-width:100%}
#complement-pair .complement-seal{width:auto;height:auto;display:flex;justify-content:center;align-items:center;gap:12px;background:none;margin:0 auto 14px;font-size:36px;color:var(--element)}
.complement-seal svg{width:40px;height:40px}
#complement-pair h3{font-size:26px;margin:8px 0}
#complement-pair p{font-size:16.8px;margin:0}
#complement-pair small{font-size:14px;color:#776044}
@media(min-width:681px) and (max-width:1000px){#complement-pair{flex-direction:row}}
@media(max-width:680px){
 #chart-section .natal-sheet{padding:20px 8px 25px}
 #chart-section .chart{padding:15px 2px}
 #chart-section .pillar{padding:0 3px}
 #chart-section .pillar-label{font-size:15px;margin-bottom:12px}
 #chart-section .pillar-label span{font-size:10px}
 #chart-section .pillar-role{font-size:12px}
 #chart-section .pillar-reading{font-size:13px}
 #chart-section .pillar-glyph{width:clamp(38px,12vw,63px);height:clamp(38px,12vw,63px)}
 #chart-section .pillar-glyph img{width:82%;height:82%}
 #complement-pair .complement-card{flex:auto;width:100%;padding:28px 18px 30px 36px;min-height:220px}
 #complement-pair .complement-seal{font-size:28px;margin-bottom:8px}
 .complement-seal svg{width:32px;height:32px}
 #complement-pair h3{font-size:24px}
 #complement-pair small{font-size:12px}
}
.complement-copy{line-height:1.4}
.complement-seal svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#complement-pair .complement-seal{line-height:1.2}
#complement-pair small{display:block;line-height:1.5}
#complement-pair h3{line-height:1.4}
@media(max-width:680px){#complement-pair .complement-card{min-height:240px}}