:root {
  --bg: #000000;
  /* 배경을 완전한 검정으로 설정 */
  --text: #ffffff;
  --header-h: 70px;
  --glass: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  /* 스크롤 애니메이션을 위해 overflow: hidden 해제 */
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    /* 모바일에서 스크롤 민감도 조절 */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body {
    /* 모바일 스크롤 높이 조정 */
    min-height: 300vh;
  }
}

body {
  margin: 0;
  font-family: "Pretendard", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 500vh;
  /* 스크롤 길이를 확보 (섹션 수에 맞춰 조정) */
}

/* ================= Header (Unified Design) ================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .site-header {
    padding: 0 20px;
    height: 60px;
  }
}

.logo {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.2em;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
}

.nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .nav {
    gap: 6px;
  }
}

/* 일반 내비게이션 링크 */
.nav a {
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  opacity: 0.5;
  transition: all 0.3s ease;
  padding: 8px 12px;
}

.nav a:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .nav a {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* 두 번째 코드의 .navBtnLink 스타일 (About 버튼에 적용) */
.nav .navBtnLink {
  opacity: 1;
  /* 투명도 해제 */
  font-size: 14px;
  padding: 10px 18px;
  /* 일반 링크보다 살짝 크게 */
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  /* 미세하게 더 밝은 배경 */
  backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 500;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .nav .navBtnLink {
    font-size: 11px;
    padding: 6px 10px;
  }
}

.nav .navBtnLink:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* 활성화 상태 (is-active) */
.nav a.is-active {
  opacity: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  /* 혹은 배경 강조 */
}

:root {
  --bg: #000000;
  /* 배경을 완전한 검정으로 설정 */
  --text: #ffffff;
  --header-h: 70px;
  --glass: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  /* 스크롤 애니메이션을 위해 overflow: hidden 해제 */
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Pretendard", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 500vh;
  /* 스크롤 길이를 확보 (섹션 수에 맞춰 조정) */
}

/* ================= Header (Unified Design) ================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .site-header {
    padding: 0 20px;
    height: 60px;
  }
}

.logo {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.2em;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
}

.nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .nav {
    gap: 6px;
  }
}

/* 일반 내비게이션 링크 */
.nav a {
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  opacity: 0.5;
  transition: all 0.3s ease;
  padding: 8px 12px;
}

.nav a:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .nav a {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* 두 번째 코드의 .navBtnLink 스타일 (About 버튼에 적용) */
.nav .navBtnLink {
  opacity: 1;
  /* 투명도 해제 */
  font-size: 14px;
  padding: 10px 18px;
  /* 일반 링크보다 살짝 크게 */
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  /* 미세하게 더 밝은 배경 */
  backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 500;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .nav .navBtnLink {
    font-size: 11px;
    padding: 6px 10px;
  }
}

.nav .navBtnLink:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* 활성화 상태 (is-active) */
.nav a.is-active {
  opacity: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  /* 혹은 배경 강조 */
}

/* ================= Hero & Canvas (스크롤 시 고정) ================= */
.hero {
  position: fixed;
  /* 화면에 완전히 고정 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  pointer-events: none;
  /* 하위 요소(hero-ui) 외에는 클릭 통과 */
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: auto;
  /* 원 클릭/호버 허용 */
}

/* UI Overlay (중앙 정렬 및 텍스트 전환 애니메이션) */
.hero-ui {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  text-align: center;
  width: 100%;
  max-width: none;
}

.hero-right {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heroTitle {
  margin: 0;
  font-size: clamp(32px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (max-width: 768px) {
  .heroTitle {
    font-size: clamp(28px, 10vw, 48px);
  }
}

.heroTitle span {
  display: block;
  font-size: 0.35em;
  font-weight: 300;
  letter-spacing: 0.25em;
  margin-top: 15px;
  opacity: 0.6;
}

.heroLead {
  margin: 30px 0 15px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.5;
  max-width: 50ch;
  word-break: keep-all;
  transition: opacity 0.5s ease;
}

@media (max-width: 768px) {
  .heroLead {
    font-size: 14px;
    margin: 20px 0 10px;
    padding: 0 20px;
  }
}

/* 스크롤 가이드 공간 (실제 스크롤 가능하게 함) */
.scroll-spacer {
  height: 500vh;
  /* 스크롤의 총 길이 */
  width: 100%;
  pointer-events: none;
}

/* ================= Footer ================= */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.4;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 20px;
    font-size: 8px;
    flex-direction: column;
    gap: 8px;
  }
}

/* ================= Modal ================= */
/* ================= Modal (Glass UI) — ORIGINAL STYLE RESTORE ================= */
/* ✅ 이 블록으로 "Modal" 관련 부분만 통째로 교체해줘 (hero/헤더는 건드리지 않음) */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.modal.is-open {
  display: block;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 24px));
  height: min(720px, calc(100vh - 120px));
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.40);
  overflow: hidden;

  opacity: 0;
  animation: bioIn .28s ease-out forwards;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.9);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
}

/* ================= About layout (ORIGINAL) ================= */
.aboutGrid {
  height: 100%;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.aboutCard {
  padding: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aboutPhoto {
  width: 260px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.aboutPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aboutName {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 800;
  font-size: 18px;
}

.aboutMeta {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin-top: -6px;
}

.aboutLinks {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aboutLinks a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}

.aboutText {
  padding: 34px 36px;
  overflow: auto;
  color: rgba(255, 255, 255, 0.88);
}

.aboutText h2 {
  margin: 0 0 18px;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.95);
}

.aboutText p {
  margin: 0 0 14px;
  line-height: 1.65;
  font-size: 15px;
  max-width: 75ch;
}

.aboutNote {
  opacity: .85;
}

@media (max-width: 980px) {
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .aboutCard {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 18px;
  }

  .aboutPhoto {
    height: 260px;
    width: 100%;
    max-width: 360px;
  }

  .aboutText {
    padding: 24px 20px;
  }

  .aboutText h2 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .modal__panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 80px);
    border-radius: 16px;
  }

  .aboutCard {
    padding: 14px;
  }

  .aboutPhoto {
    max-width: 100%;
  }

  .aboutText {
    padding: 18px 16px;
  }

  .aboutText h2 {
    font-size: 24px;
  }

  .aboutText p {
    font-size: 14px;
  }
}

