/* 페이지 배경 그라데이션.
   bulma 가 html{background-color:white} 를 걸어두기 때문에 body 에만 배경을 두면
   body 배경이 캔버스로 전파되지 않는다. 삼성브라우저처럼 전체화면 전환 시
   주소창이 접히며 뷰포트가 커지면, 아직 안 칠해진 영역이 흰색으로 드러난다.
   -> html 에 직접 칠해 캔버스 자체를 어둡게 만든다. */
html {
  /* 그라데이션 시작색. 어떤 여백이 생겨도 흰색이 되지 않게 하는 안전장치 */
  background-color: #1b1533;
  background-image: var(--page-grad);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
body {
  /* html 이 캔버스를 칠하므로 body 는 투명하게 둔다 */
  background-color: transparent;
}
#wrap {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  /* 주소창이 접혀 뷰포트가 커질 때까지 반영 (미지원 브라우저는 위 vh 사용) */
  min-height: 100dvh;
  /* 배경 없이 투명하게 두어야 스크롤 시 합성만 하고 다시 칠하지 않는다 */
  background: transparent;
}

/* 무한 애니메이션이 도는 고정 요소는 별도 레이어로 올려두지 않으면
   스크롤할 때마다 같이 다시 칠해져 버벅임의 원인이 된다 */
.quick_menu {
  will-change: transform;
}
#wrap.all_wrap {
  padding-bottom: 0;
}
#wrap.all_wrap > * {
  padding-bottom: 120px;
}
#wrap.bg_ver2 {
  background: #22252c;
}
.hd_tab a {
  width: 50%;
  text-align: center;
  line-height: 42px;
  color: #999999;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #e9e9e9;
}
.hd_tab {
  width: 100%;
  margin: 8px 0 25px;
}
.hd_tab a.on {
  color: #000;
  font-weight: 700;
  border-bottom: 2px solid #000;
}
#wrap header {
  position: relative;
  z-index: 100;
  height: 67px;
  display: flex;
  align-items: center;
}
#wrap header h1 img {
  height: 28px;
}

/* 2025 theme :: 메인 로고 헤더 그라데이션 (.inner 20px 패딩 밖으로 풀블리드) */
/* 2025 theme :: 홈은 헤더를 메인 슬라이드 위에 투명하게 얹는다
   (.main_container 는 홈에서만 쓰이므로 자연히 홈 전용) */
#wrap .main_container > header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 20px;
  background: transparent;
  z-index: 100;
}
/* 로고는 사진 위에 그대로 얹는다 (검정 그림자 없음).
   알림·언어 아이콘은 얇은 선이라 밝은 사진에서 사라져 그림자를 남겨 둔다. */
#wrap .main_container > header .link_box svg {
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.85));
}

/* 2026 :: 헤더 우측 아이콘 묶음 (언어 전환 + 알림) */
#wrap .main_container > header .link_box {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* ---------- 언어 전환 ---------- */
.lang_switch {
  position: relative;
  display: inline-flex;
}
.lang_switch .lang_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.lang_switch .lang_menu {
  position: absolute;
  top: calc(100% + 10px);
  /* 버튼 오른쪽 끝에 맞춰 펼쳐 화면 밖으로 넘치지 않게 */
  right: 0;
  z-index: 120;
  min-width: 122px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 16, 43, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  /* visibility 로 감춰야 닫힌 동안 클릭·포커스·스크린리더에서 모두 빠진다.
     visibility 전환은 사라질 때만 지연시켜 페이드아웃이 보이게 한다. */
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.lang_switch.is_open .lang_menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.lang_switch .lang_menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.lang_switch .lang_menu li + li a {
  /* 항목 사이 얇은 구분선 (마지막 항목 아래로는 안 나가게 a 기준) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lang_switch .lang_menu a:active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
/* 말풍선 꼬리 */
.lang_switch .lang_menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 16, 43, 0.92);
}

/* 2025 theme :: 서브 헤더바 그라데이션
   .btn_right(absolute; right:-10px)가 헤더 박스를 기준으로 잡혀 있어
   음수 마진 대신 의사요소로 풀블리드 처리 */
.sub_container.inner > header.sub_hd {
  overflow: visible;
}
.sub_container.inner > header.sub_hd::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  z-index: -1;
  background: var(--hd-grad);
}
/* 알림 헤더(.bg_black)는 시안대로 단색 유지 */
header.sub_hd.bg_black {
  background: var(--black);
}

/* .wrap 의 상태바 여백(padding-top)만큼 헤더가 아래로 밀려, 헤더 그라데이션 위로
   페이지 배경이 빈 띠처럼 보였다. 헤더를 그만큼 끌어올려 배경이 상단까지 이어지게 하고
   콘텐츠는 패딩으로 제자리에 둔다 (레이아웃상 높이는 그대로 67px). */
.main_container > header,
.sub_container.inner > header.sub_hd,
header.sub_hd.bg_black {
  margin-top: calc(-1 * var(--safe-top));
  padding-top: var(--safe-top);
  height: auto;
  min-height: 67px;
}

