/* ======================================================
   test-jisedai カードレイアウト基盤 v3.6.0（修正版）
   - 強すぎる all: revert-layer を撤去
   - #waku-app 内だけを安全に整える
====================================================== */

/* ❌ 強すぎるリセットは使わない */
/*
#waku-app, 
#waku-app * {
    all: revert-layer;
}
*/

#waku-app {
  box-sizing: border-box;
}

#waku-app *,
#waku-app *::before,
#waku-app *::after {
  box-sizing: inherit;
}

#waku-app input,
#waku-app select,
#waku-app textarea,
#waku-app button {
  font: inherit;
}


/* =========================================================
   モバイル縦型で横にスワイプできてしまう（横スクロール）対策
   - iOS Safari等で off-canvas（100vw + translateX）要素があると、
     画面外の要素分だけ横幅が広く判定されることがあります。
========================================================= */
@supports(selector(html:has(#waku-app))) {
  html:has(#waku-app) { overflow-x: hidden; }
}
body.page-test-waku {
  overflow-x: hidden;
}
body.page-test-waku #waku-app {
  overflow-x: hidden;
  max-width: 100%;
}


/* ======================================================
   Backdrop（サマリー/設定）
   - Shadow DOM 内でも確実に制御できるよう、ここで基本スタイルを定義
   - 重要：設定パネルより必ず背面に置く（クリックを奪わない）
====================================================== */

#settingsBackdrop,
#summaryBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 99990; /* #estimateSettingsContainer(99999) より下 */
}

#settingsBackdrop.active,
#summaryBackdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* 設定パネル（右側スライド） */
#estimateSettingsContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 100vh;
  background: #f9fafb;
  /* right を動かすとレイアウト計算が重くなりやすいので transform に寄せる */
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
  contain: layout paint;
  z-index: 99999;
  overflow: hidden;
}
#estimateSettingsContainer.open { transform: translateX(0); }

/*
  上部ヘッダー（保存/リセット/閉じる）
  - JS側で .panel-header を自動生成
  - ここで見た目とレイヤー順を統一
*/
#estimateSettingsContainer .panel-header,
#settingsSummaryContainer .panel-header {
  position: sticky;
  top: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

#estimateSettingsContainer .panel-header h2,
#settingsSummaryContainer .panel-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

#estimateSettingsContainer .panel-header .settings-header-actions,
#settingsSummaryContainer .panel-header .settings-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#closeSummaryBtn {
  position: static;
  z-index: auto;
  font-size: 22px;
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.9;
}

#closeSummaryBtn:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

/*
  closeSettingsBtn は v3.7.6 から「パネルを閉じる」表記（テキストボタン）へ変更。
  旧来の 36px アイコン枠スタイルを当てると文字が欠けるため、ここでは最小限に留める。
*/
#closeSettingsBtn {
  position: static;
  z-index: auto;
  cursor: pointer;
  white-space: nowrap;
}

#estimateSettingsContainer h2 {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  background: transparent;
  border: none;
}

#estimateSettingsContainer .panel-body {
  height: calc(100% - 60px);
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-rows: 180px;
  gap: 16px;
  overflow-y: auto;
}

.settings-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* =========================================================
   Settings Cards: タイトル中央揃え（jisedai準拠）
   - 複数行（例: バックアップ/復元 (JSON)）の場合でも左右中央に揃うようにする
   - 影響範囲は設定パネル配下に限定
========================================================= */

#estimateSettingsContainer .settings-card .card-title {
  width: 100%;
  text-align: center;
}

#estimateSettingsContainer .settings-card .card-title h3 {
  margin: 0;
  width: 100%;
  text-align: center;
}

.settings-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card-content { margin-top: 12px; width: 100%; }

