/* 기본 배경 및 폰트 */
body { 
    background-color: #f8f9fa; 
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; 
    cursor: default;
}
.container { padding-top: 20px; max-width: 600px; }

/* 카드형 레이아웃 */
.stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.stat-label { font-size: 13px; color: #777; margin-bottom: 5px; font-weight: bold; }
.mb-15 { margin-bottom: 15px; }
.mb-10 { margin-bottom: 10px; }

/* 페트 이름 입력창 (너비 제한) */
.name-input-area {
    display: inline-flex !important;
    width: auto !important;
    min-width: 220px;
    max-width: 280px;
    position: relative;
}
#name {
    height: 45px !important;
    font-size: 16px !important;
    border-radius: 10px 0 0 10px !important;
}

/* 자동완성 팝업 */
#pet-suggestions-box {
    position: absolute;
    top: 45px; left: 0; width: 100%;
    background: white; border: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999; display: none;
    max-height: 200px; overflow-y: auto;
}
#pet-suggestions li { padding: 12px 15px; border-bottom: 1px solid #eee; cursor: pointer; }

/* 스탯 입력기 및 스피너 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield !important; }

.stat-group .btn {
    width: 40px !important; height: 45px !important; padding: 0 !important;
    font-size: 22px !important; line-height: 41px !important;
    background-color: #eee; font-weight: bold;
}
.stat-group input {
    height: 45px !important; text-align: center; font-size: 18px !important;
    font-weight: bold; border-left: none; border-right: none; border-radius: 0 !important;
}

/* S 초기치/성장률 출력 스타일 */
/* S 초기치/성장률 세로 레이아웃 스타일 */
.base-row { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.base-title { 
    font-weight: bold; 
    color: #337ab7; 
    font-size: 16px; 
    border-bottom: 2px solid #337ab7;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.base-container { 
    display: flex; 
    flex-direction: column; /* 세로 정렬로 변경 */
    gap: 8px;
}

.base-item { 
    display: flex; 
    justify-content: space-between; /* 이름은 왼쪽, 수치는 오른쪽 */
    flex-direction: column; /* 라벨을 숫자 위로 보내는 핵심 설정 */
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}

.base-val { 
    font-size: 16px; 
    font-weight: bold; 
    color: #333; 
}

.base-name { 
    font-size: 14px; 
    color: #666; 
    font-weight: bold;
}

/* 총합 강조 스타일 */
.total-item {
    background-color: #fff5f5;
    padding: 8px;
    border-radius: 5px;
    border-bottom: none;
}
/* 결과 테이블 */
#result .table thead tr { background-color: #337ab7; color: white; }
#result .table th, #result .table td { text-align: center; vertical-align: middle; }
.highlight { color: #d9534f; font-weight: bold; }

/* TOP 버튼 */
#btnTop {
    position: fixed; bottom: 20px; right: 20px; display: none;
    z-index: 99; border: none; background-color: #337ab7;
    color: white; padding: 15px; border-radius: 50%;
}