:root {
  /* ------------------------------------------------------------------ */
  /* Color                                                               */
  /* ------------------------------------------------------------------ */
  --color-primary: #2e2a24; /* 갯벌 — --color-text·푸터 배경과 동일한 진한 톤. CTA, 활성 상태, 섹션 헤더 한글 섹션명 */
  --color-primary-hover: #4d4a45;
  --color-brand: #599821; /* 에버가닉 — 로고 원본 색. 브랜드 섹션·로고 주변 한정. 텍스트 사용 금지(대비 부족), 브랜드 텍스트는 --color-brand-strong */
  --color-brand-strong: #112f13; /* 에버가닉 로고 글자색 — 브랜드 초록 텍스트 전용 (on #F4F5F1 13.32:1, 초록 그라데이션 30% 위 9.69:1) */
  --color-text: #2e2a24; /* 갯벌 — 본문·제목 */
  --color-text-secondary: #5c5245; /* 개흙 — 보조 텍스트·캡션 */
  --color-bg: #e9eae5; /* 소금 — 페이지 배경 */
  --color-bg-subtle: #f4f5f1; /* 소금과 흰색 사이 — 01-B 지표 바, 03 BRAND·04 PRODUCT 섹션 배경, 02-B 카드 배경 */
  --color-surface: #ffffff; /* 카드·폼 배경 */
  --color-border: #d5d7cf;
  --color-secondary-hover-bg: #dedfd8;
  --color-header-glass: rgb(244 245 241 / 0.8); /* 스크롤 후 헤더 — bg-subtle 80% + blur 16px. 0.8 미만 금지(최악 조건 GNB 활성 대비) */

  /* 어두운 배경(--color-text 면) 전용 — 푸터 등. 넓은 면 채우기 금지, 작은 면적(링크·포커스·활성)에만 */
  --color-primary-on-dark: #ba9773; /* 갯벌/개흙 명도 상향 (on #2E2A24 5.27:1) */
  --color-primary-on-dark-hover: #cbad8e; /* (on #2E2A24 6.72:1) */
  --color-text-on-dark: #ffffff; /* (on #2E2A24 14.26:1) */
  --color-text-on-dark-secondary: #b5afa4; /* (on #2E2A24 6.54:1) */
  --color-border-on-dark: rgba(255, 255, 255, 0.12);

  --color-bg-earth: #5c5245; /* 개흙 — 04-B 풀블리드 2분할 밴드의 텍스트 면 전용 */
  --color-error: #b3261e; /* 폼 오류 텍스트 — 흰 배경(--color-surface) 대비 6.54:1 */

  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ------------------------------------------------------------------ */
  /* Typography — "Pretendard", sans-serif 단일 가족                    */
  /* ------------------------------------------------------------------ */
  --font-family: 'Pretendard', sans-serif;
  /* 예외 — 02-A 칸 번호(01·02·03) 전용. 다른 요소에 쓰지 않는다 (CLAUDE.md 타이포그래피) */
  --font-accent: 'Caveat', 'Pretendard', cursive;

  --font-size-display: 44px;
  --font-size-display-mobile: 32px;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-body: 15px;
  /* 서브카피(섹션·히어로 제목 아래 설명) — 모바일 15px / 768px~ 18px (2026-09-26 통일).
     값은 아래 768px 미디어쿼리에서 바뀐다 */
  --font-size-subcopy: var(--font-size-body);
  --font-size-caption: 13px;

  --line-height-display: 1.25;
  --line-height-h1: 1.3;
  --line-height-h2: 1.4;
  --line-height-h3: 1.5;
  --line-height-body: 1.6;
  --line-height-caption: 1.5;

  --font-weight-display: 700;
  --font-weight-h1: 700;
  --font-weight-h2: 600;
  --font-weight-h3: 500;
  --font-weight-body: 400;
  --font-weight-caption: 400;

  /* 섹션 헤더 전용 — Display(히어로)보다 작게 유지해 히어로 위계를 지킨다 */
  --font-size-section-title: 36px;
  --font-size-section-title-mobile: 28px;
  --line-height-section-title: 1.4;
  --font-weight-section-title: 700;

  --font-size-section-label: 18px;
  --font-size-section-label-mobile: 16px;
  --line-height-section-label: 1.5;
  --font-weight-section-label: 600;

  /* ------------------------------------------------------------------ */
  /* Spacing — 4px 기준 스케일                                          */
  /* ------------------------------------------------------------------ */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* 레이아웃 간격 — 반응형(모바일 기본값, 768px·1280px에서 :root를 덮어씀).
     --space-section: 섹션 상하 padding / --space-block: 섹션 안 블록 사이(02-A↔02-B 등) /
     --space-header: 섹션 헤더 → 본문 */
  /* 상하좌우 여백 절반 축소 요청 — 섹션 상하 여백만 절반으로(블록 간격·헤더 간격은 유지) */
  --space-section: 48px;
  --space-block: 64px;
  --space-header: 48px;

  /* ------------------------------------------------------------------ */
  /* Layout                                                              */
  /* ------------------------------------------------------------------ */
  /* 좌우 여백은 전 섹션 공통으로 --edge-padding 하나만 쓴다(가로 최대값을 한정하는
     컨테이너 규칙 폐지 — 히어로·헤더와 하단 섹션의 여백을 통일) */
  --edge-padding: clamp(20px, 3vw, 80px);
  /* 04-B 함초 이야기 밴드의 텍스트 면 전용(half-width 칼럼 안쪽 여백, 아래 참고) */
  --container-padding: clamp(20px, 3vw, 60px);
  --grid-columns-desktop: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;

  /* Breakpoints (참고용 — 미디어쿼리는 값을 직접 사용)
     Mobile  0–767px
     Tablet  768–1279px
     Desktop 1280px~ */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1280px;

  /* ------------------------------------------------------------------ */
  /* Component tokens                                                    */
  /* ------------------------------------------------------------------ */
  --radius-button: 4px; /* 모든 CTA 버튼(.btn) 공용 — 8px에서 축소, R값을 거의 없앤 수준으로 유지 */
  --radius-card: 12px;
  --touch-target-min: 44px;
  --header-height: 64px;
}

@media (min-width: 768px) {
  :root {
    --font-size-subcopy: var(--font-size-h3);
    --space-section: 64px;
    --space-block: 80px;
    --space-header: 56px;
  }
}

@media (min-width: 1280px) {
  :root {
    --space-section: 80px;
    --space-block: 96px;
    --space-header: 64px;
  }
}

/* @fontsource/caveat(OFL, npm 번들 — CDN 미사용)의 latin-500 woff2에서 pyftsubset으로
   숫자(0-9) 글리프만 뽑아낸 파일. unicode-range도 숫자로 좁혀서, 02-A 번호(01·02·03)를
   렌더링할 때만 브라우저가 이 @font-face를 매칭·다운로드한다. 원본 latin-500(50.9KB) 대비
   2.4KB — 문자셋 자체가 숫자 10개뿐이라 file 자체도 진짜 서브셋이다(latin-500 CSS를 그대로
   쓰지 않고 이 파일만 새로 만든 이유) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('data:font/woff2;base64,d09GMgABAAAAAAl8AA4AAAAAEDwAAAklAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgP1NUQVQcADQRCAqXTJB4ATYCJAMsCxgABCAFgyAHIBvfC1GUjFaY4sdh7JgeLsYQeSCwuTZYUttYWTJ+8iE8/ZfcpeDYDkDbieVAf9j0+2y1XztzNnN4VfeyvfgIqhqEvJwgORWJMIsJMlIevu+0ekuvoet46TF0kFg0ptKXZ5ypa8dp20qNX7+m9m+Ax4PNnBJxMT7GHNDLBqjwi+iAFbCTkXW9qIJiHF8jXI1xNbMtNEyLSa63Fcx+PAUMABHicAJjMKXnQwAbAP7/R2VCmQA+YFuTtanp0g42KOF8yqxh/oID2FHsbQBpvVaYSmjwAWEugxvp7+QacQAqRFkH/n0ByDlmH5hiJrBPp11AQDUnq5pWCBex3ZuauzAMoG8AJQKCmgJttjOOWnBV9b/qvwhmISAFy30WZ1IBkAT5p41AnyCoNUmFap35gyxEosJMbUoqRuDuLb/z/7j9XvMsK/pUvfLNzHWHmt1Qk2vXa2FYfbKVHkxeUMDM4JaZxbgchximXc1bPTdt0unU6GiZeqKRJijAydaYC6Kt1WULw8wuh42B6WWKVCL2CaNKAfnGj/JJV5dpR/ckCj1e2PNKVuhrTfX12qrWx327t2Kj+crf3La0RF2eI7vHBdyr3gK8WsG74vNJk9WN1sN1zaImhpNwvbgTguJsNwcFqL/r+jvfRtKqVnrj9bxXgZuyxmW9O2xOd4so6bovAhKRsDOb5YyLtba7Fl7wVrZRp1X99e77uma4FhtdzFCLeID279vdrdeegiIDZQ7WKphDhYP+Wu5RrfVyWtbvl4irWR1Kj0MFSDIl3pdTI7vD2zM5vMzPmWhOFryzi7XaJb+uB62OD2tNIr1cJmYu2bUNDeyMyGa4TVJPo4tmddG1UUQOe2XULX1pibZ5TriurLhVzOATz0eDPGKYboeNjoqds0rvBNg4HkUdadPcrBe7HRGtugwgeeaFrRlWxGhPGWbxfbWxYvlr3Llo+UZnPlu7WIs6hn6+GY3W+cVdLzanMdPfr9P3ndREwVmbVhC27OobOZkkadoMNUoUqQZRg9XaGkCQCnbfjFZeSoWa8LaLKXQGhdCxnYONeh5fXXu5gVr1u2OLcFDcGBc0JWKt21CRgu7L0OnIY1OsXb3+l3d3Km12CokWkd5eGVMyW17pamqYjcRKPfSdg8rqVY7fbBsQ1a+r7CduSFfJWUNe+6uZ6a8FXHnCnBkdhnI+6ct2rRid0UEOlzYuxg4AEyoUZYx/8+/R9kiRsq5ws9asks1+vbsae0iM30bjdxrH7fhek0R2jZJSVAU3b3FnFouQ+SzxCZBF+omgyZPvvpsRvHDTZtSb5vV9qOsi842ct8xvX+L5m1hxxWx2TsZduXy/6WXAS9fzi945/7cvs+WS+cZ/vcLBFtwXnsxan9z3x7Rb1xY94PP6a6Ikm86iuRGlYqFp9tRITxEN50eEGEPIlIUEhy06wXxmiVaSIg5vtF+4ct2B672qxGIu1s6xSXM0KUncpY7jZMJS8yHULvM23T+npO5yc6vKlHDWfaUEF1NdLyW/CIlOqwyZMQbacHucpXbemJPA+plZwst2S64NOXW3xKxyUQcd+TvUuNPXlKYiwrfczR2RTul++f0OrmvV/sG+oK5TMN9c/eejp0cLdd14hLWGaJJgfDs91PSJh5dHddICpe3M3ncUfl0Ku4f6XHrTQT23YPaDkUbFDjGjQ9rsiu8zhxit17kbapmkcax1eNCTm9wWNys3KP74i45SnL75Z143O1Ztt8E8fPigst2e+OTYvu0Qz3ueq0gVau3cVgYdmlk/48KAz8cKp1rS2ydvTPu9YPgX2ZSBvhREtNbPI1TcQLSHu1hZtju/5HKodsOV0NpAT4V6/JVz9fPKWLQ/M5yUFt5bN9xjf7o5tCioyYn5Z+g0hqEanp1JbNjl0L36eDVhw0nph0JJ17pGtX6w1gxqm3jvu7BjVkHbZmnuADbr89baDkfJjjOP+6dPHBxKibC4sSxFPPjl9pP37BNbamX3+aflPg1YbuUgDONcEj1IhAflK1dmbxj2+UvbvSEcNoSZ8bya6ocfViDxEDiFvNvi3RcyXQYemLG/r/JV5w1SndQrVeOpQqFt9AgBj/CaXAdPG7f/u9Cg9Sy60l6vSrXTsXBtBVR/y9c90zwltfMOmy6pRlPM6jk8HH1n6vGie/XHX/ZY1VGV6qGccOfmwhAyCTlH1r0fft/yzG54viD0TM3gpxPzvu/TPEuZX7Smz+SxQ9X14BYNm5Qdxlr27HhYhYV2wWGZKbx2LDm8cFHiip01/I6aHzkLPs6vVpjsl+Kh1cbiCo13pXOevcXApe7fdQNyfQntkCMzF3Py7IszLvb9eWLtzIkfWlc4HqvMbsfy7DJsA+oehkXAYKliSyZkBfld3apPAZlmJC0svgYIPO6kTvKuxtFaU6K7Z2oYUfcytrRqKaEjFeGl1i4dG5Um93PY6FEtkuZX53hIslrqnholPdeye6NnUZwM3qb8/tx7eUHKaH6HYhpnNdJSVN4ePVl/uqNpJN3agbJrd6rByzu4sZUi84nftgMYqlMcOTy44kQKs3ZCYNeXsdP2lN1OKh6uw+nUtfPCG3e7kT19C1YtN+mOlFp2/1AqcBam2yddTZXfynXoMLgcQoFVb0QuS3wxi7U57E8kSr6lXGudPOdycMcnMZfjshVHM3WTpnzauOXpJS//avOz/9am+FX+vck7Vk2/UndRqtcXzR//Ye+FZxL3XtWcPdzYqqbHpzYZIR1UUNnJ0tkfIcH+4Pvzlxur5LFfBYS8AIBrJbGfAOB289WY/+P/3SMVZAQADxFT66vkuiCRv1V6vrFaLWbL/h9kxjBc0BLqRuPbr2UGMYiZRS86iG3K3n045eJoYqYQfGSDOmSWXS3ASxAQFYa0yGQUQgyLlAjmYkCxsBmn9tsgEvzgL5GYIKt3YAAJEwQ92qMDeqITWtCEZnSBCzRQQY1QQj5PDdN61KCbzzWQzEYnU7Ri/XVSi6492Yz2SnRm2ceZWqMDJ6MR7Pc2oQVT4elaBKEu4bYqtYf2NN0GDWjM0Q5EZ+X+uikP810AMoLV9WhBV7RFLqEpkG1QQ7MaBEFVI8YQJQiM/Q0usgOpUF80t0y/z8XJdg1FkXNYDYIq3/+t0AAAAA==') format('woff2');
  unicode-range: U+0030-0039;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* 헤더 GNB 등에서 클릭하는 앵커 대상 — 헤더가 고정이라 도착 지점이 헤더에 가리지
   않도록 헤더 높이만큼 여백을 둔다. id가 <section>에 있는 대상은 섹션 최상단부터
   자체 padding-top이 있어 실제 제목과의 간격은 그만큼 더 벌어질 수 있다(각 섹션의
   상단 여백 설계를 건드리지 않기 위해 여기서 보정하지 않음 — 실측은 docs 참고) */
#company,
#brand,
#product,
#cooperative,
#history,
#contact,
#home-product {
  scroll-margin-top: var(--header-height);
}

/* 앵커 도착 후 JS가 섹션 제목(h2, tabindex="-1")으로 포커스를 옮긴다(Header.jsx) —
   마우스 클릭으로 생긴 포커스는 :focus-visible이 아니므로 링을 보이지 않게 한다.
   세 클래스는 섹션 제목에 쓰는 실제 클래스들(대부분 .text-section-title,
   03 BRAND만 로고를 감싼 .brand__logo-heading). (2026-09-22, 12차 수정)
   .product__section-title은 히어로와 같은 flex+gap 구조로 바뀌면서
   .text-section-title을 더 이상 같이 쓰지 않게 되어, 이 목록에 직접 추가했다 */
.text-section-title:focus:not(:focus-visible),
.brand__logo-heading:focus:not(:focus-visible),
.product__section-title:focus:not(:focus-visible) {
  outline: none;
}

/* 큰 화면 확대(2026-09-26 시험) — 1600px 이상에서 페이지 전체를 단계별로 확대한다.
   디자인은 1280–1599px 기준으로 잡혀 있고, 그보다 넓은 화면에서 요소가 작아 보이는 문제 대응.
   zoom은 화면을 사진처럼 늘리는 게 아니라 레이아웃을 그 배율로 다시 그리므로 글자·SVG는 선명.
   --page-zoom 값은 화면 높이 기준 요소(100svh 등)의 보정에도 쓴다 */
:root {
  --page-zoom: 1;
}

@media (min-width: 1600px) {
  :root {
    --page-zoom: 1.1;
  }
}

@media (min-width: 1920px) {
  :root {
    --page-zoom: 1.25;
  }
}

@media (min-width: 2560px) {
  :root {
    --page-zoom: 1.5;
  }
}

html {
  zoom: var(--page-zoom);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 전역 자간(2026-09-25) — 글자 크기 24px 이상(H2 24·H1 32·Section Title 36·Display 44·
   Contact 72 등 큰 글자)은 -2%, 24px 미만(H3 18·Body 15·Caption 13 등)은 -1%.
   clamp 한 줄로 요소마다 자기 글자 크기(1em)를 보고 두 값 중 하나를 고른다:
   (23.5px - 1em) × 100이 24px 이상이면 큰 음수 → 하한 -0.02em, 그 미만이면 큰 양수 →
   상한 -0.01em으로 잘려 사실상 계단식. 클래스 목록을 따로 관리하지 않아도 큰 글자가
   새로 생기면 자동 적용된다. 경계를 바꾸려면 23.5px만 수정.
   body에 걸면 em이 body 글자 크기로 한 번 계산된 절대값이 그대로 상속되므로 모든 요소에
   직접 건다. :where()로 명시도 0이라 컴포넌트에서 따로 지정한 자간(제품 패널 번호·
   Overview 라벨 등 5곳)이 항상 이긴다 */
:where(*, *::before, *::after) {
  letter-spacing: clamp(-0.02em, calc((23.5px - 1em) * 100), -0.01em);
}

/* 따로 자간을 지정한 요소 중 자식이 있는 곳은 자식이 위 규칙 대신 부모 값을 물려받게 한다
   (에버가닉 이름 공식 0.01em — 필기체 부분은 자체 지정값 0 유지) */
:where(.evergainc-story__formula *) {
  letter-spacing: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
}

.text-display {
  font-size: var(--font-size-display-mobile);
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-display);
  margin: 0;
}

@media (min-width: 768px) {
  .text-display {
    font-size: var(--font-size-display);
  }
}

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-caption);
  color: var(--color-text-secondary);
}

.text-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1);
  margin: 0;
}

/* 시각적으로 숨기되 스크린 리더에는 읽히게 — 01-B 카운트업의 최종값 텍스트 등 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* 섹션 헤더 3단 구조 — 한글 섹션명 → 제목 → 설명                      */
/* 간격을 유틸리티 자체에 내장해 모든 섹션이 동일하게 쓴다.              */
/* 설명(마지막 단)은 컴포넌트별 subtitle 클래스가 담당(뒤 콘텐츠와의     */
/* 간격이 섹션마다 달라 여기서 강제하지 않음)                           */
/* ------------------------------------------------------------------ */
/* 2026-09-21 — 섹션 헤더 한글 라벨(.text-section-label) 전면 삭제 요청에 따라
   이 유틸리티 클래스 자체를 폐지. 섹션 헤더는 이제 제목(.text-section-title)→
   설명→CTA만 남는다. --font-size-section-label(-mobile)·--font-weight-section-label·
   --line-height-section-label 변수는 이 클래스 전용이라 같이 삭제하지 않고 남겨둠
   (다른 곳에서 참조하지 않으면 다음 정리 때 같이 제거) */
.text-section-title {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-section-title-mobile);
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
}

@media (min-width: 768px) {
  .text-section-title {
    font-size: var(--font-size-section-title);
  }
}

/* 섹션 헤더 설명(라벨→제목→설명)의 줄바꿈 지점 — 1280px 이상에서만 유지,
   그 미만은 word-break: keep-all에 맡기는 자연 줄바꿈 */
.text-break-desktop {
  display: none;
}

