/* TELA-COYA（テラコヤ）先生のための学び舎（仮称）— 画面の共通スタイル
   配色＝ネイビー #10293C／ティール #0F7E9D／シアン #7FD7E2（共通ルールブック§5）
   文字＝Noto Sans JP のみ。本文とUIは16px以上、注記だけ14px（ui-taste §3）
   角丸は10pxの1種類に統一。 */

:root{
  --bg:#F3F6F7;
  --surface:#FBFCFC;
  --surface-2:#EEF3F5;
  --ink:#10293C;
  --ink-2:#4A5E6D;
  --ink-3:#6B7C88;
  --line:#D5DFE4;
  --line-strong:#9FB1BC;
  --accent:#0F7E9D;
  --accent-ink:#FBFCFC;
  --accent-soft:#E2F2F6;
  --cyan:#7FD7E2;
  --navy:#10293C;
  --on-navy:#EEF6F8;
  --ok:#2E7D32;   --ok-soft:#E6F2E7;
  --warn:#8A5A00; --warn-soft:#FBF0DC;
  --err:#C62828;  --err-soft:#FBE9E9;
  --mute:#5E6B75; --mute-soft:#ECEFF1;
  --shadow:0 1px 2px rgba(16,41,60,.06), 0 4px 14px rgba(16,41,60,.06);
  --r:10px;
  --focus:0 0 0 3px rgba(15,126,157,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1822; --surface:#10222F; --surface-2:#15293A; --ink:#E3ECF0; --ink-2:#A8BAC5; --ink-3:#8699A5;
    --line:#233B4E; --line-strong:#3C5870; --accent:#5EC3DC; --accent-ink:#0B1822; --accent-soft:#12384A;
    --navy:#0E2C40; --on-navy:#E6F2F5;
    --ok:#7CC482; --ok-soft:#18321C; --warn:#E9B45A; --warn-soft:#33270F; --err:#F08A8A; --err-soft:#3A1A1A;
    --mute:#A0AEB8; --mute-soft:#1C2C38; --shadow:none; --focus:0 0 0 3px rgba(94,195,220,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1822; --surface:#10222F; --surface-2:#15293A; --ink:#E3ECF0; --ink-2:#A8BAC5; --ink-3:#8699A5;
  --line:#233B4E; --line-strong:#3C5870; --accent:#5EC3DC; --accent-ink:#0B1822; --accent-soft:#12384A;
  --navy:#0E2C40; --on-navy:#E6F2F5;
  --ok:#7CC482; --ok-soft:#18321C; --warn:#E9B45A; --warn-soft:#33270F; --err:#F08A8A; --err-soft:#3A1A1A;
  --mute:#A0AEB8; --mute-soft:#1C2C38; --shadow:none; --focus:0 0 0 3px rgba(94,195,220,.45);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif; font-size:16px; line-height:1.7;
  line-break:strict; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.4; letter-spacing:-0.01em; margin:0; text-wrap:balance}
h1{font-size:1.6rem; font-weight:700}
h2{font-size:1.25rem; font-weight:700}
h3{font-size:1.05rem; font-weight:700}
p{margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:14px; line-height:1.6}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.icon{display:inline-flex; flex:none; align-items:center; justify-content:center}
.icon svg{width:1.25em; height:1.25em}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--err); border-color:var(--err)}
.btn.text{border-color:transparent; background:transparent; color:var(--accent); padding:0 10px}
.btn.text:hover{background:var(--accent-soft)}
.btn.small{min-height:36px; padding:0 12px; font-size:15px}
.btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.btn-row.end{justify-content:flex-end}

/* ---------- 状態ラベル（色＋文字） ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; padding:1px 10px; border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.err{background:var(--err-soft); color:var(--err)}
.pill.mute{background:var(--mute-soft); color:var(--mute)}
.pill.info{background:var(--accent-soft); color:var(--accent)}

/* ---------- 読込中／0件／エラー／権限なし ---------- */
.state{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:28px; border:1px dashed var(--line-strong); border-radius:var(--r); background:var(--surface)}
.state .icon{color:var(--ink-3)}
.state .icon svg{width:28px; height:28px}
.state.err .icon{color:var(--err)}
.skel{display:block; background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2)); background-size:200% 100%; border-radius:var(--r); animation:skel 1.2s linear infinite}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){ .skel{animation:none} }

