:root {
  --bg: #f6f5f1;
  --card: #fff;
  --ink: #23201c;
  --sub: #7d766c;
  --line: #e4e0d8;
  --accent: #3d7a5a;
  --accent-soft: #e8f1eb;
  --warn: #c2521f;
  --warn-soft: #fdeee6;
  --mori: #4a8f4a;
  --gyomu: #d08a2a;
  --ok: #3f6fb5;
  --other: #8a8279;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1917;
    --card: #262421;
    --ink: #ece8e1;
    --sub: #9b948a;
    --line: #38352f;
    --accent: #6bb08a;
    --accent-soft: #223129;
    --warn: #e8845a;
    --warn-soft: #3a2620;
    --mori: #71b571;
    --gyomu: #e0a856;
    --ok: #7aa3de;
    --other: #9b948a;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
body {
  margin: 0;
  padding-bottom: 5rem;
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
h1 { font-size: 1.05rem; margin: 0; font-weight: 700; letter-spacing: .02em; }

/* --- ヘッダー --- */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem calc(.7rem);
  padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.head-main { flex: 1; min-width: 0; }
.date-label { font-size: .8rem; color: var(--sub); }
.mode-btn {
  flex: none; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: .82rem; font-weight: 600; padding: .45rem .8rem;
  border-radius: 999px; cursor: pointer;
}
.mode-btn.shopping { background: var(--warn); border-color: var(--warn); }

/* --- タブ --- */
nav {
  position: sticky; top: 0; z-index: 19;
  display: flex; background: var(--card); border-bottom: 1px solid var(--line);
}
nav button {
  flex: 1; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--sub);
  padding: .65rem 0; cursor: pointer; border-bottom: 2.5px solid transparent;
}
nav button.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.badge {
  display: inline-block; min-width: 1.25rem; margin-left: .3rem; padding: 0 .3rem;
  background: var(--warn); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1.25rem; vertical-align: text-top;
}

main { padding: .75rem; max-width: 640px; margin: 0 auto; }
.tab { display: none; }
.tab.on { display: block; }

/* --- 店ごとのまとまり --- */
.store-group { margin-bottom: 1rem; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.store-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; font-size: .85rem; font-weight: 700;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.dot.mori { background: var(--mori); } .dot.gyomu { background: var(--gyomu); }
.dot.ok { background: var(--ok); } .dot.other { background: var(--other); }
.store-count { margin-left: auto; font-weight: 500; color: var(--sub); font-size: .78rem; }

/* --- 行 --- */
.row { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row.bought .rname { text-decoration: line-through; color: var(--sub); }
.row.oos { background: var(--warn-soft); }
/* 買い物中は行全体をタップ判定にする（片手・荷物ありでも押せるように） */
.row.shop { padding: .85rem .8rem; cursor: pointer; user-select: none; }
.check {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 2px solid var(--line); background: none; cursor: pointer; position: relative;
}
.check.on { background: var(--accent); border-color: var(--accent); }
.check.on::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .32rem; height: .62rem; margin: -.38rem 0 0 -.18rem;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.row.shop .check { width: 2.4rem; height: 2.4rem; }
.row.shop .check.on::after { width: .45rem; height: .85rem; margin: -.52rem 0 0 -.25rem; border-width: 0 3px 3px 0; }
.rbody { flex: 1; min-width: 0; }
.rname { font-size: .97rem; word-break: break-word; }
.rmeta { font-size: .75rem; color: var(--sub); display: flex; flex-wrap: wrap; gap: .4rem; }
.qty { font-weight: 600; color: var(--ink); }
.tag { font-size: .68rem; padding: .05rem .4rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.tag.alt { color: var(--sub); }
.tag.carry { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.rbtns { display: flex; gap: .3rem; flex: none; align-items: center; }
.mini {
  border: 1px solid var(--line); background: var(--card); color: var(--sub);
  font: inherit; font-size: .74rem; padding: .45rem .6rem; border-radius: 6px;
  cursor: pointer; user-select: none;
}
.mini.on { background: var(--warn); border-color: var(--warn); color: #fff; }
/* 買い物中の「品切れ」は指で押しやすい大きさに */
.row.shop .mini { padding: .6rem .75rem; font-size: .8rem; }

/* --- 提案 --- */
.sug-head { display: flex; align-items: baseline; gap: .5rem; margin: 1rem .2rem .4rem; font-size: .85rem; font-weight: 700; }
.sug-head small { font-weight: 400; color: var(--sub); }
.sug-row { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-top: 1px solid var(--line); cursor: pointer; user-select: none; }
.sug-row:first-of-type { border-top: 0; }
.ratio { font-size: .7rem; font-weight: 700; padding: .1rem .35rem; border-radius: 4px; }
.ratio.carry, .ratio.overdue { background: var(--warn-soft); color: var(--warn); }
.ratio.due { background: var(--accent-soft); color: var(--accent); }
.ratio.soon { background: var(--bg); color: var(--sub); }

/* --- 追加フォーム / 固定ボタン --- */
.addbar { display: flex; gap: .5rem; margin-bottom: 1rem; }
.addbar input {
  /* iOS Safari は 16px 未満の入力欄にフォーカスすると勝手に拡大するので下回らせない */
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
}
.btn {
  border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700;
  padding: .65rem 1.1rem; border-radius: var(--radius); cursor: pointer;
}
.btn.ghost { background: var(--card); color: var(--accent); border: 1px solid var(--accent); }
.btn.wide { display: block; width: 100%; margin-top: .5rem; }
.btn:disabled { opacity: .45; cursor: default; }
.sticky-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.sticky-bottom .btn { width: 100%; max-width: 610px; margin: 0 auto; display: block; }

/* --- その他 --- */
.progress { height: .35rem; background: var(--line); border-radius: 999px; overflow: hidden; margin: .1rem 0 .9rem; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.empty { text-align: center; color: var(--sub); font-size: .9rem; padding: 2.5rem 1rem; }
.mtable { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mrow { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-top: 1px solid var(--line); font-size: .85rem; }
.mrow:first-child { border-top: 0; }
.mrow .mname { flex: 1; min-width: 0; }
.mrow .mnum { color: var(--sub); font-size: .75rem; white-space: nowrap; }
.toast {
  position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .5rem 1rem; border-radius: 999px;
  font-size: .85rem; z-index: 40; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
/* 電波が悪いときの状態表示。保留中の操作があることを隠さない */
.netbar {
  position: sticky; top: 0; z-index: 18;
  padding: .45rem .8rem; font-size: .78rem; font-weight: 600;
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid var(--warn); text-align: center;
}
.filters { display: flex; gap: .4rem; margin-bottom: .7rem; flex-wrap: wrap; }
.filters button {
  font: inherit; font-size: .78rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--sub); cursor: pointer;
}
.filters button.on { background: var(--accent); border-color: var(--accent); color: #fff; }