/* ALIN Lab 사이트 전용 스타일. jemdoc-cvx.css 다음에 읽힌다.
 * 테마 파일(jemdoc-cvx.css)은 upstream 그대로 두고, 사이트에만 필요한 것은 여기에 둔다.
 * 고친 뒤에는 mysite.conf의 alinlab.css?v= 값을 올린다.
 */

/* Publications 제목 아래 범례 (C: conference, J: journal, ...) */
.titlecomment {
	color: #4e6f94;
	font-size: 85%;
	font-weight: bold;
}

/* KaTeX 수식: 화면 읽기용으로 숨겨 둔 MathML이 복사에 섞여 글자가 두 번 나오지 않게 한다.
 * ($K$ 같은 간단한 수식은 jemdoc이 KaTeX 대신 일반 HTML로 쓴다.) */
.katex .katex-mathml {
	-webkit-user-select: none;
	user-select: none;
}

/* 수상·구두발표 등 강조 문구 (Publications의 featured 칸, 교수 소개의 수상 내역) */
.featured {
	color: #c0392b;
}

/* 글자 대비: 테마의 옅은 색 몇 개를 WCAG AA(4.5:1) 이상이 되게 한두 단계 진하게 한다. */
#layout-menu a:link,
#layout-menu a:visited,
#layout-menu a:hover {
	color: #4e6f94;  /* 테마 #5a7da3, 메뉴 배경 위 3.8:1 -> 4.6:1 */
}

div#footer {
	color: #73706a;  /* 테마 #b8b3a8, 2.0:1 -> 4.7:1 */
}

div#footer a {
	color: #5e748e;  /* 테마 #8a9cb1, 2.7:1 -> 4.6:1 */
}

/* Publications의 새 논문 표시 (gen_pages.py가 최근 논문에 붙인다) */
.new-badge {
	display: inline-block;
	padding: 0 0.35em;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: #c0392b;
	font-size: 0.7em;
	font-weight: bold;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	vertical-align: 0.15em;
}

/* Publications 앵커 강조: publications.html#C79, #NeurIPS2026 등으로 들어왔을 때.
 * 연도(#2026)는 연도 바로가기로 이동만 하고 강조하지 않는다 (한 해 전체가 노랗게 칠해지므로). */
.venue_ref:target,
.paper_ref:target,
.numbering:target {
	background-color: #fdf3c4;
	border: 2px dotted #e2b93b;
	padding: 0 1em;
}

/* Publications: 저자가 두 줄을 넘으면 두 줄까지만 보이고, 누르면 펼친다 (js/publications.js, 모든 화면 폭).
 * 저자 목록이 블록이 되므로 바로 뒤 줄바꿈(<br>)은 감춘다. */
.js .authors {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	position: relative;
}

.js .authors + br {
	display: none;
}

.js .authors.expanded {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

/* 접힌 둘째 줄 끝에 겹쳐 놓는 "… more". 왼쪽은 배경색으로 옅어지게 가린다. */
.authors-toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 0 0 1.8em;
	border: 0;
	font: inherit;
	line-height: inherit;
	color: #3a5a80;
	background: linear-gradient(to right, rgba(251, 250, 247, 0), #fbfaf7 1.4em);
	cursor: pointer;
}

:target .authors-toggle {
	background: linear-gradient(to right, rgba(253, 243, 196, 0), #fdf3c4 1.4em);
}

.authors.expanded .authors-toggle {
	position: static;
	padding-left: 0.4em;
	background: none;
}

.authors-toggle:focus-visible {
	outline: 2px solid #5a7da3;
	outline-offset: 1px;
}

/* 연도 바로가기 (Publications는 gen_pages.py, News는 js/news.js가 만든다) */
.year-nav {
	margin: -0.8em 0 1.2em;
	line-height: 1.9;
}

.year-nav a {
	margin-right: 0.15em;
}

.year-nav .sep {
	margin: 0 0.3em;
	color: #b8b3a8;
}

/* News: 최근 몇 해를 뺀 연도는 접어 둔다 (js/news.js). 연도 제목을 누르면 펼친다. */
details.news-year > summary {
	list-style: none;
	cursor: pointer;
}

details.news-year > summary::-webkit-details-marker {
	display: none;
}

details.news-year > summary h2::after {
	content: "▸";
	margin-left: 0.4em;
	font-size: 70%;
	color: #8a9cb1;
}

details.news-year[open] > summary h2::after {
	content: "▾";
}

details.news-year:not([open]) > summary h2 {
	margin-bottom: 0.6em;
}

/* News의 학회별 저자 순위 그래프, Main의 그림 (d3로 그림) */
div.graphtitle {
	width: 800px;
	max-width: 100%;
	text-align: center;
	margin-top: 0.8em;
}

/* Main 그림(js/deadpool.js)은 800x325 viewBox라서 화면 폭에 맞춰 비례해서 줄어든다 */
#indexfig svg {
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
}

#nips21_graph,
#nips20_graph,
#icml20_graph {
	overflow-x: auto;
}

