/* ==========================================================================
   _add_main.css — index.php 전용 추가 스타일
   index.php의 인라인 style=""과 onmouseover/onmouseout을 CSS 클래스로 대체
   ========================================================================== */

/* --------------------------------------------------------------------------
   HeroSection
   -------------------------------------------------------------------------- */

/* 섹션 전체 배경/패딩 */
#hero-section {
  background-color: #ffffff;
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

/* container-main 내부 z-index */
#hero-section > .container-main {
  position: relative;
  z-index: 1;
}

/* 데코 원형 배경 공통 속성 */
.hero-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* 각 원형별 크기/위치/색상 */
.hero-circle-1 {
  width: 500px;
  height: 500px;
  background-color: var(--color-primary-50);
  top: -180px;
  left: -180px;
}

.hero-circle-2 {
  width: 380px;
  height: 380px;
  background-color: var(--color-secondary-50);
  bottom: -150px;
  right: -150px;
}

.hero-circle-3 {
  width: 240px;
  height: 240px;
  background-color: var(--color-blue-50);
  top: -80px;
  right: 80px;
}

.hero-circle-4 {
  width: 140px;
  height: 140px;
  background-color: var(--color-primary-100);
  top: 20px;
  left: 38%;
}

.hero-circle-5 {
  width: 100px;
  height: 100px;
  background-color: var(--color-secondary-100);
  top: 40%;
  right: 20px;
}

/* 슬라이더 래퍼(그리드 아이템):
   - width: 100%      = 폭을 확정(definite)시켜 aspect-ratio가 "폭→높이" 방향으로만
                        동작하게 함. 폭이 auto(stretch 의존)면 iOS WebKit이 높이 추론
                        실패 시 min-height×3/2=330px를 "전이 폭"으로 채택해 wrap이
                        컬럼보다 좁아지고 오른쪽에 ~28px 여백이 생겼다(실제 발생 이력).
                        그리드 아이템에서 width:100% = 트랙 폭이므로 회귀 없음.
   - aspect-ratio 3/2 = 원래부터 데스크톱에서 잘 동작하던 높이 계산 (유지)
   - min-height       = aspect-ratio 미지원(구형 iOS) 시 0높이 붕괴 방지 폴백
   - min-width: 0     = grid item의 min-width:auto가 내용물 최소폭을 강제하는 것 차단
   - 추가로 JS(heroSizeSlider)가 CSS 계산 실패 시에만 명시적 px 높이를 폴백 지정 */
.hero-slider-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 220px;
  min-width: 0;
}

/* 슬라이더 내부 프레임: 반드시 absolute 유지!
   in-flow로 바꾸면 Swiper 슬라이드(width:100%, flex-shrink:0)의 내용물 폭이
   그리드 아이템의 min-content 폭으로 피드백되는 순환 참조가 생겨
   폭이 2^25px(3.35544e+07)까지 폭주하는 레이아웃 붕괴가 발생한다(실제 발생 이력).
   absolute면 내용물 크기가 그리드 계산에 전혀 반영되지 않아 순환이 차단된다. */
.hero-slider-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* swiper 크기 */
.hero-swiper {
  width: 100%;
  height: 100%;
}

/* 슬라이드 높이 */
.hero-slide {
  height: 100%;
}

/* 슬라이드 내부 이미지 컨테이너 */
.hero-slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 슬라이드 이미지 */
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 이미지 배너 링크 (전체 클릭) */
.hero-slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* 영상 배너: 프레임을 꽉 채우도록 크롭 (레터박스 제거) */
.hero-video-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-video-player {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  /* width/height/left/top 은 JS(heroFitVideoEl)에서 런타임 지정 */
  pointer-events: none; /* 네이티브 컨트롤 대신 커스텀 버튼만 사용 (본체 클릭 비활성) */
}

/* 다운로더류 브라우저 확장이 페이지에 주입하는 다운로드 버튼 숨김 (있을 경우).
   ※ 비메오 자체 다운로드 버튼은 cross-origin iframe 내부라 CSS로 못 없앰 → 임베드 controls=0 으로 처리됨 */
.__newvt-svd-logo__ { display: none !important; }

/* 영상 커스텀 컨트롤 (우하단; 좌하단 슬라이더 컨트롤·우상단 링크와 미겹침) */
.hero-video-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 15;
  display: flex;
  gap: 8px;
}
.hero-vctrl-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color .15s, transform .1s;
}
.hero-vctrl-btn:hover  { background-color: rgba(0, 0, 0, 0.75); }
.hero-vctrl-btn:active { transform: scale(0.92); }
.hero-vctrl-btn svg { width: 18px; height: 18px; }

