/* assets/css/price-tabs-test.css
   テスト用（.gp-fee-wrapper.gp-test 配下だけに適用）
   目的：
   - PC/SP：3列一覧（スクロールなし）
   - カード内：プラン名（帯）→ 説明（帯外・小）→ 料金 → 内容（縦積み）
   - 横ライン揃え：説明を固定高（2行相当）にして、料金/内容の開始位置を揃える
*/

/* ========== 0) デバッグ（不要なら消す） ========== */
/* .gp-fee-wrapper.gp-test { outline: 6px solid red !important; } */

/* ========== 1) 一覧：3列グリッド（スクロール殺す） ========== */
/* 対象：LOCATION / MIX / 1DAY の .gp-cards--paged を 3列にする */
.gp-fee-wrapper.gp-test .gp-cards--paged{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding: 0;
  margin: 0;
  scroll-snap-type: none;
}

/* ページング用ラッパーを潰して、中のカードを直でグリッドに載せる */
.gp-fee-wrapper.gp-test .gp-cards--paged .gp-page{
  display: contents;
}

/* STUDIO の 3列（.gp-cards--grid）も統一 */
.gp-fee-wrapper.gp-test .gp-cards--grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* プレースホルダーは不要 */
.gp-fee-wrapper.gp-test .gp-card--placeholder{
  display: none !important;
}

/* ========== 2) カード：詰める・並びを固定 ========== */
.gp-fee-wrapper.gp-test .gp-card{
  margin: 0;
  display: flex;
  flex-direction: column;
  /* 高さ揃えの土台（行揃えの見た目が安定） */
  height: 100%;
}

/* ========== 3) 帯（プラン名） ========== */
/* gp-bar は「プラン名だけ」に戻す（右ノートは使わない方針） */
.gp-fee-wrapper.gp-test .gp-bar{
  display: block;
  margin: 0 0 6px;          /* 下余白を小さく */
  padding: 6px 8px;         /* 帯の内側余白を少し詰める */
}

/* プラン名：はみ出し防止（小さく、折り返さない） */
.gp-fee-wrapper.gp-test .gp-barlabel{
  font-size: 0.60rem;       /* ←ここが帯の文字サイズ */
  line-height: 1.15;
  white-space: nowrap;
  max-width: 100%;

  /* 二重枠の解消（内側ラベルをフラット化） */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;

  /* 少し詰める（収まり改善） */
  letter-spacing: -0.02em;
}

/* 既存の右説明（gp-rightnote）はテストでは消す（gp-descに統一） */
.gp-fee-wrapper.gp-test .gp-rightnote{
  display: none !important;
}

/* ========== 4) 説明：注意書きと同じくらい小さく + 高さ固定でライン揃え ========== */
/* 重要：あなたのHTMLは STUDIO simple だけ gp-desc あり。全カードに gp-desc を入れるのが理想。
   ただし入ってないカードもあるので、次の「フォールバック」も用意する。
*/

/* 4-1) gp-desc がある場合（推奨） */
.gp-fee-wrapper.gp-test .gp-desc{
  margin: 0 0 6px;          /* 料金に寄せる */
  font-size: 11px;          /* 下の注意書き相当 */
  line-height: 1.35;
  color: var(--muted);
  font-weight: 600;

  /* 2行固定（ライン揃えの核） */
  min-height: calc(11px * 1.35 * 2); /* 2行分 */
}

/* 4-2) gp-desc が無いカード用のフォールバック：
   gp-bar の次に来る要素が “説明” なら、それを同じ扱いにする
   （STUDIO standard/premium などで、説明がgp-bar直下にいるケースを吸収）
*/
.gp-fee-wrapper.gp-test .gp-card > .gp-bar + *:not(.gp-prices):not(.gp-labels):not(.gp-premium-link){
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 600;
  min-height: calc(11px * 1.35 * 2);
}

/* ========== 5) 料金：改行させない + 余白詰め ========== */
.gp-fee-wrapper.gp-test .gp-prices{
  order: 1;
  margin: 0 0 8px;          /* 上余白ゼロ、下だけ */
}

/* 「26,000円」の改行防止（円だけ落ちるのを止める） */
.gp-fee-wrapper.gp-test .gp-prices .yen{
  white-space: nowrap;
}