/* ---------- お知らせのトースト ---------- */
.toasts{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:40; width:min(92vw,480px)}
.toast{background:var(--navy); color:var(--on-navy); border-radius:var(--r); padding:12px 16px; box-shadow:var(--shadow); font-size:15px}
.toast.err{background:var(--err); color:#fff}

/* ---------- ダイアログ ---------- */
.overlay{position:fixed; inset:0; background:rgba(8,20,30,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:30}
.dialog{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); width:min(560px,100%); max-height:90vh; overflow:auto; padding:24px; display:flex; flex-direction:column; gap:16px}
.dialog pre{margin:0; padding:12px; background:var(--surface-2); border-radius:var(--r); overflow:auto; font-size:14px; line-height:1.5; max-height:300px}
.secret{display:grid; grid-template-columns:auto 1fr auto; gap:8px 12px; align-items:center; padding:14px; background:var(--surface-2); border-radius:var(--r)}
.secret code{font-size:18px; font-weight:700; letter-spacing:.04em; font-family:ui-monospace,Consolas,monospace}

/* ---------- フォーム（ラベル／要否／サポート／入力欄／エラーを縦に） ---------- */
.form{display:flex; flex-direction:column; gap:22px; max-width:640px}
.field{display:flex; flex-direction:column; gap:6px}
.field label,.field legend{font-weight:700}
.req{color:var(--err); font-size:14px; font-weight:700; margin-left:8px}
.opt{color:var(--ink-3); font-size:14px; font-weight:500; margin-left:8px}
.help{color:var(--ink-2); font-size:14px; line-height:1.6}
.errtext{color:var(--err); font-size:15px; font-weight:500}
.input,select.input,textarea.input{
  min-height:44px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); width:100%;
}
textarea.input{min-height:120px; line-height:1.6; resize:vertical}
.input.w-s{max-width:12em}.input.w-m{max-width:22em}
.input[aria-invalid="true"]{border-color:var(--err); border-width:2px}
fieldset{border:0; padding:0; margin:0}
.choices{display:flex; flex-wrap:wrap; gap:8px 20px}
.choices label{font-weight:500; display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer}
.choices input{width:20px; height:20px; accent-color:var(--accent)}

/* ---------- 表 ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:15px; line-height:1.3}
th,td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); white-space:nowrap}
thead th{position:sticky; top:0; background:var(--surface-2); font-weight:700; border-bottom:2px solid var(--line-strong); z-index:1}
tbody tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right; font-variant-numeric:tabular-nums}
td.wrap{white-space:normal; min-width:16em}
dl.info{display:grid; grid-template-columns:10em 1fr; gap:10px 16px; margin:0}
dl.info dt{color:var(--ink-2); font-weight:500}
dl.info dd{margin:0}
@media (max-width:560px){ dl.info{grid-template-columns:1fr; gap:2px} dl.info dd{margin-bottom:10px} }

/* ======================================================
   ログイン
   ====================================================== */
.login-wrap{min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.1fr 1fr}
.login-side{background:var(--navy); color:var(--on-navy); padding:48px clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:space-between; gap:32px}
.login-side .brand{font-weight:700; letter-spacing:.02em; color:var(--cyan)}
.login-side h1{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:900; line-height:1.35}
.login-side ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px}
.login-side li{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start}
.login-side li .icon{color:var(--cyan); margin-top:3px}
.login-main{padding:48px clamp(20px,5vw,64px); display:flex; flex-direction:column; justify-content:center; gap:28px; background:var(--surface)}
.demo-box{border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg)}
.demo-box table{font-size:14px}
.demo-box td,.demo-box th{padding:6px 8px}
@media (max-width:860px){ .login-wrap{grid-template-columns:1fr} .login-side{padding-block:32px} }

