/* =========================================================
   Form & Modal Styles (cleaned / deduped)
   - 重複/競合を解消し、視認性と保守性を改善
   - 構成：Reset/Utility → Base → Components → Modals → Responsive → #mainForm overrides
   ========================================================= */

/* ========== Reset / Utility ========== */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

.required { color: #d00; }
.hidden   { display: none; }
.hint     { color: #666; font-size: 12px; }
.note     { color: #444; font-size: 13px; margin-top: 6px; }

/* ========== Layout ========== */
.page-container {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}

/* ========== Forms (Base) ========== */
.form-group { margin: 12px 0; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: min(640px, 100%);
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}

.form-group .with-unit {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.with-unit input[type="number"] { width: 120px; }
.with-unit .unit { margin-left: 6px; white-space: nowrap; }

/* Buttons (base) */
.btn.btn-cta {
  padding: 10px 16px;
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 8px;
  cursor: pointer;
}
.btn, button { touch-action: manipulation; }

/* Repeatable rows */
.repeatable .repeatable-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.add-btn, .remove-btn {
  padding: 6px 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.remove-btn { color: #900; }
.add-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ========== Design chooser (trigger) ========== */
/* モバイル優先：はみ出し防止のため min-width を 0 に統一 */
.design-choice-display {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  background: #fff;
}
.design-choice-display:focus-visible { outline: 3px solid #5aa3ff; outline-offset: 2px; }
.design-choice-hint { display: block; color: #666; font-size: 12px; margin-top: 6px; }

/* ========== Design picker modal (overlay) ========== */
.design-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000;
}
.design-modal {
  position: absolute; inset: 0; margin: auto;
  width: min(92vw, 900px); height: min(92vh, 720px);
  background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
}
.design-modal-header,
.design-modal-footer {
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
}
.design-modal-header { border-bottom: 1px solid #eee; }
.design-modal-footer { border-top: 1px solid #eee; gap: 8px; flex-wrap: wrap; }
.design-meta { font-size: 14px; color: #555; }
.design-pager { margin-left: 8px; color: #777; }

.design-grid-wrap { padding: 14px; overflow: auto; }

/* === Design grid: 中央寄せ（3→2→1列） === */
.design-grid{
  --tile: 280px;
  --gap: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--tile), 1fr));
  gap: var(--gap);
  max-width: calc(3*var(--tile) + 2*var(--gap));
  margin: 0 auto;
}
.design-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 10px;
  cursor: pointer; transition: transform .08s ease, box-shadow .08s ease;
}
.design-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.design-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #fff; }
.design-caption { font-size: 13px; color: #333; text-align: center; }

/* Toolbar */
.design-toolbar{
  display:flex; justify-content:center; align-items:center; gap:12px;
  margin:8px 0 12px;
}
.design-toolbar .ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px; font-size:18px;
  border-radius:10px; border:1px solid #d0d7de; background:#fff; cursor:pointer;
}
.design-toolbar .ghost:hover  { background:#f6f8fa; }
.design-toolbar .ghost:active { background:#eef2f6; transform: translateY(1px); }
.design-toolbar .ghost:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.design-toolbar .sep      { flex:0 0 12px; }
.design-toolbar .cat-name { font-weight:600; }
.design-toolbar .pager    { color:#555; }

#designCatName{
  display:inline-block; width: 18em; max-width: 24em; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#designPager{
  display:inline-block; width: 12em; text-align:center; font-variant-numeric: tabular-nums;
}

/* ========== Buttons in design modal ========== */
.design-ghost { border: 1px solid #ddd; background: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.design-none  { border: 1px dashed #888; background: #fff; color: #333; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
button:focus-visible { outline: 3px solid #5aa3ff; outline-offset: 2px; }
.design-foot-left, .design-foot-right { display: flex; gap: 8px; align-items: center; }

/* ========== Lightbox for images ========== */
.img-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8);
  z-index: 1200; align-items: center; justify-content: center;
}
.img-overlay img {
  max-width: 90vw; max-height: 85vh; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.img-overlay-close {
  position: absolute; top: 16px; right: 16px;
  background: #fff; border: 1px solid #ddd; border-radius: 999px;
  width: 40px; height: 40px; font-size: 22px; line-height: 38px; cursor: pointer;
}

/* ========== Confirm Modal ========== */
.confirm-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20,20,20,.35); backdrop-filter: blur(2px);
  z-index: 1000; align-items: center; justify-content: center;
}
.confirm-modal {
  position: relative;
  width: min(96vw, 900px); max-height: min(92vh, 720px);
  background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
}
.confirm-modal-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fafafa 0%, #f3f6ff 100%);
  border-bottom: 1px solid #eef1f6;
}
.confirm-meta { font-size: 14px; color: #555; }
.confirm-content { padding: 20px 22px; overflow: auto; }

.confirm-modal-footer {
  position: sticky; bottom: 0; z-index: 1;
  background: #fff; border-top: 1px solid #eef1f6;
  padding: 14px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; justify-items: stretch;
}
.confirm-modal-footer .confirm-ghost,
.confirm-modal-footer .btn.btn-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  height: 48px !important; margin: 0 !important; box-sizing: border-box !important;
  border-radius: 9999px !important; font-size: 16px !important; float: none !important;
}
.confirm-ghost {
  background: #fff; border: 1px solid #d1d5db; color: #374151;
  transition: background .2s ease, box-shadow .2s ease, transform .02s ease;
}
.confirm-ghost:hover { background: #f9fafb; }
.confirm-ghost:active { transform: translateY(1px); }
.confirm-modal-footer .btn.btn-cta {
  background: linear-gradient(135deg, #111827 0%, #0b1220 100%);
  color: #fff; border: 0; box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: filter .2s ease, transform .02s ease;
}
.confirm-modal-footer .btn.btn-cta:hover { filter: brightness(1.05); }
.confirm-modal-footer .btn.btn-cta:active { transform: translateY(1px); }

/* Definition list (2 columns / base) */
.confirm-list {
  display: grid; grid-template-columns: 16em 1fr; column-gap: 18px; row-gap: 10px; align-items: start;
  margin: 0;
}
.confirm-list > dt {
  font-weight: 700; color: #0f172a; white-space: nowrap; padding: 8px 0; border-bottom: 1px dashed #eef2f7;
}
.confirm-list > dd {
  margin: 0; color: #111827; line-height: 1.8; word-break: break-word; padding: 8px 0; border-bottom: 1px dashed #eef2f7;
}
/* zebra */
.confirm-list > dt:nth-child(4n+1),
.confirm-list > dd:nth-child(4n+2) {
  background: linear-gradient(180deg, #fff, #fff 60%, #fafbff 100%);
}

/* ========== “デザイン選択” 行（一本化） ========== */
#c_design_row {
  display: flex; align-items: center; gap: 16px;
}
#c_design_row .design-title {
  font-weight: 600; color: #111827; white-space: nowrap;
}
#c_design_row #c_design_img,
.confirm-list dd#c_design_name img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid #ddd; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* 左列ラベルを中央揃え/高さ合わせ */
.confirm-list dt.design-label,
.confirm-list dd#c_design_row {
  display: flex; align-items: center; min-height: 110px;
}

/* サムネ(任意) */
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumbs img { width: 120px; height: 120px; object-fit: cover; border: 1px solid #ddd; border-radius: 8px; background: #fff; }

/* ========== Responsive (順：900 → 768 → 540 → 520 → 480 → 420) ========== */
@media (max-width: 900px) {
  .design-modal { width: 96vw; height: 92vh; border-radius: 12px; }
  .design-grid{
    --tile: 200px;
    grid-template-columns: repeat(2, minmax(var(--tile), 1fr));
    max-width: calc(2*var(--tile) + 1*var(--gap));
  }
}

@media (max-width: 768px) {
  .confirm-list {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .confirm-list > dt, .confirm-list > dd {
    border-bottom: 1px dashed #eef2f7; padding: 8px 0;
  }
  .confirm-list > dt { background: none; }
  .confirm-list > dd { margin-bottom: 8px; }

  /* デザイン行を少しコンパクトに */
  #c_design_row { gap: 12px; }
  #c_design_row #c_design_img { width: 80px; height: 80px; }
  .confirm-list dt.design-label,
  .confirm-list dd#c_design_row { min-height: unset; }
}

@media (max-width: 540px){
  /* ツールバー2段固定／single pageは1段（JSで .is-singlepage を付与） */
  .design-toolbar{
    display:grid !important;
    grid-template-columns: 48px 1fr 48px;
    grid-row-gap: 8px;
    align-items:center; justify-items:center; margin-bottom: 8px;
  }
  #btnPrevCat   { grid-column:1; grid-row:1; }
  #designCatName{ grid-column:2; grid-row:1; }
  #btnNextCat   { grid-column:3; grid-row:1; }
  #btnPrevPage  { grid-column:1; grid-row:2; }
  #designPager  { grid-column:2; grid-row:2; }
  #btnNextPage  { grid-column:3; grid-row:2; }

  .design-toolbar.is-singlepage #btnPrevPage,
  .design-toolbar.is-singlepage #designPager,
  .design-toolbar.is-singlepage #btnNextPage { display:none; }
}

@media (max-width: 520px){
  .design-grid{
    --tile: 260px;
    grid-template-columns: 1fr;
    max-width: var(--tile);
  }
  .design-thumb{ aspect-ratio: 1/1; }
}

@media (max-width: 480px) {
  .confirm-modal-footer { grid-template-columns: 1fr; } /* 縦積み */
  .design-toolbar .ghost{ min-width:48px; height:48px; font-size:19px; padding:0 16px; }
}

@media (max-width: 420px) {
  .thumbs img { width: 96px; height: 96px; }
}

/* ========== Agree (Base) ========== */
/* ここでは“最小限の見た目”のみ。ロジックは #mainForm 側で上書き */
.agree-group {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.agree-group input[type="checkbox"] { width: 18px; height: 18px; }
.agree-group label { font-size: 14px; color: #333; cursor: pointer; }

/* “リンク風ボタン”の共通 */
.linklike{
  display: inline; background: none; border: 0; padding: 0; margin: 0;
  color: #06c; text-decoration: underline; cursor: pointer;
  font: inherit; line-height: inherit; vertical-align: baseline;
}

/* ========== その他微調整 ========== */
.design-grid-wrap{ padding-top: 8px; }

/* ========== Confirm content detail ========== */
#c_details{ white-space: pre-wrap; word-break: break-word; }
#c_details:empty::after{ content: '—'; color:#666; }

/* ========== #mainForm 限定の“安全な文字サイズ/同意行レイアウト” 最終上書き ========== */
#mainForm {
  --fs-label: 16px;   /* ラベル */
  --fs-input: 16px;   /* 入力本文 */
  --fs-hint: 14px;    /* 補足 */
}
#mainForm .form-group label { font-size: var(--fs-label); line-height: 1.5; }
#mainForm input[type="text"],
#mainForm input[type="email"],
#mainForm input[type="tel"],
#mainForm input[type="number"],
#mainForm select,
#mainForm textarea {
  font-size: var(--fs-input); line-height: 1.6;
}
#mainForm .hint, #mainForm .note { font-size: var(--fs-hint); }
#mainForm .btn.btn-cta, #mainForm .add-btn, #mainForm .remove-btn { font-size: 16px; }

/* iOSの16px未満ズーム対策 */
@supports (-webkit-touch-callout: none) {
  #mainForm input, #mainForm select, #mainForm textarea { font-size: 16px; }
}
@media (max-width: 480px) {
  #mainForm { --fs-label: 17px; --fs-input: 17px; --fs-hint: 15px; }
}

/* 同意モーダルの「同意する」ボタン */
#btnAgreeNow {
  padding: 10px 16px; border-radius: 8px; border: none; font-size: 15px; cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
#btnAgreeNow:not(:disabled) {
  background: linear-gradient(135deg, #111827 0%, #0b1220 100%); color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
#btnAgreeNow:disabled {
  background: #ccc; color: #666; cursor: not-allowed; box-shadow: none; opacity: .7;
}

/* ===== 同意チェック（publish-consent相当の2列グリッド） ===== */
#mainForm .agree-group { display: block !important; } /* 旧flex無効化 */
#mainForm .agree-group label { font-size: var(--fs-label, 16px) !important; line-height: 1.8; }

/* 2列grid：左=チェック枠 / 右=本文 */
#mainForm .form-group.agree-group { --cb-size: 1.8em; }
#mainForm .form-group.agree-group > label.inline-check{
  display: grid !important;
  grid-template-columns: var(--cb-size) 1fr;
  column-gap: .6em;
  align-items: start;
}

/* チェックボックスサイズ */
#mainForm .form-group.agree-group > label.inline-check > input{
  margin: .15em 0 0 0;
  width: var(--cb-size); height: var(--cb-size);
  transform: none; transform-origin: initial; accent-color: #111;
}

/* “リンク＋に同意します” の折返し挙動（通常の改行を許可） */
#mainForm .form-group.agree-group .agree-one-line{
  display: inline;
  white-space: normal !important;
  overflow-wrap: anywhere;
}