/* --- 設定タブ：マスタ管理 --- */
  .master-menu-list { display: flex; flex-direction: column; gap: 10px; }
  .content-version-note {
    margin-top: 20px;
    padding: 0 4px;
    font-size: 11.5px;
    color: var(--ink-faint);
    text-align: center;
  }
  .master-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-card);
  }
  .master-menu-item::after { content: '›'; color: var(--ink-faint); font-size: 18px; }
  #logoutMenuItem::after { content: none; }
  /* 名前＋1行の説明（バックログ#33-7） */
  .master-menu-label { display: flex; flex-direction: column; gap: 3px; }
  .master-menu-desc { font-size: 12px; font-weight: 400; color: var(--ink-muted); line-height: 1.4; }
  .master-menu-item:active { background: var(--surface-sunk); }

  .master-back-btn {
    border: none;
    background: none;
    color: var(--pine-deep);
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 4px;
    margin-bottom: 6px;
    cursor: pointer;
  }

  .include-completed-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-muted);
    padding: 0 4px 10px;
    cursor: pointer;
  }
  .include-completed-check input { width: 16px; height: 16px; }

  .master-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .master-list-empty { padding: 20px 4px; color: var(--ink-faint); font-size: 13px; text-align: center; }
  .master-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-card);
  }
  .master-row-body { flex: 1; min-width: 0; }
  .master-row-name { font-size: 14px; font-weight: 700; color: var(--ink); }
  /* 勤怠設定：勤務日以外（休日・欠勤等）の項目だけに付ける目印バッジ（2026-09-24追加）。 */
  .master-row-non-workday-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .master-row-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
  .master-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .master-row-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: var(--surface-sunk);
    color: var(--ink-faint);
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .master-row-btn.edit:active { background: var(--pine-soft); color: var(--pine-deep); }
  .master-row-btn.delete:active { background: var(--brick-soft); color: var(--brick); }

  /* アイコン選択ピッカー（勤怠設定、2026-09-23追加）。用意されたアイコン画像から
     1つをタップで選ぶ。選択状態はpineの枠＋淡い背景で示す（.editable-cardと同系統）。 */
  .icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 10px;
  }
  .icon-picker-item {
    width: 44px;
    height: 44px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .icon-picker-item img { width: 24px; height: 24px; }
  .icon-picker-item.selected {
    border-color: var(--pine);
    background: var(--pine-soft);
  }
  .icon-picker-item:active { background: var(--surface-sunk); }
  .icon-picker-item.selected:active { background: var(--pine-soft); }

  .master-cancel-edit-btn {
    width: 100%;
    margin-top: 8px;
    border: none;
    background: none;
    color: var(--ink-faint);
    font-size: 12.5px;
    padding: 8px;
    cursor: pointer;
  }

  /* 編集ボタンを押した行のすぐ下に現れるインライン編集フォーム。
     カード風の見た目にして、対象の行と視覚的に繋がっていることを
     枠線の色で示す（下までスクロールしなくても編集できるようにするための仕組み）。 */
  .inline-edit-panel {
    background: var(--surface);
    border: 1.5px solid var(--pine);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-top: -2px;
  }

  /* タスクマスターのステータス（未着手/実施中/完了）を選ぶトグルボタン群 */
  .status-toggle-group { display: flex; gap: 8px; }
  .status-toggle-pill {
    flex: 1;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    border-radius: var(--radius-sm);
    padding: 9px 0;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .status-toggle-pill.active {
    background: var(--pine-soft);
    border-color: var(--pine);
    color: var(--pine-deep);
  }
  .status-toggle-pill.active[data-status="完了"] {
    background: var(--pine);
    color: #fff;
  }

  .backup-desc {
    font-size: 12.5px;
    color: var(--ink-faint);
    line-height: 1.7;
    margin: 8px 0 12px;
  }

  /* 気分設定：画像プレビュー・段階リストの行 */
  .mood-level-image-picker { display: flex; align-items: center; gap: 12px; }
  .mood-level-image-preview {
    width: 56px; height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px;
    color: var(--ink-faint);
    overflow: hidden;
  }
  .mood-level-image-preview img { width: 100%; height: 100%; object-fit: contain; }
  .mood-level-row-thumb {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .mood-level-row-thumb img { width: 100%; height: 100%; object-fit: contain; }

  .backup-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
  }
  .backup-status-badge.ok { background: var(--pine-soft); color: var(--pine-deep); }
  .backup-status-badge.ng { background: var(--brick-soft); color: var(--brick); }


/* 「使い方」の設定（#usageDetail、バックログ#40-3-13）: 1日に作業に使える時間の欄 */
.usage-hours-row { display: flex; align-items: center; gap: 8px; }
.usage-hours-row .usage-hours-input { width: 96px; flex: 0 0 96px; }
.usage-hours-unit { font-size: 13.5px; color: var(--ink); }
/* 欄の下のエラー文（文字だけ。背景は塗らない） */
.usage-field-error { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--brick); }

/* 「使い方」の設定（バックログ#40-3-1）: チェックボックスの行と「高度な設定」の器。
   中身ができるまでの間は各要素をhidden属性で隠すので、[hidden]を確実に効かせる */
.usage-pref-card[hidden], .usage-advanced[hidden], .usage-ai-key-note[hidden] { display: none; }
/* 「高度な設定」の折りたたみ（閉じた状態が初期値）。見出しは文字だけ＋開閉の印。中身（カード）は40-3-6等で入れる */
.usage-advanced { margin-top: 8px; }
.usage-advanced-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
}
.usage-advanced-summary::-webkit-details-marker { display: none; }
.usage-advanced-summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.usage-advanced[open] > .usage-advanced-summary::before { transform: rotate(45deg); }
.usage-advanced-body { padding-top: 8px; }

