/* ============================================================
   연구 · 품질 공통 스타일 (sourcing.html · rnd.html · quality.html)

   원칙
     · 브레드크럼 · 페이지 타이틀(.page-title 40px)은 홈페이지 결을 그대로 씀
     · 제목은 좌측정렬 우선
     · 칸 수 · 배치를 바꾸는 규칙은 @media (min-width: 1025px) 안에만 둠
       → 1024px 이하는 아래 "기본 모바일" 규칙을 씀

   body 에 붙는 표시값 (고정 — 바꾸지 않습니다)
     data-draft="1"   확정된 디자인
     data-steps="b"   수확과 가공 6단계 = 사진 카드 두 줄 (sourcing)
     data-farms="c"   글로벌 농장 = 지도 + 농장 카드 (sourcing)
   ============================================================ */

.r-body {
  --r-g: #2caf39;
  --r-gd: #17692a;
  --r-gl: #eaf6ec;
  --r-ink: #201d1d;
  --r-txt: #4a4a4a;
  --r-sub: #6b6b6b;
  --r-line: #e7e7e7;
  --r-soft: #f5f5f5;
  counter-reset: rsec;
}

/* 마지막 섹션(사진 띠)이 화면 끝까지 차므로 본문 아래 · 푸터 위 여백 없앰 */
.r-main { padding-bottom: 0; }
.r-body .site-footer { margin-top: 0; }

/* 줄바꿈 — r-br: PC 에서만 / r-mbr: 모바일에서만 */
.r-mbr { display: none; }

/* ============================================================
   1) 기본 = 1안
   ============================================================ */

/* ---------- 상단 소개 ---------- */
.r-lead {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: -0.02em;
  color: var(--r-txt);
  word-break: keep-all;
}


