/* ==========================================================================
   어셈블101 (ASSEMBLE101) - 공식 최종 스펙 디자인 시스템 & 스타일시트
   ========================================================================== */

/* 1. 웹폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');

/* 2. 글로벌 CSS 변수 (디자인 토큰) */
:root {
  /* 브랜드 컬러 (지정된 3색만 사용) */
  --primary-navy: #073A6B;
  --secondary-gold: #F9DF70;
  --accent-green: #2C8244;

  /* 선택 탭 공통 모서리 (D-029: 모든 선택 탭은 살짝 둥근 사각형) */
  --radius-tab: 6px;

  /* 중립색 (배경 및 텍스트) */
  --bg-main: #FFFFFF;
  --bg-subtle: #FAFAFA;
  --border-color: #E5E0D3;
  
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #757575;
  --text-white: #FFFFFF;

  /* 타이포그래피 */
  --font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-en: 'Poppins', sans-serif;

  /* 규격 */
  --header-top-height: 80px;
  --header-sub-height: 52px;
  --max-width: 1200px;
}

/* 3. 리셋 & 기본 스타일 (그림자, 그라디언트, 글로우 효과 절대 금지) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-kr);
  /* 2026-09-25: 한글은 단어 중간에서 끊지 않는다(줄바꿈이 지저분해지는 주원인).
     긴 영문·URL은 넘치지 않도록 예외로 끊는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

/* T-010(2026-09-06): 포커스 링 (키보드 포커스에서만 표시, outline 기반 —
   그림자가 아니므로 위 전역 box-shadow:none !important 리셋과 충돌하지 않는다) */
:focus-visible {
  outline: 2px solid #073A6B;
  outline-offset: 2px;
}
/* 네이비 채움 위(활성 pill, 모달 등)에서는 골드로 반전 */
.nav-main-btn.active:focus-visible,
.sub-nav-item button.active:focus-visible {
  outline-color: #F9DF70;
}

/* T-009(2026-09-06): 클릭형 div → button 교정 대상 3종의 네이티브 버튼 기본값 리셋.
   border/background-color 등 개별 값은 각 클래스 규칙(아래)에서 그대로 재선언되어 유지된다.
   (시각 변화 없음이 목표 — 위 button{} 리셋으로 못 잡는 display/appearance/font/text-align만 추가 보정) */
.map-link-container,
.gallery-grid-item,
.event-card {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  text-align: inherit;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 공통 컨테이너 */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* 배지 스타일 (지정된 3색만 활용) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
}

.badge-gold {
  background-color: var(--secondary-gold);
  color: var(--primary-navy);
  border-color: var(--secondary-gold);
}

.badge-green {
  background-color: var(--accent-green);
  color: var(--text-white);
  border-color: var(--accent-green);
}

/* 4. 공통 헤더 (그라디언트, 그림자 배제, 얇은 테두리로 구획) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
}

.header-top {
  height: var(--header-top-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 로고 영역 (텍스트 워드마크 절대 금지, 오직 아이콘만) */
.brand-logo-link {
  display: flex;
  align-items: center;
}

