/* =============================================
 * Photo Gallery Page (single-gallery.php)
 * URL: /{cat}/{slug}/gallery/
 * ============================================= */

.gallery-page { padding: 24px 0 64px; }
.gallery-page .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.gallery-page .breadcrumb {
  font-size: 12px; color: #555; margin: 0 0 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.gallery-page .breadcrumb a { color: #555; text-decoration: none; }
.gallery-page .breadcrumb a:hover { color: #12488d; text-decoration: underline; }
.gallery-page .breadcrumb .bc-sep { color: #ccc; }

.gallery-header { margin: 0 0 32px; padding: 0 0 24px; }
.gallery-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.2em;
  color: #12488d; margin: 0 0 10px; text-transform: uppercase; font-weight: 600;
}
/* 記事詳細のタイトルと同じ級数・書体 */
.gallery-title,
.gallery-header .article-title {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
  color: #1a1a1a !important;
  margin: 18px 0 16px !important;
}
.gallery-description {
  font-size: 14px; line-height: 1.9; color: #555;
  margin: 0 0 16px; max-width: 800px;
}
/* カテゴリバッジ・フラグ・メタは記事詳細と同じ配置感で */
.gallery-header .gallery-cats { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.gallery-header .gallery-flags { margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.gallery-header .gallery-flags svg { width: 20px; height: 20px; }
.gallery-meta {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: #555; margin: 0 0 14px;
}
.gallery-date { font-family: 'Inter', 'Noto Sans JP', sans-serif; letter-spacing: 0.04em; }
.gallery-count { font-size: 13px; color: #555; }
.gallery-back {
  display: inline-block; font-size: 13px; color: #12488d;
  text-decoration: none; padding: 4px 0;
}
.gallery-back:hover { text-decoration: underline; }

.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.gallery-cell {
  display: block; aspect-ratio: 3/2;
  background: #dceaf4 center/cover no-repeat;
  cursor: zoom-in;
  transition: transform .2s ease, opacity .2s ease;
}
.gallery-cell:hover { transform: scale(1.01); opacity: .92; }

.gallery-empty {
  padding: 60px 0; text-align: center; color: #555; font-size: 14px;
}

.gallery-footer { margin: 40px 0 0; text-align: center; }
.gallery-back-btn {
  display: inline-block; padding: 12px 28px;
  border: 1px solid #1a1a1a; color: #1a1a1a;
  text-decoration: none; font-size: 13px; letter-spacing: 0.05em;
  transition: background .2s, color .2s;
}
.gallery-back-btn:hover { background: #1a1a1a; color: #fff; }

/* === Lightbox === */
.kazi-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.94);
  display: none; align-items: center; justify-content: center;
  padding: 60px 80px;
}
.kazi-lightbox.active { display: flex; }

.kazi-lb-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.kazi-lb-img {
  width: 100%; height: 100%;
  background: center/contain no-repeat;
}
.kazi-lb-caption {
  position: absolute; bottom: 28px; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.9);
  font-size: 13px; padding: 0 80px; line-height: 1.5;
}
.kazi-lb-count {
  position: absolute; top: 20px; left: 24px;
  color: rgba(255,255,255,.7);
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.1em;
}
.kazi-lb-close, .kazi-lb-prev, .kazi-lb-next {
  position: absolute; background: rgba(255,255,255,.08);
  border: none; color: #fff; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  font-family: serif;
}
.kazi-lb-close:hover, .kazi-lb-prev:hover, .kazi-lb-next:hover {
  background: rgba(255,255,255,.2);
}
.kazi-lb-close { top: 18px; right: 18px; }
.kazi-lb-prev { top: 50%; left: 24px; transform: translateY(-50%); font-size: 34px; }
.kazi-lb-next { top: 50%; right: 24px; transform: translateY(-50%); font-size: 34px; }

/* === Responsive === */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 768px) {
  .gallery-page { padding: 16px 0 48px; }
  .gallery-page .container { padding: 0 16px; }
  .gallery-title,
  .gallery-header .article-title { font-size: 18px !important; line-height: 1.4 !important; margin: 12px 0 12px !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .kazi-lightbox { padding: 60px 16px; }
  .kazi-lb-caption { padding: 0 60px; bottom: 24px; font-size: 12px; }
  .kazi-lb-prev { left: 8px; width: 44px; height: 44px; }
  .kazi-lb-next { right: 8px; width: 44px; height: 44px; }
  .kazi-lb-close { top: 12px; right: 12px; width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}


/* ==== 強制上書き: 見出しまわり・記事に戻る下 のラインを完全除去 ==== */
body .gallery-page .breadcrumb,
body .gallery-page .gallery-header,
body .gallery-page .gallery-header *,
body .gallery-page .gallery-footer,
body .gallery-page .gallery-back,
body .gallery-page .gallery-back-btn {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* footer 内のボタン本体は枠を残す（ボーダーが四方向で必要なため個別に再指定） */
body .gallery-page .gallery-back-btn {
    border: 1px solid #1a1a1a !important;
}
body .gallery-page .breadcrumb::after,
body .gallery-page .gallery-header::before,
body .gallery-page .gallery-header::after,
body .gallery-page .gallery-footer::before,
body .gallery-page .gallery-footer::after {
    content: none !important;
    display: none !important;
}


/* ==== article_member.css の header {position:sticky} を打ち消す ==== */
body .gallery-page .gallery-header {
    position: static !important;
    top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
    border-top: 0 !important;
}

/* 写真グリッドとペイウォールの間に余白 */
body .gallery-page .gallery-paywall {
    margin-top: 48px !important;
}
@media (max-width: 768px) {
    body .gallery-page .gallery-paywall { margin-top: 32px !important; }
}


/* ==== サイドバー2カラム構成（記事詳細と同じ） ==== */
body .gallery-page .content-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
body .gallery-page .content-main { min-width: 0; }
body .gallery-page .content-sidebar {
    width: 280px;
    position: relative;
}
body .gallery-page .sidebar-sticky {
    position: sticky;
    top: 96px;
    margin-top: 0;
}
/* container の padding は content-with-sidebar が持つので二重にしない */
body .gallery-page > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}
body .gallery-page > .container > .breadcrumb {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* 3カラム→内容幅に応じて 2〜3col */
body .gallery-page .gallery-grid { grid-template-columns: repeat(3, 1fr); }

/* SP はサイドバー非表示 */
@media (max-width: 1024px) {
    body .gallery-page .content-with-sidebar {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    body .gallery-page .content-sidebar {
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto;
    }
    body .gallery-page .sidebar-sticky { position: static !important; }
}

/* ===== ギャラリー内 paywall (single-gallery.php で使用。article_member.css 非依存に自己完結) ===== */
.gallery-page .paywall {
  background: linear-gradient(165deg, #0a0f1a 0%, #0d1525 40%, #1e3a5f 100%);
  border-radius: 0;
  text-align: center;
  margin: 48px 0 40px;
  padding: 56px 32px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.gallery-page .paywall::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: linear-gradient(to right, transparent, #3a7ab5, transparent);
}
.gallery-page .paywall::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: linear-gradient(to right, transparent, rgba(58,122,181,.3), transparent);
}
.gallery-page .paywall-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin: 0 0 16px;
}
.gallery-page .paywall h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 26px; font-weight: 400; color: #fff;
  margin: 0 0 8px; letter-spacing: 1px;
}
.gallery-page .paywall-sub {
  font-family: "Inter", sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #3a7ab5; margin: 0 0 24px;
}
.gallery-page .paywall-divider {
  width: 40px; height: 1px; background: #3a7ab5;
  margin: 0 auto 24px;
}
.gallery-page .paywall p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px; color: rgba(255,255,255,.6);
  line-height: 1.9; margin: 0 auto 28px;
  max-width: 440px;
}
.gallery-page .paywall-register {
  display: inline-block; background: transparent; color: #fff;
  padding: 14px 48px; font-size: 13px; font-weight: 600;
  text-decoration: none; border-radius: 0;
  border: 1px solid rgba(255,255,255,.4);
  transition: all 0.3s; letter-spacing: 2px;
  font-family: "Noto Sans JP", sans-serif;
}
.gallery-page .paywall-register:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.7);
}
.gallery-page .paywall-login {
  display: block; margin: 18px 0 0;
  font-size: 12px; color: rgba(255,255,255,.4);
}
.gallery-page .paywall-login a {
  color: rgba(255,255,255,.6); text-decoration: underline;
  transition: color .2s;
}
.gallery-page .paywall-login a:hover { color: #fff; }
.gallery-page .paywall-note {
  margin: 14px 0 0; font-size: 11px; color: rgba(255,255,255,.35);
  letter-spacing: 0.5px;
}
.gallery-page .paywall-note a { color: rgba(255,255,255,.5); text-decoration: underline; }

@media (max-width: 768px) {
  .gallery-page .paywall { padding: 40px 20px; margin: 32px 0 32px; }
  .gallery-page .paywall h3 { font-size: 20px; }
  .gallery-page .paywall p { font-size: 12px; }
  .gallery-page .paywall-register {
    width: 100%; box-sizing: border-box; padding: 14px 24px;
  }
}

@media (max-width: 768px) {
    body .gallery-page .content-with-sidebar { padding-left: 12px !important; padding-right: 12px !important; }
    body .gallery-page > .container > .breadcrumb { padding-left: 12px !important; padding-right: 12px !important; }
    .gallery-page .container { padding: 0 12px !important; }
}

@media (max-width: 768px) {
    body .gallery-page .content-main.content-main { padding-left: 0 !important; padding-right: 0 !important; }
    body .gallery-page .content-with-sidebar { padding-left: 8px !important; padding-right: 8px !important; }
}