/* PATH4(susi+jungsi integrated) page skin. Loads after susi2_list.css.
   CI list fragments (getSaveListBundle_ajax) cannot be edited locally, so this file
   restyles their fixed markup (.gyogwa-tbl/.nonsul-tbl/.jungsi-tbl, .btn-*) to the
   susi2 list tokens. Every rule is scoped under .path4_container; the long
   .contentWrap01 .content .lap01 chains mirror susi2_list.css selectors so the
   overrides win on specificity. */

.path4_container .list_table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: #FFFFFF;
}
.path4_container .list_table th,
.path4_container .list_table td {
	text-align: center;
	vertical-align: middle;
}
.path4_container .contentWrap01 .content .lap01 td {
	word-break: keep-all;
}

/* Left/right border-style:hidden suppresses the nested table's vertical outer
   edges under border-collapse, so only the host .lap01 td border draws there
   (no double line; width:100% + host padding:0 make the edges coincide).
   Top/bottom stay none: the table is vertically centered in the 232px cell, so
   those edges never touch the host border and the perimeter cells' own 1px line
   must keep drawing to close the grid. */
/* .jonhab-tbl (sic) is the class the CI jonghab fragment ships; the local
   placeholder frame reuses it so real jonghab_html_arr payloads restyle as-is. */
.path4_container .jonhab-tbl,
.path4_container .gyogwa-tbl,
.path4_container .nonsul-tbl,
.path4_container .jungsi-tbl {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-style: none hidden;
	table-layout: fixed;
}
.path4_container .contentWrap01 .content .lap01 .jonghab_elem,
.path4_container .contentWrap01 .content .lap01 .gyogwa_elem,
.path4_container .contentWrap01 .content .lap01 .nonsul_elem,
.path4_container .contentWrap01 .content .lap01 .jungsi_elem {
	padding: 0;
}
.path4_container .contentWrap01 .content .lap01 .jonhab-tbl td,
.path4_container .contentWrap01 .content .lap01 .gyogwa-tbl td,
.path4_container .contentWrap01 .content .lap01 .nonsul-tbl td,
.path4_container .contentWrap01 .content .lap01 .jungsi-tbl td {
	height: auto;
	padding: 7px 4px;
	border: 1px solid #E4E4E4;
	background: #FFFFFF;
	color: #444444;
	font-size: 12px;
	line-height: 1.35;
}
.path4_container .contentWrap01 .content .lap01 .sel-tbl td {
	background: #ECF4D3;
}

.path4_container .contentWrap01 .content .lap01 .jonghab_elem {
	height: 232px;
	background: #FFFFFF;
}
.path4_container .contentWrap01 .content .lap01 .path4-list-state {
	height: 230px;
	color: #666666;
	font-size: 14px;
}

/* The bundle ajax may run for tens of seconds (45s timeout); an animated
   spinner makes the initial wait read as loading, not as a stalled empty
   table. Pure CSS because the CI loader gif (TEMPLATE_ADMIN_PATH) is not
   served on this host, same as the glyphicon fonts below. */
.path4_container .path4-loading {
	padding: 20px 0;
}
.path4_container .path4-loading-spinner {
	display: inline-block;
	width: 34px;
	height: 34px;
	border: 4px solid #E4E4E4;
	border-top-color: #497BB6;
	border-radius: 50%;
	-webkit-animation: path4-spin 0.9s linear infinite;
	animation: path4-spin 0.9s linear infinite;
}
.path4_container .path4-loading-title {
	margin: 12px 0 0;
	color: #444444;
	font-size: 15px;
	font-weight: 600;
}
.path4_container .path4-loading-desc {
	margin: 6px 0 0;
	color: #898989;
	font-size: 12px;
	-webkit-animation: path4-blink 1.6s ease-in-out infinite;
	animation: path4-blink 1.6s ease-in-out infinite;
}
@-webkit-keyframes path4-spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes path4-spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes path4-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
@keyframes path4-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* jonghab now ships in the bundle (include_jonghab=Y, 2027 gyogwa-only 200
   score); the dimmed placeholder frame below is the fallback index.php renders
   only when the bundle returns an empty jonghab_html_arr. */
