/* 원본 템플릿 수리용 오버라이드 (원본 main.css는 수정하지 않는다)

   전체메뉴 표시 계층: 원본 CSS는 딤 레이어(z-index 99998)가 메뉴 패널(99)과
   토글 버튼(100)을 모두 덮어, 메뉴를 열면 화면만 어두워지고 아무것도 누를 수
   없었다. 원본 사이트에서는 메뉴 핸들러 자체가 죽어 있어 드러나지 않던 미완성
   코드다. 메뉴 패널과 버튼을 딤 위로 올린다. */
#header .allMenuWrap,
#mheader .allMenuWrap {
  z-index: 99999;
}
#header .btn_all_menu,
#mheader .mbtn_all_menu {
  z-index: 100000;
}

/* 데스크톱에서는 GNB에 전 메뉴가 노출되므로 전체메뉴 버튼은 중복 — 숨긴다.
   (모바일 햄버거 .mbtn_all_menu는 유지) */
#header .btn_all_menu {
  display: none;
}

/* ===== 헤더 슬림화: 96~100px → 72px ===== */
#header #gnb > li > a {
  line-height: 72px;
  height: 72px;
}
/* 헤더 박스를 평소 정확히 72px로 유지하되, 드롭다운이 열리면 자연스럽게
   자라도록 높이를 못박지 않는다. 여분 두께의 근원만 제거:
   - gnbWrap의 폰트 스트럿(베이스라인 여백 ~10px) → font-size:0
   - amline의 flow 점유 1px → absolute */
#header #gnb {
  vertical-align: top;
  margin-bottom: 0; /* bootstrap의 ul 기본 margin-bottom:10px이 두께에 더해지는 것 방지 */
}
#header .gnbWrap {
  font-size: 0;
}
#header .amline {
  position: absolute;
  left: 0;
  right: 0;
}
#header h1 {
  height: 72px;
  top: 0;
  margin: 0; /* h1 기본 마진이 absolute 배치를 밀어내는 것 방지 */
  background-position: left center; /* 로고(192x35)를 바 안에서 수직 중앙 정렬 */
}

/* 로고 크로스페이드: 어두운 로고를 ::after로 겹쳐 두고 투명도로 전환한다.
   background-image는 전환이 불가능해 원본은 스냅으로 바뀌었다.
   원본/우리 규칙의 이미지 교체는 모두 흰 로고로 고정하고, 색 전환은 ::after가 담당. */
#header:hover h1,
#header.active h1,
#header.hd-dark h1,
#header.gnb-open h1 {
  background-image: url(../img/common/logo.png);
}
#header h1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/common/logo-c.png);
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
#header:hover h1::after,
#header.active h1::after,
#header.hd-dark h1::after,
#header.gnb-open h1::after {
  opacity: 1;
}
/* 닫힐 때는 글자색과 같은 타이밍으로 되돌린다 (배경이 옅어진 뒤 전환) */
#header.gnb-open.gnb-closing h1::after {
  opacity: 0;
  transition: opacity .12s ease .12s;
}
#header.gnb-open.gnb-closing.hd-dark h1::after,
#header:hover.gnb-open.gnb-closing h1::after {
  opacity: 1;
}
#header .amline {
  top: 72px;
}
/* 헤더 하단 구분선 제거: 호버 밑줄과 15px 간격으로 나란히 놓여 서로 경쟁했다.
   바/드롭다운의 경계는 헤더 자체의 box-shadow가 잡아주므로 선이 없어도 구조가 유지되고,
   빨간 밑줄이 헤더에서 유일한 선이 된다.
   (원본 dfs_common1.js가 스크롤 시 붙이는 .active의 흰 배킹 패널도 여기서 함께 무효화) */
#header:hover:after,
#header.active:after {
  content: none;
}

/* ===== 메뉴바 인터랙션 애니메이션 =====
   원본은 드롭다운·헤더 배경·밑줄이 전부 즉시 전환(transition 0s)이다.
   여기서는 표준 CSS 트랜지션/키프레임(opacity·transform)만 사용한다 —
   실험적 기능(@starting-style, allow-discrete, backdrop-filter)은 쓰지 않아
   브라우저 간 동작 차이가 없다. */

