@charset "utf-8";
/* 팝업기본설정 */
:root[user-theme="light"] {
	--st_icon_bg: #ededed;
	--st_row_line: rgba(0,0,0,0.07);
	--st_label_color: #111;
	--st_sub_color: #8e8e93;
	--st_sec_title: #000;
	--mode_line: #0083d3;
	--mode_cbg: #f0f9ff;
	--map_h_bg:#eee;
}

:root[user-theme="dark"] {
	--st_icon_bg: #232e3d;
	--st_row_line: rgba(255,255,255,0.06);
	--st_label_color: #f2f2f7;
	--st_sub_color: #8e8e93;
	--st_sec_title: #fff;
	--mode_line: #3d6781;
	--mode_cbg: #071b2f;
	--map_h_bg:#333;
}

/* 1. 🚀 위성 지도: 맵 전체 필터 끄기 */
html[user-theme="dark"] .map_kakao_api.is-satellite,
html[user-theme="dark"] #challenge-user-map.is-satellite {
	filter: none !important;
	-webkit-filter: none !important;
}

/* 2. 🚀 일반 지도: 맵 전체를 반전 */
html[user-theme="dark"] .map_kakao_api:not(.is-satellite) {
	filter: invert(100%) hue-rotate(180deg) brightness(90%) contrast(85%) !important;
	-webkit-filter: invert(100%) hue-rotate(180deg) brightness(90%) contrast(85%) !important;
}

/* 3. 🚀 맵 안의 요소들 알맹이만 쏙쏙 역반전(원상복구) */
/* 🚨 주의: .mapboxgl-marker 에 필터를 걸면 파란점이 증발하므로 절대 추가 금지! */
html[user-theme="dark"] .map_kakao_api:not(.is-satellite) .custom-marker,
html[user-theme="dark"] .map_kakao_api:not(.is-satellite) .trbx,
html[user-theme="dark"] .map_kakao_api:not(.is-satellite) img[src*="marker"] {
	filter: invert(100%) hue-rotate(180deg) !important;
	-webkit-filter: invert(100%) hue-rotate(180deg) !important;
}

/* 4. 🚀 라벨 디자인 공통 세팅 (다크 그레이 배경 + 순백색 글씨) */
html[user-theme="dark"] .map_custom_label {
	background-color: #2a2a2d !important;
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,0.2) !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.7) !important;
}

/* 4-1. 일반 지도일 때: 라벨에 역반전 적용 (부모 지도의 반전을 상쇄시켜 색상 유지) */
html[user-theme="dark"] .map_kakao_api:not(.is-satellite) .map_custom_label {
	filter: invert(100%) hue-rotate(180deg) !important;
	-webkit-filter: invert(100%) hue-rotate(180deg) !important;
}

/* 4-2. 위성 지도일 때: 역반전 금지 (어차피 위성 지도는 반전이 안 되어 있으므로) */
html[user-theme="dark"] .map_kakao_api.is-satellite .map_custom_label {
	filter: none !important;
	-webkit-filter: none !important;
}
/**/

.st_wrap {padding:0; position: relative; inset-inline: 0; margin: auto; max-width: 500px;}
.st_section {margin: 0 0 20px 0; padding-bottom:20px;border-bottom: 1px solid var(--st_row_line);}
.st_section.mode {margin: 20px 0; padding-bottom: 20px;}
.st_section .mode_btn {border:1px dashed var(--mode_line); font-size:0; line-height:1; display:inline-block; padding:8px 15px; border-radius:30px; position:absolute; top:50%; inset-inline-end:0; transform:translateY(-50%); width:110px; text-align:center;background:var(--mode_cbg); cursor:pointer;}
.st_section .mode_btn i,
.st_section .mode_btn span {display:inline-block; vertical-align:middle; line-height:1; color:var(--default_color);}
.st_section .mode_btn i { font-size:14px; color:var(--mode_icon); display:none; padding-inline-end: 5px;}
.st_section .mode_btn span { font-size:11px; font-weight:600;}
.st_sec_title {font-size: 15px; font-weight: 600; color: var(--st_sec_title); padding: 5px 0px 8px 5px; text-transform: uppercase; letter-spacing:-0.05em; position:relative;}
.st_group {}
.st_group.text {font-size:12px; color:var(--default_tdown); padding:0 7px;}
.st_group.text ver {color:red; display:inline-block; padding-inline-start:5px;}
.st_row {padding: 10px 5px; position: relative; font-size:0;}
.st_row:last-child {border-bottom: 0;}
.st_row_icon {display:inline-block; vertical-align:middle; width: 32px; height: 32px; border-radius: 100%; position:relative; background:var(--st_icon_bg);}
.st_row_icon i {font-size: 20px; color: var(--default_color); font-variation-settings: 'FILL' 1, 'wght' 300; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}


