/* =====================================================================
   app.css — 体験活動カルテ
   方針：余白・角丸は小さく、区切りは罫線で。影は使わない。
         密度は上げるが、文字サイズ・行高・タップ領域は削らない。
   朱色（--shu）は「確認済み」の印だけに使う。
   ===================================================================== */
:root {
  --ink: #1d2b3a;        /* 文字（藍墨） */
  --muted: #5b6876;      /* 補足 */
  --ai: #22507a;         /* 主色（藍） */
  --ai-d: #1a3f61;
  --ai-l: #e6eef5;       /* 藍の淡色（選択行・情報） */
  --ground: #f0f4f8;     /* 地（少し明るい青み） */
  --paper: #fff;         /* 紙 */
  --rule: #cfd6de;       /* 罫線 */
  --rule-d: #9aa7b5;
  --shu: #c8372d;        /* 朱（確認印のみ） */
  /* 状態の色（タイル・札・見出しで共通）：青＝進行中／琥珀＝要対応／緑＝完了／赤＝問題／紫・青緑＝その他／灰＝対象外 */
  --c-blue: #1b6cb5;   --c-blue-l: #e2effb;
  --c-amber: #b06800;  --c-amber-l: #fff1d6;
  --c-green: #25804d;  --c-green-l: #e0f5e8;
  --c-red: #b3261e;    --c-red-l: #fde7e5;
  --c-violet: #6747b3; --c-violet-l: #eee8fb;
  --c-teal: #0d7d86;   --c-teal-l: #dcf4f5;
  --c-gray: #5b6876;   --c-gray-l: #e9edf1;
  --c-teacher: #2c5a4a;  /* 指導教員の画面（深緑） */
  --c-partner: #4f4168;  /* 受入先ご担当者の画面（葡萄） */
  --ok: #2f7d4f;  --ok-l: #e7f3ec;
  --warn: #8a5800; --warn-l: #fbf1dc;
  --ng: #b3261e;  --ng-l: #fbe9e7;

  --s1: 4px; --s2: 6px; --s3: 8px; --s4: 12px;   /* 余白は4段階だけ */
  --r: 4px;                                       /* 角丸（ここを変えると全体に反映される） */
  --ctl: 30px;                                    /* 入力・ボタンの高さ（PC） */
  --rail: 216px;   /* 2026-10-17：修了ワッペンと科目の花を1行に並べるため 196→216 */
  --fs: 14px;
  --frame: #e3e8ef;   /* 中央に置いた画面の外側 */
}
@media (max-width: 899px) { :root { --ctl: 40px; --fs: 15px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--ground);
  font: var(--fs)/1.6 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ai); }
