/* ============================================================
   DATALE Cars
   ------------------------------------------------------------
   意匠は「型式板」— エンジンルームに打刻された型式プレート。
   AZSH32 / ND5RC といった型式コードは、このプロダクトが
   データソースを繋ぐための結合キーそのものなので、
   打刻された金属板の見え方をそのまま画面の語彙にしている。

   ・地は青みを帯びた鋼色。純黒は使わない
   ・区切りは彫り込んだような細い罫線。装飾的な影は置かない
   ・アクセントは経年した真鍮ひとつだけ。多用しない
   ・コードと数値は等幅・桁揃え。読むためでなく照合するための字
   ============================================================ */

:root {
  /* --- 面 --- */
  --ground:   #0F1216;
  --panel:    #161A20;
  --well:     #1D222A;
  --raised:   #242A33;

  /* --- 罫 --- */
  --line:     #262C35;
  --line-hi:  #38404C;

  /* --- 字 --- */
  --ink:      #E2E5EA;
  --ink-2:    #98A0AB;
  --ink-3:    #666E7A;
  --ink-4:    #464D57;

  /* --- 真鍮（唯一のアクセント） --- */
  --brass:      #C29B5B;
  --brass-lo:   #8E7038;
  --brass-wash: rgba(194,155,91,0.12);
  --brass-edge: rgba(194,155,91,0.36);

  /* --- 状態を表す色（アクセントとは別系統） --- */
  --avail:    #7F9C77;   /* 在庫あり */
  --caution:  #B5814C;   /* 注意・トレードオフ */
  --absent:   #8E5E5E;   /* 該当なし */

  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
          "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 暗色を既定として固定する。
   打刻された金属という意匠は暗い地でしか成立しないので、
   OS の設定には追従させない。明色は data-theme="light" で明示的に選んだときだけ。 */
:root[data-theme="light"] {
  --ground: #F6F5F2;  --panel: #FFFFFF;  --well: #F1EFEA;  --raised: #E9E6E0;
  --line: #DFDBD3;    --line-hi: #C4BEB3;
  --ink: #1B1E23;     --ink-2: #5A6069;  --ink-3: #838A94;  --ink-4: #A8AEB6;
  --brass: #8A6828;   --brass-lo: #6B5020;
  --brass-wash: rgba(138,104,40,0.10);
  --brass-edge: rgba(138,104,40,0.30);
  --avail: #4E6E48;   --caution: #8A5A26;  --absent: #7A4A4A;
}
:root[data-theme="dark"] {
  --ground: #0F1216;  --panel: #161A20;  --well: #1D222A;  --raised: #242A33;
  --line: #262C35;    --line-hi: #38404C;
  --ink: #E2E5EA;     --ink-2: #98A0AB;  --ink-3: #666E7A;  --ink-4: #464D57;
  --brass: #C29B5B;   --brass-lo: #8E7038;
  --brass-wash: rgba(194,155,91,0.12);
  --brass-edge: rgba(194,155,91,0.36);
  --avail: #7F9C77;   --caution: #B5814C;  --absent: #8E5E5E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
body { min-height: 100vh; }

/* 数字は必ず桁が揃う。照合するための表示なので */
.m-listing__price, .m-proposal__stat-num, .m-stat-card__value,
.m-listing__specs, .m-cand__badge, .m-dir__count, .m-hstat,
.m-routing, .m-results-meta { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.m-container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* 小さい見出しラベル。絵文字の代わりにこれで階層を示す */
.m-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ======================== ヘッダ ======================== */
.m-header {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
}
.m-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
}
.m-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }

/* 打刻されたプレート。塗りではなく、縁と地の差だけで立たせる */
.m-brand__mark {
  width: 34px; height: 22px;
  border: 1px solid var(--brass-edge);
  background: var(--brass-wash);
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--brass);
}
.m-brand__title {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink);
}
.m-brand__sub {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  margin-top: 2px; letter-spacing: 0.14em; text-transform: uppercase;
}