/* sub page */
/* 헤더를 3열(뒤로가기 | 제목 | 우측 버튼)로 잡아 우측에 버튼이 있어도 제목이 정확히 가운데 온다.
   양쪽 열은 같은 폭(1fr)이라 버튼 폭과 무관하게 중앙이 유지된다. */
#wrap header.sub_hd > .flexBox {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 67px;
}
#wrap header.sub_hd > .flexBox > .btn_back {
  grid-column: 1;
  justify-self: start;
}
#wrap header.sub_hd > .flexBox > h2 {
  grid-column: 2;
  padding-right: 0;
  min-width: 0;
}
#wrap header.sub_hd > .flexBox > .btn_back ~ *:not(h2) {
  grid-column: 3;
  justify-self: end;
}
#wrap header.sub_hd .btn_back img {
  width: 15px;
}
#wrap header.sub_hd h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding-right: 15px;
  flex: 1;
}
.sub_container {
  /* 2025 theme :: 크림슨/시안 글로우 PNG는 퍼플 그라데이션과 충돌해 제거 */
  background: none;
}
.sub_container.no_bg {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.sub_container.no_bg .sub_hd {
  height: 68px;
}

.sub_container.fix_top header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.sub_container.fix_top .fix_inner {
  padding-top: 67px;
}
#wrap header.sub_hd h2.alarm_count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

h3.white_title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
.white_title > a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
#wrap .bottomBtn .btm_btn {
  display: flex;
  flex-direction: column;
  color: #fff;
  width: 100%;
  align-items: center;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  height: 100%;
  justify-content: center;
}
#wrap .bottomBtn .btn_center {
  margin-top: -22px;
}
/* 가운데 스탬프 버튼 둘레의 퍼플 헤일로 */
#wrap .bottomBtn .btn_center .btm_btn svg {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(233, 62, 216, 0.55),
    0 0 18px 4px rgba(233, 62, 216, 0.45),
    0 0 34px 10px rgba(233, 62, 216, 0.18);
}
#wrap .bottomBtn .btn_center .btm_btn {
  text-align: center;
  border-radius: 20px;
  padding: 5px 0;
  color: #fff;
}

#wrap .bottomBtn .btn_center .btm_btn span {
  color: var(--purple);
}

/* 2025 theme :: 화면에서 띄운 라운드 탭바 (좌우 여백 + 둥근 모서리) */
#wrap .bottomBtn {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  width: auto;
  padding: 0;
  z-index: 1;
  background: #0a0a0a;
  height: 73px;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
#wrap .bottomBtn ul {
  display: flex;
  width: 100%;
  height: 73px;
}
#wrap .bottomBtn ul li {
  /* 5개 항목 — 기존 25% 는 합계 125% 라 어긋났다 */
  width: 20%;
}

#wrap .bottomBtn ul li.on {
  color: var(--purple);
}
#wrap .bottomBtn ul li.on svg path {
  fill: var(--purple);
}

#wrap .bottomBtn ul li .on_btn .btm_img {
  filter: invert(38%) sepia(72%) saturate(3316%) hue-rotate(285deg) brightness(101%) contrast(87%);
}
#wrap .bottomBtn ul li .on_btn {
  color: var(--purple);
}
#wrap .bottomBtn ul li .on_btn svg path {
  fill: var(--purple);
}

/* main */
.main_container {
  /* 2025 theme :: 글로우 PNG 제거, 페이지 그라데이션 사용 */
  background: none;
  /* 위 오버레이 헤더의 기준점 */
  position: relative;
}

/* 2025 theme :: 메인 사진 슬라이드 영역 (구 .main_visual_area 대체) */
.main_slide_area {
  /* 헤더가 오버레이라 상단 여백 0 — 사진이 화면 맨 위까지 */
  margin: 0 -20px;
}
.main_slide_area .swiper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* 16:10 처럼 세로가 짧은 화면에서 4:5(=폭의 125%)가 화면을 다 먹는 것 방지.
     19.5:9 폰에서는 4:5 가 이미 약 58vh 라 그대로, 짧은 화면에서만 여기서 잘린다.
     (잘릴 때는 img 의 object-fit:cover 가 사진을 채움) */
  max-height: 58vh;
  overflow: hidden;
  background: var(--navy-deep);
}
.main_slide_area .swiper-wrapper,
.main_slide_area .swiper-slide {
  height: 100%;
}
.main_slide_area .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 사진 위에는 아무것도 얹지 않는다 — 검정 스크림과 주제 카피 모두 걷어냈다.
   (걷어낸 것: .slide_copy / .copy_eyebrow / .copy_theme / .copy_title) */

