/* ============================================================
   講師アンケート集計ツール — スタイル
   配色・余白は Claude Design の元デザインに合わせている。
   ============================================================ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f4f6fa;
  font-family: 'Noto Sans JP', sans-serif;
  color: #1f2733;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.mono { font-family: 'JetBrains Mono', monospace; }
.mut { color: #9aa3b2; }
@keyframes spin { to { transform: rotate(360deg); } }
input:focus, select:focus { outline: 2px solid #16357c; outline-offset: -1px; }

/* ---- header ---- */
.app-header {
  height: 56px; background: #16357c; display: flex; align-items: center;
  padding: 0 24px; gap: 16px; position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(16, 35, 80, .18);
}
.logo { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.logo .k {
  background: #d61f26; color: #fff; font-weight: 700; font-size: 14px;
  padding: 3px 8px; border-radius: 3px; font-family: 'JetBrains Mono', monospace;
}
.logo .name { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.app-header .tool { color: #aebbe0; font-size: 13px; border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 16px; }
.app-header .spacer { flex: 1; }
.app-header .logout-btn {
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px; background: transparent; color: #fff;
  padding: 7px 12px; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer;
}
.app-header .logout-btn:hover { background: rgba(255, 255, 255, .1); }
.app-header .logout-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 72px; }

/* ---- shared ---- */
.card { background: #fff; border: 1px solid #e3e7ee; border-radius: 8px; box-shadow: 0 1px 2px rgba(20, 30, 60, .04); }
.card.pad { padding: 28px 30px; }
h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: .02em; }
h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.sub { margin: 7px 0 0; font-size: 13px; color: #6b7480; }
.card.pad .sub { margin: 0 0 22px; }
.hint { margin: 13px 2px 0; font-size: 11.5px; color: #9aa3b2; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.select {
  width: 100%; height: 42px; border: 1px solid #cfd5e0; border-radius: 6px; padding: 0 12px;
  font-size: 14px; font-family: 'Noto Sans JP', sans-serif; background: #fff; color: #1f2733;
}

/* ---- buttons ---- */
.btn-primary {
  border: none; background: #d61f26; color: #fff; font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 6px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(214, 31, 38, .3); display: flex; align-items: center; gap: 7px;
}
.btn-primary:hover { background: #bd1a20; }
.btn-primary:disabled, .btn-nav:disabled, .btn-ghost:disabled, .btn-outline:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-primary.block { width: 100%; justify-content: center; padding: 14px; font-size: 15px; border-radius: 7px; }
.btn-nav { border: none; background: #16357c; color: #fff; font-weight: 700; font-size: 14px; padding: 11px 26px; border-radius: 6px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; }
.btn-nav:hover { background: #102a63; }
.btn-ghost { border: 1px solid #cfd5e0; background: #fff; color: #475063; font-weight: 500; font-size: 14px; padding: 11px 22px; border-radius: 6px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; }
.btn-ghost:hover { background: #f2f5fb; }
.btn-outline { border: 1px solid #cfd5e0; background: #fff; color: #16357c; font-weight: 500; font-size: 13px; padding: 9px 15px; border-radius: 6px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; white-space: nowrap; }
.btn-outline:hover { background: #f2f5fb; }
.link-back { border: none; background: none; color: #6b7480; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 16px; font-family: 'Noto Sans JP', sans-serif; }
.link-back:hover { color: #16357c; }

/* ---- dashboard ---- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.filters { display: flex; gap: 10px; margin-bottom: 16px; }
.filter { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e3e7ee; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #475063; }
.filter span { color: #9aa3b2; }
.table { overflow: hidden; }
.row { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid #eef1f6; }
.row.head { padding: 12px 18px; background: #fafbfd; border-bottom: 1px solid #e3e7ee; font-size: 12px; font-weight: 500; color: #6b7480; }
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: #f7f9fc; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 20px; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }

/* ---- 年度 × 教室 × 実施回 マトリクスダッシュボード ---- */
.dashboard-page { min-width: 0; }
.dashboard-head { align-items: center; margin-bottom: 18px; }
.dashboard-head-actions { display: flex; gap: 10px; align-items: center; }
.dashboard-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.dashboard-toolbar label { margin: 0; color: #475063; font-size: 13px; }
.dashboard-division-control {
  display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid #cfd5e0;
  border-radius: 7px; background: #fff;
}
.division-choice {
  min-width: 104px; height: 38px; padding: 0 16px; border: 0; background: #fff; color: #667085;
  font: 700 13px 'Noto Sans JP', sans-serif; cursor: pointer;
}
.division-choice + .division-choice { border-left: 1px solid #cfd5e0; }
.division-choice:hover:not(:disabled):not(.is-selected) { background: #f2f5fb; color: #16357c; }
.division-choice.is-selected { background: #16357c; color: #fff; }
.division-choice:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(22, 53, 124, .3); outline-offset: -3px; }
.division-choice:disabled { cursor: not-allowed; opacity: .6; }
.dashboard-year-select { width: 154px; height: 38px; font-weight: 700; color: #16357c; }
.division-badge {
  display: inline-flex; margin-right: 8px; padding: 2px 7px; border-radius: 999px;
  background: #e6eefb; color: #16357c; font-size: 10.5px; font-weight: 700; vertical-align: 1px;
}
.dashboard-matrix {
  position: relative; overflow: visible; border-color: #dce2ec; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(21, 48, 105, .07);
}
.dashboard-matrix-row { display: grid; align-items: stretch; }
.dashboard-matrix-row + .dashboard-matrix-row { border-top: 1px solid #e7ebf2; }
.dashboard-matrix-columns {
  min-height: 48px; border-radius: 9px 9px 0 0; background: #f5f7fb;
  color: #526079; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.dashboard-matrix-columns > div {
  display: flex; align-items: center; justify-content: center; padding: 11px 14px;
}
.dashboard-matrix-columns > div + div { border-left: 1px solid #e1e6ef; }
.dashboard-matrix-columns .matrix-classroom { justify-content: flex-start; }
.matrix-classroom {
  display: flex; align-items: center; padding: 16px; background: #fafbfd;
  color: #283247; font-size: 13px; font-weight: 700; line-height: 1.45;
}
.dashboard-matrix-row:last-child .matrix-classroom { border-radius: 0 0 0 9px; }
.matrix-cell {
  position: relative; min-width: 0; min-height: 76px; box-sizing: border-box; padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #fff;
  border-left: 1px solid #e7ebf2; color: #283247;
}
.dashboard-matrix-row:last-child .matrix-cell:last-child { border-radius: 0 0 9px 0; }
.matrix-cell-main {
  min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto; align-content: center; gap: 7px 10px;
}
.matrix-cell-main--action, .matrix-cell--empty { cursor: pointer; }
.matrix-cell-main--action { margin: -12px -14px; padding: 12px 42px 12px 14px; border-radius: 3px; }
.matrix-cell-main--action:hover, .matrix-cell--empty:hover { background: #f3f6fc; }
.matrix-cell-main--action:focus-visible, .matrix-cell--empty:focus-visible,
.matrix-menu-button:focus-visible, .matrix-action-primary:focus-visible, .matrix-action-secondary:focus-visible {
  outline: 3px solid rgba(22, 53, 124, .35); outline-offset: -3px;
}
.matrix-status {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.25;
  white-space: nowrap;
}
.matrix-status .dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.matrix-status--awaiting { color: #a4751a; background: #fef0d8; }
.matrix-status--review { color: #16357c; background: #e6eefb; }
.matrix-status--done { color: #28713b; background: #e5f3e8; }
.matrix-status--busy { color: #667085; background: #edf0f4; }
.matrix-status--failed { color: #b4232b; background: #fde8e8; }
.matrix-count { align-self: center; justify-self: end; color: #303b50; font-size: 13px; font-weight: 700; }
.matrix-open-label { grid-column: 1 / -1; color: #16357c; font-size: 11.5px; font-weight: 700; }
.matrix-cell--awaiting { padding: 11px 14px; cursor: default; }
.matrix-collect-inner { display: flex; align-items: center; gap: 10px; width: 100%; padding-right: 32px; }
.matrix-collect-inner .matrix-status {
  flex: none; gap: 5px; padding: 3px 10px; font-weight: 600; white-space: nowrap;
}
.matrix-awaiting-actions {
  margin-left: auto; display: flex; flex: none; flex-direction: column; gap: 5px; width: 114px;
}
.matrix-action-primary, .matrix-action-secondary {
  width: 100%; padding: 5px 6px; border-radius: 5px; font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; font-weight: 700; line-height: 13px; white-space: nowrap; box-shadow: none; cursor: pointer;
}
.matrix-action-primary { border: 0; background: #16357c; color: #fff; }
.matrix-action-primary:hover { background: #102a63; }
.matrix-action-secondary { border: 1px solid #cfd5e0; background: #fff; color: #475063; font-weight: 600; }
.matrix-action-secondary:hover { background: #f1f5fb; }
.matrix-cell-note { color: #8a94a6; font-size: 10.5px; line-height: 1.4; }
.matrix-cell--busy, .matrix-cell--failed, .matrix-cell--integrity { background: #fafbfc; cursor: not-allowed; }
.matrix-cell--integrity { background: #fff8f8; }
.matrix-mini-spinner {
  width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #c8ced7;
  border-top-color: #667085; border-radius: 50%; animation: spin .8s linear infinite;
}
.matrix-cell--empty { align-items: center; color: #a1a9b7; text-align: center; }
.matrix-empty-idle, .matrix-empty-hover { font-size: 12px; font-weight: 500; }
.matrix-empty-hover { display: none; color: #16357c; font-weight: 700; }
.matrix-cell--empty:hover .matrix-empty-idle, .matrix-cell--empty:focus-visible .matrix-empty-idle { display: none; }
.matrix-cell--empty:hover .matrix-empty-hover, .matrix-cell--empty:focus-visible .matrix-empty-hover { display: inline; }
.matrix-menu-wrap { position: absolute; top: 7px; right: 7px; z-index: 8; }
.matrix-menu-button {
  width: 27px; height: 25px; border: 0; border-radius: 5px; background: transparent;
  color: #7c879a; font-size: 18px; line-height: 1; cursor: pointer;
}
.matrix-menu-button:hover, .matrix-menu-button[aria-expanded="true"] { background: #e9eef6; color: #16357c; }
.matrix-menu {
  position: absolute; top: 29px; right: 0; width: 176px; padding: 5px; border: 1px solid #dbe1eb;
  border-radius: 7px; background: #fff; box-shadow: 0 8px 24px rgba(22, 36, 70, .18); z-index: 20;
}
.matrix-menu button {
  width: 100%; border: 0; border-radius: 5px; padding: 9px 10px; background: #fff; color: #354158;
  text-align: left; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer;
}
.matrix-menu button:hover, .matrix-menu button:focus-visible { outline: 0; background: #f0f4fa; color: #16357c; }
.matrix-menu .matrix-menu-danger { color: #b4232b; }
.matrix-menu .matrix-menu-danger:hover, .matrix-menu .matrix-menu-danger:focus-visible { background: #fff0f0; color: #9f1f25; }
.matrix-menu .matrix-menu-disabled, .matrix-menu .matrix-menu-disabled:hover {
  background: #fff; color: #9aa3b2; cursor: not-allowed;
}
.matrix-menu-separator { height: 1px; margin: 4px 3px; background: #e7ebf2; }
.matrix-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 13px 4px 0;
  color: #7a8495; font-size: 11px;
}
.matrix-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot--awaiting { background: #d89418; }
.legend-dot--review { background: #3161b6; }
.legend-dot--done { background: #3b8a4d; }
.legend-dot--busy { background: #8a94a6; }
.legend-dot--failed { background: #c74349; }
.legend-empty { width: 8px; color: #a1a9b7; font-style: normal; }
.dashboard-integrity-alert {
  margin-bottom: 14px; padding: 12px 15px; border: 1px solid #e9b7b8; border-radius: 8px;
  background: #fff4f4; color: #9e252a; font-size: 12px;
}
.dashboard-integrity-alert ul { margin: 7px 0 0; padding-left: 20px; }
.dashboard-integrity-alert li + li { margin-top: 3px; }
.dashboard-integrity-alert .mono { color: #7d4e51; font-size: 10px; }
.dashboard-error-card {
  min-height: 250px; padding: 36px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; color: #526079;
}
.dashboard-error-card h2 { color: #283247; margin: 10px 0 4px; }
.dashboard-error-card p { margin: 0; font-size: 13px; }
.dashboard-error-icon {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fde8e8; color: #b4232b; font-size: 22px; font-weight: 700;
}
.dashboard-error-actions { display: flex; gap: 9px; margin-top: 20px; }
.matrix-skeleton-row { pointer-events: none; }
.matrix-skeleton { display: block; border-radius: 999px; background: linear-gradient(90deg, #edf0f5 25%, #f7f8fb 45%, #edf0f5 65%); background-size: 300% 100%; animation: matrix-shimmer 1.35s ease-in-out infinite; }
.matrix-skeleton--label { width: 78%; height: 13px; }
.matrix-skeleton--badge { width: 84px; height: 21px; }
.matrix-skeleton--line { width: 62%; height: 10px; }
@keyframes matrix-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- stepper ---- */
.stepper { display: flex; align-items: center; padding: 16px 22px; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.step-mark { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.step-sep { flex: 1; height: 2px; background: #e7ebf2; margin: 0 16px; border-radius: 2px; }

/* ---- step2 teacher table ---- */
.warn { display: flex; align-items: center; gap: 8px; background: #fdeceb; border: 1px solid #f3c4c2; color: #bd1a20; font-size: 12.5px; padding: 9px 13px; border-radius: 6px; margin: 14px 0 4px; }
.t-table { border: 1px solid #e3e7ee; border-radius: 8px; overflow: hidden; margin-top: 16px; }
.t-row { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid #eef1f6; }
.t-row.head { padding: 10px 14px; background: #fafbfd; font-size: 12px; font-weight: 500; color: #6b7480; }
.inp-no { width: 74px; height: 36px; border: 1px solid #d8dde6; border-radius: 5px; padding: 0 10px; font-size: 14px; text-align: center; background: #fff; }
.inp-name { width: 100%; height: 36px; border: 1px solid #d8dde6; border-radius: 5px; padding: 0 11px; font-size: 14px; font-family: 'Noto Sans JP', sans-serif; background: #fff; }
.inp { height: 36px; border: 1px solid #d8dde6; border-radius: 5px; padding: 0 11px; font-size: 13.5px; font-family: 'Noto Sans JP', sans-serif; background: #fff; color: #1f2733; }
.x-btn { border: none; background: none; color: #bcc3cf; cursor: pointer; font-size: 15px; padding: 5px; line-height: 1; }
.x-btn:hover { color: #d61f26; }
.add-row { border: 1px dashed #c2cad7; background: #fff; color: #475063; font-size: 12.5px; font-weight: 500; padding: 9px 14px; border-radius: 6px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; width: 100%; text-align: center; }
.add-row:hover { border-color: #16357c; color: #16357c; }

/* ---- step3 upload ---- */
.dropzone { border: 2px dashed #c2cad7; border-radius: 10px; padding: 34px; text-align: center; cursor: pointer; background: #fafbfd; }
.dropzone:hover { border-color: #16357c; background: #f4f7fc; }
.progress { height: 6px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.progress.big { height: 10px; border-radius: 5px; }
.f-row { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-bottom: 1px solid #eef1f6; }
.f-thumb { width: 34px; height: 42px; background: #f0f3f8; border: 1px solid #dde3ec; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #9aa3b2; }

/* ---- step4 ---- */
.summary { border: 1px solid #e3e7ee; border-radius: 8px; overflow: hidden; }
.srow { display: flex; padding: 14px 18px; border-bottom: 1px solid #eef1f6; }
.srow.last { border-bottom: none; }
.slabel { width: 140px; font-size: 13px; color: #6b7480; }
.sval { font-size: 14px; font-weight: 500; }
.spinner { width: 46px; height: 46px; border: 4px solid #e3e7ee; border-top-color: #16357c; border-radius: 50%; margin: 0 auto 20px; animation: spin .9s linear infinite; }
.check-circle { width: 52px; height: 52px; background: #e7f3ea; color: #2f7a3a; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 26px; }

/* ---- nav ---- */
.nav { display: flex; justify-content: space-between; margin-top: 22px; }

/* ---- results ---- */
.res-head { background: #16357c; border-radius: 10px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.btn-export { border: none; background: #fff; color: #16357c; font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 6px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; display: flex; align-items: center; gap: 8px; }
.btn-export:hover { background: #eef2fa; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e3e7ee; margin-bottom: 24px; }
.tab { border: none; background: none; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 700; padding: 11px 18px; margin-bottom: -2px; }

.ta-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.mode-group { display: flex; border: 1px solid #cfd5e0; border-radius: 8px; overflow: hidden; }
.mode { border: none; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; padding: 9px 20px; background: #fff; color: #6b7480; }
.mode.on { background: #16357c; color: #fff; }
.mode.seg { padding: 8px 16px; }
.mtg-group { display: flex; border: 1px solid #cfd5e0; border-radius: 7px; overflow: hidden; }
.mtg { border: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; padding: 7px 14px; background: #fff; color: #6b7480; }
.mtg + .mtg { border-left: 1px solid #cfd5e0; }
.mtg.on { background: #16357c; color: #fff; }

.cmp-row { display: flex; align-items: center; padding: 13px 16px; border-bottom: 1px solid #eef1f6; cursor: pointer; }
.cmp-row.head { padding: 11px 16px; background: #fafbfd; font-size: 11.5px; font-weight: 500; color: #6b7480; cursor: default; }
.cmp-row:not(.head):hover { background: #f5f8fd; }

.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 20px; border: 1px solid #cfd5e0; }
.detail-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.dist-card { flex: 1.5; min-width: 440px; background: #fff; border: 1px solid #e3e7ee; border-radius: 8px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(20, 30, 60, .04); }
.stack { display: flex; height: 20px; border-radius: 4px; overflow: hidden; background: #eef1f6; }
.legend { display: flex; gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef1f6; font-size: 11.5px; color: #6b7480; }
.legend span { display: flex; align-items: center; gap: 5px; }
.lg { width: 11px; height: 11px; border-radius: 2px; }

.grade-btns { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.gbtn { cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 7px; border: 1px solid #cfd5e0; }

/* ---- tab B ---- */
.b-grid { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.b-grid2 { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.b-grid2 > .card { flex: 1; min-width: 340px; }
.b-q1 { flex: 1.3; min-width: 380px; }
.b-nps { flex: 1; min-width: 300px; }
.big-num { font-size: 30px; font-weight: 700; color: #16357c; font-family: 'JetBrains Mono', monospace; }
.mid-num { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.num-lbl { font-size: 12px; color: #6b7480; margin-left: 5px; }
.seg-legend { display: flex; justify-content: space-between; font-size: 11px; color: #9aa3b2; }
.seg-legend2 { display: flex; justify-content: space-between; font-size: 10.5px; color: #9aa3b2; }
.nps-chart { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-bottom: 8px; }
.nps-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.nps-axis { display: flex; justify-content: space-between; font-size: 10px; color: #bcc3cf; margin-bottom: 12px; }
.nps-legend { display: flex; gap: 10px; font-size: 11.5px; }
.nps-legend span { display: flex; align-items: center; gap: 5px; }
.lg2 { width: 9px; height: 9px; border-radius: 2px; }
.rbar { flex: 1; height: 14px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.free-item { font-size: 13px; color: #3a4252; line-height: 1.6; padding: 10px 14px; background: #fafbfd; border: 1px solid #eef1f6; border-radius: 6px; margin-bottom: 8px; }
.free-row { margin-bottom: 12px; }
.free-img { display: block; max-width: 100%; max-height: 220px; border: 1px solid #e2e7ef; border-radius: 6px; background: #fff; margin-bottom: 6px; }

/* ---- toast ---- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1f2733; color: #fff; font-size: 13px; padding: 13px 22px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); z-index: 100; }

/* ---- review ---- */
.review-card { margin-bottom: 14px; }
.review-card.acked { opacity: .72; }
.review-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.review-image-wrap { display: flex; justify-content: flex-end; }
.review-image-stack { width: 360px; display: flex; flex-direction: column; gap: 10px; }
.review-image-entry { margin: 0; }
.review-thumb-entry figcaption { margin: 0 0 4px; color: #6b7480; font-size: 11.5px; font-weight: 600; }
.review-thumb { display: block; width: 100%; max-height: 170px; object-fit: contain; }
.review-img { max-width: 360px; max-height: 280px; border: 1px solid #e2e7ef; border-radius: 6px; background: #fafbfd; cursor: zoom-in; transition: border-color .12s ease; }
.review-img:hover { border-color: #16357c; }
.review-img.ph { width: 360px; height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.6; color: #9aa3b2; font-size: 12px; cursor: default; }
.rv-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: #3a4252; }
.select.sm { padding: 6px 10px; font-size: 13px; min-width: 60px; }
.cls-row .select.sm { height: 34px; padding: 0 8px; min-width: 0; }
.btn-nav.sm, .btn-ghost.sm { padding: 7px 14px; font-size: 13px; }
.btn-ghost.danger { border-color: #e3c4c4; color: #bd1a20; }
.btn-ghost.danger:hover { background: #fff0f0; border-color: #d99b9e; color: #9f1f25; }
.review-delete-hint { margin: 10px 0 6px; color: #8a4b4f; font-size: 11.5px; line-height: 1.6; }
@media (max-width: 760px) { .review-grid { grid-template-columns: 1fr; } .review-image-wrap { justify-content: flex-start; } .review-image-stack { width: 100%; } }

/* ---- flag badges（誰でも一目で何のエラーか分かる表示） ---- */
.flag-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.flag-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.flag-badge .flag-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 10px; line-height: 1; color: #fff; }
.flag-badge.error { background: #fdeceb; color: #bd1a20; border-color: #f3c4c2; }
.flag-badge.error .flag-icon { background: #bd1a20; }
.flag-badge.warn { background: #fef0d8; color: #a4751a; border-color: #f1dcb0; }
.flag-badge.warn .flag-icon { background: #a4751a; }
.flag-badge.info { background: #e6eefb; color: #16357c; border-color: #c6d5f2; }
.flag-badge.info .flag-icon { background: #16357c; }
.ack-tag { font-size: 12px; margin-left: 2px; }
.ack-tag.done { color: #2f7a3a; }
.ack-tag.pending { color: #a4751a; }

/* ---- 該当ページ画像の拡大オーバーレイ ---- */
.img-zoom-overlay { position: fixed; inset: 0; background: rgba(15, 20, 28, .82); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; padding: 24px; }
.img-zoom-overlay img { max-width: 92vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #fff; }
.img-zoom-close { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.img-zoom-close:hover { background: rgba(255, 255, 255, .3); }

/* ---- login ---- */
.login-wrap { display: flex; justify-content: center; padding-top: 60px; }
.login-card { width: 360px; max-width: 92vw; }
.login-input { width: 100%; box-sizing: border-box; font-size: 15px; padding: 12px 14px; border: 1px solid #cfd5e0; border-radius: 8px; outline: none; }
.login-input:focus { border-color: #16357c; }

/* ---- responsive: モバイル幅で横スクロールを防ぐ ---- */
@media (max-width: 768px) {
  main { padding: 20px 16px 56px; }
  /* 固定 min-width が viewport を超えないよう解除し、カードを縦積みにする */
  .dist-card, .b-grid2 > .card, .b-q1, .b-nps { min-width: 0; flex-basis: 100%; }
  /* 画像プレースホルダーの固定幅をコンテナ内に収める */
  .review-img.ph { width: 100%; box-sizing: border-box; }
  .review-img { max-width: 100%; }
  .dashboard-toolbar { align-items: stretch; }
  .dashboard-division-control { width: 100%; }
  .division-choice { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  main { padding: 16px 12px 48px; }
}

/* ============================================================
   マーク済みPDF機能（v2ウィザード）
   既存トークン（色hex・カード・ボタン寸法）を踏襲。新規追加のみ、既存クラスは変更しない。
   ============================================================ */

/* ---- 5段階ステッパー ---- */
.stepper { list-style: none; }
.stepper-mobile { display: none; font-size: 13px; font-weight: 700; color: #16357c; padding: 10px 4px; margin-bottom: 12px; }
.step[aria-disabled="true"] { cursor: default; }
.step[aria-disabled="true"] .step-mark { opacity: .85; }
.step-lb { font-size: 12px; font-weight: 500; white-space: nowrap; }
.step.done .step-mark { background: #16357c; color: #fff; border: 1px solid #16357c; opacity: 1; }
.step.done .step-lb { color: #1f2733; }
.step.cur .step-mark { background: #16357c; color: #fff; border: 1px solid #16357c; box-shadow: 0 0 0 3px rgba(22, 53, 124, .15); opacity: 1; }
.step.cur .step-lb { color: #16357c; font-weight: 700; }
.step.todo .step-mark { background: #fff; border: 1px solid #d8dde6; color: #bcc3cf; }
.step.todo .step-lb { color: #bcc3cf; }
.step.lock .step-mark { background: #eef1f6; border: 1px solid #d8dde6; color: #9aa3b2; font-size: 12px; opacity: 1; }
.step.lock .step-lb { color: #9aa3b2; }
.step-sep.on { background: #16357c; }
.step[tabindex="0"]:focus-visible { outline: 2px solid #16357c; outline-offset: 4px; border-radius: 4px; }

/* ---- マトリクスで確定した集計対象（全Step共通・変更不可） ---- */
.wf-target {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 16px; border: 1px solid #dfe5ef; border-radius: 8px;
  background: #f7f9fc; color: #354158;
}
.wf-target:focus { outline: 3px solid rgba(22, 53, 124, .2); outline-offset: 2px; }
.wf-target-title { color: #6b7480; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.wf-target-item { display: inline-flex; align-items: baseline; gap: 7px; }
.wf-target-item > span { color: #7b8494; font-size: 11px; }
.wf-target-item > strong { color: #1f2733; font-size: 13px; }
.wf-target-lock { margin-left: auto; color: #7b8494; font-size: 11px; white-space: nowrap; }

/* ---- 入力項目・API応答のエラーと非ブロッキング警告 ---- */
.field-err { color: #bd1a20; font-size: 12px; margin-top: 4px; }
.field-warn { color: #a4751a; font-size: 12px; margin-top: 4px; }
.alert-error {
  display: flex; align-items: flex-start; gap: 8px; background: #fdeceb; border: 1px solid #f3c4c2;
  color: #bd1a20; font-size: 13px; padding: 12px 14px; border-radius: 6px; margin: 0 0 16px;
}
.alert-warn {
  display: flex; align-items: flex-start; gap: 8px; background: #fef0d8; border: 1px solid #f1dcb0;
  color: #a4751a; font-size: 13px; padding: 12px 14px; border-radius: 6px; margin: 0 0 16px;
}
.empty-state { text-align: center; color: #9aa3b2; font-size: 13.5px; padding: 40px 20px; border: 1px dashed #d8dde6; border-radius: 8px; }

/* ---- Step3: 1クラスを1行で編集するクラス設定テーブル ---- */
.cls-fieldset { border: none; margin: 0; padding: 0; min-inline-size: auto; }
.cls-table { border: 1px solid #e3e7ee; border-radius: 8px; }
.cls-head {
  display: flex; align-items: center; padding: 10px 14px; background: #fafbfd; border-bottom: 1px solid #e3e7ee;
  border-radius: 8px 8px 0 0; font-size: 11.5px; font-weight: 500; color: #6b7480; font-family: 'JetBrains Mono', monospace;
}
.cls-row { display: flex; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid #eef1f6; }
.col-grade { width: 96px; }
.col-grade .select { width: 82px; }
.col-name { width: 150px; }
.col-name .inp { width: 132px; height: 34px; }
.col-mark { width: 70px; text-align: center; }
.col-mark .select { width: 56px; padding-right: 22px; }
.col-teachers { flex: 1; padding-left: 12px; min-width: 0; }
.col-del { width: 30px; text-align: right; }
.cls-addrow { padding: 11px 14px; }
.name-preview { font-size: 10.5px; color: #9aa3b2; margin-top: 3px; }
.tchips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tchip {
  display: inline-flex; align-items: center; gap: 6px; background: #eef2fb; border: 1px solid #cdd9f2;
  border-radius: 7px; padding: 4px 6px 4px 8px; font-size: 12.5px; cursor: grab;
}
.tchip:focus { outline: 2px solid #16357c; outline-offset: 1px; }
.tchip .ord {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  background: #16357c; color: #fff; font: 700 10px 'JetBrains Mono', monospace; border-radius: 4px; flex: none;
}
.tchip .hd { color: #bcc3cf; cursor: grab; font-size: 12px; letter-spacing: -2px; margin-left: 2px; }
.tchip .nm { font-weight: 500; color: #1f2733; white-space: nowrap; }
.tchip .rm { border: none; background: none; color: #bcc3cf; cursor: pointer; font-size: 12px; padding: 1px 2px; line-height: 1; }
.tchip .rm:hover { color: #bd1a20; }
.addt-wrap { position: relative; display: inline-flex; }
.addt {
  display: inline-flex; align-items: center; gap: 4px; border: 1px dashed #c2cad7; background: #fff; color: #475063;
  border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.addt:hover:not(:disabled) { border-color: #16357c; color: #16357c; }
.addt:disabled { opacity: .45; cursor: not-allowed; }
.addt-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff; border: 1px solid #d8dde6;
  border-radius: 7px; box-shadow: 0 6px 18px rgba(20, 30, 60, .14); min-width: 170px; max-height: 220px; overflow-y: auto; padding: 4px;
}
.addt-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none; color: #1f2733;
  font-size: 12.5px; font-family: 'Noto Sans JP', sans-serif; padding: 7px 10px; border-radius: 5px; cursor: pointer;
}
.addt-menu button:hover { background: #eef2fb; color: #16357c; }
.note-i {
  display: flex; align-items: flex-start; gap: 8px; background: #fef0d8; border: 1px solid #f1dcb0;
  color: #a4751a; font-size: 12px; padding: 9px 12px; border-radius: 6px; margin: 0 0 14px;
}
.note-i .ic {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; background: #a4751a; color: #fff; font-size: 10px; flex: none; margin-top: 1px;
}

/* ---- Step4: 生成予定一覧 ---- */
.gd { display: inline-flex; align-items: center; justify-content: center; font: 700 11px 'JetBrains Mono', monospace; background: #16357c; color: #fff; border-radius: 5px; padding: 3px 8px; flex: none; }
.dlist { border: 1px solid #e3e7ee; border-radius: 8px; overflow: hidden; background: #fff; }
.dl-h { display: flex; padding: 10px 16px; background: #fafbfd; border-bottom: 1px solid #e3e7ee; font: 500 11.5px 'JetBrains Mono', monospace; color: #6b7480; align-items: center; }
.dl-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eef1f6; }
.fmain { font-size: 13.5px; font-weight: 600; color: #1f2733; }
.fname { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #9aa3b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; margin-top: 3px; }
.tlist { font-size: 12px; color: #475063; line-height: 1.6; }
.tlist b { font: 700 10px 'JetBrains Mono', monospace; color: #16357c; margin-right: 2px; }
.btn-dl { border: 1px solid #cfd5e0; background: #fff; color: #16357c; font-weight: 600; font-size: 12px; padding: 7px 13px; border-radius: 6px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.btn-dl:hover { background: #f2f5fb; }
.btn-dl:disabled { opacity: .55; cursor: not-allowed; }
.btn-outline.dgr { color: #bd1a20; border-color: #f0c4c2; }
.btn-outline.dgr:hover { background: #fdeceb; }

/* ---- Step5: 回収PDFのアップロードと読み取り状況 ---- */
.wf-step4 .lockbar {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 9px 12px;
  border: 1px solid #dfe4ec; border-radius: 6px; background: #eef1f6; color: #475063;
  font-size: 12px; line-height: 1.65;
}
.wf-step4 .lockbar .ic { flex: none; margin-top: 1px; }
.wf-step4 .lockbar strong { color: #354158; font-weight: 700; }
.wf-step4 .dropzone { padding: 30px; }
.wf-step4 .dropzone:focus-visible { outline: 3px solid rgba(22, 53, 124, .28); outline-offset: 2px; border-color: #16357c; }
.wf-file-section { margin-top: 20px; }
.wf-file-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;
  color: #1f2733; font-size: 13px; font-weight: 600;
}
.wf-file-count { color: #6b7480; font-weight: 400; }
.wf-readonly-label {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 9px;
  border: 1px solid #dfe4ec; border-radius: 999px; background: #eef1f6; color: #667085;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.wf-file-list { overflow: hidden; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; }
.wf-step4 .wf-file-row { align-items: flex-start; gap: 12px; padding: 12px 14px; }
.wf-step4 .wf-file-row:last-child { border-bottom: 0; }
.wf-step4 .f-thumb {
  width: 32px; height: 40px; flex: none; margin-top: 1px; font-size: 8px;
}
.wf-step4 .f-body { flex: 1; min-width: 0; }
.wf-step4 .f-name { color: #1f2733; font-size: 13px; font-weight: 500; line-height: 1.45; word-break: break-all; }
.wf-step4 .f-meta { margin-top: 3px; color: #9aa3b2; font: 11px 'JetBrains Mono', monospace; }
.wf-step4 .fstat {
  display: inline-flex; align-items: center; gap: 5px; flex: none; color: #667085;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.wf-step4 .fstat.is-complete { color: #2f7a3a; }
.wf-step4 .fstat.is-error { color: #bd1a20; }
.wf-file-row--readonly { background: #fafbfd; }
.wf-file-row--readonly .f-name { color: #475063; }
.wf-step4 .fstat.is-readonly { color: #7b8494; }
.wf-step4 .x-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 回収待ち状態を示すアンバー系バッジ ---- */
.badge--waiting { background: #fef3c7; color: #b45309; }
.badge--waiting .dot { background: #b45309; }
.badge.info { background: #e6eefb; color: #16357c; }
.badge.warn { background: #fef0d8; color: #a4751a; }
.badge.err { background: #fdeceb; color: #bd1a20; }
.badge.ok { background: #e7f3ea; color: #2f7a3a; }

/* ---- 共通Dialog（role=dialogとキーボードfocus trapを前提とする） ---- */
.wf-dialog:focus { outline: none; }

/* ---- モバイル対応（幅375px。表→カード切替、横スクロール防止） ---- */
@media (max-width: 480px) {
  .stepper { display: none; }
  .stepper-mobile { display: block; }
  .t-row { flex-wrap: wrap; }
  .t-row.head { display: none; }
  /* Step3: 狭い画面では行をカード化し、基本項目の下へ担当先生チップを配置する。 */
  .cls-head { display: none; }
  .cls-row { flex-wrap: wrap; gap: 10px; position: relative; padding: 14px 34px 14px 14px; }
  .col-grade, .col-name, .col-mark { width: auto; text-align: left; }
  .col-name { flex: 1; min-width: 110px; }
  .col-name .inp { width: 100%; }
  .col-teachers { flex: 0 0 100%; padding-left: 0; }
  .col-del { position: absolute; top: 6px; right: 6px; width: auto; }
  .row.head.mono { display: none; }
  .dl-h { display: none; }
  .dl-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dl-row > div { width: 100% !important; text-align: left !important; }
  .wf-target { align-items: flex-start; gap: 8px 16px; }
  .wf-target-title { flex: 0 0 100%; }
  .wf-target-lock { margin-left: 0; }
  .wf-step4 .dropzone { padding: 28px 14px; }
  .wf-file-heading { align-items: flex-start; flex-wrap: wrap; }
  .wf-step4 .wf-file-row { flex-wrap: wrap; }
  .wf-step4 .f-body { min-width: calc(100% - 48px); }
  .wf-step4 .wf-file-row > .fstat { margin-left: 44px; }
  .wf-step4 .wf-file-row > .x-btn { margin-left: auto; }
}