/*
Theme Name: BEST Lab
Description: 성균관대 BEST Lab 홈페이지 테마. 기존 디자인을 그대로 복제했습니다.
Version: 1.0.0
Text Domain: bestlab
*/

/* 실제 디자인은 assets/css/ 의 원본 CSS를 그대로 사용합니다.
   아래는 기존 빌더 마크업에서 인라인으로 있던 것들을 옮긴 최소 보정입니다. */

:root {
	--bestlab-navy: #39508d;
	--bestlab-blue: #1b5ca6;
	--bestlab-text: #333;
	--bestlab-muted: #666;
	--bestlab-line: #e5e5e5;
	--bestlab-bg-soft: #f7f7f7;
}

body {
	font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
	color: var(--bestlab-text);
}

.bestlab-wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ── 서브페이지 상단 배너 ───────────────────────────── */
.bestlab-hero {
	position: relative;
	height: 400px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}

.bestlab-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.bestlab-hero h2 {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 48px;
	font-weight: 700;
	margin: 0;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

/* ── 연도 탭 ─────────────────────────────────────────── */
.bestlab-tabs {
	display: flex;
	border: 1px solid var(--bestlab-line);
	margin: 50px 0 40px;
}

.bestlab-tabs a {
	flex: 1;
	text-align: center;
	padding: 18px 6px;
	color: var(--bestlab-text);
	text-decoration: none;
	border-right: 1px solid var(--bestlab-line);
	font-size: 15px;
}

.bestlab-tabs a:last-child {
	border-right: 0;
}

.bestlab-tabs a.on {
	background: var(--bestlab-navy);
	color: #fff;
	font-weight: 700;
}

/* ── 논문 목록 ───────────────────────────────────────── */
.bestlab-section-title {
	font-size: 26px;
	font-weight: 700;
	margin: 50px 0 24px;
	padding-left: 12px;
	border-left: 5px solid var(--bestlab-navy);
	line-height: 1.2;
}

.pub-item {
	display: flex;
	gap: 24px;
	padding: 30px 0;
	border-bottom: 1px solid var(--bestlab-line);
}

.pub-num {
	flex: 0 0 46px;
	font-size: 17px;
	font-weight: 700;
	color: var(--bestlab-text);
	padding-top: 2px;
}

.pub-body {
	flex: 1;
	min-width: 0;
}

.pub-body a.pub-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.pub-authors {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.5;
}

.pub-title {
	font-size: 15px;
	color: var(--bestlab-muted);
	margin: 0;
	line-height: 1.6;
}

.pub-journal {
	font-weight: 700;
	color: var(--bestlab-text);
}

.pub-thumb {
	flex: 0 0 210px;
}

.pub-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.pub-banners {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pub-banners a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--bestlab-blue);
	color: var(--bestlab-blue);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pub-banners a:hover {
	background: var(--bestlab-blue);
	color: #fff;
}

/* ── 구성원 카드 ─────────────────────────────────────── */
.member-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 40px 0 80px;
}

.member-card {
	display: flex;
	gap: 20px;
	border: 1px solid var(--bestlab-line);
	border-radius: 8px;
	padding: 24px;
	align-items: flex-start;
}

.member-card .photo {
	flex: 0 0 120px;
}

.member-card .photo img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.member-card .name {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 6px;
}

.member-card .position {
	color: var(--bestlab-blue);
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 8px;
}

.member-card .area,
.member-card .period {
	font-size: 14px;
	color: var(--bestlab-muted);
	margin: 0 0 6px;
	line-height: 1.5;
}

.member-card .mail {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 16px;
	border: 1px solid var(--bestlab-line);
	font-size: 14px;
	color: var(--bestlab-text);
	text-decoration: none;
	border-radius: 4px;
}

/* ── 사진 갤러리 ─────────────────────────────────────── */
.photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 40px 0 80px;
}

.photo-grid figure {
	margin: 0;
}

.photo-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.photo-grid figcaption {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
}

.photo-grid .manager {
	font-size: 14px;
	color: var(--bestlab-muted);
}

/* ── 모바일 (원본의 레이아웃 깨짐을 여기서 바로잡음) ── */
@media screen and (max-width: 900px) {
	.member-grid,
	.photo-grid {
		grid-template-columns: 1fr;
	}

	.bestlab-hero {
		height: 260px;
	}

	.bestlab-hero h2 {
		font-size: 32px;
	}

	.pub-item {
		flex-wrap: wrap;
		gap: 14px;
	}

	/* 번호가 본문 위로 겹쳐 흐르던 문제 해결 */
	.pub-num {
		flex: 0 0 100%;
		font-size: 15px;
		color: var(--bestlab-blue);
	}

	.pub-body {
		flex: 1 1 100%;
	}

	.pub-thumb {
		flex: 1 1 100%;
		max-width: 320px;
	}

	.bestlab-tabs {
		flex-wrap: wrap;
	}

	.bestlab-tabs a {
		flex: 1 0 33.333%;
		border-bottom: 1px solid var(--bestlab-line);
		padding: 14px 4px;
		font-size: 14px;
	}
}

