@charset "utf-8";

:root {
  --color-navy: #151f41;
  --color-point: #005fa3;
  --color-point-dark: #004c82;
  --color-orange: #ee7800;
  --color-text: #000000;
  --color-text-muted: #6a6e73;
  --color-border: #dcddde;
  --color-surface: #f6f6f6;
  --color-white: #ffffff;
  --color-black: #000000;
  --radius-pill: 1000px;
  --font-base: "Pretendard", "Malgun Gothic", dotum, sans-serif;
  --fs-body: 16px;
  --fs-nav: 20px;
  --ls-base: -0.03em;
  --header-height: 86px;
  --header-progress: 0;
}

html { overflow-y: scroll; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: var(--ls-base);
  background: var(--color-white);
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, ol, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
legend { position: absolute; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
label, input, button, select, textarea, img { vertical-align: middle; font-size: 1em; }
input, button, select, textarea { font-family: var(--font-base); }
button, input[type="submit"] { cursor: pointer; }
p { margin: 0; word-break: keep-all; }
hr { display: none; }
a { color: inherit; text-decoration: none; }
*, *::before, *::after { box-sizing: border-box; }

.sound_only, .msg_sound_only {
  display: inline-block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  border: 0 !important;
  overflow: hidden !important;
}
#hd_login_msg { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden; }

#skip_to_container a {
  z-index: 100000;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#skip_to_container a:focus,
#skip_to_container a:active {
  width: 100%;
  height: 64px;
  background: #21272e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 64px;
}

.pc-only { display: block !important; }
.mobile-only { display: none !important; }

#hd_pop { z-index: 1000; position: relative; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops { position: absolute; border: 1px solid #e9e9e9; background: #fff; }
.hd_pops img { max-width: 100%; }
.hd_pops_footer { position: relative; padding: 0; background: #000; color: #fff; text-align: left; }
.hd_pops_footer::after { content: ""; display: block; clear: both; }
.hd_pops_footer button { padding: 10px; border: 0; color: #fff; }
.hd_pops_footer .hd_pops_reject { background: #000; }
.hd_pops_footer .hd_pops_close { position: absolute; top: 0; right: 0; background: #393939; }

#hd_h1, #gnb > h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#wrapper { position: relative; padding-top: var(--header-height); }
#container_wr { width: min(100%, 1420px); margin: 0 auto; }
/* index: 본문 래퍼 1920 (Figma 메인 그리드) */
body:has(main.main-figma:not(.gsmk-history):not(.gsmk-greeting)) #container_wr {
  width: min(100%, 1920px);
  max-width: 1920px;
}
#container_wr::after { content: ""; display: block; clear: both; }
#container { position: relative; width: 100%; min-height: 500px; }
#container_title { display: none; }

/* 메인(index) Figma 기반 섹션 공통 래퍼 */
.main-figma {
  padding-top: 0;
  /* padding-bottom: 180px; */
}
.main-section {
  padding: 0 20px;
}
.main-section + .main-section {
  /* margin-top: 180px; */
}
/* main-information: 위·아래 인접 섹션과 간격 각 100px */
.main-section.main-business + .main-section.main-info,
.main-section.main-info + .main-section {
  margin-top: 40px;
}
.main-section__inner {
  width: min(100%, 1420px);
  margin: 0 auto;
}
.main-eyebrow {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 12px;
  text-transform: uppercase;
  color: var(--color-point);
}

/* 1. 메인 히어로 */
.main-hero {
  position: relative;
  width: 100%;
  min-height: 834px;
  margin-top: calc(-1 * var(--header-height));
  overflow: hidden;
}
.main-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.main-hero__slides {
  position: absolute;
  inset: 0;
}
.main-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .main-hero__slide {
    transition: none;
  }
}
.main-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.main-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.main-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 20px; */
    /* min-height: 834px; */
    padding: 130px 20px 40px;
    text-align: center;
}
.main-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.main-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
    max-width: 860px;
    width: 100%;
    /* min-height: 257px; */
    margin-inline: auto;
}
.main-hero__subtitle-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  text-align: center;
}
.main-hero__subtitle-block .main-hero__subtitle + .main-hero__subtitle {
  margin-top: 0;
}
/* Figma 606:3580 — headline/h2 64px · gap 32px · 본문 20px Medium lh 1.8 */
.main-hero__title {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-white);
}
.main-hero__subtitle {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0;
  color: var(--color-white);
}
@media (min-width: 768px) {
  .main-hero__subtitle {
    white-space: nowrap;
  }
}
.main-hero__nav {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}
.main-hero__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.95;
}
.main-hero__chev:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}
/* Figma 606:3826 — 활성 막대 + 비활성 원 2개 */
.main-hero__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.main-hero__dot {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: width 0.2s ease, border-radius 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.main-hero__dot.is-active {
  width: 28px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-white);
  border-color: var(--color-white);
}
.main-hero__dot:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}
/* Figma 606:3378 — 트랙(반투명) + 위→아래로 차는 솔리드(높이는 JS rAF로 갱신) */
.main-hero__vbar {
  position: relative;
  width: 3px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.main-hero__vbar-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 0%;
  max-height: 100%;
  background: var(--color-white);
  border-radius: 1.5px 1.5px 0 0;
  pointer-events: none;
}

