/* common.css — 변수, 폰트, 레이아웃, 헤더/푸터 등 공통 */

@view-transition {
  navigation: auto;
}

/* ── 웹폰트 : sampleFont/*.OTF → woff2 변환본. 검수 중에는 block 유지 ── */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #1740c4;
  --color-brand: #2e3192;
  --color-text: #1a1f2e;
  --color-text-sub: #57606a; /* PNG 실측 */
  --color-line: #d0d7de;
  --color-bg: #ffffff;
  --color-bg-alt: #fafbfc;
  --color-icon-bg: #eeeffe;
  --color-card-line: #e8ecef; /* 카드 테두리 (PNG 실측) */
  --color-badge-bg: #e3e8f7;  /* 인사제도 배지 배경 */

  --color-muted: #8c959f;
  --color-tag-bg: rgba(23, 64, 196, 0.1);

  --color-footer-bg: #0d1117;
  --color-footer-line: #30363d;
  --color-footer-text-sub: #8c959f;

  --font-base: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;

  /* 아트보드 1920. 콘텐츠 x 384~1536 = 1152px.
     container = 1152 + gutter-pc*2 로 잡아야 padding 차감 후 1152 확보됨 */
  --container: 1232px;
  --gutter-pc: 40px;
  --gutter-mo: 20px;

  --header-height: 64px;
}

/* 전체 메뉴를 열 때 스크롤바가 사라지며 GNB 가 옆으로 튀는 것을 막는다 */
html {
  scrollbar-gutter: stable;
}

/* 알맹이가 짧은 화면(입사지원 등)에서도 푸터를 화면 아래에 붙인다.
   body 를 세로 flex 로 두고 가운데(#v2-page)가 남는 높이를 먹는다. */
body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

#v2-page {
  flex: 1 0 auto;
}

.section {
  width: 100%;
}

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

@media (max-width: 767px) {
  .section__inner {
    padding: 0 var(--gutter-mo);
  }
}

/* 헤더 — 스크롤해도 화면 최상단에 고정.
   sticky 는 "스크롤되는 조상" 기준으로 붙으므로, JS 주입용 래퍼(#header)와
   헤더 자체 양쪽에 건다. JSP 로 옮겨 래퍼가 없어져도 .header 만으로 동작한다. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
}

/* 헤더는 JS 가 나중에 넣는다. 미리 높이를 잡아 화면 밀림 방지 */
#header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
}

.header__inner {
  position: relative;
  max-width: var(--container);
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--gutter-pc);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 로고는 커스텀 로고타입 → 폰트 재현 불가. SVG 통째로 사용 (122×26) */
.header__logo {
  display: flex;
  align-items: center;
}

/* GNB 는 로고/유틸 폭과 무관하게 콘텐츠 중앙 고정 (시안 잉크중심 959.75 = 960) */
.gnb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.gnb__list {
  display: flex;
  gap: 0;
}

.gnb__item {
  position: relative;
}

/* 시안 실측(4배 렌더 대조) : 16px / Medium(500).
   잉크폭 AI·Cloud 60.5 · 솔루션 40.0 · 고객 26.0 · 뉴스룸 40.5 · 회사정보 54.5
   자간은 0 (패널 안쪽 글자와 달리 트래킹이 없다) */
.gnb__link {
  position: relative;
  display: block;
  padding: 0 16.5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  line-height: var(--header-height);
}

.gnb__item:first-child .gnb__link::after,
.gnb__item:last-child .gnb__link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}

.gnb__item:first-child .gnb__link::after {
  left: -60px;
  right: 0;
}

.gnb__item:last-child .gnb__link::after {
  left: 0;
  right: -60px;
}

/* 열린(활성) 메뉴만 SemiBold + 파랑 — 시안 "솔루션" 획두께 1.75(500 은 1.50) */
.gnb__item:hover .gnb__link,
.gnb__item:focus-within .gnb__link {
  font-weight: 600;
  color: var(--color-primary);
}

/* ── GNB 2뎁스 패널 ─────────────────────────────────────────────
   패널은 상위 메뉴 잉크 중심에 맞춰 가운데 정렬된다 (시안 5종 공통).
   AI·Cloud  704..920  중심 812 / 잉크중심 811.5
   솔루션    388..1404 중심 896 / 잉크중심 895.5
   고객      855..1071 중심 963 / 잉크중심 962.5
   뉴스룸    922..1138 중심 1030 / 잉크중심 1029.5
   회사정보  803..1419 중심 1111 / 잉크중심 1110.5
   패널 top 60 = 헤더(64)보다 4px 위에서 시작                        */