.logo-badge {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 상단 메뉴 (텍스트만, 아이콘 없음) */
.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-main-btn {
  font-size: 14px;
  font-weight: 700;
  color: #6B6B6B;
  padding: 9px 18px;
  border-radius: var(--radius-tab);
  background: transparent;
  transition: all 0.2s ease;
  border: none;
}

.nav-main-btn:hover {
  color: var(--primary-navy);
}

.nav-main-btn.active {
  background: #073A6B;
  color: #F9DF70;
  border-radius: var(--radius-tab);
}

/* 우측 CTA (확인 필요 상태) */
.header-actions {
  display: flex;
  align-items: center;
}

.btn-header-cta {
  border: 1px solid var(--primary-navy);
  color: var(--primary-navy);
  font-weight: 700;
  padding: 8px 16px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.btn-header-cta:hover {
  background-color: var(--primary-navy);
  color: var(--text-white);
}

/* 2단 서브 내비게이션 바 (안내 라벨 없이 pill 목록만 표시, 테두리 없음, 아이콘 없음) */
.header-sub-nav {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  height: var(--header-sub-height);
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
}

.sub-nav-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.sub-nav-list {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
}

.sub-nav-item button {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: #6B6B6B;
  padding: 9px 18px;
  border-radius: var(--radius-tab);
  background: transparent;
  transition: all 0.2s ease;
  border: none;
}

/* 시각 크기(padding/font-size/border-radius)는 그대로 두고, 투명 가상요소로
   터치 히트박스만 상하 6px씩 확장(32px→44px). header-sub-nav 바 높이(52px,
   content-box 50px) 안에 여유(9px)가 있어 잘리지 않는다. */
.sub-nav-item button::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  right: 0;
}

.sub-nav-item button:hover {
  color: var(--primary-navy);
}

/* 활성 서브메뉴: 네이비 배경 채움 + 골드 텍스트 */
.sub-nav-item button.active {
  background: #073A6B;
  color: #F9DF70;
  border-radius: var(--radius-tab);
  font-weight: 700;
}

/* 5. 섹션 레이아웃 (히어로 섹션은 기본 삭제) */
.section-block {
  padding: 60px 0;
  border-bottom: 1px solid var(--border-color);
  scroll-margin-top: calc(var(--header-top-height) + var(--header-sub-height));
}

.section-block:last-of-type {
  border-bottom: none;
}

.section-block.bg-subtle {
  background-color: var(--bg-subtle);
}

.section-header {
  margin-bottom: 36px;
}

/* 제목 줄 오른쪽에 버튼을 두는 섹션 헤더 (events.html 행사 등록 버튼, D-037).
   모바일에서는 버튼이 설명 문구 아래로 내려간다(아래 768px 미디어쿼리). */
.section-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.section-header-with-action .btn-management-link {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .section-header-with-action {
    flex-direction: column;
    align-items: flex-start;
  }
}

.section-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 8px;
}

.section-desc {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* 6. 이미지갤러리 모듈 */
.gallery-container {
  width: 100%;
}

/* 슬라이더 뷰 */
.gallery-slider-view {
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  position: relative;
}

.slider-main-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

/* 허용된 아이콘: 화살표 */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 10;
  border: 1px solid var(--border-color);
}

.slider-nav-btn:hover {
  background: var(--secondary-gold);
}

.slider-nav-btn.prev { left: 16px; }
.slider-nav-btn.next { right: 16px; }

.slider-info-bar {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-top: 1px solid var(--border-color);
}

.slider-image-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-navy);
}

.slider-counter {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* 전체 목록보기 버튼 */
.gallery-toggle-bar {
  text-align: center;
  margin-top: 20px;
}

.btn-toggle-grid {
  border: 1px solid var(--primary-navy);
  color: var(--primary-navy);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 20px;
  transition: all 0.2s ease;
}

.btn-toggle-grid:hover {
  background: var(--primary-navy);
  color: var(--text-white);
}

/* 그리드 갤러리 뷰 */
.gallery-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-grid-view.hidden,
.gallery-slider-view.hidden {
  display: none;
}

.gallery-grid-item {
  position: relative;
  border: 1px solid var(--border-color);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFFFF;
}

.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(7, 58, 107, 0.95);
  padding: 10px 16px;
  color: var(--text-white);
}

.grid-item-title {
  font-size: 0.95rem;
  font-weight: 700;
}

/* 7. 기본정보 (편의시설) 모듈 */
/* 지침: 텍스트 태그 칩 형태로만 구성 (아이콘, 카드, 설명 금지) */
.amenities-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.amenity-tag-chip {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 700;
}

/* 8. 위치/오시는길 모듈 */
.location-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
}

.map-link-container {
  display: block;
  position: relative;
  border: 1px solid var(--border-color);
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #FFFFFF;
  transition: border-color 0.2s ease;
}

.map-link-container:hover {
  border-color: var(--primary-navy);
}

.map-static-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.map-link-container:hover .map-static-img {
  opacity: 0.95;
}