/* About Modal Language Button */
.aboutControls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 60;
}

.aboutLangBtn {
  position: relative;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.aboutLangBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.aboutLang {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.aboutLang.is-active {
  opacity: 1;
}

.aboutLangSep {
  opacity: 0.3;
}

.modal__panel .aboutControls .modal__close {
  position: static;
  top: auto;
  right: auto;
}

/* =========================
   Bio Modal (Glass)
   ========================= */
.modal__panel--bio {
  position: absolute;
  /* ✅ About과 동일 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* ✅ 중앙 */

  width: min(1080px, calc(100vw - 32px));
  height: min(86vh, 920px);
  /* ✅ max-height 대신 height 추천 (스크롤 안정적) */
  overflow: auto;

  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);

  padding: 22px;
  z-index: 1;

  /* ✅ 등장 애니메이션 (중앙 기준 살짝 아래에서 올라옴) */
  opacity: 0;
  animation: bioIn .28s ease-out forwards;
}

@keyframes bioIn {
  from {
    transform: translate(-50%, calc(-50% + 18px));
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

/* 헤더 */
.bioHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 14px;
}

.bioKicker {
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.70);
}

.bioTitle {
  margin: 6px 0 6px;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.bioSub {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.bioEdu {
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;

  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.7;
  max-width: 78ch;

  /* ✅ 줄바꿈 핵심 */
  white-space: pre-line;
}


.bioLegend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  white-space: nowrap;
}

.bioDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 4px rgba(255, 255, 140, 0.18);
}

/* ===== Bio Language Switch ===== */
.bioLangToggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Language Toggle Button (Bio Modal) */
.bioLangBtn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bioLangBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.bioLangBtn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.bioLangBtn.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.26);
}

/* ✅ Bio modal top-right controls wrapper */
.modal__panel--bio {
  position: relative;
  /* absolute 기준점 */
}

/* KR + X를 같이 오른쪽 상단 끝으로 */
.bioControls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 60;
}

/* ✅ bio 모달 안에서는 close 버튼의 absolute 규칙 해제 */
.modal__panel--bio .bioControls .modal__close {
  position: static;
  top: auto;
  right: auto;
}


/* =========================
   Timeline layout
   ========================= */
.bioTimeline {
  position: relative;
  padding: 18px 6px 10px;
}

/* 중앙 라인 */
.bioTimeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(-50%);
}

/* 아이템 */
.bioItem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  /* left | line | right */
  gap: 14px;
  padding: 18px 0;
}

.bioYearLabel {
  grid-column: 1 / -1;
  text-align: center;
  margin: 4px 0 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.01em;
}

.bioNode {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
}

.bioNodeDot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 255, 140, 0.16);
}

/* ===== Timeline dot color sync with role ===== */

/* default (no roleTag) */
.bioNodeDot {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14);
}

/* choreo */
.bioItem.role-choreo .bioNodeDot {
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 255, 140, 0.18);
}

/* tech */
.bioItem.role-tech .bioNodeDot {
  background: rgba(105, 123, 255, 0.95);
  box-shadow: 0 0 0 6px rgba(105, 123, 255, 0.18);
}

/* research */
.bioItem.role-research .bioNodeDot {
  background: rgba(233, 129, 191, 0.95);
  box-shadow: 0 0 0 6px rgba(233, 129, 191, 0.18);
}


/* ===== Role pill 기본 ===== */
.bioCardMetaRow .bioPill:first-child {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

/* ===== choreo ===== */
.bioCardItem.role-choreo .bioCardMetaRow .bioPill:first-child {
  background: rgba(255, 255, 140, 0.95);
  border-color: rgba(255, 255, 140, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 140, 0.18);
}

/* ===== tech ===== */
.bioCardItem.role-tech .bioCardMetaRow .bioPill:first-child {
  background: rgba(105, 123, 255, 0.90);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(105, 123, 255, 0.18);
}

/* ===== research ===== */
.bioCardItem.role-research .bioCardMetaRow .bioPill:first-child {
  background: rgba(233, 129, 191, 0.90);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(233, 129, 191, 0.18);
}

/* 카드 */
.bioCardItem {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}


.bioCardMedia {
  height: 140px;
  background: rgba(255, 255, 255, 0.06);
}

.bioCardMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(0.92);
}

.bioCardBody {
  padding: 10px 12px 12px;
}

.bioCardMetaRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bioPill {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
}

