/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: #fff;
  color: #000;
  min-width: 1920px;
  overflow-x: auto;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: none; }

.blue { color: #00c2ff; }

/* ═══════════════════════════════════════════
   COMMON FRAME
   ═══════════════════════════════════════════ */
.frame {
  position: relative;
  width: 1920px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL (sections that fade in)
   ═══════════════════════════════════════════ */
.reveal-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   Frame 62 — Hero
   ═══════════════════════════════════════════ */
.f62 {
  height: 950px;
  background: #020810;
}

/* video (876:1017 "0526 2")  0,0  1920×1080 */
#hero-video {
  position: absolute;
  left: 0; top: 0;
  width: 1920px; height: 1080px;
  object-fit: cover;
  z-index: 0;
}

/* 영상 없을 때 폴백 그라디언트 */
.f62::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 700px at 68% 50%, rgba(0,80,160,.5) 0%, transparent 65%),
    radial-gradient(ellipse 300px 300px at 70% 50%, rgba(0,194,255,.2) 0%, transparent 60%),
    linear-gradient(150deg, #010a1a 0%, #020d20 40%, #01080f 100%);
  z-index: 0;
  pointer-events: none;
}

/* 로고  left:86  top:42  173×65 */
.hero-logo {
  position: absolute;
  left: 86px; top: 42px;
  width: 173px; height: 65px;
  z-index: 2;
}
.hero-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left; }

