@charset "UTF-8";

/* ========== 헤더 스타일 ========== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: #fff;
    z-index: var(--z-fixed);
    transition: background-color 0.3s ease-in-out,
    border-bottom-color 0.3s ease-in-out;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    /* iOS Safari fixed 위치 안정화를 위한 GPU 가속 */
    transform: translateZ(0);
}

.main-page .header:not(.is-scrolled) {
    background: transparent;
    border-bottom: 1px solid transparent;
}

.header.is-scrolled {
    background: #fff;
    border-bottom: 1px solid #ccc;
}

.header.is-menu-open {
    background: #fff !important;
    border-bottom: 1px solid #ccc !important;
}

.header-inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 var(--content-padding-x);
    height: 120px;
}

/* ========== 일시후원 버튼 ========== */
.donateBtn {
    display: none;
}

body.donate .donateBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.32px;
    border-radius: 8px;
    background-color: #fbe546;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(var(--content-padding-x) + 90px);
}

@media screen and (max-width: 768px) {
    body.donate .donateBtn {
        font-size: 14px;
        left: calc(var(--content-padding-x) + 65px);
    }
}

/* ========== 검색 레이어 스타일 ========== */
.search-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* dvh 미지원 브라우저 fallback */
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-transform: translateZ(0);
    /* iOS Safari fixed 위치 안정화를 위한 GPU 가속 */
    transform: translateZ(0);
}

.search-backdrop[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.search-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: #fff;
    z-index: 1000;
    border-bottom: 1px solid #ccc;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-100%) translateZ(0);
    transform: translateY(-100%) translateZ(0);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.search-layer[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
}

.search-layer__inner {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 calc(100vw / 1920 * 200);
}

.search-layer__close {
    position: absolute;
    right: calc(100vw / 1920 * 200);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

@media (max-width: 1280px) {
    .search-layer {
        top: 0;
        height: 71px;
    }
}

@media (max-width: 767px) {
    .search-layer__inner {
        width: 100%;
        max-width: 100%;
        padding: 10px 52px 10px 20px;
    }

    .search-layer__close {
        right: 17px;
        width: 20px;
        height: 20px;
    }
}

/* ========== 메인 콘텐츠 스타일 ========== */
#main-content {
    padding-top: 120px;
}

@media (max-width: 1280px) {
    #main-content {
        padding-top: 72px;
    }
}

/* ========== 푸터 스타일 ========== */
.footer {
    background-color: #121212;
    font-size: 16px;
    color: var(--text-white, #ffffff);
}

.footer__inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    margin: 0 auto;
    padding: 24px calc(100vw / 1920 * 200);
}

.footer-info__item {
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--GRAY_03);
}

.footer-info.list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0 16px;
    margin-bottom: 20px;
}

.footer-info.list li {
    position: relative;
    margin-bottom: 0;
}

.footer-info.list li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: var(--GRAY_03);
    opacity: 0.5;
}

.footer-info__item.icon-address {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_location_gray.svg") no-repeat left top / 24px 24px;
    padding-left: 36px;
}

.footer-info__item.icon-email {
    display: flex;
    flex-wrap: wrap;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_mail_gray.svg") no-repeat left center / 24px 24px;
    padding-left: 36px;
}

.footer-info__item address {
    font-style: normal;
    word-break: keep-all;
}

.footer-info__item .text-link {
    position: relative;
    margin-left: 12px;
    padding-left: 12px;
    text-decoration: underline;
}

.footer-info__item .text-link::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: #fff;
}

.footer .social-media {
    margin-top: 20px;
    margin-bottom: 20px;
}

.footer .social-links {
    display: flex;
    gap: 20px;
}

.footer .social-links a {
    display: inline-block;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
}

.footer .social-links a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer .copyright {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--GRAY_03);
}

.footer .powered-by {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--GRAY_03);
}

.powered-by img {
    display: block;
    width: 82px;
    margin-left: 16px;
}

.footer__inner-logo {
    flex-shrink: 0;
}

.footer__inner-logo img {
    width: 104px;
    height: auto;
}

.footer-link-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-link-list a {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    padding-right: 12px;
    word-break: keep-all;
}

.footer-link-list a strong {
    font-weight: 700;
}

.footer-link-list a:last-child {
    padding-right: 0;
}

.footer-link-list a:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: var(--GRAY_03);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 24px 30px;
    }

    .footer__inner-logo {
        margin-top: 8px;
    }

    .footer__inner-logo img {
        width: 58px;
    }

    .footer-info__item {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .footer-info__item.icon-address,
    .footer-info__item.icon-email {
        padding-left: 28px;
        justify-content: flex-start;
        background-size: 16px 16px;
        background-position: left 2px;
    }

    .footer-info__item.icon-email {
        flex-direction: column;
    }

    .footer-info__item .text-link {
        margin-left: 0;
        padding-left: 0;
    }

    .footer-info__item .text-link::before {
        display: none;
    }

    .footer-link-list {
        flex-direction: column;
        gap: 8px;
    }

    .footer-link-list a {
        font-size: 14px;
    }

    .footer-link-list a:not(:last-child)::after {
        display: none;
    }

    .footer .copyright {
        font-size: 13px;
    }

    .powered-by img {
        width: 64px;
    }
}

/* ========== 플로팅 소셜 리스트 스타일 ========== */
.floating-social {
    position: absolute;
    top: 20dvh;
    right: calc(100vw / 1920 * 58);
    z-index: 1000;
}

.floating-social__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    border-radius: 40px;
    background: var(--GRAY_01, #f5f5f5);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.12);
}

.floating-social__item {
    list-style: none;
}

.floating-social__link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.floating-social__link:hover {
    transform: scale(1.1);
}

.floating-social__link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1);
}

@media screen and (max-width: 1280px) {
    .floating-social {
        display: none;
    }
}

/* ========== 네비게이션 스타일 ========== */
.navigation {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    gap: clamp(10px, calc(10.9546vw - 130.33px), 80px);
}

/* ========== 로고 스타일 ========== */
.wyd-logo {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.wyd-logo a {
    display: block;
}

.wyd-logo__image {
    display: block;
    width: 74px;
    height: 84px;
    min-width: 74px;
    min-height: 84px;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    transition: background-image 0.3s ease-in-out, opacity 0.4s ease;
    /* 사파리에서 background-image 변경 시 리렌더링 최적화 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: background-image;
}

body:has(#main) .header:not(.is-scrolled) .wyd-logo__image {
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_w-20251224113718379.png");
}

.header.is-scrolled .wyd-logo__image {
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png");
}

.header.is-menu-open .wyd-logo__image {
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png") !important;
}

/* 메인 최상단(스크롤 0, 메뉴 닫힘) 전용 흰 카드 + 큰 로고 배지.
   FLIP 모션: 배지는 항상 큰 상태(192×218)로 그려두고, 기본(작아진) 상태에서
   transform(translate+scale)만으로 작은 로고 자리까지 축소·이동시킨다 */
.wyd-logo__badge {
    display: block;
    position: absolute;
    top: 0;
    left: var(--content-padding-x);
    width: clamp(130px, calc(9.6875vw + 6px), 192px);
    height: clamp(147px, calc(11.09375vw + 5px), 218px);
    pointer-events: none;
    transform-origin: 0 0;
    /* 기본(작아진) 상태: 배지 원점(32,38)이 작은 로고 자리(0,18)로 가도록 역산한 값 */
    transform: translate(-18.65px, -4.17px) scale(0.5827, 0.5833);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wyd-logo__badge-bg {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 0 0 32px 32px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.wyd-logo__badge-mark {
    position: absolute;
    left: 16.6667%;
    top: 17.4312%;
    width: 66.1458%;
    height: 66.055%;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 메인 페이지 최상단(스크롤 0, 메뉴 닫힘): 배지를 원래(큰) 크기·위치로 */
body:has(#main) .header:not(.is-scrolled):not(.is-menu-open) .wyd-logo__badge {
    transform: translate(0, 0) scale(1);
}

body:has(#main) .header:not(.is-scrolled):not(.is-menu-open) .wyd-logo__badge-bg,
body:has(#main) .header:not(.is-scrolled):not(.is-menu-open) .wyd-logo__badge-mark {
    opacity: 1;
}

/* 배지가 보이는 동안은 작은 로고를 숨겨(레이아웃 유지) 자연스럽게 인계한다 */
body:has(#main) .header:not(.is-scrolled):not(.is-menu-open) .wyd-logo__image {
    opacity: 0;
}

/* 모바일은 큰 로고 배지(스크롤 전환) 없이 항상 작은 로고만 */
@media (max-width: 768px) {
    .wyd-logo__badge {
        display: none;
    }

    body:has(#main) .header:not(.is-scrolled):not(.is-menu-open) .wyd-logo__image {
        opacity: 1;
    }
}

:lang(es) {
    .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_es-20251224114753996.png");
    }

    .wyd-logo__badge-mark {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_es-20251224114753996.png");
    }

    body:has(#main) .header:not(.is-scrolled) .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_w_es-20251224114815425.png");
    }

    .header.is-scrolled .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_es-20251224114753996.png");
    }

    .header.is-menu-open .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_es-20251224114753996.png") !important;
    }
}

:lang(fr) {
    .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_fr-20251224114847762.png");
    }

    .wyd-logo__badge-mark {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_fr-20251224114847762.png");
    }

    body:has(#main) .header:not(.is-scrolled) .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_w_fr-20251224114907967.png");
    }

    .header.is-scrolled .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_fr-20251224114847762.png");
    }

    .header.is-menu-open .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_fr-20251224114847762.png") !important;
    }
}

:lang(pt) {
    .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_pt-20251224115011607.png");
    }

    .wyd-logo__badge-mark {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_pt-20251224115011607.png");
    }

    body:has(#main) .header:not(.is-scrolled) .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_w_pt-20251224115027646.png");
    }

    .header.is-scrolled .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_pt-20251224115011607.png");
    }

    .header.is-menu-open .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_pt-20251224115011607.png") !important;
    }
}

:lang(it) {
    .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_it-20251224114937705.png");
    }

    .wyd-logo__badge-mark {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_it-20251224114937705.png");
    }

    body:has(#main) .header:not(.is-scrolled) .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_w_it-20251224114954754.png");
    }

    .header.is-scrolled .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_it-20251224114937705.png");
    }

    .header.is-menu-open .wyd-logo__image {
        background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_it-20251224114937705.png") !important;
    }
}

@media (max-width: 1280px) {
    .wyd-logo__image {
        width: 50px;
        height: 57px;
        min-width: 50px;
        min-height: 57px;
    }

    .wyd-logo__badge {
        width: 130px;
        height: 147px;
        /* 기본(작아진) 상태: 이 해상도의 작은 로고 자리(0,7.5)로 가도록 역산한 값 */
        transform: translate(-12.79px, -7.78px) scale(0.5814, 0.5876);
    }

    .wyd-logo__badge-bg {
        border-radius: 0 0 22px 22px;
    }

    .wyd-logo__badge-mark {
        left: 22px;
        top: 26px;
        width: 86px;
        height: 97px;
    }
}

/* ========== GNB 스타일 ========== */
.gnb {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(20px, calc(3.125vw - 20px), 40px);
}

.gnb__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 0 var(--clamp-size-20);
    color: var(--text-primary);
    font-size: var(--clamp-size-20);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.4px;
    transition: color 0.3s ease-in-out;
    border-radius: 4px;
    cursor: pointer;
}

body:has(#main) .header:not(.is-scrolled) .gnb__link {
    color: #fff;
}

.header.is-scrolled .gnb__link {
    color: var(--text-primary);
}

.header.is-menu-open .gnb__link {
    color: var(--text-primary) !important;
}

/* 2025-11-21: 드롭다운 애니메이션과 동일한 타이밍으로 동기화 */
.gnb__link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-color);
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: -1;
}

.gnb__link:hover::after {
    opacity: 1;
    visibility: visible;
}

.gnb__donate {
    border-radius: 24px;
    background: #0047BB;
    padding: 8px 24px;
    color: #FFF;
    font-size: var(--clamp-size-20);
    line-height: 1.5;
    letter-spacing: -0.4px;
}

/* ========== GNB 드롭다운 스타일 ========== */
/* 2025-11-21: display 대신 포인터 이벤트로 제어하여 트랜지션 활성화 */
.gnb__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 855px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
    pointer-events: none;
}

/* .open 은 개발자도구에서 수동으로 클래스를 붙여 호버 없이 열린 상태를 고정해두고
   확인하기 위한 테스트용 클래스 — is-active 와 동일하게 취급한다 */
.gnb__item.is-active .gnb__dropdown,
.gnb__item.open .gnb__dropdown {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.gnb__item.is-active .gnb__link,
.gnb__item.open .gnb__link {
    color: var(--primary-color);
}

.gnb__item.is-active .gnb__link::after,
.gnb__item.open .gnb__link::after {
    opacity: 1;
    visibility: visible;
}

.gnb__dropdown-list {
    width: 313px;
    min-height: 356px;
    border-right: 1px solid var(--GRAY_03);
}

.gnb__dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 54px;
    border-bottom: 1px solid var(--GRAY_03);
}

.gnb__dropdown-header-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: block;
}

.gnb__dropdown-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    padding: 0;
}

.gnb__dropdown-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.gnb__dropdown-close img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.gnb__dropdown-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    transition: all 0.2s ease;
    position: relative;
    display: block;
    padding: 14px 50px 14px 20px;
    cursor: default;
    word-break: keep-all;
}

.gnb__dropdown-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_arrow_r_silver.svg") no-repeat center center;
    background-size: contain;
    transition: transform 0.2s ease;
}

.gnb__dropdown-title:hover {
    color: var(--primary-color);
    background: var(--GRAY_01);
}

.gnb__submenu-wrap {
    position: absolute;
    top: 54px;
    left: 313px;
    width: calc(100% - 313px);
    height: 100%;
    background: transparent;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

.gnb__submenu-list {
    width: 100%;
    height: 324px;
    overflow-y: auto;
}

/* JavaScript에서 제어하는 경우를 위해 클래스 기반 숨김 처리 추가 */
.gnb__submenu-wrap.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px) !important;
    z-index: 1000 !important;
    transition: none !important;
}

.gnb__dropdown-item:hover .gnb__submenu-wrap:not(.is-hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* PC 모드에서 1뎁스 드롭다운이 열렸을 때, 2뎁스의 첫 번째 항목 서브메뉴를 기본 노출
 - 기본 노출: 첫 번째 .gnb__dropdown-item 의 .gnb__submenu-wrap 표시
 - 교체 동작: 다른 항목 호버 시 해당 서브메뉴가 위로 올라와 보이도록 z-index 조정 */
@media (hover: hover) and (pointer: fine) {
    .gnb__item.is-active .gnb__dropdown-list>.gnb__dropdown-item:first-child .gnb__submenu-wrap:not(.is-hidden) {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        z-index: 1001;
    }

    .gnb__dropdown-item:hover .gnb__submenu-wrap:not(.is-hidden) {
        z-index: 1002;
    }

    /* 다른 항목을 호버하면 기본(첫 번째) 컨텐츠는 숨김 처리 */
    .gnb__item.is-active .gnb__dropdown-list:hover>.gnb__dropdown-item:first-child:not(:hover) .gnb__submenu-wrap:not(.is-hidden) {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-10px);
        z-index: 1000;
    }

    /* 기본(첫 번째) 2뎁스 타이틀 컬러를 호버 상태처럼 표시 */
    .gnb__item.is-active .gnb__dropdown-list>.gnb__dropdown-item:first-child .gnb__dropdown-title {
        color: var(--primary-color);
    }

    /* 다른 아이템을 호버하면 첫 번째 타이틀 컬러를 원래대로 복원 */
    .gnb__item.is-active .gnb__dropdown-list:hover>.gnb__dropdown-item:first-child:not(:hover) .gnb__dropdown-title {
        color: var(--text-primary);
    }
}

/* 터치(디바이스) 모드에서도 동일 동작 적용 */
@media (hover: none) and (pointer: coarse) {

    /* 1) 기본: 첫 번째 2뎁스 서브메뉴 노출 (is-hidden 클래스가 없는 경우만) */
    .gnb__item.is-active .gnb__dropdown-list>.gnb__dropdown-item:first-child .gnb__submenu-wrap:not(.is-hidden) {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        z-index: 1001;
    }

    /* 2) 탭/포커스된 항목 서브메뉴를 상위로 표시 (is-hidden 클래스가 없는 경우만) */
    .gnb__dropdown-item:focus-within .gnb__submenu-wrap:not(.is-hidden),
    .gnb__dropdown-item:active .gnb__submenu-wrap:not(.is-hidden) {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        z-index: 1002;
    }

    /* 3) 첫 번째 아닌 다른 항목이 hover/active/focus-within일 때 기본(첫 번째) 서브메뉴 숨김 */
    .gnb__item.is-active .gnb__dropdown-list:has(> .gnb__dropdown-item:not(:first-child) .gnb__dropdown-title:hover)>.gnb__dropdown-item:first-child .gnb__submenu-wrap:not(.is-hidden),
    .gnb__item.is-active .gnb__dropdown-list:has(> .gnb__dropdown-item:not(:first-child):active)>.gnb__dropdown-item:first-child .gnb__submenu-wrap:not(.is-hidden),
    .gnb__item.is-active .gnb__dropdown-list:has(> .gnb__dropdown-item:not(:first-child):focus-within)>.gnb__dropdown-item:first-child .gnb__submenu-wrap:not(.is-hidden) {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-10px);
        z-index: 1000;
    }

    /* 4) 타이틀 컬러 처리 (기본은 강조, 다른 항목 탭 시 해제) */
    .gnb__item.is-active .gnb__dropdown-list>.gnb__dropdown-item:first-child .gnb__dropdown-title {
        color: var(--primary-color);
    }

    /* 첫 번째 항목이 아닌 다른 항목이 hover/active/focus-within일 때 첫 번째 타이틀 컬러 복원 */
    .gnb__item.is-active .gnb__dropdown-list:has(> .gnb__dropdown-item:not(:first-child) .gnb__dropdown-title:hover)>.gnb__dropdown-item:first-child .gnb__dropdown-title,
    .gnb__item.is-active .gnb__dropdown-list:has(> .gnb__dropdown-item:not(:first-child):active)>.gnb__dropdown-item:first-child .gnb__dropdown-title,
    .gnb__item.is-active .gnb__dropdown-list:has(> .gnb__dropdown-item:not(:first-child):focus-within)>.gnb__dropdown-item:first-child .gnb__dropdown-title {
        color: var(--text-primary);
    }
}

.gnb__submenu-item:last-of-type .gnb__submenu-link {
    margin-bottom: 0;
}

.gnb__submenu-item {
    margin: 0;
}

.gnb__submenu-link {
    display: block;
    height: auto;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border-radius: 0;
    text-decoration: none;
    /* .gnb__dropdown-title과 여백 맞춤: 상하 패딩 추가 */
    padding: 14px 20px;
    margin-bottom: 0;
}

.gnb__submenu-link:hover {
    color: var(--primary-color);
    /* .gnb__dropdown-title 호버와 동일한 배경색 적용 */
    background: var(--GRAY_01);
}

.gnb__submenu-link[aria-current="page"] {
    color: var(--primary-color);
}

/* ========== GNB 메가 드롭다운 ==========
 .gnb__dropdown--mega 로만 스코프해 운영 .gnb__dropdown(855px 플라이아웃)은 그대로 둔다 */
.gnb__dropdown--mega {
    /* .navigation 이 position:relative 라 절대배치 기준이 nav 영역(로고 오른쪽부터)으로 잡혀 전체폭이 안 나왔다.
       .header 에 이미 걸려있는 transform 이 fixed 요소의 컨테이닝 블록도 만들어주므로, fixed 로 바꿔
       헤더 박스(뷰포트 전체 폭) 기준으로 고정한다. */
    position: fixed;
    top: 120px;
    left: 0;
    right: 0;
    width: auto;
    padding: 0;
    background: #fff;
    /* 운영 .gnb__dropdown 의 border:1px solid 를 그대로 물려받으면, box-sizing:border-box
       전역 리셋 때문에 height:0 이어도 위아래 테두리 2px 는 항상 그려져 닫혀 있을 때도
       헤더 밑에 얇은 선이 남는다. 메가 버전은 테두리를 지우고, 대신 실제로 열렸을 때 보여야
       할 구분선은 .gnb__dropdown-mega(내용물)에 둔다. */
    border: none;
    /* 3차 프로토타입 .pwrap.slide{transition:height .36s ...} 그대로: grid-template-rows:0fr→1fr
       트릭은 실측해보니 브라우저에서 애니메이션이 제대로 안 붙어(height:auto 컨테이너 안에서 fr 트랙
       보간이 불안정) 아래쪽 JS(initGnbMegaHeight)가 .gnb__dropdown-mega 의 실측 높이를 재서
       이 요소의 height 를 0px→Npx 로 직접 트랜지션시킨다. */
    height: 0;
    overflow: hidden;
    /* height 는 CSS 트랜지션에 맡기지 않고 JS(initGnbMegaHeight)가 직접 그려 넣는다.
       opacity/visibility(운영 .gnb__dropdown 공용 규칙에서 물려받음)도 트랜지션을 아예
       꺼서 항상 즉시 전환되게 한다 — 이미 height:0+overflow:hidden 만으로 완전히
       안 보이는 상태라 opacity 가 페이드 없이 바로 바뀌어도 시각적으로 차이가 없고,
       괜히 켜놨다가 1뎁스를 옮길 때마다 옅게 겹쳐 보이는 페이드처럼 인지되는 원인이
       됐다. "새로 열릴 때"의 페이드 느낌은 내용물(.gnb__dropdown-mega)의
       gnbMegaReveal 애니메이션이 전담한다(JS 가 전환 시에만 이 애니메이션을 끈다). */
    transition: none;
}

/* 3차 프로토타입의 .pwrap.fade .panel{animation:pfade ...} 그대로:
   height 트랜지션(높이)과 별개로, 내용물(.gnb__dropdown-mega)에 살짝 위에서 내려오며
   페이드인되는 보조 애니메이션을 더해 패널이 부드럽게 펼쳐지는 것처럼 보이게 한다. */
