@charset "utf-8";
/* ==========================================================================
   첫 화면 겹침 머리글 (2026-10-06 대표님 요청)
   --------------------------------------------------------------------------
   레이아웃이 @section('header', 'overlay') 인 화면에서만 읽는다 (지금은 첫 화면 하나).

   #hd 는 원본 default.css 그대로 position:fixed · top:0 이라 자리를 차지하지 않는다
   → 히어로(#mainVisual)가 화면 맨 위에서 시작하고, 머리글은 그 위에 뜬다.
   (전에는 하위 화면용 common_sub.js 가 #hd 를 position:relative 로 바꿔
    머리글 높이만큼 히어로를 밀어 내리고, 그 자리가 흰 띠로 보였다)

   상태는 둘 — common.js 가 스크롤 0 이면 hd_scrolled 를 떼고, 조금이라도 내리면 붙인다.
     맨 위        : 투명 바탕 · 흰 메뉴 글자 · 흰 JOIN 테두리 (히어로 위)
     내린 뒤      : 흰 바탕 · 그림자 · 짙은 메뉴 글자 · 회색 JOIN 테두리 (내려가 있는 동안 계속)
   내린 뒤 바탕은 원래 흰 머리글과 같은 흰색(#fff)이다 — 처음엔 원본 메인 값(90% 흰색)이었는데
   히어로 위에서 회색빛으로 비치고 그림 · 글자가 어른거려, 대표님 요청으로 온 흰색으로 바꿨다 (10-06).
   바뀔 때는 0.4초에 걸쳐 스며들듯 바뀐다 — JOIN 단추가 원래 쓰던 0.4초(default.css .sidesbtn a)와 같은 빠르기.
   메뉴 글자 크기 · 간격은 건드리지 않는다.
   ========================================================================== */

#hd.hd_overlay {
    /* 투명도 0 인 흰색에서 출발 — 흰색으로 바뀌는 동안 회색을 거치지 않는다 */
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

#hd.hd_overlay.hd_scrolled {
    background-color: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}

/* PC — 메뉴 글자 · JOIN 테두리 (LOGIN 금빛 단추는 그대로 · JOIN 은 원래 0.4초로 바뀐다) */
@media screen and (min-width: 901px) {
    .hd_overlay .gnb_1da_sub {
        color: #fff;
        transition: color 0.4s ease;
    }

    .hd_overlay.hd_scrolled .gnb_1da_sub {
        color: #333;
    }

    .hd_overlay.hd_scrolled .sidesbtn a:first-child {
        color: #666;
        border-color: #666;
    }
}

/* 휴대폰 — 메뉴 열기 · 전화 단추 (펼침 메뉴 안의 글자는 원래 모양 그대로) */
@media screen and (max-width: 900px) {
    #hd.hd_overlay #gnb_open,
    #hd.hd_overlay #user_btn {
        transition: color 0.4s ease;
    }

    #hd.hd_overlay.hd_scrolled #gnb_open,
    #hd.hd_overlay.hd_scrolled #user_btn {
        color: #333;
    }
}