@charset "utf-8";

/* mainLogin */
#mainLogin {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F4F4F4 url("../images/common/bg_login.png") no-repeat;
  background-size: cover;
}

.mainLogin_wrap {
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -40px;
}
.mainLogin_wrap .mainLogin_title {
  text-align: center;
  padding-bottom: 30px;
}
.mainLogin_wrap .mainLogin_title h1 {
  padding-bottom: 15px;
}
.mainLogin_wrap .mainLogin_title p {
  color: #999;
  font-size: 15px;
  letter-spacing: 0;
}
.mainLogin_wrap .input_type_c {
  width: 100%;
  background: transparent;
  border: 1px solid #818181;
  font-size: 15px;
  color: #d2d2d2;
  padding: 0 0 0 8px;
  height: 60px;
  line-height: 58px;
  margin-bottom: 14px;
}
.mainLogin_wrap .input_type_c::placeholder {
  color: #D2D2D2;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}
.mainLogin_wrap .mainLogin_wrap:first-child input[type=text] {
  margin-bottom: 30px;
}

/* 아이디저장 */
.label_check_wrap {
  display: flex;
  align-items: center;
  margin: 12px 0 30px 0;
  font-size: 13px;
  color: #b8b8b8;
}
.label_check_wrap input[type=checkbox] {
  border: 1px solid #A5B9E5;
  border-radius: 4px;
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.label_check_wrap label {
  display: flex;
  align-items: center;
}

.id_save {
  font-size: 14px;
  color: #9BB2E2;
}

.id_save .title {
  padding-left: 8px;
}

/* 버튼 */
.mainLogin_btn {
  cursor: pointer;
  display: block;
  border: 0;
  font-size: 14px;
  color: #fff;
  background: #4067EC;
  text-align: center;
  width: 100%;
  height: 60px;
  letter-spacing: 0;
}

/* 탭 */
.mainLogin_tab {
  width: 100%;
  display: flex;
  margin-bottom: 8px;
}
.mainLogin_tab li {
  width: 100%;
}
.mainLogin_tab li a {
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2D3645;
  color: rgba(255, 255, 255, 0.1);
}
.mainLogin_tab li a.on {
  background: rgba(255, 255, 255, 0.5);
  color: #222;
  font-weight: 700;
}
.mainLogin_tab li a:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
  color: #222;
  font-weight: 700;
}


/*================================================== */
/*개발 추가*/
/* windy */

#logo{
   display: none;
}

#windy .leaflet-container a.leaflet-popup-close-button {
  font-size: 22px !important;
  padding: 7px 23px 0 0 !important;
}

#windy .leaflet-popup-content-wrapper, #windy .leaflet-popup-tip {
    background: rgb(21 33 57 / 90%) !important;
}

#windy .leaflet-popup-content-wrapper {
    border-radius: 0 !important;
}

/* 팝업센터 테스트 */
#windy .leaflet-popup-content{
	margin: 0 !important;
	color: #9AADC3;
}

#windy .leaflet-container a {
	color: #9AADC3 !important;
}


.marker-label {
	white-space: nowrap;
	color: white;
	font-weight: bold;
	font-size: 13px;
	text-shadow: 1px 1px 2px black;
}

.leaflet-tooltip.custom-tooltip {
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #444;
}

.zoom-control {
	position: absolute;
	top: 10px;
	left: 290px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
}
.zoom-control button {
	background: white;
	border: 1px solid #ccc;
	padding: 5px;
	margin: 2px;
	cursor: pointer;
}

.distance-label {
	font-size: 14px; /* 글꼴 크기 설정 */
	color: #ffffff; /* 원하는 글자색을 설정합니다. */
}
.temp-distance-label {
	font-size: 12px; /* 글꼴 크기 설정 */
	color: #ffffff; /* 원하는 글자색을 설정합니다. */
}
.temp-area-label {
	font-size: 12px; /* 글꼴 크기 설정 */
	color: #ffffff; /* 원하는 글자색을 설정합니다. */
}
.custom-label{
	font-size: 12px; /* 글꼴 크기 설정 */
	color: #ffffff; /* 원하는 글자색을 설정합니다. */
}

