/*
 * 解答速報 一般公開ウェブ（shikakutakken/web/）専用スタイル。
 *
 * 読み込み順： ../app/assets/shikaku_matome.css → shikaku_question.css → このファイル
 * （前2つはアプリ内ページと共通。このファイルはアプリ側 sokuho.css とは別に育てる）
 *
 * 対象ページ：
 *   index.html        1-1-1 解答速報（速報開始前）
 *   index_after.html  1-1-2 解答速報（速報開始後）※当日 index.html に差し替え
 *   score.html        1-2   自動採点
 *   result.html       1-3   採点結果
 *
 * 配色は :root の変数と、白 / #EFF1F2（表見出し）/ #F7F9F0（行見出し）/
 * #0044CC（リンク）/ #000（X ボタン）に限定している。
 */

:root {
    color-scheme: light;
    --sokuho-green: #28a000;        /* h1 バー・主ボタン */
    --sokuho-green-dark: #017333;   /* h2 バー・強調文字 */
    --sokuho-bg: #F7F9F0;
    --sokuho-border: #C9D6BE;
    --sokuho-muted: #666;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0 0 32px;
    background: var(--sokuho-bg);
    color: #1a1a1a;
    line-height: 1.7;
}

/* ============================================================
   共通：見出し・注記・白カード・X 共有・アプリ訴求・免責
   ============================================================ */

h1.page-title {
    margin: 0;
    padding: 10px 12px;
    background: var(--sokuho-green);
    color: #fff;
    font-size: 1rem;
    font-family: sans-serif;
    text-align: center;
    letter-spacing: .02em;
}

/* matome.css の h2（淡グレー背景＋緑左線）を打ち消してグリーンバーにする */
h2.section-title {
    margin: 8px 8px 0;
    padding: 6px 10px;
    border-left: none;
    background: var(--sokuho-green-dark);
    color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    font-size: .95rem;
}

.note {
    margin: 12px;
    font-size: .8125rem;
    color: var(--sokuho-muted);
}

.note.center {
    text-align: center;
}

.note a {
    color: #0044CC;
}

.card {
    margin: 8px 12px;
    padding: 12px;
    border: 1px solid var(--sokuho-border);
    background: #fff;
}

.card p {
    margin: 0 0 10px;
}

.card p:last-child {
    margin-bottom: 0;
}

/* X 公式のピル型ボタンに寄せる：黒地・白文字・完全角丸 */
.share-wrap {
    text-align: center;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 12px 0;
    padding: 8px 18px;
    border-radius: 9999px;
    background: #000;
    color: #fff;
    font-weight: bold;
    font-size: .9375rem;
    line-height: 1;
    text-decoration: none;
}

.share-x-logo {
    width: 1em;
    height: 1em;
}

.app-lead {
    font-weight: bold;
    color: var(--sokuho-green-dark);
}

.app-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sokuho-border);
}

.app-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

.app-name {
    font-weight: bold;
    line-height: 1.4;
}

.app-name small {
    display: block;
    font-size: .8125rem;
    color: var(--sokuho-green-dark);
}

.app-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-links a {
    color: #0044CC;
    white-space: nowrap;
}

.disclaimer {
    list-style: none;
    margin: 24px 12px 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--sokuho-border);
    font-size: .6875rem;
    line-height: 1.6;
    color: #555;
}

/* 「・」は ::before で本文の外に置き、折り返し行の頭を揃える */
.disclaimer li {
    position: relative;
    margin: 0 0 4px;
    padding-left: 1em;
    text-align: justify;
    text-justify: inter-character;
    line-break: strict;
}

.disclaimer li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/* ============================================================
   1-1-1 速報開始前：掲載予定リスト
   ============================================================ */

ul.content-list {
    list-style: none;
    margin: 0;
    padding: 0 12px;
}

ul.content-list > li {
    margin: 0 0 14px;
}

.content-head {
    margin: 0;
}

.content-head::before {
    content: "・";
}

.content-name {
    font-weight: bold;
}

.content-time,
.content-badge {
    font-size: .875rem;
}

.content-time {
    color: var(--sokuho-muted);
}

.content-desc {
    margin: 0;
    padding-left: 1em;
}

/* ============================================================
   1-1-2 速報開始後：採点ボタン・正答番号表
   ============================================================ */

