@import "token.css";

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../fonts/SpoqaHanSansNeo-Regular.otf') format('opentype'), /* OTF 파일 */
    url('../fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype'); /* TTF 파일 */
    /*url('./fonts/BrandFont-Bold.woff2') format('woff2'), !* 최신 브라우저 최적화 포맷 *!*/
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 폰트 로딩 중에도 텍스트가 보이도록 설정 */
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../fonts/SpoqaHanSansNeo-Bold.otf') format('opentype'); /* OTF 파일 */
    /*url('./fonts/BrandFont-Bold.woff2') format('woff2'), !* 최신 브라우저 최적화 포맷 *!*/
    /*url('./fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype'); !* TTF 파일 *!*/
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* 폰트 로딩 중에도 텍스트가 보이도록 설정 */
}

@font-face {
    font-family: 'ZER01NE';
    src: url('../fonts/zer01neotsb.otf') format('opentype'), /* OTF 파일 */
    url('../fonts/zer01neotsb.ttf') format('truetype'); /* TTF 파일 */
    /*src: url('./fonts/BrandFont-Bold.woff2') format('woff2'), !* 최신 브라우저 최적화 포맷 *!*/
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 폰트 로딩 중에도 텍스트가 보이도록 설정 */
}

@font-face {
    font-family: 'ZER01NE OTF Alt';
    src: url('../fonts/zer01neotaltsb.otf') format('opentype'), /* OTF 파일 */
    url('../fonts/zer01neotaltsb.ttf') format('truetype'); /* TTF 파일 */
    /*src: url('./fonts/BrandFont-Bold.woff2') format('woff2'), !* 최신 브라우저 최적화 포맷 *!*/
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 폰트 로딩 중에도 텍스트가 보이도록 설정 */
}



/* 기본 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol, li {
    list-style: none;
}

img {
    border-style: none; /* 이미지 테두리 제거 */
}

html, body {
    height: 100%;
    -webkit-text-size-adjust: 100%; /* iOS에서 폰트 크기 자동 조정 방지 */
    scroll-behavior: auto;
}

@media all and (min-width: 900px) and (max-width: 1399px) {
    html, body {
        width: 100%;
        overflow-x: inherit;
    }
}

body.is-locked {
    overflow: hidden !important;
    touch-action: none; /* 모바일 추가 방어 */
    height: inherit !important;
}

hr {
    height: 0; /* 기본 높이 제거 */
    color: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

button, input, optgroup, select, textarea {
    font-family: inherit; /* 폰트 상속 */
    font-size: 100%;
    margin: 0; /* 기본 margin 제거 */
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button; /* iOS 버튼 스타일 통일 */
}

textarea {
    overflow: auto; /* 스크롤 자동 */
}

[hidden] {
    display: none; /* hidden 속성 통일 */
}
/* 공통 헤더 스타일 수정 */
.zer01ne .header.sub {
    background: var(--color-bg-light);
}

.zer01ne .header.sub .header-inner {
    max-width: 1240px;
}

@media (max-width: 1400px) {
    .zer01ne .header.sub .header-inner {
        max-width: calc(100% - 64px);
    }
}

@media (max-width: 1239px) {
    /*.zer01ne .header-renewel .header-flexBox {*/
    /*    height: 60px;*/
    /*}*/
}

@media (max-width: 719px) {
    .zer01ne .header.sub .header-inner {
        max-width: calc(100% - 40px);
        /*height: 60px;*/
    }
}

.zer01ne .header.sub .header__logo a {
    position: relative;
    display: block;
    height: 100%;
    -webkit-mask-image:  url(../../assets/images/common/hyundai_logo_white.svg);
    mask-image:  url(../../assets/images/common/hyundai_logo_white.svg);

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: none;
    background-color: var(--color-text-ongray-secondary);
    z-index: 1;
}

.zer01ne .header.sub .header__gnbOpen {
    -webkit-mask-image: url(../../assets/images/common/ico_gnb_menuBtn_white.svg);
    mask-image: url(../../assets/images/common/ico_gnb_menuBtn_white.svg);

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: none;
    background-color: var(--color-text-ongray-secondary);
}


.zer01ne .header.sub .header__lang a {
    color: var(--color-text-ongray-secondary);
}

/* 디테일 */
/* 콘텐츠 간격 */
/*.zer01ne .hmg-story-container .full-ly-container {*/
/*    margin-top: 150px;*/
/*}*/

/*@media  (max-width: 1240px) {*/
/*    . .hmg-story-container .full-ly-container {*/
/*        margin-top: 130px;*/
/*    }*/
/*}*/

/*@media  (max-width: 1024px) {*/
/*    .zer01ne .hmg-story-container .full-ly-container {*/
/*        margin-top: 140px;*/
/*    }*/
/*}*/

.zer01ne .container__inner {
    padding: 0;
}
.zer01ne .shadow-box {
    padding: var(--page-padding-top) 0 var(--page-padding-bottom) 0 !important;
    box-shadow: none;
    margin-top: 0;
}

.zer01ne .component-key-visual {
    max-width: var(--page-max-width);
    width: 100%;
    margin: 0 auto;
}

/*@media (max-width: 599px) {*/
/*    .zer01ne .component-key-visual .s-main-poster__img-ms {*/
/*        display: block;*/
/*    }*/
/*    .zer01ne .component-key-visual .s-main-poster__img-ws {*/
/*        display: none;*/
/*    }*/
/*}*/


.zer01ne .component-key-visual .s-main-cont {
    display: flex;
    max-width: var(--page-max-width);
    padding: var(--detailhero-padding-top) var(--page-padding-x) var(--detailhero-padding-bottom) var(--page-padding-x);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--detailhero-content-gap);
    bottom: 0;
}

.zer01ne .component-summary,
.zer01ne .component-anchor,
.zer01ne .component-heading,
.zer01ne .component-sub,
.zer01ne .component-content,
.zer01ne .component-image,
.zer01ne .component-slide-image,
.zer01ne .component-video,
.zer01ne .component-audio {
    padding: var(--section-padding-y) var(--page-padding-x);
    width: 100%;
}

.zer01ne .component-etc {
    padding: var(--section-padding-y) var(--page-padding-x);
    margin: 0 auto;
    width: 100%;
}

.zer01ne .component-key-visual .s-main-cont .head-title {
    margin-top: 0;
    color: var(--color-text-ondark-primary);
    /* Display/SpoqaHanSansNeo/middle/bold */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-middle, 64px);
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 73.6px */
    letter-spacing: var(--font-lespacing-ls-300);
    text-transform: capitalize;
}

.zer01ne .component-key-visual .s-main-cont .head-title__info {
    margin-top: 0;
}

.zer01ne .component-key-visual .s-main-cont .head-title__info .head-title__list {
    display: flex;
    align-items: center;
    align-content: center;
    gap: var(--detailhero-meta-item-list-gap);
    align-self: stretch;
    flex-wrap: wrap;
}

