/* 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;
}

/* 이미지와 아이프레임 크기 자동 조절 */
img,
iframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

.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: 26;
}
.section3 {
  flex: 57;
}
.section4 {
  flex: 10;
}

/* 마지막 섹션의 왼쪽과 오른쪽 구분선 모두 제거 */
.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.9);
  justify-content: center;
  align-items: center;
  overflow: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  display: block;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
}

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

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  z-index: 1001;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
}

.modal-open body {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
}

.modal-open html {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
}

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

/* 고유한 클래스에만 스타일 적용 */
.unique-images .expandable-image {
  width: 100%;
  height: auto;
  max-width: 300px;
}

.unique-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  justify-content: center;
}

.expandable-image {
  cursor: pointer;
}

/* 모바일에서 모달 닫기 버튼 숨기기 */
@media screen and (max-width: 768px) {
  .close {
    display: none;
  }
}

/* 모바일 화면 추가 설정 */
@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;
  }
  .section4 {
    order: 2;
  }
  .section3 {
    order: 3;
  }
  .section2 {
    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: 1000; /* 다른 요소 위로 표시 */
    padding: 8px; /* 내부 여백 설정 */
  }

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

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

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

  .section4 {
    flex: 8;
    border-bottom: 4px solid #d3d3d3; /* 기존 구분선 */
    box-shadow: 0 1px 0 0 #000; /* 추가 구분선, 기존 border-bottom 바로 아래에 추가 */
    display: flex; /* Flexbox 레이아웃 사용 */
    flex-wrap: wrap; /* 넘치는 항목을 다음 줄로 이동 */
    grid-template-columns: repeat(3, 1fr); /* 한 줄에 두 개의 열로 구성 */
    gap: 8px; /* 그리드 항목 간 여백 */
  }

  .section4 img {
    max-width: 32.5%; /* 이미지가 셀 너비를 넘지 않게 제한 */
    max-height: auto; /* 셀 높이를 넘지 않게 제한 */
    width: 100%; /* 셀 내부에 꽉 차도록 설정 */
    height: auto; /* 비율 유지 */
    object-fit: contain; /* 이미지가 잘리지 않도록 조정 */
  }

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

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

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

  .unique-images .expandable-image {
    width: 100%;
    height: auto;
    max-width: 300px;
  }

  .unique-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    justify-content: center;
  }
}