/* ======================================================
   受講サイト（先生）
   ====================================================== */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--surface); border-bottom:1px solid var(--line)}
.site-head .inner{max-width:1180px; margin:0 auto; padding:0 20px; min-height:64px; display:flex; align-items:center; gap:20px}
.site-brand{font-weight:900; color:var(--ink); text-decoration:none; line-height:1.25}
.site-brand small{display:block; font-weight:500; font-size:14px; color:var(--ink-2)}
.site-nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.site-nav a{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:var(--r); color:var(--ink); text-decoration:none; font-weight:500}
.site-nav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:700}
.site-nav a:hover{background:var(--surface-2)}
.site-main{max-width:1180px; margin:0 auto; padding:28px 20px 72px; display:flex; flex-direction:column; gap:40px}
@media (max-width:720px){ .site-head .inner{flex-wrap:wrap; padding-block:8px} .site-nav{margin-left:0; width:100%} .site-nav a{padding:0 10px} .site-nav .lbl-long{display:none} }
@media (max-width:420px){ .site-nav{gap:0; flex-wrap:nowrap} .site-nav a{padding:0 8px} .site-nav a:not([data-action]) .icon{display:none} }

.sec{display:flex; flex-direction:column; gap:16px; min-width:0}
.site-main > *, .watch > *{min-width:0}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* 見出し帯：その学校の状況をひとことで */
.welcome{display:grid; grid-template-columns:1fr auto; gap:16px 24px; align-items:end; padding-bottom:4px}
.welcome .stats{display:flex; flex-wrap:wrap; gap:12px 28px}
.welcome .stats div{display:flex; flex-direction:column}
.welcome .stats b{font-size:1.6rem; font-variant-numeric:tabular-nums; line-height:1.2}
.welcome .stats span{font-size:14px; color:var(--ink-2)}
@media (max-width:720px){ .welcome{grid-template-columns:1fr} }

/* 続きから：横に流れる列 */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,300px); gap:16px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory}
.rail > *{scroll-snap-align:start}