.m-nav { display: flex; gap: 2px; align-items: center; }
.m-nav__link {
  color: var(--ink-2); text-decoration: none; font-size: 12.5px;
  padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.m-nav__link:hover { color: var(--ink); border-color: var(--line); }
.m-nav__link--active {
  color: var(--brass);
  border-color: var(--brass-edge);
  background: var(--brass-wash);
}

/* ======================== Hero ======================== */
/* 中央揃えにしない。索引の見出しとして左に置く */
.m-hero {
  padding: 64px 0 44px;
  border-bottom: 1px solid var(--line);
}
.m-hero__title {
  font-size: 38px; font-weight: 600;
  letter-spacing: 0.005em; line-height: 1.25;
  text-wrap: balance; margin-bottom: 14px;
  max-width: 20ch;
}
.m-hero__title-grad { color: var(--brass); }
.m-hero__sub {
  color: var(--ink-2); font-size: 14px; max-width: 62ch; margin-bottom: 32px;
}

/* ---- 検索欄。照会窓のように、罫線で囲って地を沈める ---- */
.m-search {
  display: flex; align-items: flex-start;
  background: var(--well);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  padding: 4px 4px 4px 0;
  max-width: 780px;
  transition: border-color 0.15s;
}
.m-search:focus-within { border-color: var(--brass); }
.m-search__icon {
  padding: 15px 12px 0 16px;
  color: var(--ink-3);
  display: flex; align-items: flex-start;
  flex-shrink: 0;
}
.m-search__icon svg { display: block; }
.m-search input,
.m-search textarea {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--ink); font-size: 15px; padding: 13px 4px;
  font-family: var(--sans); resize: none; line-height: 1.65;
  min-height: 50px; max-height: 260px; overflow-y: auto;
}
.m-search input::placeholder,
.m-search textarea::placeholder { color: var(--ink-4); }

.m-search__btn {
  align-self: flex-start; margin-top: 4px;
  background: var(--brass);
  color: var(--ground);
  border: none; border-radius: var(--r-sm);
  padding: 11px 22px;
  font-weight: 600; font-size: 13px;
  font-family: var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s;
}
.m-search__btn:hover { background: var(--brass-lo); color: var(--ink); }
.m-search__btn:disabled { background: var(--raised); color: var(--ink-3); cursor: not-allowed; }

/* ---- 検索モード。ラジオを罫線の区画として見せる ---- */
/* overflow:hidden は使わない。ツールチップが下にはみ出すため、
   角の丸めは両端の区画へ個別にかける。 */
.m-mode-toggle {
  display: flex; gap: 0; margin: 20px 0 28px;
  flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  width: fit-content;
}
.m-mode-toggle__option {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 16px;
  background: transparent;
  border-right: 1px solid var(--line);
  cursor: pointer; font-size: 12.5px; color: var(--ink-2);
  transition: background 0.12s, color 0.12s;
}
.m-mode-toggle__option:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.m-mode-toggle__option:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-right: none; }
.m-mode-toggle__option:hover { color: var(--ink); background: var(--panel); }
.m-mode-toggle__option input { display: none; }
.m-mode-toggle__option:has(input:checked) {
  background: var(--brass-wash); color: var(--brass);
}
.m-mode-toggle__option small {
  color: var(--ink-3); font-size: 10.5px; font-family: var(--mono);
}
.m-mode-toggle__option:has(input:checked) small { color: var(--brass); }

/* ---- 各モードの違いを出すツールチップ ----
   仕様書の注釈のように、等幅で桁を揃えたまま出す。 */
