/* ===== 教材の見た目(2026-10-09。index.html 用) =====
   教材の画面(study.html)のグループの画面と同じ見た目を、ノートの写し・教材ライブラリで出す。
   中身は matview.js が作る HTML。study.html の CSS から写して .mv の中だけに効かせた(直すときは study.html と両方) */
.mv{--bg:#F2F3F5;--card:#FFFFFF;--line:#E2E5EC;--div:#EEF0F4;--fg:#2C2C2B;--sub:#6B7183;--mute:#9AA0B0;--body:#414759;
  --acc:#2F45A8;--acc-soft:#E4EAFA;--acc-deep:#22348A;--seg:#E8EAEF;
  color:var(--fg);background:#fff;border:1px solid #E3E7F0;border-radius:18px;padding:14px 16px 16px;margin:10px 0;box-shadow:0 1px 2px rgba(31,35,51,.03);font-size:14px;line-height:1.5;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.mv *{box-sizing:border-box}
.mv button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
.mv .ipa{font-family:inherit}
.mv .muted{font-size:11.5px;color:var(--mute)}
/* 上：記号の箱・名前・グループ */
.mv .mv-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mv .mv-sym{flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.mv .mv-nm{font-size:14.5px;font-weight:700;line-height:1.3}
.mv .mv-gr{font-size:11px;color:var(--sub)}
/* タブと通しの音声(教材の画面の上の帯と同じ) */
.mv .mv-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.mv .mv-top:empty{display:none}
.mv .seg{display:flex;background:var(--seg);border-radius:10px;padding:3px;min-width:0;overflow-x:auto;scrollbar-width:none;flex:0 1 auto}
.mv .seg::-webkit-scrollbar{display:none}
.mv .seg button{flex:0 0 auto;white-space:nowrap;height:30px;padding:0 12px;display:flex;align-items:center;gap:5px;border-radius:8px;font-size:12px;color:var(--sub)}
.mv .seg button.on{background:var(--card);font-weight:700;color:var(--acc)}
.mv .seg .gt-p{flex:0 0 auto;display:flex;align-items:center;gap:2px;height:30px;padding:0 4px 0 11px;border-radius:8px;background:var(--card);white-space:nowrap}
.mv .seg .gt-sym{font-size:12px;font-weight:700;color:var(--acc);margin-right:5px}
.mv .seg .gt-p button{height:22px;padding:0 9px;border-radius:6px;font-size:11.5px;color:var(--sub)}
.mv .seg .gt-p button.sel{background:var(--acc);color:#fff;font-weight:700}
.mv .mv-au{flex:1 1 auto;min-width:200px}
.mv .mv-au:empty{display:none}
.mv .mv-au .mp{margin:0;padding:4px 10px 4px 4px;border-radius:12px}
.mv .mv-au .mp-nm{display:none}
.mv .mv-hint{margin:0 0 8px}
.mv .mv-hint:empty{display:none}
/* 1つのタブだけを貼ったときの見出し */
.mv .mv-sec+.mv-sec{margin-top:22px}
.mv .mv-sh{font-size:13px;font-weight:700;color:var(--acc);margin:0 0 8px}
/* 音声プレーヤー */
.mv .mp{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:6px 12px 6px 6px;margin:8px 0 10px}
.mv .mp-r1{display:flex;align-items:center;gap:10px}
.mv .mp-pl{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center}
.mv .mp.on .mp-pl{background:var(--acc-deep)}
.mv .mp-mid{flex:1 1 auto;min-width:0}
.mv .mp-nm{font-size:13px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .mp-sk{position:relative;height:18px;display:flex;align-items:center;cursor:pointer}
.mv .mp-tr{position:relative;width:100%;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.mv .mp-tr i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc)}
.mv .mp-tm{flex:0 0 auto;font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
/* 解説 */
.mv .ms-emb{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1F2333}
.mv .ms-emb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mv .vc{margin:4px 0 18px}
.mv .vc-sw{display:flex;background:#ECEEF2;border-radius:10px;padding:3px;gap:3px;margin-bottom:10px}
.mv .vc-sw button{flex:1 1 auto;padding:0 8px;min-width:0;height:32px;border:0;border-radius:8px;background:transparent;font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .vc-sw button.on{background:#fff;color:var(--acc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mv .vc-cap{font-size:12px;font-weight:600;color:var(--sub);margin:0 0 6px}
.mv .vc-one{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:8px}
.mv .vc-v{margin-bottom:12px}
.mv .vc-n{font-size:13px;font-weight:600;margin:0 0 6px}
.mv .vg-doc+.vg-doc{margin-top:22px}
.mv .doc{display:flex;flex-direction:column;gap:10px}
.mv .doc img{width:100%;border-radius:12px;display:block;background:var(--seg);min-height:40px}
.mv .doc figure{margin:0}
.mv .doc figcaption{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.7}
.mv .doc h4{margin:4px 0 0!important;font-size:13.5px!important;font-weight:700;line-height:1.45!important;border:0!important;padding:0!important}
.mv .doc p{margin:0;font-size:13px;line-height:1.95;color:var(--body)}
.mv .doc .li{display:flex;gap:7px;font-size:13px;line-height:1.9;color:var(--body)}
.mv .doc .li>i{color:var(--fg);font-style:normal}
.mv .doc .note{background:#F7F6F3;color:var(--fg);border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.85}
.mv .doc hr{border:0;border-top:1px solid var(--line);margin:2px 0}
.mv .doc .emb{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--seg)}
.mv .doc .emb iframe{width:100%;height:100%;border:0;display:block}
.mv .doc .link{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--acc);font-weight:700;background:var(--card);text-decoration:none}
/* 単語・例文 */
.mv .ss-sec+.ss-sec{margin-top:22px}
/* ノートの見出しの決まり(.nb h3＝大きさ・上の線)に負けないよう !important */
.mv .ss-h{margin:0 0 10px!important;font-size:16px!important;font-weight:700;color:var(--fg);line-height:1.4!important;border:0!important;padding:0!important}
.mv .ss-set+.ss-set{margin-top:16px}
.mv .ss-set .mp{margin-bottom:10px}
/* ノートの単語カードの決まり(.nb .wgrid＝grid・列の数を決める)に負けないよう !important(2026-10-09。教材の写しが5列の grid になり、列を減らしても効かなかった) */
.mv .wgrid{--wc:3;display:flex!important;flex-wrap:wrap;gap:8px!important;grid-template-columns:none!important;margin:0!important}
.mv .wgrid>*{flex:0 0 calc((100% - (var(--wc) - 1) * 8px) / var(--wc));min-width:0}
.mv .wgrid.pairs{--wc:2}
.mv .wcell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 8px;min-height:52px;display:flex;flex-direction:column;justify-content:flex-start;gap:1px;position:relative;width:100%;text-align:left;box-sizing:border-box;cursor:default}
.mv .wmeta{display:flex;align-items:baseline;flex-wrap:nowrap;gap:1px 5px;margin-top:2px;min-width:0;line-height:1.35}
.mv .wcell[data-wrap] .wmeta{flex-wrap:wrap}
.mv .wgrid .ww{white-space:nowrap}
.mv .wcell[data-wrap] .ww,.mv .wcell[data-wrap] .wi,.mv .wcell[data-wrap] .wj{white-space:normal!important}
.mv .wcell.pr .wmeta{flex-direction:column;align-items:flex-start}
.mv .wcell.pr .wmeta .wi,.mv .wcell.pr .wj{white-space:nowrap}
.mv .wcell .wsp{font-style:normal;color:#B4B8C2;margin:0 .35em}
.mv .ww{font-size:14px;font-weight:700;line-height:1.3}
.mv .wi{font-family:inherit;font-size:11px;color:var(--fg)}
.mv .wmeta .wi{font-size:var(--mfs,12px);line-height:1.35;flex:0 0 auto;white-space:nowrap}
.mv .wj{font-size:var(--mfs,12px);line-height:1.35;color:var(--fg);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv .slist{display:flex;flex-direction:column;gap:6px}
.mv .snum{counter-reset:sn}
.mv .snum .scell{counter-increment:sn}
.mv .snum .scell .s::before{content:"(" counter(sn) ") ";font-weight:400;text-decoration:none}
.mv .scell{padding:8px 30px 8px 12px;min-height:0}
.mv .scell .s{font-size:var(--sfs,13.5px);word-spacing:var(--sws,normal);line-height:1.5;text-align:left}
.mv .scell .s:has(.g){line-height:2.5;margin-top:-.5em;padding-bottom:.25em}
.mv .sj{font-size:11.5px;line-height:1.45;color:var(--fg);text-align:left;margin-top:4px}
.mv .scell .s b{color:inherit}
.mv .scell .s u,.mv .wcell .ww u,.mv .wcell u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.mv .g{display:inline-block;position:relative;line-height:1.2}
.mv .gw{white-space:nowrap}
.mv .g i{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:3px;line-height:1;font-family:inherit;font-size:10px;color:var(--fg);font-style:normal;font-weight:400;white-space:nowrap}
.mv .c-gray{color:#787774} .mv .c-brown{color:#9F6B53} .mv .c-orange{color:#D9730D} .mv .c-yellow{color:#CB912F} .mv .c-green{color:#448361}
.mv .c-blue{color:#2B6FC2} .mv .c-purple{color:#9065B0} .mv .c-pink{color:#C14C8A} .mv .c-red{color:#D44C47}
/* PC：教材の画面の大きいポップアップと同じ(文字1.5倍に近い大きさ・単語4列・例文2列) */
body.pc .mv{zoom:1.4;padding:10px 12px 12px}
body.pc .mv .mp{zoom:.75}
body.pc .mv .wgrid{--wc:4}
body.pc .mv .wgrid.pairs{--wc:3}
body.pc .mv .slist{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(var(--sr),auto);column-gap:10px;row-gap:6px}
body.pc .mv .slist>*{min-width:0}

/* 動画は3分の1の大きさで横に3つ(2026-10-13 先生の指定。幅700px以上。狭い画面は1つずつ) */
.mv .vgrid3{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:6px 0}
.mv .vgrid3>*{min-width:0;margin:0}
.mv .vgrid3 .vc-v{margin:0}
.mv .doc .emb.vid{aspect-ratio:16/9}
@media (min-width:700px){ .mv .vgrid3{grid-template-columns:repeat(3,minmax(0,1fr))} .mv .ms-emb.vid{width:calc((100% - 20px) / 3)} }
/* 単語の音声のボタン(2026-11-02 先生の指定・案1＝右上に線のスピーカー。public/app/20-word-tts.js) */
.mv .wcell.hwtp .ww{padding-right:20px}
.mv .wtp{position:absolute;right:5px;top:6px;width:20px;height:20px;display:grid;place-items:center;cursor:pointer;color:#A3A8B4;border-radius:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mv .wtp svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv .wtp:hover{color:#2F45A8;background:#F1F4FC}
.mv .wtp .wv{display:none;gap:2px;align-items:flex-end;height:11px}
.mv .wtp .wv b{width:2px;height:3px;background:#2F45A8;border-radius:1px;animation:wtpWv .8s ease-in-out infinite}
.mv .wtp .wv b:nth-child(2){animation-delay:.15s}.mv .wtp .wv b:nth-child(3){animation-delay:.3s}
.mv .wtp.on svg,.mv .wtp.ld svg{display:none}
.mv .wtp.on .wv{display:inline-flex}
.mv .wtp.ld::before{content:'';width:9px;height:9px;border:2px solid #A3A8B4;border-right-color:transparent;border-radius:50%;animation:wtpSpin .7s linear infinite}
.mv .wcell.wtpon{border-color:#2F45A8;background:#F7F9FF}
.mv .wtt-row{display:flex;justify-content:flex-end;margin:0 0 6px}
.mv .wtt-all{display:inline-flex;align-items:center;gap:6px;border:1px solid #E2E5EC;background:#fff;border-radius:99px;padding:4px 11px;font:inherit;font-size:12px;font-weight:700;color:#2F45A8;cursor:pointer}
.mv .wtt-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv .wtt-all svg .pl{fill:currentColor;stroke:none}
.mv .wtt-all svg .ps{display:none}
.mv .wtt-all.on{background:#2F45A8;border-color:#2F45A8;color:#fff}
.mv .wtt-all.on svg .pl{display:none}
.mv .wtt-all.on svg .ps{display:inline}
.mv .wtt-all.ld{color:#8C92A3}
.mv .wtt-all:hover{background:#F6F8FE}
@keyframes wtpWv{0%,100%{height:3px}50%{height:11px}}
@keyframes wtpSpin{to{transform:rotate(360deg)}}
@media print{.mv .wtp,.mv .wtt-row{display:none}.mv .wcell.hwtp .ww{padding-right:0}}
/* 題の横の「通しで流す」(2026-11-02 先生の指定) */
/* 題の横は AI の札と同じ紫・同じ高さの札(2026-11-02 先生の指定・docs/mock/ai-voice-btn.html の A)。鳴っている間は紫で塗る */
.mv .mvb-tg>summary .wtt-all,.mv .mvb-h .wtt-all{margin-left:2px;height:19px;box-sizing:border-box;gap:4px;padding:0 8px 0 5px;font-size:10.5px;line-height:1;color:#5B3FC8;background:#F4F1FD;border:1px solid #E1D9FB;border-radius:9px;position:relative;top:-1px}
.mv .mvb-tg>summary .wtt-all svg,.mv .mvb-h .wtt-all svg{width:12px;height:12px;stroke-width:2.2}
.mv .mvb-tg>summary .wtt-all:hover,.mv .mvb-h .wtt-all:hover{background:#EBE5FC}
.mv .mvb-tg>summary .wtt-all.on,.mv .mvb-h .wtt-all.on{background:#5B3FC8;border-color:#5B3FC8;color:#fff}
.mv .mvb-tg>summary .wtt-all.ld,.mv .mvb-h .wtt-all.ld{color:#8C7FD0}
.mv .mvb-h{display:flex;align-items:center;flex-wrap:wrap}