/*! (주)금양소재산업 홈페이지 — build 2026-08-28 */

/* ===== tokens.css ===== */
/* ============================================================
   디자인 토큰 — 색·타이포·간격·그림자의 단일 출처
   여기 값만 바꾸면 사이트 전체 톤이 함께 바뀝니다.
   ============================================================ */

:root {
  /* ---- Brand ---------------------------------------------- */
  --c-brand:        #2d7a3e;   /* 기존 사이트의 자연 녹색 계승 */
  --c-brand-dark:   #1f5a2c;
  --c-brand-light:  #4a9b5c;
  --c-brand-pale:   #eaf3ec;
  --c-accent:       #b8873a;   /* 인증·수출실적 등 신뢰 요소 강조 */
  --c-accent-pale:  #faf4e8;

  /* ---- Neutral -------------------------------------------- */
  --c-text:         #1a1c1a;
  --c-text-body:    #333834;
  --c-text-muted:   #5c625d;   /* WCAG AA: 흰 배경 대비 6.2:1 */
  --c-text-faint:   #6f746f;   /* WCAG AA: 흰 배경 대비 4.8:1 */
  --c-bg:           #ffffff;
  --c-bg-soft:      #f5f8f5;
  --c-bg-softer:    #fafbfa;
  --c-border:       #e0e6e0;
  --c-border-soft:  #eef1ee;

  /* ---- Status --------------------------------------------- */
  --c-danger:       #c0392b;
  --c-danger-pale:  #fdeeec;
  --c-success:      #1e7a45;
  --c-success-pale: #eaf6ee;

  /* ---- Typography ----------------------------------------- */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo",
               Roboto, sans-serif;
  --font-num:  "Pretendard Variable", "Pretendard", -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.25rem, 5.5vw, 3.75rem);
  --fs-h1:      clamp(1.875rem, 4vw, 2.75rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.125rem);
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-h4:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight:   1.25;
  --lh-heading: 1.35;
  --lh-body:    1.75;   /* 한글 장문 가독성 */

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---- Spacing (4px 배수) --------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- Layout --------------------------------------------- */
  --container:    1200px;
  --container-nr: 900px;    /* 본문 전용 좁은 폭 */
  --gutter:       1.25rem;
  --header-h:     72px;
  --header-h-sm:  60px;

  /* ---- Radius & Shadow ------------------------------------ */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgb(26 28 26 / 0.05);
  --shadow-sm: 0 2px 6px rgb(26 28 26 / 0.07);
  --shadow-md: 0 6px 20px rgb(26 28 26 / 0.09);
  --shadow-lg: 0 16px 40px rgb(26 28 26 / 0.12);

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  200ms;

  /* ---- Z-index -------------------------------------------- */
  --z-header:   100;
  --z-quick:    90;
  --z-overlay:  200;
  --z-modal:    300;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}

/* 애니메이션을 줄이도록 설정한 사용자를 존중합니다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== reset.css ===== */
/* ============================================================
   Reset — 브라우저 기본 스타일 정규화
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100vh;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* 한글은 단어 단위로 줄바꿈(keep-all)하되, 한 줄에 들어가지 않는 긴 토큰
   (예: "정수기필터(세디먼트·프리카본·UF멤브레인…)")은 강제로 끊어
   가로 스크롤이 생기지 않게 합니다. */
p, h1, h2, h3, h4, h5, h6,
li, dd, dt, td, th, figcaption, blockquote, label, span, a {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

ul, ol { list-style: none; padding: 0; }

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

table { border-collapse: collapse; width: 100%; }

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--c-brand-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 마우스 클릭 시에는 포커스링을 표시하지 않습니다. */
:focus:not(:focus-visible) { outline: none; }

/* 스크린리더 전용 텍스트 */
.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;
}

/* 키보드 사용자를 위한 본문 바로가기 */
.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-4);
  z-index: 999;
  background: var(--c-brand);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: var(--fw-semi);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }


/* ===== base.css ===== */
/* ============================================================
   Base — 타이포그래피, 링크, 버튼
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-text-body);
  background: var(--c-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); }

a:not([class]) {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:not([class]):hover { color: var(--c-brand-dark); }

strong, b { font-weight: var(--fw-semi); color: var(--c-text); }

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-10) 0;
}

::selection { background: var(--c-brand-pale); color: var(--c-brand-dark); }

/* ---- 본문 프로즈 ------------------------------------------ */
.prose > * + * { margin-top: var(--sp-5); }
.prose p { line-height: var(--lh-body); }
.prose h2 { margin-top: var(--sp-12); }
.prose h3 { margin-top: var(--sp-10); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-4); }

.prose ul, .prose ol {
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.prose ul { list-style: none; }
.prose ul > li {
  position: relative;
  padding-left: var(--sp-4);
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-brand-light);
}
.prose ol { list-style: decimal; }
.prose ol > li { padding-left: var(--sp-1); }
.prose ol > li::marker { color: var(--c-brand); font-weight: var(--fw-semi); }

