@charset "utf-8";

/* 시안 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* 공통 디자인 기준 */
:root {
  --point1:#2563d4;  /* 포인트 컬러 1 : 블루 (강조, hover) */
  --point2:#0d1f45;  /* 포인트 컬러 2 : 네이비 (푸터, 버튼 hover) */
  --bg-box:#f7f9fd;  /* 섹션 박스 배경 : 서브페이지는 흰 배경 위에 이 색 박스를 쓴다 (메인 페이지 배경색과 동일) */
  --txt:#17181c;     /* 기본 텍스트 */
  --txt-sub:#8a93b8; /* 보조 텍스트 (라벨, 날짜, 설명) */
  --line:#dce4f2;    /* 구분선 */
  --line-btn:#bfcde6;/* 버튼 테두리 */
  --ls-kr:-0.08em;   /* 한글(Pretendard) 자간 */
  --sec-gap:clamp(50px, 8vw, 150px); /* 섹션 간격 : PC 150px, 최소 50px */
}
.kr { letter-spacing:var(--ls-kr); } /* 한글 텍스트용 */

/* 메인 시안 */
body { margin:0; background:#f7f9fd; font-family:'Montserrat','Pretendard Variable','Pretendard',sans-serif; }
a { color:#2a5b94; text-decoration:none; }
a:hover { color:#1d4270; }
@keyframes drift1 { 0%{transform:translate(0,0) rotate(-38deg);} 50%{transform:translate(14px,-18px) rotate(-30deg);} 100%{transform:translate(-6px,10px) rotate(-42deg);} }
@keyframes drift2 { 0%{transform:translate(0,0) rotate(142deg);} 50%{transform:translate(-16px,14px) rotate(150deg);} 100%{transform:translate(8px,-10px) rotate(136deg);} }
@keyframes drift3 { 0%{transform:translate(0,0) rotate(0deg);} 100%{transform:translate(10px,12px) rotate(24deg);} }
@keyframes drift4 { 0%{transform:translate(0,0) rotate(0deg);} 100%{transform:translate(-12px,-8px) rotate(-30deg);} }
@keyframes spin-slow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
[data-reveal] { opacity:0; transform:translateY(44px); transition:opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
[data-reveal].revealed { opacity:1; transform:translateY(0); }
.rcell { transition: background 0.4s ease; }
.rcell:hover { background:rgba(37,99,212,0.82) !important; }
.rcell div, .rcell span { transition: color 0.4s ease; }
.rcell:hover div, .rcell:hover span { color:#ffffff !important; }
.rcell .rc-arrow { transition: transform 0.4s ease, stroke 0.4s ease, color 0.4s ease; }
.rcell:hover .rc-arrow { transform: translate(4px, -4px); stroke:#ffffff !important; }
@keyframes letter-in { from { transform:translateY(118%); } to { transform:translateY(0); } }
@keyframes fade-up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes mv-zoom { from { transform:scale(1.2); } to { transform:scale(1); } } /* 메인비주얼 배경 : 1.2배에서 5초 동안 1배로 (등장 모션) */
.pubrow { transition: background 0.35s ease; }
.pubrow:hover { background:var(--point1); }
.pubrow div, .pubrow span, .pubrow i { transition: color 0.35s ease; }
.pubrow:hover div, .pubrow:hover span, .pubrow:hover i { color:#ffffff !important; }
.gitem .g-img { transition: transform 0.5s ease; }
.gitem:hover .g-img { transform: scale(1.1); }
.gitem .g-title { transition: color 0.35s ease; }
.gitem:hover .g-title { color:var(--point1) !important; }
.gitem::after { content:''; position:absolute; bottom:-1px; left:0; height:2px; width:0; background:var(--point1); transition:width 0.45s ease; }
.gitem:hover::after { width:100%; }
.nrow { transition: background 0.35s ease; }
.nrow:hover { background:var(--point1); }
.nrow div { transition: color 0.35s ease; }
.nrow:hover div { color:#ffffff !important; }
.nrow .n-plus { transition: color 0.35s ease, transform 0.35s ease; }
.nrow:hover .n-plus { color:#ffffff !important; transform:rotate(90deg); }
.rmbtn { position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; gap:10px; border:1px solid #777; border-radius:8px; padding:20px 30px; font-size:20px; font-weight:600; color:#777; margin-top:50px; cursor:pointer; transition:color 0.4s ease, border-color 0.4s ease; } /* READ MORE 버튼 공통 */
.rmbtn::before { content:''; position:absolute; inset:0; background:var(--point2); transform:scaleY(0); transform-origin:bottom; transition:transform 0.4s ease; z-index:-1; }
.rmbtn:hover::before { transform:scaleY(1); }
.rmbtn:hover { color:#ffffff !important; border-color:var(--point2) !important; }
.rmbtn i { transition: transform 0.4s ease, color 0.4s ease; }
.rmbtn:hover i { transform:rotate(45deg); color:#ffffff !important; }
.nab { transition: background 0.35s ease, border-color 0.35s ease; }
.nab i { transition: color 0.35s ease, transform 0.35s ease; }
.nab:hover { background:var(--point1); border-color:var(--point1); }
.nab:hover i { color:#ffffff !important; transform:rotate(45deg); }

/* ==========================================================
   인라인 style 에서 옮긴 스타일
   ========================================================== */

/* 공통 (헤더는 navi.css) */
.lab_wrap { background:#f7f9fd; color:var(--txt); min-height:100vh; overflow-x:clip; } /* 글자색은 여기서 상속되므로 하위 요소에 다시 주지 않는다 */
.minw0 { min-width:0; }

/* 메인 비주얼 */
.mv { position:relative; padding:clamp(150px, 20vh, 220px) 50px 60px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; overflow:hidden; }
.mv_bg { position:absolute; inset:0; background-image:url("../images/main/main_visual.jpg"); background-size:cover; background-position:center; z-index:0; transform-origin:center; animation:mv-zoom 5s cubic-bezier(0.16,1,0.3,1) both; will-change:transform; }
@media (prefers-reduced-motion: reduce) { .mv_bg { animation:none; } }
.mv_dim { position:absolute; inset:0; background:rgba(7,15,35,0.6); z-index:0; }
.mv_inner { position:relative; z-index:1; max-width:1700px; width:100%; margin:-100px auto 0; }
.mv_tit { font-size:clamp(46px, 6.2vw, 112px); font-weight:600; letter-spacing:-0.03em; line-height:1.08; color:#ffffff; white-space:nowrap; }
.mv_tit_line { overflow:hidden; }
.mv_letter { display:inline-block; animation:letter-in 1.1s cubic-bezier(0.16,1,0.3,1) backwards; }
.mv_tit_line1 > .mv_letter:nth-child(1) { animation-delay:0.20s; }
.mv_tit_line1 > .mv_letter:nth-child(2) { animation-delay:0.23s; }
.mv_tit_line1 > .mv_letter:nth-child(3) { animation-delay:0.26s; }
.mv_tit_line1 > .mv_letter:nth-child(4) { animation-delay:0.29s; }
.mv_tit_line1 > .mv_letter:nth-child(5) { animation-delay:0.32s; }
.mv_tit_line1 > .mv_letter:nth-child(6) { animation-delay:0.35s; }
.mv_tit_line1 > .mv_letter:nth-child(7) { animation-delay:0.38s; }
.mv_tit_line1 > .mv_letter:nth-child(8) { animation-delay:0.41s; }
.mv_tit_line1 > .mv_letter:nth-child(10) { animation-delay:0.44s; }
.mv_tit_line1 > .mv_letter:nth-child(11) { animation-delay:0.47s; }
.mv_tit_line1 > .mv_letter:nth-child(12) { animation-delay:0.50s; }
.mv_tit_line1 > .mv_letter:nth-child(14) { animation-delay:0.53s; }
.mv_tit_line1 > .mv_letter:nth-child(15) { animation-delay:0.56s; }
.mv_tit_line1 > .mv_letter:nth-child(16) { animation-delay:0.59s; }
.mv_tit_line1 > .mv_letter:nth-child(17) { animation-delay:0.62s; }
.mv_tit_line1 > .mv_letter:nth-child(18) { animation-delay:0.65s; }
.mv_tit_line1 > .mv_letter:nth-child(20) { animation-delay:0.68s; }
.mv_tit_line1 > .mv_letter:nth-child(21) { animation-delay:0.71s; }
.mv_tit_line2 > .mv_letter:nth-child(1) { animation-delay:0.80s; }
.mv_tit_line2 > .mv_letter:nth-child(2) { animation-delay:0.83s; }
.mv_tit_line2 > .mv_letter:nth-child(3) { animation-delay:0.86s; }
.mv_tit_line2 > .mv_letter:nth-child(4) { animation-delay:0.89s; }
.mv_tit_line2 > .mv_letter:nth-child(5) { animation-delay:0.92s; }
.mv_tit_line2 > .mv_letter:nth-child(6) { animation-delay:0.95s; }
.mv_tit_line2 > .mv_letter:nth-child(7) { animation-delay:0.98s; }
.mv_tit_line2 > .mv_letter:nth-child(8) { animation-delay:1.01s; }
.mv_tit_line2 > .mv_letter:nth-child(9) { animation-delay:1.04s; }
.mv_tit_line2 > .mv_letter:nth-child(10) { animation-delay:1.07s; }
.mv_tit_line2 > .mv_letter:nth-child(12) { animation-delay:1.10s; }
.mv_tit_line2 > .mv_letter:nth-child(13) { animation-delay:1.13s; }
.mv_tit_line2 > .mv_letter:nth-child(14) { animation-delay:1.16s; }
.mv_tit_line2 > .mv_letter:nth-child(15) { animation-delay:1.19s; }
.mv_tit_line2 > .mv_letter:nth-child(16) { animation-delay:1.22s; }
.mv_tit_line2 > .mv_letter:nth-child(17) { animation-delay:1.25s; }
.mv_tit_line2 > .mv_letter:nth-child(18) { animation-delay:1.28s; }
.mv_tit_line2 > .mv_letter:nth-child(19) { animation-delay:1.31s; }
.mv_tit_line2 > .mv_letter:nth-child(20) { animation-delay:1.34s; }
.mv_tit_line2 > .mv_letter:nth-child(21) { animation-delay:1.37s; }
.mv_tit_line2 > .mv_letter:nth-child(22) { animation-delay:1.40s; }
.mv_space { display:inline-block; width:0.28em; }
.mv_sub { font-size:36px; font-weight:600; letter-spacing:var(--ls-kr); color:rgba(255,255,255,0.85); margin-top:80px; animation:fade-up 1.2s ease 1.5s backwards; }

/* 섹션 공통 타이틀 */
.sec_label { font-size:22px; font-weight:600; color:var(--txt-sub); margin-bottom:20px; }
.sec_tit { font-size:clamp(46px, 3.6vw, 70px); font-weight:600; letter-spacing:-0.02em; line-height:1.15; }

/* RESEARCH */
.mr_top { padding:var(--sec-gap) 50px 120px; max-width:1700px; margin:0 auto; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:60px; align-items:end; }
.mr_list_wrap { border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }
.mr_obj { position:absolute; right:4vw; bottom:100%; transform:translate(0, 30%); width:min(46vw, 680px); aspect-ratio:1; opacity:0.45; z-index:0; pointer-events:auto; }
.mr_obj_svg { width:100%; height:100%; touch-action:none; }
.mr_obj_svg g[class^="mr_obj_g"] { transform-origin:center; transform-box:fill-box; }
.mr_obj_g1 { animation:drift1 9s ease-in-out infinite alternate; }
.mr_obj_g2 { animation:drift2 11s ease-in-out infinite alternate; }
.mr_obj_g3 { animation:drift3 8s ease-in-out infinite alternate; }
.mr_obj_g4 { animation:drift4 10s ease-in-out infinite alternate; }
.mr_obj_g5 { animation:spin-slow 26s linear infinite; }
.mr_obj_g6 { animation:spin-slow 32s linear infinite reverse; }
.mr_obj_g7 { animation:drift4 12s ease-in-out infinite alternate; }
.mr_list { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); }
.mr_item { border-left:1px solid var(--line); padding:50px; display:flex; flex-direction:column; min-height:320px; box-sizing:border-box; cursor:pointer; }
.mr_item:first-child { border-left:none; }
.mr_list > .rcell:nth-child(1) { transition-delay:0.00s; }
.mr_list > .rcell:nth-child(2) { transition-delay:0.15s; }
.mr_list > .rcell:nth-child(3) { transition-delay:0.30s; }
.mr_item_top { display:flex; justify-content:space-between; align-items:flex-start; }
.mr_item_num { font-size:30px; color:var(--txt-sub); }
.mr_item_arrow { flex:none; }
.mr_item_tit { font-size:clamp(28px, 2.2vw, 40px); font-weight:600; line-height:1.25; margin-top:30px; }
.mr_item_tit.is_1line { margin-top:calc(30px + 1.25em); } /* 한 줄 타이틀은 두 줄 타이틀과 설명 위치를 맞춘다 */
.mr_item_desc { font-size:20px; color:var(--txt-sub); margin-top:20px; }

/* 마키 */
.mm { overflow:hidden; padding:30px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
.mm_track { display:inline-flex; align-items:center; gap:60px; animation:marquee 55s linear infinite; padding-right:60px; }
.mm_txt { font-size:clamp(60px, 6vw, 110px); font-weight:600;color:#eaeef6; }
.mm_dot { width:14px; height:14px; border-radius:50%; background:var(--point1); flex:none; }

/* PUBLICATIONS */
.mp { padding:var(--sec-gap) 50px 0; position:relative; }
.mp_inner { position:relative; max-width:1700px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:80px; align-items:start; }
.mp_side { position:sticky; top:140px; padding-left:30px; }
.mp_canvas { width:100%; max-width:380px; height:320px; display:block; margin-top:50px; pointer-events:none; }
.mp_list { display:flex; flex-direction:column; min-width:0; }
.mp_row { border-bottom:1px solid var(--line); padding:50px 40px; margin:0 -40px; cursor:pointer; }
.mp_list > .pubrow:nth-child(1) { transition-delay:0.00s; }
.mp_list > .pubrow:nth-child(2) { transition-delay:0.10s; }
.mp_list > .pubrow:nth-child(3) { transition-delay:0.20s; }
.mp_list > .pubrow:nth-child(4) { transition-delay:0.30s; }
.mp_list > .pubrow:nth-child(5) { transition-delay:0.40s; }
.mp_row_tit { font-size:34px; font-weight:600; color: #777; line-height:1.2; width:100%; text-wrap:pretty; }
.mp_row_info { display:flex; justify-content:space-between; align-items:center; gap:40px; margin-top:26px; }
.mp_row_author { display:flex; align-items:center; gap:10px; font-size:20px; color:var(--txt-sub); min-width:0; }
.mp_row_ico { font-size:16px; }
.mp_row_name { color:#6b7ea6; font-weight:600; }

/* NEWS & GALLERY */
.mn { position:relative; padding:var(--sec-gap) 50px; box-sizing:border-box; }
.mn_inner { position:relative; max-width:1700px; margin:0 auto; }
.mn_top { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(50px, 5vw, 110px); align-items:start; }
.mn_side { padding-left:30px; }
.mn_head { display:flex; justify-content:space-between; align-items:center; }
.mn_notice_head { border-bottom:1px solid var(--line); padding-bottom:20px; }
.mn_box_tit { font-size:24px; font-weight:700; }
.nab.mn_arrow { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; font-size: 18px; border:1px solid var(--line-btn); border-radius:50%; cursor:pointer; flex:none; }
.mn_arrow_ico { font-size:20px; }
.mn_row { display:flex; justify-content:space-between; align-items:center; gap:30px; border-bottom:1px solid var(--line); padding:30px; cursor:pointer; }
.mn_top .nrow:nth-child(2) { transition-delay:0.00s; }
.mn_top .nrow:nth-child(3) { transition-delay:0.12s; }
.mn_top .nrow:nth-child(4) { transition-delay:0.24s; }
.mn_row_date { font-size:16px; font-weight: 600; color:var(--txt-sub); }
.mn_row_tit { font-size:22px; font-weight:600; margin-top:8px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:keep-all; }
.mn_row_ico { font-size:22px; color:var(--txt-sub); flex:none; }
.mn_gallery { margin-top:30px; }
.mn_gallery_head { margin-bottom:20px; }
.mn_gallery_list { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.mn_gitem { position:relative; display:flex; flex-direction:column; gap:16px; cursor:pointer; min-width:0; }
.mn_gallery_list > .gitem:nth-child(1) { transition-delay:0.00s; }
.mn_gallery_list > .gitem:nth-child(2) { transition-delay:0.12s; }
.mn_gallery_list > .gitem:nth-child(3) { transition-delay:0.24s; }
.mn_gallery_list > .gitem:nth-child(4) { transition-delay:0.36s; }
.mn_gitem_thumb { aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0b1026; }
.mn_gimg { width:100%; height:100%; background-size:cover; background-position:center; }
.mn_gimg01 { background-image:url("../images/main/micro-mammal.png"); }
.mn_gimg02 { background-image:url("../images/main/micro-sim.png"); }
.mn_gitem_tit { font-size:19px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mn_gitem_date { font-size:15px; color:var(--txt-sub); padding-bottom:10px; }

/* 푸터 */
.ftr { background:var(--point2); color:#c6cde4; padding:70px 50px 0; }
.ftr_inner { max-width:1700px; margin:0 auto; }
.ftr_top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.ftr_logo { display:flex; align-items:center; gap:14px; }
.ftr_logo_img { width:56px; height:56px; border-radius:50%; }
.ftr_logo_txt { font-size:19px; font-weight:800; letter-spacing:0.02em; color:#ffffff; line-height:1.3; }
.ftr_logo_univ { display:block; font-size:0.9em; font-weight:600; color:#c6cde4; letter-spacing:var(--ls-kr); }
.ftr_cau { height:48px; width:auto; display:block; }
.ftr_info { display:flex; flex-direction:column; gap:20px; font-size:17px; margin-top:50px; }
.ftr_info_tit { font-weight:700; color:#ffffff; margin-right:14px; }
.ftr_line { height:1px; background:rgba(232,236,248,0.15); margin-top:50px; }
.ftr_bottom { padding:30px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:17px; color:var(--txt-sub); }
.ftr_copy_strong { color:#ffffff; font-weight:700; }
.ftr_dsso { cursor:pointer; transition:color 0.3s ease; }
.ftr_dsso:hover { color:#00c38d; }
.ftr_links { display:flex; gap:40px; color:#aeb6d4; }
.ftr_link { cursor:pointer; font-weight:700; letter-spacing:var(--ls-kr); opacity:0.75; transition:opacity 0.3s ease, color 0.3s ease; }
.ftr_link:hover { opacity:1; color:#ffffff; }

/* ==========================================================================
   TOP 버튼 (tail.php / tail_non.php 공통) — default.css 의 기본 규칙을 덮어쓴다
   기본 : 1px #777 선 + 흰색 반투명, 리믹스아이콘 화살표 #777
   hover : 0.3s 동안 사각형이 90° 돌며 원으로, 배경·선은 포인트컬러, 화살표 흰색 (아이콘은 반대로 돌려 위를 유지)
   ========================================================================== */
#top_btn { display:flex; align-items:center; justify-content:center; width:50px; height:50px; line-height:1; padding:0; border:1px solid #777; border-radius:0; background:rgba(255,255,255,0.18); color:#777; font-size:22px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transform:rotate(0deg); transition:border-radius 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
#top_btn i { display:block; line-height:1; transform:rotate(0deg); transition:transform 0.3s ease; }
#top_btn:hover { border-radius:50%; transform:rotate(90deg); background:var(--point1); border-color:var(--point1); color:#fff; }
#top_btn:hover i { transform:rotate(-90deg); }

/* ==========================================================================
   메인 페이지 링크 연동 — div 였던 카드·행을 a 태그로 바꾸면서 글자색이 링크색으로 바뀌지 않게
   ========================================================================== */
a.rmbtn, a.rmbtn:hover { color:inherit; }
a.mr_item, a.mr_item:hover, a.mp_row, a.mp_row:hover, a.mn_row, a.mn_row:hover, a.mn_gitem, a.mn_gitem:hover, a.mn_arrow, a.mn_arrow:hover { color:inherit; text-decoration:none; }
a.mp_row, a.mn_row { display:flex; }
a.mp_row { flex-direction:column; }
.mn_gimg img { width:100%; height:100%; object-fit:cover; display:block; }
.mp_row.is_empty, .mn_row.is_empty { cursor:default; color:var(--txt-sub); }
.mn_gitem.is_empty { cursor:default; }