/* ==========================================================================
   curble-chair.css — Issue-011 Curble Chair 商品ページ page-specific 層
   wp_diversity theme / enqueue: is_page('curble-chair') のときのみ配信
   読み込み順: style.css → rebuild.css → curble-chair.css
   --------------------------------------------------------------------------
   命名根拠
   - 既存の page-specific CSS は `top.css`（front page）／`company.css`
     （/company-overview/）／`products-list.css`（/products-list/）。
     「1 Page = 1 page-specific CSS / slug で命名」という規約に従い、
     slug `curble-chair` に一致する `curble-chair.css` を採用する。
   --------------------------------------------------------------------------
   方針
   - Global Component（rebuild.css）で解決できるものは再定義しない。
     再利用: .l-inner / .sec-eyebrow / .sec-title / .cta / .cta--primary /
             .link-inline / .ext-mark / :focus-visible / .screen-reader-text /
             Design Token 一式
   - `.page-chair` にスコープを閉じる。`.page-id-xxx` を作らない。
   - Gutenberg の layout hash 依存セレクタ（wp-container-core-*）を作らない。
   - `!important` は使わない。inline style も使わない。JS も追加しない。
   - breakpoint は既存に合わせる（1100 / 900 / 768 / 700 / 500）。
     本ファイルで使うのは **768** と **900** のみ。
   --------------------------------------------------------------------------
   Cascade 注意（Issue-008 / 009 で実際に発生した事象）
     style.css の `a:any-link { color:#444 }` は詳細度 (0,1,1)。
     本文リンクは `a.〜:link / :visited / :hover / :focus / :active` を
     明示して (0,2,1) 以上にしないと #444 に戻される。
     本ページのリンクは **すべて rebuild.css の .link-inline / .cta--primary**
     を使うため、そちら側で解決済み。ここでは色を再定義しない。
   --------------------------------------------------------------------------
   wpautop 注意（Issue-009 Production incident / Issue-010 O-30）
     `.chair-hero__inner` / `.chair-hero__models` / `.chair-about__grid` /
     `.chair-feature-grid` / `.chair-cover__grid` / `.chair-model__inner` /
     `.chair-expert` / `.chair-spec` / `.chair-about__meta` /
     `.chair-hero__facts` / `.chair-purchase__actions` は Grid / Flex コンテナ。
     **直接の子の位置に HTML コメントを置かない**こと。
     加えて **行頭空白 ＋ 閉じ `</div>`** は unmatched `</p>` を生む
     （Issue-010 O-30 の原因）。投入用 Artifact は
     tools/build-production-content.py で行頭空白を除去してある。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-local Token
   -------------------------------------------------------------------------- */
.page-chair {
  /* 商品画像の下地。
     本ページの Approved Asset は **透過PNG 2点**（ccw / ccg）のみで、
     products-list のような「白背景JPEGとの混在」が無い。
     そのため下地は TOP と同じ figure ground を使い、
     商品シルエットを浮かせる。 */
  --c-figure-ground: var(--c-bg-figure);

  /* モデル見出し（S06 / S07 の H2）専用サイズ。
     セクション見出し（--fs-h2）と同格だが、モデル名は欧文主体で
     字面が小さく見えるため、わずかに大きい --fs-h2-lg を割り当てる。 */
  --fs-model-name: var(--fs-h2-lg);

  /* 仕様 dl のラベル列幅。日本語ラベル最長「日本総代理店・販売元」基準。 */
  --w-spec-label: 9.5em;

  /* Hero のモデル画像 media box の内側余白。
     S06 / S07（clamp(16px,2vw,32px)）より小さくする。
     Hero は 1カラムあたりの実効幅が狭く（320px viewport で 134px）、
     余白を同じにすると商品が識別できるサイズを下回るため。 */
  --pad-hero-media: clamp(6px, 1.6vw, 20px);
}

/* --------------------------------------------------------------------------
   Section Rhythm（Page-specific）
   company.css / products-list.css と同一の役割。Global へ昇格させない。
   理由: `class="section"` は未改修の商品4ページで多数使用されており、
         `.section` を素の Global セレクタにすると Regression になる。
   -------------------------------------------------------------------------- */
.page-chair .section { padding: var(--sp-sec) var(--sp-gutter); }
.page-chair .section--ground { background: var(--c-bg-sub); }
.page-chair .section-rule {
  max-width: var(--w-page); margin-inline: auto;
  height: 1px; background: var(--c-line);
}

/* 各セクションは「見出し → 説明文 → 本体」の順。
   rebuild.css の .sec-title は margin-bottom: var(--sp-lg) だが、
   本ページは直後に説明文が入るため詰める。 */
