/* 読んで分かる ITパスポート・基本情報（it-text）の共通スタイル
 *
 * 色は kj.css の変数（--color-* / --kj-*）だけを使う。16進の色を直書きしない。
 * 章ページはここのクラスを使うだけにし、ページごとの <style> は作らない。
 * 本文17px・行間1.8（記事の本文）。押せる所は44px以上。状態は色だけでなく文字でも示す。
 *
 * 目次
 *   1. 土台・本文へ移動
 *   2. 試験の切り替え（共通ヘッダの下に貼り付く帯）
 *   3. ページ上部・章の目次
 *   4. 本文と節
 *   5. 本文の部品（用語・場面・挿絵・コツ・ひっかけ）
 *   6. 基本情報の範囲（.tx-fe）
 *   7. 章末（暗記カード・前後の章）
 *   8. トップ・単元の目次
 *   9. 部品の見本の枠（本文を書いたら消す）
 *  10. 印刷
 */

/* ---------- 1. 土台 ---------- */
/* 切り替えの帯が上に貼り付くので、目次のリンクやキーボードで選んだ要素が帯の裏に隠れないようにする（達成基準 2.4.11）。
 * --tx-bar-h は text.js が帯の実際の高さを入れる（JS なしでは帯が出ないので 0） */
html { scroll-padding-top: calc(var(--tx-bar-h, 0px) + 16px); }
.tx-main { padding-bottom: 64px; }
.tx-main [hidden] { display: none !important; }
.tx-skip { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 12px 16px; border: 2px solid var(--color-text); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-weight: 700; }
.tx-skip:focus { top: 8px; }
.tx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tx-note { color: var(--color-text-muted); }
/* パンくずのリンクを44px にする（kj の既定は上下4pxで37px。24px以上なので基準は満たすが、ここでは44pxにそろえる） */
.tx-main .kj-breadcrumb a { padding-block: 8px; }
.tx-main .kj-breadcrumb { padding-block: 4px; }

/* ---------- 2. 試験の切り替え ---------- */
/* JS が動くときだけ出す（head の1行が html に data-tx-exam を付ける）。JS なしでは全部開いたまま読めるので帯は要らない */
.tx-exambar { display: none; }
html[data-tx-exam] .tx-exambar { display: block; position: sticky; top: 0; z-index: 50; border-bottom: 2px solid var(--color-border); background: var(--color-surface); }
.tx-exambar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-block: 8px; }
.tx-exambar__label { font-weight: 700; }
.tx-exambar__group { display: inline-flex; border: 2px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.tx-exambar__opt { position: relative; display: inline-flex; }
.tx-exambar__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tx-exambar__opt span { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 7.5em; min-height: 44px; padding: 0 14px; color: var(--color-text); font-weight: 700; line-height: 1.2; }
.tx-exambar__opt + .tx-exambar__opt span { border-left: 2px solid var(--color-border); }
/* 選んでいる方：塗り＋「✓」の文字（色だけに頼らない） */
.tx-exambar__opt input:checked + span { background: var(--color-accent); color: var(--color-on-accent); }
.tx-exambar__opt span::before { content: "✓"; visibility: hidden; }  /* 幅が変わらないよう、選んでいない方にも場所だけ取る */
.tx-exambar__opt input:checked + span::before { visibility: visible; }
.tx-exambar__opt input:not(:checked) + span:hover { background: var(--kj-accent-soft); }
.tx-exambar__opt input:focus-visible + span { outline: 4px solid var(--color-text); outline-offset: -4px; box-shadow: inset 0 0 0 6px var(--kj-focus-ring); }
.tx-exambar__state { margin: 0; color: var(--color-text-muted); }
/* スマートフォン幅では帯を1行に収める（貼り付く帯が画面を食わないように）。状態の文は読み上げだけに残す */
@media (max-width: 639px) {
  .tx-exambar__inner { gap: 8px; padding-block: 6px; }
  .tx-exambar__opt span { min-width: 0; padding: 0 12px; }
  .tx-exambar__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 3. ページ上部・章の目次 ---------- */
.tx-hero { padding: 8px 0 8px; }
.tx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; }
.tx-meta__unit { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 2px solid var(--color-border); border-radius: 8px; background: var(--kj-inverse); color: var(--kj-on-inverse); }
.tx-meta__no { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 2px solid var(--color-border); border-radius: 8px; }
.tx-meta__group { color: var(--color-text-muted); }

.tx-toc { margin-top: 24px; padding: 16px 20px; border: 2px solid var(--color-border); border-radius: var(--kj-radius); background: var(--color-surface); }
.tx-toc__title { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 900; }
.tx-toc ol { margin: 0; padding: 0; list-style: none; columns: 2 16em; column-gap: 24px; }
.tx-toc li { break-inside: avoid; }
.tx-toc a { box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; }
.tx-toc__no { flex: none; min-width: 2.6em; font-family: var(--kj-font-mono); color: var(--color-text-muted); text-decoration: none; }

/* ---------- 4. 本文と節 ---------- */
/* 記事の本文は17px・行間1.8（kj の T3 記事と同じ） */
.tx-article { font-size: 1.0625rem; line-height: var(--kj-leading-body); }
/* 指数・添字（2の8乗、log の底）。ブラウザ既定の smaller だと約14pxになるので、16pxを下回らないようにする。行間は広げない */
.tx-article sup, .tx-article sub { font-size: max(16px, .75em); line-height: 0; }
.tx-article p { margin: 0 0 1em; }
.tx-section { margin-top: 56px; }
.tx-section > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 4px solid var(--kj-ink); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: var(--kj-leading-heading); }
.tx-section__no { font-family: var(--kj-font-mono); font-size: .8em; color: var(--color-text-muted); }
.tx-article h3 { margin: 32px 0 12px; font-size: 1.25rem; line-height: var(--kj-leading-heading); }
.tx-article ul, .tx-article ol { margin: 0 0 1em; padding-left: 1.5em; }
.tx-article li + li { margin-top: 4px; }
.tx-pending { color: var(--color-text-muted); }

