@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:acon01 */
/* acon01 — 태주산업 소개 + CEO 인사말 (PC 전용) */
.acon01 {
  background-color: #fff;
  padding-bottom: calc(var(--px)*16);
}

.acon01__vision {
  background-color: #f2f6f3;
}

/* 탭바 뒤까지 올라온 면 — 상단 88 은 탭바 자리 */
.acon01__stage {
  align-self: stretch;
  padding-top: calc(var(--px)*274);
  padding-bottom: calc(var(--px)*226);
  overflow: hidden;
}

.acon01__orbit {
  top: calc(var(--px)*62);
  bottom: calc(var(--px)*16);
  width: calc(var(--px)*995);
  padding: calc(var(--px)*76.5);
  border: 1px solid #c9ccc9;
  border-radius: 50%;
  background-color: rgb(242 250 243 / 0.61);
}

.acon01__orbit-inner {
  flex: 1 1 auto;
  border: 1px solid #c9ccc9;
  border-radius: 50%;
  background-color: rgb(242 250 243 / 0.61);
  animation-duration: 24s;
  will-change: transform;
}

/* 점 21×21 = 패딩이 만든 박스 */
.acon01__orbit-dot {
  width: 0;
  padding: calc(var(--px)*10.5);
  border-radius: 50%;
  background-color: var(--primary);
}

.acon01__orbit-dot--upper {
  top: calc(var(--px)*131);
  right: calc(var(--px)*93);
}

.acon01__orbit-dot--lower {
  left: calc(var(--px)*36);
  bottom: calc(var(--px)*77);
}

.acon01__word--biosecurity {
  top: calc(var(--px)*322);
  left: calc(var(--px)*301);
}

.acon01__word--engineering {
  top: calc(var(--px)*486);
  right: calc(var(--px)*264);
}

/* 글자 면에만 점무늬(2×2 · 주기 6) — 자산 실루엣을 마스크로 쓴다 */
.acon01__word::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at calc(var(--px)*2) calc(var(--px)*5), color-mix(in srgb, var(--primary) 68%, #000) calc(var(--px)*1.2), transparent calc(var(--px)*1.3));
  background-size: calc(var(--px)*6) calc(var(--px)*6);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

.acon01__word--biosecurity::after {
  mask-image: url(/images/acon01_02.png);
  -webkit-mask-image: url(/images/acon01_02.png);
}

.acon01__word--engineering::after {
  mask-image: url(/images/acon01_03.png);
  -webkit-mask-image: url(/images/acon01_03.png);
}

.acon01__row {
  align-self: stretch;
  padding-left: calc(var(--px)*172);
  padding-right: calc(var(--px)*175);
}

.acon01__cards {
  flex: 1 1 0;
  gap: calc(var(--px)*103);
  padding-top: calc(var(--px)*89);
}

.acon01__card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px)*16);
  width: calc(var(--px)*341);
  padding: calc(var(--px)*33) 0 calc(var(--px)*34) calc(var(--px)*55);
  border: 1px solid #c9ccc9;
  border-radius: calc(var(--px)*11);
  background-color: rgb(242 246 243 / 0.88);
}

/* 라임 바 7×26 = 패딩이 만든 박스, 원을 향한 변에서 4 삐져나온다 */
.acon01__card--quality {
  padding-bottom: calc(var(--px)*33);
}

.acon01__card-bar {
  top: calc(50% - var(--px)*13);
  width: 0;
  padding: calc(var(--px)*13) calc(var(--px)*3.5);
  background-color: var(--primary);
}

.acon01__cards--left .acon01__card-bar {
  right: calc(var(--px)*-4);
}

.acon01__cards--right .acon01__card-bar {
  left: calc(var(--px)*-4);
}

.acon01__circle {
  flex: none;
}

.acon01__circle-body {
  padding-top: calc(var(--px)*171);
  gap: calc(var(--px)*34);
}

.acon01__ceo {
  padding-top: calc(var(--px)*58);
  padding-bottom: calc(var(--px)*226);
  background-color: #f2f6f3;
}

.acon01__ceo-inner {
  padding-inline: calc(var(--px)*233);
}

.acon01__greeting {
  padding-top: calc(var(--px)*46);
}

.acon01__quote {
  margin-top: calc(var(--px)*49);
  padding-left: calc(var(--px)*38);
}

