/* 親の画面の見た目（2026-10-31 作り直し）。
   矢吹さんの指定「UI は今作っているレビューアプリ（Review System）のように」に合わせ、
   あちらの Velzon 4.4.4 minimal＋「ソリッド・近未来」の作りを写す：濃紺の左帯・白い上の帯・枠線だけのカード（影なし）・
   墨色の塗りボタンと白地に枠線のボタンの2種類・見出しの下の光る線・数字は HK Grotesk。
   Velzon の CSS（bootstrap など 200KB 超）は持ちこまず、要る部品だけをここで書く。娘さんの画面に効かないよう、
   どの決まりも body.is-parent の中だけに当てる（娘さんの画面は app.css の「よる」のまま変えない）。
   色はここの変数だけ。値はレビューアプリの tokens.css と同じで、文字と地の差は白黒とも 4.5:1 以上（check/ で測る）。 */
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-400.woff2) format("woff2"); font-weight: 300 500; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-700.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: st-num; src: url(/assets/fonts/hkgrotesk-semibold.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: st-num; src: url(/assets/fonts/hkgrotesk-bold.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: remixicon; src: url(/assets/fonts/remixicon.woff2) format("woff2"); font-display: block; }

/* ---- 色（白） ---- */
body.is-parent {
  --bg: #eef1f5; --card: #ffffff; --fg: #1b202a; --mute: #545b6e; --line: #dfe3e8; --line-strong: #c4ccd8;
  --head-bg: #f5f7fa; --row-hover: #f3f7fc; --top-bg: #ffffff; --heading: #232a37;
  --pc: #1573ad; --pc-ink: #ffffff; --pc-soft: #e8f3fa;
  --btn-solid: #1b2433; --btn-solid-hover: #0b1019; --btn-solid-ink: #ffffff;
  --btn-line: #c3cad4; --btn-line-hover: #1b2433; --btn-plain: #ffffff; --btn-plain-hover: #f1f3f6; --btn-plain-ink: #1b2433;
  --ok: #16794f; --ok-soft: #e2f4ec; --ng: #b5331f; --ng-soft: #fde9e5; --warn: #6e4c03; --warn-soft: #fdf3d9; --none: #545b6e; --none-soft: #eceff3;
  --ico-bg: #e8f3fa; --ico: #0f5880;
  --scrim: rgba(30, 32, 37, .45);
  /* 左帯は白黒どちらでも濃紺。選んでいる所だけ青緑（--fx）で光らせる */
  --sb-bg: #0a1019; --sb-line: #1b2535; --sb-ink: #b6c1d2; --sb-ink-2: #8794a9; --sb-hi: #ffffff;
  --sb-active: rgba(34, 211, 238, .13); --sb-hover: rgba(255, 255, 255, .06);
  --fx: #22d3ee; --fx-ink: #04212a; --fx-bar: linear-gradient(90deg, #22d3ee 0%, #6d7bff 100%);
  --p-font: "Open Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --p-num: st-num, "Open Sans", ui-monospace, monospace;
  color-scheme: light;
}
/* ---- 色（黒）。端末が黒なら黒、上の帯の「白にする／黒にする」で固定もできる ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.is-parent {
    --bg: #0e141e; --card: #151d2a; --fg: #dfe4ec; --mute: #a3acbd; --line: #263142; --line-strong: #344155;
    --head-bg: #121a26; --row-hover: #1a2433; --top-bg: #121a26; --heading: #e3e8ef;
    --pc: #6cb8e8; --pc-ink: #0b1a24; --pc-soft: rgba(79, 179, 234, .14);
    --btn-solid: #e9edf3; --btn-solid-hover: #ffffff; --btn-solid-ink: #10151d;
    --btn-line: #4f5864; --btn-line-hover: #dfe4ec; --btn-plain: #1b2330; --btn-plain-hover: #252e3c; --btn-plain-ink: #e9edf3;
    --ok: #8fe0ba; --ok-soft: rgba(95, 207, 155, .14); --ng: #f6aa9c; --ng-soft: rgba(240, 128, 108, .14); --warn: #f0d58f; --warn-soft: rgba(232, 192, 90, .14); --none: #a3acbd; --none-soft: #1d2533;
    --ico-bg: rgba(79, 179, 234, .14); --ico: #8ccdf2;
    --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body.is-parent {
  --bg: #0e141e; --card: #151d2a; --fg: #dfe4ec; --mute: #a3acbd; --line: #263142; --line-strong: #344155;
  --head-bg: #121a26; --row-hover: #1a2433; --top-bg: #121a26; --heading: #e3e8ef;
  --pc: #6cb8e8; --pc-ink: #0b1a24; --pc-soft: rgba(79, 179, 234, .14);
  --btn-solid: #e9edf3; --btn-solid-hover: #ffffff; --btn-solid-ink: #10151d;
  --btn-line: #4f5864; --btn-line-hover: #dfe4ec; --btn-plain: #1b2330; --btn-plain-hover: #252e3c; --btn-plain-ink: #e9edf3;
  --ok: #8fe0ba; --ok-soft: rgba(95, 207, 155, .14); --ng: #f6aa9c; --ng-soft: rgba(240, 128, 108, .14); --warn: #f0d58f; --warn-soft: rgba(232, 192, 90, .14); --none: #a3acbd; --none-soft: #1d2533;
  --ico-bg: rgba(79, 179, 234, .14); --ico: #8ccdf2;
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

body.is-parent { background: var(--bg); color: var(--fg); font-family: var(--p-font); font-size: 14.4px; line-height: 1.55; }
.is-parent .ri { font-family: remixicon !important; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; }
.is-parent .num, .is-parent .t td.num, .is-parent .kpi b { font-family: var(--p-num); }

/* ---- 骨組み：左帯（250px・固定）＋上の帯（70px）＋中身 ---- */
.pv { --sbw: 250px; min-height: 100vh; min-height: 100dvh; }
.pside { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--sbw); display: flex; flex-direction: column; background: var(--sb-bg); border-right: 1px solid var(--sb-line); color: var(--sb-ink); }
.pbrand { height: 70px; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid var(--sb-line); color: var(--sb-hi); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.pnav { flex: 1; overflow-y: auto; padding: 8px .6rem 16px; }
.ptitle { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--sb-ink-2); padding: 18px .7rem 6px; }
.pnav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px .9rem; margin: 1px 0; border-radius: 6px; color: var(--sb-ink); text-decoration: none; font-size: 14.5px; }
.pnav a .ri { font-size: 18px; width: 20px; text-align: center; color: var(--sb-ink-2); }
.pnav a:hover { background: var(--sb-hover); color: var(--sb-hi); }
.pnav a.on { background: var(--sb-active); color: var(--sb-hi); font-weight: 600; }
.pnav a.on .ri { color: var(--fx); }
.pnav a.on::before { content: ""; position: absolute; left: -.6rem; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fx); }
.pnav a:focus-visible { outline: 2px solid var(--fx); outline-offset: -2px; }
.pnav .badge { margin-left: auto; min-width: 22px; text-align: center; font-family: var(--p-num); font-size: 12px; font-weight: 700; border-radius: 4px; padding: 0 6px; background: transparent; color: var(--sb-hi); border: 1px solid var(--fx); }
.pnav a.on .badge { background: var(--fx); color: var(--fx-ink); }
.pside-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--sb-line); font-size: 12px; color: var(--sb-ink-2); }
.pside-foot .ri { color: var(--fx); font-size: 15px; }

