:root{
        --brand:#0b6b9c;
        --brand-2:#2f9e44;
        --bg:#f4fbff;
        --map-url:'/img/gyeongnam-map.png'; /* ← 네 지도 이미지로 교체 */
    }
    body{margin:0;background:#fff;
        color:#111;
}
    .wrap{max-width:1400px;
    margin: 0 auto; width: 100%;}
    .title{display:flex;align-items:end;gap:10px}
    .title h1{margin:0;font-size:22px;font-weight:800;color:#0e2a3b}
    .title small{color:#6b7b86}

    /* 카테고리 탭 */
    .tabs_data{display:flex;gap:8px;margin:16px 0 12px}
    .tabs_data button{
        appearance:none;border:1px solid #d8e3ea;background:#fff;color:#133040;
        padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700
    }
    .tabs_data button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
    .filters{display:flex;flex-wrap:wrap;gap:5px;padding:10px;border:1px dashed #cfe3ee;border-radius:12px;background:#f7fbfe}
    .filters .group{display:flex;gap:5px;align-items:center;background:#fff;border:1px solid #e5eef4;border-radius:10px;padding:8px 10px}
    .filters label{font-weight:700;color:#234}
    .filters select,.filters input[type="range"]{
        border:1px solid #dce7ee;border-radius:8px;padding:6px 8px;min-height:36px;
        min-width: 85px;
    }

    /* 레이아웃 */
    .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:14px}
    @media (max-width:1024px){.grid{grid-template-columns:1fr;}}
    
    /* 지도카드 */
    .card{background:#fff;border:1px solid #dfe9f1;border-radius:16px;box-shadow:0 6px 18px rgba(9,46,70,.06)}
    .card .hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #edf3f7}
    .card .hd b{font-size:15px}
    .card .bd{
        /* padding:14px */
    }
    .legend{display:flex;gap:10px;flex-wrap:wrap}
    .legend .dot{width:10px;height:10px;border-radius:50%}
    .legend .item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#f5fbff;border:1px solid #e2f1f9;border-radius:999px}

    /* 지도 */
    .map{
      width: 100%;
    aspect-ratio: 16 / 16;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background-image: url(/img/map_small.svg);
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    }
    /* 배지(말풍선) */
    .badge{
        position:absolute;transform:translate(-50%,-50%);
        background:#fff;border:1px solid #d7e6ef;border-radius:12px;padding:6px 10px;white-space:nowrap;
        box-shadow:0 4px 12px rgba(9,46,70,.08);cursor:pointer;
        align-items: center;
        display: flex;
    justify-content: center;
    flex-direction: column;
    }
    .badge:hover{border-color:#9dd0ea}
    .badge. b{color:#0a2f44}
    .badge small{color:#54839b}
    /* 선택 하이라이트 */
    .badge.active{outline:2px solid #ff5573}

    /* 차트카드 */
    canvas{width:100%;height:360px;display:block}

    


    /* 테이블 표임! */
/* ============ stt- 테이블 전용 ============ */
.stt-block{border:1px solid #d9e5ef;border-radius:12px;background:#fff}
.stt-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #e7eff6}
.stt-head b{font-size:15px;color:#0b2f4a}
.stt-tools{display:flex;gap:8px}
.stt-tools .stt-search{border:1px solid #d2dde8;border-radius:8px;padding:6px 10px;height:34px;font-size:13px}
.stt-tools .stt-download{border:1px solid #d2dde8;border-radius:8px;padding:0 12px;background:#f9fcff;cursor:pointer;font-size:13px}
.stt-tools .stt-download:hover{background:#eef6fb}

.stt-body{padding:0}
.stt-scroll{width:100%;overflow:auto}
.stt-table{width:100%;border-collapse:separate;border-spacing:0;min-width:960px;font-size:13px}
.stt-table thead th{
  position:sticky;top:0;background:#eaf4fb;color:#093e61;
  border:1px solid #d4e3f0;font-weight:700;padding:9px 6px;text-align:center
}
.stt-table tbody td,.stt-table tbody th{
  border:1px solid #e2edf5;padding:7px 8px;text-align:right;background:#fff
}
.stt-table tbody th{background:#f6fbfe;color:#0a2f44;text-align:center;font-weight:700}
.stt-table tbody tr:nth-child(even) td{background:#fbfdff}
.stt-table td.stt-num{font-variant-numeric:tabular-nums}
.stt-table td.stt-pct{color:#6c7e88}
.stt-table th[data-stt-sort]{cursor:pointer}
.stt-table th[data-stt-sort]:hover{background:#d7ecf8}

@media (max-width:640px){
  .stt-table{font-size:12px;min-width:720px}
  .stt-tools .stt-search{width:120px}
  .card .hd{
        flex-wrap: wrap;
  }
  .filters .group{
    width: 49%;
  }
  .filters label{width: 35%;}
  .filters select, .filters input[type="range"]{
     width:65%;
  }
}