@keyframes gnbMegaReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.gnb__item.is-active .gnb__dropdown-mega,
.gnb__item.open .gnb__dropdown-mega {
    animation: gnbMegaReveal 0.32s cubic-bezier(.2, .8, .2, 1) both;
}

/* 3차 프로토타입의 .nav-cell::after{transform:scaleX(0→1)} 그대로:
   운영 855px 플라이아웃의 밑줄(opacity 페이드)은 그대로 두고, 메가 드롭다운 항목만
   가운데서 좌우로 벌어지며 그려지는 밑줄로 바꾼다(선택자 특정도로 위 .gnb__link::after 규칙을 덮어씀). */
.gnb__item:has(.gnb__dropdown--mega) .gnb__link::after {
    opacity: 1;
    visibility: visible;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 0.24s cubic-bezier(.2, .8, .2, 1);
}

.gnb__item:has(.gnb__dropdown--mega) .gnb__link:hover::after,
.gnb__item:has(.gnb__dropdown--mega).is-active .gnb__link::after,
.gnb__item:has(.gnb__dropdown--mega).open .gnb__link::after {
    transform: scaleX(1);
}

.gnb__dropdown-mega {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    /* 부모(.gnb__dropdown--mega)의 height:0 일 때 내용이 삐져나오지 않도록 여기서도 한번 더 잘라준다 */
    overflow: hidden;
    background: #fff;
    /* 3차 프로토타입 .panel{border-top:1px solid #eee;border-bottom:1px solid #eee;} 그대로:
       테두리를 부모가 아니라 여기(내용물)에 둬서, 패널이 닫혀 있을 때는(부모 height:0 + overflow:hidden)
       같이 잘려서 안 보이고, 열렸을 때만 위아래 구분선으로 보이게 한다. */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* 아래 수치·색상은 3차 확정 프로토타입의 .sidebar/.intro/.cols/.row/.cell/.gh/.item 값 그대로 */
.gnb__dropdown-intro {
    position: relative;
    /* z-index:0 으로 스태킹 컨텍스트를 만들어야 스우시의 z-index:-1 이 이 박스 안에서만 뒤로 가고,
       바깥의 .gnb__dropdown-mega 흰 배경까지 뚫고 나가 가려지지 않는다 */
    z-index: 0;
    flex: 0 0 320px;
    min-height: 520px;
    background: #f5f5f5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* 원본은 title+desc 를 묶은 .intro 래퍼와 하단 배너 사이를 space-between 으로 띄웠다.
       배너를 아직 안 넣었으니 title/desc 만 위쪽에 16px 간격으로 붙인다(.intro{gap:16px}과 동일 값) */
    justify-content: flex-start;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

/* 스우시 장식: 사이드바(320px)보다 넓은 그래픽이 overflow:hidden 에 잘려 일부만 비쳐 보이는 게 원본 의도.
   position:absolute 만으로는 정적 배치된 title/desc 보다 위에 그려지므로(포지션 없는 요소보다 포지션 있는
   요소가 항상 나중에 그려짐) z-index:-1 로 텍스트 뒤로 보낸다 — 위 .gnb__dropdown-intro 의 스태킹 컨텍스트 안에서만 */
.gnb__dropdown-intro-swoosh {
    position: absolute;
    left: 40px;
    top: 154px;
    width: 559.48px;
    height: 324.81px;
    /* base.css 의 전역 리셋 img{max-width:100%;height:auto} 가 width 보다 나중에 적용되는
       게 아니라 "같이" 적용돼(서로 다른 속성이라 specificity 경쟁이 안 됨), 부모 사이드바
       폭(320px)로 강제로 눌려 있었다. max-width/height 를 풀어서 원래 크기 그대로 나오게 한다. */
    max-width: none;
    max-height: none;
    pointer-events: none;
    z-index: -1;
}

.gnb__dropdown-intro-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: #111;
    margin: 0 0 16px;
}

.gnb__dropdown-intro-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #333;
    margin: 0;
}

.gnb__dropdown-cols {
    flex: 1;
    padding: 40px 64px;
    min-width: 0;
    box-sizing: border-box;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/* 예전엔 패널마다 3/4/5칸 짜리 .gnb__dropdown-row 를 여러 개 만들어 칸 수만큼 셀을
   미리 나눠 담아야 했다(칸이 늘거나 줄면 row 를 새로 쪼개야 하는 수동 작업). 이제 패널당
   .gnb__dropdown-row 하나에 셀을 전부 펼쳐 담고, grid-template-columns 로 열 개수만
   지정하면 넘치는 셀은 grid 가 알아서 다음 줄로 자동 배치한다(row-gap 이 그 줄 간격).
   칸 수는 .gnb__dropdown-row--col3/4/5 로 패널마다 지정 — 셀이 그 수보다 적어도(예: 3칸
   레이아웃인데 셀 2개) 빈 칸으로 남겨 다른 패널과 셀 폭이 어긋나지 않게 한다. */
.gnb__dropdown-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 32px;
    row-gap: 24px;
}

.gnb__dropdown-row--col3 {
    grid-template-columns: repeat(3, 1fr);
}

.gnb__dropdown-row--col4 {
    grid-template-columns: repeat(4, 1fr);
}

.gnb__dropdown-row--col5 {
    grid-template-columns: repeat(5, 1fr);
}

.gnb__dropdown-cell {
    min-width: 0;
    padding-bottom: 6px;
}

.gnb__dropdown-group-title {
    position: relative;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: #111;
    letter-spacing: -0.02em;
    padding-bottom: 8px;
    margin: 0 0 12px;
    transition: color 0.18s;
}

/* 밑줄: 회색 바탕 위에 파란 바가 왼쪽부터 자라나며 덮는다(scaleX) */
.gnb__dropdown-group-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #dcdcdc;
}

.gnb__dropdown-group-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #0047bb;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
    z-index: 1;
}

/* 원본 .cell.lit: 항목(.item)에 호버 중일 때만 타이틀이 밝아진다. 타이틀 자체를 호버해도 반응 없음 */
.gnb__dropdown-cell:has(.gnb__dropdown-group-link:hover) .gnb__dropdown-group-title {
    color: #0047bb;
}

.gnb__dropdown-cell:has(.gnb__dropdown-group-link:hover) .gnb__dropdown-group-title::before {
    transform: scaleX(1);
}

.gnb__dropdown-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gnb__dropdown-group-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #3a3a3a;
    letter-spacing: -0.015em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, padding-right 0.15s;
}

.gnb__dropdown-group-link:hover {
    background: rgba(0, 71, 187, 0.07);
    color: #0047bb;
    padding-right: 36px;
}

.gnb__dropdown-group-link-bar {
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: 16px;
    background: #0047bb;
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transform: scaleY(0.3);
    transition: opacity 0.16s, transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

.gnb__dropdown-group-link:hover .gnb__dropdown-group-link-bar {
    opacity: 1;
    transform: none;
}

.gnb__dropdown-group-link-chev {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 20px;
    height: 20px;
    color: #0047bb;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.16s, transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

.gnb__dropdown-group-link:hover .gnb__dropdown-group-link-chev {
    opacity: 1;
    transform: none;
}

/* ========== 유틸리티 버튼 스타일 ========== */
.util-list {
    display: flex;
    gap: 16px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.util__item {
    display: flex;
    align-items: center;
}

.util__btn {
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.util__btn.type-lang {
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_globe.svg) no-repeat center center / contain;
    filter: none;
    transition: filter 0.3s ease-in-out;
}

.util__btn.type-search {
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_search.svg) no-repeat center center / contain;
    filter: none;
    transition: filter 0.3s ease-in-out;
}

/* 운영 검색 아이콘은 얇은 선(stroke), 피그마는 채움(fill) 스타일이라 모양이 다름 —
   type-search--figma 로 스코프해서 운영 아이콘은 그대로 둔다 */
.util__btn.type-search--figma {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/ico-search-2ccaf9b6f539087c16a4463443cdba2d.svg") no-repeat center center / contain;
}

.util__btn.type-menu {
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_menu.svg) no-repeat center center / contain;
    filter: none;
    transition: filter 0.3s ease-in-out;
}

body:has(#main) .header:not(.is-scrolled) .util__btn.type-lang,
body:has(#main) .header:not(.is-scrolled) .util__btn.type-search,
body:has(#main) .header:not(.is-scrolled) .util__btn.type-menu {
    filter: brightness(0) invert(1);
}

.header.is-scrolled .util__btn.type-lang,
.header.is-scrolled .util__btn.type-search,
.header.is-scrolled .util__btn.type-menu {
    filter: none;
}

.header.is-menu-open .util__btn.type-lang,
.header.is-menu-open .util__btn.type-search,
.header.is-menu-open .util__btn.type-menu {
    filter: none !important;
}

/* .type-lang 의 filter 기반 색상 전환(흰색↔검정)이 텍스트에도 그대로 적용되므로 색상 규칙은 새로 안 만든다 */
.util__btn.type-lang--text {
    width: auto;
    min-width: 32px;
    height: 24px;
    padding: 0 2px;
    background: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 피그마 Polygon 1(node 362:5771) — KO 옆 드롭다운 화살표.
   피그마 원본은 20px 텍스트 기준 12x8 이었지만, 실제 버튼 폰트는 15px 라 같은 비율(15/20)로
   축소했다. 위쪽을 향한 삼각형 SVG 를 180도 돌려 아래를 향하게 한다. */
.lang-btn__arrow {
    width: 8px;
    height: auto;
    transform: rotate(180deg);
    flex: none;
}


.lang-dropdown {
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    width: 120px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1100;
}

.lang-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lang-dropdown__list li {
    margin-bottom: 16px;
}

.lang-dropdown__list li:last-of-type {
    margin-bottom: 0;
}

.lang-dropdown__option {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-dropdown__option:hover {
    color: var(--primary-color);
}

.lang-dropdown__option.active,
.lang-dropdown__option[aria-pressed="true"] {
    color: var(--primary-color);
}

@media screen and (max-width: 768px) {
    .lang-dropdown {
        top: 46px;
    }
}

/* ========== 헤더 반응형 스타일 ========== */
@media (max-width: 1280px) {
    .header {
        height: 72px;
    }

    .header-inner {
        height: 100%;
    }

    .wyd-logo img {
        height: 50px;
    }

    .gnb__link {
        height: 72px;
    }

    .gnb {
        display: none;
    }
}

/* 1024px 이하 구간에서 좌우 패딩 비율을 절반으로 줄임(200→100) — 768px 미만은
   아래 블록이 소스상 뒤에 있어 20px 고정값으로 다시 덮어씀 */
@media (max-width: 1024px) {
    :root {
        --content-padding-x: calc(100vw / 1920 * 100);
    }
}

@media (max-width: 768px) {
    .header-inner {
        padding: 0 20px;
    }

    :root {
        --content-padding-x: 20px;
    }

    .gnb {
        display: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .gnb__link.gnb__link:hover::after {
        background: var(--primary-color);
    }
}

/* ========== D-day 카운트다운 스타일 ========== */
.d-day {
    position: absolute;
    top: 127px;
    right: 10vw;
    z-index: 10;
}

.d-day__inner {
    position: relative;
    width: 115px;
    height: 115px;
}

.d-day__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    color: var(--text-primary);
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(251, 225, 38, 0.3) 0%, #fbe126 100%),
    #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.d-day__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.d-day__label {
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: var(--text-primary);
}

.d-day__rotating-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: rotate 10s linear infinite;
}

.d-day__rotating-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media screen and (max-width: 768px) {
    /* 일단 삭제하지 말고 모바일에서만 숨김 처리 — display:none 만 추가 */
    .d-day {
        display: none;
        top: 85px;
        right: 20px;
    }

    .d-day__inner {
        width: 96px;
        height: 95px;
    }

    .d-day__circle {
        width: 60px;
        height: 60px;
    }

    .d-day__label {
        font-size: 14px;
    }
}

/* ========== 히어로 섹션 스타일 ========== */
.hero-swiper {
    position: relative;
    width: 100%;
}

.hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 848px;
    background-size: 1920px 848px;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.hero-swiper .swiper-slide.slide-1 {
    background-image: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/main_visual_01.jpg);
}

.hero-swiper .swiper-slide.slide-2 {
    background-image: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/main_visual_02.jpg);
}

.hero-swiper .swiper-slide .hero-slide__content {
    width: 100%;
    max-width: var(--container-2xl);
    padding: 236px var(--content-padding-x) 0;
}

.hero-swiper .swiper-slide .hero-slide__title {
    font-size: var(--clamp-size-100);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -2px;
    color: #fff;
}

.hero-swiper .swiper-slide .hero-slide__subtitle {
    font-size: var(--clamp-size-32);
    font-weight: 300;
    color: #fff;
    line-height: 1.5;
    letter-spacing: -0.72px;
    word-break: keep-all;
}

@media screen and (min-width: 1920px) {
    .hero-swiper .swiper-slide {
        background-size: cover;
    }
}

@media screen and (max-width: 768px) {
    .hero-swiper .swiper-slide .hero-slide__content {
        padding-top: 203px;
    }

    .hero-swiper .swiper-slide .hero-slide__title {
        font-size: 44px;
    }

    .hero-swiper .swiper-slide .hero-slide__subtitle {
        margin-top: 8px;
        font-size: 24px;
    }
}

/* ========== 메인 개편(renewal) 콘텐츠 영역 시작 — .main-header ========== */
/* ========== 새 메인 히어로 ========== */
.main-header {
    position: relative;
}

.wyd-hero-swoosh {
    position: absolute;
    top: clamp(51px, calc(-50.1953125vw + 693.5px), 308px);
    left: calc(-21 / 1920 * 100%);
    width: calc(1993 / 1920 * 100%);
    height: clamp(200px, calc(169.140625vw - 1099px), 1066px);
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .wyd-hero-swoosh {
        top: 308px;
        left: 0;
        width: 100%;
        height: 200px;
    }
}

.wyd-hero {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: clamp(261px, calc(57.8125vw - 183px), 557px);
}

.wyd-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-clip-path: ellipse(110% 118.74% at 50% -18.74%);
    clip-path: ellipse(110% 118.74% at 50% -18.74%);
}

@media (max-width: 768px) {
    .wyd-hero {
        height: auto;
        min-height: 261px;
    }

    /* 같은 특이도라 이 블록이 기본 규칙보다 반드시 뒤에 와야 override 가 먹힌다 */
    .wyd-hero__bg {
        -webkit-clip-path: ellipse(177.33% 118.74% at 50% -18.74%);
        clip-path: ellipse(177.33% 118.74% at 50% -18.74%);
    }
}

.wyd-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-2xl);
    height: auto;
    margin: 0 auto;
    padding: 0 var(--content-padding-x);
    display: flex;
    flex-direction: column;
    padding-top: clamp(85px, calc(17.96875vw - 53px), 177px);
}

.wyd-hero__quote {
    margin: 0 0 clamp(4px, calc(5.078vw - 35px), 30px);
    font-size: clamp(40px, calc(7.03125vw - 14px), 76px);
    font-weight: 300;
    color: #fff;
    line-height: 1.1;
    letter-spacing: clamp(-1.52px, calc(-0.140625vw + 0.28px), -0.8px);
    text-align: center;
    word-break: keep-all;
}

.wyd-hero__ref {
    margin: 0 0 clamp(30px, calc(15.82vw - 91.5px), 75px);
    font-size: clamp(20px, calc(3.515625vw - 7px), 38px);
    font-weight: 300;
    color: #fff;
    line-height: 1.5;
    letter-spacing: clamp(-0.76px, calc(-0.0703125vw + 0.14px), -0.4px);
    text-align: center;
}

.wyd-hero__btn {
    align-self: center;
    display: inline-flex;
    height: clamp(42px, calc(7.422vw - 15px), 80px);
    margin-bottom: clamp(-40px, calc(-3.711vw + 7.5px), -21px);
    padding: 0 clamp(38px, calc(6.64vw - 13px), 72px);
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background: #fff;
    color: #0047bb;
    font-size: clamp(17px, calc(2.9297vw - 5.5px), 32px);
    font-weight: 600;
    letter-spacing: -0.32px;
    border-radius: 8px;
    border: 1px solid #0047bb;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wyd-hero__btn:hover {
    background: #0047bb;
    color: #fff;
}

@media (max-width: 768px) {
    .wyd-hero__content {
        display: flex;
        flex-direction: column;
        height: auto;
        padding-top: 100px;
    }

    .wyd-hero__quote {
        position: static;
        margin: 0 0 4px;
        font-size: 40px;
        line-height: 1.1;
        letter-spacing: -0.8px;
    }

    .wyd-hero__ref {
        position: static;
        margin: 0 0 30px;
        font-size: 20px;
        letter-spacing: -0.4px;
    }

    .wyd-hero__btn {
        position: static;
        left: auto;
        transform: none;
        align-self: center;
        max-width: 335px;
        width: 90%;
        height: auto;
        min-height: 48px;
        margin-bottom: -24px;
        padding: 10px 20px;
        white-space: normal;
        line-height: 1.3;
        font-size: 18px;
    }
}

.wyd-hero-intro {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-2xl);
    margin: clamp(70px, calc(1.171875vw + 61px), 76px) auto 0;
    padding: 0 var(--content-padding-x);
    font-size: clamp(23px, calc(4.102vw - 8.5px), 44px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #666;
    text-align: center;
    word-break: keep-all;
}

/* 모바일 전용 줄바꿈 — PC 에서는 숨김 */
.wyd-hero-intro__mo-break {
    display: none;
}

.wyd-hero__intro-highlight {
    color: #0047bb;
}

@media (max-width: 768px) {
    .wyd-hero-intro {
        margin-top: 46px;
        padding: 0 24px;
        font-size: 24px;
        color: #222;
    }

    .wyd-hero-intro__mo-break {
        display: inline;
    }
}

.hero-swiper-progress {
    position: absolute;
    bottom: 118px;
    left: var(--content-padding-x);
    width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    z-index: 10;
}

.hero-swiper-progress .progress-container {
    width: 140px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* width 대신 scaleX — JS(rAF)가 매 프레임 갱신하므로 레이아웃 유발 없이 합성 단계에서만 처리 */
.hero-swiper-progress .progress {
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.1s linear;
    will-change: transform;
}

.hero-swiper-progress .current-slide {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.32px;
    color: #fff;
}

.hero-swiper-progress .swiper-nav-w--prev,
.hero-swiper-progress .swiper-nav-w--next {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-swiper-progress .swiper-nav-w--prev:disabled,
.hero-swiper-progress .swiper-nav-w--next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.hero-swiper-progress .swiper-nav-w--prev-icon,
.hero-swiper-progress .swiper-nav-w--next-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_arrow_r_w.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hero-swiper-progress .swiper-nav-w--prev-icon {
    transform: rotate(-180deg);
}

.hero-slide__btn {
    display: inline-flex;
    margin-top: 40px;
    min-width: 120px;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.32px;
    border-radius: 8px;
    border: 1px solid #fff;
}

@media screen and (max-width: 1024px) {
    .hero-swiper .swiper-slide {
        height: 653px;
        background-size: calc(1920px * 653 / 848) 653px;
    }
}

@media screen and (max-width: 768px) {
    .hero-swiper-progress {
        bottom: 52px;
    }

    .hero-slide__btn {
        margin-top: 52px;
    }
}

/* ========== 참가 등록/교구대회 + 아이콘 카드 그리드 ========== */
.wyd-cards-grid {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, calc(3.125vw - 8px), 32px);
    width: 100%;
    margin-top: clamp(80px, calc(8.59375vw + 14px), 124px);
    padding: 0 var(--content-padding-x);
}

.wyd-cards-grid__cards {
    flex: 744 1 0;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(3.125vw - 8px), 32px);
}

.wyd-cards-grid__cards .wyd-card {
    flex: 1 1 auto;
}

.wyd-cards-grid__icons {
    flex: 712 1 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, calc(3.125vw - 8px), 32px);
}

.wyd-card {
    position: relative;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
}

.wyd-card--register {
    background-color: #0047bb;
}

.wyd-card--diocese {
    background-color: #f22634;
}

.wyd-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wyd-card__text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(28px, calc(2.34375vw + 10px), 40px) calc(clamp(16px, calc(4.6875vw - 20px), 40px) + clamp(40px, calc(2.34375vw + 22px), 52px) + 16px) clamp(28px, calc(2.34375vw + 10px), 40px) clamp(24px, calc(2.34375vw + 6px), 36px);
}

.wyd-card__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(4px, calc(0.78125vw - 2px), 8px);
}