/* 「高度な設定」の中のカード（バックログ#40-3-6）: キャパの目安・「明日にそなえる」に切り替わる時刻 */
.usage-advanced-body > .card + .card { margin-top: 12px; }
.usage-capacity-subhead { margin: 10px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* 曜日の欄: スマホは4つ＋3つで折り返し、PCは横1列（下のPC版） */
.usage-capacity-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.usage-capacity-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.usage-capacity-day-label { font-size: 12px; color: var(--ink-muted); }
.usage-capacity-field { display: flex; align-items: center; gap: 4px; min-width: 0; }
.usage-capacity-field .usage-capacity-input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 9px 6px; }
.usage-capacity-field .usage-hours-unit { flex: 0 0 auto; font-size: 12.5px; }
.usage-hours-row .usage-time-input { width: 128px; flex: 0 0 128px; }
@media (min-width: 1024px) {
  .usage-capacity-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}


/* =====================================================================
 * 設定タブ デザイン刷新 案A（docs/design-refresh/settings-spec.md、2026-10-11）
 * 値は docs/design-refresh/settings-concept-a.css から移植。他タブへ漏れないよう
 * すべて body[data-view="settings"] 配下に限定する。
 * #masterMenu と各 [id$="Detail"] の表示/非表示は JS のインライン style.display に任せる
 * （下のPC用 display:grid はインラインの display:none に負けるので、非表示の詳細は出ない）。
 * 旧PC版の「最大幅720px・左寄せ」（#33-14）はこのブロックの最大1120px／940pxへ置き換えた。
 * ===================================================================== */
body[data-view="settings"] {
  --settings-blue: #1a7899;
  --settings-blue-deep: #174f70;
  --settings-aqua: #dff2f4;
  --settings-line: rgba(139, 188, 199, 0.46);
  --settings-shadow: 0 7px 22px rgba(34, 82, 101, 0.08);
}

body[data-view="settings"] .app {
  background:
    linear-gradient(rgba(238, 248, 250, 0.08), rgba(247, 250, 250, 0.16)),
    url("../assets/today-bg-sea-sunrise.webp") center / cover no-repeat,
    #edf7f8;
}

body[data-view="settings"] .app > .app-content,
body[data-view="settings"] .main-scroll-wrapper {
  background: rgba(245, 249, 250, 0.64);
}

body[data-view="settings"] .app-content > header.app-header {
  background: rgba(249, 252, 252, 0.76);
  border-bottom: 1px solid rgba(184, 213, 218, 0.58);
  box-shadow: 0 3px 16px rgba(31, 87, 101, 0.045);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body[data-view="settings"] .app-header-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--settings-blue-deep);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
}