/* ---------- 5. 本文の部品 ---------- */
/* 用語の初出 <strong class="tx-term" data-card="t0123">用語</strong>。蛍光ペンの下線＋太字（色だけに頼らない） */
.tx-term, .tx-term-nocard { font-weight: 700; background: linear-gradient(transparent 62%, var(--kj-marker) 62%); }
/* tx-term-nocard はシラバスにあるのに暗記カードがまだ無い語。見た目は同じで、点検の対象外（後でカードを足す目印） */

/* 場面の導入（節の頭の短い物語） <div class="tx-scene">…</div>。「場面」の札は CSS が付ける */
.tx-scene { position: relative; margin: 0 0 24px; padding: 28px 20px 12px; border: 2px solid var(--color-border); border-radius: var(--kj-radius); background: var(--color-surface); }
.tx-scene::before { content: "場面"; position: absolute; top: -14px; left: 16px; padding: 0 10px; border-radius: 6px; background: var(--kj-inverse); color: var(--kj-on-inverse); font-size: 1rem; font-weight: 700; line-height: 28px; }
.tx-scene > :last-child { margin-bottom: 0; }

/* 挿絵 <figure class="tx-illust"><img … onerror="this.closest('figure').classList.add('is-missing')"><figcaption>図：…</figcaption></figure>
 * 画像がまだ無い間は、同じ縦横比の点線の枠を出し、図の説明の後ろに「（準備中）」を足す */
.tx-illust { margin: 24px 0; }
/* 挿絵は黒い輪郭線で描いてあるので、ダークでも明るい額に載せて見せる（絵の側を2通り作らない）。
 * 額の色はこの絵のためだけの固定色。輪郭 #111827 との比は 16:1 以上、額の枠はダークの背景に対して 3:1 以上 */