.wyd-card__title {
    font-size: clamp(24px, calc(1.5625vw + 12px), 32px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.64px;
    color: #fff;
}

.wyd-card__desc {
    font-size: clamp(16px, calc(0.78125vw + 10px), 20px);
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: #fff;
}

.wyd-card__arrow {
    position: absolute;
    right: clamp(16px, calc(4.6875vw - 20px), 40px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(40px, calc(2.34375vw + 22px), 52px);
    height: clamp(40px, calc(2.34375vw + 22px), 52px);
}

.wyd-card__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wyd-icon-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(0.78125vw + 6px), 16px);
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 24px;
    padding: clamp(16px, calc(1.5625vw + 4px), 24px);
    text-decoration: none;
    /* box-shadow 는 none 대신 alpha:0 으로 깔아둬야 호버 전환이 부드럽다 */
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* .mt 가 같은 특이도로 transition 을 덮어써서 부모 셀렉터로 특이도를 올림 */
.wyd-cards-grid .wyd-icon-card {
    transition: border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.wyd-icon-card:hover {
    border-color: #0047bb;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
}

.wyd-icon-card__icon {
    flex-shrink: 0;
    width: 96px;
    height: auto;
    aspect-ratio: 1 / 1;
}

.wyd-icon-card__title {
    font-size: clamp(20px, calc(0.78125vw + 14px), 24px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: #222;
    word-break: keep-all;
}

.wyd-icon-card__arrow {
    position: absolute;
    right: clamp(16px, calc(0.78125vw + 4px), 20px);
    bottom: clamp(16px, calc(0.78125vw + 4px), 20px);
    width: 24px;
    height: 24px;
}

.wyd-icon-card__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wyd-icon-card__arrow svg path {
    transition: fill 0.3s ease;
}

.wyd-icon-card:hover .wyd-icon-card__arrow svg path {
    fill: #0047bb;
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .wyd-cards-grid {
        flex-direction: column;
    }

    .wyd-cards-grid__cards {
        flex-direction: row;
    }

    .wyd-cards-grid__cards .wyd-card {
        width: 100%;
        min-height: clamp(146px, calc(5.078125vw + 107px), 172px);
    }
}

@media screen and (max-width: 768px) {
    .wyd-cards-grid {
        display: flex;
        flex-direction: column;
        margin-top: 80px;
    }

    .wyd-cards-grid__icons {
        margin-top: 16px;
    }

    .wyd-cards-grid__cards .wyd-card {
        flex: none;
    }

    .wyd-card {
        min-height: clamp(123px, calc(5.078125vw + 107px), 146px);
        border-radius: 16px;
    }

    .wyd-card--register {
        order: 1;
    }

    .wyd-card--diocese {
        order: 2;
        /* #f42736 — PC(#f22634)와 다른 값이지만 오타 아님, 모바일 전용 지정 */
        background-color: #f42736;
    }

    .wyd-card__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .wyd-card__text {
        padding: 24px 72px 24px 24px;
    }

    .wyd-card__desc {
        font-size: 16px;
    }

    .wyd-cards-grid__icons {
        display: flex;
        flex-direction: column;
    }

    .wyd-icon-card {
        height: clamp(123px, calc(5.078125vw + 107px), 146px);
        gap: 12px;
        order: 4;
        border-radius: 16px;
    }

    .wyd-icon-card--pilgrim {
        order: 3;
        margin-top: 24px;
    }

    .wyd-icon-card__title {
        font-size: 20px;
    }

    .wyd-icon-card__icon {
        width: clamp(70px, calc(5.8036vw + 51.4286px), 96px);
    }
}

/* ========== WYD 뉴스 ========== */
.wyd-news {
    margin-top: 120px;
    padding: 120px 0;
    background: #f5f5f5;
}

.wyd-news__inner {
    width: 100%;
    padding: 0 var(--content-padding-x);
}

.wyd-news__head {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: clamp(10px, calc(2.45vw + 1.18px), 20px);
}

.wyd-news__title {
    /* WYD뉴스/관련영상/Gallery/공지사항/FAQ 전체 공유 클래스 */
    font-size: clamp(28px, calc(1.5625vw + 16px), 36px);
    font-weight: 700;
    letter-spacing: -0.18px;
    color: #111;
}

.wyd-news__more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-left: auto;
    min-width: clamp(110px, calc(5.859375vw + 65px), 140px);
    white-space: nowrap;
    padding: clamp(8px, calc(0.78125vw + 2px), 12px) 12px clamp(8px, calc(0.78125vw + 2px), 12px) clamp(20px, calc(0.78125vw + 14px), 24px);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 999px;
    font-size: clamp(16px, calc(0.390625vw + 13px), 18px);
    font-weight: 600;
    letter-spacing: -0.36px;
    color: #111;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.wyd-news__more .wyd-more__icon {
    width: clamp(20px, calc(1.5625vw + 8px), 28px);
    height: auto;
    aspect-ratio: 1 / 1;
    flex-shrink:0;
}

@media screen and (max-width: 768px) {
    .wyd-news__more {
        min-width: 110px;
        padding: 8px 12px 8px 20px;
        font-size: 16px;
    }

    .wyd-news__more .wyd-more__icon {
        width: 20px;
    }
}

.wyd-news__more .wyd-more__circle {
    transition: fill 0.3s ease;
}

/* 막대를 오른쪽 기준으로 줄여 "→"가 "›"로 보이게 */
.wyd-news__more .wyd-more__arrow-bar {
    transform-origin: 17.1125px 14px;
    transition: transform 0.3s ease;
}

.wyd-news__more .wyd-more__arrow-head {
    transition: transform 0.3s ease;
}

.wyd-news__more:hover {
    border-color: #0047bb;
    color: #0047bb;
}

.wyd-news__more:hover .wyd-more__circle {
    fill: #0047bb;
}

.wyd-news__more:hover .wyd-more__arrow-bar {
    transform: scaleX(0);
}

.wyd-news__more:hover .wyd-more__arrow-head {
    transform: translateX(-3.2px);
}

.wyd-news__swiper {
    margin-top: 40px;
}

/* Swiper 기본 CSS의 overflow:hidden 이 카드 그림자를 잘라서 visible 로 풀어준다 —
   base.css 의 body/html overflow-x:hidden 이 가로 스크롤을 이미 막아주므로 안전 */
.wyd-news__swiper .swiper,
.wyd-news__swiper .swiper-wrapper {
    overflow: visible;
}

.wyd-news__dots {
    display: none;
}

.wyd-news__list {
    display: flex;
    justify-content: flex-start;
    gap: clamp(20px, 2vw, 32px);
}

.wyd-news__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 356px;
    max-width: 356px;
    min-width: 0;
    padding: 24px;
    background: #fff;
    border-radius: 20px;
    border: 2px solid transparent;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

/* .mt 의 transition:all 이 덮어쓰는 걸 막기 위해 부모 셀렉터로 특이도를 높임 */
.wyd-news__list .wyd-news__card {
    transition: border-color 0.3s ease,
    opacity 0.8s cubic-bezier(0.65, 0.05, 0.36, 1),
    transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.wyd-news__card:hover {
    border-color: #0047bb;
}

.wyd-news__date {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}

.wyd-news__thumb {
    width: 100%;
    height: 257px;
    margin-top: 16px;
    border-radius: 20px;
    overflow: hidden;
}

.wyd-news__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wyd-news__card-title {
    margin-top: 24px;
    height: 63px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wyd-news__card-desc {
    margin-top: 24px;
    height: 63px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wyd-news__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 64px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.wyd-news__link-icon {
    width: 24px;
    height: 24px;
}

.wyd-news__link-icon path {
    transition: fill 0.3s ease;
}

.wyd-news__card:hover .wyd-news__link {
    color: #0047bb;
}

.wyd-news__card:hover .wyd-news__link-icon path {
    fill: #0047bb;
}

.wyd-news__subscribe {
    display: none;
    justify-content: center;
    gap: 12px;
    margin-top: 56px;
}

.wyd-news__email {
    width: 590px;
    height: 52px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 18px;
    letter-spacing: -0.36px;
    color: #111;
}

.wyd-news__email::placeholder {
    color: #bcbcbc;
}

.wyd-news__subscribe-btn {
    width: 180px;
    height: 52px;
    background: #222;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

@media screen and (min-width: 769px) {
    .wyd-news__list {
        transform: none !important;
    }

    .wyd-news__card {
        width: auto !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .wyd-news__list {
        flex-wrap: wrap;
    }

    .wyd-news__card {
        flex: 1 1 calc((100% - clamp(20px, 2vw, 32px)) / 2);
        max-width: calc((100% - clamp(20px, 2vw, 32px)) / 2);
    }
}

@media screen and (max-width: 768px) {
    .wyd-news {
        margin-top: 80px;
        padding: 80px 0;
    }

    /* 1024px 이하의 flex-wrap:wrap 이 남아있으면 Swiper 슬라이드가 세로로 쌓임 */
    .wyd-news__list {
        flex-wrap: nowrap;
        gap:0;
    }

    .wyd-news__card {
        flex: none;
        width: 100%;
        max-width: none;
    }

    /* swiper-bundle 기본 pagination 은 position:absolute 라 static 으로 되돌림 */
    .wyd-news__dots {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 24px;
    }

    .wyd-news__dots .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0;
        border-radius: 999px;
        background: #ddd;
        opacity: 1;
        transition: width 0.3s ease, background-color 0.3s ease;
    }

    .wyd-news__dots .swiper-pagination-bullet--active {
        width: 32px;
        background: #000;
    }

    .wyd-news__subscribe {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 52px;
    }

    .wyd-news__email {
        width: 100%;
        max-width: 590px;
    }
}

/* ========== 함께 만드는 대회 + WYD 십자가 순례 ========== */
.wyd-together {
    margin-top: clamp(80px, calc(7.8125vw + 20px), 120px);
}

.wyd-together__inner {
    width: 100%;
    padding: 0 var(--content-padding-x);
}

.wyd-together__title {
    font-size: clamp(28px, calc(1.5625vw + 16px), 36px);
    font-weight: 700;
    /* line-height 는 비율이 아니라 실제 px로 보간 —
       unitless 비율은 vw 길이와 calc() 로 못 섞인다 */
    line-height: clamp(36.4px, calc(3.4375vw + 10px), 54px);
    letter-spacing: clamp(-0.72px, calc(-0.11328125vw + 0.73px), -0.14px);
    color: #222;
}

.wyd-together__desc {
    margin-top: clamp(8px, calc(-1.5625vw + 28px), 16px);
    font-size: clamp(16px, calc(1.25vw + 4px), 24px);
    font-weight: 400;
    line-height: clamp(22.4px, calc(2.65625vw + 2px), 36px);
    letter-spacing: clamp(-0.48px, calc(-0.015625vw - 0.28px), -0.4px);
    color: #222;
}

.wyd-together__cards {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, calc(1.5625vw + 12px), 32px);
    margin-top: clamp(24px, 3.125vw, 40px);
}

.wyd-together__card-group {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: clamp(24px, calc(1.5625vw + 12px), 32px);
}

.wyd-together__card,
.wyd-together__banner {
    position: relative;
    flex: 356 1 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.wyd-together__banner {
    display: block;
    flex: 1 1 0;
    min-height: clamp(254px, calc(47.2656vw - 109px), 496px);
    border-radius: 36px;
}

.wyd-together__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: clamp(16px, calc(2.34375vw - 2px), 28px);
    min-height: clamp(254px, calc(47.2656vw - 109px), 496px);
    padding: clamp(24px, calc(3.90625vw - 6px), 44px) clamp(20px, calc(1.5625vw + 8px), 28px);
    background-size: cover;
    background-position: center;
}

.wyd-together__card--rosary {
    border-radius: 24px 0 0 24px;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/together-rosary-bg-5a89d45d18edeb7e4c9b2fe2b1b6a826.webp");
}

.wyd-together__card--onsoom {
    border-radius: 0 24px 24px 0;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/together-onsoom-bg-91264143fa09e95f7b04339a6317a4ca.webp");
}

.wyd-together__card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: inherit;
}

.wyd-together__card-title {
    position: relative;
    margin-right: auto;
    min-height: 76px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.56px;
    color: #fff;
    word-break: keep-all;
}

.wyd-together__card-arrow {
    position: relative;
    margin-top: clamp(16px, calc(2.34375vw - 2px), 28px);
    margin-left: auto;
    width: clamp(40px, calc(2.34375vw + 22px), 52px);
    height: clamp(40px, calc(2.34375vw + 22px), 52px);
}

.wyd-together__card-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wyd-together__arrow-fill {
    transition: fill 0.3s ease;
}

.wyd-together__arrow-path {
    transition: fill 0.3s ease;
}

.wyd-together__card:hover .wyd-together__arrow-fill,
.wyd-card:hover .wyd-together__arrow-fill {
    fill: #fff;
}

.wyd-together__card:hover .wyd-together__arrow-path,
.wyd-card:hover .wyd-together__arrow-path {
    fill: #111;
}

.wyd-together__stat {
    position: relative;
    width: fit-content;
    text-align: center;
}

.wyd-together__stat-value {
    font-size: clamp(40px, calc(7.03125vw - 14px), 76px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -1.52px;
    color: #fff;
}

/* 묵주기도(링 게이지) 쪽 80% 만 line-height 1 로 — 텍스트 박스를 좁혀 링 중앙에 더 붙게 */
.wyd-together__stat--ring .wyd-together__stat-value {
    line-height: 1;
}

.wyd-together__stat-label {
    margin-top: 4px;
    font-size: clamp(14px, calc(0.390625vw + 11px), 16px);
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #ccc;
}

/* 온숨 캠페인 - 글로벌 나무심기 */
.wyd-together__project {
    position: relative;
    width: fit-content;
    text-align: center;
}

.wyd-together__project-title {
    font-size: clamp(32px, calc(2.34375vw + 17px), 46px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.92px;
    color: #fff;
}

.wyd-together__project-desc {
    margin-top: 8px;
    font-size: clamp(14px, calc(0.390625vw + 11px), 16px);
    line-height: 1.4;
    letter-spacing: -0.32px;
    color: #fff;
}

.wyd-together__stat--ring {
    width: clamp(202px, calc(6.640625vw + 151px), 236px);
    height: clamp(202px, calc(6.640625vw + 151px), 236px);
}

.wyd-together__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* SVG 기본 0도는 3시 방향이라 12시로 회전 */
    transform: rotate(-90deg);
}

.wyd-together__ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 12.8px;
}

/* stroke-dashoffset 은 JS 가 매 프레임 직접 갱신 — transition 두면 rAF 와 겹쳐 밀림 */
.wyd-together__ring-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 12.8px;
    stroke-linecap: square;
    stroke-dasharray: 661px;
    stroke-dashoffset: 661px;
}

.wyd-together__stat--ring .wyd-together__stat-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wyd-together__banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.wyd-together__banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
}

.wyd-together__banner-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 0 24px;
}

.wyd-together__banner-title {
    font-size: clamp(32px, calc(2.34375vw + 14px), 44px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: clamp(-0.88px, calc(-0.046875vw - 0.28px), -0.64px);
    color: #000;
}

.wyd-together__banner-title span {
    color: #0047bb;
}

.wyd-together__banner-desc {
    margin-top: clamp(32px, calc(-1.5625vw + 52px), 40px);
    font-size: clamp(16px, calc(0.78125vw + 10px), 20px);
    color: #222;
}

.wyd-together__banner-btn {
    margin-top: 16px;
    margin-left: 0;
}

@media screen and (max-width: 1600px) and (min-width: 1101px) {
    .wyd-together__card-group {
        flex: 1.5 1 0;
    }

    .wyd-together__banner-title {
        font-size: clamp(36px, calc(4.4693vw - 13.21px), 44px);
    }
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .wyd-together__cards {
        flex-wrap: wrap;
    }

    .wyd-together__card-group {
        flex: 1 1 100%;
    }

    .wyd-together__card {
        flex: 1 1 0;
        min-width: 0;
    }

    .wyd-together__banner {
        height: 360px;
        flex: 1 1 100%;
    }

    .wyd-together__banner-title {
        font-size: clamp(28px, calc(2.41691vw + 9.41px), 36px);
    }

    .wyd-together__banner-desc {
        margin-top: clamp(16px, calc(-2.4169vw + 42.59px), 24px);
    }
}

@media screen and (max-width: 1100px) {
    .wyd-together__stat--ring {
        width: 202px;
        height: 202px;
    }
}

@media screen and (max-width: 768px) {
    .wyd-together {
        margin-top: 80px;
    }

    /* 완전 세로 스택. flex:1 의 flex-basis:0% 가 column 방향에서 height 대신
       flex-grow 로 공간을 나눠버리는 문제라 꺼둔다 */
    .wyd-together__cards {
        flex-direction: column;
    }

    .wyd-together__card-group {
        flex-direction: column;
        flex: none;
    }

    .wyd-together__card,
    .wyd-together__banner {
        flex: none;
    }

    .wyd-together__title {
        color: #111;
        line-height: 1.3;
        letter-spacing: -0.14px;
    }

    .wyd-together__desc {
        margin-top: 16px;
        line-height: 1.4;
        letter-spacing: -0.4px;
        color: #111;
    }

    .wyd-together__cards {
        gap: 24px;
    }

    .wyd-together__banner {
        height: 360px;
        border-radius: 16px;
    }

    .wyd-together__card {
        min-height: 360px;
        border-radius: 16px;
    }

    .wyd-together__card--rosary,
    .wyd-together__card--onsoom {
        border-radius: 16px;
    }

    .wyd-together__card-title {
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: -0.48px;
    }

    .wyd-together__project-title {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: -0.64px;
    }

    .wyd-together__project-desc {
        line-height: 1.3;
    }

    .wyd-together__banner-title {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: -0.64px;
    }

    .wyd-together__banner-desc {
        margin-top: 15px;
    }
}

/* ========== 관련영상 + Photo Gallery ========== */
.wyd-media {
    margin-top: clamp(80px, calc(7.8125vw + 20px), 120px);
}

.wyd-media__inner {
    display: flex;
    gap: 32px;
    width: 100%;
    padding: 0 var(--content-padding-x);
}

.wyd-media__col {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.125vw, 40px);
    flex: 1;
    min-width: 0;
}

.wyd-media__head {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: clamp(10px, calc(2.45vw + 1.18px), 20px);
}

.wyd-media__card {
    position: relative;
    display: block;
    height: clamp(188px, calc(44.921875vw - 157px), 418px);
    background: #dcdcdc;
    border-radius: 24px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.wyd-media__video,
.wyd-media__card iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.wyd-media__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wyd-media__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px) {
    .wyd-media__inner {
        flex-direction: column;
        gap: 80px;
    }
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .wyd-media__card {
        min-height: 340px;
    }
}

@media screen and (max-width: 768px) {
    .wyd-media {
        margin-top: 80px;
    }
}

/* ========== 공지사항 + 자주 묻는 질문 ========== */
.wyd-notice {
    margin-top: clamp(80px, calc(7.8125vw + 20px), 120px);
    margin-bottom: clamp(42px, calc(8.98vw - 27px), 88px);
}

.wyd-notice__inner {
    display: flex;
    gap: 32px;
    width: 100%;
    padding: 0 var(--content-padding-x);
}

.wyd-notice__col {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.125vw, 40px);
    flex: 1;
    min-width: 0;
}

.wyd-notice__head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(10px, calc(2.45vw + 1.18px), 20px);
    line-height:1.2;
    height:55px;
}

.wyd-list {
    width: 100%;
}

.wyd-list__row {
    border-bottom: 1px solid #e9e9e9;
}

.wyd-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.wyd-list__row:hover .wyd-list__link {
    background: #f5f5f5;
}

.wyd-list__title {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(18px, calc(0.390625vw + 15px), 20px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #111;
}

.wyd-list__meta {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.45px;
    color: #666;
}

@media screen and (max-width: 1024px) {
    .wyd-notice__inner {
        flex-direction: column;
        gap: 80px;
    }
}

@media screen and (max-width: 768px) {
    .wyd-notice {
        margin-top: 80px;
        margin-bottom: 80px;
    }

    .wyd-notice__head {
        flex-wrap: wrap;
        height:auto;
        min-height:55px;
    }

    .wyd-list__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 16px 0;
    }
}

/* ========== 대회를 후원해 주십시오 ========== */
.wyd-donate {
    position: relative;
    height: clamp(400px, calc(29.296875vw + 175px), 550px);
    overflow: hidden;
}

.wyd-donate__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wyd-donate__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.wyd-donate__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center 대신 상단 패딩 — 비대칭 여백이라 center 하면 아래로 처져 보임 */
    justify-content: flex-start;
    padding-top: clamp(119px, calc(8.75vw + 52px), 164px);
    text-align: center;
}

.wyd-donate__title {
    font-size: clamp(40px, calc(7.03125vw - 14px), 76px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: clamp(-1.52px, calc(-0.140625vw + 0.28px), -0.8px);
    color: #fff;
    word-break: keep-all;
}

.wyd-donate__links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: clamp(16px, calc(6.25vw - 32px), 48px);
}

.wyd-donate__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(20px, calc(0.78125vw + 14px), 24px);
    font-weight: 600;
    letter-spacing: clamp(-0.48px, calc(-0.015625vw - 0.28px), -0.4px);
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.wyd-donate__link:hover {
    color: #bcbcbc;
}

/* <img> 는 내부 색을 못 바꿔서 mask-image + background-color 사용 */
.wyd-donate__link-icon {
    display: inline-block;
    width: 12px;
    height: 9px;
    background-color: #fff;
    -webkit-mask-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/icon-arrow-small-6590c71fd7565997ab48691bf0d4f2cb.svg");
    mask-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/icon-arrow-small-6590c71fd7565997ab48691bf0d4f2cb.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: background-color 0.3s ease;
}

.wyd-donate__link:hover .wyd-donate__link-icon {
    background-color: #bcbcbc;
}

.wyd-donate__divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.4);
}

.wyd-donate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: clamp(335px, calc(12.6953125vw + 237.5px), 400px);
    width: 90%;
    height: clamp(48px, calc(6.25vw), 80px);
    margin-top: clamp(34px, calc(4.296875vw + 1px), 56px);
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    font-size: clamp(18px, calc(1.171875vw + 9px), 24px);
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wyd-donate__btn:hover {
    background: #0047bb;
    border-color: #0047bb;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .wyd-donate__inner {
        padding-top: 92px;
    }

    .wyd-donate__title {
        letter-spacing: -0.8px;
    }

    .wyd-donate__btn {
        max-width: 335px;
        width: 90%;
        height: 48px;
        margin-top: 34px;
        font-size: 18px;
    }

    .wyd-donate__link {
        font-size: 20px;
        letter-spacing: -0.4px;
    }

    .wyd-donate__links {
        margin-top: 16px;
    }
}

.main-body {
    width: 100%;
    padding-bottom: 200px;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/main_pattern_bg_01.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-clip: padding-box;
    background-position: center 240px;
}

/* 후원 배너가 푸터와 바로 맞닿음(gap 0). 운영 .main-body 는 안 건드림 */
.wyd-main-body {
    background: none;
    padding-bottom: 0;
}

/* D-day 를 플로팅 소셜 안으로 옮겨 스크롤을 같이 따라다니게 함.
   .floating-social 의 top/right/position·스크롤 JS는 그대로 두고 D-day 만 static 으로 풀어 쌓는다 */
.wyd-floating-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wyd-floating-wrap .d-day {
    position: static;
}

/* .floating-social 은 ≤1280px 에서 display:none(운영 규칙)인데 D-day 는 계속 보여야
   하므로 래퍼만 다시 켜고 아이콘 목록만 숨긴다. 모바일은 히어로 안 고정 위치에 박아넣고
   스크롤 추적 JS(initFloatingSocialScroll)도 꺼짐(main.html) */
