/* tabs.css — 案1（CSS Grid で複数列＋ラベル2行まで） */
:root {
  --tab-gap: .5rem;         /* タブ間のすき間 */
  --tab-pad-v: .5rem;       /* タブ内 上下パディング */
  --tab-pad-h: .75rem;      /* タブ内 左右パディング */
  --tab-min: 9.5rem;        /* タブの最小幅（列数の調整はここ） */
  --tab-radius: .5rem;      /* タブの角丸 */
  --tab-border: #ddd;       /* ボーダー色 */
  --tab-border-active: #ccc;
  --tab-bg: #f6f7f9;
  --tab-bg-active: #fff;
  --divider: #eee;
  --focus: #4c8bf5;         /* フォーカス色 */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

/* --- タブバー（複数列に自動折り返し） --- */
.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tab-min), 1fr));
  gap: var(--tab-gap);
  padding: .5rem;
  border-bottom: 1px solid var(--divider);
  background: #fff;
  overflow: visible; /* 横スクロールさせず複数行に */
}

/* --- タブボタン --- */
.tabs button {
  appearance: none;
  padding: var(--tab-pad-v) var(--tab-pad-h);
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  border-bottom: 2px solid transparent;
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  cursor: pointer;

  /* ラベルは 2 行まで＆省略表記 */
  white-space: normal;               /* 折り返し可 */
  display: -webkit-box;
  -webkit-line-clamp: 2;             /* 2行まで */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: calc(1.2em * 2 + var(--tab-pad-v) * 2); /* 2行分の高さ確保 */

  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* 選択タブ */
.tabs button[aria-selected="true"] {
  background: var(--tab-bg-active);
  border-color: var(--tab-border-active) var(--tab-border-active) var(--tab-bg-active);
  font-weight: 600;
}

/* ホバー/フォーカス */
.tabs button:hover {
  background: #fff;
}
.tabs button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Firefox などの line-clamp 非対応フォールバック */
@supports not (-webkit-line-clamp: 2) {
  .tabs button {
    display: block;
    max-height: calc(1.2em * 2 + var(--tab-pad-v) * 2);
  }
}

/* --- パネル領域（iframe を想定） --- */
.panels {
  padding: .5rem;
}
.panel {
  display: none;
  width: 100%;
  border: 0;
  background: transparent;
  min-height: 60vh; /* 初期高さ（自動調整スクリプトがあれば上書きされます） */
}
.panel.active {
  display: block;
}

@media (max-width: 600px) {
  .panel { min-height: 70vh; }
}

/* アクセシビリティ用の隠しラベル */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* モバイル用ドロップダウン（上部に固定） */
.tab-picker {
  display: none;
  position: sticky; top: 0; z-index: 9;
  padding: .5rem; background: #0b0d2b; /* ヘッダー色に合わせて */
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.tab-picker select {
  width: 100%;
  font-size: 16px;              /* iOS ズーム防止 */
  padding: .5rem .75rem;
  border-radius: .5rem;
}

/* 画面が狭いときはタブを隠してセレクトを出す */
@media (max-width: 640px) {
  .tabs { display: none; }
  .tab-picker { display: block; }
}


/* ---- print: 親側・確実に1面だけ出力／余白＆フッター調整 ---- */
/* @page { size: A4 portrait; margin: 12mm; } */

@media print {
  /* タブUIは印刷しない */
  #tab-bar, .tab-picker, .tabs, [role="tablist"] { display: none !important; }

  /* 余白と高さのリセット（大空白防止） */
  html, body, #panels {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 非アクティブ面を確実に排除（JSが付与する .__print-hide も利用） */
  #panels iframe.__print-hide,
  #panels .panel.__print-hide { display: none !important; }

  /* フッターは通常フロー（重なり防止）。必要なら margin-top を調整 */
  #footer, footer, .site-footer {
    position: static !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 8mm !important;
  }

  /* リンクURLの自動追記を抑止 */
  a[href]:after { content: "" !important; }
}