.bioCardTitle2 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.bioCardDesc {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 좌/우 번갈아 배치 */
.bioColLeft {
  grid-column: 1;
}

.bioColRight {
  grid-column: 3;
}

/* footer */
.bioFooter {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.bioFooter .bioCard {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: 12px 14px;
}

.bioCardTitle {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bioCarddate {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  margin-top: 5px;
}

.bioCardMeta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  margin-top: 2px;
}

.bioCardLinks {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
}

.bioCardLinks a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.bioCopy {
  color: rgba(255, 255, 255, 0.60);
  font-size: 12px;
}

/* 모바일: 중앙 라인 제거하고 1열로 */
@media (max-width: 860px) {
  .bioTimeline::before {
    left: 10px;
    transform: none;
  }

  .bioItem {
    grid-template-columns: 26px 1fr;
  }

  .bioNode {
    grid-column: 1;
  }

  .bioColLeft,
  .bioColRight {
    grid-column: 2;
  }

  .bioYearLabel {
    text-align: left;
    padding-left: 26px;
  }

  .modal__panel--bio {
    padding: 16px;
  }

  .bioHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bioTitle {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .modal__panel--bio {
    width: calc(100vw - 16px);
    height: calc(100vh - 80px);
    border-radius: 16px;
    padding: 12px;
  }

  .bioTitle {
    font-size: 20px;
  }

  .bioCardItem {
    border-radius: 12px;
  }

  .bioCardMedia {
    height: 120px;
  }
}

/* ===== Year Tabs (Glass UI) ===== */
.bioYearTabs {
  margin: 12px 6px 10px;
}

.bioYearTabsInner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.bioYearTab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.bioYearTab:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
}

.bioYearTab.is-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ===== Year Doc (Structure 1) — smaller typography ===== */
.yearDoc {
  padding: 2px 6px 0;
}

.yearDocHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
}

.yearAccent {
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 5px rgba(255, 255, 140, 0.10);
}

.yearDocTitle {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.94);
}

.yearSummary {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.7;
  max-width: 86ch;
}

.yearSummaryLine {
  margin: 0 0 6px;
}

.yearSection {
  margin-top: 8px;
}

.yearSectionTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.90);
}

.yearBullet {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.90);
}

.yearRows {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 10px;
}

.yearRow {
  display: grid;
  grid-template-columns: 150px 1fr;
  /* 날짜 | 내용 */
  gap: 12px;
  padding: 8px 0;
  align-items: start;
}

.yearDate {
  font-size: 13px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.70);
  white-space: nowrap;
}

.yearText {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.60);
  white-space: pre-line;
  /* \n 줄바꿈 */
}

.yearFootnote {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.yearFootnote a {
  color: rgba(255, 255, 140, 0.95);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 스크롤 가이드 공간 (실제 스크롤 가능하게 함) */
.scroll-spacer {
  height: 500vh;
  /* 스크롤의 총 길이 */
  width: 100%;
  pointer-events: none;
}

/* ================= Footer ================= */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.4;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 20px;
    font-size: 8px;
    flex-direction: column;
    gap: 8px;
  }
}

/* ================= Modal ================= */
/* ================= Modal (Glass UI) — ORIGINAL STYLE RESTORE ================= */
/* ✅ 이 블록으로 "Modal" 관련 부분만 통째로 교체해줘 (hero/헤더는 건드리지 않음) */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.modal.is-open {
  display: block;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 24px));
  height: min(720px, calc(100vh - 120px));
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.40);
  overflow: hidden;

  opacity: 0;
  animation: bioIn .28s ease-out forwards;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.9);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
}

/* ================= About layout (ORIGINAL) ================= */
.aboutGrid {
  height: 100%;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.aboutCard {
  padding: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aboutPhoto {
  width: 260px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.aboutPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aboutName {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 800;
  font-size: 18px;
}

.aboutMeta {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin-top: -6px;
}

.aboutLinks {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aboutLinks a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}

.aboutText {
  padding: 34px 36px;
  overflow: auto;
  color: rgba(255, 255, 255, 0.88);
}

.aboutText h2 {
  margin: 0 0 18px;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.95);
}

.aboutText p {
  margin: 0 0 14px;
  line-height: 1.65;
  font-size: 15px;
  max-width: 75ch;
}

.aboutNote {
  opacity: .85;
}

@media (max-width: 980px) {
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .aboutCard {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 18px;
  }

  .aboutPhoto {
    height: 260px;
    width: 100%;
    max-width: 360px;
  }

  .aboutText {
    padding: 24px 20px;
  }

  .aboutText h2 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .modal__panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 80px);
    border-radius: 16px;
  }

  .aboutCard {
    padding: 14px;
  }

  .aboutPhoto {
    max-width: 100%;
  }

  .aboutText {
    padding: 18px 16px;
  }

  .aboutText h2 {
    font-size: 24px;
  }

  .aboutText p {
    font-size: 14px;
  }
}

/* About Modal Language Button */
.aboutControls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 60;
}

.aboutLangBtn {
  position: relative;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.aboutLangBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.aboutLang {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.aboutLang.is-active {
  opacity: 1;
}

.aboutLangSep {
  opacity: 0.3;
}

.modal__panel .aboutControls .modal__close {
  position: static;
  top: auto;
  right: auto;
}

/* =========================
   Bio Modal (Glass)
   ========================= */
.modal__panel--bio {
  position: absolute;
  /* ✅ About과 동일 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* ✅ 중앙 */

  width: min(1080px, calc(100vw - 32px));
  height: min(86vh, 920px);
  /* ✅ max-height 대신 height 추천 (스크롤 안정적) */
  overflow: auto;

  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);

  padding: 22px;
  z-index: 1;

  /* ✅ 등장 애니메이션 (중앙 기준 살짝 아래에서 올라옴) */
  opacity: 0;
  animation: bioIn .28s ease-out forwards;
}

@keyframes bioIn {
  from {
    transform: translate(-50%, calc(-50% + 18px));
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

/* 헤더 */
.bioHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 14px;
}

.bioKicker {
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.70);
}

.bioTitle {
  margin: 6px 0 6px;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.bioSub {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.bioEdu {
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;

  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.7;
  max-width: 78ch;

  /* ✅ 줄바꿈 핵심 */
  white-space: pre-line;
}


.bioLegend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  white-space: nowrap;
}

.bioDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 4px rgba(255, 255, 140, 0.18);
}

/* ===== Bio Language Switch ===== */
.bioLangToggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Language Toggle Button (Bio Modal) */
.bioLangBtn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bioLangBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.bioLangBtn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.bioLangBtn.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.26);
}

/* ✅ Bio modal top-right controls wrapper */
.modal__panel--bio {
  position: relative;
  /* absolute 기준점 */
}

