@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:bcon01 */
/* bcon01 — 방역형 외부 사료이송 인프라 (PC 전용) */
.bcon01 {
  background-color: var(--light-1);
}

.bcon01_iner {
  padding-top: calc(var(--px)*66);
  padding-right: calc(var(--px)*1);
  padding-bottom: calc(var(--px)*108);
}

.bcon01__head {
  gap: calc(var(--px)*42);
  margin-bottom: calc(var(--px)*68);
}

.bcon01__rows {
  width: calc(var(--px)*1440);
  gap: calc(var(--px)*33);
}

.bcon01__photo {
  flex: none;
  border-radius: calc(var(--px)*23);
  overflow: hidden;
}

.bcon01__text {
  flex: 1 1 0;
  min-width: 0;
  gap: calc(var(--px)*34);
  padding-left: calc(var(--px)*99);
  padding-bottom: calc(var(--px)*23);
}

.bcon01__text--end {
  padding-left: 0;
  padding-right: calc(var(--px)*100);
  padding-top: calc(var(--px)*15);
  padding-bottom: 0;
}

.bcon01__subtitle {
  padding-left: calc(var(--px)*28);
}

.bcon01__subtitle--end {
  padding-left: 0;
  padding-right: calc(var(--px)*30);
}

/* 제목 줄 높이가 64 보다 커서 위아래 inset 으로 바 높이를 맞춘다 */
.bcon01__bar {
  top: 0;
  bottom: calc(var(--px)*4);
  left: 0;
  width: calc(var(--px)*4);
  background-color: var(--primary);
}

.bcon01__bar--end {
  left: auto;
  right: 0;
}

.bcon01__body {
  gap: calc(var(--px)*29);
}

.bcon01__summary {
  margin-top: calc(var(--px)*77);
  width: calc(var(--px)*1440);
  padding-block: calc(var(--px)*28.5);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px)*23);
}

.bcon01__badge {
  top: calc(var(--px)*14);
  left: calc(var(--px)*19);
  width: calc(var(--px)*84);
  padding-block: calc(var(--px)*15);
  border-radius: calc(var(--px)*23);
  background-color: var(--primary);
}

/* 모바일: 2행 → column(사진 위 · 글 아래), 텍스트 가운데, pc-inline 개행 해제 */

/* IMG:AUTO bcon01 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon01__photo {
    width: calc(var(--px)*700);
    aspect-ratio: 700 / 430;
}

.bcon01__bulb {
    width: calc(var(--px)*39);
    aspect-ratio: 39 / 54;
}
/* /IMG:AUTO bcon01 END */

/* FONT:AUTO bcon01 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon01 {
    font-family: var(--font-pretendard);
}

.bcon01__head {
    font-weight: 700;
    text-align: center;
}

.bcon01__eyebrow {
    font-size: var(--bodyL);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.bcon01__title {
    font-size: var(--titleM);
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.bcon01__rows {
    color: #222222;
}

.bcon01__subtitle,
.bcon01__subtitle.bcon01__subtitle--end {
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.bcon01__body {
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.45;
}

.bcon01__text.bcon01__text--end {
    text-align: right;
}

.bcon01__summary-text {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.28;
    text-align: center;
    color: #111111;
}
/* /FONT:AUTO bcon01 END */

/* INK:AUTO bcon01 */
.bcon01__title { margin-top: calc(var(--px) * -6.45); margin-bottom: calc(var(--px) * -6.44); } /* base 0,0 */
.bcon01__desc { margin-top: calc(var(--px) * -4.55); margin-bottom: calc(var(--px) * -4.54); } /* base 0,0 */
.bcon01__subtitle.bcon01__subtitle--end { margin-top: calc(var(--px) * -4.5); margin-bottom: calc(var(--px) * -4.5); } /* base 0,0 */
.bcon01__subtitle { margin-top: calc(var(--px) * -4.5); margin-bottom: calc(var(--px) * -4.5); } /* base 0,0 */
.bcon01__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.bcon01__desc.bcon01__desc--tail { margin-top: calc(var(--px) * -4.55); margin-bottom: calc(var(--px) * -2.54); } /* base 0,0 */
/* /INK:AUTO bcon01 END */

@media (max-width:599px) {
  .bcon01_iner {
    padding-top: 10.6667vw;
    padding-right: 5.3333vw;
    padding-bottom: 17.0667vw;
    padding-left: 5.3333vw;
  }

  .bcon01__head {
    gap: 6.4vw;
    margin-bottom: 10.6667vw;
  }

  .bcon01__rows {
    width: 100%;
    gap: 12.8vw;
  }

  .bcon01__row {
    flex-direction: column;
    gap: 6.4vw;
  }

  .bcon01__row--rev {
    flex-direction: column-reverse;
  }

  .bcon01__photo {
    width: 100%;
    border-radius: 4.2667vw;
  }

  .bcon01__text,
  .bcon01__text.bcon01__text--end {
    flex: none;
    width: 100%;
    gap: 5.3333vw;
    padding: 0;
    align-items: center;
    text-align: center;
  }

  .bcon01__body {
    gap: 4.2667vw;
    align-items: center;
  }

  .bcon01__subtitle,
  .bcon01__subtitle.bcon01__subtitle--end {
    padding-left: 0;
    padding-right: 0;
  }

  .bcon01__bar {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    display: block;
    width: 12.8vw;
    padding-top: 1.0667vw;
    margin: 3.2vw auto 0;
  }

  .bcon01__bar--end {
    right: auto;
  }

  .bcon01__summary {
    flex-direction: column;
    width: 100%;
    margin-top: 12.8vw;
    padding-block: 6.4vw;
    padding-inline: 5.3333vw;
    gap: 4.2667vw;
    border-radius: 4.2667vw;
  }

  .bcon01__badge {
    position: relative;
    top: auto;
    left: auto;
    width: 12.8vw;
    padding-block: 2.1333vw;
    border-radius: 3.2vw; /* RADIUS: PC 라운드 사각 배지(spec 23px)의 모바일 스케일 */
  }

  .bcon01__bulb {
    width: 6.4vw;
  }
}