/* 넓은 화면: 긴 페이지에서도 왼쪽 메뉴가 화면에 붙어 있게 한다. */
@media (min-width: 721px) {
	#layout-menu {
		position: sticky;
		top: 0;
		align-self: start;
		box-sizing: border-box;
		height: 100vh;
		overflow-y: auto;
	}
}

/* 좁은 화면(휴대폰): 위쪽 막대의 Menu 버튼으로 메뉴를 펼치고 접는다.
 * 막대와 버튼은 mysite.conf의 [menustart], 동작은 js/menu.js에 있다.
 * <html>에 .js가 없으면(JavaScript 꺼짐) 메뉴는 예전처럼 본문 위에 그대로 보인다. */
#mobile-bar {
	display: none;
}

@media (max-width: 720px) {
	html {
		scroll-padding-top: 56px;  /* #앵커로 이동할 때 막대에 가리지 않게 */
	}

	#tlayout {
		grid-template-columns: minmax(0, 1fr);
	}

	#mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 20;
		box-sizing: border-box;
		height: 48px;
		padding: 0 0.8em;
		background: #f3f1ec;
		border-bottom: 1px solid #e1ddd3;
	}

	#mobile-bar .site-name {
		color: #3a5a80;
		font-size: 1.1em;
		font-weight: bold;
	}

	#mobile-bar .site-name:hover {
		border-bottom: none;
	}

	#menu-button {
		display: none;
	}

	.js #menu-button {
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
		padding: 0.35em 0.75em;
		font: inherit;
		font-size: 0.95em;
		color: #2a4566;
		background: transparent;
		border: 1px solid #cfc9bc;
		border-radius: 6px;
		cursor: pointer;
	}

	#menu-button:focus-visible {
		outline: 2px solid #5a7da3;
		outline-offset: 2px;
	}

	/* 햄버거 아이콘(선 세 줄). 펼치면 X로 바뀐다. */
	.menu-icon,
	.menu-icon::before,
	.menu-icon::after {
		display: block;
		width: 16px;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	.menu-icon {
		position: relative;
	}

	.menu-icon::before,
	.menu-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-icon::before {
		top: -5px;
	}

	.menu-icon::after {
		top: 5px;
	}

	#menu-button[aria-expanded="true"] .menu-icon {
		background-color: transparent;
	}

	#menu-button[aria-expanded="true"] .menu-icon::before {
		transform: translateY(5px) rotate(45deg);
	}

	#menu-button[aria-expanded="true"] .menu-icon::after {
		transform: translateY(-5px) rotate(-45deg);
	}

	#layout-menu {
		white-space: normal;
		border-left: none;
		border-right: none;
	}

	/* 접힌 메뉴: 막대 바로 아래에 겹쳐 내려오는 판 */
	.js #layout-menu {
		position: fixed;
		top: 48px;
		left: 0;
		right: 0;
		z-index: 20;
		max-height: calc(100vh - 48px);
		max-height: calc(100dvh - 48px);
		overflow-y: auto;
		box-sizing: border-box;
		padding: 0.2em 1em 1em;
		border-top: none;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}

	.menu-open #layout-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	/* 펼쳤을 때 본문을 살짝 어둡게 (누르면 닫힌다) */
	.menu-open body::after {
		content: "";
		position: fixed;
		inset: 48px 0 0 0;
		z-index: 10;
		background: rgba(31, 31, 31, 0.25);
	}

	/* 누르기 쉽게 위아래 여백을 준다. inline-block 안쪽에는 테마의 내어쓰기(text-indent)를 다시 적용하지 않는다. */
	#layout-menu div.menu-item a {
		display: inline-block;
		padding: 0.25em 0;
		text-indent: 0;
	}

	#layout-content {
		padding-left: 0.8em;
		padding-right: 0.8em;
	}

	table.imgtable td {
		display: block;
	}
}