/* KR + X를 같이 오른쪽 상단 끝으로 */
.bioControls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 60;
}

/* ✅ bio 모달 안에서는 close 버튼의 absolute 규칙 해제 */
.modal__panel--bio .bioControls .modal__close {
  position: static;
  top: auto;
  right: auto;
}


/* =========================
   Timeline layout
   ========================= */
.bioTimeline {
  position: relative;
  padding: 18px 6px 10px;
}

/* 중앙 라인 */
.bioTimeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(-50%);
}

/* 아이템 */
.bioItem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  /* left | line | right */
  gap: 14px;
  padding: 18px 0;
}

.bioYearLabel {
  grid-column: 1 / -1;
  text-align: center;
  margin: 4px 0 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.01em;
}

.bioNode {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
}

.bioNodeDot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 255, 140, 0.16);
}

/* ===== Timeline dot color sync with role ===== */

/* default (no roleTag) */
.bioNodeDot {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14);
}

/* choreo */
.bioItem.role-choreo .bioNodeDot {
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 255, 140, 0.18);
}

/* tech */
.bioItem.role-tech .bioNodeDot {
  background: rgba(105, 123, 255, 0.95);
  box-shadow: 0 0 0 6px rgba(105, 123, 255, 0.18);
}

/* research */
.bioItem.role-research .bioNodeDot {
  background: rgba(233, 129, 191, 0.95);
  box-shadow: 0 0 0 6px rgba(233, 129, 191, 0.18);
}


/* ===== Role pill 기본 ===== */
.bioCardMetaRow .bioPill:first-child {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

/* ===== choreo ===== */
.bioCardItem.role-choreo .bioCardMetaRow .bioPill:first-child {
  background: rgba(255, 255, 140, 0.95);
  border-color: rgba(255, 255, 140, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 140, 0.18);
}

/* ===== tech ===== */
.bioCardItem.role-tech .bioCardMetaRow .bioPill:first-child {
  background: rgba(105, 123, 255, 0.90);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(105, 123, 255, 0.18);
}

/* ===== research ===== */
.bioCardItem.role-research .bioCardMetaRow .bioPill:first-child {
  background: rgba(233, 129, 191, 0.90);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(233, 129, 191, 0.18);
}

/* 카드 */
.bioCardItem {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}


.bioCardMedia {
  height: 140px;
  background: rgba(255, 255, 255, 0.06);
}

.bioCardMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(0.92);
}

.bioCardBody {
  padding: 10px 12px 12px;
}

.bioCardMetaRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bioPill {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
}

.bioCardTitle2 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.bioCardDesc {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 좌/우 번갈아 배치 */
.bioColLeft {
  grid-column: 1;
}

.bioColRight {
  grid-column: 3;
}

/* footer */
.bioFooter {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.bioFooter .bioCard {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: 12px 14px;
}

.bioCardTitle {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bioCarddate {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  margin-top: 5px;
}

.bioCardMeta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  margin-top: 2px;
}

.bioCardLinks {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
}

.bioCardLinks a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.bioCopy {
  color: rgba(255, 255, 255, 0.60);
  font-size: 12px;
}

/* ===== Year Tabs (Glass UI) ===== */
.bioYearTabs {
  margin: 12px 6px 10px;
}

.bioYearTabsInner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.bioYearTab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.bioYearTab:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
}

.bioYearTab.is-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ===== Year Doc (Structure 1) — smaller typography ===== */
.yearDoc {
  padding: 2px 6px 0;
}

.yearDocHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
}

.yearAccent {
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 140, 0.95);
  box-shadow: 0 0 0 5px rgba(255, 255, 140, 0.10);
}

.yearDocTitle {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.94);
}

.yearSummary {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.7;
  max-width: 86ch;
}

.yearSummaryLine {
  margin: 0 0 6px;
}

.yearSection {
  margin-top: 8px;
}

.yearSectionTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.90);
}

.yearBullet {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.90);
}

.yearRows {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 10px;
}

.yearRow {
  display: grid;
  grid-template-columns: 150px 1fr;
  /* 날짜 | 내용 */
  gap: 12px;
  padding: 8px 0;
  align-items: start;
}

.yearDate {
  font-size: 13px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.70);
  white-space: nowrap;
}

.yearText {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.60);
  white-space: pre-line;
  /* \n 줄바꿈 */
}