/* 페이지네이션은 사진 우하단 */
.main_slide_area .swiper-pagination {
  bottom: 12px;
  z-index: 11;
  text-align: right;
  padding-right: 20px;
}
.main_slide_area .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #fff;
  opacity: 0.45;
  transition: width 0.3s ease;
}
.main_slide_area .swiper-pagination-bullet-active {
  width: 18px;
  border-radius: 4px;
  background: var(--purple);
  opacity: 1;
}
.main_slide_area .link_area {
  padding: 14px 20px 0;
}
.main_slide_area .link_area .txt {
  display: inline-flex;
  align-items: center;
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}
.main_slide_area .link_area .txt img {
  width: 5px;
  margin-left: 5px;
}
.main_slide_area .link_area .btn_s {
  position: relative;
  z-index: 10;
  flex: none;
  width: 67px;
  margin-left: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  line-height: 26px;
  text-align: center;
}
.main_visual_area {
  background: linear-gradient(-47deg, #f38e24, #8c0cff);
  height: 143px;
  border-radius: 8px;
  position: relative;
  padding: 20px;
  margin-top: 8px;
}
.main_visual_area .txt_left {
  font-size: 12px;
}
.main_visual_area .info_tit {
  color: #fff;
  font-size: 16px;
}
.main_visual_area .visual_link {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  height: auto;
  line-height: 1.2;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.main_visual_area .visual_link img {
  width: 7px;
}
.main_visual_area .img_right {
  position: absolute;
  top: -25px;
  width: 47%;
  right: -20px;
  max-width: 190px;
}

.main_visual_area .img_right img {
  width: 100%;
  opacity: 0;
}

.swiper-slide-active img {
  opacity: 1 !important;
}

.main_visual_area .link_area {
  margin-top: 20px;
}
.main_visual_area .link_area .txt {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
  flex: 1;
}
.main_visual_area .link_area .txt img {
  width: 5px;
  margin-left: 5px;
}
.main_visual_area .link_area .btn_s {
  position: relative;
  z-index: 10;
  line-height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  width: 67px;
  text-align: center;
  margin-left: 10px;
}

.main_contents {
  margin-top: 30px;
}
.main_contents_list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 3px;
  padding-right: 3px;
  justify-content: space-between;
  gap: 12px 6.5%;
}
.main_contents_list li {
  position: relative;
  width: 20.125%;
}
.main_contents_list li > a {
  width: 100%;
  display: block;
  padding: 0;
  text-align: center;
  /* 아이패드 등 넓은 화면에서 .ico 원(padding-top:100%)이 무한정 커지는 문제.
     통이미지형(.ico_box img)의 max-width:120px 과 같은 기준으로 타일을 캡한다 */
  max-width: 120px;
  margin-left: auto;
  margin-right: auto;
}
/* NEW 뱃지: 아이콘 타일(a) 기준으로 오른쪽 위에 고정. 예전엔 li 기준·가로 위치 미지정이라
   타일 가운데 위쪽에 떠 보였고, img 크기도 지정이 없어 0 으로 그려지는 경우가 있었다. */
.main_contents_list li > a {
  position: relative;
}
.main_contents_list li > a .ico_new {
  position: absolute;
  top: -6px;
  right: -4px;
  left: auto;
  z-index: 10;
  line-height: 0;
}
.main_contents_list li > a .ico_new img {
  width: 34px;
  height: 21px;
  max-width: none;
  display: block;
}
.main_contents_list li > a .ico_box img {
  width: 100%;
  max-width: 120px;
}

/* iOS Liquid Glass — 얇고 평평한 유리막
   볼록한 광택 버튼이 아니라 '뒤가 비치는 얇은 판'이 되도록
   - 굴절(backdrop-filter)이 주인공
   - 광택 블롭/드롭섀도 없음
   - 가장자리에만 머리카락처럼 얇은 림
   굴절 강도는 blur(6px) 까지만. saturate() 를 넣거나 10px 이상으로 올리면
   (배경이 position:fixed 그라데이션 + 대형 히어로 이미지라)
   매 프레임 전체 재래스터가 발생해 렌더러가 멈춘다 — 실측 확인됨. */
.main_contents_list li > a .ico_box .ico {
  position: relative;
  padding-top: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.11);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    /* 위 가장자리: 빛 받는 쪽 */
    inset 0 0.5px 0 rgba(255, 255, 255, 0.4),
    /* 아래 가장자리: 되비침 */
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.12),
    /* 유리 테두리 */
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
/* lensing — 유리 가장자리에서 빛이 꺾이며 모이는 얇은 링.
   가운데는 완전히 투명해서 볼록해 보이지 않는다. */
.main_contents_list li > a .ico_box .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0) 84%,
    rgba(255, 255, 255, 0.16) 95%,
    rgba(255, 255, 255, 0) 100%
  );
}