body[data-view="settings"] .app-header-title::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(110, 180, 194, 0.38);
  border-radius: 10px;
  background:
    rgba(218, 242, 245, 0.82)
    url("../assets/icons/menu/menu_icon_settings.png") center / 20px 20px no-repeat;
  box-shadow: 0 3px 10px rgba(28, 96, 112, 0.08);
  filter: saturate(0.72) hue-rotate(-8deg);
}

body[data-view="settings"] #view-settings {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- トップメニュー ---------- */
body[data-view="settings"] #masterMenu > h2.card-title {
  margin: 0;
  padding: 0 4px 9px !important;
  color: #315765;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

body[data-view="settings"] #masterMenu > .master-menu-list {
  gap: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--settings-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--settings-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="usage"]) {
  background:
    linear-gradient(100deg, rgba(218, 241, 242, 0.94), rgba(247, 251, 250, 0.9));
  border-color: rgba(87, 166, 180, 0.48);
}

body[data-view="settings"] .master-menu-item {
  min-height: 60px;
  padding: 11px 14px 11px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #294c59;
}

body[data-view="settings"] .master-menu-item + .master-menu-item {
  border-top: 1px solid rgba(153, 193, 198, 0.34);
}
/* AIオフでGemini APIキーの行を隠した時（#43-11、shared.css）、次の行が先頭になるので上の区切り線を消す */
html.prefs-no-ai body[data-view="settings"] .master-menu-item[data-master="aiSettings"] + .master-menu-item {
  border-top: 0;
}

body[data-view="settings"] .master-menu-item::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 9px;
  background: rgba(224, 241, 242, 0.76);
  color: #38768a;
  font-size: 18px;
}

body[data-view="settings"] .master-menu-item:hover,
body[data-view="settings"] .master-menu-item:active {
  background: rgba(225, 243, 244, 0.56);
}

body[data-view="settings"] .master-menu-label {
  gap: 2px;
}

body[data-view="settings"] .master-menu-label > span:first-child {
  color: #244b5a;
  font-size: 14px;
  font-weight: 800;
}

body[data-view="settings"] .master-menu-desc {
  color: #71878d;
  font-size: 11.5px;
  line-height: 1.35;
}

body[data-view="settings"] #masterMenu > .master-menu-list:has(#logoutMenuItem) {
  margin-top: 18px !important;
  border-color: rgba(190, 110, 97, 0.3);
  background: rgba(255, 250, 249, 0.78);
  box-shadow: none;
}

body[data-view="settings"] #logoutMenuItem {
  min-height: 46px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
  justify-content: center;
}

body[data-view="settings"] .content-version-note {
  margin-top: 12px;
  color: #86999e;
}

/* ---------- 詳細画面の共通骨格 ---------- */
body[data-view="settings"] #view-settings > [id$="Detail"] {
  max-width: 940px;
  margin: 0 auto;
}

body[data-view="settings"] #simpleMasterDetail,
body[data-view="settings"] #stressorMasterDetail,
body[data-view="settings"] #copingMasterDetail {
  max-width: 1060px;
}

body[data-view="settings"] .master-back-btn {
  min-height: 34px;
  margin: 0 0 8px;
  padding: 6px 12px;
  border: 1px solid rgba(74, 145, 160, 0.4);
  border-radius: 999px;
  background: rgba(246, 252, 252, 0.78);
  color: #17677c;
  font-size: 12.5px;
  box-shadow: 0 3px 10px rgba(31, 91, 105, 0.05);
}

body[data-view="settings"] #view-settings > [id$="Detail"] > h2.card-title {
  margin: 0 0 12px;
  /* #35-16（SET-2）: today.cssの汎用h2.card-titleのpadding:10pxを消し、「戻る」・説明文と左端をそろえる */
  padding: 0;
  color: var(--settings-blue-deep);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

body[data-view="settings"] #view-settings .card,
body[data-view="settings"] #view-settings .master-row,
body[data-view="settings"] #view-settings .inline-edit-panel {
  border: 1px solid var(--settings-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.89);
  box-shadow: var(--settings-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body[data-view="settings"] #view-settings .card {
  padding: 16px;
}