a:hover { color: var(--ai-d); }
img, svg { vertical-align: middle; }
:focus-visible { outline: 2px solid var(--ai); outline-offset: 1px; }
.ico { flex: none; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: var(--s2) var(--s3); z-index: 100; }
.skip:focus { left: 0; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   骨格：PCは左レール＋本文。スマホ（学生）は上バー＋下タブ
   --------------------------------------------------------------------- */
/* メニュー（レール）と本文をひとまとまりにして、画面の中央に置く（学生・管理者・教員・受入先とも。本文の最大幅は --main-max） */
:root { --main-max: 1080px; }
body:has(> .app) { background: var(--frame); }
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; max-width: calc(var(--rail) + var(--main-max)); margin-inline: auto; background: var(--ground); box-shadow: 0 0 0 1px var(--rule), 0 0 24px rgba(29, 43, 58, .06); }
.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--ai); color: #fff; overflow-y: auto;
}
.role-student { --accent: var(--ai); } .role-admin { --accent: #2f5fa8; } .role-teacher { --accent: var(--c-teacher); } .role-partner { --accent: var(--c-partner); }
.role-admin .rail { background: var(--ink); }
.role-teacher .rail { background: var(--c-teacher); }
.role-partner .rail { background: var(--c-partner); }
.brand { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: center; padding: var(--s4); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.brand:hover { color: #fff; }
.brand-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.brand-role { grid-column: 2; font-size: 11px; opacity: .8; }
/* 標章：30マスのゲージを縮めたもの（4×3のマス目、一部が塗られている） */
.brand-mark {
  color: #ffc94d;
  grid-row: span 2; width: 26px; height: 20px; flex: none;
  background:
    linear-gradient(#fff, #fff) 0 0 / 50% 66.6% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5.5px, currentColor 5.5px 6.5px),
    repeating-linear-gradient(0deg, transparent 0 5.66px, currentColor 5.66px 6.66px);
  border: 1px solid currentColor; opacity: .95;
}
.rail-nav { padding: var(--s2) 0; flex: 1; }
.rail-nav a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); color: #fff; text-decoration: none; border-left: 3px solid transparent; opacity: .86; }
.rail-nav a:hover { background: rgba(255,255,255,.08); opacity: 1; }
.rail-nav a.on { background: rgba(255,255,255,.16); border-left-color: #ffc94d; opacity: 1; font-weight: 700; }
.rail-nav a.on .ico { color: #ffc94d; }
.rail-sec { padding: var(--s3) var(--s4) var(--s1); font-size: 11px; opacity: .6; }
/* 氏名とログアウトはレールの上部に置く。左下の角は、ブラウザがリンク先URLを重ねて表示する場所なので使わない */
.rail-me { border-bottom: 1px solid rgba(255,255,255,.18); padding: var(--s3) var(--s4); font-size: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; position: relative; }
.rail-me .me-switch { grid-column: 1 / -1; }
.me-out-wrap { grid-column: 2; grid-row: 1; position: relative; justify-self: end; }
.me-name { min-width: 0; max-width: 100%; }
.me-name b { display: block; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }   /* 長い氏名は折り返す（ログアウトは下の行にあるので押し出されない） */
.me-name small { opacity: .75; display: block; overflow-wrap: anywhere; }
.me-switch { width: 100%; } .me-switch select { width: 100%; height: 26px; font-size: 12px; margin: 0; }
.me-out { display: inline-flex; align-items: center; justify-content: center; color: #fff; opacity: .85; border: 1px solid transparent; border-radius: var(--r); width: 30px; height: 30px; text-decoration: none; }
.me-out:hover, .me-out[aria-expanded="true"] { color: #fff; opacity: 1; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }
.me-out .ico { width: 17px; height: 17px; }
/* ログアウトの確認：アイコンの下にその場で開く小さなメニュー（ダイアログにしない） */
.me-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: max-content; min-width: 150px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-d); border-radius: var(--r); padding: var(--s3); box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 13px; }
.me-pop::before { content: ""; position: absolute; top: -6px; right: 10px; width: 10px; height: 10px; background: var(--paper); border-left: 1px solid var(--rule-d); border-top: 1px solid var(--rule-d); transform: rotate(45deg); }
.me-pop p { margin: 0 0 var(--s2); font-weight: 700; }
.me-pop-act { display: flex; gap: var(--s2); justify-content: flex-end; }
.me-pop-act .btn { white-space: nowrap; }

.main { padding: var(--s4); min-width: 0; width: 100%; }   /* 幅は .app（メニュー＋本文）で決める */
html.wide-view .app { max-width: none; box-shadow: none; }   /* ワイド表示：ウインドウいっぱい（メニューの「ワイド表示にする」） */
.rail-width { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-bottom: 1px solid rgba(255,255,255,.18); font-size: 12px; }
.rail-width > span { white-space: nowrap; opacity: .85; display: inline-flex; align-items: center; gap: 4px; }
.width-seg { display: inline-flex; flex: 1; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; overflow: hidden; }
.width-seg button { flex: 1; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; }
.width-seg button + button { border-left: 1px solid rgba(255,255,255,.55); }
.width-seg button:hover { background: rgba(255,255,255,.12); }
.width-seg button[aria-pressed="true"] { background: #ffc94d; color: #1d2b3a; font-weight: 700; }
@media (max-width: 899px) { .resp .rail-width { display: none; } }
.tbl td.brk { overflow-wrap: anywhere; word-break: break-all; min-width: 16em; }
.tbl td:not(.nowrap):not(.act) { overflow-wrap: anywhere; }   /* 長い記録の内容などで表が横にはみ出さないように（途中で折り返す） */
.tbl .dt { white-space: nowrap; }   /* 日付と時刻はそれぞれ切らない（狭いときは時刻だけ次の行へ） */
.em { white-space: nowrap; }   /* メールアドレスは文字の途中で切らない（折り返すのは email_html() が入れた「@」の前・ドメインの「.」の後ろだけ） */
.tabs { display: none; }

@media (max-width: 899px) {
  .resp .app { display: block; box-shadow: none; }
  .role-student .app { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .resp .rail { position: sticky; z-index: 20; height: auto; flex-direction: row; align-items: center; overflow: visible; }
  .resp .brand { border: 0; padding: var(--s3) var(--s4); flex: 1; }
  .resp .brand-role, .resp .rail-nav, .resp .me-name small, .resp .me-switch { display: none; }
  .resp .rail-me { border: 0; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4) 0 0; order: 2; }
  .resp .me-name b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; overflow-wrap: normal; }
  .resp .me-out { margin: 0; width: 40px; height: 40px; }
  .resp .me-out-wrap { grid-column: auto; grid-row: auto; }
  .resp .main { padding: var(--s3); }
  .role-student .tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    background: var(--paper); border-top: 1px solid var(--rule-d); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 54px; font-size: 10.5px; color: var(--muted); text-decoration: none; border-top: 3px solid transparent; }
  .tabs a .ico { width: 20px; height: 20px; }
  .tabs a span { white-space: nowrap; letter-spacing: -.03em; }
  .tabs a.on { color: var(--ai); border-top-color: var(--ai); font-weight: 700; }
  .pc-only { display: none !important; }
}
@media (max-width: 359px) { .tabs a { font-size: 9.5px; } }
@media (max-width: 899px) { .panel > h2, .panel-h { flex-wrap: wrap; row-gap: 0; } .panel > h2 small, .panel-h small { flex-basis: 100%; } }
@media (min-width: 900px) { .sp-only { display: none !important; } }
/* 管理画面はPC前提。狭い窓では横スクロールさせる（崩さない） */
.role-admin .app { min-width: 1000px; }

/* ---------------------------------------------------------------------
   見出し・パネル
   --------------------------------------------------------------------- */
/* ページ見出し：下線は付けない（直下にタイルやパネルの上辺の線が来ると、線が二重に見えるため）。左に入口ごとの色の帯 */
.page-h { font-size: 18px; line-height: 1.4; margin: 0 0 var(--s4); padding: 1px 0 1px var(--s4); border-left: 5px solid var(--accent, var(--ai)); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.page-h + .sub, .page-h + p.sub { margin-top: calc(var(--s2) * -1); margin-bottom: var(--s3) !important; padding-left: calc(var(--s4) + 5px); }
.page-h small { font-size: 12px; font-weight: 400; color: var(--muted); }
.page-h .act { margin-left: auto; display: flex; gap: var(--s2); }
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.panel > h2::before, .panel-h::before { content: ''; align-self: center; width: 4px; height: 1em; background: var(--accent, var(--ai)); border-radius: 2px; flex: none; margin-right: calc(var(--s1) * -1); }
.panel > h2, .panel-h { font-size: 14px; line-height: 1.4; margin: 0 0 var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: var(--s3); }
.panel-h small, .panel > h2 small { font-weight: 400; font-size: 12px; color: var(--muted); }
.panel.flush { padding: 0; }
.panel.flush > h2 { padding: var(--s2) var(--s4); margin: 0; }
.sub { color: var(--muted); font-size: 12.5px; }
.cols { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.cols > .panel { margin-bottom: 0; }
.cols { margin-bottom: var(--s3); }
.cols.c21 { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
@media (max-width: 899px) { .cols.c21 { grid-template-columns: 1fr; } }
.cols.eq { align-items: stretch; }   /* 左右のパネルの高さをそろえる */
.cols.eq > .panel { display: flex; flex-direction: column; }
.cols.eq > .panel > .idcard { margin-block: auto; }   /* 本人の欄は縦の中央に */
/* 2列（左右それぞれに複数のパネルを縦に積む）。学生のプロフィール・システム設定など */
.cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .cols.c2 { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.stack > .panel { margin-bottom: 0; }
/* ホーム：学期ごとの申請期間 */
.period-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.period-cell .btn { margin-left: auto; }
.period-tbl tr.cur td { background: var(--ai-l); }
.period-foot { padding: var(--s2) var(--s4) var(--s3); margin: 0; }
/* 連絡（admin/messages.php） */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msg-cols > form.panel, .msg-cols > .panel { margin-bottom: 0; }
.msg-cols h2 + .msg-groups { margin-top: 0; }
.msg-groups { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px var(--s4); }
.msg-gh { grid-column: 1 / -1; margin: var(--s2) 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.msg-groups .check { align-items: flex-start; }
.msg-filter { border-top: 1px dashed var(--rule); padding-top: var(--s1); }
.counts.msg-counts { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.msg-counts a.on { background: var(--ai-l); }
.mail-sample { border: 1px solid var(--rule); border-radius: var(--r); background: var(--ground); padding: var(--s2) var(--s3); margin: var(--s2) 0 var(--s3); }
.mail-sample .mail-subj { font-weight: 700; margin: 0 0 var(--s1); padding-bottom: var(--s1); border-bottom: 1px solid var(--rule); }
.mail-sample pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; line-height: 1.7; max-height: 420px; overflow: auto; }
.msg-rcpt { max-height: 420px; overflow: auto; }
ol.howto { margin: 0; padding-left: 1.4em; } ol.howto li { margin: 0 0 var(--s1); }
/* 連絡の作成：左＝宛先・内容、右＝宛先を選ぶ一覧（ドラッグで左へ） */
.panel > h2 .act { margin-left: auto; display: flex; gap: var(--s2); }
.sel-box { border: 2px dashed var(--rule-d); border-radius: var(--r); min-height: 96px; max-height: 340px; overflow: auto; background: var(--ground); transition: background .15s, border-color .15s; }
.sel-box.drop { border-color: var(--c-blue); background: var(--c-blue-l); }
.sel-empty { margin: 0; padding: var(--s4); text-align: center; color: var(--muted); font-size: 13px; }
.sel-list { list-style: none; margin: 0; padding: 0; }
.sel-list li { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--s2); align-items: center; padding: 5px var(--s2) 5px var(--s3); border-bottom: 1px solid var(--rule); background: var(--paper); font-size: 13px; }
.sel-list li .sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 4px; }
.sel-x:hover { background: var(--ng-l); color: var(--ng); }
.msg-extra summary { cursor: pointer; font-size: 13px; color: var(--c-blue); }
.msg-extra label { margin-top: var(--s1); }
.pick { position: sticky; top: var(--s3); display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--s3)); margin-bottom: 0; }
.pick-tabs { display: flex; border-bottom: 1px solid var(--rule-d); }
.pick-tabs button { flex: 1; border: 0; background: none; padding: var(--s2) var(--s3); font: inherit; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pick-tabs button.on { color: var(--c-blue); font-weight: 700; border-bottom-color: var(--c-blue); }
.pick-filter { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s3); align-items: end; }
.pick-filter label { font-size: 12px; min-width: 88px; } .pick-filter label.grow { flex: 1 1 100%; } .pick-filter label[data-for] { flex: 1 1 0; }
.pick-filter label[hidden] { display: none; }
.pick-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s1) var(--s3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--ground); font-size: 13px; }
.pick-list { flex: 1 1 auto; min-height: 160px; overflow: auto; }
.pick-list .tbl td { padding-top: 6px; padding-bottom: 6px; }
.pick-list tr[draggable=true] { cursor: grab; } .pick-list tr[draggable=true]:hover td { background: var(--c-blue-l); }
.pick-list td b { display: block; font-size: 13.5px; } .pick-list td .sub { font-size: 12px; }
.pick-list .pk-cb { width: 28px; } .pick-list .pk-st { width: 1%; white-space: nowrap; }
.pick-list .pk-st .tag { visibility: hidden; } .pick-list tr.added .pk-st .tag { visibility: visible; } .pick-list tr.added td { color: var(--muted); }
.pick-list #pk-more { margin: var(--s2) auto; width: calc(100% - 2 * var(--s3)); }
.pick-act { display: flex; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--rule); }
.pick-act .btn { flex: 1; }
.pick-hint { padding: 0 var(--s3) var(--s2); margin: 0; }
.drag-ghost { position: fixed; top: -100px; left: 0; padding: 4px 10px; background: var(--c-blue); color: #fff; border-radius: 12px; font-size: 13px; font-weight: 700; }
dialog.modal.msg-dlg { width: min(980px, calc(100vw - 32px)); }
dialog.modal.msg-dlg h2 small { margin-left: var(--s3); font-weight: 400; font-size: 12px; color: var(--muted); }
.pv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 760px) { .pv-cols { grid-template-columns: 1fr; } .pick { position: static; max-height: none; } }
/* 分析（admin/analytics.php）：棒は1色（量）、値は文字で併記。表そのものが表の見方を兼ねる */
.an-note { margin: calc(var(--s2) * -1) 0 var(--s2); font-size: 12.5px; }
.counts.an-kpi { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .counts.an-kpi { grid-template-columns: repeat(3, 1fr); } .an-kpi a:nth-child(3) { border-right: 0; } .an-kpi a:nth-child(-n+3) { border-bottom: 1px solid var(--rule); } }
.an-foot { padding: var(--s2) var(--s4) var(--s3); margin: 0; font-size: 12.5px; }
.an-msg { margin: var(--s2) var(--s4); }
.an-tbl .bar-col { min-width: 150px; white-space: nowrap; }
.hbar { display: inline-block; vertical-align: middle; width: calc(100% - 4em); max-width: 220px; height: 10px; background: var(--c-blue-l); border-radius: 0 4px 4px 0; overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--c-blue); border-radius: 0 4px 4px 0; }
.hbar-v { display: inline-block; min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; vertical-align: middle; }
.an-row { display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: var(--s2); padding: 3px 0; font-size: 13px; }
.an-row .hbar { width: 100%; max-width: none; }
.tbl tr.subtotal td { background: var(--ground); border-top: 1px solid var(--rule-d); }
.vbars { display: flex; align-items: flex-end; gap: 2px; height: 170px; padding-top: 18px; }
.vbar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.vbar i { display: block; width: min(36px, 80%); background: var(--c-blue); border-radius: 4px 4px 0 0; }
.vbar:hover i { background: var(--ai-d); }
.vbar-v { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vbar-l { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--rule-d); width: 100%; text-align: center; padding-top: 2px; }
.heat td small, .tbl td.num small { display: block; font-size: 11px; color: var(--muted); }
.heat td.heat-1 { background: color-mix(in srgb, var(--c-blue) 10%, var(--paper)); }
.heat td.heat-2 { background: color-mix(in srgb, var(--c-blue) 22%, var(--paper)); }
.heat td.heat-3 { background: color-mix(in srgb, var(--c-blue) 36%, var(--paper)); }
.heat td.heat-4 { background: color-mix(in srgb, var(--c-blue) 52%, var(--paper)); }
.warn-t { color: var(--warn); }
/* システム設定 */
.sys-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.sys-st { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s2) var(--s3); display: grid; gap: 2px; justify-items: start; align-content: start; }   /* 余った高さを行に配らない（タグが縦に伸びないように） */
.sys-st .tag { align-self: start; min-width: 3.5em; text-align: center; margin: 2px 0; }   /* タグの高さ・最小幅をそろえる */
.sys-st-l { font-size: 12px; color: var(--muted); font-weight: 700; }
.sys-st small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.sys-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; font-size: 13px; line-height: 1.7; }
.sys-dl dt { font-weight: 700; color: var(--muted); white-space: nowrap; }
.sys-dl dd { margin: 0; }
@media (max-width: 600px) { .sys-dl { grid-template-columns: 1fr; } }
.sys-ex { margin: var(--s1) 0 0; padding-left: 1.2em; }
/* システム設定の説明文：文節での折り返し（body の auto-phrase）だと右端が大きく空くので、普通に行末で折り返す（2026-10-21 依頼者） */
.sys-st small, .sys-dl dd, .sys-ex li, .settings-form .hint, .settings-form .check span, .settings-form h2 small { word-break: normal; overflow-wrap: anywhere; }
.sys-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sys-links li { display: grid; grid-template-columns: 9em 1fr; gap: var(--s2); align-items: baseline; font-size: 13px; }
.sys-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.sys-links span { color: var(--muted); }
.sys-save { margin-top: var(--s3); }