/* 영상 배너 링크 버튼 (컨트롤과 겹치지 않게 우상단) */
.hero-slide-link-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  text-decoration: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero-slide-link-btn:hover {
  background-color: rgba(0, 0, 0, 0.75);
}

/* 컷아웃 오버레이 (좌하단 흰색 박스) */
.hero-cutout {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 68px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffffff;
  z-index: 5;
}

/* 컷아웃 내부 코너 SVG */
.hero-cutout-corner-tl {
  position: absolute;
  top: -20px;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
}

.hero-cutout-corner-br {
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 20px;
  height: 20px;
  display: block;
}

/* 컨트롤 바 */
#hero-controls {
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 68px;
  z-index: 10;
}

/* 슬라이드 카운터 텍스트 */
.hero-counter-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-light-700);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* 카운터 구분자 " / " */
.hero-counter-sep {
  color: var(--color-light-400);
  font-weight: 400;
}

/* 프로그레스 바 트랙 */
.hero-progress-track {
  flex: 1;
  min-width: 60px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-light-200);
  overflow: hidden;
}

/* 프로그레스 바 채움 */
#hero-progress {
  height: 100%;
  border-radius: 2px;
  background-color: var(--color-primary-500);
  animation: progressFill 5000ms linear forwards;
}

/* 이전/다음 버튼 */
.hero-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-light-500);
  border-radius: 50%;
  transition: color 150ms ease, background-color 150ms ease;
  flex-shrink: 0;
      border: 1px solid var(--color-border);
}

/* 일시정지/재생 버튼 — 채워진 원 */
.hero-ctrl-btn-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
  flex-shrink: 0;
}

/* 컨트롤 버튼 내 SVG 아이콘 크기 */
.hero-ctrl-icon-md {
  width: 20px;
  height: 20px;
}
.hero-ctrl-icon-sm {
  width: 14px;
  height:14px;
}

/* pause/play 아이콘 display 제어 */
#hero-icon-pause { display: block; }
#hero-icon-play  { display: none; }

.hero-control-hr{
  width: 1px; height: 13px; background-color: var(--color-border-strong); flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   QuickCard
   -------------------------------------------------------------------------- */

/* 퀵메뉴 컨테이너 */
.quick-menu-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 퀵메뉴 그리드 */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  flex: 1;
}

/* 개별 퀵 카드 공통 */
.quick-card {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: 20px;
  padding: 1.1rem 1.1rem 1rem 1.1rem;
  min-height: 130px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  text-decoration: none;
}

.quick-card:hover {
  background-color: var(--card-bg-hover);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px) scale(1.02);
}

.quick-card:active {
  transform: scale(0.96);
}

/* 카드 라벨 텍스트 */
.quick-card-label {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.375;
  white-space: pre-line;
  color: #fff;
  letter-spacing: -0.01em;
  z-index: 1;
  position: relative;
}

/* 카드 아이콘 원 */
.quick-card-icon {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-card-icon svg {
  width: 36px;
  height: 36px;
}

/* --------------------------------------------------------------------------
   NoticeSection
   -------------------------------------------------------------------------- */

.notice-section {
  background-color: var(--color-light-50);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.notice-section > .container-main {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* 공지+운영시간 그리드 */
.notice-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .notice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3.5rem;
  }
}

/* 공지 헤더 행 (제목 + 더보기) */
.notice-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

/* 공지 목록 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 섹션 제목 (공지사항 / 운영시간 안내) */
.main-section-heading {
  color: var(--color-light-900);
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* 더보기 링크 */
.main-more-link {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--color-primary-500);
  font-size: var(--font-size-body-sm);
  transition: color 150ms ease;
  text-decoration: none;
}

.main-more-link:hover {
  color: var(--color-primary-700);
}

.main-more-link svg {
  width: 16px;
  height: 16px;
}

/* 운영시간 컨테이너 */
.hours-wrap {
  display: flex;
  flex-direction: column;
}

.hours-heading-wrap {
  margin-bottom: 1.75rem;
}

/* 운영시간 카드 */
.hours-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: white;
}

/* 운영시간 행 공통 */
.hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

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

/* 평일/일요일 행 */
.hours-row-label {
  font-weight: 500;
  color: var(--color-light-600);
  font-size: var(--font-size-body);
}

.hours-row-value {
  font-weight: 600;
  color: var(--color-light-800);
  font-size: var(--font-size-body);
}

/* 토요일·공휴일 행 (휴관) */
.hours-row-closed {
  background-color: var(--color-light-50);
}

.hours-row-closed .hours-row-label {
  color: var(--color-light-400);
}

.hours-row-closed .hours-row-value {
  font-weight: 600;
  color: var(--color-light-400);
  font-size: var(--font-size-body);
}

