/* =================================================================
 * c-table — テーブル共通
 *   Figma スタイルガイド: 5824:98053（Wireframe-22「テーブル」・canonical 一覧 / 項目30〜34）
 *                         5407:87977（既存・個別 sub-node 参照）
 *   ・罫線テーブル(31)     : <table class="c-table">                （default）
 *   ・上部見出し(32)       : <table class="c-table c-table--column">
 *   ・左部見出し(33)       : <table class="c-table c-table--row">
 *   ・上部左部見出し(30)   : <table class="c-table c-table--matrix">
 *
 *   行/セルの状態:
 *     <tr class="c-table__row--alert">      … 注意行（薄ピンク地）
 *     <tr class="c-table__row--highlight">  … 強調行（薄イエロー地）
 *     <td class="c-table__cell--alert">     … セル文字を赤（Alert）
 *     <td class="c-table__cell--center|--right"> … セル内寄せ
 *
 *   横スクロール（Figma「横/縦スクロール表示」。PCでは原則使わない）:
 *     <div class="c-table-scroll"><table class="c-table …">…</table></div>
 *
 * マークアップは Blade パーシャル front/components/table.blade.php が生成する。
 * base.css が table を border-collapse / border-spacing:0 にリセット済み。
 * ※製品詳細のスペック表（show-article.blade.php）は variant=ruled へ移行済み。値セル内の
 *   スタイル（.product-detail__spec-val / -btn 等）は products/show.css に残置している。
 * =================================================================*/

.c-table {
  /* Figma 実寸でデザイントークンに無い値はコンポーネント内ローカル変数に閉じ込める */
  --c-table-line: color-mix(in srgb, var(--color-neutral-04) 88%, transparent); /* rgba(217,217,217,.88) */
  --c-table-cell-px: var(--space-4);   /* 16px */
  --c-table-cell-py: 10rem;             /* グリッド系の行内余白（Figma py:10／8の倍数スケール外） */
  --c-table-bg-alert: #FFF4F4;         /* 注意行ティント（Figma 実寸・トークン外） */
  --c-table-bg-highlight: #FFFCE2;     /* 強調行ティント（Figma 実寸・トークン外） */

  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);                  /* 14px */
  line-height: var(--lh-body);                   /* 1.75 */
  letter-spacing: var(--letter-spacing-small);   /* 0（14px 以下） */
  color: var(--color-text-default);              /* #333 */
}

/* キャプションは視覚的に隠しスクリーンリーダーへ提供（表示したい場合は上書き） */
.c-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* セル共通 */
.c-table__cell,
.c-table__rowhead,
.c-table__colhead {
  padding: var(--c-table-cell-py) var(--c-table-cell-px);
  vertical-align: middle;
  word-break: break-word;
}

/* データセル */
.c-table__cell {
  background-color: var(--color-white);
  text-align: left;
  font-weight: var(--fw-regular);
  color: var(--color-text-default);              /* #333 */
}

/* 見出しセル（文字色・太さは共通） */
.c-table__colhead,
.c-table__rowhead {
  color: var(--color-text-sub);                  /* #787878 */
  font-weight: var(--fw-regular);
  text-align: center;
}

/* 列見出し(上部)=#F5F2F0（単独 column は Figma「上部見出しテーブル」5407:88359 準拠）
   行見出し(左部)=#F5F2F0 ／ 角=#EAE5E1。
   ただし matrix だけは上部見出しを #EAE5E1 とし、左部 #F5F2F0 と対比させる
   （Figma matrix 標準表 5407:87997 準拠）。 */
.c-table__colhead          { background-color: var(--color-bg-02); }   /* #F5F2F0（column 既定） */
.c-table__rowhead          { background-color: var(--color-bg-02); }   /* #F5F2F0 */
.c-table--matrix .c-table__colhead { background-color: var(--color-bg-03); }   /* matrix 上部 = #EAE5E1 */
.c-table__colhead--corner  { background-color: var(--color-bg-03); }   /* 角 = #EAE5E1 */

/* セル状態 */
.c-table__cell--alert  { color: var(--color-alert); }   /* 文字を赤 */
.c-table__cell--center { text-align: center; }
.c-table__cell--right  { text-align: right; }

/* 行状態（行全体の地色）— 見出しセルの地色（ruled の no-fill 含む）より優先するため
   `.c-table tr.c-table__row--…` まで特定度を上げて全バリアントで効かせる */
.c-table tr.c-table__row--alert > *     { background-color: var(--c-table-bg-alert); }
.c-table tr.c-table__row--highlight > * { background-color: var(--c-table-bg-highlight); }

/* -----------------------------------------------------------------
 * グリッド系（column / row / matrix）= 全面罫線＋外枠
 * ----------------------------------------------------------------- */
.c-table--column :where(th, td),
.c-table--row :where(th, td),
.c-table--matrix :where(th, td) {
  border: 1px solid var(--c-table-line);
}

/* -----------------------------------------------------------------
 * 罫線テーブル（ruled・既定）= 行間の横罫線のみ。左に見出しセル（地色なし）。
 *   ※製品スペック表のフォーマット（左 140px・Medium・グレー ＋ 右に値）
 * ----------------------------------------------------------------- */
.c-table--ruled { border-top: 1px solid var(--c-table-line); }

.c-table--ruled :where(th, td) {
  border-bottom: 1px solid var(--c-table-line);
  padding: var(--space-3) var(--c-table-cell-px);  /* 12px 16px（Figma ruled） */
  vertical-align: top;
  line-height: var(--lh-loose);                    /* 1.8（Figma ruled） */
}

.c-table--ruled .c-table__rowhead {
  box-sizing: content-box;         /* width を「ラベル列の実コンテンツ幅」として扱う */
  width: 140rem;                    /* Figma: 見出しセル w-140 */
  background: none;                /* ruled の見出しは地色なし */
  font-weight: var(--fw-medium);   /* Medium 500 */
  text-align: left;
}

/* 見出し→値の間隔は見出しセルの右 padding(16px) で確保し、値セルの左 padding は 0 に
   する。左右対称 padding のままだと隣接で 32px になるため、Figma の gap-16 を再現する。 */
.c-table--ruled .c-table__cell {
  padding-left: 0;
  background: none;
}

/* -----------------------------------------------------------------
 * 横スクロールラッパ（Figma「横スクロール表示」）。PCでは原則使わない。
 * ----------------------------------------------------------------- */
.c-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -----------------------------------------------------------------
 * SP（≤1023.98px）
 * ----------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* ruled は SP で見出しを値の上に縦積み（Figma SP / 左部見出しテーブルの折りたたみ準拠）。
     table/tr/cell を block 化してラベル → 値の縦並びにする。 */
  .c-table--ruled,
  .c-table--ruled tbody,
  .c-table--ruled tr,
  .c-table--ruled .c-table__rowhead,
  .c-table--ruled .c-table__cell {
    display: block;
    width: auto;
  }
  .c-table--ruled tr {
    padding: var(--space-4);                          /* 16px */
    border-bottom: 1px solid var(--c-table-line);
  }
  .c-table--ruled .c-table__rowhead,
  .c-table--ruled .c-table__cell {
    padding: 0;
    border-bottom: 0;
  }
  .c-table--ruled .c-table__cell { margin-top: var(--space-1); }   /* 4px ラベル⇔値 */
}