/* スペイン語学習コンテンツ（辞書・早見表・リスニング・スピーキング・トップメニュー）共通スタイル。
   各固定ページのpost_content内に別々に<style>を持たせていたため背景色などの表記が
   ページごとに少しずつ食い違っていた問題を解消するため、1ファイルに一本化した。
   色の基準値はこのファイルだけが持ち、各ページのHTML側はクラス名だけを参照する。 */

:root {
  --eqp-es-navy: #1C2B4A;
  --eqp-es-gold: #B8860B;
  --eqp-es-border: #e2e2e2;
  --eqp-es-border-strong: #ccc;
  --eqp-es-muted: #888;
  --eqp-es-stripe: #f7f7f9;
  --eqp-es-lv-a1: #4CAF50;
  --eqp-es-lv-a2: #8BC34A;
  --eqp-es-lv-b1: #FFA726;
  --eqp-es-lv-b2: #FB8C00;
  --eqp-es-lv-c1: #E53935;
  --eqp-es-lv-c2: #8E24AA;
  --eqp-es-correct: #2E7D32;
  --eqp-es-wrong: #C62828;
}

.eqp-vocab-back { display: inline-block; margin: 0 0 20px; color: var(--eqp-es-navy); font-weight: 700; text-decoration: none; }

/* 早見表テーブル（動詞・名詞・形容詞/副詞で共用） */
.eqp-vocab-table-wrap { overflow-x: auto; margin: 0 0 28px; }
.eqp-vocab-section-title { font-size: 17px; font-weight: 700; color: var(--eqp-es-navy); margin: 32px 0 10px; padding-bottom: 4px; border-bottom: 2px solid var(--eqp-es-navy); }
.eqp-vocab-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14px; }
.eqp-vocab-table th { background: var(--eqp-es-navy); color: #fff; text-align: left; padding: 8px 10px; white-space: nowrap; }
.eqp-vocab-table td { padding: 7px 10px; border-bottom: 1px solid var(--eqp-es-border); }
.eqp-vocab-table tr:nth-child(even) td { background: var(--eqp-es-stripe); }
.eqp-vocab-note { font-size: 13px; color: var(--eqp-es-muted); margin: 4px 0 0; }
.eqp-vocab-gender-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 8px; color: #fff; }
.eqp-vocab-gender-badge.m { background: #1565C0; }
.eqp-vocab-gender-badge.f { background: #C2185B; }
.eqp-vocab-gender-badge.mf { background: #6A1B9A; }

/* トップメニュー（/estudio-espanol/） */
.eqp-spanish-menu-section { margin: 24px 0; }
.eqp-spanish-menu-heading { font-size: 18px; font-weight: 700; color: var(--eqp-es-navy); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--eqp-es-navy); }
.eqp-spanish-menu-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
@media (min-width: 600px) { .eqp-spanish-menu-grid { grid-template-columns: repeat(2, 320px); } }
.eqp-spanish-menu-item { display: flex; align-items: center; gap: 12px; height: 80px; background: var(--eqp-es-navy); color: #fff !important; text-decoration: none !important; border-radius: 8px; padding: 0 16px; box-sizing: border-box; transition: opacity 0.2s; }
.eqp-spanish-menu-item:hover { opacity: 0.85; }
.eqp-spanish-menu-item .eqp-menu-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.eqp-spanish-menu-item .eqp-menu-text { display: flex; flex-direction: column; overflow: hidden; }
.eqp-spanish-menu-item .eqp-menu-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqp-spanish-menu-item .eqp-menu-sub { font-size: 12px; font-weight: 400; opacity: 0.85; margin-top: 2px; }
.eqp-spanish-menu-item.is-ref { background: var(--eqp-es-gold); }
.eqp-spanish-menu-note { font-size: 13px; color: var(--eqp-es-muted); margin-top: 8px; }

/* レベル・モード切り替えチップ（リスニング・スピーキング共用） */
.eqp-es-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.eqp-es-chip { border: 1px solid var(--eqp-es-navy); background: #fff; color: var(--eqp-es-navy); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 14px; cursor: pointer; }
.eqp-es-chip.active { background: var(--eqp-es-navy); color: #fff; }

/* リスニング練習 */
.eqp-lst-wrap { max-width: 640px; }
.eqp-lst-card { border: 2px solid var(--eqp-es-navy); border-radius: 10px; padding: 20px; margin: 16px 0; text-align: center; }
.eqp-lst-play { background: var(--eqp-es-navy); color: #fff; border: none; border-radius: 50%; width: 72px; height: 72px; font-size: 28px; cursor: pointer; margin: 0 0 14px; }
.eqp-lst-play:hover { opacity: 0.85; }
.eqp-lst-input { width: 100%; box-sizing: border-box; font-size: 18px; padding: 10px 12px; border: 2px solid var(--eqp-es-navy); border-radius: 6px; margin: 0 0 10px; text-align: center; }
.eqp-lst-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.eqp-lst-action-btn { background: var(--eqp-es-gold); color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-size: 15px; font-weight: 700; cursor: pointer; }
.eqp-lst-action-btn.secondary { background: var(--eqp-es-muted); }
.eqp-lst-action-btn:disabled { opacity: 0.4; cursor: default; }
.eqp-lst-result { margin: 14px 0 0; font-size: 16px; font-weight: 700; min-height: 24px; }
.eqp-lst-result.correct { color: var(--eqp-es-correct); }
.eqp-lst-result.wrong { color: var(--eqp-es-wrong); }
.eqp-lst-answer { font-size: 14px; color: #555; margin: 6px 0 0; }
.eqp-lst-score { font-size: 13px; color: var(--eqp-es-muted); text-align: center; margin: 0 0 10px; }
.eqp-lst-note { font-size: 12px; color: var(--eqp-es-muted); margin: 10px 0 0; text-align: center; }

/* スピーキング練習 */
.eqp-spk-wrap { max-width: 640px; }
.eqp-spk-card { border: 2px solid var(--eqp-es-navy); border-radius: 10px; padding: 20px; margin: 16px 0; text-align: center; }
.eqp-spk-ja { font-size: 22px; font-weight: 700; color: var(--eqp-es-navy); margin: 0 0 4px; }
.eqp-spk-pos { font-size: 12px; color: var(--eqp-es-muted); margin: 0 0 16px; }
.eqp-spk-mic { background: var(--eqp-es-wrong); color: #fff; border: none; border-radius: 50%; width: 80px; height: 80px; font-size: 32px; cursor: pointer; margin: 0 0 10px; }
.eqp-spk-mic:hover { opacity: 0.85; }
.eqp-spk-mic.listening { background: #E53935; animation: eqp-es-pulse 1s infinite; }
@keyframes eqp-es-pulse { 0% { box-shadow: 0 0 0 0 rgba(198,40,40,0.5); } 70% { box-shadow: 0 0 0 16px rgba(198,40,40,0); } 100% { box-shadow: 0 0 0 0 rgba(198,40,40,0); } }
.eqp-spk-hint { background: none; border: none; color: var(--eqp-es-navy); text-decoration: underline; font-size: 13px; cursor: pointer; margin: 0 0 10px; display: block; width: 100%; }
.eqp-spk-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 0; }
.eqp-spk-action-btn { background: var(--eqp-es-gold); color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-size: 15px; font-weight: 700; cursor: pointer; }
.eqp-spk-result { margin: 14px 0 0; font-size: 16px; font-weight: 700; min-height: 24px; }
.eqp-spk-result.correct { color: var(--eqp-es-correct); }
.eqp-spk-result.wrong { color: var(--eqp-es-wrong); }
.eqp-spk-score { font-size: 13px; color: var(--eqp-es-muted); text-align: center; margin: 0 0 10px; }
.eqp-spk-note { font-size: 12px; color: var(--eqp-es-muted); margin: 10px 0 0; text-align: center; }