.m-mode-toggle__option[data-tip] { position: relative; }
.m-mode-toggle__option[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  white-space: pre;
  font-family: var(--mono); font-size: 11px; line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  pointer-events: none;
}
.m-mode-toggle__option[data-tip]:hover::after,
.m-mode-toggle__option[data-tip]:focus-within::after {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 右側の区画は左に伸ばして画面外に出さない */
.m-mode-toggle__option[data-tip]:nth-last-child(-n+2)::after { left: auto; right: 0; }

@media (max-width: 720px) {
  .m-mode-toggle__option[data-tip]::after {
    left: 0; right: 0; white-space: pre-wrap; font-size: 10.5px;
  }
}

/* ---- 検索例。行頭にラベルを置いた索引の体裁 ---- */
.m-chips__hint {
  font-size: 11px; color: var(--ink-3); margin: 0 0 14px;
  font-family: var(--mono); letter-spacing: 0.04em;
}
.m-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; margin-bottom: 8px;
}
.m-chips__label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  min-width: 96px; flex-shrink: 0;
}
.m-chips__label small {
  color: var(--ink-4); margin-left: 5px; letter-spacing: 0.04em;
  text-transform: none;
}
.m-chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 5px 11px;
  border-radius: var(--r-sm);
  font-size: 12px; cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.12s, color 0.12s;
}
.m-chip:hover { border-color: var(--line-hi); color: var(--ink); }
/* 種別による差はごく薄い縦罫だけで示す。色で塗り分けない */
.m-chip--stock { border-left: 2px solid var(--avail); }
.m-chip--ai    { border-left: 2px solid var(--brass); }

.m-mcp-tag {
  margin-top: 26px; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.03em;
}
.m-mcp-tag code {
  color: var(--brass); border-bottom: 1px solid var(--brass-edge);
  padding-bottom: 1px;
}

/* ======================== 検索結果 ======================== */
.m-results-section { padding: 36px 0; }
.m-results-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; gap: 24px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.m-results-title { font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.m-results-meta {
  font-size: 12px; color: var(--ink-3); margin-top: 5px; font-family: var(--mono);
}
.m-results-interpretation {
  padding: 11px 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 11.5px; color: var(--ink-2); font-family: var(--mono);
  max-width: 440px; line-height: 1.7;
}
.m-results-interpretation strong { color: var(--brass); font-weight: 600; }

.m-tag {
  display: inline-block; padding: 1px 7px; margin: 0 3px 3px 0;
  border: 1px solid var(--brass-edge); color: var(--brass);
  border-radius: var(--r-xs); font-size: 10.5px; font-family: var(--mono);
}
.m-tag--literal { border-color: var(--line); color: var(--ink-2); }

.m-results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
/* 提案ブロックは中に在庫の行を抱えるので、段組みせず1列で通す */
.m-results-grid:has(.m-proposal) { grid-template-columns: 1fr; gap: 0; }

/* ---- 車種の提案（1車種 = 1区画） ---- */
.m-proposal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px; margin-bottom: 16px;
}
.m-proposal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.m-proposal__maker {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.m-proposal__model {
  font-size: 20px; font-weight: 600; letter-spacing: 0.01em; margin-top: 3px;
}
.m-proposal__stat { text-align: right; flex-shrink: 0; }
.m-proposal__stat-num {
  font-size: 22px; font-weight: 600; color: var(--avail);
  line-height: 1; font-family: var(--mono);
}
.m-proposal__stat-num span { font-size: 12px; margin-left: 2px; color: var(--ink-3); }
.m-proposal__stat-label {
  font-size: 9.5px; color: var(--ink-3); font-family: var(--mono);
  margin-top: 5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.m-proposal__reasons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }

/* ---- 在庫1台 = 1行。仕様書の行として組む ---- */
.m-listings { display: flex; flex-direction: column; }
.m-listing {
  display: flex; align-items: stretch; gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.m-listing:last-child { border-bottom: none; }
.m-listing:hover { background: var(--well); }
.m-listing__img {
  width: 104px; height: 78px; flex-shrink: 0;
  object-fit: cover; border-radius: var(--r-xs);
  background: var(--well); border: 1px solid var(--line);
}
.m-listing__img--none {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--ink-4);
}
.m-listing__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.m-listing__grade {
  font-size: 13px; font-weight: 500; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.m-listing__specs {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--ink-2); font-family: var(--mono);
}
.m-listing__shop { font-size: 11px; color: var(--ink-3); }
.m-listing__review { color: var(--brass); font-family: var(--mono); }
.m-listing__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.m-listing__badges span {
  font-size: 9.5px; padding: 1px 6px; border-radius: var(--r-xs);
  border: 1px solid color-mix(in srgb, var(--avail) 40%, transparent);
  color: var(--avail); font-family: var(--mono); letter-spacing: 0.06em;
}
.m-listing__price {
  flex-shrink: 0; text-align: right; align-self: center;
  font-size: 19px; font-weight: 600; color: var(--ink);
  min-width: 96px; font-family: var(--mono);
}
.m-listing__unit { font-size: 11px; margin-left: 2px; font-weight: 400; color: var(--ink-3); }
.m-listing__price-label {
  font-size: 9px; color: var(--ink-3); font-family: var(--mono);
  font-weight: 400; margin-top: 3px; letter-spacing: 0.1em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .m-listing { flex-wrap: wrap; }
  .m-listing__img { width: 80px; height: 60px; }
  .m-listing__price { min-width: auto; font-size: 17px; }
}

/* ============ 相談モード: 判断軸と提案の枝 ============ */
.m-consult { display: flex; flex-direction: column; gap: 32px; }
.m-consult__summary {
  font-size: 14.5px; line-height: 1.8; color: var(--ink);
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-sm);
}
.m-consult__section { display: flex; flex-direction: column; gap: 12px; }
.m-consult__h {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.m-consult__h small {
  font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); font-weight: 400;
}

