@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:ocon01 */
/* ocon01 — 모바일: 곡면 각도를 줄여 가운데 1장+양옆 일부 노출, 캡션 6열→3열 2행 후보 */
.ocon01 {
  background-color: #fff8dd;
  margin-top: calc(var(--px)*-163.796875); /* 로고·탭 영역까지 섹션 배경 확장 */
  padding-top: calc(var(--px)*163.796875);
}

.ocon01_iner {
  padding-bottom: calc(var(--px)*60);
}

.ocon01__deco {
  top: calc(var(--px)*-61); /* 위쪽 61 은 tab-nav 흰 바 밑이라 섹션 overflow 로 잘려도 안 보임 */
}

.ocon01__title {
  margin-top: calc(var(--px)*135);
}

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

.ocon01__stage {
  align-self: stretch;
  margin-top: calc(var(--px)*75);
  padding-right: calc(var(--px)*27);
}

.ocon01__stage::before,
.ocon01__stage::after {
  content: "";
  position: absolute;
  top: calc(var(--px)*-160);
  bottom: calc(var(--px)*-150);
  z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 */
  width: calc(var(--px)*320);
  pointer-events: none;
}

.ocon01__stage::before {
  left: 0;
  background: linear-gradient(to right, #fff8dd, rgb(255 248 221 / 0));
}

.ocon01__stage::after {
  right: 0;
  background: linear-gradient(to left, #fff8dd, rgb(255 248 221 / 0));
}

.ocon01__stage .ocon01__swiper {
  overflow: visible; /* swiper-bundle 의 .swiper{overflow:hidden} 이 뒤에 로드돼 곡면 위아래를 잘라냄 */
}

.ocon01__swiper .ocon01__slide {
  width: max-content; /* swiper-bundle 의 .swiper-slide{width:100%} 가 뒤에 로드돼 특이도로 이김 */
  backface-visibility: hidden;
}

.ocon01__photo {
  position: relative;
  min-height: 0; /* overflow:visible 이면 aspect-ratio 자동 최소높이가 img 자연높이로 늘어남 */

  & img {
    height: 100%;
    opacity: 0; /* 화면은 JS 가 만든 .ocon01__strip 조각이 그린다 — img 는 alt 담당 */
  }
}

.ocon01__strip {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  transform-origin: 0 0;
}

.ocon01__captions {
  width: calc(var(--px)*1062);
  margin-top: calc(var(--px)*76);
}

.ocon01__caption {
  flex: 1 1 0;
}

.ocon01__caption + .ocon01__caption {
  border-left: 1px solid rgb(0 0 0 / 0.149);
}

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

.ocon01__photo {
    width: calc(var(--px)*432);
    aspect-ratio: 432 / 223;  /* OVR */
}
/* /IMG:AUTO ocon01 END */

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

.ocon01__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.35;
}

.ocon01__title-accent {
    color: #009e5a;
}

.ocon01__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.47;
}

.ocon01__captions {
    font-family: var(--font-pretendard);
    font-weight: 500;
}

.ocon01__caption-text {
    font-size: var(--bodyL);
    letter-spacing: -0.04em;
    line-height: 1.41;
}

.ocon01__caption-text.ocon01__caption-text--compact {
    font-size: var(--bodyS);
    letter-spacing: -0.04em;
    line-height: 1.27;
}
/* /FONT:AUTO ocon01 END */

/* INK:AUTO ocon01 */
.ocon01__title { margin-top: calc(var(--px) * 127); margin-bottom: calc(var(--px) * -8); } /* base 135,0 */
.ocon01__title-accent { margin-top: calc(var(--px) * -7); margin-bottom: calc(var(--px) * 2); } /* base 0,0 */
.ocon01__desc { margin-top: calc(var(--px) * 27.51); margin-bottom: calc(var(--px) * -4.48); } /* base 32,0 */
/* /INK:AUTO ocon01 END */


