/*
 * popup.css - 공통 팝업(안내/커스텀) 스타일.
 * 마크업: notice_popup.jsp / content_popup.jsp
 * 동작: popup.js / notice_popup.js / content_popup.js
 *
 * Token 참조: --ptbwa-ds-* semantic token (ptbwa-ds-tokens.css 필요).
 * overlay 스크림/그림자는 surface가 아니라 별도 토큰이 없어 rgba 유지.
 */

.common-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.common-popup-overlay.is-open {
    opacity: 1;
}

/* 팝업 안 날짜 입력(광고 그룹 기간 - create_ad_group_popup.js initAdsetPeriodPicker)의 달력은 body에 붙는데,
   테마 기본 z-index(1000)면 오버레이(2000) 뒤에 깔려서 안 보인다. */
.daterangepicker.adset-period-picker {
    z-index: 2010;
}

.common-popup-panel {
    position: relative;
    background: var(--ptbwa-ds-color-surface-white);
    border-radius: 20px;
    padding: 28px 24px 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(8px);
    transition: transform 0.15s ease;
}

.common-popup-overlay.is-open .common-popup-panel {
    transform: translateY(0);
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--ptbwa-ds-color-text-muted);
    cursor: pointer;
    padding: 0;
}

.popup-close:hover path {
    stroke: var(--ptbwa-ds-color-text-primary);
}

/* 안내 팝업: 가운데 정렬, 아이콘+주문구+부문구+버튼 */
.notice-popup-panel {
    text-align: center;
}

.notice-popup-panel .popup-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.notice-popup-panel .popup-icon:empty {
    display: none;
}

.notice-popup-panel .popup-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 24px 0 12px;
    color: var(--ptbwa-ds-color-text-primary);
}

/* 부문구/커스텀 컨텐츠 없이 타이틀만 있을 때(notice_popup.js가 popup-title-only를 토글) -
   타이틀 바로 아래에 noticePopupButtons가 붙어버려서 간격을 더 띄운다. */
.notice-popup-panel.popup-title-only .popup-title {
    margin-bottom: 50px;
}

.notice-popup-panel .popup-message {
    font-size: 18px;
    color: #111928;
    line-height: 1.5;
    margin: 0 0 20px;
}

.notice-popup-panel .popup-custom-content:empty {
    display: none;
}

.notice-popup-panel .popup-custom-content {
    margin-bottom: 20px;
    text-align: center;
}

.notice-popup-panel .popup-buttons {
    position: relative;
    display: flex;
    gap: 8px;
}

.notice-popup-panel .popup-buttons .popup-button {
    flex: 1;
}

/* 커스텀 팝업: 좌측 정렬, 헤더+본문(페이지마다 교체)+버튼 */
/* 본문이 길어지면(예: 1:1 문의 폼) 패널 전체(.common-popup-panel)가 아니라 popup-body만 스크롤되게
   한다 - 패널을 flex column으로 만들고 헤더/버튼은 flex:none으로 고정, popup-body만 남는 공간을
   채우며(flex:1) 스스로 스크롤(overflow-y:auto)하게 한다. min-height:0이 없으면 flex item이
   내용만큼 커져버려서(기본값 min-height:auto) 부모(.common-popup-panel)의 max-height를 밀어내고
   결국 패널 전체가 스크롤되던 원래 문제가 그대로 재현되니 꼭 같이 둔다. */
.content-popup-panel {
    width: 400px;
    text-align: left;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content-popup-panel .popup-header {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.content-popup-panel .popup-header .popup-title {
    font-size: 24px;
    font-weight: var(--ptbwa-ds-font-weight-bold);
    margin: 0;
    color: var(--ptbwa-ds-color-text-primary);
}

/* 타이틀 아래 보조 문구 - 없으면(:empty) 아예 렌더링 공간을 안 차지한다 */
.content-popup-panel .popup-header .popup-subtitle {
    font-size: 15px;
    font-weight: var(--ptbwa-ds-font-weight-regular);
    margin: 0;
    color: var(--ptbwa-ds-color-text-secondary);
}

.content-popup-panel .popup-header .popup-subtitle:empty {
    display: none;
}

.content-popup-panel .popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 8px;
}

.content-popup-panel .popup-buttons {
    display: flex;
    flex: none;
    gap: 24px;
}

.content-popup-panel .popup-buttons .popup-button {
    width: 100%;
}

/* 사업자 등록 팝업 너비는 CSS가 아니라 business_regist_popup.js의 BRP_PANEL_WIDTH_PX가 인라인으로 정한다 */

/* 팝업 버튼 공통 */
.popup-button {
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--ptbwa-ds-color-border-default);
    background: var(--ptbwa-ds-color-surface-white);
    color: var(--ptbwa-ds-color-text-primary);
    font-size: var(--ptbwa-ds-font-size-base);
    font-weight: var(--ptbwa-ds-font-weight-medium);
    cursor: pointer;
}

.popup-button:hover {
    background: #f8f8f8;
}

.popup-button:active {
    background: #f7f7f7;
}

.popup-button--primary {
    border-color: var(--ptbwa-ds-color-action-primary);
    background: var(--ptbwa-ds-color-action-primary);
    color: var(--ptbwa-ds-color-action-on-primary);
}

.popup-button--primary:hover {
    background: var(--ptbwa-ds-color-action-primary-hover);
}

.popup-button--danger {
    border-color: var(--ptbwa-ds-color-feedback-danger);
    background: var(--ptbwa-ds-color-feedback-danger);
    color: var(--ptbwa-ds-color-action-on-primary);
}

.popup-button--danger:hover {
    border-color: var(--ptbwa-ds-color-feedback-danger);
    background: var(--ptbwa-ds-color-feedback-danger);
    color: var(--ptbwa-ds-color-action-on-primary);
    filter: brightness(0.9);
}

.popup-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}