/* kvillage 学習マップ — 白基調、藍のアクセント。旧版 theme.py のトークンを引き継ぐ */
:root {
  --bg: #FFFFFF;
  --bg-subtle: #F8F9FA;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text: #1F2937;
  --text-2: #6B7280;
  --text-3: #9CA3AF;
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-bg: #EEF2FF;
  --accent-text: #3730A3;
  --amber: #BA7517;
  --amber-bg: #FAEEDA;
  --amber-text: #633806;
  --coral: #D85A30;
  --coral-bg: #FAECE7;
  --coral-text: #712B13;
  --success: #16A34A;
  --success-bg: #EAF3DE;
  --success-text: #27500A;
  --untouched: #E5E7EB;
  --learning: #A5B4FC;
  --mastered: #4F46E5;
  --weak: #D85A30;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 16px rgba(17, 24, 39, .04);
  --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
#app { display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* --- top bar --- */
.topbar { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 52px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 600; font-size: 15px; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.brand-sub { color: var(--text-2); font-weight: 500; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 6px 12px; border-radius: 8px; color: var(--text-2); font-weight: 500; }
.nav a.active { background: var(--bg-subtle); color: var(--text); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.name { font-weight: 500; }

/* --- basics --- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--bg-subtle); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.chip-accent { background: var(--accent-bg); color: var(--accent-text); border-color: transparent; }
.chip-goal { background: var(--amber-bg); color: var(--amber-text); border-color: transparent; }
.chip-state { border-color: transparent; }
.chip-state.untouched { background: var(--bg-subtle); color: var(--text-2); }
.chip-state.weak { background: var(--coral-bg); color: var(--coral-text); }
.chip-state.learning { background: var(--accent-bg); color: var(--accent-text); }
.chip-state.mastered { background: var(--accent); color: #fff; }
.chip.clickable { cursor: pointer; }
.chip.clickable:hover { border-color: var(--border-strong); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 12px; }
.btn { border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--bg-subtle); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-danger { color: var(--coral-text); border-color: var(--coral-bg); background: var(--coral-bg); }
.btn-success { color: var(--success-text); border-color: var(--success-bg); background: var(--success-bg); }
.btn:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=password], select, textarea { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); }
select { width: auto; padding-right: 28px; }
label.toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; cursor: pointer; user-select: none; }
label.toggle input { accent-color: var(--accent); }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--text-2); text-transform: none; }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

/* --- login --- */
.login-wrap { flex: 1; display: grid; place-items: center; padding: 40px 16px; }
.login { width: 360px; max-width: 100%; }
.login h1 { font-size: 22px; }
.login p.lead { color: var(--text-2); margin: 0 0 20px; }
.login .field { margin-bottom: 12px; }
.login .field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.error { color: var(--coral-text); background: var(--coral-bg); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }

/* --- map --- */
.map-layout { display: grid; grid-template-columns: 1fr 380px; height: calc(100vh - 52px); }
.map-main { position: relative; overflow: hidden; border-right: 1px solid var(--border); }
.map-controls { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; z-index: 5; pointer-events: none; }
.map-controls > * { pointer-events: auto; }
/* 操作は「表示の設定」の中にしまう。地図の上にいつも出るのは層と設定ボタンだけ */
.settings-panel { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 20;
  width: min(340px, 100%); flex-direction: column; gap: 10px;
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17,24,39,.14); }
.map-controls.expanded .settings-panel { display: flex; }
.settings-panel .row { display: flex; align-items: center; gap: 8px; }
.settings-panel .row .label { font-size: 12px; color: var(--text-2); flex: none; min-width: 62px; }
.settings-panel select { max-width: 100%; flex: 1; min-width: 0; }
.settings-panel .toggle { font-size: 13px; }
.btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); }
.control-group { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; backdrop-filter: blur(6px); }
.control-group .label { font-size: 12px; color: var(--text-2); }
.map-search { width: 180px; padding: 6px 10px; font-size: 13px; }
.map-timeline { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(6px); }
.map-timeline input[type=range] { flex: 1; accent-color: var(--accent); }
.map-timeline .date { min-width: 150px; font-variant-numeric: tabular-nums; font-size: 13px; }
.map-timeline .date b { color: var(--accent-text); }
.map-legend { position: absolute; right: 12px; bottom: 64px; z-index: 5; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--text-2); display: grid; gap: 4px; }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend { max-width: 300px; max-height: 46vh; overflow: auto; }
.map-legend .legend-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.map-legend .legend-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
.map-legend .legend-halo { align-items: flex-start; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
.map-legend i.halo { width: 14px; height: 14px; border-radius: 50%; background: rgba(107,114,128,.12); border: 1px solid rgba(107,114,128,.3); flex: 0 0 auto; margin-top: 2px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
.map-legend i.ring { width: 13px; height: 13px; background: #fff; }
.map-legend i.ring.r3 { border: 3px solid #7A4300; }
.map-legend i.ring.r2 { border: 2px solid var(--amber); }
.map-legend i.ring.r1 { border: 1.5px solid #D9A45B; }
.map-legend i.ring.r0 { border: 1px dashed #E0C79E; }
svg.map { width: 100%; height: 100%; display: block; cursor: grab; background: var(--bg); }
svg.map:active { cursor: grabbing; }
svg.map .edge { stroke: #CBD5E1; stroke-opacity: .55; }
svg.map .node circle.body { stroke: rgba(255,255,255,.9); stroke-width: 1.5; cursor: pointer; transition: fill .4s; }
svg.map .node circle.halo { fill: #6B7280; fill-opacity: .10; pointer-events: none; }
svg.map .node text { font-size: 11px; fill: var(--text-2); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
svg.map .node.selected circle.body { stroke: var(--text); stroke-width: 2.5; }
svg.map .node.goal circle.body { stroke: var(--amber); stroke-width: 2.5; }
/* 志望校の輪。太さと濃さ = うちにある過去問でその単元が出た回数（段階は server/frequency.py） */
svg.map .node.goal.freq-0 circle.body { stroke: #E0C79E; stroke-width: 1.5; stroke-dasharray: 2 3; }
svg.map .node.goal.freq-1 circle.body { stroke: #D9A45B; stroke-width: 2; }
svg.map .node.goal.freq-2 circle.body { stroke: var(--amber); stroke-width: 3.5; }
svg.map .node.goal.freq-3 circle.body { stroke: #7A4300; stroke-width: 5.5; }
svg.map .node.dim { opacity: .28; }
svg.map .edge.dim { stroke-opacity: .15; }
svg.map .node.pulse circle.body { animation: pulse 1.2s ease-in-out 3; }
@keyframes pulse { 0%, 100% { stroke: var(--amber); stroke-width: 2; } 50% { stroke: var(--amber); stroke-width: 10; stroke-opacity: .35; } }
.map-side { overflow-y: auto; padding: 18px 20px 40px; background: var(--bg); }
.map-side .empty h2 { margin-top: 4px; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 16px; }
.stat { background: var(--bg-subtle); border-radius: 8px; padding: 10px 12px; }
.stat .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; color: var(--text-2); }
.stat .d { font-size: 11px; color: var(--text-3); }
.stat .d.up { color: var(--success-text); }
.reco { display: flex; flex-direction: column; gap: 6px; }
.reco button { text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.reco button:hover { border-color: var(--accent); background: var(--accent-bg); }
.reco button b { display: block; font-weight: 500; }
.reco button span { font-size: 12px; color: var(--text-2); }
.freq-panel { margin-top: 8px; padding: 8px 10px; background: var(--amber-bg); border-radius: 8px; color: var(--amber-text); }
.freq-line { display: grid; gap: 1px; font-size: 12px; margin: 0 0 10px; padding: 6px 10px; border-left: 3px solid #E0C79E; background: var(--bg-subtle); border-radius: 0 6px 6px 0; }
.freq-line b { font-weight: 600; }
.freq-line.t3 { border-left-color: #7A4300; }
.freq-line.t2 { border-left-color: var(--amber); }
.freq-line.t1 { border-left-color: #D9A45B; }
.kw-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kw-head h2 { margin: 0; font-size: 18px; }
.neighbors { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.problem { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.problem .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.problem .meta b { font-weight: 500; }
.problem .kws { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.attempts { margin-top: 8px; display: grid; gap: 4px; }
.attempt { display: grid; grid-template-columns: 22px 100px 1fr; gap: 8px; align-items: baseline; font-size: 12px; }
.attempt .mark { font-weight: 600; text-align: center; border-radius: 4px; }
.attempt .mark.ok { color: var(--success-text); background: var(--success-bg); }
.attempt .mark.ng { color: var(--coral-text); background: var(--coral-bg); }
.attempt .when { color: var(--text-2); font-variant-numeric: tabular-nums; }
.attempt .refl { color: var(--text); }
.attempt .refl.empty { color: var(--text-3); cursor: pointer; }
.attempt .refl.empty:hover { color: var(--accent); }
.attempt textarea { font-size: 12px; padding: 4px 6px; min-height: 30px; }

/* --- practice --- */
.practice { max-width: 820px; margin: 0 auto; padding: 24px 20px 60px; }
.crumb { color: var(--text-2); font-size: 13px; margin-bottom: 10px; }
.crumb a { color: var(--text-2); }
.problem-body { min-height: 160px; background: var(--bg-subtle); border-radius: 8px; padding: 18px; margin: 12px 0; font-size: 15px; }
.problem-body img { max-width: 100%; max-height: 46vh; object-fit: contain; display: block; background: #fff; border-radius: 4px; margin: 0; cursor: zoom-in; }
.problem-body.expanded img { max-height: none; cursor: zoom-out; }
.answer-row { display: flex; gap: 8px; align-items: center; }
.answer-row input { flex: 1; font-size: 16px; }
.result { border-radius: 8px; padding: 14px 16px; margin: 14px 0; border: 1px solid var(--border); }
.result.ok { border-color: var(--success-bg); background: var(--success-bg); color: var(--success-text); }
.result.ng { border-color: var(--coral-bg); background: var(--coral-bg); color: var(--coral-text); }
.result h2 { margin: 0 0 4px; }
.changes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bridge { border-left: 3px solid var(--amber); background: var(--amber-bg); color: var(--amber-text); padding: 12px 14px; border-radius: 6px; margin: 12px 0; }
.bridge b { display: block; margin-bottom: 2px; }
.reflect { margin: 14px 0; }
.reflect label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.actions { display: flex; gap: 8px; margin-top: 14px; }

/* --- analysis --- */
.analysis { max-width: 1040px; margin: 0 auto; padding: 24px 20px 60px; }
.analysis.wide { max-width: 1400px; }        /* 生徒の一覧は列が多いので広く使う */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 22px; }
.tile { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.tile .v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile .v small { font-size: 13px; color: var(--text-2); font-weight: 500; margin-left: 4px; }
.tile .k { font-size: 12px; color: var(--text-2); }
.tile .d { font-size: 12px; margin-top: 4px; color: var(--text-3); }
.tile .d.up { color: var(--success-text); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 > .card { min-width: 0; }
table.units { width: 100%; border-collapse: collapse; font-size: 13px; }
table.units th { text-align: left; font-weight: 500; color: var(--text-2); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.units td { padding: 7px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.units td.num { text-align: right; }
table.units tr.zero td { color: var(--text-3); }
.bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; }
.bar i { display: block; height: 100%; background: var(--accent); }
.delta { font-size: 12px; margin-left: 6px; }
.delta.up { color: var(--success-text); }
.delta.down { color: var(--coral-text); }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
ul.plain li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
ul.plain li .when { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 84px; }
svg.chart { width: 100%; height: 200px; display: block; }
svg.chart.radar { height: 300px; }
svg.chart .axis text { font-size: 11px; fill: var(--text-3); }
svg.chart .axis line, svg.chart .axis path { stroke: var(--border); }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* --- 手書きノート --- */
.note { position: relative; overflow: hidden; background: #EEF0F3; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.note canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.note-modal { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.note-modal .toolbar { display: flex; align-items: center; gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--bg); }
.note-modal .toolbar .title { font-weight: 600; margin-right: 4px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-modal .toolbar label { color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.note-modal .toolbar input[type=range] { width: 80px; accent-color: var(--accent); }
.note-modal .toolbar .sep { width: 1px; height: 22px; background: var(--border); }
.note-modal .toolbar .zoom { font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; color: var(--text-2); font-size: 13px; }
.note-modal .toolbar .right { margin-left: auto; display: flex; gap: 8px; }
.note-modal .stage { flex: 1; position: relative; }
.tool-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
.tool-group label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.answer-preview { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.answer-preview img { width: 96px; height: 144px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.answer-link { font-size: 12px; }

.note-modal .note-bottom { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.note-modal .note-memo-input { flex: 1; font-size: 13px; padding: 6px 10px; }
.note-modal .clock { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); min-width: 70px; }
.note-modal .save-state { font-size: 12px; color: var(--text-2); min-width: 108px; text-align: right; }
.note-memo { font-size: 12px; color: var(--amber-text); background: var(--amber-bg); border-radius: 6px; padding: 4px 8px; margin-top: 6px; display: inline-block; }
.answer-preview img { cursor: pointer; }

.legacy-tag { font-size: 11px; color: var(--text-2); background: var(--bg-subtle); border-radius: 5px; padding: 2px 6px; margin-top: 4px; display: inline-block; }
.legacy-card { margin: 16px 0 0; border-left: 3px solid var(--amber); }
.legacy-units { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legacy-box { border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 8px; padding: 10px 14px; margin: 14px 0 0; display: grid; gap: 2px; font-size: 13px; }

.review { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin: 12px 0; font-size: 13px; }
.review.pending { color: var(--text-2); border-left-color: var(--border-strong); }
.review .review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review .summary { margin: 4px 0 8px; font-size: 14px; }
.review .review-sec { margin-top: 6px; }
.review .review-sec ul { margin: 2px 0 0; padding-left: 18px; }
.review .fix { color: var(--accent-text); }
.review-box { grid-column: 1 / -1; margin: 4px 0 8px 30px; }
.chip.grade-0 { background: var(--coral-bg); color: var(--coral-text); border-color: transparent; }
.chip.grade-1 { background: var(--amber-bg); color: var(--amber-text); border-color: transparent; }
.chip.grade-2 { background: var(--accent-bg); color: var(--accent-text); border-color: transparent; }
.chip.grade-3 { background: var(--accent); color: #fff; border-color: transparent; }

.viewas { display: flex; align-items: center; gap: 12px; padding: 8px 24px; background: var(--amber-bg); color: var(--amber-text); font-size: 13px; border-bottom: 1px solid var(--border); }
.prose { margin-top: 16px; }
.prose p { margin: 4px 0; font-size: 14px; line-height: 1.7; }
table.students td a { font-weight: 500; }

.sol-wrap { margin: 10px 0; }
.solution { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 10px 0; font-size: 13px; background: var(--bg-subtle); }
.solution.pending { color: var(--text-2); }
.solution .sol-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.solution .way { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin-top: 8px; }
.solution .way.main { border-left: 3px solid var(--accent); }
.solution .way.alt { border-left: 3px solid var(--amber); }
.solution .way ol { margin: 4px 0 0; padding-left: 20px; }
.solution .way li { margin: 4px 0; line-height: 1.8; }
.katex { font-size: 1.05em; }
.katex-display { margin: 6px 0; }
.solution .sol-sec { margin-top: 8px; }
.solution .sol-sec ul { margin: 2px 0 0; padding-left: 18px; }
.solution .takeaway { color: var(--accent-text); }
.sol-inline { margin-top: 8px; }

.admin-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
.admin-list { max-height: calc(100vh - 220px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.admin-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--bg); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.admin-row:hover { border-color: var(--border-strong); }
.admin-row .t { display: flex; flex-direction: column; min-width: 0; }
.admin-row .t b { font-weight: 500; }
.admin-row .st { font-size: 11px; padding: 2px 6px; border-radius: 5px; flex: 0 0 auto; min-width: 40px; text-align: center; }
.admin-row .st.none { background: var(--bg-subtle); color: var(--text-3); }
.admin-row .st.ai { background: var(--accent-bg); color: var(--accent-text); }
.admin-row .st.hand { background: var(--amber-bg); color: var(--amber-text); }
.admin-detail { min-width: 0; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tabs a { padding: 6px 12px; border-radius: 8px; color: var(--text-2); font-weight: 500; }
.tabs a.active { background: var(--bg-subtle); color: var(--text); }
.admin-row.active { border-color: var(--accent); background: var(--accent-bg); }
.box-list { display: grid; gap: 10px; }
.box-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); }
.box-item .box-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.box-item .actions a.btn { text-decoration: none; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.lib-list { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.lib-list h3 { margin: 10px 0 4px; }
.lib-row { display: flex; gap: 8px; padding: 3px 0; }
.note-modal .practice { overflow: auto; flex: 1; }

.practice-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.practice-head h1 { margin: 0; }
.practice-head .back-btn { margin-left: auto; }
.ptabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ptab { position: relative; min-width: 34px; height: 30px; border: 1px solid var(--border-strong); background: var(--bg); border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--text-2); }
.ptab.active { border-color: var(--accent); color: var(--accent-text); background: var(--accent-bg); }
.ptab.tried { border-style: dashed; }
.ptab .dot { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.ptab.g3 .dot { background: var(--accent); }
.ptab.g2 .dot { background: var(--learning); }
.ptab.g1 .dot { background: var(--amber); }
.ptab.g0 .dot { background: var(--coral); }
.attempt .mark.wait { color: var(--text-2); background: var(--bg-subtle); }
.result h2 { font-size: 16px; }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 18px; text-align: center; display: grid; gap: 4px; margin: 8px 0; cursor: pointer; background: var(--bg-subtle); }
.dropzone.over { border-color: var(--accent); background: var(--accent-bg); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.offline-badge { position: fixed; left: 50%; transform: translateX(-50%); top: 8px; z-index: 60; background: var(--amber-bg); color: var(--amber-text); border: 1px solid var(--amber); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; box-shadow: var(--shadow); }
.note-modal.offline .stage { box-shadow: inset 0 0 0 4px var(--amber); }
.note-modal.offline .save-state { color: var(--amber-text); font-weight: 600; }

/* --- 指で使う端末: 押しやすい大きさに --- */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .btn { min-height: 44px; }
  .ptab { min-width: 44px; height: 44px; font-size: 15px; }
  .note-modal .toolbar { gap: 8px 10px; }
  .attempt .refl.empty { padding: 6px 0; }
}
/* --- ノートの道具 --- */
.w-btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); }
.view-menu { position: relative; }
.view-menu summary { display: inline-block; list-style: none; }
.view-menu summary::-webkit-details-marker { display: none; }
.view-menu[open] summary { background: var(--bg-subtle); }
.view-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 8px; box-shadow: var(--shadow); min-width: 240px; }
/* --- プリントのタブ --- */
.ptabs-wrap { display: flex; flex-direction: column; gap: 6px; }
.ptabs-summary { display: flex; align-items: center; }
.ptab.tried { border-style: dashed; }
.ptab.g3 { background: var(--accent); border-color: var(--accent); color: #fff; }
.ptab.g2 { background: var(--accent-bg); border-color: var(--learning); color: var(--accent-text); }
.ptab.g1 { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-text); }
.ptab.g0 { background: var(--coral-bg); border-color: var(--coral); color: var(--coral-text); }
.ptab.active { box-shadow: 0 0 0 2px var(--accent); }
.ptab .dot { display: none; }
/* --- 写真の確認 --- */
/* --- 地図: 狭い画面 --- */
.map-top:empty { display: none; }
.map-top { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.map-top .guide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; }
.map-top .guide .actions { margin: 0; }
.map-top .top-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); }
.map-top .top-stats b { color: var(--text); font-size: 15px; }
.map-top .top-reco { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.map-controls .control-group.primary { display: flex; }
.map-layout.narrow { display: block; height: auto; }
.map-layout.narrow .map-main { height: calc(100vh - 52px - 110px); border-right: 0; }
.map-layout.narrow .map-legend { display: none; }
.map-side.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 62vh; overflow: auto; background: var(--bg); border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(17,24,39,.12); transform: translateY(100%); transition: transform .25s ease; z-index: 30; padding: 8px 16px 32px; }
.map-side.sheet.open { transform: none; }
.sheet-handle { display: flex; justify-content: center; padding: 4px 0 10px; color: var(--text-2); font-size: 12px; cursor: pointer; }
.sheet-handle span { padding: 4px 14px; border-radius: 999px; background: var(--bg-subtle); }
@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
}

/* --- ノートの道具（2 回目の見直し） --- */
.note-modal .toolbar .title { max-width: 26vw; }
.nav-btn { padding-left: 10px; padding-right: 10px; }
.memo-pop { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(560px, 92vw); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); z-index: 6; }
.sel-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--accent-bg); border-bottom: 1px solid var(--border); font-size: 13px; }
.note-modal { position: fixed; }
.view-panel .clock-row { font-variant-numeric: tabular-nums; }
.last-attempt { margin: 8px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.last-attempt img { max-width: 100%; max-height: 40vh; object-fit: contain; display: block; border: 1px solid var(--border); border-radius: 6px; background: #fff; margin-bottom: 8px; }
.analysis .detail-only { display: none; }
.analysis.show-detail .detail-only { display: block; }
.analysis.show-detail .grid-2.detail-only { display: grid; }
.detail-toggle { margin: 10px 0 0; }
.a2hs { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; background: var(--text); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); max-width: 92vw; }
.a2hs .btn { background: #fff; }
@media (pointer: coarse) {
  .login input[type=text], .login input[type=password] { min-height: 44px; font-size: 16px; }
  input[type=text], input[type=password] { min-height: 44px; }
}
@media (max-width: 900px) {
  .note-modal .toolbar .right .btn:not(.btn-primary):not(.nav-btn) { padding-left: 10px; padding-right: 10px; }
}

/* --- 3 回目の見直し --- */
.shape-chip, .memo-strip { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.memo-strip { cursor: pointer; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.note-modal .show-tools { position: absolute; top: 8px; right: 8px; z-index: 7; box-shadow: var(--shadow); }
.note-modal.hide-tools .toolbar, .note-modal.hide-tools .note-bottom, .note-modal.hide-tools .sel-bar, .note-modal.hide-tools .memo-strip { display: none; }
.note-modal .toolbar .title { cursor: pointer; }
.note-modal.narrow .toolbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; gap: 6px; padding: 6px 10px; scrollbar-width: none; }
.note-modal.narrow .toolbar::-webkit-scrollbar { display: none; }
.note-modal.narrow .toolbar > *, .note-modal.narrow .tool-group { flex: none; white-space: nowrap; }
.note-modal.narrow .toolbar .title { max-width: 30vw; }
.note-modal.narrow .view-panel { position: fixed; top: 58px; left: 10px; }
.note-modal.narrow .note-bottom { justify-content: flex-end; }
.note-modal.narrow .note-bottom .right { margin-left: 0; width: 100%; justify-content: flex-end; align-items: center; }
.note-modal.narrow .note-bottom .save-state { margin-right: auto; text-align: left; min-width: 0; }
.ptab { height: auto; min-height: 30px; padding: 3px 6px; line-height: 1.15; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.ptab .g { font-size: 10px; font-weight: 400; opacity: 0.85; min-height: 11px; }
.ptab.grading { background: repeating-linear-gradient(45deg, var(--bg) 0 4px, var(--bg-subtle) 4px 8px); border-style: solid; border-color: var(--border-strong); color: var(--text-2); }
@media (pointer: coarse) { .ptab { min-width: 48px; min-height: 44px; } }

/* --- 3 層の地図（選んだ層を目立たせる） --- */
svg.map .node.under { opacity: .45; }
svg.map .node.over { opacity: .18; }
svg.map .edge.under { stroke-opacity: .28; }
svg.map .edge.over { stroke-opacity: .08; }
/* --- ノートの道具（スライダー・図形の種類・点線） --- */
.w-slider { width: 90px; accent-color: var(--accent); vertical-align: middle; }
.w-label { font-size: 12px; color: var(--text-2); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.shape-sel { font-size: 13px; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); }
.note-modal .btn.sym { font-size: 18px; line-height: 1; padding-left: 10px; padding-right: 10px; }
.note-modal .btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); }
@media (pointer: coarse) { .w-slider { width: 110px; height: 44px; } .shape-sel { min-height: 44px; } }
.level-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip-state.none { background: #fff; border: 1px dashed var(--border-strong); color: var(--text-3); }
.level-head { font-size: 12px; color: var(--text-2); margin: 12px 0 4px; font-weight: 600; letter-spacing: .02em; }

/* --- 旧 kvillage の学習記録ノート --- */
.legacy-notes { margin: 12px 0 16px; }
.legacy-notes.empty { background: var(--bg-subtle); }
.notes-list { margin-top: 10px; display: grid; gap: 6px; }
.note-entry { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--bg); }
.note-entry summary { cursor: pointer; font-size: 13px; }
.note-entry .when { color: var(--text-3); font-variant-numeric: tabular-nums; margin-right: 6px; }
.note-text { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.6; margin: 8px 0 2px; color: var(--text-2); }

/* --- ノートの帯（孝さんの見本 2026-09-05） --- */
.note-modal .nbar { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: #3F444A; color: #fff; min-height: 60px; }
.note-modal .nb-group { display: flex; align-items: center; gap: 4px; }
.note-modal .nb-title { flex: 1; text-align: center; font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; color: #fff; }
.note-modal .nb-title .title { color: #fff; max-width: none; cursor: default; }
.note-modal .nb { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 58px; height: 54px; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; padding: 0; }
.note-modal .nb .ic { width: 26px; height: 26px; display: block; }
.note-modal .nb .ic svg { width: 100%; height: 100%; }
.note-modal .nb span { font-size: 11px; line-height: 1; }
.note-modal .nb:disabled { opacity: .35; cursor: default; }
.note-modal .nb.active { background: #0E9AA7; }
.note-modal .nb:not(:disabled):not(.active):hover { background: rgba(255,255,255,.12); }
.note-modal .more-menu summary { list-style: none; }
.note-modal .more-menu summary::-webkit-details-marker { display: none; }
.note-modal .more-menu .view-panel { position: absolute; right: 8px; left: auto; top: 62px; z-index: 8; }
.note-modal .nsub { display: flex; align-items: center; min-height: 52px; padding: 6px 12px; background: #DDE2E6; border-bottom: 1px solid #C9CFD4; }
.note-modal .nsub-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
.note-modal .nsub .sep { width: 1px; height: 28px; background: #B8C0C7; margin: 0 2px; flex: none; }
.note-modal .pill { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 999px; border: 2px solid transparent; background: #fff; cursor: pointer; padding: 0; flex: none; position: relative; }
.note-modal .pill i { display: block; width: 26px; height: 4px; border-radius: 2px; }
.note-modal .pill.active { border-color: #0E9AA7; box-shadow: 0 0 0 2px #fff inset; }
.note-modal .pill.text { width: auto; padding: 0 12px; font-size: 13px; color: var(--text); gap: 4px; }
.note-modal .pill.text.on, .note-modal .pill.text.active { border-color: #0E9AA7; background: #E6F6F7; color: #0B7A85; }
.note-modal .pill.ruler .ic { width: 20px; height: 20px; }
.note-modal .pill.ruler .ic svg { width: 100%; height: 100%; }
.note-modal .pill.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.note-modal .pill.custom i { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); width: 22px; height: 22px; border-radius: 50%; }
.note-modal .w-slider { width: 120px; }
.note-modal .w-slot { display: inline-flex; align-items: center; gap: 6px; }
.note-modal .w-preview { width: 28px; display: inline-flex; align-items: center; justify-content: center; }
.note-modal .w-preview i { display: block; width: 22px; height: 4px; border-radius: 3px; background: var(--text); }
.note-modal .ruler-pop { position: absolute; right: 12px; top: 116px; z-index: 8; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); min-width: 280px; }
.note-modal .sel-actions { display: inline-flex; align-items: center; gap: 8px; }
.note-modal .sel-actions > .pill { flex: none; }
.note-modal .nsub-row .small { white-space: nowrap; }
.note-modal.nbar-ui .note-bottom { justify-content: flex-end; }
.note-modal.nbar-ui .note-bottom .right { margin-left: 0; width: 100%; justify-content: flex-end; }
.note-modal.hide-tools .nbar, .note-modal.hide-tools .nsub { display: none; }
@media (max-width: 700px) { .note-modal .nb { width: 50px; } .note-modal .nb-title { font-size: 14px; } }

/* --- 地図の操作（層のチェックを最初の段に。狭い画面では地図を覆わず上に置く） --- */
.layer-checks { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.layer-checks .label { color: var(--text-2); font-size: 12px; }
.layer-checks .short { display: none; }
.map-layout.narrow .map-controls { position: relative; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); gap: 8px; }
.map-layout.narrow .map-controls .control-group.primary { width: 100%; justify-content: space-between; }
.map-layout.narrow .map-main { height: calc(100vh - 52px - 110px - 58px); }
@media (max-width: 520px) {
  .layer-checks .full { display: none; } .layer-checks .short { display: inline; }
  .layer-checks { gap: 6px; padding: 4px 8px; }
  .note-modal .nb { width: 48px; height: 52px; } .note-modal .nb span { font-size: 10px; }
  .note-modal .nbar { gap: 4px; padding: 4px 6px; overflow-x: auto; }
  .note-modal .nb-title { font-size: 13px; min-width: 40px; }
  .note-modal .note-bottom .right { gap: 6px; } .note-modal .note-bottom .btn { padding-left: 10px; padding-right: 10px; }
}

/* --- ノートの色と太さ（5 色・段階） --- */
.note-modal .slot { display: inline-flex; align-items: center; gap: 8px; }
.note-modal .pill.color input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.note-modal .pill.color i { width: 26px; height: 4px; }
.note-modal .pill.color.active i { height: 6px; }
.note-modal .sizes { display: inline-flex; align-items: center; gap: 4px; }
.note-modal .pill.size { width: 40px; }
.note-modal .pill.size i { border-radius: 50%; background: var(--text); width: 8px; height: 8px; }
.note-modal .pill.size[data-kind=eraser] i { background: #fff; border: 1.5px solid var(--text-2); }
.note-modal .pill.size.active { border-color: #0E9AA7; background: #E6F6F7; }

/* --- 上のタブ（スマホで 2 行に折れないように） --- */
/* iPad の縦（〜900px）までは 1 行に収める。文字の途中で折れないように */
.topbar { flex-wrap: nowrap; }
.topbar .btn, .nav a, .topbar .chip, .topbar .name { white-space: nowrap; }
@media (max-width: 900px) {
  .topbar { gap: 8px; padding: 0 8px; height: 48px; }
  .topbar .brand { display: none; }
  .nav { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; min-width: 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 9px; font-size: 13px; flex: none; }
  .topbar-right { gap: 8px; flex: none; }
  .topbar-right .chip, .topbar-right #chip-streak { display: none; }
  .topbar-right .name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
}

/* --- 用紙の列・添削の結果（2026-09-05 のモックアップ） --- */
.note-modal .stage-wrap { flex: 1; position: relative; min-height: 0; }
.note-modal .sheets { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); background: var(--bg); overflow-x: auto; }
.note-modal .sheet-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg); font-size: 12px; color: var(--text-2); cursor: pointer; flex: none; }
.note-modal .sheet-tab.on { border-color: #0E9AA7; background: #E6F6F7; color: var(--text); }
.note-modal .sheet-tab .thumb { width: 18px; height: 24px; border: 1px solid var(--border-strong); background: #fff; border-radius: 2px; flex: none; }
.note-modal .sheet-tab .thumb.inked { background: repeating-linear-gradient(0deg, #fff 0 3px, #9CA3AF 3px 4px); }
.note-modal .sheet-tab.add { border-style: dashed; justify-content: center; box-shadow: none; background: rgba(255,255,255,.85); }
@media (max-width: 700px) {
  .note-modal .sheet-tab { padding: 6px 8px; }
}
.pending-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); margin: 12px 0; }
.pending-card .thumb { width: 70px; max-height: 96px; object-fit: cover; object-position: top; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; flex: none; }
.pending-card .bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin: 6px 0; }
.pending-card .bar i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 3px; animation: kv-bar 1.6s ease-in-out infinite alternate; }
@keyframes kv-bar { from { transform: translateX(0); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .pending-card .bar i { animation: none; width: 60%; } }
.graded-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle); margin: 10px 0 12px; flex-wrap: wrap; }
.graded-banner.g3 { background: var(--success-bg); border-color: var(--success); }
.graded-banner .gb-text { flex: 1; min-width: 200px; font-size: 13px; }
.grade-big { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 12px; border-radius: 10px; background: var(--accent-bg); color: var(--accent-text); font-weight: 700; font-size: 20px; line-height: 1.2; }
.grade-big small { font-size: 12px; font-weight: 500; }
.grade-big.g3 { background: var(--success-bg); color: var(--success-text); }
.graded { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.25fr); gap: 18px; align-items: start; margin: 12px 0; }
@media (max-width: 760px) { .graded { grid-template-columns: 1fr; } }
.graded .answer { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 10px; }
.graded .answer .cap { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.graded .answer .img { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.graded .answer .img img { display: block; width: 100%; height: auto; }
.graded .mark { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(216,90,48,.25); }
.graded .pager { display: inline-flex; gap: 4px; }
.graded .pager .pg { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg); font-size: 12px; cursor: pointer; }
.graded .pager .pg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.graded .review-col { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 14px 16px; font-size: 13px; }
.graded .gradehead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.graded .gradehead .sum { font-size: 14px; }
.graded .sec { margin-top: 12px; }
.graded .sec h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; color: var(--text-3); font-weight: 500; }
.graded .sec ol, .graded .sec ul { margin: 0; padding: 0; list-style: none; }
.graded .sec li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid var(--border); }
.graded .sec li:first-child { border-top: 0; }
.graded .num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.graded .num.ok { background: var(--success); }
.graded .fix { color: var(--text-2); }
.graded .subactions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.graded .history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.graded .history h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--text-3); font-weight: 500; }
.graded .hrow { display: flex; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; color: var(--text-2); }
.graded .hrow.cur { color: var(--text); }
.graded .reflect { margin-top: 12px; }

/* --- 画面内で大きく見る --- */
.note-modal.viewer { z-index: 60; }
.note-modal.viewer .toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.note-modal.viewer .viewer-body { flex: 1; overflow: auto; background: #4B5563; display: flex; justify-content: center; align-items: flex-start; padding: 12px; -webkit-overflow-scrolling: touch; }
.note-modal.viewer .viewer-img { max-width: 100%; height: auto; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.note-modal.viewer .viewer-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.graded .answer .img img { cursor: zoom-in; }

.graded .advice { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); font-size: 13px; }

/* --- ノート: 前後の移動を帯の右端へ、模範解答を左右にくらべる（2026-09-10） --- */
.note-modal .nbar .vsep { width: 1px; height: 30px; background: rgba(255,255,255,.28); margin: 0 4px; flex: none; }
.note-modal .nb.nav { width: 62px; }
.note-modal .nb.nav .arw { font-size: 17px; line-height: 1; }
.note-modal .stage-wrap { flex: 1; display: flex; min-height: 0; }
.note-modal .stage-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.note-modal .stage-pane .stage { flex: 1; min-height: 0; position: relative; }
.note-modal .model-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border-strong); }
.note-modal .model-head { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-2); }
.note-modal .model-head .t { font-weight: 600; color: var(--text); font-size: 13px; }
.note-modal .model-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.note-modal .model-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; background: var(--bg-subtle); }
.note-modal .model-img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); }
.note-modal .model-zoom { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 12px; border-top: 1px solid var(--border); }
.note-modal .model-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px; color: var(--text-2); font-size: 13px; }
.note-modal .model-msg .lk { width: 36px; height: 36px; border-radius: 50%; background: var(--amber-bg); color: var(--amber-text); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.note-modal .model-msg b { color: var(--text); font-size: 14px; }
.note-modal .model-msg p { margin: 0; max-width: 34ch; }
.note-modal .view-panel .mrule { height: 1px; background: var(--border); margin: 2px 0; }
.note-modal .view-panel .btn { justify-content: flex-start; }
.note-modal .view-panel .btn .r { margin-left: auto; font-size: 11px; color: var(--text-3); }
/* iPad を縦にすると 2 つの面は上下に並ぶ（横に並べると 1 面が狭すぎる） */
@media (max-width: 900px) {
  .note-modal .stage-wrap { flex-direction: column; }
  .note-modal .model-pane { border-left: 0; border-top: 1px solid var(--border-strong); }
}

/* --- ノートの「ポイント面」（授業でやったこと・例題・板書。添削には出さない。2026-09-10） --- */
.note-modal .study-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border-strong); }
.note-modal .study-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.note-modal .study-head .t { font-weight: 600; font-size: 13px; white-space: nowrap; flex: none; }
/* 狭いところに押し込まれても、ボタンは縦書きにならず、閉じるも隠れない */
.note-modal .study-head .btn, .note-modal .model-head .btn { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 5px; }
.note-modal .study-head .chip { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.note-modal .study-head .mk, .note-modal .model-head .mk { display: none; }
.note-modal .study-head.narrow .chip { display: none; }
.note-modal .study-head.narrow .lbl { display: none; }
.note-modal .study-head.narrow .mk { display: inline; font-size: 14px; }
.note-modal .model-head .shrink { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-modal .study-pane .stage { flex: 1; min-height: 0; position: relative; }
.note-modal .study-foot { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); overflow-x: auto; }
.note-modal .study-foot .pg { flex: none; width: 34px; height: 40px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; font-size: 12px; color: var(--text-2); cursor: pointer; }
.note-modal .study-foot .pg.on { border-color: #0E9AA7; box-shadow: 0 0 0 2px #E6F6F7; color: var(--text); }
.note-modal .study-foot .pg.add { border-style: dashed; width: auto; padding: 0 10px; }
/* 仕切り。つまんで動かすとポイント面の広さが変わる */
.note-modal .pane-split { display: none; }
.note-modal.compare .pane-split { display: block; flex: none; width: 10px; cursor: col-resize; background: var(--bg-subtle); border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong);
  background-image: linear-gradient(var(--border-strong), var(--border-strong)); background-size: 2px 28px; background-position: center; background-repeat: no-repeat; touch-action: none; }
.note-modal.compare .pane-split:hover { background-color: var(--accent-bg); }
@media (max-width: 900px) {
  .note-modal.compare .pane-split { width: auto; height: 12px; cursor: row-resize; border: 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background-size: 28px 2px; }
}

/* いま道具が効く面をうっすら示す（左右に並んでいるときだけ） */
.note-modal.compare .stage-pane.active, .note-modal.compare .study-pane.active { box-shadow: inset 0 3px 0 #0E9AA7; }
@media (max-width: 900px) { .note-modal .study-pane { border-left: 0; border-top: 1px solid var(--border-strong); } }
.note-modal.compare .stage-pane, .note-modal.compare .study-pane { flex: 1 1 50%; min-height: 0; }

/* --- ノートの棚（配られたノートがたまる所）とフォルダ --- */
.nb-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .nb-grid { grid-template-columns: 1fr; } }
.folders { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; background: var(--bg); }
.folders .f { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); }
.folders .f.on { background: var(--accent-bg); color: var(--accent-text); font-weight: 600; }
.folders .f .n { margin-left: auto; color: var(--text-3); font-size: 12px; }
.folders .f.drop { background: var(--success-bg); box-shadow: inset 0 0 0 2px var(--success); }
.folders .f .fmenu { color: var(--text-3); padding: 0 4px; border-radius: 6px; }
.folders .f .fmenu:hover { background: var(--border); color: var(--text); }
.folders .rule { height: 1px; background: var(--border); margin: 6px 4px; }
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.nb-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; cursor: pointer; position: relative; }
.nb-card:hover { border-color: var(--border-strong); }
.nb-card.dragging { opacity: .4; }
.nb-card.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.nb-card .pv { height: 132px; border-bottom: 1px solid var(--border); background: #fff; position: relative; overflow: hidden; display: grid; place-items: center; }
.nb-card .pv img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nb-card .pv .badge { position: absolute; right: 6px; bottom: 6px; background: var(--accent); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; }
.nb-card .pv .badge.photo { background: #0E9AA7; right: auto; left: 6px; }
.nb-card .pv .pickmark { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; color: var(--accent-text); font-size: 13px; display: grid; place-items: center; }
.nb-card.picked .pv .pickmark { background: var(--accent); color: #fff; }
.nb-card .bd { padding: 8px 10px; }
.nb-card .bd .t { font-weight: 600; font-size: 13px; }
.nb-card.add { display: grid; place-items: center; border-style: dashed; color: var(--text-2); min-height: 180px; }
.pick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.pick-bar select, .pick-bar input { font-size: 13px; padding: 6px 8px; }
.sel-bar2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-bg); color: var(--accent-text); border: 1px solid #C7D2FE; }

/* --- 生徒の整理（学年・組でしぼって、クラスに一気に入れる） --- */
/* 1 人 1 行に収める。狭いときは縦に潰さず横に送る（縦長で読みにくいのを避ける） */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.students2 { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
table.students2 th, table.students2 td { white-space: nowrap; vertical-align: middle; }
table.students2 th { text-align: left; font-weight: 500; color: var(--text-2); font-size: 12px; padding: 8px; border-bottom: 1px solid var(--border); }
table.students2 td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
table.students2 td.weak { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
table.students2 .bar { width: 56px; }
table.students2 tr.sel td { background: #F5F6FF; }
table.students2 tr:hover td { background: var(--bg-subtle); }
.klass { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--bg); }
.class-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.class-row .k { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); cursor: pointer; font: inherit; color: var(--text); }
.class-row .k:hover { background: var(--bg-subtle); }

/* 連打で画面が拡大しないように（Safari の「2 回たたくと拡大」を止める。孝さん 2026-09-10: 取り消しの連打が効かない） */
button, summary, label.toggle, .btn, .nb, .pill, .sheet-tab, .ptab, .chip.clickable, a.btn { touch-action: manipulation; }

/* --- toast --- */
#toast-area { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 50; }
.toast { background: var(--text); color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); max-width: 360px; animation: fadein .2s ease-out; }
.toast.amber { background: var(--amber-text); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .map-main { border-right: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .topbar { gap: 12px; padding: 0 12px; }
  .brand-sub, #chip-streak { display: none; }
}

/* 出す答案を並べる画面（写真・PDF を何枚でも） */
.pick-stage { display: block; overflow: auto; padding: 16px; }
.pick-list { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.pick { width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pick-thumb { height: 250px; display: flex; align-items: center; justify-content: center; background: #F3F4F6; overflow: hidden; }
.pick-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pick-pdf { text-align: center; color: #6B7280; padding: 10px; }
.pick-bar { display: flex; align-items: center; gap: 2px; padding: 4px 5px; border-top: 1px solid var(--border); white-space: nowrap; }
.pick-bar > * { flex: none; }
.pick-bar .btn { padding: 3px 7px; }
.pick-bar .muted { margin-right: auto; }
.small .warn, .faint .warn { color: var(--amber-text); }