@media screen and (max-width: 1280px) {
    .wyd-floating-wrap {
        display: flex;
        position: absolute;
        top: 127px;
        right: 20px;
        left: auto;
        bottom: auto;
    }

    .wyd-floating-wrap .floating-social__list {
        display: none;
    }
}

/* ========== 메인 개편(renewal) 콘텐츠 영역 끝 — .wyd-floating-wrap ========== */

.main-section {
    width: 100%;
    margin-bottom: 160px;
}

.main-section:last-child {
    margin-bottom: 0;
}

.section-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--content-padding-x);
}

@media screen and (max-width: 1280px) {
    .main-section {
        margin-bottom: 120px;
    }
}

@media screen and (max-width: 768px) {
    .main-body {
        padding-bottom: 80px;
        background: none;
    }

    .main-section {
        margin-bottom: 64px;
    }

    /* 위 운영 .main-body 규칙이 padding-bottom:80px 를 다시 켜는데(같은 특이도, 이 파일
       뒤쪽이라 이김), 모바일에서도 후원 배너가 푸터와 바로 맞닿아야 하므로(피그마 gap 0)
       .wyd-main-body 로 여기서 다시 0으로 되돌린다 — 이후 순서라 이 규칙이 이긴다 */
    .wyd-main-body {
        padding-bottom: 0;
    }
}

/* section-intro 스타일 */
.main-section.section-intro {
    width: 100%;
    margin-top: 120px;
    margin-bottom: 200px;
}

@media screen and (max-width: 1024px) {
    .main-section.section-intro {
        margin-top: 92px;
        margin-bottom: 100px;
    }
}

@media screen and (max-width: 768px) {
    .main-section.section-intro {
        margin-top: 64px;
        margin-bottom: 80px;
    }
}

.intro-swiper {
    width: 100%;
    position: relative;
}

.intro-swiper .swiper {
    width: 100%;
    overflow: hidden;
}

.intro-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.intro-swiper .swiper-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 260px;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
}

.intro-swiper .swiper-slide::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%) translateX(50%);
    width: 3px;
    height: 200px;
    background-color: var(--GRAY_02);
    display: block;
}

.intro-swiper .swiper-slide:last-child::after {
    display: none;
}

.intro-swiper .swiper-slide:last-child {
    border-right: none;
}

.intro-swiper .swiper-slide h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.72px;
    color: var(--text-primary);
    word-break: keep-all;
}

.intro-swiper .swiper-slide p {
    max-width: 300px;
    /* margin-top: 20px; */
    margin: 20px auto 0;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: -0.32px;
    color: var(--text-primary);
    word-break: keep-all;
}

.intro-swiper .swiper-slide .intro-swiper__btn {
    min-width: 120px;
    background-color: #fff;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.32px;
    border-radius: 8px;
    padding: 10px 16px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.intro-swiper .swiper-slide .intro-swiper__btn:hover {
    background-color: var(--text-primary);
    color: #fff;
    border-color: var(--text-primary);
}

/* PC에서는 네비게이션 숨김 */
.intro-swiper__nav {
    display: none;
}

/* 1024px 이하: 2개 표시 및 스타일 조정 */
@media screen and (max-width: 1024px) {
    .intro-swiper .swiper-slide::after {
        display: none;
    }
}

/* 모바일: 스와이프 가능하도록 설정 */
@media (max-width: 768px) {
    .intro-swiper .swiper {
        overflow: hidden;
    }

    .intro-swiper .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        justify-content: flex-start;
    }

    .intro-swiper .swiper-slide {
        width: 100%;
        flex-shrink: 0;
        border-right: none;
    }

    /* 모바일에서 디바이더 숨김 */
    .intro-swiper .swiper-slide::after {
        display: none;
    }

    .intro-swiper .swiper-slide:last-child {
        border-bottom: none;
    }

    /* 모바일에서만 네비게이션 표시 */
    .intro-swiper__nav {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 28px;
        gap: 20px;
        z-index: 10;
    }

    .intro-swiper__nav .slider-popup__btn {
        width: 42px;
        height: 42px;
        display: inline-block;
        cursor: pointer;
        border: none;
        background: transparent;
        padding: 0;
        position: relative;
    }

    .intro-swiper__nav .slider-popup__btn::after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 100%;
        background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_arrow_r_black.svg) no-repeat 60% 50% / 26px 26px;
        border: 1px solid #222;
        border-radius: 50%;
    }

    .intro-swiper__nav .slider-popup__btn--prev::after {
        transform: rotate(-180deg);
    }

    .intro-swiper__nav .slider-popup__btn:disabled {
        opacity: 0.35;
        cursor: auto;
        pointer-events: none;
    }

    /* 네비게이션 카운터 스타일 */
    .intro-swiper__counter {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        color: var(--text-primary, #222);
        letter-spacing: -0.32px;
    }

    .intro-swiper__current,
    .intro-swiper__total {
        min-width: 20px;
        text-align: center;
    }

    .intro-swiper__separator {
        color: var(--text-secondary, #666);
    }
}

/* 메인 - 지금 십자가는 섹션 */
.main-section.section-cross {
    width: 100%;
    margin-bottom: 128px;
}

.main-section.section-cross .section-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
}

.main-section.section-cross .left {
    max-width: 773px;
}

.main-section.section-cross .left__text p {
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
}

.main-section.section-cross .left__text h3 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.28px;
    color: var(--text-primary);
    word-break: keep-all;
}

/* 언어별 사이즈 */
.main-section.section-cross.lang-ko .left__text p {
    font-size: clamp(20px, calc(3vw + 10px), 48px);
}

.main-section.section-cross.lang-ko .left__text h3 {
    font-size: clamp(24px, calc(4vw + 20px), 64px);
}

.main-section.section-cross:not(.lang-ko) .left__text p {
    font-size: clamp(20px, calc(3vw + 6px), 44px);
}

.main-section.section-cross:not(.lang-ko) .left__text h3 {
    font-size: clamp(24px, calc(4vw + 16px), 64px);
}

.main-section.section-cross .left .btn {
    margin-top: 64px;
}

.main-section.section-cross .cross-card-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.main-section.section-cross .cross-card-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* gap: 68px; */
    width: 488px;
    aspect-ratio: 488 / 266;
    height: auto;
    min-height: 266px;
    padding: 32px;
    color: #fff;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/card_bg_01.png) no-repeat center center / cover;
    border-radius: 24px;
}

.main-section.section-cross .cross-card-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.main-section.section-cross .cross-card-item__header h4 {
    padding-right: 10px;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #fff;
    word-break: keep-all;
}

.main-section.section-cross .cross-card-item__header img {
    width: 54px;
    height: 54px;
}

.main-section.section-cross .cross-card-item.item-02 {
    color: var(--text-primary);
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/card_bg_02.png) no-repeat center center / cover;
    border-radius: 24px;
}

.main-section.section-cross .cross-card-item.item-02 h4 {
    color: var(--text-primary);
}

.main-section.section-cross .cross-card-item__list li {
    margin-bottom: 8px;
}

.main-section.section-cross .cross-card-item__list li:last-child {
    margin-bottom: 0;
}

.main-section.section-cross .cross-card-item__list a {
    position: relative;
    display: inline-block;
    min-width: 269px;
    max-width: calc(100% - 24px);
    padding-right: 34px;
    font-size: var(--font-size-large);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.48px;
}

.main-section.section-cross .cross-card-item__list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_tail_arrow_r_b.svg) no-repeat center center / 100% 100%;
    filter: none;
    transition: right 0.3s ease;
}

.main-section.section-cross .cross-card-item__list a:hover::after {
    right: -20px;
}

.main-section.section-cross .cross-card-item.item-01 .cross-card-item__list a::after {
    filter: invert(1);
}

.main-section.section-cross .btn--detail {
    margin-top: 64px;
}

@media screen and (max-width: 1670px) {
    .main-section.section-cross .right {
        width: 100%;
    }

    .main-section.section-cross .cross-card-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 28px;
    }

    .main-section.section-cross .cross-card-item {
        width: calc((100% - 40px) / 2);
    }
}

@media screen and (max-width: 1024px) {
    .main-section.section-cross .cross-card-list {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-section.section-cross .cross-card-item {
        width: 488px;
    }
}

@media screen and (max-width: 768px) {
    .main-section.section-cross {
        margin: 80px 0 64px;
    }

    .main-section.section-cross .right {
        width: 100%;
    }

    .main-section.section-cross .cross-card-item {
        width: 100%;
        padding: 32px 24px;
    }

    .main-section.section-cross .cross-card-item__list li a {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .main-section.section-cross .btn--detail {
        min-width: 149px;
        height: 48px;
    }
}

/* 메인 - 이벤트 제목 */
.main-section .main-section__title {
    margin-bottom: 24px;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.72px;
    color: var(--text-primary);
}

/* 텍스트 끝에 화살표 아이콘 추가 */
.main-section .main-section__title a.link-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.main-section .main-section__title a.link-title::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_tail_arrow_r_b.svg) no-repeat center center / 24px 24px;
}

@media screen and (max-width: 768px) {
    .main-section .main-section__title {
        margin-bottom: 16px;
    }
}

/* 메인 - 이벤트 섹션 */
.main-section.section-event {
    width: 100%;
}

/* 메인 - 이벤트 스와이퍼 */
.main-section.section-event .slider-popup__nav {
    margin-bottom: 12px;
    padding: 0;
}

.event-swiper .swiper-slide {
    height: auto;
    width: auto;
    /* Swiper 인라인 width 계산과 충돌 방지를 위해 고정폭 제거 */
}

.event-swiper .swiper-slide .event-card-item {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
}

.event-swiper .event-card-item__header {
    width: 100%;
    padding: 32px 32px 24px;
    background-color: var(--primary-color);
    border-radius: 24px 24px 24px 0;
}

.event-swiper .event-card-item .date {
    width: calc(100% - 64px);
    height: 64px;
    margin-top: -1px;
    margin-right: -1px;
    padding: 0 32px 40px;
    background-color: var(--primary-color);
    border-radius: 0 0 24px 24px;
}

.event-swiper .event-card-item .date .date-text {
    display: block;
    width: 100%;
    font-size: clamp(14px, calc(0.5vw + 14px), 24px);
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    color: inherit;
    word-break: keep-all;
}

.event-swiper .event-card-item .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    padding: 8px 20px;
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.32px;
    border-radius: 8px;
    background-color: transparent;
    border: 1px solid #fff;
}

.event-swiper .event-card-item .title {
    width: 100%;
    height: 112px;
    font-size: clamp(20px, calc(0.5vw + 16px), 32px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.64px;
    color: inherit;
    word-break: keep-all;
}

.event-swiper .event-card-item .status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 65px;
    height: 65px;
    overflow: hidden;
}

/* 24px 24px 영역에만 배경색 적용 */
.event-swiper .event-card-item .status::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color);
}

.event-swiper .event-card-item .status__inner {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 65px;
    height: 65px;
    background-color: #fff;
    border-top-left-radius: 24px;
    overflow: hidden;
}

.event-swiper .event-card-item .status__label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 52px;
    height: 52px;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.2px;
    color: #fff;
    background-color: var(--text-primary);
    border-radius: 50%;
}

.event-swiper .event-card-item.bg-red .event-card-item__header {
    background-color: var(--accent-color);
}

.event-swiper .event-card-item.bg-red .date {
    background-color: var(--accent-color);
}

.event-swiper .event-card-item.bg-red .status::before {
    background-color: var(--accent-color);
}

.event-swiper .event-card-item.bg-gray {
    color: var(--text-primary);
}

.event-swiper .event-card-item.bg-gray .tag {
    border-color: var(--GRAY_04);
}

.event-swiper .event-card-item.bg-gray .event-card-item__header {
    background-color: var(--GRAY_01);
}

.event-swiper .event-card-item.bg-gray .date {
    background-color: var(--GRAY_01);
}

.event-swiper .event-card-item.bg-gray .status::before {
    background-color: var(--GRAY_01);
}

.event-swiper .event-card-item .status.ended .status__label {
    background-color: var(--GRAY_04);
}

@media screen and (max-width: 1024px) {
    .event-swiper .event-card-item__header {
        padding: 28px 24px;
    }

    .event-swiper .event-card-item .date {
        padding: 0 24px 28px;
    }
}

@media screen and (max-width: 768px) {
    .main-section.section-event .slider-popup__nav {
        display: flex;
    }

    .event-swiper .event-card-item .tag {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .event-swiper .event-card-item .title {
        height: 60px;
        font-size: 20px;
    }

    .event-swiper .event-card-item .date {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {}

/* 메인 - 갤러리 */
.main-section.section-gallery .section-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

/* video-wrap과 photo-wrap 비율: 640:852 (gap 28px 제외) */
.main-section.section-gallery .video-wrap {
    flex: 0 0 calc((640 / 1520) * 100%);
    width: calc((640 / 1520) * 100%);
}

.main-section.section-gallery .photo-wrap {
    flex: 0 0 calc((852 / 1520) * 100%);
    width: calc((852 / 1520) * 100%);
}

.main-section.section-gallery .video-box {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* 비디오 비율: 640 x 360 (구형 브라우저 폴백) */
    aspect-ratio: 640 / 360;
    /* 비디오 비율: 640 x 360 (최신 브라우저) */
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.main-section.section-gallery .video-box__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.main-section.section-gallery .video-box__link:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_video_play_circle.svg) no-repeat;
}

.main-section.section-gallery .video-box__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    will-change: transform;
    transform-origin: center center;
}

.main-section.section-gallery .photo-box {
    width: 100%;
    height: 0;
    padding-bottom: calc((360 / 852) * 100%);
    /* 포토 비율: 852 x 360 (구형 브라우저 폴백) */
    aspect-ratio: 852 / 360;
    /* 포토 비율: 852 x 360 (최신 브라우저) */
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.main-section.section-gallery .photo-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    will-change: transform;
    transform-origin: center center;
}

.main-section.section-gallery .photo-box__link:hover img {
    transform: scale(1.1);
}

.main-section.section-gallery .video-box__link:hover img {
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .main-section.section-gallery .section-inner {
        flex-wrap: wrap;
        gap: 64px;
    }

    .main-section.section-gallery .video-wrap {
        flex: 0 0 100%;
        width: 100%;
    }

    .main-section.section-gallery .photo-wrap {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* 메인 - 게시판 섹션 */
.main-section.section-board .section-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.main-section.section-board .board-container {
    flex: 1;
    min-width: 0;
}

.main-section.section-board .section-board__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 74px;
    gap: 12px;
    transition: all 0.3s ease;
}

.main-section.section-board .section-board__title {
    min-width: 0;
    max-width: 100%;
    transition: all 0.3s ease;
}

.main-section.section-board .section-board__link:hover {
    background-color: var(--GRAY_01);
}

.main-section.section-board .section-board__link:hover .section-board__title {
    padding: 0 20px 0 20px;
}

.main-section.section-board .section-board__date {
    padding-right: 20px;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.28px;
    color: var(--text-secondary);
}

.main-section.section-board .section-board__title .title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.45px;
    color: var(--text-primary);
}

.main-section.section-board .section-board__title .sub-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

.main-section.section-board .section-board__arrow {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_tail_arrow_r_gray.svg) no-repeat;
    background-size: contain;
    background-position: center;
}

@media (max-width: 1560px) {
    .main-section.section-board .section-inner {
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }

    .main-section.section-board .board-container {
        flex: 0 0 calc((100% - 40px) / 2);
    }
}

/* 반응형: 모바일에서는 세로로 배치 */
@media screen and (max-width: 768px) {
    .main-section.section-board .section-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .main-section.section-board .board-container {
        flex: 1;
        width: 100%;
    }

    .main-section.section-board .section-board__arrow {
        display: none;
    }

    .main-section.section-board .section-board__link {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        height: auto;
    }

    .main-section.section-board .section-board__item {
        margin-bottom: 16px;
    }

    .main-section.section-board .section-board__item:last-child {
        margin-bottom: 0;
    }
}

/* 메인 - 게시판 */
/* ========================================
 전체 메뉴 레이어 (풀페이지 팝업)
======================================== */
.menu-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* iOS Safari fixed 위치 안정화: right/bottom 대신 width/height 사용 */
    height: 100vh;
    /* dvh 미지원 브라우저 fallback */
    height: 100dvh;
    /* iOS Safari 주소창 높이 변화 대응: dvh 사용 */
    background-color: #fff;
    /* 흰색 배경 */
    z-index: var(--z-popover);
    overflow: hidden;
    display: none;
    /* 3차 프로토타입 .smap{opacity:0;transition:opacity .26s ease} .smap.show{opacity:1} 그대로:
       열릴 때 "띡" 하지 않고 페이드인되도록. display:none↔flex 는 트랜지션이 안 붙으므로
       opacity 는 별도로 .is-shown 클래스로 다음 프레임에 토글한다(아래 JS openMenu 참고). */
    opacity: 0;
    transition: opacity 0.26s ease;
    -webkit-flex-direction: column;
    /* 크로스 브라우징: Safari 구버전 */
    -ms-flex-direction: column;
    /* 크로스 브라우징: IE10 */
    flex-direction: column;
    -webkit-transform: translateZ(0);
    /* iOS Safari fixed 위치 안정화를 위한 GPU 가속 */
    transform: translateZ(0);
    /* 2025-12-03: 모바일 스크롤 체이닝 방지 - 메뉴 스크롤 시 배경페이지 스크롤 차단 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.menu-layer[aria-hidden="false"] {
    display: -webkit-flex;
    /* 크로스 브라우징: Safari 구버전 */
    display: -ms-flexbox;
    /* 크로스 브라우징: IE10 */
    display: flex;
}

.menu-layer.is-shown {
    opacity: 1;
}

/* 헤더 영역 - GNB header와 높이 및 보더 라인 위치 동일하게 맞춤 */
.menu-layer__header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 120px;
    /* GNB header 높이와 동일 */
    background-color: #fff;
    z-index: 10;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    /* border 포함하여 총 120px 유지 */
}

.menu-layer__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 calc(100vw / 1920 * 200);
    height: 100%;
    /* 부모(.menu-layer__header) 높이에 맞춤 */
}

/* 로고 - GNB 로고 사이즈(74x83px)와 동일하게 맞춤 */
.menu-layer__logo {
    margin: 0;
    line-height: 1;
}

.menu-layer__logo a {
    display: block;
    line-height: 0;
}

.menu-layer__logo img {
    height: 84px;
    /* GNB 로고 높이와 동일하게 변경 (70px → 84px) */
    width: auto;
}

/* 닫기 버튼 */
.menu-layer__close {
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-layer__close img {
    width: 24px;
    height: 24px;
}

/* 메뉴 내용 영역 */
.menu-layer__inner {
    position: relative;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    padding: 0 calc(100vw / 1920 * 200);
    margin: 0 auto;
    /* 2025-12-03: 모바일 스크롤 체이닝 방지 - 메뉴 내용 스크롤 시 배경페이지 스크롤 차단 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 전체 메뉴 네비게이션 */
.menu-nav {
    width: 100%;
}
@media (max-width: 768px) {
    :lang(ko) .menu-nav {
        padding-top: 100px;
    }
}
/* 기부하기 영역 */
.menu-nav__donate-wrapper {
    display:none;
}
@media (max-width: 768px) {
    .menu-nav__donate-wrapper {
        position: absolute;
        width: 100%;
        height: 100px;
        top: 0;
        border-bottom: 1px solid var(--border-medium, #ccc);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .menu-nav__donate-wrapper > p {
        font-size: 14px;
        font-weight: 400;
        color: #000;
    }

    .menu-nav__donate-btn {
        display: inline-flex;
        padding: 8px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 24px;
        background: #0047BB;
        color: #fff;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -0.28px;
    }
}
/* 컨텐츠 영역 wrapper */
.menu-nav__sections-wrapper {
    display: flex;
    gap: calc(100vw / 1920 * 40);
    height: 100%;
    margin: 0 auto;
}

/* 탭 버튼 영역 (모바일용) */
.menu-nav__tabs {
    display: none;
    /* 데스크톱에서는 숨김 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 탭 버튼 */
.menu-nav__tab {
    flex: 0 0 auto;
    margin-bottom: 88px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    background: transparent;
    cursor: pointer;
    /* white-space: nowrap; */
    transition: all 0.2s ease;
    position: relative;
    text-align: left;
}

.menu-nav__tab:hover {
    color: var(--text-primary);
}

.menu-nav__tab.is-active {
    color: var(--primary-color);
}

.menu-nav__section {
    display: block;
    /* 데스크톱에서는 모두 표시 */
    width: 25%;
    padding: 40px calc(100vw / 1920 * 40) 40px 0;
    border-right: 1px solid var(--border-medium);
}

.menu-nav__section:first-child {
    padding-left: 0;
}

.menu-nav__title {
    margin-bottom: 24px;
    font-size: var(--clamp-size-24);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.48px;
}

.menu-nav__category {
    margin-bottom: 40px;
}

.menu-nav__category:last-child {
    margin-bottom: 0;
}

/* 카테고리 타이틀 */
.menu-nav__category-title {
    margin-bottom: 8px;
    font-size: var(--clamp-size-16);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--text-muted);
}

/* 메뉴 리스트 */
.menu-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 메뉴 아이템 */
.menu-nav__item {
    margin-bottom: 8px;
}

.menu-nav__item:last-child {
    margin-bottom: 0;
}

/* 메뉴 링크 */
.menu-nav__link {
    display: block;
    font-size: var(--clamp-size-20);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.32px;
    transition: opacity 0.3s ease;
    word-break: keep-all;
}

.menu-nav__link:hover {
    color: var(--primary-color);
}

/* ========================================
 전체메뉴(버거) 데스크톱 사이트맵
 위 .menu-nav__tabs/.menu-nav__sections-wrapper 는 모바일 전용으로 남겨두고,
 데스크톱(>1280px)에서는 이 레일+스크롤 구조로 교체한다.
======================================== */
.gnb__sitemap {
    display: none;
}

/* 3차 프로토타입 .smap .top .langs 그대로: 전체메뉴 레이어 헤더의 닫기 버튼 바로 왼쪽에서
   전체 언어로 바로 전환. .menu-layer__header-inner 는 justify-content:space-between 이라
   로고(첫 자식)·닫기버튼(마지막 자식) 사이에 끼워 넣으면 가운데로 밀려나므로, margin-left:auto
   로 남는 공간을 이 요소가 모두 흡수해 닫기 버튼 바로 옆에 붙게 한다. 데스크톱 사이트맵 전용. */
.gnb__sitemap-langs {
    display: none;
    gap: 2px;
    list-style: none;
    margin: 0 16px 0 auto;
    padding: 0;
}

.gnb__sitemap-lang-btn {
    font-size: 13px;
    font-weight: 500;
    color: #8a8a8f;
    padding: 6px 10px;
    border-radius: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.gnb__sitemap-lang-btn:hover {
    color: #111;
    background: #f2f2f4;
}

.gnb__sitemap-lang-btn.active {
    color: #0047bb;
    font-weight: 600;
}

.gnb__sitemap-rail {
    position: absolute;
    left: 0;
    /* absolute 요소의 top:0 은 부모(.gnb__sitemap)의 padding-top(56px) 을 무시하고 패딩
       박스 맨 위에 딱 붙어버려서, 일반 흐름으로 배치되는 .gnb__sitemap-body(패딩 적용받음)
       보다 레일이 56px 더 위에서 시작해 "위에 붙어있는" 것처럼 보였다. 3차 프로토타입도
       .smap .rail{top:136px} 이 .smap .body{top:80px}+padding-top:56px 와 정확히 같은
       값이라, 레일 첫 항목과 본문 첫 섹션 제목이 같은 높이에서 시작한다 — 여기서도 같은
       padding-top 값으로 맞춘다. */
    top: 56px;
    width: 220px;
}

.gnb__sitemap-rail-item {
    position: relative;
    font-size: 17px;
    line-height: 24px;
    color: #8a8a8f;
    padding: 11px 0 11px 18px;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.15s;
}

.gnb__sitemap-rail-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    height: calc(100% - 28px) /*18px*/;
    width: 2px;
    background: #0047bb;
    transform: scaleY(0);
    transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

/* 스크롤 위치에 따라 바뀌던 것(is-active) 대신 호버로만 색상·바가 나오도록 변경 */
.gnb__sitemap-rail-item:hover {
    color: #111;
}

.gnb__sitemap-rail-item:hover::before {
    transform: scaleY(1);
}

.gnb__sitemap-body {
    margin-left: clamp(240px, 18vw, 320px);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 0 40px 96px 0;
    scroll-behavior: smooth;
}

.gnb__sitemap-body::-webkit-scrollbar {
    width: 6px;
}

/* base.css 의 전역 ::-webkit-scrollbar-track{background:var(--GRAY_02)} 을 여기선 덮지
   않아서, 얇은 막대 뒤에 진한 회색 트랙이 그대로 깔려 막대+트랙이 구분 안 되고 그냥
   굵은 회색 띠처럼 보였다. 3차 프로토타입엔 이 전역 트랙 규칙 자체가 없어 트랙이
   투명했던 것과 같은 효과를 내도록 트랙을 투명하게 만든다. */
.gnb__sitemap-body::-webkit-scrollbar-track {
    background: transparent;
}

.gnb__sitemap-body::-webkit-scrollbar-thumb {
    background: #e0e0e4;
    border-radius: 3px;
}

.gnb__sitemap-section {
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid #eee;
}

.gnb__sitemap-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.gnb__sitemap-section-head {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 24px;
}

.gnb__sitemap-section-title {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin: 0;
}

.gnb__sitemap-section-count {
    font-size: 13px;
    color: #b0b0b6;
    font-weight: 500;
}

.gnb__sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
}

.gnb__sitemap-group-title {
    /* GNB 서브(.gnb__dropdown-group-title)와 폰트 크기 동일 */
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: #111;
    padding-bottom: 8px;
    border-bottom: 1px solid #dcdcdc;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.gnb__sitemap-group-link {
    display: block;
    /* GNB 서브(.gnb__dropdown-group-link)와 폰트 크기 동일 */
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #555;
    padding: 5px 0;
    text-decoration: none;
    transition: color 0.15s;
}

.gnb__sitemap-group-link:hover {
    color: #0047bb;
}

/* 2026 모바일 개편: PC 에서 쓰던 사이트맵을 모바일에서도 "PC와 똑같이" 그대로 쓴다 — 예전
   모바일 전용 탭+아코디언 메뉴(.menu-nav__tabs/.menu-nav__sections-wrapper)는 항상 숨기고,
   .gnb__sitemap 을 모든 폭에서 PC 레이아웃 그대로 노출한다(원래는 min-width:1281px 에서만
   켰었음). 모바일 전용 조정은 지금은 하지 않고, 우선 PC와 동일하게 보이는 상태에서 시작한다 */
.menu-nav__tabs,
.menu-nav__sections-wrapper {
    display: none;
}

.gnb__sitemap {
    position: relative;
    display: block;
    padding-top: 56px;
}

.gnb__sitemap-langs {
    display: flex;
}

/* 사이트맵 본문 그리드 — 넓은 PC에선 4열이지만 창이 좁아지면서 칸이 너무 좁아지지
   않도록 단계적으로 열 수를 줄인다(4 → 3 → 2). 1280px 이하(모바일)는 아래 모바일
   전용 블록에서 1열로 재정의 — 그 블록이 이 두 블록보다 뒤에 있어야 마지막에 이긴다 */
@media (max-width: 1600px) {
    .gnb__sitemap-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1400px) {
    .gnb__sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1280px) {

    /* header 높이와 로고 사이즈 반응형 맞춤 */
    .menu-layer__header {
        height: 72px;
        /* GNB header 반응형 높이와 동일 */
    }

    .menu-layer__header-inner {
        height: 100%;
        /* 부모 높이에 맞춤 */
    }

    .menu-layer__logo img {
        height: 57px;
        /* GNB 로고 반응형 높이와 동일하게 변경 (50px → 57px) */
    }

    /* 모바일 전용 사이트맵 레이아웃 조정 (PC 값은 위 기본 규칙 그대로 유지) */
    .gnb__sitemap {
        display: flex;
        width: 100%;
        padding-top:25px;
    }

    .gnb__sitemap-langs {
        display: none;
    }

    /* PC 값(position:absolute)이 그대로 있으면 .gnb__sitemap 을 flex 로 바꿔도 레일이
       일반 흐름에서 빠져 있어 본문 위에 그대로 겹쳐 보인다 — flex 가 실제로 레일/본문을
       나란히 배치하게 하려면 레일도 일반 흐름으로 돌려놔야 한다 */
    .gnb__sitemap-rail {
        position: static;
        width: 35%;
        max-width: 120px;
        min-width: 100px;
        padding-left: 15px;
    }

    .gnb__sitemap-rail-item {
        padding-left: 8px;
    }

    /* 모바일은 터치라 :hover 가 없음 — 클릭한 레일 아이템에 JS 로 is-active 를 토글해
       현재 보고 있는 섹션이 어떤 것인지 표시(PC 의 hover 표현과 같은 스타일 재사용) */
    .gnb__sitemap-rail-item.is-active {
        color: #111;
    }

    .gnb__sitemap-rail-item.is-active::before {
        transform: scaleY(1);
    }

    .gnb__sitemap-body {
        flex: 1;
        min-width: 0;
        margin-left: 20px;
        max-height: 100%;
        padding-bottom: 0;
    }

    .gnb__sitemap-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .menu-layer__header-inner {
        padding: 0 calc(100vw / 1920 * 200);
    }

    .menu-layer__inner {
        padding: 0 calc(100vw / 1920 * 200);
    }
}

@media (max-width: 768px) {
    .menu-layer__close {
        width: 40px;
        height: 40px;
    }

    .menu-layer__inner {
        padding: 0;
        /* 모바일에서는 내부 패딩 제거 */
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: 100%;
    }

    /* 모바일: 탭 메뉴 구조로 변경 - row 구조 */
    .menu-nav {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        gap: 0;
        overflow: hidden;
    }

    /* 탭 버튼 영역 */
    .menu-nav__tabs {
        display: flex;
        flex-direction: column;
        /* 탭 버튼은 세로 배치 */
        flex-shrink: 0;
        width: calc(100vw / 375 * 132);
        height: 100%;
        min-width: 132px;
        padding: 24px 20px;
        border-right: 1px solid var(--border-medium, #ccc);
        background-color: #fff;
        overflow-y: auto;
        /* 2025-12-03: 모바일 스크롤 체이닝 방지 - 탭 영역 스크롤 시 배경페이지 스크롤 차단 */
        overscroll-behavior: contain;
    }

    .menu-nav__sections-wrapper {
        display: block;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px 20px 120px;
        /* 2025-12-03: 모바일 스크롤 체이닝 방지 - 내부 스크롤 시 배경페이지 스크롤 차단 */
        overscroll-behavior: contain;
    }

    .menu-nav__section {
        display: none;
        width: 100%;
        padding: 0;
        border-right: none;
    }

    .menu-nav__section.is-active {
        display: flex;
        flex-wrap: wrap;
        gap: 0 20px;
    }

    .menu-nav__category {
        width: 30%;
        min-width: 200px;
    }

    .menu-nav__title {
        display: none;
    }

    .menu-nav__category-title {
        margin-bottom: 20px;
        font-size: 14px;
    }

    .menu-nav__item {
        margin-bottom: 16px;
    }

    .menu-nav__link {
        font-size: 14px;
    }
}

/* 위 max-width:768px 블록이 .menu-nav__tabs/.menu-nav__sections-wrapper 를 다시 display:flex/block
   으로 켜버려서(레거시 모바일 탭 UI), 4369번 줄의 무조건 숨김 규칙이 같은 특이도·이전 위치라 밀렸다.
   여기서 다시 한 번 숨겨서(이후 순서라 이긴다) 모바일에서도 .gnb__sitemap 만 보이게 한다 */
.menu-nav__tabs,
.menu-nav__sections-wrapper {
    display: none;
}

@media screen and (max-width: 768px) {
    .menu-layer__header-inner {
        padding: 0 20px;
        /* header 와 동일한 좌우 패딩 */
    }

    .gnb__sitemap-section {
        border-bottom: 0;
    }
}

/* ========================================
 히어로 섹션 반응형 스타일
======================================== */
@media (min-width: 640px) {
    .hero-main-title {
        font-size: 36px;
    }

    .hero-title {
        font-size: var(--font-size-5xl);
    }
}

@media (min-width: 768px) {
    .hero-main-title {
        font-size: var(--font-size-5xl);
    }

    .hero-title {
        font-size: var(--font-size-6xl);
    }
}

@media (min-width: 1024px) {
    .hero-main-title {
        font-size: var(--font-size-6xl);
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .countdown {
        font-size: var(--font-size-2xl);
    }
}

/* ========================================
 기타 반응형 스타일
======================================== */
@media (min-width: 640px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .participation-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .events-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .participation-options {
        grid-template-columns: repeat(3, 1fr);
    }

    .news-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (hover: none) and (pointer: coarse) {

    .event-card:hover,
    .participation-card:hover {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 이 블록은 퍼블리셔가 납품한 CSS 보일러플레이트(0f543d9, 2025-10-21)로,
       이 프로젝트가 의도적으로 정한 정책은 아니었다. 메인페이지 전체와 GNB는
       장식성 모션이 아니라 화면·메뉴 상태를 보여주는 핵심 인터랙션이라
       모션 축소 설정과 무관하게 원래 속도로 동작하도록 예외로 둔다.
       그 외 서브페이지는 기존대로 접근성 기본값을 그대로 따른다.

       (수정 이력) 처음엔 * 에 0.01ms !important 를 건 뒤 이 영역만 revert !important 로
       되돌리려 했는데, revert 는 "이 규칙이 없었다면 적용됐을 값"이 아니라 브라우저 기본값
       (UA 기본값, transition-duration 의 경우 0s)으로 되돌아가는 키워드라 각 요소가 원래
       갖고 있던 0.16s/0.2s/0.24s 같은 고유 지속시간이 그냥 0으로 리셋되어 버렸다(여전히
       애니메이션 없음). 그래서 값을 되돌리는 대신, :not() 으로 이 영역 요소는 애초에
       0.01ms 규칙 자체를 적용받지 않게 바꿨다 — 그러면 각 요소 자신의 transition/animation
       선언이 아무 간섭 없이 그대로 적용된다. */
    *:not(body:has(#main) *):not(.navigation):not(.navigation *) {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
 서브페이지 레이아웃
======================================== */
.full-container {
    display: block;
    width: 100%;
    max-width: 100%;
}

.full-container .page-container {
    padding-top: 80px;
    padding-bottom: 120px;
}

.page-container {
    width: 100%;
    display: -webkit-flex;
    /* 크로스 브라우징: Safari 구버전 */
    display: -ms-flexbox;
    /* 크로스 브라우징: IE10 */
    display: flex;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-height: calc(100vh - 120px);
    /* dvh 미지원 브라우저 fallback */
    min-height: calc(100dvh - 120px);
    margin: 0 auto;
    padding: 0 calc(100vw / 1920 * 200);
    overflow: hidden;
}

@media (max-width: 1280px) {
    .page-container {
        min-height: calc(100vh - 72px);
        /* dvh 미지원 브라우저 fallback */
        min-height: calc(100dvh - 72px);
        padding: 0 calc(100vw / 1920 * 200);
    }
}

@media (max-width: 768px) {
    .page-container {
        min-height: calc(100vh - 400px);
        /* dvh 미지원 브라우저 fallback */
        min-height: calc(100dvh - 400px);
        padding: 0 20px;
    }

    .full-container .page-container {
        padding-top: 40px;
        padding-bottom: 80px;
    }
}

/* ========================================
 LNB 스타일
======================================== */
.lnb {
    position: relative;
    /* width: calc(100vw / 1920 * 296); */
    /* min-width: 240px; */
    width: 240px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.lnb__scroll-wrap {
    width: 100%;
    height: 100%;
    margin-left: -5px;
    padding: 36px 14px 87px 25px;
    overflow-y: auto;
}

.lnb__scroll-wrap::-webkit-scrollbar {
    width: 7px;
}

.lnb__scroll-wrap::-webkit-scrollbar-track {
    background-color: transparent;
}

.lnb__scroll-wrap::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 8px;
}

.lnb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #ccc;
    z-index: -1;
}

.lnb::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #ccc;
    z-index: -1;
}

.lnb__title {
    margin-top: 14px;
    margin-bottom: 45px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.48px;
    line-height: normal;
}

.lnb__nav {
    position: relative;
}

.lnb .accordion {
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.lnb .accordion__item {
    border-bottom: none;
}
.lnb .accordion__title {
    font-size:18px;
}

.lnb__group {
    position: relative;
    margin-bottom: 64px;
}

.lnb__group:last-child {
    margin-bottom: 0;
}

.lnb .accordion__trigger.lnb__group-title {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0;
    background: none;
    border: none;
}

.lnb .accordion__trigger.lnb__group-title:hover {
    background-color: transparent;
}

.lnb .accordion__trigger.lnb__group-title:focus {
    outline: none;
}

.lnb .accordion__trigger.lnb__group-title:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.lnb .accordion__trigger.lnb__group-title[aria-expanded="true"] {
    background-color: transparent;
}

.lnb .accordion__trigger.lnb__group-title::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

.lnb__group--active .accordion__title,
.lnb__group--active .lnb__group-title {
    /*color: var(--primary-color);*/
}

.lnb__group--active .accordion__trigger.lnb__group-title::before {
    background-color: var(--primary-color);
    transform: translateY(-50%);
}

.lnb .accordion__icon.lnb__group-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.lnb .accordion__icon.lnb__group-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
}

.lnb .accordion__trigger[aria-expanded="true"] .accordion__icon.lnb__group-icon {
    transform: rotate(180deg);
}

.lnb .accordion__panel.lnb__panel {
    overflow: hidden;
    /* display: none 대신 높이 기반 애니메이션을 위해 block 유지 */
    display: block;
}

.lnb .accordion__trigger[aria-expanded="false"]+.accordion__panel {
    /* display: none 제거 - slideUp 애니메이션이 정상 작동하도록 높이만 0으로 설정 */
    height: 0;
    padding-top: 0;
    overflow: hidden;
}

.lnb__list {
    list-style: none;
    padding-top: 26px;
    margin: 0;
}

.lnb__item {
    margin-bottom: 21.5px;
}

.lnb__item:last-child {
    margin-bottom: 0;
}

.lnb__link {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    word-break: keep-all;
}

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

.lnb__item--active .lnb__link {
    color: var(--primary-color);
    font-weight: 600;
}

@media (max-width: 1280px) {
    .lnb {
        display: none;
    }
}

@media (max-width: 767px) {
    .lnb {
        display: none;
    }
}

/* ========================================
 페이지 컨텐츠 레이아웃
======================================== */
.page-content {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    flex: 1;
    padding: 36px 0 120px 92px;
    /* overflow: hidden; */
    /* 2025-11-13: 향후 일정 슬라이드가 좌우로 확장되도록 overflow 허용 */
}

.page-body {
    width: 100%;
    min-width: 0;
    color: #000;
}

.page-header {
    width: 100%;
    margin-bottom: 44px;
}

.page-title {
    color: var(--text-primary);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.64px;
    word-break: keep-all;
}

.page-subtitle {
    margin-top: 14px;
    color: var(--text-primary);
    font-size: var(--font-size-large);
    font-weight: 600;
    word-break: keep-all;
}

.page-description {
    margin-top: 44px;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.56;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.page-content .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.page-notice {
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.page-notice li {
    margin-bottom: 8px;
}

.page-notice li:last-child {
    margin-bottom: 0;
}

@media (max-width: 1280px) {
    .page-content {
        padding: 36px 0 80px;
    }
}

.page-section {
    display: block;
    width: 100%;
}

.page-section.divider-line {
    border-top: 1px solid var(--border-light);
    padding-top: 80px;
}

.page-section__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 32px;
    letter-spacing: -0.64px;
    line-height: 1.5;
    word-break: keep-all;
}

.page-section__title.type-large {
    margin-bottom: 44px;
    font-size: 28px;
    font-weight: 600;
}

.page-section__text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.page-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.page-section__header .page-section__title {
    margin-bottom: 0;
}

.page-section__title.type-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 1280px) {
    .page-section.divider-line {
        padding-top: 60px;
    }
}

@media (max-width: 1024px) {
    .page-section.divider-line {
        padding-top: 32px;
    }
}

@media (max-width: 768px) {
    .page-header {
        margin-bottom: 24px;
    }

    .page-title {
        font-size: 24px;
    }

    .page-subtitle {
        margin-top: 20px;
    }

    .page-description {
        margin-top: 24px;
        font-size: 16px;
    }

    .page-section__title {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .page-section__text {
        font-size: 16px;
    }

    .page-section.divider-line {
        padding-top: 40px;
    }

    .page-section__title.type-large {
        margin-bottom: 40px;
        font-size: 24px;
    }

    .page-section__header {
        margin-bottom: 20px;
    }
}

/* ========================================
 게시판 리스트
======================================== */
.board-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.board-item {
    border-top: 1px solid var(--border-light);
}

.board-item:last-child {
    border-bottom: 1px solid var(--border-light);
}

.board-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 40px;
}

.board-item__left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.board-item__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    flex: 0 0 auto;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
}

.board-item__number.type-pin {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_pin_blue.svg") no-repeat center center / 28px 28px;
    text-indent: -9999px;
}

.board-item__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 40px;
}

.board-item__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.5;
    /* margin-bottom: 8px; */
}

.board-item__title-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.board-item__date {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: keep-all;
}

.board-item .icon-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 언론보도 게시판 */
.board-item.type--image .board-item__link {
    padding-right: 0;
}

.board-item.type--image .board-item__date {
    margin-top: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
}

.board-item.type--image .board-item.type--image .board-item__left {
    max-width: 60%;
}

.board-item.type--image .board-item__right {
    max-width: 284px;
    flex: 0 0 auto;
    overflow: hidden;
}

.board-item.type--image .board-item__right img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 71/40;
    object-fit: cover;
}

@media screen and (max-width: 1536px) {
    .board-item.type--image .board-item__right {
        width: 35%;
    }
}

@media screen and (max-width: 1280px) {
    .board-item__link {
        padding: 24px 20px;
    }

    .board-item.type--image .board-item__date {
        margin-top: 20px;
    }

    .board-item.type--image .board-item__left {
        max-width: 100%;
    }

    .board-item.type--image .board-item__right {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .board-item__info {
        padding-right: 20px;
    }

    .board-item__left {
        gap: 20px;
    }

    .board-item .icon-badge {
        width: 24px;
        height: 24px;
    }

    .board-item.type--image .board-item__date {
        margin-top: 12px;
    }

    .board-item.type--image .board-item__right {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .board-item__left {
        gap: 12px;
    }

    .board-item__link {
        padding: 12px;
    }

    .board-item__info {
        padding-right: 0;
        gap: 6px;
    }

    .board-item__number {
        width: 30px;
        min-width: 30px;
    }

    .board-item__date {
        font-size: 14px;
    }

    .board-item.type--image .board-item__date {
        margin-top: 0;
    }

    .board-item.type--image .board-item__right {
        display: none;
    }
}

/* ========================================
 게시글 상세 (Board Detail)
======================================== */
.board-detail {
    border-radius: 8px;
    overflow: hidden;
}

/* 게시글 헤더 */
.board-detail__header {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid #ccc;
}

.board-detail__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.48px;
    margin-bottom: 32px;
    word-break: keep-all;
}

.board-detail__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.board-detail__meta-item {
    display: flex;
    gap: 24px;
    align-items: center;
    font-size: 16px;
}

.board-detail__meta-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-highlight);
}

.board-detail__meta-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
}

.board-detail__meta-value .meta-time {
    position: relative;
    padding-left: 16px;
}

.board-detail__meta-value .meta-time::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 8px;
    background-color: var(--border-light);
    z-index: 1;
}

.board-detail__btn-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 게시글 본문 요약 영역 */
.board-detail__summary {
    margin-bottom: 36px;
}

.board-detail__summary p {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.48px;
    word-break: keep-all;
}

/* 게시글 이미지 영역 */
.board-detail__image {
    margin-bottom: 40px;
}

.board-detail__image img {
    display: block;
    margin: 0 auto;
}

/* 게시글 본문 (cms 에디터 영역)*/
.board-detail__content {
    /* min-height: 350px; */
    margin-bottom: 64px;
}

.board-detail__content h1,
.board-detail__content h2,
.board-detail__content h3,
.board-detail__content h4,
.board-detail__content h5,
.board-detail__content h6 {
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 32px;
    margin-bottom: 16px;
}

.board-detail__content h1 {
    font-size: 2em;
}

.board-detail__content h2 {
    font-size: 1.5em;
}

.board-detail__content h3 {
    font-size: 1.25em;
}

.board-detail__content h4 {
    font-size: 1.1em;
}

.board-detail__content h5 {
    font-size: 1em;
}

.board-detail__content h6 {
    font-size: 0.9em;
}

.board-detail__content p {
    margin-bottom: 8px;
    line-height: 1.8;
}

.board-detail__content ul,
.board-detail__content ol {
    padding-left: 20px;
    margin-bottom: 16px;
    list-style-position: outside;
}

.board-detail__content ul {
    list-style-type: disc;
}

.board-detail__content ol {
    list-style-type: decimal;
}

.board-detail__content ul li,
.board-detail__content ol li {
    margin-bottom: 8px;
    line-height: 1.8;
    display: list-item;
}

.board-detail__content blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 16px;
    margin: 24px 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* 이전글/다음글 네비게이션 */
.board-detail__navigation {
    margin-top: 64px;
    border-top: 1px solid var(--black-11);
}

.board-detail__nav-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 40px;
    border-bottom: 1px solid var(--GRAY_03);
    transition: background-color 0.2s ease;
}