/* 전화문의 행 */
.hours-row-tel {
  background-color: var(--color-primary-50);
}

.hours-row-tel .hours-row-label {
  color: var(--color-primary-700);
}

.hours-row-tel .hours-row-value {
  color: var(--color-primary-600);
}

/* 전화 CTA 버튼 */
.tel-cta {
  margin-top: 1rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  justify-content: center;
  flex: 1;
  min-height: 72px;
  background: linear-gradient(135deg, #38bfb0 0%, #3a7bd5 45%, #6a4ecb 100%);
  box-shadow: 0 4px 20px rgba(58, 123, 213, 0.30);
  text-decoration: none;
  transition: filter 0.2s ease;
  flex-direction: column;
}
.tel-cta > span{
  color: var(--white);
  text-align: center;
}

.tel-cta:hover {
  filter: brightness(1.08);
}

/* CTA 아이콘 원 */
.tel-cta-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.tel-cta-icon svg {
  width: 20px;
  height: 20px;
}

/* CTA 전화번호 텍스트 */
.tel-cta-number {
  font-weight: 700;
  font-size: var(--font-size-heading-3);
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 2;
}

/* --------------------------------------------------------------------------
   GallerySection
   -------------------------------------------------------------------------- */

.gallery-section {
  background-color: white;
}

/* 갤러리 헤더 */
.gallery-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.gallery-tab-row {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  justify-content: space-between;
}

.gallery-tab-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 갤러리 탭 버튼 공통 */
.gallery-tab-btn {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
  letter-spacing: -0.01em;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 200ms ease;
}

/* 누리스케치 탭 (활성: 좌측, 우측 구분선) */
#gallery-tab-nuri {
  color: var(--color-light-900);
  padding-right: 1rem;
  border-right: 2px solid var(--color-border);
}

/* 보도자료 탭 (비활성: 우측, 좌측 패딩) */
#gallery-tab-press {
  color: var(--color-light-300);
  padding-left: 1rem;
}

/* 갤러리 더보기 링크 */
#gallery-more-link {
  display: none; /* JS가 미디어쿼리에 따라 제어 */
  align-items: center;
  gap: 2px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--color-primary-500);
  font-size: var(--font-size-body-sm);
  align-self: flex-end;
  transition: color 150ms ease;
  text-decoration: none;
}

#gallery-more-link:hover {
  color: var(--color-primary-700);
}

#gallery-more-link svg {
  width: 16px;
  height: 16px;
}

/* 갤러리 보도자료 패널 (초기 숨김) */
#gallery-panel-press {
  display: none;
}

/* --------------------------------------------------------------------------
   PartnerBanner
   -------------------------------------------------------------------------- */

.partner-section {
  background-color: white;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 2rem 0;
}

/* 유관기관 제목 */
.partner-heading {
  color: var(--color-light-900);
  font-size: var(--font-size-heading-3);
  margin-top: -4px;
  margin-bottom: 1.25rem;
  opacity: 0;
}

/* 마퀴 래퍼 */
.partner-marquee-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}

/* 페이드 엣지 공통 */
.partner-fade-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.partner-fade-left {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.partner-fade-right {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* 마퀴 트랙 */
.partner-marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  padding-block: 4px;
}

/* 파트너 로고/텍스트 링크 */
.partner-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.partner-link:hover {
  opacity: 1;
}

/* 파트너 로고 이미지 */
.partner-logo {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* 파트너 텍스트 (로고 없을 때) */
.partner-name {
  font-weight: 600;
  color: var(--color-light-500);
  font-size: var(--font-size-body-sm);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   HeroSection — 모바일: 슬라이더/영상 컨트롤 버튼 1/2 크기
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-ctrl-btn,
  .hero-ctrl-btn-play {
    width: 24px;
    height: 24px;
  }
  .hero-ctrl-icon-md {
    width: 15px;
    height: 15px;
  }
  .hero-ctrl-icon-sm {
    width: 10.5px;
    height: 10.5px;
  }
  #hero-controls {
    gap: 6px;
  }
  .hero-vctrl-btn {
    width: 27px;
    height: 27px;
  }
  .hero-vctrl-btn svg {
    width: 13.5px;
    height: 13.5px;
  }
  .hero-video-controls {
    gap: 8px;
  }
  .hero-cutout {
    width: 210px;
    height: 48px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #ffffff;
    z-index: 5;
}
#hero-controls {
    height: 48px;
}
.hero-progress-track {
    min-width: 40px;
}
.quick-card-label {
  font-size: 1rem;
}
.quick-card-icon {
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
  }
.quick-card-icon svg {
  width: 24px;
  height: 24px;
}
}