:root{
  --ink:#1b222c;
  --ink-2:#242e3a;
  --paper:#f4efe2;
  --paper-2:#ffffff;
  --text:#22303f;
  --text-soft:#5c6b78;
  --accent:#ffcf4d;
  --accent-2:#3c7a6c;
  --accent-2-soft:#dcece7;
  --danger:#c1503f;
  --ok:#2f9e4f;
  --line:#d8cfba;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Noto Sans JP',sans-serif;
  min-height:100vh;
}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 80px;}
.sheet-status-banner{
  margin-bottom:16px;
  padding:10px 16px;
  background:#3a2a26;
  border:1px solid var(--danger);
  border-radius:8px;
  color:#f3c9be;
  font-size:13px;
  line-height:1.6;
}
.sticky-top{
  position:sticky;top:0;z-index:40;background:var(--ink);
  margin:-28px -20px 0;padding:28px 20px 14px;
}
header.app-header{
  position:relative;
  display:flex;align-items:baseline;gap:14px;margin-bottom:0;flex-wrap:wrap;
}
header.app-header h1{
  font-family:'Shippori Mincho',serif;
  color:var(--paper);
  font-size:19px;
  font-weight:700;
  margin:0;
  letter-spacing:.02em;
}
header.app-header h1 a{color:inherit;text-decoration:none;}

.sub-select{
  color:#9aa6b0;font-size:12.5px;font-family:'JetBrains Mono',monospace;
  background:#10151b;border:1px solid #333f4b;border-radius:6px;padding:3px 6px;cursor:pointer;
  max-width:100%;
}

header.app-header #setupDetails{
  flex:0 1 auto;
}
header.app-header #setupDetails[open]{
  position:absolute;top:100%;right:0;z-index:50;
  max-width:min(560px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--ink-2);border-radius:var(--radius);
  padding:12px 14px;box-shadow:0 12px 32px rgba(0,0,0,.5);
}

details.help{
  color:#c7cfd6;
  font-size:12.5px;
}
details.help summary{cursor:pointer;list-style:none;color:var(--accent);font-weight:600;padding:2px 0;}
details.help summary::-webkit-details-marker{display:none;}
#setupDetails > summary::before{content:'▶ ';}
#setupDetails[open] > summary::before{content:'▼ ';}
details.help p, details.help #status{color:#c7cfd6;font-size:13px;margin:8px 0;}

details.help .sub-details{
  margin:10px 0 0 4px;padding:10px 0 10px 12px;border-left:2px solid #333f4b;
}
details.help .sub-details summary{font-size:13px;}

.setup-fields{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 16px;}
.setup-fields .field{flex:1 1 200px;min-width:0;}
.setup-fields label{font-size:11px;color:#9aa6b0;font-family:'JetBrains Mono',monospace;}
.setup-fields input,.setup-fields select{
  background:#10151b;border:1px solid #333f4b;color:var(--paper);border-radius:6px;
  padding:8px 10px;font-size:13px;font-family:'JetBrains Mono',monospace;width:100%;
}
.setup-fields input:focus,.setup-fields select:focus{outline:2px solid var(--accent);border-color:transparent;}
details.help .hint{font-size:11.5px;color:#9aa6b0;line-height:1.6;}
details.help .hint a{color:var(--accent);}
details.help ol, details.help ul{padding-left:18px;line-height:1.9;font-size:13px;color:#c7cfd6;}
details.help strong{color:var(--paper);}
details.help button{
  margin-top:6px;background:var(--accent-2);color:#fff;border:none;border-radius:6px;
  padding:6px 12px;font-size:12px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;
}
details.help .gas-code{
  background:#10151b;color:#d7e6de;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  padding:12px;border-radius:8px;white-space:pre;overflow-x:auto;margin-top:8px;line-height:1.6;
}

main{margin-top:20px;}

.panel{
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:18px 20px;
}

#empty-state p{color:var(--text-soft);font-size:13.5px;margin:0;}

button{
  background:var(--accent-2);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:9px 16px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  font-family:'Noto Sans JP',sans-serif;
}
button:hover{filter:brightness(1.08);}
button:disabled{opacity:.4;cursor:default;filter:none;}

#result{
  margin-top:10px;
  font-size:12px;
  color:#c7cfd6;
  word-break:break-all;
}

.practice-header{
  position:relative;
  display:flex;justify-content:center;align-items:center;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.practice-footer{
  display:flex;justify-content:center;align-items:center;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line);
}
.part-jump-select{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  background:#faf7ee;border:1px solid var(--line);color:var(--text);border-radius:6px;
  padding:5px 8px;font-size:12px;font-family:'JetBrains Mono',monospace;max-width:150px;
}
.nav-cluster{display:flex;align-items:center;gap:12px;}
.progress-label{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-soft);
}

.nav-btn{
  background:none;color:var(--accent-2);
  border:none;
  padding:0 4px;
  font-size:34px;
  line-height:1;
}
.nav-btn:hover{color:var(--ink);filter:none;}
.nav-btn:disabled{color:var(--line);}

.stopwatch{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:8px;
}
.stopwatch-time{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-soft);
}
.stopwatch-toggle{
  background:none;border:none;font-size:15px;line-height:1;cursor:pointer;padding:0;
  color:var(--accent-2);width:18px;text-align:center;
}

