/* ============================================================
   article.css — 記事レイヤ
   site.css の直後に読み込む。ページ固有のCSSは各ページの <style> に残す。

   1. 骨格      … 技術資料（/knowledge/）から抽出した共通ルール。書式もそのまま
   2. 部品      … 記事内で使う共通コンポーネント
   3. 法令解説  … /pharma-law/ 専用の部品

   規約は CLAUDE.md に従う。角丸は var(--radius)、box-shadow とグラデーションは使わない。
   ============================================================ */

/* ---------- 1. 骨格 ---------------------------------------- */

.page { padding: 88px 0 var(--section-y); }

.breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 40px; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.breadcrumb li + li::before { content: "\203A"; flex-shrink: 0; }
.breadcrumb a { transition: color var(--dur-fast) ease; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li[aria-current] { flex: 0 1 auto; }
.breadcrumb li[aria-current] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) { .page { padding-top: 56px; } .breadcrumb { margin-bottom: 32px; } }

.article__head { padding-bottom: 32px; border-bottom: 1px solid var(--color-border); }
.article__head .section-title { word-break: keep-all; }
.article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.article__lead { margin-top: 20px; font-size: 17px; line-height: 1.9; color: var(--color-text-secondary); }

.article__body { padding-top: 40px; font-size: 16px; line-height: 1.9; }
.article__body > * + * { margin-top: 24px; }
.article__body h2 { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: 20px; line-height: 1.4; }
.article__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article__body h2 + * { margin-top: 16px; }
.article__body h3 { margin-top: 32px; font-size: 16px; }
.article__body h3 + * { margin-top: 12px; }
.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body ul { list-style: disc; }
.article__body li + li { margin-top: 8px; }
.article__body .notice { font-size: 15px; line-height: 1.8; padding: 16px 20px; }
.article__body a:not(.btn):not(.link-arrow) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.figure { margin-top: 32px; }
.figure figcaption { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--color-text-secondary); }

.article__foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .arrow-back { transform: translateX(-4px); } }
@media (max-width: 768px) {
  .article__head { padding-bottom: 24px; }
  .article__lead { font-size: 16px; }
  .article__body { padding-top: 32px; }
  .article__body h2 { margin-top: 40px; }
  .article__foot { margin-top: 48px; }
}
.article__body .keypoints {
  margin-top: 0; padding: 22px 26px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #FCFDFF;
}
.keypoints__label {
  margin: 0 0 12px; font-family: var(--font-en); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent);
}
.article__body .keypoints ul { margin: 0; padding-left: 1.2em; list-style: none; }
.keypoints li { position: relative; font-size: 15.5px; line-height: 1.85; }
.keypoints li + li { margin-top: 10px; }
.keypoints li::before {
  content: ""; position: absolute; left: -1.2em; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
}
.gloss { color: var(--color-text-secondary); }

/* ---------- 2. 部品 ---------------------------------------- */

/* 記事内の表 — site.css の .data-table を本文幅に馴染ませる */
.article__body .data-table caption { caption-side: top; text-align: left; padding: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.article__body .data-table th:first-child, .article__body .data-table td:first-child { padding-left: 0; }
.article__body .data-table th:last-child, .article__body .data-table td:last-child { padding-right: 0; }
.article__body .data-table tbody th { white-space: normal; }
.article__body .data-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.article__body .data-table .nw { white-space: nowrap; }
.table-note { margin-top: 10px; font-size: 13px; line-height: 1.8; color: var(--color-text-secondary); }
.article__body .fineprint { margin-top: 24px; font-size: 13px; line-height: 1.8; color: var(--color-text-secondary); }

/* 図 */
.figure__scroll { overflow-x: auto; overflow-y: clip; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius); }
.figure__scroll::-webkit-scrollbar { height: 8px; }
.figure__scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.figure svg { display: block; width: 100%; height: auto; }
/* 横長の図だけを最小幅で保持する。svg 全体に min-width を掛けると、
   図の出し分けを別のクラス名で書いている記事の縦組み図まで潰れる */
