@charset "utf-8";
/* 강사진 게시판 스킨 (theme/sample38/skin/board/teacher) */

#teacher {max-width:1200px; margin:0 auto; padding:60px 0 120px} /* 좌우 여백은 부모 요소에 있음 */

/* 버튼 */
.tc_btn {display:inline-block; padding:9px 16px; border:1px solid #ddd; border-radius:4px; background-color:#fff; font-family:inherit; font-size:13px; line-height:1.4; color:#333; text-align:center; vertical-align:middle; box-sizing:border-box; cursor:pointer} /* line-height 직접 : a 와 button 크기 같게 */
.tc_btn:hover {background-color:#f5f5f5}
.tc_btn_dark {border-color:#222; background-color:#222; color:#fff}
.tc_btn_dark:hover {background-color:#000}

/* 담당과목별 묶음 : 큰 과목명 + 인원 / 아래 굵은 검정 선 / 강사 카드 (한 줄 2명) */
#teacher .tc_groups {display:flex; flex-direction:column; gap:100px}
#teacher .tc_group_tit {display:flex; align-items:baseline; gap:10px; margin:0 0 32px; padding-bottom:18px; border-bottom:1px solid #dcdfe4; font-size:34px; font-weight:800; line-height:1.2; color:#1a1a1a; letter-spacing:-.03em}
#teacher .tc_group_tit span {font-size:17px; font-weight:500; color:#888; letter-spacing:0}
#teacher .tc_list {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin:0; padding:0; list-style:none}

/* 강사 카드 : 연한 회색 바탕 (테두리 · 그림자 없음) / 왼쪽 사진 / 오른쪽 이름 · 경력 · 시범강의 */
#teacher .tc_list > li {position:relative; display:flex; align-items:stretch; gap:32px; padding:32px; border-radius:8px; background:#f8f9fb url(img/logo_mark.png) right -40px bottom -50px / 240px auto no-repeat} /* 오른쪽 아래 로고마크 (푸터 로고와 같은 그림) */
#teacher .tc_photo {display:block; width:180px; flex-shrink:0; align-self:flex-start; aspect-ratio:3/4; border-radius:4px; overflow:hidden; background-color:#eceef2}
#teacher .tc_photo img {display:block; width:100%; height:100%; object-fit:cover}
#teacher .tc_info {display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; padding-top:4px; word-break:keep-all; overflow-wrap:break-word} /* 버튼을 맨 아래로 (사진 아래 끝과 맞춤) */
#teacher .tc_pos {display:block; font-size:15px; color:#888} /* 보기 화면 */
#teacher .tc_name {display:block; font-size:26px; font-weight:700; line-height:1.3; color:#111; letter-spacing:-.02em}
#teacher .tc_career {margin:20px 0 24px; padding:0; list-style:none} /* 아래 24px = 시범강의 버튼과 최소 간격 */
#teacher .tc_career li {position:relative; padding-left:12px; font-size:16px; line-height:1.6; color:#333}
#teacher .tc_career li + li {margin-top:4px}
#teacher .tc_career li:before {content:""; position:absolute; top:.75em; left:0; width:4px; height:4px; border-radius:50%; background-color:#666}
/* 시범강의 : 경력 아래 맨 끝 (사진 아래 끝과 높이 맞춤) / 흰 알약 모양 버튼 안에 빨간 동그라미 재생 아이콘 + 두 줄 글씨 (시범강의 / 유튜브영상보기 >)
   마우스 올리면 테두리 · 동그라미 색만 살짝 진하게 (크기 · 위치 변화 없음) */
#teacher .tc_demo {display:inline-flex; align-items:center; gap:14px; margin-top:auto; padding:6px 26px 6px 6px; border:1px solid #e3e6ea; border-radius:999px; background-color:#fff; font-family:inherit; text-align:left; cursor:pointer; transition:border-color .2s}
#teacher .tc_demo:hover {border-color:#b9bec6}
#teacher .tc_demo_ico {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; background-color:#f00; color:#fff; font-size:16px; transition:background-color .2s}
#teacher .tc_demo_ico i {margin-left:2px} /* 재생 삼각형 가운데로 보이게 */
#teacher .tc_demo:hover .tc_demo_ico {background-color:#d40000}
#teacher .tc_demo_txt {display:flex; flex-direction:column; gap:2px}
#teacher .tc_demo_txt small {font-size:12px; font-weight:500; line-height:1.2; color:#999; letter-spacing:.04em}
#teacher .tc_demo_txt b {display:flex; align-items:center; gap:4px; font-size:16px; font-weight:700; line-height:1.25; color:#111; letter-spacing:-.01em}
#teacher .tc_demo_txt b i {font-size:16px; color:#999}

/* 카드 오른쪽 위 수정 링크 (관리자만) */
#teacher .tc_edit {position:absolute; top:14px; right:16px; display:inline-flex; align-items:center; gap:3px; padding:4px 6px; font-size:13px; color:#888; text-decoration:none}
#teacher .tc_edit:hover {color:#111; text-decoration:underline; text-underline-offset:.25em}

/* 시범강의 영상 팝업 */
.tc_pop {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000; align-items:center; justify-content:center; padding:20px; background-color:rgba(0,0,0,.75)}
.tc_pop.on {display:flex}
.tc_pop_box {position:relative; width:100%; max-width:960px}
.tc_pop_tit {margin:0 44px 12px 0; font-size:16px; font-weight:600; color:#fff}
.tc_pop_close {position:absolute; top:-8px; right:-4px; width:36px; height:36px; padding:0; border:0; background:none; cursor:pointer}
.tc_pop_close span {position:absolute; top:50%; left:50%; width:22px; height:2px; margin:-1px 0 0 -11px; background-color:#fff; transform:rotate(45deg)}
.tc_pop_close span + span {transform:rotate(-45deg)}
.tc_pop_video {aspect-ratio:16/9; background-color:#000}
.tc_pop_video iframe {display:block; width:100%; height:100%; border:0}

#teacher .tc_empty {padding:80px 0; font-size:15px; color:#999; text-align:center}

/* 관리 (관리자만) */
#teacher .tc_admin {margin-bottom:30px; padding:16px 20px; border:1px dashed #ccc; border-radius:6px; background-color:#fafafa}
#teacher .tc_admin_btn {display:flex; flex-wrap:wrap; gap:6px}
#teacher .tc_manage {display:none; margin-top:16px}
#teacher .tc_manage table {width:100%; border-collapse:collapse; border-top:2px solid #222; background-color:#fff; font-size:13px; text-align:center}
#teacher .tc_manage th {padding:10px 6px; border-bottom:1px solid #ddd; font-weight:600}
#teacher .tc_manage td {padding:8px 6px; border-bottom:1px solid #eee; color:#555}
#teacher .tc_manage td img {display:block; width:40px; height:53px; margin:0 auto; border-radius:3px; object-fit:cover}
#teacher .tc_manage .tc_no {color:#999}
#teacher .tc_manage td button {padding:4px 8px; border:1px solid #ddd; border-radius:3px; background:#fff; font-size:11px; cursor:pointer}
#teacher .tc_manage td a {margin:0 3px; color:#333; text-decoration:underline; text-underline-offset:.2em}
#teacher .tc_save {display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px}
#teacher .tc_sel {display:flex; gap:6px; margin-right:auto} /* 선택복사·이동·삭제 : 왼쪽 / 순서 저장 : 오른쪽 */
#teacher .tc_manage input[type=checkbox] {width:15px; height:15px; margin:0; vertical-align:middle}
#teacher .tc_changed {display:none; font-size:13px; color:#d33}

/* 보기 (주소로 직접 들어온 경우) */
#teacher .tc_view_head {display:flex; align-items:flex-start; gap:24px}
#teacher .tc_view_head .tc_photo {width:160px}
#teacher .tc_view_head .tc_name {margin-top:6px}
#teacher .tc_write_btn {display:flex; justify-content:center; gap:8px; margin-top:40px}

/* 등록 / 수정 */
#teacher_write {max-width:800px; margin:0 auto; padding:60px 0 120px} /* 좌우 여백은 부모 요소에 있음 */
#teacher_write .tc_row {display:flex; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid #eee}
#teacher_write .tc_row > label {flex-shrink:0; width:90px; padding-top:10px; font-size:14px; font-weight:600; color:#111}
#teacher_write .tc_row .frm_input {flex:1; width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; box-sizing:border-box}
#teacher_write .tc_file_box {flex:1; padding-top:6px}
#teacher_write textarea.frm_input {height:auto; line-height:1.6; resize:vertical}
#teacher_write .tc_help {margin:6px 0 0; font-size:12px; color:#888}
#teacher_write .tc_file_now {margin:6px 0 0; font-size:12px; color:#777}
#teacher_write .tc_file_now span {display:block; margin-top:2px; color:#999}
#teacher_write .tc_guide {margin:0 0 12px; padding:14px 18px; border-radius:6px; background-color:#f5f7fa; font-size:13px; color:#555}
#teacher_write .tc_warn {margin:12px 0 0; padding:12px 16px; border-radius:4px; background-color:#fff4f4; font-size:13px; color:#c33}
#teacher_write .tc_write_btn {display:flex; justify-content:center; gap:8px; margin-top:30px}

@media screen and (max-width:1100px) {
	#teacher .tc_list > li {gap:24px; padding:24px}
	#teacher .tc_photo {width:140px}
	#teacher .tc_name {font-size:22px}
	#teacher .tc_career li {font-size:15px}
	#teacher .tc_demo_ico {width:40px; height:40px; font-size:15px}
	#teacher .tc_demo_txt b {font-size:15px}
}

@media screen and (max-width:900px) {
	#teacher .tc_list {grid-template-columns:1fr} /* 2명이면 오른쪽 칸이 좁아 버튼 글씨가 넘침 */
}

@media screen and (max-width:768px) {
	#teacher {padding:24px 0 50px} /* 모바일 좌우 여백은 부모 요소에 있음 */
	#teacher .tc_groups {gap:56px}
	#teacher .tc_group_tit {gap:8px; margin-bottom:18px; padding-bottom:12px; font-size:24px}
	#teacher .tc_group_tit span {font-size:14px}
	#teacher .tc_list {grid-template-columns:1fr; gap:12px}
	#teacher .tc_list > li {gap:16px; padding:18px 16px; background-size:160px auto; background-position:right -30px bottom -36px}
	#teacher .tc_photo {width:100px}
	#teacher .tc_info {padding-top:0}
	#teacher .tc_pos {font-size:13px}
	#teacher .tc_name {font-size:19px}
	#teacher .tc_career {margin:12px 0 16px}
	#teacher .tc_career li {padding-left:10px; font-size:14px; line-height:1.55}
	#teacher .tc_career li + li {margin-top:2px}
	#teacher .tc_edit {top:8px; right:8px; font-size:12px}
	#teacher .tc_demo {gap:10px; padding:5px 18px 5px 5px}
	#teacher .tc_demo_ico {width:34px; height:34px; font-size:13px}
	#teacher .tc_demo_txt small {font-size:11px}
	#teacher .tc_demo_txt b {font-size:14px}
	#teacher .tc_demo_txt b i {font-size:14px}
	.tc_pop {padding:12px}
	.tc_pop_tit {font-size:14px}
	#teacher .tc_manage {overflow-x:auto}
	#teacher .tc_manage table {min-width:600px}
	#teacher .tc_save {flex-wrap:wrap}
	#teacher .tc_view_head .tc_photo {width:110px}
	#teacher_write {padding:24px 0 50px}
	#teacher_write .tc_row {flex-direction:column; gap:6px}
	#teacher_write .tc_row > label {width:auto; padding-top:0}
}