body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }
        .bmi-container {
            background-color: #C4C4C4;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            width: 350px;
            text-align: center;
        }
        h2 {
            color: #333;
            margin-bottom: 0px;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 0px;
            text-align: left;
        }
        label {
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
            font-size: 0.9em;
        }
        input[type="number"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1em;
            width: 100%;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #ff9800; /* 주황색 계열 */
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }
        button:hover {
            background-color: #e68a00;
        }
        .result-box {
            margin-top: 30px;
            padding: 15px;
            border: 2px solid #ccc;
            border-radius: 5px;
            text-align: center;
            min-height: 60px;
        }
        .bmi-value {
            font-size: 1.8em;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .status-text {
            font-size: 1.1em;
            font-weight: bold;
        }
        /* 상태별 색상 클래스 (JavaScript에서 동적으로 적용) */
        .status-underweight { color: #2196F3; } /* 저체중: 파랑 */
        .status-normal { color: #4CAF50; } /* 정상: 녹색 */
        .status-overweight { color: #FFC107; } /* 과체중: 노랑 */
        .status-obesity1 { color: #FF9800; } /* 비만1: 주황 */
        .status-obesity2 { color: #F44336; } /* 비만2: 빨강 */

/* 모달 배경: 전체 화면을 덮고 숨김 */
.modal {
    display: none; /* 초기에는 숨김 */
    position: fixed; /* 화면에 고정 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* 모달 내용: 중앙에 위치 */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 상하 마진으로 중앙 배치 유도 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 410px; /* 최대 너비 설정 */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
}

/* 닫기 버튼 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

/* 표 스타일링 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
}
th, td {
    border: 1px solid #ddd;
    padding: 10px;
}

/* 색상 코드 (시각적 강조) */
.warning { background-color: #ffe0b2; } /* 주황색 계열 */
.danger-1 { background-color: #ffccbc; } /* 밝은 빨간색 계열 */
.danger-2 { background-color: #ffab91; } /* 중간 빨간색 계열 */
.danger-3 { background-color: #ff8a65; } /* 진한 빨간색 계열 */