/* ══════════════════════════════════════════════════════════════
   金継ぎ追補スタイル kintsugi-repair.css（uedamilk.jp 修理デモ・2026-08-29）
   <head> の最後（既存CSSより後）に貼ると全ページで効く。
   ページごとの色系統は html:has(...) で自動的に振り分ける
   （トップ=.features-section / お見積り=.product-grid /
     法人=.steps-wrapper / 会社概要=.company-name）。
   方針: 新色を発明しない。既存の --primary-dark #705B48 を元栓にし、
   足りない色だけ元色の明度を動かした派生色（色相・彩度は不変）。
   直書き style 属性への上書きにのみ !important を使う。
   ══════════════════════════════════════════════════════════════ */

/* ── 全ページ共通(形の整理・色は触らない) ── */
/* 層の整理: 場当たりの z-index 1000 → 100(固定ヘッダー・固定バーの段) */
.premium-nav { z-index: 100; }
.estimation-bar { z-index: 100; }
/* ガラス調をやめて不透明の面に(型紙 glass) */
.premium-nav { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
.estimation-bar, .estimation-toggle { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* カタカナ語の泣き別れ対策(文節折り・Chromium)。対象は台帳が指摘した段だけに絞る
   (全段に当てると狭いカードで行数が増え「詰まり」を作る=biz実測) */
.feature-desc, .hero-desc, .product-name, .product-desc { word-break: auto-phrase; }

/* ══ トップ(home): .features-section を持つページ ══ */
/* 色の元栓: ブランド茶(文字・ボタン)と補助文字を、床に届く既存の濃茶 #705B48 へ一本化。
   オレンジの飾り文字はページ既存の #B45309(対白 比4.5超)へ(新色を発明しない)。 */
html:has(.features-section) {
  --brand-primary: #705B48;
  --primary-color: #705B48;
  --text-muted: #705B48;
  --brand-accent: #B45309;
}
/* グラデ文字をやめて単色に(型紙 gradient-text・強調は太さで既に立っている) */
html:has(.features-section) .hero-title span {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: #705B48;
}
/* フッター(暗地 #3C352E): 文字 #A49382 を明度だけ上げた派生 #AE9E8F(比4.65) */
html:has(.features-section) .premium-footer { color: #AE9E8F; }
/* 似て非なる色を台帳の寄せ先へ */
html:has(.features-section) .blob-1 { background-color: #FAE4D3; }
html:has(.features-section) .feature-card { background-color: #FFFFFF; border-color: #FFFFFF; }
html:has(.features-section) .f-icon { background-color: #FFFFFF; }
html:has(.features-section) .diag-header h2 { color: #0F172A; }
html:has(.features-section) .feature-card h3 { color: #0F172A; }
html:has(.features-section) #qtyAdviceBox { background-color: #FFFFFF !important; }
html:has(.features-section) #diagnosis,
html:has(.features-section) .diag-radio span,
html:has(.features-section) .diag-check span { border-color: #FAE4D3; }
@media (max-width: 767px) {
  html:has(.features-section) .blob-1 { background-color: #FFFFFF; }
}
/* 文字サイズ: 「その他」役割の割れを 14px 系へ */
html:has(.features-section) .hero-tag { font-size: 14px; }
html:has(.features-section) .hero-desc { font-size: 16px; }
html:has(.features-section) .feature-card p { font-size: 16px; }
html:has(.features-section) .diag-header > span { font-size: 14px !important; }
html:has(.features-section) #qtyAdviceText { font-size: 14px !important; }

/* ══ お見積り(products): .product-grid を持つページ ══ */
html:has(.product-grid) {
  --primary-color: #705B48;
  --brand-primary: #705B48;
  --text-muted: #705B48;
}
/* 申込ボタンの待機状態: 白文字が薄い灰 #CBD5E1 で読めない → 既存の濃鼠 #64748B へ */
html:has(.product-grid) .btn-primary:disabled { background: #64748B; }
/* 似て非なる色を台帳の寄せ先へ(直書き style には !important) */
html:has(.product-grid) .logo-title,
html:has(.product-grid) .section-heading h2 { color: #0F172A; }
html:has(.product-grid) .est-value { color: #0F172A; }
html:has(.product-grid) .card-content > div > a {
  background: #FFFFFF !important;
  border-color: #E8E1DA !important;
}
html:has(.product-grid) .section-heading a {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
}
/* 文字サイズ: 役割内の割れを 13.6 / 16 / 24 の3段へ(幅で崩れないよう固定) */
html:has(.product-grid) .product-type { font-size: 0.85rem; border-radius: 8px; }
html:has(.product-grid) .product-badge { font-size: 0.85rem; }
html:has(.product-grid) .product-price { font-size: 1.5rem; }
html:has(.product-grid) .est-value { font-size: 1.5rem !important; }
html:has(.product-grid) .est-label { font-size: 0.85rem; }
html:has(.product-grid) .tax-info { font-size: 0.85rem; }
html:has(.product-grid) .qty-label { font-size: 0.85rem !important; }
html:has(.product-grid) .card-content > div > a { font-size: 1rem !important; }
html:has(.product-grid) .section-heading a { font-size: 1rem !important; }
/* 角丸: 4/8/16/24/999 の5種 → 8/24/999 の3種へ */
html:has(.product-grid) .schedule-config { border-radius: var(--radius-lg); }

/* ══ 法人向け(biz): .steps-wrapper を持つページ ══ */
/* 空色 #0EA5E9 は明度だけ下げた派生 #096E9C(対白 比5.64・グラデ地の玉の上でも床に届く)へ */
html:has(.steps-wrapper) {
  --brand-secondary: #096E9C;
}
html:has(.steps-wrapper) .step-number { color: #096E9C; }
html:has(.steps-wrapper) .diag-header > span { color: #096E9C !important; }
/* フッターの薄い文字 #64748B 系 → ページ既存の濃鼠 #475569(対 #F8FAFC 比7超)に一本化 */
html:has(.steps-wrapper) .premium-footer,
html:has(.steps-wrapper) .premium-footer a { color: #475569 !important; }
/* フッターの地 #F1F5F9 → ページの地の系 #F8FAFC へ */
html:has(.steps-wrapper) .premium-footer { background: #F8FAFC; }
/* 文字サイズ: 本文とその他の割れを寄せる */
html:has(.steps-wrapper) .step-content p { font-size: 16px; }
html:has(.steps-wrapper) .section-subtitle { font-size: 1.15rem; }
html:has(.steps-wrapper) .hero-tag { font-size: 14.4px; }
html:has(.steps-wrapper) #qtyAdviceText { font-size: 14.4px !important; }
html:has(.steps-wrapper) .diag-header > span { font-size: 14.4px !important; }
html:has(.steps-wrapper) .premium-footer a { font-size: 14.4px !important; }
/* 似て非なる色: 飾りの玉と注意箱を地の系へ */
html:has(.steps-wrapper) .blob-1, html:has(.steps-wrapper) .blob-2 { background-color: #F8FAFC; }
html:has(.steps-wrapper) #qtyAdviceBox { background-color: #F8FAFC !important; }
/* 角丸: 6/16/20/24/999 の5種 → 8/24/999 の3種へ */
html:has(.steps-wrapper) #qtyAdviceBox { border-radius: 8px !important; }
html:has(.steps-wrapper) .step-item { border-radius: 24px; }
html:has(.steps-wrapper) .merit-card { border-radius: 24px; }
/* グラデ文字をやめて単色に(型紙 gradient-text) */
html:has(.steps-wrapper) .hero-title span {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: #1E293B;
}

/* ══ 会社概要(company): .company-name を持つページ ══ */
html:has(.company-name) {
  --primary-color: #705B48;
  --brand-primary: #705B48;
  --text-muted: #705B48;
}
/* 赤の注意書き: 色相を保って明度だけ下げる #EF4444 → #DB1313(対白 比4.9)。地は白へ */
html:has(.company-name) tr > td > span { color: #DB1313 !important; background: #FFFFFF !important; }
/* フッター(暗地): 明度だけ上げた派生 #AE9E8F */
html:has(.company-name) .premium-footer { color: #AE9E8F; }
html:has(.company-name) .premium-footer p,
html:has(.company-name) .footer-copyright { color: #AE9E8F; }
/* ボタン・電話リンク: 直書きの #8D7B68 を既存の濃茶 #705B48 へ */
html:has(.company-name) .hero-btn { background: #705B48 !important; }
html:has(.company-name) td.company-tel a { color: #705B48 !important; }
@media (max-width: 600px) {
  html:has(.company-name) .company-table th { color: #705B48 !important; }
}
/* 似て非なる色を台帳の寄せ先へ(戻るリンクは直書き style のため !important) */
html:has(.company-name) .logo-title,
html:has(.company-name) .section-heading h2 { color: #334155 !important; }
html:has(.company-name) .section-heading a {
  color: #334155 !important;
  background: #FFFFFF !important;
}
html:has(.company-name) section.simulator-wrapper { background: #FFFFFF !important; }
html:has(.company-name) .premium-footer p { font-size: 16px; }
/* 文字サイズ: 本文役割を 14.4 / 16 / 19.2 の3段へ */
html:has(.company-name) tr > td > span { font-size: 14.4px !important; }
html:has(.company-name) .company-name-sub { font-size: 14.4px; }
html:has(.company-name) .company-table th { font-size: 16px; }
html:has(.company-name) .company-table td { font-size: 16px; }
html:has(.company-name) .header-desc { font-size: 1.2rem; }
@media (max-width: 768px) {
  html:has(.company-name) .header-desc { font-size: 1rem !important; }
}