/* 「平日：」「土日祝：」が強すぎるなら少し小さく */
.gp-fee-wrapper.gp-test .gp-prices .cap{
  font-size: 11px;
}

/* ========== 6) 内容：縦積み + 小さく + 余白詰め ========== */
.gp-fee-wrapper.gp-test .gp-labels{
  order: 2;

  /* 横3列をやめて縦積み */
  grid-template-columns: 1fr;
  gap: 6px;                 /* ボックス間を詰める */
  margin: 0;                /* 余白を消す */
}

/* 内容ボックスの文字と余白を小さく */
.gp-fee-wrapper.gp-test .lbl{
  min-height: auto;
  padding: 7px 9px;         /* ここが“デカい”原因なので詰める */
  font-size: 11px;          /* ←内容の文字サイズ */
  line-height: 1.35;
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
}

/* ========== 7) PREMIUM 詳細リンク：最後に寄せる ========== */
.gp-fee-wrapper.gp-test .gp-premium-link{
  order: 99;
  margin-top: 6px;
}

/* ========== 8) SPでの保険（3列前提のまま微調整） ========== */
@media (max-width: 480px){
  .gp-fee-wrapper.gp-test .gp-cards--grid,
  .gp-fee-wrapper.gp-test .gp-cards--paged{
    gap: 8px;
  }

  .gp-fee-wrapper.gp-test .gp-barlabel{
    font-size: 0.58rem;
  }

  .gp-fee-wrapper.gp-test .gp-desc,
  .gp-fee-wrapper.gp-test .gp-card > .gp-bar + *:not(.gp-prices):not(.gp-labels):not(.gp-premium-link){
    font-size: 11px;
    min-height: calc(11px * 1.35 * 2);
  }

  .gp-fee-wrapper.gp-test .lbl{
    font-size: 11px;
    padding: 6px 8px;
  }
}/* ===== 強制：3列に戻す（カードが横に伸びるのを止める） ===== */
.gp-fee-wrapper.gp-test .gp-cards--paged{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  overflow:visible !important;
}

.gp-fee-wrapper.gp-test .gp-cards--paged .gp-page{
  display:contents !important;
}

/* これが効かないと「横長カード」になる */
.gp-fee-wrapper.gp-test .gp-card{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
}

/* ===== 内容(3つ)を縦積みに固定（横並びを潰す） ===== */
.gp-fee-wrapper.gp-test .gp-labels{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
}

.gp-fee-wrapper.gp-test .lbl{
  padding:6px 8px !important;
  font-size:11px !important;
  line-height:1.25 !important;
  text-align:left !important;
}

/* ===== 説明を半分くらいに ===== */
.gp-fee-wrapper.gp-test .gp-rightnote{
  font-size:10px !important;
  line-height:1.25 !important;
}

/* ===== 注意書きを小さく ===== */
.gp-fee-wrapper.gp-test .gp-note,
.gp-fee-wrapper.gp-test .gp-note li{
  font-size:11px !important;
  line-height:1.35 !important;
}

/* ===== テスト用：gp-test 配下だけ ===== */

/* ===== 強制：3列に戻す（カードが横に伸びるのを止める） ===== */
.gp-fee-wrapper.gp-test .gp-cards--paged{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  overflow:visible !important;
}

/* ページングラッパーを潰す */
.gp-fee-wrapper.gp-test .gp-cards--paged .gp-page{
  display:contents !important;
}

/* これが効かないと「縦に1枚ずつ巨大カード」になる */
.gp-fee-wrapper.gp-test .gp-cards--paged .gp-card{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;

  /* これが付いてると1列固定になることがある */
  grid-column:auto !important;
}

/* ===== 内容(3つ)を縦積みに固定（横並びを潰す） ===== */
.gp-fee-wrapper.gp-test .gp-labels{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
}

.gp-fee-wrapper.gp-test .lbl{
  padding:6px 8px !important;
  font-size:11px !important;
  line-height:1.25 !important;
  text-align:left !important;
}

/* ===== 説明を小さく ===== */
.gp-fee-wrapper.gp-test .gp-rightnote{
  font-size:10px !important;
  line-height:1.25 !important;
}

/* ===== 注意書きを小さく ===== */
.gp-fee-wrapper.gp-test .gp-note,
.gp-fee-wrapper.gp-test .gp-note li{
  font-size:11px !important;
  line-height:1.35 !important;
}