/* ホーム・座学の一覧（画面イメージ v4.4 の blueprint.css・v3.css・v4.css から移したもの）。押す所は 44px 以上。 */
.bar{display:flex;align-items:center;gap:10px;padding:6px 20px;padding-top:calc(6px + env(safe-area-inset-top));min-height:var(--hh);border-bottom:1px solid var(--soft);background:#0b0f14}
.bar .mbtn{margin-left:auto}
.brand{display:inline-flex;align-items:center;min-height:44px;letter-spacing:.22em;font-size:.82rem;font-weight:400;white-space:nowrap}
.page.hp{padding:12px 20px calc(40px + env(safe-area-inset-bottom))}
.crumb{font-family:var(--mono);font-size:.7rem;color:var(--soft);margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;color:var(--soft)}
.crumb>:first-child{margin-left:-4px}
.crumb>span{padding:0 2px}
.lead{color:var(--soft);font-size:.88rem;letter-spacing:.06em;margin:0 0 22px}
.btn.gap{margin-top:16px}

/* USER・タブ */
.who2{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;border:1px solid var(--soft);position:relative;background:rgba(11,15,20,.9)}
.who2 .k{position:absolute;top:-8px;left:10px;background:#0b0f14;padding:0 6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--accl)}
.who2 .av{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--acc);color:var(--accl);display:grid;place-items:center;font-size:.9rem;font-weight:400}
.who2 .nm{flex:1;min-width:0;line-height:1.5}
.who2 .nm b{display:block;font-weight:400;font-size:.95rem;letter-spacing:.08em}
.who2 .nm span{display:block;font-size:.74rem;color:var(--soft)}
.modeb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-bottom:1px solid var(--soft)}
.modeb>*{display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:44px;padding:4px 2px;color:var(--soft);font-size:.92rem;letter-spacing:.14em;border:1px solid var(--hair);border-bottom:0;margin-left:-1px;line-height:1.4}
.modeb>*:first-child{margin-left:0}
.modeb small{font-size:.58rem;letter-spacing:.06em;color:var(--dim)}
.modeb .on{color:#fff;border-color:var(--soft);background:#0b0f14;position:relative;box-shadow:inset 0 2px 0 var(--acc)}
.modeb .off{opacity:.6;border-style:dashed}
.who2 .sw{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--soft);border:1px solid var(--hair);padding:2px 8px;white-space:nowrap;line-height:1.4}
.who2 .sw.off{border-style:dashed;color:var(--dim)}
.who2 .sw small{font-size:.58rem;letter-spacing:.06em;color:var(--dim)}
.pro .state{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;border:1px solid var(--accd);color:var(--accl);padding:0 7px;line-height:1.7;white-space:nowrap}
.pro .state.w{border-style:dashed;color:var(--soft);border-color:var(--soft)}
.contb{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:26px;padding-top:12px;border-top:1px solid var(--soft);font-size:.9rem}
.contb>span{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--soft)}
.contb a{display:inline-flex;align-items:center;min-height:44px;color:var(--accl)}
.note.guide{margin-top:18px;line-height:1.8}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--accl);border:1px solid var(--accd);padding:0 7px;line-height:1.7;min-width:0;overflow-wrap:anywhere}
.btns2{display:grid;gap:12px;margin-top:20px}
.btns2.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* つづき・寄り道 */
.pro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;margin-top:24px;padding:14px 14px 12px;border:1px solid var(--acc);background:rgba(11,15,20,.9);box-shadow:0 0 0 3px #0b0f14,0 0 0 4px var(--accd);color:inherit}
.pro .k{position:absolute;top:-8px;left:10px;background:#0b0f14;padding:0 6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--accl)}
.pro b{font-weight:400;font-size:1rem;letter-spacing:.1em;line-height:1.5}
.pro small{grid-column:1/-1;font-size:.76rem;color:var(--soft);line-height:1.7}
.det{display:block;border:1px dashed var(--accd);padding:12px 14px;margin:18px 0 0;background:rgba(11,15,20,.92);min-height:44px}
.det .k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--accl)}
.det b{display:block;font-weight:400;font-size:.94rem;line-height:1.7;margin:2px 0 4px}
.det small{display:block;font-size:.74rem;color:var(--soft);line-height:1.7}
.detour-slot:empty{display:none}
.det + .pcard{margin-top:18px}
.allread{margin-top:24px}

/* 進み具合・層の地図 */
.totb{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:34px 0 20px;padding-top:12px;border-top:1px solid var(--soft)}
.totb::before,.totb::after{content:"";position:absolute;top:-6px;height:11px;border-left:1px solid var(--soft)}
.totb::before{left:0}.totb::after{right:0}
.totb b{font-weight:200;font-size:3.4rem;line-height:1;letter-spacing:.02em;color:#f4f5f6}
.totb b i{font-style:normal;font-size:1.3rem;margin-left:2px;color:var(--soft)}
.totb span{font-size:.76rem;color:var(--soft);text-align:right;line-height:1.7;letter-spacing:.06em}
.fgl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--dim);margin-bottom:6px}
.sect{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.sect li{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 12px;border:1px solid var(--soft);white-space:nowrap;background:rgba(11,15,20,.9);overflow:hidden}
.sect li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0);background:repeating-linear-gradient(135deg,rgba(111,167,166,.42) 0 1px,transparent 1px 6px);pointer-events:none}
.sect li.off{border-style:dashed;border-color:var(--dim)}
.sect .cd{position:relative;flex:none;font-family:var(--mono);font-size:.76rem;width:3.4em;color:var(--accl)}
.sect .nm{position:relative;flex:1;min-width:0;font-size:.84rem;letter-spacing:.06em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;background:rgba(11,15,20,.78);align-self:center;padding:0 4px;line-height:1.5;max-width:max-content}
.sect .ct{position:relative;margin-left:auto;flex:none;font-family:var(--mono);font-size:.74rem;color:var(--soft);background:rgba(11,15,20,.78);padding:0 4px}
.sect .off .cd,.sect .off .nm,.sect .off .ct,.sect li.off .cd,.sect li.off .nm,.sect li.off .ct{color:var(--dim)}
.sect .pk{position:relative;flex:none;width:20px;height:15px}
.sect .pk i{display:block;width:20px;height:15px;background:var(--amber)}
.sect li.cur{border-color:var(--accl);box-shadow:0 0 0 3px rgba(11,15,20,1),0 0 0 4px var(--acc)}