@media (max-width:599px) {
  .ocon01 {
    margin-top: -18.9067vw; /* 모바일 tab-nav 실측 70.9px */
    padding-top: 18.9067vw;
  }

  .ocon01_iner {
    padding-bottom: 10.6667vw;
  }

  .ocon01__deco {
    width: 60vw;
    top: -5.9128vw; /* PC -61/619 비율 유지 */
  }

  .ocon01__title {
    margin-top: 21.3333vw;
  }

  .ocon01__desc {
    margin-top: 4.2667vw;
  }

  .ocon01__stage {
    margin-top: 12.8vw;
    padding-right: 0;
  }

  .ocon01__stage::before,
  .ocon01__stage::after {
    top: -25.1852vw;
    bottom: -23.6111vw;
    width: 17.0667vw; /* 양옆 노출 60px 을 덮어야 가장자리가 각지지 않음 — PC 320/1905 비율 63px → 스냅 64px */
  }

  .ocon01__photo {
    width: 68vw;
  }

  .ocon01__captions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 91.4667vw;
    margin-top: 12.8vw;
    row-gap: 6.4vw;
  }

  .ocon01__caption + .ocon01__caption {
    border-left: 0;
  }

  .ocon01__caption:nth-child(even) {
    border-left: 1px solid rgb(0 0 0 / 0.149);
  }
}

/* /merge-build:ocon01 */
/* merge-build:ocon02 */
.ocon02 {
  background-color: #fff8dd;
}
.ocon02_iner {
  padding-top: calc(var(--px)*47);
  padding-bottom: calc(var(--px)*125);
  padding-inline: calc(var(--px)*282) calc(var(--px)*285);
  gap: calc(var(--px)*11);
}
.ocon02__row--expo,
.ocon02__row--catering {
  gap: calc(var(--px)*10);
}
.ocon02__row--catering {
  margin-left: calc(var(--px)*1);
}
.ocon02__card {
  width: calc(var(--px)*433);
  align-self: stretch;
  padding-inline: calc(var(--px)*58);
  background-color: #ffffff;
}
.ocon02__card--expo {
  padding-top: calc(var(--px)*110);
  margin-block: calc(var(--px)*2) calc(var(--px)*1);
}
.ocon02__card--catering {
  padding-top: calc(var(--px)*73);
  margin-block: calc(var(--px)*1) calc(var(--px)*2);
}
.ocon02__heading {
  padding-bottom: calc(var(--px)*27);
  padding-inline: calc(var(--px)*4);
  border-bottom: 1px solid rgb(0 0 0 / 0.149);
}
.ocon02__title--catering {
  margin-top: calc(var(--px)*9);
}
.ocon02__title--expo {
  margin-top: calc(var(--px)*13);
}
.ocon02__body {
  margin-top: calc(var(--px)*33);
  padding-left: calc(var(--px)*4);
  padding-bottom: calc(var(--px)*2.5);
}
.ocon02__desc--expo {
  margin-top: calc(var(--px)*17);
}
.ocon02__desc--catering {
  margin-top: calc(var(--px)*27);
  padding-left: calc(var(--px)*1);
}

.ocon02__card,
.ocon02__photo {
  border-radius: calc(var(--px)*30);
  box-shadow: 0 calc(var(--px)*9) calc(var(--px)*21) rgb(0 0 0 / 0.16);
}
.ocon02__photo {
  overflow: hidden;
}
.ocon02__card--expo .ocon02__body {
  margin-top: calc(var(--px)*32);
}
.ocon02__card--expo .ocon02__lead {
  padding-left: calc(var(--px)*2);
}

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

/* FONT:AUTO ocon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ocon02__eyebrow.ocon02__eyebrow--expo,
.ocon02__eyebrow.ocon02__eyebrow--catering {
    font-family: var(--font-poppins);
    font-size: var(--bodyS);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR psd:18.87 */
    color: #009e5a;
}

.ocon02__title--expo,
.ocon02__title--catering {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--headM);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.2;
    color: #101111;
}

.ocon02__body {
    font-family: var(--font-pretendard);
    color: #101111;
}

.ocon02__lead {
    font-size: var(--subheadS);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.42;
}

