/* Why 88COFFEE (옛 그림 m03_01_01img_01.jpg + 02text.png 모양 그대로: 88COFFEE 초록 #038547 · 핵심가치 초록 판 #10876b) */
#rb-why-88coffee { --rb-green: #038547; word-break: keep-all; overflow-wrap: break-word; }
#rb-why-88coffee :is(h2, h3, p) { word-break: keep-all; overflow-wrap: break-word; }
#rb-why-88coffee .rb-container { max-inline-size: 1240px; }
#rb-why-88coffee img { inline-size: 100%; }
#rb-why-88coffee .rb-eyebrow { margin: 0 0 26px; color: var(--rb-green); font-size: 19px; letter-spacing: 0; }
#rb-why-88coffee .rb-eyebrow::before { font-size: 14px; }

/* 1) 로스팅 사진 + 소개 두 칸 */
.rb-why-hero { aspect-ratio: 1200 / 460; object-fit: cover; }
.rb-why-cols { display: grid; grid-template-columns: 1fr 1fr; padding-block-start: 74px; }
.rb-why-cols h2 { margin: 0; font-size: clamp(22px, 2.45vw, 30px); line-height: 1.55; font-weight: 600; color: #111; letter-spacing: -0.01em; }
.rb-why-text p { margin: 0 0 34px; font-size: 18px; line-height: 1.89; color: #5a5a5a; }
.rb-why-text p:last-child { margin-block-end: 0; }

/* 2) LOGO TYPE */
.rb-why-logo { padding-block: 160px 180px; }
.rb-why-logo h2 { margin: 0 0 56px; font-size: clamp(30px, 3.3vw, 42px); font-weight: 600; color: #111; letter-spacing: -0.01em; }
.rb-why-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.rb-why-logos figure { margin: 0; }
.rb-why-logos img { aspect-ratio: 574 / 319; border: 1px solid #ccc; box-sizing: content-box; inline-size: calc(100% - 2px) !important; }
.rb-why-logos figcaption { display: flex; align-items: center; gap: 12px; margin-block-start: 20px; font-size: 19px; color: #111; }
.rb-why-logos figcaption::before { content: "✦"; color: var(--rb-green); font-size: 14px; }

/* 3) 핵심가치 초록 판 (배경 그림은 글자 없는 질감·8 무늬) */
.rb-why-values { background: #10876b url("../img/why-88coffee/values-bg.jpg") no-repeat right bottom / cover; color: #fff; padding-block: 170px 180px; }
.rb-why-values h2 { margin: 0 0 100px; text-align: center; font-size: clamp(28px, 2.9vw, 40px); font-weight: 600; letter-spacing: -0.01em; }
.rb-why-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.rb-why-cards h3 { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0 0 30px 2px; border-block-end: 1px solid rgba(255,255,255,.4); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.rb-why-cards h3::before { content: ""; flex: none; inline-size: 70px; block-size: 70px; background: center / 70px 70px no-repeat; }
.rb-why-v1 h3::before { background-image: url("../img/why-88coffee/icon-1.png"); }
.rb-why-v2 h3::before { background-image: url("../img/why-88coffee/icon-2.png"); }
.rb-why-v3 h3::before { background-image: url("../img/why-88coffee/icon-3.png"); }
.rb-why-cards p { margin: 36px 0 0; font-size: 18px; line-height: 1.56; color: rgba(255,255,255,.8); }

@media (max-width: 1199px) {
  .rb-why-cards p br.rb-pc, .rb-why-text br.rb-pc { display: none; }
}
@media (max-width: 991px) {
  .rb-why-cols { grid-template-columns: 1fr; gap: 36px; padding-block-start: 56px; }
  .rb-why-cards { grid-template-columns: 1fr; gap: 56px; max-inline-size: 640px; }
  .rb-why-values { background-image: url("../img/why-88coffee/values-bg-m.jpg"); }
}
@media (max-width: 600px) {
  .rb-why-hero { aspect-ratio: 660 / 350; inline-size: calc(100% + 40px) !important; max-inline-size: none; margin-inline: -20px; }
  #rb-why-88coffee .rb-eyebrow { margin-block-end: 14px; font-size: 15px; }
  .rb-why-cols h2 br.rb-pc { display: none; }
  .rb-why-cols h2 { font-size: 22px; }
  .rb-why-text p { margin-block-end: 22px; font-size: 15px; line-height: 1.85; }
  .rb-why-logo { padding-block: 72px 80px; }
  .rb-why-logo h2 { margin-block-end: 24px; font-size: 26px; }
  .rb-why-logos { grid-template-columns: 1fr; gap: 28px; }
  .rb-why-logos figcaption { margin-block-start: 14px; font-size: 16px; }
  .rb-why-values { padding-block: 64px 80px; }
  .rb-why-values h2 { margin-block-end: 40px; font-size: 24px; }
  .rb-why-cards { gap: 44px; }
  .rb-why-cards h3 { gap: 18px; padding-block-end: 20px; font-size: 20px; }
  .rb-why-cards h3::before { inline-size: 52px; block-size: 52px; background-size: 52px 52px; }
  .rb-why-cards p { margin-block-start: 22px; font-size: 15px; line-height: 1.75; }
}