/* ════════════════════════════════════════════
   연구실적 (모바일 우선 · 360px~1280px)
   레이아웃/목록/상세 구조는 공지사항·칼럼과 동일해서 notice.css의
   .notice-wrap / .notice-item / .notice-single__* 클래스를 그대로 재사용하고,
   여기서는 전용 페이지 ID(레이아웃 padding)와 첨부파일 다운로드 목록만 추가한다.
   ════════════════════════════════════════════ */

#research-main,
#research-single-main {
	padding: 28px 16px 56px;
	background: #fff;
}

/* ── 상세: 첨부파일 다운로드 목록 (콘텐츠 상단 배치, 사용자 요청) ─────────── */
.research-files {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hyoo-border);
}

.research-files__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--hyoo-text);
	margin: 0 0 12px;
}

.research-files__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.research-files__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--hyoo-bg-soft);
	border: 1.5px solid var(--hyoo-accent-light);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.research-files__link:hover {
	border-color: var(--hyoo-accent-dark);
	background: #fff;
}

.research-files__ext {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 3px 6px;
	background: var(--hyoo-accent-dark);
	color: #fff;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.research-files__name {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--hyoo-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.research-files__size {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--hyoo-text-muted);
}

.research-files__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--hyoo-accent-dark);
}

/* ════════════════════════════════════════════
   반응형 (360px → 1280px 모바일 우선) — notice.css의 #notice-main 계열과 동일한 값
   ════════════════════════════════════════════ */

@media (max-width: 360px) {
	#research-main,
	#research-single-main { padding: 20px 12px 48px; }

	.research-files__name { font-size: 13px; }
}

@media (min-width: 480px) {
	#research-main,
	#research-single-main { padding: 36px 20px 64px; }
}

@media (min-width: 768px) {
	#research-main,
	#research-single-main { padding: 48px 24px 72px; }
}

@media (min-width: 1024px) {
	#research-main,
	#research-single-main { padding: 56px 40px 80px; }
}

@media (min-width: 1280px) {
	#research-main,
	#research-single-main { padding: 64px 40px 96px; }
}