/*
 * METEM Color Harmony Fix v1
 * 사용자 제보 영역만 보정:
 * 1) 아이템 카테고리 패널
 * 2) 차트 고정 Y축 배경
 * 3) 이벤트 전/후 평균 박스
 *
 * 기존 chart JS / canvas / scroll / responsive 동작은 변경하지 않습니다.
 */

/* 1. 아이템 카테고리 패널 — 메인 카드와 같은 navy 계열로 통일 */
.market-secondary-panel {
    background:
        linear-gradient(180deg, rgba(18, 29, 49, .985), rgba(13, 23, 40, .99)) !important;
    border-right-color: rgba(148, 163, 184, .12) !important;
    box-shadow:
        16px 0 40px rgba(2, 6, 23, .24),
        inset 1px 0 0 rgba(255, 255, 255, .018) !important;
}

.market-secondary-head {
    border-bottom-color: rgba(148, 163, 184, .10) !important;
}

.market-category {
    background: rgba(30, 43, 66, .56) !important;
    border-color: rgba(148, 163, 184, .10) !important;
    color: #aebbd0 !important;
}

.market-category:hover,
.market-category:focus-visible,
.market-category.active {
    background: rgba(38, 63, 99, .68) !important;
    border-color: rgba(96, 165, 250, .24) !important;
    color: #e5edf8 !important;
}

.market-item-list-panel .flyout-head {
    background: rgba(18, 29, 49, .97) !important;
    border-bottom-color: rgba(148, 163, 184, .10) !important;
}

/* 2. 차트 고정 Y축 — 검은 직사각형처럼 보이던 부분 제거
   배경을 투명하게 하여 차트 카드 자체 배경과 자연스럽게 연결 */
.chart-fixed-y-axis {
    background: transparent !important;
}

/* canvas 자체는 그대로 두고 Y축 레이아웃/폭/높이는 절대 변경하지 않음 */
.chart-fixed-y-axis > canvas {
    background: transparent !important;
}

/* 3. 이벤트 전/후 평균 박스 — 주변 카드와 같은 톤으로 보정 */
.event-impact-prices {
    background: rgba(18, 29, 49, .62) !important;
    border-color: rgba(148, 163, 184, .10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

.event-impact-prices > span {
    color: #8494aa !important;
}

.event-impact-prices > span[aria-hidden="true"] {
    color: #64748b !important;
}

.event-impact-prices strong {
    color: #d8e1ed !important;
}

/* 이벤트 카드의 설명 문구도 너무 어둡지 않게 */
.event-impact-card > p {
    color: #9aa9bd !important;
}