.location-details-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.location-info-row {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

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

.location-info-row h4 {
  font-size: 1.05rem;
  color: var(--primary-navy);
  margin-bottom: 6px;
  font-weight: 800;
}

.location-info-row p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* 9. 이용가이드 다운로드 */
/* 2026-09-20: 옅은 카드라 위아래 흰 섹션에 묻힌다는 지적 → 헤더 로고와 같은 "네이비 정사각 + 금색" 배지로
   시선을 잡는다(D안). 배경을 채우지 않아 다른 섹션과 톤이 어긋나지 않는다. */
.guide-download-card {
  border: 1px solid var(--border-color);
  padding: 40px;
  background: var(--bg-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.guide-download-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.guide-download-badge {
  width: 56px;
  height: 56px;
  flex: none;
  background: var(--primary-navy);
  color: var(--secondary-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.guide-download-info h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 6px;
}

.guide-download-info p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.guide-download-meta {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 좁은 화면에서는 여백을 줄이고 배지를 살짝 작게 둔다. */
@media (max-width: 768px) {
  .guide-download-card { padding: 28px 24px; }
  .guide-download-badge { width: 48px; height: 48px; font-size: 1.3rem; }
}

/* 2026-09-19 가이드 PDF 연결 후 활성 버튼 — 다른 링크 버튼(.btn-management-link)과 같은 네이비 외곽선 */
.btn-guide-download {
  display: inline-block;
  border: 1px solid var(--primary-navy);
  background-color: var(--primary-navy);
  color: var(--secondary-gold);
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-guide-download:visited {
  color: var(--secondary-gold);
}

/* 2026-09-21: 모션은 버튼에만 준다. 카드 전체가 움직이면 섹션 전체가 버튼처럼 보인다(사용자 지적).
   버튼이 살짝 떠오르고 그 안의 화살표가 아래로 까딱 — "내려받기"를 동작으로 보여 준다. */
.btn-guide-download:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-guide-download i {
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.btn-guide-download:hover i {
  transform: translateY(3px);
}

/* 10. 브랜드스토리 모듈 (가장 하단에 작고 muted한 블록으로 배치) */
.story-muted-block {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  padding: 24px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.8;
}

.story-muted-block p {
  margin-bottom: 12px;
}

.story-muted-block p:last-child {
  margin-bottom: 0;
}

/* 10-1. 브랜드모션 로고 프레임 시퀀스 (프레임 미준비 시 빈 채로 높이 0 유지, 무해) */
#brand-motion {
  width: 100%;
  max-width: 600px; /* 2026-10-06: 400 → 600(옆 섹션 대비 작다는 지적). 프레임은 800×600 그대로 */
  margin: 0 auto;
}

#brand-motion.is-active {
  aspect-ratio: 4 / 3;
  margin-bottom: 32px;
  background-color: var(--primary-navy);
  overflow: hidden;
}

/* PC 고정 모드: 트랙 높이·고정 위치(top)는 app.js가 화면 크기에 맞춰 넣는다 */
.brand-motion-track.is-pinned {
  margin-bottom: 32px;
}

.brand-motion-track.is-pinned #brand-motion {
  position: sticky;
  margin-bottom: 0;
}

#brand-motion canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 11. 행사 리스트 & 카드 (events.html) */
.events-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.filter-tab-btn {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-tab);
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  background-color: #FFFFFF;
}

/* 활성 상태: 네이비 배경 채움 + 골드 텍스트 */
.filter-tab-btn.active {
  background-color: var(--primary-navy);
  color: var(--secondary-gold);
  border-color: var(--primary-navy);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.event-card {
  border: 1px solid var(--border-color);
  background-color: #FFFFFF;
  cursor: pointer;
}

.event-card-img-wrap {
  aspect-ratio: 16 / 10;
  background-color: #EEEEEE;
  position: relative;
}

.event-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-badge-tag {
  position: absolute;
  top: 12px;
  left: 12px;
}

.event-card-body {
  padding: 20px;
}

.event-card-date {
  font-size: 0.85rem;
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: 8px;
}

.event-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 10px;
}

.event-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.event-card-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.event-more-link {
  font-weight: 700;
  color: var(--primary-navy);
}

/* Empty State / Mock State 안내 */
.mockup-notice-box {
  grid-column: 1 / -1;
  border: 1px solid var(--border-color);
  background-color: #FFFCEB;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 16px;
}

/* 12. 행사관리 모듈 (management.html) */
.management-hero {
  border: 1px solid var(--border-color);
  background-color: var(--bg-subtle);
  padding: 48px 32px;
  margin-bottom: 32px;
}

.management-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 16px;
}

.management-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 800px;
}

.management-links-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-management-link {
  border: 1px solid var(--primary-navy);
  color: var(--primary-navy);
  padding: 12px 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-management-link:hover {
  background-color: var(--primary-navy);
  color: var(--text-white);
}

/* 작은 크기 변형(약도 아래 "네이버 지도에서 보기" 등).
   2026-09-21: 이 값들이 HTML의 style 속성에 박혀 있어 :hover의 글자색을 덮어썼다
   (인라인 스타일이 스타일시트보다 우선한다) → 네이비 배경에 네이비 글자로 보였다. 여기로 옮긴다. */
.btn-management-link--sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* 13. 공통 푸터 */
.site-footer {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
  padding: 48px 0 24px;
  color: var(--text-secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-img {
  width: 36px;
  height: 36px;
}

.footer-logo-text {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-navy);
}

.footer-info-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* 14. 상세 모달 (events.html) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: #FFFFFF;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--border-color);
}

/* 허용된 아이콘: X */
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: var(--bg-subtle);
  color: var(--primary-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--border-color);
  z-index: 10;
}

.modal-close-btn:hover {
  background: var(--primary-navy);
  color: var(--secondary-gold);
}

.modal-header-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--border-color);
}

