@charset "utf-8";

/* 대운프런티어 전역 레이아웃 규칙 — gw.css 다음에 로드한다 */

:root {
    /* 반응형 최소 폭 — 이 폭 아래로는 레이아웃을 더 줄이지 않는다 */
    --dw-min-width: 320px;
    /* 루트 가로 스크롤 위치(음수) — js/dw-global.js 가 갱신, fixed 헤더 내용을 문서와 함께 움직이는 데 쓴다 */
    --dw-root-scroll-x: 0px;
}

/* 320px 아래에서는 더 이상 레이아웃을 줄이지 않고 html이 가로 스크롤을 맡는다(gw.css 의 html overflow-x:hidden 재정의).
   320px 이상에서는 gw.css 그대로 hidden 을 유지한다 — 100vw 요소(세로 스크롤바 폭 포함)가 가로 스크롤을 만들지 않도록 */
body { overflow-x: hidden; }

/* 서브 페이지 헤더는 absolute 라 body 가 잘라 주지 않는다. 100vw 대신 100% 로 세로 스크롤바 폭만큼 넘치지 않게 한다 */
body #hd { width: 100%; } /* head.css 가 뒤에 로드되므로 선택자를 한 단계 올린다 */

@media (max-width: 319px) {
    html { overflow-x: auto; }
    html, body { min-width: var(--dw-min-width); }

    /* vw 기준 폭을 쓰는 푸터·메인 섹션도 문서의 320px 바닥값을 유지한다 */
    #ft, #ft_wr, .scroll-content > section { min-width: var(--dw-min-width); }

    /* 뷰포트에 고정되는 전체 폭 요소는 body 의 최소 폭을 상속하지 않는다(1280px 이하에서 #hd_wrapper 는 fixed) */
    #loading-screen, #hd, #hd_wrapper, #mob-gnb { min-width: var(--dw-min-width); }
}

/* fixed 헤더 내용을 루트 가로 스크롤 위치에 맞춘다(320px 미만에서 가로 스크롤할 때만 값이 생긴다) */
#hd #hd_wrapper { left: var(--dw-root-scroll-x); }