/* =====================================================================
   CliAR — 전남대학교 대기환경연구실 홈페이지
   공유 스타일시트 (디자인 시스템)
   - 색/폰트는 :root 변수에서 한 번에 바꿀 수 있어요.
   ===================================================================== */

/* ---------- 폰트 (무료, Google Fonts) ----------
   Gaegu             : 손글씨 제목 (아이 손글씨 느낌, 한·영 지원)
   Nanum Brush Script: 한글 브러시 로고/히어로
   Noto Sans KR      : 본문 / Oswald: 내비·로고 (각 HTML <head> <link>)  */

:root {
  /* 색상 팔레트 (스크린샷에서 추출한 근사값 — 여기만 바꾸면 전체 적용) */
  --bg-beige:      #E7E2D9;   /* 메인 배경 (Home 하단/Members/Contact) */
  --bg-beige-2:    #EFEBE3;   /* 살짝 밝은 베이지 (카드 등) */
  --navy-night:    #163A40;   /* Publications 별밤 배경 */
  --navy-night-2:  #0f2a2f;
  --gallery-taupe: #A59F91;   /* Gallery 배경 */
  --script-teal:   #4E8597;   /* 손글씨 제목 색 */
  --text-dark:     #2B3A4A;   /* 본문 진한 텍스트 */
  --text-soft:     #5b6670;   /* 보조 텍스트 */
  --link-blue:     #3D5A80;
  --footer-dark:   #161616;
  --line:          #c9c2b6;   /* 구분선 */

  /* 폰트 */
  --font-script: 'Nanum Brush Script', cursive;
  --font-brush:  'Nanum Brush Script', cursive;
  --font-body:   'Noto Sans KR', system-ui, -apple-system, sans-serif;

  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg-beige);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* 손글씨 섹션 제목 공통 */
.script-title {
  font-family: var(--font-script);
  color: var(--script-teal);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
}
.script-title + .title-rule {
  width: 110px; height: 3px; background: var(--script-teal);
  opacity: .8; border: 0; margin-bottom: 32px;
}

/* =====================  상단 내비게이션  ===================== */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 22px 0;
}
.site-header.solid {           /* 히어로 없는 페이지용 (배경 위 고정 아님) */
  position: relative; background: transparent;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { width: 38px; height: 38px; flex: 0 0 auto; }
.brand .brand-text {
  font-family: 'Oswald', var(--font-body);
  font-size: .78rem; letter-spacing: .12em; line-height: 1.25;
  font-weight: 500; text-transform: uppercase; color: currentColor;
}

.nav-menu { display: flex; gap: 26px; list-style: none; }
.nav-menu a {
  font-family: 'Oswald', var(--font-body);
  font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; opacity: .9; transition: opacity .2s;
}
.nav-menu a:hover, .nav-menu a.active { opacity: 1; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* 헤더 색상: 히어로 위(밝은 글자) vs 일반(어두운 글자) */
.site-header.on-hero { color: #fff; }
.site-header.on-light { color: var(--text-dark); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: inherit; font-size: 1.6rem; }

/* =====================  히어로 (Home)  ===================== */
.hero {
  position: relative; min-height: 90vh; display: flex; align-items: center;
  overflow: hidden; color: #fff;
}
/* 배경 영상 슬롯 (저작권 free 영상 넣으면 자동 표시) */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* 영상이 없을 때를 위한 저작권-free CSS 노을/하늘 배경 (애니메이션) */
.hero-fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg,
      #2a4a63 0%, #5a7a93 28%, #c98b6a 60%, #e9b67e 78%, #2d3a40 100%);
}
.hero-fallback::before {            /* 태양 글로우 */
  content: ""; position: absolute; right: 14%; top: 46%;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,196,.95), rgba(255,200,130,.35) 45%, transparent 70%);
  filter: blur(2px);
}
.hero-fallback::after {             /* 흐르는 구름 결 */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.06) 0 2px, transparent 2px 60px);
  opacity: .5; animation: drift 40s linear infinite;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: 1200px 0; } }

.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 60%); }