/* 展開カード */
.settings-card.expanded {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  background: #fff !important;
  z-index: 100002 !important;
  border-radius: 0 !important;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

@media (min-width: 1025px) {
  .settings-card.expanded { width: 50vw !important; }
}

/* 旧UI無効化 */
/*
  以前は settings 内の fieldset/legend を全無効化していましたが、
  editor 側が fieldset を使うケースがありフォームが消える原因になります。
  → 「折りたたみカード」内だけ非表示にして、展開時は表示させます。
*/
#estimateSettingsContainer .settings-card:not(.expanded) fieldset,
#estimateSettingsContainer .settings-card:not(.expanded) legend,
#estimateSettingsContainer .settings-card:not(.expanded) details,
#estimateSettingsContainer .settings-card:not(.expanded) summary {
  display: none !important;
}

/* card-controller は fieldset を .card-content に移動するため、
   折りたたみ時にフォームが露出しないよう .card-content を明示的に隠す */
#estimateSettingsContainer .settings-card:not(.expanded) .card-content {
  display: none !important;
}
#estimateSettingsContainer .settings-card.expanded .card-content {
  display: block !important;
}

#estimateSettingsContainer .settings-card.expanded fieldset,
#estimateSettingsContainer .settings-card.expanded legend,
#estimateSettingsContainer .settings-card.expanded details,
#estimateSettingsContainer .settings-card.expanded summary {
  display: block !important;
}

/* フォーム干渉遮断（必要最小） */
#estimateSettingsContainer .settings-card.expanded input,
#estimateSettingsContainer .settings-card.expanded select,
#estimateSettingsContainer .settings-card.expanded textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 4px 0 !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
}

/* ======================================================
   固定フッター（5ボタン）
   - Shadow DOM 内でも必ず「position: fixed」で追従させる
   - 下部UIに本文が潜り込まないよう padding-bottom も確保
====================================================== */

/* コンテンツがフッターに隠れないよう余白を確保 */
#waku-app {
  padding-bottom: 140px;
}

#waku-app .fixed-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000;

  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.10);
}

#waku-app .fixed-footer .button-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

#waku-app .fixed-footer .top-row {
  margin-bottom: 10px;
}

/* 2ボタン + 3ボタン（モバイルでは均等幅） */
#waku-app .fixed-footer .button-row > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
}

@media (min-width: 768px) {
  #waku-app .fixed-footer {
    padding: 12px 16px;
  }
  #waku-app .fixed-footer .button-row > button {
    flex: 0 0 auto;
    min-width: 160px;
  }
  #waku-app .fixed-footer .bottom-row {
    justify-content: center;
  }
}

/* =========================================================
   Fixed Footer: keep buttons visible / ordered (regression guard)
   - ensure Summary button is not accidentally hidden
========================================================= */
#waku-app .fixed-footer #toggleSummaryBtn{
  display: inline-flex !important;
}


/* ===== v3.7.1 New Method Unified: ヘッダー保存/リセット ===== */
#estimateSettingsContainer .panel-header{
  display:flex;
  align-items:center;
  gap:10px;
}
#estimateSettingsContainer .settings-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
#estimateSettingsContainer .settings-header-actions .btn{
  white-space:nowrap;
}

/* ========================================================================
   v3.7.3: パネル初期表示の安全ガード + 3カラム(レイアウト)フォールバック
   - UI用CSSが読み込めていない場合でも「設定/サマリー」が本文に露出しないようにする
   - DevTools を右ドックしても3カラムが崩れにくいよう、ブレークポイントを少し緩和
======================================================================== */

/* Backdrop: デフォルトは確実に非表示（JSでも display を制御） */
#settingsBackdrop,
#summaryBackdrop {
  display: none;
}
#settingsBackdrop.active,
#summaryBackdrop.active {
  display: block;
}

/* Summary panel (fallback) */
#settingsSummaryContainer {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 70vw;
  max-width: 760px;
  height: 100vh;
  overflow: auto;
  background: #fff;
  z-index: 99995;
  transition: right 0.25s ease;
  display: none;
}
#settingsSummaryContainer.open {
  right: 0;
  display: block;
}

