@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;
}

/* GNB 메뉴 호버/활성 시 헤더 스타일 변경 (흰 배경, 검은 글씨) */
.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);
   }
}

/* ========================================
 검색 레이어 스타일
======================================== */
/* 검색 배경 딤 처리 레이어 - iOS Safari fixed 위치 안정화 */
.search-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   /* dvh 미지원 브라우저 fallback */
   height: 100dvh;
   /* 사파리 주소창 높이 변화 대응: dvh 사용 */
   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);
   /* iOS Safari fixed 위치 안정화를 위한 GPU 가속 추가 */
   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);
   /* iOS Safari fixed 위치 안정화 유지 */
   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;
}

/* 태블릿/모바일 반응형 - 1280px 이하 */
@media (max-width: 1280px) {
   .search-layer {
      top: 0;
      height: 71px;
   }
}

/* 모바일 반응형 - 767px 이하 */
@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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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: 40dvh;
   /* 뷰포트 높이의 40% 기준으로 초기 위치 설정 */
   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: 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://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png");
   /* 서브페이지 기본: 일반 로고 */
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   transition: background-image 0.3s ease-in-out;
   /* 트랜지션 추가 */
   /* 사파리에서 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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png");
   /* 스크롤 시: 일반 로고 */
}

/* GNB 메뉴 호버/활성 시 로고 이미지 변경 */
.header.is-menu-open .wyd-logo__image {
   background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251224113702214.png") !important;
   /* 메뉴 열림 시: 일반 로고 */
}

:lang(es) {
   .wyd-logo__image {
      background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_es-20251224114753996.png");
      /* 스크롤 시: 일반 로고 */
   }

   /* GNB 메뉴 호버/활성 시 로고 이미지 변경 */
   .header.is-menu-open .wyd-logo__image {
      background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_fr-20251224114847762.png");
      /* 스크롤 시: 일반 로고 */
   }

   /* GNB 메뉴 호버/활성 시 로고 이미지 변경 */
   .header.is-menu-open .wyd-logo__image {
      background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_pt-20251224115011607.png");
      /* 스크롤 시: 일반 로고 */
   }

   /* GNB 메뉴 호버/활성 시 로고 이미지 변경 */
   .header.is-menu-open .wyd-logo__image {
      background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_it-20251224114937705.png");
      /* 스크롤 시: 일반 로고 */
   }

   /* GNB 메뉴 호버/활성 시 로고 이미지 변경 */
   .header.is-menu-open .wyd-logo__image {
      background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/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;
      /* 로고 가로 크기 - 74:84 비율 유지하여 축소 */
      height: 57px;
      /* 로고 높이 크기 - 74:84 비율 유지하여 축소 (84 × 50 / 74 ≈ 56) */
      min-width: 50px;
      /* 사파리에서 크기 고정을 위한 최소 크기 설정 */
      min-height: 57px;
      /* 사파리에서 크기 고정을 위한 최소 크기 설정 */
   }
}

/* ========================================
 GNB 스타일
======================================== */
.gnb {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   gap: 40px;
}

.gnb__link {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 120px;
   padding: 0 20px;
   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;
}

/* 메인 페이지에서만 GNB 링크 초기 상태를 흰색으로 설정 */
body:has(#main) .header:not(.is-scrolled) .gnb__link {
   color: #fff;
   /* 메인 페이지 초기 상태: 흰색 글씨 */
}

/* 스크롤 시 GNB 링크 색상 변경 */
.header.is-scrolled .gnb__link {
   color: var(--text-primary);
   /* 스크롤 시: 기본 텍스트 색상 */
}

/* GNB 메뉴 호버/활성 시 GNB 링크 색상 변경 */
.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;
}

.gnb__item.is-active .gnb__dropdown {
   pointer-events: auto;
   opacity: 1;
   visibility: visible;
}

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

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

.gnb__dropdown-list {
   width: 313px;
   min-height: 356px;
   /* padding: 20px 0; */
   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);
   /* margin-bottom: 28px; */
   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://objectstorage.ap-seoul-1.oraclecloud.com/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: 360px;
   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);
}

/* ========================================
 유틸리티 버튼 스타일
======================================== */
.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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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;
   /* 트랜지션 추가 */
}

.util__btn.type-menu {
   background: url(https://objectstorage.ap-seoul-1.oraclecloud.com/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;
   /* 스크롤 시: 원래 색상 (검은색) */
}

/* GNB 메뉴 호버/활성 시 유틸리티 버튼 아이콘 색상 변경 */
.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;
   /* 메뉴 열림 시: 원래 색상 (검은색) */
}

/* [변경내용] 언어 드롭다운 UI 스타일 추가 */

.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;
   }
}

@media (max-width: 767px) {
   .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) {
   .d-day {
      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-image: url(https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/main_visual_01.jpg);
   background-size: 1920px 848px;
   background-position: center bottom;
   background-repeat: no-repeat;
}

.hero-swiper .swiper-slide.slide-1 {
   background-image: url(https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnla9ryzc1ev/b/wydseoul-public-resources/o/assets/images/main/main_visual_01.jpg);
}

.hero-swiper .swiper-slide.slide-2 {
   background-image: url(https://objectstorage.ap-seoul-1.oraclecloud.com/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;
   }
}

/* 히어로 스와이퍼 진행바 */
.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);
}

.hero-swiper-progress .progress {
   width: 100%;
   height: 100%;
   background: #fff;
   transition: width 0.1s linear;
}

.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://objectstorage.ap-seoul-1.oraclecloud.com/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-swiper .swiper-slide {
    height: 653px;
    background-size: cover;
  } */
   .hero-slide__btn {
      margin-top: 52px;
   }
}

/* 메인 컨텐츠 섹션 */
.main-body {
   width: 100%;
   padding-bottom: 200px;
   background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/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;
}

.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;
   }
}

/* 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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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: 2px 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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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;
   -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;
}

/* 헤더 영역 - 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);
}

@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) */
   }
}

@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;
   }
}

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

/* ========================================
 히어로 섹션 반응형 스타일
======================================== */
@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) {
   * {
      -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);
   /* 사파리 주소창 높이 변화 대응: dvh 사용 */
   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);
      /* 사파리 주소창 높이 변화 대응: dvh 사용 */
      padding: 0 calc(100vw / 1920 * 200);
   }
}

@media (max-width: 768px) {
   .page-container {
      min-height: calc(100vh - 400px);
      /* dvh 미지원 브라우저 fallback */
      min-height: calc(100dvh - 400px);
      /* 사파리 주소창 높이 변화 대응: dvh 사용 */
      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: 296px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
}

.lnb__scroll-wrap {
   width: 100%;
   height: 100%;
   margin-left: -5px;
   padding: 36px 26px 87px 32px;
   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: 3px;
   width: 1px;
   height: 100%;
   background: #ccc;
   z-index: -1;
}

.lnb__title {
   margin-top: 10px;
   margin-bottom: 44px;
   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__group {
   position: relative;
   margin-bottom: 80px;
}

.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: -32px;
   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: 40px;
   margin: 0;
}

.lnb__item {
   margin-bottom: 24px;
}

.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;
}

.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 44px;
   /* 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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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://objectstorage.ap-seoul-1.oraclecloud.com/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__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;
}