/* ============================================================
   YEST Corporate Site — Design System
   semes.com 벤치마킹: 화이트/차콜 뉴트럴 톤 + 절제된 레드 액센트,
   큰 타이포 히어로, 카드형 그리드, 넉넉한 여백, 미니멀 인터랙션.
   브랜드 컬러(#c52d2f)는 레거시 사이트 CSS에서 추출.
   ============================================================ */

/* ---------- 폰트 ----------
   semes.com 실측(개발자도구로 @font-face 직접 확인): 본문은 Noto Sans KR,
   영문 대형 타이틀은 BlenderPro(HVD Fonts 상업폰트라 재배포 라이선스 없음 —
   그대로 복제하지 않고 같은 계열의 기하학적/테크니컬한 느낌을 내는 무료 오픈소스
   대체 폰트 Space Grotesk(SIL OFL)를 사용). 전부 자가호스팅(semes.com도 구글폰트
   CDN이 아니라 자체 서버에서 서빙하는 방식이라 그 방식을 그대로 따름). */
/* 성능 최적화: 원본 Noto Sans KR ttf는 전체 CJK 글리프 포함 파일당 ~6MB(3종 18MB)로
   페이지 로딩이 매우 느렸다. 한글(U+AC00-D7A3)+영문+기호만 서브셋해 woff2로 변환
   (각 ~640KB, 3종 합계 ~1.9MB, 약 10배 감소). woff2 우선 로드, 미지원 브라우저용
   ttf 폴백 유지. (참고: 서브셋은 한글 위주라, cn 페이지의 중국어 한자는 woff2에
   포함되지 않아 시스템 폰트로 폴백된다 — 한글 우선 방침에 따른 의도적 트레이드오프.) */
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/f.asp?f=NotoSansKR-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/f.asp?f=NotoSansKR-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/f.asp?f=NotoSansKR-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/f.asp?f=SpaceGrotesk-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/f.asp?f=SpaceGrotesk-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/f.asp?f=SpaceGrotesk-Bold.woff2") format("woff2");
}

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f7;
  --color-charcoal: #1b1d1f;
  --color-text: #222325;
  --color-text-muted: #6b6f76;
  --color-border: #e4e5e8;
  --color-brand: #c52d2f;
  --color-brand-dark: #9e2224;
  --color-accent-line: #d8d9dc;

  --font-base: "Noto Sans KR", "Pretendard", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-en: "Noto Sans KR", "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* semes.com의 BlenderPro(대형 영문 타이틀용) 대체 — 큰 제목류에만 선택적으로 사용 */
  --font-display: "Space Grotesk", "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-max: 1600px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  --radius: 2px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 세련된 디테일: 브랜드 컬러로 텍스트 선택 영역 커스터마이즈, 스크롤바 가늘게 다듬기,
   기본 파란색 포커스 링 대신 브랜드 컬러 포커스 링(:focus-visible)으로 통일 —
   전부 순수 additive(기존 레이아웃/색상 로직을 바꾸지 않음)라 회귀 위험이 없다. */
::selection { background: var(--color-brand); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: var(--color-accent-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-accent-line); border-radius: 6px; border: 2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-brand); outline-offset: 2px;
}
/* 앵커(#id) 이동 시 상단 고정 헤더(76px)에 콘텐츠가 가려지지 않도록
   모든 앵커 대상 요소에 스크롤 여백을 준다("섹션 이동이 배너와 어긋난다" 이슈 수정).
   브레드크럼은 이제 헤더 위에 겹치는 오버레이라 별도 높이를 차지하지 않는다. */
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  letter-spacing: -0.02em; /* semes.com 실측: 거의 모든 텍스트에 -1px 안팎의 타이트한 자간 적용 */
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* 공백 없는 긴 토큰(URL/코드)만 강제 줄바꿈해 넘침 방지 */
}
/* ---------- 한글 줄바꿈: 어절(띄어쓰기) 단위 유지 ----------
   기본값(word-break:normal)은 한글을 글자 단위로 아무 데서나 끊어 "가치를"이 "가/치를"로
   쪼개진다. keep-all로 띄어쓰기 단위에서만 줄바꿈되게 해 단어 중간 끊김을 없앤다.
   중국어(cn)는 공백이 거의 없어 keep-all이면 줄바꿈이 안 되어 넘치므로 ko/en 에만 적용. */
html[lang="ko"] body, html[lang="en"] body { word-break: keep-all; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

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

/* ---------- Header / Nav ----------
   semes.com 실측: 헤더가 히어로 사진 위에 완전히 겹쳐서(투명 배경) 떠 있다가,
   (1) 스크롤하거나 (2) 드롭다운 메뉴에 마우스오버하면 흰 배경으로 바뀐다.
   header가 더 이상 레이아웃 높이를 차지하지 않도록 sticky 대신 fixed로 변경 —
   모든 페이지의 첫 섹션이 이제 100vh 히어로이므로 header가 그 위에 자연스럽게
   겹쳐 보이고, 히어로를 지나 스크롤하면 자동으로 흰 배경(.is-solid)이 켜진다
   (main.js가 scrollY와 드롭다운 hover를 감지해서 토글). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.site-header.is-solid {
  background: rgba(24, 26, 28, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
/* CI 로고: 헤더는 투명(히어로 위)이든 스크롤 후 어두운 차콜 배경이든 항상 어두운
   톤이므로, 흰색 워드마크 버전을 두 상태 모두 그대로 사용한다. 색·크기 전환이 전혀
   없어 스크롤해도 로고가 변하지 않는다(예전엔 흰 배경으로 바뀌며 차콜 로고로 스왑돼
   "작아 보이는" 착시가 있었음). 차콜 버전 logo-dark.png는 현재 미사용 — 향후 밝은
   헤더가 필요할 때를 대비해 파일은 남겨둔다. */
.logo { position: relative; display: inline-block; height: 36px; }
.logo__img {
  display: block; height: 36px; width: auto;
  transition: opacity var(--transition);
}
.logo__img--dark { position: absolute; top: 0; left: 0; opacity: 0; }

.main-nav { display: flex; gap: 84px; flex-wrap: nowrap; white-space: nowrap; }
.main-nav > li > a {
  position: relative;
  font-size: 17.2px;
  font-weight: 500;
  color: #fff;
  padding: 10px 2px;
  display: inline-block;
  transition: color var(--transition);
}
.site-header.is-solid .main-nav > li > a { color: #fff; }
/* semes.com 실측(.gnb__onedepth::after): 밑줄이 색만 바뀌는 게 아니라
   폭이 0→100%로 자라나는 방식(width 0.25s linear).
   ::before 사용 이유: 드롭다운이 있는 메뉴는 ::after를 화살표 아이콘(아래 참고)이
   이미 사용 중이라 겹치면 안 됨. */
.main-nav > li > a::before {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--color-brand);
  transition: width 250ms linear;
}
.main-nav > li > a:hover,
.main-nav > li.active > a {
  color: var(--color-brand);
}
.main-nav > li > a:hover::before,
.main-nav > li.active > a::before {
  width: 100%;
}

.header-tools { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- 언어 선택 드롭다운 ---------- */
.lang-switch { position: relative; font-size: 15px; }
.lang-switch__current {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: 0.5px;
  color: #fff; padding: 8px 2px;
  transition: color var(--transition);
}
.site-header.is-solid .lang-switch__current { color: #fff; }
.lang-switch__caret {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; transition: transform var(--transition);
}
.lang-switch.is-open .lang-switch__caret { transform: rotate(225deg); margin-top: 3px; }
.lang-switch__menu {
  position: absolute; top: 100%; right: 0; left: auto;
  min-width: 168px; padding: 20px 0 10px; margin-top: 0;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 200;
}
.lang-switch.is-open .lang-switch__menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.lang-switch__menu li { width: 100%; }
.lang-switch__menu a {
  display: block;
  padding: 10px 22px; font-size: 15.5px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--color-text); white-space: nowrap;
}
.lang-switch__menu a:hover { color: var(--color-brand); background: var(--color-bg-alt); }
.lang-switch__menu a.active { color: var(--color-brand); }
.lang-switch__soon {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 10px 22px; font-size: 15.5px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--color-text-muted); opacity: 0.55; cursor: default;
}
.lang-switch__soon i { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }

/* ---------- 드롭다운 서브메뉴 (semes.com 스타일) ----------
   실측 이슈: 링크와 메뉴 사이에 margin 간격이 있으면 그 틈에서 마우스가
   "li도 dropdown도 아닌 곳"을 지나가게 되어 :hover 체인이 끊기고 메뉴가
   순간적으로 닫혀버린다(빠르게 움직이지 않으면 선택 불가 버그의 원인).
   margin-top 대신 padding-top으로 여백을 주어 그 틈까지 hover 판정 영역에
   포함시키고, 클릭 영역 자체도 넓혔다. */
.main-nav > li { position: relative; }
/* 각 하위메뉴는 자기 상위 메뉴 바로 아래(left:0)에 놓인다(YPM 방식). 개별 박스가 아니라
   아래 .nav-mega-bg 흰 판 위에 투명하게 얹혀, hover 시 전체가 한 판으로 내려온다. */
.main-nav .dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 120px; padding: 22px 0 12px;
  background: transparent; border: none; box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 96;
}
/* 상위 메뉴에 hover(=.nav-open) 하면 모든 하위메뉴가 함께 표시된다 */
.site-header.nav-open .main-nav li.has-dropdown .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.main-nav .dropdown li { width: 100%; }
.main-nav .dropdown a {
  display: block; padding: 8px 2px; font-size: 15px; font-weight: 500;
  color: var(--color-text-muted); white-space: nowrap; border-bottom: none;
}
.main-nav .dropdown a:hover { color: var(--color-brand); background: transparent; }
/* EN/CN/JP는 상위메뉴 라벨이 길어 메가메뉴 하위 항목이 옆 컬럼과 겹친다.
   짧은 라벨의 ko는 기존(nowrap) 그대로 두고, 그 외 언어만 컬럼 폭을 좁게 고정하고
   줄바꿈을 허용해 인접 컬럼과 겹치지 않게 한다. (컬럼 간격 gap은 변경하지 않음) */
/* position:absolute 드롭다운은 너비 기준이 부모 li 폭이라, CJK(공백 없음)는 최소너비가
   1글자로 계산돼 li 폭까지 쪼그라들며 세로로 터진다. 고정 너비를 줘서 영어처럼 2줄로 접히게 한다.
   (상위메뉴 최소간격 ~133px보다 좁게 잡아 인접 컬럼과 겹치지 않도록 125px) */
html:not([lang="ko"]) .main-nav .dropdown { min-width: 0; width: 125px; }
html:not([lang="ko"]) .main-nav .dropdown a { white-space: normal; line-height: 1.35; }
.main-nav li.has-dropdown > a::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-left: 5px; margin-bottom: 1px; opacity: 0.5;
}

/* 전체폭 흰 배경 판: hover 시 높이가 펼쳐져 하위메뉴들 뒤에 하나의 '메뉴판'을 만든다.
   높이(--mega-h)는 가장 큰 하위메뉴에 맞춰 JS(main.js)가 잡아준다. */
.nav-mega-bg {
  position: absolute; left: 0; right: 0; top: 76px; height: 0;
  background: #fff; box-shadow: 0 24px 40px rgba(0,0,0,0.12);
  opacity: 0; overflow: hidden; z-index: 94;
  transition: opacity var(--transition), height var(--transition);
}
.site-header.nav-open .nav-mega-bg { height: var(--mega-h, 280px); opacity: 1; }
/* 메뉴판이 열리면 상단 바도 솔리드로(흰 판과 톤 맞춤) */
.site-header.nav-open { background: rgba(24,26,28,0.92); backdrop-filter: saturate(140%) blur(10px); border-bottom-color: rgba(255,255,255,0.08); }
@media (max-width: 960px) { .nav-mega-bg { display: none; } }