.yearFootnote {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.yearFootnote a {
  color: rgba(255, 255, 140, 0.95);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================================
   ✅ Mobile Optimization Patch (append at the end)
/* 1) Global mobile ergonomics */
@media (max-width: 768px) {
  :root {
    --header-h: 60px;
    /* 이미 60px이지만 확실히 고정 */
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto;
    /* iOS에서 smooth가 버벅이면 끊김 */
  }

  body {
    min-height: 420vh;
    /* 너무 길면 피로 → 살짝 줄임 (필요시 500vh 유지) */
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* 터치에서 hover 의존 줄이기 */
  .nav a:hover,
  .nav .navBtnLink:hover {
    transform: none;
  }
}

/* 2) Header / Nav tap target 강화 */
@media (max-width: 768px) {
  .site-header {
    padding: 0 14px;
  }

  .logo {
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .nav {
    gap: 6px;
  }

  .nav a {
    padding: 10px 10px;
    /* ✅ 손가락 영역 확대 */
    font-size: 11px;
    opacity: 0.65;
  }

  .nav .navBtnLink {
    padding: 9px 12px;
    font-size: 11px;
    border-radius: 999px;
  }
}

/* 3) Hero copy 가독성 개선 */
@media (max-width: 768px) {
  .hero-ui {
    padding: 0 14px;
    /* 좌우 여백 */
  }

  .heroTitle {
    letter-spacing: -0.03em;
  }

  .heroTitle span {
    margin-top: 10px;
    letter-spacing: 0.22em;
  }

  .heroLead {
    max-width: 46ch;
    opacity: 0.58;
    line-height: 1.75;
    margin: 18px 0 10px;
    padding: 0;
    /* 기존 20px 제거하고 hero-ui padding으로 통일 */
  }
}

/* 4) Modal: 모바일에서 "하단 잘림 / 스크롤 꼬임" 방지 + 안전영역 대응 */
@media (max-width: 860px) {
  .modal__panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 80px);
    max-height: none;
    border-radius: 16px;
  }

  /* iPhone safe area */
  .modal__panel,
  .modal__panel--bio {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .modal__close {
    width: 42px;
    height: 42px;
    /* ✅ 터치 목표 40px 이상 */
  }

  /* backdrop 탭/스크롤 안정 */
  .modal__backdrop {
    touch-action: manipulation;
  }
}

/* 5) About modal: 카드/텍스트 흐름 개선 */
@media (max-width: 860px) {
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .aboutCard {
    gap: 10px;
  }

  .aboutPhoto {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .aboutName {
    text-align: center;
  }

  .aboutMeta {
    text-align: center;
  }

  .aboutLinks {
    align-items: center;
  }

  .aboutText {
    -webkit-overflow-scrolling: touch;
    /* iOS 스크롤 부드럽게 */
  }

  .aboutText h2 {
    line-height: 1.12;
  }
}

/* 6) About top-right controls: 너무 위로 붙는 문제 방지 */
@media (max-width: 480px) {
  .aboutControls {
    top: 10px;
    right: 10px;
    gap: 10px;
  }

  .aboutLangBtn {
    height: 38px;
    padding: 0 12px;
  }
}

/* 7) Bio modal: 타임라인 모바일 최적화 (카드 더 읽기 쉽고 덜 답답하게) */
@media (max-width: 860px) {
  .modal__panel--bio {
    height: calc(100vh - 90px);
    -webkit-overflow-scrolling: touch;
  }

  .bioHead {
    padding: 4px 4px 12px;
  }

  .bioTitle {
    font-size: 20px;
  }

  .bioSub {
    font-size: 13px;
    opacity: 0.8;
  }

  .bioEdu {
    font-size: 12.5px;
    line-height: 1.65;
  }

  .bioControls {
    top: 12px;
    right: 12px;
    gap: 10px;
  }

  .bioLangBtn {
    width: 38px;
    height: 38px;
  }

  /* 타임라인 라인과 카드 간격 */
  .bioTimeline {
    padding: 14px 4px 8px;
  }

  .bioTimeline::before {
    left: 12px;
    /* 기존 10px보다 살짝 여유 */
  }

  .bioItem {
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 14px 0;
  }

  .bioNode {
    padding-top: 10px;
  }

  .bioNodeDot {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
  }

  .bioCardItem {
    border-radius: 14px;
  }

  .bioCardMedia {
    height: 120px;
  }

  .bioCardBody {
    padding: 12px 12px 12px;
  }

  .bioCardMetaRow {
    margin-bottom: 8px;
    gap: 6px;
  }

  .bioPill {
    font-size: 10.5px;
    padding: 6px 9px;
  }

  .bioCardTitle2 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .bioCardDesc {
    font-size: 12.5px;
    line-height: 1.6;
  }
}

/* 8) Year Tabs / Year Doc: 탭 넘침/가독성 */
@media (max-width: 860px) {
  .bioYearTabsInner {
    gap: 6px;
  }

  .bioYearTab {
    padding: 8px 10px;
    font-size: 12px;
  }

  .yearDocTitle {
    font-size: 17px;
  }

  .yearSummary {
    font-size: 12.8px;
    line-height: 1.75;
  }

  .yearRow {
    padding: 10px 0;
  }

  .yearDate {
    font-size: 12px;
  }

  .yearText {
    font-size: 13px;
    line-height: 1.65;
  }
}

/* 9) Small phones: 더 압축 + 컨트롤 겹침 방지 */
@media (max-width: 380px) {
  .site-header {
    padding: 0 10px;
  }

  .nav a {
    padding: 9px 8px;
  }

  .nav .navBtnLink {
    padding: 8px 10px;
  }

  .modal__panel {
    height: calc(100vh - 70px);
  }

  .modal__close {
    width: 40px;
    height: 40px;
  }

  .bioControls,
  .aboutControls {
    top: 8px;
    right: 8px;
  }
}

/* 10) Motion sensitivity (optional but nice) */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .modal__panel,
  .modal__panel--bio {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   INDEX (mobile) — scroll + header clipping fix
   Paste at END of styles.css
   ========================================================= */

/* 모바일에서 body 500vh 때문에 스크롤 과다 → 제거하고 spacer로만 제어 */
@media (max-width: 768px) {
  body {
    min-height: auto !important;
    /* ✅ 기존 500vh 무력화 */
  }

  .scroll-spacer {
    height: 240vh !important;
    /* ✅ 220~320vh 사이로 취향 조절 */
  }
}

/* 헤더 safe-area 대응: 노치/상단바 때문에 잘려 보이는 현상 방지 */
.site-header {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--header-h) + env(safe-area-inset-top));
}

/* hero 100vh 이슈(주소창) 대응 */
.hero {
  height: 100dvh;
}

/* =========================================================
   MODAL (mobile) — not cut + no overlap + easy close tap
   Paste at END of styles.css
   ========================================================= */

@media (max-width: 768px) {

  /* 모달 전체 */
  .modal {
    padding: 10px !important;
  }

  /* About panel / CV panel을 화면에 '안 잘리게' 딱 맞춤 */
  .modal__panel,
  .modal__panel--bio {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 20px) !important;
    /* ✅ 주소창/상단바 변화에도 안정 */
    max-height: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    /* ✅ 패널 자체는 숨김 */
  }

  /* 컨트롤이 상단에 겹치지 않게 '자리'를 확보 */
  .modal__panel {
    padding-top: 74px !important;
    /* About */
  }

  .modal__panel--bio {
    padding-top: 74px !important;
    /* CV */
  }

  /* 컨트롤: 스크롤해도 항상 위에 있고 클릭 가능 */
  .aboutControls,
  .bioControls {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 9999 !important;
    display: flex;
    gap: 10px;
    pointer-events: auto;
  }

  /* 닫기 버튼 터치 타겟 강화 (겹쳐도 누르기 쉬움) */
  .modal__close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
  }

  /* About: 내부 레이아웃이 길어도 잘리지 않게 스크롤을 aboutText로 */
  .aboutGrid {
    height: 100%;
    overflow: hidden;
  }

  .aboutText {
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0 !important;
    /* 패널에서 padding-top을 이미 확보했으니 중복 제거 */
  }

  /* CV: bioHead + (타임라인/콘텐츠) + footer가 패널 밖으로 튀지 않게 */
  .modal__panel--bio {
    display: flex;
    flex-direction: column;
  }

  /* bioHead는 고정 영역처럼 두고 */
  .bioHead {
    flex: 0 0 auto;
    margin-bottom: 10px;
  }

  /* footer는 항상 보이게 하거나(원하면) 아래로 */
  .bioFooter {
    flex: 0 0 auto;
    margin-top: auto;
  }

  /* ✅ 타임라인/콘텐츠가 JS로 들어오는 영역이 있을 때 대비:
     bioHead와 footer 사이의 어떤 요소든 스크롤 되게 */
  .modal__panel--bio>*:not(.bioControls):not(.bioHead):not(.bioFooter) {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    /* ✅ flex 스크롤 핵심 */
  }

  /* 글씨가 너무 꽉 차서 클릭 어려운 현상 완화 */
  .bioTitle {
    font-size: 20px;
  }
}

/* 모달 열려 있을 때 배경 스크롤이 같이 움직이는 문제(컨트롤 어려움) 완화 */
.modal.is-open {
  overscroll-behavior: contain;
}

/* =========================
   About Photo — Mobile Size Control
   ========================= */

@media (max-width: 768px) {

  #aboutModal .aboutPhoto {
    width: min(300px, 80vw) !important;
    max-height: 42vh !important;
    /* ✅ 화면 높이의 42% 이상 차지 못하게 */
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  #aboutModal .aboutPhoto img {
    object-fit: cover;
  }

  /* 카드 전체도 세로 압축 */
  #aboutModal .aboutCard {
    gap: 8px !important;
    padding: 12px !important;
  }
}

