@charset "utf-8";
/* 학습자료 게시판 스킨 (theme/sample38/skin/board/data) */

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

/* 버튼 */
.dt_btns {display:flex; justify-content:flex-end; gap:6px; margin-top:20px}
.dt_btns_c {justify-content:center; margin-top:30px}
.dt_btns_top {margin:0 0 12px} /* 목록 표 위 */
.dt_btn {display:inline-block; padding:10px 18px; border:1px solid #ddd; border-radius:4px; background-color:#fff; font-family:inherit; font-size:14px; line-height:1.4; color:#333; text-align:center; vertical-align:middle; box-sizing:border-box; cursor:pointer} /* line-height 직접 : a(목록)는 바깥 틀 1.75 를 물려받고 button(저장)은 기본값이라 크기가 달라지던 것 맞춤 */
.dt_btn:hover {background-color:#f5f5f5}
.dt_btn_dark {border-color:#222; background-color:#222; color:#fff}
.dt_btn_dark:hover {background-color:#000}

/* 점 3개 버튼 (선택복사 / 선택이동 / 선택삭제) */
.dt_more {position:relative}
.dt_more_btn {height:100%; padding:0 14px}
.dt_more_list {display:none; position:absolute; top:100%; right:0; z-index:10; min-width:110px; margin:4px 0 0; padding:4px 0; border:1px solid #ddd; border-radius:4px; background-color:#fff; list-style:none; box-shadow:0 4px 12px rgba(0,0,0,.08)}
.dt_more_list button {display:block; width:100%; padding:9px 14px; border:0; background:none; font-size:14px; color:#333; text-align:left; white-space:nowrap; cursor:pointer}
.dt_more_list button:hover {background-color:#f5f5f5}

/* 분류 */
/* 분류 : 위 서브 메뉴 탭(남색 네모)과 겹치지 않게 둥근 알약 모양 + 선택은 주황 (메인 "메가스터디 소식" 탭과 같은 색) */
.dt_cate ul {display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:0; list-style:none}
.dt_cate a {display:block; padding:7px 16px; border:1px solid #ddd; border-radius:50px; background-color:#fff; font-size:14px; color:#555; white-space:nowrap; transition:border-color .2s, color .2s}
.dt_cate a:hover {border-color:#f26a2e; color:#f26a2e}
.dt_cate a#bo_cate_on {border-color:#f26a2e; background-color:#f26a2e; font-weight:600; color:#fff}

/* 검색 : 둥근 입력창 + 오른쪽 검정 원 돋보기 (제목+내용) */
.dt_top {display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px}
.dt_sch {display:flex; align-items:center; width:480px; height:52px; margin-left:auto; padding:0 6px 0 24px; border:1px solid #ddd; border-radius:26px; background-color:#fff; box-sizing:border-box; transition:border-color .2s}
.dt_sch input[type=text] {flex:1; min-width:0; height:100%; padding:0; border:0; background:none; font-size:15px; color:#111}
.dt_sch input[type=text]::placeholder {color:#999}
.dt_sch:focus-within {border-color:#111} /* 입력 중 : 상자 테두리만 진하게 */
.dt_sch button {flex-shrink:0; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background-color:#111; font-size:16px; color:#fff; cursor:pointer}
.dt_sch button:hover {background-color:#333}
.dt_sch button:focus {outline:0}
.dt_sch button:focus-visible {outline:2px solid #111; outline-offset:2px} /* 키보드 이동시에만 표시 */
.dt_sch_now {margin:0; font-size:18px; color:#111}
.dt_sch_now b {font-weight:700; color:#173f8a}
.dt_sch_now a {margin-left:10px; font-size:13px; color:#888; text-decoration:underline; text-underline-offset:.2em}

/* 목록 */
.dt_tbl {width:100%; border-collapse:collapse; border-top:2px solid #222; font-size:15px}
.dt_tbl th {padding:14px 10px; border-bottom:1px solid #ddd; font-weight:600; color:#111}
.dt_tbl td {padding:20px 10px; border-bottom:1px solid #eee; color:#666; text-align:center}
.dt_tbl .dt_tit {text-align:left}
.dt_tbl .dt_tit a {color:#111}
.dt_tbl .dt_tit a:hover {text-decoration:underline; text-underline-offset:.2em}
.dt_tbl .sch_word {margin:0; padding:0 2px; background-color:#ffe36e; font-weight:700; color:#111; line-height:inherit} /* 검색어 강조 : 형광펜 (default.css 분홍 배지 덮어씀) */
.dt_tbl .dt_chk {width:40px}
.dt_tbl .dt_name {width:120px}
.dt_tbl .dt_hit {width:80px}
.dt_tbl .dt_date {width:110px}
.dt_tbl .dt_m {display:none}
.dt_notice td {background-color:#fafbfc}
.dt_badge {display:inline-block; margin-right:6px; padding:2px 8px; border-radius:3px; background-color:#173f8a; font-size:12px; color:#fff; vertical-align:1px}
.dt_ca {display:inline-block; margin-right:6px; padding:1px 7px; border:1px solid #f26a2e; border-radius:3px; font-size:12px; font-weight:600; color:#f26a2e; vertical-align:1px} /* 분류 : 주황 테두리 꼬리표 (위 분류 버튼과 같은 모양, 공지 = 남색 채운 꼬리표) / 목록·보기 같은 모양 */
.dt_file {margin-left:6px; color:#999}
.dt_cmt {margin-left:4px; font-size:13px; color:#173f8a}
.dt_tbl .dt_empty {padding:80px 0; color:#999}

/* 보기 */
#dt_view .dt_head {padding:24px 0; border-top:2px solid #222; border-bottom:1px solid #ddd}
#dt_view .dt_head h2 {margin:0; font-size:24px; font-weight:700; color:#111}
#dt_view .dt_head .dt_ca {margin-right:10px; padding:3px 9px; font-size:14px; vertical-align:4px} /* 큰 제목 옆이라 조금 크게 */
#dt_view .dt_info {display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 0; font-size:14px; color:#888}
#dt_view .dt_down {margin-top:24px; padding:18px 20px; border:1px solid #e3e7ec; border-radius:4px; background-color:#f5f7fa}
#dt_view .dt_down h3 {margin:0 0 10px; font-size:14px; font-weight:600; color:#111}
#dt_view .dt_down h3 b {color:#173f8a}
#dt_view .dt_down ul {margin:0; padding:0; list-style:none}
#dt_view .dt_down li + li {margin-top:6px}
#dt_view .dt_down a {display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#333}
#dt_view .dt_down a:hover strong {text-decoration:underline; text-underline-offset:.2em}
#dt_view .dt_down a i {color:#173f8a}
#dt_view .dt_down strong {font-weight:500; word-break:break-all}
#dt_view .dt_down span {font-size:13px; color:#999}
#dt_view .dt_down p {margin:2px 0 0 24px; font-size:13px; color:#777}
#dt_view .dt_con {min-height:200px; padding:40px 0; border-bottom:1px solid #ddd; font-size:16px; color:#333; word-break:break-all}
#dt_view .dt_con img {max-width:100%; height:auto}
#dt_view .dt_imgs {margin-bottom:30px; text-align:center} /* 첨부 이미지 : 본문 글 위, 가운데 */
#dt_view .dt_imgs a {display:block}
#dt_view .dt_imgs a + a, #dt_view .dt_imgs img + img {margin-top:20px}
#dt_view .dt_imgs img {display:block; max-width:min(100%, 730px); margin:0 auto} /* 첨부 이미지 최대 가로 730px (작은 이미지는 원래 크기) */
#dt_view .dt_nb {margin:40px 0 0; padding:0; border-top:1px solid #222; list-style:none}
#dt_view .dt_nb li {display:flex; gap:20px; padding:14px 10px; border-bottom:1px solid #eee; font-size:15px}
#dt_view .dt_nb span {flex-shrink:0; width:60px; color:#888}
#dt_view .dt_nb a {overflow:hidden; color:#333; text-overflow:ellipsis; white-space:nowrap}

/* 등록 / 수정 */
#dt_write .dt_row {display:flex; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid #eee}
#dt_write .dt_row > label, #dt_write .dt_label {flex-shrink:0; width:90px; padding-top:10px; font-size:14px; font-weight:600; color:#111}
#dt_write .dt_row .frm_input, #dt_write .dt_row select {flex:1; width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; box-sizing:border-box}
#dt_write .dt_row select {flex:none; width:auto}
#dt_write .dt_check {flex:1; padding-top:10px; font-size:14px} /* 체크박스 label 은 div 로 감싸야 .dt_row > label 의 width:90px 를 안 받음 */
#dt_write .dt_check label {display:inline-flex; align-items:center; gap:6px; cursor:pointer}
#dt_write .dt_content {flex:1; min-width:0}
#dt_write .dt_content textarea {width:100%; min-height:300px; padding:12px; border:1px solid #ddd; border-radius:4px; box-sizing:border-box}
#dt_write .dt_files {flex:1; padding-top:6px}
#dt_write .dt_file_item {display:flex; flex-direction:column; gap:6px}
#dt_write .dt_file_item + .dt_file_item {margin-top:12px}
#dt_write .dt_file_del {font-size:13px; color:#777}
#dt_write .dt_help {margin:10px 0 0; font-size:12px; color:#888}

@media screen and (max-width:768px) {
	#dt_list, #dt_view, #dt_write {padding:24px 0 50px} /* 모바일 좌우 여백은 부모 요소에 있음 */
	.dt_btn {padding:9px 14px; font-size:13px}

	/* 분류 : 작게, 넘치면 다음 줄로 (옆으로 숨지 않고 전부 보임) */
	.dt_cate ul {gap:5px; margin-bottom:14px}
	.dt_cate a {padding:5px 12px; font-size:13px}

	/* 제목 옆 공지·분류 꼬리표 : 작게 */
	.dt_badge, .dt_ca {margin-right:4px; padding:2px 6px; font-size:11px; vertical-align:1px}
	.dt_ca {padding:1px 5px} /* 테두리 1px 만큼 줄여서 공지 꼬리표와 높이 같게 */

	.dt_top {flex-direction:column-reverse; align-items:stretch; gap:12px; margin-bottom:12px}
	.dt_sch {width:auto; height:48px; margin-left:0; padding-left:20px}
	.dt_sch input[type=text] {font-size:14px}
	.dt_sch button {width:36px; height:36px; font-size:14px}
	.dt_sch_now {font-size:16px}

	/* 목록 : 표 대신 한 줄 제목 + 아래 작성자·조회·날짜 */
	.dt_tbl thead {display:none}
	.dt_tbl thead:has(.dt_chk) {display:block} /* 관리자(체크칸 있을 때) : 전체선택 줄만 남김 */
	.dt_tbl thead:has(.dt_chk) tr {display:flex; padding:10px 4px; border-bottom:1px solid #eee}
	.dt_tbl thead th {display:none}
	.dt_tbl thead th.dt_chk {display:flex; align-items:center; gap:6px; width:auto; padding:0; border:0; font-size:13px; font-weight:500; color:#555}
	.dt_tbl thead th.dt_chk:after {content:"전체선택"}
	.dt_tbl tr {display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:14px 4px; border-bottom:1px solid #eee}
	.dt_tbl td {width:auto !important; padding:0; border:0; font-size:13px; color:#999}
	.dt_tbl tr.dt_notice {background-color:#fafbfc} /* 공지 : 칸(td)마다가 아니라 줄 전체에 배경 */
	.dt_notice td {background-color:transparent}
	.dt_tbl .dt_tit {flex:0 0 100%; font-size:15px}
	.dt_tbl .dt_chk {flex:0 0 100%; text-align:left}
	.dt_tbl .dt_m {display:inline}
	.dt_tbl .dt_empty {flex:1; padding:60px 0}

	#dt_view .dt_head {padding:18px 0}
	#dt_view .dt_head h2 {font-size:19px}
	#dt_view .dt_head .dt_ca {margin-right:6px; padding:1px 7px; font-size:12px; vertical-align:2px}
	#dt_view .dt_info {gap:10px; font-size:13px}
	#dt_view .dt_down {padding:14px}
	#dt_view .dt_down a {font-size:14px}
	#dt_view .dt_con {padding:24px 0; font-size:15px}
	#dt_view .dt_imgs {margin-bottom:20px}
	#dt_view .dt_imgs a + a, #dt_view .dt_imgs img + img {margin-top:12px}
	#dt_view .dt_nb li {gap:12px; padding:12px 4px; font-size:14px}
	#dt_view .dt_nb span {width:48px}

	#dt_write .dt_row {flex-direction:column; gap:6px}
	#dt_write .dt_row > label, #dt_write .dt_label {width:auto; padding-top:0}
}