@charset "utf-8";

/* ==========================================================================
   그누보드5 관리자 스타일 확장 애널리틱스 CSS
   ========================================================================== */

/* 대시보드 요약 지표 카드 (그누보드5 테마 톤앤매너) */
.gna_summary_cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}
.gna_card {
    flex: 1;
    min-width: 180px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gna_card_title {
    font-size: 13px;
    font-weight: bold;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gna_card_value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    letter-spacing: -0.5px;
}
.gna_card_value .unit {
    font-size: 14px;
    font-weight: normal;
    color: #888;
    margin-left: 4px;
}
.gna_card.active_users {
    border-left: 4px solid #3498db;
}
.gna_card.pv {
    border-left: 4px solid #2ecc71;
}
.gna_card.uv {
    border-left: 4px solid #9b59b6;
}
.gna_card.duration {
    border-left: 4px solid #f39c12;
}
.gna_card.bounce {
    border-left: 4px solid #e74c3c;
}

/* 실시간 펄스 인디케이터 */
.gna_pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    margin-right: 6px;
    box-shadow: 0 0 0 rgba(46, 204, 113, 0.4);
    animation: gna_pulse_anim 1.5s infinite;
}
@keyframes gna_pulse_anim {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* 그리드 2열 레이아웃 */
.gna_row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.gna_col_6 {
    flex: 1;
    min-width: 320px;
}
.gna_col_12 {
    flex: 100%;
}

/* 차트 박스 */
.gna_box {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.gna_box_title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 날짜 필터 영역 (그누보드 local_sch 호환) */
.gna_date_filter {
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gna_date_filter .btn_date {
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    color: #444;
}
.gna_date_filter .btn_date.active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
    font-weight: bold;
}

/* 비율 게이지 바 */
.gna_bar_wrap {
    width: 100%;
    background: #f0f0f0;
    border-radius: 3px;
    height: 14px;
    overflow: hidden;
    position: relative;
}
.gna_bar_fill {
    height: 100%;
    background: #5dade2;
    border-radius: 3px;
}