/* 작은 폰 */
@media (max-width: 420px) {
  #aboutModal .aboutPhoto {
    width: 78vw !important;
    max-height: 38vh !important;
  }
}


@media (max-width: 360px) {
  .aboutPhoto {
    width: 92vw;
    /* ✅ 초소형 */
    border-radius: 14px;
  }
}

/* =========================
   About Links — 2 Column Compact (Mobile)
   ========================= */

@media (max-width: 768px) {

  /* 2열 그리드 */
  #aboutModal .aboutLinks {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
  }

  /* 버튼 압축 */
  #aboutModal .aboutLinks a {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px 0 !important;
    /* 기존보다 얇게 */
    font-size: 12px !important;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);

    text-decoration: none !important;
    transition: background .2s ease;
  }

  #aboutModal .aboutLinks a:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  /* 카드 전체 더 압축 */
  #aboutModal .aboutCard {
    padding: 10px 14px !important;
    gap: 6px !important;
  }

  /* 사진도 살짝 더 줄이기 (공간 확보용) */
  #aboutModal .aboutPhoto {
    max-height: 36vh !important;
  }
}

/* 초소형 폰은 1열 */
@media (max-width: 420px) {
  #aboutModal .aboutLinks {
    grid-template-columns: 1fr;
  }
}

/* =========================
   About Photo — Show Full Portrait (Mobile)
   ========================= */

@media (max-width: 768px) {

  /* 사진 박스: 고정 높이 기준 */
  #aboutModal .aboutPhoto {
    width: 100% !important;
    max-width: 320px;
    height: 38vh !important;
    /* 화면 높이 기준 */
    aspect-ratio: unset !important;
    /* 기존 3/4 제거 */

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.25);
    /* 빈 공간 자연스럽게 */
  }

  /* 이미지: 전체 보이게 */
  #aboutModal .aboutPhoto img {
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
    /* 🔥 핵심 */
  }
}

/* 작은 폰에서는 조금 더 줄이기 */
@media (max-width: 420px) {
  #aboutModal .aboutPhoto {
    height: 34vh !important;
  }
}


/* =========================================================
   ABOUT MODAL — Mobile layout fix (show intro properly)
   Paste at END of styles.css
   ========================================================= */

@media (max-width: 768px) {

  /* About panel 자체를 화면 안에 딱 맞추고 내부를 flex로 분할 */
  #aboutModal .modal__panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: none !important;
    padding: 0 !important;
    /* ✅ 패널 padding 제거 (내부에서 관리) */
    overflow: hidden !important;
    border-radius: 16px !important;

    display: flex !important;
    flex-direction: column !important;
  }

  /* 컨트롤(언어/닫기)은 위에 고정 */
  #aboutModal .aboutControls {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 60 !important;

    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 12px;
    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.92),
        rgba(10, 10, 10, 0.55),
        rgba(10, 10, 10, 0.0));
    backdrop-filter: blur(12px);
  }

  /* About 그리드: 모바일에서는 2단 구조로 */
  #aboutModal .aboutGrid {
    height: 100%;
    overflow: hidden;

    display: flex !important;
    flex-direction: column !important;
  }

  /* ✅ 위쪽 카드(사진/링크)는 "고정 높이"로: 너무 길어지지 않게 */
  #aboutModal .aboutCard {
    flex: 0 0 auto;
    padding: 14px !important;
    gap: 10px;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    align-items: center;
    text-align: center;
  }

  /* 사진을 화면에 맞게 축소 */
  #aboutModal .aboutPhoto {
    width: min(320px, 86vw) !important;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
  }

  /* ✅ 핵심: 소개(aboutText)는 남은 공간을 차지 + 내부 스크롤 */
  #aboutModal .aboutText {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    /* ✅ flex 스크롤 핵심 */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;

    padding: 16px 16px 22px !important;
    /* ✅ 보기 좋은 여백 */
  }

  #aboutModal .aboutText h2 {
    font-size: 22px !important;
    margin: 0 0 12px !important;
    line-height: 1.15;
  }

  #aboutModal .aboutText p {
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin: 0 0 12px !important;
  }
}