.acon01__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--px)*3);
  bottom: calc(var(--px)*3);
  padding-inline: calc(var(--px)*2);
  background-color: var(--primary);
}

.acon01__greeting-body {
  margin-top: calc(var(--px)*40);
  gap: calc(var(--px)*31);
}

.acon01__greeting-text--closing {
  margin-top: calc(var(--px)*6);
}

.acon01__visual {
  padding-left: calc(var(--px)*162);
}

.acon01__sign {
  margin-top: calc(var(--px)*29);
  margin-left: calc(var(--px)*131);
  gap: calc(var(--px)*21);
}

.acon01__portrait {
  left: 0;
  bottom: calc(var(--px)*-3);
}

.acon01__notch {
  bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .acon01__orbit-inner {
    animation: none;
  }
}

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

.acon01__word.acon01__word--engineering {
    width: calc(var(--px)*1095);
    aspect-ratio: 1095 / 132;
}

.acon01__circle-art {
    width: calc(var(--px)*574);
    aspect-ratio: 574 / 574;
}

.acon01__circle-logo {
    width: calc(var(--px)*65);
    aspect-ratio: 65 / 75;
}

.acon01__photo {
    width: calc(var(--px)*559);
    aspect-ratio: 559 / 491;
}

.acon01__sign-img {
    width: calc(var(--px)*94);
    aspect-ratio: 94 / 48;
}

.acon01__portrait {
    width: calc(var(--px)*252);
    aspect-ratio: 252 / 271;
}

.acon01__notch {
    width: calc(var(--px)*203);
    aspect-ratio: 203 / 70;
}
/* /IMG:AUTO acon01 END */

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

.acon01__card-title,
.acon01__card-title.acon01__card-title--tail {
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.27;
    color: #111111;
}

.acon01__card-desc {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.38;
    color: #777777;
}

.acon01__circle-title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    text-align: center;
    color: #ffffff;
}

.acon01__circle-accent {
    color: var(--primary);
}

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

.acon01__quote {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.43;
    color: #111111;
}

.acon01__greeting-body {
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.51;
    color: #222222;
}

.acon01__sign-label {
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.48;
    color: #222222;
}
/* /FONT:AUTO acon01 END */

/* INK:AUTO acon01 */
.acon01__greeting-title { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -7.44); } /* base 0,0 */
.acon01__circle-title { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -6.43); } /* base 0,0 */
.acon01__card-title { margin-top: calc(var(--px) * -7.01); margin-bottom: calc(var(--px) * -6.01); } /* base 0,0 */
.acon01__circle-accent { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -5.55); } /* base 0,0 */
.acon01__card-title.acon01__card-title--tail { margin-top: calc(var(--px) * -7.01); margin-bottom: calc(var(--px) * -5.01); } /* base 0,0 */
.acon01__sign-label { margin-top: calc(var(--px) * -5.8); margin-bottom: calc(var(--px) * -5.79); } /* base 0,0 */
.acon01__quote { margin-top: calc(var(--px) * 43.34); margin-bottom: calc(var(--px) * -5.64); } /* base 49,0 */
.acon01__greeting-text.acon01__greeting-text--closing { margin-top: calc(var(--px) * 0.91); margin-bottom: calc(var(--px) * -5.08); } /* base 6,0 */
.acon01__greeting-text { margin-top: calc(var(--px) * -5.09); margin-bottom: calc(var(--px) * -5.07); } /* base 0,0 */
.acon01__card-desc { margin-top: calc(var(--px) * -3.92); margin-bottom: calc(var(--px) * -3.9); } /* base 0,0 */
/* /INK:AUTO acon01 END */

