@charset "UTF-8";

/* 대학비교 탭바 */
.compare-tab-bar{display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; padding:1.6rem 2rem; background-color:#f0f7ff; border:1px solid #d0e3f7; border-radius:1.2rem; box-sizing:border-box}
.compare-tab-header{display:flex; align-items:center; gap:0.6rem; width:100%; margin-bottom:0.4rem}
.compare-tab-header i{color:#006fff; font-size:1.8rem}
.compare-tab-header span{color:#202020; font-family:'NEXON-Lv2-Gothic', 'PretendardGOV'; font-size:1.5rem; font-weight:600; letter-spacing:-0.02rem}
.compare-tab-list{display:flex; flex:1; gap:0.8rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.compare-tab-list::-webkit-scrollbar{height:4px}
.compare-tab-list::-webkit-scrollbar-thumb{background-color:#d0e3f7; border-radius:2px}
.compare-tab-item{display:flex; align-items:center; gap:0.5rem; flex-shrink:0; padding:1.4rem 1.6rem; color:#505050; font-size:1.3rem; font-weight:500; letter-spacing:-0.02rem; background-color:#fff; border:1px solid #d3d3d3; border-radius:0.8rem; cursor:pointer; white-space:nowrap; box-sizing:border-box}
.compare-tab-item:hover{border-color:#006fff; color:#006fff}
.compare-tab-item.active{color:#fff; font-weight:600; background-color:#1e3a5f; border:1.5px solid #1e3a5f; box-shadow:0 .2rem 1rem 0 rgba(30,58,95,0.25)}
.compare-tab-item .tab-label{max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.compare-tab-item .tab-close{display:flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; margin-left:0.2rem; font-size:1.4rem; line-height:1; color:inherit; background:none; border:none; border-radius:50%; cursor:pointer; opacity:0.6; transition:all .2s}
.compare-tab-item .tab-close:hover{opacity:1; background-color:rgba(0,0,0,0.1)}
.compare-tab-item.active .tab-close:hover{background-color:rgba(255,255,255,0.2)}
.compare-tab-actions{display:flex; align-items:center; gap:0.8rem; flex-shrink:0}
.compare-exit-btn{display:flex; align-items:center; gap:0.4rem; flex-shrink:0; padding:1.6rem 2rem; color:#dc2626; font-size:1.3rem; font-weight:600; letter-spacing:-0.02rem; background-color:#fff; border:1px solid #fca5a5; border-radius:0.8rem; cursor:pointer; transition:all .2s; white-space:nowrap}
.compare-exit-btn:hover{color:#fff; background-color:#dc2626; border-color:#dc2626}
.compare-exit-btn i{font-size:1.4rem}

/* 대학비교 버튼 (테이블 상단) */
.compare-add-btn{display:inline-flex; align-items:center; gap:0.6rem; margin-bottom:1.6rem; padding:1rem 4rem; color:#006fff; font-size:1.5rem; font-weight:600; letter-spacing:-0.02rem; background-color:#f0f7ff; border:2px solid #006fff; border-radius:0.8rem; cursor:pointer; transition:all .2s; animation:compareBtnGlow 2s ease-in-out infinite}
@keyframes compareBtnGlow{0%,100%{border-color:#006fff; box-shadow:0 0 0 0 rgba(0,111,255,0.3)} 50%{border-color:#3d9aff; box-shadow:0 0 1.2rem 0.3rem rgba(0,111,255,0.25)}}
.compare-add-btn:hover{color:#fff; background-color:#006fff; animation:none; box-shadow:0 0.2rem 1rem rgba(0,111,255,0.4)}
.compare-add-btn i{font-size:1.6rem}
.compare-add-btn .compare-count{font-size:1.2rem; font-weight:500; opacity:0.8}

/* 대학비교 액션바 (5등급 토글 + 대학추가 버튼) */
.compare-action-bar{display:flex; align-items:stretch; justify-content:space-between; gap:1.6rem; margin-top:2rem}
.compare-action-bar .grade-convert-toggle{flex:1; min-width:0; margin-top:0}
.compare-action-bar .compare-add-btn{flex-shrink:0; margin-bottom:0; padding:1.4rem 4.8rem; font-size:1.6rem; border-radius:1rem}
.compare-count-label{display:inline-flex; align-items:center; flex-shrink:0; padding:0.8rem 1.6rem; color:#999; font-size:1.3rem; font-weight:500; letter-spacing:-0.02rem; background-color:#f5f5f5; border:1px solid #e0e0e0; border-radius:0.8rem}

/* 비교모드 필터 영역 강조 */
.filter-sec.compare-active .filter-step{background:#fff8f0; border-left:2px solid #e6a817; box-shadow:0 .2rem 1.2rem rgba(230,168,23,0.15)}
.filter-sec.compare-active .filter-step .filter-step-top{border-bottom:1px solid #f0e4c8}
.filter-sec.compare-active .filter-step .filter-step-top .step-tit strong{color:#e6a817}
.compare-mode-badge{display:inline-flex; align-items:center; gap:0.4rem; margin-left:1rem; padding:0.3rem 1rem; color:#006fff; font-size:1.2rem; font-weight:600; background-color:#fff; border:1px solid #006fff; border-radius:2rem; vertical-align:middle}
.compare-mode-badge i{font-size:1.2rem}

/* 비교 로딩 스피너 */
.compare-loading{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; padding:6rem 0; color:#999; font-size:1.4rem}
.compare-spinner{width:3.2rem; height:3.2rem; border:3px solid #e5e7eb; border-top:3px solid #006fff; border-radius:50%; animation:compareSpin .6s linear infinite}
@keyframes compareSpin{to{transform:rotate(360deg)}}

/* 합쳐보기 버튼 */
.compare-merge-btn{background-color:#fff8e1; border-color:#e6a817}
.compare-merge-btn:hover{border-color:#e6a817; color:#e6a817}
.compare-merge-btn.active{color:#fff; font-weight:500; background-color:#e6a817; border:1.5px solid #e6a817; border-left:1.5px solid #e6a817; box-shadow:0 .2rem .8rem 0 rgba(230,168,23,0.3)}
.compare-merge-btn i{font-size:1.4rem; margin-right:0.2rem}
.merge-mobile{display:none}
.merge-desktop{display:flex}

/* 비교 안내 토스트 (화면 중앙) */
.compare-toast-overlay{position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background-color:rgba(0,0,0,0); pointer-events:none; transition:background-color .3s ease}
.compare-toast-overlay.show{background-color:rgba(0,0,0,0.3); pointer-events:auto}
.compare-toast{display:flex; flex-direction:column; align-items:center; gap:1.2rem; padding:3rem 4rem; color:#fff; font-size:1.8rem; font-weight:600; letter-spacing:-0.02rem; text-align:center; background-color:#006fff; border-radius:1.6rem; box-shadow:0 1rem 4rem rgba(0,111,255,0.5); transform:scale(0.8); opacity:0; transition:all .3s ease}
.compare-toast-overlay.show .compare-toast{transform:scale(1); opacity:1}
.compare-toast i{font-size:3.2rem}
.compare-toast .toast-sub{font-size:1.4rem; font-weight:400; opacity:0.85}

/* 비교종료 확인 모달 */
.compare-confirm-overlay{position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background-color:rgba(0,0,0,0); pointer-events:none; transition:background-color .2s ease}
.compare-confirm-overlay.show{background-color:rgba(0,0,0,0.4); pointer-events:auto}
.compare-confirm{display:flex; flex-direction:column; align-items:center; gap:1.4rem; padding:3.2rem 3.6rem; background-color:#fff; border-radius:1.6rem; box-shadow:0 1rem 4rem rgba(0,0,0,0.2); transform:scale(0.85); opacity:0; transition:all .2s ease}
.compare-confirm-overlay.show .compare-confirm{transform:scale(1); opacity:1}
.compare-confirm i{font-size:3.6rem; color:#e6a817}
.compare-confirm .confirm-msg{margin:0; color:#202020; font-size:1.6rem; font-weight:600; letter-spacing:-0.02rem; text-align:center}
.compare-confirm .confirm-btns{display:flex; gap:1rem; margin-top:0.6rem}
.compare-confirm .confirm-cancel{padding:1rem 2.4rem; color:#505050; font-size:1.4rem; font-weight:600; background-color:#f3f4f6; border:1px solid #d3d3d3; border-radius:0.8rem; cursor:pointer; transition:all .2s}
.compare-confirm .confirm-cancel:hover{background-color:#e5e7eb}
.compare-confirm .confirm-ok{padding:1rem 2.4rem; color:#fff; font-size:1.4rem; font-weight:600; background-color:#dc2626; border:1px solid #dc2626; border-radius:0.8rem; cursor:pointer; transition:all .2s}
.compare-confirm .confirm-ok:hover{background-color:#b91c1c}

/* 합쳐보기 테이블 */
.compare-merged-table{overflow-x:auto; -webkit-overflow-scrolling:touch}
.compare-merged-table table{border-collapse:collapse; table-layout:fixed; width:100%}
.compare-merged-table table thead th{border-left:1px solid #c0c0c0; border-right:1px solid #c0c0c0}
.compare-merged-table table thead th:first-child{border-left:none}
.compare-merged-table table thead th:last-child{border-right:none}
.compare-merged-header th{padding:1.2rem 1rem !important; color:#fff !important; font-size:1.5rem !important; font-weight:700 !important; letter-spacing:-0.02rem; background-color:#4a5568 !important; border-top:2px solid #2d3748; text-align:left; border-left:1px solid #5a6578; border-right:1px solid #5a6578}
.compare-merged-header th:first-child{border-left:none}
.compare-merged-header th:last-child{border-right:none}
.compare-merged-table tbody tr th{text-align:left; padding-left:1.2rem; word-break:keep-all; overflow-wrap:break-word; border-right:1px solid #e0e0e0}
.compare-merged-table tbody tr td{border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0}
.compare-merged-table tbody tr td:last-child{border-right:none}
.merged-univ-num{display:inline-block; width:1.8rem; height:1.8rem; line-height:1.8rem; text-align:center; font-size:1.1rem; font-weight:700; border-radius:50%; background-color:rgba(255,255,255,0.7)}

/* 대학비교 반응형 */
@media screen and (max-width:768px){
    /* 탭바 세로 배치 */
    .compare-tab-bar{flex-direction:column; gap:0.8rem; margin-top:1.6rem; padding:1.2rem 1.4rem}
    .compare-tab-header i{font-size:1.6rem}
    .compare-tab-header span{font-size:1.4rem}
    .compare-tab-list{flex-direction:column; gap:0.6rem; width:100%; overflow-x:visible}
    .compare-tab-item{flex-shrink:1; padding:1.6rem 1.6rem; font-size:1.3rem; width:100%; justify-content:space-between; box-sizing:border-box}
    .compare-tab-item .tab-label{max-width:none; overflow:visible; white-space:normal; flex:1}
    .compare-tab-item .tab-close{display:none}
    .compare-tab-item.active .tab-close{display:flex; width:2.4rem; height:2.4rem; font-size:1.6rem; margin-left:auto}
    .merge-desktop{display:none}
    .merge-mobile{display:flex}
    .compare-tab-actions{display:flex; flex-direction:row; gap:0.6rem; width:100%}
    .compare-tab-actions .compare-merge-btn{flex:1; justify-content:center; padding:1rem 1rem; font-size:1.3rem}
    .compare-exit-btn{flex:1; justify-content:center; padding:1rem 1rem; font-size:1.2rem}
    .compare-action-bar{flex-direction:column; gap:0.8rem}
    .compare-action-bar .compare-add-btn{width:100%; justify-content:center; padding:1.6rem 1.6rem; font-size:1.4rem}
    .compare-add-btn i{font-size:1.4rem}
    .compare-count-label{width:100%; text-align:center; justify-content:center; font-size:1.2rem; padding:0.6rem 1rem}
    /* 합쳐보기 표 가로스크롤 제거 */
    .compare-merged-table{overflow-x:visible}
    .compare-merged-table table{table-layout:fixed; width:100%; min-width:0}
    .compare-merged-table table colgroup col:first-child{width:30% !important}
    .compare-merged-table table colgroup col{width:17.5% !important}
    .compare-merged-header th{font-size:1.3rem; padding:1rem 0.6rem !important}
    .compare-merged-table tbody tr th{font-size:1.1rem; padding:0.8rem 0.4rem 0.8rem 0.6rem; word-break:keep-all; white-space:normal; line-height:1.4em}
    .compare-merged-table tbody tr td{font-size:1.2rem; padding:0.8rem 0.4rem}
    .merged-univ-num{width:1.4rem; height:1.4rem; line-height:1.4rem; font-size:0.9rem}
}

/* 데이터 안내 패널 */
.data-info-panel{margin-top:2.4rem; padding:2.4rem; background-color:#f9fafb; border:1px solid #e5e7eb; border-radius:1.2rem; box-sizing:border-box}
.data-info-panel .info-panel-header{display:flex; align-items:center; gap:0.6rem; margin-bottom:1.6rem; padding-bottom:1.2rem; border-bottom:1px solid #e5e7eb}
.data-info-panel .info-panel-header i{color:#006fff; font-size:1.8rem}
.data-info-panel .info-panel-header span{color:#202020; font-family:'NEXON-Lv2-Gothic', 'PretendardGOV'; font-size:1.5rem; font-weight:600; letter-spacing:-0.02rem}
.data-info-panel .info-panel-content{display:flex; flex-direction:column; gap:2rem}
.data-info-panel .info-section h5{margin-bottom:1.2rem; color:#374151; font-size:1.7rem; font-weight:600; letter-spacing:-0.02rem}
.data-info-panel .info-section ul{margin:0; padding-left:2rem; list-style:none}
.data-info-panel .info-section ul li{position:relative; margin-bottom:0.8rem; padding-left:0.2rem; line-height:1.7em; color:#4b5563; font-size:1.5rem; letter-spacing:-0.02rem}
.data-info-panel .info-section ul li::before{content:''; position:absolute; top:0.8rem; left:-1.4rem; width:5px; height:5px; background-color:#006fff; border-radius:50%}
.data-info-panel .info-section ul li strong{color:#006fff; font-weight:600}
.data-info-panel .info-section .info-desc{margin-top:1rem; line-height:1.8em; color:#6b7280; font-size:1.5rem; letter-spacing:-0.02rem}
.data-info-panel .info-section .info-desc strong{color:#374151; font-weight:600}
.data-info-panel .info-section .info-desc.info-highlight{margin-top:1.4rem; padding:1.4rem 1.6rem; color:#1e40af; font-size:1.5rem; background-color:#eff6ff; border-left:3px solid #006fff; border-radius:0 0.6rem 0.6rem 0}

/* 데이터 안내 패널 반응형 */
@media screen and (max-width:768px){
    .data-info-panel{margin-top:2rem; padding:1.8rem}
    .data-info-panel .info-panel-header{margin-bottom:1.2rem; padding-bottom:1rem}
    .data-info-panel .info-panel-header i{font-size:1.6rem}
    .data-info-panel .info-panel-header span{font-size:1.5rem}
    .data-info-panel .info-section h5{font-size:1.5rem}
    .data-info-panel .info-section ul li{font-size:1.4rem}
    .data-info-panel .info-section .info-desc{font-size:1.4rem}
    .data-info-panel .info-section .info-desc.info-highlight{font-size:1.4rem; padding:1.2rem 1.4rem}
}

/* PDF 다운로드 바 */
.pdf-download-bar{display:flex; justify-content:flex-end; gap:0.8rem; margin-top:1.6rem; margin-bottom:1.2rem}
.pdf-download-btn{display:inline-flex; align-items:center; gap:0.6rem; padding:0.7rem 1.6rem; background-color:#dc2626; color:#fff; font-size:1.3rem; font-weight:600; border:none; border-radius:0.6rem; cursor:pointer; transition:all 0.2s ease; letter-spacing:-0.02rem; box-shadow:0 1px 3px rgba(220,38,38,0.3)}
.pdf-download-btn:hover{background-color:#b91c1c; box-shadow:0 2px 6px rgba(220,38,38,0.4)}
.pdf-download-btn:disabled{opacity:0.6; cursor:not-allowed; box-shadow:none}
.pdf-download-btn i{font-size:1.5rem}
.fav-save-btn{display:inline-flex; align-items:center; gap:0.5rem; padding:0.7rem 1.4rem; background:#fff; color:#006fff; font-size:1.3rem; font-weight:600; border:1px solid #006fff; border-radius:0.6rem; cursor:pointer; transition:all 0.2s}
.fav-save-btn:hover{background:#f0f4ff}
.fav-save-btn:disabled{opacity:0.6; cursor:not-allowed}
.fav-save-btn.fav-saved{background:#006fff; color:#fff; border-color:#006fff}
.fav-save-btn i{font-size:1.4rem}
@media screen and (max-width:768px){
    .pdf-download-btn{font-size:1.2rem; padding:0.6rem 1.2rem}
    .pdf-download-btn i{font-size:1.3rem}
    .fav-save-btn{font-size:1.2rem; padding:0.6rem 1rem}
}

/* 연도 매칭 패널 */
.year-match-panel{margin-top:2.4rem; padding:2rem 2.4rem; background-color:#fffbf0; border:1px solid #f0e4c8; border-radius:1.2rem; box-sizing:border-box}
.year-match-header{display:flex; align-items:center; gap:0.6rem; margin-bottom:1.4rem}
.year-match-header i{color:#e6a817; font-size:1.8rem}
.year-match-header span{color:#202020; font-family:'NEXON-Lv2-Gothic', 'PretendardGOV'; font-size:1.5rem; font-weight:600; letter-spacing:-0.02rem}
.year-match-buttons{display:flex; flex-wrap:wrap; gap:1rem}
.year-match-buttons .filter-item{display:flex; align-items:center; justify-content:center; gap:0.4rem; min-height:4.6rem; padding:0.8rem 1.8rem; line-height:1.2em; color:#505050; font-size:1.4rem; font-weight:normal; letter-spacing:-0.04rem; text-align:center; background-color:#fff; border:1px solid #ebebeb; border-radius:1.2rem; cursor:pointer; transition:all .35s ease; box-sizing:border-box}
.year-match-buttons .filter-item:hover{color:#e6a817; background-color:#fffdf5}
.year-match-buttons .filter-item.selected{color:#fff; font-weight:300; background-color:#e6a817; border:1px solid transparent; box-shadow:0 .3rem 1rem 0 rgba(230, 168, 23, 0.4)}
.year-match-buttons .filter-item .match-years{font-size:1.2rem; opacity:0.8}
.year-match-panel.year-match-complete{background-color:#f0faf0; border-color:#c8e6c8}
.year-match-panel.year-match-complete .year-match-header i{color:#2ecc71}
.year-match-panel.year-match-complete .year-match-header span{color:#505050}
.year-match-desc{margin:0; color:#6b7280; font-size:1.4rem; line-height:1.7em; letter-spacing:-0.02rem}

/* 매칭된 셀 스타일 */
.matched-type-row th{color:#505050; font-size:1.3rem; font-weight:600}
.matched-type-row td{font-size:1.2rem; font-weight:500; letter-spacing:-0.02rem; color:#505050}

/* 연도 매칭 반응형 */
@media screen and (max-width:768px){
    .year-match-panel{margin-top:1.6rem; padding:1.6rem}
    .year-match-header i{font-size:1.6rem}
    .year-match-header span{font-size:1.4rem}
    .year-match-buttons .filter-item{min-height:4.2rem; padding:0.8rem 1.4rem; font-size:1.5rem}
    .year-match-buttons .filter-item .match-years{font-size:1.3rem}
    .matched-type-row td{font-size:1.3rem}
    .year-match-desc{font-size:1.3rem}
}

/* 데이터 원본 안내 리스트 */
.info-official-list{margin:0; padding:0 0 0 2rem; list-style:none; counter-reset:official-counter}
.info-official-list li{position:relative; margin-bottom:1rem; padding-left:0.2rem; line-height:1.8em; color:#1e40af; font-size:1.4rem; letter-spacing:-0.02rem; counter-increment:official-counter}
.info-official-list li::before{content:counter(official-counter) '.'; position:absolute; left:-2rem; color:#006fff; font-weight:600}
.info-official-list li:last-child{margin-bottom:0}
.info-official-list li strong{color:#1e3a8a; font-weight:700}
.info-official-list li.info-highlight-tip{color:#d63031}
.info-official-list li.info-highlight-tip strong{color:#d63031}

/* 미제공 데이터 스타일 */
.no-data{font-size:0.80em; color:#b0b0b0; font-weight:400; letter-spacing:-0.02rem}

/* 산출 항목 스타일 */
.con-table table tbody th.calc-field sup{font-size:0.8em; vertical-align:super; margin-left:0.1rem}

/* 5등급 변환 토글 */
.grade-convert-toggle{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2rem; padding:1.4rem 1.8rem; background-color:#f0f7ff; border:1px solid #d0e3f7; border-radius:1rem; box-sizing:border-box}
.toggle-switch{position:relative; display:inline-block; width:4.4rem; height:2.4rem; flex-shrink:0}
.toggle-switch input{opacity:0; width:0; height:0}
.toggle-slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; border-radius:2.4rem; transition:.3s}
.toggle-slider::before{content:''; position:absolute; height:1.8rem; width:1.8rem; left:0.3rem; bottom:0.3rem; background-color:#fff; border-radius:50%; transition:.3s}
.toggle-switch input:checked + .toggle-slider{background-color:#006fff}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(2rem)}
.toggle-label{color:#202020; font-size:1.5rem; font-weight:600; letter-spacing:-0.02rem}
.grade-convert-info-btn{display:inline-flex; align-items:center; padding:0.4rem 1rem; color:#006fff; font-size:1.3rem; font-weight:500; background:none; border:1px solid #006fff; border-radius:0.6rem; cursor:pointer; transition:all .2s}
.grade-convert-info-btn:hover{background-color:#006fff; color:#fff}
.grade-convert-notice{width:100%; margin:0.4rem 0 0; color:#6b7280; font-size:1.3rem; line-height:1.6em; letter-spacing:-0.02rem}
.notice-toggle-btn{display:none}

/* 5등급 변환 행 */
.grade-convert-row{background-color:#eef5ff !important}
.grade-convert-row th{color:#006fff !important; font-size:1.3rem}
.grade-convert-row td{color:#006fff !important; font-weight:600}
.grade5-label{display:block; font-size:1.1rem; color:#006fff; font-weight:500}
.grade5-sub{display:inline-block; font-size:1.3rem; color:#006fff; font-weight:600; margin-top:0.4rem; padding:0.2rem 0.6rem; border:1px solid #006fff; border-radius:0.4rem}
.grade5-na{color:#ccc !important}

/* 5등급 변환 모달 */
.grade-convert-modal-overlay{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center}
.grade-convert-modal{position:relative; width:90%; max-width:600px; max-height:80vh; padding:3rem; background-color:#fff; border-radius:1.6rem; box-shadow:0 2rem 6rem rgba(0,0,0,0.3); overflow-y:auto; box-sizing:border-box}
.grade-convert-modal .modal-close{position:sticky; top:0; float:right; z-index:10; width:3.6rem; height:3.6rem; display:flex; align-items:center; justify-content:center; margin:-1rem -1rem 0 0; background-color:#f3f4f6; border:1px solid #e5e7eb; font-size:2.2rem; color:#374151; cursor:pointer; border-radius:50%; transition:all .2s}
.grade-convert-modal .modal-close:hover{background-color:#e5e7eb; color:#111}
.grade-convert-modal h3{margin:0 0 0.4rem; font-size:2rem; font-weight:700; color:#202020; letter-spacing:-0.04rem}
.grade-convert-modal .modal-subtitle{margin:0 0 2.4rem; color:#6b7280; font-size:1.3rem; letter-spacing:-0.02rem; padding-bottom:1.6rem; border-bottom:1px solid #e5e7eb}
.grade-convert-modal .modal-body{color:#505050; font-size:1.4rem; line-height:1.8em; letter-spacing:-0.02rem}
.grade-convert-modal .modal-body p{margin-bottom:1rem}

/* 모달 섹션 */
.modal-section{margin-bottom:2.8rem}
.modal-section h4{margin:0 0 1.2rem; padding-bottom:0.8rem; color:#202020; font-size:1.6rem; font-weight:700; letter-spacing:-0.02rem; border-bottom:2px solid #202020}
.modal-desc{color:#505050; font-size:1.4rem; line-height:1.8em; margin-bottom:1.2rem}

/* 모달 테이블 */
.modal-table{width:100%; border-collapse:collapse; font-size:1.3rem; letter-spacing:-0.02rem}
.modal-table thead th{padding:1rem 0.8rem; color:#fff; font-size:1.2rem; font-weight:600; background-color:#374151; border:1px solid #4b5563; text-align:center; white-space:nowrap}
.modal-table tbody td{padding:0.8rem; color:#374151; text-align:center; border:1px solid #e5e7eb; line-height:1.5em}
.modal-table tbody tr:nth-child(odd){background-color:#f9fafb}

/* 등급 구간 비교 */
.modal-compare{display:flex; flex-direction:column; gap:1rem}
.compare-item{padding:1.2rem 1.4rem; background-color:#f9fafb; border:1px solid #e5e7eb; border-radius:0.6rem}
.compare-item strong{display:block; margin-bottom:0.4rem; color:#202020; font-size:1.3rem; font-weight:700}
.compare-item span{color:#505050; font-size:1.3rem; letter-spacing:0.02rem}

/* 변환 단계 */
.modal-steps{display:flex; flex-direction:column; gap:1rem}
.step-item{padding:1.2rem 1.4rem; background-color:#f9fafb; border-left:3px solid #374151; border-radius:0 0.4rem 0.4rem 0; font-size:1.3rem; color:#374151; line-height:1.7em}
.step-item strong{color:#202020; font-weight:700}
.step-example{color:#6b7280; font-size:1.2rem}

/* Q&A */
.modal-qa{display:flex; flex-direction:column; gap:1.4rem}
.qa-item{padding:1.2rem 1.4rem; background-color:#f9fafb; border:1px solid #e5e7eb; border-radius:0.6rem}
.qa-item .qa-q{margin:0 0 0.6rem; color:#202020; font-size:1.4rem; font-weight:700}
.qa-item .qa-a{margin:0; color:#505050; font-size:1.3rem; line-height:1.7em}

/* 주의사항 */
.modal-notice{margin-top:2.4rem; padding:1.4rem 1.6rem; background-color:#fef3c7; border:1px solid #f59e0b; border-radius:0.6rem}
.modal-notice strong{display:block; margin-bottom:0.6rem; color:#92400e; font-size:1.3rem; font-weight:700}
.modal-notice p{margin:0; color:#92400e; font-size:1.2rem; line-height:1.7em}

/* 근거 자료 */
.modal-source{margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid #e5e7eb}
.modal-source strong{display:block; margin-bottom:0.8rem; color:#6b7280; font-size:1.2rem; font-weight:600}
.modal-source ul{margin:0; padding:0; list-style:none}
.modal-source ul li{position:relative; padding-left:1.2rem; margin-bottom:0.4rem; color:#9ca3af; font-size:1.1rem; line-height:1.6em}
.modal-source ul li::before{content:'·'; position:absolute; left:0; color:#9ca3af; font-weight:700}

/* 변환표 */
.convert-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.convert-full-table{font-size:1.2rem}
.convert-full-table thead th{padding:0.8rem 0.6rem; font-size:1.1rem}
.convert-full-table tbody td{padding:0.6rem; font-size:1.2rem}
.convert-full-table tbody td:nth-child(4){border-left:2px solid #374151}
.cv-g1{background-color:#dbeafe; color:#1e40af}
.cv-g2{background-color:#dcfce7; color:#166534}
.cv-g3{background-color:#fef9c3; color:#854d0e}
.cv-g4{background-color:#ffedd5; color:#9a3412}
.cv-g5{background-color:#fce7f3; color:#9d174d}
.modal-legend{margin-top:1rem; color:#6b7280; font-size:1.1rem; line-height:2em; letter-spacing:-0.02rem}
.legend-dot{display:inline-block; width:1rem; height:1rem; border-radius:0.2rem; vertical-align:middle; margin:0 0.2rem 0 0.6rem}
.legend-dot.cv-g1{background-color:#dbeafe}
.legend-dot.cv-g2{background-color:#dcfce7}
.legend-dot.cv-g3{background-color:#fef9c3}
.legend-dot.cv-g4{background-color:#ffedd5}
.legend-dot.cv-g5{background-color:#fce7f3}

/* ===== 내 등급 위치 패널 ===== */
.my-position-panel{margin-top:2.4rem; padding:2.4rem 2.8rem; background:linear-gradient(135deg,#f0f7ff 0%,#f8fbff 100%); border:1px solid #d0e3f7; border-radius:1.2rem}
.my-position-header{display:flex; align-items:center; gap:0.8rem; margin-bottom:1.6rem}
.my-position-header i{color:#006fff; font-size:2rem}
.my-position-header .mp-title{font-size:1.6rem; font-weight:700; color:#202020}
.mp-mode-toggle{display:inline-flex; align-items:center; margin-left:auto; background:#fff; border:1px solid #d0e3f7; border-radius:0.8rem; overflow:hidden}
.mp-mode-btn{padding:0.6rem 1.6rem; font-size:1.25rem; font-weight:600; color:#6b7280; background:#fff; border:none; cursor:pointer; transition:all 0.2s; white-space:nowrap}
.mp-mode-btn+.mp-mode-btn{border-left:1px solid #d0e3f7}
.mp-mode-btn.active{color:#fff; background:#006fff}
.mp-mode-btn:hover:not(.active){color:#006fff; background:#f0f7ff}
.mp-mode-desc{margin-bottom:2rem; font-size:1.25rem; color:#9ca3af; line-height:1.5}
.mp-mode-desc strong{color:#6b7280; font-weight:600}
.mp-bar-container{position:relative; margin:0 0 5.5rem; padding:0 1rem}
.mp-scale{position:relative; height:2rem; margin-bottom:0.4rem; font-size:1.2rem; font-weight:600; color:#9ca3af}
.mp-scale span{position:absolute; transform:translateX(-50%)}
.mp-ticks{position:relative; height:1.2rem; border-left:1px solid #d1d5db; border-right:1px solid #d1d5db}
.mp-tick{position:absolute; top:0; width:1px; height:100%; background:#e5e7eb}
.mp-track{position:relative; height:4.8rem; background:#f3f4f6; border-radius:0.8rem; border:1px solid #e5e7eb; overflow:visible}
.mp-range{position:absolute; top:0.4rem; bottom:0.4rem; background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%); border:1px solid #3b82f6; border-radius:0; z-index:2}
.mp-dense{position:absolute; top:0; height:100%; background:rgba(29,78,216,0.55); border-radius:0; z-index:1}
.mp-median{position:absolute; top:0; width:2px; height:100%; background:#fff; transform:translateX(-50%); z-index:3; opacity:0.8}
.mp-median-label{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:0.3rem; font-size:1.1rem; font-weight:700; color:#1d4ed8; white-space:nowrap; z-index:5}
.mp-range-label{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.15rem; font-weight:600; color:#1e40af; white-space:nowrap; text-shadow:0 0 4px rgba(255,255,255,0.9)}
.mp-range-edge{position:absolute; bottom:-2.2rem; font-size:1.15rem; font-weight:700; color:#3b82f6; white-space:nowrap; z-index:5}
.mp-range-edge.left{left:0; transform:translateX(-50%)}
.mp-range-edge.right{right:0; transform:translateX(50%)}
.mp-marker{position:absolute; top:-0.6rem; bottom:-0.6rem; width:3px; z-index:2; border-radius:2px}
.mp-marker.cut50{background:#ef4444}
.mp-marker.cut70{background:#f97316}
.mp-marker-flag{position:absolute; left:50%; transform:translateX(-50%); padding:0.3rem 0.8rem; font-size:1.1rem; font-weight:700; border-radius:0.4rem; white-space:nowrap; line-height:1.4; z-index:5}
.mp-marker.cut50 .mp-marker-flag{top:-4.2rem; background:#fef2f2; color:#dc2626; border:1px solid #fca5a5}
.mp-marker.cut70 .mp-marker-flag{bottom:-3.8rem; background:#fff7ed; color:#ea580c; border:1px solid #fdba74}
.mp-marker-arrow{position:absolute; left:50%; transform:translateX(-50%); width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent}
.mp-marker.cut50 .mp-marker-arrow{bottom:-5px; border-top:5px solid #fca5a5}
.mp-marker.cut70 .mp-marker-arrow{top:-5px; border-bottom:5px solid #fdba74}
.mp-legend{display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.4rem; border-top:1px solid #e5e7eb}
.mp-legend-item{display:flex; align-items:center; gap:0.5rem; font-size:1.25rem; color:#505050}
.mp-legend-dot{display:inline-block; width:1.2rem; height:1.2rem; border-radius:0.3rem; flex-shrink:0}
.mp-legend-dot.range{background:#bfdbfe; border:2px solid #3b82f6}
.mp-legend-dot.dense{background:linear-gradient(135deg,#1d4ed8,#2563eb)}
.mp-legend-dot.cut50{background:#ef4444}
.mp-legend-dot.cut70{background:#f97316}
.mp-guide{margin-top:1.6rem; padding:1.4rem 1.6rem; background:#fff; border:1px solid #e5e7eb; border-radius:0.8rem}
.mp-guide p{margin:0; font-size:1.3rem; color:#6b7280; line-height:1.8}
.mp-guide-divider{border:none; border-top:1px solid #e5e7eb; margin:1rem 0}
.mp-guide p+p{margin-top:0.4rem}
.mp-guide i{color:#006fff; margin-right:0.2rem}
.mp-guide-link{display:inline-flex; align-items:center; gap:0.3rem; margin-left:1rem; padding:0.3rem 1rem; background:#006fff; color:#fff; font-size:1.2rem; font-weight:600; border-radius:0.5rem; text-decoration:none; vertical-align:baseline; position:relative; top:-0.1rem}
.mp-guide-link i{color:#fff; margin:0; font-size:1.2rem}
.mp-guide-link:hover{background:#0055cc}
.mp-notice{margin-top:0.8rem; text-align:right; font-size:1.2rem; color:#9ca3af; line-height:1.6}
.mp-notice i{margin-right:0.3rem}
.mp-empty{margin-top:2.4rem; padding:2.4rem; background:#f9fafb; border:1px dashed #d1d5db; border-radius:1.2rem; text-align:center}
.mp-empty i{font-size:3.2rem; color:#006fff; opacity:0.5; display:block; margin-bottom:1rem}
.mp-empty .mp-empty-msg{font-size:1.5rem; font-weight:600; color:#374151; margin-bottom:0.6rem}
.mp-empty .mp-empty-sub{font-size:1.3rem; color:#9ca3af; line-height:1.6}
.mp-empty a{display:flex; align-items:center; justify-content:center; gap:0.4rem; width:fit-content; margin:1.2rem auto 0; padding:0.8rem 2rem; background:#006fff; color:#fff; font-size:1.3rem; font-weight:600; border-radius:0.6rem; text-decoration:none}
.mp-empty a i{color:#fff; opacity:1; font-size:inherit; display:inline; margin-bottom:0}

/* 5등급 변환 반응형 */
@media screen and (max-width:768px){
    .grade-convert-toggle{gap:0.8rem; padding:1.2rem 1.4rem}
    .toggle-label{font-size:1.4rem}
    .grade-convert-info-btn{font-size:1.2rem; padding:0.3rem 0.8rem}
    .grade-convert-notice{font-size:1.2rem}
    .grade-convert-row th{font-size:1.2rem}
    .grade5-label{font-size:1rem}
    .grade5-sub{font-size:1.2rem}
    .grade-convert-modal{width:95%; padding:2rem; border-radius:1.2rem}
    .grade-convert-modal h3{font-size:1.7rem}
    .grade-convert-modal .modal-subtitle{font-size:1.2rem; margin-bottom:1.8rem; padding-bottom:1.2rem}
    .grade-convert-modal .modal-body{font-size:1.3rem}
    .modal-section h4{font-size:1.4rem}
    .modal-table{font-size:1.1rem}
    .modal-table thead th{padding:0.8rem 0.4rem; font-size:1.1rem}
    .modal-table tbody td{padding:0.6rem 0.4rem; font-size:1.1rem}
    .compare-item strong{font-size:1.2rem}
    .compare-item span{font-size:1.2rem}
    .step-item{font-size:1.2rem; padding:1rem 1.2rem}
    .step-example{font-size:1.1rem}
    .qa-item .qa-q{font-size:1.3rem}
    .qa-item .qa-a{font-size:1.2rem}
    .modal-notice strong{font-size:1.2rem}
    .modal-notice p{font-size:1.1rem}
    .my-position-panel{padding:2rem 1.6rem}
    .my-position-header{flex-wrap:wrap}
    .my-position-header .mp-title{font-size:1.4rem}
    .mp-mode-toggle{margin-left:0; margin-top:0.4rem}
    .mp-mode-btn{padding:0.5rem 1.2rem; font-size:1.15rem}
    .mp-mode-desc{font-size:1.15rem}
    .mp-bar-container{padding:0; margin-bottom:5rem}
    .mp-scale{font-size:1rem; height:1.6rem}
    .mp-track{height:4rem}
    .mp-range{border-width:1px}
    .mp-marker{width:2px}
    .mp-range-label{font-size:1rem}
    .mp-median-label{font-size:0.95rem}
    .mp-range-edge{font-size:1rem; bottom:-1.8rem}
    .mp-marker-flag{font-size:0.95rem; padding:0.2rem 0.6rem}
    .mp-marker.cut50 .mp-marker-flag{top:-3.4rem}
    .mp-marker.cut70 .mp-marker-flag{bottom:-3.2rem}
    .mp-legend{gap:1.2rem; margin-top:2.4rem}
    .mp-legend-item{font-size:1.15rem}
    .mp-guide{padding:1.2rem}
    .mp-guide p{font-size:1.2rem; line-height:1.7}
    .mp-guide-link{margin-left:0.8rem; display:inline-flex; width:auto}
    .mp-empty{padding:2rem 1.6rem}
    .mp-empty i{font-size:2.8rem}
    .mp-empty .mp-empty-msg{font-size:1.3rem}
    .mp-empty .mp-empty-sub{font-size:1.2rem}

    /* 모바일: 5등급 변환 안내문 접기 */
    .grade-convert-notice{max-height:0; overflow:hidden; margin:0; transition:max-height 0.3s ease}
    .grade-convert-toggle.notice-open .grade-convert-notice{max-height:20rem; margin:0.4rem 0 0}
    .grade-convert-toggle .notice-toggle-btn{display:inline-flex; align-items:center; gap:0.3rem; margin-left:auto; padding:0.3rem 0.8rem; color:#6b7280; font-size:1.2rem; background:none; border:1px solid #d1d5db; border-radius:0.5rem; cursor:pointer}
    .grade-convert-toggle .notice-toggle-btn i{font-size:1.2rem; transition:transform 0.25s ease}
    .grade-convert-toggle.notice-open .notice-toggle-btn i{transform:rotate(180deg)}

    /* 모바일 아코디언: 데이터 안내 패널 전체 토글 */
    .data-info-panel .info-panel-header{cursor:pointer; user-select:none; -webkit-user-select:none}
    .data-info-panel .info-panel-header::after{content:'\ea4e'; font-family:'remixicon'; font-size:1.4rem; color:#9ca3af; transition:transform 0.25s ease; flex-shrink:0; margin-left:auto}
    .data-info-panel.mob-open .info-panel-header::after{transform:rotate(180deg)}
    .data-info-panel .info-section .info-section-body{max-height:0; overflow:hidden; transition:max-height 0.3s ease}
    .data-info-panel.mob-open .info-section .info-section-body{max-height:200rem}
    .data-info-panel .info-section h5{margin-bottom:0}

    /* 모바일 아코디언: 내 등급 범위란? */
    .mp-guide .mp-guide-toggle{cursor:pointer; display:flex; align-items:center; user-select:none; -webkit-user-select:none}
    .mp-guide .mp-guide-toggle::after{content:'\ea4e'; font-family:'remixicon'; font-size:1.4rem; color:#9ca3af; transition:transform 0.25s ease; flex-shrink:0; margin-left:auto}
    .mp-guide.mob-open .mp-guide-toggle::after{transform:rotate(180deg)}
    .mp-guide .mp-guide-body{max-height:0; overflow:hidden; transition:max-height 0.3s ease}
    .mp-guide.mob-open .mp-guide-body{max-height:200rem}
}