/* ══════════════════════════════════════════════════════════════
   Green Catalysis & Process Laboratory — KIST
   공용 스타일  ·  Forest Ink × Lime

   alethia.earth 의 디자인 언어를 참고했습니다 —
     · 깊은 숲빛 먹색(#0F1F10)과 산성 라임(#C6F19D), 따뜻한 종이빛 바탕
     · 모서리를 둥글리지 않음 (radius 0)
     · 그림자 대신 1px 실선과 여백으로 층을 나눔
     · 제목은 Geist 를 좁은 자간(-0.035em)으로, 잔글씨 표찰은 Geist Mono 대문자

   움직임은 맨 아래 "움직임" 칸에 모아 두었고, motion_gc_new.js 가 켭니다.
   운영체제에서 "동작 줄이기"를 켠 사람에게는 전부 꺼집니다.

   모든 페이지가 이 파일 하나를 함께 씁니다.
   ══════════════════════════════════════════════════════════════ */

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

:root {
  /* 어두운 바탕 — 숲빛 먹색 */
  --ink:     #0F1F10;
  --ink-2:   #162917;
  --ink-3:   #1F3720;

  /* 밝은 바탕 — 따뜻한 종이빛 */
  --paper:   #F5F4F2;
  --paper-2: #EEECE7;
  --surface: #FFFFFF;

  /* 글자 */
  --text:    #0F1F10;
  --muted:   #5F645D;   /* 밝은 바탕 위 — 종이빛 위에서 5.6:1 */
  --dim:     #999D97;   /* 어두운 바탕 위 */
  --line:    #E2E1DC;   /* 밝은 바탕의 실선 */
  --line-d:  rgba(245,244,242,.14);  /* 어두운 바탕의 실선 */

  /* 강조 — 라임은 어두운 바탕 전용, 밝은 바탕에는 진한 쪽을 씁니다 */
  --lime:      #C6F19D;
  --lime-pale: #D5EEBC;
  --lime-deep: #3F6E1C;

  /* 보조 강조 — 흙빛 */
  --clay:      #CC8343;
  --clay-deep: #8A5220;

  --nav-h: 64px;

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  font-family: var(--sans);
  color: var(--text); background: var(--paper);
  line-height: 1.62; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
img { display: block; max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* 제목 계열은 자간을 좁혀 큰 글씨에서도 뭉치게 */
.hero__title, .page-header__title, .section__title,
.res-block__title, .mem-group__title, .join-box__title,
.gal-event__title, .footer__brand-name {
  font-weight: 500; letter-spacing: -.035em;
}

/* 잔글씨 표찰 — 모노 대문자, 자간은 넓게 */
.hero__eyebrow, .page-header__eyebrow, .section__eyebrow,
.stat__label, .filter-row__label, .footer__col-title,
.pub-item__journal, .role-badge, .pi-card__role, .chip,
.pi-link, .footer__kist-badge {
  font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .1em;
}

/* ── 로고 마크 ─────────────────────────────────────────────
   육각 고리(탄소 골격) 안의 잎 — 촉매화학 × 친환경.
   꼭짓점 원자는 --gc-apex 색(활성 자리)으로 구분된다. */
.logo-mark {
  --gc-apex: var(--lime-pale);
  height: .92em; width: auto; margin-left: .16em;
  overflow: visible; vertical-align: baseline;
}
.logo-mark .lm-ring  { fill: none; stroke: var(--lime); stroke-width: 2; opacity: .5; }
.logo-mark .lm-leaf  { fill: var(--lime); opacity: .95; }
.logo-mark .lm-vein  { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: .55; stroke-linecap: round; }
.logo-mark .lm-atom  { fill: var(--gc-apex); }
.logo-mark--mono .lm-ring { stroke: currentColor; }
.logo-mark--mono .lm-leaf,
.logo-mark--mono .lm-atom { fill: currentColor; }
.logo-mark--mono .lm-vein { stroke: currentColor; opacity: .3; }

/* ══ 내비게이션 ══════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: var(--ink); border-bottom: 1px solid var(--line-d);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 32px;
  max-width: 1200px; margin: 0 auto;
}
.nav__logo {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.03em;
  color: var(--paper); white-space: nowrap;
  display: inline-flex; align-items: baseline;
}
.nav__logo span { color: var(--lime); }
.nav__menu { display: flex; gap: 2px; }
.nav__menu a {
  font-family: var(--mono);
  color: var(--dim); font-size: .72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 8px 13px; transition: color .18s, background .18s;
}
.nav__menu a:hover  { color: var(--paper); background: rgba(198,241,157,.1); }
.nav__menu a.active { color: var(--lime); }
.nav__kist-logo { display: flex; align-items: center; margin-left: 16px; }
.nav__kist-logo img { height: 32px; width: auto; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 1.5px; background: var(--paper); }
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 800;
  background: var(--ink); flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--mono); color: var(--paper);
  font-size: .95rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 12px 20px;
}
.mobile-nav a:hover { color: var(--lime); }

/* ══ 페이지 헤더 (하위 페이지 상단) ═════════════════════ */
.page-header {
  position: relative; overflow: hidden;
  background: var(--ink);
  padding: calc(var(--nav-h) + 72px) 0 68px;
  border-bottom: 1px solid var(--line-d);
}
.page-header > .container { position: relative; z-index: 2; }
.page-header__eyebrow {
  display: block; color: var(--lime);
  font-size: .68rem; margin-bottom: 20px;
}
.page-header__title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  color: var(--paper); line-height: 1.06; margin-bottom: 18px;
}
.page-header__sub {
  color: var(--dim); font-size: .96rem; max-width: 620px; line-height: 1.7;
}
.page-header__sub strong { color: var(--lime); font-weight: 500; }
.page-header__sub-kr {
  color: var(--dim); opacity: .8; font-size: .84rem; max-width: 620px;
  line-height: 1.65; margin-top: 10px;
}
.page-header__stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 48px; border-top: 1px solid var(--line-d);
}
.page-header__stats > div {
  padding: 22px 36px 0 0; margin-right: 36px;
  border-right: 1px solid var(--line-d);
}
.page-header__stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.page-header__stat-num {
  font-family: var(--mono); font-weight: 500;
  font-size: 1.9rem; color: var(--paper); line-height: 1; letter-spacing: -.03em;
}
.page-header__stat-num span { color: var(--lime); }
.page-header__stat-num em { color: var(--clay); font-style: normal; }
.page-header__stat-label {
  font-family: var(--mono); font-size: .64rem; color: var(--dim);
  margin-top: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.page-header__back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); color: var(--dim);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 22px; transition: color .18s;
}
.page-header__back:hover { color: var(--lime); }