/* ---------------------------------------------------------------------
   メッセージ・札
   --------------------------------------------------------------------- */
.msg { border: 1px solid; border-left-width: 4px; border-radius: var(--r); padding: var(--s2) var(--s3); margin-bottom: var(--s3); background: var(--paper); }
.msg.ok   { border-color: var(--ok);   background: var(--ok-l); }
.msg.ng   { border-color: var(--ng);   background: var(--ng-l); }
.msg.info { border-color: var(--c-blue); background: var(--c-blue-l); }
.msg.warn { border-color: var(--warn); background: var(--warn-l); }
.tag { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 var(--s2); border: 1px solid var(--rule-d); border-radius: var(--r); color: var(--muted); background: var(--paper); white-space: nowrap; }
.tag.ok { color: var(--c-green); border-color: var(--c-green); background: var(--c-green-l); }
.tag.warn { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-l); }
.tag.ng { color: var(--ng); border-color: var(--ng); background: var(--ng-l); }
.tag.ai { color: var(--c-blue); border-color: var(--c-blue); background: var(--c-blue-l); }

/* 確認印：朱の丸印。確認済み・完了のところにだけ押す */
.seal {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  border: 1.5px solid var(--shu); border-radius: 50%; color: var(--shu);
  font-size: 11px; font-weight: 700; line-height: 1; transform: rotate(-8deg);
}
.seal.lg { width: 44px; height: 44px; font-size: 13px; border-width: 2px; }

