@layer ua, reset, vendor, legacy, token, layout, component, variant, utility;
@layer legacy{
#wrap #header{position:fixed;left:0;top:0;z-index:999;width:100%}

}
@layer legacy{
#header{z-index:1000;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
#wrap #header-area{background:var(--qz-bg-page);text-align:center;padding:50px 0}
#wrap #header-area img{width:260px}

}
@layer legacy{
.accordion>li{border-bottom:1px solid #353535;background-color:var(--bg-app)}
.accordion>li .acc-hide-area{display:none;background-color:var(--qz-bg-input-deep)}
#cBody{box-sizing:border-box;padding:120px 0 125px;min-height:100vh;margin-bottom:-125px;background:var(--bg-app)}
#footer{background:var(--qz-bg-page);padding:13px 0}
#footer .footer-menu{overflow:hidden;width:230px;margin:0 auto}
#footer .footer-menu a {color: #919191;display: inline-block;padding: 0 10px;margin: 5px 0;font-size: 11px;line-height: 1em;letter-spacing: -.025em;border-left: 1px solid #424242;}
#footer .copy{font-size:10px;color: var(--interactive-primary);text-align:center;padding-top:13px}
#footer .footer-menu{width:auto;text-align:center}
#footer .ad-inquiry .ad {width: 90px; height: 20px; margin: 13px auto 0; text-align: center; background-color: var(--qz-bg-control); border-radius: 10px; cursor: pointer;}
#footer .ad-inquiry .ad span {font-size: 10px; color: #EFC631; line-height: 20px;}

}
@layer legacy{
.fixed-func-wrap {position: fixed;right: 10px;bottom: 16px;z-index:1001}
/* 하단 고정 배너 노출 시 배너 실측 높이만큼 위로 띄움 — --qz-sticky-banner-h는 banner_external.blade.php가 세팅 */
body.has-bottom-sticky-banner .fixed-func-wrap {bottom: calc(16px + var(--qz-sticky-banner-h, 50px))}
/* 플로팅 버튼 v2 — PC(css/layout.css .fixed-func-wrap) 디자인의 모바일판. 마크업=footer blade들의 #fixedFuncWrap. z-9000=스티키배너(1000) 위·전체화면 모달(10000+) 아래 */
#fixedFuncWrap.fixed-func-wrap{right:12px;z-index:9000;display:flex;flex-direction:column;gap:8px;align-items:center}
#fixedFuncWrap .fixed-func-action-btn{width:38px;height:38px;margin:0;border-radius:50%;background:var(--qz-bg-raised);border:1px solid var(--qz-border-subtle);box-shadow:0 2px 10px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:opacity .2s ease,transform .2s ease;text-decoration:none;flex-shrink:0;line-height:1}

}
#fixedFuncWrap .fixed-func-action-btn{padding:0}
@layer legacy{
#fixedFuncWrap .fixed-func-action-btn::before{content:"";width:18px;height:18px;background-color:currentColor}
#fixedFuncWrap .fixed-func-action-btn.goto-start::before{-webkit-mask:url(../../images/common/ic_arrow_up_b.svg) no-repeat center/63%;mask:url(../../images/common/ic_arrow_up_b.svg) no-repeat center/63%}
#fixedFuncWrap .fixed-func-action-btn.goto-end::before{-webkit-mask:url(../../images/common/ic_arrow_down_b.svg) no-repeat center/63%;mask:url(../../images/common/ic_arrow_down_b.svg) no-repeat center/63%}
#fixedFuncWrap .fixed-func-action-btn.board-write-btn::before{-webkit-mask:url(../../images/common/ic_write_pencil.svg) no-repeat center/75%;mask:url(../../images/common/ic_write_pencil.svg) no-repeat center/75%}
#fixedFuncWrap.at-top .goto-start{opacity:0;pointer-events:none;transform:translateY(4px)}
#fixedFuncWrap.at-bottom .goto-end{opacity:0;pointer-events:none;transform:translateY(-4px)}
#fixedFuncWrap .fixed-func-action-btn.board-write-btn{background:var(--qz-accent);border-color:transparent;color:var(--qz-text-on-accent);box-shadow:0 2px 12px rgba(255,146,0,.35)}
.fixed-func-wrap .fixed-func-action-btn {width: 45px;height: 45px;border-radius: 999px;background: var(--bg-app);display: block;background-size: 95%;background-position: 50% 50%;background-repeat: no-repeat;margin: 8px 0 0;border: 1px solid #171717;}
.fixed-func-wrap .fixed-func-action-btn.goto-start{background-image: url("../../images/common/fixed_up.png");background-position: 50% 50%}
.fixed-func-wrap .fixed-func-action-btn.goto-end{background-image: url("../../images/common/fixed_down.png");background-position: 50% 60%}
.fixed-func-wrap .fixed-func-action-btn.board-reply-btn{background-image: url("../../images/common/fixed_reply.png")}
.fixed-func-wrap .fixed-func-action-btn.board-write-btn{background-image: url("../../images/common/fixed_write.png")}
#footer .footer-menu a:nth-child(1) {border-left: 0}
#footer .footer-menu a:nth-child(4) {border-left: 0}
#footer .footer-menu a:nth-child(7) {border-left: 0}

}
/* 모바일 통합검색 페이지 상단 input 클릭 시 select 활성화 2022-04-20 */
@layer legacy{
#popup_mask { /* 팝업 배경 css */
position: fixed;
width: 100%;
height: 1000px;
top: 0px;
left: 0px;
display: none;
background-color:var(--qz-overlay-bg);
opacity: 0.8;
}
/* alert 창 — general_push 카드는 @layer component 정의로 대체(하단 참조), live_push는 이 셀렉터 계속 사용 */
.mb_alert_box_wrap{position: fixed;bottom:14px;left:14px;z-index:120;width:100%;}
.mb_img_alert_box{width:48px;height:36px;float: left;}
.mb_alert_close_btn{position:absolute;top:5px;right:5px;z-index:9999999;}
.mb_alert_close_x{background: url(../../images/common/alert_close_x.png) no-repeat 100% 100%;background-size:cover;width:15px;height:15px;margin:auto;}

}

/* 모바일 하단 푸시 도크 카드 — 글래스 카드, 세로 스택, 스와이프/탭/자동소멸 */
@layer component{
.mb_alert_box_wrap{left:16px;right:16px;width:auto;bottom:calc(16px + env(safe-area-inset-bottom));}
body.has-bottom-sticky-banner .mb_alert_box_wrap{bottom:calc(16px + env(safe-area-inset-bottom) + var(--qz-sticky-banner-h, 50px));}

.general_push{display:flex;flex-direction:column;gap:8px;}

.qz-mpush-card{
    position:relative;
    display:flex;
    gap:11px;
    align-items:center;
    margin-right:44px; /* 우측 플로팅 버튼(.fixed-func-wrap) 자리 — 버튼이 없는 페이지는 아래 규칙으로 해제 */
    padding:12px 34px 12px 14px;
    border-radius:20px;
    background:var(--qz-push-glass-bg);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--qz-push-glass-border);
    box-shadow:var(--qz-push-shadow);
    overflow:hidden;
    cursor:grab;
    touch-action:none;
    transform:translateY(140%);
    opacity:0;
    transition:transform .52s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
body:not(:has(.fixed-func-wrap)) .qz-mpush-card{margin-right:0;}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .qz-mpush-card{background:var(--qz-bg-card);}
}
.qz-mpush-card.is-on{
    transform:translateY(0);
    opacity:1;
}
.qz-mpush-card.is-leave-fling{
    transform:translateY(140%);
    opacity:0;
    transition:transform .34s cubic-bezier(.4,0,1,1), opacity .3s ease;
}
.qz-mpush-card.is-leave-fade{
    transform:translateY(10px);
    opacity:0;
    transition:transform .32s ease, opacity .32s ease;
}
.qz-mpush-card.is-dragging{transition:none;cursor:grabbing;}

.qz-mpush-signal{
    flex:none;
    width:4px;
    align-self:stretch;
    border-radius:2px;
    background:var(--qz-push-signal);
    margin-right:1px;
    opacity:.9;
}

.qz-mpush-icon{
    flex:none;
    width:38px;
    height:38px;
    border-radius:11px;
    background:var(--qz-accent);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--qz-text-on-accent);
}
.qz-mpush-icon::before{
    content:"";
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:url(../../images/common/ic_bell_fill.svg) no-repeat center / contain;
    mask:url(../../images/common/ic_bell_fill.svg) no-repeat center / contain;
}