/* ══ 히어로 (첫 화면) ═══════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  padding: calc(var(--nav-h) + 104px) 0 104px;
  border-bottom: 1px solid var(--line-d);
}
.hero__bg {
  position: absolute; inset: 0; opacity: .13; pointer-events: none;
  object-fit: cover; width: 100%; height: 100%;
}
.hero > .container { position: relative; z-index: 2; }
.hero__eyebrow {
  display: block; color: var(--lime);
  font-size: .7rem; margin-bottom: 26px;
}
/* 기관 이름 한글 — 영문 eyebrow 바로 아래 */
.hero__eyebrow-kr {
  color: var(--dim); font-size: .82rem; letter-spacing: -.01em;
  margin: -18px 0 26px;
}
.hero__title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: var(--paper); line-height: 1.02; margin-bottom: 24px; max-width: 17ch;
}
.hero__title em { color: var(--lime); font-style: normal; }

/* 연구실 이름 — 제목과 본문 사이. 왼쪽 라임 선으로 묶어 둡니다. */
.hero__lab {
  border-left: 2px solid var(--lime); padding-left: 14px;
  color: var(--paper); font-size: 1.05rem; font-weight: 500;
  letter-spacing: -.025em; line-height: 1.4; margin-bottom: 28px;
}
.hero__lab span {
  display: block; color: var(--dim);
  font-size: .84rem; font-weight: 400; letter-spacing: -.01em; margin-top: 3px;
}
.hero__lead {
  color: var(--dim); font-size: 1.02rem;
  max-width: 620px; line-height: 1.78; margin-bottom: 40px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ══ 버튼 ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 0;
  font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em;
  cursor: pointer; border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.btn--primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn--primary:hover { background: var(--lime-pale); border-color: var(--lime-pale); }
.btn--ghost { border-color: var(--line-d); color: var(--paper); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn--outline { border-color: var(--text); color: var(--text); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* ══ 섹션 공통 ══════════════════════════════════════════ */
.section { padding: 96px 0; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__eyebrow {
  display: block; color: var(--lime-deep);
  font-size: .66rem; margin-bottom: 16px;
}
.section--dark .section__eyebrow { color: var(--lime); }
.section__title {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; margin-bottom: 16px;
}
.section--dark .section__title { color: var(--paper); }
.section__sub { color: var(--muted); font-size: .95rem; max-width: 640px; line-height: 1.75; }
.section--dark .section__sub { color: var(--dim); }
.section__head { margin-bottom: 52px; }
.section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

/* ══ 한글 소개 (홈) ══════════════════════════════════════ */
.intro-kr { padding-top: 72px; padding-bottom: 72px; border-bottom: 1px solid var(--line); }
.intro-kr__lead {
  color: var(--text); font-size: 1.04rem; line-height: 1.9;
  max-width: 780px; margin-bottom: 36px;
}
.intro-kr__lead a {
  color: var(--lime-deep); border-bottom: 1px solid var(--lime-deep);
  transition: color .18s, border-color .18s;
}
.intro-kr__lead a:hover { color: var(--ink); border-color: var(--ink); }
.intro-kr__list-lead {
  color: var(--muted); font-size: .92rem; margin-bottom: 18px; font-weight: 500;
}
.intro-kr__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  list-style: none;
}
.intro-kr__list li a {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line); padding: 20px 22px; height: 100%;
  transition: background .18s, border-color .18s;
}
.intro-kr__list li a:hover { background: var(--surface); border-color: var(--ink); }
.intro-kr__list-num {
  font-family: var(--mono); font-size: .78rem; color: var(--lime-deep);
  letter-spacing: .04em; flex: none; padding-top: .15em;
}
.intro-kr__list li strong {
  display: block; color: var(--text); font-weight: 600;
  font-size: .96rem; margin-bottom: 6px; letter-spacing: -.02em;
}
.intro-kr__list li a > span:last-child { color: var(--muted); font-size: .86rem; line-height: 1.65; }
@media (max-width: 640px) {
  .intro-kr__list { grid-template-columns: 1fr; }
}
.section__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); color: var(--lime-deep);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color .18s;
}
.section--dark .section__more { color: var(--lime); }
.section__more:hover { color: var(--text); }
.section--dark .section__more:hover { color: var(--paper); }

