/* components.css ― 再利用UI（案A：硬派エディトリアル）。tokens/base/layout の後。 */

/* ── ヘッダ：太い墨の下罫線 ── */
.site-header{ background:var(--c-bg); border-bottom:3px solid var(--c-ink); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding-block:var(--sp-4); }
.brand{ display:flex; align-items:center; gap:.5em; text-decoration:none; color:var(--c-ink); }
.brand__name{ font-family:var(--font-head); font-weight:900; font-size:1.25rem; letter-spacing:.01em; color:var(--c-ink); }
.brand__name b{ color:var(--c-accent); }
.brand__sub{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-sub); padding-left:.7em; border-left:1px solid var(--c-line-strong); }
.site-nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,1.7rem); }
.site-nav a{ text-decoration:none; color:var(--c-ink); font-weight:700; font-size:var(--fs-sm); }
.site-nav a:hover{ color:var(--c-accent); }
.site-header__tel{ font-family:var(--font-head); color:var(--c-ink); font-weight:900; white-space:nowrap; }
.site-header__tel small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.65rem; color:var(--c-ink-mute); letter-spacing:.06em; text-transform:none; }
/* 第4周L2-C2: 公開ヘッダ(layouts/public)のnavがSP375で折り返さず横溢れ→wrap許可（共有ヘッダ1箇所で /demo 等を解消） */
@media (max-width:640px){ .site-header__inner{ flex-wrap:wrap; gap:var(--sp-2); } .site-nav{ flex-wrap:wrap; gap:.6rem 1rem; } }

/* ── ボタン：直角・2px罫・墨ベース、hoverで朱 ── */
.btn{ display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-base);
  padding:.85em 1.7em; border-radius:0; border:2px solid var(--c-ink);
  text-decoration:none; transition:background .15s,color .15s,border-color .15s,transform .05s; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--c-ink); color:var(--c-bg); }
.btn--primary:hover{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.btn--ghost{ background:transparent; color:var(--c-ink); }
.btn--ghost:hover{ background:var(--c-ink); color:var(--c-bg); }
.btn--lg{ font-size:var(--fs-lg); padding:.95em 2em; }

/* ── カード：直角・罫線で構成（影に頼らない） ── */
.card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:0; padding:var(--sp-6); }
.card--feature{ border:2px solid var(--c-ink); border-top:6px solid var(--c-accent); }
.card__title{ font-family:var(--font-head); font-weight:900; font-size:var(--fs-lg); margin-bottom:var(--sp-2); }

/* ── 等高カード（第56周 2026-07-07 根治・共有1箇所）──────────────
   グリッド内の兄弟カードは、本文(card__body)の行数差・DEMO口座の有無/行数差で
   高さとCTA位置がズレる → grid等高 + カード縦flex で外枠を揃える。
   スコープは「.grid の直下の .card」に限定＝グリッド外の .card(フォーム等)は不変。 */
.grid{ align-items:stretch; }
.grid > .card{ display:flex; flex-direction:column; height:100%; }
.grid > .card .card__body{ flex:1 1 auto; }

/* ── 業種カードの固定スロット（第56周b 2026-07-07・「行」を揃える本修正）────
   外枠等高だけではフッター内容量の差でCTA位置が行内でバラつく（実測: CTA差 85/45/134px・
   最大空白158px）。全カードの内部を同一の縦スケルトンに固定し、主CTA・料金相談・口座枠を
   行内で横一線にする。margin-top:auto の下端固定はCTAには使わない。
   スロット: タイトル(2行分固定) → 説明(2行clamp+2行分固定) → バッジ行(1行固定) →
             価格(price3) → 主CTA → パネル枠(1ボタン分固定) → 料金・相談 → 口座枠(固定高) */
.saas .card__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.7em; }
.saas .card__body{ flex:0 0 auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:3.2em; }
.saas__metrics{ min-height:1.8em; }
.saas__panelslot{ min-height:44px; display:flex; align-items:center; justify-content:center; }
.saas__panelslot .u-mute{ font-size:var(--fs-xs); }
.acct--uniform{ height:112px; overflow-y:auto; }
/* 口座枠のスクロールバーは控えめに（WebKit系） */
.acct--uniform::-webkit-scrollbar{ width:6px; }
.acct--uniform::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:3px; }
/* saas_card 冒頭のアイコン/チップ行（インラインstyle撤去→クラス化） */
.spread--top{ align-items:flex-start; }
/* 自動入力・readonly の入力欄（lead_form 出元ページ等・インラインstyle撤去→クラス化） */
.field__input--auto{ background:var(--c-bg-sub); color:var(--c-ink-sub); }

