/* scg-student-portal — SCG Mobile Portal 準拠の様式
 * 地は限りなく白。学校の青はPC版ツールボックス/スマホ入口と同じグラデを使う
 * （似た青を作り直さない＝学校の色を2種類にしない）。
 * カードの箱を並べず、面1枚に罫線で区切る。色は細い縦線1本と押した瞬間の差し色だけ。 */
:root{
  --ink:#10151b; --sub:#7b8794; --line:#e7eaef; --edge:#eceff3;
  --bg:#f7f8fa; --surface:#fff;
  --blue:#1769aa; --blue-d:#10365e; --blue-l:#3c92d5;
  --ok:#2f9e44; --ng:#d64545;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;} /* displayを持つクラスがhidden属性を上書きする罠の対策 */
html{-webkit-text-size-adjust:100%;}
body{color:var(--ink);background:var(--bg);min-height:100dvh;
  font-family:"Segoe UI Variable","Segoe UI","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* ── ヒーローヘッダー（スマホ入口と同じ形） ── */
header{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(125deg,var(--blue-d) 0%,var(--blue) 58%,var(--blue-l) 100%);
  border-radius:0 0 26px 26px;box-shadow:0 12px 30px rgba(16,54,94,.18);
  padding:24px 22px 22px;padding-top:calc(24px + env(safe-area-inset-top,0px));}
header::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  right:-120px;top:-190px;border:58px solid rgba(255,255,255,.055);
  box-shadow:0 0 0 34px rgba(255,255,255,.025);pointer-events:none;}
.hin{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.eyebrow{font-size:.62rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.86);}
.plate{display:inline-block;background:#fff;border-radius:12px;padding:7px 14px;
  box-shadow:0 4px 14px rgba(12,35,70,.24);margin:11px 0 12px;}
.plate img{display:block;height:26px;width:auto;}
header h1{color:#fff;font-size:clamp(1.3rem,5.4vw,1.7rem);font-weight:800;
  letter-spacing:.01em;line-height:1.28;}
header h1 .thin{font-weight:400;color:rgba(255,255,255,.72);white-space:nowrap;}

main{max-width:640px;margin:0 auto;padding:22px 0 52px;}

/* ── 面1枚のパネル。スマホは端まで、広い画面では角丸+影 ── */
.panel{background:var(--surface);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  padding:22px;margin-bottom:18px;}
.list{background:var(--surface);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  margin-bottom:18px;}
@media (min-width:560px){
  .panel,.list{border:1px solid var(--edge);border-radius:16px;margin:0 22px 18px;overflow:hidden;
    box-shadow:0 1px 2px rgba(16,21,27,.04),0 10px 30px rgba(16,21,27,.05);}
}
.panel h2{font-size:1.02rem;font-weight:800;margin-bottom:14px;}
.sechead{font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sub);padding:0 22px;margin:2px 0 8px;}
@media (min-width:560px){.sechead{padding:0 44px;}}

/* ── 行（メニュー・一覧）。アイコンの代わりに色の縦線1本 ── */
.row{display:flex;align-items:center;gap:16px;width:100%;text-align:left;color:inherit;
  background:transparent;border:0;font-family:inherit;cursor:pointer;
  padding:18px 22px;position:relative;-webkit-tap-highlight-color:transparent;}
.row+.row{border-top:1px solid var(--line);}
.row:active{background:color-mix(in srgb,var(--c,var(--blue)) 13%,transparent);}
@media (hover:hover){.row:hover{background:color-mix(in srgb,var(--c,var(--blue)) 5%,transparent);}}
.row .bar{flex:0 0 auto;width:3px;height:40px;border-radius:99px;background:var(--c,var(--blue));}
.row .txt{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px;}
.row .nm{font-size:1.18rem;font-weight:700;line-height:1.3;}
.row .sb{font-size:.63rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--c,var(--blue));line-height:1.4;}
.row .ds{font-size:.8rem;color:var(--sub);line-height:1.55;}
.row .go{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--sub);
  border-bottom:2px solid var(--sub);transform:rotate(-45deg);opacity:.55;}