.board-detail__nav-item:hover {
    background-color: var(--GRAY_01);
}

.board-detail__nav-label {
    font-size: 20px;
    font-weight: 400;
    min-width: 176px;
    text-align: center;
}

.board-detail__nav-link {
    flex: 1;
    font-size: 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.board-detail__nav-link:hover {
    color: var(--primary-color);
}

/* 하단 액션 버튼 */
.board-detail__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 40px;
}

/* 반응형 - 게시글 상세 */
@media (max-width: 768px) {
    .board-detail__header {
        margin-bottom: 32px;
        padding-bottom: 0;
        border-bottom: none;
    }

    .board-detail__title {
        margin-bottom: 20px;
    }

    .board-detail__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .board-detail__meta-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .board-detail__meta-value {
        margin-left: 0;
    }

    .board-detail__nav-item {
        gap: 8px;
        padding: 12px 20px;
    }

    .board-detail__nav-label {
        min-width: 60px;
        font-size: 16px;
    }

    .board-detail__nav-link {
        font-size: 16px;
    }

    .board-detail__actions {
        padding: 40px 0;
    }

    .board-detail__content {
        margin-bottom: 40px;
        font-size: 16px;
    }

    .board-detail__navigation {
        /* display: none; */
    }

    .board-detail .btn-wrap {
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .board-detail__summary {
        margin-bottom: 24px;
    }
}

/* 컬럼영역 */
.board-column-area {
    margin-bottom: 80px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.board-column-item {
    margin-bottom: 16px;
    line-height: 1.5;
}

.board-column-item strong {
    margin-right: 8px;
    font-weight: 600;
}

.board-column-item:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .board-column-area {
        margin-bottom: 40px;
    }
}

/* ========================================
 퀵 링크 스타일
======================================== */
.quick-links__title {
    margin-bottom: 32px;
    font-size: var(--font-size-large);
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}

.quick-links__list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 36px;
    width: 100%;
}

.quick-links__item {
    width: calc((100% - 72px) / 3);
    height: 160px;
}

.quick-links__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* 변경사항: 패딩 최소화 */
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* 변경사항: 이미지 가로 사이즈 기준 고정 */
.quick-links__link img {
    width: 200px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 1280px) {
    .quick-links__list {
        gap: 20px;
    }

    .quick-links__link img {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .quick-links__title {
        margin-bottom: 20px;
    }

    .quick-links__list {
        gap: 20px;
    }

    .quick-links__item {
        width: 100%;
        height: 120px;
    }

    .quick-links__link {
        width: 100%;
        height: 100%;
        padding: 12px;
    }

    .quick-links__link img {
        width: 200px;
    }
}

.quick-links.type-with-button .quick-links__list {
    align-items: center;
    gap: 24px;
    /* flex-wrap: wrap; */
}

.quick-links.type-with-button .quick-links__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - 12px);
    min-width: 350px;
    height: 400px;
    padding: 46px;
    margin: 0 auto;
    border: 1px solid #eee;
    border-radius: 8px;
}

.quick-links.type-with-button .quick-links__item p {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.4px;
}

.quick-links.type-with-button .quick-links__item .logo {
    height: 143px;
    flex: 0 0 auto;
}

.quick-links.type-with-button .quick-links__item .logo img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.quick-links.type-with-button .quick-links__item .btn {
    width: 160px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .quick-links.type-with-button .quick-links__item {
        min-width: 100%;
    }
}

/* 퀵 링크 토글 버튼 */
.quick-links.type-toggle-button .quick-links__list {
    position: relative;
    margin-bottom: 32px;
}

.quick-links.type-toggle-button .quick-links__list.active {
    margin-bottom: 232px;
}

.quick-links.type-toggle-button .quick-links__item {
    position: static;
}

.quick-links.type-toggle-button .quick-links__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: calc(100vw / 1920 * 47) calc(100vw / 1920 * 30);
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.quick-links.type-toggle-button .quick-links__trigger img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.quick-links.type-toggle-button .quick-links__toggle-content {
    display: none;
    position: absolute;
    top: calc(100% + 32px);
    left: 0;
    right: 0;
    width: auto;
    padding: 0;
    border: none;
    background: white;
    z-index: 10;
}

.quick-links.type-toggle-button .quick-links__toggle-content .content-info a {
    color: var(--primary-color);
    text-decoration: underline;
}

.quick-links.type-toggle-button .quick-links__toggle-content .content-info a:visited {
    color: #551a8b;
}

@keyframes slideDownFadeIn {
    0% {
        height: 0;
        opacity: 0;
        border: none;
        visibility: hidden;
    }

    60% {
        height: auto;
        opacity: 0;
        border: none;
        visibility: visible;
    }

    100% {
        height: auto;
        opacity: 1;
        border: 1px solid var(--primary-color);
        visibility: visible;
    }
}

@keyframes slideUpFadeOut {
    0% {
        display: block;
        opacity: 1;
        border: 1px solid var(--primary-color);
    }

    100% {
        display: none;
        opacity: 0;
        border: none;
    }
}

.quick-links.type-toggle-button .quick-links__item.active .quick-links__trigger {
    border: 1px solid var(--primary-color);
    background: #eef3ff;
}

.quick-links.type-toggle-button .quick-links__item.active .quick-links__toggle-content {
    display: block;
    padding: 40px;
    border: 1px solid var(--primary-color);
    animation: slideDownFadeIn 0.3s ease forwards;
}

.quick-links__toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.quick-links__toggle-header .content-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-links__toggle-body .content-info {
    font-size: 20px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .quick-links.type-toggle-button .quick-links__list {
        margin-bottom: 24px;
    }

    .quick-links.type-toggle-button .quick-links__list.active {
        margin-bottom: 24px;
    }

    .quick-links.type-toggle-button .quick-links__item {
        height: auto;
    }

    .quick-links.type-toggle-button .quick-links__item.active {
        position: relative;
        margin-bottom: 208px;
    }

    .quick-links.type-toggle-button .quick-links__trigger {
        padding: 47px 27px;
    }

    .quick-links.type-toggle-button .quick-links__item.active .quick-links__toggle-content {
        min-height: 160px;
    }

    .quick-links.type-toggle-button .quick-links__item.active .quick-links__toggle-content {
        padding: 33px 20px;
    }

    .quick-links__toggle-header .content-name {
        font-size: 20px;
    }

    .quick-links__toggle-body .content-info {
        font-size: 16px;
    }
}

/* 유투브 영상 영역 */
.page-moment-youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.youtube-title {
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.5;
    letter-spacing: -0.56px;
    text-align: center;
}

.youtube-subtitle {
    margin-top: 44px;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.5;
    letter-spacing: -0.64px;
    text-align: center;
}

.page-detail-youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 64px;
}

@media (max-width: 768px) {
    .page-detail-youtube {
        margin-bottom: 40px;
    }
}

/* ========================================
 검색 페이지 스타일
======================================== */
.search-header {
    padding: 80px 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #efefef;
    border-bottom: 1px solid var(--border-medium);
}

.search-header .search-form {
    width: 100%;
    max-width: 702px;
}

.search-results {
    width: 100%;
}

.search-list__title {
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
}

.search-list__list {
    border-top: 1px solid var(--border-light);
}

.search-list__item {
    padding: 52px 40px;
    border-bottom: 1px solid var(--border-light);
}

.search-item__link {
    display: block;
    width: 100%;
}

.search-item__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin-bottom: 37px;
}

.search-item__title-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-list__empty {
    margin-top: 20px;
}

.search-list__empty-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .search-header {
        padding: 28px 20px;
    }

    .search-list__title {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .search-list__item {
        padding: 20px 12px;
    }

    .search-item__title {
        margin-bottom: 8px;
    }

    .search-item__title-text {
        font-size: 16px;
    }

    .search-item__text {
        font-size: 14px;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .search-list__empty {
        margin-top: 16px;
    }

    .search-list__empty-text {
        font-size: 16px;
    }
}

/* ========================================
 대회 일정 스타일
======================================== */
.wyd-schedule__image {
    width: 100%;
    height: 100%;
    overflow-x: auto;
}

.wyd-schedule__image img {
    display: block;
    width: 100%;
    min-width: 805px;
}

.schedule-list-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* gap: 24px; */
    width: 100%;
}

.wyd-schedule__download {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 40px;
}

.schedule-list-group .schedule-date {
    flex: 0 0 auto;
}

.schedule-list-group .schedule-date p {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.64px;
    color: var(--text-primary);
}

.schedule-list {
    flex: 1;
}

.schedule-list .schedule-item {
    position: relative;
    /* width: 100%; */
    margin-left: calc(100vw / 1920 * 112);
    padding-left: calc(100vw / 1920 * 112);
    padding-bottom: 120px;
}

/* 스크롤 애니메이션 초기 상태 클래스 */
.scroll-animate {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* translateX 애니메이션을 위한 transition 추가 */
}

/* 애니메이션 활성화 클래스 */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.schedule-list .schedule-item::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    width: 1px;
    height: calc(100% + 15px);
    background-color: #000;
}

.schedule-list .schedule-item:first-of-type:after {
    content: "";
    position: absolute;
    top: 18px;
    left: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.schedule-list-group.current .schedule-list .schedule-item:first-of-type:after {
    top: 15px;
    left: -12px;
    width: 25px;
    height: 25px;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_d_dots_blue.svg") no-repeat center center / 100% 100%;
}

.schedule-list-group.last-group .schedule-item::before {
    display: none;
}

.schedule-item__date {
    display: none;
}

.schedule-item__title {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
    word-break: keep-all;
}

.schedule-item__title .sub {
    display: block;
    font-size: 20px;
    font-weight: 500;
}

.schedule-item__text {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.schedule-item__image {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 100%;
    aspect-ratio: 420 / 260;
    object-fit: cover;
    border-radius: 14px;
    overflow: hidden;
}

.section--schedule .schedule-date {
    width: 102px;
}

@media screen and (max-width: 768px) {
    .section--schedule {
        padding-left: 7px;
    }

    .schedule-list-group .schedule-date {
        display: none;
    }

    .schedule-list .schedule-item {
        margin-left: 0;
        padding-left: 28px;
        padding-bottom: 40px;
    }

    .schedule-list .schedule-item:first-of-type:after {
        top: 10px;
        left: -5px;
        width: 11px;
        height: 11px;
    }

    .schedule-list-group.current .schedule-list .schedule-item:first-of-type:after {
        left: -7px;
        width: 15px;
        height: 15px;
    }

    .schedule-item__date {
        display: block;
        margin-bottom: 16px;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: -0.48px;
        color: var(--text-primary);
    }

    .schedule-item__title {
        margin-bottom: 8px;
        font-size: 20px;
    }

    .schedule-item__text {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .schedule-list .schedule-item::before {
        height: calc(100% + 9px);
    }
}

/* ========================================
 역대 대회 주제 스타일
======================================== */
.themes-swiper {
    position: relative;
    height: auto;
    padding: 0 60px;
    overflow: hidden;
}

.themes-swiper .swiper-slide {
    /* width: 180px; */
    height: auto;
}

.themes-swiper .swiper-slide__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.themes-swiper .swiper-slide__image {
    margin-bottom: 24px;
}

.themes-swiper .swiper-slide__image img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.themes-swiper .swiper-slide__title {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--text-primary);
}

.themes-swiper .swiper-slide__description {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    word-break: keep-all;
}

.themes-swiper .swiper-nav--prev {
    left: 0;
}

.themes-swiper .swiper-nav--next {
    right: 0;
}

@media (max-width: 1280px) {
    .themes-swiper {
        padding: 0 40px;
    }

    .themes-swiper .swiper-slide__title {
        font-size: 20px;
    }

    .themes-swiper .swiper-slide__description {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .themes-swiper {
        padding: 0 10px;
    }

    .themes-swiper .swiper-slide__image img {
        width: 80px;
        height: 80px;
    }

    .themes-swiper .swiper-slide__title {
        font-size: 20px;
    }

    .themes-swiper .swiper-slide__description {
        font-size: 16px;
    }

    .themes-swiper .swiper-nav--prev {
        left: -5px;
    }

    .themes-swiper .swiper-nav--next {
        right: -5px;
    }
}

/* ========================================
 박스 리스트 스타일
======================================== */
.box-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 80px;
}

.box-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 40px;
    border-radius: 16px;
    background: #f0f3f8;
}

.box-item__content {
    display: block;
    width: 100%;
}

.box-item__title {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    word-break: keep-all;
}

.box-item__description {
    margin-bottom: 32px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.36px;
    color: var(--text-primary);
    word-break: keep-all;
}

.box-item__image {
    max-width: 145px;
}

@media screen and (max-width: 768px) {
    .box-list {
        margin-top: 40px;
        gap: 40px;
    }

    .box-item {
        flex-direction: column-reverse;
        padding: 40px 16px;
    }

    .box-item__image {
        width: 119px;
        height: 119px;
        margin-bottom: 40px;
        object-fit: contain;
        border-radius: 0;
        overflow: hidden;
    }

    .box-item__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .box-item__title {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .box-item__description {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .box-item .btn {
        width: 100%;
    }
}

/* ========================================
 로고 페이지
======================================== */
.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 320px;
    margin-top: 32px;
    margin-bottom: 80px;
    border-radius: 20px;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/pageLogo/bg_logo_box.jpg") no-repeat center center / 1180px 320px;
    font-size: 0;
    text-indent: -9999px;
}

.logo-box.france {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/pageLogo/bg_logo_box_fr.jpg") no-repeat center center / 1180px 320px;
}

.logo-box.portugal {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/pageLogo/bg_logo_box_pt.jpg") no-repeat center center / 1180px 320px;
}

.logo-box.italy {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/pageLogo/bg_logo_box_it.jpg") no-repeat center center / 1180px 320px;
}

.logo-box.spain {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/pageLogo/bg_logo_box_es.jpg") no-repeat center center / 1180px 320px;
}

/* ========================================
 섹션 콘텐츠 영역 (범용 레이아웃)
 왼쪽에 제목, 오른쪽에 콘텐츠를 배치하는 레이아웃
 오디오북, 워크북 등 다양한 페이지에서 재사용 가능
======================================== */
.logo-area,
.content-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin-bottom: 80px;
}

.logo-area:last-of-type,
.content-row:last-of-type {
    margin-bottom: 0;
}

.logo-area__title,
.content-row__title {
    min-width: 360px;
    max-width: 360px;
    /* margin-bottom: 24px; */
    padding-right: 40px;
}

.content-row__title:last-of-type {
    margin-bottom: 0;
}

.logo-area__title h5,
.content-row__title h5 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
    word-break: keep-all;
}

.logo-area__content,
.content-row__content {
    width: 776px;
    max-width: 100%;
    min-width: 0;
}

.logo-area__text {
    margin-bottom: 20px;
}

.logo-area__text h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    word-break: keep-all;
}

.logo-area__text p {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    word-break: keep-all;
}

/* 로고 상하구조*/
.logo-area.no-flex {
    display: block;
}

.logo-area.no-flex .logo-area__title {
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.logo-area.no-flex .logo-area__content {
    width: 100%;
}

.content-row__text {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.content-row__text:last-of-type {
    margin-bottom: 0;
}

.content-row__sub-text {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    word-break: keep-all;
}

.content-row__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
}

.logo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    width: 100%;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: calc((100% - 56px) / 3);
    padding: 30px;
    border: 1px solid var(--border-medium);
    border-radius: 20px;
}

.logo-item__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--primary-color);
}

.logo-download-list {
    margin-bottom: 40px;
}

.logo-download-list .logo-item {
    width: 100%;
    min-height: 284px;
}

.logo-download-list:last-of-type {
    margin-bottom: 0;
}

/* 로고 다운로드 리스트의 이미지 프레임: 높이 120px 고정, 모든 프레임 동일하게 맞춤 */
.logo-download-list .logo-list .logo-item .logo-item__img-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    margin-bottom: 0;
}

.logo-download-list .logo-list .logo-item .logo-item__img-frame img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.logo-download-list .logo-list.type-half .logo-item {
    width: calc((100% - 28px) / 2);
}

.logo-download-list .logo-list.type-lang {
    flex-wrap: wrap;
}

.logo-item .btn {
    margin-top: 28px;
}

.logo-list-title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
}

.logo-item img {
    display: block;
    width: 50%;
    object-fit: cover;
}

.logo-item__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    text-align: center;
}

.logo-list-wrap .logo-item img {
    width: 80%;
}

.logo-area .block-wrap {
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.logo-area .block-wrap:last-of-type {
    margin-bottom: 0;
}

.logo-area .block-wrap .block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 232px;
    padding: 24px 32px;
    color: #fff;
    background-color: var(--text-primary);
}

.logo-area .block-wrap .block__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
}

.logo-area .block-wrap .block__title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.32px;
}

.logo-area .block-wrap .block__sub-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
}

/* span 사이 디바이더 스타일: 1px 너비, 14px 높이, 좌우 8px 여백 */
.logo-area .block-wrap .divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: -2px 8px 0;
    background-color: currentColor;
    vertical-align: middle;
}

.logo-area .block-wrap .block.bg-white {
    background-color: #fff;
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.logo-area .block-wrap .block.bg-red {
    background-color: var(--accent-color);
}

.logo-area .block-wrap .block.bg-blue {
    background-color: var(--primary-color);
}

.logo-area .block-wrap .block.bg-yellow {
    color: var(--text-primary);
    background: linear-gradient(90deg, rgba(251, 225, 38, 0.3) 0%, #fbe126 100%),
    #fff;
}

@media screen and (max-width: 1580px) {
    .logo-area {
        flex-direction: column;
        gap: 20px;
    }

    .logo-area__content {
        width: 100%;
    }

    .content-row__title {
        min-width: 180px;
        max-width: 180px;
    }
}

@media screen and (max-width: 1024px) {

    .logo-area,
    .content-row {
        flex-direction: column;
    }

    .logo-area__content,
    .content-row__content {
        width: 100%;
    }

    .logo-list {
        gap: 20px;
    }
}

@media screen and (max-width: 1024px) {
    .logo-download-list .logo-item {
        min-height: 0;
        justify-content: space-between;
        padding: 24px 34px;
        gap: 0;
    }

    .logo-area__title,
    .content-row__title {
        margin-bottom: 20px;
        min-width: 100%;
    }

    .logo-download-list .logo-item .btn {
        margin-top: 24px;
    }
}

@media screen and (max-width: 768px) {
    .logo-box {
        margin-bottom: 40px;
        padding: 35px 48px;
    }

    .logo-box__img {
        width: 50%;
    }

    .logo-area,
    .content-row {
        gap: 0;
        margin-bottom: 40px;
    }

    .logo-area .block-wrap .block.bg-red,
    .logo-area .block-wrap .block.bg-blue {
        flex: 0 0 auto;
        width: 100%;
    }

    .logo-area .block-wrap .block.bg-red {
        margin-bottom: 20px;
    }

    .logo-identity-list .logo-list {
        gap: 16px;
    }

    .logo-identity-list .logo-item {
        width: calc((100% - 32px) / 3);
        padding: 16px 8px;
    }

    .logo-identity-list .logo-item__text {
        font-size: 12px;
    }

    .logo-identity-list .logo-item img {
        width: 53px;
    }

    .logo-area .block-wrap {
        margin-bottom: 20px;
    }

    .logo-area .block-wrap .block {
        height: 184px;
        padding: 16px;
    }

    .logo-area .block-wrap .block__title {
        font-size: 16px;
    }

    .logo-area .block-wrap .block__sub-title {
        font-size: 14px;
    }

    .logo-area .block-wrap .block__text {
        font-size: 14px;
    }

    .content-row__sub-text {
        font-size: 14px;
    }

    .logo-area__title,
    .content-row__title {
        margin-bottom: 24px;
    }

    .logo-area__title h5,
    .content-row__title h5 {
        font-size: 20px;
    }

    .content-row__text {
        font-size: 16px;
    }

    .logo-list-title {
        margin-bottom: 16px;
    }

    .logo-download-list {
        margin-bottom: 20px;
    }

    .logo-download-list .logo-list.type-lang .logo-item {
        width: 100%;
    }

    .logo-download-list .logo-list.type-half .logo-item {
        width: 100%;
    }

    .logo-area .block-wrap .divider {
        height: 8px;
    }
}

@media screen and (max-width: 480px) {
    .logo-box__img {
        width: 100%;
    }
}

/* */
.box-notice {
    width: 100%;
    padding: 40px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.36px;
    color: var(--text-primary);
    background-color: #f5f5f5;
    border-radius: 20px;
}

.box-notice__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 13px;
    margin-bottom: 32px;
}

.box-notice__content:last-of-type {
    margin-bottom: 0;
}

.box-notice__content h6 {
    margin-bottom: 11px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

.box-notice__content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

.box-notice__footer {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--border-medium);
}

.box-notice__footer p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

.box-notice .bullet-list li {
    margin-bottom: 4px;
}

.box-notice .bullet-list li:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .box-notice {
        padding: 32px 16px;
    }

    .box-notice__content h6 {
        font-size: 16px;
    }

    .box-notice__content p {
        font-size: 14px;
    }

    .box-notice__footer {
        margin-top: 24px;
        padding-top: 24px;
    }

    .box-notice__footer p {
        font-size: 14px;
    }
}