/* /merge-build:bcon01 */
/* merge-build:bcon02 */
/* bcon02 — 장거리 밀폐 이송기술. 모바일: intro 를 column 으로 접어 사진 → 설명, 카드 3열 → 1열 */
.bcon02 {
  background-color: var(--bg-color);
}

.bcon02_iner {
  padding-top: calc(var(--px)*131);
  padding-bottom: calc(var(--px)*111);
}

.bcon02__eyebrow {
  text-transform: uppercase;
}

.bcon02__title {
  margin-top: calc(var(--px)*39);
}

.bcon02__lead {
  margin-top: calc(var(--px)*31);
}

.bcon02__lead-em {
  display: inline-block;
  padding: 0 calc(var(--px)*5);
  margin-bottom: calc(var(--px)*11);
  background-color: color-mix(in srgb, var(--primary) 27%, white);
}

.bcon02__intro {
  align-self: stretch;
  gap: calc(var(--px)*101);
  margin-top: calc(var(--px)*82);
  padding-left: calc(var(--px)*229);
}

.bcon02__subtitle {
  border-left: calc(var(--px)*4) solid var(--primary);
  padding-left: calc(var(--px)*24);
}

.bcon02__intro-text {
  padding-bottom: calc(var(--px)*5);
}

.bcon02__desc {
  margin-top: calc(var(--px)*28);
}

.bcon02__desc-para {
  display: block;
}

.bcon02__desc-para + .bcon02__desc-para {
  margin-top: calc(var(--px)*21);
}

.bcon02__variables {
  width: calc(var(--px)*1439);
  margin-top: calc(var(--px)*115);
  padding-right: calc(var(--px)*5);
  padding-bottom: calc(var(--px)*50);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px)*26);
  background-color: var(--bg-color);
}

.bcon02__badge {
  margin-top: calc(var(--px)*-28);
  margin-bottom: calc(var(--px)*25);
  padding: calc(var(--px)*13) calc(var(--px)*37);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px)*26);
  background-color: color-mix(in srgb, var(--primary) 95%, white);
}

.bcon02__cards {
  gap: calc(var(--px)*11);
}

.bcon02__card-body {
  left: calc(var(--px)*60);
  bottom: calc(var(--px)*60);
}

.bcon02__card-no {
  margin-bottom: calc(var(--px)*4);
  padding-left: calc(var(--px)*8);
  border-left: calc(var(--px)*4) solid var(--primary);
}

.bcon02__card-title {
  margin-top: calc(var(--px)*17);
}

.bcon02__card-desc {
  margin-top: calc(var(--px)*9);
}

.bcon02__card-img {
  overflow: hidden;
}

.bcon02__card-img img {
  transition: transform .5s ease-out;
}

@media (hover:hover) {
  .bcon02__card:hover .bcon02__card-img img {
    transform: scale(1.06);
  }
}

/* IMG:AUTO bcon02 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon02__photo {
    width: calc(var(--px)*702);
    aspect-ratio: 702 / 433;
}

.bcon02__card-img {
    width: calc(var(--px)*430);
    aspect-ratio: 430 / 276;
}
/* /IMG:AUTO bcon02 END */

/* FONT:AUTO bcon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon02 {
    font-family: var(--font-pretendard);
}

.bcon02__head {
    text-align: center;
}

.bcon02__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.bcon02__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.bcon02__lead,
.bcon02__intro-text {
    color: #222222;
}

.bcon02__lead-em {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.17;
}

.bcon02__lead-text {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;  /* OVR */
}

.bcon02__lead-tail {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.bcon02__subtitle {
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.07;  /* OVR */
}

.bcon02__desc-para {
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.45;
}

.bcon02__badge {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-align: center;
    color: #000000;
}

.bcon02__card-no {
    font-size: var(--bodyXS);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.86;  /* OVR */
    color: #ffffff;
}

.bcon02__card-title {
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.27;
    color: #ffffff;
}

.bcon02__card-desc {
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #c9ccc9;
}
/* /FONT:AUTO bcon02 END */

/* INK:AUTO bcon02 */
.bcon02__title { margin-top: calc(var(--px) * 31.55); margin-bottom: calc(var(--px) * -6.44); } /* base 39,0 */
.bcon02__desc-para { margin-top: calc(var(--px) * -4.55); margin-bottom: calc(var(--px) * -4.54); } /* base 0,0 */
.bcon02__card-title { margin-top: calc(var(--px) * 11.99); margin-bottom: calc(var(--px) * -4.01); } /* base 17,0 */
.bcon02__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.bcon02__card-desc { margin-top: calc(var(--px) * 5.95); margin-bottom: calc(var(--px) * -3.04); } /* base 9,0 */
.bcon02__lead-tail { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -2); } /* base 0,0 */
.bcon02__lead-text { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * 1); } /* base 0,0 */
/* /INK:AUTO bcon02 END */