@media (max-width:599px) {
  .acon01 {
    padding-bottom: 2.1333vw;
  }

  .acon01__stage {
    padding-top: 12vw;
    padding-bottom: 10.6667vw;
  }

  .acon01__orbit {
    top: 0;
    bottom: auto;
    width: 96vw;
    height: 96vw; /* HEIGHT: 정원 장식 absol 링 — 자식 흐름 없는 순수 원, 폭과 같은 값 필요(유저 승인 설계) */
    padding: 6.4vw;
  }

  .acon01__orbit-dot {
    padding: 1.6vw;
  }

  .acon01__orbit-dot--upper {
    top: 10.6667vw;
    right: 10.6667vw;
  }

  .acon01__orbit-dot--lower {
    left: 10.6667vw;
    bottom: 10.6667vw;
  }

  .acon01__word.acon01__word--biosecurity,
  .acon01__word.acon01__word--engineering {
    width: 96vw;
  }

  .acon01__word--biosecurity {
    top: 28vw;
    left: 0;
  }

  .acon01__word--engineering {
    top: 49.3333vw;
    right: 0;
  }

  .acon01__word::after {
    background-image: radial-gradient(circle at 0.3556vw 0.8889vw, color-mix(in srgb, var(--primary) 68%, #000) 0.2133vw, transparent 0.24vw);
    background-size: 1.0667vw 1.0667vw;
  }

  .acon01__row {
    flex-direction: column;
    align-items: center;
    gap: 4.2667vw;
    padding-inline: 4.2667vw;
  }

  .acon01__circle {
    order: -1;
    margin-bottom: 8.5333vw;
  }

  .acon01__circle-art {
    width: 72vw;
  }

  .acon01__circle-body {
    padding-top: 21.3333vw;
    gap: 4.2667vw;
  }

  .acon01__circle-logo {
    width: 8vw;
  }

  /* 원 폭(72vw) 안에 두 줄이 들어가야 해 titleM 대신 headL */
  .acon01__circle-title {
    font-size: var(--headL);
  }

  .acon01__cards {
    align-self: stretch;
    align-items: stretch;
    flex: none;
    gap: 4.2667vw;
    padding-top: 0;
  }

  .acon01__card,
  .acon01__card--quality {
    width: auto;
    gap: 2.1333vw;
    padding: 5.3333vw;
    border-radius: 3.2vw;
  }

  .acon01__card-bar {
    top: calc(50% - 2.1333vw);
    padding: 2.1333vw 0.5333vw;
  }

  .acon01__cards--left .acon01__card-bar {
    right: auto;
    left: -1.0667vw;
  }

  .acon01__cards--right .acon01__card-bar {
    left: -1.0667vw;
  }

  .acon01__ceo {
    padding-top: 10.6667vw;
    padding-bottom: 21.3333vw;
  }

  .acon01__ceo-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8.5333vw;
    padding-inline: 4.2667vw;
  }

  .acon01__greeting {
    padding-top: 0;
  }

  .acon01__quote {
    margin-top: 6.4vw;
    padding-left: 5.3333vw;
  }

  .acon01__quote::before {
    top: 0.5333vw;
    bottom: 0.5333vw;
    padding-inline: 0.5333vw;
  }

  .acon01__greeting-body {
    margin-top: 6.4vw;
    gap: 4.2667vw;
  }

  .acon01__greeting-text--closing {
    margin-top: 1.0667vw;
  }

  .acon01__visual {
    align-self: stretch;
    padding-left: 20vw;
  }

  .acon01__photo {
    width: 71.4667vw;
  }

  .acon01__portrait {
    width: 32vw;
    bottom: -0.5333vw;
  }

  .acon01__sign {
    margin-top: 4.2667vw;
    margin-left: 14.9333vw;
    gap: 2.1333vw;
  }

  .acon01__sign-img {
    width: 12vw;
  }

  .acon01__notch {
    width: 21.3333vw;
  }
}

/* /merge-build:acon01 */
/* merge-build:acon02 */
/* acon02 — 연혁 타임라인. 모바일: body 를 column 으로 접어 사진 → 타임라인 순으로 쌓는다 */
.acon02 {
  background-color: #fff;
}

.acon02_iner {
  padding-top: calc(var(--px)*94);
  padding-bottom: calc(var(--px)*94);
}

.acon02__title {
  margin-top: calc(var(--px)*41);
}

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

.acon02__body {
  margin-top: calc(var(--px)*78);
  padding-left: calc(var(--px)*171);
  clip-path: inset(0 -50vw calc(var(--px)*-54) -50vw); /* 연혁 트랙은 하단 여백 침범 최소화 · 바닥까지 내려온 점(반경 54)은 안 잘리게 */
}

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

.acon02__photo-year {
  left: calc(var(--px)*79);
  bottom: calc(var(--px)*63);
}

/* 사진 아래 다음 장 자리 — 섹션 바닥에 붙어 잘리는 카드(스냅 4px) */
.acon02__next-card {
  min-height: calc(var(--px)*292);
  border-radius: calc(var(--px)*23) calc(var(--px)*23) 0 0;
  background-color: #17253a;
  opacity: 0.0902;
}

.acon02__line {
  top: calc(var(--px)*1);
  bottom: 0;
  left: calc(var(--px)*951);
  width: calc(var(--px)*1);
  background: linear-gradient(#111 0, #111 calc(var(--px)*111), #efefed calc(var(--px)*111));
}

.acon02__dot {
  top: calc(var(--px)*84);
  left: calc(var(--px)*924.5); /* 1px 선 중심(951.5)에 54px 점 중심 정렬 */
  border: calc(var(--px)*27) solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--primary) 0, var(--primary) calc(var(--px)*8), color-mix(in srgb, var(--primary) 16%, transparent) calc(var(--px)*8));
  background-origin: border-box;
}

