@charset "ks_c_5601-1987";
/* ===== 예비중 가이드 sub04 수행평가 완전정복 : PC (2026-11-03) ===== */

/* ==================== 공통영역 : sub04_01~04 ==================== */
.inner {position: relative; width: 1100px; margin: 0 auto;}
.sub04 .section {position: relative; width: 100%;}
.sub04 img {z-index: 0;}

/* 섹션 제목 */
.sub04 .sec_tit {font: 34px/40px 'Pretendard-bold'; letter-spacing: -0.02em; color: #222;}
.sub04 .sec_tit .num {display: block; margin-bottom: 4px; font: 20px/22px 'Pretendard-extrabold'; letter-spacing: -0.02em; color: #EA4E01;}
.sub04 .sec_tit em {color: #EB4D00;}
.sub04 .con_desc {margin-top: 36px; font: 19px/30px 'Pretendard-regular'; letter-spacing: -0.02em; color: #373737;}
.sub04 .con_desc strong {font-family: 'Pretendard-extrabold';}
.sub04 .sub_tit {font: 26px/32px 'Pretendard-bold'; letter-spacing: -0.02em; color: #222;}

/* 하단 바로가기 */
.sub04 .outro {text-align: center;}
.sub04 .outro .line {display: block; width: 1px; height: 72px; margin: 0 auto; background: #ABABAB;}
.sub04 .outro .outro_tit {margin-top: 35px; font: 38px/44px 'Pretendard-regular'; letter-spacing: -0.02em; color: #222;}
.sub04 .outro .outro_tit strong {font-family: 'Pretendard-extrabold';}
.sub04 .btn_go {display: inline-flex; align-items: center; justify-content: center; height: 69px; padding: 0 30px; border-radius: 35px; background: #000; font: 24px/1 'Pretendard-extrabold'; letter-spacing: -0.03em; color: #fff; transition: transform .2s;}
.sub04 .btn_go:after {content: ''; box-sizing: content-box; width: 10px; height: 10px; margin-left: 22px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg);}
/* .sub04 .btn_go:hover, .sub04 .btn_go:focus-visible {transform: translateY(-3px);} */
.sub04 .btn_go:focus-visible {outline: 3px solid #EB4D00; outline-offset: 3px;}

/* 점 블릿 리스트 */
.sub04 .dot_list > li {position: relative; padding-left: 15px;}
.sub04 .dot_list > li:before {content: ''; position: absolute; left: 3px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #363636;}

/* 탑배너 : 서브 문구 2줄 배치 + 줄간격 (디자인 수정(비교과)_1102 반영) */
.sub04 .pm_top p {margin-top: 30px; line-height: 32px;}

/* ==================== 공통영역 : 탭 페이지 sub04_02~04 ==================== */
/* 탭 : 공통 .pm_tab 사용 (sub03_01 과 동일 구조 : .pm_tab > .inner > ul.tab_nav(li.on) + .tab_panel(hidden 토글)) */
.sub04 .pm_tab .tab_nav a:focus-visible {outline: 3px solid #EB4D00; outline-offset: -4px;}
.sub04 .tab_panel {padding-bottom: 137px; text-align: left;} /* 공통 .pm_tab{text-align:center} 상속 방지 */
.sub04 .tab_desc {margin-top: 56px; font-family: 'Pretendard-regular'; font-size: 19px; line-height: 30px; letter-spacing: -0.02em; color: #222;}
.sub04 .tab_desc strong {font-family: 'Pretendard-bold';}

/* 예시 뱃지 */
.sub04 .ex_tit {display: flex; height: 25px; font-family: 'notokr-bold'; font-size: 16px; line-height: 25px; letter-spacing: -0.075em; color: #fff;}
.sub04 .ex_tit .ex,
.sub04 .ex_tit .sbj {padding: 0 8px; background: #222;}
.sub04 .ex_tit .sbj {background: #EB5800;}

/* 출처 안내 */
.sub04 .tab_note {font-family: 'Pretendard-light', 'Pretendard-regular'; line-height: 18px; letter-spacing: -0.02em; color: #4D4D4D;} /* FONT_CHECK_REQUIRED : PSD Pretendard-Light, fonts.css 제공 여부 미확인 → 미제공 시 regular 로 표시 */

/* ==================== 개인영역 : sub04_01 수행평가 바로 알기 ==================== */
.sub04_01 .sec_tit {letter-spacing: -0.025em;}
.sub04_01 .con_desc {margin-top: 38px; color: #222;}

/* 01 수행평가의 개념 */
.sub04_01 .sec_concept {padding-top: 96px;}
.sub04_01 .sec_concept .con_desc {margin-top: 39px;}
.sub04_01 .concept_list {display: flex; margin-top: 71px;}
.sub04_01 .concept_list > li {position: relative; width: 284px;}
.sub04_01 .concept_list > li + li {margin-left: 124px;}
.sub04_01 .concept_list > li + li:before {content: ''; position: absolute; left: -63px; top: 3px; width: 1px; height: 312px; background: #E2E2E2;}
.sub04_01 .concept_list > li:nth-child(3):before {left: -62px;}
.sub04_01 .concept_list h4 {font-family: 'Pretendard-bold'; font-size: 25px; line-height: 30px; letter-spacing: -0.02em; color: #333;}
.sub04_01 .concept_list h4 em {color: #EB4D00;}
.sub04_01 .concept_list .dot_list {margin-top: 19px;}
.sub04_01 .concept_list .dot_list li {position: relative; padding-left: 10px; font-family: 'Pretendard-regular'; font-size: 16px; line-height: 25px; letter-spacing: -0.02em; color: #222;}
.sub04_01 .concept_list .dot_list li:before {content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #222;}
.sub04_01 .concept_list .thumb {width: 284px; height: 151px; margin-top: 40px; overflow: hidden;}
.sub04_01 .concept_list .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}

/* 02 지필평가 VS 수행평가 */
.sub04_01 .sec_compare {padding: 120px 0 137px;} /* 하단 : PSD 표 안내문 ~ 푸터(bottom 레이어) 간격 */
.sub04_01 .tbl_eval {margin-top: 74px; text-align: left;}
.sub04_01 .tbl_eval th,
.sub04_01 .tbl_eval td {box-sizing: border-box; height: 61px; letter-spacing: -0.02em;}
.sub04_01 .tbl_eval thead th {height: 62px; border-bottom-color: #9E9E9E; text-align: left; font-size: 19px; line-height: 24px;}
.sub04_01 .tbl_eval thead .th_gb {text-align: center; font-family: 'Pretendard-semibold'; color: #333;}
.sub04_01 .tbl_eval thead .th_paper {font-family: 'Pretendard-bold'; color: #000;}
.sub04_01 .tbl_eval thead .th_perf {font-family: 'Pretendard-bold'; color: #EB4D00;}
.sub04_01 .tbl_eval tbody tr:first-child th,
.sub04_01 .tbl_eval tbody tr:first-child td {height: 60px;}
.sub04_01 .tbl_eval tbody tr.multi th,
.sub04_01 .tbl_eval tbody tr.multi td {height: 112px;}
.sub04_01 .tbl_eval tbody th {text-align: center; font-family: 'Pretendard-semibold'; font-size: 18px; line-height: 24px; color: #4C4C4C;} /* 필드명(구분)과 가운데 맞춤 : 디자인 수정(비교과)_1102 반영 */
.sub04_01 .tbl_eval td {font-size: 17.5px; line-height: 26px;}
.sub04_01 .tbl_eval .c2 {padding-left: 91px;}
.sub04_01 .tbl_eval td.c2 {font-family: 'Pretendard-regular'; color: #3C3C3C;}
.sub04_01 .tbl_eval td.c3 {font-family: 'Pretendard-semibold'; color: #222;}
.sub04_01 .tbl_eval .tbl_dot li {position: relative; padding-left: 11px;}
.sub04_01 .tbl_eval .tbl_dot li:before {content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #666;}
.sub04_01 .tbl_eval .c3 .tbl_dot li:before {background: #592F1E;}
.sub04_01 .sec_compare .pm_note {margin-top: 21px; font-family: 'Pretendard-light', 'Pretendard-regular'; line-height: 18px; letter-spacing: -0.02em; color: #4D4D4D;} /* FONT_CHECK_REQUIRED : PSD Pretendard-Light, fonts.css 제공 여부 미확인 → 미제공 시 regular 로 표시 */

/* ==================== 개인영역 : sub04_02 과목별 수행평가 대비법 ==================== */
/* ===== tab2 : 과목별 수행평가 대비법 (2026-11-03) ===== */
.sub04_02 .ex_list {margin-top: 56px;}
.sub04_02 .ex_list.grid {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 38px 40px;}
.sub04_02 .ex_list.grid > li {width: 530px;}
.sub04_02 .ex_list.grid > li.full {width: 100%; margin-top: 2px;}

/* 예시 표 : 국어~사회/역사(PSD tab1~5 템플릿) */
.sub04_02 .tbl_ex {margin-top: 8px;}
.sub04_02 .tbl_ex thead th {box-sizing: border-box; height: 62px; border-bottom-color: #000; font-family: 'Pretendard-semibold'; font-size: 19px; letter-spacing: -0.02em; color: #3C3C3C;}
.sub04_02 .tbl_ex td {box-sizing: border-box; height: 60px; padding: 0 10px; border-left: 1px solid #D4D4D4; font-size: 17.5px; line-height: 21px; letter-spacing: -0.02em; color: #3C3C3C;}
.sub04_02 .tbl_ex td.c1 {border-left: 0;}

/* 예시 표 : 예체능/기가/한문 */
.sub04_02 .tbl_ex.art thead th {font-family: 'Pretendard-medium'; font-size: 17.5px; color: #000;}
.sub04_02 .tbl_ex.art td {font-family: 'Pretendard-medium'; line-height: 22px; color: #3E3E3E;}
.sub04_02 .tbl_ex.hanmun thead th {border-bottom-color: #3E3E3E;}
.sub04_02 .ex_list + .tab_note {margin-top: 21px; font-size: 14px;}
.sub04_02 .ex_list.grid + .tab_note {font-size: 13px;}

/* ==================== 개인영역 : sub04_03 유형별 수행평가 대비법 ==================== */
/* ===== tab3 : 유형별 수행평가 대비법 (2026-11-03) ===== */
/* .sub04 .type2 .tab_desc {margin-top: 58px;} */
.sub04_03 .ex_name {font-family: 'Pretendard-semibold'; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: #222;}
.sub04_03 .ex_q {font-family: 'Pretendard-regular'; font-size: 17.5px; line-height: 28px; letter-spacing: -0.02em; color: #222;}
.sub04_03 .ex_col {display: flex; align-items: flex-start; gap: 0 40px;}
.sub04_03 .ex_col > li {flex: 1;}
.sub04_03 .ex_box {margin-top: 14px; border-top: 2px solid #222;}
.sub04_03 .ex_box .ex_q {margin-top: 13px;}
.sub04_03 .tab_note {margin-top: 21px;}
.sub04_03 figure {margin: 0;}
.sub04_03 .gray_box {display: flex; flex-direction: column; justify-content: center; margin-top: 55px; padding: 0 41px; background: #F7F7F7; font-family: 'Pretendard-medium'; font-size: 18px; line-height: 28px; letter-spacing: -0.02em; color: #222;}

/* 서논술형 */
.sub04_03 .type1 .ex_col {margin-top: 56px;}
.sub04_03 .type1 .ex_name {margin-top: 30px;}
.sub04_03 .type1 .ex_q {margin-top: 17px;}
.sub04_03 .type1 .poster {display: flex; gap: 0 14px; margin-top: 35px;}
.sub04_03 .type1 .poster figure {width: 258px; text-align: center;}
.sub04_03 .type1 .poster img {display: block; width: 258px; height: 214px;}
.sub04_03 .type1 .poster figcaption {margin-top: 15px; font-family: 'Pretendard-medium'; font-size: 17px; line-height: 22px; letter-spacing: -0.02em; color: #222;}
.sub04_03 .type1 .photo {margin-top: 32px;}
.sub04_03 .type1 .photo img {display: block; width: 530px; height: 218px;}

/* 과정평가형 : 수업 흐름 */
.sub04_03 .type2 .ex_tit {margin-top: 56px;}
.sub04_03 .flow {position: relative; height: 160px; margin-top: 6px;}
.sub04_03 .flow .bar {position: absolute; left: 0; top: 0; width: 100%; height: 69px;}
.sub04_03 .flow .bar:before {content: ''; position: absolute; left: 0; top: 9px; width: 1070px; height: 49px; border-radius: 25px 0 0 25px; background: #EB5800;} /* 끝 = 세모 시작점(1068) + 2px 겹침(틈 방지) */
.sub04_03 .flow .bar:after {content: ''; position: absolute; right: 0; top: 0; width: 32px; height: 69px; background: url("//img1s.mbest.co.kr/pre_mschool/2026/sub4/t3_2_arrow.png") no-repeat 0 0;} /* 오른쪽 화살표 세모 이미지 32x69 */
.sub04_03 .flow .bar span {position: absolute; left: 0; top: 9px; width: 100%; font-family: 'notokr-black'; font-size: 22px; line-height: 49px; text-align: center; color: #fff;}
.sub04_03 .flow_list li {position: absolute; top: 108px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 52px; padding-left: 40px; border: 2px solid #ABABAB; border-radius: 26px; background: #fff; font-family: 'Pretendard-semibold'; font-size: 18px; letter-spacing: -0.02em; color: #222;}

/* 노드 연결선 : 1px #DEDEDE, 노드 아래 ~ 박스 상단 테두리까지 42px (위치 기준 = 박스 테두리 안쪽) */
.sub04_03 .flow_list li:before {content: ''; position: absolute; left: 50%; top: -44px; width: 1px; height: 42px; background: #DEDEDE;}

/* 노드 : 주황 링 4px + 안쪽 흰 원 10px = 18px, 바깥 흰 테두리 3px(총 24px) / 중심이 막대 아래 끝선, 연결선 기준 0.5px 오른쪽 */
.sub04_03 .flow_list li:after {content: ''; position: absolute; left: 50%; top: -62px; box-sizing: border-box; width: 18px; height: 18px; margin-left: -8px; border: 4px solid #EB5800; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff;} /* 가상요소는 .section_preMsch * 의 border-box 대상이 아니라 직접 지정 */
.sub04_03 .flow_list img {position: absolute; top: 50%; transform: translateY(-50%);}
.sub04_03 .flow_list li:nth-child(1) {left: 6px; width: 210px;}
.sub04_03 .flow_list li:nth-child(1) img {left: 17px;}
.sub04_03 .flow_list li:nth-child(2) {left: 250px; width: 210px;}
.sub04_03 .flow_list li:nth-child(2) img {left: 13px;}
.sub04_03 .flow_list li:nth-child(3) {left: 489px; width: 210px;}
.sub04_03 .flow_list li:nth-child(3) img {left: 21px;}
.sub04_03 .flow_list li:nth-child(4) {left: 731px; width: 239px;}
.sub04_03 .flow_list li:nth-child(4) img {left: 19px;}
.sub04_03 .flow_list li:nth-child(4):before,
.sub04_03 .flow_list li:nth-child(4):after {left: 126px;} /* PSD 노드 위치 : 박스 중앙보다 9px 오른쪽 */

/* 말줄임 점 : 지름 7px #999, 12px 간격 4개, 박스 세로 중앙 */
.sub04_03 .flow .more {position: absolute; left: 1030px; top: 130px; width: 7px; height: 7px; border-radius: 50%; background: #999; box-shadow: 12px 0 0 #999, 24px 0 0 #999, 36px 0 0 #999;}

/* 과제형 */
.sub04_03 .type3 .gray_box {height: 112px;}
.sub04_03 .type3 .ex_col {margin-top: 61px;}
.sub04_03 .type3 .ex_name {margin-top: 27px;}

/* 발표형 */
.sub04_03 .type4 .gray_box {margin-top: 56px; height: 66px; padding-left: 37px; background: #F3F3F3;}
.sub04_03 .type4 .ex_tit {margin-top: 62px;}
.sub04_03 .type4 .ex_box {margin-top: 15px;}
.sub04_03 .type4 .ex_name {margin-top: 33px;}
.sub04_03 .type4 .ex_q {margin-top: 8px;}
.sub04_03 .type4 .illust {margin: 39px 0 0 -3px;}
.sub04_03 .type4 .illust img {display: block; width: 484px; height: 220px;}
.sub04_03 .type4 .cond {margin-top: 39px; padding: 30px 0 26px; border-top: 1px solid #E4E4E4; border-bottom: 1px solid #D4D4D4; font-family: 'Pretendard-medium'; font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: #777;}
.sub04_03 .type4 .cond ul {margin-top: 2px; font-size: 14px;}
.sub04_03 .type4 .cond ul + p {margin-top: 18px;}
.sub04_03 .type4 .cond p + p {margin-top: 5px;}

/* 실기형 */
.sub04_03 .type5 .ex_tit {margin-top: 56px;}
.sub04_03 .photo_list {display: flex; flex-wrap: wrap; gap: 62px 25px; margin-top: 14px;}
.sub04_03 .photo_list li {width: 350px; text-align: center;}
.sub04_03 .photo_list img {display: block; width: 350px; height: 216px;}
.sub04_03 .photo_list figcaption {margin-top: 12px; font-family: 'Pretendard-medium'; font-size: 17px; line-height: 28px; letter-spacing: -0.02em; color: #222;}
.sub04_03 .photo_list + .tab_note {margin-top: 15px;}

/* ==================== 개인영역 : sub04_04 수행평가 최적화 프라임탭 ==================== */
/* ===== tab4 : 수행평가 최적화 프라임탭 (2026-11-03) ===== */
.sub04_04 figure {margin: 0;}
.sub04_04 .lead {margin-top: 53px; font-family: 'Pretendard-regular'; font-size: 26px; line-height: 42px; letter-spacing: -0.025em; text-align: center; color: #222;}
.sub04_04 .lead strong {font-family: 'Pretendard-extrabold';}
.sub04_04 .prime_list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.sub04_04 .prime_list figcaption {margin-top: 12px; font-family: 'Pretendard-medium'; font-size: 17px; line-height: 28px; letter-spacing: -0.02em; text-align: center; color: #222;}
.sub04_04 .prime_list .thumb {display: block; width: 250px; height: 150px;}

/* 썸네일 테두리 : PSD 획 1px #000(이미지 박스 안쪽 가장자리) → 박스 크기 유지, 이미지는 원본 1:1 가운데 */
.sub04_04 .prime_list img {box-sizing: border-box; border: 1px solid #000; object-fit: none; object-position: 50% 50%;}
.sub04_04 .prime_dot li {position: relative; padding-left: 17px; font-family: 'Pretendard-regular'; font-size: 17.5px; line-height: 31px; letter-spacing: -0.02em; color: #222;}
.sub04_04 .prime_dot li:before {content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #222;}
.sub04_04 .prime_tit {font-family: 'Pretendard-semibold'; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: #222;}
.sub04_04 .prime_tit em {color: #EB4D00;}
.sub04_04 .prime_list .circle {position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #222; font-family: 'Pretendard-extrabold'; font-size: 18px; line-height: 22px; text-align: center; color: #fff;}

/* 프라임탭 종합반 버튼 : sub05_01 .btn_wrap 과 동일 디자인 (공통 pre_mschool_2026.css .btn_wrap a 기반) */
.sub04_04 .btn_wrap {margin-top: 60px; text-align: center;} /* 탭 구분 없이 공통 */
.sub04_04 .btn_wrap a {font-family: 'Pretendard-extrabold'; background: #000; color: #fff;}
.sub04_04 .btn_wrap a:after {content: ''; display: inline-block; width: 10px; height: 16px; margin-left: 16px; background: url("//img1s.mbest.co.kr/pre_mschool/2026/sub5/ic_arr.png") no-repeat 0 0;} /* IMG_PATH_CHECK_REQUIRED : sub05_01 은 <%= img_premschool%>2026/sub5/ic_arr.png (CSS 파일이라 기존 sub4 이미지와 같은 도메인으로 기재) */
.sub04_04 .btn_wrap + .tab_note {margin-top: 21px; font-size: 13px;}

/* 주요과목 수행대비 */
.sub04_04 .prime1 .prime_list {margin-top: 54px; gap: 75px 0;}
.sub04_04 .prime1 .prime_list > li {width: 491px;}
.sub04_04 .prime1 figure {position: relative; height: 309px;}
.sub04_04 .prime1 figure img {display: block; width: 473px; height: 288px;}
.sub04_04 .prime1 figure .sub {position: absolute; left: 294px; top: 193px; width: 197px; height: 116px;} /* 겹친 작은 썸네일 */
.sub04_04 .prime1 .prime_list .circle {left: 405px; top: -16px;} /* prime3 과 동일하게 큰 썸네일 우측 위 (473 - 84 + 16) */
.sub04_04 .prime1 .prime_dot {margin-top: 25px;}

/* 예체능 수행대비 */
.sub04_04 .prime2 .prime_list {margin-top: 54px; gap: 56px 0;}
.sub04_04 .prime2 .prime_list > li,
.sub04_04 .prime4 .prime_list > li {width: 250px;}

/* 코딩/과학탐구 대비 */
.sub04_04 .prime3 .prime_list {margin-top: 54px; gap: 73px 0;}
.sub04_04 .prime3 .prime_list > li {width: 510px;}
.sub04_04 .prime3 figure {position: relative;}
.sub04_04 .prime3 figure img {display: block; width: 510px; height: 288px;}
.sub04_04 .prime3 .prime_list .circle {left: 442px; top: -16px;}
.sub04_04 .prime3 .prime_tit {margin-top: 34px;}
.sub04_04 .prime3 .prime_dot {margin-top: 22px;}

/* 수행 제작기법/자료 */
.sub04_04 .prime4 .prime_list {margin-top: 52px;}
.sub04_04 .prime4 .prime_list + .gray_box {margin-top: 37px;}
.sub04_04 .prime4 .gray_box + .prime_list {margin-top: 80px;}
.sub04_04 .prime4 .gray_box {padding: 33px 51px 30px; background: #F7F7F7;}
.sub04_04 .prime4 .prime_dot {margin-top: 10px;}
.sub04_04 .prime4 .prime_dot li {padding-left: 21px;}
.sub04_04 .prime4 .prime_dot li:before {left: 2px;}
