/* ==================================================================== *
 * 作業画面（2026-10-21 承認済みカンプに沿って、比較画面と編集画面を 1 つにした）
 * PC（900px〜）: 左に大きな完成見本、右に設定（商品 → 本体の色 → タブ → 見積もり相談）。
 *   画面の高さに収め、右の設定だけがスクロールする（ページと設定のスクロールが二重にならない）。
 * スマホ・タブレット縦（〜899px）: 上に完成見本（固定）、その下にタブ（固定）、設定はページのスクロール、
 *   画面の下に「比較に追加」「残した案」「見積もり相談」（固定）。
 * 色は styles.css の --ink（黒）・--paper（暖かい薄グレー）・--accent（ライム）を使う。
 * ==================================================================== */

:root {
  --header-h: 56px;
  --ws-frame-bg: #e9e8e2;
  --ws-line: #dcdbd4;
  --ws-soft: #f6f5f1;
  --ws-focus: #9fd400;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[data-mobile-only] { display: none !important; }

/* ---------- ヘッダー（ブランド・進み具合・元に戻す） ---------- */

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-h);
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.site-header .brand { justify-self: start; font-size: 19px; }

.site-header .step-nav {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.site-header .step-nav ol {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  gap: 0;
  width: auto;
}

.site-header .step-nav li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  min-height: 0;
  border: 0;
  background: none;
  color: #9a9d9f;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.site-header .step-nav li + li { border-left: 1px solid #3b3e40; }
.site-header .step-nav li.is-current { color: #fff; }
.site-header .step-nav li::before, .site-header .step-nav li::after { content: none; }

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #55595b;
}

.site-header .step-nav li.is-current .step-dot { background: var(--accent); }
.site-header .step-nav li.is-done .step-dot { background: #b8bbbd; }

.header-history {
  justify-self: end;
  position: static;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.header-history .history-button {
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #e3e5e6;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}

.header-history .history-button:hover:not(:disabled) { background: #26292b; }
.header-history .history-button:disabled { color: #5d6163; cursor: not-allowed; opacity: 1; border: 0; }
.header-history .history-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- 作業画面の枠 ---------- */

body[data-view="compare"] main {
  width: 100%;
  max-width: none;
  padding: 0;
}

.ws-layout { min-width: 0; }

.ws-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

.ws-stage-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0; }

.ws-stage-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 2 つの切り替え（服全体／プリントを拡大・正面／側面）。押せるもの：枠つき、選択中：黒 */
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
}

.seg:empty { display: none; }

.seg button {
  min-height: 36px;
  min-width: 64px;
  padding: 0 14px;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.seg button:hover { border-color: #8e9293; }
.seg button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg button:focus-visible { outline: 2px solid #1a6ee0; outline-offset: 2px; }

.ws-icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ws-line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.ws-icon-button svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ws-icon-button:hover { border-color: #8e9293; }

.ws-figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }

/* 見本の枠。中の正方形（写真＋SVG）を枠に収める（服全体が袖・裾まで入る） */
.ws-frame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  container-type: size;
  display: grid;
  place-items: center;
  background: var(--ws-frame-bg);
}

.ws-frame .mockup-stack {
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  aspect-ratio: auto;
  transition: transform .28s ease;
  transform-origin: 50% var(--print-origin-y, 41%);
}

/* 部位の商品は写真の背景が白なので、枠も白にそろえる */
body[data-product-kind="zones"] .ws-frame { background: #fff; box-shadow: inset 0 0 0 1px var(--ws-line); }

/* プリントを拡大（文字の商品だけ）。拡大の中心はプリントの中心 */
.ws-frame .mockup-stack.is-print-zoom { transform: scale(2.15); }

@media (prefers-reduced-motion: reduce) {
  .ws-frame .mockup-stack { transition: none; }
}

/* 入力・色の対象を囲む細い枠（見本の上の HTML。送る画像には入らない） */
.target-box {
  position: absolute;
  z-index: 6;
  border: 2px dashed #b9ef00;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(16, 18, 19, .55), inset 0 0 0 1px rgba(16, 18, 19, .35);
  pointer-events: none;
}

.target-box[hidden] { display: none; }

.ws-caption {
  margin: 8px 0 0;
  color: #6d7173;
  font-size: 13px;
  font-weight: 600;
}

.ws-figure .view-note { margin: 6px 0 0; }

/* 比較に追加（補助の操作。主ボタンは見積もり相談） */
.ws-keep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ws-keep-button {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.ws-keep-button.is-kept { border-style: dashed; color: #4a4e50; }

/* ---------- 比較に残した組み合わせ（PC：見本の下） ---------- */

.ws .candidate-bar {
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--ws-line);
  background: none;
  box-shadow: none;
}

.ws .candidate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws .candidate-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.ws .candidate-count { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ws .candidate-head .btn { min-height: 40px; padding: 8px 16px; font-size: 13px; border-radius: 4px; }
.ws .candidate-head .btn[hidden] { display: none; }
.ws .candidate-empty { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.ws .candidate-empty[hidden] { display: none; }

.ws .candidate-list {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ws .candidate-card {
  flex: 0 0 auto;
  width: 300px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--ws-line);
  background: #fff;
}

.candidate-thumb {
  aspect-ratio: 1;
  background: var(--ws-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
}

.candidate-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.candidate-info { min-width: 0; display: grid; align-content: start; gap: 4px; }
.candidate-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.candidate-sub { margin: 0; color: #6d7173; font-size: 12px; }

.candidate-letter {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.candidate-actions { display: flex; gap: 14px; margin-top: 4px; }

.link-button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover { color: #3b6400; }
.link-button[hidden] { display: none; }

.ws .candidate-notice { margin: 8px 0 0; font-size: 13px; }
.ws .candidate-notice[hidden] { display: none; }

/* ---------- 設定（右） ---------- */

.ws-panel { min-width: 0; display: flex; flex-direction: column; background: #fff; }

.ws-tabs { display: flex; gap: 6px; }

.ws-tab {
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ws-tab[hidden] { display: none; }
.ws-tab:hover { border-color: #8e9293; }
.ws-tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 -4px 0 var(--accent);
}
.ws-tab:focus-visible { outline: 2px solid #1a6ee0; outline-offset: 2px; }
.tab-short { display: none; }

.ws .tab-panel { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.ws .tab-panel.is-active { display: block; }
.ws-field { display: grid; gap: 8px; margin: 0 0 16px; min-width: 0; }
.ws-field > label, .ws-details label { display: grid; gap: 8px; }

.ws-label { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.ws-label-value { margin-left: 8px; font-size: 14px; font-weight: 800; }
.ws-label-count { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.ws-panel-title { margin-bottom: 10px; }

.ws-panel input[type="text"],
.ws-panel select {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid #cfcfc8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
}

.ws-panel input[type="text"]:focus,
.ws-panel select:focus {
  outline: none;
  border-color: var(--ws-focus);
  box-shadow: 0 0 0 3px rgba(185, 239, 0, .45);
}

/* 商品（写真つきのセレクト） */
.product-select {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 8px;
  border: 1px solid #cfcfc8;
  border-radius: 4px;
  background: #fff;
}

.product-select:focus-within { border-color: var(--ws-focus); box-shadow: 0 0 0 3px rgba(185, 239, 0, .45); }
.product-thumb { flex: none; width: 60px; height: 60px; object-fit: contain; background: var(--ws-soft); }
.ws-panel .product-select select { border: 0; box-shadow: none; min-height: 56px; padding: 6px 8px; font-size: 17px; }

/* 本体の色は 11 色を 1 段に並べられる大きさ */
.ws .body-color-grid[data-grid] { gap: 6px 4px; }
.ws .body-color-grid[data-grid] .color-button { width: 39px; height: 39px; min-width: 39px; min-height: 39px; }
.ws .body-color-grid[data-grid] .color-button .swatch { width: 32px; height: 32px; }

/* 色の丸（本体の色・印刷色・部位の色）。選択中は 色名（見出し）＋ チェック ＋ 枠 で示す（色だけに頼らない） */
.ws .body-color-grid,
.ws .print-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
}

.ws .body-color-grid .color-button,
.ws .print-color-grid .color-button {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.ws .color-button .color-label { display: none; }

.ws .color-button .swatch {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 50%;
}

.ws .color-button:hover .swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #9da1a3; }

.ws .color-button[aria-checked="true"] { background: transparent; box-shadow: none; border: 0; }
.ws .color-button[aria-checked="true"] .swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent), 0 0 0 6px var(--ink); }

.ws .color-button[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ws .color-button:focus-visible { outline: 2px solid #1a6ee0; outline-offset: 4px; }

.ws .color-role { margin: 0 0 18px; }
.ws .color-role .ws-label { margin-bottom: 10px; }
.ws .color-role-note { margin: 8px 0 0; color: #6d7173; font-size: 12px; line-height: 1.6; white-space: pre-line; }
.ws .color-role-note:empty { display: none; }

.ws-product-hint { margin: 4px 0 0; }
.ws-next { margin-top: 12px; justify-self: end; font-size: 15px; }

/* 知らせ（商品を変えたとき・判読しにくい配色） */
.ws-notice,
.ws-contrast {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid #d39b00;
  background: #fff7dc;
  color: #4d3a00;
  font-size: 13px;
  line-height: 1.6;
}

.ws-notice[hidden], .ws-contrast[hidden] { display: none; }

.ws .field-hint { margin: 10px 0 0; color: #6d7173; font-size: 12px; line-height: 1.6; }
.ws .field-error { margin: -8px 0 12px; }

/* 年度・枠線（ふだんは閉じておく） */
.ws-details { margin: 4px 0 18px; border: 1px solid var(--ws-line); border-radius: 4px; }
.ws-details summary {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}
.ws-details summary::-webkit-details-marker { display: none; }
.ws-details summary::after { content: "⌄"; margin-left: 4px; font-size: 18px; line-height: 1; transform: translateY(-3px); }
.ws-details[open] summary::after { transform: rotate(180deg) translateY(-3px); }
.ws-details-value { margin-left: auto; color: #6d7173; font-size: 13px; font-weight: 600; }
.ws-details-body { padding: 4px 14px 14px; display: grid; gap: 14px; }
.ws-details .field-row { display: flex; gap: 12px; margin: 0; }
.ws-details .field-row > label { flex: 1 1 0; min-width: 0; }
.ws-details label[hidden] { display: none; }

/* ロゴ */
.ws .logo-field { margin: 0; }

/* おすすめの配色 */
.ws .preset-block { margin: 6px 0 18px; padding-top: 16px; border-top: 1px solid var(--ws-line); }

/* 見積もり相談（主ボタン） */
.ws-action { position: relative; z-index: 8; display: grid; gap: 6px; margin: 0; padding: 14px 0 12px; background: #fff; }

.btn.ws-cta {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

.btn.ws-cta:hover:not(:disabled) { background: #c6ef1c; color: var(--ink); }
.btn.ws-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ws-cta-note { margin: 0; color: #6d7173; font-size: 12px; text-align: center; }
.ws-action-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* 比較画像の窓は、比べる窓より前に出す（比べる窓から開くため） */
#candidateImageModal { z-index: 45; }



/* スマホの下のバーの知らせ（比較に追加・上限など。一覧が見えないため） */
.ws-mobile-notice { margin: 0; font-size: 12px; font-weight: 700; color: #3b4f00; }
.ws-mobile-notice[hidden] { display: none; }
@media (min-width: 900px) { .ws-mobile-notice { display: none !important; } }
.ws-mobile-notice .link-button { font-size: 12px; }

/* ---------- 比べる（窓） ---------- */

.modal.compare-modal { width: min(1180px, 100%); }
.compare-modal mark { padding: 0 4px; background: var(--accent); color: var(--ink); font-weight: 800; }
.compare-body { padding: 12px; overflow-x: auto; }

.compare-grid { overflow-x: auto; }

.compare-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  background: #fff;
  font-size: 13px;
}

.compare-table th, .compare-table td { padding: 8px 10px; border-bottom: 1px solid #eeede8; text-align: left; vertical-align: middle; }
.compare-table thead th { vertical-align: top; }
.compare-table .compare-column { width: 200px; min-width: 200px; max-width: 200px; }
.compare-table .compare-column .candidate-title { margin-bottom: 8px; white-space: nowrap; }
.compare-title-text { overflow: hidden; text-overflow: ellipsis; }
/* 画像は全案同じ大きさ（同じ縮尺で見比べる） */
.compare-table .candidate-thumb { width: 180px; height: 180px; }
.compare-table .compare-column .candidate-title { max-width: 180px; }
.compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 132px;
  background: #fff;
  color: #4a4e50;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.compare-table tbody td { font-weight: 700; overflow-wrap: anywhere; }
.compare-table tbody td .color-dot { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.compare-table .compare-corner { position: sticky; left: 0; z-index: 1; background: #fff; }
.compare-table tr.is-diff th, .compare-table tr.is-diff td { background: #f5ffd6; }
.compare-table tfoot td { border-bottom: 0; }
.compare-actions { display: flex; gap: 6px; }
.compare-actions .btn { flex: 1 1 0; min-height: 40px; padding: 6px 8px; font-size: 13px; border-radius: 4px; white-space: nowrap; }
.compare-modal .candidate-notice { margin: 10px 0 0; font-size: 13px; }
.compare-modal .candidate-notice[hidden] { display: none; }

/* ==================================================================== *
 * PC（900px〜）：画面の高さに収める 2 列
 * ==================================================================== */

@media (min-width: 900px) {
  .ws-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(380px, 37vw, 560px);
    height: calc(100dvh - var(--header-h));
  }

  body.is-test-mode .ws-layout { height: calc(100dvh - var(--header-h) - 38px); }

  .ws-preview-col {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ws-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .ws-figure { flex: 1 1 auto; }
  .ws-frame { flex: 1 1 auto; min-height: 300px; }

  .ws-panel {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 24px 0;
    border-left: 1px solid var(--ws-line);
  }

  /* PC では「商品・本体の色」を常に出し、タブの上に置く（並びは app.js の placeProductPanel が DOM で入れ替える。Tab の順も見た目どおり） */
  .ws .tab-panel.ws-product { display: block; margin-bottom: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--ws-line); }
  .ws-tabs { margin: 16px 0 16px; }

  .ws-action { position: sticky; bottom: 0; margin-top: auto; padding-top: 16px; box-shadow: 0 -12px 16px -12px rgba(16, 18, 19, .18); }
}

/* 横幅が広い PC は見本をさらに広く */
@media (min-width: 1500px) {
  .ws-layout { grid-template-columns: minmax(0, 1fr) 600px; }
}

/* 高さが足りない PC（〜640px）は、画面に収めずページのスクロールにする */
@media (min-width: 900px) and (max-height: 640px) {
  .ws-layout { height: auto; }
  .ws-preview-col, .ws-panel { overflow: visible; }
  .ws-stage { position: sticky; top: 0; }
  .ws-frame { height: 420px; flex: none; }
}

/* ==================================================================== *
 * スマホ・タブレット縦（〜899px）：上に見本・下に設定
 * ==================================================================== */

@media (max-width: 899px) {
  :root { --header-h: 52px; }

  [data-mobile-only] { display: revert !important; }
  .ws-action-sub[data-mobile-only] { display: flex !important; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 14px; }
  .site-header .step-nav { display: none; }
  .header-history .history-button { padding: 6px 8px; font-size: 13px; }

  .ws-layout { display: block; }

  .ws-preview-col { display: contents; }

  /* 見本は上に固定。高さは --edit-preview-h（画面の約 3 分の 1、app.js が決める） */
  .ws-stage {
    position: sticky;
    top: 0;
    z-index: 12;
    padding: 8px 12px 6px;
    background: #fff;
    border-bottom: 1px solid var(--ws-line);
  }

  .ws-stage-head { min-height: 0; position: absolute; top: 12px; left: 12px; right: 12px; z-index: 7; pointer-events: none; }
  .ws-stage-head > * { pointer-events: auto; }
  .ws-stage-title { display: none; }
  .ws-stage-tools { width: 100%; justify-content: center; position: relative; }
  .ws-stage-tools .ws-icon-button { position: absolute; right: 0; top: 0; width: 36px; height: 36px; }
  .seg button { min-height: 30px; min-width: 56px; padding: 0 10px; font-size: 12px; background: rgba(255, 255, 255, .92); }

  .ws-frame { height: var(--edit-preview-h, 260px); border-radius: 4px; }
  .ws-caption { margin: 4px 0 0; font-size: 12px; text-align: center; }
  .ws-figure .view-note { font-size: 11px; text-align: center; }

  /* PC 用の「比較に追加」と残した組み合わせの一覧は、下のバーと「比べる」窓へ */
  .ws-keep, .ws .candidate-bar { display: none; }

  .ws-panel { padding: 0 16px calc(var(--action-bar-h, 150px) + 24px); background: var(--paper); }

  .ws-tabs {
    position: sticky;
    top: var(--edit-sticky-h, 300px);
    z-index: 11;
    margin: 0 -16px 14px;
    padding: 8px 12px;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--ws-line);
  }

  .ws-tab { min-height: 44px; font-size: 14px; }
  .tab-long { display: none; }
  .tab-short { display: inline; }

  .ws .tab-panel.is-active { display: block; padding: 4px 0 8px; }
  .ws .tab-panel.ws-product.is-active { display: grid; }

  /* 下に固定：比較に追加・残した案・見積もり相談 */
  .ws-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ws-line);
    box-shadow: 0 -8px 18px rgba(16, 18, 19, .08);
  }

  .ws-action .ws-keep-button { flex: 1 1 auto; min-height: 42px; padding: 8px 12px; font-size: 14px; }
  .btn.ws-cta { min-height: 52px; font-size: 16px; }
  .ws-cta-note { font-size: 11px; }

  /* キーボードが出ているあいだは下のバーをしまい、入力と見本に場所を譲る */
  body.is-keyboard .ws-action { display: none; }
  body.is-keyboard .ws-panel { padding-bottom: 24px; }
  body.is-keyboard .ws-caption, body.is-keyboard .ws-stage-head { display: none; }

  .modal.compare-modal { padding: 14px; }
}

@media (max-width: 380px) {
  .ws-tab { font-size: 13px; padding: 0 4px; }
  .ws .print-color-grid, .ws .body-color-grid { gap: 6px 8px; }
}