@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* mz-edu-design-system (Figma) — https://proxy-lilac-37013521.figma.site/ */
:root {
	--tsr-primary-50: #E6F2FF;
	--tsr-primary-100: #CCE5FF;
	--tsr-primary-500: #0073E6;
	--tsr-primary-600: #005BB8;
	--tsr-secondary-50: #E6F9F7;
	--tsr-secondary-500: #00B9A3;
	--tsr-accent-50: #FFF8E6;
	--tsr-accent-100: #FFF1CC;
	--tsr-accent-500: #FFB800;
	--tsr-accent-700: #996F00;
	--tsr-neutral-0: #FFFFFF;
	--tsr-neutral-50: #F8F9FA;
	--tsr-neutral-100: #F1F3F5;
	--tsr-neutral-200: #E9ECEF;
	--tsr-neutral-300: #DEE2E6;
	--tsr-neutral-400: #CED4DA;
	--tsr-neutral-500: #ADB5BD;
	--tsr-neutral-600: #6C757D;
	--tsr-neutral-700: #495057;
	--tsr-neutral-800: #343A40;
	--tsr-neutral-900: #212529;
	--tsr-page-bg: #121416;
	--tsr-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
	--tsr-radius-md: 8px;
	--tsr-radius-lg: 12px;
	--tsr-radius-xl: 16px;
	--tsr-radius-2xl: 24px;
	--tsr-shadow-sm: 0 1px 2px rgba(33, 37, 41, 0.06), 0 1px 3px rgba(33, 37, 41, 0.08);
	--tsr-shadow-md: 0 4px 12px rgba(33, 37, 41, 0.08), 0 2px 6px rgba(33, 37, 41, 0.06);
	--tsr-shadow-lg: 0 12px 28px rgba(33, 37, 41, 0.1), 0 4px 10px rgba(33, 37, 41, 0.06);
	--tsr-focus-ring: 0 0 0 3px rgba(0, 115, 230, 0.22);
}

body, html {
	background-color: var(--tsr-page-bg) !important;
}

.parallax-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 150vh;
	z-index: 0;
	background-image: url('https://it.livestudy.com/files/images/202604/0843e00b-9dee-435c-b2d7-e6986eeaac3a.webp');
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
	opacity: 0.55;
	filter: blur(1px);
	will-change: transform;
}

#contents {
	position: relative;
	z-index: 10;
}

.top-scholarship-wrap,
.top-scholarship-detail-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 80px;
	font-family: var(--tsr-font);
	color: var(--tsr-neutral-900);
	letter-spacing: -0.02em;
}

/* List hero: MD shadow, 2XL radius */
.top-scholarship-hero {
	border-radius: var(--tsr-radius-2xl);
	border: 1px solid var(--tsr-neutral-200);
	box-shadow: var(--tsr-shadow-md);
	overflow: hidden;
	transition: transform 0.25s ease;
	background: var(--tsr-neutral-0);
}
.top-scholarship-hero:hover {
	transform: translateY(-4px);
}
.top-scholarship-hero img {
	width: 100%;
	height: auto;
	display: block;
}

