/* たのしい日本史 — 短冊の書棚。生成り・墨・藍・朱。余白を多めに */
:root{--paper:#f4efe3;--paper2:#ece5d4;--card:#fbf8f0;--ink:#2a2622;--ink2:#6b6358;--line:#d9cfba;--ai:#2c4a63;--shu:#b3342a;--kin:#9c7e2c;--sea:%232c4a63}
:root[data-theme="dark"]{--paper:#15191e;--paper2:#1c2128;--card:#1f252d;--ink:#ebe4d4;--ink2:#a89f8e;--line:#343c46;--ai:#8fb4d1;--shu:#e0705f;--kin:#d6b866;--sea:%238fb4d1}
html,body{margin:0}
body.home{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;color:var(--ink);background:var(--paper);line-height:1.9;font-size:18px;min-height:100vh}
.home a{color:inherit}
/* 青海波の帯（薄く） */
.wave{height:34px;opacity:.22;background-size:40px 20px}
:root[data-theme="dark"] .wave{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><g fill='none' stroke='%238fb4d1' stroke-width='1'><circle cx='0' cy='20' r='19'/><circle cx='0' cy='20' r='13'/><circle cx='0' cy='20' r='7'/><circle cx='40' cy='20' r='19'/><circle cx='40' cy='20' r='13'/><circle cx='40' cy='20' r='7'/><circle cx='20' cy='10' r='19'/><circle cx='20' cy='10' r='13'/><circle cx='20' cy='10' r='7'/></g></svg>")}
.wave{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><g fill='none' stroke='%232c4a63' stroke-width='1'><circle cx='0' cy='20' r='19'/><circle cx='0' cy='20' r='13'/><circle cx='0' cy='20' r='7'/><circle cx='40' cy='20' r='19'/><circle cx='40' cy='20' r='13'/><circle cx='40' cy='20' r='7'/><circle cx='20' cy='10' r='19'/><circle cx='20' cy='10' r='13'/><circle cx='20' cy='10' r='7'/></g></svg>")}
/* 冒頭 */
.hero{max-width:1000px;margin:0 auto;padding:22px 24px 4px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.hero .lead{padding-top:8px}
.lead .kicker{font-family:system-ui,sans-serif;font-size:.78rem;letter-spacing:.3em;color:var(--kin)}
.lead p{margin:10px 0;color:var(--ink2);max-width:30em}
.lead .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center;font-family:system-ui,sans-serif}
.btn3{font-family:system-ui,sans-serif;font-size:.9rem;border:1px solid var(--ink2);background:transparent;color:var(--ink);padding:8px 20px;border-radius:2px;cursor:pointer;text-decoration:none;letter-spacing:.08em}
.btn3:hover{border-color:var(--shu);color:var(--shu)}.btn3.pri{background:var(--ai);border-color:var(--ai);color:#fff}.btn3.pri:hover{background:var(--shu);border-color:var(--shu);color:#fff}
.prog{font-size:.85rem;color:var(--ink2)}.prog b{font-family:"Shippori Mincho",serif;font-size:1.3rem;color:var(--ai)}
.title{writing-mode:vertical-rl;font-size:clamp(2rem,4.6vw,2.8rem);font-weight:800;letter-spacing:.18em;color:var(--ai);margin:0;line-height:1.3;height:auto;border-left:1px solid var(--line);padding-left:18px}
.seal{display:inline-grid;place-items:center;width:2.4em;height:2.4em;border:2px solid var(--shu);color:var(--shu);font-size:.95rem;font-weight:800;letter-spacing:0;margin-top:.8em;writing-mode:horizontal-tb;border-radius:3px;transform:rotate(-3deg)}
.titlebox{display:flex;flex-direction:column;align-items:center}
.theme{position:absolute;right:16px;top:12px;font-family:system-ui,sans-serif;font-size:.8rem;border:0;background:transparent;color:var(--ink2);cursor:pointer}
/* 巻の切替 */
.maki{direction:rtl;max-width:1000px;margin:18px auto 6px;padding:0 24px;display:flex;gap:6px;flex-wrap:wrap;font-family:system-ui,sans-serif}
.maki button{direction:ltr;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink2);padding:6px 14px;font-size:.9rem;cursor:pointer;letter-spacing:.1em}
.maki button.on{color:var(--ai);border-bottom-color:var(--shu)}.maki button small{color:var(--ink2);margin-left:4px;font-size:.72rem}
/* 短冊の棚（右から左へ、古い順） */
.shelf{direction:rtl;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:30px max(12px,calc((100vw - 1000px)/2 - 130px)) 24px max(44px,calc((100vw - 1000px)/2 + 24px));scrollbar-width:thin;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(var(--paper2),var(--paper) 40%)}
.shelf>*{direction:ltr}
.era{flex:none;display:flex;align-items:flex-start;gap:12px;margin-left:44px;direction:rtl}
.era-t{direction:ltr;writing-mode:vertical-rl;font-size:2.6rem;font-weight:800;letter-spacing:.2em;color:var(--ec);line-height:1.1;padding-left:14px;border-left:3px solid var(--ec);align-self:stretch;display:block;white-space:nowrap}
.era-t small{display:block;font-size:.8rem;font-weight:400;color:var(--ink2);letter-spacing:.1em;margin-top:.6em;writing-mode:vertical-rl}
.tz{position:relative;flex:none;display:flex;align-items:center;justify-content:flex-start;writing-mode:vertical-rl;width:84px;max-height:25em;min-height:15em;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--ec);padding:34px 14px 40px 14px;font-size:1.02rem;line-height:1.75;font-weight:600;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 var(--line);transition:transform .2s,box-shadow .2s;direction:ltr;letter-spacing:.06em}
.tz:hover,.tz:focus-visible{transform:translateY(-8px);box-shadow:0 12px 18px -10px rgba(0,0,0,.35);outline:none;border-color:var(--ec)}
.tz .y{position:absolute;top:8px;right:10px;writing-mode:horizontal-tb;font-family:system-ui,sans-serif;font-size:.62rem;color:var(--ink2);font-weight:400;letter-spacing:0;white-space:nowrap}
.tz .shu{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);writing-mode:horizontal-tb;width:1.6em;height:1.6em;border:1.5px solid var(--shu);color:var(--shu);font-size:.7rem;display:grid;place-items:center;border-radius:2px;font-weight:800;background:transparent}
.tz.seen{opacity:.55}.tz.seen::after{content:"読";position:absolute;bottom:8px;right:6px;writing-mode:horizontal-tb;width:1.4em;height:1.4em;background:var(--shu);color:#fff;border-radius:50%;font-size:.65rem;display:grid;place-items:center}
.tz.seen .shu{left:8px;transform:none}
/* 詞書 */
.kotoba{max-width:1000px;margin:18px auto 0;padding:0 24px;min-height:7.5em}
.kotoba .yr{font-family:system-ui,sans-serif;font-size:.78rem;color:var(--kin);letter-spacing:.14em}
.kotoba h2{margin:2px 0 4px;font-size:1.3rem;color:var(--ai)}
.kotoba p{margin:0;color:var(--ink2)}.kotoba .chg{color:var(--shu);font-size:.9rem;margin-top:4px}
/* 一覧 */
.list{max-width:1000px;margin:30px auto 20px;padding:0 24px}
.list h2{font-size:1.05rem;letter-spacing:.2em;font-weight:600;margin:0 0 12px;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:6px}
.list input{width:100%;padding:10px 16px;border:1px solid var(--line);border-radius:2px;background:var(--card);color:var(--ink);font-size:1rem;margin-bottom:10px;font-family:inherit}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.chips button{font-family:system-ui,sans-serif;font-size:.82rem;border:1px solid var(--line);background:transparent;color:var(--ink2);border-radius:2px;padding:4px 12px;cursor:pointer}
.chips button.on{border-color:var(--ai);color:var(--ai);background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.row{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ec);padding:8px 14px}
.row:hover{border-color:var(--ec)}.row .y2{font-family:system-ui,sans-serif;font-size:.72rem;color:var(--ink2)}.row b{display:block;font-size:.98rem;line-height:1.5}
.row .c{color:var(--shu);font-size:.75rem;font-family:system-ui,sans-serif}
.about{max-width:1000px;margin:30px auto;padding:0 24px;color:var(--ink2);font-size:.92rem}
.about h2{font-size:1rem;letter-spacing:.2em;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:6px}
footer.f{text-align:center;color:var(--ink2);font-family:system-ui,sans-serif;font-size:.76rem;padding:0 24px 30px}
@media(max-width:640px){body.home{font-size:16px}.hero{grid-template-columns:1fr;padding-top:50px}.titlebox{order:-1;align-items:flex-start}.title{height:auto}.tz{width:76px}.era-t{font-size:2rem}.kotoba{display:none}}
.wave{pointer-events:none}.theme{z-index:10}body.home{position:relative}

.tz .tt{display:block;max-block-size:22em;text-align:start}
.tz .y{max-width:72px;overflow:hidden;text-overflow:ellipsis}

.eg{margin:0 0 26px}.eg h3{font-size:1.1rem;letter-spacing:.25em;font-weight:600;margin:0 0 10px;padding-left:10px;border-left:5px solid var(--ec);color:var(--ink)}.eg h3 small{font-size:.75rem;letter-spacing:.05em;margin-left:12px;color:var(--ink2);font-family:system-ui,sans-serif;font-weight:400}
#grid{display:block}.eg .grid{display:grid}