/* ================== 모바일 메뉴 수정 (Bootstrap 보완) ================== */
/* Bootstrap collapse 기본 동작 보장 */
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

@media (max-width: 991.98px) {
    .navbar-collapse:not(.show) {
        display: none;
    }
    
    .navbar-collapse.collapsing {
        display: block !important;
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }
    
    .navbar-collapse.show {
        display: block !important;
    }
    
    .navbar-toggler {
        display: block !important;
        padding: 0.25rem 0.75rem !important;
        font-size: 1.25rem !important;
        line-height: 1 !important;
        background-color: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 0.375rem !important;
    }
}

@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    
    .navbar-toggler {
        display: none !important;
    }
}

/* 퍼스널컬러 자가진단 - 메인 진행바 */
.personal-progress-bar {
    width: 100%;
    height: 12px;
    background: #f3f3f3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}
.personal-progress-bar .personal-progress {
    height: 100%;
    background: linear-gradient(90deg, #ffd6a5 40%, #b5ead7 100%);
    border-radius: 6px;
    transition: width 0.3s;
}

/* 퍼스널컬러 질문 영역 */
#questionArea.personal-color {
    background: #fffaf3;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 214, 165, 0.10);
    padding: 32px 24px;
    margin-bottom: 18px;
    font-size: 1.15rem;
}
.personal-question {
    font-size: 1.18rem;
    color: #d35400;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(255, 214, 165, 0.18);
}
.personal-options {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 12px;
}
.personal-option-btn {
    background: #ffe0b2;
    color: #333;
    border: none;
    border-radius: 16px;
    padding: 24px 32px;
    font-size: 1.15rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(255, 214, 165, 0.08);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    min-width: 140px;
    text-align: center;
}
.personal-option-btn.selected, .personal-option-btn:active {
    background: #ffd6a5;
    color: #fff;
    font-weight: bold;
}
.personal-option-btn:hover {
    background: #b5ead7;
    color: #ffb085;
    font-weight: bold;
    box-shadow: 0 2px 12px rgba(181, 234, 215, 0.18);
}
.personal-next-btn, .personal-result-btn {
    min-width: 120px;
    font-size: 1.08rem;
    padding: 10px 24px;
    margin-left: 8px;
    background: #ffd6a5;
    border: none;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 214, 165, 0.08);
    transition: background 0.2s;
}
.personal-next-btn:hover, .personal-result-btn:hover {
    background: #b5ead7;
    color: #ffd6a5;
}
#resultArea.personal-color {
    background: #fffbe6;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(255, 214, 165, 0.10);
    padding: 36px 28px;
    margin-top: 24px;
    text-align: center;
}
.personal-type {
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffb085;
    margin-bottom: 18px;
    letter-spacing: 2px;
}
.personal-desc {
    font-size: 1.15rem;
    color: #34495e;
    margin-bottom: 18px;
}
.personal-colors {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}
.personal-color-chip {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: inline-block;
}
@media (max-width: 600px) {
    #questionArea.personal-color, #resultArea.personal-color {
        padding: 18px 8px;
    }
    .personal-type {
        font-size: 1.5rem;
    }
    .personal-desc {
        font-size: 1rem;
    }
    .personal-options {
        gap: 12px;
    }
    .personal-option-btn {
        padding: 16px 8px;
        font-size: 1rem;
    }
}
/* 심리/적성 테스트 드롭다운 하위 메뉴 hover 배경색 진하게 */
.mbti-question-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 40px 24px;
    margin: 0 auto 32px auto;
    max-width: 480px;
}
.mbti-question {
    font-size: 1.25rem;
    color: #333;
}
.mbti-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.mbti-option-btn {
    background: #ffc1ea;
    color: #333;
    border: none;
    border-radius: 24px;
    padding: 18px 0;
    width: 100%;
    max-width: 340px;
    font-size: 1.1rem;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}