/* サービスタイル（編集的・番号付き） */
.tile{ display:flex; flex-direction:column; gap:var(--sp-2); text-decoration:none;
  color:var(--c-ink); background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:0; padding:var(--sp-6); transition:background .15s,border-color .15s,transform .08s; }
.tile:hover{ border-color:var(--c-ink); background:var(--c-bg-sub); transform:translateY(-2px); color:var(--c-ink); }
.tile__cat{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-accent); letter-spacing:.14em; text-transform:uppercase; }
.tile__title{ font-family:var(--font-head); font-weight:900; font-size:var(--fs-lg); }
.tile__desc{ font-size:var(--fs-sm); color:var(--c-ink-sub); }
.tile__more{ margin-top:auto; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-ink); letter-spacing:.06em; }
.tile--soon{ opacity:.7; }
.tile--soon:hover{ transform:none; background:var(--c-surface); border-color:var(--c-line); }

/* 編集的サービス行（番号＋見出し＋DEMO） */
.erow{ display:grid; grid-template-columns:72px 1fr auto; gap:var(--sp-5); align-items:center;
  padding:var(--sp-6) 0; border-bottom:1px solid var(--c-line); text-decoration:none; color:var(--c-ink); }
.erow:first-of-type{ border-top:1px solid var(--c-line); }
.erow:hover{ background:var(--c-bg-sub); }
.erow__no{ font-family:var(--font-mono); color:var(--c-accent); font-size:1.3rem; }
.erow__title{ font-family:var(--font-head); font-weight:900; font-size:1.3rem; }
.erow__desc{ color:var(--c-ink-sub); font-size:var(--fs-sm); margin-top:.1em; }
.erow__go{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-ink); letter-spacing:.06em; }
@media(max-width:640px){ .erow{ grid-template-columns:44px 1fr; } .erow__go{ display:none; } }

/* バッジ・チェック */
.badge{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-accent); border:1px solid var(--c-accent); padding:.35em .9em; }
.checklist{ list-style:none; padding:0; }
.checklist li{ position:relative; padding-left:1.7em; }
.checklist li::before{ content:""; position:absolute; left:.1em; top:.5em; width:.7em; height:.4em;
  border-left:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent); transform:rotate(-45deg); }
.crosslist{ list-style:none; padding:0; }
.crosslist li{ position:relative; padding-left:1.7em; color:var(--c-ink); }
.crosslist li::before{ content:"×"; position:absolute; left:.2em; top:0; color:var(--c-accent); font-weight:700; }

/* フォーム */
.field{ margin-bottom:var(--sp-5); }
.field label{ display:block; font-weight:700; font-size:var(--fs-sm); margin-bottom:.4em; }
.field input,.field textarea,.field select{ width:100%; font:inherit; font-size:var(--fs-base);
  padding:.8em 1em; background:#fff; color:var(--c-ink);
  border:2px solid var(--c-line-strong); border-radius:0; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--c-accent); box-shadow:var(--focus); }
.field .req{ color:var(--c-warm); font-size:var(--fs-xs); margin-left:.3em; }
.field .help{ font-size:var(--fs-xs); color:var(--c-ink-mute); margin-top:.35em; }

/* 注意・差し色ボックス */
.note{ border-radius:0; padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); }
.note--warm{ background:var(--c-accent-l); color:#8a2d1a; border-left:4px solid var(--c-accent); }
.note--ok{ background:var(--c-sub-l); color:#0f5a45; border-left:4px solid var(--c-sub); }

.price{ font-variant-numeric:tabular-nums; }
.price__main{ font-family:var(--font-head); font-size:2rem; font-weight:900; }

/* フッタ：墨地 */
.site-footer{ background:var(--c-ink); color:#c7bfb2; border-top:6px solid var(--c-accent); }
.site-footer a{ color:#efe9dd; }
.site-footer__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--sp-8); padding-block:var(--sp-12); }
@media (max-width:640px){ .site-footer__grid{ grid-template-columns:1fr; } }
.site-footer dl{ display:grid; grid-template-columns:auto 1fr; gap:.5em 1.2em; margin:0; font-size:var(--fs-sm); }
.site-footer dt{ color:#8f877a; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; }
.site-footer__copy{ border-top:1px solid #34302a; padding-block:var(--sp-4); font-family:var(--font-mono); font-size:var(--fs-xs); color:#8f877a; letter-spacing:.04em; }

/* 運営者 */
.owner{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-6); align-items:start; }
@media (max-width:640px){ .owner{ grid-template-columns:1fr; } }
.owner__photo{ width:120px; height:120px; object-fit:cover; background:var(--c-bg-sub); border:2px solid var(--c-ink); }
.owner__sign{ font-family:var(--font-head); font-weight:900; color:var(--c-ink); font-size:1.1rem; margin-top:var(--sp-2); }
.owner__sign b{ color:var(--c-accent); }