#contents { width: 100%; padding: 0; } .tit_cont.titleType1, .wrap_contView .box_modInfo, .db_cont_detail, .recommendation_group { width: 940px; margin: 0 auto; } .btm_team.team_marg { width: 940px; margin: 40px auto 10px auto; } .smalltown_travel {position: relative; max-width: 192rem; margin: 0 auto; letter-spacing: -0.03em; font-size: 1.8rem; line-height: 1.4; color: #000; overflow: hidden;} .smalltown_travel .mo { display: none; } .smalltown_travel .inr { max-width: 94rem; margin: 0 auto; } .smalltown_travel .title_section { width: 100%; height: 80rem; flex-shrink: 0; background: url(../resources/images/theme/smalltown_travel/bg_titlesec.png) center 0 / cover no-repeat; } .smalltown_travel .btn_select{display: block; margin: 3.8rem auto 0; transition: transform 0.3s ease;} .smalltown_travel .btn_select:hover{transform: scale(1.03);} /* 카드 선택 */ .smalltown_travel .card_section { display: none; width: 100%; height: 80rem; padding: 0.6rem 0 2rem; flex-shrink: 0; background: #B3EFFF url(../resources/images/theme/smalltown_travel/bg_cardsec.png) center 0 / cover no-repeat;} .smalltown_travel .card_section.is_open {display: block;} .smalltown_travel .card_section.ani_active {transform: translateY(0);} .smalltown_travel .card_section .note { max-width: 102.2rem; margin: 0 auto; padding: 0 10.7rem 3rem; background: url(../resources/images/theme/smalltown_travel/bg_note.png) 0 0 / 100% 100% no-repeat;} .smalltown_travel .card_section .sec_tit { text-align: center; font-size: 2.6rem; letter-spacing: -0.02em; padding: 8.4rem 0 2rem;} .smalltown_travel .card_section .sec_tit strong { font-weight: 800; } .smalltown_travel .card_wrap { background: #fff; border-radius: 2rem; padding: 1.5rem; border: 5px solid #EDEDED; } .smalltown_travel .gallery_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; align-items: start;} .smalltown_travel .gallery_item { position: relative; display: flex; border-radius: 1rem; overflow: hidden; aspect-ratio: 180 / 120; border: 1px solid #D5D5D5;} .smalltown_travel .gallery_item:focus-visible{outline: 2px solid #006DEA; outline-offset: 2px;} .smalltown_travel .gallery_item img { width: 100%; height: 100%; vertical-align: bottom; object-fit: cover; display: block; transform: translateZ(0); will-change: transform; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)} .smalltown_travel .gallery_item:hover img, .smalltown_travel .gallery_item:focus-visible img {transform: scale(1.05);} .smalltown_travel .gallery_item .copyright { position: absolute; bottom: 0; left: 0; right: 0; text-align: right; padding: 3rem 0.8rem 0.6rem 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.16) 30%, rgba(0, 0, 0, 0.5) 70%); font-size: 1.2rem; color: #fff; line-height: 1.3;} /* 띠배너 */ .smalltown_travel .link_section { height: 16rem; background: #FFFDBC; } .smalltown_travel .link_section a { display: block; height: 100%; } .smalltown_travel .link_section a:focus-visible { outline-offset: -2px; } .smalltown_travel .link_section .inr {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.6rem; height: 100%; } .smalltown_travel .link_section .inr::after{content: ''; display: inline-block; width: 19.4rem; height: 9.3rem; position: absolute; top: 50%; transform: translateY(-50%); left: calc(50% + 24rem); background: url(../resources/images/theme/smalltown_travel/bg_banner1.png) 0 0 / 100% 100% no-repeat;} .smalltown_travel .link_section p { font-size: 2rem; font-weight: 700; } .smalltown_travel .link_section span {display: flex; align-items: center; gap: 1rem; height: 4.8rem; padding: 0 2.4rem; font-size: 2.4rem; font-weight: 600; line-height: 1; color: #fff; border-radius: 99rem; background: #1A9C54; } .smalltown_travel .link_section span::after{content: ''; display: inline-block; width: 1rem; height: 1.8rem; background: url(../resources/images/theme/smalltown_travel/btn_link.png) 0 0 / 100% 100% no-repeat;} .smalltown_travel .link_section.half { background: #FFE0F7; } .smalltown_travel .link_section.half span { background: #D3309C; } .smalltown_travel .link_section.half .inr::after { left: calc(50% - 40rem); width: 16.2rem; height: 12.6rem; background-image: url(../resources/images/theme/smalltown_travel/bg_banner2.png); } /* 푸터 */ .smalltown_travel .theme_footer .footer1 { background: #F7F7F7; } .smalltown_travel .theme_footer .footer2 { background: #F0F0F0; } /* 버킷리스트 팝업 */ .smalltown_travel .dim_layer {display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.86); z-index: 111; } .smalltown_travel .dim_layer.is_open{display: block;} .smalltown_travel .popup_wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 80svh; overflow-y: auto; background: #fff; border-radius: 3rem; padding: 2rem; width: 100%; max-width: 56rem; display: flex; flex-direction: column; gap: 1rem; } .smalltown_travel .popup_wrap::-webkit-scrollbar { display: none; } .smalltown_travel .popup_wrap { -ms-overflow-style: none; scrollbar-width: none; } .smalltown_travel .btn_area { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; } .smalltown_travel .btn_stamp { display: flex; align-items: center; gap: 0.2rem; background: #1c9c91; color: #fff; border: none; border-radius: 0.6rem; padding: 0.6rem 0.8rem; font-size: 1.6rem; font-weight: 700; cursor: pointer; } .smalltown_travel .btn_stamp:focus-visible { outline: 2px solid #1c9c91; outline-offset: 2px; } .smalltown_travel .btn_stamp .ico_stamp { width: 1.6rem; height: 1.6rem; flex-shrink: 0; } .smalltown_travel .btn_close { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; flex-shrink: 0; } .smalltown_travel .btn_close img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .smalltown_travel .spot_info { display: flex; align-items: center; gap: 1.2rem; } .smalltown_travel .landmark_img { width: 14rem; height: 10rem; object-fit: contain; flex-shrink: 0; } .smalltown_travel .txt_wrap .sub_tit { font-size: 2.2rem; font-weight: 600; margin-bottom: 0.2rem; } .smalltown_travel .txt_wrap .main_tit { font-size: 3.6rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; } .smalltown_travel .bucket_list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; list-style: none; margin-top: 1rem; } .smalltown_travel .bucket_item { width: 100%; background: #F5FAFF; border-radius: 1rem; padding: 0.6rem 1rem 0; min-height: 12.4rem; position: relative; box-sizing: border-box; } .smalltown_travel .bucket_item a{display: block; width: 100%; height: 100%; } .smalltown_travel .item_num { display: flex; align-items: center; gap: 0.6rem; } .smalltown_travel .item_num .num_txt { font-size: 1.4rem; font-weight: 700; color: #3A71E8; white-space: nowrap; flex-shrink: 0; } .smalltown_travel .item_num .line { flex: 1; height: 1px; background: #3A71E8; } .smalltown_travel .item_num .diamond { display: flex; flex-shrink: 0; width: 0.6rem; height: 0.7rem; background: url(../resources/images/theme/smalltown_travel/ico_diamond.png) 0 0 / 100% 100% no-repeat;} .smalltown_travel .item_txt {padding: 1rem 1rem 0; font-size: 1.9rem;} .smalltown_travel .item_txt .txt_bold { font-weight: 800; display: inline; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .smalltown_travel .badge_stamp { display: none; position: absolute; bottom: 0.8rem; right: 0.8rem; width: 5rem; height: 4.2rem; } .smalltown_travel .badge_stamp img { width: 100%; height: 100%; object-fit: contain; } .smalltown_travel .btn_share { width: 100%; background: #0D68D0; border: none; border-radius: 9999px; padding: 2.4rem 4rem; display: flex; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; } .smalltown_travel .btn_share:focus-visible { outline-offset: 2px; } .smalltown_travel .btn_share .btn_txt { color: #fff; font-size: 2rem; font-weight: 600;} .smalltown_travel .btn_share .ico_share { width: 4rem; height: 2.4rem; flex-shrink: 0; } /* 발도장 안내 팝업 */ .smalltown_travel .dim_layer2 { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 200; display: none;} .smalltown_travel .dim_layer2.is_open { display: block; } .smalltown_travel .stamp_popup {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 3rem; padding: 4.8rem 2rem 2rem; width: 100%; max-width: 48rem; max-height: 80svh; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; position: relative; display: flex; flex-direction: column; gap: 2rem; } .smalltown_travel .stamp_popup::-webkit-scrollbar { display: none; } .smalltown_travel .stamp_popup .btn_close { position: absolute; top: 2rem; right: 2rem; } .smalltown_travel .stamp_popup .pop_head { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; } .smalltown_travel .stamp_popup .pop_head .ico_wrap { display: flex; align-items: center; gap: 0.6rem; } .smalltown_travel .stamp_popup .pop_head .ico_wrap img { flex-shrink: 0; width: 3.2rem; height: 3.2rem; object-fit: contain; } .smalltown_travel .stamp_popup .pop_head .pop_tit { font-size: 3rem; font-weight: 800; color: #1C9C91; } .smalltown_travel .step_list { display: flex; flex-direction: column; gap: 1.8rem; } .smalltown_travel .step_item { display: flex; align-items: center; gap: 1.6rem; } .smalltown_travel .step_item .thumb { width: 20.8rem; flex-shrink: 0; } .smalltown_travel .step_item .step_txt { flex: 1; } .smalltown_travel .step_item .step_txt .desc { font-size: 1.9rem; font-weight: 700; line-height: 1.3; display: block; } .smalltown_travel .stamp_notice { text-align: center; font-size: 1.5rem; color: #0D68D0; font-weight: 700; line-height: 1.3;} @media all and (max-width:1023px){ .user_expression { padding: 30px 15px; } .ai_review_summary { padding: 0 15px; } .tit_cont.titleType1, .wrap_contView .box_modInfo, .db_cont_detail, .recommendation_group { width: auto; margin: 0 15px; } .btm_team.team_marg { width: auto; margin: 20px 15px 0; } .smalltown_travel { font-size: 1.5rem; } .smalltown_travel .mo { display: block; } .smalltown_travel .pc { display: none; } .smalltown_travel img { width: 100%; } .smalltown_travel .title_section{height: auto; background: url(../resources/images/theme/smalltown_travel/bg_titlesec_mo.png) center bottom / cover no-repeat; padding: 1.6rem 0 2.5rem ;} .smalltown_travel .title_section .inr {padding: 0 1.6rem; } .smalltown_travel .btn_select {width: 83%; margin-top: 13.5%;} /* 카드 선택 */ .smalltown_travel .card_section { height: auto; padding: 1rem 0 2rem; background: #8EE7FF;} .smalltown_travel .card_section .note{position: relative; padding: 0 1rem 3rem; background: url(../resources/images/theme/smalltown_travel/bg_note_mo.png) center top / 100% 100% no-repeat; max-width: 100%;} .smalltown_travel .card_section .note::after{content: ''; position: absolute; top: 3.8rem; left: 0; display: inline-block; width: 20.00vw; height: 18.72vw; background: url(../resources/images/theme/smalltown_travel/bg_note_heart.png) 0 0 / 100% 100% no-repeat;} .smalltown_travel .card_section .sec_tit { font-size: 1.8rem; padding: 4rem 0 1rem;} .smalltown_travel .card_wrap { padding: 0; margin: 0 4.595%; border-radius: 0; border: none; } .smalltown_travel .gallery_grid { gap: 1rem 0.8rem; border-top: 3px solid #EDEDED; padding-top: 1rem;} .smalltown_travel .gallery_grid li:nth-child(5) img{object-position: 0 50%;} .smalltown_travel .gallery_grid li:nth-child(6) img{object-position: 100% 50%;} .smalltown_travel .gallery_grid li:nth-child(7) img{object-position: 40% 50%;} .smalltown_travel .gallery_grid li:nth-child(9) img{object-position: 45% 50%;} .smalltown_travel .gallery_grid li:nth-child(13) img{object-position: 50% 70%;} .smalltown_travel .gallery_grid li:nth-child(15) img{object-position: 24% 50%;} .smalltown_travel .gallery_grid li:nth-child(16) img{object-position: 30% 50%;} .smalltown_travel .gallery_item{aspect-ratio: 78 / 114; border-radius: 0.6rem;} .smalltown_travel .gallery_item:hover img, .smalltown_travel .gallery_item:focus-visible img {transform: scale(1);} .smalltown_travel .gallery_item .copyright{padding: 2.4rem 0.6rem 0.6rem 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.3) 24%, rgba(0, 0, 0, 0.7) 70%); font-size: 0.8rem; letter-spacing: -0.04em; line-height: 1.25;} /* 띠배너 */ .smalltown_travel .link_section { height: 10rem; } .smalltown_travel .link_section .inr{align-items: flex-start; padding: 0 6.154%} .smalltown_travel .link_section .inr::after{width: 21.54vw; height: 14.36vw; left: auto; right: 6.154%; background-image: url(../resources/images/theme/smalltown_travel/bg_banner1_mo.png);} .smalltown_travel .link_section.half .inr::after{width: 22.56vw; height: 17.44vw; left: auto; right: 6.154%; background-image: url(../resources/images/theme/smalltown_travel/bg_banner2_mo.png);} .smalltown_travel .link_section p { font-size: 1.3rem; } .smalltown_travel .link_section span { height: 3.6rem; padding: 0 1.6rem; font-size: 1.5rem; } /* 버킷리스트 팝업 */ .smalltown_travel .popup_wrap { border-radius: 1.8rem; padding: 1.6rem 1.2rem; gap: 1.6rem; max-height: 80svh; width: 90%; } .smalltown_travel .btn_stamp { padding: 0.4rem 0.6rem; border-radius: 0.36rem; font-size: 1.2rem; } .smalltown_travel .btn_stamp .ico_stamp { width: 1.2rem; height: 1.2rem; } .smalltown_travel .btn_close { width: 2.4rem; height: 2.4rem; } .smalltown_travel .landmark_img { width: 7rem; height: 5rem; } .smalltown_travel .spot_info .txt_wrap .sub_tit { font-size: 1.4rem; } .smalltown_travel .spot_info .txt_wrap .main_tit { font-size: 2.4rem; } .smalltown_travel .bucket_list { gap: 1rem; margin-top: 0; } .smalltown_travel .bucket_item { padding: 0.6rem 0.8rem; min-height: 11rem; border-radius: 0.6rem; } .smalltown_travel .item_txt { padding: 0.8rem 0.8rem 0; font-size: 1.5rem; } .smalltown_travel .item_txt .txt_bold{text-decoration-thickness: 1px; text-underline-offset: 2.5px;} .smalltown_travel .item_num .num_txt { font-size: 1.2rem; } .smalltown_travel .badge_stamp{width: 4rem; height: 3.3rem;} .smalltown_travel .btn_share { padding: 1.6rem 2rem; } .smalltown_travel .btn_share .btn_txt { font-size: 1.5rem; } .smalltown_travel .btn_share .ico_share { width: 2.8rem; height: 1.8rem; } /* 발도장 안내 팝업 */ .smalltown_travel .stamp_popup { padding: 3.6rem 1.2rem 2rem; width: 82%; border-radius: 1.8rem; gap: 1.6rem;} .smalltown_travel .stamp_popup .btn_close{top: 1.2rem; right: 1.2rem;} .smalltown_travel .stamp_popup .pop_head .pop_tit { font-size: 2.4rem; } .smalltown_travel .stamp_popup .pop_head .ico_wrap{gap: 0.3rem;} .smalltown_travel .stamp_popup .pop_head .ico_wrap img{width: 2.4rem; height: 2.4rem;} .smalltown_travel .step_list{gap: 1.6rem;} .smalltown_travel .step_item { gap: 1rem; } .smalltown_travel .step_item .thumb { width: 48.75%;} .smalltown_travel .step_item .step_txt .desc { font-size: 1.5rem; } .smalltown_travel .stamp_notice{font-size: 1.2rem;} } @media all and (min-width: 768px) and (max-width: 1023px){ .smalltown_travel .title_section{background-position: 50% 80%;} .smalltown_travel .title_section .mo{width: 70%; margin: 0 auto;} .smalltown_travel .btn_select{margin-top: 5rem;} .smalltown_travel .card_section{padding: 2rem 0 3.6rem;} .smalltown_travel .card_section .note{padding-inline: 2.4rem; background-size: 98% 100%;} .smalltown_travel .card_section .sec_tit{padding: 5rem 0 1.6rem; font-size: 2rem;} .smalltown_travel .gallery_grid{padding-top: 2rem;} .smalltown_travel .gallery_item{aspect-ratio: 1 / 0.95;} .smalltown_travel .gallery_item .copyright{ padding-top: 1.8rem; font-size: 0.9rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.16) 30%, rgba(0, 0, 0, 0.5) 70%);} .smalltown_travel .gallery_item .copyright .mo{display: none;} .smalltown_travel .link_section .inr{padding: 0 2.4rem; align-items: center;} .smalltown_travel .link_section .inr::after{width: 8.4rem; height: 5.6rem; left: calc(50% + 14rem); right: auto;} .smalltown_travel .link_section.half .inr::after{width: 8.8rem; height: 6.8rem; left: calc(50% - 22rem); right: auto; background-image: url(../resources/images/theme/smalltown_travel/bg_banner2.png);} .smalltown_travel .link_section p{font-size: 1.5rem;} .smalltown_travel .link_section span{font-size: 1.7rem;} } 마음에 드는 사진 을 선택하면 여행지의 매력을 듬뿍 담은 버킷리스트 를 확인할 수 있어요! ⓒ 포토코리아_ 정주애 ⓒ 포토코리아_ 황윤철 ⓒ 포토코리아_ 모먼트스튜디오 ⓒ 한국관광공사 송재근 ⓒ 포토코리아_ 예광희 ⓒ 포토코리아_ 김진관 ⓒ 포토코리아_ 양세영 ⓒ 포토코리아_ 윤은준 ⓒ 포토코리아_ 박아름 ⓒ 포토코리아_ 김재은 ⓒ 포토코리아_ 박영기 ⓒ 포토코리아_ 두드림 반값여행 지역 발도장 찍고 선물 받기! 이벤트 자세히 보러 가기 놓치면 아쉬운 국내여행 혜택! 반값여행 자세히 알아보기 발도장 남기는 법 소도시 여행 버킷리스트 공유하기 발도장 남기는 법 1. 버킷리스트를 클릭해 여행지 정보를 확인하세요. 2. 여행지 500m 이내에서는 발도장을 남길 수 있어요. 3. 발도장을 남기면 버킷리스트 달성 현황에 자동으로 반영돼요. ※이벤트 페이지에서 참여 신청하고 푸짐한 선물도 받아보세요! var btnSelect = document.querySelector('.btn_select'); var titleSection = document.querySelector('.title_section'); var cardSection = document.querySelector('.card_section'); if (btnSelect && titleSection && cardSection) { btnSelect.addEventListener('click', function () { titleSection.style.display = 'none'; cardSection.classList.add('is_open'); cardSection.setAttribute('aria-hidden', 'false'); }); } /* 팝업 기능 */ var bucketPopup = document.getElementById('bucketPopup'); var btnClose = document.getElementById('btnClose'); var stampPopup = document.getElementById('stampPopup'); var btnStamp = document.querySelector('.btn_stamp'); var btnStampClose = document.getElementById('btnStampClose'); var lastGalleryBtn = ; function handleFocusTrap(e, popup) { var focusableEls = popup.querySelectorAll('a[href], area[href], button:not([disabled]), [tabindex=0]'); var firstFocusableEl = focusableEls[0]; var lastFocusableEl = focusableEls[focusableEls.length - 1]; if (e.key === 'Tab') { if (e.shiftKey) { if (document.activeElement === firstFocusableEl) { lastFocusableEl.focus(); e.preventDefault(); } } else { if (document.activeElement === lastFocusableEl) { firstFocusableEl.focus(); e.preventDefault(); } } } } /* 공통 열기/닫기 */ function openPopup(popup, focusTarget) { popup.classList.add('is_open'); popup.removeAttribute('aria-hidden'); document.body.style.overflow = 'hidden'; var wrap = popup.querySelector('.popup_wrap, .stamp_popup'); if (wrap) { wrap.setAttribute('tabindex', '-1'); wrap.focus(); } popup._focusHandler = function (e) { handleFocusTrap(e, popup); }; popup.addEventListener('keydown', popup._focusHandler); } function closePopup(popup, focusTarget) { popup.classList.remove('is_open'); popup.setAttribute('aria-hidden', 'true'); popup.removeEventListener('keydown', popup._focusHandler); if (focusTarget) focusTarget.focus(); } /* 버킷리스트 팝업 */ document.querySelectorAll('.gallery_item').forEach(function (btn) { btn.addEventListener('click', function () { lastGalleryBtn = btn; openPopup(bucketPopup, btnStamp); }); }); bucketPopup.addEventListener('click', function (e) { if (e.target === bucketPopup) closeBucket(); }); btnClose.addEventListener('click', closeBucket); function closeBucket() { closePopup(bucketPopup, lastGalleryBtn); if (!stampPopup.classList.contains('is_open')) { document.body.style.overflow = ''; } } /* 발도장 팝업 */ btnStamp.addEventListener('click', function () { openPopup(stampPopup, btnStampClose); }); stampPopup.addEventListener('click', function (e) { if (e.target === stampPopup) closeStamp(); }); btnStampClose.addEventListener('click', closeStamp); function closeStamp() { closePopup(stampPopup, btnStamp); } /* ESC 키: 위 레이어부터 순서대로 닫기 */ document.addEventListener('keydown', function (e) { if (e.key !== 'Escape') return; if (stampPopup.classList.contains('is_open')) { closeStamp(); } else if (bucketPopup.classList.contains('is_open')) { closeBucket(); } }); window.addEventListener('load', function() { let currentRegionKey = ; window.addEventListener('pageshow', function() { const fromExternal = sessionStorage.getItem('fromExternal'); const popupOpen = sessionStorage.getItem('popupOpen'); const regionKey = sessionStorage.getItem('regionKey'); if(fromExternal === 'ms_detail' && popupOpen === 'true') { if (regionKey) { renderRegion(regionKey); } document.querySelector('.title_section').style.display = 'none'; const cardSection = document.querySelector('.card_section'); if (cardSection) { cardSection.classList.add('is_open'); cardSection.setAttribute('aria-hidden', 'false'); } const popUp = document.getElementById('bucketPopup'); if(popUp) { popUp.classList.add('is_open'); popUp.setAttribute('aria-hidden', 'false'); } sessionStorage.removeItem('fromExternal'); } if(snsId) { fetchMyStamps(); } }); const travelData = { yeongwol: { title: '강원 영월군', subtitle: '굽이굽이 흐르는 역사의 물길', img: 'area1.png', list: [ { title: '주천시장', desc: ' 인근에서 신선한 한우 맛보기', cotId: '11263bfb-b0de-4584-9af7-f0b6e745b23e' }, { title: '서부아침시장', desc: '에서 갓 부친 메밀전병 먹기', cotId: 'd916998f-533b-4aec-b382-8cc24708e3f9' }, { title: '별마로천문대', desc: '에서 쏟아지는 별 감상하기', cotId: '0c661c4e-6d1f-4dd2-8264-3ffb88a6bbc2' }, { title: '법흥사', desc: '가 간직한 1,500년의 세월 느끼기', cotId: '6fdd0a66-fb41-44ea-bfe1-d38122319b8b' }, { title: '한반도 뗏목마을', desc: '에서 뗏목 타고 한반도지형 보기', cotId: '9415f248-8c58-4e39-a78f-590d8e7c7897' }, { title: '젊은달 와이파크', desc: '에서 현대미술 감상하기', cotId: '0ba668cd-2af0-4b02-a2be-276199e183e6' }, ] }, pyeongchang: { title: '강원 평창군', subtitle: '메밀 맛에 취하고 문학 감성에 젖는 곳', img: 'area2.png', list: [ { title: '횡계 오삼불고기 거리', desc: '에서 오삼불고기 먹기', cotId: '1e06fa2a-8f2d-4e73-b5bd-56cbaff4e707' }, { title: '봉평재래시장', desc: '에서 다양한 메밀 음식 맛보기', cotId: '83efcd47-7988-47cb-87a0-b09c3729316d' }, { title: '월정사 전나무숲', desc: '에서 피톤치드 충전하기', cotId: 'bc7f36d9-5b2f-4a5a-8464-0a830e4c4f71' }, { title: '이효석 문학관', desc: '에서 그의 문학 세계 이해하기', cotId: 'c0c2123b-4aa0-47b3-9835-6b1395135429' }, { title: '발왕산 기 스카이워크', desc: '에서 백두대간 보기', cotId: '3a5c1b8e-8758-405f-8561-79d828bf4515' }, { title: '상원사', desc: '의 국보 문수동자상 만나기', cotId: '9040f71d-6df4-4522-813f-5fc5371b64ab' }, ] }, hoengseong: { title: '강원 횡성군', subtitle: '숲을 가르는 짜릿한 질주', img: 'area3.png', list: [ { title: '안흥찐빵마을', desc: '에서 갓 나온 찐빵 즐기기', cotId: '0f6d08be-6d22-4f76-a126-8d3da4ab4976' }, { title: '횡성민속장', desc: '에서 막걸리와 메밀전병 먹기', cotId: '530510d3-ee2b-4349-ba12-410441e599e0' }, { title: '횡성호수길 5구간', desc: ' 걸으며 물멍하기', cotId: 'd2c449c4-4935-4bde-81c7-8579297a03db' }, { title: '횡성루지체험장', desc: '에서 아찔한 스릴 만끽하기', cotId: 'aa7e2677-0b32-4cbb-9684-cb6c6943a2a4' }, { title: '국립횡성숲체원', desc: '에 머물며 힐링하기', cotId: '2130956f-9615-4af6-9cf9-f5779962bff9' }, { title: '횡성댐 물문화관', desc: '에서 댐의 역사 알아보기', cotId: '273706df-2c59-4cd3-9600-6c52b8d1f854' }, ] }, jecheon: { title: '충북 제천시', subtitle: '의림지에서 쏟아지는 시원한 폭포수', img: 'area4.png', list: [ { title: '제천 역전한마음시장', desc: '에서 빨간오뎅 먹기', cotId: '707b14c6-ba04-4128-abba-0dee5ac1a00b' }, { title: '꽃돌문화원', desc: ' 관람 후 인근 식당에서 한방 갈비 즐기기', cotId: '1aa6eac6-e62b-48b1-8d8e-39b75a77cb58' }, { title: '의림지', desc: '의 아름다운 야경 감상하기', cotId: '1cce14df-2858-4561-b045-e8020e5f83da' }, { title: '배론성지', desc: '에서 천주교 발자취 따라 걷기', cotId: '06532bda-250e-45ca-a802-9211a43f4c15' }, { title: '청풍호 관광모노레일', desc: ' 타고 비봉산 오르기', cotId: 'b9d03d6a-83f6-4772-9a3f-52fe7ef36bbd' }, { title: '청풍문화유산 단지', desc: '에서 수몰된 마을 떠올리기', cotId: 'b5f790e9-4b7c-40a4-a1b1-57444cb1ce86' }, ] }, geochang: { title: '경남 거창군', subtitle: '백두대간 기운 충전하며 즐기는 여유', img: 'area5.png', list: [ { title: '거창축협 한우팰리스', desc: '에서 쑥 먹인 한우 먹기', cotId: '1aeb6bc3-34c7-45e0-9639-6a982099dd18' }, { title: '거창전통시장', desc: '에서 지역 특산물 맛보기', cotId: '6debb307-c031-4a6b-8254-bd54cf9ea9db' }, { title: '거창창포원', desc: '에서 계절 꽃의 향연 즐기기', cotId: '5fe1766f-fc9f-411f-b74f-c401e68b6ae5' }, { title: '백두산천지온천', desc: '에서 여행의 피로 풀기', cotId: '01ed3ae7-2af1-4c71-985e-14e0a8ec7b77' }, { title: '산림레포츠파크', desc: '\n손 전망대에 올라 풍경 보기', cotId: '38daaf18-0711-44bb-825f-752847b67d12' }, { title: '항노화힐링랜드', desc: '에서 출렁다리 건너기', cotId: '6b547de3-03c8-403a-b540-b38301dc95d4' }, ] }, namhae: { title: '경남 남해군', subtitle: '푸른 바다와 초록 계단이 만든 풍경', img: 'area6.png', list: [ { title: '남해독일마을', desc: '에서 수제 맥주와 소시지 먹기', cotId: 'd79e9827-abf3-44b3-bc01-afd1ddd04017' }, { title: '남해전통시장', desc: '에서 싱싱한 해산물 맛보기', cotId: 'e3fd5100-2842-424f-a2ef-0b24d3d0e459' }, { title: '보리암', desc: '에서 일출 보며 간절한 소원 빌기', cotId: '34d2e5c7-3c44-4e82-ab3b-831c3ae2b5be' }, { title: '상주 은모래비치', desc: '에서 맨발로 산책하기', cotId: '0c70bb97-5ea0-4f1c-99e8-9a8cad34a596' }, { title: '가천 다랭이마을', desc: '에서 인생샷 남기기', cotId: '6bba0262-c894-457a-ae49-124ea96e2db1' }, { title: '물미해안전망대', desc: '에서 스카이워크 걷기', cotId: '0c8493e2-7172-49cf-ae82-fc4911f261ba' }, ] }, miryang: { title: '경남 밀양시', subtitle: '사명대사의 충절을 간직한 곳', img: 'area7.png', list: [ { title: '밀양아리랑시장', desc: '에서 돼지국밥 먹기', cotId: 'c6123eda-c130-4fbf-a67c-c296c4fda0fb' }, { title: '선샤인밀양 테마파크', desc: '에서 특산물 구매하기', cotId: '9c7588a5-c061-45e6-94d9-9246ba5def3f' }, { title: '표충사', desc: '에서 사명대사의 애국심 느끼기', cotId: '342f0ae0-4896-4174-b617-6a4a03e2f77f' }, { title: '위양지', desc: '에서 저수지에 비친 풍경 감상하기', cotId: '02bd0e4b-4f91-4d2c-9d20-2aa9c2027dfe' }, { title: '영남루', desc: '에서 잔잔히 흐르는 밀양강 보기', cotId: '55945640-6f5d-44b5-8678-6e135a3b2939' }, { title: '만어사', desc: ' 소원돌에 소원 빌고 돌 들어보기', cotId: '3df4b4d5-0a1a-46e0-969f-c5f779a0767d' }, ] }, hadong: { title: '경남 하동군', subtitle: '다도해를 향한 짜릿한 활강', img: 'area8.png', list: [ { title: '쌍계사', desc: ' 산책하고 인근 식당에서 산채정식 즐기기', cotId: 'd6b47398-0d31-4f70-89fe-0fea5badf4d7' }, { title: '하동재첩 특화마을', desc: '에서 재첩 요리 먹기', cotId: '30739715-9360-43ef-9763-e3d739b3cba8' }, { title: '최참판댁', desc: '에서 대하소설 《토지》의 흔적 찾기', cotId: 'ae28c3e3-2121-4366-a271-8cb81be19792' }, { title: '하동송림공원', desc: '에서 맨발로 산책하기', cotId: '9df540bb-627d-4f75-9096-521324fe7691' }, { title: '스타웨이하동', desc: '에서 탁 트인 평사리 들판 보기', cotId: '3174d98e-3471-4d2f-8029-c0c75299a342' }, { title: '코리아 짚와이어', desc: ' 타고 다도해 만끽하기', cotId: '16246d26-33fd-40cd-9b3e-468459314040' } ] }, hapcheon: { title: '경남 합천군', subtitle: '대장경을 품은 고요한 산사', img: 'area9.png', list: [ { title: '산채한정식거리', desc: '에서 건강 밥상 즐기기', cotId: '2cc62831-bab7-444d-a9c6-e6af7e15c9fc' }, { title: '합천왕후시장', desc: ' 구경하고 돼지국밥 먹기 ', cotId: '2bf6d84a-27e9-4803-942e-7e057a6e4472' }, { title: '해인사', desc: '의 고즈넉한 경내 산책하기', cotId: '77872fac-c479-4f61-9475-9f172ed8a2c8' }, { title: '영상테마파크', desc: '에서 근현대 의상 입어보기', cotId: '5ed63a65-4cb8-4a6e-b7b8-d0edd5f6b368' }, { title: '핫들생태공원', desc: '에서 꽃길 트레킹 즐기기', cotId: '8d134b11-6e04-408b-995f-dec7ee594faf' }, { title: '대장경테마파크', desc: '에서 기록문화 이해하기', cotId: 'dd21547f-40cb-4e20-a820-6bc6d6d0a5eb' } ] }, gochang: { title: '전북 고창군', subtitle: '활력 넘치는 풍천장어의 고장', img: 'area10.png', list: [ { title: '선운산 풍천장어거리', desc: '에서 장어구이 먹기', cotId: 'febffa8e-2db7-4f9c-aaec-4659e34b4cc7' }, { title: '고창 파머스마켓', desc: '에서 특산물 구매하기', cotId: '58835de0-8f6f-4237-8fc3-b2e176d6b815' }, { title: '선운사', desc: '에서 천년고찰의 고요함 만끽하기', cotId: 'a4e35f14-5339-4808-8852-91f0fcdadb0f' }, { title: '구시포 해수욕장', desc: '에서 아름다운 낙조 감상하기', cotId: 'a24fc1c3-b0e1-4653-9a90-c85104c07b42' }, { title: '넓은들 학원농장', desc: '의 푸른 들판에서 인생샷 찍기', cotId: '42bbb743-2432-42ca-8ec3-f54d4e16f0e2' }, { title: '고창읍성', desc: '에서 운치 있는 밤 산책 즐기기', cotId: '380c47b2-2133-4236-8ff9-e14d0b1e14e5' } ] }, gangjin: { title: '전남 강진군', subtitle: '고려청자의 숨결이 깃든 고을', img: 'area11.png', list: [ { title: '마량미항', desc: '에서 싱싱한 활어회 맛보기', cotId: '14b403ef-797c-4f6f-98aa-c90d420c8f09' }, { title: '병영5일시장', desc: ' 구경하고 돼지불고기 먹기', cotId: 'a8095b93-81de-49b9-aaa8-aea930877f45' }, { title: '남미륵사', desc: '에서 황동 아미타불 친견하기', cotId: '2d8e834c-6152-46a1-9763-e1a86bebffb5' }, { title: '다산초당', desc: '에서 정약용의 숨결 느끼기', cotId: '53d7616a-e83f-49e8-b5db-f6c1260eef2e' }, { title: '백련사', desc: ' 동백나무 숲길에서 여유 즐기기', cotId: '1bd92c32-c09a-402a-a5f2-dba01dd3b84b' }, { title: '고려청자 박물관', desc: '에서 청자 빚기 체험하기', cotId: '65ce8ea2-53a8-4232-bb5f-904375f67785' } ] }, goheung: { title: '전남 고흥군', subtitle: '상큼한 유자향이 가득한 곳', img: 'area12.png', list: [ { title: '고흥전통시장', desc: '에서 생선구이 맛집 찾기', cotId: 'a64d836f-3a9c-4e69-aafd-87e4dbcf9835' }, { title: '우주발사전망대', desc: '에서 바다 보며 유자차 마시기', cotId: '9b8185c9-42f8-4237-81a6-dacc30e3ac6d' }, { title: '녹동항', desc: ' 장어거리 조형물 앞에서 인증샷 찍기', cotId: '10e856fe-ddfd-493b-aa8e-03be9371187d' }, { title: '나로우주센터', desc: '에서 로켓 발사 체험 참여하기', cotId: '8c5eaf5f-2f1a-4502-abed-dbbaeba32474' }, { title: '남열해돋이 해수욕장', desc: '에서 예쁜 조개껍데기 찾기', cotId: 'bee61105-1d21-40f7-a83c-f55440ac422d' }, { title: '소록도', desc: '에서 한센병에 대해 알아보기', cotId: '6a2ee24e-fa3b-4618-a9b9-953c05900a66' } ] }, yeonggwang: { title: '전남 영광군', subtitle: '상사화로 붉게 물든 고즈넉한 산사', img: 'area13.png', list: [ { title: '영광터미널 시장', desc: '에서 모시송편 맛보기', cotId: '385eecae-5211-4f73-b237-6ad79c1e9d4b' }, { title: '영광 법성포 굴비거리', desc: '에서 굴비 정식 먹기', cotId: '0b114128-6358-445d-9a24-c58f1ec18f36' }, { title: '불갑사', desc: '의 고요한 경내 산책하기', cotId: '5ef26ef3-f091-4f4a-95a4-1db31c251505' }, { title: '백수해안도로 노을전망대', desc: '에서 일몰 감상하기', cotId: '6da87204-d482-4186-b988-79488df86290' }, { title: '칠산타워', desc: '에 올라 111m 높이에서 물멍 즐기기', cotId: 'ff4b2a88-0357-430b-a119-0e09481d4bdb' }, { title: '백제불교 최초도래지', desc: '에서 불교문화 이해하기', cotId: '497b16fb-84eb-4fbf-be49-11f184a4ce7d' } ] }, yeongam: { title: '전남 영암군', subtitle: '기암괴석이 빚어낸 월출산 절경', img: 'area14.png', list: [ { title: '독천낙지음식 명소거리', desc: '에서 갈낙탕 맛보기', cotId: '131cd4a3-784e-4692-ab0b-323829b0b680' }, { title: '영암매력한우 명품관', desc: '에서 매실 먹인 한우 먹기', cotId: 'bde23dbf-b16f-44ac-9811-badd4b259e05' }, { title: '왕인박사 유적지', desc: '에서 스탬프 투어 참여하기', cotId: 'bd9fd01b-7b68-4703-9845-7c8024152b0a' }, { title: '도갑사', desc: ' 해탈문 지나며 모든 고민을 내려놓기', cotId: '0a5638d1-7756-456e-8bc7-6c0ff0e784b8' }, { title: '월출산', desc: ' 구름다리 건너며 아찔한 풍경 즐기기', cotId: 'f2753211-648f-4798-a61e-f314373a46f6' }, { title: '하정웅미술관', desc: '에서 예술 작품 감상하기', cotId: '3ab243eb-48c0-43de-bad3-799781bdad11' } ] }, wando: { title: '전남 완도군', subtitle: '청정 바다가 품은 최고의 진미', img: 'area15.png', list: [ { title: '완도전복거리', desc: '에서 전복 코스요리 먹기', cotId: '4b078792-017f-4735-ae22-cfdfaac71708' }, { title: '완도항', desc: ' 구경하고 인근 카페에서 전복빵 맛보기', cotId: '32f82272-2380-4843-a8fe-03a14628bb31' }, { title: '신지명사십리 해수욕장', desc: '의 고운 모래 만져보기', cotId: '91ceb5d6-ff94-4f12-a6ff-11352cbfb5f7' }, { title: '완도타워', desc: '에서 아름다운 야경 감상하기', cotId: 'bab3d163-1995-48e3-a495-0b1687233171' }, { title: '완도수목원', desc: '에서 난대림 산책하기', cotId: '27a1d242-91c3-44a4-b87a-b76f049bd705' }, { title: '장보고기념관', desc: '에서 장보고의 흔적 찾기', cotId: '16ee91a2-4ea8-42a7-8a2d-753784fe18b6' } ] }, haenam: { title: '전남 해남군', subtitle: '한반도가 시작되는 땅끝마을', img: 'area16.png', list: [ { title: '웰빙음식촌', desc: '에서 푸짐한 보리쌈밥 먹기', cotId: '545e0eba-5842-4ba1-bebe-78f1d5eaaeb0' }, { title: '토종닭요리촌', desc: '에서 토종닭 코스요리 즐기기', cotId: 'd1b3f624-36e0-47f8-99d0-12e0dc1ef3f3' }, { title: '땅끝전망대', desc: '에서 첫 땅 밟아보기', cotId: '42a80926-c466-4ae6-a4b0-2c48c5f72262' }, { title: '미황사', desc: ' 자비의 108계단 오르기', cotId: '9ccf5949-f4da-422c-83e1-7e0ac626b03d' }, { title: '우수영관광지', desc: '에서 명량대첩의 감동 느끼기', cotId: '7770a339-d073-4b39-ad71-b08eb7e5d308' }, { title: '땅끝모노레일', desc: ' 타고 다도해 감상하기', cotId: '9904b383-2f25-4804-a979-eef289cf5c30' } ] } }; document.querySelectorAll('.gallery_item').forEach(btn => { btn.addEventListener('click', () => { renderRegion(btn.dataset.region); }); }); document.querySelector('#bucketPopup').addEventListener('click', (e) => { const link = e.target.closest('.bucket_item a'); if (!link) return; e.preventDefault(); const url = link.href; if (url.includes('ms_detail.do')) { sessionStorage.setItem('fromExternal', 'ms_detail'); sessionStorage.setItem('popupOpen', 'true'); sessionStorage.setItem('regionKey', currentRegionKey); } window.location.href = url; }); function renderRegion(regionKey) { currentRegionKey = regionKey; const data = travelData[regionKey]; document.querySelector('.main_tit').textContent = data.title; document.querySelector('.sub_tit').textContent = data.subtitle; document.querySelector('.spot_info img').src = `../resources/images/theme/smalltown_travel/${data.img}`; const listEl = document.querySelector('.bucket_list'); listEl.innerHTML = ''; data.list.forEach((item, index) => { listEl.innerHTML += ` 여행 버킷리스트 ${index + 1} ${item.title} ${item.desc.replace(/\n/g, ' ')} `; }); if(snsId) { fetchMyStamps(); } } let myCotIds = new Set(); function fetchMyStamps() { $.ajax({ url: mainurl+'/call', dataType: 'json', type: POST, data: { cmd : 'MY_STAMPS_COTID_LIST' }, success: function(data) { const list = data.body.myStampCotIdList || []; myCotIds = new Set(list.map(v => v.COT_ID)); document.querySelectorAll('.bucket_item').forEach(el => { const cotId = el.dataset.cotid; if(myCotIds.has(cotId)) { el.querySelector('.badge_stamp').style.display = 'block'; } }); }, error: function(xhr, textStatus, errorThrown) { } }); } const shareBtn = document.querySelector('[data-ui-link-share]'); if (shareBtn) { document.querySelector('[data-ui-link-share]').addEventListener('click', () => { copyToClipboard(); }); } function copyToClipboard() { const url = location.href; const success = () => alert('URL이 복사되었습니다.\n함께 여행 가고 싶은 친구에게 공유해보세요!'); const failure = (err) => console.error('클립보드에 URL을 복사하지 못했습니다. : ', err); try { if (navigator.clipboard) { navigator.clipboard.writeText(url).then(success).catch(failure); } else { const tempInput = document.createElement('textarea'); tempInput.value = url; document.body.appendChild(tempInput); tempInput.select(); const successful = document.execCommand('copy'); if (successful) { success(); } else { failure('execCommand를 통한 복사 실패'); } document.body.removeChild(tempInput); } } catch (error) { failure(error); } }});