/* ========================================
   대시보드 페이지 전용 스타일
   공통 스타일은 common.css 참조
   ======================================== */

/* 전체 래퍼 */
.dashboard-wrap {
    background: var(--dashboard-bg);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ========================================
   메인 대시보드
   ======================================== */
.dashboard-main {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 200fr) minmax(0, 530fr) minmax(0, 270fr);
    align-items: stretch;
    gap: 30px;
    width: 100%;
    max-width: 1860px;
    height: 980px;
    padding: 30px 30px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.dashboard-section {
    display: grid;
    grid-template-rows: auto auto auto auto;
    row-gap: 10px;
}

.dashboard-section.section-1 {
    grid-template-columns: 1fr;
    row-gap: 20px;
    min-width: 0;
    overflow: hidden;
}

.dashboard-section.section-1 > * {
    min-width: 0;
    overflow: hidden;
}

.dashboard-section.section-2 {
    grid-template-columns: 1fr;
}

.dashboard-section.section-3 {
    grid-template-columns: 1fr;
    row-gap: 28px;
    align-self: start;
}

/* ========================================
   주요사업현황 카드
   ======================================== */
.project-card .card-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.project-slider {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.project-slides {
    display: flex;
    flex: 1;
    transition: transform 0.4s ease;
    width: 100%;
}

.project-slide {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.project-info {
    padding: 20px 0 0;
}

.project-title {
    font-family: var(--paper);
    font-size: 20px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin-bottom: 8px;
}

.project-desc {
    font-family: var(--paper);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
    margin: 0 0 20px 0;
}

.project-details {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-details li {
    font-family: var(--paper);
    font-size: 14px;
    color: var(--dashboard-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-details li .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

.project-details li strong {
    font-weight: 600;
}

.project-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.project-tag {
    font-family: var(--paper);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary);
    background: var(--population-icon-bg);
    padding: 6px 12px;
    border-radius: 50px;
}

.project-img {
    width: 100%;
    aspect-ratio: 16 / 7.2;
    max-height: 136px;       /* 컨테이너 폭이 넓어져도 이미지가 과도하게 커지지 않도록 캡 */
    border-radius: 16px;
    overflow: hidden;
}

.project-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 136px;       /* 원본 이미지가 크더라도 렌더 크기 제한 */
    object-fit: cover;
    object-position: center;
}

.project-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D1D5DB;
    transition: all 0.3s ease;
}

.dot-indicator.active {
    background: var(--color-primary);
    width: 28px;
    border-radius: 4px;
}

/* ========================================
   실시간 뉴스 카드
   ======================================== */
.realtime-news-card .card-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.news-list {
    display: flex;
    flex-direction: column;
}

.news-item {
    padding: 12px 0;
    position: relative;
}

.news-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
}

.news-item:last-child::after {
    display: none;
}

.news-item-featured {
    padding: 0 0 12px;
}

.news-item-featured .news-thumb {
    flex: 1;
    width: 100%;
    aspect-ratio: 16 / 7.2;
    max-height: 136px;
    overflow: hidden;
    border-radius: 16px;
    margin: 0 0 12px;
}

.news-item-featured .news-thumb img {
    width: 100%;
    height: 100%;
    max-height: 136px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.news-title {
    font-family: var(--preten);
    font-size: 16px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin: 0;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-meta {
    display: block;
    font-family: var(--preten);
    font-size: 13px;
    color: #636b75;
    margin-top: 2px;
    font-weight: 300;
}

.news-item-featured .news-title {
    padding: 0;
    font-size: 16px;
    font-weight: 600;
}

.news-item-featured .news-meta {
    padding: 0;
}

/* ========================================
   재난안전 & 교통현황 카드 (대시보드 전용)
   ======================================== */
.disaster-card {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}


.disaster-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 16px;
    padding: 15px;
}

.disaster-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
}

.disaster-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
}

.disaster-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    transform: translateY(-50%);
}

.disaster-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 8px 12px;
    background: transparent;
    border-radius: 12px;
}

.disaster-icon:not(.tab-icon) {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.2);
    flex-shrink: 0;
}

