/* =========================================
   Navigation scroll state
   ========================================= */
#main-nav.nav-scrolled {
  background-color: rgba(21, 18, 32, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

.nav-link.scrolled {
  color: #f0ebe0;
}

/* =========================================
   Base Typography
   ========================================= */
body {
  font-family: var(--font-sans, 'Noto Sans JP', sans-serif);
  background-color: #151220;
  color: #f0ebe0;
  line-height: 1.8;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading, 'Noto Serif JP', serif);
  line-height: 1.4;
}

/* =========================================
   Scrollbar
   ========================================= */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #151220; }
::-webkit-scrollbar-thumb { background: #c9a96e44; border-radius: 2px; }

/* =========================================
   FAQ Accordion
   ========================================= */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 500px; }

/* =========================================
   Gallery
   ========================================= */

/* キャプション: グラデーションで写真が映えるように */
.gallery-caption {
  background: linear-gradient(to top, rgba(6, 4, 14, 0.88) 0%, rgba(6, 4, 14, 0) 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* =========================================
   Gallery Modal Layout
   ========================================= */
.gallery-modal-inner {
  display: flex;
  flex-direction: column;
}

/* Mobile: 画像は 16:9 アスペクト比で表示 */
.gallery-modal-image {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0e0c18;
}

.gallery-modal-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem 1.75rem 1.5rem;
  min-height: 240px;
  overflow-y: auto;
}

.gallery-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  margin-top: 1.5rem;
  border-top: 1px solid #2c2838;
}

/* Desktop: 左右並列レイアウト（固定高さで height:100% が確実に機能する） */
@media (min-width: 768px) {
  .gallery-modal-inner {
    flex-direction: row;
    height: 460px;
    max-height: 72vh; /* 画面が低い場合に備えて制限 */
  }
  .gallery-modal-image {
    width: 58%;
    aspect-ratio: unset;
    height: 100%;
    min-height: unset;
  }
  .gallery-modal-info {
    width: 42%;
    min-height: unset;
    height: 100%;
    padding: 2rem 2rem 1.75rem;
    overflow-y: auto;
  }
}

/* =========================================
   Mobile Menu
   ========================================= */
#mobile-menu { transition: all 0.3s ease; }

/* =========================================
   Section Divider
   ========================================= */
.section-divider {
  width: 40px;
  height: 1px;
  background: #c9a96e;
  margin: 0 auto 1rem;
}

/* =========================================
   Smooth Scrolling
   ========================================= */
html { scroll-behavior: smooth; }