/* 품질관리 */
.area_graph_quality{margin:-10px auto 10px} /* 품질관리 디자인 이미지 작성 css -- 추후 지울것 */
.area_graph_box2{display:flex;justify-content:center;}

.area_viewer{width:100%;min-height:800px;height:100%;background:#f2f2f2 url(../images/common/ready_sample.png) center 40% no-repeat;}

/* cctv */
.media_bgwrap{width:100%;background:#f8f8f8;padding:20px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.media_cctv_wrap{display:flex;flex-wrap:wrap;gap:10px}
.media_cctv_wrap .cctv_box{position:relative;overflow: hidden;width:calc(100% / 4 - 10px)}
.media_cctv_wrap .cctv_box h4{width:100%;height:40px;font-size:16px;background:#DBDBDB;color:#333;font-weight:600;display:flex;align-items:center;padding:0 20px;}
.media_cctv_wrap .cctv_box .cctv_screen{height:306px}
.media_cctv_wrap .cctv_box .cctv_screen img{width:100%;height:100%}
.media_cctv_wrap .cctv_box .alarm{width:100%;height:40px;line-height:40px;padding:0 20px;position:absolute;left:0;bottom:0px;z-index:9;color:#fff;font-size:15px;font-weight:500}
.media_cctv_wrap .cctv_box .alarm-1{background:rgb(160 50 50 / 70%)}
.media_cctv_wrap .cctv_box .alarm-2{background:rgb(247 177 73 / 70%)}
.media_cctv_wrap .cctv_box .alarm-3{background:rgb(82 104 165 / 70%)}

.media_cctv_wrap .cctv_box ul.data_list{position:absolute;left:12px;bottom:48px;z-index:9;color:#fff;background:rgba(0,0,0,0.5);line-height:20px;padding:10px 18px;font-size:14px;font-weight:300}
.media_cctv_wrap .cctv_box ul.data_list li {color:rgba(255,255,255,0.9)}
.media_cctv_wrap .cctv_box ul.data_list li strong{font-weight:700}

/* cctv버튼 추가 */
.media_cctv_wrap .cctv_box .btn_expand{position:absolute;bottom:48px;right:12px;z-index:999;color:#fff;width:34px;height:34px;background:rgba(0,0,0,0.4);display:flex;justify-content:center;align-items:center;opacity:0.9}
.media_cctv_wrap .cctv_box .btn_expand:hover{background:rgba(0,0,0,0.5)}
.btn_light {position: absolute;top: 3px;right: 52px;width: 34px;height: 34px;display: flex;justify-content: center;align-items: center;background: rgba(0, 0, 0, 0.4);border-radius: 6px;z-index: 30;cursor: pointer;border: none;color: #fff;font-size: 16px;}
.btn_light:hover {background: rgba(0,0,0,0.5);}
.btn_light.on {color: #ffc107;text-shadow: 0 0 8px rgba(255,193,7,.6), 0 0 16px rgba(255,193,7,.3);}

#wrap {
    overflow-y: auto;
}

.contents_wrap2 {
    height: calc(100vh - 120px);
    min-height: 600px;
}

.media_bgwrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#boxContainer {
    display: grid;
    width: 100%;
    flex: 1;
    min-height: 0;
    grid-template-columns: repeat(var(--col), 1fr);
    grid-template-rows: repeat(var(--row), 1fr);
    gap: 10px;
}

/* =============================
   🔥 CCTV Box
============================= */
.cctv_box {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}

/* 영상 wrapper */
.cctv_box .video-wrapper,
.cctv_box video {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* =============================
   🔥 h4 제목 (Absolute 필수)
============================= */
#boxContainer .cctv_box h4 {
    position: absolute !important;
    top: 0; left: 0;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    font-size: 17px;
    background: rgba(49,49,49,0.4);
    color: #fff;
    display: flex;
    align-items: center;
    z-index: 20;
    box-sizing: border-box;
}

/* =============================
   🔥 알람 (Absolute 필수)
============================= */
#boxContainer .cctv_box .alarm {
    position: absolute !important;
    bottom: 0; left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 16px;
    z-index: 20;
    white-space: nowrap;
    overflow: hidden;
}

/* =============================
   🔥 데이타 박스 (Absolute 필수)
============================= */
#boxContainer .cctv_box ul.data_list {
    position: absolute !important;
    bottom: 14px;
    left: 12px;
    z-index: 20;
    padding: 8px 14px;
    font-size: 14px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    line-height: 20px;
    border-radius: 4px;
}

/* =============================
   🔥 Expand 버튼
============================= */
#boxContainer .cctv_box .btn_expand {
    position: absolute;
    top: 3px; right: 12px;
    width: 34px; height: 34px;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    z-index: 30;
    cursor: pointer;
}
#boxContainer .cctv_box .btn_expand:hover {
    background: rgba(0,0,0,0.5);
}



.ptz-scale-wrap {
    position:absolute;
    bottom:10px;
    right:10px;
    transform-origin: bottom right;
}
		
.ptz-pad {
    transform: scale(1);
    transform-origin: bottom right;
    will-change: transform;
}