.main_contents_list li > a .ico_box .ico svg,
.main_contents_list li > a .ico_box .ico .ico_symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 고정 24px 대신 원 지름에 비례 — 폰/태블릿에서 비율 유지 */
  width: 40%;
  height: 40%;
  max-width: none;
}
.main_contents_list li > a .ico_box .ico .ico_symbol {
  width: 42%;
  height: auto;
  object-fit: contain;
}
/* 배경 원을 뺀 글리프 SVG — 뷰박스 자체에 여백이 있어 100% 로 채움 */
.main_contents_list li > a .ico_box .ico .ico_glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none;
}
/* 유리 위에서 아이콘이 묻히지 않도록 */
.main_contents_list li > a .ico_box .ico svg,
.main_contents_list li > a .ico_box .ico .ico_glyph,
.main_contents_list li > a .ico_box .ico .ico_symbol {
  z-index: 2;
  /* 유리 위 콘텐츠는 그림자로 띄우지 않는다 (HIG: 재질이 깊이를 만든다).
     밝은 사진 위 최소 가독성만 확보 */
  filter: drop-shadow(0 0.5px 1.5px rgba(0, 0, 0, 0.22));
}

.main_contents_list li > a .ico_box p {
  color: #fff;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.3;
}

.main_banner {
  margin-top: 30px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.main_banner .in_b_box {
  position: absolute;
  right: 10px;
  color: #fff;
  bottom: 10px;
}
.main_banner .in_b_box a {
  color: #fff;
  line-height: 2;
  border-radius: 50px;
  background: rgba(000, 000, 000, 0.85);
  font-size: 0.8333rem;
  padding: 0 10px;
}
.main_banner .main_banner_link {
  display: block;
}
.main_banner .main_banner_link img {
  width: 100%;
}

/* 2025 theme :: 상품수령처 배너 영역 페이드 롤링 배너
   크로스페이드는 슬라이드가 겹쳐 쌓이므로 높이를 고정해야 레이아웃이 튀지 않는다
   (기준: main_banner.png 960x300 = 16/5) */
.main_banner .bannerSwiper {
  width: 100%;
  /* 실제 배너 소재 규격 2172x724 = 3:1 */
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--navy-deep);
}
.main_banner .bannerSwiper .swiper-wrapper,
.main_banner .bannerSwiper .swiper-slide {
  height: 100%;
}
.main_banner .bannerSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 전역 .swiper-slide:not(.swiper-slide-active){opacity:0} 때문에
   Swiper 초기화를 건너뛴 단일 슬라이드가 투명해지는 것을 방지 */
.main_banner .bannerSwiper:not(.swiper-initialized) .swiper-slide:first-child,
.main_slide_area .swiper:not(.swiper-initialized) .swiper-slide:first-child {
  opacity: 1;
}
/* 배너 3종 모두 하단까지 디자인이 차 있어, 점은 배너 바깥 아래로 뺀다 */
.main_banner .banner_pagination {
  position: static;
  margin-top: 10px;
  text-align: center;
}
.main_banner .banner_pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #fff;
  opacity: 0.45;
  transition: width 0.3s ease;
}
.main_banner .banner_pagination .swiper-pagination-bullet-active {
  width: 16px;
  border-radius: 4px;
  background: var(--purple);
  opacity: 1;
}