.ocon02__desc--expo,
.ocon02__desc--catering {
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.25;
}
/* /FONT:AUTO ocon02 END */

/* INK:AUTO ocon02 */
.ocon02__lead { margin-top: calc(var(--px) * -3.99); margin-bottom: calc(var(--px) * -4.98); } /* base 0,0 */
.ocon02__title--expo { margin-top: calc(var(--px) * 10.2); margin-bottom: calc(var(--px) * -2.79); } /* base 13,0 */
.ocon02__title--catering { margin-top: calc(var(--px) * 6.2); margin-bottom: calc(var(--px) * -2.79); } /* base 9,0 */
.ocon02__desc--expo { margin-top: calc(var(--px) * 14.5); margin-bottom: calc(var(--px) * -2.5); } /* base 17,0 */
.ocon02__desc--catering { margin-top: calc(var(--px) * 24.5); margin-bottom: calc(var(--px) * -2.5); } /* base 27,0 */
.ocon02__eyebrow.ocon02__eyebrow--expo { margin-top: calc(var(--px) * -1.5); margin-bottom: calc(var(--px) * -2.5); } /* base 0,0 */
.ocon02__eyebrow.ocon02__eyebrow--catering { margin-top: calc(var(--px) * -1.5); margin-bottom: calc(var(--px) * 1.5); } /* base 0,0 */
/* /INK:AUTO ocon02 END */

@media (max-width:599px) {
  .ocon02_iner {
    padding-top: 10.6667vw;
    padding-bottom: 10.6667vw;
    padding-inline: 5.3333vw;
    gap: 8.5333vw;
  }
  .ocon02__row--expo,
  .ocon02__row--catering {
    gap: 1.6vw;
  }
  .ocon02__row--expo {
    flex-direction: column;
  }
  .ocon02__row--catering {
    flex-direction: column-reverse;
    margin-left: 0;
  }
  .ocon02__card {
    width: 100%;
    align-self: auto;
    padding-inline: 8.5333vw;
  }
  .ocon02__card--expo,
  .ocon02__card--catering {
    padding-top: 8.5333vw;
    padding-bottom: 8.5333vw;
    margin-block: 0;
  }
  .ocon02__photo {
    width: 100%;
  }
  .ocon02__heading {
    padding-bottom: 4.2667vw;
    padding-inline: 0;
  }
  .ocon02__eyebrow.ocon02__eyebrow--expo,
  .ocon02__eyebrow.ocon02__eyebrow--catering {
    margin-block: 0;
  }
  .ocon02__title--expo {
    margin-top: 2.1333vw;
  }
  .ocon02__title--catering {
    margin-top: 1.6vw;
  }
  .ocon02__title--expo,
  .ocon02__title--catering {
    margin-bottom: 0;
  }
  .ocon02__body,
  .ocon02__card--expo .ocon02__body {
    margin-top: 5.3333vw;
    padding-left: 0;
    padding-bottom: 0;
  }
  .ocon02__lead,
  .ocon02__card--expo .ocon02__lead {
    margin-block: 0;
    padding-left: 0;
  }
  .ocon02__desc--expo {
    margin-top: 3.2vw;
  }
  .ocon02__desc--catering {
    margin-top: 4.2667vw;
    padding-left: 0;
  }
  .ocon02__desc--expo,
  .ocon02__desc--catering {
    margin-bottom: 0;
  }
  .ocon02__card,
  .ocon02__photo {
    border-radius: 5.3333vw;
    box-shadow: 0 1.44vw 3.36vw rgb(0 0 0 / 0.16);
  }
}

