/* zumk.work 공통 스타일 */

/* 기존과 동일한 확대 글자 크기 */
html { font-size: 140.625%; }
@media (max-width: 640px) { html { font-size: 125%; } }
body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 3px; border-radius: 6px; }

/* ---------- 상단 내비게이션 ---------- */
#navbar {
    border-bottom: 1px solid transparent;
    transition: background-color .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s;
}
#navbar.nav-scrolled {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom-color: rgba(255, 255, 255, .5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.dark #navbar.nav-scrolled {
    background: rgba(10, 10, 10, .72);
    border-bottom-color: #262626;
}

/* ---------- 히어로 무한 스크롤 ---------- */
.marquee-wrap {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 90s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-group { display: flex; gap: 1rem; padding-right: 1rem; flex-shrink: 0; }
/* 첫 화면 안에 사진이 온전히 보이도록 화면 높이에 맞춰 크기 조절 */
.marquee-img { height: clamp(200px, 31vh, 360px); width: auto; }
/* 노트북처럼 세로가 짧은 화면에서는 헤드라인을 조금 줄여 사진이 첫 화면에 들어오게 */
@media (min-width: 768px) and (max-height: 820px) {
    #top .hero-title { font-size: 2.75rem; }
    .marquee-img { height: clamp(200px, 29vh, 360px); }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- 포트폴리오 갤러리 ---------- */
.gallery-item img { opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.gallery-item img.is-loaded { opacity: 1; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 45%);
    opacity: 0; transition: opacity .3s;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }
.gallery-zoom {
    position: absolute; right: .6rem; bottom: .6rem; z-index: 1;
    width: 1.9rem; height: 1.9rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: #fff; background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transform: translateY(.25rem); transition: opacity .3s, transform .3s;
}
.gallery-item:hover .gallery-zoom, .gallery-item:focus-visible .gallery-zoom { opacity: 1; transform: none; }

/* ---------- 스크롤 등장 효과 (JS가 켜졌을 때만) ---------- */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal-on [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 라이트박스 ---------- */
.lb {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.dark .lb { background: rgba(0, 0, 0, .94); }
.lb.open { opacity: 1; pointer-events: auto; }
.lb-img {
    max-width: calc(100% - 7rem); max-height: 86vh; object-fit: contain;
    border-radius: .375rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
    user-select: none; -webkit-user-drag: none;
}
.lb-btn {
    position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    color: #262626; background: rgba(255, 255, 255, .8); border: 1px solid rgba(0, 0, 0, .08);
    cursor: pointer; transition: background .2s, color .2s;
}
.lb-btn:hover { color: #7c3aed; }
.dark .lb-btn { color: #fff; background: rgba(38, 38, 38, .8); border-color: rgba(255, 255, 255, .1); }
.dark .lb-btn:hover { color: #a78bfa; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); font-size: .7rem; color: #737373; }
@media (max-width: 640px) {
    .lb-img { max-width: calc(100% - 1.5rem); max-height: 78vh; }
    .lb-prev, .lb-next { top: auto; bottom: .75rem; transform: none; }
}

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee-track { animation: none; }
    .marquee-wrap { overflow-x: auto; }
    .gallery-item img { opacity: 1; }
    .reveal-on [data-reveal] { opacity: 1; transform: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}