.page-chair .sec-title { margin-bottom: clamp(12px, 1.2vw, 18px); }

/* ==========================================================================
   S01 — Page Hero
   大型 Hero 画像を使わない。Typography と余白で
   「Curble Chair とは何か / 2モデルがある」を最初に理解させる。
   ========================================================================== */
.chair-hero {
  padding: clamp(40px, 5.2vw, 80px) var(--sp-gutter) clamp(36px, 4.4vw, 68px);
}

/* Desktop は 2カラム（左＝テキスト／右＝2モデル画像）。
   Mobile は DOM 順どおり テキスト → 2モデル画像 の縦積み。
   テキスト側をやや広くし、Hero の主役が Definition であることを保つ。 */
.chair-hero__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 3.2vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .chair-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.chair-hero__body { min-width: 0; }

/* --------------------------------------------------------------------------
   Hero の 2モデル画像
   役割: 「Curble Chair には Wider と Grand の2モデルがある」ことの視覚化。
         S06 / S07 の「個別モデル詳細」とは役割が異なるため、同一 Asset を
         別の見せ方（等価・並置・小さめ）で再利用する。
   -------------------------------------------------------------------------- */
.chair-hero__models {
  /* **常に2カラム**を維持する。縦積みにすると「2モデルが並んで存在する」という
     このブロック唯一の役割が失われるため、狭幅でも横並びを崩さない。 */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  min-width: 0;
}

/* Wider と Grand に優劣を付けない。
   ① 同一の grid track（1fr / 1fr）② 同一の aspect-ratio ③ 同一の下地
   ④ 同一の padding ⑤ 同一の caption 体裁。順序以外の差を作らない。 */
.chair-hero__model { min-width: 0; }
/* 媒体は <p> に単独で入れ、ラベルは兄弟の <p> で表現する。
   （本ページの Expert 写真 `.chair-expert__photo` と同じ、実証済みの形。）
   <figcaption> は WordPress 本体準拠の wpautop では安全に使えることを
   Phase 3 で確認済みだが、HR-011-05 APPROVED 済みの DOM を変更しないため
   本 Issue では採用しない。詳細 → docs/draft/curble-chair-validation-report-v1.md §2.2 */
.chair-hero__model-media { margin: 0; }
.chair-hero__model-media img {
  display: block;
  width: 100%; aspect-ratio: 1 / 1;
  padding: var(--pad-hero-media);
  background: var(--c-figure-ground);
  object-fit: contain;   /* 画像アスペクトが 1.00 と 1.13 で異なるため crop しない */
}
.chair-hero__model-name {
  margin: 10px 0 0;
  font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: .08em; text-align: center;
  color: var(--c-text-2);
}

.chair-hero__title {
  margin: 0;
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-h1); line-height: 1.28; letter-spacing: .06em;
}
.chair-hero__lead {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: var(--w-measure);
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--c-text-2);
}

/* Hero 補助情報。Badge ではなく「事実の並記」として扱う。
   数値を強調表示しない（E1 Fact であって訴求コピーではないため）。 */
.chair-hero__facts {
  display: flex; flex-wrap: wrap;
  gap: 8px clamp(14px, 1.6vw, 22px);
  margin: clamp(18px, 2vw, 26px) 0 0; padding: 0;
  list-style: none;
}
.chair-hero__facts li {
  position: relative;
  font-size: var(--fs-body-s); letter-spacing: .03em;
  color: var(--c-text-3);
}
/* 区切りは擬似要素。<br> や中黒の直書きに依存しない。 */
.chair-hero__facts li + li::before {
  content: ""; position: absolute;
  left: calc(clamp(14px, 1.6vw, 22px) / -2);
  top: 50%; width: 1px; height: 1em;
  transform: translateY(-50%);
  background: var(--c-line-strong);
}
.chair-hero__note {
  margin: 10px 0 0;
  font-size: var(--fs-meta); line-height: 1.7;
  color: var(--c-text-faint);
}

/* ==========================================================================
   S02 — Curble Chair とは
   Problem → Solution ではなく Product → Understanding。
   ========================================================================== */
/* --------------------------------------------------------------------------
   S02 のレイアウト
   DOM 順は **本文 → Lifestyle 画像 → Basic Information**（= Mobile の表示順）。
   Desktop では grid の明示配置で「左＝本文＋Basic Information／右＝画像」にする。
   DOM を並べ替えないため、読み上げ順と Mobile 表示順が常に一致する。
   -------------------------------------------------------------------------- */