.tx-illust { --tx-frame: #fff7e6; }
.tx-illust img { display: block; width: 100%; height: auto; background: var(--tx-frame); border: 3px solid var(--color-text); border-radius: var(--kj-radius); }
.tx-illust figcaption { margin-top: 8px; text-align: center; color: var(--color-text-muted); font-size: 1rem; }
.tx-illust__zoom { display: block; border-radius: var(--kj-radius); }
.tx-illust__hint { display: block; }
.tx-illust.is-missing img, .tx-illust.is-missing .tx-illust__hint { display: none; }
/* 絵が無い間は、高さ0になった「原寸で開く」リンクもフォーカスに乗せない（見えない所にフォーカスが行かないように） */
.tx-illust.is-missing .tx-illust__zoom { display: none; }
.tx-illust.is-missing::before { content: ""; display: block; aspect-ratio: 16 / 9; border: 2px dashed var(--color-border); border-radius: var(--kj-radius); background: var(--kj-placeholder); }
.tx-illust.is-missing figcaption { position: relative; margin-top: -64px; padding: 0 16px 32px; font-weight: 700; color: var(--color-text); }
.tx-illust.is-missing figcaption::after { content: "（準備中）"; }

/* 覚え方のコツ <aside class="tx-tip"><p class="tx-aside__title">覚え方のコツ</p><p>…</p></aside>
 * ひっかけ注意 <aside class="tx-trap"><p class="tx-aside__title">ひっかけ注意</p><p>…</p></aside>
 * 見出し語（.tx-aside__title）は必ず文字で書く。アイコンは飾り */
.tx-tip, .tx-trap { margin: 24px 0; padding: 16px 20px; border: 2px solid var(--color-accent); border-left-width: 8px; border-radius: var(--kj-radius); background: var(--kj-accent-soft); }
.tx-trap { border-color: var(--color-warning); background: var(--kj-notice-bg); }
.tx-tip > :last-child, .tx-trap > :last-child { margin-bottom: 0; }
.tx-aside__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-weight: 900; }
.tx-aside__title::before { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--tx-icon) center / contain no-repeat; mask: var(--tx-icon) center / contain no-repeat; }
.tx-tip .tx-aside__title { color: var(--color-accent); --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.tx-trap .tx-aside__title { color: var(--color-text); --tx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E"); }
.tx-trap .tx-aside__title::before { background: var(--color-warning); }

/* ---------- 6. 基本情報の範囲 ---------- */
/* <section class="tx-fe" aria-labelledby="<id>">
 *   <p class="tx-fe__band" id="<id>">ここから基本情報！</p>
 *   …（本文）…
 *   <p class="tx-fe__end">基本情報の範囲ここまで</p>
 * </section>
 * ITパスポートを選んでいるとき（html.tx-ready[data-tx-exam="ip"]）は帯だけを残して畳む。
 * 畳むのは text.js が動いたとき（.tx-ready）だけ。JS が読めなかったときは全部開いたまま */
.tx-fe { margin: 32px 0; padding: 0 0 0 16px; border-left: 6px solid var(--color-accent); }
.tx-fe__band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px !important; padding: 10px 14px; border: 2px solid var(--color-accent); border-radius: var(--kj-radius); background: var(--kj-accent-soft); color: var(--color-text); font-weight: 900; line-height: 1.5; }
.tx-fe__band::before { content: ""; flex: none; width: 28px; height: 28px; background: var(--color-accent); -webkit-mask: var(--tx-fe-icon) center / contain no-repeat; mask: var(--tx-fe-icon) center / contain no-repeat; }
.tx-fe { --tx-fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h5v-5h5v-5h5V6h3'/%3E%3Cpath d='M14 3h7v7'/%3E%3C/svg%3E"); }
.tx-fe__label { font-size: 1.125rem; }
.tx-fe__topic { font-weight: 700; }
.tx-fe__state { flex: 1 1 100%; font-weight: 400; font-size: 1rem; color: var(--color-text); }
.tx-fe__state:empty { display: none; }
.tx-fe__toggle { display: none; }
html.tx-ready[data-tx-exam="ip"] .tx-fe__toggle { display: inline-flex; }
.tx-fe__toggle[aria-expanded="true"]::before { content: "▲"; font-size: .8em; }
.tx-fe__toggle[aria-expanded="false"]::before { content: "▼"; font-size: .8em; }
.tx-fe__end { display: flex; align-items: center; gap: 8px; margin: 16px 0 0 !important; padding: 6px 14px; border: 2px dashed var(--color-accent); border-radius: var(--kj-radius); color: var(--color-text); font-weight: 700; }
.tx-fe__end::before { content: "■"; color: var(--color-accent); }
html.tx-ready[data-tx-exam="ip"] .tx-fe:not([data-open]) > :not(.tx-fe__band) { display: none; }
html.tx-ready[data-tx-exam="ip"] .tx-fe:not([data-open]) { border-left-style: dashed; }
html.tx-ready[data-tx-exam="ip"] .tx-fe:not([data-open]) > .tx-fe__band { margin-bottom: 0 !important; }

/* ---------- 7. 章末 ---------- */
.tx-chapter-end { margin-top: 64px; padding: 20px; border: var(--kj-border-bold) solid var(--kj-ink); border-radius: var(--kj-radius-lg); background: var(--color-surface); }
.tx-chapter-end > h2 { margin: 0 0 8px; font-size: 1.375rem; }
.tx-chapter-end > p { margin: 0 0 12px; }
.tx-pager { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 32px; }
.tx-pager a { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: var(--kj-radius); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.tx-pager a:hover { border-color: var(--color-accent); }
.tx-pager small { color: var(--color-text-muted); font-size: 1rem; }
.tx-pager strong { color: var(--color-accent); }
.tx-pager__next { text-align: right; }

/* ---------- 8. トップ・単元の目次 ---------- */
.tx-group { margin-top: 48px; }
.tx-group > h2 { margin: 0 0 4px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.tx-unit-card, .tx-chapter-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--color-text); text-decoration: none; }
.tx-unit-card .kj-card__text, .tx-chapter-card .kj-card__text { color: var(--color-text); }
.tx-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 700; color: var(--color-text-muted); }
.tx-chapter-card[data-ready="false"], .tx-unit-card[data-ready="false"] { border-style: dashed; }
.tx-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 2px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-size: 1rem; line-height: 1.4; }
/* kj-btn は折り返さない（nowrap）。長い文言のボタンは 390 幅であふれるので、これを足して折り返す */
.tx-btn-wrap { white-space: normal; text-align: center; line-height: 1.4; padding-block: 8px; max-width: 100%; }
.tx-chapter-card__sections { margin: 0; color: var(--color-text-muted); }
.tx-chapters { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.tx-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 12px; }
.tx-related { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tx-related a { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--color-accent); border-radius: 10px; font-weight: 700; text-decoration: none; }
.tx-related a:hover { background: var(--kj-accent-soft); }
.tx-howto { margin-top: 32px; }
.tx-howto h2 { font-size: 1.375rem; margin: 0 0 8px; }
.tx-howto .tx-fe { margin-top: 16px; }