.zer01ne .component-key-visual .s-main-cont .head-title__info .head-title__list li {
    color: var(--color-text-ondark-primary);
    /* Body/middle/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .component-key-visual .s-main-cont .head-title__info .head-title__list li:before {
    background-color: var(--color-text-ondark-primary);
}

.zer01ne .component-key-visual .s-main-cont .head-title__info .head-title__list li.writer {
    color: var(--color-text-link-secondary);
}

.zer01ne .component-key-visual .s-main-cont .head-down {
    margin-top: var(--spacing-sp-16);;
}

.zer01ne .component-key-visual .s-main-cont .head-down .down-btn {
    height: var(--button-m-size);
    padding: var(--button-m-padding-y) var(--button-m-padding-x);
    border-radius: var(--borderradius--pill);
    border: var(--borderwidth--1) solid var(--color-border-ondark-subtle-alpha);
}

.zer01ne .component-key-visual .s-main-cont .head-down .down-btn:hover {
    border: var(--borderwidth--1) solid var(--color-border-ondark-subtle);
}

.zer01ne .component-key-visual .s-main-cont .head-down .down-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--button-m-gap);

    color: var(--color-text-ondark-primary);

    /* Button/Secondary */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--body-middle, 15px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 22.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .component-key-visual .s-main-cont .head-down .down-btn span:after {
    content: '';
    width: 24px;
    height: 24px;
    background: url('../images/icon-down.svg') no-repeat center;
}

.zer01ne .s-summary__txt {
    padding-top: var(--detailtext-header-padding-top);
    color: var(--color-text-onlight-primary);
    /* Heading/MD/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-middle, 36px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 50.4px */
    letter-spacing: var(--font-lespacing-ls-300);
}



.zer01ne .page-title {
    padding-top: var(--detailtext-header-padding-top);
    color: var(--color-text-onlight-primary);
    /* Heading/MD/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-middle, 36px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 50.4px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .s-sub-title {
    padding-top: var(--detailtext-header-padding-top);
    color: var(--color-text-onlight-primary);
    /* Heading/SM/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-small, 28px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 39.2px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .s-cont__txt  {
    padding-bottom: var(--detailtext-body-padding-bottom);
    color: var(--color-text-onlight-primary);
    /* Body/large/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large, 20px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.zer01ne .s-cont__txt p {
    margin-bottom: 0;
}



.zer01ne .component-anchor  .sticky-area {
    /*padding: var(--spacing-sp-24) 0;*/
    background: var(--color-bg-light);
    /*transition: none;*/
}

.zer01ne .component-anchor.is-sticky  .sticky-area {
    /*top: 150px;*/
    border-bottom: var(--borderwidth--1) solid var(--color-border-ongray-subtle);
}

/*@media  (max-width: 1240px) {*/
/*    .zer01ne .component-anchor.is-sticky  .sticky-area {*/
/*        top: 130px;*/
/*    }*/
/*}*/

/*@media  (max-width: 1024px) {*/
/*    .zer01ne .component-anchor.is-sticky  .sticky-area {*/
/*        top: 140px;*/
/*    }*/
/*}*/

/*.zer01ne .component-anchor .s__inner  {*/
/*    max-width: var(--detailtext-max-width);*/
/*    padding: var(--spacing-sp-24) var(--detailtext-padding-x);*/
/*}*/

.zer01ne .component-anchor .s-anchor__list {
    border-left: var(--borderwidth--4 solid var(--color-border-onlight-muted));
}

.zer01ne .component-anchor .s-anchor__list a {
    color: var(--color-text-onlight-primary);
    /* Body/middle/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 14px);
    font-style: normal;
    letter-spacing: var(--font-lespacing-ls-300);
}


.zer01ne .component-key-visual .s-main-cont .s__inner {
    max-width: inherit;
    width: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--detailhero-content-gap);
    padding: 0;
}

.zer01ne .component-key-visual .s-main-poster:before {
    background: linear-gradient(180deg, var(--color-black-0, rgba(0, 0, 0, 0.00)) 0%, var(--color-black-80) 100%);
}


.zer01ne .component-anchor .s__inner {
    max-width: var(--detailtext-max-width);
    margin: 0 auto;
}

/*.zer01ne .component-anchor.is-sticky  .s__inner {*/
/*    max-width: var(--section-max-width);*/
/*}*/


.zer01ne .component-summary .s__inner,
.zer01ne .component-heading .s__inner,
.zer01ne .component-sub .s__inner,
.zer01ne .component-content .s__inner  {
    max-width: var(--detailtext-max-width);
    padding: 0 var(--detailtext-padding-x);
    margin: 0 auto;
}

/* 이미지, 슬라이드, 동영상, 오디오, 작성자 용 */
.zer01ne .component-image .s__inner,
.zer01ne .component-slide-image .s__inner,
.zer01ne .component-video .s__inner,
.zer01ne .component-audio .s__inner {
    max-width: var(--section-max-width);
    max-height: 100%;
    height: auto;
    padding: 0 var(--section-padding-x);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sp-8);
    align-self: stretch;
}

.zer01ne .component-slide-image .s__inner {
    width: inherit;
}

.zer01ne .component-slide-image .s__inner .swiper {
    width: 100%;
    height: inherit;
    margin-top: 0;
    overflow: hidden;
    padding-bottom: var(--spacing-sp-24);
}

.zer01ne .component-slide-image .s__inner .swiper .swiper-button-prev {
    left: 40px;
}

.zer01ne .component-slide-image .s__inner .swiper .swiper-button-next {
    right: 40px;
}

.zer01ne .component-slide-image .s__inner .swiper .center-slide-btn {
    display: flex;
    width: 56px;
    height: 56px;
    padding: var(--spacing-sp-16);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-light);

    /* elevation-1 */
    box-shadow: 0 0 var(--shadow-elevation-1-blur) 0 var(--shadow-elevation-1-color);
}

@media  (max-width: 599px) {
    .zer01ne .component-slide-image .s__inner .swiper .center-slide-btn {
        width: 36px;
        height: 36px;
    }
}

.zer01ne .component-slide-image .s__inner .swiper .center-slide-btn::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    margin: 0;
    background: url(../images/s-arrow-icon.svg) no-repeat 50% 50%;
}

.zer01ne .s-slide-btn:before {
    width: 24px;
    height: 24px;
    background: url(../images/s-arrow-icon.svg) no-repeat 50% 50%;
}

@media  (max-width: 599px) {
    .zer01ne .component-slide-image .s__inner .swiper .center-slide-btn::before {
        width: 20px;
        height: 20px;
    }

    .zer01ne .s-slide-btn:before {
        width: 20px;
        height: 20px;
    }
}

.zer01ne .component-slide-image .s__inner .swiper .s-slide__text {
    margin-top: 8px;
    width: 100%;
    color: var(--color-text-onlight-secondary);
    /* Caption/SM/Regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--caption-small, 13px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 140%; /* 18.2px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.zer01ne .component-slide-image .s__inner .swiper .swiper-scrollbar {
    display: flex;
    height: 6px;
    align-items: center;
    border-radius: var(--borderradius--10);
    background: var(--color-bg-dark-subtle-alpha);
}


.zer01ne .component-image .img img {
    max-width: 100%;
    /*max-height: var(--figure-max-height);*/
    /*aspect-ratio: 16/9;*/
    height: auto;
}

.zer01ne .component-video .txt {
    margin-top: 8px;
    width: 100%;
    color: var(--color-text-onlight-secondary);
    /* Caption/SM/Regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--caption-small, 13px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 140%; /* 18.2px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.zer01ne .vjs-control-bar .vjs-paused,
.zer01ne .vjs-control-bar .vjs-play-control {
    display: flex;
    padding: var(--floating-l-padding, 32px);
    justify-content: center;
    align-items: center;
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-gray);
    width: auto !important;
    height: auto !important;
    margin: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -200%);
}

.zer01ne .vjs-control-bar .vjs-paused:before,
.zer01ne .vjs-control-bar .vjs-play-control:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url('../images/icon-play.svg') no-repeat center;
}

.zer01ne .vjs-playing .vjs-control-bar .vjs-play-control {
    display: flex;
    padding: var(--floating-l-padding, 32px);
    justify-content: center;
    align-items: center;
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-gray);
    width: auto !important;
    height: auto !important;
}

.zer01ne .vjs-playing .vjs-control-bar .vjs-play-control:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url('../images/icon-stop.svg') no-repeat center;
}

@media (max-width: 599px) {
    .zer01ne .vjs-control-bar .vjs-paused:before,
    .zer01ne .vjs-control-bar .vjs-play-control:before {
        content: '';
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
    }

    .zer01ne .vjs-playing .vjs-control-bar .vjs-play-control:before {
        content: '';
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
    }
}


/* 오디오 */
.audio-player {
    max-width: 1200px;
    width: 100%;
    background: var(--color-bg-dark);
    display: flex;
    padding: var(--audio-padding-y) var(--audio-padding-x);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--audio-header-gap);
    align-self: stretch;
}

.audio-player .audio-name {
    color: var(--color-text-ondark-primary);
    /* Heading/XS/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-xsmall, 23px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 32.2px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.audio-player .controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sp-8);
    align-self: stretch;
}
.audio-player .play-btn {
    display: flex;
    width: var(--button-l-size);
    height: var(--button-l-size);
    justify-content: center;
    align-items: center;
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-dark-subtle);
}

/* ▶ 기본 상태 */
.audio-player .play-btn::before {
    content: "";
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../images/a-play-btn.svg');
    mask-image: url('../images/a-play-btn.svg');

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-icon-ondark-primary);
}

/* ⏸ active 상태 */
.audio-player .play-btn.active::before {
    content: "";
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../images/a-stop-btn.svg');
    mask-image: url('../images/a-stop-btn.svg');

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-icon-ondark-primary);
}

@media (max-width: 599px) {
    .audio-player .play-btn {
        width: var(--button-s-size);
        height: var(--button-s-size);
    }

    .audio-player .play-btn::before {
        width: 16px;
        height: 16px;
    }
    .audio-player .play-btn.active::before {
        width: 16px;
        height: 16px;
    }
}

.audio-player .mute-btn {
    display: flex;
    width: var(--button-s-size);
    height: var(--button-s-size);
    justify-content: center;
    align-items: center;
    background: inherit;
}

/* 🔊 기본 상태 */
.audio-player .mute-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('../images/a-vol-on-btn.svg');

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-icon-ondark-primary);
}

/* 🔇 active 상태 */
.audio-player .mute-btn.active::before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('../images/a-vol-off-btn.svg');

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-icon-ondark-primary);
}

.audio-player .progress-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.audio-player .progress {
    width: 100%;
    height: 6px;
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-dark-subtle);
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
}

.audio-player .progress-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--borderradius--pill);
    background: var(--color-icon-ondark-primary);
    transition: background 0.3s ease;
}

/* 플레이바 핸들 */
/*.audio-player .progress-handle {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    border-radius: 50%;*/
/*    background: #0a5;*/
/*    display: none;*/
/*    pointer-events: none;*/
/*    transition: background 0.3s ease;*/
/*}*/
/* 마우스 오버 시 강조 */
/*.audio-player .progress:hover {*/
/*    background: #333;*/
/*}*/

/*.audio-player .progress:hover .progress-fill {*/
/*    background: #0c7; !* 조금 더 밝은 녹색 *!*/
/*}*/
/*.audio-player .progress:hover .progress-handle {*/
/*    display: block;*/
/*    background: #0c7;*/
/*}*/

.audio-player .time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-align: right;
    margin-top: 2px;
    color: #aaa;
    position: absolute;
    right: 0;
    bottom: -27px;
}

