/* ============================================
   s-price-table-01.css
   料金表テーブル統一スタイル
   Flexible Table Block + core/table 両対応

   詳細度戦略:
   FTB プラグインは .ftb.ftb > table th (0,2,1) を使用。
   テーマ側は .ftb.ftb.ftb > table th (0,3,1) で上回る。
   !important は使わず、inline style="" による
   UIからの色変更を活かす。
   ============================================ */

/* --- 省略用変数 ---
   FTB = .wp-block-flexible-table-block-table
   CT  = .wp-block-table.is-style-stripes
   プラグインの 0,2,x を 0,3,x で上書き
   ----------------------------------------- */

/* ==========================================================================
   テーブル全体
   ========================================================================== */

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table,
.wp-block-table.is-style-stripes.is-style-stripes table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: var(--font-size-md);
  border: none;
}

/* ==========================================================================
   ヘッダー行 (thead th)
   背景色はデフォルトグレー。UIでセルの背景色を変えれば
   期間限定(lavender)/モニター(pink)に上書きできる
   ========================================================================== */

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead th,
.wp-block-table.is-style-stripes.is-style-stripes thead th {
  padding: var(--space-3-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--color-white);
  background: var(--color-table-header);
  border: none;
  border-right: 0.5px solid rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}

/* 保存済みブロックのセル内 text-align より、サイト共通の表分類を優先する。 */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead th,
.wp-block-table.wp-block-table table thead th {
  text-align: center !important;
}

/* ヘッダー最終列: 右ボーダーなし */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead th:last-child,
.wp-block-table.is-style-stripes.is-style-stripes thead th:last-child {
  border-right: none;
}

/* ヘッダー1列目: ライトグレー */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead th:first-child,
.wp-block-table.is-style-stripes.is-style-stripes thead th:first-child {
  background: var(--color-table-header-light);
}

/* ==========================================================================
   ボディセル (tbody td)
   ========================================================================== */

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody td,
.wp-block-table.is-style-stripes.is-style-stripes tbody :is(td, th) {
  padding: var(--space-3-xs) var(--space-sm);
  height: 6rem;
  font-size: var(--font-size-md);
  text-align: center;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--color-border-light);
  vertical-align: middle;
}

/* ヘッダー行なし（定義型: 項目＋値の2列）テーブルは値セルも左寄せ */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table:not(:has(thead)) tbody td,
.wp-block-table.is-style-stripes.is-style-stripes table:not(:has(thead)) tbody :is(td, th) {
  text-align: left;
}

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table:not(:has(thead)) :is(th, td),
.wp-block-table.wp-block-table table:not(:has(thead)) :is(th, td) {
  text-align: left !important;
}

/* 1列目（施術名）: やや大きめ + 左寄せ */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody td:first-child,
.wp-block-table.is-style-stripes.is-style-stripes tbody :is(td, th):first-child {
  font-size: var(--font-size-xl);
  text-align: left;
}

/* thead付き料金表は、保存済みのセル内寄せを除去した場合と同じ配置に統一する。 */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table:has(thead) tbody td,
.wp-block-table.wp-block-table table:has(thead) tbody :is(td, th) {
  text-align: center !important;
}

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table:has(thead) tbody td:first-child,
.wp-block-table.wp-block-table table:has(thead) tbody :is(td, th):first-child {
  text-align: left !important;
}

/* 比較表だけは文章セルを左寄せに戻す。 */
.wp-block-flexible-table-block-table.s-table-07.s-table-07.s-table-07.s-table-07 > table tbody :is(th, td) {
  text-align: left !important;
}

/* 最終行: 下ボーダーなし */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr:last-child td,
.wp-block-table.is-style-stripes.is-style-stripes tbody tr:last-child :is(td, th) {
  border-bottom: none;
}

/* ==========================================================================
   セル内リンク（商品名など）: クリッカブルと分かる装飾
   primary 色 + 下線でリンクであることを明示。hover は opacity のみ（Flat）
   ========================================================================== */

.c-price-table a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: var(--font-weight-medium);
}

.c-price-table a:hover {
  opacity: 0.7;
}

/* ==========================================================================
   ストライプ無効化
   ========================================================================== */

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr,
.wp-block-table.is-style-stripes.is-style-stripes tbody tr {
  background: transparent;
}