/* ---------------------------------------------------------------------
   ボタン・入力
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: var(--ctl); padding: 0 var(--s4); border: 1px solid var(--rule-d); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--ground); color: var(--ink); }
.btn.p { background: var(--ai); border-color: var(--ai); color: #fff; font-weight: 700; }
.btn.p:hover { background: var(--ai-d); border-color: var(--ai-d); color: #fff; }
.btn.d { color: var(--ng); border-color: var(--ng); } .btn.d:hover { background: var(--ng-l); color: var(--ng); }
.btn.ok { background: var(--c-green); border-color: var(--c-green); color: #fff; font-weight: 700; } .btn.ok:hover { background: #1c6a3e; border-color: #1c6a3e; color: #fff; }   /* 承認系：受理する・認定する・承認 */
.btn.teams { border-color: var(--c-violet); color: var(--c-violet); background: var(--c-violet-l); } .btn.teams:hover { background: #e2d9f7; color: var(--c-violet); }
.btn.s { height: 24px; padding: 0 var(--s3); font-size: 12px; }
.tbl td .btn.s, .tbl th .btn.s { height: 24px; padding: 0 10px; font-size: 12px; font-weight: 400; }   /* 表の中のボタンは小さくそろえる */
.btn.block { display: flex; width: 100%; height: auto; min-height: var(--ctl); padding-top: var(--s1); padding-bottom: var(--s1); white-space: normal; line-height: 1.35; text-align: left; }
.btn.block.p, .plain .btn.block { text-align: center; }
.btn[disabled], .btn.dis { opacity: .5; cursor: not-allowed; }
@media (max-width: 899px) { .btn { font-size: 15px; } .btn.s { height: 34px; font-size: 13px; } }

label { display: block; font-size: 12.5px; font-weight: 700; }
label .opt { font-weight: 400; color: var(--muted); }
/* type 属性の無い <input> も対象にする（チェック・ラジオ・ファイル等だけ除外） */
input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit], [type=button], [type=range])), select, textarea {
  display: block; width: 100%; height: var(--ctl); padding: 0 var(--s3); margin-top: 2px;
  border: 1px solid var(--rule-d); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-weight: 400;
}
input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; text-align: left; line-height: calc(var(--ctl) - 2px); }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.form-row > *, .form-col > * { min-width: 0; }   /* グリッドの子が中身の最小幅で枠を押し広げないように */
textarea { height: auto; min-height: 5.2em; padding: var(--s2) var(--s3); line-height: 1.6; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ai); outline-offset: -1px; border-color: var(--ai); }
/* iOS は 16px 未満の入力欄でページが勝手に拡大するため、スマホでは 16px にする */
@media (max-width: 899px) { input, select, textarea { font-size: 16px !important; } }
input[type=file] { display: block; width: 100%; margin-top: 2px; padding: var(--s1); border: 1px solid var(--rule-d); border-radius: var(--r); background: var(--paper); font: inherit; font-weight: 400; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--ai); vertical-align: -2px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 400; font-size: inherit; padding: var(--s2) 0; cursor: pointer; }
.check input { margin-top: 3px; flex: none; }
.checklist { display: grid; gap: var(--s2); margin: var(--s2) 0; padding: 0; list-style: none; }
.checklist .check { padding: var(--s3); border: 1px solid var(--c-amber); border-left-width: 4px; border-radius: var(--r); background: var(--c-amber-l); align-items: flex-start; min-height: 44px; }
.checklist .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-green); }
.checklist .check:has(input:checked), .checklist .check.is-on { border-color: var(--c-green); background: var(--c-green-l); }
.checklist .check:has(input:checked) > span::after { content: '確認済み'; display: inline-block; margin-left: var(--s2); font-size: 11px; font-weight: 700; color: #fff; background: var(--c-green); border-radius: var(--r); padding: 0 var(--s1); vertical-align: 1px; white-space: nowrap; }
.checklist .ck { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--c-green); color: #fff; font-size: 12px; font-weight: 700; }
.panel.todo { border-color: var(--c-amber); border-top: 3px solid var(--c-amber); } .panel.todo > h2::before { background: var(--c-amber); }
details.fold.done summary { gap: var(--s2); } details.fold.done summary .tag { margin-left: auto; }
.form-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.form-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.form-act { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
/* ユーザの編集：役割のチェックと、役割ごとの欄（v1.0.0-rc16） */
.role-checks, .role-fields { margin: 0; padding: var(--s2) var(--s3) var(--s3); border: 1px solid #d5dce3; border-radius: var(--r); min-width: 0; }
.role-checks legend, .role-fields legend { padding: 0 var(--s1); font-size: 13px; font-weight: 700; }
.role-checks { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.role-checks .chk { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; }
.role-fields { display: grid; gap: var(--s3); }
.role-fields[hidden] { display: none; }
/* 説明文は短く書く。折り返すときは、最後の行に数文字だけ残らないようにする */
/* 日本語は文節の切れ目で折り返す（対応ブラウザのみ。数字と助数詞「6桁」などが泣き別れになりにくい） */
body { word-break: auto-phrase; line-break: strict; }
.nw { white-space: nowrap; }
/* Safari・Firefox：phrase.js が文節の切れ目に <wbr> を入れる。それ以外の位置では折り返さない（長すぎる語だけは折り返す） */
html.bx body { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
html.bx input, html.bx textarea, html.bx select { word-break: normal; }   /* 途中で折り返したくない語句 */

.hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.alt-act { border-top: 1px solid var(--rule); padding-top: var(--s3); display: grid; gap: var(--s2); }
.err { font-size: 12.5px; color: var(--ng); }
.toolbar { display: flex; gap: var(--s2); align-items: end; flex-wrap: wrap; margin-bottom: var(--s3); }
.toolbar label { min-width: 130px; }
.toolbar .grow { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------------
   表（管理画面の主役。行を詰め、縞は付けず罫線で読む）
   --------------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--paper); }
.tbl th, .tbl td { padding: 5px var(--s3); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.tbl thead th { position: sticky; top: 0; background: #e3ecf5; color: #2b4764; border-bottom: 1px solid var(--rule-d); font-size: 12px; white-space: nowrap; z-index: 1; }
.tbl tbody tr:hover { background: var(--ai-l); }
.tbl tbody tr:has(> .empty):hover { background: transparent; }   /* 「該当なし」の行は色を変えない */
.tbl .num { text-align: right; }
.tbl .nowrap { white-space: nowrap; }
.tbl td.act { text-align: right; white-space: nowrap; }
.tbl .empty { text-align: left; color: var(--muted); padding: var(--s4); }
/* 画面内の切替（ログなど） */
.subtabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule-d); margin-bottom: var(--s3); flex-wrap: wrap; }
.subtabs a { padding: var(--s2) var(--s4); text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--ink); } .subtabs a.on { color: var(--c-blue); font-weight: 700; border-bottom-color: var(--c-blue); }

/* 名簿の検索：見出しの下に列ごとの絞り込み欄。既定では行を出さない */
.us-filter th { background: var(--paper); padding: 3px var(--s1); position: static; border-bottom: 1px solid var(--rule-d); }
.us-filter input, .us-filter select { margin: 0; height: 26px; font-size: 12.5px; padding: 0 var(--s2); width: 100%; min-width: 0; }
/* 学生・ユーザ：列幅（メールアドレスを1行で表示するため、学籍番号・アカウント・氏名を詰める） */
.us-tbl { width: 100%; table-layout: fixed; }   /* 列幅は割合（lib/users_page.php）。はみ出す文字は … にして、マウスを重ねると全文 */
.us-tbl col.c-code { width: 90px; } .us-tbl col.c-acct { width: 86px; } .us-tbl col.c-name { width: 98px; } .us-tbl col.c-kana { width: 100px; }
.us-tbl col.c-mail { width: 196px; } .us-tbl col.c-dept { width: 118px; } .us-tbl col.c-ay { width: 96px; } .us-tbl col.c-role { width: 84px; } .us-tbl col.c-st { width: 76px; }
.us-tbl col.c-login { width: 120px; } .us-tbl col.c-last { width: 112px; } .us-tbl col.c-act { width: 56px; }
.us-tbl td, .us-tbl th { padding-left: var(--s2); padding-right: var(--s2); }
.us-tbl tbody td { font-size: 12.5px; }
.us-tbl thead th { font-size: 12px; }
.us-tbl thead input, .us-tbl thead select { width: 100%; min-width: 0; height: 28px; font-size: 12px; padding: 0 4px; }   /* 絞込の欄は列の幅に収める */
.us-tbl thead select { padding-right: 0; }
.us-tbl thead .btn.s { padding: 0 6px; }
.us-tbl td.act { padding-left: 4px; padding-right: 6px; }
.us-tbl td.act .btn.s { padding: 0 8px; }
.us-tbl tbody td { overflow-wrap: anywhere; }   /* 省略せずに折り返す（長いアカウント・メールも全部見える） */
.us-tbl .dt { white-space: nowrap; }   /* 日付・時刻は途中で切らない（狭いときは時刻だけ次の行へ） */
/* ログインの可否：可は緑の印、不可は赤で行ごと目立たせる */
.login-ok, .login-ng { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; line-height: 1.5; padding: 0 var(--s2) 0 5px; border-radius: var(--r); border: 1px solid; white-space: nowrap; }   /* 札（.tag）と同じ大きさ。ボタンに見えないように */
.login-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-l); }
.login-ng { color: #fff; border-color: var(--ng); background: var(--ng); cursor: help; }
.login-ok .ico, .login-ng .ico { width: 12px; height: 12px; }
.us-tbl tbody tr.row-ng td { background: var(--ng-l); }
.us-tbl tbody tr.row-ng td:first-child { box-shadow: inset 3px 0 0 var(--ng); }
/* 所属のタブ（1段目：区分、2段目：区分の中の所属） */
.dept-tabs, .dept-sub { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--s2); border-bottom: 2px solid var(--ink); }
.dept-tabs .dt { appearance: none; border: 1px solid var(--rule-d); border-bottom: 0; background: var(--paper); color: var(--ink); padding: 5px 12px; margin: 0 2px -2px 0; border-radius: var(--r) var(--r) 0 0; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.dept-tabs .dt:hover { background: var(--ai-l, #eef3f8); }
.dept-tabs .dt.on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.dept-tabs .n, .dept-sub .n { font-size: 11px; opacity: .7; font-weight: 400; }
.dept-tabs.sub { margin-top: calc(-1 * var(--s2)); border-bottom: 1px solid var(--ai); padding-top: var(--s1); background: var(--ai-l); padding-left: var(--s2); }
.dept-tabs.sub .dt { font-size: 12.5px; padding: 4px 10px; margin-bottom: -1px; background: #fff; }
.dept-tabs.sub .dt.on { background: var(--ai); border-color: var(--ai); color: #fff; }
.us-filter input.short { border-color: var(--warn); background: var(--warn-l); }
.us-state { padding: var(--s4); color: var(--muted); font-size: 12.5px; text-align: left; }
.pager { display: flex; gap: var(--s3); align-items: center; justify-content: flex-end; padding: var(--s2) var(--s3); font-size: 12.5px; }
.pager .dis { color: var(--rule-d); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s4); font-size: 13px; }
.kv dt { color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------------
   学生ホーム：身分欄・30マスゲージ・手続きの段階
   --------------------------------------------------------------------- */
.idcard { display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); align-items: center; }
.idcard .photo { width: 64px; height: 80px; border: 1px solid var(--rule-d); background: var(--ground); display: grid; place-items: center; color: var(--rule-d); overflow: hidden; }
.idcard .photo img { width: 100%; height: 100%; object-fit: cover; }
.idcard .photo .ico { width: 30px; height: 30px; }
.idcard .nm { font-size: 17px; font-weight: 700; line-height: 1.3; }
.idcard .kana { font-size: 11.5px; color: var(--muted); }
.idcard .meta { display: flex; flex-wrap: wrap; gap: 0 var(--s4); font-size: 12.5px; margin-top: var(--s1); }
.idcard .meta span b { font-weight: 400; color: var(--muted); margin-right: var(--s1); }

/* 30マスゲージ：1マス＝1時間。確認済み＝藍、未確認＝斜線、残り＝白 */
.gauge-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.gauge-num { font-size: 26px; font-weight: 700; line-height: 1.1; }
.gauge-num small { font-size: 13px; font-weight: 400; color: var(--muted); }
.gauge { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin: var(--s2) 0 var(--s1); }
.gauge i { display: block; height: 22px; border: 1px solid var(--rule-d); background: var(--paper); position: relative; }
.gauge i:nth-child(5n)::after { content: attr(data-n); position: absolute; top: 100%; right: -1px; font-size: 10px; font-style: normal; color: var(--muted); line-height: 1.5; }
/* 分単位で塗る：--c＝確認済みの割合、--p＝未確認を含めた割合（1マス＝60分） */
.gauge i.on {
  border-color: var(--c-blue);
  background:
    linear-gradient(90deg, var(--c-blue) var(--c), transparent var(--c)),
    linear-gradient(90deg, transparent var(--p), var(--paper) var(--p)),
    repeating-linear-gradient(135deg, var(--ai-l) 0 3px, #b9cde0 3px 5px);
}
.gauge-wrap { padding-bottom: 14px; }
.gauge-legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.gauge-legend i { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--ai); margin-right: var(--s1); vertical-align: -1px; }
.gauge-legend .c { background: var(--c-blue); }
.gauge-legend .p { background: repeating-linear-gradient(135deg, var(--ai-l) 0 3px, #b9cde0 3px 5px); }
@media (max-width: 520px) { .gauge { grid-template-columns: repeat(15, 1fr); row-gap: 16px; } .gauge i { height: 20px; } }

/* 手続きの段階（実際に順序のある6段階なので番号を振る） */
.steps { counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rule-d); border-radius: 50%; font-size: 12px; color: var(--muted); }
.steps li.done::before { display: none; }
.steps li.done .seal { grid-column: 1; grid-row: 1; }
.steps li.next { background: var(--c-blue-l); box-shadow: inset 3px 0 0 var(--c-blue); margin: 0 calc(var(--s4) * -1); padding-left: var(--s4); padding-right: var(--s4); }
.steps li.next::before { border-color: var(--ai); color: var(--ai); font-weight: 700; }
.steps .lb { font-weight: 700; }
.steps li:not(.done):not(.next) .lb { font-weight: 400; }
.steps .nt { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.steps .dt { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* 件数つきのボタン（tiles_html）。色は状態の意味、.on は選択中、.hot は対応が必要、.zero は0件 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.tile { --c: var(--c-gray); --l: var(--c-gray-l); position: relative; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 0 var(--s2); padding: var(--s2) var(--s3); text-decoration: none; color: var(--ink);
  background: var(--l); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-top: 3px solid var(--c); border-radius: var(--r); min-height: 58px; }
.tile.c-blue { --c: var(--c-blue); --l: var(--c-blue-l); } .tile.c-amber { --c: var(--c-amber); --l: var(--c-amber-l); } .tile.c-green { --c: var(--c-green); --l: var(--c-green-l); }
.tile.c-red { --c: var(--c-red); --l: var(--c-red-l); } .tile.c-violet { --c: var(--c-violet); --l: var(--c-violet-l); } .tile.c-teal { --c: var(--c-teal); --l: var(--c-teal-l); }
.tile b { font-size: 22px; line-height: 1.15; color: var(--c); grid-column: 1; } .tile span { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; } .tile small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.tile .ico { grid-column: 2; grid-row: 1; width: 20px; height: 20px; color: var(--c); opacity: .75; align-self: center; }
.tile:hover { color: var(--ink); filter: brightness(.97); box-shadow: 0 1px 0 var(--c); }
.tile.on { background: var(--c); border-color: var(--c); color: #fff; } .tile.on b, .tile.on small, .tile.on .ico { color: #fff; }
.tile.on::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--c); border-bottom: 0; }
.tile.zero:not(.on) { background: var(--paper); } .tile.zero:not(.on) b { color: var(--rule-d); }
.tile.hot:not(.on) { box-shadow: inset 0 0 0 1px var(--c); } .tile.hot b::after { content: '要対応'; font-size: 10.5px; font-weight: 700; margin-left: var(--s2); padding: 0 var(--s1); border-radius: var(--r); background: var(--c); color: #fff; vertical-align: 4px; }
.tile.hot.on b::after { background: #fff; color: var(--c); }
.tiles.lg { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); } .tiles.lg .tile { padding: var(--s3) var(--s4); min-height: 86px; } .tiles.lg .tile b { font-size: 30px; } .tiles.lg .tile span { font-size: 13px; font-weight: 700; } .tiles.lg .tile .ico { width: 28px; height: 28px; }
/* ログ画面の件数（tiles に統一するまでの互換） */
.counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--rule); background: var(--paper); margin-bottom: var(--s3); border-radius: var(--r); overflow: hidden; }
.counts a { display: block; padding: var(--s3) var(--s4); text-decoration: none; color: var(--ink); border-right: 1px solid var(--rule); } .counts a:last-child { border-right: 0; }
.counts b { display: block; font-size: 22px; line-height: 1.2; color: var(--c-blue); } .counts a.hot b { color: var(--ng); } .counts span { font-size: 12px; color: var(--muted); }

/* プロフィール：顔写真（4:5）と切り抜き */
.photo-row { display: grid; grid-template-columns: 112px 1fr; gap: var(--s4); align-items: start; }
.photo-now { width: 112px; height: 140px; border: 1px solid var(--rule-d); background: var(--ground); display: grid; place-items: center; align-content: center; gap: var(--s1); color: var(--rule-d); font-size: 12px; overflow: hidden; }
.photo-now img { width: 100%; height: 100%; object-fit: cover; }
.photo-now .ico { width: 40px; height: 40px; }
dialog.photo-dlg { width: min(412px, calc(100vw - 16px)); }
.crop-wrap { display: grid; place-items: center; background: #2b3542; line-height: 0; }
.crop-wrap canvas, .crop-wrap video { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; touch-action: none; cursor: grab; object-fit: cover; }
.crop-wrap video { transform: scaleX(-1); cursor: default; }
.crop-wrap canvas:active { cursor: grabbing; }
.crop-ctl { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; }
.crop-ctl input[type=range] { flex: 1; min-width: 60px; height: 28px; margin: 0; accent-color: var(--ai); }
.crop-ctl { gap: var(--s2); }
.crop-ctl .btn.s { min-width: 40px; min-height: 40px; font-size: 18px; line-height: 1; padding: 0 var(--s2); }
.crop-ctl #zoom-reset { font-size: 13px; }
.crop-ctl .zoom-val { min-width: 3.2em; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.crop-foot { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s2); }
.crop-foot .hint { margin: 0; }
.crop-prev { flex: none; display: grid; justify-items: center; gap: 2px; }
.crop-prev canvas { width: 72px; height: 90px; border: 1px solid var(--rule-d); background: #fff; }
.crop-prev small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.course-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); margin-bottom: var(--s3); }
.course-line li { padding: var(--s2) var(--s3); border-right: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; }
.course-line li:last-child { border-right: 0; }
.course-line li .sub { grid-column: 1 / -1; }
.course-line li b { font-weight: 400; color: var(--muted); } .course-line li.done b, .course-line li.now b { font-weight: 700; color: var(--ink); }
.course-line li.now { background: var(--ai-l); box-shadow: inset 0 -3px 0 var(--ai); }
.course-line li.omit { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.035) 6px 7px); }   /* 開始の許可で省略した科目（修了ではない） */
.course-line li.omit b { text-decoration: line-through; text-decoration-color: var(--muted); }
@media (max-width: 600px) { .course-line { grid-template-columns: 1fr; } .course-line li { border-right: 0; border-bottom: 1px solid var(--rule); } .course-line li:last-child { border-bottom: 0; } }

/* 活動カルテ：記録の一覧（スマホで1行が1タップ）、確認の方式の切替、サイン欄 */
.idcard.lg { grid-template-columns: 80px 1fr; } .idcard.lg .photo { width: 80px; height: 100px; } .idcard.lg .nm { font-size: 19px; }
.karte-act { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); } .karte-act .btn { flex: 1 1 220px; min-height: 40px; white-space: normal; height: auto; padding: var(--s1) var(--s3); }
.recs .empty { padding: var(--s4); color: var(--muted); text-align: left; }
.rec { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 40px; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; min-height: 52px; }
.rec:last-child { border-bottom: 0; } a.rec:hover { background: var(--ai-l); color: var(--ink); }
.rec-d { text-align: center; line-height: 1.2; } .rec-d b { display: block; font-size: 15px; } .rec-d small { color: var(--muted); font-size: 11px; }
.rec-m b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rec-m small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; } .rec-m .rec-s { color: var(--ink); }
.rec-t { white-space: nowrap; font-weight: 700; font-size: 13px; } .rec-st { text-align: center; } .rec-st .tag { font-size: 10.5px; padding: 0 3px; }
details.fold { padding: 0; } details.fold summary { padding: var(--s2) var(--s4); cursor: pointer; font-weight: 700; font-size: 13px; min-height: 36px; display: flex; align-items: center; } details.fold[open] summary { border-bottom: 1px solid var(--rule); }
details.fold > :not(summary) { margin: var(--s2) var(--s4); } .rules { list-style: decimal; padding-left: 1.6em; } .rules li { margin-bottom: 2px; }
.tabsel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule-d); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s3); background: var(--paper); }
.tabsel button { border: 0; border-right: 1px solid var(--rule-d); background: none; font: inherit; font-weight: 700; padding: var(--s2) var(--s1); min-height: 48px; cursor: pointer; color: var(--ink); line-height: 1.3; }
.tabsel button:last-child { border-right: 0; } .tabsel button small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.tabsel button[aria-selected=true] { background: var(--ai); color: #fff; } .tabsel button[aria-selected=true] small { color: #fff; opacity: .85; }
.sign-wrap { border: 1px solid var(--rule-d); background: #fff; line-height: 0; position: relative; }
.sign-wrap::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 24%; border-bottom: 1px dashed var(--rule-d); pointer-events: none; }
.sign-wrap canvas { width: 100%; aspect-ratio: 600 / 220; touch-action: none; cursor: crosshair; }
.cf-rec { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); font-weight: 400; font-size: inherit; cursor: pointer; } .cf-rec:last-child { border-bottom: 0; }
.cf-rec input { width: 20px; height: 20px; margin-top: 2px; } .cf-rec b { font-size: 15px; }
.dur-echo { font-weight: 400; }

