/* 페이스튜디오 모바일 — 결제내역 (PayOrder 목록 + 바텀시트 필터) */
.pm-history { padding: 14px 16px 16px; }

/* ===== 필터 바 ===== */
.pm-hbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pm-hbar__date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pm-sub); }
.pm-hbar__date i { font-size: 16px; }
.pm-hbar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border: 1px solid var(--pm-line);
    border-radius: 11px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pm-text);
    background: var(--pm-card);
}
.pm-hbar__btn i { font-size: 17px; }
.pm-hbar__btn.is-on { border-color: var(--pm-green); color: var(--pm-green); }
.pm-hbar__btn.is-on::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pm-green);
}

/* ===== 바텀시트 ===== */
.pm-sheet { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.pm-sheet__dim { position: absolute; inset: 0; background: rgba(15, 23, 30, .45); opacity: 0; transition: opacity .25s; }
.pm-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 500px;
    margin: 0 auto;
    background: var(--pm-card);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
    max-height: 88vh;
    overflow-y: auto;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.pm-sheet.is-open { visibility: visible; }
.pm-sheet.is-open .pm-sheet__dim { opacity: 1; }
.pm-sheet.is-open .pm-sheet__panel { transform: translateY(0); }
.pm-sheet__bar { width: 40px; height: 4px; border-radius: 2px; background: var(--pm-line); margin: 10px auto 0; }
.pm-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; }
.pm-sheet__head strong { font-size: 17px; font-weight: 700; }
.pm-sheet__x { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--pm-sub); font-size: 22px; }
.pm-sheet__form { padding: 6px 20px 8px; display: flex; flex-direction: column; gap: 20px; }

/* 필터 필드 */
.pm-ff { display: flex; flex-direction: column; gap: 9px; }
.pm-ff__label { font-size: 14px; font-weight: 600; }
.pm-ff__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.pm-fchip { padding: 8px 15px; border: 1px solid var(--pm-line); border-radius: 20px; font-size: 13px; color: var(--pm-sub); background: var(--pm-card); }
.pm-fchip.is-on { border-color: var(--pm-green); background: var(--pm-soft); color: var(--pm-green); font-weight: 600; }

/* 직접지정 날짜 (기본 숨김 — JS가 custom 일 때 노출) */
.pm-ff__dates { display: none; align-items: center; gap: 9px; }
.pm-ff__dates input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--pm-line);
    border-radius: 11px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pm-text);
    background: var(--pm-card);
}

/* 검색 (항목 select + 입력값) */
.pm-search { display: flex; gap: 8px; }
.pm-search__sel { flex: none; width: 118px; position: relative; }
.pm-search__sel::after {
    content: '';
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--pm-sub);
    border-bottom: 1.5px solid var(--pm-sub);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.pm-search__sel select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--pm-line);
    border-radius: 11px;
    padding: 0 30px 0 13px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pm-text);
    background: var(--pm-card);
    appearance: none;
    -webkit-appearance: none;
}
.pm-search__input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--pm-line);
    border-radius: 11px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pm-text);
    background: var(--pm-card);
}
.pm-search__input:focus, .pm-ff__dates input:focus { outline: none; border-color: var(--pm-green); }

.pm-sheet__foot { display: flex; gap: 9px; margin-top: 4px; }
.pm-sheet__reset { flex: 1; height: 52px; border: 1px solid var(--pm-line); border-radius: 13px; font-size: 15px; font-weight: 500; color: var(--pm-sub); background: var(--pm-card); }
.pm-sheet__apply { flex: 2; height: 52px; border-radius: 13px; background: var(--pm-green); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 6px 15px rgba(15, 157, 110, .3); }

/* ===== 목록 ===== */
.pm-hlist { display: flex; flex-direction: column; gap: 10px; }
.pm-hi {
    display: flex;
    gap: 12px;
    background: var(--pm-card);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(31, 41, 51, .05);
    transition: transform .1s;
}
.pm-hi:active { transform: scale(.995); }
.pm-hi__ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pm-soft);
    color: var(--pm-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: none;
}
.pm-hi__body { flex: 1; min-width: 0; }
.pm-hi__badges { display: flex; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
.pm-hi__badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--pm-green);
    background: var(--pm-soft);
    padding: 2px 8px;
    border-radius: 7px;
}
.pm-hi__badge--sub { color: var(--pm-sub); background: var(--pm-bg); }
.pm-hi__badge--cancel { color: var(--pm-danger); background: #fdeced; }
.pm-hi__badge--fail { color: var(--pm-danger); background: #fdeced; }
.pm-hi__title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-hi__buyer { font-size: 12px; color: var(--pm-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-hi__time { font-size: 12px; color: var(--pm-muted); margin-top: 2px; }
.pm-hi__price { flex: none; text-align: right; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pm-hi__amt { font-size: 16px; font-weight: 700; white-space: nowrap; }
.pm-hi__amt--strike { font-size: 13px; font-weight: 500; color: var(--pm-muted); text-decoration: line-through; }
.pm-hi__amt--down { font-size: 15px; color: var(--pm-danger); }
.pm-hi__amt--fail { color: var(--pm-danger); }

/* 빈 상태 */
.pm-empty-box { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 60px 24px; color: var(--pm-muted); }
.pm-empty-box__ic {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pm-soft);
    color: var(--pm-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.pm-empty-box p { font-size: 14px; }