/* GIF 출처 표기 (히어로 오른쪽 아래, 아주 작게) */
.hero-credit {
  position: absolute; right: 12px; bottom: 10px; z-index: 3;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.72); background: rgba(0,0,0,.28);
  padding: 2px 8px; border-radius: 4px; transition: color .2s;
}
.hero-credit:hover { color: #fff; }

.hero .container { position: relative; z-index: 2; opacity: .75; }
.hero .eyebrow { font-size: 1rem; opacity: .9; margin-bottom: 4px; }
.hero .lab-name {
  font-family: var(--font-script);   /* Gaegu — 한글·영문 통일 */
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero .lab-name .en { font-family: var(--font-script); }
.hero .lab-sub { font-size: clamp(.9rem, 2vw, 1.1rem); opacity: .9; margin-top: 6px; letter-spacing: .04em; }

/* =====================  Research Areas (Home)  ===================== */
.section { padding: 72px 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card .card-img {
  aspect-ratio: 16/10; width: 100%; object-fit: cover; border-radius: 4px;
  background: #cfc8ba center/cover no-repeat;
}
.card h3 { margin: 16px 0 8px; font-size: 1.12rem; color: var(--text-dark); }
.card p { font-size: .92rem; color: var(--text-soft); }

/* =====================  Members  ===================== */
.page { padding-top: 28px; }
.members-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
/* 학생 줄은 가운데 모이도록. 칸 수 = 그 줄의 인원 수 (인원이 바뀌면 숫자도 바꿀 것)
   대학원생 3명 / 학부생 2명 — 대학원생 줄은 학부생 줄과 간격 */
.members-grid.grad-row { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; margin-bottom: 44px; }
.members-grid.undergrad-row { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; }
.member { text-align: center; }
.member .photo {
  width: 190px; height: 230px; margin: 0 auto 14px; object-fit: cover;
  background: #d6d0c4 center/cover no-repeat; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; color: #8a8478; font-size: .85rem;
}
/* 정수리가 잘릴 때: 사진 표시 기준을 위쪽으로 (값이 작을수록 더 위를 보여줌) */
.member .photo.pos-top  { background-position: center top; }   /* 머리 끝까지 */
.member .photo.pos-up   { background-position: center 20%; }   /* 살짝 위로 */
/* 지도교수(PI) — 맨 위 가운데 단독, 사진 살짝 크게 */
.pi-row { display: flex; justify-content: center; margin-bottom: 46px; }
.pi-row .pi-photo { width: 220px; height: 268px; }
.member .name { font-weight: 600; color: var(--link-blue); font-size: 1.02rem; }
.member .role { font-size: .88rem; color: var(--text-soft); }
.subhead { font-size: 1.05rem; font-weight: 600; margin: 8px 0 24px; color: var(--text-dark); }
.past-members { display: flex; flex-wrap: wrap; gap: 22px; font-weight: 600; color: var(--link-blue); }

/* =====================  Publications (별밤 배경)  ===================== */
body.page-pub { background: var(--navy-night); color: #e9eef0; }
body.page-pub .stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.4), transparent);
}
body.page-pub .container { position: relative; z-index: 1; }
body.page-pub .script-title, body.page-pub .title-rule { color: #cfe3e6; }
body.page-pub .title-rule { background: #cfe3e6; }
.btn-scholar {
  display: inline-block; margin: 6px 0 30px; padding: 9px 22px;
  border: 1px solid #cfe3e6; border-radius: 24px; color: #e9eef0;
  font-size: .85rem; letter-spacing: .05em; transition: background .2s, color .2s;
}
.btn-scholar:hover { background: #cfe3e6; color: var(--navy-night); }
.pub-list { display: grid; gap: 20px; max-width: 760px; }
.pub-item { font-size: .92rem; color: #dbe6e8; }
.pub-item a { text-decoration: underline; text-underline-offset: 2px; }
/* 논문 제목 링크: 실제 주소가 있을 때만 클릭/밑줄/강조. href="#"(주소 없음)이면 일반 텍스트처럼 보임 */
.pub-link { color: #cfe9ee; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.pub-link:hover { color: #fff; }
.pub-link[href="#"], .pub-link:not([href]) { color: inherit; text-decoration: none; pointer-events: none; cursor: default; }
.pub-group-label { font-family: var(--font-script); font-size: 1.4rem; color: #9fc3c8; margin-top: 18px; }

/* =====================  Gallery (taupe 배경)  ===================== */
body.page-gallery { background: var(--gallery-taupe); color: #2f2c26; }
body.page-gallery .script-title, body.page-gallery .title-rule { color: #f4f1ea; }
body.page-gallery .title-rule { background: #f4f1ea; }
/* 들쭉날쭉(masonry) + 읽는 순서 유지: 맨 윗줄 왼→오가 최신, 아래로 갈수록 예전.
   사진 원본 비율을 살리고, 각 항목의 세로 span은 main.js가 자동 계산. */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; grid-auto-rows: 8px;   /* 8px 행 단위로 잘게 나눠 높이 차이를 표현 */
}
.gallery-item { position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; background: transparent; }
/* 사진이 칸을 꽉 채우게 → 아래에 회색 빈칸(배경 비침) 안 생기게 */
.gallery-item img, .gallery-item video { width: 100%; height: 100%; display: block; object-fit: cover; }
.gallery-item .caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: #fff; font-family: 'Nanum Pen Script', cursive; font-size: 1.32rem; line-height: 1.12;
}
.gallery-item .caption .when { display: block; opacity: .85; font-size: 1rem; }
/* 캡션 안 "(Link)" 글자: 실제 주소 있을 때만 클릭/강조, href="#"이면 비활성 표시 */
.gallery-item .caption .evt-link { font-size: 1.05rem; text-decoration: underline; text-underline-offset: 2px; opacity: .95; }
.gallery-item .caption .evt-link[href="#"] { opacity: .5; text-decoration: none; pointer-events: none; cursor: default; }
/* 동영상 항목에 재생 아이콘 힌트 */
.gallery-item[data-type="video"]::after {
  content: "▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; line-height: 54px; text-align: center; font-size: 20px;
  color: #fff; background: rgba(0,0,0,.45); border-radius: 50%; pointer-events: none;
}

/* 라이트박스 */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0,0,0,.9); align-items: center; justify-content: center; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 88vh; }
.lightbox .close { position: absolute; top: 18px; right: 26px; color: #fff; font-size: 2.2rem; cursor: pointer; }

/* =====================  Contact  ===================== */
/* 페이지 상단과 Office/Contact 사이 여백 + 지도 */
.contact-map { position: relative; margin: 12px 0 48px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.contact-map iframe { width: 100%; height: 360px; border: 0; display: block; }
.contact-map #map { width: 100%; height: 380px; }
/* 지도 테마 전환 버튼 (영상 / 회색 캔버스) */
.map-switch { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; gap: 6px; }
.map-switch button {
  font-family: var(--font-body); font-size: .76rem; padding: 6px 12px; cursor: pointer;
  border: 0; border-radius: 16px; background: rgba(255,255,255,.9); color: var(--text-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: background .2s, color .2s;
}
.map-switch button.active { background: var(--script-teal); color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 760px; }
.contact-block h3 { font-family: var(--font-script); color: var(--script-teal); font-size: 1.7rem; margin-bottom: 12px; }
.contact-block p { color: var(--text-soft); }
/* Related Links 영역: 구분선을 지도(컨테이너) 전체 폭에 맞춤 → 화면 따라 유연 */
.related-section { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.related-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.related-links a {
  background: #5b5448; color: #f2efe9; padding: 10px 18px; border-radius: 22px;
  font-size: .82rem; text-align: center; line-height: 1.2; transition: background .2s;
}
.related-links a:hover { background: #423d34; }

/* =====================  공통 푸터  ===================== */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px 0; flex-wrap: wrap; }
.footer-text { font-size: .82rem; color: var(--text-soft); }
.footer-text .copy { display: block; margin-top: 4px; font-size: .74rem; opacity: .8; }
.footer-logo { display: flex; align-items: center; gap: 10px; opacity: .85; }
.footer-logo .logo { width: 30px; height: 30px; }
.footer-logo span { font-family: 'Oswald', var(--font-body); font-size: .72rem; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
body.page-pub .site-footer { border-color: rgba(255,255,255,.2); }
body.page-pub .footer-text { color: #b9c8ca; }
body.page-gallery .footer-text { color: #3a362f; }

/* =====================  맨 위로(Top) 버튼  ===================== */
.to-top {
  position: fixed; right: 24px; bottom: 28px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--script-teal); color: #fff; font-size: 20px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.to-top.show { opacity: .92; visibility: visible; transform: translateY(0); }
.to-top:hover { opacity: 1; background: #3c6b7a; }
@media (max-width: 560px) { .to-top { right: 16px; bottom: 18px; width: 42px; height: 42px; } }

/* =====================  반응형  ===================== */
@media (max-width: 860px) {
  .cards, .members-grid { grid-template-columns: repeat(2, 1fr); }
  /* 학생 줄: 고정폭(220px) 풀고 2칸으로 — 모바일 겹침 방지 */
  .members-grid.grad-row,
  .members-grid.undergrad-row { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .nav-menu {
    display: none; position: absolute; top: 64px; right: 16px; flex-direction: column;
    background: rgba(20,20,20,.95); padding: 16px 22px; border-radius: 8px; gap: 16px; color: #fff;
  }
  .nav-menu.open { display: flex; }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  .cards, .members-grid { grid-template-columns: 1fr; }
  /* 아주 좁은 화면: 학생도 한 줄에 한 명 */
  .members-grid.grad-row,
  .members-grid.undergrad-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
}