/* ==========================================================================
   まろん工房 (Atelier Marron) — schedule.css
   週間スケジュールMaker（tool-schedule.html）専用のスタイルです。
   このファイルはこのページだけから読み込まれます。

   クラス名はすべて sm-（schedule maker）で始めます。既存の style.css の
   クラス（.sheet .btn .btn-ghost など）と衝突させないためです。
   色は必ず style.css の CSS変数（--ink --lilac --surface --line など）を
   経由してください。生のカラーコードを書くとダークモードで破綻します。
   ========================================================================== */

/* --------------------------------------------------------------------
   エディタ全体の横幅
   記事本文用の .container（最大 62rem）だと3パネル構成には狭いため、
   このセクションだけ専用の幅で囲みます。
   -------------------------------------------------------------------- */
.sm-editor-section {
  padding-block: 8px 48px;
}

.sm-editor-wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* --------------------------------------------------------------------
   フォント不足のバナー（§13-2・§13-4）
   -------------------------------------------------------------------- */
.sm-font-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--warn);
  background-color: color-mix(in srgb, var(--warn) 16%, var(--surface));
}

.sm-font-banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}

.sm-font-banner-btn {
  font-size: 12.5px;
  padding: 5px 12px;
}

/* display: flex は hidden 属性より強いので、この1行が無いと
   メッセージが無いときに空の枠だけが出ます（§24-3。必須）。 */
.sm-font-banner[hidden] { display: none; }

/* バックアップ読み込みのエラー表示（§12-2）。
   iOSでは confirm 直後の alert が握りつぶされることがあるため、
   エラーはダイアログではなくこの帯で出す（schedule-ui.js が生成する）。
   正常に読み込めたときは何も出ない。 */
.sm-import-notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--warn);
  background-color: color-mix(in srgb, var(--warn) 16%, var(--surface));
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere; /* エラー詳細の長い英語も枠内で折り返す */
}

.sm-import-notice[hidden] { display: none; }

/* --------------------------------------------------------------------
   ツールバー
   -------------------------------------------------------------------- */
.sm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 16px;

  /* .sheet で position: relative が付いており、さらに既存サイトのスクロール演出
     クラス js-reveal の transform で「積み重ねコンテキスト」にもなっている。
     そのためプルダウン（.sm-menu-panel の z-index: 20）はこのツールバーの内側でしか
     効かず、外にあるレイヤー欄・プロパティ欄（.sheet = position: relative）の裏に
     回り込んでしまう。ツールバーそのものを手前に上げて直す（§24-1）。
     この1行が無いとプルダウンがパネルの裏に隠れて読めません。 */
  z-index: 30;
}

.sm-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sm-toolbar-group--export {
  margin-left: auto;
}

/* ツールバーのプルダウン（§23-3） */
.sm-menu { position: relative; }

.sm-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}

/* display: flex は hidden 属性より強いので、この1行が無いと閉じません（必須）。 */
.sm-menu-panel[hidden] { display: none; }

/* 表示倍率の ＋ / － と倍率表示（§21-1） */
.sm-zoom-btn {
  min-width: 38px;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1;
}

.sm-zoom-label {
  min-width: 48px;
  text-align: center;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* PNG書き出しの「背景を透過にする」チェックボックス（§14） */
.sm-bg-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

/* [編集＆表示] プルダウンの「テキストのガイドを表示」チェックボックス（§23-4） */
.sm-menu-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 999px) {
  .sm-toolbar-group--export {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------
   ワークスペース（レイヤー / キャンバス / プロパティ）
   -------------------------------------------------------------------- */
.sm-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1000px) {
  .sm-workspace {
    grid-template-columns: 220px 1fr 300px;
    align-items: start;
  }
}

.sm-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.sm-panel-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.sm-panel-placeholder {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}

.sm-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* レイヤー欄の下の4ボタン（§24-5）。220pxの列に1段で収める。
   .sm-panel-actions は他でも使うので、レイヤー欄の中だけに効かせる。 */
.sm-panel-layers .sm-panel-actions {
  flex-wrap: nowrap;
  gap: 5px;
}

.sm-panel-layers .sm-panel-actions .btn-ghost {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 2px;
  font-size: 12px;
  white-space: nowrap;
}

/* プロパティ欄の中身。見出し(<h3>)はこの外に置き、ここだけを
   キャンバス枠の高さに合わせてスクロールさせる（§24-4）。
   max-height はJSが draw() のたびに入れるので、ここには書かないこと。 */
.sm-props-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-y: auto;
}

