@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300&display=swap');

/* 네비게이션 메뉴 상단 고정 및 스타일 */
nav {
  position: fixed;
  top: 30px;
  left: 1.5rem; /* use rem for more consistent scaling */
  width: min(220px, 18vw); /* responsive width */
  z-index: 1000;
  box-sizing: border-box;
}

/* 메뉴 리스트 세로 배치 */
nav ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2.0;
}
/* 메뉴(버튼) 스타일 - 맨 마지막에 배치하여 최우선 적용 */
body nav ul li a {                    /* body를 추가해서 더 구체적으로 */
  font-family: 'Bai Jamjuree', 'sans-serif' !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  padding: 4px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  
}
/* Sommar Lee와 나머지 메뉴 사이 간격 */
nav ul li:first-child {
  margin-bottom: 40px;
}

/* 본문 중앙 정렬 및 양옆 여백 */
.content {
  max-width: 800px;
  min-width: 320px;
  margin: 1.5rem auto 0 auto;
  box-sizing: border-box;
  text-align: left;
}

/* bio 텍스트 스타일 */
.bio-text p {
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  line-height: 2.0;
  white-space: pre-line;
}

/* CV 텍스트 스타일 */
.cv-text p {
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  line-height: 2.0;
  white-space: pre-line;
    margin-bottom: 5cm;
}

/* CV 타이틀 스타일 */
.cv-title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: -0.5cm;
}

/* BIO 타이틀 스타일 */
.bio-title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 0;   /* 타이틀과 텍스트 사이 간격을 절반으로 줄임 */
}

/* CV 텍스트만 화면 중앙에 위치 */
.content.cv-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1.5cm;        /* 위쪽 여백을 1.5cm로 설정 */
  top: 0;                   /* 화면 맨 위에서 시작 */
}

/* BIO 텍스트도 화면 중앙에 위치 */
.content.bio-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1.5cm;        /* CV와 동일하게 설정 */
  top: 0;
}
/* 프로젝트 리스트는 항상 화면 중앙에 위치하며, 
   각 프로젝트 그룹은 최대 800px 폭을 갖고, 
   내부 텍스트는 모두 'Bai Jamjuree' 폰트, 13px, 왼쪽 정렬로 고정됨 */

/* projects-list: 중앙 배치, 내부는 왼쪽 정렬 */
.projects-list {
  display: flex;
  flex-direction: column;
  align-items: center;      /* 전체 리스트를 화면 중앙에 위치 */
  margin-top: 2cm;        /* 위에서 2cm 띄움 */
}

/* 각 프로젝트 그룹(제목+링크) */
.project-text {
  width: 100%;
  max-width: 800px;
  margin-bottom: 1.5em;     /* 프로젝트 그룹 사이 간격 */
}

/* 프로젝트 제목 스타일 */
.project-text h2 {
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  font-weight: bold;
  line-height: 2.0;
  margin-top: 0.1cm;
  margin-bottom: 0.5cm;
  text-align: left;
}

/* 프로젝트 링크 스타일 */
.project-text a {
  display: block;
  text-align: left;
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  line-height: 0.1cm;         /* CV와 동일하게 */
  white-space: pre-line;
  margin-bottom: 0.1cm;     /* 링크끼리 간격 최소화 */
}
/* 프로젝트 리스트 메뉴(메인 메뉴 아래에 위치) */
.project-menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5em;      /* 메뉴와의 간격 */
  margin-bottom: 2em;
}

.project-menu-list .project-text {
  width: 100%;
  max-width: 800px;
  margin-bottom: 1.5em;
}

.project-menu-list .project-text h2 {
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  font-weight: bold;
  line-height: 2.0;
  margin-top: 2em;
  margin-bottom: 0.5em;
  text-align: left;
}

