/* ========================================
   Base / Reset
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f6f6f7;
  color: #1a1a1a;
  font-size: 14px;
}

/* ========================================
   Header
   ======================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e1e3e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header h1 {
  font-size: 18px;
  font-weight: 600;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 未保存インジケータ */
.dirty-indicator {
  font-size: 12px;
  color: #b54708;
  background: #fef3c7;
  padding: 4px 10px;
  border-radius: 4px;
  display: none;
}

.dirty-indicator.visible {
  display: inline-block;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid #c4cdd5;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn:hover {
  background: #f4f6f8;
}

.btn-primary {
  background: #5c6ac4;
  color: #fff;
  border-color: #5c6ac4;
}

.btn-primary:hover {
  background: #4959bd;
}

.btn-secondary {
  background: #f4f6f8;
}

.btn-danger {
  color: #d72c0d;
  border-color: #d72c0d;
}

.btn-danger:hover {
  background: #fef1f1;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-back {
  text-decoration: none;
  color: #5c6ac4;
  border: none;
  padding: 4px;
}

/* 保存ボタンの状態表現 */
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   Sync Status
   ======================================== */
.sync-status {
  margin: 12px 20px;
  padding: 10px 16px;
  background: #eaf5ea;
  border: 1px solid #a4d4a4;
  border-radius: 6px;
  color: #1a7f37;
}

.sync-status.error {
  background: #fef1f1;
  border-color: #e8b4b4;
  color: #d72c0d;
}

/* ========================================
   App-wide Toggle (index page)
   ======================================== */
.app-toggle-section {
  margin: 20px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-toggle-section .toggle-label {
  font-size: 14px;
  font-weight: 600;
}

.app-toggle-section .toggle-hint {
  font-size: 12px;
  color: #6d7175;
  margin-top: 2px;
}

/* iOS風トグルスイッチ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #c4cdd5;
  border-radius: 24px;
  transition: 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #5c6ac4;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* 無効化（アプリ全体 OFF 時の機能トグル） */
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.4;
  cursor: not-allowed;
}

.app-toggle-section.is-disabled .toggle-label,
.app-toggle-section.is-disabled .toggle-hint {
  opacity: 0.5;
}

/* ========================================
   Option Sets List (index page, table format)
   ======================================== */
.option-sets-section {
  margin: 20px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e3e5;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 600;
}

.option-sets-table {
  width: 100%;
  border-collapse: collapse;
}

.option-sets-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #6d7175;
  background: #f6f6f7;
  border-bottom: 1px solid #e1e3e5;
}

.option-sets-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
}

.option-sets-table tbody tr:last-child td {
  border-bottom: none;
}

.option-sets-table tbody tr {
  cursor: move; /* D&D 用 */
}

.option-sets-table tbody tr.dragging {
  opacity: 0.3;
}

.option-sets-table tbody tr.drag-over {
  background: #f4f5fd;
  border-top: 2px solid #5c6ac4;
}

.option-sets-table .col-handle {
  width: 32px;
  color: #c4cdd5;
  cursor: grab;
  text-align: center;
}

.option-sets-table .col-name {
  font-weight: 600;
}

.option-sets-table .col-conditions {
  color: #6d7175;
  font-size: 12px;
  max-width: 320px;
}

.option-sets-table .col-choices {
  text-align: center;
  color: #6d7175;
}

.option-sets-table .col-status {
  width: 80px;
}

.option-sets-table .col-actions {
  width: 200px;
  text-align: right;
}

.option-sets-table .col-actions .btn {
  margin-left: 4px;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.active {
  background: #eaf5ea;
  color: #1a7f37;
}

.status-badge.inactive {
  background: #f1f1f1;
  color: #6d7175;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #6d7175;
}

.empty-state p {
  margin-bottom: 12px;
}

.loading {
  padding: 40px;
  text-align: center;
  color: #6d7175;
}

/* ========================================
   Edit Page Layout (1 column, centered)
   ======================================== */
.edit-container {
  max-width: 62.375rem; /* 998px */
  margin: 0 auto;
  padding: 24px 20px;
}

.edit-section {
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.edit-section-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e1e3e5;
  background: #fafbfc;
}

.edit-section-header h2 {
  font-size: 15px;
  font-weight: 600;
}

.edit-section-header .hint {
  font-size: 12px;
  color: #6d7175;
  margin-top: 2px;
}

.edit-section-body {
  padding: 20px;
}

/* フォームレイアウト */
.form-row {
  margin-bottom: 16px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.form-row .field-hint {
  font-size: 11px;
  color: #8c9196;
  margin-top: 4px;
}

.form-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-row-inline label {
  margin-bottom: 0;
  font-weight: 400;
}

/* ========================================
   Form Elements (shared)
   ======================================== */
.input,
.select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: #5c6ac4;
  box-shadow: 0 0 0 1px #5c6ac4;
}

.input-sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* ========================================
   Modal (shared)
   ======================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  min-width: 400px;
  max-width: 90vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
  margin-bottom: 12px;
}