.audio-player .time span {
    color: var(--color-text-ondark-secondary);

    /* Caption/SM/Regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--caption-small, 13px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 140%; /* 18.2px */
    letter-spacing: var(--font-lespacing-ls-200);
}

/* 볼륨 컨트롤 */
.audio-player .volume-control {
    position: relative;
    display: flex;
    align-items: center;
}

.audio-player .volume-range {
    display: none;
    height: 8px;
    width: 0;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.3s ease, background 0.3s ease;
    margin-right: 5px;
    background: #222;
    border-radius: 4px;
}

.audio-player .volume-control:hover .volume-range {
    width: 80px;
    opacity: 1;
    background: #0a5;
}

.audio-player .volume-control:hover .volume-range::-webkit-slider-thumb {
    background: #0c7;
}

.audio-player .volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0a5;
    cursor: pointer;
}

.audio-player .volume-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0a5;
    cursor: pointer;
}



.zer01ne .component-etc .tags-block {
    margin-top: 0;
    display: flex;
    padding: var(--spacing-sp-48) 0;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sp-12);
}

.zer01ne .btn-tag {
    display: flex;
    max-width: var(--tag-max-width, 960px);
    min-height: var(--tag-min-height, 40px);
    padding: var(--tag-padding-y) var(--tag-padding-x);
    justify-content: center;
    align-items: center;

    /* Tag/middle */
    overflow: hidden;
    color: var(--color-text-onlight-tertiary);
    background: var(--color-bg-muted-subtle);
    text-overflow: ellipsis;

    /* Tag/middle */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .btn-tag:hover {
    background: var(--color-bg-gray);
}

/* 네비게이션 */
/* [GNB] 메인 컨테이너 */
.z1-gnb-wrap {
    position: fixed;
    top: 80px;
    left: 0;
    /*display: flex;*/
    /*justify-content: flex-start;*/
    /*align-items: center;*/
    width: 100%;
    height: var(--navigation-height, 70px);
    background: var(--color-bg-light);

    /* elevation-2 */
    box-shadow: 0 var(--shadow-elevation-2-y) var(--shadow-elevation-2-blur) 0 var(--shadow-elevation-2-color);
    transition: all 0.3s ease;

    z-index: 998;
}

.z1-gnb-wrap.no-shadow {
    box-shadow: none;
    border-bottom: var(--borderwidth--1) solid var(--color-border-ongray-subtle);
}

/*@media (max-width: 1240px) {*/
/*    .z1-gnb-wrap {*/
/*        top: 60px;*/
/*    }*/
/*}*/

@media (max-width: 1024px) {
    .z1-gnb-wrap {
        /*top: 60px;*/
        box-shadow: none;
        border-bottom: var( --borderwidth--1, 1px) solid var(--color-border-ongray);
    }
}

/* [PC 전용] 헤더 호버 시 전체 배경 확장 (768px 초과) */
@media (min-width: 1025px) {
    /*.z1-gnb-wrap::before {*/
    /*    content: '';*/
    /*    position: absolute;*/
    /*    top: 70px;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 0;*/
    /*    background-color: #ffffff;*/
    /*    border-bottom: 1px solid rgba(0, 0, 0, 0.05);*/
    /*    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);*/
    /*    transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1);*/
    /*    z-index: -1;*/
    /*}*/
    /*.z1-gnb-wrap:hover::before {*/
    /*    height: 450px; !* 드롭다운 판넬 높이 *!*/
    /*    border-top: var(--borderwidth--1) solid var(--color-border-onlight-muted);*/
    /*}*/

    .gnb-bg {
        content: '';
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
        transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
        z-index: -1; }

    /* 열릴 때는 딜레이 없이 즉시 확장 */
    .z1-gnb-wrap.is-open .gnb-bg {
        transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }
}

.z1-gnb-wrap .header-inner {
    /*width: var(--breakpoint);*/
    width: 1240px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

@media (max-width: 1376px)  {
    .z1-gnb-wrap .header-inner {
        max-width: calc(100% - 110px);
        width: auto;
    }
}

@media (max-width: 959px) {
    .z1-gnb-wrap .header-inner { max-width: calc(100% - 64px); }
}

@media (max-width: 719px) {
    .z1-gnb-wrap .header-inner { max-width: calc(100% - 40px); }
}


.z1-gnb-wrap .logo {
    display: flex;
    height: var(--navigation-height);
    margin-right: 64px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* [통합 NAV 리스트] */
.nav-list {
    display: flex;
    align-items: flex-start;
    gap: var(--navigation-navi-gap);
}

/* [PC 전용 스타일] (768px 초과) */
@media (min-width: 1025px) {
    .nav-item { position: relative;
        height: var(--navigation-height);
        /*padding: 0 var(--navigation-navi-padding-x);*/
        padding: 0 clamp(16px, 0.45vw + 11.4px, 20px);
        display: flex;
        align-items: center;
    }

    .nav-link {
        color: var(--color-text-onlight-primary);
        text-align: center;

        /* Navigation/GNB/regular */
        font-family: var(--font-family-ff-secondary);
        /*font-size: var(--body-large, 20px);*/
        font-size: clamp(14px, 0.45vw + 11.36px, 17px);
        font-style: normal;
        font-weight: var(--font-weight-fw-regular);
        line-height: 150%; /* 30px */
        letter-spacing: var(--font-lespacing-ls-200);
        text-transform: uppercase;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        gap: var(--spacing-sp-6);

    }

    /* 호버 시 하단 라인 */
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--color-border-onlight); /* 포인트 컬러 */
        transform: translateX(-50%);
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .nav-item:hover .nav-link {
        color: var(--color-border-onlight);
    }
    .nav-item:hover .nav-link::after { width: 100%; }

    /* PC 2뎁스 서브 메뉴 */
    .sub-menu {
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        width: 166px;
        display: flex;
        padding: var(--navigation-snb-padding-y, 40px) 0;
        flex-direction: column;
        align-items: center;
        gap: var(--navigation-snb-gap);
        align-self: stretch;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }
    .z1-gnb-wrap.is-open .sub-menu { opacity: 1; visibility: visible; }
    /* 한 메뉴 씩 보이게 하는 */
    /*.nav-list .nav-item:hover .sub-menu,*/
    /*.sub-menu:hover { opacity: 1; visibility: visible; }*/
    .sub-menu li {
        display: flex;
        padding: var(--navigation-item-padding-y) var(--navigation-item-padding-x);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sub-menu li a {
        color: var(--color-text-onlight-secondary);
        text-align: center;
        /* Navigation/SNB/regular */
        font-family: var(--font-family-ff-primary);
        font-size: var(--body-small, 16px);
        font-style: normal;
        font-weight: var(--font-weight-fw-regular);
        line-height: 150%; /* 24px */
        letter-spacing: var(--font-lespacing-ls-200);
        text-transform: capitalize;
        transition: text-shadow 0.2s ease, color 0.2s ease;
    }
    .sub-menu li a:hover {
        color: var(--color-border-onlight);
        text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;
    }
}

/* [MOBILE 전용 스타일] (768px 이하) */
@media (max-width: 1024px) {
    .z1-gnb-wrap { height: 80px; } /* 모바일 헤더 높이 */

    .z1-gnb-wrap .gnb-bg {
        display: none;
    }

    .nav-list {
        position: fixed;
        width: 100%;
        top: 140px;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        height: calc(100vh - 140px); /* 헤더 높이(140px) 제외한 나머지 뷰포트 */
        height: calc(100dvh - 140px); /* iOS Safari 주소창 포함한 동적 뷰포트 대응 */
        gap: var(--navigation-navi-gap);
        align-self: stretch;
        background: var(--color-bg-light);
        /* elevation-3 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 구버전 관성 스크롤 */
        scrollbar-gutter: auto;
        padding-right: 10px; /* 스크롤바와 컨텐츠 사이 간격 */
    }


    .nav-item {
        display: flex;
        padding: 0 var(--grid-margin);
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }
    .nav-item:last-child { border-bottom: none; }

    .nav-link {
        display: flex;
        height: var(--navigation-height);
        /*padding: 0 var(--navigation-navi-padding-x);*/
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sp-6);
        color: var(--color-text-onlight-primary);
        text-align: center;
        /* Navigation/GNB/regular */
        font-family: var(--font-family-ff-secondary);
        font-size: var(--body-large, 16px);
        font-style: normal;
        font-weight: var(--font-weight-fw-regular);
        line-height: 150%; /* 24px */
        letter-spacing: var(--font-lespacing-ls-200);
        text-transform: uppercase;
    }

    /* 모바일 2열 그리드 배치 */
    .sub-menu {
        display: flex;
        flex-wrap: wrap;
        padding: var(--navigation-snb-padding-y) 0;
        align-items: center;
        gap: var(--navigation-snb-gap);
    }
    .sub-menu li {
        display: flex;
        padding: var(--navigation-item-padding-y) var(--navigation-item-padding-x);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sub-menu li a {
        color: var(--color-text-onlight-secondary);
        text-align: center;
        /* Tag/Small */
        font-family: var(--font-family-ff-primary);
        font-size: var(--meta-small, 14px);
        font-style: normal;
        font-weight: var(--font-weight-fw-regular);
        line-height: 150%; /* 21px */
        letter-spacing: var(--font-lespacing-ls-200);
    }
}


/* [MOBILE TOGGLE] 화살표 버튼 */
.menu-toggle {
    display: none;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4005;
    border: none;
    border-radius: 50%;
    outline: none;
}
@media (max-width: 1024px) {
    .menu-toggle { display: flex; }
}

    .chevron-icon {
        width: 24px;
        height: 24px;
        background: url('../images/z1-m-menu-arrow.svg') no-repeat center center;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .menu-toggle.active .chevron-icon {
        transform: translateY(2px) rotate(-180deg);
    }

/* 푸터 */
.zer01ne-footer-top {
    display: flex;
    padding: var(--spacing-sp-24) 0;
    gap: var(--footer-zero-sns-warp-gap, 40px);
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: url('../images/footer-bg.png');
}

.zer01ne-footer-top .footer-logo {
    display: flex;
    padding: var(--spacing-sp-4) var(--spacing-sp-16);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.zer01ne-footer-top ul {
    display: flex;
    padding: var(--spacing-sp-8) var(--spacing-sp-32);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sp-48);
    background: var(--color-brand-bg-soft);
}


.zer01ne-footer-top ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--button-m-gap);
}

.zer01ne-footer-top ul li a p {
    color: var(--color-text-ondark-primary);

    /* Button/Secondary */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--body-middle, 14px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 21px */
    letter-spacing: var(--font-lespacing-ls-300);
}

@media (max-width: 719px) {
    .zer01ne-footer-top ul {
        gap: var(--spacing-sp-16);
    }

    .zer01ne-footer-top ul li a p {
        display: none;
    }
}


/* 리스트 1 */
/*.zer01ne-container {*/
/*    margin-top: 150px;*/
/*}*/

/*@media (max-width: 1240px) {*/
/*    .zer01ne-container {*/
/*        margin-top: 130px;*/
/*    }*/
/*}*/

/*@media (max-width: 1024px) {*/
/*    .zer01ne-container {*/
/*        margin-top: 140px;*/
/*    }*/
/*}*/

/* top 버튼 */
.zer01ne-container .btn-top-wrap {
    left: unset;
    right: 15px;
}

@media (max-width: 1024px) {
    .zer01ne-container .btn-top-wrap {
        right: 10px;
    }
}

.zer01ne-wrap {
    display: flex;
    padding: var(--page-padding-top) 0 var(--page-padding-bottom) 0;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.zer01ne-list-top {
    position: relative;
    width: 100%;
    height: auto;
}

.zer01ne-list-top .visual {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--pagehero-padding-top) var(--page-padding-x) var(--pagehero-padding-bottom) var(--page-padding-x);
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.zer01ne-list-top .visual .image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: auto;
    overflow: hidden;
}

.zer01ne-list-top .visual .image img {
    height: 100%;
}

.zer01ne-list-top .visual .txt {
    display: flex;
    max-width: 100%;
    padding: var(--pagehero-content-padding-y) 0;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px var(--pagehero-content-gap);
    align-self: stretch;
    flex-wrap: wrap;
    z-index: 1;
}

.zer01ne-list-top .visual .txt p {
    color: var(--color-text-ondark-primary);
    text-align: center;

    /* Display/ZER01NE/large */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-large);
    font-style: normal;
    font-weight:bold;
    line-height: 120%; /* 115.2px */
    letter-spacing: var(--font-lespacing-ls-300);
    text-transform: capitalize;
}

.zer01ne-list-top .visual .txt p.black {
    color: var(--color-text-onlight-primary);
}

.zer01ne-sort-list {
    display: flex;
    max-width: var(--section-max-width);
    margin:  0 auto;
    padding: var(--section-padding-y) 0;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 12px var(--spacing-sp-12);
    align-self: stretch;
    flex-wrap: wrap;
}

.zer01ne-sort-list li .sort-btn {
    display: flex;
    padding: var(--spacing-sp-4) var(--spacing-sp-16);
    justify-content: center;
    align-items: center;
    border-radius: var(--borderradius--0);
    border: var(--borderwidth--1) solid var(--color-border-onlight);
}

/*@media (max-width: 599px) {*/
/*    .zer01ne-sort-list li .sort-btn {*/
/*        width: 87px;*/
/*    }*/
/*}*/

.zer01ne-sort-list li .sort-btn:hover,
.zer01ne-sort-list li .sort-btn.on {
    background: var(--color-bg-dark);
}


.zer01ne-sort-list li .sort-btn span {
    color: var(--color-text-onlight-primary);

    /* Heading/ZER01NE Alt/XS/medium */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--heading-xsmall, 23px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 34.5px */
    letter-spacing: var(--font-lespacing-ls-200);
    display: flex;
    align-items: center;
    gap: var(--spacing-sp-4);
}

.zer01ne-sort-list li .sort-btn:hover span,
.zer01ne-sort-list li .sort-btn.on span {
    color: var(--color-text-ondark-primary);
}

.zer01ne-sort-list li .sort-btn.on span:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-mask-image: url('../images/sort-check.svg');
    mask-image: url('../images/sort-check.svg');

    /* 마스크 세부 설정 (background 설정과 유사함) */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-icon-ondark-primary);
    /*background-color: var(--color-text-onlight-primary);*/
}