/* 더 작은 폰에서는 사진을 더 낮춤 */
@media (max-width: 420px) {
  #aboutModal .aboutPhoto {
    width: 92vw !important;
    border-radius: 14px;
  }
}

/* =========================================================
   ABOUT MODAL — Full Scroll Mode (Mobile)
   전체가 하나의 스크롤 영역이 되도록
   ========================================================= */

@media (max-width: 768px) {

  /* 패널을 고정 height 구조에서 해방 */
  #aboutModal .modal__panel {
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
    /* ✅ 전체 스크롤 */
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    display: block !important;
    /* flex 구조 해제 */
  }

  /* grid도 flex 분리 구조 해제 */
  #aboutModal .aboutGrid {
    display: block !important;
    height: auto !important;
  }

  /* 소개 영역 내부 스크롤 제거 */
  #aboutModal .aboutText {
    overflow: visible !important;
    max-height: none !important;
    padding: 18px 16px 28px !important;
  }

  /* 카드 여백 정리 */
  #aboutModal .aboutCard {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* 상단 컨트롤은 여전히 위에 고정 느낌 유지 */
  #aboutModal .aboutControls {
    position: sticky !important;
    top: 0;
    z-index: 50;
    padding: 12px 16px;
    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.9),
        rgba(10, 10, 10, 0.4),
        rgba(10, 10, 10, 0));
    backdrop-filter: blur(12px);
  }
}

/* =========================================================
   HEADER — Mobile ultra compact (show CV)
   Paste at END of styles.css
   ========================================================= */

@media (max-width: 768px) {
  :root {
    --header-h: 48px;
  }

  /* ✅ 기존 60px -> 48px */

  .site-header {
    height: calc(var(--header-h) + env(safe-area-inset-top)) !important;
    padding: calc(env(safe-area-inset-top) + 0px) 8px 0 !important;
    /* ✅ 좌우 더 줄임 */
    gap: 8px;
  }

  .logo {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .nav {
    gap: 4px !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    /* ✅ 줄바꿈/넘침 방지 핵심 */
  }

  .nav a {
    font-size: 10px !important;
    padding: 6px 6px !important;
    opacity: 0.72;
    white-space: nowrap;
  }

  .nav .navBtnLink {
    font-size: 10px !important;
    padding: 6px 8px !important;
    border-radius: 999px;
  }
}

/* 아주 작은 폰: 더 압축 + (옵션) nav 가로 스크롤 허용 */
@media (max-width: 380px) {
  :root {
    --header-h: 44px;
  }

  .site-header {
    padding: env(safe-area-inset-top) 6px 0 !important;
  }

  .logo {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  .nav {
    gap: 3px !important;
    overflow-x: auto;
    /* ✅ 너무 좁으면 옆으로 밀어서라도 CV 보이게 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    font-size: 9.5px !important;
    padding: 6px 5px !important;
  }

  .nav .navBtnLink {
    font-size: 9.5px !important;
    padding: 6px 7px !important;
  }
}

@media (max-width: 768px) {

  /* 패널 상단 padding 조금 줄이기(컨트롤 자리) */
  #bioModal .modal__panel--bio {
    padding-top: 60px !important;
    /* 72 -> 60 */
  }

  /* 컨트롤 바( KR / X ) 더 작게 + 오른쪽 정렬 */
  #bioModal .bioControls {
    padding: 10px 10px 8px !important;
    gap: 8px !important;
  }

  #bioModal .bioLangBtn,
  #bioModal .modal__close {
    width: 38px !important;
    height: 38px !important;
  }

  /* ✅ CV 헤더를 sticky로 고정 + 높이 압축 */
  #bioModal .bioHead {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;

    padding: 10px 10px 10px !important;
    margin: 0 0 10px !important;

    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.92),
        rgba(10, 10, 10, 0.55),
        rgba(10, 10, 10, 0.0)) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  /* 헤더 타이포 줄이기 */
  #bioModal .bioKicker {
    font-size: 11px !important;
    opacity: .7 !important;
  }

  #bioModal .bioTitle {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 4px 0 4px !important;
  }

  #bioModal .bioSub {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: .75 !important;
  }

  #bioModal .bioEdu {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin-top: 8px !important;
  }

  /* 연도 탭 줄이기(위 공간 더 확보) */
  #bioModal .bioYearTabs {
    margin: 8px 0 8px !important;
  }

  #bioModal .bioYearTab {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   CV(BIO) MODAL — Force panel scroll (most reliable)
   Paste at VERY END of styles.css
   ========================================================= */