/* 목록이 섹션 밖으로 이어지는 연혁 — 높이는 좌측 카드열이 만들고 나머지는 섹션 overflow 로 잘린다 */
.acon02__timeline {
  top: calc(var(--px)*83);
  left: calc(var(--px)*1018);
  gap: calc(var(--px)*90);
}

.acon02__item {
  gap: calc(var(--px)*22);
}

.acon02__year {
  flex: 0 0 calc(var(--px)*144);
  transition: color .4s ease-out;
}

.acon02__dash {
  flex: none;
  width: calc(var(--px)*41);
  height: 4px;
  margin-top: calc(var(--px)*45);
  background-color: var(--primary);
}

.acon02__list {
  margin-top: calc(var(--px)*29);
  transition: color .4s ease-out;
}

.acon02.is-ani .acon02__item:not(.is-active) .acon02__year,
.acon02.is-ani .acon02__item:not(.is-active) .acon02__list {
  color: inherit;
}

.acon02__item.is-active .acon02__year {
  color: #111111;
}

.acon02__item.is-active .acon02__list {
  color: #424242;
}

.acon02__photo-img {
  overflow: hidden;
  border-radius: calc(var(--px)*23);
}

/* 모션 스코프 — .is-ani 는 JS 가 붙이므로 JS-off 정지 상태는 불변 */
.acon02.is-ani .acon02__line::after {
  content: "";
  position: absolute;
  top: calc(var(--px)*111); /* 정지 상태의 진한 구간(0~111) 아래부터 채움 */
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--primary);
  transform: scaleY(var(--line-p, 0));
  transform-origin: top;
}

.acon02.is-ani .acon02__dot::after {
  content: "";
  position: absolute;
  inset: calc(var(--px)*-27);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 35%, transparent);
  animation: v-scale-opa 2s infinite;
}

.acon02.is-ani .acon02__dash {
  transform-origin: left;
  transition: transform .4s ease-out;
}

.acon02.is-ani .acon02__list {
  transition: color .4s ease-out, transform .4s ease-out;
}

.acon02.is-ani .acon02__item:not(.is-active) .acon02__dash {
  transform: scaleX(0);
}

.acon02.is-ani .acon02__item:not(.is-active) .acon02__list {
  transform: translateX(calc(var(--px)*-20));
}

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

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

.acon02__head {
    text-align: center;
}

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

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

.acon02__lead {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: #111111;
}

