@font-face {
  font-family: 'Author Variable';
  src:
    local('Author Variable'),
    local('AuthorVariable'),
    url('../fonts/Author-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Author Variable';
  src:
    local('Author Semibold'),
    url('../fonts/Author-Semibold.otf') format('opentype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

body, body * {
  font-family: 'Author Variable', sans-serif !important;
}

/* 네비게이션 메뉴 상단 고정 및 스타일 */
nav {
  position: fixed;
  top: 36px;
  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: 'Author Variable' !important;
  font-weight: 300 !important;
  font-size: 26px !important;
  line-height: 0.95 !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: 2.2rem;
}

/* 본문 왼쪽 정렬 */
.content {
  max-width: 800px;
  min-width: 320px;
  margin: 1.5rem 0 0 8cm;
  box-sizing: border-box;
  text-align: left;
}

/* 작품 페이지의 메인 콘텐츠는 왼쪽 기준으로 정렬 */
.main-project-center {
  align-items: flex-start !important;
  margin-left: 8cm !important;
  margin-right: auto !important;
  max-width: calc(100% - 8cm) !important;
  width: auto !important;
  text-align: left !important;
}

.main-project-center h1,
.main-project-center p {
  text-align: left !important;
}

.main-project-center img {
  margin-left: 0 !important;
}

.main-project-center {
  margin-top: 2cm;
  margin-bottom: 2cm;
  gap: 0.4rem;
  box-sizing: border-box;
}

.main-project-center h1 {
  font-size: 40px !important;
  font-weight: 400 !important;
}

.main-project-center > p {
  font-size: 20px !important;
}

.main-project-center .film-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cm;
  margin-top: 1cm;
  width: 100%;
  max-width: 56vw;
}

.main-project-center .film-images img,
.main-project-center .film-images video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.main-project-video {
  margin-top: 1cm;
  margin-bottom: 1.5cm;
  width: 100%;
  max-width: 56vw;
  display: flex;
  justify-content: center;
}

.main-project-video iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  min-height: 180px !important;
  border: none !important;
}

.main-project-video video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.project-meta {
  width: 100%;
  max-width: 56vw;
  margin-top: 2cm;
  text-align: left;
  color: #000;
}

.meta-grid {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.meta-col {
  flex: 1 1 0;
  min-width: 0;
}

.meta-heading {
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.meta-item,
.german-text,
.project-description,
.project-author,
.project-description-title,
.project-events,
.photo-credit {
  font-family: 'Author Variable', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #000;
}

.project-events {
  margin-top: 0.8em;
  max-width: 56vw;
}

.photo-credit {
  text-align: left;
  margin: 0;
  font-style: normal;
  width: 100%;
  padding-left: 0;
}

.photo-credit.spaced {
  margin-bottom: 1cm;
}

.tight-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.section-rule,
.section-separator {
  height: 1px;
  background: #eee;
  width: 100%;
}

.section-rule {
  margin: 0.6cm 0;
}

.section-separator {
  margin: 1.5cm 0;
  background: #ccc;
}

.project-description-title {
  margin-bottom: 1rem;
}

.project-description {
  white-space: pre-wrap;
  margin-bottom: 1rem;
}

.project-author {
  margin-top: 1rem;
}

.rdpj-text-row {
  display: flex;
  justify-content: flex-start;
  gap: 9cm;
  margin: 1.5cm 0 0 0;
  margin-left: 5cm;
  width: auto;
  max-width: 56vw;
}

.rdpj-text-box {
  padding: 1.2em 1em;
  font-size: 20px;
  font-family: 'Author Variable', 'sans-serif';
  color: #222;
  width: 350px;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.rdpj-text-box.left,
.rdpj-text-box.right {
  text-align: center;
}

.rdpj-gap2 {
  gap: 2cm !important;
}

/* bio 텍스트 스타일 */
.bio-text p {
  font-family: 'Author Variable';
  font-size: 20px;
  line-height: 2.0;
  white-space: pre-line;
}

/* CV 텍스트 스타일 */
.cv-text p {
  font-family: 'Author Variable';
  font-size: 20px;
  line-height: 2.0;
  white-space: pre-line;
    margin-bottom: 5cm;
}

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

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

/* 텍스트/CV 페이지는 왼쪽 기준으로 정렬 */
.content.cv-text,
.content.bio-text {
  position: relative;
  left: auto;
  transform: none;
  margin: 1.5cm 0 0 8cm;
  top: 0;
  text-align: left;
  font-family: 'Author Variable', sans-serif !important;
}
/* 프로젝트 리스트는 항상 화면 중앙에 위치하며, 
   각 프로젝트 그룹은 최대 800px 폭을 갖고, 
   내부 텍스트는 모두 'Bai Jamjuree' 폰트, 13px, 왼쪽 정렬로 고정됨 */

/* projects-list: 왼쪽 기준 정렬 */
.projects-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 2cm 0 0 8cm;
  text-align: left !important;
  font-family: 'Author Variable', sans-serif !important;
}

.project-table,
.project-list-header,
.project-row {
  text-align: left !important;
  font-family: 'Author Variable', sans-serif !important;
}

.project-table {
  width: 100%;
  max-width: 800px;
}

.project-list-header,
.project-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.75rem 0;
}

.project-list-header {
  border-bottom: 1px solid #000;
  font-family: 'Author Variable';
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.project-list-header span,
.project-row span {
  color: #000;
}

.project-row {
  border-bottom: 1px solid #000;
}

.project-row:last-child {
  border-bottom: none;
}

.project-row a {
  flex: 1 1 auto;
  text-align: left;
  font-family: 'Author Variable';
  font-size: 20px;
  line-height: 1.5;
  color: #000 !important;
  text-decoration: none;
  padding-right: 1rem;
}

.project-row span {
  flex: 0 0 70px;
  text-align: right;
  white-space: nowrap;
  font-family: 'Author Variable';
  font-size: 20px;
}
/* 프로젝트 리스트 메뉴(메인 메뉴 아래에 위치) */
.project-menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5em;      /* 메뉴와의 간격 */
  margin-bottom: 2em;
  font-family: 'Author Variable', sans-serif !important;
}

.project-menu-list .project-text {
  width: 100%;
  max-width: 800px;
  margin-bottom: 1.5em;
  font-family: 'Author Variable', sans-serif !important;
}

.project-menu-list .project-text h2 {
  font-family: 'Author Variable';
  font-size: 20px;
  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: 'Author Variable';
  font-size: 20px;
  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;
  font-family: 'Author Variable', sans-serif !important;
}
.side-project-list .project-text a {
  display: block;
  text-align: left;
  font-family: 'Author Variable';
  font-size: 20px;
  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;
}

@media (max-width: 700px) {
  html, body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #bg-video,
  #bg-image {
    display: none !important;
  }

  nav {
    position: static;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.8rem 0.75rem 0.55rem;
    background: rgba(255, 255, 255, 0.96);
    box-sizing: border-box;
    z-index: 2000;
  }

  nav ul {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    line-height: 1.2;
    flex-wrap: nowrap;
  }

  nav ul li:first-child {
    margin-bottom: 1rem;
  }

  body nav ul li a {
    font-size: 20px !important;
    line-height: 1.25 !important;
    padding: 0.15rem 0 !important;
  }

  .content,
  .content.cv-text,
  .content.bio-text,
  .projects-list,
  .project-menu-list,
  .side-project-list,
  .main-project-center {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.9rem 0 0 0 !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  .main-project-center,
  .projects-list,
  .content {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .main-project-center h1 {
    font-size: 30px !important;
  }

  .main-project-center > p,
  .meta-item,
  .german-text,
  .project-description,
  .project-author,
  .project-description-title,
  .project-events,
  .photo-credit,
  .bio-text p,
  .cv-text p,
  .project-list-header,
  .project-row a,
  .project-row span,
  .project-menu-list .project-text h2,
  .project-menu-list .project-text a,
  .side-project-list .project-text a,
  .rdpj-text-box {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }

  .project-meta,
  .main-project-video,
  .main-project-center .film-images,
  .project-table,
  .project-menu-list .project-text,
  .side-project-list,
  .rdpj-text-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .meta-grid,
  .project-list-header,
  .project-row,
  .rdpj-text-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .rdpj-text-row {
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 0 !important;
  }

  .rdpj-text-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 0.75rem 0 !important;
    text-align: left !important;
  }

  .project-row span {
    text-align: left !important;
    flex: none !important;
  }

  .project-row a,
  .project-menu-list .project-text a,
  .side-project-list .project-text a {
    padding-right: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
  }

  .main-project-center .film-images img,
  .main-project-center .film-images video,
  .main-project-video iframe,
  .main-project-video video,
  img,
  iframe,
  video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .rdpj-text-row {
    padding-left: 0 !important;
    gap: 1rem !important;
  }

  .rdpj-text-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 0 !important;
    text-align: left !important;
  }

  .projects-list,
  .project-menu-list,
  .side-project-list {
    margin-top: 0.9rem !important;
  }
}