/* body의 마진과 패딩을 제거하면서 텍스트 마진을 살리기 위한 수정 */
body {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  margin: 0;
  padding: 0;
  display: flex; /* PC에서 가로 정렬 유지 */
  flex-direction: row;
  height: 100vh;
  align-items: stretch;
}

/* 텍스트 요소의 기본 마진과 패딩 복원 */
p,
h1,
nav,
a {
  margin: revert;
  padding: revert;
  color: inherit;
}

/* 추가: 자식 요소가 body에 닿지 않도록 패딩을 추가 */
.section-container > * {
  padding: 8px;
  box-sizing: border-box;
}

/* p 태그에 추가적인 가독성 조정 */
p {
  line-height: 1.4em;
}

.text {
  padding-left: 40px;
  padding-right: 12px;
  padding-top: 8px;
}

.express-image {
  width: 20%;
  height: auto;
}

/* 링크 색상 스타일 */
a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: Darkmagenta;
}

/* 섹션 컨테이너 스타일링 */
.section-container {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  min-width: 0;
  position: relative;
  border-right: 5px solid #d3d3d3;
  border-left: 1px solid #000;
  overflow: auto; /* PC에서 개별 섹션 스크롤 유지 */
  box-sizing: border-box;
}

/* 섹션별 크기 조정 */
.section1 {
  flex: 7;
}
.section2 {
  flex: 17;
}
.section3 {
  flex: 38;
}
.section4 {
  flex: 38;
}

/* 마지막 섹션의 왼쪽과 오른쪽 구분선 모두 제거 */
.section-container:last-child {
  border-right: none;
  border-left: none;
}

/* 흰색 텍스트 적용 */
.white {
  color: white;
}

/* 모달 기본 스타일 */
.modal {
  display: none; /* 초기에는 숨김 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 반투명 검정 배경 */
  justify-content: center;
  align-items: center;
}

/* 모달 내부 이미지 */
.modal-content {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  display: block;
}

/* 닫기 버튼 스타일 */
.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 이미지 컨테이너 스타일 */
.express-image {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(50px, 1fr)
  ); /* 최소 크기 200px, 셀 크기 자동 조정 */
  gap: 20px;
  padding: 10px;
  justify-content: center;
}

iframe {
  width: 80%; /* 부모 요소의 너비를 기준으로 설정 */
  height: auto; /* 비율 유지 */
  aspect-ratio: 16 / 9; /* 16:9 비율 설정 */
  border: none; /* 테두리 제거 */
  box-sizing: border-box; /* 패딩 포함 */
}

img {
  width: 50%; /* 부모 요소의 너비를 기준으로 설정 */
  height: auto; /* 비율 유지 */
  border: none; /* 테두리 제거 */
  box-sizing: border-box; /* 패딩 포함 */
}

/* 모달 내부 이미지 */
.modal-content {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  display: block;
  object-fit: contain; /* 비율 유지하면서 공간에 맞춰 이미지 표시 */
}

/* 모달 이미지 */
.modal img {
  width: 100%; /* 부모 요소의 너비에 맞게 이미지 크기 설정 */
  height: auto; /* 비율을 유지 */
  object-fit: contain; /* 비율을 유지하며 크기를 맞추도록 설정 */
}

.expandable-image {
  cursor: pointer;
}

/* 이미지 그리드 스타일 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-grid img {
  width: calc(100% / 6 - 10px); /* PC: 한 줄에 6개 */
  aspect-ratio: 1/1; /* 정사각형 비율 */
  object-fit: cover;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

.prev,
.next {
  color: white;
  font-size: 36px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  z-index: 10;
}

/* 이전 버튼 */
.prev {
  left: 20px; /* 왼쪽에 배치 */
}

/* 다음 버튼 */
.next {
  right: 20px; /* 오른쪽에 배치 */
}

/* 기본적으로 화살표 숨기기 */
.prev,
.next {
  display: none;
}

