@charset "utf-8";

/* 모바일: 우측 프레임만 표시 · 햄버거 → PC 좌측 사이드바 드로어 */

/* 구 mnav 드로어 미사용 */
body.syou-layout.is-pc-shell .syou-mnav {
    display: none !important;
}

/* 드로어 루트는 레이아웃 높이를 차지하지 않음 (레거시) */
body.syou-layout.is-mobile-full .syou-mnav,
body.syou-layout.is-pc-shell .syou-mnav {
    position: fixed;
    inset: 0;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 1000;
    pointer-events: none;
}

body.syou-layout.is-mobile-full .syou-mnav__panel,
body.syou-layout.is-mobile-full .syou-mnav__dim,
body.syou-layout.is-pc-shell .syou-mnav__panel,
body.syou-layout.is-pc-shell .syou-mnav__dim {
    pointer-events: auto;
}

/* 모바일 상단 바: 로고 행 + 햄버거 */
body.syou-layout.is-mobile-full #header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
}

body.syou-layout.is-mobile-full #header.syou-site-header .syou-site-header__brand {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
}

body.syou-layout.is-mobile-full .syou-mobile-bar {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 10px 12px;
    box-sizing: border-box;
}

body.syou-layout #header .logo .image {
    display: none !important;
}

body.syou-layout #footer .syou-footer__logo-img {
    display: block;
    width: auto;
    max-width: 200px;
    height: auto;
    max-height: 52px;
    object-fit: contain;
}

body.syou-layout.is-mobile-full #header .gnb {
    display: none !important;
}

/* 햄버거 아이콘 */
.syou-mobile-bar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

body.syou-layout #header .syou-mobile-bar__menu {
    border-color: #d8d4d0;
    background: #fff;
}

body.syou-layout #header .syou-mobile-bar__icon {
    display: block;
    width: 18px;
    height: 2px;
    background: #111 !important;
    box-shadow: 0 -6px 0 #111, 0 6px 0 #111 !important;
}

/* PC 넓은 화면: 좌측 패널 사용 → 우측 프레임 햄버거 숨김 */
body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__inner .syou-mobile-bar {
    display: none !important;
}

/* 모바일·좁은 PC: 햄버거 표시 */
body.syou-layout.is-pc-shell.is-mobile-view .mobile-frame__inner .syou-mobile-bar {
    display: block !important;
}

/* 구 GNB(둘러보기·오시는길 등 흰색 링크) 미표시 — 카테고리 탭·좌측 메뉴 사용 */
body.syou-layout #header .gnb {
    display: none !important;
}

/* 모바일 기기: 햄버거 항상 표시 */
body.syou-layout.is-pc-shell.is-mobile-view .syou-mobile-bar {
    display: block;
    order: 2;
    margin-left: auto;
    padding: 10px 12px;
}

body.syou-layout.is-pc-shell.is-mobile-view #header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

body.syou-layout.is-pc-shell.is-mobile-view #header.syou-site-header .syou-site-header__brand {
    order: 1;
    flex: 0 0 auto;
}

body.syou-layout.is-pc-shell.is-mobile-view #header .gnb {
    display: none !important;
}

/* PC 창을 좁혔을 때(740px 이하) */
@media (max-width: 740px) {
    body.syou-layout.is-pc-shell .syou-mobile-bar {
        display: block;
        order: 2;
        margin-left: auto;
        padding: 10px 12px;
    }

    body.syou-layout.is-pc-shell #header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
    }

    body.syou-layout.is-pc-shell #header.syou-site-header .syou-site-header__brand {
        order: 1;
        flex: 0 0 auto;
    }
}

body.syou-layout.is-pc-shell.is-mobile-view.syou-mnav-open,
body.syou-layout.is-pc-shell.syou-pc-sidebar-open {
    overflow: hidden;
}

/* 서브: PC 넓은 화면은 사이드바 사용 → 서브 햄버거 숨김 */
body.syou-layout.is-pc-shell .syou-sub__menu-btn,
body.syou-layout.is-pc-shell .syou-event-top__menu-btn {
    display: none;
}

body.syou-layout.is-pc-shell.is-mobile-view .syou-sub__menu-btn,
body.syou-layout.is-pc-shell.is-mobile-view .syou-event-top__menu-btn {
    display: inline-flex;
}

@media (max-width: 1100px) {
    body.syou-layout.is-pc-shell .syou-sub__menu-btn,
    body.syou-layout.is-pc-shell .syou-event-top__menu-btn {
        display: inline-flex;
    }
}

/* 서브 페이지: 헤더 대신 상단에 햄버거 */
body.syou-layout.is-mobile-full.syou-sub-page .syou-sub__head,
body.syou-layout.is-pc-shell.syou-sub-page .syou-sub__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.syou-layout.is-mobile-full.syou-sub-page .syou-sub__menu-btn {
    flex-shrink: 0;
}

body.syou-layout.is-mobile-full.syou-sub-page .syou-sub__home {
    flex: 1;
    margin-bottom: 0;
}

body.syou-layout.is-mobile-full.syou-sub-page .syou-sub__path,
body.syou-layout.is-mobile-full.syou-sub-page .syou-sub__title {
    width: 100%;
}

body.syou-layout.is-mobile-full.syou-mnav-open,
body.syou-layout.is-mobile-view.syou-pc-sidebar-open {
    overflow: hidden;
}

/* ── 모바일 프레임 기본 (구 mobile-base.css) ── */
body.syou-layout {
    margin: 0;
    padding: 0;
}

body.syou-layout #wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 프레임 크기·비율: pc-frame-fix.css + syou-frame-scale.js (기준 490px PC 프레임) */
body.syou-layout.is-mobile-view {
    background: #fff;
}

body.syou-layout #hd,
body.syou-layout #wrapper,
body.syou-layout #ft,
body.syou-layout #hd_pop,
body.syou-layout #hd_wrapper,
body.syou-layout #container_wr,
body.syou-layout #ft_wr {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ── 상단 헤더: 로고 좌측 · 햄버거 우측 절대배치 ── */
body.syou-layout .mobile-frame__inner #header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    min-height: 56px;
}

/* 헤더 로고 → syou-site-header.css (#header.syou-site-header__brand) */

body.syou-layout #header .syou-mobile-bar {
    order: 2;
    flex: 0 0 auto;
    margin-left: 0;
    position: absolute;
    top: 50%;
    right: var(--syou-frame-pad-x, 20px);
    transform: translateY(-50%);
    z-index: 130;
    pointer-events: auto;
}

body.syou-layout #header .syou-mobile-bar__menu {
    position: relative;
    z-index: 131;
    pointer-events: auto;
    cursor: pointer;
}