/* ══ 통계 스트립 ════════════════════════════════════════ */
.stats-strip { background: var(--ink-2); padding: 0; }
.stats-strip__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.stats-strip__grid > div {
  padding: 46px 32px; border-right: 1px solid var(--line-d);
}
/* 첫 칸·끝 칸은 안쪽 여백을 빼서 container 눈금에 맞춥니다 */
.stats-strip__grid > div:first-child { padding-left: 0; }
.stats-strip__grid > div:last-child  { padding-right: 0; border-right: none; }
.stat__num {
  font-family: var(--mono); font-weight: 500;
  font-size: 2.4rem; color: var(--paper); line-height: 1; letter-spacing: -.04em;
}
.stat__num span { color: var(--lime); }
.stat__num em { color: var(--clay); font-style: normal; }
/* 숫자가 올라가는 대상 — 굵기는 부모를 따릅니다 */
.stat__num b, .page-header__stat-num b { font-weight: inherit; }
.stat__label {
  font-size: .64rem; color: var(--dim); margin-top: 12px;
}

/* ══ 연구 주제 카드 ═════════════════════════════════════ */
.topic-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.topic-card {
  background: transparent; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 34px 34px 32px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background .18s;
}
.topic-card:hover { background: var(--surface); }
.topic-card__num {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  color: var(--lime-deep); line-height: 1; letter-spacing: .06em;
}
.topic-card__title { font-size: 1.24rem; font-weight: 500; line-height: 1.24; letter-spacing: -.028em; }
.topic-card__desc { color: var(--muted); font-size: .9rem; line-height: 1.72; flex: 1; }
.topic-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.topic-card__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); color: var(--lime-deep);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  margin-top: 6px; transition: color .18s;
}
.topic-card:hover .topic-card__more { color: var(--text); }

.chip {
  display: inline-block; padding: 4px 9px; border-radius: 0;
  background: var(--lime-pale); border: 1px solid transparent;
  color: var(--ink); font-size: .6rem;
}
.chip--copper { background: rgba(204,131,67,.18); color: var(--clay-deep); }
.chip--plain  { background: transparent; border-color: var(--line); color: var(--muted); }

/* ══ Research 페이지 ════════════════════════════════════ */
.res-block { padding: 84px 0; border-bottom: 1px solid var(--line); }
.res-block:last-of-type { border-bottom: none; }
.res-block__head { display: flex; gap: 20px; align-items: baseline; margin-bottom: 32px; }
.res-block__num {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  color: var(--lime-deep); letter-spacing: .06em;
}
.res-block__title { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; }
.res-block__body { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.res-block__lead { color: var(--text); font-size: 1.02rem; line-height: 1.78; margin-bottom: 26px; }
.res-sub { margin-bottom: 28px; }
.res-sub__title {
  font-size: .95rem; font-weight: 600; margin-bottom: 8px;
  display: flex; align-items: center; gap: 9px; letter-spacing: -.02em;
}
.res-sub__title::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime-deep); flex: none;
}
.res-sub__text { color: var(--muted); font-size: .9rem; line-height: 1.75; padding-left: 15px; }
.res-list { display: flex; flex-direction: column; gap: 0; }
.res-list li {
  position: relative; padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .9rem; line-height: 1.62;
}
.res-list li:last-child { border-bottom: none; }
.res-list li::before {
  content: ''; position: absolute; left: 0; top: 1.42em;
  width: 10px; height: 1px; background: var(--lime-deep);
}
.res-list li strong { color: var(--text); font-weight: 600; }

