/* 페이스튜디오 모바일 — 결제 시작 3단계 */
.pm-header {
    border-bottom: none;
    background: #fff;
}

.pm-main {
    background: #fff;
    overflow: hidden;
}

.pm-pay-header-spacer {
    width: 42px;
    height: 42px;
    flex: none;
}

.pm-pay-account {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 10px;
    color: #14171a;
}

.pm-pay-account__logo {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--pm-green);
    color: #fff;
    font-size: .86rem;
}

.pm-pay-account strong {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 800;
}

.pm-pay-account__logo i {
    flex: none;
    font-size: 1rem;
}

.pm-pay-close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #2c333a;
    font-size: 1.45rem;
}

.pm-pay {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 clamp(16px, 4.2vw, 22px);
}

.pm-pay-swiper {
    width: 100%;
    /* 뷰포트 기준 확정 높이 — 백분율 체인이 Swiper 지점에서 끊겨도 슬라이드가 늘어나지 않도록 */
    height: calc(100dvh - 58px);
    flex: 1;
    overflow: hidden;
}

.pm-pay-swiper .swiper-wrapper,
.pm-pay-swiper .swiper-slide {
    height: 100%;
}

/* specificity(0,2,0)로 뒤에 로드되는 Swiper CDN css의 .swiper-slide 를 이겨야
   슬라이드가 flex 컬럼으로 유지되고, 안쪽 .pm-pay-scroll 이 축소·스크롤되어 하단 바가 고정된다 */
.pm-pay-swiper .pm-pay-slide {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3.8vw, 20px);
    height: calc(100dvh - 58px);
    overflow: hidden;
}

.pm-pay-slide--amount {
    justify-content: flex-start;
}

.pm-pay-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.pm-pay-scroll::-webkit-scrollbar {
    display: none;
}

.pm-pay-fixed {
    flex: none;
    width: 100%;
    background: #fff;
    padding: 8px 0;
}

.pm-pay-fixed > .pm-pay-next {
    width: 100%;
    display: block;
}

.pm-pay-amount {
    text-align: center;
    padding: clamp(54px, 13vh, 112px) 6px clamp(26px, 5vh, 48px);
}

.pm-pay-amount strong {
    display: block;
    width: 100%;
    font-size: clamp(2.75rem, 11.6vw, 4.75rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
    color: #000;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: clip;
    /* 금액 갱신 시 repaint/reflow 를 이 요소로 격리(iOS 키패드 버벅임 완화) */
    contain: content;
}

.pm-pay-amount span {
    display: block;
    margin-top: 11px;
    color: #b7bbc1;
    font-size: clamp(.86rem, 3.5vw, 1rem);
}

.pm-pay-adds {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: clamp(8px, 2vh, 16px);
}

.pm-pay-adds button {
    min-height: 42px;
    border-radius: 11px;
    background: #fafafa;
    border: 1px solid #f1f2f4;
    color: var(--pm-green);
    font-size: clamp(.78rem, 3.1vw, .92rem);
    font-weight: 800;
    box-shadow: 0 2px 9px rgba(20, 25, 30, .04);
}

.pm-pay-adds button:active,
.pm-keypad button:active,
.pm-product:active,
.pm-method:active {
    transform: scale(.97);
}

.pm-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 3.1vh, 28px) 10px;
    padding: clamp(4px, 1vh, 12px) 14px 0;
}

.pm-keypad button {
    height: clamp(46px, 8.2vh, 68px);
    border-radius: 0;
    color: #43484e;
    font-size: clamp(1.55rem, 6.2vw, 2.05rem);
    font-weight: 800;
    transition: transform .08s;
}

.pm-keypad i {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
}

.pm-pay-next,
.pm-pay-prev {
    height: 50px;
    border-radius: 15px;
    font-size: clamp(1rem, 4vw, 1.1rem);
    font-weight: 800;
}

.pm-pay-next {
    background: var(--pm-green);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 157, 110, .22);
}

.pm-pay-prev {
    background: #fff;
    color: var(--pm-sub);
    border: 1px solid var(--pm-line);
}

.pm-pay-actions {
    display: grid;
    grid-template-columns: .36fr .64fr;
    gap: 10px;
}

.pm-pay-head {
    padding: clamp(36px, 8vh, 70px) 4px 6px;
    text-align: center;
}