.modal-content label {
  display: block;
  font-size: 12px;
  color: #666;
  margin: 12px 0 4px;
}

.readonly-text {
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  word-break: break-all;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* マッチング商品プレビュー用 */
.match-products-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
}

.match-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f1f1;
}

.match-product-item:last-child {
  border-bottom: none;
}

.match-product-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  background: #f0f0f0;
  flex-shrink: 0;
}

.match-product-item .product-info {
  flex: 1;
  min-width: 0;
}

.match-product-item .product-title {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-product-item .product-meta {
  font-size: 11px;
  color: #6d7175;
  margin-top: 2px;
}

.modal-content.modal-large {
  min-width: 600px;
  max-width: 80vw;
}

/* 静的表示用テキスト（Input Type のような変更不可な項目） */
.field-static {
  padding: 8px 12px;
  background: #f6f6f7;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
  font-size: 13px;
  color: #6d7175;
}

/* チェックボックス + ラベル横並び調整 */
.form-row-inline input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.form-row-inline label {
  cursor: pointer;
  user-select: none;
}

/* ========================================
   Condition Rows
   ======================================== */
.condition-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.condition-row .condition-field {
  width: 140px;
  flex-shrink: 0;
}

.condition-row .condition-operator {
  width: 130px;
  flex-shrink: 0;
}

.condition-row .condition-value {
  flex: 1;
  min-width: 180px;
}

.condition-row .condition-operator-readonly {
  width: 130px;
  flex-shrink: 0;
  padding: 8px 12px;
  background: #f6f6f7;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
  font-size: 13px;
  color: #6d7175;
  text-align: center;
}

/* AND/OR トグル */
.join-toggle {
  display: inline-flex;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.join-toggle button {
  border: none;
  background: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #6d7175;
  transition: background 0.15s;
}

.join-toggle button:hover {
  background: #f4f6f8;
}

.join-toggle button.active {
  background: #5c6ac4;
  color: #fff;
}

.join-toggle button + button {
  border-left: 1px solid #c4cdd5;
}

/* 条件削除ボタン */
.btn-remove-condition {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c4cdd5;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #6d7175;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-condition:hover {
  background: #fef1f1;
  border-color: #d72c0d;
  color: #d72c0d;
}

/* 全商品モード時 / CL 無効時の条件UI無効化 */
#conditions-container.disabled,
#conditional-container.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* マッチングプレビュー */
.match-link {
  color: #5c6ac4;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.match-link:hover {
  text-decoration: underline;
}

.match-link.uncalculated {
  color: #8c9196;
}

#match-count {
  font-weight: 700;
}

/* ========================================
   Choices Group
   ======================================== */
.choices-group {
  border: 1px solid #e1e3e5;
  border-radius: 6px;
  background: #fafbfc;
}

.choices-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f4f6f8;
  border-bottom: 1px solid #e1e3e5;
  border-radius: 6px 6px 0 0;
}

.choices-group-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.choices-list {
  padding: 8px;
  min-height: 60px;
}

.choices-empty {
  padding: 16px;
  text-align: center;
  color: #8c9196;
  font-size: 12px;
}

/* 選択肢行（CSS Grid で列揃え） */
.choice-row {
  display: grid;
  grid-template-columns: 24px 1fr 1.4fr 1.2fr 80px 60px 32px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
  margin-bottom: 6px;
}

.choice-row:last-child {
  margin-bottom: 0;
}

.choice-row.dragging {
  opacity: 0.3;
}

.choice-row.drag-over {
  border-color: #5c6ac4;
  background: #f4f5fd;
}