.modal-body {
  padding: 24px;
}

.modal-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 12px;
}

.modal-meta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.modal-content-text {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* 15. Toast 알림 */
.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--primary-navy);
  color: #FFFFFF;
  padding: 12px 20px;
  border: 1px solid var(--secondary-gold);
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 3000;
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.3s ease;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* 16. prefers-reduced-motion 대응
   (브랜드모션 #brand-motion 스크롤 스크러빙의 reduced-motion 처리는 app.js에서
   이미 완료되어 있으므로 여기서 다루지 않는다)
   - html scroll-behavior: 서브내비 pill의 href="#..." 없이도 해시 변경/진입 시
     브라우저 네이티브 스크롤이 이 값을 따라간다(JS에서 명시적으로 scrollIntoView
     behavior를 넘기는 경우는 이 값의 영향을 받지 않아 app.js에서 별도 분기한다). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .slider-main-image {
    transition: none;
  }

  .modal-backdrop {
    transition: none;
  }

  /* 이용가이드 버튼의 떠오르기·화살표 모션 (2026-09-21) */
  .btn-guide-download i {
    transition: none;
  }

  .btn-guide-download:hover,
  .btn-guide-download:hover i {
    transform: none;
  }

  /* 쿠키 배너 등장 효과 (F-011) */
  .analytics-consent-banner {
    animation: none;
  }
}

/* 반응형 모바일 */
@media (max-width: 768px) {
  .location-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* 모바일 헤더 2행 분리: 1행(로고+CTA), 2행(상단 메뉴 - 서브내비와 동일한
     overflow-x:auto + white-space:nowrap 가로스크롤 패턴). 헤더 실렌더 높이가
     80px에서 바뀌므로 --header-top-height도 함께 갱신해 앵커 스크롤 오프셋을 맞춘다. */
  :root {
    --header-top-height: 124px;
  }

  .header-top {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 0;
  }

  .header-actions {
    order: 2;
  }

  .main-nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* 17. 비품 사진 모듈 (기본정보·편의시설 하위, T-028)
   - 사진 칸 3:4, object-fit:cover, 모서리 0, 새 색 없음. 열 수: 기본 6 / ≤1024px 4 / ≤768px 3.
   - 무료(16장)·유료(3장+노트북 플레이스홀더) 그리드가 이 한 세트의 클래스를 공유한다. */
.equip-block {
  margin-top: 32px;
}

.equip-block-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 16px;
}

/* 2026-09-22: 품목마다 줄을 그으니 표처럼 보여 어색했다 → 선은 목록 위 구분선 하나만 둔다. */
.equip-rental-price-list {
  list-style: none;
  margin-bottom: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

.equip-rental-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 0.95rem;
}

.equip-rental-item-name {
  font-weight: 700;
  color: var(--text-primary);
}

.equip-rental-item-price {
  font-weight: 800;
  color: var(--primary-navy);
}

.equip-notice-text {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.equip-photo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.equip-photo-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0;
  background: #FFFFFF;
  text-align: center;
  transition: border-color 0.2s ease;
}

button.equip-photo-item {
  cursor: pointer;
}

button.equip-photo-item:hover {
  border-color: var(--primary-navy);
}

.equip-photo-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border-bottom: 1px solid var(--border-color);
}

.equip-photo-placeholder-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background-color: #EEEEEE;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.equip-photo-placeholder {
  cursor: default;
}

.equip-photo-name {
  padding: 8px 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}

/* 모달: 기존 .modal-box/.modal-close-btn/.slider-info-bar/.slider-nav-btn 재사용,
   여기서는 폭 오버라이드와 이미지 래퍼만 추가한다 */
.equip-modal-box {
  max-width: 720px;
}

.equip-modal-img-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}

.equip-modal-img {
  max-width: 100%;
  /* .modal-box의 max-height(90vh) 안에 아래 이름·카운터 줄(약 60px)까지 스크롤 없이 들어가게 한다 */
  max-height: calc(90vh - 64px);
  object-fit: contain;
  display: block;
}

