@charset "utf-8";


:root {
  --font-eng: "Nunito Sans";
}

.ty_eng {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
}

.ty_tit_sm {
  font-size: clamp(1.12rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2778;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.ty_label {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.ty_num {
  font-size: clamp(2.25rem, 3.15vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--txt-color);
}

.title_wrap .tag {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.marquee_wrap,
.marquee_wrap:hover,
.marquee_txt_track,
.marquee_txt_track:hover,
.sub_vis .vis_bg img,
.sub_vis .vis_bg img:hover {
  transition: none;
}


/* --------------------------------------------------------------------------
   .sec_band — 섹션 구분용 판 [260902]

   사진 없이 글·표·도형만 길게 이어지는 구간이 검정 배경에 묻혀 섹션 경계가
   안 보인다는 지적(추가 수정사항 p1)에 대한 것. 붙이고 싶은 `<section>` 에
   클래스 하나만 더하면 된다.
   배경은 `images/sub/sec_bg.png`(1920×1150, 파티클 메시) 한 장이다.
   ⚠ 위아래로 서라지게 마스크를 걸어 구간이 갑자기 시작·끝나 보이지 않게 한다.
     ⭐ 단색 네이비 판으로 경계를 또렷하게 만드는 안, CSS 로 무늬(격자·점·사선·
       파동)를 그리는 안, 캔버스로 메시를 그리는 안까지 해 봤는데(260902) 전부
       걷어내고 이 사진 한 장으로 정리했다. 되살릴 일은 없을 것이다.
   ⚠ 빛은 ::before 로 깔고 내용은 z-index 로 올린다 — 배경에 직접 두면
     backdrop-filter 를 쓰는 자식(있을 수 있다)이 이 판을 배경으로 읽는다.
   ⚠ 사진에는 blur 를 걸지 않는다. 예전 그라디언트에는 `filter: blur(3rem)` 가
     있었는데, 그건 색 덩어리를 퍼뜨리려던 것이고 메시는 점이 뭉개져 얼룩만 남는다.
   ⚠⚠ 이 클래스는 **전폭 `<section>` 에만** 붙인다. `.wFix`(최대 1500px)를 겸한
     섹션에 붙이면 배경이 1500px 에서 잘려 세로 경계선이 보인다 — 그래서
     기업정보는 섹션을 전폭으로 두고 `.wFix` 를 안쪽으로 옮겼다.
   -------------------------------------------------------------------------- */
.sec_band {
  position: relative;
  overflow: hidden;
}
.sec_band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* ⚠ `cover` 는 **일부러** 그대로 둔 것이다. 구간이 1912×1765(비율 1.08)까지
     길어지는데 사진은 1920×1150(비율 1.67)이라, 빈 데를 없애려고 높이 기준으로
     맞추면서 1.5배 확대되고 좌우가 잘린다 — 확대가 싫으면 `aspect-ratio` 로
     칸을 사진 비율에 묶는 방법이 있지만(260902 시도), 배경이 판을 다 덮는 쪽을
     택했다. 되돌리지 말 것.
     ⭐ 자리는 `center bottom` — 볼 것(메시)이 사진 아래쪽에 있어서,
       잘릴 때 위를 잘라야 그림이 남는다. */
  background: url("../../images/sub/sec_bg.png") no-repeat center bottom / cover;
  opacity: var(--band-opacity, 1);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.sec_band > * {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   공통 — 데이터 표 (.tbl_wrap > .tbl)
   -------------------------------------------------------------------------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tbl th,
.tbl td {
  padding: 1.25rem;
  font-size: clamp(0.88rem, 1.2vw, 1.62rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  vertical-align: middle;
}
.tbl thead th {
  border-top: 1px solid var(--txt-color);
  border-bottom: 1px solid var(--line-color-darker);
  font-weight: 400;
  color: var(--sub-txt-color);
  background: rgba(255, 255, 255, .1);
}
.tbl tbody th {
  font-weight: 700;
  color: var(--txt-color);
}
.tbl .ty_equip span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82em;
  font-weight: 400;
  color: var(--sub-txt-color);
}
.tbl tbody td {
  font-weight: 500;
  color: var(--txt-color);
}
.tbl tbody th,
.tbl tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tbl tbody tr.ty_group > * {
  border-top: 1px solid var(--line-color-darker);
}
/* ⚠ 카테고리 칸에만 세로선을 넣는다. 이 줄엔 th 가 둘(카테고리·장비명) 있는데
   장비명 쪽에 넣으면 **그 카테고리의 첫 묶음에만** 선이 생겨 중간에 끊긴다
   (둘째 묶음부터는 ty_group 이 아니라서). 카테고리 칸은 rowspan 이 묶음 전체라
   선이 끝까지 내려간다. */
.tbl tbody tr.ty_group > th:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.tbl tbody tr.ty_sum > * {
  background-color: rgba(255, 255, 255, .1);
}
.tbl.ty_left th:not(:first-child),
.tbl.ty_left td:not(:first-child) {
  text-align: left;
}


@media screen and (max-width: 900px) {
  .tbl th,
  .tbl td {
    padding: 0.88rem 0.75rem;
  }

  .tbl.ty_scroll {
    min-width: 40rem;
  }
  .tbl.ty_scroll th,
  .tbl.ty_scroll td {
  }
  .tbl_wrap,
  .chart_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.88rem;
  }
  /* ⚠ 높이 고정은 차트에만. 표는 줄 수만큼 늘어나야 한다 — 예전엔 두 선택자가
     함께 17rem 을 받아 **표가 다섯 줄에서 잘려** 있었다(세로 스크롤 안에 갇힘). */
  .chart_scroll {
    height: 17rem;
  }
  .tbl_wrap::-webkit-scrollbar,
  .chart_scroll::-webkit-scrollbar {
    height: 0.38rem;
  }
  .tbl_wrap::-webkit-scrollbar-button,
  .chart_scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  .tbl_wrap::-webkit-scrollbar-track,
  .chart_scroll::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
  }
  .tbl_wrap::-webkit-scrollbar-thumb,
  .chart_scroll::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 100px;
  }
  .tbl_wrap::-webkit-scrollbar-thumb:hover,
  .chart_scroll::-webkit-scrollbar-thumb:hover {
    background: var(--main-color-light);
  }
  @supports not selector(::-webkit-scrollbar) {
    .tbl_wrap,
    .chart_scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--main-color) rgba(255, 255, 255, 0.08);
    }
  }
}

@media screen and (max-width: 500px) {
  .tbl.ty_stack,
  .tbl.ty_stack tbody,
  .tbl.ty_stack tr,
  .tbl.ty_stack td {
    display: block;
  }
  .tbl.ty_stack thead {
    display: none;
  }
  .tbl.ty_stack tr {
    padding: 1.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .tbl.ty_stack tbody tr:first-child {
    border-top: 1px solid var(--txt-color);
  }
  .tbl.ty_stack td {
    display: flex;
    gap: 0.75rem;
    padding: 0.19rem 0;
    border-bottom: 0;
    font-size: 0.94rem;
    text-align: left;
  }
  .tbl.ty_stack td::before {
    content: attr(data-label);
    flex: 0 0 4.5rem;
    color: var(--sub-txt-color);
    font-weight: 400;
  }
  .tbl.ty_stack td:first-child {
    font-weight: 700;
  }
}


/* --------------------------------------------------------------------------
   1. sub_vis
   -------------------------------------------------------------------------- */
.sub_vis {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.88rem;
  height: 100vh;
  min-height: 37.5rem;
  max-height: 67.5rem;
  padding: 0 3rem;
  text-align: center;
  overflow: hidden;
}
.sub_vis.ty_sm {
  height: auto;
  min-height: 0;
  max-height: none;
  gap: 1.25rem;
  padding: 11.25rem 3rem 5rem;
  border-bottom: 1px solid var(--line-color-darker);
}
.sub_vis.ty_sm .vis_bg {
  display: none;
}
.sub_vis.ty_sm > h2 {
  font-size: clamp(2rem, 3.2vw, 3.75rem);
}
@media screen and (max-width: 900px) {
  .sub_vis.ty_sm {
    padding: 8.13rem 1.5rem 3.75rem;
  }
}

.sub_vis .vis_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.sub_vis .vis_bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.sub_vis .vis_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  mix-blend-mode: multiply;
}
.sub_vis > h2, .sub_vis > p,
.direction_item > strong, .direction_item > span,
.flow_item > strong, .flow_item > .flow_desc,
.hpdc_txt, .hpdc_num,
.labs_txt, .labs_card .tag_wrap,
.folio_cont, .folio_meta {
  position: relative;
  z-index: 1;
}
.sub_vis .ty_body {
  color: var(--txt-color);
}


/* --------------------------------------------------------------------------
   2. marquee
   -------------------------------------------------------------------------- */
.marquee {
  padding-block: var(--sec-gap) 0;
  overflow: hidden;
}
.marquee > .title_wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 3rem;
  text-align: center;
  justify-items: center;
}

.marquee_wrap {
  display: flex;
  align-items: flex-start;
  width: max-content;
  margin-top: var(--tit-gap);
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.marquee_wrap > li {
  flex: 0 0 auto;
  width: clamp(15rem, 26vw, 31.25rem);
  margin-right: 3.75rem;
}
.marquee_wrap > li:nth-child(even) {
  margin-top: 3.75rem;
}
.marquee_wrap > li img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stats {
  display: flex;
}
.stats > .stats_item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 2.5rem;
  container-type: inline-size;
}
.stats > .stats_item:not(:last-child) {
  border-right: 1px solid var(--line-color-dark);
}
.stats_tit {
  display: flex;
  align-items: flex-end;
  gap: 0.38rem;
}
.stats_tit .ty_sec_sm {
  font-weight: 700;
  line-height: 1;
  font-size: clamp(2rem, min(3.2vw, 20cqw), 3.75rem);
}

/* [모디파이어] 캡션을 제목 **위**로 올린다.
   stats 는 기본이 '큰 값(.stats_tit) → 작은 캡션(.stats_desc)' 순인데, 공정 단계처럼
   순번이 먼저 오는 자리는 그 반대다. 다른 건 없고 순서 하나뿐이라 여기서 뒤집는다.
   ⚠ `column-reverse` 라 **마크업은 기본형 그대로**(.stats_tit 를 먼저) 쓴다.
     order 를 칸마다 매기지 않아도 되고, 읽어 주는 순서도 기본형과 같게 남는다.
   ⚠ `justify-content: flex-end` 가 짝이다. column-reverse 는 주축 시작이 아래쪽이라,
     이게 없으면 옆 칸이 더 높을 때 글이 칸 **바닥**에 가라앉는다. */
.stats.ty_reverse > .stats_item {
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.stats.vertical {
  flex-direction: column;
}
.stats.vertical > .stats_item {
  flex: 0 0 auto;
  gap: 0.62rem;
  padding: 1.88rem 0;
  border-right: 0;
}
.stats.vertical > .stats_item:not(:last-child) {
  border-bottom: 1px solid var(--line-color-darker);
}
.stats.vertical .stats_tit {
  display: block;
}

/* ── [260903] 관계사 링크 (기업소개 · 오시는 길 아래) ──────────────────────
   구 사이트(세아메카닉스 sub01_07)의 FAMILY SITE 를 옮긴 것이다.
   그쪽 값을 그대로 따랐다 — **한 줄에 3등분 · 높이 60px · radius 4px · 가운데 정렬**
     구 CSS: width: calc((100% - 40px) / 3); height: 60px; border-radius: 4px;
             background-color: #F8F8F8; color: #666;  (아이콘 #999)
   ⚠ 색만 이 사이트 톤으로 바꿨다. 밝은 배경의 옛 사이트에서는 흰 판 위 회색 글씨였는데,
     여기는 배경이 검정이라 같은 대비를 내려면 **어두운 남색 판 + 흰 글씨**가 된다.
   ⚠ 폭은 calc 대신 grid 로 나눈다 — gap 을 바꿀 때 calc 의 40px 을 같이 고쳐야 하는
     실수를 없애려는 것이다(구 사이트가 그 구조였다).
   ⚠ 목록·주소는 마크업이 아니라 **inc/family.php** 에 있다(푸터와 공용). */
.fam_site {
  margin-top: 3.75rem;
}
.fam_site_tit {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sub-txt-color);
}
.fam_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.fam_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.75rem;            /* 구 사이트 60px */
  padding: 0.62rem 1.25rem;
  border-radius: 0.25rem;         /* 구 사이트 4px */
  background-color: var(--main-color-dark);
  font-size: clamp(0.94rem, 1.05vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: center;
  color: var(--txt-color);
  transition: background-color 0.25s ease;
}
.fam_btn:hover,
.fam_btn:focus-visible {
  background-color: var(--main-color);
}
.fam_btn .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 1.25rem;
  color: var(--sub-txt-color);
  transition: color 0.25s ease;
}
.fam_btn:hover .material-symbols-outlined,
.fam_btn:focus-visible .material-symbols-outlined {
  color: var(--txt-color);
}

/* 📱 좁은 화면 — 구 사이트도 640px 이하에서 세로로 쌓았다(width: 100%) */
@media screen and (max-width: 900px) {
  /* 헤더가 얇아지므로(3.12rem + padding) 띄우는 양도 줄인다 */
  #location {
    scroll-margin-top: 5rem;
  }
  .fam_site {
    margin-top: 2.5rem;
  }
  .fam_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.62rem;
  }
  .fam_btn {
    min-height: 3.25rem;
  }
}


/* --------------------------------------------------------------------------
   3. bg_content
   -------------------------------------------------------------------------- */
.bg_content {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 130vh;
  padding-block: 2.5rem;
  overflow: hidden;
  background-image:
    linear-gradient(-60.1deg, rgba(0, 0, 0, 0) 16.31%, rgba(4, 4, 4, 0.44) 65.38%),
    url("../../images/sub/about/bg_greeting.png");
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply, normal;
}
.bg_content > .wFix {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding-block: 0;
}
.bg_content .desc_wrap,
.history_list,
.view_cont {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.bg_content .desc {
  display: flex;
  flex-direction: column;
  gap: 1.88rem;
}
.bg_content .desc_end,
.history_desc,
.ci_value_item {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}


/* --------------------------------------------------------------------------
   4. company_info
   -------------------------------------------------------------------------- */
.company_info .title_wrap {
  margin-bottom: var(--tit-gap);
}
.info_tbl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line-color-darker);
}
.info_tbl::after {
  content: "";
  border-top: 1px solid var(--line-color-darker);
}
/* [260904] 항목이 짝수면 이 빈 칸이 한 행을 더 만들어 왼쪽 절반에만 선이 겹친다 — 그때는 숨긴다. */
.info_tbl:has(.info_item:nth-child(2n):last-child)::after {
  display: none;
}
.info_item {
  display: flex;
  gap: 7.5rem;
  padding: 2.5rem 0 2.5rem 1.88rem;
  border-top: 1px solid var(--line-color-darker);
}
.info_item:nth-child(1),
.info_item:nth-child(2) {
  border-top-color: var(--line-color);
}
.info_item dt {
  flex: 0 0 auto;
  min-width: 6.5rem;
}
.info_item dd {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  margin: 0;
}


/* --------------------------------------------------------------------------
   5. history — 좌측 sticky 스텝 레일 + 우측 시대별 컨텐츠
   -------------------------------------------------------------------------- */
.history {
  position: relative;
  --history-top: 7.5rem;
}
.history_bg {
  position: sticky;
  top: var(--history-top);
  z-index: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}
.history_bg span {
  display: block;
  text-align: center;
  font-family: var(--font-eng), sans-serif;
  font-size: clamp(6rem, 13.5vw, 16.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #222;
  white-space: nowrap;
}
.history_inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 9.56rem 1fr;
  column-gap: 19.19rem;
  padding-top: 5.75rem;
}

.history_steps {
  position: sticky;
  top: var(--history-top);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.history_steps li {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  white-space: nowrap;
  transition: font-size 0.4s ease, color 0.4s ease;
}
.history_steps li.is_active {
  font-size: clamp(2rem, 3.2vw, 3.75rem);
  line-height: 1.23;
  color: var(--main-color-light);
}
.history_steps li.is_active:not(:first-child) {
  margin-top: 0.62rem;
}
.history_steps li.is_active:not(:last-child) {
  margin-bottom: 0.62rem;
}
.history_cont {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--line-color-darker);
}
.history_cont > .ty_sec_sm {
  font-weight: 700;
  color: var(--main-color-light);
  margin-bottom: 1.88rem;
}
.history_era {
  display: none;
}
.history_item {
  display: flex;
  gap: 7.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line-color-darker);
}
.history_item:first-of-type {
  border-top-color: var(--line-color);
}
.history_item > .ty_body {
  flex: 0 0 4rem;
}
.history_desc .ty_list {
  color: var(--txt-color);
}
@media screen and (max-width: 500px){
  .history_bg span{font-size: 5rem;}
}


/* --------------------------------------------------------------------------
   6. marquee_txt
   -------------------------------------------------------------------------- */
.marquee_txt {
  display: flex;
  align-items: center;
  height: fit-content;
  overflow: hidden;
}
.marquee_txt_track {
  display: flex;
  width: max-content;
  font-family: var(--font-eng), sans-serif;
  font-size: clamp(6rem, 13.5vw, 16.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px #2f2f2f;
  will-change: transform;
}


/* --------------------------------------------------------------------------
   7. location
   -------------------------------------------------------------------------- */
/* [260903] 푸터 CONTACT US 가 여기로 바로 온다(#location).
   ⚠ 헤더가 `position: fixed`(데스크탑 약 101px)라 이게 없으면 제목이 헤더에 가린다.
     Lenis 의 부드러운 스크롤도, 다른 페이지에서 넘어올 때의 브라우저 기본 점프도
     scroll-margin-top 을 함께 존중한다. */
#location {
  scroll-margin-top: 8rem;
}
.location .title_wrap {
  margin-bottom: var(--tit-gap);
  text-align: center;
  justify-items: center;
}
.location_wrap {
  display: grid;
  grid-template-columns: 936fr 664fr;
  gap: 3.75rem;
  align-items: stretch;
}
.location_map {
  min-height: 38rem;
}
.location_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 38rem;
  border: 0;
  filter: grayscale(1) invert(0.92) hue-rotate(180deg);
}


/* --------------------------------------------------------------------------
   8. 반응형
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .stats > .stats_item {
    padding: 0 1.88rem;
  }
  .bg_content {
    min-height: 110vh;
  }
  .bg_content .desc {
    gap: 1.25rem;
  }
  .info_item {
    gap: 3rem;
    padding: 1.88rem 0 1.88rem 1.25rem;
  }
  .history_inner {
    grid-template-columns: 7.5rem 1fr;
    column-gap: 3.75rem;
    padding-top: 3.75rem;
  }
  .history_item {
    gap: 0;
    padding: 1.25rem 0;
  }
  .location_wrap {
    grid-template-columns: 1fr;
  }
  .location_map,
  .location_map iframe {
    min-height: 25rem;
  }
  .marquee_txt {
    height: 8rem;
  }
}

@media screen and (max-width: 900px) {
  .sub_vis {
    min-height: 28rem;
    gap: 1.25rem;
  }

  .bg_content {
    min-height: 0;
    padding-block: var(--sec-gap);
    background-attachment: scroll, scroll;
  }
  .bg_content > .wFix {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .stats {
    flex-wrap: wrap;
  }
  .stats > .stats_item {
    flex: 1 1 50%;
    padding: 1.25rem;
  }
  .stats > .stats_item:nth-child(2n) {
    border-right: 0;
  }
  .stats > .stats_item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-color-dark);
  }
  /* ⚠ `.stats.vertical` 은 이 구간에도 column 이다 — 위 `.stats` 의 wrap 이
     그대로 걸려 같은 높이 부풀림이 생기므로 여기서 끈다. */
  .stats.vertical {
    flex-wrap: nowrap;
  }
  .stats.vertical > .stats_item {
    flex: 0 0 auto;
    padding: 1.25rem 0;
    border-right: 0;
    border-bottom: 0;
  }
  .stats.vertical > .stats_item:not(:last-child) {
    border-bottom: 1px solid var(--line-color-darker);
  }

  .info_tbl {
    grid-template-columns: 1fr;
  }
  .info_tbl::after {
    display: none;
  }
  .info_item {
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
  .info_item:nth-child(2) {
    border-top-color: var(--line-color-darker);
  }

  .history_inner {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    padding-top: 2.5rem;
  }
  .history_steps {
    display: none;
  }
  .history_era {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--sub-txt-color);
  }
  .history_item {
    flex-direction: column;
    gap: 0.75rem;
  }
  .history_item > .ty_body {
    flex: 0 0 auto;
  }

  .marquee_wrap > li {
    margin-right: 1.25rem;
  }
  .marquee_wrap > li:nth-child(even) {
    margin-top: 1.25rem;
  }
  .marquee_txt {
    height: fit-content;
    margin-block:var(--sec-gap);
  }
}
@media screen and (max-width: 500px){
  /* ⚠⚠ `flex-wrap: nowrap` 이 **반드시** 같이 와야 한다.
     900 이하에서 `.stats` 에 `flex-wrap: wrap` 을 켰는데(가로 2단 접기용), 방향이
     column 으로 바뀌면 그 wrap 이 `.stats_item` 의 `container-type: inline-size`
     와 부딪혀 **칸 높이가 제멋대로 부푼다** — 내용이 125px 인 칸이 197 → 216 →
     243 → 286px 로 커지고 아래에 그만큼 빈 공간이 남는다(칸이 많을수록 심해진다).
     세로 한 줄에서는 접을 이유도 없으니 끄는 것이 맞다. */
  .stats{
     flex-direction: column;
     flex-wrap: nowrap;
  }
  .stats > .stats_item{
    flex: 0 0 auto;
    border-bottom: 1px solid var(--line-color-darker);
  }
  .stats > .stats_item:not(:last-child){
    border-right: none;
  }
}
/* --------------------------------------------------------------------------
   org — 조직도 (contents/about/organization.php)
   -------------------------------------------------------------------------- */
.org_sec .org_head {
  position: relative;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-color-dark);
}
.org_date {
  position: absolute;
  right: 0;
  bottom: 2.5rem;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

.org {
  --org-cols: 3;
  --org-gap: 2rem;
  --org-elbow: 2rem;
  --org-box-h: 7rem;
  --org-radius: 0.75rem;
  --org-line: var(--line-color-darker);
  --org-rep-bg: var(--main-color);
  --org-head-bg: #f4f7fb;
  --org-head-txt: var(--main-color);
  --org-team-bg: var(--main-color-dark);
  max-width: 82.5rem;
  margin: 5rem auto 0;
}

.org_rep,
.org_staff,
.org_div_head,
.org_div_team {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-box-h);
  padding: 0.75rem 1.25rem;
  border-radius: var(--org-radius);
  font-size: clamp(1.12rem, 1.875vw, 2rem);
  font-weight: 700;
  line-height: 1.2778;
  letter-spacing: -0.02em;
  text-align: center;
}

/* 대표 — 아래 본부 줄의 가운데와 정확히 겹쳐야 한다.
   ⚠ `grid-column: 2` 로 두면 3열에서만 가운데다(2열이면 오른쪽으로 붙는다).
      그래서 전체 폭을 차지한 뒤 **한 열 폭으로 줄여 가운데 정렬**한다 —
      3열에서는 2번 칸과 결과가 같고, 2열·4열에서도 그대로 가운데에 선다. */
.org_top {
  display: grid;
  grid-template-columns: repeat(var(--org-cols), 1fr);
  gap: var(--org-gap);
}
.org_rep {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - (var(--org-cols) - 1) * var(--org-gap)) / var(--org-cols));
  flex-direction: column;
  gap: 0.25rem;
  min-height: 10rem;
  background-color: var(--org-rep-bg);
  color: var(--txt-color);
  box-shadow: 0 0 2.5rem rgba(0, 91, 181, 0.55);
}
.org_rep_eng {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.94rem, 1.35vw, 1.44rem);
  font-weight: 500;
  line-height: 1.2308;
  color: rgba(255, 255, 255, 0.75);
}

.org_stem {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--org-cols), 1fr);
  gap: var(--org-gap);
  padding-block: var(--org-elbow);
}
.org_stem::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--org-line);
  transform: translateX(-1px);
}
.org_staff {
  position: relative;
  grid-column: 3;
  background-color: var(--org-head-bg);
  color: var(--org-head-txt);
}
.org_staff::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: calc(50% + var(--org-gap));
  height: 2px;
  background-color: var(--org-line);
}

.org_rows {
  display: grid;
  gap: var(--org-gap);
}
.org_row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--org-cols), 1fr);
  gap: var(--org-gap);
  align-items: start;
  padding-top: var(--org-elbow);
}
.org_row::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - (var(--org-cols) - 1) * var(--org-gap)) / (var(--org-cols) * 2));
  right: calc((100% - (var(--org-cols) - 1) * var(--org-gap)) / (var(--org-cols) * 2));
  height: var(--org-elbow);
  border: 2px solid var(--org-line);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
}
.org_row.ty_stem::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: var(--org-elbow);
  background-color: var(--org-line);
  transform: translateX(-1px);
}
.org_div {
  display: grid;
  gap: 0.62rem;
  align-content: start;
}
.org_div_head {
  background-color: var(--org-head-bg);
  color: var(--org-head-txt);
}
.org_div_team {
  background-color: var(--org-team-bg);
  color: var(--txt-color);
  font-weight: 500;
}


@media screen and (max-width: 1200px) {
  .org {
    margin-top: 3.75rem;
  }
  .org_top {
    grid-template-columns: 1fr;
  }
  .org_rep {
    grid-column: 1;
    width: 100%;
    margin: 0 auto;
  }
  .org_stem {
    display: block;
    padding-block: 1.25rem 2.5rem;
    width: 100%;
  }
  .org_stem::before {
    display: none;
  }
  .org_staff {
    width: 100%;
    margin: 0 auto;
  }
  .org_staff::before {
    display: none;
  }
  .org_rows {
    gap: 2.5rem;
  }
  .org_row {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0;
  }
  .org_row::before,
  .org_row.ty_stem::after {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  .org_row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .org_rep,
  .org_staff,
  .org_div_head,
  .org_div_team {
    min-height: 5.5rem;
  }
  .org_rep {
    min-height: 6.5rem;
    width: 100%;
  }
  .org_date {
    position: static;
    margin-top: 0.5rem;
  }
}
.map_head,
.process_head,
.labs_head,
.roadmap_head,
.hr_head {
  justify-items: center;
  text-align: center;
}
.map_panel {
  position: relative;
  margin-top: var(--tit-gap);
  padding: 1.2rem 4rem;
  border-radius: 1.25rem;
}

.map_stage {
  position: relative;
  aspect-ratio: 1390 / 916;
}
.map_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map_pin {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  overflow: visible;
}
.map_pin::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 100%;
  background-color: var(--main-color-light);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}