.disaster-icon:not(.tab-icon) img {
    width: 24px;
}

.disaster-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}

.disaster-number {
    font-size: 22px;
    font-weight: 500;
    color: #00B541;
    line-height: 1.2;
}

.disaster-number small {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 2px;
}

.disaster-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

.traffic-card {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.traffic-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 15px;
}

.traffic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
}

.traffic-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
}

.traffic-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    transform: translateY(-50%);
}

.traffic-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 8px 12px;
    background: transparent;
    border-radius: 12px;
}

.traffic-icon:not(.tab-icon) {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(238, 120, 0, 0.2);
    flex-shrink: 0;
}

.traffic-icon:not(.tab-icon) img {
    width: 24px;
}

.traffic-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}

.traffic-number {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-secondary);
    line-height: 1.2;
}

.traffic-number small {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 2px;
}

.traffic-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ========================================
   인구현황 카드 (대시보드 전용)
   ======================================== */
.population-card {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: visible;
}

.population-card .card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.population-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px;
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
}

.population-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding:10px 0px;
}

.population-icon {
    width: 80px;
    height: 80px;
    background: var(--dashboard-bg);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.population-icon img {
    width: 40px;
}

.population-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.population-label {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
}

.population-number {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.population-number small {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 4px;
}

.population-change {
    font-size: 14px;
    font-weight: 300;
}

.population-change.decrease {
    color: #EF4444;
}

.population-change.increase {
    color: #10B981;
}

.population-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
}

.population-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    gap: 8px;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.population-detail-item:last-child {
    border-right: none;
}

.detail-label {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
    text-align: center;
}

.detail-value {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.detail-value small {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-tertiary);
    margin-left: 3px;
}

.detail-change {
    display: block;
    font-size: 11px;
    margin-top: 2px;
    text-align: center;
}

.detail-change.decrease {
    color: #EF4444;
}

.detail-change.decrease::before {
    content: '▼ ';
}

.detail-change.increase {
    color: #10B981;
}

.detail-change.increase::before {
    content: '▲ ';
}

/* ========================================
   지도 카드
   ======================================== */
.map-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: visible;
    position: relative;
}

.map-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.map-tab img {
    width: 20px;
    height: 20px;
}

.map-tab span {
    font-size: 16px;
    font-weight: 300;
    color: var(--text-primary);
}

.map-container {
    flex: 1;
    position: relative;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: visible;
}


/* ========================================
   지도 영역 - 원본 스타일 적용
   ======================================== */
.map-area {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* 연수구 로고 워터마크 - 메인 지도 좌측 상단 */
.map-area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 150px;
    background: url('/images/main/main_logo_icon.png') no-repeat left top / contain;
    opacity: 0.8;
    filter: brightness(0) invert(1);
    pointer-events: none;
    z-index: 0;
}

/* ========================================
   공영버스 노선 오버레이
   ======================================== */

/* 공영버스 노선 이미지 */
.bus-route-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.bus-route-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

/* 지도 마커 (주차장/어린이집) */
.map-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
}

.map-marker {
    position: absolute;
    width: 40px;
    height: 40px;
    object-fit: contain;
    pointer-events: auto;
    transition: transform 0.2s;
}

.map-marker:hover {
    transform: scale(1.3);
}