.gnb__panel {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px; /* 테두리 1 + 7 = 시안 안쪽 여백 8 */
  background: var(--color-bg);
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); /* feOffset dy8 / blur σ10 / 0.06 */
  /* display:none 으로 숨긴다. visibility 로 두면 숨은 메가 패널(1016)이
     1024~1231 구간에서 문서 폭을 넓혀 가로 스크롤이 생긴다 */
  display: none;
  max-width: calc(100vw - 32px);
}

.gnb__item:hover .gnb__panel,
.gnb__item:focus-within .gnb__panel {
  display: block;
  animation: gnb-panel-in .45s ease-in-out;
}

.gnb__item:hover .gnb__panel--mega,
.gnb__item:focus-within .gnb__panel--mega {
  display: flex;
  overflow-x: auto;
}

@keyframes gnb-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 컬럼 폭 200 (메가 5컬럼 1000 + 좌우 여백 16 = 1016) */
.gnb__col,
.gnb__menu {
  width: 200px;
}

/* 시안 실측 : 13px / SemiBold(600) / 자간 -0.4px.
   잉크폭 AI(인공지능) 63.0 · 컨택센터 42.0 · 비대면 서비스 66.75 · 통신 21.0
   위 padding 17 = 시안 잉크 y87.5~99.0 에 라인박스를 맞춘 값 (박스 총높이 42 유지) */
.gnb__col-title {
  padding: 17px 16px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: -0.4px;
  color: var(--color-primary);
  white-space: nowrap;
}

.gnb__col-title--blank::before {
  content: "\00a0"; /* 타이틀 없는 컬럼의 높이 확보 (솔루션 3번째 컬럼) */
}

/* 솔루션 패널만 폭이 넓다 : 336~1455(1120) = 컬럼 184 ×6 + 좌우 여백 16.
   행 배경(hover)은 컬럼 폭 184 를 그대로 쓴다 (시안 실측 344~527).
   글자 시작은 컬럼 좌측 +12 (실측 356 = 344+12) */
.gnb__panel--wide .gnb__col,
.gnb__panel--wide .gnb__menu {
  width: 184px;
}

.gnb__panel--wide .gnb__col-title {
  padding-right: 12px;
  padding-left: 12px;
}

/* 두 줄짜리 항목(WebRTC …)이 있어 높이를 내용에 맡긴다.
   줄바꿈 지점은 시안과 같아야 하므로 마크업의 <br> 로 고정하고 자동 줄바꿈은 막는다 */
.gnb__panel--wide .gnb__menu-link {
  height: auto;
  min-height: 48px;
  padding: 12px;
  line-height: 24px;
}

/* 시안 실측 : 16px / Regular(400) / 자간 -0.4px.
   자간을 빼면 12~14 글자짜리 항목에서 잉크폭이 4~6px 넓어진다 */
.gnb__menu-link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--color-text);
  white-space: nowrap;
}

/* 시안의 강조된 행은 배경·색뿐 아니라 굵기도 SemiBold (획두께 1.75 / 평상시 1.25).
   한글 자폭은 굵기와 무관하므로 굵어져도 줄바꿈 위치는 그대로다 */
.gnb__menu-link:hover {
  background: #f6f7fe; /* #EEEFFE 50% on white */
  font-weight: 600;
  color: var(--color-primary);
}

/* 지금 보고 있는 페이지 (js/common.js) */
.gnb__menu-link.is-current {
  background: #eceefc;
  font-weight: 600;
  color: var(--color-primary);
}

.gnb__badge {
  margin-left: 8px;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  border-radius: 11px;
  background: rgba(46, 49, 146, 0.1);
  font-size: 13px;
  color: var(--color-primary);
}

.header__util {
  display: flex;
  align-items: center;
  gap: 44px; /* En 우측 1466 → 햄버거 1510 */
}

.lang {
  display: flex;
  align-items: center;
  gap: 18px; /* Kr 우측 1433 → En 1451 */
}

/* 시안 실측 : 16px (캡높이 11.5 — 14px 이면 10.0) / Regular(400) / 자간 -0.4px.
   잉크폭 Kr 14.75(Medium) · En 15.75(Regular) */
.lang__btn {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--color-text-sub);
}

