/* ===========================================================================
   갤러리 슬라이더 - 모바일 우선
   =========================================================================== */

/*
 * 예전 첫 줄은 이랬다:
 *     html, body { overflow-x: hidden !important; }   ← "긴급: 가로 스크롤 막기"
 * 가로 스크롤이 생기는 진짜 원인은 아래 .image-text 의 white-space:nowrap 이었고,
 * 저 규칙은 그걸 가려서 안 보이게 했을 뿐이다. 실제로는 320px 화면에서 촬영정보가
 * 화면 밖 17px 지점까지 밀려나 잘려 있었다. 원인을 고쳤으므로 이 핵은 뺐다.
 * (overflow-x:hidden 은 position:sticky 를 무력화하고 iOS 스크롤도 어색하게 만든다.)
 */

.gallery-container {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    width: 100%;
    margin-top: clamp(1rem, 3vh, 2rem);
    padding: 0 var(--page-pad);
}

.gallery-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto clamp(0.5rem, 2vh, 1rem);
    overflow: hidden;
}

.gallery-item {
    position: absolute;             /* 비활성 슬라이드는 겹쳐 둠 */
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateX(0);
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}

.gallery-item.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;             /* 활성 슬라이드가 높이를 결정 */
}

.gallery-item.next { transform: translateX(100%); }
.gallery-item.prev { transform: translateX(-100%); }

.gallery-item.next.active,
.gallery-item.prev.active {
    transform: translateX(0);
}

/*
 * 사진.
 * 예전에는 화면 구간별로 min-height 를 강제했다(모바일 479px, 태블릿/PC 750px).
 * 그 결과 3:2 가로 사진이 320px 화면에서 304x479 박스(비율 0.63)에 담겨
 * 위아래로 큰 빈 공간이 생겼다 - 측정된 16개 뷰포트 전부에서.
 * 사진은 자기 비율대로 두는 게 맞고, 대신 HTML 의 width/height 속성으로
 * 브라우저가 자리를 미리 잡게 해서 이미지가 도착할 때 화면이 밀리지 않게 한다.
 */
.gallery-item img {
    /* width/height 속성 + height:auto 조합이면 브라우저가 그 비율로 자리를
       미리 잡아 준다(별도 aspect-ratio 선언 불필요). */
    width: 100%;
    height: auto;
    display: block;
    background: #f2f2f2;            /* 로딩 중 자리 표시 */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/*
 * 촬영정보.
 * white-space:nowrap 이 원인이었으므로 제거하고, 좁은 화면에서는 두 줄로
 * 자연스럽게 접히게 한다. 넓은 화면에서는 예전처럼 좌우 양끝 정렬.
 */
.image-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.15rem 1rem;
    padding: 0.4rem 0.1rem;
    font-size: clamp(0.72rem, 2.6vw, 0.9rem);
    line-height: 1.4;
    width: 100%;
}

.left-text  { text-align: left; }
.right-text { text-align: right; margin-left: auto; }

/* ---------------------------------------------------------------------------
   좌우 화살표
   예전에는 화면 폭 767px 이하에서 숨겼다. 하지만 기준은 폭이 아니라
   "마우스 포인터가 있느냐" 다 - 1024px 아이패드에도 마우스는 없고,
   좁은 데스크탑 창에는 마우스가 있다.
--------------------------------------------------------------------------- */
.slide-prev,
.slide-next {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;                    /* 권장 최소 터치/클릭 크기 */
    height: 44px;
    background: none;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    z-index: 20;
    transition: color 0.3s, transform 0.2s;
}

@media (hover: hover) {
    .slide-prev,
    .slide-next {
        display: block;
    }

    .slide-prev:hover,
    .slide-next:hover {
        color: #ffcc00;
        transform: translateY(-50%) scale(1.2);
    }
}

.slide-prev { left: 4px; }
.slide-next { right: 4px; }