.map_pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100%;
  opacity: 1;
  background: #a3cdff45;
  border: 1px solid var(--main-color-light);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.map_pin.ty_hq::after {
  border-color: #ff5a5a;
  background-color: #ff5a5a3d
}
.map_pin.ty_hq::before {
  background-color: #ff5a5a;
  border-color: #ff5a5a;
}
.map_pin:hover::before,
.map_pin:focus-visible::before {
  transform: translate(-50%, -50%) scale(1.25);
}
.map_pin:hover::after,
.map_pin:focus-visible::after {
  transform: scale(1.35);
  opacity: 0.4;
}
.map_pin:hover,
.map_pin:focus-visible {
  z-index: 2;
}
.map_pin:focus {
  outline: none;
}
/* ── [260903] 원형 국기 핀 · 한국 로고 네임택 ──────────────────────────
   시안('홈페이지 네트워크 및 재무정보' 1p)에서 핀이 점 → **원형 국기**로 바뀌었다.

   ⚠⚠ 기본 `.map_pin` 규칙(위쪽 닷 · 후광)은 **손대지 않았다** — 사내 PHYSICAL AI
     로드맵(contents/rnd/roadmap.php)이 같은 부품을 그대로 쓰고 있다.
     그래서 국기 핀은 `.ty_flag` 라는 **덧옷**으로만 얹고, 가상요소를 지운다.
     `.ty_flag` 를 떼면 즉시 예전 닷 모양으로 돌아온다.
   ⚠ 국기가 원 밖으로 안 삐져나오게 `border-radius:100%` + `overflow:hidden` 을
     **img 자신에게** 준다(받은 svg 안에도 원형 clip 이 있지만, 흰 테두리를
     여기서 그리므로 두 원의 반지름이 어긋나면 테두리가 얇아 보인다). */
.map_pin.ty_flag {
  width: 2.38rem;
  height: 2.38rem;
}
.map_pin.ty_flag::before,
.map_pin.ty_flag::after,
.map_pin.ty_hq::before,
.map_pin.ty_hq::after {
  content: none;
}
.map_flag {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
  /* border: 1.5px solid #ffffff69; */
  box-shadow: 0 0.25rem 0.62rem rgb(0 0 0 / 45%);
  transition: transform 0.25s ease;
}
.map_pin.ty_flag:hover .map_flag,
.map_pin.ty_flag:focus-visible .map_flag {
  transform: scale(1.14);
}

/* 한국 — 국기 대신 **항상 보이는** 로고 네임택.
   ⚠ 핀 좌표(구미)에 **로고 원이 얹히게** 한다 — 알약은 오른쪽으로 뻗으므로
     기본 `translate(-50%, -50%)` 를 x 만 로고 반지름만큼으로 바꿔 준다.
   ⚠ z-index 를 올려 둔다 — 알약이 넓어서 중국·일본 국기와 겹칠 수 있다. */
.map_pin.ty_hq {
  width: auto;
  height: auto;
  z-index: 3;
}
/* [260903] 회사명 글자를 빼고 **심볼만** 남겼다 → 알약이 아니라 국기와 같은 크기의
   둥근 흰 배지다. 그래서 자리 보정(translate(-1.25rem, -50%))도 필요 없어졌다
   — 기본 `.map_pin` 의 translate(-50%, -50%) 로 핀 좌표에 정확히 얹힌다.
   ⚠ `gap`·`white-space` 는 남겨 뒀다 — 회사명을 다시 넣어도 바로 알약이 된다
     (그때는 `border-radius: 2rem` 과 좌우 다른 padding 이 살아난다). */
.map_hq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.31rem;
  border-radius: 2rem;
  background-color: #ffffff;
  box-shadow: 0 0 0 0.19rem rgba(163, 205, 255, 0.45), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  /* ⚠⚠ 이 크기는 **국기 핀(.map_pin.ty_flag)과 짝**이다 — 한쪽만 바꾸면 한국 배지가
     옆 국기보다 크거나 작아진다. 반응형(900 이하)에도 같은 짝이 한 번 더 있으니
     여기를 고치면 그쪽도 같이 고칠 것. */
  width: 2.4rem;
  height: 2.4rem;
}
.map_hq img {
  display: block;
  width: 1.88rem;
  height: auto;
}
/* ⚠ 지금은 마크업에 <strong> 이 없다(심볼만 든 배지) — 회사명을 되살릴 때를 위한
   규칙이다. 색은 **로고 심볼과 같은 값**이어야 한다
   (images/common/logo_symbol.svg — 260903 에 #243776 → #0344A8 로 교체됐다). */
.map_hq strong {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0344A8;
}

.map_pop {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: max-content;
  max-width: 18rem;
  padding: 1.2rem 1.2rem;
  border-radius: 1rem;
  background-color: rgba(190, 195, 205, 0.5);
  backdrop-filter: blur(3px);
  border: 1px solid #ffffff54;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.38rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
/* 이름만 든 네임택 — 시안의 'USA' 알약. 설명 카드보다 **낮게** 만드는 게 핵심이다
   (높으면 바로 위에 있는 국기를 덮는다). */
.map_pop.ty_name {
  padding: 0.5rem 1rem;
  border-radius: 0.62rem;
}

/* [260903] 네임택을 **국기 아래로** 여는 핀(network.php 의 'pop' => 'down').
   기본은 위로 열리는데, 바로 위에 다른 핀이 있으면 그것을 덮는다
   — 일본이 한국 로고 배지에 가려서 만든 규칙이다.
   ⚠ 세로 방향만 뒤집는다. 좌우 정렬(.ty_left / .ty_right)은 그대로 걸려 있어야
     지도 끝에서 네임택이 잘리지 않는다 — 그래서 top/bottom 만 건드린다. */
.map_pin.ty_pop_down .map_pop {
  top: calc(100% + 0.6rem);
  bottom: auto;
}

.map_pin.ty_left .map_pop {
  left: auto;
  right: 0;
  transform: translate(0, 0.38rem);
}
.map_pin.ty_right .map_pop {
  left: 0;
  transform: translate(0, 0.38rem);
}
.map_pin:hover .map_pop,
.map_pin:focus-visible .map_pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.map_pin.ty_left:hover .map_pop,
.map_pin.ty_left:focus-visible .map_pop,
.map_pin.ty_right:hover .map_pop,
.map_pin.ty_right:focus-visible .map_pop {
  transform: translate(0, 0);
}
.map_pop strong {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-color);
  white-space: nowrap;
  line-height: 1;
}
.map_pop span {
  font-size: 1.12rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.map_legend {
  display: flex;
  justify-content: center;
  gap: 3.75rem;
  margin-top: 2.5rem;
}
.map_legend li {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.map_legend li::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 100%;
  background-color: var(--main-color-light);
  box-shadow: 0 0 0 0.25rem rgba(163, 205, 255, 0.25);
}
.map_legend li.ty_hq::before {
  background-color: #ff5a5a;
  box-shadow: 0 0 0 0.25rem rgba(255, 90, 90, 0.25);
}

/* ── 3대 활동 축 (PPT 18p Zone A/B/C) ─────────────────────────────────
   넓은 화면에서는 **지도 위에 띄운다**(PPT 구도). 좁아지면 아래로 흘러 목록이
   된다 — 그 전환을 `position` 하나로만 한다.

   ⚠ 기준은 `.map_panel` 이다. `.map_stage` 는 aspect-ratio 가 고정이라 그 안에
     두면 좁은 화면에서 카드가 지도 상자를 넘친다.
   ⚠ 자리(%)는 PPT 원본을 옮긴 것이다 — A 오른쪽 위 · B 왼쪽 가운데 · C 왼쪽 아래.
     셋 다 태평양·북극 쪽 **빈 바다** 위라 핀(경도 78~88% 아시아 · 21~23% 미주 ·
     53% 독일)과 겹치지 않는다. 핀을 늘리면 여기도 다시 볼 것.
   ⚠ `.stats` 를 쓰지 않는다 — 바로 아래 4거점 줄이 `.stats` 라, 같은 부품이
     연달아 두 줄이면 서로 구분이 안 된다(사용자 지적). 대신 핀 팝업
     `.map_pop` 과 같은 유리판 모양으로 맞춰 "지도에 얹힌 설명" 으로 읽게 했다. */
.map_zone {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: 15rem;
  padding: 1rem 1.12rem;
  border: 1px solid #ffffff54;
  border-radius: 1rem;
  background-color: rgba(190, 195, 205, 0.5);
  backdrop-filter: blur(3px);
}
.map_zone.ty_a { left: 66%; top: 10%; }
.map_zone.ty_b { left: 0;   top: 38%; }
.map_zone.ty_c {left: 0;top: 53%;}
.map_zone strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--main-color-light);
}
.map_zone span {
  font-size: 1.06rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.map_list {
  display: none;
}

/* ── 거점별 역할 줄 — 공용 `.stats` 에 씌우는 덧옷 ──────────────────────

   새 컴포넌트가 아니다. 세로선 · 900 이하 2단 접기 · 500 이하 세로 쌓기는
   전부 기본 `.stats` 가 이미 갖고 있으므로 **반응형 재정의를 두지 않는다.**
   여기서 손대는 건 두 가지뿐이다.

   1) 글자 크기 — 다른 stats 는 '25 YEARS' 처럼 짧은 값이 들어가는데 여기는
      거점 이름과 두 줄짜리 설명이 들어간다. 1500 기준 한 칸 안쪽이 295px 라
      .ty_tit_sm(최대 36px) · .ty_body(최대 26px) 를 그대로 두면 설명까지
      줄줄이 접힌다. 이 파일이 이미 쓰는 방식대로 **칸 기준 단위(cqw)** 를
      섞어 '화면 기준'과 '칸 기준' 중 작은 쪽을 쓰게 한다
      (.stats_item 에 container-type: inline-size 가 이미 걸려 있다).
   2) `justify-content: space-between` — 첫 칸 이름만 두 줄로 넘어가는데,
      이게 없으면 그 칸 설명만 한 줄 아래로 내려가 넷이 어긋나 보인다.
      로보틱스의 .rb_apply_list 가 같은 이유로 쓰는 처리다.
   -------------------------------------------------------------------------- */
.map_stats {
  margin-top: 3.75rem;
}
.map_stats > .stats_item {
  justify-content: space-between;
  gap: 0.88rem;
}
.map_stats .stats_tit .ty_tit_sm {
  font-size: clamp(1.06rem, min(1.5vw, 8.5cqw), 1.75rem);
}
.map_stats .stats_desc {
  font-size: clamp(0.94rem, min(1.05vw, 5.6cqw), 1.25rem);
}


@media screen and (max-width: 1200px) {
  .map_panel {
    padding: 1.38rem 2.5rem;
    margin-top: 0rem;
  }
  .map_pop {
    padding: 1.25rem;
  }
  .map_pop strong {
    font-size: 1.25rem;
  }
  .map_pop span {
    font-size: 1rem;
  }
}

@media screen and (max-width: 900px) {
  .map_pin {
    width: 1.25rem;
    height: 1.25rem;
  }
  .map_pin::before {
    width: 0.44rem;
    height: 0.44rem;
  }
  /* [260903] 국기 핀·네임택도 같이 줄인다.
     ⚠ ty_hq 의 z-index 는 **3 을 유지**한다(1 로 낮추면 알약이 옆 국기 아래로
       깔린다) — 예전에는 닷이라 겹쳐도 문제가 없었다. */
  .map_pin.ty_flag {
    width: 1.62rem;
    height: 1.62rem;
  }
  .map_flag {
    border-width: 1px;
  }
  .map_pin.ty_hq {
    z-index: 3;
  }
  /* ⚠ 국기 핀과 같은 1.62rem — 위 데스크탑 값(2.4rem)과 짝이다.
     안쪽 심볼은 데스크탑 비율(1.88/2.4 = 0.78)을 그대로 옮겼다. */
  .map_hq {
    gap: 0.31rem;
    padding: 0.16rem;
    box-shadow: 0 0 0 0.12rem rgba(163, 205, 255, 0.45), 0 0.19rem 0.5rem rgba(0, 0, 0, 0.45);
    width: 1.62rem;
    height: 1.62rem;
  }
  .map_hq img {
    width: 1.24rem;
  }
  .map_hq strong {
    font-size: 0.81rem;
  }
  .map_pop {
    gap: 0.25rem;
    max-width: 13rem;
    padding: 0.88rem 1rem;
    border-radius: 0.75rem;
  }
  .map_pop strong {
    font-size: 1rem;
  }
  .map_pop.ty_name {
    padding: 0.31rem 0.62rem;
    border-radius: 0.44rem;
  }
  .map_pop span {
    font-size: 0.81rem;
    white-space: normal;
  }
  .map_pin.ty_m_left .map_pop {
    left: auto;
    right: 0;
    transform: translate(0, 0.38rem);
  }
  .map_pin.ty_m_right .map_pop {
    left: 0;
    right: auto;
    transform: translate(0, 0.38rem);
  }
  .map_pin.ty_m_left:hover .map_pop,
  .map_pin.ty_m_left:focus-visible .map_pop,
  .map_pin.ty_m_right:hover .map_pop,
  .map_pin.ty_m_right:focus-visible .map_pop {
    transform: translate(0, 0);
  }
  .map_panel {
    padding: 1rem;
  }
  .map_legend {
    flex-wrap: wrap;
    gap: 0.4rem .2rem;
    margin-top: 1.5rem;
    justify-content: start;
  }
  .map_legend li {
    font-size: 0.88rem;
  }
  .map_list {
    display: grid;
    gap: 0.62rem;
    margin-top: 2.5rem;
  }
  /* 지도 위에 띄우기를 포기하는 지점 — 카드 셋이 대륙과 핀을 덮기 시작한다.
     흐름으로 되돌려 지도 아래 목록으로 쌓는다.
     ⚠ `position: static` 만으로는 안 된다 — left/top 이 남아 있어도 무시되지만,
       카드가 유리판이라 목록에서는 배경을 덜고 선으로만 끊는 게 낫다. */
  .map_zones {
    display: grid;
    gap: 0.62rem;
    margin-top: 2.5rem;
  }
  .map_zone {
    position: static;
    width: auto;
    max-width: none;
    padding: 1rem 0 0;
    border: 0;
    border-top: 1px solid var(--line-color-darker);
    border-radius: 0;
    background-color: transparent;
    backdrop-filter: none;
  }
  .map_stats {
    margin-top: 2.5rem;
  }
  .map_list li {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--main-color-dark);
  }
  .map_list li.ty_hq {
    background-color: var(--main-color);
  }
  .map_list li {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .map_list_flag {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100%;
    border: 1px solid #ffffffa8;
  }
  /* 한국 — 국기 자리에 로고 심볼. `box-sizing: border-box` 라 padding 을 줘도
     원 크기(1.5rem)는 그대로다 = 다른 국기와 글자 시작점이 맞는다. */
  .map_list_flag.ty_hq {
    padding: 0.19rem;
    border-color: transparent;
    background-color: #fff;
    object-fit: contain;
  }
  .map_list li span {
    width: 100%;
  }
  .map_list strong {
    font-family: var(--font-eng), var(--font-st1), sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--txt-color);
  }
  .map_list span {
    font-size: 0.94rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
  }
}
.partner_head,
.ci_head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 3.75rem;
  border-bottom: 1px solid var(--line-color-darker);
}
.partner_count {
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.partner_nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.partner_count_now {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1.38rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--txt-color);
  white-space: nowrap;
}

.partner_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.12rem;
  height: 3.12rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--txt-color);
  border: 1px solid #ffffff73;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.partner_arrow .material-symbols-outlined {
  font-size: 1.38rem;
}
.partner_arrow:hover {
  background-color: rgba(255, 255, 255, 0.32);
  transform: none;
  box-shadow: none;
}
.partner_arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.partner_arrow.swiper-button-disabled:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

.partner_swiper {
  margin-top: 3.75rem;
}
.partner_swiper .swiper-slide {
  height: auto;
}
.logo_card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, 0.02);
}
.logo_card img {
  display: block;
  max-width: 70%;
  max-height: 60%;
  object-fit: contain;
}
.logo_card span {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4a4a4a;
}

.portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 3.75rem;
}
.portfolio_list li {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  min-height: 10.75rem;
  padding: 2.5rem;
  border-top: 1px solid var(--line-color-darker);
}
.portfolio_list li:first-child {
  border-top: 0;
}
.portfolio_list strong {
  font-size: clamp(1.25rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2778;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.portfolio_list span {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}


@media screen and (max-width: 1200px) {
  .portfolio {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .portfolio_list li {
    min-height: 0;
    padding: 1.88rem 0;
  }
  .logo_card {
    height: 8rem;
  }
  .logo_card span {
    font-size: 2rem;
  }
}

@media screen and (max-width: 900px) {
  .partner_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
  }
  .partner_nav {
    align-self: flex-start;
  }
  .partner_swiper {
    margin-top: 2.5rem;
  }
  .logo_card {
    height: 6.5rem;
    border-radius: 0.88rem;
  }
  .logo_card span {
    font-size: 1.5rem;
  }
  .portfolio {
    margin-top: 2.5rem;
  }
  .portfolio_list li {
    gap: 0.38rem;
    padding: 1.25rem 0;
  }
  .partner_arrow {
    width: 2.7rem;
    height: 2.7rem;
  }
}

.ci_desc {
  display: grid;
  grid-template-columns: 9.38rem 1fr;
  gap: 2.5rem;
  margin-top: 2.88rem;
}

.ci_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
  margin-top: 3.75rem;
  padding: 7.5rem 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  background: url("../../images/sub/about/line_bg.svg") no-repeat center center / cover;
}
.ci_symbol,
.ci_logo_img {
  display: flex; 
  align-items: center;
  justify-content: center;
}

.ci_value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.75rem;
  margin: 0;
  text-align: center;
}
.ci_value dt {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.ci_value dd {
  margin: 0;
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.ci_value_plus {
  flex: 0 0 auto;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--txt-color);
}

.ci_color {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 3.75rem;
  padding-top: 3.75rem;
  border-top: 1px solid var(--line-color-darker);
}
.ci_color_list,
.direction_list,
.capa_list {
  display: grid;
  gap: 3.75rem;
}
.ci_color_list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 15.62rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
}
.ci_color_name {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ci_color_name strong,
.direction_item strong,
.flow_item strong {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1.25rem, 1.875vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.ci_color_name span,
.ci_color_code span {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.9);
}
.ci_color_code {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  text-align: right;
}
.ci_logos,
.folio_list,
.media_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.75rem;
  margin-top: 3.75rem;
}
.ci_logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 513 / 400;
  padding: 2.5rem 1.88rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  background: url("../../images/sub/about/line_bg.svg") no-repeat center center / cover;
}
.ci_logo_label {
  position: absolute;
  top: 2.5rem;
  left: 1.88rem;
}
.ci_logo_img img {
  display: block;
  max-width: 100%;
  height: auto;
}
.ci_logo.ty_h .ci_logo_img img { width: 21.88rem; }
.ci_logo.ty_v .ci_logo_img img { width: 12.5rem; }
.ci_logo.ty_s .ci_logo_img img { width: 5.44rem; }

/* [260904] 심볼 의미 — H=사람(네이비) / T=기술(블루). dt 앞 컬러칩이 그 매칭을 보여준다. */
.ci_value dt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
}
.ci_value dt em {
  font-style: normal;
  font-weight: 400;
  color: var(--sub-txt-color);
}
.ci_value_chip {
  flex: 0 0 auto;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
  /* 네이비(#022D7B)는 어두운 배경에 묻힌다 — 흰 링으로 형태를 살린다. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* 두 요소의 연결(HT) 의미 — 패널 안, ci_value 아래 */
.ci_panel_note {
  max-width: 46rem;
  margin: 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-color-darker);
  font-size: clamp(0.94rem, 1.15vw, 1.38rem);
  line-height: 1.65;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--sub-txt-color);
}
.ci_panel_note strong {
  font-weight: 600;
  color: var(--txt-color);
}

/* 로고 활용 — .ci_logos 와 같은 3열이되 패널이 아니라 사진 */
.ci_applys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.75rem;
  margin-top: 3.75rem;
}
.ci_apply_img {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
}
.ci_apply_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media screen and (max-width: 1200px) {
  .ci_desc,
  .ci_color {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .ci_panel {
    padding: 5rem 1.88rem;
    gap: 2.5rem;
  }
  .ci_symbol img {
    width: 25rem;
  }
  .ci_value {
    gap: 2.5rem;
  }
  .ci_color_list {
    gap: 2.5rem;
  }
  .ci_logos,
  .ci_applys {
    gap: 2.5rem;
  }
  .ci_panel_note {
    padding-top: 1.88rem;
  }
}

@media screen and (max-width: 900px) {
  .ci_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
  }
  .ci_panel {
    padding: 3.75rem 1.25rem;
    border-radius: 0.88rem;
  }
  .ci_symbol img {
    width: min(100%, 18rem);
  }
  .ci_value {
    flex-direction: column;
    gap: 1.25rem;
  }
  .ci_color_list li {
    min-height: 0;
    padding: 1.88rem;
    border-radius: 0.88rem;
  }
  .ci_logos {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .ci_logo {
    aspect-ratio: 16 / 9;
    padding: 2rem 1.25rem;
    border-radius: 0.88rem;
  }
  .ci_logo_label {
    top: 1.25rem;
    left: 1.25rem;
  }
  .ci_logo.ty_h .ci_logo_img img { width: min(100%, 15rem); }
  .ci_logo.ty_v .ci_logo_img img { width: 8rem; }
  .ci_logo.ty_s .ci_logo_img img { width: 4rem; }

  .ci_applys {
    grid-template-columns: 1fr;
    gap: 1.88rem;
  }
  .ci_apply_img {
    border-radius: 0.88rem;
  }
  .ci_panel_note {
    padding-top: 1.5rem;
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   [솔루션] 사업분야 상단 인트로 — 회사소개서 PPT 2p

       ┌──────────────────────────────────────┐
       │            INTRODUCTION               │
       │  COMPETITIVENESS   ◯ ⌒ ◯ ⌒ ◯          │
       │   ┌────┐  ┌────┐  ┌────┐              │
       │   │ IT │  │ EV │  │로봇 │              │
       │   └────┘  └────┘  └────┘              │
       │  STRATEGY          ◯ ⌄ ◯ ⌄ ◯          │
       │  STEP01 │ STEP02 │ STEP03 │ STEP04    │
       └──────────────────────────────────────┘

   ⭐ 경쟁력 → 카드 3장 → 전략 순으로 **위아래로 감싼다.** PPT 는 이 셋을 좌·중·우로
     늘어놓지만 그건 16:9 라 가로가 남기 때문이다. 세로로 긴 웹 섹션에서 흉내내면
     양옆 칸이 200px 남짓밖에 안 나온다 — 읽는 순서만 옮기고 방향을 눕혔다.
   ⚠ 카드 테두리색 `#002345` 는 팔레트에 없다. 피그마 값 그대로 — 사진의 어두운
     남색과 이어 붙이려고 쓴 색이라 토큰으로 올리지 않았다.
   -------------------------------------------------------------------------- */
.biz_intro {
  position: relative;
  overflow: hidden;
}
/* 배경사진은 **스크롤에 붙들어 둔다**(background-attachment:fixed).
   기업소개의 `.bg_content` 와 같은 방식이다 — 그쪽 주석도 같이 볼 것.

   ⚠ 두 겹 중 **그라디언트는 fixed 가 아니라 scroll 이다.** fixed 로 두면
     그라디언트가 화면 크기로 잡혀서, 아래 끝을 #121212 로 닫아 주는 지점이
     섹션 밑변과 어긋난다(스크롤할 때마다 경계가 움직인다).
   ⚠ business_bg.png 는 그 자체로 이미 아주 어둡다. 그래서 덮개는 위를 살짝
     누르고 **아래를 닫아 주는 정도**만 한다 — 더 얹으면 지구가 사라진다.
   ⚠ 끝색 #121212 는 본문 배경(#030303)보다 밝다. 피그마 값 그대로다. */
.biz_intro_bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(3, 3, 3, 0.55) 0%, rgba(0, 0, 0, 0.15) 32%, rgba(0, 0, 0, 0.45) 72%, #030303 100%), url(../../images/sub/solution/business_bg.png);
  background-attachment: scroll, fixed;
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
.biz_intro_inner {
  position: relative;
  z-index: 1;
}
.biz_intro_head {
  max-width: 60rem;
  margin-inline: auto;
  justify-items: center;
}

/* ── 무대 = 경쟁력 · 카드 · 전략을 위에서 아래로 ───────────────────
   ⭐ PPT 는 이 셋을 왼쪽·가운데·오른쪽으로 늘어놓는다. 그건 16:9 슬라이드라
     가로가 남기 때문이고, 세로로 긴 웹 섹션에서 그대로 흉내내면 양옆 칸이
     200px 남짓밖에 안 나온다 — 문구가 두세 줄로 접히고 카드까지 같이 좁아진다.
     → **읽는 순서만 그대로 옮기고 방향을 눕혔다.** 셋 다 제 폭을 다 쓴다.
   ⚠ 그래서 `.wFix` 를 벗어날 이유가 없어졌다(전면 100vw 판은 걷어냈다).
     양옆에 폭을 뺏기지 않으니 카드는 오히려 더 커진다 — 1920 에서 415 → 484px. */
.biz_stage {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: var(--tit-gap);
}

.biz_field_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  /* ⚠ `start` 여야 한다. 기본값(stretch)은 칸 높이가 줄 높이로 늘어나
     `aspect-ratio` 가 무시되고, 아래 둘째 칸 margin 만큼 나머지 둘도 길어진다. */
  align-items: start;
}
/* 둘째 장만 한 단 내려 세운다 — 셋이 일직선이면 사진 셋이 한 덩어리로 보인다.
   ⚠ transform 이 아니라 margin 이다. 카드에 `data-aos="fade-up"` 이 붙어 있고
     AOS 가 transform 으로 띄우므로, 여기서 transform 을 쓰면 서로 덮어쓴다. */
.biz_field_list > .biz_field:nth-child(2) {
  margin-top: 2.5rem;
}
.biz_field {
  position: relative;
  aspect-ratio: 440 / 530;
  border: 1px solid #002345;
  border-radius: 1.5rem;
  box-shadow: 0 2px 30px rgba(89, 156, 222, 0.2);
  overflow: hidden;
}
.biz_field_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.biz_field_cap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 3.12rem 1.5rem 0;
  text-align: center;
}
.biz_field_cap p {
  font-size: clamp(0.88rem, 1.05vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

/* ── 경쟁력 · 전략 — 카드를 위아래로 감싸는 호(arc) ──────────────────
   PPT 는 둥근 링 선 위에 아이콘 셋을 꿰어 놓는다. 그 링을 양옆에 두기에는 폭이
   모자라니, **위와 아래로 나눠** 각각 얕은 호로 눕혔다.
     위(경쟁력)  = 위로 부푼 호 — 카드를 덮는 뚜껑
     아래(전략)  = 아래로 부푼 호 — 카드를 받치는 그릇
   둘을 합치면 카드 셋을 둘러싸는 링 하나로 읽힌다.

   ⚠ 호는 `border-radius` 의 **슬래시 문법**으로 그린다. 가로로 넓고 세로로
     납작한 상자에 한쪽 테두리만 남기면 얕은 곡선이 된다. SVG 를 쓰지 않는 이유는
     화면 폭이 바뀔 때 아이콘 자리와 선이 저절로 같이 움직여야 하기 때문이다.
   ⚠ 호의 **양 끝이 바깥 아이콘 중심**, **꼭대기가 가운데 아이콘 중심**에 오도록
     `--arc` 하나로 묶었다. 이 값이 곧 가운데 항목을 밀어내는 양이다 —
     따로 두면 선과 아이콘이 어긋난다.
   ⚠ 좌우 16.666% 는 3칸 그리드에서 **바깥 아이콘의 중심**(1/6 · 5/6)이다.
     칸 수를 바꾸면 이 값도 같이 바꿔야 한다. */
.biz_edge_col {
  position: relative;
  /* 호의 높이 = 가운데 항목이 밀려 나가는 양.
     ⚠ 2.5rem 로는 곡선이 안 읽힌다 — 폭이 1000px 인데 40px 만 솟으면 가운데가
       거의 직선이고 양 끝만 처진 것처럼 보인다. 링으로 읽히려면 이만큼 필요하다. */
  --arc: 4rem;
  --ico: 4.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.88rem;
}
.biz_edge_col .tag {
  display: block;
  text-align: center;
  color: var(--main-color-light);
}
/* 아래 묶음의 라벨은 **호 안쪽 빈자리**에 띄운다.
   가운데 항목이 `--arc` 만큼 내려가 있어서, 목록 맨 위 가운데는 좌우 아이콘
   사이로 그만큼 비어 있다. 그 자리에 앉힌다.

   ⚠ `position: absolute` 라 자리를 차지하지 않는다 — 카드와 아이콘 사이를
     벌리지 않는 것이 요점이다. 흐름에 두면 라벨 높이 + 칸 gap 만큼(≈59px)
     다시 벌어진다.
   ⚠ 좌우를 0 으로 늘리고 글만 가운데 정렬한다. 폭을 좁게 잡아 가운데 세우면
     화면 폭이 바뀔 때 좌우 아이콘과 겹치는 구간이 생긴다.
   ⚠ 높이를 `--arc` 로 맞춰 그 빈 띠 안에서 수직 가운데에 놓는다. */
.biz_edge_col.ty_bottom .tag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: var(--arc);
  display: grid;
  place-items: center;
}
/* 카드 칸과 **같은 그리드**여야 아이콘이 카드 세로선에 맞아떨어진다.
   ⚠ gap 을 카드(1.5rem)와 다르게 주면 셋째 칸부터 눈에 띄게 어긋난다. */
.biz_edge_list {
  --gap: 1.5rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
/* 가운데 항목이 호만큼 밀려 나가는 자리를 비워 둔다.
   ⚠ **카드 쪽에는 두지 않는다.** 위 묶음은 위로, 아래 묶음은 아래로만 밀려 나가므로
     반대쪽 패딩은 카드와 아이콘 사이를 4rem 벌리는 죽은 여백이다. */
.biz_edge_col.ty_top .biz_edge_list {
  padding-top: var(--arc);
}
.biz_edge_col.ty_bottom .biz_edge_list {
  padding-bottom: var(--arc);
}
.biz_edge_list::before {
  content: "";
  position: absolute;
  left: calc((100% - var(--gap) * 2) / 6);
  right: calc((100% - var(--gap) * 2) / 6);
  height: var(--arc);
  border-style: dashed;
  border-color: rgba(163, 205, 255, 0.42);
  border-width: 0;
  pointer-events: none;
}
/* 호의 자리 — 둘 다 **위(top) 기준**으로 잡는다.
   ⚠ 아래 묶음을 `bottom` 으로 잡으면 안 된다. 목록 높이에는 아이콘 아래의 글
     높이와 padding-bottom 까지 들어 있어서, 글이 한 줄 늘거나 부연이 붙은 칸이
     있으면 선이 그만큼 내려가 아이콘을 벗어난다(실제로 60px 어긋났다).
   ⚠ 좌표 계산 (목록 위에서):
       바깥 항목 아이콘 중심 = --ico/2 (카드 쪽 패딩이 없다)
       가운데 항목 아이콘 중심 = --arc + --ico/2
     호 상자는 이 두 값 사이를 정확히 채운다(top = --ico/2 · 높이 = --arc).
     위·아래가 대칭이라 top 값이 둘 다 같다. */
.biz_edge_col.ty_top .biz_edge_list::before {
  top: calc(var(--ico) / 2);
  border-top-width: 1px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.biz_edge_col.ty_bottom .biz_edge_list::before {
  top: calc(var(--ico) / 2);
  border-bottom-width: 1px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.biz_edge_item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.biz_edge_col.ty_top .biz_edge_item:nth-child(2) {
  margin-top: calc(var(--arc) * -1);
}
.biz_edge_col.ty_bottom .biz_edge_item:nth-child(2) {
  margin-top: var(--arc);
}
.biz_edge_txt_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.biz_edge_icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--ico);
  height: var(--ico);
  border: 1px solid rgba(163, 205, 255, 0.28);
  border-radius: 50%;
  background: rgba(7, 18, 33, 0.72);
}
.biz_edge_icon .material-symbols-outlined {
  font-size: 2rem;
  color: var(--main-color-light);
}
.biz_edge_name {
  font-size: clamp(1rem, 1.15vw, 1.38rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.biz_edge_sub {
  font-size: clamp(0.81rem, 0.9vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

/* ── TURNKEY PRODUCTION PROCESS ──────────────────────────────────
   공용 `.stats` 위에 얹는 **얇은 스킨**이다(financial 의 `.fin_stats`,
   로보틱스의 `.rb_apply_list` 와 같은 방식). 따로 만든 컴포넌트가 아니다.

   stats 기본형과 다른 점은 둘뿐이다.
     1) 캡션(STEP01)이 제목 위 → 공용 `.ty_reverse` 가 맡는다
     2) 제목·설명이 세로로 쌓인다 → 기본형은 '20 YEARS' 처럼 가로로 붙는다
   ⚠ 세로선·색은 border 를 아예 손대지 않아 기본형을 그대로 쓴다(칸 사이에만 선다).
   ⚠⚠ **반응형 재정의를 두지 않는다.** 기본 `.stats` 가 900 이하 2단 접기(짝수 칸
     오른선 제거 + 첫 줄 아래선)와 500 이하 세로 쌓기를 이미 갖고 있다. 여기서
     flex-wrap·flex-basis·row-gap 을 따로 잡으면 이 목록만 다른 stats 와 어긋난다.
   ⚠ 그래서 마크업도 stats 그대로다:
       .stats_tit(제목 + 설명) · .stats_desc(STEP01)
     칸을 늘리려면 `$BIZ_STEPS` 에 한 줄만 더 적으면 된다. */
.biz_step_wrap {
  margin-top: 3.75rem;
}
.biz_step_tag {
  display: block;
  margin-bottom: 1.88rem;
  color: var(--main-color-light);
}
.biz_step > .stats_item {
  gap: 0.75rem;
}
.biz_step .stats_tit {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.biz_step .stats_desc {
  font-size: clamp(0.94rem, 1.1vw, 1.5rem);
  font-weight: 600;
  color: var(--main-color-light);
}

/* --------------------------------------------------------------------------
   [솔루션]
   -------------------------------------------------------------------------- */
.field_sec, .field_sec:hover,
.field_track, .field_track:hover {
  transition: none;
}
.field_intro .title_wrap {
  max-width: 70.19rem;
  margin: 0 auto;
  justify-items: center;
  text-align: center;
}

.field_sec {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.field_track {
  display: flex;
  width: max-content;
  height: 100%;
}
.field_item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}
.field_bg, .field_bg_item, .field_visual,
.capa_visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.field_bg_item,
.field_visual {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.field_bg_item {
  opacity: 0;
}
.field_bg_item.is_active {
  opacity: 1;
}
.field_visual {
  display: none;
}
.field_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 45%);
}
.field_inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.75rem;
  width: 100%;
  height: 100%;
  padding-block: 7.5rem;
}
.field_txt {
  max-width: 46rem;
}

/* ⚠ 칸 수를 못 박지 않는다. `repeat(3, 1fr)` 로 두면 항목이 2개인 슬라이드에서
   **셋째 칸이 그대로 빈다** — 사업분야(PRODUCT·CLIENT)와 로보틱스(PRODUCT·KEY)가
   둘 다 2개다. auto-flow 로 넘기면 넘어온 개수만큼만 칸이 생긴다. */
.field_spec {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin: 0;
}
.field_spec_item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 2.5rem;
  border-left: 1px solid var(--line-color-darker);
  justify-content: space-between;
}
.field_spec dt {
  font-size: clamp(1.12rem, 1.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.field_spec dd {
  margin: 0;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.88rem, 1.1vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

.field_page {
  position: absolute;
  top: 7.5rem;
  right: 5rem;
  z-index: 2;
}


/* --------------------------------------------------------------------------
   [솔루션] 중장기 GROWTH ROAD MAP — PPT 17p / 피그마 726:824·839·828 (2026-09-01)

       ┌───────────────────────────────────────────────┐
       │  EXHIBIT                                       │  ← .road_panel
       │  REVENUE TRAJECTORY 2025 → 2030 (억 원)         │
       │                                       5,000    │
       │                              3,500     ███     │
       │                     2,400     ███      ███     │
       │            1,500     ███      ███      ███     │
       │    858     ███      ███      ███      ███      │
       │   2025     2026     2027     2028     2030     │
       │  기존사업   신규로봇   배터리    구동계    글로벌      │
       └───────────────────────────────────────────────┘
       Robotics Foundation │ Technology Expansion │ Global …   ← .road_phase

   ⚠ 막대 높이는 마크업의 인라인 `height:%` 로 온다(값에 정비례). CSS 에 숫자를
     박지 않는다 — 데이터가 유일한 출처여야 값과 높이가 어긋나지 않는다.
   ⚠ 마지막 막대만 파랑(`#0080FF`)이다. 피그마가 그렇게 강조했다.
   -------------------------------------------------------------------------- */
.roadmap_sec .title_wrap {
  margin-bottom: var(--tit-gap);
}

.road_panel {
  padding: 3.75rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  background: #121212;
  overflow: hidden;
}
.road_exhibit {
  font-size: clamp(1.12rem, 1.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.road_exhibit span {
  font-weight: 400;
  color: var(--sub-txt-color);
}

.road_chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4rem;
  align-items: end;
}
.road_col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 막대가 자라는 판. **높이를 고정**해야 칸끼리 비율이 맞는다 —
   내용 높이에 맡기면 막대 %가 기준을 잃는다.

   ⚠⚠ **row(기본 방향)여야 한다.** column 으로 두면 막대의 `height` 가 flex 주축이
     되는데, 주축의 퍼센트는 flex-basis 해석 단계에서 0 으로 풀려 막대가 안 보인다.
     row 면 height 가 교차축이라 판 높이 기준으로 정상 계산된다 —
     투자정보 `.chart_col` 도 같은 이유로 row 다. */
.road_plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: clamp(16rem, 24vw, 26rem);
}

/* ── 차오름 — 투자정보 `.chart` 와 **완전히 같은 방식** ──────────────
   평소 `--h-cur: 0%` 이고, AOS 가 판에 `aos-animate` 를 붙이는 순간 마크업이
   내려준 `--h` 로 바뀐다. 그 사이를 height/bottom 이 transition 으로 메운다.
   전용 JS 가 없다.

   ⚠ 신호는 `.road_panel` 에 붙는 `aos-animate` 다 — `data-aos` 를 다른 데로
     옮기면 막대가 영원히 접힌 채로 남는다.
   ⚠ `--h` 는 마크업이 `.road_col` 에 준다. 막대와 값 라벨이 **같은 값**을 봐야
     라벨이 막대 끝에 붙어 같이 올라간다.
   ⚠ 값 라벨은 흐름에 두지 못하고 띄운다 — 판이 row flex 라 흐름에 두면 막대
     옆에 나란히 서 버린다. */
.road_col {
  --h-cur: 0%;
}
.road_panel.aos-animate .road_col {
  --h-cur: var(--h, 0%);
}
.road_val {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--h-cur);
  margin-bottom: 0.62rem;
  font-size: clamp(1.25rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--txt-color);
  transition: bottom 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
.road_bar {
  width: 100%;
  height: var(--h-cur);
  border-radius: 1.5rem 1.5rem 0 0;
  background: linear-gradient(180deg, var(--main-color-light) 0%, #121212 100%);
  transition: height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
.road_col.ty_peak .road_bar {
  background: linear-gradient(180deg, #0080ff 0%, #121212 100%);
}
@media (prefers-reduced-motion: reduce) {
  /* ⚠ [260903] `.is_reduce_motion` 과 **짝**이다 — 그 클래스는 common.js 의
     RESPECT_REDUCED_MOTION 이 true 일 때만 <html> 에 붙는다.
     지금은 OS 설정 무시라 클래스가 없고, 그래서 이 부분은 아무 일도 하지 않는다. */
  .is_reduce_motion .road_col {
    --h-cur: var(--h, 0%);
  }
  .is_reduce_motion .road_bar,
  .is_reduce_motion .road_val {
    transition: none;
  }
}
.road_year {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.2vw, 1.62rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.road_note {
  margin: 0.5rem 0 0;
  font-size: clamp(0.75rem, 0.85vw, 1rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

/* ── PHASE 3단 — 공용 `.stats` 위에 얹는 얇은 스킨 ────────────────
   `.biz_step` 과 같은 방식이다. stats 기본형이 '큰 제목 → 작은 캡션' 이라
   순서를 뒤집을 필요도 없고, 칸 사이 세로선·여백·반응형이 전부 공용에서 온다.
   ⚠ 반응형 재정의를 두지 않는다 — 두면 이 목록만 다른 stats 와 어긋난다. */
.road_phase {
  margin-top: 3.75rem;
}

.direction {
  position: relative;
  margin-top: var(--tit-gap);
}
.direction_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-height: 10rem;
  padding: 2.12rem 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  text-align: center;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
  overflow: hidden;
  background: #121212;
}
.direction_fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--main-color);
  transform: scaleY(0);
  transform-origin: top center;
}
.direction_item.ty_now {
  border-color: transparent;
}
.direction_item.ty_now .direction_fill {
  transform: scaleY(1);
}
.direction_item.ty_now,
.direction_item.is_reached {
  box-shadow: 0 0 3.75rem rgba(0, 91, 181, 0.45);
}
.direction_item.is_reached {
  border-color: transparent;
}
.direction_item span,
.flow_desc {
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
}
/* ⚠⚠ 커넥터 높이는 **`.direction_list` 의 gap 과 정확히 같아야 한다** (2026-08-20 수정).
   전에는 `height: 68px` + `top: calc(50% - 1.9rem)` 로 값을 따로 박아 뒀는데,
   실제 여백은 데스크탑 3.75rem(60px) · 모바일 2.5rem(37.5px)이라 **바가 여백보다 커서
   박스의 둥근 모서리 위로 겹쳐 올라갔다.** 박스가 둘 다 파랗게 채워지는 구간에서는
   두 박스가 이상한 허리로 이어진 한 덩어리처럼 보였다(모바일에서 특히 눈에 띔).
   → `top: 50%` + `translate(-50%, -50%)` 로 여백 중앙에 정확히 놓고,
     height 를 gap 과 같은 값으로 맞춘다. gap 을 바꾸면 여기도 같이 바꿀 것. */
.direction_bar {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 10px;
  height: 3.75rem;
  background-color: rgba(255, 255, 255, 0.16);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.direction_bar i,
.flow_bar i {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  transform: scaleY(0);
  transform-origin: top center;
}


@media screen and (max-width: 1200px) {
  .road_panel {
    padding: 2.5rem;
  }
  .road_chart {
    gap: 1rem;
  }
}

@media screen and (max-width: 900px) {
  .road_panel {
    padding: 1.88rem;
  }
  /* ⚠ 다섯 칸을 접지 않는다. 막대그래프는 **나란히 서야** 커지는 게 보인다.
     대신 목록에 최소 폭을 주고 **가로로 스크롤**시킨다(.chart_scroll).
     34rem 은 칸당 6.8rem — 연도 아래 두 줄 설명이 들어가는 최소치다. */
  .road_chart {
    min-width: 34rem;
    gap: 0.75rem;
    height: 100%;
  }
  .road_plot {
    height: clamp(9rem, 26vw, 13rem);
  }
  .road_bar {
    border-radius: 0.75rem 0.75rem 0 0;
  }
  .road_note {
    font-size: 0.75rem;
  }
  /* ⚠ 칸 접기·선·여백은 공용 `.stats` 반응형이 다 한다 — 여기서 손대면 이 목록만
     다른 stats 와 어긋난다. 위 여백만 줄인다. */
  .road_phase {
    margin-top: 2.5rem;
  }
}

@media screen and (max-width: 500px) {
  .road_panel {
    padding: 1.5rem 1.25rem;
  }
  .road_exhibit {
    margin-bottom: 1.88rem;
  }
  /* ⚠ 예전에는 이 폭에서 `.road_note` 를 감췄는데, 연도만 남으면 그 해에 무엇을
     하는지가 사라져 그래프가 숫자 다섯 개로만 읽힌다. 감추지 않고 목록을 가로로
     넘겨서(위 `min-width` + `.chart_scroll`) 그대로 보여 준다. */
  .road_note {
    font-size: 0.69rem;
  }
}

@media screen and (max-width: 1200px) {
  .biz_stage {
    gap: 2.5rem;
  }
  .biz_field_list {
    gap: 1rem;
  }
  /* ⚠ gap 을 바꿀 때는 `--gap` 을 쓴다. 호 양 끝 좌표가 이 값을 참조한다. */
  .biz_edge_list {
    --gap: 1rem;
  }
  .biz_field_cap {
    padding-top: 2.5rem;
  }
  .biz_edge_item {
    gap: 1rem;
  }
  /* ⚠ 아이콘을 줄일 때는 `--ico` 를 바꾼다. width/height 를 직접 건드리면
     호(arc) 위치(`--ico`/2)가 따라오지 않아 선과 아이콘이 어긋난다. */
  .biz_edge_col {
    --arc: 3rem;
    --ico: 3.75rem;
  }
}

@media screen and (max-width: 900px) {
  .biz_intro_bg {
    background-attachment: scroll, scroll;
  }
  .biz_stage {
    gap: 3rem;
  }
  .biz_field_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .biz_field_list > .biz_field:nth-child(2) {
    margin-top: 0;
  }
  /* ⚠ 세로 한 줄 + 전체 폭이면 440:530 비율로는 카드 한 장이 950px 을 넘는다.
     화면 하나를 카드 한 장이 다 먹으므로 **비율을 눕힌다.**
     ⚠ object-position 을 같이 내려야 한다. cover 로 세로를 잘라내는데 가운데
       기준이면 아래쪽 제품컷이 잘린다 — 위쪽 빈 자리를 더 버리는 쪽으로 옮긴다. */
  .biz_field {
    aspect-ratio: 16 / 10;
  }
  .biz_field_img {
    object-position: center 62%;
  }
  .biz_field_cap {
    padding: 1.88rem 1rem 0;
  }
  /* 한 칸씩 쌓이면 호가 성립하지 않는다 — 선을 지우고 밀어낸 자리도 되돌린다.
     ⚠ `--arc: 0` 하나로 패딩·가운데 항목 margin 이 한꺼번에 풀린다. 선만
       display:none 하고 이걸 안 풀면 둘째 항목이 이유 없이 어긋난 채 남는다. */
  .biz_edge_col {
    --arc: 0rem;
    gap: 1rem;
  }
  .biz_edge_list {
    grid-template-columns: minmax(0, 1fr);
    --gap: 1.5rem;
  }
  .biz_edge_list::before {
    display: none;
  }
  .biz_edge_list {
    --gap: 0rem;
  }
  .biz_edge_item {
    padding-block: 1.25rem;
  }
  .biz_edge_item + .biz_edge_item {
    border-top: 1px solid var(--line-color-darker);
  }
  .biz_edge_col .tag {
    text-align: left;
  }
  /* 호가 없으니 띄울 빈자리도 없다 — 아래 묶음 라벨을 흐름으로 되돌린다.
     ⚠ `position` 만 풀면 안 된다. height/display/place-items 까지 되돌려야
       라벨이 0 높이 그리드로 남아 글이 겹친다. */
  .biz_edge_col.ty_bottom .tag {
    position: static;
    height: auto;
    display: block;
  }
  .biz_edge_item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1.25rem;
  }
}

@media screen and (max-width: 500px) {
  .biz_field_list {
    gap: 1rem;
  }
  /* ⚠ 이 폭에서는 16:10 을 그대로 쓸 수 없다 — 카드가 368×230 까지 납작해져
     캡션 두 줄이 제품컷 위로 내려앉는다(글과 사진이 겹친다). 한 단만 높인다. */
  .biz_field {
    aspect-ratio: 5 / 4;
  }
  .biz_field_cap {
  }
  .biz_edge_col {
    --ico: 3.12rem;
  }
  .biz_edge_icon .material-symbols-outlined {
    font-size: 1.62rem;
  }
}

@media screen and (max-width: 1200px) {
  .field_inner {
    padding-block: 5rem;
    gap: 2.5rem;
  }
  .field_txt {
    max-width: none;
  }
  .field_page {
    top: 5rem;
    right: 3rem;
  }
  .field_spec {
    gap: 1.5rem;
  }
  .field_spec_item {
    gap: 0.75rem;
    padding-left: 1.5rem;
  }
}

@media screen and (max-width: 900px) {
  .field_sec {
    height: auto;
    overflow: visible;
  }
  .field_track {
    flex-direction: column;
    width: 100%;
  }
  .field_item {
    width: 100%;
    height: auto;
    min-height: 80vh;
  }
  .field_bg {
    display: none;
  }
  .field_visual {
    display: block;
  }
  .field_visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.78) 0%,
                rgba(0, 0, 0, 0.45) 55%,
                rgba(0, 0, 0, 0.25) 100%);
  }
  .field_inner {
    padding-block: 4rem 3rem;
    gap: 5rem;
  }
  /* ⚠ `grid-template-columns` 만으론 세로로 안 쌓인다 — 기본 규칙이
     `grid-auto-flow: column` 이라 템플릿 밖으로 칸을 계속 오른쪽에 만든다.
     흐름 자체를 row 로 돌려야 한 줄에 하나씩 내려온다. */
  .field_spec {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .field_spec_item {
    gap: 0.38rem;
    padding: 1.25rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-color-darker);
  }
  .field_page {
    display: none;
  }
  .direction_item {
    min-height: 0;
    padding: 1.5rem 1.25rem;
    border-radius: 0.88rem;
  }
  .direction_list {
    gap: 2.5rem;
  }
  .direction_bar {
    height: 2.5rem;
  }
}


/* --------------------------------------------------------------------------
   product — 주력제품 목록
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   tab_wrap / tab_btn — 공용 밑줄형 탭. 
   -------------------------------------------------------------------------- */
.tab_wrap {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab_wrap::-webkit-scrollbar {
  display: none;
}
.tab_wrap > li,
.tab_wrap::after {
  border-bottom: 3px solid var(--line-color-darker);
}
.tab_wrap > li {
  display: flex;
  flex: 0 0 auto;
}
.tab_wrap::after {
  content: "";
  flex: 1 1 0;
}

.tab_btn {
  position: relative;
  overflow: visible;
  min-width: 0;
  height: 5.62rem;
  padding: 0 2.5rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(1.12rem, 1.5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.tab_btn:hover {
  color: var(--txt-color);
}
.tab_btn.is_active {
  font-weight: 700;
  color: var(--txt-color);
}
.tab_btn.is_active::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--txt-color);
}
.product_none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 22.5rem;
  border: 1px solid var(--line-color-darker);
  font-size: 1.12rem;
  color: var(--sub-txt-color);
  text-align: center;
  margin-top: 2rem;
  border-radius: .5rem;
}
.product_none .material-symbols-outlined {
  font-size: 2rem;
  color: var(--sub-txt-color);
}
@media screen and (max-width: 900px) {
  .product_none {
    min-height: 15rem;
    font-size: 1rem;
  }
}

.product_wrap {
  transition: opacity 0.2s ease;
}
.product_wrap.is_loading {
  opacity: 0.4;
  pointer-events: none;
}

.product_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.75rem;
  margin-top: 3.75rem;
}
.product_link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 800 / 520;
  padding: 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  overflow: hidden;
}

.product_visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}
.product_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.product_img.ty_on {
  padding: 0;
  object-fit: cover;
  opacity: 0;
  object-position: bottom;
}
.product_link:hover .product_img {
  opacity: 0;
}
.product_link:hover .product_img.ty_on {
  opacity: 1;
  transform: scale(1.1);
}
.product_visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.65) 0%,
              rgba(0, 0, 0, 0.25) 45%,
              rgba(0, 0, 0, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.product_link:hover .product_visual::after {
  opacity: 1;
}

.product_cont {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.product_cat {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.88rem, 1.1vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--main-color-light);
  margin-bottom: .8rem;
}
.product_name {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1.12rem, 1.5vw, 1.62rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.product_desc {
  font-size: clamp(0.88rem, 1.1vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.product_paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 4rem;
}
.product_paging_side,
.product_paging_num {
  display: flex;
  align-items: center;
}
.product_page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  transition: background-color 0.25s ease, color 0.25s ease;
  line-height: 1;
}
.product_page:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--txt-color);
}
.product_page.is_active {
  color: var(--txt-color);
  font-weight: 700;
}
.product_page .material-symbols-outlined {
  font-size: 1.38rem;
}


@media screen and (max-width: 1200px) {
  .tab_btn {
    height: 4.5rem;
    padding: 0 1.5rem;
  }
  .product_list {
    gap: 2rem;
    margin-top: 2.5rem;
  }
  .product_link {
    padding: 1.88rem;
  }
}

@media screen and (max-width: 900px) {
  .tab_btn {
    height: 3.75rem;
    padding: 0 1.12rem;
  }
  .product_list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .product_link {
    aspect-ratio: 4 / 3;
    padding: 1.5rem;
    border-radius: 0.88rem;
  }
  
  .product_paging {
    gap: 0.5rem;
    margin-top: 2.5rem;
  }
  .product_page {
    width: 2.38rem;
    height: 2.38rem;
  }
  .product_page .material-symbols-outlined {
    font-size: 1.12rem;
  }
}

@media screen and (max-width: 500px) {
  .product_page.ty_edge {
    display: none;
  }
  .product_paging {
    gap: 0.25rem;
  }
  .product_page {
    width: 1.88rem;
    height: 1.88rem;
    font-size: 0.94rem;
  }
  .product_page .material-symbols-outlined {
    font-size: 1rem;
  }
}


/* --------------------------------------------------------------------------
   prd — 주력제품 [260901 개편]

   이전 홈페이지(sub02_01~03)의 부품 페이지 구성을 이 사이트 색·간격으로 옮긴 것.
   ⚠ 위 `.product_*` 은 예전 격자 목록(AJAX 페이징) 것이다. 지금 화면에는 쓰이지
     않지만 main_products_list.php 가 파일로 남아 있어 함께 남겨 뒀다.
   ⚠ 이름을 `prd_` 로 새로 뗀 이유: 이전 홈페이지의 `.product_wrap`·`.img_box`·
     `.list_cate` 는 **이 사이트에 이미 다른 뜻으로 있는 이름**이다
     (`.product_wrap` = 예전 AJAX 컨테이너 · `.img_box` = 조직도·지도 등).
   -------------------------------------------------------------------------- */
/* 분야를 갈아 끼우는 판. 탭을 누르면 js/sub.js 가 `hidden` 만 옮긴다.
   `.prd_panel` 이 곧 `.wFix` 다(안쪽에 래퍼를 한 겹 더 두지 않는다).
   ⚠ 그래서 `.prd_panel` 에 display 를 주면 안 된다 — `hidden` 을 덮어 안 감춰진다.
     `.wFix` 에는 display 가 없어 지금은 괜찮고, 혹시 모를 때를 대비해 못 박아 둔다.
   ⚠ 탭줄과 판이 형제 `.wFix` 라 공용 규칙 `.wFix + .wFix { padding-top: 0 }` 이
     걸린다 — 위 여백은 탭줄의 아래 패딩 하나로 정리된다(의도한 것). */
/* ── [260903] 알약 탭 (로보틱스 페이지) ────────────────────────────────────
   기존 `.tab_btn` 은 **밑줄 탭**이다(아래 3px 선 · 5개 페이지가 쓴다). 로보틱스는
   알약 모양으로 해 달라는 요청이라 별도 부품으로 둔다 — `.tab_btn` 을 건드리면
   보도자료·홍보영상·IR자료실·인증·포트폴리오 다섯 페이지가 같이 바뀐다.

   ⭐ 모양은 **하나의 알약 안에 두 칸이 든 형태**다(세그먼트 컨트롤).
     겉 알약(.prd_tab_wrap)이 테두리·배경을 맡고, 안의 버튼은 테두리가 없다.
     켜진 칸만 색이 채워지고 그림자가 살짝 들어가 **떠 있는 것처럼** 보인다.
   ⚠ 그래서 `.tab_pill` 에 개별 테두리를 주면 안 된다 — 겉 알약과 이중선이 된다.

   ⚠ 판을 갈아 끼우는 일은 js/sub.js 의 initPrdTab 이 한다. 그쪽은 클래스가 아니라
     **`data-cat` 속성**으로 버튼을 찾으므로, 여기 모양을 바꿔도 JS 는 안 건드려도 된다.
   ⚠ 활성 표시는 `.is_active` 다(JS 가 붙인다). 색만으로 구분하지 않고 **글자 굵기까지**
     바꾼다 — 색각 이상에서도 어느 쪽이 켜졌는지 보이게. */

/* 탭이 앉는 칸. `.wFix` 를 쓰지 않는 이유는 마크업 쪽 주석 참고(세로 여백 180px).
   ⚠ 아래 여백은 여기 하나로 정리한다 — 판의 첫 섹션 위 패딩은 아래에서 지운다. */
.prd_tab_area {
  display: flex;
  justify-content: center;
  padding: 5rem 3rem 3.12rem;
}
.prd_tab_wrap {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: .4rem;
  border: 1px solid #a3cdff42;
  border-radius: 1000px;
  background-color: rgba(255, 255, 255, 0.05);
}
.tab_pill {
  min-width: 0;
  height: 4.25rem;
  padding: 0 2rem;
  border: 0;                     /* ⚠ 겉 알약이 테두리를 맡는다 */
  border-radius: 1000px;
  background: none;
  font-size: clamp(1rem, 1.2vw, 1.38rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.tab_pill:hover,
.tab_pill:focus-visible {
  color: var(--txt-color);
}
.tab_pill.is_active {
  background-color: var(--main-color);
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.35);
  font-weight: 700;
  color: var(--txt-color);
}

/* 탭 바로 아래 판의 **첫 섹션은 위 여백을 지운다.**
   `.wFix` 는 위아래 --sec-gap 을 갖는데, 탭줄이 이미 아래 여백을 갖고 있어서
   그대로 두면 두 여백이 겹쳐 460px 이 된다(`.wFix + .wFix` 규칙이 판 사이에
   div 가 끼어 있어 안 걸린다 — 그 자리를 여기서 메운다).
   ⚠ 첫 섹션에만 걸린다. 판 안의 둘째 섹션부터는 원래 여백을 그대로 쓴다. */
.prd_panel > .wFix:first-child,
.prd_panel > *:first-child > .wFix {
  padding-top: 0;
}

@media screen and (max-width: 900px) {
  .prd_tab_area {
    padding: 3.12rem 1.25rem 2.5rem;
  }
  .prd_tab_wrap {
    gap: 0.19rem;
    padding: 0.31rem;
  }
  .tab_pill {
    height: 2.88rem;
    padding: 0 1.25rem;
  }
}

.prd_panel[hidden] {
  display: none;
}

.prd_list {
  display: grid;
  gap: var(--tit-gap);
  padding-top: 3.75rem;
  border-top: 1px solid var(--line-color-darker);
  margin-top: var(--sec-gap);
}
.prd_tit {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}
.prd_tit strong {
  font-size: clamp(1rem, 1.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--main-color-light);
}
.prd_tit span {
  font-size: clamp(0.88rem, 1.2vw, 1.38rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
/* 왼쪽 큰 사진과 오른쪽 부품 줄의 **높이를 딱 맞춘다.** 둘 다 `stretch` 라
   긴 쪽에 짧은 쪽이 따라붙어 아래 선이 나란해진다.
   ⚠ 이게 끝없이 늘어나지 않는 건 부품컷 사진 세로를 잘라 뒀기 때문이다
     (아래 `.prd_parts .prd_box img { max-height }`). 그걸 풀면 칸이 사진 크기를
     따라가고, 두 칸이 서로를 밀어 한없이 길어진다. */
.prd_imgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.prd_imgs.ty_solo {
  grid-template-columns: minmax(0, 1fr);
}
.prd_box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* ⚠ `width: 100%` 를 주지 않는다. 사진이 제품컷이라 크기가 제각각인데(220px 짜리
   부품컷부터 1121px 짜리 묶음컷까지) 폭을 채우게 하면 작은 것이 억지로 늘어나
   흐려진다. 원래 크기로 두고 칸을 넘칠 때만 줄인다 — 이전 홈페이지도 같았다. */
.prd_box img {
  max-width: 100%;
  height: auto;
}
.prd_shot {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.prd_cate {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  z-index: 1;
  max-width: calc(100% - 2.5rem);
  padding: 0.31rem 0.75rem;
  border-radius: 100px;
  background-color: rgba(4, 18, 31, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-size: clamp(0.75rem, 1vw, 1.12rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.prd_parts {
  display: grid;
  gap: 1.25rem;
  align-content: stretch;
}
/* 부품 칸 — 사진이 작아 여백을 줄인다(큰 사진 칸의 2.5rem 은 과하다).
   ⚠ 위쪽만 두툼하다: 이름표(.prd_cate)가 사진 위에 겹치지 않게 띠를 남긴 것이다.
   ⚠⚠ 사진 세로를 **잘라 준다.** 부품컷이 원본 220~240px 라 그대로 두면 칸 하나가
      285px 이 되고, 다섯·여섯 칸이 쌓이면 오른쪽이 왼쪽 큰 사진의 두 배로 길어진다.
      폭은 `--span` 이 정하고, 세로는 여기서 잡는다. */
.prd_parts .prd_box {
  min-height: 0;
  padding: 2.75rem 1.25rem 1.25rem;
}
.prd_parts .prd_box img {
  max-height: 7rem;
  width: auto;
}
/* 한 줄에 부품 하나면 칸이 넓다 — 사진을 폭에 채우고 세로 상한을 푼다.
   ⚠ 상한(7rem)은 부품 칸 여러 개가 나란히 설 때 오른쪽 줄이 왼쪽 큰 사진의
     두 배로 길어지는 걸 막으려고 둔 것이라, 한 칸짜리 줄에는 필요가 없다. */
.prd_parts.ty_full .prd_box img {
  width: 100%;
  max-height: none;
  /* ⚠ 원본보다 2배 넘게는 늘리지 않는다(`--nw` 는 PHP 가 넣어 주는 원본 폭 px).
     220px 짜리 부품컷을 646px 로 늘리면 뭉개져서 안 쓴 것만 못하다. */
  max-width: calc(var(--nw, 9999) * 2px);
}
/* 폭이 아니라 **세로**를 기준으로 맞추는 그룹(PHP 의 `pmax`).
   ⚠ 정사각 부품컷은 폭을 채우면 그만큼 키가 커진다 — 두세 개 쌓이면 줄 하나가
     다른 줄의 두 배로 길어지고, 짝인 왼쪽 대표컷 칸까지 같이 늘어난다.
     `width` 를 auto 로 되돌리는 게 핵심이다. 세로만 눌러 두면 폭은 그대로라
     사진이 납작하게 찌그러진다. */
.prd_parts.ty_full.ty_pmax .prd_box img {
  width: auto;
  height: var(--pmax);
  max-width: 100%;
}
.prd_parts {
  grid-template-columns: repeat(var(--pcols, 1), minmax(0, 1fr));
}
.prd_parts .prd_box {
  grid-column: span var(--span, 1);
}

/* 사진 위 반짝이는 점 ---------------------------------------------------
   아래 부품 사진에 커서를 올리면 짝이 되는 점이 켜진다(js/sub.js 의 initPrdDot).
   ⚠ 위치는 `--x/--y` 로 **사진 기준 %** 다 — 이전 홈페이지처럼 px 로 잡으면
     화면 크기마다 값을 다시 넣어야 한다. */
.prd_main.is_on {
  border-color: var(--main-color-light);
  box-shadow: 0 0.62rem 1.25rem rgba(0, 0, 0, 0.35);
}
/* ⚠ 모양(크기·구성)은 글로벌 네트워크 지도의 핀(`.map_pin`)과 같은 값이다 —
   24px 틀 · 안쪽 11px 점 · 둘레 반투명 후광. 색만 다르다.
   색은 `--dot` 한 군데서만 나온다 — 점·테두리·후광·빛무리가 모두 이 값을 쓴다. */
.prd_dot {
  --dot: #2794ff;
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
}
.prd_dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 100%;
  background-color: var(--dot);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.prd_dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100%;
  border: 1px solid var(--dot);
  background: color-mix(in srgb, var(--dot) 27%, transparent);
}
.prd_dot.is_on {
  z-index: 2;
}
.prd_dot.is_on::before {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 1.25rem 0.38rem color-mix(in srgb, var(--dot) 90%, transparent);
}
.prd_dot.is_on::after {
  animation: prd_ping 1.2s ease-out infinite;
}
@keyframes prd_ping {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media screen and (max-width: 1200px) {
  .prd_box {
    padding: 1.88rem;
  }
}

@media screen and (max-width: 900px) {
  .prd_imgs {
    grid-template-columns: minmax(0, 1fr);
  }
  .prd_list {
    padding-top: 2.5rem;
  }
  .prd_box {
    min-height: 9rem;
    padding: 1.5rem;
  }
  .prd_cate {
    left: 0.75rem;
    top: 0.75rem;
    max-width: calc(100% - 1.5rem);
  }
  /* ⚠ 이 폭에서는 사진을 **칸 폭에 채운다.** 넓은 화면에선 원래 크기를 지키는 게
     맞지만(작은 것이 늘어나면 흐려진다), 화면이 좁아지면 240px 짜리가 362px 칸
     안에 66% 만 차서 덩그러니 남는다. 좁을 때는 채우는 쪽이 낫다.
     ⚠ 부품 칸의 세로 상한도 여기서 푼다 — 위아래로 쌓이는 구간이라 옆 칸과
       높이를 다툴 일이 없다(넓은 화면에서만 필요한 제한이다). */
  .prd_box img {
    width: 100%;
  }
  .prd_parts .prd_box img {
    width: 100%;
    max-height: none;
  }
  /* ⚠ 이전 홈페이지는 이 구간에서 점을 감췼는데(손가락에는 hover 가 없어 켜질 일이
     없으니), 여기서는 **그대로 보여 준다.** 켜지지 않아도 어느 부품이 어디에
     들어가는지 짚어 주는 표시라서다. 위치는 사진 기준 % 라 폭이 줄어도 따라간다. */
}

@media screen and (max-width: 500px) {
  /* ⚠ `ty_full`(한 줄에 하나)은 빼 둔다 — 2열로 접으면 폭이 절반이 되어
     '꽉 차게' 둔 뜻이 사라진다. */
  .prd_parts:not(.ty_full) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   view — 뷰페이지
   -------------------------------------------------------------------------- */

.view_head {
  padding-bottom: 3.75rem;
  border-bottom: 1px solid rgba(217, 217, 217, 0.9);
}

.view_body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3.75rem;
  margin-top: 3.75rem;
}
@media screen and (max-width: 900px) {
  .view_sec > .wFix {
    padding-top: 8rem;
  }
}

.view_visual {
  aspect-ratio: 800 / 678;
  border-radius: 1.5rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.view_visual > img,
.capa_visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.view_desc {
  color: var(--txt-color);
}

/* --------------------------------------------------------------------------
   공용 표 — 라벨 + 값 한 줄
   -------------------------------------------------------------------------- */
.view_table {
  border-top: 1px solid var(--txt-color);
}
.view_row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--line-color-darker);
}
.view_th {
  flex: 0 0 12.5rem;
  width: 12.5rem;
  font-size: clamp(1rem, 1.2vw, 1.62rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.view_td {
  font-size: clamp(1rem, 1.2vw, 1.62rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.view_td.ty_none {
  font-weight: 400;
  color: var(--sub-txt-color);
}

.view_nav {
  margin-top: 3.75rem;
}
.view_nav .view_row {
  transition: background-color 0.25s ease;
}

.view_nav > li > a.view_row:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.view_btm {
  margin-top: 3.75rem;
}
.btn_pill.ty_center {
  justify-content: center;
  gap: 0;
}


@media screen and (max-width: 1200px) {
  .view_head {
    padding-bottom: 2.5rem;
  }
  .view_body {
    gap: 2.5rem;
    margin-top: 2.5rem;
  }
  .view_cont {
    gap: 2.5rem;
  }
  .view_th {
    flex-basis: 8.75rem;
    width: 8.75rem;
  }
  .view_row {
    gap: 1.5rem;
  }
  .view_nav,
  .view_btm {
    margin-top: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .view_body {
    grid-template-columns: 1fr;
    gap: 1.88rem;
  }
  .view_visual {
    aspect-ratio: 4 / 3;
    border-radius: 0.88rem;
  }
  .view_cont {
    gap: 1.88rem;
  }
  .view_row {
    padding: 0.88rem 0.75rem;
  }
  .view_th {
    flex-basis: 7rem;
    width: 7rem;
  }
  .view_btns {
    gap: 0.62rem;
  }
  .view_btns > .btn_pill {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

@media screen and (max-width: 500px) {
  .view_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .view_th {
    flex: 0 0 auto;
    width: auto;
    font-size: 0.88rem;
  }
  .view_btns {
    flex-direction: column;
  }
  .view_btns > .btn_pill {
    width: 100%;
    flex: 0 0 auto;
  }
  .view_btm > .btn_pill {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   피그마 SUB-주력기술
   -------------------------------------------------------------------------- */
.capa {
  --capa-top: 8rem;
  --capa-step: 1.25rem;
}
.capa_inner {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 1000fr);
  align-items: start;
}
.capa_head {
  position: sticky;
  top: var(--capa-top);
}
.capa_item {
  position: sticky;
  top: calc(var(--capa-top) + var(--i, 0) * var(--capa-step));
}
.capa_card {
  position: relative;
  aspect-ratio: 1000 / 520;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 -0.12rem 2.5rem rgba(0, 0, 0, 0.55);
  will-change: transform;
}
.capa_visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(0, 0, 0, 0.85) 0%,
              rgba(0, 0, 0, 0.5) 45%,
              rgba(0, 0, 0, 0.08) 100%);
}
.capa_shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background-color: #030303;
  opacity: 0;
  pointer-events: none;
}

.capa_cont {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2.5rem;
}
.capa_txt {
  gap: 0.4rem;
}
.capa_txt .ty_body {
  color: rgba(255, 255, 255, 0.7);
}

.capa.ty_full .capa_inner {
  grid-template-columns: minmax(0, 1fr);
}
.capa.ty_full .capa_head {
  position: static;
  padding-bottom: 3.75rem;
  border-bottom: 1px solid var(--line-color-darker);
  margin-bottom: 3.75rem;
}
.capa.ty_full .capa_card {
  aspect-ratio: 1500 / 600;
}
.capa_spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ⚠ [260903] `space-between` → `flex-start`.
   space-between 은 칸에 남는 자리를 항목 사이로 흩뿌린다. 설명이 1줄인 칸과
   2줄인 칸이 섞이면(다이캐스팅 기술) 남는 자리가 칸마다 달라서 **숫자와 이름
   사이가 칸마다 벌어졌다**(1줄 칸은 41px · 2줄 칸은 22px). 위에서부터 쌓아
   숫자·이름·설명의 시작 줄을 셋 다 맞춘다.
   ⚠ 설계 기술 카드는 모든 칸이 같은 높이여서 space-between 이 원래 아무 일도
     하지 않았다 — 이 변경으로 달라지지 않는다.
   ⚠ gap 은 **숫자 ↔ 이름** 간격이다(좁게). 이름 ↔ 설명은 아래 .ty_body 여백이
     더해져 예전(1.25rem)과 비슷하게 유지된다. */
.capa_spec > li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.38rem;
  padding-left: 1.25rem;
}
.capa_spec > li + li {
  border-left: 1px solid var(--line-color-darker);
}
.capa_spec .ty_body {
  color: var(--sub-txt-color);
  margin-top: 0.88rem;
}
/* ⚠ [260903] 이름 색을 숫자(.capa_num.ty_list)와 **같게** 맞췄다(사용자 지시).
   원래는 --txt-color(흰색)로 한 단 밝았다. 되돌리려면 이 한 줄을 지우면 된다
   (지우면 .ty_list 의 --sub-txt-color 를 그대로 물려받는 게 아니라, 예전처럼
    밝게 하려면 color: var(--txt-color) 로 적어야 한다).
   ⚠ 이제 숫자 · 이름 · 설명이 같은 색이다 — 서열은 글자 크기로만 진다
     (.ty_list 28.8px vs .ty_body 21px). */
.capa_spec > li > strong {
  color: var(--sub-txt-color);
}
.capa_num {
  font-style: normal;
}

.capa.ty_full:has(+ .range) .capa_inner {
  padding-bottom: 0;
}
.range .wFix {
  padding-top: var(--tit-gap);
}

.tag_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
}
.tag_item {
  display: inline-flex;
  align-items: center;
  height: 3.12rem;
  padding: 0 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   sf — SMART FACTORY
   -------------------------------------------------------------------------- */
.sf_head {
  text-align: center;
}
.sf_stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--tit-gap);
}
.sf_stats .stat_item {
  padding: 0 1.25rem 0 3.75rem;
  border-bottom: 0;
}
.sf_stats .stat_item + .stat_item {
  border-left: 1px solid var(--line-color-darker);
}
.sf_stats .stat_item dt {
  justify-content: flex-start;
}
.sf_stats .stat_item dd,
.invest_stats dd {
  margin-top: 1.25rem;
  text-align: left;
}


/* --------------------------------------------------------------------------
   flow — QUALITY ASSURANCE FLOW 
   -------------------------------------------------------------------------- */
.flow_head {
  text-align: center;
}
.flow {
  --flow-gap: 3.75rem;
  display: grid;
  gap: var(--flow-gap);
  margin-top: var(--tit-gap);
}
.flow_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-height: 10rem;
  padding: 2.12rem 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  background-color: var(--bg-color);
  text-align: center;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.flow_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}
.flow_fill {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--main-color);
  transform: scaleY(0);
  transform-origin: top center;
}
.flow_item.ty_now .flow_fill {
  transform: scaleY(1);
}
.flow_item.ty_now,
.flow_item.is_reached {
  border-color: transparent;
  box-shadow: 0 0 3.75rem rgba(0, 91, 181, 0.45);
}
.flow_bar {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 10px;
  height: var(--flow-gap);
  background-color: rgba(255, 255, 255, 0.16);
  transform: translateX(-50%);
  overflow: hidden;
}


@media screen and (max-width: 1200px) {
  .capa {
    --capa-top: 6.5rem;
    --capa-step: 1rem;
  }
  .capa_cont {
    padding: 2.5rem;
  }
  .capa_list {
    gap: 2.5rem;
  }
  .tag_item {
    height: 2.5rem;
    padding: 0 0.88rem;
  }
  .sf_stats .stat_item {
    padding-left: 1.5rem;
  }
  .flow {
    --flow-gap: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .capa_inner {
    grid-template-columns: 1fr;
    gap: var(--tit-gap);
  }
  .capa_head,
  .capa_item {
    position: static;
  }
  .capa_card {
    aspect-ratio: 4 / 3;
    border-radius: 0.88rem;
    box-shadow: none;
  }
  .capa.ty_full .capa_card {
    aspect-ratio: auto;
  }
  .capa.ty_full .capa_cont {
    gap: 3.5rem;
  }
  .capa.ty_full .capa_head {
    padding-bottom: 2.5rem;
    margin-bottom: 0;
  }
  .capa_spec {
    grid-template-columns: minmax(0, 1fr);
  }
  .capa_spec > li {
    padding: 1.25rem 0;
    border-top: 1px solid var(--line-color-darker);
    gap: .4rem;
  }
  .capa_spec > li + li {
    border-left: 0;
  }
  .capa_cont {
    padding: 1.5rem;
  }
  .capa_list {
    gap: 1.25rem;
  }
  .tag_item {
    height: 2.12rem;
    padding: 0 0.75rem;
  }
  .sf_stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0;
  }
  .sf_stats .stat_item {
    padding: 0 0.75rem 1.25rem;
    border-left: 0;
    border-bottom: 1px solid var(--line-color-darker);
  }
  .sf_stats .stat_item + .stat_item {
    border-left: 0;
  }
  .sf_stats .stat_item dd {
    margin-top: 0.5rem;
  }

  .flow {
    --flow-gap: 1.88rem;
  }
  .flow_item {
    min-height: 0;
    padding: 1.25rem 1rem;
    border-radius: 0.88rem;
  }
}

@media screen and (max-width: 500px) {
  .capa_card {
    aspect-ratio: 3 / 4;
  }
  .capa_visual::after {
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.55) 50%,
                rgba(0, 0, 0, 0.85) 100%);
  }
  .sf_stats {
    grid-template-columns: 1fr;
  }
}


.sec_head {
  padding-bottom: 3.75rem;
  border-bottom: 1px solid var(--line-color-darker);
  margin-bottom: 3.75rem;
}
.sec_head.ty_split,
.chart_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}
.sec_head.ty_split .ty_sec {
  text-align: right;
}

.method_cont .ty_body {
  margin-top: 1.25rem;
  color: var(--sub-txt-color);
}
.dc_cont {
  display: grid;
  grid-template-columns: minmax(0, 721fr) minmax(0, 719fr);
  gap: 3.75rem;
  align-items: center;
  margin-top: var(--sec-gap);
}
.dc_ill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  overflow: hidden;
  height: 100%;
}
.dc_ill img {
  width: 100%;
  max-width: 39.25rem;
}
.dc_list {
  margin-top: 3.75rem;
}
.dc_list .view_th {
  flex: 0 0 6.25rem;
  width: 6.25rem;
}

.dcs {
  margin-top: var(--tit-gap);
  border-radius: 1.25rem;
  overflow: hidden;
}
.dcs img,
.range_shot img {
  display: block;
  width: 100%;
}

.process .flow {
  margin-top: 3.06rem;
}

.hpdc_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.75rem;
}
.hpdc_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 513 / 600;
  padding: 2rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hpdc_card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.85) 0%,
              rgba(0, 0, 0, 0.35) 45%,
              rgba(0, 0, 0, 0.8) 100%);
}
.hpdc_txt .ty_body {
  margin-top: 0.62rem;
  color: rgba(255, 255, 255, 0.7);
}
.hpdc_num {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38rem;
}
.hpdc_unit {
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.invest_cont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;
  align-items: start;
}


@media screen and (max-width: 1200px) {
  .sec_head {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .method_cont {
    width: 100%;
  }
  .hpdc_list {
    gap: 1.88rem;
  }
  .hpdc_card {
    padding: 2.5rem;
  }
  .process .flow {
    margin-top: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .sec_head.ty_split {
    display: block;
  }
  .sec_head.ty_split .ty_sec {
    margin-top: 1.25rem;
    text-align: left;
  }
  .dc_cont {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tit-gap);
    margin-top: var(--tit-gap);
  }
  .dc_ill {
    padding: 2.5rem 1.5rem;
  }
  .dc_list {
    margin-top: 2.5rem;
  }
  .dcs {
    margin-top: var(--tit-gap);
    border-radius: 0;
  }
  .hpdc_list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hpdc_card {
    aspect-ratio: 16 / 7;
    padding: 2rem;
  }
}

@media screen and (max-width: 500px) {
  .hpdc_card {
    aspect-ratio: 4 / 3.5;
  }
  .hpdc_num {
    justify-content: flex-start;
  }
  .process_head .ty_sec {
    font-size: clamp(1.5rem, 7.5vw, 2.5rem);
    overflow-wrap: anywhere;
  }
  /* ⚠ .view_row 는 이 폭에서 세로로 쌓인다(라벨이 길어서). 여기는 번호 한 칸이라
     쌓을 이유가 없고, 쌓으면 .view_th 의 flex-basis 가 **높이**로 읽혀 칸마다
     100px 씩 빈 자리가 생긴다. 한 줄로 되돌리고 번호 칸도 좁힌다. */
  .dc_list .view_row {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }
  .dc_list .view_th {
    flex: 0 0 2.5rem;
    width: 2.5rem;
  }
}


.org_board {
  margin-top: var(--tit-gap);
  padding: 3.75rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  background-color: #03030370;
}
.org.ty_two {
  --org-cols: 2;
  --org-gap: 3.75rem;
  --org-elbow: 3.75rem;
  --org-box-h: 7.5rem;
  max-width: 53.75rem;
  margin-top: 0;
}
.org.ty_two .org_row.ty_stem::after {
  display: none;
}
.org.ty_norep .org_row.ty_stem {
  padding-top: 0;
}
.org.ty_norep .org_row.ty_stem::before,
.org.ty_norep .org_row.ty_stem::after {
  display: none;
}

.org.ty_lead .org_rep {
  grid-column: 1;
  justify-self: stretch;
  width: 100%;
}
.org.ty_lead .org_stem::before {
  left: calc((100% - (var(--org-cols) - 1) * var(--org-gap)) / (var(--org-cols) * 2));
}
.org.ty_lead .org_row {
  padding-top: 0;
}
.org.ty_lead .org_row::before,
.org.ty_lead .org_row.ty_stem::after {
  display: none;
}

.org_div.ty_pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.org_div.ty_pair .org_div_head {
  grid-column: 1 / -1;
}
.org_div.ty_pair .org_div_team {
  padding-inline: 0.75rem;
}
/* 두 칸으로 눕힌 팀 박스는 폭이 절반이라 36px 로는 '생산기술팀' 이 두 줄로 접힌다.
   ⚠ 크기는 **판 전체**에 건다 — 눕힌 칸만 줄이면 옆 칸(미래전략 AX팀)과 글씨가
     달라져 나란한 팀인데 급이 달라 보인다. 연구소 이름(.org_div_head)은 그대로다. */
.org_board .org_div_team {
  font-size: clamp(1rem, 1.5vw, 1.75rem);
}
.org_board .org {
  margin-top: 0;
}
.invest_stats {
  margin-top: var(--tit-gap);
  border-top: 1px solid var(--line-color-darker);
}
.invest_stats .stat_item,
.talent_item,
.roadmap_row {
  padding: 2.5rem;
}
.invest_stats .stat_item,
.talent_item,
.roadmap_item {
  border-bottom: 1px solid var(--line-color-darker);
}
.invest_stats dt {
  justify-content: flex-start;
}

.chart_unit {
  margin-bottom: 2.5rem;
  font-size: clamp(0.88rem, 1.2vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--sub-txt-color);
}
.chart {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  height: 32.5rem;
  padding-top: 3rem;
}
.chart_item {
  display: grid;
  grid-template-rows: 1fr auto;
  flex: 1 1 0;
}
.chart_col {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
.chart_col {
  --h-cur: 0%;
}
.chart_bar,
.chart_bar:hover {
  width: 100%;
  height: var(--h-cur);
  border-radius: 0.75rem 0.75rem 0 0;
  /* ⚠ [260903] 색을 `--bar-color` 변수로 뺐다 — 계열마다 그라데이션을 따로 적던 것을
     한 곳으로 모은 것이다. 적자 막대(.ty_minus)가 **같은 계열색을 그대로 쓰면서
     방향만 뒤집어야** 해서, 색과 방향을 떼어 놔야 했다.
     변수가 없으면(계열 클래스 없는 그래프) 예전 기본값을 그대로 쓴다. */
  background: linear-gradient(to bottom, var(--bar-color, var(--main-color-light)), var(--bg-color));
  transition: height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
.chart_wrap.aos-animate .chart_col {
  --h-cur: var(--h, 0%);
}
@media (prefers-reduced-motion: reduce) {
  /* ⚠ [260903] `.is_reduce_motion` 과 **짝**이다 — 그 클래스는 common.js 의
     RESPECT_REDUCED_MOTION 이 true 일 때만 <html> 에 붙는다.
     지금은 OS 설정 무시라 클래스가 없고, 그래서 이 부분은 아무 일도 하지 않는다. */
  .is_reduce_motion .chart_col {
    --h-cur: var(--h, 0%);
  }
  .is_reduce_motion .chart_bar,
  .is_reduce_motion .chart_bar:hover,
  .is_reduce_motion .chart_val,
  .is_reduce_motion .chart_val:hover {
    transition: none;
  }
}
.chart_val,
.chart_val:hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--h-cur);
  margin-bottom: 0.62rem;
  transition: bottom 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
  font-size: clamp(1.12rem, 1.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--txt-color);
}
.chart_year {
  margin-top: 1.25rem;
  font-size: clamp(0.88rem, 1.2vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  text-align: center;
}

.chart_card {
  display: flex;
  flex-direction: column;
  gap: 4.38rem;
  padding: 3.75rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  background-color: var(--bg-color);
}
.chart_legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.62rem;
}
.chart_legend > li {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.legend_dot {
  flex: 0 0 auto;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 100px;
}

.chart.ty_multi {
  gap: 3.75rem;
}

.chart_group {
  display: flex;
  align-items: stretch;
  gap: 0.62rem;
  min-height: 0;
}
.chart_group > .chart_col {
  flex: 1 1 0;
  min-width: 0;
}
.chart.ty_multi .chart_val {
  font-size: clamp(0.69rem, 1.35vw, 1.62rem);
  font-weight: 500;
}


/* 계열 색 — 위 `.chart_bar` 의 그라데이션이 이 값을 읽는다.
   ⚠ 범례 닷(.legend_dot.ty_*)과 짝이다. 한쪽만 바꾸면 범례와 막대 색이 어긋난다. */
.chart_bar.ty_rev { --bar-color: var(--main-color-light); }
.chart_bar.ty_op  { --bar-color: #00acff; }
.chart_bar.ty_net { --bar-color: #0062f5; }
/* ── [260903] 0 기준선이 있는 막대그래프 (.chart.ty_zero) ──────────────────
   적자를 0 선 **아래로** 내려 흑자와 구별한다(재무정보 REVENUE & PROFIT).

   ⚠⚠ 기본 `.chart` / `.chart_bar` 규칙은 **손대지 않았다** — 연구소 소개의 R&D
     투자 그래프가 되살아나면 그쪽은 적자가 없어 옛 방식(바닥에서 위로)이 맞다.
     그래서 0 선 방식은 `.ty_zero` 라는 덧옷으로만 얹는다. 클래스를 떼면 원래대로.

   ⭐ `--zero` = 0 선이 칸 바닥에서 몇 % 위인가. **마크업에서 인라인으로 준다**
     (financial.php 의 $FIN_ZERO). 막대 길이 `--h` 는 0 선 위 공간 기준이다.
   ⚠ 막대를 flex(align-items:flex-end)로 바닥에 붙이던 것을 **절대배치로 바꿨다** —
     위·아래 두 방향으로 자라야 해서 bottom/top 을 직접 잡아야 한다.
   ⚠ 0 선은 `.chart_group::after` 한 줄인데, 좌우를 칸 사이 여백의 절반
     (ty_multi 의 gap 3.75rem ÷ 2)만큼 넓혀서 **옆 칸의 선과 맞닿아 한 줄로 이어진다.**
     gap 을 바꾸면 이 값(1.88rem)도 같이 바꿀 것.
   -------------------------------------------------------------------------- */
.chart.ty_zero .chart_group {
  position: relative;
}
.chart.ty_zero .chart_group::after {
  content: "";
  position: absolute;
  left: -1.88rem;
  right: -1.88rem;
  bottom: var(--zero, 0%);
  height: 1px;
  background-color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.chart.ty_zero .chart_bar,
.chart.ty_zero .chart_bar:hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--zero, 0%);
  width: auto;
  height: var(--h-cur);
}
.chart.ty_zero .chart_val,
.chart.ty_zero .chart_val:hover {
  bottom: calc(var(--zero, 0%) + var(--h-cur));
}

/* 적자 — 0 선에 매달려 **아래로** 자란다. 숫자도 막대 아래로 내려간다.
   ⚠⚠ [260903] **색은 흑자와 똑같은 계열색**이다(사용자 지시). 마이너스라는 표시는
     ① 막대가 0 선 아래로 내려간 것 ② 숫자 앞의 마이너스 기호, 이 둘로만 한다.
     한때 붉은색으로 칠했다가 걷어냈다 — 범례에 없는 색이 차트에 생기기 때문이다.
   ⚠ 그라데이션 **방향만** 뒤집는다(to bottom → to top). 짙은 쪽이 막대의 끝(아래)에
     오게 해서 위로 솟는 막대와 좌우 대칭처럼 보이게 한다. 색은 --bar-color 그대로다.
   ⚠ 위쪽 `.chart_bar` 규칙보다 선택자가 무거워야 이긴다 — 그래서 이렇게 길다. */
.chart.ty_zero .chart_col.ty_minus .chart_bar,
.chart.ty_zero .chart_col.ty_minus .chart_bar:hover {
  bottom: auto;
  top: calc(100% - var(--zero, 0%));
  border-radius: 0 0 0.75rem 0.75rem;
  background: linear-gradient(to top, var(--bar-color, var(--main-color-light)), var(--bg-color));
}
.chart.ty_zero .chart_col.ty_minus .chart_val,
.chart.ty_zero .chart_col.ty_minus .chart_val:hover {
  bottom: auto;
  top: calc(100% - var(--zero, 0%) + var(--h-cur));
  margin-bottom: 0;
  margin-top: 0.62rem;
  transition: top 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}

.legend_dot.ty_rev { background-color: #9ec7f7; }
.legend_dot.ty_op  { background-color: #01a5f4; }
.legend_dot.ty_net { background-color: #005fed; }

@media screen and (max-width: 1200px) {
  .chart_legend {
    gap: .6rem;
  }
  .legend_dot {
    width: .8rem;
    height: .8rem;
  }
}

.talent_cont {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3.75rem;
  align-items: center;
  margin-top: var(--tit-gap);
}

.status .invest_stats,
.status .talent_cont {
  margin-top: 2.5rem;
}
.status_head {
  gap: 0.62rem;
}
.stat_note {
  margin-left: 0.5rem;
  /* 0.72em — 굵은 수치(2.25rem) 안에 들어가면 위 이름 줄(1.62rem)과 같은 크기가 된다.
     0.82em 이면 23px 이라 주인공인 수치와 크기가 붙어 보인다. */
  font-size: 0.72em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.status .talent_cont {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
}
/* 596px 도넛은 반쪽 폭에 목록과 나란히 못 들어간다.
   ⚠ `max-width` 로만 조이면 안 된다 — grid 의 `auto` 칸은 max-content(=width 값)
     로 폭을 잡으므로 도넛 칸이 596px 를 먹고 **옆 목록이 75px 로 짜부라졌다.**
     width 를 직접 줄여야 칸 계산이 맞는다.
   폭 단위가 rem 이라 900 이하에서 루트가 18→15px 로 줄면 도넛도 같이 줄어든다. */
.status .donut {
  width: 20rem;
  max-width: 100%;
}
.status .donut::after {
  inset: 11.3%;
}
.talent_list {
  border-top: 1px solid var(--line-color-darker);
}
.talent_item dt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.12rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2778;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.talent_list:not(.ty_degree) .talent_item dt::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 16px;
  background-color: var(--main-color-dark);
}
.talent_list:not(.ty_degree) .talent_item.ty_now dt::before {
  background-color: var(--main-color-light);
}
.talent_item dd {
  margin-top: 0.62rem;
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

/* ⚠ R&D재무현황만 **강조와 순서를 뒤집는다.** 칸 모양·테두리·여백은 오른쪽
     연구인력과 같은 값을 쓰지만(그래서 클래스가 `.talent_item` 이다), 안쪽은
     반대다: 연구인력은 이름('R&D 인력')이 주인공이고, 여기는 **수치**
     (2.3% · CAGR +26%)가 주인공이라서 수치가 크고 위로 온다.
   ⭐ 순서는 `column-reverse` 로 **보기에만** 뒤집는다. 마크업은 dt(이름) → dd(수치)
     순서를 지켜야 한다 — `<dl>` 에서 dd 가 dt 보다 앞에 오면 안 되고, 읽어 주는
     순서도 '이름 다음 값'이 맞다.
   ⚠ 이 블록은 반드시 위 `.talent_item dt/dd` **뒤에** 있어야 한다 — 특이도가
     같아서(0,1,1) 순서로만 이긴다. 앞으로 옮기면 크기가 원래대로 돌아간다. */
.invest_stats .talent_item {
  display: flex;
  flex-direction: column-reverse;
  /* ⚠ 0.62rem — 오른쪽 연구인력의 두 줄 간격(`.talent_item dd` 의 margin-top)과
     **같은 값이어야 한다.** 좌우가 나란히 선 두 칸이라, 여기만 벌리면 칸 높이가
     달라져 가로 구분선이 어긋나 보인다. */
  gap: 0.32rem;
}
.invest_stats dt {
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  font-weight: 400;
  line-height: 1.385;
  color: var(--sub-txt-color);
}
.invest_stats dd {
  /* 위 `.invest_stats dd { margin-top: 1.25rem }` 를 지운다 — 칸 사이 간격은
     이제 `.talent_item` 의 gap 이 낸다(수치가 위로 올라와서 margin-top 은
     칸 안쪽 위에 군더더기 여백을 만든다). */
  margin-top: 0;
  font-size: clamp(1.12rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2778;
  color: var(--txt-color);
}

.donut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.12rem;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
              var(--main-color-light) 0 var(--ratio, 0%),
              var(--main-color-dark) var(--ratio, 0%) 100%);
}
.donut::after {
  content: "";
  position: absolute;
  inset: 3.75rem;
  border-radius: 50%;
  background-color: var(--bg-color);
}
.donut_txt {
  position: relative;
  z-index: 1;
  text-align: center;
}
.donut_num {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.12rem;
}
.donut_num > span {
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  color: var(--sub-txt-color);
}
.donut_label {
  margin-top: 0.62rem;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.81rem, 1.2vw, 1.62rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

.roadmap_panel {
  margin-top: var(--tit-gap);
}
.roadmap_stage {
  position: relative;
  aspect-ratio: 1660 / 961;
}
.roadmap_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
}

.roadmap_stage .map_pin::before {
  background-color: var(--pin, var(--main-color-light));
}
.roadmap_stage .map_pin::after {
  border-color: var(--pin, var(--main-color-light));
  background-color: var(--pin-soft, #a3cdff45);
}

.map_pin.ty_pop:hover::after,
.map_pin.ty_pop:focus-visible::after {
  transform: scale(1.6);
  opacity: 0.55;
}

.roadmap_stage .map_pop {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.map_pop_icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--txt-color);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.map_pin:hover .map_pop_icon,
.map_pin:focus-visible .map_pop_icon {
  opacity: 1;
}


.roadmap_legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3.75rem;
  border-top: 1px solid var(--line-color-darker);
}
.roadmap_row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border-radius: 0.75rem;
  transition: background-color 0.25s ease;
}
.roadmap_row::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  background-color: var(--pin, var(--main-color-light));
}
button.roadmap_row {
  cursor: pointer;
}
button.roadmap_row:hover,
button.roadmap_row:focus-visible {
  background-color: rgba(255, 255, 255, 0.06);
}
.roadmap_row_icon {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1.5rem;
  color: var(--txt-color);
  opacity: 0.35;
  transition: opacity 0.25s ease;
}
button.roadmap_row:hover .roadmap_row_icon,
button.roadmap_row:focus-visible .roadmap_row_icon {
  opacity: 1;
}

.labs_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.75rem;
  margin-top: var(--tit-gap);
}
.labs_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 800 / 520;
  padding: 3.75rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.labs_card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.85) 0%,
              rgba(0, 0, 0, 0.4) 50%,
              rgba(0, 0, 0, 0.8) 100%);
}
.labs_txt .ty_body {
  margin-top: 0.62rem;
  color: rgba(255, 255, 255, 0.7);
}


@media screen and (max-width: 1200px) {
  .org_board {
    padding: 2.5rem;
  }
  .invest_cont {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .chart {
    height: 25rem;
  }
  .chart_card {
    padding: 2.5rem;
    gap: 2.5rem;
  }
  .chart.ty_multi {
    gap: 2.5rem;
  }

  .talent_cont,
  .status .talent_cont {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.5rem;
  }
  .talent_list {
    width: 100%;
  }
  .donut {
    width: 25rem;
    order: -1;
  }
  .roadmap_legend {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.5rem;
  }
  .roadmap_img {
    border-radius: 0.75rem;
  }
  .labs_list {
    gap: 1.88rem;
    grid-template-columns: 1fr;
  }
  .labs_card {
    padding: 2.5rem;
    aspect-ratio: 800 / 320;
  }
}

@media screen and (max-width: 900px) {
  .org_board {
    padding: 1.5rem;
  }
  .org.ty_two {
    max-width: 100%;
  }
  .invest_stats .stat_item,
  .talent_item,
  .roadmap_row {
    padding: 1.5rem;
  }
  .chart {
    height: 20rem;
    gap: 0.62rem;
  }
  .chart_card {
    padding: 1.88rem;
    gap: 1.4rem;
  }
  .chart_head {
    flex-direction: column;
    gap: .4rem;
  }
  .chart.ty_multi {
    height: 22rem;
    gap: 1.5rem;
  }
  .donut {
    width: 20rem;
  }
  .donut::after {
    inset: 2.5rem;
  }
  .roadmap_legend {
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }
  .roadmap_row {
    gap: 0.62rem;
  }
  .roadmap_row::before {
    width: 1.12rem;
    height: 1.12rem;
  }
  .roadmap_row_icon {
    font-size: 1.25rem;
  }
  .roadmap_stage .map_pop {
    gap: 0.75rem;
  }
  .map_pop_icon {
    font-size: 1.12rem;
  }
  .labs_list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .labs_card {
    aspect-ratio: 4 / 2;
    padding: 2rem;
  }
}

@media screen and (max-width: 500px) {
  .roadmap_row::before {
    width: 0.88rem;
    height: 0.88rem;
  }
  .roadmap_row_icon {
    font-size: 1.12rem;
  }
  .chart {
    height: 15rem;
  }
  .chart_bar {
    border-radius: 0.38rem 0.38rem 0 0;
  }
  .chart_card {
    padding: 1.25rem;
  }
  .chart.ty_multi {
    min-width: 40rem;
    height: 20rem;
    gap: 1.25rem;
  }
  .donut {
    width: 15rem;
  }
  .donut::after {
    inset: 1.88rem;
  }
  .labs_card {
    aspect-ratio: auto;
    min-height: 22rem;
  }
}
.folio_link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.62rem;
  aspect-ratio: 516 / 520;
  padding: 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.5rem;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: border-color 0.4s ease;
}
.folio_link:hover {
  border-color: var(--main-color-light);
}
.folio_link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.9) 0%,
              rgba(0, 0, 0, 0.45) 40%,
              rgba(0, 0, 0, 0.1) 100%);
}
.folio_cont,
.notice_view_head {
  display: grid;
  gap: 1.25rem;
}
.folio_cat {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--main-color-light);
}
.folio_name {
  display: block;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 500;
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.folio_desc,
.folio_meta {
  display: block;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}


@media screen and (max-width: 1200px) {
  .folio_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
  }
  .folio_link {
    padding: 2rem;
  }
}

