/* 視覺規範見 DESIGN.md；定稿參考 site/demo.html */
@font-face{font-family:"jf-openhuninn";src:url("../fonts/jf-openhuninn-subset.woff2") format("woff2");font-display:swap}
:root{
  --paper:#fcf4e7;
  --card:rgba(255,255,255,.82);
  --blush:#fce5e8; --mint:#bedac9; --aqua:#bce1df; --butter:#f9ecc8;
  --blush-deep:#e9b9c0; --mint-deep:#7fae93; --aqua-deep:#7db9b6;
  --ink:#5b4a42; --ink-soft:#8a786d; --line:#cdb9a8;
  --font-ui:"jf-openhuninn","jf open 粉圓","Yuanti TC","YuanTi TC","Arial Rounded MT Bold","Microsoft JhengHei",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --r-card:1.1rem 1.5rem 1.2rem 1.4rem / 1.4rem 1.1rem 1.5rem 1.2rem;
  --shadow:0 2px 10px rgba(91,74,66,.08);
  --t:180ms;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--font-body);padding-bottom:3rem}
/* 紙張顆粒 */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{padding:.75rem 1.25rem .25rem;max-width:640px;margin:0 auto}
.ui{font-family:var(--font-ui);font-weight:400}
.kicker{margin:0;font-size:1.75rem;line-height:1.3}
.mark{background:linear-gradient(transparent 58%,var(--blush) 58%);padding:0 .25rem;margin-left:-.25rem}
header .date{margin:.1rem 0 .6rem;color:var(--ink-soft)}
h1{margin:0;font-size:1.3125rem;line-height:1.5;font-weight:700}
main{max-width:640px;margin:0 auto;padding:0 1.25rem}

/* 導覽：頂端右上角三個藥丸 */
.top{position:sticky;top:0;z-index:5;background:rgba(252,244,231,.92);backdrop-filter:blur(6px)}
.top nav{max-width:640px;margin:0 auto;display:flex;justify-content:flex-end;gap:.25rem;padding:.6rem 1rem}
nav a{display:inline-flex;align-items:center;min-height:44px;border:1.5px solid transparent;padding:0 .9rem;border-radius:999px;font-family:var(--font-ui);color:var(--ink-soft);text-decoration:none}
nav a[aria-current="page"]{background:var(--blush);border-color:var(--blush-deep);color:var(--ink)}

