/*  すすみ帳 ── 見た目
 *  地の色は吉原ビジネスデザイン研究所のロゴのネイビー（#16386F）。ほかのアプリとそろえています。
 *  予定どおり＝緑、遅れ＝オレンジ。教材ごとの色は app.js の COLORS。
 *  スマホ（縦・幅360px）を前提に作り、広い画面では中央に寄せるだけです。
 */
:root{
  --navy:#16386F;
  --blue:#2C5FA8;
  --orange:#E2761B;
  --orange-soft:#fdebd9;
  --green:#2f8a57;
  --green-soft:#dff1e6;
  --ink:#15191f;
  --sub:#5d6875;
  --line:#dfe4ea;
  --bg:#f4f6f8;
  --card:#fff;
  --radius:14px;
}
*{box-sizing:border-box}

/*  ⚠ これを消さないこと（ましかくで踏んだもの）。
    display を指定した要素は、hidden 属性だけでは消えません。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
}
button{font:inherit;color:inherit}
.center{text-align:center}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:8px}

/* ---- 上のバー ---- */
.bar{
  display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--navy);color:#fff;
  position:sticky;top:0;z-index:20;
}
.bar h1{margin:0;font-size:17px;letter-spacing:.08em;font-weight:700;flex:1}
.bar .ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:6px 12px;font-size:13px}