/* 1. (제거됨) 헤더 배경색 트랜지션은 글자색 반전과 겹치며 순간적으로
   워시아웃(투명해 보이는 현상)을 만들어 원본처럼 즉시 전환으로 둔다. */

/* 2. 탭 제목과 드롭다운 라벨 간격 (원본 상단 패딩 40px → 20px) */
#header #gnb > li .depth2 {
  box-sizing: border-box;
  padding-top: 20px;
}
/* 패널은 즉시 제 크기로 열리고(레이아웃 애니메이션 없음 → 버벅임 없음),
   내부 항목이 하나씩 내려오며 나타난다. transform·opacity만 쓰므로 레이아웃 없음.

   등장에 트랜지션이 아닌 키프레임을 쓰는 이유: 요소가 display:none에서 막
   나타나는 순간에는 트랜지션이 시작되지 않는다(브라우저 규칙). 실제 마우스로
   호버하면 패널 표시와 클래스 부여가 같은 프레임에 일어나 트랜지션이 통째로
   건너뛰어졌다. 키프레임은 요소가 렌더링되는 시점에 확실히 재생된다. */
@keyframes gnb-item-in {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}
#header.gnb-open #gnb > li .depth2 {
  display: block;
}
#header.gnb-open #gnb > li .depth2 > li {
  animation: gnb-item-in .35s cubic-bezier(0.33, 1, 0.68, 1) both;
}
#header.gnb-open #gnb > li .depth2 > li:nth-child(2) { animation-delay: .07s; }
#header.gnb-open #gnb > li .depth2 > li:nth-child(3) { animation-delay: .14s; }
#header.gnb-open #gnb > li .depth2 > li:nth-child(4) { animation-delay: .21s; }

/* 퇴장도 키프레임으로. (animation을 none으로 풀면서 트랜지션을 걸면 브라우저가
   이를 전환으로 보지 않아 즉시 사라진다 — 다른 이름의 애니메이션으로 교체해야
   현재 상태에서 이어서 재생된다.) 지연 없이 네 항목이 한꺼번에 사라진다. */
@keyframes gnb-item-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-16px); }
}
#header.gnb-open.gnb-closing #gnb > li .depth2 > li {
  animation: gnb-item-out .22s ease both;
  animation-delay: 0s;
}

/* 드롭다운이 열린 동안의 흰 패널 배경.
   항상 존재하는 전용 레이어(.gnb-panel-bg)에 opacity만 전환한다.
   - 배경색/그림자를 전환하면 매 프레임 재도색이 필요해 느리다
   - 의사요소로 두면 열릴 때마다 레이어가 새로 만들어져 콘텐츠 위에서 버벅였다 */
#header .gnb-panel-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, .2);
  opacity: 0;
  transition: opacity .24s ease;
  will-change: opacity;
  pointer-events: none;
  z-index: -1;
}
#header.gnb-open .gnb-panel-bg {
  opacity: 1;
}
#header.gnb-open.gnb-closing .gnb-panel-bg {
  opacity: 0;
}

#header.gnb-open #gnb > li > a {
  color: #333;
}

/* 닫힐 때 글자색도 배경과 함께 원래대로 되돌아간다.
   배경이 충분히 옅어진 뒤(0.12s 지연) 바뀌도록 해, 아직 흰 배경일 때
   흰 글자로 바뀌어 묻히는 구간을 피한다. 스크롤 중이면 검정을 유지. */
#header.gnb-open.gnb-closing #gnb > li > a {
  color: #fff;
  transition: color .12s ease .12s;
}
#header.gnb-open.gnb-closing.hd-dark #gnb > li > a,
#header:hover.gnb-open.gnb-closing #gnb > li > a {
  color: #333;
}

/* 3. (제거됨) 항목 순차 등장 스태거 — 메가메뉴는 5개 열이 동시에 열려
   항목 17개가 한꺼번에 애니메이션되면서 패널 높이 전환과 겹쳐 버벅였다.
   패널 자체의 페이드/펼침만으로 충분하다. */

/* 4. 원본의 호버용 3px border 밑줄은 ::after 스윕 밑줄로 대체되었으므로
   완전히 제거한다 — 남겨두면 탭마다 흰 3px 띠가 구분선을 끊어 보이게 한다. */