.m-hpattern { font-size: 13px; color: var(--ink-2); line-height: 1.75; }
.m-hstats { display: flex; flex-wrap: wrap; gap: 6px; }
.m-hstat {
  font-size: 11px; font-family: var(--mono);
  padding: 4px 10px; border-radius: var(--r-xs);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
}
.m-hstat b {
  color: var(--ink-3); margin-right: 7px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 9.5px;
}
.m-htraj {
  font-size: 12px; color: var(--ink-3); line-height: 1.75;
  padding: 11px 14px; background: var(--panel);
  border-left: 2px solid var(--line-hi); border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* ---- 判断軸。確度の別は左の縦罫だけで示す ---- */
.m-crits {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.m-crit {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
  border-left: 2px solid var(--line-hi);
}
.m-crit--must     { border-left-color: var(--brass); }
.m-crit--prefer   { border-left-color: var(--avail); }
.m-crit--emerging { border-left-color: var(--caution); }
.m-crit--indiff   { border-left-color: var(--ink-4); }
.m-crit__head {
  font-size: 12.5px; font-weight: 600; margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.m-crit__head span {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-3); font-weight: 400; letter-spacing: 0.08em;
}
.m-crit__list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.m-crit__axis { font-size: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.m-crit__value {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--brass); border-bottom: 1px solid var(--brass-edge);
  padding-bottom: 1px;
}
.m-crit__conf {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); margin-left: auto;
}
.m-crit__why { font-size: 11.5px; color: var(--ink-3); line-height: 1.65; margin-top: 4px; }

/* ---- 提案の方向（第1階層） ---- */
.m-dirs { display: flex; flex-direction: column; gap: 8px; }
.m-dirs-pending {
  display: flex; align-items: center; gap: 12px;
  padding: 20px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: 12.5px;
}
.m-dir {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden;
}
.m-dir[open] { border-color: var(--line-hi); }
.m-dir__head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.m-dir__head::-webkit-details-marker { display: none; }
.m-dir__head::after {
  content: ""; flex-shrink: 0;
  width: 7px; height: 7px;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.m-dir[open] .m-dir__head::after { transform: rotate(225deg) translate(-2px, -2px); }
.m-dir__head:hover { background: var(--well); }
/* 提案の方向は並列の選択肢であって順序ではないので、番号も絵文字も付けない */
.m-dir__emoji { display: none; }
.m-dir__titlewrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.m-dir__key {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.m-dir__title { font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; }
.m-dir__count {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  white-space: nowrap; letter-spacing: 0.04em;
}
.m-dir__body { padding: 0 16px 16px; }
.m-dir__meta {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.m-dir__meta p { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.m-dir__meta b {
  color: var(--ink-3); font-family: var(--mono); font-size: 9.5px;
  margin-right: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 400;
}
.m-dir__tradeoff b { color: var(--caution); }

/* ---- 候補車種（第2階層）。枝を縦罫で示す ---- */
.m-cands {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: 14px; border-left: 1px solid var(--line);
}
.m-cand {
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-xs);
}
.m-cand__head {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; cursor: pointer; list-style: none;
}
.m-cand__head::-webkit-details-marker { display: none; }
/* 在庫の有無は塗りつぶした点ではなく、短い縦棒で示す */
.m-cand__dot {
  width: 2px; height: 15px; flex-shrink: 0;
  background: var(--ink-4); border-radius: 1px;
}
.m-cand--ok      .m-cand__dot { background: var(--avail); }
.m-cand--partial .m-cand__dot { background: var(--caution); }
.m-cand--none    .m-cand__dot { background: var(--absent); }
.m-cand__name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.m-cand__name b { font-size: 13.5px; font-weight: 600; }
.m-cand__name small { font-size: 11px; color: var(--ink-3); }
.m-cand__badge {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); white-space: nowrap;
}
.m-cand--ok .m-cand__badge { color: var(--avail); }
.m-cand__body { padding: 0 12px 12px; }
.m-cand__reason { font-size: 12px; color: var(--ink-2); line-height: 1.7; margin-bottom: 10px; }
.m-cand__note { font-size: 11px; color: var(--caution); margin-bottom: 8px; }
.m-cand__empty { font-size: 11px; color: var(--ink-4); padding: 8px 0; }

/* ---- どの経路で処理したか ---- */
.m-routing {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: 10.5px; font-family: var(--mono); color: var(--ink-3);
  letter-spacing: 0.04em;
}
.m-routing__tier {
  padding: 2px 9px; border-radius: var(--r-xs); font-weight: 600;
  border: 1px solid currentColor;
}
.m-routing__tier--dict   { color: var(--avail); }
.m-routing__tier--haiku  { color: var(--brass); }
.m-routing__tier--sonnet { color: var(--caution); }

@media (max-width: 640px) {
  .m-crits { grid-template-columns: 1fr; }
  .m-cands { padding-left: 10px; }
  .m-dir__title { font-size: 13.5px; }
}

/* ---- 解釈結果のパネル ---- */
.m-llm-intent {
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-sm);
}
.m-llm-intent__head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.m-llm-intent__head .m-llm-badge {
  color: var(--brass); letter-spacing: 0.1em;
  border: 1px solid var(--brass-edge); border-radius: var(--r-xs);
  padding: 1px 7px;
}
.m-llm-intent__reasoning {
  font-size: 12.5px; color: var(--ink-2); margin-bottom: 11px; line-height: 1.7;
}
.m-llm-intent__fields { display: flex; flex-wrap: wrap; gap: 5px; }
.m-llm-field {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; background: var(--well);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: 10.5px; font-family: var(--mono);
}
.m-llm-field__label {
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9.5px;
}
.m-llm-field__value { color: var(--brass); font-weight: 600; }

/* 条件を外して探したときの断り書き。黙って緩めると嘘になるので必ず出す */
.m-relaxed {
  margin-top: 11px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--caution) 45%, transparent);
  border-radius: var(--r-xs);
  font-size: 11.5px; color: var(--ink-2); line-height: 1.6;
}
.m-relaxed b { color: var(--caution); font-weight: 600; }

