:root {
  /* === 共通カラーパレット（用途非依存） === */
  --color-black:        #202020;
  --color-navy:         #000080;
  --color-steelblue:    #005b99;
  --color-skyblue:      #007acc;
  --color-ash:          #666666;
  --color-gray-medium:  #999999;
  --color-silver:       #cccccc;
  --color-khaki:        #f0e68c;
  --color-paper:        #f9f3e8;
  --color-ivory:        #fffaf0;
  --color-paper-soft:   #fafafa;
  --color-white:        #ffffff;
  --color-test:         #ff0000;

  /* 影 */
  --ui-shadow-light:    0 2px 8px rgba(0,0,0,.12);
  --ui-shadow-subtle:   rgba(0,0,0,.05);

  /* フォント */
  --ui-font-serif:      'Shippori Mincho B1', 'Noto Serif JP', serif;
  --ui-font-sans:       'Noto Sans JP', sans-serif;

  /* フォントサイズ */
  --ui-font-size-base:  16px;
  --ui-font-size-large: 2rem;
  --ui-font-size-middle:1.3rem;
  --ui-font-size-h1:    1.8rem;
  --ui-font-size-h2:    1.4rem;
  --ui-font-size-h3:    1.1rem;
  --ui-font-size-small: 0.9rem;
  --ui-font-size-print: 12pt;
  --ui-font-size-print-small: 10pt;

  /* 行間 */
  --ui-line-height-base: 1.6;
  --ui-line-height-middle:1.4;
  --ui-line-height-tight: 1.2;

  /* 余白 */
  --ui-spacing-small:   0.4rem;
  --ui-spacing-medium:  1rem;
  --ui-spacing-large:   2rem;
  --ui-container-padding-top:    100px;
  --ui-container-padding-side:   20px;
  --ui-container-padding-bottom: 2rem;
  --ui-container-padding-mobile: 1rem;
  --ui-container-padding-print:  1cm;

  /* 角丸 */
  --ui-border-radius:   4px;

  /* === テーブル系追加変数 === */
  --space-1:            0.2rem;
  --space-2:            0.4rem;
  --line-color:         var(--color-ash);
  --table-head-bg:      #f7f5f1;
  --table-stripe-bg:    #faf9f7;
}

/* 共通テーブル基礎 */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1rem;
}

.table th,
.table td {
  padding: var(--space-2);
  border: 1px solid var(--line-color);
  vertical-align: top;
}

.table th {
  background: var(--table-head-bg);
  font-weight: 600;
  text-align: left;
}

/* バリエーション */
.table--compact th,
.table--compact td { padding: var(--space-1); }

.table--borderless th,
.table--borderless td { border: none; }

.table--striped tbody tr:nth-child(odd) {
  background: var(--table-stripe-bg);
}

/* 幅ユーティリティ */
.w-80 { width: 80%; margin-inline: auto; }
.w-70 { width: 70%; margin-inline: auto; }
.w-60 { width: 60%; margin-inline: auto; }
.w-50 { width: 50%; margin-inline: auto; }
.w-40 { width: 40%; margin-inline: auto; }
.w-30 { width: 30%; margin-inline: auto; }
.w-20 { width: 20%; margin-inline: auto; }

@media (max-width: 640px) {
  .w-80, .w-70, .w-60, .w-50, .w-40, .w-30, .w-20 { width: 100%; }
}

/* 横スクロール（スマホ対応） */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > .table {
  min-width: 560px; /* 列数に応じて調整 */
}

/* =============================
   諸元テーブル（<colgroup>前提）
============================= */
.shogen-data-table {
  font-family:       var(--ui-font-serif);
  color:             var(--color-black);
  background-color:  var(--color-paper);
  width:             90%;
  max-width:         70ch;
  margin:            10px auto;
  border-collapse:   collapse;
  border:            1px solid var(--color-silver);
  border-radius:     var(--ui-border-radius);
  box-shadow:        var(--ui-shadow-light);
}

/* ヘッダ・セル */
.shogen-data-table th {
  border:            1px solid var(--color-silver);
  padding:           2px 2px;
  text-align:        left;
  background-color:  var(--table-head-bg);
  font-weight:       bold;
}
.shogen-data-table td {
  border:            1px solid var(--color-silver);
  padding:           4px 2px;
  text-align:        right;
}

/* 列幅の補助指定（<colgroup>が無い場合のフォールバック） */
.shogen-data-table:not(:has(colgroup)) col:nth-child(1),
.shogen-data-table:not(:has(colgroup)) col:nth-child(3) { width: 35%; }
.shogen-data-table:not(:has(colgroup)) col:nth-child(2),
.shogen-data-table:not(:has(colgroup)) col:nth-child(4) { width: 15%; }


/* 左・右・左・右 の配置 */
.shogen-data-table th:nth-child(1),
.shogen-data-table td:nth-child(1) {
  text-align: left;
  font-weight: bold;
}
.shogen-data-table th:nth-child(2),
.shogen-data-table td:nth-child(2) {
  text-align: right;
}
.shogen-data-table th:nth-child(3),
.shogen-data-table td:nth-child(3) {
  text-align: left;
  font-weight: bold;
}
.shogen-data-table th:nth-child(4),
.shogen-data-table td:nth-child(4) {
  text-align: right;
}


/* 印刷用 */
@media print {
  .table th, .table td,
  .shogen-data-table th, .shogen-data-table td {
    border-color: #000;
  }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}