.chair-about__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 2.6vw, 40px);
  margin-top: var(--sp-lg);
}
@media (min-width: 900px) {
  .chair-about__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(32px, 3.4vw, 56px);
    row-gap: clamp(20px, 2vw, 30px);
    align-items: start;
  }
  .chair-about__text   { grid-column: 1; grid-row: 1; }
  .chair-about__meta   { grid-column: 1; grid-row: 2; }
  .chair-about__figure { grid-column: 2; grid-row: 1 / span 2; }
}
.chair-about__text { min-width: 0; }

.chair-about__body {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.chair-about__body:last-child { margin-bottom: 0; }

/* Lifestyle 画像。用途は「椅子の上に置いて使う製品である」ことの視覚的説明。
   元画像は 1080×1350（4/5）。aspect-ratio を実寸と一致させ crop を 0 にする。 */
.chair-about__figure { margin: 0; min-width: 0; }
.chair-about__figure img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;     /* 実寸と同比のため実質 crop なし */
  background: var(--c-figure-ground);
}

/* Brand / Category / Maker / 総代理店 の関係を dl で明示する。
   Fact であり訴求ではないため、カード化・装飾はしない。 */
.chair-about__meta {
  margin: 0; padding: clamp(18px, 2vw, 26px) 0 0;
  border-top: 1px solid var(--c-line);
  max-width: 640px; min-width: 0;
}
.chair-about__row {
  display: grid;
  grid-template-columns: var(--w-spec-label) 1fr;
  gap: 4px clamp(12px, 1.4vw, 20px);
  padding: 10px 0;
}
.chair-about__row + .chair-about__row { border-top: 1px solid var(--c-line); }
.chair-about__row dt {
  margin: 0;
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: .04em;
  color: var(--c-text-muted);
}
.chair-about__row dd {
  margin: 0;
  font-size: var(--fs-body-s); line-height: 1.7;
  color: var(--c-text);
}

/* ==========================================================================
   S03 — Features（3項目）
   ========================================================================== */
.chair-feature-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 2.6vw, 40px);
  margin-top: var(--sp-lg);
}
@media (min-width: 768px) {
  .chair-feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.chair-feature {
  padding-top: clamp(14px, 1.5vw, 20px);
  border-top: 2px solid var(--c-line-strong);
}
.chair-feature__num {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow); letter-spacing: .12em;
  color: var(--c-text-faint);
}
.chair-feature__title {
  margin: 0 0 10px;
  font-size: var(--fs-h3-group); font-weight: 600; line-height: 1.5;
  letter-spacing: .03em;
  color: var(--c-text-strong);
}
.chair-feature__body {
  margin: 0;
  font-size: var(--fs-body-s); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* ==========================================================================
   S04 — Expert Comment
   コメント本文は blockquote。Disclaimer は必ずコメント直下に置く。
   医療推薦に見える装飾（認証バッジ・チェックマーク等）を使わない。
   ========================================================================== */
.chair-expert {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 28px);
  margin-top: var(--sp-lg);
  max-width: 820px;
}
@media (min-width: 768px) {
  .chair-expert { grid-template-columns: 104px 1fr; align-items: start; }
}
.chair-expert__photo { margin: 0; }
.chair-expert__photo img {
  display: block;
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-figure-ground);
}
@media (min-width: 768px) {
  .chair-expert__photo img { width: 104px; height: 104px; }
}
.chair-expert__name {
  margin: 0;
  font-size: var(--fs-h3-group); font-weight: 600; letter-spacing: .04em;
  color: var(--c-text-strong);
}
.chair-expert__role {
  margin: 4px 0 0;
  font-size: var(--fs-meta); letter-spacing: .04em;
  color: var(--c-text-muted);
}
.chair-expert__comment {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  padding: 0 0 0 clamp(14px, 1.5vw, 20px);
  border-left: 2px solid var(--c-line-strong);
}
.chair-expert__comment p {
  margin: 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.chair-expert__note {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: var(--fs-meta); line-height: 1.8;
  color: var(--c-text-faint);
}

/* ==========================================================================
   S05 — Model Comparison
   価格を持たない。比較軸は SSOT にある6項目のみ。
   ========================================================================== */
.chair-compare__lead {
  margin: 0 0 var(--sp-lg);
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* 320px でも横スクロールを **表の内側だけ** に閉じ込める。
   ページ body が横スクロールしないための必須ラッパ。 */
.chair-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chair-compare__scroll:focus-visible {
  outline: 3px solid var(--c-focus); outline-offset: 2px;
}
.chair-compare {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
  background: var(--c-bg-card);
}
.chair-compare th,
.chair-compare td {
  padding: clamp(11px, 1.2vw, 16px) clamp(12px, 1.3vw, 18px);
  text-align: left; vertical-align: top;
  line-height: 1.7;
  border-bottom: 1px solid var(--c-line);
}
.chair-compare thead th {
  font-weight: 600; letter-spacing: .04em;
  color: var(--c-text-strong);
  border-bottom: 2px solid var(--c-line-strong);
  white-space: nowrap;
}
.chair-compare tbody th {
  width: 8.5em;
  font-weight: 500;
  color: var(--c-text-muted);
  background: var(--c-bg-sub);
}
.page-chair .section--ground .chair-compare tbody th { background: var(--c-bg); }
.chair-compare tbody td { color: var(--c-text); }
.chair-compare tbody tr:last-child th,
.chair-compare tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   S06 / S07 — Model Section（Wider / Grand は同一レイアウト）
   ========================================================================== */
.chair-model__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .chair-model__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  /* Grand は左右を入れ替え、2セクションが同じ絵に見えないようにする。
     DOM 順（画像 → 本文）は両モデルで同一に保つ。 */
  .chair-model--grand .chair-model__media { order: 2; }
}
.chair-model__media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(16px, 2vw, 32px);
  background: var(--c-figure-ground);
}
.chair-model__media img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.chair-model__body { min-width: 0; }
.page-chair .chair-model__body .sec-title {
  font-size: var(--fs-model-name);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}
