/* ============================================================
   FEEDUS ABOUT — [feedus_about] 전용 스타일
   스코프: .feedus-about (이 밖으로 새는 셀렉터 금지)
   원칙:
     - 색/폰트/라운드/모션은 feedus-global.css 토큰만 사용 (var + 폴백)
     - 이 페이지에만 존재하는 값은 --fa-* 로컬 변수로 격리
     - 디스플레이 폰트(rixseoulstation-pro)는 global.css 주석 규칙대로
       .fa-display 셀렉터에만 --font-display + display-weight 지정
   반응형: 375 기준(피그마 750 시안의 1/2) → 1280 fluid clamp
   ============================================================ */

.feedus-about {
  /* ---- 이 페이지 전용 로컬 값 ---- */
  --fa-band: #ded3b8;        /* '이렇게 이용하세요' 밴드 배경 (딥 베이지) */
  --fa-card: #efe9db;        /* 이용 카드 배경 */
  --fa-card-line: #d3c5a5;   /* 이용 카드 보더 */
  --fa-blue: #3b5aa7;        /* 01 직배송 타이틀 (시안 고유색) */
  --fa-num: #a2a2a2;         /* 카드 번호 */

  /* ---- 타이포 스케일 (375→1280 fluid) ---- */
  --fa-fs-intro-h: clamp(36px, 24px + 3.2vw, 56px);
  --fa-fs-intro-sub: clamp(20px, 16px + 1.1vw, 28px);
  --fa-fs-body: clamp(16px, 15px + 0.35vw, 19px);
  --fa-fs-lede: clamp(18px, 16px + 0.5vw, 21px);
  --fa-fs-ghost: clamp(48px, 9vw, 122px);
  --fa-fs-story-h: clamp(23px, 16px + 1.9vw, 40px);
  --fa-fs-usage-h: clamp(23px, 17px + 1.6vw, 34px);
  --fa-fs-card-h: clamp(20px, 18px + 0.55vw, 24px);
  --fa-fs-outro-h: clamp(27px, 19px + 2.2vw, 44px);

  --fa-pad-x: clamp(20px, 4vw, 32px);
  --fa-max: 1140px;

  font-family: var(--font-primary, "PretendardVariable", -apple-system, "Malgun Gothic", sans-serif);
  color: var(--feedus-black, #1a1a1a);
  background: var(--feedus-bg, #f4f1ea);
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* 디스플레이 폰트 — global.css 규칙: 새 위치는 셀렉터에 직접 지정 */
.feedus-about .fa-display {
  font-family: var(--font-display, "PretendardVariable", sans-serif);
  font-weight: var(--feedus-font-display-weight, 500); /* Rix 단일 굵기 — 가짜 볼드 금지 */
}

/* 공통 리셋 (Bricks/전역 heading 스타일 차단) */
.feedus-about h1,
.feedus-about h2,
.feedus-about h3,
.feedus-about p,
.feedus-about ol,
.feedus-about li,
.feedus-about figure {
  margin: 0;
  padding: 0;
}

/* 상속 복구 — 이 블록이 없으면 타이포가 전부 전역 기본값으로 납작해진다.
   feedus-global.css 의 「p, .brxe-text-basic, li, span, label, select, option, textarea」
   블록이 font-family / font-size:15px / font-weight / line-height / letter-spacing / color 를
   **자식 요소에 직접** 건다. 부모(.fa-body, .fa-outro-h)에 아무리 특이성 높은 값을 줘도
   상속값은 직접 지정을 이기지 못하므로 여기서 되돌려야 한다.
   증상 예: 아웃트로 필 헤딩이 15px 프리텐다드로 나오고, 올리브 밴드 본문이 검정으로 나옴.
   .fa-display / .fa-ghost / .fa-lede 처럼 자기 값을 가진 것들은 (0,2,0) 이라 이 규칙을 이긴다. */
.feedus-about p,
.feedus-about li,
.feedus-about span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.feedus-about img { display: block; max-width: 100%; height: auto; }
/* <picture> 는 레이아웃상 없는 셈 친다.
   .fa-card / .fa-photo / .fa-orbit 는 aspect-ratio 로 높이를 잡고 그 안의 img 를
   width:100%; height:100% 로 덮는다. <picture> 가 실제 박스를 만들면 img 의 퍼센트
   높이가 기준을 잃어서 cover 크롭이 풀린다 — display:contents 면 박스가 아예 안 생겨서
   기존 `.fa-card img` 류 후손 셀렉터가 전부 그대로 맞는다. */
.feedus-about picture { display: contents; }
.feedus-about li { list-style: none; }

.feedus-about .fa-inner {
  max-width: var(--fa-max);
  margin: 0 auto;
  padding-left: var(--fa-pad-x);
  padding-right: var(--fa-pad-x);
}

/* 풀블리드 밴드 (브릭스 컨테이너 안에서도 화면 끝까지) */
.feedus-about .fa-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

.feedus-about .fa-body {
  font-size: var(--fa-fs-body);
  font-weight: var(--fw-medium, 500);
  line-height: 1.62;
  letter-spacing: var(--ls-body, -0.02em);
}
.feedus-about .fa-body p + p { margin-top: clamp(14px, 2vw, 20px); }
.feedus-about .fa-lede {
  font-size: var(--fa-fs-lede);
  font-weight: var(--fw-bold, 700);
  line-height: 1.5;
  letter-spacing: var(--ls-body, -0.02em);
}

/* ============================================================
   1. 인트로 — 피더스는?
   ============================================================ */
.feedus-about .fa-intro {
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 100px);
}
.feedus-about .fa-intro-h {
  font-size: var(--fa-fs-intro-h);
  color: var(--feedus-primary, #4a5c10);
  line-height: 1.15;
}
.feedus-about .fa-intro-sub {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: var(--fa-fs-intro-sub);
  line-height: 1.5;
  color: var(--feedus-black, #1a1a1a);
}
.feedus-about .fa-intro .fa-body {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 640px;
}

/* 인트로 포토 그리드 — 2×2 지그재그 (PC 4열) */
.feedus-about .fa-introgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 26px; /* 지그재그 translate 여백 */
}
.feedus-about .fa-introgrid .fa-card {
  position: relative;
  aspect-ratio: 348 / 420;
  border-radius: var(--radius, 6px);
  overflow: hidden;
}
.feedus-about .fa-introgrid .fa-card img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 지그재그 오프셋은 transform 이 아니라 top 으로 준다 — transform 은 아래 리빌
   애니메이션(카드 하나씩 떠오르기)이 쓰기 때문에 겹치면 서로 덮어쓴다.
   .fa-card 가 이미 position:relative 라 레이아웃 영향 없이 동일하게 보인다. */
.feedus-about .fa-introgrid .fa-card:nth-child(even) { top: -26px; }
.feedus-about .fa-introgrid .fa-card.dim-15::after,
.feedus-about .fa-introgrid .fa-card.dim-20::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
}
.feedus-about .fa-introgrid .fa-card.dim-15::after { background: rgba(0,0,0,.15); }
.feedus-about .fa-introgrid .fa-card.dim-20::after { background: rgba(0,0,0,.2); }
.feedus-about .fa-i1 img { object-position: 43% 35%; }
.feedus-about .fa-i4 img { object-position: 51% 46%; }

@media (min-width: 768px) {
  .feedus-about .fa-introgrid { grid-template-columns: repeat(4, 1fr); }
  .feedus-about .fa-introgrid .fa-card:nth-child(even) { top: -26px; }
}

/* ============================================================
   2. 이렇게 이용하세요 — 딥 베이지 밴드 + 카드 3장
   ============================================================ */
.feedus-about .fa-usage {
  background: var(--fa-band);
  padding-top: clamp(44px, 6vw, 84px);
  padding-bottom: clamp(52px, 7vw, 96px);
}
.feedus-about .fa-usage-head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
.feedus-about .fa-usage-head img {
  width: clamp(30px, 4vw, 40px);
  height: auto;
  flex: none;
}
.feedus-about .fa-usage-h {
  font-size: var(--fa-fs-usage-h);
  line-height: 1.2;
}
.feedus-about .fa-usage-list {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(28px, 4vw, 48px);
  counter-reset: fa-usage;
}
.feedus-about .fa-usage-card {
  background: var(--fa-card);
  border: 1px solid var(--fa-card-line);
  border-radius: var(--radius, 6px);
  padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3vw, 32px) clamp(28px, 3.8vw, 40px);
  transition: transform var(--feedus-duration-default, .2s) var(--feedus-ease-out-slow, ease-out),
              box-shadow var(--feedus-duration-default, .2s) var(--feedus-ease-out-slow, ease-out);
}
@media (hover: hover) {
  .feedus-about .fa-usage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--feedus-shadow-md, 0 4px 12px rgba(0,0,0,.1));
  }
}
.feedus-about .fa-usage-num {
  font-size: clamp(13px, 1vw + 9px, 15px);
  color: var(--fa-num);
  letter-spacing: .02em;
}
.feedus-about .fa-usage-t {
  margin-top: clamp(6px, 1vw, 10px);
  padding-left: clamp(12px, 1.6vw, 16px);
  font-size: var(--fa-fs-card-h);
  line-height: 1.3;
}
.feedus-about .fa-usage-card:nth-child(1) .fa-usage-t { color: var(--fa-blue); }
.feedus-about .fa-usage-card:nth-child(2) .fa-usage-t { color: var(--feedus-accent, #566d11); }
.feedus-about .fa-usage-card:nth-child(3) .fa-usage-t { color: var(--feedus-black, #1a1a1a); }
.feedus-about .fa-usage-card .fa-body {
  margin-top: clamp(12px, 1.8vw, 18px);
  padding-left: clamp(12px, 1.6vw, 16px);
}

@media (min-width: 900px) {
  .feedus-about .fa-usage-list { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* ============================================================
   3. 스토리 섹션 ×4 — FARM / STANDARD / EXPERIENCE / FROZEN
   고스트 영문(화이트) + 국문 헤딩 + 리드 + 본문 + 사진
   ============================================================ */
.feedus-about .fa-stories {
  padding-top: clamp(64px, 9vw, 130px);
  padding-bottom: clamp(70px, 10vw, 150px);
}
.feedus-about .fa-story { margin-bottom: clamp(72px, 10vw, 150px); }
.feedus-about .fa-story:last-child { margin-bottom: 0; }

.feedus-about .fa-ghost {
  display: block;
  font-size: var(--fa-fs-ghost);
  line-height: .95;
  letter-spacing: -0.06em;
  color: var(--feedus-white, #ffffff);
  user-select: none;
  pointer-events: none;
}
.feedus-about .fa-story-h {
  margin-top: clamp(16px, 2.4vw, 30px);
  font-size: var(--fa-fs-story-h);
  line-height: 1.45;
}
.feedus-about .fa-story .fa-lede { margin-top: clamp(22px, 3.4vw, 40px); }
.feedus-about .fa-story .fa-body { margin-top: clamp(18px, 3vw, 34px); }

.feedus-about .fa-photo {
  margin-top: 0;
  border-radius: var(--radius, 6px);
  overflow: hidden;
  aspect-ratio: 710 / 502;
}
.feedus-about .fa-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.feedus-about .fa-p-farm img { object-position: 55% 50%; }
.feedus-about .fa-p-experience img { object-position: 55% 47%; }

/* 모바일: 세로 스택 / PC: 텍스트·사진 2열 교차 */
@media (max-width: 899px) {
  .feedus-about .fa-photo { margin-top: clamp(30px, 4.4vw, 48px); }
}
@media (min-width: 900px) {
  .feedus-about .fa-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    margin-top: clamp(8px, 1vw, 16px);
  }
  .feedus-about .fa-story:nth-child(even) .fa-story-grid .fa-story-txt { order: 2; }
  .feedus-about .fa-story:nth-child(even) .fa-story-grid .fa-photo { order: 1; }
}

/* ============================================================
   4. 아웃트로 — 프라이머리 밴드 + 형광펜 필 헤딩 + 서클 포토 + 로고
   ============================================================ */
.feedus-about .fa-outro {
  background: var(--feedus-primary, #4a5c10);
  padding-top: clamp(52px, 7vw, 100px);
  padding-bottom: clamp(44px, 6vw, 84px);
  color: var(--feedus-bg, #f4f1ea);
}
.feedus-about .fa-outro-h {
  font-size: var(--fa-fs-outro-h);
  line-height: 1.5;
  color: var(--feedus-black, #1a1a1a);
}
/* 패딩이 위아래 비대칭인 건 오타가 아니다 — 리스서울역체는 em 박스 안에서 글자가
   위로 붙어 있어(ascent 37 / descent 18 인데 실제 잉크는 asc 35 / desc 7.5, 44px 기준)
   상하 패딩을 같게 주면 눈에는 위:아래 = 1:1.55 로 보인다. 아래쪽 여백이 0.19em 더
   벌어지므로 그만큼 padding-bottom 에서 빼서 시각적으로 균등하게 맞췄다.
   → 44px 기준 실측 시각 여백: 위 18.1 / 아래 18.2 / 좌우 18.5px
   폰트를 바꾸면 이 보정값도 다시 재야 한다. 값은 em 이라 크기 변화에는 따라간다. */
.feedus-about .fa-pill {
  position: relative;
  display: inline-block;
  padding: .24em .42em .05em;
  margin-bottom: .18em;
}
.feedus-about .fa-pill::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--feedus-bg, #f4f1ea);
  border-radius: var(--radius, 6px);
}
.feedus-about .fa-pill > span { position: relative; }
.feedus-about .fa-outro .fa-body {
  margin-top: clamp(26px, 3.6vw, 44px);
  max-width: 560px;
  color: var(--feedus-bg, #f4f1ea);
}

/* 서클 포토 콜라주 */
.feedus-about .fa-orbits {
  position: relative;
  margin-top: clamp(30px, 4vw, 40px);
  height: clamp(300px, 60vw, 470px);
}
.feedus-about .fa-orbit {
  position: absolute;
  border-radius: var(--radius-circle, 50%);
  overflow: hidden;
}
.feedus-about .fa-orbit img { width: 100%; height: 100%; object-fit: cover; }
.feedus-about .fa-o1 { /* 큰 원 — 마우스 */
  width: clamp(204px, 42vw, 330px);
  left: 24%; top: 6%;
}
.feedus-about .fa-o2 { /* 좌하 — 귀뚜라미 */
  width: clamp(109px, 22vw, 176px);
  left: 2%; top: 46%;
}
.feedus-about .fa-o3 { /* 우상 — 밀웜 */
  width: clamp(80px, 16vw, 128px);
  right: 8%; top: 0;
}
.feedus-about .fa-orbit { aspect-ratio: 1 / 1; }

.feedus-about .fa-logo {
  display: block;
  width: clamp(104px, 12vw, 150px);
  margin: clamp(28px, 4vw, 44px) auto 0;
}

@media (min-width: 900px) {
  .feedus-about .fa-outro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .feedus-about .fa-orbits { margin-top: 0; }
}

/* ============================================================
   5. 인터랙션 — 스크롤 리빌 (JS가 .fa-anim 붙였을 때만 발동)
      JS 미로드 시 전부 그대로 보임
   ============================================================ */
.feedus-about.fa-anim [data-fa-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--feedus-ease-out-slow, cubic-bezier(0,0,.3,1)),
              transform .7s var(--feedus-ease-out-slow, cubic-bezier(0,0,.3,1));
  transition-delay: var(--fa-d, 0ms);
}
.feedus-about.fa-anim [data-fa-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* 고스트 영문은 좌→우 슬라이드 */
.feedus-about.fa-anim .fa-ghost[data-fa-reveal] { transform: translateX(-30px); }
.feedus-about.fa-anim .fa-ghost[data-fa-reveal].is-in { transform: none; }
/* 인트로 그리드 래퍼는 움직이지 않는다 — 리빌은 안쪽 카드가 한 장씩 맡는다 */
.feedus-about.fa-anim .fa-introgrid[data-fa-reveal] { opacity: 1; transform: none; }
/* 카드 캐스케이드 — 인라인 --i (0~3) 순서대로 한 장씩 떠오르며 착지한다.
   간격(150ms)이 낱장 지속시간(.42s)보다 짧게 겹쳐야 "촤라라락" 으로 읽힌다.
   간격을 지속시간에 가깝게 늘리면 뚝뚝 끊기고, 줄이면 네 장이 한꺼번에 뜬 것처럼 보인다. */
.feedus-about.fa-anim .fa-introgrid[data-fa-reveal] .fa-card {
  opacity: 0;
  transform: translateY(20px) scale(.94);
  transition: opacity .42s var(--feedus-ease-out-slow, ease-out),
              transform .42s var(--feedus-ease-out-slow, ease-out);
  transition-delay: calc(var(--i, 0) * 150ms);
}
.feedus-about.fa-anim .fa-introgrid[data-fa-reveal].is-in .fa-card {
  opacity: 1;
  transform: none;
}
/* 사진 켄번즈 세틀 */
.feedus-about.fa-anim .fa-photo[data-fa-reveal] img,
.feedus-about.fa-anim .fa-introgrid[data-fa-reveal] img {
  transform: scale(1.06);
  transition: transform 1.15s var(--feedus-ease-out-slow, cubic-bezier(0,0,.3,1));
}
.feedus-about.fa-anim .fa-photo[data-fa-reveal].is-in img,
.feedus-about.fa-anim .fa-introgrid[data-fa-reveal] img { transition-delay: calc(var(--i, 0) * 150ms); }
.feedus-about.fa-anim .fa-introgrid[data-fa-reveal].is-in img { transform: scale(1); }
/* 아웃트로 필 — 형광펜 긋기 */
.feedus-about.fa-anim .fa-outro-h[data-fa-reveal] { opacity: 1; transform: none; }
.feedus-about.fa-anim .fa-outro-h[data-fa-reveal] .fa-pill::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--feedus-ease-out-slow, cubic-bezier(0,0,.3,1));
  transition-delay: var(--d, 0ms);
}
.feedus-about.fa-anim .fa-outro-h[data-fa-reveal] .fa-pill > span {
  opacity: 0;
  transition: opacity .4s ease;
  transition-delay: calc(var(--d, 0ms) + 260ms);
}
.feedus-about.fa-anim .fa-outro-h[data-fa-reveal].is-in .fa-pill::before { transform: scaleX(1); }
.feedus-about.fa-anim .fa-outro-h[data-fa-reveal].is-in .fa-pill > span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .feedus-about.fa-anim [data-fa-reveal],
  .feedus-about.fa-anim [data-fa-reveal] .fa-card,
  .feedus-about.fa-anim [data-fa-reveal] img,
  .feedus-about.fa-anim .fa-outro-h[data-fa-reveal] .fa-pill::before,
  .feedus-about.fa-anim .fa-outro-h[data-fa-reveal] .fa-pill > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}