/* ---- 버튼 ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8125rem var(--sp-6);
  border-radius: var(--radius);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  border: 1px solid transparent;
  min-height: 46px;   /* 터치 타깃 */
  /* flex 컨테이너 안에서 글자가 억지로 줄바꿈되지 않도록 합니다. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-dark); }

.btn--outline {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn--outline:hover { background: var(--c-brand-pale); }

.btn--ghost {
  background: #fff;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }

.btn--onDark {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  border-color: rgb(255 255 255 / 0.5);
  backdrop-filter: blur(4px);
}
.btn--onDark:hover { background: #fff; color: var(--c-brand-dark); }

.btn--lg { padding: 1rem var(--sp-8); font-size: var(--fs-body); min-height: 54px; }
.btn--sm { padding: 0.5rem var(--sp-4); font-size: var(--fs-xs); min-height: 38px; }
.btn--block { width: 100%; flex: 1 1 100%; }

/* 아주 좁은 화면에서는 버튼이 가로로 꽉 차도록 */
@media (max-width: 400px) {
  .productHero__actions .btn,
  .ctaBand__actions .btn,
  .hero__actions .btn { flex: 1 1 100%; }
}

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* 화살표 아이콘 */
.arrow { width: 16px; height: 16px; flex-shrink: 0; }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }


/* ===== layout.css ===== */
/* ============================================================
   Layout — 컨테이너, 헤더, 사이드바, 푸터
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-nr); }

.section { padding-block: var(--sp-16); }
.section--tight { padding-block: var(--sp-12); }
.section--soft { background: var(--c-bg-soft); }

@media (min-width: 1024px) {
  .section { padding-block: var(--sp-24); }
  .section--tight { padding-block: var(--sp-16); }
}

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border-soft);
  transition: box-shadow var(--dur) var(--ease);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }

/* 상단 유틸리티 바 */
.header__utility {
  display: none;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border-soft);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.header__utility .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-4);
  height: 34px;
}
.header__utility a { text-decoration: none; }
.header__utility a:hover { color: var(--c-brand); }
.header__utility .divider { color: var(--c-border); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h-sm);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
/* 기존 사이트 로고 이미지를 쓰는 경우 */
.logo--img img { height: 34px; width: auto; }
@media (min-width: 1024px) { .logo--img img { height: 42px; } }
.footer .logo--img img {
  height: 40px;
  /* 어두운 푸터에서 흰 배경 로고가 뜨지 않도록 반전 없이 밝기만 보정 */
  background: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.logo__mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
}
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name {
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  letter-spacing: -0.03em;
}
.logo__sub {
  font-size: 0.625rem;
  color: var(--c-text-muted);
  letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
}

/* 데스크톱 내비게이션 */
.gnb { display: none; }
.gnb__list { display: flex; align-items: center; gap: var(--sp-1); }
.gnb__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text-body);
  border-radius: var(--radius);
  position: relative;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.gnb__link:hover { color: var(--c-brand); }
.gnb__item.is-active > .gnb__link {
  color: var(--c-brand-dark);
  background: var(--c-brand-pale);
}

/* 드롭다운 */
.gnb__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.gnb__item { position: relative; }
.gnb__item:hover > .gnb__panel,
.gnb__item:focus-within > .gnb__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 오른쪽 끝 메뉴의 드롭다운은 화면 밖으로 나가지 않도록 우측 정렬합니다. */
.gnb__item:nth-last-child(-n + 2) > .gnb__panel {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-6px);
}
.gnb__item:nth-last-child(-n + 2):hover > .gnb__panel,
.gnb__item:nth-last-child(-n + 2):focus-within > .gnb__panel {
  transform: translateX(0) translateY(0);
}
.gnb__panel a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.gnb__panel a:hover { background: var(--c-brand-pale); color: var(--c-brand-dark); }
.gnb__panel .gnb__groupLabel {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  font-weight: var(--fw-semi);
}
.gnb__panel .gnb__groupLabel + a { margin-top: 0; }

/* 헤더 우측 CTA */
.header__cta { display: none; }