.st_row_label {display:inline-block; vertical-align:middle; width:calc(100% - 32px); padding-inline-start:15px; }
.st_row_label .lb_main {font-size: 13px; color: var(--st_label_color); font-weight: 500; line-height: 1.2;}
.st_row_label .lb_sub {font-size: 10px; color: var(--st_sub_color); margin-top: 2px; line-height: 1.3;}



:root[user-theme="light"] {
	--list_grp_default:#fff2f2;
	--list_grp_view:#fff;
	--list_grp_line:#e9e9e9;
	--list_rd_btn:#333;
}

:root[user-theme="dark"] {
	--list_grp_default:rgba(109,27,27,0.3);
	--list_grp_view:rgba(0,0,0,0.1);
	--list_grp_line:rgba(255,255,255,0.05);
	--list_rd_btn:#27405f;
}

.control_box {margin-bottom:10px; font-size:0; position:relative;}
.control_box .list_count {font-size:12px; color:var(--default_color); padding-inline-start:5px;}
.control_box button {position:absolute; top:-3px; font-size:11px; line-height:28px; padding:0; border:0; border-radius:0px; /*background:var(--list_rd_btn);*/ color:var(--default_rev); cursor:pointer; background: transparent;}

.control_box button.btn_noti_read_all {inset-inline-end:0;}
.control_box button.btn_noti_del_all {inset-inline-end:70px;}

ul.noti_box {}
ul.noti_box li {position:relative; margin-bottom:5px; border:1px solid transparent; padding:15px; border-radius:7px;}
ul.noti_box li.not {background:var(--list_grp_default); border-color:var(--list_grp_line);}
ul.noti_box li.view {background:var(--list_grp_view); border-color:var(--list_grp_line);}
ul.noti_box li.none {margin:0; border:0; padding:50px 0; text-align:center; font-size:11px; color:var(--default_rev);}
ul.noti_box li .nb_kind {position:relative; font-size:14px; color:var(--default_rev); font-weight:600; }
ul.noti_box li .nb_kind span {position:absolute; top:50%; transform:translateY(-50%); line-height:1;}
ul.noti_box li .nb_kind .date {inset-inline-end:30px; color:var(--default_tdown); font-weight:300; font-size:8px;}
ul.noti_box li .nb_kind .del {inset-inline-end:-5px; padding:5px; color:var(--default_tdown);}
ul.noti_box li .nb_kind .del i {color:var(--default_tdown); font-weight:300; font-size:17px;}
ul.noti_box li .nb_con {font-size:12px; line-height:160%; color:var(--default_tdown); font-weight:400; margin:7px 0 0 0; position:relative;}
ul.noti_box li .nb_con a {position:absolute; top:0; inset-inline-start:0; width:100%; height:100%; font-size:0;}

:root {
	--pop_wd: 600px;
	--pop_chk_area: 60px;
}

:root[user-theme="light"] {
	--pop_cbg: #fafafa;
	--pop_cbg_ck: rgba(255,255,255,0.05);
	--pop_line: #fafafa;
	--pop_txt: #333;
	--pop_txt2: #c9c9c9;
	--sy_color_y:#3a92f1;
	--sy_color_n:#ff4b4b;
}

:root[user-theme="dark"] {
	--pop_cbg: #03203b;
	--pop_cbg_ck: rgba(0,0,0,0.05);
	--pop_line: rgba(255,255,255,0.03);
	--pop_txt: #eee;
	--pop_txt2: #eee;
	--sy_color_y:#00c0fb;
	--sy_color_n:#ff005b;
}