.figure .fig-wide { min-width: 720px; }
.figure .fig-tall { display: none; min-width: 0; }
@media (max-width: 640px) { .figure .fig-wide { display: none; } .figure .fig-tall { display: block; } }

/* 補足 */
.article__body .more { margin-top: 20px; padding: 16px 20px; border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; font-size: 15px; }
.more p { margin: 0; }

/* 要点の強調 */
.article__body .point { margin-top: 24px; padding: 18px 22px; border: 1px solid var(--color-accent); border-radius: var(--radius); background: var(--color-accent-subtle); }
.point__label { margin: 0 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--color-accent); }
.point p:not(.point__label) { margin: 0 !important; font-size: 15px; line-height: 1.9; }

/* 誤解の見出し */
.trap { display: flex; align-items: baseline; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--color-accent); }
.trap__n { flex: 0 0 auto; padding: 3px 10px; border-radius: var(--radius); background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.trap__t { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.55; }
.trap + h2 { margin-top: 20px; }

/* 連番の手順 */
.article__body .checks { margin-top: 24px; padding: 0; list-style: none; counter-reset: chk; }
.checks li { position: relative; margin-top: 20px; padding: 0 0 20px 44px; border-bottom: 1px solid var(--color-border); counter-increment: chk; }
.checks li::before { content: counter(chk, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-size: 13px; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.checks__t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
.checks__b { margin: 8px 0 0 !important; font-size: 15px; line-height: 1.9; color: var(--color-text-secondary); }

/* 引用 */
.article__body .quote-law { margin-top: 20px; padding: 18px 22px; border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; }
.quote-law p { margin: 0; font-size: 15px; line-height: 1.9; }
.quote-law cite { display: block; margin-top: 10px; font-size: 12.5px; font-style: normal; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.article__body .quote-src { margin-top: 22px; padding: 18px 22px; border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; }
.quote-src p { margin: 0; }
.quote-src__en { font-size: 13.5px; line-height: 1.75; color: var(--color-text-secondary); }
.quote-src__ja { margin-top: 12px !important; font-size: 15px; line-height: 1.9; }
.quote-src cite { display: block; margin-top: 12px; font-size: 12.5px; font-style: normal; color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* 出典 */
.article__body .refs { margin-top: 28px; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.85; color: var(--color-text-secondary); }
.refs li { padding-left: 1.6em; text-indent: -1.6em; }
.refs li + li { margin-top: 10px; }

@media (max-width: 560px) { .article__body .keypoints { padding: 18px 20px; } .keypoints li { font-size: 15px; } }

/* ---------- 3. 法令解説（/pharma-law/） -------------------- */

/* site.css が ul,ol を list-style:none にしているので、番号付きリストは明示する。
   骨格の .article__body ul { list-style: disc } と同じ役割 */
.article__body ol.numbered { list-style: decimal; }
.article__body ol.numbered li { margin-top: 8px; }

/* 法令解説の本文だけ。条文番号や長いURLは途中に空白が無く、狭い画面ではみ出す。
   技術資料（/knowledge/）の描画を変えないよう、ここでスコープを切る */
.article__body[data-doc="law"] { overflow-wrap: anywhere; }

/* 共通ラベル — Inter の小さい見出し。和文ラベルには使わない */
.doc-label { margin: 0 0 10px; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
/* 和文のラベルに Inter・uppercase・広い字間を当てても意味が無く、字面が緩む */
.doc-label--ja { font-family: var(--font-jp); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; }

/* 直答 — h2 の直後に置く。40〜80字 */
.article__body .answer-first { margin-top: 16px; padding: 20px 24px; border: 1px solid var(--color-accent); border-left-width: 4px; border-radius: var(--radius); background: var(--color-accent-subtle); }
.answer-first p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.85; }
.answer-first p + p { margin-top: 10px; font-weight: 400; font-size: 15px; }

/* 学習目標 — 順序を持たないので番号を振らない */
.article__body .objectives { margin-top: 24px; padding: 20px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.article__body .objectives ul { margin: 0; padding-left: 0; list-style: none; }
.objectives li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.85; }
.objectives li + li { margin-top: 8px; }
.objectives li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--color-accent); }

/* 扱う／扱わない */
.article__body .scope { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-border); overflow: hidden; }
.scope__col { padding: 14px 16px; background: var(--color-bg); }
.scope__col--out { background: var(--color-surface); color: var(--color-text-secondary); }
.scope__col--out .doc-label { color: var(--color-text-secondary); }
.article__body .scope ul { margin: 0; padding-left: 0; list-style: none; }
.scope li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.8; }
.scope li + li { margin-top: 6px; }
.scope li::before { content: "\2014"; position: absolute; left: 0; color: var(--color-text-secondary); }
@media (max-width: 640px) { .article__body .scope { grid-template-columns: 1fr; } }

/* 条文カード */
.article__body .lawcard { margin-top: 24px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.lawcard__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: var(--color-accent); }
.lawcard__no { margin: 0; font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.lawcard__t { margin: 0; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.8); }
.lawcard__body { padding: 18px 20px; }
.lawcard__body p { margin: 0; font-size: 15px; line-height: 1.95; }
.lawcard__body p + p { margin-top: 10px; }
.lawcard__foot { overflow-wrap: anywhere; display: flex; gap: 8px 16px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface); font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary); }

