/* ─────────────────────────────────────────────────────────────────────────
   Lighting Quote Tool — page layer.
   Everything here is composed from the Modernist tokens; no raw palette
   values, no rounded corners, rules stay at the system's 2px.
   ───────────────────────────────────────────────────────────────────────── */

/* ── ブランドカラー上書き ───────────────────────────────────────────────
   Modernist 本体（_ds/…/styles.css）は編集せず、ここでトークンだけ差し替える。
   値は Claude Design の `Lighting Quote Tool.dc.html` が指定しているものと同一。
   ロゴ実測は #2357a5、デザイン指定は #2c56a0 でわずかに異なるため、
   デザイン側の指定を正とした。                                            */
:root {
  --color-accent:   #2c56a0;
  --color-accent-100: #eaf0f9;
  --color-accent-200: #d3e0f2;
  --color-accent-300: #a9c2e6;
  --color-accent-400: #6e93ce;
  --color-accent-500: #2c56a0;
  --color-accent-600: #234685;
  --color-accent-700: #1b3768;
  --color-accent-800: #14294d;
  --color-accent-900: #0d1b33;

  --color-accent-2: #2c56a0;
  --color-accent-2-100: #eaf0f9;
  --color-accent-2-200: #d3e0f2;
  --color-accent-2-300: #a9c2e6;
  --color-accent-2-400: #6e93ce;
  --color-accent-2-500: #2c56a0;
  --color-accent-2-600: #234685;
  --color-accent-2-700: #1b3768;
  --color-accent-2-800: #14294d;
  --color-accent-2-900: #0d1b33;
}

/* デザインシステムの .card などが display を指定するため、hidden 属性の
   display:none（UAスタイル）が負けて要素が残る。属性側を優先させる。 */
[hidden] { display: none !important; }

body { background: var(--color-surface); }

/* — パスワードゲート — */
.gate {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: var(--space-6);
  background: var(--color-surface);
}
.gate-card { width: min(380px, 100%); padding: var(--space-8); gap: var(--space-4); }
.gate-logo { display: block; height: 24px; width: auto; }
.gate-title { font-size: 20px; margin: 0; }
.gate-lede { margin: 0; font-size: 13px; opacity: .7; }
.gate-error { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-accent-700); }

/* — header — */
.nav { padding: var(--space-3) 40px; background: #fff; }
.nav-logo { display: block; height: 26px; width: auto; flex: none; }
.nav-sub  { font-size: 13px; opacity: .6; }
@media (max-width: 620px) { .nav-logo { height: 20px; } }

/* — shell — */
.shell {
  max-width: 1440px; margin: 0 auto; background: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px; padding: 56px 40px 80px;
}
.steps { display: flex; flex-direction: column; gap: 80px; min-width: 0; }

/* — step scaffold — */
.step { display: flex; gap: 28px; align-items: flex-start; }
.step-num {
  flex: none; width: 110px; font-family: var(--font-heading);
  font-size: 72px; font-weight: var(--font-heading-weight);
  color: var(--color-neutral-200); line-height: 1; user-select: none;
}
.step-body { flex: 1; min-width: 0; }
.step-kicker {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--color-accent-700); margin-bottom: var(--space-2);
}
.step-title { font-size: 26px; margin: 0 0 28px; }
.step-note {
  margin: var(--space-4) 0 0; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.step-lede {
  margin: -16px 0 var(--space-4); font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.pref-field { max-width: 320px; }

.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;
}

/* — choice cards (rooms / grids / ceiling) — */
.choice-grid { display: grid; gap: var(--space-6); }
.choice-grid-2 { grid-template-columns: 1fr 1fr; }
.choice-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.choice-rows { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; }

.choice {
  position: relative; padding: 0; gap: 0;
  border: 2px solid transparent; cursor: pointer;
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.choice:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.choice.is-selected {
  border-color: var(--color-accent); background: var(--color-accent-100);
}
/* 未登録の設置場所。カード全体を薄くすると写真が見えなくなるため、
   写真はそのままにして文字側だけ落とす。状態は「レイアウト未登録」の
   文言とカーソル形状で示す。 */
.choice.is-disabled { cursor: not-allowed; }
.choice.is-disabled:hover { background: var(--color-surface); }
.choice.is-disabled .choice-body { opacity: .5; }
.choice.is-muted:not(.is-selected) { opacity: .6; }

.choice-media { overflow: hidden; flex: none; }
.choice-body { padding: var(--space-4) 20px; }
.choice-title { font-size: 16px; }
.choice-sub { font-size: 12px; opacity: .7; margin-top: 2px; }

/* 横並びの1行カード（STEP 4 の懐高） */
.choice-row {
  flex-direction: row; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 18px;
}
.choice-row-label { flex: 1; font-size: 15px; font-weight: 600; }
.choice-row-note { font-size: 12px; opacity: .85; }

/* STEP 4 の注意書き */
.ceiling-result { max-width: 520px; margin-top: var(--space-4); }
.model-caution {
  margin: 0; padding: var(--space-3) var(--space-4); font-size: 12px; line-height: 1.8;
  background: var(--color-accent-100); border-left: 3px solid var(--color-accent);
  color: var(--color-accent-800);
}
.model-caution-link { color: var(--color-accent-700); font-weight: 600; white-space: nowrap; }


/* グレード絞り込み */
.filter-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.filter-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.filter-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: .6; }
.filter-note { font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
/* グレード絞り込みは連結したセグメントではなく独立したボタンにする。
   選択肢が4つあり、モバイルでは2行に折り返すため、連結した枠だと
   行をまたいだ罫線が崩れて見える。 */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; padding: 8px 14px;
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-bg);
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip:has(input:checked) {
  background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent);
}
.chip:not(:has(input:checked)):hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — レイアウトカード —
   製品名・グレード・価格の税区分は全カード共通なのでステップ側に1度だけ出し、
   カードは見比べる3点（寸法・型番・金額）だけにして縦を詰める。 */
