/* ============================================================
   CREDO AUTO — 車両詳細ページ（vehicle detail）
   carsensor準拠の情報密度 × CREDO AUTOのブランド（白基調・明朝見出し）
   3つのレイアウト案を [data-layout="a|b|c"] で切替
     a = カーセンサー定番（左ギャラリー / 右 価格・CTA固定パネル）
     b = フルワイド写真 → 価格バー横長 → スペック下段（縦積み）
     c = CREDOエディトリアル（余白広め・価格を大きな明朝数字で）
   ============================================================ */

:root {
  --white:#FFFFFF; --offwhite:#FAF9F6; --greige:#F0EEE9; --greige-deep:#E7E3DA;
  --ink:#2B2B2B; --ink-soft:#54524E;
  --green:#1F3A36; --green-deep:#16302C;
  --blue:#1E6FD0; --blue-deep:#175CB0;
  --line:#06C755; --line-deep:#05A847;
  --slate:#8A9A9A; --slate-soft:#B7C0BF;
  --gold:#A8894F;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --gutter:clamp(1.1rem,4vw,3.5rem);
  --maxw:1200px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --radius:14px;
  --hair:rgba(43,43,43,0.10);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--offwhite); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.8; letter-spacing:0.02em;
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:var(--blue); text-decoration:none; }
a:hover { color:var(--blue-deep); }
h1,h2,h3 { font-family:var(--mincho); font-weight:600; line-height:1.35; margin:0; letter-spacing:0.03em; }

/* ---------- header ---------- */
.vh-header {
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between;
  padding:0.7rem var(--gutter);
}
.vh-header .logo-img { height:38px; width:auto; }
.vh-header .h-actions { display:flex; align-items:center; gap:0.6rem; }
.h-cta {
  display:inline-flex; align-items:center; gap:0.5rem; white-space:nowrap;
  background:var(--line); color:#fff; font-weight:700; font-size:0.9rem;
  padding:0.6rem 1.15rem; border-radius:100px; letter-spacing:0.03em;
  box-shadow:0 10px 22px -12px rgba(6,199,85,0.6); transition:transform .3s var(--ease), background .3s;
}
.h-cta:hover { transform:translateY(-2px); background:var(--line-deep); color:#fff; }
.h-cta.tel { background:transparent; color:var(--green); border:1.5px solid var(--green); box-shadow:none; }
.h-cta.tel:hover { background:var(--green); color:#fff; }
.h-cta .ico { width:1.05em; height:1.05em; }
@media (max-width:640px){ .h-cta .label{display:none;} .h-cta{padding:0.6rem;} .h-cta .ico{width:1.25em;height:1.25em;} }

/* ---------- shell / breadcrumb ---------- */
.vh-wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.breadcrumb {
  font-size:0.8rem; color:var(--slate); letter-spacing:0.04em;
  padding:1rem 0 0.2rem; display:flex; gap:0.5rem; flex-wrap:wrap;
}
.breadcrumb a { color:var(--slate); }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb .sep { color:var(--slate-soft); }

/* ---------- title block ---------- */
.vh-title { padding:1rem 0 1.4rem; }
.vh-title .maker { font-size:0.9rem; color:var(--slate); letter-spacing:0.14em; font-weight:700; }
.vh-title h1 { font-size:clamp(1.7rem,4vw,2.7rem); margin:0.3rem 0 0.5rem; }
.vh-title .grade { color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.2rem); font-family:var(--gothic); }
.vh-badges { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }
.badge {
  font-size:0.78rem; font-weight:700; letter-spacing:0.04em; padding:0.32rem 0.7rem;
  border-radius:6px; background:var(--greige); color:var(--ink-soft);
}
.badge.trust { background:rgba(31,58,54,0.08); color:var(--green); }
.badge.repair-none { background:rgba(6,199,85,0.12); color:var(--line-deep); }
.badge.hot { background:rgba(30,111,208,0.1); color:var(--blue); }

/* ============================================================
   MAIN GRID  (案A: 2カラム / 案B・C は縦積み)
   ============================================================ */
.vh-main { display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,3vw,2.6rem); padding-bottom:3rem; }
[data-layout="a"] .vh-main { grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); align-items:start; }
/* モバイル：2カラムを解除して縦積み（写真の潰れ・はみ出し防止） */
@media (max-width:860px){
  [data-layout="a"] .vh-main { grid-template-columns:1fr; }
  [data-layout="a"] .price-panel { position:static; }
}

