/* 상단 띠 색 — iGEM 초록 */
:root {
  --igem-green: #3FAD6B;

  /* 이 페이지는 버건디 대신 iGEM 초록(#3FAD6B)을 씁니다.
     style.css 의 색 토큰을 여기서 초록 계열로 덮어써서
     버튼·제목·다크 패널·폼까지 한 번에 따라오게 합니다. */
  --plum-900:   #0E2A1A;
  --plum-800:   #16452C;
  --plum-700:   #1D5837;
  --wine-deep:  #2C8452;
  --wine:       #3FAD6B;
  --wine-light: #4FC57C;
  --garnet:     #359A5E;
  --ruby:       #3FAD6B;
  --berry:      #6BC38F;
  --blush:      #B7E3C8;

  --ink:        #14261C;
  --muted:      #6E8377;
  --line:       #DFEDE4;
  --tint:       #F5FAF7;
  --tint-2:     #E8F5EE;

  --grad:       linear-gradient(270deg, #4FC57C 0%, #0E2A1A 100%);
  --shadow:     0 18px 40px -24px rgba(14, 42, 26, .3);
  --shadow-lg:  0 30px 70px -30px rgba(14, 42, 26, .4);

  /* 히어로 연도·제목 공통 크기 — 최대 54pt(=72px), 좁거나 낮은 화면에서는 줄어듭니다 */
  --ig-title: clamp(36px, min(6.4vw, 9vh), 54pt);
}

/* 띠와 헤더가 계속 붙어 있으므로 앵커 이동 위치를 그만큼 내립니다 */
html { scroll-padding-top: calc(var(--ig-chrome, 110px) + 14px); }

/* ============================================================
   iGEM 2027 모집 랜딩 — 페이지 전용 스타일

   레이아웃(구성·격자·요소 배치)은 원본 랜딩 HTML 그대로 옮기고,
   색·서체·모서리 처리만 그래디에듀 본사이트(style.css)의 것을 씁니다.
     · 네이비/민트  → 버건디(--plum-900 / --wine / --blush)
     · 둥근 카드    → 각진 카드(본사이트는 radius 0 이 기본)
     · 버튼         → 본사이트와 같은 알약형(.btn)
   토큰·리셋·모달·등장효과는 style.css 를 그대로 상속합니다.
   ============================================================ */

/* ── 상단 고지 띠 ─────────────────────────────────────── */
/* 화면에 계속 붙어 있고, 스크롤을 내리면 흰색 → 연두색으로 바뀝니다 */
.ig-topbar {
  position: sticky; top: 0; z-index: 101;
  background: #fff; color: var(--plum-900);
  text-align: center; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px;
  transition: background .35s ease, color .35s ease;
}
.ig-scrolled .ig-topbar { background: var(--igem-green); color: #fff; }

/* ── 헤더 — 띠 바로 아래에 붙습니다.
   색은 본사이트 규칙(.is-top = 투명 / 스크롤 후 = 흰 블러)을 그대로 씁니다.
   backdrop-filter 는 헤더 자신이 아니라 ::before 에 있어야 모바일 드로어(fixed)가
   헤더 박스에 갇히지 않습니다 — style.css 의 처리를 그대로 물려받습니다. */
.ig-header.site-header {
  position: sticky; top: var(--ig-topbar-h, 37px);
}
/* 최상단에서는 완전 투명(opacity:0), 스크롤 후에는 불투명한 흰색.
   본사이트는 반투명 + 블러를 쓰지만 여기서는 블러 없이 딱 떨어지게 합니다. */
.ig-header.site-header::before {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ig-header .header-inner { min-height: 72px; }

/* 그래디에듀 로고 옆에 iGEM 2027 로고 — 세로선으로 구분합니다.
   최상단(투명 헤더)에서는 iGEM 글자가 검정이라 안 보이므로 흰 글자 버전으로 교체합니다. */
.ig-brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ig-brand-igem {
  display: inline-flex; align-items: center; flex: none;
  padding-left: 14px; border-left: 1px solid var(--line);
  transition: border-color .3s ease;
}
.ig-brand-igem img { display: block; width: auto; height: 30px; }
.ig-brand-igem .ig-igem-light { display: none; }

.is-top .ig-brand-igem { border-left-color: rgba(255, 255, 255, .4); }
.is-top .ig-brand-igem .ig-igem-dark { display: none; }
.is-top .ig-brand-igem .ig-igem-light { display: block; }

/* ── 히어로 — 좌측 카피 + 우측 궤도 일러스트 ─────────── */
.ig-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  /* 헤더가 최상단에서 투명하므로, 그 뒤로 영상이 비치도록 히어로를 헤더 높이만큼
     끌어올리고 같은 값을 위 여백으로 되돌려 줍니다. 위쪽에 남는 것은 상단 띠뿐이라
     첫 화면 = 띠 + 히어로 로 정확히 한 화면이 됩니다. */
  margin-top: calc(-1 * var(--ig-header-h, 73px));
  padding: calc(var(--ig-header-h, 73px) + clamp(28px, 5vh, 76px)) 0 clamp(32px, 5.5vh, 84px);
  min-height: calc(100vh - var(--ig-topbar-h, 37px));
  min-height: calc(100svh - var(--ig-topbar-h, 37px));
  display: flex; flex-direction: column; justify-content: center;
  /* 영상이 아직 없거나 못 틀 때 그대로 보이는 바탕 */
  background:
    radial-gradient(circle at 82% 18%, rgba(183, 227, 200, .20), transparent 28%),
    radial-gradient(circle at 22% 85%, rgba(44, 132, 82, .35), transparent 30%),
    linear-gradient(135deg, var(--plum-900) 0%, #155235 52%, var(--wine) 100%);
}

/* 배경 영상 — 색은 원본 그대로 두고(버건디 색조 없음), 글자가 읽히도록
   중립 검정 딤만 덮습니다. 가운데는 본문, 아래는 요약 줄에 맞춰 조금 더 짙게. */
.ig-hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.ig-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-hero-dim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 58% at 50% 44%, rgba(0, 0, 0, .58), rgba(0, 0, 0, .30) 72%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .26) 34%, rgba(0, 0, 0, .34) 68%, rgba(0, 0, 0, .62) 100%);
}
.ig-hero::before,
.ig-hero::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}
.ig-hero::before { width: 520px; height: 520px; right: -140px; top: -220px; }
.ig-hero::after  { width: 390px; height: 390px; left: -210px; bottom: -240px; }