/* 2. 사업 영역 그리드 (Figma: 480×4 = 1920 풀블리드) */
.main-business--full.main-section {
  padding-left: 0;
  padding-right: 0;
}
.main-business__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.main-business__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(470px, auto));
  gap: 0;
}
/* 4열×2행: 1열=제조(상)·측정(하), 2~4열=정밀·조립·기타 각 2행 span */
.main-business__grid > .main-business-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.main-business__grid > .main-business-card:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.main-business__grid > .main-business-card:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.main-business__grid > .main-business-card:nth-child(4) {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.main-business__grid > .main-business-card:nth-child(5) {
  grid-column: 4;
  grid-row: 1 / span 2;
}
.main-business-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--color-white);
}
.main-business-card__bg {
  position: absolute;
  inset: 0;
}
.main-business-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-business-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.main-business-card__overlay--strong {
  background: rgba(0, 0, 0, 0.5);
}
.main-business-card__overlay--blur {
  background: rgba(0, 0, 0, 0.5);
}
.main-business-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 60px;
  text-align: center;
}
.main-business-card--tall .main-business-card__body {
  gap: 10px;
}
.main-business-card__body--bottom {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 12px;
  max-width: 100%;
}
.main-business-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}
.main-business-card__title {
  margin: 0;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
}
.main-business-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  line-height: 0;
}
.main-business-card__eyebrow-en {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}
.main-business-card__eyebrow-mobile {
  display: none;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}
.main-business-card__arrow img {
  display: block;
  width: 40px;
  height: auto;
}
.main-business-card__desc {
  margin: 0;
  max-width: 360px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-white);
}
.main-business-card__chip {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-white);
}

/* 3. Information & Contact (Figma 97:453) */
.main-info {
  position: relative;
  overflow: hidden;
  padding-block: 60px 150px;
}
.main-info__watermark {
  position: absolute;
  left: 50%;
  z-index: 0;
  width: min(1899px, calc(100% - 40px));
  aspect-ratio: 1899 / 302;
  pointer-events: none;
  transform: translateX(-50%);
}
@media (min-width: 1200px) {
  .main-info__watermark {
    top: 500px;
  }
}
@media (max-width: 1199px) {
  .main-info__watermark {
    top: min(380px, 52%);
  }
}
@media (max-width: 767px) {
  .main-info__watermark {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 140px;
    max-height: 140px;
    aspect-ratio: auto;
    transform: translateX(-50%) translateY(25%);
  }
}
.main-info__watermark-layer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  opacity: 0.2;
}
.main-info__watermark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.main-info__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(700px, max-content);
  column-gap: 60px;
  row-gap: 0;
}
.main-info__header {
  display: contents;
}
.main-info__headline {
  display: contents;
}
.main-info .main-eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 24px;
}
.main-info__title {
  margin: 0;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.5;
}
.main-info__desc {
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  width: 100%;
  min-width: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.main-info__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 21px;
  align-items: flex-start;
  justify-content: flex-start;
  grid-column: 2;
  grid-row: 3;
  margin-top: 80px;
  min-height: 0;
  width: max-content;
  max-width: 100%;
}
.main-info__col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 339px;
  max-width: 100%;
}
.main-info__col + .main-info__col {
  width: 384px;
}
.main-info__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main-info__label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.main-info__value {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.5;
}
.main-info__value a {
  color: inherit;
  text-decoration: none;
}
.main-info__value a:hover,
.main-info__value a:focus-visible {
  text-decoration: underline;
}

