/*
 * 회원 화면 알림 · 확인 · 입력 창 (site-ask.js · 2026-10-19 대표님 "회원 화면 알림창도 같은 모양으로" — 마이페이지 창 모양)
 * ------------------------------------------------------------
 *  my_popup_base 의 가운데 창(.mdp)과 같은 모양 : 검정 제목 줄(제목 + ✕) · 흰 몸통 · [확인]류는 금빛 · [취소]는 흰 바탕 테두리 ·
 *  지우기류 [확인]은 빨간 테두리 · 좁은 화면(520px 이하)은 아래에서 올라오는 창. 홈페이지 · 마이페이지 어느 화면 CSS 와도 섞이지 않게 .sask 아래로만.
 */

.sask {
    position: fixed;
    inset: 0;
    z-index: 100000;              /* 마이페이지 창(.mdp 10050) · 팝업 배너보다 위 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(20, 18, 15, .58);
    box-sizing: border-box;
    touch-action: none;           /* 어두운 바깥을 밀어도 뒤 화면이 움직이지 않게 */
    overscroll-behavior: contain;
    font-family: inherit;
    text-align: left;
}

.sask[hidden],
.sask [hidden] { display: none !important; }

.sask *,
.sask *::before,
.sask *::after { box-sizing: border-box; }

.sask .sask-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 36px);
    margin: 0;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    touch-action: pan-y;          /* 창 안의 긴 글은 굴러감 */
    animation: saskIn .2s ease-out;
}

/* 살짝 올라오기만 한다 — 투명도는 건드리지 않아 어느 순간에 보아도 창이 비쳐 보이지 않는다(.mdp 와 같음) */
@keyframes saskIn {
    from { transform: translateY(10px) scale(.98); }
    to   { transform: none; }
}

.sask .sask-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0;
    padding: 0 48px;
    background: #222;
}

.sask .sask-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #fff;
    text-align: center;
}

.sask .sask-x {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.sask .sask-x:hover { background: rgba(255, 255, 255, .12); }
.sask .sask-x:focus-visible { outline: 2px solid #E8D5A3; outline-offset: -2px; }

.sask .sask-body { padding: 22px 20px 4px; }

.sask .sask-text {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.2px;
    color: #333;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.sask .sask-input {
    display: block;
    width: 100%;
    height: 46px;
    margin: 14px 0 0;
    padding: 0 12px;
    border: 1px solid #d9d4ca;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 16px;              /* 16px 아래면 아이폰이 화면을 키운다 */
    line-height: normal;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.sask .sask-input:focus { outline: 2px solid #C9A86C; outline-offset: 0; border-color: #C9A86C; }

.sask .sask-foot {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 18px 20px 20px;
}

.sask .sask-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.2px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* [확인]류 — 마이페이지 메뉴 "쪽지함" 과 같은 금빛 그라데이션 · 흰 글자 (.mdp-gold 와 같음) */
.sask .sask-gold {
    border: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(110, 80, 35, .45);
    background: linear-gradient(135deg, #B8956A 0%, #D4BC84 30%, #E8D5A3 50%, #D4BC84 70%, #C9A86C 100%);
    box-shadow: 0 6px 16px rgba(151, 115, 63, .22);
}

.sask .sask-gold:hover { filter: brightness(1.05); }

.sask .sask-ghost { border: 1px solid #d9d4ca; background: #fff; color: #4a463f; }
.sask .sask-ghost:hover { border-color: #b8b1a4; }

.sask .sask-danger { border: 1px solid #e3b4b4; background: #fff; color: #a33b3b; }
.sask .sask-danger:hover { background: #fdf3f3; }

.sask .sask-gold:focus-visible,
.sask .sask-ghost:focus-visible,
.sask .sask-danger:focus-visible { outline: 2px solid #222; outline-offset: 2px; }

@media (max-width: 520px) {
    .sask { align-items: flex-end; padding: 10px; }
    .sask .sask-card { max-height: calc(100vh - 20px); border-radius: 14px 14px 10px 10px; }
    .sask .sask-head { border-radius: 14px 14px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sask .sask-card { animation: none; }
}