/* 히어로 본문 — 한 단 가운데 정렬.
   세로 배치라 flex:1 은 남은 '높이'만 차지하고, 가로는 .wrap 이 정합니다 */
.ig-hero-inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

/* 연도는 본사이트의 슬롯머신 숫자(odometer)를 그대로 씁니다 —
   화면에 들어오면 main.js 가 .is-rolled 를 붙여 촤라락 굴립니다 */
.ig-eyebrow { margin-bottom: 6px; color: #fff; }
.ig-year {
  display: inline-flex; align-items: baseline;
  font-size: var(--ig-title); font-weight: 700;
  line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
/* '년' 은 숫자와 같이 커지도록 em 으로 잡습니다 */
.ig-year-suffix { font-size: .68em; margin-left: .05em; }

.ig-h1 {
  max-width: 880px; margin: clamp(8px, 1.8vh, 18px) 0 clamp(10px, 2.3vh, 22px);
  font-size: var(--ig-title); font-weight: 700;
  line-height: 1.04; letter-spacing: -.035em;
}
/* 제목 안에 들어가는 iGEM 로고 — 글자 높이에 맞춰 자연스럽게 흐르게 합니다 */
.ig-title-logo {
  display: inline-block; height: 1.34em; width: auto;
  vertical-align: -.36em; margin: 0 .04em;
}

.ig-hero-copy {
  max-width: 660px; color: rgba(255, 255, 255, .88);
  font-size: clamp(15px, min(1.3vw, 2.4vh), 18px); line-height: 1.6;
}

.ig-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; margin-top: clamp(18px, 3.4vh, 34px);
}

/* ── 히어로 하단 요약 — 상자 없이 라인으로만 구분 ───── */
.ig-facts {
  position: relative; z-index: 2; flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(18px, 3.4vh, 54px); padding-top: clamp(16px, 2.6vh, 26px);
  border-top: 1px solid rgba(255, 255, 255, .24);
}
.ig-fact { padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .24); }
.ig-fact:first-child { padding-left: 0; border-left: 0; }
.ig-fact:last-child { padding-right: 0; }
.ig-fact strong {
  display: block; font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; color: #fff; margin-bottom: 6px;
}
.ig-fact span { color: rgba(255, 255, 255, .74); font-size: 13px; line-height: 1.5; }

