/* TOM CARE — 코퍼레이트 홈페이지 구현 레이어.
   토큰은 재정의하지 않고 ../styles.css 가 제공하는 값만 소비합니다.
   1440px 대시보드 그리드가 아닌 1200px 마케팅 그리드를 쓰므로,
   그 하나만 로컬 변수(--home-*)로 둡니다. */

:root {
  --home-max: 1200px;
  --home-gutter: var(--tc-page-gutter);
  --home-section-y: 88px;
  --home-header-h: 72px;
}

/* base.css 는 모든 a 에 밑줄 보더를 줍니다. 마케팅 면에서는 해제하고
   내비·버튼·카드 링크는 각자의 상태 표현을 씁니다. */
a { border-bottom: none; }
img, svg { display: block; max-width: 100%; }

/* 마케팅 면은 흰 배경을 씁니다(대시보드 기본값은 --tc-surface-page).
   한국어 줄바꿈(word-break: keep-all)은 tokens/base.css 로 올라갔습니다. */
body { background: var(--tc-surface-card); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* 스티키 헤더에 앵커 타깃이 가리지 않도록 합니다. */
main [id] { scroll-margin-top: 96px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 var(--home-gutter);
}

.section { padding: var(--home-section-y) 0; }
.section--alt {
  background: var(--tc-surface-page);
  border-top: 1px solid var(--tc-border-subtle);
  border-bottom: 1px solid var(--tc-border-subtle);
}
.section--hero {
  background: var(--tc-surface-page);
  border-bottom: 1px solid var(--tc-border-subtle);
  padding: 72px 0;
  /* 진입 애니메이션이 오른쪽 56px 에서 시작하므로, 좁은 화면에서는 그 순간
     화면을 넘어 가로 스크롤바가 잠깐 나타납니다. 여기서 잘라 막습니다. */
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tc-surface-card);
  color: var(--tc-text-primary);
  font: var(--tc-text-label);
  padding: 10px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
}
.skip-link:focus { left: var(--home-gutter); top: 8px; }

/* ---------- 공통 프리미티브 ---------- */

.eyebrow {
  font: var(--tc-text-overline);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: var(--tc-text-brand);
}

.rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--tc-red-500);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.section-head--center { align-items: center; text-align: center; }
.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.section-head__title {
  font: var(--tc-text-display-md);
  letter-spacing: var(--tc-tracking-tight);
  margin: 0;
}
.section-head__lede {
  font: var(--tc-text-body-md);
  color: var(--tc-text-secondary);
}
.section-head__group { display: flex; flex-direction: column; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--tc-control-lg);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--tc-radius-sm);
  font: var(--tc-text-label);
  letter-spacing: var(--tc-tracking-normal);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--tc-transition-control);
}
.btn--lg { height: 46px; padding: 0 22px; font: var(--tc-text-title-sm); }
.btn--sm { height: 38px; padding: 0 18px; }

.btn--brand { background: var(--tc-action-brand-bg); color: var(--tc-action-brand-fg); }
.btn--brand:hover { background: var(--tc-action-brand-bg-hover); color: var(--tc-action-brand-fg); }
.btn--brand:active { background: var(--tc-action-brand-bg-active); }

.btn--primary { background: var(--tc-action-primary-bg); color: var(--tc-action-primary-fg); }
.btn--primary:hover { background: var(--tc-action-primary-bg-hover); color: var(--tc-action-primary-fg); }
.btn--primary:active { background: var(--tc-action-primary-bg-active); }

.btn--outline {
  background: var(--tc-surface-card);
  color: var(--tc-text-primary);
  border-color: var(--tc-border);
}
.btn--outline:hover {
  background: var(--tc-surface-hover);
  border-color: var(--tc-border-strong);
  color: var(--tc-text-primary);
}
.btn--outline:active { background: var(--tc-surface-active); }