.filter-row {
	margin: 40px 0 24px;
	display: flex;
	justify-content: flex-end;
}
.filter-row--top {
	margin-top: 0;
	margin-bottom: var(--tsr-space-6, 32px);
}
.filter-row select,
.filter-row__select {
	appearance: none;
	background-color: var(--tsr-neutral-0);
	background-image: url('data:image/svg+xml;utf8,<svg fill="%236C757D" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 1px solid var(--tsr-neutral-300);
	border-radius: var(--tsr-radius-md);
	padding: 10px 40px 10px 16px;
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	color: var(--tsr-neutral-800);
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	min-width: 180px;
	font-family: inherit;
}
.filter-row select:hover,
.filter-row__select:hover {
	border-color: var(--tsr-neutral-400);
	background-color: var(--tsr-neutral-50);
}
.filter-row select:focus,
.filter-row__select:focus {
	border-color: var(--tsr-primary-500);
	box-shadow: var(--tsr-focus-ring);
}

.featured-review,
.detail-review {
	display: flex;
	gap: var(--tsr-space-8, 48px);
	background: var(--tsr-neutral-0);
	border-radius: var(--tsr-radius-xl);
	border: 1px solid var(--tsr-neutral-200);
	padding: var(--tsr-space-8, 48px);
	box-shadow: var(--tsr-shadow-sm);
}
.featured-review {
	margin-top: 16px;
}
.featured-review,
.detail-review {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.featured-detail-review {
	margin-top: var(--tsr-space-8, 48px);
}
.featured-detail-review__headline {
	margin-top: var(--tsr-space-5, 24px);
}
.featured-review:hover,
.detail-review:hover {
	transform: translateY(-4px);
	box-shadow: var(--tsr-shadow-md);
}

.review-profile {
	width: 240px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.profile-img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	border-radius: var(--tsr-radius-lg);
	object-fit: cover;
	background-color: var(--tsr-neutral-100);
}

.photo-caption {
	display: block;
	text-align: center;
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: var(--tsr-neutral-500);
	margin-top: 8px;
}
.profile-info {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.profile-name {
	font-size: 26px;
	font-weight: 700;
	color: var(--tsr-neutral-900);
}
.profile-photo-wrap {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--tsr-space-5, 24px);
}
.study-photo-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.study-photo {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--tsr-radius-lg);
	background-color: var(--tsr-neutral-100);
}

.review-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.featured-review h2 {
	margin: 0 0 var(--tsr-space-5, 24px);
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--tsr-neutral-900);
}
.featured-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 14px;
	margin-bottom: var(--tsr-space-6, 32px);
	color: var(--tsr-neutral-600);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	padding-bottom: var(--tsr-space-5, 24px);
	border-bottom: 1px solid var(--tsr-neutral-200);
}
.featured-review p {
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: var(--tsr-neutral-700);
	margin: 0 0 16px;
	word-break: keep-all;
}
.featured-review p strong {
	color: var(--tsr-neutral-900);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
}
.featured-review .action-wrap {
	margin-bottom: 0;
	margin-top: auto;
	padding-top: var(--tsr-space-7, 40px);
}
.featured-review .action-wrap a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	border-radius: var(--tsr-radius-md);
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	text-decoration: none;
	background: var(--tsr-neutral-0);
	color: var(--tsr-neutral-900);
	border: 1px solid var(--tsr-neutral-300);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.featured-review .action-wrap a:hover {
	border-color: var(--tsr-primary-500);
	color: var(--tsr-primary-600);
	background: var(--tsr-primary-50);
}

.badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--tsr-radius-md);
	background: var(--tsr-primary-50);
	color: var(--tsr-primary-600);
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
}

.badge[data-grade*="GOLD"], .badge[data-grade*="Gold"], .badge[data-grade*="골드"], .badge[data-grade*="최우수"] {
	background: var(--tsr-accent-50);
	color: var(--tsr-accent-700);
}
.badge[data-grade*="SILVER"], .badge[data-grade*="Silver"], .badge[data-grade*="실버"], .badge[data-grade*="우수"] {
	background: var(--tsr-neutral-100);
	color: var(--tsr-neutral-700);
}
.badge[data-grade*="BRONZE"], .badge[data-grade*="Bronze"], .badge[data-grade*="브론즈"], .badge[data-grade*="장려"] {
	background: #FDF3E9;
	color: #C07C4A;
}

.review-section {
	margin-top: var(--tsr-space-10, 80px);
}
.review-section > h2 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--tsr-neutral-0);
	margin-bottom: var(--tsr-space-5, 24px);
}
.review-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--tsr-neutral-0);
	border: 1px solid var(--tsr-neutral-200);
	border-radius: var(--tsr-radius-xl);
	overflow: hidden;
	box-shadow: var(--tsr-shadow-sm);
}
.review-table th,
.review-table td {
	padding: 24px 32px;
	border-bottom: 1px solid var(--tsr-neutral-200);
	text-align: left;
	font-size: 16px;
	line-height: 26px;
	vertical-align: middle;
}
.review-table th {
	background: var(--tsr-neutral-50);
	font-weight: 600;
	color: var(--tsr-neutral-600);
	font-size: 15px;
	padding: 20px 32px;
}
.review-table tr {
	transition: background-color 0.2s;
}
.review-table tbody tr:hover {
	background-color: var(--tsr-neutral-50);
}
.review-table tr:last-child td {
	border-bottom: none;
}
.review-table a {
	color: var(--tsr-neutral-900);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s;
}
.review-table a:hover {
	color: var(--tsr-primary-500);
}
.review-table td:last-child {
	color: var(--tsr-neutral-700);
	font-weight: 500;
}

.top-scholarship-detail-wrap .meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	color: var(--tsr-neutral-600);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
}