/* ── 섹션 공통 ────────────────────────────────────────── */
.ig-section { padding: clamp(76px, 9vw, 104px) 0; }
.ig-section-soft { background: var(--tint); }
.ig-section-flush { padding-top: 0; }
/* 화면 폭 전체로 펼쳐지는 띠 — 안쪽 여백은 카드가 직접 가집니다 */
.ig-section-bleed { padding: 0; }

/* 섹션 배경 영상 — 전체를 꽉 채워 잘라 넣고(크롭) 그 위에 중립 검정 딤.
   현재는 맨 아래 신청 섹션(.ig-apply)에서 씁니다. */
.ig-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.ig-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-media-dim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .34) 40%, rgba(0, 0, 0, .40) 100%);
}

/* 제목 아래에 설명을 바로 붙이는 한 덩어리 구성 — 모든 섹션이 같은 모양입니다 */
.ig-head { position: relative; z-index: 4; margin-bottom: clamp(24px, 4vh, 44px); }
.ig-h2 {
  margin: 0; max-width: 700px;
  font-size: clamp(33px, 4.4vw, 52px); font-weight: 700;
  line-height: 1.08; letter-spacing: -.032em; color: var(--plum-900);
}
.ig-h2 .accent { color: var(--wine); }
.ig-intro { max-width: 620px; margin-top: 16px; color: var(--muted); font-size: 16.5px; }

/* ── 모집 트랙 ────────────────────────────────────────── */
.ig-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ig-track {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 30px 32px; border: 1px solid var(--line); background: #fff; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ig-track:hover { transform: translateY(-7px); box-shadow: var(--shadow); }

/* 순번을 배경처럼 크고 아주 연하게 깝니다 (동그라미 없음) */
.ig-tracks { counter-reset: ig-track; }
.ig-track { counter-increment: ig-track; }
.ig-track > * { position: relative; z-index: 1; }
.ig-track::after {
  content: counter(ig-track);
  position: absolute; right: 16px; bottom: -26px; z-index: 0;
  font-size: 148px; font-weight: 700; line-height: 1; letter-spacing: -.05em;
  color: rgba(20, 38, 28, .09);
  pointer-events: none;
}
.ig-track h3 {
  margin: 0 0 15px; font-size: 25px; font-weight: 700;
  line-height: 1.14; letter-spacing: -.03em; color: var(--plum-900);
}
.ig-track p { position: relative; z-index: 2; margin: 0; color: var(--muted); font-size: 15px; }

.ig-cap {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 10px; color: var(--wine); font-size: 15px; font-weight: 700;
}
.ig-cap strong {
  font-size: 34px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--wine);
}

/* ── 진행 흐름 — 좌측 고정 + 우측 타임라인 ───────────── */
.ig-journey {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start;
}
.ig-journey-sticky { position: sticky; top: 110px; }
.ig-journey-sticky p { color: var(--muted); font-size: 16.5px; max-width: 440px; margin-top: 16px; }
.ig-journey-sticky .btn { margin-top: 30px; }

.ig-timeline { position: relative; padding-left: 32px; }
.ig-timeline::before {
  content: ''; position: absolute; left: 10px; top: 11px; bottom: 18px;
  width: 2px; background: linear-gradient(var(--wine), var(--berry));
}
.ig-step {
  position: relative; display: grid; grid-template-columns: 64px 1fr;
  gap: 18px; padding: 0 0 36px 18px;
}
.ig-step::before {
  content: ''; position: absolute; left: -29px; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 5px solid var(--wine);
  box-shadow: 0 0 0 6px rgba(63, 173, 107, .16);
}
.ig-step-no {
  color: var(--wine); font-size: 26px; font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ig-step h3 {
  margin: 2px 0 7px; font-size: 21px; font-weight: 700;
  letter-spacing: -.025em; color: var(--plum-900);
}
.ig-step p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ── 참가 경험 — 다크 패널 + 2×2 카드 ────────────────── */
/* 인물이 패널 위로 나오므로 그 자리만큼 격자를 내려 섹션 설명과 겹치지 않게 합니다 */
.ig-exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(64px, 7vh, 84px); }

