/* ===========================================================================
   갤러리 상단 카메라 메뉴
   =========================================================================== */

.galleryTitle {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 10;
    /* 예전에는 화면 구간마다 8vh / 10vh / 13vh 로 헤더를 피했는데,
       세로가 짧은 화면(아이폰 가로 844x390)에서는 13vh = 50.7px 라
       60px 헤더가 메뉴를 13px 덮었다. 헤더 여백은 이제 body 가 담당하므로
       여기서는 순수한 여백만 준다. */
    margin-top: clamp(0.75rem, 3vh, 2rem);
    padding: 0 var(--page-pad);
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.5rem, 3vw, 2rem);
}

.menu-item {
    position: relative;
}

/* 메인 메뉴 텍스트 - 최소 44px 터치 높이 확보 */
.menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;                /* 'Sony' 처럼 짧은 항목도 누르기 쉽게 */
    padding: 0 0.5rem;
    text-decoration: none;
    color: #333;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------------------------------------------------------------------------
   서브메뉴
--------------------------------------------------------------------------- */
.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    list-style: none;
    padding: 0.25rem 0.7rem;
    margin: 0;

    /* 배경 없음. 예전에는 흰 패널(rgba(255,255,255,0.96)) 이라 서브메뉴가
       열릴 때마다 첫 사진 위쪽을 가렸다.
       대신 글자에 흰 테두리를 둘러 어떤 사진 위에서도 읽히게 한다 - 밝은
       사진에서는 거의 보이지 않고, 어두운 사진에서는 이게 글자를 살린다. */
    background: transparent;
    text-shadow:
         0 0  2px rgba(255, 255, 255, 0.95),
         0 0  6px rgba(255, 255, 255, 0.85),
         0 1px 2px rgba(255, 255, 255, 0.95);

    display: flex;
    flex-direction: row;
    gap: 0.25rem 1.2rem;
    text-align: center;
    white-space: nowrap;

    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;

    transition: max-height 0.3s ease, opacity 0.3s ease;
    z-index: 999;                   /* 헤더(1000)보다 아래 */
}

.submenu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;               /* 터치 영역 */
    min-width: 44px;                /* 'M11' 처럼 짧은 이름도 누르기 쉽게 */
    padding: 0 0.35rem;
    text-decoration: none;
    color: #333;
    font-size: clamp(0.9rem, 1vw, 1.2rem);
    transition: transform 0.2s ease, color 0.2s ease;
}

/*
 * 열림 조건.
 * 예전에는 "화면폭 1024px 이상 / 768~1023 / 480~767 이면 :hover 로 연다"
 * 였고, 탭으로 여는 .submenu.open 규칙은 @media (max-width:479px) 안에만
 * 있었다. 그런데 Title.js 는 480px 이하를 모바일로 판정했기 때문에
 * 정확히 480px 폭에서는 JS 가 .open 을 붙여도 해당 규칙이 없어서
 * hover 흉내에 의존했다(측정: 480px 에서 open=true 인데 max-height 는
 * hover 규칙값 200px).
 * 폭이 아니라 "마우스 포인터가 있는 기기인가"로 나누면 이 문제가 사라지고,
 * 마우스가 없는 아이패드(768~1024px)에서도 탭으로 열린다.
 */
.submenu.open {
    opacity: 1;
    max-height: 60vh;
    pointer-events: auto;
    overflow: visible;
}

@media (hover: hover) {
    .menu-item:hover .submenu {
        opacity: 1;
        max-height: 200px;
        pointer-events: auto;
    }

    .submenu li a:hover {
        transform: scale(1.12);
        color: #ff9900;
    }
}

/* 좁은 화면에서는 서브메뉴를 세로로 (가로로 두면 화면을 벗어남) */
@media (max-width: 479px) {
    .submenu {
        flex-direction: column;
        gap: 0;
        padding: 0.25rem 0.5rem;
    }
}