/**
 * 금시세 계산기 스타일 - 다크 테마
 */

/* 카드 헤더 - 금색 유지 */
.card-header.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #000 !important;
    border-bottom: none;
}

/* 카드 헤더 - 정보 색상 */
.card-header.bg-info {
    background: linear-gradient(135deg, #3b6fe0 0%, #2c56b8 100%) !important;
    border-bottom: none;
}

/* 카드 헤더 - 성공 색상 */
.card-header.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-bottom: none;
}

/* 카드 헤더 - 프라이머리 색상 */
.card-header.bg-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-bottom: none;
}

/* 금 테두리 카드 */
.card.border-warning {
    border-color: rgba(245, 158, 11, 0.5) !important;
}

/* 카드 푸터 - bg-light 오버라이드 */
.card-footer.bg-light {
    background: #f1f3f7 !important;
    border-top: 1px solid var(--border-color) !important;
}

/* 시세 정보 텍스트 */
#goldPriceInfo .text-muted {
    color: var(--text-muted) !important;
}

/* 변환 결과 */
#weightResult,
#goldPriceResult {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-primary);
}

/* 테이블 스타일 */
.table-sm {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-secondary);
}

.table-sm th {
    color: var(--text-primary);
    background: #ffffff;
}

.table-sm td {
    color: var(--text-secondary);
}

/* 금 가격 표시 */
.gold-price-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f59e0b;
}

/* 차트 영역 */
#goldChart {
    background: #fbfcfd;
    border-radius: var(--radius-md);
}

/* 버튼 스타일 */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #f59e0b;
    color: #000;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border-color: #d97706;
    color: #000;
}

/* 금시세 새로고침 버튼 */
.gold-refresh-btn {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    transition: all 0.2s ease;
}

.gold-refresh-btn:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #f59e0b !important;
    transform: scale(1.02);
}

.gold-refresh-btn i {
    transition: transform 0.3s ease;
}

.gold-refresh-btn:hover i {
    transform: rotate(180deg);
}

/* 알림 영역 */
.alert-info {
    background: rgba(59, 111, 224, 0.1) !important;
    border: 1px solid rgba(59, 111, 224, 0.3) !important;
    color: var(--accent-primary) !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

/* 탭 네비게이션 */
.nav-tabs {
    border-bottom-color: var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
    border-bottom-color: var(--accent-primary);
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--accent-primary);
    border-color: transparent;
    border-bottom-color: var(--accent-primary);
}

/* 금 순도 선택 버튼 */
.btn-group .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-group .btn-outline-secondary:hover,
.btn-group .btn-outline-secondary.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* 컴팩트 카드 헤더 */
.card-header.py-2 h6 {
    font-size: 0.9rem;
}

/* 금시세 정보 인라인 표시 */
#goldPriceInfo h4 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
}

#goldPriceInfo p {
    margin-bottom: 0.5rem;
}

/* 금시세 로딩 인라인 */
#goldPriceInfo .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* 입력 필드 placeholder */
.form-control-sm::placeholder {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 금시세 이력 테이블 컴팩트 */
#goldHistoryTable .table-sm td,
#goldHistoryTable .table-sm th {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
}

/* 변동값/변동률 색상 강화 */
#goldPriceInfo .text-danger.fw-bold,
#goldHistoryTable .text-danger.fw-bold,
.text-danger.fw-bold {
    color: #ef4444 !important;
    text-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    font-weight: 700 !important;
}

#goldPriceInfo .text-info.fw-bold,
#goldHistoryTable .text-info.fw-bold,
.text-info.fw-bold {
    color: #3b6fe0 !important;
    text-shadow: 0 2px 8px rgba(59, 111, 224, 0.3);
    font-weight: 700 !important;
}

/* 테이블 내 변동값/변동률 색상 */
#goldHistoryTable td span.text-danger.fw-bold {
    color: #ef4444 !important;
}

#goldHistoryTable td span.text-info.fw-bold {
    color: #3b6fe0 !important;
}

/* 반응형 */
@media (max-width: 768px) {
    .gold-price-display {
        font-size: 1.25rem;
    }
    
    /* 모바일에서 라벨 숨김 */
    .card-body .form-label {
        font-size: 0.75rem;
    }

    /* 금 무게 변환: 모바일에서 버튼·셀렉트 겹침 방지 */
    .gold-weight-conversion-row {
        row-gap: 0.75rem;
    }
    .gold-weight-conversion-row .col-4 .btn,
    .gold-weight-conversion-row .col-6 .form-select {
        min-width: 0;
    }
}