/* 그림 자리 — 파일이 없으면 줄무늬 박스가 그대로 보인다 */
.fig { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.fig img { width: 100%; height: auto; }
.fig__ph {
  aspect-ratio: 4 / 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(45deg, var(--paper-2) 0 10px, var(--paper) 10px 20px);
  color: var(--muted); font-size: .78rem; text-align: center; padding: 20px;
}
.fig__ph strong {
  font-family: var(--mono); font-size: .66rem; color: var(--text);
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
}
.fig figcaption {
  padding: 13px 16px; font-size: .79rem; color: var(--muted);
  border-top: 1px solid var(--line); line-height: 1.55;
}

/* ══ 구성원 — PI 카드 ═══════════════════════════════════ */
.mem-group { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.mem-group__title { font-size: 1.55rem; }
.mem-group__count {
  font-family: var(--mono); background: var(--lime-pale);
  color: var(--ink); padding: 3px 9px; font-size: .64rem; letter-spacing: .06em;
}
.mem-group__note {
  font-family: var(--mono); color: var(--muted);
  font-size: .74rem; letter-spacing: .02em;
}
.mem-group__line { flex: 1; height: 1px; background: var(--line); }
.mem-section { padding-bottom: 72px; }

.pi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.pi-card {
  background: transparent;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; display: grid; grid-template-columns: 276px 1fr;
  transition: background .18s;
}
.pi-card:hover { background: var(--surface); }

/* 사진 전체가 그 PI 의 Publication 페이지로 가는 링크입니다.
   칸은 카드 높이를 끝까지 채웁니다 — aspect-ratio 로 묶으면 카드보다 짧아져
   아래가 빕니다. 대신 칸 너비(276px)와 카드 본문 여백을 맞춰
   실제로 276×340, 곧 4:5 인물 비율이 나오게 했습니다. */
.pi-photo {
  position: relative; z-index: 0; display: block; background: var(--ink-2);
  height: 80%; min-height: 240px; overflow: hidden; align-self: start;
}
.pi-photo img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
.pi-photo:hover img { filter: brightness(.42) saturate(.7); }
.pi-photo__initial {
  position: absolute; inset: 0; z-index: -1; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 2.6rem; font-weight: 400;
  color: rgba(198,241,157,.3);
}
.pi-photo__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 14px;
  background: rgba(15,31,16,.72);
  opacity: 0; transition: opacity .2s;
}
.pi-photo:hover .pi-photo__overlay,
.pi-photo:focus-visible .pi-photo__overlay { opacity: 1; }
.pi-photo__overlay span {
  font-family: var(--mono); color: var(--lime);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
}
.pi-photo__overlay small { color: var(--dim); font-size: .7rem; }

.pi-card__body { padding: 21px 24px; display: flex; flex-direction: column; gap: 9px; }
.pi-card__name { font-size: 1.16rem; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.pi-card__name-kr { color: var(--muted); font-size: .82rem; font-weight: 400; margin-left: 7px; letter-spacing: 0; }
.pi-card__role {
  display: inline-block; align-self: flex-start;
  background: transparent; border: 1px solid var(--line);
  color: var(--clay-deep); padding: 3px 9px; font-size: .58rem;
}
.pi-card__interests { color: var(--muted); font-size: .87rem; line-height: 1.68; }
.pi-meta { display: flex; flex-direction: column; gap: 6px; }
.pi-meta__item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.pi-meta__item a { color: var(--muted); }
.pi-meta__item a:hover { color: var(--lime-deep); }
.pi-meta__item svg { flex: none; opacity: .6; }

.pi-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pi-link {
  border: 1px solid var(--line); padding: 5px 9px;
  font-size: .58rem; color: var(--muted); transition: all .18s;
}
.pi-link:hover { border-color: var(--ink); color: var(--ink); }

.pi-pubs-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line);
  font-family: var(--mono); color: var(--lime-deep);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  transition: color .18s;
}
.pi-pubs-link:hover { color: var(--text); }
.pi-pubs-link b { font-weight: 600; }

/* ══ 구성원 — 포닥 · 학생 · 인턴 카드 ═══════════════════ */
/* PI 카드와 달리 인원수가 4의 배수가 아닐 때가 많습니다.
   칸을 맞물린 격자로 두면 마지막 줄에서 선이 끊기므로,
   카드마다 테두리를 두르고 간격을 줍니다 — 인원이 몇이든 깔끔합니다. */