/* ==========================================================================
   figure ラッパー
   ========================================================================== */

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table,
.wp-block-table.is-style-stripes.is-style-stripes {
  --table-component-margin-block: var(--space-2-xl);
  /* margin-inline は使わない: constrained レイアウト (.entry-content > *) の
     margin-inline:auto 中央寄せを打ち消さないため（coding-rules §9.2 パターンE）。
     margin ショートハンドだと margin-inline:0 になり、entry-content 直下の
     core table が左に飛び出す（未成年ページの対象年齢表の事故）。
     paddingも指定しない。直下表はs-layout-04、ネスト表は親コンポーネントを
     外側paddingの単一責務とする。 */
  margin-block: var(--table-component-margin-block);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@container (max-width: 599px) {
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead th,
  .wp-block-table.is-style-stripes.is-style-stripes thead th {
    padding: var(--space-4-xs) var(--space-xs);
    font-size: var(--font-size-3-xs);
  }

  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody td,
  .wp-block-table.is-style-stripes.is-style-stripes tbody :is(td, th) {
    padding: var(--space-3-xs) var(--space-xs);
    height: 4.4rem;
    font-size: var(--font-size-sm);
  }

  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody td:first-child,
  .wp-block-table.is-style-stripes.is-style-stripes tbody :is(td, th):first-child {
    font-size: var(--font-size-md);
  }
}

/* ==========================================================================
   汎用価格ブロック（jj-price-manager/price-table）の調整
   ブロックはコアの table ブロックと同じクラスを出すため、上のルールがそのまま
   効く。ここでは差分だけを補う。
   ========================================================================== */

/* コアの wp-block-library は thead に 3px の下線を引く。FTB 側（.wp-block-flexible-
   table-block-table）は影響を受けないが、コアtableクラスを使うブロックでは
   ヘッダー下だけが極端に太くなるため、他の罫線と同じ細さに揃える。 */
.wp-block-table.is-style-stripes.is-style-stripes thead,
.wp-block-table.is-style-stripes.is-style-stripes table thead {
  border-bottom: 0.5px solid var(--color-border-light);
}

/* 列ごとの文字寄せ（ブロックの「列の寄せ」設定）。
   上の料金表ルールが text-align を !important で固定しているため、
   同じ強さで上書きする。列単位の指定が無いセルは従来どおりの寄せのまま。 */
.wp-block-table.wp-block-table table :is(th, td).jj-pt-align-left {
  text-align: left !important;
}

.wp-block-table.wp-block-table table :is(th, td).jj-pt-align-center {
  text-align: center !important;
}

.wp-block-table.wp-block-table table :is(th, td).jj-pt-align-right {
  text-align: right !important;
}

/* 列幅（ブロックの「この列の幅」設定）。
   価格表ブロックが <colgroup><col class="jj-pt-w-NN"> を出す。
   任意の値をインラインstyleで当てるのはCSS規約で禁止のため、段階的なクラスで持つ。
   幅の指定が1つも無ければ colgroup 自体が出ないので、既定は従来どおりの自動幅。 */
.wp-block-table col.jj-pt-w-10 { width: 10%; }
.wp-block-table col.jj-pt-w-15 { width: 15%; }
.wp-block-table col.jj-pt-w-20 { width: 20%; }
.wp-block-table col.jj-pt-w-25 { width: 25%; }
.wp-block-table col.jj-pt-w-30 { width: 30%; }
.wp-block-table col.jj-pt-w-35 { width: 35%; }
.wp-block-table col.jj-pt-w-40 { width: 40%; }
.wp-block-table col.jj-pt-w-50 { width: 50%; }
.wp-block-table col.jj-pt-w-60 { width: 60%; }

/* 行見出し（1列目の <th scope="row">）。
   スクリーンリーダーが金額セルを読むとき「何の料金か」を辿れるよう、価格表ブロックは
   1列目を行見出しにしている。ブラウザ既定の bold / center は見た目を変えてしまうので、
   本文セルと同じ体裁へ戻す（配置は上の tbody :is(td, th) ルールが担当）。 */
.wp-block-table.wp-block-table table tbody th[scope="row"] {
  font-weight: var(--font-weight-normal);
}