/* ==========================================================================
   东明特色小吃食谱 · 共享样式
   响应式：手机 / 平板 / 桌面自适应；卡片页 + 首页两套结构
   ========================================================================== */

:root{
  --ink:#2b2118; --ink-soft:#6b5d4f;
  --paper:#fffdf8; --paper-2:#fbf3e6;
  --line:#e8dcc8; --line-2:#f0e7d5;
  --chili:#c0392b; --chili-soft:#f7e0da;
  --scallion:#4e8a4a; --scallion-soft:#e5f0e3;
  --amber:#b6792a; --amber-soft:#f6ead6;
  --blue:#2f6d8e; --blue-soft:#e2eef4;
  --purple:#6a4b8f; --purple-soft:#ece4f5;
  --shadow:0 10px 30px rgba(70,50,20,.12);
  --radius:18px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:radial-gradient(1200px 600px at 50% -200px,#fbf1dc 0,transparent 60%),
             linear-gradient(180deg,#f7efe1 0%,#f2e7d5 100%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  padding:28px 16px 60px;
}
img,svg{max-width:100%;}
a{color:inherit;}

/* ============================ 卡片页 ============================ */
.sheet{max-width:920px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}

header.hero{position:relative;padding:26px 30px 22px;
  background:radial-gradient(600px 200px at 100% 0%,#fbecd2 0,transparent 70%),
             linear-gradient(160deg,#fff9ee 0%,#fdf1dd 100%);
  border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.2em;color:var(--amber);font-weight:700;
  background:var(--amber-soft);border:1px solid #efdec2;padding:3px 12px;border-radius:999px;}
h1{margin:12px 0 6px;font-size:clamp(26px,5.2vw,37px);line-height:1.12;letter-spacing:.03em;font-weight:800;}
h1 .dot{color:var(--chili);}
.subtitle{margin:0;color:var(--ink-soft);font-size:clamp(13px,3.4vw,14.5px);}
.subtitle b{color:var(--ink);}
.bowl{width:126px;height:126px;flex:none;}

.facts{display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper-2);border-bottom:1px solid var(--line);}
.fact{padding:13px 14px;border-right:1px solid var(--line);}
.fact:last-child{border-right:0;}
.fact .k{font-size:10.5px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;}
.fact .v{font-size:14.5px;font-weight:700;margin-top:3px;}
.fact .v small{font-weight:500;color:var(--ink-soft);font-size:11.5px;}

main{padding:24px 30px 30px;}
section{margin-bottom:26px;}
.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.sec-head .bar{width:6px;height:22px;border-radius:3px;background:var(--chili);flex:none;}
.sec-head h2{margin:0;font-size:clamp(17px,4.2vw,20px);letter-spacing:.03em;}
.sec-head .en{margin-left:auto;font-size:11px;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;}

.block{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px;background:#fffefb;}
.block .bh{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--paper-2);border-bottom:1px solid var(--line);}
.block .bh .tag{width:26px;height:26px;flex:none;border-radius:7px;background:var(--chili);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
.block .bh h3{margin:0;font-size:15.5px;letter-spacing:.02em;}
.block .bh .scale{margin-left:auto;font-size:12px;color:var(--ink-soft);}
.block .bb{padding:14px 16px 16px;}

.ing-h{font-size:12.5px;font-weight:700;color:var(--amber);letter-spacing:.06em;margin:0 0 6px;text-transform:uppercase;}
ul.ing{list-style:none;margin:0 0 14px;padding:0;}
ul.ing:last-child{margin-bottom:0;}
ul.ing li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 2px;border-bottom:1px dashed var(--line);font-size:14px;}
ul.ing li:last-child{border-bottom:0;}
ul.ing .name{font-weight:600;}
ul.ing .name .hint{font-weight:400;color:var(--ink-soft);font-size:12.5px;}
ul.ing .qty{color:var(--chili);font-weight:700;font-size:13.5px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px 0 6px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:7px 9px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;}
thead th{background:var(--paper-2);font-size:12px;color:var(--ink-soft);letter-spacing:.04em;border-bottom:1px solid var(--line);white-space:nowrap;}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;}
tbody tr:last-child td{border-bottom:0;}

.ratio{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;}
.ratio .chip{font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:8px;background:var(--blue-soft);color:var(--blue);border:1px solid #cfe2ec;font-variant-numeric:tabular-nums;}
.ratio .chip b{color:#1f4f6b;}

.eq{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;vertical-align:middle;}
.eq.pc{background:var(--blue-soft);color:var(--blue);border:1px solid #cfe2ec;}
.eq.af{background:var(--purple-soft);color:var(--purple);border:1px solid #ddd0ec;}
.eq.mw{background:var(--scallion-soft);color:var(--scallion);border:1px solid #cfe2cc;}
.eq.ov{background:var(--amber-soft);color:var(--amber);border:1px solid #eeddc0;}
.eq.pan{background:var(--chili-soft);color:var(--chili);border:1px solid #eec7bf;}

.timeline{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.timeline .tp{font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft);}
.timeline .tp b{color:var(--chili);}

.step{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;background:#fffefb;}
.step .sh{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(180deg,#fff6e8,#fdf0dd);border-bottom:1px solid var(--line);}
.step .sh .n{width:34px;height:34px;flex:none;border-radius:10px;background:var(--chili);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(192,57,43,.28);}
.step .sh h3{margin:0;font-size:clamp(15px,4vw,17px);letter-spacing:.02em;}
.step .sh .tt{margin-left:auto;font-size:12.5px;color:var(--amber);font-weight:700;white-space:nowrap;}
.step .sb{padding:12px 16px 14px;}
.r{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-2);align-items:start;}
.r:last-child{border-bottom:0;}
.r .lab{font-size:12px;font-weight:800;color:#fff;background:var(--ink-soft);border-radius:6px;padding:2px 0;text-align:center;letter-spacing:.06em;}
.r.goal .lab{background:var(--blue);}
.r.tool .lab{background:var(--purple);}
.r.amt .lab{background:var(--amber);}
.r.do .lab{background:var(--scallion);}
.r.done .lab{background:var(--chili);}
.r p{margin:2px 0 0;font-size:13.5px;color:var(--ink-soft);}
.r p b{color:var(--ink);}
.r ol{margin:2px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-soft);}
.r ol li{margin:4px 0;}
.r ol li b{color:var(--ink);}
.r .grams{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.r .g{font-size:12.5px;font-weight:700;background:var(--amber-soft);border:1px solid #eeddc0;color:#7a5312;border-radius:7px;padding:3px 8px;font-variant-numeric:tabular-nums;}

.callout{display:flex;gap:12px;padding:13px 15px;border-radius:12px;background:var(--scallion-soft);border:1px solid #cfe2cc;}
.callout .ic{width:22px;height:22px;flex:none;margin-top:1px;color:var(--scallion);}
.callout h4{margin:0 0 6px;font-size:14px;color:#2f5f2c;letter-spacing:.04em;}
.callout ul{margin:0;padding-left:18px;font-size:13px;color:#3f5f3c;}
.callout li{margin:3px 0;}
.callout li b{color:#244a21;}
.callout.chili{background:var(--chili-soft);border-color:#eec7bf;}
.callout.chili h4{color:#8e291d;} .callout.chili ul{color:#7a3a30;} .callout.chili .ic{color:var(--chili);}
.callout.blue{background:var(--blue-soft);border-color:#cfe2ec;}
.callout.blue h4{color:#25546f;} .callout.blue ul{color:#2f5a72;} .callout.blue .ic{color:var(--blue);}
.callout.amber{background:var(--amber-soft);border-color:#eeddc0;}
.callout.amber h4{color:#7a5312;} .callout.amber ul{color:#7a5312;} .callout.amber .ic{color:var(--amber);}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.tag{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--amber-soft);border:1px solid #eeddc0;color:#8a5a1c;font-weight:600;}

footer.note{padding:16px 30px 22px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink-soft);background:#fffdf9;}
footer.note b{color:var(--ink);}

/* 顶部返回导航 */
.crumb{max-width:920px;margin:0 auto 12px;font-size:13px;}
.crumb a{color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);}
.crumb a:hover{color:var(--chili);border-color:#e2cfa4;}

/* ============================ 首页 ============================ */
.landing .wrap{max-width:1000px;margin:0 auto;}
.landing header.top{text-align:center;margin-bottom:30px;}
.landing h1{font-size:clamp(28px,6vw,40px);}
.landing .sub{color:var(--ink-soft);font-size:clamp(13px,3.4vw,14.5px);letter-spacing:.1em;}
.landing h2.sec{font-size:15px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin:32px 0 14px;}
.landing h2.sec::before{content:"";width:6px;height:18px;border-radius:3px;background:var(--chili);flex:none;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px;}
a.card{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,border-color .12s;min-height:76px;}
a.card:hover{transform:translateY(-2px);border-color:#e2cfa4;box-shadow:0 14px 34px rgba(70,50,20,.16);}
a.card:active{transform:translateY(0);}
.card .ic{width:48px;height:48px;flex:none;}
.card .txt{flex:1;min-width:0;}
.card h3{margin:0 0 3px;font-size:clamp(15px,4vw,17.5px);letter-spacing:.02em;}
.card p{margin:0;font-size:12.5px;color:var(--ink-soft);}
.card .badge{margin-left:auto;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:var(--blue-soft);color:var(--blue);border:1px solid #cfe2ec;}
.landing footer{margin-top:36px;text-align:center;font-size:12px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:20px;}
.landing footer b{color:var(--ink);}

/* ============================ 响应式 ============================ */
@media (max-width:820px){
  .cols-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  body{padding:12px 10px 44px;}
  .sheet{border-radius:14px;}
  header.hero{padding:18px 18px 16px;}
  .bowl{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  main{padding:18px 16px 22px;}
  .facts{grid-template-columns:repeat(2,1fr);}
  .fact{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
  .fact:nth-child(2n){border-right:0;}
  .facts .fact:nth-last-child(-n+1){border-bottom:0;}
  .cols,.cols-3{grid-template-columns:1fr;gap:14px;}
  .r{grid-template-columns:1fr;gap:4px;}
  .r .lab{display:inline-block;padding:2px 10px;width:auto;justify-self:start;}
  .sec-head .en{display:none;}
  footer.note{padding:14px 16px 18px;}
  .card .badge{display:none;}
  a.card{padding:14px;}
}
@media (max-width:420px){
  .facts{grid-template-columns:1fr;}
  .fact{border-right:0;}
  .card .ic{width:42px;height:42px;}
}

/* 触屏优化 */
@media (hover:none){
  a.card:hover{transform:none;}
}
/* ============================ 采购清单（内嵌卡片） ============================ */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;}
.checklist .grp{margin-bottom:12px;break-inside:avoid;}
.checklist h4{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--amber);letter-spacing:.05em;display:flex;align-items:center;gap:8px;}
.checklist h4 .bar{width:4px;height:14px;border-radius:2px;background:var(--amber);flex:none;}
.checklist ul{list-style:none;margin:0;padding:0;}
.checklist li{display:flex;align-items:baseline;gap:8px;padding:5px 2px;border-bottom:1px dashed var(--line-2);font-size:13.5px;}
.checklist li:last-child{border-bottom:0;}
.checklist .box{width:14px;height:14px;flex:none;border:1.6px solid var(--ink-soft);border-radius:3px;position:relative;top:1px;}
.checklist .nm{font-weight:600;}
.checklist .nm .hint{font-weight:400;color:var(--ink-soft);font-size:12px;}
.checklist .qt{margin-left:auto;color:var(--chili);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px;}
@media (max-width:680px){ .checklist{grid-template-columns:1fr;} }

/* ============================ 分类导航 / 少儿辅食 ============================ */
.catnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 4px;}
.catnav a{font-size:13px;font-weight:700;padding:7px 15px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);text-decoration:none;color:var(--ink-soft);transition:color .12s,border-color .12s;}
.catnav a:hover{color:var(--chili);border-color:#e2cfa4;}
.catnav a.on{background:var(--chili);color:#fff;border-color:var(--chili);}

.plan thead th{white-space:nowrap;}
.plan td.meal{font-weight:700;color:var(--ink);white-space:nowrap;background:#fffaf0;}
.plan td{font-size:13.5px;}
.plan .sub-time{display:block;font-weight:400;color:var(--ink-soft);font-size:11.5px;}

.agebadge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:var(--scallion);border-radius:999px;padding:4px 14px;}
.hero .kidsmark{width:118px;height:118px;flex:none;}

.safety{border:1px solid #eec7bf;background:var(--chili-soft);border-radius:12px;padding:14px 16px;}
.safety h4{margin:0 0 6px;font-size:14px;color:#8e291d;display:flex;align-items:center;gap:8px;}
.safety h4 .ic{width:20px;height:20px;color:var(--chili);}
.safety ul{margin:0;padding-left:18px;font-size:13px;color:#7a3a30;}
.safety li{margin:4px 0;}
.safety li b{color:#8e291d;}

@media (max-width:680px){
  .catnav{gap:6px;}
  .catnav a{font-size:12px;padding:6px 11px;}
}