/* 상행/하행 토글 */
.bus-direction-toggle {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 35px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.direction-btn {
    padding: 12px 32px;
    background: transparent;
    color: #aab2be;
    border: none;
    cursor: pointer;
    font-family: var(--paper);
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s;
    border-radius: 30px;
}

.direction-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* 노선 범례 아이콘 (원형 + 양쪽 선) */
.bus-legend-icon {
    display: flex;
    align-items: center;
    gap: 0;
}

.bus-legend-icon .line {
    width: 14px;
    height: 2px;
}

.bus-legend-icon .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bus-legend-icon.route-01-color .line { background: #00BCD4; }
.bus-legend-icon.route-01-color .dot { background: #00BCD4; }
.bus-legend-icon.route-02-color .line { background: #9C27B0; }
.bus-legend-icon.route-02-color .dot { background: #9C27B0; }
.bus-legend-icon.route-03-color .line { background: #FF9800; }
.bus-legend-icon.route-03-color .dot { background: #FF9800; }

/* 노선 정보 박스 */
.bus-route-info {
    position: absolute;
    z-index: 20;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.bus-route-info.info-01 { left: 3%; top: 40%; }
.bus-route-info.info-02 { left: 30%; top: 65%; }
.bus-route-info.info-03 { right: 10%; top: 20%; }

.route-info-header {
    padding: 8px 14px;
    color: #fff;
    font-family: var(--paper);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.route-info-header.route-01-bg { background: #00BCD4; }
.route-info-header.route-02-bg { background: #9C27B0; }
.route-info-header.route-03-bg { background: #FF9800; }

.route-info-body {
    background: #fff;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.route-info-row {
    font-family: var(--preten);
    font-size: 12px;
    color: #384150;
    font-weight: 400;
}

.route-info-label {
    font-weight: 600;
}

.map-control-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    z-index: 15;
    padding: 7px 0;
    position: relative;
}

.map-tab-group {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.map-tab-group::before {
    content: '';
    position: absolute;
    top: 22.5px;
    left: 22.5px;
    right: 22.5px;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    z-index: 0;
}

.map-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    position: relative;
    padding: 0;
}

.map-tab:hover {
    transform: scale(1.05);
}

.map-tab.active .tab-icon,
.map-tab:hover .tab-icon {
    background: var(--color-primary);
}


/* 비활성 탭 아이콘 */
.map-tab:not(.active):not(:hover) .tab-icon {
    background: #fff;
}

.tab-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.tab-icon img.icon-default {
    width: 29px;
    height: 29px;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.tab-icon img.icon-hover {
    width: 29px;
    height: 29px;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.map-tab:hover .tab-icon img.icon-default,
.map-tab.active .tab-icon img.icon-default {
    opacity: 0;
}

.map-tab:hover .tab-icon img.icon-hover,
.map-tab.active .tab-icon img.icon-hover {
    opacity: 1;
}

.tab-label {
    font-size: 15px;
    font-weight: 3300;
    color: #8492A8 !important;
    font-family: var(--paper);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.map-tab:hover .tab-label,
.map-tab.active .tab-label {
    color: var(--color-primary) !important;
}

.map-pause-btn {
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-pause-btn:hover {
    transform: scale(1.05);
}

.pause-icon {
    width: 12px;
    height: 16px;
    position: relative;
}

/* 기본 상태 (자동 회전 중): 일시정지 아이콘 (II) */
.pause-icon::before,
.pause-icon::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 16px;
    background: white;
    border-radius: 2px;
    top: 0;
}

.pause-icon::before {
    left: 0;
}

.pause-icon::after {
    right: 0;
}

/* paused 상태 (일시정지됨): 재생 아이콘 (▶) */
.map-pause-btn.paused .pause-icon::before {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid white;
    border-radius: 0;
    left: 2px;
    top: 0;
    background: transparent;
}

.map-pause-btn.paused .pause-icon::after {
    display: none;
}

.map-legend-box {
    position: absolute;
    bottom: 20%;
    right: 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: var(--paper);
    z-index: 10;
}

.map-legend-box .legend-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

/* 어린이집 범례 — 선택 상태에서만 비활성 항목을 dim 처리 (아무것도 선택 안 됐으면 전부 정상) */
.childcare-legend.has-selection .legend-item:not(.active) {
    opacity: 0.35;
    filter: grayscale(100%);
}

.legend-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-icon-circle img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.legend-label {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    font-family: var(--paper);
    text-align: center;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* SVG 맵 스타일 */
#svg-map {
    width: 95%;
    max-width: 95%;
    max-height: 100%;
    margin: 0 auto;
    position: relative;
}

#svg-map svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
}

#svg-map svg path:hover {
    stroke: var(--color-yellow);
    stroke-width: 5px;
}

#svg-map svg path.no-hover:hover {
    stroke: none;
    stroke-width: 0;
}

/* 버스 모드에서 호버 효과 제거 */
#svg-map.bus-mode svg path:hover {
    stroke: none;
    stroke-width: 0;
}

#svg-map .ico-box {
    position: absolute;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    font-family: var(--paper);
}

#svg-map .ico-box .icon {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 42px;
    font-size: 0;
    background-size: 100% 100%;
}

#svg-map .ico-box .location {
    display: block;
    color: #FFFFFF;
    font-family: var(--pretendard);
    font-weight: var(--fontweight-medium);
}

#svg-map .ico-box.el-1 {
    top: 9.3%;
    right: 4.1%;
}

#svg-map .ico-box.el-2 {
    top: 13%;
    right: 17.2%;
}

#svg-map .ico-box.el-3 {
    top: 19%;
    right: 11%;
}

#svg-map .ico-box.el-4 {
    top: 26%;
    right: 15%;
}

#svg-map .ico-box.el-5 {
    top: 16%;
    right: 29.4%;
}

#svg-map .ico-box.el-6 {
    top: 9%;
    right: 43%;
}

#svg-map .ico-box.el-7 {
    top: 18.3%;
    right: 42%;
}