/* 3カラム: bodyクラスで適用（#waku-app が欠けても効く） */
body.page-test-waku .app-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 18px;
  align-items: start;
}
/* 1100pxだとDevTools右ドック時に1カラムへ落ちやすいので、900pxに緩和 */
@media (max-width: 900px) {
  body.page-test-waku .app-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   v49 (2026-01-22): Footer buttons UX
   - PC(>=901px): 6 buttons in one horizontal row
     (download buttons on the left, summary/calc/settings on the right)
   - Mobile(<901px): keep the existing 2-row layout
   - Also center text vertically/horizontally (Summary button was off)
========================================================= */

/* Center text like other buttons (fix: Summary button alignment) */
#waku-app .fixed-footer .button-row > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* PC layout: 1 row */
@media (min-width: 901px) {
  #waku-app .fixed-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Remove the vertical gap between rows on PC */
  #waku-app .fixed-footer .top-row {
    margin-bottom: 0 !important;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  #waku-app .fixed-footer .bottom-row {
    flex: 0 0 auto;
    justify-content: flex-end !important;
  }

  /* Prevent internal wrapping; keep buttons in a single line of groups */
  #waku-app .fixed-footer .button-row {
    flex-wrap: nowrap;
  }

  /* Allow download buttons to shrink to fit (avoid overflow on narrow desktop) */
  #waku-app .fixed-footer .top-row > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Keep right-side buttons readable */
  #waku-app .fixed-footer .bottom-row > button {
    flex: 0 0 auto !important;
    min-width: 120px;
  }
}


/* =========================================================
   v51 (2026-01-22): Footer buttons equal width + no wrap on PC
   - PC(>=901px): 6 buttons all equal width
   - If text would wrap, do NOT wrap; shrink font size instead
   - Mobile(<901px): keep existing 2-row layout
========================================================= */
@media (min-width: 901px) {
  /* 3 buttons + 3 buttons -> each group takes half of the footer */
  #waku-app .fixed-footer .top-row,
  #waku-app .fixed-footer .bottom-row {
    flex: 1 1 0 !important;
  }

  /* All 6 buttons should be equal */
  #waku-app .fixed-footer .top-row > button,
  #waku-app .fixed-footer .bottom-row > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Prevent wrapping; shrink font to fit */
  #waku-app .fixed-footer .button-row > button {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(11px, 1.15vw, 14px) !important;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* =========================================================
   v52 (2026-01-23): fieldset 角丸（足場数量計算カード）
   - 既存 selector（body.page-test-waku .app-grid ...）が環境により一致せず、
     角丸が反映されないケースがありました。
   - fieldset 自体に「角丸のみ」を強制します（安全・最小変更）。
   - Shadow DOM / Light DOM どちらでも効くように、スコープを限定しすぎません。
========================================================= */

#waku-app fieldset,
fieldset {
  border-radius: 14px !important;
}

/* legend は見た目だけ軽く整える（角が欠ける環境の保険） */
#waku-app legend,
legend {
  padding-left: 6px;
  padding-right: 6px;
}

/* =========================================================
   v61 (2026-01-24): Footer button colors (balanced theme)
   - Too many saturated colors looked unbalanced.
   - Group by purpose:
     * Top row (downloads): Blue
     * Bottom row (actions): Slate
   - Keep strong contrast and clear hover/focus states.
========================================================= */

#waku-app .fixed-footer .button-row > button,
#waku-app .fixed-footer .button-row > a {
  border: 1px solid transparent !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Downloads (材料数 / 見積 / 請求) */