.doc-box{
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:14px;
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.75;
}

.doc-label{
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  font-size:12.5px;
  color:var(--accent-2);
  margin-bottom:6px;
}

.q-block{
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px;
}
.q-block:first-child{border-top:none;padding-top:0;margin-top:0;}

.question-corner-layout{display:flex;gap:16px;align-items:flex-start;}
.question-corner-main{flex:1 1 auto;min-width:0;}
@media (max-width:640px){.question-corner-layout{flex-direction:column;}}

.group-history-sidebar{
  flex:0 0 20%;
  min-width:130px;
  max-width:190px;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
}
@media (max-width:640px){.group-history-sidebar{max-width:100%;width:100%;}}
.group-history-sidebar-title{
  font-size:12.5px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.group-history-sidebar-empty{
  font-size:11.5px;
  color:var(--text-soft);
  margin:0;
}
.group-history-sidebar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 6px;
  padding:5px 0;
  border-bottom:1px dashed var(--line);
}
.group-history-sidebar-row:last-child{border-bottom:none;}
.group-history-sidebar-num{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  font-weight:700;
  color:var(--text);
  flex:0 0 auto;
}
.group-history-sidebar-date{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--text-soft);
  flex:1 1 auto;
}
.group-history-sidebar-badge{
  font-weight:700;
  font-size:12px;
  flex:0 0 auto;
}
.group-history-sidebar-badge.correct{color:var(--ok);}
.group-history-sidebar-badge.wrong{color:var(--danger);}
.group-history-sidebar-badge.unknown{color:var(--text-soft);}

.q-text{
  font-weight:700;
  margin-bottom:10px;
  white-space:pre-wrap;
  line-height:1.6;
}

/* 1.75倍サイズ(旧: flag幅16px / gender 11px / arrow 12px)。 */
.speaker-badges{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:14px;
  vertical-align:middle;
}
.speaker-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-weight:700;
}
.speaker-flag{
  width:32px;
  height:auto;
  display:block;
  border-radius:3px;
}
.speaker-gender{
  font-family:'JetBrains Mono',monospace;
  font-size:21px;
  color:var(--text-soft);
}
.speaker-arrow{
  color:var(--text-soft);
  font-size:24px;
}
/* 翻訳エリアの操作ボタン列の右端に収める国旗バッジ。 */
.translate-speaker-inline{
  margin-left:auto;
}