.btn--outline-inverse {
  background: transparent;
  color: var(--tc-neutral-0);
  border-color: var(--tc-neutral-600);
}
.btn--outline-inverse:hover {
  background: var(--tc-neutral-700);
  border-color: var(--tc-neutral-500);
  color: var(--tc-neutral-0);
}
.btn--light { background: var(--tc-neutral-0); color: var(--tc-neutral-900); }
.btn--light:hover { background: var(--tc-neutral-200); color: var(--tc-neutral-900); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--tc-text-label);
  color: var(--tc-text-primary);
  transition: var(--tc-transition-control);
}
.link-arrow svg { transition: transform var(--tc-duration-fast) var(--tc-ease-standard); }
.link-arrow:hover { color: var(--tc-text-link-hover); }
.link-arrow:hover svg { transform: translateX(3px); }

.card {
  background: var(--tc-surface-card);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-xs);
  transition: border-color var(--tc-duration-fast) var(--tc-ease-standard),
              box-shadow var(--tc-duration-fast) var(--tc-ease-standard);
}
.card:hover { border-color: var(--tc-border); box-shadow: var(--tc-shadow-sm); }

/* 사진 에셋이 아직 없어 스트라이프 플레이스홀더로 자리를 잡습니다. */
.figure {
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background-image: repeating-linear-gradient(135deg,
    var(--tc-neutral-100) 0 12px, var(--tc-neutral-50) 12px 24px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.figure--sunken {
  background-image: repeating-linear-gradient(135deg,
    var(--tc-neutral-100) 0 12px, var(--tc-neutral-25) 12px 24px);
}
/* 실제 사진이 들어가면 .figure__note 를 <img> 로 교체합니다.
   .figure 가 place-items:center 라서 스트레치를 명시해야 영역을 채웁니다. */
.figure > img {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.figure:has(> img) { background-image: none; }

.figure__note {
  font: var(--tc-text-mono-sm);
  color: var(--tc-text-tertiary);
  background: var(--tc-surface-card);
  border: 1px solid var(--tc-border-subtle);
  padding: 6px 10px;
  border-radius: var(--tc-radius-xs);
  text-align: center;
}

/* 어두운 면에서는 포커스 링을 반전시킵니다(base.css 기본은 밝은 면 기준). */
.on-dark :focus-visible {
  box-shadow: 0 0 0 2px var(--tc-neutral-900), 0 0 0 4px var(--tc-neutral-0);
}

/* ---------- 유틸리티 바 ---------- */

.util {
  background: var(--tc-neutral-900);
  color: var(--tc-neutral-400);
}
.util__inner {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font: var(--tc-text-caption);
}
.util__contact { display: flex; align-items: center; gap: 24px; }
.util__item { display: inline-flex; align-items: center; gap: 6px; color: var(--tc-neutral-400); }
.util__item:hover { color: var(--tc-neutral-0); }

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tc-surface-card);
  border-bottom: 1px solid var(--tc-border-subtle);
  transition: box-shadow var(--tc-duration-base) var(--tc-ease-standard);
}
.site-header.is-stuck { box-shadow: var(--tc-shadow-sm); }
.site-header__inner {
  height: var(--home-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.site-header__logo { width: 168px; }

.nav { display: flex; align-items: center; gap: 32px; position: relative; }
.nav__link {
  font: var(--tc-text-label);
  color: var(--tc-text-secondary);
  padding: 26px 0;
  transition: var(--tc-transition-control);
}
.nav__link:hover { color: var(--tc-text-primary); }
.nav__link[aria-current="page"] {
  color: var(--tc-text-primary);
  box-shadow: inset 0 -2px 0 var(--tc-red-500);
}

/* 활성 메뉴 인디케이터.
   스크립트가 --nav-ind-x / --nav-ind-w 를 현재 섹션 링크의 위치·폭으로 갱신하면 막대가 미끄러집니다.
   점진적 향상입니다 — 스크립트가 붙기 전이거나 실패하면 data-indicator 가 없어
   위의 box-shadow 밑줄이 그대로 남습니다. */
.nav__indicator { display: none; }
.nav[data-indicator] .nav__link[aria-current="page"] { box-shadow: none; }
.nav[data-indicator] .nav__indicator {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--nav-ind-w, 0px);
  background: var(--tc-red-500);
  transform: translateX(var(--nav-ind-x, 0px));
  transition: transform var(--tc-duration-base) var(--tc-ease-standard),
              width var(--tc-duration-base) var(--tc-ease-standard);
  pointer-events: none;
}
/* 창 크기가 바뀌는 동안에는 흐르지 않고 바로 제자리로 갑니다. */
.nav[data-indicator="measuring"] .nav__indicator { transition: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  all: unset;
  width: var(--tc-control-md);
  height: var(--tc-control-md);
  display: grid;
  place-items: center;
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text-secondary);
  cursor: pointer;
  transition: var(--tc-transition-control);
}
.icon-btn:hover { background: var(--tc-surface-hover); color: var(--tc-text-primary); }
.icon-btn:focus-visible { box-shadow: var(--tc-focus-ring); }

.header-actions__portal {
  font: var(--tc-text-label);
  color: var(--tc-text-primary);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  height: var(--tc-control-md);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  transition: var(--tc-transition-control);
}
.header-actions__portal:hover {
  background: var(--tc-surface-hover);
  border-color: var(--tc-border-strong);
  color: var(--tc-text-primary);
}

/* 토글 아이콘: 닫힘일 때 menu, 열림일 때 x. */
.nav-toggle { display: none; }
.nav-toggle > :last-child { display: none; }
.nav-toggle[aria-expanded="true"] > :first-child { display: none; }
.nav-toggle[aria-expanded="true"] > :last-child { display: block; }

/* ---------- 히어로 ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 24px; }

/* 히어로 문구 등장.
   사진은 크게 움직이지만 글은 읽는 흐름을 방해하지 않도록 차분하게 둡니다.
   가로 이동과 확대 없이, 12px 상승 + 페이드만 쓰고 위에서 아래로 조금씩 늦춥니다. */
@keyframes tc-hero-copy-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero__copy > * {
  animation: tc-hero-copy-in 520ms var(--tc-ease-out) both;
}
/* 지연은 자식 순서 기준입니다(아이브로우 → 제목 → 본문 → 버튼 → 신뢰 배지).
   히어로 카피 구성을 바꾸면 이 목록도 함께 조정하십시오. */
.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 140ms; }
.hero__copy > *:nth-child(3) { animation-delay: 220ms; }
.hero__copy > *:nth-child(4) { animation-delay: 300ms; }
.hero__copy > *:nth-child(5) { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__copy > * { animation: none; }
}
.hero__title {
  font: 600 52px/64px var(--tc-font-ui);
  letter-spacing: var(--tc-tracking-tight);
  margin: 0;
}
.hero__lede {
  font: var(--tc-text-body-lg);
  color: var(--tc-text-secondary);
  max-width: 460px;
}
.hero__actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; flex-wrap: wrap; }

.trust-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--tc-border-subtle);
}
.trust { display: flex; align-items: center; gap: 10px; }
.trust svg { width: 22px; height: 22px; color: var(--tc-text-secondary); flex: none; }
.trust__text { display: flex; flex-direction: column; }
.trust__label { font: var(--tc-text-label); }
.trust__meta { font: var(--tc-text-caption); color: var(--tc-text-tertiary); }

/* 히어로 진입 애니메이션.
   디자인 시스템 모션 규칙(최대 240ms, 4~8px 슬라이드)은 대시보드 컨트롤 기준이라
   랜딩 히어로에는 그대로 쓰면 움직임이 보이지 않습니다. 여기서만 길이와 거리를 키웁니다.
   대신 바운스·스프링·오버슈트는 쓰지 않고 감속(ease-out)만 적용해 시스템 성격을 지킵니다. */
@keyframes tc-hero-in {
  from { opacity: 0; transform: translate3d(56px, 20px, 0) scale(0.94); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.hero__media {
  position: relative;
  animation: tc-hero-in 760ms var(--tc-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; will-change: auto; }
}
/* 히어로 사진이 정사각 원본이라 1:1 로 둡니다.
   4:3 으로 크롭하면 상단 육각형과 하단 아이콘이 잘리고, 확대 없이 표시할 수 있는 폭도 줄어듭니다. */
.hero__figure { aspect-ratio: 1 / 1; }
.hero__badge {
  position: absolute;
  left: -28px;
  bottom: 40px;
  background: var(--tc-surface-card);
  border: 1px solid var(--tc-border-subtle);
  box-shadow: var(--tc-shadow-md);
  border-radius: var(--tc-radius-md);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__badge-value {
  font: var(--tc-text-display-md);
  letter-spacing: var(--tc-tracking-tight);
  font-variant-numeric: var(--tc-numeric);
}
.hero__badge-label { font: var(--tc-text-caption); color: var(--tc-text-tertiary); }

/* ---------- 취급 제품 분야 ---------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.cat-card {
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cat-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--tc-radius-md);
  background: var(--tc-surface-sunken);
  display: grid;
  place-items: center;
  color: var(--tc-text-primary);
  flex: none;
}
.cat-card__title { font: var(--tc-text-title-md); margin: 0; }
.cat-card__desc { font: var(--tc-text-body-sm); color: var(--tc-text-secondary); flex: 1; }

/* ---------- 취급 제품 본사 ---------- */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.brand-card { display: flex; flex-direction: column; overflow: hidden; }

/* 로고 자리.
   받은 로고가 JPG(투명도 없음)라 판 배경을 흰색으로 두어 로고의 흰 배경과 이어지게 합니다.
   Cook Medical 처럼 유색 바탕 로고는 카드에서 --brand-plate 로 그 색을 넘겨
   로고 배경과 판 배경을 일치시킵니다. 기본값은 토큰입니다. */
.brand-card__mark {
  height: 132px;
  padding: 0 16px;
  display: grid;
  place-items: center;
  background: var(--brand-plate, var(--tc-surface-card));
}
/* 높이만 일률로 맞추면 2단 구성(Cook, Masimo)처럼 세로로 긴 로고가 유독 작아 보입니다.
   카드에서 --brand-logo-h 로 로고별 높이를 지정해 시각적 크기를 맞춥니다. */
/* 본사 홈페이지로 나가는 링크. 클릭 영역은 타일 전체입니다. */
a.brand-card__mark { cursor: pointer; }
a.brand-card__mark img { transition: opacity var(--tc-duration-fast) var(--tc-ease-standard); }
a.brand-card__mark:hover img { opacity: 0.7; }
a.brand-card__mark:focus-visible { box-shadow: var(--tc-focus-ring); border-radius: var(--tc-radius-md); }

.brand-card__mark img {
  max-height: var(--brand-logo-h, 48px);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-card__name {
  font: var(--tc-text-title-lg);
  letter-spacing: var(--tc-tracking-tight);
  text-align: center;
  text-wrap: balance;
}

/* ---------- 회사 소개 ---------- */

/* 회사 소개 본문. 읽기 편한 길이로 폭을 제한하고 가운데 둡니다. */
.prose {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prose p { font: var(--tc-text-body-lg); color: var(--tc-text-secondary); }

/* 첫 줄만 도드라지게 합니다. 나머지 본문(15px)보다 4px 크고 굵게.
   토큰 스케일에 15px 과 19px 사이 단계가 없어 여기서만 값을 직접 씁니다. */
.prose__emphasis {
  display: block;
  margin-bottom: 6px;
  font-family: var(--tc-font-ui);
  font-size: 19px;
  line-height: 28px;
  font-weight: var(--tc-fw-bold);
  letter-spacing: var(--tc-tracking-tight);
  color: var(--tc-text-primary);
}

/* 원고에 지정된 문장 중간 줄바꿈. 760px 본문 폭을 기준으로 잡은 위치라
   좁은 화면에서는 자연 줄바꿈과 겹쳐 문장이 어중간하게 끊깁니다. 720px 이하에서 해제합니다.
   마크업에서 <br class="prose__lb"> 뒤에 공백을 둔 이유가 이것입니다 —
   줄바꿈이 살아 있을 때 줄머리 공백은 무시되고, 해제되면 앞뒤 단어가 붙지 않게 막아 줍니다.
   문장이 끝나는 지점의 <br>(마침표 뒤)은 좁은 화면에서도 자연스러워 표시를 붙이지 않았습니다. */

/* 맺음말 — 영문 사명과 태그라인, 마무리 문장. */
.signature {
  max-width: 760px;
  margin: 44px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--tc-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.signature__name {
  font: var(--tc-fw-semibold) 22px/30px var(--tc-font-brand);
  letter-spacing: var(--tc-tracking-tight);
}
.signature__tagline {
  font: var(--tc-text-overline);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: var(--tc-text-brand);
}
.signature__closing {
  margin-top: 14px;
  font: var(--tc-text-title-md);
  color: var(--tc-text-primary);
}

/* 오시는 길 — 사진 대신 주소와 지도 앱 바로가기를 둡니다.
   카카오맵 "지도 퍼가기" 스니펫을 받으면 .directions 안 맨 위에 넣습니다.
   그때 지도 아래로 주소가 오도록 .directions__body 가 세로로 이어집니다. */
.directions { overflow: hidden; }
.directions__body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.directions__addr {
  font: var(--tc-text-title-md);
  letter-spacing: var(--tc-tracking-tight);
}
.directions__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* 카카오맵 roughmap 은 고정 크기로 그려지고 리플로우되지 않습니다.
   축소해서 맞추면 글자까지 작아지므로, 스크립트가 이 상자의 폭을 읽어
   그 크기로 직접 렌더합니다. 여기서는 넘침만 막아 둡니다. */
.directions__map {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--tc-border-subtle);
}
/* 주소·전화는 아래 .directions__body 에서 층수까지 정확히 보여 주므로 지도 안에서는 감춥니다.
   카카오 로고와 길찾기 링크(.wrap_controllers)는 이용 조건상 유지합니다. */
.directions__map .cont { display: none; }



.stat__text { display: flex; flex-direction: column; }
.stat__value {
  font: var(--tc-text-display-md);
  letter-spacing: var(--tc-tracking-tight);
  font-variant-numeric: var(--tc-numeric);
}
.stat__label { font: var(--tc-text-caption); color: var(--tc-text-tertiary); }

/* ---------- 인증·품질 밴드 ---------- */

.cert { background: var(--tc-neutral-800); color: var(--tc-neutral-0); }
.cert__inner {
  padding: 56px var(--home-gutter);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.cert__copy { display: flex; flex-direction: column; gap: 14px; }
.cert__title { font: var(--tc-text-title-lg); margin: 0; color: var(--tc-neutral-0); }
.cert__body { font: var(--tc-text-body-sm); color: var(--tc-neutral-400); }
.cert__cta { align-self: flex-start; margin-top: 6px; }
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-item {
  border: 1px solid var(--tc-neutral-700);
  border-radius: var(--tc-radius-md);
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cert-item__name { font: var(--tc-text-title-md); color: var(--tc-neutral-0); }
.cert-item__meta { font: var(--tc-text-caption); color: var(--tc-neutral-500); }

/* ---------- 공지 및 소식 ---------- */

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { overflow: hidden; display: flex; flex-direction: column; }
.news-card__figure {
  aspect-ratio: 16 / 9;
  border: none;
  border-bottom: 1px solid var(--tc-border-subtle);
  border-radius: 0;
}
.news-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-card__figure .figure__note {
  background: transparent;
  border: none;
  padding: 0;
}
.news-card__date { font: var(--tc-text-mono-sm); color: var(--tc-text-tertiary); }
.news-card__title { font: var(--tc-text-title-sm); margin: 0; }
.news-card__desc { font: var(--tc-text-body-sm); color: var(--tc-text-secondary); flex: 1; }

/* ---------- 문의 · 오시는 길 ---------- */

.contact-grid {
  display: grid;
  /* minmax(0,…) 이 없으면 지도의 min-content 때문에 열이 넓어집니다. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  /* stretch 라서 오른쪽 패널이 왼쪽 지도 카드와 같은 높이·비율이 됩니다. */
  align-items: stretch;
}

/* 문의 수단이 메일 주소 하나뿐이라 주소 자체를 전면에 세웁니다.
   mailto 버튼은 메일 프로그램이 없는 PC 에서 아무 반응이 없어 두지 않습니다.
   대신 웹메일 사용자가 바로 붙여넣을 수 있도록 복사 버튼을 둡니다. */
.contact__mail-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}

/* 배경 이미지. 흐림이나 투명도 없이 원본 그대로 패널을 채웁니다.
   글자는 이미지의 밝은 부분 위에 놓여 대비 6.8:1 이상을 유지합니다.
   단, 패널이 가로로 납작해지는 900px 이하에서는 cover 가 이미지의 진한 가운데를
   확대해 글자를 덮으므로, 아래 미디어쿼리에서 이미지를 글자 위로 빼냅니다. */
.contact__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.contact__mailrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact__mail {
  font: var(--tc-text-title-lg);
  font-family: var(--tc-font-mono);
  color: var(--tc-text-primary);
  transition: var(--tc-transition-control);
}
.contact__mail:hover { color: var(--tc-text-link-hover); }
.contact__copy { flex: none; }

/* 전화·팩스. 사람이 옮겨 적는 숫자라 고정폭에 tabular-nums 를 씁니다. */
/* 전화·팩스는 메일 주소보다 한 단계 작고 굵기 없이 둡니다. */
.contact__lines {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
  align-items: baseline;
}
.contact__lines dt,
.contact__lines dd {
  margin: 0;
  font-family: var(--tc-font-mono);
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--tc-fw-regular);
  letter-spacing: var(--tc-tracking-normal);
  font-variant-numeric: var(--tc-numeric);
  color: var(--tc-text-primary);
}
.contact__lines a { color: inherit; transition: var(--tc-transition-control); }
.contact__lines a:hover { color: var(--tc-text-link-hover); }


/* ---------- 푸터 ---------- */

.site-footer { background: var(--tc-neutral-900); color: var(--tc-neutral-400); }
/* 브랜드 + 링크 열 1개 + 회사 정보. 링크 열을 늘리면 이 값을 함께 조정합니다. */
.footer-grid {
  padding: 64px var(--home-gutter) 40px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1.4fr;
  gap: 48px;
}

/* 사업자 정보 — 상호·대표·주소·사업자등록번호 */
.footer-info {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
  font: var(--tc-text-body-sm);
}
.footer-info dt { color: var(--tc-neutral-600); white-space: nowrap; }
.footer-info dd { margin: 0; color: var(--tc-neutral-400); }
.footer-info a { color: var(--tc-neutral-400); }
.footer-info a:hover { color: var(--tc-neutral-0); }
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand__logo { width: 160px; }
.footer-brand__body { font: var(--tc-text-body-sm); color: var(--tc-neutral-500); max-width: 280px; }
.social { display: flex; gap: 8px; }
.social a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--tc-neutral-700);
  border-radius: var(--tc-radius-sm);
  display: grid;
  place-items: center;
  color: var(--tc-neutral-400);
  transition: var(--tc-transition-control);
}
.social a:hover { color: var(--tc-neutral-0); border-color: var(--tc-neutral-500); }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col__head {
  font: var(--tc-text-overline);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: var(--tc-neutral-0);
}
.footer-col a { font: var(--tc-text-body-sm); color: var(--tc-neutral-400); transition: var(--tc-transition-control); }
.footer-col a:hover { color: var(--tc-neutral-0); }

.newsletter__body { font: var(--tc-text-body-sm); color: var(--tc-neutral-500); }
.newsletter__form { display: flex; gap: 8px; margin-top: 4px; }
.newsletter__input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--tc-neutral-700);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-neutral-800);
  color: var(--tc-neutral-100);
  font: var(--tc-text-body-sm);
  transition: var(--tc-transition-control);
}
.newsletter__input::placeholder { color: var(--tc-neutral-500); }
.newsletter__input:hover { border-color: var(--tc-neutral-600); }