.chair-model__desc {
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* 仕様 dl。比較表と同じ値を持つが、こちらは「そのモデル単体の仕様」。 */
.chair-spec {
  margin: 0 0 var(--sp-lg);
  border-top: 1px solid var(--c-line);
}
.chair-spec__row {
  display: grid;
  grid-template-columns: var(--w-spec-label) 1fr;
  gap: 4px clamp(12px, 1.4vw, 20px);
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.chair-spec__row dt {
  margin: 0;
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: .04em;
  color: var(--c-text-muted);
}
.chair-spec__row dd {
  margin: 0;
  font-size: var(--fs-body-s); line-height: 1.7;
  color: var(--c-text);
}
.chair-model__action { margin: 0; }

/* ==========================================================================
   S08 — Accessory（専用カバー）
   Accessory は商品と同格に扱わない。画像・価格・仕様表を持たせない。
   ========================================================================== */
.chair-cover__lead {
  margin: 0 0 var(--sp-lg);
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.chair-cover__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 24px);
}
@media (min-width: 768px) {
  .chair-cover__grid { grid-template-columns: repeat(2, 1fr); }
}
.chair-cover__item {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--c-line);
  background: var(--c-bg-card);
}
.chair-cover__name {
  margin: 0 0 8px;
  font-size: var(--fs-h4); font-weight: 600; line-height: 1.5;
  letter-spacing: .03em;
  color: var(--c-text-strong);
}
.chair-cover__note {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-size: var(--fs-meta); line-height: 1.8;
  color: var(--c-text-muted);
}
.chair-cover__action { margin: 0; }

/* ==========================================================================
   S09 — Purchase Navigation / B2B CTA
   Issue-010 の Purchase / B2B と同じ責任分担・同じ Component を使う。
   ========================================================================== */
.chair-purchase__body,
.chair-b2b__body {
  margin: 0 0 var(--sp-md);
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.chair-purchase__actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 20px) clamp(20px, 2.4vw, 36px);
  margin: 0; padding: 0;
  list-style: none;
}
.chair-purchase__actions li { font-size: var(--fs-body-s); }
.chair-b2b__action { margin: 0; }

/* --------------------------------------------------------------------------
   320px セーフティ
   Global の tap target / contrast は触らない（O-12 / O-19 は DEFERRED）。
   本ページが自前で持つ要素の折返しのみ担保する。
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .page-chair .chair-about__row,
  .page-chair .chair-spec__row { grid-template-columns: 1fr; }
  .page-chair .chair-hero__facts { gap: 6px 0; flex-direction: column; }
  .page-chair .chair-hero__facts li + li::before { content: none; }
  /* 狭幅では余白を削って商品の実描画サイズを優先する（横並びは維持）。 */
  .page-chair .chair-hero__models { gap: 8px; }
  .page-chair .chair-hero__model-name { margin-top: 7px; }
  .page-chair .cta { padding: 0 20px; }
}

/* 長い欧文 URL / 型番でページが横に伸びないようにする。 */
.page-chair .chair-spec__row dd,
.page-chair .chair-about__row dd,
.page-chair .chair-compare td { overflow-wrap: anywhere; }