@page { size: A4 portrait; margin: 8mm; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #6b6b6b;
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #2b241d;
}
.toolbar {
  position: sticky; top: 0; z-index: 9; display: flex; gap: 14px; align-items: center;
  background: #241d17; color: #f2e7d6; padding: 8px 16px; font-size: 14px;
}
.toolbar a { color: #e8c884; text-decoration: none; }
.toolbar span { flex: 1; opacity: .8; }
.toolbar button { background: #b8892f; color: #fff; border: 0; padding: 6px 14px; border-radius: 4px; cursor: pointer; }
.product-rail{position:sticky;top:38px;z-index:8;display:flex;gap:5px;padding:7px 16px;background:#e8eee3;border-bottom:1px solid #cbd6c2}.product-rail a{font-size:12px;color:#40533b;text-decoration:none;padding:4px 8px;border-radius:4px}.product-rail a.active,.product-rail a:hover{background:#40533b;color:#fff}

.sheet {
  width: 210mm; min-height: 297mm; margin: 16px auto; padding: 9mm 9mm 6mm;
  background: #f7f1e6; box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.draftbar {
  background: #7c1f1f; color: #ffe9c9; font-size: 10.5px; line-height: 1.5;
  padding: 5px 10px; border-radius: 3px; margin-bottom: 7px;
}

.hd { display: flex; justify-content: space-between; align-items: flex-start; }
.tag {
  background: #241d17; color: #f2e7d6; font-size: 15px; letter-spacing: 2px;
  padding: 5px 20px; border-radius: 3px; font-weight: 700;
}
.hdr { font-size: 11px; text-align: right; line-height: 1.7; border-bottom: 1.5px solid #241d17; padding-bottom: 2px; }

.title { margin: 8px 0 10px; }
.title h1 { font-size: 40px; margin: 0; letter-spacing: 3px; line-height: 1.1; }
.title h1 em {
  font-size: 12px; font-style: normal; vertical-align: super; margin-left: 8px;
  background: #a3262a; color: #fff; border-radius: 50%; padding: 6px 5px; letter-spacing: 0;
}
.title .en { font-size: 15px; letter-spacing: 1.5px; color: #5c5147; margin-top: 2px; }
.title .slogan { font-size: 13px; color: #a3262a; font-weight: 700; margin-top: 5px; }

.main { display: grid; grid-template-columns: 92mm 1fr; gap: 6mm; }
.hero { background: #171310; border-radius: 4px; overflow: hidden; aspect-ratio: 1/1; }
.hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
.heroline { font-size: 13px; font-weight: 700; color: #3a3129; margin-top: 5px; letter-spacing: 1px; }
.ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg,#e4dac8,#e4dac8 8px,#dbd0bc 8px,#dbd0bc 16px);
  color: #8c7f6b; font-size: 12px; letter-spacing: 1px; border-radius: 4px;
}
.ph.big { font-size: 15px; }

.col-r section { margin-bottom: 8px; }
h2 {
  font-size: 15px; margin: 0 0 6px; padding-bottom: 4px; letter-spacing: 1px;
  border-bottom: 1.5px solid #c9b48a;
}
.intro { font-size: 12.5px; line-height: 1.85; margin: 0; }
.blank { color: #9c8f7c; font-style: italic; }
.warn { display: block; color: #a3262a; font-size: 11px; margin-top: 4px; }

.feats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid #d9c9a8; border-radius: 4px; margin-bottom: 8px; }
.feat { padding: 7px 4px; text-align: center; border-right: 1px solid #e2d5ba; }
.feat:last-child { border-right: 0; }
.feat span { display: block; font-size: 12px; font-weight: 700; }
.feat i { font-style: normal; font-size: 10.5px; color: #6b6055; }

.specbox { border: 1px solid #d9c9a8; border-radius: 4px; padding: 8px 10px; }
.specbox h2 { border-bottom: 1px solid #c9b48a; }
table.spec { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.spec th { text-align: left; width: 27%; font-weight: 500; color: #5c5147; padding: 3.5px 0; }
table.spec td { padding: 3.5px 0 3.5px 10px; border-left: 1px solid #ddd0b6; }

.lower { display: grid; grid-template-columns: 1fr 62mm; gap: 6mm; margin-top: 10px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.step { border: 1px solid #d9c9a8; border-radius: 4px; padding: 6px; background: #fbf7ef; }
.stephd { font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.stephd b {
  display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
  background: #241d17; color: #f2e7d6; border-radius: 50%; font-size: 10px; margin-right: 5px;
}
.stepimg { margin-bottom: 5px; overflow: hidden; border-radius: 3px; background: #eee5d6; }
.stepimg img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: 3px; }
.stepimg .ph { min-height: 28mm; }
.step p { font-size: 10.5px; line-height: 1.6; margin: 0; color: #4a4139; }
.flownote { font-size: 10.5px; color: #a3262a; margin-top: 5px; }

.box { border: 1px solid #d9c9a8; border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; }
.box h3 { font-size: 13px; margin: 0 0 5px; letter-spacing: 1px; }
.box ul { margin: 0; padding-left: 15px; }
.box li { font-size: 10.5px; line-height: 1.75; }

.chef { display: grid; grid-template-columns: 1fr 62mm; gap: 6mm; margin-top: 10px; align-items: center; }
.chefl { border: 1px solid #d9c9a8; border-radius: 4px; padding: 8px 10px; background: #fbf7ef; }
.chefl h3 { font-size: 13px; margin: 0 0 5px; }
.chefl ul { margin: 0; padding-left: 15px; }
.chefl li { font-size: 10.5px; line-height: 1.8; }
.bigslogan { font-size: 21px; font-weight: 700; letter-spacing: 2px; text-align: center; }
.subslogan { font-size: 11px; color: #6b6055; text-align: center; margin-top: 4px; }

.ft {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center;
  margin-top: 10px; border-top: 2px solid #241d17; padding-top: 7px; font-size: 10px;
}
.ftl b { font-size: 14px; }
.ftl span { color: #6b6055; }
.ftc { text-align: center; color: #5c5147; letter-spacing: 1px; }
.ftr { text-align: right; line-height: 1.9; }
.cfm { font-weight: 700; margin-bottom: 2px; }

/* ---- index ---- */
body.idx { background: #f4efe6; }
.idxwrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.idxwrap h1 { font-size: 26px; letter-spacing: 2px; margin: 8px 0 14px; }
.stat { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.stat div { background: #fff; border: 1px solid #e0d5c1; border-radius: 6px; padding: 10px 12px; font-size: 12px; color: #6b6055; }
.stat b { display: block; font-size: 24px; color: #241d17; }
.hint { background: #fff5e6; border-left: 3px solid #b8892f; padding: 8px 12px; font-size: 12.5px; line-height: 1.7; }
.idxwrap h2 { margin-top: 22px; font-size: 17px; border-bottom: 2px solid #c9b48a; }
.idxwrap h2 small { font-weight: 400; font-size: 12px; color: #8c7f6b; }
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(215px,1fr)); gap: 7px; margin-top: 10px; }
.card {
  display: block; background: #fff; border: 1px solid #e0d5c1; border-radius: 5px;
  padding: 9px 11px; text-decoration: none; color: #241d17; font-size: 13.5px;
}
.card:hover { border-color: #b8892f; }
.card.nophoto { background: #faf6ee; }
.card .c { display: block; font-size: 10px; color: #a09280; letter-spacing: 1px; }
.card i { font-style: normal; font-size: 10px; color: #a3262a; margin-left: 6px; }

@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .sheet { width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none; background: #fff; }
  .draftbar,.main,.lower,.chef,.ft,.step,.box { break-inside: avoid; page-break-inside: avoid; }
}

@media screen and (max-width:900px) {
  body { background: #f4efe6; }
  .toolbar { position: fixed; left: 0; right: 0; overflow-x: auto; gap: 8px; padding: 8px 10px; }
  .toolbar span { min-width: 110px; }
  .product-rail{top:40px;overflow:auto;white-space:nowrap}.sheet { width: calc(100% - 20px); min-height: 0; margin: 102px auto 14px; padding: 16px; }
  .title h1 { font-size: 30px; letter-spacing: 0; overflow-wrap: anywhere; }
  .title h1 em { display: inline-block; }
  .main,.lower,.chef { grid-template-columns: 1fr; gap: 14px; }
  .hero { aspect-ratio: 4/3; }
  .steps { grid-template-columns: 1fr; gap: 9px; }
  .ft { grid-template-columns: 1fr; text-align: left; }
  .ftc,.ftr { text-align: left; }
  .idxwrap { padding: 18px 12px 40px; }
  .stat { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid { grid-template-columns: 1fr; }
}

.trimlink { display:block; background:#241d17; color:#f2e7d6; text-decoration:none; padding:14px 18px; border-radius:7px; font-size:16px; font-weight:700; letter-spacing:1px; margin:14px 0; }
.trimlink span { font-weight:400; font-size:12.5px; color:#c9b48a; letter-spacing:0; }
.trimlink:hover { background:#3a2e24; }
.trimlink.alt { background:#5c4a33; }
.trimlink.alt:hover { background:#75603f; }
.approx{margin-top:6px;padding:6px 9px;border:1px solid #d08b00;background:#fff7e6;
  color:#8a5a00;font-size:11px;line-height:1.5;border-radius:4px}
.card i.ap{color:#b06f00;background:#fff3d6;border-color:#e0b860}
.card i.step{color:#2f7a3d;background:#e9f5ea;border-color:#a8d4ae}

/* ---- 角色拆分・保存效期・節點・不合格案例（2026-09-20） ---- */
body[data-role="kitchen"] .r-s{display:none!important}
body[data-role="service"] .r-k{display:none!important}
.roletabs{display:inline-flex;gap:6px;margin-right:auto}
.roletabs .rt{background:transparent;border:1px solid #8a6b28;color:#e8c884;padding:5px 12px;border-radius:4px;cursor:pointer}
.roletabs .rt.on{background:#b8892f;color:#fff;border-color:#b8892f}
.sect{margin:10px 0}
.sect h2{font-size:14px;margin:0 0 6px;padding-left:8px;border-left:4px solid #b8892f}
.sect h2 small{font-size:10px;font-weight:400;color:#a3262a;margin-left:8px}
table.kv,table.nodes{width:100%;border-collapse:collapse;font-size:11.5px}
table.kv th,table.kv td,table.nodes th,table.nodes td{border:1px solid #d9cfba;padding:4px 7px;text-align:left;vertical-align:top}
table.kv th,table.nodes th{background:#f6efe0;font-weight:700}
table.kv th{width:130px}
table.nodes td.n{text-align:center;font-weight:700;color:#b8892f}
table.nodes td.nm{font-weight:700;white-space:nowrap}
.blank{color:#a3262a}
.dpair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.dslot{border:1.5px dashed #c9bd9f;border-radius:6px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:#8a7d63;text-align:center}
.dslot img{max-width:100%;max-height:150px}
.heronote{font-size:10.5px;color:#a3262a;margin-top:4px}
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.svc .bigslogan{margin-top:10px;text-align:center}
@media print{.sect,.dpair,table.kv,table.nodes tr{break-inside:avoid;page-break-inside:avoid}}