@media (min-width: 1280px) {
  .text-break-desktop {
    display: inline;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  padding-inline: var(--edge-padding);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: 12px 20px;
  border-radius: var(--radius-button);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.btn:active {
  transform: scale(0.98);
}

/* 화살표(→)가 있는 CTA 전반에 적용하는 공용 클래스 — 호버·포커스 시 화살표가
   가리키는 방향(오른쪽)으로 살짝 이동한다. 히어로 "더보기" 버튼(아래 방향,
   Hero.css .hero-more__icon)과 같은 패턴. 카드형 CTA(Company·Product)는 카드
   전체가 호버 대상이라 각 컴포넌트 CSS에서 별도로 트리거 규칙을 추가한다 */
.cta-arrow-icon {
  display: inline-block;
  transition: transform 0.2s ease-out;
}

.btn:hover .cta-arrow-icon,
.btn:focus-visible .cta-arrow-icon {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-secondary-hover-bg);
}

/* 어두운 면(--color-bg-earth 등) 전용 Secondary — --color-primary는 이제 --color-text와
   동일한 색이라 이 배경 위에서 대비가 전혀 없고(1:1), --color-primary-on-dark도 대비
   미달(2.83:1)이라 흰색 계열 토큰만 쓴다 */
.btn-secondary-on-dark {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}

.btn-secondary-on-dark:hover {
  background: var(--color-border-on-dark);
}

.btn-secondary-on-dark:focus-visible {
  outline-color: var(--color-text-on-dark);
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* backdrop-filter 미지원 브라우저는 폴백 없이 투명 그대로 */
  background: transparent;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  /* backdrop-filter는 transition 대상에 넣지 않음(성능 — 블러는 자체 합성 레이어를
     매 프레임 다시 계산해야 해서 애니메이션 대상으로 두면 비용이 큼) */
  transition: background-color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}


@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header {
    /* 블러만으로 뒷배경(갈대 등 잔결 많은 이미지)을 뭉개 대비를 확보 — 어두운 막 없음 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* 스크롤 후 — 반투명 + 블러(유리 느낌). --color-header-glass = --color-bg-subtle 80% */
.header--scrolled {
  background: var(--color-header-glass);
  border-bottom-color: transparent;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header--scrolled {
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
  }
}

/* 폴백 1 — backdrop-filter 미지원 브라우저는 반투명만으로는 대비를 보장할 수 없어
   완전 불투명으로 전환 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header--scrolled {
    background-color: var(--color-bg-subtle);
  }
}

/* 폴백 2 — 투명 효과 축소 설정. 블러 자체가 아니라 "반투명 뒤로 콘텐츠가 비쳐 보이는"
   상태를 줄여 달라는 사용자 선호이므로 완전 불투명 + 블러 제거로 대응 */
@media (prefers-reduced-transparency: reduce) {
  .header--scrolled {
    background-color: var(--color-bg-subtle);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 모바일 메뉴가 열려 있는 동안 — 전폭 불투명 오버레이(.mobile-menu, z-index 200)가
   헤더를 완전히 가리므로 시각적으로는 무관하지만, 가려진 상태에서도 backdrop-filter는
   계속 합성 비용이 들어 꺼둔다. .header--scrolled보다 뒤에 선언해 두 클래스가 함께
   붙어도(스크롤한 채로 메뉴를 열었을 때) 이 규칙이 이긴다 */
.header--menu-open {
  background-color: var(--color-bg-subtle);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
  /* .container(max-width 1200px)를 쓰지 않고 화면 가장자리 기준으로만 패딩 적용 —
     히어로 텍스트와 같은 정렬선을 쓰기 위함 */
  padding-inline: var(--edge-padding);
}

.header__wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* (2026-09-24) 영문 전용 로고로 교체 후 — 잎 아이콘이 위에, 두꺼운
   글자가 아래에 몰려 있어 박스를 그대로 세로 중앙 정렬하면 시각적
   무게중심이 아래로 쏠려 보인다. 크기를 살짝 줄이고 위로 2px 옮겨
   광학적으로 중앙처럼 보이게 보정 — 32/36/40px는 스케일 예외
   (CLAUDE.md 헤더 워드마크 이미지 고정 높이, 모바일/태블릿/데스크톱) */
.header__wordmark img {
  display: block;
  height: 24px;
  width: auto;
  transform: translateY(-4px);
}

.header__nav {
  display: none;
}

.header__nav-list {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header__nav-item {
  padding-block: 8px;
}

.header__nav-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: 600;
  transition: color 0.2s ease;
  padding: 4px 0;
}

.header--scrolled .header__nav-link {
  color: var(--color-text);
}

/* (2026-09-25) 호버·포커스·선택됨 색을 개흙색(--color-text-secondary)으로 통일 */
.header__nav-link:hover,
.header__nav-link:focus-visible {
  color: var(--color-text-secondary);
}

/* 2026-09-21 — 스크롤 후(소금색) 헤더에서는 --color-primary가 --color-text와
   완전히 같은 색(#2e2a24)이라 기본·호버·선택됨(is-active) 상태가 전혀 구분되지
   않는 문제가 있었다. 같은 소금색 헤더 위의 "에버가닉 제품 구매" 버튼(아래
   .header--scrolled .btn-primary)이 기본 갯벌색(--color-primary) → 호버 시
   더 밝은 톤(--color-primary-hover)으로 바뀌는 것과 동일한 패턴을 GNB에도
   맞춘다 — 불투명도는 건드리지 않고(기본도 완전한 갯벌색 그대로), 호버·
   포커스·선택됨일 때만 색 자체가 밝아진다. 투명(스크롤 전, 흰 글자) 헤더는
   흰색→어두운 색으로 이미 대비가 충분해 이 보정이 필요 없다 */
.header--scrolled .header__nav-link:hover,
.header--scrolled .header__nav-link:focus-visible,
.header--scrolled .header__nav-link.is-active {
  /* (2026-09-25) --color-primary-hover(#4D4A45) → 개흙색(--color-text-secondary, #5C5245) */
  color: var(--color-text-secondary);
}

.header__actions {
  display: none;
}

.header__menu-toggle {
  margin-left: auto;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  /* 22px는 스케일 예외 — 본문 타이포가 아니라 아이콘 글리프(☰/✕) 크기 */
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.header--scrolled .header__menu-toggle {
  color: var(--color-text);
}

/* "문의하기" 버튼 — 히어로 위(스크롤 전)에서는 배경 없이 텍스트만 노출(2026-09-20
   변경 — 기존 유리 칩 스타일 폐지). "에버가닉 제품 구매"(.btn-primary, 아래)가 이
   자리에서 유리 칩 스타일을 대신 가져가면서, 문의하기는 보조 동선답게 더 가벼운
   텍스트 링크로 내렸다 */
.header .btn-secondary {
  color: #fff;
  background: transparent;
  border-color: transparent;
  transition: color 0.3s ease, opacity 0.2s ease;
}

.header .btn-secondary:hover {
  opacity: 0.75;
}

.header .btn-secondary:focus-visible {
  outline-color: #fff;
}

.header--scrolled .btn-secondary {
  color: var(--color-text);
  background: rgba(46, 42, 36, 0.08);
  border-color: transparent;
  opacity: 1;
}

.header--scrolled .btn-secondary:hover {
  background: rgba(46, 42, 36, 0.14);
}

.header--scrolled .btn-secondary:focus-visible {
  outline-color: var(--color-primary);
}

/* "에버가닉 제품 구매" 버튼 — 히어로 위(스크롤 전)에서는 옛 "문의하기"와 같은 유리
   느낌 칩 스타일로 전환(2026-09-20). 어두운 히어로 오버레이(.hero__scrim 등) 위에서
   채워진 개흙색 계열 버튼이 배경과 톤이 비슷해 윤곽이 잘 안 살던 문제 대응 —
   밝은 반투명 칩으로 바꿔 어두운 배경 위에서 도드라지게 한다. 스크롤 후에는 배경이
   밝아지므로 기존 채워진 Primary(index.css 기본값)로 되돌린다 */
.header .btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  transition: color 0.3s ease, background-color 0.2s ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header .btn-primary {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

.header .btn-primary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.header .btn-primary:focus-visible {
  outline-color: #fff;
}

.header--scrolled .btn-primary {
  color: var(--color-surface);
  background: var(--color-primary);
  border-color: transparent;
}

.header--scrolled .btn-primary:hover {
  background: var(--color-primary-hover);
}

.header--scrolled .btn-primary:focus-visible {
  outline-color: var(--color-primary);
}

@media (min-width: 768px) {
  /* 1fr auto 1fr — 가운데 열(GNB)이 로고·액션 폭과 무관하게 항상 헤더 정중앙에 온다 */
  .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .header__wordmark {
    justify-self: start;
  }

  .header__nav {
    display: flex;
    justify-content: center;
  }

  .header__actions {
    display: flex;
    justify-self: end;
    gap: var(--space-2);
  }

  .header__menu-toggle {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }

  .header__wordmark img {
    height: 28px;
  }
}

@media (min-width: 1280px) {
  .header__wordmark img {
    height: 28px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile menu overlay — .header와 별개의 최상위 형제 요소.             */
/* 워드마크·닫기 버튼이 오버레이 안에 있어 배경이 항상 불투명하게 깔림. */
/* ------------------------------------------------------------------ */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  /* (2026-09-25) 갯벌색 배경 + 흰 글자. 어두운 배경 규칙에 따라 on-dark 토큰만 쓰고,
     포커스 링은 --color-primary-on-dark */
  background: var(--color-text);
  color: var(--color-text-on-dark);
  --focus-ring-color: var(--color-primary-on-dark);
}

.mobile-menu--open {
  display: block;
}

.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.mobile-menu__wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* 모바일 열린 메뉴 — 갯벌색 배경이라 흰 로고(투명 헤더 모드와 동일, 2026-09-25).
   위 헤더와 같은 이유로 크기·위치 보정 동일 적용 */
.mobile-menu__wordmark img {
  display: block;
  height: 24px;
  width: auto;
  transform: translateY(-4px);
}

.mobile-menu__close {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  /* 22px는 스케일 예외 — 본문 타이포가 아니라 아이콘 글리프(✕) 크기 */
  font-size: 22px;
  color: var(--color-text-on-dark);
  cursor: pointer;
}

.mobile-menu__nav {
  padding-top: var(--space-4);
}

.mobile-menu__categories {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  /* (2026-09-25) 문의하기 ↔ CTA 사이 구분선 삭제 */
}

.mobile-menu__category-item {
  border-bottom: 1px solid var(--color-border-on-dark);
}

.mobile-menu__category-item:last-child {
  border-bottom: none;
}

.mobile-menu__category-link {
  display: block;
  padding: 16px 0;
  color: var(--color-text-on-dark);
  font-size: var(--font-size-h2);
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu__category-link:hover,
.mobile-menu__category-link:focus-visible {
  /* 갯벌 배경 위라 개흙색은 대비 부족 — 어두운 배경 규칙의 --color-primary-on-dark (5.27:1) */
  color: var(--color-primary-on-dark);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
}

.mobile-menu__actions .btn {
  width: 100%;
  min-height: 48px;
  text-align: center;
  justify-content: center;
}

/* 소금빛 배경 위 secondary 버튼 — 글자·테두리 모두 먹색 */
.mobile-menu__actions .btn-secondary {
  color: var(--color-text);
  border-color: var(--color-text);
}

.mobile-menu__actions .btn-secondary:hover {
  background: var(--color-secondary-hover-bg);
}

/* (2026-09-25) CTA — 히어로 "더보기"(.hero__more) 버튼과 같은 스타일: 테두리 없음,
   반투명 흰 배경 + blur, 흰 글자, hover 시 배경만 조금 더 밝게. 화살표 모션은 .btn 공통 */
.mobile-menu__cta {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color 0.2s ease;
}

.mobile-menu__cta:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mobile-menu__cta:focus-visible {
  outline-color: #fff;
}
.policy-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(46, 42, 36, 0.5);
}

.policy-modal {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.policy-modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.policy-modal__title {
  margin: 0;
}

.policy-modal__close {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--color-text);
  cursor: pointer;
}

.policy-modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  color: var(--color-text-secondary);
}

.policy-modal__body p {
  margin: 0 0 var(--space-2);
}

/* (2026-09-28) 개인정보처리방침 본문 안 조항 제목(1. 2. 3. ...) — 브라우저 기본 h3
   스타일 대신 디자인 시스템 H3 톤(18px/500)에 맞춘다 */
.policy-modal__body h3 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-h3);
  font-weight: 500;
  line-height: var(--line-height-body);
}

.policy-modal__body h3:first-child {
  margin-top: 0;
}
.footer {
  /* 히어로 핀 리빌(position: fixed, z-index: 0) 위로 쌓이도록. 푸터는 <main> 밖(#root의
     형제)이라 main 안 셀렉터로는 잡히지 않아 개별 추가 */
  position: relative;
  z-index: 1;
  /* 새 dark 토큰을 만들지 않고 --color-text(#2E2A24)를 배경으로 재사용 */
  background: var(--color-text);
}

/* 어두운 배경 안에서는 on-dark 포커스 링으로 오버라이드 (--color-primary는 대비 미달) */
.footer :focus-visible {
  outline-color: var(--color-primary-on-dark);
}

/* 상단 블록 — 좌: 로고+기업 정보 / 우: Discover+Contact 컬럼과 Legals 컬럼.
   모바일은 세로로 쌓고(로고 블록 먼저, 그 아래 컬럼들), 768px 이상에서
   좌우로 벌어진다(참고 레퍼런스 레이아웃).
   상단요소→하단 구분선까지의 간격(=이 블록의 아래쪽 여백)을 4배로 키운다.
   위쪽 여백은 그대로 두고 아래쪽만 늘려야 하므로 padding-block(대칭)
   대신 top/bottom을 따로 지정한다 */
.footer__top {
  padding-top: var(--space-5);
  padding-bottom: calc(var(--space-5) * 4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding-top: var(--space-6);
    padding-bottom: calc(var(--space-6) * 4);
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer__logo {
  display: block;
  align-self: flex-start;
  height: 36px;
  width: auto;
  /* 24px(--space-4) 중 flex gap(--space-1)만큼은 이미 확보돼 있어 나머지만 margin으로 더한다 */
  margin-bottom: calc(var(--space-4) - var(--space-1));
}

@media (min-width: 768px) {
  .footer__logo {
    height: 44px;
  }
}

.footer__company {
  margin: 0;
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-caption);
}

.footer__company a {
  color: inherit;
  text-decoration: none;
}

.footer__company a:hover {
  color: var(--color-primary-on-dark-hover);
  text-decoration: underline;
}

/* 우측 2개 컬럼 — 왼쪽 컬럼(Discover+Contact 세로 스택) / 오른쪽 컬럼(Legals).
   모바일은 세로로 쌓고, 768px 이상은 가로로 나란히 배치한다. 두 컬럼
   사이(메뉴↔정책) 간격을 3배로 키운다(--space-6=48px→144px) */
.footer__nav-groups {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) * 3);
}

@media (min-width: 768px) {
  .footer__nav-groups {
    flex-direction: row;
    gap: calc(var(--space-6) * 3);
  }
}

/* 한 컬럼 안에서 Discover 그룹과 그 아래 Contact 그룹 사이 간격(레퍼런스처럼
   Contact가 메뉴 컬럼 하단에 위치) — 컬럼 간 간격과는 별개로 적당히
   넉넉하게만 띄운다 */
.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Legals 오른쪽 — 에버가닉 바로가기 아이콘 버튼 2개. 텍스트 라벨 대신 동그란
   흰 배경 안에 로고만 넣은 아이콘 버튼이라, 다른 컬럼처럼 세로로 쌓지 않고
   나란히 배치한다. 부모(.footer__nav-groups)의 기본 align-items: stretch
   때문에 그대로 두면 옆 Discover 컬럼 높이만큼 늘어나 버려, 그 안의
   align-items: center가 전체 늘어난 높이의 중앙에 아이콘을 놓아 Legals보다
   훨씬 아래로 처져 보인다 — align-self: flex-start로 늘어남을 막아 다른
   컬럼의 nav-heading과 상단이 맞도록 한다 */
.footer__nav-col--links {
  align-self: flex-start;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

/* 아이콘 버튼 — 동그란 흰 배경 위에 로고를 얹는다(어두운 푸터 배경에서도
   로고가 또렷하게 보이도록). 44px는 터치 타깃 최소 크기(--touch-target-min)에
   맞춘 값 */
.footer__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-text-on-dark);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.footer__icon-btn:hover,
.footer__icon-btn:focus-visible {
  transform: translateY(-2px);
  opacity: 0.85;
}

.footer__icon-btn:focus-visible {
  outline: 2px solid var(--color-text-on-dark);
  outline-offset: 2px;
}

.footer__icon-btn-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* 네이버스마트스토어 로고(가로로 긴 2:1 비율 워드마크)는 원 안에서 세로로
   눌려 보이지 않도록 폭 기준으로 살짝 더 키운다 */
.footer__icon-btn-img--naver {
  width: 68%;
  height: auto;
}

.footer__nav-heading {
  margin: 0 0 var(--space-2);
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-caption);
  font-weight: 600;
}

.footer__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__nav-link {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-on-dark);
  font-size: var(--font-size-body);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

/* 버튼으로 만든 정책 링크(개인정보처리방침·이용약관)도 <a>와 같은 글꼴 정렬 */
.footer__nav-link--button {
  text-align: left;
  font-family: inherit;
}

.footer__nav-link:hover {
  color: var(--color-primary-on-dark-hover);
  text-decoration: underline;
}

/* 하단 — 구분선 아래 카피라이트만 좌측 정렬(참고 레퍼런스의 "Website by..."에
   해당하는 우측 항목은 없어 생략) */
.footer__bottom {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border-on-dark);
}

.footer__copyright {
  margin: 0;
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-caption);
}
/* 우측 하단 플로팅 "맨 위로" 버튼 — 동그란 원 버튼 + 위 방향 화살표.
   헤더(z-index 100)·모바일 메뉴(200)·정책 모달(300)보다 낮게 둬 그 위로
   열리는 오버레이에 가려지게 한다 */
.scroll-top-button {
  position: fixed;
  right: var(--edge-padding);
  bottom: var(--edge-padding);
  z-index: 90;
  width: 48px;
  height: 48px;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-text);
  box-shadow: 0 4px 16px rgba(46, 42, 36, 0.24);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}

.scroll-top-button.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-button:hover {
  background: var(--color-secondary-hover-bg);
}

.scroll-top-button-icon {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top-button {
    transition: opacity 200ms ease;
    transform: none;
  }
}
/* 핀 리빌 — 히어로를 뷰포트에 고정하고, 형제 스페이서(.hero-spacer)가 문서 흐름 안에서
   같은 높이만큼 스크롤 공간을 대신 차지한다. 다음 섹션(02 COMPANY, position: relative
   z-index: 1, 불투명 배경)이 스크롤에 따라 이 위로 자연스럽게 덮으며 올라온다.
   01-B 신뢰 지표 바는 폐지 — 이 역할은 이제 .company가 그대로 이어받는다(변경 없음) */
.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  height: calc(100svh / var(--page-zoom)); /* 큰 화면 확대 보정 */
  overflow: hidden;
  color: #fff;
  z-index: 0;
}

.hero-spacer {
  height: calc(100svh / var(--page-zoom)); /* 큰 화면 확대 보정 */
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.hero__overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to bottom,
    rgba(46, 42, 36, 0.45) 0%,
    rgba(46, 42, 36, 0) 100%
  );
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(46, 42, 36, 0.85) 0%,
    rgba(46, 42, 36, 0.4) 40%,
    rgba(46, 42, 36, 0) 70%
  );
}

/* 영상이 밝은 구간(모래·하늘 등)에서도 텍스트 대비가 유지되도록 항상 켜져 있는
   균일한 어둡게 하기(dim) 레이어. 위 두 그라디언트는 상/하단에서만 짙어지는
   방향성 오버레이라 화면 중앙은 그대로 밝게 비쳤다 — 이 레이어가 그 공백을 메운다 */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.28);
}

/* 히어로 전체를 채우는 3단 레이아웃 — 위(지표, 우측 정렬) / 아래(카피 좌측 · 더보기
   버튼 우측). 상하 여백은 컨테이너가 아니라 .hero__top·.hero__bottom 각자가 갖는다 —
   좌·우 여백(edge-padding)과 상·하 여백을 같은 값으로 맞추기 위함(아래 참고) */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* .container(max-width 1200px)를 쓰지 않고 화면 가장자리 기준으로만 패딩 적용 */
  padding-inline: var(--edge-padding);
}

@media (max-width: 767px) {
  .hero__overlay {
    background: linear-gradient(
      to top,
      rgba(46, 42, 36, 0.85) 0%,
      rgba(46, 42, 36, 0) 50%
    );
  }
}

/* 상단 — 지표를 우측 상단에 배치. 헤더가 항상 고정으로 얹혀 있으므로, 헤더 아래로
   "실제로 보이는" 여백이 좌우 가장자리 여백(edge-padding)과 같아지도록 헤더 높이만큼
   더한다. edge-padding 자체가 전역 여백 축소로 절반이 되어, 이전에 썼던 절반값
   보정(/2)은 더 이상 필요 없다 */
.hero__top {
  display: flex;
  justify-content: flex-end;
  padding-top: calc(var(--header-height) + var(--edge-padding));
}

/* 하단 — 카피(좌) · 더보기 버튼(우). 좁은 화면에서는 줄바꿈으로 버튼이 카피 아래,
   여전히 우측 정렬로 떨어진다. 하단 여백을 좌·우 가장자리 여백과 같은 값(edge-padding)
   으로 맞춰, 카피는 좌측·하단이, 더보기 버튼은 우측·하단이 같은 여백을 갖는다 */
.hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--edge-padding);
}

/* 메인 카피(제목, 2줄)와 서브 카피(설명, 최대 2줄)를 세로로 묶는 바깥 컨테이너 */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0;
}

/* 메인 카피 — 한 문장을 2줄로 나눈 것이라 두 줄 모두 같은 크기·굵기로 표시 */
.hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.hero__line1,
.hero__line2 {
  display: block;
  color: #fff;
  font-size: var(--font-size-display-mobile);
  font-weight: 700;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .hero__line1,
  .hero__line2 {
    font-size: var(--font-size-display);
  }
}

/* 2026-09-25 — 큰 화면(1280px~)만 44 → 48px. 1280px에서 첫 줄이 접히지 않는지 확인 필요
   (48px → 44px로 내렸던 이유가 1280px 이하 첫 줄 접힘이었음) */
@media (min-width: 1280px) {
  .hero__line1,
  .hero__line2 {
    font-size: 48px;
  }
}

/* 서브 카피 — 메인 카피보다 작고 옅은 보조 설명 문구 */
.hero__subcopy {
  margin: 0;
  max-width: 640px;
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-subcopy); /* 서브카피 토큰 — 모바일 15 / 768px~ 18 */
  line-height: 1.6;
}

@media (min-width: 768px) {
  .hero__subcopy {
    font-size: var(--font-size-h3);
  }
}

/* ------------------------------------------------------------------ */
/* 히어로 지표 — 우측 상단. 레퍼런스(instituteofhealth.com)처럼 항목마다 위에      */
/* 구분선을 긋고, 라벨 → (숫자 · 캡션) 순으로 쌓는다. 캡션은 레퍼런스의 "···"        */
/* 점 3개 자리를 대신해 숫자 오른쪽에 붙인다.                                      */
/* 01-B TrustBar.css의 색상·카운트업 로직을 어두운 히어로 배경에 맞춰 이전 */
/* ------------------------------------------------------------------ */
.hero-stats {
  display: flex;
  flex-direction: column;
  /* 항목별로 캡션 길이가 달라도 숫자·라벨의 좌측 시작선이 흔들리지 않도록
     블록 자체를 고정 폭으로 두고, 이 블록의 오른쪽 끝만 화면 가장자리에 맞춘다 */
  width: clamp(220px, 32vw, 300px);
}

.hero-stats__item {
  /* 구분선(.hero-stats__line)은 더 이상 border가 아니라 별도 요소 — 진행 바 채우기
     모션(아래 참고)을 넣기 위함. 선~라벨 간격은 좁게(.hero-stats__line의
     margin-bottom), 숫자 행~다음 선 간격은 넓게(이 padding-bottom) 둬서 지표 간
     전체 간격(선~다음 선, 총합 56px — 8px 축소 요청으로 64px에서 조정)을 유지하면서
     레퍼런스처럼 선 바로 아래 라벨이 붙어 보이도록 재배치 */
  padding-bottom: 44px;
}

.hero-stats__item:last-child {
  padding-bottom: 0;
}

.hero-stats__line {
  position: relative;
  height: 2px;
  margin-bottom: 12px;
}

.hero-stats__line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.35);
}

/* 레퍼런스(instituteofhealth.com)처럼 숫자 셔플이 진행되는 동안 구분선이 왼쪽에서
   오른쪽으로 굵게 채워지는 진행 바. width 전환 길이(1200ms)는 Hero.jsx의 셔플
   길이(DURATION)와 반드시 같아야 셔플이 멈추는 순간 채우기도 함께 끝난다.
   왼쪽(채워진 지 오래된 꼬리)은 옅게, 오른쪽(채워지는 순간의 머리)은 완전 불투명하게
   그라데이션을 줘서 진행 방향이 도드라져 보이게 한다 */
.hero-stats__line-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  width: 0%;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 1));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-stats__line-fill {
    /* 처음엔 느리게 시작해 점점 가속하는 ease-in */
    transition: width 1200ms cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
}

/* 등장 모션 — 히어로가 화면에 50% 이상 보일 때마다(Hero.jsx) 위(0번)부터 순서대로
   숨김 클래스가 벗겨진다. 기본(클래스 없는) 상태는 항상 보임 — JS 실패·미지원이어도
   지표가 숨겨진 채로 남지 않는다 */
@media (prefers-reduced-motion: no-preference) {
  .hero-stats__item {
    /* ease-out(빨랐다가 느려짐) — Material 계열 decelerate 곡선 */
    transition: opacity 600ms cubic-bezier(0, 0, 0.2, 1),
      transform 600ms cubic-bezier(0, 0, 0.2, 1);
  }
}

.hero-stats__item--hidden {
  /* 아래에서 위로 올라오며 등장 */
  opacity: 0;
  transform: translateY(24px);
}

.hero-stats__label {
  margin: 0 0 16px;
  /* 전역 --color-text-on-dark-secondary(#b5afa4)는 영상 배경 위에서 가독성이
     떨어져 보여, 지표 라벨·캡션 한정으로 살짝 더 밝은 흰색 계열로 재지정 */
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}

/* 숫자(좌) · 캡션(우) — 레퍼런스의 "숫자 ... 점 3개" 가로 배치 */
.hero-stats__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.hero-stats__value {
  display: inline-flex;
  margin: 0;
  color: #fff;
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: 1.1;
}

.hero-stats__value-visual {
  display: inline-flex;
}

/* 라벨·캡션 등 숫자 이외 요소는 항목과 함께 바로 나타나고, 숫자(단위·+ 포함)만
   항목이 다 올라온 뒤 살짝 지연되어 아래에서 위로 올라오며(translateY) 카운트업
   애니메이션이 시작된다(Hero.jsx ITEM_RISE_MS). opacity·transform 전환 길이를
   똑같이 맞춰(450ms, 같은 곡선) 다 올라온 순간과 opacity 100% 도달 순간이
   정확히 일치하게 한다 */
@media (prefers-reduced-motion: no-preference) {
  .hero-stats__value-visual {
    /* opacity·transform에 같은 곡선을 써서 두 속성이 어긋나 보이던 느낌을 없앤다 */
    transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

.hero-stats__value-visual--hidden {
  /* 숨김 상태 — 완전히 투명하고 최종 위치보다 6px 아래 */
  opacity: 0;
  transform: translateY(6px);
}

.hero-stats__number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.hero-stats__caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-caption);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hero-stats {
    width: clamp(180px, 56vw, 260px);
  }

  .hero-stats__value {
    font-size: var(--font-size-h2);
  }

  .hero-stats__caption {
    white-space: normal;
    text-align: right;
  }
}

/* ------------------------------------------------------------------ */
/* 더보기 버튼 — 헤더 "문의하기" 버튼과 같은 밝은 톤의 유리 느낌 칩 스타일로 통일.
   외곽선 없이 반투명 흰색 배경 + 블러 */
/* ------------------------------------------------------------------ */
.hero__more {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 2026-09-20 — 높이 축소(72px→52px) 요청 대응. gap·padding도 같이 줄여
     레이블·화살표 사이 여백이 낮아진 높이에 맞게 비례해서 좁아지도록 함 */
  gap: var(--space-1);
  min-width: 220px;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hero__more:hover {
  background: rgba(255, 255, 255, 0.18);
}

.hero__more:hover .hero-more__icon,
.hero__more:focus-visible .hero-more__icon {
  transform: translateY(4px);
}

.hero__more:focus-visible {
  outline-color: #fff;
}

.hero__more-label {
  font-size: var(--font-size-body);
  font-weight: 600;
}

/* 호버·포커스 시 아래로 살짝 내려가는 모션(스크롤 유도 느낌) */
.hero-more__icon {
  transition: transform 0.2s ease-out;
}

/* 화살표를 버튼 우측 하단에 고정 — 부모(.hero__more)의 align-self에 기대지 않고
   이 줄 자체를 우측 정렬로 명시 */
.hero__more-icon-row {
  display: flex;
  justify-content: flex-end;
}
/* 홈 — 제품 섹션 요약. 헤더(메인카피·CTA)는 컨테이너형,
   카드 가로 스크롤 행만 엣지형(화면 오른쪽까지 카드가 이어진다) */
.home-product {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-block: var(--space-section);
}

.home-product__header {
  margin-bottom: var(--space-header);
}

/* 메인카피 — 섹션 제목보다 한 단계 크게, 히어로(Display)보다는 작게 둔다.
   라벨·서브카피 없이 이 헤드라인 바로 아래 CTA가 붙는다 */
.home-product__title {
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-size: var(--font-size-section-title-mobile);
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
}

@media (min-width: 768px) {
  .home-product__title {
    /* 히어로 메인카피(Display, 44px)와 같은 크기였던 것을 한 단계 낮춰
       섹션 제목 스케일(Section Title, 36px)로 조정 — 히어로와 위계 구분 */
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-section-title);
  }
}

