.planner{margin:2.5rem 0;padding:clamp(1.2rem,4vw,2.4rem);border:1px solid #d7c9ae;border-radius:1.3rem;background:linear-gradient(145deg,#fbf8f0,#f3ecdd);box-shadow:0 20px 60px rgba(56,69,56,.08)}
.planner h3{margin:.2rem 0 .6rem;font-family:"Noto Serif TC",serif;font-size:clamp(1.55rem,4.2vw,2.25rem);line-height:1.35}.planner-intro{margin-top:0;color:#536057}.planner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.planner label,.planner fieldset{display:grid;gap:.45rem;margin:0;padding:0;border:0;font-weight:700;color:#33463f}.planner select{width:100%;min-height:3rem;padding:.7rem .85rem;border:1px solid #aeb7a9;border-radius:.7rem;background:#fffdf7;font:inherit;color:#263932}.planner-checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.75rem 1.2rem}.planner-checks label{display:flex;align-items:center;gap:.55rem;font-weight:600}.planner-checks input{width:1.2rem;height:1.2rem;accent-color:#365d52}.planner button{margin-top:1.2rem;min-height:3.3rem;padding:.8rem 1.3rem;border:0;border-radius:999px;background:#31594f;color:#fff;font:700 1rem/1 "Noto Sans TC",sans-serif;cursor:pointer}.planner button:hover{background:#24483f}.planner-result{margin-top:1.4rem;padding:1.2rem;border-radius:1rem;background:#fffdf8;border-left:5px solid #c26c4f}.planner-result[hidden]{display:none}.bag-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:1rem 0}.bag-count{padding:.9rem .6rem;text-align:center;border-radius:.8rem;background:#edf1e9}.bag-count strong{display:block;font:700 clamp(1.45rem,5vw,2rem)/1.1 "Noto Serif TC",serif;color:#31594f}.bag-count span{font-size:.86rem;color:#5d685f}.result-reason{margin:.75rem 0 0;padding-left:1.2rem}.result-reason li{margin:.35rem 0}.estimator-note{font-size:.9rem;color:#687167}.quick-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.quick-examples article{padding:1.1rem;border:1px solid #ddd4c2;border-radius:1rem;background:#fff}.quick-examples h3{font-size:1rem;margin:0 0 .55rem;color:#a65840}.quick-examples p{margin:0;font-size:.95rem}.size-map{margin:2rem 0;padding:1.2rem;border-radius:1.2rem;background:#233d39;color:#fff;overflow:hidden}.size-map svg{display:block;width:100%;height:auto}.size-map text{font-family:"Noto Sans TC",sans-serif}.media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.8rem 0}.media-pair figure{margin:0}.media-pair img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1rem}.media-pair figcaption{padding:.65rem .2rem 0;color:#626b63;font-size:.92rem}.official-chart{margin:2rem 0}.official-chart img{width:100%;border-radius:1rem}.step-list{counter-reset:steps;display:grid;gap:.8rem;margin:1.3rem 0;padding:0;list-style:none}.step-list li{counter-increment:steps;padding:1rem 1rem 1rem 4rem;position:relative;border:1px solid #ded5c5;border-radius:.9rem;background:#fff}.step-list li:before{content:counter(steps);position:absolute;left:1rem;top:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:#c26c4f;color:#fff;font-weight:700}.video-link-card{margin:1.5rem 0;padding:1.2rem;border-radius:1rem;background:#eef2ec}.video-link-card a{font-weight:700}.formula-note{margin:1.2rem 0;padding:1rem 1.1rem;border-left:4px solid #c9a65b;background:#fbf5e7}
@media(max-width:680px){.planner-grid{grid-template-columns:1fr}.planner-checks{grid-column:auto}.bag-counts{grid-template-columns:1fr}.quick-examples{grid-template-columns:1fr}.media-pair{grid-template-columns:1fr}.planner{border-radius:1rem}.size-map{width:calc(100% + .7rem);max-width:calc(100% + .7rem);box-sizing:border-box;contain:inline-size;margin-left:-.35rem;margin-right:-.35rem;padding:.65rem;overflow-x:auto}.size-map svg{min-width:640px}.size-map:after{content:"左右滑動看完整尺寸";display:block;text-align:center;font-size:.8rem;color:#d6dfd9;padding-top:.5rem}}
@media(prefers-reduced-motion:reduce){.planner button{scroll-behavior:auto}}
.planner-result:focus{outline:none}
.table-wrap{margin:2rem 0;max-width:100%}
.guide-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.8;text-align:left}
.guide-table caption{text-align:left;font-size:17px;font-weight:700;padding:0 0 18px}
.guide-table th,.guide-table td{padding:16px 12px;border-bottom:1px solid #ddd4c2;vertical-align:top;overflow-wrap:break-word}
.guide-table thead th{background:#eee9dc;font-size:13px;color:#405349}
.guide-table th:first-child{width:102px}.guide-table th:nth-child(2){width:80px}
.guide-table th:last-child{width:27%}
.size-name,.size-dimensions{display:block;white-space:nowrap}
.size-name{font-size:19px;color:#31594f}.size-dimensions{font-size:13px;font-weight:400}
.pack-count{white-space:nowrap}
.packing-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.packing-sequence figure{min-width:0;margin:0}
.packing-sequence img{display:block;width:100%;height:auto;border-radius:14px}
.packing-sequence .step-heading{display:flex;align-items:center;gap:9px;margin-bottom:12px;min-height:50px}
.step-heading>span{color:#b5674b;font:600 19px/1 var(--serif)}
.packing-sequence h3{margin:0;font-size:16px;line-height:1.6}
.packing-sequence figcaption{padding:12px 2px 0;font-size:14px;line-height:1.8}
@media(min-width:1050px){.packing-sequence{width:900px;margin-left:-118px}}
@media(max-width:600px){.packing-sequence{grid-template-columns:1fr;gap:26px}.packing-sequence .step-heading{min-height:0}.packing-sequence h3{font-size:18px}}
.guide-table caption small{display:block;font-size:12px;font-weight:400;color:#706c61;margin-top:4px}
@media(max-width:600px){
  .guide-table,.guide-table tbody{display:block}
  .guide-table caption{display:block}
  .guide-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .guide-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;margin:0 0 16px;padding:18px;background:#fffdf7;border:1px solid #ddd4c2;border-radius:12px}
  .guide-table th,.guide-table td{display:block;width:auto!important;padding:0;border:0}
  .guide-table th[scope="row"]{align-self:center}
  .guide-table .pack-count{align-self:center;color:#526157;text-align:right}
  .guide-table td[data-label]:before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:#7b7264;margin-bottom:3px}
  .guide-table td:not(.pack-count){grid-column:1/-1}
  .guide-table .size-name{font-size:22px}
}

/* The editorial cover is a complete comparison board. Keep all three signals
   (before, after, and the real product pack) visible instead of cropping it on
   narrow screens. */
.hero .cover img{display:block;width:100%;max-width:100%;height:auto;max-height:none;object-fit:contain}
@media(max-width:700px){
  .hero .cover{width:100vw;max-width:100vw;overflow:hidden}
  .hero .cover img{width:100vw;min-width:0;max-width:100vw;height:auto;max-height:none}
}