#waku-app .fixed-footer .top-row > button,
#waku-app .fixed-footer .top-row > a {
  background: #1d4ed8 !important;   /* blue-700 */
  border-color: #1d4ed8 !important;
}
#waku-app .fixed-footer .top-row > button:hover,
#waku-app .fixed-footer .top-row > a:hover {
  background: #1e40af !important;   /* blue-800 */
  border-color: #1e40af !important;
}
#waku-app .fixed-footer .top-row > button:active,
#waku-app .fixed-footer .top-row > a:active {
  background: #1e3a8a !important;   /* blue-900 */
  border-color: #1e3a8a !important;
}

/* Actions (サマリー / 計算 / 設定) */
#waku-app .fixed-footer .bottom-row > button,
#waku-app .fixed-footer .bottom-row > a {
  background: #334155 !important;   /* slate-700 */
  border-color: #334155 !important;
}
#waku-app .fixed-footer .bottom-row > button:hover,
#waku-app .fixed-footer .bottom-row > a:hover {
  background: #1f2937 !important;   /* slate-800 */
  border-color: #1f2937 !important;
}
#waku-app .fixed-footer .bottom-row > button:active,
#waku-app .fixed-footer .bottom-row > a:active {
  background: #0f172a !important;   /* slate-900 */
  border-color: #0f172a !important;
}

/* Focus ring (keyboard UX) */
#waku-app .fixed-footer .button-row > button:focus-visible,
#waku-app .fixed-footer .button-row > a:focus-visible {
  outline: 3px solid rgba(59,130,246,0.45) !important;
  outline-offset: 2px;
}

/* Disabled states */
#waku-app .fixed-footer .button-row > button:disabled,
#waku-app .fixed-footer .button-row > a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================================
   v62 (2026-01-24): Footer buttons hover/tap scale
   - Mouse: hover -> slightly scale up
   - Touch panel: active (tap) -> slightly scale up
   - Keep layout stable (use transform) + bring hovered button above neighbors
   - Respect prefers-reduced-motion
========================================================= */

/* Allow scaled buttons to overflow naturally */
#waku-app .fixed-footer,
#waku-app .fixed-footer .button-row {
  overflow: visible;
}

#waku-app .fixed-footer .button-row > button,
#waku-app .fixed-footer .button-row > a {
  position: relative;
  transform: translateZ(0);
  transform-origin: center;
  will-change: transform;
  transition: transform .14s ease, box-shadow .14s ease;
}

/* Mouse hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  #waku-app .fixed-footer .button-row > button:hover,
  #waku-app .fixed-footer .button-row > a:hover {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  }
}

/* Touch / coarse pointer */
@media (hover: none), (pointer: coarse) {
  #waku-app .fixed-footer .button-row > button:active,
  #waku-app .fixed-footer .button-row > a:active {
    transform: scale(1.04);
    z-index: 2;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  #waku-app .fixed-footer .button-row > button,
  #waku-app .fixed-footer .button-row > a {
    transition: none !important;
  }
  #waku-app .fixed-footer .button-row > button:hover,
  #waku-app .fixed-footer .button-row > a:hover,
  #waku-app .fixed-footer .button-row > button:active,
  #waku-app .fixed-footer .button-row > a:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* =======================================================
   v66 (2026-01-26): Settings panel - avoid header overlap in expanded cards
   -------------------------------------------------------
   - Root cause:
     Expanded cards (.settings-card.expanded) are position:fixed and can cover
     the header area. If the header is behind (z-index / DOM order / JS header
     generation failure), the header becomes invisible and only an empty gap
     remains when we use padding-top.

   - Fix (pinpoint):
     Do NOT use padding-top to reserve space.
     Instead, shift the expanded card DOWN by the header safe space so the
     header area is not covered in the first place.

   - The safe space can be dynamically updated by JS
     (asiba-settings-panel-header-safe-space.js) via --panelHeaderSafeSpace.
   ======================================================= */

#estimateSettingsContainer,
#settingsSummaryContainer {
  --panelHeaderSafeSpace: 76px;
}

