/* styles.css — 교체본 전체 */

/* === 기본 리셋 & 공통 === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', Arial, sans-serif; overflow-x: hidden; }

header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: #fff;
  display: flex; justify-content: center; align-items: center;
  padding: 10px 30px;
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.08);
  z-index: 1000; height: 80px; min-height: 80px;
}

.logo { position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; z-index: 1001; }
.logo img { height: 60px; width: auto; }
nav { margin-left: auto; margin-right: 75px; z-index: 1001; }
nav ul { list-style: none; display: flex; gap: 30px; align-items: center; }
nav ul li a { color: black; text-decoration: none; font-size: 20px; padding: 15px 20px; transition: color 0.3s; }
nav ul li a:hover { color: #555; }
.hamburger { display: none; font-size: 26px; background: none; border: none; color: black; cursor: pointer; }

.container { overflow-y: scroll; padding: 80px 0 0 0; }

/* === Section 기본: 데스크탑(>1024px) === */
section {
  width: 100%;
  min-height: 100vh;
  display: flex; justify-content: center; align-items: center;
  color: white; text-align: center;
  background-size: 80.5% auto;    /* 데스크탑 기본 */
  background-repeat: no-repeat;
  background-position: center;    /* center center 와 동일 */
  margin: 0; overflow-x: hidden; position: relative; background-color: #fff;
}

/* 각 섹션 이미지 */
#section0 { background-image: url('images/section_home.jpg'); }
#section1 { background-image: url('images/section_1.jpg'); }
#section2 { background-image: url('images/section_2.jpg'); }
#section3 { background-image: url('images/section_3.jpg'); }
#section4 { background-image: url('images/section_4.jpg'); }
#section5 { background-image: url('images/section_5.jpg'); }
#section6 { background-image: url('images/section_6.jpg'); }
#section7 { background-image: url('images/section_7.jpg'); }
#section8 { background-image: url('images/section_8.jpg'); }
#section9 { background-image: url('images/section_9.jpg'); }
#section10 { background-image: url('images/section_10.jpg'); }
#section11 { background-image: url('images/section_11.jpg'); }
#section12 { background-image: url('images/section_12.jpg'); }
#section13 { background-image: url('images/section_13.jpg'); }
#section14 { background-image: url('images/section_14.jpg'); }
#section15 { background-image: url('images/section_15.jpg'); }
#section16 { background-image: url('images/section_16.jpg'); }
#section17 { background-image: url('images/section_17.jpg'); }
#section18 { background-image: url('images/section_18.jpg'); }
#section18-1 { background-image: url('images/section_18-1.jpg'); }
#section19 { background-image: url('images/section_19.jpg'); }
#section20 { background-image: url('images/section_20.jpg'); }
#section21 { background-image: url('images/section_21.jpg'); }
#section22 { background-image: url('images/section_22.jpg'); }
#section23 { background-image: url('images/section_23.jpg'); }
#section24 { background-image: url('images/section_24.jpg'); }
#section25 { background: white; padding: 20px 0; min-height: calc(100vh - 80px); }

/* 사이드 점 네비 */
.sidebar { position: fixed; right: 3.5%; top: 90px; display: flex; flex-direction: column; gap: 18px; padding: 20px 0; height: calc(100vh - 200px - 20px); z-index: 1000; }
.dot { width: 15px; height: 15px; background: #ccc; border-radius: 50%; border: none; cursor: pointer; transition: background 0.3s; aspect-ratio: 1 / 1; }
.dot:hover, .dot.active { background: #000; }

/* 섹션25 그리드 */
#section25 .project-table{
  width: 90vw; max-width: 1200px; margin: auto; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; justify-items: stretch; align-items: stretch;
}
#section25 .project-cell{ aspect-ratio: 1 / 1; background: #fff; border: none; position: relative; transition: background 0.3s; overflow: hidden; }
#section25 .project-cell:hover { background: #067e06; }
#section25 .project-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  cursor: pointer; filter: grayscale(100%); transition: filter 0.3s;
}
#section25 .project-cell img:hover { filter: none; }