.zer01ne-sort-list li .sort-btn.all:hover span:before,
.zer01ne-sort-list li .sort-btn.all.on span:before {
    background-color: var(--color-icon-ondark-primary);
}

.zer01ne-list-wrap {
    display: flex;
    max-width: var(--card-list_max-width);
    width: 100%;
    padding: var(--section-padding-y) var(--card-list_padding);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin: 0 auto;
}

/* [그리드 레이아웃] */
.zer01ne-list-wrap .grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.zer01ne-list-wrap .row {
    display: flex;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 3개 열 행 설정 */
.zer01ne-list-wrap .row-3 .image-item {
    width: calc((100% - (24px * 2)) / 3);
    min-height: 300px;
}

/* 2개 열 행 설정 */
.zer01ne-list-wrap .row-2 .image-item {
    width: calc((100% - 24px) / 2);
    min-height: 342px;
}

/*!* [반응형 태블릿: 1024px] *!*/
@media screen and (max-width: 1024px) {
    .zer01ne-list-wrap .row-3 .image-item {
        min-height: auto; /* 고정 높이 해제 */
        aspect-ratio: 1 / 1; /* 정사각형 비율 유지하며 수축 */}
    .zer01ne-list-wrap .row-2 .image-item {
        min-height: auto;
        /* PC 기준 690:342 비율을 계산하여 적용 (약 2:1에 근접) */
        aspect-ratio: 690 / 342;
    }
}

/* [반응형 모바일: 599px] */
@media screen and (max-width: 719px) {
    .zer01ne-list-wrap .row {
        flex-direction: column;
    }
    .zer01ne-list-wrap .image-item {
        width: calc((100% - (8px * 2)) / 1) !important;
        min-height: auto !important; /* 요청하신 대로 auto 적용 */
        aspect-ratio: auto !important; /* 비율 해제 (이미지 원본 비율 노출 가능) */
    }
}

/* [이미지 아이템 코어 스타일] */
.zer01ne-list-wrap .image-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #eee;
    cursor: pointer;
    margin: var(--card-images-padding);
}


/* 상하단 텍스트 가독성을 위한 그라데이션 가상 요소 */
.zer01ne-list-wrap .image-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, var(--color-black-70) 0%, var(--color-black-0) 100%);
    z-index: 2;
}

/* 이미지 애니메이션: 제자리 확대 */
.zer01ne-list-wrap .image-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
}

.zer01ne-list-wrap .image-item:hover > img {
    transform: scale(1.1);
}


/* [텍스트 정보 레이아웃] */
.zer01ne-list-wrap .item-info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.zer01ne-list-wrap .top-info {
    display: flex;
    width: 100%;
    padding: var(--card-head-padding-y) var(--card-head-padding-x);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--card-header-gap);
}

.zer01ne-list-wrap .top-info h4 {
    overflow: hidden;
    color: var(--color-text-ondark-primary);
    text-overflow: ellipsis;

    /* Heading/SpoqaHanSansNeo/SM/Medium */
    font-family: var(--font-family-ff-primary);
    /*font-size: var(--heading-small, 23px);*/
    font-size: clamp(24px, 0.94vw + 18.36px, 28px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 32.2px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne-list-wrap .top-info .date {
    color: var(--color-text-ondark-secondary);

    /* Caption/SM/Regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--caption-small, 13px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 140%; /* 18.2px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.zer01ne-list-wrap .bottom-info {
    display: none; /* 리스트 에서 안보이게 하기 */
    display: flex;
    width: 100%;
    padding: var(--card-foot-padding);
    justify-content: flex-end;
    align-items: flex-end;
}

.zer01ne-list-wrap .bottom-info .read-time {
    display: flex;
    height: var(--button-m-size);
    padding: var(--button-m-padding-y) var(--button-m-padding-x);
    justify-content: center;
    align-items: center;
    gap: var(--button-m-gap);

    border-radius: var(--borderradius--pill);
    background: var(--color-bg-muted-subtle);
    color: var(--color-text-ondark-primary);

    /* Button/Secondary */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne-list-wrap .image-item:hover .bottom-info .read-time {
    background: var(--color-bg-muted-subtle-alpha);
}

.zer01ne-list-wrap .bottom-info .read-time:before {
    content: '';
    width: 24px;
    height: 24px;
    background: url('../images/icon-time.svg') no-repeat center center;
}

/* cohorts  리스트 */
.zer01ne-list-wrap.cohorts .row {
    flex-wrap: wrap;
    flex-direction: row;
}

.zer01ne-list-wrap.cohorts .image-item {
    width: calc((100% - (24px * 3)) / 3);
    position: relative;
    border-radius: 0;
    background-color: #eee;
    cursor: pointer;
    margin: var(--card-images-padding);
    min-height: inherit;
    border: 1px solid var(--color-border-onlight-muted);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.zer01ne-list-wrap.cohorts .image-item::before {
    display: none;
}


.zer01ne-list-wrap.cohorts .image-item .over-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--color-black-70) 0%, var(--color-black-0) 75%, var(--color-black-0) 100%);
}

.zer01ne-list-wrap.cohorts .image-item:hover {
    border: 2px solid var(--color-black-70);
}

.zer01ne-list-wrap.cohorts .image-item:hover .over-wrap {
    display: block;
    z-index: 1;
}


.zer01ne-list-wrap.cohorts .image-item .over-wrap .top {
    display: flex;
    width: 100%;
    padding: var(--card-head-padding-y) var(--card-head-padding-x);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--card-header-gap);
}

