@charset "UTF-8";
/*
 * 채용·모집 소식 (/board/recruitList · /board/recruit/{id}) 전용 스타일
 *
 *   수정일      수정자   수정내용
 *   2026-08-13   moon    최초 생성
 *
 * ★ 이 파일은 두 화면만 읽는다.
 *   kmsia-common.css 는 공개화면 32종이 함께 읽으므로 여기에 넣지 않는다(8.32절 방침).
 *
 * ★ 목록의 .vrow · .vmeta · .cat 은 kmsia-common.css 에 이미 있다.
 *   여기서는 새로 생긴 것(필터 폼·토글·상세)만 정의한다.
 */

/* ------------------------------------------------------------------ 필터 폼 */

.filter-form { margin-bottom: 8px; }

.filter-bar {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
	padding: 16px; border: 1px solid #e3e6ea; border-radius: 12px; background: #fff;
}

.fl { display: flex; flex-direction: column; gap: 6px; }
.fl-lb { font-size: 13px; font-weight: 700; color: #5a626b; }
.fl select, .fl input {
	height: 40px; padding: 0 12px; border: 1px solid #d3d9e0; border-radius: 8px;
	font-size: 16px; /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 */
	background: #fff; color: #1f2933;
}
.fl-wide { flex: 1 1 200px; min-width: 0; }
.fl-wide input { width: 100%; box-sizing: border-box; }

.fl-btn {
	height: 40px; padding: 0 20px; border: 1px solid #1f6feb; border-radius: 8px;
	background: #1f6feb; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.fl-reset {
	height: 40px; line-height: 38px; padding: 0 14px;
	border: 1px solid #d3d9e0; border-radius: 8px; background: #fff;
	font-size: 15px; color: #5a626b;
}

/* ------------------------------------------------------------------- 토글 */

.toggle-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }

/*
 * ★ 토글을 <label> + 실제 체크박스로 만든다.
 *   전에는 <button> 이라 눌러도 서버에 아무것도 전달되지 않았다.
 *   체크박스는 폼과 함께 제출되므로 새로고침해도 상태가 남는다.
 */