#estimateSettingsContainer .settings-card.expanded,
#settingsSummaryContainer .settings-card.expanded {
  top: var(--panelHeaderSafeSpace) !important;
  height: calc(100vh - var(--panelHeaderSafeSpace)) !important;

  /* Keep content flush; safe space is handled by top/height above. */
  padding-top: 0 !important;
  box-sizing: border-box !important;
}

/* ===============================
   v68: Mobile portrait full-width cards
   - Prevent horizontal swipe/overflow on main 3 cards
   - Ensure fieldset/table can shrink within viewport
   =============================== */
@media (max-width: 900px) {
  /* Force single-column grid (override any horizontal-scroll/flex styles) */
  body.page-test-waku #waku-app .app-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Grid items must be allowed to shrink */
  body.page-test-waku #waku-app .app-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Cards themselves should never exceed viewport width */
  body.page-test-waku #waku-app .app-grid .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* fieldset has a browser default "min-inline-size: min-content" which can cause overflow */
  body.page-test-waku #waku-app .app-grid fieldset {
    min-inline-size: 0 !important;
    max-width: 100% !important;
  }
  body.page-test-waku #waku-app .app-grid legend {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Table-like content: force it to shrink & wrap instead of expanding viewport */
  body.page-test-waku #waku-app .app-grid table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }
  body.page-test-waku #waku-app .app-grid th,
  body.page-test-waku #waku-app .app-grid td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Existing wrapper sometimes enables horizontal scrolling; disable it on mobile */
  body.page-test-waku #waku-app .app-grid .results-table-wrapper {
    overflow-x: hidden !important;
  }
}

/* =========================
   v69: Mobile full-width guarantee (no body class dependency)
   - Fix: iPhone縦で「足場数量計算 / 計算結果 / 費用計算結果」の3カードが横スワイプになり、
          画面幅に収まらない問題の最終ガード。
   - 既存CSSやテーマ側の上書きに負けないよう、#waku-app を起点に !important で固定します。
   ========================= */
@media (max-width: 900px) {
  #waku-app .app-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #waku-app .app-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #waku-app .app-grid .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #waku-app .app-grid fieldset {
    min-inline-size: 0;
    min-width: 0;
    max-width: 100%;
  }
  #waku-app .app-grid table {
    width: 100%;
    table-layout: fixed;
  }
  #waku-app .app-grid th,
  #waku-app .app-grid td {
    word-break: break-word;
  }
  /* iOSで入力欄が横にはみ出すのを防ぐ */
  #waku-app input,
  #waku-app select,
  #waku-app textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* =========================
   v71: 足場数量計算カードの改行（モバイル）
   ユーザー指示：
   - 「足場のタイプ選択」内を
     ・組み立て内容 / ・足場幅 / ・手摺仕様 それぞれ1行ずつに
   - 「スパン数の入力」も1項目ずつ見やすく改行

   ※ 既存ロジック/構造を壊さないため、対象IDのみをピンポイントで上書きします。
   ========================= */