.main_program {
  margin-top: 20px;
  border-radius: 8px;
  background: rgba(28, 30, 31, 0.6);
  padding: 20px;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
.main_program .tab_area_scroll {
  width: calc(100% + 20px);
  overflow-x: scroll;
  /* 세로 스크롤 컨테이너(#wrap) 안의 가로 스크롤러라, 여기서 세로로 쓸면
     안드로이드가 가로 제스처로 먹어버려 페이지가 안 밀린다.
     pan-x 로 가로만 이 요소가 갖고 세로는 부모로 넘긴다. */
  touch-action: pan-x;
  /* 데스크톱에서 흰 가로 스크롤바 띠가 보이는 것도 함께 정리 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.main_program .tab_area_scroll::-webkit-scrollbar {
  display: none;
}
.main_program .tab_area {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  width: auto;
  /* .on 버튼 그림자가 가로 스크롤 컨테이너에 잘리지 않도록 */
  padding: 4px 0 6px;
}
.main_program .tab_area > button {
  white-space: nowrap;
  display: inline-block;
  /* 2026 :: 탭이 눈에 띄지 않아 스크롤 되는 줄 모르는 문제 → 대비/크기 상향 */
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  line-height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.main_program .tab_area > button.on {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 2px 10px rgba(233, 62, 216, 0.45);
}

.main_program .tab_cont_area .tab_cont_lsit {
  margin-top: 20px;
}
.main_program .tab_cont_lsit li {
  width: 100%;
}
.main_program .tab_cont_lsit li + li {
  margin-top: 14px;
}
.main_program .tab_cont_lsit li .link_tab {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.main_program .tab_cont_lsit li .img_area {
  width: 54px;
  height: 54px;
}
.main_program .tab_cont_lsit li .img_area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main_program .tab_cont_lsit li .txt_area {
  flex: 1;
  margin-left: 11px;
}
.main_program .tab_cont_lsit li .txt_area .info {
  color: var(--gray);
  word-break: keep-all;
}
.main_program .tab_cont_lsit li .txt_area h3 {
  color: #fff;
  font-size: 16px;
  word-break: keep-all;
}
.main_program .tab_cont_lsit li .ico_area img {
  width: 6px;
}
.main_program .btn_area {
  text-align: center;
  margin-top: 20px;
  justify-content: center;
}
.main_program .btn_area .btn_more {
  display: inline-block;
  line-height: 26px;
  background: #2a2e31;
  padding: 0 13px;
  border-radius: 50px;
  font-size: 12px;
  border: 1px solid #565a61;
  color: var(--gray);
}
.main_program .btn_area .btn_more span + span {
  margin-left: 5px;
  display: inline-block;
}
.main_program .btn_area .btn_more strong {
  font-weight: 400;
}
.main_program .btn_main_more {
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 20px;
  font-size: 14px;
  border-top: 1px solid #333536;
  justify-content: center;
}

/* 스탬프 북 */
.in_blur_box {
  margin-top: 20px;
  border-radius: 8px;
  background: rgba(28, 30, 31, 0.6);
  padding: 20px;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
.s_info_txt {
  color: var(--gray);
  font-size: 11px;
}
.s_info_txt.vs2 {
  font-size: 14px;
  word-break: keep-all;
  margin-bottom: 20px;
}
.white_title + .s_info_txt {
  margin-top: 10px;
}

.in_blur_box .tour_spot_list {
  gap: 11px;
  margin-top: 20px;
}
.in_blur_box .tour_spot_list li {
  flex: 1;

  text-align: center;
}
.in_blur_box .tour_spot_list li button {
  display: flex;
  background: #565a61;
  width: 100%;
  height: 114px;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}
.in_blur_box .tour_spot_list li strong {
  display: inline-block;
  margin-top: 6.5px;
}
.in_blur_box .tour_spot_list li p.white {
  font-weight: 300;
  margin-top: 4px;
  line-height: 1.2;
  font-size: 13px;
}

.stamp_area .stamp_list {
  flex-wrap: wrap;
  gap: 2vw 4%;
  justify-content: space-between;
}
.stamp_area .stamp_list li {
  width: 20.5%;
}
.stamp_list li .stamp_box .stamp_img {
  background: url(../img/sub/stamp_img_def.svg) no-repeat center center;
  background-size: 100%;
  width: 100%;
  height: auto;
  padding-top: 100%;
  position: relative;
}
.stamp_list li .stamp_box .stamp_txt {
  color: var(--gray);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  margin-top: 6px;
}
.stamp_list li .stamp_box .stamp_img img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.stamp_list li .stamp_box.open .stamp_img {
  background: transparent;
}
.stamp_list li .stamp_box.open .stamp_txt {
  color: #fff;
}
.stamp_area .btn_area .btn_basic {
  margin-top: 30px;
}

/* toast */
.toast_ticket {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 20px 0;
  width: 100%;
  border: 1px solid var(--pink);
  border-radius: 8px;
}
.toast_ticket .col_pink {
  font-size: 18px;
  line-height: 1.2;
}
.toast .toast_info {
  color: var(--gray);
  font-weight: 300;
  font-size: 14px;
  text-align: center;
}
.toast .toast_top_img {
  margin-top: -70px;
  max-width: 50%;
  margin-bottom: 20px;
  height: 105px;
}
.toast .toast_tit {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}
.toast_pink_box {
  border: 1px solid var(--pink);
  border-radius: 5px;
  padding: 5px 0;
  color: var(--pink);
  width: 100%;
  display: block;
  text-align: center;
}

/* 알림 */
header .alarm_count .count {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  color: #fff;
  background: var(--purple);
  border-radius: 60px;
  text-align: center;
  line-height: 15px;
  font-weight: 600;
  font-size: 11px;
}

.alarm_area {
  padding-top: 9px;
}
.alarm_area .alarm_nm {
  display: inline-block;
  background: #343a40;
  border-radius: 5px;
  line-height: 23px;
  padding: 0 9px;
}
.alarm_area .alarm_list li {
  display: flex;
}
.alarm_area .alarm_list li + li {
  margin-top: 16px;
}
.alarm_area .alarm_list li .alarm_cont {
  padding: 12px;
  border-radius: 8px;
  background: #343a40;
  flex: 1;
}
.alarm_area .alarm_list li .alarm_tit {
  display: flex;
  justify-content: space-between;
}
.alarm_area .alarm_list li .alarm_tit strong {
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
}
.alarm_area .alarm_list li .alarm_tit .date {
  font-size: 10px;
  white-space: nowrap;
}
.alarm_area .alarm_list li .alarm_txt_box {
  line-height: 1.5;
  font-size: 13px;
  font-weight: 300;
}
.alarm_area .alarm_list li .alarm_icon {
  text-align: left;
  margin-left: 8px;
}
.alarm_area .alarm_list li .alarm_icon img {
}
.alarm_area .alarm_list li .btn_area {
  margin-top: 12px;
  text-align: right;
}
.alarm_area .alarm_list li .alarm_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--purple);
}
.alarm_area .alarm_list li .alarm_more svg {
  flex: none;
}

.guide_container {
  background: url(../img/sub/bg_guide_tit_section.png) no-repeat left top,
    url(../img/sub/bg_guide_section2.png) no-repeat right 50vh;
  background-size: 100% auto, 100% auto;
  /* 2025 theme :: 이용안내는 자체 다크 이미지 기반 디자인이라
     페이지 그라데이션이 이미지 사이로 비치지 않도록 단색 배경을 깔아둔다 */
  background-color: var(--black);
}
.guide_tit_section {
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.guide_tit_section.normal {
  min-height: auto;
  padding: 70px 0 50px;
  background: transparent;
}
.guide_tit_section .txt {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}
.guide_tit_section .txt.vs2 {
}
.guide_tit_section img.logo {
  height: 25px;
}
.guide_tit_section h1 {
  width: 100%;
}
.guide_tit_section h1 .s_tt {
  font-weight: 300;
  font-size: 16px;
  margin-top: 27px;
}
.guide_tit_section h1 .tit {
  font-weight: 600;
  line-height: 1.2;
  font-size: 32px;
  color: #fff;
  margin-top: 8px;
}
.guide_tit_section.normal h1 .tit {
  margin-top: 15px;
}
.guide_tit_section.normal img.logo {
  height: 21px;
}

.guide_tit_section h1 .guide_tit_img {
  width: 70%;
  max-width: 490px;
  padding-right: 10px;
  margin-top: 30px;
  margin-bottom: 32px;
}
.guide_container .img_box img {
  width: 100%;
}
.guide_container .in_blur_box {
  padding-left: 0;
  padding-right: 0;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 10px;
}
.guide_container .in_blur_box .pink_title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: 600;
  /* 2025 theme :: 오렌지(--pink)는 퍼플 테마와 어긋나 포인트 컬러로 교체 */
  color: var(--purple);
  gap: 8px;
  padding-bottom: 30px;
}
.guide_container .in_blur_box .pink_title img {
  height: 22px;
}
.guide_container .guide_info {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.guide_container .in_blur_box .in_in_box {
  padding-left: 20px;
  padding-right: 20px;
}
.guide_container .in_blur_box .in_in_box + .in_in_box {
  margin-top: 20px;
}

.guide_container .guide_section04 .in_blur_box {
  border-radius: 0;
  margin-top: 56px;
  padding-bottom: 60px;
}
.guide_container .in_blur_box .pink_title.ver2 {
  font-size: 40px;
  margin-bottom: 40px;
}
.guide_container .guide_section04 .in_blur_box .pink_title {
  padding-bottom: 0;
  line-height: 1.2;
}

.guide_section04 .tip_list {
  position: relative;
}
.guide_section04 .tip_list::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 100%;
  background: #f8f8f8;
  position: absolute;
  top: 0;
  left: 16px;
  opacity: 0.3;
}
.guide_section04 .tip_list li {
  position: relative;
  z-index: 1;
}
.guide_section04 .tip_list li + li {
  padding-top: 40px;
}
.guide_section04 .tip_list li .pink_tit {
  align-items: center;
  margin-bottom: 22px;
}
.guide_section04 .tip_list li .pink_tit span.ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
}
.guide_section04 .tip_list li .pink_tit .col_pink {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  display: block;
  margin-left: 9px;
}
.guide_section04 .tip_list li .tip_cont {
  background: #353b40;
  border-radius: 10px;
  position: relative;
  padding: 18px 10px 18px 40px;
}
.guide_section04 .tip_list li .tip_cont img {
  position: absolute;
  left: 14px;
  top: 21px;
}
.guide_section04 .tip_list li .tip_cont .txt {
  font-size: 16px;
  letter-spacing: -0.5px;
  font-weight: 400;
  word-break: keep-all;
  line-height: 1.4;
}

.guide_container.ver_normal .in_blur_box {
  padding: 20px;
  min-height: 330px;
}
h3.white_title.in_tit_box {
  background: #353b40;
  border-radius: 8px;
  padding: 6px 15px;
  font-size: 14px;
  font-weight: 500;
}
.guide_img_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px 12px;
}
.guide_img_list li {
  width: calc((100% - 12px) / 2);
}
.guide_img_list li .img {
  background: #24282a;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}
.guide_img_list li .txt {
  font-size: 13px;
  color: #fff;
  line-height: 20px;
  font-weight: 500;
  margin-top: 11px;
}
.guide_img_list li .img img {
  width: 100%;
  object-fit: cover;
}

.shm_alarm {
  position: relative;
}

.shm_alarm_count {
  position: absolute;
  top: -5px;
  left: 20px;
  min-width: 15px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.3px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background-color: #f44336;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
}

/* ============================================================
   2025 theme :: 컨텐츠 영역 (행사지도 - 위치안내)
   퍼플 그라데이션 위에 올라가므로 프로스티드 카드를 걷어내고
   구분선으로 항목을 나눈다. 홈의 .main_program은 건드리지 않도록
   #mapContainer 하위로 한정.
   ============================================================ */
#mapContainer .main_program {
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#mapContainer .main_program .tab_area > button {
  color: #2a2a3a;
  background: #fff;
  border-color: #fff;
  font-weight: 600;
  padding: 0 14px;
}
#mapContainer .main_program .tab_area > button.on {
  color: #fff;
  background: #3e4a63;
  border-color: #3e4a63;
  /* 지도 탭은 네이비 계열이라 퍼플 글로우를 상속받지 않는다 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
#mapContainer .main_program .tab_cont_lsit li {
  padding: 14px 0;
}

/* 전시품 없는 구역 안내 */
.tab_cont_lsit .tab_empty {
  display: block;
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
#mapContainer .main_program .tab_cont_lsit li + li {
  margin-top: 0;
  border-top: 1px solid var(--divider);
}