.acon02__photo-year {
    font-size: var(--titleXL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #ffffff;
}

.acon02__year.acon02__year--latest {
    font-size: var(--titleXL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #111111;
}

.acon02__list.acon02__list--latest {
    font-size: var(--bodyL);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.96;  /* OVR psd:1.85 */
    color: #424242;
}

.acon02__item {
    color: #c9ccc9;
}

.acon02__year {
    font-size: var(--titleXL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.acon02__list {
    font-size: var(--bodyL);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.96;  /* OVR psd:1.85 */
}
/* /FONT:AUTO acon02 END */

/* INK:AUTO acon02 */
.acon02__list { margin-top: calc(var(--px) * 19.86); margin-bottom: calc(var(--px) * -9.11); } /* base 29,0 */
.acon02__list.acon02__list--latest { margin-top: calc(var(--px) * 19.86); margin-bottom: calc(var(--px) * -9.1); } /* base 29,0 */
.acon02__year.acon02__year--latest { margin-top: calc(var(--px) * -8.5); margin-bottom: calc(var(--px) * -7.5); } /* base 0,0 */
.acon02__year { margin-top: calc(var(--px) * -8.5); margin-bottom: calc(var(--px) * -7.5); } /* base 0,0 */
.acon02__title { margin-top: calc(var(--px) * 33.55); margin-bottom: calc(var(--px) * -6.44); } /* base 41,0 */
.acon02__eyebrow { margin-top: calc(var(--px) * -6.1); margin-bottom: calc(var(--px) * -5.09); } /* base 0,0 */
.acon02__lead { margin-top: calc(var(--px) * 21); margin-bottom: calc(var(--px) * -5); } /* base 26,0 */
/* /INK:AUTO acon02 END */

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

  .acon02__title {
    margin-top: 2.1333vw;
  }

  .acon02__lead {
    margin-top: 3.2vw;
  }

  .acon02__body {
    flex-direction: column;
    gap: 8.5333vw;
    margin-top: 8.5333vw;
    padding-left: 6.4vw;
    padding-right: 6.4vw;
    clip-path: none;
  }

  .acon02__photo-img {
    width: 87.2vw;
    border-radius: 3.2vw;
  }

  .acon02__photo-year {
    left: 10.6667vw;
    bottom: 8.5333vw;
  }

  .acon02__line {
    top: 76.2789vw;
    left: 9.6vw;
    width: 1px;
    background: linear-gradient(#111 0, #111 7.8205vw, #efefed 7.8205vw);
  }

  .acon02__dot {
    top: 80.8994vw;
    left: 6.4vw;
    border-width: 3.2vw;
    background: radial-gradient(circle closest-side, var(--primary) 0, var(--primary) 1.3333vw, color-mix(in srgb, var(--primary) 16%, transparent) 1.3333vw);
    background-origin: border-box;
  }

  .acon02.is-ani .acon02__line::after {
    top: 7.8205vw;
  }

  .acon02.is-ani .acon02__dot::after {
    inset: -3.2vw;
  }

  .acon02__timeline {
    position: relative;
    top: auto;
    left: auto;
    gap: 8.5333vw;
    padding-left: 8.5333vw;
    padding-top: 4.2667vw;
  }

  .acon02__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2vw;
  }

  .acon02__year {
    flex: none;
  }

  .acon02__dash {
    width: 6.4vw;
    margin-top: 0;
  }

  .acon02__list,
  .acon02__list.acon02__list--latest {
    margin-top: 0;
    line-height: 1.7;
  }

  .acon02.is-ani .acon02__item:not(.is-active) .acon02__list {
    transform: none; /* 세로 스택이라 좌측 이동 시 세로선을 침범 — 모바일은 색 전환만 */
  }
}

/* /merge-build:acon02 */
/* merge-build:acon03 */
/* acon03 — 지식재산권 게시판 골격(연동 대기). 모바일: 카드 3열→1열, 탭 가로 유지 */
.acon03 {
  background-color: var(--tertiary);
}

.acon03_iner {
  padding-top: calc(var(--px) * 207);
  padding-bottom: calc(var(--px) * 140);
}

.acon03__head {
  gap: calc(var(--px) * 12);
}

.acon03__title {
  margin-top: calc(var(--px) * 27);
}

.acon03__desc {
  margin-top: calc(var(--px) * 12);
}

.acon03__tabs {
  margin-top: calc(var(--px) * 50);
  gap: calc(var(--px) * 16);
}

.acon03__tab {
  position: relative;
  font: inherit;
  color: inherit;
  min-width: calc(var(--px) * 133);
  min-height: calc(var(--px) * 51);
  padding-inline: calc(var(--px) * 35.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--px) * 25);
  background-color: transparent;
  cursor: pointer;
  transition: border-color 0.25s ease-out, color 0.25s ease-out;
}

.acon03__tab.is-active {
  border-color: var(--primary);
}

.acon03__tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: calc(var(--px) * 56);
  height: 3px;
  background-color: var(--primary);
}

.acon03__item[hidden],
.acon03__more[hidden],
.acon03__list[hidden] {
  display: none;
}

.acon03__list {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--px) * 348));
  column-gap: calc(var(--px) * 21);
  row-gap: calc(var(--px) * 26);
  margin-top: calc(var(--px) * 31);
}