/* 연락처: 행 단위 정렬(주소 vs 이메일 높이 차이에도 전화·영업 라벨 동일 높이) */
@media (min-width: 1200px) {
  .main-info__grid {
    display: grid;
    grid-template-columns: 339px 384px;
    column-gap: 21px;
    row-gap: 120px;
    align-items: start;
  }
  .main-info__col {
    display: contents;
  }
  .main-info__col:nth-child(1) .main-info__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .main-info__col:nth-child(1) .main-info__item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .main-info__col:nth-child(2) .main-info__item:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .main-info__col:nth-child(2) .main-info__item:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
  }
}

/* 4. ESG 섹션 */
.main-esg {
  position: relative;
  color: var(--color-white);
  padding-inline: 0;
}
.main-esg__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.main-esg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-esg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.main-esg__inner {
  position: relative;
  z-index: 1;
  padding: 140px 20px 220px;
}
.main-esg__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}
.main-esg__title {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.3;
}
.main-esg__desc {
  margin: 0;
  max-width: 942px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
}
.main-esg__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-white);
  background: var(--color-white);
  color: var(--color-point);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.main-esg__chips {
  margin-top: 80px;
  width: 100%;
  line-height: 0;
}
.main-esg__chips picture {
  display: block;
  width: 100%;
}
.main-esg__chips-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 메인 섹션 반응형 튜닝 */
@media (max-width: 1199px) {
  .main-hero {
    min-height: 640px;
  }
  html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.main-hero {
    min-height: calc(100vh + var(--header-height, 86px) + 5px) !important;
    min-height: calc(100dvh + var(--header-height, 86px) + 5px) !important;
    height: calc(100vh + var(--header-height, 86px) + 5px) !important;
    height: calc(100dvh + var(--header-height, 86px) + 5px) !important;
  }
  .main-hero__title {
    font-size: clamp(40px, 4.5vw, 56px);
  }
  .main-business__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(280px, auto));
    grid-auto-rows: unset;
  }
  .main-business__grid > .main-business-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .main-business__grid > .main-business-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .main-business__grid > .main-business-card:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .main-business__grid > .main-business-card:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .main-business__grid > .main-business-card:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .main-business-card__body {
    padding: 40px;
  }
  .main-info__inner {
    display: block;
  }
  .main-info__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .main-info__headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .main-info .main-eyebrow {
    grid-column: auto;
    grid-row: auto;
    margin-bottom: 0;
  }
  .main-info__title {
    grid-column: auto;
    grid-row: auto;
    word-break: keep-all;
  }
  .main-info__desc {
    grid-column: auto;
    grid-row: auto;
    max-width: 100%;
  }
  .main-info__grid {
    grid-column: auto;
    grid-row: auto;
    margin-top: 80px;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* 1차 내부검수 02: 모바일 스크롤 유도 세로 트랙 비표시 */
  .main-hero__vbar {
    display: none !important;
  }
  /* 1차 내부검수 04: 정보 섹션 배경(워터마크) 로고 비표시 */
  .main-info__watermark {
    display: none !important;
  }
  /* 2차 내부검수 06: 섹션 간 간격 모바일 72px */
  .main-section + .main-section {
    margin-top: 72px;
    padding-top: 0px !important;
  }
  .main-section.main-business + .main-section.main-info,
  .main-section.main-info + .main-section {
    margin-top: 72px;
  }
  .main-figma {
    padding-bottom: 120px;
  }
  .main-hero {
    min-height: 520px;
  }
  .main-hero__inner {
    padding: 0 20px;
  }
  .main-hero__title {
    font-size: clamp(28px, 7vw, 40px);
  }
  .main-hero__content {
    gap: 24px;
    max-width: 100%;
  }
  .main-hero__subtitle {
    font-size: 18px;
    white-space: normal;
  }
  .main-business__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(320px, auto);
  }
  .main-business__grid > .main-business-card:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .main-business-card__body {
    padding: 32px 24px;
  }
  .main-business-card__body--bottom {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
  .main-business-card__body--bottom .main-business-card__header {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .main-business-card__body--bottom .main-business-card__cta {
    justify-content: center;
    width: auto;
  }
  .main-business-card__body--bottom .main-business-card__chip {
    display: none;
  }
  .main-business-card__body--bottom .main-business-card__desc {
    display: none;
  }
  .main-business-card__body--bottom .main-business-card__eyebrow-mobile {
    display: inline;
  }
  .main-business-card__body--bottom .main-business-card__eyebrow-mobile,
  .main-business-card__body--bottom .main-business-card__eyebrow-en {
    white-space: normal;
    text-align: center;
  }
  .main-business-card__title {
    font-size: 32px;
  }
  .main-info__grid {
    flex-direction: column;
    gap: 60px;
    justify-content: flex-start;
  }
  .main-info__col,
  .main-info__col + .main-info__col {
    width: 100%;
  }
  .main-info__col {
    gap: 60px;
  }
  .main-info {
    padding-block: 60px;
  }
  .main-esg__inner {
    padding: 80px 20px 80px;
    height: auto !important;
  }
  .main-esg__title {
    font-size: 36px;
  }
  .main-esg__chips {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 120px;
  }
}

@media (max-width: 767px) {
  .main-esg__chips {
    margin-top: 40px;
  }
  .main-esg__chips picture {
    width: min(74%, 280px);
    margin-inline: auto;
  }
}

/* 서브 공통 히어로 (Figma 상단 배너 600px, CMN_HeroTitle) */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-surface);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 600px;
  padding: calc(var(--header-height) + 24px) 20px 40px;
  box-sizing: border-box;
  pointer-events: none;
}
.page-hero__title {
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.page-hero__subtitle {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1025px) {
  .page-hero {
    margin-top: calc(-1 * var(--header-height));
  }
  .page-hero__inner {
    opacity: calc(1 - var(--header-progress));
    transform: translateY(calc(-12px * var(--header-progress)));
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
}

/* Header */
#hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255, 255, 255, var(--header-progress));
  border-bottom: 1px solid rgba(220, 221, 222, var(--header-progress));
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#hd_wrapper {
  width: min(100%, 1420px);
  margin: 0 auto;
  min-height: var(--header-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
#logo {
  flex: 0 0 auto;
  align-self: center;
}
#logo a {
  position: relative;
  display: block;
  width: 172px;
  height: 28px;
  flex-shrink: 0;
  overflow: hidden;
}
#logo img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 28px;
  max-width: 172px;
  max-height: 28px;
  object-fit: contain;
}
#logo .logo-default { opacity: calc(1 - var(--header-progress)); }
#logo .logo-scroll { opacity: var(--header-progress); }
#logo .logo-default, #logo .logo-scroll { transition: opacity 0.16s ease; }