/* ── 入力・ボタン ── */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.8rem;font-weight:800;color:var(--sub);margin-bottom:7px;}
.field input,.field select{width:100%;font-size:1.05rem;font-family:inherit;padding:13px 14px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
.field input:focus,.field select:focus{outline:2px solid var(--blue);border-color:var(--blue);}
.btn{display:block;width:100%;background:var(--blue);color:#fff;border:0;border-radius:13px;
  padding:15px;font-size:1.05rem;font-weight:800;font-family:inherit;cursor:pointer;
  box-shadow:0 4px 14px rgba(23,105,170,.28);-webkit-tap-highlight-color:transparent;}
.btn:active{transform:scale(.985);}
.btn[disabled]{opacity:.55;box-shadow:none;}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.inpanel{padding:0 22px;}
@media (min-width:560px){.inpanel{padding:0 44px;}}

/* 下書きの保存ぐあい。控えめに出す（提出ボタンより目立たせない） */
.savest{font-size:.82rem;font-weight:700;margin-top:10px;text-align:center;color:var(--sub);}
.savest.ok{color:var(--ok);}
.savest.wait{color:var(--sub);}
.savest.pend{color:var(--ng);}
.msg{font-size:.88rem;font-weight:700;border-radius:12px;padding:12px 14px;margin-top:12px;display:none;}
.msg.err{display:block;background:#fdefef;color:var(--ng);border:1px solid #f3cdcd;}
.msg.info{display:block;background:#eef5fb;color:var(--blue-d);border:1px solid #d3e5f2;}

/* ── マイページ ── */
.me{display:flex;align-items:center;gap:16px;}
.avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue-d),var(--blue-l));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:26px;}
.mename{font-size:clamp(1.25rem,5.4vw,1.5rem);font-weight:800;line-height:1.3;}
.memeta{font-size:.85rem;color:var(--sub);font-weight:700;margin-top:4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.chip{display:inline-block;background:color-mix(in srgb,var(--blue) 9%,transparent);
  color:var(--blue-d);border-radius:20px;padding:2px 12px;font-size:.78rem;font-weight:800;}
.badge-done{display:inline-block;font-size:.66rem;font-weight:800;color:#fff;background:var(--ok);
  border-radius:20px;padding:2px 9px;margin-left:8px;vertical-align:2px;letter-spacing:.03em;}

/* ── もどる行 ── */
.backrow{display:flex;align-items:center;gap:12px;margin:0 22px 12px;}
.backbtn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:9px 15px;font-size:.9rem;font-weight:800;
  color:var(--ink);font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
.backbtn:active{transform:scale(.97);}
.backbtn i{width:8px;height:8px;border-left:2px solid var(--sub);border-bottom:2px solid var(--sub);
  transform:rotate(45deg);display:inline-block;}
.backtitle{font-size:1.05rem;font-weight:800;}

/* ── 出題 ── */
.qbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.qnum{font-size:.95rem;font-weight:900;color:var(--blue-d);flex-shrink:0;font-variant-numeric:tabular-nums;}
.track{flex:1;height:8px;background:var(--edge);border-radius:6px;overflow:hidden;}
.fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-l));border-radius:6px;transition:width .25s;}
/* white-space:pre-line = 改行だけ活かす（連続スペースは畳む）。ヨリソルから移す設問は
   「A：…／B：…」の会話が改行で分かれているため。1行の設問には影響しない（2026-09-05） */
.prompt{font-size:clamp(1.08rem,4.7vw,1.3rem);line-height:2.15;margin-bottom:20px;font-weight:700;
  white-space:pre-line;}
/* ── ルビ（設問の ${漢字}(よみ) から作る）──
   ★行間を少し広げてあるのは、ルビが上の行にぶつかると読めなくなるため。
     ルビが無い設問でも同じ行間になるが、詰まって見えるより読み違いが起きないほうが大事。 */
ruby{ruby-position:over;}
rt{font-size:.5em;font-weight:600;color:var(--sub);letter-spacing:0;line-height:1.1;}
.choice rt{font-size:.46em;}
.choice{display:flex;align-items:center;gap:14px;width:100%;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;padding:17px 16px;font-size:clamp(1.05rem,4.6vw,1.25rem);font-weight:700;
  font-family:inherit;color:var(--ink);cursor:pointer;margin-bottom:12px;text-align:left;
  -webkit-tap-highlight-color:transparent;}
