/* =========================
   Layout / Base
========================= */
.reading_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:20px;
  max-width:900px;
  margin:0 auto;
}
.reading_grid > * { min-width: 0; }          /* 折返し保険 */
.reading_grid { overflow-x: hidden; }        /* 横スクロール抑止 */

.title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* =========================
   Level Bar
========================= */
.level-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  margin:12px auto;
  padding:10px 0;
  max-width:720px;
  text-align:center;
}
.level-left{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.level-label{ font-size:15px; font-weight:500; }
.level-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:8px 32px 8px 12px;
  font-size:15px;
  border:1px solid #d1d5db;
  border-radius:6px;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M2 2l4 4 4-4" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat right 8px center;
  background-size:12px 8px;
}
.level-select:focus{
  outline:none; border-color:#b8d0ff; box-shadow:0 0 0 3px rgba(120,164,255,.25);
}
.level-go{
  font-size:15px;
  padding:9px 14px;
  border:1px solid #1f6feb;
  background:#2f81f7;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.level-go:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.level-go:disabled{ opacity:.6; cursor:not-allowed; }
.btn-secondary{ background:#6b7280; border-color:#6b7280; }

/* PCで中央に寄せたい */
@media (min-width: 641px){
  .reading_grid > .level-row{
    place-self:center;
    width:auto;
    padding-inline:0;
    background:transparent;
  }
  .level-actions{ display:flex; gap:12px; }
}

/* モバイルでは縦積み */
@media (max-width: 640px){
  .level-row{ flex-direction:column; align-items:stretch; gap:10px; max-width:100%; }
  .level-left{ justify-content:center; }
  .level-actions{ display:flex; gap:8px; justify-content:space-between; }
  .level-actions .level-go{ flex:1 1 45%; font-size:14px; }
}
@media (max-width:400px){
  .level-actions{ flex-direction:column; }
  .level-actions .level-go{ width:100%; }
}

/* =========================
   Theme badge
========================= */
.theme-badge{
  font-size:13px;
  color:#6b7280;
  margin-top:-4px;
  margin-bottom:6px;
}

/* =========================
   Question (本文) Box
========================= */
#question-container{
  padding:10px;
  border:1px solid #e6e8eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  white-space:pre-wrap;
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
  will-change:max-height;
  font-size:clamp(16.5px,1.05rem,18px);
  line-height:1.8;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:normal;
  overflow-x:hidden;
}
#question-container.is-loading{ max-height:60px; padding-block:12px; }
#question-container.is-open{ max-height:5000px; }
#question-container.no-transition{ transition:none!important; }
#question-container ruby rt{ font-size:.5em; line-height:1.8; }

@media (max-width:480px){
  #question-container{ font-size:clamp(17px,1.1rem,19px); }
}

/* 初期ヒント用 */
#question-container.is-placeholder{
  margin:0 !important;
  padding:10px !important;
  background:#f9fafb;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  box-shadow:none !important;
  display:block !important;
  max-height:none !important;
  color:#374151;
  font-size:15px;
  line-height:1.5;
}
#question-container:not(.is-placeholder){
  margin:0 !important;
  padding:10px !important;
  border:1px solid #e6e8eb !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
}
#question-container.is-placeholder > :first-child{ margin-top:0 !important; }
#question-container.is-placeholder > :last-child{ margin-bottom:0 !important; }
#question-container.is-placeholder br{ line-height:0; }
#question-container.is-placeholder .kbd{
  display:inline-block; padding:.1em .45em; border:1px solid #d1d5db; border-bottom-width:2px;
  border-radius:6px; background:#fff; font-weight:700;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#111;
}
#question-container.is-placeholder .hint-strong{ font-weight:700; color:#111827; }
#question-container.is-placeholder code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#f3f4f6; border-radius:4px; padding:0 .25em; font-size:.9em;
}

/* ruby調整（横はみ出し対策） */
ruby{ word-break:keep-all; line-height:1.8; }
ruby rb, ruby rt{ white-space:nowrap; }
@media (max-width:640px){
  ruby rp{ display:none; }
  #question-container ruby rt{ font-size:.45em; }
}

/* 設問テキスト */
.quiz-question{ margin-top:10px; font-weight:600; }