.footer-bottom { border-top: 1px solid var(--tc-neutral-800); }
.footer-bottom__inner {
  padding: 20px var(--home-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font: var(--tc-text-caption);
  color: var(--tc-neutral-600);
}
.footer-bottom__links { display: flex; gap: 20px; }
.footer-bottom a { color: var(--tc-neutral-600); transition: var(--tc-transition-control); }
.footer-bottom a:hover { color: var(--tc-neutral-400); }

/* ---------- 반응형 ---------- */

@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { gap: 40px; }
  .hero__title { font: 600 44px/54px var(--tc-font-ui); }
  .nav { gap: 22px; }
}

@media (max-width: 900px) {
  :root { --home-section-y: 64px; }

  .nav-toggle { display: grid; }
  .site-header__inner { gap: 16px; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tc-surface-card);
    border-bottom: 1px solid var(--tc-border-subtle);
    box-shadow: var(--tc-shadow-md);
    padding: 8px var(--home-gutter) 12px;
  }
  .site-header[data-nav-open="true"] .nav { display: flex; }
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--tc-border-subtle);
  }
  .nav__link:last-child { border-bottom: none; }
  .nav__link[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--tc-red-500);
    padding-left: 12px;
  }
  /* 세로 패널에서는 막대를 감추고 왼쪽 테두리 표시로 되돌립니다.
     위의 box-shadow:none 이 특이도가 높아 같은 특이도로 덮어야 합니다. */
  .nav[data-indicator] .nav__indicator { display: none; }
  .nav[data-indicator] .nav__link[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--tc-red-500);
  }

  .hero { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__badge { left: auto; right: 16px; bottom: -20px; }
  .hero__lede { max-width: none; }


  .cert__inner { grid-template-columns: 1fr; gap: 32px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  /* 지도가 좁아지지 않도록 문의도 1단으로 내립니다. */
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  /* 1단이 되면 패널이 가로로 납작해져, cover 가 이미지의 진한 가운데를 확대해
     글자 뒤로 밀어 넣습니다(대비 1:1 수준). 겹치지 않도록 이미지를 글자 위로 빼냅니다. */
  .contact__mail-block { padding: 0 0 28px; gap: 18px; }
  .contact__bg {
    position: static;
    z-index: auto;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
  }
  .contact__mailrow,
  .contact__lines { padding: 0 28px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  /* 지정 줄바꿈 해제 — 위 .prose__lb 주석 참고. */
  .prose__lb { display: none; }
  .util__inner {
    height: auto;
    padding: 8px var(--home-gutter);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .util__contact { gap: 16px; flex-wrap: wrap; }
  .hero__title { font: 600 34px/44px var(--tc-font-ui); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  /* 주소가 길어 복사 버튼과 한 줄에 못 들어갑니다. */
  .contact__mailrow { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact__mail { font-size: 17px; line-height: 24px; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__actions .btn { width: 100%; }
  /* 그리드 아이템이라 align-self 로는 줄지 않습니다. 내용 폭으로 고정합니다. */
  .hero__badge { position: static; margin-top: 16px; width: fit-content; }
  .site-header__logo { width: 140px; }
}