/* 올바른식품 — 공통 스타일
   원칙: 모바일 먼저 · 고정 px 레이아웃 금지 · 누르는 것은 넉넉하게(WCAG 2.2 최소 24px, 여기선 48px)
   색은 전부 토큰으로 정의한다(어두운 화면에서 글씨가 사라지지 않게). */

:root{
  /* 브랜드 색 — 상세페이지(board.css)에서 그대로 가져왔다 */
  --ground:#FBF8F1;      /* paper  */
  --surface:#FFFFFF;
  --surface-2:#F6F1E7;   /* cream  */
  --ink:#232019;
  --ink-2:#6E6558;       /* sub    */
  --muted:#9A9081;       /* dim    */
  --line:#E8E0D2;
  --line-2:#DCD2BE;
  --accent:#C0272D;      /* 도장 빨강 */
  --accent-2:#A31F25;
  --accent-soft:#FAEFE9;
  --accent-ink:#98191F;
  --on-accent:#FFFFFF;
  --warm:#A8752B;
  --danger:#B03A2E;
  --shadow:0 1px 2px rgba(70,45,20,.06), 0 14px 34px -18px rgba(70,45,20,.34);
  --sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
         'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --serif:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',sans-serif;
  --wrap:1120px; --pad:20px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#17150F; --surface:#1E1B14; --surface-2:#262218;
  --ink:#F1EBDD; --ink-2:#C4BAA6; --muted:#968C7A; --line:#332D22; --line-2:#463E30;
  --accent:#E8767B; --accent-2:#F19298; --accent-soft:#2A1A19; --accent-ink:#F3A2A6;
  --on-accent:#1A0E0F;
  --warm:#D6A661; --danger:#E8897C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --ground:#17150F; --surface:#1E1B14; --surface-2:#262218;
  --ink:#F1EBDD; --ink-2:#C4BAA6; --muted:#968C7A; --line:#332D22; --line-2:#463E30;
  --accent:#E8767B; --accent-2:#F19298; --accent-soft:#2A1A19; --accent-ink:#F3A2A6;
  --on-accent:#1A0E0F;
  --warm:#D6A661; --danger:#E8897C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  word-break:keep-all;overflow-wrap:break-word;   /* 한글은 낱말 단위로 끊는다 */
     font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{text-wrap:balance;margin:0}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* 키보드로만 보이는 «본문 바로가기» */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);
  padding:11px 16px;border-radius:0 0 8px 0;z-index:60;font-weight:600}
.skip:focus{left:0}

.wrap{padding:0 var(--pad);max-width:var(--wrap);margin:0 auto}

/* ── 머리 ── */
.nav{display:flex;align-items:center;gap:14px;padding:13px var(--pad);
     border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:5}
.logo{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-.01em;
      color:var(--ink);text-decoration:none;display:block}
.logo small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;
            letter-spacing:.14em;color:var(--muted);margin-top:1px}
.nav .sp{margin-left:auto}
.nav .lnk{font-size:14.5px;text-decoration:none;color:var(--ink-2);font-weight:500;
  padding:8px 4px;display:none}
.nav .lnk:hover{color:var(--accent-ink)}
.nav .tel{font-weight:600;color:var(--accent-ink);text-decoration:none;font-size:15px;
  border:1px solid var(--line-2);border-radius:99px;padding:9px 15px;min-height:44px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav .tel:hover{border-color:var(--accent);background:var(--accent-soft)}

/* 좁은 화면에서 머리줄이 넘치던 것 ─ 곁말이 자간(0.14em) 때문에 상호보다 넓어
   전화 단추를 화면 밖으로 밀어냈다. 곁말은 첫 화면에 또 나오므로 여기서는 감춘다. */
.nav .brandline{min-width:0}
.nav .logo{min-width:0;overflow:hidden}
@media (max-width:560px){
  .nav{gap:10px}
  .nav .logo small{display:none}
  .nav .tel{padding:9px 13px;font-size:14.5px}
}
@media (max-width:360px){
  .nav .logo{font-size:17px}
  .nav .seal{width:32px}
}

/* ── 히어로 ── */
.hero{background:var(--surface)}
.hero .grid{display:grid;gap:0;grid-template-areas:"t" "p" "c"}
.hero .txt{grid-area:t} .hero .pic{grid-area:p} .hero .cta{grid-area:c}
.hero .txt{padding:34px var(--pad) 30px}
.hero .pic img{width:100%;height:260px;object-fit:cover}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;color:var(--warm);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--warm);border-radius:2px}
h1{font-family:var(--sans);font-weight:800;font-size:clamp(27px,7.2vw,46px);line-height:1.32;
   letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--accent-ink)}