.choice-row .choice-handle {
  color: #c4cdd5;
  cursor: grab;
  text-align: center;
  font-size: 14px;
  user-select: none;
}

.choice-row .input,
.choice-row .input-sm {
  margin: 0;
}

/* 列ヘッダー */
.choices-column-header {
  display: grid;
  grid-template-columns: 24px 1fr 1.4fr 1.2fr 80px 60px 32px;
  gap: 12px;
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6d7175;
  border-bottom: 1px solid #e1e3e5;
}

.choices-column-header div {
  text-align: center;
}

.choices-column-header .col-center {
  text-align: center;
}

/* 列ヘッダー：狭い画面対応（choice-row のメディアクエリと合わせる） */
@media (max-width: 900px) {
  .choices-column-header {
    grid-template-columns: 24px 1fr 1.4fr 1fr 60px 50px 28px;
    gap: 4px;
    font-size: 10px;
  }
}

/* 商品選択ボタン（サムネ + 商品名） */
.choice-product-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  min-height: 32px;
  overflow: hidden;
}

.choice-product-btn:hover {
  background: #f4f6f8;
  border-color: #5c6ac4;
}

.choice-product-btn img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
  background: #f0f0f0;
  flex-shrink: 0;
}

.choice-product-btn .choice-product-name {
  /* flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.choice-variant-name {
  font-size: 11px;
  color: #6d7175;
  font-weight: normal;
}

.choice-product-btn.empty {
  color: #8c9196;
  font-style: italic;
}

/* デフォルト指定 */
.choice-default {
  text-align: center;
}

.choice-default input[type="checkbox"] {
  cursor: pointer;
}

/* 複製ボタン（ドロップダウンメニュー付き） */
.choice-duplicate-wrap {
  position: relative;
}

.choice-duplicate-btn {
  width: 100%;
  padding: 5px 4px;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  color: #1a1a1a;
}

.choice-duplicate-btn:hover {
  background: #f4f6f8;
}

.choice-duplicate-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 50;
  min-width: 160px;
}

.choice-duplicate-menu.open {
  display: block;
}

.choice-duplicate-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: #1a1a1a;
}

.choice-duplicate-menu button:hover {
  background: #f4f6f8;
}

/* 削除ボタン */
.btn-remove-choice {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c4cdd5;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #6d7175;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-choice:hover {
  background: #fef1f1;
  border-color: #d72c0d;
  color: #d72c0d;
}

/* 狭い画面では列を圧縮 */
@media (max-width: 900px) {
  .choice-row {
    grid-template-columns: 24px 1fr 1.4fr 1fr 60px 50px 28px;
    gap: 4px;
  }
  .choice-row .input,
  .choice-row .input-sm,
  .choice-product-btn {
    font-size: 11px;
  }
}

/* ========================================
   input_type='checkbox' 時の表示制御
   ======================================== */

/* 在庫なしグループ全体を非表示 */
.choices-body--checkbox .choices-group[data-group="out_of_stock"] {
  display: none !important;
}

/* 列ヘッダーの「商品」「デフォルト」列を非表示 */
/* 既存の grid-template-columns: 24px 1fr 1.4fr 1.2fr 80px 60px 32px
   列の意味: ハンドル / ラベル / 商品 / 注釈 / デフォルト / 複製 / 削除
   checkbox 時の grid: ハンドル / ラベル / 注釈 / 複製 / 削除 */
.choices-body--checkbox .choices-column-header,
.choices-body--checkbox .choice-row {
  grid-template-columns: 24px 4fr 1.2fr 60px 32px !important;
}

/* 列ヘッダーの 3, 4, 5 番目（商品列、デフォルト列）を非表示 */
.choices-body--checkbox .choices-column-header > div:nth-child(3),
.choices-body--checkbox .choices-column-header > div:nth-child(4),
.choices-body--checkbox .choices-column-header > div:nth-child(5) {
  display: none !important;
}

/* 注釈inputも非表示 */
.choices-body--checkbox .choice-annotation {
  display: none !important;
}

/* 複製ボタンも非表示 */
.choices-body--checkbox .choice-duplicate-wrap {
  display: none !important;
}

/* choice-row 内の商品ボタンとデフォルトチェックを非表示 */
.choices-body--checkbox .choice-product-btn,
.choices-body--checkbox .choice-default {
  display: none !important;
}

