/* safetymap CSS */
@charset "utf-8";

.safetymap {display: flex;gap: 30px;margin-top:30px;font-family: "NanumSquareR";}
.safetymap_cont {font-family: "NanumSquareR";width:920px}
.sfm_left {width:300px;height:720px;box-sizing: border-box;}
.sfm_contents {}
.sfm_intro {position: relative;width:920px;height:720px;background: url(../../images/safety-img/intro-bg2.png) no-repeat;border-radius: 20px;}

.sfm_building1 {}
.map {background: #f9fdfe;border:1px solid #bdc8d2;border-radius:20px;width:870px;height:720px; position: relative;padding:20px;box-sizing: border-box; }
.sfm_popup_card {
    position: absolute;
    z-index: 9999;   /* 위로 올림 */
    width: 320px;

    left: 0;         /* 제거 */
    top: 0;          /* 제거 */

    display: none;   /* 처음엔 숨김 */
    pointer-events: none; /* 마우스 간섭 방지 */
}
#mysvg .room-group.selected-room rect {
    stroke: #ff3b30 !important;
    stroke-width: 4 !important;
    fill: #ffd54f !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.85)) !important;
}
#chemicalIconLayer image {
    pointer-events: none;
}
/* 방 깜빡임 효과 */
@keyframes roomBlinkEffect {
    0% {
        opacity: 1;
        fill: #ffd54f !important;
        stroke: #ff3b30 !important;
        stroke-width: 2 !important;
    }
    50% {
        opacity: 0.35;
        fill: #ff7043 !important;
        stroke: #ff0000 !important;
        stroke-width: 4 !important;
    }
    100% {
        opacity: 1;
        fill: #ffd54f !important;
        stroke: #ff3b30 !important;
        stroke-width: 2 !important;
    }
}