.zer01ne-list-wrap.cohorts .image-item .over-wrap .top p {
    overflow: hidden;
    color: var(--color-text-ondark-primary);
    text-align: center;
    text-overflow: ellipsis;

    /* Heading/SpoqaHanSansNeo/SM/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-small, 28px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 39.2px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne-list-wrap.cohorts .image-item .over-wrap .bottom {
    display: flex;
    width: 100%;
    padding: var(--card-foot-padding);
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
}

.zer01ne-list-wrap.cohorts .image-item .over-wrap .bottom .round {
    display: flex;
    width: var(--button-l-size);
    height: var(--button-l-size);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-dark-alpha);
}

.zer01ne-list-wrap.cohorts .image-item .over-wrap .bottom .round:before {
    content: '';
    width: 24px;
    height: 24px;
    background: url('../images/icon-plus.svg') no-repeat center;
}

.zer01ne-list-wrap.cohorts .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
}


/* ==========================================================================
           [레이어 팝업 시스템]
           ========================================================================== */

/* 1. 배경 딤(Dim) 처리:
   display: none 대신 opacity/visibility를 사용하여 Flexbox 정렬 환경을 유지합니다.
*/
.zer01ne .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 var(--page-padding-x);
    background: var(--color-bg-gray-subtle);
    z-index: 5000;

    /* 중앙 정렬 핵심 로직 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 애니메이션 설정 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;


}

/* 활성화 상태 */
.zer01ne .modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. 팝업 본체 */
.zer01ne .modal-content {
    display: flex;
    max-width: var(--section-max-width);
    max-height: 780px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cohorts-content-gap, 32px);
    flex: 1 0 0;
    background: var(--color-bg-dark);
    /* 팝업 등장 애니메이션 (살짝 커지며 나타남) */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* 부모가 active일 때 본체 애니메이션 실행 */

.zer01ne .modal-header {
    padding: var(--cohorts-padding-y, 80px) var(--cohorts-padding-x, 64px) 0 var(--cohorts-padding-x, 64px);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     gap: var(--cohorts-header-gap, 8px);
     align-self: stretch;
 }

.zer01ne .modal-header p {
    color: var(--color-text-ondark-secondary);

    /* Body/middle/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .modal-header h4 {
    color: var(--color-text-ondark-primary);
    /* Display/ZER01NE/middle */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-middle, 64px);
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 67.2px */
    letter-spacing: var(--font-lespacing-ls-300);
    text-transform: capitalize;
}

.zer01ne .modal-body {
    padding: 0 var(--cohorts-padding-x, 64px) var(--cohorts-padding-y, 80px) ;

}

.zer01ne .modal-tag {
    margin-top: var(--cohorts-content-gap, 32px);;
}

.zer01ne .modal-tag ul {
    display: flex;
    padding: var(--cohorts-tagbox-padding-y) 0;
    align-items: center;
    align-content: center;
    gap: 16px var(--spacing-sp-16);
    align-self: stretch;
    flex-wrap: wrap;
}


@media (max-width: 799px) {
    .zer01ne .modal-content {
    }


    .zer01ne .modal-body  .body-wrap {
        flex-wrap: wrap;
    }

    .zer01ne .modal-body {
        flex-wrap: wrap;
        max-height: 600px;
        overflow: auto;
        overflow-y: scroll;
    }
    /* 1. 스크롤바 전체 너비 설정 */
    .zer01ne .modal-body::-webkit-scrollbar {
        width: 12px;
    }

    /* 2. 스크롤바 트랙 (배경) - 검은색 */
    .zer01ne .modal-body::-webkit-scrollbar-track {
        background: #000000;
        margin-right: -10px;
    }

    /* 3. 스크롤바 핸들 (막대) - 회색 및 둥근 모서리 */
    .zer01ne .modal-body::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 10px;
        /* 배경과 대비를 주어 더 깔끔하게 보이게 하기 위해 투명 보더 활용 */
        border: 3px solid #000000;
    }

    /* 4. 스크롤바 호버 시 색상 변화 */
    .zer01ne .modal-body::-webkit-scrollbar-thumb:hover {
        background: #555555;
    }

    .zer01ne .modal-body .body-wrap .img {
        max-width: 220px;
        min-width: 220px !important;
        margin: 0 auto;
    }
}

.zer01ne .modal-body .body-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--cohorts-content-gap, 32px);
    align-self: stretch;
}

.zer01ne .modal-body .body-wrap .img {
    flex: 0 1 360px; /* 초기 너비 360px, 공간 부족 시 축소(shrink: 1) 허용 */
    min-width: 220px;  /* 너무 작아지지 않도록 하한선 설정 */
}

.zer01ne .modal-body .body-wrap .img img {
    width: 100%;    /* 박스 너비에 맞춤 */
    max-width: 100%;
    height: auto;   /* 비율 유지 */
    display: block;
    object-fit: cover;
}

.zer01ne .modal-body .body-wrap .text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cohorts-text-gap, 24px);
    flex: 0 1 720px;
}

.zer01ne .modal-body .body-wrap .text-wrap .p01 {
    color: var(--color-text-ondark-primary);

    /* Heading/SpoqaHanSansNeo/XS/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-xsmall, 23px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 32.2px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne .modal-body .body-wrap .text-wrap .p02 {
    color: var(--color-text-ondark-secondary);

    /* Body/middle/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

/* 3. 닫기 버튼 */
.zer01ne .modal-close-btn {
    width: 100%;
    padding: 14px;
    background-color: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zer01ne .modal-close-btn:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

/* 우측 상단 X 버튼 */
.zer01ne .btn-x-close {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    width: var(--button-l-size);
    height: var(--button-l-size);
    justify-content: center;
    align-items: center;
}

.zer01ne .btn-x-close:before {
    content: '';
    width: 24px;
    height: 24px;
    background: url('../images/icon-cancle.svg') no-repeat center;
}
/* ==========================================================================
           [레이어 팝업 시스템]
           ========================================================================== */



/* [더보기 버튼 영역] */
.zer01ne-wrap .load-more-wrap {
    display: flex;
    padding: var(--section-padding-y) var(--section-padding-x);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sp-12);
    align-self: stretch;
}

.zer01ne-wrap .load-more-wrap .r-btn {
    min-width: 260px;
}

.r-btn {
    display: flex;
    height: var(--button-l-size);
    padding: var(--button-l-padding-y) var(--button-l-padding-x);
    justify-content: center;
    align-items: center;
    gap: var(--button-l-gap);
    border-radius: var(--borderradius--pill);
    background: var(--color-bg-light-subtle);

    color: var(--color-text-onlight-tertiary);
    /* Button/Primary */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large, 20px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.r-btn:hover {
    background: var(--color-bg-muted);
}

.r-btn.blue {
    background: var(--color-brand-bg-soft);
    color: var(--color-text-ondark-primary);
}




/* 플레이그라운드 */
.z1-about-wrap .top-image {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--pagehero-padding-top) var(--page-padding-x) var(--pagehero-padding-bottom) var(--page-padding-x);
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    position: relative;
}

.z1-about-wrap .top-image .image {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: auto;
    overflow: hidden;
}

.z1-about-wrap .top-image .image img {

    height: 100%;
}

/*.z1-about-wrap .top-image.z1-play {*/
/*    background: url('../images/playground-bg.png') no-repeat ;*/
/*}*/

/*.z1-about-wrap .top-image.z1-accelerator {*/
/*    background: url('../images/accelerator-bg.png') no-repeat ;*/
/*}*/

.z1-about-wrap .top-image .name-wrap {
    display: flex;
    max-width: var(--page-max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--pagehero-content-padding-y) 0;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 24px var(--pagehero-content-gap);
    align-self: stretch;
    flex-wrap: wrap;
    background: var(--color-bg-light);
    z-index: 1;
}

.z1-about-wrap .top-image .name-wrap .top-name {

    color: var(--color-text-onlight-primary);
    text-align: center;

    /* Display/ZER01NE/large */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-large);
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 76.8px */
    letter-spacing: var(--font-lespacing-ls-300);
    text-transform: capitalize;
}