.mbti-option-btn:hover, .mbti-option-btn:focus {
    background: #ff8edc;
    color: #fff;
}
.mbti-progress-bar {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    margin-bottom: 24px;
    overflow: hidden;
}
.mbti-progress {
    height: 100%;
    background: #ffc1ea;
    border-radius: 4px;
    transition: width 0.3s;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
    background-color: #0d6efd;
    color: #fff;
}
/* 입력 라벨과 입력창 간격을 더 좁게(붙게) - 공통 적용 */
.form-row label,
#otherIncomeTaxForm label {
    margin-bottom: 0px !important;
}
.form-row input,
.form-row select,
#otherIncomeTaxForm input,
#otherIncomeTaxForm select {
    margin-bottom: 4px !important;
}
/* 핵심 폰트 웨이트만 로드 (성능 최적화) */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
#insuranceForm label {
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 0px;
}
#insuranceForm input[type="number"],
#insuranceForm select {
    width: 100%;
    padding: 8px;
    border: 1px solid #dbe2e8;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #f7faff;
    margin-bottom: 4px;
}
#insuranceForm small {
    color: #888;
    font-size: 0.95rem;
    margin-bottom: 2px;
    display: block;
}
/* 날짜 계산기 균등 배치 스타일 */
.date-form-row .date-flex-row {
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}
.date-form-row .date-flex-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.date-form-row label {
    margin-bottom: 6px;
}
/* 날짜 계산기 입력창 및 셀렉트 통일 스타일 */
.date-calculator-container .form-control,
.date-calculator-container select.form-control {
     border-radius: 12px !important;
     height: 38px !important;
     font-size: 1rem;
     margin-bottom: 8px;
}
.date-form-row select,
.date-form-row input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #dbe2e8;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .date-form-row .date-flex-row {
        flex-direction: column;
        gap: 10px;
    }
}
html, body {
    overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* 닉네임 생성기 카드형 디자인 */
.nickname-card {
    max-width: 400px;
    margin: 60px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    padding: 36px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nickname-title {
    color: #2d3e50;
    margin-bottom: 28px;
    font-size: 2rem;
    text-align: center;
}
.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    width: 100%;
}
.form-row label {
    min-width: 90px;
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 0;
}
.form-row select {
    flex: 1;
    padding: 10px;
    border: 1px solid #dbe2e8;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #f7faff;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}
.nickname-result {
    margin-top: 32px;
    font-size: 2.2rem;
    color: #1976d2;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
}
/* 퇴직금 계산기 카드형 심플 디자인 */
.retirement-card {
    max-width: 500px;
    margin: 20px auto;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 40px 32px;
    border: 1px solid #e9ecef;
}

/* 퇴직금 계산기 로딩 최적화 */
.retirement-card * {
    will-change: auto;
}

.retirement-card input:focus,
.retirement-card select:focus {
    will-change: transform, box-shadow;
}
.retirement-title {
    color: #2d3e50;
    margin-bottom: 28px;
    font-size: 2rem;
    text-align: center;
}
.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    width: 100%;
}
.form-row label {
    min-width: 120px;
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 0;
}
.form-row input[type="text"],
.form-row input[type="date"],
.form-row select {
    flex: 1;
    padding: 10px;
    border: 1px solid #dbe2e8;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #f7faff;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}
.retirement-result {
    margin-top: 24px;
    font-size: 1.15rem;
    color: #1976d2;
    text-align: center;
    font-weight: bold;
}
/* 입력란 라벨과 input을 한 줄로 배치 */
.input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.input-inline-label {
    min-width: 110px;
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 0;
}
/* 입력란 설명 스타일 */
.input-desc {
    font-size: 0.92em;
    color: #888;
    margin-left: 4px;
}

/* Bootstrap form-text 스타일 개선 */
.form-text {
    font-size: 0.875em;
    color: #6c757d;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* 퇴직금 계산기 라벨 스타일 */
.retirement-card label,
#retirementForm label {
    font-size: 1.1rem !important;
    color: #2c3e50 !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    display: block !important;
}

/* 퇴직금 계산기 폼 행 간격 */
.retirement-card .form-row,
#retirementForm .form-row {
    margin-bottom: 20px !important;
}

/* 퇴직금 계산기 모든 입력 필드 완전 통일 */
input#salaryTotal,
input#manualAvgSalary, 
input#bonusTotal,
input#annualLeavePay,
input#joinDate,
input#leaveDate,
select#salaryInputType {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 15px 16px !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    border: 2px solid #e3e6ea !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    margin-bottom: 8px !important;
}