@media (max-width: 900px) {
  /* ---- 足場のタイプ選択 ---- */
  #scaffoldForm #type,
  #scaffoldForm #width,
  #scaffoldForm #handrailSpec {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 0.45em 0;
  }

  /* label が for を持つ場合は確実に1行へ */
  #scaffoldForm label[for="type"],
  #scaffoldForm label[for="width"],
  #scaffoldForm label[for="handrailSpec"] {
    display: block !important;
    width: 100% !important;
    margin: 0.35em 0 0.15em 0;
  }

  /* ---- スパン数の入力 ---- */
  #scaffoldForm #spans1800,
  #scaffoldForm #spans1500,
  #scaffoldForm #spans1200,
  #scaffoldForm #spans900,
  #scaffoldForm #spans600 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 0.45em 0;
  }
  #scaffoldForm label[for="spans1800"],
  #scaffoldForm label[for="spans1500"],
  #scaffoldForm label[for="spans1200"],
  #scaffoldForm label[for="spans900"],
  #scaffoldForm label[for="spans600"] {
    display: block !important;
    width: 100% !important;
    margin: 0.35em 0 0.15em 0;
  }

  /* 親が flex の場合でも折り返して1行化できるようにする（安全な保険） */
  #scaffoldForm #type,
  #scaffoldForm #width,
  #scaffoldForm #handrailSpec,
  #scaffoldForm #spans1800,
  #scaffoldForm #spans1500,
  #scaffoldForm #spans1200,
  #scaffoldForm #spans900,
  #scaffoldForm #spans600,
  #scaffoldForm label[for="type"],
  #scaffoldForm label[for="width"],
  #scaffoldForm label[for="handrailSpec"],
  #scaffoldForm label[for="spans1800"],
  #scaffoldForm label[for="spans1500"],
  #scaffoldForm label[for="spans1200"],
  #scaffoldForm label[for="spans900"],
  #scaffoldForm label[for="spans600"] {
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
}

/* ==================================================
   足場数量計算：壁つなぎ（モバイルで項目ごとに改行）
   - 壁つなぎの長さ
   - 水平ピッチ
   - 垂直ピッチ
   ================================================== */
@media (max-width: 900px) {
  /* select は全幅で縦積み */
  #scaffoldForm #kabeTsunagiLength,
  #scaffoldForm #kabeTsunagiHorizontal,
  #scaffoldForm #kabeTsunagiVertical {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0.35rem 0 0.85rem 0 !important;
  }

  /* label も 1行占有 */
  #scaffoldForm label[for="kabeTsunagiLength"],
  #scaffoldForm label[for="kabeTsunagiHorizontal"],
  #scaffoldForm label[for="kabeTsunagiVertical"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.6rem 0 0.2rem 0 !important;
  }

  /* 親が flex の場合でも確実に改行する */
  #scaffoldForm #kabeTsunagiLength,
  #scaffoldForm #kabeTsunagiHorizontal,
  #scaffoldForm #kabeTsunagiVertical,
  #scaffoldForm label[for="kabeTsunagiLength"],
  #scaffoldForm label[for="kabeTsunagiHorizontal"],
  #scaffoldForm label[for="kabeTsunagiVertical"] {
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
}

/* ==================================================
   v72: パイプ / 外部養生（モバイルで項目を改行して縦並び）
   - パイプ：根がらみ / 水平つなぎ / 頭つなぎ
   - 外部養生：タイプ / 垂直ネット妻側養生 / 垂直ネットメーカー / 垂直ネット色
   ================================================== */
@media (max-width: 900px) {
  /* input + label を強制的に1行(100%)にして縦並びにする */
  #scaffoldForm label[for="negarami"],
  #scaffoldForm label[for="suheiTsunagiOption"],
  #scaffoldForm label[for="atamaTsunagi"],
  #scaffoldForm label[for="gaibuYoujou"],
  #scaffoldForm label[for="meshSheetSide"],
  #scaffoldForm label[for="verticalNetSide"],
  #scaffoldForm label[for="verticalNetMaker"],
  #scaffoldForm label[for="verticalNetColor"],
  #scaffoldForm #negarami,
  #scaffoldForm #suheiTsunagiOption,
  #scaffoldForm #atamaTsunagi,
  #scaffoldForm #gaibuYoujou,
  #scaffoldForm #meshSheetSide,
  #scaffoldForm #verticalNetSide,
  #scaffoldForm #verticalNetMaker,
  #scaffoldForm #verticalNetColor {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  #scaffoldForm label[for="negarami"],
  #scaffoldForm label[for="suheiTsunagiOption"],
  #scaffoldForm label[for="atamaTsunagi"],
  #scaffoldForm label[for="gaibuYoujou"],
  #scaffoldForm label[for="meshSheetSide"],
  #scaffoldForm label[for="verticalNetSide"],
  #scaffoldForm label[for="verticalNetMaker"],
  #scaffoldForm label[for="verticalNetColor"] {
    margin: 0.6rem 0 0.2rem 0 !important;
  }

  #scaffoldForm #negarami,
  #scaffoldForm #suheiTsunagiOption,
  #scaffoldForm #atamaTsunagi,
  #scaffoldForm #gaibuYoujou,
  #scaffoldForm #meshSheetSide,
  #scaffoldForm #verticalNetSide,
  #scaffoldForm #verticalNetMaker,
  #scaffoldForm #verticalNetColor {
    width: 100% !important;
    margin: 0.35rem 0 0.85rem 0 !important;
  }

  /* v73: モバイル縦型でフッターボタンが1段になる場合の保険 */
  #waku-app .fixed-footer {
    display: block !important;
  }
}

