html,body {height:100%; overflow-y:auto;}
.travel_course {width:100%; position: relative;}
.travel_course.h-100 {height:100%; overflow:hidden;}
/* category */
:root {
--map-cate1: #D471A4;
--map-cate2: #FB685E;
--map-cate3: #30960C;
--map-cate4: #80ACFF;
}
/* 검색 */
.search_area { margin-bottom:1.2rem;}
.search_area fieldset {box-sizing:border-box; min-width:0; margin:0; padding:0; border:0;}
.search_area .search_form { gap:.5rem; }
.search_area .search_form .input { height:45px; font-size:1.1rem; color:#000; background:#fff no-repeat .9em 53% / 16px auto; border:1px solid #999; border-radius:.5rem}
.search_area .search_form .act.input { border-color:#000}
.search_area .input>* { height:100%; width:100%; border:0; border-radius:.5rem}
.search_area .btn_search { height:45px; padding:0 1.5em; font-size:1.16rem; color:#fff; letter-spacing:-.01em; background:#333; border-radius:.5rem}
.search_area .area_area { position:relative;}
.search_area .area_area .input { width:200px; background-image:url(/resources/jns-img/sub/bg_infotop_area.svg); }
.search_area .input .area_input { position:relative; padding:0 2.4em 0 2.3em; }
.search_area .input .area_input::after { content:""; position:absolute; top:.8em; right:1.5em; width:9px; height:9px; border:solid #333; border-width:0 2px 2px 0; transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transition:all .3s ease; transition:all .3s ease;}
.search_area .on .input .area_input::after { top:1em; transform:rotate(-135deg); -webkit-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg);}
.search_area .input .area_input em { display:block; overflow:hidden; color:#333; font-weight:500; text-align:left; text-overflow:ellipsis; white-space:nowrap;}
.search_area .area_layer { display:none; position:absolute; top:46px; left:0; width:100%; overflow:hidden; color:#333; background:#fff; border:1px solid #7401b8; border-radius:.5rem; z-index:102; }
.search_area .on .area_layer { display:block; }
.search_area .area_layer .select_area { gap:.3em 1%; padding:1.4rem; border-bottom:1px solid #7401b8;}
.search_area .area_layer .select_area li { width:48%; font-size:1rem}
.search_area .area_layer .select_area label { display:inline-block; vertical-align:middle; margin-left:1px;}
.search_area .area_layer .select_area .full { width:100%; display: flex; align-items: center; gap: 2px;}
.search_area .area_layer .btn_area button { height:40px}
.search_area .area_layer .btn_area .area_close { flex:1; color:#7401b8;}
.search_area .area_layer .btn_area .area_apply { flex:1.5; color:#fff; background:#7401b8; }
.search_area .keyword_area .input { width:250px}
.search_area .keyword_area .input input { padding:0 1.4em}
.search_area .category_depth_wrap {position:relative; width: 200px;}
.search_area .category_depth {width:100%; background: #f0f0f3; border-radius: 2em; padding:0 1.4em; height:40px; font-size:1rem; appearance: none; -webkit-appearance: none;}
.search_area .category_depth_wrap::after { content:""; position:absolute; top:.8em; right:1em; width:9px; height:9px; border:solid #333; border-width:0 2px 2px 0; transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transition:all .3s ease; transition:all .3s ease;}
/* 자동검색 */
.search_area {position:relative;}
.auto_search {display:none; position:absolute; top:calc(100% + 10px); left:0; width:100%; min-height:70px; max-height:240px; overflow:hidden; overflow-y:auto; border:1px solid #e5e5e5; border-radius:1em; background:#fff; z-index:1000;}
.auto_search .no_con_area {display:none;}
.auto_search.active {display:block;}
.auto_search button.search_list:hover {background:#f1f3f5;}
.auto_search button.search_list:first-of-type {padding:1rem 2rem .667rem; border-radius:1em 1em 0 0;}
.auto_search button.search_list:last-of-type {padding:.667rem 2rem 1rem; border-radius:0 0 1em 1em;}
.auto_search button.search_list {width:100%; display:flex; gap:0 1rem; padding:.667rem 2rem; position: relative; z-index:1001; cursor:pointer;}
.auto_search button.search_list img {width:50px; height:50px; object-fit:cover; border-radius:50px; border:2px solid #006ed2;}
.auto_search button.search_list .search_info {display:flex; justify-content:flex-start; flex-direction:column; gap:8px 0; text-align:left;}
.auto_search button.search_list .search_name {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-size:1.1rem; font-weight:500; letter-spacing:-0.05em;}
.auto_search button.search_list .search_add {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-size:.933rem; letter-spacing:-0.075em; color:#8d8d8d;}
/* 여행코스 공통 */
.flex_full {width:100%; flex:1;}
.travel_course .img_wrap {display:inline-block; position:relative; width:100%; height:0; overflow:hidden; padding-top:75%; border-radius:1em; box-shadow:4px 5px 13px 0 rgb(0 0 0 / 12%);}
.travel_course .img_wrap img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover;}
.travel_course .con_wrap {display:flex; flex-direction:column; gap:1rem 0; margin-top:1rem;}
.travel_course .tag_wrapper {display:flex; flex-wrap:wrap; align-items:center; gap:2px;}
.travel_course .tag_wrapper .tag {padding:4px; font-size:1rem; letter-spacing:-0.05em; font-weight:300; color:#000; background-color:#eeeeee; border-radius:5px;}
.travel_course .check_list {gap:0 1.5rem;}
.travel_course .check_list li {display:flex; align-items:center;}
.travel_course button.close {width:40px; height:40px; background-color:#000; position:relative; border-radius:50%;}
.travel_course button.close::before,
.travel_course button.close::after {position: absolute; top: 22.5%; left: 50%; width: 2px; height: 55%; background: #fff; content: "";}
.travel_course button.close::before {transform: rotate(45deg);}
.travel_course button.close::after {transform: rotate(-45deg);}
.day_img_wrap {display:block; position:relative; width:100%; height:0; padding-bottom:64%; overflow:hidden;}
.day_img_wrap img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; border-radius:1em;}
/*여행코스 상세 */
.travel_course .map_area {position:absolute; left:0; top:0; width:100%; height:100%; background-image: url('/images/visitjj/board/map/img_map.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.search_area_wrap {display:contents;}
.travel_course .map_area .search_area,
.travel_course .map_area .search_area * {box-sizing:border-box;}
.travel_course .map_area .search_area {position:absolute; top:50px; left:50%; transform:translateX(-50%); z-index:998; max-width:calc(100% - 2rem);}
.travel_course .map_area .search_area .input {position:relative; height:40px; border-radius:2em; border:none; background-image:none;}
.travel_course .map_area .search_area .input input:focus {border-radius:2em;}
.travel_course .map_area .search_area .btn_search {position:absolute; display:flex; align-items:center; justify-content:center; gap:0 4px; height:40px; right:0; top:50%; transform:translateY(-50%); width:auto; padding:0 1.3em; border-radius:2em;}
.travel_course .map_area .search_area .btn_search img {width:16px; margin-top: 3px;}
.travel_course .map_area .search_area .keyword_area .input.bg {width:500px;}
.travel_course .map_area .search_area .keyword_area .input.bg {background-image:none; background-color:#f0f0f3;}
.travel_course .map_area .search_area .field_group {display:flex; align-items:center; gap:0 5px; padding:6px 10px; background:#fff; border-radius:2em; box-shadow: 4px 5px 13px 0 rgb(0 0 0 / 20%);}
.travel_course .link_wrap {display:flex; gap:0 6px;}
.travel_course .link_wrap a,
.travel_course .link_wrap button {display:flex; gap:0 4px; align-items:center; justify-content:center; padding:10px 0; flex:1; text-align: center; font-size:.938rem; font-weight:300; color:#8d8d8d; letter-spacing:-0.075em; border:1px solid #e5e5e5; border-radius:5px; background:#fff;}
.travel_course .link_wrap.admin_area {position:absolute; left:0; bottom:0; width:100%; padding:.625rem 1.25rem; z-index:1001; background:#f0f0f3;}
.travel_course .link_wrap.admin_area a,
.travel_course .link_wrap.admin_area button {border:none;}
.travel_course .cs_con {padding:1.875rem 1.3rem; position:relative; z-index:100; border-bottom:5px solid #f0f0f3;}
.travel_course .cs_con .search_cate {display: flex;}
.travel_course .cs_con .search_cate li {flex: 1;}
.travel_course .cs_con .search_cate li a {display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .9rem; color:#8d8d8d;}
.travel_course .cs_con .search_cate li a span {white-space:nowrap;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {display:flex; justify-content: center; align-items: center; width:60px; height:60px; background-repeat:no-repeat; background-position:center; background-size:30px; border: 1px solid #f1f3f5; border-radius: 50%;}
.travel_course .cs_con .search_cate li a .cate1 {background-image:url('/images/visitjj/board/map/img_all.png');}
.travel_course .cs_con .search_cate li a .cate2 {background-image:url('/images/visitjj/board/map/img_cate1.png');}
.travel_course .cs_con .search_cate li a .cate3 {background-image:url('/images/visitjj/board/map/img_cate2.png');}
.travel_course .cs_con .search_cate li a .cate4 {background-image:url('/images/visitjj/board/map/img_cate3.png');}
.travel_course .cs_con .search_cate li a .cate5 {background-image:url('/images/visitjj/board/map/img_cate4.png');}
.travel_course .cs_con .search_cate li a .cate1.on {background-image:url('/images/visitjj/board/map/img_all_on.png'); background-color:#7401b8;}
.travel_course .cs_con .search_cate li a .cate2.on {background-image:url('/images/visitjj/board/map/img_cate1_on.png'); background-color:#D471A4;}
.travel_course .cs_con .search_cate li a .cate3.on {background-image:url('/images/visitjj/board/map/img_cate2_on.png'); background-color:#FB685E;}
.travel_course .cs_con .search_cate li a .cate4.on {background-image:url('/images/visitjj/board/map/img_cate3_on.png'); background-color:#30960C;}
.travel_course .cs_con .search_cate li a .cate5.on {background-image:url('/images/visitjj/board/map/img_cate4_on.png'); background-color:#80ACFF;}
.travel_course .course_sub_wrap .cs_con {border: none;}
.travel_course .cs_con.main_con .main_con_img {width:100%;}
.travel_course .cs_con.br_none {border:none; padding-bottom:2rem;}
.travel_course .course_left {position:relative; z-index:101; width:410px; height:100%; overflow:hidden; background-color:#f0f0f0; border-right: 1px solid #f0f0f0;}
.travel_course .course_left .course_left_list {position:absolute; width:100%; left:0; top:56px; height:100%; padding-bottom:4rem; overflow:hidden; overflow-y:auto; background-color:#fff;}
.travel_course .course_left .course_left_list.collapse {height:calc(100% - 24px);}
.travel_course .course_left .course_left_list .cs_con .info_sm {display:flex; gap:0 1.2em; font-size:.9rem; font-weight:300; letter-spacing:-0.06em;}
.travel_course .course_left .course_left_list .cs_con .info_sm.bf_none span::before {display:none;}
.travel_course .course_left .course_left_list .cs_con .info_sm span {position:relative;}
.travel_course .course_left .course_left_list .cs_con .info_sm span:nth-child(1)::before {position:absolute; right:-0.6em; top:52%; transform:translateY(-50%); width:1px; height:60%; background:#e5e5e5; content:'';}
.travel_course .course_left .course_left_list .day_course em {margin-bottom:1rem;}
.travel_course .course_left .course_left_list .cs_con .main_img {border-radius:1em; box-shadow:4px 5px 13px 0 rgb(0 0 0 / 20%);}
.travel_course .course_left .course_left_list .cs_con .course_tit {margin-top:.625rem;}
.travel_course .course_left .course_left_list .cs_con .course_con {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; padding-right:1rem; overflow: hidden; text-overflow: ellipsis; position:relative; margin-top:.75rem; font-size:1.063rem; font-weight:300; color:#8e8e8f; letter-spacing:-0.05em; cursor:pointer;}
.travel_course .course_left .course_left_list .cs_con .course_con.view_more {display: inline-block;}
.travel_course .course_left .course_left_list .cs_con .course_con .more_detail_con {position:absolute; bottom:0; right :0; width:20px; height:20px;}
.travel_course .course_left .course_left_list .cs_con .course_con .more_detail_con::after {content: ""; position: absolute; top:0; right:4px; width: 9px; height: 9px; border: solid #7f7f7f; border-width: 0 2px 2px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transition: all .3s ease; transition: all .3s ease;}
.travel_course .course_left .course_left_list .cs_con .course_con.view_more .more_detail_con::after {transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg);}
.travel_course .course_left header{
position: fixed;
left: 0;
top: 0;
width: 410px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: #fff;
}
.travel_course .course_left header h2 a{
font-family: 'ELAND_Nice_M';
font-weight: normal;
font-size: 1.75rem;
letter-spacing: -.05em;
color:#7401b8;
}
.travel_course .cate.view {margin-top:1.3rem;}
.travel_course .day_course .day_list {margin-bottom:1.625rem; counter-reset: number 0;}
.travel_course .day_course .day_list .day_img::after {position: absolute; top: -1.6em; left: 50%; transform:translateX(-50%); width: 7px; height: 2.2em; z-index: 1; content: "";}
.travel_course .day_course .day_list.day1 .day_img::after {background: url('/resources/jns-img/content/course/img_type1_after.png') no-repeat 100% 50%;}
.travel_course .day_course .day_list.day2 .day_img::after {background: url('/resources/jns-img/content/course/img_type2_after.png') no-repeat 100% 50%;}
.travel_course .day_course .day_list.day3 .day_img::after {background: url('/resources/jns-img/content/course/img_type3_after.png') no-repeat 100% 50%;}
.travel_course .day_course .day_list.day4 .day_img::after {background: url('/resources/jns-img/content/course/img_type4_after.png') no-repeat 100% 50%;}
.travel_course .day_course .day_list.day5 .day_img::after {background: url('/resources/jns-img/content/course/img_type5_after.png') no-repeat 100% 50%;}
.travel_course .day_course .day_list .group:first-of-type .day_img::after {display:none;}
.travel_course .day_course .group {display:flex; flex-wrap:wrap; gap:0 10px; align-items:center; width:100%; text-align:left; margin-bottom:1.3rem;}
.travel_course .day_course .group:last-of-type {margin-bottom:0;}
.travel_course .day_course .group .day_img {position:relative; width:100px;}
.travel_course .day_course .group .day_img_wrap {position:relative; display:block; position:relative; width:100%; height:0; padding-bottom:100%; overflow:hidden;}
.travel_course .day_course .group .day_img img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; border-radius:1em;}
.travel_course .day_course .group .day_tit_wrap {display:flex; flex-direction:column; gap:.375rem 0; width:calc(100% - 135px); color:#010101;}
.travel_course .day_course .group .day_tit_wrap .tit_top {display: flex; align-items: center; gap:3px;}
.travel_course .day_course .group .day_tit_wrap .tt {font-size:1.3rem; font-weight:700; letter-spacing:-0.025em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.travel_course .day_course .group .day_tit_wrap .add {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; font-size:1rem; letter-spacing:-0.05em; font-weight:400;}
.travel_course .tt_cate {position:absolute; left:0; top:0; z-index:100; min-width:fit-content; font-size:.8rem; font-weight:300; color:#fff; border: 1px solid #a222; padding: 2px 6px; border-radius: 1em 0 0 0;}
.travel_course .tt_cate.cate_1 {background-color:var(--map-cate1);}
.travel_course .tt_cate.cate_2 {background-color:var(--map-cate2);}
.travel_course .tt_cate.cate_3 {background-color:var(--map-cate3);}
.travel_course .tt_cate.cate_4 {background-color:var(--map-cate4);}
/* course modal */
.course_sub {width:100%; height:100%; overflow:hidden; overflow-y:auto; background:#fff;}
.course_sub_wrap {display:none; position:absolute; z-index:2001; left:50%; top:50%; transform:translate(-50%, -50%); width:400px; max-width:90%; max-height:90%; border:1px solid #f0f0f3; border-radius:1em; overflow: hidden; background:#fff;}
.course_sub_wrap.active {display:block;}
.course_sub_wrap button.close_course {position:absolute; z-index:100; right:1rem; top:1rem; background:#7401b8; text-indent:-9999px; border-radius:50%;}
.course_sub .sub_img {width:100%; height:220px;}
.course_sub .sub_img img {width:100%; height:100%; object-fit:cover; object-position: center;}
.course_sub .course_sub_con {display:flex; flex-direction:column; gap:.5rem 0;}
.course_sub .course_sub_con .cs_name {font-size:1.625rem; font-weight:700; letter-spacing:-0.075em;}
.course_sub .course_sub_con .cs_info {display:flex; flex-direction:column; gap:.1em 0; margin-bottom:.3em; font-size:1.094rem; font-weight:300; color:#585858; letter-spacing:-0.055em;}
.course_sub .course_sub_con .cs_info .course_con {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; margin-bottom:.3em; line-height:1.4; text-overflow:ellipsis;}
.course_sub .course_sub_con .cs_info .grey {font-size:.95em; font-weight:300; color:#a3a3a3;}
/* course modal - 숙소, 주요명소 (normal) */
.course_sub_wrap--normal {width:400px;}
/* course modal - 추천코스 (recommend) */
.course_sub_wrap--recommend {width:500px; max-height:50%; overflow: hidden; overflow-y: auto;}
.course_sub_wrap--recommend .course_sub {display:flex; flex-direction:column;}
.course_sub_wrap--recommend .course_sub_header {padding:1.5rem 1.25rem 1.125rem; padding-right:3.5rem; border-bottom:1px solid #f0f0f3; background:#fff;}
.course_sub_wrap--recommend .course_sub_header .cs_name {display:block; font-size:1.5rem; font-weight:700; letter-spacing:-0.05em; color:#010101; line-height:1.3; margin-bottom:.4rem;}
.course_sub_wrap--recommend .course_sub_header .cs_info {display:flex; flex-wrap:wrap; gap:0 1.2em; font-size:.95rem; font-weight:400; color:#585858; letter-spacing:-0.03em;}
.course_sub_wrap--recommend .course_sub_header .cs_info span {position:relative;}
.course_sub_wrap--recommend .course_sub_header .cs_info span+span::before {content:''; position:absolute; left:-0.6em; top:52%; transform:translateY(-50%); width:1px; height:60%; background:#e5e5e5;}
.course_sub_wrap--recommend .course_days {flex:1; padding:1.5rem 1.25rem;}
.course_sub_wrap--recommend .course_sub_link {padding:.75rem 1.25rem; border-top:1px solid #f0f0f3; background:#fff;}
.course_days .day_group {margin-bottom:1.75rem;}
.course_days .day_group:last-child {margin-bottom:0;}
.course_days .day_label {display:inline-flex; align-items:center; justify-content:center; min-width:80px; padding:.35rem 1rem; margin-bottom:1rem; font-size:1rem; font-weight:600; letter-spacing:-0.02em; border-radius:2em; background:#fff;}
.course_days .day_group.day1 .day_label {color:#7401b8; border:1px solid #7401b8;}
.course_days .day_group.day2 .day_label {color:#0ec58a; border:1px solid #0ec58a;}
.course_days .course_step_list {display:flex; flex-direction:column; gap:1.25rem;}
.course_days .course_step {display:flex; align-items:center; gap:1rem; position:relative;}
.course_days .course_step:not(:last-child)::after {content:''; position:absolute; left:47px; top:100%; width:2px; height:1.25rem; background-image:linear-gradient(to bottom, #cfcfcf 50%, transparent 50%); background-size:2px 6px; background-repeat:repeat-y;}
.course_days .step_img_wrap {position:relative; flex:0 0 96px; width:96px; height:96px; border-radius:.75rem; overflow:hidden;}
.course_days .step_img_wrap img {width:100%; height:100%; object-fit:cover;}
.course_days .step_num {position:absolute; z-index:2; top:0; left:0; min-width:24px; height:24px; padding:0 6px; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; color:#fff; border-radius:0 0 .5rem 0;}
.course_days .day_group.day1 .step_num {background:#7401b8;}
.course_days .day_group.day2 .step_num {background:#0ec58a;}
.course_days .step_info {flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem;}
.course_days .step_tit {font-size:1.15rem; font-weight:700; color:#010101; letter-spacing:-0.03em; font-style:normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;}
.course_days .step_add {font-size:.95rem; font-weight:400; color:#585858; letter-spacing:-0.03em; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;}
.course_sub .reply_area .point_wrap {font-size:1rem; font-weight:300; letter-spacing:-0.06em;}
.course_sub .reply_area .re_list>li {padding:1.4rem 0; border-bottom:1px solid #e5e5e5;}
.course_sub .reply_area .re_list .re_con {display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; font-size:1rem; font-weight:300; color:#585858; letter-spacing:-.05em; line-height:1.5;}
.course_sub .reply_area .re_list .re_info {margin-top:1rem; font-size:.969rem; font-weight:300; color:#a3a3a3;}
.course_sub .reply_area .point_wrap .grey {color:#999999;}
.course_sub .reply_area .more {margin-top:1rem; text-align:center; font-size:.938rem; color:#585858; letter-spacing:-0.05em;}
/*주변관광지*/
.near_region {display:flex; flex-wrap: nowrap; gap:0 6px; margin-top:1rem; padding-bottom:10px; overflow:hidden; overflow-x:auto;}
.travel_course .near_region .near_img {position:relative; width:125px; overflow:hidden;}
.travel_course .near_region .near_img_wrap {display:block; position:relative; width:100%; height:0; padding-bottom:64%; overflow:hidden;}
.travel_course .near_region .near_img img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; border-radius:.313em;}
.travel_course .near_region .region_name {display:inline-block; margin-top:.5rem; font-size:1rem; font-weight:300; color:#585858; letter-spacing:-0.05em;}
/* 모바일 filter */
.search_header {display:none;}
.m_search_btn {display:none; width:35px; height:35px; border-radius:50%; background:#000;}
/* ===== 카테고리 아코디언 (숙소/주요 명소/추천 코스) ===== */
.area_area {
--cat-bg: #f8f9ff;
--cat-surface: #ffffff;
--cat-ink: #0b1c30;
--cat-text: #45464d;
--cat-line: #c6c6cd;
--cat-line-card: rgba(198, 198, 205, .3);
--cat-line-inner: rgba(198, 198, 205, .2);
--cat-line-row: rgba(198, 198, 205, .1);
--cat-control: #000000;
--cat-r-card: 12px;
--cat-r-check: 4px;
--cat-r-pill: 9999px;
--cat-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .05);
--cat-icon-check: url("https://www.figma.com/api/mcp/asset/9ce868eb-f662-4ada-9ddf-9068499712ac.svg");
}
/* 카테고리 버튼 클릭 시 펼쳐지는 드롭다운 레이어 */
.search_area .area_area .area_layer {width:320px; padding:16px; background:var(--cat-bg); border:1px solid var(--cat-line-card); border-radius:var(--cat-r-card); box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:visible;}
.search_area .area_area.on .area_layer {display:flex; flex-direction:column; gap:12px;}
.area_area .area_layer .btn_area {display:flex; gap:8px; margin-top:4px; border-top:1px solid var(--cat-line-inner); padding-top:12px;}
.area_area .area_layer .btn_area button {height:40px;}
.area_area .area_layer .btn_area .area_close {flex:1; color:#7401b8;}
.area_area .area_layer .btn_area .area_apply {flex:1.5; color:#fff; background:#7401b8; border-radius:.5rem;}
.area_area img {display:block;}
.area_area .group {display:block; overflow:hidden; background:var(--cat-surface); border:1px solid var(--cat-line-card); border-radius:var(--cat-r-card); box-shadow:var(--cat-shadow-card);}
.area_area .group--single .group__head {cursor:default;}
.area_area .group__head {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; cursor:pointer; list-style:none;}
.area_area .group__head::-webkit-details-marker {display:none;}
.area_area .group__lead {display:flex; flex:1 0 0; align-items:center; min-width:0;}
.area_area .group__icon {flex:none; margin-right:8px;}
.area_area .group__title {font-size:16px; font-weight:500; line-height:22px; letter-spacing:-.2px; color:var(--cat-ink);}
.area_area .group__chevron {flex:none; width:12px; height:7.4px; transition:transform .2s ease;}
.area_area .group[open] .group__chevron {transform:rotate(180deg);}
.area_area .group__chevron img {width:12px; height:7.4px;}
.area_area .sub {background:var(--cat-bg); border-top:1px solid var(--cat-line-inner); list-style:none; padding:0; margin:0;}
.area_area .sub__item {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; border-bottom:1px solid var(--cat-line-row);}
.area_area .sub__item:last-child {border-bottom:0;}
.area_area .sub__label {flex:1 0 0; min-width:0; font-size:14px; font-weight:500; line-height:20px; color:var(--cat-text); cursor:pointer;}
.area_area .check {flex:none; width:22px; height:22px; margin:0; background:var(--cat-surface); border:1px solid var(--cat-line); cursor:pointer; appearance:none; -webkit-appearance:none; transition:background-color .12s ease, border-color .12s ease;}
.area_area .check:checked {background-color:var(--cat-control); background-image:var(--cat-icon-check); background-repeat:no-repeat; background-position:center; background-size:20px 20px; border-color:transparent;}
.area_area .check--square {border-radius:var(--cat-r-check);}
.area_area .check--round {border-radius:var(--cat-r-pill);}
.area_area .group__lead .check {margin-right:6px;}
/* ===== "더보기" 버튼 (코스 목록 10개 이후 확장) ===== */
.more_btn {display:flex; justify-content:center; padding-top:16px;}
.more_btn__btn {display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:#7401b8; border:0; border-radius:9999px; color:#fff; font-size:16px; line-height:24px; letter-spacing:-.2px; cursor:pointer; transition:background-color .15s ease;}
.more_btn__btn:hover {background:#c9def7;}
.more_btn__btn:active {background:#b6d0f0;}
.more_btn__label {display:block;}
.more_btn__icon {flex:none; width:12px; height:7px; transition:transform .2s ease;}
.more_btn.is-expanded .more_btn__icon {transform:rotate(180deg);}
/* ============================================================
반응형 (max-width 큰 순서 → 작은 순서)
============================================================ */
@media (max-width:1800px){
.travel_course .map_area .search_area .field_group .field_tt {display:none;}
}
@media (min-width: 769px) and (max-width: 1800px) {
.travel_course .map_area .search_area,
.travel_course.course_detail .search_area .search_form {width:100%; width: 370px; left:20px; transform: unset; top:80px;}
.travel_course.course_detail .search_area .area_area {width:100%;}
.travel_course.course_detail .map_area .search_area .field_group {width:100%; flex-direction:column; gap:.4rem; border-radius: 1em;}
.travel_course.course_detail .map_area .search_area .area_area .input.cate,
.travel_course.course_detail .map_area .search_area .keyword_area,
.travel_course.course_detail .map_area .search_area .keyword_area .input.bg {width:100%; min-width:100%;}
.travel_course.course_detail .map_area .search_area .input .area_input {width:100%;}
.travel_course.course_detail .map_area .search_area .area_area .input.region {width:100%;}
.travel_course.course_detail .course_left .course_left_list {top:200px; height:calc(100% - 150px);}
}
@media (max-width: 1310px){
.travel_course .course_area .area_list .area {width:calc((100% - 40px)/3); max-width:unset;}
.travel_course .con_area {width:92%;}
}
@media (max-width:1199px){
.travel_course .link_wrap.admin_area {display: none;}
.travel_course.course_detail {height:100%; overflow: hidden;}
.travel_course .course_left {overflow:hidden;}
.travel_course .course_area .area_list .area .added_area {padding:1.6rem 2rem 1.375rem;}
}
@media (max-width:1024px){
/*여행코스 공통*/
.search_area .area_area {width:calc((100% - .5rem)/2);}
.travel_course .course_left header h2 a {font-size:1.6rem;}
/*여행코스 필터*/
.search_area .keyword_area {width:100%;}
.search_area .area_area .input,
.search_area .keyword_area .input {width:100%; min-width: auto;}
.search_area .search_form {width:100%;}
.search_area .btn_search {flex:1;}
.display_search {flex:100%; justify-content:flex-end; margin-top:2rem;}
/* 반응형 폰트 */
.travel_course .day_course .group .day_tit_wrap .tt {font-size:1.2rem;}
.travel_course .day_course .group .day_tit_wrap .add {font-size:.95rem;}
.travel_course .day_course .group .day_tit_wrap .tit_top .tt_cate {font-size:.85rem;}
.travel_course .course_left .course_left_list .cs_con .info_sm {font-size:.85rem;}
.travel_course .cs_con .search_cate li a {font-size:.85rem;}
/*여행코스 목록*/
.travel_course .course_list .thumb_li {left:-3em;}
.travel_course .course_list .thumb_li .thumb_img {width:50px; height:50px;}
.travel_course .course_slide_wrapper .tit {font-size:1.6rem;}
.travel_course .course_list ul li .list_wrap .board_con_wrap .board_tit {font-size:1.3rem;}
/*여행코스 팝업 */
.pop_wrap .pop_con_wrap {width:80%;}
.course_sub_wrap--recommend {width:460px;}
/* 추천코스 팝업 활성 시 배경 오버레이 */
body.on_bg {background:rgba(0,0,0,.5);}
body.on_bg::before {content:''; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2000; pointer-events:none;}
body.on_bg .course_sub_wrap--recommend {z-index:2001;}
/* 카테고리 아코디언 폰트 */
.area_area .group__title {font-size:15px; line-height:21px;}
.area_area .sub__label {font-size:13px; line-height:19px;}
}
@media (max-width:859px){
h2.sub_title {margin: 2.5rem auto 2rem; font-size: 2rem;}
}
@media (max-width:768px){
.travel_course .course_left header h2 a {font-size:1.4rem;}
.travel_course .course_left header {width:100%;}
.expand_btn {display:block;}
.travel_course .con_area {width:90%;}
.travel_course .course_left {width:100%; padding-bottom:0; position: fixed; height: 60%; z-index: 100; bottom: 0; background:transparent;}
.travel_course .course_left.collapse {height: 30%;}
.travel_course .course_left .course_left_list {bottom:0; top:auto; height:calc(100% - 24px); padding-bottom:2rem; overflow:unset; border-radius:3rem 3rem 0 0;}
.travel_course .course_left .course_left_list .left_body {height:100%; overflow:hidden; overflow-y:auto;}
.travel_course .course_left .course_left_list::before {display:none;}
.travel_course .cs_con.main_con {display:flex; gap:0 2rem;}
.travel_course .cs_con.main_con .main_con_img {width:50%}
.travel_course .cs_con.main_con .main_con_txt {width:calc(50% - 2rem);}
.search_area_wrap {display:none; position:fixed; width:100%; height:100%; top:0; left:0; overflow:hidden; background:rgba(0,0,0,.3); z-index: 1001;}
.search_area_wrap.active {display:block; }
.travel_course .map_area .search_area .search_header {display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:1rem 1.25rem; border-bottom:1px solid #f0f0f3;}
.travel_course .map_area .search_area .search_header em {font-size:1.15rem; font-weight:600; letter-spacing:-0.02em; color:#010101;}
.travel_course .map_area .search_area .search_header .close {flex:0 0 auto; width:34px; height:34px;}
.travel_course .map_area .search_area .search_body {padding:1.25rem; }
.travel_course .map_area .search_area .area_area .input.region+.area_layer {width:100%;}
.search_area .area_layer .select_area li {width:25%;}
.m_search_btn {display:flex; align-items:center; justify-content:center;}
.m_search_modal.active {display:block;}
.travel_course .map_area .search_area {position:fixed; left:50%; top:20%; transform:translateX(-50%); width:90%; max-width:500px; max-height:90dvh; background:#fff; border-radius:1rem; overflow:hidden; padding:0; box-shadow:none; overflow: visible;}
.travel_course .map_area .search_area .field_group {width:100%; flex-direction:column; align-items:stretch; gap:.5rem 0; padding:0; background:transparent; box-shadow:none; border-radius:0;}
.travel_course .map_area .search_area .area_area,
.travel_course .map_area .search_area .area_area .input,
.travel_course .map_area .search_area .category_depth_wrap,
.travel_course .map_area .search_area .keyword_area,
.travel_course .map_area .search_area .keyword_area .input.bg {width:100%; max-width:100%;}
.travel_course input[type="file"], .travel_course select, .travel_course .input {min-width:auto;}
.travel_course .day_course .day_wrap {display:flex; flex-wrap:wrap; gap:0 3rem;}
.travel_course .day_course .group .day_img {width:100px;}
.travel_course .day_course .group .day_tit_wrap {width: calc(100% - 110px);}
.course_sub_wrap {position:fixed; width:100%; max-width:100%; left:0; top:50%; right:auto; transform:translateY(-50%); max-height:90dvh; border:none;}
.course_sub_wrap--normal,
.course_sub_wrap--recommend {width:90%; left:50%; top:50%; transform: translate(-50%,-50%);}
.course_sub_wrap--recommend .course_sub {max-height:90dvh;}
.course_sub_wrap--recommend .course_sub_header {padding:1.25rem 3.5rem 1rem 1.25rem;}
.course_sub_wrap--recommend .course_sub_header .cs_name {font-size:1.35rem;}
.course_sub_wrap--recommend .course_days {padding:1.25rem;}
.course_sub_wrap button.close_course {width:50px; height:50px; top:0; right:0; border-radius:0; }
.course_sub .sub_img {height:200px;}
.travel_course .course_slide_wrapper .tit {margin-bottom:.5rem; font-size:1.5rem;}
.travel_course .course_slide_wrapper .course_name {font-size:1.3rem;}
.travel_course .tag_wrapper .tag,
.travel_course .cate {font-size:.9rem;}
.course_wrapper .circle_btn {width:40px; height:40px;}
.travel_course .course_list ul li {padding:1.933rem 0;}
.travel_course .course_list ul li .list_wrap .board_con_wrap .board_tit {font-size:1.25rem;}
.travel_course .course_list ul li .list_wrap .board_con_wrap .board_con .con {font-size:1rem;}
.travel_course .course_area .area_list .area {width:calc((100% - 20px)/2);}
.travel_course .course_area .area_list .area .added_area {padding:1.3rem 1.3rem 1.375rem;}
.travel_course .course_area .area_list .area .day_marker {width:30px; height:30px; line-height:30px;}
.course_sub .course_sub_con .cs_name {font-size:1.5rem;}
/* 반응형 폰트 */
.travel_course .day_course .group .day_tit_wrap .tt {font-size:1.15rem;}
.travel_course .day_course .group .day_tit_wrap .add {font-size:.9rem;}
.travel_course .cs_con .search_cate {width:100%;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:40px; height:40px; background-size:22px;}
.day_wrap:only-child .day_list_wrap,
.day_wrap > .day_list_wrap:only-child {width: 100%;}
/* 카테고리 아코디언 여백/폰트 */
.area_area .group__head {padding:14px;}
.area_area .sub__item {padding:10px 20px;}
.area_area .group__title {font-size:14px; line-height:20px;}
.area_area .sub__label {font-size:13px; line-height:18px;}
/* 모바일 카테고리 버튼 시각적 강조 */
.travel_course .map_area .search_area .area_area .input.cate {background-color:#f4ebfc; background-image:none; border:1px solid #7401b8;}
.travel_course .map_area .search_area .area_area .input.cate .area_input em {color:#7401b8; font-weight:600;}
.travel_course .map_area .search_area .area_area .input.cate .area_input::after {border-color:#7401b8;}
.travel_course .map_area .search_area .area_area.on .input.cate {background-color:#7401b8;}
.travel_course .map_area .search_area .area_area.on .input.cate .area_input em {color:#fff;}
.travel_course .map_area .search_area .area_area.on .input.cate .area_input::after {border-color:#fff;}
/* search_cate 아이콘 확대 + 부모 좌우 여백 축소 */
.travel_course .cs_con.main_con {padding-left:.5rem; padding-right:.5rem;}
.travel_course .cs_con .search_cate {justify-content:space-around; gap:0;}
.travel_course .cs_con .search_cate li {flex:0 0 auto;}
.travel_course .cs_con .search_cate li a {gap:6px 0; font-size:.9rem;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:56px; height:56px; background-size:30px;}
}
@media (min-width: 600px) and (max-width: 768px) {
.travel_course .course_left .course_left_list .cs_con .course_con {display:block; pointer-events: none; cursor: default;}
.travel_course .course_left .course_left_list .cs_con .course_con .more_detail_con {display:none;}
}
@media (max-width:600px){
/* 코스공통 */
.travel_course .cs_con {padding:1rem;}
.travel_course .con_wrap {gap:.8rem; margin-top: .8rem;}
.travel_course .course_left header h2 a {font-size:1.3rem;}
/* 코스목록 */
.travel_course .course_list ul li {padding:1rem 0;}
.travel_course .course_list ul li .list_wrap {flex-direction:column; gap:1rem;}
.travel_course .course_list ul li .list_wrap .board_img {flex:0 0 auto; width:100%;}
.travel_course .course_list ul li .list_wrap .board_con_wrap .board_tit {font-size:1.2rem;}
.travel_course .course_list ul li .list_wrap .board_con_wrap .board_con {margin-top:.5rem;}
.travel_course .course_list ul li .list_wrap .board_con_wrap .board_con .con {font-size:.9rem;}
.travel_course .course_list .thumb_li {position:relative; left:auto; margin-top:.8rem;}
.travel_course .course_list ul li .list_wrap .board_con_wrap {width:100%;}
.travel_course .course_slide_wrapper {margin-bottom:2rem;}
.travel_course .course_slide_wrapper .course_name {font-size:1.2rem;}
.display_search {margin-top:1rem;}
/* 코스등록 */
.travel_course .course_area .area_list {gap:20px 10px;}
.travel_course .course_area .area_list .area {width:calc((100% - 10px)/2);}
.course_wrapper .circle_btn {width:30px; height:30px;}
/* 코스 자동검색 */
.auto_search button.search_list {padding:.667rem 1rem;}
.auto_search button.search_list:first-of-type {padding:1rem 1rem .667rem}
.auto_search button.search_list:last-of-type {padding:.667rem 1rem 1rem;}
.auto_search button.search_list img {width:32px; height:32px;}
/* 코스팝업 */
.pop_wrap .pop_con_wrap {width:92%;}
.pop_wrap .pop_con_wrap .pop_con .form_group .form_tit {min-width:60px;}
/* 코스상세 */
.travel_course .cs_con.main_con {gap:1rem; align-items:center;}
.travel_course .cs_con.main_con .main_con_img {width:30%;}
.travel_course .cs_con.main_con .main_con_txt {width:calc(70% - 1rem);}
.travel_course .day_course .day_wrap {gap:2rem;}
.travel_course .course_left .course_left_list .cs_con .course_con {font-size:1rem;}
.travel_course .day_course .group .day_tit_wrap .tt {font-size:1.2rem;}
.travel_course .course_left .course_left_list {padding-bottom:0;}
.travel_course .cate.view {margin-top:.3rem;}
.course_sub .course_sub_con .cs_name {font-size:1.4rem;}
.course_sub .course_sub_con .cs_info {font-size:1rem;}
/* 추천코스 팝업 */
.course_sub_wrap--recommend .course_sub_header {padding:1.125rem 3.25rem 1rem 1.125rem;}
.course_sub_wrap--recommend .course_sub_header .cs_name {font-size:1.25rem;}
.course_sub_wrap--recommend .course_sub_header .cs_info {font-size:.9rem;}
.course_sub_wrap--recommend .course_days {padding:1.125rem;}
.course_days .day_group {margin-bottom:1.5rem;}
.course_days .day_label {min-width:70px; padding:.3rem .85rem; font-size:.95rem;}
.course_days .course_step_list {gap:1.125rem;}
.course_days .course_step {gap:.85rem;}
.course_days .step_img_wrap {flex:0 0 84px; width:84px; height:84px;}
.course_days .step_tit {font-size:1.05rem;}
.course_days .step_add {font-size:.9rem;}
.course_days .course_step:not(:last-child)::after {left:41px; height:1.125rem;}
/* 반응형 폰트 */
.travel_course .day_course .group .day_tit_wrap .tt {font-size:1.05rem;}
.travel_course .day_course .group .day_tit_wrap .add {font-size:.85rem;}
.travel_course .day_course .group .day_tit_wrap .tit_top .tt_cate {font-size:.75rem;}
.travel_course .course_left .course_left_list .cs_con .info_sm {font-size:.8rem;}
.travel_course .cs_con .search_cate li a {font-size:.8rem;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:36px; height:36px; background-size:20px;}
.travel_course .link_wrap a,
.travel_course .link_wrap button {font-size:.85rem;}
.travel_course .map_area .search_area {width:92%;}
.travel_course .map_area .search_area .field_group {flex-direction:column; align-items:flex-start; gap:.3rem 0;}
.travel_course .map_area .search_area .area_area .input.cate {width:100%;}
.travel_course .map_area .search_area .area_area {width:100%;}
.travel_course .map_area .search_area .keyword_area {width:100%;}
.travel_course .map_area .search_area .keyword_area .input.bg {width:100%;}
/* search_cate 아이콘 크기 */
.travel_course .cs_con.main_con {padding-left:.5rem; padding-right:.5rem;}
.travel_course .cs_con .search_cate li a {font-size:.85rem;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:52px; height:52px; background-size:28px;}
}
@media (max-width:480px){
.travel_course .course_left .course_left_list {border-radius:1.5rem 1.5rem 0 0;}
.travel_course .course_left .course_left_list .cs_con .info_sm {margin-top:0;}
.travel_course .day_course .day_wrap {flex-direction:column; gap:0;}
.travel_course .day_course .day_wrap .day_list_wrap {width:100%;}
.travel_course .day_course .day_list {width:100%;}
.travel_course .course_left .course_left_list .cs_con .info_sm {display:none;}
.search_area .area_area .area_layer {width: 280px;}
.course_sub .course_sub_con .cs_name {font-size:1.3rem;}
.pop_wrap .pop_header, .search_header {padding:.7rem 1.2rem; font-size:1.3rem;}
.travel_course .map_area .search_area .search_body {padding:1.2rem;}
.travel_course .course_slide_wrapper .swiper {padding:0 4px;}
.pop_wrap .pop_con_wrap .pop_con {padding:1.2rem;}
.pop_wrap .pop_con_wrap .pop_con .bbs_flie {flex-direction:column; align-items:flex-start; gap:4px 0;}
.pop_wrap .pop_con_wrap .pop_con .bbs_flie input {width:100%;}
.travel_course .search_area {margin-bottom:.4rem;}
.travel_course .map_area .search_area .btn_search {padding:1rem; text-indent: -9999px;}
.auto_search button.search_list .search_info {gap:4px 0;}
.travel_course button.close {width:36px; height:36px;}
.travel_course .course_area .area_list .area .added_area {padding:1.3rem .8rem 1rem;}
.travel_course .link_wrap.admin_area {padding:.625rem .8rem;}
.travel_course .course_area .area_list .check_list {flex-direction:column; align-items:center; gap:8px 0; padding:.8rem 0;}
.course_sub .sub_img {height:160px;}
/* 반응형 폰트 */
.travel_course .day_course .group .day_tit_wrap .tt {font-size:1rem;}
.travel_course .day_course .group .day_tit_wrap .add {font-size:.8rem;}
.travel_course .day_course .group .day_tit_wrap .tit_top .tt_cate {font-size:.7rem; padding:1px 5px;}
.travel_course .cs_con .search_cate li a {font-size:.75rem;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:34px; height:34px; background-size:18px;}
/* 추천코스 팝업 */
.course_sub_wrap--recommend .course_sub_header {padding:1rem 3rem 1rem 1rem;}
.course_sub_wrap--recommend .course_sub_header .cs_name {font-size:1.15rem;}
.course_sub_wrap--recommend .course_days {padding:1rem;}
.course_days .day_group {margin-bottom:1.25rem;}
.course_days .day_label {min-width:64px; padding:.25rem .75rem; font-size:.9rem; margin-bottom:.75rem;}
.course_days .course_step_list {gap:1rem;}
.course_days .course_step {gap:.75rem;}
.course_days .step_img_wrap {flex:0 0 72px; width:72px; height:72px;}
.course_days .step_num {min-width:20px; height:20px; font-size:.72rem;}
.course_days .step_tit {font-size:1rem;}
.course_days .step_add {font-size:.85rem;}
.course_days .course_step:not(:last-child)::after {left:35px; height:1rem;}
/* 카테고리 아코디언 여백/폰트 */
.area_area .group__head {padding:12px;}
.area_area .sub__item {padding:9px 16px;}
.area_area .group__title {font-size:13px; line-height:19px;}
.area_area .sub__label {font-size:12px; line-height:17px;}
/* search_cate 아이콘 크기 */
.travel_course .cs_con.main_con {padding-left:.25rem; padding-right:.25rem;}
.travel_course .cs_con .search_cate li a {font-size:.8rem;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:48px; height:48px; background-size:26px;}
/* 더보기버튼 */
.more_btn__btn {padding:8px 16px;}
}
@media (max-width:350px){
.travel_course .course_area .area_list .area {width:100%;}
.search_area .area_layer .select_area li {width:50%;}
/* 추천코스 팝업 */
.course_sub_wrap--recommend .course_sub_header .cs_name {font-size:1.05rem;}
.course_days .step_img_wrap {flex:0 0 64px; width:64px; height:64px;}
.course_days .step_tit {font-size:.95rem;}
.course_days .step_add {font-size:.8rem; -webkit-line-clamp:3;}
.course_days .course_step:not(:last-child)::after {left:31px; height:1rem;}
/* search_cate 아이콘 크기 */
.travel_course .cs_con.main_con {padding-left:0; padding-right:0;}
.travel_course .cs_con .search_cate li a .cate_img_wrap {width:44px; height:44px; background-size:24px;}
}
@media (prefers-reduced-motion: reduce) {
.area_area .group__chevron,
.area_area .check {transition:none !important;}
}
.travel_course {
--vjtm-accent: #7401b8;
--vjtm-tint : rgba(116, 1, 184, .09);
--vjtm-tint-w: rgba(116, 1, 184, .05);
}
.travel_course .map_area {
background-image: none !important;
background-color: #e9e7e2;
}
.travel_course .map_area .vjtm-map-canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.travel_course .course_left_list .day_course .group {
position: relative;
}
.travel_course .course_left_list .day_course .group::before {
content: '';
position: absolute;
z-index: -1;
left: -.6rem;
right: -.6rem;
top: -.55rem;
bottom: -.55rem;
border-radius: .6rem;
border-left: 3px solid transparent;
background-color: transparent;
transition: background-color .18s ease, border-left-color .18s ease;
}
.travel_course .course_left_list .day_course .group:hover::before {
background-color: var(--vjtm-tint-w);
}
.travel_course .course_left_list .day_course .group.on::before {
background-color: var(--vjtm-tint);
border-left-color: var(--vjtm-accent);
}
.travel_course .course_left_list .day_course .group.on .day_tit_wrap .tt {
color: var(--vjtm-accent);
}
.travel_course .course_left_list .day_course .group:focus-visible {
outline: 3px solid var(--vjtm-accent);
outline-offset: 4px;
border-radius: .4rem;
}
.travel_course .course_left .course_left_list .day_course .day_list .day_img::after {
display: none;
}
.travel_course .day_course .group .day_img_wrap {
background-color: #f0f0f3;
border-radius: 1em;
}
.travel_course .day_course .group .day_img_wrap.vjtm-noimg::after,
.course_days .step_img_wrap.vjtm-noimg::after {
content: '이미지 준비중';
position: absolute;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%);
text-align: center;
font-size: .72rem;
font-weight: 300;
letter-spacing: -.05em;
color: #b6b1bf;
}
.travel_course .course_left_list .vjtm-empty-msg {
padding: 3.75rem 1.3rem;
text-align: center;
font-size: 1.02rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: -.05em;
color: #8d8d8d;
}
.travel_course .map_area .vjtm-map-fail-msg {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%, -50%);
width: 90%;
max-width: 420px;
padding: 1.6rem 1.75rem;
text-align: center;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: -.05em;
color: #585858;
background: #fff;
border-radius: 1rem;
box-shadow: 4px 5px 13px 0 rgb(0 0 0 / 20%);
}
.travel_course .map_area .vjtm-map-fail-msg strong {
display: block;
margin-bottom: .4rem;
font-size: 1.15rem;
font-weight: 500;
color: #010101;
}
.travel_course .map_area .vjtm-map-fail-msg.is-error strong {
color: #d0342c;
}
@media (min-width: 769px) {
.travel_course .map_area .vjtm-map-fail-msg {
left: calc(50% + 205px);
}
}
.travel_course .map_area .search_area .auto_search button.search_list img {
border-color: var(--vjtm-accent);
}
.travel_course .map_area .search_area .auto_search button.search_list .vjtm-noimg {
flex: 0 0 50px;
box-sizing: border-box;
width: 50px;
height: 50px;
background: #f0f0f3;
border: 2px solid var(--vjtm-accent);
border-radius: 50px;
}
.travel_course .map_area .search_area .auto_search.is-empty .no_con_area {
display: block;
padding: 1.4rem 2rem;
text-align: center;
font-size: 1rem;
font-weight: 300;
letter-spacing: -.05em;
color: #8d8d8d;
}
.travel_course .map_area .search_area .auto_search button.search_list:focus-visible {
background: #f1f3f5;
outline: 2px solid var(--vjtm-accent);
outline-offset: -2px;
}
.travel_course .cs_con .search_cate li .vjtm-cat-btn:focus-visible,
.travel_course .map_area .search_area .btn_search:focus-visible,
.travel_course .map_area .search_area .category_depth:focus-visible,
.travel_course .course_sub_wrap button.close_course:focus-visible,
.travel_course .course_left header .m_search_btn:focus-visible {
outline: 3px solid var(--vjtm-accent);
outline-offset: 2px;
}
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap {
transition: background-color .18s ease;
}
@media (max-width: 768px) {
.travel_course .course_left_list .vjtm-empty-msg {
padding: 2.5rem 1.3rem;
}
}
@media (max-width: 600px) {
.travel_course .course_left_list .day_course .group::before {
left: -.45rem;
right: -.45rem;
}
.travel_course .map_area .vjtm-map-fail-msg {
padding: 1.25rem 1.25rem;
font-size: .95rem;
}
}
@media (prefers-reduced-motion: reduce) {
.travel_course .course_left_list .day_course .group::before,
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap {
transition: none;
}
}
.travel_course button.vjtm-close {
width: 40px;
height: 40px;
border-radius: 50%;
}
.travel_course button.vjtm-close::before,
.travel_course button.vjtm-close::after {
position: absolute;
top: 22.5%;
left: 50%;
width: 2px;
height: 55%;
background: #fff;
content: "";
}
.travel_course button.vjtm-close::before { transform: rotate(45deg); }
.travel_course button.vjtm-close::after { transform: rotate(-45deg); }
.travel_course .map_area .search_area .search_header button.vjtm-close {
position: relative;
background-color: #000;
}
@media (max-width: 768px) {
.travel_course .map_area .search_area .search_header .vjtm-close {
flex: 0 0 auto;
width: 34px;
height: 34px;
}
}
@media (max-width: 480px) {
.travel_course button.vjtm-close { width: 36px; height: 36px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.travel_course .map_area .search_area .area_area {
width: 100%;
}
}
@media (max-width: 480px) {
.travel_course .map_area .search_area .btn_search.vjtm-noicon {
text-indent: 0;
padding: 0 1rem;
font-size: .95rem;
}
}
.travel_course .auto_search button.search_list.is-focus {
background: #f1f3f5;
}
.travel_course .cs_con .search_cate li .vjtm-cat-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: .9rem;
color: #8d8d8d;
}
.travel_course .cs_con .search_cate li .vjtm-cat-btn span {
white-space: nowrap;
}
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
border: 1px solid #f1f3f5;
border-radius: 50%;
}
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate1 { background-image: url('/images/visitjj/board/map/img_all.png'); }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate2 { background-image: url('/images/visitjj/board/map/img_cate1.png'); }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate3 { background-image: url('/images/visitjj/board/map/img_cate2.png'); }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate4 { background-image: url('/images/visitjj/board/map/img_cate3.png'); }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate1.on { background-image: url('/images/visitjj/board/map/img_all_on.png'); background-color: #7401b8; }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate2.on { background-image: url('/images/visitjj/board/map/img_cate1_on.png'); background-color: #D471A4; }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate3.on { background-image: url('/images/visitjj/board/map/img_cate2_on.png'); background-color: #FB685E; }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate4.on { background-image: url('/images/visitjj/board/map/img_cate3_on.png'); background-color: #30960C; }
@media (max-width: 1024px) {
.travel_course .cs_con .search_cate li .vjtm-cat-btn { font-size: .85rem; }
}
@media (max-width: 768px) {
.travel_course .cs_con .search_cate li .vjtm-cat-btn { gap: 6px 0; font-size: .9rem; }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap { width: 56px; height: 56px; background-size: 30px; }
}
@media (max-width: 600px) {
.travel_course .cs_con .search_cate li .vjtm-cat-btn { font-size: .85rem; }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap { width: 52px; height: 52px; background-size: 28px; }
}
@media (max-width: 480px) {
.travel_course .cs_con .search_cate li .vjtm-cat-btn { font-size: .8rem; }
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap { width: 48px; height: 48px; background-size: 26px; }
}
@media (max-width: 350px) {
.travel_course .cs_con .search_cate li .vjtm-cat-btn .cate_img_wrap { width: 44px; height: 44px; background-size: 24px; }
}
.travel_course .area_area {
--cat-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M15.2587 5.99125C15.7467 6.47937 15.7467 7.27063 15.2587 7.75875L9.00875 14.0087C8.52063 14.4967 7.72937 14.4967 7.24125 14.0087L4.74125 11.5087C4.26753 11.0183 4.27431 10.2386 4.75648 9.75648C5.23864 9.27431 6.01828 9.26753 6.50875 9.74125L8.125 11.3575L13.4913 5.99125C13.9794 5.50327 14.7706 5.50327 15.2587 5.99125V5.99125'/%3E%3C/svg%3E");
--cat-icon-dash : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='4.5' y='9' width='11' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
}
.travel_course .area_area .check:indeterminate {
background-color: var(--cat-control);
background-image: var(--cat-icon-dash);
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
border-color: transparent;
}
.travel_course .area_area .check:focus-visible,
.travel_course .area_area .group__head:focus-visible,
.travel_course .area_area .btn_area button:focus-visible {
outline: 3px solid var(--vjtm-accent);
outline-offset: 2px;
}
.travel_course .area_area .area_layer .vjtm-cate-groups {
display: flex;
flex-direction: column;
gap: 12px;
max-height: clamp(120px, calc(100vh - 250px), 460px);
overflow-y: auto;
}
@media (max-width: 768px) {
.travel_course .area_area .area_layer .vjtm-cate-groups {
max-height: clamp(120px, calc(80vh - 251px), 460px);
}
}
.travel_course .area_area .area_layer .vjtm-cate-groups > * {
flex: 0 0 auto;
}
.travel_course .area_area .group__title {
cursor: inherit;
}
.travel_course .area_area .group--single .group__title {
cursor: pointer;
}
.course_days .day_group .day_label {
color: var(--vjtm-accent);
border: 1px solid var(--vjtm-accent);
}
.course_days .day_group .step_num {
background: var(--vjtm-accent);
}
.course_days .step_img_wrap {
background-color: #f0f0f3;
}