/* ---------- 햄버거 버튼 + 전체 메뉴 오버레이 ---------- */
.hamburger {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 11px;
}
.hamburger span { display: block; width: 100%; height: 2px; background: #fff; transition: var(--transition); }
.site-header.is-solid .hamburger span { background: #fff; }
.hamburger span:nth-child(2) { width: 70%; }
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 100%; }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; }

/* semes.com 스타일: 햄버거를 누르면 화면 중앙에 전체 메뉴가 모달로 떠오른다
   (기존 우측 슬라이드 서랍 방식에서 변경). 배경은 순검정이 아니라 반도체 사진 위에
   은은하게 움직이는(느린 Ken Burns) 이미지를 깔고 어두운 톤 오버레이로 톤을 낮춰,
   메뉴 글자가 사진 위 실루엣처럼 뚜렷하게 도드라져 보이도록 한다. */
.mega-menu {
  position: fixed; inset: 0; z-index: 1001;
  display: flex; align-items: flex-start; justify-content: center;
  background: #1c1e22; color: #fff;
  padding: calc(var(--space-5) + 40px) var(--space-4) var(--space-5);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}
.mega-menu.is-open { opacity: 1; visibility: visible; }
/* 살짝 떠오르는 느낌은 그리드에만 줘서(컨테이너 transform 제거) 배경 고정이 깨지지 않게 */
.mega-menu__grid { transform: scale(0.98); transition: transform 320ms cubic-bezier(.16,1,.3,1); }
.mega-menu.is-open .mega-menu__grid { transform: none; }
.mega-menu__bg {
  position: fixed; inset: -6%; z-index: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: megaMenuBgDrift 22s ease-in-out infinite alternate;
}
.mega-menu__bg::after {
  content: "";
  position: absolute; inset: 0;
  /* 기존(rgba(12,13,15,0.97))보다 밝게: 사진이 비쳐 보이도록 톤만 낮춘다 */
  background: linear-gradient(160deg, rgba(14,15,18,0.72) 0%, rgba(14,15,18,0.5) 55%, rgba(14,15,18,0.8) 100%);
}
@keyframes megaMenuBgDrift {
  0% { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .mega-menu__bg { animation: none; }
}
.mega-menu__close {
  position: fixed; top: 24px; right: 28px; background: none; border: none; color: #fff;
  font-size: 32.4px; line-height: 1; cursor: pointer; z-index: 1002;
}
.mega-menu__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: var(--space-5) var(--space-4);
  max-width: 1080px; width: 100%; margin: auto; text-align: center;
}
/* "실루엣처럼" — 그림자를 강하게 줘 사진이 얼마나 밝든 항상 또렷하게 도드라지는
   메뉴 타이포. */
.mega-menu__title {
  font-family: var(--font-display);
  font-size: 23px; font-weight: 700; color: #fff; display: block; margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.mega-menu__col ul { display: flex; flex-direction: column; gap: 6px; }
.mega-menu__col a { color: rgba(255,255,255,0.72); font-size: 16.1px; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.mega-menu__col a:hover { color: #fff; }
.mega-menu__col li { padding: 4px 0; }
@media (max-width: 900px) {
  .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mega-menu__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.mega-menu-backdrop {
  position: fixed; inset: 0; background: rgba(10,10,12,0.5); z-index: 1000;
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.mega-menu-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- 브레드크럼(현재 위치 표시) ----------
   semes.com 실측: 별도 흰 바가 아니라 헤더 바로 아래, 히어로 사진 위에
   옅은 색으로 떠 있는 오버레이. 클릭 가능한 링크처럼 보이지 않도록 전부
   같은 흐린 톤으로 통일(홈만 실제로는 클릭 가능하지만 시각적으로 구분하지 않음).
   header가 fixed라 그 안의 absolute 자식은 header 기준으로 고정되어,
   스크롤해도 항상 우측 상단에 떠 있다. */
.breadcrumb {
  position: absolute; top: 76px; right: var(--space-3);
  z-index: 5;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 0; font-size: 13.8px; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.68);
  transition: color var(--transition);
}
.site-header.is-solid .breadcrumb { color: rgba(255, 255, 255, 0.72); }
.breadcrumb a { color: inherit; }
.breadcrumb__sep { opacity: 0.55; }
.breadcrumb__section, .breadcrumb__current { color: inherit; font-weight: 400; }
@media (max-width: 640px) {
  .breadcrumb { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center; /* semes.com 실측: 타이틀이 히어로 하단이 아니라 화면 중앙에 옴 */
  background: var(--color-charcoal);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
/* semes.com 스타일 배경 패럴랙스: 스크롤해도 사진은 제자리에 고정되어
   콘텐츠가 그 위로 흘러내리듯 지나간다("스크롤하면 사진이 아래로 떨어지는 느낌").
   모바일(터치스크롤)에서는 성능/iOS 호환성 문제로 비활성화. */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  /* 히어로는 JS 패럴랙스(.hero__pfx transform)를 쓰므로 fixed 제외(transform과 충돌). 밴드만 fixed 유지 */
  .photo-band, .cta-band { background-attachment: fixed; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,12,0.15) 0%, rgba(10,10,12,0.75) 100%);
}
/* 밝은 히어로(수소 등): 아래 photo-band 수준으로 어두운 오버레이를 옅게 */
.hero--bright::after { background: linear-gradient(180deg, rgba(10,10,12,0.08) 0%, rgba(10,10,12,0.42) 100%); }
/* 홈 히어로: 밝고 디테일 많은 배경(클린룸 등) 위에서도 좌측 텍스트가 잘 읽히도록
   좌→우 스크림을 강화한다(텍스트는 왼쪽, 이미지는 오른쪽으로 살림). */
.hero[data-hero-rotator]::after {
  background: linear-gradient(95deg, rgba(8,8,10,0.76) 0%, rgba(8,8,10,0.60) 34%, rgba(8,8,10,0.34) 64%, rgba(8,8,10,0.30) 100%);
}
/* ---------- 첫 화면 배너 사진 3장 롤링(3초 간격 크로스페이드) ----------
   main.js가 [data-hero-rotator] 안의 .hero__rotator-layer를 순환하며
   .is-active를 옮겨서 opacity 크로스페이드로 전환한다. */
.hero__rotator-layer {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
}
.hero__rotator-layer.is-active { opacity: 1; }

/* 미디어(공지/뉴스) 히어로: 정적 사진 대신 반도체 팹 안을 움직이는 영상 배경.
   .hero 자체의 인라인 background-image가 poster/폴백 역할(영상 로딩 전, 또는
   prefers-reduced-motion 사용자에게는 영상 대신 정지 사진만 보임). */
.hero__video-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video-bg { display: none; }
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--space-3);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
.hero__eyebrow {
  font-size: 16.1px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f0b3b3;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: var(--space-2);
}
/* semes.com 실측: eyebrow 라벨 아래 짧은 대시로 시각적 무게를 더하는 디테일.
   product-hero__eyebrow에 먼저 적용했던 패턴을 히어로 전반에 일관 적용. */
.hero__eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  background: rgba(255,255,255,0.6);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 300; /* semes.com 실측: 서브페이지 히어로 타이틀은 300(light) 웨이트 사용 */
  line-height: 1.2;
  max-width: 760px;
}
.hero__desc {
  margin-top: var(--space-3);
  font-size: 19.5px;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
}
/* 홈 히어로: 인삿말이 의도한 지점(<br>)에서 두 줄로 자연스럽게 떨어지도록 폭 확대 */
.hero--full .hero__desc { max-width: 820px; }

/* semes.com 실측(제품/공정 등 서브페이지): 히어로 타이틀이 좌측이 아니라 화면
   정중앙에 옴(홈 히어로 .hero--full은 좌측 정렬 그대로 유지, semes 홈도 좌측 정렬). */
.hero:not(.hero--full) .hero__content { text-align: center; }
.hero:not(.hero--full) .hero__eyebrow { display: inline-block; }
.hero:not(.hero--full) .hero__eyebrow::after { left: 50%; transform: translateX(-50%); }
.hero:not(.hero--full) .hero__title,
.hero:not(.hero--full) .hero__desc { margin-left: auto; margin-right: auto; }

/* semes.com 스타일 "Scroll to discover" 안내: 히어로 하단 중앙에 표시되는
   스크롤 유도 인디케이터. 마우스 아이콘은 세메스의 이미지 자산을 그대로 쓰지 않고
   CSS만으로 구현(테두리 pill + 안에서 위아래로 움직이는 점). */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 12.6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hero__scroll-cue__icon {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 13px;
  position: relative;
}
.hero__scroll-cue__icon::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: heroScrollCueMove 1.8s ease-in-out infinite;
}
@keyframes heroScrollCueMove {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue__icon::before { animation: none; }
}
@media (max-width: 640px) {
  .hero__scroll-cue { display: none; }
}

/* ---------- Photo band: semes.com처럼 텍스트 섹션 사이사이에 배치하는
   전체 폭 사진 밴드. .section과 함께 써서 스크롤 리빌 효과를 그대로 받는다. */
.photo-band {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  padding: var(--space-6) 0 !important;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,12,0.6) 0%, rgba(10,10,12,0.2) 55%, rgba(10,10,12,0.35) 100%);
}
.photo-band__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
  width: 100%;
}
.photo-band__text {
  font-size: clamp(24px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.4;
  max-width: 860px;
}
.photo-band--right .photo-band__content { display: flex; flex-direction: column; align-items: flex-end; }
.photo-band--right .photo-band__text { text-align: right; }
/* semes.com 홈페이지 실측: 사진 밴드 하단에 해당 섹션으로 연결되는 아웃라인 버튼(→) 배치 */
.photo-band__btn { margin-top: var(--space-3); }
@media (max-width: 640px) {
  .photo-band { min-height: 40vh; }
}
/* ---------- 화면 꽉 채우는 히어로: 홈/서브페이지 공통으로 뷰포트 대부분을 채우도록 ---------- */
.hero--full { min-height: 100vh; }
@media (max-width: 640px) {
  .hero--full { min-height: 100vh; }
}

/* ---------- CTA 배너: 외부 시스템(내방신청 등)으로 연결되는 눈에 띄는 사진 배경 콜아웃 ---------- */
.cta-band {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.45) 0%, rgba(10,10,12,0.75) 100%);
}
.cta-band__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.cta-band__eyebrow {
  font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  color: #f0b3b3; font-weight: 700;
  position: relative; padding-bottom: 14px; margin-bottom: var(--space-2);
}
.cta-band__eyebrow::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 26px; height: 2px;
  background: rgba(255,255,255,0.55); transform: translateX(-50%);
}
.cta-band__title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; line-height: 1.4; }
.cta-band__desc { margin-top: var(--space-2); font-size: 17.2px; color: rgba(255,255,255,0.82); }
.cta-band__btn { margin-top: var(--space-4); }
@media (max-width: 640px) {
  .cta-band { min-height: 320px; }
}

/* ---------- Section ---------- */
.section { padding: var(--space-6) 0; }
/* semes.com처럼 서브메뉴(예: 회사소개 > CEO 인사말)를 클릭하면 "슬쩍 스크롤되는" 느낌이 아니라
   해당 섹션이 화면을 거의 가득 채우며 딱 맞게 나타나야 한다는 요청 — 앵커(#id) 대상이 되는
   섹션은 내용이 짧아도 최소 높이를 헤더를 뺀 뷰포트 높이만큼 확보해 "한 화면 = 한 섹션"처럼
   보이게 한다(내용이 그보다 길면 자연스럽게 더 길어짐, 짧으면 세로 중앙 정렬로 채움). */
.section[id],
.section:has([id]) {
  min-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section--alt { background: var(--color-bg-alt); }
.section__head { margin-bottom: var(--space-5); }
.section__eyebrow {
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: 700;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: var(--space-1);
}
.section__eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px;
  background: var(--color-brand);
}
.section__title {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  color: var(--color-charcoal);
}
.section__desc {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  max-width: none;
  font-size: 18.4px;
}