/* ---------- gallery ---------- */
.gallery { min-width:0; }
.gallery .stage {
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:#e9e6df; box-shadow:0 20px 44px -28px rgba(43,43,43,0.35);
}
.gallery .stage image-slot { position:absolute; inset:0; width:100%; height:100%; }
.gallery .stage .status-flag {
  position:absolute; top:0; left:0; z-index:3; font-weight:700; font-size:0.82rem; letter-spacing:0.08em;
  padding:0.5rem 1.1rem; color:#fff; background:var(--green); border-bottom-right-radius:12px;
}
.gallery .stage .status-flag.sold { background:#9a3b3b; }
.gallery .stage .status-flag.talk { background:var(--blue); }
.thumbs { display:grid; grid-template-columns:repeat(6,1fr); gap:0.55rem; margin-top:0.7rem; }
.thumbs .thumb {
  aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:#e9e6df; cursor:pointer;
  border:2px solid transparent; transition:border-color .2s var(--ease), transform .2s var(--ease);
  position:relative;
}
.thumbs .thumb image-slot { position:absolute; inset:0; width:100%; height:100%; }
.thumbs .thumb:hover { transform:translateY(-2px); }
.thumbs .thumb.active { border-color:var(--blue); }
@media (max-width:520px){ .thumbs { grid-template-columns:repeat(4,1fr); } }

/* full-wide gallery for layout b */
[data-layout="b"] .gallery .stage { aspect-ratio:16/9; }
[data-layout="b"] .thumbs { grid-template-columns:repeat(8,1fr); }

/* ---------- price panel ---------- */
.price-panel {
  background:#fff; border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(1.3rem,2vw,1.8rem); box-shadow:0 18px 40px -30px rgba(43,43,43,0.4);
}
[data-layout="a"] .price-panel { position:sticky; top:84px; }
.price-panel .total-label { font-size:0.82rem; color:var(--slate); font-weight:700; letter-spacing:0.06em; }
.price-panel .total {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0.15rem 0.4rem; margin:0.15rem 0 0.1rem;
  font-family:var(--mincho); color:var(--green); font-weight:700;
}
.price-panel .total .num { font-size:clamp(2.8rem,7vw,3.8rem); line-height:1; letter-spacing:0.01em; }
.price-panel .total .unit { font-size:1.2rem; font-weight:700; white-space:nowrap; flex:none; }
.price-panel .total .tax { font-size:0.78rem; color:var(--slate); font-family:var(--gothic); flex-basis:100%; }
.price-panel .body-price {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:0.92rem; color:var(--ink-soft); padding:0.8rem 0; margin-top:0.6rem;
  border-top:1px dashed var(--hair); border-bottom:1px dashed var(--hair);
}
.price-panel .body-price b { font-family:var(--mincho); font-size:1.25rem; color:var(--ink); }
.price-cta { display:flex; flex-direction:column; gap:0.7rem; margin-top:1.2rem; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  font-family:var(--gothic); font-weight:700; font-size:1.05rem; letter-spacing:0.03em;
  padding:1rem 1.4rem; border-radius:100px; cursor:pointer; border:2px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
}
.btn .ico { width:1.2em; height:1.2em; flex:none; }
.btn:hover { transform:translateY(-2px); }
.btn--line { background:var(--line); color:#fff; box-shadow:0 12px 28px -12px rgba(6,199,85,0.55); }
.btn--line:hover { background:var(--line-deep); color:#fff; }
.btn--tel { background:#fff; color:var(--green); border-color:var(--green); }
.btn--tel:hover { background:var(--green); color:#fff; }
.price-note { font-size:0.78rem; color:var(--slate); margin-top:0.9rem; line-height:1.7; }
.price-note b { color:var(--line-deep); }

/* ============================================================
   SPEC TABLE
   ============================================================ */
.section-head { display:flex; align-items:center; gap:0.8rem; margin:0 0 1.2rem; }
.section-head h2 { font-size:clamp(1.3rem,2.4vw,1.7rem); }
.section-head .en { font-size:0.72rem; color:var(--slate); letter-spacing:0.24em; font-weight:700; font-family:var(--gothic); }
.vh-section { padding:2.4rem 0; border-top:1px solid var(--hair); }

.spec-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--hair);
  border-radius:var(--radius); overflow:hidden; background:#fff;
}
.spec-cell { padding:1rem 1.1rem; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.spec-cell .k { font-size:0.76rem; color:var(--slate); font-weight:700; letter-spacing:0.04em; margin-bottom:0.28rem; display:flex; align-items:center; gap:0.35rem; }
.spec-cell .v { font-size:1.12rem; color:var(--ink); font-weight:500; line-height:1.4; }
.spec-cell .v .sub { font-size:0.8rem; color:var(--slate); font-weight:400; }
.spec-cell .v.hl { color:var(--line-deep); font-weight:700; }
@media (max-width:820px){ .spec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .spec-grid{ grid-template-columns:1fr 1fr; } .spec-cell{padding:0.85rem 0.9rem;} }

/* ---------- payment simulator ---------- */
.paysim { background:#fff; border:1px solid var(--hair); border-radius:var(--radius); padding:clamp(1.4rem,2.5vw,2rem); }
.paysim .sim-lead { color:var(--ink-soft); font-size:0.92rem; margin-bottom:1.4rem; }
.sim-controls { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
@media (max-width:640px){ .sim-controls{ grid-template-columns:1fr; } }
.sim-field label { font-size:0.82rem; font-weight:700; color:var(--ink-soft); display:flex; justify-content:space-between; margin-bottom:0.5rem; }
.sim-field label b { color:var(--green); font-family:var(--mincho); font-size:1.05rem; }
.sim-field input[type=range] { width:100%; accent-color:var(--blue); }
.sim-field select {
  width:100%; padding:0.6rem 0.8rem; border:1px solid var(--hair); border-radius:8px;
  font-family:var(--gothic); font-size:0.95rem; background:#fff; color:var(--ink);
}
.term-btns { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
.term-btn {
  display:flex; flex-direction:column; align-items:center; gap:0.1rem;
  padding:0.6rem 0.4rem; border:1.5px solid var(--hair); border-radius:10px; background:#fff;
  font-family:var(--gothic); font-weight:700; font-size:1rem; color:var(--ink-soft); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.term-btn .cnt { font-size:0.72rem; font-weight:500; opacity:0.75; }
.term-btn:hover { border-color:var(--slate-soft); transform:translateY(-1px); }
.term-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(30,111,208,0.6); }
.sim-result {
  margin-top:1.6rem; padding:1.3rem 1.5rem; background:var(--green); color:#fff; border-radius:12px;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0.5rem 1.5rem;
}
.sim-result .sim-total { display:flex; flex-direction:column; gap:0.15rem; padding-right:1.5rem; border-right:1px solid rgba(255,255,255,0.25); }
.sim-result .sim-monthly-wrap { display:flex; flex-direction:column; gap:0.15rem; }
.sim-result .amt-sm { font-family:var(--mincho); font-weight:700; font-size:1.5rem; line-height:1; }
.sim-result .amt-sm .u { font-size:0.85rem; }
.sim-result .lbl { font-size:0.9rem; font-weight:700; letter-spacing:0.04em; opacity:0.9; }
.sim-result .amt { font-family:var(--mincho); font-weight:700; }
.sim-result .amt .n { font-size:clamp(2.1rem,5vw,2.9rem); line-height:1; }
.sim-result .amt .u { font-size:1rem; }
@media (max-width:560px){
  .sim-result { grid-template-columns:1fr; gap:0.9rem; }
  .sim-result .sim-total { padding-right:0; border-right:none; border-bottom:1px solid rgba(255,255,255,0.25); padding-bottom:0.9rem; flex-direction:row; align-items:baseline; justify-content:space-between; }
}
.sim-disc { font-size:0.92rem; color:var(--ink-soft); margin-top:1.1rem; line-height:1.9; background:var(--greige); border-radius:10px; padding:0.9rem 1.1rem; word-break:auto-phrase; line-break:strict; text-wrap:pretty; }
.sim-disc b { color:var(--green); }

/* ---------- equipment ---------- */
.equip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.55rem; }
.equip-item {
  display:flex; align-items:center; gap:0.6rem; padding:0.7rem 0.9rem; background:#fff;
  border:1px solid var(--hair); border-radius:10px; font-size:0.92rem; font-weight:500;
}
.equip-item .chk { color:var(--line-deep); width:1.05em; height:1.05em; flex:none; }
.equip-item.off { color:var(--slate-soft); background:var(--offwhite); }
.equip-item.off .chk { color:var(--slate-soft); }

/* ---------- dealer comment ---------- */
.comment-box {
  background:#fff; border:1px solid var(--hair); border-left:4px solid var(--gold);
  border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem);
  font-size:1.02rem; line-height:2.05; color:var(--ink-soft);
}
.comment-box .sign { margin-top:1.3rem; font-family:var(--mincho); color:var(--ink); font-size:0.95rem; }
[data-layout="c"] .comment-box { border-left:none; border:1px solid var(--hair); text-align:left; }
[data-layout="c"] .comment-box::before {
  content:"“"; font-family:var(--mincho); font-size:3.5rem; color:var(--gold); line-height:0.6; display:block; margin-bottom:0.5rem;
}

/* ---------- store / final CTA ---------- */
.store-cta {
  margin:1rem 0 3.5rem; background:var(--green); color:#fff; border-radius:var(--radius);
  padding:clamp(1.8rem,4vw,3rem); text-align:center;
}
.store-cta h2 { color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:0.7rem; }
.store-cta p { color:rgba(255,255,255,0.85); font-size:0.98rem; margin:0 0 1.6rem; }
.store-cta .cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.store-cta .btn--tel { background:transparent; color:#fff; border-color:rgba(255,255,255,0.7); }
.store-cta .btn--tel:hover { background:#fff; color:var(--green); }

.vh-footer { background:#fff; border-top:1px solid var(--hair); padding:2rem var(--gutter); text-align:center; color:var(--slate); font-size:0.82rem; }

/* ============================================================
   案C  editorial overrides
   ============================================================ */
[data-layout="c"] body { background:var(--white); }
[data-layout="c"] .vh-title { padding:2.2rem 0 1.8rem; text-align:center; }
[data-layout="c"] .vh-title .maker { letter-spacing:0.3em; }
[data-layout="c"] .vh-badges { justify-content:center; }
[data-layout="c"] .price-panel { text-align:center; border:none; box-shadow:none; background:transparent; padding-top:0.5rem; }
[data-layout="c"] .price-panel .total .tax { flex-basis:auto; }
[data-layout="c"] .price-panel .total .num { font-size:clamp(3.4rem,10vw,5.5rem); }
[data-layout="c"] .price-panel .body-price { justify-content:center; gap:1rem; }
[data-layout="c"] .price-cta { flex-direction:row; justify-content:center; max-width:620px; margin-inline:auto; }
[data-layout="c"] .price-cta .btn { flex:1; }
[data-layout="c"] .section-head { justify-content:center; text-align:center; }

/* ---- 写真準備中プレースホルダ ---- */
.photo-prep {
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem;
  background:repeating-linear-gradient(135deg, #ece9e2, #ece9e2 14px, #e6e2d9 14px, #e6e2d9 28px);
  color:var(--slate); font-family:var(--gothic); font-weight:700; font-size:0.95rem; letter-spacing:0.08em;
}
.photo-prep .pp-ico { font-size:1.8rem; opacity:0.55; }

/* reveal-on-scroll */
.rev { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rev.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rev{opacity:1;transform:none;} }

/* ============================================================
   NOT FOUND / 在庫なし
   ============================================================ */
.notfound { text-align:center; padding:clamp(3rem,10vh,7rem) 0 clamp(3rem,8vh,5rem); max-width:760px; margin-inline:auto; }
.notfound .nf-code { font-family:var(--mincho); font-weight:700; font-size:clamp(4.5rem,16vw,8rem); line-height:1; color:var(--greige-deep); letter-spacing:0.05em; }
.notfound .nf-title { font-size:clamp(1.5rem,4vw,2.2rem); margin:0.4rem 0 1rem; color:var(--ink); }
.notfound .nf-msg { color:var(--ink-soft); font-size:1rem; line-height:2; margin:0 auto 2rem; max-width:34em; word-break:auto-phrase; }
.notfound .nf-msg b { color:var(--green); font-weight:700; }
.notfound .nf-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(2.5rem,6vw,4rem); }
.notfound .nf-suggest { border-top:1px solid var(--hair); padding-top:clamp(2rem,4vw,3rem); }
.notfound .nf-suggest-h { font-family:var(--gothic); font-weight:700; font-size:0.8rem; letter-spacing:0.2em; color:var(--slate); margin-bottom:1.4rem; }
.notfound .nf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:560px){ .notfound .nf-cards{ grid-template-columns:1fr; } }
.nf-card { display:flex; flex-direction:column; gap:0.2rem; background:#fff; border:1px solid var(--hair); border-radius:12px; padding:1.1rem 1.2rem; text-align:left; transition:transform .3s var(--ease), box-shadow .3s var(--ease); color:var(--ink); }
.nf-card:hover { transform:translateY(-3px); box-shadow:0 18px 36px -26px rgba(43,43,43,0.4); color:var(--ink); }
.nf-card .nf-card-maker { font-size:0.72rem; color:var(--slate); font-weight:700; letter-spacing:0.1em; }
.nf-card .nf-card-name { font-family:var(--mincho); font-weight:700; font-size:1.25rem; }
.nf-card .nf-card-price { margin-top:0.4rem; font-size:0.85rem; color:var(--ink-soft); }
.nf-card .nf-card-price b { font-family:var(--mincho); font-size:1.4rem; color:var(--green); }

/* list empty state */
.list-empty { text-align:center; padding:clamp(3rem,8vh,5rem) 0; color:var(--ink-soft); }
.list-empty .le-title { font-family:var(--mincho); font-size:1.4rem; color:var(--ink); margin-bottom:0.7rem; }
.list-empty .le-msg { font-size:0.95rem; line-height:1.9; margin-bottom:1.6rem; }
.list-empty .le-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }