/* ==========================================================================
   v5.0 신규 스타일 — Next.js 이전 과정에서 추가된 요소만.
   이식해 온 site.css 는 수정하지 않고 여기서만 확장한다.
   ========================================================================== */

/* ---- next/image 크기 속성 보정 ----
   next/image 는 width/height 속성을 항상 출력하는데, HTML 프레젠테이션 힌트로
   height 가 고정되어 v4.0 CSS 파생 크기(aspect-ratio, 자연 비율 스케일)를 깨뜨린다.
   v4.0 원본 <img> 에는 크기 속성이 없었으므로 height:auto 로 전역 복원.
   (.logo img, .marquee-track img 등 CSS 가 명시적으로 height 를 주는 규칙이 항상 우선) */
img { height: auto; }

/* ---- 한국어 줄바꿈 ----
   한국어는 단어 중간이 아닌 어절 단위로 줄바꿈 (영문 페이지에는 영향 없음) */
:lang(ko) { word-break: keep-all; }

/* ---- 리더십 사진/캡션 ----
   흰 스튜디오 원본이 다크 배경에서 발광하는 문제 — 컬러는 유지한 채
   딤 + 하단 스크림으로 톤을 가라앉힘. 호버 시 사진이 살짝 밝아진다 */
.member-photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--white-10);
  margin-bottom: 20px;
}
.member-photo-wrap .member-photo {
  margin-bottom: 0;
  border-radius: 0;
  filter: brightness(0.8) saturate(0.9);
  transition: filter var(--dur-med) var(--ease-out);
}
.member-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}
.member:hover .member-photo-wrap .member-photo {
  filter: brightness(0.92) saturate(1);
}

/* 캡션 — 배경 없음. 호버 시 이름 뒤로 흰색→투명 그라데이션 밴드가
   좌→우로 쓸고 들어오고 이름 색이 검정으로 반전 */
.member-name {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  padding: 5px 12px 5px 10px;
  margin-left: -10px;
  transition: color 0.45s var(--ease-out);
}
.member-name::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(240, 240, 250, 0.95) 0%,
    rgba(240, 240, 250, 0.85) 55%,
    rgba(240, 240, 250, 0) 100%
  );
  transform: translateX(-101%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
.member:hover .member-name { color: #000; }
.member:hover .member-name::before { transform: translateX(0); }

/* ---- 문의 폼: 제출 상태 ---- */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-error {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(229, 72, 77, 0.5);
  border-radius: 4px;
  background: rgba(229, 72, 77, 0.08);
  color: #ffb4b6;
  font-size: 14px;
}
.form-done {
  padding: 40px 0;
}
.form-done h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: var(--ls-title);
  margin-bottom: 12px;
}
.form-done p {
  color: var(--color-text-2);
  line-height: var(--lh-body);
  max-width: 520px;
}

/* ---- HSI 소개: RGB/MSI/HSI 비교 다이어그램 (원 사이트 이미지) ---- */
.hsi-figure { margin-top: 40px; }
.hsi-figure img { border-radius: 4px; }

/* ---- About: 위성 스캐닝 비교 이미지 2단 스택 (원 사이트 이미지) ---- */
.about-scan-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-scan-stack img {
  border-radius: 4px;
  border: 1px solid var(--white-10);
}

/* ---- 컨택트 지도 링크 CTA ----
   주소 본문(14px, --color-text-2)과 색·크기가 같아 링크로 안 보이던 문제 —
   모노 대문자 라벨 + 상시 헤어라인 밑줄로 구분 (이메일 링크는 기존 스타일 유지) */
.contact-map-link--cta {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  letter-spacing: var(--ls-label);
  /* uppercase 를 쓰지 않는다 — 문구에 'Google' 이 들어 있어 'GOOGLE' 로 뭉개진다.
     모노 글꼴·자간·흰색·밑줄만으로도 주소 본문과 충분히 구분된다 (Hy-FI 와 같은 이유). */
  color: var(--white-100);
  text-decoration-color: var(--white-35);
  transition:
    text-decoration-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.contact-map-link--cta:hover { text-decoration-color: #fff; }

/* ---- 헤더 우측 그룹 (언어 스위처 + 모바일 토글) ---- */
.header-right {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---- 언어 스위처 — 글로브 아이콘 + 드롭다운 (ENG/KOR) ---- */
.lang-menu { position: relative; }
.lang-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--white-80);
  transition: color var(--dur-fast) var(--ease-out);
}
.lang-globe:hover,
.lang-globe[aria-expanded='true'] { color: var(--white-100); }
.lang-menu-list {
  position: absolute;
  top: calc(100% + 10px);
  right: -6px;
  /* 버튼→패널로 마우스를 내릴 때 10px 갭에서 mouseleave 로 닫히지 않도록
     패널 위쪽을 투명 브리지로 연장 (아래 ::before) */
  min-width: 92px;
  padding: 6px 0;
  /* 글래스 공식 (spacex 실측: gray-60 + blur 16) */
  background: var(--gray-60);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--white-10);
  border-radius: 4px;
  z-index: 60;
}
.lang-menu-list a {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-menu);
  color: var(--white-50);
  transition: color var(--dur-fast) var(--ease-out);
}
.lang-menu-list::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -6px;
  right: -6px;
  height: 12px;
}
.lang-menu-list a:hover { color: var(--white-100); }
.lang-menu-list a.is-active { color: var(--white-100); }