/* ドケチメシ v2 — 温かい家庭料理（クリーム×深緑）
   見た目の正本。ホームと献立ページを新しいトーンで組み直した試作版。
   クラス名は app.js / prerender.mjs と共有している。 */
:root{
  --paper:#FBF5E7; --card:#FFFDF7; --ink:#2B3227; --muted:#616B56; --line:#E7DFC9;
  --green:#22543D; --green-deep:#173D2B; --green-2:#3B7A57; --sand:#F6F0E1; --sand-line:#E9DFC7;
  --amber:#E9A33B; --amber-soft:#FBEFD2; --red:#C0503A;
  --head:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  --shadow:0 2px 14px rgba(43,50,39,.08); --r:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.8;
  background-image:radial-gradient(120% 55% at 50% -8%,#F6E9CE 0%,rgba(246,233,206,0) 62%);
  background-repeat:no-repeat;background-attachment:scroll;
}
#app{max-width:620px;margin:0 auto;padding:18px 20px calc(56px + env(safe-area-inset-bottom))}
a{color:var(--green);text-decoration:none}
b,strong{font-weight:700}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.45;letter-spacing:.01em}
:focus-visible{outline:3px solid var(--green-2);outline-offset:2px}
.num{font-family:var(--head);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0}

/* ---- マストヘッド ---- */
.mast{padding:14px 0 2px}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:800;font-size:17px;color:var(--green);letter-spacing:.06em}
.brand svg{width:24px;height:24px;flex:none}
.catch{font-size:clamp(27px,7.6vw,35px);line-height:1.4;font-weight:800;margin:16px 0 10px;word-break:auto-phrase}
.catch .hl{color:var(--green)}
.intro{font-size:13.5px;color:var(--muted);max-width:34em}
.intro+.intro{margin-top:2px}