@media screen and (max-width: 900px) {
  .folio_list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .folio_link {
    aspect-ratio: 16 / 7;
  }
}

@media screen and (max-width: 500px) {
  .folio_link {
    aspect-ratio: 4 / 3;
    padding: 1.5rem;
  }
  .folio_cont {
    gap: 0.75rem;
  }
}


.folio_link.ty_cert {
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background-color: var(--bg-color);
  background-image: none;
  cursor: pointer;
}
.cert_visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert_visual img {
  max-width: 50%;
  max-height: 70%;
  object-fit: contain;
}

.folio_link.ty_cert::before {
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.95) 0%,
              rgba(0, 0, 0, 0.78) 22%,
              rgba(0, 0, 0, 0.25) 45%,
              rgba(0, 0, 0, 0) 70%);
}

.cert_modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 2.5rem;
}
.cert_modal[hidden] {
  display: none;
}
.cert_modal_dim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(0.25rem);
}
.cert_modal_box {
  position: relative;
  max-width: min(90vw, 50rem);
}
.cert_modal_box.ty_wide {
  max-width: min(92vw, 70rem);
}

/* ── 팝업 안에서 사진 넘기기 ─────────────────────────────────────────────
   사진이 두 장 이상인 것만 이 묶음이 쓰인다(한 장이면 위의 `> img` 가 그대로).
   슬라이드는 js/sub.js 의 initCertModal 이 열 때 채운다.
   ------------------------------------------------------------------------ */
