@charset "utf-8";

/* =========================================================
   hak_h.css
   학과/전공/센터 메인 공통 레이아웃 CSS
   - 학과별 색상, 비주얼 높이, 이미지 포지션 등은 개별 main.css에서 변수로 조정
========================================================= */

.hak-h-main{
	--hak-main:#1f62c9;
	--hak-dark:#111927;
	--hak-text:#171717;
	--hak-muted:#6b7280;
	--hak-light:#f6f8fb;
	--hak-line:#e5e9f0;
	--hak-radius-lg:30px;
	--hak-radius-md:24px;
	--hak-visual-height:clamp(520px,44vw,850px);
	position:relative;
	width:100%;
	overflow:visible;
	background:#fff;
	color:var(--hak-text);
	word-break:keep-all;
}

.hak-h-main,
.hak-h-main *{box-sizing:border-box;}

.hak-h-main a{color:#333;text-decoration:none;}

.hak-h-main img{max-width:100%; border:0;}

.hak-h-inner{width:min(1260px,92%); margin:0 auto;}

/* visual */
.hak-h-visual{position:relative; width:100%; height:var(--hak-visual-height); overflow:hidden; background:#000;}

.hak-h-visual-slider,
.hak-h-visual-list{position:relative; width:100%; height:100%; margin:0; padding:0; list-style:none;}

.hak-h-visual-list .item{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.1s ease; z-index:1;}

.hak-h-visual-list .item.active{opacity:1; z-index:2;}

.hak-h-visual-list .item img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}

.hak-h-visual:after{content:""; position:absolute; inset:0; z-index:3; background: linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.25) 48%,rgba(0,0,0,.04)), linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,0) 46%); pointer-events:none;}

.hak-h-visual-copy{position:absolute; left:50%; top:50%; width:min(1200px,92%); transform:translate(-50%,-50%); z-index:4; color:#fff;}

.hak-h-visual-copy h2{margin:0; font-size:clamp(38px,4.2vw,68px); line-height:1.16; font-weight:800; letter-spacing:-.075em; text-shadow:0 5px 22px rgba(0,0,0,.36);}

.hak-h-visual-copy h2 span{display:block; margin:0 0 10px; font-size:clamp(18px,1.7vw,28px); font-weight:500; letter-spacing:-.04em;}

.hak-h-visual-copy h2 em{display:block; margin:0 0 12px; font-size:clamp(15px,1.1vw,20px); font-style:italic; font-weight:400; letter-spacing:.02em; opacity:.9;}

.hak-h-visual-control{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:10px; z-index:5;}

.hak-h-visual-control .dot{display:block; width:12px; height:12px; margin:0; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.48); font-size:0; line-height:0; cursor:pointer; transition:.2s;}

.hak-h-visual-control .dot.active{width:30px; background:#fff;}

/* intro */
.hak-h-intro-section{padding:72px 0 28px; background:#fff;}

.hak-h-intro-box{
	display:grid;
	grid-template-columns:1.25fr .75fr;
	gap:28px;
	align-items:stretch;
}

.hak-h-intro-text{
	min-height:260px;
	padding:44px;
	border-radius:var(--hak-radius-lg);
	background:var(--hak-dark);
	color:#fff;
}

.hak-h-intro-text .eyebrow{
	margin:0 0 14px;
	color:color-mix(in srgb, var(--hak-main) 42%, white);
	font-size:14px;
	font-weight:800;
	letter-spacing:.08em;
}

.hak-h-intro-text h2{
	margin:0 0 18px;
	font-size:35px;
	line-height:1.28;
	font-weight:800;
	letter-spacing:-.065em;
}

.hak-h-intro-text p:last-child{
	margin:0;
	color:rgba(255,255,255,.78);
	font-size:17px;
	line-height:1.8;
	letter-spacing:-.035em;
}

.hak-h-intro-links{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
}

.hak-h-intro-links a{
	display:flex;
	align-items:flex-end;
	min-height:123px;
	padding:24px;
	border-radius:var(--hak-radius-md);
	background:#f2f5f9;
	color:#111;
	font-size:20px;
	font-weight:800;
	letter-spacing:-.05em;
	transition:transform .25s, background .25s, box-shadow .25s;
}

.hak-h-intro-links a:hover,
.hak-h-intro-links a:focus{
	background:#e7eef8;
	transform:translateY(-4px);
	box-shadow:0 14px 28px rgba(30,70,130,.12);
}

/* board */
.hak-h-board-section{
	padding:42px 0 70px;
	background:#fff;
}

.hak-h-board-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:30px;
	align-items:stretch;
}

.hak-h-card{
	min-width:0;
	height:100%;
	padding:38px;
	background:#fff;
	box-shadow:0 1px 10px rgb(12 11 11 / 12%);

	display:flex;
	flex-direction:column;
}

.hak-h-card-head,
.hak-h-section-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:18px;
	margin-bottom:28px;
}