/* ---------- Business / Product cards ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 제품 섹션: 좌측 고정(sticky) 타이틀 + 우측 스크롤 그리드 (semes.com 제품페이지 스타일) ---------- */
.product-section__layout { display: flex; gap: var(--space-3); align-items: flex-start; }
.product-section__sticky { flex: 0 0 220px; position: sticky; top: 96px; }
.product-section__sticky .section__desc { max-width: none; }
.product-section__grid { flex: 1; min-width: 0; }
@media (max-width: 960px) {
  .product-section__layout { flex-direction: column; }
  .product-section__sticky { position: static; flex: 0 0 auto; }
}

/* semes.com 스타일: 제품 이미지를 시원시원하게 크게 보여주는 그리드
   (기존 4:3 카드보다 훨씬 넓고 낮은 비율 + 큰 여백/타이포).
   제품 사진 자체가 흰색/연회색 배경의 CAD 렌더 컷아웃이라(사진 배경 아님),
   기존 card__media의 object-fit:cover + 어두운 그라디언트 오버레이 조합은
   흰 배경 위에 이상한 그림자띠가 생기고 제품이 잘려 보이는 문제가 있었음
   → object-fit:contain으로 전체 제품이 보이게 하고, 카드 배경도 제품 렌더의
   옅은 회색 배경톤과 어울리는 은은한 그라디언트로 맞춤. 오버레이(호버 시
   어두운 그라디언트+제품명)는 흰 배경 이미지와 안 어울려서 끄고, 제품명은
   기존처럼 카드 하단 텍스트로만 노출(중복 정보라 오버레이가 없어도 무방). */
.product-section__grid.grid--2 { gap: var(--space-5) var(--space-4); }
.product-section__grid .card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, #f8f9fa 0%, #edeff1 100%);
  padding: 26px;
}
.product-section__grid .card__media img { object-fit: contain; transition: transform 500ms ease-in-out; }
.product-section__grid .card:hover .card__media img { transform: scale(1.04); }
.product-section__grid .card__media__overlay { display: none; }
.product-section__grid .card__body { padding: var(--space-3) 4px; }
.product-section__grid .card__title { font-size: 24.2px; }
.product-section__grid .card__desc { font-size: 17.2px; }
.product-section__grid .card { border: none; }

/* ============================================================
   장비 소개(2026-07): 플로팅 + 그림자 + 에디토리얼 넘버 + 카테고리 탭
   ★ 둥근 광원(스포트라이트) 배경은 제거 — 제품이 흰 페이지 위에 그림자로 떠 있음
   ============================================================ */
/* 홈 사업 미리보기 카드: 기존 쇼룸 배경 유지 */
.card__media--product { background: radial-gradient(115% 85% at 50% 30%, #ffffff 0%, #eff1f3 58%, #e0e3e7 100%); }
.card__media--product img { filter: drop-shadow(0 16px 20px rgba(20,24,28,0.15)); }

.product-section__grid { counter-reset: prod; }
.product-section__grid .card { position: relative; background: transparent; border: none; overflow: visible; counter-increment: prod; transition: none; }
/* 배경: 둥근 광원 제거 → 투명(제품 사진이 흰 배경째 페이지에 얹혀 그림자로만 떠 보임) */
.product-section__grid .card__media { background: transparent; overflow: visible; }
.product-section__grid .card__media img {
  filter: drop-shadow(0 20px 24px rgba(20,24,28,0.16));
  transition: transform 520ms cubic-bezier(.22,.61,.36,1), filter 520ms ease;
}
/* 호버: 네모칸이 들썩이지 않고 제품만 부드럽게 떠오르며 그림자가 깊어진다 */
.product-section__grid .card:hover { transform: none; box-shadow: none; }
.product-section__grid .card:hover .card__media img {
  transform: translateY(-8px) scale(1.035);
  filter: drop-shadow(0 32px 30px rgba(20,24,28,0.20));
}
/* 본문: 에디토리얼 인덱스 넘버(01,02 …) + 얇은 액센트 라인 */
.product-section__grid .card__body { position: relative; padding: 20px 4px 4px; }
.product-section__grid .card__body::before {
  content: counter(prod, decimal-leading-zero);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--color-brand); display: block; margin-bottom: 8px;
}
.product-section__grid .card__body::after {
  content: ""; position: absolute; top: 0; left: 4px; height: 2px; width: 30px;
  background: var(--color-brand); transition: width 340ms ease;
}
.product-section__grid .card:hover .card__body::after { width: 68px; }
/* CTA: "정보보기 →" (화살표 슬라이드) */
.product-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; color: var(--color-brand); }
.product-link__arrow { transition: transform var(--transition); }
.card:hover .product-link__arrow { transform: translateX(5px); }
/* 카테고리 탭 필터 */
.product-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.product-tab {
  font: inherit; cursor: pointer; background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 18px; font-size: 14.5px; font-weight: 500;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.product-tab:hover { color: var(--color-charcoal); border-color: var(--color-text-muted); }
.product-tab.is-active { color: #fff; background: var(--color-charcoal); border-color: var(--color-charcoal); }
.product-section__grid .card.is-hidden { display: none; }

.card {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
/* semes.com 실측: 카드 자체는 뜨지 않고(translateY 없음) 내부 이미지만
   ease-in-out 0.35s~1s로 확대되는 절제된 호버 방식 */
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease-in-out; }
.card:hover .card__media img { transform: scale(1.1); }
/* 흰/연회색 배경 제품 렌더 컷아웃용 변형(사업분야 그리드와 동일 톤) — 홈 화면
   사업분야 미리보기 카드처럼 제품 사진을 쓰는 다른 곳에서도 재사용. */
.card__media--product {
  background: linear-gradient(155deg, #f8f9fa 0%, #edeff1 100%);
  padding: 22px;
}
.card__media--product img { object-fit: contain; }
.card__media--product .card__media__overlay { display: none; }
/* semes.com 타일 스타일: 호버 시 이미지 위로 그라디언트 + 제품명 오버레이가 떠오름 */
.card__media__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.72) 100%);
  opacity: 0; transition: opacity var(--transition);
  color: #fff; font-size: 17.2px; font-weight: 700; letter-spacing: 0.2px;
}
.card:hover .card__media__overlay { opacity: 1; }

/* ---------- Scroll-reveal effect (semes.com 스타일 스크롤 등장 효과) ----------
   JS(main.js)가 .section/.card/히어로 콘텐츠에 reveal-init 클래스를 부여하고,
   IntersectionObserver로 뷰포트에 들어오면 is-visible을 추가한다.
   JS가 없는 환경에서는 reveal-init 자체가 부여되지 않으므로 콘텐츠는 항상 정상 표시된다. */
/* 위에서 아래로 스르륵 떨어지듯 등장(요청: "비처럼 위에서 떨어지는 효과") */
.reveal-init { opacity: 0; transform: translateY(-22px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.reveal-init.is-visible { opacity: 1; transform: none; }
.grid--3 .card.reveal-init:nth-child(3n+1) { transition-delay: 0ms; }
.grid--3 .card.reveal-init:nth-child(3n+2) { transition-delay: 90ms; }
.grid--3 .card.reveal-init:nth-child(3n+3) { transition-delay: 180ms; }
.grid--2 .card.reveal-init:nth-child(2n+1) { transition-delay: 0ms; }
.grid--2 .card.reveal-init:nth-child(2n+2) { transition-delay: 100ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; transition: none; }
}
a.card { display: block; color: inherit; text-decoration: none; }
.card__body { padding: var(--space-3); }
.card__tag {
  font-size: 13.8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-brand); margin-bottom: 8px;
}
.card__title { font-size: 20.7px; font-weight: 700; color: var(--color-charcoal); }
.card__desc { margin-top: 8px; font-size: 16.1px; color: var(--color-text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  font-size: 16.1px; font-weight: 500; letter-spacing: 0.2px;
  border: 1px solid var(--color-charcoal);
  color: var(--color-charcoal);
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  background: transparent;
}
.btn:hover { background: var(--color-charcoal); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); box-shadow: 0 10px 24px rgba(197,45,47,0.28); }
.btn--ghost-light { border-color: rgba(255,255,255,0.6); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--color-charcoal); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }

/* ============================================================
   홈 리프레시(2026-07): 통계 수치 밴드 · 공정/기술 스트립 · 히어로 도트
   전부 기존 디자인 토큰/스크롤 리빌 시스템 위에 additive로 추가(회귀 위험 없음).
   ============================================================ */

/* ---------- 통계 수치 밴드 (count-up) ---------- */
.stats-band { background: var(--color-bg-alt); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: var(--space-2) var(--space-3); border-left: 1px solid var(--color-border); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 66px); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--color-charcoal);
  display: flex; align-items: baseline; gap: 5px;
}
.stat__num .stat__unit { font-size: 0.34em; font-weight: 600; color: var(--color-brand); letter-spacing: 0; }
.stat__label { margin-top: 16px; font-size: 15.5px; color: var(--color-text-muted); line-height: 1.5; }
.stat__label b { display: block; color: var(--color-charcoal); font-weight: 600; font-size: 16.5px; margin-bottom: 3px; letter-spacing: -0.01em; }
.stats-band__foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 10px; }
.stats-chip { font-size: 13px; letter-spacing: 0.2px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 15px; background: #fff; }
.stats-chip b { color: var(--color-charcoal); font-weight: 600; }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: var(--space-2); }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat:nth-child(n+3) { margin-top: var(--space-3); }
}

/* ---------- 공정/기술 스트립 (01–04) ---------- */
.tech-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.tech-step { padding-top: 20px; border-top: 2px solid var(--color-border); transition: border-color var(--transition); }
.tech-step:hover { border-top-color: var(--color-brand); }
.tech-step__no { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1.5px; color: var(--color-brand); }
.tech-step__title { font-size: 21px; font-weight: 700; color: var(--color-charcoal); margin-top: 10px; letter-spacing: -0.01em; }
.tech-step__en { font-size: 12.5px; color: var(--color-text-muted); letter-spacing: 0.8px; margin-top: 4px; text-transform: uppercase; }
.tech-step__desc { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); }
.tech-step__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.tech-step__tag { font-size: 12.5px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 2px; padding: 4px 9px; }
@media (max-width: 860px) { .tech-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); } }
@media (max-width: 480px) { .tech-strip { grid-template-columns: 1fr; } }

/* ---------- 히어로 로테이터 인디케이터 도트 ---------- */
.hero__dots { position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 2; display: flex; gap: 9px; }
.hero__dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.42); border: none; padding: 0; cursor: pointer; transition: background var(--transition), width var(--transition); }
.hero__dot.is-active { background: #fff; width: 26px; }
@media (max-width: 640px) { .hero__dots { right: var(--space-3); bottom: var(--space-3); } }

/* ---------- 홈 뉴스 카드 보조 ---------- */
.news-card__date { font-variant-numeric: tabular-nums; }
.news-card__cat { color: var(--color-brand); font-weight: 700; letter-spacing: 0.5px; }

/* ---------- Board (list/view) ---------- */
.board-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }

