/* ===========================================================
   REGAL 홈페이지 공통 스타일
   모든 페이지(index/people/research/projects/publications/gallery)가
   이 파일 하나를 함께 씁니다. 디자인을 바꾸려면 여기만 고치면 됩니다.
   =========================================================== */

:root{
  --bg:#ffffff; --fg:#1a1f2b; --muted:#5b6472; --line:#e6e9ef;
  --brand:#0f3d2e; --brand2:#127a4b; --brand-soft:#eaf5ef; --accent:#159a5f;
  --card:#ffffff; --shadow:0 1px 3px rgba(15,61,46,.06),0 8px 24px rgba(15,61,46,.05);
  --max:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Roboto,sans-serif;
  color:var(--fg);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- 헤더 / 메뉴 ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:62px}
.brand{font-weight:800;color:var(--brand);font-size:19px;letter-spacing:.5px;margin-right:auto}
.brand:hover{text-decoration:none}
.brand small{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:0;margin-left:8px}
.nav a.link{color:var(--muted);font-size:14px;font-weight:500}
.nav a.link:hover{color:var(--brand);text-decoration:none}
.nav a.link.active{color:var(--brand);font-weight:700}
.langbtn{border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:5px 12px;font-size:13px;font-weight:700;color:var(--brand);cursor:pointer}
.langbtn:hover{background:var(--brand-soft)}
.menu-links{display:flex;gap:18px;align-items:center}

/* 모바일: 메뉴를 숨기지 않고 아랫줄로 내려 가로 스크롤시킨다.
   (페이지가 여러 개라 메뉴가 사라지면 이동할 방법이 없어진다) */
@media(max-width:720px){
  .nav{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:8px;gap:10px}
  .brand small{display:none}
  .menu-links{order:3;width:100%;gap:15px;overflow-x:auto;padding-bottom:3px;
    -webkit-overflow-scrolling:touch}
  .menu-links a.link{white-space:nowrap;font-size:13.5px}
}

/* ---------- 히어로 (메인 전용) ---------- */
.hero{position:relative;padding:96px 0 84px;overflow:hidden;
  background:#0a1f18 url("images/hero.jpg") center 30%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,26,20,.92),rgba(8,26,20,.66) 55%,rgba(8,26,20,.35))}
.hero .wrap{position:relative}
.hero h1{font-size:40px;line-height:1.18;letter-spacing:-.4px;color:#fff;margin-bottom:14px}
.hero p.lead{font-size:18px;color:#dcefe6;max-width:660px}
.hero .kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#7ee0ad;margin-bottom:14px}
.recruit{margin-top:24px;display:inline-block;background:rgba(255,255,255,.12);color:#eafff5;
  border:1px solid rgba(126,224,173,.4);border-radius:10px;padding:11px 16px;font-size:14px;font-weight:600;
  backdrop-filter:blur(4px)}
@media(max-width:560px){.hero{padding:64px 0 56px}.hero h1{font-size:30px}.hero p.lead{font-size:16px}}

/* ---------- 하위 페이지 머리말 ---------- */
.pagehead{background:var(--brand-soft);border-bottom:1px solid var(--line);padding:40px 0 36px}
.pagehead h1{font-size:30px;letter-spacing:-.3px;color:var(--brand)}
.pagehead p{color:var(--muted);font-size:15px;margin-top:6px}
.pagehead + section{border-top:none}
@media(max-width:560px){.pagehead{padding:30px 0 26px}.pagehead h1{font-size:24px}}

/* ---------- 섹션 공통 ---------- */
section{padding:52px 0;border-top:1px solid var(--line)}
section h2{font-size:26px;letter-spacing:-.3px;color:var(--brand);margin-bottom:8px}
section .sub{color:var(--muted);margin-bottom:26px;font-size:15px}
.subhead{font-size:16px;color:var(--muted);margin:6px 0 14px;font-weight:600}
.subhead.gap{margin-top:30px}

.grid{display:grid;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--shadow)}

/* ---------- 교수 ---------- */
.prof{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start}
.prof .ava{position:relative;width:96px;height:96px;border-radius:16px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--brand);font-size:30px;overflow:hidden}
.prof .ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prof h3{font-size:20px;color:var(--brand)}
.prof .pos{color:var(--muted);font-size:14px;margin:2px 0 10px}
.prof .meta{font-size:13.5px;color:var(--muted);line-height:1.9}
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12px;background:var(--brand-soft);color:var(--brand2);border-radius:20px;padding:4px 11px;font-weight:600}
@media(max-width:560px){.prof{grid-template-columns:1fr}}