/* 選択パネル（.modern-select の .tag-picker-panel、z-index 15）を開いている間は、そのカードを後続の一覧より前面に出す（#35-3）。
   カード・.master-row は backdrop-filter で重なりの単位（stacking context）になるため、パネルの z-index はカードの中でしか効かず、
   後に並ぶ .master-row がパネルを覆って選べなかった（ストレッサーの「推奨コーピング」）。 */
body[data-view="settings"] #view-settings .card:has(.tag-picker-panel.open) {
  position: relative;
  z-index: 16;
}

body[data-view="settings"] #view-settings .card-title {
  color: #2b505e;
  font-weight: 800;
}

body[data-view="settings"] #view-settings .backup-desc {
  color: #70858b;
  font-size: 12px;
  line-height: 1.65;
}

body[data-view="settings"] #view-settings .task-form-input,
body[data-view="settings"] #view-settings .modern-select-trigger {
  border-color: rgba(143, 181, 188, 0.46);
  background: rgba(252, 253, 252, 0.92);
}

body[data-view="settings"] #view-settings .task-form-input:focus,
body[data-view="settings"] #view-settings .modern-select-trigger:focus {
  border-color: rgba(38, 130, 148, 0.72);
  box-shadow: 0 0 0 3px rgba(82, 174, 188, 0.12);
}

body[data-view="settings"] #view-settings input[type="checkbox"],
body[data-view="settings"] #view-settings input[type="radio"] {
  accent-color: #287f85;
}

body[data-view="settings"] #view-settings .task-form-submit {
  background: linear-gradient(135deg, #2f7f82, #1f708b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(35, 103, 118, 0.14);
}

body[data-view="settings"] #view-settings .task-form-cancel-btn,
body[data-view="settings"] #view-settings .master-cancel-edit-btn,
body[data-view="settings"] #view-settings .master-row-btn {
  background: rgba(231, 240, 238, 0.82);
  color: #59757d;
}

/* #35-15（SET-1）: 画像ピッカー内のボタンだけ、共用.master-cancel-edit-btnの上margin 8pxを消してプレビューと中心をそろえる
   （追加フォームの#moodLevelAddImageBtnと、既存段階の編集時に作る同じ構造のボタン） */
body[data-view="settings"] #moodLevelAddImageBtn,
body[data-view="settings"] #view-settings .mood-level-image-picker > .master-cancel-edit-btn {
  margin-top: 0;
}

body[data-view="settings"] #view-settings .status-toggle-pill.active,
body[data-view="settings"] #view-settings .icon-picker-item.selected {
  border-color: #2f7f82;
  background: rgba(218, 239, 239, 0.92);
  color: #195e70;
}

body[data-view="settings"] #view-settings .status-toggle-pill.active[data-status="完了"] {
  background: #2f7f82;
  color: #fff;
}

body[data-view="settings"] #view-settings .master-row {
  min-height: 48px;
  padding: 9px 12px;
}

body[data-view="settings"] #view-settings .master-row-name {
  color: #294e5c;
}

body[data-view="settings"] .usage-advanced-summary {
  color: #386473;
}