.hak-h-card-head h2,
.hak-h-section-head h2{
	position:relative;
	margin:0;
	font-size:31px;
	line-height:1.2;
	font-weight:800;
	letter-spacing:-.065em;
	color:#333;
}

.hak-h-card-head h2:after,
.hak-h-section-head h2:after{
	content:"";
	display:block;
	width:42px;
	height:3px;
	margin-top:12px;
	border-radius:999px;
	background:var(--hak-main);
}

.hak-h-more{
	flex:0 0 82px;
	width:82px;
	height:36px;
	display:inline-flex;
	align-items:center;
	justify-content:flex-end;
	padding:0;
	border:0;
	background:none;
	color:#111;
	font-size:13px;
	font-weight:800;
	letter-spacing:.02em;
}

.hak-h-more:hover,
.hak-h-more:focus{
	color:var(--hak-main);
}

.hak-h-card-body{
	flex:1 1 auto;
	min-height:0;
}

/* =========================================================
   hak_h.css 추가 공통 블록: YOUTUBE / VIDEO CARD
   기존 hak_h.css의 board 영역 아래쪽, gallery 영역 위쪽에 추가 권장
========================================================= */

.hak-h-video-card{
	display:flex;
	flex-direction:column;
}

.hak-h-video-body{
	flex:1 1 auto;
	min-height:0;
	display:flex;
}

.hak-h-video{
	position:relative;
	width:100%;
	min-height:260px;
	aspect-ratio:16 / 9;
	overflow:hidden;
	background:#000;
}

.hak-h-video iframe{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	border:0;
}

@media (min-width:1025px){
	.hak-h-video-body{
		align-items:stretch;
	}

	.hak-h-video{
		height:100%;
		aspect-ratio:auto;
	}
}

@media (max-width:768px){
	.hak-h-video{
		min-height:0;
		aspect-ratio:16 / 9;
	}
}


