:root{
  --blue:#3591d7; --navy:#0e4e8b; --sky:#dff4ff; --sky2:#eef8ff; --line:#e3e8ee; --text:#2a2a2a; --gray:#656565; --faint:#9aa3ad;
  --orange:#e29e33; --green:#3a9a73; --red:#d74c47; --yellow:#fff4cc; --bg:#f6f8fb;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ===== common ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:18px;font-weight:700;font-size:13px;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn-outline{border:1.5px solid var(--blue);color:var(--blue);background:#fff}
.btn-outline:hover{background:var(--sky2)}
.btn-ghost{color:var(--gray)}
.btn-ghost:hover{background:#f0f3f6}
/* 2026-10-05：参考書の削除ボタン用。保存（.btn-primary/.btn-outline）と視覚的に区別する
   （誤操作防止。docs/handoff/公開_フォーム改善_修正依頼.md） */
.btn-danger-ghost{color:var(--red)}
.btn-danger-ghost:hover{background:#fbe3e2}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.07)}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:14px}
.card{background:#fff;border:1.5px solid var(--line);border-radius:10px}
.sec-title{font-size:20px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.sec-title small{font-size:12px;color:var(--gray);font-weight:500}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font-size:11px;font-weight:700;white-space:nowrap}
.pill.blue{background:var(--sky);color:var(--navy)}
.pill.gray{background:#eef0f3;color:var(--gray)}
.pill.orange{background:#fdebd0;color:#9a5b0c}
.pill.red{background:#fbe3e2;color:#a3302b}
.pill.green{background:#dff3ea;color:#23704f}
.note-tag{position:relative;display:inline-block;font-size:11px;font-weight:700;color:#9a5b0c;background:#fff3dc;border:1px dashed #e5b86b;border-radius:6px;padding:3px 8px;line-height:1.5}
.page{animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12px;font-weight:700;color:var(--gray)}
/* 2026-10-05：スマホ（iOS Safari）は入力欄のfont-sizeが16px未満だとタップ時に自動ズームする。
   bodyの基準（14px）を継承していたため、全ての入力欄をズームの閾値以上に明示する
   （docs/handoff/公開_フォーム改善_修正依頼.md） */
.input,.select,.textarea,.memo-in{font-size:16px}
.input,.select,.textarea{width:100%;height:36px;border:1.5px solid var(--line);border-radius:8px;padding:0 10px;background:#fff;outline:none}
.textarea{height:auto;min-height:64px;padding:8px 10px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue)}
.row{display:flex;gap:8px;align-items:center}
.row > .field{flex:1}

/* ===== 単体カード画面（login / wait / on_hold / password_* / register） ===== */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:linear-gradient(160deg,#eaf6ff,#fff 60%)}
.login-card{width:420px;max-width:100%;background:#fff;border-radius:14px;box-shadow:0 4px 24px rgba(14,78,139,.1);padding:44px 32px;text-align:center}
.login-card h1{margin:0 0 8px;color:var(--blue);font-size:30px}
.login-card p{margin:0 0 28px;color:var(--gray);font-size:13px}
.login-card .field{text-align:left}
.login-card .notice{color:var(--green);font-size:13px;margin:0 0 16px}
.login-card .error{color:var(--red);font-size:13px;margin:0 0 16px}
.wait{max-width:560px;margin:0 auto;padding:40px 20px 120px;text-align:center}
.wait-illust{width:120px;height:120px;border-radius:50%;background:var(--sky);margin:0 auto 24px;display:grid;place-items:center;font-size:48px;color:var(--blue);font-weight:700}
.wait h1{font-size:22px;margin:0 0 12px}
.wait p{color:var(--gray);line-height:1.8;margin:0 0 8px}
.wait-steps{text-align:left;margin:28px 0 0;padding:18px 20px;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.wait-steps li{display:flex;gap:12px;align-items:flex-start;counter-increment:s;font-size:13.5px}
.wait-steps li::before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:var(--sky);color:var(--navy);font-weight:700;display:grid;place-items:center;font-size:12px}
/* 2026-10-05：完了ステップのチェックマーク表示（.wait-steps自体は既に存在していたが、
   li.doneの状態スタイルが抜けていた。docs/mock/v2/styles.cssの定義を転記） */
.wait-steps li.done::before{content:"✓";background:var(--blue);color:#fff}

/* ===== shell（サイドバー＋本文） ===== */
.shell{display:flex;min-height:100vh;background:linear-gradient(90deg,var(--sky) 240px,#fff 240px)}
.sidebar{width:240px;flex:0 0 240px;padding:36px 0 40px 28px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:block;color:var(--blue);font-size:22px;font-weight:700;margin:0 0 30px}
.nav{list-style:none;margin:0;padding:0}
.nav li{margin-bottom:16px}
.nav a{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:15px;font-weight:700}
.nav a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.nav a.current{color:var(--navy)}
.nav a.current::before{background:var(--navy);box-shadow:0 0 0 3px #bfe3fb}
.main{flex:1;min-width:0;padding:32px clamp(20px,4vw,56px) 120px}
.sp-header{display:none}
.sp-menu{position:fixed;inset:52px 0 0;background:var(--sky);z-index:25;padding:24px 22px;overflow-y:auto}
.hamburger{width:24px;height:20px;position:relative}
.hamburger span{position:absolute;left:0;width:24px;height:3px;background:var(--blue);border-radius:2px}
.hamburger span:nth-child(1){top:0}.hamburger span:nth-child(2){top:8px}.hamburger span:nth-child(3){top:16px}
@media (max-width: 768px){
  .shell{display:block;background:#fff}
  .sidebar{display:none}
  .sp-header{display:flex;align-items:center;justify-content:space-between;height:52px;background:var(--sky);padding:0 18px;position:sticky;top:0;z-index:30}
  .sp-header .brand{margin:0;font-size:17px}
  .main{padding:20px 16px 120px}
  .top-grid{grid-template-columns:1fr}
}
@media (min-width: 769px){
  .sp-menu{display:none!important}
}

/* ===== student top ===== */
.top{max-width:1040px;display:flex;flex-direction:column;gap:28px}
.hello{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.hello h1{margin:0;font-size:22px}
.hello .date{color:var(--gray);font-size:13px}
.top-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.top-grid.single{grid-template-columns:1fr}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}

/* timer */
.timer{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:14px;background:var(--navy);color:#fff}
.timer .t-label{font-size:12px;opacity:.8}
.timer .t-time{font-size:28px;font-weight:700;letter-spacing:.03em}
.timer .t-sub{font-size:11.5px;opacity:.75}
.timer .btn{margin-left:auto;height:44px;padding:0 22px;border-radius:22px;font-size:15px}
.timer .btn-start{background:#fff;color:var(--navy)}
.timer .btn-stop{background:var(--orange);color:#fff}
.timer.running{background:linear-gradient(90deg,#0e4e8b,#1b6db8)}
.timer.running .t-time::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#7ff0b5;margin-left:10px;vertical-align:middle;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}

/* todo（今日やること） */
.todo-list{display:flex;flex-direction:column;gap:10px}
.todo-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:14px;align-items:center;padding:12px 14px;background:#fff;border:1.5px solid var(--line);border-radius:10px}
/* 2026-10-04：各予定がどの参考書・分類のものか分からず見分けがつきにくいという指摘を
   受け、参考書名・種別（教科／分類）を内容の上に小さく添える（樋口さん指定、
   .day-item .tr と同じ見た目）。 */
.todo-row .tr{display:block;color:var(--gray);font-size:11px}
.todo-off{padding:18px;text-align:center;color:var(--gray)}
/* 2026-10-05：モックのtodoHTML()に合わせた進捗リング・ひとことメモ欄（docs/handoff/
   公開_ホーム画面_モック差分_修正依頼.md）。周回数表示はmember_booksの列不足のため見送り
   （進捗%のみ）。 */
.todo-row .ring{position:relative;width:48px;height:48px;flex:none}
.todo-row .ring svg{width:48px;height:48px;transform:rotate(-90deg)}
.todo-row .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--navy)}
.memo-in{display:block;width:100%;margin-top:4px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px;background:#fafbfc}
.memo-in:focus{border-color:var(--blue);outline:none}

/* hours：直近1週間の棒グラフ（モックhoursHTML()相当） */
.hours-goal{font-size:11px;color:var(--gray)}

/* promise / route-now / purpose */
.promise{padding:16px 18px;background:#fffaf0;border-color:#f1dcb4}
.promise h3{margin:0 0 8px;font-size:14px;color:#9a5b0c}
.promise ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.route-now{padding:16px 18px}
.route-now .rn-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.route-now .rn-month{font-size:18px;font-weight:700}
.route-now .rn-dev{font-size:13px;color:var(--navy);font-weight:700;background:var(--sky);padding:2px 10px;border-radius:10px}
.route-now .rn-word{font-size:14px;font-weight:700;margin:0 0 10px}
.route-now ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.route-now li{display:grid;grid-template-columns:7.5em 1fr;gap:8px;font-size:12.5px}
.route-now li span:first-child{color:var(--gray)}
.purpose{padding:16px 18px;background:linear-gradient(135deg,#0e4e8b,#3591d7);color:#fff;border:0}
.purpose .p-label{font-size:11px;opacity:.8;font-weight:700;letter-spacing:.08em}
.purpose .p-text{font-size:16px;font-weight:700;margin:4px 0 10px;line-height:1.5}

/* hours */
.hours{padding:16px 18px}
.meeting-next{display:flex;gap:18px;align-items:flex-start;padding:14px 16px;margin-bottom:14px;border-left:4px solid var(--navy)}
.meeting-next small{display:block;font-size:10.5px;color:var(--gray);font-weight:700;letter-spacing:.04em;margin-bottom:3px}
.mn-when{flex:0 0 auto;padding-right:18px;border-right:1px solid var(--line)}
.mn-when b{font-size:16px;color:var(--navy);white-space:nowrap}
.mn-msg{min-width:0}
.mn-msg p{margin:0;font-size:13px;line-height:1.7}
@media (max-width:760px){.meeting-next{flex-direction:column;gap:10px}.mn-when{border-right:0;padding-right:0}}
.hours-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.hours-head b{font-size:13px}
.hours-total{font-size:12px;color:var(--gray)}
.hours-total strong{font-size:18px;color:var(--blue)}
.celebrate{padding:14px 16px;background:#fff8e6;border:1.5px solid #f3d38c;border-radius:12px;display:flex;gap:12px;align-items:center}
.celebrate b{font-size:22px;color:#b7791f}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:140px;position:relative}
.bar-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bar-col i{display:block;width:60%;min-height:2px;border-radius:4px 4px 0 0;background:var(--blue)}
.bar-col.today i{background:var(--navy)}
.bar-col u{position:absolute;left:10%;right:10%;height:0;border-top:1px dashed var(--faint)}
.bar-col em{font-size:10.5px;color:var(--gray)}
.bar-col small{font-size:11px;color:var(--gray)}
.exams{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.exams span{background:rgba(255,255,255,.18);border-radius:8px;padding:3px 8px;font-size:11.5px}

/* ===== account（アカウント設定、docs/handoff/公開_アカウント設定_未実装_修正依頼.md） ===== */
.account-info{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.account-row{display:flex;gap:16px;align-items:flex-start;font-size:13.5px}
.account-row b{flex:0 0 76px;color:var(--gray);font-weight:700;font-size:12px}
.account-row span{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ===== lessons（勉強法・教材、docs/handoff/公開_教材機能_未実装_修正依頼.md） ===== */
.lesson-category-list{display:flex;flex-direction:column;gap:12px}
.lesson-category-card{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
.lesson-category-card b{font-size:15px}
.lesson-category-card span{font-size:12.5px;color:var(--gray)}
.lesson-list{display:flex;flex-direction:column;gap:10px}
.lesson-card{padding:14px 16px}
.lesson-lock{margin:6px 0 0;font-size:12.5px;color:var(--gray)}
.lesson-lock-card{padding:18px;text-align:center;color:var(--gray)}
.lesson-body{font-size:14px;line-height:1.8}
.lesson-body img,.lesson-body video{max-width:100%}

/* ===== books（参考書の登録・変更、docs/handoff/公開_フォーム改善_修正依頼.md） ===== */
/* admin側の参考書モーダル（.books-edit-tabs）と同じJS無しradio+:checked+一般兄弟結合子
   パターン（通常ページなので<script>は使えるが、構造を揃えた） */
.books-tabs{position:relative}
.books-tabs > input[type="radio"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.books-tabs-nav{display:inline-flex;background:#eef2f6;border-radius:10px;padding:3px;gap:2px}
.books-tab{padding:6px 16px;border-radius:8px;font-weight:700;font-size:13px;color:var(--gray);display:inline-block;cursor:pointer}
.books-tab-panel{display:none;margin-top:12px}
#books-tab-edit:checked ~ .books-tab-panel[data-panel="edit"],
#books-tab-add:checked ~ .books-tab-panel[data-panel="add"]{display:block}
#books-tab-edit:checked ~ nav label[for="books-tab-edit"],
#books-tab-add:checked ~ nav label[for="books-tab-add"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ===== lock-overlay（pending中にロックされた画面、docs/handoff/公開_pending制限_修正依頼.md） ===== */
/* 2026-10-05：当初は通常のカードとして組んでいたが、オーバーレイになっていない・
   ロックアイコンが絵文字になっているという指摘を受けて修正。画面全体に重なる
   半透明の層（position:fixed）として表示し、中央にアイコン・文言・ボタンを置く */
.lock-overlay{position:fixed;inset:0;z-index:40;background:rgba(20,30,40,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.lock-overlay-body{background:#fff;border-radius:14px;padding:40px 28px;max-width:320px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.lock-overlay-icon{width:40px;height:40px;color:var(--navy);fill:currentColor;stroke:currentColor}
.lock-overlay-body p{margin:0;color:var(--gray)}

/* ===== confirm-modal（削除等の確認ダイアログ、app.js参照） ===== */
.confirm-modal{border:0;border-radius:12px;padding:0;max-width:340px;width:calc(100% - 32px);box-shadow:0 8px 32px rgba(0,0,0,.18)}
.confirm-modal::backdrop{background:rgba(0,0,0,.4)}
.confirm-modal-body{padding:20px}
.confirm-modal-message{margin:0 0 16px;font-size:14px;line-height:1.6}
.confirm-modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* ===== plan（予定と記録・生徒） ===== */
.tabs{display:inline-flex;background:#eef2f6;border-radius:10px;padding:3px;gap:2px}
.tabs a{padding:6px 16px;border-radius:8px;font-weight:700;font-size:13px;color:var(--gray);display:inline-block}
.tabs a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.day-list{display:flex;flex-direction:column;gap:10px;max-width:760px}
.day{padding:12px 14px}
.day.today{border-color:var(--blue);box-shadow:0 0 0 2px #cfe8fb}
.day.past{background:#fbfcfd}
.day-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.day-head b{font-size:14px}
/* 2026-10-05：モックplanDay()の学習時間表示（日ヘッダー右端、過去日のみ） */
.day-head .h{margin-left:auto;color:var(--gray);font-size:12.5px}
.day-items{display:flex;flex-direction:column;gap:5px}
/* 2026-10-04：1列目が内容（.day-item直下の最初のspan）なのに6.5emしか無く、
   参考書名・種別を加えたら折り返しだらけになって読めなくなった（樋口さんの指摘で発見）。
   内容列を1fr（残り幅いっぱい）、量・状態列をautoに直す。 */
.day-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;font-size:12.5px;align-items:baseline}
/* 2026-10-04：各予定がどの参考書・分類のものか分からず見分けがつきにくいという指摘を
   受け、参考書名・種別（教科／分類）を内容の上に小さく添える（樋口さん指定）。
   display:blockを付けて、内容（.day-itemの1fr列に入るテキスト）の上の行に出す */
.day-item .tr{display:block;color:var(--gray);font-size:11px}
.day-item .st{font-weight:700}
.day-item .st.ok{color:var(--blue)}
.day-item .st.ng{color:var(--red)}
.gantt-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:10px}
.gantt{border-collapse:collapse;min-width:920px;font-size:12px}
.gantt th,.gantt td{border-bottom:1px solid var(--line);border-right:1px solid #eef1f4;padding:8px;vertical-align:top;text-align:left;min-width:96px}
.gantt thead th{background:#f5f8fb;font-size:11.5px;position:sticky;top:0}
.gantt th.m-label{white-space:nowrap;background:#fafcfe;min-width:110px;position:sticky;left:0;z-index:2;text-align:left}
.gantt thead th.m-label{z-index:3}
.gantt th.current-month{background:var(--sky);color:var(--navy)}
.gantt td.current-month{background:#f3f9ff}
/* 2026-10-05：モックplanMonth()のフェーズ帯・偏差値行（docs/handoff/公開_年間ルート_モック差分_修正依頼.md） */
.gantt .dev{font-size:11px;color:var(--navy);font-weight:700}
.gantt .word{font-size:11px;color:var(--gray);margin-top:2px}
.gantt td.phase-cell{padding:6px;text-align:center}
.phase-band{font-size:11px;font-weight:700;color:#fff;padding:4px 6px;border-radius:4px;text-align:center}