/* =========================================================
   やることリスト のデザイン

   しくみ:
   ・色や角の丸さなどは「変数」(--accent など)にしてある
   ・body の data-○○ が変わると、変数の値が変わる
   ・部品はすべて変数を使って描くので、変数が変わると全体がまとめて変わる
   ========================================================= */

/* ---------- 1. デザインの部品(変数)の初期値 ---------- */
body {
  /* メインの色。パレットで --palette-accent が決まり、それを使う */
  --palette-accent: #c97b84;
  --accent: var(--palette-accent);

  /* 文字 */
  --font: "Zen Maru Gothic", "Yu Gothic UI", "Meiryo UI", sans-serif;
  --font-heading: var(--font);
  --heading-weight: 700;
  --letter-spacing: 0.02em;

  /* 形 */
  --radius: 20px;        /* カードの角の丸さ */
  --radius-sm: 12px;     /* ボタンや入力欄の角の丸さ */
  --border-width: 1px;

  /* 影 */
  --shadow: 0 8px 28px rgb(0 0 0 / 0.06);
  --btn-shadow: none;

  /* 動き */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --speed: 220ms;
}

/* ---------- 2. 昼・夜 ---------- */
/* color-mix(in srgb, A 10%, B) は「A を 10%、B を 90% 混ぜた色」
   メインの色を少しずつ混ぜるので、どの色を選んでも全体がなじむ */