/* 네비  left:827  top:64  gap:100 */
.hero-nav {
  position: absolute;
  left: 827px; top: 64px;
  display: flex;
  align-items: center;
  gap: 100px;
  z-index: 2;
}
.hero-nav a {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: color .2s;
}
.hero-nav a:hover { color: #00c2ff; }

/* 헤드라인  left:124  top:490  78px bold */
.hero-headline {
  position: absolute;
  left: 124px; top: 490px;
  font-size: 78px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  letter-spacing: -.02em;
}

/* 서브텍스트  left:124  top:789  24px medium */
.hero-sub {
  position: absolute;
  left: 124px; top: 789px;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  white-space: nowrap;
  z-index: 2;
}

/* ═══════════════════════════════════════════
   Frame 68 — About
   ═══════════════════════════════════════════ */
.f68 {
  height: 950px;
  background: #fff;
}

/* text  center:960  top:354  68px regular */
.f68-text {
  position: absolute;
  top: 354px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 68px;
  font-weight: 400;
  color: #000;
  line-height: 1.35;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   Frame 93a — PRODUCTS 소개
   ═══════════════════════════════════════════ */
.f93a {
  height: 950px;
  background: #111;
}

/* 배경 image60  left:-29  top:0  1978×1320 */
.f93a-bg1 {
  position: absolute;
  left: -29px; top: 0;
  width: 1978px; height: 1320px;
  overflow: hidden;
}
.f93a-bg1 img { width: 100%; height: 100%; object-fit: cover; }

/* 배경 image25  left:0  top:-65  1920×1081 */
.f93a-bg2 {
  position: absolute;
  left: 0; top: -65px;
  width: 1920px; height: 1081px;
  overflow: hidden;
}
.f93a-bg2 img { width: 100%; height: 100%; object-fit: cover; }

/* PRODUCTS  left:123  top:88  78px bold white */
.f93a-title {
  position: absolute;
  left: 123px; top: 88px;
  font-size: 78px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  z-index: 1;
  letter-spacing: -.02em;
}

/* 서브  left:123  top:204  24px medium */
.f93a-sub {
  position: absolute;
  left: 123px; top: 204px;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   Frame 72 — Products Grid
   ═══════════════════════════════════════════ */
.f72 {
  height: 2620px;
  background: #fff;
}

/* 각 Row  1920 × 875 */
.prow {
  display: flex;
  width: 1920px;
  height: 875px;
  position: relative;
}

/* 각 열  960 × 875 */
.pcol {
  position: relative;
  width: 960px;
  height: 875px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 텍스트 열 */
.pcol-text {
  background: #fff;
  /* Override transform so absolutely-positioned children show correctly */
  transform: none !important;
}
.pcol-text.visible { opacity: 1 !important; transform: none !important; }

/* 카테고리  32px medium #00c2ff */
.p-cat {
  position: absolute;
  font-size: 32px;
  font-weight: 500;
  color: #00c2ff;
  white-space: nowrap;
  line-height: 1;
}

/* 제품명  48px bold */
.p-name {
  position: absolute;
  font-size: 48px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  line-height: 1;
}

/* 설명  20px medium center  (-50% from left) */
.p-desc {
  position: absolute;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
}

/* 이미지 열 */
.pcol-img {
  background: #fff;
}

/* 제품 이미지 (absolute, 위치는 인라인으로 지정) */
.pimg {
  position: absolute;
}

/* ═══════════════════════════════════════════
   Frame 82 — R&D
   ═══════════════════════════════════════════ */
.f82 {
  height: 840px;
  background: #fff;
  position: relative;
}

.f82-text {
  position: absolute;
  top: 305px; /* 위쪽 여백 305px 고정 */
  left: 50%;  /* 1920px 기준 완벽한 중앙 정렬을 위해 50% 사용 */
  transform: translateX(-50%); /* 왼쪽으로 자신의 크기 절반만큼 당겨서 중앙 맞춤 */
  text-align: center;
  font-size: 54px;
  font-weight: 500;
  color: #000;
  line-height: 1.4; /* 두 번째 사진의 예쁜 줄 간격을 만드는 핵심 수치 */
  width: 100%; /* 텍스트가 잘리거나 밀리지 않도록 방지 */
}

/* ═══════════════════════════════════════════
   Frame 93b — MERIT
   ═══════════════════════════════════════════ */
.f93b {
  height: 1447px;
  background: #fff;
}

/* MERIT  left:123  top:88  72px bold */
.merit-title {
  position: absolute;
  left: 123px; top: 88px;
  font-size: 72px;
  font-weight: 700;
  color: #000;
  line-height: 1;
  letter-spacing: -.02em;
}

/* 서브  left:123  top:204  32px medium */
.merit-sub {
  position: absolute;
  left: 123px; top: 204px;
  font-size: 32px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
}

/* ── 캐러셀 뷰포트 (3카드, section이 overflow:hidden 담당) ── */
.merit-vp {
  position: absolute;
  left: 0; top: 405px;
  width: 1920px; height: 725px;
  overflow: visible;
}

/* 카드 컨테이너 */
.mc-card {
  position: absolute;
  left: 0; top: 0;
  width: 1920px; height: 725px;
  pointer-events: none;
}

/* 이미지 박스 — base: main 위치 (left:237, top:0, 1000×580) */
.mc-img {
  position: absolute;
  left: 237px; top: 0;
  width: 1000px; height: 580px;
  overflow: hidden;
  background: #000;
  transform-origin: top left;
  will-change: transform, opacity;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.45s ease;
}
.mc-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 스탯 — base: main 위치 (left:237, top:641) */
.mc-stat {
  position: absolute;
  left: 237px; top: 641px;
  font-size: 28px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  white-space: nowrap;
  transform-origin: top left;
  will-change: transform, opacity;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.45s ease;
}
.mstat-num { font-weight: 700; }

/* GST 아이콘  left:1127  top:503  158×158 */
.merit-icon {
  position: absolute;
  left: 1127px; top: 503px;
  width: 158px; height: 158px;
  z-index: 4;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.merit-icon:hover { transform: scale(1.07); }
.merit-icon img { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════
   EXPAND WRAPPER — ESG & Frame 87
   sticky scroll-driven small→large animation
   ═══════════════════════════════════════════ */

/* wrapper: 원본 두 프레임 합산 높이 (896+878=1774) */
.expand-wrapper {
  position: relative;
  width: 1920px;
  /* 1774px = ESG_Small(896) + ESG_Large(878) */
  height: 1774px;
  background: #fff;
}

/* sticky: 시각적 컨텐트를 viewport에 고정 */
.expand-sticky {
  position: sticky;
  top: 0;
  height: var(--expand-h, 896px);
  width: 1920px;
  overflow: hidden;
  background: #fff;
}

/* expand-box: 초기 small 상태 → JS가 커지게 */
.expand-box {
  position: absolute;
  width: 1570px;
  height: 570px;
  top: 163px;
  left: 175px;
  overflow: hidden;
  will-change: width, height, top, left;
}

/* 배경 이미지 래퍼 */
.eb-imgwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.eb-imgwrap img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* image29 레이어는 초기에 숨김 → JS가 opacity 조절 */
.eb-img29 {
  opacity: 0;
  transition: opacity .4s;
}

/* 어두운 오버레이 */
.eb-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.3);
  transition: background .4s;
}

/* ── Small 텍스트 (중앙 배치) ── */
.eb-content {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.eb-small-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: opacity .5s;
}

/* heading: top:237 (within box) */
.eb-sm-heading {
  position: absolute;
  top: 237px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-align: center;
}

/* sub: top:315 */
.eb-sm-sub {
  position: absolute;
  top: 315px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  text-align: center;
}

/* ── Large 텍스트 (left:180 배치) ── */
.eb-large-content {
  opacity: 0;
  transition: opacity .5s;
}

/* heading: left:180  top:364  40px bold white */
.eb-lg-heading {
  position: absolute;
  left: 180px; top: 364px;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  white-space: nowrap;
}

/* link: left:180  top:676  16px medium white */
.eb-lg-link {
  position: absolute;
  left: 180px; top: 676px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.eb-lg-link img { width: 14px; height: 12px; }

/* ═══════════════════════════════════════════
   Frame 94 — Careers / IR
   ═══════════════════════════════════════════ */
.f94 {
  height: 932px;
  background: #989898;
}

/* 배경 이미지  left:-105  top:-162  2078×1169 */
.f94-bg {
  position: absolute;
  left: -105px; top: -162px;
  width: 2078px; height: 1169px;
}
.f94-bg img { width: 100%; height: 100%; object-fit: cover; }
.f94-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.2);
}

/* 카드 컨테이너  left:247  top:142  flex gap:98 items-end */
.f94-cards {
  position: absolute;
  left: 247px; top: 142px;
  display: flex;
  align-items: flex-end;
  gap: 98px;
}

/* ── 주가정보 카드  568.28×648  rounded:23.678 ── */
.stock-card {
  position: relative;
  width: 568.28px;
  height: 648px;
  background: rgba(0,0,0,.6);
  border-radius: 23.678px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 주가정보  left:44.99  top:38.67  28.414px bold */
.sc-title {
  position: absolute;
  left: 44.99px; top: 38.67px;
  font-size: 28.414px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* KOSDAQ  left:44.99  top:79.72  18.943px medium */
.sc-ticker {
  position: absolute;
  left: 44.99px; top: 79.72px;
  font-size: 18.943px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.sc-rule {
  position: absolute;
  left: 44.99px; top: 265.2px;
  width: 471.99px; height: 1px;
  background-color: rgba(255, 255, 255, 0.4); /* 반투명한 흰색 선 */
}

/* 현재가 라벨  left:45.78  top:157.07  18.943px */
.sc-lbl {
  position: absolute;
  left: 45.78px; top: 157.07px;
  font-size: 18.943px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

/* 현재가  left:44.99  top:193.37 */
.sc-price {
  position: absolute;
  left: 44.99px; top: 193.37px;
  line-height: 1;
}
.sc-price-num { font-size: 56.828px; font-weight: 500; color: #fff; }
.sc-price-unit { font-size: 31.571px; font-weight: 500; color: #fff; margin-left: 2px; }

/* 등락  left:44.99  top:280.19  25.257px red */
.sc-change {
  position: absolute;
  left: 44.99px; top: 280.19px;
  display: flex;
  align-items: center;
  gap: 11.84px;
  font-size: 25.257px;
  color: red;
  white-space: nowrap;
}
.sc-arrow { font-weight: 700; }

/* 날짜  left:44.99  top:334.66  18.943px */
.sc-date {
  position: absolute;
  left: 44.99px; top: 334.66px;
  font-size: 18.943px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

/* 세부 행  left:44.99  top:423.84~ */
.sc-rows {
  position: absolute;
  left: 44.99px; top: 423.84px;
  width: 471.99px;
  display: flex;
  flex-direction: column;
  gap: 9.47px;
}
.sc-row {
  display: flex;
  justify-content: space-between;
  font-size: 18.943px;
  color: #fff;
  white-space: nowrap;
  padding-bottom: .79px;
}
.sc-row span:first-child { font-weight: 500; }
.sc-row span:last-child  { font-weight: 400; }
.sc-rowline { 
  height: 1px; 
  background-color: rgba(255, 255, 255, 0.15); /* 조금 더 투명한 흰색 선 */
}

/* IR 자세히보기  right:45  bottom:30 */
.sc-ir {
  position: absolute;
  right: 45px; bottom: 30px;
  display: flex;
  align-items: center;
  gap: 5.5px;
  font-size: 12.629px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.sc-ir svg { 
  width: 14px; 
  height: 14px; 
}

/* ── CONTACT GST 카드  760×440  rounded:10 ── */
.contact-card {
  position: relative;
  width: 760px;
  height: 440px;
  flex-shrink: 0;
}

/* 블러 배경 */
.cc-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  border-radius: 10px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* CONTACT GST  ml:61  mt:263 (=top:263)  54px bold */
.cc-title {
  position: absolute;
  left: 61px; top: 263px;
  font-size: 54px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  z-index: 1;
  letter-spacing: -.01em;
}

/* 서브  left:61  top:352  16px medium */
.cc-sub {
  position: absolute;
  left: 61px; top: 352px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  z-index: 1;
}

/* 화살표  left:639  top:273  52×44 */
.cc-arrow {
  position: absolute;
  left: 639px; top: 273px;
  width: 52px; height: 44px;
  z-index: 1;
}
.cc-arrow img { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════
   Frame 92 — Footer  (피그마 절대좌표 그대로)
   ═══════════════════════════════════════════ */
.f92 {
  height: 280px;
  background: #000;
}

/* 구분선  left:253  top:54  w:1414 */
.footer-rule {
  position: absolute;
  left: 253px; top: 54px;
  width: 1414px; height: 1px;
  background-color: rgba(255, 255, 255, 0.2); /* 반투명한 흰색 선 */
}

/* GST  left:253  top:99  14px medium */
.fi-company {
  position: absolute;
  left: 253px; top: 99px;
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap;
}
/* 주소  left:253  top:142 */
.fi-addr {
  position: absolute;
  left: 253px; top: 142px;
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap;
}
/* TEL  left:253  top:165 */
.fi-tel {
  position: absolute;
  left: 253px; top: 165px;
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap;
}
/* FAX  left:417  top:165 */
.fi-fax {
  position: absolute;
  left: 417px; top: 165px;
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap;
}
/* Copyright  left:253  top:208 */
.fi-copy {
  position: absolute;
  left: 253px; top: 208px;
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap;
}
/* 로고  left:1494  top:160  173×65 */
.footer-logo {
  position: absolute;
  left: 1494px; top: 160px;
  width: 173px; height: 65px;
}
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }