/* ========================================
   設宁E
======================================== */

/* =====================================
[REF]
- HTML: #settingsModal .settings-section
- JS: なし
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.settings-section {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* =====================================
[REF]
- HTML: #settingsModal .settings-section h4
- JS: assets/js/ui/renderers.js（見出し更新）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.settings-section h4 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-item
- JS: なし
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.setting-item {
  margin-bottom: 1rem;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-item:last-child
- JS: なし
- STATE: :last-child
- LAYER: なし
- SPLIT: LAST
===================================== */
.setting-item:last-child {
  margin-bottom: 0;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-item label
- JS: assets/js/ui/renderers.js（ラベル更新）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.setting-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-item select / input
- JS: assets/app.js（設定更新）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.setting-item select,
.setting-item input[type="text"],
.setting-item input[type="number"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.875rem;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-item select:focus / input:focus
- JS: なし
- STATE: :focus
- LAYER: なし
- SPLIT: LAST
===================================== */
.setting-item select:focus,
.setting-item input:focus {
  outline: none;
  border-color: var(--accent);
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-hint
- JS: assets/js/ui/renderers.js（補足更新）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.setting-hint {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-warning
- JS: assets/js/ui/renderers.js（警告表示）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.setting-warning {
  color: #f0ad4e;
}

/* =====================================
[REF]
- HTML: #settingsModal .setting-actions
- JS: assets/app.js（データ操作ボタン）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.setting-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* =====================================
[REF]
- HTML: .secondary-btn（空状態/設定など）
- JS: assets/app.js（ボタン操作）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
.secondary-btn {
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* =====================================
[REF]
- HTML: .secondary-btn:hover
- JS: なし
- STATE: :hover
- LAYER: なし
- SPLIT: LAST
===================================== */
.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}