/**
온라인 패들 신청 팝업 - 응찰 예정 랏 (SRI-3292, 260826). common_popup.css 에서 분리.
 */
/* 976 = 콘텐츠 880(피그마) + 섹션 좌우 40x2 + LOT 목록 스크롤 여백 16(래퍼 8 + 스크롤바 8).
   960 이면 그 16px 이 모자라 LOT 그리드가 7열로 떨어지고 gap 이 32px 까지 벌어진다. */
.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot {
    width: 100%;
    max-width: 976px;
}

/*
 * 아래 규칙은 모두 `.trp.popupfixed-wrap .terms_required_lot`(온라인 패들 신청 팝업) 하위로 한정한다.
 * - 이 파일(paddle-lots.css)은 commonCss.jsp 에서 로드되어, header.jsp 에서 그 뒤에 오는 pages_global.css 보다 먼저 로드된다.
 *   따라서 `.popupfixed-wrap input[type="search"]` 같은 전역 규칙과 특정도가 같으면 전역 쪽이 이긴다.
 *   스코프 클래스를 붙여 특정도를 높여두면 뒤에 로드되는 전역 규칙에 덮이지 않는다.
 * - 동시에 이 팝업 밖으로 영향이 새지 않도록 범위도 함께 제한한다.
 */
.trp.popupfixed-wrap .terms_required_lot .bid-lot_select {
    margin-bottom: 30px;
}

.trp.popupfixed-wrap .terms_required_lot .popup_mid-title.bid-lot_select-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #1c1c1c;
    line-height: 24px;
}

