@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
    
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f4f5f7;
    margin: 0;
}

/* 계산기 전체 컨테이너 */
.loan-calculator-wrapper {
    width: 100%;
    background-color: #ffffff;
    padding: 32px;
    box-sizing: border-box;
}

/* 제목 및 설명 */
.calculator-header {
    max-width: 800px;
    margin: 0 auto;
}
.calculator-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    text-align: center;
    margin: 0 0 8px 0;
}

.calculator-header p {
    font-size: 16px;
    color: #555;
    text-align: center;
    margin: 0 0 40px 0;
    line-height: 1.6;
}

/* 폼 그룹 스타일 */
.form-group {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.form-group:last-of-type {
    border-bottom: none;
    margin-bottom: 32px;
}

.form-group .label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    flex-shrink: 0;
    margin-right: 16px;
}

.form-group .controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 대출금액 */
.amount-input-group {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #4a56e2;
}
.amount-input-group input {
    border: none;
    text-align: right;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    width: 180px;
    outline: none;
}
.amount-input-group input::placeholder {
    color: #ccc;
}

/* 대출금리 (고정) */
.interest-rate {
    font-size: 18px;
    font-weight: 700;
    color: #4a56e2;
}

/* 라디오/체크박스 버튼 스타일 */
.choice-buttons input[type="radio"],
.choice-buttons input[type="checkbox"] {
    display: none;
}

.choice-buttons label {
    display: inline-block;
    padding: 10px 18px;
    background-color: #f0f0f0;
    color: #555;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}
.choice-buttons input:checked + label {
    background-color: #4a56e2;
    color: #ffffff;
    font-weight: 700;
    border-color: #4a56e2;
}

/* 우대금리 (체크박스) */
.preferential-rate-group .controls {
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.preferential-rate-group .choice-buttons {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.preferential-rate-group label {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* [수정] 정렬 방향 변경 */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    width: 320px;
    padding: 12px 16px;
    box-sizing: border-box;
    text-align: right;
    position: relative; /* [추가] 가상요소 위치 기준 */
    padding-left: 42px; /* [수정] 체크박스 공간 확보 */
}
.preferential-rate-group label .rate-value {
    font-weight: 700;
    color: #4a56e2;
    margin-right: 12px;
}
.preferential-rate-group label .rate-desc {
    color: #333;
}

/* [추가] 체크되지 않은 상태의 체크박스 모양 만들기 */
.preferential-rate-group label::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* 우대금리 선택 시 스타일 */
.preferential-rate-group input:checked + label {
    background-color: #4a56e2;
    border-color: #4a56e2;
}
.preferential-rate-group input:checked + label .rate-value,
.preferential-rate-group input:checked + label .rate-desc {
    color: #ffffff;
}

/* [수정] 체크된 상태의 체크박스 모양(체크마크) 재정의 */
.preferential-rate-group input:checked + label::before {
    content: '✓';
    background-color: transparent; /* 배경 없음 */
    border-color: transparent; /* 테두리 없음 */
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 18px; /* 높이에 맞춰 수직 정렬 */
}

#loan-form > button,
#result-display {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.calculate-btn {
    width: 100%;
    display: block;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(90deg, #ed6ea0, #4a56e2);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.calculate-btn:hover {
    opacity: 0.9;
}

.result-display {
    display: none;
    margin-top: 24px;
    padding: 24px;
    background-color: #4a56e2;
    color: #ffffff;
    border-radius: 12px;
    text-align: center;
    line-height: 1.7;
    font-size: 18px;
    box-sizing: border-box;
}

.result-display strong {
    font-size: 22px;
    font-weight: 700;
}