/* msub36 — 졸업을 앞둔 8인에게 물었다 (캠퍼스 웹진 멀티 인터뷰형) */

:root {
	--u27-brown: #1a1208;
	--u27-orange: #c4622d;
	--u27-mocha: #8b6f47;
	--u27-beige: #d4c4a8;
	--u27-cream: #f5f3ef;
	--u27-serif: "IBM Plex Sans KR", sans-serif;
}

/* ----------------------------------------
   S1: 히어로
   ---------------------------------------- */
.u36-hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--u27-brown);
}

.u36-hero-bg {
	position: absolute;
	inset: 0;
	background: url("/sub/motion/images/sub/u36-bg.jpg") center / cover no-repeat;
	transform-origin: center;
	will-change: transform;
}

.u36-hero-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 6, 2, 0.15) 0%, rgba(10, 6, 2, 0.72) 100%);
}

.u36-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px 80px;
}

.u36-hero-label {
	display: block;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.6vw), 18px);
	color: var(--u27-orange);
	margin-bottom: 24px;
}

.u36-hero-tit-box {
	clip-path: inset(0 100% 0 0);
	will-change: clip-path;
	margin-bottom: 20px;
}

.u36-hero-tit {
	font-family: var(--u27-serif);
	font-size: clamp(36px, calc(16px + 4vw), 72px);
	font-weight: 700;
	color: #fff;
	line-height: 1.18;
}

.u36-hero-sub {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.7vw), 18px);
	color: rgba(255, 255, 255, 0.62);
	opacity: 0;
	transform: translateY(12px);
}

.u36-hero-scroll {
	position: absolute;
	bottom: 40px;
	right: 60px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.45);
	font-size: clamp(14px, calc(10px + 0.4vw), 14px);
	font-family: var(--u27-serif);
}

.u36-hero-scroll-line {
	width: 40px;
	height: 1px;
	background: rgba(255, 255, 255, 0.35);
}

/* ----------------------------------------
   S2: 인터뷰이 스트립
   ---------------------------------------- */
.u36-strip {
	background: var(--u27-cream);
	padding: 56px 0;
	border-bottom: 1px solid var(--u27-beige);
}

.u36-strip-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.u36-strip-item {
	text-align: center;
	cursor: pointer;
}

.u36-strip-photo {
	width: 80%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 10px;
	transition: box-shadow 0.3s ease;
}

.u36-strip-photo-inner {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.u36-strip-item:hover .u36-strip-photo-inner {
	transform: scale(1.12);
}

.u36-strip-item.is-active .u36-strip-photo {
	box-shadow: 0 0 0 3px var(--u27-orange);
}

/* background-image는 JS가 inline style로 주입 */

.u36-strip-num {
	display: block;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 16px);
	font-weight: 700;
	color: var(--u27-orange);
	margin-bottom: 3px;
}

.u36-strip-name {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 16px);
	font-weight: 600;
	color: var(--u27-brown);
}

.u36-strip-dept {
	font-size: clamp(12px, calc(9px + 0.3vw), 13px);
	color: var(--u27-mocha);
	margin-top: 2px;
}

/* ----------------------------------------
   S3: 네비 바 (sticky)
   ---------------------------------------- */
.u36-nav {
	position: sticky;
	top: 90px;
	z-index: 2;
	background: #fff;
	border-bottom: 1px solid var(--u27-beige);
	transition: top 0.25s ease;
}

.u36-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
}

.u36-nav-inner::-webkit-scrollbar { display: none; }

.u36-nav-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 18px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	color: var(--u27-mocha);
	transition: color 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.u36-nav-btn:hover { color: var(--u27-brown); }

.u36-nav-btn.is-active {
	border-bottom-color: var(--u27-orange);
	color: var(--u27-brown);
}

.u36-nav-num {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	font-weight: 700;
	color: var(--u27-orange);
}

.u36-nav-name {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
}

/* ----------------------------------------
   인터뷰 섹션
   ---------------------------------------- */
.u36-section {
	padding: 20px 0 100px;
	background: #fff;
}

.u36-section-line {
	position: relative;
	height: 1px;
	background: var(--u27-beige);
	margin: 60px 0;
}