/* 게시판 바(행) 목록 — 공지사항·IR·공시 (뉴스는 카드 유지) */
.board-list { width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-charcoal); }
.board-list thead th {
  padding: 14px 12px; font-size: 14px; font-weight: 700; color: var(--color-charcoal);
  background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); text-align: center;
}
.board-list thead th.bl-title { text-align: left; }
.board-list tbody td {
  padding: 15px 12px; font-size: 15px; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle;
}
.board-list td.bl-title { text-align: left; }
.board-list td.bl-title a { color: var(--color-charcoal); font-weight: 500; }
.board-list td.bl-title a:hover { color: var(--color-brand); text-decoration: underline; }
.board-list tbody tr:hover { background: var(--color-bg-alt); }
.board-list .bl-no { width: 70px; }
.board-list .bl-author { width: 120px; }
.board-list .bl-date { width: 120px; }
.board-list .bl-views { width: 72px; }
@media (max-width: 640px) {
  .board-list .bl-author, .board-list .bl-views { display: none; }  /* 모바일: 번호·제목·등록일만 */
  .board-list tbody td, .board-list thead th { padding: 12px 8px; font-size: 14px; }
}
table.board-table { width: 100%; border-collapse: collapse; font-size: 16.1px; }
table.board-table th, table.board-table td {
  padding: 14px 12px; border-bottom: 1px solid var(--color-border); text-align: left;
}
table.board-table th { color: var(--color-text-muted); font-weight: 600; font-size: 15px; }
table.board-table td.num, table.board-table td.date { color: var(--color-text-muted); width: 90px; font-variant-numeric: tabular-nums; }
table.board-table tr:hover { background: var(--color-bg-alt); }
/* 모바일: 표가 가로로 터지지 않게 긴 토큰 줄바꿈 + 폰트 소폭 축소 */
@media (max-width: 600px) {
  table.board-table { font-size: 14px; }
  table.board-table th, table.board-table td { overflow-wrap: anywhere; word-break: break-word; }
}
.board-table__thumb {
  display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 4px;
  background: var(--color-bg-alt);
}
.board-table__thumb--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 13.8px; border: 1px dashed var(--color-border);
}
.board-table__thumb--lg { width: 90px; height: 90px; }
/* 채용공고(Employment Notice) — 관리자 게시판(구분=채용공고) 렌더링 */
.recruit-notices { display: flex; flex-direction: column; gap: var(--space-3); }
.recruit-notice { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-4); background: #fff; }
.recruit-notice__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.recruit-notice__title { font-size: 19px; font-weight: 700; color: var(--color-charcoal); }
.recruit-notice__date { flex: none; font-size: 13.5px; color: var(--color-text-muted); }
.recruit-notice__body { font-size: 16px; line-height: 1.85; color: var(--color-text); }
.recruit-notice__body p { margin: 0 0 .8em; }
.recruit-notice__body ul, .recruit-notice__body ol { margin: 0 0 .8em 1.3em; }
.recruit-notice__body li { margin-bottom: 6px; }
.recruit-notice__body img { max-width: 100%; height: auto; }
.recruit-notice__body a { color: var(--color-brand); text-decoration: underline; }
@media (max-width: 640px) { .recruit-notice { padding: 20px 18px; } .recruit-notice__head { flex-direction: column; gap: 4px; } }
/* 신고 페이지 유형 선택 탭 (보안신고 / 부당행위·직장 내 괴롭힘) */
.report-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 auto var(--space-5); }
.report-tab { padding: 12px 26px; border: 1px solid var(--color-border); background: #fff; border-radius: var(--radius); font-size: 15.5px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.report-tab:hover { color: var(--color-charcoal); }
.report-tab.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.report-panel { display: none; }
.report-panel.is-active { display: block; animation: reportFade 0.35s ease both; }
@keyframes reportFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .report-panel.is-active { animation: none; } }
/* semes.com 뉴스룸 스타일 카드형 게시판 목록 */
.news-grid { margin-top: var(--space-2); }
.card__media--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-charcoal); }
.news-card__initial { font-size: 44px; font-weight: 700; color: rgba(255,255,255,0.35); }
.news-card__meta { display: flex; gap: var(--space-2); margin-top: 12px; font-size: 14.4px; color: var(--color-text-muted); }
.board-view__title { font-size: 25.9px; font-weight: 700; padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-charcoal); }
.board-view__meta { display: flex; gap: var(--space-3); color: var(--color-text-muted); font-size: 15px; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.board-view__body { padding: var(--space-4) 0; min-height: 200px; font-size: 17.2px; line-height: 1.9; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--space-4); }
.pagination a, .pagination span { padding: 8px 13px; border: 1px solid var(--color-border); font-size: 15px; }
.pagination a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination .current { background: var(--color-charcoal); color: #fff; border-color: var(--color-charcoal); }

/* ---------- Forms (contact / admin) ---------- */
.form-row { margin-bottom: var(--space-3); }
.form-row label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--color-charcoal); }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=date], .form-row input[type=number], .form-row textarea, .form-row select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); font-size: 16.1px; font-family: inherit;
  border-radius: var(--radius); background: #fff;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(197,45,47,0.1);
}
.form-error { color: var(--color-brand); font-size: 15px; margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-charcoal); color: rgba(255,255,255,0.72); padding: var(--space-5) 0 var(--space-3); }
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--space-4) var(--space-6);
  padding-bottom: var(--space-3);
}
/* 우측 컬럼: 상단 nav + 하단 FAMILY SITE. family를 margin-top:auto로 컬럼 바닥에 붙여
   (좌측 주소 블록 높이에 맞춰 늘어난) 빈 공간을 채워 세로 공간을 효율적으로 사용. */