/* .submit-btn（1-2）と同じ配色。色数を絞るため */
.score-btn {
    display: block;
    margin: 8px 12px;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: var(--sokuho-green);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.score-btn-main {
    display: block;
    font-weight: bold;
    font-size: 1.0625rem;
}

.score-btn-sub {
    display: block;
    font-size: .8125rem;
    opacity: .9;
}

/* 50問中45問未満確定のあいだ。リンクを無効化して灰色にする */
.score-btn.is-disabled {
    pointer-events: none;
    background: #ccc;
}

table.answer-table {
    width: calc(100% - 24px);
    margin: 8px 12px;
    border-collapse: collapse;
    background: #fff;
    font-size: .9375rem;
}

table.answer-table th,
table.answer-table td {
    padding: 4px 8px;
    border: 1px solid var(--sokuho-border);
    text-align: center;
}

table.answer-table thead th {
    background: #EFF1F2;
    font-weight: bold;
}

table.answer-table tbody th {
    font-weight: normal;
    background: #F7F9F0;
}

/* 「確認中」は本文と同じ黒字（クラスは JS の識別用） */
table.answer-table td.pending {
    color: inherit;
}

/* ============================================================
   1-2 自動採点：免除トグル・マーク表・採点ボタン
   ============================================================ */

.exempt-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 12px;
    font-weight: bold;
}

.exempt-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.exempt-toggle small {
    flex-basis: 100%;
    padding-left: 24px;
    font-weight: normal;
    font-size: .8125rem;
    color: var(--sokuho-muted);
}

table.mark-table {
    width: calc(100% - 24px);
    margin: 8px 12px;
    border-collapse: collapse;
    table-layout: fixed;            /* 4つの選択肢列を等幅にする */
    background: #fff;
    font-size: .9375rem;
}

table.mark-table th,
table.mark-table td {
    padding: 0;
    border: 1px solid var(--sokuho-border);
    text-align: center;
    height: 40px;
}

table.mark-table tr.col-head th {
    background: #EFF1F2;
    font-weight: bold;
    height: 32px;
}

table.mark-table tr.col-head th:first-child {
    width: 28%;
}

table.mark-table tbody th {
    font-weight: normal;
    background: #F7F9F0;
}

/* 問46〜50 の直前に入れる「5問免除対象」帯 */
table.mark-table tr.group-head td {
    height: 28px;
    background: #EFF1F2;
    color: var(--sokuho-green-dark);
    font-size: .8125rem;
    font-weight: bold;
}

/* ラジオはセル全面をタップ領域にし、見た目はカスタムの丸にする */
table.mark-table td label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

table.mark-table td input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-mark {
    width: 18px;
    height: 18px;
    border: 2px solid #8a9a80;
    border-radius: 50%;
    background: #fff;
}

table.mark-table td input[type="radio"]:checked + .radio-mark {
    border-color: var(--sokuho-green-dark);
    background: radial-gradient(var(--sokuho-green-dark) 55%, #fff 60%);
}

.submit-wrap {
    margin: 16px 12px 8px;
}

.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: var(--sokuho-green);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: bold;
    cursor: pointer;
}

/* ============================================================
   1-3 採点結果：得点表示・結果表
   ============================================================ */

.score-total {
    margin: 12px 12px 0;
    font-size: 1rem;
}

.score-total strong {
    font-size: 1.5rem;
    color: var(--sokuho-green-dark);
    background: none;               /* matome.css の strong 黄マーカーを打ち消す */
}

table.result-table {
    width: calc(100% - 24px);
    margin: 8px 12px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
    font-size: .9375rem;
}

table.result-table th,
table.result-table td {
    padding: 4px 6px;
    border: 1px solid var(--sokuho-border);
    text-align: center;
}

table.result-table thead th {
    background: #EFF1F2;
    font-weight: bold;
    font-size: .8125rem;
    line-height: 1.3;
}

table.result-table tbody th {
    font-weight: normal;
    background: #F7F9F0;
}

/* ○× は色を付けず、黒の太字で区別する */
table.result-table td.ok,
table.result-table td.ng {
    font-weight: bold;
}

/* 「確認中」「未入力」も本文と同じ黒字（クラスは JS の識別用） */
table.result-table td.pending,
table.result-table td.blank {
    color: inherit;
}

/* ============================================================
   タブレット（アプリ側 CSS と同じ 700px を境にする）
   ============================================================ */

@media (min-width: 700px) {
    h1.page-title {
        font-size: 1.4rem;
    }

    h2.section-title {
        font-size: 1.3rem;
    }

    .content-time,
    .content-badge {
        font-size: 1.1rem;
    }

    .note {
        font-size: 1.05rem;
    }

    .disclaimer {
        font-size: .95rem;
    }
}