/* 単位認定申請：確認事項の一覧 */
.req li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); } .req li:last-child { border-bottom: 0; }
.req li .seal, .req li .req-no { grid-row: span 2; } .req li b { font-weight: 400; } .req li.done b { font-weight: 700; } .req li .sub { grid-column: 2; }
.req-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px dashed var(--rule-d); border-radius: 50%; font-size: 11px; color: var(--muted); }

/* 計画書：入力表と、帳票としての表示（画面・印刷共通） */
.sr { font-size: 0; } .sr > * { font-size: var(--fs); }   /* 見出しと重複するラベル文言は視覚的に隠す（読み上げには残る） */
.plan-tbl td { vertical-align: top; padding: 3px var(--s1); } .plan-tbl input { margin: 0; }
.plan-tbl tfoot td { border-bottom: 0; padding-top: var(--s2); vertical-align: middle; }
.dur-echo { display: block; font-size: 11.5px; color: var(--muted); min-height: 1.4em; }
.plan-total { text-align: right; white-space: nowrap; font-size: 14px; }
.plan-tbl input.short { border-color: var(--ng); background: var(--ng-l); }
.plan-tbl select.st-sel { margin: 3px 0 0; width: auto; min-width: 0; font-size: 12.5px; padding: 2px 6px; }
.plan-tbl select.st-sel:has(option[value="tentative"]:checked), .plan-tbl select.st-sel:has(option[value="undecided"]:checked) { border-color: var(--warn); background: var(--warn-l); }
.tag.plan-tent { font-size: 11px; padding: 0 5px; vertical-align: 1px; }
dialog.modal.pdf-dlg { width: min(920px, calc(100vw - 32px)); }
.pdf-dlg .pdf-list { max-height: 55vh; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.pdf-dlg .pdf-list tr.old td { color: var(--muted); }
.pdf-dlg .pdf-list label { display: flex; align-items: center; gap: 6px; margin: 0; }
/* スマホでは表をやめ、活動フィールド1つを1枚のカードにして縦に並べる（横スクロールさせない） */
@media (max-width: 760px) {
  .plan-tbl, .plan-tbl tbody, .plan-tbl tfoot, .plan-tbl tfoot tr, .plan-tbl tfoot td { display: block; width: auto; }
  .plan-tbl thead { display: none; }
  .plan-tbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); padding: var(--s3); margin-bottom: var(--s3); border: 1px solid var(--rule-d); border-radius: var(--r); background: var(--paper); }
  .plan-tbl tbody tr:hover { background: var(--paper); }
  .plan-tbl tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .plan-tbl tbody td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
  .plan-tbl tbody td.f-wide { grid-column: 1 / -1; }
  .plan-tbl tbody td[data-label="頻度"] { order: 3; } .plan-tbl tbody td.act { order: 4; text-align: right; }
  .plan-tbl tbody td.act::before { content: none; }
  .plan-tbl tfoot td { padding: 0; } .plan-tbl tfoot .hint { display: block; margin-top: var(--s2); }
  .plan-total { text-align: left; margin-top: var(--s3); padding-top: var(--s2) !important; border-top: 1px solid var(--rule); font-size: 15px; }
  .sticky-act .btn { flex: 1; }
}
.sticky-act { position: sticky; bottom: 0; background: var(--ground); padding: var(--s3) 0; border-top: 1px solid var(--rule-d); align-items: center; z-index: 5; }
@media (max-width: 899px) { .role-student .sticky-act { bottom: calc(54px + env(safe-area-inset-bottom)); } }
.doc-title { font-size: 16px; text-align: center; margin: var(--s2) 0 var(--s4); border: 0; display: block; }
.doc h3 { font-size: 13px; margin: var(--s4) 0 var(--s1); padding-left: var(--s2); border-left: 3px solid var(--ink); }
.doc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-tbl th, .doc-tbl td { border: 1px solid var(--rule-d); padding: var(--s1) var(--s3); text-align: left; vertical-align: top; }
.doc-tbl th { background: var(--ground); font-weight: 400; color: var(--muted); white-space: nowrap; width: 1%; }
.doc-tbl thead th { width: auto; } .doc-tbl .num { text-align: right; }
/* 列のある帳票の表は、列ごとに幅を決める（合計行の「3列またぎの見出し」に幅1%が掛かり、列が潰れていた） */
.doc-fields, .doc-records { table-layout: fixed; }
.doc-fields th, .doc-records th, .doc-fields td, .doc-records td { width: auto; white-space: normal; overflow-wrap: anywhere; }
.doc-fields .c-field { width: 30%; } .doc-fields .c-period { width: 16%; } .doc-fields .c-time, .doc-records .c-time { width: 7.5em; }
.doc-records .c-date { width: 9.5em; } .doc-records .c-conf { width: 30%; }
.doc-fields td.num, .doc-records td.num, .doc-fields th.num { white-space: nowrap; }
/* スマホ：帳票の表を窮屈な多列にしない */
@media (max-width: 600px) {
  .doc-head, .doc-head tbody { display: block; } .doc-head tr { display: grid; grid-template-columns: 6.5em 1fr; }   /* 冒頭の表は「項目名｜内容」の2列に */
  .doc-head th, .doc-head td { width: auto; margin: 0 -1px -1px 0; }
  .doc-records, .doc-records tbody { display: block; } .doc-records thead, .doc-records colgroup { display: none; }   /* 活動記録は1件ずつのかたまりに（日付｜時間／場所・内容／確認者） */
  .doc-records tr { display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--rule-d); margin-bottom: -1px; padding: var(--s2) var(--s3); gap: 0 var(--s3); }
  .doc-records td { border: 0; padding: 0; } .doc-records .r-date { font-weight: 700; grid-area: 1 / 1; } .doc-records .r-time { font-weight: 700; text-align: right; grid-area: 1 / 2; }
  .doc-records .r-body { grid-area: 2 / 1 / 3 / 3; } .doc-records .r-conf { grid-area: 3 / 1 / 4 / 3; margin-top: 2px; }
  .form-act.stack-sp { flex-direction: column-reverse; } .form-act.stack-sp .btn { width: 100%; min-height: 44px; white-space: normal; height: auto; }
}
@media (max-width: 600px) { .doc-fields .c-field { width: 32%; } .doc-fields .c-period { width: 20%; } .doc-fields .c-time, .doc-records .c-time { width: 5.5em; } .doc-records .c-date { width: 6.5em; } .doc-records .c-conf { width: 28%; } .doc-tbl { font-size: 12.5px; } }
.doc-text { border: 1px solid var(--rule-d); padding: var(--s2) var(--s3); min-height: 3.2em; white-space: normal; }
.doc-foot { margin-top: var(--s3); text-align: right; }