/* 폰트 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* === 모바일·태블릿 공통(≤1024px): 반드시 100% auto 적용 === */
@media (max-width: 1024px) {
  section {
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}


/* 태블릿 전용: 메뉴 간격 줄이고 오른쪽으로 이동 */
@media (min-width: 768px) and (max-width: 1024px) {
  nav {
    margin-right: 30px; /* 기존 75px → 30px 정도로 줄여서 오른쪽으로 붙임 */
  }
  nav ul {
    gap: 15px; /* 메뉴 간격 기존 30px → 15px */
  }
  nav ul li a {
    font-size: 18px; /* 글자도 조금 줄여서 로고랑 겹치지 않게 */
    padding: 10px 12px;
  }
}


/* === 모바일(≤768px) — 레이아웃 조정(배경 규칙은 위에서 이미 강제) === */
@media (max-width: 768px) {
  .logo img { height: 60px; }
  nav ul {
    display: none; flex-direction: column; position: absolute; top: 80px; left: 0;
    width: 100%; background: #fff; padding: 10px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  nav ul.active { display: flex; }
  nav ul li { text-align: center; margin: 10px 0; }
  nav ul li a { font-size: 18px; padding: 12px 18px; }
  nav ul li a:hover { color: #555; }
    .hamburger {
    display: block;
    font-size: 26px;
    background: none;
    border: none;
    color: black;
    cursor: pointer;

    position: absolute;   /* 위치 고정 */
    right: 20px;          /* 오른쪽에서 20px 떨어뜨림 */
    top: 50%;             /* 세로 중앙 */
    transform: translateY(-50%);
  }
  header { padding: 10px 30px; height: 80px; min-height: 80px; }
  .logo { top: 50%; transform: translateX(-50%) translateY(-50%); }

  section {
    min-height: calc(98vh - 80px);
    width: 100vw; margin: 0; padding: 0;
    /* background-size/position은 1024px 미디어쿼리에서 이미 강제됨 */
  }

  .container { padding: 80px 0 0 0; }
  .sidebar { right: 3.5%; top: 80px; height: calc(100vh - 80px - 20px); gap: 20px; padding: 8px 0; }
  .dot { width: 12px; height: 12px; }

  .about-modal-content h2 { font-size: 100px; }
  .about-modal-content p { font-size: 20px; }
  .about-modal-content .close { top: 10px; right: 15px; }
  .about-modal-content img { width: auto; height: auto; }
}

/* 초소형 */
@media (max-width: 480px) {
  section { min-height: calc(98vh - 80px); }
}
@media (max-width: 320px) {
  .project-modal-content {
    position: relative; background: #000; padding: 0; margin: 0;
    border-radius: 10px; display: inline-block; max-width: 90vw; max-height: 90vh; overflow: hidden;
  }
}

/* === 프로젝트 모달 === */
.project-modal-content img {
  width: auto; height: auto; max-width: 100%; max-height: 90vh; object-fit: contain; display: block; border: none !important;
}
.project-modal-content .close,
.project-modal-content .arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-size: 20px; line-height: 1; padding: 0; position: absolute;
}
.project-modal-content .close { top: 10px; right: 5px; color: black; background: rgba(255,255,255,0.726); cursor: pointer; }
.project-modal-content .arrow { top: 50%; transform: translateY(-50%); color: #fff; cursor: pointer; background: rgba(0,0,0,0.7); transition: all 0.3s ease; }
.project-modal-content .prev { left: 10px; }
.project-modal-content .next { right: 10px; }
.project-modal-content .arrow:hover { background: rgba(0,0,0,0.9); }

/* 모달/어바웃 */
.modal, .about-modal, .project-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 9999;
}
.about-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: transparent; justify-content: center; align-items: center; z-index: 1002;
}
.about-modal-content {
  background: rgba(0,0,0,0.822); color: white; padding: 40px 30px; border-radius: 10px;
  width: auto; height: auto; max-width: 90vw; max-height: 90vh; text-align: left; position: relative; display: inline-block;
}
.about-modal-content h2 { text-align: center; font-size: 55px; font-family: 'Roboto', Arial, sans-serif; margin: 0 0 20px; }
.about-modal-content p { font-size: 18px; line-height: 1.6; font-family: 'Roboto', Arial, sans-serif; }
.about-modal-content .close { position: absolute; top: 10px; right: 15px; font-size: 24px; color: white; background: none; border: none; cursor: pointer; }

.about-modal__row { display: flex; flex-direction: row; gap: 20px; align-items: center; }
.about-modal__text { flex: 1 1 60%; }
.about-modal__image { flex: 0 0 auto; text-align: right; }

@media (max-width: 768px) {
  .about-modal__row { flex-direction: column; }
  .about-modal__image { text-align: center; }
}

/* Footer */
.site-footer{ background: #0e0e10; color: #e8e8e8; border-top: 1px solid rgba(255,255,255,0.06); }
.site-footer__inner{
  width: min(1200px, 90vw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; min-height: 80px;
}
.footer__logo{ font-weight: 700; letter-spacing: .02em; }
.footer__copy{ color: #bdbdbd; }
.footer__link{ color: #e8e8e8; text-decoration: none; }
.footer__link:hover{ text-decoration: underline; }

@media (max-width: 600px){
  .site-footer__inner{ flex-direction: column; text-align: center; padding: 14px 0; }
}

/* 지도 크기 조정 */
.about-modal__image iframe { width: 600px; height: 400px; border: 0; border-radius: 8px; }
@media (max-width: 768px) {
  .about-modal__image iframe { width: 90vw !important; max-width: 480px; height: 260px !important; }
}
@media (max-width: 480px) {
  .about-modal__image iframe { height: 220px !important; }
}