/* 모바일 토글 */
.navToggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  margin-right: -8px;
}
.navToggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.navToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴 */
.mobileNav {
  position: fixed;
  inset: var(--header-h-sm) 0 0 0;
  background: #fff;
  z-index: var(--z-overlay);
  overflow-y: auto;
  padding: var(--sp-4) 0 var(--sp-16);
  /* 닫혔을 때 화면 밖으로 밀어내면(translateX) 문서 폭이 늘어나 가로 스크롤이 생깁니다.
     뷰포트 안에 머무는 페이드 방식으로 처리합니다. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.mobileNav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobileNav__group { border-bottom: 1px solid var(--c-border-soft); }
.mobileNav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) var(--gutter);
  font-size: 1.0625rem;
  font-weight: var(--fw-semi);
  color: var(--c-text);
  text-align: left;
}
.mobileNav__trigger .chev {
  width: 18px; height: 18px;
  color: var(--c-text-faint);
  transition: transform var(--dur) var(--ease);
}
.mobileNav__trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobileNav__trigger[aria-expanded="true"] { color: var(--c-brand); }
.mobileNav__panel {
  display: none;
  padding: 0 var(--gutter) var(--sp-4);
  background: var(--c-bg-softer);
}
.mobileNav__panel.is-open { display: block; }
.mobileNav__panel a {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.mobileNav__panel a:hover { color: var(--c-brand); }
.mobileNav__panel .mobileNav__sublabel {
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  font-weight: var(--fw-semi);
}
.mobileNav__foot {
  padding: var(--sp-6) var(--gutter) 0;
  display: grid;
  gap: var(--sp-3);
}
.mobileNav__tel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  background: var(--c-brand-pale);
  border-radius: var(--radius);
}
.mobileNav__tel span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.mobileNav__tel strong { font-size: 1.25rem; color: var(--c-brand-dark); }

body.nav-open { overflow: hidden; }

@media (min-width: 1024px) {
  .header__utility { display: block; }
  .header__inner { height: var(--header-h); }
  .gnb { display: block; }
  .navToggle { display: none; }
  .mobileNav { display: none; }
  .logo__mark { width: 40px; height: 40px; }
  .logo__name { font-size: 1.1875rem; }
  /* 1024~1279px 구간은 메뉴 7개가 빠듯하므로 여백을 줄입니다. */
  .gnb__link { padding-inline: var(--sp-3); font-size: 0.9375rem; }
  .logo__sub { font-size: 0.5625rem; }
}

/* 헤더 CTA 버튼은 공간이 확보되는 폭에서만 노출합니다. */
@media (min-width: 1280px) {
  .header__cta { display: inline-flex; }
  .gnb__link { padding-inline: var(--sp-4); font-size: var(--fs-sm); }
}

/* 영문 메뉴 라벨은 한글보다 훨씬 길어서(예: "Powder / Finish") 같은 여백으로는
   7개 항목이 한 줄에 들어가지 않는다. 영문 페이지(html[lang="en"])에서만
   메뉴 여백·글자 크기를 좁혀 넘치지 않게 한다(한글판과 달리 폭이 넓어져도 늘리지 않는다). */
html[lang="en"] .gnb__link { padding-inline: var(--sp-2); font-size: 0.8125rem; }
@media (min-width: 1024px) {
  html[lang="en"] .gnb__link { padding-inline: var(--sp-2); font-size: 0.8125rem; }
}
@media (min-width: 1280px) {
  html[lang="en"] .gnb__link { padding-inline: var(--sp-2); font-size: 0.8125rem; }
}
/* 영문 워드마크 로고는 원본이 매우 길쭉해(700×44) 한글판과 같은 높이로 맞추면
   폭이 지나치게 넓어져 메뉴와 겹친다. 영문 페이지에서만 로고 높이를 낮춘다. */
html[lang="en"] .logo--img img { height: 30px; }
@media (min-width: 1280px) {
  html[lang="en"] .logo--img img { height: 36px; }
}

/* ============================================================
   Page header (서브 페이지 상단 배너)
   ============================================================ */
.pageHead {
  position: relative;
  background: linear-gradient(135deg, #17431f, var(--c-brand-dark) 55%, var(--c-brand));
  color: #fff;
  overflow: hidden;
}
/* 섹션별 실제 배너 이미지가 있을 때.
   제목 줄이 배너 오른쪽 밝은 영역까지 뻗기 때문에, 방향성 그라디언트만으로는
   흰 글자 대비가 확보되지 않는다. 전면에 균일한 어두운 베일을 한 겹 더 깐다. */
.pageHead--img {
  background-image:
    linear-gradient(100deg, rgb(15 42 21 / 0.96) 0%, rgb(18 52 25 / 0.72) 55%, rgb(22 64 31 / 0.55) 100%),
    linear-gradient(rgb(15 42 21 / 0.58), rgb(15 42 21 / 0.58)),
    var(--banner);
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
.pageHead__inner {
  position: relative;
  padding-block: var(--sp-8) var(--sp-6);
}
@media (min-width: 768px) {
  .pageHead__inner { padding-block: var(--sp-10) var(--sp-8); }
}
.pageHead__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
  margin-bottom: var(--sp-3);
}
.pageHead h1 {
  color: #fff;
  margin-bottom: var(--sp-4);
}
.pageHead__desc {
  color: rgb(255 255 255 / 0.9);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 90ch;
}

/* 브레드크럼 */
.breadcrumb {
  border-bottom: 1px solid var(--c-border-soft);
  background: var(--c-bg-softer);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: '›'; color: var(--c-text-faint); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--c-brand); }