/* 대표 사진 */
.r-hero { margin-top: 56px; }
.r-hero__img { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 32 / 11; background: #e8efe6; }
.r-hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* 사진 위 카피 (품질 · 인증) — 왼쪽을 어둡게 깔고 로고 · 영문 제목 · 한 줄 설명 */
.r-hero__img--copy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 20, 14, 0.82) 0%, rgba(8, 20, 14, 0.6) 38%, rgba(8, 20, 14, 0) 72%);
  pointer-events: none;
}
.r-hero__copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(40px, 5vw, 88px);
  color: #fff;
}
.r-hero__copy .r-hero__logo { width: 132px; height: auto; object-fit: contain; }
.r-hero__ttl {
  margin-top: 28px;
  font-size: clamp(44px, 4.4vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.r-hero__ttl b { font-weight: 800; color: #6fd37a; }
.r-hero__desc {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  word-break: keep-all;
}
@media (max-width: 1024px) {
  .r-hero__img--copy::after { background: linear-gradient(0deg, rgba(8, 20, 14, 0.85) 0%, rgba(8, 20, 14, 0.5) 55%, rgba(8, 20, 14, 0.1) 100%); }
  .r-hero__copy { justify-content: flex-end; padding: 28px 24px; }
  .r-hero__copy .r-hero__logo { width: 96px; }
  .r-hero__ttl { margin-top: 19px; font-size: clamp(28px, 7.44vw, 32px); }
  .r-hero__desc { margin-top: 12px; font-size: clamp(14px, 3.9vw, 17px); }
}


/* ---------- 섹션 ---------- */
.r-sec { padding-top: 140px; counter-increment: rsec; }
.r-sec--tint,
.r-sec--dark { margin-top: 140px; padding: 120px 0; background: #f7f7f7; }   /* 아주 연한 그레이 (초록기 없음) */
.r-sec--dark { background: #f3f8f1; }
.r-sec--tint + .r-sec,
.r-sec--dark + .r-sec { padding-top: 140px; }
.r-sec--tint + .r-sec--tint,
.r-sec--tint + .r-sec--dark,
.r-sec--dark + .r-sec--tint { margin-top: 0; }

.r-eyebrow { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; color: var(--r-g); }
.r-h2 {
  margin-top: 14px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--r-ink);
  word-break: keep-all;
}
.r-h2 b { color: var(--r-g); font-weight: 700; }
.r-desc {
  margin-top: 20px;   /* 제목과 설명이 붙어 보이지 않게 */
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: -0.02em;
  color: var(--r-txt);
  word-break: keep-all;
}
.r-head + * { margin-top: 56px; }

/* 본문 — 섹션 설명(.r-desc)과 같은 20px 로 키움 */
.r-p { font-size: 20px; line-height: 1.8; letter-spacing: -0.02em; color: var(--r-txt); word-break: keep-all; }
.r-p + .r-p { margin-top: 20px; }
.r-sub { margin-top: 32px; font-size: 18px; font-weight: 700; color: var(--r-ink); }

.r-list { margin-top: 12px; list-style: none; }
.r-list li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid #ededed;
  font-size: 17px;
  line-height: 1.6;
  color: #333;
  word-break: keep-all;
}
.r-list li::before {
  content: "check_circle";
  position: absolute;
  left: 0;
  top: 15px;
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  line-height: 1;
  color: var(--r-g);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ---------- 주요 연구 영역 ----------
   기본 = 왼쪽에 아이콘 + 제목만 두 칸씩, 오른쪽에 큰 사진 하나
   사진 하나가 글 + 목록 높이를 모두 차지 */
.r-topics-wrap { margin-top: 64px; }
/* 소제목 아래 가로 선은 칸을 가로질러 한 줄로 — 항목 사이 선보다 아주 조금만 진하게 */
.r-topics-wrap .r-sub {
  margin-top: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #dcdcdc;
  font-size: 20px;
}
.r-topics { margin-top: 0; list-style: none; }
.r-topics__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "ico ttl";
  align-items: center;
  column-gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #ededed;
}
.r-topics__ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--r-gl);
  font-size: 24px;
  font-style: normal;
  color: var(--r-g);
}
.r-topics__no { display: none; }
.r-topics__ttl { grid-area: ttl; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--r-ink); word-break: keep-all; }
.r-topics__txt { display: none; }
@media (min-width: 1025px) {
  /* 목록은 두 칸씩, 사진 하나가 글 + 목록 높이를 모두 차지 */
  .r-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  /* 첫 줄(1 · 2번)은 소제목 아래 선과 겹치므로 위 선 없음 */
  .r-topics__item:nth-child(-n+2) { border-top: 0; }
  /* 사진이 왼쪽, 글 + 목록이 오른쪽 */
  .r-body #cap .container {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    column-gap: 72px;
  }
  /* 제목과 본문이 붙지 않게 */
  .r-body #cap .r-head { grid-column: 1 / -1; margin-bottom: 52px; }
  .r-body #cap .r-split { display: contents; }
  .r-body #cap .r-split__txt { grid-column: 2; grid-row: 2; align-self: start; }
  .r-body #cap .r-split__img {
    grid-column: 1;
    grid-row: 2 / 4;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
  .r-body #cap .r-topics-wrap { grid-column: 2; grid-row: 3; }
}
@media (max-width: 1024px) {
  .r-topics-wrap { margin-top: 48px; }
  .r-topics__item:first-child { border-top: 0; }
  .r-topics__item {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px 0;
  }
  .r-topics__ico { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
  .r-topics__ttl { font-size: clamp(17px, 4.6vw, 19px); }
}

/* ---------- 사진 + 글 (좌우) ---------- */
.r-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: stretch; }
.r-split__img { position: relative; min-height: 440px; border-radius: 28px; overflow: hidden; background: #e8efe6; }
.r-split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-split__txt { align-self: center; }
.r-split--rev .r-split__img { order: 2; }
/* 왼쪽 글(제목 포함) + 오른쪽 사진 — 제목이 사진 위쪽 선에서 시작 */
/* 사진 높이를 글 높이에 맞춤 → 글 맨 위 = 사진 위쪽 선, 글 맨 아래 = 사진 아래쪽 선 */
.r-split--lead .r-split__txt { align-self: start; }
.r-split--lead .r-split__img { min-height: 0; }
.r-split--lead .r-eyebrow { line-height: 1; }
.r-split--lead .r-p:last-child { margin-bottom: -0.4em; }   /* 마지막 줄 아래 줄간격 여백 제거 */
.r-split--lead .r-head + .r-p { margin-top: 36px; }
@media (min-width: 1025px) {
}

/* 강조 문구 — 지속가능경영 강조 문구와 같은 모양 */
.r-quote {
  position: relative;
  isolation: isolate;
  margin-top: 36px;
  padding: 34px 120px 34px 38px;
  border-radius: 22px;
  background: linear-gradient(120deg, #eaf6ec 0%, #d6efd8 100%);
  overflow: hidden;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--r-ink);
  word-break: keep-all;
}
.r-quote::after {
  content: "eco";
  position: absolute;
  right: -6px;
  bottom: -22px;
  z-index: -1;
  font-family: "Material Symbols Rounded";
  font-size: 150px;
  line-height: 1;
  color: rgba(44, 175, 57, 0.2);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.r-quote b { color: var(--r-g); font-weight: 700; }
.r-quote--wide { margin-top: 64px; }

/* ---------- 글로벌 농장 ---------- */
.r-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
.r-place { overflow: hidden; border-radius: 24px; background: #fff; }
.r-place__img { aspect-ratio: 4 / 3; overflow: hidden; background: #e8efe6; }
.r-place__img img { width: 100%; height: 100%; object-fit: cover; }
.r-place__body { padding: 30px 32px 34px; }
.r-place__loc { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--r-g); }
.r-place__loc .material-symbols-rounded { font-size: 19px; }
.r-place__ttl { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--r-ink); word-break: keep-all; }
.r-place__txt { margin-top: 12px; font-size: 18px; line-height: 1.7; color: var(--r-sub); word-break: keep-all; }

/* ---------- 글로벌 농장 — 지도 (body[data-farms="c"]) ----------
   world-dots.svg 는 경도 -180~180 · 위도 84~-56 전체 지도
   PC: 깜박이는 점 + 이름표, 마우스를 올리면 농장 카드(.r-fpop)가 지도 위에 뜸 · 아래 카드 목록은 숨김
   모바일: 호버가 없으므로 팝업 없이 아래 카드 목록을 그대로 보여줌
   핀 위치 --x = (경도+180)/360 · --y = (84-위도)/140 (캔버스 기준 백분율) */
.r-fmap,
.r-place__no { display: none; }
[data-farms="c"] .r-fmap { display: block; }
/* 지도가 숨겨진 A 에서도 설명~카드 간격 유지 (.r-head + * 규칙이 지도에 걸리므로) */
.r-fmap + .r-places { margin-top: 56px; }
[data-farms="c"] .r-fmap + .r-places { margin-top: 40px; }
[data-farms="c"] .r-place__no { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: var(--r-g); }
.r-fmap__frame { position: relative; padding: 24px 0; }
.r-fmap__canvas { position: relative; }
.r-fmap__canvas img { display: block; width: 100%; height: auto; }
.r-fmap__pins { position: absolute; inset: 0; list-style: none; }
.r-fpin { position: absolute; left: var(--x); top: var(--y); z-index: 1; }
.r-fpin.is-active { z-index: 3; }
/* 버튼은 크기 0 — 점 · 이름표가 버튼 안에 있어 둘 다 마우스 영역이 됨 */
.r-fpin__btn { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.r-fpin__btn:focus-visible { outline: none; }
.r-fpin__btn:focus-visible .r-fpin__tag { outline: 2px solid var(--r-gd); outline-offset: 2px; }
.r-fpin__dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--r-g);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
}
/* 슬쩍 퍼졌다 사라지는 깜박임 */
.r-fpin__dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(44, 175, 57, 0.3);
  opacity: 0;
}
/* 선택된 농장 지점만 깜박임 */
.r-fpin.is-active .r-fpin__dot::after { animation: rfpulse 2.2s ease-out infinite; }
@keyframes rfpulse {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .r-fpin.is-active .r-fpin__dot::after { animation: none; opacity: 0.5; } }
.r-fpin__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  font-size: 15px;
  font-weight: 700;
  color: var(--r-ink);
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.r-fpin__tag b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--r-gl); font-size: 12px; font-weight: 800; color: var(--r-g); transition: background 0.25s, color 0.25s; }
/* 텍사스 · 멕시코가 가까워 이름표 방향을 나눔 */
/* 이름표를 점 바로 위(tl) · 아래(br) 가운데에 두고 세로 연결선으로 잇기 */
.r-fpin--tl .r-fpin__tag { left: 0; bottom: 28px; transform: translateX(-50%); }
.r-fpin--br .r-fpin__tag { left: 0; top: 28px; transform: translateX(-50%); }
/* 이름표 — 회색 테두리는 회색 점 지도에 묻혀서 빼고, 그림자를 조금 진하게 해 지도 위로 떠 보이게 */
.r-fpin__tag { border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.14); }
.r-fpin__btn::before {
  content: "";
  position: absolute;
  left: -0.75px;
  width: 1.5px;
  height: 22px;
  background: #bdbdbd;   /* 선택 안 된 지점은 회색 연결선, 선택되면 진한 초록 */
  transition: background 0.25s;
}
.r-fpin--tl .r-fpin__btn::before { bottom: 6px; }
.r-fpin--br .r-fpin__btn::before { top: 6px; }
.r-fpin.is-active .r-fpin__btn::before { background: var(--r-g); }
/* 선택된 이름표 — 브랜드 연두(#2caf39) 바탕 + 흰 글씨 (선택 안 된 흰 이름표와 확실히 구분) */
.r-fpin.is-active .r-fpin__tag { background: var(--r-g); color: #fff; }
.r-fpin.is-active .r-fpin__tag b { background: #fff; color: var(--r-g); }

/* 왼쪽 지도 + 오른쪽 농장 정보 — 지점 · 막대를 누르면 바뀌고 5초마다 자동으로 넘어감 */
/* 지도 칸을 넓게 — 세계 지도는 가로로 길어 폭이 넓어야 높이가 카드와 비슷해짐 */
[data-farms="c"] .r-fmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 64px; align-items: center; }
/* 카드(콘텐츠)를 왼쪽, 지도를 오른쪽에 — 모바일은 아래 규칙에서 지도가 먼저 오도록 되돌림 */
[data-farms="c"] .r-fmap__side { grid-column: 1; grid-row: 1; }
[data-farms="c"] .r-fmap__frame { grid-column: 2; grid-row: 1; }
/* 높이 맞춤 — 지도 칸 위 = 카드 위, 진행 막대 아래 = 카드 아래 */
@media (min-width: 1025px) {
  [data-farms="c"] .r-fmap { align-items: stretch; }
  [data-farms="c"] .r-fmap__frame { display: flex; flex-direction: column; padding: 0; }
  [data-farms="c"] .r-fmap__ctrl { align-items: flex-end; margin-top: auto; padding-top: 24px; }
  /* 지도 윗선 = 카드 윗선 · 막대 아랫선 = 카드 아랫선 (지도를 가운데로 내리면 카드가 튀어나와 보임)
     남는 높이는 지도와 안내 문구 사이에 두고, 안내 문구는 막대 바로 위(가운데)에 붙임 */
  [data-farms="c"] .r-fmap__hint { margin-top: auto; padding-top: 16px; }
  [data-farms="c"] .r-fmap__hint + .r-fmap__ctrl { margin-top: 0; padding-top: 28px; }
  [data-farms="c"] .r-fmap__side,
  [data-farms="c"] .r-fmap__slides { height: 100%; }
  /* 지도 칸을 더 넓히고 카드 사진을 낮춰 두 칸의 자연 높이를 비슷하게 → 지도와 막대 사이가 휑하지 않게 */
  [data-farms="c"] .r-fmap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  /* 카드 전체를 사진으로 채우고, 아래쪽에 검은 그라데이션을 깔아 흰 글씨를 올림 */

}
/* 카드 3장을 같은 칸에 겹쳐 두고 선택된 것만 보이게 → 칸 높이는 가장 긴 카드 기준이라 넘길 때 흔들리지 않음 */
.r-fmap__slides { display: grid; touch-action: pan-y pinch-zoom; }   /* 세로 스크롤·손가락 확대는 브라우저에, 가로 밀기는 research.js 에 */
.r-fpop {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s, transform 0.45s, visibility 0.45s;
}
.r-fpop.is-show { opacity: 1; visibility: visible; transform: none; }
.r-fmap__ctrl { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.r-fmap__bars { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.r-fbar {
  position: relative;
  padding: 0 0 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  color: #9a9a9a;
  cursor: pointer;
  transition: color 0.2s;
}
.r-fbar b { margin-right: 6px; }
.r-fbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: #dfe3dd; }
.r-fbar__fill { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; border-radius: 3px; background: var(--r-g); }
.r-fbar:hover,
.r-fbar.is-active { color: var(--r-ink); }
.r-fbar.is-active b { color: var(--r-g); }
.r-fbar.is-active .r-fbar__fill { animation: rfbar 5s linear forwards; }
.r-fmap.is-paused .r-fbar.is-active .r-fbar__fill { animation-play-state: paused; }
@keyframes rfbar { from { width: 0; } to { width: 100%; } }
.r-fmap__play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #d9d9d9; border-radius: 50%; background: #fff; color: var(--r-ink); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.r-fmap__play:hover { border-color: var(--r-ink); background: var(--r-ink); color: #fff; }   /* 선만 진해지는 대신 면을 채움 */
.r-fmap__play .material-symbols-rounded { font-size: 22px; }
/* 떠 있는 카드는 높이가 정해지지 않아 사진의 height:100% 가 안 먹음 → 사진을 틀 안에 절대 위치로 채움 */
.r-fpop .r-place__img { position: relative; aspect-ratio: 16 / 9; }
.r-fpop .r-place__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 위치 · 제목 · 설명 사이를 넉넉하게 — 답답하지 않게 */
.r-fpop .r-place__body { padding: 32px 36px 36px; }
/* 농장 지도 — 섹션 배경 없이 흰 바탕, 카드만 아주 연한 그레이로 구분 */
/* 글로벌 농장은 A(카드) · B(지도) 모두 섹션 배경 없이 흰 바탕 */
.r-body #farms { margin-top: 0; padding: 140px 0 0; background: none; }
@media (max-width: 1920px) { .r-body #farms { padding-top: 120px; } }
@media (max-width: 1024px) { .r-body #farms { padding-top: 80px; } }
#farms .r-place { background: #f7f7f7; }
/* 수확과 가공 — 1안은 섹션 배경 없이 흰 바탕, 단계 카드만 연한 그레이 */
[data-draft="1"] #harvest { margin-top: 0; padding: 140px 0 0; background: none; }
[data-draft="1"] #harvest .r-step { background: #f5f5f5; }
/* 글이 짧아 좌우 배치하면 사진 옆이 휑함 → 다른 섹션처럼 제목 · 설명을 위에, 사진은 아래 넓게, 그 밑에 단계 카드 */
[data-draft="1"] #harvest .r-feature { display: block; }
[data-draft="1"] #harvest .r-feature__img { margin-top: 56px; aspect-ratio: 32 / 10; }
[data-draft="1"] #harvest .r-feature + .r-steps { margin-top: 56px; }
/* 단계 사진 — 1안 수확과 가공에서만 보임 */
.r-step__img { display: none; }
/* 순서가 보이게 — 번호 원을 가로선으로 잇고, 아래에 사진 · 제목 · 설명 (회색 카드 배경 없음) */
[data-draft="1"] #harvest .r-steps { gap: 24px; }
[data-draft="1"] #harvest .r-step { padding: 0; border-radius: 0; background: none; }
[data-draft="1"] #harvest .r-step__ico { display: none; }
[data-draft="1"] #harvest .r-step__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--r-g);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
/* 번호 원 오른쪽에서 다음 단계 번호 원까지 이어지는 선 */
[data-draft="1"] #harvest .r-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 56px;
  right: -12px;
  height: 2px;
  background: #cfe9d3;
}
[data-draft="1"] #harvest .r-step__img { display: block; margin-top: 20px; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #e8efe6; }
[data-draft="1"] #harvest .r-step__img img { width: 100%; height: 100%; object-fit: cover; }
[data-draft="1"] #harvest .r-step__ttl { margin-top: 18px; font-size: 20px; }
[data-draft="1"] #harvest .r-step__txt { margin-top: 8px; font-size: 18px; }
/* 수확과 가공 — 이어지는 사진 카드 (body[data-steps="b"]) */
[data-draft="1"][data-steps="b"] #harvest .r-steps { gap: 28px; }
[data-draft="1"][data-steps="b"] #harvest .r-step { position: relative; padding: 0 0 26px; border-radius: 20px; background: #f5f5f5; }
[data-draft="1"][data-steps="b"] #harvest .r-step:not(:last-child)::before { display: none; }
[data-draft="1"][data-steps="b"] #harvest .r-step__no { position: absolute; top: 12px; left: 12px; z-index: 2; width: 34px; height: 34px; font-size: 13px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
[data-draft="1"][data-steps="b"] #harvest .r-step__img { margin-top: 0; border-radius: 20px 20px 0 0; }
[data-draft="1"][data-steps="b"] #harvest .r-step__ttl { margin-top: 20px; padding: 0 22px; }
[data-draft="1"][data-steps="b"] #harvest .r-step__txt { padding: 0 22px; }
/* 카드 사이 화살표 — 사진 위에 걸쳐 지저분해 보여서 뺌 (순서는 01~06 번호로 충분) */
[data-draft="1"][data-steps="b"] #harvest .r-step::after { content: none !important; }
[data-draft="1"][data-steps="b"] #harvest .r-step:not(:last-child)::after {
  content: "arrow_forward";
  position: absolute;
  top: 50%;
  right: -32px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid #fff;   /* 흰 테두리로 사진 · 카드 위에서 또렷하게 */
  border-radius: 50%;
  background: var(--r-g);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  line-height: 1;
  color: #fff;
  transform: translateY(-50%);
}
/* B — 번호 배지를 사진에서 내려 제목 옆에, 아이콘도 함께: [아이콘][번호] 제목 */
[data-draft="1"][data-steps="b"] #harvest .r-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "img img img" "no ttl ico" "txt txt txt";
  align-items: center;
  align-content: start;   /* 옆 카드가 더 길어도 남는 높이를 아래로만 — 사진이 밀려 내려가지 않게 */
  column-gap: 10px;
}
[data-draft="1"][data-steps="b"] #harvest .r-step__img { grid-area: img; }
/* 번호는 원 없이 초록 글자로 제목 앞에, 아이콘은 제목 줄 오른쪽 끝에 */
/* 아이콘은 빼고, 번호는 초록 원 배경에 흰 숫자 */
[data-draft="1"][data-steps="b"] #harvest .r-step__ico { display: none !important; }
[data-draft="1"][data-steps="b"] #harvest .r-step__no { grid-area: no; position: static; display: grid; place-items: center; width: 32px; height: 32px; margin: 20px 0 0 22px; border-radius: 50%; background: var(--r-g); box-shadow: none; font-size: 13px; font-weight: 800; color: #fff; }
[data-draft="1"][data-steps="b"] #harvest .r-step__ttl { grid-area: ttl; padding: 0; }
[data-draft="1"][data-steps="b"] #harvest .r-step__txt { grid-area: txt; }
/* B 는 PC 에서도 3칸씩 두 줄 — 사진을 크게, 줄 끝 화살표는 숨김 */
@media (min-width: 1025px) {
  [data-draft="1"][data-steps="b"] #harvest .r-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__img { aspect-ratio: 16 / 9; }
  [data-draft="1"][data-steps="b"] #harvest .r-step:nth-child(3n)::after { display: none; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__ttl { margin-top: 32px; padding: 0 36px 0 0; font-size: 22px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step { padding-bottom: 40px; }
  /* 카드 안쪽 왼쪽 여백을 조금 넓혀 번호 · 설명을 살짝 오른쪽으로 */
  [data-draft="1"][data-steps="b"] #harvest .r-step__txt { margin-top: 14px; padding: 0 36px; font-size: 18px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__no { margin: 32px 0 0 36px; width: 36px; height: 36px; font-size: 14px; }
}

@media (max-width: 1024px) {
  [data-draft="1"][data-steps="b"] #harvest .r-step::after { display: none; }
  [data-draft="1"][data-steps="b"] #harvest .r-step { padding-bottom: 18px; border-radius: 14px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__img { border-radius: 14px 14px 0 0; }
  [data-draft="1"][data-steps="b"] #harvest .r-step { column-gap: 6px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__no { margin: 14px 0 0 14px; width: 26px; height: 26px; font-size: 11px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__ttl { padding: 0; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__txt { padding: 0 14px; }
}
/* 줄이 바뀌는 폭(3칸 · 2칸 · 1칸)에서는 줄 끝 선이 허공으로 나가므로 숨김 */
@media (min-width: 1025px) and (max-width: 1400px) {
  [data-draft="1"] #harvest .r-step:nth-child(3n)::before { display: none; }
}
@media (max-width: 1024px) {
  [data-draft="1"] #harvest .r-steps { gap: 28px 14px; margin-top: 32px; }
  [data-draft="1"] #harvest .r-step::before { display: none; }
  [data-draft="1"] #harvest .r-step__no { width: 36px; height: 36px; font-size: 13px; }
  [data-draft="1"] #harvest .r-step__img { margin-top: 14px; border-radius: 12px; }
  [data-draft="1"] #harvest .r-step__ttl { margin-top: 12px; font-size: 17px; }
  [data-draft="1"] #harvest .r-step__txt { font-size: 14.5px; }
}
@media (max-width: 1024px) {
  [data-draft="1"] #harvest .r-feature__img { margin-top: 32px; aspect-ratio: 4 / 3; }
  [data-draft="1"] #harvest .r-feature + .r-steps { margin-top: 12px; }
}
@media (max-width: 1920px) { [data-draft="1"] #harvest { padding-top: 120px; } }
@media (max-width: 1024px) { [data-draft="1"] #harvest { padding-top: 80px; } }
/* 번호는 지도 이름표 · 진행 막대에 이미 있으므로 카드에서는 뺌 */
[data-farms="c"] .r-fpop .r-place__no { display: none; }
.r-fpop .r-place__loc { font-size: 17px; }
.r-fpop .r-place__loc .material-symbols-rounded { font-size: 21px; }
.r-fpop .r-place__ttl { margin-top: 16px; font-size: 28px; line-height: 1.35; }
.r-fpop .r-place__txt { margin-top: 16px; font-size: 18px; line-height: 1.8; }
.r-fmap__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 16px; color: #8a8a8a; }
.r-fmap__hint .material-symbols-rounded { font-size: 20px; }
/* 카드는 오른쪽 농장 정보로 보여주므로 아래 목록은 숨김 */
[data-farms="c"] .r-fmap + .r-places { display: none; }
/* ---------- 카드 (원칙 · 성과 · 역할) ---------- */
.r-cards { display: grid; gap: 20px; list-style: none; }
.r-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-card { position: relative; display: flex; flex-direction: column; padding: 36px 32px 38px; border-radius: 24px; background: var(--r-soft); }
.r-sec--tint .r-card { background: #fff; }
.r-card__img { margin: -8px -8px 24px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #e8efe6; }
.r-card__img img { width: 100%; height: 100%; object-fit: cover; }
.r-card__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--r-gl);
  font-size: 30px;
  font-style: normal;
  color: var(--r-g);
}
.r-cards--img .r-card__ico { display: none; }
.r-card__no { margin-top: 24px; font-size: 15px; font-weight: 700; color: var(--r-g); }
.r-cards--img .r-card__no { margin-top: 0; }
.r-card__ttl { margin-top: 6px; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--r-ink); word-break: keep-all; }
/* 카드 본문 — 최소 18px (PC) */
.r-card__txt { margin-top: 12px; font-size: 18px; line-height: 1.7; color: var(--r-sub); word-break: keep-all; }
.r-cards--5 .r-card { padding: 30px 24px 32px; }
.r-cards--5 .r-card__ttl { font-size: 20px; }
.r-cards--5 .r-card__txt { font-size: 17px; }
.r-split + .r-cards { margin-top: 64px; }
/* 1안 — 번호 · 제목 · 설명을 위에, 아이콘은 원 없이 크게 회색으로 오른쪽 아래에 */
[data-draft="1"] .r-cards:not(.r-cards--img) .r-card { min-height: 300px; }
[data-draft="1"] .r-cards:not(.r-cards--img) .r-card__ico {
  order: 9;
  align-self: flex-end;
  width: auto;
  height: auto;
  margin-top: auto;
  padding-top: 24px;
  background: none;
  font-size: 64px;
  color: var(--r-g);   /* 아이콘만 브랜드 연두 */
  font-variation-settings: 'FILL' 0, 'wght' 250, 'GRAD' 0, 'opsz' 48;   /* 선을 살짝 얇게 */
}
[data-draft="1"] .r-cards:not(.r-cards--img) .r-card__no { order: 1; margin-top: 0; }
[data-draft="1"] .r-cards:not(.r-cards--img) .r-card__ttl { order: 2; }
[data-draft="1"] .r-cards:not(.r-cards--img) .r-card__txt { order: 3; }

/* ---------- 강조 블록 (수확 후 6시간) ---------- */
.r-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.r-feature__img { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: #e8efe6; }
.r-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.r-big { display: flex; align-items: flex-end; gap: 16px; margin-top: 36px; }
.r-big strong { font-size: 104px; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--r-g); }
.r-big span { padding-bottom: 6px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--r-ink); }

/* ---------- 단계 ---------- */
.r-steps { display: grid; gap: 16px; margin-top: 64px; list-style: none; }
.r-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-steps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.r-head + .r-steps { margin-top: 56px; }
.r-step { position: relative; display: flex; flex-direction: column; padding: 30px 24px 32px; border-radius: 20px; background: #fff; }
.r-step__ico { font-size: 32px; font-style: normal; color: var(--r-g); }
.r-step__no { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--r-g); }
.r-step__ttl { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--r-ink); word-break: keep-all; }
.r-step__txt { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--r-sub); word-break: keep-all; }

