/* ============== 스코프: 이 파일의 모든 규칙은 #jsy-scope 안에서만 동작 ============== */

/* (옵션) 구글 폰트 로드는 전역이지만, 실제 적용은 #jsy-scope 내부에만 합니다. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 수평 스크롤 방지: 페이지 전체가 아닌, 이 섹션 내부에만 숨깁니다 */
#jsy-scope {
  overflow-x: hidden;
  font-family: 'Inter', sans-serif; /* 폰트도 섹션 내부에만 적용 */
  background-color: #fffdfbfb;
  background-image: url(../jsy/bg.jpg); /* 외부 CSS 기준: ../jsy/.. */
  color: #333;
}

/* --- 공통 모달 스타일 --- */
#jsy-scope .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

/* 새 팝업 디자인 (new-layout) 스타일 */
#jsy-scope .modal-content.new-layout {
  background-color: #fff;
  padding: 2rem;
  /* 기본 배경: 개별 프로젝트에서 JS로 교체 */
  background-image: url(../jsy/배경-01.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
  width: 95%;
  height: 95%;
  overflow: hidden;
  display: block;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

#jsy-scope .modal-full-content {
  display: flex;
  height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: transparent;
}

#jsy-scope .new-layout-image-section {
  flex: 5;
  position: relative;
  padding: 2rem 2rem 2rem 15rem;
  background-color: rgba(255, 255, 255, 0);
}

#jsy-scope .new-layout-details-section {
  flex: 5;
  border-radius: 2rem;
  background-color: transparent;
  padding: 2.5rem 0 2.5rem 3rem;
  display: flex;
}

/* 닫기 버튼 */
#jsy-scope .new-layout-close-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: auto;
  color: var(--close-btn-color, #333);
  padding: 0.5rem;
  background: none;
  border-radius: 50%;
  transition: background-color 0.2s;
  cursor: pointer;
  z-index: 10;
  border: none;
}
#jsy-scope .new-layout-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 작은 이미지 컨테이너 (Modal 2 왼쪽 아래 고정 등) */
#jsy-scope .small-image-container {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 5;
}
#jsy-scope .small-detail-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 세로 제목 컨테이너 */
#jsy-scope .vertical-title-container {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
}
#jsy-scope .vertical-title {
  writing-mode: vertical-rl;
  font-size: 4rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.1);
}

/* 메인 이미지 / 미디어 */
#jsy-scope .new-project-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1 / 1.414;
  border-radius: 0;
}
#jsy-scope .new-project-media {
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1.414;
  border-radius: 0;
}

/* (오타 보완: 기존 .project-image-galler 유지 + 올바른 이름 추가) */
#jsy-scope .project-image-galler,
#jsy-scope .project-image-gallery {
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1.414;
  border-radius: 0;
}

/* 작품 설명 (제목/내용) */
#jsy-scope .new-project-description {
  flex: 1;
  padding-right: 2rem;
  overflow-y: auto;
  display: flex;
  align-items: center;
}
#jsy-scope .description-content {
  max-width: 600px;
  margin: auto 0;
}

/* 스크롤바 커스텀 */
#jsy-scope .new-project-description::-webkit-scrollbar {
  width: 8px;
}
#jsy-scope .new-project-description::-webkit-scrollbar-thumb {
  background-color: #fecaca;
  border-radius: 4px;
}
#jsy-scope .new-project-description::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 미리보기 갤러리 (오른쪽) */
#jsy-scope .new-thumbnail-gallery {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  gap: 0.5rem;
  padding: 1rem 0 2rem 0;
  background-color: rgba(110, 70, 218, 0.082);
  border-radius: 5rem;
}

/* 썸네일 위 라벨 */
#jsy-scope .thumbnail-label {
  top: 0;
  font-size: 2.5rem;
  font-weight: 700;
  color: #0000004b;
  user-select: none;
}

#jsy-scope .thumbnail-item {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s;
}
#jsy-scope .thumbnail-item:hover,
#jsy-scope .thumbnail-item.active {
  opacity: 1;
  border: 3px solid #ff69b4;
  transform: scale(1.05);
}

#jsy-scope .nav-arrow {
  color: #ff69b4;
  cursor: pointer;
  margin: 0.5rem 0;
}

/* --- 반응형 --- */
@media (max-width: 1024px) {
  #jsy-scope .new-layout-image-section { flex: 4; }
  #jsy-scope .new-layout-details-section { flex: 6; }
}

@media (max-width: 768px) {
  #jsy-scope .modal-full-content {
    flex-direction: column;
    overflow-y: auto;
  }
  #jsy-scope .new-layout-image-section {
    flex: none;
    height: 50vh;
  }
  #jsy-scope .new-layout-details-section {
    flex: none;
    padding: 1.5rem;
    width: 100%;
  }
  #jsy-scope .new-thumbnail-gallery {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    background-color: transparent;
    border-radius: 0;
    margin-top: 1.5rem;
    padding: 1rem 0;
  }
  #jsy-scope .vertical-title-container { display: none; }
  #jsy-scope .new-layout-close-btn {
    top: 0.5rem;
    left: 0.5rem;
  }
}

/* 버튼 페이지 섹션 전체를 화면 가득 채우기 */
#jsy-scope {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* 내부 컨테이너 기본 여백 제거 */
#jsy-scope .section-title,
#jsy-scope .container {
  max-width: 100vw;
  width: 100vw;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* 버튼 3개가 있는 첫 섹션: 좌우 여백 완전 제거 */
#jsy-scope .section-title > section {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}