.lead{margin:16px 0 0;color:var(--ink-2);font-size:clamp(15px,3.7vw,17px);max-width:36em}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none}
.facts li{font-size:13px;font-weight:500;background:var(--surface-2);color:var(--ink-2);
  border-radius:99px;padding:6px 13px}

/* ── 단추 ── */
.cta{display:grid;gap:9px;margin-top:24px}
.hero .cta{padding:22px var(--pad) 34px;margin-top:0;background:var(--surface)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;font-family:inherit;padding:0 18px}
.btn-1{background:var(--accent);color:var(--on-accent)}
.btn-1:hover{background:var(--accent-2)}
.btn-2{background:#FEE500;color:#191600;border-color:#E6CE00}
.btn-2:hover{filter:brightness(.96)}
.btn-3{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-3:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ── 섹션 ── */
section{padding:44px 0}
.band{background:var(--surface-2)}
.sechead{margin-bottom:22px}
.sechead h2{font-family:var(--sans);font-size:clamp(22px,5.2vw,32px);font-weight:800;letter-spacing:-.02em}
.sechead p{margin:9px 0 0;color:var(--muted);font-size:14.5px}

.who{display:grid;gap:11px}
.who .c{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 17px}
.who .c b{display:block;font-size:16px;margin-bottom:4px}
.who .c span{font-size:14px;color:var(--ink-2)}

.cards{display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card img{width:100%;height:170px;object-fit:cover}
.card .b{padding:14px 16px 17px}
.card h3{font-size:17px;margin-bottom:5px}
.card p{margin:0;font-size:14px;color:var(--ink-2)}
.card .cnt{font-size:12.5px;color:var(--warm);font-weight:600;letter-spacing:.04em}

.plist{display:grid;gap:22px}
.pg h3{font-size:15px;font-weight:700;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.pg h3 span{font-size:12px;font-weight:600;color:var(--warm);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}
.chips li{font-size:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;color:var(--ink)}

.why{display:grid;gap:13px;counter-reset:w}
.why .c{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 18px}
.why .c::before{counter-increment:w;content:counter(w,decimal-leading-zero);
  font-size:12px;font-weight:700;color:var(--warm);letter-spacing:.1em;display:block;margin-bottom:9px}
.why h3{font-size:17.5px;margin-bottom:6px}
.why p{margin:0;color:var(--ink-2);font-size:14.5px}

.price{background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:20px 18px;margin-top:16px}
.price h3{font-family:var(--sans);font-weight:800;font-size:20px;margin-bottom:8px}
.price p{margin:0 0 4px;color:var(--ink-2);font-size:14.5px}

/* ── 자주 묻는 것 ── */
.faq{display:grid;gap:11px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:11px}
.faq summary{padding:15px 17px;font-weight:600;font-size:15.5px;cursor:pointer;list-style:none;
  display:flex;gap:10px;align-items:flex-start;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-weight:700;color:var(--warm);flex:none}
.faq .a{padding:0 17px 16px 40px;margin:0;color:var(--ink-2);font-size:14.5px}
.faq details[open] summary{padding-bottom:8px}

/* ── 문의폼 ── */
.form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 18px}
.f{display:grid;gap:13px}
.fld label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.fld .req{color:var(--danger);margin-left:2px}
.fld .opt{color:var(--muted);font-weight:500}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--ground);color:var(--ink);
  min-height:48px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{background:var(--surface)}
.fld .err{color:var(--danger);font-size:13px;margin:5px 0 0;display:none}
.fld.bad input,.fld.bad textarea{border-color:var(--danger)}
.fld.bad .err{display:block}
.agree{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:13px 14px}
.agree label{display:flex;gap:9px;align-items:flex-start;font-size:14px;font-weight:600;cursor:pointer}
.agree input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--accent)}  /* WCAG 2.2 최소 24px */
.agree ul{margin:9px 0 0 31px;padding:0;list-style:none;font-size:12.5px;color:var(--ink-2);line-height:1.75}
.agree ul li::before{content:"· ";color:var(--muted)}
.after{margin:12px 0 0;font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin-top:12px;padding:13px 15px;border-radius:9px;font-size:14.5px;display:none}
.msg.ok{display:block;background:var(--accent-soft);border:1px solid var(--line);color:var(--ink)}
.msg.no{display:block;background:#FBEAE7;border:1px solid #EBC9C3;color:#7C2B22}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .msg.no{background:#2B1A17;border-color:#4A2A24;color:#F0B5AB}}
:root[data-theme="dark"] .msg.no{background:#2B1A17;border-color:#4A2A24;color:#F0B5AB}

/* ── 회사소개 ── */
.about-hero{padding:40px var(--pad) 34px;text-align:center;background:var(--surface)}
.about-hero .slogan{font-family:var(--sans);font-weight:800;font-size:clamp(24px,6.4vw,40px);font-weight:700;
  line-height:1.4;letter-spacing:-.02em}
.about-hero p{color:var(--ink-2);margin:14px auto 0;max-width:32em;font-size:15.5px}
.figs{display:grid;gap:11px;margin-top:26px}
.fig{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:17px}
.fig b{display:block;font-size:26px;font-weight:700;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
.fig span{font-size:13.5px;color:var(--ink-2)}
.tblwrap{overflow-x:auto}
.info{width:100%;border-collapse:collapse;font-size:14.5px;min-width:340px}
.info th{text-align:left;width:120px;padding:11px 0;color:var(--muted);font-weight:600;
  vertical-align:top;border-bottom:1px solid var(--line)}
.info td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}

/* 글 페이지(개인정보처리방침) */
.doc{max-width:44em;margin:0 auto;padding:34px var(--pad) 60px}
.doc h1{font-size:clamp(23px,5.6vw,32px);margin-bottom:8px}
.doc .date{color:var(--muted);font-size:13.5px;margin:0 0 26px}
.doc h2{font-family:var(--sans);font-weight:800;font-size:19px;margin:30px 0 8px}
.doc p,.doc li{color:var(--ink-2);font-size:15px}
.doc ul{padding-left:20px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
.doc th,.doc td{border:1px solid var(--line);padding:9px 10px;text-align:left}
.doc th{background:var(--surface-2);font-weight:600;color:var(--ink)}

/* ── 하단 ── */
footer{background:var(--surface-2);border-top:1px solid var(--line);
  padding:28px 0 calc(90px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink-2)}
footer .fl{font-family:var(--sans);font-weight:800;font-size:16px;color:var(--ink);margin-bottom:10px}
footer p{margin:3px 0}
footer .links{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
footer .links a{min-height:44px;display:inline-flex;align-items:center}

/* ── 폰 아래 붙박이 ── */
.dock{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--line);border-top:1px solid var(--line);z-index:20;
  padding-bottom:env(safe-area-inset-bottom)}
.dock a{background:var(--surface);text-align:center;padding:10px 4px;text-decoration:none;
  color:var(--ink);font-size:12.5px;font-weight:600;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.dock a i{font-style:normal;font-size:17px;line-height:1}
.dock a.k{background:#FEE500;color:#191600}

/* ── 넓어지면 ── */
@media (min-width:760px){
  :root{--pad:30px}
  .nav .lnk{display:inline-block}
  .hero .grid{grid-template-columns:1.05fr .95fr;align-items:center;
              grid-template-areas:"t p" "c p"}
  .hero .txt{padding:52px 0 8px 30px}
  .hero .cta{padding:0 0 52px 30px;background:transparent}
  .hero .pic img{height:100%;min-height:420px}
  .cta{grid-template-columns:repeat(3,auto);justify-content:start}
  .btn{padding:0 22px}
  .who,.figs{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:1fr 1fr}   /* 카드 4장 — 2×2 가 맞다 */
  .dock{display:none}
  footer{padding-bottom:34px}
  section{padding:58px 0}
}
@media (min-width:1080px){
  :root{--pad:40px}
  .hero .txt{padding:64px 0 8px 40px}
  .hero .cta{padding:0 0 64px 40px}
  .figs{grid-template-columns:repeat(4,1fr)}
  section{padding:70px 0}
}


/* ── 브랜드 표식 (상세페이지와 같은 것) ── */
.rule{width:56px;height:3px;background:var(--accent);border-radius:3px;margin:14px 0 13px;opacity:.9}
.rule.mid{margin-left:auto;margin-right:auto}
.seal{width:52px;height:auto;display:block}
.seal.mid{margin:0 auto 18px}
.nav .seal{width:38px;flex:none}
.brandline{display:flex;align-items:center;gap:11px}
.eyebrow{letter-spacing:.2em}
.eyebrow::before{background:var(--accent)}
h1 em{color:var(--accent)}
.card img,.hero .pic img{border-radius:0}
@media (min-width:760px){ .hero .pic img{border-radius:18px} }

/* ── 품목 목록 페이지 ── */
.pagehead{background:var(--surface);padding:36px var(--pad) 30px;text-align:center;
  border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(25px,6.2vw,40px)}
.jump{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.jump a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:99px;
  padding:9px 16px;min-height:44px;display:inline-flex;align-items:center}
.jump a:hover{border-color:var(--accent);color:var(--accent-ink)}
.sechead .cnt{font-size:14px;font-weight:600;color:var(--accent);margin-left:6px;
  font-variant-numeric:tabular-nums}

.items{list-style:none;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,1fr)}
.item{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.item img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface-2)}
.item .noimg{width:100%;aspect-ratio:1/1;background:var(--surface-2);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted);border-bottom:1px solid var(--line)}
.item .t{padding:11px 12px 13px}
.item h3{font-size:15px;font-weight:700;margin:0 0 3px;word-break:keep-all}
.item p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;word-break:keep-all}
@media (min-width:600px){ .items{grid-template-columns:repeat(3,1fr);gap:14px}
  .item h3{font-size:16px} }
@media (min-width:900px){ .items{grid-template-columns:repeat(4,1fr);gap:16px} }

/* ── 회사소개 심화 ── */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:s}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 20px}
.steps .n{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;
  color:var(--accent);margin-bottom:9px}
