/*
 * コラム（/columns/ と /columns/<slug>/）だけで使う追加の決まり。site.css の後に読む。
 * このファイルを変えたら、コラムの 7 ページとひな形の読み込み（/assets/css/pages/columns.css?v=…）の値を変える。
 *
 * - .art-sec        記事の節。小見出し（.kicker）に節の名前、.art-claim に主張の見出し
 * - .art-text       本文と同じ幅（42em）にそろえるもの。.prose もこの幅
 * - .art-wide       表・対照表・電文・経過の図など、本文の欄の幅いっぱいに出すもの
 * - .toc-fold       幅 1024px 未満の目次（<details>）。1024px 以上は左の .toc を出す
 * - .decode         第 15 項などの電文を、記号ごとに区切って意味を添える（IFR は実線、VFR は .is-vfr で破線）
 * - .art-table--3 / --status  狭い画面で行を縦に積む表（td の data-label を見出しに出す）
 * - .art-table--stack  2 列の表を、狭い画面では行ごとに積む（見出しの行は隠す）
 * - .art-pair       2 つの方法（ブラウザと Web API など）を並べる
 * - .art-open       確認中の点の番号付きの一覧
 * - .wef            発効の日時（JST と UTC）を並べる
 * - .art-eobt       記事の例の EOBT（日本時間 → 第 13 項の UTC）。.wef を IFR・VFR の 2 行で使う
 * - .art-strips     記事の中の運航票（.strips）。記事の欄では IFR と VFR を上下に並べる
 * - .col-examples   一覧の「記事で使う飛行の例」
 */

/* ───────── 記事の頭（図台の上に、要点の書類を重ねる） ───────── */

.art-head-grid { display: grid; gap: 32px; }
.art-head .article-sub, .art-head .page-lead { max-width: 40em; }
.art-facts { max-width: 760px; }
.art-facts dd { font-weight: 400; }
.art-facts dd a { color: var(--ink); }
.page-head .page-facts dd { word-break: keep-all; overflow-wrap: anywhere; }
.art-brief .art-points { background: var(--sheet); box-shadow: var(--shadow); }
.art-brief .article-note { margin-top: 14px; }
@media (min-width: 900px) { .art-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .art-head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: start; }
  .art-head .page-head .kicker, .art-head-main > .kicker { margin-top: 48px; }
  .art-brief { margin-top: 40px; }
  .art-head .art-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
  .art-head .art-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .art-points ul { font-size: 15px; }
}
@media (min-width: 1360px) { .art-head .art-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } .art-head .art-facts > div:nth-child(3) { padding-left: 16px; border-left: 1px solid var(--rule); } }

/* ───────── 目次 ───────── */

@media (max-width: 1023px) { .art-doc > .toc { display: none; } }
.art-doc > .doc-body { min-width: 0; }
@media (min-width: 1024px) { .toc-fold { display: none; } }
.toc .toc-src a::before, .toc-fold .toc-src a::before { content: ""; }
.art-doc .toc a, .toc-fold a { word-break: keep-all; overflow-wrap: anywhere; }
.toc .toc-src a, .toc-fold .toc-src a { color: var(--ink-2); }

