/* 紙UI（paper-ui）のトークン。全画面がこの1組を参照する */
:root {
  --paper-bg: #e9e6df;
  --paper: #fcfbf8;
  --card: #fff;

  --ink: #22252b;
  --ink-strong: #1b1d24;
  --ink-soft: #6f6a60;
  --ink-faint: #8a8577;

  --line: #e3ded2;
  --line-strong: #cbc4b4;
  --line-row: #eae4d7;
  --line-dash: #d8d2c4;

  --accent: #d9006c;
  --accent-dark: #a80058;
  --marker: #ffe94d;

  --ok: #1b7f9e;
  --ng: #b31f34;
  --ng-soft: #d7b3ba;
  --focus: #1b7f9e;

  --off-bg: #f4f1ea;        /* 家にある・作らない行の地色 */
  --done-bg: #e6f1f4;       /* カゴに入れた行の地色 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

body {
  min-height: 100vh;
  background: var(--paper-bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

.shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 40px;
  background: var(--paper);
  box-shadow: 0 0 26px rgba(30, 25, 15, .10);
}

main { padding: 4px 16px 0; }

/* ヘッダー */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 8px;
}
.masthead h1 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
}
.today-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* タブ。選択中は塗る */
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px 16px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tabs button { padding: 8px 2px; font-size: 14px; }

/* ボタン */
button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink-strong);
  font-weight: 800;
  transition: transform .04s;
}
button:active { transform: translateY(1px); }
button.primary, button.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
button.done.active { background: var(--ok); border-color: var(--ok); }
button.danger { color: var(--ng); border-color: var(--ng-soft); }
button.small { min-height: 44px; padding: 6px 10px; font-size: 14px; }
button.wide { width: 100%; }

/* ダウンロードはリンクだが、見た目はボタンにそろえる */
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink-strong);
  font-weight: 800;
  text-decoration: none;
}
.btn-link.wide { justify-content: center; width: 100%; text-align: center; line-height: 1.4; }
.btn-link:active { transform: translateY(1px); }

/* 入力欄 */
input, textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 2px solid var(--line-strong);
  border-radius: 9px;
  background: #fdfcf9;
  color: var(--ink);
  font-weight: 700;
}
textarea { min-height: 120px; line-height: 1.6; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }
label.field { display: block; margin: 0 0 12px; }
label.field > span {
  display: block;
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

/* カード */
.card {
  margin: 14px 0 18px;
  padding: 17px 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(40, 32, 15, .04), 0 6px 18px rgba(40, 32, 15, .06);
}

/* 読む画面の見出し：マスキングテープ */
.read .card h2 {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px 4px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 3px;
  transform: rotate(-1.2deg);
}

/* 操作する画面の見出し：アクセントバー + 下線 */
.op .card h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--ink-strong);
}
.op .card h2::before {
  content: "";
  flex: none;
  width: 8px;
  height: 16px;
  background: var(--accent);
  border-radius: 1px;
}
.op .card h2 .count {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.marked {
  background: linear-gradient(transparent 66%, var(--marker) 66%);
  padding: 0 3px;
}
.note { margin: 0; color: var(--ink-soft); font-size: 14px; }
.lead { margin: 14px 2px 0; color: var(--ink-soft); font-size: 14px; font-weight: 700; }

/* テロップ */
.telop { margin: 18px 0 8px; text-align: center; }
.telop .label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
}
.telop .label::before, .telop .label::after { content: ""; width: 34px; height: 1px; background: #b7b1a3; }
.telop strong {
  display: inline-block;
  margin-top: 8px;
  padding: 0 6px;
  color: var(--ink-strong);
  font-weight: 900;
  font-size: clamp(25px, 7vw, 31px);
  line-height: 1.35;
  background: linear-gradient(transparent 66%, var(--marker) 66%);
}
.telop .sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; font-weight: 700; }

