@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:ccon01 */
.ccon01__title { margin-top: calc(var(--px)*28); }
.ccon01__description { margin-top: calc(var(--px)*22); }
.ccon01 {
  padding-block: calc(var(--px)*105) calc(var(--px)*198.5);
  background: #fff;



  & .ccon01__heading { padding-bottom: calc(var(--px)*6.02); }
  & .ccon01__gallery { margin-top: calc(var(--px)*55.98); gap: calc(var(--px)*36); }
  & .ccon01__swiper { width: calc(var(--px)*1242); }
  & .ccon01__card { display: flex; gap: calc(var(--px)*19); padding-bottom: calc(var(--px)*6.5); }
  & .ccon01__thumbnail { overflow: hidden; }
  & .ccon01__thumbnail img { transition: transform .3s ease-out; }
  & .ccon01__card-title { transition: color .25s ease-out; }
  & .ccon01__prev,
  & .ccon01__next {
    flex-shrink: 0;
    padding: calc(var(--px)*12.5) calc(var(--px)*10.5);
    margin-bottom: calc(var(--px)*41.5);
    border: 0;
    border-radius: 50%; /* RADIUS: PSD 검증된 43px 원형 탐색 버튼 */
    background: #c6c6c6;
    cursor: pointer;
    transition: background-color .25s ease-out;
    &.swiper-button-disabled { opacity: 1; cursor: default; }
    &:focus-visible:not(.swiper-button-disabled) { background-color: #009e5a; }
  }
  & .ccon01__card:focus-within .ccon01__thumbnail img { transform: scale(1.04); }
  & .ccon01__card:focus-within .ccon01__card-title { color: #009e5a; }
}

@media (hover: hover) {
  .ccon01 {
    & .ccon01__card:hover .ccon01__thumbnail img { transform: scale(1.04); }
    & .ccon01__card:hover .ccon01__card-title { color: #009e5a; }
    & .ccon01__prev:hover:not(.swiper-button-disabled),
    & .ccon01__next:hover:not(.swiper-button-disabled) { background-color: #009e5a; }
  }
}

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

.ccon01__thumbnail {
    width: calc(var(--px)*404);
    aspect-ratio: 404 / 260;
}
/* /IMG:AUTO ccon01 END */

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

.ccon01__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1; /* OVR */
    color: #009e5a;
}

.ccon01__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.0605em; /* OVR */
    line-height: 1.38;
    color: #101111;
}

.ccon01__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.032em; /* OVR */
    line-height: 1.65;
    color: #101111;
}

.ccon01__swiper {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.75;
    color: #101111;
}
/* /FONT:AUTO ccon01 END */

/* INK:AUTO ccon01 */
.ccon01__title { margin-top: calc(var(--px) * 19.4); margin-bottom: calc(var(--px) * -8.59); } /* base 28,0 */
.ccon01__card-title { margin-top: calc(var(--px) * -6.5); margin-bottom: calc(var(--px) * -6.5); } /* base 0,0 */
.ccon01__description { margin-top: calc(var(--px) * 15.98); margin-bottom: calc(var(--px) * -6.02); } /* base 22,0 */
.ccon01__eyebrow { margin-top: calc(var(--px) * -2.5); margin-bottom: calc(var(--px) * -1.5); } /* base 0,0 */
/* /INK:AUTO ccon01 END */

@media (max-width: 599px) {
  .ccon01 {
    padding-block: 10.6667vw 10.6667vw;
    & .ccon01__inner { padding-inline: 5.3333vw; }
    & .ccon01__heading { padding-bottom: 0.9632vw; }
    & .ccon01__gallery { align-self: stretch; width: auto; margin-top: 8.5333vw; margin-inline: -5.3333vw; gap: 0; }
    & .ccon01__swiper { width: 100%; min-width: 0; }
    & .ccon01__card { gap: 3.2vw; padding-bottom: 1.04vw; }
  }
  .ccon01__thumbnail { width: 100%; }
  .ccon01__title { margin-top: 3.104vw; margin-bottom: -1.3744vw; }
  .ccon01__card-title { margin-top: -1.04vw; margin-bottom: -1.04vw; }
  .ccon01__description { margin-top: 2.1333vw; margin-bottom: -0.9632vw; }
  .ccon01__eyebrow { margin-top: -0.4vw; margin-bottom: -0.24vw; }
}

/* /merge-build:ccon01 */
/* merge-build:ccon02 */
.ccon02__title { margin-top: calc(var(--px)*28); }
.ccon02__description { margin-top: calc(var(--px)*22); }
.ccon02 {
  padding-block: calc(var(--px)*91) calc(var(--px)*190.5);

  .ccon02__heading { padding-bottom: calc(var(--px)*6.02); }
  .ccon02__gallery { gap: calc(var(--px)*37); margin-top: calc(var(--px)*55.98); }
  .ccon02__swiper { width: calc(var(--px)*1242); }
  .ccon02__card { display: flex; gap: calc(var(--px)*19); padding-bottom: calc(var(--px)*6.5); }
  .ccon02__thumbnail { display: block; overflow: hidden; } /* 링크(a)로 렌더되므로 blockify — IMG:AUTO 의 width·aspect-ratio 가 inline 에 안 먹는다 */
  .ccon02__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
  .ccon02__card-title { transition: color .25s ease-out; }
  .ccon02__card:focus-within .ccon02__thumbnail img { transform: scale(1.04); }
  .ccon02__card:focus-within .ccon02__card-title { color: #009e5a; }
  .ccon02__status {
    top: calc(var(--px)*18);
    left: calc(var(--px)*22);
    width: calc(var(--px)*63);
    padding-block: calc(var(--px)*0.5);
    border-radius: calc(var(--px)*15);
  }
  .ccon02__status--active { background: #ff6a39; }
  .ccon02__status--ended { background: #3c3f3e; }
  .ccon02__prev,
  .ccon02__next {
    flex-shrink: 0;
    width: calc(var(--px)*43);
    padding-block: calc(var(--px)*12.5);
    margin-top: calc(var(--px)*109);
    border: 0;
    border-radius: 50vw;
    background: #c6c6c6;
    cursor: pointer;
    transition: background-color .25s ease-out;
    &.swiper-button-disabled { opacity: 1; cursor: default; }
    &:focus-visible:not(.swiper-button-disabled) { background-color: #009e5a; }
  }
}

@media (hover: hover) {
  .ccon02 {
    .ccon02__card:hover .ccon02__thumbnail img { transform: scale(1.04); }
    .ccon02__card:hover .ccon02__card-title { color: #009e5a; }
    .ccon02__prev:hover:not(.swiper-button-disabled),
    .ccon02__next:hover:not(.swiper-button-disabled) { background-color: #009e5a; }
  }
}

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

.ccon02__thumbnail {
    width: calc(var(--px)*404);
    aspect-ratio: 404 / 260;
}
/* /IMG:AUTO ccon02 END */

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

.ccon02__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 4.97;
    color: #009e5a;
}

.ccon02__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.38;
    color: #101111;
}

.ccon02__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.0332em; /* OVR */
    line-height: 1.65;
    color: #101111;
}

.ccon02__swiper {
    font-family: var(--font-pretendard);
}

.ccon02__status.ccon02__status--active,
.ccon02__status.ccon02__status--ended {
    font-size: var(--bodyXS);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 2;
    color: #ffffff;
}

.ccon02__card-title {
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.75;
    color: #101111;
}
/* /FONT:AUTO ccon02 END */

/* INK:AUTO ccon02 */
.ccon02__eyebrow { margin-top: calc(var(--px) * -38.23); margin-bottom: calc(var(--px) * -38.22); } /* base 0,0 */
.ccon02__title { margin-top: calc(var(--px) * 19.4); margin-bottom: calc(var(--px) * -8.59); } /* base 28,0 */
.ccon02__card-title { margin-top: calc(var(--px) * -6.5); margin-bottom: calc(var(--px) * -6.5); } /* base 0,0 */
.ccon02__description { margin-top: calc(var(--px) * 15.98); margin-bottom: calc(var(--px) * -6.02); } /* base 22,0 */
/* /INK:AUTO ccon02 END */

@media (max-width:599px) {
  .ccon02 {
    padding-block: 10.6667vw 10.6667vw;

    .ccon02__heading { padding-bottom: 1.322vw; }
    .ccon02__gallery { margin-top: 8.5333vw; }
    .ccon02__swiper { width: 100vw; }
    .ccon02__card { gap: 3.2vw; padding-bottom: 1.5167vw; }
    .ccon02__thumbnail { width: 100%; }
    .ccon02__status {
      top: 3.2vw;
      left: 3.2vw;
      width: 12.8vw;
      padding-block: 0;
      border-radius: 4.2667vw;
    }
  }
  .ccon02__eyebrow { line-height: 1; margin-top: -0.5926vw; margin-bottom: -0.5926vw; }
  .ccon02__title { margin-top: 2.6614vw; margin-bottom: -1.6035vw; }
  .ccon02__description { margin-top: 1.878vw; margin-bottom: -1.322vw; }
  .ccon02__card-title { margin-top: -1.5167vw; margin-bottom: -1.5167vw; }
}

/* /merge-build:ccon02 */
/* merge-build:ccon03 */
.ccon03__title { margin-top: calc(var(--px)*28); }
.ccon03__description { margin-top: calc(var(--px)*22); }
.ccon03 {
  padding-block: calc(var(--px)*138) calc(var(--px)*140);
  background: linear-gradient(to bottom, #ffffff 0 calc(var(--px)*8), #fff8dd calc(var(--px)*8));

  .ccon03__heading { padding-bottom: calc(var(--px)*6.02); }
  .ccon03__gallery { gap: calc(var(--px)*43); margin-top: calc(var(--px)*43.98); }
  .ccon03__swiper { width: calc(var(--px)*840); border-radius: calc(var(--px)*40); }
  .ccon03__slide {
    padding: calc(var(--px)*334) calc(var(--px)*28) calc(var(--px)*16);
    background: #101111;
    border-radius: calc(var(--px)*40);
    overflow: hidden;
  }
  .ccon03__video-title { padding-block: calc(var(--px)*10); background: #ffffff; border-radius: calc(var(--px)*24); }

  /* 영상 슬롯 = 슬라이드 상단 패딩 영역. 파사드(썸네일)를 깔고 클릭하면 JS 가 iframe 으로 교체한다 */
  .ccon03__player,
  .ccon03__embed,
  .ccon03__placeholder {
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--px)*334); /* HEIGHT: 슬라이드 상단 패딩과 같은 영상 슬롯 */
  }
  .ccon03__embed { border: 0; }
  .ccon03__placeholder {
    gap: calc(var(--px)*20);
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary) 78%, white), var(--primary) 70%);
  }
  .ccon03__placeholder-logo { width: calc(var(--px)*125); }
  .ccon03__placeholder-text {
    font-family: var(--font-poppins);
    font-size: var(--bodyL);
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffffff;
  }
  .ccon03__player {
    padding: 0;
    border: 0;
    background: #101111;
    cursor: pointer;
    overflow: hidden;
    & img { width: 100%; height: 100%; object-fit: cover; }
    &::before,
    &::after { content: ""; position: absolute; top: 50%; left: 50%; transition: background-color .25s ease-out; }
    &::after {
      width: calc(var(--px)*72);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: rgba(16, 17, 17, 0.55);
    }
    &::before {
      width: calc(var(--px)*26);
      aspect-ratio: 1;
      transform: translate(-40%, -50%);
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      background-color: #ffffff;
      z-index: 1; /* ::before 가 DOM 순서상 ::after 원보다 앞이라 명시로 위에 올린다 */
    }
    @media (hover: hover) {
      &:hover::after { background-color: #009e5a; }
    }
    &:focus-visible { outline: 2px solid #009e5a; outline-offset: -2px; }
  }
  .ccon03__thumbnails { gap: calc(var(--px)*8); margin-top: calc(var(--px)*40); }
  .ccon03__thumbnail-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 18%, white);
    & img { width: calc(var(--px)*48); }
  }
  .ccon03__thumbnail {
    position: relative;
    width: calc(var(--px)*201);
    padding-block: calc(var(--px)*57.5);
    border: 0;
    background: #bfd1c9;
    cursor: pointer;
    overflow: hidden;
    outline: calc(var(--px)*3) solid transparent;
    outline-offset: calc(var(--px)*-3);
    transition: filter .25s ease-out, outline-color .25s ease-out;
    & > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    &:focus-visible { outline: 2px solid #009e5a; outline-offset: 2px; }
    &[aria-pressed="true"] { outline-color: #009e5a; filter: brightness(1.06); }
    @media (hover: hover) {
      &:hover { filter: brightness(1.06); }
    }
  }
  .ccon03__prev,
  .ccon03__next {
    flex-shrink: 0;
    width: calc(var(--px)*43);
    padding-block: calc(var(--px)*12.5);
    border: 0;
    border-radius: 50vw;
    background: #009e5a;
    cursor: pointer;
    transition: background-color .2s ease-out, transform .2s ease-out;
    @media (hover: hover) {
      &:hover { background-color: color-mix(in srgb, #009e5a 85%, black); transform: scale(1.08); }
    }
  }
}

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

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

.ccon03__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 4.97;
    color: #009e5a;
}

.ccon03__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.0648em; /* OVR */
    line-height: 1.38;
    color: #101111;
}

.ccon03__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.033em; /* OVR */
    line-height: 1.65;
    color: #101111;
}

.ccon03__swiper {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.75;
    color: #101111;
}
/* /FONT:AUTO ccon03 END */

/* INK:AUTO ccon03 */
.ccon03__eyebrow { margin-top: calc(var(--px) * -38.23); margin-bottom: calc(var(--px) * -38.22); } /* base 0,0 */
.ccon03__title { margin-top: calc(var(--px) * 19.4); margin-bottom: calc(var(--px) * -8.59); } /* base 28,0 */
.ccon03__description { margin-top: calc(var(--px) * 15.98); margin-bottom: calc(var(--px) * -6.02); } /* base 22,0 */
/* /INK:AUTO ccon03 END */

@media (max-width:599px) {
  .ccon03 {
    padding-block: 10.6667vw 10.6667vw;
    background: linear-gradient(to bottom, #ffffff 0 1.0667vw, #fff8dd 1.0667vw);

    .ccon03__heading { padding-inline: 5.3333vw; padding-bottom: 1.322vw; }
    .ccon03__gallery { gap: 2.1333vw; margin-top: 6.4vw; }
    .ccon03__swiper { width: 68vw; border-radius: 6.4vw; }
    .ccon03__slide { padding: 27.0382vw 4.2667vw 2.1333vw; border-radius: 6.4vw; }
    .ccon03__video-title { padding-block: 1.6vw; border-radius: 4.2667vw; }
    .ccon03__player,
    .ccon03__embed,
    .ccon03__placeholder { height: 27.0382vw; /* HEIGHT: absol 영상 슬롯 — 슬라이드 상단 패딩과 같은 값 */ }
    .ccon03__placeholder { gap: 1.6vw; }
    .ccon03__placeholder-logo { width: 12.8vw; }
    .ccon03__placeholder-text { font-size: var(--bodyS); }
    .ccon03__thumbnail-logo img { width: 6.4vw; }
    .ccon03__player {
      &::after { width: 10.6667vw; }
      &::before { width: 4.2667vw; }
    }
    .ccon03__prev,
    .ccon03__next { width: 8.5333vw; padding-block: 2.9576vw; }
    .ccon03__thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 89.3333vw; gap: 1.0667vw; margin-top: 6.4vw; }
    .ccon03__thumbnail { width: auto; padding-block: 8.3151vw; outline-width: 0.5333vw; outline-offset: -0.5333vw; }
  }
  .ccon03__prev-icon,
  .ccon03__next-icon { width: 3.2vw; }
  .ccon03__eyebrow { line-height: 1; margin-top: -0.5926vw; margin-bottom: -0.5926vw; }
  .ccon03__title { margin-top: 2.6614vw; margin-bottom: -1.6035vw; }
  .ccon03__description { margin-top: 1.878vw; margin-bottom: -1.322vw; }
}


/* /merge-build:ccon03 */
/* merge-build:ccon04 */
.ccon04 {
  padding-block: calc(var(--px)*147) calc(var(--px)*153.75);
  background: #ffffff;
  .ccon04__heading { padding-bottom: calc(var(--px)*6.02); }


  .ccon04__list { width: calc(var(--px)*1200); gap: calc(var(--px)*6); margin-top: calc(var(--px)*46.98); }
  .ccon04__item { border: 1px solid #bfd1c9; border-radius: calc(var(--px)*13); overflow: hidden; }
  .ccon04__item[hidden] { display: none; } /* details 의 UA display 가 [hidden] 을 이겨 더보기 전 항목이 그대로 보인다 */
  .ccon04__summary {
    padding: calc(var(--px)*24.0234375) calc(var(--px)*99);
    list-style: none;
    cursor: pointer;
    transition: background-color .3s ease-out;
    &::-webkit-details-marker { display: none; }
    &:focus-visible { outline: 2px solid #009e5a; outline-offset: -2px; }
    .ccon04__item-title { transition: color .25s ease-out; }
    @media (hover: hover) {
      .ccon04__item:not([open]) &:hover .ccon04__item-title { color: #009e5a; }
    }
  }
  .ccon04__item-title-open { display: none; }
  .ccon04__arrow { flex-shrink: 0;
    .ccon04__arrow-closed,
    .ccon04__arrow-open { transition: opacity .25s ease-out; }
  }
  .ccon04__arrow-open { inset: 0; opacity: 0; }
  /* is-closing = 닫힘 트윈이 도는 동안. 색·화살표는 트윈 끝을 안 기다리고 바로 풀린다 */
  .ccon04__item[open]:not(.is-closing) {
    .ccon04__summary { background: #009e5a; padding-block: calc(var(--px)*21); }
    .ccon04__item-title { display: none; }
    .ccon04__item-title-open { display: block; }
    .ccon04__arrow-open { opacity: 1; }
    .ccon04__arrow-closed { opacity: 0; }
  }
  .ccon04__body { padding: calc(var(--px)*40) calc(var(--px)*98) calc(var(--px)*38); gap: calc(var(--px)*64); }
  .ccon04__thumbnail { flex-shrink: 0; }
  .ccon04__article { padding-top: calc(var(--px)*28); }
  .ccon04__excerpt { margin-left: calc(var(--px)*10); }
  .ccon04__source { border: 1px solid #bfd1c9; border-radius: calc(var(--px)*21); padding: calc(var(--px)*7) calc(var(--px)*21);
    transition: box-shadow .25s ease-out;
    @media (hover: hover) {
      &:hover { box-shadow: 0 0 calc(var(--px)*30) rgba(0,0,0,.18); }
    }
  }
  .ccon04__more { gap: calc(var(--px)*20); margin-top: calc(var(--px)*45); padding: calc(var(--px)*9) calc(var(--px)*24) calc(var(--px)*9) calc(var(--px)*43); border: 1px solid #bfd1c9; border-radius: calc(var(--px)*33); background: #ffffff; cursor: pointer;
    transition: box-shadow .25s ease-out;
    .ccon04__more-icon { transition: transform .25s ease-out; }
    @media (hover: hover) {
      &:hover:not(:disabled) { box-shadow: 0 0 calc(var(--px)*30) rgba(0,0,0,.18);
        .ccon04__more-icon { transform: translateY(12%); }
      }
    }
  }
}

.ccon04__title { margin-top: calc(var(--px)*28); }
.ccon04__description { margin-top: calc(var(--px)*22); }

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

.ccon04__thumbnail {
    width: calc(var(--px)*309);
    aspect-ratio: 309 / 208;
}

.ccon04__more-icon {
    width: calc(var(--px)*47);
    aspect-ratio: 47 / 47;
}
/* /IMG:AUTO ccon04 END */

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

.ccon04__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 4.97;
    color: #009e5a;
}

.ccon04__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.38;
    color: #101111;
}

.ccon04__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.0342em;  /* OVR psd:-0.04em */
    line-height: 1.65;
    color: #101111;
}

.ccon04__list {
    font-family: var(--font-pretendard);
}

.ccon04__summary {
    font-size: var(--bodyL);
    letter-spacing: -0.05em;
    line-height: 1.65; /* OVR */
}

.ccon04__item-title {
    font-weight: 500;
    line-height: 1.65;  /* OVR */
    color: #000000;
}

.ccon04__item-title-open {
    font-weight: 700;
    color: #ffffff;
}

.ccon04__excerpt {
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.49;
    color: #000000;
}

.ccon04__source {
    font-size: var(--bodyS);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-align: right;
}

.ccon04__source-label {
    color: #009e5a;
}

.ccon04__source-tail {
    color: #101111;
}

.ccon04__more-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-align: right;
    color: #101111;
}
/* /FONT:AUTO ccon04 END */

/* INK:AUTO ccon04 */
.ccon04__eyebrow { margin-top: calc(var(--px) * -38.23); margin-bottom: calc(var(--px) * -37.22); } /* base 0,0 */
.ccon04__title { margin-top: calc(var(--px) * 19.4); margin-bottom: calc(var(--px) * -8.59); } /* base 28,0 */
.ccon04__description { margin-top: calc(var(--px) * 15.98); margin-bottom: calc(var(--px) * -6.02); } /* base 22,0 */
.ccon04__item-title { margin-top: calc(var(--px) * -6.02); margin-bottom: calc(var(--px) * -6.02); } /* base 0,0 */
.ccon04__excerpt { margin-top: calc(var(--px) * -4.42); margin-bottom: calc(var(--px) * -4.38); } /* base 0,0 */
/* /INK:AUTO ccon04 END */

@media (max-width:599px) {
  .ccon04 {
    padding-block: 10.6667vw 10.6667vw;
    .ccon04_iner { padding-inline: 5.3333vw; }
    .ccon04__heading { padding-bottom: 1.3220vw; }
    .ccon04__list { width: 100%; gap: 1.0667vw; margin-top: 8.5333vw; }
    .ccon04__item { border-radius: 2.1333vw; }
    .ccon04__summary { padding: 4.2667vw; gap: 3.2vw; }
    /* PC 의 [open]:not(.is-closing) 가 한 칸 더 구체적이라 :not 없이는 --px 축 padding(4.1px)이 그대로 남는다 */
    .ccon04__item[open]:not(.is-closing) .ccon04__summary { padding-block: 4.2667vw; }
    .ccon04__body { flex-direction: column; padding: 6.4vw 4.2667vw 6.4vw; gap: 4.2667vw; }
    .ccon04__thumbnail { width: 100%; }
    .ccon04__article { padding-top: 0; gap: 4.2667vw; }
    .ccon04__excerpt { margin-left: 0; }
    .ccon04__source { border-radius: 50vw; padding: 1.6vw 3.2vw; }
    .ccon04__more { margin-top: 6.4vw; gap: 3.2vw; padding: 1.6vw 4.2667vw 1.6vw 6.4vw; border-radius: 50vw; }
  }
  .ccon04__arrow-closed,
  .ccon04__arrow-open { width: 3.2vw; }
  .ccon04__more-icon { width: 8.5333vw; }
  .ccon04__eyebrow { line-height: 1; margin-top: -0.5926vw; margin-bottom: -0.5926vw; }
  .ccon04__title { margin-top: 2.6613vw; margin-bottom: -1.6035vw; }
  .ccon04__description { margin-top: 1.8780vw; margin-bottom: -1.3220vw; }
  .ccon04__item-title,
  .ccon04__item-title-open { margin-top: -1.3220vw; margin-bottom: -1.3220vw; }
  .ccon04__excerpt { margin-top: -1.0313vw; margin-bottom: -1.0220vw; }
}

/* /merge-build:ccon04 */
/* merge-build:ccon05 */
.ccon05 {
  padding-block: calc(var(--px)*131) calc(var(--px)*172);
  background: #ffffff;
  border-top: 1px solid rgb(165 189 179 / 30.2%);


  .ccon05__heading { padding-bottom: calc(var(--px)*6.02); }
  .ccon05__list { width: calc(var(--px)*1200); gap: calc(var(--px)*6); margin-top: calc(var(--px)*46.96); }
  .ccon05__item:first-child { margin-bottom: calc(var(--px)*1); }
  .ccon05__item { border: 1px solid #bfd1c9; border-radius: calc(var(--px)*13); overflow: hidden; }
  .ccon05__item[hidden] { display: none; } /* details 의 UA display 가 [hidden] 을 이겨 더보기 전 항목이 그대로 보인다 */
  .ccon05__question {
    padding: calc(var(--px)*20.475) calc(var(--px)*99);
    list-style: none;
    cursor: pointer;
    transition: background-color .3s ease-out;
    &::-webkit-details-marker { display: none; }
    &:focus-visible { outline: 2px solid #009e5a; outline-offset: -2px; }
    .ccon05__question-title { transition: color .25s ease-out; }
  }
  .ccon05__arrow { flex-shrink: 0; }
  .ccon05__arrow-closed { transition: opacity .25s ease-out; }
  .ccon05__arrow-open { inset: 0; opacity: 0; transition: opacity .25s ease-out; }
  /* is-closing = 닫힘 트윈이 도는 동안. 색·화살표는 트윈 끝을 안 기다리고 바로 풀린다 */
  .ccon05__item[open]:not(.is-closing) {
    .ccon05__question { background: #009e5a; }
    .ccon05__question-title { color: #ffffff; font-weight: 700; }
    .ccon05__arrow-open { opacity: 1; }
    .ccon05__arrow-closed { opacity: 0; }
  }
  .ccon05__answer { padding: calc(var(--px)*45) calc(var(--px)*98) calc(var(--px)*177.3); }
  .ccon05__more { gap: calc(var(--px)*20); margin-top: calc(var(--px)*46); padding: calc(var(--px)*9) calc(var(--px)*24) calc(var(--px)*9) calc(var(--px)*43); border: 1px solid #bfd1c9; border-radius: calc(var(--px)*33); background: #ffffff; transition: box-shadow .25s ease-out; }
  .ccon05__more:focus-visible { outline: 2px solid #009e5a; outline-offset: 2px; }
  .ccon05__more-icon { width: calc(var(--px)*47); aspect-ratio: 1; background: #009e5a; border-radius: 50%; transition: transform .25s ease-out; }
}

@media (hover: hover) {
  .ccon05__item:not([open]) .ccon05__question:hover .ccon05__question-title { color: #009e5a; }
  .ccon05__more:not(:disabled):hover { box-shadow: 0 0 calc(var(--px)*30) rgb(0 0 0 / 18%); }
  .ccon05__more:not(:disabled):hover .ccon05__more-icon { transform: translateY(12%); }
}

.ccon05__title { margin-top: calc(var(--px)*27); }
.ccon05__description { margin-top: calc(var(--px)*21); }

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

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

.ccon05__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 4.97;
    color: #009e5a;
}

.ccon05__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.38;
    color: #101111;
}

.ccon05__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.0356em; /* OVR */
    line-height: 1.65;
    color: #101111;
}

.ccon05__list {
    font-family: var(--font-pretendard);
    color: #000000;
}

.ccon05__question-title {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.0318em; /* OVR */
    line-height: 1.65; /* OVR */
}

.ccon05__answer-text {
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.49;
}

.ccon05__more-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-align: right;
    color: #101111;
}
/* /FONT:AUTO ccon05 END */

/* INK:AUTO ccon05 */
.ccon05__eyebrow { margin-top: calc(var(--px) * -38.23); margin-bottom: calc(var(--px) * -35.22); } /* base 0,0 */
.ccon05__title { margin-top: calc(var(--px) * 18.4); margin-bottom: calc(var(--px) * -8.59); } /* base 27,0 */
.ccon05__description { margin-top: calc(var(--px) * 14.98); margin-bottom: calc(var(--px) * -6.02); } /* base 21,0 */
.ccon05__answer-text { margin-top: calc(var(--px) * -4.42); margin-bottom: calc(var(--px) * -4.38); } /* base 0,0 */
/* /INK:AUTO ccon05 END */

@media (max-width:599px) {
  .ccon05 {
    padding-block: 10.6667vw 16vw;

    /* PC 규칙이 .ccon05 중첩이라 같은 구체성으로 덮음 */
    .ccon05__heading { padding-bottom: 0; }
    .ccon05__list { width: 89.3333vw; gap: 1.0667vw; margin-top: 8.5333vw; }
    .ccon05__item:first-child { margin-bottom: 0; }
    .ccon05__item { border-radius: 2.1333vw; }
    .ccon05__question { gap: 3.2vw; padding: 3.2vw 5.3333vw; }
    .ccon05__answer { padding: 6.4vw 5.3333vw 8.5333vw; }
    .ccon05__more { gap: 3.2vw; margin-top: 6.4vw; padding: 1.6vw 4.2667vw 1.6vw 6.4vw; border-radius: 50vw; }
    .ccon05__more-icon { width: 8.5333vw; }
  }
  .ccon05__eyebrow { line-height: 1.2; margin-top: 0; margin-bottom: 0; }
  .ccon05__title { margin-top: 2.1333vw; margin-bottom: 0; }
  .ccon05__description { margin-top: 3.2vw; margin-bottom: 0; }
  .ccon05__answer-text { margin-top: 0; margin-bottom: 0; }
  .ccon05__arrow-closed,
  .ccon05__arrow-open,
  .ccon05__more-arrow { width: 3.2vw; }
}

/* /merge-build:ccon05 */
/* merge-build:sub-hero */
/* sub-hero — 모바일: head 는 column 그대로 가운데 정렬, 엠블럼은 하단 중앙 유지 */
.sub-hero {
  z-index: 2; /* 빼면 visual-verify 렌더가 백지로 나옴(실측) — 걷지 말 것 */
  overflow: visible;
  padding-bottom: calc(var(--px)*63); /* 그린 면 아래로 내려오는 엠블럼 범프를 섹션 안에 포함 */
}

.sub-hero_iner {
  background-color: #009e5a;
}

.sub-hero__head {
  width: calc(var(--px)*1241);
  padding-top: calc(var(--px)*223);
  padding-bottom: calc(var(--px)*114);
  gap: calc(var(--px)*2);
}

.sub-hero__emblem {
  inset-inline: 0;
  bottom: calc(var(--px)*-8); /* 자산 날개 흰띠 7.75px — 섹션 하단과 맞물림 */
}

.sub-hero__logo {
  bottom: calc(var(--px)*-51);
}

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

.sub-hero__logo {
    width: calc(var(--px)*125);
    aspect-ratio: 125 / 125;
}
/* /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-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.sub-hero__title {
    font-family: var(--font-poppins);
    font-size: var(--displayL);
    letter-spacing: -0.0249em; /* OVR */
}

.sub-hero__desc {
    font-family: var(--font-pretendard);
    font-size: var(--subheadL);
    letter-spacing: -0.04em;
    font-weight: 700;
}
/* /FONT:AUTO sub-hero END */

@media (max-width:599px) {
  .sub-hero {
    padding-bottom: 6.4vw;
  }

  .sub-hero__head {
    width: 89.3333vw;
    padding-top: 21.3333vw;
    padding-bottom: 12.8vw;
    gap: 0.5333vw;
    align-items: center;
  }

  .sub-hero__title {
    font-size: 13.8667vw; /* 52px — 토큰 --displayL(63px)이면 최장 COMMUNITY 395.7px 로 head 335px 을 넘친다 */
  }

  .sub-hero__bump {
    width: 70vw;
  }

  .sub-hero__logo {
    width: 13.3333vw;
    bottom: -5.3333vw;
  }

  .sub-hero__emblem {
    bottom: -0.8533vw;
  }
}

/* /merge-build:sub-hero */
/* merge-build:tab-nav */
/* tab-nav — 모바일: 탭 7개를 가로 스크롤 한 줄로 접는 후보 */
.tab-nav {
  --tab-nav-lift: 0px; /* 페이지가 .tab-nav 에 padding-top 을 주면 같은 값을 넣어 sticky 를 그만큼 끌어올린다 */
  position: sticky; /* PSD 주석: 서브탭 상단 고정 */
  top: calc(var(--px)*12 - var(--tab-nav-lift)); /* 고정 시 헤더와 12 간격 */
  z-index: 11; /* 뒤 섹션의 .front{z-index:10} 이 root 스택에서 경쟁 — 고정 중 탭바가 그 위여야 함 */
}

.tab-nav__bar {
  width: calc(var(--px)*1598);
  border: 2px solid #eaf1ee;
  border-radius: calc(var(--px)*40);
  background-color: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(calc(var(--px)*20));
  backdrop-filter: blur(calc(var(--px)*20));
}

.tab-nav__link {
  display: block;
  padding: calc(var(--px)*28) calc(var(--px)*39);
  transition: color .25s ease-out;
}

@media (hover: hover) {
  .tab-nav__link:hover {
    color: var(--primary);
  }
}

/* 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(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.tab-nav__link.tab-nav__link--active {
    color: #009e5a;
}

.tab-nav__link {
    color: #101111;
}
/* /FONT:AUTO tab-nav END */

/* INK:AUTO tab-nav */
.tab-nav__link.tab-nav__link--active { margin-top: calc(var(--px) * -2.3); /* margin-bottom: calc(var(--px) * 6.51); */ } /* base 0,0 */
.tab-nav__link { margin-top: calc(var(--px) * -2.3); /* margin-bottom: calc(var(--px) * 6.51); */ } /* base 0,0 */
/* /INK:AUTO tab-nav END */

@media (max-width:599px) {
  .tab-nav {
    top: calc(3.2vw - var(--tab-nav-lift));
  }

  .tab-nav__bar {
    position: relative;
    width: 91.4667vw;
    border-radius: 50vw;
    overflow: hidden;
    -webkit-backdrop-filter: blur(3.2vw);
    backdrop-filter: blur(3.2vw);
  }

  .tab-nav__bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8.5333vw;
    background: linear-gradient(to left, #ffffff, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
  }

  .tab-nav__bar.is-scrollable:not(.is-scroll-end)::after {
    opacity: 1;
  }

  .tab-nav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    justify-content: safe center;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tab-nav__list::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .tab-nav__item {
    flex-shrink: 0;
  }

  .tab-nav__link {
    padding: 4.2667vw 3.2vw;
    white-space: nowrap;
  }
}

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