/* JoyNote editorial polish: readable typography and responsive article layout. */
:root{--jn-text:#17212f;--jn-muted:#5f6b7a;--jn-accent:#7f1d1d;--jn-line:#e4e9f0;--jn-soft:#f7f9fc}
body{color:var(--jn-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.72;text-rendering:optimizeLegibility}
.nav{scrollbar-width:none;-ms-overflow-style:none}.nav::-webkit-scrollbar{width:0;height:0;display:none}
.wrap{grid-template-columns:minmax(0,1fr) 300px;gap:32px}.content{padding:42px 46px}
h1{max-width:100%;margin:8px 0 20px;font-size:clamp(2rem,3vw,3rem);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(1.55rem,2vw,2rem);line-height:1.25;letter-spacing:-.015em;text-wrap:balance}h3{font-size:1.28rem;line-height:1.35}
.lead{max-width:68ch;color:#344256;font-size:1.14rem;line-height:1.7}.content p,.content li{max-width:76ch}
.hero-image{max-height:480px;aspect-ratio:16/9;object-fit:cover}
.answer-box{margin:26px 0;padding:22px 24px;border:1px solid #dbe4ee;border-left:5px solid var(--jn-accent);border-radius:14px;background:linear-gradient(135deg,#fff 0%,var(--jn-soft) 100%)}
.answer-box h2{margin:0 0 10px;font-size:1.35rem}.answer-box p:last-child,.answer-box ul:last-child{margin-bottom:0}
.fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 30px}.fact{padding:16px 18px;border:1px solid var(--jn-line);border-radius:12px;background:var(--jn-soft)}.fact strong{display:block;margin-bottom:2px;color:var(--jn-accent)}
.table-scroll{max-width:100%;margin:22px 0 30px;overflow-x:auto;border:1px solid var(--jn-line);border-radius:14px}.table-scroll table{width:100%;min-width:560px;border-collapse:collapse;background:#fff}.table-scroll th,.table-scroll td{padding:13px 15px;border-bottom:1px solid var(--jn-line);text-align:left;vertical-align:top}.table-scroll th{background:var(--jn-soft);font-size:.92rem}.table-scroll tr:last-child td{border-bottom:0}
.sidebar h2{font-size:1.45rem;line-height:1.2}.side-list a{font-size:.98rem;line-height:1.45}img{max-width:100%;height:auto}
@media(max-width:900px){.wrap{grid-template-columns:minmax(0,1fr);gap:24px}.content{padding:30px}.sidebar{position:static}}
@media(max-width:640px){body{font-size:16px;line-height:1.68}.nav{padding-bottom:10px}.content{padding:22px 18px}h1{font-size:clamp(1.75rem,7.8vw,2rem);line-height:1.16}h2{margin-top:32px;font-size:1.55rem}.lead{font-size:1.05rem}.fact-grid{grid-template-columns:1fr}.answer-box,.toc{padding:18px}.hero-image{max-height:340px;aspect-ratio:4/3}}
