@charset "UTF-8";
/* INTO CAFÉ 인투카페 — 상품 상세 v2 (2026-10-09)
   흰 #FFFFFF · 검 #111111 · 포인트 빨강 #D7261E. 글꼴·색 토큰은 site.css(:root)를 그대로 씁니다.
   마크업은 scripts/build-product-details.py가 docs/product-details-v2.json에서 만듭니다(직접 고치지 말고 JSON을 고치세요). */
.ipd{--ipd-ink:var(--ink,#111);--ipd-red:var(--red,#D7261E);--ipd-line:var(--line,#E2E2DE);--ipd-muted:var(--muted,#666);--ipd-soft:var(--paper-2,#F4F4F2);
 max-width:1040px;margin:clamp(28px,4vw,64px) auto 0;color:var(--ipd-ink);font-family:var(--sans,"Pretendard Variable",Pretendard,sans-serif);word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.ipd *,.ipd *::before,.ipd *::after{box-sizing:border-box}
:where(.ipd) :where(h2,h3,h4,p,figure,ul,ol,dl,dd){margin:0}
:where(.ipd) :where(ul,ol){padding:0;list-style:none}
:where(.ipd) img{display:block;width:100%;height:auto}
:where(.ipd) a{color:inherit}

/* ── HERO ── */
.ipd-hero{display:grid;gap:clamp(22px,3vw,48px);border-top:3px solid var(--ipd-ink);padding-top:clamp(22px,3vw,40px)}
.ipd-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ipd-red);margin-bottom:14px;line-height:1.5}
.ipd-hero h2{font-size:clamp(32px,4.6vw,58px);line-height:1.13;font-weight:780;letter-spacing:-.045em;color:var(--ipd-ink)}
.ipd-lead{margin-top:20px;font-size:clamp(16px,1.45vw,18px);line-height:1.78;color:var(--ink-2,#3A3A3A);max-width:560px}
.ipd-badge{display:inline-block;margin-bottom:16px;padding:5px 11px;border:1.5px solid var(--ipd-red);color:var(--ipd-red);font-size:12.5px;font-weight:700;letter-spacing:.01em}
.ipd-media{border:1.5px solid var(--ipd-ink);background:#fff;overflow:hidden}
.ipd-hero .ipd-media{align-self:stretch}
.ipd-hero .ipd-media img{height:100%;max-height:620px;object-fit:cover}

/* 사진이 없는 상품: 타이포그래피 패널(실제 포장 사진이 아님을 숨기지 않도록 브랜드 그래픽으로만 사용) */
.ipd-art{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:280px;aspect-ratio:4/3;padding:clamp(20px,3vw,32px)}
.ipd-art.is-dark{background:var(--ipd-ink);color:#fff}
.ipd-art.is-light{background:#fff;color:var(--ipd-ink)}
.ipd-art-brand{position:absolute;top:clamp(16px,2.4vw,24px);left:clamp(20px,3vw,32px);font-family:var(--slab);font-weight:700;font-size:15px;letter-spacing:.02em}
.ipd-art-brand::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;background:var(--ipd-red);vertical-align:1px}
.ipd-art b{font-family:var(--slab);font-weight:700;font-size:clamp(56px,9vw,112px);line-height:.9;letter-spacing:-.02em}
.ipd-art small{font-family:var(--mono);font-size:12px;letter-spacing:.16em}
.ipd-art.is-dark small{color:var(--red-on-dark,#FF5A4A)}
.ipd-art.is-light small{color:var(--ipd-red)}

/* ── 섹션 공통 ── */
.ipd-sec{display:grid;gap:clamp(18px,2.4vw,32px);padding:clamp(44px,6vw,88px) 0;border-top:1px solid var(--ipd-line)}
.ipd-no{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ipd-red)}
.ipd-no b{font-family:var(--slab);font-size:16px;font-weight:700;letter-spacing:0;color:var(--ipd-ink)}
.ipd-sec h3{font-size:clamp(25px,3vw,40px);line-height:1.22;font-weight:740;letter-spacing:-.04em;color:var(--ipd-ink)}
.ipd-p{margin-top:16px;font-size:16px;line-height:1.82;color:var(--ink-2,#3A3A3A)}
.ipd-foot{margin-top:16px;font-size:13px;line-height:1.65;color:var(--ipd-muted)}
.ipd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ipd-chips li{padding:7px 12px;border:1.5px solid var(--ipd-ink);background:#fff;font-size:14px;font-weight:650;line-height:1.3}
.ipd-chips li:first-child{background:var(--ipd-ink);color:#fff}
.ipd-chips.is-notes li{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;font-weight:500}
.ipd-chips.is-notes li:first-child{background:var(--ipd-red);border-color:var(--ipd-red)}

/* ── 구성비 막대 ── */
.ipd-bar{display:flex;height:22px;margin-top:28px;border:1.5px solid var(--ipd-ink);background:#fff}
.ipd-seg{display:block;height:100%;border-right:1.5px solid var(--ipd-ink)}
.ipd-seg:last-child{border-right:0}
.ipd-seg.is-main,.ipd-legend li.is-main i{background:var(--ipd-red)}
.ipd-seg.is-c1,.ipd-legend li.is-c1 i{background:var(--ipd-ink)}
.ipd-seg.is-c2,.ipd-legend li.is-c2 i{background:#7A7A7A}
.ipd-seg.is-c3,.ipd-legend li.is-c3 i{background:#C4C4C0}
.ipd-seg.is-c4,.ipd-legend li.is-c4 i{background:#E9E9E5}
.ipd-seg.is-muted,.ipd-legend li.is-muted i{background:repeating-linear-gradient(135deg,#fff 0 5px,#E2E2DE 5px 7px)}
.ipd-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;margin-top:18px;border-top:1px solid var(--ipd-line)}
.ipd-legend li{display:grid;grid-template-columns:14px auto;column-gap:10px;align-items:center;padding:14px 12px 14px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-legend i{grid-row:span 2;width:14px;height:14px;border:1.5px solid var(--ipd-ink)}
.ipd-legend b{font-family:var(--slab);font-size:clamp(28px,3.2vw,38px);font-weight:700;line-height:1;color:var(--ipd-ink)}
.ipd-legend li.is-main b{color:var(--ipd-red)}
.ipd-legend span{grid-column:2;font-size:14.5px;font-weight:700;line-height:1.35;margin-top:4px}
.ipd-legend small{display:block;font-size:12px;font-weight:500;color:var(--ipd-muted)}

/* ── 공정 단계 ── */
.ipd-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.5px solid var(--ipd-ink)}
.ipd-steps li{display:flex;flex-direction:column;gap:6px;padding:16px 12px 18px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-steps b{font-family:var(--slab);font-size:28px;font-weight:700;line-height:1;color:var(--ipd-red)}
.ipd-steps span{font-size:15.5px;font-weight:700}
.ipd-banner{max-width:860px}
.ipd-banner img{max-height:320px;object-fit:cover}

/* ── 레시피 ── */
.ipd-recipes{display:grid;gap:12px}
.ipd-recipe{display:flex;flex-direction:column;gap:10px;padding:20px;border:1.5px solid var(--ipd-ink);background:#fff}
.ipd-recipe .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--ipd-red)}
.ipd-recipe h4{font-size:19px;font-weight:740;letter-spacing:-.03em}
.ipd-recipe>p:last-child{font-size:15px;line-height:1.7;color:var(--ink-2,#3A3A3A)}
.ipd-formula{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;padding:10px 0;border-top:1px solid var(--ipd-line);border-bottom:1px solid var(--ipd-line)}
.ipd-formula span{display:flex;flex-direction:column;gap:2px}
.ipd-formula b{font-family:var(--slab);font-size:32px;line-height:1;font-weight:700}
.ipd-formula small{font-size:12px;color:var(--ipd-muted);font-weight:600}
.ipd-formula .is-plus small{font-size:15px;color:var(--ipd-ink);font-weight:700;padding-bottom:3px}
.ipd-formula i{font-style:normal;font-family:var(--slab);font-size:26px;font-weight:700;color:var(--ipd-red);align-self:center}
.ipd-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ipd-duo .ipd-media img{aspect-ratio:1/1;object-fit:cover}

/* ── 활용 카드 ── */
.ipd-uses{display:grid;grid-template-columns:1fr;border-top:1.5px solid var(--ipd-ink)}
.ipd-uses li{padding:18px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-uses h4{font-size:18px;font-weight:740;letter-spacing:-.03em}
.ipd-uses h4::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;background:var(--ipd-red);vertical-align:2px}
.ipd-uses p{margin-top:6px;font-size:15px;line-height:1.7;color:var(--ink-2,#3A3A3A)}

/* ── 파우치 사용법 그래픽 ── */
.ipd-howto-grid{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center;margin-top:26px}
.ipd-pouch{width:132px}
.ipd-pouch-cap{width:38px;height:22px;margin:0 auto;border:1.5px solid var(--ipd-ink);border-bottom:0;background:#fff}
.ipd-pouch-body{position:relative;height:178px;border:1.5px solid var(--ipd-ink);border-radius:14px 14px 4px 4px;background:#fff;overflow:hidden}
.ipd-pouch-powder{position:absolute;left:0;right:0;bottom:0;height:24%;background:repeating-linear-gradient(0deg,#C4C4C0 0 3px,#E9E9E5 3px 6px)}
.ipd-line{position:absolute;left:0;right:0;border-top:2px dashed var(--ipd-red)}
.ipd-line.is-upper{top:30%}
.ipd-line.is-lower{top:52%}
.ipd-line em{position:absolute;right:6px;top:-21px;font-style:normal;font-size:11.5px;font-weight:800;color:var(--ipd-red);background:#fff;padding:0 3px}
.ipd-howto{display:grid;gap:0;border-top:1.5px solid var(--ipd-ink)}
.ipd-howto li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-howto b{font-family:var(--slab);font-size:24px;font-weight:700;color:var(--ipd-red);line-height:1}
.ipd-howto span{font-size:15.5px;font-weight:600;line-height:1.55}

/* ── 영양정보(라벨형 표) ── */
.ipd-nutri{border:2px solid var(--ipd-ink);background:#fff}
.ipd-nutri-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;background:var(--ipd-ink);color:#fff;font-weight:700}
.ipd-nutri-top span:first-child{font-size:17px}
.ipd-nutri-top span:last-child{font-size:13px;color:#BDBDBD}
.ipd-nutri-top b{font-family:var(--slab);font-size:24px;color:#fff;margin-left:6px}
.ipd-nutri table{width:100%;border-collapse:collapse;font-size:15px}
.ipd-nutri th,.ipd-nutri td{padding:10px 14px;border-bottom:1px solid var(--ipd-line);text-align:left}
.ipd-nutri thead th{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;color:var(--ipd-muted);border-bottom:1.5px solid var(--ipd-ink)}
.ipd-nutri td{font-variant-numeric:tabular-nums;font-weight:600}
.ipd-nutri td:last-child{text-align:right;color:var(--ipd-red);font-weight:700}
.ipd-nutri tbody tr:last-child th,.ipd-nutri tbody tr:last-child td{border-bottom:0;font-weight:800}

/* ── 숫자 ── */
.ipd-figures{display:grid;grid-template-columns:1fr;border-top:1.5px solid var(--ipd-ink)}
.ipd-figures li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-figures b{font-family:var(--slab);font-size:clamp(36px,5vw,56px);font-weight:700;line-height:1;color:var(--ipd-ink)}
.ipd-figures li:first-child b{color:var(--ipd-red)}
.ipd-figures span{font-size:14.5px;font-weight:600;color:var(--ipd-muted);text-align:right}

/* ── 목록·표 ── */
.ipd-list{margin-top:20px;border-top:1.5px solid var(--ipd-ink)}
.ipd-list li{position:relative;padding:13px 0 13px 22px;border-bottom:1px solid var(--ipd-line);font-size:15.5px;line-height:1.65}
.ipd-list li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--ipd-ink)}
.ipd-list.is-check li{font-weight:650}
.ipd-list.is-check li::before{width:12px;height:7px;top:19px;background:none;border-left:2.5px solid var(--ipd-red);border-bottom:2.5px solid var(--ipd-red);transform:rotate(-45deg)}
.ipd-table{border-top:1.5px solid var(--ipd-ink)}
.ipd-table>div{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-table dt{font-size:13.5px;font-weight:600;color:var(--ipd-muted)}
.ipd-table dd{font-size:15px;font-weight:600;line-height:1.6}
.ipd-table.is-pending dd{color:var(--ipd-muted);font-weight:500}
.ipd-table.is-pending dd::before{content:"확정 전";display:inline-block;margin-right:8px;padding:1px 7px;border:1px solid var(--ipd-line);font-size:11.5px;font-weight:700;color:var(--ipd-ink);vertical-align:1px}

/* ── 링크 · 버튼 ── */
.ipd-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ipd-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1.5px solid var(--ipd-ink);font-size:15px;font-weight:700;text-decoration:none;background:#fff}
.ipd-links li:first-child a{background:var(--ipd-ink);color:#fff}
.ipd-links a:hover,.ipd-links a:focus-visible{background:var(--ipd-red);border-color:var(--ipd-red);color:#fff}
.ipd-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 22px;background:var(--ipd-red);color:#fff;font-size:16px;font-weight:750;text-decoration:none;border:1.5px solid var(--ipd-red);justify-self:start}
.ipd-button:hover,.ipd-button:focus-visible{background:#fff;color:var(--ipd-red)}

/* ── 로스팅 눈금(원두) ── */
.ipd-roast-label{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ipd-muted)}
.ipd-roast-label b{color:var(--ipd-ink);font-weight:600}
/* D-2 (2026-10-20) 로스팅 5단계 막대: 칸 5개, 1칸부터 그 단계까지 빨강, 칸마다 이름(지금 단계 굵게) */
.ipd-roast{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:14px;max-width:520px}
.ipd-roast span{display:flex;flex-direction:column;gap:8px;min-width:0}
.ipd-roast i{display:block;height:16px;border:1.5px solid var(--ipd-ink);background:#fff}
.ipd-roast span.is-fill i{background:var(--ipd-red);border-color:var(--ipd-red)}
.ipd-roast small{font-size:12px;line-height:1.35;color:var(--ipd-muted);word-break:keep-all}
.ipd-roast span.is-on small{color:var(--ipd-ink);font-weight:800}
.ipd-agtron{margin-top:14px;font-size:14px;font-weight:650;color:var(--ipd-ink)}

/* ── 검은 띠: 만드는 곳 · 맞춤형 커피 ── */
.ipd-maker-sec,.ipd-cta-sec{margin-top:8px;padding-left:clamp(22px,4vw,56px);padding-right:clamp(22px,4vw,56px);background:var(--ipd-ink);color:#fff;border-top:0}
.ipd-maker-sec h3,.ipd-cta-sec h3{color:#fff}
.ipd-maker-sec .ipd-no,.ipd-cta-sec .ipd-no{color:var(--red-on-dark,#FF5A4A)}
.ipd-maker-sec .ipd-no b,.ipd-cta-sec .ipd-no b{color:#fff}
.ipd-maker-sec .ipd-p,.ipd-cta-sec .ipd-p{color:#DADADA}
.ipd-maker-facts{border-top:1.5px solid #fff}
.ipd-maker-facts>div{display:grid;grid-template-columns:minmax(80px,26%) minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid #3A3A3A}
.ipd-maker-facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#BDBDBD}
.ipd-maker-facts dd{font-size:15px;font-weight:650;color:#fff;line-height:1.55}
.ipd-cta-sec .ipd-button:hover,.ipd-cta-sec .ipd-button:focus-visible{background:#fff;color:var(--ipd-red);border-color:#fff}
.ipd-cta-sec+.ipd-sec{border-top:0}

.ipd-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:22px 0 0;margin-top:clamp(28px,4vw,48px);border-top:3px solid var(--ipd-ink);font-size:13px;color:var(--ipd-muted)}
.ipd-end span:first-child{font-family:var(--slab);font-weight:700;color:var(--ipd-ink);font-size:15px}
.ipd-end span:first-child::after{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;background:var(--ipd-red)}

/* 구성비 폭 */
.ipd-w-1{flex:0 0 1%}.ipd-w-2{flex:0 0 2%}.ipd-w-3{flex:0 0 3%}.ipd-w-4{flex:0 0 4%}.ipd-w-5{flex:0 0 5%}.ipd-w-6{flex:0 0 6%}.ipd-w-7{flex:0 0 7%}.ipd-w-8{flex:0 0 8%}.ipd-w-9{flex:0 0 9%}.ipd-w-10{flex:0 0 10%}
.ipd-w-11{flex:0 0 11%}.ipd-w-12{flex:0 0 12%}.ipd-w-13{flex:0 0 13%}.ipd-w-14{flex:0 0 14%}.ipd-w-15{flex:0 0 15%}.ipd-w-16{flex:0 0 16%}.ipd-w-17{flex:0 0 17%}.ipd-w-18{flex:0 0 18%}.ipd-w-19{flex:0 0 19%}.ipd-w-20{flex:0 0 20%}
.ipd-w-21{flex:0 0 21%}.ipd-w-22{flex:0 0 22%}.ipd-w-23{flex:0 0 23%}.ipd-w-24{flex:0 0 24%}.ipd-w-25{flex:0 0 25%}.ipd-w-26{flex:0 0 26%}.ipd-w-27{flex:0 0 27%}.ipd-w-28{flex:0 0 28%}.ipd-w-29{flex:0 0 29%}.ipd-w-30{flex:0 0 30%}
.ipd-w-31{flex:0 0 31%}.ipd-w-32{flex:0 0 32%}.ipd-w-33{flex:0 0 33%}.ipd-w-34{flex:0 0 34%}.ipd-w-35{flex:0 0 35%}.ipd-w-36{flex:0 0 36%}.ipd-w-37{flex:0 0 37%}.ipd-w-38{flex:0 0 38%}.ipd-w-39{flex:0 0 39%}.ipd-w-40{flex:0 0 40%}
.ipd-w-41{flex:0 0 41%}.ipd-w-42{flex:0 0 42%}.ipd-w-43{flex:0 0 43%}.ipd-w-44{flex:0 0 44%}.ipd-w-45{flex:0 0 45%}.ipd-w-46{flex:0 0 46%}.ipd-w-47{flex:0 0 47%}.ipd-w-48{flex:0 0 48%}.ipd-w-49{flex:0 0 49%}.ipd-w-50{flex:0 0 50%}
.ipd-w-51{flex:0 0 51%}.ipd-w-52{flex:0 0 52%}.ipd-w-53{flex:0 0 53%}.ipd-w-54{flex:0 0 54%}.ipd-w-55{flex:0 0 55%}.ipd-w-56{flex:0 0 56%}.ipd-w-57{flex:0 0 57%}.ipd-w-58{flex:0 0 58%}.ipd-w-59{flex:0 0 59%}.ipd-w-60{flex:0 0 60%}
.ipd-w-61{flex:0 0 61%}.ipd-w-62{flex:0 0 62%}.ipd-w-63{flex:0 0 63%}.ipd-w-64{flex:0 0 64%}.ipd-w-65{flex:0 0 65%}.ipd-w-66{flex:0 0 66%}.ipd-w-67{flex:0 0 67%}.ipd-w-68{flex:0 0 68%}.ipd-w-69{flex:0 0 69%}.ipd-w-70{flex:0 0 70%}
.ipd-w-71{flex:0 0 71%}.ipd-w-72{flex:0 0 72%}.ipd-w-73{flex:0 0 73%}.ipd-w-74{flex:0 0 74%}.ipd-w-75{flex:0 0 75%}.ipd-w-76{flex:0 0 76%}.ipd-w-77{flex:0 0 77%}.ipd-w-78{flex:0 0 78%}.ipd-w-79{flex:0 0 79%}.ipd-w-80{flex:0 0 80%}
.ipd-w-81{flex:0 0 81%}.ipd-w-82{flex:0 0 82%}.ipd-w-83{flex:0 0 83%}.ipd-w-84{flex:0 0 84%}.ipd-w-85{flex:0 0 85%}.ipd-w-86{flex:0 0 86%}.ipd-w-87{flex:0 0 87%}.ipd-w-88{flex:0 0 88%}.ipd-w-89{flex:0 0 89%}.ipd-w-90{flex:0 0 90%}
.ipd-w-91{flex:0 0 91%}.ipd-w-92{flex:0 0 92%}.ipd-w-93{flex:0 0 93%}.ipd-w-94{flex:0 0 94%}.ipd-w-95{flex:0 0 95%}.ipd-w-96{flex:0 0 96%}.ipd-w-97{flex:0 0 97%}.ipd-w-98{flex:0 0 98%}.ipd-w-99{flex:0 0 99%}.ipd-w-100{flex:0 0 100%}

/* ── 데스크톱 ── */
@media (min-width:900px){
 .ipd-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
 .ipd-hero .ipd-media img{aspect-ratio:4/3;max-height:none}
 .ipd-hero.is-text{grid-template-columns:minmax(0,1fr)}
 .ipd-hero .ipd-art{aspect-ratio:4/3}
 .ipd-sec.has-media{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;column-gap:clamp(32px,5vw,72px)}
 .ipd-sec.has-media>.ipd-media{grid-column:2;grid-row:1}
 .ipd-steps{grid-template-columns:repeat(6,minmax(0,1fr))}
 .ipd-recipes{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ipd-uses{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
 .ipd-uses-sec>.ipd-media{max-width:640px}
 .ipd-figures{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
 .ipd-figures li{flex-direction:column;align-items:flex-start;gap:10px}
 .ipd-figures span{text-align:left}
 .ipd-label-sec,.ipd-pending-sec,.ipd-maker-sec{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,72px);align-items:start}
 .ipd-label-sec>.ipd-foot{grid-column:2}
 .ipd-cta-sec{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
 .ipd-cta-sec .ipd-button{justify-self:end}
}
@media (max-width:600px){
 .ipd{margin-top:28px}
 .ipd-hero h2{font-size:clamp(30px,8.6vw,40px)}
 .ipd-art{min-height:220px}
 .ipd-maker-sec,.ipd-cta-sec{margin-left:calc(-1*var(--ipd-bleed,0px));margin-right:calc(-1*var(--ipd-bleed,0px))}
 .ipd-howto-grid{grid-template-columns:96px minmax(0,1fr);gap:16px}
 .ipd-pouch{width:96px}
 .ipd-pouch-body{height:140px}
 .ipd-table>div{grid-template-columns:minmax(84px,32%) minmax(0,1fr);gap:10px}
}
@media print{.ipd-maker-sec,.ipd-cta-sec{background:#fff;color:#111}}

/* ── r9 (2026-10-19) 원두 디카페인(SKU-21): 새 섹션 종류 2개. 기존 규칙은 그대로 두고 새 class에만 더합니다. ── */
/* 공정 도식(process): 휴대폰은 세로 빨간 선, 데스크톱은 아이콘 가운데를 지나는 가로 빨간 선.
   선은 각 단계(li) 상자 안에서만 그립니다(모션 draw의 clip-path에 잘리지 않도록). */
.ipd-steps.is-process{grid-template-columns:minmax(0,1fr);border-top:0}
.ipd-steps.is-process li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;row-gap:6px;align-items:start;align-content:start;padding:16px 0;border-bottom:0}
.ipd-steps.is-process li::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:2px;background:var(--ipd-red)}
.ipd-steps.is-process li:first-child::before{top:44px}
.ipd-steps.is-process li:last-child::before{bottom:auto;height:44px}
.ipd-pi{position:relative;z-index:1;grid-row:1/3;display:block;width:56px;height:56px;border:1.5px solid var(--ipd-ink);background:#fff}
.ipd-pi *{fill:none;stroke:var(--ipd-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ipd-pi .r{stroke:var(--ipd-red)}
.ipd-pi .f{fill:var(--ipd-red);stroke:none}
.ipd-steps.is-process b{font-size:22px;padding-top:4px}
.ipd-steps.is-process span{font-size:15px;font-weight:500;line-height:1.65;color:var(--ink-2,#3A3A3A)}
.ipd-steps.is-process strong{display:block;margin-bottom:4px;font-size:17px;font-weight:750;line-height:1.4;letter-spacing:-.02em;color:var(--ipd-ink)}
/* 맛 막대(taste): 공급사 5점 평가. 로스팅 눈금과 같은 검은 선·검은 채움, 가장 높은 점수를 따로 강조하지 않습니다. */
.ipd-taste{display:grid;max-width:640px;border-top:1.5px solid var(--ipd-ink)}
.ipd-taste li{display:grid;grid-template-columns:52px minmax(0,1fr) 46px;align-items:center;column-gap:14px;padding:13px 0;border-bottom:1px solid var(--ipd-line)}
.ipd-taste-name{font-size:15px;font-weight:700}
.ipd-bar.is-scale{height:16px;margin-top:0;gap:4px;border:0;background:none}
.ipd-bar.is-scale .ipd-seg{flex:1 1 0;min-width:0;border:1.5px solid var(--ipd-ink)}
.ipd-bar.is-scale .ipd-seg.is-on{background:var(--ipd-ink)}
.ipd-bar.is-scale .ipd-seg.is-off{background:#fff;border-color:#BDBDBD}
.ipd-taste-score{font-family:var(--slab);font-size:24px;font-weight:700;line-height:1;text-align:right;white-space:nowrap}
.ipd-taste-score small{margin-left:1px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ipd-muted)}
@media (min-width:900px){
 .ipd-steps.is-process{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}
 .ipd-steps.is-process li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:12px;padding:0 28px 8px 0}
 .ipd-steps.is-process li::before{left:0;right:0;top:27px;bottom:auto;width:auto;height:2px}
 .ipd-steps.is-process li:first-child::before{left:28px;top:27px}
 .ipd-steps.is-process li:last-child::before{right:auto;width:28px;height:2px}
 .ipd-pi{grid-row:auto}
 .ipd-taste-sec{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,72px);align-items:start}
 .ipd-taste-sec>.ipd-foot{grid-column:2}
}

/* ── r9 R1 (2026-10-19) 브라우저 검수 P1-1: 큰 글자가 3줄인 타이포그래피 아트(SKU-21 SUGAR/CANE/DECAF)만. 빌더가 3줄 이상일 때만 is-tall을 붙이므로
   2줄 아트(SKU-08~11, 02, 04)는 그대로입니다. ① 사파리 엔진은 aspect-ratio 상자의 폭을 글 폭에 맞춰 줄이므로(1440에서 431px) 칸 폭을 채우게 하고,
   ② 3줄이 4:3 상자에서 위 'INTO CAFÉ'와 겹치지 않게 큰 글자를 조금 줄이며, ③ 휴대폰에서는 상자를 조금 높입니다. ── */
.ipd-hero .ipd-art.is-tall{width:100%}
.ipd-art.is-tall b{font-size:clamp(44px,8vw,100px)}
@media (max-width:600px){
 .ipd-art.is-tall{min-height:256px}
}