/* =================================================================
 * toe900 共通CSS (Part 1〜7 / idioms / words detail ページ用)
 * 配置: https://toe900.com/css-part.css
 * 各detail.phpから <link rel="stylesheet" href="/css-part.css"> で読込
 * ================================================================= */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bl:#2E75B6;
  --bo:#e5e7eb;
  --mu:#6b7280;
  --bg:#f9fafb;
  --ca:#fff;
  --d470:#10b981;
  --d600:#3b82f6;
  --d730:#f59e0b;
  --d860:#ef4444;
  --d900:#8b5cf6;
  --ok:#10b981;
  --ng:#ef4444;
  --orange:#fa8231;
}

body{
  font-family:'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic',sans-serif;
  background:var(--bg);
  color:#111;
  line-height:1.7;
}

/* =====================================
 * ヘッダー
 * ===================================== */
#hd{display:flex;align-items:center;gap:8px;padding:14px 20px;background:var(--bl);font-size:.95rem}
.logo{font-weight:700;color:#fff;text-decoration:none;font-size:1.05rem}
.hds{color:#c5d9ea}
.hdl{color:#fff;text-decoration:none}
.hdl:hover{text-decoration:underline}
.hdc{color:#fff}

.fs-ctrl{display:flex;gap:4px;margin-left:auto}
.fs-ctrl button{padding:3px 9px;border:1px solid #c5d9ea;border-radius:4px;font-size:.75rem;color:#fff;background:rgba(255,255,255,.1);cursor:pointer;font-family:inherit}
.fs-ctrl button.active{background:#fff;color:var(--bl)}
.fs-ctrl button:hover{background:rgba(255,255,255,.25)}

/* =====================================
 * レイアウトコンテナ
 * ===================================== */
.wrap{max-width:960px;margin:0 auto;padding:20px}

/* =====================================
 * パンくず
 * ===================================== */
.bc{font-size:.82rem;color:var(--mu);margin-bottom:14px}
.bc a{color:var(--bl);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc .sep{margin:0 6px;color:var(--mu)}

/* =====================================
 * Admin バー
 * ===================================== */
.admin-bar{background:#1f2937;color:#fff;padding:10px 14px;border-radius:8px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.admin-bar .lbl{font-size:.75rem;font-weight:700;letter-spacing:.05em}
.admin-bar .btns{display:flex;gap:6px;flex-wrap:wrap}
.admin-bar .auto-btn,
.admin-bar .debug-btn{padding:6px 14px;border:none;border-radius:6px;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;font-family:inherit}
.admin-bar .auto-btn.off{background:var(--bl);color:#fff}
.admin-bar .auto-btn.on{background:#dc2626;color:#fff}
.admin-bar .debug-btn.off{background:var(--ok);color:#fff}
.admin-bar .debug-btn.on{background:var(--d730);color:#fff}
.admin-bar a:hover,
.admin-bar button:hover{opacity:.85}

/* =====================================
 * デバッグパネル
 * ===================================== */
.debug-panel{background:#0f172a;color:#93c5fd;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-family:Consolas,Monaco,'Courier New',monospace;font-size:.72rem;line-height:1.55}
.debug-panel .dbg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.debug-panel .dbg-head strong{color:#fbbf24;font-size:.95em;letter-spacing:.05em}
.debug-panel .dbg-toggle{background:#334155;color:#fff;border:none;border-radius:4px;padding:3px 9px;font-size:.9em;cursor:pointer;font-weight:700;font-family:inherit}
.debug-panel .dbg-toggle:hover{background:#475569}
.debug-panel .dbg-row{padding:2px 0;border-bottom:1px dotted #334155;word-break:break-all}
.debug-panel .dbg-row:last-child{border-bottom:none}
.debug-panel .dbg-k{color:#fbbf24;font-weight:700;margin-right:6px}
.debug-panel .dbg-v{color:#e2e8f0}
.debug-panel.collapsed .dbg-body{display:none}
.debug-panel pre{background:#1e293b;padding:6px 8px;border-radius:4px;margin:3px 0;overflow-x:auto;font-size:.7rem;color:#cbd5e1;white-space:pre-wrap;word-break:break-all}

/* =====================================
 * メタバー（問題番号 + タグ）
 * ===================================== */
.meta-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.q-code{font-weight:700;color:var(--bl);font-size:.95em}
.tags{display:flex;gap:6px;flex-wrap:wrap}

/* =====================================
 * バッジ（難易度・カテゴリ・情報）
 * ===================================== */
.bd{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.74rem;font-weight:600;border:1px solid transparent}
.bd.d470{background:#ecfdf5;color:#065f46;border-color:var(--d470)}
.bd.d600{background:#eff6ff;color:#1e40af;border-color:var(--d600)}
.bd.d730{background:#fffbeb;color:#92400e;border-color:var(--d730)}
.bd.d860{background:#fef2f2;color:#991b1b;border-color:var(--d860)}
.bd.d900{background:#f5f3ff;color:#5b21b6;border-color:var(--d900)}
.bd.bt{background:#fff7ed;color:#9a3412;border-color:var(--orange)}
.bd.bg-i{background:#fef3c7;color:#92400e;border-color:var(--d730)}

/* =====================================
 * カード
 * ===================================== */
.card{background:var(--ca);border:1px solid var(--bo);border-radius:12px;padding:20px;margin-bottom:16px}

/* =====================================
 * 選択肢ボタン - 標準フル幅 (Parts 2/3/5/6/7/idioms/words)
 * ===================================== */
.cbtn{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:var(--ca);border:1.5px solid var(--bo);border-radius:8px;cursor:pointer;font-size:.92rem;text-align:left;color:#111;line-height:1.55;font-family:inherit;transition:.15s;width:100%}
.cbtn:hover:not(:disabled){border-color:var(--bl);background:#eff6fb}
.cbtn.picked{border-color:var(--bl);background:#e0ecf7;font-weight:600}
.cbtn:disabled{cursor:default}
.cbtn.ok{background:#ecfdf5;border-color:var(--ok);color:#065f46}
.cbtn.ng{background:#fef2f2;border-color:var(--ng);color:#991b1b}
.clbl{font-weight:700;color:var(--bl);min-width:18px}
.cbtn.ok .clbl{color:var(--ok)}
.cbtn.ng .clbl{color:var(--ng)}

/* .cbtn.idk - Part 6 方式（5つ目の選択肢として並列） */
.cbtn.idk{border-style:dashed;color:var(--mu);background:#fafafa}
.cbtn.idk:hover:not(:disabled){border-color:var(--d730);background:#fffbeb;color:#92400e}
.cbtn.idk.picked{border-color:var(--d730);background:#fffbeb;color:#92400e;border-style:solid;font-weight:600}
.cbtn.idk .clbl{color:var(--mu)}
.cbtn.idk.picked .clbl{color:var(--d730)}

/* =====================================
 * 選択肢ボタン - レター専用グリッド (Part 1)
 * ===================================== */
.cbtn-letter{display:flex;align-items:center;justify-content:center;padding:14px 4px;border:2px solid var(--bo);border-radius:8px;cursor:pointer;transition:.15s;background:var(--ca);font-family:inherit}
.cbtn-letter:hover:not(:disabled){border-color:var(--bl);background:#e0ecf7}
.cbtn-letter.picked{border-color:var(--bl);background:#e0ecf7}
.cbtn-letter.ok{border-color:var(--ok);background:#ecfdf5}
.cbtn-letter.ng{border-color:var(--ng);background:#fef2f2}
.cbtn-letter:disabled{cursor:default}
.choice-label{font-weight:700;color:var(--bl);font-size:1.25rem}
.cbtn-letter.ok .choice-label{color:var(--ok)}
.cbtn-letter.ng .choice-label{color:var(--ng)}

/* Part 1 用「わからない」単独ボタン（レターgrid下） */
.cbtn-idk{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border:2px dashed var(--bo);border-radius:8px;background:#fafafa;color:var(--mu);cursor:pointer;font-size:.92rem;font-weight:600;font-family:inherit;transition:.15s}
.cbtn-idk:hover:not(:disabled){border-color:var(--d730);background:#fffbeb;color:#92400e}
.cbtn-idk.picked{border-color:var(--d730);background:#fffbeb;color:#92400e;border-style:solid}
.cbtn-idk:disabled{cursor:default;opacity:.7}

/* =====================================
 * 採点 / 解答を見るボタン
 * ===================================== */
.grade-btn{display:block;width:100%;padding:14px 20px;background:linear-gradient(135deg,var(--bl),#1a5a8a);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(46,117,182,.35);font-family:inherit}
.grade-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(46,117,182,.45)}
.grade-btn:disabled{background:#cbd5e1;cursor:not-allowed;box-shadow:none;color:#64748b}

/* =====================================
 * 解答ボックス（採点後表示）
 * ===================================== */
.ans{display:none;background:var(--ca);border:1px solid var(--bo);border-radius:12px;padding:16px;margin-top:16px}
.ans.show{display:block}
.ans h3{color:var(--bl);margin:0 0 12px;font-size:1.05rem;font-weight:700}

.answer-choice-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.answer-choice{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--bo);border-radius:8px;font-size:.92rem;color:var(--mu);background:var(--ca)}
.answer-choice.correct{background:#ecfdf5;border:2px solid var(--ok);color:#065f46}
.answer-choice.wrong{background:#fef2f2;border:2px solid var(--ng);color:#991b1b}
.answer-choice.idk-picked{background:#fffbeb;border:2px solid var(--d730);color:#92400e}
.answer-choice.idk-row{border:1.5px dashed var(--bo);background:#fafafa}

.ans-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;flex-shrink:0;font-weight:900;font-size:1rem;color:#fff}
.ans-badge.ok{background:var(--ok)}
.ans-badge.ng{background:var(--ng)}
.ans-badge.idk{background:var(--d730)}
.ans-badge-empty{display:inline-flex;width:28px;height:28px;flex-shrink:0}

.ans-letter{font-weight:700;min-width:24px;color:var(--bl)}
.answer-choice.correct .ans-letter{color:var(--ok)}
.answer-choice.wrong .ans-letter{color:var(--ng)}
.answer-choice.idk-picked .ans-letter{color:var(--d730)}
.ans-text{flex:1}

.ans-label{padding:3px 10px;color:#fff;border-radius:12px;font-size:.72rem;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.ans-label.ok{background:var(--ok)}
.ans-label.ng{background:var(--ng)}
.ans-label.idk{background:var(--d730)}

/* =====================================
 * 翻訳・解説
 * ===================================== */
.translations{margin:12px 0;padding:10px;background:#fafafa;border-radius:6px;font-size:.82rem}
.translations .t-item{margin-bottom:4px}
.translations .t-label{font-weight:700;color:var(--bl);margin-right:4px}

.explanation,
.exp{margin-top:12px;padding:12px;background:#eff5fa;border-left:4px solid var(--bl);border-radius:4px;line-height:1.7;font-size:.88rem;color:#1f2937}
.explanation{white-space:pre-wrap}

.cbox{font-size:.92rem;font-weight:700;color:#1a5a8a;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #c5d9ea}

.ex-block{margin-top:12px;font-size:.88rem;line-height:1.75;color:#1f2937}
.ex-block .lbl{font-weight:700;color:#1a5a8a;margin-right:4px}

.gtg{display:inline-block;margin-top:10px;padding:3px 9px;background:#e0ecf7;color:#1a5a8a;border-radius:10px;font-size:.74rem}

/* =====================================
 * ナビゲーション
 * ===================================== */
.nav-bottom,
.nav-btns{display:flex;gap:10px;margin-top:16px;justify-content:center;flex-wrap:wrap}
.btn,
.nav-btn{display:inline-block;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:700;border:none;cursor:pointer;font-size:.9rem;font-family:inherit;text-align:center}
.btn-next{background:var(--orange);color:#fff}
.btn-next:hover{background:#e55a2b}
.btn-back{background:var(--mu);color:#fff}
.btn-back:hover{opacity:.85}
.nav-btn{flex:1;border:2px solid var(--bl);background:var(--ca);color:var(--bl)}
.nav-btn.primary{background:var(--bl);color:#fff}
.nav-btn:hover{opacity:.85}

/* ページャ（一覧で使用想定） */
.pgr{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.pgr a{padding:10px 18px;border:1px solid var(--bo);border-radius:8px;text-decoration:none;color:var(--bl);font-size:.88rem;background:var(--ca)}
.pgr a:hover{background:#eff5fa;border-color:var(--bl)}
.pgr .rand{background:linear-gradient(135deg,var(--orange),#eb3b5a);color:#fff;border:none;font-weight:700}
.pgr .rand:hover{opacity:.9}

/* =====================================
 * 関連カード
 * ===================================== */
.related{background:var(--ca);border:1px solid var(--bo);border-radius:12px;padding:14px;margin-top:12px}
.related h3{margin:0 0 8px;color:var(--bl);font-size:.88rem;font-weight:700}
.related-list{display:flex;gap:8px;flex-wrap:wrap}
.related-card{background:#e0ecf7;border:1px solid #a8c9e6;border-radius:6px;padding:6px 10px;text-decoration:none;color:#111;font-size:.78rem}
.related-card .code{font-weight:700;color:var(--bl)}

/* =====================================
 * 結果ボックス
 * ===================================== */
#result-box,
.result-bar{background:var(--ca);border:1px solid var(--bo);border-radius:10px;padding:12px 16px;margin-top:16px;font-size:.88rem}
#result-box{padding:20px;text-align:center;display:none}
#result-box.show,
.result-bar.show{display:flex;align-items:center;justify-content:space-between;gap:10px}
#result-box h2{font-size:1.1rem;margin-bottom:6px}
.score-big{font-size:2.8rem;font-weight:900;color:var(--bl)}
.score-big.ok{color:var(--ok)}
.score-big.ng{color:var(--ng)}
.result-bar .rand-sm{padding:6px 14px;background:linear-gradient(135deg,var(--orange),#eb3b5a);color:#fff;border-radius:7px;text-decoration:none;font-weight:700;font-size:.82rem;white-space:nowrap}

/* =====================================
 * フッター
 * ===================================== */
.ft{text-align:center;padding:24px 16px;font-size:.8rem;color:var(--mu);border-top:1px solid var(--bo);margin-top:32px}
.ft a{color:var(--bl);text-decoration:none}
.ft a:hover{text-decoration:underline}

/* =====================================
 * 共通レスポンシブ
 * ===================================== */
@media(max-width:500px){
  .wrap{padding:14px}
  #hd{padding:12px 14px;font-size:.88rem}
  .result-bar{flex-wrap:wrap;gap:8px;font-size:.82rem}
  .result-bar .rand-sm{width:100%;text-align:center}
}