/* ============================================================
   2025 theme :: 알림 영역
   카드(#343a40) 제거 -> 구분선 방식
   ============================================================ */
.alarm_area .alarm_list li {
  border-bottom: 1px solid var(--divider);
}
.alarm_area .alarm_list li + li {
  margin-top: 0;
}
.alarm_area .alarm_list li .alarm_cont {
  padding: 16px 0;
  border-radius: 0;
  background: transparent;
}
.alarm_area .alarm_list li .alarm_txt_box {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
}
.alarm_area .alarm_list li .alarm_icon {
  padding-top: 16px;
}
/* 새 알림 타이틀 앞 도트 */
.alarm_area .alarm_list li.is_new .alarm_tit strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--purple);
  vertical-align: middle;
}

/* ============================================================
   2025 theme :: 하단에서 올라오는 팝업 (bottom sheet)
   내용은 public/2026/data/popup.json
   ============================================================ */
.app_popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.app_popup.is_ready {
  display: block;
}
.app_popup .app_popup_dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 16, 0.66);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.app_popup.is_open .app_popup_dim {
  opacity: 1;
}
.app_popup .app_popup_sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: #1b1533;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.app_popup.is_open .app_popup_sheet {
  transform: translateY(0);
}

.app_popup .app_popup_body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app_popup .popupSwiper {
  width: 100%;
  max-height: 70vh;
}
.app_popup .popupSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
/* 전역 .swiper-slide:not(.swiper-slide-active){opacity:0} 대비 */
.app_popup .popupSwiper:not(.swiper-initialized) .swiper-slide:first-child {
  opacity: 1;
}
.app_popup .popup_pagination {
  bottom: 10px;
}
.app_popup .popup_pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #fff;
  opacity: 0.45;
  transition: width 0.3s ease;
}
.app_popup .popup_pagination .swiper-pagination-bullet-active {
  width: 18px;
  border-radius: 4px;
  background: var(--purple);
  opacity: 1;
}

