/*
    공용 안내 팝업 (TP-86 후속)

    브라우저 기본 alert() 를 대신한다. alert 은 'localhost:8082 내용:' 같은 출처 문구가 먼저 붙고
    본문도 그대로 노출돼서, 좌석 잠금 만료처럼 사용자가 다음 행동을 정해야 하는 안내에는 맞지 않는다.

    결제 오버레이(z-index 9999) 위에서도 떠야 하므로 스택 순서를 그 위로 잡는다.
*/
.msg_popup {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .5);
}
.msg_popup[hidden] { display: none; }

.msg_popup_box {
    width: 100%;
    max-width: 340px;
    padding: 28px 22px 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    text-align: center;
    /* 팝업이 뜰 때 살짝 올라오게 — 갑자기 나타나면 무슨 일이 일어났는지 놓친다 */
    animation: msg_popup_in .16s ease-out;
}
@keyframes msg_popup_in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .msg_popup_box { animation: none; }
}

/* 아이콘 — 성격(경고/오류/안내)에 따라 색만 바뀐다 */
.msg_popup_icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}
.msg_popup_icon.st_warn  { background: #fff3e6; color: #f08c00; }
.msg_popup_icon.st_error { background: #fdeeed; color: #e8574c; }
.msg_popup_icon.st_info  { background: #eef4ff; color: #3b6fd4; }

.msg_popup_title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1f1f1f;
    line-height: 1.4;
}
.msg_popup_title[hidden] { display: none; }
.msg_popup_text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    /* 문구에 넣은 줄바꿈을 살린다 (textContent 로 넣으므로 태그는 쓰지 않는다) */
    white-space: pre-line;
    /* 서버 문구가 길어도 상자를 밀지 않게 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.msg_popup_foot {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}
.msg_popup_foot button {
    flex: 1 1 0;
    height: 46px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.msg_popup_cancel { border: 1px solid #ddd; background: #fff; color: #767676; }
.msg_popup_confirm { border: 0; background: #e8574c; color: #fff; }

/*
    좌석 선점 남은 시간 (seatLockTimer.js)
    결제 화면 맨 위에 붙어 계속 보인다 — 시간이 흐르는 걸 모르면 결제 버튼을 누르는
    순간에야 만료를 알게 된다.
*/
.seat_lock_timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #ffd8a8;
    border-radius: 8px;
    background: #fff8ef;
    color: #8a5a00;
    font-size: 13px;
    line-height: 1.4;
}
.seat_lock_timer[hidden] { display: none; }
.seat_lock_timer .seat_lock_timer_value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;   /* 숫자가 바뀌어도 폭이 흔들리지 않게 */
    color: #d97706;
}
/* 1분 아래 — 색을 올려 눈에 걸리게 */
.seat_lock_timer.is_urgent {
    border-color: #f5b5b0;
    background: #fdeeed;
    color: #a33228;
}
.seat_lock_timer.is_urgent .seat_lock_timer_value { color: #e8574c; }
.seat_lock_timer.is_expired { opacity: .6; }