/* ============================================================
   応用情報技術者試験 合格教科書 — サイト固有スタイル
   stellararc.css + doc.css の後に読み込む。ロールトークンのみ使用。
   ============================================================ */

/* 本文カラムは読みやすい幅に絞る（doc.css の container-lg を上書き） */
.tb-main-narrow {
  max-width: calc(var(--sa-container-md) + 2 * var(--sa-space-6));
}

/* インラインコード内の URL / パスの横溢れ対策 */
:not(pre) > code { overflow-wrap: anywhere; }

/* --- 表紙（index のヒーロー帯）。両テーマとも濃紺の帯なので
       中の文字・ロゴは text-inverse / 白ロゴ固定でよい --- */
.tb-cover {
  background: var(--sa-gradient-deep);
  padding: var(--sa-space-20) 0 var(--sa-space-16);
}
.tb-cover-inner {
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding-inline: var(--sa-space-6);
}
.tb-cover h1 {
  color: var(--sa-color-text-inverse);
  font-size: clamp(var(--sa-font-size-3xl), 5vw, var(--sa-font-size-5xl));
  margin: var(--sa-space-4) 0 var(--sa-space-4);
  letter-spacing: var(--sa-font-letterSpacing-tight);
}
.tb-cover .tb-cover-lead {
  color: var(--sa-color-text-inverse);
  opacity: 0.85;
  font-size: var(--sa-font-size-lg);
  max-width: var(--sa-container-md);
}
.tb-cover .tb-cover-badges { display: flex; flex-wrap: wrap; gap: var(--sa-space-2); margin: var(--sa-space-6) 0 0; }
/* token-lint-allow: 濃紺帯の上の半透明チップ。両テーマで地が変わらない面なので白固定でよい */
.tb-cover .sa-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF; /* token-lint-allow: 同上 */
}
.tb-cover .tb-cover-cta { margin-top: var(--sa-space-8); }

/* --- 目次カード --- */
.tb-part-title {
  margin-top: var(--sa-space-12);
  font-size: var(--sa-font-size-xl);
  color: var(--sa-color-text-brand);
}
.tb-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--sa-space-4);
  margin: var(--sa-space-5) 0 0;
}
a.tb-toc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.tb-toc-card:hover { border-color: var(--sa-color-border-brand); box-shadow: var(--sa-shadow-md); }
.tb-toc-num {
  font-size: var(--sa-font-size-xs);
  font-weight: var(--sa-font-weight-bold);
  letter-spacing: var(--sa-font-letterSpacing-wide);
  color: var(--sa-color-text-brand);
}
.tb-toc-title { font-size: var(--sa-font-size-lg); font-weight: var(--sa-font-weight-bold); line-height: var(--sa-font-lineHeight-snug); }
.tb-toc-desc { font-size: var(--sa-font-size-sm); color: var(--sa-color-text-muted); flex: 1; }
.tb-toc-meta { font-size: var(--sa-font-size-xs); color: var(--sa-color-text-subtle); }

/* --- 章ページ --- */
.tb-chapter-hero .sa-badge { margin-bottom: var(--sa-space-2); margin-right: var(--sa-space-2); }
.tb-chapter-hero .tb-badge-b {
  background: var(--sa-color-bg-brandSubtle);
  color: var(--sa-color-text-brand);
}

/* 章内目次（ビルドが自動生成） */
.tb-chapter-toc {
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-subtle);
  padding: var(--sa-space-4) var(--sa-space-6);
  margin: 0 0 var(--sa-space-10);
  font-size: var(--sa-font-size-sm);
}
.tb-chapter-toc ul { margin: var(--sa-space-2) 0 0; padding-left: 1.2em; }
.tb-chapter-toc .tb-chapter-toc-label {
  font-weight: var(--sa-font-weight-bold);
  color: var(--sa-color-text-subtle);
  letter-spacing: var(--sa-font-letterSpacing-wide);
  font-size: var(--sa-font-size-xs);
}

/* --- 図解（inline SVG）---
   器は design-system 正式の figure.sa-fig（stellararc.css が width:100% / max-width:780px を定義）。
   全図の viewBox 幅を 720 に統一しているので、線幅と文字サイズが図をまたいで揃う。
   狭幅では figure だけを横スクロールさせる（縮小に任せると文字が読めなくなるため、
   min-width で下限を持たせる）。スクロールコンテナは figure そのものである必要がある。 */