.choice:active{transform:scale(.99);}
.choice .mark{width:32px;height:32px;border-radius:50%;background:var(--edge);color:var(--sub);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.92rem;flex-shrink:0;}
.choice.sel{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,#fff);}
.choice.sel .mark{background:var(--blue);color:#fff;}

/* ── 結果 ── */
.score{text-align:center;padding:8px 0 4px;}
.score .big{font-size:clamp(3rem,15vw,4.4rem);font-weight:800;line-height:1.1;
  background:linear-gradient(125deg,var(--blue-d),var(--blue-l));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.score .of{font-size:1rem;color:var(--sub);font-weight:800;margin-top:2px;}
.rrow{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.rrow:last-child{border-bottom:none;}
.rmark{font-size:1.15rem;font-weight:900;flex-shrink:0;width:26px;text-align:center;}
.rmark.ok{color:var(--ok);} .rmark.ng{color:var(--ng);}
.rbody{flex:1;min-width:0;font-size:.9rem;line-height:1.75;}
.rbody .ans{color:var(--blue-d);font-weight:800;}

footer{text-align:center;color:var(--sub);font-size:.72rem;padding:10px 16px 30px;line-height:1.8;}

/* ── 教師モニター ── */
.tabs{display:flex;gap:6px;margin:0 22px 16px;background:var(--edge);border-radius:12px;padding:4px;}
.tabs button{flex:1;border:0;border-radius:9px;padding:10px;font-family:inherit;font-size:.92rem;
  font-weight:800;color:var(--sub);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.tabs button.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 4px rgba(16,21,27,.1);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);margin-bottom:18px;}
@media (min-width:560px){.stats{border:1px solid var(--edge);border-radius:16px;margin:0 22px 18px;
  overflow:hidden;box-shadow:0 1px 2px rgba(16,21,27,.04),0 10px 30px rgba(16,21,27,.05);}}
.stat{padding:20px;text-align:center;}
.stat+.stat{border-left:1px solid var(--line);}
.stat .v{font-size:clamp(2rem,8vw,3rem);font-weight:800;color:var(--blue-d);line-height:1.15;
  font-variant-numeric:tabular-nums;}
.stat .l{font-size:.7rem;color:var(--sub);font-weight:800;letter-spacing:.14em;margin-top:4px;}
.qrate{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.qrate .qn{width:42px;font-weight:800;color:var(--blue-d);font-size:.88rem;flex-shrink:0;}
.qrate .track{height:16px;}
.qrate .fill.low{background:var(--ng);} .qrate .fill.mid{background:#e8920c;}
.qrate .pct{width:50px;text-align:right;font-weight:800;font-size:.88rem;flex-shrink:0;
  font-variant-numeric:tabular-nums;}
.feed{max-height:340px;overflow-y:auto;}
.frow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.frow:last-child{border-bottom:none;}
.frow .fname{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.frow .fscore{font-weight:800;color:var(--blue-d);flex-shrink:0;font-variant-numeric:tabular-nums;}
.frow .ftime{color:var(--sub);font-size:.72rem;flex-shrink:0;font-variant-numeric:tabular-nums;}
.pulse{animation:pulse .6s;}
@keyframes pulse{0%{background:color-mix(in srgb,var(--blue) 10%,transparent);}100%{background:transparent;}}
/* アンケート回答行 */
.svrow{padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.svrow:last-child{border-bottom:none;}
.svhead{display:flex;align-items:center;gap:10px;}
.svhead .fname{flex:1;font-weight:800;}
.svhead .ftime{color:var(--sub);font-size:.72rem;}
.svans{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.svans span{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:3px 10px;font-size:.8rem;}
.svans b{color:var(--blue-d);font-weight:800;}

/* ── QRオーバーレイ ── */
.qrov{position:fixed;inset:0;background:rgba(8,11,15,.55);z-index:1000;display:none;
  align-items:center;justify-content:center;padding:24px;}
.qrov.on{display:flex;}
.qrbox{background:#fff;border-radius:22px;padding:clamp(22px,4vw,40px);text-align:center;
  max-width:min(94vw,560px);box-shadow:0 12px 44px rgba(0,0,0,.45);}
.qrttl{font-size:clamp(1.05rem,4.3vw,1.4rem);font-weight:800;margin-bottom:18px;line-height:1.5;}
.qrbox #qrimg{display:flex;justify-content:center;}
.qrurl{margin-top:16px;font-size:clamp(.68rem,2.8vw,.85rem);color:var(--sub);word-break:break-all;
  font-family:Consolas,monospace;}
.qrclose{margin-top:22px;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:12px 30px;font-size:.95rem;font-weight:800;font-family:inherit;cursor:pointer;}

/* アンケート一覧: 提出済みの行は名前を控えめに（バッジで状態を示す） */
.row.done .nm{color:var(--sub);}
.row.done .badge-done{vertical-align:middle;}

/* ── 言語切替（ヘッダー右上の 🌐 ボタン。メニューは body 直下に置き、header の overflow に切られない） ── */
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.langsw{position:relative;z-index:5;}
.langbtn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);
  color:#fff;border-radius:99px;padding:6px 12px 6px 10px;font-size:.84rem;font-weight:700;font-family:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;line-height:1.2;}
.langbtn:hover,.langbtn:active,.langbtn[aria-expanded="true"]{background:rgba(255,255,255,.3);}
.langbtn .car{width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin:-4px 2px 0 2px;}
.langmenu{position:fixed;min-width:230px;background:#fff;color:var(--ink);border-radius:14px;
  box-shadow:0 10px 30px rgba(16,21,27,.24);padding:6px;z-index:100;}
.langmenu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;
  border:0;border-radius:10px;padding:11px 12px;font-family:inherit;font-size:1rem;color:var(--ink);cursor:pointer;}
.langmenu button:hover,.langmenu button:active{background:color-mix(in srgb,var(--blue) 8%,transparent);}
.langmenu button.cur{font-weight:800;color:var(--blue-d);}
.langmenu button.cur .nat::after{content:" ✓";}
.langmenu button[disabled]{color:var(--sub);cursor:default;opacity:.7;}
.langmenu button[disabled]:hover{background:none;}
.langmenu .en{font-size:.74rem;color:var(--sub);white-space:nowrap;}

/* ── しけんの ひ（ログイン前に見せる／教室の投影は #exam）──
   .row と形は似ているが押せない表示専用。cursor もタップの差し色も出さない。 */
.exam{display:flex;align-items:center;gap:16px;padding:15px 22px;border-top:1px solid var(--line);}
.exam:first-child{border-top:0;}
.exam .bar{flex:0 0 auto;width:3px;align-self:stretch;min-height:40px;border-radius:99px;
  background:var(--c,var(--blue));}
.exam .etxt{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px;}
.exam .enm{font-size:.7rem;font-weight:800;letter-spacing:.17em;line-height:1.4;
  color:var(--c,var(--blue));}
.exam .edt{font-size:1.18rem;font-weight:700;line-height:1.3;}
.exam .eds{font-size:.8rem;color:var(--sub);line-height:1.55;}
.exam .eright{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.exam .ecd{font-size:1.05rem;font-weight:800;color:var(--c,var(--blue));white-space:nowrap;}
.exam .egs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.exam .eg{font-size:.7rem;font-weight:700;color:var(--sub);background:var(--bg);
  border:1px solid var(--line);border-radius:99px;padding:2px 9px;white-space:nowrap;}
.exam-none{padding:20px 22px;color:var(--sub);font-size:.9rem;line-height:1.6;}

/* 教室の投影（#exam）。教室のうしろの席から読めるところまで大きくする */
body.projector header{border-radius:0;padding-bottom:18px;}
body.projector main{padding-top:14px;}
body.projector .sechead{font-size:.8rem;}
body.projector .exam{padding:clamp(18px,3.4vh,34px) 22px;gap:22px;}
body.projector .exam .bar{width:6px;}
body.projector .exam .enm{font-size:clamp(.85rem,1.7vw,1.15rem);}
body.projector .exam .edt{font-size:clamp(1.6rem,4.2vw,3rem);}
body.projector .exam .eds{font-size:clamp(.9rem,1.5vw,1.25rem);}
body.projector .exam .ecd{font-size:clamp(1.7rem,4.6vw,3.4rem);}
body.projector .exam .eg{font-size:clamp(.85rem,1.5vw,1.2rem);padding:4px 14px;}
body.projector .exam-none{font-size:clamp(1.1rem,2.4vw,1.8rem);padding:40px 22px;}
@media (min-width:900px){ body.projector main{max-width:1100px;} }

/* パスワードの「目」（2026-09-12）。assets/pw-eye.js が使う。
   🔴 入力欄の**中**に重ねる。横に並べると .field input{width:100%} で欄が縮んで崩れる
      （2026-09-11 にチェックボックスで同じ崩れ方を踏んでいる）。 */
.pwwrap{position:relative;}
.pwwrap input{padding-right:52px;}            /* 目のボタンの下に文字が潜らないように */
.pwbtn{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:#f2f5f9;
  padding:0;cursor:pointer;color:#41505f;
  -webkit-tap-highlight-color:transparent;}
.pwbtn:hover{background:#e6ecf4;color:var(--blue);border-color:#b9ccf5;}
.pwbtn:active{transform:translateY(-50%) scale(.92);}
.pwbtn:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.pwbtn svg{display:block;}

/* いま誰で入っているか（2026-09-12）。先生画面とマスター画面の両方で使う。
   ★権限で画面が分かれているのに「自分が何者か」が出ていないと、
     正しい動きでも不具合に見える。 */
.whoami{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.76rem;font-weight:800;color:#41505f;
  background:#eef2f7;border:1px solid var(--line);border-radius:99px;padding:5px 12px;}