#gnb {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
/* responsive.css가 width:100%를 주므로, 내부 메뉴는 래퍼에서 우측 정렬 */
#gnb .gnb_wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#gnb #gnb_1dul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 60px;
  margin-left: auto;
}
#gnb .gnb_1dli { position: relative; }
.gnb_1da {
  display: inline-flex;
  align-items: center;
  min-height: 86px;
  font-size: var(--fs-nav);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgb(
    calc(255 * (1 - var(--header-progress))),
    calc(255 * (1 - var(--header-progress))),
    calc(255 * (1 - var(--header-progress)))
  );
  transition: color 0.2s ease;
}
.gnb_2dul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  z-index: 210;
}
.gnb_2dul_box {
  position: relative;
  background: #fff;
  padding: 20px 0;
  text-align: center;
}
.gnb_2dul_box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-orange);
}
.gnb_2dli + .gnb_2dli { margin-top: 12px; }
.gnb_2da {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-black);
  white-space: nowrap;
}
#gnb .gnb_1dli:hover > .gnb_2dul,
#gnb .gnb_1dli:focus-within > .gnb_2dul { display: block; }

/* PC: 헤더 영역 호버/포커스 시 항상 ‘스크롤된’ 솔리드 헤더 (회색 오버레이 없음) */
#hd.is-header-hover,
#hd.is-header-hover #gnb {
  background: #fff;
  border-bottom-color: var(--color-border);
}
#hd.is-header-hover .gnb_1da { color: var(--color-black) !important; }
#hd.is-header-hover #logo .logo-default { opacity: 0 !important; }
#hd.is-header-hover #logo .logo-scroll { opacity: 1 !important; }
#hd.is-header-hover .hd_menu_toggle-bar {
  background: var(--color-navy);
}