/* プロパティ欄のフィットボタン（§7-4） */
.sm-fit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sm-fit-btn {
  font-size: 13px;
  padding: 8px 14px;
}

/* レイヤー一覧 */
.sm-layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.sm-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-mute);
  background-color: var(--paper);
  cursor: pointer;
}

.sm-layer-row--placeholder {
  text-align: center;
  font-style: normal;
  cursor: default;
  justify-content: center;
}

.sm-layer-row--selected {
  border-color: var(--lilac);
  background-color: color-mix(in srgb, var(--lilac) 14%, var(--paper));
  color: var(--ink);
}

.sm-layer-icon-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.sm-layer-icon-btn:hover {
  background-color: color-mix(in srgb, var(--lilac) 18%, transparent);
}

.sm-layer-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-layer-name-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--lilac);
  border-radius: 6px;
  padding: 2px 6px;
}

/* プロパティ欄の不透明度スライダー（§7-6） */
.sm-opacity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.sm-opacity-control .sm-field-label {
  flex: 0 0 auto;
  font-weight: 700;
}

.sm-opacity-slider {
  flex: 1 1 auto;
  min-width: 0;
}

.sm-opacity-value {
  flex: 0 0 auto;
  min-width: 3.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* テキストレイヤーのプロパティ項目（§3-4） */
.sm-text-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* プロパティ欄の折りたたみグループ（§23-5） */
.sm-prop-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
}

.sm-prop-group-title {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.sm-prop-group-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 10px;
}

/* 自動入力枠の「何が入るか」設定（§9） */
.sm-auto-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sm-text-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.sm-textarea {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
}

.sm-number-input,
.sm-text-input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}

input[type="color"].sm-text-field,
.sm-text-field input[type="color"] {
  padding: 2px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface);
}

.sm-field-note {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin: -4px 0 0;
}

.sm-load-font-btn {
  font-size: 12.5px;
  padding: 7px 12px;
  align-self: flex-start;
}

.sm-checkbox-row {
  display: flex;
  gap: 16px;
}

.sm-checkbox-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}

/* --------------------------------------------------------------------
   キャンバス
   -------------------------------------------------------------------- */
.sm-canvas-area {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.sm-canvas-frame {
  position: relative;
  width: 100%;
  /* JSが draw() のたびに style.height を project.canvas の実寸で入れ直すので、
     ここはJSが動く前・キャンバスサイズ変更前の初期表示用（§22-2）。 */
  aspect-ratio: 1920 / 1080;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  /* 表示倍率を上げたときは <canvas> 要素そのものが枠より大きくなるので、
     この枠をスクロールさせて見る位置を動かす（§15-2）。
     ctx への拡大や CSS の transform: scale() は使わないこと。 */
  overflow: auto;

  /* このキャンバスは書き出されるPNGそのものの見た目です。
     サイト全体のダークモードに合わせて暗くすると、実際に書き出される
     画像の色と編集画面の見た目が食い違って見えてしまうため、
     ここだけはテーマトークン(--surface)を使わず、常に白で固定します。
     （project.canvas.background の既定値 '#ffffff' に合わせています） */
  --sm-canvas-bg: #ffffff;
  background-color: var(--sm-canvas-bg);
}

.sm-canvas {
  display: block;

  /* 指でなぞったときにブラウザのスクロールへ取られないようにする（§15-1）。
     枠（.sm-canvas-frame）側のスクロールは残したいので、canvas にだけ掛ける。 */
  touch-action: none;

  /* JSが draw() のたびに style.width / style.height を原寸で入れ直します。
     ここの指定はJSが動く前の初期表示用です。max-width は書かないこと
     （表示倍率を上げたときに canvas が縮められてしまいます）。 */
  width: 100%;
  height: auto;
}

/* 背景を透過にしたときの市松模様（§25-3）。ペイントツールと同じ見た目にして、
   透過になっていることが画面で分かるようにする。
   Canvas に描かないこと（描くと書き出したPNGに市松模様が写ります）。
   ここは「作品面」なので、.sm-canvas-frame の背景を白で固定しているのと同じ理由で、
   サイトのダーク/ライトには追従させず常に同じ見た目にする。
   マスの大きさは表示px固定なので、表示倍率を変えても模様の大きさは変わらない。 */
.sm-canvas--transparent {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%),
    linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* 画像をドラッグ&ドロップしているときの合図 */
.sm-canvas-frame.is-drag-over {
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lilac) 30%, transparent);
}