/* /merge-build:ocon02 */
/* merge-build:ocon03 */
.ocon03 {
    padding-block: calc(var(--px)*138) calc(var(--px)*148);
    background: #fff;

    & .ocon03__heading, & .ocon03__item { padding-bottom: calc(var(--px)*6.02); }
    & .ocon03__arrow.swiper-button-disabled { opacity: 1; }

    & :where(.ocon03__title) {
        margin-top: calc(var(--px)*36);
    }

    & :where(.ocon03__description) {
        margin-top: calc(var(--px)*18);
    }

    & .ocon03__carousel {
        width: calc(var(--px)*1404);
        margin-top: calc(var(--px)*53.96);
    }

    & .ocon03__swiper {
        width: calc(var(--px)*1242);
    }

    & :where(.ocon03__subject) {
        margin-top: calc(var(--px)*18.01);
        text-align: center;
        transition: color .25s ease-out;
    }

    & .ocon03__thumbnail { overflow: hidden; }
    & .ocon03__thumbnail img { transition: transform .35s ease-out; }

    & .ocon03__arrow {
        top: calc(var(--px)*108);
        z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 — DOM 뒤 형제라도 z-index:auto 면 슬라이드 밑으로 깔린다 */
        padding: calc(var(--px)*12.5) calc(var(--px)*10.5);
        border: 0;
        border-radius: 50%;
        background: #c6c6c6;
        transition: background-color .25s ease-out, box-shadow .25s ease-out;
    }

    & .ocon03__arrow--prev { left: 0; }
    & .ocon03__arrow--next { right: 0; }

    & .ocon03__arrow:focus-visible { background-color: #009e5a; }
}

@media (hover: hover) {
    .ocon03__item:hover .ocon03__thumbnail img { transform: scale(1.06); }
    .ocon03__item:hover .ocon03__subject { color: #009e5a; }
    .ocon03__arrow:hover { background-color: #009e5a; box-shadow: 0 4px 16px rgb(0 158 90 / .28); }
}

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

.ocon03__arrow-icon {
    width: calc(var(--px)*22);
    aspect-ratio: 22 / 18;
}
/* /IMG:AUTO ocon03 END */

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

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

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

.ocon03__description,
.ocon03__swiper {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.65;
    color: #101111;
}
/* /FONT:AUTO ocon03 END */

/* INK:AUTO ocon03 */
.ocon03__title { margin-top: calc(var(--px) * 29.4); margin-bottom: calc(var(--px) * -5.59); } /* base 36,0 */
.ocon03__description { margin-top: calc(var(--px) * 11.98); margin-bottom: calc(var(--px) * -6.02); } /* base 18,0 */
.ocon03__subject { margin-top: calc(var(--px) * 11.99); margin-bottom: calc(var(--px) * -6.02); } /* base 18.01,0 */
.ocon03__eyebrow { margin-top: calc(var(--px) * -2.5); margin-bottom: calc(var(--px) * -2.5); } /* base 0,0 */
/* /INK:AUTO ocon03 END */


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

        & .ocon03__heading, & .ocon03__item { padding-bottom: 0; }

        & .ocon03__carousel {
            width: 100%;
            margin-top: 8.5333vw;
        }

        & .ocon03__swiper { width: 100%; }

        & .ocon03__arrow {
            top: 28.2667vw;
            padding: 2.1333vw 1.6vw;
        }

        /* 풀폭이라 화살표가 썸네일 위로 올라온다 — 화면 변에 딱 붙지 않게 안쪽으로 */
        & .ocon03__arrow--prev { left: 3.2vw; }
        & .ocon03__arrow--next { right: 3.2vw; }
    }

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

    .ocon03__title {
        margin-top: 5.3333vw;
        margin-bottom: 0;
    }

    .ocon03__description,
    .ocon03__subject {
        margin-top: 3.2vw;
        margin-bottom: 0;
    }

    .ocon03__thumbnail { width: 100%; }

    .ocon03__arrow-icon { width: 3.2vw; }
}

/* /merge-build:ocon03 */
/* merge-build:ocon04 */
/* 모바일 인계: guide-item 3열 grid → 1열 column, steps 4열 → 2열 wrap */
.ocon04 {
    padding-block: calc(var(--px)*50) calc(var(--px)*97);
    background: #fff;

    & .ocon04__panels {
        gap: calc(var(--px)*27);
        margin-top: calc(var(--px)*50);
    }

    & .ocon04__panel {
        width: calc(var(--px)*1242);
        border: 1px solid #a5bdb3;
        border-radius: calc(var(--px)*26);
        overflow: hidden;
        background: #fff;
    }

    /* 판 1px 보더 안쪽이 기준이라 질감 PNG 원점(판 외곽)에 맞추려 -1 */
    & .ocon04__usage-texture,
    & .ocon04__refund-texture {
        top: calc(var(--px)*-1);
        left: calc(var(--px)*-1);
    }

    & .ocon04__panel-header {
        padding-left: calc(var(--px)*115);
        background: #eaf1ee;
    }

    & .ocon04__guide-list {
        gap: calc(var(--px)*44);
        padding: calc(var(--px)*56) 0 calc(var(--px)*60) calc(var(--px)*115);
    }

    & .ocon04__guide-item {
        display: grid;
        grid-template-columns: calc(var(--px)*40) calc(var(--px)*155) 1fr;
        align-items: start;
    }

    & .ocon04__refund { padding: calc(var(--px)*50) 0 calc(var(--px)*54); }

    & .ocon04__steps { gap: calc(var(--px)*10); }

    & .ocon04__step {
        width: calc(var(--px)*211);
        padding: calc(var(--px)*27) 0 calc(var(--px)*32);
        border: 1px solid #e0e9e5;
        border-radius: calc(var(--px)*13);
        background: #fff;
    }

    & .ocon04__step-circle {
        width: calc(var(--px)*57);
        aspect-ratio: 1;
        border: 1px solid #e0e9e5;
        border-radius: 50%;
        background: #fff;
    }
}

/* INK:AUTO 가 같은 명시도로 덮도록 세로 base 간격은 중첩 밖 단일 클래스로 둔다 */
.ocon04__title { margin-top: calc(var(--px)*38); }
.ocon04__description { margin-top: calc(var(--px)*24); }
.ocon04__panel-title { margin-block: calc(var(--px)*55) calc(var(--px)*36); }
.ocon04__step-when { margin-top: calc(var(--px)*16); }
.ocon04__step-refund { margin-top: calc(var(--px)*7); }
.ocon04__notice { margin-top: calc(var(--px)*33); }

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

.ocon04__refund-texture {
    width: calc(var(--px)*1242);
    aspect-ratio: 1242 / 473;
}
/* /IMG:AUTO ocon04 END */

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

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

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

.ocon04__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.47;
    color: #101111;
}

