/* 画面の構造・部品（共通層）。配色パレットは theme.css（アプリ層）に分離。 */

:root {
  --fs: 1;                /* 文字サイズ設定（小/中/大）の倍率。見出し・本文系だけに掛ける */
}
:root[data-fontsize="s"] { --fs: .88; }
:root[data-fontsize="l"] { --fs: 1.18; }

* { box-sizing: border-box; }
/* スマホの「引っ張って更新」を無効化（うっかり再読み込み→PIN再入力を防ぐ。同期は🔄ボタンで） */
html, body { overscroll-behavior-y: none; }
/* 横方向のはみ出しを禁止（1要素のはみ出しが画面全体を横に広げ、右端のボタンが切れる事故を防ぐ）
   注意: hidden は要素をスクロール容器に変えてしまい、モバイルの縦スクロールを壊すことがある。
   clip は「見た目を切り取るだけ」でスクロールに干渉しない（この用途の正解） */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.screen { min-height: 100dvh; display: flex; flex-direction: column; }
/* hidden属性はUA標準のdisplay:noneで効くが、上のdisplay:flexが勝ってしまうため明示上書きが必要 */
.screen[hidden] { display: none; }

/* --- ゲート（合言葉・PIN・設定・解除）画面 --- */
.gate { justify-content: center; align-items: center; padding: 24px; }
.gate-box {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 26px;
  box-shadow: var(--shadow);
}
.gate-box h1 {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 21px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 4px;
  letter-spacing: .04em;
}

input[type="password"], input[type="text"], input[type="search"] {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color .15s;
}
input:focus { border-color: var(--accent); }
::placeholder { color: var(--muted); opacity: .8; }