.project-menu-list .project-text a {
  display: block;
  text-align: left;
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  line-height: 2.0;
  white-space: pre-line;
  margin-bottom: 0.1em;
}
.side-project-list {
 position: fixed;      /* 스크롤해도 고정 */
  top: 7rem;         /* 위에서 내려옴 (rem 단위로 변경) */
  left: 3rem;        /* 왼쪽 여백을 rem 단위로 변경 */
  max-width: 800px;
  box-sizing: border-box;
}
.side-project-list .project-text a {
  display: block;
  text-align: left;
  font-family: 'Bai Jamjuree', 'sans-serif';
  font-size: 13px;
  line-height: 0.3;   /* 행간 더 좁게 */
  white-space: pre-line;
  margin-bottom: 0.05cm;
}
.side-project-list .project-text a:active,
.side-project-list .project-text a:focus,
.side-project-list .project-text a:visited {
  color: #000 !important;
}
body.dark-bg nav ul li:first-child a {
  color: #fff !important;
  font-weight: bold !important;
  font-size: 19px !important;
}
body:not(.dark-bg) nav ul li:first-child a {
  color: #000 !important;
  font-weight: bold !important;
  font-size: 19px !important;
}
body.dark-bg nav ul li a {
  color: #fff !important;
}/* dark-bg(=index, cv, bio, projects)에서는 메뉴 클릭해도 흰색 유지 */
body.dark-bg nav ul li a:active,
body.dark-bg nav ul li a:focus,
body.dark-bg nav ul li a:visited {
  color: #fff !important;
}

/* 그 외 페이지에서는 메뉴 클릭(visited/active/focus) 시 검은색 */
body:not(.dark-bg) nav ul li a:active,
body:not(.dark-bg) nav ul li a:focus,
body:not(.dark-bg) nav ul li a:visited {
  color: #000 !important;
}
/* 프로젝트 리스트(사이드 포함)에서 버튼(링크) hover/active 시 파란색 대신 검은색 */
.project-text a:hover,
.project-text a:focus,
.side-project-list .project-text a:hover,
.side-project-list .project-text a:focus {
  color: #000 !important;
}
/* 네비게이션(메인 메뉴) hover/포커스 시 검은색 */
nav ul li a:hover,
nav ul li a:focus {
  color: #000 !important;
  
}
/* 메뉴와 프로젝트 리스트에서 hover, focus, visited(방문) 모두 검은색 */
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:focus,
.project-text a:visited,
.project-text a:hover,
.project-text a:focus,
.side-project-list .project-text a:visited,
.side-project-list .project-text a:hover,
.side-project-list .project-text a:focus {
  color: #000 !important;
}
/* 모든 메뉴/프로젝트 링크의 기본 색상은 검정 */
nav ul li a,
.project-text a,
.side-project-list .project-text a {
  color: #000 !important;
}

/* dark-bg(=index, cv, bio, projects)에서는 흰색으로 덮어쓰기 */
body.dark-bg nav ul li a,
body.dark-bg .project-text a,
body.dark-bg .side-project-list .project-text a {
  color: #fff !important;
}@media (max-width: 700px) {
  /* 네비게이션 메뉴를 상단에 가로로 */
  nav {
    position: static !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: transparent !important;
    z-index: 1000;
  }
  nav ul {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    line-height: 1.5 !important;
  }
  nav ul li {
    margin-bottom: 0 !important;
  }
  nav ul li a {
    line-height: 2.2 !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    box-sizing: border-box !important;
  }
  /* 프로젝트 리스트(본문) 링크 줄간격/여백 */
  .project-text a,
  .project-menu-list .project-text a,
  .side-project-list .project-text a {
    line-height: 1.0 !important;
    padding: 2px 0 !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }
  /* 사이드 프로젝트 리스트를 고정 해제하고 아래로 */
  .side-project-list {
    position: static !important;
    max-width: 98vw !important;
    left: 0 !important;
    top: 0 !important;
    margin: 2em auto 2em auto !important;
    width: 100% !important;
    background: none !important;
  }
  .project-text,
  .project-menu-list .project-text {
    max-width: 98vw !important;
    width: 100% !important;
  }
  /* 영상, 이미지 등도 화면에 맞게 */
  iframe,
  img,
  video {
    max-width: 98vw !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  @media (max-width: 700px) {
  .rdpj-text-row {
    flex-direction: column !important;
    gap: 1em !important;
    align-items: stretch !important;
  }
  .rdpj-text-box {
    width: 100% !important;
    max-width: 98vw !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
  }
}@media (max-width: 700px) {
  nav ul li a {
    line-height: 2.2 !important;
    padding: 10px 0 !important;
    font-size: 9px !important;   /* ← 여기서 숫자를 더 작게 조정 */
    white-space: normal !important;
    word-break: keep-all !important;
    box-sizing: border-box !important;
  }
  @media (max-width: 700px) {
  .project-text,
  .project-menu-list .project-text {
    max-width: 98vw !important;
    width: 100% !important;
    padding-left: 12px !important;   /* ← 좌우 여백 추가 */
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 700px) {
  .responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    margin-bottom: 1.5em;
  }
  .responsive-video iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}
  /* ...이하 동일... */
}