/* =========================
   Choices
========================= */
.choice-list{ display:grid; gap:10px; margin-top:10px; margin-bottom:6px; }
.choice-btn{
  width:100%; text-align:left; padding:12px 14px;
  border:1px solid #d8d8d8; border-radius:8px;
  background:#f9fbfe; cursor:pointer;
  font-size:16px; line-height:1.6;
  transition:background-color .2s,border-color .2s,box-shadow .2s;
}
.choice-btn:hover{ background:#f1f6ff; border-color:#b8d0ff; }
.choice-btn:disabled{ background:#eee; border-color:#ccc; cursor:not-allowed; }
.choice-index{ display:inline-block; min-width:1.6em; margin-right:.5em; font-weight:700; opacity:.8; }
.choice-btn.is-correct{ background:#e9ffef; border-color:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.25); }
.choice-btn.is-dim{ opacity:.65; }
.choice-btn.locked{ pointer-events:none; }
#result{ display:none; }

/* 段階表示 */
.qa-hidden{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
.qa-show{ opacity:1; pointer-events:auto; }

/* =========================
   Feedback Card
========================= */
#feedback{
  margin-top:3px; padding:14px 16px; background:#fff; border:1px solid #e6e8eb;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
  line-height:1.7; white-space:pre-wrap;
}
#feedback:empty{ display:none; }
#feedback:not(:empty)::before{
  content:"フィードバック"; display:block; font-size:12px; color:#6b7280; margin-bottom:6px;
}

/* =========================
   Loader
========================= */
.loading-row{ display:flex; align-items:center; gap:10px; color:#3fa7ff; font-weight:600; }
.wave-loader{ display:inline-flex; align-items:flex-end; gap:4px; height:20px; }
.wave-loader .bar{
  width:4px; height:14px; background:#78c7ff; border-radius:3px;
  transform-origin:bottom; animation:wavePulse 1.1s ease-in-out infinite; opacity:.95;
}
.wave-loader .bar:nth-child(1){ animation-delay:0s; }
.wave-loader .bar:nth-child(2){ animation-delay:.1s; }
.wave-loader .bar:nth-child(3){ animation-delay:.2s; }
.wave-loader .bar:nth-child(4){ animation-delay:.3s; }
.wave-loader .bar:nth-child(5){ animation-delay:.4s; }
@keyframes wavePulse{ 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1.2);} }
.loading-hint{ font-size:14px; opacity:.9; }

/* =========================
   Furigana Toolbar
========================= */
#furigana-toolbar[data-visible="false"]{ display:none; }
#furigana-toolbar[data-visible="true"]{
  display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:2px 0 6px; text-align:right;
}
#furigana-toolbar[data-ready="false"]{ opacity:.6; }
#furigana-toolbar[data-ready="true"]{ opacity:1; }
#rubybutton{
  position:relative; display:inline-block; width:45px; height:20px;
  border:none; border-radius:20px; background-color:#ccc; cursor:pointer; outline:none;
  transition:background-color .3s ease;
}
#rubybutton .slider{
  position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%;
  transition:transform .3s ease;
}
#rubybutton.on{ background-color:#65b5ff; }
#rubybutton.on .slider{ transform:translateX(25px); }
#rubybutton.disabled-choice{ background-color:#ccc !important; pointer-events:none; opacity:.6; }
.ruby-label{ font-size:17px; color:black; font-weight:bold; line-height:20px; }
.fullruby-check{ display:inline-flex; align-items:center; gap:.35rem; margin-left:.75rem; font-size:14px; }