#header:hover #gnb > li > a > span,
#header:hover #gnb > li:hover > a > span {
  border-bottom: 0;
}

/* 5. 2차 메뉴 항목 hover 색 전환 */
#header #gnb > li .depth2 > li > a {
  transition: color .18s ease;
}

/* 6. 탭 밑줄 등장 애니메이션: 진입 시 왼쪽에서 자라나고,
   벗어날 때 오른쪽으로 쓸려나가는 스윕 방식.
   기존 항목별 빨간 border 밑줄은 흰색으로 눌러 ::after가 유일한 인디케이터가 되게 한다. */
/* 원본은 #header:hover 일 때만 span을 block으로 만든다. 마우스가 헤더를 벗어나면
   span이 inline으로 되돌아가 ::after의 기준 박스가 바뀌고, 퇴장 애니메이션이
   탭 제목 위에서 재생된다. 상태와 무관하게 박스를 고정한다. */
#header #gnb > li > a > span {
  display: block;
  position: relative;
}
#header #gnb > li > a > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px; /* 글자 바로 아래 (72px 바에서 텍스트 하단 +약 7px) — 구분선(72px)과 분리 */
  height: 3px;
  background: #e61f43;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .25s ease;
}
#header:hover #gnb > li:hover > a > span::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* 7. 스크롤 방향에 따른 헤더 자동 숨김/표시 (Header의 스크립트가 클래스 토글)
   easeOutCubic + will-change로 GPU 합성을 태워 덜컥거림을 없앤다 */
/* will-change: transform은 쓰지 않는다 — 헤더가 내부 fixed 요소(.si-wrap 등)의
   기준점이 되어 전체메뉴 하단 문구가 엉뚱한 위치에 뜬다. */
#header,
#mheader {
  transition: top .6s ease-in-out, transform .3s cubic-bezier(0.33, 1, 0.68, 1);
}
#header.hd-hidden,
#mheader.hd-hidden {
  transform: translateY(-110%);
}

/* 8. 스크롤 위치에 비례해 흰 배경이 차오르는 헤더 (--hd-p: 0~1, 스크립트가 갱신).
   경계에서 뚝 바뀌는 대신 스크롤을 따라 연속적으로 변해 어떤 지점에서도 자연스럽다.
   글자·로고는 배경이 거의 흰색이 된 시점(hd-dark, p>=0.8)에 전환. */
/* 스크롤 시 헤더 배경. 프로스트 글래스(backdrop-filter)는 제거했다 —
   색이 있는 상태에서 드롭다운이 여닫힐 때마다 블러 영역을 다시 합성하느라
   버벅였고, 투명한 상태에서만 부드러웠던 원인이 이것이었다.
   불투명 흰색은 뒤 콘텐츠와 합성할 필요가 없어 가장 가볍다. */
#header,
#mheader {
  background-color: rgba(255, 255, 255, var(--hd-p, 0));
  box-shadow: 0 0 14px rgba(0, 0, 0, calc(var(--hd-p, 0) * 0.12));
}
#header.hd-dark #gnb > li > a {
  color: #333;
  transition: color .15s ease, border-color .2s ease;
}
#header.hd-dark .btn_all_menu span {
  background: #111;
}
#mheader.hd-dark h1 {
  background-image: url(../img/common/logo-c.png);
}
#mheader.hd-dark .mbtn_all_menu span {
  background: #111;
}

/* 9. GNB 탭 굵기: semibold(600) → medium(500).
   Pretendard Variable이 500을 정확히 지원해 한글 메뉴가 더 정갈하게 보인다. */
#header #gnb > li > a {
  font-weight: 500;
}

/* 10. OUR BUSINESS 4카드 간격을 타이트하게 (부트스트랩 기본 30px → 4px).
   컬럼 padding을 줄이고 행 margin으로 상쇄해 바깥 정렬은 그대로 유지한다. */
.biz-cards {
  margin-left: -2px;
  margin-right: -2px;
}
.biz-cards > .col-sm-3 {
  padding-left: 2px;
  padding-right: 2px;
}