/* 호버 및 포커스 효과 */
input#salaryTotal:hover, input#salaryTotal:focus,
input#manualAvgSalary:hover, input#manualAvgSalary:focus,
input#bonusTotal:hover, input#bonusTotal:focus,
input#annualLeavePay:hover, input#annualLeavePay:focus,
input#joinDate:hover, input#joinDate:focus,
input#leaveDate:hover, input#leaveDate:focus,
select#salaryInputType:hover, select#salaryInputType:focus {
    border-color: #007bff !important;
    background: #f8f9fa !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}
/* 버튼 스타일 개선 */
.btn {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 1rem;
    cursor: pointer;
    margin: 5px 8px 5px 0;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
    display: inline-block;
    white-space: nowrap;
}
.btn:hover {
    background: #1565c0;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.18);
}
.btn-reset {
    background: #e0e0e0;
    color: #333;
    border: 1px solid #bdbdbd;
    margin-right: 8px;
}
.btn-reset:hover {
    background: #bdbdbd;
    color: #222;
}
.btn-calc {
    background: #1976d2;
    color: #fff;
    border: none;
}
.btn-calc:hover {
    background: #1565c0;
}
.retirement-calculator-container {
    max-width: 400px;
    margin: 60px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.retirement-calculator-container h1 {
    color: #2d3e50;
    margin-bottom: 28px;
    font-size: 2rem;
    text-align: center;
}
#retirementForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
}
#retirementForm label {
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 4px;
}
/* 퇴직금 계산기 입력 필드 강제 통일 - 모든 필드 동일 크기 */
.retirement-card .form-control,
.retirement-card input,
.retirement-card select,
#retirementForm .form-control,
#retirementForm input,
#retirementForm select,
#retirementForm input[type="text"],
#retirementForm input[type="date"],
#retirementForm input[type="number"],
#salaryTotal,
#manualAvgSalary,
#bonusTotal,
#annualLeavePay,
#joinDate,
#leaveDate,
#salaryInputType,
input#bonusTotal,
input#annualLeavePay,
input#salaryTotal,
input#manualAvgSalary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 16px !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    height: 56px !important;
    min-height: 56px !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* 퇴직금 계산기 select 박스 특별 스타일링 - 통일된 크기 */
#retirementForm select,
#salaryInputType,
select#salaryInputType {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    padding-right: 50px !important;
    cursor: pointer !important;
    height: 56px !important;
    min-height: 56px !important;
}

/* 퇴직금 계산기 입력 필드 포커스 효과 - 통일된 스타일 */
.retirement-card .form-control:focus,
.retirement-card input:focus,
.retirement-card select:focus,
#retirementForm input:focus,
#retirementForm select:focus,
#salaryTotal:focus,
#manualAvgSalary:focus,
#bonusTotal:focus,
#annualLeavePay:focus,
#joinDate:focus,
#leaveDate:focus,
#salaryInputType:focus,
input#bonusTotal:focus,
input#annualLeavePay:focus {
    outline: none !important;
    border-color: #f39c12 !important;
    background-color: #f8f9fa !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* 퇴직금 계산기 버튼 스타일 */
#retirementCalculateBtn {
    width: 100%;
    padding: 12px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

