@charset "utf-8";
/* =====================================================
   메인 페이지 — main/css/main.css (main.png 기준)
   ===================================================== */

/* 히어로 배경: 실제 이미지 cover 배치 (네이비는 로딩 전 fallback) */
.mainHero .hero-bg {border:0; background:#000 center/cover no-repeat;}
.mainHero .hero-bg::after {content:''; color:transparent;}
.mainHero .hero-dim {position:absolute; inset:0; background:rgba(0,0,0,.3);}

/* Research Areas 카드 이미지 placeholder — 밝은 학술 이미지 느낌 */
.research-card .rc-img {background:linear-gradient(135deg,#eef2f6,#e2e9f0); border-color:#e2e9f0;}
.research-card .rc-img::after {content:'IMAGE'; color:#b7c4d1;}
.research-card .rc-img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;}
/* research 슬라이더가 그리드 안에서 콘텐츠 폭 아래로 줄어들 수 있게 → 모바일 가로 넘침 방지 */
.research-left, .research-right {min-width:0;}
.researchSlider .swiper {max-width:100%; overflow:hidden;}
/* Research 카드 설명: 3줄 넘으면 말줄임(…) */
.research-card .rc-list {display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:#777; line-height:1.7; word-break:keep-all;}

/* 갤러리 이미지: 비율 무관 박스 꽉 채우기(cover) → 모든 칸 동일 크기 */
/* 그리드 칸 균등화: 긴 제목(nowrap)이 칸을 벌리지 않도록 min-width:0 (이게 핵심) */
.gallery-list > li {min-width:0;}
.gallery-list .g-img {position:relative; border:0; background:none;}
.gallery-list .g-img::after {display:none;}
/* img를 absolute로 띄워 박스 높이에 영향 X → 모든 칸이 aspect-ratio(4:3)로 동일 */
.gallery-list .g-img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
/* hover 시 이미지 확대 (박스 overflow:hidden으로 박스 안에서만 커짐) */
.gallery-list .g-img:hover img {transform:scale(1.08);}

/* ── 섹션 타이틀 (메인 전용) ── */
.sec-head {display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px;}
.sec-title {color:var(--c_base1); font-size:var(--fs36); font-weight:800; line-height:1.2; letter-spacing:-1px;}
.sec-title .kr {display:block; color:var(--c_base2); font-size:var(--fs18); font-weight:600; margin-bottom:12px; letter-spacing:0;}
.sec-desc {color:#666; font-size:var(--fs16); line-height:1.7; max-width:520px;}

/* ── 버튼 (메인 전용) ── */
.btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 28px; border-radius:8px; font-size:var(--fs14); font-weight:400; transition:all .25s; cursor:pointer;}
.btn.point {background:var(--c_base2); color:#fff; border:1px solid var(--c_base2);}
.btn.point:hover {background:#fff; color:var(--c_base2); border-color:var(--c_base2);}
.btn.point:hover .arw {background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B5C43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");}
.btn.navy {background:var(--c_base1); color:#fff;}
.btn.navy:hover {filter:brightness(.88);}
.btn.line {background:transparent; border:1px solid var(--border1); color:var(--c_base1);}
.btn.line:hover {border-color:var(--c_base1); background:var(--c_base1); color:#fff;}
.btn.lg {height:56px; padding:0 36px; font-size:var(--fs18);}
.btn .arw {width:16px; height:16px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;}

/* ── Publications 바로가기 링크 (메인 전용) ── */
.pub-links {display:flex; gap:6px; flex-wrap:wrap;}
.pub-links a {display:inline-flex; align-items:center; height:44px; padding:0 22px; border-radius:8px; background:#fff; color:#555; font-size:var(--fs15); font-weight:600; transition:all .25s;}
.pub-links a:hover {background:var(--c_base1); color:#fff;}

/* ── 빈 이미지 플레이스홀더 (공용 유틸 · 이미지 수령 후 교체) ── */
.img-empty {position:relative; width:100%; background:var(--bg1); border:1px solid var(--border1); overflow:hidden;}
.img-empty.ratio-43 {aspect-ratio:4/3;}
.img-empty.ratio-11 {aspect-ratio:1/1;}
.img-empty.ratio-45 {aspect-ratio:4/5;}
.img-empty.ratio-169 {aspect-ratio:16/9;}

/* ── 논문/발행물 리스트 카드 (메인 Publications) ── */
.pub-card {display:block; background:rgba(255,255,255,.4); border-radius:10px; padding:32px; transition:all .5s;}
.pub-card:hover {background: #fff; box-shadow:40px 40px 40px 0 rgba(0,0,0,0.08); transform:translateY(-4px);}
.pub-card:hover .year {color:var(--c_base2);}
.pub-card:hover .meta .ic::before {opacity:1;}
.pub-card .year {color:#000; font-size:var(--fs14); font-weight:700; margin-bottom:14px; transition:all .5s;}
.pub-card .tit {color:#1a1a1a; font-size:var(--fs18); font-weight:500; line-height:1.5; margin-bottom:22px; min-height:3em; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
.pub-card .meta {display:flex; align-items: center; gap:8px; color:#777; font-size:var(--fs14); line-height:1.1; padding-top:18px;}
.pub-card .meta + .meta {padding-top:10px; border-top:0;}
.pub-card .meta .ic {position:relative; flex:none; width:28px; height:28px; margin-top:1px; background-size:contain; background-repeat:no-repeat;}
.pub-card .meta .ic::before {content:''; position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; opacity:0; transition:opacity .5s;}
.pub-card .meta .ic.author {background-image:url(/images/main/ico_people.svg);}
.pub-card .meta .ic.author::before {background-image:url(/images/main/ico_people_on.svg);}
.pub-card .meta .ic.book {background-image:url(/images/main/ico_paper.svg);}
.pub-card .meta .ic.book::before {background-image:url(/images/main/ico_paper_on.svg);}
/* 저자(author) 라인: 2줄까지만 + 말줄임 */
.pub-card .meta .ic.author + span {display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ── 날짜 앞 캘린더 아이콘 (g-date=일반 / nf-date=_on) ── */
.gallery-list .g-date, .notice-feat .nf-date {display:flex; align-items:center; gap:6px;}
.gallery-list .g-date::before {content:''; flex:none; width:16px; height:16px; background:url(/images/main/ico_calender.svg) center/contain no-repeat;}
.notice-feat .nf-date::before {content:''; flex:none; width:16px; height:16px; background:url(/images/main/ico_calender_on.svg) center/contain no-repeat;}

/* 공지 리스트: 텍스트 영역이 flex 안에서 줄어들 수 있게 → 요약 말줄임·줄바꿈 정상화(가로 넘침 방지) */
.notice-list .nl-txt {flex:1; min-width:0;}
/* 공지 텍스트: 긴 단어/URL도 강제 줄바꿈 + 그리드/플렉스 축소 허용 → 가로 넘침 방지 */
.notice-grid, .notice-grid > *, .notice-list .nl-item {min-width:0;}
.notice-list .nl-tit, .notice-list .nl-sum,
.notice-feat .nf-tit, .notice-feat .nf-desc {min-width:0; overflow-wrap:anywhere;}

/* ── 데스크탑 (1200px~) ── */
@media screen and (min-width: 1200px), print {

	/* HERO */
	.mainHero {position:relative; height:100vh; min-height:760px; overflow:hidden;}
	.mainHero .swiper, .mainHero .swiper-wrapper, .mainHero .swiper-slide {height:100%;}
	.mainHero .swiper-slide {position:relative;}
	.mainHero .hero-bg {position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;}
	.mainHero .hero-inner {position:absolute; left:0; right:0; top:50%; transform:translateY(-46%); z-index:5;}
	.mainHero .hero-title {color:#fff; font-size:var(--fs50); font-weight:700; line-height:1.18;}
	.mainHero .hero-sub {color:#fff; font-size:var(--fs30); font-weight:700; margin-top:70px;}
	.mainHero .hero-desc {color:rgba(255,255,255,.82); font-size:var(--fs18); line-height:1.85; margin-top:20px;}
	.mainHero .swiper-pagination {left:50%; right:auto; bottom:auto; top:50%; width:100%; max-width:1400px; padding:0; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
	.mainHero .swiper-pagination .swiper-pagination-bullet {width:10px; height:10px; background:#fff; opacity:.5; margin:0 !important;}
	.mainHero .swiper-pagination .swiper-pagination-bullet-active {opacity:1; background:#fff;}

	/* RESEARCH AREAS */
	.mainResearch {position:relative; z-index:2;}
	.research-grid {display:grid; grid-template-columns:340px 1fr; gap:80px; align-items:start;}
	.research-left .sec-desc {margin:24px 0 34px;}
	.research-right {margin-top:-195px; position:relative; z-index:5;}
	.researchSlider {position:relative;}
	/* 간격은 CSS 한 곳(슬라이드 padding)으로만 제어 → Swiper spaceBetween:0 고정.
	   슬라이드 padding이 카드 사이 간격(좌우 12px=합 24px) + 그림자 여백(하단 30px) 담당.
	   3번째 카드는 정확히 100% 지점 밖으로 나가 overflow:hidden에 잘림(=삐져나옴 없음). */
	/* 세로 padding으로 그림자 여백 확보(+음수 margin으로 위치 상쇄), 가로는 딱 잘라 삐져나옴 방지.
	   간격은 슬라이드 좌우 padding(12px×2=24px)만으로 제어 → Swiper spaceBetween:0 */
	/* 컨테이너: 테두리 없이 '그림자만' (자기 그림자는 overflow:hidden에 안 잘림).
	   카드: 슬라이드 좌우 padding(=간격 24px)으로 떨어뜨려 각자 개별 border+radius. */
	.researchSlider .swiper {position:relative; overflow:hidden; border-radius:12px; box-shadow:40px 40px 40px 0 rgba(0,0,0,0.05);padding-left: 1px;}
	.researchSlider .swiper-slide {width:50%; height:auto;}
	.research-card {height:100%; background:#fff; border:1px solid var(--border1); border-radius:12px; padding:60px; margin-left: -1px;}
	.research-card .rc-tit {color:#000; font-size:var(--fs26); line-height: 1; font-weight:800; margin-bottom:22px;}
	.research-card .rc-img {height:210px; aspect-ratio:auto; border-radius:8px; margin-bottom:22px;}
	.research-card .rc-list {font-size:var(--fs16);}
	.research-card .rc-list li {position:relative; padding-left:14px; color:#777; font-size:var(--fs16);}
	.research-card .rc-list li::before {content:''; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:#C3C3C3;}
	.researchSlider .r-prev, .researchSlider .r-next {position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:6px; background:#fff center/auto no-repeat; border:1px solid var(--border1); z-index:10; cursor:pointer;}
	/* prev(왼쪽): 시작 시 비활성(preview.svg) → 슬라이드 후 활성(preview_on.svg).
	   Swiper가 첫 슬라이드에서 .swiper-button-disabled 클래스를 자동 부여함 */
	.researchSlider .r-prev {left:-51px; background-image:url(/images/main/preview_on.svg);}
	.researchSlider .r-prev.swiper-button-disabled {background-color: #DBDBDB; background-image:url(/images/main/preview.svg);}
	.researchSlider .r-next {right:-50px; background-image:url(/images/main/next.svg);}

	/* PUBLICATIONS */
	.mainPub {background:var(--bg1);}
	.mainPub .pub-links {padding-bottom:4px;}
	.pub-list {display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}

	/* NOTICE */
	.mainNotice {background: #F9F9F9;}
	.notice-grid {display:grid; grid-template-columns:400px 1fr; gap:26px;}
	.notice-feat {height:274px; display:flex; flex-direction:column; background:var(--c_base2); border-radius:10px; padding:38px 36px; color:#fff; transition:all .5s;}
	.notice-feat:hover {transform:translateY(-4px); box-shadow: 40px 40px 40px 0 rgba(0, 0, 0, 0.08);;}
	.notice-feat .tag {font-size:var(--fs14); font-weight:700; color:#fff; margin-bottom:16px;}
	.notice-feat .nf-tit {color:#fff; font-size:var(--fs20); font-weight:700; line-height:1.45; margin-bottom:12px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;}
	.notice-feat .nf-desc {font-size:var(--fs15); line-height:1.7; color:rgba(255,255,255,.85); flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;}
	.notice-feat .nf-date {font-size:var(--fs14); color:rgba(255,255,255,.8); margin-top:14px;}
	.notice-list {display:flex; flex-direction:column; gap:20px; height:274px;}
	.notice-list .nl-item {flex:1; display:flex; gap:34px; align-items:center; background:#fff; border:1px solid var(--border1); border-radius:10px; padding:24px 36px; transition:all .3s;}
	.notice-list .nl-item:hover {box-shadow:0 14px 34px rgba(13,37,54,.08); border-color:var(--c_base2);}
	.notice-list .nl-date {flex:0 0 auto; text-align:center; min-width:64px;}
	.notice-list .nl-date strong {display:block; color:var(--c_base2); font-size:var(--fs36); font-weight:800; line-height:1;}
	.notice-list .nl-date span {color:#999; font-size:var(--fs13);}
	.notice-list .nl-tit {color:#1a1a1a; font-size:var(--fs18); font-weight:700; margin-bottom:8px;}
	.notice-list .nl-sum {color:#888; font-size:var(--fs14); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

	/* GALLERY */
	.gallery-list {display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
	.gallery-list .g-img {border-radius:10px; margin-bottom:18px;}
	.gallery-list .g-tit {color:#222; font-size:var(--fs16); font-weight:600; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.gallery-list .g-date {color:#999; font-size:var(--fs14);}
}

/* ── 태블릿 (~1199px) ── */
@media screen and (max-width: 1199px) {
	.mainHero {position:relative; height:auto; min-height:620px; padding:140px 30px 80px; overflow:hidden;}
	.mainHero .swiper {position:absolute; inset:0;}
	.mainHero .swiper, .mainHero .swiper-wrapper, .mainHero .swiper-slide {height:100%;}
	.mainHero .hero-bg {position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;}
	.mainHero .hero-inner {position:relative; z-index:5; padding:0;}
	.mainHero .hero-title {color:#fff; font-size:var(--fs48); font-weight:800; line-height:1.2; letter-spacing:-1px;}
	.mainHero .hero-sub {color:#fff; font-size:var(--fs22); font-weight:700; margin-top:26px;}
	.mainHero .hero-desc {color:rgba(255,255,255,.82); font-size:var(--fs16); line-height:1.8; margin-top:14px;}
	.mainHero .swiper-pagination {bottom:30px;}
	.mainHero .swiper-pagination .swiper-pagination-bullet {background:#fff; opacity:.5;}
	.mainHero .swiper-pagination .swiper-pagination-bullet-active {opacity:1;}

	.sec-head {flex-direction:column; align-items:flex-start; margin-bottom:32px;}
	.research-grid {display:grid; grid-template-columns:1fr; gap:36px;}
	.research-left .sec-desc {margin:18px 0 26px;}
	.research-card {background:#fff; border:1px solid var(--border1); border-radius:10px; padding:30px;}
	.research-card .rc-tit {color:var(--c_base1); font-size:var(--fs22); font-weight:800; margin-bottom:18px;}
	.research-card .rc-img {height:200px; aspect-ratio:auto; border-radius:8px; margin-bottom:18px;}
	.research-card .rc-list {font-size:var(--fs15);}
	.research-card .rc-list li {position:relative; padding-left:14px; color:#777; font-size:var(--fs15);}
	.research-card .rc-list li::before {content:''; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:var(--c_base2);}
	.researchSlider {position:relative;}
	.researchSlider .swiper {overflow:hidden;}
	.researchSlider .swiper-slide {width:100%; height:auto;}
	.researchSlider .r-prev, .researchSlider .r-next {display:none;}

	.mainPub {background:var(--bg1);}
	.pub-list {display:grid; grid-template-columns:1fr; gap:18px;}

	.notice-grid {display:grid; grid-template-columns:1fr; gap:18px;}
	.notice-feat {display:flex; flex-direction:column; background:var(--c_base2); border-radius:10px; padding:32px; color:#fff;}
	.notice-feat .tag {font-size:var(--fs14); color:#fff; font-weight:700; opacity:.85; margin-bottom:18px;}
	.notice-feat .nf-tit {font-size:var(--fs20); color:#fff; font-weight:700; line-height:1.45; margin-bottom:14px;}
	.notice-feat .nf-desc {font-size:var(--fs15); line-height:1.7; color:rgba(255,255,255,.85);}
	.notice-feat .nf-date {font-size:var(--fs14); color:rgba(255,255,255,.8); margin-top:20px;}
	.notice-list {display:flex; flex-direction:column; gap:14px;}
	.notice-list .nl-item {display:flex; gap:24px; align-items:center; background:#fff; border:1px solid var(--border1); border-radius:10px; padding:24px 28px;}
	.notice-list .nl-date {flex:0 0 auto; text-align:center; min-width:56px;}
	.notice-list .nl-date strong {display:block; color:var(--c_base2); font-size:var(--fs32); font-weight:800; line-height:1;}
	.notice-list .nl-date span {color:#999; font-size:var(--fs13);}
	.notice-list .nl-tit {color:#1a1a1a; font-size:var(--fs18); font-weight:700; margin-bottom:6px;}
	.notice-list .nl-sum {color:#888; font-size:var(--fs14); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

	.gallery-list {display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
	.gallery-list .g-img {border-radius:8px; margin-bottom:14px;}
	.gallery-list .g-tit {color:#222; font-size:var(--fs16); font-weight:600; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.gallery-list .g-date {color:#999; font-size:var(--fs14);}
}

/* ── 모바일 (~767px) ── */
@media screen and (max-width: 767px) {
	.mainHero {min-height:540px; padding:120px 20px 70px;}
	.mainHero .hero-title {font-size:var(--fs40);}
	.mainHero .hero-sub {font-size:var(--fs20); margin-top:20px;}
	.sec-title {font-size:var(--fs28);}
	.btn {height:46px; padding:0 22px;}
	.pub-card {padding:24px;}
	.notice-list .nl-item {gap:18px; padding:20px;}
	.notice-list .nl-date strong {font-size:var(--fs28);}
	/* 모바일: 제목·요약이 한 줄 고정(nowrap)이라 안 줄던 것 → 여러 줄로 줄바꿈 */
	.notice-list .nl-tit {white-space:normal; word-break:keep-all;}
	.notice-list .nl-sum {white-space:normal; word-break:keep-all; text-overflow:clip; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;}
	.gallery-list {grid-template-columns:repeat(2,1fr); gap:14px;}
}