@media (max-width:599px) {
  .bcon02_iner {
    padding: 21.3333vw 4.2667vw 17.0667vw;
  }

  .bcon02__title {
    margin-top: 5.3333vw;
  }

  .bcon02__lead {
    margin-top: 5.3333vw;
  }

  .bcon02__lead-em {
    padding: 0 1.0667vw;
    margin-bottom: 1.6vw;
  }

  .bcon02__intro {
    flex-direction: column;
    gap: 8.5333vw;
    margin-top: 12.8vw;
    padding-left: 0;
  }

  .bcon02__photo {
    width: 91.4667vw;
  }

  .bcon02__subtitle {
    border-left-width: 2px;
    padding-left: 4.2667vw;
  }

  .bcon02__intro-text {
    padding-bottom: 0;
  }

  .bcon02__desc {
    margin-top: 4.2667vw;
  }

  .bcon02__desc-para + .bcon02__desc-para {
    margin-top: 3.2vw;
  }

  .bcon02__variables {
    width: 91.4667vw;
    margin-top: 17.0667vw;
    padding-right: 0;
    padding-bottom: 8.5333vw;
    border-radius: 5.3333vw;
  }

  .bcon02__badge {
    margin-top: -4.2667vw;
    margin-bottom: 4.2667vw;
    padding: 2.1333vw 6.4vw;
    border-radius: 4.2667vw; /* RADIUS: PC 라운드 사각 26px 환산(알약 아님) */
  }

  .bcon02__cards {
    flex-direction: column;
    align-items: center;
    gap: 3.2vw;
  }

  .bcon02__card-img {
    width: 80vw;
  }

  .bcon02__card-body {
    left: 6.4vw;
    bottom: 6.4vw;
  }

  .bcon02__card-no {
    margin-bottom: 0.5333vw;
    padding-left: 1.6vw;
    border-left-width: 2px;
  }

  .bcon02__card-title {
    margin-top: 2.1333vw;
  }

  .bcon02__card-desc {
    margin-top: 1.6vw;
  }
}

/* /merge-build:bcon02 */
/* merge-build:bcon03 */
/* bcon03 — 현장 실측과 시공 개념. 모바일: 카드 4열 → 1열(grid-template-columns 교체), 슬라이드는 중앙 1장 + 부분노출 유지 */
.bcon03 {
  background-color: var(--light-1);
}

.bcon03_iner {
  padding-top: calc(var(--px)*138);
  padding-bottom: calc(var(--px)*98);
}

.bcon03__title {
  margin-top: calc(var(--px)*43);
}

.bcon03__desc {
  margin-top: calc(var(--px)*35);
}

.bcon03__stage {
  align-self: stretch;
  margin-top: calc(var(--px)*58);
}

.bcon03__swiper .bcon03__slide {
  width: auto;
}

.bcon03__arrow {
  top: calc(var(--px)*189);
  width: calc(var(--px)*51);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background-color: var(--tertiary);
  cursor: pointer;
  z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 — 화살표는 .btn_arr 와 같은 층 */
  transition: background-color .3s ease-out;
}

.bcon03__arrow--prev {
  left: calc(var(--px)*531);
}

.bcon03__arrow-icon {
  transition: translate .3s ease-out;
}

.bcon03__arrow--next {
  right: calc(var(--px)*532);
}

.bcon03__variables {
  width: calc(var(--px)*1439);
  margin-top: calc(var(--px)*104);
  padding-bottom: calc(var(--px)*45);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px)*26);
}

.bcon03__badge {
  margin-top: calc(var(--px)*-28);
  margin-bottom: calc(var(--px)*24);
  padding: calc(var(--px)*13) calc(var(--px)*37);
  border: 1px solid var(--primary);
  /* RADIUS: spec rects[20] borderRadius 26 (라운드 사각 라벨) */
  border-radius: calc(var(--px)*26);
  background-color: #c7f208;
}

.bcon03__cards {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: calc(var(--px)*11);
}

.bcon03__card:nth-child(4n+2) {
  margin-right: calc(var(--px)*1);
}

.bcon03__card-body {
  left: calc(var(--px)*42);
  bottom: calc(var(--px)*42);
  padding-bottom: calc(var(--px)*3);
}

.bcon03__card-title::before {
  content: "";
  display: block;
  margin: 0 0 calc(var(--px)*8) calc(var(--px)*3);
  padding-top: calc(var(--px)*12);
  border-left: calc(var(--px)*4) solid var(--primary);
  transition: border-color .3s ease-out;
}

.bcon03__card-desc {
  margin-top: calc(var(--px)*8);
  transition: color .3s ease-out;
}

.bcon03__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--px)*28);
  background-color: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-out;
}

.bcon03__card-title {
  transition: color .3s ease-out;
}