body[data-mode="light"] {
  --bg: color-mix(in srgb, var(--accent) 7%, #faf8f7);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--accent) 6%, #fbfafa);
  --text: color-mix(in srgb, var(--accent) 18%, #2c2629);
  --text-sub: color-mix(in srgb, var(--accent) 20%, #8c8387);
  --border: color-mix(in srgb, var(--accent) 16%, #ebe6e4);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #ffffff);
  --accent-text: color-mix(in srgb, var(--accent) 75%, #000000);
  --on-accent: #ffffff;
  --nav-bg: color-mix(in srgb, var(--accent) 55%, #2a2125);
  --nav-text: #ffffff;
  --nav-active-bg: color-mix(in srgb, var(--accent) 30%, #ffffff);
  --nav-active-text: color-mix(in srgb, var(--accent) 20%, #2c2629);
  --done: #bbb3b6;
  --danger: #cf5c62;
}

body[data-mode="dark"] {
  --bg: color-mix(in srgb, var(--accent) 7%, #19171a);
  --surface: color-mix(in srgb, var(--accent) 5%, #242125);
  --surface-2: color-mix(in srgb, var(--accent) 9%, #2b282c);
  --text: #f2ecef;
  --text-sub: #ada4a9;
  --border: color-mix(in srgb, var(--accent) 16%, #37323a);
  --accent-soft: color-mix(in srgb, var(--accent) 28%, #242125);
  --accent-text: color-mix(in srgb, var(--accent) 60%, #ffffff);
  --on-accent: #ffffff;
  --nav-bg: color-mix(in srgb, var(--accent) 22%, #131114);
  --nav-text: #f2ecef;
  --nav-active-bg: color-mix(in srgb, var(--accent) 55%, #131114);
  --nav-active-text: #ffffff;
  --done: #6f676b;
  --danger: #e2797e;
  --shadow: 0 8px 28px rgb(0 0 0 / 0.35);
}

/* ---------- 3. 色(パレット) ---------- */
/* 「自分で選ぶ」のときは、JavaScript が --palette-accent を直接入れる */
body[data-palette="sakura"]   { --palette-accent: #c97b84; }
body[data-palette="matcha"]   { --palette-accent: #6f9a7a; }
body[data-palette="lavender"] { --palette-accent: #8d7bc4; }
body[data-palette="sora"]     { --palette-accent: #5b97d1; }
body[data-palette="lemon"]    { --palette-accent: #d4a12a; }
body[data-palette="mono"]     { --palette-accent: #6e6a6c; }
body[data-palette="mint"]     { --palette-accent: #4fb5a0; }
body[data-palette="peach"]    { --palette-accent: #e58b74; }
body[data-palette="blueberry"]{ --palette-accent: #5e6cb8; }

/* ---------- 4. 雰囲気 ---------- */
/* かわいい: まるくて、やわらかい影、ぽよんと動く */
body[data-mood="cute"] {
  --radius: 34px;
  --radius-sm: 20px;
  --shadow: 0 10px 30px color-mix(in srgb, var(--accent) 16%, transparent);
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ボタン・入力欄・メニューは、両はしがまんまるの形にする */
body[data-mood="cute"] .btn,
body[data-mood="cute"] input[type="text"],
body[data-mood="cute"] .nav-btn,
body[data-mood="cute"] .task-item,
body[data-mood="cute"] .row-btn { border-radius: 999px; }
body[data-mood="cute"] .day { border-radius: 50%; }
body[data-mood="cute"] textarea { border-radius: 26px; padding: 16px 20px; }

/* シンプル: 角は小さめ、影はほぼなし、メニューも白 */
body[data-mood="simple"] {
  --font: "Yu Gothic UI", "Meiryo UI", sans-serif;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  --nav-bg: var(--surface);
  --nav-text: var(--text);
  --nav-active-bg: var(--accent-soft);
  --nav-active-text: var(--accent-text);
}

/* 大人っぽい: 見出しは明朝体、色はおちついたトーン、角はほぼ四角 */
body[data-mood="adult"] {
  --accent: color-mix(in srgb, var(--palette-accent) 65%, #6d6d6d);
  --font: "Yu Gothic UI", "Meiryo UI", sans-serif;
  --font-heading: "Yu Mincho", "游明朝", "MS PMincho", serif;
  --heading-weight: 600;
  --letter-spacing: 0.06em;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 2px 10px rgb(0 0 0 / 0.04);
}

/* ポップ: 太いふちと、ずらした影。見出しは太く。いろんな色で塗り分ける */
body[data-mood="pop"] {
  --heading-weight: 900;
  --radius: 16px;
  --radius-sm: 12px;
  --border-width: 2px;
  --border: var(--text);
  --shadow: 5px 5px 0 var(--text);
  --btn-shadow: 3px 3px 0 var(--text);
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ポップで使う、にぎやかな色(1番目はメインの色) */
  --pop-1: var(--accent);
  --pop-2: #ffc93c; /* 黄色 */
  --pop-3: #3ec7a8; /* ミント */
  --pop-4: #4aa8ff; /* 水色 */
  --pop-5: #ff7a9c; /* ピンク */
}

/* メニューのボタンを、1つずつちがう色にする(:nth-child は「何番目か」) */
body[data-mood="pop"] .nav-btn { border: 2px solid transparent; }
body[data-mood="pop"] .nav-btn.active { color: #2a2226; border-color: var(--text); box-shadow: 3px 3px 0 var(--text); }
body[data-mood="pop"] .nav-btn.active:nth-of-type(1) { background: var(--pop-2); }
body[data-mood="pop"] .nav-btn.active:nth-of-type(2) { background: var(--pop-3); }
body[data-mood="pop"] .nav-btn.active:nth-of-type(3) { background: var(--pop-4); }
body[data-mood="pop"] .nav-btn.active:nth-of-type(4) { background: var(--pop-5); }

/* カードの上に、色のついた帯をつける(カードごとに色を変える) */
body[data-mood="pop"] .card { border-top-width: 10px; }
body[data-mood="pop"] .columns > .card:nth-child(1),
body[data-mood="pop"] .design-panel > .card:nth-child(4n + 1) { border-top-color: var(--pop-2); }
body[data-mood="pop"] .columns > .card:nth-child(2),
body[data-mood="pop"] .design-panel > .card:nth-child(4n + 2) { border-top-color: var(--pop-3); }
body[data-mood="pop"] .design-panel > .card:nth-child(4n + 3) { border-top-color: var(--pop-4); }
body[data-mood="pop"] .design-panel > .card:nth-child(4n + 4) { border-top-color: var(--pop-5); }

/* タスクの ○ を、1行ずつちがう色にする */
body[data-mood="pop"] .task-item:nth-child(4n + 1) { --item-color: var(--pop-1); }
body[data-mood="pop"] .task-item:nth-child(4n + 2) { --item-color: var(--pop-3); }
body[data-mood="pop"] .task-item:nth-child(4n + 3) { --item-color: var(--pop-4); }
body[data-mood="pop"] .task-item:nth-child(4n + 4) { --item-color: var(--pop-5); }
body[data-mood="pop"] .check { border-color: var(--item-color); border-width: 3px; }
body[data-mood="pop"] .task-item.done .check { background: var(--item-color); border-color: var(--item-color); }
body[data-mood="pop"] .task-item.selected { background: color-mix(in srgb, var(--pop-2) 30%, var(--surface)); }

/* カレンダー: 曜日ごとに点の色を変える。選んだ日は黄色 */
body[data-mood="pop"] .day:nth-child(7n + 1)::after { background: var(--pop-5); }
body[data-mood="pop"] .day:nth-child(7n + 2)::after { background: var(--pop-2); }
body[data-mood="pop"] .day:nth-child(7n + 3)::after { background: var(--pop-3); }
body[data-mood="pop"] .day:nth-child(7n + 4)::after { background: var(--pop-4); }
body[data-mood="pop"] .day:nth-child(7n + 5)::after { background: var(--pop-1); }
body[data-mood="pop"] .day:nth-child(7n + 6)::after { background: var(--pop-3); }
body[data-mood="pop"] .day:nth-child(7n + 7)::after { background: var(--pop-4); }
body[data-mood="pop"] .day.selected { background: var(--pop-2); color: #2a2226; box-shadow: inset 0 0 0 2px var(--text); }
body[data-mood="pop"] .day.selected::after { background: #2a2226; }

/* 選んだチップやタグも、カラフルに */
body[data-mood="pop"] .chip.selected { background: var(--pop-2); color: #2a2226; border-color: var(--text); box-shadow: 2px 2px 0 var(--text); }
body[data-mood="pop"] .tag { background: var(--pop-3); color: #2a2226; }
body[data-mood="pop"] .btn.outline { background: var(--pop-4); color: #ffffff; }

/* ポップの水玉は、いろんな色の玉にする */
body[data-mood="pop"][data-bg="dots"] .main {
  background:
    radial-gradient(color-mix(in srgb, var(--pop-2) 55%, transparent) 2.4px, transparent 2.6px) 0 0 / 36px 36px,
    radial-gradient(color-mix(in srgb, var(--pop-3) 50%, transparent) 2.4px, transparent 2.6px) 12px 12px / 36px 36px,
    radial-gradient(color-mix(in srgb, var(--pop-5) 50%, transparent) 2.4px, transparent 2.6px) 24px 24px / 36px 36px,
    var(--bg);
}
body[data-mood="pop"][data-bg="gradient"] .main {
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--pop-2) 35%, transparent), transparent 35%),
    radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--pop-4) 28%, transparent), transparent 35%),
    radial-gradient(circle at 60% 100%, color-mix(in srgb, var(--pop-5) 28%, transparent), transparent 40%),
    var(--bg);
}

/* ---------- 5. 背景 ---------- */
.main { background: var(--bg); }

body[data-bg="gradient"] .main {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 42%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 40%),
    var(--bg);
}

body[data-bg="dots"] .main {
  background:
    radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1.6px, transparent 1.8px) 0 0 / 22px 22px,
    var(--bg);
}

/* 画像: 上に背景色をうすく重ねて、文字が読みやすいようにする */
body[data-bg="image"] .main {
  background:
    linear-gradient(color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)),
    var(--bg-image, none) center / cover no-repeat,
    var(--bg);
}

/* 背景に模様があるときは、カードを少し透かして、ぼかす(すりガラス風) */
body:not([data-bg="none"]) .card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
}

/* ---------- 6. 並べ方 ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  letter-spacing: var(--letter-spacing);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app { display: grid; height: 100vh; }

/* 左のサイドバー */
body[data-layout="sidebar"] .app { grid-template-columns: 240px 1fr; }
body[data-layout="sidebar"] .nav { flex-direction: column; padding: 26px 16px; }
body[data-layout="sidebar"][data-mood="simple"] .nav { border-right: 1px solid var(--border); }

/* 上のバー */
body[data-layout="top"] .app { grid-template-rows: auto 1fr; }
body[data-layout="top"] .nav { flex-direction: row; align-items: center; padding: 12px 24px; }
body[data-layout="top"] .brand { margin: 0 20px 0 4px; }
body[data-layout="top"][data-mood="simple"] .nav { border-bottom: 1px solid var(--border); }

/* 下のバー(スマホのアプリ風) */
body[data-layout="bottom"] .app { grid-template-rows: 1fr auto; }
body[data-layout="bottom"] .nav {
  order: 2;
  flex-direction: row;
  justify-content: space-around;
  padding: 8px 12px 10px;
}
body[data-layout="bottom"] .brand,
body[data-layout="bottom"] .spacer { display: none; }
body[data-layout="bottom"] .nav-btn { flex-direction: column; gap: 3px; font-size: 12px; padding: 8px 22px; }
body[data-layout="bottom"][data-mood="simple"] .nav { border-top: 1px solid var(--border); }

/* タイトルバーの色(JavaScript がこの部品の色を調べて、<meta name="theme-color"> に書く) */
body { --titlebar: var(--nav-bg); }
body[data-layout="bottom"] { --titlebar: var(--bg); }
#titlebar-probe { position: fixed; width: 1px; height: 1px; left: -10px; background: var(--titlebar); }

/* ---------- 7. アニメーション ---------- */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.page.active { animation: page-in 320ms var(--ease) both; }
.task-item.just-added { animation: item-in 320ms var(--ease) both; }
.task-item.done .check { animation: pop 320ms var(--ease); }

/* アニメーションをオフにしたときは、動きを全部止める */
body[data-motion="off"] *,
body[data-motion="off"] *::before,
body[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}

/* =========================================================
   ここから下は、それぞれの部品の見た目
   ========================================================= */

/* アイコン(JavaScript が SVG を入れる) */
.icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
/* アイコンはすべて「線」で描く(塗りつぶさない)。色は文字の色(currentColor)に合わせる */
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon svg, .check svg { width: 100%; height: 100%; }
.icon-btn svg { width: 18px; height: 18px; }
.check svg { stroke-width: 3; }

/* ---------- メニュー ---------- */
.nav {
  display: flex;
  gap: 6px;
  background: var(--nav-bg);
  color: var(--nav-text);
  z-index: 1;
}
.brand {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 19px;
  padding: 0 10px 22px;
  white-space: nowrap;
}
body[data-layout="top"] .brand { padding: 0; }
.spacer { flex: 1; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0.85;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease), opacity var(--speed);
}
.nav-btn:hover { background: color-mix(in srgb, var(--nav-text) 12%, transparent); opacity: 1; }
.nav-btn:active { transform: scale(0.96); }
.nav-btn.active { background: var(--nav-active-bg); color: var(--nav-active-text); opacity: 1; }

/* ---------- 画面(ページ) ---------- */
.main { overflow: auto; padding: 28px 32px; min-width: 0; min-height: 0; }
.page { display: none; height: 100%; flex-direction: column; min-height: 0; }
.page.active { display: flex; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
h1, h2 { font-family: var(--font-heading); font-weight: var(--heading-weight); margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 18px; margin-bottom: 14px; }

.columns { display: flex; gap: 18px; flex: 1; min-height: 0; }

/* ---------- カード ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  min-height: 0;
}
.card.grow { flex: 1; min-width: 0; }
.task-card { width: 380px; flex: none; }
.memo-list-card { width: 300px; flex: none; }
.card-foot { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.card-foot:has(.wide) { justify-content: stretch; }
.hint { color: var(--text-sub); font-size: 13px; margin: 12px 0 0; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  font: inherit;
  letter-spacing: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--btn-shadow);
  transition: transform var(--speed) var(--ease), filter var(--speed), background var(--speed), box-shadow var(--speed);
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
body[data-mood="pop"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.outline { background: transparent; color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.btn.ghost { background: transparent; color: var(--text-sub); box-shadow: none; }
.btn.danger { color: var(--danger); }
.btn.wide { width: 100%; }
body[data-mood="pop"] .btn { border-color: var(--text); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease);
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent-text); }
.icon-btn:active { transform: scale(0.9); }

.date-nav { display: flex; align-items: center; gap: 6px; }
#date-label { font-size: 16px; min-width: 170px; text-align: center; }

/* ---------- 入力欄 ---------- */
input[type="text"], textarea {
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}
input[type="text"]:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea { flex: 1; resize: none; line-height: 1.7; min-height: 120px; }
textarea:disabled { opacity: 0.55; }
::placeholder { color: var(--text-sub); opacity: 0.8; }
.field-label { font-size: 13px; color: var(--text-sub); margin: 4px 0 6px; }
#memo-category, #memo-title { margin-bottom: 10px; }
.input-row { display: flex; gap: 8px; margin-bottom: 14px; }

/* ---------- 一覧 ---------- */
.list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; }

.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--speed);
}
.task-item:hover { background: var(--surface-2); }
.task-item.selected { background: var(--accent-soft); }
.task-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-item.done .task-text { color: var(--done); text-decoration: line-through; }
.memo-mark { color: var(--accent-text); font-size: 13px; opacity: 0; }
.task-item.has-body .memo-mark { opacity: 1; }

/* ○ のチェック */
.check {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: transparent;
  color: transparent;
  cursor: pointer;
  padding: 3px;
  transition: background var(--speed), color var(--speed);
}
.check:hover { background: var(--accent-soft); }
.task-item.done .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body[data-mood="adult"] .check { border-radius: 4px; }

.task-item .delete { opacity: 0; width: 30px; height: 30px; }
.task-item:hover .delete { opacity: 1; }
.task-item .delete:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

.empty { color: var(--text-sub); padding: 18px 8px; text-align: center; }

/* 見出しつきの一覧(メモ・カレンダーの中身) */
.group-title { font-size: 13px; color: var(--text-sub); margin: 12px 4px 6px; font-weight: 600; }
.group-title:first-child { margin-top: 0; }
.row-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--speed);
}
.row-btn:hover { background: var(--surface-2); }
.row-btn.selected { background: var(--accent-soft); }
.row-btn.done { color: var(--done); text-decoration: line-through; }
.tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  white-space: nowrap;
}
#memo-list, #day-detail { overflow: auto; flex: 1; min-height: 0; }

/* ---------- タスクの追加・詳細の画面(ダイアログ) ---------- */
.dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent; /* 見た目は中の .card にまかせる */
  color: var(--text);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.35); } /* うしろの画面を暗くする */
.dialog[open] .card { animation: page-in 320ms var(--ease) both; }
#dialog-text { margin-bottom: 10px; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.dialog .card-foot .danger { margin-right: auto; } /* 削除だけ左はしに離して、押しまちがいを防ぐ */

/* ---------- カレンダー ---------- */
.calendar-card { width: 420px; flex: none; }
.month-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.month-nav h2 { margin: 0 6px; min-width: 120px; text-align: center; }
.month-nav .btn { margin-left: auto; padding: 7px 14px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.weekday { text-align: center; font-size: 12px; color: var(--text-sub); padding: 4px 0 8px; }
.weekday.sun { color: var(--danger); }
.day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--speed), transform var(--speed) var(--ease);
}
.day:hover { background: var(--surface-2); transform: scale(1.06); }
.day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.day.has-items::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.day.selected { background: var(--accent); color: var(--on-accent); }
.day.selected::after { background: var(--on-accent); }

/* ---------- デザインの設定 ---------- */
.design-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; overflow: auto; padding-bottom: 8px; }
.design-panel .card h2 { margin-bottom: 6px; }
.design-panel .desc { color: var(--text-sub); font-size: 13px; margin: 0 0 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: var(--border-width) solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background var(--speed), color var(--speed), transform var(--speed) var(--ease);
}
.chip:hover { transform: translateY(-1px); }
.chip.selected { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body[data-mood="adult"] .chip { border-radius: var(--radius-sm); }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--text-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.swatch .dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed);
}
.swatch:hover .dot { transform: scale(1.08); }
.swatch.selected { color: var(--text); font-weight: 600; }
.swatch.selected .dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.swatch input[type="color"] { position: absolute; opacity: 0; width: 0; height: 0; }
.dot.random { background: conic-gradient(#c97b84, #d4a12a, #6f9a7a, #5b97d1, #8d7bc4, #c97b84); }
.dot.custom { background: var(--custom, #999); }

/* 紙ふぶきを描く、画面全体に重ねる透明な紙(クリックは下の画面に通す) */
#confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.bg-preview { margin-top: 12px; height: 70px; border-radius: var(--radius-sm); background: var(--bg-image, none) center / cover, var(--surface-2); border: var(--border-width) solid var(--border); }