.breadcrumb [aria-current] { color: var(--c-text); font-weight: var(--fw-medium); }

/* ============================================================
   Content + Sidebar
   ============================================================ */
.pageBody { padding-block: var(--sp-10) var(--sp-16); }

.pageGrid { display: grid; gap: var(--sp-10); }
/* 그리드 자식이 내용물(넓은 표 등) 때문에 늘어나 페이지에 가로 스크롤을
   만들지 않도록 최소 폭을 풀어줍니다. */
.pageGrid > * { min-width: 0; }
.pageContent { min-width: 0; }

@media (min-width: 1024px) {
  .pageBody { padding-block: var(--sp-12) var(--sp-24); }
  .pageGrid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-16);
    align-items: start;
  }
}

/* 좌측 서브 메뉴 */
.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}
.sidebar__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-brand);
  margin-bottom: var(--sp-3);
}
.sidebar__list { display: grid; gap: 2px; }
.sidebar__list a {
  display: block;
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar__list a:hover { background: var(--c-bg-soft); color: var(--c-brand); }
.sidebar__list a[aria-current="page"] {
  background: var(--c-brand-pale);
  color: var(--c-brand-dark);
  font-weight: var(--fw-semi);
}
.sidebar__groupLabel {
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  font-weight: var(--fw-semi);
}
.sidebar__sublist a { padding-left: var(--sp-6); }

/* 모바일 서브 메뉴 (가로 스크롤 칩) */
.subnavMobile {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  border-bottom: 1px solid var(--c-border-soft);
  scrollbar-width: none;
}
.subnavMobile::-webkit-scrollbar { display: none; }
.subnavMobile a {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.subnavMobile a[aria-current="page"] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  font-weight: var(--fw-semi);
}
@media (min-width: 1024px) { .subnavMobile { display: none; } }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: #1c2620;
  color: #c2ccc5;              /* 어두운 배경 대비 8.6:1 */
  font-size: var(--fs-sm);
}
/* base.css 의 a:not([class]) 브랜드 컬러가 어두운 푸터에서 읽히지 않으므로 재정의합니다. */
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

.footer__certs {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding-block: var(--sp-8);
}
.footer__certsTitle {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa8a1;
  margin-bottom: var(--sp-4);
  text-align: center;
}
.certStrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.certStrip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: #cfd8d2;
  background: rgb(255 255 255 / 0.04);
}
/* 로고 이미지는 흰 배경 원본이므로 흰 타일 위에 올려 대비를 확보합니다. */
.certStrip__item:has(img) {
  background: #fff;
  border-color: rgb(255 255 255 / 0.28);
  padding: 6px 10px;
}
.certStrip__item img {
  height: 52px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}
@media (max-width: 639px) {
  .certStrip__item img { height: 40px; max-width: 74px; }
}

.footer__main {
  padding-block: var(--sp-12);
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 768px) {
  .footer__main { grid-template-columns: 1.4fr 1fr; }
}
@media (min-width: 1024px) {
  .footer__main { grid-template-columns: 1.5fr 1fr 1fr; }
}