@media (max-width: 768px) {

  /* CV 패널 자체가 스크롤되게 강제 */
  #bioModal .modal__panel--bio {
    height: calc(100dvh - 20px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    /* ✅ 핵심: 패널 스크롤 ON */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    display: block !important;
    /* flex로 묶여있으면 스크롤 막히는 케이스 방지 */
    padding-top: 72px !important;
    /* ✅ 상단 컨트롤 자리 확보 */
  }

  /* CV 상단 컨트롤(언어/닫기) — 스크롤해도 항상 위에서 눌리게 */
  #bioModal .bioControls {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    padding: 12px 12px 10px !important;
    margin-top: -72px !important;
    /* padding-top 확보한 만큼 위로 당겨서 “맨 위”에 붙임 */
    justify-content: flex-end;

    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.92),
        rgba(10, 10, 10, 0.55),
        rgba(10, 10, 10, 0.0)) !important;
    backdrop-filter: blur(12px) !important;
  }

  /* 혹시 내부 요소들이 overflow를 막고 있으면 풀어버림 */
  #bioModal .bioHead,
  #bioModal .bioFooter,
  #bioModal .bioTimeline,
  #bioModal .bioYearTabs,
  #bioModal .yearDoc {
    overflow: visible !important;
  }
}

/* =========================================================
   ✅ CV (BIO) MODAL — FINAL MOBILE FIX (one block only)
   - reliable scroll
   - compact header
   - controls (KR / X) always clickable
   Paste at VERY END of styles.css
   ========================================================= */

@media (max-width: 768px) {

  /* 1) Panel: make the panel itself the ONLY scroll container */
  #bioModal .modal__panel--bio {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* keep it simple to avoid flex scroll bugs */
    display: block !important;

    border-radius: 16px !important;

    /* reserve space for top controls */
    padding-top: 72px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* 2) Controls (KR + X): stick to top inside the panel */
  #bioModal .bioControls {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;

    /* pull into the reserved padding space */
    margin-top: -72px !important;
    padding: 12px 12px 10px !important;

    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.92),
        rgba(10, 10, 10, 0.55),
        rgba(10, 10, 10, 0.0)) !important;
    backdrop-filter: blur(12px) !important;

    pointer-events: auto !important;
  }

  #bioModal .bioLangBtn,
  #bioModal .bioControls .modal__close {
    width: 38px !important;
    height: 38px !important;
  }

  /* bio modal 안에서는 close absolute 규칙 무력화 */
  #bioModal .modal__panel--bio .bioControls .modal__close {
    position: static !important;
    top: auto !important;
    right: auto !important;
  }

  /* 3) Header: compact + sticky (so title area doesn't eat space) */
  #bioModal .bioHead {
    position: sticky !important;
    top: 48px !important;
    /* controls 높이만큼 아래 */
    z-index: 50 !important;

    padding: 10px 10px 10px !important;
    margin: 0 0 10px !important;

    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.72),
        rgba(10, 10, 10, 0.35),
        rgba(10, 10, 10, 0.0)) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  #bioModal .bioKicker {
    font-size: 11px !important;
    opacity: .7 !important;
  }

  #bioModal .bioTitle {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 4px 0 4px !important;
  }

  #bioModal .bioSub {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: .75 !important;
  }

  #bioModal .bioEdu {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin-top: 8px !important;
  }

  /* 4) Year tabs: smaller */
  #bioModal .bioYearTabs {
    margin: 8px 0 !important;
  }

  #bioModal .bioYearTab {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  /* 5) Timeline: mobile single column already exists in your CSS,
        but ensure nothing blocks scrolling */
  #bioModal .bioTimeline,
  #bioModal .bioFooter,
  #bioModal .yearDoc {
    overflow: visible !important;
  }
}

/* very small phones */
@media (max-width: 380px) {
  #bioModal .modal__panel--bio {
    padding-top: 68px !important;
  }

  #bioModal .bioControls {
    margin-top: -68px !important;
    padding: 10px 10px 8px !important;
  }

  #bioModal .bioHead {
    top: 44px !important;
  }
}

/* =========================================================
   CV MODAL — CSS only (no 구조 분리)
   패널 전체 스크롤 + footer sticky + 겹침 방지
   Paste at VERY END of styles.css
   ========================================================= */

:root {
  --bioFooterH: 160px;
  /* footer 실제 높이에 맞춰 140~200px로 조절 */
}

/* 패널 자체를 스크롤 컨테이너로 */
#bioModal .modal__panel--bio {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  /* footer가 덮지 않게 공간 확보 */
  padding-bottom: calc(var(--bioFooterH) + env(safe-area-inset-bottom)) !important;

  /* 모바일 vh 흔들림 대응 */
  height: min(86vh, 920px);
}

@media (max-width: 768px) {
  #bioModal .modal__panel--bio {
    height: calc(100dvh - 20px) !important;
  }
}

/* 상단 컨트롤은 위에 고정 */
#bioModal .bioControls {
  position: static !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 12px 12px 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;

  background: linear-gradient(to bottom,
      rgba(10, 10, 10, .92),
      rgba(10, 10, 10, .55),
      rgba(10, 10, 10, 0)) !important;
  backdrop-filter: blur(12px) !important;
}

/* 헤더는 따라다니지 않아도 된다 했으니 sticky 끔(기본 flow) */
#bioModal .bioHead {
  position: static !important;
}

/* footer를 패널 바닥에 붙임(패널 스크롤 안에서 sticky) */
#bioModal .bioFooter {
  position: static !important;
  bottom: 0 !important;
  z-index: 900 !important;

  /* footer 자체 배경 넣어서 내용 비침/겹침 느낌 제거 */
  background: linear-gradient(to top,
      rgba(0, 0, 0, .85),
      rgba(0, 0, 0, .35),
      rgba(0, 0, 0, 0)) !important;
  backdrop-filter: blur(12px) !important;

  margin-top: 16px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

/* footer 안쪽 링크가 너무 길어지면 줄바꿈되게(겹침 체감 줄이기) */
#bioModal .bioCardLinks {
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  word-break: break-word !important;
}

/* 혹시 어떤 내부 요소가 overflow로 스크롤을 막으면 풀기 */
#bioModal .bioHead,
#bioModal .bioTimeline,
#bioModal .bioYearTabs,
#bioModal .yearDoc {
  overflow: visible !important;
}