a{font-family: "pretendard" !important} /* 3D지도 사용으로 a태그 충졸로인한 추가 */
a.side{color:#6767f5;font-weight:bold;font-family:"pretendard"} /* 3D지도 사용으로 a태그 충졸로인한 추가 */


#windy #plugin-menu {display: none !important;}

#windy #bottom {margin-bottom: 10px;}

#windy .progress-line {width: calc(100% - 50px) !important;}


.filter-group {
    border: 1px solid #d0d0d0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #d7e1ff;
    margin-right: 6px;
}

.filter-title {
    font-size: 15px;
    color: #236db2;
    margin-bottom: 4px;
    margin-right: 5px;
}

/* PTZ Overlay */
.redis-ptz-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
		
		
.ptz-pad {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 120px;     /* 🔥 작게 */
    height: 120px;    /* 🔥 정사각형 */
    pointer-events: auto;
}

.ptz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    gap: 3px;
}

/* 모든 버튼 정사각형 */
.ptz-btn {
    background: rgba(20,24,32,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ptz-btn:hover {
    background: rgba(30,36,48,0.9);
}

.ptz-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.25s ease;
}

.ptz-btn:hover svg {
    transform: scale(1.15);
}

/* 방향별 회전 */
.ptz-btn[data-direction="up"] svg { transform: rotate(-90deg); }
.ptz-btn[data-direction="up-right"] svg { transform: rotate(-45deg); }
.ptz-btn[data-direction="right"] svg { transform: rotate(0deg); }
.ptz-btn[data-direction="down-right"] svg { transform: rotate(45deg); }
.ptz-btn[data-direction="down"] svg { transform: rotate(90deg); }
.ptz-btn[data-direction="down-left"] svg { transform: rotate(135deg); }
.ptz-btn[data-direction="left"] svg { transform: rotate(180deg); }
.ptz-btn[data-direction="up-left"] svg { transform: rotate(-135deg); }

/* --- 중앙 정사각형 Zoom 블럭 --- */
.ptz-center-square {
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 중앙 대각선 Zoom 정사각형 */
.diagonal-zoom {
    position: relative;
    background: rgba(255,255,255,0.92);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.25);
}

/* 두 개의 삼각형(대각선 분할) */
.zoom-tri {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .25s ease;
}

/* 왼쪽 위 삼각형 → Zoom In */
.zoom-plus {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: rgba(240,240,240,0.9);
}
.zoom-plus:hover {
    background: rgba(220,220,220,0.9);
}
.zoom-plus:active {
    background: rgba(200,200,200,1);
}

/* 오른쪽 아래 삼각형 → Zoom Out */
.zoom-minus {
    clip-path: polygon(100% 100%, 100% 0, 0 100%);
    background: rgba(225,225,225,0.9);
}
.zoom-minus:hover {
    background: rgba(210,210,210,0.9);
}
.zoom-minus:active {
    background: rgba(190,190,190,1);
}

/* + / - 아이콘 공통 스타일 */
.zoom-tri::after {
    content: attr(data-icon);
    position: absolute;
    color: #333;
    font-weight: 700;
    font-size: 20px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* + 아이콘 위치 */
.zoom-plus::after {
    content: '+';
    top: 28%;
    left: 28%;
}

/* - 아이콘 위치 */
.zoom-minus::after {
    content: '−';
    top: 72%;
    left: 72%;
}
    
.control-btn {
    background: rgba(20,24,32,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    user-select: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}
.control-btn:hover {
    background: rgba(30,36,48,0.9);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.2);
}
.control-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5),inset 0 2px 4px rgba(0,0,0,0.3);
}
.control-btn .btn-feedback {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle,rgba(255,255,255,0.2), transparent 70%);
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}
.control-btn:active .btn-feedback {
    animation: ripple 0.6s ease-out;
}