.u36-section-line span {
	position: absolute;
	inset: 0;
	background: var(--u27-orange);
	transform-origin: left;
	transform: scaleX(0);
}


.u36-section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
	display: flex;
	gap: 80px;
	align-items: flex-start;
}

/* 좌: sticky 인물 컬럼 */
.u36-person-left {
	width: 260px;
	flex-shrink: 0;
	position: sticky;
	top: 150px;
}

.u36-person-num {
	font-family: var(--u27-serif);
	font-size: clamp(52px, calc(28px + 3.5vw), 88px);
	font-weight: 700;
	color: var(--u27-orange);
	line-height: 1;
	margin-bottom: 16px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.u36-person-num.is-visible {
	opacity: 1;
	transform: none;
}

.u36-person-photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	border-radius: 12px;
	margin-bottom: 20px;
}

/* background-image는 JS가 inline style로 주입 */

.u36-person-name {
	display: block;
	font-family: var(--u27-serif);
	font-size: clamp(18px, calc(12px + 0.8vw), 22px);
	font-weight: 700;
	color: var(--u27-brown);
	margin-bottom: 4px;
}

.u36-person-dept {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 16px);
	color: var(--u27-mocha);
}

.u36-person-college {
	font-family: var(--u27-serif);
	font-size: clamp(12px, calc(9px + 0.3vw), 13px);
	color: var(--u27-mocha);
	opacity: 0.65;
	margin-top: 2px;
}

/* 우: Q&A 스크롤 영역 */
.u36-person-right {
	flex: 1;
	min-width: 0;
	padding-top: 12px;
}

.u36-qa-list {
	list-style: none;
}

.u36-qa {
	padding: 40px 0;
	border-bottom: 1px solid var(--u27-beige);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.u36-qa:first-child { padding-top: 0; }

.u36-qa.is-visible {
	opacity: 1;
	transform: none;
}

.u36-q {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}

.u36-q-mark {
	flex-shrink: 0;
	font-family: var(--u27-serif);
	font-size: clamp(18px, calc(12px + 0.8vw), 22px);
	font-weight: 700;
	color: var(--u27-orange);
	line-height: 1.4;
}

.u36-q-text {
	font-family: var(--u27-serif);
	font-size: clamp(18px, calc(12px + 0.8vw), 22px);
	font-weight: 600;
	color: var(--u27-brown);
	line-height: 1.55;
}

.u36-a {
	padding-left: 36px;
}

.u36-a-text {
	font-family: var(--u27-serif);
	font-size: clamp(16px, calc(10px + 0.8vw), 18px);
	color: #5a4a3a;
	line-height: 1.9;
}

.u36-pullquote {
	margin-top: 48px;
	padding: 24px 28px;
	border-left: 4px solid var(--u27-orange);
	background: rgba(196, 98, 45, 0.05);
	font-family: var(--u27-serif);
	font-size: clamp(18px, calc(12px + 1vw), 24px);
	font-weight: 600;
	color: var(--u27-brown);
	font-style: italic;
	line-height: 1.65;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.u36-detail-link {
	display: inline-block;
	margin-top: 28px;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: var(--u27-orange);
	border-bottom: 1px solid var(--u27-orange);
	padding-bottom: 2px;
	text-decoration: none;
	transition: opacity 0.2s;
}

.u36-detail-link:hover { opacity: 0.7; }

.u36-pullquote.is-visible {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------
   에디터 코멘트
   ---------------------------------------- */
.u36-editor {
	background: var(--u27-beige);
	padding: 80px 0;
}

.u36-editor-inner {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}

.u36-editor-label {
	display: block;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: var(--u27-mocha);
	margin-bottom: 24px;
}

.u36-editor-text {
	font-family: var(--u27-serif);
	font-size: clamp(16px, calc(10px + 0.8vw), 20px);
	color: var(--u27-brown);
	line-height: 1.95;
	font-style: italic;
	margin-bottom: 28px;
}

.u36-editor-sig {
	display: block;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: var(--u27-mocha);
}

/* ----------------------------------------
   관련 기사
   ---------------------------------------- */
.u36-related {
	background: #fff;
	padding: 80px 0 100px;
}

.u36-related-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.u36-related-head {
	margin-bottom: 40px;
}

.u36-related-label {
	display: block;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: var(--u27-orange);
	margin-bottom: 8px;
}

.u36-related-tit {
	font-family: var(--u27-serif);
	font-size: clamp(22px, calc(14px + 1.5vw), 32px);
	font-weight: 700;
	color: var(--u27-brown);
}

.u36-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(280px, 28vw, 420px);
	gap: 20px;
}

.u36-rel-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
}

.u36-rel-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.78) 100%);
	pointer-events: none;
	transition: background 0.4s ease;
}

