/* =============================================
   語音検査アプリ - メインスタイル
   ============================================= */

/* ---- リセット・基本 ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --clr-bg:         #f0f4f8;
  --clr-surface:    #ffffff;
  --clr-primary:    #1e3a5f;
  --clr-primary-lt: #2d5f99;
  --clr-accent:     #e67e22;
  --clr-success:    #27ae60;
  --clr-danger:     #e74c3c;
  --clr-warn:       #f39c12;
  --clr-text:       #1a1a2e;
  --clr-muted:      #6b7280;
  --clr-border:     #d1d5db;
  --clr-exam-bg:    #1e3a5f;   /* 検査者エリア背景（濃紺） */
  --clr-exam-text:  #f0f4f8;
  --clr-patient-bg: #ffffff;   /* 患者エリア背景（白） */
  --radius:         12px;
  --shadow:         0 4px 16px rgba(0,0,0,.12);
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- 画面切り替え ---- */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; flex-direction: column; }


/* =============================================
   ホーム画面
   ============================================= */
#screen-home {
  align-items: center;
  justify-content: center;
  background: var(--clr-primary);
  gap: 32px;
  padding: 40px 24px;
}
#screen-home .app-title {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
#screen-home .app-subtitle {
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  text-align: center;
}
#screen-home .btn-home {
  width: 100%;
  max-width: 320px;
  padding: 18px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, opacity .1s;
}
#screen-home .btn-home:active { transform: scale(.97); opacity: .85; }
.btn-new-test  { background: #fff;          color: var(--clr-primary); }
.btn-history   { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.4) !important; }


/* =============================================
   共通カードレイアウト（単画面）
   ============================================= */
.card-screen {
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px 40px;
  gap: 20px;
  background: var(--clr-bg);
}
.card {
  width: 100%;
  max-width: 480px;
  background: var(--clr-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--clr-border);
}
.card-subtitle {
  font-size: .85rem;
  color: var(--clr-muted);
  margin-bottom: 4px;
}