@media (hover: hover) {
  .bcon03__arrow:hover {
    background-color: color-mix(in srgb, var(--tertiary) 65%, var(--primary));
  }

  .bcon03__arrow:hover .bcon03__arrow-icon--prev {
    translate: -12% 0;
  }

  .bcon03__arrow:hover .bcon03__arrow-icon--next {
    translate: 12% 0;
  }

  .bcon03__card:hover::before {
    opacity: .9;
  }

  .bcon03__card:hover .bcon03__card-title {
    color: #000;
  }

  .bcon03__card:hover .bcon03__card-desc {
    color: #111;
  }

  .bcon03__card:hover .bcon03__card-title::before {
    border-left-color: #000;
  }
}

/* IMG:AUTO bcon03 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon03__photo.bcon03__photo--hillside {
    width: calc(var(--px)*689);
    aspect-ratio: 689 / 429;
}

.bcon03__photo {
    width: calc(var(--px)*690);
    aspect-ratio: 690 / 429;
}

.bcon03__arrow-icon.bcon03__arrow-icon--prev {
    width: calc(var(--px)*27);
    aspect-ratio: 27 / 25;
}

.bcon03__arrow-icon.bcon03__arrow-icon--next {
    width: calc(var(--px)*27);
    aspect-ratio: 27 / 24;
}

.bcon03__card-img.bcon03__card-img--narrow {
    width: calc(var(--px)*330);
    aspect-ratio: 330 / 289;
}

.bcon03__card-img {
    width: calc(var(--px)*331);
    aspect-ratio: 331 / 289;
}
/* /IMG:AUTO bcon03 END */

/* FONT:AUTO bcon03 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon03 {
    font-family: var(--font-pretendard);
}

.bcon03__head {
    text-align: center;
}

.bcon03__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.bcon03__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.bcon03__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}

.bcon03__badge {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-align: center;
    color: #000000;
}

.bcon03__card-title {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.37;
    color: #ffffff;
}

.bcon03__card-desc {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.052em; /* OVR */
    line-height: 1.33;
    color: #c9ccc9;
}
/* /FONT:AUTO bcon03 END */

/* INK:AUTO bcon03 */
.bcon03__title { margin-top: calc(var(--px) * 35.55); margin-bottom: calc(var(--px) * -6.44); } /* base 43,0 */
.bcon03__card-title { margin-top: calc(var(--px) * -4.94); margin-bottom: calc(var(--px) * 7.95); } /* base 0,0 */
.bcon03__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.bcon03__card-desc { margin-top: calc(var(--px) * 4.03); margin-bottom: calc(var(--px) * -2.96); } /* base 8,0 */
.bcon03__card-desc.bcon03__card-desc--fence { margin-top: calc(var(--px) * 5.03); margin-bottom: calc(var(--px) * -2.96); } /* base 8,0 */
.bcon03__desc { margin-top: calc(var(--px) * 31); margin-bottom: calc(var(--px) * -1); } /* base 35,0 */
/* /INK:AUTO bcon03 END */

@media (max-width:599px) {
  .bcon03_iner {
    padding-top: 21.3333vw;
    padding-bottom: 14.9333vw;
  }

  .bcon03__head {
    padding-inline: 5.3333vw;
  }

  .bcon03__title {
    margin-top: 5.3333vw;
  }

  .bcon03__desc {
    margin-top: 4.2667vw;
  }

  .bcon03__stage {
    margin-top: 8.5333vw;
  }

  .bcon03__photo,
  .bcon03__photo.bcon03__photo--hillside {
    width: 78vw;
  }

  .bcon03__arrow {
    top: 18.91vw;
    width: 10.6667vw;
  }

  .bcon03__arrow--prev {
    left: 1.5vw;
  }

  .bcon03__arrow--next {
    right: 1.5vw;
  }

  .bcon03__arrow-icon.bcon03__arrow-icon--prev,
  .bcon03__arrow-icon.bcon03__arrow-icon--next {
    width: 5.3333vw;
  }

  .bcon03__variables {
    width: 92vw;
    margin-top: 10.6667vw;
    padding-inline: 4vw;
    padding-bottom: 6.4vw;
    border-radius: 4.2667vw;
  }

  .bcon03__badge {
    margin-top: -4.8vw;
    margin-bottom: 4.2667vw;
    padding: 2.1333vw 6.4vw;
    border-radius: 50vw;
  }

  .bcon03__cards {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 2.1333vw;
  }

  .bcon03__card:nth-child(4n+2) {
    margin-right: 0;
  }

  .bcon03__card::before {
    border-radius: 7.1vw;
  }

  .bcon03__card-img,
  .bcon03__card-img.bcon03__card-img--narrow {
    width: 100%;
  }

  .bcon03__card-body {
    left: 6.4vw;
    bottom: 6.4vw;
    padding-bottom: 0.5333vw;
  }

  .bcon03__card-title::before {
    margin: 0 0 1.6vw 0.5333vw;
    padding-top: 3.2vw;
    border-left: 3px solid var(--primary);
  }

  .bcon03__card-desc,
  .bcon03__card-desc.bcon03__card-desc--fence {
    margin-top: 1.0667vw;
  }
}

/* /merge-build:bcon03 */
/* merge-build:bcon04 */
/* bcon04 — 경사 구간 대관 수평 시공 개념 (PC) */
.bcon04 {
  background-color: var(--light-1);
}

.bcon04_iner {
  padding-top: calc(var(--px)*27);
  padding-bottom: calc(var(--px)*85);
}

.bcon04_box {
  width: calc(var(--px)*1439);
  padding-top: calc(var(--px)*106);
  padding-bottom: calc(var(--px)*68);
  border-radius: calc(var(--px)*26);
  background-color: var(--bg-color);
}