.z1-about-wrap .content {
    display: flex;
    padding: var(--contentsection-padding-y) var(--page-padding-x);
    flex-direction: column;
    align-items: center;
    gap: var(--contentsection-header-gap);
    align-self: stretch;
}

.z1-about-wrap .content.global {
    display: flex;
    padding: var(--contentsection-padding-y) 0;
    flex-direction: column;
    align-items: center;
    gap: var(--contentsection-header-gap);
    align-self: stretch;
}

.z1-about-wrap .content.en {
    display: none;
}

.z1-about-wrap .content .about-txt {
    display: flex;
    max-width: var(--detailtext-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--detailtext-padding-x);
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.z1-about-wrap .content .about-txt .about-name {
    color: var(--color-text-onlight-primary);
    /* Heading/SpoqaHanSansNeo/MD/Medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--heading-middle, 36px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 140%; /* 50.4px */
    letter-spacing: var(--font-lespacing-ls-300);

    padding-top: var(--detailtext-header-padding-top);
}

.z1-about-wrap .content .about-txt .about-p {
    color: var(--color-text-onlight-primary);
    /* Body/large/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large, 20px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);

    padding-bottom: var(--detailtext-body-padding-bottom);
}

.z1-about-wrap .content .about-txt .about-ul li {
    color: var(--color-text-onlight-primary);
    /* Body/large/primary/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large);
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 30px */
}

/* 어바웃 이미지 */
.z1-about-wrap .about-img {
    max-width: 1240px;
}

.z1-about-wrap .global .about-img {
    max-width: 1920px;
}

.z1-about-wrap .about-img img {
    width: 100%;
}

.z1-about-wrap .about-img .mo-img {
    display: none;
}

@media screen and (max-width: 599px) {
    .z1-about-wrap .about-img .mo-img {
        display: block;
    }
    .z1-about-wrap .about-img .pc-img {
        display: none;
    }
}

.fc-blue { color: var(--color-brand-text-soft) !important; }


.z1-about-wrap .global-list {
    display: inline-grid;
    max-width: var(--page-max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-sp-56) var(--globalol-offices-group-margin-x);
    row-gap: var(--globalol-offices-group-gap);
    column-gap: var(--globalol-offices-group-gap);
    align-self: stretch;
    grid-template-rows: repeat(4,fit-content(100%));
    grid-template-columns: repeat(2,minmax(0,1fr));
}

@media (max-width: 599px) {
    .z1-about-wrap .global-list {
        display: flex;
        max-width: var(--page-max-width);
        padding: var(--spacing-sp-56) var(--globalol-offices-group-margin-x);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--globalol-offices-group-gap);
        align-self: stretch;
    }
}

.z1-about-wrap .global-list .global-list-content {
    display: flex;
    min-height: var(--globalol-offices-height);
    padding: var(--globalol-offices-padding-y) var(--globalol-offices-padding-x);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--globalol-offices-gap);
    justify-self: stretch;
    border: var(--borderwidth--1) solid var(--color-border-ongray-subtle);
    width: 100%;
}

.z1-about-wrap .global-list .global-list-content .number {
    display: flex;
    width: var(--globalol-offices-num);
    height: var(--globalol-offices-num);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-bg-dark);
    color: var(--color-text-ondark-primary);

    /* Body/large/primary/medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large);
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.z1-about-wrap .global-list .global-list-content .logo {
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    gap: 16px var(--globalol-offices-map-gap);
    align-self: stretch;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .z1-about-wrap .global-list .global-list-content .logo img {
        width: 120px;
    }
}

.z1-about-wrap .global-list .global-list-content .logo p {
    color: var(--color-text-onlight-primary);
    /* Body/large/secondary/medium */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--body-large);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.z1-about-wrap .global-list .global-list-content .text-wrap {
    display: flex;
    padding-top: var(--globalol-offices-text-padding-top);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--globalol-offices-text-gap);
    align-self: stretch;
}

.z1-about-wrap .global-list .global-list-content .text-wrap p {
    color: var(--color-text-onlight-primary);

    /* Body/large/primary/medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.z1-about-wrap .global-list .global-list-content .text-wrap .black-bg {
    display: flex;
    padding: var(--spacing-sp-4) var(--spacing-sp-16);
    align-items: center;
    gap: var(--spacing-sp-8);
    align-self: stretch;
    background: var(--color-bg-dark-subtle);
    color: var(--color-text-ondark-primary);

    /* Body/middle/primary/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle);
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.z1-about-wrap .global-list .global-list-content.last {
    display: flex;
    padding: var(--globalol-fund-content-padding-y) 0;
    align-items: flex-start;
    gap: var(--globalol-fund-gap);
    grid-row: 4 / span 1;
    grid-column: 1 / span 2;
    justify-self: stretch;
    flex-direction: row;
    border: none;
    min-height: auto;

    color: var(--color-text-onlight-primary);
    /* Body/middle/secondary/medium */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--body-middle);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 24px */
    letter-spacing: var(--font-lespacing-ls-300);
}

@media (max-width: 599px) {
    .z1-about-wrap .global-list .global-list-content.last {
        flex-direction: column;
    }
}

.z1-about-wrap .global-list .global-list-content.last .div01 {
    width: 25%;
}

.z1-about-wrap .global-list .global-list-content.last .div02 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sp-16);
    flex: 1 0 0;
}

.z1-about-wrap .global-list .global-list-content.last .div02 ul {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 32px var(--spacing-sp-32);
    align-self: stretch;
    flex-wrap: wrap;
}

.z1-about-wrap .global-list .global-list-content.last .div02 ul li {
    min-width: 0;
}

.z1-about-wrap .global-list .global-list-content.last .div02 ul li img {
    width: clamp(80px, 10vw, 127px);
}

.z1-about-wrap .global-flowing-wrap {
    overflow: hidden;
    width: 100%;
}

.z1-about-wrap .global-flowing {
    display: flex;
    padding: var(--spacing-sp-64) var(--spacing-sp-24);
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: var(--globalol-partnerships-gap);
    align-self: stretch;
    flex-wrap: wrap;
    margin: 0 auto;
}

.z1-about-wrap .global-flowing li {
    min-width: 0;
    flex-shrink: 0;
    text-align: center;
}

.z1-about-wrap .global-flowing li img {
    max-width: 100%;
    width: clamp(70px, 9vw, 112px);
    height:auto;
    cursor: pointer;
}

.z1-about-wrap .global-bottom-image {
    display: flex;
}

.z1-about-wrap .global-bottom-image img {
    width: 50%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* 에러 페이지 */
.zer01ne .contents.new {
    display: flex;
    padding: var(--page-padding-top) 0 var(--page-padding-bottom) 0;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.zer01ne .message-wrap {
    display: flex;
    padding: var(--contentsection-padding-y) var(--page-padding-x);
    flex-direction: column;
    align-items: center;
    gap: var(--contentsection-header-gap);
    align-self: stretch;
    margin: 0;
}

.zer01ne .message-wrap .message__txt {
    padding-bottom: var(--detailtext-body-padding-bottom);

    color: var(--color-text-onlight-primary);
    text-align: center;
    /* Body/large/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);
    margin: 0;
}

.zer01ne .message-wrap .btn-wrap {
    display: flex;
    max-width: var(--section-max-width);
    padding: var(--spacing-sp-48) 0;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sp-12);
    align-self: stretch;
    margin: 0;
}

.zer01ne .message-wrap .btn-wrap .btn-black {
    color: var(--color-text-ondark-primary);

    /* Button/Primary */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    letter-spacing: var(--font-lespacing-ls-300);
}

/* 메인 */
.zer01ne-main-wrap {
    max-width: var(--breakpoint);
    width: 100%;
    margin: 0 auto;
}
/* 스크롤 */
.zer01ne-scroll-container {
    width: 100%;
}

.zer01ne-scroll-container .section.full-page {
    width: 100%;
    /* [핵심 수정] 섹션 높이는 무조건 100vh로 고정하여 스냅 오차를 제거합니다. */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #fff;
    /* 헤더 공간 확보를 위한 패딩은 JS에서 동적으로 들어갑니다. */
    overflow: hidden;
}

/* 섹션별 배경색 */
.zer01ne-scroll-container #sec0 {
    justify-content: space-between;
    background: linear-gradient(102deg, #0026D7 0.1%, var(--color-brand-bg-solid) 44.26%, #000 90.54%, var(--color-brand-bg-solid) 100.88%);
}

@media (max-width: 599px) {
    .zer01ne-scroll-container #sec0 {
        flex-direction: column;
    }
}

.zer01ne-scroll-container #sec0 .section-content {
    display: flex;
    padding: var(--hero-padding-top) var(--hero-padding-x) var(--hero-padding-bottom) var(--hero-padding-x);
    align-items: center;
    gap: var(--hero-content-gap);
    flex: 0 0 50%;
}

.zer01ne-scroll-container #sec0 .section-content p {
    color: var(--color-text-ondark-primary);
    /* Display/ZER01NE/Xlarge */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-xlarge, 90px);
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 180px */
    letter-spacing: var(--font-lespacing-ls-300);
    text-transform: capitalize;
    text-align: left;
}