.app_popup .app_popup_foot {
  flex: none;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  /* 아이폰 홈 인디케이터 영역 확보 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app_popup .app_popup_foot button {
  flex: 1;
  height: 54px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
}
.app_popup .app_popup_foot .popup_close {
  color: #fff;
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* ============================================================
   2025 theme :: 상단 오버레이 알림 (로고·알림 아이콘 아래)
   내용은 public/2026/data/notice.json
   ============================================================ */
.main_container > .hd_notice {
  display: none;
  position: absolute;
  top: 72px; /* 헤더 67px 바로 아래 */
  left: 20px;
  right: 20px;
  z-index: 90; /* 헤더(100)보다 아래 */
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 16, 43, 0.68);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.main_container > .hd_notice.is_ready {
  display: flex;
}
.main_container > .hd_notice.is_on {
  opacity: 1;
  transform: translateY(0);
}
.main_container > .hd_notice.has_link {
  cursor: pointer;
}
.main_container > .hd_notice .hd_notice_ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
}
.main_container > .hd_notice .hd_notice_txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.main_container > .hd_notice .hd_notice_txt strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main_container > .hd_notice .hd_notice_txt em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main_container > .hd_notice .hd_notice_count {
  flex: none;
  display: none; /* 값이 준비되면 JS 가 .is_on 을 붙인다 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  margin-right: 2px;
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  line-height: 1;
}
.main_container > .hd_notice .hd_notice_count.is_on {
  display: flex;
}
.main_container > .hd_notice .hd_notice_count .cd_label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.main_container > .hd_notice .hd_notice_count .cd_value {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  /* 초 단위로 숫자가 바뀌어도 폭이 흔들리지 않게 고정폭 숫자를 쓴다 */
  font-variant-numeric: tabular-nums;
}
.main_container > .hd_notice .hd_notice_close {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
}

/* 2025 theme :: 이용안내 페이지 강조색 (전역 .col_pink 는 유지) */
.guide_container .col_pink {
  color: var(--purple) !important;
}

