.jn-book{color:#e5edf7}.jn-heading{position:relative;padding:4px 0 22px;margin-bottom:18px;border-bottom:1px solid rgba(191,220,239,.2)}
.jn-heading>small{color:#8fc8d5;font:600 12px var(--latin);letter-spacing:.2em}.jn-heading h3{font:600 clamp(20px,3vw,28px) var(--mincho);margin:9px 0 8px!important;letter-spacing:.06em}.jn-heading p,.jn-note{color:#a9b7ca;font-size:13px;line-height:1.8}.jn-heading>span{display:block;font-size:11px;margin-top:12px;color:#e3cca1}
.jn-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:sticky;top:0;z-index:2;padding:5px 0 14px;background:#0d152c}.jn-tabs button{padding:11px 4px;border:1px solid #2d3c55;border-radius:9px;font-size:12px;color:#aab9ce}.jn-tabs button[aria-selected="true"]{background:linear-gradient(130deg,#233c4d,#2b2946);border-color:#9ec7d3;color:#f5fbff}
.jn-timeline{display:grid;gap:14px}.jn-chapter{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid #25314b}.jn-chapter-no{font:26px var(--latin);color:#6a7690;min-width:32px}.jn-chapter.read .jn-chapter-no{color:#eed2a1}.jn-chapter small,.jn-letter>small{font-size:10px;color:#9bacbf;letter-spacing:.08em}.jn-book h4{font:600 16px var(--mincho);color:#e8efff;margin:7px 0!important}.jn-chapter p,.jn-letter p,.jn-memory p{font-family:var(--mincho);font-size:13px;line-height:2;color:#afc0d1}.jn-chapter.read p{color:#d8e2ec}
.jn-letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.jn-spirit{padding:16px;border:1px solid color-mix(in srgb,var(--jn-color) 35%,#25304a);border-radius:14px;background:linear-gradient(140deg,color-mix(in srgb,var(--jn-color) 8%,#101829),#0b1223)}.jn-spirit h3{display:flex;align-items:center;justify-content:space-between;color:var(--jn-color);font:600 18px var(--mincho);margin:0 0 16px!important}.jn-spirit h3 small{font:11px var(--gothic);color:#a4b7c8}.jn-letter{padding:10px 0 16px;border-top:1px solid #29374a}.jn-letter.locked p,.jn-letter.locked h4{color:#7d8da5}.jn-letter.opened>small{color:var(--jn-color)}
.jn-memory{border:1px solid #3b4359;border-radius:14px;overflow:hidden;background:#090f1f}.jn-memory img{display:block;width:100%;height:auto}.jn-memory figcaption{padding:22px}.jn-memory small{font-size:11px;color:#92b1c8}.jn-memory h3{font:600 23px var(--mincho);margin:10px 0!important}.jn-locked-memory{text-align:center;padding:40px 10px;color:#a2afc3}.jn-locked-memory>span{display:block;font-size:50px;color:#657186}.jn-locked-memory p{margin-top:14px;line-height:1.9;font-size:13px}
.jn-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.jn-mark{display:flex;gap:12px;padding:16px;border:1px solid #293951;border-radius:12px;background:#111b2d}.jn-mark>div{flex:1;min-width:0}.jn-mark-icon{font-size:22px;color:#6c7d96}.jn-mark.earned{border-color:#6f6446;background:linear-gradient(135deg,#2d2a20,#161c2b)}.jn-mark.earned .jn-mark-icon{color:#e5c684}.jn-mark p{font-size:11px;line-height:1.7;color:#b0bdcf}.jn-mark progress{display:block;width:100%;height:4px;margin:12px 0 6px;accent-color:#accfda}.jn-mark small{font-size:10px;color:#9eafc4}
@media(max-width:600px){.jn-letters,.jn-marks{grid-template-columns:1fr}.jn-tabs{gap:4px}.jn-tabs button{font-size:11px;padding:10px 2px}.jn-heading h3{font-size:19px}.jn-memory figcaption{padding:16px}.jn-chapter{gap:10px}.jn-spirit{padding:14px}}

.jn-heading .jn-writer{position:absolute;right:0;top:-10px;width:92px;height:auto;max-height:120px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.jn-heading:has(.jn-writer) h3,.jn-heading:has(.jn-writer) p{padding-right:96px}
.jn-kaoru{margin:10px 0 0!important;padding:8px 12px;border-left:2px solid #c97a52;background:linear-gradient(90deg,rgba(201,122,82,.14),transparent);color:#e8d3c4!important;font-size:.92em}
.jn-kaoru span{display:block;font:600 11px var(--latin);letter-spacing:.2em;color:#d99a76;margin-bottom:3px}
@media(max-width:600px){.jn-heading .jn-writer{width:64px;top:-6px}.jn-heading:has(.jn-writer) h3,.jn-heading:has(.jn-writer) p{padding-right:68px}}