/* 11. 사진 위 흰 글씨 가독성: 배경 사진 밝기에 맞춘 스크림 + 은은한 그림자.
   처음에는 모든 섹션에 검정 50%를 똑같이 씌웠는데, 원래 어두운 사진까지
   덮어버려 사진이 뭉개졌다(기업연혁 배경은 스크림 없이도 대비 5.8:1인데
   12.7:1까지 눌렸다). 그래서 사진마다 상위 10% 밝기를 실측해
   "흰 글씨 대비 약 5:1"에 필요한 만큼만 덮도록 --scrim 값을 따로 준다.
   블러 대신 그라데이션 오버레이라 렌더링 비용은 거의 없다. */
.an-wrap,
.visual-main01,
.visual-main02,
.visual-main03,
.visual-sub01,
.visual-sub02,
.visual-sub03,
.visual-sub04,
.visual-sub05,
.visual-sub06,
.bn-wrap,
.bu-wrap01,
.bu-wrap02,
.bu-wrap03,
.bu-wrap04,
.co-wrap01,
.co-wrap02,
.co-wrap03 {
  position: relative;
  --scrim: 0;    /* 사진 전체 밝기 보정: 기본은 손대지 않는다 (실측 p90 < 80) */
  --plate: .20;  /* 글씨 뒤 그늘 농도 */
  --blur: 16px;  /* 글씨 뒤 사진을 흐리는 정도 */
}

/* 중간 밝기 사진 — 아주 옅게만 */
.visual-sub02  { --scrim: .04; }   /* p90 98 */
.co-wrap01     { --scrim: .04; }   /* p90 93 */
.visual-main01 { --scrim: .06; }   /* p90 107 */
.visual-main02 { --scrim: .08; }   /* p90 116 */
.bu-wrap04     { --scrim: .10; }   /* p90 123 */
/* co-wrap03(기업연혁)은 p90 102지만 어둡다는 지적이 있어 덮지 않는다.
   스크림 없이도 흰 글씨 대비 5.8:1이라 글자 그림자만으로 충분하다. */

/* 밝은 사진 — 여기는 덮지 않으면 흰 글씨가 묻힌다 */
.co-wrap02     { --scrim: .30; --plate: .12; }   /* p90 163 */
.visual-sub01  { --scrim: .34; }   /* p90 177 */
.visual-sub06  { --scrim: .34; }   /* p90 173 */
.visual-sub05  { --scrim: .38; }   /* p90 179 — 가장 밝은 사진 */

.an-wrap::before,
.visual-main01::before,
.visual-main02::before,
.visual-main03::before,
.visual-sub01::before,
.visual-sub02::before,
.visual-sub03::before,
.visual-sub04::before,
.visual-sub05::before,
.visual-sub06::before,
.bn-wrap::before,
.bu-wrap01::before,
.bu-wrap02::before,
.bu-wrap03::before,
.bu-wrap04::before,
.co-wrap01::before,
.co-wrap02::before,
.co-wrap03::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 사진 전체 밝기 보정(밝은 사진만 해당). 어두운 사진은 --scrim: 0 이라
     사실상 아무것도 덮지 않는다. 글씨 가독성은 아래 '소프트 플레이트'가 맡는다. */
  background: linear-gradient(180deg,
    rgba(0, 0, 0, calc(var(--scrim) * .5)) 0%,
    rgba(0, 0, 0, var(--scrim)) 40%,
    rgba(0, 0, 0, var(--scrim)) 64%,
    rgba(0, 0, 0, calc(var(--scrim) * .5)) 100%);
  pointer-events: none;
}

/* 12. 본문이 스크림 위에 오도록 + 글씨 그림자 */
.an-wrap > .container,
.bn-wrap > .container,
.bu-wrap01 > .container,
.bu-wrap02 > .container,
.bu-wrap03 > .container,
.bu-wrap04 > .container,
.co-wrap01 > .container,
.co-wrap02 > .container,
.co-wrap03 > .container {
  position: relative;
  z-index: 1;
}
.carousel-caption .v-mt01,
.carousel-caption .v-mt02,
.carousel-caption-sub .v-st01,
.carousel-caption-sub .v-st02,
.an-wrap h3, .an-wrap h5,
.bn-wrap h3, .bn-wrap h5,
.bu-wrap01 h3, .bu-wrap01 h5,
.bu-wrap02 h3, .bu-wrap02 h5,
.bu-wrap03 h3, .bu-wrap03 h5,
.bu-wrap04 h3, .bu-wrap04 h5,
.co-wrap01 h3, .co-wrap01 h5,
.co-wrap02 h3, .co-wrap02 h5,
.co-wrap03 h3, .co-wrap03 h5 {
  /* 글자에 바짝 붙는 그림자로 윤곽만 세운다.
     넓게 퍼지는 그림자는 글씨를 뿌옇게 만들어 쓰지 않는다. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  /* 아래 소프트 플레이트(::after)보다 위에 오도록.
     기업연혁처럼 .container 없이 h3/h5가 바로 놓인 섹션에 필요하다. */
  position: relative;
  z-index: 1;
}