/* =========================
   Feedback Translate
========================= */
.fb-trans-row{ display:flex; align-items:center; gap:.5rem; margin-top:.4rem; }
.fb-trans-btn{
  font-size:.9rem; line-height:1; padding:.45rem .7rem; border:1px solid #d0d7de;
  border-radius:8px; background:#fff; color:#111827; cursor:pointer; transition:background-color .15s ease;
}
.fb-trans-btn:hover{ background:#f9fafb; }
.fb-trans-btn:disabled{ opacity:.6; cursor:not-allowed; }
.fb-trans-lang{ font-size:.85rem; color:#6b7280; }
.fb-trans-out{
  margin-top:.5rem; padding:.9rem 1rem; border:1px dashed #e6e8eb; border-radius:10px;
  background:#fcfcfd; color:#111827; white-space:pre-wrap; font-size:1.1rem; line-height:1.5; margin-top:4px;
}
/* タイトル行右端の言語ピッカー（JSが挿入） */
.ai-lang-bar{ display:flex; align-items:center; gap:.5rem; }
.ai-lang-caption{ font-size:.8rem; color:#6b7280; }
.ai-lang-saved{ font-size:.8rem; color:#059669; }
#aiTargetLang{
  font-size:.85rem; padding:.35rem .5rem; border:1px solid #d0d7de; border-radius:6px; background:#fff;
}
/* FB行での重複表示防止 */
.fb-trans-row .ai-lang-bar{ display:none !important; }

/* =========================
   TTS
========================= */
.tts-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.tts-make{ background:#10b981; border-color:#10b981; }
.tts-audio{ width:100%; margin-top:6px; }
.tts-opts{ display:flex; gap:6px; margin-left:8px; }

/* =========================
   Score Animation (○×)
========================= */
.score-animation{
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  font-size:6em; font-weight:bold; z-index:9999; animation-duration:1s; animation-fill-mode:forwards; pointer-events:none;
}
@keyframes floatUp{ 0%{opacity:1; transform:translate(-50%,0)} 100%{opacity:0; transform:translate(-50%,-30px)} }
@keyframes floatDown{ 0%{opacity:1; transform:translate(-50%,0)} 100%{opacity:0; transform:translate(-50%,30px)} }
.plus10{ color:red; animation-name:floatUp; }
.minus5{ color:blue; animation-name:floatDown; }

/* =========================
   Bank Modal & Toolbar
========================= */
.bank-sheet{
  background:#fff; width:min(720px,92vw); max-height:80vh; overflow:auto;
  margin:6vh auto; padding:16px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.bank-toolbar{
  --ctl-h:36px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;
}
.bank-toolbar > *{ box-sizing:border-box; height:var(--ctl-h); }
.bank-title{ flex:0 0 auto; white-space:nowrap; line-height:var(--ctl-h); }
.bank-search{
  flex:1 1 240px; min-width:160px; padding:0 10px; font-size:14px; border:1px solid #d1d5db; border-radius:6px;
}
.bank-sort{
  flex:0 0 160px; min-width:140px; padding:0 8px; font-size:14px; border:1px solid #d1d5db; border-radius:6px; background:#fff; appearance:none;
}
.bank-toolbar button{
  flex:0 0 auto; padding:0 14px; font-size:14px; border-radius:8px; border:1px solid #d1d5db; background:#f3f4f6;
  line-height:calc(var(--ctl-h) - 2px); cursor:pointer;
}
button.danger{
  background:#ef4444 !important; border-color:#dc2626 !important; color:#fff !important; font-weight:600;
}
.bank-close{ background:#e5e7eb !important; border-color:#d1d5db !important; color:#111 !important; }

@media (min-width:960px){
  .bank-toolbar{ flex-wrap:nowrap; }
  .bank-search{ flex:1 1 40%; }
  .bank-sort{ flex:0 0 180px; }
}
@media (max-width:959.98px){
  .bank-title{ order:1; flex:1 1 100%; }
  .bank-search{ order:2; flex:1 1 100%; }
  .bank-sort{ order:3; flex:1 1 100%; }
  #bank-clear-btn{ order:4; flex:1 1 48%; }
  #bank-close{ order:5; flex:1 1 48%; }
}

.bank-meta{ font-size:12px; color:#6b7280; margin:6px 0 10px; }
.bank-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px;
}
.bank-item-btn{
  display:block; width:100%; text-align:left; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; cursor:pointer; transition:box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}
.bank-item-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(47,129,247,.25); }
.bank-item-btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); border-color:#d1d5db; }
.bank-item-btn:active{ transform:translateY(1px); }
#bank-list .bank-item-btn{ cursor:pointer; }
#bank-list .bank-item-btn:hover{ filter:brightness(1.02); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.bank-item-title{
  font-weight:700; font-size:14px; line-height:1.35; color:#111827;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
}
.bank-item-subline{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.bank-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:9999px; background:#f3f4f6; color:#374151; border:1px solid #e5e7eb;
}
.bank-tag i{ font-style:normal; color:#6b7280; font-size:11px; }
.bank-tag.theme{ background:#eef2ff; border-color:#e0e7ff; color:#3730a3; }
.bank-tag.genre{ background:#ecfeff; border-color:#cffafe; color:#155e75; }
.bank-item-date{ margin-top:6px; font-size:12px; color:#6b7280; }
.bank-pager{ display:flex; justify-content:center; gap:8px; margin-top:10px; }

/* =========================
   Cleared Stamp
========================= */
.cleared-stamp{
  position:absolute; right:6px; bottom:6px; width:56px; height:56px; opacity:.95; pointer-events:none; user-select:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
:root{
  --stamp-n5:#16a34a; --stamp-n4:#0ea5e9; --stamp-n3:#f59e0b; --stamp-n2:#ef4444; --stamp-n1:#8b5cf6;
}
@media (prefers-color-scheme: dark){
  :root{ --stamp-n5:#22c55e; --stamp-n4:#38bdf8; --stamp-n3:#fbbf24; --stamp-n2:#f87171; --stamp-n1:#a78bfa; }
}

/* =========================
   Edit link
========================= */
#editLink{
  position:fixed; bottom:8px; right:10px; font-size:12px; color:#999; opacity:.4; text-decoration:none; transition:opacity .2s, color .2s;
}
#editLink:hover{ opacity:.9; color:#555; }
@media (max-width:640px){
  #editLink{ font-size:11px; bottom:6px; right:8px; }
}

#fb-trans-out { display: none; }

/* 停止ボタン（赤） */
.level-go.btn-danger,
#stop-btn.level-go.btn-danger {
  background: #ef4444;           /* red-500 */
  border: 1px solid #dc2626;     /* red-600 */
  color: #fff;
}
.level-go.btn-danger:hover {
  background: #dc2626;           /* red-600 */
  border-color: #b91c1c;         /* red-700 */
}
.level-go.btn-danger:active {
  background: #b91c1c;           /* red-700 */
  border-color: #991b1b;         /* red-800 */
}
.level-go.btn-danger:disabled {
  background: #fca5a5;           /* red-300 */
  border-color: #f87171;         /* red-400 */
  color: #fff;
  opacity: .8;
  cursor: not-allowed;
}
.level-go.btn-danger:focus-visible {
  outline: 2px solid #fecaca;    /* red-200 */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(239,68,68,.35);
}

/* アイコンとテキストが並ぶ時の整列 */
#stop-btn {
  display: none;                 /* JSで表示切替 */
  align-items: center;
  gap: .35rem;
}

/* 「問題を作る」「過去問から選ぶ」ボタン幅を統一 */
#generate-btn,
#past-btn {
  min-width: 9em;          /* お好みで調整（8.5〜10emくらい） */
  text-align: center;
}

/* ボタンの縦揃えをline-height依存にしない（サブピクセルで滲みやすい） */
.bank-toolbar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--ctl-h);
  line-height:1;            /* ← 文字のにじみ低減 */
  padding:0 14px;           /* 既存値を維持 */
}

/* 「履歴を削除」専用の可読性ブースト */
#bank-clear-btn{
  font-weight:700;
  color:#fff;
  background:#dc2626;       /* ほんの少し暗め＝コントラストUP */
  border-color:#b91c1c;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  text-shadow:0 0 1px rgba(0,0,0,.18); /* 白抜きのにじみを抑える薄い影 */
}

/* hover/active時もにじみが出ないようコントラストを維持 */
#bank-clear-btn:hover{
  background:#b91c1c;
  border-color:#991b1b;
}
#bank-clear-btn:active{
  background:#991b1b;
  border-color:#7f1d1d;
}

  /* 既存 .level-go の見た目を a にも適用 */
    .level-actions a.level-go {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
    }
    /* 語彙・文法ブロック用の軽い装飾（必要に応じてCSSに移動可） */
    .vg-row {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 8px 10px;
      margin-top: 8px;
      background: #f9fafb;
      font-size: 0.9rem;
    }
    .vg-section-title {
      font-weight: 600;
      margin-bottom: 4px;
      font-size: 0.9rem;
    }
    .vg-list {
      list-style: disc;
      padding-left: 1.2rem;
      margin: 0;
    }
    .vg-list li {
      margin-bottom: 2px;
      line-height:1.8;
    }
    .vg-output {
      margin: 0;
      white-space: pre-wrap;
    }
    .vg-status {
      font-size: 0.8rem;
      color: #6b7280;
    }
    .vg-status.error {
      color: #b91c1c;
    }

    /* 作文カード用の軽い装飾（card クラスは reading.css 側の想定） */
    .writing-row .writing-input {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 8px;
      font-family: inherit;
    }
    .writing-row .card-title {
      font-weight: 600;
      font-size: 0.95rem;
    }
    /* ---------- Writing Card Styling ---------- */
    .enhanced-writing-card {
      padding: 16px 18px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .writing-header {
      margin-bottom: 12px;
    }

    .writing-desc {
      margin: 4px 0 10px 0;
      font-size: 0.92rem;
      color: #555;
    }

    /* textarea */
    .enhanced-writing-input {
      width: 100%;
      border: 1px solid #dcdcdc;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 0.95rem;
      resize: none;
      background: #fafafa;
      transition: border 0.2s, box-shadow 0.2s;
    }
    .enhanced-writing-input:focus {
      border-color: #7aa7ff;
      box-shadow: 0 0 0 3px rgba(122,167,255,0.25);
      background: #fff;
    }

    /* ボタンエリア */
    .writing-btn-area {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      gap: 10px;
    }

    .writing-check-btn {
      background: #4c7cf3;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 0.9rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    .writing-check-btn:hover {
      background: #3a69db;
    }

    /* feedback */
    .enhanced-writing-feedback {
      margin-top: 14px;
      padding: 12px;
      border-left: 4px solid #4c7cf3;
      background: #f7f9ff;
      border-radius: 8px;
      white-space: pre-wrap;
      line-height:1.5;
      font-size:1rem;
    }

    /* ---------- Speaking Card Styling ---------- */
    .speaking-card {
      padding: 16px 18px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      margin-top: 12px;
    }
    .speaking-header {
      margin-bottom: 8px;
    }
    .speaking-desc {
      margin: 4px 0 8px 0;
      font-size: 0.9rem;
      color: #555;
    }
    .speaking-instruction-label {
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 2px;
    }
    .speaking-instruction-text {
      margin: 0 0 4px 0;
      font-size: 1.1rem;
      font-weight: bold;
      line-height: 1.6;
    }
    .speaking-rubric-list {
      margin: 4px 0 0 1.1rem;
      padding: 0;
      font-size: 0.88rem;
    }
    .speaking-rubric-list li {
      margin-bottom: 2px;
      line-height: 1.6;
    }
    .speaking-btn-area {
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:10px;
    }
    .speaking-result {
      margin-top: 10px;
      font-size: 0.9rem;
    }
    .speaking-score-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 4px;
      font-size: 0.9rem;
    }
    .speaking-score-table th,
    .speaking-score-table td {
      border: 1px solid #e5e7eb;
      padding: 4px 6px;
      vertical-align: top;
    }
    .speaking-score-table th {
      background: #f9fafb;
      white-space: nowrap;
    }
    .speaking-overall {
      margin-top: 8px;
    }
    .speaking-overall-main {
      font-weight: 600;
      margin-bottom: 4px;
    }
    .speaking-overall-score {
      font-size: 1.1rem;
      margin-left: 4px;
    }
    .speaking-overall-avg {
      margin-left: 4px;
      font-size: 0.86rem;
      color: #555;
    }
    .speaking-suggestion {
      line-height: 1.6;
    }
    .speaking-instruction-meta {
      margin-left: .5rem;
      font-size: 0.8rem;
      color: #6b7280;
      white-space: nowrap;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      display: inline-block;
    }


