/* 글자 박힌 그림 → 진짜 글자 + 사진 (대표 11-15 「이미지로 만들 건 이미지로, 글자가 있는 건 모두 글자로」)
   옛 시안 모양 그대로: 베이지 포인트 #b9a98f · 띠 #b8ab9a · 글자 #222/#666.
   modern-web-guidance: responsive-design · fluid-scaling · optimize-image-priority · improve-text-layout */
.rb { --rb-accent: #b9a98f; --rb-band: #b8ab9a; --rb-ink: #222; --rb-sub: #666; --rb-soft: #f4f2ee;
      color: var(--rb-ink); font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
.rb img { display: block; max-inline-size: 100%; block-size: auto; }
.rb-container { max-inline-size: 1200px; margin-inline: auto; padding-inline: 20px; }

/* 소제목(✦ INTRODUCTION) */
.rb-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; color: var(--rb-accent); font-size: 17px; letter-spacing: .02em; }
.rb-eyebrow::before { content: "✦"; font-size: 12px; }

/* 1) 글 + 사진 두 칸 */
.rb-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding-block: 80px 100px; }
.rb-split h2 { margin: 0 0 40px; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.55; font-weight: 600; }
.rb-split p.rb-text { margin: 0; color: var(--rb-sub); font-size: 16px; line-height: 2.05; max-inline-size: 34em; }
.rb-photo { position: relative; isolation: isolate; justify-self: center; inline-size: min(100%, 520px); }
.rb-photo::after { content: ""; position: absolute; inset: auto -60px -60px auto; inline-size: 46%; block-size: 38%; background: var(--rb-soft); z-index: -1; }
.rb-photo img { inline-size: 100%; }

/* 2) 베이지 띠 + 동그라미 3개 */
.rb-band { position: relative; overflow: hidden; background: var(--rb-band) url("../img/about/band_texture.jpg") repeat; padding-block: 80px 110px; margin-inline: 20px; }
.rb-band::before { content: "✦"; position: absolute; inset: -40px -10px auto auto; font-size: 220px; line-height: 1; color: rgba(255,255,255,.18); }
.rb-band::after { content: "✦ FOREMOST"; position: absolute; inset: auto auto 18px 28px; font-family: "Times New Roman", Georgia, serif; font-size: 56px; color: rgba(255,255,255,.22); letter-spacing: .02em; }
.rb-band h2 { margin: 0 0 50px; text-align: center; color: #fff; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
.rb-circles { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; max-inline-size: 1100px; }
.rb-circles li { box-sizing: border-box; inline-size: 320px; block-size: 320px; border-radius: 50%; background: #f1efea; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 44px 30px 30px; }
.rb-num { font-size: 13px; font-weight: 700; color: #7a6a55; padding-bottom: 6px; border-bottom: 1px solid #7a6a55; margin-bottom: 14px; }
.rb-circles h3 { margin: 0; font-size: 32px; font-weight: 500; color: #7a6a55; }
.rb-circles .rb-ko { margin: 2px 0 26px; font-size: 14px; color: #b9ad9c; }
.rb-circles p.rb-desc { margin: 0; font-size: 15px; line-height: 1.75; color: #8b7f70; }

/* 3) 사진 모음 */
.rb-gallery { padding-block: 130px 140px; }
.rb-gallery h2 { margin: 0 0 40px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
.rb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
.rb-grid img { inline-size: 100%; aspect-ratio: 580 / 400; object-fit: cover; }

@media (max-width: 991px) {
  .rb-split { grid-template-columns: 1fr; gap: 50px; padding-block: 70px 60px; }
  .rb-photo::after { inset: auto -20px -24px auto; }
  .rb-circles li { inline-size: 280px; block-size: 280px; padding-top: 36px; }
  .rb-circles h3 { font-size: 27px; }
}
@media (max-width: 600px) {
  .rb-eyebrow { font-size: 14px; }
  .rb-split p.rb-text { font-size: 14.5px; line-height: 1.9; }
  .rb-split br.rb-pc { display: none; }
  .rb-band { margin-inline: 0; padding-block: 56px 80px; }
  .rb-band::after { font-size: 34px; }
  .rb-circles { gap: 22px; }
  .rb-circles li { inline-size: min(78vw, 280px); block-size: min(78vw, 280px); padding: 34px 24px 24px; }
  .rb-gallery { padding-block: 70px 80px; }
  .rb-grid { grid-template-columns: 1fr; gap: 16px; }
}