.u36-rel-card:hover::after {
	background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, 0.88) 100%);
}

.u36-rel-card-link {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.u36-rel-card-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}

.u36-rel-card:hover .u36-rel-card-img { transform: scale(1.08); }

.u36-rel-card-img--1 { background-image: url("/sub/motion/images/main/sec02_img01.jpg"); }
.u36-rel-card-img--2 { background-image: url("/sub/motion/images/main/sec02_img03.jpg"); }
.u36-rel-card-img--3 { background-image: url("/sub/motion/images/main/sec02_img04.jpg"); }

.u36-rel-card-cat {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--u27-orange);
	color: #fff;
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 16px);
	padding: 4px 12px;
	border-radius: 20px;
	z-index: 3;
}

.u36-rel-card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px 22px 24px;
	z-index: 2;
}

.u36-rel-card-tit {
	font-family: var(--u27-serif);
	font-size: clamp(18px, calc(12px + 1vw), 22px);
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}

.u36-rel-card-desc {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.4vw), 16px);
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 6px;
}

.u36-rel-card-date {
	font-family: var(--u27-serif);
	font-size: clamp(14px, calc(10px + 0.3vw), 14px);
	color: rgba(255, 255, 255, 0.45);
}

/* ----------------------------------------
   로딩 스켈레톤
   ---------------------------------------- */
.u36-skeleton {
	background: #fff;
	padding: 80px 0 100px;
	border-top: 1px solid var(--u27-beige);
}

.u36-skeleton-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
	display: flex;
	gap: 80px;
}

.u36-skeleton-left {
	width: 260px;
	flex-shrink: 0;
}