.bcon04__lead {
  margin-top: calc(var(--px)*23);
}

.bcon04__head {
  padding-bottom: calc(var(--px)*4);
}

.bcon04__stage {
  margin-top: calc(var(--px)*154);
}

.bcon04__callout {
  top: calc(var(--px)*-99);
  left: calc(var(--px)*-33);
}

.bcon04__callout-text {
  top: 0;
  right: 0;
  bottom: calc(var(--px)*21);
  left: 0;
}

.bcon04__callout-desc {
  margin-top: calc(var(--px)*13);
}

.bcon04__detail {
  top: calc(var(--px)*-109);
  right: calc(var(--px)*-52);
}

.bcon04__steps {
  gap: calc(var(--px)*6.5);
  margin-top: calc(var(--px)*68);
}

.bcon04__step {
  width: calc(var(--px)*410);
  padding: calc(var(--px)*49) 0 calc(var(--px)*50) calc(var(--px)*56);
  border: 1px solid #c9ccc9;
  border-radius: calc(var(--px)*23);
  background-color: var(--bg-color);
  transition: background-color .4s ease-out, color .4s ease-out;
}

.bcon04__step--dark {
  background-color: var(--tertiary);
}

.bcon04__step-no {
  gap: calc(var(--px)*7);
  padding-left: calc(var(--px)*3);
}

.bcon04__step-no::before {
  content: "";
  padding: calc(var(--px)*6) calc(var(--px)*2);
  background-color: var(--primary);
}

.bcon04__step-no > p {
  transition: color .4s ease-out;
}

.bcon04__step-title,
.bcon04__step-title--dark {
  margin-top: calc(var(--px)*25);
  transition: color .4s ease-out;
}

.bcon04__step-desc,
.bcon04__step-desc--dark,
.bcon04__step-desc--03 {
  margin-top: calc(var(--px)*18);
  transition: color .4s ease-out;
}

.bcon04__step-arrow {
  top: calc(var(--px)*90);
  right: calc(var(--px)*-20);
  padding: calc(var(--px)*7) calc(var(--px)*6.5);
  border: 1px solid #c9ccc9;
  border-radius: 50%;
  background-color: var(--bg-color);
  z-index: 1; /* 다음 카드가 relative 라 DOM 순서로는 원이 가려짐 — 같은 루트 컨텍스트 안에서 1 로 올림 */
}

/* 단계 카드 자동 순환 — JS 가 .is-ani 부여 후 .is-on 을 01→02→03 으로 이동, 색 전환은 CSS transition 소유 */
.bcon04.is-ani .bcon04__step.is-on {
  background-color: var(--tertiary);
  color: #ffffff;
}

.bcon04.is-ani .bcon04__step--dark:not(.is-on) {
  background-color: var(--bg-color);
  color: #111111;
}

.bcon04.is-ani .bcon04__step--dark .bcon04__step-num--dark,
.bcon04.is-ani .bcon04__step--dark .bcon04__step-title--dark,
.bcon04.is-ani .bcon04__step.is-on .bcon04__step-num,
.bcon04.is-ani .bcon04__step.is-on .bcon04__step-title,
.bcon04.is-ani .bcon04__step.is-on .bcon04__step-desc,
.bcon04.is-ani .bcon04__step.is-on .bcon04__step-desc--03 {
  color: #ffffff;
}

.bcon04.is-ani .bcon04__step--dark .bcon04__step-desc--dark {
  color: #ffffff;
}

.bcon04.is-ani .bcon04__step--dark:not(.is-on) .bcon04__step-num--dark,
.bcon04.is-ani .bcon04__step--dark:not(.is-on) .bcon04__step-title--dark {
  color: #111111;
}

.bcon04.is-ani .bcon04__step--dark:not(.is-on) .bcon04__step-desc--dark {
  color: #777777;
}

@media (prefers-reduced-motion: reduce) {
  .bcon04__step,
  .bcon04__step-no > p,
  .bcon04__step-title,
  .bcon04__step-title--dark,
  .bcon04__step-desc,
  .bcon04__step-desc--dark,
  .bcon04__step-desc--03 {
    transition: none;
  }
}

/* IMG:AUTO bcon04 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon04__diagram {
    width: calc(var(--px)*1161);
    aspect-ratio: 1161 / 287;
}

.bcon04__callout-media {
    width: calc(var(--px)*407);
    aspect-ratio: 407 / 133;
}

.bcon04__detail {
    width: calc(var(--px)*356);
    aspect-ratio: 356 / 183;
}

.bcon04__step-arrow-icon {
    width: calc(var(--px)*17);
    aspect-ratio: 17 / 16;
}
/* /IMG:AUTO bcon04 END */

/* FONT:AUTO bcon04 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon04 {
    font-family: var(--font-pretendard);
}

.bcon04__head {
    text-align: center;
}

.bcon04__title {
    font-size: var(--titleS);
    font-weight: 700;
    letter-spacing: -0.069em; /* OVR */
    line-height: 1.42;
    color: #111111;
}

.bcon04__lead {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}

.bcon04__callout-text {
    text-align: center;
    color: #111111;
}

.bcon04__callout-title {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.068em; /* OVR */
    line-height: 1.73;
}

