/* Reader LP（長文読み物ページ）— DESIGN-RULES §0a 準拠
 * index.html の VI を継承し、tokens.css の変数と glow 体系の上にのみ載せる。
 * 新色のハードコード禁止。 */

.reader-hero {
    max-width: 760px;
    margin: 0 auto;
    padding: 5rem 2rem 1.5rem;
    text-align: center;
}

.reader-hero h1 {
    font-family: var(--serif-jp);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.reader-subtitle {
    font-family: var(--serif-jp);
    font-size: 1rem;
    color: var(--mid);
    margin-bottom: 1.5rem;
}

.reader-meta {
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 2;
    color: var(--mute);
}

.reader-meta a,
.reader-footer a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}

.reader-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem 5rem;
}

.reader-article h2 {
    margin: 4.5rem 0 1.5rem;
}

.reader-article h3 {
    margin: 3rem 0 1rem;
}

.reader-article ul,
.reader-article ol {
    font-family: var(--serif-jp);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 2.1;
    color: var(--mid);
    margin: 0 0 1.5rem;
    padding-left: 1.5em;
}

.reader-article li {
    margin: 0.4em 0;
}

.reader-article a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reader-article code {
    font-family: "SF Mono", "Consolas", monospace;
    font-size: 0.88em;
    background: var(--glass-bg-medium);
    border-radius: 4px;
    padding: 0.1em 0.4em;
}

.reader-article pre {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-soft);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    line-height: 1.7;
}

.reader-article pre code {
    background: none;
    padding: 0;
}

.reader-article blockquote.reader-callout {
    border-left: 3px solid var(--gold);
    padding: 1.1rem 1.4rem;
    margin: 1.75rem 0;
}

.reader-article blockquote p {
    color: var(--mute);
}

.reader-article hr {
    border: none;
    border-top: 1px solid var(--glass-border-faint);
    margin: 3.5rem 0;
}

/* 図版・表は glow-card（白ガラスパネル）に載せる */
.reader-figure {
    margin: 2.5rem 0;
    padding: 1.5rem;
}

.reader-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.reader-table {
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    overflow-x: auto;
}

.reader-table table {
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.8;
    min-width: 100%;
}

.reader-table th,
.reader-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--glass-border-soft);
    text-align: left;
    vertical-align: top;
    color: var(--mid);
    font-weight: 300;
}

.reader-table th {
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
}

/* 誤解FAQ アコーディオン（DESIGN-RULES §9 パターン）
 * T11（pd#123）: 畳まれている/開けることが一目でわかる見た目に強化。
 * 「開けるカード」らしい面（背景・影・ホバー）＋開閉マーカーの回転＋「詳しく」ラベル。 */
.reader-article details {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    border-radius: 10px;
    padding: 0 1.25rem;
    margin: 1.25rem 0;
    box-shadow: var(--glass-shadow);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.reader-article details:hover {
    background: var(--glass-bg-medium);
    border-color: var(--glass-border-faint);
}

.reader-article summary {
    cursor: pointer;
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    padding: 0.6rem 0;
}

.reader-article summary::-webkit-details-marker {
    display: none;
}

/* 開閉マーカー（▶ が開くと ▼ へ回転）。装飾のみで意味は「詳しく」ラベル側が担う */
.reader-article summary::before {
    content: "▶";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    color: var(--gold);
    transition: transform 0.2s ease;
}

.reader-article details[open] > summary::before {
    transform: rotate(90deg);
}

/* 「詳しく」の常設ラベル。開くと「閉じる」に切り替える */
.reader-article summary::after {
    content: "詳しく";
    flex: none;
    margin-left: auto;
    padding-left: 1rem;
    font-size: 0.78rem;
    color: var(--mute);
    white-space: nowrap;
}

.reader-article details[open] > summary::after {
    content: "閉じる";
}

.reader-article details[open] {
    padding-bottom: 1rem;
}

/* 寄り道コラム（本筋から独立の補足）: 「詳しく」より一段控えめに見せる。
 * 本筋の深掘り（詳しく）と補足（コラム）を同列に並べないための降格表現
 * （2026-07-05 pjdhiro 指示・DESIGN-RULES §1）。 */
.reader-article details.pd-column {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}

.reader-article details.pd-column > summary {
    font-size: 0.9rem;
}

.reader-article details.pd-column > summary::before {
    color: var(--mute);
}

.reader-article details.pd-column > summary::after {
    content: "寄り道";
}

.reader-article details.pd-column[open] > summary::after {
    content: "閉じる";
}

/* Micro-worlds（触って直感できる対話的環境・pd#128 / CN-011 §2「Micro-worlds」）
 * DESIGN-RULES §0a 準拠: 独自テーマを新造せず tokens と glow-card の上にのみ載せる。新色なし。
 * 各ウィジェットは src/reader-microworlds.js が canvas + コントロールをマウントする。 */
.reader-article .microworld {
    margin: 2.5rem 0;
    padding: 1.5rem;
}

.microworld .mw-title {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.75rem;
}

.microworld .mw-fallback {
    font-family: var(--serif-jp);
    font-size: 0.9rem;
    color: var(--mute);
    margin: 0.75rem 0 0;
}

/* JS でマウントできた場合は no-JS フォールバック文を隠す（SEO/no-JS 用に DOM には残す） */
.microworld.mw-ready .mw-fallback { display: none; }

.mw-canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: pan-y;
}