.site-footer__right { display: flex; flex-direction: column; }
.site-footer__brand { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.site-footer__brand::after { content: ""; display: block; width: 32px; height: 2px; background: var(--color-brand); margin-top: 14px; }
.site-footer__tagline { margin: 16px 0 20px; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.5); max-width: none; }
@media (min-width: 1200px) { .site-footer__tagline { white-space: nowrap; } }
.site-footer__info { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.55); display: flex; flex-direction: column; gap: 8px; }
.site-footer__info a { color: rgba(255,255,255,0.72); }
.site-footer__info a:hover { color: #fff; }
.site-footer__sep { display: inline-block; width: 1px; height: 11px; background: rgba(255,255,255,0.25); margin: 0 12px; vertical-align: -1px; }
.site-footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.site-footer__col h4 { color: #fff; font-size: 12.5px; font-weight: 600; margin-bottom: 18px; letter-spacing: 1.4px; text-transform: uppercase; }
.site-footer__col li { margin-bottom: 12px; font-size: 14.5px; }
.site-footer__col a { color: rgba(255,255,255,0.58); transition: color var(--transition); }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-3); font-size: 13.5px; color: rgba(255,255,255,0.4); }
.site-footer__legal a { color: rgba(255,255,255,0.8); font-weight: 500; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 600px) {
  .site-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---------- Popup ---------- */
.yest-popup {
  position: fixed; z-index: 999; background: #fff; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.25); overflow: hidden;
}
.yest-popup__img { width: 100%; display: block; }
.yest-popup__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--color-border); font-size: 14.4px; }
.yest-popup__bar label { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.yest-popup__close { cursor: pointer; font-weight: 700; color: var(--color-text-muted); }

/* ---------- Admin ---------- */
.admin-shell { display: flex; min-height: 100vh; background: var(--color-bg-alt); }
.admin-sidebar { width: 220px; background: var(--color-charcoal); color: #fff; padding: var(--space-3); flex-shrink: 0; }
.admin-sidebar__logo { font-weight: 700; font-size: 19.5px; margin-bottom: var(--space-4); }
.admin-sidebar a { display: block; padding: 10px 8px; font-size: 16.1px; color: rgba(255,255,255,0.75); }
.admin-sidebar a:hover, .admin-sidebar a.active { color: #fff; background: rgba(255,255,255,0.08); }
.admin-main { flex: 1; padding: var(--space-4); }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.admin-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); }
.admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); }
.admin-login-box { width: 380px; background: #fff; padding: var(--space-4); border: 1px solid var(--color-border); }
/* 접근 보안(security.asp) 보조 스타일 */
.admin-card + .admin-card { margin-top: var(--space-3); }
.admin-card h3 { color: var(--color-charcoal); }
.form-ok { background: #eafaf1; border: 1px solid #b7e4c7; color: #1e7e45; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: var(--space-3); }
.tbl-wrap { overflow-x: auto; }
.row-actions { display: flex; gap: 8px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.7; }
.badge-on { background: #e7f3ff; color: #1a6fc4; }
.badge-off { background: #f0f0f0; color: #888; }
.btn--sm { padding: 5px 12px; font-size: 13px; }
.btn--danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn--danger:hover { background: #a93226; border-color: #a93226; }

/* ---------- 직급체계(Rank Steps) - 연결선이 있는 스텝 비주얼 ---------- */
.rank-steps { display: flex; gap: 0; margin-top: var(--space-4); }
.rank-step { flex: 1; text-align: center; position: relative; padding-top: 44px; }
.rank-step::before {
  content: ""; position: absolute; top: 18px; left: 0; width: 100%; height: 2px; background: var(--color-border);
}
.rank-step:first-child::before { left: 50%; width: 50%; }
.rank-step:last-child::before { width: 50%; }
.rank-step__dot {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--color-brand); z-index: 2;
}
.rank-step__label { font-size: 16.1px; font-weight: 700; color: var(--color-charcoal); }
.rank-step__desc { font-size: 13.8px; color: var(--color-text-muted); margin-top: 4px; }
@media (max-width: 700px) {
  .rank-steps { flex-direction: column; gap: var(--space-2); }
  .rank-step { padding-top: 0; padding-left: 34px; text-align: left; }
  .rank-step::before { display: none; }
  .rank-step__dot { top: 2px; left: 0; transform: none; }
}

/* ---------- 직급체계 2직군(관리직/연구직) - 연결선 스텝을 두 줄로 ---------- */
.rank-tracks { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 56px; }
.rank-track { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: var(--space-3); }
.rank-track__label {
  font-size: 17px; font-weight: 700; color: var(--color-brand); text-align: center;
  padding: 12px 0; border: 1px solid var(--color-brand); border-radius: 999px; background: #fff;
}
/* 트랙 안의 스텝바는 위쪽 여백 없이 라벨과 세로 중앙 정렬 */
.rank-track .rank-steps { margin-top: 0; }
@media (max-width: 720px) {
  .rank-track { grid-template-columns: 1fr; gap: var(--space-2); }
  .rank-track__label { width: fit-content; padding: 8px 20px; }
}
/* 직급 도트도 타임라인과 동일한 '웅웅' 펄스(레이더). 좌→우로 파도치듯 순차. */
@media (prefers-reduced-motion: no-preference) {
  .rank-step__dot { animation: tlPulse 2.4s ease-out infinite; }
  .rank-step:nth-child(2) .rank-step__dot { animation-delay: .3s; }
  .rank-step:nth-child(3) .rank-step__dot { animation-delay: .6s; }
  .rank-step:nth-child(4) .rank-step__dot { animation-delay: .9s; }
  .rank-step:nth-child(5) .rank-step__dot { animation-delay: 1.2s; }
}

/* ---------- 인재상 등 "큰 숫자 + 키워드" 밸류 카드 그리드 (semes.com 스타일) ----------
   기존에 좁은 폭(max-width:900px)의 인포그래픽 PNG 한 장으로 표시하던 것을
   화면 폭을 꽉 채우는 실제 HTML 카드 그리드로 대체(접근성/SEO 개선 + "옹색해 보인다"는
   피드백 해결). */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.value-card {
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.value-card:hover { border-color: var(--color-brand); box-shadow: 0 20px 40px rgba(0,0,0,0.07); transform: translateY(-4px); }
.value-card__num { font-size: 46px; font-weight: 700; color: var(--color-accent-line); line-height: 1; margin-bottom: var(--space-3); transition: color var(--transition); }
.value-card:hover .value-card__num { color: var(--color-brand); }
.value-card__title { font-size: 24.2px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 10px; }
.value-card__desc { font-size: 16.7px; color: var(--color-text-muted); line-height: 1.75; }
@media (max-width: 960px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }
/* ESG 통일: 3열 그리드 변형 + 인증 칩 */
.value-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .value-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .value-grid--3 { grid-template-columns: 1fr; } }
.cert-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.cert-chip { display: inline-flex; align-items: baseline; gap: 10px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 12px 22px; transition: border-color var(--transition), box-shadow var(--transition); }
.cert-chip:hover { border-color: var(--color-brand); box-shadow: 0 10px 24px rgba(20,24,28,0.07); }
.cert-chip__name { font-weight: 700; color: var(--color-charcoal); font-size: 15px; letter-spacing: 0.2px; }
.cert-chip__desc { font-size: 13.5px; color: var(--color-text-muted); }
@media (max-width: 620px) { .cert-chip { width: 100%; } }
/* 상생협력 추진 체계(구 인라인 style 이전) */
.ww-framework { margin-top: var(--space-4); }
.ww-vision { background: var(--color-brand); color: #fff; text-align: center; font-size: 19px; font-weight: 600; padding: 20px 24px; border-radius: 10px; letter-spacing: -.01em; }
.ww-vision small { display: block; font-size: 13px; font-weight: 400; opacity: .85; margin-top: 4px; letter-spacing: normal; }
.ww-arrow { text-align: center; color: var(--color-brand); font-size: 20px; margin: 12px 0; line-height: 1; }
.ww-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
.ww-col { border: 1px solid var(--color-border); border-top: 3px solid var(--color-brand); border-radius: 8px; background: #fff; padding: var(--space-3); }
.ww-col__head { font-size: 18px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 12px; text-align: center; }
.ww-col ul { list-style: none; padding: 0; margin: 0; }
.ww-col li { position: relative; padding: 8px 0 8px 18px; font-size: 15px; color: var(--color-text-muted); border-top: 1px dashed var(--color-border); }
.ww-col li:first-child { border-top: none; }
.ww-col li:before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); }
@media (max-width: 760px) { .ww-cols { grid-template-columns: 1fr; } }

/* ---------- 복리후생 등 카테고리별 체크리스트 카드(semes.com 스타일) ----------
   좁은 인포그래픽 이미지 대신 화면 폭을 꽉 채우는 3단 카드 + 상세 항목 리스트. */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.benefit-card { background: var(--color-bg-alt); padding: var(--space-4) var(--space-3); border-top: 3px solid var(--color-charcoal); }
.benefit-card--accent { border-top-color: var(--color-brand); }
.benefit-card__title { font-size: 21.8px; font-weight: 700; color: var(--color-charcoal); margin-bottom: var(--space-3); }
.benefit-card__list { display: flex; flex-direction: column; gap: 11px; }
.benefit-card__list li { font-size: 16.1px; color: var(--color-text); line-height: 1.6; padding-left: 16px; position: relative; }
.benefit-card__list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  background: var(--color-brand); border-radius: 50%;
}
@media (max-width: 900px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ---------- 제품 상세 히어로(semes.com product/view 스타일) ----------
   왼쪽 텍스트(카테고리 eyebrow + 대형 타이틀 + 문의 버튼), 오른쪽에는 제품 이미지를
   크게 화면 끝까지 배치하고, 좌하단에 플로팅 "정보보기" 버튼으로 스펙 섹션까지 스크롤. */
.product-hero {
  position: relative;
  min-height: 70vh;
  padding-top: 76px; /* header가 fixed로 겹치므로, 사진 히어로가 없는 이 페이지는 직접 여백 확보 */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-charcoal);
  background-size: cover;
  background-position: center;
  color: #fff;
}
/* 시네마틱 대각선 오버레이: 왼쪽(텍스트)은 어둡게 → 오른쪽(제품)은 밝게 페이드.
   → 배경 사진은 왼쪽에서 드라마틱하게 비치고, 오른쪽은 밝아서 흰 배경 제품 렌더가 깔끔히 얹힌다. */
.product-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(104deg, rgba(14,16,19,0.94) 0%, rgba(14,16,19,0.86) 38%, rgba(238,240,242,0.55) 64%, rgba(245,247,248,0.96) 100%);
}
/* 텍스트(좌) + 제품(우)을 컨테이너 안 2단으로 묶어 중앙에 모은다(어떤 화면폭에서도 안 겹침) */
.product-hero .container {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 72px);
}
/* .hero가 없는 페이지(board/view.asp 등)에서 fixed 헤더 여백 확보용 */
.page-top-gap { padding-top: calc(var(--space-6) + 76px) !important; }
.product-hero__text { position: relative; z-index: 2; flex: 0 1 500px; }
.product-hero__eyebrow {
  font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #f0b3b3;
  padding-bottom: 16px; margin-bottom: 20px; position: relative;
}
.product-hero__eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--color-brand); }
.product-hero__title { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; letter-spacing: 0.3px; color: #fff; line-height: 1.16; text-transform: uppercase; }
.product-hero__summary { margin-top: var(--space-3); font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 440px; }
.product-hero__actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 12px; }
.product-hero__btn { margin-top: 0; }
.product-hero__media { position: relative; z-index: 2; flex: 0 1 720px; pointer-events: none; }
.product-hero__media img { width: 100%; display: block; filter: drop-shadow(0 22px 40px rgba(0,0,0,0.24)); }
.product-hero__info-btn {
  position: absolute; left: var(--space-3); bottom: var(--space-4); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  padding: 13px 22px; font-size: 15.5px; font-weight: 600; color: #fff;
  backdrop-filter: blur(6px); transition: background var(--transition), border-color var(--transition);
}
.product-hero__info-btn:hover { background: rgba(255,255,255,0.22); border-color: #fff; }
@media (max-width: 960px) {
  .product-hero { min-height: auto; padding: calc(var(--space-6) + 40px) 0 var(--space-5); text-align: left; }
  .product-hero .container { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .product-hero::before { background: linear-gradient(180deg, rgba(14,16,19,0.92) 0%, rgba(14,16,19,0.8) 55%, rgba(245,247,248,0.95) 100%); }
  .product-hero__text, .product-hero__media { flex: 1 1 auto; max-width: 100%; }
  .product-hero__media { width: 100%; max-width: 460px; }
}

/* ============================================================
   페이지 전환·진입 애니메이션 (2026-07): 화면 '띡' 대신 부드럽게
   ============================================================ */
/* 페이지 이동 시 브라우저 기본 크로스페이드(지원 브라우저만; 미지원은 즉시 이동) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes phRise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes phMedia { from { opacity: 0; transform: translateY(20px) scale(0.985); } to { opacity: 1; transform: none; } }
  /* 제품 상세 히어로: 글자 계단식 상승 + 사진 페이드 상승으로 부드럽게 등장 */
  .product-hero__eyebrow { animation: phRise 0.7s cubic-bezier(.22,.61,.36,1) 0.12s both; }
  .product-hero__title   { animation: phRise 0.8s cubic-bezier(.22,.61,.36,1) 0.22s both; }
  .product-hero__summary { animation: phRise 0.8s cubic-bezier(.22,.61,.36,1) 0.34s both; }
  .product-hero__actions { animation: phRise 0.8s cubic-bezier(.22,.61,.36,1) 0.46s both; }
  .product-hero__media   { animation: phMedia 1s   cubic-bezier(.22,.61,.36,1) 0.28s both; }
}

/* ---------- CEO 인사말(에디토리얼) ---------- */
.ceo-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-4); align-items: start; max-width: 1120px; margin: 0 auto; }
.ceo-visual { position: sticky; top: 110px; }
.ceo-visual__img { width: 100%; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); background: #fff; }
.ceo-visual__cap { margin-top: 16px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); }
.ceo-visual__cap b { display: block; text-transform: none; letter-spacing: -0.01em; font-size: 18px; color: var(--color-charcoal); font-weight: 700; margin-top: 5px; }
.ceo-body { position: relative; max-width: 560px; }
.ceo-body__qmark { font-family: var(--font-display); font-size: 84px; line-height: 0.5; color: var(--color-brand); opacity: 0.15; }
.ceo-body__headline { font-size: clamp(21px, 2.3vw, 29px); font-weight: 700; color: var(--color-charcoal); line-height: 1.5; margin: 6px 0 26px; letter-spacing: -0.01em; }
.ceo-body__headline b { color: var(--color-brand); }
.ceo-body p { font-size: 17px; line-height: 1.95; color: var(--color-text); margin-bottom: 18px; }
.ceo-values { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 4px; }
.ceo-value { border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 18px; font-size: 14.5px; color: var(--color-text-muted); }
.ceo-value b { color: var(--color-brand); font-weight: 700; margin-right: 4px; }
.ceo-sign { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.ceo-sign__label { font-size: 13.5px; letter-spacing: 1px; color: var(--color-text-muted); }
.ceo-sign__name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--color-charcoal); margin-top: 6px; letter-spacing: 0.3px; }
.ceo-sign__name span { font-family: var(--font-base); font-size: 15px; color: var(--color-text-muted); font-weight: 500; margin-left: 10px; letter-spacing: 0; }
@media (max-width: 900px) {
  .ceo-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .ceo-visual { position: static; max-width: 380px; }
}

/* ---------- 기업개요(정보 리스트 + 사진) ---------- */
.overview-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.overview-info__row { display: grid; grid-template-columns: 132px 1fr; gap: var(--space-3); padding: 20px 2px; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.overview-info__row:first-child { border-top: 1px solid var(--color-border); }
.overview-info__label { font-size: 14px; font-weight: 600; letter-spacing: 0.5px; color: var(--color-text-muted); }
.overview-info__value { font-size: 18px; font-weight: 500; color: var(--color-charcoal); line-height: 1.55; }
.overview-info__value span { display: inline-block; margin-left: 6px; font-size: 14.5px; font-weight: 400; color: var(--color-text-muted); }
.overview-photo { position: sticky; top: 110px; }
.overview-photo img { width: 100%; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
/* 진입: 섹션 스크롤 리빌에 연동해 정보 행이 계단식으로 등장 */
.reveal-init .overview-info__row { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal-init.is-visible .overview-info__row { opacity: 1; transform: none; }
.reveal-init.is-visible .overview-info__row:nth-child(1) { transition-delay: .04s; }
.reveal-init.is-visible .overview-info__row:nth-child(2) { transition-delay: .11s; }
.reveal-init.is-visible .overview-info__row:nth-child(3) { transition-delay: .18s; }
.reveal-init.is-visible .overview-info__row:nth-child(4) { transition-delay: .25s; }
.reveal-init.is-visible .overview-info__row:nth-child(5) { transition-delay: .32s; }
.reveal-init.is-visible .overview-info__row:nth-child(6) { transition-delay: .39s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-init .overview-info__row { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .overview-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .overview-photo { position: static; }
}

/* ---------- 경영철학 핵심가치 카드 ---------- */
.value-card { position: relative; padding: 42px 34px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.value-card::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; height: 3px; width: 0; background: var(--color-brand); transition: width 340ms ease; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,0.1); border-color: transparent; }
.value-card:hover::before { width: 100%; }
.value-card__no { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1; color: #e9ebed; }
.value-card__tag { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand); }
.value-card__title { margin-top: 8px; font-size: 26px; font-weight: 700; color: var(--color-charcoal); }
.value-card__desc { margin-top: 16px; font-size: 16px; line-height: 1.8; color: var(--color-text-muted); }
/* ---------- 경영이념 체계 다이어그램 패널 ---------- */
.philo-system { margin-top: 36px; padding: 56px 24px; background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%); border: 1px solid var(--color-border); border-radius: var(--radius); }

/* ---------- 경영철학·경영이념 통합(세로 위계, 중앙정렬) ---------- */
.section__head--center { text-align: center; }
.section__head--center .section__eyebrow { display: inline-block; }
.section__head--center .section__eyebrow::after { left: 50%; transform: translateX(-50%); }
.section__head--center .section__desc { margin-left: auto; margin-right: auto; }
.philo-statement { max-width: 1040px; margin: 0 auto var(--space-6); text-align: center; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.7; color: var(--color-charcoal); font-weight: 500; letter-spacing: -0.01em; }
.philo-statement b { color: var(--color-brand); font-weight: 700; }
.ideology { display: flex; flex-direction: column; align-items: center; }
.ideology__peak { max-width: 520px; width: 100%; text-align: center; background: var(--color-charcoal); color: #fff; border-radius: 8px; padding: 34px 30px; box-shadow: 0 24px 54px rgba(0,0,0,0.16); }
.ideology__peak-eyebrow { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #f0b3b3; margin-bottom: 12px; }
.ideology__peak-title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; }
.ideology__peak-sub { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.ideology__connector { width: 2px; height: 52px; background: linear-gradient(var(--color-brand), var(--color-border)); }
.ideology__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); width: 100%; max-width: 960px; }
.value-pillar { text-align: center; padding: 40px 26px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition); }
.value-pillar:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,0.1); }
.value-pillar__no { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--color-brand); }
.value-pillar__tag { margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); }
.value-pillar__title { margin-top: 6px; font-size: 27px; font-weight: 700; color: var(--color-charcoal); }
.value-pillar__lead { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--color-brand); }
.value-pillar__desc { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--color-text-muted); }
.reveal-init .value-pillar { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal-init.is-visible .value-pillar { opacity: 1; transform: none; }
.reveal-init.is-visible .value-pillar:nth-child(1) { transition-delay: .08s; }
.reveal-init.is-visible .value-pillar:nth-child(2) { transition-delay: .18s; }
.reveal-init.is-visible .value-pillar:nth-child(3) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .reveal-init .value-pillar { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) { .ideology__values { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- 연혁/수상 타임라인(중앙 교차형) ---------- */
.timeline { position: relative; max-width: 920px; margin: 8px auto 0; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--color-brand), var(--color-accent-line)); }
.timeline__item { position: relative; width: 50%; padding: 16px 44px; box-sizing: border-box; }
.timeline__item:nth-child(odd) { left: 0; text-align: right; }
.timeline__item:nth-child(even) { left: 50%; text-align: left; }
.timeline__item::after { content: ""; position: absolute; top: 23px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--color-brand); box-shadow: 0 0 0 4px rgba(197,45,47,0.1); }
.timeline__item:nth-child(odd)::after { right: -7.5px; }
.timeline__item:nth-child(even)::after { left: -7.5px; }
.timeline__year { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-brand); letter-spacing: 0.3px; }
.timeline__text { margin-top: 5px; font-size: 16px; color: var(--color-charcoal); line-height: 1.65; }
.reveal-init .timeline__item { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal-init.is-visible .timeline__item { opacity: 1; transform: none; }
.reveal-init.is-visible .timeline__item:nth-child(1){transition-delay:.04s}
.reveal-init.is-visible .timeline__item:nth-child(2){transition-delay:.10s}
.reveal-init.is-visible .timeline__item:nth-child(3){transition-delay:.16s}
.reveal-init.is-visible .timeline__item:nth-child(4){transition-delay:.22s}
.reveal-init.is-visible .timeline__item:nth-child(5){transition-delay:.28s}
.reveal-init.is-visible .timeline__item:nth-child(6){transition-delay:.34s}
.reveal-init.is-visible .timeline__item:nth-child(7){transition-delay:.40s}
.reveal-init.is-visible .timeline__item:nth-child(8){transition-delay:.46s}
.reveal-init.is-visible .timeline__item:nth-child(9){transition-delay:.52s}
.reveal-init.is-visible .timeline__item:nth-child(10){transition-delay:.58s}
@media (prefers-reduced-motion: reduce) { .reveal-init .timeline__item { opacity: 1; transform: none; transition: none; } }
@media (max-width: 720px) {
  .timeline { max-width: 480px; }
  .timeline::before { left: 7px; }
  .timeline__item { width: 100%; left: 0 !important; text-align: left !important; padding: 14px 0 14px 34px; }
  .timeline__item::after { left: 0.5px !important; right: auto !important; }
}

/* ---------- 사업장안내 카드 ---------- */
.site-card { position: relative; padding: 40px 34px; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.site-card::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; height: 3px; width: 0; background: var(--color-brand); transition: width 340ms ease; }
.site-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,0.1); border-color: transparent; }
.site-card:hover::before { width: 100%; }
.site-card__tag { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand); }
.site-card__title { margin-top: 12px; font-size: 26px; font-weight: 700; color: var(--color-charcoal); }
.site-card__addr { margin-top: 18px; font-size: 16px; line-height: 1.85; color: var(--color-text); }
.site-card__meta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }

/* 타임라인 도트: 빨간 원이 웅~ 하고 빛이 퍼졌다 사라지는 펄스(레이더) */
@keyframes tlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(197,45,47,0.5), 0 0 0 4px rgba(197,45,47,0.12); }
  70%  { box-shadow: 0 0 0 13px rgba(197,45,47,0), 0 0 0 4px rgba(197,45,47,0.12); }
  100% { box-shadow: 0 0 0 0 rgba(197,45,47,0), 0 0 0 4px rgba(197,45,47,0.12); }
}
@media (prefers-reduced-motion: no-preference) {
  .timeline__item::after { animation: tlPulse 2.4s ease-out infinite; }
  .timeline__item:nth-child(even)::after { animation-delay: 1.2s; }
}

/* ---------- 사업분야 카테고리 선택 타일(semes.com 제품소개 스타일) ----------
   "사진 위에 글씨"로 된 큰 카테고리 카드 3개(반도체/디스플레이/수소) — 클릭하면
   해당 제품군 섹션으로 스무스 스크롤. 사업분야 각 섹션에 이미 쓰던 photo-band용
   사진을 재사용해 톤을 통일했다. */
.category-select { padding: var(--space-5) 0 var(--space-6); }
.category-select__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.category-select__tile {
  position: relative; display: block; min-height: 340px;
  overflow: hidden; color: #fff; border-radius: var(--radius);
}
.category-select__tile__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 700ms ease-in-out;
}
.category-select__tile:hover .category-select__tile__bg { transform: scale(1.08); }
.category-select__tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,12,0.1) 0%, rgba(10,10,12,0.7) 100%);
  transition: background var(--transition);
}
.category-select__tile:hover::after { background: linear-gradient(180deg, rgba(10,10,12,0.15) 0%, rgba(10,10,12,0.8) 100%); }
.category-select__body {
  position: relative; z-index: 2; height: 100%; min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4);
}
.category-select__eyebrow { font-size: 13.8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.category-select__label {
  font-family: var(--font-display);
  font-size: 28.1px; font-weight: 700; letter-spacing: 0.3px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.category-select__arrow {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 15px; color: rgba(255,255,255,0.85); opacity: 0; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}
.category-select__tile:hover .category-select__arrow { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .category-select__grid { grid-template-columns: 1fr; }
  .category-select__tile, .category-select__body { min-height: 220px; }
}

/* ---------- 카테고리 필터 탭(사업분야 페이지, semes.com 제품 필터 느낌) ---------- */
.category-tabs {
  position: sticky; top: 76px; z-index: 50;
  background: rgba(255,255,255,0.97); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.category-tabs__inner { display: flex; gap: var(--space-4); padding: 16px 0; }
.category-tabs a { font-size: 16.7px; font-weight: 600; color: var(--color-text-muted); padding: 6px 2px; }
.category-tabs a:hover { color: var(--color-charcoal); }
.category-tabs a.is-current { color: var(--color-brand); }
@media (max-width: 600px) {
  .category-tabs__inner { gap: var(--space-3); overflow-x: auto; }
  .category-tabs a { white-space: nowrap; }
}

/* ---------- 인재상 등 원형 오버랩 카드(semes.com "인재상" 스타일) ---------- */
.people-circles { display: flex; justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.people-circle {
  width: 270px; height: 270px; border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-3); margin-left: -34px;
  transition: background var(--transition), transform var(--transition);
}
.people-circle:first-child { margin-left: 0; }
.people-circle:hover { background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.1); transform: translateY(-6px); }
.people-circle__icon { width: 40px; height: 40px; color: var(--color-charcoal); margin-bottom: 14px; }
.people-circle__num { font-size: 13.8px; font-weight: 700; letter-spacing: 2px; color: var(--color-brand); margin-bottom: 6px; }
.people-circle__title { font-size: 20.7px; font-weight: 700; color: var(--color-charcoal); }
.people-circle__divider { width: 20px; height: 2px; background: var(--color-accent-line); margin: 12px 0; }
.people-circle__desc { font-size: 14.4px; color: var(--color-text-muted); line-height: 1.7; max-width: 200px; }
@media (max-width: 960px) {
  .people-circle { width: 220px; height: 220px; margin-left: -22px; }
}
@media (max-width: 700px) {
  .people-circles { flex-direction: column; align-items: center; }
  .people-circle { margin-left: 0 !important; margin-top: -30px; width: 240px; height: 240px; }
  .people-circle:first-child { margin-top: 0; }
}

/* ---------- 인재양성 체계 배너(컨테이너 안 중앙 정렬 — 다른 섹션과 통일) ---------- */
.talent-figure { margin-top: var(--space-5); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(20,24,28,0.12); aspect-ratio: 21 / 8; }
.talent-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(.16,1,.3,1); }
.talent-figure:hover img { transform: scale(1.04); }
.reveal-init .talent-figure { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-init.is-visible .talent-figure { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-init .talent-figure { opacity: 1; transform: none; transition: none; } }
@media (max-width: 720px) { .talent-figure { aspect-ratio: 16 / 9; } }
/* 3대 육성 영역 — 아이콘 카드(사진 대신, 인재상 원형 카드와 톤 통일) */
.develop-card { transition: transform var(--transition), box-shadow var(--transition); }
.develop-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(20,24,28,0.09); }
.develop-card .card__body { text-align: center; padding: 46px 30px; display: flex; flex-direction: column; align-items: center; }
.develop-card__icon { width: 52px; height: 52px; color: var(--color-brand); margin-bottom: 18px; transition: transform var(--transition); }
.develop-card:hover .develop-card__icon { transform: scale(1.08); }
.develop-card .card__title { margin-top: 2px; }
.develop-card__divider { width: 28px; height: 2px; background: var(--color-brand); margin: 14px auto; }
.develop-card .card__desc { margin-top: 2px; }

/* 텍스트+이미지 2단(컨테이너 내 — 풀블리드 split-band 대체, rnd-area와 동일 톤) */
.info-2col { align-items: center; gap: var(--space-5); }
.info-figure { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(20,24,28,0.12); }
.info-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.info-2col:hover .info-figure img { transform: scale(1.04); }
.reveal-init .info-figure { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-init .info-2col > div:not(.info-figure) { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1) .1s, transform .7s cubic-bezier(.16,1,.3,1) .1s; }
.reveal-init.is-visible .info-figure, .reveal-init.is-visible .info-2col > div:not(.info-figure) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-init .info-figure, .reveal-init .info-2col > div:not(.info-figure) { opacity: 1; transform: none; transition: none; } }

/* ---------- 정보 밴드(semes.com "인재양성 체계"류 — 사진 없이도 꽉 찬 느낌의 강조 섹션) ---------- */
.info-band { background: var(--color-charcoal); color: #fff; padding: var(--space-6) 0; }
/* charcoal 배경 위에서 기본 .btn(charcoal 글자/테두리)은 안 보이므로 밝은 고스트 버튼으로 강제.
   info-band가 (같은 charcoal) 푸터 바로 위에 올 때 버튼이 사라져 보이던 버그 수정. */
.info-band .btn { border-color: rgba(255,255,255,0.65); color: #fff; background: transparent; }
.info-band .btn:hover { background: #fff; color: var(--color-charcoal); border-color: #fff; }
/* info-band(검정)가 푸터(검정) 바로 위에 오면 경계가 사라져 하나의 검정 덩어리로 보임 → 얇은 구분선 */
.info-band + .site-footer { border-top: 1px solid rgba(255,255,255,0.1); }
/* 서브메뉴 앵커 대상인 info-band/cta-band도 section[id]와 동일하게 화면을 거의 채우도록 */
.info-band[id] { min-height: calc(100vh - 96px); display: flex; align-items: center; }
.info-band[id] .container { width: 100%; }
.cta-band[id] { min-height: calc(100vh - 96px); }
.info-band__eyebrow {
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5);
  position: relative; padding-bottom: 14px; margin-bottom: 14px;
}
.info-band__eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px;
  background: rgba(255,255,255,0.35);
}
.info-band__title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-bottom: var(--space-3); }
.info-band__desc { font-size: 17.2px; line-height: 1.95; color: rgba(255,255,255,0.78); max-width: none; }