.pop_open {}
.pop_open i {}
.pop_open i:before {content:'local_parking';}

.pop_slide_mask{position:fixed; top:0; inset-inline-start:0; max-width:100vw; width:100%; height:100%; background:rgba(0,0,0,0.75); z-index:10001; transition:all .35s;opacity: 0;visibility: hidden;}
.pop_slide_mask.show	{opacity: 1; visibility:visible;}

.pop_slide_mask .popup_slide_zone{position:absolute; bottom:0; inset-inline: 0; margin: 0 auto; width:100%;transition:all .3s; }
.pop_slide_mask .con_pos{position:relative; bottom:0; inset-inline: 0; margin:0 auto; transform:translateY(100%); max-width:var(--pop_wd); width:100%;transition:all .3s;}
.pop_slide_mask .con_pos.pop_show	{transform:translateY(0);}
.pop_slide_mask > i	{position:absolute; top:0; inset-inline-end:0; padding: 20px; font-size:20px; z-index:1; transition:all .3s; color:#333; cursor:pointer;}
.pop_slide_mask > i:hover	{transform:rotate(270deg); transition:all .3s; }
.pop_slide_mask .con_pos .psmc_wrp{position:relative; top:0; inset-inline:0; width:100%; margin:0 auto 60px auto; overflow:hidden;border-radius:10px 10px 0 0 ; }
.pop_slide_mask .con_pos .psmc_wrp:after	{content:""; display:block; padding-top:70%;}
.pop_slide_mask .con_pos .psmc_wrp > ul{position:absolute;width:100%; height:100%;background:#fff;}
.pop_slide_mask .con_pos .psmc_wrp > ul li{position:absolute;inset-inline-start:0;top:0;width:100%; height:100%;background:#fafafa; padding:0; display:none;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_info{position:absolute; top:20px; inset-inline-end:20px; z-index:1;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_info i {font-size:15px; color:#fff;text-shadow: 0 0 1px #000;}
.pop_slide_mask .con_pos .psmc_wrp > ul li > img{width:100%; }
.pop_slide_mask .con_pos .psmc_wrp > ul li > h3 {position:absolute; top:-22px; inset-inline-start:20px; font-size:11px; font-weight:normal;}
.pop_slide_mask .con_pos .psmc_wrp > ul li.on{display:block;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .bg_thum{position:absolute; top:0; inset-inline-start:0; width:100%; height:100%;background-size:cover !important; background-position:center center !important;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_btn{position:absolute; bottom:70px; left:50%; transform:translateX(-50%);  border-radius:35px; overflow:hidden;background:#333; transition:all .3s;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_btn:after	{content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:100%; transition:all .3s;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_btn:hover:after	{background:rgba(0,0,0,0.1); transition:all .3s;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_btn a{display:block; min-width:180px; padding:18px 15px; color:#fff; text-align:center;font-family: 'GmSansM'; font-size:16px; line-height:100%; position:relative; z-index:1;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_full{position:absolute; top:0; inset-inline-start:0; width:100%; height:100%; transition:all .3s;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_full a{display:block; font-size:0; width:100%; height:100%; background:transparent; transition:all .3s; z-index:1;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .link_full a:hover	{background:rgba(0,0,0,0.2); transition:all .3s;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .txt	{padding:50px; text-align:justify; font-size:13px; line-height:150%;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .txt h3	{display:inline-block; width:100%; line-height:110%; font-size:20px; font-family:var(--neo); font-weight:500; color:#000; padding-bottom:20px; letter-spacing:-0.05em;}
.pop_slide_mask .con_pos .psmc_wrp > ul li .txt img	{width:100% !important; height:auto !important;}


.pop_slide_mask .con_pos .sBtn	{position:absolute; top:50%; transform:translateY(-50%) rotate(45deg); width:20px; height:20px; border:1px solid #ddd; font-size:0; transition:all .3s;}
.pop_slide_mask .con_pos .sBtn.prev	{inset-inline-start:-50px; border-width:0 0 1px 1px;}
.pop_slide_mask .con_pos .sBtn.next	{inset-inline-end:-50px; border-width:1px 1px 0 0;}
.pop_slide_mask .con_pos .sBtn.prev:hover,
.pop_slide_mask .con_pos .sBtn.next:hover	{border-color:#ddd;}
.pop_slide_mask .con_pos ul.nav	{position:absolute; top:10px; inset-inline-end:10px; font-size:0; }
.pop_slide_mask .con_pos ul.nav li	{display:inline-block; vertical-align:middle; width:5px; height:5px; background:rgba(0,0,0,0.5); margin-inline-end: 3px; border-radius:100%; cursor:pointer; transition:all .3s;}
.pop_slide_mask .con_pos ul.nav li.on {background:red; width:25px; height:5px; border-radius:30px; transition:all .3s;}
.pop_slide_mask .con_pos .play_btn  {position:absolute; top:-20px; inset-inline-start:10px;cursor:pointer; transition:all .3s; line-height:10px; font-size:11px; display: none;}
.pop_slide_mask .con_pos .play_btn:before  {content: '\f28b'; font-family: "Font Awesome 5 Free"; font-weight: 700; color:#000; transition:all .3s;}
.pop_slide_mask .con_pos .play_btn:hover:before  {color:#fff; transition:all .3s;}
.pop_slide_mask .con_pos .play_btn.stop:before  {content: '\f144'; font-family: "Font Awesome 5 Free"; font-weight: 700; color:#000; transition:all .3s;}
.pop_slide_mask .con_pos .play_btn.stop:hover:before  {color:#fff; transition:all .3s;}
.pop_slide_mask .con_pos ul.num_box	{position:absolute; top:10px; inset-inline-start:10px; z-index:2; font-size:0; text-align:center; border-radius:100%; overflow:hidden; display:none;}
.pop_slide_mask .con_pos ul.num_box li	{display:inline-block; vertical-align:middle; font-size:8px; font-family: var(--neo); font-weight: 500; line-height:13px; color:#fff; width:15px; height:15px;  text-align:center; position:relative; }
.pop_slide_mask .con_pos ul.num_box li.current	{background:#333;}
.pop_slide_mask .con_pos ul.num_box li.total		{background:#005a9b; display:none;}
.pop_slide_mask .con_pos .nm_t	{position:absolute; top:15px; inset-inline-end:15px; font-size:11px; color:red; line-height:18px; z-index:2; width:15px; text-align:center; font-family:arial;}
.pop_slide_mask .con_pos .nm_t:before	{content:""; position:absolute; top:50%; inset-inline-start:0; transform:translateY(-50%);  width:1px; height:9px; background:#eee;}

.chk_wrp {position:fixed; bottom:0; inset-inline-start:0; width:100%; height:calc(var(--pop_chk_area) + env(safe-area-inset-bottom));  }
.chk_wrp .chk_day {position:absolute; bottom:0; inset-inline:0; margin:auto;  max-width:var(--pop_wd); width:100%; height:100%; font-size: 0; z-index:1;background: var(--pop_cbg); }
.chk_wrp .chk_day .chk_bx {position: absolute; inset-inline-start: 0; top: 0; width:50%; height: 100%;}
.chk_wrp .chk_day .safe_box {position: absolute; inset-inline-start: 0; top: 0; width:100%; height: var(--pop_chk_area); }
.chk_wrp .chk_day > i {position:absolute; top:15px; inset-inline-end:13px; color:rgba(255,255,255,0.7); font-size:20px; cursor:pointer; transition:all .3s;}
.chk_wrp .chk_day > i:hover {color:#fff; transform:rotate(270deg); transition:all .3s;}
.chk_wrp .chk_day input[type="checkbox"]{width:0px; height:0px; padding:0; border:0 none; margin:0; position:absolute; overflow:hidden; clip:rect(0 0 0 0);}
.chk_wrp .chk_day input[type="checkbox"] + label{width:100%; height:100%; line-height:var(--pop_chk_area); padding-inline-start:0px; background:var(--pop_cbg_ck); border:0; transition:all 0s; border-radius:0;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.chk_wrp .chk_day input[type="checkbox"] + label span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--pop_txt);font-family: var(--neo); font-weight: 500; letter-spacing:-0.05em; }
.chk_wrp .chk_day input[type="checkbox"] + label span i {position: absolute; inset-inline-start: -15px !important; inset-inline-end:initial; top: 50%; transform: translate(-50%, -50%); font-size: 20px; color: var(--pop_txt2);}
.chk_wrp .chk_day input[type="checkbox"] + label:before	{content:"";position:absolute; top:calc(50% - 5px); inset-inline-start:calc(50% - 55px); width:6px; height:9px; transform:translate(-50%, -50%) rotate(45deg);border:1px solid #dedede; border-width:0 ;}
.chk_wrp .chk_day input[type="checkbox"] + label:after{content:""; position:absolute; top:0; inset-inline-start:30px; width:110px; font-size:13px; color:rgba(255,255,255,0.7); display:none;}
.chk_wrp .chk_day input[type="checkbox"]:checked + label{}
.chk_wrp .chk_day input[type="checkbox"]:checked + label:before	{border-color:none;}
.chk_wrp .chk_day input[type="checkbox"]:checked + label:after	{color:#fff;}
.chk_wrp .chk_day input[type="checkbox"]:checked + label span i {color: red;}
.chk_wrp .chk_day .once_btn {position: absolute; inset-inline-end: 0; top: 0; width:50%; height: 100%; border-inline-start: 1px dashed var(--pop_line); cursor: pointer;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.chk_wrp .chk_day .once_btn span {position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--pop_txt);font-family: var(--neo); font-weight: 500; letter-spacing:-0.05em; line-height:var(--pop_chk_area); }

.pw_hdbx {position:absolute; top:-22px; inset-inline-start:15px; display: none;}
.pw_hdbx h3 {position:relative; font-size: 0; font-weight: normal;}
.pw_hdbx h3 i,
.pw_hdbx h3 span {display: inline-block; vertical-align: middle; line-height: 100%;}
.pw_hdbx h3 i {font-size: 16px; color: rgb(255, 0, 88); padding-inline-end: 5px; display: none;}
.pw_hdbx h3 span {font-size: 13px;font-family:var(--neo); font-weight:600; letter-spacing: -0.05em;}

/* 팝업레이어 상단 팝업리스트 */
ul.good_popup {position:relative; margin-top:20px;counter-reset:li;}
ul.good_popup li {position:relative; font-size:0; line-height:110%; margin-top:8px;}
ul.good_popup li:before	{content:"POP "counter(li); counter-increment:li; position:absolute; top:-2px; inset-inline-start:0; line-height:100%; padding:3px; border-radius:3px; border:1px solid #eee; background:#fff; color:#999; font-family: var(--neo); font-weight: 500; font-size:8px;}
ul.good_popup li h4,
ul.good_popup li span {display:inline-block; vertical-align:middle; line-height:110%;}
ul.good_popup li h4 {width:calc(100% - 100px);font-size:12px; color:#555; font-family: var(--neo); font-weight: 500; padding-inline-start:40px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-0.05em;}
ul.good_popup li span {width:100px;font-size:10px; font-family:tahoma; color:#999; text-align:end;}
ul.good_popup li span em {font-family:var(--bar); font-style:normal; color:#ddd;}

/**/
.now_system {position: absolute; bottom:5px; inset-inline-end: 0;  z-index: 1; font-size: 0;}
.now_system > div {display: inline-block; vertical-align: middle; line-height: 1;}
.now_system span {}
.now_system .ns_txt {font-size: 11px;  margin-inline-end: 10px;font-weight: 500; letter-spacing: -0.05em;}
.now_system .ns_btn {font-size: 0; background: var(--st_icon_bg); padding: 7px; border-radius: 3px; line-height: 1;}
.now_system .ns_btn span,
.now_system .ns_btn i {display: inline-block; vertical-align: middle; line-height: 1; }

.now_system .ns_go {font-size: 11px; color: var(--st_label_color); font-weight: 500; }
.now_system i {font-size: 13px;color: var(--st_label_color); display:none !important;}

/* 사용 중 상태 (Blue) */
.sy_use {color: var(--sy_color_y) !important;}
.sy_no {color: var(--sy_color_n) !important;}

/**/
.map_kakao_api {position:absolute !important; top:0 !important; inset-inline-start:0 !important; width:100% !important; height:100% !important;}
.map_kakao_api canvas {position:absolute !important; top:0 !important; inset-inline-start:0 !important; width:100% !important; height:100% !important;}
.custom_html_marker {position: relative; bottom: 42px; border:2px solid blue;}
.map_custom_label {position: relative; bottom: 45px; border-radius: 30px; border: 0px solid #c9c9c9; background: var(--challenge_info); padding: 2px 10px; font-size: 11px; font-weight: 500; color: #000; white-space: nowrap; box-shadow: 0px 2px 4px rgba(0,0,0,0.2);text-align: center;}
.map_custom_label.check {background:var(--challenge_info); color:var(--tab_on); font-weight:600;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.map_custom_label.check:after {content:"인증"; position:absolute; bottom:-65px; left:50%; background:red; color:#fff; font-size:10px; z-index:1; line-height:1; padding:3px; border-radius:3px; transform:translateX(-50%); font-weight:500;box-shadow: 0px 2px 4px rgba(255,255,255,0.2);}

ul.map_type {position:absolute; top:10px; inset-inline-end:10px; display:flex; z-index:5;}
ul.map_type li {flex:1; padding:3px 12px; cursor:pointer; background:var(--map_h_bg); border-radius:3px; margin-inline-start:3px; font-size:11px;}
ul.map_type li:first-child {margin:0;}
ul.map_type li.on {background:var(--tab_on); color:#fff;}

.map_rotate_box {position:absolute; top:50px; inset-inline-end:15px; width:20px; height:20px;  z-index:5; }
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.map_rotate_box > i {position:absolute; top:50%; left:50%; font-size:18px; color:#007aff; transform:translate(-50%, -50%);font-variation-settings:'FILL' 1,'wght' 300; transition:all .3s;}
.map_rotate_box.edge_change > i {color:red;}

.my_loc_circle {position:relative; width:100px; background: radial-gradient(circle, rgba(0, 122, 255, 0.4) 0%, rgba(0, 122, 255, 0.2) 70%);border-radius:100%; }
.my_loc_circle:after {content:""; display:block; padding-top:100%;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.my_loc_circle .mlc_point {position:absolute; top:50%; left:50%; width:10px; height:10px; background:red; transform:translate(-50%, -50%); border-radius:100%;border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);}

.trbx {position: relative; line-height: 1;  font-size: 0;  color: #fff;  }
.trbx.start { background: red; }
.trbx.end { background: green; }

/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.trbx::before {content: ''; position: absolute; top: -36px; left: 50%; transform: translateX(-50%);  color:#fff; font-size:10px; white-space:nowrap; width: 15px; height: 15px; line-height: 15px; border-radius:100%; text-align: center; z-index: 1; background: #fff; font-weight: 900;}
.trbx.start::before {content:"S";color:var(--tab_on);}
.trbx.end::before {content:"F";color:red;}

/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
.trbx::after {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);  width:29px; height:42px; background-size:cover !important; background-position:center center !important;}

.trbx.start::after {background:url(/app/images/marker_default.png) no-repeat; }
.trbx.end::after {background:url(/app/images/marker_check.png) no-repeat; }

/**/
/* 트래킹 내비게이션 마커 */
.nav_arrow {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: transform 0.3s ease-out; border-radius:100%; background:#fff;}
.nav_arrow i {color: red; font-size: 24px; transform: rotate(0deg);}

/* ===================== RTL 전용 화살표 디자인 반전 추가 ===================== */
html[dir="rtl"] .pop_slide_mask .con_pos .sBtn.prev { border-width: 1px 1px 0 0; }
html[dir="rtl"] .pop_slide_mask .con_pos .sBtn.next { border-width: 0 0 1px 1px; }