.trp.popupfixed-wrap .terms_required_lot .popup_mid-title.bid-lot_select-title .sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #1fa9a2;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-util {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* 검색줄 -> LOT 그리드 20px (피그마: 선택/검색 프레임 끝 -> Content y 간격) */
    margin-bottom: 20px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-count .label {
    color: #2b2b2b;
    font-weight: 400;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-count .num {
    color: #39c3bc;
    font-weight: 600;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 44px;
    background: #fff;
    border-bottom: 1px solid #ccc;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search .inner {
    display: flex;
    align-items: center;
    width: 204px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search .ic {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: url("https://seoulauction.com/images/common/ic_search_md.svg") no-repeat center center;
    background-size: 22px 22px;
}

/* pages_global.css 의 .popupfixed-wrap input[type="search"] 가 뒤에 로드되므로 특정도를 높여 재정의 */
.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search input[type="search"] {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.28px;
    vertical-align: middle;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search input[type="search"]::placeholder {
    color: #888;
    font-size: 14px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search input[type="search"]::-webkit-input-placeholder {
    color: #888;
    font-size: 14px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search input[type="search"]::-moz-placeholder {
    color: #888;
    font-size: 14px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search input[type="search"]::-webkit-search-cancel-button,
.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list-wrap {
    position: relative;
    max-height: 560px;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(28, 28, 28, 0.5) transparent;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list-wrap::-webkit-scrollbar {
    width: 8px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(28, 28, 28, 0.5);
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 8px;
}

/* 열 수를 고정하지 않고 아이템 폭을 피그마 값으로 고정한다.
   트랙 96px = 이미지 88px + thumb-box 좌우 패딩 4px x 2.
   가용 폭(팝업 880 - 섹션 좌우 80 - 래퍼 8 - 스크롤바 8 = 약 787px)에 7열이 들어가고
   남는 약 19px 은 space-between 으로 gap 에 분산된다(16 -> 약 19px).
   auto-fit 이 아닌 auto-fill 이라 빈 트랙이 유지되므로, 마지막 줄 아이템이
   양끝으로 벌어지지 않고 트랙 위치를 그대로 지킨다. */
.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 96px);
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

/* 선택 테두리는 안쪽으로 그려 이미지 위치가 밀리지 않게 함(피그마: 96px 프레임 / 이미지 88px @ 4,4 고정) */
.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .thumb-box {
    display: block;
    padding: 4px;
    border-radius: 6px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item.on .thumb-box {
    box-shadow: inset 0 0 0 2px #4dc9c3;
}

/* 피그마 기준 정사각(PC 88x88 / 모바일 69.5x69.5)에 1px 안쪽 스트로크.
   padding-top:100% 는 content-box 기준이라 테두리 2px 만큼 세로로 길어져서 aspect-ratio 를 쓴다. */
.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .thumb {
    position: relative;
    display: block;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item.on .thumb {
    background-color: #fafafa;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .txt-box {
    display: block;
    margin-top: 8px;
    padding: 0 4px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .lot-no {
    display: block;
    color: #575757;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .artist {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1c1c1c;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    word-break: break-all;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item .chk {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 16px;
    height: 16px;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
    background: #fff;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-item.on .chk {
    border-color: transparent;
    background: url("https://public.seoulauction.io/resources/assets/images/common/bg-checkbox-mint_on.svg") no-repeat center center;
    background-size: 16px 16px;
}

.trp.popupfixed-wrap .terms_required_lot .bid-lot_select-empty {
    padding: 60px 0;
    color: #888;
    font-size: 14px;
    text-align: center;
}

@media all and (min-width: 1024px) and (max-height: 900px) {
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list-wrap {
        max-height: 340px;
    }
}

@media all and (max-width: 1023px) {
    /* 피그마 14156:98511 container = pt 12px / pb 32px / px 22px.
       (모바일 프레임이 390px 이라 좌우 22px 이고 콘텐츠 폭이 346px 이 된다) */
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel .section {
        padding: 12px 22px 32px;
    }
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select {
        margin-bottom: 20px;
    }
    /* 상단 민트 바. 피그마 14156:98628 에서 header 가 y=4 -> 4px (PC 는 6px 유지) */
    .trp.popupfixed-wrap .terms_required_lot .pop-panel .pop-header {
        border-top-width: 4px;
    }

    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel .pop-header .title-box {
        padding: 28px 22px 16px;
    }

    /*
     * 팝업 헤더 타이틀. 피그마 14156:98630 = 20px / 28px / 600 / #111 / letter-spacing -0.4px.
     * 전역 .txt_title 의 모바일 값(22px / 700 / line-height 1.1)을 이 팝업에서만 덮는다.
     * 닫기 버튼의 세로 정렬은 margin-top = title-box 상단패딩 - 하단패딩 으로 잡혀 있어
     * 행간이 바뀌어도 그대로 맞는다.
     */
    .trp.popupfixed-wrap .terms_required_lot .pop-panel .pop-header .title-box .txt_title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.4px;
        color: #111;
    }

    /*
     * 항목 타이틀(유의사항 / 신청 고객 정보 / 응찰 예정 LOT).
     * 피그마 14156:98693 = 18px / 24px / 600 / #1c1c1c.
     * 전역 .popup_mid-title 의 모바일 값(14px)을 이 팝업에서만 덮는다. PC 는 기존 유지.
     */
    .trp.popupfixed-wrap .terms_required_lot .popup_mid-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        color: #1c1c1c;
    }
    /* (1~3개 선택 필수) 14px/20px/#1fa9a2 와 "선택 N" 16px/24px 은 PC 값과 같아
       모바일 전용 축소만 걷어내면 된다(별도 선언 불필요). */
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-util {
        flex-direction: column;
        align-items: stretch;
        /* 피그마: "선택 N"(h24) -> 검색창 y=28 이라 4px */
        gap: 4px;
        margin-bottom: 20px;
    }
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search {
        justify-content: flex-start;
        width: 100%;
        height: 44px;
    }
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-search .inner {
        width: 100%;
    }
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list-wrap {
        max-height: 340px;
        padding-right: 6px;
    }
    /* 아이템 내부 규격(썸네일 패딩 4px, 이미지-텍스트 간격 8px, 텍스트 좌우 4px,
       LOT 번호/작가명 14px·20px)은 피그마상 PC와 모바일이 동일하므로 재정의하지 않는다.

       트랙은 PC 처럼 피그마 값(77.5px)으로 고정하지 못한다. 375px 기기의 가용 폭은
       340px(375 - 섹션 좌우 29 - 래퍼 6)인데 4열에는 346px 이 필요하다. 고정하면
       3열로 떨어져 이미지가 97px 로 커지고 gap 도 크게 벌어진다.

       하한 68px 유동 트랙을 쓴다. 360~414px 구간에서 디자인과 같은 4열이 유지되고
       (하한이 73px 을 넘으면 375px 에서 3열/이미지 97px 로 튄다), 폭이 넓어지면
       열이 늘어나 이미지가 커지지 않는다. 375px 기준 이미지 68px(피그마 69.5px),
       320~1023px 전 구간 61~79px 범위. */
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-list {
        grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
        gap: 12px;
    }
    .trp.popupfixed-wrap .terms_required_lot .bid-lot_select-empty {
        padding: 40px 0;
        font-size: 13px;
    }
}

/*
 * 약관 동의 영역 (온라인 패들 신청 팝업)
 * 위와 동일하게 `.trp.popupfixed-wrap .terms_required_lot` 하위로 한정한다.
 * 기존 테이블 기반 스타일(.terms_required-article table.table_base.data-table ...)은
 * 마크업이 리스트로 바뀌면서 더 이상 매치되지 않는다.
 */
.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li .trp.checkbox-box {
    display: block;
    flex: 1 0 0;
    min-width: 0;
    /* 체크박스 16px + gap 8px */
    padding-left: 24px;
    min-height: 20px;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li .trp.checkbox-box label {
    display: block;
    height: auto;
    color: #2b2b2b;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* 버튼이 아니라 밑줄 텍스트 링크다(.btn 의 padding/line-height/border 를 쓰지 않는다) */
.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li .terms-agree-link {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #39c3bc;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: underline;
    cursor: pointer;
}

/* 체크박스: 기본 스프라이트(sp_forms.png) 대신 16px 박스로 교체 */
.trp.popupfixed-wrap .terms_required_lot .terms_required-article .trp.checkbox-box input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .trp.checkbox-box input[type="checkbox"] + i {
    top: 2px;
    left: 0;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .trp.checkbox-box input[type="checkbox"] + i:after {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
    background-color: #fff;
    background-image: none;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .trp.checkbox-box input[type="checkbox"]:checked + i:after {
    width: 16px;
    height: 16px;
    border-color: transparent;
    background-color: transparent;
    background-image: url("https://public.seoulauction.io/resources/assets/images/common/bg-checkbox-mint_on.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

/* 전체 동의하기 */
/* 구분선 상하 여백 12px. 피그마 PC 14151:32886 / 모바일 14156:98511 에서
   약관 목록 끝 -> Divider 12px, Divider -> 전체 동의 12px (두 뷰 동일) */
.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e8e8e8;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all .trp.checkbox-box {
    display: block;
    padding-left: 26px;
    min-height: 24px;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all .trp.checkbox-box input[type="checkbox"] + i {
    top: 4px;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all .trp.checkbox-box label {
    display: block;
    height: auto;
    color: #1c1c1c;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all .trp.checkbox-box label .font-point {
    color: #39c3bc;
    font-size: 14px;
    font-weight: 400;
}

@media all and (max-width: 1023px) {
    /* 약관 본문/전체 동의 문구도 피그마상 PC 와 같은 값이라 모바일에서 줄이지 않는다.
       행 상하 여백 8px 은 피그마 14156:100455(346px = 모바일 폭) 기준. */
    .trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li {
        flex-direction: column;
        gap: 4px;
        padding: 8px 0;
    }
    .trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li .trp.checkbox-box {
        width: 100%;
        flex: none;
    }
    /* 약관 본문 시작선(체크박스 16px + gap 8px)에 맞춘다.
       padding 이 아니라 margin 이라 밑줄/클릭 영역이 글자에만 걸린다. */
    .trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-list > li .terms-agree-link {
        margin-left: 24px;
    }
    /* 피그마 14156:101098 = #2b2b2b (크기 16px/24px/600 은 PC 값과 동일) */
    .trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all .trp.checkbox-box label {
        color: #2b2b2b;
    }
    /* 피그마 14156:101099 = 14px / 20px / 400 / #1fa9a2 */
    .trp.popupfixed-wrap .terms_required_lot .terms_required-article .terms-agree-all .trp.checkbox-box label .font-point {
        color: #1fa9a2;
        line-height: 20px;
    }
}


/*
 * 신청 고객 정보 테이블: 라벨/값 모두 좌측 정렬(PC·모바일 공통).
 * 전역 .info-table th/td 는 text-align:center 인데 그 규칙은 다른 화면에서도 쓰이므로
 * 고치지 않고 이 팝업 하위로만 덮는다.
 */
.trp.popupfixed-wrap .terms_required_lot .info-table th,
.trp.popupfixed-wrap .terms_required_lot .info-table td {
    text-align: left;
}

/*
 * 항목(섹션) 간 여백 32px, 항목 타이틀 하단 여백 12px.
 * 피그마 PC 14151:32886 / 모바일 14156:98511 에서 섹션 y 좌표 간격이 모두 32px,
 * 섹션 안 타이틀(h24) -> 내용(y36) 이 12px 이다. PC 와 모바일 값이 같다.
 *
 * 피그마는 항목마다 Section 으로 묶여 있지만 코드는 .section 하나에 나열돼 있어,
 * 각 항목의 첫 요소가 위쪽 32px 을 담당한다.
 *   유의사항 / 신청 고객 정보 -> h3.popup_mid-title
 *   응찰 예정 LOT           -> .bid-lot_select 안의 h3 (마진이 부모 밖으로 병합된다)
 *   약관                    -> .terms_required-article
 */
.trp.popupfixed-wrap .terms_required_lot .popup_mid-title {
    margin: 32px 0 12px;
}

/* 유의사항은 첫 항목이라 위 여백이 없다 */
.trp.popupfixed-wrap .terms_required_lot .pop-body .section > .popup_mid-title:first-child {
    margin-top: 0;
}

.trp.popupfixed-wrap .terms_required_lot .terms_required-article {
    margin-top: 32px;
}

/*
 * 신청 고객 정보 테이블: 바깥 테두리 + 모서리 라운드.
 * 피그마 Table(14156:96630) = border 1px #e8e8e8 / radius 4px / overflow clip.
 * 라운드는 셀이 아니라 표 컨테이너에 있고, 모서리에서 셀을 잘라내는 구조다.
 *
 * 전역 .info-table 은 border-collapse:collapse 인데 병합된 테두리에는 radius 가
 * 렌더되지 않으므로 separate 로 바꾼다. 그러면 인접 셀 테두리가 2px 로 겹치므로
 * 바깥 테두리는 표가, 칸 사이 구분선은 셀이 오른쪽/아래만 그린다.
 */
.trp.popupfixed-wrap .terms_required_lot .info-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.trp.popupfixed-wrap .terms_required_lot .info-table th,
.trp.popupfixed-wrap .terms_required_lot .info-table td {
    border: 0;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

/* 마지막 열/행의 안쪽 선은 표 바깥 테두리와 겹치므로 지운다 */
.trp.popupfixed-wrap .terms_required_lot .info-table th:last-child,
.trp.popupfixed-wrap .terms_required_lot .info-table td:last-child {
    border-right: 0;
}

.trp.popupfixed-wrap .terms_required_lot .info-table tr:last-child th,
.trp.popupfixed-wrap .terms_required_lot .info-table tr:last-child td {
    border-bottom: 0;
}

/* overflow:hidden 이 table 박스에서 무시되는 경우를 대비한 보강.
   배경색이 있는 건 라벨 셀(th)뿐이라 좌측 두 모서리만 처리하면 된다(4px - 테두리 1px). */
.trp.popupfixed-wrap .terms_required_lot .info-table tr:first-child th:first-child {
    border-top-left-radius: 3px;
}

.trp.popupfixed-wrap .terms_required_lot .info-table tr:last-child th:first-child {
    border-bottom-left-radius: 3px;
}

/*
 * 신청 고객 정보 테이블: 모바일에서 라벨/값 한 쌍씩 세로로 쌓는다.
 * tr 을 2열 그리드로 만들면 4칸 행(고객명·연락처 / 회원ID·이메일)이 자동으로 두 줄로 나뉘고,
 * colspan 을 쓴 2칸 행(기본주소·담당자)은 한 줄이 되어 디자인 순서와 일치한다.
 *   고객명 -> 연락처 -> 회원ID -> 이메일 -> 기본주소 -> 담당자
 * 마크업은 PC 와 공유하므로 건드리지 않는다. PC 는 기존 table 레이아웃 그대로.
 */
@media all and (max-width: 1023px) {
    .trp.popupfixed-wrap .terms_required_lot .info-table,
    .trp.popupfixed-wrap .terms_required_lot .info-table tbody {
        display: block;
    }

    .trp.popupfixed-wrap .terms_required_lot .info-table tr {
        display: grid;
        grid-template-columns: 88px 1fr;
    }

    /* 영문 라벨(Contact Person)이 길어 한 줄에 들어가도록 넓힌다 */
    .trp.popupfixed-wrap .terms_required_lot .info-table:lang(en) tr {
        grid-template-columns: 104px 1fr;
    }

    .trp.popupfixed-wrap .terms_required_lot .info-table th,
    .trp.popupfixed-wrap .terms_required_lot .info-table td {
        display: block;
        /* .info-table.th-wth-60 th 의 width:60px 를 무효화(그리드 트랙이 폭을 정한다) */
        width: auto;
        padding: 10px 12px;
        word-break: break-word;
    }

    /* 모바일은 항상 [라벨|값] 2열이라 값 셀에는 오른쪽 선이 필요 없다.
       4칸 행의 2번째 셀은 오른쪽 열이지만 :last-child 가 아니어서
       공통 규칙만으로는 선이 남는다. */
    .trp.popupfixed-wrap .terms_required_lot .info-table th {
        border-right: 1px solid #e8e8e8;
    }

    .trp.popupfixed-wrap .terms_required_lot .info-table td {
        border-right: 0;
    }
}


/*
 * 팝업 바디 상하 여백. 피그마 PC 14151:32886 = 상단 20px / 하단 64px.
 * 전역 .popup-align.mode-ms .pop-panel .section 은 10px/40px 이라 이 팝업에서만 덮는다.
 * 좌우 40px 은 기존과 동일해 유지한다.
 *
 * min-width 로 감싼다. 모바일 값(12px/14.5px/32px)이 이 파일 앞쪽 미디어쿼리에 있어,
 * 감싸지 않으면 특정도가 같은 이 규칙이 뒤에 온다는 이유로 모바일까지 덮어버린다.
 */
@media all and (min-width: 1024px) {
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel .section {
        padding: 20px 40px 64px;
    }
}

/*
 * 팝업 셸: 헤더/푸터 고정, 본문만 스크롤.
 *
 * 기존에는 높이 제한이 모달 전체가 아니라 .pop-body 에만 걸려 있어서
 * 헤더 높이(PC 약 97px = border 6 + 패딩 60 + 타이틀 31)가 계산에서 빠졌다.
 * 그 결과 모달 전체가 100vh 를 꽉 채워 상하 여백이 0 이 됐고,
 * 모바일에서는 반대로 .pop-panel{min-height:100vh} 와 본문 max-height 의 차이만큼
 * 하단에 빈 공간이 남았다.
 * 패널을 flex column 으로 만들고 본문이 남는 높이를 차지하게 해서 둘 다 해소한다.
 *
 * 다른 팝업에 영향이 가지 않도록 .popup-layer.terms_required_lot 하위로만 한정한다.
 */
.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel {
    display: flex;
    flex-direction: column;
    /* 상하 48px 여백, 최대 1200px. 콘텐츠가 짧으면 그만큼 줄어들도록 height 가 아닌 max-height */
    max-height: min(calc(var(--vh, 1vh) * 100 - 96px), 1200px);
}

.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel .pop-header {
    flex: 0 0 auto;
}

.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel .pop-body.scroll-type {
    flex: 1 1 auto;
    /* flex item 은 min-height:auto 라 내용만큼 늘어나서 스크롤이 생기지 않는다 */
    min-height: 0;
    /* mode-ms 기본값(calc(100vh - 96px))은 패널이 대신 책임지므로 해제 */
    max-height: none;
}

.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer {
    flex: 0 0 auto;
    padding: 20px 40px 30px;
    background: #fff;
}

/* .btn_bottom 이 .terms_required-article 밖으로 나오면서 기존 여백/버튼폭 규칙이
   더 이상 매치되지 않으므로 여기서 다시 지정한다. */
.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer .btn_bottom {
    margin: 0;
}

.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer .btn_set {
    display: flex;
    justify-content: center;
}

.trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer .btn {
    width: 170px;
}

@media all and (max-width: 1023px) {
    /* 모바일은 전체화면(mode-mb_full). 상하 여백 없이 화면 높이에 정확히 맞춰
       하단에 남던 빈 공간을 없앤다. */
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-panel {
        height: calc(var(--vh, 1vh) * 100);
        min-height: 0;
        max-height: none;
    }
    /* 좌우 여백은 .section 과 동일하게(모바일 22px) */
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer {
        padding: 12px 22px 20px;
    }
    /* 피그마 14156:98636 = 16px / 24px / weight 500 / letter-spacing -0.32px.
       .btn 기본값은 600 / line-height 36px 이다. PC 는 기존 유지. */
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer .btn {
        width: 100%;
        padding: 12px;
        border-radius: 4px;
    }
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer .btn,
    .trp.popupfixed-wrap .popup-align.mode-ms .popup-layer.terms_required_lot .pop-footer .btn span {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.32px;
    }
}


/*
 * 유의사항 목록: 타이틀 아래 구분선 제거(피그마에 없음).
 * renewal/popup.css 의 .content-list-line{border-top:1px solid #ccc} 가 그리던 선이다.
 * 항목 사이 선은 마크업의 li.no-line 이 이미 없애고 있어 상단 테두리만 남아 있었다.
 * 전역 규칙은 다른 팝업에서도 쓰이므로 고치지 않고 이 팝업 하위로만 덮는다.
 */
.trp.popupfixed-wrap .terms_required_lot .content-list-line {
    border-top: 0;
    /* 좌우 여백은 기존 값(5px)을 유지해 불릿 들여쓰기를 그대로 둔다.
       타이틀 하단 12px 은 h3 의 margin-bottom 이 담당하므로 위쪽 여백은 두지 않는다. */
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/*
 * 유의사항 항목: 피그마(14156:96626) 기준 14px / line-height 22px / #575757.
 * 기존에는 li 상하 패딩 8px + line-height 1.4 라 항목 간격이 과했다.
 * 항목 사이 간격은 피그마에 명시가 없어 4px 로 둔다(줄바꿈된 줄 간격과 구분되는 최소값).
 */
.trp.popupfixed-wrap .terms_required_lot .content-list-line li,
.trp.popupfixed-wrap .terms_required_lot .content-list-line li.no-line {
    padding-top: 0;
    padding-bottom: 0;
    color: #575757;
    font-size: 14px;
    line-height: 22px;
}

.trp.popupfixed-wrap .terms_required_lot .content-list-line li + li {
    margin-top: 4px;
}

/* 불릿은 전역 규칙에서 color:#d9d9d9 로 고정돼 있어 li 의 색을 상속받지 못했다.
   피그마는 list-disc 마커라 본문 색을 그대로 따르므로 상속으로 되돌린다. */
.trp.popupfixed-wrap .terms_required_lot .content-list-line li:before {
    color: inherit;
}


/*
 * 닫기 버튼 위치.
 *
 * 가로: 기존 .btn_close 는 width:24px + box-sizing:border-box 에 padding-right:45px 이라
 *   콘텐츠 박스가 0 으로 눌리고 아이콘(::after 24x24)이 그 왼쪽으로 넘쳐 그려진다.
 *   그래서 아이콘 우측 끝이 패널 가장자리에서 21px(45-24) 이었다.
 *   패딩 대신 마진으로 바꿔 본문 섹션 콘텐츠의 우측 끝에 맞춘다.
 *   헤더는 스크롤 영역(.pop-body) 밖이라 패널 전체 폭을 쓰는 반면, 본문 콘텐츠는
 *   세로 스크롤바만큼 더 안쪽에서 끝난다. 그래서 스크롤바 폭까지 더해야 한다.
 *     PC   : 섹션 패딩 40px   + 본문 스크롤바 5px = 45px
 *     모바일: 섹션 패딩 14.5px + 본문 스크롤바 5px = 19.5px
 *   (스크롤바 폭은 pages_global.css 의 body .scroll-type::-webkit-scrollbar)
 *
 * 세로: 헤더가 align-items:center 라 버튼은 title-box '박스' 기준 중앙에 놓인다.
 *   그런데 title-box 의 상/하 패딩이 비대칭(PC 40/20)이라 타이틀 '텍스트' 중앙은
 *   박스 중앙보다 10px 아래다. 상-하 패딩 차이(20px)만큼 margin-top 을 주면
 *   마진 포함 박스가 중앙 정렬되면서 그 절반인 10px 만 내려가 텍스트 중앙과 일치한다.
 *     PC   : title-box 40/20 -> margin-top 20px
 *     모바일: title-box 25/10 -> margin-top 15px
 */
.trp.popupfixed-wrap .terms_required_lot .pop-panel .pop-header .btn_close {
    padding: 0;
    margin: 20px 45px 0 0;
}

@media all and (max-width: 1023px) {
    /* 세로: margin-top = title-box 상단패딩 - 하단패딩 = 28 - 24 = 4px
       가로: 섹션 좌우 22px + 본문 스크롤바 5px = 27px */
    .trp.popupfixed-wrap .terms_required_lot .pop-panel .pop-header .btn_close {
        margin: 4px 27px 0 0;
    }
}