/* --------------------------------------------------------------------
   スマホ用タブ（レイヤー / プロパティ / スケジュール）
   -------------------------------------------------------------------- */
/* スマホ用のボタン列（§27-3）。.sm-workspace の中に置いたので、
   すき間は grid の gap が付ける。margin-top は付けないこと。 */
.sm-mobile-tabs {
  display: none;
  gap: 8px;
  overflow-x: auto;
}

.sm-tab {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sm-tab--active {
  border-color: var(--lilac);
  color: var(--ink);
  background-color: color-mix(in srgb, var(--lilac) 16%, var(--surface));
}

@media (max-width: 999px) {
  .sm-mobile-tabs {
    display: flex;
  }

  /* §27-3 タブでの出し分け。レイヤー欄はダイアログで出すので、
     ワークスペースの中では常に隠す（表示するルールを持たせない）。
     data-active-panel はJSが .sm-editor-wrap に付けます。この @media の中だけで
     出し分けているので、1000px以上では3つとも今までどおり同時に表示されます。
     JS側で style.display を直接書き換えないこと（PC表示が壊れます）。 */
  .sm-editor-wrap[data-active-panel] .sm-panel-layers,
  .sm-editor-wrap[data-active-panel] .sm-panel-props,
  .sm-editor-wrap[data-active-panel] .sm-schedule-panel {
    display: none;
  }

  .sm-editor-wrap[data-active-panel="props"] .sm-panel-props,
  .sm-editor-wrap[data-active-panel="schedule"] .sm-schedule-panel {
    display: flex;
  }
}

/* ダイアログへ移したレイヤー欄だけは表示する（§27-5）。
   上の .sm-editor-wrap[data-active-panel] .sm-panel-layers { display: none } を
   打ち消す必要があるので、詳細度が勝つように id で書くこと。
   （id を含むこの書き方が勝ちます。!important は使わないこと） */
#sm-layer-dialog .sm-panel-layers {
  display: flex;
}

/* レイヤーが多いときはダイアログの中でスクロールさせる（§27-4）。
   スマホ幅では syncLayerListHeight() が inline の max-height を空にするので、
   ここの指定がそのまま効く。JSから高さを入れないこと。 */
#sm-layer-dialog .sm-layer-list {
  max-height: 50vh;
  overflow-y: auto;
}

/* --------------------------------------------------------------------
   スケジュール入力パネル
   -------------------------------------------------------------------- */
.sm-schedule-panel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sm-week-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px 24px;
}

.sm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.sm-field-label {
  font-weight: 700;
}

.sm-date-input,
.sm-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}

.sm-week-nav {
  display: flex;
  gap: 8px;
}

/* 選んだ週の範囲を常に大きく表示する（§10-1） */
.sm-week-range-display {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.sm-day-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-day-row {
  display: grid;
  /* 日付 / タイトル / サブタイトル / 時間 / 登録 / 選択 / クリア（§25-2） */
  grid-template-columns: 132px 1fr 1fr 100px auto auto auto;
  gap: 8px;
  align-items: center;
}

/* 「7日目（水）12/31」のように月日の桁数で文字数が変わっても、
   1行のまま幅（.sm-day-rowの第1列）に収まるようにし、行によって
   1行/2行に折り返しが変わってレイアウトがガタつかないようにする。 */
.sm-day-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.sm-day-input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  min-width: 0;
}

@media (max-width: 720px) {
  .sm-day-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label label"
      "title title"
      "subtitle subtitle"
      "time time"
      "presetadd presetpick"
      "clear clear";
  }

  .sm-day-label   { grid-area: label; }
  .sm-day-input:nth-of-type(1) { grid-area: title; }
  .sm-day-input:nth-of-type(2) { grid-area: subtitle; }
  .sm-day-input--time { grid-area: time; }
  .sm-day-preset-add  { grid-area: presetadd; }
  .sm-day-preset-pick { grid-area: presetpick; }
  .sm-day-clear       { grid-area: clear; }
}