.hd_menu_toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.hd_menu_toggle:focus-visible { outline: 2px solid var(--color-point); outline-offset: 2px; }
.hd_menu_toggle-bars { display: flex; flex-direction: column; gap: 7px; width: 22px; }
.hd_menu_toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgb(
    calc(255 * (1 - var(--header-progress))),
    calc(255 * (1 - var(--header-progress))),
    calc(255 * (1 - var(--header-progress)))
  );
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
#hd.is-gnb-open .hd_menu_toggle-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
#hd.is-gnb-open .hd_menu_toggle-bar:nth-child(2) { opacity: 0; }
#hd.is-gnb-open .hd_menu_toggle-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Footer */
#ft { background: #000; }
#ft_wr { width: min(100%, 1420px); margin: 0 auto; padding: 100px 20px; }
.ft_main { display: flex; align-items: flex-start; justify-content: flex-end; gap: 80px; }
.ft_logo-desktop { display: block; }
.ft_logo-mobile { display: none; }
.ft_info { flex: 1 1 auto; min-width: 0; color: #fff; }
.ft_address_row { display: flex; align-items: center; gap: 12px; }
.ft_address_row + .ft_address_row { margin-top: 12px; }
.ft_addr_item { font-size: 14px; line-height: 2; font-weight: 400; word-break: keep-all; }
.ft_bottom { margin-top: 74px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
#ft_link { display: flex; align-items: center; gap: 20px; }
#ft_link a { font-size: 14px; line-height: 1.5; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ft_copyright { font-size: 14px; line-height: 2; white-space: nowrap; }
.ft_mobile-only { display: none; }
#top_btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 0; padding: 0; background: transparent; }
#top_btn .top_btn_icon_img { width: 50px; height: 50px; display: block; }

/* Essentials for forms and board pages */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], textarea, select, .frm_input {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, select:focus, .frm_input:focus {
  outline: none;
  border-color: var(--color-point);
  box-shadow: 0 0 0 3px rgba(0, 95, 163, 0.2);
}
.frm_input { height: 40px; padding: 0 12px; }
textarea.frm_input { height: auto; padding: 12px; }

.tbl_wrap table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.tbl_head01 thead th {
  height: 40px;
  padding: 20px 0;
  border-bottom: 1px solid #ececec;
  text-align: center;
  font-weight: 500;
}
.tbl_head01 td {
  height: 60px;
  padding: 10px 5px;
  border-top: 1px solid #ecf0f1;
  border-bottom: 1px solid #ecf0f1;
}

a.btn, .btn, .btn_submit, a.btn_b01, .btn_b01, a.btn_b02, .btn_b02, a.btn_b03, .btn_b03, a.btn_b04, .btn_b04 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--ls-base);
}
.btn_submit, a.btn_b02, .btn_b02 { border: 1px solid var(--color-point); background: var(--color-point); color: #fff; }
.btn_submit:hover, a.btn_b02:hover, .btn_b02:hover { background: var(--color-point-dark); border-color: var(--color-point-dark); }
a.btn_b01, .btn_b01, a.btn_b03, .btn_b03, a.btn_b04, .btn_b04 { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); }

