@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@400;500;600&display=swap");
/* 読む画面（画面イメージ v4.4 の見た目を移したもの）。押す所は 44px 以上（G1_IMPL §2.4）。 */
:root{--ink:#dfe2e6;--soft:#98a2ad;--dim:#7d8792;--hair:rgba(255,255,255,.09);--hair2:rgba(255,255,255,.05);
 --acc:#6fa7a6;--accl:#a9cecd;--accd:#46706f;--amber:#e9a43b;
 --serif:"Shippori Mincho","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
 --sans:"Noto Sans JP","Yu Gothic UI","Hiragino Sans",sans-serif;
 --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
 --hh:57px}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 .7em}
h1,h2,h3,h4{margin:0;line-height:1.45;font-weight:500}
body{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.85;background:#06080b;color:var(--ink);-webkit-font-smoothing:antialiased;word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere}
.ldg{padding:40px 20px;color:var(--soft)}
.err{padding:40px 20px;color:var(--ink)}

/* 設計図風の地（細い格子）。文字の後ろに絵は出さない */
.col{width:100%;max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;overflow:visible;overflow:clip;
 background-color:#0b0f14;
 background-image:linear-gradient(rgba(169,206,205,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(169,206,205,.09) 1px,transparent 1px),linear-gradient(rgba(169,206,205,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(169,206,205,.04) 1px,transparent 1px);
 background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-1px -1px}

/* ヘッダー固定 */
.bar.rbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:6px 12px;padding-top:calc(6px + env(safe-area-inset-top));border-bottom:1px solid var(--soft);background:#0b0f14;min-height:var(--hh)}
.mbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;min-width:44px;padding:0 12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--soft);border:1px solid var(--hair);white-space:nowrap}
.rbar .chn{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw{display:flex;flex:none;border:1px solid var(--hair)}
.sw button{font:inherit;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--soft);background:transparent;border:0;cursor:pointer;line-height:1.7;min-height:44px;min-width:44px;padding:0 12px}
.sw button.on{color:#0b0f14;background:var(--accl)}
.sw button:disabled{opacity:.4;cursor:default}

.page{padding:0 0 calc(40px + env(safe-area-inset-bottom))}
.pn{padding:22px 20px 14px;position:relative;min-width:0}
.pn.head{padding-bottom:6px}
.pn.foot{padding-bottom:30px}
.sheet{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--dim);margin-bottom:8px}
h1.t{font-weight:300;font-size:1.35rem;letter-spacing:.14em;color:#f2f3f4;text-wrap:balance;padding-bottom:10px;border-bottom:1px solid var(--soft);margin-bottom:10px}
.mono-inline{font-family:var(--mono);font-size:.88em;color:var(--accl);overflow-wrap:anywhere}
.note{font-size:.74rem;color:var(--dim)}
.ver{font-family:var(--mono);color:var(--dim);font-size:.68rem;margin:0}
.prevtop{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;color:var(--soft);letter-spacing:.06em;border-bottom:1px dashed var(--soft)}
.topnav{padding-top:8px;padding-bottom:0}

/* 場面 */
.story{margin-top:10px}
.scn{display:flow-root;scroll-margin-top:calc(var(--hdr-h,57px) + 2px)}
.sc{display:flex;gap:10px;align-items:baseline;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--dim)}
.sc b{font-weight:400;color:var(--accl);border:1px solid var(--accd);padding:0 8px;line-height:1.7;letter-spacing:.2em;white-space:nowrap}
.sc span{min-width:0;font-family:var(--sans);letter-spacing:.06em;font-size:.76rem}
.time{margin:0 0 14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--dim)}

/* 挿絵の窓・人物の窓 */
.win{position:relative;margin:0;border:1px solid var(--soft);background:#080b0f;height:160px;overflow:hidden}
.scn>.win{margin:10px 20px 0}
.win .wimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.win.in .wimg{animation:winin 1.8s ease-out}
@keyframes winin{from{transform:scale(1.05) translateX(-6px)}to{transform:none}}
.win.full{height:auto;aspect-ratio:16/9}
.win.plain{height:auto;background:none;border:0;overflow:visible;margin-bottom:0}
.win.plain figcaption{position:static;display:inline-block}
.win figcaption{position:absolute;right:6px;bottom:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--soft);background:rgba(11,15,20,.85);border:1px solid var(--hair);padding:1px 8px;line-height:1.7;max-width:calc(100% - 12px)}
.win.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:236px;margin:2px 0 22px;background:rgba(8,11,15,.92)}
.win.pair .pp{position:relative;display:flex;justify-content:center;border-left:1px solid var(--hair);min-width:0}
.win.pair .pp:first-child{border-left:0}
.win.pair img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.win.pair span{position:absolute;left:6px;bottom:6px;z-index:2;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--soft);background:rgba(11,15,20,.85);border:1px solid var(--hair);padding:1px 8px;line-height:1.7}

/* 会話：地は明朝・台詞は人物の札 */
.fc{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--accd);object-fit:cover;background:#101820;display:block}
.fc.g{display:grid;place-items:center;background:#262d34;border-color:#4a535d;color:#cdd3d9;font-family:var(--serif);font-size:.95rem;line-height:1}
.say{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;min-width:0}
.say .bd{flex:1;min-width:0}
.who-tag{display:block;font-size:.7rem;font-weight:400;letter-spacing:.1em;color:var(--soft);margin:0 0 1px;line-height:1.5}
.who-tag.me{color:var(--ink);font-weight:500}
.who-tag.me::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);margin-right:6px;vertical-align:.15em}
.say p{margin:0 0 .35em;font-family:var(--serif);font-size:.98rem;line-height:2.05;letter-spacing:.03em;font-weight:400;color:var(--ink)}
.say p:last-child{margin-bottom:0}
.say.pkt p{font-family:var(--sans);font-size:.9rem;line-height:1.85;font-weight:300}
p.scene{margin:0 0 14px;padding-left:52px;font-family:var(--serif);font-size:.92rem;line-height:2;color:var(--soft);letter-spacing:.03em}
p.pp0{font-size:.9rem;line-height:1.95;margin:0 0 .8em}
h3.bh{font-family:var(--mono);font-weight:400;font-size:.8rem;letter-spacing:.14em;color:var(--accl);margin:26px 0 10px;padding-bottom:4px;border-bottom:1px solid var(--hair)}
h4.bh{font-weight:500;font-size:.88rem;letter-spacing:.08em;color:var(--ink);margin:18px 0 6px}

/* 画面・コード・表・チェック・手順・箇条 */
.scr{display:inline-block;max-width:100%;margin:6px 0 8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--accl);border:1px solid var(--accd);padding:0 8px;line-height:1.8}
pre.cliv{margin:4px 0 18px;border:1px solid var(--hair);background:rgba(8,11,15,.8);color:#d6dade;font-family:var(--mono);font-size:.66rem;line-height:1.65;padding:10px 12px;overflow-x:auto;max-width:100%}
.wrapx{overflow-x:auto;max-width:100%;margin:6px 0 14px}
table.neg{width:100%;border-collapse:collapse;font-size:.78rem;line-height:1.7}
table.neg th,table.neg td{border:1px solid var(--soft);padding:7px 8px;text-align:left;vertical-align:top;font-weight:300;min-width:5em}
table.neg thead th{font-size:.66rem;letter-spacing:.04em;color:var(--accl);font-weight:400}
table.neg tbody th{font-weight:400;color:var(--ink)}
ul.chklist,ul.blist{list-style:none;margin:6px 0 14px;padding:0}
ul.chklist li,ul.blist li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px dashed var(--hair);font-size:.88rem;line-height:1.7}
ul.chklist li>.t,ul.blist li>.t{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
ul.chklist li:first-child,ul.blist li:first-child{border-top:0}
ul.chklist li::before{content:"";flex:none;width:12px;height:12px;border:1px solid var(--accl);align-self:center}
ul.blist li.sub{margin-left:18px}
ul.blist li::before{content:"";flex:none;width:6px;height:6px;background:var(--accd);align-self:center}
ol.steps{list-style:none;margin:8px 0 16px;padding:0;counter-reset:st}
ol.steps>li{counter-increment:st;border-left:1px solid var(--accd);margin:0 0 6px 8px;padding:2px 0 2px 14px;position:relative}
ol.steps>li::before{content:"";position:absolute;left:-5px;top:12px;width:9px;height:9px;border:1px solid var(--accl);background:#0b0f14}
ol.steps .st{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--accl);margin-bottom:4px}
ol.steps .say{margin-bottom:8px}

/* 折りたたみ・図の札 */
details.ref,details.zucard{margin:14px 0;border:1px solid var(--hair);background:rgba(11,15,20,.9)}
details.ref>summary,details.zucard>summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;min-height:44px;padding:6px 10px;font-family:var(--mono);font-size:.74rem;color:var(--soft)}
details.ref>summary::-webkit-details-marker,details.zucard>summary::-webkit-details-marker{display:none}
details.ref>summary::before,details.zucard>summary::before{content:"+";color:var(--accl);width:1em;flex:none}
details[open]>summary::before{content:"-"}
details.ref>summary span,details.zucard .zt{min-width:0;line-height:1.6}
details.ref>.bd{padding:2px 12px 10px;border-top:1px dashed var(--hair);font-size:.82rem;color:var(--soft)}
details.zucard{border-style:dashed;border-color:var(--accd)}
details.zucard .zk{flex:none;font-size:.62rem;letter-spacing:.2em;color:#0b0f14;background:var(--acc);padding:0 6px;line-height:1.7}
details.zucard .kv{margin:0;border-top:1px dashed var(--hair);padding:0 10px}
.kv>div{display:grid;grid-template-columns:minmax(0,5.6em) minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px dashed var(--hair);font-size:.78rem;line-height:1.7}
.kv dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--soft);padding-top:3px}
.kv dd{margin:0;min-width:0;color:var(--soft)}
details.zucard .zn{margin:0;padding:6px 10px 8px;font-size:.7rem;color:var(--dim)}