/* 座学の一覧 */
.pcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:baseline;border:1px solid var(--soft);padding:10px 12px;margin:0 0 14px;background:rgba(11,15,20,.92)}
.pcard .fno{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--accl)}
.pcard b{font-weight:500;font-size:1rem;letter-spacing:.1em;color:#f2f3f4}
.pcard .st{font-family:var(--mono);font-size:.68rem;color:var(--accl);border:1px solid var(--accd);padding:0 7px;line-height:1.7}
.pcard .sub{grid-column:1/-1;font-size:.78rem;color:var(--soft);margin-top:2px}
.pcard ol.ep,.pcard .btn{grid-column:1/-1}
.pcard ol.ep{margin-top:8px}
.toc2{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:.76rem;color:var(--soft);padding:8px 0;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);margin-bottom:6px}
.chp{position:relative;margin-top:38px;border:1px solid var(--soft);padding:22px 14px 14px;background:rgba(11,15,20,.92)}
.chp>.fno{position:absolute;top:-9px;left:10px;background:#0b0f14;padding:0 8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--accl)}
.chp .big{display:block;font-family:var(--mono);font-weight:300;font-size:3.2rem;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--accd)}
.chp h3{font-weight:300;font-size:1.2rem;letter-spacing:.2em;margin-top:6px}
.chp .dim{position:relative;margin:10px 0 0;padding-top:2px;height:16px;border-top:1px solid var(--soft);text-align:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--soft);line-height:1}
.chp .dim::before,.chp .dim::after{content:"";position:absolute;top:-6px;height:11px;border-left:1px solid var(--soft)}
.chp .dim::before{left:0}.chp .dim::after{right:0}
.chp .dim span{display:inline-block;transform:translateY(-6px);background:#0b0f14;padding:0 8px}
.chp .problem{font-size:.84rem;color:var(--soft);letter-spacing:.04em;margin:10px 0 12px;line-height:1.9}
.chp .more{margin:8px 0 0;font-size:.74rem;color:var(--dim)}
.chp.soon{border-style:dashed;border-color:var(--dim)}
.chp.soon .big,.chp.soon h3{opacity:.55}
.chp .soonmark{display:inline-block;margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--soft);border:1px solid var(--hair);padding:0 10px;line-height:1.9}
.chp ul.th{list-style:none;margin:0;padding:0}
.th>li{border-top:1px dashed var(--hair);display:block;padding:0}
.th>li:first-child{border-top:0}
.th details>summary{list-style:none;display:flex;gap:10px;align-items:baseline;padding:10px 0;min-height:44px;cursor:pointer}
.th details>summary::-webkit-details-marker{display:none}
.th .tn{flex:none;font-family:var(--mono);font-size:.7rem;color:var(--accl);letter-spacing:.06em;white-space:nowrap}
.th .nm{flex:1;min-width:0;font-size:.9rem;line-height:1.6}
.th .lv{flex:none;font-size:.62rem;letter-spacing:.06em;color:var(--soft);border:1px solid var(--hair);padding:0 5px;white-space:nowrap}
.th .stt{flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim);border:1px solid var(--hair);padding:0 6px;line-height:1.7;white-space:nowrap}
.th .stt.reading{color:var(--accl);border-color:var(--accd)}
.th .stt.done{color:#0b0f14;background:var(--accl);border-color:var(--accl)}
ol.ep{list-style:none;margin:0 0 10px;padding:0 0 0 10px;border-left:1px solid var(--accd)}
ol.ep li{border-top:1px dashed var(--hair2);display:block;padding:0}
ol.ep li:first-child{border-top:0}
ol.ep a,ol.ep .nt2.off{display:flex;gap:10px;align-items:center;justify-content:space-between;min-height:44px;padding:6px 0 6px 6px;font-size:.86rem}
ol.ep a small,ol.ep .nt2 small{font-family:var(--mono);font-size:.64rem;color:var(--dim);white-space:nowrap}
ol.ep a.cur small{color:var(--accl)}
ol.ep a.nt2{color:var(--accl)}
ol.ep .nt2.off{color:var(--dim)}
.btn.rsm{margin:0 0 10px}

/* 小さな知らせ */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;width:min(92vw,400px);min-height:44px;font:inherit;font-size:.78rem;line-height:1.7;text-align:left;color:var(--ink);background:#0b0f14;border:1px solid var(--amber);padding:8px 12px;cursor:pointer}