.home-product__cta {
  gap: var(--space-2);
}

/* 가로 스크롤 카드 행 — 엣지형. 왼쪽만 컨테이너 정렬선에 맞추고, 오른쪽은 화면
   가장자리까지 카드가 이어져 스크롤 가능함을 시각적으로 드러낸다(카드 일부가 잘려 보임).
   /product로 이동하는 유일한 동선은 위 CTA 버튼 — 카드 자체는 링크가 아니다.
   카드 폭은 화면에 카드 5개(가운데 3개 전체 + 양끝 2개는 1/3만) 보이는 크기로
   맞춘 값 — --home-product-card-w(HomeProduct.jsx가 아니라 이 파일에서만 조정) */
.home-product__scroll {
  --card-gap: 40px;
  display: flex;
  align-items: flex-start;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-left: var(--edge-padding);
  padding-right: var(--edge-padding);
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* 스크롤바는 숨기되 스크롤 자체(마우스 드래그·트랙패드·키보드 포커스 이동)는 유지 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-product__scroll::-webkit-scrollbar {
  display: none;
}

.home-product__scroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* 카드 — [사진 카드] + [텍스트 카드] 2단 구성. 순수 표시 요소(링크 아님).
   활성 카드가 아니면 투명도를 낮춰 가운데 카드를 강조하고, 호버 시에는 활성
   여부와 무관하게 살짝 아래로 내려가는 모션을 준다(기본 높이는 전부 동일 —
   호버 중일 때만 위치가 바뀐다) */
.home-product__card {
  flex: 0 0 auto;
  width: clamp(220px, 21.5vw, 340px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  opacity: 0.4;
  transition: opacity 400ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-product__card.is-active {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .home-product__card:hover {
    transform: translateY(12px);
  }
}

/* 사진 카드 — 1:1 이미지 + 제품명, 배경색 있는 카드(항상 보임). 섹션 배경(연한
   베이지 톤)과의 대비를 위해 흰색(#ffffff)을 쓴다 */
.home-product__card-photo {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  /* (2026-09-22) 가운데(활성) 카드에만 얕은 그림자를 줘 더 도드라지게 —
     아래 .is-active 규칙 참고. transition은 여기 둬서 활성 전환 시
     그림자가 부드럽게 나타나고 사라지게 한다 */
  box-shadow: 0 4px 16px rgba(46, 42, 36, 0);
  transition: box-shadow 250ms ease;
}

/* 파트너사 로고 카드(HomePartners.css .home-partners__logo)와 같은 값의
   얕은 그림자 — 가운데(활성) 카드만 떠 보이게 강조한다(2026-09-22) */
.home-product__card.is-active .home-product__card-photo {
  box-shadow: 0 4px 16px rgba(46, 42, 36, 0.08);
}

/* 이미지 래퍼 — 카드 안쪽에 꽉 채우지 않도록 위·좌·우 여백(--space-3)을 두고,
   아래쪽은 바로 아래 제품명과의 간격을 제품명 자체 padding-top이 맡으므로 0 */
.home-product__card-image {
  width: 100%;
  padding: var(--space-3) var(--space-3) 0;
  box-sizing: border-box;
}

/* 사진 자리표시 — 실제 사진이 정해지기 전까지 회색 박스로 대체. 이미지 자체는
   카드보다 한 단계 작은 라운드(8~12px)를 따로 갖는다 */
.home-product__card-image-slot {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-border);
  border-radius: 6px;
  pointer-events: none;
}

/* 실제 제품 사진 — placeholder 슬롯과 같은 자리·크기·라운드를 그대로 쓴다 */
.home-product__card-image-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
}

/* 제품명 줄 — 제품명(왼쪽) + 용량(오른쪽 끝)을 한 줄에 배치. 용량은 아래
   .home-product__card-volume에서 더 작고 연하게 처리해 제품명이 시선을 끌게 한다 */
.home-product__card-name {
  margin: 0;
  padding: var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.home-product__card-name-text {
  /* 모바일 좁은 카드 폭에서 긴 제품명이 두 줄로 넘어가지 않도록 한 단계 축소
     (--font-size-h3 18px → --font-size-body 15px) */
  font-size: var(--font-size-body);
  font-weight: 600;
}

.home-product__card-volume {
  flex-shrink: 0;
  font-size: var(--font-size-caption);
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* 텍스트 카드 — 활성 카드일 때만 제자리(opacity 1 · translateY 0)에 보이고,
   옆으로 밀려나면 위로 올라가며(translateY 음수) 사라진다. 레이아웃 높이는
   항상 예약해둬(활성 카드가 바뀌어도 행 전체 높이가 흔들리지 않는다).
   등장할 때 위에서 아래로 자연스럽게 내려오도록 -20px에서 시작해 제자리로
   떨어지고(감속 곡선), opacity는 그보다 살짝 빠르게 끝나 "내려오며 나타나는"
   느낌이 또렷하게 보이게 한다 */
.home-product__card-text {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: #ffffff;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-product__card.is-active .home-product__card-text {
  opacity: 1;
  transform: translateY(0);
}

/* 설명 텍스트 위에 두는 라벨 — 카드가 "개요"임을 알려주는 작은 헤더. 본문보다
   한 단계 연하고 작게 둬 보조 라벨처럼 보이게 하고, 본문(태그라인)이 상대적으로
   더 눈에 띄도록 한다 */
.home-product__card-overview {
  margin: 0 0 var(--space-1);
  color: rgba(46, 42, 36, 0.4); /* --color-text(#2e2a24)를 40% 불투명도로 —
    --color-text-secondary보다 한 단계 더 연하게 */
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-product__card-tagline {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .home-product__card,
  .home-product__card-text {
    transition: none;
  }
}
/* 홈 — 박사 소개 섹션. 레퍼런스(instituteofhealth.com "What makes our
   certification different")와 동일하게, 중앙 정렬 타이틀 아래 좌(주제
   전환기 + 텍스트 + CTA) / 우(썸네일 스택 + 대표 이미지) 2단 구성.
   회사소개(HomeCompany)와 구분되도록 배경은 소금 위 한 단계(--color-bg-subtle,
   기존 SectionTeaser tone="subtle"과 동일 톤)를 쓴다 */
.home-doctor {
  position: relative;
  z-index: 1;
  background: var(--color-bg-subtle);
  padding-block: var(--space-section);

  /* 썸네일 한 변 길이 — 데스크톱(옆에 세로로 붙는 스택)·모바일(위에 가로로
     붙는 줄) 공통. 이미지 폭 계산(.home-doctor__inner 그리드, 아래 참고)이
     이 값을 그대로 참조하므로 여기서 하나로만 관리한다 */
  --hd-thumb-w: 80px;
}

/* 타이틀 — 다른 섹션 제목(.text-section-title)과 동일한 크기 스케일을 쓴다.
   처음에는 히어로 다음가는 위계를 주려고 한 단계 더 크게(clamp 44px까지) 뒀으나,
   다른 섹션 제목과 크기가 달라 보인다는 피드백에 따라 공용 스케일로 맞춘다.
   중앙 정렬·2줄인 점만 다르다 */
.home-doctor__title {
  margin: 0 0 var(--space-6);
  color: var(--color-text);
  font-size: var(--font-size-section-title-mobile);
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
  text-align: center;
}

@media (min-width: 768px) {
  .home-doctor__title {
    font-size: var(--font-size-section-title);
    margin: 0 0 calc(var(--space-6) * 1.2);
  }
}

.home-doctor__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* 768px 이상 — 우측 컬럼 전체(썸네일+이미지)가 아니라 "대표 이미지 하나만"
   회사소개(HomeCompany) 우측 본문 텍스트 폭과 정확히 같아지도록, 두 컬럼을
   더 이상 균등한 1fr 1fr로 나누지 않는다.
   같은 --edge-padding·gap 공식(calc(var(--edge-padding) * 2))을 쓰는
   .home-company__inner 기준 "균등 분할 폭"을 --hd-half로 구하고, 거기서
   썸네일 폭+썸네일-이미지 간격(8px)만큼을 좌측 컬럼에서 우측 컬럼으로
   옮긴다 — 좌측: --hd-half보다 그만큼 좁게 / 우측: 그만큼 넓게. 그 결과
   우측 컬럼에서 썸네일 자리(--hd-thumb-w + 8px)를 뺀 나머지가 정확히
   --hd-half, 즉 회사소개 본문과 같은 폭이 된다(피드백: 이미지가 회사소개
   우측 본문 폭과 정확히 일치해야 하고, 썸네일은 그 옆에 별도로 붙어야 한다) */
@media (min-width: 768px) {
  .home-doctor__inner {
    --hd-half: calc((100% - calc(var(--edge-padding) * 2)) / 2);
    --hd-extra: calc(var(--hd-thumb-w) + 8px);
    grid-template-columns: calc(var(--hd-half) - var(--hd-extra)) calc(var(--hd-half) + var(--hd-extra));
    gap: calc(var(--edge-padding) * 2);
    align-items: start;
  }
}

.home-doctor__col--left {
  display: flex;
  flex-direction: column;
}

/* 주제 전환기 — 알약(pill)이 아니라 둥근 사각 바 안에 이전/다음 화살표
   버튼 + 현재 주제 라벨. 레퍼런스의 연한 회색 캡슐 형태를 --color-bg(소금)로
   재현. 패딩 8px→6px, radius 16px→12px로 조정(피드백 반영) */
.home-doctor__switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
  padding: 6px;
  border-radius: 12px;
  background: var(--color-bg);
}

.home-doctor__switcher-label {
  flex: 1;
  display: inline-block;
  text-align: center;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-text);
}

/* 라벨 전환 모션 — exit(아래로 내려가며 페이드아웃) → enter(아래에서
   올라오며 페이드인), 둘 다 ease-in. HomeDoctor.jsx가 LABEL_EXIT_MS(200ms)
   후 텍스트를 바꾸며 --exit 클래스를 --enter로 교체한다. animation을 쓰는
   이유 — transition은 "바뀌기 전 상태"가 남아있어야 하는데, 텍스트 교체
   시점에 시작 스타일을 못박아 재생하려면(교체 직후 아래에 있다가 올라오는
   등) 매번 정해진 시작점에서 시작하는 @keyframes가 필요하다 */
.home-doctor__switcher-label--exit {
  animation: home-doctor-label-exit 200ms ease-in forwards;
}

.home-doctor__switcher-label--enter {
  animation: home-doctor-label-enter 200ms ease-in forwards;
}

@keyframes home-doctor-label-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes home-doctor-label-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* </> 버튼 — 문의하기 섹션 FAQ 토글(+/−, HomeContact.css
   .home-contact__faq-icon)과 같은 디자인을 그대로 쓰고 내용만 </>로 바꾼다.
   배경은 두 버튼 모두 --color-border(--color-bg보다 한 단계 어두움).
   radius 8px 유지, 박스 크기는 두 버튼 모두 32px→36px로 조정(피드백 반영) */
.home-doctor__switcher-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.home-doctor__switcher-arrow:hover {
  background: var(--color-secondary-hover-bg);
}

/* 전환기 → 소제목·본문 사이 넓은 간격 — 레퍼런스의 여백감을 재현.
   max-width — 컬럼 폭을 그대로 다 쓰면 뷰포트가 넓어질수록 한 줄에 너무 많은
   글자가 들어가 줄바꿈 지점이 들쭉날쭉해 보인다(첫 줄은 아주 길고 둘째 줄은
   짧아지는 등). 읽기 좋은 최대 폭을 못박아 항상 일정 범위 안에서만
   줄바꿈되게 한다 */
.home-doctor__text {
  max-width: 440px;
  margin-top: var(--space-6);
  margin-bottom: var(--space-5);
}

/* 소제목·본문 등장 모션은 .home-doctor에 is-visible이 붙어있을 때만 걸린다 —
   섹션이 처음 뷰포트에 들어오기 전(HomeDoctor.jsx의 IntersectionObserver가
   아직 hasEntered를 true로 만들기 전)에는 이 규칙 자체가 매치되지 않아
   animation-name이 none인 채로 유지되고, is-visible이 붙는 순간 애니메이션이
   새로 걸리면서(=값이 none→키프레임으로 바뀌는 순간 브라우저가 처음부터
   재생) 그제서야 재생된다. 주제 전환 시에는 .home-doctor__text가 key로
   리마운트되며 안의 heading·body도 함께 다시 마운트되므로, is-visible
   여부와 무관하게 항상 새로 재생된다.

   기존에는 컨테이너(.home-doctor__text) 하나가 통째로 위로 슥 올라오는
   단조로운 모션이었는데, 대신 소제목·본문 각각이 아래에서 튀어 오르듯
   "쫀득하게" 등장하면서 동시에 흐림→선명 전환도 함께 걸리는 모션으로
   바꾼다 — 시작은 아래(50px)·살짝 작고(0.8배)·흐릿한(blur 8px) 상태,
   60% 지점에서 제자리보다 살짝 위(-2px)로, 크기도 1.06배로 소폭
   오버슈트되며(피드백 반영 — 처음엔 -5px/1.2배였는데 튀어 오르는 정도가
   과하다고 해서 줄임) blur도 4px까지 걷히고, 85% 지점에서 1.5px까지
   더 걷혔다가, 100%에서 원래 크기·위치로 안착하며 blur도 완전히
   사라진다(피드백 반영 — 처음엔 60%에서 이미 blur가 0이라 너무 빨리
   선명해졌음, 서서히 걷히도록 단계를 늘림).

   흐림→선명을 "위에서 아래로 흐르듯" 부분적으로 걷어내는 방식(텍스트 위에
   흐린 복제 레이어를 얹고 마스크로 지워나가는 구조)도 시도했었으나, 텍스트
   영역은 흐려지는데 테두리만 도드라져 보이는 등 의도한 것과 다르게 보여
   전부 제거하고, 텍스트 자체에 filter: blur()를 거는 단순한 방식으로
   되돌렸다. 소제목이 먼저 튀어 오르고 본문이 120ms 뒤따라오도록 딜레이를
   줘서 순서감을 살린다 */
.home-doctor.is-visible .home-doctor__heading,
.home-doctor.is-visible .home-doctor__body {
  animation: home-doctor-text-pop 700ms cubic-bezier(0.25, 1, 0.5, 1) both;
}

.home-doctor.is-visible .home-doctor__body {
  animation-delay: 120ms;
}

@keyframes home-doctor-text-pop {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    filter: blur(8px);
  }
  60% {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.06);
    filter: blur(3px);
  }
  /* blur는 80% 지점에서 이미 다 걷혀 완전히 선명해지고(피드백 반영 —
     기존엔 100%에야 다 걷혔는데, 아주 살짝만 더 빨리 선명해지도록 지점을
     앞당김), 위치·크기는 그대로 85%→100%에 걸쳐 마저 안착한다 */
  80% {
    filter: blur(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* is-visible이 붙기 전(=아직 화면에 들어오지 않은 첫 진입 전) 소제목·본문을
   숨겨 둔다 — 그래야 나중에 is-visible이 붙으며 애니메이션이 재생될 때
   실제로 "나타나는" 모션으로 보인다. prefers-reduced-motion 사용자에게는
   애초에 적용하지 않아, 모션이 꺼져 있어도 텍스트가 영영 숨겨진 채로 남는
   일이 없게 한다 */
@media (prefers-reduced-motion: no-preference) {
  .home-doctor:not(.is-visible) .home-doctor__heading,
  .home-doctor:not(.is-visible) .home-doctor__body {
    opacity: 0;
  }
}

/* 소제목 — 회사소개 섹션 우측 본문(HomeCompany.css .home-company__body)과
   같은 크기 스케일(18px→768px 이상 22px)로 축소(기존 --font-size-h1은
   너무 커 보인다는 피드백) */
.home-doctor__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

@media (min-width: 768px) {
  .home-doctor__heading {
    font-size: 22px;
  }
}

.home-doctor__body {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* CTA도 소제목·본문과 같은 모션(아래에서 위로 올라오며 페이드인, ease-out) —
   HomeDoctor.jsx에서 주제가 바뀔 때마다 key로 리마운트시켜 재생시킨다.
   is-visible 게이팅 이유는 위 .home-doctor__text와 동일(첫 진입 전 재생 방지) */
.home-doctor__cta {
  align-self: flex-start;
}

.home-doctor.is-visible .home-doctor__cta {
  animation: home-doctor-rise-in 400ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .home-doctor:not(.is-visible) .home-doctor__cta {
    opacity: 0;
  }
}

@keyframes home-doctor-rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 오른쪽 — 썸네일 4개 + 대표 이미지(1:1 정사각형).
   모바일(기본, <768px) — 썸네일이 이미지 "옆"이 아니라 "위"에 오도록 세로로
   쌓는다(피드백). 썸네일 자체는 가로로 나란히, 좌측 정렬(레퍼런스 사이트가
   아니라 이번 피드백 전용 모바일 레이아웃) */
.home-doctor__col--right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.home-doctor__thumbs {
  display: flex;
  flex-direction: row;
  gap: 2px; /* 썸네일 간 간격 8px→4px→2px(피드백 반영, 썸네일-이미지 간 8px 간격은 유지) */
}

/* 768px 이상 — 기존처럼 썸네일이 세로 스택으로 이미지 왼쪽 옆에 붙는다.
   폭은 더 이상 컬럼 폭의 %가 아니라 고정값(--hd-thumb-w) — 이미지 폭이
   이제 그리드 계산(.home-doctor__inner)으로 정해지는 값이라, 썸네일까지
   %로 얽어두면 이미지 폭이 정확히 회사소개 폭과 같아지지 않는다 */
@media (min-width: 768px) {
  .home-doctor__col--right {
    flex-direction: row;
    align-items: flex-start;
  }

  .home-doctor__thumbs {
    flex: 0 0 var(--hd-thumb-w);
    flex-direction: column;
  }
}

.home-doctor__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  /* (2026-09-22) is-active일 때 바깥으로 그림자가 보이도록 overflow: hidden
     제거 — 대신 라운드는 img 쪽(아래)으로 옮겨 이미지가 버튼 밖으로
     삐져나오지 않게 한다 */
  width: var(--hd-thumb-w);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  /* 선택되지 않은 상태 — 제품 카드(HomeProduct.css .home-product__card)의
     비활성 투명도(0.4)와 동일하게 맞춘다 */
  opacity: 0.4;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 768px) {
  .home-doctor__thumb {
    width: 100%;
  }
}

.home-doctor__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.home-doctor__thumb:hover {
  opacity: 0.7;
}

/* 선택 시 — 외곽선이 두꺼워지며 진해졌다가(--color-text-secondary, 개흙)
   다시 얇아지며 최종 색(--color-border, </> 버튼과 같은 배경색)으로
   돌아오는 펄스. 기존에는 최고조·최종색 모두 --color-primary/--color-bg라
   너무 어둡거나(펄스 정점) 너무 밝아(최종, 소금색) 대비가 애매했다는
   피드백에 따라 정점은 개흙(중간 톤), 최종은 소금보다 한 단계 어두운
   --color-border로 조정 */
.home-doctor__thumb.is-active {
  opacity: 1;
  border-color: var(--color-border);
  /* (2026-09-22) 제품 섹션 가운데 카드·파트너사 로고 카드와 같은 그림자값
     (0.08)을 그대로 썼더니 이 섹션에서만 거의 안 보인다는 피드백 — 원인은
     배경색 차이다. 제품/파트너사 섹션 배경은 --color-bg(#e9eae5, 소금색)인데
     이 섹션 배경은 --color-bg-subtle(#f4f5f1)로 훨씬 흰색에 가깝다. 그림자를
     같은 비율(8%)로 얹으면 만들어지는 색상 차이(Δ) 자체는 두 배경에서
     거의 같지만(선형 블렌드라 절대값은 비슷), 출발점이 흰색에 더 가까울수록
     인간의 명암 대비 감도가 떨어져(웨버-페히너 법칙 — 밝은 영역일수록 같은
     밝기 차이가 더 옅게 느껴짐) 시각적으로는 훨씬 옅어 보인다. 그래서 이
     섹션의 그림자만 알파를 0.08→0.18로 올려 다른 섹션과 시각적으로 비슷한
     무게감을 갖도록 보정했다(썸네일은 크기가 작아 더 눈에 띄어야 해서
     대표 이미지보다 한 단계 더 진하게) */
  box-shadow: 0 4px 16px rgba(46, 42, 36, 0.18);
}

/* 펄스 모션도 is-visible 게이팅(첫 진입 전에는 화면 밖에서 재생되지 않게) —
   활성 썸네일 자체는 게이팅과 무관하게 항상 opacity:1·최종 테두리색으로
   보이고, 모션만 늦춰진다 */
.home-doctor.is-visible .home-doctor__thumb.is-active {
  animation: home-doctor-thumb-pulse 500ms ease;
}

@keyframes home-doctor-thumb-pulse {
  0% {
    border-width: 2px;
    border-color: transparent;
  }
  45% {
    border-width: 4px;
    border-color: var(--color-text-secondary);
  }
  100% {
    border-width: 2px;
    border-color: var(--color-border);
  }
}

/* 대표 이미지 — 4개 주제 이미지 모두 1:1 비율로 통일. 모바일은 컬럼 폭을
   그대로 채우고(width:100%), 768px 이상은 flex:1로 남는 폭을 채운다 —
   .home-doctor__inner 그리드가 이미 "썸네일 자리를 뺀 나머지 = 회사소개
   우측 본문 폭"이 되도록 계산되어 있으므로, 여기서는 그 나머지를 그대로
   다 쓰기만 하면 된다(더 이상 별도 max-width로 줄이지 않는다).
   radius는 8px 고정값(12px→8px, 피드백 반영 — 토큰이 아니라 이 섹션 전용
   고정값으로 관리해 토큰 값이 바뀌어도 이 섹션만큼은 8px을 유지한다) */
/* 페이드인 시간 2배(300ms→600ms, 피드백 반영) — 주제 전환 시 이미지가
   바뀌는 걸 더 여유 있게 보여준다 */
.home-doctor__hero-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  /* (2026-09-22) 그림자 추가 — overflow: hidden이었던 기존 규칙은 그림자를
     안쪽으로 잘라버리므로 제거하고, 대신 img 쪽(아래)에 라운드를 옮겨서
     이미지가 카드 밖으로 삐져나오지 않게 한다.
     (2026-09-22, 시각보정) 이 섹션 배경(--color-bg-subtle, #f4f5f1)이 제품/
     파트너사 섹션 배경(--color-bg, #e9eae5)보다 흰색에 훨씬 가까워, 같은
     0.08 알파로는 거의 안 보인다는 피드백 — 위 .home-doctor__thumb.is-active
     와 같은 이유(웨버-페히너 법칙: 밝은 배경일수록 같은 밝기 차이가 더 옅게
     느껴짐)로 알파를 0.08→0.14로 올려 보정했다. 이미지 자체가 커서 썸네일
     (0.18)보다는 한 단계 낮춰도 충분히 도드라진다 */
  box-shadow: 0 6px 20px rgba(46, 42, 36, 0.14);
}

.home-doctor.is-visible .home-doctor__hero-image {
  animation: home-doctor-fade-in 600ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .home-doctor:not(.is-visible) .home-doctor__hero-image {
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .home-doctor__hero-image {
    flex: 1;
    width: auto;
  }
}

.home-doctor__hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

@keyframes home-doctor-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-doctor.is-visible .home-doctor__heading,
  .home-doctor.is-visible .home-doctor__body,
  .home-doctor.is-visible .home-doctor__cta,
  .home-doctor.is-visible .home-doctor__hero-image,
  .home-doctor__switcher-label--exit,
  .home-doctor__switcher-label--enter,
  .home-doctor.is-visible .home-doctor__thumb.is-active {
    animation: none;
  }
}
/* 홈 — 박사소개(HomeDoctor)와 회사소개(HomeCompany) 사이. src/assets/scroll.png(함초
   갯벌 사진)를 sticky 배경으로 고정한 채, 스크롤에 따라 3개의 텍스트 스텝(언제나+유기농
   → 에버가닉 로고 → 메인·서브 카피)이 순서대로 나타났다 사라지는 브랜드 스토리텔링
   섹션. 화려한 애니메이션이 아니라 "한 장의 사진 위에서 이야기가 한 장면씩 펼쳐지는"
   느낌을 목표로 한다 — 파티클·글로우·과도한 블러·급격한 확대 없음.

   구조: 래퍼(.evergainc-story, 뷰포트 5배 높이)가 스크롤 가능한 "무대"를 만들고, 그 안의
   .evergainc-story__sticky(100vh, position: sticky)가 뷰포트에 고정된 채 배경 이미지와
   텍스트 스텝을 보여준다. 스크롤 진행률(래퍼가 화면을 통과하는 비율, 0~1)은
   EvergancStory.jsx가 스크롤 이벤트로 계산해 배경 확대 배율과 각 스텝의 opacity·위치를
   ref.style에 직접 반영한다(리렌더 없이 매 프레임 갱신) */

/* STEP 01 전용 필기체 — Caveat(--font-accent, index.css)는 02-A 칸 번호 전용으로
   못박혀 있어 재사용할 수 없다. 대신 이 두 단어(Ever·Organic)에 실제로 쓰이는
   로마자 10글자만 별도로 서브셋한 필기체 폰트를 새로 추가했다.
   2026-09-21 — 처음 골랐던 Nanum Pen Script는 두꺼운 마커펜 손글씨 느낌이라
   "손글씨 말고 화려한 필기체"라는 피드백에 맞지 않아, 얇고 flourish(장식
   곡선)가 두드러지는 정통 캘리그라피 스크립트인 Pinyon Script(OFL 라이선스,
   Google Fonts)로 교체했다 — 원본에서 pyftsubset으로 필요한 글자만 추려 2.3KB
   (src/assets/pinyon-script-brand-words.woff2, 이전 nanum-pen-script-brand-words.woff2는
   더 이상 참조되지 않지만 폴더 삭제 권한 문제로 파일 자체는 남아 있다 — 무해한
   미사용 파일). Pinyon Script는 글자 사이 연결 흘림체 표현에 OpenType
   GSUB/GPOS(연결선·커닝)를 쓰므로, 이번엔 --layout-features를 비우지 않고 전부
   유지해 서브셋 후에도 글자가 자연스럽게 이어지도록 했다(Nanum Pen Script는
   그런 이음선이 없어 이 옵션이 필요 없었음). unicode-range는 이 열 글자로 좁혀,
   다른 텍스트를 렌더링할 때는 이 폰트가 아예 매칭되지 않는다(Caveat 숫자
   서브셋과 동일한 패턴) */
@font-face {
  font-family: 'PinyonScriptBrandWords';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('data:font/woff2;base64,d09GMgABAAAAAAk8AA4AAAAAD9gAAAjpAAECDAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbgwwccgZgAHwRCAqRaI9mATYCJAM4Cx4ABCAFhBAHIBvFDVFUsDoBvjjI5N5ZhLHZDGEIwmLagxpBlWnz5et19u80Hr7243fu2nvfEPPmksQTw3SNpGoSipbEUJJmqvgOz5/r/fJWXi0QC1P5r/zHOCL6uN15q6MwnID+B+AlmIBMABH8/+/n6kwSYk08NUJdppS9O73/Il+3vYepd5K2lYg088ShJFKhUhulFkrCZGzZw+hbMED9LyMwbYZp4GGocQKn4L9+0gZJzE4VlCDA4Q67VQEcFPhyzLnNb1YAG5AcRcJoRYokPSzmRQL04nC8f6O1vfH2E7+DRw6RPLWigWg6r1KyEQfefKqimZRIKVJBCGNBUw2sPHydxXJ6mJ1Rj7PyAwSdrEKuUs6QWalXyYi7irKk3HzvKLmy4LV5pOY30PWlLIkZKnVnuYjH19F0PmV/nBPKh1dduZob4IjT2tuLv28ZX+Tjcjnpp6Wsdg3zPCLXBQuYixQLN36KRZyYa04rx8bFJySm0Ky99/C+u9tumaWWWGyRBeYaLRxYXRBds62zaIUPMsgklLucpe8GloHS2ZxBuzKW9113Hh3PJi9IDkGlz7WzW7+enkuy4w+HetR9ndHoB50TNKMpNKPRm/xup46OQkNojaeBHQKcLo0B0Ldno9S0hbEGg+cgSm0kYLKeGuJUkxDrhqxCaQeBcVikDujRcHOhISNKfY0etNNA1UDzjLSNBlFnuXQpolvJVhuhodu3Hz+2JHus6f1YHDumzkgwoPXCMAwjY3U6jNZrnfoSJ9UHVHuGiY52eWw+Hr3yTuzG8tSCZkR05BqzEE/TZlO1+50Ma3Si62XlzSawZx9KrUf2iKluquGq58J18j6veYfDV4eKRbzK8x5biZmDerVW2jJTfIbgxdkvaT5iuyqwkdpBYqUCjAxZ06m+BC3q5Md0UunuHmnGoDjBd6uvodvZz0BMz+mR+idI6OrRmOj0XoeWeSJ8l3Z2T6LrH+iBvT3qQ9DQdbTmIHClMxGMLesMoL4am5HbTzq0z3wxm1yiu47r+iiuGYkgq1DqHRi6Yj52Pkp9Ra+P0bqPYtf7P/ysj3ZLDMNNDfcj/KrPgiX5yhpgp2kr+6F0ozFzgx45cECL0Y5ih9bnXjfF7/NapNsDrMGseZK4IXQlHYi4oC9CG9aUCs5Fj4/yypVMDEc10hpJhoDT0EuHrbE6EXFAfxcofenAoGyLF16WX/cc8LFYPjnEk2rHdvOd5LB4OsSHGpmb4f9Pf7tsyGrF4fmBJ2dGNaT5mdvZoMeYF9xxVk6gVXZgx0RToWjZ9mZhqWLCEd5v3NSaItvW8WxbXoZDQEqMLOUgG3Wwfu4U1lIwVM6V1jtYM0vWdU0cragi1FXiRFNXf2jUoYBtc7QJta/1LDefZ2HrmSJUvU0619g7iZY3vb5PeJq3eGHDlhKHYNicedbJDjBjyOaPKFH7xOWr4emtjIGUyDtx1TtUEy7YT55BAkSodaV2nk6T9sE76UHl8Kopw+21oT6Cb+HWNiiLhZe9G2OqOgQTZN/kP/Y9eL3lP/+LoF7eoZR9Vrw6cOhV869WGquyvOGCcvMx+S9NuAt/tQvM5XwJD5RlT5eCHafuNrVUDIpbm2U/Dr76fNBZBQQQKTMfn4sbI8MTFrwSCVMKo8N8D349UzwW5PCxQkekpNd7BfintRCUHLYEZqUmMMrrBPJ2bi8RzyNgHZJhwuwu3aUeOemqdtbG3qFQTgjF3/+AV+KtKcPzYCZZk5ACLlUJT0QhZ88gwLKBTzy6WQ4EO3rl5YRjp9qhTz5Qrbfwio/M3Te7bW5aUbgiJppESGYtI0/iSaX59Kv59fnHi1kq5Qzhulywx5JTzYeKLWNHhosF64dWZBPx1rZhDMHdjlPkcGxFQPzj6PoVBZOkQgW5ai3pTQFd1jRVuqFQSTmae39GDi4ld/504aQa4NviGqXB2hLqF7Zgpl9nVnJPfe+a0zKsvdxLJGbl++SmjRFhqmiVaiyaSC6NtvQ9+HR31LIQZ/uP5EW1nUsu5tGuSNiYhQcTNl3p8bsv0e6+9mhJ+7SoQNd43O1pc7eX1jeHlQeimfE3p/XMK2LlTXIMDnbFJPMiekXrD3bPfsX3WNDbn4muBcEtMh8z7+B1kT4WXqHPg3IVeDgmzM+3DBlYdmHcvMFcyNUZqGau33OXOxKa7+bV4Zw2UNQvkynzK6iJ64upctWwVF0ImjQ/cQaUXhEZ7I0tYg2w5WWMLLaHQ6oPJsfzXlnq0wfaXbVd2oCQZ9uUS3V6oa6YnD82Pt1f8W64upCxhLuGEXSpqLa8thof7jupzNFp5dVgeP7mK2cK4/8XYfzJZZbWSYruFYrO0DJ71BR//EB+p4grz6meRzqQRxWq+qSTC4Bj4PJxcRUvH54ez3eaFbg9ndKSmdPf9gwKsDe3uPvbr7QJTqsZSC2NTo3D+k/DBKDy3HkYtsPWALU56pS4pZ3bj1eGxIcltpDbuSIJBXmfgFSwpIp+/kQyqFRVh3jDVR2Vgt2DIxTKp2vY2GV5+CpabtnDyVQ6g4Onewe+8YTXl23sLckpIuVL3Pi40HuBuHQfnwpqS3XlGl/7qrQgJKG6oKAglGSuEPWUpyVObijG7x84ROWGXa8otlpp07+arzGY8QHHgL7Fv7SjoAQiTb8/I4IbHLO/jY4j+PBi3iv4ctE//x76g7efOXIB0CQK/oeRp1dKuH/t3AkcPj5rPAX88sPexwFhmfH/a9pAukd++O9knOpvxyvn0r+kddbkqL4rsdur0bP8Nx1r/hsuayljYnDtTikTlPGSorDMhqJklndF2SH6omJbOBVVVyPzfc2WmOYkJZUuzcSERFoFSJJwZgMPgKBmPlX8t8Iu+V6FalwiVc0rNHNSJPiAcbK2ay6i5GELJkXYZYQqhGeKPwohsRST7eaIwyWUc6hai6RxIULJKnzxcW+PRLYH+EJV//+628iw2+5EcRKOHCdLkiNyr9eUih1i9dcaz04BhDQE0lkpll8eMwWku1aAnSOoJLBMrTW1SyPubE4pmy5WKt7hcER6qpk7VNTH2gEA') format('woff2');
  /* E O a c e g i n r v — "Ever"·"Organic"에 쓰이는 로마자만 */
  unicode-range: U+45, U+4F, U+61, U+63, U+65, U+67, U+69, U+6E, U+72, U+76;
}
.evergainc-story {
  position: relative;
  z-index: 1;
  height: 500vh;
  background: var(--color-bg);
  /* 2026-09-21 — 스크롤 중 텍스트가 사진 위에서 잘 안 보인다는 피드백으로 오버레이를
     더 어둡게(dimmed) 조정. 위(스텝이 위치하는 중앙~하단)로 갈수록 살짝 더 짙어지는
     그라디언트로, 사진 하단부 대비를 특히 더 확보한다 */
  --story-overlay-top: rgba(0, 0, 0, 0.32);
  --story-overlay-bottom: rgba(0, 0, 0, 0.5);
}

.evergainc-story__sticky {
  position: sticky;
  top: 0;
  height: calc(100vh / var(--page-zoom)); /* 큰 화면 확대 보정 */
  overflow: hidden;
}

.evergainc-story__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform-origin: center center;
  will-change: transform;
}

.evergainc-story__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--story-overlay-top), var(--story-overlay-bottom));
  pointer-events: none;
}