#mysvg rect.blink-room-rect {
    animation: roomBlinkEffect 0.6s ease-in-out infinite !important;
}
.sfm_popup_card .sfm_company_card {border-color:#6392bd;box-shadow: 0 4px 10px rgba(0,0,0,0.2);font-weight: normal;background: linear-gradient(#eff8ff 40px, #fff 200px);}

.legend { position: absolute; left:20px;top:20px;background:#fff; padding:16px 20px; border-radius:8px;  width:200px; border:1px solid #ecf5f7;z-index: 96;}
.legend-title { font-size:18px; font-weight:700; margin-bottom:12px; color:#000}
.legend-list { display:flex; flex-wrap:wrap; gap:8px 16px;}
.legend-item { display:flex; align-items:center; gap:6px; font-weight:500;font-size:13px; color:#666; }
.box { width:14px; height:14px; border-radius:2px; }

.legend2 {position: absolute; right:20px;bottom:35px; background:#fff; padding:10px; border-radius:10px; width:300px;  z-index: 95;}
.title { font-size:18px; font-weight:700; margin-bottom:12px; }
.legend-grid { display:flex; flex-wrap:wrap; gap:5px; }
.legend-btn { display:flex; font-weight:500; align-items:center; justify-content:space-between; gap:5px; padding:2px 12px; font-size:12px; border:1px solid #ddd; border-radius:3px; background:#fff; cursor:pointer; transition:all .2s ease; ;color: rgba(41, 37, 32, 0.6);}

/* 클릭 상태 */
.legend-btn.active { background:#fff8da; border-color:#fcdebb;color:#292520 }

/* 아이콘 */
.legend-btn img { padding:1px 0 0 0}

/* 강조 (대피경로) */
.legend-btn.danger { color:#E53935; }

/* 색상 */
.box.a { background:#2CA273; }
.box.b { background:#22949F; }
.box.c { background:#3E76BC; }
.box.d { background:#7D69C5; }
.box.pta { background:#9E52D2; }
.box.ptb { background:#7E53D5; }
.box.ptc { background:#5065D2; }
.box.ptd { background:#3E81CD; }
.box.pte { background:#0E979C; }
.box.ptf { background:#2792B9; }
.box.ptg { background:#2CA272; }
.box.tb { background:#6F4EB2; }
.box.ptother { background:#D4E8F9; }
/* =========================
   1. 위치
========================= */
.area { position: absolute; cursor: pointer; }


.area.blue { top: 144px; left: 15px; }
.area.blue .label { position: absolute; top: -80px; left: 206px; }

.area.green { top: 237px; left: 271px; }
.area.green .label { position: absolute; bottom: -60px; right: 300px; }


/* =========================
   2. 초기 상태
========================= */
.base { opacity: 0; transform: translateY(-20px); transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
/* 라벨 공통 */
.label { opacity: 0; transform: translateY(-20px); transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* 라벨 이미지 교체용 */
.base-label { opacity: 0; }
.hover-label { opacity: 0; }

/* =========================
   3. 등장 애니메이션
========================= */

/* 건물 먼저 */ .area.show .base { opacity: 1; transform: translateY(0); transition-delay: 0s; }

/* 라벨 나중 */
.area.show .label { transform: translateY(0); transition-delay: 0.2s; }

/* 등장 시 기본 라벨만 보이게 */
.area.show .base-label { opacity: 1; }
.area.show .hover-label { opacity: 0; }


/* =========================
   4. hover 인터랙션 (최종)
========================= */
.area:hover .label,
.area:hover .base-label,
.area:hover .hover-label { transition-delay: 0s; }
/* 건물 */
.real {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  opacity: 0;
  transform: translateY(-12px);

  /* ⭐ opacity는 빠르게, 움직임은 느리게 */
  transition: 
    opacity 0.2s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 라벨 (즉시 반응) */

.hover-label { transition: opacity 0.12s linear; }

/* hover */
.area:hover .real { opacity: 1; transform: translateY(0); }
.area:hover .base-label { opacity: 0; }
.area:hover .hover-label { opacity: 1; }



.overlay { position: absolute; top: 20px; left: 30px;right:20px; }


.room-group rect { rx:1px; transition: all .25s ease; }

.zone.A rect { fill:#2CA273; filter: drop-shadow(0 1px 0 #1f7a56); }
.zone.B rect { fill:#22949F; filter: drop-shadow(0 1px 0 #047272); }
.zone.C rect { fill:#3E76BC; filter: drop-shadow(0 1px 0 #194e8a); }
.zone.D rect { fill:#7D69C5; filter: drop-shadow(0 1px 0 #392788); }
.zone.ptA rect { fill:#9E52D2; filter: drop-shadow(0 1px 0 #6F24A1); }
.zone.ptB rect { fill:#7E53D5; filter: drop-shadow(0 1px 0 #6F24A1); }
.zone.ptC rect { fill:#5065D2; filter: drop-shadow(0 1px 0 #1F3397); }
.zone.ptD rect { fill:#3E81CD; filter: drop-shadow(0 1px 0 #184D89); }
.zone.ptE rect { fill:#0E979C; filter: drop-shadow(0 1px 0 #0C6467); }
.zone.ptF rect { fill:#2792B9; filter: drop-shadow(0 1px 0 #125973); }
.zone.ptG rect { fill:#2CA272; filter: drop-shadow(0 1px 0 #0A6943); }
.zone.ptadd rect { fill:#D4E8F9; filter: drop-shadow(0 1px 0 #739FC4); }
.zone.ptadd rect:hover {fill:#AFD0ED; filter: drop-shadow(0 1px 0 rgba(0,0,0,1));}
.zone.ptadd text {font-size:12px;font-weight:500;fill: #305270;}

.zone.tb polygon, .zone.tb rect { fill:#6F4EB2; filter: drop-shadow(0 1px 0 #3A1C76); }

.room-group text { fill:#fff; font-size:12px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; font-weight:500; }
.room-group:hover rect,.room-group:hover polygon { fill:#000; filter: drop-shadow(0 1px 0 rgba(0,0,0,1)); }
.zone-title { font-size: 13px; font-weight: 600; fill: #333; }

/*---------왼쪽 리스트-------------*/

.sfm_company_wrap { position:relative;width: 300px;height:722px;box-sizing: border-box; border: 1px solid #ddd;background: #fff;font-weight:500; }

/* 검색 */
.sfm_search_area {padding:10px;  display: flex; gap:0px;}

.sfm_search_area select, .sfm_search_area input {font-size:13px;font-weight:500;text-indent: 0; height: 40px; border: 1px solid #ccc; border-radius: 4px;}
.sfm_search_area input.sfm {height:40px;width:100%;margin:0; border: 1px solid #ccc;box-sizing: border-box;}
.sfm_search_box {position: relative;flex:1}
.sfm_btn_search { flex:1;position:absolute; right:8px; top:8px; width:24px; height:24px;background:url('../../images/safety-img/icon-search-b.svg') no-repeat center; cursor:pointer; }

/* 필터 */
.sfm_filter_area {padding:0 10px; display: flex; gap:3px; margin-bottom:5px; border-bottom:2px solid #2bb0d1;}
.sfm_filter_area .sfm_chip { flex: 1; text-align: center;border-radius: 3px 3px 0 0;border: 1px solid #dee7f2; border-bottom:none;background: #f9fdfe; padding: 6px 15px; font-size: 12px; }

.sfm_fchip { border: 1px solid #dee7f2; background: #f9fdfe; padding: 3px 15px; border-radius: 3px; font-size: 12px; cursor: pointer; }
.sfm_fchip.active {border:1px solid #2bb0d1; color:#037591;background:#e5fbfe}
.sfm_chip.active { background: #2bb0d1;border:1px solid #249dbb;color:#fff;border-bottom:none; }
.sfm_floor_area {padding:0 10px;}
.sfm_floor_list {display: flex; gap: 6px;margin:0 0 10px 0;}
.sfm_floor_list .sfm_fchip { flex: 1; text-align: center; }

/* 카드 */
.sfm_company_list {margin:5px 0 20px 0; padding:0 10px; display: flex; flex-direction: column; gap: 12px;overflow-y: auto;height:570px}
.sfm_company_list_long {height:605px;margin-top:10px}
.sfm_company_card:hover{background:#f6fafd;border:1px solid #8bbfdb}
.sfm_company_card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 12px; }

.sfm_card_header { display: flex; justify-content: space-between; margin-bottom: 6px; }

.sfm_card_header span.sfm_name {width: 170px; font-size: 14px; line-height:16px;color: #000; font-weight:500}

.sfm_card_header span.sfm_room { font-size: 12px; color: #1e6bb8; vertical-align: top;}
.sfm_card_header span.sfm_room img {width:12px;margin:-5px 3px 0 0}

.sfm_tel { font-size: 12px; margin-bottom: 4px; }
.sfm_tel img {width:13px;margin:-4px 3px 0 0}
.sfm_hold { font-size: 12px;}
.sfm_hold img {width:12px;margin:-4px 5px 0 0}
.sfm_desc { font-size: 12px; color: #666; margin-bottom:5px; }
.sfm_desc img {width:12px;margin:-4px 6px 0 0px}

.sfm_tags {margin-top:10px; display: flex; flex-wrap: wrap; gap:3px;}

.sfm_tags span { font-size: 11px; border: 1px solid #cad9ef; padding:2px 8px; border-radius: 12px; background: #fff; }

.sfm_card_header_line { border-bottom: 1px dashed #C3D3E7; margin: 5px 0; }

/*---------취급화학물질-------------*/
.sfm_items {font-family: "NanumSquareR";}
.sfm_items ul{display: flex;margin-top:30px}
.sfm_items li {flex:none;font-size: 18px; font-weight: 700; color:#333;padding:10px 0 0px 0px;}
.sfm_items li:last-child {text-align: right;margin-left: auto;font-size:13px;font-weight:400;color:#888;padding-top:20px;}
.sfm_items li:last-child span {color:#8dbfd9;font-size:10px;margin:1px 10px 10px 10px;font-weight:600;display: inline-block;vertical-align: top;}
.sfm_items_list {border-top:1px solid #4abcde;margin: 0 0 18px 0;font-family: "NanumSquareR";}
.sfm_items_list th{font-size:14px;color:#265c7e;font-weight:700;text-align:center;border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; padding:10px 2px;;background:#f9f9f9}
.sfm_items_list th:last-child {border-right:none}
.sfm_items_list td{font-size:14px; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede;color:#696969;font-weight:400;text-align:center;padding: 9px 2px 8px 2px;}
.sfm_items_list td:last-child {border-right:none}
.sfm_chem_link {
    color: #1e5eff !important;
    text-decoration: none !important;
    border-bottom: 1px solid #1e5eff;
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
}

.sfm_chem_link:hover {
    color: #0b45d3;
}

/*---------통계-------------*/

.sfm_chart_wrap { margin-top: 10px; width: 920px; }
.sfm_chart_box { display: flex; gap: 50px; height: 400px; }
.sfm_chart_item { min-width: 0; position: relative; height: 100%; }
.sfm_chart_item.sfm_bar { flex: 7; }
.sfm_chart_item.sfm_doughnut { flex: 3; }

/* search box */
.sfm_searchbox {margin-top:50px;padding:10px;background: #f0f2f6;display: flex; gap: 5px;justify-content: center;;}
.sfm_search_num {font-size: 14px;font-weight: 500;margin-bottom:1px}
.sfm_search_num span {color:#5e88d5}
.sfm_searchbox select {border-radius: 3px;height:30px !important}
.sfm_searchbox input {margin:0 !important;border-radius: 3px;width:500px}
.sfm_searchbox button {background: #5e88d5;color:#fff;padding:4px 20px;border-radius: 3px;}
.sfm_searchlist {margin-top:30px}

/* paging */
.sfm_paging{display:inline-block;width:100%;margin-bottom:34px;text-align:center}

.sfm_page-num{display:inline-block;text-decoration:none;width:26px;height:26px;margin:0 3px;font-size:13px;color:#666;line-height:24px;text-align:center;border:1px solid #c3c3c3}
.sfm_page-num:hover{width:26px;height:26px;color:#fff;font-weight:700;border:1px solid #4976b9;background:#4976b9}
.sfm_page-num-on{display:inline-block;text-decoration:none;width:26px;height:26px;margin:0 3px;font-size:13px;color:#fff;font-weight:700;line-height:24px;text-align:center;border:1px solid #4976b9;background:#4976b9}

.sfm_btn-pgfirst{
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:7px;
    padding-right:3px;
    font-size:0;
    text-align:center;
    vertical-align:bottom;
    border:1px solid #c3c3c3;
    background:url(../../images/safety-img/ic_page_first.gif) no-repeat 50% 50%;
}

.sfm_btn-pgprev{
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:7px;
    padding-right:3px;
    font-size:0;
    text-align:center;
    vertical-align:bottom;
    border:1px solid #c3c3c3;
    background:url(../../images/safety-img/ic_page_prev.gif) no-repeat 50% 50%;
}

.sfm_btn-pglast{
    display:inline-block;
    width:26px;
    height:26px;
    margin-left:7px;
    padding-left:3px;
    font-size:0;
    text-align:center;
    vertical-align:bottom;
    border:1px solid #c3c3c3;
    background:url(../../images/safety-img/ic_page_last.gif) no-repeat 50% 50%;
}

.sfm_btn-pgnext{
    display:inline-block;
    width:26px;
    height:26px;
    margin-left:7px;
    padding-left:3px;
    font-size:0;
    text-align:center;
    vertical-align:bottom;
    border:1px solid #c3c3c3;
    background:url(../../images/safety-img/ic_page_next.gif) no-repeat 50% 50%;
}

/*---------컨텐츠-------------*/
.sfm_tab_content {font-family: "Nanum Gothic", sans-serif;}


/*---------탭-------------*/
.sfm_tab_list {display: flex;margin:25px 0;}
.sfm_tab_list li{ flex: 1;text-align: center; background: #fff; cursor: pointer; }
.sfm_tab_list li a {display: block;padding: 10px 0;border: 1px solid #e5e5e5;border-right:none;font-weight: 500;color:#999;font-size: 14px !important;  }
.sfm_tab_list li:last-child {border-right: 1px solid #e5e5e5;}
.sfm_tab_list li a.active {border: 1px solid #1a6dc9;color: #1a6dc9;font-weight: 500;}

.sfm_tab_panel { display: none; position: relative;}
.sfm_tab_panel.active { display: block; }