.ocon04__panel-title {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.3; /* OVR */
    color: #101111;
}

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

.ocon04__guide-subject,
.ocon04__step-refund {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.3; /* OVR */
    color: #101111;
}

.ocon04__guide-text,
.ocon04__step-when {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.5;
    color: #101111;
}

.ocon04__step-circle {
    font-family: var(--font-poppins);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1; /* OVR */
    text-align: center;
    color: #a5bdb3;
}

.ocon04__notice {
    font-family: var(--font-pretendard);
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.24;
    text-align: center;
    color: #838a87;
}
/* /FONT:AUTO ocon04 END */

/* INK:AUTO ocon04 */
.ocon04__title { margin-top: calc(var(--px) * 31); margin-bottom: calc(var(--px) * -7); } /* base 38,0 */
.ocon04__guide-text { margin-top: calc(var(--px) * -4.5); margin-bottom: calc(var(--px) * -4.5); } /* base 0,0 */
.ocon04__step-when { margin-top: calc(var(--px) * 11.5); margin-bottom: calc(var(--px) * -4.5); } /* base 16,0 */
.ocon04__panel-title { margin-top: calc(var(--px) * 50.85); margin-bottom: calc(var(--px) * 31.85); } /* base 55,36 */
.ocon04__description { margin-top: calc(var(--px) * 19.51); margin-bottom: calc(var(--px) * -2.48); } /* base 24,0 */
.ocon04__guide-subject { margin-top: calc(var(--px) * -3.2); margin-bottom: calc(var(--px) * -3.19); } /* base 0,0 */
.ocon04__step-refund { margin-top: calc(var(--px) * 3.8); margin-bottom: calc(var(--px) * -3.19); } /* base 7,0 */
.ocon04__guide-number.ocon04__guide-number--01 { margin-top: calc(var(--px) * -2); margin-bottom: calc(var(--px) * -3); } /* base 0,0 */
.ocon04__notice { margin-top: calc(var(--px) * 30.7); margin-bottom: calc(var(--px) * -2.28); } /* base 33,0 */
.ocon04__guide-number.ocon04__guide-number--02 { margin-top: calc(var(--px) * -1); margin-bottom: calc(var(--px) * -3); } /* base 0,0 */
.ocon04__eyebrow { margin-top: calc(var(--px) * -2.5); margin-bottom: calc(var(--px) * -1.5); } /* base 0,0 */
.ocon04__guide-number.ocon04__guide-number--03 { margin-top: calc(var(--px) * -1); margin-bottom: calc(var(--px) * -2); } /* base 0,0 */
/* /INK:AUTO ocon04 END */

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

        & .ocon04__panels {
            gap: 4.2667vw;
            margin-top: 8.5333vw;
        }

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

        & .ocon04__usage-texture,
        & .ocon04__refund-texture {
            top: -1px;
            left: -1px;
            width: 100%;
        }

        & .ocon04__panel-header {
            justify-content: center;
            padding-inline: 4.2667vw;
        }

        & .ocon04__panel-title { margin-block: 8.5333vw 5.3333vw; }

        & .ocon04__guide-list {
            gap: 6.4vw;
            padding: 8.5333vw 4.2667vw;
        }

        & .ocon04__guide-item {
            grid-template-columns: auto 1fr;
            grid-template-areas: "num subj" "text text";
            column-gap: 2.1333vw;
            row-gap: 2.1333vw;
        }

        & .ocon04__guide-number { grid-area: num; }
        & .ocon04__guide-subject { grid-area: subj; }
        & .ocon04__guide-text { grid-area: text; }

        & .ocon04__guide-number,
        & .ocon04__guide-subject,
        & .ocon04__guide-text { margin-block: 0; }

        & .ocon04__refund { padding: 8.5333vw 4.2667vw; }

        & .ocon04__steps {
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            gap: 1.6vw;
        }

        & .ocon04__step {
            width: calc((100% - 1.6vw) / 2);
            padding: 4.2667vw 0 5.3333vw;
            border-radius: 2.1333vw;
        }

        & .ocon04__step-circle { width: 8.5333vw; }
        & .ocon04__step-when { margin-block: 2.1333vw 0; }
        & .ocon04__step-refund { margin-block: 1.0667vw 0; }

        & .ocon04__eyebrow { margin-block: 0; }
        & .ocon04__title { margin-block: 6.4vw 0; }
        & .ocon04__description { margin-block: 4.2667vw 0; }
        & .ocon04__notice { margin-block: 5.3333vw 0; }
    }
}