/* ---------------------------------------------------------------------
   ダイアログ
   --------------------------------------------------------------------- */
dialog.modal { border: 1px solid var(--rule-d); border-radius: var(--r); padding: var(--s4); width: min(520px, calc(100vw - 16px)); color: var(--ink); }
dialog.modal::backdrop { background: rgba(29, 43, 58, .45); }
dialog.modal h2 { font-size: 15px; margin-bottom: var(--s3); padding-bottom: var(--s1); border-bottom: 1px solid var(--rule); }
.qr-box { display: grid; justify-items: center; gap: var(--s2); text-align: left; } .qr-box p { justify-self: stretch; } .qr-box .left { text-align: center; }
.qr-box .qr { padding: var(--s3); background: #fff; border: 1px solid var(--rule); line-height: 0; }
.qr-box .qr svg, .qr-box .qr img { width: 220px; height: 220px; }
.qr-box .left { font-size: 13px; }
.qr-box .left b { font-size: 18px; }

/* ---------------------------------------------------------------------
   ログイン前・外部者向け（1カラム）
   --------------------------------------------------------------------- */
body.plain { background: var(--ground); border-top: 6px solid var(--ai); }
body.plain.realm-admin { border-top-color: var(--ink); }
body.plain.realm-teacher { border-top-color: var(--c-teacher); }
body.plain.realm-partner { border-top-color: var(--c-partner); }
.realm-admin .plain-brand { color: var(--ink); } .realm-teacher .plain-brand { color: var(--c-teacher); } .realm-partner .plain-brand { color: var(--c-partner); }
/* ログイン不要の画面の下部：補足の情報を、項目ごとに1行ずつ（1行に詰め込まない・共通フッタと重複させない） */
.info-foot { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: var(--s4) var(--s2) 0; padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.info-foot dt { white-space: nowrap; } .info-foot dd { margin: 0; color: var(--ink); } .info-foot a { overflow-wrap: anywhere; }
.manual-link { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 12.5px; margin-top: var(--s3); }
.rail-nav a.rail-manual { margin-top: var(--s4); border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s3); font-size: 12.5px; opacity: .8; }
.realm-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: center; font-size: 12px; margin-top: var(--s3); }
.realm-links a { color: var(--muted); }
.plain-main { width: min(400px, 100%); margin: 0 auto; padding: var(--s4); padding-top: min(12vh, 96px); }
.plain-main.wide { width: min(640px, 100%); padding-top: var(--s4); }
.plain-main.doc { width: min(860px, 100%); }   /* 申請書など、表のある文書を見せる画面 */
.plain-brand { display: flex; align-items: center; gap: var(--s3); color: var(--ai); margin-bottom: var(--s3); }
.plain-brand .brand-mark { background:
    linear-gradient(currentColor, currentColor) 0 0 / 50% 66.6% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5.5px, currentColor 5.5px 6.5px),
    repeating-linear-gradient(0deg, transparent 0 5.66px, currentColor 5.66px 6.66px); }