/* ---------- PC ---------- */
@media (min-width: 1024px) {
  body[data-view="settings"] .app-content > header.app-header {
    height: 60px;
    padding: 0 24px;
    box-sizing: border-box;
  }

  body[data-view="settings"] header.app-header .day-nav {
    width: 100%;
    min-height: 60px;
    align-items: center;
  }

  body[data-view="settings"] main {
    padding-top: 12px;
  }

  body[data-view="settings"] #masterMenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "usage-title usage-title"
      "usage-list usage-list"
      "record-title plan-title"
      "record-list plan-list"
      "record-list data-title"
      "record-list data-list"
      "logout logout"
      "version version";
    grid-template-rows: auto auto auto auto auto auto auto auto;
    column-gap: 14px;
    row-gap: 0;
  }

  body[data-view="settings"] #masterMenu > h2:nth-of-type(1) { grid-area: usage-title; }
  body[data-view="settings"] #masterMenu > h2:nth-of-type(2) { grid-area: record-title; margin-top: 16px; }
  body[data-view="settings"] #masterMenu > h2:nth-of-type(3) { grid-area: plan-title; margin-top: 16px; }
  body[data-view="settings"] #masterMenu > h2:nth-of-type(4) { grid-area: data-title; margin-top: 16px; }
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="usage"]) { grid-area: usage-list; }
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="moodScale"]) { grid-area: record-list; align-self: start; }
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="category"]) { grid-area: plan-list; }
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="aiSettings"]) { grid-area: data-list; }
  body[data-view="settings"] #masterMenu > .master-menu-list:has(#logoutMenuItem) { grid-area: logout; }
  body[data-view="settings"] #masterMenu > .content-version-note { grid-area: version; }

  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="usage"]) .master-menu-item {
    min-height: 68px;
  }

  body[data-view="settings"] #usageDetail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-view="settings"] #usageDetail > .master-back-btn,
  body[data-view="settings"] #usageDetail > h2,
  body[data-view="settings"] #usageDetail > #workHoursCard,
  body[data-view="settings"] #usageDetail > #usageAdvanced {
    grid-column: 1 / -1;
  }

  body[data-view="settings"] #usageDetail > .master-back-btn { justify-self: start; }
  body[data-view="settings"] #usageDetail > h2 { margin-bottom: 0 !important; }
  body[data-view="settings"] #usageDetail > #workHoursCard { margin-top: 0; }

  body[data-view="settings"] #simpleMasterDetail,
  body[data-view="settings"] #stressorMasterDetail,
  body[data-view="settings"] #copingMasterDetail {
    display: grid;
    grid-template-columns: minmax(330px, 0.86fr) minmax(0, 1.14fr);
    align-items: start;
    gap: 12px 14px;
  }

  body[data-view="settings"] #simpleMasterDetail > .master-back-btn,
  body[data-view="settings"] #simpleMasterDetail > h2,
  body[data-view="settings"] #simpleMasterDetail > .backup-desc,
  body[data-view="settings"] #stressorMasterDetail > .master-back-btn,
  body[data-view="settings"] #stressorMasterDetail > h2,
  body[data-view="settings"] #copingMasterDetail > .master-back-btn,
  body[data-view="settings"] #copingMasterDetail > h2 {
    grid-column: 1 / -1;
  }

  body[data-view="settings"] #simpleMasterDetail > .master-back-btn,
  body[data-view="settings"] #stressorMasterDetail > .master-back-btn,
  body[data-view="settings"] #copingMasterDetail > .master-back-btn { justify-self: start; }

  body[data-view="settings"] #simpleMasterDetail > h2,
  body[data-view="settings"] #stressorMasterDetail > h2,
  body[data-view="settings"] #copingMasterDetail > h2 { margin-bottom: 0 !important; }

  body[data-view="settings"] #simpleMasterDetail > section.card,
  body[data-view="settings"] #stressorMasterDetail > section.card,
  body[data-view="settings"] #copingMasterDetail > section.card { grid-column: 1; }

  body[data-view="settings"] #simpleMasterDetail > .master-list,
  body[data-view="settings"] #stressorMasterDetail > .master-list,
  body[data-view="settings"] #copingMasterDetail > .master-list { grid-column: 2; margin: 0; }

  body[data-view="settings"] #moodScaleDetail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px 14px;
  }

  body[data-view="settings"] #moodScaleDetail > .master-back-btn,
  body[data-view="settings"] #moodScaleDetail > h2,
  body[data-view="settings"] #moodScaleDetail > p,
  body[data-view="settings"] #moodScaleDetail > h3,
  body[data-view="settings"] #moodScaleDetail > .master-list {
    grid-column: 1 / -1;
  }

  body[data-view="settings"] #moodScaleDetail > .master-back-btn { justify-self: start; }
  body[data-view="settings"] #moodScaleDetail > h2,
  body[data-view="settings"] #moodScaleDetail > p { margin-bottom: 0; }
  body[data-view="settings"] #moodScaleDetail > section.card:first-of-type { grid-column: 1; }
  body[data-view="settings"] #moodScaleDetail > #moodLevelAddCard { grid-column: 2; grid-row: 4; }
}

