/* 날씨 위젯 스타일 */
.basic-weather-guangzhou {
    position: relative;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    font-family: 'Malgun Gothic', sans-serif;
    margin-bottom: 20px;
}

/* 위젯 헤더 */
.basic-weather-guangzhou .widget-header {
    background-color: #3F51B5; /* 인디고 색상 */
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.basic-weather-guangzhou .widget-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
}

.basic-weather-guangzhou .widget-title i {
    margin-right: 8px;
    font-size: 16px;
}

/* 탭 스타일 */
.basic-weather-guangzhou .weather-tabs {
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.basic-weather-guangzhou .nav-tabs {
    border-bottom: none;
    padding: 0 10px;
}

.basic-weather-guangzhou .nav-item {
    margin-bottom: 0;
}

.basic-weather-guangzhou .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 15px;
    font-weight: 500;
    color: #555;
    transition: all 0.3s ease;
}

.basic-weather-guangzhou .nav-link:hover {
    border-color: #ddd;
    background-color: #f9f9f9;
    color: #333;
}

.basic-weather-guangzhou .nav-link.active {
    color: #3F51B5;
    border-bottom: 2px solid #3F51B5;
    background-color: transparent;
}

/* 탭 내용 */
.basic-weather-guangzhou .tab-content {
    padding: 15px;
}

.basic-weather-guangzhou .weather-info {
    padding: 10px;
}

/* 온도 및 아이콘 */
.basic-weather-guangzhou .weather-icon {
    margin-bottom: 15px;
}

.basic-weather-guangzhou .weather-icon i {
    font-size: 3rem;
}

.basic-weather-guangzhou .temperature {
    margin-bottom: 20px;
}

.basic-weather-guangzhou .temp-value {
    font-size: 2rem;
    font-weight: 600;
}

.basic-weather-guangzhou .description {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

/* 날씨 상세 */
.basic-weather-guangzhou .weather-details {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 10px 15px;
}

.basic-weather-guangzhou .detail-row {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.basic-weather-guangzhou .detail-row:last-child {
    border-bottom: none;
}

.basic-weather-guangzhou .detail-label {
    color: #666;
    font-size: 13px;
}

.basic-weather-guangzhou .detail-value {
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

/* 도시별 색상 */
#guangzhou .temp-value {
    color: #4CAF50; /* 녹색 */
}

#seoul .temp-value {
    color: #2196F3; /* 파란색 */
}

#tokyo .temp-value {
    color: #F44336; /* 빨간색 */
}

/* 날씨 아이콘 색상 */
.basic-weather-guangzhou .fa-sun-o {
    color: #FF9800; /* 주황색 - 맑음 */
}

.basic-weather-guangzhou .fa-cloud {
    color: #78909C; /* 회색 - 구름 */
}

.basic-weather-guangzhou .fa-tint {
    color: #03A9F4; /* 파란색 - 비 */
}

.basic-weather-guangzhou .fa-bolt {
    color: #FFC107; /* 노란색 - 번개 */
}

.basic-weather-guangzhou .fa-snowflake-o {
    color: #E0E0E0; /* 하얀색 - 눈 */
}

/* 반응형 조정 */
@media (max-width: 576px) {
    .basic-weather-guangzhou .nav-link {
        padding: 10px;
        font-size: 13px;
    }
    
    .basic-weather-guangzhou .temp-value {
        font-size: 1.8rem;
    }
    
    .basic-weather-guangzhou .weather-icon i {
        font-size: 2.5rem;
    }
}

/* 날씨 위젯 스타일 */
.weather-card {
    margin-bottom: 10px;
}

.weather-card .card-header {
    padding: 0;
    border-bottom: 1px solid #e1e4e8;
    background-color: #f6f8fa;
}

.weather-card .nav-tabs {
    border-bottom: none;
}

.weather-card .nav-item {
    margin-bottom: 0;
}

.weather-card .nav-link {
    border: none;
    border-top: 2px solid transparent;
    border-radius: 0;
    padding: 0.4rem 0.8rem;
    font-weight: 500;
    color: #777;
}

.weather-card .nav-link:hover {
    border-color: transparent;
    background-color: #f8f9fa;
}

.weather-card .nav-link.active {
    background-color: #fff;
    border-top: 2px solid #007bff;
    color: #333;
}

.weather-card .card-body {
    padding: 0.75rem;
}