.layout-common {
  margin: 0 0 var(--space-4); font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.choice-layout { padding: 0; }
.layout-dims {
  padding: var(--space-3) 14px 0; font-size: 15px; font-weight: 600;
  line-height: 1.4; min-height: 2.8em;
}
.layout-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); padding: 2px 14px var(--space-3);
}
.layout-token {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; opacity: .6;
}
.choice-price {
  font-size: 14px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--color-accent-800);
}
.choice-price.is-pending { font-size: 11px; font-weight: 600; color: var(--color-neutral-600); }

.choice-tile { padding: var(--space-6); text-align: center; }
.mini {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--space-1);
  width: var(--mini-w); height: var(--mini-h); margin: 0 auto var(--space-4);
}
.mini i { display: block; background: var(--color-neutral-300); }
.choice.is-selected .mini i { background: var(--color-accent); }
.choice-tile .choice-sub { margin-top: var(--space-1); opacity: .6; }

/* — photo placeholders (swap in an <img> child and the label hides) — */
.photo {
  position: relative; display: grid; place-items: center; margin: 0;
  background: var(--color-neutral-200); border: 1px solid var(--color-divider);
  overflow: hidden;
}
/* 枠いっぱいに敷く。.photo は display:grid なので height:100% だけでは
   グリッドアイテムの高さが確定せず、枠からはみ出して overflow で切れる。 */
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* .grayscale はプレースホルダの見た目を整えるための指定。実写が入ったら
   色を戻す（デザインシステム側の filter を打ち消す）。 */
.photo.grayscale:has(img) { filter: none; }
/* 設置場所カードは部屋全体が分かることが大事なので、切り抜かず全体を収める。
   縦位置の写真が多いため枠を 4:3 にして、contain でも大きく見えるようにする。 */
#room-grid .photo { aspect-ratio: 4 / 3; }
/* カード内の写真は枠線を出さない。写真の下辺が文字との区切り線に見えてしまう。 */
#room-grid .photo, .layout-thumb { border: none; }
#room-grid .photo img { object-fit: contain; }
/* 文字は設置場所名のみ。余白を詰めて写真に面積を回す。 */
#room-grid .choice-body { padding: var(--space-2) 20px; }
.photo-label {
  margin: 0; padding: 0 var(--space-2); text-align: center;
  font-size: 11px; letter-spacing: .04em; color: var(--color-neutral-600);
}
.photo:has(img) .photo-label { display: none; }
.photo-16x9  { aspect-ratio: 16 / 9; width: 100%; }
.photo-16x10 { aspect-ratio: 16 / 10; width: 100%; }

/* — レイアウトカードのサムネイル — */
.layout-thumb { margin: 0; }