.zer01ne-scroll-container #sec0 .lottie-bg {
    flex: 0 0 50%;
    height: 100%;
    width: auto;
}

.zer01ne-scroll-container #sec1 { background: radial-gradient(50% 50% at 50% 50%, #0B17E5 0%, var(--color-brand-bg-solid) 100%); }

.zer01ne-scroll-container #sec1 .section-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--page-max-width);
    padding: var(--hero-padding-top) var(--page-padding-x) var(--hero-padding-bottom) var(--page-padding-x);
    gap: var(--hero-content-gap);
}

.zer01ne-scroll-container #sec1 .section-content p {
    color: var(--color-text-ondark-primary);

    /* Display/ZER01NE/Xlarge */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-xlarge, 90px);
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 180px */
    letter-spacing: var(--font-lespacing-ls-300);
    text-transform: capitalize;

    text-align: left;
}

.zer01ne-scroll-container #sec1 .image-item {
    /* 크기 변화 시 부드러운 전환 */
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}

.zer01ne-scroll-container #sec1 .floating { position:absolute; will-change: transform; backface-visibility: hidden;
    /* 부드러운 크기 변화를 위한 트랜지션 */
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    /* [중요] scale 사용 시 기준점을 상단 중앙으로 잡아야 정렬이 안 흐트러집니다. */
    transform-origin: center center;

}

.zer01ne-scroll-container #sec1 .image-item .img-01 { width: clamp(198px, 16.125vw + 146.4px, 456px); }
.zer01ne-scroll-container #sec1 .image-item .img-02 { width: clamp(153px, 15.188vw + 104.4px, 396px); }
.zer01ne-scroll-container #sec1 .image-item .img-03 { width: clamp(122px, 5vw + 106px, 202px); }
.zer01ne-scroll-container #sec1 .image-item .img-04 { width: clamp(85px, 5.313vw + 68px, 170px); }
.zer01ne-scroll-container #sec1 .image-item .img-05 { width: clamp(32px, 3vw + 22.4px, 80px); }
.zer01ne-scroll-container #sec1 .image-item .img-06 { width: clamp(72px, 4.875vw + 56.4px, 150px); }
.zer01ne-scroll-container #sec1 .image-item .img-07 { width: clamp(60px, 2.813vw + 51px, 105px); }

.zer01ne-scroll-container #sec1 .top-left { top: -15%; left: -10%; }
.zer01ne-scroll-container #sec1 .top-left .image-item { animation: float1 4s ease-in-out infinite; }

.zer01ne-scroll-container #sec1 .top-right { top: -4%; right: -3%; }
.zer01ne-scroll-container #sec1 .top-right .image-item { animation: float2 6s linear infinite; }

.zer01ne-scroll-container #sec1 .bottom-left { bottom:-62px; left: 13%; }
.zer01ne-scroll-container #sec1 .bottom-left .image-item {  animation: float3 5s ease-in-out infinite; }

.zer01ne-scroll-container #sec1 .bottom-right { bottom: -40px; right: 8%; }
.zer01ne-scroll-container #sec1 .bottom-right .image-item { animation: float4 7s ease-in-out infinite; }

.zer01ne-scroll-container #sec1 .top-center { top: 209px; right: 50%; }
.zer01ne-scroll-container #sec1 .top-center .image-item { animation: float5 4s ease-in-out infinite; }

.zer01ne-scroll-container #sec1 .top-right2 { top: 25%; right: 3%; }
.zer01ne-scroll-container #sec1 .top-right2 .image-item { animation: float6 5s ease-in-out infinite; }

.zer01ne-scroll-container #sec1 .top-right3 { top: 50%; right: 8%; }
.zer01ne-scroll-container #sec1 .top-right3 .image-item { animation: float7 6s ease-in-out infinite; }

@media (max-width: 1024px) {
    /*.zer01ne-scroll-container #sec1 .image-item {*/
    /*    transform: scale(0.7);*/
    /*}*/


    /*.zer01ne-scroll-container #sec1 .top-left { top: -24%; left: -16%; transform: translate(-50%, -50%);}*/

    /*.zer01ne-scroll-container #sec1 .top-right { top: -15%; right: -14% transform: translate(-50%, -50%);;}*/

    /*.zer01ne-scroll-container #sec1 .bottom-left { bottom: -14%; left: 11%; transform: translate(-50%, -50%);}*/

    /*.zer01ne-scroll-container #sec1 .bottom-right { bottom: -7%; right: 7%; transform: translate(-50%, -50%);}*/

    /*.zer01ne-scroll-container #sec1 .top-center { top: 40%; left: 47%; transform: translate(-50%, -50%);}*/

    /*.zer01ne-scroll-container #sec1 .top-right2 { top: 15%; right: 3%; transform: translate(-50%, -50%);}*/

    /*.zer01ne-scroll-container #sec1 .top-right3 { top: 45%; right: 11%; transform: translate(-50%, -50%);}*/
}

@media (max-width: 599px) {
    /*.zer01ne-scroll-container #sec1 .image-item {*/
    /*    transform: scale(0.5);*/
    /*}*/
    /*.zer01ne-scroll-container #sec1 .top-left { top: -24%; left: -30%;}*/

    /*.zer01ne-scroll-container #sec1 .top-right { top: -18%; right: -22%;}*/

    /*.zer01ne-scroll-container #sec1 .bottom-left { bottom: -15%; left: 0%;}*/

    /*.zer01ne-scroll-container #sec1 .bottom-right { bottom: -8%; right: 2%;}*/
    .zer01ne-scroll-container #sec1 .top-center,
    .zer01ne-scroll-container #sec1 .top-right2,
    .zer01ne-scroll-container #sec1 .top-right3 {
        display: none;
    }

}

@media (max-width: 1024px) {
    .zer01ne-scroll-container #sec1 img.main-title  {
        width: 228px;
    }
}

/* 둥둥 떠다니는 느낌을 주는 애니메이션 */
@keyframes float1 {
    0%   { transform: translateY(0)  rotate(0deg); }
    50%  { transform: translateY(-25px) rotate(-5deg);; }
    100% { transform: translateY(0)  rotate(0deg);; }
}

@keyframes float2 {
    0%   { transform: translateX(0) translateY(0)  rotate(0deg); }
    50%  { transform: translateX(10px) translateY(-20px) rotate(3deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

@keyframes float3 {
    0%   { transform: translate(0,0) rotate(0deg);}
    50%  { transform: translate(0,-20px) rotate(-2deg);}
    100% { transform: translate(0,0) rotate(0deg);}
}

@keyframes float4 {
    0%   { transform: rotate(0deg) translateY(0); }
    50%  { transform: rotate(5deg) translateY(-20px); }
    100% { transform: rotate(0deg) translateY(0); }
}

@keyframes float5 {
    0%   { transform: translateX(-50%) translateY(0) rotate(0deg); }
    50%  { transform: translateX(-50%) translateY(-20px) rotate(5deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}

@keyframes float6 {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-30px) rotate(-6deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes float7 {
    0%   { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(-15px) rotate(4deg); }
    50%  { transform: translateY(-25px) rotate(-4deg); }
    75%  { transform: translateY(-10px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.zer01ne-scroll-container #sec2 {
    background-color: var(--color-bg-light);
    flex-direction: column;
}

.zer01ne-scroll-container #sec2 .lottie-wrap {
    display: flex;
    max-width: var(--page-max-width);
    padding: 0 var(--page-padding-x);
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    margin: 0 auto;
}

.zer01ne-scroll-container #sec2 .section-content {
    display: flex;
    max-width: var(--page-max-width);
    padding: var(--hero-padding-top) var(--hero-padding-x) var(--hero-padding-bottom) var(--hero-padding-x);
    align-items: flex-start;
    justify-content: center;
    gap: var(--hero-content-gap);
    align-self: stretch;
    text-align: left;
    margin: 0 auto;
}

@media (max-width: 599px) {
    .zer01ne-scroll-container #sec2 .section-content {
        flex-direction: column;
    }
}

.zer01ne-scroll-container #sec2 .section-content .left-div {
    flex: 0 0 50%;
}

@media (max-width: 599px) {
    .zer01ne-scroll-container #sec2 .section-content .left-div {
        flex: 1;
    }
}


.zer01ne-scroll-container #sec2 .section-content .left-div .name {
    color: var(--color-text-onlight-secondary);
    /* Heading/ZER01NE/XS/regular */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--heading-small, 28px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 140%; /* 39.2px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne-scroll-container #sec2 .section-content .right-div {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hero-content-gap);
}

.zer01ne-scroll-container #sec2 .section-content .right-div .name {
    color: var(--color-text-onlight-tertiary);
    /* Body/middle/regular */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-regular);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);

}

.zer01ne-scroll-container #sec2 .section-content .right-div .link {
    color: var(--color-text-ongray-secondary);
    /* Body/middle/medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-middle, 16px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 24px */
    letter-spacing: var(--font-lespacing-ls-300);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--button-s-gap);
}

.zer01ne-scroll-container #sec2 .section-content .right-div .link:after {
    content: '';
    width: 16px;
    height : 16px;
    background: url('../images/icon-right-arrow-black.svg') no-repeat center center;
}

