/* ローカルLLM構築支援サイト
 * 外部の読み込みを一切しない（フォント・スクリプトとも）。
 * さくらのVPS上で既存サイトと同居するため、素直な作りに留める。
 */
:root {
  --bg:#f6f7f9; --panel:#fff; --line:#dde2e8; --ink:#171b20; --muted:#5a646f;
  --brand:#123c5e; --accent:#1c6ea4; --on-brand:#fff;
  --ok:#1c7a52; --warn:#9a5f10; --ng:#a32d2d; --r:12px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161b; --panel:#1a1f26; --line:#2c343d; --ink:#e7ebf0; --muted:#9aa4af;
          --brand:#7fb6e0; --accent:#6aa9d8; --on-brand:#0c1015;
          --ok:#54c58c; --warn:#dfa254; --ng:#ef8888; }
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.85 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;}
.wrap{max-width:1000px;margin:0 auto;padding:0 18px}

header.site{background:var(--brand);color:var(--on-brand);padding:44px 0 38px}
@media (prefers-color-scheme: dark){header.site{background:#0f1620}}
header.site .eyebrow{margin:0 0 8px;font-size:13px;letter-spacing:.16em;opacity:.8}
header.site h1{margin:0 0 16px;font-size:30px;line-height:1.45;letter-spacing:.01em}
header.site .lead{margin:0;font-size:16px;max-width:62ch;opacity:.95}
header.site .model-note{margin:16px 0 0;font-size:14px;padding:12px 14px;
  border-inline-start:3px solid currentColor;opacity:.9}

main{padding:26px 0 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin-bottom:20px}
.card h2{margin:0 0 8px;font-size:19px}
.card.key{border-color:var(--accent);border-width:2px}
.note{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.basis{margin:16px 0 0;font-size:13.5px;color:var(--muted);
  background:var(--bg);border-radius:8px;padding:12px 14px}

table.vram{width:100%;border-collapse:collapse;font-size:15px}
table.vram th,table.vram td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:start;
  vertical-align:top}
table.vram th{font-size:13px;color:var(--muted);font-weight:600}
table.vram td.n{font-size:22px;font-weight:700;color:var(--accent);white-space:nowrap}
table.vram tr.mid{background:color-mix(in srgb,var(--accent) 7%,transparent)}

.step{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.step:first-of-type{border-top:none;padding-top:0;margin-top:0}
.step-t{margin:0 0 10px;font-weight:700;font-size:15px}
.step-t span{display:inline-grid;place-items:center;width:24px;height:24px;margin-inline-end:8px;
  border-radius:50%;background:var(--accent);color:var(--on-brand);font-size:13px}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
select,input[type=range]{width:100%;font:inherit}
select{padding:12px;min-height:48px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink)}
input[type=range]{margin:6px 0;min-height:44px}
.hint{margin:6px 0 0;font-size:13px;color:var(--muted)}
button.primary{width:100%;margin-top:18px;padding:14px;min-height:50px;font:inherit;
  font-weight:700;border:none;border-radius:8px;background:var(--accent);
  color:var(--on-brand);cursor:pointer}

#result:empty{display:none}
.verdict{margin-top:18px;border-radius:var(--r);padding:16px;border:1px solid var(--line)}
.verdict.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.verdict.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.verdict h3{margin:0 0 8px;font-size:17px}
.verdict dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0;font-size:14.5px}
.verdict dt{color:var(--muted)} .verdict dd{margin:0;font-weight:600}

.plans{display:grid;gap:14px}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--bg)}
.plan.reco{border-color:var(--accent);border-width:2px}
.plan .tier{margin:0;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.plan .vram{margin:4px 0 0;font-size:19px;font-weight:700}
.plan .agents{margin:2px 0 10px;font-size:14px;color:var(--accent);font-weight:700}
.plan ul{margin:0 0 12px;padding-inline-start:18px;font-size:14px}
.plan li{margin-bottom:5px}
.plan .price{margin:0;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:9px}

.specs{display:grid;gap:14px}
.specs>div{border-inline-start:3px solid var(--accent);padding-inline-start:12px}
.specs .k{margin:0;font-size:13px;color:var(--muted)}
.specs .v{margin:1px 0 4px;font-size:17px;font-weight:700}
.specs .d{margin:0;font-size:14px;color:var(--muted)}

.two{display:grid;gap:14px}
.two>div{background:var(--bg);border-radius:8px;padding:14px}
.two .k{margin:0 0 6px;font-weight:700}
.two ul{margin:0;padding-inline-start:18px;font-size:14.5px}

footer.site{border-top:1px solid var(--line);margin-top:30px;padding:22px 0;
  color:var(--muted);font-size:13.5px}
footer.site p{margin:0 0 4px} footer.site .small{font-size:12px}

/* 折りたたみ機のカバー画面（約350px）でも崩さない。
   3列の表は横に詰めると読めなくなるため、積み重ねに切り替える。 */
@media (max-width:480px){
  header.site h1{font-size:24px}
  .card{padding:15px}
  table.vram thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.vram tr{display:block;border:1px solid var(--line);border-radius:10px;
    padding:11px 13px;margin-bottom:10px;background:var(--bg)}
  table.vram tr.mid{background:color-mix(in srgb,var(--accent) 9%,transparent)}
  table.vram td{display:block;border:none;padding:3px 0}
  table.vram td::before{content:attr(data-l);display:block;font-size:11.5px;
    color:var(--muted);letter-spacing:.04em}
  table.vram td.n{font-size:24px;line-height:1.3}
}
@media (min-width:640px){
  .plans{grid-template-columns:repeat(3,1fr)}
  .specs{grid-template-columns:repeat(2,1fr) }
  .two{grid-template-columns:1fr 1fr}
  header.site h1{font-size:34px}
}

/* お見積り（フェーズ6の確定価格にもとづく） */
.step label input[type=radio]{width:auto;min-height:auto;margin-inline-end:9px}
.step label:has(input[type=radio]){
  display:flex;align-items:center;margin:0 0 8px;padding:13px 14px;min-height:52px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);
  color:var(--ink);font-size:15px;cursor:pointer}
.step label:has(input[type=radio]:checked){
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
#quote:empty{display:none}
.quote-box{margin-top:20px;border:2px solid var(--accent);border-radius:var(--r);
  padding:20px;background:var(--panel)}
.q-h{margin:0;font-size:13px;letter-spacing:.12em;color:var(--muted);font-weight:700}
.q-cond{margin:4px 0 14px;font-size:13.5px;color:var(--muted)}
.q-t{width:100%;border-collapse:collapse;font-size:15px}
.q-t th{text-align:start;font-weight:500;padding:11px 10px 11px 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.q-t td{padding:11px 0;border-bottom:1px solid var(--line);
  text-align:end;white-space:nowrap;font-weight:700}
.q-t td.free{color:var(--ok)}
.q-t td.est{color:var(--muted);font-weight:500}
.q-total{margin:16px 0 0;text-align:end;font-size:27px;font-weight:800;
  color:var(--accent);line-height:1.4}
.q-note{margin:16px 0 0;padding-inline-start:19px;font-size:13.5px;color:var(--muted)}
.q-note li{margin-bottom:6px}
.q-small{margin:12px 0 0;font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:10px}
@media (max-width:480px){ .q-total{font-size:23px} }

/* 中継サーバ（外から使う場合にだけ要る） */
.relay { margin: 20px 0 0; padding: 1rem 1.2rem;
         border: 2px solid #96590c; border-radius: .6rem; }
@media (prefers-color-scheme: dark){ .relay { border-color: #dda254; } }
.rel-t { margin: 0 0 .5rem; font-weight: 700; }