/* 2026 웹 스탬프 투어: 시작(PWA)·휴대폰 인증·QR 스캔·결과 토스트 */
/* 고정 상단바(67px) 아래에서 시작. 하단 탭바 가림 방지 여백 포함 */
.sw_page { padding: calc(67px + 24px) 20px calc(110px + env(safe-area-inset-bottom, 0px)); color: #fff; max-width: 560px; margin: 0 auto; }
.sw_page .sw_icon { width: 88px; height: 88px; border-radius: 22px; display: block; margin: 8px auto 18px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.sw_page h1.sw_tit { font-size: 22px; font-weight: 700; line-height: 1.35; text-align: center; margin: 0 0 8px; }
.sw_page p.sw_desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.8); text-align: center; margin: 0 0 22px; word-break: keep-all; }
.sw_card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 18px 16px; margin-bottom: 14px; }
.sw_card h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.sw_card p, .sw_card li { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); word-break: keep-all; }
.sw_card ol { padding-left: 18px; margin: 0; }
.sw_card ol li { margin-bottom: 4px; }
.sw_card .sw_share_ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.sw_btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; border: 0; cursor: pointer; text-align: center; text-decoration: none !important; margin-top: 10px; }
.sw_btn.primary { background: var(--purple, #e93ed8); color: #fff !important; }
.sw_btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff !important; }
.sw_btn[disabled] { opacity: .45; pointer-events: none; }
.sw_hint { font-size: 12px; color: rgba(255,255,255,.6); text-align: center; margin-top: 12px; line-height: 1.5; }
.sw_field { margin-bottom: 12px; }
.sw_field label { display: block; font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.sw_field .sw_row { display: flex; gap: 8px; }
.sw_field input[type=tel], .sw_field input[type=text] { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; font-size: 18px; letter-spacing: 1px; padding: 0 14px; outline: none; }
.sw_field input:focus { border-color: var(--purple, #e93ed8); }
.sw_field .sw_row .sw_btn { width: auto; min-width: 104px; margin-top: 0; min-height: 50px; font-size: 14px; padding: 0 12px; }
.sw_timer { font-size: 13px; color: #ffb3f5; margin-top: 6px; }
.sw_msg { min-height: 20px; font-size: 13px; line-height: 1.5; margin-top: 8px; color: #ffd4d4; }
.sw_msg.ok { color: #b8ffcf; }
.sw_agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.5; margin: 6px 0 4px; }
.sw_agree input { margin-top: 3px; }
/* QR 스캔 */
.sw_reader_wrap { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 1 / 1; margin-bottom: 14px; }
#qr-reader { width: 100%; height: 100%; border: 0 !important; }
#qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
#qr-reader img[alt="Info icon"], #qr-reader img[alt="Camera based scan"] { display: none; }
.sw_reader_overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; background: rgba(20,16,43,.85); color: #fff; font-size: 14px; line-height: 1.6; }
.sw_reader_overlay[hidden] { display: none; }
.sw_scan_status { text-align: center; font-size: 14px; color: rgba(255,255,255,.85); min-height: 22px; margin-bottom: 8px; }
/* 결과 토스트 */
.sw_toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); z-index: 9999; max-width: calc(100% - 32px); background: rgba(20,16,43,.96); border: 1px solid rgba(233,62,216,.6); color: #fff; font-size: 14px; line-height: 1.5; padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; transition: all .25s ease; pointer-events: none; text-align: center; }
.sw_toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sw_toast.bad { border-color: #ff6b6b; }
.stamp_box.just_stamped { animation: swPop .8s ease; box-shadow: 0 0 0 3px var(--purple, #e93ed8); border-radius: 12px; }
@keyframes swPop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* 푸시 안내 바 */
.sw_push_bar { display: flex; align-items: center; gap: 10px; margin: 0 20px 14px; padding: 12px 14px; border-radius: 14px; background: rgba(233,62,216,.14); border: 1px solid rgba(233,62,216,.4); color: #fff; font-size: 13px; line-height: 1.45; }
.sw_push_bar[hidden] { display: none; }
.sw_push_bar .txt { flex: 1; }
.sw_push_bar button { flex: none; background: var(--purple, #e93ed8); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; }

/* ===== 체험프로그램 사전 신청 ===== */
.apply_banner { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #5d2a63, #e93ed8); color: #fff; text-decoration: none !important; box-shadow: 0 8px 22px rgba(233,62,216,.28); }
.apply_banner .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.apply_banner .tx { flex: 1; min-width: 0; }
.apply_banner .tx strong { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.apply_banner .tx span { display: block; font-size: 12px; color: rgba(255,255,255,.85); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apply_banner .ar { flex: none; opacity: .9; }
.ap_mine_link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: #ffb3f5; text-decoration: none; }
.ap_prog { display: block; padding: 0; overflow: hidden; text-decoration: none !important; color: inherit; }
.ap_prog_photo { height: 150px; background-size: cover; background-position: center; }
.ap_prog_body { padding: 14px 16px 16px; }
.ap_prog_body h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.ap_prog_body .desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.75); margin: 0 0 10px; word-break: keep-all; }
.ap_prog_btn { margin-top: 12px; min-height: 44px; }
.ap_times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap_times button { border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.2); color: #fff; border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ap_times button b { font-size: 15px; }
.ap_times button span { font-size: 11px; color: rgba(255,255,255,.7); }
.ap_times button.on { border-color: #e93ed8; background: rgba(233,62,216,.22); }
.ap_times button.off, .ap_times button[disabled] { opacity: .35; }
.ap_times_hint { grid-column: 1 / -1; font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }
.ap_qr, .rsv_qr .code.ap_qr { display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; margin: 12px auto 0; padding: 10px; box-sizing: border-box; background: #fff; border-radius: 12px; }
/* reserve.css 의 `.rsv_qr .code svg { width: 108px }` 가 이겨서 QR 이 상자 왼쪽 위에 작게 그려졌다 - 특이도를 올려 상자를 꽉 채운다 */
.ap_qr svg, .rsv_qr .code.ap_qr svg { width: 100%; height: 100%; display: block; }
.ap_qr_wrap { text-align: center; margin: 12px 0; }
.ap_qr_wrap p { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 8px; }
.ap_item { position: relative; }
.ap_item.canceled { opacity: .6; }
.ap_badge { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; }
.ap_badge.applied { background: #e93ed8; }
.ap_badge.attended { background: #2fbf71; }
.ap_cancel { width: 100%; justify-content: center; margin-top: 8px; }

/* 참가자 명단 */
.ap_member { padding: 12px 0 4px; border-top: 1px dashed rgba(255,255,255,.18); }
.ap_member:first-child { border-top: 0; padding-top: 0; }
.ap_member_tit { font-size: 13px; font-weight: 700; color: #ffb3f5; margin: 0 0 8px; }
.ap_member_row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; align-items: start; }
/* 격자 안 두 번째 필드에 reserve.css 의 `.rsv_field + .rsv_field { margin-top: 8px }` 가 먹어 생년월일이
   성별보다 아래로 밀렸다 - 가로로 나란한 필드는 위 여백을 없애 라벨·입력 줄을 맞춘다 */
.ap_member_row .rsv_field + .rsv_field { margin-top: 0; }
.ap_member_row .rsv_label { margin-bottom: 8px; line-height: 1.3; }
.ap_gender { display: flex; gap: 6px; }
.ap_gender label { flex: 1; cursor: pointer; }
.ap_gender input { position: absolute; opacity: 0; width: 0; height: 0; }
.ap_gender span { display: flex; align-items: center; justify-content: center; height: 48px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.2); color: #fff; font-size: 14px; }
.ap_gender input:checked + span { border-color: #e93ed8; background: rgba(233,62,216,.22); font-weight: 700; }
.rsv_input input[type=date] { -webkit-appearance: none; appearance: none; color: #fff; background: transparent; border: 0; width: 100%; height: 100%; font-size: 15px; color-scheme: dark; }
.ap_member_list { list-style: none; margin: 10px 0 0; padding: 0; }
.ap_member_list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.15); font-size: 14px; color: #fff; }
.ap_member_list li:last-child { border-bottom: 0; }
.ap_member_list li span { font-size: 12px; color: rgba(255,255,255,.7); }

/* 홈 알림 권한 안내 카드: 종 아이콘 + 제목/설명 + 큰 켜기 버튼. 켜짐(is_done)·차단(is_denied) 상태를 색으로 구분 */
.home_push_card { display: flex; gap: 12px; align-items: flex-start; margin: 12px 20px 0; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(233,62,216,.18), rgba(165,55,240,.14)); border: 1px solid rgba(233,62,216,.45); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
.home_push_card[hidden] { display: none; }
.home_push_card.is_in { opacity: 1; transform: none; }
.home_push_card.is_leaving { opacity: 0; transform: translateY(-6px); }
.home_push_card .hp_ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff7a29, #f0409a 55%, #a537f0); color: #fff; box-shadow: 0 6px 16px rgba(214,56,168,.35); }
.home_push_card .hp_ico svg { position: absolute; }
.home_push_card .hp_ico .hp_bell { transform-origin: 50% 12%; animation: hpBell 4s ease-in-out infinite; }
.home_push_card .hp_ico .hp_check { opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s cubic-bezier(.2,1.4,.5,1); }
.home_push_card .hp_body { flex: 1; min-width: 0; }
.home_push_card .hp_tit { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.home_push_card .hp_sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.78); word-break: keep-all; }
.home_push_card .hp_actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.home_push_card .hp_on { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #ff7a29 0%, #f0409a 52%, #a537f0 100%); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(214,56,168,.32); }
.home_push_card .hp_on:active { transform: translateY(1px); }
.home_push_card .hp_on[disabled] { opacity: .6; box-shadow: none; }
.home_push_card .hp_on[hidden] { display: none; }
.home_push_card .hp_later { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* 켜짐: 초록 톤 + 종 → 체크 */
.home_push_card.is_done { background: rgba(46,204,113,.14); border-color: rgba(46,204,113,.55); }
.home_push_card.is_done .hp_ico { background: linear-gradient(135deg, #2ecc71, #1abc9c); box-shadow: 0 6px 16px rgba(46,204,113,.35); }
.home_push_card.is_done .hp_ico .hp_bell { opacity: 0; animation: none; }
.home_push_card.is_done .hp_ico .hp_check { opacity: 1; transform: none; }
.home_push_card.is_done .hp_actions { display: none; }
/* 차단됨: 회색 톤 */
.home_push_card.is_denied { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.home_push_card.is_denied .hp_ico { background: rgba(255,255,255,.14); box-shadow: none; }
.home_push_card.is_denied .hp_ico .hp_bell { animation: none; }
@keyframes hpBell { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(9deg); } 86% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); } }

/* 홈 헤더 티켓(사전신청 수) 아이콘 */
.shm_ticket { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.shm_ticket svg { display: block; }
.shm_ticket_count { background: #e93ed8; }

/* 예약·체험 신청 헤더: 공통 CSS 의 `#wrap header { position: relative }` 가 reserve.css 의
   fixed 를 이겨 헤더가 본문 패딩(20px) 안에 갇혀 좌우가 비어 보였다. 특이도를 올려 풀블리드 고정으로 되돌린다. */
#wrap header.rsv_hd { position: fixed; left: 0; right: 0; width: auto; margin: 0; }
/* 체험 신청 헤더: 좌우 패딩은 기본값(16px)으로 되돌린다 — 풀블리드가 되면 이 안쪽 여백이 필요하다 */
.rsv_hd.ap_hd { padding-left: 16px; padding-right: 16px; }
.rsv_hd.ap_hd .rsv_back { margin-left: 0; width: 44px; }
.rsv_hd.ap_hd h2 { padding-right: 44px; }

/* 알림 페이지 헤더 오른쪽 '알림설정' 버튼 */
#wrap header.sub_hd .noti_set_btn { flex: none; height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; }
#wrap header.sub_hd .noti_set_btn[data-state="ok"] { border-color: rgba(233,62,216,.7); background: rgba(233,62,216,.16); color: #ffb8f3; }
#wrap header.sub_hd .noti_set_btn[disabled] { opacity: .5; }
#wrap header.sub_hd .noti_set_btn[hidden] { display: none; }

/* 앱이 열린 상태에서 도착한 푸시 배너 */
.yd_push_toast { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 10000; display: block; padding: 12px 14px; border-radius: 14px; background: rgba(20,16,43,.97); border: 1px solid rgba(233,62,216,.6); color: #fff; text-decoration: none !important; box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: translateY(-120%); opacity: 0; transition: all .3s ease; }
.yd_push_toast.show { transform: none; opacity: 1; }
.yd_push_toast strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.yd_push_toast span { display: block; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.85); }

/* 로그인 화면에 끼워 넣는 약관 블록 (reserve.css 의 .rsv 변수만 빌려 쓴다) */
.rsv.rsv_embed { padding: 0; margin-top: 4px; }
.rsv.rsv_embed::before { display: none; }
.rsv_embed .rsv_terms { margin-top: 12px; }
.sw_btn.is_off { opacity: .45; }

/* ===== 홈 :: 토스 쇼핑식 슬라이드 카드 ===== */
/* 헤더(투명 오버레이) 아래에서 카드가 시작하도록 위 여백을 두고, 카드는 20px 안쪽에 둥글게 */
/* margin-top 은 .main_container 와 병합돼 절대배치 헤더까지 밀어내므로 padding 으로 확보한다 */
.main_slide_area.toss_slide { margin: 0 -20px; padding: calc(67px + var(--safe-top) + 6px) 20px 0; }
.main_slide_area.toss_slide .swiper { aspect-ratio: 4 / 5; max-height: 58vh; overflow: visible; border-radius: 0; background: transparent; }
.main_slide_area.toss_slide .swiper-slide { border-radius: 22px; overflow: hidden; background: var(--navy-deep); transform: translateZ(0); }
.main_slide_area.toss_slide .slide_link { display: block; position: relative; width: 100%; height: 100%; color: #fff; text-decoration: none !important; }
.main_slide_area.toss_slide .slide_link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.main_slide_area.toss_slide .slide_link picture { display: block; width: 100%; height: 100%; }
/* 아래쪽 스크림 + 좌하단 카피 */
/* 캡션은 .slide_link 밖(1번 영상 슬라이드)에서도 흰 글자여야 하므로 색을 직접 지정 */
.main_slide_area.toss_slide .slide_cap { color: #fff; position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 24px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.72) 100%); }
.main_slide_area.toss_slide .slide_cap strong { color: #fff; display: block; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-shadow: 0 1px 6px rgba(0,0,0,.4); word-break: keep-all; padding-right: 64px; }
.main_slide_area.toss_slide .slide_cap span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.85); word-break: keep-all; padding-right: 64px; }
/* 우하단 "2 | 5" 알약 */
.main_slide_area.toss_slide .swiper-pagination { position: absolute; left: auto; right: 14px; bottom: 14px; width: auto; padding: 0 10px; height: 26px; line-height: 26px; border-radius: 13px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; text-align: center; letter-spacing: 0; }
.main_slide_area.toss_slide .swiper-pagination i { font-style: normal; margin: 0 5px; opacity: .5; }
/* 옆 카드가 살짝 보이는 상태에서는 흐리게 */
.main_slide_area.toss_slide .swiper-slide:not(.swiper-slide-active) { opacity: .55; transition: opacity .3s; }
/* 슬라이드 아래 링크 줄: 좌우 패딩 제거(2026-09-21 요청) - 카드와 같은 폭으로 맞춘다 */
.main_slide_area.toss_slide .link_area { padding: 14px 0 0; }
.main_visual_area .link_area { padding-left: 0; padding-right: 0; }
/* 홍보영상 슬라이드: 카드 전체는 축제 사진, 세로 가운데에 16:9 비율 그대로의 영상 밴드, 하단 사진 위에 캡션 */
/* 2번 영상 슬라이드 배경: 썸네일을 1번 슬라이드(.yt_bg)와 같은 블러·어둡기로. scale 은 블러 가장자리 번짐을 카드 밖으로 밀어낸다 */
.main_slide_area.toss_slide .slide_video .video_photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(22px) brightness(.55) saturate(1.2); transform: scale(1.15); pointer-events: none; }
.main_slide_area.toss_slide .slide_video .video_frame { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.main_slide_area.toss_slide .slide_video .video_frame .video_poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.main_slide_area.toss_slide .slide_video .video_frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* 캡션은 소리 버튼 위를 덮으므로 터치를 통과시키고 링크만 터치되게 한다 */
.main_slide_area.toss_slide .slide_video .slide_cap { z-index: 2; pointer-events: none; }
.main_slide_area.toss_slide .slide_video .slide_cap a { pointer-events: auto; }
.main_slide_area.toss_slide .slide_video .slide_cap a { color: #ffb8f3; text-decoration: underline; text-underline-offset: 3px; }
/* 소리 버튼은 영상 밴드(.video_frame) 안 오른쪽 아래 모서리에 */
.main_slide_area.toss_slide .video_sound { position: absolute; bottom: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.main_slide_area.toss_slide .video_sound .ic_on { display: none; }
.main_slide_area.toss_slide .video_sound.is_on { background: rgba(233,62,216,.85); border-color: transparent; }
.main_slide_area.toss_slide .video_sound.is_on .ic_off { display: none; }
.main_slide_area.toss_slide .video_sound.is_on .ic_on { display: block; }
.main_slide_area.toss_slide .video_sound[hidden] { display: none; }

/* ===== 홈 :: 토스식 메뉴 타일 (둥근 사각 컬러 타일 + 컬러 아이콘) ===== */
.main_contents_list li > a .ico_box .ico {
  border-radius: 26%;
  background-color: #2b2547;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.main_contents_list li > a .ico_box .ico::after { display: 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 { filter: none; }
/* 항목별 타일 색: 아이콘 색과 어울리는 은은한 톤 */
.main_contents_list li:nth-child(1) > a .ico_box .ico { background-color: #3a2a2f; }
.main_contents_list li:nth-child(2) > a .ico_box .ico { background-color: #2a2d4a; }
.main_contents_list li:nth-child(3) > a .ico_box .ico { background-color: #3a2c28; }
.main_contents_list li:nth-child(4) > a .ico_box .ico { background-color: #29392c; }
.main_contents_list li:nth-child(5) > a .ico_box .ico { background-color: #2a3446; }
.main_contents_list li:nth-child(6) > a .ico_box .ico { background-color: #3d2a3a; }
.main_contents_list li:nth-child(7) > a .ico_box .ico { background-color: #2e2f4f; }
.main_contents_list li:nth-child(8) > a .ico_box .ico { background-color: #3a3126; }
.main_contents_list li > a .ico_box p { margin-top: 8px; font-size: 12px; }

/* ===== 체험 신청 목록 :: 토스 쇼핑식 2열 카드 ===== */
.ap_list_top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ap_list_top .rsv_desc { margin: 0; }
.ap_list_top .ap_mine_link { margin: 0; flex: none; }
.ap_grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap_card { border-radius: 18px; overflow: hidden; background: #2b2547; }
.ap_card.tone1 { background: #3a2a2f; }
.ap_card.tone2 { background: #2a2d4a; }
.ap_card.tone3 { background: #29392c; }
.ap_card.tone4 { background: #3a3126; }
.ap_card.is_full { opacity: .7; }
.ap_card > a { display: block; color: #fff; text-decoration: none !important; }
.ap_card_photo { position: relative; aspect-ratio: 1 / 1; background-size: cover; background-position: center; }
.ap_card_badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 6px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; }
.ap_card_badge.full { background: #6b6b6b; }
.ap_card_body { position: relative; padding: 12px 12px 14px; }
.ap_card_body h3 { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; word-break: keep-all; padding-right: 30px; }
.ap_card_meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 12px; color: rgba(255,255,255,.72); }
.ap_card_meta i { font-style: normal; opacity: .4; }
.ap_card_meta.sub { margin-top: 3px; }
.ap_card_chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding-right: 34px; }
.ap_card_chips .chip { font-size: 11px; line-height: 1.2; padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; white-space: nowrap; }
.ap_card_chips .chip.hot { background: rgba(233,62,216,.28); color: #ffb3f5; }
.ap_card_go { position: absolute; right: 10px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: #fff; }

/* 참가비·종류 */
.ap_card_price { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #fff; }
.ap_card_price em { font-style: normal; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.6); }
.ap_price dt em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.6); }
.ap_price dd strong { font-size: 16px; color: #ffb3f5; margin-left: 6px; }
.ap_options { display: flex; flex-direction: column; gap: 6px; }
.ap_options label { cursor: pointer; }
.ap_options input { position: absolute; opacity: 0; width: 0; height: 0; }
.ap_options span { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.2); color: #fff; font-size: 14px; }
.ap_options input:checked + span { border-color: #e93ed8; background: rgba(233,62,216,.22); font-weight: 700; }

/* 하단 탭바는 항상 최상위. 기존 z-index 1 이라 지도 내 위치 버튼(100)·홈 버튼(10) 등 z-index 가 큰 요소가
   스크롤 끝에서 탭바 위로 올라왔다. 토스트(9999/10000)만 그 위에 둔다. */
#wrap .bottomBtn { z-index: 300; }

/* ===== 불꽃놀이 배너 카운트다운 (이미지 위 오버레이) =====
   좌표는 원본 1200x400 기준 퍼센트. 인쇄된 "00" 을 어두운 박스로 덮고 그 위에 실제 숫자를 그린다.
   박스 테두리(핑크·블루 라인)는 이미지 것을 그대로 쓰기 위해 안쪽만 덮는다. 글자 크기는 배너 폭 기준(cqw). */
.main_banner .fw_banner { position: relative; display: block; container-type: inline-size; }
.main_banner .fw_banner img { display: block; width: 100%; }
.main_banner .fw_timer b {
  position: absolute; top: 28.6%; height: 26.4%; width: 9.2%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: linear-gradient(180deg, #262336 0%, #0b0d1c 100%);
  color: #fff; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; font-size: 5.6cqw; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.main_banner .fw_timer .fw_d { left: 53.4%; }
.main_banner .fw_timer .fw_h { left: 64.4%; }
.main_banner .fw_timer .fw_m { left: 75.1%; }
.main_banner .fw_timer .fw_s { left: 86.1%; }
.main_banner .fw_banner.is_done .fw_timer b { color: rgba(255,255,255,.55); }

/* 진입 팝업 카운트다운 배지 (상단 알림 바의 .hd_notice_count 와 같은 모양, 이미지 오른쪽 위) */
.app_popup .popupSwiper .swiper-slide { position: relative; }
.app_popup .popup_count { position: absolute; top: 10px; right: 10px; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; padding: 6px 9px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(20,16,43,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); line-height: 1; }
.app_popup .popup_count.is_on { display: flex; }
.app_popup .popup_count .cd_label { color: rgba(255,255,255,.7); font-size: 9px; font-weight: 600; white-space: nowrap; }
.app_popup .popup_count .cd_value { color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== 홈 영상 슬라이드 (유튜브 2겹: 배경 블러 + 전경 16:9) ===== */
.toss_slide .slide_video { background: #000; }
.toss_slide .yt_stage { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; }
/* 배경: 카드 높이에 맞춘 16:9 를 가운데 두고 살짝 키워 블러 가장자리가 비치지 않게 */
.toss_slide .yt_bg { position: absolute; inset: 0; filter: blur(22px) brightness(.55) saturate(1.2); pointer-events: none; }
.toss_slide .yt_bg iframe { position: absolute; top: 50%; left: 50%; height: 100% !important; width: auto !important; aspect-ratio: 16 / 9; min-width: 100%; transform: translate(-50%, -50%) scale(1.18); border: 0; }
/* 전경: 원본 비율 16:9, 세로 가운데 */
.toss_slide .yt_fg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.45); background: #000; }
.toss_slide .yt_fg iframe { display: block; width: 100% !important; height: 100% !important; border: 0; pointer-events: none; }
.toss_slide .yt_sound { position: absolute; left: 14px; bottom: 14px; z-index: 3; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 30px; }

/* 배너 이미지에 인쇄된 일·시·분·초 박스 위에 겹치는 실시간 숫자 (좌표는 popup.json 의 % 값) */
.app_popup .popup_dhms { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s; }
.app_popup .popup_dhms.is_on { opacity: 1; }
/* 박스(b)는 popup.json 의 % 좌표로 자리만 잡고, 숫자판(i)은 박스 안쪽에 inset % 로 깔린다
   (padding % 는 화면 폭 기준이라 쓰면 안 된다 — 박스가 부풀고 안쪽이 0 이 된다) */
.app_popup .dhms_box { position: absolute; box-sizing: border-box; font-size: 24px; }
/* 인쇄된 00 을 가리는 판. 박스 안쪽 색과 맞춘 진남색 */
/* 박스 안쪽(남색) 영역을 실측 그라데이션(#181825→#080c1d)으로 덮고, 인쇄된 숫자와 같은 굵기·크기의 흰 숫자를 그린다 */
.app_popup .dhms_box i { position: absolute; top: 1.5%; bottom: 1.5%; left: 2%; right: 2%; display: flex; align-items: center; justify-content: center; border-radius: 9%; background: linear-gradient(180deg, #1b1b29 0%, #10122a 55%, #080c1d 100%); color: #fff; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; text-shadow: 0 0 10px rgba(255,255,255,.25), 0 0 2px rgba(255,255,255,.6); }

/* 진입 팝업 상단: 축제명 · 행사기간 */
.app_popup .app_popup_head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.app_popup .app_popup_head strong { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.app_popup .app_popup_head span { font-size: 13px; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 3번 슬라이드 :: 슬로건 */
.toss_slide .slide_slogan .slide_cap { padding-top: 90px; }
.toss_slide .slide_slogan .cap_eyebrow { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .02em; margin-bottom: 6px; }
.toss_slide .slide_slogan .cap_slogan { font-size: 26px; padding-right: 64px; }
.toss_slide .slide_slogan .cap_sub { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.75); }

/* 영상 슬라이드(1·2번) 위쪽 축제명 · 기간 — 상자 없이 타이포만. 카드 위에서 아래로 옅어지는 스크림으로 가독성 확보 (하단 캡션과 같은 방식) */
.toss_slide .cap_top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; gap: 3px; padding: 18px 20px 34px; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); font-style: normal; color: #fff; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.toss_slide .cap_top b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.toss_slide .cap_top span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.82); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; line-height: 1.3; }

/* 1번 영상 슬라이드 포스터: 재생 전 유튜브 UI 를 가린다. 뒤는 블러 배경, 앞은 16:9 가운데 (실제 플레이어 배치와 동일) */
.toss_slide .yt_poster { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #0d0a1e; transition: opacity .45s ease; pointer-events: none; }
.toss_slide .yt_poster_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.55) saturate(1.2); transform: scale(1.15); }
.toss_slide .yt_poster_fg { position: absolute; left: 0; right: 0; top: 50%; width: 100%; aspect-ratio: 16 / 9; transform: translateY(-50%); object-fit: cover; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.toss_slide .yt_stage.is_playing .yt_poster { opacity: 0; }

/* 이용방법 보러가기 · 상품쿠폰함: 사전신청 배너 아래 (원래 .main_slide_area .link_area 스타일과 동일) */
.home_link_area { padding: 12px 20px 0; }
.home_link_area .txt { display: inline-flex; align-items: center; flex: 1; font-size: 11px; font-weight: 500; line-height: 1.2; text-align: left; }
.home_link_area .txt img { width: 5px; margin-left: 5px; }
.home_link_area .btn_s { position: relative; z-index: 10; flex: none; width: 67px; margin-left: 10px; border-radius: 5px; background: rgba(255,255,255,.16); font-size: 11px; line-height: 26px; text-align: center; }

/* 1·2번 영상 슬라이드 UI 통일: 카드 왼쪽 위 축제명 배지, 세로 가운데 16:9 영상 밴드(모서리 12px), 밴드 오른쪽 아래 소리 버튼, 하단 제목·설명 */
.toss_slide .yt_stage { z-index: 1; }
.toss_slide .yt_poster { border-radius: 0; }
.toss_slide .yt_poster_fg { border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.toss_slide .yt_sound { display: none; }

/* ===== 추천코스 (모바일 재디자인, 2026-09-21) ===== */
.cs_page { padding: calc(67px + 18px) 20px calc(24px + env(safe-area-inset-bottom, 0px)); color: #fff; max-width: 640px; margin: 0 auto; }
.cs_hero { text-align: center; margin-bottom: 18px; }
.cs_eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #ffd166; }
.cs_hero h1 { margin: 6px 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.cs_slogan { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.75); word-break: keep-all; }
.cs_pick { margin: 6px 0 8px; font-size: 13px; color: rgba(255,255,255,.7); }
.cs_tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cs_tabs::-webkit-scrollbar { display: none; }
.cs_tab { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 9px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.cs_tab b { font-size: 15px; font-weight: 800; letter-spacing: .05em; line-height: 1.2; }
.cs_tab span { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; white-space: nowrap; }
.cs_tab.is_on { background: var(--cs); border-color: var(--cs); box-shadow: 0 8px 20px color-mix(in srgb, var(--cs) 40%, transparent); }
.cs_tab.is_on span { color: rgba(255,255,255,.9); }
.cs_card { display: none; border-radius: 20px; overflow: hidden; background: #221c3a; border: 1px solid rgba(255,255,255,.1); }
.cs_card.is_on { display: block; animation: csIn .25s ease; }
@keyframes csIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cs_head { padding: 20px 18px 16px; background: linear-gradient(135deg, var(--cs) 0%, rgba(20,16,43,.15) 100%); }
.cs_type_row { display: flex; align-items: baseline; gap: 10px; }
.cs_type { font-size: 30px; font-weight: 900; letter-spacing: .06em; line-height: 1; }
.cs_persona { font-size: 13px; font-weight: 600; opacity: .95; }
.cs_head h2 { margin: 14px 0 6px; font-size: 19px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.cs_head p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.9); word-break: keep-all; }
.cs_meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cs_meta span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fff; }
.cs_route { list-style: none; margin: 0; padding: 18px 18px 4px; }
.cs_route li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 0 16px; }
.cs_route li::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 2px; background: rgba(255,255,255,.14); }
.cs_route li:last-child::before { display: none; }
.cs_route .num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cs); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
.cs_route li.is_start .num, .cs_route li.is_end .num { background: #fff; color: var(--cs); }
.cs_route .name { font-size: 15px; font-weight: 600; line-height: 1.4; padding-top: 4px; word-break: keep-all; }
.cs_route .name em { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cs) 35%, transparent); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.cs_foot { padding: 4px 18px 18px; }
.cs_map { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none !important; }
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .cs_tab.is_on { box-shadow: 0 8px 20px rgba(0,0,0,.3); }
  .cs_route .name em { background: rgba(255,255,255,.18); }
}

/* 홈 팝업 머리글(제목·카운터) 숨김 (2026-09-21 요청) - 마크업은 남기고 표시만 끈다 */
.app_popup .app_popup_head { display: none !important; }

/* ===== 챗봇 플로팅(.quick_star): 말풍선·하모 배치와 클릭 영역 정리 (2026-09-21) =====
   기존엔 .quick_star 가 컨테이너 폭(277px)·208px 높이의 빈 상자였고, 말풍선(119px)은 오른쪽 끝,
   하모는 left:78px 라 말풍선 꼬리와 하모 머리가 어긋났다. 말풍선 글자도 16px 로 풍선보다 넓었다.
   여기서는 상자를 200x240 으로 고정하고 하모(왼쪽 아래)-말풍선(오른쪽 위, 꼬리가 하모 머리로) 순으로
   겹쳐 놓는다. 클릭·드래그는 보이는 그림(말풍선·하모)에서만 잡히도록 빈 공간은 pointer-events 를 끈다.
   (.quick_menu 전체가 scale(0.6) 이라 화면에는 60% 크기로 보인다.) */
.quick_menu .quick_star { width: 200px; height: 240px; margin-left: auto; pointer-events: none; }
.quick_menu .quick_star > a { display: block; position: relative; width: 100%; height: 100%; }
.quick_menu .quick_star .chat { position: absolute; top: 0; right: 0; left: auto; width: 150px; display: block; }
.quick_menu .quick_star .chat img { display: block; width: 100%; height: auto; pointer-events: auto; cursor: grab; }
.quick_menu .quick_star .chat-text {
  position: absolute; top: 0; left: 0; right: 0; height: 78%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 12px; font-size: 14px; line-height: 1.3; letter-spacing: -0.04em; font-weight: 800; color: #553838;
  pointer-events: auto; cursor: grab;
}
.quick_menu .quick_star .star_2.hamo { position: absolute; left: 6px; right: auto; bottom: 0; width: 110px; height: auto; pointer-events: auto; cursor: grab; }
.quick_menu.is_dragging .quick_star .chat img, .quick_menu.is_dragging .quick_star .chat-text, .quick_menu.is_dragging .quick_star .star_2.hamo { cursor: grabbing; }
/* 위쪽 D-DAY 자리(.dday)는 내용이 숨겨진 빈 상자(277x193)라 그 아래 페이지 요소의 탭을 가로채지 않게 한다 */
.quick_menu .dday { pointer-events: none; }

/* 체험 회차 화면: 사진 갤러리·설명·운영 정보 */
.ap_gallery_main { margin-top: 16px; border-radius: 14px; overflow: hidden; background: #120c26; }
.ap_gallery_main img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.ap_gallery_thumbs { display: flex; gap: 6px; margin-top: 8px; }
.ap_gallery_thumbs button { flex: 1; aspect-ratio: 4 / 3; border-radius: 10px; border: 2px solid transparent; background-size: cover; background-position: center; opacity: .7; }
.ap_gallery_thumbs button.on { border-color: #e93ed8; opacity: 1; }
.ap_prog_desc { margin: 12px 0 0; }
.ap_operator { margin-top: 10px; }
.ap_operator a { color: #ffb3f5; text-decoration: none; }
.ap_pay_note { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 6px; }

/* 종류 선택 칩의 종류별 사진 */
.ap_options span img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; margin-right: 10px; flex: none; background: #fff; }

/* 체험 회차 화면 :: 전화 문의 버튼 */
.ap_call_btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; min-height: 48px; border-radius: 12px; background: rgba(47,191,113,.18); border: 1px solid rgba(47,191,113,.55); color: #fff; font-size: 14px; text-decoration: none !important; }
.ap_call_btn svg { color: #6ee7a0; flex: none; }
.ap_call_btn b { font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* 약관 목록(.rsv_terms_list) 왼쪽 들여쓰기(28px) 제거 (2026-09-21 요청) - 전체 동의 줄과 같은 선에서 시작 */
.rsv_terms_list { padding-left: 0; }