/* ---------- 9. 部品の見本の枠 ---------- */
/* <div class="tx-sample" data-tx-sample> の中は用語の点検から外す。本文を書いたら枠ごと消す（npm run deploy は残っていると止まる） */
.tx-sample { margin: 24px 0; padding: 0 16px 16px; border: 3px dashed var(--color-warning); border-radius: var(--kj-radius); }
.tx-sample__title { margin: 0 -16px 16px !important; padding: 6px 16px; background: var(--kj-notice-bg); font-weight: 900; border-radius: var(--kj-radius) var(--kj-radius) 0 0; }

/* ---------- 10. 印刷 ---------- */
@media print {
  html[data-tx-exam] .tx-exambar { display: none; }
  html { scroll-padding-top: 0; }
  .tx-fe__toggle { display: none !important; }
}
/* 今いるページ（リンクでない）も、リンクと同じ高さにそろえる */
.tx-main .kj-breadcrumb li[aria-current] { padding-block: 8px; }

/* 表 <div class="tx-table-wrap" tabindex="0" role="region" aria-label="…の比較"><table class="tx-table">…</table></div>
 * 似た語の比較用。狭い画面では横にスクロールする（枠の中だけ。ページは横にあふれない） */
.tx-table-wrap { margin: 24px 0; overflow-x: auto; border: 2px solid var(--color-border); border-radius: var(--kj-radius); }
.tx-table-wrap:focus-visible { outline: 3px solid var(--kj-focus-ring); outline-offset: 2px; }
.tx-table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 1rem; line-height: 1.6; }
.tx-table th, .tx-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.tx-table thead th { background: var(--color-surface-strong); font-weight: 700; }
.tx-table tr:last-child td { border-bottom: 0; }