/* 法令確認日 — 記事の更新日とは別物 */
.asof { font-variant-numeric: tabular-nums; }
.asof b { font-weight: 700; color: var(--color-text-primary); }

/* 古い理解 → 現行 */
.article__body .legacy { margin-top: 28px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.legacy > .doc-label { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--color-border); }
.legacy__row { display: grid; grid-template-columns: 1fr 44px 1fr; }
.legacy__old, .legacy__new { padding: 16px 20px; }
.legacy__old { background: var(--color-surface); color: var(--color-text-secondary); }
.legacy__h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.legacy__old .legacy__h { color: var(--color-text-secondary); }
.legacy__new .legacy__h { color: var(--color-accent); }
.legacy__old p, .legacy__new p { margin: 0; font-size: 14.5px; line-height: 1.85; }
.legacy__arrow { display: flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-accent); font-size: 16px; }
.legacy__arrow::before { content: "\2192"; }
.legacy__src { overflow-wrap: anywhere; padding: 10px 20px; border-top: 1px solid var(--color-border); font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary); }
@media (max-width: 640px) {
  .legacy__row { grid-template-columns: 1fr; }
  .legacy__arrow { height: 32px; }
  .legacy__arrow::before { content: "\2193"; }
}

/* ○△× 表 — 記号だけで意味を運ばない。必ず語を併記する */
.article__body .data-table--ox td.ox { white-space: nowrap; }
.ox__mark { margin-right: 7px; font-weight: 700; }
.ox--yes  .ox__mark { color: var(--color-accent); }
.ox--cond .ox__mark { color: var(--color-text-secondary); }
.ox--no   .ox__mark { color: var(--color-text-primary); }
.ox--no   .ox__word { font-weight: 700; }