/* ---- ボタン ---- */
.primary,.ghost{
  border-radius:999px;padding:9px 16px;cursor:pointer;
  border:1px solid transparent;background:var(--navy);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  -webkit-tap-highlight-color:transparent;
}
.ghost{background:#fff;border-color:var(--line);color:var(--ink);font-weight:600}
.primary.small,.ghost.small{padding:6px 12px;font-size:13px}
.ghost.danger{color:#a33a2a}
.primary.wide,.ghost.wide{display:block;width:100%;padding:13px;font-size:15px;margin-top:12px}
.primary.green{background:var(--green)}
.primary:disabled,.ghost:disabled{opacity:.45;cursor:default}
.ghost:active,.primary:active{transform:translateY(1px)}
.link{background:none;border:0;color:var(--sub);text-decoration:underline;padding:10px;display:block;margin:4px auto 0;cursor:pointer;font-size:13px}
.link-s{background:none;border:0;color:rgba(255,255,255,.8);text-decoration:underline;cursor:pointer;font-size:12px;padding:4px}

/* ---- ページ ---- */
main{max-width:560px;margin:0 auto;padding:12px 12px calc(84px + env(safe-area-inset-bottom))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:0 0 10px}
.sec{font-size:13px;color:var(--sub);letter-spacing:.06em;margin:16px 2px 8px}
.sec.in{margin:0 0 4px}
.privacy{color:var(--sub);font-size:12px;text-align:center;margin:18px 0 0}
.note{font-size:12.5px;color:var(--sub);margin:8px 0 0;line-height:1.65}
.note b{color:var(--ink)}
.empty{color:var(--sub);font-size:13px;text-align:center;padding:10px 8px;margin:0}
.legend{font-size:11.5px;color:var(--sub);margin:-4px 2px 8px}
.legend-line{display:inline-block;width:2px;height:12px;background:var(--ink);vertical-align:-2px;margin:0 2px}
.dot{flex:0 0 auto;display:inline-block;width:10px;height:10px;border-radius:50%;margin-top:0}
.tip{background:#fff8ec;border:1px solid #f0d9ae;border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.65;margin:10px 0 0;color:#6b4a12}
.warn-t{color:#a8561a;font-weight:700}
.fold{margin-top:12px}
.fold summary{cursor:pointer;font-size:13px;color:var(--blue);font-weight:700;padding:6px 2px}

/* ---- 入力 ---- */
.text{
  width:100%;padding:8px 10px;font:inherit;font-size:16px;line-height:1.5;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;min-height:42px;
}
select.text{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d6875' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:32px}
textarea.text{resize:vertical;display:block}
.field{display:block;margin-top:12px;font-size:12.5px;color:var(--sub)}
.field>span{display:block;margin-bottom:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{
  flex:1 1 0;min-width:76px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;font-size:13px;font-weight:700;cursor:pointer;line-height:1.25;
}
.chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chips.quick{margin-top:6px}
.chips.quick button{flex:0 0 auto;min-width:0;padding:6px 11px;font-size:12.5px;border-radius:99px}
.chips.rates button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;font-size:12px}
.chips.rates b{font-size:18px;line-height:1.1}
.seg{margin:0 0 10px}
.buttons{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.buttons .ghost,.buttons .primary{flex:1 1 auto;padding:9px 10px;font-size:13px;white-space:nowrap}
.range{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px}
.range b{white-space:nowrap}
.range .text{flex:1;min-width:0}
.wdays{display:flex;gap:5px}
.wdays button{flex:1;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700;cursor:pointer;padding:0}
.wdays button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.wdays button:first-child{color:#c2416b}
.wdays button:first-child.on{color:#fff}

/* ---- きょう ---- */
.goalcard{background:var(--navy);color:#fff;border-radius:var(--radius);padding:12px 16px 12px;margin:0 0 10px}
.goalcard small{display:block;font-size:12.5px;opacity:.85}
.goalcard b{display:block;font-size:20px;letter-spacing:.04em}
.goalcard em{font-style:normal;font-size:34px;margin:0 2px;color:#ffd48a}
.goalcard p{margin:4px 0 0;font-size:12.5px;opacity:.9}
.goalcard .streak{opacity:1;font-weight:700}
.goalcard.nogoal{background:#fff;color:var(--ink);border:2px dashed #b9c3cf}
.goalcard.nogoal p{margin-bottom:8px}
.timer-btn{
  display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;
}
.timer-on{display:flex;align-items:center;gap:10px;background:var(--green);color:#fff;border-radius:var(--radius);padding:10px 14px}
.timer-on span{font-size:12.5px}
.timer-on b{flex:1;font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.timer-on .primary{background:#fff;color:var(--green)}

.quota{list-style:none;margin:0;padding:0}
.quota li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.quota li:first-child{border-top:0;padding-top:2px}
.quota .qx{flex:1;min-width:0}
.quota .qx b{display:block;font-size:15px}
.quota .qx span{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:16px;font-weight:700;color:var(--navy)}
.quota .qx span small{font-size:12px;color:var(--sub);font-weight:600}
.quota .got{display:block;font-size:12px;color:var(--green);font-weight:700}
.quota li.fin .qx span{color:var(--sub);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.quota li.fin .qx span .chip{text-decoration:none}

.chip{display:inline-block;font-size:11px;font-weight:700;border-radius:99px;padding:1px 8px;background:#e8ecf0;color:var(--sub);white-space:nowrap;line-height:1.6}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.late{background:var(--orange-soft);color:#a8561a}
.chip.done{background:#fff3c4;color:#7a5b00}

.revs{list-style:none;margin:0;padding:0}
.revs li{padding:8px 0;border-top:1px solid var(--line)}
.revs li:first-child{border-top:0;padding-top:0}
.revs .rx b{font-size:14.5px;margin-left:6px}
.revs .rx small{display:block;font-size:11.5px;color:var(--sub)}
.revs .rx p{margin:4px 0 0;font-size:13px;background:#f6f8fa;border-radius:8px;padding:5px 9px;white-space:pre-wrap}
.revs .buttons{margin-top:6px}

.total{margin:0 0 4px;font-size:13px;color:var(--sub)}
.total b{color:var(--ink);font-size:16px}
.loglist{list-style:none;margin:0;padding:0}
.loglist li{border-top:1px solid var(--line)}
.loglist li:first-child{border-top:0}
.loglist button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:8px 0;text-align:left;cursor:pointer}
.loglist .lx{flex:1;min-width:0;font-size:14px}
.loglist .lx small{display:block;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loglist .lm{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);white-space:nowrap}
.rate{font-style:normal;font-weight:700}
.rate.good{color:var(--green)}
.rate.soso{color:#b7791f}
.rate.bad{color:#c2416b}

/* ---- 計画 ---- */
.goalbox small{display:block;font-size:11.5px;color:var(--sub)}
.goalbox b{display:block;font-size:17px;color:var(--navy)}
.goalbox .grow>span{font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:8px 0 0;font-size:13px}
.kv dt{color:var(--sub)}
.kv dd{margin:0}
.mat .row b{font-size:15px}
.pbar{position:relative;height:12px;background:#e6eaef;border-radius:99px;margin:9px 0 5px;overflow:visible}
.pbar i{display:block;height:100%;border-radius:99px;background:var(--blue);max-width:100%}
.pbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);margin-left:-1px;border-radius:1px}
.pbar.sm{height:7px;margin:4px 0 2px}
.nums{justify-content:space-between;font-size:13.5px;font-weight:700}
.nums small{font-weight:400;color:var(--sub);font-size:12px}
.span{margin:2px 0 0;font-size:12px;color:var(--sub)}
.fc{margin:6px 0 0;font-size:12.5px;background:var(--green-soft);color:#1f5e3a;border-radius:8px;padding:5px 9px}
.fc.late{background:var(--orange-soft);color:#8a4410}

/* ---- 記録 ---- */
.stats{display:flex;gap:8px;margin:0 0 4px}
.stat{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.stat small{display:block;font-size:11px;color:var(--sub);line-height:1.3}
.stat b{display:block;font-size:18px;color:var(--navy);line-height:1.4;white-space:nowrap}
.stat span{display:block;font-size:11px;color:var(--sub);white-space:nowrap}
.bars{display:flex;gap:6px;align-items:flex-end;height:150px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.bcol small{font-size:10.5px;color:var(--sub);height:16px}
.btrack{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;background:#f1f4f7;border-radius:6px;overflow:hidden}
.btrack i{display:block;width:100%;background:var(--blue);border-radius:6px 6px 0 0}
.bcol span{font-size:12px;color:var(--sub);margin-top:3px}
.bcol span.on{color:var(--navy);font-weight:700}
.heatwrap{display:flex;gap:4px;justify-content:center}
.heat-wd{display:grid;grid-template-rows:repeat(7,1fr);gap:3px;font-size:9.5px;color:var(--sub);line-height:1}
.heat-wd span{display:flex;align-items:center;height:100%}
.heat{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,22px);gap:3px;flex:0 1 auto}
.heat i,.heat-legend i{display:block;aspect-ratio:1;border-radius:4px;background:#e9edf1;min-width:12px}
.heat-legend i{display:inline-block;width:12px;height:12px;vertical-align:-2px}
.heat .hx{background:transparent;border:1px dashed #e3e8ee}
.h1{background:#cfe0f5 !important}
.h2{background:#8fb4e3 !important}
.h3{background:#4a80c8 !important}
.h4{background:var(--navy) !important}
.hbar{display:grid;grid-template-columns:7.5em 1fr auto;align-items:center;gap:8px;font-size:13px;padding:4px 0}
.hbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar div{height:10px;background:#eef1f4;border-radius:99px;overflow:hidden}
.hbar i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.hbar small{color:var(--sub);font-size:12px;white-space:nowrap}
.dayh{display:flex;justify-content:space-between;margin:0 0 2px;font-weight:700;font-size:13.5px;color:var(--navy)}
.dayh small{color:var(--sub);font-weight:400}

/* ---- 報告 ---- */
.weeknav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 10px}
.weeknav b{font-size:14.5px;color:var(--navy);text-align:center}
.report{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:0;
  font:inherit;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
}

/* ---- 先生の画面 ---- */
.stu{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:0 0 8px;cursor:pointer}
.stu.flag{border-color:#f0c9a0;border-left:5px solid var(--orange)}
.stu b{font-size:15.5px}
.stu small{font-size:11.5px;color:var(--sub)}
.stu-n{display:flex;gap:12px;font-size:13px;margin-top:2px}
.flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.flags i{font-style:normal;font-size:11.5px;font-weight:700;background:var(--orange-soft);color:#8a4410;border-radius:99px;padding:1px 9px}
.flags.ok i{background:var(--green-soft);color:var(--green)}
.flags.big{margin:8px 0 0}
.flags.big i{font-size:12.5px;padding:3px 10px}
.hist .hbar{grid-template-columns:6em 1fr auto}
.tmats{list-style:none;margin:0;padding:0}
.tmats li{padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.tmats li:first-child{border-top:0}
.tmats small{font-size:12px;color:var(--sub)}
.tmats .pbar i{background:var(--green)}
.late-t{color:#a8561a;font-weight:700}
.refl dd{white-space:pre-wrap}

/* ---- はじめの設定 ---- */
.intro-icon{font-size:40px;text-align:center;margin:4px 0 0;letter-spacing:.1em}
.steps{display:flex;gap:4px;margin:0 0 12px}
.steps i{flex:1;height:5px;border-radius:99px;background:#e3e8ee}
.steps i.on{background:var(--blue)}
.roles{display:grid;gap:8px}
.roles button{background:#fff;border:2px solid var(--line);border-radius:12px;padding:14px;font-size:15.5px;font-weight:700;cursor:pointer}
.roles button.on{border-color:var(--navy);background:#eef3fb;color:var(--navy)}
.nav{display:flex;gap:8px;margin-top:16px}
.nav .ghost{flex:0 0 auto}
.nav .primary{flex:1}
.picks{list-style:none;margin:0;padding:0}
.picks li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:6px 0}
.picks li:first-child{border-top:0}
.picks label{flex:1;display:flex;gap:10px;align-items:center;cursor:pointer;min-width:0}
.picks input[type=checkbox]{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--navy)}
.picks .num{width:84px;flex:0 0 auto;text-align:right}
.picks small{width:2.6em;font-size:12px;color:var(--sub)}
.demo{margin:18px 0 0;padding:10px;border:1px dashed #b9c3cf;border-radius:10px;text-align:center}
.demo p{margin:0 0 6px;font-size:11.5px;color:var(--sub)}
.demo .ghost{margin:2px}

/* ---- 下のタブ ---- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;
  background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(6px);
  padding:4px 8px env(safe-area-inset-bottom);
}
.tabs button{
  flex:1;max-width:150px;background:none;border:0;padding:6px 0 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;font-size:11.5px;color:var(--sub);font-weight:700;
  -webkit-tap-highlight-color:transparent;
}
.tabs button span{font-size:20px;line-height:1.3;filter:grayscale(1);opacity:.6}
.tabs button.on{color:var(--navy)}
.tabs button.on span{filter:none;opacity:1}

/* ---- お知らせ ---- */
/* ⚠ left:50% + transform で中央に置かないこと（ましかくで踏んだ。文字が画面の半分で折り返す） */
.toast{
  position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));margin:0 auto;width:max-content;z-index:80;
  background:rgba(21,25,31,.92);color:#fff;font-size:13.5px;
  padding:9px 16px;border-radius:999px;max-width:92vw;text-align:center;
  pointer-events:none;
}

/* ---- シート ---- */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(21,25,31,.55);overflow:auto;padding:20px 12px}
#sheet{z-index:60}
.sheet-inner{
  background:#fff;border-radius:var(--radius);max-width:520px;margin:0 auto;
  padding:18px 16px calc(20px + env(safe-area-inset-bottom));
}
.sheet h2{margin:0 0 8px;font-size:18px;color:var(--navy)}
.sheet h3{margin:18px 0 8px;font-size:14px;color:var(--navy)}
.warn{background:#fff8ec;border:1px solid #f0d9ae;border-radius:10px;padding:10px 14px;margin:12px 0 4px}
.warn h3{margin:0 0 6px;color:#8a5a12}
.warn ul{margin:0;padding-left:1.2em;font-size:13.5px}
.warn li{margin-bottom:5px}
.how{margin:0;padding-left:1.3em;font-size:14px}
.how li{margin-bottom:9px}
.how-lead{margin:0 0 10px;font-size:13.5px;line-height:1.7}

/* ===== 版の切り替え（生徒用・教室版＝stu-only／先生用＝t-only） ===== */
body.t-app .stu-only{display:none!important}
body:not(.t-app) .t-only{display:none!important}
body.t-app #teacher{position:static;background:none;padding:12px 12px 40px;overflow:visible}
body.t-app #teacher .sheet-inner{box-shadow:none}
.qr{border:1px solid var(--line);border-radius:8px;background:#fff}
.url-box{font-size:12.5px;word-break:break-all;background:#f4f6f8;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0}
.paste{width:100%;min-height:180px;font-size:13px}

/* ===== 定期テスト・先生からのことば・見直し（2026-09-25） ===== */
.testline{padding:8px 12px;margin-top:10px}
.testline p{margin:3px 0;font-size:13.5px}
.testline small{display:block;color:var(--sub);font-size:11.5px;margin-left:1.6em}
.testhead{margin:18px 0 6px;padding:8px 10px;border-left:4px solid var(--navy);background:#eef2f8;border-radius:8px}
.testhead small{display:block;color:var(--sub);font-size:12px}
.fix{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;padding:6px 8px;background:#fff7ee;border:1px solid #f0c9a0;border-radius:8px;font-size:13px}
.tmsg{border-left:5px solid #2f8a57;margin-top:10px}
.tmsg-h{margin:0 0 4px;font-weight:700;color:#2f8a57;font-size:13.5px}
.tmsg-t{margin:0 0 6px;font-size:14px;line-height:1.6}
.ok-t{color:#2f8a57;font-weight:700}
.fb{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 4px;font-size:12.5px;align-items:center}
.fb label{display:flex;align-items:center;gap:4px}
.fb input.num{width:64px}
.fb input[type=date]{width:auto;min-width:0;padding:4px 6px}
.mmemo{width:100%;font-size:12.5px;margin-top:4px;min-height:34px}
.tmats small{display:block}
.memo-s{display:block;margin-top:4px;font-size:12px;color:var(--sub)}
.tsubj li{flex-wrap:wrap}
.tsubj label{display:flex;align-items:center;gap:6px}
.tsubj .sname{width:6.5em}
.tsubj .range{display:flex;align-items:center;gap:4px;margin-left:auto}
.tsubj .range .num{width:64px}
.tlist{list-style:none;padding:0;margin:0 0 8px}
.tlist li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.tmsg .link-s{color:var(--sub);display:block;margin:6px 0 0 auto}
.fb label{white-space:nowrap}
.fb input[type=date]{width:150px}
.check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px}
.check input{width:20px;height:20px;accent-color:var(--navy)}
.check input:disabled+*{opacity:.5}
.tsubj .rg{width:9em}
/* ===== 休む日・きょうは少なめ（2026-09-25） ===== */
.daybtns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.daybtns .on{background:#fff7ee;border-color:#f0c9a0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.cal>b{text-align:center;font-size:12px;color:var(--sub)}
.cal button{position:relative;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;cursor:pointer;padding:0;line-height:1.1}
.cal button small{display:block;font-size:9.5px;color:var(--sub)}
.cal button.today{border:2px solid var(--navy);font-weight:700}
.cal button.off{background:#fde6e6;border-color:#e8a0a0;color:#b3261e;font-weight:700}
.cal button.rest,.cal button.past{background:#f1f3f5;color:#b5bcc5;cursor:default}
/* ===== お試し版・確認用の見本（2026-09-25） ===== */
body.trial .full-only{display:none!important}
body:not(.trial) .trial-only{display:none!important}
body:not(.demo-mode) .demo-only{display:none!important}
body:not(.t-released) .t-rel{display:none!important}