/*
 * 팝업 공통 디자인 (사이트 공통 기능, extend/popup_common.extend.php 가 메인 화면에서 불러온다)
 *
 * - 대상 : 그누보드 레이어 팝업(.hd_pops, bbs/newwin.inc.php) · 슬라이더 팝업(.slide_popup, plugin/slide_popup/)
 * - 글꼴 : Pretendard (css/fonts/pretendard/, 필요한 글자 묶음만 내려받는 dynamic subset)
 * - 아래 바(.popup_bar) : 기준 www.uverse-ps.com 메인 팝업
 *   흰 바탕 · 회색 테두리 · 아래 모서리 둥글게, 왼쪽 "하루동안 보지 않기"(마우스를 올리면 "클릭하면 오늘하루 OFF"),
 *   오른쪽 X 아이콘(마우스를 올리면 180도 회전)
 * - 레이어 팝업은 코어 마크업을 고치지 않고 js/popup_common.js 가 버튼 안 글자와 class 를 더한다.
 */

.hd_pops,
.slide_popup {
    --popup-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-family: var(--popup-font);
}

.hd_pops button,
.slide_popup button {
    font-family: inherit;
}

/* 레이어 팝업 : 아래 바 모서리에 맞춰 상자도 둥글게, 바가 상자 테두리를 덮는다. */
.hd_pops {
    border-radius: 0 0 11px 11px;
}

.hd_pops_footer.popup_bar {
    margin: 0 -1px -1px;
}

/*
 * 레이어 팝업 반응형 : 관리자에서 정한 위치 · 크기(bbs/newwin.inc.php 의 inline style)가 화면보다 크면
 * 화면 너비에 맞춘다. 위치는 왼쪽 10px 로 모으고, 너비가 줄면 내용 높이도 따라가게 한다.
 */
@media (max-width: 767px) {
    .hd_pops {
        left: 10px !important;
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
    }

    .hd_pops .hd_pops_con {
        max-width: 100%;
        height: auto !important;
        box-sizing: border-box;
    }

    .hd_pops .hd_pops_con img {
        height: auto;
    }
}

/* 아래 바 */
.popup_bar {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    min-height: 46px;
    margin: 0;
    padding: 10px 46px 10px 15px;
    border: 1px solid #ccc;
    border-radius: 0 0 10px 10px;
    background: #fff;
    color: #333;
    text-align: left;
}

.popup_bar::after {
    display: none;
}

.popup_bar .popup_bar__today,
.popup_bar .popup_bar__close {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

/* 하루동안 보지 않기 : 안내 글자(뒤)가 버튼 폭을 정하고, 평소에는 숨겨 두었다가 마우스를 올리면 나타난다. */
.popup_bar .popup_bar__today {
    position: relative;
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    text-align: left;
}

.popup_bar__label,
.popup_bar__hover {
    display: block;
    padding: 5px;
    white-space: nowrap;
}

.popup_bar__label {
    position: absolute;
    top: 0;
    left: 0;
}

.popup_bar__hover {
    position: relative;
    background: #fff;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.popup_bar__today:hover .popup_bar__hover,
.popup_bar__today:focus-visible .popup_bar__hover {
    opacity: 1;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 닫기 : 15px X 아이콘, 누르는 영역은 넓힌다. */
.popup_bar .popup_bar__close {
    position: absolute;
    top: 50%;
    right: 7px;
    left: auto;
    display: block;
    width: 31px;
    height: 31px;
    padding: 8px;
    font-size: 0;
    line-height: 0;
    transform: translateY(-50%);
}

.popup_bar__icon {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.popup_bar__icon::before,
.popup_bar__icon::after {
    position: absolute;
    top: 7px;
    left: -3px;
    width: 21px;
    height: 1px;
    background: #000;
    content: '';
}

.popup_bar__icon::before {
    transform: rotate(45deg);
}

.popup_bar__icon::after {
    transform: rotate(-45deg);
}

.popup_bar__close:hover .popup_bar__icon,
.popup_bar__close:focus-visible .popup_bar__icon {
    transform: rotate(180deg);
}

.popup_bar__today:focus-visible,
.popup_bar__close:focus-visible {
    outline: 2px solid #333;
    outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .popup_bar__hover,
    .popup_bar__icon {
        transition: none;
    }
}