/* ===========================
   🎤 話す練習：ルーブリック（画像のカード型デザイン）
   =========================== */

.rubric-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 12px 0;
  color: #1e3a8a;
}

.rubric-grid {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr;
  gap: 8px;
  background: #f0f7ff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.rubric-colhead {
  text-align: center;
  font-weight: 700;
  padding: 6px 0;
  font-size: 0.95rem;
  color: #1e40af;
}

.rubric-rowhead {
  display: flex;
  align-items: center;
  font-weight: 600;
  padding: 6px;
  font-size: 0.95rem;
}

.rubric-cell {
  background: #ffffff;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* AI が選んだマス */
.rubric-cell.is-hit {
  border: 2px solid #2563eb;
  background: #dbeafe;
}

/* 評価ボタン */
.rubric-actions {
  text-align: right;
  margin-bottom: 10px;
}

.rub-btn {
  padding: 8px 16px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
}

.rubric-result-title {
  margin-bottom: 8px;
  font-weight: 700;
}

.rubric-result-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.rubric-result-table th,
.rubric-result-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 0.9rem;
}

.rubric-suggestion {
  padding: 10px;
  background: #f9fafb;
  border-left: 4px solid #2563eb;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* ---- 評価結果カード ---- */
.rubric-result-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 18px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  animation: fadeIn 0.25s ease-out;
}