/* PC에서만 화살표 버튼 표시 */
@media (min-width: 768px) {
  .prev,
  .next {
    display: block;
  }
}

/* 모바일 화면 추가 설정 */
@media screen and (max-width: 768px) {
  body {
    flex-direction: column; /* 모바일: 세로 정렬 */
    height: auto; /* 모바일에서 높이를 자동으로 확장 */
  }

  .section-container {
    display: flex; /* 세로 배치에 맞게 flex 사용 */
    flex-direction: column; /* 섹션들이 세로로 쌓이게 설정 */
    width: 100%; /* 부모 너비를 채움 */
    border: none; /* 경계선 제거 */
    padding: 8px; /* 섹션 간 기본 여백 */
  }

  /* 모바일에서 섹션 순서 설정 */
  .section1 {
    order: 1;
  }
  .section2 {
    order: 2;
  }
  .section3 {
    order: 3;
  }
  .section4 {
    order: 4;
  }

  /* 모바일에서 섹션별 크기 조정 */
  .section1 {
    flex: 1;
    border-bottom: 4px solid #d3d3d3; /* 기존 구분선 */
    box-shadow: 0 1px 0 0 #000; /* 추가 구분선, 기존 border-bottom 바로 아래에 추가 */
    position: relative; /* 고정된 네비게이션 위치 설정 보조 */
  }

  .section1 nav {
    display: flex; /* Flexbox로 변경 */
    flex-wrap: wrap; /* 항목이 넘칠 경우 다음 줄로 이동 (필요 시 제거 가능) */
    gap: 8px; /* 링크 간 간격 설정 */
    justify-content: flex-start; /* 왼쪽 정렬 */
    position: fixed; /* 화면에 고정 */
    top: 0; /* 상단에 고정 */
    left: 0; /* 왼쪽에 고정 */
    width: 100%; /* 너비를 화면 전체로 설정 */
    background-color: #ffffff; /* 배경색 설정 */
    z-index: 999; /* 다른 요소 위로 표시 */
    padding: 8px; /* 내부 여백 설정 */
  }

  .section1 nav a {
    white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
  }

  .section1 nav br {
    display: none; /* 모바일에서 <br> 태그 숨김 */
  }

  /* 페이지 내용이 nav 아래로 밀리도록 상단 패딩 추가 */
  body {
    padding-top: 4px; /* nav 높이에 맞게 조정 */
  }

  .section4 {
    height: auto; /* 내용에 맞게 자동 조정 */
  }

  .section3 {
    flex: 8;
    overflow: auto; /* 내용이 초과되면 스크롤 허용 */
    border-bottom: 4px solid #d3d3d3; /* 기존 구분선 */
    box-shadow: 0 1px 0 0 #000; /* 추가 구분선, 기존 border-bottom 바로 아래에 추가 */
  }

  .section2 {
    flex: 8;
    overflow: auto; /* 내용이 초과되면 스크롤 허용 */
    border-bottom: 4px solid #d3d3d3; /* 기존 구분선 */
    box-shadow: 0 1px 0 0 #000; /* 추가 구분선, 기존 border-bottom 바로 아래에 추가 */
  }

  .section-container > * {
    padding: 8px; /* 내부 여백 유지 */
  }

  iframe {
    width: 100%; /* 부모 요소의 너비를 기준으로 설정 */
    height: auto; /* 비율 유지 */
    aspect-ratio: 16 / 9; /* 16:9 비율 설정 */
    border: none; /* 테두리 제거 */
    box-sizing: border-box; /* 패딩 포함 */
  }

  img {
    width: 100%; /* 부모 요소의 너비를 기준으로 설정 */
    height: auto; /* 비율 유지 */
    border: none; /* 테두리 제거 */
    box-sizing: border-box; /* 패딩 포함 */
  }

  .image-grid img {
    width: calc(100% / 4 - 10px); /* 모바일: 한 줄에 4개 */
  }
}