/* 商流の図 */
.fig.shoryuu{margin:10px 0 20px;display:grid;gap:0;justify-items:stretch}
.shoryuu .bx{border:1px solid var(--soft);background:rgba(11,15,20,.92);padding:8px 12px;text-align:center}
.shoryuu .bx .k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--accl)}
.shoryuu .bx b{font-weight:400;font-size:.88rem;letter-spacing:.04em}
.shoryuu .arw{position:relative;text-align:center;font-family:var(--mono);font-size:.64rem;color:var(--dim);padding:6px 0 6px;letter-spacing:.1em}
.shoryuu .arw::before{content:"";display:block;height:10px;border-left:1px solid var(--accd);width:0;margin:0 auto}
.shoryuu .arw::after{content:"";display:block;margin:0 auto;width:7px;height:7px;border-right:1px solid var(--accd);border-bottom:1px solid var(--accd);transform:rotate(45deg) translate(-2px,-2px)}

/* 話の終わり・ノート */
.epend{margin-top:20px;display:grid;gap:12px}
.epend p{font-size:.78rem;color:var(--soft);margin:0}
.part-end{height:1px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;font:inherit;font-size:.92rem;font-weight:400;letter-spacing:.14em;text-align:center;color:#e6f0f0;padding:10px 12px;border:1px solid var(--acc);background:rgba(111,167,166,.12);line-height:1.5;overflow-wrap:anywhere}
.btn.q{font-size:.84rem;letter-spacing:.1em;color:var(--soft);border-color:var(--hair);background:none}
.sec{margin-top:30px;position:relative;border:1px solid var(--soft);padding:20px 14px 12px;background:rgba(11,15,20,.92);min-width:0}
.sec:first-child{margin-top:12px}
.sec>h2{position:absolute;top:-11px;left:10px;background:#0b0f14;padding:0 8px;font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.16em;color:var(--accl)}
.sec.sum2{border-color:var(--hair);padding:12px 14px 6px}
.sec.sum2>h2{font-size:.76rem;letter-spacing:.14em;color:var(--soft)}
.sec.sum2 ul.blist{counter-reset:s}
.sec.sum2 ul.blist li{counter-increment:s}
.sec.sum2 ul.blist li::before{content:counter(s,decimal-leading-zero);width:auto;height:auto;background:none;font-family:var(--mono);font-size:.7rem;color:var(--accl);align-self:baseline}
.sec.ext{border-style:dashed;border-color:var(--accd)}
section.notes{margin-top:30px;border-top:1px solid var(--hair);padding-top:10px}
section.notes>h2{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.16em;color:var(--dim);margin-bottom:4px}
section.notes ul.blist li{font-size:.74rem;color:var(--dim)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:600px){body{background:#06080b}}