/* ---------- 연결 구조 ---------- */
.r-flow { display: flex; flex-wrap: wrap; gap: 14px 44px; list-style: none; }
.r-flow li {
  position: relative;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--r-soft);
  font-size: 17px;
  font-weight: 700;
  color: var(--r-ink);
  white-space: nowrap;
}
.r-flow li:not(:last-child)::after {
  content: "arrow_forward";
  position: absolute;
  top: 50%;
  right: -34px;
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #b5b5b5;
  transform: translateY(-50%);
}
.r-flow li.is-end { background: var(--r-g); color: #fff; }
.r-flow + .r-cards { margin-top: 40px; }

/* 1안 — 연결 구조를 타임라인으로: 가는 회색 선 위 초록 점, 점 아래 단계 이름 (마지막 '고객'만 크게 강조) */
[data-draft="1"] .r-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding-top: 40px;
}
[data-draft="1"] .r-flow::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: #cfcfcf; }
[data-draft="1"] .r-flow li {
  padding: 0 12px 0 0;
  border-radius: 0;
  background: none;
  font-size: 20px;
  font-weight: 700;
  color: var(--r-ink);
  white-space: normal;
}
[data-draft="1"] .r-flow li:not(:last-child)::after {
  content: "";
  top: -40px;
  right: auto;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--r-g);
  transform: none;
}
[data-draft="1"] .r-flow li.is-end { background: none; color: var(--r-g); }
[data-draft="1"] .r-flow li.is-end::after {
  content: "";
  position: absolute;
  top: -44px;
  left: -4px;
  width: 21px;
  height: 21px;
  border: 4px solid #d6f0da;
  border-radius: 50%;
  background: var(--r-g);
}
[data-draft="1"] .r-flow + .r-cards { margin-top: 48px; }
/* 1안 생산 시스템 — 판 · 박스 없이 정리
   · 타임라인: 6단계를 폭 전체에 고르게, 점은 각 이름 가운데 위, 선은 첫 점~마지막 점까지만
   · 역할 카드: 지속가능경영 '주요 활동'과 같은 모양 (사진 → 번호 → 제목 → 설명, 배경 상자 없음) */
@media (min-width: 1025px) {
  [data-draft="1"] .r-sys .r-flow { padding-top: 36px; }
  [data-draft="1"] .r-sys .r-flow::before { left: calc(100% / 12); right: calc(100% / 12); top: 6px; background: #d9d9d9; }
  [data-draft="1"] .r-sys .r-flow li { padding: 0 6px; text-align: center; }
  [data-draft="1"] .r-sys .r-flow li:not(:last-child)::after { left: 50%; top: -36px; transform: translateX(-50%); }
  [data-draft="1"] .r-sys .r-flow li.is-end::after { left: 50%; top: -40px; transform: translateX(-50%); }
}
[data-draft="1"] .r-sys .r-flow + .r-cards { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--r-line); }
[data-draft="1"] .r-sys .r-cards { gap: 28px; }
[data-draft="1"] .r-sys .r-card { padding: 0; border-radius: 0; background: none; }
[data-draft="1"] .r-sys .r-card__img { margin: 0 0 24px; border-radius: 22px; aspect-ratio: 4 / 3; }
/* 번호는 위 흐름 막대에 단계가 이미 있으므로 카드에서는 뺌 */
[data-draft="1"] .r-sys .r-card__no { display: none; }
[data-draft="1"] .r-sys .r-card__ttl { margin-top: 8px; font-size: 24px; }
@media (max-width: 1024px) {
  [data-draft="1"] .r-sys .r-flow + .r-cards { margin-top: 32px; padding-top: 32px; }
  [data-draft="1"] .r-sys .r-cards { gap: 24px 14px; }
  [data-draft="1"] .r-sys .r-card__img { margin-bottom: 14px; border-radius: 14px; }
  [data-draft="1"] .r-sys .r-card__ttl { font-size: 18px; }
}
@media (max-width: 1024px) {
  [data-draft="1"] .r-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; padding-top: 0; }
  [data-draft="1"] .r-flow::before,
  [data-draft="1"] .r-flow li::after { display: none; }
  [data-draft="1"] .r-flow li { font-size: 16px; }
}