.cert_modal_gallery[hidden],
.cert_modal_box > img[hidden] {
  display: none;
}
.cert_modal_stage {
  position: relative;
}
.cert_modal_swiper {
  border-radius: 0.75rem;
}
.cert_modal_swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert_modal_swiper .swiper-slide img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 13.5rem);
  object-fit: contain;
  border-radius: 0.75rem;
  background-color: var(--bg-color);
}
.cert_modal_arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  border: 1px solid #ffffff3d;
  color: var(--txt-color);
  transform: translateY(-50%);
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.cert_modal_prev {
  left: 1.25rem;
}
.cert_modal_next {
  right: 1.25rem;
}
.cert_modal_arrow:hover {
  background-color: var(--main-color);
}
.cert_modal_arrow.swiper-button-disabled {
  opacity: 0.2;
  pointer-events: none;
}
.cert_modal_arrow .material-symbols-outlined {
  font-size: 1.75rem;
}
.cert_modal_count {
  margin-top: 0.75rem;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--sub-txt-color);
}
.cert_modal_count .ty_now {
  color: var(--txt-color);
}
.cert_modal_box > img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  object-fit: contain;
  border-radius: 0.75rem;
  background-color: var(--bg-color);
}
.cert_modal_close {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--txt-color);
  transition: background-color 0.25s ease;
}
.cert_modal_close:hover {
  background-color: var(--main-color);
}
.cert_modal_close .material-symbols-outlined {
  font-size: 1.5rem;
}


@media screen and (max-width: 900px) {
  .cert_visual img {
    max-width: 40%;
    max-height: 80%;
  }
}

@media screen and (max-width: 500px) {
  .cert_visual img {
    max-width: 55%;
    max-height: 65%;
  }
  .cert_modal {
    padding: 3.75rem 1.25rem;
  }
  .cert_modal_arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
  .cert_modal_arrow .material-symbols-outlined {
    font-size: 1.25rem;
  }
  .cert_modal_prev {
    left: 0.5rem;
  }
  .cert_modal_next {
    right: 0.5rem;
  }
  .cert_modal_swiper .swiper-slide img {
    max-height: calc(100vh - 11.5rem);
  }
  .cert_modal_count {
    margin-top: 0.62rem;
    font-size: 0.94rem;
  }
}