.acon03__card {
  padding: calc(var(--px) * 12) calc(var(--px) * 12) calc(var(--px) * 23);
  border-radius: calc(var(--px) * 23);
  background-color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.acon03__thumb {
  min-height: calc(var(--px) * 214);
  border-radius: calc(var(--px) * 23);
  background-color: #1c2232;
  overflow: hidden;
}

.acon03__card-title {
  margin-top: calc(var(--px) * 21);
}

.acon03__thumb .board-thumb {
  height: calc(var(--px) * 214);
  object-fit: contain;
}

.acon03__more {
  margin-top: calc(var(--px) * 50);
  margin-right: calc(var(--px) * 25);
  min-height: calc(var(--px) * 48);
  padding: 0 calc(var(--px) * 26) 0 calc(var(--px) * 16);
  gap: calc(var(--px) * 11);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--px) * 24);
  background-color: transparent;
  cursor: pointer;
  transition: border-color 0.25s ease-out, background-color 0.25s ease-out;
}

.acon03__more-label {
  transition: color 0.25s ease-out;
}

.acon03__more-icon {
  display: block;
}

@media (hover: hover) {
  .acon03__tab:hover {
    border-color: var(--primary);
    color: var(--primary);
  }

  .acon03__card:hover {
    transform: translateY(-3%);
    box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 30) rgb(0 0 0 / 0.35);
  }

  .acon03__more:hover {
    border-color: #fff;
    background-color: #fff;
  }

  .acon03__more:hover .acon03__more-label {
    color: #111;
  }

}

.acon03__tab:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.acon03__more:focus-visible {
  border-color: #fff;
  background-color: #fff;
}

.acon03__more:focus-visible .acon03__more-label {
  color: #111;
}


@media (prefers-reduced-motion: reduce) {
  .acon03__tab,
  .acon03__card,
  .acon03__more,
  .acon03__more-icon {
    transition: none;
  }
}

.acon03__zoom {
  inset: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}

.acon03__zoom:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.acon03__modal {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  padding: calc(var(--px) * 60);
  border: 0;
  background: transparent;
  color: #fff;
}

.acon03__modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.acon03__modal::backdrop {
  background-color: rgb(0 0 0 / 0.8);
}

.acon03__modal-body {
  gap: calc(var(--px) * 20);
  max-height: 100%;
}

.acon03__modal-img {
  max-width: calc(var(--px) * 900);
  max-height: calc(100vh - calc(var(--px) * 200));
  object-fit: contain;
  border-radius: calc(var(--px) * 12);
  background-color: #fff;
}

.acon03__modal-title {
  font-size: var(--bodyL);
  font-weight: 700;
  text-align: center;
}

.acon03__modal-close {
  top: calc(var(--px) * 30);
  right: calc(var(--px) * 30);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--px) * 48);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.acon03__modal-close::before,
.acon03__modal-close::after {
  content: "";
  position: absolute;
  width: calc(var(--px) * 20);
  height: 2px;
  background-color: #fff;
  transform: rotate(45deg);
}

.acon03__modal-close::after {
  transform: rotate(-45deg);
}

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

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

.acon03__head {
    text-align: center;
}

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

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

.acon03__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: #ffffff;
}