/* ------------------------------------------------------------------
   모바일 보정 — 원본 m. 사이트와 맞추기 위한 항목별 조정.
   원본은 PC와 모바일이 별도 사이트라, 같은 마크업으로 두 화면을 낼 때
   개수 차이 같은 것은 여기서 맞춘다.
   ------------------------------------------------------------------ */
@media all and (max-width: 1023px) {

	/* 홈 News 카드 — 원본 모바일은 가장 최근 1건만 보여준다. */
	.pm-myboard_album__1210535__ ul li.item:nth-child(n+2) {
		display: none;
	}

	/* 논문 목록 — 원본 모바일 CSS(2026 페이지용)에 ul 기본 들여쓰기 제거가
	   빠져 있어 여기서 잡는다. 다른 연도 페이지와 같은 345px 폭이 된다. */
	ul.History_Box {
		padding-left: 0;
	}

	/* 장비 예약 박스 — 원본은 상자 높이가 95px 고정이라 이름 줄이 5px쯤
	   상자 밖으로 삐져나온다(원본 결함). 내용에 맞게 늘어나게 다듬는다. */
	.contents .Box {
		height: auto !important;
		min-height: 95px;
		padding: 6px 0;
		box-sizing: border-box;
	}

	/* News 게시판 — 원본은 모바일에서 표가 아니라 ul 목록을 쓴다. */
	.bl-m-only {
		display: block;
	}

	table.st_mybd_list,
	.st_mybd_total,
	.bl-pc-only {
		display: none;
	}
}

/* News 게시판 모바일 목록 — 1024px 이상에서는 숨긴다.
   (max-width 블록보다 뒤에 있으므로 min-width 로 한정해야 모바일 표시를 안 덮는다.) */