/* サムネイル（題名を大きく＝一覧で中身が分かる表紙。本番もこの組み方で画像を書き出す） */
.thumb{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:var(--r); overflow:hidden; color:#F4F9FA; display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; container-type:inline-size}
.thumb.training{background:#10293C}
.thumb.practice{background:#0F6A84}
.thumb.topic{background:#35505F}
.thumb .kind{font-size:13px; font-weight:700; color:#7FD7E2; line-height:1.3}
.thumb .tt{font-size:clamp(12px, 7.2cqi, 22px); font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px}
.thumb .len{margin-top:auto; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1}
.thumb .len small{font-size:13px; margin-left:1px}
.thumb .bar{position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(255,255,255,.18)}
.thumb .bar i{display:block; height:100%; background:#7FD7E2}
.thumb .done{position:absolute; bottom:9px; right:10px; background:#EEF6F8; color:#10293C; border-radius:999px; padding:1px 9px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:4px}
.thumb .done svg{width:14px; height:14px}
/* 小さい表紙（横の一覧・スマホの行）は題名を隠して種類と長さだけにする。題名は表紙の横に出ている */
@container (max-width: 180px){ .thumb .tt, .thumb .done{display:none} }

.vcard{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit}
.vcard .t{font-weight:700; line-height:1.45}
.vcard:hover .t{color:var(--accent)}
.meta{display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--ink-2); font-size:14px; line-height:1.5}
.meta span{display:inline-flex; align-items:center; gap:4px}
.meta .icon svg{width:15px; height:15px}

/* 新着と講座一覧：横長の行 */
.vlist{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.vrow{display:grid; grid-template-columns:200px 1fr auto; gap:18px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.vrow:hover .t{color:var(--accent)}
.vrow .t{font-weight:700; line-height:1.45}
.vrow .desc{color:var(--ink-2); font-size:15px; line-height:1.6; margin-top:2px}
.vrow .go{color:var(--accent)}
@media (max-width:720px){ .vrow{grid-template-columns:132px 1fr} .vrow .go{display:none} .vrow .desc{display:none} }

.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs button{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; font-weight:500}
.tabs button[aria-pressed="true"]{background:var(--navy); color:var(--on-navy); border-color:var(--navy)}

/* 視聴ページ */
.watch{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start}
@media (max-width:980px){ .watch{grid-template-columns:1fr} }
.crumb{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); text-decoration:none; font-size:15px; min-height:32px}
.crumb:hover{color:var(--accent)}

.player{position:relative; background:#0A1A24; border-radius:var(--r); overflow:hidden; color:#EEF6F8; aspect-ratio:16/9; max-width:100%; display:flex; flex-direction:column; justify-content:flex-end}
.player .screen{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px}
.player .screen .ch{font-size:clamp(1rem,2.4vw,1.5rem); font-weight:700}
.player .screen .note{font-size:14px; color:#9FB7C3}
.player .big-play{width:76px; height:76px; border-radius:50%; background:rgba(127,215,226,.95); color:#10293C; border:0; display:grid; place-items:center; cursor:pointer}
.player .big-play svg{width:34px; height:34px}
.player .wm{position:absolute; font-size:13px; color:rgba(238,246,248,.28); pointer-events:none; user-select:none; transition:top .8s, left .8s}
@media (prefers-reduced-motion: reduce){ .player .wm{transition:none} }
.player .ctrl{position:relative; display:flex; flex-direction:column; gap:6px; padding:10px 14px 12px; background:linear-gradient(transparent, rgba(5,14,20,.85))}
.seek{position:relative; height:24px; cursor:pointer; display:flex; align-items:center}
.seek .track{position:relative; width:100%; height:6px; background:rgba(255,255,255,.22); border-radius:999px}
.seek .fill{position:absolute; left:0; top:0; bottom:0; background:#7FD7E2; border-radius:999px}
.seek .mark{position:absolute; top:-3px; width:2px; height:12px; background:rgba(255,255,255,.55)}
.ctrl-row{display:flex; align-items:center; gap:8px}
.ctrl-row .time{font-size:14px; font-variant-numeric:tabular-nums; margin-right:auto}
.pbtn{min-width:44px; min-height:40px; border:0; border-radius:var(--r); background:transparent; color:#EEF6F8; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; font-size:14px; font-weight:700}
.pbtn:hover{background:rgba(255,255,255,.12)}
.nobr{display:inline-block}
@media (max-width:560px){ .player .screen .note{display:none} .player .screen .ch{font-size:1rem} }
.player.theater{position:fixed; inset:0; z-index:25; border-radius:0; aspect-ratio:auto}

.notice{display:grid; grid-template-columns:24px 1fr; gap:10px; padding:12px 16px; border-radius:var(--r); background:var(--warn-soft); color:var(--ink)}
.notice .icon{color:var(--warn); margin-top:2px}
.notice.info{background:var(--accent-soft)}
.notice.info .icon{color:var(--accent)}

.side{display:flex; flex-direction:column; gap:22px}
.chapters{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.chapters button{width:100%; display:grid; grid-template-columns:4.2em 1fr; gap:8px; text-align:left; padding:10px 6px; min-height:44px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer}
.chapters button:hover{background:var(--surface-2)}
.chapters button[aria-current="true"]{color:var(--accent); font-weight:700}
.chapters .tc{font-variant-numeric:tabular-nums; color:var(--ink-2)}

/* お知らせ */
.news{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.news article{display:grid; grid-template-columns:8em 1fr; gap:6px 20px; padding:18px 0; border-bottom:1px solid var(--line)}
.news time{color:var(--ink-2); font-variant-numeric:tabular-nums; font-size:15px}
.news p{color:var(--ink-2); max-width:40em; white-space:pre-wrap}
@media (max-width:560px){ .news article{grid-template-columns:1fr} }

.site-foot{border-top:1px solid var(--line); padding:24px 20px; color:var(--ink-2); font-size:14px; text-align:left; max-width:1180px; margin:0 auto}

/* ======================================================
   管理画面（業務アプリ・密度高め）
   ====================================================== */
.adm{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; min-height:100dvh}
.adm-side{background:var(--navy); color:var(--on-navy); padding:18px 12px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; height:100dvh}
.adm-side .brand{padding:0 8px; font-weight:900; line-height:1.3}
.adm-side .brand small{display:block; color:var(--cyan); font-weight:700; font-size:13px; letter-spacing:.04em}
.adm-nav{display:flex; flex-direction:column; gap:2px}
.adm-nav a{display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:var(--r); color:var(--on-navy); text-decoration:none; font-weight:500}
.adm-nav a:hover{background:rgba(255,255,255,.08)}
.adm-nav a[aria-current="page"]{background:rgba(127,215,226,.18); color:#FFFFFF; font-weight:700}
.adm-nav a[aria-current="page"] .icon{color:var(--cyan)}
.adm-user{margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; display:flex; flex-direction:column; gap:8px}
.adm-user .btn{background:transparent; color:var(--on-navy); border-color:rgba(255,255,255,.3); min-height:40px}
.adm-main{padding:20px 28px 64px; display:flex; flex-direction:column; gap:22px; min-width:0}
.adm-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.sample-flag{display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--warn); background:var(--warn-soft); padding:4px 12px; border-radius:999px; font-weight:700}
@media (max-width:860px){
  .adm{grid-template-columns:1fr}
  .adm-side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 12px; gap:8px}
  .adm-nav{flex-direction:row; flex-wrap:wrap}
  .adm-nav a{min-height:40px; padding:0 10px}
  .adm-user{margin-top:0; border-top:0; padding:0; flex-direction:row; align-items:center; margin-left:auto}
  .adm-main{padding:16px 16px 64px}
}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.kpi .lbl{font-size:14px; color:var(--ink-2)}
.kpi .v{font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.25}
.kpi .v small{font-size:15px; font-weight:500; margin-left:3px}
.kpi .sub{font-size:14px; color:var(--ink-2)}
.kpi.attn{border-color:var(--warn); border-width:2px}
@media (max-width:980px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:14px}
.cols{display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:start}
@media (max-width:1080px){ .cols{grid-template-columns:1fr} }
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.toolbar .input{max-width:18em; min-height:40px}
.toolbar select.input{max-width:12em}

/* ======================================================
   デザイン案（html[data-look]）。決まったら1つに絞って残りを消す
   A＝ネイビーの帯（既定）／B＝ティールの差し色／C＝スライド型／AC＝Aの帯＋Cのサムネイル（おすすめ）
   ====================================================== */

/* ---- A：ネイビーの帯 ---- */
html[data-look="a"] .site-head, html[data-look="ac"] .site-head{background:var(--navy); border-bottom:0}
html[data-look="a"] .site-brand, html[data-look="ac"] .site-brand{color:#FFFFFF}
html[data-look="a"] .site-brand small, html[data-look="ac"] .site-brand small{color:var(--cyan)}
html[data-look="a"] .site-nav a, html[data-look="ac"] .site-nav a{color:var(--on-navy)}
html[data-look="a"] .site-nav a:hover, html[data-look="ac"] .site-nav a:hover{background:rgba(255,255,255,.08)}
html[data-look="a"] .site-nav a[aria-current="page"], html[data-look="ac"] .site-nav a[aria-current="page"]{background:rgba(127,215,226,.18); color:#FFFFFF}
html[data-look="a"] .site-nav a[aria-current="page"] .icon, html[data-look="ac"] .site-nav a[aria-current="page"] .icon{color:var(--cyan)}

/* ---- B：ティールの差し色（いちばん白い） ---- */
html[data-look="b"]{--bg:#FBFCFC}
html[data-look="b"] .site-head{border-top:4px solid var(--accent); box-shadow:0 1px 0 var(--line)}
html[data-look="b"] .site-nav a[aria-current="page"]{background:transparent; color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); border-radius:0}
html[data-look="b"] .sec-h h2, html[data-look="b"] .side h2, html[data-look="b"] .sec > h2{border-left:4px solid var(--accent); padding-left:10px}
html[data-look="b"] .welcome{background:var(--accent-soft); border-radius:var(--r); padding:20px 22px}
html[data-look="b"] .thumb{background:#FFFFFF; color:var(--ink); border:1px solid var(--line); padding-top:14px}
html[data-look="b"] .thumb::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--accent)}
html[data-look="b"] .thumb.training::before{background:#10293C}
html[data-look="b"] .thumb.topic::before{background:#7FD7E2}
html[data-look="b"] .thumb .kind{color:var(--accent)}
html[data-look="b"] .thumb .tt{color:#10293C}
html[data-look="b"] .thumb .len{color:#10293C}
html[data-look="b"] .thumb .bar{background:var(--surface-2)}
html[data-look="b"] .thumb .bar i{background:var(--accent)}
html[data-look="b"] .thumb .done{background:var(--accent); color:#FFFFFF}

/* ---- C：スライド型（動画の表紙と同じ組み方。NITSの講義型に寄せる） ---- */
html[data-look="c"]{--bg:#F6F7F7}
html[data-look="c"] .site-head{border-bottom:2px solid var(--navy)}
html[data-look="c"] .site-nav a[aria-current="page"]{background:var(--navy); color:#FFFFFF}
html[data-look="c"] .sec-h{border-bottom:2px solid var(--navy); padding-bottom:6px}
html[data-look="c"] .welcome{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
html[data-look="c"] .thumb, html[data-look="ac"] .thumb{background:#FFFFFF; color:#10293C; border:1px solid var(--line-strong); padding:0 0 10px}
html[data-look="c"] .thumb .kind, html[data-look="ac"] .thumb .kind{background:#10293C; color:#FFFFFF; padding:6px 12px; font-size:13px}
html[data-look="c"] .thumb.practice .kind, html[data-look="ac"] .thumb.practice .kind{background:#0F7E9D}
html[data-look="c"] .thumb.topic .kind, html[data-look="ac"] .thumb.topic .kind{background:#35505F}
html[data-look="c"] .thumb .tt, html[data-look="ac"] .thumb .tt{padding:4px 12px 0; color:#10293C}
html[data-look="c"] .thumb .len, html[data-look="ac"] .thumb .len{padding:0 12px; color:#0F7E9D}
html[data-look="c"] .thumb .bar, html[data-look="ac"] .thumb .bar{background:var(--surface-2)}
html[data-look="c"] .thumb .bar i, html[data-look="ac"] .thumb .bar i{background:var(--accent)}
html[data-look="c"] .thumb .done, html[data-look="ac"] .thumb .done{background:#10293C; color:#FFFFFF}

/* ---- d：クリーム地×幾何学タイル（決定案。講座の表紙と同じ組み方） ----
   色＝クリーム #FBF7EF／ネイビー #10293C／ティール #0F7E9D／うすティール #CFE6EA／コーラル #E8735A／イエロー #F2B63C
   タイルはSVG（app.js の TILES）。常に明るい表示（ダーク表示は使わない） */
.motif,.mark,.hero,.login-tiles{display:none}
html[data-look="d"]{
  --bg:#FBF7EF; --surface:#FFFDF9; --surface-2:#F3ECDD; --line:#E6DDCB; --line-strong:#B9AD95;
  --ink:#10293C; --ink-2:#465966; --ink-3:#66757F;
  --accent:#0B6B86; --accent-soft:#DCEDF1; --accent-ink:#FFFFFF;
  --coral:#E8735A; --yel:#F2B63C; --lt:#CFE6EA;
}
html[data-look="d"] .site-head{background:var(--bg); border-bottom:1px solid var(--line)}
html[data-look="d"] .site-head::before{content:""; display:block; height:6px;
  background:linear-gradient(90deg,#F2B63C 0 25%,#CFE6EA 25% 50%,#E8735A 50% 75%,#10293C 75% 100%)}
html[data-look="d"] .site-brand{display:flex; align-items:center; gap:12px}
html[data-look="d"] .site-brand .mark{display:block; width:36px; height:36px; flex:none; border-radius:6px; overflow:hidden}
html[data-look="d"] .site-brand .mark-svg{display:block; width:100%; height:100%}
html[data-look="d"] .site-brand small{color:var(--ink-2)}
html[data-look="d"] .site-nav a[aria-current="page"]{background:var(--navy); color:#FFFFFF}
html[data-look="d"] .site-nav a[aria-current="page"] .icon{color:var(--yel)}
html[data-look="d"] .site-nav a:hover{background:var(--surface-2)}
html[data-look="d"] .sec-h h2::before{content:""; display:inline-block; width:.62em; height:.62em; margin-right:.5em; border-radius:50%; background:var(--coral); vertical-align:.02em}
html[data-look="d"] .tabs button{background:var(--surface); border-color:var(--line-strong)}
html[data-look="d"] .tabs button[aria-pressed="true"]{background:var(--navy); color:#FFFFFF; border-color:var(--navy)}

/* サムネイル：左に題名、右にタイル2列×3段（小さい表紙は1列×3段） */
html[data-look="d"] .thumb{background:var(--surface); color:var(--navy); border:1px solid var(--line-strong)}
html[data-look="d"] .thumb .motif{display:block; position:absolute; top:0; right:0; height:100%; aspect-ratio:2/3; width:auto}
html[data-look="d"] .thumb .kind{align-self:flex-start; white-space:nowrap; background:var(--coral); color:var(--navy); border-radius:999px; padding:1px 10px; font-size:13px; font-weight:700}
html[data-look="d"] .thumb.practice .kind{background:#0F7E9D; color:#FFFFFF}
html[data-look="d"] .thumb.topic .kind{background:var(--yel); color:var(--navy)}
html[data-look="d"] .thumb .tt{color:var(--navy); font-weight:900; font-size:clamp(12px,6.6cqi,21px); margin-right:40%}
html[data-look="d"] .thumb .len{color:var(--accent)}
html[data-look="d"] .thumb .bar{background:rgba(16,41,60,.12); z-index:1}
html[data-look="d"] .thumb .bar i{background:var(--coral)}
html[data-look="d"] .thumb .done{background:var(--navy); color:#FFFFFF; right:auto; left:12px; bottom:10px; z-index:1}
@container (max-width: 180px){
  html[data-look="d"] .thumb .motif{aspect-ratio:1/3}
  html[data-look="d"] .thumb .kind{font-size:11px; padding:0 7px}
}

/* ホームの表紙：講座の表紙スライドと同じ組み方 */
html[data-look="d"] .hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:24px 40px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px clamp(20px,4vw,48px); overflow:hidden}
html[data-look="d"] .hero-text{display:flex; flex-direction:column; gap:14px; min-width:0}
html[data-look="d"] .hero .kicker{color:var(--accent); font-weight:700; letter-spacing:.06em; font-size:15px}
html[data-look="d"] .hero h1{display:flex; flex-direction:column; gap:0; font-weight:900; color:var(--navy)}
html[data-look="d"] .hero h1 span{font-size:clamp(1.5rem,3.4vw,2.2rem)}
html[data-look="d"] .hero h1 b{font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.15; letter-spacing:-.02em; font-weight:900}
html[data-look="d"] .hero .ep{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:6px}
html[data-look="d"] .hero .pill{background:var(--coral); color:var(--navy); border-radius:999px; padding:2px 14px; font-weight:900; font-size:15px}
html[data-look="d"] .hero .ept{font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:700}
html[data-look="d"] .hero .epd{color:var(--ink-2); max-width:34em}
html[data-look="d"] .hero .btn-row{margin-top:6px}
html[data-look="d"] .hero-tiles{display:block; width:100%; aspect-ratio:1/1; border-radius:6px}
@media (max-width:860px){
  html[data-look="d"] .hero{grid-template-columns:1fr; padding:24px 20px}
  html[data-look="d"] .hero-tiles{aspect-ratio:2/1; order:-1}
}
html[data-look="d"] .welcome{margin-top:8px}

/* 動画プレーヤーの差し色 */
html[data-look="d"] .player .big-play{background:var(--yel); color:var(--navy)}
html[data-look="d"] .seek .fill{background:var(--yel)}

/* ログイン画面 */
html[data-look="d"] .login-side{background:var(--bg); color:var(--navy); border-right:1px solid var(--line)}
html[data-look="d"] .login-side .brand{color:var(--accent)}
html[data-look="d"] .login-side li .icon{color:var(--accent)}
html[data-look="d"] .login-side p.small{color:var(--ink-2) !important}
html[data-look="d"] .login-tiles{display:block; width:100%; max-width:440px; aspect-ratio:2/1; border-radius:6px}

/* YouTube限定公開のプレーヤー：YouTubeのプレーヤーをそのまま出す（上に部品を重ねない）。
   ご利用校の表示はプレーヤーの下に置く */
.player.yt{display:block; background:#000}
.player.yt iframe,.player.yt #yt-frame{position:absolute; inset:0; width:100%; height:100%; border:0}
.player.yt .yt-msg{position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:#EEF6F8; background:#0A1A24; font-size:15px; line-height:1.7; z-index:1}
.yt-note{display:flex; gap:8px; align-items:flex-start}
.yt-note .icon svg{width:1.1em; height:1.1em; margin-top:.25em}

/* 表紙の見出しの「O」だけコーラルの円にする（ロゴと同じ） */
html[data-look="d"] .hero h1 b .o{font-style:normal; color:var(--coral)}

/* ---- ロゴ・画像（d 案）---- */
.brand-word,.login-logo,.adm-logo,.hero-img,.state-img{display:none}
html[data-look="d"] .site-brand .brand-name{display:none}
html[data-look="d"] .site-brand .brand-word{display:block; height:26px; width:auto}
html[data-look="d"] .site-brand small{margin-top:2px}
html[data-look="d"] .site-brand .mark{width:40px; height:40px; background:none; border-radius:0; overflow:visible}
html[data-look="d"] .site-brand .mark img{display:block; width:100%; height:100%; object-fit:contain}
html[data-look="d"] .login-side .brand-name{display:none}
html[data-look="d"] .login-logo{display:block; width:min(100%,420px); height:auto}
.adm-side .brand .brand-name{display:none}
.adm-side .adm-logo{display:block; width:100%; max-width:200px; height:auto; margin-bottom:4px}
html[data-look="d"] .hero{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
html[data-look="d"] .hero-img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:6px}
@media (max-width:860px){ html[data-look="d"] .hero-img{order:-1} }
html[data-look="d"] .state .state-img{display:block; width:112px; height:auto; margin:0 auto 4px}
html[data-look="d"] .state .state-ic{display:none}

/* 分野から探す */
.fields{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.fcard{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.fcard img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover}
.fcard .fname{font-weight:700; padding:0 14px; line-height:1.4}
.fcard .fnum{padding:0 14px 12px; color:var(--ink-2); font-size:14px; margin-top:-6px}
.fcard:hover{border-color:var(--accent)}
.fcard:hover .fname{color:var(--accent)}
@media (max-width:860px){ .fields{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ html[data-look="d"] .hero{grid-template-columns:1fr} }

/* 見出しのロゴ配色 */
html[data-look="d"] .hero h1 b i{font-style:normal}
html[data-look="d"] .hero h1 b .lg-n{color:var(--navy)}
html[data-look="d"] .hero h1 b .lg-t{color:#0F7E9D}
html[data-look="d"] .hero h1 b .lg-c{color:var(--coral)}
html[data-look="d"] .hero h1 b .lg-y{color:var(--yel)}