.pm-pay-head p {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
    font-weight: 900;
    color: #000;
}

.pm-pay-head span {
    display: block;
    margin-top: 10px;
    font-size: clamp(.9rem, 3.7vw, 1rem);
    color: #a5abb3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-product-custom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: clamp(14px, 3.8vw, 22px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pm-product-custom span {
    font-size: clamp(.85rem, 3.5vw, .95rem);
    color: var(--pm-sub);
    font-weight: 700;
}

.pm-product-custom input {
    width: 100%;
    height: 54px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 0 14px;
    color: var(--pm-text);
    font-family: inherit;
    font-size: clamp(.95rem, 4vw, 1.05rem);
}

.pm-product-custom input:focus {
    outline: none;
    border-color: var(--pm-green);
}

.pm-product-list,
.pm-method-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-bottom: 2px;
}

.pm-product,
.pm-method {
    width: 100%;
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 15px;
    background: #fbfbfc;
    border: 1px solid #eef0f3;
    padding: 13px 15px;
    text-align: left;
    box-shadow: none;
    transition: transform .08s, border-color .12s, background .12s;
}

.pm-product span,
.pm-method__copy {
    flex: 1;
    min-width: 0;
}

.pm-product b,
.pm-method b {
    display: block;
    color: var(--pm-text);
    font-size: clamp(.98rem, 4vw, 1.08rem);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-product em,
.pm-method em {
    display: block;
    margin-top: 2px;
    color: var(--pm-sub);
    font-size: clamp(.78rem, 3.3vw, .9rem);
    font-style: normal;
}

.pm-product > i,
.pm-method__check {
    display: none;
    flex: none;
    color: var(--pm-green);
    font-size: 23px;
}

.pm-product.is-on,
.pm-method.is-on {
    border-color: var(--pm-green);
    background: #f5fffb;
}

.pm-product.is-on > i,
.pm-method.is-on .pm-method__check {
    display: block;
}

.pm-pay-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    border-radius: 16px;
    color: var(--pm-muted);
    background: #fbfbfc;
    border: 1px solid #eef0f3;
}

.pm-pay-empty i {
    font-size: 30px;
    color: var(--pm-green);
}

.pm-pay-empty p {
    font-size: clamp(.95rem, 4vw, 1.05rem);
    font-weight: 800;
    color: var(--pm-text);
}

.pm-pay-empty span {
    font-size: clamp(.78rem, 3.3vw, .9rem);
}

.pm-method__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: #edf8f4;
    color: var(--pm-green);
    font-size: 24px;
}

.pm-card-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #fbfbfc;
    padding: 15px;
}

.pm-card-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pm-card-field label {
    color: var(--pm-sub);
    font-size: clamp(.82rem, 3.4vw, .94rem);
    font-weight: 800;
}

.pm-card-number,
.pm-card-expire {
    display: grid;
    gap: 8px;
}

.pm-card-number {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pm-card-expire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pm-card-number input,
.pm-card-expire input {
    width: 100%;
    height: 50px;
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: clamp(1rem, 4.4vw, 1.18rem);
    font-weight: 800;
    text-align: center;
}

.pm-card-number input:focus,
.pm-card-expire input:focus {
    outline: none;
    border-color: var(--pm-green);
}

.pm-card-source {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.pm-card-source button {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 15px;
    background: #edf8f4;
    color: var(--pm-green);
    font-size: clamp(.9rem, 3.7vw, 1rem);
    font-weight: 900;
}

.pm-card-source i {
    font-size: 1.25rem;
}

.pm-pay-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    border-radius: 16px;
    background: #fbfbfc;
    border: 1px solid #eef0f3;
    box-shadow: none;
}

.pm-pay-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 27px;
}

.pm-pay-summary span {
    color: var(--pm-sub);
    font-size: clamp(.8rem, 3.3vw, .92rem);
    flex: none;
}

.pm-pay-summary b {
    color: var(--pm-text);
    font-size: clamp(.88rem, 3.7vw, 1rem);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-height: 720px) {
    .pm-pay-slide {
        gap: 10px;
    }

    .pm-pay-amount {
        padding-top: 28px;
        padding-bottom: 18px;
    }

    .pm-keypad {
        gap: 7px 8px;
    }

    .pm-keypad button {
        height: 46px;
    }
}