.choice{
  display:block;
  width:100%;
  text-align:left;
  background:var(--paper-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  margin:6px 0;
  padding:9px 14px;
  font-weight:400;
  font-size:13.5px;
}
.choice:hover{background:var(--accent-2-soft);border-color:var(--accent-2);}
.choice.selected{background:var(--accent-2-soft);border-color:var(--accent-2);border-width:2px;}
.choice.correct{background:#e3f7e8;border-color:var(--ok);color:#1c6b32;font-weight:700;}
.choice.wrong{background:#fdeaea;border-color:var(--danger);color:#96281b;font-weight:700;}

.grade-btn{
  display:block;width:100%;margin-top:16px;
  background:var(--accent);color:var(--ink);font-weight:700;
}
.grade-btn:disabled{background:#e6e0cf;color:#a7a08c;}

.explain-box{
  margin-top:10px;
  background:var(--accent-2-soft);
  border-left:3px solid var(--accent-2);
  border-radius:6px;
  padding:10px 14px;
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
  color:#1c453d;
}

.reveal-btn{
  background:none;color:var(--accent-2);border:1px solid var(--accent-2);
  font-size:12.5px;padding:6px 14px;font-weight:700;
}
.explain-error{color:var(--danger, #c1503f);margin-bottom:8px;}
.explain-retry-btn{display:block;}
.reveal-btn:hover{background:var(--accent-2-soft);filter:none;}

header.app-header .header-save{position:absolute;top:0;right:0;}
.rc-save{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.rc-save button{
  background:var(--accent-2);color:#fff;border:none;border-radius:8px;padding:6px 12px;
  font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;white-space:nowrap;
  min-width:0;text-align:center;
}
.rc-save button:hover{filter:brightness(1.08);}
.rc-save button:disabled{background:#3a4048;color:#7d8891;cursor:not-allowed;filter:none;}
.rc-save .save-status{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#c7cfd6;white-space:nowrap;}
.rc-save .save-status.err{color:#ff9f8e;}
.rc-save .save-status.ok{color:#8fe0c2;}

.audio-btn{
  background:var(--ink-2);color:var(--paper);
  font-family:'JetBrains Mono',monospace;font-size:12.5px;
  padding:8px 14px;margin:4px 4px 4px 0;
}
.audio-btn:hover{background:#333f4b;}

audio{
  width:100%;
  margin:6px 0;
}

.audio-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--text-soft);
  margin-bottom:6px;
}

.passage-topic{
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  font-size:17px;
  color:var(--text);
  margin-bottom:10px;
}

.translate-wide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:8px;
  margin-bottom:14px;
}
@media (max-width:640px){.translate-wide{grid-template-columns:1fr;}}
.translate-col{
  font-size:18px;
  line-height:1.9;
}
/* ワイドモード(EN/JAを縦積みにして全幅表示)のときだけ、開始・終了に1行分の
   余白を設ける。この余白部分にマウスを乗せてホイールを回してもハイライトが
   切り替わる(wideWrapのwheelイベントは子要素の余白部分でも発火するため、
   JS側の追加対応なしにこのCSSの余白だけで実現できる)。 */
.translate-box.wide-mode .translate-col{padding-top:1.9em;padding-bottom:1.9em;}
.translate-col-en{border-right:1px dashed var(--line);padding-right:14px;color:#1f5c3f;}
@media (max-width:640px){.translate-col-en{border-right:none;border-bottom:1px dashed var(--line);padding-right:0;padding-bottom:10px;margin-bottom:6px;}}
.translate-box.wide-mode .translate-col-en{border-right:none;border-bottom:1px dashed var(--line);padding-right:0;padding-bottom:1.9em;margin-bottom:6px;}
/* padding分をmarginでマイナスに相殺し、ハイライト(背景色)の見た目上の
   余白は保ちつつ、実際の行送り・文字間隔には影響しないようにする。相殺
   していないと、チャンクとチャンクの継ぎ目(単語間には既にスペース1文字
   分の空白がある)に毎回paddingぶんの余分な隙間が積み重なり、特にハンギング
   インデント行で単語間隔が不揃いに見える原因になっていた。 */
.chunk-seg{
  cursor:pointer;
  border-radius:3px;
  padding:1px 3px;
  margin:0 -3px;
}
.transcript-line{
  margin:0;
}
/* 「M: 」「W: 」「男性：」「女性：」のような話者ラベルで始まる行は、ラベルを
   独立した要素(transcript-label)として切り出し、残りの本文(transcript-line-body)
   と横並びのflexにする。text-indentの固定em幅方式だと、ラベルの実際の文字幅が
   英語("M:")と日本語("男性：")で大きく異なり2行目以降の字下げ位置がずれて
   しまっていたが、この方式なら実際のラベル幅ぶんだけ正確に字下げされる。 */
.transcript-line-indent{
  display:flex;
  align-items:baseline;
}
.transcript-label{
  flex:0 0 auto;
  margin-right:0.3em;
  white-space:nowrap;
}
.transcript-line-body{
  flex:1 1 auto;
  min-width:0;
}
/* EN側: 現在チャンクはアクセント色で常時ハイライト。JA側: 現在チャンクは
   クリックされるまで背景=文字色で塗りつぶして読めなくし(単語帳の答え隠し)、
   クリックすると同じアクセント色にめくれる。 */
.translate-col-en .chunk-seg.seg-hover{background:var(--accent);}
.translate-col-ja .chunk-seg.seg-hover{background:var(--text);color:var(--text);}
.translate-col-ja .chunk-seg.seg-revealed{background:var(--accent);color:inherit;}
/* 意訳モード: JA側(意訳文)は常時ハイライトせず、EN側で今ハイライトされている
   チャンクを含む文だけ下線が連動する(seg-active)。EN側は直訳モードと同じ
   チャンク単位のハイライト・スラッシュ表示のまま変わらない。 */
.translate-col-ja .natural-seg.seg-active{text-decoration:underline;text-decoration-color:var(--accent-2);text-underline-offset:3px;}
.chunk-popup{
  position:absolute;
  z-index:80;
  display:none;
  max-width:260px;
  background:var(--ink-2);
  color:var(--paper);
  border-radius:8px;
  padding:10px 12px;
  font-size:12.5px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.chunk-popup.show{display:block;}
.chunk-popup-item{margin-bottom:8px;}
.chunk-popup-item:last-child{margin-bottom:0;}
.chunk-popup-item strong{color:var(--accent);display:block;margin-bottom:2px;}
.chunk-popup-term{cursor:pointer;}
.chunk-popup-term:hover strong{color:var(--paper);}
.chunk-popup-term.added{opacity:.5;}
.chunk-popup-literal{cursor:pointer;border-bottom:1px solid #333f4b;padding-bottom:8px;}
.chunk-popup-literal strong{color:#aeeac4;}
.chunk-popup-literal:hover strong{color:#cdf3dc;}
.chunk-popup-literal.added{opacity:.5;}
.chunk-popup-explain{border-top:1px solid #333f4b;padding-top:8px;cursor:pointer;}
.chunk-popup-explain:hover strong{color:var(--paper);}
.chunk-popup-unheard{border-top:1px solid #333f4b;padding-top:8px;cursor:pointer;}
.chunk-popup-unheard:hover strong{color:var(--paper);}
.unheard-submenu{max-width:200px;}
.chunk-popup-unheard-word{cursor:pointer;padding:2px 4px;border-radius:4px;}
.chunk-popup-unheard-word:hover strong{color:var(--paper);}
.chunk-popup-unheard-word.added{opacity:.5;}
/* 複数選択の見た目: 選ばれた単語は背景を付けて白文字にし、選択中だと分かるようにする */
.chunk-popup-unheard-word.selected{background:rgba(0,153,255,.35);}
.chunk-popup-unheard-word.selected strong{color:#fff;}
.chunk-popup-unheard-confirm{border-bottom:1px solid #333f4b;padding-bottom:8px;margin-bottom:8px;cursor:pointer;}
.chunk-popup-unheard-confirm strong{color:#8be28b;}
.chunk-popup-unheard-confirm:hover strong{color:#cdf3dc;}
.translate-error{color:var(--danger);font-size:13px;}

.translate-block{margin:10px 0;}
/* .doc-boxの標準背景(#faf7ee、ベージュ寄り)ではなく白にする。 */
.translate-box{position:relative;background:#ffffff;}
.translate-controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;
}
.mode-toggle-btn{
  background:none;color:var(--accent-2);border:1px solid var(--accent-2);
  font-family:'Noto Sans JP',sans-serif;font-size:12.5px;font-weight:700;
  padding:7px 13px;border-radius:8px;
}
.mode-toggle-btn:hover{background:var(--accent-2-soft);filter:none;}
.mode-toggle-btn:disabled{opacity:.4;filter:none;}
.translate-box.wide-mode .translate-wide{grid-template-columns:1fr;}
.translate-box.tall-mode .translate-col{font-size:20px;line-height:2.3;}

.notes-wrap{margin-top:4px;}
.notes-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-soft);margin-bottom:6px;
}
.notes-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.notes-toolbar-btn{
  background:var(--paper-2);color:var(--text-soft);border:1px solid var(--line);
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:6px;
}
.notes-toolbar-btn:hover{background:var(--accent-2-soft);color:var(--accent-2);filter:none;}
.notes-area{
  background:#faf7ee;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;min-height:60px;max-height:280px;overflow-y:auto;
  font-family:Arial,'Helvetica Neue',sans-serif;
  font-size:13px;line-height:1.7;color:#000;
  cursor:text;
}
.notes-area hr{border:none;border-top:1px dashed var(--line);margin:10px 0;}
.notes-area:focus{outline:2px solid var(--accent-2-soft);outline-offset:-1px;}
.notes-entry{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.notes-entry:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
/* ノート欄内は書き込み元(直訳クイック追加・AI解説・手書き)によらずフォント・色を
   統一する(以前は引用行だけ緑のJetBrains Monoになっており不揃いだった)。 */
.notes-entry-quote{font-family:Arial,'Helvetica Neue',sans-serif;font-size:13px;font-weight:700;color:#c1503f;margin-bottom:4px;}
.notes-entry-body{font-family:Arial,'Helvetica Neue',sans-serif;color:#000;white-space:pre-wrap;}
/* 「■ボトルネックポイント」で書き写した単語の強調表示。黒字と見分けやすいよう、
   青の中でも彩度・明度を上げた蛍光寄りの色にしている。 */
.unheard-highlight{color:#0057ff;}
/* 「この文を解説」②文構造分析の箇条書き(formatNoteBody側でMarkdownの
   - 箇条書きから変換)。white-space:pre-wrapの親の中でも余白が詰まりすぎない
   よう項目間に少し余白を持たせる。 */
.note-md-list{margin:4px 0 10px;padding-left:1.3em;white-space:normal;}
.note-md-list li{margin-bottom:6px;}
.note-md-list li:last-child{margin-bottom:0;}

.ask-ai-wrap{margin-top:14px;}
.ask-ai-row{display:flex;gap:8px;}
.ask-ai-input{
  flex:1 1 auto;min-width:0;
  background:#faf7ee;border:1px solid var(--line);color:var(--text);border-radius:6px;
  padding:8px 10px;font-size:13px;font-family:'Noto Sans JP',sans-serif;
}
.ask-ai-input:focus{outline:2px solid var(--accent-2-soft);border-color:transparent;}
.ask-ai-answer{
  margin-top:10px;background:#faf7ee;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font-size:13px;line-height:1.7;white-space:pre-wrap;
}
.ask-ai-answer > div:not(:first-child){margin-top:10px;}
.ask-ai-answer-entry{color:var(--text-soft);}

.pdf-explain-wrap{margin-top:14px;}
.pdf-explain-images{margin-top:10px;display:flex;flex-direction:column;gap:10px;}
.pdf-explain-img{max-width:100%;border:1px solid var(--line);border-radius:8px;display:block;}

/* 1.5倍サイズ(旧: padding 8px 14px / gap 10px)。アイコン・時刻・トラックなど
   一連の要素も全て同じ比率で拡大している。 */
.audio-player{
  display:flex;align-items:center;gap:15px;
  background:#faf7ee;border:1px solid var(--line);border-radius:10px;
  padding:12px 21px;margin:6px 6px 6px 0;
}
.audio-player-sticky{
  position:sticky;
  top:var(--sticky-top-h, 80px);
  z-index:20;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.player-restart{
  background:none;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0;
  color:var(--text-soft);width:27px;text-align:center;
}
.player-back5{
  background:none;border:none;font-size:16px;font-weight:700;line-height:1;cursor:pointer;padding:0;
  color:var(--text-soft);width:36px;text-align:center;font-family:'JetBrains Mono',monospace;
}
.player-toggle{
  background:none;border:none;font-size:23px;line-height:1;cursor:pointer;padding:0;
  color:var(--accent-2);width:33px;text-align:center;
}
.player-toggle:disabled{opacity:.5;cursor:default;}
.player-loop{
  background:none;border:none;font-size:24px;line-height:1;cursor:pointer;padding:0;
  color:var(--text-soft);width:30px;text-align:center;opacity:.5;
}
.player-loop.active{color:var(--accent-2);opacity:1;}
.player-time{
  font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--text-soft);min-width:48px;
}
.player-track-row{
  display:flex;align-items:center;gap:15px;
  flex:1 1 auto;min-width:0;
}
.player-track{
  flex:1 1 auto;height:9px;background:var(--line);border-radius:4px;overflow:hidden;
  cursor:pointer;position:relative;
}
.player-fill{height:100%;width:0%;background:var(--accent-2);transition:width .1s linear;pointer-events:none;}
.player-rate{
  display:flex;align-items:center;gap:3px;flex:0 0 auto;
}
.player-rate-btn{
  background:none;border:none;font-size:17px;line-height:1;cursor:pointer;padding:0 3px;
  color:var(--text-soft);
}
.player-rate-btn:hover:not(:disabled){color:var(--accent-2);}
.player-rate-btn:disabled{opacity:.35;cursor:default;}
.player-rate-label{
  font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--text-soft);min-width:39px;text-align:center;
}
.audio-player-error{
  margin:4px 4px 4px 0;
  padding:8px 14px;
  background:#fbeae6;
  border:1px solid var(--danger, #c1503f);
  border-radius:8px;
  color:var(--danger, #c1503f);
  font-size:13px;
  line-height:1.6;
}

.question-photo{
  display:block;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  margin:8px auto;
  background:var(--paper-2);
}

.passage-photo-wrap{width:100%;}
.passage-photo{
  display:block;
  max-width:100%;
  margin:0 auto;
  border-radius:4px;
  background:var(--paper-2);
  cursor:pointer;
}
.doc-box.has-photo{background:var(--paper-2);}
.passage-text-view{
  width:100%;
  box-sizing:border-box;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 18px;
  font-size:15.5px;
  line-height:1.9;
  white-space:pre-wrap;
  cursor:pointer;
}
.passage-photo-hint{
  text-align:center;
  font-size:12px;
  color:var(--text-soft);
  margin-top:6px;
}

.training-wrap{padding:4px 0;}
.training-title{
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  color:var(--accent-2);
  font-size:14px;
  margin-bottom:10px;
}
.training-hint{
  font-size:12px;
  color:var(--text-soft);
  margin-top:10px;
  line-height:1.6;
}
.dictation-display{
  font-family:'JetBrains Mono',monospace;
  font-size:17px;
  line-height:2;
  letter-spacing:.02em;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 18px;
  margin-top:10px;
  min-height:60px;
  word-break:break-word;
}
.dict-ok{color:var(--ok);}
.dict-ng{color:var(--danger);text-decoration:underline wavy var(--danger);}
.dict-pending{color:#c7bfa8;}
.shadowing-text{
  font-size:17px;
  line-height:1.8;
  white-space:pre-wrap;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 18px;
  margin-top:10px;
}
.shadowing-text-ja{
  font-size:14px;
  line-height:1.8;
  white-space:pre-wrap;
  color:var(--text-soft);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 18px;
  margin-top:8px;
}

.landing-nav{margin-top:16px;}

.part-overview-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.empty-state-layout{display:flex;gap:20px;align-items:flex-start;}
.empty-state-main{flex:1 1 auto;min-width:0;}

.history-sidebar{
  flex:0 0 20%;
  min-width:180px;
  max-width:260px;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  position:sticky;
  top:var(--sticky-top-h, 80px);
  max-height:calc(100vh - var(--sticky-top-h, 80px) - 20px);
  overflow-y:auto;
}
.history-sidebar-title{
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  margin-bottom:10px;
}
.history-sidebar-empty{
  font-size:12.5px;
  color:var(--text-soft);
  margin:0;
}
.history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 0;
  border-bottom:1px dashed var(--line);
}
.history-item:last-child{border-bottom:none;}
.history-item-label{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text);
  flex:1 1 auto;
  min-width:0;
}
.history-item-date{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  color:var(--text-soft);
  flex:0 0 auto;
  white-space:nowrap;
}
.history-item-badge{
  font-weight:700;
  font-size:13px;
  width:18px;
  text-align:center;
  flex:0 0 auto;
}
.history-item-badge.correct{color:var(--ok);}
.history-item-badge.wrong{color:var(--danger);}
.history-item-badge.unknown{color:var(--text-soft);}

.history-item.has-note{cursor:pointer;}
.history-item.has-note .history-item-label{border-bottom:1px dotted var(--accent-2);}

.history-item-delete{
  flex:0 0 auto;
  background:none;border:none;color:var(--text-soft);
  font-size:13px;font-weight:700;line-height:1;padding:0 0 0 4px;
  opacity:0;cursor:pointer;
}
.history-item:hover .history-item-delete{opacity:1;}
.history-item-delete:hover{color:var(--danger);filter:none;}
.history-week-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.history-week-nav-btn{
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 10px;
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.history-week-nav-btn:hover:not(:disabled){background:var(--accent-2-soft);filter:none;}
.history-week-nav-btn:disabled{opacity:.4;cursor:default;}
.history-week-nav-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--text-soft);
}

.history-delete-confirm{
  position:absolute;
  z-index:95;
  display:none;
  min-width:200px;
  background:var(--ink-2);
  color:var(--paper);
  border-radius:8px;
  padding:12px 14px;
  font-size:12.5px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.history-delete-confirm.show{display:block;}
.history-delete-confirm-text{margin-bottom:10px;}
.history-delete-confirm-actions{display:flex;gap:8px;justify-content:flex-end;}
.history-delete-confirm-cancel{
  background:none;color:var(--paper);border:1px solid #333f4b;
  font-size:12px;padding:5px 10px;border-radius:6px;
}
.history-delete-confirm-cancel:hover{background:#333f4b;filter:none;}
.history-delete-confirm-ok{
  background:var(--danger);color:#fff;border:none;
  font-size:12px;padding:5px 10px;border-radius:6px;
}

.history-note-popup{
  position:absolute;
  z-index:90;
  display:none;
  max-width:850px;
  min-width:550px;
  max-height:min(800px, 80vh);
  overflow-y:auto;
  background:var(--ink-2);
  color:var(--paper);
  border-radius:8px;
  padding:24px 28px;
  font-size:15.5px;
  line-height:1.8;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.history-note-popup.show{display:block;}
.history-note-popup-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  margin-bottom:6px;
}
.history-note-popup hr{border:none;border-top:1px solid #333f4b;margin:16px 0;}
/* .notes-entry-quoteの赤(#c1503f)は暗い背景でもある程度読めるが、念のため
   このポップアップの中だけ少し明るい赤に上書きする(JS側のsanitizeNoteHtml
   ForDarkPopupはinline colorのみ対象でクラス指定の色は拾えないため)。 */
.history-note-popup .notes-entry-quote{color:#e2897a;}
/* .notes-entry-body(ノート本文)は#000(黒)をクラス指定しているため、暗い背景の
   このポップアップの中では黒文字に黒背景で読めなくなる。同じ理由でここだけ
   明るい色に上書きする。 */
.history-note-popup .notes-entry-body{color:#e8e8e8;}
/* .ask-ai-answer-entry(AIに質問するの回答文)も同じ理由(var(--text-soft)は明るい
   背景前提の色でクラス指定のためJS側では拾えない)で、このポップアップの中だけ
   明るい色に上書きする。 */
.history-note-popup .ask-ai-answer-entry{color:#c7cfd6;}
.history-note-popup-link{
  display:block;
  margin-top:16px;
  background:none;color:var(--accent);border:1px solid var(--accent);
  font-size:13px;font-weight:700;padding:8px 14px;border-radius:8px;
  cursor:pointer;
}
.history-note-popup-link:hover{background:rgba(255,207,77,.12);filter:none;}
@media (max-width:900px){
  .history-note-popup{min-width:0;max-width:calc(100vw - 32px);}
}

@media (max-width:720px){
  .empty-state-layout{flex-direction:column;}
  /* .empty-state-layoutはalign-items:flex-start(内容に応じた幅)のため、
     縦積みになるこの幅では.empty-state-mainも中身(長い英文等)の幅に
     引きずられて広がってしまう。明示的に幅いっぱいに固定する。 */
  .empty-state-main{width:100%;}
  .history-sidebar{
    max-width:100%;
    width:100%;
    position:static;
    max-height:300px;
  }
}
.landing-test{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 16px;
  margin-bottom:12px;
  background:#faf7ee;
}
.landing-test summary{
  cursor:pointer;
  list-style:none;
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  color:var(--accent-2);
  font-size:15px;
}
.landing-test summary::-webkit-details-marker{display:none;}
.landing-test summary::before{content:'▸ ';}
.landing-test[open] summary::before{content:'▾ ';}
.landing-parts{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.landing-part{
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  background:var(--paper-2);
}
.landing-part summary{
  cursor:pointer;
  list-style:none;
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  padding:2px 0;
}
.landing-part summary::-webkit-details-marker{display:none;}
.landing-part summary::before{content:'▸ ';color:var(--accent-2);}
.landing-part[open] summary::before{content:'▾ ';}
.landing-units{
  display:flex;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.landing-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
}
@media (max-width:480px){.landing-units{flex-direction:column;}}
.landing-units .loading{font-size:12.5px;color:var(--text-soft);padding:4px 0;}

.unit-group{
  break-inside:avoid;
  display:flex;
  flex-direction:column;
  margin-bottom:6px;
  padding:6px;
  border:1px dashed var(--line);
  border-radius:8px;
}
.unit-group .unit-row:last-child{margin-bottom:0;}
.unit-group-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--accent-2);
  padding:0 2px 4px;
}
.unit-row{
  break-inside:avoid;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  margin-bottom:6px;
  border-radius:6px;
  background:#faf7ee;
  border:1px solid var(--line);
}
.unit-row:hover{background:var(--accent-2-soft);border-color:var(--accent-2);}
.unit-link{
  color:var(--text);
  text-decoration:none;
  font-size:12.5px;
  font-family:'JetBrains Mono',monospace;
  flex:1 1 auto;
  min-width:0;
}
.unit-row:hover .unit-link{color:var(--accent-2);}

.attempt-meter{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.meter-dots{display:flex;align-items:center;gap:2px;flex-wrap:wrap;max-width:64px;}
.meter-dot{
  width:6px;height:6px;border-radius:1.5px;
  background:var(--line);
}
.meter-dot.filled.correct{background:var(--ok);}
.meter-dot.filled.wrong{background:var(--danger);}
.meter-count{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-soft);
  min-width:18px;
  text-align:right;
}
.meter-btn{
  width:20px;height:20px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--text);
  font-size:12px;
  line-height:1;
  padding:0;
}
.meter-btn:hover{border-color:var(--accent-2);color:var(--accent-2);filter:none;}
.meter-btn:disabled{opacity:.4;filter:none;}

.stats-dashboard{margin-bottom:20px;}
/* リング(今週の学習時間)/今週の学習状況/右カラム(総学習時間・総学習回数・
   連続学習日数を縦に3枚)の3レーン。真ん中の「今週の学習状況」だけ幅を
   広めに取り、左右はその分狭める。高さはalign-items:stretchにより、
   最も内容の多いレーン(通常は右カラムの3枚分)に自然に揃う。 */
.dashboard-top{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr) minmax(0,0.85fr);
  gap:20px;
  align-items:stretch;
}
.dashboard-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* 右カラムの3枚は、内容量の差(自己ベスト行の有無等)によらず高さを均等に
   3等分する。 */
.dashboard-col > .stat-card{flex:1 1 0;}
@media (max-width:720px){
  .dashboard-top{grid-template-columns:1fr;}
}

.week-ring-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.week-ring-wrap{position:relative;width:180px;height:180px;}
.week-ring-svg{width:100%;height:100%;transform:rotate(-90deg);}
.week-ring-track{fill:none;stroke:var(--line);stroke-width:11;}
.week-ring-progress{
  fill:none;stroke:var(--accent-2);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset .3s ease;
}
.week-ring-center{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.week-ring-value{
  font-family:'JetBrains Mono',monospace;
  font-size:28px;font-weight:700;color:var(--text);
}
.week-ring-legend{
  margin-top:16px;font-size:14px;color:var(--text-soft);text-align:center;
}
.legend-dot{
  display:inline-block;width:10px;height:10px;border-radius:2px;
  background:var(--accent-2);margin-right:6px;
}
.legend-goal{display:block;font-size:12.5px;margin-top:4px;}
.ring-goal-btn{margin-top:14px;}

.stat-card{
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  flex:1 1 auto;
}
/* 総学習時間・総学習回数・連続学習日数のような単純な数値カードは、
   縦横とも中央寄せにする(週間状況カードは左寄せのまま据え置き)。 */
.stat-card-centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.stat-card-title{
  font-size:14px;
  color:var(--text-soft);
  margin-bottom:10px;
}
.stat-card-value{
  font-family:'JetBrains Mono',monospace;
  font-size:30px;
  font-weight:700;
  color:var(--accent-2);
}
.stat-card-best{
  font-size:13px;
  color:var(--text-soft);
  margin-top:8px;
}

.week-chart{
  display:flex;
  justify-content:space-between;
  gap:6px;
}
/* 「今週の学習状況」カードは、リングと高さを揃えるため縦に余白ができやすい。
   その余白をインジケータ(バー)自体の長さに使う: カードを縦のflexにして
   week-chartを伸縮させ、各バーの高さもそれに合わせて伸びるようにする。 */
.stat-card-week{
  display:flex;
  flex-direction:column;
}
.stat-card-week .week-chart{
  flex:1 1 auto;
}
.week-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex:1 1 0;
  min-width:0;
}
.week-bar-count{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--text-soft);
}
.week-bar-track{
  width:14px;
  height:56px;
  background:var(--line);
  border-radius:4px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.stat-card-week .week-bar-track{
  flex:1 1 auto;
  height:auto;
  min-height:56px;
}
.week-bar-fill{
  width:100%;
  background:var(--accent-2);
  border-radius:4px;
}
.week-day-label{
  font-size:12.5px;
  color:var(--text-soft);
}
.week-day-label.today{color:var(--accent-2);font-weight:700;}

.week-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:10px;
}
.week-nav-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:6px;
  padding:5px 12px;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
}
.week-nav-btn:hover:not(:disabled){background:var(--accent-2-soft);}
.week-nav-btn:disabled{opacity:.4;cursor:default;}
.week-nav-label{
  font-size:13px;
  color:var(--text-soft);
  font-family:'JetBrains Mono',monospace;
}

.dashboard-actions{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.coach-box{
  width:100%;
  box-sizing:border-box;
  margin-top:16px;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
}
.coach-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:8px;
}
.coach-label{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.coach-status{
  font-size:12.5px;
  color:var(--text-soft);
}
.coach-textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:110px;
  font-family:inherit;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
}
.coach-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:10px;
}
.coach-nav-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:6px;
  padding:5px 12px;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
}
.coach-nav-btn:hover:not(:disabled){background:var(--accent-2-soft);}
.coach-nav-btn:disabled{opacity:.4;cursor:default;}
.coach-nav-date{
  font-size:12.5px;
  color:var(--text-soft);
  font-family:'JetBrains Mono',monospace;
}

.prev-study-box{
  width:100%;
  box-sizing:border-box;
  margin-top:16px;
  background:#faf7ee;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
}
.prev-study-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:10px;
}
.prev-study-label{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  justify-self:start;
}
.prev-study-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.prev-study-empty{
  font-size:13px;
  color:var(--text-soft);
  margin:0;
}
.prev-study-playall{
  justify-self:center;
  border:1px solid var(--accent-2);
  background:var(--accent-2-soft);
  color:var(--text);
  border-radius:6px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.prev-study-playall:hover:not(:disabled){filter:brightness(0.97);}
.prev-study-playall:disabled{opacity:.5;cursor:default;}
.prev-study-playall.is-playing{background:var(--danger-soft, #f4d9d4);border-color:var(--danger, #c1503f);}
.prev-study-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.prev-study-play{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#fff;
  color:var(--accent-2);
  border-radius:50%;
  width:26px;
  height:26px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.prev-study-play:hover{background:var(--accent-2-soft);}
.prev-study-play.is-playing{color:var(--danger, #c1503f);border-color:var(--danger, #c1503f);}
.prev-study-text{
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  color:var(--text-soft);
  line-height:1.5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.prev-study-text:hover{color:var(--text);}
.prev-study-popup{
  position:absolute;
  z-index:90;
  display:none;
  max-width:850px;
  min-width:550px;
  max-height:min(800px, 80vh);
  overflow-y:auto;
  background:var(--ink-2);
  color:var(--paper);
  border-radius:8px;
  padding:24px 28px;
  font-size:15.5px;
  line-height:1.8;
  white-space:pre-wrap;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.prev-study-popup.show{display:block;}
.prev-study-error{
  margin-top:10px;
  padding:8px 14px;
  background:#fbeae6;
  border:1px solid var(--danger, #c1503f);
  border-radius:8px;
  color:var(--danger, #c1503f);
  font-size:13px;
  line-height:1.6;
}
@media (max-width:900px){
  .prev-study-popup{min-width:0;max-width:calc(100vw - 32px);}
}

@media (max-width:520px){
  .wrap{padding:20px 12px 60px;}
  header.app-header{gap:10px;padding-top:40px;}
  header.app-header .header-save{top:0;right:0;}
  .stopwatch{position:static;transform:none;justify-content:center;margin-top:8px;}
  /* part-jump-selectも本来はデスクトップ幅を前提に左端へ絶対配置しているため、
     画面が狭いと中央寄せのnav-clusterと重なってしまう。stopwatchと同様、
     通常のフローに戻して縦積みにする。 */
  .part-jump-select{position:static;transform:none;max-width:100%;margin-bottom:8px;}
  .practice-header{flex-wrap:wrap;}
  /* 1.5倍サイズにした音声プレーヤーは、ボタン一式+再生速度ボタンが横一列だと
     幅の狭い画面に収まらずはみ出すため、折り返し、再生速度ボタンは2行目に
     単独で回す。 */
  .audio-player{flex-wrap:wrap;row-gap:8px;}
  /* シークバー(再生位置)は、ボタン一式と横並びだと押しつぶされて細くなり
     操作しづらいため、単独で1行まるごと使い、太さも少し確保する。 */
  .player-track-row{flex:1 1 100%;order:1;}
  .player-track{height:14px;}
  .player-rate{flex:1 1 100%;justify-content:center;order:2;}
  /* 「前回学習した問題」の見出し行(ラベル|まとめて再生ボタン|余白の3列)も、
     幅の狭い画面ではラベルが折り返してボタンと詰まって見えるため、縦積みにする。 */
  .prev-study-header{grid-template-columns:1fr;justify-items:start;row-gap:8px;}
  .prev-study-playall{justify-self:start;}
  /* Part6/7の本文テキスト表示は、周りの余白に関係なく画面の横幅いっぱいまで
     広げる(いわゆるfull-bleed)。角丸・左右paddingはそのまま、画面端までは
     はみ出させる。 */
  .passage-text-view{
    width:100vw;
    max-width:100vw;
    margin-left:calc(-50vw + 50%);
    border-radius:0;
    border-left:none;
    border-right:none;
  }
}