/* ---------- 좌우 분할 밴드(semes.com "보상체계"류 — 자간 넓은 큰 타이틀 + 대형 사진) ---------- */
.split-band { display: flex; min-height: 64vh; }
.split-band__text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-4); }
.split-band__title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: 0.35em; color: var(--color-charcoal); }
.split-band__desc { margin-top: var(--space-4); font-size: 17.8px; line-height: 1.9; color: var(--color-text-muted); max-width: 420px; }
.split-band__media { flex: 1; background-size: cover; background-position: center; min-height: 360px; }
@media (max-width: 900px) {
  .split-band { flex-direction: column; min-height: auto; }
  .split-band__media { min-height: 260px; }
  .split-band__title { letter-spacing: 0.2em; }
}

/* ---------- 연락처/문의 밴드(고객센터 문의·신고 채널을 이미지와 함께 크게 노출) ----------
   기존에 페이지 하단에 <p> 한 줄로 "문의: email"이 덩그러니 놓여 있던 것을 대체한다.
   한쪽 대형 사진 + 반대쪽 대형 연락처(라벨·제목·설명·이메일/전화·안내문). 900px↓에서 세로 스택.
   .contact-band--reverse 로 사진을 우측에 배치. 협력사서비스/제품지원/보안신고/문의(윤리신고)에서 재사용. */
.contact-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 55px -32px rgba(12,18,32,0.5);
}
.contact-band__media { min-height: 360px; background-size: cover; background-position: center; }
.contact-band--reverse .contact-band__media { order: 2; }
.contact-band__body {
  padding: clamp(30px, 4vw, 60px);
  display: flex; flex-direction: column; justify-content: center;
}
.contact-band__eyebrow {
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-brand); font-weight: 700; margin-bottom: 14px;
}
.contact-band__title {
  font-size: clamp(23px, 2.6vw, 31px); font-weight: 700;
  color: var(--color-charcoal); line-height: 1.4;
}
.contact-band__desc {
  margin-top: var(--space-3); font-size: 16.5px; line-height: 1.9;
  color: var(--color-text-muted);
}
.contact-band__list {
  margin-top: var(--space-4);
  display: flex; flex-direction: column; gap: 16px;
}
.contact-band__row { display: flex; align-items: center; gap: 16px; }
.contact-band__icon {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(0,90,180,0.08); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
}
.contact-band__icon svg { width: 23px; height: 23px; }
.contact-band__row-label { font-size: 13px; color: var(--color-text-muted); letter-spacing: 0.4px; margin-bottom: 3px; }
.contact-band__row-value {
  font-size: clamp(20px, 2.1vw, 25px); font-weight: 700; color: var(--color-charcoal);
  line-height: 1.25; font-variant-numeric: tabular-nums;
}
.contact-band__row-value a { color: inherit; text-decoration: none; }
.contact-band__row-value a:hover { color: var(--color-brand); }
.contact-band__note {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 14.8px; line-height: 1.85; color: var(--color-text-muted);
}
.contact-band__note strong { color: var(--color-charcoal); font-weight: 700; }
@media (max-width: 900px) {
  .contact-band { grid-template-columns: 1fr; margin-top: var(--space-5); }
  .contact-band__media { min-height: 240px; order: 0 !important; }
}

/* ---------- 요청/신고 접수 밴드(테마 이미지 + 접수 폼 좌우) ----------
   고객센터의 제품지원/협력사서비스/보안신고를 inquiry.asp처럼 "폼으로 접수받는" 형식으로 통일.
   좌측 테마 사진 + 우측 접수 폼. 900px↓ 세로 스택(사진 위). 폼 필드는 전역 .form-row 재사용. */
.request-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 55px -32px rgba(12,18,32,0.5);
}
.request-band__media { background-size: cover; background-position: center; min-height: 420px; }
.request-band--reverse .request-band__media { order: 2; }
.request-band__form { padding: clamp(28px, 3.5vw, 48px); }
.request-band__form .form-row { margin-bottom: 18px; }
.request-band__form .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.request-band__req { color: var(--color-brand); }
.request-band__consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.6; color: var(--color-text-muted);
  margin: 6px 0 20px;
}
.request-band__consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.request-band__consent a { color: var(--color-brand); }
.request-band__note {
  margin-top: 18px; padding: 14px 16px; border-radius: 10px;
  background: rgba(0,90,180,0.05); border: 1px solid rgba(0,90,180,0.12);
  font-size: 13.5px; line-height: 1.7; color: var(--color-text-muted);
}
.request-band__note strong { color: var(--color-charcoal); }
.request-alert { padding: 15px 18px; border-radius: 8px; font-size: 14.5px; margin-bottom: 20px; }
.request-alert--ok { background: #eef7ee; border: 1px solid #cfe8cf; color: #2c662d; }
.request-alert--err { background: #fdecea; border: 1px solid #f5c6c0; color: #b0342a; }
@media (max-width: 900px) {
  .request-band { grid-template-columns: 1fr; }
  .request-band__media { min-height: 220px; order: 0 !important; }
  .request-band__form .form-grid2 { grid-template-columns: 1fr; }
}

/* ---------- 오시는길 교통안내 리스트 ---------- */
.transit-list { display: flex; flex-direction: column; gap: 20px; margin-top: var(--space-2); }
.transit-item { display: flex; gap: 16px; align-items: flex-start; }
.transit-item__icon {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(0,90,180,0.07); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
}
.transit-item__icon svg { width: 25px; height: 25px; }
.transit-item h4 { font-size: 16.5px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 5px; }
.transit-item p { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.transit-item strong { color: var(--color-charcoal); font-weight: 600; }

/* ---------- 프로세스 플로우 도식(번호 카드 + 화살표, 상생협력 등 재사용) ---------- */
.proc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: var(--space-4); }
.proc-step { position: relative; border: 1px solid var(--color-border); border-top: 3px solid var(--color-brand); border-radius: 12px; padding: 26px 22px; background: #fff; }
.proc-step__num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--color-brand); line-height: 1; margin-bottom: 12px; }
.proc-step__title { font-size: 17px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 8px; }
.proc-step p { font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); }
.proc-step:not(:last-child)::after {
  content: "\2192"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--color-brand); font-size: 20px; font-weight: 700; z-index: 1;
}
@media (max-width: 760px) { .proc-flow { grid-template-columns: 1fr 1fr; } .proc-step:not(:last-child)::after { display: none; } }
@media (max-width: 460px) { .proc-flow { grid-template-columns: 1fr; } }

/* ---------- 히어로/밴드 커버 "타일 블리드" 리빌 (조각이 번지듯 흩어지며 사진이 드러남) ----------
   앞서 넣은 단일 베일 디졸브가 "밋밋하다"는 피드백 → 조각(타일) 그리드가 대각선 웨이브로
   opacity+scale+blur 되며 "퍼지듯/번지듯" 흩어져 사진을 드러내는 엣지있는 리빌로 교체.
     - .hero            : 로드 시 1회 블리드(입장) + 스크롤 시 배경 패럴랙스(.hero__pfx).
     - .photo-band/.cta-band : 스크롤로 뷰포트에 들어오면 블리드, 벗어나면 다시 덮임(위·아래 스크롤 모두 반응).
   마크업/그리드/타일지연(--d)은 main.js가 런타임 주입한다. 초기 숨김(타일 커버)은 JS가 붙인
   html.hero-anim 에서만 유효하고, prefers-reduced-motion 사용자는 커버 자체를 숨겨 사진 즉시 노출. */
.tile-cover {
  position: absolute; inset: 0; z-index: 1;
  display: grid;
  pointer-events: none;
}
.tile-cover__piece {
  background: var(--color-charcoal);
  opacity: 1;
  transform: scale(1.02);
  filter: blur(0);
  transition: opacity 640ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1), filter 640ms ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}
.tile-cover.is-open .tile-cover__piece {
  opacity: 0;
  transform: scale(1.45);
  filter: blur(12px);
}

/* 히어로 배경 패럴랙스 레이어 (스크롤에 따라 main.js가 translateY 갱신, scale은 오버스캔 여유) */
.hero__bg-layer {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.hero__pfx { will-change: transform; transform: scale(1.16); }

/* 히어로 텍스트 순차 상승 — 초기 숨김은 JS 마커(html.hero-anim)에서만 적용 */
html.hero-anim .hero .hero__content > * { opacity: 0; transform: translateY(28px); }
html.hero-anim .hero.is-revealed .hero__content > * {
  animation: heroRise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.hero-anim .hero.is-revealed .hero__content > *:nth-child(1) { animation-delay: 300ms; }
html.hero-anim .hero.is-revealed .hero__content > *:nth-child(2) { animation-delay: 430ms; }
html.hero-anim .hero.is-revealed .hero__content > *:nth-child(3) { animation-delay: 560ms; }
html.hero-anim .hero.is-revealed .hero__content > *:nth-child(4) { animation-delay: 690ms; }
html.hero-anim .hero.is-revealed .hero__content > *:nth-child(5) { animation-delay: 820ms; }
@keyframes heroRise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tile-cover { display: none; } }

/* ---------- Utility ---------- */
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)}
.text-center{text-align:center} .text-muted{color:var(--color-text-muted)}

/* ---------- 재무정보 막대 그래프(semes.com 스타일) ---------- */
.fin-chart { margin-top: var(--space-4); }
.fin-chart__unit { font-size: 14.4px; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.fin-chart__bars {
  display: flex; align-items: flex-end; gap: var(--space-4);
  height: 260px; padding: 0 var(--space-2);
  border-bottom: 1px solid var(--color-charcoal);
}
.fin-chart__bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.fin-chart__bar-fill {
  width: 100%; max-width: 64px;
  height: var(--h, 10%);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-accent-line);
  border-bottom: none;
  position: relative;
  transition: height 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fin-chart__bar--highlight .fin-chart__bar-fill { background: var(--color-brand); border-color: var(--color-brand); }
.fin-chart__value { font-size: 16.1px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.fin-chart__year { margin-top: var(--space-2); font-size: 15px; color: var(--color-text-muted); }
.fin-chart__legend { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-size: 14.4px; color: var(--color-text-muted); }
.fin-chart__legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.fin-chart__note { margin-top: var(--space-2); font-size: 14.4px; color: var(--color-text-muted); }
/* 스크롤 진입 시 막대가 아래→위로 촤라락 자라남(기존 height 트랜지션 활용) + 값 페이드 */
.reveal-init .fin-chart__bar-fill { height: 0; }
.reveal-init.is-visible .fin-chart__bar-fill { height: var(--h, 10%); }
.reveal-init .fin-chart__value { opacity: 0; transition: opacity .45s ease; }
.reveal-init.is-visible .fin-chart__value { opacity: 1; }
.reveal-init.is-visible .fin-chart__bar:nth-child(1) .fin-chart__bar-fill,
.reveal-init.is-visible .fin-chart__bar:nth-child(1) .fin-chart__value { transition-delay: .10s; }
.reveal-init.is-visible .fin-chart__bar:nth-child(2) .fin-chart__bar-fill,
.reveal-init.is-visible .fin-chart__bar:nth-child(2) .fin-chart__value { transition-delay: .24s; }
.reveal-init.is-visible .fin-chart__bar:nth-child(3) .fin-chart__bar-fill,
.reveal-init.is-visible .fin-chart__bar:nth-child(3) .fin-chart__value { transition-delay: .38s; }
.reveal-init.is-visible .fin-chart__bar:nth-child(4) .fin-chart__bar-fill,
.reveal-init.is-visible .fin-chart__bar:nth-child(4) .fin-chart__value { transition-delay: .52s; }
.reveal-init.is-visible .fin-chart__bar:nth-child(5) .fin-chart__bar-fill,
.reveal-init.is-visible .fin-chart__bar:nth-child(5) .fin-chart__value { transition-delay: .66s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-init .fin-chart__bar-fill { height: var(--h, 10%); }
  .reveal-init .fin-chart__value { opacity: 1; }
}
@media (max-width: 600px) {
  .fin-chart__bars { height: 190px; gap: var(--space-2); }
  .fin-chart__value { font-size: 13.8px; }
}

/* ---------- 오시는길 카카오맵 ---------- */
.contact-map { margin-top: var(--space-5); }
.contact-map__frame { width: 100%; height: 460px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(20,24,28,0.10); }
.contact-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map__actions { margin-top: var(--space-3); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .contact-map__frame { height: 300px; }
}

/* ---------- 이용약관 연도별 드롭박스 ---------- */
.legal-version-select { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.legal-version-select label { font-size: 15.5px; font-weight: 600; color: var(--color-charcoal); }
.legal-version-select select {
  padding: 9px 14px; border: 1px solid var(--color-border); font-size: 15.5px; font-family: inherit;
  border-radius: var(--radius); background: #fff; min-width: 200px;
}
.legal-version { display: none; }
.legal-version.is-active { display: block; }

/* ---------- Legal (개인정보처리방침 등 약관형 페이지) ---------- */
/* 약관·개인정보처리방침·영상정보처리방침: PC에서 과하게 넓어지지 않도록 폭 고정(모바일은 컨테이너 패딩으로 반응형) */
.legal { max-width: 980px; }
.legal h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: 20.7px; font-weight: 700; color: var(--color-charcoal); }
.legal h3:first-child { margin-top: 0; }
.legal p { font-size: 16.7px; line-height: 1.9; color: var(--color-text); }
.legal ol, .legal ul { padding-left: 1.2em; font-size: 16.7px; line-height: 1.9; color: var(--color-text); }
.legal li { margin-bottom: 6px; }
.legal table.board-table { margin: var(--space-2) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-4); }
  .admin-sidebar { display: none; }
}
@media (max-width: 600px) {
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .hero__title { font-size: 34.6px; }
}