.people-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.person-card {
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: background .18s, border-color .18s;
}
.person-card:hover { border-color: var(--ink); }
.person-card:hover { background: var(--surface); }
/* 인물 사진은 정사각. 파일이 없으면 이니셜 글자가 대신 보입니다. */
.person-photo {
  position: relative; z-index: 0; background: var(--ink-2);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo__initial {
  position: absolute; inset: 0; z-index: -1; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 2.1rem; color: rgba(198,241,157,.26);
}
.person-card__body {
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.person-card__name {
  font-size: .96rem; font-weight: 600; line-height: 1.28; letter-spacing: -.028em;
}
.person-card__name-kr {
  color: var(--muted); font-size: .78rem; font-weight: 400; letter-spacing: 0;
}
.person-card__topic { color: var(--muted); font-size: .82rem; line-height: 1.62; flex: 1; }
.person-card__program { color: var(--muted); font-size: .74rem; line-height: 1.5; }
.person-card__since { font-family: var(--mono); font-size: .68rem; color: var(--muted); opacity: .7; }
.person-card__supervisor {
  font-family: var(--mono); font-size: .66rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.person-card__supervisor a { color: var(--muted); font-weight: 600; transition: color .18s; }
.person-card__supervisor a:hover { color: var(--lime-deep); }
.person-card__mail {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .66rem; color: var(--muted);
  word-break: break-all; margin-top: 2px;
  padding-top: 10px; border-top: 1px solid var(--line);
  transition: color .18s;
}
.person-card__mail svg { flex: none; opacity: .6; }
a.person-card__mail:hover { color: var(--lime-deep); }
.person-card__mail--none { opacity: .55; }

.alumni-subgroup {
  display: flex; align-items: baseline; gap: 10px;
  margin: 36px 0 14px;
}
.mem-group + .alumni-subgroup { margin-top: 8px; }
.alumni-subgroup__title {
  font-family: var(--mono); font-size: .76rem; color: var(--lime-deep);
  text-transform: uppercase; letter-spacing: .08em;
}
.alumni-subgroup__count {
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
}
.alumni-subgroup__empty { color: var(--muted); font-size: .82rem; }

.alumni-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.alumni-card {
  border: 1px solid var(--line); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .18s, border-color .18s;
}
.alumni-card:hover { background: var(--surface); border-color: var(--ink); }
.alumni-card__name { font-size: .88rem; font-weight: 600; letter-spacing: -.02em; }
.alumni-card__name-kr { color: var(--muted); font-size: .76rem; font-weight: 400; margin-left: 6px; }
.alumni-card__period { color: var(--muted); font-size: .74rem; }
.alumni-card__current { color: var(--lime-deep); font-size: .74rem; font-weight: 500; }
.alumni-card__supervisor {
  font-family: var(--mono); font-size: .64rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.alumni-card__supervisor a { color: var(--muted); font-weight: 600; transition: color .18s; }
.alumni-card__supervisor a:hover { color: var(--lime-deep); }

.empty-note {
  background: transparent; border: 1px dashed var(--line);
  padding: 48px 28px; text-align: center;
  color: var(--muted); font-size: .9rem; line-height: 1.72;
}
.empty-note strong {
  display: block; color: var(--text); font-size: 1rem;
  font-weight: 500; margin-bottom: 8px; letter-spacing: -.02em;
}

.join-box {
  background: var(--ink); padding: 56px 44px; margin-top: 56px;
}
.join-box__title { font-size: 1.7rem; color: var(--paper); margin-bottom: 12px; }
.join-box__desc { color: var(--dim); font-size: .92rem; margin-bottom: 14px; max-width: 56ch; }
.join-box__desc:last-of-type { margin-bottom: 26px; }
.join-box__desc a { color: var(--lime); border-bottom: 1px solid var(--lime); transition: opacity .18s; }
.join-box__desc a:hover { opacity: .75; }

/* ══ Resources 페이지 — 비밀번호 게이트 & 로고 카드 ══════════ */
.res-gate {
  max-width: 420px; margin: 64px auto 96px; text-align: center;
  padding: 48px 40px; border: 1px solid var(--line); background: var(--surface);
}
.res-gate__label {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 18px;
}
.res-gate__form { display: flex; gap: 10px; }
.res-gate__input {
  flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid var(--line);
  background: var(--paper); color: var(--text); font-size: 1rem;
  font-family: var(--mono); letter-spacing: .2em; text-align: center;
}
.res-gate__input:focus { outline: none; border-color: var(--lime-deep); }
.res-gate__error { color: #B4432E; font-size: .82rem; margin-top: 14px; }

.logo-section__note { color: var(--muted); font-size: .88rem; max-width: 62ch; margin: 14px 0 28px; }
.logo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.logo-grid--marks { grid-template-columns: repeat(4, 1fr); }
.logo-card { border: 1px solid var(--line); display: flex; flex-direction: column; }
.logo-card__preview {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; min-height: 120px;
}
.logo-card--dark .logo-card__preview { background: var(--ink); }
.logo-card--light .logo-card__preview { background: var(--surface); }
.logo-card__preview img { max-width: 100%; max-height: 64px; width: auto; }
.logo-card--mark .logo-card__preview img { max-height: 56px; }
.logo-card__body {
  padding: 14px 18px 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.logo-card__name { font-size: .84rem; font-weight: 600; color: var(--text); }
.logo-card__hint { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.logo-card__links { display: flex; gap: 14px; margin-top: 2px; }
.logo-card__links a {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--lime-deep); border-bottom: 1px solid transparent;
}
.logo-card__links a:hover { border-color: var(--lime-deep); }

@media (max-width: 640px) {
  .logo-grid { grid-template-columns: 1fr; }
  .logo-grid--marks { grid-template-columns: repeat(2, 1fr); }
  .res-gate { padding: 36px 24px; margin: 40px auto 64px; }
}

/* ══ 필터 바 ════════════════════════════════════════════ */
.filter-bar {
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--nav-h); z-index: 100;
}
/* 단추가 많아 넘칠 수 있어 가로로 밀어 볼 수 있게 둡니다 */
.filter-row {
  display: flex; align-items: center; gap: 4px;
  max-width: 1200px; margin: 0 auto; padding: 11px 32px;
  overflow-x: auto; scrollbar-width: thin;
}
.filter-row + .filter-row { border-top: 1px solid var(--line); }
.filter-row__label {
  font-size: .6rem; color: var(--muted);
  white-space: nowrap; margin-right: 6px;
}
.filter-btn {
  white-space: nowrap; padding: 6px 8px; border-radius: 0;
  font-family: var(--mono); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .015em;
  cursor: pointer; border: 1px solid var(--line);
  background: transparent; color: var(--muted);
  transition: border-color .18s, color .18s, background .18s;
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.filter-row--pi .filter-btn.active { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--paper); }

/* ══ 논문 목록 ══════════════════════════════════════════ */
.pub-section { padding: 60px 0 0; }
.pub-section:last-of-type { padding-bottom: 88px; }
.pub-section.hidden { display: none; }
.year-badge {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.year-badge__num {
  font-family: var(--mono); font-weight: 500;
  font-size: 1.5rem; color: var(--ink); line-height: 1; letter-spacing: -.04em;
}
.year-badge__count {
  font-family: var(--mono); background: var(--lime-pale); color: var(--ink);
  padding: 3px 8px; font-size: .6rem; letter-spacing: .06em;
}
.year-badge__line { flex: 1; }

.pub-item {
  background: transparent; border-bottom: 1px solid var(--line);
  padding: 22px 0; margin-bottom: 0; display: grid;
  grid-template-columns: 44px 1fr auto; gap: 20px; align-items: start;
  transition: background .18s;
}
.pub-item:hover { background: var(--surface); }
.pub-item.hidden { display: none; }
.pub-item__idx {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  line-height: 1.6; text-align: right; opacity: .6;
}
/* 저널 이름은 길어서 자간을 조금 좁힙니다 */
.pub-item__journal {
  font-size: .63rem; letter-spacing: .05em; margin-bottom: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
/* JCR 분야별 색 — 종이빛 바탕에 맞춰 채도를 낮춘 값 */
.pub-item__journal--multi-sci    { color: #A3382B; }
.pub-item__journal--chem-phys    { color: #2E5F86; }
.pub-item__journal--chem-multi   { color: #6B4380; }
.pub-item__journal--eng-chem     { color: #A66225; }
.pub-item__journal--green-sust   { color: #3B7A3F; }
.pub-item__journal--phys-multi   { color: #2C6E63; }
.pub-item__journal--mater-sci    { color: #5C6360; }
.pub-item__journal--energy-fuels { color: #97701A; }
.pub-item__journal--chem-appl    { color: #26705F; }
.pub-item__journal--chem-anal    { color: #5E3D77; }
.pub-item__journal--biotech      { color: #2A7A66; }
.pub-item__journal--env-sci      { color: #35714A; }
.pub-item__journal--polymer      { color: #7E4C24; }
.pub-item__journal--electrochem  { color: #305C7E; }
.pub-item__journal--chem-inorg   { color: #3A4C8A; }
.pub-item__journal--chem-org     { color: #6E5417; }
.pub-item__journal--eng-ind      { color: #55605B; }
.pub-item__journal--food-sci     { color: #8C4626; }
.pub-item__journal--plant-sci    { color: #2E6E52; }
.pub-item__journal--agri         { color: #626E24; }
.pub-item__journal--other        { color: #5F645D; }
.jcr-category {
  display: inline-block; font-family: var(--mono);
  font-size: .56rem; letter-spacing: .06em; text-transform: uppercase;
  opacity: .62; border-left: 1px solid currentColor;
  padding-left: 7px;
}
.pub-item__title {
  font-weight: 500; font-size: .98rem; color: var(--text);
  line-height: 1.5; margin-bottom: 8px; letter-spacing: -.02em;
}
.pub-item__authors { font-size: .82rem; color: var(--muted); line-height: 1.58; }
.pub-item__authors strong { color: var(--text); font-weight: 600; }
.pub-item__authors .me { color: var(--lime-deep); font-weight: 600; }
.pub-item__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); color: var(--lime-deep);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap; padding-top: 3px;
  border-bottom: 1px solid transparent; transition: border-color .18s, color .18s;
}
.pub-item__link:hover { border-bottom-color: currentColor; }
.pub-item__link--weak { color: var(--muted); }

.role-badge {
  display: inline-block; padding: 2px 7px; border-radius: 0;
  font-size: .55rem; margin-left: 8px; vertical-align: middle;
  white-space: nowrap; border: 1px solid transparent;
}
.role-badge--first    { background: var(--lime-pale); color: var(--ink); }
.role-badge--co-first { background: var(--lime-pale); color: var(--ink); border-color: var(--lime-deep); }
.role-badge--corr  { background: rgba(204,131,67,.2); color: var(--clay-deep); }
.role-badge--co    { background: transparent; border-color: var(--line); color: var(--muted); }
.role-badge + .role-badge { margin-left: 4px; }
/* 교신저자 추정(원문 미확인) — 점선으로 구분 */
.role-badge--corr.is-guess {
  background: transparent; border-color: var(--clay); border-style: dashed;
}

/* 첫 화면의 '최근 논문'은 어두운 섹션 안에 들어갑니다 */
.section--dark .pub-item { border-bottom-color: var(--line-d); }
.section--dark .pub-item:first-child { border-top: 1px solid var(--line-d); }
.section--dark .pub-item:hover { background: rgba(255,255,255,.03); }
.section--dark .pub-item__idx { color: var(--dim); }
.section--dark .pub-item__title { color: var(--paper); }
.section--dark .pub-item__authors { color: var(--dim); }
.section--dark .pub-item__authors strong { color: var(--paper); }
.section--dark .pub-item__authors .me { color: var(--lime); }
.section--dark .pub-item__link { color: var(--lime); }
.section--dark .pub-item__link--weak { color: var(--dim); }
.section--dark .jcr-category { opacity: .8; }
/* 어두운 바탕에서 JCR 색이 가라앉지 않도록 한 단계 밝게 */
.section--dark .pub-item__journal { filter: brightness(1.55) saturate(.85); }
.section--dark .role-badge--co { border-color: var(--line-d); color: var(--dim); }
.section--dark .role-badge--corr { background: rgba(204,131,67,.26); color: #E7B98A; }
.section--dark .pub-empty { border-color: var(--line-d); color: var(--dim); }
.section--dark .pub-empty code { background: rgba(255,255,255,.07); }

.pub-empty {
  background: transparent; border: 1px dashed var(--line);
  padding: 60px 28px; text-align: center;
  color: var(--muted); font-size: .92rem; line-height: 1.72;
  margin-top: 56px;
}
.pub-empty.hidden { display: none; }
.pub-empty code {
  font-family: var(--mono); background: var(--paper-2);
  padding: 2px 6px; font-size: .82em;
}

/* ══ 뉴스 ═══════════════════════════════════════════════ */
.news-list {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.section--dark .news-list { border-top-color: var(--line-d); }
.news-item {
  background: transparent; border-bottom: 1px solid var(--line);
  padding: 26px 0; display: grid; grid-template-columns: 132px 1fr; gap: 24px;
  transition: background .18s;
}
.section--dark .news-item { border-bottom-color: var(--line-d); }
.news-item:hover { background: var(--surface); }
.section--dark .news-item:hover { background: rgba(255,255,255,.03); }
.news-item__date {
  font-family: var(--mono); font-size: .72rem; color: var(--lime-deep);
  letter-spacing: .06em; padding-top: 3px;
}
.section--dark .news-item__date { color: var(--lime); }
.news-item__title { font-weight: 600; font-size: 1rem; margin-bottom: 7px; letter-spacing: -.025em; }
.section--dark .news-item__title { color: var(--paper); }
.news-item__body { color: var(--muted); font-size: .88rem; line-height: 1.72; }
.section--dark .news-item__body { color: var(--dim); }
.news-item--photo { grid-template-columns: 132px 160px 1fr; }
.news-item__media {
  background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  align-self: start;
}
.news-item__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.news-item--clickable { cursor: pointer; }
.news-item__paper-link {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--lime-deep); border-bottom: 1px solid transparent;
}
.news-item__paper-link:hover { border-color: var(--lime-deep); }
.news-item--highlight { animation: news-highlight 2.4s ease-out; }
@keyframes news-highlight {
  0%   { background: var(--lime-pale); }
  100% { background: transparent; }
}

/* ══ 소식 상세 모달 ══════════════════════════════════════ */
.news-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,31,16,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.news-modal[hidden] { display: none; }
.news-modal__panel {
  position: relative; background: var(--paper); max-width: 640px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.news-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 1.4rem; line-height: 1;
  cursor: pointer; transition: background .18s, border-color .18s;
}
.news-modal__close:hover { background: var(--paper-2); border-color: var(--ink); }
.news-modal__img { width: 100%; max-height: 340px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); margin-bottom: 22px; }
.news-modal__date {
  font-family: var(--mono); font-size: .72rem; color: var(--lime-deep);
  letter-spacing: .06em; margin-bottom: 10px;
}
.news-modal__title { font-size: 1.24rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; margin-bottom: 12px; padding-right: 30px; }
.news-modal__journal {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
}
.news-modal__authors { color: var(--muted); font-size: .84rem; line-height: 1.65; margin-bottom: 18px; }
.news-modal__body { color: var(--muted); font-size: .92rem; line-height: 1.75; margin-bottom: 18px; }
.news-modal__doi {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .74rem; color: var(--lime-deep);
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--lime-deep);
}

/* ══ 갤러리 ═════════════════════════════════════════════ */
.gal-event { margin-bottom: 64px; }
.gal-event__head {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.gal-event__date {
  font-family: var(--mono); font-size: .74rem;
  color: var(--lime-deep); letter-spacing: .06em;
}
.gal-event__title { font-size: 1.24rem; font-weight: 500; }
.gal-event__caption { color: var(--muted); font-size: .9rem; margin-bottom: 22px; line-height: 1.72; }
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gal-photo { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.gal-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .25s; }
.gal-photo figcaption {
  padding: 11px 14px; font-size: .77rem; color: var(--muted);
  border-top: 1px solid var(--line);
}
.gal-photo--clickable { cursor: pointer; }
.gal-photo--clickable:hover img { transform: scale(1.04); }

/* ══ 라이트박스 ═════════════════════════════════════════ */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,31,16,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(92vw, 1100px); max-height: 80vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default;
  background: #fff; padding: 12px;
}
.lightbox__caption {
  color: var(--dim); font-size: .84rem; margin-top: 16px; text-align: center; max-width: 70ch;
}
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-d);
  background: transparent; color: var(--paper); font-size: 1.6rem; line-height: 1;
  cursor: pointer; transition: background .18s, border-color .18s;
}
.lightbox__close:hover { background: rgba(255,255,255,.08); border-color: var(--lime); }

/* ══ 푸터 ═══════════════════════════════════════════════ */
.footer { background: var(--ink); border-top: 1px solid var(--line-d); padding: 76px 0 32px; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px;
  margin-bottom: 60px;
}
.footer__kist-logo { margin-bottom: 20px; }
.footer__kist-logo img { height: 52px; width: auto; }
.footer__brand-name {
  font-size: 1.24rem; color: var(--paper); margin-bottom: 14px;
  display: inline-flex; align-items: baseline;
}
.footer__brand-name span { color: var(--lime); }
.footer__desc { color: var(--dim); font-size: .84rem; line-height: 1.78; }
.footer__desc--kr {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-d);
  font-size: .8rem; opacity: .85; letter-spacing: -.01em;
}
.footer__desc a { border-bottom: 1px solid var(--line-d); transition: color .18s, border-color .18s; }
.footer__desc a:hover { color: var(--lime); border-color: var(--lime); }
.footer__col-title { color: var(--dim); font-size: .62rem; margin-bottom: 20px; }
.footer__links li { margin-bottom: 11px; }
.footer__links a { color: var(--paper); font-size: .84rem; opacity: .62; transition: opacity .18s, color .18s; }
.footer__links a:hover { opacity: 1; color: var(--lime); }
.footer__contact-item {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--dim); font-size: .84rem; margin-bottom: 13px; line-height: 1.6;
}
.footer__contact-item svg { flex: none; margin-top: 3px; opacity: .6; }
.footer__contact-item a { color: inherit; }
.footer__contact-item a:hover { color: var(--lime); }
.footer__bottom {
  border-top: 1px solid var(--line-d); padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer__copy { font-family: var(--mono); color: var(--dim); font-size: .66rem; opacity: .7; }
.footer__kist-badge {
  background: transparent; border: 1px solid var(--line-d);
  padding: 6px 11px; color: var(--lime); font-size: .6rem;
}

/* ══ 반응형 ═════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .pi-grid     { grid-template-columns: 1fr; }
  .topic-grid  { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(3, 1fr); }
  .alumni-grid { grid-template-columns: repeat(2, 1fr); }
  .res-block__body { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .nav__menu, .nav__kist-logo { display: none; }
  .hamburger { display: flex; }
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip__grid > div { padding: 32px 24px; border-bottom: 1px solid var(--line-d); }
  .stats-strip__grid > div:nth-child(2n) { border-right: none; }
  .pub-item { grid-template-columns: 1fr; gap: 12px; }
  .pub-item__idx { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .people-grid  { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 68px 0; }
  .join-box { padding: 40px 28px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .nav__inner { padding: 0 20px; }
  .filter-row { padding: 11px 20px; }
  .pi-card { grid-template-columns: 1fr; }
  .pi-photo { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .alumni-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 1fr; gap: 8px; }
  .gal-grid { grid-template-columns: 1fr; }
  .page-header__stats > div {
    border-right: none; padding-right: 0; margin-right: 28px;
  }
}
/* 아주 좁은 화면에서는 구성원 카드도 한 줄에 하나씩 */
@media (max-width: 420px) {
  .people-grid { grid-template-columns: 1fr; }
}

/* 넓은 표·목록이 페이지를 가로로 밀지 않도록 */
.scroll-x { overflow-x: auto; }

/* ══ 움직임 ═════════════════════════════════════════════
   motion_gc_new.js 가 붙이는 클래스들입니다.
   자바스크립트가 꺼져 있으면 will-reveal 이 안 붙으므로
   내용은 처음부터 그냥 보입니다. */
.will-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.is-revealed { opacity: 1; transform: none; }

/* 히어로 배경의 촉매 반응망.
   글이 놓인 왼쪽은 흐리게, 비어 있는 오른쪽으로 갈수록 또렷하게 —
   제목 위를 선이 가로지르지 않도록 마스크를 씌웁니다. */
.hero__canvas, .page-header__canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0,0,0,.3) 32%, #000 60%);
          mask-image: linear-gradient(100deg, transparent 2%, rgba(0,0,0,.3) 32%, #000 60%);
}

/* 아래로 내려가라는 표시 — 선이 천천히 흘러내립니다 */
.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .58rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .14em;
}
.scroll-hint__line {
  width: 1px; height: 38px; background: var(--line-d); overflow: hidden;
}
.scroll-hint__line::after {
  content: ''; display: block; width: 1px; height: 100%;
  background: var(--lime);
  animation: scrollLine 1.9s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* 동작 줄이기를 켠 사람에게는 아무것도 움직이지 않습니다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .will-reveal { opacity: 1; transform: none; transition: none; }
  .hero__canvas, .page-header__canvas { display: none; }
  .scroll-hint__line::after { animation: none; opacity: .6; transform: none; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}