/* ---------------------------------------------------------------------------
   점 네비게이션
   보이는 점은 10px 그대로. 누르는 영역만 넓힌다 - 손가락은 44px, 마우스는 24px.
   (예전에는 점 자체가 10x10 이라 모바일에서 누르기 매우 어려웠다.)
--------------------------------------------------------------------------- */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.slider-dots .dot {
    /* 누르는 영역. 보이는 점은 ::before 라서 이 크기와 무관하다. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* 이 요소는 <button> 이다(키보드 이동·스크린리더 때문에 div 에서 바꿨다).
       버튼에는 브라우저가 기본 테두리·배경·안쪽 여백을 붙인다. 예전 <div> 시절엔
       점 자체가 10px 라 티가 안 났는데, 영역을 44px 로 넓히면서 그 기본 테두리가
       점 주위에 네모로 드러났다. 화살표(.slide-prev)와 #goTopBtn 은 이미 지우고
       있었는데 여기만 빠뜨렸다. */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
}

/* 마우스로 쓰는 화면에서는 44px 이 과하다. 손가락보다 정확히 겨냥할 수 있으므로
   점 사이 여백만 남기고 줄인다. 터치 기기는 위의 44px 를 그대로 쓴다. */
@media (hover: hover) and (pointer: fine) {
    .slider-dots .dot {
        width: 24px;
        height: 24px;
    }
}

.slider-dots .dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #999;
    transition: background 0.3s, transform 0.3s;
}

.slider-dots .dot.active::before {
    background: #555;
    transform: scale(1.8);
}

/* ---------------------------------------------------------------------------
   맨 위로 버튼
--------------------------------------------------------------------------- */
#goTopBtn {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: none;
    z-index: 900;                   /* 헤더(1000)보다 아래 */
    transition: opacity 0.3s;
}

#goTopBtn.show {
    display: block;
}

/* ---------------------------------------------------------------------------
   화면이 넓어지면 사진 최대폭만 제한한다.
   예전 미디어쿼리에 있던 .gallery-item { flex: 1 1 18% } 류의 규칙들은
   부모 .gallery-slider 가 flex 컨테이너가 아니라서 애초에 아무 효과가 없었다.
   (죽은 코드라 제거)
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /*
     * 사진과 촬영정보에 '같은' 최대폭을 준다.
     *
     * 예전에는 최대폭이 사진에만 걸려 있어서, 슬라이더 전체 폭(1200px)을 쓰는
     * 촬영정보가 사진보다 밖으로 삐져나왔다. 실측하면 이랬다:
     *     1440px 화면 - 세로사진 700px 인데 글씨는 1200px (500px 초과)
     *                   가로사진 1100px 인데 글씨는 1200px (100px 초과)
     *      768px 화면 - 세로사진 700px 인데 글씨는 722px  (22px 초과)
     *
     * 사진과 글씨 둘 다 width:100% 이므로, 최대폭만 같이 걸어 주면 실제 렌더
     * 폭이 min(부모 폭, 최대폭) 으로 항상 똑같아진다. 화면이 좁아져 사진이
     * 최대폭보다 작아지는 구간에서도 자동으로 같이 줄어든다.
     *
     * 가로/세로는 최대폭이 다르므로(1100 / 700) 방향별로 나눠 적는다.
     * 방향 클래스는 서버가 사진의 실제 픽셀 크기를 보고 붙인다
     * (View/Page/Gallery/Main.php, Gallery.js 의 orientation).
     */
    .gallery-item.portrait img,
    .gallery-item.portrait .image-text {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-item.landscape img,
    .gallery-item.landscape .image-text {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------------------------------------------------------------------
   사진이 하나도 없는 카메라 (없는 이름으로 들어온 경우)
   메시지가 없으면 헤더 아래가 통째로 빈 화면이라 사이트가 고장 난 것처럼
   보인다. 본문 폰트를 그대로 쓰고 회색으로만 낮춘다.
--------------------------------------------------------------------------- */
.gallery-empty {
    margin: clamp(3rem, 18vh, 8rem) auto;
    max-width: 32rem;
    padding: 0 var(--page-pad);
    text-align: center;
    line-height: 2;
    color: #6b6b6b;
}