/* =====================================================================
   車の設定依頼メモ — components.css  v1.0
   依存: tokens.css（先に読み込むこと）。本ファイルは変数参照のみ。
   読み込み順:  <link tokens.css> → <link components.css>
   ===================================================================== */
@import url("tokens.css"); /* 単体利用時の保険。<link>順を守れば不要 */

/* ---------- 基本ユーティリティ ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-print{}
.print-only{display:none}
[hidden]{display:none !important}
.stack-gap > * + *{margin-top:var(--space-5)}

/* ---------- overline / eyebrow ---------- */
.overline{font-family:var(--font-latin);font-size:var(--fs-overline);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--color-ink-soft);display:inline-flex;align-items:center;gap:.7em}
.overline::before{content:"";width:24px;height:1px;background:var(--color-brass-soft)}

/* =====================================================================
   Button  .btn  (variants: primary / ghost / subtle ; size: md / sm)
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-medium);line-height:1;
  min-height:var(--control-height);
  padding:var(--btn-padding-y) var(--btn-padding-x);
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:none;color:inherit;cursor:pointer;text-decoration:none;
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.btn .ar{font-family:var(--font-latin);transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover .ar{transform:translateX(4px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none}

.btn-primary{background:var(--color-green);color:var(--color-ink-inverse);border-color:var(--color-green)}
.btn-primary:hover{background:var(--color-green-deep);border-color:var(--color-green-deep)}
.btn-primary:active{background:#0E1C16}

.btn-ghost{border-color:var(--color-line-strong);color:var(--color-ink)}
.btn-ghost:hover{border-color:var(--color-ink);background:rgba(26,25,22,.03)}

.btn-subtle{min-height:var(--control-height-sm);padding:9px 14px;gap:7px;font-size:12.5px;
  background:var(--color-paper-raised);border-color:var(--color-line-strong);color:var(--color-ink)}
.btn-subtle:hover{border-color:var(--color-green);color:var(--color-green)}
.btn-subtle i{font-size:15px}

.btn-sm{min-height:var(--control-height-sm);padding:var(--btn-padding-y-sm) var(--btn-padding-x-sm);font-size:13px}
.btn-block{width:100%}

/* =====================================================================
   Form  .field / .input  (text / search / textarea)
   ===================================================================== */