.notice_top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.notice_total {
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.notice_total em {
  font-style: normal;
  font-weight: 700;
  color: var(--txt-color);
}

.notice_search {
  display: flex;
  gap: 1.25rem;
}
.notice_sel {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 11.25rem;
}
.btn_sel,
.notice_field input {
  width: 100%;
  height: 4.38rem;
  padding: 0 1.25rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.5rem;
  background-color: transparent;
  font-size: clamp(0.88rem, 1.05vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.btn_sel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
}
.btn_sel .material-symbols-outlined {
  font-size: 1.5rem;
  color: var(--sub-txt-color);
  transition: transform 0.25s ease;
}
.notice_sel.is_open .btn_sel .material-symbols-outlined {
  transform: rotate(180deg);
}

.notice_field {
  position: relative;
  flex: 0 0 auto;
  width: 26.25rem;
}
.notice_field input {
  padding-right: 3.75rem;
}
.notice_field input::placeholder {
  color: var(--sub-txt-color);
}
.notice_field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.notice_search_btn {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--sub-txt-color);
  transition: color 0.25s ease;
}
.notice_search_btn:hover {
  color: var(--txt-color);
}
.notice_search_btn .material-symbols-outlined {
  font-size: 1.5rem;
}

.notice_list {
  border-top: 1px solid var(--txt-color);
}
.notice_link {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem;
  border-bottom: 1px solid var(--line-color-darker);
  transition: background-color 0.3s ease;
}
.notice_link:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
.notice_head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.notice_flag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.38rem;
  background-color: var(--main-color);
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt-color);
  padding: .6rem 1rem;
  line-height: 1;
}
.notice_tit {
  font-size: clamp(1.12rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2778;
  letter-spacing: -0.02em;
  color: var(--txt-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice_meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.notice_meta > span,
.form_file,
.form_captcha {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.notice_meta > span + span::before {
  content: "";
  width: 1px;
  height: 0.97rem;
  background-color: var(--line-color-darker);
}


@media screen and (max-width: 1200px) {
  .notice_link {
    padding: 2rem;
  }
  .notice_field {
    width: 20rem;
  }
}

@media screen and (max-width: 900px) {
  .notice_top {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .notice_search {
    gap: 0.62rem;
  }
  .notice_sel {
    width: 8rem;
  }
  .notice_field {
    flex: 1 1 auto;
    width: auto;
  }
  .btn_sel,
  .notice_field input {
    height: 3.5rem;
  }
  .notice_link {
    padding: 1.5rem;
    gap: 0.4rem;
  }
}

@media screen and (max-width: 500px) {
  .notice_search {
    flex-direction: column;
  }
  .notice_sel,
  .notice_field {
    width: 100%;
  }
  .notice_head {
    flex-wrap: wrap;
    gap: 0.62rem;
  }
  .notice_flag {
  padding: 0.6rem .8rem;
  }
  .notice_tit {
    width: 100%;
  }
  .notice_meta {
    gap: .6rem;
  }
   .notice_meta > span + span::before {
    display: none;
  }
}
.notice_view_tit {
  font-size: clamp(1.38rem, 2.6vw, 3.12rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}

.notice_cont {
  padding: 3.75rem 0;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.notice_cont > * + * {
  margin-top: 1.5em;
}
.notice_cont strong,
.notice_cont b {
  font-weight: 700;
  color: var(--txt-color);
}
.notice_cont a {
  text-decoration: underline;
  color: var(--main-color-light);
}
.notice_cont img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}
.notice_cont ul,
.notice_cont ol {
  padding-left: 1.5em;
}
.notice_cont ul > li {
  list-style: disc;
}
.notice_cont ol > li {
  list-style: decimal;
}
.notice_cont li + li {
  margin-top: 0.5em;
}
.notice_cont table {
  width: 100%;
  border-collapse: collapse;
}
.notice_cont th,
.notice_cont td {
  padding: 0.75em 1em;
  border: 1px solid var(--line-color-darker);
}

.notice_file {
  border-top: 0;
  border-radius: 0.75rem;
  background-color: #282828;
  overflow: hidden;
}
.notice_file .view_row {
  padding: 1.75rem 2.5rem;
  border-bottom: 0;
}

.notice_file .view_row + .view_row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.notice_file .view_td {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}
.file_link {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--txt-color);
  transition: color 0.25s ease;
}
.file_link:hover {
  color: var(--main-color-light);
}
.file_link .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--sub-txt-color);
}


@media screen and (max-width: 1200px) {
  .notice_cont {
    padding: 2.5rem 0;
  }
}

@media screen and (max-width: 900px) {
  .notice_view_head {
    gap: 0.75rem;
  }
  .notice_cont {
    padding: 1.88rem 0;
    line-height: 1.7;
  }
  .notice_file {
    margin-top: 2.5rem;
  }
  .notice_file .view_row {
    padding: 1.25rem 1.5rem;
  }
}
.media_link {
  display: block;
  height: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: #121212;
  transition: background-color 0.3s ease;
  border: 1px solid var(--line-color-darker);
}
.media_link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--main-color-light);
}

.media_visual {
  position: relative;
  display: block;
  aspect-ratio: 513 / 321;
  overflow: hidden;
}
.media_visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media_link:hover .media_visual > img {
  transform: scale(1.05);
}
.media_play,
.media_link:hover .media_play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(0.5rem);
  color: var(--main-color);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}
.media_link:hover .media_play {
  background-color: rgba(255, 255, 255, 0.9);
}
/* ⚠⚠ 재생 삼각형을 Material Symbols 로 넣으면 **외곽선으로만 나온다.**
   `vendor/material-icons/MaterialSymbolsOutlined.woff2` 는 **가변 폰트가 아니라
   정적 Outlined 판**이라 `font-variation-settings: "FILL" 1` 이 먹지 않는다
   (CSS 에는 적용되지만 폰트에 FILL 축이 없다). 그래서 CSS 로 그린다.
   → 다른 곳에서도 채워진 아이콘이 필요하면 같은 문제를 만난다. */
.media_play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.25rem;
  border-style: solid;
  border-width: 0.81rem 0 0.81rem 1.38rem;
  border-color: transparent transparent transparent var(--main-color);
}

.media_cont {
  display: block;
  padding: 2.5rem;
}
.media_cat {
  display: block;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--main-color-light);
}
.media_name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.385em);
  margin-top: 0.62rem;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 500;
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.media_date {
  display: block;
  margin-top: 1.25rem;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}


@media screen and (max-width: 1200px) {
  .media_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
  }
  .media_cont {
    padding: 2rem;
  }
  .media_link:hover .media_play {
    width: 4.5rem;
    height: 4.5rem;
  }
}

@media screen and (max-width: 900px) {
  .media_play,
  .media_link:hover .media_play {
    width: 4.5rem;
    height: 4.5rem;
  }
  .media_play::before {
    border-width: 0.62rem 0 0.62rem 1rem;
  }
}

@media screen and (max-width: 500px) {
  .media_list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .media_cont {
    padding: 1.5rem;
  }
}


.policy_head {
  max-width: 56.88rem;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
.policy_head .ty_body {
  color: var(--sub-txt-color);
}

.esg_goal {
  min-height: 0;
  padding-block: 7.5rem;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 100%),
    url("../../images/sub/esg/bg_esg_goal.png");
}
.esg_goal > .wFix {
  align-items: flex-start;
}
.goal_tit {
  color: var(--txt-color);
}