.qz-mpush-link{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;}
.qz-mpush-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.qz-mpush-kicker{
    font-size:11px;font-weight:700;letter-spacing:.02em;
    color:var(--qz-push-signal);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qz-mpush-time{font-size:10.5px;color:var(--qz-text-secondary);flex:none;}
.qz-mpush-title{
    font-size:13.5px;font-weight:600;line-height:1.35;color:var(--qz-text-primary);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qz-mpush-meta{
    font-size:11.5px;color:var(--qz-text-secondary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.qz-mpush-close{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border-radius:8px;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:0;
    display:block;
}
.qz-mpush-close::before,
.qz-mpush-close::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:1.5px;
    border-radius:1px;
    background:var(--qz-text-secondary);
}
.qz-mpush-close::before{transform:translate(-50%,-50%) rotate(45deg);}
.qz-mpush-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.qz-mpush-close:active{background:var(--qz-bg-raised);}
.qz-mpush-close:active::before,
.qz-mpush-close:active::after{background:var(--qz-text-primary);}

.qz-mpush-bar{
    position:absolute;
    left:16px;right:16px;bottom:0;
    height:3px;
    border-radius:2px;
    overflow:hidden;
}
.qz-mpush-bar-fill{
    height:100%;
    width:100%;
    border-radius:2px;
    background:var(--qz-push-signal);
    transform-origin:left center;
    animation:qzMpushBarRun 6s linear forwards;
    animation-play-state:paused;
}
@keyframes qzMpushBarRun{
    from{transform:scaleX(1);}
    to{transform:scaleX(0);}
}
.qz-mpush-card.is-on .qz-mpush-bar-fill{
    animation-play-state:running;
}
.qz-mpush-card.is-paused .qz-mpush-bar-fill{
    animation-play-state:paused;
}

@media (prefers-reduced-motion: reduce){
    .qz-mpush-card,
    .qz-mpush-card.is-leave-fling,
    .qz-mpush-card.is-leave-fade,
    .qz-mpush-bar-fill{
        transition:none;
        animation:none;
    }
}
}