.path4_container .contentWrap01 .content .lap01 .path4-jonghab-frame td {
	color: #898989;
}
.path4_container .path4-frame-badge {
	display: inline-block;
	padding: 2px 9px;
	border: 1px solid #E4E4E4;
	border-radius: 9px;
	background: #F8F9FB;
	color: #898989;
	font-size: 11px;
}

/* CI fragments ship bootstrap button classes; map them onto the susi2 chip colors
   (.btn-b1/.btn-b3). Sizing comes from custom_v2.css .btn-sm. Glyphicon fonts are
   not served here, so the icon tags are hidden. */
.path4_container .btn {
	display: inline-block;
	border: 0;
	background-image: none;
	color: #FFFFFF;
	font-weight: 600;
	cursor: pointer;
}
.path4_container .btn-info {
	background-color: #497BB6;
}
/* selected (.sel-tbl) tables ship btn-success instead of btn-info; green from the
   common.css .btn-success palette keeps the selected/unselected distinction */
.path4_container .btn-success {
	background-color: #5cb85c;
}
.path4_container .btn-danger {
	background-color: #ea5455;
}
.path4_container .btn[disabled] {
	opacity: 0.55;
	cursor: default;
}
.path4_container .glyphicon {
	display: none;
}

/* The CI row ships the delete button in a standalone last td; index.php JS moves
   the button into .cls_info and only then tags the emptied td with
   .path4-del-cell. If the row structure is unexpected the button stays in its
   original td, which the 6-col fixed layout squeezes to zero width at the right
   table edge - ugly but still clickable. */
.path4_container .path4-del-wrap {
	margin-top: 6px;
}
.path4_container .contentWrap01 .content .lap01 td.path4-del-cell {
	display: none;
}