.esg_goal .goal_item:first-child {
  border-top: 1px solid white;
}
.goal_item {
  padding-block: 1.88rem;
}
.goal_item + .goal_item {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.goal_item dd {
  margin-top: 0.62rem;
  font-size: clamp(0.94rem, 1.35vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.task_group {
  margin-top: 3.75rem;
}
.task_head {
  padding: 1.38rem 2.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: clamp(1.12rem, 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2778;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.task_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.task_item {
  padding: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.task_item:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.task_item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
}
.task_num {
  display: block;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: clamp(0.88rem, 1.05vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.5);
}
.task_txt {
  margin-top: 0.62rem;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 500;
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}


@media screen and (max-width: 1200px) {
  .esg_goal {
    padding-block: 5rem;
  }
  .task_group {
    margin-top: 2.5rem;
  }
  .task_head {
    padding: 1.12rem 2rem;
  }
  .task_item {
    padding: 2rem;
  }
}

@media screen and (max-width: 900px) {
  .esg_goal {
    padding-block: 3.75rem;
  }
  .goal_item {
    padding-block: 1.25rem;
  }
  .task_head {
    padding: 1rem 1.5rem;
  }
  .task_item {
    padding: 1.5rem;
  }
}

@media screen and (max-width: 500px) {
  .task_list {
    grid-template-columns: 1fr;
  }
  .task_item:nth-child(odd) {
    border-right: 0;
  }
}


.aco {
  border-top: 1px solid var(--txt-color);
}
.aco_item {
  border-bottom: 1px solid var(--line-color-darker);
}
.aco_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 2.5rem;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background-color 0.25s ease;
}
.aco_btn:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
.aco_btn .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 2.88rem;
  color: var(--sub-txt-color);
  transition: transform 0.35s ease, color 0.25s ease;
}
.aco_item.is_open .aco_btn .material-symbols-outlined {
  transform: rotate(180deg);
  color: var(--main-color-light);
}
.aco_body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.aco_inner {
  padding: 0 2.5rem 2.5rem;
  font-size: clamp(1rem, 1.2vw, 1.62rem);
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.aco_inner .rule {
  padding-top: 3.75rem;
  border-top: 1px dashed var(--line-color-darker);
  padding-bottom: 3.75rem;
}

.rule_tit {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 700;
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.rule_no {
  flex: 0 0 auto;
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-style: normal;
  font-weight: 600;
  color: var(--main-color-light);
}
.rule_list {
  margin-top: 1.25rem;
}
.rule_list.ty_only {
  margin-top: 0;
}
.rule_list > li {
  position: relative;
  padding-left: 1rem;
}
.rule_list > li + li {
  margin-top: 0.5rem;
}
.rule_list > li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}
.rule_note {
  margin-top: 1.88rem;
  padding: 1.88rem 2.5rem;
  border-radius: 0.75rem;
  background-color: #282828;
}
.rule_note_tit {
  display: block;
  margin-bottom: 1rem;
  font-size: clamp(0.94rem, 1.2vw, 1.38rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.rule_defs > div {
  display: flex;
  gap: 0.5rem;
}
.rule_defs > div + div {
  margin-top: 0.5rem;
}
.rule_defs dt {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--txt-color);
}
.rule_defs dt::after {
  content: " :";
}

.hr_charter {
  min-height: 0;
  padding-block: 7.5rem;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 100%),
    url("../../images/sub/esg/bg_human.png");
}
.hr_charter > .wFix {
  display: block;
}
.hr_list {
  margin-top: var(--tit-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.hr_item {
  display: flex;
  align-items: flex-start;
  gap: 5rem;
  padding: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.hr_item dt {
  flex: 0 0 auto;
  width: 3.88rem;
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  line-height: 1.7692;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.hr_item dd {
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 700;
  line-height: 1.7692;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.hr_sign {
  margin-top: 3.75rem;
  font-size: clamp(1.12rem, 1.875vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--txt-color);
}


@media screen and (max-width: 1200px) {
  .aco_btn {
    padding: 2rem;
  }
  .aco_inner {
    padding: 0 2rem 2rem;
  }
  .hr_charter {
    padding-block: 5rem;
  }
  .hr_item {
    gap: 2.5rem;
    padding: 2rem;
  }
}

@media screen and (max-width: 900px) {
  .aco_btn {
    padding: 1.5rem;
  }
  .aco_btn .material-symbols-outlined {
    font-size: 2rem;
  }
  .aco_inner {
    padding: 0 1.5rem 1.5rem;
  }
  .aco_inner .rule {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .rule_note {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
  }
  .rule_defs > div {
    flex-direction: column;
    gap: 0.12rem;
  }
  .hr_charter {
    padding-block: 3.75rem;
  }
  .hr_item {
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .hr_item dt {
    width: 3rem;
  }
  .hr_sign {
    margin-top: 2.5rem;
  }
}

@media screen and (max-width: 500px) {
  .hr_item {
    flex-direction: column;
    gap: 0.5rem;
  }
  .hr_item dt {
    width: auto;
  }
}


.social .tbl_wrap {
  margin-top: 5rem;
}

@media screen and (max-width: 1200px) {
  .social .tbl_wrap {
    margin-top: 3.75rem;
  }
}

@media screen and (max-width: 900px) {
  .social .tbl_wrap {
    margin-top: 2.5rem;
  }
}


.ir_sec .notice_top {
  margin-top: 3.75rem;
}

.ir_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.5rem;
  border-bottom: 1px solid var(--line-color-darker);
}
.ir_info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.ir_info .notice_head {
  min-width: 0;
}
.ir_btns {
  flex: 0 0 auto;
}

.btn_down {
  min-width: 0;
  height: 4.38rem;
  padding: 0 1.25rem;
  border-radius: 0.38rem;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn_down:hover {
  background-color: rgb(255 255 255 / 20%);
  color: var(--txt-color);
  border: 1px solid rgba(255, 255, 255, 0.3);
}


@media screen and (max-width: 1200px) {
  .ir_sec .notice_top {
    margin-top: 2.5rem;
  }
  .ir_item {
    padding: 2rem;
  }
}

@media screen and (max-width: 900px) {
  .ir_item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .ir_info {
    width: 100%;
  }
  .btn_down {
    height: 3.5rem;
  }
}

@media screen and (max-width: 500px) {
  .sub_vis.investment .ty_sec {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    overflow-wrap: anywhere;
  }

  .ir_btns {
    width: 100%;
  }
  .btn_down {
    width: 100%;
  }
}


.report_sec .title_wrap {
  margin-bottom: 2.5rem;
}
.report_agree + .title_wrap {
  margin-top: var(--tit-gap);
}

.agree_doc {
  max-height: 31.25rem;
  padding: 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.03);
  overflow-y: auto;
}
.agree_doc:focus-visible,
.form_chk > input:focus-visible + label > .material-symbols-outlined,
.form_file > input:focus-visible + .btn_file {
  outline: 2px solid var(--main-color-light);
  outline-offset: 2px;
}
.agree_tit {
  font-size: clamp(1rem, 1.35vw, 1.62rem);
  font-weight: 700;
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.agree_tit + .agree_txt {
  margin-top: 1.25rem;
}
.agree_txt + .agree_tit,
.agree_list + .agree_tit {
  margin-top: 2.5rem;
}
.agree_txt,
.agree_list {
  font-size: clamp(0.88rem, 1.05vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.agree_txt + .agree_list,
.agree_list + .agree_txt {
  margin-top: 0.75rem;
}
.agree_list > li {
  position: relative;
  padding-left: 0.88rem;
}
.agree_list > li + li {
  margin-top: 0.38rem;
}
.agree_list > li::before {
  content: "";
  position: absolute;
  top: 0.6875em;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: var(--sub-txt-color);
}
.agree_tit + .agree_list {
  margin-top: 1.25rem;
}

.agree_doc.ty_static {
  max-height: none;
  overflow: visible;
}
.agree_doc + .title_wrap {
  margin-top: var(--tit-gap);
}

.report_flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.62rem;
  margin-top: 1.25rem;
}
.report_flow > li {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
}
.report_flow > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 6.25rem;
  background-color: rgba(255, 255, 255, 0.03);
  font-size: clamp(0.88rem, 1.05vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  white-space: nowrap;
  position: relative;
}
.report_flow > li:not(:last-child)::after {
  content: "arrow_right_alt";
  font-family: "Material Symbols Outlined";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--main-color-light);
}
.report_flow + .agree_tit {
  margin-top: 2.5rem;
}


.report_agree {
  margin-top: 1.88rem;
}
.form_chk {
  position: relative;
  display: inline-flex;
}
.form_chk > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form_chk > label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: clamp(0.94rem, 1.05vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  transition: color 0.2s ease;
}
.form_chk > label > .material-symbols-outlined {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.62rem;
  height: 1.62rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.25rem;
  font-size: 1.12rem;
  color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.form_chk > input:checked + label {
  color: var(--txt-color);
}
.form_chk > input:checked + label > .material-symbols-outlined {
  border-color: var(--main-color);
  background-color: var(--main-color);
  color: var(--txt-color);
}
.form_error {
  margin-top: 0.75rem;
  font-size: clamp(0.88rem, 1.05vw, 1.12rem);
  letter-spacing: -0.02em;
  color: #ff8a8a;
}

.form_tbl {
  /* border-top: 1px solid var(--txt-color); */
}
.form_row {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 1.88rem 1.25rem;
  border-bottom: 1px solid var(--line-color-darker);
}
.form_th {
  flex: 0 0 12.5rem;
  width: 12.5rem;
  font-size: clamp(1rem, 1.2vw, 1.62rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.form_req {
  font-style: normal;
  color: var(--main-color-light);
}
.form_td,
.form_captcha input.form_input {
  flex: 1 1 auto;
  min-width: 0;
}

input.form_input,
.form_area {
  width: 100%;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.38rem;
  background-color: rgba(255, 255, 255, 0.05);
  font-family: inherit;
  font-size: clamp(0.94rem, 1.05vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--txt-color);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

input.form_input {
  height: 3.25rem;
  padding: 0 1.25rem;
}
.form_area {
  min-height: 15rem;
  padding: 0.88rem 1.25rem;
  line-height: 1.6;
  resize: vertical;
}
input.form_input::placeholder,
.form_area::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
input.form_input:focus,
.form_area:focus {
  outline: 0;
  border-color: var(--main-color-light);
  background-color: rgba(255, 255, 255, 0.08);
}
.form_help {
  margin-top: 0.75rem;
  font-size: clamp(0.81rem, 1.05vw, 1.12rem);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
}

.btn_file {
  flex: 0 0 auto;
  gap: 0.38rem;
  min-width: 0;
  height: 3.25rem;
  padding: 0 1.25rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.38rem;
  background: none;
  font-size: clamp(0.88rem, 1.05vw, 1.12rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn_file:hover {
  border-color: var(--txt-color);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--txt-color);
}
.form_file > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 첨부 칸이 여러 개인 폼(공지 글쓰기)에서 줄끼리 붙지 않게.
   ⚠ **첫 칸은 빼고** 둘째 칸부터 — 그래서 인접 형제(+)로 준다.
     첨부가 하나뿐인 신문고 폼에는 아무 영향이 없다. */
.form_file + .form_file {
  margin-top: 0.62rem;
}

.form_file_name {
  min-width: 0;
  font-size: clamp(0.88rem, 1.05vw, 1.12rem);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form_file.is_picked .form_file_name {
  color: var(--txt-color);
}
/* ⚠⚠ [260903 버그수정] `hidden` 이 안 먹던 자리다.
   이 프로젝트에는 전역 `[hidden]{display:none}` 규칙이 없고(reset.css 확인),
   컴포넌트마다 따로 넣는 방식이다(.prd_panel[hidden] · .cert_modal[hidden]).
   그래서 아래 `display: inline-flex` 가 브라우저 기본 [hidden] 을 덮어,
   파일을 고르지 않았는데도 X 버튼이 계속 보였다.
   → 신문고 폼(contents/report.php)에도 있던 증상이고 이 한 줄로 둘 다 고쳐진다.
   ⚠ display 를 주는 요소에 `hidden` 을 쓸 때는 항상 이 짝이 필요하다. */
.form_file_del[hidden] {
  display: none;
}
.form_file_del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--sub-txt-color);
  cursor: pointer;
}
.form_file_del .material-symbols-outlined {
  font-size: 1.12rem;
}
.form_file_del:hover {
  background-color: var(--main-color);
  color: var(--txt-color);
}
.captcha_img {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 3.25rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.38rem;
  background-color: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.captcha_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.captcha_none {
  font-family: var(--font-eng), var(--font-st1), sans-serif;
  font-size: 0.88rem;
  font-style: normal;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}
.captcha_reload {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.38rem;
  background: none;
  color: var(--sub-txt-color);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.captcha_reload:hover {
  border-color: var(--txt-color);
  color: var(--txt-color);
}
.captcha_reload .material-symbols-outlined {
  transition: transform 0.4s ease;
}
.captcha_reload:hover .material-symbols-outlined {
  transform: rotate(180deg);
}

.report_btns {
  margin-top: 3.75rem;
}


/* --------------------------------------------------------------------------
   공지 글쓰기 / 수정 (contents/news/notice_write.php)

   새 컴포넌트가 거의 없다 — 신문고 폼(.form_tbl / .form_row / .form_input /
   .form_area / .form_file / .form_chk)을 **그대로** 쓴다. 여기서 더하는 건 둘뿐이다.
     ① 버튼 두 개 나란히 놓는 자리(.write_btns)
     ② 이미 올라간 첨부 목록(.write_files — 수정 화면에서만)

   ⚠ [260903] 버튼은 신문고(.report_btns)와 **같은 기본 `.btn_pill`** 이다(사용자 지시).
     한때 등록에만 채운 형태(.ty_solid)를 씌웠다가 걷어냈다 — 되살릴 일이 있으면
     `.btn_pill` 에 배경색만 주는 덧옷 한 벌이면 된다.
     ⚠ 그래서 취소와 등록의 겉모습이 같다. 구분은 등록에만 있는 화살표 아이콘뿐이다. */
.write_btns {
  gap: 0.75rem;
  margin-top: 3.75rem;
}

/* 등록된 첨부 — 파일 링크 + '삭제' 체크박스가 한 줄이다.
   ⚠ 파일명이 길면 줄이 넘치므로 체크박스를 오른쪽에 붙여 두고 링크만 줄인다. */
.write_files {
  display: grid;
  gap: 0.62rem;
}
.write_files > li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.write_files .file_link {
  min-width: 0;
}
.write_files .form_chk {
  flex: 0 0 auto;
  margin-left: auto;
}


@media screen and (max-width: 1200px) {
  .agree_doc {
    max-height: 25rem;
    padding: 1.88rem;
  }
  .form_th {
    flex-basis: 9.38rem;
    width: 9.38rem;
  }
  .form_row {
    gap: 1.88rem;
    padding: 1.5rem 0.62rem;
  }
  .report_btns {
    margin-top: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .agree_doc {
    padding: 1.5rem;
  }
  .report_flow{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .report_flow > li > span {
    min-height: 2.38rem;
    padding: 0.44rem 1.13rem;
    flex: 1;
  }
  .report_flow > li:not(:last-child)::after {
    display: none;
  }
  .form_area {
    min-height: 12rem;
  }
  input.form_input,
  .form_area {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 500px) {
  .form_row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1.25rem 0;
  }
  .form_th {
    flex: 0 0 auto;
    width: auto;
    padding-top: 0;
  }
  .form_file,
  .form_captcha {
    flex-wrap: wrap;
  }
  .form_captcha .form_input {
    flex: 1 1 100%;
  }
  .write_btns > .btn_pill {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .write_files > li {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
  .report_btns > .btn_pill {
    width: 100%;
  }
}


.fin_sec .stats,
.fin_trend .chart_card {
  margin-top: var(--tit-gap);
}
.fin_unit {
  margin-bottom: 1.25rem;
  font-size: clamp(0.81rem, 1.05vw, 1.25rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--sub-txt-color);
}


@media screen and (max-width: 1200px) {
  .fin_sec .stats,
  .fin_trend .chart_card {
    margin-top: 2.5rem;
  }
}

@media screen and (max-width: 500px) {
  .fin_unit {
    text-align: left;
  }
}


.disc_head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.75rem;
}
.disc_btns {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
}

.disc_guide {
  display: flex;
  align-items: stretch;
}
.disc_item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 13.62rem;
  padding: 2.5rem;
}
.disc_item:not(:last-child) {
  border-right: 1px solid var(--line-color-dark);
}
.disc_num {
  font-size: clamp(0.88rem, 1.2vw, 1.62rem);
  line-height: 1.385;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}

.dart_card {
  padding: 3rem;
  border-radius: 1.5rem;
  background-color: #121212;
  border: 1px solid var(--line-color-darker);
  overflow: hidden;
}

/* ⚠ [260902] 공시 설명(.disc_sec)과 DART 화면(.dart_sec)은 한 이야기인데
   섹션이 둘이라 `--sec-gap` 이 앞뒤로 겹쳐 360px 이 됐다. 뒤 섹션의 위 여백만
   걷어 하나(180px)로 만든다 — `.wFix + .wFix` 사슬이 섹션을 넘지 못해 생긴 일이다. */
.dart_sec > .wFix {
  padding-top: 0;
}

.dart_frame {
  display: block;
  width: 41rem;
  max-width: 100%;
  height: 80vh;
  min-height: 31.25rem;
  max-height: 62.5rem;
  margin: 0 auto;
  border: 0;
}

/* ⭐ 다크 전환 — **다른 도메인이라 안쪽 CSS 는 못 건드린다.** iframe 요소에
   색을 뒤집는 필터를 걸어 흉내 내는 방법뿐이다.
   · `invert(1)`           흑백을 뒤집는다
   · `hue-rotate(180deg)`  뒤집히며 돌아간 색상을 제자리로(파랑이 파랑으로 남는다)
   · contrast/brightness/saturate 는 보정 — **없으면 회색 위에 회색 글씨가 되어
     오히려 읽기 힘들다.** 보정 전후를 실제 화면으로 비교해서 잡은 값이다.
   ⚠ 되돌리려면 마크업에서 **`ty_dark` 만 떼면** 원본(밝은) 화면으로 돌아온다.
   ⚠ 필터는 매 프레임 합성 비용이 있다 — 높이를 뷰포트로 묶어 둔 이유이기도 하다.
   ⚠ DART 가 색을 바꾸면 이 보정값도 다시 봐야 한다. */
.dart_frame.ty_dark {
  filter: invert(1) hue-rotate(180deg) contrast(1.25) brightness(1.15) saturate(1.2);
}


@media screen and (max-width: 1200px) {
  .disc_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }
  .disc_btns {
    align-items: flex-start;
  }
  .disc_item {
    padding: 1.88rem;
    min-height: 0;
    gap: 1.88rem;
  }
  .dart_card {
    padding: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .disc_guide {
    flex-direction: column;
  }
  .disc_item {
    /* ⚠⚠ `flex: 1 1 0` 을 반드시 풀어야 한다. 주축이 세로로 바뀌는 순간
       그 값은 **폭이 아니라 높이**를 3등분하라는 뜻이 되어, 칸이 46px 로
       눌리고 내용(116px)이 흘러넘쳐 **번호와 다음 칸 문구가 겹친다.**
       (메인 지구본 통계 `.stat_item` 에서 겪은 것과 같은 함정) */
    flex: 0 0 auto;
    gap: 0.62rem;
    padding: 1.5rem 0;
  }
  .disc_item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--line-color-dark);
  }
  .dart_card {
    padding: 1.5rem;
  }
}

@media screen and (max-width: 500px) {
  .disc_btns {
    width: 100%;
  }
  .disc_btns > .btn_pill {
    width: 100%;
  }
  .dart_card {
    padding: 0.75rem;
  }
  .dart_frame {
    height: 85vh;
  }
}

.login_wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 3rem 1.5rem;
}
.login_box {
  width: 100%;
  max-width: 27.5rem;
  padding: 3.75rem 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.login_logo {
  display: inline-block;
  width: 8rem;
  margin-bottom: .4rem;
}
.login_logo img {
  display: block;
  width: 100%;
}
.login_head {
  justify-items: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #ffffff33;
}
.login_form {
  display: grid;
  gap: 1rem;
  text-align: left;
}
.login_field {
  display: grid;
  gap: 0.2rem;
}
.login_label {
  font-size: clamp(0.88rem, 1.05vw, 1.06rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.login_error {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--error-color);
  border-radius: 0.38rem;
  font-size: clamp(0.81rem, 1.05vw, 1rem);
  letter-spacing: -0.02em;
  color: var(--error-color);
}
.login_btns {
  margin-top: 0.63rem;
}
.login_submit,
.login_submit:hover {
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 0.38rem;
  background-color: var(--main-color);
  height: 3.25rem;
  border: none;
}
.login_submit:hover {
  background: var(--main-color-dark);
}

@media screen and (max-width: 500px) {
  .login_box {
    padding: 2.5rem 1.5rem;
    border-radius: 0.75rem;
  }
  .login_logo {
    width: 9.38rem;
    margin-bottom: 0.2rem;
  }
  .login_head {
    margin-bottom: 1.88rem;
  }
}


/* --------------------------------------------------------------------------
   1. evolution — 가운데 궤도 + 카드 3장 (피그마 `SUB-연혁` 최종안)

       ┌───────────────────────────────────────────────┐
       │              [ 제 목 ]                          │
       │   ┌────┐      ╭───────────╮      ┌────┐        │
       │   │ IT │┈┈┈┈┈┈│   궤 도    │┈┈┈┈┈│AGV │        │
       │   └────┘      │  (지구·링)  │     └────┘        │
       │    IT전장      ╰──┬────┬───╯      미래사업       │
       │                  │ EV │                        │
       │                  └────┘  ← 원의 밑을 덮고 올라선다 │
       │                   친환경차                       │
       └───────────────────────────────────────────────┘

   ⭐ **카드 3장이 궤도를 둘러싼다**(좌 · 우 · 아래 가운데). 카드는 상자 없이
     제품컷 + 가운데 정렬 글이고, 궤도의 링·닷은 계속 돈다.
   ⚠ 겹침이 이 구도의 핵심이다 — 좌·우 카드는 궤도와 50px 씩 물리고, 아래 카드는
     원의 밑부분을 덮는다. 그래서 칸을 나누는 그리드가 아니라 **겹침 그리드**다
     (자세한 계산은 `.evo_stage` 주석).
   ⚠ 섹션에 `.wFix` 를 걸지 않고 안쪽 `.evo_inner` 가 폭을 잡는다
     (`.wFix` 와 같은 축: 1500px + 좌우 3rem).
   -------------------------------------------------------------------------- */
.evo {
  padding-block: var(--sec-gap);
  /* 궤도의 발광(box-shadow)이 좁은 폭에서 옆으로 새는 걸 막는다.
     ⚠ 지우면 모바일에서 가로 스크롤이 생긴다. */
  overflow: hidden;
}
.evo_inner {
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: 3rem;
}
.evo .title_wrap {
  margin-bottom: 5rem;
}

/* ── 무대 = 3열 겹침 그리드 ──────────────────────────────────────
   좌 카드 · 궤도 · 우 카드가 같은 줄(row 1)에 **겹쳐** 놓인다.
   ⚠ 궤도에 가운데 칸을 주지 않고 `1 / -1` 로 세 칸을 가로지르게 한 뒤 제 폭
     (48.55%)만 차지하고 가운데 정렬한다. 그래야 25.7%~74.3% 를 잡아서 0~28.6%
     인 좌 카드와 2.9% 겹친다 — 칸을 나눠 주면 이 겹침이 안 나온다.
   ⚠ 모든 비율은 피그마 1660px 기준이다(카드 475 · 궤도 806). */
.evo_stage {
  position: relative;
  display: grid;
  grid-template-columns: 28.6% minmax(0, 1fr) 28.6%;
  align-items: start;
}
.evo_orbit {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 48.55%;
  aspect-ratio: 1;
  margin-inline: auto;
}
.evo_orbit::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  box-shadow: 0 0 5rem 1.25rem rgba(163, 205, 255, 0.14),
              0 0 12.5rem 3.75rem rgba(0, 91, 181, 0.22);
  pointer-events: none;
}
/* 위 발광 위에 겹치는 **움직이는 그라디언트**.
   가운데를 벗어난 밝은 덩어리 둘을 통째로 아주 느리게 돌린다 — 빛이 원 둘레를
   훑고 지나가는 것처럼 보인다.

   ⚠ inset 이 **음수**여야 한다. 코어(.evo_core · inset 9%)가 불투명한 지구
     사진이라, 안쪽에 두면 통째로 가려 아무것도 안 보인다. 코어 바깥 테두리
     구간에서만 보이는 빛이다.
   ⚠ z-index:-1 — 링·닷·코어보다 뒤로 보낸다. `.evo_orbit` 이 z-index:1 로 이미
     쌓임 맥락을 만들어서, 이 음수 값이 섹션 배경까지 뚫고 내려가지 않는다.
   ⚠ 도는 것은 이 덩어리이지 링이 아니다. 회전이 눈에 띄면 과하다 — 24s 는
     "돈다" 가 아니라 "빛이 흔들린다" 로 읽히는 선이다.

   ⚠ `border-radius: 50%` 로 **알파가 남은 그라디언트를 잘라 내면** 그 자리가
     원형 경계선으로 보인다.
     아래쪽 덩어리가 상자 밖(107%)까지 뻗어 있어서, 잘린 자리가 그대로 원형
     경계선이 됐다. 덩어리를 안쪽으로 당기는 것만으로는 부족하다 — 어디까지
     당겨도 잘리는 자리는 남는다.
     → **mask 로 가장자리를 통째로 지운다.** 마스크가 0 으로 끝나니 경계에는
       그릴 것이 아예 없고, `border-radius` 도 필요 없어진다.
     ⚠ 마스크가 꽉 찬 구간(55%)은 코어(반지름 0.41S) 뒤로 숨는다. 눈에 보이는
       것은 코어 테두리부터 바깥으로 사라지는 구간뿐이라, 이 값을 더 줄이면
       빛이 코어에 다 가려 아무것도 안 보인다. */
.evo_orbit::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18%;
  background: radial-gradient(34% 34% at 28% 26%, rgba(163, 205, 255, 0.26), rgba(163, 205, 255, 0) 100%), radial-gradient(38% 38% at 72% 74%, rgb(0 128 255 / 53%), rgba(0, 91, 181, 0) 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(closest-side, #000 55%, rgba(0, 0, 0, 0) 100%);
  filter: blur(2rem);
  animation: evo_glow 24s linear infinite;
  pointer-events: none;
}
@keyframes evo_glow {
  to { transform: rotate(360deg); }
}
.evo_core {
  position: absolute;
  left: 9%;
  top: 9%;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 2.5rem rgba(163, 205, 255, 0.22),
              inset 0 0 3.75rem rgba(0, 91, 181, 0.25);
}
.evo_ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(163, 205, 255, 0.38);
  box-shadow: 0 0 1.88rem rgba(163, 205, 255, 0.16);
}
.evo_ring.ty_out {
  inset: 0;
  border: 1px dashed rgba(163, 205, 255, 0.3);
  box-shadow: none;
}
.evo_spin {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  animation: evo_spin 26s linear infinite;
}
.evo_spin.ty_rev {
  inset: 0;
  animation-duration: 38s;
  animation-direction: reverse;
}
/* 세 번째 닷 — 바깥 링을 `.ty_rev` 와 **반대 방향**으로 돈다. 주기도 달라서
   둘이 스쳐 지나가는 자리가 매번 바뀐다.
   ⚠ 시작 각도는 음수 delay 로 준다. transform:rotate 로 밀면 애니메이션이
     그 값을 덮어써서 아무 효과가 없다. */
.evo_spin.ty_alt {
  inset: 0;
  animation-duration: 30s;
  animation-delay: -14s;
}
.evo_dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin: -0.2rem 0 0 -0.2rem;
  border-radius: 50%;
  background: var(--main-color-light);
  box-shadow: 0 0 0 0.25rem rgba(163, 205, 255, 0.18),
              0 0 0.75rem rgba(163, 205, 255, 0.6);
}
.evo_dot.ty_sm {
  width: 0.28rem;
  height: 0.28rem;
  margin: -0.14rem 0 0 -0.14rem;
  box-shadow: 0 0 0 0.2rem rgba(0, 91, 181, 0.3),
              0 0 0.62rem rgba(163, 205, 255, 0.45);
}
.evo_dot.ty_md {
  width: 0.34rem;
  height: 0.34rem;
  margin: -0.17rem 0 0 -0.17rem;
  box-shadow: 0 0 0 0.22rem rgba(163, 205, 255, 0.14),
              0 0 0.68rem rgba(163, 205, 255, 0.5);
}
@keyframes evo_spin {
  to { transform: rotate(360deg); }
}

/* ── 카드 3장 — 좌 · 우 · 아래 가운데 ──────────────────────────────
   상자를 씌우지 않는다. 피그마와 같이 **글은 가운데 정렬**이고 제목 위
   액센트 선은 없다(선을 두면 카드가 좌/우로 읽혀 궤도를 둘러싼 느낌이 깨진다).
   ⚠ margin 의 % 는 세로값이라도 **부모의 가로폭**을 기준으로 계산된다.
     그래서 피그마 1660px 기준 픽셀을 그대로 1660 으로 나눠 쓸 수 있다. */
.evo_tag {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  text-align: center;
}
.evo_tag.ty_left {
  grid-column: 1;
  grid-row: 1;
  margin-top: 11.57%;
}
.evo_tag.ty_right {
  grid-column: 3;
  grid-row: 1;
  margin-top: 12%;
}
.evo_tag.ty_bottom {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 28.6%;
  margin-inline: auto;
  margin-top: -7.35%;
}
.evo_shot {
  display: block;
}
.evo_shot img {
  width: 100%;
  height: auto;
}
.evo_txt {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. 스텝 레일 = 시대 바로가기
   레일 항목을 누르면 해당 시대로 내려간다(Lenis 의 anchors:true 가 부드럽게
   처리한다 · js/common.js). <li> 는 initHistory() 가 `.is_active` 를 붙이는
   자리라 그대로 두고, 안쪽에 <a> 만 넣었다.
   -------------------------------------------------------------------------- */
/* ⚠ common.css 의 `a { font-size: 18px }` 가 링크에 걸려서, 이걸 되돌려 주지
   않으면 활성 시대가 커지는 연출(li 의 font-size 전환)이 죽는다.
   `font: inherit` 로 li 값을 그대로 물려받게 한다 — 크기 전환도 따라온다. */
.history_steps li a {
  display: block;
  font: inherit;
  color: inherit;
}
.history_steps li:not(.is_active) a:hover,
.history_steps li:not(.is_active) a:focus-visible {
  color: var(--txt-color);
}
.history_cont {
  scroll-margin-top: 9.5rem;
}

/* --------------------------------------------------------------------------
   3. history_link — 기업소개(company.php) 에 남긴 '연혁 보기' 블록
   -------------------------------------------------------------------------- */
.history_link .btn_wrap {
  justify-content: flex-start;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   4. 반응형
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .evo .title_wrap {
    margin-bottom: 3.75rem;
  }
  .evo_tag {
    gap: 1.88rem;
  }
}

/* ── 모바일 = 궤도를 걷어내고 사업영역 카드리스트만 ───────────────────
   좌·우·아래로 둘러싸는 구도는 폭이 있어야 성립한다. 여기서는 궤도를 **아예
   지우고**(display:none) 사업영역 셋을 카드 목록으로만 보여 준다.

   ⚠ `visibility:hidden` 이 아니라 `display:none` 이다. 자리를 남기면 카드
     위에 빈 정사각형이 그대로 뚫린다. 궤도는 `aria-hidden` 인 장식이라
     지워도 읽어 줄 내용이 사라지지 않는다.
   ⚠ 무대를 grid 로 다시 깔면 카드의 `grid-column`·`grid-row`·음수 margin 이
     되살아난다. 그래서 자리 지정을 셋 모두 `initial` 로 되돌린다.
   ⚠ 한 줄에 하나씩, **세로로만** 쌓는다(auto-fit 로 여러 단 접는 것 아니다).
     대신 목록 폭을 30rem 으로 묶어 가운데 세운다 — 900px 에서 카드가 화면
     폭을 다 쓰면 제품컷이 700px 넘게 커져서 목록이 아니라 낱장으로 읽힌다. */
@media screen and (max-width: 900px) {
  .evo .title_wrap {
    margin-bottom: 3rem;
  }
  .evo_inner {
    padding-inline: 1.5rem;
  }
  .evo_orbit {
    display: none;
  }
  .evo_stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    margin-inline: auto;
  }
  .evo_tag.ty_left,
  .evo_tag.ty_right,
  .evo_tag.ty_bottom {
    grid-column: initial;
    grid-row: initial;
    width: auto;
    margin: 0;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem 1.88rem;
    border: 1px solid var(--line-color-darker);
    border-radius: 1.25rem;
    background-color: rgba(255, 255, 255, 0.02);
  }
  .evo_shot {
    width: 60%;
    margin-inline: auto;
  }
}

@media screen and (max-width: 500px) {
  .evo_stage {
    gap: 1rem;
  }
  .evo_tag.ty_left,
  .evo_tag.ty_right,
  .evo_tag.ty_bottom {
    gap: 1rem;
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 0.88rem;
  }
  .evo_shot {
    width: 78%;
  }
}

/* 움직임을 줄이도록 설정한 사용자에게는 궤도를 세워 둔다.
   ⚠ 도는 발광(.evo_orbit::after)도 같이 멈춘다 — 닷만 세우면 배경이 계속 돌아
     "움직임 줄이기" 를 켠 의미가 없다. 빛 자체는 남으니 그림은 그대로다. */
@media (prefers-reduced-motion: reduce) {
  /* ⚠ [260903] `.is_reduce_motion` 과 **짝**이다 — 그 클래스는 common.js 의
     RESPECT_REDUCED_MOTION 이 true 일 때만 <html> 에 붙는다.
     지금은 OS 설정 무시라 클래스가 없고, 그래서 이 부분은 아무 일도 하지 않는다. */
  .is_reduce_motion .evo_spin,
  .is_reduce_motion .evo_orbit::after {
    animation: none;
  }
}


.rb_plat .title_wrap,
.rb_home .title_wrap,
.rb_ai .title_wrap,
.rb_strategy .title_wrap {
  margin-bottom: 4.375rem;
}

/* 단 .rb_plat 만 좀 더 붙인다. 뒤에 오는 .rb_word 는 사진·글이 바로 오지 않고
   sticky 글자 층(.rb_word_bg, 76svh)이 먼저 깔려 제목 아래가 이미 비어
   있다. 공통값 70px 을 그대로 두면 빈 구간이 두 겹으로 보인다.
   ⚠ rb_home · rb_ai · rb_strategy 는 위 공통값 그대로 둔다. */
.rb_plat .title_wrap {
  margin-bottom: 2.5rem;
}

.rb_shot {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #1b1b1b;
}
.rb_shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.rb_shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 16 26 / 0%) 0%, rgba(10, 16, 26, 0.62) 100%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. rb_road — 제목 + 숫자 줄 / rb_axis — 4대 축 가로 스크롤

   둘 다 사이트에 이미 있는 부품을 그대로 쓴다(.stats · .field_sec).
   여기서는 이 페이지에서만 다른 부분만 얹는다.
   -------------------------------------------------------------------------- */

/* ⚠ 공용 규칙이 `.stats.vertical .stats_tit`(0,3,0) 이라 클래스 하나로는 안 이긴다.
   `.stats.vertical` 을 앞에 붙여 자릿수를 맞춘다. */

.stats.vertical.rb_road_stats .stats_tit {
  display: flex;
  align-items: flex-end;
  gap: 0.38rem;
}
/* ⚠⚠ **반응형 재정의를 두지 않는다.** 공용 `.stats` 가 900 이하 2단 접기
   (짝수 칸 오른선 제거 + 첫 줄 아래선)와 500 이하 세로 쌓기(칸마다 아래선)를
   이미 다 한다. 여기서 wrap·flex-basis·border 를 따로 잡았더니
     · 칸 높이가 제멋대로 부풀고(내용이 같은데 235/133/133/307px)
     · 아래선(공용) + 윗선(여기) 이 겹쳐 줄이 두 겹으로 그어졌다.
   선을 손대야 할 일이 생기면 공용 `.stats` 쪽을 보는 게 맞다. */
.rb_apply_list > .stats_item {
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   2. rb_apply — 핵심 역량 기반의 파생 확장
   -------------------------------------------------------------------------- */
.rb_apply_inner {
  margin-bottom: 4.375rem;
}
.rb_road_stats{
  margin-top: 4.37rem;
}
.rb_road_stats .ty_list{
  color: white;
}
/* --------------------------------------------------------------------------
   3. rb_end — 결론 한 문장 · 스크롤로 화면을 꽉 채우는 패널

   [260831] 스크롤을 내리다 이 섹션이 화면에 걸리면 카드가 사방으로 벌어져
   화면을 꽉 채우고, 다 채운 뒤 아래 섹션으로 넘어간다.
   나중에 이 안에 배경 사진이 들어간다(.rb_end_bg).

       ┌──────────────┐        ┌────────────────────┐
       │   ┌──────┐   │        │                    │
       │   │ 카드  │   │   →    │      꽉 찬 패널      │   →  아래로 계속
       │   └──────┘   │        │                    │
       └──────────────┘        └────────────────────┘

   ⭐ **ScrollTrigger 의 pin 을 쓰지 않는다.** 이 페이지에서 pin 은 풀리는 순간
     position:fixed → relative 로 바뀌며 한 프레임 튀는 문제가 있었다
     (260828, 같은 이유로 rb_pin 을 통째로 걷어냈다). 멈춤은 브라우저의
     `position: sticky` 에 맡기고 GSAP 은 **숫자 하나(--p)** 만 스크럽한다 —
     레이아웃을 건드리는 주체가 하나뿐이니 튈 구석이 없다.

   ⚠ `.wFix` 의 폭 제한을 여기서만 푼다. 클래스를 떼지 않는 이유는 위아래
     --sec-gap 리듬과 `.wFix + .wFix { padding-top: 0 }` 사슬을 유지하기
     위해서다. 폭만 풀면 stage 가 화면 폭과 같아져서 `100vw` 도, 그 때문에
     생기는 가로 스크롤을 막는 overflow 처리도 필요 없다.
     (`overflow: hidden` 은 애초에 쓸 수 없다 — 스크롤 컨테이너가 되어
      안쪽 sticky 가 죽는다.)
   ⚠ 세 겹은 `.is_panel` 이 붙은 뒤에만 높이를 갖는다. JS·GSAP 가 없거나
     모션 축소 설정이면 예전 카드 그대로다.
   -------------------------------------------------------------------------- */
/* ⚠ `.is_panel` 을 반드시 함께 걸 것. 효과가 꺼진 상태에서 폭 제한만 풀리면
   카드가 화면 끝까지 늘어나 버린다(좌우 여백은 --p 로 계산하므로 꺼진 상태에는
   없다). 클래스 둘(0,2,0)이라 미디어쿼리 안의 `.wFix`(0,1,0)도 이긴다. */
.rb_end.is_panel {
  max-width: 100%;
  padding-inline: 0;
  /* [260831] 앞 섹션과의 여백을 지운다.
     stage 가 화면 한 장을 차지하고 카드는 그 가운데 놓이므로, 카드 위쪽에는
     이미 (100svh - 카드높이) / 2 만큼 빈 공간이 있다. 여기에 앞 .wFix 의
     아래 --sec-gap 까지 더해지면 여백이 두 겹이 되어 두 배로 벌어져 보였다.
     ⚠ 겹치는 쪽만 지우는 것이다 — 지워도 카드 위 빈 공간은 그대로 남는다
       (1920×911 에서 425px → 245px). 아래쪽은 손대지 않는다. 풀릴 때는
       패널이 이미 꽉 찬 상태라 카드 아래 빈 공간이 보이지 않는다. */
  margin-top: calc(var(--sec-gap) * -1);
}

.rb_end.is_panel .rb_end_run {
  height: 250vh;
  height: 250svh;
}
.rb_end.is_panel .rb_end_stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* ⚠ flex 가 아니라 grid 다. flex 아이템은 내용 폭에서 멈춰(flex-grow: 0)
     margin 을 줄여도 넓어지지 않고 왼쪽으로 밀려가기만 한다. grid 아이템은
     기본이 stretch 라 좌우 margin 이 줄어드는 만큼 그대로 넓어진다. */
  display: grid;
  align-content: center;
  --rb-x: max(3rem, (100% - 1500px) / 2);
}


.rb_end.is_panel .rb_end_box {
  --p: 0;
  --rb-h0: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline: calc(var(--rb-x) * (1 - var(--p)));
  min-height: calc(var(--rb-h0) + (100svh - var(--rb-h0)) * var(--p));
  border-radius: calc(1.25rem * (1 - var(--p)));
}

.rb_end_box {
  position: relative;
  overflow: hidden;
  padding: 4.375rem clamp(1.88rem, 4vw, 5rem);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(163, 205, 255, 0.1) 0%, rgba(163, 205, 255, 0.02) 100%);
  text-align: center;
}

.rb_end_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rb_end_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rb_end_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 12 18 / 0%) 0%, rgb(8 12 18 / 81%) 100%);
}
.rb_end_box > :not(.rb_end_bg) {
  position: relative;
  z-index: 1;
}
.rb_end_sub {
  margin-top: 1.5rem;
  color: var(--sub-txt-color);
}

/* --------------------------------------------------------------------------
   4. rb_plat — 알루미늄 4대 공정 플랫폼
   -------------------------------------------------------------------------- */
/* ── 배경 글자는 멈춘 채, 카드만 그 위로 흐른다 ─────────────────────────

     ┌─────────────────────┐
     │      PLATFORM       │  ← 화면 위에서 38% 지점에 멈춰 있다 (sticky)
     │  ┌──┐  ┌──┐  ┌──┐   │
     │  │  │  │  │  │  │   │  ← 카드만 위로 지나간다
     └─────────────────────┘

   ⭐ 멈춤은 CSS 의 `position: sticky` 가 한다 — JS 없음.
   ⚠⚠ **음수 마진은 카드 목록에 건다 — 글자 층에 걸면 안 된다.**
     겹쳐 놓으려면 둘 중 하나가 흐름에서 자리를 비워야 하는데, 그걸 글자 층의
     `margin-bottom: -76svh` 로 하면 층의 **마진 박스 높이가 0** 이 되어 sticky
     클램핑이 같이 깨진다. 브라우저는 마진 박스를 기준으로 '컨테이너 안에
     머물게' 붙잡으므로, 높이 0 이면 아무 데나 내려가도 되는 것으로 보고
     **글자가 다음 섹션까지 흘러내린다**(260831 실제로 그렇게 됐다).
     목록에 `margin-top: -76svh` 를 걸면 층의 몸(마진 박스)은 76svh 그대로
     남아 클램핑이 제대로 걸리고, 겹치는 효과는 똑같다.
     ⚠ 이 음수값은 항상 .rb_word_bg 의 height 와 **같은 크기**여야 한다.
   ⚠ 카드 목록의 위아래 padding 이 곧 글자가 멈춰 있는 시간이다. 줄이면 멈춤도
     같이 짧아진다.
   ⚠ **위 padding 이 글자 층 높이의 절반(76 ÷ 2 = 38svh)보다 커야 한다(40 : 32).**
     글자는 층 한가운데에 서므로, 카드가 그보다 위에서 시작하면 글자가 처음부터
     끝까지 카드에 가려 안 보인다. 38svh 보다 크게 잡아 두면 카드가 글자 아래에서
     올라오기 시작해 피그마처럼 글자 윗부분이 드러난 구도를 지나간다.
   -------------------------------------------------------------------------- */
.rb_word {
  position: relative;
}
.rb_word_bg {
  position: sticky;
  top: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  /* ⚠ 이 높이가 곧 '제목 아래 얼마나 비우고 글자가 나오나' 다. 글자는 이 층의
     한가운데(= 높이의 절반)에 서므로, 100svh 면 제목 뒤로 화면 절반이 통째로
     비고 나서야 글자가 나왔다. 76svh 로 낮춰 그 빈 구간을 12svh 줄였다.
     ⚠ 바꾸면 .rb_item_list 의 margin-top(같은 값 음수)과 padding-block 위값
       (이 높이의 절반보다 커야 한다)을 **반드시 함께** 맞춰야 한다. */
  height: 76vh;
  height: 47svh;
  pointer-events: none;
}
.rb_word_txt {
  font-family: var(--font-eng), sans-serif;
  font-size: clamp(3rem, 11vw, 12rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .2);
  -webkit-text-stroke: 2px #383838;
}

.rb_item_list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.75rem;
  align-items: start;
  /* ⚠ 위 주석 — 글자 층과 같은 자리를 쓰도록 층 높이만큼 끌어올린다 */
  margin-top: -76vh;
  margin-top: -76svh;
  padding-block: 40svh 32svh;   /* ⚠ 위 주석 — 위가 층 절반(38svh)보다 커야 한다 */
}
/* ⚠ [260902] 배경 글자(`.rb_word_bg`) 없이 카드만 쓰는 변종.
     기본형은 글자 층과 자리를 겹치려고 `margin-top: -76svh` 를 갖는다 —
     글자가 없는 데서 그대로 쓰면 카드가 위 섹션으로 76svh 끌려 올라간다.
   ⭐ 카드 모양(`.rb_item`·`.rb_shot`·`.rb_item_cap`)은 그대로 물려받는다. */
.rb_item_list.ty_plain {
  /* ⚠ 기본형의 `-76svh` 를 지우는 것이 이 변종의 목적이다. 0 이 아니라
     `--tit-gap` 을 주는 이유는 제목줄과 카드가 붙어 버려서다(260902). */
  margin-top: var(--tit-gap);
  padding-block: 0;
  /* ⚠ [260902] 한때 `align-items: stretch` 로 아래를 맞췄는데, 글이 사진 위로
     겹쳐진 뒤에는 카드 높이가 **사진 비율(44/50)로 저절로 같아져서** 필요 없어졌다.
     오히려 stretch 를 두면 늘어난 카드 아래에 사진 없는 빈 자리가 생긴다. */
}
.rb_item:nth-child(2) {
  margin-top: 3.75rem;
}
.rb_item .rb_shot {
  aspect-ratio: 44 / 50;
  height: auto;
  border-radius: 1.25rem;
}
.rb_item_cap {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.rb_item_tag {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--main-color-light);
}

/* ── 섹션 사이 여백 — 끊긴 `.wFix` 사슬을 잇는다 ──────────────────────────

   사이트 리듬은 `.wFix + .wFix { padding-top: 0 }` 로 --sec-gap 하나만 남긴다.
   그런데 `.capa` 는 **섹션 자체가 .wFix 가 아니라 안쪽(.capa_inner)이 .wFix** 라
   앞뒤 섹션과 형제가 되지 못해 사슬이 끊긴다. 그래서 이 페이지에서는
     rb_plat(292 목록 아래 + 180) → capa(180) → rb_home(180)
   처럼 여백이 두세 겹씩 쌓였다(718px · 360px). 끊긴 자리를 직접 잇는다.
   ⚠ core_technology 에서는 앞뒤가 모두 안쪽 .wFix 구조라 원래부터 사슬이 없다 —
     그 페이지 여백은 건드리지 않도록 선택자에 rb_plat / .capa + .wFix 를 붙였다.
   -------------------------------------------------------------------------- */
.rb_plat:has(.rb_word) {
  padding-bottom: 0;
}
/* ⚠ 위 `padding-bottom: 0` + 아래 `padding-top: 0` 이 겹쳐 두 섹션이 딱 붙어
   있었다. 카드가 배경 글자 위를 지나가는 연출 때문에 위쪽 패딩을 지운 것이라
   되살릴 수는 없어, 대신 여백만 따로 준다. */
.rb_plat + .capa .capa_inner {
  padding-top: 0;
  margin-top: var(--sec-gap);
}
.capa + .wFix {
  padding-top: 0;
}


/* ── 4대 공정 — 공용 sticky 스택(.capa) 위에 얹는 것만 ────────────────────

   왼쪽 제목 / 오른쪽 쌓이는 카드 구조다. 폭(660:1000) · sticky 단차 · 덮일 때
   축소되는 움직임은 전부 `.capa` 와 initCapaStack 에서 오고, 여기서는 카드 표면과
   그 안의 배치만 정한다.

   ⚠ 카드 배경은 **불투명이어야 한다.** 카드가 서로 겹쳐 쌓이는 구조라
     반투명이면 아래 카드가 그대로 비친다. 그래서 background-color(불투명) 위에
     background-image(그라디언트)를 얹는 두 겹으로 쓴다.
   ⚠ core_technology 의 카드는 사진이 꽉 차 있어 이 문제가 없었다 — 사진 없이
     쓰는 건 여기가 처음이다.
   -------------------------------------------------------------------------- */
.rb_proc_card {
  /* 공용 카드는 1000:520 인데 그건 사진이 꽉 찬 카드 비율이다. 여기는 글만
     들어가서 그 비율로는 가운데가 텅 빈다. 한 단 눕힌다.
     ⚠ 900 이하에서 공용 규칙이 4/3(세로)로 바꾸는데, 이 규칙이 파일 뒤에 있어
       그걸 이겨 버린다. 그래서 아래 미디어쿼리에서 `auto` 로 되돌린다. */
  aspect-ratio: 1000 / 380;
  background-color: #030303;   /* ⚠ 위 주석 — 겹쳐 쌓이므로 불투명 */
  background-image: linear-gradient(160deg, rgba(163, 205, 255, 0.1) 0%, rgba(163, 205, 255, 0.02) 55%, rgb(161 203 252 / 27%) 100%);
  border: 1px solid var(--line-color-darker);
}
.rb_proc_card.is_own {
  background-image: linear-gradient(160deg,
                    rgba(163, 205, 255, 0.18) 0%,
                    rgba(163, 205, 255, 0.05) 55%,
                    rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(163, 205, 255, 0.45);
}
.rb_proc_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  display: none;
}
.rb_proc_no {
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(163, 205, 255, 0.35);
}
.rb_proc_card.is_own .rb_proc_no {
  color: rgba(163, 205, 255, 0.6);
}
.rb_proc_body {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  height: 100%;
}
/* 아이콘 판. ⚠ 규칙이 두 벌로 갈라져 있어서 앞 벌의 width/height(6.25rem)가
   뒤 벌(30%/100%)에 덮여 죽어 있었다 — 한 벌로 합쳤다. */
.rb_proc_icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 100%;
  margin-bottom: 0;
  border-radius: 24px;
}
.rb_proc_icon img{
  width: 100%;
  height: 100%;
  object-fit:contain;
}

/* [260904] 공정 이름 + 배지 한 줄. 배지가 원래 `.rb_proc_head` 안에 있었는데
   그 묶음이 `display:none` 이라 화면에 안 나왔다 — 이름 옆으로 옮겼다. */
.rb_proc_name {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.rb_proc_by {
  display: inline-flex;
  align-items: center;
  height: 1.62rem;
  padding: 0 0.62rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--main-color-light);
  line-height: 1;
}
.rb_proc_card.is_own .rb_proc_by {
  background: rgba(163, 205, 255, 0.18);
  color: var(--main-color-light);
}

/* --------------------------------------------------------------------------
   5. rb_home — AI 홈 리빙 로봇
   -------------------------------------------------------------------------- */
.rb_home_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.88rem;
}
/* 사진을 **배경으로 깔고** 그 위에 칩(위) · 글(아래)을 얹는다.
   ⚠ 사진이 `position: absolute` 로 빠지므로 카드 높이는 글 높이 + min-height 가
     정한다. `.rb_home_list` 가 grid 라 두 칸은 어차피 같은 높이로 늘어난다.
   ⚠ `justify-content: flex-end` 가 글을 아래로 붙인다.
   ⚠ `overflow: hidden` 이 있어야 사진의 네 귀퉁이가 카드 라운드에 맞게 잘린다. */
.rb_home_item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 30rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  overflow: hidden;
}
.rb_home_item.ty_new {
  border-color: var(--main-color-light);
}
.rb_home_item .rb_shot {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
/* 사진 왼쪽 위에 얹히는 칩 묶음 — 배지(NEW)와 상태칩이 나란히 선다.
   ⚠ 자리를 이 묶음이 잡는다. 칩 각각을 absolute 로 두면 배지가 없는 카드에서
     상태칩이 다른 자리에 서거나, 둘이 겹친다. */
.rb_shot_tags {
  position: absolute;
  left: 2.5rem;
  top: 2.5rem;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 1.88rem);
}
.rb_badge {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: 100px;
  background: var(--main-color-light);
  font-family: var(--font-eng), sans-serif;
  font-size: 0.81rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0d1b2e;
  line-height: 1;
}
.rb_home_cont {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.12rem;
  padding: 2.5rem;
}
.rb_dot_list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rb_dot_list li {
  position: relative;
  padding-left: 0.94rem;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--sub-txt-color);
}
.rb_dot_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.31rem;
  height: 0.31rem;
  border-radius: 50%;
  background: var(--main-color-light);
}
.rb_state {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--main-color-light);
  border-radius: 100px;
  background: rgba(4, 18, 31, 0.55);
  backdrop-filter: blur(3px);
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--main-color-light);
  line-height: 1;
}

.rb_step {
  /* ⭐ [260902] 칸 수를 변수로 뺐다 — 로보틱스는 4칸, 역량(단계)은 5칸이다.
     마크업에서 `style="--rbs:5"` 로 넘긴다. 화살표·배경·모바일 세로 배치는 그대로 따라온다. */
  display: grid;
  grid-template-columns: repeat(var(--rbs, 4), minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 3.12rem;
  padding: 1.88rem 2.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
}
.rb_step.ty_main {
  background: linear-gradient(269deg, rgb(0 128 255 / 85%) 0%, rgba(0, 91, 181, 0.42) 52%, rgb(0 91 181 / 58%) 100%);
  /* border: 1px solid rgba(163, 205, 255, 0.22); */
}
.rb_step li {
  position: relative;
  text-align: center;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}
.rb_step li span {
  margin-left: 0.31rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--main-color-light);
}
.rb_step li + li::before {
  content: "arrow_circle_right";
  position: absolute;
  left: -1.25rem;
  top: 50%;
  font-family: "Material Symbols Outlined";
  font-size: 1.62rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: var(--main-color-light);
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   6. rb_ai — 피지컬 AI 무인 라인
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   6. rb_ai — 피지컬 AI 무인 라인
   -------------------------------------------------------------------------- */
.rb_ai_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.88rem;
}
.rb_ai_item {
  display: flex;
  flex-direction: column;
  gap: 1.88rem;
  position: relative;
}
.rb_ai_item .rb_shot {
  height: 35rem;
}
.rb_ai_item:hover .rb_shot img {
  transform: scale(1.04);
}
.rb_ai_cont {
  display: flex;
  flex-direction: column;
  gap: 0.88rem;
  position: absolute;
  width: 100%;
  padding: 2.5rem;
  left: 0;
  bottom: 0;
  height: 100%;
}
.rb_ai_cont > .ty_tit {
  color: var(--main-color-light);
}
.rb_ai_cont > .ty_body {
  color: var(--sub-txt-color);
}
.rb_use {
  display: flex;
  flex-direction: column;
  gap: 0.88rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-color-darker);
}
.rb_use_tit {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-color);
}


/* --------------------------------------------------------------------------
   7. rb_strategy — 기술 확보 5단계 [260902 개편]

   세로로 차오르던 `.flow` 에서 **가로 카드 스와이퍼**로 바꿨다(피그마 Group 70).
   ⚠ 제목줄·카운터·화살표·반응형은 전부 **글로벌 네트워크의 협력사 스와이퍼**에서
     온다(`.partner_*`). 여기서는 카드 표면만 정한다.
   ⚠ 사진(`.str_shot`)은 아직 없다 — 없으면 어두운 판으로 보이고, 파일이 오면
     사진이 깔리면서 아래 그라디언트가 글을 받쳐 준다.
   -------------------------------------------------------------------------- */
.str_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.62rem;
  aspect-ratio: 520 / 300;
  padding: 2.5rem;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
}
.str_shot {
  position: absolute;
  inset: 0;
}
.str_shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.str_shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 3, 3, 0.85), rgba(3, 3, 3, 0.25));
}
.str_no {
  position: absolute;
  right: 2.5rem;
  top: 1.88rem;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-style: normal;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.14);
}
.str_card > .str_tag,
.str_card > strong,
.str_card > p {
  position: relative;
  z-index: 1;
}
.str_tag {
  font-size: clamp(0.82rem, 1.1vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--main-color-light);
}
.str_card > p {
  color: var(--sub-txt-color);
}