.pg_wrap { clear: both; text-align: center; }
.pg { display: inline-flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pg_page, .pg_current, .pg_start, .pg_prev, .pg_end, .pg_next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  background: #fff;
}
.pg_current { border-color: var(--color-point); background: var(--color-point); color: #fff; }

@media (max-width: 1440px) {
  .pc-only { display: none !important; }
  .mobile-only { display: block !important; }

  #hd { background: #fff; border-bottom-color: var(--color-border); }
  #hd_wrapper { gap: 12px; min-height: 80px; padding: 17px 20px; }
  #logo .logo-default { opacity: 0; }
  #logo .logo-scroll { opacity: 1; }
  .hd_menu_toggle { display: inline-flex; }
  .hd_menu_toggle-bar { background: var(--color-navy); }

  /* 히어로가 헤더 뒤로 깔리는 페이지: 태블릿·좁은 데스크톱에서도 상단 투명 헤더 + --header-progress 유지 */
  body:has(.page-hero) #hd,
  body:has(.main-hero) #hd {
    background: rgba(255, 255, 255, var(--header-progress));
    border-bottom: 1px solid rgba(220, 221, 222, var(--header-progress));
  }
  body:has(.page-hero) #logo .logo-default,
  body:has(.main-hero) #logo .logo-default {
    opacity: calc(1 - var(--header-progress));
  }
  body:has(.page-hero) #logo .logo-scroll,
  body:has(.main-hero) #logo .logo-scroll {
    opacity: var(--header-progress);
  }
  body:has(.page-hero) .hd_menu_toggle-bar,
  body:has(.main-hero) .hd_menu_toggle-bar {
    background: rgb(
      calc(255 * (1 - var(--header-progress))),
      calc(255 * (1 - var(--header-progress))),
      calc(255 * (1 - var(--header-progress)))
    );
  }

  /* 닫힌 상태: 드롭다운 패널 숨김 (열림 시 풀스크린으로 전환) */
  #gnb {
    display: none;
  }

  /* ── Figma 모바일 GNB (620-3424): 햄버거 열림 ── */
  body.is-gnb-drawer-open {
    overflow: hidden;
  }

  #hd.is-gnb-open {
    inset: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--color-navy);
    border-bottom: none;
    z-index: 1001;
  }

  /* 히어로 페이지: body:has(.main-hero) #hd 가 단독 #hd.is-gnb-open 보다 특이도가 높아 배경·테두리가 덮이던 문제 */
  body:has(.page-hero) #hd.is-gnb-open,
  body:has(.main-hero) #hd.is-gnb-open {
    background: var(--color-navy);
    border-bottom: none;
  }

  #hd.is-gnb-open #hd_wrapper {
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: 0;
    min-height: min(100%, 100dvh);
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #hd.is-gnb-open #logo {
    padding: 20px;
  }

  #hd.is-gnb-open #logo a {
    width: 100px;
    height: 16px;
  }

  #hd.is-gnb-open #logo img {
    height: 16px;
    max-height: 16px;
    max-width: 100px;
  }

  /* 네이비 배경용 흰 로고 */
  #hd.is-gnb-open #logo .logo-default {
    opacity: 1 !important;
  }

  #hd.is-gnb-open #logo .logo-scroll {
    opacity: 0 !important;
  }

  /* Figma 620-3424: 닫기 ≈16px X, 터치 영역 48px (막대는 중앙 겹쳐서 ±45°) */
  #hd.is-gnb-open .hd_menu_toggle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin: 14px 20px 14px auto;
    box-sizing: border-box;
  }

  #hd.is-gnb-open .hd_menu_toggle-bars {
    width: 16px;
    height: 16px;
    position: relative;
    gap: 0;
    flex-shrink: 0;
  }

  #hd.is-gnb-open .hd_menu_toggle-bar {
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 2px;
    margin-top: -1px;
    background: #fff !important;
    transform-origin: center;
  }

  #hd.is-gnb-open .hd_menu_toggle-bar:nth-child(1) {
    transform: rotate(45deg);
  }

  #hd.is-gnb-open .hd_menu_toggle-bar:nth-child(2) {
    opacity: 0;
  }

  #hd.is-gnb-open .hd_menu_toggle-bar:nth-child(3) {
    transform: rotate(-45deg);
  }

  #hd.is-gnb-open #gnb {
    display: flex !important;
    flex-direction: column;
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    top: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #hd.is-gnb-open #gnb .gnb_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 402px;
    margin: 0 auto;
    padding: 0 0 120px;
    box-sizing: border-box;
  }

  /* Figma: 모바일 GNB 세로 리듬 28px, 구분선은 360.5px 너비(좌우 여백), ESG↔COMMUNITY 사이 구분선 없음 */
  #hd.is-gnb-open #gnb #gnb_1dul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 28px;
    width: 100%;
    margin-left: 0;
    padding-top: 28px;
    box-sizing: border-box;
  }

  #hd.is-gnb-open #gnb .gnb_1dli {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 0;
    column-gap: 16px;
    padding: 0 40px;
    margin: 0;
    background: transparent;
    border: none;
  }

  #hd.is-gnb-open #gnb .gnb_1dli:nth-child(-n + 3)::after {
    content: "";
    flex: 0 0 100%;
    order: 2;
    width: min(360.5px, calc(100% - 41px));
    height: 1px;
    margin: 28px auto 0;
    background: rgba(255, 255, 255, 0.22);
  }

  #hd.is-gnb-open #gnb .gnb_1dli:not(.has-sub) {
    flex-wrap: wrap;
  }

  #hd.is-gnb-open #gnb .gnb_1dli:not(.has-sub) .gnb_1da {
    flex: 1 1 100%;
  }

  #hd.is-gnb-open .gnb_1da {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: auto;
    padding: 0;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
  }

  #hd.is-gnb-open #gnb .gnb_1dli.has-sub > .gnb_1da::after {
    display: none;
  }

  #hd.is-gnb-open .gnb_2dul {
    display: block !important;
    position: static;
    left: auto;
    transform: none;
    min-width: 0;
    flex: 1 1 0;
    padding: 0;
    z-index: auto;
  }

  #hd.is-gnb-open .gnb_2dul_box {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
    list-style: none;
  }

  #hd.is-gnb-open .gnb_2dul_box::before {
    display: none;
  }

  #hd.is-gnb-open .gnb_2dli {
    margin: 0;
    padding: 0;
    border: none;
  }

  #hd.is-gnb-open .gnb_2dli + .gnb_2dli {
    margin-top: 16px;
  }

  #hd.is-gnb-open .gnb_2da {
    display: inline-block;
    min-height: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: #fff;
    white-space: normal;
    text-align: left;
  }

  /* Figma: ESG 첫 항목, COMMUNITY 첫 항목 text-shadow */
  #hd.is-gnb-open #gnb #gnb_1dli:nth-child(4) .gnb_2dli:first-child .gnb_2da,
  #hd.is-gnb-open #gnb #gnb_1dli:nth-child(5) .gnb_2dli:first-child .gnb_2da {
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }

  #ft_wr { padding: 80px 20px; }
  .ft_main { flex-wrap: wrap; justify-content: space-between; gap: 60px 20px; }
  .ft_logo-desktop { display: none; }
  .ft_logo-mobile { display: block; }
  .ft_bottom { margin-top: 40px; flex-direction: column; gap: 16px; }
  .ft_copyright { white-space: normal; }
}