.evergainc-story__steps {
  position: absolute;
  inset: 0;
}

.evergainc-story__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--edge-padding);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform, filter;
}

/* 언제나 + 유기농(Pretendard, 국문)은 한 줄, 같은 위계(글꼴 크기·굵기·베이스라인)로
   유지한다. Ever·Organic(영문 필기체)은 이 줄의 레이아웃에 영향을 주지 않는
   별개의 문구로, 각 국문 단어를 감싸는 .evergainc-story__formula-item을
   기준점 삼아 position:absolute로 그 위에 살짝 겹쳐 놓는다(아래
   .evergainc-story__formula-script 참고) — 그래서 폭이 얼마나 넓든, 크기가
   얼마나 크든 언제나 + 유기농 줄 자체의 정렬·줄바꿈에는 전혀 영향을 주지
   않는다 */
.evergainc-story__formula {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--color-text-on-dark);
  font-weight: 700;
  font-size: clamp(32px, 7vw, 64px);
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .evergainc-story__formula {
    gap: 20px;
  }
}

/* 언제나·유기농 각 단어를 감싸는 위치 기준점 — 이 안에서 absolute로 배치되는
   Ever·Organic 필기체(아래 .evergainc-story__formula-script)의 기준이 된다.
   필기체는 DOM/페인트 순서상 자연스럽게 국문 위에 그려진다(별도 z-index 불필요 —
   position:absolute 요소는 이 item 안의 일반 흐름 콘텐츠인 국문 단어보다 항상
   위에 그려진다) */
.evergainc-story__formula-item {
  position: relative;
}

/* 2026-09-21 — 옆 글자(EVER·ORGANIC 등)와 다른 색이라 튀어 보인다는 피드백으로
   +도 같은 흰색으로 통일(굵기 차이만 유지) */
.evergainc-story__formula-plus {
  font-weight: 400;
  color: var(--color-text-on-dark);
}

/* 2026-09-21 — "언제나" 위에 "Ever", "유기농" 위에 "Organic"을 필기체로 얹는다
   (위 @font-face 참고). 국문과 같은 줄에 두지 않고 absolute로 그 위에 겹쳐
   배치해(위 .evergainc-story__formula-item 참고) 언제나 + 유기농 한 줄짜리
   레이아웃에는 영향을 주지 않는다. 색은 흰색+투명도(rgba(255,255,255,0.45))로
   불투명한 국문 글자와 확실히 구분한다. 크기는 국문(.evergainc-story__formula의
   font-size)보다 30% 크게 잡아(clamp 값에 1.3배) 존재감을 준다. bottom:55%로
   국문 상단에 살짝 겹치도록 배치했다 */
.evergainc-story__formula-script {
  position: absolute;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'PinyonScriptBrandWords', var(--font-family);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  font-size: clamp(42px, 9.1vw, 83px);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 2026-09-21 — 로고 크기 1/2로 축소했다가, 이후 다시 25% 확대 요청
   (90→112.5, 13→16.25, 160→200) */
.evergainc-story__logo {
  width: clamp(112.5px, 16.25vw, 200px);
  max-width: 70%;
  height: auto;
  aspect-ratio: 524 / 458;
}

/* 사진 위 텍스트 공통 — text-shadow로 사진의 밝은·복잡한 영역 위에서도 글자
   윤곽이 뚜렷하게 보이도록 보강(과도한 그림자는 아님, 오버레이와 함께 대비를
   보완하는 정도) */
.evergainc-story__formula,
.evergainc-story__main-copy,
.evergainc-story__sub-copy {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.evergainc-story__main-copy {
  margin: 0 0 var(--space-3);
  color: var(--color-text-on-dark);
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: 700;
  line-height: var(--line-height-h1);
}

/* 2026-09-21 — 서브카피(설명 텍스트)가 잘 안 보인다는 피드백으로 톤을 낮춘
   보조색(--color-text-on-dark-secondary) 대신 흰색에 살짝 투명도만 준 색으로
   교체해 가독성을 높였다. 메인 카피보다 작은 크기·낮은 굵기로 여전히
   위계는 구분된다 */
.evergainc-story__sub-copy {
  margin: 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  line-height: var(--line-height-body);
}

/* 하단 스크롤 진행 표시 — 스텝 개수(3)만큼 놓인 미니멀한 일자 선. 각 선은 옅은
   흰색 밑선(track) 위에, 그 스텝의 로컬 진행률(0~1)만큼 왼쪽부터 진한 흰색
   선(fill)이 "색상만" 채워지며 진행 상태를 나타낸다(굵기는 트랙·필 모두 동일 —
   두께 변화가 아니라 색으로만 표현). fill의 폭은 EvergancStory.jsx가 스크롤마다
   계산하는 로컬 진행률을 그대로 반영하므로(스텝의 등장·유지·퇴장 곡선과 달리
   다듬지 않은 원값), 그 스텝 구간을 지나는 동안 0→100%로 채워지고, 이후 다음
   스텝으로 넘어가도 100%로 유지된다(이미 지나온 스텝임을 표시).
   .evergainc-story__sticky 안에 두어 섹션이 화면에 있는 동안에만(=sticky로
   고정된 동안에만) 보이고, 섹션을 벗어나면 함께 사라진다.
   2026-09-21 — 선 길이 3배(clamp 32~56px → 96~168px), 선 사이 간격 1/2(10px→5px)→
   4px→8px, 두꺼워지는 표현을 색상 채움 표현으로 변경 */
.evergainc-story__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 40px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.evergainc-story__progress-track {
  position: relative;
  width: clamp(96px, 18vw, 168px);
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.evergainc-story__progress-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  border-radius: 1px;
  background: var(--color-text-on-dark);
}

/* prefers-reduced-motion: reduce — sticky·확대·opacity/translateY 애니메이션을 모두
   해제하고, 배경 사진과 3개 텍스트 스텝을 세로로 쌓아 전부 그대로 보여준다.
   EvergancStory.jsx는 이 환경에서 스크롤 리스너 자체를 걸지 않으므로 각 스텝의
   opacity·transform에는 인라인 스타일이 붙지 않는다 — 아래 규칙만으로 항상
   보이는 상태를 보장한다 */
@media (prefers-reduced-motion: reduce) {
  .evergainc-story {
    height: auto;
    padding-block: var(--space-section);
  }

  .evergainc-story__sticky {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .evergainc-story__bg {
    position: static;
    width: 100%;
    height: 60vh;
    transform: none;
  }

  .evergainc-story__overlay {
    display: none;
  }

  .evergainc-story__progress {
    display: none;
  }

  .evergainc-story__steps {
    position: static;
    display: flex;
    flex-direction: column;
  }

  .evergainc-story__step {
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
    padding-block: var(--space-block);
  }

  .evergainc-story__formula,
  .evergainc-story__formula-plus,
  .evergainc-story__main-copy {
    color: var(--color-text);
    text-shadow: none;
  }

  .evergainc-story__sub-copy {
    color: var(--color-text-secondary);
    text-shadow: none;
  }

  /* 밝은 섹션 배경(--color-bg) 위에서는 사진용으로 고른 반투명 흰색이 거의
     안 보이게 된다 — 같은 "반투명으로 구분" 컨셉을 어두운 톤(--color-text
     계열)의 반투명 버전으로 바꿔 밝은 배경에서도 유지한다 */
  .evergainc-story__formula-script {
    color: rgba(46, 42, 36, 0.4);
  }
}
/* 홈 — 회사소개 요약. 2단 그리드 + 세로 구분선(태블릿·데스크톱, 컬럼 높이 전체를
   꽉 채움) + 섹션 하단 경계선(다음 섹션과 분리). 모바일은 세로 구분선 없이
   1컬럼으로 쌓는다. 구분선 색은 카드 테두리(--color-border, 옅은 회색)보다
   또렷하게 보이도록 본문 색(--color-text) 기반의 반투명 톤을 별도로 쓴다 */
.home-company {
  --home-company-divider: rgba(46, 42, 36, 0.22);

  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-block: var(--space-section);
  border-bottom: 1px solid var(--home-company-divider);
}

.home-company__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* 모바일 — 세로로 쌓일 때는 세로 구분선 대신 왼쪽 단(타이틀+뱃지) 아래에
   가로 구분선을 둔다. 색은 데스크톱 구분선과 같은 톤 */
.home-company__col--left {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--home-company-divider);
}

@media (min-width: 768px) {
  /* 상하 여백을 섹션이 아니라 컬럼이 갖게 한다 — 섹션(.home-company)에
     padding-block이 있으면 그 여백은 .home-company__inner 바깥에 있어서
     안쪽 구분선(::before)이 거기까지 닿지 못한다. 컬럼이 자기 몫의 위/아래
     여백을 padding으로 가지면, 구분선은 컬럼의 실제 높이(콘텐츠+패딩)를
     그대로 따라가므로 섹션 전체 높이만큼 늘어난다 */
  .home-company {
    padding-block: 0;
  }

  .home-company__inner {
    position: relative;
    grid-template-columns: 1fr 1fr;
    /* 그리드 갭을 좌우 여백(--edge-padding)의 2배로 잡으면, 정확히 가운데
       놓이는 구분선(::before, left:50%)을 기준으로 양쪽 컬럼까지의 거리가
       각각 --edge-padding이 된다 — 섹션 좌우 바깥 여백과 똑같은 값 */
    gap: calc(var(--edge-padding) * 2);
  }

  /* 세로 구분선 — 컨테이너 기준 절대 위치 선. 컨테이너 자체엔 이제 상하
     padding이 없으므로(위 .home-company에서 옮겨감) top:0~bottom:0이 곧
     컬럼의 패딩을 포함한 전체 높이(=섹션 전체 높이)와 정확히 일치한다 */
  .home-company__inner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--home-company-divider);
  }

  .home-company__col--left,
  .home-company__col--right {
    /* 그리드 stretch로 두 컬럼이 행 높이(=더 긴 컬럼 기준)만큼 늘어나고,
       그 안에서 위 콘텐츠(타이틀/본문)는 위에, 아래 콘텐츠(뱃지/CTA)는
       바닥에 붙어 서로 같은 높이에 놓인다. 상하 padding은 --space-6으로
       동일하게(이 섹션은 다른 섹션의 --space-section 상하 여백 규칙을
       따르지 않는 예외). 좌우 padding은 그리드 gap이 대신하므로 여기서
       따로 주지 않는다 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  /* 모바일 전용 가로 구분선 해제 — 데스크톱은 세로 구분선(::before)만 사용 */
  .home-company__col--left {
    border-bottom: none;
  }
}

/* 타이틀 — 홈 제품 섹션 메인카피(.home-product__title)와 동일한 크기·굵기.
   타이틀→뱃지 간격은 기존 --space-4(24px)의 4배(96px) — 좌우 컬럼이
   justify-content: space-between으로 위/아래 콘텐츠를 나누고 있어, 컬럼
   높이가 콘텐츠만큼만 자라는 상태에서는 이 margin 값 자체가 실제 화면상
   간격이 된다(세로 구분선도 이 컬럼 높이를 그대로 따라가므로, 간격을 늘리면
   구분선도 같이 길어진다) */
.home-company__title {
  margin: 0 0 96px;
  color: var(--color-text);
  font-size: var(--font-size-section-title-mobile);
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
}

@media (min-width: 768px) {
  .home-company__title {
    font-size: var(--font-size-section-title);
  }
}

/* 타이틀 줄바꿈 — 1360px 이상에서만 강제. 실측 결과 1280~1345px 구간은
   강제 줄바꿈된 첫 줄("...위해")조차 컬럼 폭에 못 들어가 다시 줄바꿈되어
   "위해"만 혼자 남았다. 1350px부터 안전해 여유를 두고 1360px으로 잡음 —
   이 텍스트 폭 전용 값이라 공용 .text-break-desktop(1280px)과 분리 */
.home-company__title-break {
  display: none;
}

@media (min-width: 1360px) {
  .home-company__title-break {
    display: inline;
  }
}

.home-company__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 기존 --space-2(12px)의 절반 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 외곽선 없이 배경 톤 차이로만 구분(섹션 배경 --color-bg보다 밝은
   --color-bg-subtle). 텍스트 크기·패딩·최소 높이·radius를 CTA 버튼(.btn)과
   동일하게 맞춰 같은 무게감으로 보이게 한다 */
.home-company__badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 12px 20px;
  border-radius: var(--radius-button);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 본문 — 타이틀(Section Title 스케일)보다 한 단계 작은 크기로, 타이틀과 같은
   방식으로 모바일·데스크톱 두 단계를 둔다(고정값인 --font-size-h1은 모바일에서
   타이틀의 모바일 크기(28px)보다 커져버려 "타이틀보다 작게"라는 조건에 맞지 않아
   여기서는 반응형 커스텀 값을 쓴다) */
/* 본문→CTA 간격도 기존 --space-5(32px)의 4배(128px) — 위 타이틀→뱃지
   간격과 같은 이유(space-between 컬럼에서 margin이 곧 화면 간격) */
.home-company__body {
  display: flex;
  flex-direction: column;
  margin: 0 0 128px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 18px;
  line-height: var(--line-height-body);
}

@media (min-width: 768px) {
  .home-company__body {
    font-size: 22px;
  }
}

/* 등장 모션 — 홈 박사소개 섹션(HomeDoctor.css .home-doctor__heading·
   .home-doctor__body에 건 home-doctor-text-pop)과 완전히 동일한 모션을 본문
   전체(.home-company__body)에 한 번만 건다 — 아래(50px)·작고(0.8배)·흐린
   (blur 8px) 상태에서 시작해 60% 지점에서 제자리보다 살짝 위(-2px)·크게(1.06배)
   튀어 오르며 blur도 3px까지 걷히고, 80%에서 blur가 완전히 사라진 뒤, 85%~100%에
   걸쳐 위치·크기만 마저 안착한다.
   2026-09-21 — 이전에는 문장(줄)마다 별도 span(.home-company__body-line)으로
   나눠 순서대로 모션을 걸었으나, "두 문장을 하나로 합치고 모션도 본문 전체에
   하나만" 요청에 따라 문장 분리 없이 본문 전체가 하나의 텍스트로 한 번에
   모션을 탄다.
   HomeDoctor와 달리 이 섹션은 본문이 화면에 완전히 들어올 때마다(스크롤을
   올렸다 다시 내려도 매번) 반복 재생되어야 하므로, .is-visible 클래스는
   섹션이 아니라 본문 자체에 붙는다(HomeCompany.jsx 참고) — 본문이 뷰포트를
   벗어나면 클래스가 빠지며 애니메이션이 처음 상태로 리셋되고, 다시 완전히
   들어오면 클래스가 다시 붙어 매번 새로 재생된다 */
.home-company__body.is-visible {
  animation: home-company-text-pop 700ms cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes home-company-text-pop {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    filter: blur(8px);
  }
  60% {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.06);
    filter: blur(3px);
  }
  80% {
    filter: blur(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home-company__body {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-company__body.is-visible {
    animation: none;
    opacity: 1;
  }
}

.home-company__cta {
  align-self: flex-start;
}
/* 홈 — 파트너사 섹션. 배경은 소금색(--color-bg, 페이지 기본 배경과 동일) */
.home-partners {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--color-bg);
  padding-block: var(--space-section);
}

.home-partners__title {
  margin: 0 0 var(--space-3);
  text-align: center;
}

/* 서브카피 — 이전 타이틀 문구를 그대로 가져온 보조 설명. 타이틀→카드 간격을
   2배(기존 --space-6=48px → 96px)로 키운 만큼, 그 간격은 이 서브카피의
   margin-bottom이 담당한다 */
.home-partners__subtitle {
  margin: 0 0 calc(var(--space-6) * 2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-subcopy); /* 서브카피 토큰 — 모바일 15 / 768px~ 18 (2026-09-26) */
  line-height: var(--line-height-body);
  text-align: center;
}

/* 마퀴 — 화면 전체 너비로 풀블리드, 좌우 끝은 배경색으로 자연스럽게
   페이드아웃시켜 로고가 갑자기 잘리는 느낌을 줄인다 */
.home-partners__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* (2026-09-22) 카드 그림자(.home-partners__logo box-shadow)가 상하로는
     잘려 보인다는 피드백 — 이 컨테이너의 높이가 카드 높이(202px)와 정확히
     같아 overflow: hidden에 그림자가 걸린다. 좌우는 트랙 폭 자체가 카드보다
     훨씬 넓어 여유가 있어 안 걸렸던 것. 그림자가 들어갈 여유(20px)를
     상하 패딩으로 준다 */
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge-padding),
    #000 calc(100% - var(--edge-padding)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge-padding),
    #000 calc(100% - var(--edge-padding)),
    transparent 100%
  );
}

/* 로고를 2벌 이어붙여 트랙 전체 폭의 정확히 절반(-50%)만큼 이동시키면
   같은 내용의 벌끼리 이어지는 지점이라 끊김 없이 계속 흐르는 것처럼 보인다.
   속도가 너무 빠르다는 피드백에 따라 30s→60s(2배 느리게). 카드 간 간격도
   2배(--space-6=48px→96px, 피드백 반영) */
.home-partners__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: calc(var(--space-6) * 2);
  animation: home-partners-slide 60s linear infinite;
}

/* 카드 크기 — 명함 비율(국내 표준 90×50mm = 1.8:1)에 맞춰 448×202px(비율
   2.22:1)에서 364×202px(1.8:1)로 폭만 조정. 높이·좌우 콘텐츠 폭(364-48*2=268px)은
   이전과 동일하게 유지해 로고 크기 보정값(scale)이 그대로 맞는다. 배경은
   화이트, 얕은 그림자로 카드가 살짝 떠 보이게 한다. 모든 카드가 예외 없이
   이 크기 그대로여야 하므로 min-width가 아니라 고정 width로 두고,
   overflow:hidden으로 혹시라도 이미지가 넘치는 일을 막는다(로고 이미지가
   실제 원본 픽셀 크기가 카드보다 큰 경우 — 예: AUCTION, 11번가 — min-width
   였을 때 카드 자체가 이미지 크기에 맞춰 늘어나 버리는 문제가 있었다) */
.home-partners__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 364px;
  height: 202px;
  padding: 32px 48px;
  /* R값 4px(--radius-button)→16px(피드백 반영) — 토큰이 아니라 이 섹션 전용
     고정값으로 관리 */
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(46, 42, 36, 0.08);
  overflow: hidden;
}

/* 로고 원본 이미지의 캔버스(뷰박스) 크기·비율·내부 여백이 제각각이라(정사각형
   로고부터 가로로 아주 긴 워드마크까지) object-fit:contain만으로는 카드마다
   시각적 크기가 들쭉날쭉해 보인다. width/height를 100%로 채운 뒤
   object-fit:contain으로 카드 안에 항상 꽉 차게(비율 유지, 작은 로고도
   확대) 만들고, 그래도 남는 편차는 로고별 보정 클래스(아래)로 미세 조정한다 */
.home-partners__logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 로고별 시각 보정 — 위 기본 규칙(카드 꽉 채우기)만으로는 원본 SVG/PNG 내부
   여백 차이 때문에 일부 로고가 유독 크거나 작아 보였다. 전체적인 크기
   느낌이 비슷해지도록 로고별로만 살짝 축소·확대한다(수치는 육안 비교로
   조정한 근사값). 세로 위치 보정(translateY)도 같은 이유로 필요한 경우가
   있다 — 이미지 자체는 카드 안에서 기하학적으로 정중앙에 있지만(픽셀 잉크
   바운딩박스로도 확인됨), 로고마다 워드마크의 시각적 무게중심(글자
   굵기·심볼 위치)이 달라 사람 눈에는 위/아래로 치우쳐 보인다. 이런 광학적
   보정이라 계산으로 구할 수 없고, 육안 비교로 잡은 근사값이다 */
.home-partners__logo-image--partner-2 {
  transform: scale(0.85);
}

/* 쿠팡 — 위로 치우쳐 보여 아래로 살짝 내림 */
.home-partners__logo-image--partner-3 {
  transform: scale(0.8) translateY(4px);
}

/* 지마켓 — 아래로 치우쳐 보여 위로 살짝 올림 */
.home-partners__logo-image--partner-4 {
  transform: translateY(-6px);
}

.home-partners__logo-image--partner-6 {
  transform: scale(0.85) translateY(-6px);
}

/* 우체국쇼핑 — 아래로 치우쳐 보여 위로 살짝 올림 */
.home-partners__logo-image--partner-7 {
  transform: translateY(-6px);
}

@keyframes home-partners-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-partners__track {
    animation: none;
  }
}
/* 홈 하단 — 문의하기 섹션. 2단 그리드: 왼쪽(타이틀+본문+CTA) / 오른쪽(FAQ
   아코디언 5개). HomeCompany와 달리 세로 구분선은 두지 않는다(레퍼런스에
   구분선이 없음) — 오른쪽 FAQ 리스트 자체의 가로 구분선만 사용. 배경은
   소금색(--color-bg) — 기존 --color-bg-subtle에서 변경 */
.home-contact {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-block: var(--space-section);
}

.home-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .home-contact__inner {
    grid-template-columns: 1fr 1.2fr;
    gap: calc(var(--edge-padding) * 2);
    align-items: start;
  }
}

.home-contact__col--left .text-section-title {
  margin: 0 0 var(--space-4);
}

.home-contact__body {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-subcopy); /* 서브카피 토큰 — 모바일 15 / 768px~ 18 (2026-09-26) */
  line-height: var(--line-height-body);
}

.home-contact__cta {
  align-self: flex-start;
}

/* 문의하기 페이지 변형(variant="contact")의 CTA 2개 — 강조 버튼 '제품 바로가기 →'만 화살표
   (CTA 문구 체계 예외, 2026-09-25), '홈 바로가기'는 화살표 없음 */
.home-contact__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* FAQ 리스트 — 항목 사이·리스트 맨 위에 얇은 구분선. 마지막 항목만 하단
   구분선 없음(섹션 자체에는 하단 경계선을 두지 않는다) */
.home-contact__faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.home-contact__faq-item {
  border-bottom: 1px solid var(--color-border);
}

/* 질문 사이 간격 — 기존 상하 패딩(--space-4=24px)이라 질문 간 간격이
   48px(양쪽 패딩 합)나 되어 너무 넓어 보였다. --space-2(12px)로 줄여
   간격을 절반(24px)으로 좁힌다. min-height는 유지해 아이콘(32px)이 눌리지
   않게 한다 */
.home-contact__faq-toggle {
  width: 100%;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
  text-align: left;
}

.home-contact__faq-question {
  flex: 1;
  font-size: var(--font-size-h3);
  font-weight: 600;
}

/* 토글 아이콘 — 외곽선 없이 채운 배경. 내부 +/− 표시는 텍스트 글자가 아니라
   SVG 선으로 그린다(HomeContact.jsx 참고) — 텍스트로는 폰트의 베이스라인·
   행간 지표 때문에 잉크가 박스 중앙에서 살짝 아래로 치우쳐 보였는데, SVG는
   좌표를 24×24 뷰박스 한가운데(12,12)에 직접 고정하므로 그 문제가 없다.
   배경은 --color-border — 섹션 배경이 --color-bg(소금)으로 바뀌면서 기존
   --color-bg 배경은 대비가 사라져, 한 단계 어두운 색으로 변경(박사소개
   섹션의 </> 버튼과 동일한 배경). radius 8px 유지, 박스 32px→36px로 조정
   (박사소개 섹션 </> 버튼과 동일하게 맞춘 값, 피드백 반영) */
.home-contact__faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: var(--color-border);
  color: var(--color-text);
}

.home-contact__faq-icon-vertical {
  transition: opacity 150ms ease;
}

.home-contact__faq-answer {
  margin: 0 0 var(--space-4);
  padding-right: calc(36px + var(--space-3));
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
/* padding-top 0 — 섹션 맨 위는 타이틀 패널(.company-hero, 전폭 이미지)이 화면 끝까지
   붙는다. padding-bottom은 여기 그대로 둔다(마지막 콘텐츠인
   02-B 뒤 여백 — 02-B 쪽 마크업은 건드리지 않기 위해 섹션에 둠) */
.company {
  /* 히어로 핀 리빌(position: fixed, z-index: 0) 위로 쌓이도록 — 없으면 static 요소는
     스태킹 순서상 히어로보다 아래에 그려져 스크롤 시 히어로가 이 섹션 위를 덮는다 */
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: var(--space-section);
  background-color: var(--color-bg);
}

.company__subtitle {
  margin: 0 0 var(--space-header);
  color: var(--color-text-secondary);
  /* (2026-09-26) 서브카피 크기 통일 — 모바일 15px / 768px~ 18px(index.css 토큰) */
  font-size: var(--font-size-subcopy);
  line-height: var(--line-height-body);
}

/* 타이틀 패널(2026-09-26, 기존 .company-intro 그라데이션 밴드 대체) — 화면 높이를 꽉
   채우는 이미지(object-fit: cover) + 갯벌색 scrim + 가운데 정렬 흰 문구.
   높이는 히어로와 같은 100svh. 문구 크기는 제품소개 타이틀과 같은 Display
   계열(32/44/48px), 서브는 히어로 서브카피와 같은 크기(15/18px) */
.company-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh / var(--page-zoom)); /* 큰 화면 확대 보정 */
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-text-on-dark);
  text-align: center;
}

.company-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 흰 글자 가독성용 scrim — (2026-09-26) 검정(#000000) 60%. 사진 위 반투명 어둡게 하기라
   "순수 #000000 미사용" 규칙의 예외(CLAUDE.md 색상 항목 참고).
   가운데(문구 자리)만 조금 더 짙게 — 전체 60% 위에 가운데 radial 40%를 겹쳐 가운데 최대 약 76%.
   가운데 효과를 되돌리려면 radial-gradient 줄만 삭제 */
.company-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgb(0 0 0 / 0.4) 0%, rgb(0 0 0 / 0) 70%),
    rgb(0 0 0 / 0.6);
}

.company-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--header-height);
}

.company-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-on-dark);
  font-size: var(--font-size-display-mobile);
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-display);
}

.company-hero__title:focus:not(:focus-visible) {
  outline: none;
}

.company-hero__subtitle {
  margin: 0;
  color: rgb(255 255 255 / 0.85);
  font-size: var(--font-size-subcopy); /* 서브카피 토큰 — 모바일 15 / 768px~ 18 */
  line-height: var(--line-height-body);
}

/* 더보기 버튼 — 스타일은 .hero__more(Hero.css) 그대로, 위치는 서브카피 아래 가운데.
   가운데 정렬 부모의 text-align만 왼쪽으로 보정 */
.company-hero__more {
  margin-top: var(--space-3);
  text-align: left;
}

/* 더보기로 이동했을 때 고정 헤더에 타이틀이 가리지 않도록 */
#company-business {
  scroll-margin-top: var(--header-height);
}

@media (min-width: 768px) {
  .company-hero__title {
    font-size: var(--font-size-display);
  }

  .company-hero__subtitle {
    font-size: var(--font-size-h3);
  }
}

@media (min-width: 1280px) {
  .company-hero__title {
    font-size: 48px;
  }
}

/* (2026-09-26) 두 번째 패널("HC바이오텍은") — 위 타이틀 패널이 이미지라 위 여백을 섹션
   상단 여백으로 직접 둔다. 흐름도→02-B 간격은 이 컨테이너가 가진다 */
.company__cards-section {
  margin-top: var(--space-section);
  margin-bottom: var(--space-block);
}

/* 02-A 사업 흐름도(2026-09-26, 기존 3칸 사업분야 카드 대체) — 원료 → 연구·개발 → 제품 →
   에버가닉 → 소비자.
   - 1023px 이하(세로, 위 → 아래): 평평한 카드(radius 8px, 폭 fill) + 카드 사이 ↓.
     쉐브론(V)은 넓적한 카드에서 각도가 너무 완만해 휘어 보여서 세로에선 쓰지 않는다
   - 1024px~(가로, 좌 → 우): 카드 자체를 화살표 모양(쉐브론 >)으로 — 진행 방향 끝이
     튀어나오고 다음 카드의 시작 쪽은 같은 각도로 파여 맞물린다. clip-path라 radius 없음.
     --flow-notch만큼 겹치되 --flow-seam만큼 띄워 사이에 섹션 배경색 틈이 보인다 */
.company__flow {
  --flow-gap: 32px; /* 세로형 카드 사이(↓가 놓이는 칸) */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--flow-gap);
}

.company__flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-4) var(--space-3);
  /* (2026-09-28) 1·3·4번째(비강조) 카드는 화이트 — 강조 2개는 아래 --featured가 덮어씀 */
  background: var(--color-surface);
  border-radius: 8px;
  text-align: center;
}

/* 세로형 ↓ — 카드 아래 간격 가운데 */
.company__flow-step:not(:last-child)::after {
  content: '↓';
  position: absolute;
  left: 50%;
  top: 100%;
  width: var(--flow-gap);
  height: var(--flow-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  color: var(--color-text-secondary);
  font-size: var(--font-size-h3);
  line-height: 1;
}

.company__flow-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h3);
  font-weight: 600;
}

.company__flow-desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/* (2026-09-28) 밸류체인 중 연구개발·소비자 강조 — 왼쪽 개흙색 → 오른쪽 갯벌색 그라데이션,
   텍스트는 화이트 */
.company__flow-step--featured {
  background: linear-gradient(90deg, var(--color-text-secondary), var(--color-text));
}

.company__flow-step--featured .company__flow-title,
.company__flow-step--featured .company__flow-desc {
  color: var(--color-surface);
}

@media (min-width: 1024px) {
  .company__flow {
    --flow-notch: 24px; /* 쉐브론 끝이 튀어나오는 깊이 */
    --flow-seam: 6px; /* 맞물린 카드 사이 틈 */
    flex-direction: row;
    gap: 0;
  }

  .company__flow-step {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0;
    /* 왼쪽(파인 홈)·오른쪽(튀어나온 끝)으로 --flow-notch만큼 여유 */
    padding: var(--space-5) calc(var(--space-2) + var(--flow-notch));
    /* 가운데 카드: 왼쪽은 < 로 파이고 오른쪽은 > 로 튀어나옴 */
    clip-path: polygon(
      0 0,
      calc(100% - var(--flow-notch)) 0,
      100% 50%,
      calc(100% - var(--flow-notch)) 100%,
      0 100%,
      var(--flow-notch) 50%
    );
  }

  .company__flow-step:not(:last-child)::after {
    content: none;
  }

  .company__flow-step:not(:first-child) {
    margin-left: calc(var(--flow-seam) - var(--flow-notch));
  }

  /* 첫 카드: 왼쪽 평평 */
  .company__flow-step:first-child {
    padding: var(--space-5) calc(var(--space-2) + var(--flow-notch)) var(--space-5) var(--space-3);
    clip-path: polygon(
      0 0,
      calc(100% - var(--flow-notch)) 0,
      100% 50%,
      calc(100% - var(--flow-notch)) 100%,
      0 100%
    );
  }

  /* 마지막 카드: 오른쪽 평평 */
  .company__flow-step:last-child {
    padding: var(--space-5) var(--space-3) var(--space-5) calc(var(--space-2) + var(--flow-notch));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--flow-notch) 50%);
  }
}

@media (min-width: 1280px) {
  .company__flow-desc {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }
}

/* 02-B 원료부터 특별한 이유(2026-09-26 재구성) — 카드 1장 캐러셀.
   768px~: 좌 텍스트 / 우 이미지 반반. 767px 이하: 이미지 위 → 텍스트 아래.
   카드 배경 --color-bg-subtle, radius 8px. 기존 3행 카드의 호버(어두운 배경 전환·
   이미지 확대)는 넘김 버튼·칩과 겹쳐 혼란스러워 삭제 */
.company__why {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  background: var(--color-bg-subtle);
  border-radius: 8px;
}

@media (min-width: 768px) {
  .company__why {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* 텍스트 칸 — 밝은 소금색(카드 배경 --color-bg-subtle 그대로). (2026-09-26) 텍스트는 좌측
   상단부터, 넘김 버튼은 좌측 하단 — 사이 남는 공간은 margin-top: auto(버튼 그룹)가 가져간다 */
.company__why-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .company__why-text {
    padding: clamp(32px, 5vw, 64px);
  }
}

/* 칩 — 산지·원료 / 연구·개발 / 제품·브랜드. 탭 겸 현재 위치 표시. radius 4px(2026-09-26).
   (2026-09-26 B안) 채움 없이 위계를 낮춤 — 세 칩 모두 연한 테두리(--color-border),
   활성만 개흙색(--color-text-secondary) 테두리(바탕 없음), 글자는 모두 개흙색 */
.company__why-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.company__why-chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* hover는 글자만 진하게 — 테두리까지 바꾸면 활성 칩(개흙 테두리)과 구분이 안 된다 */
.company__why-chip:hover:not(.is-active) {
  color: var(--color-text);
}

.company__why-chip.is-active {
  border-color: var(--color-text-secondary);
  color: var(--color-text-secondary);
}

/* 텍스트 칸 높이가 항목마다 달라 넘길 때 카드가 들썩이지 않도록 최소 높이 */
.company__why-body {
  min-height: 11em;
}

.company__why-body h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .company__why-body h3 {
    font-size: 24px;
  }
}

.company__why-body p {
  margin: 0;
  color: var(--color-text-secondary);
}

.company__why-link {
  display: block;
  margin-top: var(--space-4);
  /* (2026-09-29) 링크 텍스트 색상 지정 */
  color: #ba9773;
  font-size: var(--font-size-caption);
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
}

.company__why-link:hover {
  text-decoration: underline;
}

.company__why-link:hover .cta-arrow-icon,
.company__why-link:focus-visible .cta-arrow-icon {
  transform: translateX(4px);
}

/* 이미지 칸 — 1:1(2026-09-26, 전 화면). 768px~에서는 카드 높이가 이 정사각형 높이로
   정해지고 왼쪽 텍스트 칸이 같은 높이로 늘어난다 */
.company__why-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg);
  /* 드래그로 넘길 수 있음을 커서로 표시. 세로 스크롤은 브라우저에 맡기고 가로 끌기만 받는다 */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.company__why-media:active {
  cursor: grabbing;
}

.company__why-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.company__why-image.is-active {
  opacity: 1;
}

/* 넘김 버튼 그룹 — 텍스트 칸 좌측 하단(2026-09-26, 우측 하단에서 이동). 외곽선 원형 48px.
   (2026-09-26 A안) 평소엔 연한 테두리 + 개흙색 아이콘으로 한 발 물러나 있다가, hover·포커스
   시에만 갯벌색으로 진해진다 — 제목·본문보다 먼저 눈에 띄지 않도록 */
.company__why-nav-group {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-1);
  margin-top: auto;
}

.company__why-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.company__why-nav:hover,
.company__why-nav:focus-visible {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* 진행 표시 — 이미지 하단 가운데. 비활성 점 8px(흰 60%), 활성은 24px 길이 알약(흰색).
   폭 변화는 transition으로 부드럽게(동작 줄이기 설정 시 전역 규칙이 즉시 전환) */
.company__why-dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  z-index: 1;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.company__why-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.company__why-dot.is-active {
  width: 24px;
  background: var(--color-surface);
}
/* 회사소개 — 에버가닉 브랜드 소개 패널(2026-09-26 B안). 협동조합 섹션과 같은 소금색 배경.
   1024px~: 좌 로고 카드(--color-bg-subtle, radius 8) / 우 제목·이름 공식·설명·CTA.
   1023px 이하: 로고 카드 위 → 텍스트 아래 */
.company-everganic {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-block: var(--space-section);
}

.company-everganic__inner {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-header);
}

@media (min-width: 1024px) {
  .company-everganic__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
    align-items: center;
  }
}

/* 로고 카드 — 로고 글자색(#112F13)이 밝은 면에서만 읽히므로 어두운 면 금지(CLAUDE.md) */
.company-everganic__logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: 8px;
}

@media (min-width: 1024px) {
  .company-everganic__logo-card {
    aspect-ratio: 1 / 1;
    padding: var(--space-6);
  }
}

/* 로고 — 03 BRAND와 같은 기준: 폭 최대 300px, 최소 160px(높이 약 140px 하한) */
.company-everganic__logo {
  display: block;
  width: 300px;
  max-width: 100%;
  min-width: 160px;
  height: auto;
}

.company-everganic__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 이름 공식 — 영문 크게, 한글 뜻은 옆에 보조색 */
.company-everganic__formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
  row-gap: 4px;
  margin: 0 0 var(--space-3);
}

.company-everganic__formula-en {
  color: var(--color-brand-strong); /* 브랜드명이 등장하는 자리 — 브랜드 초록 텍스트 허용 */
  font-size: var(--font-size-h2);
  font-weight: 600;
}

.company-everganic__formula-kr {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: 500;
}

.company-everganic__subtitle {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-subcopy);
  line-height: var(--line-height-body);
}
.cooperative {
  /* 히어로 핀 리빌(position: fixed, z-index: 0) 위로 쌓이도록 */
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-block: var(--space-section);
}

.cooperative__subtitle {
  margin: 0 0 var(--space-header);
  color: var(--color-text-secondary);
  /* (2026-09-26) 서브카피 크기 통일 — 모바일 15px / 768px~ 18px(index.css 토큰) */
  font-size: var(--font-size-subcopy);
  line-height: var(--line-height-body);
}

/* (2026-09-25) 05-B 삭제로 도입 블록이 섹션의 마지막 — 하단 여백은 섹션 padding이 담당 */
.cooperative__intro {
  margin-bottom: 0;
}

/* 05-A 구조도 — 에버가닉협동조합이 가운데, 화살표 2개 모두 조합에서 바깥으로(생산자·
   소비자 방향). ~1279px는 세로 스택(생산자 위 → 조합 → 소비자 아래), 1280px~는
   가로 배치(생산자 ← 조합 → 소비자). JSX의 DOM 순서(생산자·화살표·조합·화살표·소비자)는
   두 레이아웃에서 동일 — grid 방향만 바뀐다 */
.cooperative__diagram {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1280px) {
  .cooperative__diagram {
    grid-template-columns: 1fr 120px 1fr 120px 1fr;
    align-items: stretch;
  }
}