/* --------------------------------------------------------------------------
   8. 반응형
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .rb_apply_inner {
    gap: 3.12rem;
    margin-bottom: 3.12rem;
  }
  /* ⚠ .stats 는 grid 가 아니라 flex 다 — 칸을 접으려면 wrap 을 써야 한다.
     접힌 줄의 첫 칸은 오른쪽 구분선만 남기고 위 구분선을 더한다. */
  .rb_plat .title_wrap,
  .rb_home .title_wrap,
  .rb_ai .title_wrap,
  .rb_strategy .title_wrap {
    margin-bottom: 3.12rem;
  }
  .rb_plat .title_wrap {
    margin-bottom: 1.88rem;
  }
  /* ⚠ 사진은 이제 카드를 통째로 덮는 **배경**(absolute)이다. 예전처럼 높이를
     고정하면(15rem) 카드 위쪽 일부만 사진이 되고 아래는 빈 판이 된다.
     grid 시절의 `grid-template-columns`·`gap` 도 이제 쓰이지 않는다. */
  .rb_home_item {
    min-height: 26rem;
  }
  /* 배경 글자(PLATFORM)를 끈다.
     ⚠⚠ 그러면 목록의 `margin-top: -76svh` · `padding-block: 40svh 32svh` 도
       **반드시 같이 풀어야 한다.** 그 값들은 글자 층과 자리를 겹치기 위한 것이라,
       글자만 지우고 두면 목록이 76svh 위로 끌려 올라가 위 섹션을 파고들고
       위아래로 화면 몇 개 분량의 빈 공간이 남는다.
     ⚠ 층을 `display: none` 으로 지운다 — sticky 를 풀어 두기만 하면 76svh 짜리
       빈 칸이 그대로 자리를 차지한다. */
  .rb_word_bg {
    display: none;
  }
  .rb_item_list {
    gap: 2.5rem;
    margin-top: 0;
    padding-block: 0;
  }
  .rb_item:nth-child(2) {
    margin-top: 2.5rem;
  }
  .rb_proc_body {
    gap: 1.88rem;
  }
  .rb_proc_card {
    aspect-ratio: 1000 / 420;
  }
}

@media screen and (max-width: 900px) {
  .rb_apply_inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .rb_end_box {
    padding: 2.5rem 1.5rem;
  }
  .rb_end.is_panel .rb_end_stage {
    --rb-x: 2rem;
  }
  .rb_end.is_panel .rb_end_run {
    height: 200vh;
    height: 200svh;
  }
  /* ⚠ .rb_item_list 는 여기서 1열로 만들지 않는다. 한 장이 화면 폭을 다 쓰면
     44:50 비율 때문에 카드 하나가 900px 넘게 높아진다. 세 칸을 유지하고 칸만
     좁힌다(500 이하에서 1열로 접는다). */
  .rb_home_list,
  .rb_ai_list,
  .rb_step {
    grid-template-columns: minmax(0, 1fr);
  }
  .rb_item_list {
    gap: 1.25rem;
  }
  .rb_item:nth-child(2) {
    margin-top: 1.25rem;
  }
  .rb_item_cap {
    padding: 1.25rem 0.75rem;
    gap: 0.25rem;
  }
  /* ⚠ .rb_item .rb_shot 은 여기서 빼 두었다 — 높이를 고정하면 44:50 비율이 깨진다 */
   .rb_ai_item .rb_shot {
    height: 24rem;
  }
  .rb_proc_card {
    aspect-ratio: auto;
  }
  .rb_step {
    gap: 0;
    padding: 0.75rem 1.5rem;
    text-align: center;
  }
  .rb_step li {
    padding: 1.25rem 0;
  }

  .rb_step li + li::before {
    content: "arrow_circle_down";
    left: 50%;
    top: 0;
  }
  .str_card{
    padding: 1.5rem;
  }
}

@media screen and (max-width: 500px) {
  .rb_item_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .rb_item:nth-child(2) {
    margin-top: 0;
  }
  .rb_item .rb_shot {
    aspect-ratio: 16 / 10;
  }
  .rb_item_cap {
    padding: 1.5rem 1rem;
  }
  .rb_proc_body {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .rb_proc_icon{
    width: 100%;
    height: 10rem;
  }
  
}

/* --------------------------------------------------------------------------
   vision — 미래비전 [260902]  (구 홈페이지 sub03_06 이식)
   -------------------------------------------------------------------------- */

/* VISION 문구 — 아래 MISSION 과 붙여 둔다.
   ⚠ `.wFix` 는 위아래로 `--sec-gap`(10rem)씩 여백을 갖는다. 그래서 이 섹션
     아래 여백 + MISSION 안쪽 `.wFix` 위 여백이 겹쳐 20rem 이 됐다. 아래쪽만 뺀다. */
.vs_lead {
  padding-bottom: 0;
}

/* 제목줄 — 아래 내용과 간격을 띄운다.
   ⚠ `.title_wrap` 자체에는 아래 여백이 없다(그 안의 tag↔제목 간격만 있다).
     그래서 제목만 있는 섹션에서는 내용이 바로 붙는다 — 이 클래스로 띄운다. */
.vs_head {
  margin-bottom: var(--tit-gap);
}

/* 상자 없이 그림만 — AI 구성도. 그림 자체가 판처럼 생겨서 테두리를 두르면 두 겹이 된다 */
.vs_plain {
  text-align: center;
}
.vs_plain img {
  max-width: 100%;
}

/* 그림 판 — MISSION. 보유기술·설비의 `.furnace_visual`·`.dc_ill` 과 같은 어법 */
.vs_shot {
  padding: 3rem;
  border-radius: 1rem;
  text-align: center;
}
.vs_shot img {
  max-width: 100%;
}

/* STRATEGY 4칸 — 아이콘 + 이름
   ⭐ `--orbit`(원 지름)과 `--sgap`(칸 간격)을 여기 두는 이유: 칸을 잇는 선의
     길이를 이 둘로 계산한다(아래 `li + li::before`). 원 크기를 바꾸면 선도 따라온다. */
.vs_strategy {
  --orbit: 12rem;
  --sgap: 0.62rem;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sgap);
}
/* ⚠ [260902] 칸 테두리와 안쪽 여백은 뺐다 — 아이콘 원이 이미 칸을 구분해 준다. */
.vs_strategy > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

/* 칸을 잇는 선 — 설계 → 소재 → 공정 → 품질 순서라 이어져 읽히는 것이 맞다.
   ⭐ **원과 원 사이에만** 그린다(원을 뚫고 지나가지 않는다). 그래서 길이가
     `칸 폭 + 간격 - 원 지름` 이다 — 위 `--orbit`·`--sgap` 두 값으로 계산된다.
   ⚠ `top` 은 원의 **중심 높이**다. 칸에 안쪽 여백이 없어서 `--orbit / 2` 로 맞는다.
     li 에 padding 을 다시 주면 그만큼 어긋난다.
   ⭐ 왼쪽이 흐리고 오른쪽이 진하다 — 흐름의 방향이 읽힌다. */
.vs_strategy > li + li::before {
  content: "";
  position: absolute;
  top: calc(var(--orbit) / 2);
  right: calc(50% + var(--orbit) / 2);
  width: calc(100% + var(--sgap) - var(--orbit));
  height: 1px;
  background: linear-gradient(to right,
              rgba(163, 205, 255, 0.06),
              rgba(163, 205, 255, 0.42));
}
/* 아이콘 원 — 회전 핀은 뺐고(위 마크업 주석 참고) 원과 아이콘만 남았다.
   ⭐ 크기는 `--orbit` 한 값으로 바꾼다. 아이콘은 그 안에서 비율로 따라온다. */
.vs_strategy .vs_icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--orbit);
  height: var(--orbit);
}
/* 원판 자체 — 아이콘을 담는다 */
.vs_strategy .vs_icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(0, 91, 181, 0.35), rgba(0, 91, 181, 0.06) 70%);
  border: 1px solid rgba(163, 205, 255, 0.28);
  transition: border-color 0.4s, transform 0.4s;
}
.vs_strategy .vs_icon img {
  position: relative;
  z-index: 1;
  width: 46%;
  height: 46%;
  object-fit: contain;
}
/* 올리면 원이 살짝 커지고 테두리가 밝아진다 */
.vs_strategy > li:hover .vs_icon::before {
  transform: scale(1.06);
  border-color: rgba(163, 205, 255, 0.6);
}
.vs_strategy strong {
  color: var(--txt-color);
}

/* --------------------------------------------------------------------------
   CORE VALUE 밴드 — 전폭. 구 홈페이지 사진 다섯 장을 그대로 쓴다.

   ⚠⚠ 이 구간은 **이 사이트에서 유일하게 밝은 판**이다. 사진이 구 사이트(흰 바탕)
     것이라 그렇다. 다크로 다시 만들면 아래 `--cv-dim` 을 0 에 가깝게 낮추면 된다
     — 지금은 어둡게 덮어 위아래 검정 구간과 덜 튀게 맞춰 놨다.
   ⭐ 칸별 호버 사진은 마크업의 `--cv` 로 넘어온다(파일명이 순번과 짝이라
     CSS 에 nth-child 를 네 벌 쓰지 않는다 — 구 사이트는 그렇게 되어 있었다).
   ⚠ 제목은 사진 위에 얹힌다. 그래서 `.vs_core` 가 `position: relative` 다.
   -------------------------------------------------------------------------- */
.vs_core {
  --cv-dim: 0.55;                 /* 사진을 덮는 검정 정도 — 0 이면 원본 그대로 */

  position: relative;
  padding: var(--sec-gap) 0 0;
}
.vs_core_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 44rem;
  background: url("../../images/sub/r&d/vision_cv_bg.png") no-repeat center center / cover;
}
.vs_core_list > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  overflow: hidden;
}
/* ⚠⚠ 층 순서가 핵심이다. 처음엔 사진을 `::after { z-index: -1 }` 로 뒤에 뒀는데,
     li 가 쌓임 맥락을 만들지 않아서 음수 z-index 가 부모 밖으로 빠져나가
     **호버해도 사진이 안 바뀌었다**(260902). 음수를 쓰지 말고 0 → 1 → 2 로 쌓는다.
       ::before  사진 (평소 투명 → 호버에 떠오름)   z-index 0
       ::after   어둡게 덮는 판 / 호버엔 파랑        z-index 1
       내용                                        z-index 2 */
.vs_core_list > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cv) no-repeat center center / cover;
  opacity: 0;
  transition: opacity 0.6s;
}
.vs_core_list > li:hover::before {
  opacity: 1;
}
/* 어둡게 덮는 판 — 사진이 밝아서 글자가 안 읽힌다 */
.vs_core_list > li::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, var(--cv-dim));
  transition: background-color 0.4s;
}
/* 호버 — 파랑 기운을 얹는다(구 사이트의 blue multiply 를 이 사이트 색으로 옮긴 것) */
.vs_core_list > li:hover::after {
  background-color: rgba(0, 91, 181, 0.42);
}
.vs_core_list > li > * {
  position: relative;
  z-index: 2;
}
.vs_core_list > li span {
  color: var(--sub-txt-color);
}
.vs_core_list > li strong {
  margin-top: 0.62rem;
  padding-top: 0.62rem;
  border-top: 1px solid transparent;
  transition: border-color 0.6s, padding-top 0.6s;
}
.vs_core_list > li:hover strong {
  padding-top: 1.25rem;
  border-top-color: rgba(255, 255, 255, 0.28);
}

@media screen and (max-width: 900px) {
  .vs_strategy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --orbit: 9rem;
  }
  /* ⚠ 2열로 접히면 잇는 선이 줄바꿈 자리에서 끊겨 엉뚱하게 남는다 — 끈다.
     (첫 칸을 뺀 나머지 셋에 붙는 선이라, 3번째 칸의 선이 줄 밖으로 나간다) */
  .vs_strategy > li + li::before {
    display: none;
  }
  /* ⚠ 4칸을 세로로 세우면 사진 밴드가 176rem 이 된다 — 2×2 로 접는다 */
  .vs_core_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .vs_core_list > li {
    min-height: 22rem;
  }
}
@media screen and (max-width: 600px) {
  .vs_shot {
    padding: 1.5rem;
  }
  .vs_strategy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
  }
}

/* --------------------------------------------------------------------------
   capability — 역량 [260902]  (구 홈페이지 sub03_02 이식)

   ⭐ 개발 5단계는 `.rb_step`, R&D 프로젝트 카드는 `.rb_item_list.ty_plain` 을
      그대로 쓴다 — 여기에는 그 둘에 없는 것만 있다.
   -------------------------------------------------------------------------- */

/* 좌(DYNAMICS) / 우(분야별 사례) 두 단.
   ⚠ 왼쪽은 내용이 짧아 폭을 고정하고, 오른쪽이 남는 폭을 받는다.
     `1fr 1fr` 로 두면 오른쪽 네 칸이 좁아져 사진 속 부품이 안 보인다. */
.cp_grid {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  gap: 5rem;
  margin-top: var(--tit-gap);
  align-items: start;
}

/* ── 왼쪽 : DYNAMICS ────────────────────────────────────────── */
.cp_dyn {
  position: sticky;
  top: 8rem;              /* 고정 헤더 아래로 */
}
.cp_dyn_list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-color-darker);
}
.cp_dyn_list > li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-color-darker);
}
.cp_no {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--main-color-light);
}
/* 사진 셋 — 위 한 장이 넓고 아래 두 장이 나뉜다(원본 비율 378×221 / 378×140) */
.cp_dyn_img {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  margin-top: 2.5rem;
}
/* 첫 장은 두 칸을 걸치되 **키를 눌러 둔다.**
   ⚠ 자르지 않는다 — 사진 높이만 상한을 두고 폭은 비율대로 따라오게 하고
     가운데 세운다(`object-fit: cover` 로 자르면 기어 그림이 잘려 뭉개진다).
   ⭐ 크기는 `--dyn-h` 한 값으로 조절한다. */
.cp_dyn_img > span:first-child {
  --dyn-h: 11rem;

  grid-column: 1 / -1;
}
.cp_dyn_img > span:first-child img {
  width: auto;
  max-width: 100%;
  max-height: var(--dyn-h);
  margin: 0 auto;
}
.cp_dyn_img > span {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-color-darker);
  border-radius: 0.75rem;
}
.cp_dyn_img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 오른쪽 : 분야별 사례 ─────────────────────────────────────── */
.cp_field {
  display: grid;
  gap: var(--tit-gap);
}
.cp_field_group > strong {
  display: block;
  margin-bottom: 1.88rem;
}
.cp_case {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
/* ⚠ [260902] 테두리는 뺐다 — 사진 여덟 장이 각자 선을 두르면 격자가 시끄러워진다. */
.cp_case > li {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.cp_case img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s;
}
.cp_case > li:hover img {
  transform: scale(1.04);
}

/* ── R&D 프로젝트 카드 ────────────────────────────────────────────
   사진 + 제목 + 목록이 **한 상자 안에** 들어간다(로보틱스 PLATFORM 카드는
   사진 위에 글을 얹는 방식이라 그 부분만 다르다).
   ⭐ 선·라운드·바탕·그림자는 사업분야 `.flow_item` 과 **같은 값**이다 —
     사이트 안에서 카드가 두 종류로 보이지 않게.
   ------------------------------------------------------------------ */
.cp_proj {
  /* ⚠ [260902] 글을 **사진 위에 겹친다.** 그래서 카드가 기준(`relative`)이고
     글 덩이가 `absolute` 로 아래에 붙는다 — 로보틱스 `.rb_item_cap` 과 같은 방식.
     ⭐ 다시 아래로 내리려면 `.cp_proj_body` 의 position 세 줄을 지우고
       여기에 `display: flex; flex-direction: column-reverse` 를 주면 된다. */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-color-darker);
  border-radius: 1.25rem;
  background-color: var(--bg-color);
  box-shadow: 0 0 3.75rem rgba(0, 91, 181, 0.45);
}
/* 사진이 카드를 꽉 채운다 — 라운드는 카드가 갖고 있으니 사진 쪽은 끈다. */
.cp_proj .rb_shot {
  border-radius: 0;
}
/* ⚠ 사진 위 어둡게 덮는 판. 기본 `.rb_shot::after`(아래 62%)는 캡션 두 줄용이라
     여기서는 글이 목록까지 세 줄 더 얹혀 안 읽힌다 — 더 위에서부터 진하게 깐다.
   ⭐ 진하기는 아래 두 숫자(0.35 / 0.92)로 조절한다. */
.cp_proj .rb_shot::after {
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(10, 16, 26, 0) 0%,
              rgba(10, 16, 26, 0.35) 38%,
              rgba(10, 16, 26, 0.92) 100%);
}
.cp_proj_body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;                 /* ⚠ 사진 위 어둡게 덮는 판(::after, z 1)보다 위 */
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  padding: 2.5rem;
}
.cp_proj_body .rb_item_tag {
  color: var(--main-color-light);
}

.cp_proj_list {
  margin-top: .6rem;
}
.cp_proj_list > li {
  position: relative;
  padding-left: 0.88rem;
}
.cp_proj_list > li + li {
  /* margin-top: 0.62rem; */
}
.cp_proj_list > li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--main-color-light);
}

@media screen and (max-width: 1200px) {
  .cp_grid {
    grid-template-columns: 1fr;
    gap: var(--tit-gap);
  }
  /* ⚠ 한 단이 되면 sticky 가 의미 없다 — 왼쪽이 화면에 붙어 따라다니면 거슬린다 */
  .cp_dyn {
    position: static;
  }
}
@media screen and (max-width: 600px) {
  .cp_case {
    grid-template-columns: 1fr;
  }
  .cp_dyn_img {
    gap: 0.4rem;
  }
}