@media all and (min-width: 1024px) {
	.bl-m-only {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Professor 하단 저널 표지 호버 — 원본은 +(60%)와 View More(42%)가
   표지가 작게 렌더되는 구간에서 서로 겹친다. 사용자 요청으로 정돈:
   +는 위쪽 중앙, View More 는 아래쪽에 알약형 버튼으로 나눠 배치한다.
   ------------------------------------------------------------------ */
.book .container::after {
	top: 40%;
	font-size: 44px;
	font-weight: 300;
	line-height: 1;
}

.book .view-more {
	top: 62%;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	line-height: 1;
}

/* Opportunities 개인정보 레이어 — 원본 PC CSS의 팝업 규칙.
   PC 시트가 1024px 이상 전용이 되면서 모바일에서 레이어 전문이 그대로
   펼쳐지던 것을 막는다. 원본 모바일도 같은 팝업 방식이다. */


.privacy__1228455__ .argree_text {margin:0;padding:0;margin-top: 120px;padding-left: 0px;}


.privacy__1228455__ .argree_text input[type='checkbox'] {margin:0 3px 0 0;}


.privacy__1228455__ .argree_text label {font-size:14px;color:#666;line-height:20px;letter-spacing:-.03em;cursor:pointer;}


.privacy__1228455__ .argree_text .btn_privacy_view {margin:0 0 0 5px;padding:0;border:none;background:none;font-size:14px;font-weight:bold;color:#222;line-height:20px;letter-spacing:-.03em;}


.privacy__1228455__ .form_privacy_layer {box-sizing:border-box;display:none;position:absolute;bottom:30px;left:0;width:280px;border:1px solid #333;background:#fff;}


.privacy__1228455__ .form_privacy_layer.on {display:block;z-index: 1;}


.privacy__1228455__ .form_privacy_layer > dl {margin:0;padding:0;}


.privacy__1228455__ .form_privacy_layer > dl > dt {position:relative;margin:0;padding:10px 15px;background:#e5e5e5;font-size:14px;font-weight:bold;color:#101010;line-height:18px;letter-spacing:-.03em;}


.privacy__1228455__ .form_privacy_layer > dl > dt .btn_layer_close {position:absolute;top:0;right:0;width:38px;height:38px;margin:0;padding:0;border:none;background:none;font-size:0;}


.privacy__1228455__ .form_privacy_layer > dl > dt .btn_layer_close:before {content:'';display:block;position:absolute;top:-1px;right:0;bottom:0;left:0;width:16px;height:1px;margin:auto;background:#101010;transform:rotate(-45deg);}


.privacy__1228455__ .form_privacy_layer > dl > dt .btn_layer_close:after {content:'';display:block;position:absolute;top:-1px;right:0;bottom:0;left:0;width:16px;height:1px;margin:auto;background:#101010;transform:rotate(45deg);}


.privacy__1228455__ .form_privacy_layer > dl > dd {overflow-y:auto;max-height:150px;margin:0;padding:10px 15px;font-size:13px;color:#666;line-height:17px;letter-spacing:-.03em;}


.privacy__1228455__ .form_privacy_layer > dl p {margin:0;padding:0;}


	.privacy__1228455__ .argree_text label {font-size:16px;line-height:22px;}


	.privacy__1228455__ .argree_text .btn_privacy_view {font-size:16px;line-height:22px;}


	.privacy__1228455__ .form_privacy_layer {width:550px;}


	.privacy__1228455__ .form_privacy_layer > dl > dt {padding:15px 20px;font-size:15px;line-height:20px;}


	.privacy__1228455__ .form_privacy_layer > dl > dt .btn_layer_close {width:50px;height:50px;}


	.privacy__1228455__ .form_privacy_layer > dl > dt .btn_layer_close:before {width:20px;}


	.privacy__1228455__ .form_privacy_layer > dl > dt .btn_layer_close:after {width:20px;}


	.privacy__1228455__ .form_privacy_layer > dl > dd {max-height:200px;padding:15px 20px;font-size:14px;line-height:18px;}

/* ------------------------------------------------------------------
   게시글 상세 본문 여백 — 논문 리스트 페이지와 같은 호흡으로.
   (2026-08 요청: "내용 작성 시 Publication 논문리스트 정도 되는 여백")
   ------------------------------------------------------------------ */
.scbd .det .conbody {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0 80px;
	min-height: 260px;
	line-height: 1.8;
}

.scbd .det .conbody p {
	margin-bottom: 1em;
}

.scbd .det .conbody img {
	max-width: 100%;
	height: auto;
}

@media all and (max-width: 1023px) {
	.scbd .det .conbody {
		padding: 24px 15px 50px;
		min-height: 180px;
	}
}

/* 연도 탭 자동 추가분 — 다음 줄로 넘어간 셀은 왼쪽 테두리가 없어 보정한다. */
.bl-tab-extra > a {
	border-left: 1px solid #ddd !important;
}

/* ── 2026-08 연구실 요청 보정 ───────────────────────────── */

/* Topic 카드 설명 — 빌더의 글자 단위 꺾기(word-break:break-all) 탓에
   1920 화면에서 영단어가 중간에서 쪼개진다. 단어 단위로 되돌린다. */
.Research ul.interests li.Topic .Topic_title,
.Research ul.interests li.Topic .Topic_text {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 게시판 탭 버튼 — 'Announcements' 의 s 만 다음 줄로 넘어가지 않게. */
.img__1218335__ > a > span,
.img__1218345__ > a > span {
	word-break: keep-all;
}

/* 페이지 번호 사이 간격 — 스페이스 두 번 정도. */
.paginate a,
.paginate strong {
	margin-left: 9px !important;
	margin-right: 9px !important;
}
.st_mybd_paginate .ui-pagenate a,
.st_mybd_paginate .ui-pagenate strong {
	margin-left: 9px !important;
	margin-right: 9px !important;
}

/* Members 카드 — 내용이 길어도 잘리거나 겹치지 않게 (PC만).
   원본은 카드 높이 343px 고정 + 이메일이 카드 바닥에 절대 위치라,
   괄호 과제명이 길면 잘리고 연구분야가 이메일 밑에 깔린다.
   내용이 짧으면 원본과 같은 343px, 길면 카드가 아래로 자란다. */
@media all and (min-width: 1024px) {
	.Lab_member .Lab .Members {
		height: auto !important;
		min-height: 343px;
	}
	/* 글 상자를 세로 묶음으로 — 이메일 버튼을 절대 위치에서 흐름으로 내린다.
	   원본은 버튼이 카드 바닥에 절대 위치로 박혀 있어, 위 내용이 길어지면
	   버튼 밑으로 깔렸다. 흐름에 두고 남는 공간만큼 아래로 밀리게 하면
	   짧은 카드는 원본처럼 바닥에 붙고, 긴 카드는 겹치는 대신 늘어난다. */
	.Lab_member .Lab .Members .textBox {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 24px;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	.Lab_member .Lab .Members .textBox .Area {
		margin-bottom: 18px;
	}
	.Lab_member .Lab .Members .textBox .Mail {
		position: static !important;
		margin-top: auto;
	}
}