.footer__brand .logo__name { color: #fff; }
.footer__brand .logo__sub { color: #9aa8a1; }
.footer__info {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.footer__info dl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer__info dt { color: #9aa8a1; }
.footer__info dd { margin: 0; }

.footer__colTitle {
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-4);
}
.footer__links { display: grid; gap: var(--sp-2); font-size: var(--fs-xs); }

.footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 0.08);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: #9aa8a1;
}
.footer__policy { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__policy a { color: #cfd8d2; }

/* ============================================================
   Quick menu (우측 고정)
   ============================================================ */
.quick {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-quick);
  display: grid;
  gap: var(--sp-2);
}
.quick__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quick__btn:hover { background: var(--c-brand-dark); transform: translateY(-2px); }
.quick__btn--ghost { background: #fff; color: var(--c-text-body); border: 1px solid var(--c-border); }
.quick__btn--ghost:hover { background: var(--c-bg-soft); color: var(--c-brand); }
.quick__btn svg { width: 20px; height: 20px; }

#toTop { opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); }
#toTop.is-visible { opacity: 1; visibility: visible; }

@media (min-width: 1024px) {
  .quick { right: var(--sp-6); bottom: var(--sp-8); }
  .quick__btn { width: 52px; height: 52px; }
}


/* ===== components.css ===== */
/* ============================================================
   Components — 카드, 표, 폼, 타임라인, 갤러리 등
   ============================================================ */

/* ---- 섹션 헤더 --------------------------------------------- */
.sectionHead { margin-bottom: var(--sp-10); }
.sectionHead--center { text-align: center; margin-inline: auto; max-width: 62ch; }
.sectionHead__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--sp-3);
}
.sectionHead h2 { font-size: var(--fs-h2); }
.sectionHead p {
  margin-top: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* ---- Hero -------------------------------------------------- */
.hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(105deg, rgb(24 58 34 / 0.92) 0%, rgb(45 122 62 / 0.78) 55%, rgb(74 155 92 / 0.6) 100%),
    linear-gradient(160deg, #2d7a3e, #1f5a2c);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* 기존 슬라이드 이미지에는 문구가 박혀 있어 배경으로 깔면 새 카피와 겹친다.
   이미지를 오른쪽 칼럼에 따로 두고, 문구가 있는 왼쪽 부분은 잘라내어 보여준다. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 슬라이드 왼쪽에 박힌 기존 문구가 새 카피와 겹쳐 보이지 않도록
   텍스트가 놓이는 구간은 완전 불투명하게 덮는다. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    #0f2a15 0%,
    #0f2a15 42%,
    rgb(18 52 25 / 0.90) 58%,
    rgb(27 78 37 / 0.58) 78%,
    rgb(33 96 47 / 0.38) 100%);
}
@media (max-width: 900px) {
  .hero__media::after {
    background: linear-gradient(150deg, #0f2a15 0%, #0f2a15 62%, rgb(20 58 28 / 0.9) 100%);
  }
}
.hero__inner { position: relative; padding-block: var(--sp-8); width: 100%; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-5);
  backdrop-filter: blur(4px);
}
.hero h1 {
  color: #fff;
  font-size: var(--fs-display);
  max-width: 18ch;
  letter-spacing: -0.035em;
}
.hero__desc {
  margin-top: var(--sp-5);
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgb(255 255 255 / 0.95);
}
.hero__actions {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (min-width: 1024px) {
  .hero { min-height: 480px; }
  .hero__inner { padding-block: var(--sp-12); }
}

/* ---- 통계 -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: #fff;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.stat__value {
  font-family: var(--font-num);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--fw-bold);
  color: var(--c-brand);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat__value .unit { font-size: 0.5em; margin-left: 2px; color: var(--c-brand-light); }
.stat__label {
  margin-top: var(--sp-2);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.stat__note {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ---- 카드 그리드 ------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--sp-6); }
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  height: 100%;
}
a.card:hover {
  border-color: var(--c-brand-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-bg-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 카드 프레임을 항상 꽉 채워 썸네일 크기가 들쭉날쭉해 보이지 않게 한다.
   원본 비율이 제각각이라 중심선 기준으로 살짝 위쪽을 우선해 자른다. */
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card__tag {
  font-size: var(--fs-xs);
  color: var(--c-brand);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-2);
}
.card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  letter-spacing: -0.02em;
}
.card__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.65;
  flex: 1;
}
.card__more {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-brand);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* 이미지 자리표시자 */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: repeating-linear-gradient(45deg, #f0f4f1, #f0f4f1 10px, #e8eee9 10px, #e8eee9 20px);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-4);
}
.ph svg { width: 28px; height: 28px; opacity: 0.55; }

/* ---- 카테고리 배너 카드 ------------------------------------ */
.catCard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #17431f, var(--c-brand));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.catCard:nth-child(2) { background: linear-gradient(160deg, #235741, #2f7d5c); }
.catCard:nth-child(3) { background: linear-gradient(160deg, #63491f, #8a6a2e); }
.catCard:nth-child(4) { background: linear-gradient(160deg, #2b322d, #454f48); }
.catCard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.catCard::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
}
.catCard__title {
  position: relative;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: -0.025em;
}
.catCard__desc {
  position: relative;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.94);
  line-height: 1.6;
}
.catCard__more {
  position: relative;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---- 특징 목록 (아이콘) ------------------------------------ */
.featureList { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .featureList { grid-template-columns: repeat(2, 1fr); } }
.feature {
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.feature__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--c-brand-pale);
  color: var(--c-brand);
  margin-bottom: var(--sp-4);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.feature p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.7; }

/* ---- 제품 상세 --------------------------------------------- */
.productHero {
  display: grid;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
@media (min-width: 900px) {
  .productHero { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
  /* 가로로 아주 긴 배너형 사진은 좁은 칼럼에 넣으면 작고 답답해 보이므로
     사진을 전체 폭으로 펼치고, 설명은 그 아래로 내린다(빌드 시점에 판정). */
  .productHero--wide { grid-template-columns: 1fr; }
}
.productHero__media {
  position: relative;
  /* 빌드 시점에 원본 사진 비율(aspect-ratio)을 인라인 스타일로 넣어준다(mediaAspectStyle).
     사진마다 정사각 몽타주·가로로 긴 배너 등 비율이 제각각이라, 고정 박스 대신
     각 사진에 꼭 맞는 프레임을 짜서 위아래·양옆 여백이 뜨지 않게 한다.
     스타일이 없으면(자리표시자·저해상도 사진) 기본값인 정사각으로 대체한다. */
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 해상도가 충분한 사진은 프레임을 꽉 채운다.
   프레임 비율이 원본과 동일하므로 잘려나가는 부분은 없다. */
.productHero__media:not(.productHero__media--compact) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 원본 해상도가 낮은 사진(예: 게르마늄볼)은 프레임 자체도 사진 비율만큼만 작게
   줄여(빌드 시점 max-width) 원본 크기 그대로 중앙 배치한다 — 폭을 억지로 늘리면
   화질이 뭉개지기 때문에 확대하지 않되, 여백도 과하게 남지 않도록 한다. */
.productHero__media--compact { margin-inline: auto; }
.productHero__media--compact img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
.productHero__group {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-brand-pale);
  color: var(--c-brand-dark);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-3);
}
.productHero h1 { font-size: var(--fs-h1); }
.productHero__en {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
  letter-spacing: 0.01em;
}
.productHero__summary {
  margin-top: var(--sp-4);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-text-body);
}
.productHero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.prodSection { margin-top: var(--sp-12); }
.prodSection__title {
  font-size: var(--fs-h3);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-brand);
  margin-bottom: var(--sp-5);
}

/* 용도 태그 */
.tagList { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--c-text-body);
}

