/* 静的チャート表示用CSS */

.hyaluronic-chart {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    margin: 40px 0 !important;
    padding: 30px 20px 20px !important;
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
    border-radius: 15px !important;
    position: relative !important;
    min-height: 400px !important;
}

.chart-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 40px !important;
    height: 350px !important;
    padding-bottom: 10px !important;
    padding-top: 50px !important;
    border-bottom: 2px solid #ddd !important;
    justify-content: center !important;
}

.age-bar-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.bar-container {
    height: 270px !important;
    display: flex !important;
    align-items: flex-end !important;
    margin-bottom: 15px !important;
    position: relative !important;
    gap: 15px !important;
    padding-top: 20px !important;
}

.bar {
    width: 60px !important;
    height: 270px !important;
    position: relative !important;
    background: #e0e0e0 !important;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
}

.bar-fill {
    width: 100% !important;
    border-radius: 8px 8px 0 0 !important;
    position: relative !important;
    /* 直接高さを設定 */
}

.bar-fill.age-20s {
    height: 100% !important;
    background: linear-gradient(135deg, #4CAF50, #8BC34A) !important;
}

.bar-fill.age-30s {
    height: 75% !important;
    background: linear-gradient(135deg, #FFC107, #FFD54F) !important;
}

.bar-fill.age-40s {
    height: 50% !important;
    background: linear-gradient(135deg, #FF9800, #FFB74D) !important;
}

.bar-fill.age-50s {
    height: 25% !important;
    background: linear-gradient(135deg, #F44336, #EF5350) !important;
}

.bar-percentage {
    display: flex !important;
    align-items: center !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #2c1810 !important;
    background: white !important;
    padding: 8px 15px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    border: 2px solid #d4896b !important;
    min-width: 60px !important;
    justify-content: center !important;
    align-self: center !important;
    margin-left: 10px !important;
}

.age-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-top: 10px !important;
}

.age-status {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    margin-top: 5px !important;
}

.age-status.healthy {
    background: #e8f5e8 !important;
    color: #2e7d32 !important;
}

.age-status.warning {
    background: #fff3e0 !important;
    color: #f57c00 !important;
}

.age-status.danger {
    background: #ffebee !important;
    color: #c62828 !important;
}