#svg-map .ico-box.el-8 {
    top: 29.7%;
    right: 33%;
}

#svg-map .ico-box.el-9 {
    top: 31%;
    right: 19.1%;
}

#svg-map .ico-box.el-10 {
    top: 37.4%;
    right: 24.2%;
}

#svg-map .ico-box.el-11 {
    top: 19.8%;
    left: 27.2%;
}
#svg-map .ico-box.el-12 {
    top: 44%;
    left: 29.4%;
}
#svg-map .ico-box.el-13 {
    top: 37.4%;
    left: 43.6%;
}
#svg-map .ico-box.el-14 {
    top: 55%;
    left: 51%;
}
#svg-map .ico-box.el-15 {
    bottom: 30%;
    right: 30%;
}
#svg-map .ico-box.el-16 {
    bottom: 8.7%;
    left: 12.5%;
}
#svg-map .ico-box.el-17 {
    bottom: 1.8%;
    left: 37%;
}

/* 아이콘 배경 이미지 */
.icon {
    background-size: 100%;
}

.icon.emer {
    background-image: url(/images/main/legend-disaster-1.png) !important;
    cursor: pointer;
    pointer-events: auto;
}


/* ========================================
   재난안전 상세 툴팁
   ======================================== */
.disaster-tooltip {
    display: none;
    position: absolute;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    width: 320px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    animation: tooltipFadeIn 0.2s ease;
}

.disaster-tooltip.active {
    display: block;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tooltip-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.tooltip-close-btn:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.tooltip-title {
    font-size: 18px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 16px;
    font-family: var(--paper);
    padding-right: 24px;
}

.tooltip-info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tooltip-info-row {
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border-radius: 8px;
    padding: 12px 16px;
}

.tooltip-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    min-width: 80px;
}

.tooltip-value {
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
    flex: 1;
}

.tooltip-value.status-progress {
    color: #EF4444;
    font-weight: 600;
}

.tooltip-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
   공약 달성도 카드
   ======================================== */
.promise-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: visible;
}

.promise-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 4px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 4px;
}

.promise-card .card-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.promise-card .card-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 30px;
    box-sizing: border-box;
}

.detail-btn {
    padding: 5px 14px;
    background: transparent;
    border: 1px solid #3B82F6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #3B82F6;
    cursor: pointer;
    font-family: var(--paper);
    transition: all 0.2s ease;
}

.detail-btn:hover {
    background: #3B82F6;
    color: #FFFFFF;
}

.petition-donut-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.petition-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-dot.blue {
    background: #3B82F6;
}

.legend-dot.orange {
    background: #F59E0B;
}

.legend-dot.green {
    background: #10B981;
}

.legend-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--paper);
}

.legend-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    font-family: var(--paper);
}

.petition-donut-chart {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    margin-left: auto;
}

.petition-donut-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.donut-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--paper);
}

.donut-total small {
    font-size: 14px;
    font-weight: 400;
}

/* ========================================
   인구지표 카드
   ======================================== */
.dashboard-card.indicator-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: visible;
}

.dashboard-card.indicator-card .card-content {
    padding: 0;
}

.indicator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.indicator-item {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    font-family: var(--paper);
}