/* 하위 제품 */
.variantList { display: grid; gap: var(--sp-4); }
.variant {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--radius);
  background: var(--c-bg-softer);
}
.variant h4 { color: var(--c-brand-dark); margin-bottom: var(--sp-2); }
.variant p { font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text-body); }

/* 지표 카드 (원기석 등) */
.metricGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 768px) { .metricGrid { grid-template-columns: repeat(4, 1fr); } }
.metric {
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-accent-pale);
  border: 1px solid #ecdfc4;
  border-radius: var(--radius);
  text-align: center;
}
.metric__label { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: var(--fw-semi); }
.metric__value {
  margin-top: var(--sp-2);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  letter-spacing: -0.02em;
}
.metric__desc { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ---- 데이터 표 --------------------------------------------- */
.tableWrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.dataTable { min-width: 100%; font-size: var(--fs-sm); }
.dataTable th, .dataTable td {
  padding: var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border-soft);
  vertical-align: top;
  line-height: 1.65;
}
.dataTable tr:last-child th, .dataTable tr:last-child td { border-bottom: 0; }
.dataTable th {
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  width: 30%;
  min-width: 110px;
}
.dataTable td { color: var(--c-text-body); }

/* ---- 타임라인 (연혁) --------------------------------------- */
.timeline { position: relative; padding-left: var(--sp-8); }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--c-brand-light), var(--c-border));
}
.tl { position: relative; padding-bottom: var(--sp-8); }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-8) * -1); top: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-border);
}
.tl.is-highlight::before { border-color: var(--c-brand); background: var(--c-brand); }
.tl__year {
  font-family: var(--font-num);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  color: var(--c-brand);
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.tl.is-highlight .tl__year { color: var(--c-brand-dark); }
.tl__items { margin-top: var(--sp-2); display: grid; gap: var(--sp-2); }
.tl__items li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-body);
  line-height: 1.7;
}
.tl__items li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-text-faint);
}

@media (min-width: 768px) {
  .timeline { padding-left: var(--sp-12); }
  .tl::before { left: calc(var(--sp-12) * -1); }
  .timeline::before { left: 7px; }
}

/* ---- 프로세스 (제작공정) ----------------------------------- */
.processList { display: grid; gap: var(--sp-4); counter-reset: step; }
.processStep {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .processStep { grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
}
.processStep__num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.processStep__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.processStep h3 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.processStep__duration {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 2px var(--sp-3);
  background: var(--c-bg-soft);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.processStep__details { display: grid; gap: var(--sp-3); }
.processStep__details li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.processStep__details li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-brand-light);
}

/* ---- 번호 목록 (구매방법) ---------------------------------- */
.termList { display: grid; gap: var(--sp-4); counter-reset: term; }
.term {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.term::before {
  counter-increment: term;
  content: counter(term);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-brand-pale);
  color: var(--c-brand-dark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.term h3 { font-size: var(--fs-h4); font-weight: var(--fw-semi); }
.term p { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text-body); }

/* ---- 인증서 갤러리 ----------------------------------------- */
.certFilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.certFilter button {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  transition: all var(--dur) var(--ease);
}
.certFilter button:hover { border-color: var(--c-brand); color: var(--c-brand); }
.certFilter button[aria-pressed="true"] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  font-weight: var(--fw-semi);
}

.certGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 768px) { .certGrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .certGrid { grid-template-columns: repeat(4, 1fr); } }

.certItem {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.certItem:hover { border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
.certItem__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--c-bg-soft);
  overflow: hidden;
}
.certItem__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }
.certItem__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1; }
.certItem__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  line-height: 1.45;
}
.certItem__meta {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  line-height: 1.5;
}
.certItem__result {
  display: block;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--fs-xs);
  color: var(--c-brand-dark);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.certItem.is-hidden { display: none; }

