@charset "UTF-8";
/*
 * 다문화 진로진학 안내 (/edu/career) 전용 스타일
 *
 *   수정일      수정자   수정내용
 *   2026-08-13   moon    최초 생성
 *
 * ★ 이 파일은 /edu/career 한 화면만 읽는다.
 *   kmsia-common.css 는 공개화면 32종이 함께 읽으므로 여기에 넣지 않는다(8.32절 방침).
 *
 * ★ 본문·흐름은 white-space: pre-line 이다. 관리화면에서 넣은 줄바꿈이 그대로 살아야 한다.
 *   태그는 저장되지 않으므로(XSS 필터가 엔티티로 바꾼다) 줄바꿈이 유일한 서식이다.
 */

.cr-sec { padding: 48px 0; }
.cr-sec .sec-head { margin-bottom: 20px; }
.cr-sec h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cr-sec .sec-head .sub { margin-top: 6px; font-size: 15px; color: #5a626b; }

.cr-lead { margin-bottom: 28px; font-size: 17px; line-height: 1.75; color: #3d444b; }

/* ------------------------------------------------------------------ 안내 카드 */

.cr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}

.cr-card {
	padding: 24px;
	border: 1px solid #e3e6ea;
	border-radius: 14px;
	background: #fff;
}

.cr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cr-ico { font-size: 26px; line-height: 1; }
.cr-se {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	background: #eef4fb; color: #1f6feb; font-size: 12px; font-weight: 700;
}
.cr-lock {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	background: #fdf0ef; color: #b52b27; font-size: 12px; font-weight: 700;
}

.cr-card-tit { font-size: 19px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.cr-card-sum { margin-top: 8px; font-size: 15px; line-height: 1.7; color: #5a626b; word-break: keep-all; }

.cr-card-body {
	margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f3;
	white-space: pre-line; font-size: 15px; line-height: 1.8; color: #3d444b;
	word-break: keep-all;
}

.cr-card-locked {
	margin-top: 14px; padding: 12px 14px; border-radius: 10px;
	background: #f7f8f9; font-size: 14px; color: #5a626b;
}
.cr-card-locked a { color: #1f6feb; font-weight: 700; }

/* ------------------------------------------------------------- 체류자격 경로 */

.cr-notice {
	margin: 0 0 20px; padding: 14px 16px;
	border-left: 3px solid #f0ad4e; border-radius: 0 8px 8px 0;
	background: #fffaf0; font-size: 14px; line-height: 1.75; color: #6b5320;
	word-break: keep-all;
}
.cr-notice a { color: #1f6feb; }

.cr-paths { display: flex; flex-direction: column; gap: 10px; }

.cr-path { border: 1px solid #e3e6ea; border-radius: 12px; background: #fff; overflow: hidden; }
.cr-path > summary {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	padding: 16px 20px; cursor: pointer; list-style: none;
}
.cr-path > summary::-webkit-details-marker { display: none; }
.cr-path > summary::after { content: '▾'; margin-left: auto; color: #98a2ad; font-size: 14px; }
.cr-path[open] > summary::after { content: '▴'; }
.cr-path[open] > summary { border-bottom: 1px solid #eef0f3; }

.cr-code {
	display: inline-block; min-width: 54px; padding: 4px 10px; border-radius: 8px;
	background: #1f6feb; color: #fff; font-size: 14px; font-weight: 700; text-align: center;
}
.cr-nm { font-size: 17px; font-weight: 700; }
.cr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-tag {
	display: inline-block; padding: 3px 9px; border: 1px solid #dfe3e8;
	border-radius: 999px; background: #f7f8f9; font-size: 12px; color: #6b7684;
	white-space: nowrap;
}
.cr-tag.ok { border-color: #169bd5; background: #e7f4fb; color: #12729c; }

.cr-path-body { padding: 20px; }
.cr-block { margin-bottom: 18px; }
.cr-block:last-child { margin-bottom: 0; }
.cr-block h3 {
	margin-bottom: 6px; font-size: 15px; font-weight: 700; color: #1f2933;
}
.cr-text {
	white-space: pre-line; font-size: 15px; line-height: 1.8; color: #3d444b;
	word-break: keep-all;
}
.cr-flow {
	padding: 12px 14px; border-radius: 8px; background: #f4f7fb;
	font-family: inherit; color: #1f4c8f; font-weight: 600;
}
.cr-caution h3 { color: #b52b27; }
.cr-caution .cr-text { color: #6b3330; }

.cr-sub { margin-top: 14px; }
.cr-sub > summary {
	cursor: pointer; font-size: 14px; font-weight: 700; color: #1f6feb; padding: 6px 0;
}
.cr-sub .cr-text {
	margin-top: 8px; padding: 12px 14px; border-radius: 8px;
	background: #f7f8f9; font-size: 14px; color: #5a626b;
}

.cr-src { margin-top: 14px; font-size: 13px; color: #8b949e; }

/* ------------------------------------------------------------------ 특별전형 */

.cr-search {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; background: #f7f8f9;
}
.cr-lb { font-size: 14px; font-weight: 700; color: #3d444b; }
.cr-search input {
	height: 40px; padding: 0 12px; border: 1px solid #d3d9e0; border-radius: 8px;
	font-size: 16px; /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 */
}
.cr-btn {
	display: inline-block; height: 40px; line-height: 38px; padding: 0 18px;
	border: 1px solid #1f6feb; border-radius: 8px; background: #1f6feb;
	color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.cr-btn.ghost { background: #fff; color: #1f6feb; }

.cr-table-wrap { overflow-x: auto; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cr-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cr-table th, .cr-table td {
	padding: 12px 10px; border-bottom: 1px solid #eef0f3;
	text-align: left; vertical-align: top; word-break: keep-all; line-height: 1.6;
}
.cr-table thead th { background: #f5f6f7; font-weight: 700; white-space: nowrap; }
.cr-table td.nw { white-space: nowrap; }

.cr-locked-box {
	padding: 28px; border: 1px solid #e3e6ea; border-radius: 14px;
	background: #f9fafb; text-align: center;
}
.cr-locked-tit { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.cr-locked-box p { font-size: 15px; line-height: 1.75; color: #5a626b; word-break: keep-all; }
.cr-locked-act { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }

.cr-empty {
	padding: 40px 20px; border: 1px dashed #d3d9e0; border-radius: 14px;
	text-align: center; font-size: 15px; line-height: 1.8; color: #6b7684;
}
.cr-empty a { color: #1f6feb; font-weight: 700; }

/* ------------------------------------------------------------------ 도움기관 */

.cr-res {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}
.cr-res-item {
	padding: 20px; border: 1px solid #e3e6ea; border-radius: 12px; background: #fff;
}
.cr-res-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cr-res-nm { font-size: 17px; font-weight: 700; word-break: keep-all; }
.cr-res-nm a { color: #1f2933; }
.cr-res-nm a:hover { color: #1f6feb; text-decoration: underline; }
.cr-res-cn { font-size: 14px; line-height: 1.75; color: #5a626b; word-break: keep-all; }
.cr-res-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #8b949e; }
.cr-res-meta span, .cr-res-meta a {
	padding: 2px 8px; border-radius: 999px; background: #f5f6f7;
}
.cr-res-meta a { color: #1f6feb; font-weight: 700; }

/* -------------------------------------------------------------------- 모바일 */

@media (max-width: 768px) {
	.cr-sec { padding: 32px 0; }
	.cr-sec h2 { font-size: 22px; }
	.cr-cards, .cr-res { grid-template-columns: 1fr; }
	.cr-path > summary { padding: 14px 16px; }
	.cr-nm { font-size: 16px; }
	.cr-search input { flex: 1 1 140px; min-width: 0; }
}