#retirementCalculateBtn:hover {
    background: #217dbb;
}

/* Bootstrap 기본 스타일 덮어쓰기 */
.retirement-card .form-control {
    border: 2px solid #ddd !important;
    padding: 14px 12px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
}

.retirement-card .form-select {
    border: 2px solid #ddd !important;
    padding: 12px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
    background-position: right 12px center !important;
}
#retirementResult {
    width: 100%;
    margin-top: 24px;
    text-align: center;
    font-size: 1.2rem;
    color: #e67e22;
    font-weight: bold;
}
#insuranceForm select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #dbe2e8;
    font-size: 1rem;
    margin-bottom: 8px;
}
#insuranceForm small {
    color: #888;
    font-size: 0.95rem;
    margin-bottom: 10px;
    display: block;
}
#insuranceForm input[type="number"] {
    margin-bottom: 4px;
}
.insurance-calculator-container {
    max-width: 400px;
    margin: 60px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.insurance-calculator-container h1 {
    color: #2d3e50;
    margin-bottom: 28px;
    font-size: 2rem;
    text-align: center;
}
#insuranceForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}
#insuranceForm label {
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 6px;
}
#insuranceForm input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #3498db;
    border-radius: 5px;
    font-size: 1.1rem;
    box-sizing: border-box;
    background: #f7faff;
}
#insuranceCalculateBtn {
    width: 100%;
    padding: 12px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}
