/* ============================================================
   toe900 共通CSS (css1.css)
   全Partのdetail.php / index.php / list.php で使用
   ============================================================ */

/* --- 変数 --- */
:root{--bl:#2563eb;--bo:#e5e7eb;--ca:#fff;--mu:#64748b;--tx:#0f172a;--bg:#f8fafc;--gn:#16a34a;--rd:#dc2626}

/* --- リセット --- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;font-size:1rem}

/* --- ヘッダー --- */
#hd{background:var(--ca);border-bottom:1px solid var(--bo);padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:.9rem;position:sticky;top:0;z-index:10}
.logo{font-weight:800;color:var(--bl);text-decoration:none;font-size:1rem}
.hds{color:var(--mu)}
.hdl{color:var(--bl);text-decoration:none}
.hdc{color:var(--mu)}

/* --- フォントサイズ切替 --- */
.fs-ctrl{margin-left:auto;display:flex;gap:4px}
.fs-btn{width:30px;height:30px;border:1px solid var(--bo);border-radius:6px;background:var(--ca);color:var(--mu);font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.fs-btn:hover{border-color:var(--bl);color:var(--bl)}
.fs-btn small{font-size:.6rem;margin-left:1px}

/* --- コンテナ --- */
.wrap{max-width:760px;margin:0 auto;padding:20px 16px}

/* --- パンくず --- */
.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 span{margin:0 6px}

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

/* --- メタ・バッジ --- */
.qmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px}
.bd{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;color:#fff}
.d470{background:#22c55e}.d600{background:#3b82f6}.d730{background:#f59e0b}.d860{background:#ef4444}.d900{background:#8b5cf6}
.bc1{display:inline-block;font-size:.76rem;padding:3px 10px;border-radius:20px;background:#eff6ff;color:var(--bl);font-weight:600}
.bc2{display:inline-block;font-size:.76rem;padding:3px 10px;border-radius:20px;background:#f1f5f9;color:var(--mu)}
.qid{font-size:.85rem;color:var(--mu);margin-bottom:14px}

/* --- ドキュメント風レイアウト --- */
.doc-email,.doc-notice,.doc-ad,.doc-article,.doc-chat{background:#fafbfc;border:1px solid var(--bo);border-radius:8px;padding:18px 20px;margin-bottom:20px;font-family:Georgia,'Times New Roman',serif;line-height:1.75;font-size:.95rem;color:#1f2937}
.doc-head{border-bottom:1px solid var(--bo);padding-bottom:10px;margin-bottom:14px;font-family:-apple-system,sans-serif;font-size:.85rem}
.doc-row{margin-bottom:3px}
.doc-lbl{font-weight:700;color:var(--mu);display:inline-block;min-width:55px}
.doc-body p{margin-bottom:10px}
.doc-body ul{margin:8px 0 12px 22px}
.doc-body li{margin-bottom:4px}
.doc-notice .doc-title{font-family:-apple-system,sans-serif;font-size:1.05rem;font-weight:800;text-align:center;letter-spacing:1px;border-bottom:2px solid #1f2937;padding-bottom:8px;margin-bottom:6px}
.doc-notice .doc-subtitle{font-family:-apple-system,sans-serif;font-size:.85rem;text-align:center;color:var(--mu);margin-bottom:14px}
.doc-ad-title{font-family:-apple-system,sans-serif;font-size:1.15rem;font-weight:800;text-align:center;color:var(--bl);margin-bottom:6px}
.doc-ad-tag{font-family:-apple-system,sans-serif;font-size:.85rem;text-align:center;color:var(--mu);font-style:italic;margin-bottom:14px;border-bottom:1px dashed var(--bo);padding-bottom:10px}
.doc-article-head{font-family:-apple-system,sans-serif;font-size:.75rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid #1f2937;padding-bottom:6px;margin-bottom:10px}
.doc-article-title{font-family:Georgia,serif;font-size:1.2rem;font-weight:700;line-height:1.4;margin-bottom:6px}
.doc-article-byline{font-family:-apple-system,sans-serif;font-size:.78rem;color:var(--mu);font-style:italic;margin-bottom:14px}
.doc-chat{font-family:-apple-system,sans-serif;background:#f0f9ff}
.doc-chat-head{font-size:.78rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--bo);padding-bottom:6px;margin-bottom:12px;text-align:center}
.doc-msg{background:var(--ca);border:1px solid var(--bo);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:.9rem}
.doc-msg-name{font-weight:700;color:var(--bl)}
.doc-msg-time{font-size:.75rem;color:var(--mu);margin-left:6px}

/* --- 設問ブロック --- */
.qblock{border-top:1px solid var(--bo);padding-top:18px;margin-top:18px}
.qblock:first-of-type{border-top:none;padding-top:0;margin-top:0}
.qnum{display:inline-block;background:var(--bl);color:#fff;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:6px;margin-bottom:8px}
.qtxt{font-size:1rem;font-weight:600;margin-bottom:14px;line-height:1.55}

/* --- 選択肢ボタン --- */
.chs{display:grid;grid-template-columns:1fr;gap:8px}
.cbtn{padding:11px 14px;border:2px solid var(--bo);border-radius:8px;background:var(--ca);font-size:.93rem;cursor:pointer;text-align:left;transition:all .15s;width:100%;line-height:1.5;display:flex;align-items:flex-start;gap:8px;font-family:inherit;color:var(--tx)}
.cbtn:hover:not(:disabled){border-color:var(--bl);background:#eff6ff}
.cbtn.picked{border-color:var(--bl);background:#dbeafe;font-weight:600}
.cbtn:disabled{cursor:default}
.cbtn.ok{background:#f0fdf4!important;border-color:var(--gn)!important;color:#14532d!important;font-weight:600}
.cbtn.ng{background:#fff1f2!important;border-color:var(--rd)!important;color:#991b1b!important}
.skip-btn{border-style:dashed;color:var(--mu);font-size:.85rem}
.skip-btn:hover:not(:disabled){border-color:var(--mu);background:#f8fafc}
.skip-btn.picked{border-color:#f59e0b;background:#fffbeb;color:#92400e}
.skip-btn.skipped{background:#fffbeb!important;border-color:#f59e0b!important;color:#92400e!important}
.clbl{font-weight:800;color:var(--mu);min-width:18px;flex-shrink:0;padding-top:1px}

/* --- 解説 --- */
.ans{display:none;margin-top:14px;background:#f8fafc;border:1px solid var(--bo);border-radius:8px;padding:14px}
.cbox{font-size:.95rem;font-weight:700;color:var(--gn);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--bo)}
.cbox.miss{color:var(--rd)}
.exp{font-size:.9rem;line-height:1.8;color:var(--tx);white-space:normal}
.ev{margin-top:10px;padding:8px 12px;background:#fffbeb;border-left:3px solid #f59e0b;font-size:.85rem;font-style:italic;color:#78350f}
.ev-lbl{font-weight:700;font-style:normal;color:#92400e;margin-right:6px}
.tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.qtag{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:10px;background:#f1f5f9;color:var(--mu)}

/* --- 対訳カード --- */
.translation-card{padding:20px}
.translation-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
@media(max-width:720px){.translation-grid{grid-template-columns:1fr;gap:12px}}
.translation-en,.translation-ja{background:#fafbfc;border:1px solid var(--bo);border-radius:8px;padding:14px}
.translation-en{border-left:3px solid var(--bl)}
.translation-ja{border-left:3px solid #16a34a}
.translation-label{font-size:.75rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bo)}
.translation-en .doc-email,.translation-en .doc-notice,.translation-en .doc-ad,.translation-en .doc-article,.translation-en .doc-chat{padding:0;border:none;background:transparent;margin:0;font-size:.88rem}
.doc-ja{font-size:.88rem;line-height:1.85;color:#1f2937;font-family:-apple-system,'Hiragino Sans','Yu Gothic',sans-serif}
.doc-ja p{margin-bottom:10px}
.doc-ja ul{margin:8px 0 12px 22px}
.doc-ja li{margin-bottom:4px}

/* --- 採点ボタン --- */
.grade-bar{margin-top:24px;padding-top:20px;border-top:2px solid var(--bo)}
.grade-btn{display:block;width:100%;padding:16px 20px;background:var(--bl);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.grade-btn:hover:not(:disabled){background:#1d4ed8}
.grade-btn:disabled{background:#94a3b8;cursor:not-allowed}
.grade-btn.done{background:var(--gn)}

/* --- 根拠ハイライト --- */
mark.ev-hl{background:#fef08a;padding:2px 4px;border-radius:3px;position:relative;display:inline;box-shadow:0 0 0 1px #ca8a04;font-style:normal}
mark.ev-hl[data-q="2"]{background:#bfdbfe;box-shadow:0 0 0 1px #2563eb}
mark.ev-hl[data-q="3"]{background:#bbf7d0;box-shadow:0 0 0 1px #16a34a}
mark.ev-hl[data-q="4"]{background:#fbcfe8;box-shadow:0 0 0 1px #db2777}
mark.ev-hl[data-q="5"]{background:#ddd6fe;box-shadow:0 0 0 1px #7c3aed}
.ev-qlabel{display:inline-block;background:#ca8a04;color:#fff;font-size:.7rem;font-weight:800;padding:1px 6px;border-radius:10px;margin-right:5px;vertical-align:middle;line-height:1.4}
mark.ev-hl[data-q="2"] .ev-qlabel{background:#2563eb}
mark.ev-hl[data-q="3"] .ev-qlabel{background:#16a34a}
mark.ev-hl[data-q="4"] .ev-qlabel{background:#db2777}
mark.ev-hl[data-q="5"] .ev-qlabel{background:#7c3aed}

/* --- ナビ（次の問題） --- */
.pgr{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.next-btn{flex:1;min-width:200px;padding:14px 18px;border-radius:10px;text-decoration:none;font-size:.92rem;font-weight:700;text-align:center;transition:all .15s}
.next-btn:first-child{background:var(--bl);color:#fff}
.next-btn:first-child:hover{background:#1d4ed8}
.next-btn.alt{background:var(--ca);color:var(--bl);border:2px solid var(--bl)}
.next-btn.alt:hover{background:#eff6ff}
.next-btn.list{background:var(--ca);color:var(--mu);border:1px solid var(--bo)}
.next-btn.list:hover{background:#f8fafc;border-color:var(--bl);color:var(--bl)}

/* --- フッター --- */
.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}

/* --- Part5用（穴埋め） --- */
.sentence{font-size:1.05rem;line-height:1.8;background:#f1f5f9;border-radius:8px;padding:14px 18px;border-left:4px solid var(--bl);margin-bottom:20px}
.blank,.blk{font-weight:700;color:var(--bl)}
@media(max-width:520px){.chs{grid-template-columns:1fr}}