/* ---------- 연혁 ---------- */
.r-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
.r-tl__item { position: relative; display: flex; flex-direction: column; padding: 34px 32px 36px; border-radius: 24px; background: #fff; }
.r-tl__year { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--r-g); }
.r-tl__img { margin: 24px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: #e8efe6; }
.r-tl__img img { width: 100%; height: 100%; object-fit: cover; }
.r-tl__ttl { font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--r-ink); }
.r-tl__txt { margin-top: 10px; font-size: 18px; line-height: 1.7; color: var(--r-sub); word-break: keep-all; }

/* ---------- 수치 (지속가능경영 페이지 숫자 블록과 같은 결) ---------- */
/* 항목은 같은 너비로 나누고, 세로 구분선은 칸 사이 여백 한가운데에 — 간격이 모두 같아짐 */
.r-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 96px;
  margin-top: 40px;
  padding: 32px 0 0;   /* 첫 항목은 본문 왼쪽 선에 맞춤 */
  border-top: 1px solid var(--r-line);
  list-style: none;
}
.r-stat { position: relative; }
.r-stat + .r-stat::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--r-line);
}
.r-stat__label { font-size: 16px; font-weight: 600; color: var(--r-sub); word-break: keep-all; }
.r-stat__num {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--r-ink);
  white-space: nowrap;
}
.r-stat__num small { margin-left: 5px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.r-stat__desc { margin-top: 10px; font-size: 18px; line-height: 1.6; color: var(--r-sub); word-break: keep-all; }
/* 출처 메모 — 수치 오른쪽 끝에 맞춤 */
.r-note { margin-top: 16px; font-size: 15px; color: #8a8a8a; text-align: right; }
@media (max-width: 1024px) {
  .r-stats { margin-top: 32px; padding-top: 26px; }
  .r-stat { padding: 0 0 0 20px; }
  .r-stat__label { font-size: clamp(14px, 3.8vw, 17px); }
  .r-stat__num { font-size: clamp(32px, 8.5vw, 44px); }
  .r-stat__num small { font-size: clamp(15px, 4vw, 19px); }
  .r-stat__desc { font-size: clamp(14px, 3.8vw, 16px); }
}

/* ---------- 목록 보드 (특허 · 인증서) ---------- */
.r-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.r-filter__btn {
  /* 높이 · 모서리는 사이트 공통값 (styles.css 의 --ctl-h / --r-sm) */
  height: var(--ctl-h);
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: #f2f2f2;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.r-filter__btn:hover { background: #e8e8e8; color: var(--r-ink); }
.r-filter__btn[aria-pressed="true"] { background: var(--r-ink); color: #fff; }

.r-table-wrap { margin-top: 40px; overflow-x: auto; }   /* 분류 버튼과 표 사이 여백 */
.r-table { width: 100%; min-width: 880px; border-collapse: collapse; border-top: 2px solid var(--r-ink); font-size: 16px; text-align: left; }
.r-table th, .r-table td { padding: 20px 18px; border-bottom: 1px solid var(--r-line); vertical-align: middle; line-height: 1.55; }
.r-table thead th { background: #fafafa; font-size: 15px; font-weight: 700; color: var(--r-ink); white-space: nowrap; }
.r-table tbody th { font-size: 17px; font-weight: 600; color: var(--r-ink); }
.r-table td { color: var(--r-txt); }
.r-table tr[hidden] { display: none; }

.r-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff3d6;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  color: #b7791f;
}
.r-empty { margin-top: 20px; padding: 48px 20px; border-radius: 16px; background: var(--r-soft); text-align: center; font-size: 16px; color: var(--r-sub); }

/* ---------- 제품 품질 정보 카드 ---------- */
.r-spec__panel { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; padding: 40px; border-radius: 24px; background: var(--r-soft); }
.r-spec__img { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; }
.r-spec__img img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.r-spec__tag { font-size: 15px; font-weight: 700; color: var(--r-sub); }
.r-spec__tag .r-tag { margin: 0 6px 0 0; }
.r-spec__ttl { margin-top: 8px; font-size: 28px; font-weight: 700; color: var(--r-ink); }
.r-spec__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 20px; }
.r-spec__list > div { padding: 14px 0; border-top: 1px solid #e2e2e2; }
.r-spec__list dt { font-size: 14px; font-weight: 700; color: var(--r-sub); }
.r-spec__list dd { margin-top: 2px; font-size: 17px; font-weight: 600; color: var(--r-ink); }

/* ---------- 기업 인증 ---------- */
.r-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.r-badge { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; align-items: start; padding: 40px; border-radius: 24px; background: #fff; }
.r-badge__img { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 20px; overflow: hidden; background: var(--r-gl); }
.r-badge__img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.r-badge__img--text span, .r-cert__img--text span { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--r-g); }
.r-badge__tag { font-size: 15px; font-weight: 700; color: var(--r-g); }
.r-badge__ttl { margin-top: 6px; margin-bottom: 14px; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--r-ink); word-break: keep-all; }
.r-badge .r-p { font-size: 17px; }
.r-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; }
.r-chips li { padding: 8px 14px; border-radius: 999px; background: var(--r-gl); font-size: 15px; font-weight: 600; color: var(--r-gd); }
.r-chips b { margin-right: 4px; font-weight: 800; }

/* ---------- 인증서 갤러리 ---------- */
.r-certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; list-style: none; }
.r-cert { overflow: hidden; border-radius: 24px; background: var(--r-soft); }
.r-cert[hidden] { display: none; }
.r-cert__img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; }
.r-cert__img img { width: 70%; height: 70%; object-fit: contain; }
.r-cert__img--text span { font-size: 56px; }
.r-cert__body { padding: 26px 28px 30px; }
.r-cert__cat { font-size: 14px; font-weight: 700; color: var(--r-g); }
.r-cert__ttl { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--r-ink); }
.r-cert__list { margin-top: 14px; }
.r-cert__list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #e2e2e2; font-size: 15px; }
.r-cert__list dt { flex: none; color: var(--r-sub); }
.r-cert__list dd { font-weight: 600; text-align: right; color: var(--r-ink); }