/* ---- フォーム要素 ---- */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label  { font-size: .9rem; font-weight: 600; color: var(--clr-text); }
.form-input  {
  border: 2px solid var(--clr-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 1.1rem;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.form-input:focus { border-color: var(--clr-primary-lt); }

/* 耳選択ラジオ */
.ear-select { display: flex; gap: 12px; }
.ear-btn {
  flex: 1;
  padding: 14px 8px;
  border: 2px solid var(--clr-border);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
}
.ear-btn.selected {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
  color: #fff;
}


/* =============================================
   汎用ボタン
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, opacity .2s;
  font-family: inherit;
}
.btn:active  { transform: scale(.96); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary  { background: var(--clr-primary);    color: #fff; }
.btn-success  { background: var(--clr-success);    color: #fff; }
.btn-danger   { background: var(--clr-danger);     color: #fff; }
.btn-warn     { background: var(--clr-warn);       color: #fff; }
.btn-neutral  { background: var(--clr-border);     color: var(--clr-text); }
.btn-outline  { background: transparent; border: 2px solid var(--clr-primary); color: var(--clr-primary); }
.btn-full     { width: 100%; }
.btn-lg       { padding: 18px 28px; font-size: 1.15rem; }
.btn-sm       { padding: 8px 14px; font-size: .85rem; }


/* =============================================
   分割画面（検査中）
   ============================================= */
#screen-srt-test,
#screen-wrs-test {
  display: none;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
#screen-srt-test.active,
#screen-wrs-test.active { display: flex; }

/* 検査者エリア（上半分・180度回転） */
.exam-area {
  flex: 1;
  min-height: 0;
  background: var(--clr-exam-bg);
  color: var(--clr-exam-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 14px 8px;
  transform: rotate(180deg);
  border-bottom: 3px solid #000;
  overflow-y: overlay;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* 患者エリア（下半分・通常） */
.patient-area {
  flex: 1;
  min-height: 0;
  background: var(--clr-patient-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  overflow: hidden;
}

/* ---- 検査者エリア内部 ---- */
.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}
.exam-title   { font-size: .9rem; font-weight: 700; opacity: .8; }
.exam-counter { font-size: .9rem; font-weight: 700; background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 20px; }

/* 答え比較表示（大） */
.answer-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}
.answer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.answer-label { font-size: .7rem; opacity: .7; }
.answer-char  {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.3);
}
.answer-char.correct-char { background: rgba(39,174,96,.25); border-color: #27ae60; }
.answer-char.patient-char { background: rgba(255,255,255,.1); }
.answer-char.match   { border-color: #27ae60; background: rgba(39,174,96,.3); }
.answer-char.nomatch { border-color: #e74c3c; background: rgba(231,76,60,.3); }
.answer-sep { font-size: 1.5rem; opacity: .5; }

/* 判定バッジ */
.judge-badge {
  font-size: 1.4rem; font-weight: 700;
  padding: 6px 20px; border-radius: 24px;
}
.judge-ok  { background: #27ae60; color: #fff; }
.judge-ng  { background: #e74c3c; color: #fff; }

/* 操作ボタン行（検査者） */
.exam-actions { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.exam-actions .btn { flex: 1; padding: 12px 8px; font-size: .95rem; }

/* 文字パレット（修正用） */
.char-palette {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.char-palette.digits-palette { grid-template-columns: repeat(10, 1fr); }
.char-palette.kana-palette   { grid-template-columns: repeat(10, 1fr); }
.palette-btn {
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.palette-btn:active, .palette-btn.selected { background: var(--clr-accent); border-color: var(--clr-accent); }
.palette-visible  { display: grid; }
.palette-hidden   { display: none; }

/* ---- 患者エリア内部 ---- */
.patient-prompt {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-muted);
  margin-bottom: 10px;
  text-align: center;
}
#drawing-canvas {
  border: 3px solid var(--clr-border);
  border-radius: 16px;
  background: #fff;
  touch-action: none;
  display: block;
}
.patient-actions { display: flex; gap: 12px; margin-top: 12px; width: 100%; justify-content: center; }
.patient-actions .btn { min-width: 120px; }


/* =============================================
   SRT 臨床記録フォームグリッド
   ============================================= */
.srt-grid-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  flex-shrink: 0;
}
.srt-grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 280px;
  font-size: .9rem;
}
.srt-grid th, .srt-grid td {
  border: 1px solid rgba(255,255,255,.2);
  text-align: center;
  padding: 5px 4px;
  min-width: 36px;
}
/* 臨床フォーム形式のセル */
.srt-db-header-row th,
.srt-score-row th {
  background: rgba(255,255,255,.08);
  font-weight: 700;
}
.srt-db-th    { font-size: .82rem; font-weight: 700; background: rgba(255,255,255,.1); }
.srt-row-th   { font-size: .75rem; color: rgba(255,255,255,.7); text-align: left; padding: 4px 8px; white-space: nowrap; min-width: 72px; }
.srt-form-cell {
  border: 1px solid rgba(255,255,255,.2);
  text-align: center;
  padding: 8px 2px;
  min-width: 38px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.srt-pending  { color: rgba(255,255,255,.15); }
.srt-current  { background: rgba(255,215,0,.3); color: #ffe; font-size: 1rem; }
.srt-correct  { background: rgba(39,174,96,.4); color: #a8f0c6; }
.srt-wrong    { background: rgba(231,76,60,.4); color: #f5a8a8; text-decoration: line-through; }
.srt-score-cell { font-weight: 700; background: rgba(255,255,255,.08); font-size: .88rem; }


/* =============================================
   WRS 臨床記録フォームグリッド
   ============================================= */
.wrs-grid {
  width: 100%;
  overflow-x: auto;
}
.wrs-form-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 280px;
}
.wrs-form-num-row th {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  padding: 2px 3px;
  text-align: center;
  font-weight: 600;
}
.wrs-form-char-row th {
  font-size: .92rem;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 3px 2px;
  text-align: center;
}
.wrs-form-ans-row { margin-top: 2px; }
.wrs-form-cell {
  border: 1px solid rgba(255,255,255,.25);
  text-align: center;
  padding: 7px 2px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  min-width: 26px;
}
.wrs-pending  { background: rgba(255,255,255,.04); color: rgba(255,255,255,.2); }
.wrs-current  { background: rgba(255,215,0,.3); color: #ffe; }
.wrs-correct  { background: rgba(39,174,96,.4); color: #a8f0c6; }
.wrs-wrong    { background: rgba(231,76,60,.4); color: #f5a8a8; }
/* 2グループ間の区切りスペース */
.wrs-form-table tbody + tbody tr:first-child th,
.wrs-form-table tbody + tbody tr:first-child td {
  border-top: 3px solid rgba(255,255,255,.3);
}
/* WRS結果画面（白背景）用 — 旧スタイルを残して後方互換 */
.wrs-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 6px;
  font-size: 1.1rem; font-weight: 700;
  background: rgba(255,255,255,.08);
  position: relative;
}
.wrs-cell.correct { background: rgba(39,174,96,.3); border-color: #27ae60; }
.wrs-cell.wrong   { background: rgba(231,76,60,.3);  border-color: #e74c3c; }
.wrs-cell.current { background: rgba(255,255,255,.3); border-color: #fff; }
.wrs-cell.pending { opacity: .4; }
.wrs-cell .cell-answer {
  position: absolute; bottom: 1px; right: 2px;
  font-size: .6rem; opacity: .8;
}


/* =============================================
   結果・履歴画面
   ============================================= */
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.result-table th, .result-table td {
  border: 1px solid var(--clr-border);
  padding: 8px 10px;
  text-align: center;
}
.result-table th { background: var(--clr-primary); color: #fff; font-weight: 600; }
.result-table tr:nth-child(even) td { background: #f8fafc; }
.result-table .score-cell { font-size: 1.1rem; font-weight: 700; }
.score-high  { color: var(--clr-success); }
.score-mid   { color: var(--clr-warn); }
.score-low   { color: var(--clr-danger); }

.history-item {
  background: var(--clr-surface);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: box-shadow .2s;
}
.history-item:active { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.history-item .h-patient { font-weight: 700; font-size: 1rem; }
.history-item .h-date    { font-size: .85rem; color: var(--clr-muted); }
.history-item .h-arrow   { color: var(--clr-muted); }

/* =============================================
   オージオグラム画面
   ============================================= */
.audiogram-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 8px;
}
#audiogram-svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* =============================================
   ページ内共通パーツ
   ============================================= */
.section-title {
  font-size: 1rem; font-weight: 700;
  color: var(--clr-primary);
  margin: 16px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--clr-primary);
}
.info-row {
  display: flex; gap: 8px; align-items: center;
  font-size: .9rem; margin-bottom: 6px;
}
.info-label { color: var(--clr-muted); min-width: 80px; }
.info-val   { font-weight: 600; }

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: .78rem; font-weight: 700;
}
.tag-right { background: #dbeafe; color: #1e40af; }
.tag-left  { background: #fce7f3; color: #9d174d; }
.tag-srt   { background: #d1fae5; color: #065f46; }
.tag-wrs   { background: #fef3c7; color: #92400e; }

.divider { border: none; border-top: 1px solid var(--clr-border); margin: 16px 0; }

.page-header {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
}
.back-btn {
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: var(--clr-primary);
  padding: 4px 8px;
}
.page-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--clr-primary); }

/* =============================================
   モーダル
   ============================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.modal-text  { font-size: .95rem; color: var(--clr-muted); margin-bottom: 20px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* =============================================
   dB入力フォーム（SRT/WRS設定）
   ============================================= */
.db-input-wrap {
  display: flex; align-items: center; gap: 10px;
}
.db-input {
  width: 90px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
}
.db-spin {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  background: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.db-spin:active { background: var(--clr-border); }

/* =============================================
   スクロール・ユーティリティ
   ============================================= */
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.gap-8 { gap: 8px; }
.w-full { width: 100%; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }


/* =============================================
   PTA入力（患者情報画面）
   ============================================= */
.pta-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pta-row-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pta-ear-lbl {
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.pta-input {
  width: 76px !important;
  text-align: center;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  padding: 10px 6px !important;
}
.pta-unit {
  font-size: .9rem;
  font-weight: 600;
  color: var(--clr-muted);
}
.pta-preview-box {
  background: #eef4fb;
  border: 1px solid #bdd3f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .88rem;
  line-height: 2;
  color: var(--clr-primary);
  margin-top: -4px;
}
.pta-preview-box b { color: var(--clr-primary); }

/* SRT/WRS 列dBプレビュー */
.db-col-preview {
  margin-top: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--clr-primary-lt);
  padding: 6px 10px;
  background: #eef4fb;
  border-radius: 6px;
  border-left: 3px solid var(--clr-primary-lt);
}


/* =============================================
   SRT検査：数字確定ボタン
   ============================================= */
.exam-answer-section {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* 数字ボタン群 */
.srt-digit-btns {
  display: flex;
  gap: 6px;
  flex: 1;
}

.digit-btn {
  flex: 1;
  aspect-ratio: 1;
  max-width: 52px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.digit-btn:active {
  transform: scale(.92);
  background: rgba(255,255,255,.3);
}
/* 自動認識でハイライト */
.digit-btn.highlighted {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(230,126,34,.5);
}

/* スキップボタン（検査者エリア） */
.exam-skip-btn {
  padding: 10px 12px !important;
  font-size: .85rem !important;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
}
.exam-skip-btn:active { background: rgba(255,255,255,.3) !important; }


/* =============================================
   WRS検査：正解ボタン・カナグリッド
   ============================================= */
.exam-correct-btn {
  flex: 1;
  padding: 12px 16px !important;
  font-size: 1.05rem !important;
  letter-spacing: .05em;
}

/* 20文字カナボタン（誤答選択用） */
.wrs-kana-btns {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  width: 100%;
  margin-bottom: 4px;
}
.kana-btn {
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, transform .08s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kana-btn:active {
  transform: scale(.9);
  background: rgba(231,76,60,.5);
  border-color: var(--clr-danger);
}
/* 自動認識でハイライト */
.kana-btn.highlighted {
  background: rgba(231,76,60,.4);
  border-color: #e74c3c;
  box-shadow: 0 0 0 2px rgba(231,76,60,.5);
}


/* =============================================
   リアルタイムスコアバー（SRT検査）
   ============================================= */
.score-bar-row {
  display: flex;
  gap: 3px;
  width: 100%;
  margin-bottom: 4px;
}
.score-bar-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 4px 2px;
  border: 1px solid rgba(255,255,255,.15);
  transition: background .2s;
}
.score-bar-cell.bar-active {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
}
.score-bar-db  { font-size: .68rem; opacity: .7; }
.score-bar-pct { font-size: .82rem; font-weight: 700; }

/* dBバッジ（現在呈示レベル表示） */
.db-badge {
  font-size: .95rem;
  font-weight: 700;
  background: rgba(255,255,255,.18);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .04em;
}


/* =============================================
   進捗タブ（SRT・WRS検査中）
   ============================================= */
.progress-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
}
.prog-tab {
  flex: 1;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 5px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background .15s;
  font-family: inherit;
}
.prog-tab:active { background: rgba(255,255,255,.25); }
.prog-tab-lbl {
  font-size: .6rem;
  opacity: .7;
  color: #fff;
  white-space: nowrap;
}
.prog-tab-val {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
}

/* 進捗詳細（インライン、現在は使わず modal-prog-detail を使用） */
.prog-detail {
  width: 100%;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  color: #fff;
  margin-top: 4px;
}
.prog-detail.hidden { display: none; }


/* =============================================
   WRS結果グリッド（結果画面・card-screen内）
   ============================================= */
#wrs-result-grid.wrs-grid {
  /* 結果画面は背景が白なのでセル色を調整 */
  --cell-border: var(--clr-border);
}
#wrs-result-grid .wrs-cell {
  border-color: var(--clr-border);
  color: var(--clr-text);
}
#wrs-result-grid .wrs-cell.correct { background: #d1fae5; border-color: #6ee7b7; }
#wrs-result-grid .wrs-cell.wrong   { background: #fee2e2; border-color: #fca5a5; }
#wrs-result-grid .wrs-cell.pending { background: #f3f4f6; }
#wrs-result-grid .wrs-cell .cell-answer { color: var(--clr-danger); }


/* =============================================
   WRS 0% モーダル調整
   ============================================= */
.modal-actions.flex-col {
  flex-direction: column;
  justify-content: stretch;
}
.modal-actions.flex-col .btn { width: 100%; }


/* =============================================
   WRS・SRTキャンバス共通スタイル
   ============================================= */
#drawing-canvas-wrs {
  border: 3px solid var(--clr-border);
  border-radius: 16px;
  background: #fff;
  touch-action: none;
  display: block;
}

/* 患者アクションボタン（大きく押しやすく） */
.patient-actions .btn-lg {
  min-width: 200px;
  padding: 18px 28px;
  font-size: 1.15rem;
  background: #f3f4f6;
  color: var(--clr-text);
  border: 2px solid var(--clr-border);
}
.patient-actions .btn-lg:active {
  background: var(--clr-border);
}


/* =============================================
   検査者専用モード（examiner.html / body.ex-mode）
   2タブレット構成: 回転不要・患者エリアなし
   ============================================= */
body.ex-mode .exam-area {
  transform: none;          /* 180度回転を解除 */
  flex: 1;
  border-bottom: none;
}

/* 検査画面の高さ調整（接続バー38px + ミラーパネル52px） */
body.ex-mode #screen-srt-test,
body.ex-mode #screen-wrs-test {
  height: calc(100vh - 38px - 52px);
  position: fixed;
  top: 38px;
  left: 0; right: 0;
  bottom: 52px;
}

/* スクロール可能にする */
body.ex-mode .exam-area {
  overflow-y: auto;
}

/* 通常画面（カード系）は接続バー分だけオフセット */
body.ex-mode .card-screen,
body.ex-mode #screen-home {
  padding-top: 38px;
  padding-bottom: 58px;
}