.indicator-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.indicator-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 8px;
    background: var(--dashboard-card-content-bg);
    border-radius: 20px 20px 0 0;
}

.indicator-icon-circle {
    width: 60px;
    height: 60px;
    background: var(--population-icon-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-icon-circle img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.indicator-title {
    font-size: 16px;
    color: var(--dashboard-text-white);
    font-weight: 500;
    text-align: center;
}

.indicator-number-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    background: var(--color-primary);
    border-radius: 0 0 20px 20px;
}

.indicator-number {
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.indicator-unit {
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
}

/* ========================================
   주요 키워드 카드
   ======================================== */
.keyword-card {
    min-height: 0;
    overflow: visible;
}

.keyword-card .card-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 15px;
    box-sizing: border-box;
    height: 240px;
    overflow: hidden;
}

.keyword-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    line-height: 1.6;
    height: 100%;
    overflow: hidden;
}

.keyword-item {
    font-family: var(--paper);
    font-weight: 700;
    cursor: default;
    transition: opacity 0.2s;
}

.keyword-item:hover {
    opacity: 0.7;
}

/* ========================================
   일자리/상권 분석 카드
   ======================================== */
.analysis-card {
    min-height: 0;
    overflow: visible;
}

.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.analysis-item {
    border-radius: 20px;
    overflow: hidden;
}

.analysis-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 30px 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 65px;
}

.analysis-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 20px;
}

.analysis-title {
    position: relative;
    z-index: 1;
    font-family: var(--paper);
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.analysis-badge {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 30px;
    padding: 8px 28px;
}

.analysis-value {
    font-family: var(--paper);
    font-size: 20px;
    font-weight: 600;
    color: #384150;
}

/* ========================================
   민원현황 카드
   ======================================== */
.petition-summary-card {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: visible;
}

.petition-summary-card .card-content {
    background:var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.petition-main-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 40px;
    position: relative;
}

.petition-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.petition-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    background: var(--population-icon-bg);
}

.petition-icon-badge img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.petition-month-label,
.petition-year-label {
    font-size: 16px;
    color: var(--dashboard-text-white);
    font-weight: 300;
}