.rubric-result-title {
  font-size: 1.15rem;
  margin-bottom: 12px;
  font-weight: 600;
  color: #374151;
}

/* ---- テーブル ---- */
.rubric-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.rubric-result-table thead th {
  text-align: left;
  padding: 8px 6px;
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
  border-bottom: 1px solid #d1d5db;
}

.rubric-result-table tbody td {
  padding: 10px 6px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

/* スコアの見栄え（丸いバッジにする） */
.rubric-score-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
}

/* 色分け（1,2,3 に対応） */
.rubric-score-1 { background: #ef4444; }  /* 赤 */
.rubric-score-2 { background: #f59e0b; }  /* 黄 */
.rubric-score-3 { background: #10b981; }  /* 緑 */

/* フェード表示 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-note {
  text-align: center;
  color: #888;
  font-size: 0.75rem;
  margin-top: 12px;
}


/* ============================
   🎤 評価ルーブリック（スマホ対応）
============================ */
.speaking-rubric-wrapper {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.rubric-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #111827;
}

/* PC / タブレット 基本レイアウト */
.rubric-grid {
  display: grid;
  grid-template-columns: minmax(88px, 1.1fr) repeat(3, minmax(0, 1.2fr));
  gap: 4px;
  font-size: .9rem;
  align-items: stretch;
}

.rubric-empty {
  /* 左上の空セル */
}

.rubric-colhead,
.rubric-rowhead,
.rubric-cell {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-sizing: border-box;
}

.rubric-colhead {
  text-align: center;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
}

.rubric-rowhead {
  font-weight: 600;
  background: #f3f4f6;
  color: #111827;
}

.rubric-cell {
  line-height: 1.5;
  cursor: pointer;
}

/* AIが選んだセルのハイライト（JS側で is-hit を付与） */
.rubric-cell.is-hit {
  background: #fef3c7;
  border-color: #f59e0b;
}

/* 結果エリアのテキストなど */
#rubric-result {
  margin-top: 12px;
  font-size: .9rem;
}

.rubric-status {
  margin-left: 8px;
  font-size: .85rem;
  color: #4b5563;
}

/* ボタン行 */
.rubric-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rubric-actions button {
  font-size: .9rem;
}

/* ============================
   📱 スマホ向けレイアウト
============================ */
@media (max-width: 640px) {
  .speaking-rubric-wrapper {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .rubric-grid {
    display: block; /* 1列縦積み */
  }

  /* 左上の空セルと列ヘッダーは非表示（各セルにスコアラベルを付ける） */
  .rubric-empty,
  .rubric-colhead {
    display: none;
  }

  .rubric-rowhead {
    margin-top: 10px;
    border-radius: 6px 6px 0 0;
  }

  .rubric-cell {
    margin-top: 4px;
    position: relative;
    border-radius: 0;
  }

  .rubric-cell:first-of-type {
    border-radius: 0 0 6px 6px;
  }

  /* 3/2/1 の見出しを各セルの先頭に表示 */
  .rubric-cell::before {
    content: attr(data-score) "：";
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: #4b5563;
  }

  .rubric-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rubric-actions button {
    width: 100%;
  }
}

/* =======================================
   🎤 ルーブリック：高さを自動で揃える
======================================= */

/* 行見出し（左側 "内容"・"語彙" など） */
.rubric-rowhead {
  display: flex;
  align-items: stretch;
}

/* 評価セル（3 / 2 / 1 の説明文が入っている部分） */
.rubric-cell {
  display: flex;
  align-items: center;   /* 上下中央寄せ */
  min-height: 70px;      /* ★お好みで調整（高さを揃える肝） */
  box-sizing: border-box;
}