/* /merge-build:ocon04 */
/* merge-build:ocon05 */
.ocon05 {
    background: #fff;
    overflow: visible;
    padding-top: calc(var(--px)*136);
    padding-bottom: calc(var(--px)*165);

    & .ocon05__heading { gap: calc(var(--px)*24); padding-bottom: calc(var(--px)*4.48); }

    & .ocon05__form {
        width: calc(var(--px)*1240);
        margin-top: calc(var(--px)*34.49);
        padding: calc(var(--px)*62.81) calc(var(--px)*120) calc(var(--px)*44);
        background: #fff;
        border-radius: calc(var(--px)*40);
    }
    & .ocon05__group { border: 0; padding: 0; margin: 0; min-width: 0; }
    & .ocon05__group--order { margin-top: calc(var(--px)*46.83); }
    & .ocon05__legend {
        padding: 0 calc(var(--px)*28);
        position: static;
        text-indent: 0;
        overflow: visible;
        &::before {
            content: '';
            display: inline-block;
            width: calc(var(--px)*15);
            padding-bottom: calc(var(--px)*15);
            margin-right: calc(var(--px)*10);
            border-radius: 50%;
            background: #009e5a;
        }
    }
    & .ocon05__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--px)*5.48) calc(var(--px)*6); }
    & .ocon05__field {
        padding: calc(var(--px)*8) calc(var(--px)*52);
        border: 1px solid #bfd1c9;
        border-radius: calc(var(--px)*13);
        background: #fdfdfb;
        gap: calc(var(--px)*20);
        min-width: 0;
    }
    & .ocon05__field--wide { grid-column: 1 / -1; }
    & .ocon05__field--picker { padding-right: calc(var(--px)*100); gap: calc(var(--px)*12); }
    & .ocon05__field--message { padding-block: calc(var(--px)*16); }
    & .ocon05__label { flex-shrink: 0; }
    & .ocon05__input {
        width: 0;
        min-width: 0;
        flex: 1 1 0;
        border: 0;
        padding: 0;
        background: transparent;
        font-family: var(--font-pretendard);
        font-size: var(--bodyM);
        line-height: 1.4;
        color: #111;
    }
    & input.ocon05__input { height: 42px; min-height: 42px; }
    & .ocon05__input--date { padding-left: calc(var(--px)*65); }
    & .ocon05__input--time { padding-left: calc(var(--px)*49); }
    & .ocon05__input--message { resize: vertical; min-height: calc(var(--px)*101); }
    & .ocon05__picker { flex-shrink: 0; width: calc(var(--px)*77); padding: calc(var(--px)*5) 0; background: #bfd1c9; border-radius: 50vw; border: 0; cursor: pointer; }
    @media (hover: hover) {
        & .ocon05__picker:hover { background-color: #009e5a; }
    }
    & .ocon05__consent-row { padding-right: calc(var(--px)*44); margin-top: calc(var(--px)*25.53); }
    & .ocon05__consent { gap: calc(var(--px)*12); cursor: pointer; }
    & .ocon05__checkbox { appearance: none; width: calc(var(--px)*24); margin: 0; padding: calc(var(--px)*4); border: 1px solid #a5bdb3; border-radius: 50%; background: #fff; transition: border-color .2s ease-out; }
    & .ocon05__checkbox:checked { border-color: #009e5a; }
    & .ocon05__checkbox::after { content: ''; display: block; padding-bottom: 100%; border-radius: 50%; transition: background-color .2s ease-out; }
    & .ocon05__checkbox:checked::after { background: #009e5a; }
    & .ocon05__consent-text { text-decoration: underline; text-underline-offset: 3px; }
    & .ocon05__consent-view { flex-shrink: 0; padding: calc(var(--px)*4) calc(var(--px)*12); border: 1px solid #009e5a; border-radius: 50vw; background: #fff; font: inherit; font-size: var(--bodyS); font-weight: 500; line-height: 1.2; color: #009e5a; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out; }
    @media (hover: hover) {
        & .ocon05__consent-view:hover { background-color: #009e5a; color: #fff; }
    }
    & .ocon05__consent-view:focus-visible { background-color: #009e5a; color: #fff; }
    & .ocon05__actions { margin-top: calc(var(--px)*9.82); }
    /* transform 은 GSAP fadeUp 소유 — transition-property 에 넣지 않는다 */
    & .ocon05__submit { border: 0; border-radius: 50vw; padding: calc(var(--px)*12) calc(var(--px)*26) calc(var(--px)*12) calc(var(--px)*54); gap: calc(var(--px)*30); background: #009e5a; cursor: pointer; transition: background-color .25s ease-out; }
    & .ocon05__arrow { width: calc(var(--px)*43); padding-block: calc(var(--px)*6); background: #fff; border-radius: 50%; }
    @media (hover: hover) {
        & .ocon05__submit:hover { background-color: color-mix(in srgb, #009e5a 90%, black); }
    }
}

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

.ocon05__clock {
    width: calc(var(--px)*28);
    aspect-ratio: 28 / 28;
}
/* /IMG:AUTO ocon05 END */

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

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

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

.ocon05__intro {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.47;
    color: #101111;
}

.ocon05__group,
.ocon05__group.ocon05__group--order {
    font-family: var(--font-pretendard);
}

.ocon05__legend {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2; /* OVR */
    color: #101111;
}

.ocon05__fields {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.3; /* OVR */
    color: #020202;
}

.ocon05__consent-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2; /* OVR */
    color: #020202;
}

.ocon05__submit {
    line-height: 1.2;
}

.ocon05__submit-text {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: center;
    color: #ffffff;
}

.ocon05__arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #009e5a;
}
/* /FONT:AUTO ocon05 END */

/* INK:AUTO ocon05 */
.ocon05__title { margin-top: calc(var(--px) * 8); margin-bottom: calc(var(--px) * -5); } /* base 13,0 */
.ocon05__intro { margin-top: calc(var(--px) * -4.49); margin-bottom: calc(var(--px) * -4.48); } /* base 0,0 */
.ocon05__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.ocon05__legend { margin-top: calc(var(--px) * -3.2); margin-bottom: calc(var(--px) * 16.81); } /* base 0,20 */
.ocon05__consent-text { margin-top: calc(var(--px) * -2.1); margin-bottom: calc(var(--px) * -2.09); } /* base 0,0 */
/* /INK:AUTO ocon05 END */


@media (max-width: 599px) {
    .ocon05 {
        padding-top: 10.6667vw;
        padding-bottom: 16vw;

        & .ocon05__heading { gap: 4.2667vw; padding-inline: 5vw; padding-bottom: 0; }

        & .ocon05__form {
            width: 90vw;
            margin-top: 5.3333vw;
            padding: 10.6667vw 4.2667vw 6.4vw;
            border-radius: 6.4vw;
        }
        & .ocon05__group--order { margin-top: 8.5333vw; }
        & .ocon05__legend {
            padding: 0;
            &::before { width: 2.1333vw; padding-bottom: 2.1333vw; margin-right: 1.6vw; }
        }
        & .ocon05__fields { grid-template-columns: 1fr; gap: 2.1333vw; }
        & .ocon05__field {
            padding: 2.1333vw 4.2667vw;
            border-radius: 2.1333vw;
            gap: 3.2vw;
        }
        & .ocon05__field--picker { padding-right: 4.2667vw; gap: 2.1333vw; }
        & .ocon05__field--message { padding-block: 2.1333vw; }
        & .ocon05__input--date, & .ocon05__input--time { padding-left: 0; }
        & .ocon05__input--message { min-height: 14.9333vw; }
        & .ocon05__picker { width: 12.8vw; padding: 1.0667vw 0; }
        & .ocon05__calendar { width: 4.2667vw; }
        & .ocon05__clock { width: 4.2667vw; }
        & .ocon05__consent-row { padding-right: 0; margin-top: 4.2667vw; justify-content: center; }
        & .ocon05__consent { gap: 2.1333vw; }
        & .ocon05__checkbox { width: 4.2667vw; padding: 0.5333vw; }
        & .ocon05__consent-view { padding: 1.0667vw 3.2vw; }
        & .ocon05__actions { margin-top: 1.6vw; }
        & .ocon05__submit {
            width: 60vw;
            justify-content: space-between;
            padding: 2.1333vw 4.2667vw 2.1333vw 8.5333vw;
            gap: 5.3333vw;
        }
        /* 높이를 padding+line-height 에 맡기면 모바일 폰트 재매핑에 타원이 된다 */
        & .ocon05__arrow { width: 10.6667vw; aspect-ratio: 1; padding-block: 0; }
    }

    .ocon05__title { margin-top: 1.28vw; margin-bottom: -0.8vw; }
    .ocon05__intro { margin-top: -0.7184vw; margin-bottom: -0.7168vw; }
    .ocon05__eyebrow { margin-top: -0.688vw; margin-bottom: -0.5264vw; }
    .ocon05__legend { margin-top: -0.512vw; margin-bottom: 3.2vw; }
    .ocon05__consent-text { margin-top: -0.336vw; margin-bottom: -0.3344vw; }
}

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