.steps h3{font-size:18px;font-weight:800;margin-bottom:7px}
.steps p{margin:0;color:var(--ink-2);font-size:14.8px;line-height:1.8}

.two{display:grid;gap:20px;align-items:start}
.two .tx p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px;line-height:1.85}
.two .tx p:last-child{margin-bottom:0}
.two .tx .quiet{color:var(--muted);font-size:14px;border-left:3px solid var(--line);padding-left:14px}
.two .px img{border-radius:14px;border:1px solid var(--line);
  width:100%;height:auto;max-width:340px}   /* 글 칸보다 훨씬 길어져 아래가 크게 비던 것을 막는다 */
.two .px{justify-self:center}
.two .px .cap{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .two{grid-template-columns:1.15fr .85fr;gap:34px}
}

/* 카드 속성 — 모든 카드에 같은 자리, 빈 값도 «―»로 자리를 지킨다 */
.spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 7px;font-size:12px;line-height:1.5}
.spec dt{color:var(--muted);font-weight:600;white-space:nowrap}
.spec dd{margin:0;color:var(--ink-2);word-break:keep-all}
.totop{text-align:center;padding:0 0 34px;margin:0}
.totop a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.totop a:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ── 거래 조건 3블록 (b2b 첫 화면 바로 아래) ──
   근거: 벤더 사이트에서 «쉽게 접근»되기를 바라는 것 1위가 가격(86%, Demand Gen 2024),
   가격 미공개는 구매를 막는 1순위 요인(54%, TrustRadius n=1,604). 그래서 맨 앞에 둔다. */