.ptop { position: sticky; top: 0; z-index: 20; margin-left: var(--sbw); height: 70px; display: flex; align-items: center; gap: 10px; padding: 0 24px 0 12px; background: var(--top-bg); border-bottom: 1px solid var(--line); }
.ptop .grow { flex: 1; }
.pham { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; font-size: 22px; }
.pham:hover { background: var(--btn-plain-hover); color: var(--fg); }
.pham:focus-visible { outline: 2px solid var(--pc); outline-offset: 1px; }
.ptop-brand { display: none; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--fg); }
.ptop-where { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 保存の様子は、レビューアプリと同じ「点＋文字」の札 */
.is-parent .psave { display: inline-flex; align-items: center; gap: 6px; min-height: 0; font-size: 12px; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.is-parent .psave::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.is-parent .psave:empty { display: none; }
.is-parent .psave[data-state="dirty"], .is-parent .psave[data-state="saving"], .is-parent .psave[data-state="loading"] { color: var(--warn); border-color: var(--warn); }
.is-parent .psave[data-state="error"] { color: var(--ng); border-color: var(--ng); }

.is-parent .pmain { margin-left: var(--sbw); padding: 28px 24px 48px; max-width: none; width: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.is-parent .pmain > * { max-width: 1480px; }
.pscrim { display: none; }

/* 左帯を細くする（PC でハンバーガーを押したとき）。字は隠し、アイコンだけ残す */
.pv.sm { --sbw: 70px; }
.pv.sm .pbrand span, .pv.sm .pnav a span, .pv.sm .ptitle, .pv.sm .pside-foot span, .pv.sm .pnav .badge { display: none; }
.pv.sm .pnav a { justify-content: center; padding: 12px 0; }
.pv.sm .pside-foot { justify-content: center; }

/* iPad 縦・スマホ：左帯は隠し、ハンバーガーで上に重ねて出す */
@media (max-width: 991.98px) {
  .pv, .pv.sm { --sbw: 0px; }
  .pside { width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  .pv.open .pside { transform: none; }
  .pv.sm .pbrand span, .pv.sm .pnav a span, .pv.sm .ptitle, .pv.sm .pside-foot span, .pv.sm .pnav .badge { display: revert; }
  .pv.sm .pnav a { justify-content: flex-start; padding: 10px .9rem; }
  .pv.open .pscrim { display: block; position: fixed; inset: 0; z-index: 25; background: var(--scrim); }
  .ptop { padding: 0 12px 0 6px; height: 60px; }
  .ptop-brand { display: inline-flex; }
  .ptop-where { display: none; }
  .is-parent .pmain { padding: 20px 16px 40px; }
}
@media (max-width: 560px) {
  .ptop .lbl { display: none; }
  .ptop .btn.small { padding: 6px 9px; }
}

/* ---- 見出し：大きめの太字と、下の光る線（レビューアプリの「作品一覧」と同じ） ---- */
.is-parent .ph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.is-parent .ph h1 { position: relative; font-size: 22px; font-weight: 700; color: var(--heading); margin: 0 0 6px; letter-spacing: .01em; }
.is-parent .pmain > .ph h1::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 56px; height: 3px; border-radius: 2px; background: var(--fx-bar); }
.is-parent .pmain > .ph { margin-bottom: 4px; }
.is-parent .ph .btn { margin-left: auto; }
.is-parent .pmute { color: var(--mute); font-size: 13px; }

/* ---- カード：白地・細い線・影なし。最初の h2 はカードの頭（下に線） ---- */
.is-parent .box { background: var(--card); border: 1px solid var(--line-strong); border-radius: .3rem; padding: 16px 20px; box-shadow: none; }
.is-parent .box > h2:first-child, .is-parent .box > .ph:first-child { margin: -16px -20px 14px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.is-parent .box > h2:first-child { font-size: 15px; font-weight: 700; color: var(--heading); }
.is-parent .box > .ph:first-child h2 { font-size: 15px; font-weight: 700; color: var(--heading); margin: 0; }
.is-parent .box h3 { font-size: 14px; color: var(--heading); }
.is-parent .grid2 { gap: 20px; }

/* ---- 数字の札（KPI）：左に字、右に色付きの四角いアイコン ---- */
.is-parent .kpis { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.is-parent .kpi { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: .3rem; padding: 16px 18px; padding-right: 70px; gap: 4px; }
.is-parent .kpi span { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mute); }
.is-parent .kpi b { font-size: 26px; font-weight: 600; color: var(--heading); line-height: 1.25; }
.is-parent .kpi small { font-size: 12px; color: var(--mute); }
.is-parent .kpi small a { color: var(--pc); }
.is-parent .kpi .ri.kico { position: absolute; right: 16px; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--ico-bg); color: var(--ico); font-size: 22px; }

/* ---- 表：頭は淡い地、行にふれると左に光る線 ---- */
.is-parent .t { font-size: 14px; }
.is-parent .t th, .is-parent .t td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.is-parent .t thead th { background: var(--head-bg); color: var(--mute); font-weight: 600; font-size: 12px; letter-spacing: .03em; border-bottom-color: var(--line-strong); }
.is-parent .t tbody tr:hover td { background: var(--row-hover); }
.is-parent .t tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--fx); }
.is-parent .t tr.today td { background: var(--pc-soft); }
.is-parent .t tr.hl td { background: var(--ng-soft); }
.is-parent .t a { color: var(--pc); }
.is-parent .box > .t:first-child, .is-parent .box.scroll-x > .t { margin: 0; }

/* ---- 札（判定など）：角は 4px、淡い地に濃い字 ---- */
.is-parent .chip { border-radius: 4px; font-weight: 600; font-size: 11.5px; padding: 2px 8px; }

/* ---- ボタン：墨色の塗り（主な操作）と、白地に枠線（ほか）の2種類だけ ---- */
.is-parent .btn { border-radius: 6px; font-weight: 600; letter-spacing: .01em; padding: 8px 16px; font-size: 13.5px; gap: 6px; background: var(--btn-solid); border: 1px solid var(--btn-solid); color: var(--btn-solid-ink); box-shadow: none; }
.is-parent .btn:hover { background: var(--btn-solid-hover); border-color: var(--btn-solid-hover); }
.is-parent .btn.ghost { background: var(--btn-plain); border-color: var(--btn-line); color: var(--btn-plain-ink); }
.is-parent .btn.ghost:hover { background: var(--btn-plain-hover); border-color: var(--btn-line-hover); }
.is-parent .btn.small { padding: 5px 11px; font-size: 12.5px; border-radius: 5px; }
.is-parent .btn .ri { font-size: 16px; }
.is-parent .btn:focus-visible, .is-parent .seg a:focus-visible, .is-parent .t a:focus-visible { outline: 2px solid var(--pc); outline-offset: 2px; }

/* ---- 切り替え（教科・週）：ボタンを横に並べ、選んでいる方を塗る ---- */
.is-parent .seg { border: 0; border-radius: 6px; gap: 0; overflow: visible; }
.is-parent .seg a { font-size: 13px; font-weight: 600; padding: 6px 14px; color: var(--btn-plain-ink); background: var(--btn-plain); border: 1px solid var(--btn-line); margin-left: -1px; }
.is-parent .seg a:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.is-parent .seg a:last-child { border-radius: 0 6px 6px 0; }
.is-parent .seg a:only-child { border-radius: 6px; }
.is-parent .seg a + a { border-left: 1px solid var(--btn-line); }
.is-parent .seg a:hover { background: var(--btn-plain-hover); }
.is-parent .seg a.on { position: relative; z-index: 1; background: var(--btn-solid); border-color: var(--btn-solid); color: var(--btn-solid-ink); }

/* ---- 入力欄 ---- */
.is-parent .plabel textarea, .is-parent .plabel input, .is-parent .pin, .is-parent .nin { border-color: var(--line-strong); border-radius: .3rem; background: var(--card); color: var(--fg); font-size: 14px; }
.is-parent .plabel textarea:focus, .is-parent .plabel input:focus, .is-parent .pin:focus, .is-parent .nin:focus { outline: 2px solid var(--pc); outline-offset: 0; border-color: var(--pc); }
.is-parent .pdet { border-color: var(--line-strong); border-radius: .3rem; }
.is-parent .pdet summary { color: var(--pc); }

/* ---- 苦手マップ ---- */
.is-parent .mu { border-radius: 4px; }
.is-parent .mu.v-none { border-color: var(--line-strong); }

/* ---- 単元の中身（2026-10-31 新しく足した画面） ---- */
.is-parent .qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.is-parent .qlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.is-parent .qlist li:last-child { border-bottom: 0; }
.is-parent .qno { grid-row: span 3; font-family: var(--p-num); font-weight: 700; color: var(--mute); padding-top: 1px; }
.is-parent .qq { white-space: pre-wrap; font-weight: 600; color: var(--heading); }
.is-parent .qa { color: var(--ok); }
.is-parent .qa b { font-weight: 700; }
.is-parent .qx { color: var(--mute); font-size: 13px; }
.is-parent .qopts { color: var(--mute); font-size: 13px; }
.is-parent .gtag { display: inline-block; font-family: var(--p-num); font-size: 11.5px; font-weight: 700; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line-strong); color: var(--mute); white-space: nowrap; }
.is-parent .gtag.j { border-color: var(--pc); color: var(--pc); }
.is-parent .ulink { color: var(--pc); font-weight: 600; text-decoration: none; }
.is-parent .ulink:hover { text-decoration: underline; }
.is-parent .bar2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

