/*
 * 결제 화면(웹) 레이아웃 보정
 *
 * 이 화면은 내용 상자와 하단 버튼이 서로 다른 폭을 쓰고 있었다.
 *   - 내용   : .st_box1.st_max_w3 → max-width 1280px (넓은 창에서 1,200px 가까이 벌어짐)
 *   - 버튼   : .st_max_w3         → clamp(720px, 38.54vw, 740px)
 * 그래서 정보 행의 값이 라벨에서 멀리 떨어져 어느 값이 어느 항목인지 잇기 어렵고,
 * 아래 금액·쿠폰 줄(라벨 좌 / 값 우)과도 세로선이 어긋나 보였다.
 *
 * (1) 내용 폭을 하단 버튼과 같은 값으로 묶고
 * (2) 정보 행의 값을 우측 정렬해 화면 전체가 하나의 오른쪽 선을 갖게 한다.
 *
 * 모바일 템플릿(ticketPayment.html)은 원래 문제가 없어 건드리지 않는다.
 * 그래서 웹 결제 화면(#payment-main.st_hd_top)에만 건다.
 */

/* (1) 내용 폭을 하단 버튼과 맞춘다 — .st_box1.st_max_w3 의 max-width:1280px 를 덮는다 */
#payment-main.st_hd_top > .content_area > .st_box1.st_max_w3 {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

/*
    (2) 정보 행의 값 우측 정렬 — 아래 금액·쿠폰 줄과 같은 오른쪽 선을 만든다.

    이 화면의 행은 뒤에 오는 규칙에 밀려 justify-content 가 flex-start 로 계산된다.
    (기본 .info_st4_wrap>.row_wrap 의 space-between 이 먹지 않는다)
    그래서 정렬을 여기서 다시 명시한다 — text-align 만으로는 값 상자 자체가 왼쪽에 남는다.
*/
#payment-main.st_hd_top .info_st4_wrap > .row_wrap,
#payment-main.st_hd_top .info_st4_wrap > .bundle_delivery_section > .row_wrap {
    justify-content: space-between;
}

#payment-main.st_hd_top .info_st4_wrap > .row_wrap > .txt,
#payment-main.st_hd_top .info_st4_wrap > .bundle_delivery_section > .row_wrap > .txt {
    /* 값이 길어 두 줄로 접힐 때도 오른쪽으로 가지런히 */
    text-align: right;
}