/* ========================================
 오디오북 스타일
======================================== */
.audiobook {
    width: 100%;
}

.audiobook audio {
    display: none;
}

.audiobook .player {
    width: 100%;
    margin-bottom: 24px;
}

.audiobook .player-container {
    position: relative;
    width: 100%;
    padding: 66px 40px 24px;
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid var(--border-medium);
}

.audiobook .player-header {
    text-align: center;
    margin-bottom: 24px;
}

.audiobook .player-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.audiobook .loading {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 16px;
    background: rgba(34, 34, 34, 0.8);
    backdrop-filter: blur(4px);
}

.audiobook .loading.show {
    display: flex;
}

.audiobook .loading svg {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.audiobook .progress-container {
    margin-bottom: 24px;
}

.audiobook .progress-wrapper {
    position: relative;
    width: 100%;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 12px;
}

.audiobook .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: width 0.1s ease;
}

.audiobook .progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: grab;
    transition: left 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.audiobook .progress-handle:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.audiobook .progress-handle:active {
    cursor: grabbing;
}

.audiobook .time-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
}

.audiobook .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    margin-bottom: 40px;
}

.audiobook .control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.audiobook .control-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.audiobook .control-button.play-pause-button {
    width: 64px;
    height: 64px;
}

.audiobook .control-button svg {
    display: block;
    width: auto;
    height: auto;
}

.audiobook .player .info {
    position: relative;
    margin-top: 28px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.audiobook .player .info::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_info_gray.svg) no-repeat center center / contain;
}

.audiobook .audiobook__chapters {
    margin-bottom: 40px;
}

/* audioButton 클래스를 audio-button으로 변경 (카멜케이스 -> kebab-case) */
.audiobook .audio-button {
    position: relative;
    width: 100%;
    padding: 17px 20px 17px 10px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    background-color: #fff;
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.audio-button[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.audio-button__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.audio-button__text {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.audio-button__text--placeholder {
    color: var(--text-muted);
}

.audio-button__icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    transition: -webkit-transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.audio-button[aria-expanded="true"] .audio-button__icon {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.audio-button__list {
    position: absolute;
    top: calc(100% + 1px);
    left: -1px;
    right: -1px;
    width: calc(100% + 2px);
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid var(--border-medium);
    border-top: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    list-style: none;
    margin: 0;
}

.audio-button[aria-expanded="true"] .audio-button__list {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.audio-button__item {
    padding: 14px 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.audio-button__item:hover {
    background-color: #f9fafb;
    color: var(--primary-color);
}

.audio-button__item:focus {
    outline: none;
    background-color: #f9fafb;
    color: var(--primary-color);
}

.audio-button__item--selected {
    background-color: #f7f7f7;
    color: var(--primary-color);
    font-weight: 600;
}

.audiobook__notice {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.audiobook .go_link {
    margin-top: 48px;
}

.audiobook .go_link>div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.audiobook .go_link>div .btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.audiobook-image-wrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

.audiobook-image-wrap img {
    width: calc((100% - 32px * 2) / 3);
    min-width: 300px;
}

.audiobook__more {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
    font-size: var(--font-size-base);
}

/* 반응형 */
@media screen and (max-width: 1280px) {
    .audiobook-image-wrap img {
        width: calc((100% - 32px) / 2);
    }
}

@media screen and (max-width: 768px) {
    .audiobook .player {
        margin-bottom: 20px;
    }

    .audiobook .controls {
        justify-content: space-between;
    }

    /* audioButton 클래스를 audio-button으로 변경 (카멜케이스 -> kebab-case) */
    .audio-button__icon {
        width: 24px;
        height: 24px;
    }

    .audiobook .audio-button {
        padding: 7px 20px 7px 10px;
        border-radius: 16px;
    }

    .audio-button__item {
        padding: 7px 10px;
    }

    .audio-button[aria-expanded="true"] {
        border-radius: 16px 16px 0 0;
    }

    .audiobook-image-wrap {
        gap: 20px;
    }

    .audiobook-image-wrap img {
        width: 100%;
        min-width: auto;
    }

    .audiobook .go_link {
        width: calc(100% + 20px);
        margin-right: -20px;
        margin-top: 32px;
    }

    .audiobook .go_link div {
        padding-right: 20px;
    }
}

/* ========================================
 대회발자취 스타일
======================================== */
.accordion--history {
    border: none;
}

.accordion--history .accordion__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.72px;
    color: var(--primary-color);
}

.audiobook .player .info {
    font-size: 10px;
}

.accordion--history .accordion__trigger {
    padding: 0;
}

.accordion--history .accordion__item {
    /* border: none; */
    margin-bottom: 64px;
    padding-bottom: 64px;
}

.accordion--history .accordion__content {
    padding: 40px 0 0;
    background-color: transparent;
}

.accordion--history .accordion__trigger:hover {
    background-color: transparent;
}

.accordion--history .schedule-list-group {
    gap: 0;
}

.accordion--history .schedule-list-group .schedule-date {
    min-width: 300px;
}

.accordion--history .schedule-list .schedule-item {
    min-height: 260px;
    margin-left: calc(100vw / 1920 * 80);
    padding-left: calc(100vw / 1920 * 80);
    padding-bottom: 40px;
}

.accordion--history .schedule-date .schedule-item__image {
    width: 300px;
    aspect-ratio: 300 / 220;
    object-fit: cover;
}

.accordion--history .schedule-item .schedule-item__image {
    display: none;
}

.accordion--history .schedule-item__text {
    font-size: var(--font-size-base);
}

.accordion--history .schedule-list .schedule-item:after {
    content: "";
    position: absolute;
    top: 18px;
    left: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.accordion--history .schedule-list .schedule-item.no-line {
    min-height: auto;
    /* padding-bottom: 0; */
}

.accordion--history .schedule-list .schedule-item.no-line::before {
    content: none;
}

@media screen and (max-width: 1023px) {
    .accordion--history .schedule-list-group .schedule-date {
        min-width: 200px;
    }

    .accordion--history .schedule-list-group .schedule-date .schedule-item__image {
        width: 200px;
    }

    .accordion--history .schedule-list .schedule-item {
        min-height: 187px;
    }
}

@media screen and (max-width: 768px) {
    .accordion--history .accordion__item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .accordion--history .accordion__title {
        font-size: 24px;
    }

    .accordion--history .accordion__content {
        padding-top: 24px;
    }

    .accordion--history .schedule-list .schedule-item {
        min-height: auto;
        margin-left: 7px;
        padding-left: 27px;
        padding-bottom: 40px;
    }

    .accordion--history .accordion__content .schedule-item__title {
        margin-bottom: 12px;
        font-size: 24px;
    }

    .accordion--history .accordion__content .schedule-item__text {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .accordion--history .schedule-list .schedule-item .schedule-item__image {
        display: block;
        width: auto;
        max-width: 100%;
    }

    .accordion--history .schedule-item__contents .btn--link {
        margin-top: 12px;
    }

    .accordion--history .schedule-list .schedule-item:after {
        left: -5px;
        width: 11px;
        height: 11px;
    }
}

/* ========================================
 워크북 내려받기 스타일
======================================== */
.workbook-download .tabs {
    margin-bottom: 44px;
}

.workbook-download .workbook-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

.workbook-download .workbook-links:first-of-type {
    margin-bottom: 20px;
}

.workbook-download .workbook-links a {
    aspect-ratio: 220 / 187;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 20px * 5) / 6);
    min-width: 157px;
    padding: 20px;
    position: relative;
    color: var(--text-primary);
    text-align: center;
    font-weight: 600;
    line-height: normal;
    background: #f0f3f8;
    border-radius: 20px;
    overflow: hidden;
}

.workbook-download .workbook-links a.chapter-all {
    background-color: #fff;
    border: 1px solid var(--border-light);
}

.workbook-download .workbook-links.type-text a {
    aspect-ratio: 220 / 112;
}

.workbook-download .workbook-links a p {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.workbook-download .workbook-links a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transform: translateY(0%);
    transition: transform 0.1s ease;
}

.workbook-download .workbook-links a:hover::before {
    background: rgba(17, 17, 17, 0.4) url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_downloand_type_2_w.svg") 50% no-repeat;
    background-size: 41px;
    transform: translateY(0);
}

/* 다운로드 중 로딩 오버레이 - 배경은 고정, 스피너만 회전 */
.workbook-download .workbook-links a .loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 20px;
    background: rgba(17, 17, 17, 0.4);
    backdrop-filter: blur(4px);
}

/* 로딩 스피너 아이콘 - 스피너만 회전 */
.workbook-download .workbook-links a .loading-overlay .spinner {
    width: 41px;
    height: 41px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='60' viewBox='0 0 58 60' fill='none'%3E%3Cpath d='M57.0955 17.1224C54.8594 12.4174 51.4367 8.37578 47.1642 5.3953C42.8917 2.41483 37.9167 0.598254 32.729 0.12438C27.5412 -0.349494 22.3195 0.535666 17.5777 2.69274C12.8359 4.84981 8.73757 8.20444 5.68601 12.4264C2.63445 16.6484 0.734867 21.5923 0.174237 26.7714C-0.386394 31.9505 0.41125 37.1863 2.48866 41.9635C4.56607 46.7407 7.85164 50.8947 12.022 54.0165C16.1923 57.1383 21.1037 59.1203 26.2727 59.7676L27.3028 51.5411C23.5623 51.0727 20.0082 49.6384 16.9903 47.3793C13.9725 45.1203 11.5949 42.1143 10.0916 38.6573C8.58832 35.2003 8.01111 31.4115 8.41681 27.6636C8.8225 23.9158 10.1971 20.3382 12.4054 17.283C14.6136 14.2278 17.5794 11.8002 21.0107 10.2393C24.442 8.67835 28.2207 8.03781 31.9748 8.38073C35.7289 8.72364 39.329 10.0382 42.4207 12.195C45.5125 14.3518 47.9893 17.2765 49.6075 20.6812L57.0955 17.1224Z' fill='url(%23paint0_linear_554_7342)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_554_7342' x1='28.5' y1='0' x2='28.5' y2='60' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.workbook-download .workbook-links a.chapter span {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    background: var(--text-primary);
    border-radius: 0 0 20px 0;
}

.workbook-download .workbook-links a.chapter1 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_01.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter2 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_02.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter3 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_03.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter4 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_04.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter5 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_05.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter6 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_06.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter7 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_07.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter8 {
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_08.png") 50% no-repeat;
    background-size: 100%;
}

.workbook-download .workbook-links a.chapter9 {
    background: #d2d5da url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/workbook_09.png") 50% no-repeat;
    background-size: 100%;
}

@media (max-width: 768px) {
    .workbook-download .workbook-links:first-of-type {
        margin-bottom: 24px;
    }

    .workbook-download .workbook-links {
        gap: 24px 20px;
    }

    .workbook-download .workbook-links a {
        width: calc((100% - 20px) / 2);
        min-width: auto;
        max-width: 260px;
    }

    .workbook-download .workbook-links a p {
        font-size: 14px;
    }

    .workbook-download .workbook-links a.chapter span {
        font-size: 14px;
    }
}

/* ========================================
 준비기도문 스타일
======================================== */
.prayer-text-wrap .schedule-list .schedule-item:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.prayer-text-wrap .schedule-list .schedule-item {
    margin-left: 10px;
    padding-bottom: 64px;
}

.prayer-text-wrap .schedule-list .schedule-item::before {
    top: 7px;
    background-color: var(--border-medium);
}

.prayer-text-wrap .schedule-item.current:after {
    top: 5px;
    left: -12px;
    width: 25px;
    height: 25px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_d_dots_blue.svg) no-repeat center center / 100% 100%;
}

.prayer-text-wrap .schedule-item.cross:after {
    top: 3px;
    left: -13px;
    width: 27px;
    height: 27px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_blue_cross.svg) no-repeat center center / 100% 100%;
}

.prayer-text-wrap .schedule-item:last-of-type::before {
    height: 250%;
}

.prayer-text-wrap .schedule-item__text {
    font-weight: 400;
    word-break: break-all;
    letter-spacing: normal;
}

.prayer-text-wrap .schedule-item.border-icon::after {
    background-color: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
}

.prayer-text-wrap .schedule-item.double-border-icon::after {
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_double_border_circle_blue.svg) no-repeat center center / 100% 100%;
    border: none;
}

.prayer-text-wrap .schedule-item:last-child::before {
    display: none;
}

.prayer-info-wrap {
    margin-top: 17px;
}

.prayer-info-text {
    margin-bottom: 24px;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
}

.prayer-info-text:last-of-type {
    margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
    .prayer-text-wrap .schedule-list .schedule-item {
        margin-left: 15px;
    }
}

@media screen and (max-width: 768px) {
    .prayer-text-wrap .schedule-list .schedule-item::after {
        left: -5px;
        width: 11px;
        height: 11px;
    }

    .prayer-text-wrap .schedule-list .schedule-item.current:after {
        left: -7px;
        width: 15px;
        height: 15px;
    }

    .prayer-text-wrap .schedule-list .schedule-item.cross:after {
        top: 0;
        left: -11px;
        width: 23px;
        height: 23px;
    }

    .prayer-text-wrap .schedule-list .schedule-item {
        padding-bottom: 28px;
    }

    .prayer-info-wrap {
        margin-top: 12px;
    }
}

/* ========================================
 steps 스타일
======================================== */
.steps {
    display: flex;
    justify-content: space-between;
    gap: 33px;
    width: 100%;
}

.steps__item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 208px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.steps__item::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -25px;
    width: 15px;
    height: 15px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_steps_arrow_r.svg) no-repeat center center / 100% 100%;
}

.steps__item:last-of-type::after {
    display: none;
}

.steps__number {
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
}

.steps__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: var(--text-primary);
}

.steps__title span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--text-secondary);
}

.steps__icon {
    width: 52px;
    margin-left: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .steps {
        flex-direction: column;
        gap: 64px;
    }

    .steps__item {
        flex-direction: row;
        align-items: center;
        width: 100%;
        min-height: 130px;
        gap: 20px;
    }

    .steps__item::after {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -45px;
        width: 24px;
        height: 24px;
        transform: translateX(-50%) rotate(90deg);
    }

    /* .steps__icon {
    width: 82px;
    height: 82px;
  } */
}

/* ========================================
 method-list 스타일
======================================== */
.method-list {
    width: 100%;
    margin-top: 24px;
}

.method-list__item {
    margin-bottom: 80px;
}

.method-list__item:last-of-type {
    margin-bottom: 0;
}

.method-list__title {
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
}

.method-list__text {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--text-primary);
}

.method-list__sub-text {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: var(--text-secondary);
}

.method-list__sub-text:last-of-type {
    margin-bottom: 0;
}

.method-list__box {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-top: 64px;
}

.method-list__box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    min-height: 182px;
    border-radius: 16px;
    background-color: #f2f2f2;
    z-index: -1;
}

.method-list__box .box-left {
    width: calc(100% / 672 * 209);
    margin-left: calc(100% / 672 * 52);
}

.method-list__box .box-right {
    padding-right: calc(100% / 672 * 72);
    padding-bottom: 12px;
}

.method-list__box .box-right p {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--text-primary);
}