.acon03__tabs {
    font-size: var(--bodyS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.57;
    text-align: center;
    color: #ffffff;
}

.acon03__list {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.64;
    text-align: center;
    color: #111111;
}

.acon03__more-label {
    font-size: var(--subheadS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.67;
    color: #ffffff;
}
/* /FONT:AUTO acon03 END */

/* INK:AUTO acon03 */
.acon03__title { margin-top: calc(var(--px) * 19.55); margin-bottom: calc(var(--px) * -7.44); } /* base 27,0 */
.acon03__eyebrow { margin-top: calc(var(--px) * -7); margin-bottom: calc(var(--px) * -6); } /* base 0,0 */
.acon03__card-title { margin-top: calc(var(--px) * 14.74); margin-bottom: calc(var(--px) * -6.26); } /* base 21,0 */
.acon03__desc { margin-top: calc(var(--px) * 7); margin-bottom: calc(var(--px) * -5); } /* base 12,0 */
/* /INK:AUTO acon03 END */

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

  .acon03__head {
    gap: 2.1333vw;
  }

  .acon03__tabs {
    margin-top: 8.5333vw;
    gap: 2.1333vw;
  }

  .acon03__tab {
    min-width: 21.3333vw;
    min-height: 10.6667vw;
    padding-inline: 5.3333vw;
    border-radius: 5.3333vw;
  }

  .acon03__tab.is-active::after {
    bottom: 0;
    width: 8.5333vw;
  }

  .acon03__modal {
    padding: 17.0667vw 5.3333vw;
  }

  .acon03__modal-body {
    gap: 4.2667vw;
  }

  .acon03__modal-img {
    max-width: 100%;
    max-height: calc(100vh - 42.6667vw);
    border-radius: 2.1333vw;
  }

  .acon03__modal-close {
    top: 4.2667vw;
    right: 4.2667vw;
    width: 10.6667vw;
  }

  .acon03__modal-close::before,
  .acon03__modal-close::after {
    width: 4.2667vw;
  }

  .acon03__list {
    grid-template-columns: 1fr;
    row-gap: 4.2667vw;
    margin-top: 5.3333vw;
    width: 100%;
  }

  .acon03__card {
    padding: 5.3333vw;
    border-radius: 5.3333vw;
    transition: none;
  }

  .acon03__thumb {
    min-height: 50vw;
    border-radius: 4.2667vw;
  }

  .acon03__thumb .board-thumb {
    height: 50vw;
  }

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

  .acon03__more {
    margin-top: 8.5333vw;
    margin-right: 0;
    min-height: 10.6667vw;
    padding: 0 4.2667vw 0 3.2vw;
    gap: 1.6vw;
    border-radius: 5.3333vw;
  }

  .acon03__more-icon {
    width: 5.3333vw;
  }
}

/* /merge-build:acon03 */
/* merge-build:acon04 */
/* acon04 — 오시는 길. 모바일: 정보 4열 → 2열/1열 column, 지도 폭 100% 로 접는다 */
.acon04 {
  background-color: #fff;
}

.acon04_iner {
  padding-top: calc(var(--px)*140);
  padding-bottom: calc(var(--px)*160);
}

.acon04__head {
  gap: calc(var(--px)*23);
}

.acon04__title {
  margin-top: calc(var(--px)*15);
}

.acon04__map {
  margin-top: calc(var(--px)*46);
}

.acon04__kakao {
  inset: 0;
  border-radius: calc(var(--px)*85);
  overflow: hidden;
}


.acon04__info {
  width: calc(var(--px)*1552);
  margin-top: calc(var(--px)*64);
}

.acon04__item {
  flex: 1 1 0;
  padding: calc(var(--px)*3) calc(var(--px)*55) calc(var(--px)*19) calc(var(--px)*57);
}

.acon04__item + .acon04__item {
  border-left: 1px solid #c9ccc9;
}

.acon04__item-icon {
  width: calc(var(--px)*48);
  min-height: calc(var(--px)*48);
  border-radius: 50%;
  background-color: var(--light-1);
  transition: transform .25s ease-out;
}

.acon04__item-title {
  transition: color .25s ease-out;
}

@media (hover: hover) {
  .acon04__item:hover .acon04__item-icon {
    transform: scale(1.12);
  }

  .acon04__item:hover .acon04__item-title {
    color: var(--primary);
  }
}

.acon04__item-body {
  margin-top: calc(var(--px)*53);
}

.acon04__item-body::before {
  content: "";
  display: block;
  width: calc(var(--px)*4);
  margin-bottom: calc(var(--px)*12);
  border-top: calc(var(--px)*12) solid var(--primary);
}

.acon04__item-label,
.acon04__item-label2 {
  display: inline-block;
  width: calc(var(--px)*88);
}

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


.acon04__item-icon-img.acon04__item-icon-img--address {
    width: calc(var(--px)*24);
    aspect-ratio: 24 / 29;
}

.acon04__item-icon-img.acon04__item-icon-img--tel {
    width: calc(var(--px)*28);
    aspect-ratio: 28 / 28;
}

.acon04__item-icon-img.acon04__item-icon-img--fax {
    width: calc(var(--px)*28);
    aspect-ratio: 28 / 23;
}

.acon04__item-icon-img.acon04__item-icon-img--email {
    width: calc(var(--px)*25);
    aspect-ratio: 25 / 26;
}
/* /IMG:AUTO acon04 END */

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

.acon04__head {
    text-align: center;
}

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

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

.acon04__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: #111111;
}

