:root {
  --bg: #fbf8f3;
  --card: #ffffff;
  --ink: #2a2723;
  --muted: #8a837a;
  --line: #ebe5dc;
  --accent: #2f6b52;
  --accent-soft: #e6f0ea;
  --ta: #2f6fde;
  --hi: #e2546b;
  --ok: #3aa36b;
  --radius: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif; font-size: 16px; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: #c0392b; min-height: 1.2em; font-size: .9rem; }
.link { background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 0; cursor: pointer; }

/* マーク */
.mark { display: inline-flex; align-items: center; justify-content: center; width: 1.55em; height: 1.55em; border-radius: 50%; color: #fff; font-weight: 700; font-size: .78rem; flex: 0 0 auto; line-height: 1; }
.mark.ta { background: var(--ta); }
.mark.hi { background: var(--hi); }
.mark.big { width: 64px; height: 64px; font-size: 1.8rem; }
.marks { display: inline-flex; gap: 3px; }

/* ログイン */
.screen { min-height: 100vh; }
#login { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: 100%; max-width: 360px; text-align: center; }
.login-logo { width: 72px; height: 72px; }
.login-box h1 { margin: 6px 0 2px; font-size: 1.5rem; }
.who-pick { display: flex; justify-content: center; gap: 24px; margin: 18px 0; }
.who-btn { background: none; border: 3px solid transparent; border-radius: 50%; padding: 4px; cursor: pointer; opacity: .45; transition: .15s; }
.who-btn.sel { opacity: 1; border-color: var(--ink); }
#login-form input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 12px; }

/* 共通部品 */
.btn { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: #c0392b; border-color: #f0c9c3; }
.btn.wide { width: 100%; padding: 14px; }
.btn.small { padding: 6px 10px; font-size: .85rem; }
.btn:active { transform: scale(.98); }

/* 上部バー */
.topbar { position: sticky; top: 0; z-index: 5; padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; background: rgba(251,248,243,.94); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
.topbar-title { font-size: 1.25rem; font-weight: 800; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.mark-btn { background: none; border: 0; padding: 0; cursor: pointer; }
.mark-btn .mark { font-size: 1rem; }
.sync { font-size: .75rem; color: var(--muted); }
.sync.off { color: #c0392b; }
.demo-banner { background: #fff4e3; color: #8a5a17; font-size: .82rem; padding: 6px 16px; border-bottom: 1px solid #f3e2c6; }

main { padding: 12px 14px calc(96px + var(--safe-b)); max-width: 720px; margin: 0 auto; }

/* 下部タブ */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; background: #fff; border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tab { flex: 1; background: none; border: 0; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .72rem; color: var(--muted); position: relative; cursor: pointer; }
.tab .ti { font-size: 1.35rem; filter: grayscale(1); opacity: .6; }
.tab.active { color: var(--ink); font-weight: 700; }
.tab.active .ti { filter: none; opacity: 1; }
.tbadge { position: absolute; top: 4px; left: 54%; min-width: 18px; height: 18px; border-radius: 9px; background: #e5403a; color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; display: none; align-items: center; justify-content: center; padding: 0 5px; }
.tbadge.on { display: inline-flex; }

/* カード */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.card h2 { font-size: .95rem; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card h2 .sub { font-weight: 500; color: var(--muted); font-size: .8rem; }
.bigdate { font-size: 1.6rem; font-weight: 800; margin: 4px 2px 12px; }
.bigdate small { font-size: .95rem; color: var(--muted); font-weight: 600; margin-left: 6px; }

/* 今日のまとめ */
.summary-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.summary-row:first-of-type { border-top: 0; }
.summary-row .mark { font-size: .95rem; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #f2eee8; }
.flag.car { background: #e3efff; color: #1d4fa8; }
.flag.lunch { background: #fff0d9; color: #95570b; }
.flag.dinner { background: #fde4e7; color: #a3243a; }
.flag.none { background: none; color: var(--muted); font-weight: 500; padding-left: 0; }

/* 予定リスト */
.ev { display: flex; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); cursor: pointer; align-items: flex-start; }
.ev:first-child { border-top: 0; }
.ev-time { width: 54px; flex: 0 0 auto; font-weight: 700; font-size: .9rem; padding-top: 1px; }
.ev-time small { display: block; color: var(--muted); font-weight: 500; font-size: .75rem; }
.ev-body { flex: 1; min-width: 0; }
.ev-title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-memo { color: var(--muted); font-size: .82rem; margin-top: 2px; white-space: pre-wrap; }
.ev .flags { margin-top: 5px; }
.new { display: inline-block; background: #e5403a; color: #fff; font-size: .62rem; font-weight: 800; padding: 1px 5px; border-radius: 5px; letter-spacing: .03em; }
.empty { color: var(--muted); font-size: .9rem; padding: 6px 2px; }
.daylabel { font-size: .8rem; font-weight: 700; color: var(--muted); margin: 14px 2px 4px; }

/* カレンダー */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font-size: 1.05rem; }
.cal-nav { background: none; border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 34px; cursor: pointer; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal .dow { font-size: .72rem; color: var(--muted); padding: 2px 0 4px; }
.cal .dow.sun, .cal .day.sun .dn { color: #d0473b; }
.cal .dow.sat, .cal .day.sat .dn { color: #2f6fde; }
.cal .day { min-height: 50px; border-radius: 10px; padding: 4px 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid transparent; }
.cal .day.out { opacity: .3; }
.cal .day.today .dn { background: var(--ink); color: #fff !important; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.cal .day.sel { border-color: var(--accent); background: var(--accent-soft); }
.cal .dn { font-size: .85rem; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; max-width: 40px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.ta { background: var(--ta); }
.dot.hi { background: var(--hi); }
.dot.both { background: linear-gradient(90deg, var(--ta) 50%, var(--hi) 50%); }

.fab { position: fixed; right: 18px; bottom: calc(76px + var(--safe-b)); z-index: 7; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 2rem; line-height: 1; box-shadow: 0 6px 18px rgba(47,107,82,.35); cursor: pointer; }

/* 買い物 */
.progress-card { display: flex; align-items: center; gap: 12px; }
.progress-card .pnum { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.progress-card .pnum small { font-size: .85rem; color: var(--muted); font-weight: 600; }
.pbar { flex: 1; height: 10px; border-radius: 5px; background: #efe9e0; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--ok); border-radius: 5px; transition: width .3s; }
.shopmode-btn { white-space: nowrap; }
.shopmode-btn.on { background: var(--ok); border-color: var(--ok); color: #fff; }

.addrow { display: flex; gap: 6px; }
.addrow input[name=name] { flex: 1; min-width: 0; }
.addrow input, .addrow select, .field input, .field select, .field textarea { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; width: 100%; }
.addrow input[name=qty] { width: 70px; flex: 0 0 70px; }
.addrow .btn { flex: 0 0 auto; }
.addmore { display: flex; gap: 6px; margin-top: 8px; }
.addmore select { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { border: 1px dashed #d8cfc2; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: .82rem; cursor: pointer; }
.chip:active { background: var(--accent-soft); }

.cat { font-size: .74rem; font-weight: 700; color: var(--muted); margin: 12px 4px 4px; letter-spacing: .04em; }
.item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 6px; cursor: pointer; user-select: none; transition: background .15s; }
.item:active { background: #f6fbf8; }
.check { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #cfc6b9; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .9rem; }
.item.done .check { background: var(--ok); border-color: var(--ok); }
.item-main { flex: 1; min-width: 0; }
.item-name { font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.item-qty { color: var(--muted); font-weight: 500; font-size: .88rem; }
.item-note { color: var(--muted); font-size: .8rem; }
.item-edit { background: none; border: 0; color: var(--muted); font-size: 1.2rem; padding: 4px 6px; cursor: pointer; }
.item.done { background: #faf8f5; }
.item.done .item-name { color: #a49d93; text-decoration: line-through; }
.item.done .mark { opacity: .5; }
.done-head { display: flex; justify-content: space-between; align-items: center; margin: 18px 4px 6px; }
.done-head button.toggle { background: none; border: 0; font-weight: 700; color: var(--muted); cursor: pointer; padding: 4px 0; }
.allclear { text-align: center; padding: 26px 10px; color: var(--ok); font-weight: 700; }
.allclear div { font-size: 2.4rem; }

body.shopmode .item { padding: 16px 14px; }
body.shopmode .item-name { font-size: 1.2rem; }
body.shopmode .check { width: 32px; height: 32px; }

/* 下からのシート */
.backdrop { position: fixed; inset: 0; background: rgba(30,25,20,.35); z-index: 20; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--bg); border-radius: 20px 20px 0 0; max-height: 92vh; overflow: auto; padding: 8px 16px calc(20px + var(--safe-b)); max-width: 720px; margin: 0 auto; box-shadow: 0 -8px 30px rgba(0,0,0,.15); }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #d9d1c5; margin: 4px auto 10px; }
.sheet h3 { margin: 0 0 12px; font-size: 1.1rem; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.field-row { display: flex; gap: 8px; }
.field-row > * { flex: 1; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.tg { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 9px 14px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.tg.on { border-color: var(--accent); background: var(--accent-soft); }
.tg.who.on.ta { border-color: var(--ta); background: #eaf1fd; }
.tg.who.on.hi { border-color: var(--hi); background: #fdecef; }
.sheet-actions { display: flex; gap: 8px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; padding: 13px; }
.meta { font-size: .75rem; color: var(--muted); margin-top: 10px; }

/* 設定 */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.set-row:first-of-type { border-top: 0; }
.set-row select, .set-row input[type=time] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #d9d1c5; border-radius: 14px; transition: .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::before { transform: translateX(20px); }
.note { font-size: .8rem; color: var(--muted); line-height: 1.6; }

/* トースト */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b)); z-index: 30; background: #2a2723; color: #fff; border-radius: 12px; padding: 11px 16px; font-size: .9rem; display: flex; gap: 14px; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); width: max-content; max-width: 92vw; }
.toast span { min-width: 0; }
.toast button { white-space: nowrap; flex: 0 0 auto; background: none; border: 0; color: #9fe0bb; font-weight: 800; cursor: pointer; padding: 0; }

/* 切り替え（通常／クイック、店） */
.seg { display: flex; background: #efe9e0; border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px 6px; font-weight: 700; color: var(--muted); cursor: pointer; font-size: .9rem; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.seg-main { margin-bottom: 12px; }
.seg-store { margin: 10px 0; }
.seg-store button { padding: 6px; font-size: .85rem; }

/* クイックモード */
.qsum { display: flex; align-items: baseline; gap: 6px; font-size: .9rem; color: var(--muted); }
.qsum b { font-size: 1.4rem; color: var(--ink); }
.qsum .link { margin-left: auto; font-size: .85rem; }
.qsearch { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.qsec { margin-bottom: 14px; }
.qsec-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .95rem; margin: 6px 2px 8px; }
.qsec-h span { font-weight: 600; font-size: .75rem; color: var(--muted); background: #efe9e0; border-radius: 999px; padding: 1px 8px; }
.qsec-h .link { margin-left: auto; font-size: .8rem; }
.qsec-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; width: 100%; text-align: left; }
.qsec.due { background: #fff7ec; border: 1px solid #f6dfbf; border-radius: var(--radius); padding: 8px 10px 10px; }
.qcat { font-size: .72rem; font-weight: 700; color: var(--muted); margin: 10px 2px 5px; letter-spacing: .04em; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.qt { position: relative; min-height: 54px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; cursor: pointer; user-select: none; transition: background .12s, border-color .12s; }
.qt:active { transform: scale(.97); }
.qn { font-weight: 700; font-size: .92rem; line-height: 1.2; word-break: break-all; }
.qsub { font-size: .66rem; color: var(--muted); }
.qt.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.qt.on .qn::before { content: "✓ "; }
.qt.incart { background: #f1f7f3; border-color: #cfe7d8; color: #7fa48e; }
.qqty { font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 1px 8px; }
.qstore { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: .55rem; font-weight: 800; color: #1d4fa8; background: #e3efff; border-radius: 4px; padding: 0 3px; }
.qt.on .qstore { background: rgba(255,255,255,.3); color: #fff; }
.qadd { margin-top: 10px; }

/* 品目の管理 */
.mlist { max-height: 55vh; overflow: auto; margin-top: 8px; border-top: 1px solid var(--line); }
.mrow { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mname { flex: 1; font-weight: 600; }
.mname small { display: block; color: var(--muted); font-weight: 500; font-size: .74rem; }
.mtier { font-size: .7rem; font-weight: 700; border-radius: 6px; padding: 2px 6px; background: #efe9e0; color: var(--muted); }
.mtier.core { background: #fff0d9; color: #95570b; }
.mtier.some { background: #e9f3ec; color: #2e7a52; }
.mcount { font-size: .78rem; color: var(--muted); width: 36px; text-align: right; }

/* 音声入力 */
.mic-btn { flex: 0 0 auto; padding: 0 12px; font-size: 1.15rem; }
.listen { text-align: center; padding: 10px 0 4px; }
.listen-mic { width: 84px; height: 84px; margin: 6px auto 12px; border-radius: 50%; background: #e5403a; color: #fff; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,64,58,.5); } 70% { box-shadow: 0 0 0 22px rgba(229,64,58,0); } 100% { box-shadow: 0 0 0 0 rgba(229,64,58,0); } }
.listen-hint { font-weight: 700; }
.listen-hint small { color: var(--muted); font-weight: 500; }
.listen-text { margin-top: 14px; min-height: 3em; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 1.1rem; text-align: left; }
.note.warn { color: #a3243a; background: #fde4e7; border-radius: 10px; padding: 8px 10px; }
#v-text { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.vrows { display: flex; flex-direction: column; gap: 6px; }
.vrow { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.vrow.off { opacity: .5; }
.vchk { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; border: 2.5px solid #cfc6b9; background: #fff; color: #fff; font-weight: 800; cursor: pointer; }
.vrow:not(.off) .vchk { background: var(--ok); border-color: var(--ok); }
.vname { flex: 1; min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; background: none; }
.vname:focus, .vqty:focus { border-color: var(--line); background: #fbf8f3; outline: none; }
.vqty { width: 64px; flex: 0 0 64px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; font-size: .85rem; }
.vtag { flex: 0 0 auto; font-size: .66rem; font-weight: 800; border-radius: 6px; padding: 2px 6px; }
.vtag.known { background: #e9f3ec; color: #2e7a52; }
.vtag.new { background: #fff0d9; color: #95570b; }
.vtag.inlist { background: #efe9e0; color: var(--muted); }
.listen-status { margin-top: 10px; font-size: .85rem; color: var(--muted); font-weight: 600; }

/* リスト（グループ） */
.lbar { display: flex; align-items: flex-start; gap: 6px; margin: 0 -14px 10px; padding: 0 14px; }
.lchips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.lchips::-webkit-scrollbar { display: none; }
.lchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px 6px 6px; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.lchip .mark { font-size: .7rem; }
.lchip b { font-size: .72rem; background: #efe9e0; color: var(--muted); border-radius: 999px; padding: 0 7px; }
.lchip.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.lchip.on b { background: rgba(255,255,255,.25); color: #fff; }
.lchip.add { padding: 6px 12px; color: var(--accent); border-style: dashed; }
.lmenu { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.2rem; cursor: pointer; margin-bottom: 4px; }
.dest, .dest-new { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.dest-new { margin-top: 6px; }
.mvlist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow: auto; }
.tlist { padding: 10px 2px; border-top: 1px solid var(--line); cursor: pointer; }
.tlist:first-of-type { border-top: 0; }
.tl-h { display: flex; align-items: center; gap: 8px; }
.tl-h .sub { margin-left: auto; color: var(--muted); font-size: .8rem; }
.tl-items { color: var(--muted); font-size: .85rem; margin-top: 3px; padding-left: 30px; }

/* 最近の買い物 */
.hist-link { text-align: right; margin: -4px 2px 8px; font-size: .85rem; }
.hrec { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.hrec-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .9rem; }
.hrec-h .muted { font-size: .78rem; display: inline-flex; align-items: center; gap: 4px; }
.hrow { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-top: 1px dashed var(--line); }
.hname small { color: var(--muted); }
.hwho { display: inline-flex; align-items: center; gap: 4px; }
.hwho i { font-style: normal; color: var(--muted); font-size: .8rem; }
.qsub.qwarn { color: #b45309; font-weight: 700; }
.qt.on .qsub.qwarn { color: #fff; }
.vwarn { font-size: .75rem; color: #b45309; font-weight: 700; margin: -2px 0 2px 40px; }

/* お出かけ画面 */
body.no-scroll { overflow: hidden; }
.outing { position: fixed; inset: 0; z-index: 12; background: var(--bg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.out-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; background: var(--accent); color: #fff; }
.out-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.05rem; cursor: pointer; flex: 0 0 auto; }
.out-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; }
.out-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-prog b { font-size: 1.5rem; } .out-prog small { opacity: .8; }
.out-bar { height: 5px; background: #dfe9e3; } .out-bar i { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.out-tools { display: flex; justify-content: space-between; padding: 6px 14px 0; font-size: .82rem; }
.out-body { flex: 1; overflow-y: auto; padding: 0 10px; -webkit-overflow-scrolling: touch; }
.out-cat { font-size: .68rem; font-weight: 800; color: var(--muted); margin: 10px 4px 4px; letter-spacing: .05em; }
.out-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.out-body.two .out-grid { grid-template-columns: 1fr 1fr; }
.orow { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; min-height: 48px; cursor: pointer; user-select: none; }
.orow:active { background: #eef6f1; }
.oname { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.oname small { font-weight: 500; color: var(--muted); font-size: .78rem; margin-left: 5px; }
.oname em { display: block; font-style: normal; font-weight: 500; color: var(--muted); font-size: .7rem; }
.orow .mark { font-size: .62rem; opacity: .85; }
.ocheck { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 3px solid #c9d8cf; background: #fff; }
.orow:active .ocheck { background: var(--ok); border-color: var(--ok); }
.out-body.two .orow { padding-left: 9px; }
.out-body.two .oname { font-size: .88rem; }
.out-body.two .orow .mark { display: none; }
.out-body.two .ocheck { width: 34px; height: 34px; }
.out-done-h { margin: 16px 4px 6px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.out-done { display: flex; flex-wrap: wrap; gap: 5px; }
.odone { border: 1px solid #cfe7d8; background: #f1f7f3; color: #6f9a81; border-radius: 999px; padding: 4px 10px; font-size: .78rem; text-decoration: line-through; cursor: pointer; }
.out-clear { text-align: center; padding: 30px 10px 10px; color: var(--ok); font-weight: 800; }
.out-clear div { font-size: 2.6rem; }
.out-foot { padding: 8px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: #fff; }
.tl-go { margin-left: 8px; padding: 4px 10px; }

/* スーパー参考価格 */
.prices-pane { position: fixed; top: 56px; left: 0; right: 0; bottom: 57px; display: flex; flex-direction: column; background: var(--bg); z-index: 4; }
.price-seg { margin: 8px 12px; }
.price-frames { flex: 1; position: relative; }
.price-frames iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.price-loading { position: absolute; inset: 0; z-index: 2; background: var(--bg); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-weight: 700; }
.price-loading small { font-weight: 500; }
.price-frames iframe { z-index: 1; }
.tab { font-size: .66rem; }

.price-adj { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pa-txt { flex: 1; min-width: 0; line-height: 1.3; }
.pa-txt b { font-size: .85rem; } .pa-txt small { display: block; color: var(--muted); font-size: .72rem; }
.switch.small { width: 42px; height: 24px; } .switch.small span::before { width: 18px; height: 18px; }
.switch.small input:checked + span::before { transform: translateX(18px); }
.pct-in { display: flex; align-items: center; gap: 4px; } .pct-in input { width: 70px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; text-align: right; }

/* 店ごとの買い出し */
.lchips.stores { flex-wrap: nowrap; }
.lchips.stores .lchip { flex: 1; justify-content: center; padding: 8px 10px; font-size: .95rem; }
.lchip.st-ave.on { background: #1f5fa8; border-color: #1f5fa8; }
.lchip.st-ok.on { background: #b3261e; border-color: #b3261e; }
.lchip.st-other.on { background: #5f6b66; border-color: #5f6b66; }
.stb { display: inline-block; font-size: .7rem; font-weight: 800; color: #fff; border-radius: 6px; padding: 1px 7px; background: #5f6b66; }
.stb.st-ave { background: #1f5fa8; } .stb.st-ok { background: #b3261e; }

/* カレンダーに予定の文字 */
.cal .day { min-height: 74px; align-items: stretch; gap: 2px; padding: 3px 1px 2px; }
.cal .dn { align-self: center; }
.cevs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cev { display: block; font-size: .6rem; line-height: 1.25; font-weight: 700; text-align: left; padding: 1px 3px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; color: #fff; }
.cev.ta { background: var(--ta); }
.cev.hi { background: var(--hi); }
.cev.both { background: linear-gradient(90deg, var(--ta), var(--hi)); }
.cev.more { background: none; color: var(--muted); font-weight: 600; }
.cev-t { font-style: normal; font-weight: 500; opacity: .85; margin-right: 1px; }
.cev-t:empty { display: none; }
.cal .day.out .cev { opacity: .6; }
@media (min-width: 600px) { .cev { font-size: .72rem; padding: 2px 5px; } .cal .day { min-height: 92px; } }

.cal .day { min-width: 0; overflow: hidden; }
/* スマホ：時刻は省いて、名前を2行まで表示 */
@media (max-width: 599px) {
  .cev { white-space: normal; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .62rem; line-height: 1.2; max-height: calc(2.4em + 2px); overflow: hidden; padding: 1px 2px; letter-spacing: -.02em; }
  .cev-t { display: none; }
  .cev.more { -webkit-line-clamp: 1; }
}

.tabbar .tab { min-width: 0; } .tabbar .tab span:last-child { white-space: nowrap; }

/* メニュー画面 */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mtile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; min-height: 128px; }
.mtile:active { background: var(--accent-soft); }
.micon { font-size: 2.2rem; line-height: 1.1; }
.mtile b { font-size: 1rem; }
.mtile small { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.mtile small.warn { color: #c0392b; font-weight: 700; }
.mbadge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; border-radius: 11px; background: #e5403a; color: #fff; font-style: normal; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.mstar { position: absolute; top: 8px; left: 10px; font-style: normal; color: #e0a020; }

/* 防災 */
.bsum { padding: 12px 14px; }
.bnums { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 4px; margin-bottom: 10px; }
.bnums b { display: block; font-size: 1.5rem; line-height: 1.1; }
.bnums small { color: var(--muted); font-size: .7rem; }
.bnums .red b { color: #c0392b; } .bnums .orange b { color: #d97706; }
.bwater { border-top: 1px dashed var(--line); padding-top: 10px; font-size: .88rem; display: flex; flex-direction: column; gap: 6px; }
.btools { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; flex-wrap: wrap; }
.btools .seg { flex: 1; min-width: 200px; }
.slist { padding: 4px 12px; }
.srow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.srow:first-child { border-top: 0; }
.srow.zero { opacity: .55; }
.smain { flex: 1; min-width: 0; }
.sname { font-weight: 700; }
.sqty { font-weight: 500; color: var(--muted); font-size: .85rem; margin-left: 4px; }
.smeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; align-items: center; }
.xb { font-size: .72rem; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.xb.expired { background: #c0392b; color: #fff; }
.xb.soon { background: #fde4c8; color: #9a4a00; }
.xb.near { background: #fff4c2; color: #7a5d00; }
.xb.ok { background: #e6f0ea; color: #2f6b52; }
.xb.none { background: #efe9e0; color: var(--muted); }
.splace { font-size: .72rem; color: var(--muted); }
.suse { flex: 0 0 auto; }
.bnotice { background: #fff4e3; border-color: #f3dcb8; color: #8a4b0f; cursor: pointer; font-size: .92rem; }

/* 祝日 */
.cev.hol { background: none; color: #d0473b; font-weight: 800; padding-left: 1px; }
.holtxt { color: #d0473b; font-weight: 700; }

.hdel, .hx { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px 4px; margin-left: 4px; font-size: .85rem; }
.hx { font-size: .8rem; opacity: .7; } .hdel:active, .hx:active { color: #c0392b; }

/* CGサービス */
.glist { display: grid; grid-template-columns: 1fr; }
.grow { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); }
.grow:first-child { border-top: 0; }
.grow b { width: 1.6em; text-align: center; } .grow b.sun { color: #d0473b; } .grow b.sat { color: #2f6fde; }
.grow span { flex: 1; }
.grow i { font-style: normal; font-size: .7rem; font-weight: 800; background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 7px; }
.grow i.tm { background: #efe9e0; color: var(--muted); }
.grow.today { background: var(--accent-soft); border-radius: 8px; font-weight: 700; }
.pnext { font-size: .95rem; margin-bottom: 8px; } .pnext b { font-size: 1.3rem; color: var(--accent); }
.cgdl { display: grid; grid-template-columns: 84px 1fr; gap: 4px 10px; margin: 0 0 10px; font-size: .9rem; } .cgdl dt { color: var(--muted); font-size: .8rem; } .cgdl dd { margin: 0; }
.ptimes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ptimes div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.ptimes div b { font-size: .75rem; color: var(--muted); } .ptimes div.on { border-color: var(--accent); background: var(--accent-soft); }
.frow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
.frow:first-of-type { border-top: 0; } .frow b { flex: 1; } .frow span { font-variant-numeric: tabular-nums; }
.frow i { font-style: normal; font-size: .7rem; font-weight: 800; border-radius: 6px; padding: 1px 7px; } .frow i.open { background: #e6f0ea; color: #2f6b52; } .frow i.closed { background: #efe9e0; color: var(--muted); }
.crow { padding: 10px 2px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.crow:first-of-type { border-top: 0; } .crow b { flex: 1 1 100%; }
.tel { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .9rem; }
.cnote { flex: 1 1 100%; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.cgrows { display: flex; flex-direction: column; gap: 8px; }
.cgrow { display: flex; gap: 6px; align-items: center; } .cgrow.col { flex-direction: column; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.cgrow input, .cgrow textarea { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.cgrow input[data-k=name] { flex: 1; } .cgrow input[type=time] { width: 96px; }
.gnotice { cursor: pointer; font-size: .92rem; }
.mtile small.ok { color: var(--accent); font-weight: 700; }
.cgrow.col .field-row { display: flex; gap: 6px; align-items: center; }
.cgrow.col .field-row input { flex: 1 1 0; width: 0; }
.cgrow.col .field-row input[data-k=tel] { flex: 1.1 1 0; }
.cgrow.col .field-row .hx { flex: 0 0 auto; }

.wrow { padding: 10px 2px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.wrow:first-of-type { border-top: 0; }
.wline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl { width: 104px; flex: 0 0 auto; color: var(--muted); font-size: .78rem; }
.wline code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; background: #f4f1ec; border-radius: 6px; padding: 3px 8px; word-break: break-all; }
.wcopy { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: .78rem; cursor: pointer; flex: 0 0 auto; }
.wcopy:active { background: var(--accent-soft); }
.cgrow.col > input, .cgrow.col > textarea { width: 100%; }
.wl { width: 78px; font-size: .72rem; line-height: 1.2; }
.wline code { font-size: .9rem; padding: 3px 6px; }
.wcopy { padding: 4px 8px; }

.wonly { font-size: .68rem; font-weight: 800; background: #efe4f7; color: #6b3fa0; border-radius: 6px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.cgrow.col > select { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }