/*
 * プロジェクト申込関連（メールテンプレート・申込フォーム・申込URL・決済方法）専用スタイル
 * 出典: reference/mockups/ibemaru_mockup.html
 *   - .tab-row / .tab（386〜388行）
 *   - .toggle-switch / .toggle-slider / .toggle-card（638〜662行）
 *   - .project-name-row / .project-name-edit（664〜665行）
 *   - .template-hint / .merge-chip-row / .merge-chip（680〜691行）
 * 入力欄・モーダルは components/modal.css の .modal-field / .modal-input / .modal-textarea を、
 * 固定項目リストは components/scroll-box.css の .scroll-box をそのまま流用する。
 */
.tab-row { display: flex; gap: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tab { font-size: 13px; padding: 8px 4px; color: var(--text-secondary); cursor: pointer; }
.tab.active { color: var(--accent); font-weight: 500; border-bottom: 2px solid var(--accent); }

.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--text-muted); transition: 0.2s; border-radius: 999px;
}
.toggle-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background: #fff; transition: 0.2s; border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.toggle-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toggle-card-label { font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.toggle-card-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0; }

.project-name-row { display: flex; align-items: center; gap: 10px; }
.project-name-edit { font-size: 13px; color: var(--accent); cursor: pointer; white-space: nowrap; }

.template-hint { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.merge-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.merge-chip {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.merge-chip:active { opacity: 0.7; }

.lp-builder-modal { padding-bottom: 8px; }
.lp-builder-section {
  margin: 14px 0;
  padding: 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.lp-title-mode { display: flex; gap: 16px; margin: 8px 0; font-size: 13px; }
.lp-media-actions { display: grid; gap: 6px; margin-top: 10px; }
.lp-title-image-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.lp-title-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-title-image-remove { position: absolute; top: 8px; right: 8px; border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.94); color: var(--danger); cursor: pointer; font: inherit; font-size: 12px; }
.lp-title-image-remove:disabled { opacity: .6; cursor: wait; }
.lp-video-preview {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 10px;
  border-radius: var(--radius);
  background: #1f242d;
}
.lp-video-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
.lp-media-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.lp-body-image-card { min-width: 0; overflow: hidden; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.lp-body-image-card > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-body-image-card > .template-hint { display: grid; min-height: 72px; place-items: center; padding: 8px; text-align: center; }
.lp-body-image-card-footer { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 8px; font-size: 11.5px; }
.lp-body-image-card-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-body-image-card-footer button { appearance: none; flex-shrink: 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; }
@media (max-width: 520px) { .lp-media-list { grid-template-columns: 1fr; } }

/* 長いフォーム設定でも、プレビューと保存操作を常に画面下部に残す。 */
.lp-builder-modal-overlay .modal-box {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
.lp-builder-modal-overlay .modal-body { overflow-y: auto; }
.lp-builder-modal-overlay .modal-footer { flex-shrink: 0; }
.lp-builder-modal-overlay .modal-footer .btn:first-child { margin-right: auto; }