/* ---- カタログ側の車種カード ---- */
.m-car {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px;
  cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 13px;
  transition: border-color 0.15s;
}
.m-car:hover { border-color: var(--line-hi); }
.m-car__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.m-car__maker {
  font-size: 10px; color: var(--ink-3); font-family: var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px;
}
.m-car__model { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.35; }
.m-car__score {
  flex-shrink: 0; color: var(--brass);
  border: 1px solid var(--brass-edge); border-radius: var(--r-xs);
  padding: 3px 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.m-car__grade { color: var(--ink-2); font-size: 12.5px; }
.m-car__specs {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  padding: 11px 12px;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-xs);
}
.m-spec {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--ink-2); font-family: var(--mono);
}
.m-spec__icon {
  font-size: 9px; color: var(--ink-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* 型式はこのプロダクトの結合キー。打刻されたコードとして扱う */
.m-spec--kata {
  font-family: var(--mono); color: var(--brass); font-weight: 600;
  border: 1px solid var(--brass-edge); border-radius: var(--r-xs);
  padding: 1px 7px; letter-spacing: 0.06em;
}
.m-car__colors { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.m-car__colors-label {
  font-size: 9.5px; color: var(--ink-3); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.12em; margin-right: 4px;
}
.m-color-dot {
  width: 14px; height: 14px; border-radius: var(--r-xs);
  border: 1px solid var(--line-hi); cursor: help;
}
.m-color-dot--more {
  width: auto; padding: 1px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-3); font-size: 9.5px; font-family: var(--mono);
}
.m-car__url {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 10px; background: var(--well);
  border: 1px solid var(--line); border-radius: var(--r-xs); font-size: 10.5px;
}
.m-car__url-label {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;
}
.m-car__url-link {
  color: var(--brass); text-decoration: none; font-family: var(--mono);
  font-size: 10px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; flex: 1;
}
.m-car__url-link:hover { text-decoration: underline; }
.m-car__reasons {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.m-reason { font-size: 10px; color: var(--ink-3); font-family: var(--mono); }
.m-car__source {
  position: absolute; top: 16px; right: 52px;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---- 結果なし ---- */
.m-empty { padding: 56px 20px; color: var(--ink-3); }
.m-empty__icon {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ink-4); text-transform: uppercase; margin-bottom: 14px;
}
.m-empty__title { font-size: 16px; color: var(--ink-2); margin-bottom: 8px; }
.m-empty__sub { font-size: 12.5px; }

/* ======================== 統計・特長 ======================== */
.m-trending { padding: 36px 0 60px; }
.m-section-title {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  margin: 40px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.m-section-title:first-child { margin-top: 0; }
.m-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0; margin-bottom: 24px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.m-stat-card {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.m-stat-card__label {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 7px;
}
.m-stat-card__value {
  font-size: 22px; font-weight: 600; letter-spacing: 0.005em;
  color: var(--ink); font-family: var(--mono);
}
.m-stat-card__unit { font-size: 11px; color: var(--ink-3); margin-left: 3px; }
.m-stat-card--loading { color: var(--ink-3); }

.m-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.m-feature {
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.m-feature__icon {
  font-family: var(--mono); font-size: 9.5px; color: var(--brass);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px;
}
.m-feature__title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 7px;
}
.m-feature__desc { font-size: 12px; color: var(--ink-2); line-height: 1.7; }

/* ======================== レビュー ======================== */
/* 関係者に触ってもらい、その場で気づきを残してもらうための欄。
   検索結果のすぐ下に置く。別ページに送ると書かれなくなるため。 */
.m-review { margin-bottom: 18px; }

.m-review__open {
  background: transparent;
  border: 1px dashed var(--line-hi);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-size: 12.5px; font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.m-review__open:hover { border-color: var(--brass-edge); color: var(--brass); }

.m-review__form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-sm);
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 11px;
}
.m-review__row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.m-review__name {
  background: var(--well); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 8px 11px;
  color: var(--ink); font-size: 13px; font-family: var(--sans);
  outline: none; width: 180px;
}
.m-review__name:focus { border-color: var(--brass); }
.m-review__name::placeholder { color: var(--ink-4); }

.m-review__verdicts { display: flex; gap: 6px; }
.m-review__v {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-3); border-radius: var(--r-xs);
  padding: 7px 13px; font-size: 12px; font-family: var(--sans);
  cursor: pointer; transition: border-color 0.12s, color 0.12s;
}
.m-review__v:hover { border-color: var(--line-hi); color: var(--ink-2); }
.m-review__v.is-on { border-color: var(--brass); color: var(--brass); background: var(--brass-wash); }

.m-review__comment {
  background: var(--well); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 10px 12px;
  color: var(--ink); font-size: 13.5px; font-family: var(--sans);
  line-height: 1.7; outline: none; resize: vertical; min-height: 76px;
}
.m-review__comment:focus { border-color: var(--brass); }
.m-review__comment::placeholder { color: var(--ink-4); }

.m-review__actions {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
.m-review__note {
  margin-right: auto; font-size: 12px; color: var(--absent);
}
.m-review__cancel {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-3); border-radius: var(--r-sm);
  padding: 8px 15px; font-size: 12.5px; font-family: var(--sans); cursor: pointer;
}
.m-review__cancel:hover { color: var(--ink-2); border-color: var(--line-hi); }
.m-review__save {
  background: var(--brass); color: var(--ground); border: none;
  border-radius: var(--r-sm); padding: 8px 20px;
  font-size: 12.5px; font-weight: 600; font-family: var(--sans);
  letter-spacing: 0.03em; cursor: pointer; transition: background 0.12s;
}
.m-review__save:hover { background: var(--brass-lo); color: var(--ink); }
.m-review__save:disabled { background: var(--raised); color: var(--ink-3); cursor: not-allowed; }

@media (max-width: 640px) {
  .m-review__name { width: 100%; }
  .m-review__actions { flex-wrap: wrap; }
}

/* ======================== 合言葉の入力 ======================== */
/* 関係者限定で公開するときだけ出る。中身を一切見せない全面の覆い。 */
.m-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground);
  padding: 24px;
}
.m-gate__panel {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.m-gate__mark {
  width: 34px; height: 22px;
  border: 1px solid var(--brass-edge); background: var(--brass-wash);
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--brass);
  margin-bottom: 18px;
}
.m-gate__title {
  font-size: 22px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink);
}
.m-gate__sub {
  font-size: 13px; color: var(--ink-2); line-height: 1.7;
  margin: 8px 0 22px;
}
.m-gate__form {
  display: flex; gap: 8px; width: 100%;
}
.m-gate__input {
  flex: 1; min-width: 0;
  background: var(--well); border: 1px solid var(--line-hi);
  border-radius: var(--r-sm); padding: 11px 13px;
  color: var(--ink); font-size: 14px; font-family: var(--sans);
  outline: none;
}
.m-gate__input:focus { border-color: var(--brass); }
.m-gate__input::placeholder { color: var(--ink-4); }
.m-gate__btn {
  background: var(--brass); color: var(--ground);
  border: none; border-radius: var(--r-sm);
  padding: 11px 22px; font-size: 13px; font-weight: 600;
  font-family: var(--sans); letter-spacing: 0.04em; cursor: pointer;
  transition: background 0.12s; white-space: nowrap;
}
.m-gate__btn:hover { background: var(--brass-lo); color: var(--ink); }
.m-gate__btn:disabled { background: var(--raised); color: var(--ink-3); cursor: not-allowed; }
.m-gate__error {
  font-size: 12px; color: var(--absent); margin-top: 12px; min-height: 1.2em;
}