.cooperative__diagram-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: var(--space-3);
  /* (2026-09-29) 생산자·소비자 박스 배경 화이트 — 조합 박스는 아래 --brand가 덮어씀 */
  background: var(--color-surface);
  border-radius: 8px; /* (2026-09-26) 생산자·조합·소비자 박스 공통(4 → 8px) */
  text-align: center;
}

.cooperative__diagram-box-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

.cooperative__diagram-box-desc {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

/* 조합 박스 — (2026-09-25) 브랜드 초록(--color-brand-strong) → 개흙색 채움.
   흰 글자 대비 7.6:1 */
.cooperative__diagram-box--brand {
  background: var(--color-bg-earth);
}

.cooperative__diagram-box--brand .cooperative__diagram-box-title {
  color: var(--color-surface);
}

/* 화살표(2026-09-25 재구성) — 선(.cooperative__diagram-arrow-line)이 칸 전체 길이로
   늘어나 양쪽 박스에 닿는다. 구조도 grid에 gap이 없어 칸 끝 = 박스 끝.
   세로형(기본, ~1279px): 칸 높이(min-height 80px) 전체를 세로선이 채우고 라벨은 선 오른쪽.
   가로형(1280px~): 칸 폭(120px) 전체를 가로선이 채우고 라벨은 선 아래 */
.cooperative__diagram-arrow {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  min-height: 80px;
  /* (2026-09-26) 화살표·라벨 초록(--color-brand-strong) → 개흙색, 전 화면 */
  color: var(--color-text-secondary);
}

.cooperative__diagram-arrow-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cooperative__diagram-arrow-line {
  flex: 1;
  width: 1.5px;
  background: currentColor;
}

/* 화살촉 기본형은 오른쪽을 향함 — 방향별로 회전. 선이 화살촉 끝점까지 이어지도록
   음수 margin으로 겹친다(가로: 끝점 x=7 → -7px / 세로: 회전 후 끝점이 상자 끝에서 3px
   안쪽 → -9px) */
.cooperative__diagram-arrow-head {
  flex-shrink: 0;
}

/* 세로형: --start(조합 → 생산자, 위) / --end(조합 → 소비자, 아래) */
.cooperative__diagram-arrow--start .cooperative__diagram-arrow-track {
  flex-direction: column-reverse;
}

.cooperative__diagram-arrow--start .cooperative__diagram-arrow-head {
  transform: rotate(-90deg);
  margin: -3px 0 -9px; /* 위 -3px: 끝점이 박스(생산자) 하단에 닿도록 */
}

.cooperative__diagram-arrow--end .cooperative__diagram-arrow-head {
  transform: rotate(90deg);
  margin: -9px 0 -3px; /* 아래 -3px: 끝점이 박스(소비자) 상단에 닿도록 */
}

/* 세로형(~1279px) 라벨 — (2026-09-26) 선 오른쪽에 두면 선+라벨 묶음이 가운데 정렬돼 선이 박스
   중심에서 왼쪽으로 밀려 보였다. 라벨을 흐름에서 빼(absolute) 선 위 정중앙에 겹쳐 올리고, 섹션
   배경색(--color-bg)을 깔아 선이 글자 뒤로 끊겨 보이게 한다 — 선은 박스 중심선에 정확히 맞는다 */
.cooperative__diagram-arrow-label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  padding: 2px 8px;
  background: var(--color-bg);
  transform: translate(-50%, -50%);
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

@media (min-width: 1280px) {
  /* 가로형은 라벨을 다시 흐름 안(선 아래)으로 — 배경·겹침 해제 */
  .cooperative__diagram-arrow-label {
    position: static;
    align-self: center;
    padding: 0;
    background: none;
    transform: none;
  }

  .cooperative__diagram-arrow {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    min-height: 0;
  }

  .cooperative__diagram-arrow-track {
    flex-direction: row;
    align-items: center;
    width: 100%;
  }

  .cooperative__diagram-arrow-line {
    width: auto;
    height: 1.5px;
  }

  /* 가로형: --start(조합 → 생산자, 왼쪽) / --end(조합 → 소비자, 오른쪽) */
  .cooperative__diagram-arrow--start .cooperative__diagram-arrow-track {
    flex-direction: row-reverse;
  }

  .cooperative__diagram-arrow--start .cooperative__diagram-arrow-head {
    transform: rotate(180deg);
    margin: 0 -7px 0 -1px; /* 왼쪽 -1px: 끝점이 생산자 박스에 닿도록 */
  }

  .cooperative__diagram-arrow--end .cooperative__diagram-arrow-head {
    transform: none;
    margin: 0 -1px 0 -7px; /* 오른쪽 -1px: 끝점이 소비자 박스에 닿도록 */
  }

  /* 라벨은 선 아래 가운데. 선 높이를 박스 세로 중앙에 맞추기 위해 라벨 높이만큼
     위쪽에 같은 크기의 빈 공간을 둔다(라벨이 선을 아래로 밀지 않도록) */
  .cooperative__diagram-arrow::before {
    content: '';
    height: calc(var(--font-size-caption) * 1.5);
  }
}
.history {
  /* 히어로 핀 리빌(position: fixed, z-index: 0) 위로 쌓이도록 */
  position: relative;
  z-index: 1;
  background: var(--color-bg-subtle);
  padding-block: var(--space-section);
}

.history__subtitle {
  margin: 0 0 var(--space-header);
  color: var(--color-text-secondary);
  /* (2026-09-26) 서브카피 크기 통일 — 모바일 15px / 768px~ 18px(index.css 토큰) */
  font-size: var(--font-size-subcopy);
  line-height: var(--line-height-body);
}

/* (2026-09-28) 메인/서브 카피 중앙정렬 — 모바일은 좌측정렬 유지, 768px~에서만 중앙 */
@media (min-width: 768px) {
  .history .text-section-title {
    text-align: center;
  }

  .history__subtitle {
    text-align: center;
  }
}

/* (2026-09-28) 연혁을 감싸던 소금색 박스(.history__card) 폐지 — 섹션 배경(밝은 소금색)
   위에 타임라인만 바로 놓인다 */

/* ------------------------------------------------------------------ */
/* 타임라인 — (2026-09-28) 중앙 세로선 기준 좌/우 지그재그 배치(768px~).    */
/* 그 미만(모바일)은 기존처럼 왼쪽 세로선 + 원, 내용은 오른쪽 한 열         */
/* ------------------------------------------------------------------ */
.history__timeline {
  /* 겹친 원 2개 — 안쪽(갯벌색) / 바깥쪽(소금색) */
  --history-dot: 8px;
  --history-dot-outer: 20px;
  /* 중앙선과 카드 사이 간격(768px~ 지그재그 전용) — 좌/우 각 40px */
  --history-gap: 40px;
  /* 연도 한 줄 높이(24px × 1.4) — 원을 연도 첫 줄 가운데에 맞출 때 사용 */
  --history-year-line: calc(var(--font-size-h2) * 1.4);
  /* 카드 내부 여백 — 원 중심 계산에도 사용(패딩만큼 아래로) */
  --history-content-pad: var(--space-4);
  /* 원 중심의 li 상단 기준 오프셋 = 카드 패딩 + 연도 첫 줄 절반 */
  --history-dot-center: calc(var(--history-content-pad) + var(--history-year-line) / 2);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.history__year-group {
  position: relative;
  padding-left: calc(var(--history-dot-outer) + var(--space-3));
}

@media (min-width: 768px) {
  /* (2026-09-28) 박스가 hug(내용 폭)로 바뀌면서 flex justify-content만으로는
     화면 양 끝에 붙어버림 — li를 중앙선 기준 좌/우 두 칸(그리드)으로 나누고,
     각 칸 안에서 중앙선 쪽 가장자리에 붙인다(justify-self) */
  .history__year-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
  }
}

/* 연결선 — (2026-09-28) 통짜 선 한 개. 정확히 첫 원 중심에서 시작해 마지막 원
   중심에서 끝나야 해서(내용 길이에 따라 마지막 카드 높이가 달라짐) CSS만으로는
   위치를 알 수 없다 — JS로 첫/마지막 원의 실제 위치를 측정해 top/height를 계산한다
   (History.jsx의 useLayoutEffect 참고) */
.history__timeline-line {
  position: absolute;
  left: calc(var(--history-dot-outer) / 2 - 1px);
  width: 2px;
  background: var(--color-border);
}

@media (min-width: 768px) {
  .history__timeline-line {
    left: 50%;
    transform: translateX(-1px);
  }
}

/* 겹친 원 — 바깥쪽(소금색, 큰 원) */
.history__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--history-dot-outer);
  height: var(--history-dot-outer);
  border-radius: 50%;
  background: var(--color-bg);
  /* (2026-09-28) 연도 카드와 동일한 그림자 */
  box-shadow: 0 2px 8px rgba(46, 42, 36, 0.08);
  /* 원 중심을 --history-dot-center에 맞춤 */
  transform: translateY(calc(var(--history-dot-center) - var(--history-dot-outer) / 2));
}

@media (min-width: 768px) {
  .history__dot {
    left: 50%;
    transform: translate(-50%, calc(var(--history-dot-center) - var(--history-dot-outer) / 2));
  }
}

/* 겹친 원 — 안쪽(갯벌색, 작은 원). 바깥 원 정중앙에 겹쳐 그린다 */
.history__dot-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--history-dot);
  height: var(--history-dot);
  border-radius: 50%;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}

/* (2026-09-28) 연도 블록을 카드로 — 흰 배경·라운드·옅은 그림자로 항목 간 구분을 강화 */
.history__year-content {
  box-sizing: border-box;
  /* (2026-09-28) fill -> hug — 내용 폭만큼만 차지, 칸을 넘지 않도록 max-width로 제한 */
  width: fit-content;
  max-width: 100%;
  padding: var(--history-content-pad);
  /* (2026-09-28) 소금색 — 밝은 소금색인 섹션 배경보다 한 톤 진하게 */
  background: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(46, 42, 36, 0.08);
}

@media (min-width: 768px) {
  .history__year-content {
    /* (2026-09-28) 그리드 칸(li의 50%) 기준 100% — 칸 폭 - 중앙선 간격 */
    max-width: calc(100% - var(--history-gap));
  }

  .history__year-group:nth-of-type(odd) .history__year-content {
    grid-column: 1;
    justify-self: end;
    text-align: right;
    margin-right: var(--history-gap);
  }

  .history__year-group:nth-of-type(even) .history__year-content {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    margin-left: var(--history-gap);
  }
}

/* (2026-09-25) 연도를 기준점으로 — 18 → 24px(H2). 내용은 한 단계 작게 */
.history__year {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  font-size: var(--font-size-h2);
  line-height: 1.4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.history__event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.history__event {
  color: var(--color-text-secondary);
  /* (2026-09-28) 일부 항목은 텍스트 안 \n에서 줄바꿈(데이터에 명시적으로 삽입) */
  white-space: pre-line;
  /* (2026-09-25) 전역 word-break: keep-all 때문에 띄어쓰기 없는 긴 단어
     ("농촌융복합산업인증사업자협회")가 칸 폭보다 길면 줄바꿈되지 않고 옆 칸으로
     넘쳐 겹쳤다 — 칸보다 긴 단어만 예외적으로 글자 단위로 끊는다(짧은 단어는 keep-all 유지) */
  overflow-wrap: anywhere;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

@media (min-width: 1280px) {
  .history__event {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }
}
/* 오시는 길(2026-09-25) — 연혁(.history, --color-bg-subtle) 다음, 문의하기(--color-bg) 앞.
   배경 소금색(--color-bg) — 연혁과 구분되고 아래 문의하기와 이어진다.
   흰 카드 하나에 좌 지도 이미지 / 우 주소·전화·지도 링크(연혁 카드와 같은 톤, radius 8px).
   모바일은 지도 위 → 정보 아래 세로 스택 */
.location {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  /* 위 연혁(bg-subtle)과는 배경이 달라 상단은 온전히, 아래 문의하기(같은 소금색)와는
     이어지므로 하단은 절반만 — 두 섹션 padding이 겹쳐 틈이 과하게 벌어지지 않도록 */
  padding-top: var(--space-section);
  padding-bottom: calc(var(--space-section) / 2);
}

.location .text-section-title {
  margin-bottom: var(--space-header);
}

.location__card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--color-bg-subtle); /* (2026-09-25) 흰색 → #F4F5F1 */
  border-radius: 8px;
}

@media (min-width: 768px) {
  .location__card {
    grid-template-columns: 1.4fr 1fr;
  }
}

.location__map {
  aspect-ratio: 1797 / 1179;
  background: var(--color-bg);
}

@media (min-width: 768px) {
  .location__map {
    aspect-ratio: auto;
    min-height: 360px;
  }
}

.location__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4);
}

@media (min-width: 1024px) {
  .location__info {
    padding: var(--space-6);
  }
}

.location__details {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.location__details div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location__details dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.location__details dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h3);
  font-weight: 500;
}

.location__details a {
  color: inherit;
  text-decoration: none;
}

.location__details a:hover {
  text-decoration: underline;
}

.location__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.location__actions .btn {
  width: 100%;
  min-height: 48px;
}
/* (2026-09-23, 31차) 카드 색 변수를 색 타입으로 등록 — 등록해야
   transition으로 보간된다(미등록 변수는 즉시 바뀜). 오목 모서리 패치의
   radial-gradient도 같은 변수를 쓰므로 카드와 함께 서서히 바뀐다 */
@property --doctor-card-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #fff;
}

@property --doctor-card-text {
  syntax: '<color>';
  inherits: true;
  initial-value: #2e2a24;
}

@property --doctor-card-text-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #5c5245;
}

/* ------------------------------------------------------------------ */
/* 캐러셀 패널 — 페이지 전체가 이 섹션 하나. 배경 갯벌색(--color-primary)   */
/* 위에 이미지 카드(개흙색)·CEO 인사말 카드·본문 카드(둘 다 소금색)가 떠   */
/* 있다. 모바일은 이미지→CEO 인사말→본문 순으로 세로로 쌓고, 1024px       */
/* 이상에서 그리드로 전환된다.                                          */
/* ------------------------------------------------------------------ */
.doctor-carousel {
  position: relative;
  z-index: 1;
  /* (2026-09-23) 섹션 배경은 소금색(--color-bg), 카드는 흰색으로 분리 */
  background: var(--color-bg);
  /* (2026-09-23, 43차) 모바일·태블릿에서 넘김 버튼이 헤더에 가려
     보인다는 확인 결과로, 화면 폭 구분 없이 96px로 통일 */
  padding-top: 96px;
  padding-bottom: var(--space-section);
  /* (2026-09-23, 25차 수정) 모바일에서는 16px, 1024px 이상(겹침
     그리드)에서는 32px — 아래 1024px 미디어 쿼리에서 재정의 */
  --doctor-radius: 16px;
  /* CEO 카드가 본문 카드와 겹치는 폭 — column-gap 0인 두 카드를 그냥
     맞닿게만 두는 대신, CEO 카드를 이 폭만큼 본문 카드 쪽으로 더 밀어
     넣어(margin-right 음수) 실제로 겹치게 한다 */
  --doctor-overlap: 96px;
  /* (2026-09-23, 30차) CEO·본문 카드 색 — 슬라이드 테마에 따라 바뀐다.
     오목 모서리 패치도 같은 변수를 써야 카드와 이어져 보인다 */
  --doctor-card-bg: #fff;
  --doctor-card-text: var(--color-text);
  --doctor-card-text-secondary: var(--color-text-secondary);
  /* (2026-09-23, 31차) 슬라이드 전환 모션 — 글자·이미지는 FADE_OUT_MS
     (Doctor.jsx, 350ms) 동안 사라진 뒤 내용 교체 → 다시 나타남. 카드
     배경·글자색은 클릭 즉시 700ms에 걸쳐 바뀐다 */
  --doctor-fade-out: 350ms;
  --doctor-fade-in: 500ms;
  --doctor-color-change: 700ms;
  transition:
    --doctor-card-bg var(--doctor-color-change) ease-in-out,
    --doctor-card-text var(--doctor-color-change) ease-in-out,
    --doctor-card-text-secondary var(--doctor-color-change) ease-in-out;
}

/* 나타날 때 — 살짝 늦게(80ms) 시작해 흐릿한 상태에서 선명하게 스르륵.
   (2026-09-23, 33차) 위아래로 뜨는 이동(translateY)은 제거 — 카드가
   겹쳐진 채로 움직이면 이미지 카드처럼 가장자리에 배경이 드러나 보이는
   문제가 CEO·본문 카드에서도 확인돼, 모든 요소에서 제자리 페이드+블러만
   쓰도록 통일 */
.doctor-carousel__fade {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--doctor-fade-in) ease-out 80ms,
    filter var(--doctor-fade-in) ease-out 80ms;
}

/* 사라질 때 — 흐려지면서 사라진다 */
.doctor-carousel.is-fading .doctor-carousel__fade {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity var(--doctor-fade-out) ease-in,
    filter var(--doctor-fade-out) ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .doctor-carousel,
  .doctor-carousel__fade,
  .doctor-carousel.is-fading .doctor-carousel__fade {
    transition: none;
  }

  .doctor-carousel.is-fading .doctor-carousel__fade {
    filter: none;
  }
}

/* (2026-09-23, 30차) 두 번째 슬라이드(ACHIEVEMENTS) — CEO·본문 카드를
   개흙색 + 흰 글자로 전환해 첫 슬라이드(CEO 인사말)와 구분한다.
   흰 글자 on #5C5245 = 7.6:1 */
.doctor-carousel--dark {
  --doctor-card-bg: var(--color-bg-earth);
  --doctor-card-text: var(--color-text-on-dark);
  --doctor-card-text-secondary: var(--color-text-on-dark);
}

/* (2026-09-23, 24차 수정) 모바일(1024px 미만)에서도 "이미지→CEO→본문"
   세로 1열 대신, 이미지·CEO 카드를 나란히(2열) 배치하고 본문 카드만
   아래에 전체 폭으로 두도록 구조 변경. 1024px 이상에서는 기존 겹침
   그리드로 별도 재정의(아래 미디어 쿼리). */
.doctor-carousel__slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  position: relative;
}

/* 이미지 카드 — 16:9 고정, 배경 개흙색(--color-bg-earth). flex로 우측·
   세로 중앙에 이미지를 앵커(justify-content: flex-end, align-items:
   center)하고, 이미지 자신은 height:100% + aspect-ratio:4/3으로 폭을
   계산해 카드에 꽉 채운다. (2026-09-23, 8차 수정) 프레임 감싸기를 걷어내고
   본래대로 이미지 카드~본문 카드, 이미지 카드~CEO 카드 간격을 32px로
   원복 — 이미지<->본문은 margin-right, 이미지<->CEO는 아래 .slide의
   row-gap이 담당한다 */
.doctor-carousel__image {
  grid-column: 1;
  grid-row: 1;
  /* (2026-09-23, 26차 수정) 768px 미만(제일 좁은 폰)에서는 16:9 고정을
     풀고, 대신 이미지 높이를 CEO 카드 실제 높이에 JS로 맞춘다(Doctor.jsx
     useSyncQuoteOverlapHeight 참고) — CEO 카드는 텍스트 양대로 자연
     높이를 갖고, 그 값을 그대로 이미지가 따라가서 항상 정확히 일치한다.
     768px 이상에서는 기존대로 16:9 유지(아래 미디어 쿼리). */
  overflow: hidden;
  /* (2026-09-23, 32차) 개흙색 → 흰색 — 전환 중 이미지가 흐려질 때
     어두운 배경이 비쳐 보이지 않도록 */
  background: #fff;
  /* 우측-하단 모서리만 16px로 별도 축소 — TL TR BR BL 순서 */
  border-radius: var(--doctor-radius) var(--doctor-radius) 16px var(--doctor-radius);
  /* 은은한 카드 그림자 — 이미지 카드에만 적용(CEO/본문 카드는 서로
     겹쳐서 그림자를 넣으면 겹침 경계가 도드라져 보여서 뺐다) */
  box-shadow: 0 8px 24px rgba(46, 42, 36, 0.12);
  /* (2026-09-23) 요청으로 좌측 96px 여백을 없애고 이미지가 카드 전체를
     꽉 채우도록 변경 — 아래 img가 width/height 100% + object-fit:cover */
}

.doctor-carousel__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CEO 인사말 카드 — 모바일에서는 독립된 카드(4모서리 모두 radius).
   1024px 이상에서는 본문 카드와 겹치며(--doctor-overlap) 맞닿는 모서리만
   각지게 깎인다(아래 미디어 쿼리). 본문 카드와 반드시 같은 배경색
   (--color-bg, 소금색)이어야 이어붙는 효과가 자연스럽다 */
.doctor-carousel__quote {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  /* 앵커포인트 좌측-중앙 — 가로는 기본(flex-start), 세로만 중앙 정렬 */
  justify-content: flex-start;
  align-items: center;
  min-height: 140px;
  /* 모바일(이미지와 나란히, 절반 폭)에서는 96px 여백이 너무 커서 축소 —
     1024px 이상(겹침 그리드)에서는 아래 미디어 쿼리가 96px로 되돌린다 */
  padding: var(--space-4);
  border-radius: var(--doctor-radius);
  /* 카드 배경 흰색 — 섹션 배경(소금색)과 구분 */
  background: var(--doctor-card-bg);
  /* (2026-09-23, 10차 수정) 오목 모서리 보정 패치(.doctor-carousel__step-fix--top)를
     이 카드 기준 position:absolute로 앵커링하기 위해 필요 — 1024px 이상
     에서는 아래 미디어 쿼리가 이미 position:relative를 지정하므로 실질
     적용은 그쪽 값이지만, 모바일에서도 규칙이 끊기지 않도록 여기서도
     relative로 둔다 */
  position: relative;
}

.doctor-carousel__quote-label {
  margin: 0;
  color: var(--doctor-card-text);
  /* (2026-09-23, 25차 수정) 3단계로 조정 — 제일 좁은 폰(<768px)에서만
     작게(18px) + 줄바꿈 없이 흘려쓰기, 768px부터는(태블릿·PC-모바일
     전환 구간 포함) 본문 카드 타이틀과 동일한 크기로 크게 + 2줄
     줄바꿈(아래 미디어 쿼리) — "PC에서 모바일로 바뀌는 구간에서 글자가
     너무 작다"는 피드백 반영. */
  font-size: 18px;
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
}

/* (2026-09-23, 29차 수정) 강제 줄바꿈(2줄) 자체를 1280px 이상에서만
   켠다 — 그 아래(1280px 미만, 768~1279px 구간 포함)는 폰트 크기와
   무관하게 띄어쓰기로 자연스럽게 흘려 쓰고 브라우저가 알아서 폭에 맞게
   감싸도록 둔다. "폰트만 줄이면 그 크기가 또 더 좁은 폭에서 같은 문제를
   일으킨다"는 걸 27~28차에서 확인했기 때문에, 폰트 크기 단계 대신
   줄바꿈 자체의 on/off 기준을 충분히 넓은 폭(1280px)으로 올리는
   방식으로 바꿨다. */
.doctor-carousel__quote-label-line {
  display: inline;
}

.doctor-carousel__quote-label-line:not(:last-child)::after {
  content: ' ';
}

@media (min-width: 768px) {
  .doctor-carousel__image {
    aspect-ratio: 16 / 9;
  }

  .doctor-carousel__quote-label {
    font-size: var(--font-size-section-title-mobile);
  }
}

@media (min-width: 1024px) {
  .doctor-carousel__quote-label {
    font-size: var(--font-size-section-title);
  }
}

@media (min-width: 1280px) {
  .doctor-carousel__quote-label-line {
    display: block;
  }

  .doctor-carousel__quote-label-line:not(:last-child)::after {
    content: '';
  }
}

/* 본문 카드 — 타이틀 → 본문 → 서명이 테두리 없이 이어진다. 모바일에서는
   독립된 카드(4모서리 모두 radius), 1024px 이상에서는 CEO 카드와 겹치는
   모서리만 각지게 깎인다(아래 미디어 쿼리) */
.doctor-carousel__content {
  grid-column: 1 / -1;
  grid-row: 2;
  /* 모바일에서는 96px 여백이 너무 커서 축소 — 1024px 이상에서는 아래
     미디어 쿼리가 96px로 되돌린다 */
  padding: var(--space-4);
  border-radius: var(--doctor-radius);
  /* 카드 배경 흰색 — 섹션 배경(소금색)과 구분 */
  background: var(--doctor-card-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* 앵커포인트 좌측-상단 */
  align-items: flex-start;
  justify-content: flex-start;
  /* (2026-09-23, 9차 수정) 오목 모서리 보정 패치(.doctor-carousel__step-fix--bottom)를
     이 카드 기준 position:absolute로 앵커링하기 위해 필요 */
  position: relative;
}

.doctor-carousel__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--doctor-card-text);
}

