/* 簡素なスタイル。受検画面はスマホでも崩れないことだけを担保する。
   ★診断レポート（report.html / disclosure.html / report_pending.html）の見た目は
     `report.css` が後から上書きする。バー幅クラス `.bar i.wNN` はここが正本のまま。 */
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #1c1c1c; background: #f5f6f8; line-height: 1.7;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 16px 14px 64px; }
h1 { font-size: 1.35rem; margin: 18px 0 8px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
a { color: #1a5fb4; }
.lead { color: #444; }
.muted { color: #6a6a6a; }
.small { font-size: 0.85rem; }
.hidden { display: none; }

.card {
  background: #fff; border: 1px solid #e2e4e8; border-radius: 10px;
  padding: 16px; margin: 14px 0;
}
.card.ok { border-color: #2e7d32; background: #f2fbf3; }
.alert { background: #fff4f4; border: 1px solid #e0a0a0; border-radius: 8px; padding: 10px 12px; }
.notice { background: #fffbe8; border: 1px solid #e3d089; border-radius: 8px; padding: 10px 12px; }
.placeholder { background: #f0f2f5; border: 1px dashed #b6bcc6; border-radius: 8px; padding: 14px; text-align: center; color: #666; }
.token { font-family: ui-monospace, Menlo, monospace; word-break: break-all; background: #f0f2f5; padding: 8px; border-radius: 6px; }

button { font: inherit; cursor: pointer; border-radius: 8px; padding: 12px 18px; border: 1px solid #c3c7cf; background: #fff; }
button.primary { background: #1a5fb4; color: #fff; border-color: #1a5fb4; min-width: 140px; }
button.primary:disabled { background: #b9c3d1; border-color: #b9c3d1; cursor: not-allowed; }
button.ghost { background: transparent; }

label { display: block; margin: 10px 0; }
label.check { display: flex; align-items: flex-start; gap: 8px; }
input[type=text], input[type=password], input:not([type]) {
  width: 100%; padding: 10px; font: inherit; border: 1px solid #c3c7cf; border-radius: 8px;
}
.grid { display: grid; gap: 4px; }

/* 受検画面 */
.exam-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  position: sticky; top: 0; background: #f5f6f8; padding: 10px 0; border-bottom: 1px solid #e2e4e8; z-index: 5; }
.exam-head .sec { font-weight: 700; }
.exam-head .step { display: block; font-size: .78rem; font-weight: 400; color: #5a5f66; }
.exam-head .sec-name { display: block; }
.timer-note { margin: 4px 0 0; font-size: .9rem; color: #5a5f66; min-height: 1.2em; }
.timer-note.warn { color: #c62828; font-weight: 700; }
.timer { font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 700; }
.timer.warn { color: #c62828; }
.progress { height: 5px; background: #e2e4e8; border-radius: 3px; overflow: hidden; margin: 8px 0; }
.progress span { display: block; height: 100%; background: #1a5fb4; width: 0; transition: width .2s; }
.passage { background: #fafbfc; border-left: 3px solid #c3c7cf; padding: 10px 12px; margin-bottom: 12px; white-space: pre-wrap; }
.qtext { font-weight: 600; margin-bottom: 12px; }
.choices { display: grid; gap: 8px; }
.choice { display: block; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid #c3c7cf;
  border-radius: 10px; background: #fff; }
.choice.sel { border-color: #1a5fb4; background: #eaf1fb; box-shadow: inset 0 0 0 1px #1a5fb4; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
/* C5 の設問。左右を別要素にして「折り返しで右列の末尾だけ次行へ落ちる」のを
   構造的に止める（検分 高-1）。字面の大きさは幅に追従させ、折り返さない。 */
.speed-q { display: flex; justify-content: center; align-items: baseline;
  gap: 1.4em; flex-wrap: nowrap; text-align: center; padding: 26px 4px;
  font-size: clamp(1.15rem, 6vw, 1.8rem); }
.speed-q .sq-side, .speed-q .sq-single {
  white-space: nowrap; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.speed-q .sq-single { letter-spacing: .08em; }
.speed-choices .choice .kbd { display: none; margin-left: .4em; font-size: .85em; color: #666; }
@media (pointer: fine) { .speed-choices .choice .kbd { display: inline; } }
.forms .ex { font-family: ui-monospace, Menlo, monospace; background: #f0f2f5;
  padding: 1px 6px; border-radius: 4px; }
.speed-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.speed-choices .choice { text-align: center; font-size: 1.1rem; padding: 20px 6px; }

/* 管理・レポート */
.admin-head { display: flex; justify-content: space-between; align-items: center; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e2e4e8; vertical-align: top; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e2e4e8; font-size: 0.8rem; }
.badge.done { background: #d7f0d9; }
.badge.prog { background: #fdeecf; }
.badge.warn-badge { background: #ffe0e0; color: #8b1a1a; }

.report { background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; padding: 20px; }
.rep-head .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: #555; }
.block { border-top: 1px solid #e2e4e8; padding-top: 14px; margin-top: 18px; }
.reliability { border: 2px solid #c3c7cf; border-radius: 10px; padding: 12px; }
.reliability.lv-高 { border-color: #2e7d32; background: #f3fbf4; }
.reliability.lv-中 { border-color: #e0a800; background: #fffbe8; }
.reliability.lv-低 { border-color: #c62828; background: #fff4f4; }
.reliability .lv { font-size: 1.05rem; }
.bar-row { display: grid; grid-template-columns: 12em 2.4em 1fr; gap: 6px 8px; align-items: center; margin: 6px 0; }
.bar-row .bb { grid-column: 1 / -1; font-size: 0.85rem; color: #555; }
.bar { background: #eceef1; border-radius: 4px; height: 14px; position: relative; }
/* ★偏差値バーの幅は **クラス**で与える（style属性を使わない）。
   本番の CSP `default-src 'self'` は inline の style 属性も遮断するため、
   style="width:..%" だと本番でだけバーが全部消える（検分 O-02）。 */
.bar i { display: block; height: 100%; background: #1a5fb4; border-radius: 4px; width: 0; }
/* 50（偏差値の基準線）の位置に縦線（監査 F-88） */
.bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: #9aa0a8; }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 0; }
.bar i.w0 { width: 0%; }
.bar i.w1 { width: 1%; }
.bar i.w2 { width: 2%; }
.bar i.w3 { width: 3%; }
.bar i.w4 { width: 4%; }
.bar i.w5 { width: 5%; }
.bar i.w6 { width: 6%; }
.bar i.w7 { width: 7%; }
.bar i.w8 { width: 8%; }
.bar i.w9 { width: 9%; }
.bar i.w10 { width: 10%; }
.bar i.w11 { width: 11%; }
.bar i.w12 { width: 12%; }
.bar i.w13 { width: 13%; }
.bar i.w14 { width: 14%; }
.bar i.w15 { width: 15%; }
.bar i.w16 { width: 16%; }
.bar i.w17 { width: 17%; }
.bar i.w18 { width: 18%; }
.bar i.w19 { width: 19%; }
.bar i.w20 { width: 20%; }
.bar i.w21 { width: 21%; }
.bar i.w22 { width: 22%; }
.bar i.w23 { width: 23%; }
.bar i.w24 { width: 24%; }
.bar i.w25 { width: 25%; }
.bar i.w26 { width: 26%; }
.bar i.w27 { width: 27%; }
.bar i.w28 { width: 28%; }
.bar i.w29 { width: 29%; }
.bar i.w30 { width: 30%; }
.bar i.w31 { width: 31%; }
.bar i.w32 { width: 32%; }
.bar i.w33 { width: 33%; }
.bar i.w34 { width: 34%; }
.bar i.w35 { width: 35%; }
.bar i.w36 { width: 36%; }
.bar i.w37 { width: 37%; }
.bar i.w38 { width: 38%; }
.bar i.w39 { width: 39%; }
.bar i.w40 { width: 40%; }
.bar i.w41 { width: 41%; }
.bar i.w42 { width: 42%; }
.bar i.w43 { width: 43%; }
.bar i.w44 { width: 44%; }
.bar i.w45 { width: 45%; }
.bar i.w46 { width: 46%; }
.bar i.w47 { width: 47%; }
.bar i.w48 { width: 48%; }
.bar i.w49 { width: 49%; }
.bar i.w50 { width: 50%; }
.bar i.w51 { width: 51%; }
.bar i.w52 { width: 52%; }
.bar i.w53 { width: 53%; }
.bar i.w54 { width: 54%; }
.bar i.w55 { width: 55%; }
.bar i.w56 { width: 56%; }
.bar i.w57 { width: 57%; }
.bar i.w58 { width: 58%; }
.bar i.w59 { width: 59%; }
.bar i.w60 { width: 60%; }
.bar i.w61 { width: 61%; }
.bar i.w62 { width: 62%; }
.bar i.w63 { width: 63%; }
.bar i.w64 { width: 64%; }
.bar i.w65 { width: 65%; }
.bar i.w66 { width: 66%; }
.bar i.w67 { width: 67%; }
.bar i.w68 { width: 68%; }
.bar i.w69 { width: 69%; }
.bar i.w70 { width: 70%; }
.bar i.w71 { width: 71%; }
.bar i.w72 { width: 72%; }
.bar i.w73 { width: 73%; }
.bar i.w74 { width: 74%; }
.bar i.w75 { width: 75%; }
.bar i.w76 { width: 76%; }
.bar i.w77 { width: 77%; }
.bar i.w78 { width: 78%; }
.bar i.w79 { width: 79%; }
.bar i.w80 { width: 80%; }
.bar i.w81 { width: 81%; }
.bar i.w82 { width: 82%; }
.bar i.w83 { width: 83%; }
.bar i.w84 { width: 84%; }
.bar i.w85 { width: 85%; }
.bar i.w86 { width: 86%; }
.bar i.w87 { width: 87%; }
.bar i.w88 { width: 88%; }
.bar i.w89 { width: 89%; }
.bar i.w90 { width: 90%; }
.bar i.w91 { width: 91%; }
.bar i.w92 { width: 92%; }
.bar i.w93 { width: 93%; }
.bar i.w94 { width: 94%; }
.bar i.w95 { width: 95%; }
.bar i.w96 { width: 96%; }
.bar i.w97 { width: 97%; }
.bar i.w98 { width: 98%; }
.bar i.w99 { width: 99%; }
.bar i.w100 { width: 100%; }
.bv { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.warn { color: #c62828; }
.giq { font-size: 1.05rem; }
.notes p { margin: 6px 0; font-size: 0.92rem; }
.alert-item { border-left: 4px solid #e0a800; background: #fffdf5; padding: 8px 12px; margin: 10px 0; }
.alert-item.sev-要確認 { border-left-color: #c62828; background: #fff5f5; }
.rep-foot { border-top: 2px solid #1c1c1c; margin-top: 22px; padding-top: 12px; }

@media (max-width: 520px) {
  .bar-row { grid-template-columns: 1fr 2.4em; }
  .bar-row .bar { grid-column: 1 / -1; }
  .exam-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media print {
  @page { size: A4; margin: 16mm; }   /* report.css と同じ余白（上下左右16mm） */
  body { background: #fff; }
  .no-print { display: none; }
  .report { border: none; }
  /* 既定の print-color-adjust: economy だと背景色が印刷されず、
     設計 §8-3-2 の「偏差値は必ずバー表示と併記」が紙で破れる（検分 中-2）。 */
  .bar, .bar i, .reliability, .alert-item, .badge, .notice, .alert {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* ★ `.block { break-inside: avoid; }` は外した（2026-09-03）。
     節（=①〜⑨のカード）は1枚に収まらない長さになりうるので、丸ごと次の紙へ送ると
     手前の紙が半分白紙のまま残る（実測: 1ペルソナ14ページ・各紙の下半分が空白）。
     「途中で切ってはいけない」のはカード・バー行・表の行といった小さな塊なので、
     その指定は report.css 側に移した。 */
}

/* --- SPI型レポート（面接官向け4面構成・01_設計/03_レポート設計_SPI型.md §9-1） ---
   CSP `default-src 'self'` 下で描くため、インライン style は使わず全てクラスで指定する
   （バーの幅は既存の .bar i.wNN 方式を踏襲）。 */
.sheet { margin: 18px 0 26px; }
.sheet-label {
  margin: 0 0 8px; padding: 3px 10px; display: inline-block;
  background: #eef2f7; border-left: 4px solid #33506e;
  font-size: 0.82rem; letter-spacing: .04em; color: #33506e;
}
.persona { margin: 10px 0 14px; }
.persona h3 { margin: 0 0 4px; font-size: 0.98rem; }
.persona p { margin: 0; line-height: 1.75; }
.cp { border-left: 4px solid #33506e; background: #f7f9fc; padding: 8px 12px; margin: 10px 0; }
.cp .title { font-weight: 700; }
.cp ol { margin: 6px 0 6px 1.2em; }
.lv-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.lv-table th, .lv-table td {
  border-bottom: 1px solid #dfe3e8; padding: 5px 6px; text-align: left; vertical-align: top;
}
.lv-table th { background: #f2f4f7; font-size: 0.85rem; }
.lv-table td:nth-child(2) { white-space: nowrap; }
.bar-row.scale .bl { font-weight: 500; }
details.research { margin-top: 16px; }
details.research summary { cursor: pointer; font-weight: 700; }
@media print {
  .sheet { break-after: page; }
  .sheet:last-of-type { break-after: auto; }
  /* 詳細（因子別の偏差値）は長い。丸ごと1枚に押し込まず、途中で改ページしてよい
     （中の1行ずつを切らない指定は report.css 側）。 */
  details.research > summary { list-style: none; }
}

/* --- 能力検査 v2（DESIGN-09 §7-2 M1〜M4）------------------------------- */
/* 表は横スクロールを「自分の中だけ」で受ける（本文を横に流さない） */
.table-wrap { overflow-x: auto; margin: .6rem 0; }
.stim-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.stim-table th, .stim-table td { border: 1px solid #ccd; padding: .35rem .5rem; text-align: left; }
.stim-table th { background: #f2f4f8; }
.sjt-row { border-bottom: 1px solid #e3e6ee; padding: .5rem 0; }
.sjt-text { margin-bottom: .35rem; }
.sjt-cols { display: flex; gap: .5rem; flex-wrap: wrap; }
/* タップ対象は最小 44×44px（M3） */
.sjt-pick { flex: 1 1 45%; min-height: 44px; }
.choice.sel { outline: 2px solid #2b5; }
button.ghost { min-height: 44px; background: none; border: 1px solid #99a; border-radius: 6px; }

/* 活躍度ラベル画面のタップ域（敵対QA④ B-06・375px 実測で 13〜23px だった）。
   上司がスマホで5項目を連打する画面なので、指1本で確実に押せる 44px を確保する。
   見た目（色・並び）は変えない＝当たり判定だけを広げる。 */
.labels-page label.check { min-height: 44px; align-items: center; padding: 4px 0; }
.labels-page label.check input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
.labels-page select,
.labels-page input[type="date"] { min-height: 44px; }
.labels-page a { display: inline-block; min-height: 44px; line-height: 44px; }
.labels-page .admin-head a { line-height: 44px; }

/* メール送信設定（/platform/mail-settings・2026-09-05）。
   CSP `default-src 'self'` のため inline style は使わない＝ここに置く。 */
.notice.ok { background: #f2fbf3; border-color: #9dc6a0; }
.notice.ng { background: #fff4f4; border-color: #e0a0a0; }
.mail-settings input[type=email], .mail-settings select {
  width: 100%; max-width: 100%; padding: 10px; font: inherit;
  border: 1px solid #c3c7cf; border-radius: 8px; background: #fff; box-sizing: border-box;
}
.mail-settings label { font-weight: 600; margin: 14px 0 4px; }
.mail-settings label.check { font-weight: 400; margin-top: 8px; }
.mail-settings p.small { margin: 4px 0 0; }
.mail-settings button { margin-top: 14px; min-height: 44px; }
@media (max-width: 520px) {
  .mail-settings input, .mail-settings select, .mail-settings button { width: 100%; }
}

/* パスワード変更（/admin/password・/platform/password・2026-09-06）。
   CSP `default-src 'self'` のため inline style は使わない＝ここに置く。 */
.password-form label { font-weight: 600; margin: 14px 0 4px; }
.password-form input[type=password] { max-width: 100%; box-sizing: border-box;
  min-height: 44px; }
.password-form button { margin-top: 14px; min-height: 44px; }
@media (max-width: 520px) {
  .password-form input, .password-form button { width: 100%; }
}