/* 라이트박스 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgb(12 18 14 / 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.lightbox.is-open { display: flex; }
.lightbox__inner {
  position: relative;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lightbox__img {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-soft);
  padding: var(--sp-4);
}
.lightbox__img img { max-height: 70vh; width: auto; object-fit: contain; }
.lightbox__caption {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.lightbox__caption h3 { font-size: var(--fs-h4); }
.lightbox__caption p { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--sp-1); }
.lightbox__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--c-text);
}
.lightbox__close:hover { background: #fff; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.lightbox__nav--prev { left: var(--sp-3); }
.lightbox__nav--next { right: var(--sp-3); }

/* ---- 실적 카드 --------------------------------------------- */
.projectCard { display: grid; gap: 0; }
.projectSpecs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--sp-6);
}
@media (min-width: 768px) { .projectSpecs { grid-template-columns: repeat(4, 1fr); } }
.projectSpec { background: #fff; padding: var(--sp-4); text-align: center; }
.projectSpec__label { font-size: var(--fs-xs); color: var(--c-text-muted); }
.projectSpec__value {
  margin-top: var(--sp-1);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

/* ---- 폼 --------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.formRow { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .formRow--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.field__req { color: var(--c-danger); font-size: var(--fs-xs); }
.field__hint { font-size: var(--fs-xs); color: var(--c-text-muted); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.75rem var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--fs-sm);
  color: var(--c-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-height: 46px;
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-pale);
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.7; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
}

.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--c-danger);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--c-danger-pale);
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--c-danger);
  min-height: 0;
}
.field__error:empty { display: none; }

/* 체크박스 */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.check input[type="checkbox"] {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--c-brand);
  cursor: pointer;
}

/* 허니팟 — 사람에게는 보이지 않지만 봇은 채우는 함정 필드입니다.
   display:none 은 봇이 쉽게 감지하므로 시각적으로만 숨깁니다. */
.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 폼 상태 메시지 */
.formStatus {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.65;
  display: none;
}
.formStatus.is-visible { display: block; }
.formStatus--error {
  background: var(--c-danger-pale);
  border: 1px solid #f3cfca;
  color: #8f2a1f;
}
.formStatus--success {
  background: var(--c-success-pale);
  border: 1px solid #c3e3ce;
  color: #14572f;
}

/* 개인정보 동의 박스 */
.privacyBox {
  max-height: 180px;
  overflow-y: auto;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-softer);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--c-text-muted);
}
.privacyBox h4 { font-size: var(--fs-xs); color: var(--c-text); margin-bottom: var(--sp-2); }
.privacyBox dl { display: grid; gap: var(--sp-1); }
.privacyBox dt { font-weight: var(--fw-semi); color: var(--c-text-body); }
.privacyBox dd { margin: 0 0 var(--sp-2); }

/* 견적문의 페이지 레이아웃 */
.contactLayout { display: grid; gap: var(--sp-10); }
@media (min-width: 1024px) {
  .contactLayout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-12);
    align-items: start;
  }
  .contactLayout__side { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.contactPanel {
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg-softer);
}
.contactPanel__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-brand);
  margin-bottom: var(--sp-5);
}
.contactPanel__actions { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }

/* 연락처 정보 패널 */
.contactInfo { display: grid; gap: var(--sp-5); }
.contactInfo__item {
  display: flex;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border-soft);
}
.contactInfo__item:last-child { border-bottom: 0; padding-bottom: 0; }
.contactInfo__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-pale);
  color: var(--c-brand);
  border-radius: var(--radius);
}
.contactInfo__icon svg { width: 20px; height: 20px; }
.contactInfo__label { font-size: var(--fs-xs); color: var(--c-text-muted); }
.contactInfo__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin-top: 2px;
  line-height: 1.5;
}
.contactInfo__value a { text-decoration: none; }
.contactInfo__value a:hover { color: var(--c-brand); }

/* ---- CTA 밴드 ---------------------------------------------- */
.ctaBand {
  background: linear-gradient(120deg, var(--c-brand-dark), var(--c-brand));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ctaBand::before {
  content: '';
  position: absolute;
  left: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.07);
}
.ctaBand h2 { color: #fff; position: relative; font-size: var(--fs-h2); }
.ctaBand p {
  position: relative;
  margin-top: var(--sp-3);
  color: rgb(255 255 255 / 0.94);
  font-size: var(--fs-sm);
  max-width: 52ch;
  margin-inline: auto;
}
.ctaBand__actions {
  position: relative;
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
@media (min-width: 768px) { .ctaBand { padding: var(--sp-16) var(--sp-12); } }

/* ---- 파트너 로고 ------------------------------------------- */
.partnerStrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
}
.partnerStrip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--sp-6) var(--sp-10);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}
.partnerStrip__item img { max-height: 72px; width: auto; }