/* 2025 theme :: 서브 상단바를 컨테이너째 화면 상단에 고정
   .sub_container.inner 는 헤더만 감싸는 구조로 통일돼 있다
   (book.edge 도 본문을 밖으로 빼서 맞춤). 컨테이너가 .inner 의
   좌우 20px 패딩을 그대로 들고 가므로 헤더가 따로 패딩을 갖지 않아도 된다. */
.sub_container.inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
/* 고정된 상단바 높이만큼 본문을 내린다 */
.guide_container {
  padding-top: 67px;
}
.sub_container.inner + .inner,
.sub_container.inner + #mapContainer {
  padding-top: 67px;
}
header.sub_hd.bg_black {
  background: var(--black);
}

/* ============================================================
   2026 theme :: 이용안내 (Figma 0-2.이용안내)
   기존 .guide_container 는 2024 시안(검정 배경 + 버스트 이미지)이라
   .gd2026 이 붙었을 때만 새 시안으로 덮어쓴다.
   ============================================================ */

/* 헤더 — 제목을 가운데 두고, 좌측 뒤로가기 아이콘 폭(15px)만큼 오른쪽을 비워 광학적으로 맞춘다 */
#wrap header.sub_hd.gd_hd h2 {
  flex: 1;
  padding-right: 15px;
  text-align: center;
  margin-left: 0;
  font-size: 17px;
  font-weight: 600;
}
#wrap header.sub_hd.gd_hd .gd_hd_link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
#wrap header.sub_hd.gd_hd .gd_hd_link svg {
  flex: none;
}

/* 본문 배경 — 2024 시안의 배경 이미지/검정을 걷어내고 앱 공통 퍼플 그라데이션을 쓴다 */
.guide_container.gd2026 {
  background: var(--page-grad);
  background-color: transparent;
  /* 하단 플로팅 탭바에 마지막 요소가 가리지 않게 */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 상단 히어로 ---------- */
.gd2026 .gd_hero {
  padding: 34px 20px 30px;
  text-align: center;
}
.gd2026 .gd_eyebrow {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.gd2026 .gd_logo {
  width: 152px;
  max-width: 62%;
  height: auto;
  margin: 14px auto 0;
}
.gd2026 .gd_title {
  margin-top: 16px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.03em;
  /* 시안의 은은한 발광 */
  text-shadow: 0 0 18px rgba(233, 62, 216, 0.35);
}
.gd2026 .gd_title .amp {
  color: var(--purple);
  margin: 0 2px;
}
.gd2026 .gd_desc {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}

/* ---------- 섹션 제목 (✦ 보물찾기 참여방법! ✦) ---------- */
.gd2026 .gd_body {
  padding: 0 20px;
}
.gd2026 .gd_sec_tit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gd2026 .gd_sec_tit span {
  background: linear-gradient(90deg, #ff86e4 0%, #d59bff 50%, #ff86e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 그라데이션 글자는 text-shadow 가 먹지 않아 뒤에 발광을 따로 깔지 않는다 */
}
.gd2026 .gd_spark {
  flex: none;
  width: 15px;
  height: 15px;
  background: #ffb6f2;
  /* 4각 반짝임 */
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* ---------- 01 / 02 단계 카드 ---------- */
.gd2026 .gd_steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  /* 번호 배지가 카드 위로 반쯤 걸치므로 그만큼 위를 비운다 */
  margin-top: 22px;
}
.gd2026 .gd_step {
  position: relative;
  padding: 34px 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}
.gd2026 .gd_step_no {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #1c1235;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gd2026 .gd_step_tit {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.gd2026 .gd_step_img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  margin-top: 14px;
  /* 일러스트 뒤 발광. 이미지가 아직 없어도 자리가 비어 보이지 않는다 */
  background: radial-gradient(circle at 50% 55%, rgba(233, 62, 216, 0.28) 0%, rgba(233, 62, 216, 0) 62%);
}
.gd2026 .gd_step_img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 카드 사이 화살표 — 그리드 간격 한가운데 */
.gd2026 .gd_steps::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.85);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Ccircle cx='1.5' cy='6' r='1.5'/%3E%3Ccircle cx='6' cy='6' r='1.5'/%3E%3Cpath d='M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Ccircle cx='1.5' cy='6' r='1.5'/%3E%3Ccircle cx='6' cy='6' r='1.5'/%3E%3Cpath d='M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 하단 배너 ---------- */
.gd2026 .gd_banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.gd2026 .gd_banner_img {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 64px;
}
.gd2026 .gd_banner_img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.gd2026 .gd_banner_txt {
  flex: 1;
  min-width: 0;
}
.gd2026 .gd_banner_txt .sm {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.gd2026 .gd_banner_txt .lg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.gd2026 .gd_check {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}

/* 좁은 화면에서 카드 안 텍스트가 두 줄을 넘지 않게 살짝 줄인다 */
@media (max-width: 359px) {
  .gd2026 .gd_title { font-size: 25px; }
  .gd2026 .gd_step { padding: 30px 8px 16px; }
  .gd2026 .gd_step_tit { font-size: 14px; }
  .gd2026 .gd_step_img { height: 92px; }
}