button {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
button.primary {
  background: var(--accent);
  color: #faf9f5;
  font-weight: 600;
  letter-spacing: .02em;
}
button.primary:active { background: var(--accent-strong); }
button.danger { background: transparent; color: var(--danger); }
button.linklike {
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  padding: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button:disabled { opacity: .55; }

.note { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.center { text-align: center; padding: 40px 16px; }
.error { color: var(--danger); font-size: 14px; text-align: center; margin: 0; }
.check { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* --- 一覧画面 --- */
.topbar {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px;
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
/* min-width: 0 が肝：検索入力はブラウザ既定の最小幅を持ち、これが無いと狭い画面で行全体がはみ出す */
.topbar input[type="search"] {
  flex: 1; min-width: 0; border-radius: 999px; padding: 10px 16px;
  /* 画面背景(--bg)と同色だと溶け込むため、カード色＋テラコッタを少し混ぜた枠線で「入力欄」だと分かるように */
  background: var(--card);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow);
}
/* アイコン1文字なら円形のまま、「← 戻る」「今日」等の文字ボタンは自動幅のピルに広がる
   （幅42px固定だと文字がはみ出して折り返す） */
.topbar button {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  min-width: 42px; height: 42px;
  padding: 0 12px;
  font-size: 17px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* ナビ系ボタン（← 戻る・‹ ›・今日）：白いだけの素っ気なさをやめ、アクセントを薄く効かせる */
.topbar button.nav {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.topbar button.nav:active { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
#cal-prev, #cal-next { font-size: 18px; line-height: 1; }
/* 横幅の狭い端末では隙間とボタンを少し詰めて、検索ボックスの居場所を確保する */
@media (max-width: 380px) {
  .topbar { gap: 6px; padding: 12px 10px; }
  .topbar button { min-width: 38px; height: 38px; font-size: 15px; padding: 0 10px; }
  .topbar input[type="search"] { padding: 9px 13px; }
}
.spacer { flex: 1; }

/* ⋮メニュー（テーマ・文字サイズ・ロック。今後の機能追加の置き場） */
#menu-pop {
  position: fixed;
  top: 64px; right: 12px;
  z-index: 30;
  min-width: 240px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow);
}
#menu-pop[hidden] { display: none; }
#menu-pop > button {
  text-align: left;
  font-size: 14px;
  padding: 11px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
}
#menu-pop > button:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 14px;
  padding: 6px 12px;
}
.menu-version {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 6px 12px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.fs-group { display: flex; gap: 4px; }
.fs-btn {
  width: 42px;
  padding: 6px 0;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
}
.fs-btn.active { background: var(--accent); color: #faf9f5; border-color: transparent; }

/* フォルダバー（カテゴリ絞り込みチップ・横スクロール） */
#folder-bar {
  display: flex; gap: 8px;
  padding: 10px 14px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
#folder-bar::-webkit-scrollbar { display: none; }
.folder-chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.folder-chip.active { background: var(--accent); color: #faf9f5; border-color: transparent; }
.folder-chip.rename { border-style: dashed; color: var(--muted); background: transparent; }
.folder-chip.vault { border-color: var(--accent); }

/* 容量メーター（クラウド使用量） */
.usage {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  padding: 6px 18px 0;
  opacity: .85;
}
.usage.warn { color: var(--danger); font-weight: 600; }

#memo-list { list-style: none; margin: 0; padding: 14px 14px 180px; } /* 下部はFAB＋ランチャーの逃げ */
#memo-list li {
  position: relative; /* ピン留め☆の配置基準 */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
#memo-list li:active { border-color: var(--accent); }
.memo-title {
  font-weight: 600;
  font-size: calc(15px * var(--fs));
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: .02em;
  padding-right: 36px; /* ☆と重ならないように */
}

/* 新着バッジ（他端末からの変更。開くと消える）。アクセント色のピル型 */
.new-badge {
  display: inline-block;
  background: var(--accent);
  color: #faf9f5;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  padding: 3px 8px 2px;
  border-radius: 999px;
  margin-right: 7px;
  vertical-align: 2px;
}

/* ピン留め（★＝上位固定） */
.pin-btn {
  position: absolute;
  top: 6px; right: 6px;
  background: transparent;
  border: none;
  font-size: 19px;
  padding: 8px 10px; /* タップしやすい当たり判定 */
  color: var(--muted);
  opacity: .55;
}
.pin-btn.on { color: var(--accent); opacity: 1; }

/* 一覧のセクション見出し（📌 ピン留め / その他） */
#memo-list li.list-section {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 6px;
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: default;
  letter-spacing: .04em;
}
.memo-snippet {
  color: var(--muted); font-size: calc(13px * var(--fs)); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memo-date { color: var(--muted); font-size: 11px; margin-top: 6px; opacity: .8; }

.fab {
  position: fixed; right: 20px; bottom: 90px; /* ランチャーバーの上に浮かせる（Materialの定番配置） */
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--accent);
  color: #faf9f5;
  font-size: 28px; line-height: 1;
  border: none;
  box-shadow: 0 6px 18px rgba(160, 80, 45, .35);
}
.fab:active { background: var(--accent-strong); }
/* ランチャーを使わないアプリ（config.jsのlaunchersが空）ではバーが無いぶん下へ寄せる */
.no-launcher .fab { bottom: 20px; }
.no-launcher #update-banner { bottom: 20px; }

/* ランチャーバー（よく使うアプリ。一覧画面の下部に常設・横スクロール可） */
#launcher-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 5;
}
#launcher-bar::-webkit-scrollbar { display: none; }
.launcher-chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.launcher-chip:active { border-color: var(--accent); color: var(--accent); }

/* 📅カレンダー画面（オプションモジュール calendar.js） */
#cal-title {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 17px;
  letter-spacing: .04em;
}
#cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 10px auto 0;
  padding: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  max-width: 560px; /* PCの広い画面でセルが巨大化しないように */
  width: calc(100% - 28px);
  background: color-mix(in srgb, var(--text) 8%, transparent); /* 帯にして見出し感を出す */
  border-radius: 10px;
}
#cal-weekdays span { padding: 6px 0; border-radius: 8px; }
/* 日・土は特別な曜日：文字色＋薄い背景で帯の中でも目立たせる */
#cal-weekdays .sun { color: var(--cal-sun, var(--accent)); background: color-mix(in srgb, var(--cal-sun, var(--accent)) 16%, transparent); }
#cal-weekdays .sat { color: var(--cal-sat); background: color-mix(in srgb, var(--cal-sat) 18%, transparent); }
#cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 8px 14px 4px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
/* セルは縦長：上に日番号、下に本文の抜粋（3行まで） */
.cal-cell {
  min-height: 82px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 3px 4px;
  overflow: hidden;
}
.cal-cell:active { border-color: var(--accent); }
/* 日・土のセルは背景をほんのり色付け（特別な曜日だと一目で分かるように） */
.cal-cell.sun { background: color-mix(in srgb, var(--cal-sun, var(--accent)) 7%, var(--card)); border-color: color-mix(in srgb, var(--cal-sun, var(--accent)) 22%, var(--border)); }
.cal-cell.sat { background: color-mix(in srgb, var(--cal-sat) 9%, var(--card)); border-color: color-mix(in srgb, var(--cal-sat) 26%, var(--border)); }
.cal-cell .num {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
}
.cal-cell.sun .num { color: var(--cal-sun, var(--accent)); }
.cal-cell.sat .num { color: var(--cal-sat); }
.cal-cell.today .num { background: var(--accent); color: #faf9f5; }
.cal-cell.dim { opacity: .38; } /* 前月・翌月の日（タップは効く） */
.cal-snippet {
  font-size: 9px;
  line-height: 1.3;
  color: var(--text); /* 薄いと読めない、という実機FBで濃い文字色に */
  margin-top: 3px;
  text-align: left;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
}
/* カレンダー下の「この月のメモ一覧」（日付＋1行プレビュー） */
#cal-list {
  list-style: none;
  margin: 8px auto 0;
  padding: 0 14px 24px;
  max-width: 560px;
  width: 100%;
}
#cal-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
#cal-list li:active { border-color: var(--accent); }
.cal-date {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 13px;
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.cal-date.sun { color: var(--cal-sun, var(--accent)); }
.cal-date.sat { color: var(--cal-sat); }
.cal-line {
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 1行目はタイトル扱いで濃く、続きは薄く */
.cal-line .cal-line-title { color: var(--text); font-weight: 600; margin-right: 6px; }

/* 更新バナー */
#update-banner {
  position: fixed;
  left: 50%;
  bottom: 90px; /* ランチャーバーと重ならない位置 */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  font-size: 13.5px;
  box-shadow: var(--shadow);
  z-index: 20;
  white-space: nowrap;
}
#update-banner[hidden] { display: none; }
#update-banner button {
  background: var(--accent);
  color: #faf9f5;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
}

#toast {
  position: fixed;
  bottom: 165px; /* FAB・ランチャーと重ならない位置 */
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow);
  z-index: 10;
  max-width: 82vw;
}

