/* ===========================
   サーバー一覧（3機種比較表）コンポーネント
   - Figma: ウォーターサーバー（オートマチック）node 1091:4460
   - 列: 項目ラベル + 常温 / ミニ / オートマチック
   - タブ #abdbe2（アクティブ #5ec2d0）・行の縞 #f6f8fa / #efefef・角丸4px
   - アクティブ列（.is-active）は include-components.js が data-active から付与
   - SP（≤767px）は .server-lineup__scroll で横スクロール
   =========================== */
.server-lineup {
  --sl-navy: #0e2f72;
  --sl-cyan: #5ec2d0;
  --sl-cyan-lt: #abdbe2;
  --sl-row-a: #f6f8fa;
  --sl-row-b: #efefef;
  padding: 80px 0;
  background: #ffffff;
}

/* 見出し左右の区切り線はグリッド（content-wrap 内寸）幅までいっぱいに伸ばす
   （DESIGN.md §4「成分セクションの区切り線」と同じ流儀。
     共有 deco-heading の 120px 固定を flex 伸縮で上書き） */
.server-lineup .deco-heading__line {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
}

.server-lineup__scroll {
  /* SPでの横スクロール用コンテナ（デスクトップでは素通し）。
     position:relative は必須 — 「非対応」の sr-only テキスト（position:absolute）を
     このコンテナに閉じ込める。無いと絶対配置がコンテナ外へ脱出し、
     SPで overflow-x:auto のクリップを迂回してページ全体が横スクロールしてしまう */
  position: relative;
  margin-top: 24px;
}

.server-lineup__table {
  /* border-spacing で列間20px/行間8pxのセル分離を作る（外周分は負マージンで相殺） */
  width: calc(100% + 40px);
  margin: 0 -20px;
  border-collapse: separate;
  border-spacing: 20px 8px;
  table-layout: fixed;
}

/* --- タブ行 --- */
.server-lineup__tabs-row th {
  padding: 0;
}
.server-lineup__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 4px;
  background: var(--sl-cyan-lt);
  color: #ffffff;
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a.server-lineup__tab[href]:hover { opacity: 0.8; }
.server-lineup__tab.is-active {
  background: var(--sl-cyan);
}

/* --- 本体写真行 --- */
.server-lineup__figure {
  height: 150px;
  background: var(--sl-row-a);
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
}
.server-lineup__figure.is-active {
  background: #f5feff;
}
.server-lineup__figure-img {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.server-lineup__figure-img--normal { height: 134px; }
.server-lineup__figure-img--mini { height: 105px; }
.server-lineup__figure-img--automatic { height: 109px; }

/* --- データ行 --- */
.server-lineup__table tbody th,
.server-lineup__table tbody td {
  border-radius: 4px;
  padding: 10px 12px;
  font-family: 'M PLUS 1', sans-serif;
  color: var(--sl-navy);
  vertical-align: middle;
}
.server-lineup__table tbody th {
  text-align: left;
  padding-left: 20px;
  font-weight: 600;
  font-size: 16px;
}
.server-lineup__table tbody td {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
/* 縞: 奇数行 #f6f8fa / 偶数行 #efefef */
.server-lineup__table tbody tr:nth-child(odd) th,
.server-lineup__table tbody tr:nth-child(odd) td { background: var(--sl-row-a); }
.server-lineup__table tbody tr:nth-child(even) th,
.server-lineup__table tbody tr:nth-child(even) td { background: var(--sl-row-b); }

.server-lineup__check {
  display: block;
  width: 33px;
  height: 33px;
  margin: 0 auto;
}
.server-lineup__sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

/* スクリーンリーダー専用テキスト（非対応セル） */
.server-lineup__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- レスポンシブ --- */
@media (max-width: 1100px) {
  .server-lineup__table tbody th { font-size: 15px; padding-left: 14px; }
}

@media (max-width: 767px) {
  .server-lineup { padding: 56px 0 64px; }
  .server-lineup__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 16px;
    padding-bottom: 8px;
  }
  .server-lineup__table {
    /* 列幅は下記の clamp 指定が実質の最小幅になる（fixed レイアウトでは
       指定列幅の合計が width を上回ると表がその分広がる → 横スクロール） */
    min-width: 0;
    width: calc(100% + 20px);
    margin: 0 -10px;
    border-spacing: 10px 6px;
  }
  /* 列幅（table-layout:fixed は先頭行=タブ行のセル幅で列幅が決まる）:
     - 項目名列はSPでは狭める（PCの均等1/4だと商品が見えにくいため）
     - 商品列は「項目名列の右に商品が常に1.5列以上見える」幅に調整
       （画面幅 - content-wrapの左右pad40 - 項目名列 - 間隙10 ≥ 商品列×1.5 + 間隙10） */
  .server-lineup__tabs-row .server-lineup__spacer { width: clamp(84px, 25vw, 110px); }
  .server-lineup__tabs-row th { width: clamp(132px, 38vw, 190px); }

  /* --- 横スクロール時、左端の項目名列は固定（商品3列だけがスクロール） --- */
  .server-lineup__table tbody th,
  .server-lineup__spacer {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  /* thead のスペーサー（タブ行・写真行の空セル）は透明のままだと
     スクロールしてきた商品セルが下に透けるため、ページ背景色で塗る */
  .server-lineup__spacer { background: #ffffff; }
  /* border-spacing の間隙（左右10px・上下6pxの行間）を、セル全周を覆う
     白いバックドロップで塗りつぶし、通過する商品セル・画像が
     どのスキマからも覗かないようにする。
     ※負z-indexの疑似要素は「セル自身のbackgroundより上・テキストより下」に
       描画されるため、白backdrop(::before)の上にセルと同寸の縞色(::after)を
       重ねて元の縞背景を再現する（::afterは同順なので::beforeより前面） */
  .server-lineup__table tbody th::before,
  .server-lineup__spacer::before {
    content: '';
    position: absolute;
    inset: -6px -10px;
    background: #ffffff;
    z-index: -1;
  }
  .server-lineup__table tbody th::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    z-index: -1;
  }
  .server-lineup__table tbody tr:nth-child(odd) th::after { background: var(--sl-row-a); }
  .server-lineup__table tbody tr:nth-child(even) th::after { background: var(--sl-row-b); }
  .server-lineup__tab { height: 30px; font-size: 15px; }
  .server-lineup__figure { height: 120px; }
  .server-lineup__figure-img--normal { height: 106px; }
  .server-lineup__figure-img--mini { height: 84px; }
  .server-lineup__figure-img--automatic { height: 88px; }
  .server-lineup__table tbody th { font-size: 13px; padding-left: 12px; }
  .server-lineup__table tbody td { font-size: 12px; }
  .server-lineup__sub { font-size: 12px; }
  .server-lineup__check { width: 28px; height: 28px; }
}

/* ごく狭い端末(≤359px)はさらに詰めて「商品1.5列見え」を維持 */
@media (max-width: 359px) {
  .server-lineup__tabs-row .server-lineup__spacer { width: 80px; }
  .server-lineup__tabs-row th { width: 118px; }
  .server-lineup__tab { font-size: 13px; }
}