/* products-fit-v1 — ホーム #products の STUDIO / HUB 帯を PC で 1 画面（100vh − ヘッダー）に収める。
   products-home-v12.css・products-r10-hubfix.css の後、head の最後で読む。セレクタは #products 内に限定。2026-09-29 */

/* 1. STUDIO：ホームではテンプレート（.pc-tpl-frame）を出さない（スマホ含む） */
#products .pc-tpl-frame {
  display: none !important;
}

/* 2. 帯の余白・見出し→図（8u 固定。1440 超でも列倍率を掛けない） */
@media (min-width: 601px) {
  #products .pv-band {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  #products.pv11 .pv-band--studio > .ts {
    margin-top: 32px;
  }

  #products.pv11 .dc {
    margin-top: 32px;
  }

  #products.pv11 .pv-band--hub {
    padding-bottom: 64px;
  }
}

@media (min-width: 1024px) {
  /* 列倍率 u と、帯が 1 画面に収まる倍率の min（1440 超の横長・低い画面向け） */
  #products {
    --pv-fit-header: 72px;
    --pv-fit-view: calc(100vh - var(--pv-fit-header));
    --pv-col-u: calc(var(--site-max, 1168px) / 1168px);
    /* 基準帯高（u=1・テンプレなし・上記余白・下記 HUB 寸法詰め後の見込み。主指揮が実測で更新） */
    --pv-band0-studio: 674px;
    --pv-band0-hub: 878px;
    --pv-studio-u: min(var(--pv-col-u), calc(var(--pv-fit-view) / var(--pv-band0-studio)));
    --pv-hub-u: min(var(--pv-col-u), calc(var(--pv-fit-view) / var(--pv-band0-hub)));
  }

  /* STUDIO：製品名とタイムスタンプ図の u 連動寸法を vh 上限付きに差し替え */
  #products.pv11 {
    --pv-fs-1: clamp(40px, calc(72px * var(--pv-studio-u)), 104px);
  }

  #products .ts {
    --ts-wave: calc(80px * var(--pv-studio-u));
    --ts-mid: calc(40px * var(--pv-studio-u));
    --ts-row: calc(40px * var(--pv-studio-u));
    /* 元の --cl-px は「1u あたりの長さ」（px の値）。単位のない倍率をそのまま入れると calc が無効になり、クリップの枠が 0 になって札が重なった（主指揮 2026-09-29） */
    --cl-px: calc(var(--pv-studio-u) * 1px);
    --cl-lane: calc(var(--cl-px) * 84 - 24px);
    --cl-fw: calc(var(--cl-px) * 72);
    --cl-fh: calc(var(--cl-px) * 128);
    --cl-off: calc(var(--cl-px) * 16);
    --cl-top: calc(var(--cl-px) * 8);
    --cl-fsh: calc(var(--cl-px) * 48);
  }

  /* 3. HUB 図：ボード行・窓余白を 8u で詰める（hubfix の升重ねは触らない） */
  #products.pv11 {
    --dc-gap: 24px;
  }

  #products .dc-title {
    margin-bottom: 8px;
  }

  #products .dc-a {
    padding-top: 8px;
  }

  #products .dc-b {
    padding-top: 8px;
  }

  #products .dc-win {
    padding-bottom: 8px;
  }

  #products .pv-tk {
    height: 56px;
    padding: 8px 10px 8px 12px;
  }

  #products .dc-hub-head {
    margin-bottom: 8px;
  }

  #products .dc-hub-body {
    height: 168px;
  }

  #products .dc > .pc-note {
    margin-top: 4px;
  }

  /* 4. HUB：1441+ の dc-row zoom を min(列 u, vh u) に（products-home-v12 の zoom を上書き） */
  #products.pv11 .dc-row {
    zoom: var(--pv-hub-u);
  }
}

/* 主指揮の追記（2026-09-29）：背の低い PC の画面（1024×768・1280×800 など）では HUB の帯が 14〜26px はみ出したので、
   帯の上下の余白を 64 → 40（5×8u）、見出し → 図を 32 → 24（3×8u）に詰める */
@media (min-width: 1024px) and (max-height: 820px) {
  #products .pv-band { padding-top: 40px; padding-bottom: 40px; }
  #products.pv11 .pv-band--hub { padding-bottom: 40px; }
  #products.pv11 .pv-band--studio > .ts,
  #products.pv11 .dc { margin-top: 24px; }
}