/* 卡片：手繪抖線邊框 */
.card{position:relative;background:var(--card);border-radius:var(--r-card);padding:1.5rem 1.25rem 1.1rem;margin:1.75rem 0;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;inset:0;border:1.5px solid var(--line);border-radius:inherit;filter:url(#wobble);pointer-events:none}
.card h2{margin:.35rem 0 .1rem;font-size:1.25rem;line-height:1.5;font-weight:700;padding-right:4rem}
.meta{color:var(--ink-soft)}
/* 紙膠帶標籤 */
.badge{display:inline-block;font-family:var(--font-ui);font-size:1rem;line-height:1.6;padding:.1rem 1.1rem;color:var(--ink);
  transform:rotate(-2deg);box-shadow:0 1px 2px rgba(91,74,66,.12);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.b-main{background-color:rgba(233,185,192,.78)}
.b-side{background-color:rgba(190,218,201,.88);transform:rotate(1.5deg)}
.card.main>.badge,.card.side>.badge{position:absolute;top:-.85rem;left:1rem}
.card.main>.meta,.card.side>.meta{display:block;margin-top:.1rem}
.tag{font-size:1rem;background:var(--aqua);border-radius:.5rem .7rem .5rem .6rem;padding:0 .5rem;margin-left:.4rem;color:var(--ink);white-space:nowrap;font-weight:400}
.icon{position:absolute;top:.6rem;right:1rem;width:4rem;height:4rem;transform:rotate(6deg)}
.card.side .icon{transform:rotate(-5deg)}
details{margin-top:.5rem}
summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-ui);padding:0 .9rem;border-radius:999px;background:transparent;border:1.5px dashed var(--line);list-style:none;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary:focus-visible,nav a:focus-visible,.seg button:focus-visible{outline:2px solid var(--aqua-deep);outline-offset:2px}
details[open]>summary{background:var(--aqua);border-style:solid;border-color:var(--aqua-deep)}
ul,ol{padding-left:1.4rem;margin:.75rem 0 .25rem}
li{margin:.25rem 0}
li::marker{color:var(--mint-deep)}
.stitch{border:0;border-top:2px dashed var(--line);margin:.9rem 0}
.prep{background:rgba(190,218,201,.4)}
.prep::after{content:"";position:absolute;inset:6px;border:1.5px dashed var(--mint-deep);border-radius:inherit;pointer-events:none;opacity:.7}
.prep h2{margin:0 0 .2rem;padding-right:0}
.tonight{background:rgba(252,229,232,.7)}
.tonight::after{border-color:var(--blush-deep)}

/* 按鈕：輕微下壓 */
nav a,.seg button,summary{transition:transform var(--t) ease,background-color var(--t) ease;-webkit-tap-highlight-color:transparent}
nav a:active,.seg button:active,summary:active{transform:scale(.96) translateY(1px)}
.seg{display:flex;gap:.6rem;margin:1.25rem 0}
.seg button{flex:1;min-height:44px;padding:.5rem;border:1.5px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;font:inherit;font-family:var(--font-ui);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--aqua);border-color:var(--aqua-deep)}

.btn{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:1rem;border:1.5px solid var(--aqua-deep);background:var(--aqua);border-radius:999px;font-family:var(--font-ui);color:var(--ink);text-decoration:none;transition:transform var(--t) ease}
.btn:active{transform:scale(.96) translateY(1px)}
.btn:focus-visible{outline:2px solid var(--aqua-deep);outline-offset:2px}

/* 採買 */
.cat{display:inline-block;margin:1.5rem 0 .15rem;font-size:1.0625rem}
label.item{position:relative;display:flex;gap:.9rem;align-items:flex-start;padding:.7rem 0;border-bottom:2px dashed rgba(205,185,168,.7);cursor:pointer}
label.item input{position:absolute;opacity:0;width:1.75rem;height:1.75rem;margin:0}
.box{flex:none;width:1.75rem;height:1.75rem;margin-top:.1rem;border:1.5px solid var(--line);border-radius:.55rem .7rem .5rem .65rem;background:#fff;display:grid;place-items:center;transition:background-color var(--t) ease,border-color var(--t) ease}
.box svg{width:1.1rem;height:1.1rem;opacity:0;transition:opacity var(--t) ease}
input:checked+.box{background:var(--mint);border-color:var(--mint-deep)}
input:checked+.box svg{opacity:1}
input:focus-visible+.box{outline:2px solid var(--aqua-deep);outline-offset:2px}
label.item.done .n{text-decoration:line-through;color:var(--ink-soft)}
.from{display:block;color:var(--ink-soft)}
.note{color:var(--ink-soft);margin:2rem 0}
.note-i{color:var(--ink-soft)}

/* 食譜細節 */
.grp{margin:.9rem 0 0;font-size:1rem;color:var(--ink)}
.grp::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--blush-deep);margin-right:.45rem}
.steps li{margin:.7rem 0}
.heat,.tm{display:inline-block;font-size:1rem;line-height:1.5;border-radius:999px;padding:0 .6rem;margin-left:.4rem;color:var(--ink)}
.h-大火{background:var(--blush)}.h-中火{background:var(--butter)}.h-小火{background:var(--aqua)}
.tm{border:1.5px dashed var(--line)}
.cue{display:block;color:var(--ink-soft)}
.tips{margin-top:1rem;padding:.8rem 1rem;border:1.5px dashed var(--line);border-radius:1rem}
.tips ul{margin:.3rem 0 0}
details.how{margin:.1rem 0 0}
details.how summary{min-height:44px;padding:0 .7rem;font-size:1rem}
details.how p{margin:.4rem 0 0;color:var(--ink-soft)}
.day{display:flex;justify-content:space-between;align-items:center}
.dish{display:flex;align-items:baseline;gap:.5rem;margin:.2rem 0}
.state{color:var(--ink-soft);text-align:center;margin:3rem 0}
.recipe-h{margin:1.2rem 0 0;font-size:1.0625rem;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  nav a:active,.seg button:active,summary:active,.btn:active{transform:none}
}