/* ---------- 마무리 사진 띠 ---------- */
.r-closing { position: relative; isolation: isolate; margin-top: 140px; padding: 120px 0; overflow: hidden; color: #fff; }
.r-closing__bg { position: absolute; inset: 0; z-index: -1; }
.r-closing__bg img { width: 100%; height: 100%; object-fit: cover; }
.r-closing__bg::after { content: ""; position: absolute; inset: 0; background: rgba(8, 20, 12, 0.5); }
.r-closing__ttl { font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; word-break: keep-all; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.r-closing__txt { max-width: 780px; margin-top: 14px; font-size: 20px; line-height: 1.8; color: rgba(255, 255, 255, 0.95); word-break: keep-all; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.r-closing__txt--wide { max-width: 960px; }   /* 한 문장씩 줄바꿈한 긴 문단 — 문장 중간에서 끊기지 않게 */

/* ---------- 스크롤 등장 ---------- */
.js-rv .rv { opacity: 0; transform: translateY(48px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js-rv .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv { opacity: 1; transform: none; transition: none; }
}




/* ============================================================
   반응형 — 1920 이하
   ============================================================ */
@media (max-width: 1920px) {
  .r-sec { padding-top: 120px; }
  .r-sec--tint, .r-sec--dark { margin-top: 120px; padding: 100px 0; }
  .r-sec--tint + .r-sec, .r-sec--dark + .r-sec { padding-top: 120px; }
  .r-closing { margin-top: 120px; padding: 100px 0; }
  .r-split { gap: 64px; }
  .r-feature { gap: 64px; }
}

/* 좁은 PC (1025~1400) — 6칸 단계는 3칸씩 두 줄 */
@media (min-width: 1025px) and (max-width: 1400px) {
  .r-steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .r-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============================================================
   반응형 — 1024 이하 (모바일)
   ============================================================ */
@media (max-width: 1024px) {
  .r-br { display: none; }
  .r-mbr { display: inline; }

  .r-lead { margin-top: 12px; font-size: clamp(16px, 4.2vw, 20px); }
  .r-subnav,
  [data-draft] .r-subnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .r-subnav a,
  [data-draft] .r-subnav a { min-width: 0; height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: #f2f2f2; box-shadow: none; font-size: clamp(13px, 3.9vw, 16px); color: #555; }
  .r-subnav a.is-active,
  [data-draft] .r-subnav a.is-active { background: var(--r-ink); color: #fff; }

  .r-hero,
  [data-draft] .r-hero { margin-top: 32px; }
  [data-draft] .r-hero__img { height: auto; aspect-ratio: 4 / 3; }   /* 모바일 라운드는 아래 .r-hero__img 규칙(18px)을 따릅니다 */
  .r-hero__img { border-radius: 18px; aspect-ratio: 4 / 3; }
  .r-hero__img { border-radius: 18px; }


  .r-sec { padding-top: 80px; }
  .r-sec--tint, .r-sec--dark { margin-top: 80px; padding: 64px 0; }
  .r-sec--tint + .r-sec, .r-sec--dark + .r-sec { padding-top: 80px; }

  .r-eyebrow { font-size: 15px; }
  /* 모바일에서는 페이지 제목(.r-hero__ttl, 30~44px)보다 한 단계 작아야
     제목과 소제목이 구분됩니다. 전에는 28~40px 이라 거의 같은 크기였습니다. */
  .r-h2 { font-size: clamp(25.5px, 6.1vw, 28px); }
  .r-desc { margin-top: 12px; font-size: clamp(16px, 4.2vw, 20px); }
  .r-head + * { margin-top: 32px; }
  .r-p { font-size: clamp(15.5px, 4.1vw, 17px); }

  .r-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .r-split__img { min-height: 0; aspect-ratio: 4 / 3; border-radius: 18px; }
  .r-split--rev .r-split__img { order: 0; }
  .r-quote { margin-top: 28px; padding: 24px 90px 24px 24px; border-radius: 16px; font-size: clamp(18px, 4.8vw, 22px); }
  .r-quote::after { font-size: 110px; }

  .r-places { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .r-place__body { padding: 24px 22px 26px; }
  .r-place__ttl { font-size: clamp(19px, 5vw, 22px); }
  .r-place__txt { font-size: clamp(15px, 4vw, 16.5px); }
  /* 농장 지도 — 모바일은 틀을 조금 더 높게, 이름표를 작게 */
  .r-fmap + .r-places { margin-top: 32px; }
  [data-farms="c"] .r-fmap + .r-places { margin-top: 24px; }
  .r-fmap__frame { padding: 8px 0; }
  /* 모바일은 지도 위 · 농장 정보 아래로 쌓음 */
  [data-farms="c"] .r-fmap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-farms="c"] .r-fmap__side,
  [data-farms="c"] .r-fmap__frame { grid-column: 1; grid-row: auto; }
  .r-fmap__hint { margin-top: 4px; font-size: 13px; }
  .r-fmap__ctrl { gap: 10px; margin-top: 14px; }
  .r-fmap__bars { gap: 8px; }
  .r-fbar { font-size: 12px; }
  .r-fbar b { display: block; margin: 0 0 2px; }
  .r-fmap__play { width: 36px; height: 36px; }
  .r-fpin__tag { gap: 4px; padding: 3px 9px 3px 3px; font-size: 11px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
  .r-fpin__tag b { width: 18px; height: 18px; font-size: 9px; }
  .r-fpin__dot { width: 10px; height: 10px; border-width: 2px; }
  .r-fpin__dot::after { inset: -6px; }
  .r-fpin--tl .r-fpin__tag { bottom: 16px; }
  .r-fpin--br .r-fpin__tag { top: 16px; }
  .r-fpin__btn::before { height: 12px; }
  .r-fpin--tl .r-fpin__btn::before { bottom: 4px; }
  .r-fpin--br .r-fpin__btn::before { top: 4px; }
  [data-farms="c"] .r-place__no { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--r-g); }

  .r-cards--3, .r-cards--4, .r-cards--5 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .r-cards--img { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-card { padding: 26px 22px 28px; border-radius: 18px; }
  .r-card__ico { width: 48px; height: 48px; font-size: 26px; }
  [data-draft="1"] .r-cards:not(.r-cards--img) .r-card { min-height: 0; }
  [data-draft="1"] .r-cards:not(.r-cards--img) .r-card__ico { width: auto; height: auto; padding-top: 12px; font-size: 44px; }
  .r-card__no { margin-top: 16px; }
  .r-card__ttl, .r-cards--5 .r-card__ttl { font-size: clamp(18px, 4.8vw, 21px); }
  .r-card__txt, .r-cards--5 .r-card__txt { font-size: clamp(15px, 4vw, 16px); }
  .r-cards--img .r-card { padding: 18px 16px 20px; }
  .r-cards--img .r-card__img { margin: -4px -4px 16px; border-radius: 12px; }
  .r-cards--img .r-card__txt { font-size: 14.5px; }

  .r-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .r-feature__img { border-radius: 18px; }
  .r-big strong { font-size: 76px; }
  .r-big span { font-size: 16px; }

  .r-steps--5, .r-steps--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
  .r-step { padding: 22px 18px 24px; border-radius: 16px; }
  .r-step__ttl { font-size: clamp(17px, 4.6vw, 19px); }
  .r-step__txt { font-size: clamp(14px, 3.8vw, 15px); }

  .r-flow { gap: 10px 30px; }
  .r-flow li { padding: 10px 16px; font-size: 15px; }
  .r-flow li:not(:last-child)::after { right: -26px; font-size: 18px; }

  .r-tl { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .r-tl__item { padding: 26px 22px 28px; border-radius: 18px; }
  .r-tl__year { font-size: 40px; }
  .r-tl__ttl { font-size: clamp(18px, 4.8vw, 21px); }
  .r-tl__txt { font-size: clamp(15px, 4vw, 16px); }


  .r-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: transparent; }
  .r-filter__btn { padding: 0 16px; font-size: 14.5px; }
  .r-table { font-size: 15px; }
  .r-table th, .r-table td { padding: 14px 12px; }

  .r-spec__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 22px; }
  .r-spec__img { max-width: 240px; }
  .r-spec__ttl { font-size: 22px; }
  .r-spec__list { grid-template-columns: minmax(0, 1fr); }

  .r-badges { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .r-badge { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 22px; }
  .r-badge__img { width: 96px; height: 96px; border-radius: 16px; }
  .r-badge__img--text span { font-size: 26px; }
  .r-badge__ttl { font-size: clamp(19px, 5vw, 22px); }

  .r-certs { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .r-closing { margin-top: 80px; padding: 72px 0; }
  .r-closing__ttl { font-size: clamp(25px, 6.4vw, 34px); }
  .r-closing__txt { margin-top: 10px; font-size: clamp(15px, 4vw, 18px); }
}

@media (max-width: 480px) {
  .r-cards--img { grid-template-columns: minmax(0, 1fr); }
  .r-steps--5, .r-steps--6 { grid-template-columns: minmax(0, 1fr); }
}



/* ============================================================
   1안 생산 시스템 — 연결 구조 흐름 막대 + 역할 카드 4개
   · 위: 6단계 흐름을 연회색 알약 막대 한 줄로 (단계 사이 화살표)
   · 아래: 역할 카드 4개 — 카드마다 맡은 단계를 초록 꼬리표로 붙여
     "6단계 흐름 ↔ 4개 역할"이 서로 어느 부분인지 이어지게 함
   ============================================================ */
@media (min-width: 1025px) {
  /* 흐름 막대 — 왼쪽에 묶는 문구, 세로선 뒤에 6단계 */
  [data-draft="1"] .r-sys .r-flowbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 26px 70px;   /* 막대 좌우 여백 = 세로선 양옆 여백 (70px) */
    border-radius: 999px;
    background: #f5f5f5;
  }
  [data-draft="1"] .r-sys .r-flow__label {
    display: block;
    flex: none;
    margin: 0 70px 0 0;
    padding-right: 70px;
    border-right: 1px solid #dcdcdc;
    font-size: 18px;
    font-weight: 700;
    color: var(--r-g);
    white-space: nowrap;
  }
  [data-draft="1"] .r-sys .r-flow {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  [data-draft="1"] .r-sys .r-flow::before { content: none; }
  /* 단계를 같은 폭으로 나눠 막대 끝에서 끝까지 (첫 단계는 왼쪽 끝, 마지막은 오른쪽 끝)
     화살표는 칸 경계 = 두 글자 사이 한가운데 */
  /* 글자와 화살표를 같은 항목으로 펼침 (li 를 display:contents 로 만들어 글자 · 화살표가 각각 한 칸)
     → 글자–화살표–글자 간격이 모두 같고, 첫 단계는 왼쪽 끝 · 마지막은 오른쪽 끝 */
  [data-draft="1"] .r-sys .r-flow { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0; font-size: 18px; }
  [data-draft="1"] .r-sys .r-flow li { display: contents; font-size: 18px; font-weight: 700; white-space: nowrap; }
  [data-draft="1"] .r-sys .r-flow li:not(:last-child)::after {
    content: "arrow_forward";
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    border-radius: 0;
    background: none;
    transform: none;
    font-family: "Material Symbols Rounded";
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #b5b5b5;
  }
  [data-draft="1"] .r-sys .r-flow li.is-end::after { content: none; }
  /* 마지막 '고객'도 다른 단계와 같은 색 */
  [data-draft="1"] .r-sys .r-flow li.is-end { color: var(--r-ink); }
  /* 흐름 막대 묶는 제목 */
  [data-draft="1"] .r-sys .r-flowbar + .r-cards { margin-top: 56px; padding-top: 0; border-top: 0; }
}
/* 흐름 막대 앞머리 글(원료부터 고객까지)은 PC 에서만 */
.r-flow__label { display: none; }

/* 사진 + 글 좌우 배치 — 사진 높이를 글 높이에 맞춰 위아래 선을 맞춤 */
.r-body .r-split__img { min-height: 0; }
.r-body .r-split__txt { align-self: stretch; }

/* 강조 문구 — 배경 상자 없이 굵은 글 한 덩어리로 (본문 위에 얹힘) */
.r-body .r-quote {
  margin: 0 0 28px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--r-ink);
}
.r-body .r-quote::after { content: none; }
/* 강조 부분도 초록 없이 본문과 같은 검정으로 */
.r-body .r-quote b { color: inherit; }
.r-body .r-quote--wide { margin: 0 0 40px; }
@media (max-width: 1024px) {
  .r-body .r-quote { margin-bottom: 20px; font-size: clamp(20px, 5.4vw, 24px); }
}


/* ============================================================
   섹션 배경색 없애기
   · 연한 배경 · 초록 배경 섹션을 흰 바탕으로
   · 배경 위에 얹혀 있던 흰 카드는 연회색으로 바꿔 구분이 유지되게
   ============================================================ */
.r-body .r-sec--tint,
.r-body .r-sec--dark {
  margin-top: 0;
  padding: 140px 0 0;
  background: none;
}
.r-body .r-sec--tint .r-card,
.r-body .r-sec--dark .r-card,
.r-body .r-sec--tint .r-step,
.r-body .r-sec--dark .r-step,
.r-body .r-sec--tint .r-place,
.r-body .r-sec--tint .r-tl__item,
.r-body .r-sec--tint .r-badge,
.r-body .r-sec--tint .r-cert { background: #f5f5f5; }
@media (max-width: 1920px) {
  .r-body .r-sec--tint,
  .r-body .r-sec--dark { padding-top: 120px; }
}
@media (max-width: 1024px) {
  .r-body .r-sec--tint,
  .r-body .r-sec--dark { padding-top: 80px; }
}


/* ============================================================
   마무리 사진 — 지속가능경영 페이지 엔딩과 똑같이
   화면 끝까지 차지 않고 본문 폭(.container 안쪽)에 맞춘 둥근 사진 상자
   · 상자 폭 = 컨테이너 폭 − 좌우 여백, 글은 상자 안쪽 72px 에서 시작
   · 아래 흰 여백 뒤 푸터
   ============================================================ */
.r-body .r-closing {
  width: calc(100% - 64px);
  max-width: calc(var(--max) - 64px);
  margin: 140px auto 140px;
  padding: 110px 0;
  border-radius: 28px;
}
.r-body .r-closing > .container { max-width: none; padding: 0 72px; }
.r-body .r-closing__bg::after {
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 100%),
    rgba(8, 20, 12, 0.48);
}
@media (max-width: 1920px) {
  .r-body .r-closing { margin: 120px auto 120px; padding: 96px 0; }
  .r-body .r-closing > .container { padding: 0 64px; }
}
@media (max-width: 1024px) {
  .r-body .r-closing { width: calc(100% - 2 * clamp(28px, 4vw, 48px)); margin: 80px auto 80px; padding: 56px 0; border-radius: 18px; }
  .r-body .r-closing > .container { padding: 0 24px; }
}
@media (max-width: 400px) {
  .r-body .r-closing { width: calc(100% - 48px); }
}


/* ============================================================
   본문 글자 기준 (PC · 노트북)
   · 본문 최소 18px · 굵기 500
   · 20px 인 본문(.r-p · .r-desc · .r-lead · 마무리 문구)은 크기 유지, 굵기만 500
   · 작은 라벨(분류 · 태그 · 칩 · 출처 메모)은 본문이 아니라서 제외
   ============================================================ */
@media (min-width: 1025px) {
  .r-body :is(
    .r-list li,
    .r-place__txt,
    .r-card__txt,
    .r-step__txt,
    .r-tl__txt,
    :is(.r-stat__label, .r-stat__desc),
    .r-table th,
    .r-table td,
    .r-spec__list dd,
    .r-badge .r-p,
    .r-cert__list > div,
    .r-empty,
    .r-fmap__hint
  ) { font-size: 18px !important; }

  .r-body :is(
    .r-p,
    .r-desc,
    .r-lead,
    .r-list li,
    .r-place__txt,
    .r-card__txt,
    .r-step__txt,
    .r-tl__txt,
    :is(.r-stat__label, .r-stat__desc),
    .r-table td,
    .r-spec__list dd,
    .r-cert__list dd,
    .r-empty,
    .r-closing__txt,
    .r-fmap__hint
  ) { font-weight: 500 !important; }
}


/* ============================================================
   단계 카드(연구개발 과정 · 검증 과정)를 성과 카드와 같은 레이아웃으로
   · 번호 · 제목 · 설명이 위, 아이콘은 오른쪽 아래
   · 아이콘은 원 없이 오른쪽 아래에 크게
   · 수확 단계(#harvest)는 사진 카드라 제외
   ============================================================ */
.r-body #process .r-step {
  min-height: 280px;
  padding: 30px 26px 30px;
}
.r-body #process .r-step__no { order: 1; margin-top: 0; font-size: 15px; }
.r-body #process .r-step__ttl { order: 2; margin-top: 6px; }
.r-body #process .r-step__txt { order: 3; margin-top: 12px; margin-bottom: 24px; }
.r-body #process .r-step__ico {
  order: 9;
  align-self: flex-end;
  width: auto;
  height: auto;
  margin-top: auto;
  background: none;
  font-size: 56px;
  color: var(--r-g);
  font-variation-settings: 'FILL' 0, 'wght' 250, 'GRAD' 0, 'opsz' 48;
}
[data-draft="1"] .r-cards:not(.r-cards--img) .r-card__txt { margin-bottom: 24px; }
@media (max-width: 1024px) {
  .r-body #process .r-step { min-height: 0; padding: 22px 18px 24px; }
  .r-body #process .r-step__txt { margin-bottom: 16px; }
  .r-body #process .r-step__ico { font-size: 40px; }
}


/* ============================================================
   연구의 시작 타임라인 — 회색 상자 · 구분선 없이
   · 사진 → [연도 알약 + 제목] → 설명 순서
   ============================================================ */
.r-body #history .r-tl { gap: 40px; }
.r-body #history .r-tl__item {
  padding: 0;
  border-top: 0;
  border-radius: 0;
  background: none;
}
.r-body #history .r-tl__img { order: 1; margin: 0 0 22px; border-radius: 16px; }
/* 연도 + 제목은 한 줄에 — 연도는 초록 알약(흰 글씨), 제목은 검정 */
.r-body #history .r-tl__head { order: 2; display: flex; align-items: center; gap: 12px; }
.r-body #history .r-tl__txt { order: 3; margin-top: 14px; }
.r-body #history .r-tl__year {
  flex: none;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--r-g);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  color: #fff;
}
.r-body #history .r-tl__ttl { margin: 0; font-size: 20px; }
@media (max-width: 1024px) {
  .r-body #history .r-tl { gap: 28px; }
  .r-body #history .r-tl__img { margin-bottom: 18px; }
  .r-body #history .r-tl__head { gap: 10px; }
  .r-body #history .r-tl__year { padding: 2px 12px; font-size: 15px; }
  .r-body #history .r-tl__ttl { font-size: clamp(17px, 4.6vw, 19px); }
}

/* ============================================================
   제품별 품질 정보 카드 · 인증 소개(CCM · 가족친화) — 배경 상자 없이
   · 회색 판은 빼고, 사진 · 로고 칸에만 연한 면을 남김
   · 인증 소개는 위쪽 가는 선으로 구분
   ============================================================ */
.r-body .r-spec__panel { align-items: stretch; padding: 0; border-radius: 0; background: none; }
@media (min-width: 1025px) {
  .r-body .r-spec__panel { grid-template-columns: 400px minmax(0, 1fr); }   /* 사진 칸 340 → 400 */
}
/* 사진 위 · 아래를 제목 윗선 · 표 아랫선에 맞춤 (사진 높이 = 오른쪽 글 높이) */
@media (min-width: 1025px) {
  .r-body .r-spec__img { position: relative; aspect-ratio: auto; height: 100%; }
  .r-body .r-spec__img img { position: absolute; inset: 0; }   /* 사진 원래 크기가 칸 높이를 늘리지 않게 */
  .r-body .r-spec__ttl { margin-top: 0; line-height: 1.2; }
  .r-body .r-spec__list { margin-top: 32px; }
}
.r-body .r-spec__img { background: var(--r-soft); }
/* 제품 사진은 네모 칸을 꽉 채움 (예전 동그란 아이콘 이미지용 안쪽 여백 없앰) */
.r-body .r-spec__img img { padding: 0; object-fit: cover; }
/* 항목 목록은 특허 표와 같은 결 — 검정 윗선 · 연회색 항목 칸 · 가는 행 구분선 */
.r-body .r-spec__list {
  column-gap: 0;
  margin-top: 24px;
  border-top: 2px solid var(--r-ink);
}
.r-body .r-spec__list > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--r-line);
}
/* 항목 수가 홀수면 마지막 줄은 두 칸을 모두 차지 (빈 칸이 생기지 않게) */
.r-body .r-spec__list > div:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 200px minmax(0, 1fr); }
.r-body .r-spec__list dt {
  display: flex;
  align-items: center;
  padding: 26px 8px 26px 24px;   /* 왼쪽만 넉넉히 — 오른쪽은 글이 한 줄에 들어가도록 좁게 */
  background: #fafafa;
  font-size: 18px;
  font-weight: 700;
  color: var(--r-ink);
  white-space: nowrap;   /* 항목 이름이 중간에 끊기지 않게 */
}
.r-body .r-spec__list dd {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 26px 8px 26px 24px;   /* 왼쪽만 넉넉히 — 오른쪽은 글이 한 줄에 들어가도록 좁게 */
  font-size: 18px !important;   /* 항목 이름과 같은 크기 */
  word-break: keep-all;
  font-weight: 500;
  line-height: 1.55;
  color: var(--r-txt);
}
.r-body .r-badges { column-gap: 64px; }
.r-body .r-sec .r-badge {
  padding: 0;
  border-top: 0;
  border-radius: 0;
  background: none;
}
@media (max-width: 1024px) {
  .r-body .r-spec__list > div,
  .r-body .r-spec__list > div:last-child:nth-child(odd) { grid-template-columns: 112px minmax(0, 1fr); }
  .r-body .r-spec__list :is(dt, dd) { padding: 14px 12px; }
  .r-body .r-spec__list dt { font-size: 14px; white-space: normal; word-break: keep-all; }
  .r-body .r-spec__list dd { font-size: 15px; }
  .r-body .r-badges { gap: 32px; }
  .r-body .r-sec .r-badge { padding: 0; }
}