.toc-fold { margin-bottom: 32px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.toc-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 2px; font-weight: 700; letter-spacing: .04em; }
.toc-fold summary::-webkit-details-marker { display: none; }
.toc-fold summary::after { content: ""; flex: none; margin-left: auto; margin-right: 6px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.toc-fold[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-fold .toc-count { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: .02em; }
.toc-fold ol { list-style: none; counter-reset: t; border-top: 1px solid var(--rule); margin-bottom: 4px; }
.toc-fold li { counter-increment: t; border-bottom: 1px solid var(--rule); }
.toc-fold li:last-child { border-bottom: 0; }
.toc-fold a { display: grid; grid-template-columns: 1.8em 1fr; padding: 10px 0; color: var(--ink); text-decoration: none; line-height: 1.55; }
.toc-fold a::before { content: counter(t); color: var(--mag); font-weight: 700; font-variant-numeric: tabular-nums; }
.toc-fold a:hover { color: var(--blue); text-decoration: underline; }

/* ───────── 要点 ───────── */

.art-points { max-width: 760px; }
@media (min-width: 1180px) { .art-points { max-width: none; } }
.art-points .callout-title { font-size: 16px; line-height: 1.6; letter-spacing: .04em; }
.art-points ul { display: grid; gap: 8px; font-size: 15.5px; line-height: 1.85; }
.art-points li, .art-body .sources li { text-wrap: pretty; }
.art-points code, .art-sec .note code, .art-sec .spec code, .art-sec .table code, .checklist code, .decode code {
  font-family: var(--font-mono); font-size: .92em; padding: 1px 5px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 2px; white-space: nowrap;
}
.art-sec .table code { background: var(--sheet-2); }
.art-points + .article-note { max-width: 760px; }

/* ───────── 節 ───────── */

.art-sec { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(36px, 4.5vw, 48px); border-top: 1px solid var(--rule-2); }
.toc-fold + .art-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.art-sec > .kicker { margin-bottom: 12px; }
.art-sec dd, .art-sec li, .art-sec td { text-wrap: pretty; }
.art-claim { max-width: 26em; margin-bottom: 26px; font-size: clamp(22px, .9vw + 17px, 30px); line-height: 1.5; letter-spacing: .01em; }
.art-sec > .claim-qual { margin: -12px 0 24px; }
.art-sec .prose, .art-text { max-width: 43rem; }
.art-sec .prose { font-size: 16.5px; }
@media (min-width: 1280px) { .art-sec .prose, .art-text, .art-sec .note, .art-sec .checklist { max-width: 46rem; } .art-sec .prose { font-size: 17px; } }
.art-sec > * + * { margin-top: 28px; }
.art-sec > .art-claim + *, .art-sec > .claim-qual + * { margin-top: 0; }
.art-sec > .prose + .prose { margin-top: 1.1em; }
.art-sec .prose h3 { margin-top: 1.8em; }
.art-sec .prose h3:first-child { margin-top: 0; }
.art-wide { max-width: 100%; }
.art-foot { margin-top: 14px !important; }
.art-after-flow { margin-top: 20px !important; }

/* 表（記事の中） */
.art-table { font-size: 15px; }
.art-table tbody th { font-weight: 700; white-space: normal; word-break: auto-phrase; }
.art-table tbody th .data { white-space: nowrap; }
.art-table td { color: var(--ink-2); }
.art-table tr.is-mark th, .art-table tr.is-mark td { background: var(--mag-tint); }
.art-table tr.is-mark th { box-shadow: inset 4px 0 0 var(--mag); }
.art-table tr.is-ack-row th, .art-table tr.is-ack-row td { background: var(--ack-tint); }
.art-table tr.is-ack-row th { box-shadow: inset 4px 0 0 var(--ack); color: var(--ack); }
.art-table tr.is-ack-row td { color: var(--ink); }
.art-designators th { width: 9em; }
.art-designators td:last-child { white-space: nowrap; }
.art-airac th { width: 4em; font-variant-numeric: tabular-nums; }
.art-airac .cyc { display: inline-block; margin-left: 10px; padding: 0 7px; border: 1px solid currentColor; border-radius: 2px; font-size: 12.5px; color: var(--mag); vertical-align: .08em; }
.art-amdt th .data { font-size: 14px; font-weight: 400; }
@media (max-width: 599px) {
  .art-designators td:last-child { white-space: normal; }
  .art-table--3 thead, .art-table--status thead { display: none; }
  .art-table--3, .art-table--3 tbody, .art-table--3 tr, .art-table--status, .art-table--status tbody, .art-table--status tr { display: block; width: 100%; }
  .art-table--3 tr, .art-table--status tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
  .art-table--3 th, .art-table--status th { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 0; }
  .art-table--3 td, .art-table--status td { border-bottom: 0; padding-top: 4px; }
  .art-table--status tr { grid-template-columns: 1fr 1fr 1fr; }
  .art-table--3 td::before, .art-table--status td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
  .art-table--status tr { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .art-table--status td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding-top: 2px; padding-bottom: 2px; }
  .art-table--status td::before { font-weight: 400; }
  .art-table--stack thead { display: none; }
  .art-table--stack, .art-table--stack tbody, .art-table--stack tr { display: block; width: 100%; }
  .art-table--stack tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .art-table--stack th, .art-table--stack td { display: block; padding: 0; border-bottom: 0; }
  .art-table--stack td { padding-top: 4px; }
  .art-amdt thead { display: none; }
  .art-amdt, .art-amdt tbody { display: block; width: 100%; }
  .art-amdt tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .art-amdt th, .art-amdt td { padding: 0; border-bottom: 0; }
  .art-amdt th .data { white-space: normal; overflow-wrap: anywhere; }
  .art-amdt td { padding-top: 2px; }
  .art-amdt tr.is-mark { background: var(--mag-tint); box-shadow: inset 4px 0 0 var(--mag); }
  .art-amdt tr.is-mark th { box-shadow: none; }
  .art-amdt td::before { content: attr(data-label) "　"; font-size: 12px; font-weight: 700; color: var(--ink-3); }
  .art-designators thead { display: none; }
  .art-designators, .art-designators tbody { display: block; width: 100%; }
  .art-designators tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .art-designators th, .art-designators td { width: auto; padding: 0; border-bottom: 0; }
  .art-designators td:last-child { grid-row: 1; grid-column: 2; justify-self: end; }
  .art-designators td:first-of-type { grid-column: 1 / -1; padding-top: 4px; }
}

/* 一覧の部品を記事の中で使うとき */
.art-sec .spec { margin-top: 28px; }
.art-sec .spec > div { grid-template-columns: 9.5em 1fr; }
.art-sec .art-spec-wide > div { grid-template-columns: 13em 1fr; }
.art-sec .art-codes > div { grid-template-columns: minmax(0, auto) 1fr; column-gap: 24px; }
.art-sec .spec dt .data { margin-right: .4em; }
.art-codes dt .data { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 479px) { .art-sec .spec > div, .art-sec .art-spec-wide > div, .art-sec .art-codes > div { grid-template-columns: 1fr; } }
.art-sec .note { max-width: 43rem; }
.art-sec .checklist { max-width: 43rem; }
.art-sec .table--compare .g { word-break: keep-all; overflow-wrap: anywhere; }
.art-sec .checklist .resp { white-space: normal; text-align: right; max-width: 60%; }
@media (max-width: 599px) { .art-sec .checklist .resp { max-width: none; text-align: left; } }
.art-sec .flow { margin-top: 32px; }
@media (min-width: 1024px) { .art-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art-sec .table--compare caption { padding: 0; }

/* 手順（.route）: 記事の中では、幅が広くても縦に並べる */
.art-route { margin-top: 28px; }
@media (min-width: 1024px) {
  .art-route { grid-template-columns: none; gap: 0; }
  .art-route > li { padding: 0 0 28px 40px; }
  .art-route > li::before { left: 11px; right: auto; top: 26px; bottom: 0; border-top: 0; border-left: 2px solid var(--mag); }
  .art-route .wp { top: 2px; }
}
.art-route > li:last-child { padding-bottom: 0; }
.art-route p + p { margin-top: 6px; }

/* 2 つの方法を並べる */
.art-pair { display: grid; gap: 20px; }
@media (min-width: 900px) { .art-pair { grid-template-columns: 1fr 1fr; gap: 28px; } }
.art-pair-item { padding: 20px 22px 22px; background: var(--sheet); border: 1px solid var(--rule-2); border-top: 3px solid var(--ink); }
.art-pair-item h3 { font-size: 17px; margin-bottom: 10px; }
.art-pair-item ol { padding-left: 1.4em; font-size: 15px; line-height: 1.8; }
.art-pair-item li + li { margin-top: 4px; }
.art-pair-item p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.art-pair-item ol + p { padding-top: 12px; border-top: 1px solid var(--rule); }

/* 確認中の点 */
.art-open { list-style: none; counter-reset: q; display: grid; gap: 0; border-top: 2px solid var(--warn); }
.art-open li { counter-increment: q; display: grid; grid-template-columns: 2.4em 1fr; padding: 14px 0 16px; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.85; }
.art-open li::before { content: counter(q); font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; }
.art-open code { font-family: var(--font-mono); font-size: .92em; }
@media (min-width: 900px) { .art-open { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* 電文を記号ごとに区切る（.decode） */
.decode { width: fit-content; max-width: 100%; padding: 16px 18px 18px; background: var(--sheet-2); border: 1px solid var(--rule-2); border-left: 4px solid var(--mag); }
.decode.is-vfr { border-left-style: dashed; }
.decode figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.decode figcaption b { font-family: var(--font-data); color: var(--ink); letter-spacing: .06em; }
.decode ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 8px; }
.decode li { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 0 12px 0 0; border-right: 1px solid var(--rule-2); }
.decode li:last-child { border-right: 0; padding-right: 0; }
.decode li b { font-size: 17px; font-weight: 400; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.decode li span { max-width: 12em; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 600px) { .decode li b { font-size: 19px; } }
@media (max-width: 599px) {
  .decode { width: auto; }
  .decode figcaption { flex-direction: column; align-items: flex-start; }
  .decode ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .decode li, .decode li:last-child { padding: 0 8px 0 12px; border-right: 0; border-left: 1px solid var(--rule-2); }
  .decode li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .decode li span { max-width: none; }
}

/* 記事の中の運航票（記事の欄は狭いので、広い画面でも上下に並べる） */
.art-strips .strips { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.art-strips .fig-cap { max-width: 46rem; }

/* 発効の日時 */
.wef { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; background: var(--sheet-2); border: 1px solid var(--rule-2); border-left: 4px solid var(--ink); }
.wef .mono { font-size: 16px; letter-spacing: .02em; white-space: nowrap; }
.wef-eq { color: var(--ink-3); }
.wef-to { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; }
/* 記事の例の EOBT（日本時間 → 第 13 項の UTC）。IFR は実線、VFR は破線 */
.art-eobt { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 28px 0 0; }
.art-eobt figcaption { flex-basis: 100%; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 599px) { .art-eobt .wef { flex-basis: 100%; gap: 4px 8px; padding: 12px 14px; } .art-eobt .wef .mono { font-size: 14px; } .art-eobt .wef-to { gap: 8px; } }
.art-eobt .wef { margin: 0; border-left-color: var(--mag); }
.art-eobt .wef.is-vfr { border-left-style: dashed; }
.art-eobt .wef b { min-width: 2.6em; font-size: 14px; letter-spacing: .06em; }
.art-sec > .art-eobt + .prose { margin-top: 28px; }

/* 出典・注意書き・関連 */
.art-body .sources { margin-top: clamp(56px, 7vw, 88px); max-width: 52rem; }
.art-body .sources h2 { font-size: 17px; letter-spacing: .04em; }
.art-body .sources ol { display: grid; gap: 6px; }
.sources-credit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3); }
.art-body .disclaimer { max-width: 52rem; }
.art-body .related { margin-top: clamp(48px, 6vw, 72px); }
.art-body .related h2 { font-size: 17px; letter-spacing: .04em; margin-bottom: 12px; }
.art-body .related .related-sub { margin-top: 40px; }
.art-body .related .next { margin-top: 0; }
@media (min-width: 900px) { .art-body .related .next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────── コラムの一覧 ───────── */

.col-index { border-top-width: 2px; }
.col-index .col-s, .related .col-s { word-break: keep-all; overflow-wrap: anywhere; }
.col-index .col-d, .related .col-d, .col-examples .sec-foot { text-wrap: pretty; }
.col-policy .ledger dd { max-width: 46em; text-wrap: pretty; word-break: auto-phrase; }
.col-examples .strips { margin-top: 8px; }
.col-examples .sec-foot { margin-top: 24px; max-width: 52rem; }
@media (min-width: 900px) {
  .col-index a { padding: 24px 0 26px; }
  .col-index .col-t { font-size: 20px; }
}