/* 問題演習アプリ override.css
   Etherforge フラット・エディトリアルデザインへの上書き
   index-DZowhv-u.css は変更しない */

/* 1. CSS 変数の上書き */
:root {
  --bg-top: #f4f1ed;
  --bg-bottom: #f4f1ed;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-line: #d4ccc5;
  --text-main: #1c1916;
  --text-sub: #6b6258;
  --accent: #e35b12;
  --accent-strong: #b84a0e;
  --shadow-soft: none;
  --shadow-card: none;
  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 4px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: #f4f1ed;
}

/* 2. 背景・グラデの除去 */
body {
  background: #f4f1ed !important;
}

.hero {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.quiz-shell {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.card {
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.section-header {
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.auth-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* 3. ナビバー（タブスタイルに変更） */
.nav-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #d4ccc5;
  padding: 0;
  background: #ffffff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav-bar::-webkit-scrollbar {
  display: none;
}

.nav-chip {
  border-radius: 0;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: #6b6258;
  padding: 0.6rem 0.9rem;
  font-size: 0.84rem;
  margin-bottom: -1px;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-chip.active {
  background: transparent;
  border-bottom-color: #e35b12;
  color: #e35b12;
  box-shadow: none;
}

.nav-chip:hover:not(.active) {
  background: transparent;
  transform: none;
  color: #1c1916;
}

/* 4. ボタン（グラデ除去） */
.btn-primary {
  background: #e35b12;
  box-shadow: none;
  border-radius: 4px;
}

.btn-primary:hover {
  background: #b84a0e;
  transform: none;
  box-shadow: none;
}

.btn-audio {
  background: #e35b12;
  box-shadow: none;
  border-radius: 4px;
}

.btn-audio:hover {
  transform: none;
}

.btn-audio.playing {
  background: #1c1916;
}

.btn-audio-big {
  background: #e35b12;
  box-shadow: none;
  border-radius: 4px;
}

.nav-chip.active .nav-badge {
  background: rgba(227, 91, 18, 0.3);
}

/* 5. その他 */
.summary-card {
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 4px;
}

.toeic-page-footer {
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 4px;
}

.toeic-page-footer p:last-child {
  display: none;
}

.hero-backlink,
.hero-profile-chip {
  border-radius: 4px;
  background: #f4f1ed;
}

.stat-chip {
  border-radius: 4px;
  background: #f4f1ed;
}

.phase-bar {
  border-radius: 4px;
}

.phase-step.phase-active {
  background: #e35b12;
}

.phase-step.phase-done {
  background: rgba(20, 134, 109, 0.09);
  color: #14866d;
}

.toeic-legal-note {
  max-width: 1120px;
  margin: 1.25rem auto 2.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d4ccc5;
  border-radius: 4px;
  background: #fff8ee;
  color: #4f453d;
  font-size: 0.92rem;
  line-height: 1.7;
}

.toeic-legal-note p {
  margin: 0;
}

.toeic-legal-note p + p {
  margin-top: 0.35rem;
}

/* ── 拡張機能: PC用ナビ ドロップダウン ── */
.ext-nav-select-wrap {
  display: block;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid #d4ccc5;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.ext-nav-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #f4f1ed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6258' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  border: 1px solid #d4ccc5;
  border-radius: 4px;
  padding: 0.5rem 2.2rem 0.5rem 0.75rem;
  font-size: 0.88rem;
  color: #1c1916;
  cursor: pointer;
  font-family: inherit;
}

.ext-nav-select:focus {
  outline: 2px solid #e35b12;
  outline-offset: 1px;
}

.nav-bar {
  display: none !important;
  overflow: hidden !important;
}

/* ── 拡張機能: TTS ボタン ── */
.ext-tts-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82em;
  margin-left: 0.35em;
  opacity: 0.45;
  padding: 0 0.1em;
  vertical-align: middle;
  line-height: 1;
  transition: opacity 0.15s;
}
.ext-tts-btn:hover { opacity: 0.85; }

/* ── 拡張機能: ダッシュボード（週次グラフ・スコア予測） ── */
#practice-ext-dashboard {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e8e2dc;
}
.ext-section-title {
  font-size: 0.77rem;
  font-weight: 600;
  color: #6b6258;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.ext-score-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.ext-score-chip {
  background: #f4f1ed;
  padding: 0.45rem 0.75rem;
  border-radius: 4px;
  min-width: 72px;
}
.ext-score-chip--total {
  background: #e35b12;
}
.ext-score-chip__label {
  font-size: 0.67rem;
  color: #6b6258;
}
.ext-score-chip--total .ext-score-chip__label {
  color: rgba(255,255,255,0.75);
}
.ext-score-chip__val {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c1916;
  line-height: 1.2;
}
.ext-score-chip--total .ext-score-chip__val {
  color: #fff;
}
.ext-weak-note {
  font-size: 0.74rem;
  color: #e35b12;
  margin-top: 0.5rem;
}
.ext-band-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.71rem;
  margin-bottom: 0.25rem;
}
.ext-band-name {
  width: 4.4rem;
  color: #6b6258;
  flex-shrink: 0;
}
.ext-band-bar {
  flex: 1;
  height: 6px;
  background: #e8e2dc;
  border-radius: 3px;
  overflow: hidden;
}
.ext-band-fill {
  height: 100%;
  background: #e35b12;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ext-band-pct {
  width: 2.4rem;
  text-align: right;
  color: #6b6258;
  flex-shrink: 0;
}
.ext-caption {
  font-size: 0.66rem;
  color: #9b8f85;
  margin-top: 0.5rem;
}

.practice-import-stats {
  margin: 0.75rem 0 0;
  font-size: 0.84rem;
  color: #6b6258;
}

.practice-import-stats__total,
.practice-import-stats__active {
  margin: 0;
}

.practice-import-stats__active {
  margin-top: 0.2rem;
}

.practice-import-stats__bands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.practice-import-stats__band {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border: 1px solid #d4ccc5;
  border-radius: 999px;
  background: #f4f1ed;
  color: #6b6258;
  font-size: 0.74rem;
  line-height: 1.2;
}

.practice-import-stats__band.is-active {
  border-color: #e35b12;
  background: #fff1e7;
  color: #b84a0e;
}

@media (max-width: 640px) {
  .app-shell {
    padding: 12px 10px 80px !important;
  }

  .hero,
  .auth-card,
  .card,
  .quiz-shell,
  .summary-card,
  .section-header,
  .toeic-page-footer,
  .toeic-legal-note {
    border-radius: 4px !important;
  }

  .hero,
  .auth-card,
  .card,
  .summary-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .quiz-body,
  .passage-card,
  .explanation-block,
  .phrase-block,
  .set-question-block {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .section-header {
    display: block !important;
    padding: 12px 14px !important;
  }

  .section-header h2 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
  }

  .section-header-caption {
    margin-top: 4px !important;
  }

  .review-tag {
    margin-top: 8px;
  }

  .ext-nav-select-wrap {
    padding: 0.5rem 0.75rem;
  }

  .ext-nav-select,
  .profile-controls select,
  .profile-create-row input,
  .profile-create-row button,
  .profile-controls button,
  .study-score-row select,
  .action-row > button,
  .action-row > select,
  .action-row > input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .study-score-row,
  .profile-card-main,
  .hero-topline,
  .action-row,
  .shadowing-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-stats,
  .type-count-row,
  .tier-row,
  .ext-score-row,
  .quiz-pills,
  .item-meta-row {
    gap: 6px;
  }

  .stat-chip {
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
  }

  .metric-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .phase-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
  }

  .phase-step {
    min-width: 0;
    padding: 9px 6px;
    font-size: 0.7rem;
  }

  .quiz-meta {
    padding: 12px 12px 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .quiz-progress-bar {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .quiz-pill,
  .item-title-pill,
  .item-stat-pill,
  .difficulty-pill,
  .mastery-pill,
  .count-pill,
  .tier-pill {
    font-size: 0.68rem;
    padding: 4px 8px;
  }

  .metric-title,
  .metric-value {
    text-align: left;
  }

  .list-summary {
    grid-template-columns: 1fr !important;
    gap: 6px;
    align-items: start;
  }

  .list-side {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .list-title,
  .list-preview,
  .passage-en,
  .feedback-text,
  .quiz-prompt,
  .response-box,
  .answer-textarea {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .choice-button {
    align-items: flex-start;
    padding: 11px 12px;
    gap: 10px;
  }

  .choice-letter {
    width: 24px;
    height: 24px;
    font-size: 0.74rem;
    margin-top: 1px;
  }

  .vocab-word {
    font-size: 1.7rem !important;
    line-height: 1.2;
  }

  .dict-segment,
  .shadowing-block,
  .feedback-block,
  .answer-reveal,
  .score-block {
    padding: 12px !important;
  }

  .dict-seg-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .seg-score-pill {
    margin-left: 0;
  }

  .dict-seg-input {
    min-height: 68px;
    font-size: 0.95rem;
  }

  .btn-play-seg,
  .btn-sm {
    width: auto;
    min-width: 0;
  }

  .feedback,
  .row-sub,
  .play-count-label,
  .score-label,
  .feedback-text,
  .passage-ja,
  .vocab-meaning {
    font-size: 0.8rem !important;
    line-height: 1.55;
  }

  .score-number {
    font-size: 2.6rem !important;
  }

  .passage-en {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
  }

  .list-detail,
  .data-row,
  .review-table-row {
    padding-left: 10px;
    padding-right: 10px;
  }

  .practice-import-stats__bands {
    gap: 0.3rem;
  }

  .practice-import-stats__band {
    font-size: 0.7rem;
    padding: 0.24rem 0.48rem;
  }

  .toeic-legal-note {
    margin: 1rem 10px 2rem;
    padding: 0.85rem 0.9rem;
    font-size: 0.84rem;
    line-height: 1.6;
  }
}

.ext-score-chip__meta {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #6b6258;
  font-weight: 600;
}
.ext-score-chip--total .ext-score-chip__meta {
  color: rgba(255,255,255,0.85);
}