.doctor-carousel__title-line {
  font-size: var(--font-size-section-title-mobile);
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
}

@media (min-width: 768px) {
  .doctor-carousel__title-line {
    font-size: var(--font-size-section-title);
  }
}

.doctor-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 640px;
}

.doctor-carousel__body p {
  margin: 0;
  color: var(--doctor-card-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* (2026-09-23, 33차) 대표 이력 소개문 — 개흙색 카드 위 반투명 박스.
   외곽선 제거, radius 16px→8px(요청) */
.doctor-carousel__summary {
  margin: 0;
  padding: var(--space-3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--doctor-card-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* 문장 단위 강제 줄바꿈 없이 흘려쓰기 — 본문 폭(최대 640px)에서는 요청
   원문의 한 줄(약 45자)이 한 줄에 다 들어가지 않아 강제 줄바꿈 시
   들쭉날쭉해진다 */
.doctor-carousel__summary-line:not(:last-child)::after {
  content: ' ';
}

/* (2026-09-23, 30차) ACHIEVEMENTS 불릿 목록 — 작은 원형 점 + 텍스트 */
.doctor-carousel__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doctor-carousel__bullets li {
  position: relative;
  padding-left: 1.25em;
  color: var(--doctor-card-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.doctor-carousel__bullets li::before {
  content: '';
  position: absolute;
  left: 0.25em;
  /* 첫 줄 텍스트 세로 중앙에 맞춤 */
  top: calc(var(--line-height-body) * 0.5em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* 서명 — 직함(왼쪽) + 이름(오른쪽, 손글씨 필기체). (2026-09-23, 23차
   수정으로 재도입) */
.doctor-carousel__signature {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.doctor-carousel__signature-role {
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-body);
}

.doctor-carousel__signature-name {
  color: var(--color-text);
  font-family: 'Nanum Pen Script', cursive;
  /* 필기체 폰트는 같은 px에서도 작아 보여 본문보다 키움 */
  font-size: 28px;
  line-height: 1;
}


/* 넘김 버튼 — 카드 밖, 그리드 전체 위에서 우측 끝 정렬
   (2026-09-23, 31차 — 하단 → 우측 상단으로 이동) */
.doctor-carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

/* (2026-09-23, 36차) 카드 영역이 큰 데 비해 버튼이 왜소해 보인다는 피드백으로
   기존 36px 사각(radius 8px, 배경 --color-border) 대비 2배(72px) 원형·흰
   배경으로 독립적으로 키움 — Product/HomeDoctor의 같은 디자인 계열
   버튼(product-stack__cards-nav, home-doctor__switcher-arrow)과는 클래스가
   분리되어 있어 이 변경은 박사소개 페이지에만 적용된다 */
.doctor-carousel__nav-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  /* (2026-09-23, 39차) 흰 배경 대신 섹션과 같은 소금색 배경 + 외곽선으로
     경계 표시(38차) — 외곽선을 100% 불투명(--color-text)으로 선명하게
     조정. 비활성(넘길 수 없는 방향) 상태는 아래 :disabled의 opacity:0.35가
     테두리까지 함께 옅게 만들어 자연히 구분된다 */
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.doctor-carousel__nav-btn:hover:not(:disabled) {
  background: var(--color-secondary-hover-bg);
}

.doctor-carousel__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* 넘김 버튼이 흰 카드가 아니라 갯벌색 섹션 배경 위에 직접 떠 있으므로
   기본 포커스 링(--color-primary, 배경과 같은 톤이라 안 보임) 대신
   어두운 배경 전용 토큰을 쓴다(CLAUDE.md "어두운 배경 규칙") */
.doctor-carousel__nav-btn:focus-visible {
  outline-color: var(--color-primary-on-dark);
}

/* 오목 모서리 보정 패치 — 모바일(카드가 겹치지 않는 세로 배치)에서는
   숨긴다. 두 지점 모두 1024px 이상(그리드 겹침 구간)에서만 의미가 있다 */
.doctor-carousel__step-fix {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 1024px 이상 — 2열 그리드로 전환.                                      */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .doctor-carousel {
    --doctor-radius: 32px;
  }

  .doctor-carousel__slide {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr);
    /* (2026-09-23, 19차 수정) CEO 카드의 "돌출 구간"을 고정 3번째 행으로
       예약해 두던 방식을 버렸다 — 본문 카드가 13차부터 자기 텍스트
       높이만큼만 차지하게 되면서, 3번째 행 높이가 실제 돌출 길이를
       더 이상 보장하지 못했기 때문. 이제 CEO 카드의 height는 JS에서
       "본문 카드 하단 - CEO 카드 상단 + --doctor-overlap"으로 직접
       계산해 인라인으로 지정한다(Doctor.jsx의 useSyncQuoteOverlapHeight
       참고) — 그리드는 2행이면 충분하다. */
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: var(--space-5);
  }

  .doctor-carousel__image {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin-right: var(--space-5);
  }

  .doctor-carousel__quote {
    grid-column: 1 / 2;
    /* 2번째 행에서 시작 — top 위치만 그리드가 잡아주고, height는
       JS(useSyncQuoteOverlapHeight)가 직접 지정한다(아래 참고) */
    grid-row: 2 / 3;
    /* 모바일 축소 padding을 다시 96px로 원복 */
    padding: calc(var(--space-5) * 3);
    /* 좌상·좌하·우하는 노출되는 모서리라 둥글게, 우상만 본문 카드에 가려
       보이지 않으므로(겹침 구간) 각지게 둬도 무방 — TL TR BR BL 순서 */
    border-radius: var(--doctor-radius) 0 var(--doctor-radius) var(--doctor-radius);
    /* (2026-09-23, 17차 수정) 16차에서 --edge-padding을 margin-left에
       직접 더했더니, 이 카드가 이미 .container(padding-inline:
       --edge-padding) 안에 있어서 --edge-padding이 두 번 적용되는
       버그였다(화면 끝~카드 = edge-padding(container) + edge-padding
       + 96px). 이미지 카드 내부 이미지의 실제 좌측 위치(화면 끝
       기준 edge-padding + 96px, 이미지 카드 자신의 padding-left
       96px가 더해진 값)와 동일선상에 맞추려면, CEO 카드는 이미
       container padding으로 edge-padding만큼 밀려나 있으므로 나머지
       96px만 추가하면 된다 */
    margin-left: calc(var(--space-5) * 3);
    /* 본문 카드 쪽으로 겹침(--doctor-overlap) */
    margin-right: calc(var(--doctor-overlap) * -1);
    position: relative;
    z-index: 1;
    /* (2026-09-23, 19차 수정) "본문 카드 하단 ~ CEO 카드 하단 간격이
       텍스트 양과 무관하게 항상 정확히 --doctor-overlap(96px)"이어야
       한다는 요청 — grid auto 행 높이만으로는 본문 텍스트 양에 따라
       결과가 달라져 보장할 수 없었다. align-self: start로 그리드 셀에
       늘어나지 않게 한 뒤, 실제 높이는 JS가 getBoundingClientRect로
       측정해 인라인 height로 직접 지정한다(useSyncQuoteOverlapHeight,
       Doctor.jsx 참고) — 여기 align-self:start는 JS가 계산을 마치기
       전(또는 실패했을 때) 라벨 높이만큼만 차지하는 안전한 기본값 역할. */
    align-self: start;
  }

  .doctor-carousel__content {
    grid-column: 2 / 3;
    /* CEO 카드보다 한 행 짧게 — 3번째 행(돌출 구간)까지 뻗지 않는다 */
    grid-row: 1 / 3;
    /* 모바일 축소 padding을 다시 96px로 원복 */
    padding: calc(var(--space-5) * 3);
    /* 좌상·우상·우하는 노출되는 모서리라 둥글게, 좌하만 CEO 카드와
       겹치므로 각지게 */
    border-radius: var(--doctor-radius) var(--doctor-radius) var(--doctor-radius) 0;
    position: relative;
    /* CEO 카드보다 위에 올라와 겹치는 구간을 덮는다 */
    z-index: 2;
    /* (2026-09-23, 13차 수정) grid 셀은 기본 정렬(align-items: stretch)로
       이미지 카드+CEO 카드 높이에 맞춰 늘어나는데, 이 카드의 텍스트
       총량은 그보다 짧다. 12차에서는 justify-content: flex-end로 하단만
       96px에 맞췄지만 상단이 더 벌어지는 트레이드오프가 있었다 —
       align-self: start로 셀 전체를 채우는 대신 카드 자신의 콘텐츠
       높이(텍스트 + padding 96px * 2)만큼만 박스를 만들어 상하 모두
       정확히 96px가 되도록 한다. 대신 카드 높이가 줄어들며 grid 셀의
       남는 부분(원래 카드가 차지하던 아래쪽)은 배경(갯벌색)이 그대로
       드러난다 — 오목 모서리 보정 패치(.doctor-carousel__step-fix--bottom)는
       카드 자신 기준 position:absolute라 이 변경에도 카드 하단을 그대로
       따라간다. */
    justify-content: flex-start;
    align-self: start;
  }

  /* (2026-09-23, 10차 수정) 오목 모서리 보정 패치 — 두 지점.
     두 소금색 카드(CEO·본문)가 그리드 셀을 가로질러 겹칠 때, 겹침
     사각형의 네 변 중 서로 다른 카드에 속한 변끼리 만나는 지점이 두 곳
     생기고, 각 지점에서 갯벌색 배경이 직각으로 파고든다(나머지 3사분면은
     소금색, 나머지 1사분면만 배경). 두 지점 모두 실제 배포본에서
     getBoundingClientRect로 좌표를 재확인해 앵커링했다.

     [상단 패치] 지점 = (본문 카드 좌측 변, CEO 카드 상단 변)이 만나는
     곳. content.left는 quote.right - overlap과 정확히 같으므로(겹침
     정의 자체), CEO 카드(.doctor-carousel__quote) 기준으로
     right: var(--doctor-overlap) 이면 그 x좌표에 정확히 맞고,
     top: -radius 로 카드 상단 위쪽으로 patch 박스를 올려 그 bottom-right
     꼭짓점이 정확히 이 지점에 오도록 한다. 배경 quadrant가 patch 박스의
     좌상단 방향이므로 radial-gradient 중심은 "bottom right". */
  .doctor-carousel__step-fix--top {
    display: block;
    position: absolute;
    right: var(--doctor-overlap);
    top: calc(var(--doctor-radius) * -1);
    width: var(--doctor-radius);
    height: var(--doctor-radius);
    background: radial-gradient(
      circle at top left,
      transparent var(--doctor-radius),
      var(--doctor-card-bg) var(--doctor-radius)
    );
    z-index: 3;
  }

  /* [하단 패치] 지점 = (CEO 카드 우측 변, 본문 카드 하단 변)이 만나는
     곳. 본문 카드(.doctor-carousel__content) 기준으로 left(--doctor-overlap,
     본문 카드 좌측 모서리로부터 CEO 카드 우측 변까지의 거리와 정확히
     같다), top:100%(본문 카드 하단에 바로 붙임)으로 앵커링한다. */
  .doctor-carousel__step-fix--bottom {
    display: block;
    position: absolute;
    left: var(--doctor-overlap);
    top: 100%;
    width: var(--doctor-radius);
    height: var(--doctor-radius);
    background: radial-gradient(
      circle at bottom right,
      transparent var(--doctor-radius),
      var(--doctor-card-bg) var(--doctor-radius)
    );
    z-index: 3;
  }
}
.product {
  /* 히어로 핀 리빌(position: fixed, z-index: 0) 위로 쌓이도록 */
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  /* (2026-09-21) 타이틀 섹션 상단 여백 3배 / 하단(헤더→패널) 여백 2배 요청 —
     --space-section·--space-header 자체(다른 섹션도 공유하는 전역 토큰)는 그대로
     두고, 이 섹션에서만 배수로 키운다 */
  padding-top: calc(var(--space-section) * 3);
  padding-bottom: var(--space-section);
}

/* (2026-09-25) 데스크톱(1280px~)만 상단 -40px — 태블릿·모바일은 기존 값 */
@media (min-width: 1280px) {
  .product {
    padding-top: calc(var(--space-section) * 3 - 40px);
  }
}

/* 04-A 제품 헤더(타이틀+설명) — 아래 패널들과 마찬가지로 일반 스크롤로 지나간다 */
.product__section-header {
  margin-bottom: calc(var(--space-header) * 2);
}

/* (2026-09-25) 데스크톱(1280px~)만 타이틀 패널 하단(→ 제품 패널) +24px */
@media (min-width: 1280px) {
  .product__section-header {
    margin-bottom: calc(var(--space-header) * 2 + 24px);
  }
}

/* (2026-09-22, 12차 수정) 히어로 메인카피(.hero__heading/.hero__line1/2)와
   완전히 같은 마크업 구조로 교체 — 기존에는 한 h2 안에 <br />로 줄바꿈만 하고
   line-height로만 줄 간격을 잡았는데, 히어로는 줄마다 별도 span으로 나눠
   flex column + gap(var(--space-2))으로 줄 사이에 line-height 외의 여백을
   추가로 준다. 두 카피의 font-size·line-height 계산값 자체는 같았지만(둘 다
   1.25 비율) 이 flex gap 차이 때문에 실제 보이는 줄 간격이 달라 보인다는
   피드백을 받아, 제품 페이지 쪽도 히어로와 동일한 flex+gap 구조로 통일했다.
   .text-section-title(공용 유틸리티) 클래스는 더 이상 함께 쓰지 않고, 거기서
   가져오던 margin·color를 이 규칙에 직접 옮겼다 — 폰트 크기·굵기·line-height는
   아래 .product__section-title-line(각 줄의 span)이 담당한다(히어로와 같은
   역할 분담) */
.product__section-title {
  /* 히어로 CTA·GNB "제품" 앵커가 도착하는 지점 */
  scroll-margin-top: var(--header-height);
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product__section-title-line {
  color: var(--color-text);
  /* 히어로 메인 카피(.hero__line1/2)와 같은 크기로 확대 — 공용
     .text-section-title(--font-size-section-title 계열)보다 한 단계 큰
     Display 스케일 */
  font-size: var(--font-size-display-mobile);
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-display);
}

@media (min-width: 768px) {
  .product__section-title-line {
    font-size: var(--font-size-display);
  }
}

/* 2026-09-25 — 1280px~만 48px(80 → 64 → 48px 조정, 히어로 카피와 동일).
   한글 두 줄이라 1279px 이하에서 큰 값이면 줄마다 다시 접히므로 그 아래는 기존 Display 유지.
   되돌리려면 이 블록만 삭제 */
@media (min-width: 1280px) {
  .product__section-title-line {
    font-size: 48px;
  }
}

.product__section-subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  /* (2026-09-21) 히어로 서브 카피(.hero__subcopy)와 같은 크기로 확대. max-width는
     넓은 화면에서 한 줄로 길게 늘어지지 않고 적절한 지점에서 두 줄로 접히도록
     (body word-break: keep-all이 단어 중간이 아니라 공백에서만 끊는다) —
     720px는 이 문구가 데스크톱(h3, 18px)에서 대략 두 줄로 떨어지는 실측값 */
  max-width: 720px;
  font-size: var(--font-size-subcopy); /* 서브카피 토큰 — 모바일 15 / 768px~ 18 */
}

/* ------------------------------------------------------------------ */
/* 04-A 제품 패널 — 스크롤 고정 효과(2026-09-21)                         */
/* 전체 배경 이미지 + 어둡게 하기(scrim) + 텍스트 오버레이로 구성된 패널   */
/* 5개를 세로로 나열한다. 패널1~4는 화면에 꽉 찬 순간 고정되고, 다음 패널  */
/* 이 자기 자리(local top)에 도달하는 순간 앞 패널을 전환 구간 없이 즉시   */
/* 완전히 덮는다(래퍼로 "여유 공간"을 주는 방식은 전환 중 두 패널이 동시에 */
/* 움직이는 게 보여 폐기 — 대신 컨테이닝 블록을 패널 5개 전체가 공유하게   */
/* 두고, 나중 패널이 자기 위치에 닿는 순간 z-index로 즉시 덮는다). 패널5는 */
/* 고정 없이 일반 스크롤로 문의패널·푸터까지 이어진다. 이미지는 임시 자산  */
/* 이라 추후 교체 예정 — 텍스트는 항상 온다크(on-dark) 토큰을 쓴다.       */
/* ------------------------------------------------------------------ */
.product-stack {
  display: flex;
  flex-direction: column;
}

.product-stack__panel {
  position: relative;
  /* 패널마다 독립된 쌓임 맥락(stacking context)을 만든다 — 없으면 내부의
     .product-stack__media(z-index:0)·content(z-index:2)가 다른 패널의
     같은 레이어와 전역적으로 비교되어 배경 이미지가 가려지는 문제가 생긴다 */
  isolation: isolate;
  min-height: calc(100vh / var(--page-zoom)); /* svh 미지원 폴백 */
  min-height: calc(100svh / var(--page-zoom)); /* 큰 화면 확대 보정 */
  overflow: hidden;
  background: var(--color-primary);
  /* (2026-09-22) 다음 패널이 덮는 동안 위쪽 기준으로 축소되는 패널(현재 패널1
     테스트 중, Product.jsx useProductStackScale 참고) — 앵커를 상단 중앙에
     고정해 위치는 그대로 두고 가로세로 비율을 유지한 채 줄어들게 한다.
     transform은 JS에서 매 스크롤 프레임마다 직접 세팅하므로 transition은
     주지 않는다(스크롤과 어긋나는 지연이 생김) */
  transform-origin: top center;
}

/* 패널 자체에 DOM 순서와 같은 명시적 z-index를 부여해 쌓임 순서를 확정한다
   — 뒤에 오는 패널이 항상 앞 패널 전체(이미지 포함)를 덮는다.
   (2026-09-22, 10차 수정) 여주 제품 패널이 추가되어 패널이 5개→6개로
   늘어난 만큼 nth-child(6)을 추가했다 */
.product-stack__panel:nth-child(1) { z-index: 1; }
.product-stack__panel:nth-child(2) { z-index: 2; }
.product-stack__panel:nth-child(3) { z-index: 3; }
.product-stack__panel:nth-child(4) { z-index: 4; }
.product-stack__panel:nth-child(5) { z-index: 5; }
.product-stack__panel:nth-child(6) { z-index: 6; }

/* 패널1~5만 고정 — 컨테이닝 블록(.product-stack, 패널 6개 합친 높이)이 커서
   각자 자기 위치에서 화면 상단에 붙은 채로 오래 머무를 수 있고, 뒤 패널이
   자기 자리에 닿는 즉시(z-index로) 앞 패널을 완전히 덮는다. 마지막 패널
   (패널6, 기존 패널5)은 sticky를 안 줘 고정 없이 문의패널·푸터까지
   이어진다(2026-09-22, 10차 수정: -n+4 → -n+5로 갱신 — 패널이 6개로 늘어난
   만큼 "마지막 패널만 제외"라는 규칙 자체는 그대로 유지) */
.product-stack__panel:nth-child(-n + 5) {
  position: sticky;
  top: 0;
}

/* 패널 전체를 채우는 배경 이미지 레이어 */
.product-stack__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.product-stack__image,
.product-stack__image-slot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-stack__image-slot {
  background: var(--color-bg-subtle);
}

/* (2026-09-22) 콘텐츠가 상단으로 이동하면서(아래 .product-stack__content
   참고) 주된 텍스트(타이틀·CTA·Overview)가 이미지 위쪽에 놓인다 — 어둡게
   하기 방향도 위쪽이 짙고 아래로 갈수록 옅어지도록 뒤집는다(기존 하단 정렬
   시절의 "to top" 반대). 전체를 고르게 눌러주는 균일 스크림은 그대로 유지 */
.product-stack__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(20, 18, 15, 0.85) 0%,
      rgba(20, 18, 15, 0.45) 50%,
      rgba(20, 18, 15, 0.15) 100%
    ),
    rgba(20, 18, 15, 0.25);
}

/* (2026-09-22) 여주 패널 배경(pd_4-1.webp)이 다른 패널 사진보다 훨씬 밝은
   초록·햇빛 톤이라, 다른 패널과 같은 스크림 값을 쓰면 유독 "어둡게 깔린 게
   약해 보인다"는 피드백 — 이 패널(#product-yeoju)만 스크림을 한 단계 더
   짙게 올린다(균일 오버레이 0.25→0.45, 그라디언트 세 지점도 함께 올림) */
#product-yeoju .product-stack__scrim {
  background:
    linear-gradient(
      to bottom,
      rgba(20, 18, 15, 0.92) 0%,
      rgba(20, 18, 15, 0.65) 50%,
      rgba(20, 18, 15, 0.35) 100%
    ),
    rgba(20, 18, 15, 0.45);
}

/* (2026-09-22) 좌측 하단 정렬 → 상단 정렬로 변경. 컨테이닝 블록을 공유하는
   스크롤 고정 구조상, 다음 패널이 아래에서 위로 올라와 덮기 때문에 전환
   도중 화면에 가장 오래 남아있는 자리는 상단이다(하단은 가장 먼저 가려짐).
   그래서 상단 정렬(flex-start)로 바꾸고, 고정 헤더(--header-height)에 안
   가리도록 그만큼 위쪽 여백을 더한다(Hero.css .hero__top과 같은 패턴) */
.product-stack__content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh / var(--page-zoom)); /* svh 미지원 폴백 */
  min-height: calc(100svh / var(--page-zoom)); /* 큰 화면 확대 보정 */
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--header-height) + var(--edge-padding));
}

.product-stack__content .container {
  width: 100%;
}

/* 좌측(타이틀+CTA, Overview)과 우측(제품 카드) 배치. 모바일은 위→아래로
   단순히 쌓는다(아래 flex, 이 규칙 자체). 데스크톱(1024px~)은 2행 그리드로
   바뀐다 — 1행: 타이틀+CTA, 2행: Overview(좌) · 제품 카드(우, 2026-09-22
   변경: 카드를 1행이 아닌 Overview와 같은 2행에 둬서 카드 높이가 Overview
   높이에 정확히 맞춰지도록 함, 아래 .product-stack__cards 참고) */
.product-stack__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .product-stack__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: var(--space-6);
    /* 타이틀+CTA ~ Overview 간격 2배(2026-09-22) — .product-stack__left가
       display: contents로 풀리면서(아래) 이 간격을 그리드 자체의 row-gap이
       대신 맡는다 */
    row-gap: calc(var(--space-5) * 2);
  }
}

.product-stack__left {
  display: flex;
  flex-direction: column;
  /* (2026-09-22) CTA 버튼~Overview 간격 2배 요청 — 기존 --space-5(32px)의
     2배(64px). 데스크톱에서는 아래 display: contents로 대체되고 그리드의
     row-gap이 이 값을 이어받는다(위 .product-stack__layout 참고) */
  gap: calc(var(--space-5) * 2);
  min-width: 0;
}

@media (min-width: 1024px) {
  /* 래퍼 자체를 레이아웃에서 지우고 자식(top·overview)을 그리드의 직접
     자식으로 승격시킨다 — 그래야 각각 독립된 그리드 행을 가질 수 있고,
     우측 카드가 Overview와 정확히 같은 행에 놓여 높이를 공유하게 된다 */
  .product-stack__left {
    display: contents;
  }

  .product-stack__top {
    grid-column: 1;
    grid-row: 1;
  }

  .product-stack__overview {
    grid-column: 1;
    grid-row: 2;
  }
}

.product-stack__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.product-stack__index {
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.product-stack__name {
  margin: 0;
  max-width: 480px;
  color: var(--color-text-on-dark);
  font-size: var(--font-size-section-title-mobile);
  line-height: var(--line-height-section-title);
  font-weight: var(--font-weight-section-title);
}

@media (min-width: 768px) {
  .product-stack__name {
    font-size: var(--font-size-section-title);
  }
}

/* (2026-09-22) CTA — 홈 히어로 "더보기" 버튼(Hero.css .hero__more)과 같은
   스타일로 통일: 외곽선 없이 반투명 흰색 배경 + 블러. 기존
   .btn-secondary-on-dark(아웃라인 스타일)는 더 이상 쓰지 않는다(Product.jsx
   className에서도 제거) */
.product-stack__cta {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color 0.2s ease;
}

.product-stack__cta:hover {
  background: rgba(255, 255, 255, 0.18);
}

.product-stack__cta:focus-visible {
  outline-color: #fff;
}

.product-stack__overview {
  max-width: 480px;
}

.product-stack__overview-label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-on-dark-secondary);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-stack__tagline {
  margin: 0;
  color: var(--color-text-on-dark);
}

/* (2026-09-22, 4차 수정) 해시태그 — 카드에서 빼서 Overview 문구 바로 아래로.
   배경 없이 흰 텍스트만(요청대로) — pill 배경이던 이전 버전과 달리 순수
   텍스트 나열이라 카드 쪽 --color-brand 배경 규칙과 무관하다 */