/* ======================== モーダル ======================== */
.m-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.m-modal[hidden], .m-results-section[hidden], [hidden] { display: none !important; }
.m-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.66); backdrop-filter: blur(4px);
}
.m-modal__panel {
  position: relative;
  background: var(--panel); border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  max-width: 720px; width: calc(100% - 40px);
  max-height: 85vh; overflow-y: auto;
  animation: riseIn 0.16s ease;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.m-modal__close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); width: 28px; height: 28px;
  border-radius: var(--r-xs); cursor: pointer;
  font-size: 16px; line-height: 1;
}
.m-modal__close:hover { color: var(--ink); border-color: var(--line-hi); }
.m-modal__body { padding: 30px; }

.m-detail__head {
  margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.m-detail__maker {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.m-detail__model {
  font-size: 24px; font-weight: 600; letter-spacing: 0.01em; margin: 5px 0 6px;
}
.m-detail__grade { color: var(--ink-2); font-size: 13.5px; }
.m-detail__kata {
  display: inline-block; margin-top: 14px; padding: 5px 12px;
  border: 1px solid var(--brass-edge); color: var(--brass);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  border-radius: var(--r-xs); letter-spacing: 0.08em;
}
.m-detail__section { margin-top: 22px; }
.m-detail__section-title {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.m-detail__specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden;
}
.m-detail__spec {
  padding: 10px 12px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.m-detail__spec-label {
  font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--mono);
}
.m-detail__spec-value {
  font-size: 12.5px; color: var(--ink); margin-top: 3px; font-weight: 500;
}
.m-detail__colors { display: flex; flex-wrap: wrap; gap: 6px; }
.m-detail__color {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; background: var(--well);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: 11px; color: var(--ink-2);
}
.m-detail__color-dot {
  width: 13px; height: 13px; border-radius: var(--r-xs); border: 1px solid var(--line-hi);
}
.m-detail__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.m-detail__action {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); padding: 7px 13px;
  border-radius: var(--r-xs); font-size: 11.5px; cursor: pointer;
  font-family: var(--sans); transition: border-color 0.12s, color 0.12s;
}
.m-detail__action:hover { border-color: var(--brass-edge); color: var(--brass); }
.m-detail__action-result {
  margin-top: 12px; padding: 12px;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-xs); font-size: 11.5px; color: var(--ink-2);
  white-space: pre-wrap; font-family: var(--mono);
  max-height: 240px; overflow: auto;
}

