@charset "utf-8";

/**
 * PC 넓은 화면(741px+ · is-mobile-view 아님)
 * - 스크롤바: 브라우저 우측 끝 (html 문서 스크롤)
 * - 좌측 패널: position:fixed 고정
 * - 우측: 문서 스크롤에 따라 이동 (프레임 내부 스크롤 없음)
 */
@media (min-width: 741px) {
    html.syou-pc-root {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    html.syou-pc-root body.syou-layout.is-pc-shell:not(.is-mobile-view) {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 100vh !important;
        background: var(--syou-shell-bg, #faf6f1) !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .site-shell {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow: visible !important;
        background: var(--syou-shell-bg, #faf6f1) !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .site-shell__cluster {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        width: calc(var(--syou-sidebar-width, 320px) + var(--syou-frame-width, 490px)) !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .pc-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: max(0px, calc(50vw - (var(--syou-sidebar-width, 320px) + var(--syou-frame-width, 490px)) / 2)) !important;
        flex: none !important;
        width: var(--syou-sidebar-width, 320px) !important;
        min-width: var(--syou-sidebar-width, 320px) !important;
        max-width: var(--syou-sidebar-width, 320px) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        z-index: 10 !important;
        border-right: 1px solid var(--syou-panel-seam-color, #c49a6b) !important;
        box-shadow: -8px 0 28px rgba(var(--syou-panel-shadow-rgb, 196, 154, 107), 0.1) !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame {
        display: block !important;
        flex: 0 0 var(--syou-frame-width, 490px) !important;
        width: var(--syou-frame-width, 490px) !important;
        min-width: var(--syou-frame-width, 490px) !important;
        max-width: var(--syou-frame-width, 490px) !important;
        height: auto !important;
        max-height: none !important;
        margin-left: var(--syou-sidebar-width, 320px) !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        z-index: 6 !important;
        box-shadow: 12px 0 42px rgba(var(--syou-panel-shadow-rgb, 196, 154, 107), 0.2) !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame::-webkit-scrollbar,
    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__inner .syou-frame-scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__scale-wrap {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__inner {
        display: block !important;
        width: var(--syou-frame-width, 490px) !important;
        min-width: var(--syou-frame-width, 490px) !important;
        max-width: var(--syou-frame-width, 490px) !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        --syou-frame-design-width: var(--syou-frame-width, 490px);
        box-shadow: 12px 0 42px rgba(var(--syou-panel-shadow-rgb, 196, 154, 107), 0.14) !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__inner #wrapper {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__inner .syou-frame-scroll {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }

    body.syou-layout.is-pc-shell:not(.is-mobile-view) .mobile-frame__inner .syou-frame-top {
        position: sticky !important;
        top: 0 !important;
        z-index: 120 !important;
    }

    /*
     * 서브·메인: 상단(헤더) 고정 + .syou-frame-scroll 본문만 스크롤
     * (탭 활성 연동 — syou-doctor.js / syou-clinic-guide.js)
     */
    html.syou-pc-root body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) {
        overflow: hidden !important;
        height: 100vh !important;
    }

    html.syou-pc-root body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .site-shell {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-x: visible !important;
        overflow-y: hidden !important;
    }

    html.syou-pc-root body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .site-shell__cluster {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-x: visible !important;
        overflow-y: hidden !important;
        align-items: center !important;
    }

    body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .mobile-frame {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-x: visible !important;
        overflow-y: hidden !important;
        z-index: 6 !important;
        box-shadow: 12px 0 42px rgba(var(--syou-panel-shadow-rgb, 196, 154, 107), 0.2) !important;
    }

    body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .mobile-frame__scale-wrap {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .mobile-frame__inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        box-shadow: 12px 0 42px rgba(var(--syou-panel-shadow-rgb, 196, 154, 107), 0.14) !important;
    }

    body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .mobile-frame__inner #wrapper {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .mobile-frame__inner .syou-frame-top {
        position: relative !important;
        top: auto !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        z-index: 120 !important;
        background: #fff;
    }

    body.syou-layout.is-pc-shell:is(.syou-sub-page, .syou-landing-page):not(.is-mobile-view) .mobile-frame__inner .syou-frame-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}