.u36-skeleton-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.u36-sk-block {
	background: linear-gradient(90deg, #f0ede8 25%, #e8e3db 50%, #f0ede8 75%);
	background-size: 200% 100%;
	border-radius: 6px;
	animation: u36Shimmer 1.4s infinite;
}

@keyframes u36Shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.u36-sk-num  { height: 72px; width: 60px; margin-bottom: 16px; }
.u36-sk-photo { aspect-ratio: 3/4; width: 100%; margin-bottom: 16px; border-radius: 12px; }
.u36-sk-name { height: 22px; width: 80%; margin-bottom: 8px; }
.u36-sk-dept { height: 16px; width: 55%; }
.u36-sk-q    { height: 22px; width: 60%; margin-bottom: 12px; }
.u36-sk-a    { height: 80px; width: 100%; }

/* 스트립 스켈레톤 */
.u36-strip-skeleton {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.u36-strip-skeleton-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.u36-sk-circle {
	width: 80%;
	aspect-ratio: 1;
	border-radius: 50%;
}

.u36-sk-text-sm { height: 14px; width: 70%; }

/* ----------------------------------------
   반응형
   ---------------------------------------- */
@media (max-width: 999px) {
	.u36-nav { top: 70px; }

	/* 스트립: 3열로 변경 → 6인 기준 3+3 균등 배치 */
	.u36-strip-inner,
	.u36-strip-skeleton { grid-template-columns: repeat(3, 1fr); padding: 0 32px; }

	.u36-section { padding: 20px 0 80px; }
	.u36-section-line { margin: 48px 0; }

	.u36-section-inner {
		flex-direction: column;
		gap: 24px;
		padding: 0 32px;
	}

	.u36-person-left {
		position: static;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.u36-person-num { display: none; }

	.u36-person-photo {
		width: 96px;
		aspect-ratio: 1;
		border-radius: 50%;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.u36-person-info { flex: 1; }
	.u36-person-right { padding-top: 0; }

	/* 관련기사: 2열로 변경 */
	.u36-related-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(240px, 28vw, 360px);
	}

	/* 스켈레톤 반응형 */
	.u36-skeleton-inner {
		flex-direction: column;
		gap: 24px;
		padding: 0 32px;
	}

	.u36-skeleton-left {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.u36-sk-num { display: none; }

	.u36-sk-photo {
		width: 96px;
		flex-shrink: 0;
		aspect-ratio: 1;
		border-radius: 50%;
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.u36-hero-inner { padding: 0 24px 56px; }
	.u36-hero-scroll { right: 24px; bottom: 24px; }

	.u36-strip { padding: 32px 0; }
	.u36-strip-inner,
	.u36-strip-skeleton {
		grid-template-columns: repeat(3, 1fr);
		padding: 0 24px;
		gap: 10px;
	}

	.u36-nav-inner { padding: 0 20px; }
	.u36-nav-btn { padding: 12px 12px; gap: 4px; }

	.u36-section { padding: 20px 0 64px; }
	.u36-section-line { margin: 40px 0; }
	.u36-section-inner { padding: 0 24px; }

	.u36-qa { padding: 32px 0; }
	.u36-a { padding-left: 0; }

	.u36-pullquote {
		margin-top: 32px;
		padding: 20px 22px;
	}

	.u36-editor { padding: 60px 0; }
	.u36-editor-inner { padding: 0 24px; }

	.u36-related { padding: 60px 0 80px; }
	.u36-related-inner { padding: 0 24px; }

	/* 관련기사: 1열 */
	.u36-related-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: clamp(200px, 52vw, 280px);
	}

	.u36-skeleton-inner { padding: 0 24px; }
}

@media (max-width: 499px) {
	.u36-strip { padding: 28px 0; }
	.u36-strip-inner,
	.u36-strip-skeleton {
		grid-template-columns: repeat(3, 1fr);
		padding: 0 16px;
		gap: 8px;
	}

	.u36-strip-dept { display: none; }

	.u36-nav-name { display: none; }
	.u36-nav-btn { padding: 14px 10px; }

	.u36-section { padding: 20px 0 56px; }
	.u36-section-line { margin: 32px 0; }
	.u36-section-inner { padding: 0 20px; }

	.u36-related-inner { padding: 0 20px; }

	.u36-skeleton-inner { padding: 0 20px; }
}

/* ----------------------------------------
   다크모드
   ---------------------------------------- */
body.dark .u36-strip { background: #1a1208; }
body.dark .u36-strip-name { color: var(--u27-beige); }

body.dark .u36-nav { background: var(--color-bg-main); border-color: #3a2f20; }
body.dark .u36-nav-btn { color: #7a6040; }
body.dark .u36-nav-btn:hover,
body.dark .u36-nav-btn.is-active { color: var(--color-text-main); }

body.dark .u36-section { background: var(--color-bg-main); border-color: #3a2f20; }

body.dark .u36-q-text { color: var(--color-text-main); }
body.dark .u36-a-text { color: var(--color-text-sub); }
body.dark .u36-qa { border-color: #3a2f20; }
body.dark .u36-pullquote {
	background: rgba(196, 98, 45, 0.1);
	color: var(--color-text-main);
}
body.dark .u36-person-name { color: var(--color-text-main); }
body.dark .u36-person-dept { color: var(--u27-mocha); }

body.dark .u36-editor { background: #0e0b07; }
body.dark .u36-editor-text,
body.dark .u36-editor-label,
body.dark .u36-editor-sig { color: var(--u27-beige); }

body.dark .u36-person-college { color: var(--u27-mocha); opacity: 0.5; }

body.dark .u36-related { background: var(--color-bg-main); }
body.dark .u36-related-tit { color: var(--color-text-main); }

/* 스켈레톤 — 다크모드에서 shimmer 색 반전 */
body.dark .u36-sk-block {
	background: linear-gradient(90deg, #2a2018 25%, #352a1c 50%, #2a2018 75%);
	background-size: 200% 100%;
}