/* 기업개요 우측 본사 사진 (corporate-overview.asp, grid--2의 두 번째 칸) */
.overview-photo { align-self: stretch; }
.overview-photo img {
  width: 100%; height: 100%; min-height: 260px; max-height: 380px;
  object-fit: cover; display: block;
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
@media (max-width: 600px) {
  .overview-photo img { min-height: 0; height: auto; }
}

/* 연혁/수상실적 등에서 표 행 간격을 넓혀 여유롭고 세련되게 (연혁 페이지)
   ※ 기존 규칙이 'table.board-table td'(specificity 높음)라, 이기려면 여기도 table. 접두어 필요 */
table.board-table--spacious th,
table.board-table--spacious td { padding-top: 22px; padding-bottom: 22px; font-size: 15.5px; }
table.board-table--spacious td.num, table.board-table--spacious th { color: var(--color-brand); font-weight: 700; }

/* ---------- 제품 사양 / 제품문의 모달 (product-detail.asp) ---------- */
/* 화면 중앙에 떠오르는 센터형 모달 (내부 스크롤) */
.spec-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  visibility: hidden; transition: visibility 0s linear .35s;
}
.spec-modal.is-open { visibility: visible; transition: visibility 0s; }
.spec-modal__backdrop {
  position: absolute; inset: 0; background: rgba(15,17,20,0.55);
  opacity: 0; transition: opacity .35s ease;
}
.spec-modal.is-open .spec-modal__backdrop { opacity: 1; }
.spec-modal__panel {
  position: relative; background: #fff; width: 100%; max-width: 880px;
  max-height: 90vh; overflow-y: auto;
  border-radius: 18px; padding: 40px 40px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.32);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1);
}
.spec-modal.is-open .spec-modal__panel { opacity: 1; transform: none; }
.spec-modal__close {
  position: absolute; top: 14px; right: 20px; z-index: 2;
  background: none; border: none; font-size: 32px; line-height: 1;
  color: var(--color-text-muted); cursor: pointer; transition: color var(--transition);
}
.spec-modal__close:hover { color: var(--color-brand); }
.spec-modal__head { margin-bottom: 8px; }
.spec-modal__title { font-size: 26px; font-weight: 700; margin: 6px 0 10px; color: var(--color-charcoal); }
.spec-modal__summary { color: var(--color-text-muted); font-size: 15px; line-height: 1.7; }
.spec-modal__actions { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .spec-modal__panel { transition: none; }
  .spec-modal__backdrop { transition: none; }
}
@media (max-width: 640px) {
  .spec-modal { padding: 12px; }
  .spec-modal__panel { padding: 30px 18px 28px; border-radius: 14px; max-height: 92vh; }
  .spec-modal__title { font-size: 22px; }
}

/* 제품문의 모달: 스크롤 없이 한 화면에 들어오도록 내부 여백을 촘촘하게 (모달 전용) */
#inquiryModal .spec-modal__panel { padding: 24px 34px 22px; }
#inquiryModal .spec-modal__title { font-size: 22px; margin: 4px 0 6px; }
#inquiryModal .spec-modal__summary { font-size: 14px; line-height: 1.5; }
#inquiryModal .request-band__form .form-row { margin-bottom: 11px; }
#inquiryModal .form-row label { margin-bottom: 4px; }
#inquiryModal .form-row input, #inquiryModal .form-row textarea, #inquiryModal .form-row select { padding: 9px 12px; }
#inquiryModal .request-band__consent { margin-top: 10px; }
#inquiryModal .request-band__note { margin-top: 10px; }

/* 정보보기 모달 v2: 썸네일 헤더 + 사양 타일 그리드 */
.spec-modal__head { display: flex; align-items: center; gap: 26px; margin-bottom: 28px; }
.spec-modal__thumb { flex: 0 0 148px; background: radial-gradient(120% 100% at 50% 42%, #ffffff 0%, #eef0f2 100%); border-radius: 12px; padding: 14px; }
.spec-modal__thumb img { width: 100%; display: block; }
.spec-modal__headtext { min-width: 0; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.spec-item { background: #fff; border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); border-radius: 8px; padding: 20px 22px; transition: transform var(--transition), box-shadow var(--transition); }
.spec-item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(20,24,28,0.09); }
.spec-item--wide { grid-column: 1 / -1; }
.spec-item__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.spec-item__value { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--color-charcoal); line-height: 1.5; }
@media (max-width: 640px) {
  .spec-modal__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .spec-modal__thumb { flex: none; max-width: 150px; }
  .spec-grid { grid-template-columns: 1fr; }
}

/* 사양 인라인 섹션(모달 대체) */
.section.product-specs { min-height: auto; display: block; padding: var(--space-5) 0; }
.product-specs .section__head { margin-bottom: var(--space-4); }
.spec-actions { margin-top: var(--space-4); display: flex; gap: 10px; flex-wrap: wrap; }
.reveal-init .spec-item { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal-init.is-visible .spec-item { opacity: 1; transform: none; }
.reveal-init.is-visible .spec-item:nth-child(1){transition-delay:.04s}
.reveal-init.is-visible .spec-item:nth-child(2){transition-delay:.09s}
.reveal-init.is-visible .spec-item:nth-child(3){transition-delay:.14s}
.reveal-init.is-visible .spec-item:nth-child(4){transition-delay:.19s}
.reveal-init.is-visible .spec-item:nth-child(5){transition-delay:.24s}
.reveal-init.is-visible .spec-item:nth-child(6){transition-delay:.29s}
.reveal-init.is-visible .spec-item:nth-child(7){transition-delay:.34s}
.reveal-init.is-visible .spec-item:nth-child(8){transition-delay:.39s}
.reveal-init.is-visible .spec-item:nth-child(9){transition-delay:.44s}
@media (prefers-reduced-motion: reduce){ .reveal-init .spec-item{opacity:1;transform:none;transition:none} }

/* ---------- R&D 분야별 이미지+사양 레이아웃 (rnd.asp) ---------- */
.rnd-area { align-items: center; gap: var(--space-5); }
.rnd-figure { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(20,24,28,0.12); }
.rnd-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.7s cubic-bezier(.16,1,.3,1); }
.rnd-area:hover .rnd-figure img { transform: scale(1.05); }
.rnd-figure__index { position: absolute; left: 0; bottom: 0; padding: 9px 18px; font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #fff; background: linear-gradient(135deg, var(--color-brand), rgba(0,0,0,0.28)); }
.rnd-area__tag { font-size: 13.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand); font-weight: 700; margin-bottom: 10px; }
.rnd-area__tag::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--color-brand); vertical-align: middle; margin-right: 10px; }
.rnd-area__title { font-size: 32px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 16px; letter-spacing: -0.4px; }
.rnd-area__desc { color: var(--color-text-muted); font-size: 17px; line-height: 1.8; word-break: keep-all; }
.rnd-spec { list-style: none; margin-top: 26px; }
.rnd-spec li { position: relative; padding: 13px 0 13px 22px; border-bottom: 1px solid var(--color-border); font-size: 16px; color: var(--color-text); word-break: keep-all; }
.rnd-spec li:last-child { border-bottom: none; }
.rnd-spec li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; background: var(--color-brand); border-radius: 50%; }
.rnd-spec b { color: var(--color-charcoal); font-weight: 700; }
@media (max-width: 720px) { .rnd-figure { aspect-ratio: 16 / 10; } }
/* 진입: 섹션 리빌(is-visible)에 연동해 이미지·텍스트가 부드럽게 등장 */
.reveal-init .rnd-figure { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-init .rnd-area > div:not(.rnd-figure) { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1) .12s, transform .7s cubic-bezier(.16,1,.3,1) .12s; }
.reveal-init.is-visible .rnd-figure, .reveal-init.is-visible .rnd-area > div:not(.rnd-figure) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-init .rnd-figure, .reveal-init .rnd-area > div:not(.rnd-figure) { opacity: 1; transform: none; transition: none; } }

/* ---------- 패밀리 사이트 (푸터 + IR 게시판) ---------- */
/* 푸터(차콜 배경): 회색 로고를 흰색으로 반전, 은은하게 두고 hover 시 또렷하게 */
.site-footer__family {
  display: flex; align-items: center; flex-wrap: wrap; gap: 28px;
  margin-top: auto; padding-top: 8px; /* auto: 우측 컬럼 바닥으로 밀어 빈 공간 채움 */
}
.site-footer__family-label { font-size: 12px; letter-spacing: 1.6px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.site-footer__family a { display: inline-flex; align-items: center; }
.site-footer__family img {
  height: 24px; width: auto; max-width: 116px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.5;
  transition: opacity var(--transition);
}
.site-footer__family a:hover img { opacity: 0.95; }

/* IR 게시판(흰 배경): 회색 로고를 흰 카드에 담고 hover 시 또렷하게 */
.family-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.family-card {
  flex: 1; min-width: 220px; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 34px 24px; display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.family-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.08); transform: translateY(-3px); }
.family-card img { max-width: 100%; max-height: 46px; width: auto; opacity: 0.78; transition: opacity var(--transition); }
.family-card:hover img { opacity: 1; }
@media (max-width: 600px) { .site-footer__family { gap: 20px; } }

/* ---------- 문의 유형별 역동적 이미지 타일 (고객센터 하단) ---------- */
.inquiry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 980px) { .inquiry-grid { grid-template-columns: repeat(4, 1fr); } }
.inquiry-tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 340px; display: flex; align-items: flex-end; color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.inquiry-tile::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.inquiry-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,14,17,0.92) 0%, rgba(12,14,17,0.45) 52%, rgba(12,14,17,0.12) 100%);
}
.inquiry-tile:hover::before { transform: scale(1.07); }
.inquiry-tile__body { position: relative; z-index: 2; padding: 28px 22px; width: 100%; }
.inquiry-tile__eyebrow { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #ff6b6b; font-weight: 700; }
.inquiry-tile__title { font-size: 21px; font-weight: 700; margin: 8px 0 10px; }
.inquiry-tile__desc { font-size: 13.8px; line-height: 1.62; color: rgba(255,255,255,0.82); }
.inquiry-tile__contact { display: block; font-size: 12.5px; color: rgba(255,255,255,0.62); margin-top: 14px; }
.inquiry-tile__arrow {
  display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: #fff;
  transition: transform var(--transition);
}
.inquiry-tile:hover .inquiry-tile__arrow { transform: translateX(4px); color: #ff9d9d; }