.terms3{padding:26px 0 6px}
.t3{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.t3{grid-template-columns:repeat(3,1fr)}}
.t3>div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px}
.t3 b{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:9px}
.t3 strong{display:block;font-size:19px;font-weight:800;line-height:1.35;margin-bottom:7px}
.t3 span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.t3note{margin:14px 0 0;font-size:13.5px;color:var(--muted);line-height:1.7}
.t3note a{color:var(--accent);font-weight:700}

/* ── 걱정되는 것 ── */
.worry{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.worry{grid-template-columns:1fr 1fr}}
.worry>div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px 20px}
.worry b{display:block;font-size:16px;font-weight:800;margin-bottom:7px;line-height:1.4}
.worry p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.7}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 포장 두 가지 ── 반찬은 스탠드 파우치, 젓갈은 캔 실링 용기.
   사진 원본이 작아(≈330px) 표시 크기를 넘기지 않는다. */
.packs{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.packs{grid-template-columns:1fr 1fr}}
.pk{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 20px 22px}
.pk .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pk .tag{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--on-accent);
  background:var(--accent);border-radius:99px;padding:3px 10px}
.pk h3{margin:0;font-size:20px;font-weight:800}
.pk>p{margin:14px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.75}
.pk .shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pk .shots figure{margin:0}
.pk .shots img{width:100%;height:auto;display:block;border-radius:10px;background:var(--surface-2)}
.pk .shots figcaption{margin-top:7px;font-size:12.5px;color:var(--muted);text-align:center}