.zer01ne-scroll-container .section-content,
.zer01ne-scroll-container .lottie-bg {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.zer01ne-scroll-container .section.active .section-content,
.zer01ne-scroll-container .section.active .lottie-bg{
    opacity: 1;
    transform: translateY(0);
}

.zer01ne-scroll-container .section h2 {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 900;
    margin-bottom: 15px;
}

.zer01ne-scroll-container .section p {
    color: #64748b;
    font-size: 18px;
}

/* [3. 우측 페이지네이션 (Pagination)] */
.zer01ne-pagination {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

/* 본문 영역 진입 시 숨김 처리 */
.zer01ne-pagination.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40%) scale(0.8);
}

.zer01ne-pagination .pagination-dot {
    width: 8px;
    height: 8px;
    background-color: #111;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2px solid transparent;
}

.zer01ne-pagination .pagination-dot:hover {
    opacity: 0.5;
    transform: scale(1.2);
}

.zer01ne-pagination .pagination-dot.active {
    opacity: 1;
    background-color: transparent;
    border-color: #3b82f6;
    transform: scale(1.5);
}

/* 타이핑 */
/* [2. 메인 컨테이너: 회색 배경 및 나란히 배치] */
.zer01ne-typing-container {
    scroll-snap-align: start;
    display: flex;
    padding: var(--page-padding-top) var(--page-padding-x) var(--page-padding-bottom) var(--page-padding-x);
    align-items: baseline;
    gap: var(--typo-gap, 40px);
    align-self: stretch;
    background: var(--color-bg-light-subtle);
    min-height: 302px;
}

@media (max-width: 599px) {
    .zer01ne-typing-container {
        flex-direction: column;
        justify-content: center;
        gap: var(--typo-gap, 16px);
        min-height: 250px;
    }
}

/* [3. 고정 텍스트 영역] */
.zer01ne-typing-label {
    display: flex;
    padding: var(--typo-content-padding-y, 8px) var(--typo-content-padding-x, 16px);
    align-items: flex-start;
    background: var(--color-bg-dark);

    color: var(--color-text-ondark-primary);
    /* Display/ZER01NE/small */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-small, 48px);
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: var(--font-lespacing-ls-400);
    text-transform: capitalize;
}

/* [4. 타이핑 텍스트 영역] */
.zer01ne-typing-content {
    flex: 1;
}

.zer01ne-typing-text {
    font-family: var(--font-family-ff-secondary);
    font-size: var(--display-small, 48px);
    font-weight: bold;
    line-height: 1.8;
    color: var(--color-text-onlight-primary);
    letter-spacing: -0.02em;
    word-break: keep-all;

    /* 글자만 감싸는 흰색 배경 설정 */
    background: var(--color-bg-light);
    padding: var(--typo-content-padding-y, 8px) var(--typo-content-padding-x, 16px);

    /* 줄바꿈 시 배경 복제 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
    position: relative;
}

/* [5. 커서 디자인] */
.zer01ne-typing-container .cursor {
    display: inline-block;
    width: 4px;
    height: 0.85em;
    background: var(--color-icon-onlight-primary);
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 0.8s infinite;
    margin-bottom: 0.1em;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.zer01ne-reveal-container {
    display: flex;
    flex-direction: column;
    padding: var(--page-padding-top) var(--page-padding-x) var(--page-padding-bottom) var(--page-padding-x);
}

/* 등장 애니메이션 기초 */
.zer01ne-reveal-container .reveal-box {
    display: flex;
    min-height: var(--banner-min-height, 400px);
    padding: var(--banner-padding);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-row: 1 / span 1;
    grid-column: 1 / span 3;
    justify-self: stretch;
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    max-width: 80%;
    width: 100%;
}
.zer01ne-reveal-container .reveal-box + .reveal-box {
    margin-top: var(--spacing-sp-64);
}
/* 왼쪽에서 등장하는 스타일 */
.zer01ne-reveal-container .reveal-box.left {
    align-self: flex-start;
    transform: translateX(-180px);
    opacity: 0;
}

/* 오른쪽에서 등장하는 스타일 */
.zer01ne-reveal-container .reveal-box.right {
    align-self: flex-end;
    transform: translateX(180px);
    background-color: #f1f5f9;
    opacity: 0;
}

.zer01ne-reveal-container .reveal-box.bg-01 {
    background: var(--color-bg-dark) url('../images/Playground-Graphic.svg') no-repeat top right;
}

.zer01ne-reveal-container .reveal-box.bg-02 {
    background: var(--color-brand-bg-soft) url('../images/Accelerator-Graphic.svg') no-repeat top right;
}

.zer01ne-reveal-container .reveal-box.bg-03 {
    background: var(--color-bg-dark-subtle) url('../images/CompanyBuilder-Graphic.svg') no-repeat top right;
}

.zer01ne-reveal-container .reveal-box.bg-04 {
    background: var(--color-brand-bg-solid) url('../images/Investment-Graphic.svg') no-repeat top right;
}


.zer01ne-reveal-container .reveal-box .txt-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--banner-content-gap);
    align-self: stretch;
}

.zer01ne-reveal-container .reveal-box .txt-wrap .text-1 {
    color: var(--color-text-ondark-primary);
    /* Body/large/medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-large, 20px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 30px */
    letter-spacing: var(--font-lespacing-ls-200);
}

.zer01ne-reveal-container .reveal-box .txt-wrap .name-1 {
    color: var(--color-text-ondark-primary);

    /* Display/ZER01NE Alt/Xlarge */
    font-family: var(--font-family-ff-secondaryalt);
    font-size: var(--display-xlarge, 90px);
    font-style: normal;
    font-weight: bold;
    line-height: 105%; /* 94.5px */
    letter-spacing: var(--font-lespacing-ls-500);
    text-transform: capitalize;
}

.zer01ne-reveal-container .reveal-box .txt-wrap .text-2 {
    color: var(--color-text-ondark-secondary);
    /* Body/small/medium */
    font-family: var(--font-family-ff-primary);
    font-size: var(--body-small, 16px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 24px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne-reveal-container .reveal-box .txt-wrap .anchor-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--button-m-gap);

    color: var(--color-text-ondark-primary);

    /* Button/Secondary */
    font-family: var(--font-family-ff-secondary);
    font-size: var(--body-middle, 17px);
    font-style: normal;
    font-weight: var(--font-weight-fw-medium);
    line-height: 150%; /* 25.5px */
    letter-spacing: var(--font-lespacing-ls-300);
}

.zer01ne-reveal-container .reveal-box .txt-wrap .anchor-1:after {
    content: '';
    width: 24px;
    height: 24px;
    background: url('../images/icon-s-right.svg') no-repeat center;
}



/* 활성화 상태 (다시 액션 가능) */
.zer01ne-reveal-container .reveal-box.active {
    opacity: 1;
    transform: translateX(0) translateY(0) !important;
}

.zer01ne-reveal-container .reveal-box h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #1e293b;
}

.zer01ne-reveal-container .reveal-box p {
    color: #64748b;
    font-size: 16px;
}

/* [5. 반응형 미세 조정]
   태블릿 및 모바일에서 좌우 치우침 없이 가운데 정렬 처리
*/

@media (max-width: 599px) {
    .zer01ne-reveal-container .reveal-box.left, .zer01ne-reveal-container .reveal-box.right {
        align-self: center;
        transform: translateY(50px); /* 좌우가 아닌 위아래 움직임으로 변경 */
    }
    .zer01ne-reveal-container .reveal-box + .reveal-box {
        margin-top: 40px;
    }

    .zer01ne-reveal-container .reveal-box {
        max-width: 100%;
    }
}

/* 프린트 */
.zer01ne .page-print #mainVisual {
    max-width: inherit;
}

.zer01ne .page-print .component-anchor {
    display: none;
}

.zer01ne .page-print .component-video .video,
.zer01ne .page-print .component-video .hmg-video-play-wrap {
    width: 100%;
}

.zer01ne .btn-top-wrap {
    left: auto;
    right: 20px;
}

@media print {
    html, body {background: #fff; -webkit-print-color-adjust: exact !important;print-color-adjust:exact !important;}
    .z1-gnb-wrap, .component-anchor .footer-wrap, .floating-btnWrap, .center-slide-btn-wrap {display: none;}
    /* s : 251113 add - 저널 상세페이지 키비주얼 영역 인쇄 화면 대응 */
    .hmg-story-container .component-key-visual {position:relative;}
    .hmg-story-container .component-key-visual .s-main-poster {position:relative; padding-top:0; width:100%; height:100%; overflow:hidden;}
    .hmg-story-container .component-key-visual .s-main-poster::before {top:0; left:0; right:0; bottom:0; transform:none;}
    .hmg-story-container .component-key-visual .s-main-poster img,
    .hmg-story-container .component-key-visual .s-main-poster video {position:static; transform:none; width:100%; height:auto;}
    .hmg-story-container .component-key-visual .s-main-cont .s__inner {display:flex; flex-direction:column; margin-bottom:3.57143vw; max-width:73.42857vw;}
    /* e : 251113 add */

    .page-print #mainVisual img {width: 100%; max-height: 100%;}/* 251113 modify - 인쇄 화면 키비주얼 */
    .page-print .page-detail__inner, .page-print .page-detail__contents {max-width:80% ;}
    .page-print .s__inner {max-width: 95%;}
    .page-print .component-byline .s__inner {max-width: 76%;}
}