.petition-number {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.petition-number.green {
    color: #10B981;
}

.petition-number.blue {
    color: #3B82F6;
}

.petition-number small {
    font-size: 16px;
    font-weight: 400;
    margin-left: 4px;
    color: var(--dashboard-text-white);
}

.petition-divider {
    width: 1px;
    height: 120px;
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* ========================================
   민원분류별 처리현황 차트 카드
   ======================================== */
.petition-chart-card {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    overflow: visible;
}

.petition-chart-card .card-content {
    background: var(--dashboard-card-content-bg);
    border-radius: 25px;
    padding: 25px;
    box-sizing: border-box;
}

.chart-wrapper {
    width: 100%;
    height: 200px;
    position: relative;
}

.chart-wrapper canvas {
    max-width: 100%;
    max-height: 100%;
}

/* 일별/월별 탭 */
.petition-period-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.period-tab {
    padding: 6px 20px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    font-family: var(--paper);
    transition: all 0.2s ease;
}

.period-tab.active {
    background: #10B981;
    border-color: #10B981;
    color: #FFFFFF;
}

.period-tab:hover:not(.active) {
    border-color: #10B981;
    color: #10B981;
}

/* ========================================
   반응형 - 태블릿 (1400px 이하)
   ======================================== */
@media (max-width: 1500px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 30px 24px;
        height: auto;
    }

    .dashboard-main::after {
        display: none;
    }

    /* section-1: 인구지표 밑으로, 2컬럼 배치 */
    .dashboard-section.section-1 {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        align-items: stretch;
        order: 3;
    }

    .dashboard-section.section-1 > * {
        display: flex;
        flex-direction: column;
    }

    .dashboard-section.section-1 .card-content {
        flex: 1;
    }

    /* section-2: 지도 */
    .dashboard-section.section-2 {
        grid-column: 1;
        order: 1;
        overflow: hidden;
    }

    .dashboard-section.section-2 .map-card {
        overflow: hidden;
    }

    .dashboard-section.section-2 .map-container {
        overflow: hidden;
    }

    .dashboard-section.section-2 .map-area {
        overflow: hidden;
    }

    .dashboard-section.section-2 #svg-map,
    .dashboard-section.section-2 #svg-map svg {
        width: 100%;
        height: auto;
        max-height: 100%;
    }

    /* section-3 */
    .dashboard-section.section-3 {
        grid-column: 2;
        grid-template-columns: 1fr;
        order: 2;
    }

    /* 지도 컨트롤 */
    .map-control-box {
        bottom: 20px;
        left: 0;
        right: 0;
        gap: 0;
    }

    .map-tab-group {
        gap: 0;
        width: 100%;
        justify-content: space-evenly;
    }

    .map-tab-group::before {
        left: 18px;
        right: 18px;
        top: 18px;
    }

    .map-tab {
        gap: 4px;
    }

    .tab-icon {
        width: 36px;
        height: 36px;
    }

    .tab-icon img.icon-default,
    .tab-icon img.icon-hover {
        width: 22px;
        height: 22px;
    }

    .tab-label {
        font-size: 13px;
    }

    .map-legend-box {
        gap: 12px;
    }

    .legend-icon-circle img {
        width: 30px;
        height: 30px;
    }

    .legend-label {
        font-size: 16px;
    }

    #svg-map {
        margin-top: 20px;
    }

    /* 민원현황 도넛 카드 */
    .promise-card .card-content {
        padding: 20px;
    }

    .petition-donut-chart {
        width: 130px;
        height: 130px;
    }

    .donut-total {
        font-size: 18px;
    }

    /* 인구현황 */
    .population-main {
        padding: 20px 16px;
    }

    .population-icon {
        width: 60px;
        height: 60px;
    }

    .population-icon img {
        width: 30px;
    }

    .population-number {
        font-size: 24px;
    }

    .population-detail-item {
        padding: 5px 10px;
    }

    .detail-value {
        font-size: 14px;
    }

    /* 인구지표 */
    .indicator-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .indicator-icon-wrapper {
        padding: 12px 14px;
    }

    .indicator-icon-circle {
        width: 50px;
        height: 50px;
    }

    .indicator-icon-circle img {
        width: 24px;
        height: 24px;
    }

    .indicator-title {
        font-size: 14px;
    }

    .indicator-number {
        font-size: 20px;
    }

    .indicator-number-box {
        padding: 12px 14px;
    }

    .indicator-unit {
        font-size: 14px;
    }

    /* 민원현황 */
    .petition-main-box {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .petition-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .petition-icon-badge {
        width: 50px;
        height: 50px;
    }

    .petition-number {
        font-size: 18px;
    }

    .petition-divider {
        width: 100%;
        height: 1px;
    }

    /* 주요 키워드 */
    .keyword-card .card-content {
        height: 200px;
    }

    /* 일자리/상권 분석 */
    .analysis-bg {
        height: 80px;
        padding: 16px 12px;
        gap: 8px;
    }

    .analysis-title {
        font-size: 20px;
    }

    .analysis-value {
        font-size: 16px;
    }

    /* 차트 */
    .petition-chart-card .card-content {
        padding: 20px;
    }
}

/* ========================================
   반응형 - 태블릿 (1200px 이하)
   ======================================== */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-section.section-2 {
        grid-column: 1;
        order: 1;
    }

    .dashboard-section.section-3 {
        grid-column: 1;
        order: 2;
    }
}

