/* 化学デジタル教科書 共通CSS */
:root {
      --accent: #1a6dd4; --accent-light: #eef4fc; --accent-border: #bad4f5;
      --black: #222; --gray-dark: #444; --gray: #777; --gray-light: #ccc;
      --gray-bg: #fafafa; --warm-bg: #f9f8f6; --white: #fff;
      --radius: 8px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color: var(--black); background: var(--warm-bg); line-height: 1.95; font-size: 16px; -webkit-font-smoothing: antialiased; }
    .container { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
    .breadcrumb { font-size: 12px; color: var(--gray); margin-bottom: 24px; }
    .breadcrumb a { color: var(--gray-dark); text-decoration: none; }
    .breadcrumb a:hover { color: var(--accent); }
    .article-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 40px 36px 48px; margin-bottom: 20px; }
    @media (max-width: 640px) { .article-card { padding: 28px 20px 36px; } }
    .article-header { margin-bottom: 40px; padding-bottom: 28px; }
    .article-chapter { display: inline-block; font-size: 12px; font-weight: 700; color: var(--white); background: var(--accent); padding: 3px 12px; border-radius: 3px; letter-spacing: 0.08em; margin-bottom: 12px; }
    .article-header h1 { font-size: 28px; font-weight: 900; line-height: 1.5; margin-bottom: 20px; }
    .article-lead { font-size: 15.5px; color: var(--gray-dark); line-height: 2; }
    .section { margin-bottom: 48px; }
    .section h2 { font-size: 20px; font-weight: 900; color: var(--black); margin-bottom: 24px; padding-bottom: 10px; border-bottom: 2px solid var(--black); display: flex; align-items: center; gap: 10px; }
    .section h2 .num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); color: var(--white); font-size: 15px; font-weight: 700; border-radius: 50%; flex-shrink: 0; }
    .section h3 { font-size: 17px; font-weight: 700; margin-top: 32px; margin-bottom: 14px; padding-left: 14px; border-left: 4px solid var(--accent); }
    .section p { margin-bottom: 18px; } .section ul, .section ol { margin-bottom: 18px; padding-left: 24px; } .section li { margin-bottom: 6px; }
    .kw { color: var(--accent); font-weight: 700; }
    .figure { margin: 28px 0; text-align: center; }
    .figure img { max-width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-sm); }
    .figure-caption { font-size: 12.5px; color: var(--gray); margin-top: 10px; line-height: 1.6; }
    table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
    th, td { padding: 10px 14px; border: 1px solid #ddd; text-align: left; line-height: 1.6; }
    th { background: var(--black); color: var(--white); font-weight: 600; font-size: 13px; }
    tr:nth-child(even) { background: #f7f7f5; }
    .yes { font-weight: 600; } .no { color: var(--gray); }
    .organelle { margin: 24px 0; padding: 20px 24px; background: var(--gray-bg); border-radius: var(--radius); }
    .organelle h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e0deda; }
    .organelle p { font-size: 15px; margin-bottom: 10px; } .organelle p:last-child { margin-bottom: 0; }
    .box-c { border-left: 4px solid var(--accent); padding: 16px 20px; margin: 28px 0; }
    .box-c .box-title { font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
    .box-c p, .box-c ul { font-size: 14.5px; line-height: 1.9; margin-bottom: 8px; } .box-c ul { padding-left: 20px; } .box-c li { margin-bottom: 4px; }
    .box-c-gray { border-left-color: var(--gray); } .box-c-gray .box-title { color: var(--gray-dark); }
    .essence-box { margin: 28px 0; padding: 20px 24px; background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-left: 4px solid #4caf50; border-radius: var(--radius); }
    .essence-box .essence-title { font-size: 16px; font-weight: 700; color: #2e7d32; margin-bottom: 10px; }
    .essence-box p { font-size: 15px; line-height: 1.9; margin-bottom: 8px; } .essence-box p:last-child { margin-bottom: 0; }
    .pitfall-box { margin: 28px 0; padding: 20px 24px; background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); border-left: 4px solid #ff9800; border-radius: var(--radius); }
    .pitfall-box .pitfall-title { font-size: 16px; font-weight: 700; color: #e65100; margin-bottom: 10px; }
    .pitfall-box p { font-size: 15px; line-height: 1.9; margin-bottom: 8px; } .pitfall-box p:last-child { margin-bottom: 0; }
    .reaction-box { margin: 20px 0; padding: 16px 24px; background: var(--gray-bg); border-radius: var(--radius); text-align: center; font-size: 16px; line-height: 2; }
    .reaction-box p { margin-bottom: 8px; } .reaction-box p:last-child { margin-bottom: 0; }
    /* ===== なぜ？ボックス ===== */
    .naze-box { margin: 28px 0; padding: 20px 24px; background: #fdf2f0; border: 1px solid #f0c0b8; border-radius: var(--radius); }
    .naze-box .naze-title { font-size: 15px; font-weight: 700; color: #c0392b; margin-bottom: 12px; }
    .naze-box .naze-title::before { content: "なぜ？ "; font-size: 14px; }
    .naze-chain { display: flex; flex-direction: column; gap: 0; margin: 12px 0; }
    .naze-chain .chain-item { padding: 10px 16px; background: var(--white); border: 1px solid #f0c0b8; border-radius: 6px; font-size: 14px; line-height: 1.7; }
    .naze-chain .chain-arrow { text-align: center; font-size: 18px; color: #c0392b; line-height: 1; padding: 2px 0; }
    /* ===== 科目バッジ ===== */
    .subject-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
    .subject-badge.chemistry { background: #1a6dd4; color: #fff; }
    .subject-badge.univ { background: var(--gray-dark); color: #fff; }
    .connection-list { list-style: none; padding-left: 0 !important; }
    .connection-list li { padding: 14px 18px; margin-bottom: 10px; background: var(--gray-bg); border-radius: 6px; font-size: 14.5px; line-height: 1.8; border-left: 3px solid var(--accent); }
    .connection-list li strong { color: var(--accent); }
    .summary { border: 2px solid var(--black); border-radius: var(--radius); padding: 28px; margin: 36px 0; }
    .summary h3 { border: none; padding: 0; margin-top: 0; margin-bottom: 16px; font-size: 16px; }
    .summary ul { padding-left: 20px; } .summary li { margin-bottom: 6px; font-size: 15px; }
    .quiz { background: var(--gray-bg); border-radius: var(--radius); padding: 28px; margin: 36px 0; }
    .quiz h3 { border: none; padding: 0; margin-top: 0; font-size: 16px; margin-bottom: 20px; }
    .quiz-item { margin-bottom: 20px; } .quiz-item p { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
    .quiz-answer { background: var(--white); border: 1px solid #e0deda; border-radius: 6px; padding: 12px 16px; font-size: 14px; cursor: pointer; line-height: 1.7; transition: all 0.15s; }
    .quiz-answer:hover { border-color: var(--accent); background: var(--accent-light); }
    .quiz-answer .answer-text { display: none; }
    .answer-prompt { color: var(--gray); font-size: 13px; }
    .page-nav { display: flex; justify-content: space-between; margin-top: 32px; font-size: 14px; }
    .page-nav a { color: var(--gray-dark); text-decoration: none; padding: 10px 16px; border: 1px solid var(--gray-light); border-radius: 6px; transition: all 0.15s; }
    .page-nav a:hover { border-color: var(--accent); color: var(--accent); }
    .term { border-bottom: 1px dotted var(--gray); cursor: help; position: relative; }
    .term:hover::after { content: attr(data-def); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--black); color: var(--white); padding: 8px 14px; border-radius: 6px; font-size: 13px; max-width: 280px; white-space: normal; z-index: 10; line-height: 1.6; box-shadow: var(--shadow-md); }
    .level-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 3px; letter-spacing: 0.05em; margin-right: 8px; }
    .level-a { background: var(--accent); color: var(--white); } .level-b { background: var(--black); color: var(--white); } .level-c { background: var(--gray-dark); color: var(--white); }
    .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 3px; border: 1px solid var(--gray-light); color: var(--gray-dark); margin-left: 6px; vertical-align: middle; }
    .mondai { margin: 28px 0; padding: 24px; border: 1px solid #e0deda; border-radius: var(--radius); background: var(--white); }
    .mondai-header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e0deda; }
    .mondai-number { font-size: 18px; font-weight: 900; color: var(--black); margin-right: 8px; }
    .mondai-body { margin-bottom: 20px; } .mondai-body p { margin-bottom: 12px; line-height: 1.9; font-size: 15px; }
    .mondai-body .choices { padding-left: 8px; margin: 12px 0; list-style: none; } .mondai-body .choices li { margin-bottom: 6px; padding-left: 0; line-height: 1.8; font-size: 15px; }
    .mondai-body .sub-q { margin-top: 16px; padding-left: 4px; } .mondai-body .sub-q p { font-size: 15px; }
    .mondai-answer { background: var(--gray-bg); border-radius: 6px; padding: 14px 18px; cursor: pointer; transition: all 0.15s; }
    .mondai-answer:hover { background: var(--accent-light); }
    .mondai-answer .answer-content { display: none; } .mondai-answer .answer-prompt { color: var(--gray); font-size: 13px; }
    .answer-box, .explain-box { margin-top: 16px; padding: 16px; background: var(--white); border-radius: 6px; border: 1px solid #e0deda; }
    .answer-label { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); display: inline-block; }
    .explain-label { font-size: 13px; font-weight: 700; color: var(--gray-dark); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--gray-light); display: inline-block; }
    .answer-box p, .explain-box p { font-size: 15px; line-height: 1.9; margin-bottom: 8px; } .answer-box p:last-child, .explain-box p:last-child { margin-bottom: 0; }
    .scoring-points { margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--accent); font-size: 14px; line-height: 1.8; }
    .scoring-points strong { color: var(--accent); display: block; margin-bottom: 4px; } .scoring-points ul { padding-left: 20px; margin: 0; } .scoring-points li { margin-bottom: 2px; }