.method-list__box .box-right .qr-list {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

.method-list__box .box-right .qr-list li img {
    width: 74px;
    height: 73px;
    object-fit: contain;
}

.method-list__box .box-right .qr-list li p {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .method-list__item {
        margin-bottom: 40px;
    }

    .method-list__title {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .method-list__text {
        margin-bottom: 14px;
        font-size: 16px;
    }

    .method-list__sub-text {
        margin-bottom: 8px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .method-list__box {
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        padding: 0 65px 20px;
    }

    .method-list__box::before {
        height: 83%;
    }

    .method-list__box .box-left {
        width: 100%;
        margin: 0 auto 40px;
    }

    .method-list__box .box-right {
        padding: 0;
    }

    .method-list__box .box-right p {
        text-align: center;
    }
}

/* ========================================
 이미지 오류 스타일
======================================== */
.swiper-slide img.onerror,
.board-list .board-item.type--image img.onerror,
.card__image img.onerror {
    content: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/img_wyd_default_01.png");
}

.main-section.section-gallery .video-box img.onerror {
    content: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/img_wyd_default_01.png");
}

.main-section.section-gallery .photo-box img.onerror {
    content: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/img_wyd_default_01.png");
}

.cards-flex.type-newsletter .card__image img.onerror {
    content: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/img_wyd_default_02.png");
}

/* ========================================
 봉헌현황 페이지
======================================== */
.status-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(100% / 1180 * 148);
}

/* 게이지 스타일 */
.gauge-wrap {
    position: relative;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
}

.gauge__bg {
    stroke: #eee;
}

.gauge__progress {
    transition: stroke-dashoffset 2s ease-out;
    stroke: var(--primary-color);
    stroke-dasharray: 534.07;
    stroke-dashoffset: 534.07;
}

.gauge__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gauge__title {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

.gauge__content-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.gauge__number {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.56px;
}

.gauge__unit {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.56px;
}

/* 봉헌 현황 리스트 스타일 */
.status-list {
    width: 100%;
    max-width: 548px;
}

.status-list li {
    flex: 1;
    /* display: flex;
  align-items: center;
  justify-content: space-between; */
}

.status-list li:last-of-type {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-medium);
}

.status-list .list-item__text {
    margin-right: 16px;
    font-size: 28px;
    font-weight: 700;
}

.status-list .list-item__text small {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
}

.status-list .list-item__value {
    margin-top: 20px;
    font-size: 28px;
    font-weight: 700;
    text-align: right;
}

.status-list .list-item__value .value-num {
    margin-right: 20px;
    color: var(--primary-color);
}

@media screen and (max-width: 1280px) {
    .status-list li {
        flex-wrap: wrap;
    }

    .status-list .list-item__text {
        font-size: 24px;
    }

    .status-list .list-item__value {
        font-size: 24px;
    }

    .status-list .list-item__value .value-num {
        margin-right: 16px;
    }
}

@media screen and (max-width: 768px) {

    .gauge__bg,
    .gauge__progress {
        stroke-width: 30;
    }

    .gauge__title {
        font-size: 16px;
        /* font-weight: 400; */
    }

    .gauge__number {
        font-size: 20px;
        /* font-weight: 400; */
    }

    .gauge__unit {
        font-size: 20px;
        /* font-weight: 400; */
    }

    .status-list .list-item__text {
        font-size: 20px;
    }

    .status-list .list-item__value {
        margin-top: 12px;
        font-size: 20px;
    }

    .status-list .list-item__value .value-num {
        margin-right: 12px;
    }
}

@media (max-width: 480px) {
    .status-wrap {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    .gauge-wrap {
        margin-top: 4px;
    }

    .gauge {
        width: 200px;
    }

    .gauge__bg,
    .gauge__progress {
        stroke-width: 30;
    }
}

/* 봉헌 현황 테이블 스타일 */
#tab-panel-diocese table th,
#tab-panel-organization table th,
#tab-panel-continent table th {
    width: 50%;
}

/* ========================================
 봉헌하기 페이지 스타일
======================================== */

.section-rosary .rosary-container h4 {
    margin-bottom: 44px;
    text-align: center;
}

.section-rosary .rosary-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    text-align: center;
}

.section-rosary .rosary-text {
    font-size: var(--font-size-base);
}

.section-rosary .rosary-form {
    margin-top: 40px;
}

.section-rosary .rosary-form__name {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 700;
}

.section-rosary .rosary-form__status {
    width: 100%;
    padding: 49px 0;
    background: #f2f2f2;
    border-radius: 20px;
}

.section-rosary .rosary-form__status p {
    font-size: 28px;
    font-weight: 700;
}

.section-rosary .rosary-form__time {
    margin-top: 12px;
    margin-bottom: 64px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: var(--text-secondary);
}

/* 묵주알 버튼 리스트 */
.section-rosary .bead-wrap {
    margin-top: 64px;
}

.section-rosary .bead-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.section-rosary .bead-list li {
    flex: 0 0 auto;
}

.section-rosary .bead-btn {
    width: 77px;
    height: 77px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/contents/img_rosary_bead.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    pointer-events: auto;
    /* disabled 상태여도 클릭 가능하도록 */
}

.section-rosary .bead-btn.active {
    opacity: 1;
}

.section-rosary .bead-btn:disabled {
    opacity: 0.3;
    cursor: pointer;
    /* disabled 상태여도 커서는 pointer 유지 */
}

.section-rosary .bead-btn span {
    display: block;
    text-indent: -9999px;
}

/* .section-rosary .input-wrap {
  margin-top: 64px;
} */
/* .section-rosary .btn--form {
  margin-top: 32px;
} */
.section-rosary .rosary-form__logout {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    text-align: center;
}

@media (max-width: 768px) {
    .section-rosary .bead-wrap {
        margin-top: 40px;
    }

    .section-rosary .bead-btn {
        width: 60px;
        height: 60px;
    }

    .section-rosary .rosary-form__current {
        margin-top: 24px;
    }

    .section-rosary .rosary-form__time {
        margin-bottom: 40px;
    }

    .section-rosary .btn--form {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .section-rosary .bead-btn {
        width: 45px;
        height: 45px;
    }
}

/* 묵주기도 참여 이메일 인증 로그인 */
.section-rosary .rosary-container .auth-form {
    margin-top: 40px;
}

/* ========================================
 폼 컨테이너 스타일
======================================== */
.form-page {
    border-bottom: 1px solid var(--border-light);
    background: #efefef;
}

.form-page-content {
    width: 100%;
}

.form-container {
    max-width: 590px;
    margin: 0 auto;
}

.content-row .form-container {
    margin: 0;
}

/* ========================================
 폼 페이지 스타일
======================================== */
.form-page .page-header {
    text-align: center;
}

.auth-info-box {
    display: none;
    /* 초기 숨김 - 인증번호 받기 버튼 클릭 시 표시 */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    margin-top: 20px;
    padding: 20px 24px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #666;
}

.auth-info-box.is-visible {
    display: flex;
    /* 표시될 때 flex로 변경 */
}

.auth-info-box>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.auth-info-box p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    color: var(--text-primary);
}

.auth-info-box .auth-timer {
    color: var(--primary-color);
}

.auth-info-box .btn--link {
    padding: 0;
    text-decoration: underline;
}

.auth-info-text {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .auth-info-box {
        flex-direction: column;
        flex-wrap: wrap;
        height: auto;
    }

    .auth-info-box>div {
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }

    .auth-info-box .btn--link {
        margin-top: 20px;
    }
}

/* ========================================
 섹션 헤더 스타일
======================================== */
.header-section {
    text-align: center;
}

.header-section__title {
    margin-bottom: 24px;
    font-size: 36px;
    font-weight: 600;
}

.header-section__title span {
    font-size: var(--font-size-large);
}

.header-section__text {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.header-section__image {
    margin-top: 40px;
}

.header-section__image img {
    min-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ========================================
 콘텐츠 행 스타일
======================================== */
.content-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: calc(100% / 1180 * 40);
}

.content-row__title {
    flex: 0 0 auto;
}

/* 연수 신청 현황 스타일 */
/* 연수 신청 테이블 반응형 스타일 */
.table-apply-list .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.table-apply-list .table {
    min-width: 100%;
}

.table-apply-list .table thead th {
    font-size: 17px;
}

.table-apply-list .table tbody td {
    padding: 17px 5px;
    word-break: keep-all;
}

.table-apply-list .table tbody .status-cell {
    white-space: nowrap;
}

@media (max-width: 1680px) {

    /* 태블릿 뷰에서 테이블 가로 스크롤 허용 */
    .table-apply-list .table-wrap {
        overflow-x: auto;
    }

    .table-apply-list .table {
        min-width: 1180px;
        padding-bottom: 20px;
    }
}

@media (max-width: 768px) {

    /* 모바일 뷰에서 카드형 테이블 구현 */
    .table-apply-list .table {
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-apply-list .table thead {
        display: none;
    }

    .table-apply-list .table tbody {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .table-apply-list .table tbody tr {
        display: grid;
        grid-template-columns: 1fr;
    }

    .table-apply-list .table tbody tr.no-data {
        display: table-row;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .table-apply-list .table tbody tr.no-data td {
        display: block;
        width: 100%;
        padding: 24px 16px;
        text-align: center;
        border-bottom: none;
    }

    .table-apply-list .table tbody td {
        position: relative;
        /* display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start; */
        width: 100%;
        height: 100%;
        min-height: auto;
        /* padding: 0; */
        padding: 17px 17px 17px 144px;
        border: 0;
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
        border-bottom: 1px solid #cdcdcd;
    }

    .table-apply-list .table tbody td:first-child {
        border-top: 1px solid #cdcdcd;
    }

    .table-apply-list .table tbody td::before {
        position: absolute;
        top: 0;
        left: 0;
        content: attr(data-label);
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 128px;
        height: 100%;
        background-color: var(--text-primary);
        color: #fff;
        text-align: center;
    }

    .table-apply-list .table tbody tr.no-data td::before {
        display: none;
    }

    .table-apply-list .table tbody td.status-cell {
        align-items: center;
    }
}

/* ========================================
 연수 신청 상세 스타일
======================================== */
.table-apply-detail {
    max-width: 590px;
}

/*나무심기*/
.ico {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ico::before {
    content: "";
    display: inline-block;
}

.ico.calendar::before {
    width: 24px;
    height: 24px;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_calendar.svg") no-repeat left center / 24px 24px;
}

.ico.place::before {
    width: 18px;
    height: 26px;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_place.svg") no-repeat left center / 18px 26px;
}

.page-section .registration-closed {
    text-align: center;
    color: #666;
}

/* ========================================
 수퍼클래스 스타일
======================================== */
.superclass-list-wrap {
    margin-top: 64px;
}

.superclass-list-title {
    margin-bottom: 24px;
    font-size: var(--font-size-large);
    font-weight: 600;
}

.superclass-list {
    display: flex;
    justify-content: space-between;
    gap: 38px;
    flex-wrap: wrap;
}

.superclass-item {
    width: calc((100% - 76px) / 3);
    text-align: center;
}

.superclass-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 368/521;
    object-fit: cover;
}

.superclass-item .btn {
    margin-top: 30px;
}

@media screen and (max-width: 768px) {
    .superclass-list {
        justify-content: center;
    }

    .superclass-item {
        width: 100%;
        max-width: 368px;
    }

    .superclass-item:not(:last-child) {
        display: none;
    }

    .superclass-list {
        gap: 24px;
    }

    .superclass-item .btn {
        margin-top: 24px;
    }
}

/* 수퍼클래스 모듈형 */
.page-section__image_text { display:flex; justify-content: space-between; align-items:flex-start; gap:clamp(20px, 3vw, 40px); }
.page-section__image_text > img { width:40%; }
.page-section__bx .page-section__text { margin-bottom:60px; }
.page-section__bx .content-row { width:auto; height:auto; margin-bottom:30px; }
.page-section__bx .content-row__title { min-width:100px; padding-right:0; }
.page-section__bx .content-row__content { width:100%; }

@media screen and (max-width: 768px) {
    .page-section__image_text { display:block; }
    .page-section__image_text > img { width:100%; }
    .page-section__bx .page-section__text { margin:40px 0 30px; }
}

.superclass-list-wrap .superclass-list-swiper { width: calc(100% + 100vw / 1920 * 200); }
.superclass-list-wrap .slider-popup__nav { padding:0; margin-bottom:12px; }
.superclass-list-wrap .swiper-slide { max-width:calc(386px + clamp(20px, 2vw, 38px)); padding-right:clamp(20px, 2vw, 38px); }
.superclass-list-wrap .swiper-slide > img { display:block; margin-bottom:15px; aspect-ratio: 386/555; width:100%; height:100%; object-position: center; object-fit: cover; }
.superclass-list-wrap .swiper-slide .date { display:flex; justify-content: flex-start; align-items:center; color: #000; font-size: 20px; font-weight: 600; gap:8px; }
.superclass-list-wrap .swiper-slide .date.gray { color:#747474; }
.superclass-list-wrap .swiper-slide .date > p { color: #fff; font-size: 12px; font-weight: 600; padding:4px 8px; border-radius:4px; line-height: 1; }
.superclass-list-wrap .swiper-slide .date > p.blue { background:#0047BB; }
.superclass-list-wrap .swiper-slide .date > p.black { background:#111; }
.superclass-list-wrap .swiper-slide .date > p.gray { background:#CDCDCD; color:#000; }

.superclass-info { font-size:20px; color:#000; line-height:1.5; letter-spacing:-0.4px; }

@media screen and (max-width: 768px) {
    .superclass-list-wrap .superclass-list-swiper { width: 100%; }
    .superclass-info { font-size:16px; }
}
@media screen and (max-width: 444px) {
    .superclass-list-wrap .swiper-slide { max-width: 100%; padding-right: 0; }
}

/* ========================================
 주제가 공모 페이지 스타일
======================================== */
.page-youtube .page-section__title {
    font-weight: 700;
    letter-spacing: -0.48px;
    margin-bottom: 24px;
    position: relative;
}

.page-youtube .page-section__title::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 10px;
    left: 0;
    margin-right: 8px;
    width: 36px;
    height: 36px;
    background: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_play_circle.svg") no-repeat 50% / 36px 36px;
}

.page-youtube .page-section__text {
    font-weight: 400;
    margin-bottom: 40px;
}

.page-section__title .reference {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.32px;
    position: relative;
    top: -3px;
}

/* ========================================
 십자가 순례 스타일
======================================== */
.section-cross-current .current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 145px;
    padding: 0 51px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/backgrounds/cross_current_bg.png) no-repeat;
    border-radius: 16px;
    background-size: 1180px 145px;
    background-position: center center;
}

.section-cross-current .current p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
    text-align: center;
}

.section-cross-current strong {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.56px;
    color: var(--primary-color);
}

@media screen and (max-width: 768px) {
    .section-cross-current .current {
        padding: 30px 51px;
        background: none;
        background-color: #f5f5f5;
    }
}

.section-cross-future .cross-future {
    position: relative;
    width: calc(100% + 10vw);
}

.cross-future-swiper {
    align-items: stretch;
    margin-top: 12px;
}

.cross-future-swiper .swiper-slide {
    width: 271px;
    height: 301px;
    margin-right: 32px;
}

.cross-future-swiper .bx {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 36px 52px 0;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/backgrounds/cross_slider_item.png) no-repeat center center / 100% 100%;
    border-radius: 16px;
    overflow: hidden;
}

.cross-future-swiper .bx.today {
    color: #fff;
    /*background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/backgrounds/cross_slider_item_today.png)
 no-repeat center center / 100% 100%; */
    background: #0047bb;
}

.cross-future-swiper .bx .icon-location {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_location_b.svg) no-repeat center center / 100% 100%;
}

.cross-future-swiper .bx.bx.today .icon-location {
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_location_w.svg) no-repeat center center / 100% 100%;
}

.cross-future-swiper .bx .location {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.32px;
    text-align: center;
}

.cross-future-swiper .bx .date {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.32px;
    text-align: center;
}

.cross-future-swiper .bx .date p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.32px;
}

.cross-future-swiper .bx .btn {
    margin-top: 16px;
}

.cross-future .slider-popup__nav {
    padding: 0;
}

@media screen and (max-width: 768px) {
    .cross-future .slider-popup__nav {
        display: flex;
    }
}

.section-cross-past .cross-past {
    width: 100%;
}

.section-cross-past .cross-past-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-cross-past .cross-past-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 40px;
    background-color: #f5f5f5;
    border-radius: 16px;
}

.section-cross-past .cross-past-item .location {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
}

.section-cross-past .cross-past-item .location::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_location_b.svg) no-repeat center center / 100% 100%;
}

.section-cross-past .cross-past-item .date {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

.section-cross-past .cross-past-item .btn {
    margin-top: auto;
}

.section-cross-past .btn-wrap {
    margin-top: 40px;
}

.section-cross-future .slider-refresh {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/icon/ico_refresh.svg) no-repeat center center / 100% 100%;
    text-indent: -9999px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .section-cross-past .cross-past-list {
        gap: 20px;
    }

    .section-cross-past .cross-past-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 40px 24px;
    }
}

/* ========================================
 개인정보처리방침 및 쿠키 정책 페이지 스타일
======================================== */
.privacy-policy-page .page-container {
    flex-direction: column;
    align-items: flex-start;
}

/* 정책 콘텐츠 영역 */
.policy-content {
    width: 100%;
    padding-top: 40px;
}

.policy-section {
    margin-bottom: 60px;
}

.policy-section:last-child {
    margin-bottom: 0;
}

.policy-section__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--text-primary);
    margin-bottom: 24px;
    word-break: keep-all;
}

.policy-section__content {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.32px;
    color: var(--text-primary);
    word-break: keep-all;
}

.policy-section__content p {
    margin-bottom: 16px;
}

.policy-section__content p:last-child {
    margin-bottom: 0;
}

.policy-section__content ol,
.policy-section__content ul {
    margin: 16px 0;
    padding-left: 24px;
}

.policy-section__content li {
    margin-bottom: 12px;
    line-height: 1.75;
}

.policy-section__content li:last-child {
    margin-bottom: 0;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .policy-content {
        padding-top: 24px;
    }

    .policy-section {
        margin-bottom: 40px;
    }

    .policy-section__title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .policy-section__content {
        font-size: 14px;
    }

    .policy-section__content ol,
    .policy-section__content ul {
        padding-left: 20px;
    }

    .policy-section__content li {
        margin-bottom: 8px;
    }
}

/* ========================================
 개인정보처리방침 및 쿠키 정책 페이지 스타일
======================================== */
.policy-content {
    width: 100%;
    padding: 65px 24px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-medium);
}

.policy-content .policy-section {
    margin-bottom: 40px;
}

.policy-content .policy-section:last-child {
    margin-bottom: 0;
}

.policy-content .policy-section .version-list {
    display:flex;
    flex-direction: column;
    gap:8px;
    border-radius: 16px;
    background: #F5F5F5;
    padding:40px;
}
.policy-content .policy-section .version-list a {
    color: #0047BB;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.36px;
}
.policy-content .policy-section .version-list a:hover {
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    .policy-content {
        padding: 20px;
    }

    .policy-content .policy-section {
        margin-bottom: 20px;
    }

    .policy-content .policy-section .version-list {
        padding:20px;
    }
    .policy-content .policy-section .version-list a {
        font-size:16px;
        text-indent: -9px;
        padding-left: 9px;
    }
}

/* ========================================
 쿠키 설정 모달 스타일
======================================== */
.cookie-modal .modal__body {
    height: 382px;
    overflow-y: auto;
}

@media screen and (max-width: 768px) {
    .cookie-modal .modal__body {
        height: auto;
    }
}

/* ========================================
 쿠키 사용 모달 스타일
======================================== */
.cookie-info-modal .modal__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.cookie-info-modal .modal__content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

.cookie-info-modal .modal__content .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cookie-info-modal .modal__content .btn-wrap .btn {
    min-width: auto;
}

@media screen and (max-width: 768px) {
    .cookie-info-modal .modal__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .cookie-info-modal .modal__content .btn-wrap {
        width: 100%;
    }
}

/* ========================================
 연수 신청 현황 스타일
======================================== */
.td-flex {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ========================================
 길잡이 스타일
======================================== */
.guide-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.guide-box>div {
    flex: 1;
}

.guide-box__left {
    padding: 20px 0;
    background-color: var(--GRAY_01);
    text-align: center;
}

.guide-box__left-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guide-box__left-image img {
    width: 144px;
    height: 213px;
    border: 1px solid var(--border-medium);
}

.guide-box__left-image .btn {
    margin-top: 24px;
}

.guide-box__right-text {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.guide-box__right .btn-wrap {
    display: flex;
    align-items: flex-end;
    margin-top: 24px;
    gap: 24px;
}

.guide-box__right .qr-code {
    width: 95px;
    height: 94px;
}

.guide-box__right .qr-code img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .guide-box {
        flex-direction: column;
        align-items: center;
    }

    .guide-box__left {
        width: 100%;
    }

    .guide-box__right .btn-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
 주제성구 스타일
======================================== */
.theme-visual {
    position: relative;
    margin-bottom: 40px;
}

.theme-visual picture {
    display: block;
    width: 100%;
    height: auto;
}

.theme-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.theme-bg-pattern {
    width: 100%;
    height: calc(100vw / 1920 * 470);
    margin-bottom: -100px;
    background-image: url("https://wizware.dnstrip.net/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/page_theme_bg-86edea1baeda32a42e7174dbef99a8f4.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

@media screen and (max-width: 1280px) {
    .theme-bg-pattern {
        display: none;
    }
}

/* ========================================
 9월愛동행 갤러리 스와이퍼 스타일
======================================== */
/* 갤러리 컨테이너 */
.gallery {
    position: relative;
    max-width: 1189px;
    margin: 0 auto;
    text-align: center;
}

/* 메인 스와이퍼 컨테이너 */
.gallery-swiper-container {
    position: relative;
    padding: 0 50px 30px;
}

/* 메인 스와이퍼 (큰 이미지) */
.gallery-swiper-main .swiper-wrapper {
    position: relative;
}

.gallery-swiper-main .swiper-slide {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.gallery-swiper-main .swiper-slide img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* 네비게이션 버튼 */
.gallery .swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery .swiper-nav--prev {
    left: 0;
}

.gallery .swiper-nav--next {
    right: 0;
}

.gallery .swiper-nav-icon {
    width: 20px;
    height: 20px;
    border: 2px solid var(--black);
    border-bottom: none;
    border-right: none;
    display: block;
}

.gallery .swiper-nav--prev .swiper-nav-icon {
    transform: rotate(-45deg);
}

.gallery .swiper-nav--next .swiper-nav-icon {
    transform: rotate(135deg);
}

.gallery .swiper-nav:hover {
    transform: translateY(-50%);
}

.gallery .swiper-nav:disabled:hover {
    transform: translateY(-50%);
}

/* components.css의 기본 ::after 아이콘 숨김 (swiper-nav-icon 사용) */
.gallery .swiper-nav::after {
    display: none !important;
    content: "" !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 썸네일 스와이퍼 */
.gallery-swiper-thumbs {
    height: calc(100% / 7);
    box-sizing: border-box;
    padding-top: 20px;
    overflow: hidden;
}

.gallery-swiper-thumbs .swiper-wrapper {
    align-items: center;
}

.gallery-swiper-thumbs .swiper-slide {
    width: auto;
    height: 100%;
    aspect-ratio: 997 / 665;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
}

.gallery-swiper-thumbs .swiper-slide-thumb-active {
    border: 6px solid var(--primary-color);
}

.gallery-swiper-thumbs .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 반응형: 태블릿 */
@media (max-width: 1350px) {
    .gallery {
        max-width: 100%;
    }

    .gallery-swiper-thumbs {
        padding: 1.563rem 0;
    }
}

/* 반응형: 모바일 */
@media (max-width: 820px) {
    .gallery {
        margin: 2.188rem auto 0;
    }

    .gallery-swiper-container {
        padding: 0 40px 20px;
    }

    .gallery .swiper-nav-icon {
        width: 16px;
        height: 16px;
    }
}

/* 반응형: 작은 모바일 */
@media (max-width: 768px) {
    .gallery .swiper-nav-icon {
        width: 16px;
        height: 16px;
    }
}

/* ========================================
 뉴스레터 구독 모달 스타일
======================================== */
.newsletter-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    margin-bottom: 64px;
}

.newsletter-modal-content .input-wrap input[type="email"] {
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.32px;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: white;
}

.newsletter-modal-content .input-wrap input[type="email"]::placeholder {
    color: #666;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.32px;
}

.newsletter-modal-content .input-wrap input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .newsletter-modal-content {
        margin-bottom: 16px;
    }
}

/* ========================================
 피드백 페이지 스타일
======================================== */
#feedback-form .char-counter {
    top: -36px;
    bottom: auto;
    right: 0;
}

/* ========================================
 기부하기 - 기부 안내 스타일
======================================== */
.donate-bx__flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(15px, 1.459vw, 28px);
}

.donate-bx__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(19px, 1.667vw, 32px);
}

.donate-bx__flex.contact {
    gap: clamp(19px, 1.667vw, 32px);
}

.donate-bx__info {
    margin-top: 32px;
    word-break: keep-all;
}

.donate-bx__item {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    line-height: 1.5;
    border-radius: 20px;
    border: 1px solid #ccc;
    word-break: keep-all;
}

.donate-bx__flex .donate-bx__item {
    padding: 32px 32px 72px 32px;
    gap: 8px;
}

.donate-bx__grid .donate-bx__item {
    padding: 44px 10px;
    text-align: center;
    justify-content: center;
}

.donate-bx__flex.contact .donate-bx__item {
    padding: 40px;
    background: #F0F3F8;
    border: 0;
    gap:16px;
}

.donate-bx__flex.contact .donate-bx__item:first-child {
    flex: 0.35;
}

.donate-bx__info .donate-bx__item {
    border-radius: 16px;
    background: var(--primary-color);
    color: #fff;
    padding: 40px;
}

.donate-bx__item .text-2xl {
    letter-spacing: -0.48px;
}
.donate-bx__item .text-xl {
    letter-spacing: -0.4px;
}
.donate-bx__item .text-lg {
    letter-spacing: -0.36px;
}
.donate-bx__item .text-base {
    letter-spacing: -0.32px;
}
.donate-bx__item .text-indent {
    text-indent:-16px;
}
@media (max-width: 768px) {
    .donate-bx__flex {
        display: block;
    }

    .donate-bx__flex .donate-bx__item {
        padding: 5.5813vw;
        padding-bottom: 11.1628vw;
    }

    .donate-bx__flex .donate-bx__item+.donate-bx__item {
        margin-top: 5.5814vw;
    }

    .donate-bx__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .donate-bx__grid .donate-bx__item {
        padding: 6.9767vw;
        aspect-ratio: 157/112;
        min-width: 100px;
    }

    .donate-bx__flex.contact .donate-bx__item {
        padding: 6.9767vw;
    }

    .donate-bx__info .donate-bx__item {
        padding: 5.5813vw;
    }

    .donate-bx__item .text-2xl {
        font-size: 20px;
    }

    .donate-bx__item .text-3xl {
        font-size: 24px;
    }

    .donate-bx__item .text-base {
        font-size: 16px;
    }

    .donate-bx__item .text-xl {
        font-size: 18px;
    }

    .donate-bx__info .text-lg {
        font-size: 16px;
    }
}

/* ========================================
 링크 설명 스타일
======================================== */
.linkDesc {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ========================================
 스크롤 모션(mt) — 아래에서 위로/좌우로 나타나는 인터랙션
======================================== */
.mt {
    opacity: 0;
    /* all 로 걸려있으면 768px 반응형 분기점을 넘나들 때 margin/flex-direction 등 레이아웃
       속성 변화까지 전부 트랜지션 대상이 되어(예: .wyd-card 의 mt mt-right/mt-left) 화면이
       흔들리듯 이상하게 움직였다. transform 만 트랜지션되도록 좁힘 */
    transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.mt.show {
    opacity: 1;
    transform: none;
}

.mt-up {
    transform: translate(0, 100px);
}

.mt-right {
    transform: translate(-100px, 0);
}

.mt-left {
    transform: translate(100px, 0);
}