/* notice */
.hak-h-notice-list{
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

.hak-h-notice-list li{
	display:grid !important;
	grid-template-columns:minmax(0,1fr) 82px;
	align-items:center;
	column-gap:20px;
	width:100% !important;
	float:none !important;
	margin:0 !important;
	padding:0 0 14px !important;
	border-bottom:1px solid #edf0f5;
	box-sizing:border-box;
	line-height:1.4 !important;
	font-size:16px !important;
}

.hak-h-notice-list li + li{
	margin-top:14px !important;
}

.hak-h-notice-list li a{
	display:block !important;
	min-width:0;
	width:100%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	margin:0;
	padding:0;
	border:0;
	color:#222;
	font-size:16px;
	letter-spacing:-.04em;
	line-height:1.4;
}

.hak-h-notice-list li a:hover{
	color:var(--hak-main);
}

.hak-h-notice-list li span{
	display:block !important;
	float:none !important;
	width:auto;
	margin:0;
	padding:0;
	border:0;
	text-align:right;
	color:var(--hak-muted);
	font-size:15px;
	line-height:1.4 !important;
}

/* event/photo */
.hak-h-event-list{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	list-style:none;
}

.hak-h-event-list ul{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	list-style:none;

	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px;
}

.hak-h-event-list li{
	min-width:0;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	border:1px solid #e8edf4;
	background:#fff;
	box-shadow:0 12px 28px rgba(17,24,39,.06);
	transition:.25s;
}

.hak-h-event-list li:hover{
	transform:translateY(-4px);
	box-shadow:0 18px 36px rgba(17,24,39,.11);
}

.hak-h-event-list li a{
	display:flex;
	flex-direction:column;
	height:85%;
	color:#111;
}

.hak-h-event-list li .item-info{text-align:center; padding:17px;}


.hak-h-event-list li img{
	display:block;
	width:100%;
	height:auto;
	flex:1 1 auto;
	min-height:0;
	object-fit:cover;
	object-position:center;
}

/* =========================================================
   GALLERY COMMON
   갤러리 공통 섹션 영역
========================================================= */

.hak-h-gallery-section{
	padding:72px 0;
	background:#fff;
}

.hak-h-gallery-section.is-light{
	background:var(--hak-light);
}

.hak-h-gallery-list{
	width:100%;
	margin:0;
	padding:0;
}


/* =========================================================
   GALLERY TYPE-A
   시각영상디자인학과 / 산업디자인학과 등
   구조:
   .hak-h-gallery-list
     └ ul.image-list
        └ li.item
           └ a
           └ div.item-info
              └ h3.item-title
              └ p.item-date
========================================================= */

.hak-h-gallery-list .image-list{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:24px;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

.hak-h-gallery-list .image-list .item{
	display:flex;
	flex-direction:column;
	min-width:0;
	height:100%;
	margin:0;
	padding:10px;
	background:#fff;
	border:1px solid #e8edf4;
	box-shadow:0 1px 10px rgb(12 11 11 / 12%);
	transition:.25s;
}

.hak-h-gallery-list .image-list .item:hover{
	transform:translateY(-4px);
	box-shadow:0 20px 40px rgba(17,24,39,.12);
}

.hak-h-gallery-list .image-list .item > a{
	display:block;
	width:100%;
	flex:0 0 auto;
}

.hak-h-gallery-list .image-list .item > a img{
	display:block;
	width:100%;
	aspect-ratio:4 / 3;
	height:auto;
	object-fit:cover;
	object-position:center;
}

.hak-h-gallery-list .image-list .item-info{
	flex:0 0 104px;
	height:104px;
	padding:16px 12px 10px;
	display:grid;
	grid-template-rows:48px 22px;
	align-content:center;
	row-gap:8px;
	text-align:center;
	background:#fff;
	border-top:1px solid #edf0f5;
}

.hak-h-gallery-list .image-list .item-title{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	white-space:normal;
	text-overflow:ellipsis;
	min-height:48px;
	max-height:48px;
	margin:0;
	color:#111;
	font-size:16px;
	line-height:24px;
	letter-spacing:-.04em;
}

.hak-h-gallery-list .image-list .item-date{
	height:22px;
	margin:0;
	color:var(--hak-muted);
	font-size:14px;
	line-height:22px;
	font-style:normal;
	text-align:center;
}


/* =========================================================
   GALLERY TYPE-B
   미디어콘텐츠창작학과 등
   구조:
   .hak-h-gallery-list
     └ div.item
        └ a
           └ span.img
              └ img
           └ span.info
              └ b.tit
              └ span.text
              └ span.date
========================================================= */

.hak-h-gallery-list > .item{
	min-width:0;
	background:#fff;
	border:1px solid #e8edf4;
	box-shadow:0 1px 10px rgb(12 11 11 / 12%);
	transition:.25s;
}

.hak-h-gallery-list:has(> .item){
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:24px;
}

.hak-h-gallery-list > .item:hover{
	transform:translateY(-4px);
	box-shadow:0 20px 40px rgba(17,24,39,.12);
}

.hak-h-gallery-list > .item > a{
	display:flex;
	flex-direction:column;
	height:100%;
	color:#111;
}

.hak-h-gallery-list > .item .img{
	display:block;
	width:100%;
	aspect-ratio:4 / 3;
	overflow:hidden;
	background:#f4f6f8;
}

.hak-h-gallery-list > .item .img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.hak-h-gallery-list > .item .info{
	flex:0 0 118px;
	height:118px;
	padding:18px 16px 16px;
	display:grid;
	grid-template-rows:48px 22px;
	align-content:center;
	row-gap:8px;
	text-align:center;
	background:#fff;
	border-top:1px solid #edf0f5;
}

.hak-h-gallery-list > .item .tit{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	white-space:normal;
	text-overflow:ellipsis;
	min-height:48px;
	max-height:48px;
	margin:0;
	color:#111;
	font-size:16px;
	line-height:24px;
	font-weight:100;
	letter-spacing:-.04em;
}

.hak-h-gallery-list > .item .text{
	display:none;
}

.hak-h-gallery-list > .item .date{
	display:block;
	height:22px;
	margin:0;
	color:var(--hak-muted);
	font-size:14px;
	line-height:22px;
	font-style:normal;
	text-align:center;
}


/* =========================================================
   GALLERY RESPONSIVE
========================================================= */

@media (max-width:1024px){
	.hak-h-gallery-list .image-list,
	.hak-h-gallery-list:has(> .item){
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:768px){
	.hak-h-gallery-list .image-list,
	.hak-h-gallery-list:has(> .item){
		grid-template-columns:1fr;
	}

	.hak-h-gallery-list .image-list .item > a img,
	.hak-h-gallery-list > .item .img{
		aspect-ratio:16 / 10;
	}
}

/* shortcut */
.hak-h-shortcut-section{
	padding:74px 0;
}

.hak-h-shortcut-list{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
	margin:0;
	padding:0;
	list-style:none;
}

.hak-h-shortcut-list li{
	min-width:0;
	margin:0;
	padding:0;
}

.hak-h-shortcut-list a{
	position:relative;
	display:block;
	height:220px;
	overflow:hidden;
	border-radius:5px;
	background:#000;
	color:#fff;
}

@media (max-width:1024px){
	.hak-h-gallery-list .image-list{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:768px){
	.hak-h-gallery-list .image-list{
		grid-template-columns:1fr;
	}

	.hak-h-gallery-list .image-list .item > a img{
		aspect-ratio:16 / 10;
	}
}

.hak-h-shortcut-list a:after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(0deg,rgba(0,0,0,.66),rgba(0,0,0,.08) 60%);
	z-index:1;
}

.hak-h-shortcut-list img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:.78;
	transition:.35s;
}

.hak-h-shortcut-list a:hover img,
.hak-h-shortcut-list a:focus img{
	transform:scale(1.06);
	opacity:.55;
}

.hak-h-shortcut-list span{
	position:absolute;
	left:24px;
	right:24px;
	bottom:54px;
	z-index:2;
	color:#fff;
	font-size:24px;
	font-weight:800;
	letter-spacing:-.055em;
}

.hak-h-shortcut-list em{
	position:absolute;
	left:24px;
	bottom:25px;
	z-index:2;
	color:rgba(255,255,255,.82);
	font-size:14px;
	font-style:normal;
	font-weight:700;
}

/* sns */
.hak-h-sns-section{
	padding:46px 0 82px;
	background:#fff;
}

.hak-h-sns-list{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:18px;
	margin:0;
	padding:0;
	list-style:none;
}

.hak-h-sns-list li{
	min-width:0;
	overflow:hidden;
	border-radius:20px;
	background:#f2f4f7;
}

.hak-h-sns-list a{
	display:block;
}

.hak-h-sns-list img{
	display:block;
	width:100%;
	height:auto;
	transition:.25s;
}

.hak-h-sns-list a:hover img,
.hak-h-sns-list a:focus img{
	transform:scale(1.04);
}

@media (max-width:1024px){
	.hak-h-visual{
		height:560px;
	}

	.hak-h-intro-box,
	.hak-h-board-grid{
		grid-template-columns:1fr;
	}

	.hak-h-card{
		min-height:auto;
	}

	.hak-h-gallery-list ul,
	.hak-h-gallery-list .obj{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.hak-h-shortcut-list{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:768px){
	.hak-h-inner{
		width:90%;
	}

	.hak-h-visual{
		height:480px;
	}

	.hak-h-visual-copy h2{
		font-size:34px;
	}

	.hak-h-visual-copy h2 span{
		font-size:17px;
	}

	.hak-h-visual-copy h2 em{
		font-size:14px;
	}

	.hak-h-intro-section{
		padding:48px 0 20px;
	}

	.hak-h-intro-text{
		min-height:auto;
		padding:30px 24px;
		border-radius:22px;
	}

	.hak-h-intro-text h2{
		font-size:26px;
	}

	.hak-h-intro-text p:last-child{
		font-size:15px;
	}

	.hak-h-intro-links{
		grid-template-columns:1fr 1fr;
	}

	.hak-h-intro-links a{
		min-height:92px;
		padding:18px;
		border-radius:18px;
		font-size:17px;
	}

	.hak-h-board-section,
	.hak-h-gallery-section{
		padding:42px 0;
	}

	.hak-h-card{
		padding:28px 22px;
		border-radius:22px;
	}

	.hak-h-card-head h2,
	.hak-h-section-head h2{
		font-size:25px;
	}

	.hak-h-event-list ul,
	.hak-h-gallery-list ul,
	.hak-h-gallery-list .obj{
		grid-template-columns:1fr;
	}

	.hak-h-event-list li img,
	.hak-h-gallery-list img{
		height:225px;
	}

	.hak-h-shortcut-list{
		grid-template-columns:1fr;
	}

	.hak-h-shortcut-list a{
		height:180px;
	}

	.hak-h-sns-list{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:480px){
	.hak-h-visual{
		height:430px;
	}

	.hak-h-intro-links{
		grid-template-columns:1fr;
	}

	.hak-h-card-head,
	.hak-h-section-head{
		align-items:flex-start;
		flex-direction:column;
		gap:14px;
	}

	.hak-h-more{
		height:34px;
	}
}