@media (max-width: 1024px) {
  .equip-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .equip-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 개인정보처리방침 페이지 */
.policy-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

.policy-page h1 {
  margin-bottom: 32px;
  color: var(--primary-navy);
  font-size: 2rem;
  line-height: 1.3;
}

.policy-page h2 {
  margin: 40px 0 16px;
  color: var(--primary-navy);
  font-size: 1.35rem;
  line-height: 1.4;
}

.policy-page p {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.policy-page ul {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--text-secondary);
}

.policy-page li + li {
  margin-top: 8px;
}

.policy-page .policy-table-wrap {
  margin: 8px 0 16px;
  overflow-x: auto;
}

.policy-page table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: var(--text-secondary);
}

.policy-page th,
.policy-page td {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
}

.policy-page th {
  color: var(--primary-navy);
}

[hidden] { display: none !important; }

/* 쿠키 동의 배너 (F-011) */
.analytics-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: #FFFFFF;
  /* 2026-09-22: 흰 배경에 얇은 선이라 지나치기 쉬웠다 → 네이비 굵은 선 + 올라오는 등장으로 시선을 끈다.
     화면을 가리거나 조작을 막지는 않는다(선택 동의라 거부해도 이용에 제한이 없어야 한다). */
  border-top: 3px solid var(--primary-navy);
  animation: a101-consent-rise 0.35s ease-out;
}

@keyframes a101-consent-rise {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.analytics-consent-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.analytics-consent-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.analytics-consent-title {
  margin-bottom: 4px;
  color: var(--primary-navy);
  font-size: 1rem;
  line-height: 1.4;
}

.analytics-consent-description {
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.analytics-consent-policy-link {
  color: var(--primary-navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
}

.analytics-consent-actions {
  flex: 0 0 360px;
  min-width: 0;
  display: flex;
  gap: 12px;
}

.analytics-consent-button {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.analytics-consent-allow {
  border: 1px solid var(--primary-navy);
  background: var(--primary-navy);
  color: var(--secondary-gold);
}

.analytics-consent-deny {
  border: 1px solid var(--primary-navy);
  color: var(--primary-navy);
  background: transparent;
}

@media (max-width: 768px) {
  .analytics-consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .analytics-consent-actions {
    width: 100%;
    flex-basis: auto;
  }
}

/* 행사관리 — 라인업나우 3단계 안내 (2026-09-22, F-008)
   사진 없이 무엇을 하는 서비스인지 보이게 한다. 문구는 체험 페이지에 있는 기능만 쓴다. */
.lineup-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}

.lineup-step {
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  padding: 20px;
}

.lineup-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary-navy);
  color: var(--secondary-gold);
  font-family: var(--font-en);
  font-weight: 800;
  margin-bottom: 12px;
}

.lineup-step-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 6px;
}

.lineup-step-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 라인업나우 소개 영상 (2026-09-29) — 16:9, 카드와 같은 1px 테두리 */
.lineup-video {
  margin: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
}

.lineup-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 체험 버튼을 주 동작으로 (D안) */
.btn-management-link--primary {
  background-color: var(--primary-navy);
  color: var(--secondary-gold);
}

.btn-management-link--primary:hover {
  opacity: 0.9;
  color: var(--secondary-gold);
}

.management-demo-note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .lineup-steps { grid-template-columns: 1fr; }
  /* 영상 속 글자가 작아지지 않게 휴대폰에서는 영상을 카드 가장자리까지 넓힌다 */
  .management-hero { padding: 32px 16px; }
  .lineup-video { margin-inline: -16px; border-inline: 0; }
}

/* 예약 가능 시간 (F-010 ⓓ) */
.availability-date-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.availability-date-picker label {
  font-weight: 700;
  color: var(--primary-navy);
}

.availability-date-picker input {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font: inherit;
}

/* 2026-09-24: 가능한 시간을 전부 나열하지 않고 **이용 불가 시간만** 묶어서 보여 준다(사용자 결정). */
.availability-blocked-label {
  margin-top: 20px;
  font-weight: 800;
  color: var(--primary-navy);
}

.availability-blocked-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.availability-blocked-item {
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 700;
}

.availability-notice {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .availability-date-picker {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .availability-date-picker input {
    width: 100%;
  }
}

/* 2026-09-25 모바일 줄바꿈 교정 (기존 디자인 유지, 배치만 조정) */
.nowrap { white-space: nowrap; }

/* 푸터 맨 아래 줄: 좁은 화면에서 링크가 "관리 자"처럼 글자 단위로 쪼개지던 문제 */
.footer-bottom > div:last-child a { white-space: nowrap; }

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-bottom > div:last-child {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}