/* 메인: 푸터 섹션은 좌우 패딩 제거(#ft 배경 전폭) */
.main-site-footer.section {
  padding-left: 0;
  padding-right: 0;
}

/* index: fullPage.js (768px 미만은 플러그인 responsive 모드로 일반 스크롤) */
.fp-enabled .main-figma .fullpage-wrapper {
  width: 100%;
}
/* fp-auto-height여도 최소 한 뷰포트는 채워 앵커 이동 시 위·아래 섹션이 비치지 않게 (fp-responsive는 body) */
html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.section {
  min-height: 100vh;
  min-height: 100dvh;
}
/*
 * 히어로: margin-top: -var(--header-height) 로 위로 당김 + fullPage transform 으로
 * getBoundingClientRect().top 이 -var 보다 몇 px 더 위로 잡히는 경우 있음(Playwright ~5px).
 * → 뷰포트 + 헤더 + 소량 보정으로 하단 흰 띠 제거.
 */
html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.main-hero {
  padding-top: 0 !important;
  min-height: calc(100vh + var(--header-height, 86px) + 5px) !important;
  min-height: calc(100dvh + var(--header-height, 86px) + 5px) !important;
  height: calc(100vh + var(--header-height, 86px) + 5px) !important;
  height: calc(100dvh + var(--header-height, 86px) + 5px) !important;
  max-height: none;
}
/* 푸터 섹션: 헤더 패딩 불필요 · 콘텐츠 높이만(뷰포트 min-height로 아래 빈칸 생기지 않게) */
html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.main-site-footer {
  padding-top: 0 !important;
  min-height: 0 !important;
}
.fp-enabled .main-figma .fp-section.main-site-footer {
  min-height: 0;
}
.fp-enabled .main-figma .main-hero__inner {
  min-height: 100%;
}
html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.main-hero .main-hero__inner {
  padding-top: 290px;
  padding-bottom: 210px;
  gap: 60px;
}
html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.main-hero .main-hero__intro {
  /* flex: 1; */
  min-height: 100%;
}
html.fp-enabled body:not(.fp-responsive) .main-figma #fullpage .fp-section.main-hero .main-hero__nav {
  margin-top: auto;
}
#fp-nav {
  z-index: 150;
}
html.fp-enabled body:not(.fp-responsive).fp-viewing-hero #fp-nav {
  top: auto;
  bottom: 40px;
  transform: none;
}
#fp-nav ul li a span {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
#fp-nav ul li a.active span {
  background: var(--color-point);
  box-shadow: none;
}

@media (max-width: 767px) {
  #hd_wrapper { min-height: 72px; }
  #logo a { width: 140px; height: 28px; }
  #logo img {
    max-width: 140px;
    max-height: 28px;
    height: 28px;
  }
  #wrapper { padding-top: 72px; }
  .ft_address_row { flex-direction: column; align-items: flex-start; gap: 0; }
  .ft_mobile-only { display: block; }
}