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

/* ========================================
   검색 레이어 스타일
======================================== */
/* 검색 배경 딤 처리 레이어 - 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__item.icon-address {
  background: url("https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251217141814492.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/cnkf9bkeu8eq/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027_w-20251217141759081.png"); /* 메인 페이지 초기 상태: 흰색 로고 */
}

/* 스크롤 시 로고 이미지 변경 */
.header.is-scrolled .wyd-logo__image {
  background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnkf9bkeu8eq/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251217141814492.png"); /* 스크롤 시: 일반 로고 */
}

/* GNB 메뉴 호버/활성 시 로고 이미지 변경 */
.header.is-menu-open .wyd-logo__image {
  background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnkf9bkeu8eq/b/wydseoul-public-resources/o/assets/logo_wyd_seoul_2027-20251217141814492.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 드롭다운 스타일
======================================== */
/* 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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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-size: clamp(20px, calc(3vw + 10px), 48px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.48px;
  color: var(--text-primary);
}
.main-section.section-cross .left__text h3 {
  font-size: clamp(24px, calc(4vw + 20px), 76px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.28px;
  color: var(--text-primary);
}
.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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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: 1580px) {
  .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/cnkf9bkeu8eq/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;
}
.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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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: 83px; /* GNB 로고 높이와 동일하게 변경 (70px → 83px) */
  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%;
}
/* 컨텐츠 영역 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: 56px; /* GNB 로고 반응형 높이와 동일하게 변경 (50px → 56px) */
  }
}
@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/cnkf9bkeu8eq/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;
}
/* 게시글 본문 (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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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;
}
.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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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 {
  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/cnkf9bkeu8eq/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;
}
.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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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-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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/b/wydseoul-public-resources/o/assets/images/backgrounds/cross_slider_item_today.png)
  no-repeat center center / 100% 100%;
}
.cross-future-swiper .bx .icon-location {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  background: url(https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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/cnkf9bkeu8eq/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;
}
@media screen and (max-width: 768px) {
  .policy-content {
    padding: 20px;
  }
  .policy-content .policy-section {
    margin-bottom: 20px;
  }
}
/* ========================================
   쿠키 설정 모달 스타일
======================================== */
.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: calc(100vw / 1920 * 1380);
  height: calc(100vw / 1920 * 470);
  margin-bottom: -120px;
  background-image: url("https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnkf9bkeu8eq/b/wydseoul-public-resources/o/assets/images/contents/wydTheme/page_theme_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@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;
}