.detail-review h1 {
	margin-top: 0;
	margin-bottom: var(--tsr-space-6, 32px);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--tsr-neutral-900);
}

.detail-review h2 {
	margin-top: var(--tsr-space-8, 14px);
	margin-bottom: 16px;
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--tsr-neutral-800);
	display: flex;
	align-items: center;
	gap: 8px;
}

.detail-review h2::before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	background: var(--tsr-primary-500);
	border-radius: 50%;
	flex-shrink: 0;
}

.detail-review p {
	margin: 0 0 16px;
	line-height: 28px;
	font-size: 18px;
	font-weight: 400;
	color: var(--tsr-neutral-700);
	word-break: keep-all;
}

.detail-actions {
	margin-top: var(--tsr-space-8, 48px);
	padding-top: var(--tsr-space-6, 32px);
	border-top: 1px solid var(--tsr-neutral-200);
}
.detail-actions > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 24px;
	border-radius: var(--tsr-radius-md);
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	text-decoration: none;
	background: var(--tsr-neutral-0);
	color: var(--tsr-neutral-900);
	border: 1px solid var(--tsr-neutral-300);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.detail-actions > *:hover {
	border-color: var(--tsr-primary-500);
	color: var(--tsr-primary-600);
	background: var(--tsr-primary-50);
}

.review-group {
	display: flex;
	flex-direction: column;
	gap: var(--tsr-space-5, 24px);
}

.review-item {
	display: flex;
	align-items: stretch;
	gap: var(--tsr-space-6, 32px);
	background: var(--tsr-neutral-0);
	border-radius: var(--tsr-radius-lg);
	border: 1px solid var(--tsr-neutral-200);
	padding: var(--tsr-space-6, 32px);
	box-shadow: var(--tsr-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--tsr-shadow-md);
}
.review-item .review-profile {
	flex-shrink: 0;
	display: flex;
}
.review-item .profile-img {
	width: auto;
	height: 100%;
	border-radius: var(--tsr-radius-lg);
	object-fit: cover;
	margin-bottom: 0;
}
.review-item .review-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.review-item .featured-meta {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tsr-neutral-200);
}
.review-item h2 {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--tsr-neutral-900);
}
.review-item p {
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	color: var(--tsr-neutral-600);
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.review-item .action-wrap {
	margin-top: auto;
	padding-top: 16px;
}
.review-item .action-wrap a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	border-radius: var(--tsr-radius-md);
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
	text-decoration: none;
	background: var(--tsr-neutral-0);
	color: var(--tsr-neutral-900);
	border: 1px solid var(--tsr-neutral-300);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.review-item .action-wrap a:hover {
	border-color: var(--tsr-primary-500);
	color: var(--tsr-primary-600);
	background: var(--tsr-primary-50);
}

.empty-state {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tsr-neutral-0);
	border-radius: var(--tsr-radius-lg);
	border: 1px solid var(--tsr-neutral-200);
	padding: var(--tsr-space-10, 80px) var(--tsr-space-6, 32px);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	color: var(--tsr-neutral-600);
	text-align: center;
}

.profile-img-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	border-radius: var(--tsr-radius-lg);
	background: linear-gradient(135deg, var(--tsr-primary-50) 0%, var(--tsr-neutral-100) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.profile-img-placeholder svg {
	width: 80px;
	height: 80px;
	color: var(--tsr-neutral-500);
}
.review-item .profile-img-placeholder {
	width: auto;
	min-width: 100px;
	height: 100%;
	margin-bottom: 0;
}
.review-item .profile-img-placeholder svg {
	width: 48px;
	height: 48px;
}

.study-photo-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--tsr-radius-lg);
	background: linear-gradient(135deg, var(--tsr-neutral-50) 0%, var(--tsr-neutral-200) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.study-photo-placeholder svg {
	width: 40px;
	height: 40px;
	color: var(--tsr-neutral-500);
}
.study-photo-placeholder span {
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--tsr-neutral-600);
}

@media (max-width: 768px) {
	.featured-review,
	.detail-review {
		flex-direction: column;
		padding: var(--tsr-space-5, 24px);
		gap: var(--tsr-space-5, 24px);
	}
	.review-profile {
		width: 100%;
	}
	.review-item {
		flex-direction: column;
	}
	.review-item .profile-img {
		width: 100%;
		min-height: 200px;
	}
	.detail-review h1 {
		font-size: 28px;
		line-height: 36px;
	}
}