/* ---- 안내 박스 --------------------------------------------- */
.notice {
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  background: var(--c-bg-softer);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.notice--brand { background: var(--c-brand-pale); border-color: #c9e2cf; }
.notice--warn { background: var(--c-accent-pale); border-color: #ecdfc4; }
.notice__title {
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.notice__title svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- 빈 상태 ----------------------------------------------- */
.empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg-softer);
}
.empty svg { width: 40px; height: 40px; color: var(--c-text-faint); margin: 0 auto var(--sp-4); }
.empty h3 { font-size: var(--fs-h4); color: var(--c-text); }
.empty p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ---- 사이트맵 ---------------------------------------------- */
.sitemapGrid { display: grid; gap: var(--sp-8); }
@media (min-width: 640px) { .sitemapGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sitemapGrid { grid-template-columns: repeat(4, 1fr); } }
.sitemapCol h2 {
  font-size: var(--fs-h4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-brand);
  margin-bottom: var(--sp-3);
}
.sitemapCol ul { display: grid; gap: var(--sp-2); }
.sitemapCol a { font-size: var(--fs-sm); color: var(--c-text-body); text-decoration: none; }
.sitemapCol a:hover { color: var(--c-brand); }
.sitemapCol__sub { padding-left: var(--sp-4); margin-top: var(--sp-2); border-left: 1px solid var(--c-border); }
.sitemapCol__subLabel { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: var(--sp-3); font-weight: var(--fw-semi); }

/* ---- 지도 -------------------------------------------------- */
.mapFrame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-bg-soft);
}
.mapFrame iframe { width: 100%; height: 100%; border: 0; }

/* ---- 관계사 링크 ------------------------------------------- */
.familyList { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .familyList { grid-template-columns: repeat(3, 1fr); } }
.familyCard {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.familyCard:hover { border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
.familyCard__name {
  font-weight: var(--fw-semi);
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.familyCard__name svg { width: 14px; height: 14px; color: var(--c-text-faint); }
.familyCard__desc { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ---- 작성중 배지 ------------------------------------------- */
.draftBadge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-accent-pale);
  border: 1px solid #ecdfc4;
  color: #8a6524;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

/* ---- 제품 안내 시트 (기존 사이트 이미지 자료) --------------- */
.sheetList { display: grid; gap: var(--sp-6); }
@media (min-width: 700px)  { .sheetList { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sheetList { grid-template-columns: repeat(3, 1fr); } }
.sheet {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sheet:hover { border-color: var(--c-brand-light); box-shadow: var(--shadow-sm); }
.sheet img { width: 100%; height: auto; display: block; }
.sheet figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border-soft);
}
.sheet figcaption strong { color: var(--c-text); }

/* ---- 사진 그리드 (비장참숯 · 갤러리) ----------------------- */
.photoGrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .photoGrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .photoGrid { grid-template-columns: repeat(4, 1fr); } }
.photo {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; }
.photo--tall img { aspect-ratio: 3/4; object-fit: contain; background: var(--c-bg-soft); }
.photo figcaption {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* 넓은 안내 이미지 한 장 */
.wideImage {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.wideImage img { width: 100%; height: auto; display: block; cursor: zoom-in; }

/* 인물 사진 (대표이사) */
.portrait {
  float: right;
  width: 180px;
  margin: 0 0 var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .portrait { float: none; margin: 0 0 var(--sp-5); width: 150px; } }
.signature { max-width: 245px; height: auto; display: inline-block; vertical-align: middle; }

/* ---- 이미지 확대 보기 (zoom.js) ---------------------------- */
.sheet img,
.photo img { cursor: zoom-in; }
.sheet img:focus-visible,
.photo img:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}
body.has-zoom { overflow: hidden; }

.zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
  background: rgb(10 20 13 / 0.92);
}
.zoom.is-open { display: flex; }

.zoom__figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.zoom__img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}
.zoom__caption {
  color: #e8efe9;
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}
.zoom__caption strong { color: #fff; }

.zoom__close,
.zoom__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.zoom__close:hover,
.zoom__nav:hover { background: rgb(255 255 255 / 0.22); border-color: rgb(255 255 255 / 0.5); }
.zoom__close:focus-visible,
.zoom__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zoom__close svg,
.zoom__nav svg { width: 22px; height: 22px; }

.zoom__close { top: var(--sp-4); right: var(--sp-4); }
.zoom__nav--prev { left: var(--sp-3); top: 50%; transform: translateY(-50%); }
.zoom__nav--next { right: var(--sp-3); top: 50%; transform: translateY(-50%); }

.zoom__counter {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  color: #cfd8d2;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}

@media (max-width: 639px) {
  .zoom__close, .zoom__nav { width: 40px; height: 40px; }
  .zoom__nav--prev { left: 4px; }
  .zoom__nav--next { right: 4px; }
  .zoom__img { max-height: 66vh; }
}