:root {
  --ink: #101213;
  --paper: #f2f1ed;
  --panel: #ffffff;
  --muted: #777b7d;
  --line: #deded8;
  --accent: #d7ff2f;
  --danger: #9c1f1f;
  --keyboard-inset: 0px;
}

* { box-sizing: border-box; }

/*
 * 横スクロールは出さないが、`overflow-x: hidden` だと html/body がスクロールコンテナになり、
 * 子孫の position: sticky（共通設定パネル）が効かなくなって左カラム下に巨大な余白が残る。
 * `clip` はスクロールコンテナを作らないので、はみ出し防止と sticky を両立できる。
 */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
}

body.modal-open { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid #1a6ee0;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 800;
}

.skip-link:focus { left: 8px; top: 8px; }

.test-mode-banner {
  margin: 0;
  padding: 10px 16px;
  background: #3c2d00;
  color: #ffe27a;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .04em;
}

.site-header {
  height: 72px;
  padding: 0 clamp(20px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  background: var(--ink);
}

.brand {
  color: white;
  text-decoration: none;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .12em;
}

.product-name {
  color: #a7aaab;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.product-name em {
  margin-left: 8px;
  padding: 4px 6px;
  color: var(--ink);
  background: var(--accent);
  font-size: 9px;
  font-style: normal;
}

/* ---------- ステップナビ ---------- */

.step-nav {
  padding: 0 clamp(12px, 4vw, 60px);
  background: #1b1e1f;
}

.step-nav ol {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
}

.step-nav li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9ca0a1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.step-nav li span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #55595a;
  border-radius: 50%;
  font-size: 10px;
}