.mw-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin: 0.9rem 0 0.3rem;
}

.mw-btn {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--navy);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mw-btn:hover { background: var(--glass-bg-medium); }

.mw-btn.is-on {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.mw-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--mid);
    flex: 1 1 220px;
}

.mw-slider input[type="range"] {
    flex: 1;
    min-width: 120px;
    accent-color: var(--navy);
}

.mw-slider-label { white-space: nowrap; }

.mw-status {
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--mid);
    margin: 0.6rem 0 0;
}

.mw-status code {
    font-family: "SF Mono", "Consolas", monospace;
    font-size: 0.85em;
    background: var(--glass-bg-medium);
    border-radius: 4px;
    padding: 0.05em 0.35em;
}

.mw-status .mw-note { color: var(--mute); }

/* 理解度テスト（任意）— 関門にしない自己チェック。各セクション直後にその都度置く。
 * DESIGN-RULES §0a 準拠: tokens と glow-card の上にのみ載せる。JS は src/reader-quiz.js。
 * no-JS では選択肢は静的リストのまま、「答えと解説」details で同じ内容が読める。 */
.reader-article .reader-quiz {
    margin: 2.5rem 0;
    padding: 1.75rem 1.5rem;
}

.reader-article .quiz-label {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin: 0 0 1.1rem;
}

.quiz-q + .quiz-q {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border-soft);
}

.reader-article .quiz-question {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.75rem;
}

.reader-article .quiz-choices {
    list-style: lower-latin;
    margin: 0 0 0.75rem;
    padding-left: 1.75rem;
}

.quiz-choices li {
    font-family: var(--sans);
    font-size: 1rem;
    margin: 0.45rem 0;
    padding-left: 0.25rem;
}

/* JS が選択肢を包むボタン（押すとその場で答え合わせ）。タッチターゲット 44px 以上 */
.quiz-choice {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mid);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.quiz-choice:hover { background: var(--glass-bg-medium); }

.quiz-choice.is-correct {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.quiz-choice.is-wrong {
    border-color: var(--coral);
    color: var(--coral);
}

.reader-article .quiz-status {
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--mid);
    margin: 0.6rem 0 0;
}

/* 解説の details は「詳しく」ラベルでなく「答え合わせ」に */
.reader-article details.quiz-explain > summary::after { content: "答え合わせ"; }
.reader-article details.quiz-explain[open] > summary::after { content: "閉じる"; }

.reader-footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 2rem 4rem;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 2;
    color: var(--mute);
}

/* 図のキャプション（B4: 全 SVG に 1 行要旨） */
.reader-figure figcaption {
    margin-top: 0.8rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--mute);
    text-align: center;
}

/* 目次（A1: build-reader-lp.py が h1/h2 から生成） */
.reader-toc {
    margin: 2.5rem 0;
    padding: 1.4rem 1.8rem;
    font-family: var(--sans);
}

.reader-toc-title {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.reader-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reader-toc li {
    margin: 0.3rem 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.reader-toc li.reader-toc-part {
    margin-top: 0.9rem;
    font-weight: 500;
}

.reader-toc li.reader-toc-part:first-child { margin-top: 0; }

.reader-toc li:not(.reader-toc-part) { padding-left: 1em; }

/* 検証ステータスバッジ（D3） */
.reader-status-badge {
    display: inline-block;
    padding: 0.18em 0.85em;
    margin-bottom: 0.35em;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: var(--glass-bg-medium);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

@media (max-width: 768px) {
    .reader-hero { padding: 4rem 1.5rem 1rem; }
    .reader-article { padding: 0 1.5rem 4rem; }
    .reader-figure { padding: 1rem; }
    .reader-table { padding: 0.75rem 1rem; }
    .reader-article .microworld { padding: 1rem; }
}

@media (max-width: 480px) {
    .reader-hero { padding: 3.5rem 1rem 1rem; }
    .reader-article { padding: 0 1rem 3rem; }
    .reader-article h2 { margin-top: 3.5rem; }
}