/* 학종(jonghab) 80/60/40/20% 진단 색 - susi_jindan_btn 4단계 팔레트와 통일 */
.path4_container .jonhab-tbl .jindan-badge{font-weight:bold;line-height:1.2;}
.path4_container .jonhab-tbl .jindan-80{color:#1b1afe;}
.path4_container .jonhab-tbl .jindan-60{color:#1b9392;}
.path4_container .jonhab-tbl .jindan-40{color:#f79704;}
.path4_container .jonhab-tbl .jindan-20{color:#fc1e29;}

/* ==========================================================================
   결과보기 in-page 모달 (index.php #path4ResultModal)
   CI 프래그먼트(modal_*_v)는 bootstrap(charisma) 마크업인데 이 페이지는
   bootstrap을 로드하지 않으므로, 프래그먼트가 실제로 쓰는 클래스만
   PATH4 토큰(#495771/#497BB6/#E4E4E4/#F8F9FB)으로 재구현한다.
   판정색(.ST5/.spe-td/.univ-txt/line-1~4 등)은 원본 susi2SaveList.css 값 유지.
   ========================================================================== */

body.path4-modal-lock { overflow: hidden; }

.path4_container .path4-modal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10000;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.path4_container .path4-modal-backdrop {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}
.path4_container .path4-modal-dialog {
	position: relative;
	/* 교사용 원본 모달(rlt_pop_area)과 동일 폭 - 프래그먼트 고정폭(차트 1070px 등) 기준 */
	width: 1100px;
	margin: 30px auto;
	background: #FFFFFF;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	/* row 음수마진(-15px)이 다이얼로그 밖으로 내미는 빈 패딩 영역을 잘라낸다 */
	overflow: hidden;
}
.path4_container .path4-modal-close {
	position: absolute;
	top: 10px; right: 12px;
	z-index: 10;
	padding: 0 6px;
	border: 0;
	background: none;
	color: #C7CCD6;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.path4_container .path4-modal-close:hover { color: #FFFFFF; }
.path4_container .path4-modal-state {
	padding: 90px 20px;
	color: #666666;
	font-size: 14px;
	text-align: center;
}

/* --- 프래그먼트 공통 골격 --- */
/* custom_v2.css의 자체 모달 스킨(.modal-content{width:50%;margin:15% auto;padding:20px;border})을 중화한다 */
.path4_container .path4-modal .modal-content {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: #FFFFFF;
	color: #444444;
	font-size: 13px;
}
.path4_container .path4-modal .modal-body { padding: 0; }
.path4_container .path4-modal .modal-footer {
	padding: 14px 25px;
	border-top: 1px solid #E4E4E4;
	background: #F8F9FB;
	text-align: right;
}
.path4_container .path4-modal .modal-footer .btn { margin-left: 6px; }
/* PDF 저장은 새창(result.php 계열) 전용 전역함수(savePDF) 의존이라 숨긴다 */
.path4_container .path4-modal .modal-footer .btn-warning { display: none; }

/* bootstrap grid 최소 재현: row 음수마진 + col 15px 패딩 (중첩해도 내용폭 유지) */
.path4_container .path4-modal .row { margin-left: -15px; margin-right: -15px; }
.path4_container .path4-modal .row:before,
.path4_container .path4-modal .row:after { content: ""; display: table; }
.path4_container .path4-modal .row:after { clear: both; }
.path4_container .path4-modal .col-md-1,
.path4_container .path4-modal .col-md-6,
.path4_container .path4-modal .col-md-11,
.path4_container .path4-modal .col-md-12,
.path4_container .path4-modal .col-sm-2,
.path4_container .path4-modal .col-sm-3 {
	position: relative;
	float: left;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.path4_container .path4-modal .col-md-1 { width: 8.3333%; }
.path4_container .path4-modal .col-md-6 { width: 50%; }
.path4_container .path4-modal .col-md-11 { width: 91.6667%; }
.path4_container .path4-modal .col-md-12 { width: 100%; }
.path4_container .path4-modal .col-sm-2 { width: 16.6667%; }
.path4_container .path4-modal .col-sm-3 { width: 25%; }
.path4_container .path4-modal .center-block { display: block; margin: 0 auto; text-align: center; }
.path4_container .path4-modal img { max-width: 100%; }

/* 모달 타이틀 바: 최상단 box-header(전형명 - 이름)만 네이비 스트립으로 */
.path4_container .path4-modal .modal-body > .row > .box > .box-inner > .box-header {
	margin: 0;
	padding: 14px 40px 14px 25px;
	border: 0;
	background: #495771;
}
.path4_container .path4-modal .modal-body > .row > .box > .box-inner > .box-header h2 {
	margin: 0;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
}

/* 탭: susi2_list.css .tit_nav01 패턴(active = 2px 네이비 보더 + 흰 바닥) 이식 */
.path4_container .path4-modal .nav-tabs {
	margin: 14px 0 0;
	/* 프래그먼트 인라인 padding-left:10px보다 우선시켜 탭 시작점을 본문 여백(25px)과 정렬 */
	padding-left: 25px !important;
	border-bottom: 2px solid #495771;
	list-style: none;
}
.path4_container .path4-modal .nav-tabs:after { content: ""; display: block; clear: both; }
.path4_container .path4-modal .nav-tabs > li {
	float: left;
	margin: 0 6px 0 0;
	list-style: none;
}
.path4_container .path4-modal .nav-tabs > li.active { margin-bottom: -2px; }
.path4_container .path4-modal .nav-tabs > li > a {
	display: block;
	padding: 10px 22px 8px;
	border: 2px solid transparent;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background: #F8F9FB;
	color: #A5A5A5;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	outline: none;
}
.path4_container .path4-modal .nav-tabs > li.active > a {
	border-color: #495771;
	border-bottom: 2px solid #FFFFFF;
	background: #FFFFFF;
	color: #495771;
}
.path4_container .path4-modal .tab-content { padding: 4px 25px 30px; }
.path4_container .path4-modal .tab-pane { display: none; }
.path4_container .path4-modal .tab-pane.active { display: block; }

/* alert: 탭 상단 대학/전형 타이틀 스트립(alert-success)과 안내문(alert-info) */
.path4_container .path4-modal .alert {
	padding: 12px 14px;
	border: 1px solid #E4E4E4;
	border-radius: 6px;
	background: #F8F9FB;
	color: #444444;
}
.path4_container .path4-modal .alert h3 {
	margin: 0;
	color: #495771;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.4;
}
/* custom_v2.css가 .alert-success/.alert-info 팔레트를 !important로 강제해서 동급으로 되받는다 */
.path4_container .path4-modal .alert-success {
	color: #444444 !important;
	background-color: #F8F9FB !important;
	border-color: #E4E4E4 !important;
}
.path4_container .path4-modal .alert-info {
	color: #444444 !important;
	background-color: #FFFFFF !important;
	border-color: #E4E4E4 !important;
	font-size: 13px;
	line-height: 1.7;
}

/* 섹션 제목(1. 지원자격 등): 타이틀 바보다 낮은 위계의 어센트 바 */
.path4_container .path4-modal .box { margin: 4px 0; }
.path4_container .path4-modal .box-header {
	margin: 14px 0 8px;
	padding: 8px 12px;
	border: 1px solid #E4E4E4;
	border-left: 3px solid #495771;
	background: #F8F9FB;
}
.path4_container .path4-modal .box-header h2 {
	margin: 0;
	color: #444444;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
}
.path4_container .path4-modal h5 {
	margin: 14px 0 6px;
	color: #495771;
	font-size: 14px;
	font-weight: bold;
}

/* 표: PATH4 리스트 표 톤. 목록용 .gyogwa-tbl 규칙(fixed/hidden 보더)도 여기서 해제 */
.path4_container .path4-modal table.table {
	width: 100%;
	margin: 6px 0 14px;
	border-collapse: collapse;
	border: 1px solid #E4E4E4;
	background: #FFFFFF;
	table-layout: auto;
}
.path4_container .path4-modal table.table th,
.path4_container .path4-modal table.table td {
	padding: 7px 6px;
	border: 1px solid #E4E4E4;
	color: #444444;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	word-break: keep-all;
}
.path4_container .path4-modal table.table th { background: #F8F9FB; }

/* 프래그먼트 시맨틱 셀 색 - 원본(susi2SaveList.css, 2014hap.css) 값 유지 */
.path4_container .path4-modal .ST5 { background: #fcfcd9; }
.path4_container .path4-modal .spe-td { background: #f1f7c8; }
.path4_container .path4-modal .thBg01 th { background: #F8F9FB; }
.path4_container .path4-modal td.subject { text-align: left; }
.path4_container .path4-modal .univ-txt { font-weight: bold; color: #bd0243; }
.path4_container .path4-modal .th_underline { border-bottom: 2px solid #495771; }
.path4_container .path4-modal .bgsky { background: #edeffa; font-weight: bold; }
.path4_container .path4-modal .bgpink { background: #fbf0f5; }
.path4_container .path4-modal .bgyellow { background: #f8f8ea; }
.path4_container .path4-modal .width_pix1 { width: 49.5px; }
.path4_container .path4-modal .width_pix2 { width: 60.3px; }

/* 진단 배지 영역 (gyogwa/nonsul/jungsi 첫 탭) - 원본 구조, 보더만 PATH4 톤 */
.path4_container .path4-modal .panjung-div {
	border: 1px solid #E4E4E4;
	border-radius: 10px;
	height: 90px;
}
.path4_container .path4-modal .panjung-div .jindan-div { padding-top: 10px; padding-left: 0; }
.path4_container .path4-modal .panjung-div .jindan-back {
	width: 70px;
	height: 70px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 5px;
	background: #F0F1F5;
}
.path4_container .path4-modal .panjung-div .jindan-txt-div {
	height: 100%;
	padding-top: 12px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 14px;
}
.path4_container .path4-modal .panjung-div2 {
	border: 1px solid #E4E4E4;
	border-radius: 10px;
	height: 100px;
}
.path4_container .path4-modal .panjung-div2 .jindan-txt-div2 {
	height: 100%;
	padding-top: 12px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 13px;
}

/* 모의지원 차트 박스: 고정폭 프레임과 bootstrap gutter만큼 짧아진 헤더의 우측 경계를 맞춘다 */
.path4_container .path4-modal .col-md-6.graph_area > div:first-child {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: calc(100% + 15px);
}
.path4_container .path4-modal .amdp_chart.graph_area > div:first-child + div {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.path4_container .path4-modal .graph_area > div:first-child {
	background: #495771 !important;
	border-radius: 6px 6px 0 0;
	font-size: 14px;
}
.path4_container .path4-modal .graph_area > div:first-child + div {
	border: 1px solid #E4E4E4 !important;
}

/* 그래프 레전드 - 원본 susi2SaveList.css line-1~4 유지 */
.path4_container .path4-modal .line-1,
.path4_container .path4-modal .line-2,
.path4_container .path4-modal .line-3,
.path4_container .path4-modal .line-4 {
	display: flex;
	align-items: center;
	margin: 8px 0;
	padding-left: 0;
	padding-right: 0;
	font-size: 13px;
}
.path4_container .path4-modal .line-1::before,
.path4_container .path4-modal .line-2::before,
.path4_container .path4-modal .line-3::before,
.path4_container .path4-modal .line-4::before {
	content: "";
	flex-grow: 1;
	height: 3px;
	margin: 0 8px 0 12px;
	font-size: 0;
	line-height: 0;
}
.path4_container .path4-modal .line-1 { color: #3366cc; }
.path4_container .path4-modal .line-1::before { background: #3366cc; }
.path4_container .path4-modal .line-2 { color: #dc3912; }
.path4_container .path4-modal .line-2::before { background: #dc3912; }
.path4_container .path4-modal .line-3 { color: #ff9900; }
.path4_container .path4-modal .line-3::before { background: #ff9900; }
.path4_container .path4-modal .line-4 { color: #109618; }
.path4_container .path4-modal .line-4::before { background: #109618; }

.path4_container .path4-modal .dataTables_info {
	padding: 4px 0;
	color: #666666;
	font-size: 12px;
}
.path4_container .path4-modal .ajax_paging { min-height: 10px; text-align: center; }

/* 모의정시 4단계 합격진단 바 - 원본 susi2SaveList.css 이식 (이미지는 운영 절대경로) */
.path4_container .path4-modal .content li { list-style: none; }
.path4_container .path4-modal .content ul { margin: 0; padding: 0; }
.path4_container .path4-modal .cb { clear: both; }
.path4_container .path4-modal .Ctxt {
	border: 1px solid #E4E4E4;
	border-radius: 6px;
	padding: 10px 0;
}
.path4_container .path4-modal .Ctxt span { color: #d54175; }
.path4_container .path4-modal .Ctxt li {
	color: #666666;
	font-size: 14px;
	line-height: 24px;
}
.path4_container .path4-modal .Ctxt .tit1 {
	padding-left: 20px;
	font-size: 14px;
	text-align: center;
}
.path4_container .path4-modal .Ctxt .iscon_bar {
	position: relative;
	width: 100%;
	height: 55px;
	margin: 10px auto 0;
	background: url(/images/pass/jungsi/univ/hab_iscon_bar_bg_4level.png) center no-repeat;
}
.path4_container .path4-modal .Ctxt .iscon_bar .hab_btn {
	position: absolute;
	width: 33px;
	height: 17px;
	background: url(/images/pass/jungsi/univ/hab_btn.png) center no-repeat;
}
.path4_container .path4-modal .mo_graph li {
	float: left;
	display: inline-block;
	position: relative;
	width: 20%;
	height: 17px;
	color: transparent;
}
/* 원본 margin-left:105px 고정값 대신 중앙 정렬: bg 이미지(center)와 구간 스트립을 같은 축에 맞춘다 */
.path4_container .path4-modal .mo_graph .graph-stl {
	display: block;
	width: 862px;
	height: 17px;
	margin: 15px auto 0;
}
.path4_container .path4-modal .my_target {
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 7px;
	background-color: red;
	-webkit-animation: path4-target-loop 1s 1;
	animation: path4-target-loop 1s 1;
}
@-webkit-keyframes path4-target-loop {
	0% { top: 0; left: -100px; }
	50% { top: 0; left: 80px; }
	100% { top: 0; left: -100px; }
}
@keyframes path4-target-loop {
	0% { top: 0; left: -100px; }
	50% { top: 0; left: 80px; }
	100% { top: 0; left: -100px; }
}