.jars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
@media(min-width:700px){.jars{grid-template-columns:repeat(6,1fr)}}
.jars figure{margin:0}
.jars img{width:100%;aspect-ratio:1;object-fit:contain;display:block;
  border-radius:8px;background:var(--surface-2)}   /* 파우치는 세로가 길어 그냥 두면 줄이 어긋난다 */
.jars figcaption{margin-top:6px;font-size:12px;color:var(--muted);text-align:center;line-height:1.4}

/* ── 포장 두 줄 (b2b) ── */
.packrow{display:grid;gap:12px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:760px){.packrow{grid-template-columns:1fr 1fr}}
.pr{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pr img{width:88px;height:88px;object-fit:contain;flex:none;border-radius:10px;background:var(--surface-2)}
.pr b{display:block;font-size:14.5px;font-weight:800;margin-bottom:5px}
.pr p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.65}

/* ── 라벨 두 가지 (소분 랜딩의 간판) ── */
.labels{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.labels{grid-template-columns:1fr 1fr}}
.lb{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px 22px}
.lb.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.lb b{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--sub);border:1px solid var(--line-2);border-radius:99px;padding:3px 10px;margin-bottom:10px}
.lb.on b{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lb h3{font-size:21px;font-weight:800;margin:0 0 8px}
.lb p{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);line-height:1.75}
.lb .cond{font-size:13.5px;color:var(--muted);margin:0}
.lb{display:flex;flex-direction:column}
.lb img{width:100%;max-width:150px;height:auto;display:block;border-radius:10px;
  background:var(--surface-2);margin-top:auto}   /* 한쪽만 사진이 있어 높이가 어긋나던 것 */

/* ── 벌크도 된다 (소분 랜딩 안) ── */
.bulkrow{display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
@media(min-width:820px){.bulkrow{grid-template-columns:1.15fr .85fr}}
.bulkrow .bx{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.bulkrow dl{margin:0;display:grid;grid-template-columns:80px 1fr;gap:9px 12px}
.bulkrow dt{font-size:12.5px;color:var(--muted);font-weight:700;padding-top:2px}
.bulkrow dd{margin:0;font-size:14.5px;font-weight:700}