.plain-brand b { display: block; font-size: 17px; line-height: 1.3; color: var(--ink); }
.plain-brand small { font-size: 11px; color: var(--muted); }
.plain-foot { text-align: left; font-size: 11.5px; color: var(--muted); margin-top: var(--s3); }
.code-input { font-size: 24px !important; letter-spacing: .4em; text-align: center; height: 48px !important; font-weight: 700 !important; }
details.help { margin-top: var(--s3); font-size: 12.5px; border-top: 1px solid var(--rule); padding-top: var(--s2); }
details.help summary { cursor: pointer; color: var(--ai); min-height: 24px; }
details.help ul { list-style: disc; padding-left: 1.4em; margin: var(--s1) 0 var(--s2); color: var(--muted); }
details.help li { margin-bottom: 2px; }
.linkrow { display: flex; justify-content: space-between; gap: var(--s3); font-size: 12.5px; flex-wrap: wrap; }
.linkrow button { background: none; border: 0; padding: 0; font: inherit; color: var(--ai); text-decoration: underline; cursor: pointer; }
.linkrow button[disabled] { color: var(--muted); text-decoration: none; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .rail-nav a, .tabs a { transition: background-color .12s, border-color .12s; }
}
@media print {
  .rail, .tabs, .btn, .toolbar, .skip, .msg, .no-print, .page-h .tag { display: none !important; }
  .cols.c21 { display: block; } .cols.c21 > div { display: none; } .main { padding: 0; max-width: none; } .panel { border: 0; padding: 0; }
  @page { size: A4 portrait; margin: 18mm 16mm; }
  .app { display: block; max-width: none; box-shadow: none; background: #fff; } body, body:has(> .app) { background: #fff; } .panel { border-color: #999; }
}

/* 紙の活動カードの画像（v1.0.0-rc7） */
.cardimgs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.cardimg { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--rule-d); border-radius: var(--r); background: var(--paper); overflow: hidden; color: var(--ai); text-decoration: none; }
.cardimg img { width: 100%; height: 100%; object-fit: cover; }
.cardimgs.l .cardimg { width: auto; height: auto; max-width: 100%; } .cardimgs.l .cardimg img { max-width: 100%; max-height: 720px; width: auto; height: auto; object-fit: contain; }
.cardimgs.s .cardimg { width: 56px; height: 56px; }
.cardimg.pdf { gap: 2px; font-size: 12px; font-weight: 700; } .cardimgs.l .cardimg.pdf { width: 120px; height: 96px; }
.cardpick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cardpick-item { display: flex; flex-direction: column; gap: 2px; width: 104px; } .cardpick-item small { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.3; }
.cardpick-item img, .cardpick-item .pdf { width: 104px; height: 78px; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--r); display: grid; place-items: center; font-weight: 700; color: var(--ai); background: var(--ai-l); }
.cardpick .err { flex-basis: 100%; margin: 0; }

