/* Illustrated chart spread. Labels and proportions use the saved calculation. */
body.gyeol-mobile-ui #reading-app .report-chart{padding:26px 0;border:0;border-top:1px solid #dedbcd;border-bottom:1px solid #dedbcd;border-radius:0;background:transparent}
body.gyeol-mobile-ui #reading-app .report-chart>h2{font:500 23px/1.6 var(--serif);color:#344b3a;margin:0 0 8px}
body.gyeol-mobile-ui #reading-app .report-chart>p.muted{font:400 11px/1.7 var(--sans);color:#8a8d7e;margin:0 0 25px}
body.gyeol-mobile-ui #reading-app .saju-chart{--element-color:#697b5c;margin:0}
body.gyeol-mobile-ui #reading-app .saju-chart [data-element=wood]{--element-color:#64795c;--element-light:#eef0e5}
body.gyeol-mobile-ui #reading-app .saju-chart [data-element=fire]{--element-color:#af715c;--element-light:#f5ede5}
body.gyeol-mobile-ui #reading-app .saju-chart [data-element=earth]{--element-color:#a48c5d;--element-light:#f3eedf}
body.gyeol-mobile-ui #reading-app .saju-chart [data-element=metal]{--element-color:#7f8990;--element-light:#f0f0e9}
body.gyeol-mobile-ui #reading-app .saju-chart [data-element=water]{--element-color:#5f8280;--element-light:#ecf0e9}
body.gyeol-mobile-ui #reading-app .saju-chart .example-kicker{font:400 10px/1.6 var(--sans);letter-spacing:.12em;color:#95876d;margin:0 0 6px}
body.gyeol-mobile-ui #reading-app .saju-chart>h3{font:500 21px/1.5 var(--serif);color:#344b3a;margin:0 0 20px}
body.gyeol-mobile-ui #reading-app .saju-chart .example-pillars{gap:8px;margin:0 0 26px}
body.gyeol-mobile-ui #reading-app .saju-chart .example-pillar-column h4{font:500 12px/1.6 var(--sans);color:#7d8572;margin:0 0 10px}
body.gyeol-mobile-ui #reading-app .saju-chart .example-pillar-column:nth-child(2) h4{color:#927b4f}
body.gyeol-mobile-ui #reading-app .saju-chart .example-pillar-tile{min-height:151px;gap:6px;margin:0 0 8px;padding:10px 2px 9px;border:1px solid #dfdacb;border-top:2px solid color-mix(in srgb,var(--element-color) 55%,#e4decd);border-radius:3px;background:linear-gradient(180deg,#fffdf980,#f1eddf45);color:var(--element-color);overflow:hidden}
body.gyeol-mobile-ui #reading-app .saju-chart .example-tile-kind{font:400 9px/1.5 var(--sans);color:#a09a87}
body.gyeol-mobile-ui #reading-app .saju-chart .example-symbol{display:block;flex:none;width:58px;height:58px;max-width:100%;margin:0;object-fit:contain}
body.gyeol-mobile-ui #reading-app .saju-chart .example-animal{border:0;border-radius:0;object-fit:contain;background:transparent}
body.gyeol-mobile-ui #reading-app .saju-chart .example-unknown{position:relative;opacity:.4}
body.gyeol-mobile-ui #reading-app .saju-chart .example-unknown::before{content:'';position:absolute;top:50%;left:35%;right:35%;height:1px;background:#a4a493}
body.gyeol-mobile-ui #reading-app .saju-chart .example-tile-name{display:flex;align-items:baseline;justify-content:center;gap:4px;white-space:nowrap;font:400 11px/1.3 var(--sans);color:#736d5c}
body.gyeol-mobile-ui #reading-app .saju-chart .example-tile-name b{font:400 28px/1.1 var(--serif);color:var(--element-color)}
body.gyeol-mobile-ui #reading-app .saju-chart .example-tile-animal{font:400 10px/1.3 var(--sans);color:#99917e}
body.gyeol-mobile-ui #reading-app .saju-chart .example-pillar-god{font:400 10px/1.5 var(--sans);color:#8f917f;margin:9px 0 0}
body.gyeol-mobile-ui #reading-app .saju-chart .example-chart{margin:26px 0 0;padding:22px 0 0;border:0;border-top:1px solid #ddd9ca;border-radius:0;background:transparent}
body.gyeol-mobile-ui #reading-app .saju-chart .example-chart-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 19px}
body.gyeol-mobile-ui #reading-app .saju-chart .example-chart-heading h3{font:500 21px/1.5 var(--serif);color:#344b3a;margin:0}
body.gyeol-mobile-ui #reading-app .saju-chart .example-chart-heading>span{font:400 10px/1.6 var(--sans);color:#8e917f}
body.gyeol-mobile-ui #reading-app .saju-chart .example-elements{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element{display:grid;grid-template-columns:38px 29px minmax(0,1fr) 37px;align-items:center;gap:10px;text-align:left}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element-illustration{display:block;width:38px;height:38px;object-fit:contain}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element-label{display:flex;flex-direction:column;gap:1px;font:500 12px/1.5 var(--sans);color:#65735d}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element-label small{font:400 10px/1.3 var(--serif);color:#9b9c8a;margin:0}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element-track{display:block;width:100%;height:4px;border:0;border-radius:0;background:#e6e3d8;overflow:hidden}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element-track>span{display:block;height:100%;min-height:0;border-radius:0;background:var(--element-color)}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element>strong{display:flex;justify-content:end;align-items:baseline;gap:3px;font:500 22px/1 var(--serif);color:#4d5e47}
body.gyeol-mobile-ui #reading-app .saju-chart .example-element>strong small{font:400 9px/1.5 var(--sans);color:#929785;margin:0}
body.gyeol-mobile-ui #reading-app .saju-chart .example-footnote{font:400 10px/1.7 var(--sans);color:#989a88;margin:19px 0 0}
@media(max-width:359px){body.gyeol-mobile-ui #reading-app .saju-chart .example-pillars{gap:5px}body.gyeol-mobile-ui #reading-app .saju-chart .example-symbol{width:48px;height:48px}body.gyeol-mobile-ui #reading-app .saju-chart .example-pillar-tile{min-height:140px}body.gyeol-mobile-ui #reading-app .saju-chart .example-tile-name b{font-size:25px}body.gyeol-mobile-ui #reading-app .saju-chart .example-element{grid-template-columns:34px 24px minmax(0,1fr) 35px;gap:7px}}