.field{display:block;max-width:380px}
.field > label{display:block;margin-bottom:7px;font-size:12px;letter-spacing:.06em;color:var(--color-ink-soft)}
.input{display:flex;align-items:center;gap:11px;min-height:var(--control-height);
  padding:13px 16px;border:var(--border-strong);background:var(--color-paper);border-radius:var(--radius-sm);
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.input > i{font-size:18px;color:var(--color-ink-soft);flex:0 0 auto}
.input :where(input,textarea){flex:1;width:100%;border:0;background:none;outline:none;
  font-family:var(--font-sans);font-size:15px;color:var(--color-ink);resize:vertical}
.input:focus-within{border-color:var(--color-green);box-shadow:var(--focus-ring)}
.input.is-error{border-color:var(--color-danger)}
.input.is-disabled,.input:has(:disabled){opacity:.5;background:var(--color-paper-sunken)}
.help{margin-top:6px;font-size:11.5px;color:var(--color-ink-soft)}
.help.is-error{color:var(--color-danger)}
textarea.bare{width:100%;min-height:62px;padding:11px 14px;border:var(--border-strong);
  background:var(--color-paper);border-radius:var(--radius-sm);font-family:var(--font-sans);
  font-size:14px;color:var(--color-ink);resize:vertical;outline:none}
textarea.bare:focus{border-color:var(--color-green);box-shadow:var(--focus-ring)}

/* =====================================================================
   Choice  .opt (single-select option) / .check (toggle)
   ===================================================================== */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{font-family:var(--font-sans);font-size:13.5px;color:var(--color-ink-soft);
  min-height:var(--tap-target-min);padding:10px 17px;
  border:var(--border-strong);background:var(--color-paper);border-radius:var(--radius-sm);
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.opt:hover{border-color:var(--color-green);color:var(--color-green)}
.opt:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.opt[aria-pressed="true"],.opt.is-selected{
  background:var(--color-green);border-color:var(--color-green);color:var(--color-ink-inverse);font-weight:var(--fw-medium)}
.opt.is-ask[aria-pressed="true"],.opt.is-ask.is-selected{background:var(--color-brass);border-color:var(--color-brass);color:var(--color-ink)}

.check{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-size:14px;color:var(--color-ink-soft);min-height:var(--tap-target-min)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .bx{width:22px;height:22px;flex:0 0 auto;border:var(--border-strong);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;color:transparent;transition:all var(--dur-fast)}
.check input:checked + .bx,.check.is-on .bx{background:var(--color-green);border-color:var(--color-green);color:var(--color-ink-inverse)}
.check input:focus-visible + .bx{box-shadow:var(--focus-ring)}

/* =====================================================================
   Card  .scard  (設定項目カード)
   ===================================================================== */
.scard{background:var(--color-paper-raised);border:var(--border-hair);
  padding:var(--card-padding);border-radius:0;
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.scard:hover{border-color:var(--color-line-strong);box-shadow:var(--shadow-2)}
.scard.is-answered{border-left:var(--border-accent)}
.scard .code{font-family:var(--font-latin);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-green)}
.scard .code b{margin-left:8px;font-weight:400;color:var(--color-ink-soft)}
.scard h3{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:600;letter-spacing:.03em;margin:9px 0}
.scard .dsc{font-size:14px;line-height:1.95;color:var(--color-ink-soft);margin-bottom:14px}
.cond{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;
  font-size:12px;color:var(--color-ink-soft);background:var(--color-paper-sunken);
  border:var(--border-hair);border-radius:var(--radius-sm);padding:6px 12px}
.cond i{font-size:14px;color:var(--color-brass)}

/* =====================================================================
   Badge / Alert / Toast
   ===================================================================== */
.badge{display:inline-flex;align-items:center;font-family:var(--font-latin);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-sm)}
.badge-green{background:var(--color-green);color:var(--color-ink-inverse)}
.badge-brass{color:var(--color-green);border:1px solid var(--color-brass-soft)}

.alert{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;margin-bottom:10px;
  font-size:13.5px;line-height:1.7;border:1px solid;border-radius:var(--radius-sm)}
.alert i{margin-top:2px;flex:0 0 auto}
.alert-success{background:var(--color-success-bg);border-color:var(--color-success);color:#1c4a37}
.alert-warning{background:var(--color-warning-bg);border-color:var(--color-warning);color:#6b521f}
.alert-danger {background:var(--color-danger-bg); border-color:var(--color-danger); color:#6e2e23}
.alert-info   {background:var(--color-info-bg);   border-color:var(--color-info);   color:#234339}

.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:var(--color-ink);color:var(--color-ink-inverse);font-size:13.5px;letter-spacing:.03em;
  padding:13px 22px;border-radius:var(--radius-sm);box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;transition:all var(--dur-base) var(--ease-standard);z-index:var(--z-toast)}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* =====================================================================
   Motion guard
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* =====================================================================
   Print  — ディーラー提出用「設定依頼メモ」 (print.css に分離可)
   ===================================================================== */
@page{size:A4;margin:16mm 14mm}
@media print{
  :root{--color-paper:#fff}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.6}
  .no-print{display:none !important}
  .print-only{display:block !important}
  .btn,.toast,.opts,.cond,.check{display:none !important}
  .scard,.memo-row,tr{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  a[href]::after{content:""}
  .memo-table{width:100%;border-collapse:collapse;font-size:10.5pt}
  .memo-table thead{display:table-header-group}
  .memo-table th,.memo-table td{border:1px solid #999;padding:6pt 8pt;text-align:left;vertical-align:top}
  .memo-table th{background:#f0f0f0;font-weight:600}
}