@charset "utf-8";

/************************************************************************
* 결제 정보 모달 — 관리자·손님이 «같은 화면»으로 본다
*
* 왜 common/ 인가
*   같은 결제를 예약 상세·판매 목록·체크인·손님 예약 확인 네 자리에서 본다.
*   자리마다 만들면 같은 값이 자리마다 다른 이름·다른 순서로 보인다.
*   실제로 영수증 링크가 그렇게 세 벌로 갈려 있었다 (2026-09-01).
*
* 색은 전역 토큰(common/css/tokens.css)만 쓴다 — 관리자 CSS 와 손님 CSS 가
* 둘 다 그 파일을 읽으므로 여기서 색을 새로 정의하면 두 화면이 갈라진다.
************************************************************************/

.pm-scrim {
    position: fixed;
    inset: 0;
    /* 2차 모달의 막이다 (--z-scrim-2). 예약 상세«내역» 모달(--z-modal) «위» 에 떠야 하는데
       --z-scrim(700) 을 쓰고 있어 그 뒤로 깔렸다 — 열어도 아무 일이 안 일어난 것처럼 보였다
       (2026-09-11 발견). 이 모달은 언제나 마지막에 열리는 잎이라 2차가 맞다.
       공용 다이얼로그(--z-dialog)는 여전히 이 위에서 확인을 받는다. */
    z-index: var(--z-scrim-2, 900);
    background: rgba(31, 36, 30, .46);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.pm-dialog {
    position: relative;
    z-index: var(--z-modal, 901);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    color: var(--ink, #1F241E);
    border-radius: var(--rad, 10px);
    box-shadow: var(--sh-lg, 0 18px 50px rgba(31, 36, 30, .22));
    overflow: hidden;
}

.pm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line, #E3DFD4);
}

.pm-title { font-size: 16px; font-weight: 700; margin: 0; flex: 1 1 auto; }

.pm-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line, #E3DFD4);
    border-radius: 8px;
    background: transparent;
    color: var(--ink2, #6B6A5F);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.pm-close:hover { background: var(--sage-bg, #F1F0E9); color: var(--ink, #1F241E); }
.pm-close:focus-visible { outline: 2px solid var(--dark, #204A12); outline-offset: 2px; }

.pm-body { padding: 4px 18px 18px; overflow-y: auto; }

/* ── 요약 ── */
.pm-rows { display: block; }

.pm-row {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line3, #EFEBE1);
    font-size: 13.5px;
    line-height: 1.5;
}
.pm-row:last-child { border-bottom: none; }
.pm-row > span { flex: 0 0 96px; color: var(--ink2, #6B6A5F); }
.pm-row > b { flex: 1 1 auto; font-weight: 600; word-break: break-all; }

.pm-row.is-total > b { font-size: 16px; }

/* 대조 키는 관리자만 본다. 눈에 띄되 본문을 밀어내지 않게 작게 적는다. */
.pm-row.is-key > b {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink2, #6B6A5F);
}

.pm-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--sage-tint-faint, #F1F0E9);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink2, #6B6A5F);
}

/* ── 영수증 ── */
.pm-receipt { margin-top: 16px; }

.pm-receipt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.pm-receipt-title { font-size: 13px; font-weight: 700; }

.pm-frame-wrap {
    position: relative;
    border: 1px solid var(--line, #E3DFD4);
    border-radius: 8px;
    overflow: hidden;
    background: var(--sage-bg, #F1F0E9);
}

.pm-frame {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    background: #fff;
}

.pm-frame-msg {
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink2, #6B6A5F);
}

/* 프레임 아래 «늘» 붙는 한 줄.
   막혔는지 아닌지를 JS 로는 알 수 없다 (payment-modal.js 주석 참고) —
   그래서 감지 대신 탈출구를 항상 보여 준다. */
.pm-frame-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink2, #6B6A5F);
}

.pm-btn {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid var(--line, #E3DFD4);
    border-radius: 8px;
    background: var(--card, #fff);
    color: var(--ink, #1F241E);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.pm-btn:hover { background: var(--sage-bg, #F1F0E9); }
.pm-btn:focus-visible { outline: 2px solid var(--dark, #204A12); outline-offset: 2px; }

.pm-tabs { display: flex; gap: 6px; }
.pm-tab.is-on { border-color: var(--dark, #204A12); color: var(--dark, #204A12); }

/* 좁은 화면 — 체크인은 태블릿·휴대폰에서 쓴다 */
@media (max-width: 560px) {
    .pm-scrim { padding: 0; align-items: stretch; }
    .pm-dialog { max-width: none; max-height: 100vh; border-radius: 0; }
    .pm-row { flex-direction: column; gap: 2px; }
    .pm-row > span { flex: none; }
    .pm-frame { height: 60vh; }
}