/* 狭い画面用も grid 列数を合わせる */
@media (max-width: 900px) {
  .choices-body--checkbox .choices-column-header,
  .choices-body--checkbox .choice-row {
    grid-template-columns: 24px 1fr 50px 28px !important;
  }
}

/* ========================================
   Validation Errors
   ======================================== */

/* 警告メッセージバー（保存セクション上部に表示） */
.validation-warning {
  margin: 12px 0;
  padding: 10px 16px;
  background: #fef1f1;
  border: 1px solid #e8b4b4;
  border-radius: 6px;
  color: #d72c0d;
  font-size: 13px;
}

.validation-warning ul {
  margin-top: 4px;
  padding-left: 20px;
}

/* エラーのある入力欄 */
.input.has-error,
.choice-row.has-error {
  border-color: #d72c0d !important;
  background: #fef1f1;
}

.input.has-error:focus {
  box-shadow: 0 0 0 1px #d72c0d;
}

.choice-row.has-error {
  background: #fef9f9;
}

/* ========================================
  Responsive
  ======================================== */
@media (max-width: 720px) {
  .option-sets-table .col-conditions,
  .option-sets-table .col-choices {
    display: none;
  }
  .edit-container {
    padding: 12px;
  }
}

/* ========================================
   Tabs (index page)
   ======================================== */
.tab-nav {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e1e3e5;
}

.tab-btn {
  border: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #6d7175;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}

.tab-btn:hover {
  color: #1a1a1a;
}

.tab-btn.active {
  color: #5c6ac4;
  border-bottom-color: #5c6ac4;
}

/* タブバー右端のアプリ全体 ON/OFF */
.tab-nav__toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tab-nav__toggle .toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ========================================
   Groups (任意オプション：階層管理)
   ======================================== */
.groups-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px;
}

.groups-toolbar h2 {
  font-size: 16px;
  font-weight: 600;
}

.groups-accordion {
  margin: 0 20px 20px;
}

.group-item {
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fafbfc;
  cursor: move;
}

.group-header.dragging {
  opacity: 0.3;
}

.group-header.drag-over {
  background: #f4f5fd;
  box-shadow: inset 0 2px 0 #5c6ac4;
}

.group-handle {
  color: #c4cdd5;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.group-caret {
  border: none;
  background: transparent;
  color: #6d7175;
  cursor: pointer;
  font-size: 11px;
  width: 18px;
  flex-shrink: 0;
  font-family: inherit;
}

.group-name {
  font-size: 14px;
  font-weight: 600;
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  min-width: 80px;
}

.group-name:hover {
  background: #eef0f2;
}

.group-count {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 10px;
  background: #eef0f2;
  color: #6d7175;
  font-size: 11px;
  font-weight: 600;
}

.group-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.group-body-inner {
  padding: 8px 12px 12px;
}

.fields-empty {
  padding: 16px;
  text-align: center;
  color: #8c9196;
  font-size: 12px;
  border: 1px dashed #e1e3e5;
  border-radius: 6px;
}

/* 設問行 */
.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: move;
}

.field-row:last-child {
  margin-bottom: 0;
}

.field-row.dragging {
  opacity: 0.3;
}

.field-row.drag-over {
  border-color: #5c6ac4;
  background: #f4f5fd;
}

.field-handle {
  color: #c4cdd5;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.field-name {
  font-size: 13px;
  font-weight: 600;
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  flex: 1;
  min-width: 100px;
}

.field-name:hover {
  background: #f4f6f8;
}

.field-targeting {
  font-size: 12px;
  color: #6d7175;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-choices {
  font-size: 12px;
  color: #6d7175;
  width: 70px;
  flex-shrink: 0;
  text-align: center;
}

.field-status {
  width: 56px;
  flex-shrink: 0;
}

.field-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ===== 4階層化：親グループ ＞ 子グループ ＞ 親アイテム ＞ 子アイテム ===== */

/* 子グループを親グループ内でインデント */
.group-item--child {
  margin: 0 0 8px 24px;
  border-color: #e8eaec;
}

.group-item--child:last-child {
  margin-bottom: 0;
}

.group-header--child {
  background: #fff;
  padding: 10px 12px;
}

.group-header--child .group-name {
  font-size: 13px;
}