.weather-card h5 {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.weather-card .h3 {
    font-size: 1.5rem;
    line-height: 1.2;
}

.weather-card small {
    font-size: 0.75rem;
}

.weather-card hr {
    margin: 0.5rem 0;
}

.weather-card .row {
    margin-left: -5px;
    margin-right: -5px;
}

.weather-card .col-4, 
.weather-card .col-8,
.weather-card .col-6 {
    padding-left: 5px;
    padding-right: 5px;
}

/* 날씨 아이콘 */
.weather-card .fa-sun-o {
    color: #f39c12; /* 맑음 - 노란색/주황색 */
}

.weather-card .fa-cloud {
    color: #7f8c8d; /* 구름 - 회색 */
}

.weather-card .fa-tint {
    color: #3498db; /* 비 - 파란색 */
}

.weather-card .fa-bolt {
    color: #f1c40f; /* 천둥번개 - 노란색 */
}

.weather-card .fa-snowflake-o {
    color: #ecf0f1; /* 눈 - 하얀색 */
}

.weather-card .fa-fog,
.weather-card .fa-windy {
    color: #95a5a6; /* 안개, 바람 - 회색 */
}

/* 도시별 텍스트 색상 */
.city-guangzhou {
    color: #28a745; /* 녹색 */
}

.city-seoul {
    color: #007bff; /* 파란색 */
}

.city-tokyo {
    color: #dc3545; /* 빨간색 */
}

/* 컴팩트 레이아웃 추가 스타일 */
.weather-card .fa-3x {
    font-size: 2.5em; /* 아이콘 크기 줄이기 */
}

.weather-card .tab-content {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
}

.weather-card .text-muted {
    line-height: 1.2;
}

/* 날씨 위젯 기본 스타일 */
.weather-widget .card-header {
    border-bottom: 1px solid #e1e4e8;
    background-color: #f6f8fa;
}

/* 카드 자체를 컴팩트하게 */
.weather-widget.card {
    margin-bottom: 15px !important; /* 하단 여백 줄임 */
}

.weather-widget .card-body {
    padding: 0.75rem !important; /* 패딩 축소 */
}

/* 날씨 탭 스타일 */
.weather-widget .nav-tabs {
    border-bottom: none;
}

.weather-widget .nav-tabs .nav-link {
    transition: all 0.3s ease;
    padding: 8px 12px; /* 패딩 축소 */
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-right: 2px;
    color: #495057;
    font-size: 0.9rem; /* 폰트 사이즈 축소 */
}

.weather-widget .nav-tabs .nav-link:hover {
    background-color: #f8f9fa;
    border-color: #e9ecef #e9ecef #dee2e6;
}

.weather-widget .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    border-top: 2px solid #007bff;
}

/* 탭 내용 스타일 */
.weather-widget .tab-content {
    padding-top: 5px; /* 패딩 축소 */
    background-color: #fff;
}

/* 날씨 아이콘 스타일 */
.weather-widget .fa-3x {
    font-size: 2rem; /* 아이콘 사이즈 축소 */
}

/* 날씨 유형별 색상 */
.weather-widget .fa-sun-o {
    color: #f39c12 !important; /* 노란색/주황색 - 맑음 */
}

.weather-widget .fa-cloud {
    color: #7f8c8d !important; /* 회색 - 구름 */
}

.weather-widget .fa-tint {
    color: #3498db !important; /* 파란색 - 비 */
}

.weather-widget .fa-bolt {
    color: #f1c40f !important; /* 노란색 - 번개 */
}

.weather-widget .fa-snowflake-o {
    color: #ecf0f1 !important; /* 하얀색 - 눈 */
}

.weather-widget .fa-align-justify,
.weather-widget .fa-refresh {
    color: #95a5a6 !important; /* 회색 - 안개, 바람 등 */
}

/* 도시별 색상 구분 - 도시 이름만 색상 다르게 */
#guangzhou h5 {
    color: #28a745;
}

#seoul h5 {
    color: #007bff;
}

#tokyo h5 {
    color: #dc3545;
}

/* 간격 조정 */
.weather-widget .my-2 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.weather-widget h5 {
    font-size: 1rem; /* 제목 사이즈 축소 */
}

.weather-widget .h3 {
    font-size: 1.5rem; /* 온도 표시 사이즈 축소 */
    margin-bottom: 0.3rem !important;
}

.weather-widget small {
    font-size: 80%; /* 작은 텍스트 더 축소 */
}

/* 풍속, 체감온도 텍스트 크기 조정 */
.weather-widget .col-6 div {
    font-size: 0.9rem;
}