:root{
    --bg:#f4f4f2; --panel:#fff; --line:#e4e2dd; --line2:#cfccc4;
    --gold:#a6842f; --gold-d:#8a6c22; --ink:#141414; --txt:#1a1a1a; --muted:#9a978f; --sub:#6c6a64;
    --sh:100px; /* サイト共通ヘッダーの高さ(style.css の header / .body padding-top と一致) */
    --tb:64px;  /* ツールの上部バー(.topbar)の高さ。sticky の基準に使う */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased;
  }
  /* 本体は高さを固定しない。ページ全体を通常スクロールにし、フッターは最下部(スクロールで到達)へ。
     操作部(topbar/タブ/ステージ/合計バー)は後段のオーバーライドで sticky にして画面内に留める。 */
  .cfg-app{ position:relative; }
  .num,.dsp{font-family:"Noto Sans JP","Noto Sans JP",sans-serif}

  /* ===== INTRO ===== */
  /* トップページ(/)のモデル一覧に寄せたレイアウト(正方形画像・名前は画像下・4列)。背景は白基調。 */
  .intro{position:fixed; inset:0; z-index:100; background:#fff; color:var(--txt); display:flex; flex-direction:column; overflow:hidden}
  .intro__bar{height:64px; background:#0c0c0c; display:flex; align-items:center; padding:0 32px; flex:0 0 auto}
  .intro__bar .brand{font-family:"Noto Sans JP",sans-serif; letter-spacing:.42em; font-weight:600; font-size:23px; color:#fff}
  .intro__bar .tag{margin-left:18px; color:#8c8c8c; font-size:11px; letter-spacing:.22em}
  .intro__body{flex:1; overflow-y:auto; padding:44px 50px 80px}
  .intro__body h1{font-family:"Noto Sans JP",sans-serif; font-size:34px; font-weight:600; letter-spacing:.05em; text-align:center; color:var(--ink); margin-bottom:4px}
  .intro__body .lead{color:var(--sub); font-size:12.5px; letter-spacing:.08em; text-align:center; margin-bottom:40px}
  .fam-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; max-width:1240px; margin:0 auto}
  /* 各車種を囲う枠(カード)。画像はカード上部にフィットして枠とつながる */
  .fam{border:1px solid var(--line2); background:#fff; overflow:hidden; display:flex; flex-direction:column}
  .fam__img{aspect-ratio:1/1; background:#efeeec; overflow:hidden}
  .fam__img img{width:100%; height:100%; object-fit:cover}
  .fnm{margin:0; padding:14px 16px 8px; font-family:"Noto Sans JP",sans-serif; font-size:21px; font-weight:500; letter-spacing:.06em; color:var(--ink)}
  .fam__subs{padding:0 16px 16px; display:flex; flex-wrap:wrap; gap:8px}
  .sub-btn{border:1px solid var(--line2); background:#fafafa; color:var(--txt); padding:8px 12px; font-size:12px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:8px; line-height:1.25}
  .sub-btn:hover{border-color:var(--gold); background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.07)}
  .sub-btn .c{font-family:"Noto Sans JP",sans-serif; color:var(--muted); font-size:12px}
  .sub-btn:hover .c{color:var(--gold)}

  /* ===== TOP BAR ===== */
  .topbar{display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:64px; background:#0c0c0c; flex:0 0 auto; z-index:20}
  .topbar .left{display:flex; align-items:baseline; gap:16px; min-width:0}
  .topbar .brand{font-family:"Noto Sans JP",sans-serif; letter-spacing:.42em; font-weight:600; font-size:22px; color:#fff; line-height:1; flex:0 0 auto}
  .topbar .model{font-size:12px; color:#b7b4ac; letter-spacing:.05em; display:flex; align-items:center; gap:11px; min-width:0; overflow:hidden}
  .topbar .model b{color:#fff; font-weight:700; font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .topbar .change{border:1px solid #7a7a7a; color:#fff; font-size:12px; padding:8px 18px; cursor:pointer; letter-spacing:.08em; transition:.15s; flex:0 0 auto; white-space:nowrap; border-radius:2px}
  .topbar .change:hover{border-color:var(--gold); color:#fff; background:var(--gold)}
  .topbar .right{display:flex; align-items:baseline; gap:11px; flex:0 0 auto}
  .topbar .right .lbl{font-size:10px; color:#b7b4ac; letter-spacing:.2em}
  .topbar .right .val{font-family:"Noto Sans JP",sans-serif; font-size:33px; font-weight:500; color:#fff; line-height:.9}
  .topbar .right .ex{font-size:11px; color:#8f8d86}

  .main{flex:1; display:flex; min-height:0; color:var(--txt); padding-bottom:0}
  .stage{flex:1; position:relative; display:flex; flex-direction:column; background:#fff; min-width:0}
  .stage .hero{flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 42%,#fff 0%,#e9e9e7 100%)}
  .stage .hero img{max-width:96%; max-height:82%; object-fit:contain; filter:drop-shadow(0 22px 30px rgba(0,0,0,.16))}
  .stage .badge{position:absolute; top:20px; left:24px; font-family:"Noto Sans JP",sans-serif; font-size:22px; font-weight:500; color:#141414; background:#fff; border:1px solid var(--line2); padding:3px 15px; letter-spacing:.05em}
  .stage .stagefoot{padding:14px 24px 16px; border-top:1px solid var(--line); background:#fafafa}
  .stage .stagefoot .caption{font-size:12px; color:var(--sub); letter-spacing:.03em}
  .stage .stagefoot .caption b{color:var(--gold); font-family:"Noto Sans JP",sans-serif; font-size:17px; margin:0 3px}
  .selchips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; max-height:70px; overflow:auto}
  .selchip{display:inline-flex; align-items:center; gap:9px; font-size:12px; background:#fff; border:1px solid var(--line2); padding:6px 8px 6px 11px}
  .selchip b{color:var(--gold); font-weight:500; font-family:"Noto Sans JP",sans-serif; font-size:14px}
  .selchip .x{cursor:pointer; color:var(--muted); font-size:15px; line-height:1}
  .selchip .x:hover{color:var(--gold-d)}

  .panel{width:460px; flex:0 0 460px; background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
  .tabs{display:flex; border-bottom:1px solid var(--line); flex:0 0 auto; overflow-x:auto}
  .tab{flex:1; padding:14px 6px; text-align:center; font-size:11px; letter-spacing:.06em; color:var(--sub); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:.15s; font-weight:500}
  .tab:hover{color:var(--ink)}
  .tab.active{color:var(--gold-d); border-bottom-color:var(--gold)}
  .tab .n{display:block; font-family:"Noto Sans JP",sans-serif; font-size:12px; color:var(--muted); margin-top:2px}
  .options{flex:1; overflow-y:auto; padding:16px}
  .opt{display:flex; gap:14px; align-items:center; padding:11px; border:1px solid var(--line); margin-bottom:11px; cursor:pointer; transition:.12s; background:#fff}
  .opt:hover{border-color:#b0ada4}
  .opt.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
  .opt.disabled{background:#f3f3f1; border-color:var(--line); cursor:not-allowed; opacity:.72}
  .opt.disabled:hover{border-color:var(--line)}
  .opt.disabled .nm,.opt.disabled .pr{color:#a5a5a5}
  .opt.disabled .thumb img{filter:grayscale(1); opacity:.55}
  .opt.disabled .add{border-color:var(--line); color:#bbb}
  .opt .thumb{width:98px; height:66px; flex:0 0 auto; overflow:hidden; background:#f2f2f0; display:flex; align-items:center; justify-content:center}
  .opt .thumb img{width:100%; height:100%; object-fit:cover}
  .opt .info{flex:1; min-width:0}
  .opt .info .nm{font-size:13px; line-height:1.4; margin-bottom:3px; font-weight:500}
  .opt .info .pn{font-size:10px; color:var(--muted); font-family:"Noto Sans JP",sans-serif; letter-spacing:.02em; margin-bottom:3px}
  .opt .info .note{font-size:10.5px; color:#c0392b; margin-bottom:4px; line-height:1.35}
  .opt .info .blocknote{font-size:10px; color:var(--gold-d); margin-bottom:4px}
  .opt .info .pr{font-family:"Noto Sans JP",sans-serif; font-size:19px; color:var(--ink); font-weight:600; line-height:1}
  .opt .info .pr small{color:var(--muted); font-weight:400; font-size:10px; margin-left:5px; font-family:"Noto Sans JP",sans-serif}
  .opt .info .pr.ask{color:var(--gold-d); font-size:15px}
  .opt .add{width:32px; height:32px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--muted); transition:.12s}
  .opt:hover .add{border-color:var(--gold); color:var(--gold)}
  .opt.on .add{background:var(--gold); border-color:var(--gold); color:#fff}

  .sumbar{flex:0 0 auto; border-top:2px solid #0c0c0c; padding:14px 20px 16px; background:#fff}
  .sumrow{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px}
  .sumrow .l{font-size:12px; color:var(--sub)}
  .sumrow .v{font-family:"Noto Sans JP",sans-serif; font-size:17px; font-weight:500}
  .sumrow.big{margin-top:7px; padding-top:9px; border-top:1px solid var(--line)}
  .sumrow.big .l{color:#000; font-weight:500}
  .sumrow.big .v{font-size:31px; font-weight:700; color:var(--gold-d)}
  .asknote{font-size:10.5px; color:#c0392b; margin-top:4px; display:none}
  .btns{display:flex; gap:10px; margin-top:13px}
  .btn{flex:1; padding:12px; text-align:center; font-size:13px; cursor:pointer; border:1px solid #0c0c0c; background:#fff; color:#0c0c0c; transition:.15s; letter-spacing:.05em; font-weight:500}
  .btn:hover{background:#f0f0ee}
  .btn.primary{background:var(--gold); color:#fff; border-color:var(--gold); font-weight:700}
  .btn.primary:hover{background:var(--gold-d)}

  /* ===== QUOTE OVERLAY ===== */
  /* 上パディングで固定サイトヘッダー(--sh)の下にモーダルを収める → ×が必ずヘッダーの下に見える */
  .qov{position:fixed; inset:0; z-index:200; background:rgba(12,12,12,.55); display:none; align-items:center; justify-content:center; padding:calc(var(--sh) + 16px) 24px 24px}
  .qov.show{display:flex}
  .qbox{background:#fff; width:100%; max-width:720px; max-height:calc(100vh - var(--sh) - 40px); display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.4)}
  .qhead{background:#0c0c0c; color:#fff; padding:16px 20px 16px 26px; display:flex; align-items:center; justify-content:space-between; flex:0 0 auto}
  .qhead>div{display:flex; align-items:center; gap:14px; min-width:0}
  /* ヘッダーと同じ TECHART ロゴ。画面=白ロゴ(logo.svg)/印刷=黒ロゴ(logo-black.svg)。global img{width:100%} を width:auto で打ち消す */
  .qhead .qlogo{height:15px; width:auto; flex:0 0 auto}
  .qhead .qlogo--dark{display:none}
  .qhead .ttl{font-size:12px; color:#b7b4ac; letter-spacing:.12em}
  .qhead .cls{cursor:pointer; color:#fff; font-size:30px; line-height:1; padding:0 6px; margin-left:12px; flex:0 0 auto}
  .qhead .cls:hover{color:var(--gold)}
  .qbody{overflow-y:auto; padding:22px 26px}
  .qmeta{font-size:12px; color:var(--sub); margin-bottom:14px; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px}
  .qmeta b{color:var(--ink); font-family:"Noto Sans JP",sans-serif; font-size:15px}
  table.qt{width:100%; border-collapse:collapse; font-size:12.5px}
  table.qt th{text-align:left; color:var(--sub); font-weight:500; font-size:11px; letter-spacing:.06em; border-bottom:1px solid var(--line2); padding:7px 6px}
  table.qt th.r,table.qt td.r{text-align:right; font-family:"Noto Sans JP",sans-serif}
  table.qt td{padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top}
  table.qt td .cat{font-size:9.5px; color:var(--muted); letter-spacing:.04em}
  table.qt td .pnn{font-size:9.5px; color:var(--muted); font-family:"Noto Sans JP",sans-serif}
  table.qt td.r .ask{color:var(--gold-d); font-size:11px}
  .qtot{margin-top:16px; border-top:2px solid #0c0c0c; padding-top:12px}
  .qtot .row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px}
  .qtot .row .l{font-size:13px; color:var(--sub)}
  .qtot .row .v{font-family:"Noto Sans JP",sans-serif; font-size:19px}
  .qtot .row.grand .l{color:#000; font-weight:700}
  .qtot .row.grand .v{font-size:30px; font-weight:700; color:var(--gold-d)}
  .qfoot{padding:14px 26px 20px; border-top:1px solid var(--line); font-size:10.5px; color:var(--muted); line-height:1.6}
  .qbtns{display:flex; gap:10px; padding:0 26px 22px}

  @media(max-width:900px){
    :root{ --tb:56px; }
    .main{flex-direction:column; align-items:stretch}
    .stage{min-height:40vh; flex:none}
    .stage .hero img{max-height:30vh}
    .panel{width:100%; flex:none; border-left:none; border-top:1px solid var(--line)}
    .topbar{padding:0 14px; height:56px}
    .topbar .right .val{font-size:26px}
    .intro__body{padding:30px 18px 60px}
    .fam-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:30px 16px}
  }
  /* 印刷/PDF: 用紙余白を控えめに(既定は大きめ) */
  @page{ margin:8mm 10mm; }
  @media print{
    /* 見積り(qov)以外は display:none で完全に除去 → 下側に余分な空白/空ページが出ない
       (visibility:hidden だと場所が残り、ページ全体の高さぶん空白になっていた) */
    .body > *{ display:none !important; }
    .body{ padding:0 !important; }
    .qov.show{ display:block !important; position:static; background:#fff; padding:0; }
    .qbox{ max-width:none; max-height:none; box-shadow:none; margin:0 }
    /* 印刷は白背景。ロゴは黒版に差し替え(白背景に白ロゴで見えなくなるのを回避) */
    .qhead{ background:#fff; color:#000 }
    .qhead .ttl{ color:#555 }
    .qhead .qlogo--light{ display:none }
    .qhead .qlogo--dark{ display:block }
    .qbtns,.qhead .cls{ display:none }
  }
  .options::-webkit-scrollbar,.selchips::-webkit-scrollbar,.intro__body::-webkit-scrollbar,.qbody::-webkit-scrollbar{width:8px;height:8px}
  .options::-webkit-scrollbar-thumb,.selchips::-webkit-scrollbar-thumb,.intro__body::-webkit-scrollbar-thumb,.qbody::-webkit-scrollbar-thumb{background:var(--line2)}

  /* ============================================================
     サイト共通ヘッダー/フッター(style.css)との統合オーバーライド
     ※ config.css は style.css の後に読み込まれる前提。競合を無害化する。
     方針: ページ全体を通常スクロールにし、フッターは最下部(下端までスクロールで表示)。
           操作部は sticky で画面内に留め、パーツ一覧をページごとスクロールさせる。
     ============================================================ */
  /* sticky を効かせるため .body の overflow:hidden(style.css)を解除し、ドキュメントをスクロール対象に */
  .body{ overflow:visible; }
  /* イントロ(モデル選択)も通常フローにして、下端までスクロールでフッターに到達できるようにする。
     最低でもヘッダー下の画面いっぱいの高さを確保し、モデル一覧が多ければ伸びてページがスクロールする。 */
  .intro{ position:static; overflow:visible; min-height:calc(100vh - var(--sh)); }
  .intro__body{ overflow:visible; }
  /* モデル未選択(イントロ表示中)は空のツール(上部バー/メイン)を隠す。
     判定は #intro の display 切替(config.js が none=選択済みにする)に基づく。
     DOM 順は intro → topbar → main なので後続兄弟(~)で判定でき、
     JS 側の変更やキャッシュのズレに依存しない(古い config.js でも動く)。 */
  #intro:not([style*="none"]) ~ .topbar,
  #intro:not([style*="none"]) ~ .main{ display:none; }
  /* サイトヘッダーがロゴを表示するため、独自バー/ブランド表記は隠して重複を避ける */
  .intro__bar{ display:none; }
  .topbar .brand{ display:none; }
  /* style.css の img{width:100%} がヒーロー画像に効くのを打ち消す */
  .stage .hero img{ width:auto; }
  /* style.css の .btn{max-width:360px;margin:0 auto} 漏れを打ち消す(ツール内ボタン) */
  .sumbar .btn, .qbtns .btn{ max-width:none; margin:0; }

  /* --- 操作部を画面内に固定表示(ページはその背後をスクロール) --- */
  .topbar{ position:sticky; top:var(--sh); z-index:30; }
  .main{ align-items:flex-start; }               /* ステージを引き伸ばさない(PC 横並び時) */
  .tabs{ position:sticky; top:calc(var(--sh) + var(--tb)); z-index:6; background:var(--panel); }
  .options{ flex:0 0 auto; overflow:visible; }    /* パネルは内部スクロールせずページに流す */
  .sumbar{ position:sticky; bottom:0; z-index:6; }
  /* PC: 車両画像(ステージ)は画面内に留め、右のパーツ一覧だけスクロールさせる */
  @media(min-width:901px){
    .stage{ position:sticky; top:calc(var(--sh) + var(--tb)); height:calc(100vh - var(--sh) - var(--tb)); align-self:flex-start; }
  }
  /* スマホ: サイトヘッダーは 50px(style.css の header / .body padding に一致) */
  @media(max-width:767px){
    :root{ --sh:50px; }
    /* パーツ選択画面 上部バー: 合計は下部の合計バーに常時表示されるので上部バーでは非表示にし、
       モデル名とモデル変更ボタンだけにする(車種名の表示幅も広がる) */
    .topbar .right{ display:none; }
    .topbar .model{ gap:10px; }
    .topbar .model b{ font-size:15px; }
    .topbar .change{ font-size:11px; padding:6px 12px; }
    /* 見積りヘッダー: ロゴ/タイトル/×を小さくして枠内に収める(印刷はA4のため影響なし) */
    .qhead{ padding:14px; }
    .qhead>div{ gap:10px; }
    .qhead .qlogo{ height:12px; }
    .qhead .ttl{ font-size:11px; }
    .qhead .cls{ font-size:24px; }
  }