/* ══════════════════════════════════════════════════
       CENTRAL GALLERY — PREMIUM MASONRY EDITION
       ■ Pinterest-style CSS columns + Skeleton loader
       ■ Navy × Gold × Ivory · Serif × Sans duo
    ══════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Brand */
      --navy:       #1a2a4a;
      --navy-deep:  #0f1e38;
      --navy-light: #243a5e;
      --gold:       #c9a84c;
      --gold-light: #e2c475;
      --gold-deep:  #9a7529;

      --cream:      #fef9f0;
      --ivory:      #faf6eb;
      --paper:      #fffefa;
      --white:      #ffffff;

      --text:       #1a1a2e;
      --text-mid:   #4a5568;
      --text-soft:  #718096;
      --line:       #e8ddc5;

      --serif:      "Noto Serif KR", "Playfair Display", Georgia, serif;
      --sans:       "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;

      --shadow-soft: 0 2px 10px rgba(15, 30, 56, 0.06);
      --shadow-mid:  0 14px 40px rgba(15, 30, 56, 0.14);
      --shadow-deep: 0 30px 80px rgba(15, 30, 56, 0.28);

      --radius: 14px;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      color: var(--text);
      background: var(--cream);
      line-height: 1.7;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    /* 한글 줄바꿈 + overflow 방지 */
    h1, h2, h3, p, span, div, a, li, cite, small {
      word-break: keep-all;
      overflow-wrap: break-word;
    }

    /* ══════════════════════════════════════════════════
       FLOATING HOME
    ══════════════════════════════════════════════════ */
    .floating-home {
      position: fixed;
      /* 상단 관리자 바(#gjjach-top-bar · 38px) 아래로 내려 겹치지 않게 */
      top: 50px; left: 16px;
      z-index: 8500; /* 관리자 바(9000)보다 낮게 — 바 텍스트를 가리지 않음 */
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 16px 9px 12px;
      background: rgba(15, 30, 56, 0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(226, 196, 117, 0.35);
      border-radius: 50px;
      color: var(--cream);
      font-size: 12.5px; font-weight: 700;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      transition: all .25s;
      text-decoration: none;
    }
    .floating-home:hover {
      background: var(--navy-deep);
      transform: translateY(-2px);
      color: var(--gold-light);
    }
    .floating-home svg { flex-shrink: 0; }
    /* 모바일: 관리자 바가 더 조밀해질 수 있어 살짝 내려 안정적으로 */
    @media (max-width: 600px) {
      .floating-home {
        top: 46px; left: 10px;
        padding: 7px 13px 7px 10px;
        font-size: 12px;
      }
      .floating-home svg { width: 15px; height: 15px; }
    }

    /* ══════════════════════════════════════════════════
       HERO — EDITORIAL COVER
    ══════════════════════════════════════════════════ */
    .hero {
      position: relative;
      padding: 120px 24px 70px;
      background:
        radial-gradient(ellipse at 20% 10%, rgba(201,168,76,0.16), transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(63, 107, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #fef9f0 0%, #faf2dc 100%);
      text-align: center;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 66px; left: 26px; right: 26px; bottom: 36px;
      border-top: 1px solid rgba(154, 117, 41, 0.22);
      border-bottom: 1px solid rgba(154, 117, 41, 0.22);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      top: 70px; left: 30px; right: 30px; bottom: 40px;
      border-top: 1px solid rgba(154, 117, 41, 0.10);
      border-bottom: 1px solid rgba(154, 117, 41, 0.10);
      pointer-events: none;
    }
    .hero-inner { position: relative; max-width: 880px; margin: 0 auto; }
    .hero-issue {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: var(--serif);
      font-size: 11px; font-weight: 500; font-style: italic;
      letter-spacing: 0.4em;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .hero-issue::before, .hero-issue::after {
      content: ''; display: inline-block;
      width: 32px; height: 1px; background: var(--gold);
    }
    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(42px, 7vw, 80px);
      font-weight: 700;
      color: var(--navy-deep);
      line-height: 1.06;
      letter-spacing: -0.02em;
      margin-bottom: 22px;
    }
    .hero h1 .script {
      display: block;
      font-style: italic;
      font-weight: 500;
      font-size: 0.52em;
      color: var(--gold-deep);
      letter-spacing: 0.02em;
      margin-bottom: 10px;
    }
    .hero p {
      font-family: var(--serif);
      font-size: clamp(14px, 1.6vw, 17px);
      font-style: italic;
      color: var(--text-mid);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.9;
    }

    @media (max-width: 640px) {
      .hero { padding: 92px 18px 56px; }
      .hero::before, .hero::after { left: 12px; right: 12px; }
      .hero h1 { font-size: clamp(32px, 9vw, 48px); }
      .hero p { font-size: 13.5px; padding: 0 4px; }
    }

    /* ══════════════════════════════════════════════════
       TOOLBAR — Tag filter
    ══════════════════════════════════════════════════ */
    .toolbar {
      position: sticky; top: 0;
      z-index: 60;
      background: rgba(254, 249, 240, 0.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      padding: 14px 24px;
    }
    .tb-inner {
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; flex-wrap: wrap;
    }
    .tag-filter {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .tag-btn {
      padding: 8px 18px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 99px;
      color: var(--text-mid);
      font-family: var(--sans);
      font-size: 13px; font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }
    .tag-btn:hover {
      background: var(--cream);
      border-color: var(--gold);
      color: var(--gold-deep);
    }
    .tag-btn.active {
      background: var(--navy-deep);
      color: var(--cream);
      border-color: var(--navy-deep);
      box-shadow: 0 6px 18px rgba(15, 30, 56, 0.25);
    }
    .tb-count {
      font-family: var(--serif);
      font-size: 13px;
      font-style: italic;
      color: var(--text-soft);
      letter-spacing: 0.06em;
      flex-shrink: 0;
    }
    .tb-count::before {
      content: '—— '; color: var(--gold);
    }
    @media (max-width: 640px) {
      .toolbar {
        padding: 10px 14px;
      }
      .tb-inner { gap: 8px; }
      .tag-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
      }
      .tag-filter::-webkit-scrollbar { display: none; }
      .tag-btn { padding: 7px 14px; font-size: 12.5px; flex-shrink: 0; }
      .tb-count { font-size: 11.5px; }
    }

    /* ══════════════════════════════════════════════════
       GALLERY — PINTEREST MASONRY (CSS columns)
    ══════════════════════════════════════════════════ */
    .gallery-wrap {
      max-width: 1280px; margin: 0 auto;
      padding: 44px 24px 100px;
    }
    .gallery-grid {
      column-count: 4;
      column-gap: 22px;
    }
    @media (max-width: 1100px) { .gallery-grid { column-count: 3; } }
    @media (max-width: 760px)  { .gallery-grid { column-count: 2; column-gap: 14px; } }
    @media (max-width: 440px)  { .gallery-grid { column-count: 2; column-gap: 10px; } }

    .g-card {
      position: relative;
      display: inline-block;
      width: 100%;
      margin: 0 0 22px;
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      cursor: pointer;
      background: transparent;
      border-radius: 0;
      overflow: visible;
      box-shadow: none;
      transition: transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .g-card:hover { transform: translateY(-4px); }
    @media (max-width: 760px)  { .g-card { margin-bottom: 14px; } }

    .g-cover {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 12px;
      background: var(--ivory);
      box-shadow:
        0 1px 0 rgba(120, 90, 50, 0.06),
        0 8px 22px rgba(15, 30, 56, 0.09);
      transition: box-shadow .3s;
      /* skeleton shimmer 초기 상태 */
      min-height: 180px;
    }
    .g-card:hover .g-cover {
      box-shadow:
        0 1px 0 rgba(120, 90, 50, 0.08),
        0 20px 44px rgba(15, 30, 56, 0.20);
    }
    .g-cover.is-loading::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%) var(--ivory),
        linear-gradient(180deg, #f5eddc, #faf6eb);
      background-size: 200% 100%, 100% 100%;
      animation: shimmer 1.4s linear infinite;
      z-index: 1;
    }
    @keyframes shimmer {
      0%   { background-position: -150% 0, 0 0; }
      100% { background-position: 150% 0, 0 0; }
    }
    .g-cover img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
      opacity: 0;
    }
    .g-cover img.is-loaded {
      opacity: 1;
    }
    .g-card:hover .g-cover img.is-loaded { transform: scale(1.05); }
    .g-cover::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 55%, rgba(15, 30, 56, 0.4));
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none;
      z-index: 2;
    }
    .g-card:hover .g-cover::after { opacity: 1; }

    .g-tag {
      position: absolute;
      top: 12px; left: 12px;
      background: var(--paper);
      color: var(--gold-deep);
      font-family: var(--sans);
      font-size: 10px; font-weight: 800;
      padding: 4px 10px;
      border-radius: 99px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(15, 30, 56, 0.15);
      z-index: 3;
    }
    .g-count {
      position: absolute;
      bottom: 12px; right: 12px;
      background: rgba(15, 30, 56, 0.78);
      color: var(--cream);
      font-family: var(--sans);
      font-size: 11px; font-weight: 700;
      padding: 4px 10px;
      border-radius: 99px;
      backdrop-filter: blur(6px);
      letter-spacing: 0.05em;
      z-index: 3;
    }
    .g-info { padding: 14px 4px 0; }
    .g-date {
      font-family: var(--serif);
      font-size: 11.5px; font-style: italic;
      color: var(--text-soft);
      letter-spacing: 0.14em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }
    .g-date::after {
      content: ''; display: inline-block;
      width: 14px; height: 1px; background: var(--gold);
      vertical-align: middle; margin-left: 8px;
    }
    .g-title {
      font-family: var(--serif);
      font-size: 16.5px;
      font-weight: 600;
      color: var(--navy-deep);
      line-height: 1.4;
      letter-spacing: -0.01em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color .2s;
    }
    .g-card:hover .g-title { color: var(--gold-deep); }

    /* 이미지 로드 실패 시 */
    .g-cover.is-error {
      min-height: 200px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--ivory), var(--cream));
    }
    .g-cover.is-error::before { display: none; }
    .g-cover.is-error img { display: none; }
    .g-cover.is-error::after {
      content: '🖼';
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 40px;
      opacity: 0.4;
      background: transparent;
    }

    /* ══════════════════════════════════════════════════
       EMPTY STATE
    ══════════════════════════════════════════════════ */
    .empty {
      text-align: center;
      padding: 100px 20px;
      color: var(--text-soft);
    }
    .empty-icon { font-size: 54px; margin-bottom: 18px; opacity: 0.6; }
    .empty p {
      font-family: var(--serif);
      font-size: 15px;
      font-style: italic;
      color: var(--text-soft);
    }

    /* ══════════════════════════════════════════════════
       DETAIL MODAL
    ══════════════════════════════════════════════════ */
    #detail-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 800;
      background: rgba(15, 30, 56, 0.88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow-y: auto;
      padding: 40px 20px 60px;
    }
    #detail-overlay.show { display: block; }
    .detail-inner {
      max-width: 920px; margin: 0 auto;
      background: var(--paper);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-deep);
      border: 1px solid rgba(226, 196, 117, 0.35);
    }
    .detail-head {
      background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
      padding: 28px 32px;
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 14px;
      position: relative;
    }
    .detail-head::after {
      content: '';
      position: absolute;
      left: 32px; right: 32px; bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), transparent);
    }
    .detail-head-info { flex: 1; min-width: 0; }
    .detail-tag-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .detail-tag {
      background: var(--gold);
      color: var(--navy-deep);
      font-family: var(--sans);
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.2em;
      padding: 3px 10px;
      border-radius: 99px;
      text-transform: uppercase;
    }
    .detail-date {
      font-family: var(--serif);
      font-size: 12px; font-style: italic;
      color: var(--gold-light);
      letter-spacing: 0.15em;
    }
    .detail-title {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 600;
      color: var(--cream);
      line-height: 1.3;
      letter-spacing: -0.015em;
    }
    .detail-close {
      background: rgba(250, 246, 235, 0.1);
      border: 1px solid rgba(212, 181, 101, 0.4);
      color: var(--cream);
      width: 38px; height: 38px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: all .25s;
    }
    .detail-close:hover {
      background: var(--gold);
      color: var(--navy-deep);
      border-color: var(--gold);
      transform: rotate(90deg);
    }
    .detail-body { padding: 28px; }

    /* 사진 그리드 레이아웃 (상세모달 내부) */
    .photo-grid.layout-1 { display: block; max-width: 720px; margin: 0 auto; }
    .photo-grid.layout-1 .ph-item { border-radius: 10px; overflow: hidden; cursor: pointer; max-height: 540px; }

    .photo-grid.layout-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .photo-grid.layout-2 .ph-item { border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }

    .photo-grid.layout-3 {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px; height: 440px;
    }
    .photo-grid.layout-3 .ph-item { border-radius: 10px; overflow: hidden; cursor: pointer; }
    .photo-grid.layout-3 .ph-item:first-child { grid-row: 1 / 3; }

    .photo-grid.layout-4 {
      display: grid; grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr; gap: 10px; height: 460px;
    }
    .photo-grid.layout-4 .ph-item { border-radius: 10px; overflow: hidden; cursor: pointer; }

    .photo-grid.layout-5 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 280px 200px;
      gap: 10px;
    }
    .photo-grid.layout-5 .ph-item { border-radius: 10px; overflow: hidden; cursor: pointer; }
    .photo-grid.layout-5 .ph-item:nth-child(1) { grid-column: 1; grid-row: 1; }
    .photo-grid.layout-5 .ph-item:nth-child(2) { grid-column: 2; grid-row: 1; }
    .photo-grid.layout-5 .ph-bottom {
      grid-column: 1 / 3;
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    }
    .photo-grid.layout-5 .ph-bottom .ph-item { border-radius: 10px; overflow: hidden; cursor: pointer; }

    .photo-grid.layout-many {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .photo-grid.layout-many .ph-item {
      border-radius: 10px; overflow: hidden; cursor: pointer;
      aspect-ratio: 1;
    }
    .photo-grid.layout-many .ph-item:first-child {
      grid-column: 1 / 3; grid-row: 1 / 3;
      aspect-ratio: auto;
    }

    .ph-more { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; }
    .ph-more-overlay {
      position: absolute; inset: 0;
      background: rgba(15, 30, 56, 0.7);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 4px;
      backdrop-filter: blur(3px);
    }
    .ph-more-num {
      font-family: var(--serif);
      font-size: 36px; font-weight: 700;
      color: var(--cream);
      font-style: italic;
    }
    .ph-more-lbl {
      font-family: var(--sans);
      font-size: 11px; font-weight: 700;
      color: var(--gold-light);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .ph-item { position: relative; background: var(--ivory); }
    .ph-item::after {
      content: "⊹";
      position: absolute; inset: 0;
      background: rgba(15, 30, 56, 0.28);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-size: 32px; color: var(--cream);
      opacity: 0;
      transition: opacity .25s;
    }
    .ph-item:hover::after { opacity: 1; }
    .ph-item img { width: 100%; height: 100%; object-fit: cover; }

    .show-all-btn {
      display: block;
      margin: 22px auto 0;
      background: transparent;
      border: 1px solid var(--navy);
      color: var(--navy-deep);
      font-family: var(--serif);
      font-size: 13.5px; font-style: italic;
      padding: 11px 32px;
      border-radius: 99px;
      cursor: pointer;
      transition: all .25s;
      letter-spacing: 0.06em;
    }
    .show-all-btn:hover {
      background: var(--navy-deep);
      color: var(--cream);
      transform: translateY(-1px);
    }

    /* ══════════════════════════════════════════════════
       LIGHTBOX — GLASSMORPHISM
    ══════════════════════════════════════════════════ */
    #lightbox {
      display: none;
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(8, 10, 20, 0.94);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      align-items: center; justify-content: center;
    }
    #lightbox.show { display: flex; }
    .lb-wrap {
      position: relative;
      max-width: 94vw; max-height: 90vh;
      display: flex; align-items: center; justify-content: center;
    }
    .lb-wrap img {
      max-width: 90vw; max-height: 85vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
      width: auto; height: auto;
    }
    .lb-btn {
      position: fixed; top: 50%; transform: translateY(-50%);
      background: rgba(250, 246, 235, 0.08);
      border: 1px solid rgba(226, 196, 117, 0.25);
      color: var(--cream);
      width: 52px; height: 52px;
      border-radius: 50%;
      font-size: 22px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
      z-index: 1001;
      backdrop-filter: blur(10px);
    }
    .lb-btn:hover {
      background: var(--gold);
      color: var(--navy-deep);
      border-color: var(--gold);
    }
    #lb-prev { left: 28px; }
    #lb-next { right: 28px; }
    #lb-close {
      position: fixed; top: 24px; right: 28px;
      background: rgba(250, 246, 235, 0.08);
      border: 1px solid rgba(226, 196, 117, 0.25);
      color: var(--cream);
      width: 46px; height: 46px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
      z-index: 1001;
      backdrop-filter: blur(10px);
    }
    #lb-close:hover {
      background: #c53030;
      border-color: #c53030;
      transform: rotate(90deg);
    }
    .lb-counter {
      position: fixed;
      bottom: 30px; left: 50%; transform: translateX(-50%);
      background: rgba(250, 246, 235, 0.08);
      color: var(--gold-light);
      font-family: var(--serif);
      font-size: 13px; font-style: italic;
      padding: 7px 22px;
      border-radius: 99px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(226, 196, 117, 0.2);
      letter-spacing: 0.1em;
    }
    .lb-caption {
      position: fixed;
      bottom: 72px; left: 50%; transform: translateX(-50%);
      color: rgba(250, 246, 235, 0.72);
      font-family: var(--serif);
      font-size: 14px; font-style: italic;
      max-width: 540px; text-align: center;
      padding: 0 20px;
    }

    @media (max-width: 600px) {
      .lb-btn { width: 44px; height: 44px; }
      #lb-prev { left: 10px; }
      #lb-next { right: 10px; }
      #lb-close { top: 18px; right: 18px; width: 40px; height: 40px; }
      .detail-head { padding: 22px; }
      .detail-title { font-size: 20px; }
      .detail-body { padding: 22px 16px; }
    }

    /* ══════════════════════════════════════════════════
       FOOTER — COLOPHON
    ══════════════════════════════════════════════════ */
    .page-footer {
      background: var(--navy-deep);
      color: rgba(255, 255, 255, 0.55);
      text-align: center;
      padding: 56px 24px 48px;
      position: relative;
    }
    .page-footer::before {
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 60%; max-width: 500px;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .footer-mark {
      font-family: var(--serif);
      font-size: 13px; font-style: italic;
      color: var(--gold-light);
      letter-spacing: 0.3em;
      margin-bottom: 14px;
      text-transform: uppercase;
    }
    .footer-church {
      font-family: var(--serif);
      font-size: 18px; font-weight: 600;
      color: #fff;
      margin-bottom: 6px;
    }
    .footer-info {
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
    }

    /* ══════════════════════════════════════════════════
       ADMIN (기존 로직 호환)
    ══════════════════════════════════════════════════ */
    .admin-bar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 600;
      background: var(--navy-deep);
      color: var(--cream);
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 24px; font-size: 13px;
      box-shadow: 0 -4px 16px rgba(0,0,0,.28);
      border-top: 2px solid var(--gold);
    }
    .admin-bar-user { display: flex; align-items: center; gap: 10px; }
    .admin-bar-badge {
      background: var(--gold);
      color: var(--navy-deep);
      font-size: 10px; font-weight: 800;
      padding: 3px 10px;
      border-radius: 99px;
      letter-spacing: 0.15em;
    }
    .admin-bar-btns { display: flex; gap: 8px; }
    .admin-bar-btn {
      font-size: 12px; font-weight: 700; padding: 7px 16px;
      border: none; border-radius: 99px; cursor: pointer;
      font-family: var(--sans);
      transition: all .2s;
    }
    .btn-admin-panel { background: rgba(250,246,235,.15); color: var(--cream); }
    .btn-admin-panel:hover { background: var(--gold); color: var(--navy-deep); }
    .btn-logout { background: rgba(250,246,235,.08); color: rgba(250,246,235,.7); }
    .btn-logout:hover { background: #c53030; color: var(--cream); }

    .g-card { position: relative; }
    .admin-btns {
      position: absolute; top: 10px; right: 10px; z-index: 10;
      display: none; flex-direction: column; gap: 4px; align-items: flex-end;
    }
    body.admin-mode .admin-btns { display: flex; }

    .del-btn {
      border: none; border-radius: 6px;
      font-size: 11px; font-weight: 700; padding: 5px 11px;
      cursor: pointer; color: #fff; white-space: nowrap;
      transition: opacity .2s; backdrop-filter: blur(6px);
      font-family: var(--sans);
    }
    .del-btn:hover { opacity: .85; }
    .del-btn-hide { background: rgba(15, 30, 56, .88); }
    .del-btn-perm { background: rgba(181, 71, 46, .92); }
    .del-btn-move { background: rgba(154, 117, 41, .92); }
    body.admin-mode { padding-bottom: 60px; }

    /* 이동 다이얼로그 */
    #move-dialog-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 1200;
      background: rgba(15, 30, 56, .78);
      backdrop-filter: blur(8px);
      align-items: center; justify-content: center;
    }
    #move-dialog-overlay.show { display: flex; }
    .move-dialog {
      background: var(--paper);
      border-radius: var(--radius);
      padding: 32px 32px 26px;
      min-width: 320px; max-width: 400px; width: 90%;
      box-shadow: var(--shadow-deep);
      border: 1px solid var(--line);
    }
    .move-dialog h3 {
      font-family: var(--serif);
      font-size: 20px; font-weight: 600;
      color: var(--navy-deep);
      margin-bottom: 6px;
    }
    .move-dialog p {
      font-size: 12.5px; color: var(--text-soft);
      margin-bottom: 20px; line-height: 1.6;
    }
    .move-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .move-option {
      padding: 12px 18px;
      border-radius: 10px;
      border: 1.5px solid var(--line);
      background: var(--ivory);
      font-family: var(--sans);
      font-size: 13px; font-weight: 600;
      color: var(--navy);
      cursor: pointer; text-align: left;
      transition: all .15s;
    }
    .move-option:hover {
      border-color: var(--gold);
      background: var(--cream);
      color: var(--gold-deep);
    }
    .move-option.active {
      border-color: var(--gold);
      background: #fff5d9;
      color: var(--navy-deep);
    }
    .move-dialog-btns { display: flex; gap: 10px; justify-content: flex-end; }
    .move-btn-cancel {
      padding: 9px 20px;
      border-radius: 99px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-size: 13px;
      cursor: pointer;
      color: var(--text-mid);
      font-family: var(--sans);
    }
    .move-btn-ok {
      padding: 9px 22px;
      border-radius: 99px;
      border: none;
      background: var(--navy-deep);
      color: var(--cream);
      font-size: 13px; font-weight: 700;
      cursor: pointer;
      font-family: var(--sans);
      transition: opacity .15s;
    }
    .move-btn-ok:hover { opacity: .88; background: var(--gold-deep); }

    .g-card.hidden-post { opacity: .35; pointer-events: none; }
    body.admin-mode .g-card.hidden-post { opacity: 1; pointer-events: auto; }

    .hd-login {
      font-size: 12px; color: rgba(255,255,255,.7);
      border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
      padding: 5px 14px; cursor: pointer;
      white-space: nowrap;
    }
    .hd-login:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }

    /* ══════════════════════════════════════════════════
       MOBILE FONT SAFETY — 한글 깨짐 방지
    ══════════════════════════════════════════════════ */
    body, h1, h2, h3, h4, h5, h6, p, span, div, button, a, label, input, textarea {
      font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
                   "Malgun Gothic", "맑은 고딕", "Noto Sans KR",
                   -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    .cp-hero h1, .cp-hero p, .cp-card-title, .cp-card-desc,
    .gv-header h2, .gv-header p, .detail-title {
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    /* ══════════════════════════════════════════════════
       CATEGORY PICKER — 에디토리얼 카드 그리드
    ══════════════════════════════════════════════════ */
    .category-picker {
      max-width: 1280px;
      margin: 0 auto;
      padding: 48px 24px 96px;
      position: relative;
    }
    .category-picker.exiting {
      pointer-events: none;
    }
    .cp-hero {
      text-align: center;
      margin-bottom: 56px;
      opacity: 0;
      animation: cpFadeDown .9s cubic-bezier(.22, 1, .36, 1) .1s forwards;
    }
    @keyframes cpFadeDown {
      from { opacity: 0; transform: translateY(-16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .cp-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 18px;
      background: rgba(184, 151, 90, .12);
      border: 1px solid rgba(184, 151, 90, .3);
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      color: var(--gold-deep);
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }
    .cp-hero h1 {
      font-family: var(--serif);
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800;
      color: var(--navy-deep);
      letter-spacing: -.03em;
      line-height: 1.2;
      margin-bottom: 14px;
    }
    .cp-hero h1 em {
      font-style: italic;
      color: var(--gold-deep);
      font-weight: 400;
      font-size: .78em;
      letter-spacing: -.01em;
    }
    .cp-hero p {
      color: var(--text-soft);
      font-size: clamp(13.5px, 1.5vw, 15.5px);
      line-height: 1.75;
      max-width: 540px;
      margin: 0 auto;
      letter-spacing: -.005em;
    }
    .cp-hero-decor {
      margin-top: 24px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      color: var(--gold);
    }
    .cp-hero-decor .line {
      width: 48px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .cp-hero-decor .emblem {
      font-size: 16px;
      color: var(--gold-deep);
    }

    /* 카드 그리드 */
    .cp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      justify-content: start;
    }
    .cp-grid .cp-card.cp-card-all {
      grid-column: span 3;
    }

    /* 단일 카드 */
    .cp-card {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      overflow: hidden;
      cursor: pointer;
      background: var(--paper);
      border: 1px solid rgba(184, 151, 90, .18);
      box-shadow: 0 4px 14px rgba(30, 35, 55, .06), 0 1px 3px rgba(30, 35, 55, .04);
      transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                  box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                  border-color .25s ease;
      opacity: 0;
      transform: translateY(28px) scale(.96);
      animation: cpCardIn .7s cubic-bezier(.22, 1, .36, 1) forwards;
      will-change: transform, opacity;
    }
    @keyframes cpCardIn {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .cp-card:nth-child(1) { animation-delay: .12s; }
    .cp-card:nth-child(2) { animation-delay: .18s; }
    .cp-card:nth-child(3) { animation-delay: .24s; }
    .cp-card:nth-child(4) { animation-delay: .30s; }
    .cp-card:nth-child(5) { animation-delay: .36s; }
    .cp-card:nth-child(6) { animation-delay: .42s; }
    .cp-card:nth-child(7) { animation-delay: .48s; }
    .cp-card:nth-child(8) { animation-delay: .54s; }
    .cp-card:nth-child(9) { animation-delay: .60s; }
    .cp-card:nth-child(10) { animation-delay: .66s; }

    .cp-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(30, 35, 55, .18), 0 4px 12px rgba(184, 151, 90, .18);
      border-color: var(--gold);
    }
    .cp-card:active {
      transform: translateY(-2px) scale(.99);
      transition-duration: .12s;
    }
    /* 선택된 카드 — 다이브인 전환 */
    .cp-card.picked {
      z-index: 100;
      transition: transform .5s cubic-bezier(.65, 0, .35, 1), box-shadow .4s ease;
      animation: none;
    }

    .cp-card-img {
      position: absolute;
      inset: 0;
      background-color: var(--navy-deep);
      background-size: cover;
      background-position: center;
      transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
    }
    .cp-card:hover .cp-card-img { transform: scale(1.06); filter: brightness(1.05); }

    /* 플레이스홀더 (커버 이미지 없을 때) */
    .cp-card-img.cp-placeholder {
      background: linear-gradient(135deg, var(--navy-deep) 0%, #2c3954 100%);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-size: 44px;
      color: rgba(255, 255, 255, .18);
    }

    .cp-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(10, 15, 26, .88) 0%,
        rgba(10, 15, 26, .55) 30%,
        rgba(10, 15, 26, .15) 55%,
        transparent 80%);
      pointer-events: none;
    }
    .cp-card-body {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 22px 24px 22px;
      color: #fff;
      z-index: 2;
    }
    .cp-card-count {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(184, 151, 90, .88);
      color: var(--navy-deep);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      border-radius: 100px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(184, 151, 90, .3);
    }
    .cp-card-count.zero {
      background: rgba(255, 255, 255, .15);
      color: rgba(255, 255, 255, .7);
      box-shadow: none;
    }
    .cp-card-title {
      font-family: var(--serif);
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.25;
      margin-bottom: 4px;
    }
    .cp-card-desc {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .75);
      line-height: 1.5;
      letter-spacing: -.005em;
    }

    /* "전체" 카드 특수 스타일 */
    .cp-card-all {
      aspect-ratio: 3 / 1;
    }
    .cp-card-all .cp-card-img {
      filter: brightness(.7) saturate(1.1);
    }
    .cp-card-all .cp-card-body {
      left: 0; right: 0;
      padding: 32px 40px;
    }
    .cp-card-all .cp-card-title { font-size: clamp(24px, 3vw, 32px); }
    .cp-card-all::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(184, 151, 90, .2) 0%, transparent 60%);
      pointer-events: none;
      z-index: 1;
    }
    .cp-card-all .cp-card-arrow {
      position: absolute;
      right: 32px; top: 50%;
      transform: translateY(-50%);
      font-size: 28px;
      color: var(--gold-light);
      opacity: .7;
      transition: all .3s ease;
      z-index: 2;
    }
    .cp-card-all:hover .cp-card-arrow {
      opacity: 1;
      transform: translateY(-50%) translateX(6px);
    }

    /* ══════════════════════════════════════════════════
       DIVE-IN TRANSITION OVERLAY
    ══════════════════════════════════════════════════ */
    .dive-overlay {
      position: fixed;
      inset: 0;
      background: var(--navy-deep);
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transform-origin: center center;
      will-change: opacity, clip-path;
    }
    .dive-overlay.active {
      animation: diveOverlayIn .55s cubic-bezier(.4, 0, .2, 1) forwards;
    }
    @keyframes diveOverlayIn {
      0%   { opacity: 0; clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); }
      60%  { opacity: 1; clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
      100% { opacity: 0; clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
    }
    /* 선택 카드 이미지가 화면 중앙으로 날아가는 클론 */
    .flying-cover {
      position: fixed;
      z-index: 201;
      background-size: cover;
      background-position: center;
      border-radius: 18px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
      pointer-events: none;
      will-change: transform, opacity;
      transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .35s;
    }

    /* ══════════════════════════════════════════════════
       GALLERY VIEW (카테고리 선택 후 노출)
    ══════════════════════════════════════════════════ */
    .gallery-view {
      display: none;
      opacity: 0;
      transform: translateY(12px) scale(.99);
      transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    }
    .gallery-view.show {
      display: block;
    }
    .gallery-view.entered {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .gv-header {
      max-width: 1280px;
      margin: 0 auto;
      padding: 32px 24px 8px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .gv-back {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      background: var(--paper);
      border: 1px solid rgba(184, 151, 90, .3);
      border-radius: 100px;
      color: var(--navy-deep);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .25s ease;
      white-space: nowrap;
    }
    .gv-back:hover {
      background: var(--navy-deep);
      color: var(--cream);
      border-color: var(--navy-deep);
      transform: translateX(-3px);
    }
    .gv-title-wrap { flex: 1; min-width: 200px; }
    .gv-title {
      font-family: var(--serif);
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 800;
      color: var(--navy-deep);
      letter-spacing: -.02em;
      line-height: 1.25;
    }
    .gv-sub {
      color: var(--text-soft);
      font-size: 13px;
      margin-top: 3px;
      font-style: italic;
      letter-spacing: .04em;
    }
    .gv-sub::before { content: '—— '; color: var(--gold); }

    /* 갤러리 진입 시 카드들 springy entrance */
    .gallery-view.entered .g-card {
      animation: gvPhotoIn .7s cubic-bezier(.22, 1, .36, 1) backwards;
    }
    .gallery-view.entered .g-card:nth-child(1) { animation-delay: 0s; }
    .gallery-view.entered .g-card:nth-child(2) { animation-delay: .05s; }
    .gallery-view.entered .g-card:nth-child(3) { animation-delay: .10s; }
    .gallery-view.entered .g-card:nth-child(4) { animation-delay: .15s; }
    .gallery-view.entered .g-card:nth-child(5) { animation-delay: .20s; }
    .gallery-view.entered .g-card:nth-child(6) { animation-delay: .25s; }
    .gallery-view.entered .g-card:nth-child(7) { animation-delay: .30s; }
    .gallery-view.entered .g-card:nth-child(8) { animation-delay: .35s; }
    @keyframes gvPhotoIn {
      from { opacity: 0; transform: translateY(24px) scale(.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ══════════════════════════════════════════════════
       RESPONSIVE — Category Picker
    ══════════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; justify-content: start; }
      .cp-grid .cp-card.cp-card-all { grid-column: span 2; aspect-ratio: 2.4 / 1; }
      .category-picker { padding: 32px 18px 72px; }
    }
    @media (max-width: 480px) {
      .category-picker { padding: 24px 14px 56px; }
      .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; justify-content: start; }
      .cp-card-body { padding: 14px 14px 14px; }
      .cp-card-title { font-size: 15.5px; line-height: 1.3; }
      .cp-card-desc { font-size: 11.5px; line-height: 1.45; }
      .cp-card-count { font-size: 10px; padding: 3px 8px; margin-bottom: 7px; }
      .cp-card-all { aspect-ratio: 2.6 / 1; }
      .cp-card-all .cp-card-body { padding: 18px 18px; }
      .cp-card-all .cp-card-arrow { right: 16px; font-size: 22px; }
      .cp-hero { margin-bottom: 36px; }
      .gv-header { padding: 20px 14px 4px; gap: 12px; }
      .gv-back { padding: 8px 14px; font-size: 12.5px; }
    }
    @media (max-width: 360px) {
      .cp-grid { grid-template-columns: 1fr; justify-content: start; }
      .cp-grid .cp-card.cp-card-all { grid-column: span 1; aspect-ratio: 2 / 1; }
      .cp-card { aspect-ratio: 1.4 / 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cp-card, .cp-hero, .gallery-view.entered .photo-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .dive-overlay.active { animation-duration: .2s; }
      .flying-cover { transition: none; }
    }
  


/* ── PIN 입력 모달 ── */
#ga-pin-overlay {
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.7); align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
#ga-pin-overlay.show { display:flex; }
.ga-pin-box {
  background:#fff; border-radius:16px; padding:32px 28px 28px;
  min-width:280px; max-width:340px; width:88%;
  box-shadow:0 16px 48px rgba(0,0,0,.3); text-align:center;
}
.ga-pin-box h3 { font-size:16px; font-weight:800; color:#1a2a4a; margin-bottom:6px; }
.ga-pin-box p  { font-size:12px; color:#718096; margin-bottom:18px; }
.ga-pin-input {
  width:100%; padding:12px 16px; border:2px solid #e0e3e8; border-radius:10px;
  font-size:18px; text-align:center; letter-spacing:8px; font-weight:700;
  outline:none; transition:border-color .2s;
}
.ga-pin-input:focus { border-color:#c9a84c; }
.ga-pin-err { color:#e53e3e; font-size:12px; margin-top:8px; display:none; }
.ga-pin-btns { display:flex; gap:8px; margin-top:16px; justify-content:center; }
.ga-pin-btns button {
  padding:10px 20px; border-radius:10px; font-size:13px; font-weight:700;
  cursor:pointer; transition:all .2s; border:none;
}
.ga-pin-cancel { background:#f5f6f8; color:#4a5568; }
.ga-pin-cancel:hover { background:#e0e3e8; }
.ga-pin-ok { background:#1a2a4a; color:#fff; }
.ga-pin-ok:hover { background:#243a5e; }

/* ── 관리자 모드 하단 바 ── */
#ga-admin-bar {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:9100;
  background:linear-gradient(135deg,#1a2a4a,#0f1e38); color:#fff;
  padding:10px 20px; font-size:13px;
  box-shadow:0 -4px 16px rgba(0,0,0,.3);
  align-items:center; justify-content:space-between;
}
body.ga-admin #ga-admin-bar { display:flex; }
body.ga-admin { padding-bottom:52px; }
#ga-admin-bar .ga-bar-left { display:flex; align-items:center; gap:8px; }
#ga-admin-bar .ga-bar-badge {
  background:#c9a84c; color:#1a2a4a; font-size:10px; font-weight:800;
  padding:3px 10px; border-radius:8px;
}
#ga-admin-bar .ga-bar-exit {
  background:rgba(255,255,255,.15); color:rgba(255,255,255,.85);
  border:none; padding:6px 14px; border-radius:8px; font-size:12px;
  font-weight:600; cursor:pointer; transition:all .2s;
}
#ga-admin-bar .ga-bar-exit:hover { background:rgba(229,62,62,.8); color:#fff; }

/* ── 관리자 버튼 오버레이 ── */
.ga-btns {
  position:absolute; top:8px; right:8px; z-index:11;
  display:none; flex-direction:column; gap:4px; align-items:flex-end;
}
body.ga-admin .ga-btns { display:flex; }
.ga-btn {
  border:none; border-radius:6px; font-size:11px; font-weight:700;
  padding:5px 10px; cursor:pointer; color:#fff; white-space:nowrap;
  transition:all .2s; backdrop-filter:blur(4px);
}
.ga-btn:hover { opacity:.85; transform:scale(1.03); }
.ga-btn-hide { background:rgba(30,30,30,.82); }
.ga-btn-move { background:rgba(40,80,160,.85); }
.ga-btn-del  { background:rgba(180,0,0,.88); }

/* 숨긴 게시물 표시 */
body.ga-admin .g-card.ga-hidden { opacity:.4; }
body.ga-admin .g-card.ga-hidden .ga-btn-hide { background:rgba(113,128,150,.9); }

/* 관리자 트리거 (우상단 고정 floating 버튼 — 2026-05-03 복구) */
.hero-badge { user-select:none; }
.ga-trigger {
  position:fixed; top:80px; right:16px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(26,42,74,.85); border:1px solid rgba(201,168,76,.45);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:.55; transition:opacity .25s, transform .25s, background .25s;
  z-index:9000;
  -webkit-tap-highlight-color:transparent;
}
.ga-trigger:hover { opacity:1; background:#1a2a4a; transform:scale(1.06); }
.ga-trigger:active { transform:scale(.96); }
body.ga-admin .ga-trigger { display:none; } /* 관리자 모드 진입 시 숨김 (하단바로 대체) */
@media (max-width:640px) {
  .ga-trigger { top:auto; bottom:18px; right:14px; width:42px; height:42px; font-size:17px; }
}