/* =======================
   Chart
   ======================= */
.chart-title {
  width: var(--detail-width);
  max-width: var(--detail-width);
  margin: 0 auto 0.5rem;
}
.chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.chart-area{
  position:relative;
  width: var(--detail-width);
  height:var(--chart-h-pc);
  margin: 0 auto;
}
.chart-area>canvas{
  display:block;
  width: var(--detail-width);
  height:115%;
}
@media (max-width:576px){
  .chart-area{width:var(--chart-w-sp);height:var(--chart-h-sp);}
}

/* =======================
   Recommend Cards
   ======================= */

/* 外枠＆画像枠 */
:root { --rec-border:#dee2e6; }
.recommend-block{
  width: var(--detail-width);
  max-width: var(--detail-width);
  margin: 0 auto;
}

.recommend-card{
  border:1px solid var(--rec-border);
  border-radius:12px;
  overflow:hidden;
  max-width: 300px;
}
@media (max-width:576px){
  .recommend-card{ max-width: 250px;}
}

.rec-media{ border-top:1px solid var(--rec-border); border-bottom:1px solid var(--rec-border); }

/* 画像は比率コンテナ内で統一 */
.recommend-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Swiper内で各カードを同じ高さに */
.recommend-carousel .swiper-wrapper{ align-items:stretch; }
.recommend-card, .recommend-card > a{ display:flex; flex-direction:column; height:100%; }

/* 本文：小型化＋余白最小化 */
.rec-body{
  padding:.45rem .6rem .25rem !important;
  display:flex;
  flex-direction:column;
  gap:0 !important;
}

/* 車名・価格 */
.rec-name{
  font-weight:700;
  font-size:1.05rem;
  line-height:1.25;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rec-price-txt{ font-weight:700; font-size:1rem; color:#111; margin:0; }
.rec-name + .rec-price-txt{ margin-top:.05rem !important; }

/* メタ（走行距離/年式/色）：縦並び（件数に応じた min-height は使わない） */
.rec-meta-list{
  list-style:none; margin:0 !important; padding:0 !important;
  display:flex; flex-direction:column; gap:.25rem; line-height:1.2;
}
/* 価格の直後にだけ 0.05rem の最小マージン */
.rec-price-txt + .rec-meta-list{ margin-top:.05rem !important; }

/* 旧 meta-n* 高さ調整は常に無効（将来つけ直すならここを外す） */
.rec-meta-list[class*="meta-n"]{ min-height:0 !important; }

/* 行 */
.rec-meta-list .meta{ display:flex; align-items:baseline; gap:.4rem; font-size:.9rem; margin:0 !important; }
.rec-meta-list .meta + .meta{ margin-top:.18rem !important; } /* 行間だけ最小確保 */
.rec-meta-list .label{ color:#666; font-size:.85rem; white-space:nowrap; }
.rec-meta-list .val{ color:#666; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 本文末尾の余白ゼロ（“空白行”を作らない） */
.rec-body > *:last-child{ margin-bottom:0 !important; }

/* =======================
   Carousel Nav（矢印）
   ======================= */

/* ここだけ触ればサイズ/色/位置を調整できます */
.recommend-carousel{
  position:relative;
  padding:0 30px;                 /* カードと矢印が重ならない余白。大きくするなら増やす */
  --nav-size:60px;                /* ボタン直径（大きくしたい時はここ） */
  --nav-icon:38px;                /* 矢印アイコンの大きさ */
  --nav-offset:4px;               /* 左右の位置（端からの距離） */
  --nav-top:44%;                  /* 縦位置（%で中央付近） */
  --nav-color:#2bb4ff;          /* 枠&アイコン（水色） */
  --nav-bg:#fff;                /* 背景（白） */
  --nav-border:4px;               /* 枠線太さ */
}

/* 実体 */
.recommend-carousel .swiper-button-prev,
.recommend-carousel .swiper-button-next{
  width:var(--nav-size);height:var(--nav-size);
  border-radius:50%;
  background:var(--nav-bg);
  border:var(--nav-border) solid var(--nav-color);
  color:var(--nav-color);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  top:var(--nav-top);transform:translateY(-50%);
}
.recommend-carousel .swiper-button-prev{left:var(--nav-offset);}
.recommend-carousel .swiper-button-next{right:var(--nav-offset);}
.recommend-carousel .swiper-button-prev::after,
.recommend-carousel .swiper-button-next::after{font-size:var(--nav-icon);}
.recommend-carousel .swiper-button-disabled{opacity:.35 !important;}

/* =======================
   タイトルの上下スペース
   ======================= */
/* margin ではなく padding/marginの組み合わせで確実に効かせる */
.car-title{
  margin: 0;                 /* H1のデフォルト余白をリセット */
  padding-top: 1.5rem !important;  /* パンくずとの間 */
  line-height: 1.3;
}
.car-title + .container{ margin-top: 1.5rem; } /* タイトル下の空き */

@media (max-width: 576px){
  .car-title{ padding-top: 1.5rem; }
  .car-title + .container{ margin-top: 1.5rem; }
}

/* 見た目は従来どおり */
.car-title a{ color: inherit; text-decoration: none; }

.badge-ended{
  color: red;
}

.btn-action { 
  margin-top: 1.7rem;              /* PC/共通 */
}

/* =======================
   テーブル
   ======================= */
#detail-table  {
  font-size: 1.1rem;
  table-layout: fixed;
}

#detail-table th,
#detail-table td {
  padding: 0.4rem 0.5rem;
  line-height: 1.2;
}

.detail-main-row {
  width:  var(--detail-width);
  max-width:  var(--detail-width);
  margin: 0 auto 1.5rem;    /* 中央寄せ＋下に余白 */
}

.car-image-link,
#detail-updated-at,
#recommend-title {
  max-width: 95%;
  margin: 0 auto;      /* 中央寄せ */
  display: block;
}

#detail-updated-at {
  text-align: right;
  font-size: 1.1rem;
}