.groups-empty-children {
  margin-left: 24px;
  padding: 14px;
  text-align: center;
  color: #8c9196;
  font-size: 12px;
  border: 1px dashed #e1e3e5;
  border-radius: 6px;
}

/* 親アイテム配下の子アイテム群 */
.field-children {
  margin: 6px 0 0 24px;
  padding-left: 12px;
  border-left: 2px solid #e8eaec;
}

.field-children .fields-empty {
  margin: 0;
}

/* インライン編集用 input（フォルダ名・設問名共通） */
.inline-edit-input {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  padding: 2px 6px;
  border: 1px solid #5c6ac4;
  border-radius: 4px;
  outline: none;
  width: 220px;
  max-width: 100%;
}

/* ===== 表示ルール（子グループヘッダー内・行内編集） ===== */
.group-targeting {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  cursor: default;
}

.targeting-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6d7175;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.targeting-all input[type="checkbox"] {
  cursor: pointer;
}

.targeting-rows {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* 「全ての商品」時は条件行を無効化（field.js の #conditions-container.disabled と同じ考え方） */
.targeting-rows.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.targeting-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
}

.targeting-empty {
  font-size: 11px;
  color: #aaa;
}

.targeting-row .targeting-criterion {
  width: 92px;
  flex-shrink: 0;
}

.targeting-row .targeting-operator {
  width: 104px;
  flex-shrink: 0;
}

.targeting-row .targeting-value {
  width: 150px;
  flex-shrink: 0;
}

.targeting-add {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ヘッダー内に収めるための縮小版 */
.join-toggle--sm button {
  padding: 3px 7px;
  font-size: 10px;
}

.btn-remove-condition--sm {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

/* ===== 設問行：条件付き表示ロジック ボタン ===== */
.cl-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  background: #fff;
  color: #8c9196;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cl-btn:hover {
  border-color: #5c6ac4;
  color: #5c6ac4;
}

/* CL が有効な設問は一目で分かるようにする */
.cl-btn.is-active {
  background: #bababa;
  border-color: #bababa;
  color: #fff;
}

/* ===== 選択肢行（設問配下の入れ子） ===== */
.value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  margin-bottom: 4px;
  cursor: move;
}

.value-row:last-child {
  margin-bottom: 0;
}

.value-row.dragging {
  opacity: 0.3;
}

.value-row.drag-over {
  border-color: #5c6ac4;
  background: #f4f5fd;
}

.value-label {
  font-size: 12px;
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  flex: 1;
  min-width: 100px;
}

.value-label:hover {
  background: #f4f6f8;
}

.value-annotation {
  font-size: 11px;
  color: #6d7175;
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  width: 240px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-annotation:hover {
  background: #f4f6f8;
}

.value-row .choice-product-btn {
  width: 380px;
  flex-shrink: 0;
}

.value-default {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  cursor: pointer;
}

.value-default input[type="checkbox"] {
  cursor: pointer;
}

.value-product-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* .value-product-wrap .choice-product-btn {
  flex: 1;
  min-width: 0;
} */

.value-product-clear {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #c4cdd5;
  background: #fff;
  border-radius: 4px;
  color: #6d7175;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.value-product-clear:hover {
  background: #fef1f1;
  border-color: #d72c0d;
  color: #d72c0d;
}

/* ===== CL ダイアログ ===== */
.cl-dialog-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.cl-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ===== ガイド設定ボタン（設問行） ===== */
.guide-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.15s, filter 0.15s;
}
.guide-btn:hover {
  opacity: 0.8;
}
.guide-btn.is-active {
  opacity: 1;
  filter: none;
}

/* ===== ガイド設定ダイアログ ===== */
.guide-dialog-body {
  padding: 4px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.guide-section {
  margin-bottom: 18px;
}
.guide-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #202223;
}
.guide-textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}
.guide-preview {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid #e1e3e5;
  border-radius: 6px;
  background: #f6f6f7;
  text-align: center;
}
.guide-preview img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin: 0 auto 8px;
  border-radius: 4px;
}
.guide-preview--empty {
  color: #8c9196;
  font-size: 13px;
  padding: 20px 10px;
}
.guide-upload-row {
  margin-top: 4px;
}
.guide-uploading {
  font-size: 13px;
  color: #2c6ecb;
  margin: 6px 0;
}
.modal-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .field-targeting,
  .field-choices {
    display: none;
  }
}