#insuranceCalculateBtn:hover {
    background: #217dbb;
}
#insuranceResult {
    width: 100%;
    margin-top: 24px;
    text-align: center;
}
.insurance-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.insurance-table th, .insurance-table td {
    border: 1px solid #dbe2e8;
    padding: 10px;
    font-size: 1rem;
}
.insurance-table th {
    background: #f0f6fb;
    color: #217dbb;
}
.insurance-table td {
    background: #fff;
}
.insurance-total {
    font-size: 1.2rem;
    font-weight: bold;
    color: #e74c3c;
    background: #f9ecec;
    border-radius: 5px;
    padding: 10px;
    margin-top: 8px;
}
.date-dropdown-wrap {
    width: 100%;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.date-dropdown-wrap label {
    font-size: 1rem;
    color: #34495e;
}
.date-dropdown-wrap select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #dbe2e8;
    font-size: 1rem;
}
.date-form-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 10px;
}
.date-form-section button {
    margin-top: 10px;
}
body {
    font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
    background: #f7f7f7;
    margin: 0;
    padding: 0;
}
.page-section {
    display: block;
    width: 100%;
}
.date-calculator-container, .tax-calculator-container {
    max-width: 400px;
    margin: 60px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    color: #2d3e50;
    margin-bottom: 28px;
    font-size: 2rem;
    text-align: center;
}
form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
form label {
    font-size: 1rem;
    color: #34495e;
    margin-bottom: 6px;
}
form input[type="date"], form input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #dbe2e8;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}
/* 중복 제거됨 - .btn-calc 클래스 사용 */
#result, #taxResult {
    margin-top: 32px;
    font-size: 1.3rem;
    color: #27ae60;
    text-align: center;
    min-height: 32px;
}
/* 직업 적성 검사 RIASEC 스타일 */
.aptitude-progress-bar {
    width: 100%;
    height: 12px;
    background: #e3eaf3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}
.aptitude-progress-bar .aptitude-progress {
    height: 100%;
    background: linear-gradient(90deg, #1976d2 60%, #42a5f5 100%);
    border-radius: 6px;
    transition: width 0.3s;
}
#questionArea {
    background: #f8fafc;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.06);
    padding: 32px 24px;
    margin-bottom: 18px;
    font-size: 1.15rem;
}
.aptitude-question {
    font-size: 1.18rem;
    color: #1976d2;
    font-weight: 600;
    margin-bottom: 24px;
}
.aptitude-options {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.aptitude-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.aptitude-radio input[type="radio"] {
    accent-color: #1976d2;
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
}
.aptitude-radio label {
    font-size: 1rem;
    color: #34495e;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.aptitude-radio input[type="radio"]:checked + label {
    background: #1976d2;
    color: #fff;
    font-weight: bold;
}
.aptitude-next-btn, .aptitude-result-btn {
    min-width: 120px;
    font-size: 1.08rem;
    padding: 10px 24px;
    margin-left: 8px;
}
#resultArea {
    background: #f4f8fb;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(25, 118, 210, 0.10);
    padding: 36px 28px;
    margin-top: 24px;
    text-align: center;
}
.aptitude-type {
    font-size: 2.2rem;
    font-weight: bold;
    color: #1976d2;
    margin-bottom: 18px;
    letter-spacing: 2px;
}
.aptitude-desc {
    font-size: 1.15rem;
    color: #34495e;
    margin-bottom: 18px;
}
.aptitude-jobs {
    font-size: 1.08rem;
    color: #1565c0;
    background: #e3eaf3;
    border-radius: 8px;
    padding: 10px;
    display: inline-block;
}
/* 연애스타일 유형 테스트 - 파스텔톤 감성 스타일 */
.love-progress-bar {
    width: 100%;
    height: 12px;
    background: #ffe3ec;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}
.love-progress-bar .love-progress {
    height: 100%;
    background: linear-gradient(90deg, #ffb6b9 60%, #fcd5ce 100%);
    border-radius: 6px;
    transition: width 0.3s;
}
#questionArea {
    background: #fff6f9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 182, 185, 0.08);
    padding: 32px 24px;
    margin-bottom: 18px;
    font-size: 1.15rem;
}
.love-question {
    font-size: 1.25rem;
    color: #6b5b95;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.4;
}
.love-options {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.love-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.love-radio input[type="radio"] {
    accent-color: #8b5a9e;
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
}
.love-radio label {
    font-size: 1rem;
    color: #34495e;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.love-radio input[type="radio"]:checked + label {
    background: #ffb6b9;
    color: #fff;
    font-weight: bold;
}
.love-next-btn, .love-result-btn {
    min-width: 120px;
    font-size: 1.08rem;
    padding: 10px 24px;
    margin-left: 8px;
    background: #ffb6b9;
    border: none;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 182, 185, 0.08);
    transition: background 0.2s;
}
.love-next-btn:hover, .love-result-btn:hover {
    background: #fcd5ce;
    color: #ffb6b9;
}
#resultArea {
    background: #fff0f6;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(255, 182, 185, 0.10);
    padding: 36px 28px;
    margin-top: 24px;
    text-align: center;
}
.love-type {
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffb6b9;
    margin-bottom: 18px;
    letter-spacing: 2px;
}
.love-desc {
    font-size: 1.15rem;
    color: #34495e;
    margin-bottom: 18px;
}
.love-nickname {
    font-size: 1.08rem;
    color: #ffb6b9;
    background: #fcd5ce;
    border-radius: 8px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    #questionArea, #resultArea {
        padding: 18px 8px;
    }
    .love-type {
        font-size: 1.5rem;
    }
    .love-desc {
        font-size: 1rem;
    }
    .love-nickname {
        font-size: 0.95rem;
    }
    .love-next-btn, .love-result-btn {
        min-width: 90px;
        font-size: 0.98rem;
        padding: 8px 12px;
    }
}

/* 퍼스널컬러 최적화 클래스 */
.personal-color-question {
    background: #fffaf3;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255,214,165,0.15);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.personal-color-text {
    color: #d35400;
    font-weight: bold;
    margin-bottom: 40px;
    font-size: 2rem;
    line-height: 1.4;
}
.personal-color-buttons {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}
.personal-color-btn {
    padding: 25px 45px;
    background: #ffe0b2;
    color: #333;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    min-width: 250px;
    transition: all 0.3s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}