/* 인물 사진이 패널 위로 삐져나오도록 overflow 를 열어 둡니다 */
.ig-exp-main {
  position: relative; overflow: visible; min-height: 520px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 44px; color: #fff;
  background:
    radial-gradient(circle at 82% 16%, rgba(183, 227, 200, .32), transparent 30%),
    linear-gradient(145deg, var(--plum-900), var(--wine-deep));
}
/* 인물이 패널 위쪽으로 머리·어깨를 내밀도록 패널보다 크게 잡습니다.
   아래쪽은 스크림으로 덮어 그 위에 글이 놓입니다(사진 카드와 같은 방식). */
.ig-exp-person {
  position: absolute; right: -6%; bottom: 0; z-index: 1;
  height: calc(100% + 44px); width: auto; max-width: none;
  pointer-events: none; user-select: none;
}
.ig-exp-main::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 32, 20, .95) 0%, rgba(10, 32, 20, .82) 26%, rgba(10, 32, 20, .3) 52%, rgba(10, 32, 20, 0) 72%);
}
.ig-exp-main-text { position: relative; z-index: 3; max-width: 72%; }
.ig-exp-main h3 {
  position: relative; margin: 0 0 12px;
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.032em;
}
.ig-exp-main p { position: relative; color: #C6E4D2; font-size: 15.5px; }

.ig-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* 사진 카드 — 아래쪽에 어두운 그라데이션을 깔고 그 위에 흰 글씨 */
.ig-benefit {
  position: relative; overflow: hidden; min-height: 324px;
  display: flex; align-items: flex-end;
  background: var(--plum-900);
}
.ig-benefit img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ig-benefit::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8, 24, 15, .94) 0%, rgba(8, 24, 15, .72) 32%, rgba(8, 24, 15, .18) 64%, rgba(8, 24, 15, 0) 100%);
}
.ig-benefit-text { position: relative; z-index: 2; padding: 24px 24px 26px; }
.ig-benefit h4 {
  margin: 0 0 8px; font-size: 20px; font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em; color: #fff;
}
.ig-benefit p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.5; }

/* ── 실험실 위치 — 다크 카드 안에 주소 카드 ──────────── */
.ig-lab-card { padding: clamp(52px, 7vw, 88px) 0; }
.ig-lab-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.ig-lab-copy .ig-h2 { margin-bottom: 20px; }
.ig-lab-copy p { max-width: 610px; margin: 0; color: var(--muted); font-size: 16.5px; }

/* 위 절반은 지도, 아래 절반은 시설 정보 */
.ig-address {
  display: grid; grid-template-rows: 1fr 1fr; min-height: 460px;
  overflow: hidden; color: var(--ink); background: #fff;
  box-shadow: 0 16px 40px -22px rgba(14, 42, 26, .3);
}
.ig-address-map { position: relative; background: var(--tint); }
.ig-address-map iframe {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; border: 0;
}
.ig-address-body {
  padding: 26px 30px; display: flex; flex-direction: column; justify-content: center;
}
.ig-address h3 {
  margin: 0 0 12px; font-size: 25px; font-weight: 700;
  line-height: 1.14; letter-spacing: -.03em; color: var(--plum-900);
}
.ig-address address { margin: 0; font-style: normal; color: #43594C; font-size: 16px; line-height: 1.7; }
.ig-address-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600;
}

/* 지도 앱 바로가기 */
.ig-map-links { display: flex; gap: 8px; flex: none; }
.ig-map-links a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ig-map-links a:hover {
  border-color: var(--blush); transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(14, 42, 26, .5);
}
.ig-map-links svg { width: 18px; height: 18px; display: block; }
.ig-map-links img { width: auto; height: 21px; display: block; }