/* 품질관리 아이콘 카드 6개 (품질 · 인증) */
@media (min-width: 1025px) {
  #verify .r-cards--3 { gap: 24px; }
  #verify .r-cards--3 .r-card { min-height: 280px; }
}

/* 특허 목록 (개발 · 특허) — 특허명이 길어 칸 너비를 나눠 줌 */
.r-table--patent { table-layout: fixed; }
.r-table--patent thead th:nth-child(1) { width: 52%; }
.r-table--patent thead th:nth-child(2) { width: 12%; }
.r-table--patent thead th:nth-child(n+3) { width: 12%; }
.r-table--patent tbody th { font-size: 17px; font-weight: 600; line-height: 1.55; word-break: keep-all; }
.r-table--patent td { word-break: keep-all; }
.r-table--patent td:nth-child(n+3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-table--patent tbody tr[hidden] { display: none; }

/* 페이지 번호 — 소식 > 뉴스와 같은 모양 */
.r-body .paging { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; list-style: none; }
.r-body .paging:empty { display: none; }
.r-body .paging a {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #6c6c6c;
  transition: 0.2s;
}
.r-body .paging a:hover { background: #f3f3f3; color: var(--r-ink); }
.r-body .paging a.is-active,
.r-body .paging a.is-active:hover { background: var(--r-g); color: #fff; font-weight: 700; }
.r-body .paging .paging__arrow .material-symbols-rounded { font-size: 22px; }
.r-body .paging .is-disabled { color: #d5d5d5; pointer-events: none; }
@media (max-width: 1024px) {
  .r-body .paging { gap: 3px; margin-top: 28px; }
  .r-body .paging a { min-width: 32px; height: 32px; font-size: 15px; }
}

/* 목록 건수 (소식 > 뉴스와 같은 표기 — 숫자만 초록 볼드) */
.r-count { margin-top: 32px; font-size: 19px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--r-ink); }   /* 버튼 아래 → 글자 윗선까지 약 37px */
.r-count b { margin-left: 8px; font-weight: 700; color: var(--r-g); }
.r-count + .r-table-wrap { margin-top: 16px; }
@media (max-width: 1024px) {
  .r-count { margin-top: 28px; font-size: 15px; }
  .r-count b { margin-left: 6px; }
  .r-count + .r-table-wrap { margin-top: 14px; }
}

/* 인증 로고 (품질 · 인증) — 배경 없이 로고 · 이름 · 설명, 칸 사이는 가는 실선 격자 (바깥 테두리 없음) · 한 줄 4칸 */
.r-awards-group + .r-awards-group { margin-top: 88px; }
.r-awards-group .r-sub { margin-top: 0; padding-bottom: 16px; border-bottom: 1px solid var(--r-line); font-size: 20px; }
.r-awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.r-award { display: flex; flex-direction: column; align-items: center; padding: 44px 20px; border-left: 1px solid var(--r-line); text-align: center; }
.r-award:nth-child(4n+1) { border-left: 0; }
.r-award:nth-child(n+5) { border-top: 1px solid var(--r-line); }
.r-award__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 120px; }
/* 로고는 500×500 같은 캔버스로 맞춘 파일 — 모두 같은 크기 상자(120px)에 넣어 크기를 통일 */
.r-award__logo img { width: 120px; height: 120px; object-fit: contain; }
/* 로고를 쓰지 않는 인증 — 글자 원형 배지 (로고와 같은 120px) */
.r-award__logo--text span {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border: 3px solid var(--r-g);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--r-g);
}
.r-award__ttl { margin-top: 24px; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--r-ink); word-break: keep-all; }
.r-award__sub { margin-top: 6px; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--r-sub); word-break: keep-all; }
@media (max-width: 1024px) {
  .r-awards-group + .r-awards-group { margin-top: 56px; }
  .r-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-award { padding: 28px 12px; }
  .r-award:nth-child(4n+1) { border-left: 1px solid var(--r-line); }
  .r-award:nth-child(odd) { border-left: 0; }
  .r-award:nth-child(n+3) { border-top: 1px solid var(--r-line); }
  .r-award__logo { height: 80px; }
  .r-award__logo img { width: 80px; height: 80px; }
  .r-award__logo--text span { width: 80px; height: 80px; border-width: 2px; font-size: 15px; }
  .r-award__ttl { margin-top: 14px; font-size: clamp(15px, 4vw, 17px); }
  .r-award__sub { margin-top: 4px; font-size: clamp(13px, 3.6vw, 15px); }
}

/* ============================================================
   제품 품질 정보 — 제품이 여러 개일 때 (품질 · 인증)
   · 위에 제품 탭(사진 + 이름) → 고른 제품 카드 하나만 보임
   ============================================================ */
