@charset "utf-8";
/* =====================================================================
 * Snap Gallery : 꽉 찬 격자 + fancyBox 크게 보기
 * 테마에서 --sg-* 변수로 칸 수·간격·비율·색을 바꿀 수 있습니다.
 * ===================================================================== */
.sg-grid {
    --sg-cols: 6;
    --sg-gap: 4px;
    --sg-ratio: 25 / 36;          /* 세로로 긴 칸 (폭 25 : 높이 36) */
    --sg-bg: #ebe7e0;              /* 사진이 뜨기 전 칸 색 */
    display: grid;
    grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
    gap: var(--sg-gap);
}
@media (max-width: 1199px) { .sg-grid { --sg-cols: 4; } }
@media (max-width: 991px)  { .sg-grid { --sg-cols: 3; } }
@media (max-width: 767px)  { .sg-grid { --sg-cols: 2; --sg-gap: 3px; } }

/* 화면 양끝까지 꽉 채움 (부모 여백 무시). --sg-vw : 스크롤바를 뺀 화면 폭 (JS가 넣음) */
.sg-bleed { width: var(--sg-vw, 100vw); margin-left: calc(50% - var(--sg-vw, 100vw) / 2); }

.sg-item {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: var(--sg-ratio); background: var(--sg-bg);
    cursor: zoom-in; outline-offset: 2px;
}
.sg-item img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: opacity .5s ease, transform .6s ease;
}
/* JS가 준비되면 사진이 다 받아진 뒤 부드럽게 나타남 */
.sg-grid.sg-ready .sg-item img { opacity: 0; }
.sg-grid.sg-ready .sg-item.is-loaded img { opacity: 1; }

.sg-item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .3s; }
.sg-item-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 36px 12px 10px;
    font-size: 13px; line-height: 1.4; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6));
    opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) {
    .sg-item:hover img { transform: scale(1.04); }
    .sg-item:hover::after { background: rgba(0,0,0,.08); }
    .sg-item:hover .sg-item-cap { opacity: 1; transform: none; }
}

/* 무한 스크롤 */
.sg-more { display: flex; justify-content: center; padding: 40px 0; }
.sg-more.is-done { display: none; }
.sg-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,.12); border-top-color: #222;
    animation: sg-spin .8s linear infinite; visibility: hidden;
}
.sg-more.is-loading .sg-spinner { visibility: visible; }
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* ---------- fancyBox 꾸밈 ---------- */
.fancybox-bg { background: #0c0c0b; }
.fancybox-is-open .fancybox-bg { opacity: .96; }
.fancybox-infobar { font-size: 13px; letter-spacing: .04em; }
.fancybox-button { background: rgba(20,20,19,.55); }
.fancybox-button:hover { color: #fff; }
.fancybox-caption { padding: 60px 44px 26px; font-size: 14px; line-height: 1.6; text-align: center; }
.fancybox-caption__body { max-width: 720px; margin: 0 auto; }
.sg-cap-title { display: block; font-size: 15px; font-weight: 600; }
.sg-cap-text { display: block; margin-top: 2px; color: rgba(255,255,255,.75); }
.sg-cap-link {
    display: inline-block; margin-top: 10px; padding: 5px 14px; font-size: 13px;
    color: #fff !important; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; text-decoration: none !important;
}
.sg-cap-link:hover { background: rgba(255,255,255,.12); }
.fancybox-thumbs { background: #111110; }
.fancybox-thumbs > ul > li { background-color: #222; }
.fancybox-thumbs > ul > li::before { border-color: #c8a978; }
.fancybox-thumbs-y > ul::-webkit-scrollbar-track { background: #1b1b1a; box-shadow: none; }
.fancybox-thumbs-y > ul::-webkit-scrollbar-thumb { background: #555; }
@media (max-width: 767px) {
    .fancybox-caption { padding: 40px 16px 18px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-item img, .sg-item-cap { transition: none; }
}