.step-nav li.is-done { color: #d5d8d8; }
.step-nav li.is-done span { border-color: #d5d8d8; }
.step-nav li.is-current { color: var(--accent); }
.step-nav li.is-current span { border-color: var(--accent); background: var(--accent); color: #1b1e1f; }

/* 件数入りのラベル（バッジではないので丸い枠を打ち消す） */
.step-nav li span.step-label,
.step-nav li.is-current span.step-label,
.step-nav li.is-done span.step-label {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}

/* 候補の件数バッジも丸ではなく「候補 2 件」のピル */
.step-nav li span.candidate-badge,
.step-nav li.is-current span.candidate-badge,
.step-nav li.is-done span.candidate-badge {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #1b1e1f;
  white-space: nowrap;
}

/* 0件のときは JS が hidden を付ける。上の詳細度に勝てるよう同じ強さで打ち消す */
.step-nav li span.candidate-badge[hidden],
.step-nav li.is-current span.candidate-badge[hidden],
.step-nav li.is-done span.candidate-badge[hidden] {
  display: none;
}

/* ---------- レイアウト ---------- */

main {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 96px;
}

.view[hidden] { display: none !important; }

.view h1:focus { outline: none; }

.intro, .view-head { max-width: 860px; }

.eyebrow,
.panel-heading p,
.gallery-heading p {
  margin: 0 0 12px;
  color: #676b6d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.intro h1, .view-head h1 {
  margin: 0;
  font-size: clamp(27px, 4.5vw, 58px);
  line-height: 1.1;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.intro > p:last-child, .view-lead {
  margin: 18px 0 0;
  color: #646869;
  font-size: 15px;
  line-height: 1.8;
}

.back-link { margin-bottom: 18px; }

/* ---------- ボタン ---------- */

.btn {
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, opacity .14s ease;
}

.btn.primary { color: white; background: var(--ink); }
.btn.primary:hover:not(:disabled) { background: #2c3132; }
.btn.ghost { color: var(--ink); background: white; }
.btn.ghost:hover:not(:disabled) { background: #eceae4; }

.btn:disabled {
  cursor: not-allowed;
  opacity: .55;
  border-style: dashed;
}

/* ---------- 共通設定パネル ---------- */

.workspace {
  margin-top: 42px;
  display: grid;
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.control-panel {
  position: sticky;
  top: 24px;
  /* 画面より高くなったら欄の中でスクロール（貼り付いたまま下の項目に届かなくならないように。2026-10-15 色見本で縦に長くなった） */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 55px rgba(17, 19, 20, .07);
}

.panel-heading,
.body-heading,
.gallery-heading,
.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-heading { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.panel-heading p { margin-bottom: 8px; }
.panel-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }

.registered {
  padding: 7px 10px;
  border-radius: 999px;
  color: #2c693b;
  background: #e1f5e5;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.settings-summary,
.settings-toggle { display: none; }

.edit-fields {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.edit-fields label:first-child { grid-column: 1 / -1; }

/* 年度「入れる/入れない」と「年度の文字」は横並び（年度なしのとき文字入力は消える） */
.field-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.field-row > label { flex: 1 1 0; min-width: 0; }
.field-row > label[hidden] { display: none; }

/* 小さな案内（VH-12の同色フォールバック）。エラーではない。進行は妨げない */
.contrast-note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #c8b06b;
  background: #fdf6e3;
  color: #5a4a17;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.contrast-note[hidden] { display: none; }
.edit-fields label { display: grid; gap: 7px; min-width: 0; }
.edit-fields label[hidden] { display: none; }

.edit-fields label > span {
  color: #65696a;
  font-size: 12px;
  font-weight: 700;
}

.edit-fields input,
.edit-fields select {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: white;
  font: inherit;
  font-size: 14px;
  scroll-margin-bottom: 140px;
}

.edit-fields input:focus,
.edit-fields select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- チームロゴ欄（お客さんのロゴ画像） ---------- */

.logo-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.logo-field-label {
  color: #65696a;
  font-size: 12px;
  font-weight: 700;
}

/* ネイティブの file input は隠す（「選択されていません」を出さない）。
 * display:none にはしない＝Tabで到達でき、Enter/Spaceでファイル選択が開く。 */
.logo-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.logo-choose {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}

.logo-choose:hover { border-color: #8e9293; }

.logo-field input[type="file"]:focus-visible + .logo-choose {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.logo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  background: white;
}

.logo-preview[hidden] { display: none; }

.logo-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: repeating-conic-gradient(#e9e9e6 0% 25%, white 0% 50%) 50% / 12px 12px;
  object-fit: contain;
}

.logo-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  font-weight: 700;
}

.logo-clear {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
}

.logo-note { margin: 0; }
.logo-note[hidden] { display: none; }

.summary-logo-thumb {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  background: repeating-conic-gradient(#e9e9e6 0% 25%, white 0% 50%) 50% / 10px 10px;
  object-fit: contain;
}

.body-heading {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.body-heading p {
  margin: 0 0 7px;
  color: #676b6d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.body-heading h3 { margin: 0; font-size: 18px; }

.color-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.color-button {
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: white;
  cursor: pointer;
  text-align: left;
  transition: border-color .14s ease, background .14s ease;
}

.color-button:hover { border-color: #8e9293; }

.color-button[aria-checked="true"] {
  border-color: var(--ink);
  background: #f6f6f2;
  box-shadow: inset 0 0 0 1px var(--ink);
}

.color-button[aria-checked="true"] .color-label::after {
  content: " ✓ 選択中";
  font-size: 10px;
}

.swatch {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 50%;
}

.color-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; }

.registration-note {
  margin-top: 25px;
  padding: 15px 16px;
  display: grid;
  gap: 5px;
  border-left: 3px solid var(--accent);
  background: #f4f4ef;
}

.registration-note strong { font-size: 12px; }
.registration-note span { color: #777b7c; font-size: 11px; line-height: 1.55; }

/* ---------- ギャラリー ---------- */

.gallery-panel { min-width: 0; }

.gallery-heading {
  min-height: 74px;
  padding: 0 4px 18px;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
}

.gallery-heading p { margin-bottom: 8px; }
.gallery-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }

.gallery-status { color: #666a6b; font-size: 11px; font-weight: 800; letter-spacing: .12em; }

.gallery-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #4fbd67;
}

.selected-info {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ink);
  background: #eceae4;
  font-size: 12px;
  font-weight: 700;
}

.design-gallery {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.design-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 34px rgba(17, 19, 20, .055);
}

.design-card.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink);
}

.card-topline {
  min-height: 54px;
  padding: 14px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.card-topline strong { font-size: 18px; letter-spacing: -.02em; }
.card-topline span { color: #75797a; font-size: 10px; font-weight: 800; letter-spacing: .11em; }

.fixed-badge {
  padding: 5px 7px;
  color: #7b3d13 !important;
  background: #fff0df;
  letter-spacing: .04em !important;
}

.selected-badge {
  padding: 5px 8px;
  color: white !important;
  background: var(--ink);
  letter-spacing: .06em !important;
}

.card-stage { padding: 10px; background: #e8e8e3; }

.mockup-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.shirt-image,
.design-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.shirt-image {
  object-fit: contain;
  filter: drop-shadow(0 16px 15px rgba(0, 0, 0, .11));
  transition: opacity .14s ease;
}

.design-overlay {
  z-index: 2;
  pointer-events: none;
  transition: opacity .14s ease;
}

.design-overlay.loading { opacity: .2; }
.design-overlay svg { display: block; width: 100%; height: 100%; }

/* 商品ごとのプリント位置。
 * **数値はここに書かない。** `app.js` の `PRODUCT_PRINT_TRANSFORM` が正で、
 * `applyPrintTransformVars()` が `:root` に入れる変数をここで読むだけ（drawComposite も同じ値）。
 *   --hoodie-print-scale … 倍率（0.92）
 *   --hoodie-print-shift … 下方向の移動（器の高さに対する % ＝ shiftY/10）
 * 裏起毛パーカーは実物どおり「胸の高さ」に刷る。フードの紐はプリントの上に掛かってよい。
 * 収める帯は フードの開きの下端（実写 1000px 基準で y≈400）〜 カンガルーポケットの上端（y≈695）。
 * ドライTシャツは変換なし（identity）なので、この規則の対象外。 */
.design-overlay[data-product="fleece-hoodie"],
.preset-overlay[data-product="fleece-hoodie"] {
  transform: translateY(var(--hoodie-print-shift)) scale(var(--hoodie-print-scale));
}

/* 配色の見本（120px角）はパーカーだと胸のプリントが小さめなので、
 * 実写PNGとSVGに**同じ**拡大（2倍。プリント中心を枠の中央へ寄せる量が --hoodie-preset-shift）を
 * 重ねて掛ける。2つは別の要素なので、同じ変換を前置きしないとズレる。 */
.preset-stage { overflow: hidden; }
.preset-stage[data-product="fleece-hoodie"] .shirt-image {
  transform: translateY(var(--hoodie-preset-shift)) scale(2);
}
.preset-overlay[data-product="fleece-hoodie"] {
  transform: translateY(var(--hoodie-preset-shift)) scale(2)
             translateY(var(--hoodie-print-shift)) scale(var(--hoodie-print-scale));
}

.card-actions {
  padding: 12px;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
}

/* グリッドの列に押し込めるよう min-width:0。文言は折り返さず1行で揃える
 * （横並びのボタンで行数が変わると、片方だけ背が高くなって列がガタつくため） */
.card-actions .btn {
  min-height: 44px;
  font-size: 13px;
  padding: 10px 8px;
  min-width: 0;
  white-space: nowrap;
}

.card-note {
  margin: 0;
  padding: 11px 16px;
  color: #6d7071;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.5;
}

.card-note.pending { color: #7b3d13; background: #fff7ed; }

.design-card.load-error .card-stage {
  min-height: 220px;
  display: grid;
  place-items: center;
}

.design-card.load-error .card-stage::after {
  content: "デザインを読み込めませんでした";
  color: #8b2727;
  font-size: 12px;
}

/* ---------- 編集ビュー ---------- */

.edit-layout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.edit-sticky { display: grid; gap: 12px; min-width: 0; align-content: start; }

@media (min-width: 961px) {
  /* 右カラム（タブの中身）が長いので、PCでもプレビューは画面に残す */
  .edit-sticky { position: sticky; top: 24px; }
}
.edit-preview-col { display: grid; gap: 12px; min-width: 0; justify-items: center; }
.edit-preview-col .btn { width: 100%; max-width: 440px; }

/* タブ（≤767pxだけ出す。PCでは .tab-title が節見出しになる） */
.edit-tabs { display: none; }

.edit-tab {
  min-height: 46px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  color: #5c6061;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}

.edit-tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.edit-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tab-panel { min-width: 0; }
.tab-panel + .tab-panel { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.tab-panel:focus { outline: none; }

.tab-title {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: .02em;
}

/* 色タブ：役割ごとの色見本と、その案での反映先 */
.color-role + .color-role { margin-top: 20px; }

.color-role-title {
  margin: 0;
  color: #45494a;
  font-size: 13px;
  font-weight: 800;
}

.color-role-value { color: #6d7071; font-weight: 700; }

.print-color-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

/* 比較画面の共通設定の色（丸い色見本。2026-10-15）。枠が狭いので丸だけを並べ、色名は見出しの右と title で出す */
.color-field { display: grid; gap: 0; grid-column: 1 / -1; min-width: 0; }
.color-field-title { margin: 0; font-size: 12px; font-weight: 700; color: #65696a; }
.print-color-grid.is-compact {
  margin-top: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px 4px;
  justify-items: center;
}
.print-color-grid.is-compact .color-button {
  position: relative;
  min-width: 0;
  min-height: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.print-color-grid.is-compact .color-button .color-label { display: none; }
.print-color-grid.is-compact .color-button .swatch { width: 28px; height: 28px; border: 1px solid rgba(0, 0, 0, .32); }
.print-color-grid.is-compact .color-button[aria-checked="true"] { border-color: transparent; background: transparent; box-shadow: none; }
.print-color-grid.is-compact .color-button[aria-checked="true"] .swatch { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--ink); }
.print-color-grid.is-compact .color-button[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid white;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.print-color-grid.is-compact .color-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 状態の受け皿（select）。画面には出さないが値は state と同期している */
.control-mirror { display: none; }

/* おすすめの配色（完成例プリセット） */
.preset-block { margin-bottom: 22px; }

.preset-title {
  margin: 0 0 10px;
  color: #45494a;
  font-size: 13px;
  font-weight: 800;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}

.preset-card {
  padding: 6px;
  display: grid;
  gap: 6px;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  font-family: inherit;
  cursor: pointer;
}

.preset-card:hover { border-color: #8e9293; }
.preset-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.preset-card[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.preset-stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1;
  background: #e8e8e3;
}

.preset-stage .shirt-image,
.preset-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.preset-overlay { z-index: 2; pointer-events: none; }

.preset-name {
  color: #45494a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
}

/* プレビューの窓。PCでは素通し（正方形のまま）、≤767px でだけ高さ220pxに切り取る */
.edit-preview-frame { position: relative; min-width: 0; }

/* 画像に重ねる「大きく見る」（≤767px でだけ出す。PCは下の全幅ボタンのまま） */
.preview-zoom-icon {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  cursor: pointer;
}

.preview-zoom-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.preview-zoom-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.edit-preview, .stage-preview {
  margin: 0 auto;
  padding: 12px;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  background: #e8e8e3;
}

.edit-preview figcaption,
.stage-preview figcaption {
  margin-top: 8px;
  color: #5c6061;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.edit-form-col {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.edit-form-col .edit-fields { margin-top: 0; }

.color-role-note {
  white-space: pre-line;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #f4f4ef;
  color: #4d5152;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- フォーム・確認 ---------- */

.notice {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid #c8b06b;
  background: #fdf6e3;
  color: #59481c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.form-layout {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.summary-card, .contact-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.summary-card h2, .contact-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.summary-list {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.summary-list dt, .summary-list dd {
  margin: 0;
  padding: 9px 11px;
  background: white;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.summary-list dt { color: #5c6061; font-weight: 700; font-size: 12px; }

/* 色の行（ボディ色・メインカラー・その他のカラー）に添える色丸 */
.summary-list dd.has-dot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* 白い色でも輪郭が見えるように薄い枠線を必ず入れる */
  border: 1px solid rgba(0, 0, 0, .3);
  background: var(--dot, transparent);
}

.confirm-preview {
  margin: 0 auto 4px;
  padding: 10px;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  background: #e8e8e3;
}
/* 2面（部位の商品の正面＋側面／前＋後）の画像は枠を2面ぶんに広げ、カードを2列ぶんにする。モバイルは幅いっぱい */
.confirm-preview.is-multi-view { max-width: 880px; }
.form-layout > .summary-card.is-multi-view { grid-column: 1 / -1; }
.confirm-preview img { display: block; width: 100%; height: auto; }
.confirm-preview figcaption { margin-top: 8px; color: #5c6061; font-size: 12px; font-weight: 700; }

.field { margin-bottom: 18px; display: grid; gap: 6px; }

.field label { color: #45494a; font-size: 13px; font-weight: 800; }

.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  background: white;
  color: var(--ink);
  scroll-margin-bottom: 160px;
}

.field textarea { min-height: 96px; resize: vertical; }

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: #fff6f6;
}

.req {
  margin-left: 4px;
  padding: 2px 6px;
  color: white;
  background: var(--danger);
  font-size: 10px;
}

.opt {
  margin-left: 4px;
  padding: 2px 6px;
  color: #4d5152;
  background: #e5e5df;
  font-size: 10px;
}

.field-hint { margin: 0; color: #6d7071; font-size: 12px; line-height: 1.6; }

.field-error {
  margin: 4px 0 0;
  padding: 7px 10px;
  border-left: 3px solid var(--danger);
  background: #fdf0f0;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
}

.field-error[hidden] { display: none; }

.submit-state { margin: 16px 0 0; color: #4d5152; font-size: 13px; font-weight: 700; }
.submit-state.is-warning { padding: 10px 12px; border-left: 3px solid #7b3d13; background: #fff7ed; color: #7b3d13; }

.receipt { margin: 20px 0 0; font-size: 17px; }
.receipt strong { font-size: 22px; letter-spacing: .04em; }

/* ---------- アクションバー ---------- */

.action-bar {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.action-bar .btn { min-width: 220px; }

/* ---------- モーダル ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12, 14, 15, .74);
}

.modal-backdrop[hidden] { display: none; }

.modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--ink);
}

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 19px; }
.modal-body { margin-top: 14px; padding: 10px; background: #e8e8e3; }
.modal-note { margin: 12px 0 0; color: #7b3d13; font-size: 12px; line-height: 1.6; }
.modal-note:empty { display: none; }
.modal-foot { margin-top: 14px; display: flex; justify-content: flex-end; }

/* ---------- レスポンシブ ---------- */

@media (min-width: 1600px) {
  .design-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .workspace { grid-template-columns: 1fr; }
  .control-panel { position: static; max-height: none; overflow: visible; padding: 26px 22px; }
  .edit-layout, .form-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header { height: 62px; }
  .product-name { display: none; }
  main { width: min(100% - 24px, 1480px); padding-top: 30px; padding-bottom: 132px; }
  .intro > p:last-child, .view-lead { font-size: 13px; }
  /* 既定は1行まるごと。関係の近いものだけ2列に詰めて縦を短くする
   * （色のセレクトは色名が切れるので詰めない。:has 未対応なら全部1列＝従来どおり）
   * 「年度」と「年度の文字」は .field-row で横並び。
   * 「チーム名の枠線」と「競技名」も2列にして、375×667でも年度の行まで固定CTAの上に入れる。 */
  .edit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .edit-fields label { grid-column: 1 / -1; }
  .edit-fields label:has(#teamOutline),
  .edit-fields label:has(#subText),
  .edit-fields label:has(#editTeamOutline),
  .edit-fields label:has(#editSubText) { grid-column: auto; }
  .design-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* 押せない状態の「追加済み ✓」は隣の「大きく見る」より1文字ぶん長いので、
   * 字を少しだけ詰めて（11px・左右2px）2列のカード幅でも1行に収める */
  .card-actions .btn[data-action="keep"]:disabled {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .gallery-heading { align-items: center; }
  .card-topline { min-height: 44px; padding: 10px; }
  .card-topline strong { font-size: 15px; }
  .card-topline span { font-size: 9px; }
  .card-stage { padding: 3px; }
  .card-actions { padding: 8px; gap: 6px; }
  .card-actions .btn { min-height: 42px; font-size: 12px; padding: 9px 4px; }
  .card-note { padding: 8px 10px; font-size: 10px; }
  .edit-form-col, .summary-card, .contact-card { padding: 16px; }
  .summary-list { grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); }

  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(calc(-1 * var(--keyboard-inset)));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(17, 19, 20, .12);
  }

  .action-bar .btn { flex: 1 1 auto; min-width: 0; }
}

/* iPhone SE(第1世代)級の狭い端末では2列のカードが narrow すぎて、1行だと文字がはみ出す。
 * ここだけ折り返しを戻す（揃わないより、はみ出さないほうを優先） */
@media (max-width: 359px) {
  .card-actions .btn { white-space: normal; }
}

/* ---------- モバイルのボディ色：色丸だけの横並び（〜767px） ---------- *
 * 色名テキストは丸の下に出さない（縦に長くなるため）。名前は button の aria-label と、
 * 見出しの「BLACK / 全11色」で伝える。DOMは共通で、切り替えはこのCSSだけ。 */
@media (max-width: 767px) {
  .color-grid {
    margin-top: 14px;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 12px 10px;
    justify-items: center;
  }

  .color-button {
    position: relative;
    min-width: 48px;
    min-height: 48px;
    width: 100%;
    padding: 2px;
    justify-content: center;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

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

  .color-button .swatch {
    width: 40px;
    height: 40px;
    /* 白いボディ色でも丸の輪郭が見えるように、薄い枠線を少し濃くする */
    border: 1px solid rgba(0, 0, 0, .32);
  }

  .color-button[aria-checked="true"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  /* 白い隙間を挟んで濃いリング。黒でも白でも「選択中」が分かる */
  .color-button[aria-checked="true"] .swatch {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--ink);
  }

  /* 選択中の印（どの色の上でも読めるよう、濃い丸に白いチェック） */
  .color-button[aria-checked="true"]::after {
    content: "✓";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 1px solid white;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
  }

  .color-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}

/* ---------- モバイル（〜767px）：比較は折りたたみ設定、編集は上プレビュー＋タブ ---------- *
 * DOMは1系統のまま。PC（768px〜）では下の指定が効かないので、左パネル／2カラムのまま。 */
@media (max-width: 767px) {
  /* デザイン一覧を早く出すため、比較画面の見出し・余白を詰める */
  main { padding-top: 20px; }
  .intro h1 { font-size: 26px; }
  .intro > p:last-child { margin-top: 10px; font-size: 12px; line-height: 1.7; }
  .workspace { margin-top: 18px; gap: 14px; }
  .gallery-heading { min-height: 0; padding: 0 2px 10px; }
  .gallery-heading p { margin-bottom: 4px; }
  .gallery-heading h2 { font-size: 20px; }
  .selected-info { margin-top: 10px; padding: 8px 10px; }
  .design-gallery { margin-top: 12px; }

  /* 共通設定は既定で閉じ、1行要約と「設定を変更」だけを見せる */
  .control-panel { padding: 16px 14px; }
  .panel-heading { padding-bottom: 14px; }
  .panel-heading h2 { font-size: 21px; }
  .panel-heading p { margin-bottom: 6px; }

  .settings-summary {
    display: block;
    margin: 14px 0 0;
    color: #5c6061;
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .settings-toggle {
    display: block;
    width: 100%;
    margin-top: 12px;
    min-height: 46px;
  }

  .control-panel:not(.is-open) .control-panel-body { display: none; }
  .control-panel.is-open .settings-summary { display: none; }

  /* 編集ビュー：見出しを詰めて、プレビューとタブを画面上部に貼り付ける */
  .view-head h1 { font-size: 24px; }
  .view-head .view-lead { margin-top: 8px; font-size: 12px; line-height: 1.6; }
  .back-link { margin-bottom: 12px; }
  .edit-layout { margin-top: 14px; gap: 0; }

  .edit-sticky {
    position: sticky;
    top: 0;
    z-index: 25;
    gap: 8px;
    padding: 8px 0 10px;
    background: var(--paper);
    box-shadow: 0 12px 16px -12px rgba(17, 19, 20, .45);
  }

  .edit-preview { padding: 6px; }

  /* 高さ220px（ソフトキーボードで狭いときは180px）の窓。
   * 中身は「Tシャツ写真＋SVG」を含む正方形ステージ1つで、幅の1.35倍に広げてから
   * translate(-50%, -42%) で胸のプリント（viewBox 1000基準で中心 y≈420）を窓の縦中央に置く。
   * SVGとPNGは同じ .mockup-stack の中なので、ズレることはない。 */
  .edit-preview .edit-preview-frame {
    height: var(--edit-preview-h, 220px);
    overflow: hidden;
  }

  .edit-preview .mockup-stack {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 135%;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    transform: translate(-50%, -42%);
  }

  /* 裏起毛パーカーはプリントが少し下（中心 y525）なので、窓の中心をそこへ下げてから拡大する。
   * 下げ幅は `--hoodie-window-shift`（app.js が中心から作る。数値はここに書かない）。
   * 2倍だと帯（フードの開き y≈400 〜 ポケット上端 y≈695）が 220px の窓にちょうど入り、
   * どこに刷るのかが分かる。 */
  .edit-preview .mockup-stack[data-product="fleece-hoodie"] {
    width: 200%;
    transform: translate(-50%, var(--hoodie-window-shift));
  }

  /* 部位の商品（パンツ・ウィンブレ）は商品全体を見せる。窓の高さの正方形を中央に置く */
  .edit-preview .mockup-stack[data-kind="zones"] {
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
  }

  .preview-zoom-icon { display: grid; }
  /* 下の全幅ボタンは画像上のアイコンに置き換える */
  #editZoomButton { display: none; }

  .edit-preview figcaption { display: none; }
  .edit-preview-col { gap: 8px; }
  .edit-preview-col .btn { min-height: 38px; padding: 8px; font-size: 12px; }

  .edit-tabs {
    display: grid;
    /* タブの数は商品で変わる（文字の商品＝3つ、部位の商品＝「色」だけ）。見えているタブで等分する */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .tab-title { display: none; }
  .tab-panel:not(.is-active) { display: none; }
  .tab-panel + .tab-panel { margin-top: 0; padding-top: 0; border-top: 0; }

  /* 下部固定CTAのぶんの余白。中身が短いタブ（ロゴ）でも sticky が天井に着いたままになるよう、
   * スクロールできる高さを確保する */
  .edit-form-col { margin-top: 14px; padding-bottom: 92px; min-height: 72vh; }

  /* 入力にフォーカスしたとき、sticky なプレビューの下に隠れないようにする
   * （スクロールの対象はラベルではなく入力そのものなので、コントロール側に付ける） */
  .edit-form-col input,
  .edit-form-col select,
  .edit-form-col textarea,
  .edit-form-col .color-button,
  .edit-form-col .preset-card,
  .edit-form-col .logo-choose,
  .edit-form-col .edit-fields label,
  .edit-form-col .logo-field { scroll-margin-top: calc(var(--edit-sticky-h, 400px) + 14px); }

  /* 印刷色も丸だけ（名前は aria-label と見出しの色名で伝える） */
  .print-color-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 12px 10px;
    justify-items: center;
  }
  /* 比較画面の共通設定の色見本も、押しやすい大きさ（高さ 44px・丸 32px）にする */
  .print-color-grid.is-compact { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 2px; }
  .print-color-grid.is-compact .color-button { width: 100%; height: 44px; min-height: 44px; }
  .print-color-grid.is-compact .color-button .swatch { width: 32px; height: 32px; }

  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * 候補バー（比較画面）・元に戻す・比較画像
 * ------------------------------------------------------------------ */

/* 候補の比較画像を描くための隠しステージ。display:none だと getBBox が測れないので、
 * 画面外に置いて透明にする（レイアウトは生きたまま）。 */
.offscreen-stage {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
  width: 480px;
  height: 480px;
  opacity: 0;
  pointer-events: none;
}

.candidate-badge {
  margin-left: 6px;
  padding: 1px 6px;
  min-width: 18px;
  display: inline-block;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.candidate-badge[hidden] { display: none; }

.candidate-bar {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.candidate-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.candidate-bar-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .04em;
}

.candidate-bar-head #candidateCount { color: var(--muted); font-size: 12px; }
.candidate-bar-head .btn { min-height: 38px; font-size: 12px; padding: 8px 14px; }

.candidate-empty {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.candidate-empty[hidden] { display: none; }

.candidate-list {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.candidate-list:empty { margin-top: 0; }

.candidate-card {
  flex: 0 0 auto;
  width: 150px;
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  background: #e9e9e6;
}

.candidate-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: #e8e8e3;
  box-shadow: inset 0 0 0 1px rgba(16, 18, 19, .14);
}

.candidate-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.candidate-thumb.is-empty { color: var(--muted); font-size: 11px; font-weight: 700; }

.candidate-id { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; }

/* 商品名（ドライTシャツ／裏起毛パーカー）。色の行とは別の行にして、
 * 狭いカード幅でも語の途中で折り返さないようにする */
.candidate-product {
  margin: 0;
  color: #45494a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.candidate-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #45494a;
  font-size: 11px;
  font-weight: 700;
}

.candidate-actions { display: grid; gap: 4px; }

.candidate-actions .btn {
  min-height: 32px;
  padding: 6px 4px;
  font-size: 11px;
  background: #fff;
}

.candidate-notice {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--ink);
  background: #eceae4;
  font-size: 12px;
  font-weight: 700;
}

.candidate-notice[hidden] { display: none; }
.candidate-notice .candidate-undo { min-height: 28px; padding: 4px 10px; font-size: 11px; background: #fff; }

.candidate-image-body { display: grid; place-items: center; }
#candidateImagePreview { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }

/* ---------- 元に戻す／やり直す ---------- */

.history-bar { display: flex; gap: 8px; }

.history-bar .history-button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 11px;
  background: #fff;
}

.history-bar .history-button:disabled { opacity: .4; cursor: default; }

#settingsBody .history-bar { margin-bottom: 14px; }
.edit-preview-col .history-bar.is-floating { justify-self: end; }
/* 「.edit-preview-col .btn { width: 100% }」の打ち消し（履歴ボタンは文字幅のまま） */
.edit-preview-col .history-bar .btn { width: auto; max-width: none; }

.head-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-actions .btn { min-height: 40px; font-size: 12px; padding: 9px 16px; }
.head-note { color: var(--muted); font-size: 12px; font-weight: 700; }

/* 3つになったカードのボタン：上段に「大きく見る」「候補に残す」、下段に主ボタン */
.card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-actions .btn[data-action="select"] { grid-column: 1 / -1; }

/* 配色プリセットの見本：白ボディ＋白文字が埋もれないよう、セルを薄いグレー＋細い縁取りにする */
.preset-card { background: #e9e9e6; }
.preset-stage { background: #e9e9e6; box-shadow: inset 0 0 0 1px rgba(16, 18, 19, .18); }

@media (max-width: 767px) {
  /* 候補が0件のときは丸ごと隠す。1枚目のデザインをファーストビューに残すため
   * （入口はカードの「候補に残す」で、押すとこのバーが出てくる） */
  .candidate-bar.is-empty { display: none; }
  .candidate-bar { padding: 10px; }
  .candidate-card { width: 132px; }
  .candidate-actions .btn { min-height: 34px; font-size: 10px; }
  .candidate-bar-head h3 { font-size: 13px; }
  .candidate-bar-head .btn { min-height: 36px; font-size: 11px; padding: 8px 10px; }

  /* sticky プレビューの角に小さく置く */
  .edit-preview-col { position: relative; }
  .edit-preview-col .history-bar.is-floating {
    position: absolute;
    top: 2px;
    /* 右上は「大きく見る」アイコンの場所なので、履歴は左上に置く */
    left: 2px;
    z-index: 3;
    gap: 4px;
  }
  .edit-preview-col .history-bar.is-floating .history-button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 10px;
    background: rgba(255, 255, 255, .94);
  }
  .head-actions { margin-top: 10px; }
}

/* 候補に入っている案のカードに出す小さなラベル */
.candidate-mark {
  padding: 4px 7px;
  border: 1px solid #2c693b;
  color: #2c693b;
  background: #e1f5e5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.candidate-mark[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * 部位ごとに色を選ぶ商品（シェルパンツ／ウィンドブレーカー）
 * 出し分けは body[data-product-kind]（app.js の syncProductUi）。DOMは1系統のまま。
 * ------------------------------------------------------------------ */

body[data-product-kind="zones"] [data-text-only] { display: none !important; }
body:not([data-product-kind="zones"]) [data-zones-only] { display: none !important; }

/* 写真（あれば）は ShadowRoot の中に持つので、外側の Tシャツ写真は使わない */
.mockup-stack[data-kind="zones"] .shirt-image { display: none; }

/* 「文字」タブが無いので、色タブの上の区切り線を消す（PC） */
body[data-product-kind="zones"] #panel-color { margin-top: 0; padding-top: 0; border-top: 0; }

.zone-color-roles:empty { display: none; }
.zone-color-roles { margin-bottom: 4px; }
.zone-color-roles .color-role-note { margin-top: 8px; }

/* 部位のセレクトは1列（色名が切れないように） */
.edit-fields.zone-fields { margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
.zone-fields .zone-hint { margin: 0; }

/* 表示の向き（正面／横・前／後）。
 * PC はプレビューの上の帯、≤767px は窓の右下に重ねる（左上は「元に戻す／やり直す」、右上は拡大アイコン） */
.view-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
}

.view-toggle:empty { display: none; }

.view-toggle button {
  min-width: 56px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

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

/* PC（768px〜）は画像に重ねず、プレビューの上に帯を空けてそこへ置く（商品の端を隠さない） */
@media (min-width: 768px) {
  body[data-product-kind="zones"] .edit-preview-frame { padding-top: 54px; }
  /* 向きが 1 つ（練習着）は切り替えボタンが無いので帯を空けない */
  body[data-product-kind="zones"][data-view-count="1"] .edit-preview-frame { padding-top: 0; }
  .edit-preview-frame > .view-toggle { top: 6px; right: auto; left: 0; }
}

/* ≤767px は窓の上に高さ50pxの帯を足し、ボタンは帯の右（「大きく見る」の左隣）に置く。
 * 窓の下端に重ねると、ウィンブレ後ろ向きの袖口・パンツ横向きの帯にかかるため。
 * 商品の正方形ステージは帯の下の 220px（キーボード時 180px）に収める。左上の「元に戻す／やり直す」も帯の中に入る。 */
@media (max-width: 767px) {
  body[data-product-kind="zones"] .edit-preview .edit-preview-frame { height: calc(var(--edit-preview-h, 220px) + 50px); }
  .edit-preview .mockup-stack[data-kind="zones"] { top: calc(50% + 25px); height: calc(100% - 50px); }
  .edit-preview-frame > .view-toggle { top: 6px; right: 58px; }
  .view-toggle button { min-width: 52px; min-height: 36px; padding: 0 12px; }
}

/* 拡大モーダルでは画像の上に置く（重ねない） */
.view-toggle.is-static { position: static; margin: 0 0 10px; }

/* 比較画面の一覧の見出しの右（「LIVE PREVIEW」の左）。押すと全案のカードが同じ向きになる */
.gallery-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.view-toggle.is-inline { position: static; flex: none; }
/* 比較画面の共通設定の「表示の向き」（商品の欄のすぐ下） */
.view-field { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: start; }
.view-field-title { font-size: 12px; font-weight: 700; color: #65696a; }
body[data-view-count="1"] .view-field { display: none; }
@media (max-width: 767px) {
  .gallery-tools { gap: 8px; }
  body[data-product-kind="zones"] .gallery-tools .gallery-status { display: none; }
}

/* 案の説明（「1本線」など）。カードの見出しの右 */
.card-topline .card-subtitle { color: #45494a; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
/* ≤767px は 2 列でカードが狭く、長い説明（中央の線が太い3本線）だけ折り返して画像の高さがずれるので、全カードで 2 行目に置く */
@media (max-width: 767px) {
  .card-topline .card-subtitle { flex-basis: 100%; font-size: 11px; }
}

/* 横向きの制約の注記。プレビューに重ねると帯の下端にかかるので、窓の外（キャプションの行）に置く */
.view-note {
  margin: 6px 0 0;
  color: #45494a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}