/* ===== 12-1. 글씨 뒤 블러: 사진은 그대로, 글씨 뒤쪽만 흐리게 =====
   사진 전체를 덮으면 사진이 죽고, 안 덮으면 흰 글씨가 묻힌다.
   글씨가 놓인 자리의 사진만 흐리게 만들고(backdrop-filter) 아주 옅은
   그늘을 더한다. 마스크로 가장자리를 부드럽게 빼서 판이 얹힌 느낌 없이
   사진과 자연스럽게 이어진다. 위치·크기는 실측한 글씨 영역 기준.
   --blur / --plate 두 값만 바꾸면 세기를 조절할 수 있다. */
.an-wrap::after,
.bn-wrap::after,
.bu-wrap01::after,
.bu-wrap02::after,
.bu-wrap03::after,
.bu-wrap04::after,
.co-wrap01::after,
.co-wrap02::after,
.co-wrap03::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--plate));
  backdrop-filter: blur(var(--blur)) saturate(.95);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(.95);
  /* 가운데 정렬 섹션: 글씨가 한가운데 */
  -webkit-mask-image: radial-gradient(ellipse 56% 42% at 50% 50%,
    #000 0%, #000 42%, transparent 82%);
  mask-image: radial-gradient(ellipse 56% 42% at 50% 50%,
    #000 0%, #000 42%, transparent 82%);
}
/* 기업연혁은 글씨가 왼쪽 정렬(가로 5~75%, 세로 32~68%)이라 따로 잡는다 */
.co-wrap03::after {
  -webkit-mask-image: radial-gradient(ellipse 58% 44% at 38% 50%,
    #000 0%, #000 42%, transparent 82%);
  mask-image: radial-gradient(ellipse 58% 44% at 38% 50%,
    #000 0%, #000 42%, transparent 82%);
}
/* 블러를 지원하지 않는 브라우저에서는 그늘을 조금 더 줘서 가독성을 보완 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .an-wrap::after, .bn-wrap::after,
  .bu-wrap01::after, .bu-wrap02::after, .bu-wrap03::after, .bu-wrap04::after,
  .co-wrap01::after, .co-wrap02::after, .co-wrap03::after {
    background: rgba(0, 0, 0, calc(var(--plate) + .18));
  }
}

/* 13. 마지막 콘텐츠 블록과 푸터 사이 여백.
   본문이 .container로 끝나는 모든 페이지(사업분야·회사소개·게시판·상담·정책)에
   일괄 적용한다. 메인처럼 전면 사진 섹션으로 끝나는 페이지는 그 섹션이 자체
   여백을 가지므로 .flush-footer로 제외한다. */
body > .container:last-of-type {
  padding-bottom: 100px;
}
body > .container.flush-footer:last-of-type {
  padding-bottom: 0;
}

/* 14. 푸터 유튜브 버튼 겹침 해소 (데스크톱).
   원본은 본문 블록이 width:100% + margin-left:120px 라 오른쪽으로 120px 넘쳐,
   우측 상단에 절대배치된 .sns(유튜브) 아래로 글씨가 파고들었다.
   좌우 여백을 대칭으로 주고 폭을 auto로 잡아 가운데 정렬이 실제 중앙에 오게 한다.
   (1024px 이하 모바일은 원본이 이미 여백 0으로 재정의하므로 건드리지 않는다) */
@media (min-width: 1025px) {
  footer .fnb,
  footer .address {
    width: auto;
    margin-right: 120px;
  }
  footer .copy {
    margin-right: 120px;
  }
}

/* 15. 언론보도 본문 스타일.
   원본 게시글은 파스텔 박스(#f0f7f9)와 알약형 청록 버튼(#0084a8)이라 사이트 톤과
   따로 놀았다. 사이트 기본 버튼(.an-btn 계열: 각진 모서리, 브랜드 레드)에 맞춘다. */
#post_area .press-item {
  text-align: center;
  padding: 10px 0 24px;
}
#post_area .press-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
}
#post_area .press-note {
  color: #777;
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 24px;
}
#post_area .press-link {
  display: inline-block;
  padding: 10px 32px;
  font-size: 15px;
  color: #555;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 0;
  text-decoration: none;
  transition: .3s ease;
}
#post_area .press-link:hover {
  color: #fff;
  background: #e61f43;
  border-color: #e61f43;
}