/* --- 閲覧画面 --- */
#view-title {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: calc(20px * var(--fs));
  font-weight: 600;
  margin: 18px 18px 6px;
  letter-spacing: .02em;
}
#view-body {
  margin: 6px 18px 40px;
  font-size: calc(16px * var(--fs));
  line-height: 1.9;
  word-break: break-word;  /* 改行の再現はmarkdown.jsが<br>で行う（pre-wrap不要） */
}
#view-body a {
  color: var(--accent);
  word-break: break-all;
  text-underline-offset: 3px;
}

/* --- 閲覧画面のMarkdown整形 --- */
#view-body p { margin: .5em 0; }
#view-body h1, #view-body h2, #view-body h3 {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  margin: 1.1em 0 .35em;
}
#view-body h1 { font-size: 1.25em; border-bottom: 1px solid var(--border); padding-bottom: .25em; }
#view-body h2 { font-size: 1.15em; }
#view-body h3 { font-size: 1.05em; }
#view-body ul, #view-body ol { margin: .4em 0; padding-left: 1.5em; }
#view-body li { margin: .15em 0; }
#view-body hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
#view-body blockquote {
  margin: .6em 0;
  padding: 2px 2px 2px 13px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
#view-body code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 6px;
  padding: .1em .4em;
}
#view-body pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  line-height: 1.6;
}
#view-body pre code { background: none; padding: 0; }

/* チェックボックス項目（- [ ] / - [x]）：行全体をタップ可能に */
#view-body li.md-task { list-style: none; margin-left: -1.5em; }
.md-task label { display: flex; gap: .6em; align-items: flex-start; cursor: pointer; }
.md-task input[type="checkbox"] {
  width: 1.2em; height: 1.2em;
  margin: .4em 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.md-task input:checked + span { color: var(--muted); text-decoration: line-through; }
#screen-view .topbar button { width: auto; padding: 0 16px; font-size: 14px; height: 42px; }
#screen-view .topbar button.primary { background: var(--accent); color: #faf9f5; border-color: transparent; }

/* --- 編集画面 --- */
#screen-edit { padding-bottom: 8px; }
#screen-edit .topbar { border-bottom: 1px solid var(--border); }
#screen-edit .topbar button { width: auto; padding: 0 16px; font-size: 14px; }
#screen-edit .topbar button.primary { background: var(--accent); color: #faf9f5; border-color: transparent; }
#edit-title {
  margin: 14px 14px 0;
  font-weight: 600;
  font-size: calc(17px * var(--fs));
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 4px;
}
#edit-title:focus { border-bottom-color: var(--accent); }
.edit-toolbar { display: flex; gap: 8px; margin: 10px 14px 0; }
.edit-toolbar select {
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  font-size: 13.5px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  outline: none;
}
.view-folder { margin: 0 18px; font-size: 13px; color: var(--muted); }

/* --- 添付ファイル画面 --- */
#file-title {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 18px;
  font-weight: 600;
  margin: 18px 18px 6px;
  word-break: break-all;
}
#file-preview { margin: 14px 18px 40px; }
#file-preview img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#screen-file .topbar button { width: auto; padding: 0 16px; font-size: 14px; height: 42px; }
#screen-file .topbar button.primary { background: var(--accent); color: #faf9f5; border-color: transparent; }
.edit-toolbar button {
  padding: 7px 14px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
}
.edit-toolbar button:active { border-color: var(--accent); color: var(--accent); }
#edit-body {
  flex: 1;
  margin: 12px 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: calc(16px * var(--fs));
  font-family: inherit;
  line-height: 1.8;
  resize: none;
  min-height: 55dvh;
  outline: none;
}
#edit-body:focus { border-color: var(--accent); }