/* =========================================================
   Mobile (<=768px): 設定パネル内テーブルの列幅調整
   - 個別の材料費（data-panel="materials"）: 基本単価/日割単価の列幅を均等に
   - 材料費単価（data-panel="materialUnitPrices"）: 項目40% + 基本/日割を均等 + 出力は最小
   - ダウンロード設定（data-panel="downloadSettings"）: シート選択テーブルを均等割
   ========================================================= */
@media (max-width: 768px) {
  /* 個別の材料費（※カード識別は data-panel="materials"） */
  #estimateSettingsContainer .settings-card[data-panel="materials"] table.asiba-table,
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table th:nth-child(1),
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table td:nth-child(1) {
    width: 40% !important;
  }
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table th:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table td:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table th:nth-child(3),
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table td:nth-child(3) {
    width: 30% !important;
  }

  /* 材料費単価（data-panel="materialUnitPrices"） */
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] table.asiba-table,
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table th:nth-child(1),
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table td:nth-child(1) {
    width: 40% !important;
  }
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table th:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table td:nth-child(2) {
    width: 14% !important; /* 出力（チェック） */
    white-space: nowrap;
    text-align: center;
  }
#estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table th:nth-child(3),
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table td:nth-child(3),
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table th:nth-child(4),
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table td:nth-child(4) {
    width: 23% !important; /* 基本単価 / 日割単価（均等） */
    white-space: nowrap;
    text-align: center;
  }
/* ダウンロード設定（data-panel="downloadSettings"）のシート選択テーブルを均等割 */
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] table.asiba-dl-table,
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table,
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  /* ラベル列を少し狭め、選択（ラジオ/チェック）列を広げて読みやすく */
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table th:nth-child(1),
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table td:nth-child(1),
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table th:nth-child(1),
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table td:nth-child(1) {
    width: 38% !important;
  }
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table th:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table td:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table th:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table td:nth-child(2) {
    width: 62% !important;
  }
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table td:nth-child(2),
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table td:nth-child(2) {
    text-align: left !important;
  }
  /* iPhone縦で「ラジオ/チェック + 文言」が崩れやすいので、横並び＋折り返しに統一 */
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table label.inline,
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table label.inline {
    display: flex !important;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
  }
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table label.inline input[type="radio"],
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table label.inline input[type="checkbox"],
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table label.inline input[type="radio"],
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table label.inline input[type="checkbox"] {
    flex: 0 0 auto;
  }
  #estimateSettingsContainer .settings-card[data-panel="downloadSettings"] .asiba-dl-table label.inline .small,
  #estimateSettingsContainer .settings-card[data-panel="downloadSheets"] .asiba-dl-table label.inline .small {
    display: inline;
  }

  /* iOS Safari 等で input が列幅を押し広げるのを抑制 */
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table input,
  #estimateSettingsContainer .settings-card[data-panel="materials"] .asiba-table select,
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table input,
  #estimateSettingsContainer .settings-card[data-panel="materialUnitPrices"] .asiba-table select {
    min-width: 0 !important;
  }
}
/* =========================================================
   Mobile portrait: Settings panel card header fix + footer safe spacing
   - カードヘッダー(legend)を常時見えるようにする
   - 固定フッターでフォーム/テキストが隠れないよう余白を確保
========================================================= */