/* ---- 今週いちばん安い（ヒーロー） ---- */
.hero{position:relative;margin:22px 0 36px;background:var(--green);border-radius:26px;padding:22px 20px 20px;
  color:#F6F0E0;overflow:hidden;box-shadow:0 10px 26px rgba(34,84,61,.2)}
.hero-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;color:#D8DFCB}
.hero h2{font-size:21px;color:#FFF9EC;margin-top:2px}
.hero-price{display:flex;align-items:baseline;gap:2px;margin-top:6px;color:var(--amber);line-height:.95;font-family:var(--head);font-weight:800}
.hero-price .num{font-size:62px}
.hero-yen{font-size:16px;margin-left:2px}
.hero-per{font-size:11px;color:#D8DFCB;margin-left:2px;font-family:var(--body);font-weight:700}
.hero-meta{font-size:12.5px;color:#E4E6D4;margin-top:6px;max-width:78%;line-height:1.7;word-break:auto-phrase}
.hero-link{display:inline-block;margin-top:15px;background:#FFF6E2;color:var(--green-deep);font-weight:700;
  font-size:13.5px;border-radius:999px;padding:9px 19px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.hero-link:active{transform:translateY(1px)}
.hero-art{position:absolute;right:-10px;bottom:-14px;width:134px;height:134px;color:#F9F1DC;opacity:.2;pointer-events:none}

/* ---- 前回の店舗 ---- */
.hero-change{display:inline-block;margin-left:10px;padding:8px 2px;font-size:12px;color:#CCD4BF;text-decoration:underline;text-underline-offset:3px;vertical-align:middle}

/* ---- セクション ---- */
.sec{margin-bottom:44px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-head h2{font-size:21px}
.sec-head p{font-size:11.5px;color:var(--muted);white-space:nowrap}
.lead{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.75}

/* ---- 版カード ---- */
.cards{list-style:none;display:grid;gap:12px}
.ecard{background:var(--card);border-radius:var(--r);border:1px solid #EFE6D0;box-shadow:var(--shadow)}
.ecard>a{display:block;padding:16px 17px 14px;border-radius:inherit;color:inherit}
.ecard>a:active{background:#FFFDF7}
.ecard-top{display:flex;justify-content:space-between;gap:12px}
.ecard-title{display:flex;gap:9px;min-width:0}
.rankdot{flex:none;width:20px;height:20px;border-radius:50%;background:var(--green);color:#FFF6E2;
  font-family:var(--head);font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:4px}
.ecard.is-best .rankdot{background:var(--amber);color:#3A2E14}
.ecard h3{font-size:16.5px;line-height:1.5;display:flex;align-items:center;flex-wrap:wrap;gap:6px;word-break:auto-phrase}
.ecard .meta{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;line-height:1.6}
.badge{display:inline-block;font-family:var(--body);font-size:10px;font-weight:700;border-radius:999px;
  padding:1px 8px;background:var(--amber);color:#3A2E14;white-space:nowrap}
.badge-new{background:var(--green);color:#FFF6E2}
.price{text-align:right;white-space:nowrap;font-family:var(--head);font-weight:800;color:var(--green);line-height:1.1;flex:none}
.price small{display:block;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.price b{font-size:29px}
.price i{font-style:normal;font-size:11px;margin-left:1px}
.stars{font-size:12px;color:var(--muted);margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.7}
.stars b{color:var(--ink);font-weight:700;white-space:nowrap}

/* ---- きほんの最安比較 ---- */
.cmp{list-style:none;background:var(--card);border-radius:var(--r);border:1px solid #EFE6D0;box-shadow:var(--shadow);padding:4px 16px}
.cmp li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.cmp li:last-child{border-bottom:0}
.cname{flex:none;width:3.7em;font-size:12.5px;font-weight:700;color:var(--green);padding-top:4px}
.centries{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ce{display:inline-flex;align-items:baseline;gap:3px;font-size:11.5px;background:var(--card);
  border-radius:999px;padding:3px 10px;white-space:nowrap;line-height:1.6;box-shadow:inset 0 0 0 1px #E3E6D2}
.ce .num{font-size:13px}
.ce.min{background:var(--amber-soft);box-shadow:inset 0 0 0 1.5px #E7C57C}
.ce .badge{font-size:9px;padding:0 5px;margin-right:1px}
.ce .lim{font-size:9.5px;color:var(--red);font-weight:700;margin-left:2px}

/* ---- 店舗検索 ---- */
.search{position:relative;margin-top:2px}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--muted);pointer-events:none}
.search input{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:999px;padding:13px 18px 13px 44px;box-shadow:var(--shadow);-webkit-appearance:none}
.search input:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 4px rgba(34,84,61,.18)}
.quickstores{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;font-size:12px}
.quickstores a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink)}
.quickstores a small{color:var(--muted);margin-left:4px;font-size:10.5px}
.slist{list-style:none;margin-top:10px;background:var(--card);border-radius:16px;border:1px solid #EFE6D0;box-shadow:var(--shadow);padding:2px 14px}
.slist li{border-bottom:1px solid var(--line)}
.slist li:last-child{border-bottom:0}
.slist a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;font-size:13.5px}
.slist a b{font-weight:700}
.slist a span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.empty{font-size:12.5px;color:var(--muted);padding:12px 0}

/* ---- 使い方 ---- */
.how ol{list-style:none;display:grid;gap:9px;counter-reset:how}
.how li{position:relative;background:var(--card);border-radius:16px;border:1px solid #EFE6D0;box-shadow:var(--shadow);
  padding:13px 16px 13px 52px;font-size:13.5px;line-height:1.7}
.how li::before{counter-increment:how;content:counter(how);position:absolute;left:14px;top:12px;width:25px;height:25px;
  border-radius:50%;background:var(--green);color:#FFF6E2;font-family:var(--head);font-size:12px;
  font-weight:800;display:grid;place-items:center}
.note{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.8}

/* ---- 主ボタン ---- */
.cta{display:block;text-align:center;background:var(--green);color:#FFF9EC;font-weight:700;font-size:14px;
  padding:14px 18px;border-radius:999px;margin:18px 0 6px;box-shadow:0 6px 16px rgba(34,84,61,.18)}
.cta:hover{background:var(--green-deep)}

/* ---- ページ見出し ---- */
.back{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin:2px 0 16px}
.back:hover{color:var(--green)}
.pagehead,.ed-head{padding-bottom:20px}
.brandline{font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--green)}
.pagehead h1,.ed-head h2{font-size:27px;line-height:1.4;margin:3px 0 6px;word-break:auto-phrase}
.pagehead .meta,.ed-head .meta{font-size:12px;color:var(--muted)}
.store-ctx{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.8}
.store-ctx b{color:var(--ink);white-space:nowrap}
.pnote{font-size:12px;background:var(--amber-soft);border-radius:12px;padding:10px 14px;margin-top:12px;
  line-height:1.75;color:#6B4E18}

/* ---- 合計カード ---- */
.total{position:relative;background:var(--green);color:#F6F0E0;border-radius:26px;padding:22px 20px 20px;
  margin-bottom:36px;overflow:hidden;box-shadow:0 10px 26px rgba(34,84,61,.22)}
.tlabel{font-size:11px;font-weight:700;letter-spacing:.14em;color:#D8DFCB}
.tprice{display:flex;align-items:baseline;gap:2px;color:var(--amber);line-height:.95;
  font-family:var(--head);font-weight:800;transform-origin:25% 60%}
.tprice .num{font-size:72px}
.tprice i{font-style:normal;font-size:17px;margin-left:3px}
.tprice.ding{animation:ding .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ding{0%{transform:scale(1)}35%{transform:scale(1.06) rotate(-1.2deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tprice.ding{animation:none}}
.tmeta{font-size:12.5px;color:#E5E6D5;margin-top:4px}
.tmeta b{font-family:var(--head);font-size:15px;color:#FFF6E2}
.tsub{font-size:10.5px;color:#CCD4BF;margin-top:2px}
.seg{display:flex;gap:4px;background:rgba(255,255,255,.15);border-radius:999px;padding:4px;margin-top:16px}
.seg button{flex:1;border:0;background:transparent;color:#EFEEDD;border-radius:999px;padding:7px 4px 6px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.35}
.seg button small{display:block;font-size:10px;font-weight:500;opacity:.75}
.seg button.on{background:var(--amber);color:#3A2E14}
.seg button.on small{opacity:.85}
.sharebar{display:flex;gap:7px;margin-top:9px}
.sharebar button,.sharebar a{flex:1;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,246,226,.5);color:#F4EEDF;
  font-family:inherit;font-size:12.5px;font-weight:700;padding:10px 4px;text-align:center;cursor:pointer;line-height:1.3}
#btnShare{flex:1.9;background:#FFF6E2;color:var(--green)}
.sharebar button:disabled{opacity:.65}
.sharehint{font-size:10.5px;color:#CCD4BF;margin-top:8px;line-height:1.7}

/* ---- 料理カード ---- */
.menu{background:var(--card);border-radius:24px;border:1px solid #EFE6D0;box-shadow:var(--shadow);
  padding:18px 18px 16px;margin-bottom:16px}
.menu-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:13px}
.menu-head>div:first-child{min-width:0}
.menu h3{font-size:18px;line-height:1.5;display:flex;gap:7px;align-items:flex-start;word-break:auto-phrase}
.dishico{width:21px;height:21px;flex:none;color:var(--green);margin-top:4px}
.per{font-size:11.5px;color:var(--muted);margin-top:3px}
.menu-price{text-align:right;white-space:nowrap;font-family:var(--head);font-weight:800;color:var(--green);line-height:1.15;flex:none}
.menu-price small{display:block;font-size:10px;color:var(--muted);font-weight:700}
.menu-price b{font-size:25px}
.menu-price i{font-style:normal;font-size:10.5px}
.ing{list-style:none;background:var(--sand);border-radius:15px;padding:7px 14px;margin-bottom:16px;box-shadow:inset 0 0 0 1px var(--sand-line)}
.ing li{display:flex;align-items:center;gap:8px;font-size:13px;padding:6.5px 0;border-bottom:1px solid rgba(43,50,39,.09)}
.ing li:last-child{border-bottom:0}
.ing li>span:first-child{flex:1;min-width:0}
.qty{font-weight:700;font-size:12.5px;white-space:nowrap}
.tag{font-size:10px;font-weight:700;border-radius:999px;padding:1.5px 8px;white-space:nowrap;flex:none}
.t-sai{background:var(--amber);color:#3A2E14}
.t-lim{color:var(--red);box-shadow:inset 0 0 0 1px rgba(191,80,57,.45)}
.t-jyo{color:#626B55;background:var(--card);box-shadow:inset 0 0 0 1px #DDE2CC}
.steps{list-style:none;counter-reset:st;margin:0 0 14px}
.steps li{counter-increment:st;position:relative;padding-left:32px;font-size:13.5px;line-height:1.8;margin-bottom:9px}
.steps li::before{content:counter(st);position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;
  background:var(--green);color:#FFF6E2;font-family:var(--head);font-size:11px;font-weight:800;
  display:grid;place-items:center}
.src{font-size:10.5px;color:var(--muted);padding-top:10px;border-top:1px dashed var(--line);line-height:1.75}
.src a{color:var(--muted);text-decoration:underline}
.newseal{display:inline-block;background:var(--amber);color:#3A2E14;font-size:10px;font-weight:800;border-radius:999px;
  padding:1px 8px;margin-left:6px;vertical-align:2px;transform:rotate(-2deg)}

/* ---- 買い物リスト ---- */
.buy-sec{background:var(--card);border-radius:24px;border:1px solid #EFE6D0;box-shadow:var(--shadow);
  padding:18px;margin-top:30px;scroll-margin-top:12px}
.buy-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.buy-head h2{font-size:19px}
.progress{font-family:var(--head);font-weight:800;font-size:11.5px;color:var(--green);
  background:var(--card);border-radius:999px;padding:2px 11px;white-space:nowrap;box-shadow:inset 0 0 0 1.5px #DDE4CC}
.ckrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.ckrow:last-child{border-bottom:0}
.ckin{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ckmark{width:25px;height:25px;border:2px solid #D5D2BC;border-radius:8px;background:#fff;flex:none;position:relative;
  transition:background .15s,border-color .15s}
.ckin:focus-visible+.ckmark{outline:3px solid var(--amber);outline-offset:2px}
.ckrow input:checked+.ckmark{background:var(--green);border-color:var(--green)}
.ckrow input:checked+.ckmark::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
  border:solid #FFF6E2;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ckname{flex:1;font-size:13.5px;min-width:0;line-height:1.5}
.ckrow input:checked~.ckname{text-decoration:line-through;opacity:.45}
.ckrow input:checked~.ckyen{opacity:.35}
.ckyen{font-family:var(--head);font-weight:800;font-size:16px;white-space:nowrap;color:var(--green)}
.need{display:block;font-size:10.5px;color:var(--muted)}
.conf{display:inline-block;color:var(--red);font-size:10px;font-weight:700;margin-left:4px}
.ckreset{border:0;background:none;color:var(--muted);font-size:11.5px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;font-family:inherit;padding:4px 0;margin-top:4px}
.amt{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);
  margin-top:12px;padding-top:12px;font-weight:700;font-size:13px}
.amt .num{font-size:28px;color:var(--green)}
.amt small{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.lim{color:var(--red);font-weight:700;font-size:10.5px}
.alt{margin-top:26px;background:var(--amber-soft);border-radius:18px;padding:16px 18px}
.alt h3{font-size:14px;margin-bottom:6px}
.alt ul{list-style:none;font-size:12.5px;line-height:1.9}

/* ---- 都道府県リスト ---- */
.pref-list{margin-top:16px;background:var(--card);border-radius:20px;border:1px solid #EFE6D0;box-shadow:var(--shadow);padding:2px 16px}
.pref-list details{border-bottom:1px solid var(--line)}
.pref-list details:last-child{border-bottom:0}
.pref-list summary{padding:13px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.pref-list summary::-webkit-details-marker{display:none}
.pref-name{flex:1;font-weight:700;font-size:14px}
.pref-count{font-weight:500;color:var(--muted);font-size:11.5px}
.chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s;margin:0 4px 3px 4px;flex:none}
.pref-list details[open] .chev{transform:rotate(-135deg)}
.pref-list .slist{margin:0 0 8px;background:none;border:0;box-shadow:none;padding:0}
.search-count{font-size:11.5px;color:var(--muted);margin-top:10px}
[hidden]{display:none!important}

/* ---- フッター ---- */
footer{max-width:620px;margin:0 auto;padding:24px 20px calc(28px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);line-height:1.9}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

@media (max-width:380px){
  .menu h3{font-size:17px}
  .menu-price b{font-size:23px}
  .catch{font-size:26px}
  .tprice .num{font-size:60px}
  .hero-price .num{font-size:54px}
  .price b{font-size:26px}
}

/* 折り返し制御：店舗数などの複合語を割らない */
.n{white-space:nowrap}

/* ---- 下部固定バー（献立ページ） ---- */
.stickbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,253,247,.97);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(43,50,39,.1);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stickbar-in{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:9px 20px calc(9px + env(safe-area-inset-bottom))}
.sb-sum{flex:none;line-height:1.15}
.sb-sum small{display:block;font-size:10px;color:var(--muted)}
.sb-sum b{font-family:var(--head);font-size:20px;color:var(--green);white-space:nowrap}
.sb-btn{flex:1;min-height:44px;border:0;border-radius:999px;background:var(--green);color:#FFF6E2;font-family:inherit;
  font-weight:700;font-size:13.5px;padding:10px 14px;display:flex;align-items:center;justify-content:center;
  gap:8px;cursor:pointer;line-height:1.3}
.sb-btn small{font-size:10.5px;font-weight:500;opacity:.8}
body.has-stickbar #app{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
body.has-stickbar footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

@media print{.stickbar{display:none}body.has-stickbar #app{padding-bottom:56px}}