/* ---------- スマホ縦 ---------- */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="settings"] .app > .app-content,
  body[data-view="settings"] .main-scroll-wrapper {
    background: rgba(245, 249, 250, 0.54);
  }

  body[data-view="settings"] .app-content > header.app-header {
    min-height: 48px;
    padding: 9px 10px 6px;
  }

  body[data-view="settings"] .app-header-title {
    gap: 7px;
    font-size: 17px;
  }

  body[data-view="settings"] .app-header-title::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    background-size: 18px 18px;
  }

  body[data-view="settings"] main {
    padding: 8px 4px 100px;
  }

  body[data-view="settings"] #masterMenu > h2.card-title {
    padding: 15px 7px 8px !important;
    font-size: 12.5px;
  }

  body[data-view="settings"] #masterMenu > h2.card-title:first-child {
    padding-top: 0 !important;
  }

  body[data-view="settings"] #masterMenu > .master-menu-list {
    border-radius: 13px;
  }

  body[data-view="settings"] .master-menu-item {
    min-height: 58px;
    padding: 10px 11px 10px 14px;
  }

  body[data-view="settings"] .master-menu-label > span:first-child {
    font-size: 13.5px;
  }

  body[data-view="settings"] .master-menu-desc {
    font-size: 11px;
  }

  body[data-view="settings"] #masterMenu > .master-menu-list:has(#logoutMenuItem) {
    margin-top: 16px !important;
  }

  body[data-view="settings"] .master-back-btn {
    min-height: 32px;
    margin-bottom: 7px;
  }

  body[data-view="settings"] #view-settings > [id$="Detail"] > h2.card-title {
    margin-bottom: 10px;
    font-size: 17px;
  }

  body[data-view="settings"] #view-settings .card {
    padding: 14px;
    border-radius: 13px;
  }

  body[data-view="settings"] #view-settings .master-row {
    border-radius: 12px;
  }

  body[data-view="settings"] #view-settings .backup-desc {
    font-size: 11.5px;
  }

  body[data-view="settings"] nav.tabbar {
    background: rgba(255, 255, 255, 0.91);
    border-top-color: rgba(191, 216, 216, 0.78);
    box-shadow: 0 -4px 16px rgba(36, 91, 101, 0.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* ---------- アプリ横 ---------- */
@media (max-width: 1023.98px) and (orientation: landscape) {
  /* 全タブ52px・中身の上端10pxにそろえる（#33-57追加修正。下の線1pxの分、下の余白は9px） */
  body[data-view="settings"] .app-content > header.app-header {
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 9px;
  }

  body[data-view="settings"] .app-header-title {
    display: flex;
    gap: 7px;
    font-size: 16px;
  }

  body[data-view="settings"] .app-header-title::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    background-size: 18px 18px;
  }

  body[data-view="settings"] main {
    padding: 7px 10px 20px;
  }

  body[data-view="settings"] #masterMenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
  }

  body[data-view="settings"] #masterMenu > h2.card-title {
    padding: 10px 5px 7px !important;
  }

  body[data-view="settings"] #masterMenu > h2.card-title:first-child,
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="usage"]),
  body[data-view="settings"] #masterMenu > .master-menu-list:has(#logoutMenuItem),
  body[data-view="settings"] #masterMenu > .content-version-note {
    grid-column: 1 / -1;
  }

  body[data-view="settings"] #masterMenu > h2:nth-of-type(2) { grid-column: 1; }
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="moodScale"]) { grid-column: 1; grid-row: span 3; align-self: start; }
  body[data-view="settings"] #masterMenu > h2:nth-of-type(3),
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="category"]),
  body[data-view="settings"] #masterMenu > h2:nth-of-type(4),
  body[data-view="settings"] #masterMenu > .master-menu-list:has([data-master="aiSettings"]) { grid-column: 2; }

  body[data-view="settings"] .master-menu-item {
    min-height: 52px;
    padding: 8px 11px 8px 13px;
  }

  body[data-view="settings"] .master-menu-label > span:first-child { font-size: 13px; }
  body[data-view="settings"] .master-menu-desc { font-size: 10.5px; }

  body[data-view="settings"] #view-settings .card {
    padding: 13px;
  }
}