@media (max-width: 767px) and (orientation: portrait) {

  /* 1) 設定パネル自体が固定フッターに被らないよう、下端を余分に確保
     フッターが2段になる前提（--footer-h × 2）＋ bottom:12px の分も加味 */
  #estimateSettingsContainer,
  #settingsSummaryContainer {
    bottom: calc(var(--footer-h) * 2 + 12px + env(safe-area-inset-bottom));
  }

  /* 2) パネル内スクロールの末尾に余白を追加（最後のフォームが隠れない） */
  aside#estimateSettingsContainer .panel-body {
    padding-bottom: calc(var(--footer-h) * 2 + 28px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--footer-h) * 2 + 28px + env(safe-area-inset-bottom));
  }

  /* 3) 各カード（fieldset）の下端にも余白を確保（カード単位で隠れ防止） */
  aside#estimateSettingsContainer fieldset {
    padding-bottom: calc(var(--footer-h) + 18px);
  }

  /* 4) カードヘッダー（legend）が “消える/隠れる” 対策
     - sticky で常に表示
     - z-index と背景で「重なって見えなくなる」を防止
     - display:block にしてSafariでも安定させる */
  aside#estimateSettingsContainer fieldset legend {
    display: block;
    width: 100%;

    position: static;
    top: 0;

    z-index: 20;
    background: #fff;

    padding: 10px 0 8px;
    margin: 0 0 10px;

    border-bottom: 1px solid rgba(0,0,0,.08);
  }
}
/*
 * ASIBA Settings Panel Mobile Spacing Fix
 * - Card header (legend) height reserved
 * - Extra bottom padding to avoid fixed footer + browser bottom UI
 *
 * Paste this at the END of your CSS (e.g. ver3.5.0-waku-settings-panel-card-layout.css)
 */

@media (max-width: 767px) and (orientation: portrait) {

  :root{
    /* Card header height you want to reserve */
    --asiba-settings-card-header-min-h: 44px;

    /* Extra "browser bottom bar" safety gap (Safari address/tool bar etc) */
    --asiba-browser-bottom-ui-gap: 56px;
  }

  /* Safe area: notch / home indicator */
  #estimateSettingsContainer{
    top: env(safe-area-inset-top);
  }

  /* Panel body: give some breathing room at top, and plenty at bottom */
  #estimateSettingsContainer .panel-body{
    padding-top: 12px !important;
    padding-bottom: calc(var(--footer-h) * 2 + 16px + var(--asiba-browser-bottom-ui-gap) + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--footer-h) * 2 + 16px + var(--asiba-browser-bottom-ui-gap) + env(safe-area-inset-bottom));
  }

  /* Top-level cards only (avoid nested fieldset collisions in "弊社情報") */
  #estimateSettingsContainer .panel-body > fieldset{
    /* modest inner bottom gap so the last rows never touch the panel edge */
    padding-bottom: 24px;
  }

  /* Ensure card header is always visible and has a reserved height */
  #estimateSettingsContainer .panel-body > fieldset > legend{
    display: flex !important;
    align-items: center;
    min-height: var(--asiba-settings-card-header-min-h);
    padding: 10px 0 8px !important;
    margin: 0 0 12px 0 !important;

    /* Cancel any previous experimental sticky/absolute rules */
    position: static !important;
    top: auto !important;

    /* Safety: don't let it be hidden by other rules */
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Nested legends (e.g. ダウンロードに含めるシート) should remain normal */
  #estimateSettingsContainer .panel-body > fieldset fieldset > legend{
    display: block !important;
    min-height: 0;
    padding: 6px 0 !important;
    margin: 10px 0 8px !important;
    position: static !important;
  }
}