.bcon04__callout-desc {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.049em; /* OVR */
    line-height: 1.33;
}

.bcon04__step.bcon04__step--dark {
    color: #ffffff;
}

.bcon04__step-num--dark {
    font-size: var(--bodyXS);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2; /* OVR */
}

.bcon04__step-title--dark {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: 0.0006em; /* OVR */
    line-height: 1.49;
}

.bcon04__step-desc--dark {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.051em; /* OVR */
    line-height: 1.38;
}

.bcon04__step-num {
    font-size: var(--bodyXS);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2; /* OVR */
    color: #111111;
}

.bcon04__step-title {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.001em; /* OVR */
    line-height: 1.49;
    color: #111111;
}

.bcon04__step-desc,
.bcon04__step-desc--03 {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.051em; /* OVR */
    line-height: 1.38;
    color: #777777;
}
/* /FONT:AUTO bcon04 END */

/* INK:AUTO bcon04 */
.bcon04__title { margin-top: calc(var(--px) * -10.4); margin-bottom: calc(var(--px) * -10.4); } /* base 0,0 */
.bcon04__callout-title { margin-top: calc(var(--px) * -8.3); margin-bottom: calc(var(--px) * -8.29); } /* base 0,0 */
.bcon04__step-title--dark { margin-top: calc(var(--px) * 18.86); margin-bottom: calc(var(--px) * -6.14); } /* base 25,0 */
.bcon04__step-title { margin-top: calc(var(--px) * 18.86); margin-bottom: calc(var(--px) * -6.14); } /* base 25,0 */
.bcon04__lead { margin-top: calc(var(--px) * 19); margin-bottom: calc(var(--px) * -4); } /* base 23,0 */
.bcon04__step-desc--dark { margin-top: calc(var(--px) * 13.62); margin-bottom: calc(var(--px) * -3.38); } /* base 18,0 */
.bcon04__step-desc { margin-top: calc(var(--px) * 13.62); margin-bottom: calc(var(--px) * -3.38); } /* base 18,0 */
.bcon04__callout-desc { margin-top: calc(var(--px) * 9.03); margin-bottom: calc(var(--px) * -2.96); } /* base 13,0 */
.bcon04__step-desc--03 { margin-top: calc(var(--px) * 14.62); margin-bottom: calc(var(--px) * -3.38); } /* base 18,0 */
.bcon04__step-num--dark { margin-top: calc(var(--px) * -3.4); margin-bottom: calc(var(--px) * -2.4); } /* base 0,0 */
.bcon04__step-num { margin-top: calc(var(--px) * -3.4); margin-bottom: calc(var(--px) * -2.4); } /* base 0,0 */
/* /INK:AUTO bcon04 END */

@media (max-width:599px) {
  .bcon04_iner {
    padding: 4.2667vw 3.2vw 12.8vw;
  }

  .bcon04_box {
    width: auto;
    padding: 12.8vw 3.2vw 10.6667vw;
    border-radius: 4.2667vw;
  }

  .bcon04__head {
    padding-bottom: 0.5333vw;
  }

  .bcon04__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2vw;
    margin-top: 8.5333vw;
  }

  .bcon04__diagram {
    width: 87.2vw;
  }

  .bcon04__callout {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
  }

  .bcon04__callout-media {
    width: 87.2vw;
  }

  .bcon04__callout-text {
    bottom: 3.2vw;
  }

  .bcon04__detail {
    position: relative;
    top: auto;
    right: auto;
    width: 80vw;
  }

  .bcon04__steps {
    flex-direction: column;
    align-self: stretch;
    gap: 3.2vw;
    margin-top: 6.4vw;
  }

  .bcon04__step {
    width: auto;
    padding: 8.5333vw 6.4vw;
    border-radius: 4.2667vw;
  }

  .bcon04__step-no {
    gap: 1.0667vw;
    padding-left: 0.5333vw;
  }

  .bcon04__step-no::before {
    padding: 1.6vw 0.5333vw;
  }

  .bcon04__step-arrow {
    top: auto;
    right: 50%;
    bottom: -6.5vw;
    padding: 2.1333vw;
    transform: translateX(50%);
  }

  .bcon04__step-arrow-icon {
    width: 5.3333vw;
    transform: rotate(90deg);
  }
}

/* /merge-build:bcon04 */
/* merge-build:bcon05 */
/* bcon05 — 밀폐 관로 vs 개방 구간 비교. 모바일: 2열 비교 → 1열 세로 스택, 목록 좌측 패딩 축소 */
.bcon05 {
  background-color: var(--bg-color);
}

.bcon05_iner {
  padding-top: calc(var(--px)*137);
  padding-bottom: calc(var(--px)*156);
}

.bcon05__title {
  margin-top: calc(var(--px)*44);
}

.bcon05__lead {
  margin-top: calc(var(--px)*30);
  padding: calc(var(--px)*2) calc(var(--px)*12);
  background-color: #f2ffb8;
}

.bcon05__desc {
  margin-top: calc(var(--px)*18);
}

.bcon05__compare {
  gap: calc(var(--px)*39);
  margin-top: calc(var(--px)*100);
}

.bcon05__pill {
  top: calc(var(--px)*-25);
  width: calc(var(--px)*180); /* TEXT-WIDTH: 시안 두 pill 이 동일 고정 폭 프레임(absol 배지) */
  padding: calc(var(--px)*12.5) 0;
  border: 1px solid var(--primary);
  border-radius: 50vw;
  background-color: #c7f208;
}