/* 確認テスト — JSを使わない */
.article__body .quiz { margin-top: 20px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.quiz + .quiz { margin-top: 12px; }
.quiz > summary { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.7; }
.quiz > summary::-webkit-details-marker { display: none; }
.quiz > summary::before { content: "Q"; flex: 0 0 auto; font-family: var(--font-en); font-size: 12px; font-weight: 700; color: var(--color-accent); }
.quiz[open] > summary { border-bottom: 1px solid var(--color-border); }
.quiz__a { padding: 16px 20px; font-size: 15px; line-height: 1.9; }
.quiz__a p { margin: 0; }
.quiz__a p + p { margin-top: 10px; }
/* 通知番号や条文の並びは途中に空白が無く、狭い画面ではみ出す */
.quiz__a .asof, .quiz__src { display: block; margin-top: 12px; font-size: 12.5px; color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* 免責 — 判断に関わる記述の近くに置く。末尾一枚に頼らない */
/* 免責は本文の途中に置かず、末尾に1か所へ集める（施主判断 2026-09-08）。
   読書の邪魔にならないよう字を落とすが、中身は削らない。
   ※ 消費者庁の考え方では、小さく薄い注記は「打消し表示」と評価されやすい。
     その判断を承知のうえでこの形にしている */
.article__body .disclaimer { margin-top: 16px; padding: 0; border: 0; border-radius: 0; font-size: 13px; line-height: 1.8; color: var(--color-text-secondary); }
.disclaimer p { margin: 0; }
.disclaimer p + p { margin-top: 8px; }
.disclaimer strong { font-weight: 700; color: var(--color-text-secondary); }
.article__body .disclaimer--page { margin-top: 12px; padding: 0; background: none; }

/* 末尾のまとめ — 出典の後に置き、免責・立場開示・扱う範囲をここへ集める */
.article__body .endnotes { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.endnotes__label { margin: 0 0 12px; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); }
.article__body .endnotes .scope { margin: 0 0 16px; }

/* 免責事項ページの本文。ここでは注記ではなく本文なので、字を落とさない */
.article__body .about-body { font-size: 16px; color: var(--color-text-primary); }
.article__body .about-body p { margin-top: 16px; font-size: 16px; line-height: 1.9; color: var(--color-text-primary); }
.about-body strong { color: var(--color-text-primary); }
.article__body .about-body p:first-child { margin-top: 0; }

/* 立場開示 */
.article__body .standpoint { margin-top: 16px; padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.8; color: var(--color-text-secondary); }
.standpoint p { margin: 0; }
.standpoint strong { color: var(--color-text-primary); }

/* 通し番号。カテゴリは 1〜8、解説は 1-1 の形。
   「区分 → 広告 → 監視と処分」という読む順路そのものなので、順序を持つ内容として番号を振る */
.pl-num { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.article__meta .pl-num { margin-left: 12px; }
.pl-num--h1 { font-size: .62em; vertical-align: .18em; margin-right: .2em; }
.article__body h2 .pl-num { font-size: .78em; margin-right: .3em; }
.pl-item__n { font-family: var(--font-en); font-size: 13px; font-weight: 700; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; margin-right: 8px; }
@media (hover: hover) and (pointer: fine) { .pl-item:hover .pl-item__n { color: var(--color-accent); } }

/* ページ一覧（カテゴリハブ・「次に読む」）
   .article__body ul { list-style: disc } と a { text-decoration: underline } が
   ともに (0,1,1)/(0,3,1) で効くので、こちらを同等以上の詳細度で書き、後ろに置いて外す */
.article__body .pl-list { margin-top: 24px; padding-left: 0; list-style: none; border-top: 1px solid var(--color-border); }
.pl-list li { border-bottom: 1px solid var(--color-border); }
.pl-list li + li { margin-top: 0; }
.pl-item { display: block; padding: 20px 4px; transition: border-color var(--dur-fast) var(--ease-out); }
.pl-item__q, .pl-item__a { display: block; }
.pl-item__a { margin-top: 6px; }
.article__body .pl-list a.pl-item { color: inherit; text-decoration: none; }
.pl-item__q { font-size: 16.5px; font-weight: 700; line-height: 1.6; }
.pl-item__a { font-size: 14.5px; line-height: 1.85; color: var(--color-text-secondary); }
.pl-item .arrow { display: inline-block; margin-left: 6px; color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pl-item:hover .pl-item__q { color: var(--color-accent); }
  .pl-item:hover .arrow { transform: translateX(4px); }
}
/* 題と説明は縦に積む。横2列にすると題が痩せて、何のページか読み取れない */
@media (max-width: 640px) { .pl-item { padding: 16px 4px; } .pl-item__q { font-size: 16px; } }