/* 週番号のチップ。今の週だけ塗る */
.week-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 1px 8px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.week-chip.now { background: var(--accent); border-color: var(--accent-dark); color: #fff; }

/* 料理 */
.dish + .dish { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-dash); }
.dish .kind { margin: 0 0 2px; color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.dish .name { margin: 0 0 8px; color: var(--ink-strong); font-size: 21px; font-weight: 900; line-height: 1.4; }
.dish .steps { margin: 8px 0 0; font-size: 15px; }
.ing-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ing-list li {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
}
.ing-list li small { color: var(--ink-soft); font-weight: 700; }
.minutes { color: var(--ink-soft); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 読む一覧：破線 */
.read-row {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px dashed var(--line-dash);
}
.read-row:first-of-type { border-top: 0; }
.read-row .day { color: var(--ink-strong); font-weight: 900; }
.read-row .what { min-width: 0; }
.read-row .what b { display: block; color: var(--ink-strong); font-weight: 800; }
.read-row .what span { color: var(--ink-soft); font-size: 14px; }
.read-row.today { background: linear-gradient(transparent 0, transparent 100%); }
.read-row.today .day { color: var(--accent); }
.read-row.skipped { background: var(--off-bg); }
.read-row.skipped .what b, .read-row.skipped .what span { color: var(--ink-faint); }
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--ink-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  vertical-align: 2px;
}

/* 操作する一覧：実線。名前 + 2ボタンを1行に保つ */
.op-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 64px;
  gap: 7px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line-row);
}
.op-row:last-child { border-bottom: 0; }
.op-row .item { min-width: 0; }
.op-row .item b { display: block; color: var(--ink-strong); font-size: 16px; font-weight: 800; line-height: 1.35; }
.op-row .item span { display: block; color: var(--ink-soft); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-row .item em { font-style: normal; color: var(--ok); font-weight: 800; }
.op-row button { padding: 6px 4px; font-size: 14px; }
.op-row.home { background: var(--off-bg); }
.op-row.home .item b, .op-row.home .item span { color: var(--ink-faint); text-decoration: line-through; }
.op-row.bought { background: var(--done-bg); }
@media (max-width: 360px) {
  .op-row { grid-template-columns: minmax(0, 1fr) 68px 56px; gap: 5px; }
  .op-row .item b { font-size: 15px; }
}

/* 2択の切り替え（今週/来週 など） */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.seg button { font-size: 15px; line-height: 1.3; }
.seg button small { display: block; font-size: 12px; font-weight: 700; }

/* 横並びの入力行 */
.inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* 余白の調整（CSPでstyle属性を禁止しているのでクラスで持つ） */
.mt0 { margin-top: 0; }
.mt10 { margin-top: 10px; }
.mt12 { margin-top: 12px; }
.mt14 { margin-top: 14px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.m0 { margin: 0; }
.grow { flex: 1; }
.note-block { display: block; margin-bottom: 6px; }
textarea.short { min-height: 80px; }

/* 数字の帯 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stats div { padding: 8px 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.stats span { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.stats b { color: var(--ink-strong); font-size: clamp(16px, 4.6vw, 19px); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats b small { margin-left: 1px; font-size: 12px; font-weight: 800; }
.stats b.over { color: var(--ng); }
.num { font-variant-numeric: tabular-nums; }

/* 献立表の週ブロック */
details.week { border-bottom: 1px solid var(--line-row); }
details.week:last-child { border-bottom: 0; }
details.week summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 2px;
  color: var(--ink-strong);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
details.week summary::-webkit-details-marker { display: none; }
details.week summary::after { content: "開く"; margin-left: auto; color: var(--ink-soft); font-size: 13px; }
details.week[open] summary::after { content: "閉じる"; }
details.week summary .range { color: var(--ink-soft); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.menu-row {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 2px;
  border-top: 1px dashed var(--line-dash);
}
.menu-row .what b { display: block; color: var(--ink-strong); font-weight: 800; line-height: 1.4; }
.menu-row .what span { color: var(--ink-soft); font-size: 14px; }
.editor { padding: 12px; margin: 4px 0 10px; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--paper); }

.schedule { margin: 0; padding: 0; list-style: none; }
.schedule li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-top: 1px dashed var(--line-dash);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.schedule li:first-child { border-top: 0; }
.schedule li .range { flex: none; white-space: nowrap; }
.schedule li .main { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

/* 季節の差し替えルール */
.rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line-row);
}
.rule-row:last-child { border-bottom: 0; }
.rule-row b { color: var(--ink-strong); font-weight: 800; }
.rule-row span { display: block; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.rule-row.off { background: var(--off-bg); }
.rule-row.off b, .rule-row.off span { color: var(--ink-faint); }

.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 12px; }
.months button { min-height: 44px; padding: 4px 0; font-size: 14px; }

.rec-row {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-row);
  font-variant-numeric: tabular-nums;
}
.rec-row:last-child { border-bottom: 0; }
.rec-row span { color: var(--ink-soft); font-size: 13px; }

.empty { margin: 4px 0; color: var(--ink-soft); font-size: 14px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  max-width: 440px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink-strong);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media print {
  body { background: #fff; }
  .shell { box-shadow: none; max-width: none; }
  .tabs, .actions, .op-row button, .no-print { display: none !important; }
}