.bcon05__pill--open {
  border-color: #656565;
  background-color: #656565;
}

.bcon05__list {
  width: calc(var(--px)*700);
  margin-top: calc(var(--px)*36);
}

.bcon05__item {
  gap: calc(var(--px)*15);
  padding: calc(var(--px)*19.5) 0 calc(var(--px)*19.5) calc(var(--px)*207);
  border-bottom: 1px solid #c9ccc9;
}

/* IMG:AUTO bcon05 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon05__media {
    width: calc(var(--px)*702);
    aspect-ratio: 702 / 433;
}

.bcon05__check {
    width: calc(var(--px)*20);
    aspect-ratio: 20 / 20;
}
/* /IMG:AUTO bcon05 END */

/* INK:AUTO bcon05 */
.bcon05__title { margin-top: calc(var(--px) * 36.55); margin-bottom: calc(var(--px) * -6.44); } /* base 44,0 */
.bcon05__desc { margin-top: calc(var(--px) * 14); margin-bottom: calc(var(--px) * -4); } /* base 18,0 */
.bcon05__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
/* /INK:AUTO bcon05 END */

/* FONT:AUTO bcon05 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.bcon05 {
    font-family: var(--font-pretendard);
}

.bcon05__head {
    text-align: center;
}

.bcon05__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.bcon05__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.bcon05__lead {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.17;
    color: #222222;
}

.bcon05__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3; /* OVR */
    color: #222222;
}

.bcon05__compare {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.bcon05__pill {
    line-height: 1.2;
    text-align: center;
    color: #000000;
}

.bcon05__list {
    line-height: 1.66;
    color: #222222;
}

.bcon05__pill.bcon05__pill--open {
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO bcon05 END */

@media (max-width: 599px) {
  .bcon05_iner {
    padding: 21.3333vw 5.3333vw;
  }

  .bcon05__title {
    margin-top: 3.2vw;
    margin-bottom: 0;
  }

  .bcon05__eyebrow {
    margin-top: 0;
    margin-bottom: 0;
  }

  .bcon05__lead {
    margin-top: 4.2667vw;
    padding: 1.0667vw 3.2vw;
  }

  .bcon05__desc {
    margin-top: 3.2vw;
    margin-bottom: 0;
  }

  .bcon05__compare {
    flex-direction: column;
    gap: 8.5333vw;
    margin-top: 14.9333vw;
  }

  .bcon05__col {
    width: 100%;
  }

  .bcon05__media {
    width: 100%;
  }

  .bcon05__pill {
    top: -4.2667vw;
    width: 40vw; /* TEXT-WIDTH: 시안 두 pill 이 동일 고정 폭 프레임(absol 배지) */
    padding: 2.1333vw 0;
  }

  .bcon05__list {
    width: 100%;
    margin-top: 5.3333vw;
  }

  .bcon05__item {
    gap: 2.1333vw;
    padding: 4.2667vw 0;
    justify-content: center;
  }

  .bcon05__check {
    width: 4.2667vw;
  }
}

/* /merge-build:bcon05 */
/* merge-build:sub-hero */
/* sub-hero — 서브페이지 공통 상단 */
.sub-hero {
  background-color: #fff;
  border-bottom: 1px solid #f2f6f3;
}

.sub-hero_iner {
  width: calc(var(--px) * 1440);
  padding-top: calc(var(--px) * 208);
  padding-bottom: calc(var(--px) * 121);
}

.sub-hero__title {
  margin-top: calc(var(--px) * 32);
}

.sub-hero__desc {
  margin-top: calc(var(--px) * 26);
}

.sub-hero__breadcrumb {
  padding-bottom: calc(var(--px) * 1);
}

.sub-hero__trail {
  gap: calc(var(--px) * 19);
}

.sub-hero__home {
  display: block;
  transition: opacity .25s ease-out;
}

@media (hover: hover) {
  .sub-hero__home:hover {
    opacity: .7;
  }
}

.sub-hero__crumb--sep {
  position: relative;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 15);
}

.sub-hero__chevron::before {
  content: "";
  position: absolute;
  top: calc(var(--px) * 2.2);
  left: calc(var(--px) * -5.3);
  width: calc(var(--px) * 10.6);
  height: calc(var(--px) * 10.6);
  border-top: 1px solid #c9ccc9;
  border-right: 1px solid #c9ccc9;
  transform: rotate(45deg);
}

/* IMG:AUTO sub-hero */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.sub-hero__home {
    width: calc(var(--px)*24);
    aspect-ratio: 24 / 22;
}
/* /IMG:AUTO sub-hero END */

/* FONT:AUTO sub-hero */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.sub-hero {
    font-family: var(--font-pretendard);
}

.sub-hero__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR */
    color: var(--primary);
}