/* お休みの日に出す文字（§25-1）。7日分の行の下に1つだけ置く。
   入力欄は日の行のタイトル欄と同じくらいの幅で足りるので、伸びきらないようにする。 */
.sm-rest-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sm-rest-text .sm-field {
  max-width: 320px;
}

.sm-preset-manage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* プリセット一覧（§11-2） */
.sm-preset-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sm-preset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
}

.sm-preset-row--placeholder {
  color: var(--ink-mute);
  font-size: 13px;
  justify-content: center;
}

.sm-preset-info {
  flex: 1 1 auto;
  min-width: 0;
}

.sm-preset-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.sm-preset-content {
  font-size: 12px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-preset-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.sm-preset-action-btn {
  font-size: 12px;
  padding: 5px 10px;
}

/* プリセット選択ダイアログの一覧（§25-2）。見た目は .sm-preset-list / .sm-preset-row に合わせる。 */
.sm-preset-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}

.sm-preset-pick-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.sm-preset-pick-btn:hover {
  border-color: var(--ink-mute);
}

/* テーマ設定ダイアログの一覧（§26-7）。見た目は .sm-preset-list / .sm-preset-row に合わせる。
   1行に「名前・フォント・削除」の3つを持つため、幅が狭いスマホでは折り返す。 */
.sm-theme-section-title {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}

.sm-theme-font-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}

.sm-theme-font-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
}

.sm-theme-font-row--placeholder {
  color: var(--ink-mute);
  font-size: 13px;
  justify-content: center;
}

.sm-theme-font-name {
  flex: 1 1 110px;
  min-width: 0;
}

.sm-theme-font-select {
  flex: 1 1 130px;
  min-width: 0;
}

.sm-theme-font-delete {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 5px 10px;
}

/* テーマ設定ダイアログの色の一覧（§26-11）。フォントの一覧（.sm-theme-font-*）と同じ形。
   1行に「名前・色・削除」の3つを持つ。 */
.sm-theme-color-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}

.sm-theme-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
}

.sm-theme-color-row--placeholder {
  color: var(--ink-mute);
  font-size: 13px;
  justify-content: center;
}

.sm-theme-color-name {
  flex: 1 1 110px;
  min-width: 0;
}

.sm-theme-color-value {
  flex: 0 0 auto;
  padding: 2px;
  height: 32px;
  width: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface);
}

.sm-theme-color-delete {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 5px 10px;
}

/* プリセットのダイアログ（§11-2）。ネイティブの <dialog> をそのまま使う。 */
.sm-dialog {
  width: min(420px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--surface);
  color: var(--ink);
  padding: 20px;
}

.sm-dialog::backdrop {
  background-color: rgba(0, 0, 0, .35);
}

.sm-dialog-title {
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 10px;
}

.sm-dialog-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.sm-preset-day-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.sm-preset-day-btn {
  text-align: left;
  font-size: 13px;
  padding: 8px 12px;
}

/* キャンバスサイズのダイアログ（§22-2）のプリセットボタン */
.sm-canvas-size-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sm-canvas-size-preset-btn {
  font-size: 12.5px;
  padding: 7px 10px;
}

/* 「開く」ダイアログ（§12-1）は名前・更新日時・3つのボタンを1行に並べるため、
   プリセットのダイアログ（420px）より少し広くする。 */
.sm-dialog--wide {
  width: min(560px, calc(100vw - 40px));
}

.sm-project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}

.sm-project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
}

.sm-project-row--placeholder {
  color: var(--ink-mute);
  font-size: 13px;
  justify-content: center;
}

.sm-project-info {
  flex: 1 1 auto;
  min-width: 0;
}

.sm-project-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-project-date {
  font-size: 12px;
  color: var(--ink-mute);
}

.sm-project-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.sm-project-action-btn {
  font-size: 12px;
  padding: 5px 10px;
}

/* --------------------------------------------------------------------
   「使い方」の小見出し（【1】【2】）
   -------------------------------------------------------------------- */
.sm-howto-title {
  font-size: 14.5px;
  color: var(--ink);
  margin: 20px 0 8px;
}

.sm-howto-title:first-of-type {
  margin-top: 4px;
}