/* ── 비용 안내 ────────────────────────────────────────── */
.ig-funding-box {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px;
  align-items: center; padding: 48px;
  background: var(--tint-2); border: 1px solid rgba(183, 227, 200, .85);
}
.ig-funding-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px; border-radius: 999px;
  color: var(--wine-deep); background: rgba(183, 227, 200, .65);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.ig-funding-box h3 {
  margin: 18px 0 0; font-size: clamp(26px, 3vw, 35px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.032em; color: var(--plum-900);
}
.ig-funding-copy p { margin: 0 0 12px; color: #54705F; font-size: 15.5px; }
.ig-funding-copy p:last-child { margin-bottom: 0; }
.ig-funding-copy strong { color: var(--ink); font-weight: 700; }

/* ── 신청 ─────────────────────────────────────────────── */
.ig-apply { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--plum-900); }
/* 폼이 놓이는 자리라 딤을 조금 더 짙게 */
.ig-apply .ig-media-dim {
  background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .48) 45%, rgba(0, 0, 0, .58) 100%);
}
.ig-apply::after {
  content: ''; position: absolute; width: 550px; height: 550px; border-radius: 50%;
  right: -200px; bottom: -330px; background: rgba(44, 132, 82, .35);
}
.ig-apply-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start;
}
.ig-apply-copy .ig-h2 { color: #fff; }
.ig-apply-copy .ig-h2 .accent { color: var(--blush); }
.ig-apply-copy > p { max-width: 470px; margin-top: 16px; color: #D6B4BB; font-size: 16.5px; }

.ig-list { margin: 26px 0 0; color: #C6E4D2; }
.ig-list li { position: relative; margin: 12px 0; padding-left: 26px; font-size: 15.5px; }
.ig-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blush); font-weight: 700; }

.ig-form-card { padding: 34px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(8, 26, 16, .35); }
.ig-form-card h3 {
  margin: 0 0 7px; font-size: 25px; font-weight: 700;
  letter-spacing: -.028em; color: var(--plum-900);
}
.ig-form-card > p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

.ig-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ig-field { display: flex; flex-direction: column; gap: 7px; }
.ig-field.full { grid-column: 1 / -1; }
.ig-field > span { font-size: 12px; font-weight: 700; color: var(--plum-800); }
.ig-field em { color: var(--wine); font-style: normal; }

.ig-field input, .ig-field select, .ig-field textarea {
  width: 100%; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 0;
  padding: 12px 13px; color: var(--ink); background: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ig-field textarea { min-height: 108px; resize: vertical; }
.ig-field input:focus, .ig-field select:focus, .ig-field textarea:focus {
  border-color: var(--wine); box-shadow: 0 0 0 3px rgba(63, 173, 107, .16);
}
.ig-field input::placeholder, .ig-field textarea::placeholder { color: #B79BA1; }
.ig-field select {
  -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7076' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 18px;
}

.ig-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; font-size: 13px; color: var(--muted);
}
.ig-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--wine); flex: none; }
.ig-consent .link-btn { text-align: left; font-size: 13px; }