.lang__btn--active {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header__menu-btn {
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.header__menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.2s ease;
}

/* 열림 상태 : 두 줄이 X 로 (시안 rotate ±45, 중심 동일) */
.header--open .header__menu-btn span:first-child {
  transform: translateY(5px) rotate(45deg);
}

.header--open .header__menu-btn span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

/* ── 전체 메뉴 (00_메인_전체메뉴.svg) ────────────────────────────
   헤더를 화면 전체로 확장해 그 아래에 흘린다.
   그리드  라벨 264 / 컨텐츠 206 ×4, gap 16  = 1152
   구분선  664..870 / 886..1092 / 1108..1314 / 1330..1536
   섹션 간 48, 섹션 내부 행 간 32                                   */
.header--open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fullmenu {
  animation: fullmenu-in .38s cubic-bezier(.16, 1, .3, 1);
}

@keyframes fullmenu-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fullmenu__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter-pc) 80px; /* 헤더하단 64 + 40 = 첫 구분선 104 */
}

.fullmenu__section {
  display: flex;
  gap: 16px;
}

.fullmenu__section + .fullmenu__section {
  margin-top: 48px;
}

.fullmenu__label {
  flex: none;
  width: 264px;
  padding-top: 17px; /* 셀의 border 1 + padding 16 과 라인박스 맞춤 */
  font-size: 28px;
  font-weight: 700;
  line-height: 27px;
  color: var(--color-text);
}

.fullmenu__body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 206px);
  column-gap: 16px;
  row-gap: 32px;
}

.fullmenu__cell {
  padding: 16px 0 0 8px;
  border-top: 1px solid var(--color-card-line);
}

/* 솔루션의 AI(인공지능)·컨택센터는 두 컬럼을 쓴다 (구분선 664~1092 / 1108~1536) */
.fullmenu__cell--wide {
  grid-column: span 2;
}

/* 안쪽 2열 : 셀 padding-left 8 을 뺀 198 + gap 16 = 바깥 그리드 컬럼에 맞는다 */
.fullmenu__cols {
  display: grid;
  grid-template-columns: repeat(2, 198px);
  column-gap: 16px;
}

.fullmenu__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: var(--color-text);
}

.fullmenu__title a:hover {
  color: var(--color-primary);
}

.fullmenu__title--blank::before {
  content: "\00a0";
}

.fullmenu__sub {
  margin-top: 8px;
}

.fullmenu__sub a {
  display: block;
  font-size: 16px;
  line-height: 36px;
  color: var(--color-text-sub);
}

.fullmenu__sub a:hover {
  color: var(--color-primary);
}

.fullmenu__title a.is-current,
.fullmenu__sub a.is-current {
  font-weight: 700;
  color: var(--color-primary);
}

.fullmenu__badge {
  margin-left: 8px;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  border-radius: 11px;
  background: var(--color-icon-bg);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-primary);
  vertical-align: middle;
}

@media (max-width: 1023px) {
  .header__inner {
    padding: 0 var(--gutter-mo);
  }

  .fullmenu__inner {
    padding: 32px var(--gutter-mo) 60px;
  }

  .fullmenu__section {
    display: block;
  }

  .fullmenu__label {
    width: auto;
    padding: 0 0 16px;
  }

  .fullmenu__body {
    grid-template-columns: repeat(2, 1fr);
  }

  .fullmenu__cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .gnb {
    display: none;
  }
}

@media (max-width: 767px) {
  .fullmenu__body {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  /* 1단이 되면 span 2 가 없는 컬럼을 만들어내므로 되돌린다 */
  .fullmenu__cell--wide {
    grid-column: auto;
  }

  /* 375 에서는 2열을 유지하면 긴 항목(에이전트 오케스트레이션 …) 때문에
     가로 스크롤이 생긴다. 두 목록을 이어붙여 한 줄로 흘린다 */
  .fullmenu__cols {
    display: block;
  }

  .fullmenu__cols .fullmenu__sub + .fullmenu__sub {
    margin-top: 0;
  }
}

/* 서브페이지 히어로 — 전 페이지 공통.
   배지 top 184 / 이미지 160~456 / 다음 섹션 시작 504 */
.hero {
  padding: 96px 0 47px;
}

.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-pc);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hero__content {
  padding-top: 24px; /* 64 + 96 + 24 = 배지 top 184 */
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px; /* 실측 폭 82 = 13px×4자 + 좌우 15 */
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: 25px;
}