.toggle-row .tg {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px; border: 1px solid #d3d9e0; border-radius: 999px;
	background: #fff; font-size: 14px; color: #5a626b; cursor: pointer;
	user-select: none;
}
.toggle-row .tg input { width: 16px; height: 16px; accent-color: #1f6feb; margin: 0; }
.toggle-row .tg.on { border-color: #1f6feb; background: #eef4fb; color: #1f4c8f; font-weight: 700; }

/* ------------------------------------------------------------------- 목록 */

.list-count { margin: 6px 0 14px; font-size: 15px; color: #5a626b; }
.list-count b { color: #1f2933; }

/* 마감된 건은 흐리게 — 목록에서 빼지 않고 상태를 드러낸다 */
.vrow.rc-closed { opacity: .62; }
.rc-end {
	display: inline-block; padding: 2px 9px; border-radius: 999px;
	background: #f0f1f3; color: #6b7684; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.rc-tag {
	display: inline-block; padding: 2px 9px; border-radius: 999px;
	background: #e7f4fb; color: #12729c; font-size: 12px; white-space: nowrap;
}

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

.more-btn p { text-align: center; font-size: 14px; color: #8b949e; padding: 18px 0; }

/* ------------------------------------------------------------------- 상세 */

.rc-view { max-width: 860px; }

.rc-head { padding-bottom: 20px; border-bottom: 2px solid #1f2933; }
.rc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rc-tit { font-size: 27px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.rc-comp { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 16px; color: #5a626b; }
.rc-logo {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px;
	background: #eef4fb; color: #1f4c8f; font-size: 15px; font-weight: 700;
}

.rc-facts { margin: 24px 0; border-top: 1px solid #eef0f3; }
.rc-facts > div {
	display: flex; gap: 16px; padding: 14px 4px; border-bottom: 1px solid #eef0f3;
}
.rc-facts dt { flex: 0 0 132px; font-weight: 700; color: #3d444b; font-size: 15px; }
.rc-facts dd { flex: 1 1 auto; min-width: 0; color: #1f2933; font-size: 15px; word-break: keep-all; }

.rc-body {
	margin: 28px 0; white-space: pre-line;
	font-size: 16px; line-height: 1.85; color: #3d444b; word-break: keep-all;
}

.rc-notice {
	margin: 28px 0; padding: 16px 18px;
	border-left: 3px solid #f0ad4e; border-radius: 0 8px 8px 0;
	background: #fffaf0; font-size: 15px; line-height: 1.8; color: #6b5320; word-break: keep-all;
}
.rc-notice a { color: #1f6feb; font-weight: 700; }

.rc-btns { margin-top: 32px; text-align: center; }
.rc-btn {
	display: inline-block; height: 46px; line-height: 44px; padding: 0 32px;
	border: 1px solid #d3d9e0; border-radius: 8px; background: #fff;
	font-size: 16px; font-weight: 700; color: #3d444b;
}

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

@media (max-width: 768px) {
	.filter-bar { padding: 14px; gap: 8px; }
	.fl { flex: 1 1 132px; min-width: 0; }
	.fl select { width: 100%; }
	.fl-btn, .fl-reset { flex: 1 1 auto; }
	.rc-tit { font-size: 22px; }
	.rc-facts > div { flex-direction: column; gap: 4px; }
	.rc-facts dt { flex: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   한국어강사 모집정보 (2026-09-24, 90-콘텐츠 §8.195)
   ★ /board/korTchrList 가 쓴다. 이 화면은 kmsia-recruit.css 를 읽는다.
   ★★ 아래 @media 는 «반응형» 이다. @media print 규칙을 이 아래에 덧붙이지 말 것 —
      블록 밖으로 새면 화면이 통째로 무너진다(80-설문 §8.96).
   ═══════════════════════════════════════════════════════════════════ */
.kt-lead { margin: -4px 0 18px; color: #4b5563; font-size: 15px; line-height: 1.6; }
.kt-foot { margin: 22px 0 0; padding: 12px 14px; background: #f7f9fc; border: 1px solid #e5eaf0;
           border-radius: 6px; color: #4b5563; font-size: 13px; line-height: 1.6; }

.kt-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #1f2a44; }
.kt-item { display: flex; gap: 16px; align-items: flex-start;
           padding: 16px 6px; border-bottom: 1px solid #e5e8ee; }
.kt-item.is-closed { opacity: .62; }

.kt-badge { flex: 0 0 92px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.kt-st { display: inline-block; padding: 3px 9px; border-radius: 999px;
         font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.kt-open    { background: #e8f3ff; color: #1a4d8f; border: 1px solid #c3ddf7; }
.kt-before  { background: #fff5e5; color: #99610a; border: 1px solid #ffe0b2; }
.kt-closed  { background: #f2f4f6; color: #6b7684; border: 1px solid #e0e4e8; }
.kt-unknown { background: #f5f0ff; color: #5b3fa8; border: 1px solid #ddd0f5; }
.kt-dd { font-size: 12px; font-weight: 700; color: #6b7280; }
.kt-dd.kt-soon  { color: #c2410c; }
.kt-dd.kt-today { color: #b91c1c; font-weight: 800; }

.kt-body { flex: 1 1 auto; min-width: 0; }
.kt-tit { margin: 0 0 6px; font-size: 17px; line-height: 1.45; font-weight: 700; }
.kt-tit a { color: #1a1a1a; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; }
.kt-tit a:hover, .kt-tit a:focus { color: #1f4e8c; text-decoration: underline; }

.kt-meta { font-size: 13.5px; color: #4b5563; line-height: 1.7; }
.kt-meta b { color: #1f4e8c; }
.kt-meta .dot, .kt-when .dot { margin: 0 6px; color: #c7ccd4; }

.kt-when { margin-top: 5px; font-size: 13px; color: #6b7280; line-height: 1.7; }
.kt-pd { font-weight: 600; color: #374151; }
.kt-pd.kt-nopd { font-weight: 400; color: #8b5cf6; }
.kt-go { margin-left: 10px; color: #1f4e8c; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kt-go:hover, .kt-go:focus { text-decoration: underline; }

.kt-paging { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.kt-pg { display: inline-block; min-width: 34px; padding: 6px 10px; text-align: center;
         border: 1px solid #dbe0e6; border-radius: 4px; background: #fff;
         color: #4b5563; font-size: 14px; text-decoration: none; }
.kt-pg:hover, .kt-pg:focus { border-color: #1f4e8c; color: #1f4e8c; }
.kt-pg.on { background: #1f4e8c; border-color: #1f4e8c; color: #fff; font-weight: 700; }

@media (max-width: 640px) {
	.kt-item { flex-direction: column; gap: 8px; padding: 14px 4px; }
	.kt-badge { flex: none; flex-direction: row; align-items: center; gap: 8px; }
	.kt-tit { font-size: 16px; }
	.kt-go { display: block; margin: 6px 0 0; }
}
.kt-post { color: #9aa3ae; }

/* ═══════════════════════════════════════════════════════════════════
   유학생 대학 정보 (2026-09-24, 90-콘텐츠 §8.196)
   ★ /edu/univInfo 가 쓴다. 쪽 넘기기는 .kt-paging/.kt-pg 를 함께 쓴다.
   ★★ 아래 @media 는 «반응형» 이다. @media print 규칙을 이 아래에 덧붙이지 말 것(80-설문 §8.96).
   ═══════════════════════════════════════════════════════════════════ */
.uv-sum { margin: -4px 0 16px; padding: 12px 14px; background: #f0f5fb; border: 1px solid #d7e3f2;
          border-radius: 6px; font-size: 14.5px; color: #1f2a44; line-height: 1.7; }
.uv-sum b { color: #1f4e8c; font-size: 16px; }
.uv-sum .dot { margin: 0 8px; color: #b7c3d4; }
.uv-sum .uv-yr { margin-left: 10px; padding: 2px 8px; border-radius: 999px;
                 background: #fff; border: 1px solid #d7e3f2; font-size: 12px; color: #5b6b85; }

.uv-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #1f2a44; }
.uv-item { padding: 16px 6px; border-bottom: 1px solid #e5e8ee; }

.uv-head { margin-bottom: 8px; }
.uv-nm { margin: 0; font-size: 17.5px; font-weight: 700; color: #1a1a1a; line-height: 1.4;
         word-break: keep-all; overflow-wrap: anywhere; }
.uv-cam { margin-left: 6px; padding: 2px 7px; border-radius: 4px; background: #eef1f5;
          border: 1px solid #dde2e9; font-size: 12px; font-weight: 600; color: #5b6b85; }
.uv-en { margin-top: 2px; font-size: 12.5px; color: #98a2b3; }
.uv-meta { margin-top: 5px; font-size: 13.5px; color: #4b5563; }
.uv-meta .dot { margin: 0 6px; color: #c7ccd4; }

.uv-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.uv-n { display: inline-block; padding: 4px 10px; border-radius: 999px;
        background: #f7f9fc; border: 1px solid #e5eaf0; font-size: 13px; color: #43506a; }
.uv-n b { color: #1f2a44; font-weight: 700; }
.uv-n.uv-frnr { background: #e8f3ff; border-color: #c3ddf7; color: #1a4d8f; }
.uv-n.uv-frnr b { color: #1a4d8f; }
.uv-n.uv-drop { background: #fff5f5; border-color: #f7d4d4; color: #9b2c2c; }
.uv-n.uv-drop b { color: #9b2c2c; }
.uv-n.uv-none { color: #98a2b3; }

/* ── 대학 카드 : 누를 곳을 «이름 줄» 로 모았다 (2026-09-26 · 90-콘텐츠 §8.212) ──
   ★ 전에는 카드마다 「학교 누리집 →」이 되풀이되고 모집은 아래 줄에 있었다.
   ★★ 한 줄에 링크가 «둘» 이라 생김새를 달리한다 — 이름은 남색 글자, 모집은 주황 배지. */

/* 학교명 자체가 누리집 링크 */
.uv-nm-lnk { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #c3cdda; }
.uv-nm-lnk:hover, .uv-nm-lnk:focus { color: #1f4e8c; border-bottom-color: #1f4e8c; }
.uv-ext { margin-left: 3px; font-size: 12px; color: #8a94a3; font-weight: 400; }
.uv-nm-lnk:hover .uv-ext, .uv-nm-lnk:focus .uv-ext { color: #1f4e8c; }

/* 한국어강사 모집 — 배지 */
.uv-rcrit { display: inline-block; padding: 2px 9px; border-radius: 999px;
	background: #fff4e5; color: #b45309; border: 1px solid #f0d3a8;
	font-size: 12.5px; font-weight: 700; text-decoration: none; vertical-align: middle; }
.uv-rcrit:hover, .uv-rcrit:focus { background: #ffe9cc; border-color: #d9a86a; }
.uv-rcrit b { font-weight: 800; }

/* 지역·종류 줄이 «지도로 가는 단추» 가 된다.
   ★ button 기본 모양을 지운다 — 안 지우면 회색 네모가 생겨 카드가 무너진다. */
.uv-meta.uv-geo { appearance: none; -webkit-appearance: none; border: 0; background: none;
	padding: 0; margin-top: 5px; font: inherit; font-size: 13.5px; color: #4b5563;
	text-align: left; cursor: pointer; }
.uv-meta.uv-geo:hover, .uv-meta.uv-geo:focus { color: #1f4e8c; }
.uv-meta.uv-geo:hover .uv-pin, .uv-meta.uv-geo:focus .uv-pin { background: #dbe8fb; }
/* 「지도에서 보기」 — 지도가 준비되면 스크립트가 보이게 한다 */
.uv-pin { margin-left: 8px; padding: 1px 8px; border-radius: 999px;
	background: #eef2f8; color: #1f4e8c; font-size: 11.5px; font-weight: 600; }
/* ★ 지도에서 찾아 온 카드를 잠깐 밝힌다 — 어느 줄을 눌렀는지 잃지 않게 */
.uv-item.uv-hit { background: #f4f8ff; }

@media (max-width: 640px) {
	.uv-item { padding: 14px 4px; }
	.uv-nm { font-size: 16px; }
	.uv-sum { font-size: 13.5px; }
	.uv-sum .dot { margin: 0 5px; }
}

/* ── 유학생 대학 정보 — 지도 (2026-09-24, 90-콘텐츠 §8.196) ─────────────
   ★★ 가족센터 지도(.fc-mapbox)와 «같은 뼈대» 다. 그쪽은 화면 안 <style> 에 있어
      여기서 쓸 수 없으므로 이름만 uvmap- 로 바꿔 옮겨 적었다.
   ★  z-index 를 Leaflet 안쪽까지 건드리지 않는다 — 건드리면 지도 내부 층이 뒤엉킨다. */
.uvmap-box{margin:18px 0 22px;border:1px solid #dbe7f0;border-radius:12px;overflow:hidden;
  background:#eef3f7;position:relative;z-index:0;isolation:isolate}
.uvmap-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  padding:12px 14px;background:#f7fafc;border-bottom:1px solid #e3ecf3}
.uvmap-head .t{font-size:15px;font-weight:700;color:#1f3a52}
.uvmap-head .d{font-size:13px;color:#6b7a8d;word-break:keep-all}
.uvmap-head .sp{margin-left:auto}
.uvmap-tgl{height:34px;padding:0 12px;border:1px solid #c9d3de;background:#fff;
  border-radius:8px;font-size:13px;color:#1f3a52;cursor:pointer}
.uvmap-tgl:hover{background:#f0f5f9}
#uvMap{height:460px}
.uvmap-box.off #uvMap{display:none}
.uvmap-fail{margin:0;padding:16px 14px;font-size:14px;color:#8a5a00;background:#fff8e6}
.uvmap-pts{display:none}

/* 마커 — 유학생이 많을수록 진하게 */
.uv-mk{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:#2f6fa8;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.uv-mk.big{background:#c2410c}
.uv-mk i{display:block;width:8px;height:8px;margin:7px auto;border-radius:50%;background:#fff}

/* 풍선 */
.uv-pop{min-width:180px;max-width:250px}
.uv-pop .nm{margin:0 0 6px;font-size:14px;font-weight:700;color:#1f3a52;word-break:keep-all}
.uv-pop .n{display:block;font-size:13px;color:#42586d;margin:2px 0}
.uv-pop .n b{color:#1f3a52}

@media (max-width:760px){
  #uvMap{height:340px}
}