/* ======================== フッタ ======================== */
.m-footer { border-top: 1px solid var(--line); padding: 22px 0; margin-top: 72px; }
.m-footer .m-container {
  display: flex; justify-content: space-between;
  color: var(--ink-3); font-size: 11.5px; flex-wrap: wrap; gap: 12px;
}

/* ======================== 読み込み中 ======================== */
.m-loading {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink-3); font-size: 12.5px;
}
.m-loading::before {
  content: ""; width: 12px; height: 12px;
  border: 1px solid var(--line-hi); border-top-color: var(--brass);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ======================== 画面幅 ======================== */
@media (max-width: 720px) {
  .m-container { padding: 0 18px; }
  .m-hero { padding: 40px 0 32px; }
  .m-hero__title { font-size: 26px; }
  .m-hero__sub { font-size: 13px; }
  .m-search input, .m-search textarea { font-size: 14px; padding: 12px 4px; }
  .m-search__btn { padding: 10px 16px; font-size: 12.5px; }
  .m-results-grid { grid-template-columns: 1fr; }
  .m-detail__model { font-size: 20px; }
  .m-chips__label { min-width: 100%; margin-bottom: 2px; }
  .m-mode-toggle { width: 100%; }
  .m-mode-toggle__option { flex: 1; justify-content: center; }
}