.hero__title {
  font-size: 60px; /* "인재상" 실측 폭 152 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.hero__desc {
  margin-top: 33px;
  font-size: 19px;
  letter-spacing: 0.25px;
  line-height: 30px; /* 줄 baseline 간격 실측 30 */
  color: var(--color-text-sub);
}

.hero__image {
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .hero__image {
    width: 100%;
    max-width: 420px;
    height: auto;
  }
}

@media (max-width: 767px) {
  .hero {
    padding: 48px 0;
  }

  .hero__inner {
    padding: 0 var(--gutter-mo);
  }

  .hero__content {
    padding-top: 0;
  }

  .hero__title {
    font-size: 36px;
  }

  .hero__desc {
    margin-top: 24px;
    font-size: 15px;
    line-height: 26px;
  }
}

/* ── 공통 컴포넌트 : 두 개 이상의 페이지에서 좌표가 동일해 여기로 뺐다 ── */

/* 검색창 : stroke rect 279×51 rx7.5 → 바깥 280×52, radius 8 (050305 / 050201) */
.search-box {
  width: 280px;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 20px 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: #fafafa;
}

.search-box__input {
  flex: 1;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text);
}

.search-box__input::placeholder {
  color: var(--color-muted);
}

.search-box__btn {
  display: flex;
  align-items: center;
}

/* 페이지네이션 : 숫자 32×36 이 붙어 있고, 화살표 묶음과 4px 띄운다 (050305 / 050201) */
.pagination {
  display: flex;
  justify-content: center;
}

.pagination__ctrl {
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-sub);
  transition: color .2s ease;
}

.pagination__nums {
  display: flex;
  margin: 0 4px;
}

.pagination__num {
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-sub);
  transition: background-color .2s ease, color .2s ease;
}

.pagination__num:hover {
  background: var(--color-icon-bg);
}

.pagination__ctrl--off {
  color: #cbced1;
  pointer-events: none;
}

.pagination__num--active {
  background: var(--color-tag-bg);
  color: var(--color-primary);
}

/* Page.indexList() 출력 (div.page > strong / a.b_num) */
.page {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page strong,
.page a {
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-sub);
}

.page strong {
  background: var(--color-tag-bg);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .search-box {
    width: 100%;
  }
}

/* 푸터 */
.footer {
  background: var(--color-footer-bg);
  border-top: 1px solid var(--color-footer-line);
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 44px var(--gutter-pc) 0; /* 푸터 top 2869 → 로고·버튼 top 2913 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer__info {
  display: flex;
  align-items: flex-start;
  gap: 50px; /* 로고 우측 582 → 연락처 632 */
}

/* 푸터 로고도 SVG 통째 (199×43) */
.footer__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer__contact {
  display: flex;
  padding-top: 3px;
  gap: 34px; /* ADDRESS 827 → TEL 861 → FAX 986 */
}

.footer__contact-item dt {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-footer-text-sub);
  margin-bottom: 6px;
}

.footer__contact-item dd {
  font-size: 14px;
  line-height: 20px; /* 주소 2줄 간격 실측 20 */
  color: #e6edf3;
}

.footer__ethics-btn {
  width: 115px;  /* SVG stroke rect 114 + stroke 1 */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-footer-text-sub);
  font-size: 13px;
  color: #e6edf3;
  flex-shrink: 0;
}

.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 36px var(--gutter-pc) 45px; /* 푸터 총 199 = 44 + 59.5 + 36 + 12 + 47 */
}

.footer__copyright {
  padding-left: 248px; /* 로고 199 + gap 50 → 연락처 열(632)에 정렬 */
  font-size: 12px;
  line-height: 1;
  color: var(--color-footer-text-sub);
}

@media (max-width: 767px) {
  .footer__inner {
    flex-direction: column;
    gap: 24px;
    padding-top: 32px;
  }

  .footer__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer__contact {
    flex-direction: column;
    gap: 12px;
  }

  .footer__bottom {
    padding: 24px var(--gutter-mo) 32px;
  }

  .footer__copyright {
    padding-left: 0;
  }
}

/* 스크롤로 들어오면 나타난다 (js/reveal.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* OS 의 '애니메이션 효과 끄기'(prefers-reduced-motion) 는 따르지 않는다.
   설정을 켠 PC 에서 사이트가 고장난 것처럼 보인다는 판단. 발주 측 결정.
   되돌리려면 여기에 @media (prefers-reduced-motion: reduce) 블록을 다시 넣는다. */