/* 16. OUR BUSINESS 카드 우측 검은 선 제거.
   카드 폭(314.50px)보다 이미지가 0.02px 좁아 카드 배경(#000)이 머리카락처럼
   비쳤다. 소수점 폭에서 생기는 문제라 이미지를 카드 폭에 딱 맞춘다. */
.biz-cards .mb-wrap .mb-img,
.biz-cards .mb-wrap .mb-img img {
  display: block;
  width: 100%;
}

/* ===== 17. 메인 페이지 타이포그래피 (고급감) =====
   원본은 한글 본문 행간이 1.3~1.5로 빽빽하고, 대형 제목 자간이 +0.5px로 헐거웠다.
   - 본문 행간 1.7~1.8 (한글 가독 적정)
   - 대형 한글 제목 자간 -0.02~-0.03em (단단하게)
   - 영문 라벨은 트래킹을 넓혀 한글 제목과 대비
   - 히어로를 키워 섹션 제목과의 위계를 분명히
   메인 전용 클래스만 사용하므로 서브 페이지에는 영향이 없다. */

/* 히어로 */
.carousel-caption .v-mt01 {
  font-size: 62px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.carousel-caption .v-mt02 {
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  margin-top: 22px;
}

/* 섹션 제목 (OUR BUSINESS) */
.tit-main01 {
  letter-spacing: 0.01em;
}
.tit-main02 {
  font-size: 19px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: #6b6b6b;
  margin-top: 18px;
}

/* 사업 카드 */
.biz-cards .mb-title h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.biz-cards .mb-title h5 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: .85;
}

/* PARTNERSHIP / AWARDS */
.vr-wrap01 h3,
.vr-wrap02 h3 {
  letter-spacing: 0.06em;
}
.vr-wrap01 h5,
.vr-wrap02 h5 {
  line-height: 1.7;
  letter-spacing: -0.01em;
}