.product-stack__overview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.product-stack__overview-tag {
  color: var(--color-text-on-dark);
  font-size: var(--font-size-caption);
  font-weight: 500;
}

/* 우측 — 라벨(cardsLabel, Overview 라벨과 같은 클래스 재사용) + 카드 세로
   슬라이더. 데스크톱에서는 Overview와 같은 그리드 행(grid-row: 2)에 두고
   align-self: end로 그 행 바닥에 붙인다(2026-09-22, 4차 수정 — 카드 목록이
   최대 2장까지만 보이는 고정 높이라 stretch 대신 end로 충분하다) */
.product-stack__cards-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

@media (min-width: 1024px) {
  .product-stack__cards-col {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    /* (2026-09-22, 7차 수정) 폭이 420px로 고정돼있어 이미지(200px)를 빼면
       텍스트가 들어갈 자리가 좁았다 — 큰 화면에서 더 넓어지도록 clamp로
       바꾸고 상한을 640px까지 올렸다(카드 자체는 이 폭의 78%,
       .product-stack__card 참고) */
    width: clamp(380px, 42vw, 640px);
  }
}

/* 카드 슬라이더 — 카드(뷰포트) + 하단에 점(dot) 인디케이터·</> 버튼
   (2026-09-22, 7차 수정 — 버튼을 카드 좌우에서 다시 목록 하단 우측으로
   옮기고, 점 인디케이터와 한 행에 묶었다. 아래 .product-stack__cards-footer
   참고) */
.product-stack__cards-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 점 인디케이터 + </> 버튼을 한 행에 — 점은 남는 공간에서 가운데 정렬,
   버튼은 오른쪽 끝에 고정(2026-09-22, 7차 수정) */
.product-stack__cards-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* 버튼 2개를 나란히 */
.product-stack__cards-nav-row {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

/* 버튼 디자인 — 박사소개 "</>" 전환 버튼(HomeDoctor.css
   .home-doctor__switcher-arrow, 36px·radius 8px)과 동일한 크기·모양을 쓰고
   배경만 온다크 반투명(product-stack__cta와 같은 rgba)으로 바꿨다. 방향은
   좌우(<, >, Product.jsx의 아이콘 참고) */
.product-stack__cards-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* (2026-09-26) 가독성 보강 — 흰 10%만으로는 밝은 사진 위에서 버튼이 묻혀, 어두운 반투명
     면 + 배경 블러 + 옅은 흰 테두리로 사진과 분리. 블러 미지원 시에도 어두운 면만으로 읽힌다 */
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.product-stack__cards-nav:hover {
  background: rgb(0 0 0 / 0.5);
}

.product-stack__cards-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* 점(dot) 인디케이터 — 카드 개수만큼, 현재 카드만 채운 원. 남는 폭을
   차지하고 그 안에서 가운데 정렬(2026-09-22, 7차 수정: footer 안에서 버튼과
   같은 행이 되면서 flex: 1 1 auto 추가) */
.product-stack__cards-dots {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
}

.product-stack__cards-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.3s ease;
}

.product-stack__cards-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* (2026-09-26) 활성 점은 가로로 긴 알약(24px) — 회사소개 02-B 진행 표시와 같은 방식(_.. / ._. / .._) */
.product-stack__cards-dot.is-active {
  width: 24px;
  background: #fff;
}

/* 뷰포트 — 카드 폭(78%)을 넘어가는 이전/다음 카드는 잘려서 "피크"만 보인다
   (overflow: hidden). 실제로 몇 px을 밀지는 JS가 렌더된 카드의
   offsetLeft·offsetWidth·트랙 scrollWidth를 재서 구한다(Product.jsx
   ProductCardSlider 참고) — 카드 폭이 고정 px가 아니라 %라 반응형으로도
   항상 정확하다 */
.product-stack__cards-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  /* (2026-09-22, 11차 수정) 카드가 선택 여부에 따라 ±6px translateY로
     움직이므로(아래 .product-stack__card 참고), overflow: hidden에 그 이동
     범위만큼 위아래 여유를 줘야 잘리지 않는다 */
  padding: 6px 0;
}

/* (2026-09-26) 카드가 2장 이상이면 드래그로 넘길 수 있음을 커서로 표시. 세로 스크롤은
   브라우저에 맡기고 가로 끌기만 받는다 */
.product-stack__cards-viewport.is-draggable {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.product-stack__cards-viewport.is-draggable:active {
  cursor: grabbing;
}

.product-stack__cards {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  transition: transform 0.3s ease;
}

/* 카드 — 반투명 온다크 배경(요청대로), 가로형: 이미지 왼쪽 · 텍스트 오른쪽.
   가격은 근거 데이터가 확인된 그룹만 표시한다(Product.jsx의 item.price 분기,
   --priced는 현재 가격 유무와 무관하게 모든 카드가 같은 레이아웃을 쓰므로
   시각적으로는 차이가 없다 — 향후 가격 카드만 다른 강조가 필요해지면 이
   클래스에 규칙을 추가) */
.product-stack__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  /* (2026-09-22, 7차 수정) 뷰포트 폭 100% → 78%로 줄여 "피크" 여백을 만들고,
     shrink는 여전히 방지한다(트랙이 가로로 나열되므로 없으면 flex가 카드를
     눌러 겹쳐 보인다) */
  flex: 0 0 78%;
  width: 78%;
  padding: var(--space-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
  /* (2026-09-22, 11차 수정) 밝기(filter)로 선택 여부를 구분하던 방식을
     완전히 폐기 — opacity(9차)도, filter: brightness(10차)도 카드 배경 자체가
     반투명이라 "선택 안 됨" 카드가 잘 안 보인다는 피드백을 두 번 받았다.
     대신 배경색 차이(기존 .is-active의 더 밝은 배경)만으로 선택 상태를
     구분하고, 높이(높낮이)로도 구분되도록 translateY를 추가한다 — 선택 안
     된 카드는 살짝 아래로 내리고, 선택된 카드는 그만큼 위로 올려(대칭)
     "선택된 카드가 떠오른" 느낌을 준다. transform 전환 대상 추가 */
  transition: background-color 0.2s ease, transform 0.2s ease;
  transform: translateY(6px);
}

/* 현재 선택된(가운데 정렬된) 카드만 배경을 밝게 — CTA 버튼 호버 색
   (.product-stack__cta:hover)과 같은 밝기로 통일해 "선택됨"을 명확히
   드러낸다(2026-09-22, 8차 수정, Product.jsx의 i === index 분기 참고).
   (11차 수정) 밝기(filter) 대신 위로 6px 띄워(translateY(-6px)) 선택 안 된
   카드(아래로 6px, 위 규칙)와 총 12px 높이차를 만든다 — 어둡게 하지 않아도
   "선택된 카드가 도드라져 보이는" 효과를 준다 */
.product-stack__card.is-active {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-6px);
}

/* 카드가 1장뿐인 그룹(확깨라 등)은 옆에 피크로 보여줄 다음 카드가 없으므로
   78%로 줄일 이유가 없다 — 뷰포트 폭을 그대로 채운다(2026-09-22, 7차 수정) */
.product-stack__card--single {
  flex: 0 0 100%;
  width: 100%;
}

/* 이미지 — 200px 정사각 고정(2026-09-22, 6차 수정: 120px → 200px). 뷰포트
   폭에 따라 달라지지 않는 고정 크기라 반응형 분기가 필요 없다 */
.product-stack__card-image {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
}

.product-stack__card-image img,
.product-stack__card-image-slot {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
}

.product-stack__card-image-slot {
  background: var(--color-border);
}

/* 텍스트 — 이미지 오른쪽에 세로로. 순서는 이름 → 용량 → 가격(요청대로) */
.product-stack__card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* (2026-09-22, 6차 수정) 이름·용량·가격 모두 1~2단계씩 확대 —
   caption(13px)→h3(18px), 11px→body(15px), h3(18px)→h2(24px) */
.product-stack__card-name {
  margin: 0;
  color: var(--color-text-on-dark);
  font-size: var(--font-size-h3);
  font-weight: 600;
  line-height: 1.3;
}

.product-stack__card-volume {
  margin: 0;
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-body);
}

/* 가격 — 카드 안 모든 텍스트보다 큰 폰트로 강조. (2026-09-22, 10차 수정)
   용량~가격 간격만 2배로 — 컨테이너 gap(2px)에 이 요소의 margin-top(2px)을
   더해 이름~용량 간격(2px)의 2배(4px)가 되도록 했다(이름~용량 간격은
   그대로 유지). (2026-09-22, 11차 수정) 이 간격을 다시 2배로 — margin-top을
   2px→6px로 늘려 컨테이너 gap(2px)과 합쳐 총 8px이 되도록 했다(이름~용량
   간격은 여전히 2px로 그대로 유지) */
.product-stack__card-price {
  margin: 0;
  margin-top: 6px;
  color: var(--color-text-on-dark);
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.3;
}
.contact {
  /* 히어로 핀 리빌(position: fixed, z-index: 0) 위로 쌓이도록 */
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-block: var(--space-section);
  /* 타이틀 패널 상단 여백 +24px (2026-09-24) → 추가 +24px (2026-09-25), 누적 +48px */
  padding-top: calc(var(--space-section) + 48px);
}

/* 타이포 스케일 예외(2026-09-25) — 문의하기 페이지 타이틀 "Contact"만 80px
   (모바일은 Section Title 2배 56px 유지), 굵기 medium(500), 자간 -4%(전역 -2% 대신
   이 타이틀만 예외). 영문 한 단어 대형 타이틀이라 700이면 과하게 무거워 레퍼런스 톤에
   맞춰 낮춤. 행간은 한 줄 대형 글자라 1.1 */
.contact__title {
  /* 타이틀 패널 → 필드 패널 간격 = --space-header + 32px (2026-09-25 조정값 유지) */
  margin: 0 0 calc(var(--space-header) + 32px);
  font-size: calc(var(--font-size-section-title-mobile) * 2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .contact__title {
    font-size: 80px;
  }
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* 필드 패널 가로 2분할(2026-09-25) — 좌 전화번호 카드 / 우 입력 카드 반반.
   전화번호 카드는 높이 hug(.contact__info align-self: start, 2026-09-25).
   모바일(0–767px)은 한 열 세로 스택 */
@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    column-gap: var(--space-5);
  }
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  /* (2026-09-28) 카드는 밝은 소금색 / 입력 필드는 흰색으로 반전 */
  background: var(--color-bg-subtle);
  border-radius: 16px; /* (2026-09-28) 입력·전화번호 카드 공통 */
  /* (2026-09-29) 세그먼트 조각과 동일한 그림자 */
  box-shadow: 0 4px 12px rgba(46, 42, 36, 0.10);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* (2026-09-28) 박스 없이 타이포+간격으로만 그룹 구분 — 기본정보/견적정보/문의정보 */
.contact__field-group-label {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  /* 개흙색(#5c5245) 64% 투명도 */
  color: rgba(92, 82, 69, 0.64);
}

.contact__field-group-label:not(:first-child) {
  /* 폼의 기본 gap(16px) + 40px = 총 56px */
  margin-top: 40px;
}

.contact__field-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 2분할 이후 입력 카드가 화면 절반 폭이라, 768px에서는 두 필드를 나란히 두기엔
   좁다(필드당 약 135px) — 나란히 배치는 1024px부터 */
@media (min-width: 1024px) {
  .contact__field-row {
    flex-direction: row;
  }

  .contact__field-row > .contact__field {
    flex: 1;
    min-width: 0;
  }
}

.contact__field label {
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* 수집 항목 박스 첫 줄(2026-09-25 — 폼 맨 위에서 이동), 굵게 */
.contact__required-note {
  font-weight: 700;
}

.contact__required-mark {
  color: var(--color-primary);
}

.contact__hint {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.contact__error {
  margin: 4px 0 0;
  color: var(--color-error);
  font-size: var(--font-size-caption);
}

.contact__field input:not([type='checkbox']),
.contact__field select,
.contact__field textarea {
  min-height: var(--touch-target-min);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  /* (2026-09-28) 입력 카드가 밝은 소금색이 되면서 필드는 흰색으로 대비 */
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-body);
}

.contact__field textarea {
  min-height: 120px;
  resize: vertical;
}

/* 네이티브 select 화살표를 지우고 커스텀 chevron(::after)으로 교체.
   select 자체에는 가상 요소가 붙지 않으므로 감싸는 래퍼에 건다.
   래퍼는 .contact__field의 flex-stretch를 받아 전폭이 되지만, select는
   기본 display:inline-block이라(다른 input의 기본 display:block과 달리)
   래퍼 안에서 자동으로 늘어나지 않는다 — width:100%를 명시해야 한다 */
.contact__select-wrap {
  display: block;
  width: 100%;
  position: relative;
}

.contact__select-wrap select {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  /* 화살표 16px + 오른쪽 여백 16px + 텍스트와의 간격 16px */
  padding-right: 48px;
}

.contact__select-wrap::after {
  content: '';
  position: absolute;
  /* select의 실제 padding-left(12px, --space-2)와 동일하게 맞춰 좌우 대칭 */
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: var(--color-text-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  pointer-events: none;
}

@media (forced-colors: active) {
  .contact__select-wrap::after {
    background-color: CanvasText;
  }
}

.contact__field input:focus-visible,
.contact__field select:focus-visible,
.contact__field textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* 색만으로 구분하지 않도록 텍스트 오류 메시지와 함께 쓰는 보조 표시 */
.contact__field input[aria-invalid='true'],
.contact__field select[aria-invalid='true'],
.contact__field textarea[aria-invalid='true'] {
  border-color: var(--color-error);
}

/* 입력 필드와 같은 톤 — 카드가 흰색(2026-09-24)이라 --color-bg-subtle로 구분.
   radius는 입력 필드와 같은 4px(2026-09-25) */
.contact__consent-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  /* (2026-09-28) 소금색 — 밝은 소금색 카드 위에서도 한 톤 더 구분 */
  background: var(--color-bg);
  border-radius: var(--radius-button);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.contact__consent-summary p {
  margin: 0;
}

/* 체크박스·동의 문구·처리방침 링크를 한 줄에 놓고, 링크가 넘칠 때만 다음 줄로
   보낸다(래핑 대상은 이 행뿐 — label 내부 텍스트는 줄바꿈시키지 않는다).
   padding-left(30px = 체크박스 18px + gap 12px)를 행 전체에 걸어 두고 label에
   같은 값을 음수 margin으로 상쇄하면, 링크가 다음 줄로 넘어갈 때만 이 30px
   들여쓰기가 자연히 적용된다 — 임의 breakpoint 없이 실제 래핑 여부로만 결정됨 */
.consent-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-1);
  row-gap: 4px;
  padding-left: 30px;
}

.contact__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: -30px;
  /* 터치 영역 44px는 label 높이 자체로 확보 — 체크박스·텍스트 모두 이 높이 안에서
     세로 중앙 정렬되므로 margin-top 계산이 필요 없다 */
  min-height: var(--touch-target-min);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
}

.contact__checkbox input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}

.contact__policy-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.contact__submit {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  /* 동의 체크박스 영역 → 보내기 버튼 간격 32px = form의 기본 gap(16px) + 여기 16px */
  margin-top: var(--space-3);
}

.contact__success {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-primary);
  font-weight: 600;
  text-align: center;
}

.contact__info {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  /* (2026-09-28) 세그먼트 트랙과 동일한 어두운 톤 */
  background: var(--color-border);
  border-radius: 16px; /* (2026-09-28) 입력·전화번호 카드 공통 */
  /* 높이 = 내용 크기(hug, 2026-09-25) — 필드 패널 그리드가 stretch라 입력 카드 높이로
     늘어나지 않도록 이 카드만 위쪽 정렬 */
  align-self: start;
}

.contact__info-lead {
  display: flex;
  flex-direction: column;
  /* 전화번호 ↔ 안내 문구 간격 12 → 4px (2026-09-25) */
  gap: 4px;
  /* 전화번호 ↔ 이메일/주소 그룹 간격(기존 72px = gap 4 + 여기 68) */
  margin-bottom: 68px;
}

/* (2026-09-28) 견적/문의 전환 버튼 — 화면 크기 상관없이 전화번호부터 주소까지
   있는 카드 맨 아래에 가로 2열로 고정(반응형 분기 없음) */
.contact__form-panel {
  display: flex;
  flex-direction: column;
  /* (2026-09-28) 세그먼트 트랙 패딩(8px)과 동일하게 축소 */
  gap: 8px;
}

.contact__form-panel .contact__form {
  flex: 1;
}

/* (2026-09-28) 세그먼트 컨트롤 UI — 트랙 안에 두 조각. 흰 배경은 버튼 자체가 아니라
   별도 인디케이터(.contact__mode-switch-indicator)가 담당해 좌우로 슬라이드하는
   모션을 만든다. 트랙이 옅은 색이면 흰 인디케이터와 대비가 거의 없어 어두운
   회색(--color-border)으로 — 좌측 전화카드 배경과 통일. radius(16px) = 조각
   radius(8px) + 패딩(8px)로 중첩 곡률을 맞춘다. 인디케이터 폭 계산을 단순하게
   유지하려고 버튼 사이 gap은 0 */
.contact__mode-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 8px;
  background: var(--color-border);
  border-radius: 16px;
}

/* 좌우로 슬라이드하는 흰 필 — 버튼 뒤에 깔리고(z-index), transform만 바뀌므로
   ease-in-out 모션이 자연스럽다. translateX(100%)는 자기 폭만큼 이동 = gap이 0이라
   정확히 오른쪽 조각 자리로 들어맞는다 */
.contact__mode-switch-indicator {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc(50% - 8px);
  border-radius: 8px;
  /* (2026-09-28) 밝은 소금색 — 좌측 카드가 어두운 톤이 되면서 조각도 맞춰 교체 */
  background: var(--color-bg-subtle);
  /* (2026-09-28) 더 퍼지고 연하게 */ box-shadow: 0 4px 12px rgba(46, 42, 36, 0.10);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.contact__mode-switch-indicator--right {
  transform: translateX(100%);
}

.contact__mode-switch .btn {
  width: 100%;
  /* (2026-09-28) 40px -> 56px로 확대 */
  min-height: 56px;
}

.contact__phone {
  /* (2026-09-28) 텍스트 라인 그라데이션 */
  background: linear-gradient(135deg, var(--color-text-secondary), var(--color-primary-on-dark));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-h1);
  font-weight: 700;
  text-decoration: none;
}

.contact__info-note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

/* [전화번호·안내 문구] ↔ [이메일·주소] 그룹 간격(2026-09-25) — 구분선을 없애고 간격을
   넓힘(80px → 72px 조정). 72px = 카드 gap 4 + 여기 margin 68 */
.contact__details {
  /* (2026-09-28) 전화번호↔이메일 간격은 이제 .contact__info-lead의
     margin-bottom이 담당 — 여기서 margin-top을 더하면 이중으로 벌어진다 */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact__details div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact__details dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.contact__details dd {
  margin: 0;
}

.contact__details a {
  text-decoration: none;
  color: var(--color-text);
}

/* 이메일 링크(2026-09-25) — 주소 텍스트에만 점선 밑줄(↗ 아래에는 없음) + ↗로 클릭
   가능함을 표시. 밑줄은 text-decoration으로 글자 아랫선 2px 아래에 붙인다.
   hover·키보드 포커스 시 밑줄이 실선으로 바뀌고 ↗가 가리키는 방향(오른쪽 위)으로
   4px 이동 — 색 변화에만 의존하지 않는다. 화살표 모션은 .cta-arrow-icon 공통 패턴 */
.contact__details .contact__email-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--color-text);
}

.contact__email-text {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-text-secondary);
  text-decoration-thickness: 1px;
  /* 글자 아랫선(p 같은 내림 획 포함)에서 2px 아래 — auto 위치는 기준선 기준이라
     내림 획이 점선을 가로지르므로 under(글자 아랫선 기준)로 잡는다 */
  text-underline-position: under;
  text-underline-offset: 2px;
}

.contact__email-link:hover .contact__email-text,
.contact__email-link:focus-visible .contact__email-text {
  text-decoration-style: solid;
  text-decoration-color: var(--color-text);
}

.contact__email-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.contact__email-link:hover .cta-arrow-icon,
.contact__email-link:focus-visible .cta-arrow-icon {
  transform: translate(4px, -4px);
}

/* (2026-09-28) 견적/문의 전환 버튼 디자인 — 배경 없음, 선택 시 외곽선 그라데이션
   (갯벌 --color-primary + 개흙 --color-text-secondary, 45도), 미선택 시 옅은 외곽선.
   예산 팝오버 안의 "협의 가능" 버튼도 같은 클래스를 재사용한다 */
.contact__mode-btn {
  /* 인디케이터(흰 필)보다 위에 그려져야 글자가 보인다 */
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  border-radius: 16px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body); /* (2026-09-28) 한 단계 축소 */
  font-weight: 500;
  transition: color 0.2s ease;
}

.contact__mode-btn:hover {
  background: transparent;
  color: var(--color-text);
}

.contact__mode-btn--active,
.contact__mode-btn--active:hover {
  background: transparent;
  color: var(--color-text);
  font-weight: 700;
}

.contact__quantity-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.contact__quantity-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.contact__quantity-btn:hover:not(:disabled) {
  background: var(--color-secondary-hover-bg);
}

.contact__quantity-btn:disabled {
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* (2026-09-28) 직접 입력 가능함을 항상 보이게 -/+ 버튼과 같은 외곽선을 상시
   노출하고, 가로폭을 늘려 여러 자릿수 + 우측 편집 아이콘이 함께 들어갈 공간을 확보 */
.contact__quantity-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.contact__quantity-value {
  width: 64px;
  min-width: 64px;
  height: 32px;
  padding: 4px 24px 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  text-align: center;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--color-text);
}

.contact__quantity-value:hover {
  background: var(--color-secondary-hover-bg);
}

.contact__quantity-value:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* 숫자 입력(type=text)이라 네이티브 스피너는 없지만, 혹시 브라우저가 number로
   취급하는 경우를 대비해 명시적으로 제거 */
.contact__quantity-value::-webkit-outer-spin-button,
.contact__quantity-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 직접 입력 가능함을 알려주는 옅은 색 펜 아이콘 — 입력창 오른쪽 중앙, 클릭 방해
   없도록 pointer-events: none */
.contact__quantity-edit-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.45;
  background-color: var(--color-text-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* 견적 폼 — 예산(선택) 드롭다운: 협의 가능 버튼 + 금액 슬라이더(2026-09-28) */
.contact__budget-field {
  position: relative;
}

.contact__budget-trigger {
  width: 100%;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  /* (2026-09-28) 다른 입력 필드와 동일하게 흰색 */
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-body);
  cursor: pointer;
  text-align: left;
}

.contact__budget-trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.contact__budget-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--color-text-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.contact__budget-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  box-shadow: 0 8px 24px rgba(46, 42, 36, 0.12);
}

.contact__budget-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact__budget-slider-value {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: 600;
  text-align: center;
}

.contact__budget-slider-wrap input[type='range'] {
  width: 100%;
  accent-color: var(--color-primary);
}

.contact__budget-done {
  align-self: flex-end;
  background: none;
  border: none;
  padding: var(--space-1) 0;
  color: var(--color-primary);
  font-size: var(--font-size-caption);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* 견적 폼 — 담은 품목 목록(장바구니). 각 줄은 라벨+삭제(x) / 수량 스테퍼,
   목록 마지막에 구분선 아래 총 수량(2026-09-28) */
.contact__cart-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* (2026-09-28) 품목 입력필드 → 담긴 항목 목록 간격 = 폼 기본 간격의 4배 */
  margin-top: calc(var(--space-3) * 4);
}

.contact__cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.contact__cart-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: 600;
}

.contact__cart-item-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact__cart-remove {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
}

/* × 글자(폰트 글리프)는 폰트마다 좌우 여백이 비대칭이라 중앙 정렬이 어긋나 보이는
   경우가 있어, 선 두 개를 교차시킨 CSS 아이콘으로 대체 — 크기·중앙 정렬이 항상
   정확하다(2026-09-28). 10px 정사각형 = 16px 텍스트 글리프와 비슷한 시각 크기 */
.contact__cart-remove-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.contact__cart-remove-icon::before,
.contact__cart-remove-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-surface);
}

.contact__cart-remove-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.contact__cart-remove-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

.contact__cart-remove:hover {
  background: var(--color-text-secondary);
}

.contact__cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  /* (2026-09-28) 담긴 항목 텍스트가 강조되도록 총 수량은 연한 색 + 낮은 굵기로 톤다운.
     크기는 담긴 항목과 동일(--font-size-body) */
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: 500;
  margin-bottom: calc(var(--space-3) * 4);
}