/* ---------- 멤버 ---------- */
/* minmax의 최소값은 min(...,100%)로 감싼다. 그냥 minmax(200px,1fr)로 두면
   화면이 200px+여백보다 좁을 때 트랙이 화면을 삐져나간다(가로 스크롤 발생). */
.members{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.mcard .av{position:relative;width:56px;height:56px;border-radius:50%;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--brand);font-size:18px;margin-bottom:11px;overflow:hidden}
.mcard .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard .name{font-weight:700;font-size:15.5px}
.mcard .role{color:var(--accent);font-size:12.5px;margin-top:3px;font-weight:600}
.mcard .mail{font-size:12px;color:var(--muted);margin-top:5px;word-break:break-all}

/* ---------- 연구 분야 ---------- */
.research{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.rc .tag{font-size:11.5px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.rc h3{font-size:16.5px;margin:8px 0 6px;color:var(--brand)}
.rc p{font-size:14px;color:var(--muted)}

/* ---------- 과제 ---------- */
.proj{border-left:3px solid var(--brand-soft);padding:4px 0 4px 16px;margin-bottom:16px}
.proj:hover{border-left-color:var(--accent)}
.proj .t{font-weight:600;font-size:15px}
.proj .m{font-size:13px;color:var(--muted);margin-top:3px}

/* ---------- 논문 ---------- */
.pub{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--fg)}
.pub:last-child{border-bottom:none}
.pub .v{color:var(--muted);font-style:italic}
.pub .yr{color:var(--brand2);font-weight:700}
.more{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* ---------- 갤러리 썸네일 (메인) ---------- */
.gallery{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.gitem{display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--brand-soft)}
.gitem:hover{text-decoration:none}
.gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.gitem:hover img{transform:scale(1.045)}
.gitem .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:12.5px;
  color:#fff;background:linear-gradient(transparent,rgba(15,61,46,.72))}
.seeall{margin-top:18px;font-size:14px;font-weight:600}

/* ---------- 갤러리 페이지 (원본 비율 그대로) ---------- */
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:680px){.ggrid{grid-template-columns:1fr}}
.gfig{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow)}
.gfig button{display:block;width:100%;padding:0;border:0;background:var(--brand-soft);cursor:zoom-in}
.gfig img{display:block;width:100%;height:auto}
.gfig figcaption{padding:13px 16px;font-size:14px;color:var(--fg);border-top:1px solid var(--line)}
.gfig:target{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- 사진 확대 (라이트박스) ---------- */
.lb{position:fixed;inset:0;z-index:50;background:rgba(8,26,20,.985);
  display:none;align-items:center;justify-content:center;padding:28px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px}
.lb .lbcap{position:absolute;left:0;right:0;bottom:22px;text-align:center;
  color:#eafff5;font-size:14.5px;padding:0 60px}
.lb .x{position:absolute;top:16px;right:20px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.lb .x:hover{background:rgba(255,255,255,.26)}
.lb .nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lb .nav-btn:hover{background:rgba(255,255,255,.26)}
.lb .prev{left:18px}
.lb .next{right:18px}
@media(max-width:560px){.lb{padding:12px}.lb .lbcap{padding:0 16px;bottom:12px}.lb .nav-btn{width:38px;height:38px}}

/* ---------- 서포터 ---------- */
.suplogos{display:flex;flex-wrap:wrap;align-items:center;gap:34px}
.suplogos img{height:52px;width:auto;object-fit:contain;filter:grayscale(.2);opacity:.9}
.suplogos img:hover{filter:none;opacity:1}
@media(max-width:560px){.suplogos{gap:22px}.suplogos img{height:40px}}

/* ---------- 메인 둘러보기 카드 ---------- */
.explore{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.xcard{display:block;color:inherit}
.xcard:hover{text-decoration:none;border-color:var(--accent)}
.xcard h3{font-size:16.5px;color:var(--brand);margin-bottom:5px}
.xcard p{font-size:13.5px;color:var(--muted)}
.xcard .go{margin-top:9px;font-size:13px;font-weight:700;color:var(--accent)}

/* ---------- 푸터 ---------- */
footer{border-top:1px solid var(--line);padding:38px 0;color:var(--muted);font-size:14px}
footer .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* ---------- 한/영 전환 ---------- */
[data-en]{display:none}
html[lang="en"] [data-ko]{display:none}
html[lang="en"] [data-en]{display:block}
html[lang="en"] span[data-en],html[lang="en"] a[data-en]{display:inline}