.r-spec-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.r-spec-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--r-line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--r-sub);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.r-spec-tab img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--r-soft); }
.r-spec-tab:hover { border-color: #c9c9c9; color: var(--r-ink); }
.r-spec-tab[aria-selected="true"] { border-color: var(--r-ink); background: var(--r-ink); color: #fff; }
.r-specs .r-spec:not(.is-active) { display: none; }
@media (max-width: 1024px) {
  .r-spec-tabs { gap: 8px; margin-bottom: 28px; }
  .r-spec-tab { height: 48px; padding: 0 16px 0 6px; font-size: 15px; gap: 8px; }
  .r-spec-tab img { width: 36px; height: 36px; }
}

/* ---------- 글로벌 농장 카드 — 사진 위 · 글 아래 ----------
   기본(B)은 사진 위에 글을 얹어 왼쪽이 무거워 보인다는 의견이 있어,
   사진과 글을 아래위로 나눈 안을 함께 볼 수 있게 했습니다. */
[data-farms="c"] .r-fmap__slides { align-self: start; }
[data-farms="c"] .r-fpop,
.r-body[data-farms="c"] .r-sec--tint .r-fpop,
[data-farms="c"] #farms .r-fpop.r-place { position: relative; min-height: 0; background: none; color: inherit; }   /* 회색 면 없이 흰 바탕 */
[data-farms="c"] .r-fpop .r-place__img { position: relative; inset: auto; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; }
[data-farms="c"] .r-fpop .r-place__img::after { display: none; }
[data-farms="c"] .r-fpop .r-place__body { position: static; padding: 22px 2px 0; }
[data-farms="c"] .r-fpop .r-place__loc { display: inline-flex; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--r-g); }
[data-farms="c"] .r-fpop .r-place__ttl { margin-top: 3px; color: var(--r-ink); }   /* 지역 이름 바로 아래 붙임 */
[data-farms="c"] .r-fpop .r-place__txt { margin-top: 12px; line-height: 1.62; color: var(--r-txt); }   /* 한 톤 진하게 · 줄 간격 약 3px 좁게 (32.4 → 29.2px) */
@media (max-width: 1024px) {
  [data-farms="c"] .r-fpop .r-place__img { border-radius: 14px; }
  [data-farms="c"] .r-fpop .r-place__body { padding: 18px 2px 0; }
}

/* ===== 모바일 여백 정리 ====================================================
   한 덩어리인 것은 붙이고, 다른 덩어리는 확실히 띄웁니다.
   그동안 6 · 10 · 12 · 14 · 20 · 32 · 48 이 섞여 있어 단계가 안 읽혔습니다.

     대웅제약 모바일·태블릿 수치(vw 비율)를 재서 맞췄습니다. 기준 폭 430px.
     페이지 제목 7.44vw · 섹션 제목 6.51vw · 본문 4.19vw
     제목↔설명문 5.58vw · 제목묶음↔내용 9.30vw
     머리말↔제목 6px (우리 고유) · 나열 항목 16px
     섹션 ↔ 섹션 88px
   ========================================================================= */
@media (max-width: 1024px) {
  .r-h2 { margin-top: 6px; }

  /* 본문 글자 — 모바일에서는 16px 고정.
     clamp(16px, 4.2vw, 20px) 이라 화면이 조금만 넓어도 20px 까지 올라가
     한 줄에 들어가는 글자가 줄고 문단이 뚝뚝 끊겨 보였습니다. */
  .r-desc,
  .r-lead,
  .r-p { font-size: clamp(16px, 4.19vw, 18px); line-height: 1.6; }
  .r-desc,
  .r-lead { margin-top: clamp(20px, 5.58vw, 24px); }

  .r-head + * { margin-top: clamp(36px, 9.3vw, 40px); }
  .r-head + .r-steps { margin-top: clamp(36px, 9.3vw, 40px); }
  .r-split--lead .r-head + .r-p { margin-top: 20px; }
  .r-topics-wrap { margin-top: 32px; }

  .r-cards,
  .r-cards--3,
  .r-cards--4,
  .r-cards--5 { gap: 16px; }
  .r-steps,
  .r-steps--5,
  .r-steps--6 { gap: 16px; }
  .r-steps--5,
  .r-steps--6 { margin-top: clamp(36px, 9.3vw, 40px); }
  .r-split + .r-cards,
  .r-flow + .r-cards { margin-top: 32px; }

  .r-sec { padding-top: 88px; }
  .r-sec--tint,
  .r-sec--dark { margin-top: 88px; padding: 72px 0; }
  .r-sec--tint + .r-sec,
  .r-sec--dark + .r-sec { padding-top: 88px; }
  .r-body .r-sec--dark { padding-top: 72px; }
}

/* ===== 글자가 올라간 배너는 모바일에서 세로로 ============================
   대웅제약은 모바일에서 이런 배너를 1 : 1.81 (402 × 729) 로 길게 씁니다.
   가로로 누우면 글자가 들어갈 자리가 없어 읽기 어렵기 때문입니다.
   우리 사진은 가로로 찍힌 것이라 1 : 1.3 까지만 세웁니다.
   더 길게 가려면 세로로 자른 모바일용 사진이 따로 필요합니다. */
@media (max-width: 600px) {
  .r-hero__img--copy,
  [data-draft] .r-hero__img--copy { aspect-ratio: 3 / 4; }

  /* 글자는 배너 위쪽에 둡니다. 대웅처럼 제목을 먼저 읽고 사진을 보게 됩니다.
     아래에 두면 사진의 주인공이 글자에 가려지기도 합니다. */
  /* 배너 안 글자 — 대웅제약 기준(430px 기준 vw 환산)
       제목 11.16vw → 48px
       설명 4.19vw  → 18px
       안쪽 여백 14.88vw / 9.30vw → 64px / 40px
       제목↔설명 18.6vw → 80px
     우리 배너는 대웅보다 짧아(1:1.33 vs 1:1.81) 제목↔설명만 56px 로 줄였습니다. */
  .r-hero__copy {
    justify-content: flex-start;
    padding: clamp(48px, 14.88vw, 64px) clamp(30px, 9.3vw, 40px);
  }
  .r-hero__copy .r-hero__ttl { font-size: clamp(28px, 8.5vw, 34px); line-height: 1.2; }
  .r-hero__copy .r-hero__desc { margin-top: 20px; font-size: clamp(16px, 4.19vw, 18px); }
  .r-hero__img--copy::after {
    background: linear-gradient(180deg, rgba(8, 20, 14, 0.85) 0%, rgba(8, 20, 14, 0.5) 45%, rgba(8, 20, 14, 0.05) 100%);
  }

  /* 가로 사진을 세로로 자르면 보이는 폭이 원본의 23% 뿐이라,
     가운데를 그대로 자르면 정작 봐야 할 피사체가 밖으로 밀려납니다.
     사진마다 피사체가 있는 지점으로 당겨 옵니다. */
  .r-hero__img--copy img[src*="philosophy-hero"] { object-position: 71% center; }   /* 하트를 든 손 */
  .r-hero__img--copy img[src*="story-hero"] { object-position: 83% center; }        /* 물방울 맺힌 알로에 잎 */
  .r-hero__img--copy img[src*="qa-hero"] { object-position: 73% center; }           /* 알로엔 제품 */
}

/* ===== 글로벌 농장 — 모바일 =============================================
   1) 농장 선택 막대(01 미국 텍사스 …)를 지도 위로 올립니다.
      지도를 보기 전에 무엇을 고를 수 있는지 먼저 알 수 있습니다.
   2) 농장 카드 제목이 28px 로 본문과 차이가 너무 커서 줄입니다. */
@media (max-width: 1024px) {
  /* 막대는 .r-fmap__frame 안에 있어서, 프레임을 세로 flex 로 만들어야
     order 가 먹습니다(block 에서는 order 가 무시됩니다). */
  [data-farms="c"] .r-fmap__frame { display: flex; flex-direction: column; }
  [data-farms="c"] .r-fmap__ctrl {
    order: -1;
    margin-top: 0;
    margin-bottom: 14px;
  }
  .r-fpop .r-place__ttl,
  .r-place__ttl { font-size: 18px; line-height: 1.45; }
  .r-fpop .r-place__ttl { margin-top: 10px; }
}

/* ===== 회색 카드 — 규격은 styles.css 의 :root 토큰에서 가져옵니다 ==========
   값을 바꾸려면 여기가 아니라 styles.css 의 --card-* 를 고치세요.
   토큰이 휴대폰 · 태블릿 값을 모두 담고 있어 이 블록 하나로 끝납니다. */
@media (max-width: 1024px) {
  .r-cards,
  .r-cards--3,
  .r-cards--4,
  .r-cards--5 { gap: var(--card-gap); }
  .r-card { padding: var(--card-pad); border-radius: var(--card-r); }
  .r-card__no { font-size: var(--card-no); }
  .r-card__ttl,
  .r-cards--5 .r-card__ttl { font-size: var(--card-ttl); line-height: 1.4; }
  .r-card__txt,
  .r-cards--5 .r-card__txt { font-size: var(--card-txt); line-height: var(--card-lh); }

  /* 단계 카드는 태블릿에서 한 줄에 둘이라 --card2-* 를 씁니다 */
  .r-steps,
  .r-steps--5,
  .r-steps--6 { gap: var(--card2-gap); }
  .r-step { padding: var(--card2-pad); border-radius: var(--card-r); }
  .r-step__no { font-size: var(--card2-no); }
  .r-step__ttl { font-size: var(--card2-ttl); line-height: 1.4; }
  .r-step__txt { font-size: var(--card2-txt); line-height: var(--card-lh); }
}
/* ===== 수치 3개는 모바일에서도 한 줄에 ===================================
   flex-wrap 때문에 2개 + 1개로 꺾여 허전했습니다. 3칸 그리드로 고정하고
   글자를 줄여 한 줄에 담습니다. */
@media (max-width: 1024px) {
  .r-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .r-stat { padding: 0 14px; }
  .r-stat:first-child { padding-left: 0; }
  .r-stat:last-child { padding-right: 0; }
  /* 구분선은 칸 사이 여백 한가운데에. 기본값(-48px)은 모바일에서 글자를 덮습니다. */
  .r-stat + .r-stat::before { left: 0; top: 4px; bottom: 4px; }
  .r-stat__label { font-size: clamp(11px, 3vw, 13px); }
  .r-stat__num { font-size: clamp(20px, 5.6vw, 26px); }
  .r-stat__num small { font-size: clamp(11px, 3vw, 13px); margin-left: 3px; }
  .r-stat__desc { font-size: clamp(11px, 3vw, 13px); margin-top: 6px; }
}

/* ===== 표 — 휴대폰 =======================================================
   대웅제약 재무정보 표와 같은 방식입니다.
   열을 감추거나 글자를 … 로 자르지 않고, 표를 그대로 둔 채 좌우로 밉니다.
   대신 표 위에 「옆으로 넘기세요」 아이콘을 두어 밀 수 있다는 걸 알립니다.
   (https://www.daewoong.co.kr/ko/ir/holdings/finance/status) */
@media (max-width: 600px) {
  .r-table { font-size: 14px; }
  .r-table th,
  .r-table td { padding: 16px 14px; }
  .r-table--patent tbody th { font-size: 15px; line-height: 1.5; }
  .r-table--patent tbody td:nth-child(n + 3) { white-space: nowrap; }
}

/* 건수 줄 오른쪽에 「옆으로 미세요」 아이콘을 둡니다
   (아이콘 자체는 styles.css 의 .swipe-hint — 약관 페이지 표와 공용) */
@media (max-width: 1024px) {
  .r-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}

/* ===== 분류 버튼 — 휴대폰에서는 뉴스룸 탭처럼 옆으로 ======================
   9개가 세 줄로 접히면 표보다 버튼이 더 커 보입니다.
   한 줄로 세워 화면 오른쪽 끝까지 흘려 보냅니다. */
@media (max-width: 600px) {
  .r-filter {
    flex-wrap: nowrap;
    margin-right: calc(-1 * clamp(28px, 4vw, 48px));
    padding-right: clamp(28px, 4vw, 48px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .r-filter::-webkit-scrollbar { display: none; }
  .r-filter__btn { flex: none; white-space: nowrap; }
}

/* ===== 태블릿 (601 ~ 1024) ==============================================
   지금까지의 반응형은 휴대폰(430px)에 맞춰 잡아 둔 값입니다.
   그 값이 1024px 까지 그대로 쓰이다 보니, 화면이 두 배 넓어져도
   글씨는 그대로여서 태블릿에서는 유난히 작아 보였습니다.
   휴대폰 값은 건드리지 않고(601px 부터 적용), 태블릿만 한 단계 키웁니다.
   PC(1025px 이상)는 이 블록 밖이라 영향이 없습니다. */
@media (min-width: 601px) and (max-width: 1024px) {
  /* 본문 · 리드 */
  .r-desc,
  .r-lead,
  .r-p { font-size: 19px; line-height: 1.7; }

  /* 카드 규격은 위 토큰 블록이 담당합니다 (styles.css 의 --card-*) */
  .r-cards--img .r-card__txt { font-size: 17px; }

  /* 수치 — 3칸을 유지하되 한 단계 키움 */
  .r-stat__num { font-size: 34px; }
  .r-stat__num small,
  .r-stat__label,
  .r-stat__desc { font-size: 15px; }

  /* 수확 단계(사진 + 번호 동그라미) */
  [data-draft="1"] #harvest .r-step__no { width: 40px; height: 40px; font-size: 14px; }
  [data-draft="1"] #harvest .r-step__ttl { font-size: 20px; }
  [data-draft="1"] #harvest .r-step__txt { font-size: 16.5px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__no { margin: 18px 0 0 18px; width: 32px; height: 32px; font-size: 13px; }
  [data-draft="1"][data-steps="b"] #harvest .r-step__txt { padding: 0 18px; }

  /* 농장 카드 제목 */
  .r-fpop .r-place__ttl,
  .r-place__ttl { font-size: 20px; }

  /* 사진 위 카피 배너 — 사진이 4:3 으로 높아지는 구간이라
     글자가 아래 구석에 작게 몰려 있었습니다.
     휴대폰과 같이 글자를 위쪽에 두고, 덮개도 위가 어둡도록 뒤집습니다. */
  .r-hero__copy { justify-content: flex-start; padding: 52px 44px; }
  .r-hero__img--copy::after,
  [data-draft] .r-hero__img--copy::after {
    background: linear-gradient(180deg, rgba(8, 20, 14, 0.85) 0%, rgba(8, 20, 14, 0.5) 45%, rgba(8, 20, 14, 0.05) 100%);
  }
  .r-hero__copy .r-hero__logo { width: 112px; }
  .r-hero__copy .r-hero__ttl { font-size: 40px; line-height: 1.15; }
  .r-hero__copy .r-hero__desc { margin-top: 16px; font-size: 18px; }
}

/* ===== 연구 프로세스 카드도 같은 회색 카드 =================================
   원래 규칙이 #process 라는 아이디를 써서(.r-body #process .r-step)
   위에서 잡아 둔 공통 카드 규격이 밀려나고 있었습니다.
   같은 선택자로 다시 적어 공통값을 따르게 합니다. */
@media (max-width: 1024px) {
  .r-body #process .r-step { padding: 36px 25px 40px; border-radius: 16px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .r-body #process .r-step { padding: 32px 26px 36px; }
}


/* ===== 글로벌 농장 — 모바일 손질 =========================================
   1) 농장 선택 막대를 지도 아래로 내립니다 (위로 올렸던 order 를 되돌림)
   2) 「01 미국 텍사스」 처럼 숫자와 나라 이름을 한 줄에 둡니다
   3) 한 줄이 되어 막대가 낮아지므로 멈춤 버튼도 PC 처럼 밑선에 맞춥니다
   4) 지도 위 지점 이름표는 한 치수 줄입니다
   5) 농장 제목은 살짝 키웁니다 */
@media (max-width: 1024px) {
  [data-farms="c"] .r-fmap__ctrl {
    order: 0;
    align-items: flex-end;
    margin-top: 18px;
    margin-bottom: 0;
  }
  .r-fbar { font-size: 12.5px; }
  .r-fbar b { display: inline; margin: 0 4px 0 0; }
  .r-fpop .r-place__ttl,
  .r-place__ttl { font-size: 20px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .r-fbar { font-size: 14px; }
  .r-fpop .r-place__ttl,
  .r-place__ttl { font-size: 22px; }
}
/* 지도 위 지점 이름표 — 작으면 읽기 어려워 한 치수 키웁니다 */
@media (max-width: 1024px) {
  .r-fpin__tag { gap: 5px; padding: 4px 11px 4px 4px; font-size: 12.5px; }
  .r-fpin__tag b { width: 20px; height: 20px; font-size: 10px; }
  .r-fpin__dot { width: 11px; height: 11px; }
}

/* 농장 카드 글자 — 사진 모서리가 둥글어서 글자를 사진 왼쪽 끝에 딱 맞추면
   오히려 밖으로 튀어나와 보입니다. 다른 페이지와 같은 시각 보정을 주고,
   위치 줄(아이콘 + 나라 이름)은 제목보다 눈에 덜 띄도록 한 치수 줄입니다. */
@media (max-width: 1024px) {
  .r-place__ttl,
  .r-place__txt { padding-left: var(--optical-x); }
  .r-fpop .r-place__loc,
  .r-place__loc { font-size: 13.5px; }
  .r-fpop .r-place__loc .material-symbols-rounded,
  .r-place__loc .material-symbols-rounded { font-size: 16px; }
}

/* ===== 농장 선택 막대를 농장 카드 아래로 ==================================
   순서: 지도 → 안내문 → 농장 카드(사진 · 설명) → 01 02 03 선택 막대
   .r-fmap__ctrl 은 .r-fmap__frame 안에 들어 있어 그대로는 카드 밑으로
   내려올 수 없습니다. 모바일에서만 프레임을 display: contents 로 풀어
   네 덩어리를 같은 그리드의 항목으로 만든 뒤 order 로 세웁니다.
   (PC 는 1025px 이상이라 영향 없음)
   자동 넘김 멈춤 버튼은 좁은 화면에서 쓸 일이 없어 감춥니다. */
@media (max-width: 1024px) {
  [data-farms="c"] .r-fmap__frame { display: contents; }
  [data-farms="c"] .r-fmap__canvas { order: 1; }
  [data-farms="c"] .r-fmap__hint { order: 2; margin-top: 0; }
  [data-farms="c"] .r-fmap__side { order: 3; }
  [data-farms="c"] .r-fmap__ctrl { order: 4; margin-top: 0; margin-bottom: 0; }
  [data-farms="c"] .r-fmap__play { display: none; }
}

/* 농장 선택 막대 — 휴대폰에서는 글자를 빼고 선만 남깁니다.
   나라 이름은 바로 위 카드에 이미 나와 있어 겹치는 정보입니다.
   글자는 화면에서만 감추고(스크린리더는 그대로 읽습니다),
   선 위쪽에 여백을 두어 손가락으로 누를 넓이를 남겨 둡니다. */
@media (max-width: 1024px) {
  [data-farms="c"] .r-fmap__bars { gap: 10px; }
  .r-fbar { padding: 16px 0 0; }
  .r-fbar span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* 러시아 연해주(03)는 지도 오른쪽 끝에 있어, 이름표를 점 위에 가운데로 두면
   휴대폰에서 지도 밖으로 밀려납니다. 이름표를 점 왼쪽에 붙여 둡니다. */
@media (max-width: 600px) {
  [data-farms="c"] .r-fpin[data-farm-pin="3"].r-fpin--tl .r-fpin__tag {
    top: 50%;
    bottom: auto;
    left: -10px;
    transform: translate(-100%, -50%);
  }
}

/* 이름표가 점 왼쪽으로 갔으므로 연결선도 세로에서 가로로 눕힙니다 */
@media (max-width: 600px) {
  [data-farms="c"] .r-fpin[data-farm-pin="3"].r-fpin--tl .r-fpin__btn::before {
    top: -0.75px;
    bottom: auto;
    left: -11px;
    width: 7px;
    height: 1.5px;
  }
}

/* ===== 휴대폰 — 모서리 둥글기를 한 단계 줄임 =============================
   화면이 작아지면 같은 반지름도 상대적으로 더 둥글어 보입니다.
   24→18 · 20→16 · 18→14 · 16→13 · 14→12 · 12→10 · 10→8 로 한 단계씩.
   태블릿(601px 이상)과 PC 는 그대로입니다. */@media (max-width: 600px) {
  [data-draft] .r-hero__img,
  .r-hero__img { border-radius: 14px; }
  .r-split__img { border-radius: 14px; }
  .r-closing { border-radius: 14px; }
  .r-fpop { border-radius: 18px; }
  .r-fpop .r-place__img,
  .r-place__img { border-radius: 12px; }
  .r-tl__img { border-radius: 13px; }
  .r-card { border-radius: 13px; }
  .r-step,
  [data-draft="1"][data-steps="b"] #harvest .r-step,
  .r-body #process .r-step { border-radius: 13px; }
  .r-step__img,
  [data-draft="1"][data-steps="b"] #harvest .r-step__img { border-radius: 12px 12px 0 0; }
  [data-draft="1"] #harvest .r-step__img { border-radius: 12px; }
}

/* ===== 본문은 휴대폰 · 태블릿에서 최소 16px ==============================
   읽는 글(문장)이 15px 이하로 내려가 있던 곳을 16px 로 올립니다.
   분류 · 번호 · 안내문 같은 '라벨'은 본문이 아니라 그대로 둡니다. */@media (max-width: 1024px) {
  [data-draft="1"] #harvest .r-step__txt { font-size: 16px; }
  .r-cards--img .r-card__txt { font-size: 16px; }
  .r-award__sub { font-size: 16px; }
  .r-cert__list > div { font-size: 16px; }
  .r-body .r-spec__list dd { font-size: 16px; }
  .r-flow li,
  [data-draft="1"] .r-flow li { font-size: 16px; }
  .r-table,
  .r-table thead th,
  .r-table--patent tbody th { font-size: 16px; }
}
@media (max-width: 600px) {
  .r-table,
  .r-table thead th,
  .r-table--patent tbody th { font-size: 16px; }
}