figure.sa-fig {
  margin: var(--sa-space-8) auto;
  max-width: min(100%, var(--sa-container-md));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  text-align: left;
}
figure.sa-fig > svg {
  min-width: 600px;
  color: var(--sa-color-text-default);
}
figure.sa-fig > figcaption {
  min-width: 600px;
  text-align: left;
}
/* 図中の等幅ラベル（SQL・コマンド・16 進数）用 */
figure.sa-fig svg text.tb-mono { font-family: var(--sa-font-family-mono); }

/* --- 計算の型（公式 + 例題）--- */
.tb-formula {
  border-left: 4px solid var(--sa-color-border-brand);
  margin: var(--sa-space-6) 0;
}
.tb-formula > :first-child { margin-top: 0; }
.tb-formula > :last-child { margin-bottom: 0; }
.tb-formula p strong:first-child { color: var(--sa-color-text-brand); }

/* --- 本文中の重要キーワード --- */
.tb-kw {
  font-weight: var(--sa-font-weight-bold);
  color: var(--sa-color-text-brand);
}

/* --- 理解度チェック（科目 A 形式）--- */
details.tb-quiz {
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-subtle);
  margin: var(--sa-space-3) 0;
}
details.tb-quiz summary {
  cursor: pointer;
  padding: var(--sa-space-3) var(--sa-space-5);
  font-weight: var(--sa-font-weight-medium);
}
details.tb-quiz summary:hover { color: var(--sa-color-text-brand); }
details.tb-quiz[open] summary { border-bottom: 1px solid var(--sa-color-border-default); }
details.tb-quiz .tb-quiz-a { padding: var(--sa-space-3) var(--sa-space-5) var(--sa-space-4); }
details.tb-quiz .tb-quiz-a > :last-child { margin-bottom: 0; }
/* 選択肢はア・イ・ウ・エで付番。summary の外に置くので開いたときだけ見える */
details.tb-quiz .tb-choices {
  list-style: none;
  margin: 0;
  padding: var(--sa-space-3) var(--sa-space-5) 0;
}
details.tb-quiz .tb-choices li {
  position: relative;
  padding-left: 2em;
  margin: var(--sa-space-1) 0;
}
details.tb-quiz .tb-choices li::before {
  content: "";
  position: absolute;
  left: 0;
  font-weight: var(--sa-font-weight-bold);
  color: var(--sa-color-text-brand);
}
details.tb-quiz .tb-choices li:nth-child(1)::before { content: "ア"; }
details.tb-quiz .tb-choices li:nth-child(2)::before { content: "イ"; }
details.tb-quiz .tb-choices li:nth-child(3)::before { content: "ウ"; }
details.tb-quiz .tb-choices li:nth-child(4)::before { content: "エ"; }

/* --- 科目 B 演習（本文 + 設問 + 解答例）--- */
.tb-exercise {
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-surface);
  padding: var(--sa-space-5) var(--sa-space-6);
  margin: var(--sa-space-8) 0;
}
.tb-exercise > h3:first-child { margin-top: 0; color: var(--sa-color-text-brand); }
.tb-exercise .tb-exercise-text {
  border-left: 3px solid var(--sa-color-border-default);
  padding-left: var(--sa-space-4);
  margin: var(--sa-space-4) 0;
}

/* --- 前後章ナビ --- */
.tb-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sa-space-4);
  margin-top: var(--sa-space-16);
}
.tb-nav a {
  display: block;
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-surface);
  padding: var(--sa-space-4) var(--sa-space-5);
  text-decoration: none;
  min-height: 100%;
}
.tb-nav a:hover { border-color: var(--sa-color-border-brand); }
.tb-nav .tb-nav-label {
  display: block;
  font-size: var(--sa-font-size-xs);
  color: var(--sa-color-text-subtle);
  margin-bottom: var(--sa-space-1);
}
.tb-nav .tb-nav-title { color: var(--sa-color-text-link); font-weight: var(--sa-font-weight-medium); }
.tb-nav .tb-nav-next { text-align: right; }

@media (max-width: 40rem) {
  .tb-nav { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .tb-nav, .tb-chapter-toc { display: none; }
  .tb-cover { background: none; }
  .tb-cover h1, .tb-cover .tb-cover-lead { color: var(--sa-color-text-default); }
}