/* 사진 위 대형 문구 */
.an-wrap h3 {
  font-size: 44px;
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.an-wrap h5 {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.01em;
  margin-top: 22px;
}

/* Make your Winning Strategy */
.mz-wrap h1 {
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.mz-wrap h3 {
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.mz-wrap h5 {
  line-height: 1.8;
  letter-spacing: -0.01em;
}

/* 하단 배너 */
.bn-wrap h3 {
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.bn-wrap h5 {
  line-height: 1.75;
  letter-spacing: -0.01em;
}

/* 버튼 */
.vr-btn,
.an-btn,
.mz-btn,
.bn-btn {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ===== 18. 서브 페이지 타이포그래피 (메인과 동일 규칙) =====
   원본은 배너·페이지 제목 자간이 +1~2px로 벌어져 있고 본문 행간이 1.47~1.53이었다.
   메인에 적용한 기준(본문 행간 1.75~1.8 / 대형 한글 제목 자간 -0.02~-0.03em)을
   서브 페이지 전체에 동일하게 적용한다. */

/* 배너 */
.carousel-caption-sub .v-st01 {
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.carousel-caption-sub .v-st02 {
  line-height: 1.7;
  letter-spacing: -0.01em;
  margin-top: 14px;
}

/* 페이지 제목·부제 */
.tit-sub01 {
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.tit-sub02,
.tit-sub04 {
  line-height: 1.75;
  letter-spacing: -0.01em;
}
.tit-sub03 {
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.tit-sub05 {
  letter-spacing: -0.015em;
}

/* 사진 배경 섹션 (사업분야·회사소개) */
.bu-wrap01 h3, .bu-wrap02 h3, .bu-wrap03 h3, .bu-wrap04 h3,
.co-wrap01 h3, .co-wrap02 h3, .co-wrap03 h3 {
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.bu-wrap01 h5, .bu-wrap02 h5, .bu-wrap03 h5, .bu-wrap04 h5,
.co-wrap01 h5, .co-wrap02 h5, .co-wrap03 h5 {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.01em;
  margin-top: 20px;
}

/* 본문 카드 */
.xb-wrap h3 {
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.xb-wrap h5 {
  line-height: 1.8;
  letter-spacing: -0.01em;
}
.uk-wrap h3 {
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.uk-wrap h5 {
  line-height: 1.75;
  letter-spacing: -0.01em;
}

/* 표·게시판 본문 */
table.t1 th,
table.t1 td {
  line-height: 1.7;
  letter-spacing: -0.01em;
}
.board-wrap .bbsnewf5,
#post_area {
  letter-spacing: -0.01em;
}
#post_area .press-note {
  line-height: 1.75;
}

/* 탭 메뉴 */
.lnbmenu a {
  letter-spacing: -0.01em;
}

/* ===== 19. 세로 여백 리듬 통일 (데스크톱) =====
   원본은 전면 사진 섹션의 위아래 여백이 250 / 200 / 140px로 제각각이고
   섹션 간 마진도 140 / 120 / 0px으로 섞여 있어 스크롤 리듬이 불규칙했다.
   사진 섹션 = 패딩 150px, 앞 섹션과의 간격 = 100px 로 통일한다.
   (1024px 이하는 원본이 별도 값을 쓰므로 건드리지 않는다) */
@media (min-width: 1025px) {
  .an-wrap,
  .bn-wrap,
  .bu-wrap01,
  .bu-wrap02,
  .bu-wrap03,
  .bu-wrap04,
  .co-wrap01,
  .co-wrap02,
  .co-wrap03 {
    padding-top: 150px;
    padding-bottom: 150px;
    margin-top: 100px;
    margin-bottom: 0;
  }
  /* 사진 섹션 다음에 일반 콘텐츠가 오면(예: 회사개요의 '비전') 간격이
     0이 되어 사진에 바로 붙어버린다. 뒤따르는 요소에 같은 100px을 준다.
     푸터·맨위로 버튼은 제외 — 사진으로 끝나는 페이지는 붙어 있어야 한다. */
  :is(.an-wrap, .bn-wrap,
      .bu-wrap01, .bu-wrap02, .bu-wrap03, .bu-wrap04,
      .co-wrap01, .co-wrap02, .co-wrap03) + :not(footer):not(#back-to-top) {
    margin-top: 100px;
  }
}

/* ===== 20. 버튼 다듬기 =====
   원본 버튼은 15px에 패딩 7×25px로 작고 눌러앉아 보였다.
   패딩을 키우고 자간을 줘 무게감을 준다. 색·모양은 그대로. */
.vr-btn,
.an-btn,
.mz-btn,
.iq-btn {
  padding: 13px 34px;
  letter-spacing: .02em;
  transition: all .3s cubic-bezier(0.33, 1, 0.68, 1);
}
.bn-btn {
  letter-spacing: .02em;
  transition: all .3s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ===== 21. 스크롤 등장 애니메이션 =====
   초기 숨김 상태는 스크립트(revealScript.ts)가 .rv 클래스로 부여한다.
   JS가 실패하면 클래스가 안 붙어 콘텐츠가 그대로 보이므로 안전하다.
   transform·opacity만 사용 → 레이아웃 미발생. */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(0.33, 1, 0.68, 1),
              transform .7s cubic-bezier(0.33, 1, 0.68, 1);
}
.rv-on {
  opacity: 1;
  transform: none;
}
/* 카드 그리드는 순차 등장 */
.biz-cards > div:nth-child(2).rv { transition-delay: .08s; }
.biz-cards > div:nth-child(3).rv { transition-delay: .16s; }
.biz-cards > div:nth-child(4).rv { transition-delay: .24s; }

/* 모션 최소화를 선호하는 사용자에게는 애니메이션을 적용하지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}