/* — 施工イメージの切り替えサムネイル — */
.preview-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.preview-thumb {
  width: 72px; height: 48px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--color-neutral-200);
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-thumb.is-active { border-color: var(--color-accent); }
.preview-thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — 施工イメージ — */
.preview-card { padding: var(--space-8); gap: 20px; }
.preview-title { font-size: 22px; margin: 0; }
.preview-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); font-size: 14px;
}
.preview-config { font-weight: 600; }
.preview-price-note { opacity: .6; font-size: 13px; }

/* — contact — */
/* 問い合わせは .steps / .rail の外に置く。中に入れるとモバイルで1列に
   なったとき、見積サマリーより前に出てしまう（情報を見る前に依頼欄が来る）。
   PC では左カラムの下、モバイルでは全要素の最後になる。 */
.contact-card { padding: 0; gap: 0; grid-column: 1; margin-top: var(--space-6); }
.contact-summary {
  padding: 20px var(--space-6); cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px;
}
.contact-summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.contact-body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: 20px; }
.contact-alt {
  margin: 0; padding: var(--space-4) 18px; font-size: 13px; line-height: 1.8;
  background: var(--color-accent-100); border-left: 3px solid var(--color-accent);
}
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-required {
  margin-left: var(--space-2); padding: 1px 6px; font-size: 10px; font-weight: 600;
  letter-spacing: .04em; background: var(--color-accent); color: #fff;
}
.field-wide, .form-config, .form-status, .form-submit { grid-column: 1 / -1; }
.form-submit { justify-self: start; }
.field .input[aria-invalid="true"] { border-color: var(--color-accent); }
.field-error { font-size: 11px; color: var(--color-accent-700); margin-top: var(--space-1); }
.form-config {
  margin: 0; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.form-config-detail {
  grid-column: 1 / -1; margin: -12px 0 0;
  padding: var(--space-3) var(--space-4); font-size: 12px; line-height: 1.7;
  background: var(--color-neutral-200);
}
.form-status { margin: 0; font-size: 13px; }
.form-status.is-ok { color: var(--color-accent-700); font-weight: 600; }
.form-status.is-err { color: var(--color-accent-700); }

/* — right rail — */
.rail {
  position: sticky; top: var(--space-8); align-self: start;
  display: flex; flex-direction: column; gap: 20px;
}
.rail-cart { padding: var(--space-6); gap: 14px; }
.rail-cart-head { display: flex; align-items: baseline; justify-content: space-between; }
.rail-clear { font-size: 12px; padding: var(--space-1) var(--space-2); }
.cart-row { padding: 14px var(--space-4); flex-direction: row; align-items: center; gap: 14px; }
.cart-thumb { width: 60px; height: 60px; flex: none; }
.cart-text { flex: 1; min-width: 0; }
.cart-title { font-weight: 600; font-size: 14px; }
.cart-sub { font-size: 12px; opacity: .6; margin-top: 2px; }
.cart-empty { font-size: 13px; opacity: .6; }

.rail-summary { padding: var(--space-8); gap: 18px; }
.rail-notice {
  margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 1.6;
  background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 600;
}
.sum { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sum-row { display: flex; justify-content: space-between; gap: var(--space-4); }
.sum-key { opacity: .65; }
.sum-hr { margin: var(--space-1) 0; }
.sum-total { font-weight: 700; font-size: 16px; }
.sum-sub { font-size: 12px; opacity: .75; margin-top: -4px; }
.sum-sub .is-pending, #v-shipping.is-pending { font-style: italic; }
/* 定価は参考値なので控えめに。主役は仕切り価格（.sum-hero）。 */
.sum-listtotal { font-weight: 600; }
.sum-margin { color: var(--color-accent-700); font-weight: 700; }

/* 仕切り価格 — このツールの主役の数字 */
.sum-hero {
  margin: var(--space-2) 0;
  padding: var(--space-4) 18px;
  background: var(--color-accent-100);
  border-left: 4px solid var(--color-accent);
}
.sum-hero-key {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--color-accent-700);
}
.sum-hero-value {
  margin-top: 2px; font-family: var(--font-heading);
  font-size: 30px; font-weight: var(--font-heading-weight); line-height: 1.15;
  color: var(--color-accent-800); font-variant-numeric: tabular-nums;
}
.sum-hero-sub {
  display: flex; justify-content: space-between; gap: var(--space-4);
  margin-top: 6px; font-size: 12px; color: var(--color-accent-700); opacity: .8;
}

.rail-list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.rail-list-head { margin-bottom: 2px; }
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px var(--space-4); font-size: 14px; font-weight: 600;
  color: var(--color-text); text-decoration: none;
}
.doc-link:hover { background: var(--color-accent-100); }
.doc-link-icon { margin-left: auto; opacity: .5; font-size: 12px; }
.rail-muted { margin: 0; opacity: .55; }