.is-parent .toast { background: var(--btn-solid); color: var(--btn-solid-ink); border-radius: 6px; }
.is-parent .toast.err { background: var(--ng-soft); color: var(--ng); }

/* アイコン（Remix Icon の字形の番号。レビューアプリの icons-remix.min.css から要る分だけ） */
.is-parent .i-week:before { content: "\ec10"; } .is-parent .i-ask:before { content: "\f043"; } .is-parent .i-daily:before { content: "\eb23"; }
.is-parent .i-check:before { content: "\f197"; } .is-parent .i-map:before { content: "\ef06"; } .is-parent .i-book:before { content: "\ead3"; }
.is-parent .i-units:before { content: "\f181"; } .is-parent .i-data:before { content: "\ecdd"; } .is-parent .i-set:before { content: "\f0e6"; }
.is-parent .i-dbx:before { content: "\ec6c"; } .is-parent .i-moon:before { content: "\ef75"; } .is-parent .i-sun:before { content: "\f1bf"; }
.is-parent .i-kid:before { content: "\f274"; } .is-parent .i-menu:before { content: "\ef3c"; } .is-parent .i-time:before { content: "\f20f"; }
.is-parent .i-ok:before { content: "\eb81"; } .is-parent .i-left:before { content: "\ea64"; } .is-parent .i-right:before { content: "\ea6e"; }
.is-parent .i-warn:before { content: "\eca1"; } .is-parent .i-booklet:before { content: "\eadf"; } .is-parent .i-pie:before { content: "\effa"; }

/* スマホ：数字の札は2列にして、縦に長くなりすぎないようにする（右の四角いアイコンは省く） */
@media (max-width: 560px) {
  .is-parent .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .is-parent .kpi { padding: 12px 14px; }
  .is-parent .kpi .kico { display: none; }
  .is-parent .kpi b { font-size: 21px; }
}