/* 学生のプロフィール（管理者）：活動データの消去（2026-10） */
.panel.danger-zone { border-color: var(--ng); }
.panel.danger-zone > h2 { color: var(--ng); }
.purge-list { display: grid; gap: 6px; }
.purge-list .check { align-items: flex-start; }
.purge-list .check input:disabled + span { opacity: .6; }

/* ---------------------------------------------------------------------
   ログイン画面：どの入口か一目で分かるように（v7 の画面を復元。2026-10-11）
   入口ごとに 色（地・帯・ボタン）／大きな見出し「学生」「指導教員」…／印 を変える
   学生＝藍、キャリア支援課＝墨（灰）、指導教員＝深緑、受入先＝葡萄
   --------------------------------------------------------------------- */
body.plain { --realm: var(--ai); --realm-l: #e3ecf5; }
body.plain.realm-admin   { --realm: #2b3440; --realm-l: #e9ebee; }
body.plain.realm-teacher { --realm: var(--c-teacher); --realm-l: #e1efe8; }
body.plain.realm-partner { --realm: var(--c-partner); --realm-l: #ece8f3; }
body.plain { background: var(--realm-l); border-top: 8px solid var(--realm); }
body.plain .btn.p { background: var(--realm); border-color: var(--realm); }
body.plain .btn.p:hover { filter: brightness(1.12); }
body.plain input:focus { border-color: var(--realm); outline-color: var(--realm); }
.realm-band { display: flex; align-items: center; gap: var(--s4); margin: calc(var(--s3) * -1) calc(var(--s4) * -1) var(--s4); padding: 14px var(--s4); background: var(--realm); color: #fff; border-radius: var(--r) var(--r) 0 0; font-size: inherit; }
.realm-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.55); }
.realm-ico .ico { width: 28px; height: 28px; stroke-width: 1.2; }
.realm-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; line-height: 1.25; }
.realm-who b { font-size: 26px; letter-spacing: .04em; }
.realm-who small { font-size: 14px; opacity: .9; }
body.plain .panel:has(> .realm-band) { border-color: var(--realm); }
.plain-foot { text-align: center; }   /* 担当課のクレジットは中央 */
.panel > .manual-link { display: flex; align-items: center; justify-content: center; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); }
.panel > .manual-link .ico { color: var(--muted); margin-right: calc(var(--s3) * -1); }


/* ---------------------------------------------------------------------
   修了ワッペン（v1.0.0-rc28。2026-10-17 依頼者）：修了した科目だけに付く認証のワッペン。
   A＝チューリップ・B＝スイセン・C＝ひまわり（モチーフ：キャリア支援課「教育体験活動」ページの花）。
   取り組み中・次の科目は文字の札（.ctag）。PCはメニューの上、スマホは上部のバーに、いまの科目と修了ワッペンを出す
   --------------------------------------------------------------------- */
.cicon { flex: none; vertical-align: middle; }
.ctag { display: inline-grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 700; font-size: .85em; line-height: 1; color: var(--ai); background: var(--paper); vertical-align: middle; }
.ctag.lg { width: 30px; height: 30px; font-size: 15px; }
.cbadge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.rail-course { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) 8px; padding: var(--s3) var(--s3) var(--s3) var(--s4); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.rail-course:hover { color: #fff; background: rgba(255,255,255,.08); }
.rc-wap { display: flex; align-items: center; gap: 3px; }
.rc-wap .wappen { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.rc-cur { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rc-fl { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.rc-cur b { font-size: 13.5px; white-space: nowrap; }
.cflower { flex: none; vertical-align: middle; }
.id-wap { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); flex-wrap: wrap; }
.rail-nav a.locked { opacity: .6; }
.rail-nav a .nav-lock { margin-left: auto; display: inline-flex; opacity: .9; }
.rail-nav a .nav-lock .ico { width: 13px; height: 13px; }
.tabs a.locked { opacity: .55; }
@media (max-width: 899px) {
  .resp .rail-course { order: 1; border: 0; padding: 0 var(--s2) 0 0; flex-direction: row; align-items: center; gap: 6px; }
  .resp .rail-course:hover { background: none; }
  .resp .rc-wap { flex-wrap: nowrap; gap: 3px; }
  .resp .rc-wap .wappen { width: 32px; height: 32px; }
  .resp .rc-cur { gap: 6px; }
  .resp .rc-fl { width: 34px; height: 34px; } .resp .rc-fl .cflower { width: 26px; height: 26px; }
  .resp .rc-cur b { font-size: 13px; }
}
@media (max-width: 479px) { .resp .rc-cur b, .resp .me-name { display: none; } .resp .brand-name { font-size: 14px; } }
/* 活動に進めないとき（オリエンテーションの出席が未登録など）の案内 */
.gate-panel h2 { display: flex; align-items: center; gap: var(--s2); color: var(--c-amber); }
.gate-panel p { margin-bottom: var(--s2); }
.gate-steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); margin: var(--s3) 0; }
.gate-steps li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-right: 1px solid var(--rule); color: var(--muted); font-size: 13px; line-height: 1.35; }
.gate-steps li:last-child { border-right: 0; }
.gate-steps li b { display: block; color: var(--ink); }
.gate-steps li:not(.on) .ctag { opacity: .45; }
.gate-steps li.on { background: var(--c-green-l); color: var(--ink); }
.gate-steps li.next { box-shadow: inset 0 -3px 0 var(--c-amber); }
@media (max-width: 600px) { .gate-steps { grid-template-columns: 1fr; } .gate-steps li { border-right: 0; border-bottom: 1px solid var(--rule); } .gate-steps li:last-child { border-bottom: 0; } }
/* 履修の状況（プロフィール）・見出しの科目 */
.course-line li:not(.done):not(.now) .ctag { opacity: .45; }
.course-line li .ctag, .course-line li .wappen { grid-row: span 1; }
.page-h .cbadge { font-size: 14px; color: var(--ink); align-self: center; }
.tbl .cbadge { font-weight: 700; }
.claim-choice { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.claim-choice label { display: inline-flex; align-items: center; gap: 6px; }
@media print { .rail-course { display: none; } }
.page-h .page-ci { align-self: center; }
.course-line li { grid-template-columns: auto 1fr; position: relative; padding-right: 30px; }
.course-line li .sub { grid-column: 1 / -1; }
.course-line li .seal { position: absolute; top: 4px; right: 4px; }

/* 科目の切替（学生の画面の上。並行モデル v1.0.0-rc32）：A・B・C と状態 */
.course-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); margin-bottom: var(--s3); overflow: hidden; }
.course-bar .cb-item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-right: 1px solid var(--rule); color: var(--muted); text-decoration: none; min-height: 46px; }
.course-bar .cb-item:last-child { border-right: 0; }
.course-bar .cb-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.course-bar .cb-sub { grid-column: 2; font-size: 12px; line-height: 1.3; }
.course-bar .cb-item.on { background: var(--ai-l); box-shadow: inset 0 -3px 0 var(--ai); }
.course-bar .cb-item.on .cb-sub { color: var(--ai); font-weight: 700; }
.course-bar .cb-item.st-locked, .course-bar .cb-item.st-skipped { color: var(--muted); }
.course-bar .cb-item.st-locked .cb-name, .course-bar .cb-item.st-skipped .cb-name { font-weight: 400; color: var(--muted); }
.course-bar .cb-item.st-skipped .cb-name { text-decoration: line-through; }
.course-bar .cb-item.st-locked .ctag, .course-bar .cb-item.st-skipped .ctag { opacity: .45; }
.course-bar .cb-item.st-open .cb-sub, .course-bar .cb-item.st-completed .cb-sub, .course-bar .cb-item.st-applied .cb-sub { color: var(--ok); }
.course-bar .cb-item:hover { background: var(--ai-l); }
@media (max-width: 600px) { .course-bar { grid-template-columns: repeat(3, 1fr); } .course-bar .cb-item { padding: 6px 8px; grid-template-columns: 1fr; } .course-bar .cb-item .ctag { display: none; } .course-bar .cb-sub { grid-column: 1; } }