/* ========================================
   반응형 - 모바일 (768px 이하)
   ======================================== */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
        height: auto;
    }

    /* 모든 섹션 1컬럼 */
    .dashboard-section.section-1 {
        display: grid;
        grid-column: 1;
        grid-template-columns: 1fr;
        order: 3;
    }

    .dashboard-section {
        row-gap: 20px;
    }

    .dashboard-section.section-2 {
        grid-column: 1;
        order: 1;
    }

    .dashboard-section.section-3 {
        grid-column: 1;
        order: 2;
    }

    /* 지도 컨트롤 조정 */
    .map-control-box {
        bottom: 10px;
        left: 0;
        right: 0;
        gap: 0;
        padding: 12px 0;
    }

    .map-tab-group {
        gap: 0;
        width: 100%;
        justify-content: space-evenly;
    }

    .map-tab-group::before {
        left: 14px;
        right: 14px;
        top: 14px;
    }

    .map-tab {
        gap: 4px;
    }

    .map-tab .tab-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .map-tab .tab-icon img.icon-default,
    .map-tab .tab-icon img.icon-hover {
        width: 24px !important;
        height: 24px !important;
    }

    .map-tab .tab-label {
        font-size: 13px;
        white-space: nowrap;
    }

    .map-pause-btn {
        display: none;
    }

    .map-legend-box {
        gap: 8px;
    }

    .legend-icon-circle img {
        width: 24px;
        height: 24px;
    }

    .legend-label {
        font-size: 14px;
    }

    #svg-map {
        margin-top: 16px;
    }

    #svg-map .ico-box .location {
        font-size: 0.8em;
        font-weight: 400;
    }

    /* 인구현황 */
    .population-header {
        gap: 12px;
    }

    .population-icon {
        width: 60px;
        height: 60px;
    }

    .population-icon img {
        width: 30px;
    }

    .population-number {
        font-size: 24px;
    }

    .population-details {
        grid-template-columns: repeat(3, 1fr);
    }

    .population-detail-item {
        padding: 5px 8px;
    }

    .detail-value {
        font-size: 14px;
    }

    /* 민원현황 도넛 카드 */
    .promise-card .card-content {
        padding: 16px;
    }

    .petition-donut-chart {
        width: 120px;
        height: 120px;
    }

    .donut-total {
        font-size: 16px;
    }

    .legend-name {
        font-size: 13px;
    }

    .legend-value {
        font-size: 12px;
    }

    /* 인구지표 */
    .indicator-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .indicator-icon-wrapper {
        padding: 10px 12px;
        gap: 8px;
    }

    .indicator-icon-circle {
        width: 44px;
        height: 44px;
    }

    .indicator-icon-circle img {
        width: 22px;
        height: 22px;
    }

    .indicator-title {
        font-size: 13px;
    }

    .indicator-number {
        font-size: 18px;
    }

    .indicator-number-box {
        padding: 10px 12px;
    }

    .indicator-unit {
        font-size: 13px;
    }

    /* 주요 키워드 */
    .keyword-card .card-content {
        height: auto;
        padding: 20px;
        overflow: visible;
    }

    .keyword-cloud {
        gap: 4px 8px;
        height: auto;
        overflow: visible;
        zoom: 0.7;
    }

    /* 일자리/상권 분석 */
    .analysis-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .analysis-bg {
        height: 80px;
        padding: 16px 12px;
        gap: 8px;
    }

    .analysis-title {
        font-size: 18px;
    }

    .analysis-badge {
        padding: 4px 16px;
    }

    .analysis-value {
        font-size: 14px;
    }

    /* 민원현황 */
    .petition-main-box {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .petition-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
    }

    .petition-divider {
        width: 100%;
        height: 1px;
    }

    .petition-icon-badge {
        width: 44px;
        height: 44px;
    }

    .petition-number {
        font-size: 18px;
    }

    /* 차트 */
    .chart-wrapper {
        height: 200px;
    }

    .petition-chart-card .card-content {
        padding: 16px;
    }

    /* 재난/교통 카드 내부 */
    .disaster-icon:not(.tab-icon),
    .traffic-icon:not(.tab-icon) {
        width: 40px;
        height: 40px;
    }

    .disaster-icon:not(.tab-icon) img,
    .traffic-icon:not(.tab-icon) img {
        width: 20px;
    }

    .disaster-number,
    .traffic-number {
        font-size: 18px;
    }

    .disaster-item,
    .traffic-item {
        gap: 10px;
        padding: 6px 8px;
    }

    /* 카드 헤더 */
    .card-header h3 {
        font-size: 17px;
    }

    /* 툴팁 */
    .disaster-tooltip {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 280px;
        padding: 18px;
        z-index: 9999;
    }

    .disaster-tooltip .tooltip-arrow {
        display: none;
    }
}