.sub-hero__title {
    font-size: var(--displayS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR psd:1 */
    color: #111111;
}

.sub-hero__desc {
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR psd:1.33 */
    color: #111111;
}

.sub-hero__crumb.sub-hero__crumb--current {
    font-size: var(--bodyM);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.3;  /* OVR psd:1.65 */
    color: #c9ccc9;
}
/* /FONT:AUTO sub-hero END */

/* INK:AUTO sub-hero */
.sub-hero__title { margin-top: calc(var(--px) * 21.84); margin-bottom: calc(var(--px) * -10.15); } /* base 32,0 */
.sub-hero__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.sub-hero__crumb.sub-hero__crumb--current { margin-top: calc(var(--px) * -3.05); margin-bottom: calc(var(--px) * -3.04); } /* base 0,0 */
.sub-hero__desc { margin-top: calc(var(--px) * 22.9); margin-bottom: calc(var(--px) * -1.09); } /* base 26,0 */
/* /INK:AUTO sub-hero END */

@media (max-width:599px) {
  .sub-hero_iner {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-inline: 5.3333vw;
    padding-top: calc(var(--hd-h) + 10.6667vw);
    padding-bottom: 10.6667vw;
  }

  .sub-hero__title {
    font-size: var(--titleXL);
    margin-top: 3.2vw;
  }

  .sub-hero__desc {
    margin-top: 3.2vw;
  }

  .sub-hero__breadcrumb {
    margin-top: 6.4vw;
    padding-bottom: 0;
  }

  .sub-hero__trail {
    gap: 3.2vw;
  }

  .sub-hero__home {
    width: 5.3333vw;
  }

  .sub-hero__crumb--sep {
    width: 1.6vw;
    height: auto;
  }

  .sub-hero__chevron::before {
    top: -1.0667vw;
    left: -1.0667vw;
    width: 2.1333vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* /merge-build:sub-hero */
/* merge-build:tab-nav */
/* tab-nav — 서브페이지 공통 탭 내비 (PC 전용) */
/* 탭바는 헤더 아래 --tn-gap 만큼 띄워 고정 · 헤더가 숨으면(.insert) 화면 위로 따라 올라간다 */
.tab-nav {
  --tn-gap: calc(var(--px) * 20);
  --tn-pad-top: calc(var(--px) * 41);
  position: sticky;
  top: calc(var(--hd-h) + var(--tn-gap) - var(--tn-pad-top));
  overflow: visible; /* 전역 section{overflow:hidden} 이 about 띠(아래 여백 0)에서 바 그림자 아래를 자름 */
  z-index: 100; /* 뒤 섹션이 position:relative 라 DOM 순서로 탭바를 덮음 — 헤더(9999)보다는 아래 */
  background-color: var(--light-1);
  transition: top 0.3s, background-color 0.2s;
}

body:has(.header.insert) .tab-nav {
  top: calc(var(--tn-gap) - var(--tn-pad-top));
}

/* 고정 중엔 회색 띠를 걷어 바만 띄운다 — 투명해진 띠가 아래 콘텐츠 클릭을 막지 않게 */
.tab-nav.is-stuck {
  background-color: transparent;
  pointer-events: none;
}

.tab-nav_iner {
  padding-top: var(--tn-pad-top);
  padding-bottom: calc(var(--px) * 40);
}

/* about — 띠는 투명, acon01 면이 탭바 높이(88)만큼 뒤로 올라와 배경을 소유한다 */
.tab-nav[data-page="about"] {
  --tn-pad-top: calc(var(--px) * 19);
  margin-bottom: calc(var(--px) * -88);
  background-color: transparent;
}

.tab-nav[data-page="about"] .tab-nav_iner {
  padding-bottom: 0;
}

.tab-nav__bar {
  width: calc(var(--px) * 1563);
  background-color: #fff;
  border-radius: calc(var(--px) * 15);
  box-shadow: 0 0 calc(var(--px) * 12) rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.tab-nav.is-stuck .tab-nav__bar {
  pointer-events: auto;
  box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 20) rgba(0, 0, 0, 0.1);
}

.tab-nav__list {
  gap: calc(var(--px) * 90);
}

.tab-nav__tab {
  padding-block: calc(var(--px) * 20);
  border-bottom: calc(var(--px) * 3) solid transparent;
  transition: color .25s ease-out, border-bottom-color .3s ease-out;
}

.tab-nav__tab.is-active {
  border-bottom-color: var(--primary);
}

@media (hover: hover) {
  .tab-nav__tab:hover {
    border-bottom-color: color-mix(in srgb, var(--primary) 35%, transparent);
  }
  .tab-nav__tab.is-active:hover {
    border-bottom-color: var(--primary);
  }
}

.tab-nav__tab:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.tab-nav__tab.is-active:focus-visible {
  border-bottom-color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .tab-nav__tab { transition: none; }
}

/* FONT:AUTO tab-nav */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.tab-nav {
    font-family: var(--font-pretendard);
    font-size: var(--bodyS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.57;
    text-align: center;
    color: #111112;
}
/* /FONT:AUTO tab-nav END */

@media (max-width:599px) {
  .tab-nav { --tn-gap: 2.1333vw; --tn-pad-top: 6.4vw; }
  .tab-nav[data-page="about"] { --tn-pad-top: 3.2vw; }
  .tab-nav_iner { padding: var(--tn-pad-top) 4.2667vw 6.4vw; }
  .tab-nav__bar { width: 100%; border-radius: 3.2vw; box-shadow: 0 0 2.1333vw rgba(0, 0, 0, 0.05); }
  .tab-nav__list { gap: 1.0667vw; }
  .tab-nav__item { flex: 1; justify-content: center; }
  .tab-nav__tab { padding-block: 3.2vw; border-bottom-width: 2px; }
}

/* /merge-build:tab-nav */