.acon04__info {
    color: #000000;
}

.acon04__item-title,
.acon04__item-title.acon04__item-title--email {
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.acon04__item-value,
.acon04__item-value.acon04__item-value--tel,
.acon04__item-value.acon04__item-value--fax,
.acon04__item-value.acon04__item-value--email {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.34;
}

.acon04__item-label {
    letter-spacing: -0.045em;
    color: #787878;
}

.acon04__item-label2 {
    color: #787878;
}
/* /FONT:AUTO acon04 END */

/* INK:AUTO acon04 */
.acon04__title { margin-top: calc(var(--px) * 7.55); margin-bottom: calc(var(--px) * -6.44); } /* base 15,0 */
.acon04__eyebrow { margin-top: calc(var(--px) * -7); margin-bottom: calc(var(--px) * -6); } /* base 0,0 */
.acon04__item-title { margin-top: calc(var(--px) * -7); margin-bottom: calc(var(--px) * -6); } /* base 0,0 */
.acon04__item-title.acon04__item-title--email { margin-top: calc(var(--px) * -6); margin-bottom: calc(var(--px) * -6); } /* base 0,0 */
.acon04__item-value.acon04__item-value--fax { margin-top: calc(var(--px) * -5.4); margin-bottom: calc(var(--px) * -5.4); } /* base 0,0 */
.acon04__desc { margin-top: calc(var(--px) * -5); margin-bottom: calc(var(--px) * -5); } /* base 0,0 */
.acon04__item-value { margin-top: calc(var(--px) * -4.4); margin-bottom: calc(var(--px) * -4.4); } /* base 0,0 */
.acon04__item-label { margin-top: calc(var(--px) * -4.4); margin-bottom: calc(var(--px) * -4.4); } /* base 0,0 */
.acon04__item-label2 { margin-top: calc(var(--px) * -4.4); margin-bottom: calc(var(--px) * -4.4); } /* base 0,0 */
.acon04__item-value.acon04__item-value--tel { margin-top: calc(var(--px) * -4.4); margin-bottom: calc(var(--px) * -4.39); } /* base 0,0 */
.acon04__item-value.acon04__item-value--email { margin-top: calc(var(--px) * -5.4); margin-bottom: calc(var(--px) * -1.4); } /* base 0,0 */
/* /INK:AUTO acon04 END */

@media (max-width:599px) {
  .acon04_iner {
    padding-top: 17.0667vw;
    padding-bottom: 17.0667vw;
    padding-inline: 4.2667vw;
  }

  .acon04__head {
    gap: 3.2vw;
  }

  .acon04__map {
    margin-top: 6.4vw;
  }

  .acon04__map-img {
    width: 91.4667vw;
    aspect-ratio: 343 / 240;
    border-radius: 5.3333vw;
    overflow: hidden;
  }

  .acon04__map-img img {
    height: 100%;
    object-fit: cover;
    object-position: 53.38% 50%;
  }

  .acon04__kakao {
    border-radius: 5.3333vw;
  }


  .acon04__info {
    flex-direction: column;
    width: 91.4667vw;
    margin-top: 10.6667vw;
  }

  .acon04__item {
    flex: none;
    padding: 5.3333vw 4.2667vw;
  }

  .acon04__item + .acon04__item {
    border-left: 0;
    border-top: 1px solid #c9ccc9;
  }

  .acon04__item-icon {
    width: 10.6667vw;
    min-height: 10.6667vw;
  }

  .acon04__item-icon-img.acon04__item-icon-img--address {
    width: 5.3333vw;
  }

  .acon04__item-icon-img.acon04__item-icon-img--tel,
  .acon04__item-icon-img.acon04__item-icon-img--fax,
  .acon04__item-icon-img.acon04__item-icon-img--email {
    width: 5.3333vw;
  }

  .acon04__item-body {
    margin-top: 4.2667vw;
  }

  .acon04__item-body::before {
    width: 1.0667vw;
    margin-bottom: 2.1333vw;
    border-top: 2.1333vw solid var(--primary);
  }

  .acon04__item-label,
  .acon04__item-label2 {
    width: 19vw;
  }
}

/* /merge-build:acon04 */
/* 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 */