.ig-submit {
  width: 100%; margin-top: 17px; min-height: 54px;
  border: 0; border-radius: 0; cursor: pointer;
  color: #fff; background: var(--wine);
  font: inherit; font-size: 16px; font-weight: 700;
  transition: background .2s ease;
}
.ig-submit:hover { background: var(--wine-light); }
.ig-form-note { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ── 푸터 ─────────────────────────────────────────────── */
.ig-footer { padding: 36px 0; color: #7E958A; background: #08190F; font-size: 12.5px; line-height: 1.7; }
.ig-footer-grid { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.ig-footer-brand { display: block; margin-bottom: 6px; color: #fff; font-weight: 700; font-size: 15px; }
.ig-footer a:hover { color: #fff; }
.ig-disclaimer { max-width: 760px; }

/* ── 반응형 — 원본 분기점(980 / 640)을 그대로 씁니다 ── */
@media (max-width: 980px) {
  .ig-journey,
  .ig-exp-grid,
  .ig-lab-inner,
  .ig-funding-box,
  .ig-apply-grid { grid-template-columns: 1fr; }
  .ig-facts { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .ig-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ig-fact:nth-child(n+3) { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .24); }
  .ig-tracks { grid-template-columns: 1fr; }
  .ig-journey-sticky { position: static; }
}

@media (max-width: 640px) {
  /* 좁은 화면에서는 vw 기준으로 다시 키웁니다 — 위쪽 clamp 의 하한이 낮아
     휴대폰에서 제목이 작아 보이던 것을 여기서 바로잡습니다 */
  :root { --ig-title: clamp(40px, 12vw, 54pt); }
  .ig-hero-copy { font-size: 16.5px; }
  .ig-h2 { font-size: clamp(32px, 9.6vw, 44px); }
  .ig-intro { font-size: 16px; }
  .ig-exp-main h3 { font-size: clamp(27px, 7.6vw, 34px); }
  .ig-funding-box h3 { font-size: clamp(25px, 7vw, 32px); }
  .ig-track h3,
  .ig-address h3,
  .ig-form-card h3 { font-size: 23px; }
  .ig-step h3 { font-size: 19px; }
  .ig-benefit h4 { font-size: 20px; }

  .ig-brand-lockup { gap: 10px; }
  .ig-brand-igem { padding-left: 10px; }
  .ig-brand-igem img { height: 24px; }

  .ig-topbar { font-size: 10.5px; letter-spacing: .05em; }
  .ig-header .header-inner { min-height: 62px; }
  .ig-hero-copy { font-size: 16px; }
  .ig-actions .btn { width: 100%; }
  .ig-facts { grid-template-columns: 1fr; row-gap: 18px; }
  .ig-fact { padding: 0; border-left: 0; }
  .ig-fact:nth-child(n+2) { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .24); }
  .ig-exp-main { min-height: 430px; padding: 30px; }
  .ig-exp-person { height: calc(100% + 28px); right: -8%; }
  .ig-exp-main-text { max-width: 88%; }
  .ig-benefits, .ig-form-grid { grid-template-columns: 1fr; }
  .ig-field.full { grid-column: auto; }
  .ig-funding-box, .ig-form-card { padding: 28px; }
  .ig-footer-grid { flex-direction: column; }
}

/* ── 헤더 오른쪽 묶음 — 메뉴 · 지구본 · 햄버거 ──────────
   지구본을 햄버거 바로 옆에 두려면 셋이 한 묶음이어야 합니다.
   (헤더가 space-between 이라 따로 두면 가운데로 밀립니다) */
.ig-header-right { display: flex; align-items: center; gap: 4px; }
.ig-header-right .nav { margin-right: 14px; }

/* 지구본 버튼 + 드롭다운 — 기본은 스크롤 후(흰 헤더) 기준 */
.ig-lang { position: relative; flex: none; }

.ig-lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 999px; background: none;
  color: var(--plum-900); cursor: pointer;
  transition: background .2s, color .2s;
}
.ig-lang-btn:hover { background: var(--tint); }
.is-top .ig-lang-btn { color: #fff; }
.is-top .ig-lang-btn:hover { background: rgba(255, 255, 255, .16); }

.ig-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 5;
  min-width: 138px; padding: 6px; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 44px -20px rgba(14, 42, 26, .45);
}
.ig-lang-menu[hidden] { display: none; }
.ig-lang-menu a {
  display: block; padding: 9px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--plum-800); white-space: nowrap;
  transition: background .2s, color .2s;
}
.ig-lang-menu a:hover { background: var(--tint); color: var(--plum-900); }
.ig-lang-menu a.is-on { color: var(--wine); }
.ig-lang-menu a.is-on::before { content: '✓'; margin-right: 7px; font-weight: 700; }

/* rich() 의 강조 표시를 굵은 본문으로 (비용 안내 문단) */
.ig-strong { color: var(--ink); font-weight: 700; }

@media (max-width: 880px) {
  /* 메뉴가 드로어(fixed)로 빠지므로 지구본과 햄버거만 나란히 남습니다 */
  .ig-header-right .nav { margin-right: 0; }
}

/* 모션을 줄이도록 설정한 기기에서는 영상 대신 포스터 이미지만 */
@media (prefers-reduced-motion: reduce) {
  .ig-hero-media video { display: none; }
  .ig-hero-media {
    background: url(../img/igem-hero-poster.jpg) center / cover no-repeat;
  }
}