/* — quote dialog — */
.quote-doc { width: min(760px, 100%); max-height: 90vh; overflow: auto; }
.quote-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.quote-logo { display: block; height: 22px; width: auto; margin-bottom: var(--space-2); }
.quote-meta { font-size: 12px; text-align: right; opacity: .7; line-height: 1.7; }
.quote-table .num { text-align: right; }
.row-pending td { opacity: .6; }
.quote-table td.num { font-variant-numeric: tabular-nums; }
.quote-sum { margin-top: var(--space-4); margin-left: auto; width: min(340px, 100%); }
.quote-note { font-size: 11px; opacity: .6; margin: var(--space-3) 0 0; }
.quote-caution {
  margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4);
  font-size: 12px; line-height: 1.8; background: var(--color-accent-100);
  border-left: 3px solid var(--color-accent); color: var(--color-accent-800);
}

/* — responsive — */
/* 3列だとカードが細くなりすぎる幅では2列に落とす。
   1080px 以下で1列になるのは既存の指定どおり。 */
@media (max-width: 1240px) {
  .choice-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 20px 64px; }
  .steps { gap: 56px; }
  .rail { position: static; }
  .step { gap: var(--space-4); }
  .step-num { width: 60px; font-size: 44px; }
  .choice-grid-2, .choice-grid-3 { grid-template-columns: 1fr; }
  /* レイアウトだけは候補数が多いので、タブレット幅では2列を保つ */
  #layout-grid { grid-template-columns: 1fr 1fr; }
  .nav { flex-wrap: wrap; padding-inline: 20px; }
}
/* ── レイアウト選択：狭い画面ではリスト行にする ──────────────────────
   1列のカードのままだと、16件の候補で約5,300px（7〜8画面分）スクロールする。
   Apple HIG（Collections）の「テキストはテーブルの方が消化しやすい」に従い、
   サムネイルを小さくして寸法・番号・価格を縦に揃え、比較できる形にする。
   大きい画像は選択後に「施工イメージ」が受け持つので、ここでは重複させない。 */
@media (max-width: 860px) {
  #layout-grid { grid-template-columns: 1fr; gap: 0; }
  .choice-layout {
    flex-direction: row; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 2px solid transparent; border-bottom-color: var(--color-divider);
  }
  .choice-layout:last-child { border-bottom-color: transparent; }
  .choice-layout.is-selected { border-color: var(--color-accent); }
  .layout-thumb { flex: none; width: 72px; aspect-ratio: 1 / 1; }
  /* 画像が入るまでのプレースホルダ文字は消す。すぐ右に同じ番号が出ており、
     72px幅では折り返して読みにくいだけになる。 */
  .layout-thumb .photo-label { display: none; }
  .layout-body { flex: 1; min-width: 0; }
  .layout-dims { padding: 0; min-height: 0; font-size: 14px; }
  .layout-foot { padding: 0; margin-top: 2px; justify-content: flex-start; gap: var(--space-3); }
  .layout-token { flex: none; }
  .choice-price { margin-left: auto; }
}

@media (max-width: 620px) {
  .contact-form { grid-template-columns: 1fr; }
  .preview-meta { flex-direction: column; gap: var(--space-1); }
  .choice-row { flex-wrap: wrap; }
}

/* — print: the quote sheet only — */
@media print {
  /* 見積書は #app > #quote-backdrop にある。ゲート追加で body 直下に #app を
     挟んだため、body 直下だけを見て隠すと見積書ごと消える（白紙になる）。
     2階層とも明示的に絞り込むこと。 */
  body > *:not(#app) { display: none !important; }
  #app { display: block !important; }
  #app > *:not(#quote-backdrop) { display: none !important; }
  #quote-backdrop:not([hidden]) {
    position: static; display: block !important; padding: 0; background: none;
  }
  .quote-doc { width: 100%; max-height: none; box-shadow: none; background: none; padding: 0; }
  /* 背景色が印刷されない環境でも仕切り価格が沈まないよう、罫線と字面で強調する */
  .sum-hero { border-left-width: 4px; padding-left: 12px; }
  .sum-hero-value { font-size: 24px; }
  .dialog-actions { display: none !important; }
}