/* 파트너 등록신청 랜딩(PC) 전용 스타일
   - web/css/popup.css 는 8개 페이지가 공유하므로 수정하지 않고 여기서만 덮어쓴다.
   - Pretendard 는 web_base 가 로드하는 renewal_main.css 에서 이미 import 된다. */

/* 한글은 기본값(normal)에서 글자 단위로 끊겨 마지막 한 글자만 다음 줄로 떨어진다.
   keep-all 로 어절 단위 개행을 강제하고, 긴 단어는 break-word 로 흘려보낸다. */
body,
.lp-wrap {
    word-break: keep-all;
    overflow-wrap: break-word;
}

:root {
    --cb-purple: #6031CD;
    --cb-purple-bg: #EDE8FF;
    --cb-purple-bg-light: #F4F0FF;
    --cb-purple-line: #DDD3F5;
    --cb-pink-bg: #FFE9EF;
    --cb-pink-text: #8A3E4E;
    --cb-gift-bg: #FFF6E9;
    --cb-gift-text: #8A6120;
    --cb-green: #0F8E66;
    --cb-green-bg: #E4F7EF;
    --cb-ink: #1A1A2E;
    --cb-body: #55555F;
    --cb-sub: #6A6A74;
    --cb-warm-bg: #F7F6F3;
    --cb-warm-line: #E8E6E0;
    --cb-mute: #9A9AA4;

    /* 여백 스케일 — 이 5개만 쓴다. 새 중간값을 만들지 말 것. (모바일과 같은 역할, PC 배율)
       --sp-lead 는 모바일에서 group(20) 과 block(32) 의 2/3 지점인 28px 이라
       PC 에서도 group(28) 과 block(44) 의 같은 지점인 40px 으로 둔다. */
    --sp-tight: 10px;    /* 딱 붙는 것 (CTA ↔ 혜택 띠) */
    --sp-group: 28px;    /* 한 덩어리 안 (제목 ↔ 본문) */
    --sp-lead: 40px;     /* 도입부 ↔ 본문 (블록보다 좁고 그룹보다 넓은 자리) */
    --sp-block: 44px;    /* 덩어리 사이 (서브카피 ↔ CTA) */
    --sp-section: 96px;  /* 섹션 상하 */
}

.lp-wrap {
    background: #fff;
    color: var(--cb-ink);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}

.lp-wrap *,
.modal-partner * {
    box-sizing: border-box;
}

/* p 기본 margin 리셋. :where() 로 특이도를 0 으로 만들어
   .lp-hero-sub 같은 컴포넌트 클래스가 덮어쓸 수 있게 한다.
   (.lp-wrap p 로 두면 특이도가 더 높아 클래스의 margin 이 전부 무시된다) */
.lp-wrap :where(p) {
    margin: 0;
}

.lp-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lp-wrap .inner {
    /* style.css 의 `header .inner { width: 1260px }` 를 덮는다.
       width 를 명시하지 않으면 1120px 로 고정되어 좁은 화면에서 가로로 넘친다. */
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ===== 헤더 ===== */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #F0EEF7;
}

.lp-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 76px;
}

.lp-logo {
    display: block;
    height: 26px;
    width: auto;
}

.lp-header-right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.lp-header-tel {
    font-size: 15px;
    font-weight: 500;
    color: var(--cb-body);
    text-decoration: none;
    white-space: nowrap;
}

.lp-header-tel b {
    font-weight: 700;
    color: var(--cb-ink);
}

/* PC 헤더는 채움 유지 (모바일만 테두리형) */
.lp-header-cta {
    flex-shrink: 0;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--cb-purple);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* ===== 히어로 ===== */
.lp-hero .inner {
    display: flex;
    align-items: center;
    gap: 64px;
    padding-top: 84px;
    padding-bottom: 92px;
}

.lp-hero-copy {
    flex: 1.1;
    min-width: 0;
}

.lp-hero-visual {
    flex: 0.9;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.lp-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cb-pink-text);
    background: var(--cb-pink-bg);
    padding: 8px 15px;
    border-radius: 20px;
    margin-bottom: var(--sp-group);
}

.lp-hero h2 {
    font-size: 48px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -1.8px;
    /* 예외: 헤드라인과 서브는 한 덩어리라 --sp-group 보다 더 붙인다 (모바일 12px 과 같은 역할) */
    margin: 0 0 16px;
    color: var(--cb-ink);
}

.lp-hero-sub {
    font-size: 19px;
    font-weight: 500;
    color: var(--cb-body);
    line-height: 1.6;
    margin: 0 0 var(--sp-block);
}

.lp-hero-btns {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    /* CTA 와 혜택 띠가 한 덩어리로 읽혀야 한다 */
    margin-bottom: var(--sp-tight);
}

.lp-btn-primary {
    display: inline-block;
    border: 0;
    text-decoration: none;
    background: var(--cb-purple);
    color: #fff;
    padding: 19px 40px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
}

.lp-btn-tel {
    display: inline-block;
    text-decoration: none;
    border: 2px solid var(--cb-purple-line);
    background: #fff;
    color: var(--cb-purple);
    padding: 17px 26px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
}

/* ===== 첫 가입 혜택 띠 (CTA 행 아래) ===== */
.lp-gift {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* 배경색만으로 충분해서 테두리를 뺀다 (선 개수 줄이기) */
    background: var(--cb-gift-bg);
    border-radius: 12px;
    padding: 14px 18px;
}

.lp-gift-icon {
    width: 20px;
    height: 20px;
    color: var(--cb-gift-text);
    flex-shrink: 0;
}

.lp-gift p {
    font-size: 16px;
    font-weight: 700;
    color: var(--cb-gift-text);
}

/* ===== 히어로 파트너앱 캡처 (3단계 .app-shot 과 역할이 다름) =====
   장식 없이 캡처가 선명하게 보이는 것만 목표로 한다. */
.app-frame {
    width: 270px;
    border: 1px solid var(--cb-warm-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.08);
}

.app-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== 공통 섹션 =====
   흰색 → 웜그레이 → 흰색 → 웜그레이 → 보라(최종 CTA)로 번갈아 깔아
   섹션 경계를 선 없이 만든다. */
.lp-section .inner {
    padding-top: var(--sp-section);
    padding-bottom: var(--sp-section);
}

.lp-section.warm {
    background: var(--cb-warm-bg);
    border-top: 1px solid #EDEBE5;
}

.lp-section h3 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -1.4px;
    margin: 0 0 var(--sp-tight);
    color: var(--cb-ink);
}

/* 부제가 없는 섹션은 제목이 부제 몫의 간격까지 가진다 */
.lp-section h3.solo {
    margin-bottom: var(--sp-lead);
}

.lp-section-sub {
    font-size: 18px;
    font-weight: 500;
    color: var(--cb-sub);
    line-height: 1.6;
    text-align: center;
    margin: 0 0 var(--sp-lead);
}

/* ===== 1~3단계 (가로 3열) ===== */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* 웜그레이 섹션 위의 흰 카드라 테두리 없이도 저절로 구분된다.
   3열은 grid stretch 로 카드 높이가 같아지는데, 2번 카드(청소인원 포함)가 가장 길어
   1·3번 카드 아래에 흰 여백이 크게 남는다. 앱 화면이 남는 높이를 먹게 해서 메운다. */
.lp-step {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    padding: 30px 26px;
}

.lp-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-tight);
}

.lp-step-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--cb-purple);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-step-num.green {
    background: var(--cb-green);
}

.lp-step-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* min-height 로 설명 길이가 달라도 3열 카드 높이를 맞춘다 */
.lp-step-desc {
    font-size: 16px;
    font-weight: 500;
    color: var(--cb-body);
    line-height: 1.6;
    margin: 0 0 var(--sp-group);
    min-height: 52px;
}

/* ===== 앱 화면 조각 (프레임 없음) =====
   흰 카드(.lp-step) 안이라 배경을 한 톤 깔고, 그 위에 다시 흰 카드를 올린다.
   선을 쓰지 않고 색 대비만으로 구분해 테두리 중첩을 없앤다. */
.app-shot {
    /* .lp-step 의 남는 높이를 채운다 (1열이 되면 남는 높이가 없어 저절로 무효) */
    flex: 1;
    border-radius: 14px;
    background: var(--cb-warm-bg);
    padding: 14px;
}

.app-shot-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--cb-mute);
    /* 예외: 라벨과 카드 묶음 사이. --sp-tight(10) 과 거의 같지만 모바일과 값을 맞춘다 */
    margin: 0 0 10px;
    padding-left: 2px;
}

.app-card {
    background: #fff;
    border-radius: 10px;
    padding: 13px;
    /* 예외: 같은 종류 카드가 이어지는 간격 */
    margin-bottom: 9px;
}

.app-card:last-child {
    margin-bottom: 0;
}

/* 목록이 이어진다는 걸 공간 낭비 없이 보여준다. 카드 윗부분만 남기고 잘라내되,
   단면이 딱딱해지지 않게 마스크로 흐린다. (max-height 는 여백이 아닌 크기 제한) */
.app-card.cut {
    /* 2번 카드의 앱 화면 높이에 맞춘 값. NEW(13~26px)는 온전히 보이고
       제목부터 흐려지며 잘린다. "더 있다" 신호는 남기되 높이는 2번에 맞춘다. */
    max-height: 40px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
}

.app-new {
    font-size: 11px;
    font-weight: 700;
    color: var(--cb-purple);
    margin: 0 0 5px;
}

.app-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.app-meta {
    font-size: 13px;
    color: var(--cb-sub);
}

.app-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--cb-sub);
    margin: 0 0 8px;
}

/* 보라 테두리는 "입력 필드"라는 신호라 유일하게 남긴다 */
.app-price {
    background: #fff;
    border: 1.5px solid var(--cb-purple);
    border-radius: 10px;
    padding: 13px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-price b {
    font-size: 19px;
    font-weight: 700;
}

.app-price span {
    font-size: 15px;
    font-weight: 500;
    color: var(--cb-sub);
}

/* 청소인원 선택 버튼. gap 은 .lp-tags 와 같은 값을 쓴다 */
.app-people {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    /* 예외: .app-price 와 같은 입력 항목 간격 */
    margin-bottom: 12px;
}

.app-person {
    padding: 9px 0;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--cb-warm-bg);
    color: var(--cb-mute);
}

/* 선택된 인원. .app-price 와 같은 보라 테두리가 "지금 고른 값" 신호다.
   border 대신 inset box-shadow 를 쓰면 높이가 밀리지 않아 3칸이 어긋나지 않는다. */
.app-person.on {
    background: var(--cb-purple-bg-light);
    color: var(--cb-purple);
    box-shadow: inset 0 0 0 1.5px var(--cb-purple);
}

.app-btn {
    background: var(--cb-purple);
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
}

.app-chip {
    display: inline-block;
    background: var(--cb-green-bg);
    color: var(--cb-green);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 6px;
    /* 예외: 칩과 제목 사이. --sp-tight(10) 이면 칩이 제목에 달라붙는다 */
    margin-bottom: 10px;
}

.app-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    margin: 0;
    border-top: 1px solid #F0EEE9;
}

.app-row dt {
    font-size: 14px;
    font-weight: 500;
    color: var(--cb-sub);
    margin: 0;
}

.app-row dd {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.app-row dd.purple {
    color: var(--cb-purple);
}

/* ===== 부담 없이 시작하세요 (가로 3열) =====
   앞뒤 섹션이 웜그레이라 여기는 흰 배경 + 테두리 카드로 간다.
   (섹션 컨테이너는 .lp-section 을 그대로 쓰고 제목에 .solo 를 붙인다) */
/* stretch(기본값)로 두어 3번 카드(태그 포함)의 높이에 1·2번이 맞춰진다.
   .lp-step 과 같은 방식이지만 여기는 남는 높이를 먹일 요소가 없어 그냥 여백으로 둔다. */
.lp-easy-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.lp-easy-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cb-warm-line);
    border-radius: 20px;
    padding: 28px 24px;
}

/* 아이콘 좌측 + 텍스트 우측 (모바일과 같은 가로 배치) */
.lp-easy-head {
    display: flex;
    gap: 16px;
    align-items: center;
}

.lp-easy-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    flex-shrink: 0;
    padding: 13px;
    background: var(--cb-purple-bg);
    color: var(--cb-purple);
}

.lp-easy-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
    /* 예외: 제목과 한 줄 설명은 붙은 쌍이라 --sp-tight 보다도 작다 */
    margin: 0 0 3px;
}

.lp-easy-desc {
    font-size: 15px;
    font-weight: 500;
    color: var(--cb-sub);
}

/* 배지는 기본적으로 내용 폭만 차지한다 (1개짜리 카드가 3등분 칸에 혼자 들어가면 어색).
   3개짜리만 .split3 으로 균등 분할해 폭에 따라 어디서 넘어갈지 모르는 일을 막는다. */
.lp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* 예외: 카드 안에서 텍스트 덩어리와 배지를 띄운다 */
    margin-top: 20px;
}

.lp-tags.split3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.lp-tag {
    font-size: 14px;
    font-weight: 700;
    color: var(--cb-purple);
    background: var(--cb-purple-bg-light);
    padding: 10px 16px;
    border-radius: 8px;
    text-align: center;
}

/* ===== FAQ ===== */
.lp-faq-list {
    max-width: 780px;
    margin: 0 auto;
    border-top: 1px solid var(--cb-warm-line);
}

.lp-faq-item {
    border-bottom: 1px solid var(--cb-warm-line);
}

.lp-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 26px 6px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cb-ink);
}

.lp-faq-q::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 8px;
    border-right: 2px solid #8C8C96;
    border-bottom: 2px solid #8C8C96;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.lp-faq-item.open .lp-faq-q {
    font-weight: 700;
    color: var(--cb-purple);
}

.lp-faq-item.open .lp-faq-q::after {
    border-color: var(--cb-purple);
    margin-top: 14px;
    transform: rotate(225deg);
}

.lp-faq-a {
    display: none;
    font-size: 17px;
    font-weight: 500;
    color: var(--cb-body);
    line-height: 1.85;
    margin: 0 6px var(--sp-group);
    /* 섹션이 웜그레이가 되므로 답변 박스는 흰색으로 뒤집는다 (회색 위 회색 방지) */
    background: #fff;
    padding: 24px;
    border-radius: 12px;
}

.lp-faq-item.open .lp-faq-a {
    display: block;
}

/* ===== 최종 CTA ===== */
.lp-final {
    background: var(--cb-purple);
    text-align: center;
}

.lp-final .inner {
    padding-top: 84px;
    padding-bottom: 84px;
}

.lp-final h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -1.2px;
    margin: 0 0 var(--sp-tight);
}

.lp-final p {
    font-size: 18px;
    font-weight: 500;
    color: #D8CCFA;
    margin: 0 0 var(--sp-block);
}

.lp-btn-white {
    display: inline-block;
    border: 0;
    text-decoration: none;
    background: #fff;
    color: var(--cb-purple);
    padding: 19px 46px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== 반응형 하한 방어 (태블릿 전용 디자인은 범위 밖) ===== */
@media (max-width: 1024px) {
    .lp-wrap .inner { padding: 0 28px; }

    .lp-hero .inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 44px;
        padding-top: 60px;
        padding-bottom: 64px;
    }
    .lp-hero-visual { width: 100%; }
    .lp-hero h2 { font-size: 36px; letter-spacing: -1.2px; }
    .lp-hero-sub { font-size: 17px; }

    .lp-section .inner { padding-top: 68px; padding-bottom: 68px; }
    .lp-section h3 { font-size: 30px; letter-spacing: -1px; }
    /* 1열로 접히면 도입부 간격도 같이 줄인다 (--sp-lead 의 1024px 대응값) */
    .lp-section h3.solo,
    .lp-section-sub { margin-bottom: 36px; }
    .lp-section-sub { font-size: 16px; }

    /* 1열이 되면 카드마다 설명 길이가 달라도 높이를 맞출 이유가 없고,
       폭이 넓어 한 줄에 들어가므로 3열용 고정 줄바꿈도 푼다 */
    .lp-steps { grid-template-columns: 1fr; }
    .lp-step-desc { min-height: 0; }
    .lp-step-desc br { display: none; }
    .lp-easy-cards { grid-template-columns: 1fr; }

    .lp-final h3 { font-size: 28px; }
}

/* ===================================================================
   가입신청 모달 (.modal-partner.modalpopup)
   클래스명은 랜딩 전용 JS(popup.js)가 참조하므로 그대로 두고,
   web/css/popup.css 의 스타일만 여기서 덮어쓴다. (popup.css 는 8개 페이지 공유 — 수정 금지)
   =================================================================== */

.modal-partner.modalpopup {
    background-color: rgba(26, 26, 46, 0.45);
    /* 모달 끝까지 스크롤한 뒤 계속 굴리면 배경으로 넘어가는 스크롤 체이닝을 막는다.
       PC 는 popup.js 가 body 를 잠그지 않으므로(scroll-lock 없음) 이 한 줄이 필요하다.
       모바일과 달리 position:fixed·스크롤 복원 로직은 필요 없다. */
    overscroll-behavior: contain;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--cb-ink);
}

.modal-partner .inner {
    width: 640px;
    max-width: calc(100% - 40px);
    margin: 60px auto;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* --- 닫기 버튼 --- */
.modal-partner .inner .modal_close {
    position: absolute;
    top: 26px;
    right: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.modal-partner .inner .modal_close img {
    width: 17px;
    height: auto;
}

/* --- 제목 --- */
.modal-partner .inner section {
    padding: 34px 40px 40px;
}

.modal-partner .inner h3 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cb-ink);
    padding: 0 0 26px;
    margin: 0;
}

.modal-partner .inner h3 span {
    color: var(--cb-purple);
    letter-spacing: -0.3px;
}

/* --- 라벨 --- */
.modal-partner .inputbox label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cb-ink);
    padding: 0;
    margin-bottom: 9px;
}

/* --- 입력 필드 --- */
.modal-partner .inputbox input,
.modal-partner .inputbox select,
.modal-partner select,
.modal-partner input[type="number"] {
    width: 100%;
    height: 54px;
    line-height: normal;
    padding: 0 16px;
    border: 1px solid #DCD8E8;
    border-bottom: 1px solid #DCD8E8;
    border-radius: 10px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--cb-ink);
}

.modal-partner .inputbox input::placeholder {
    color: #8A8A94;
    font-weight: 500;
}

.modal-partner .inputbox input:focus,
.modal-partner .inputbox select:focus {
    outline: none;
    border-color: var(--cb-purple);
    box-shadow: 0 0 0 3px rgba(96, 49, 205, 0.12);
}

/* select 화살표 (선택 전 글자색은 옅게, 선택 후에도 읽히는 회색) */
.modal-partner .inputbox select,
.modal-partner select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    color: #77777F;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 19px auto;
}

/* --- 2열 / 3열 배치 (float 제거) --- */
.modal-partner .inputbox .inputList,
.modal-partner .selectList .select_business_area ul,
.modal-partner .inputList2 {
    display: grid;
    gap: 18px;
    padding-bottom: 22px;
    margin: 0;
    list-style: none;
}

.modal-partner .inputbox .inputList,
.modal-partner .selectList .select_business_area ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-partner .inputList2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 0;
}

.modal-partner .inputbox .inputList li,
.modal-partner .selectList .select_business_area ul li,
.modal-partner .inputList2 li {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.modal-partner .inputbox .inputList li input,
.modal-partner .selectList .select_business_area ul li select {
    width: 100%;
}

.modal-partner .selectList {
    padding-bottom: 0;
}

.modal-partner .selectList .select_business_area > label {
    margin-bottom: 9px;
}

/* --- 약관 동의: label 전체가 클릭 영역 --- */
.modal-partner .step_check {
    display: flex;
    align-items: center;
    padding-top: 28px;
    line-height: normal;
    font-size: 15px;
    color: var(--cb-body);
}

.modal-partner .step_check .right {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-partner .step_check input[type="checkbox"] {
    position: static;
    opacity: 1;
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--cb-purple);
}

/* popup.css 가 체크박스를 가상요소로 그리던 것을 무효화 */
.modal-partner .step_check input[type="checkbox"] + label::before,
.modal-partner .step_check input[type="checkbox"] + label::after,
.modal-partner .step_check input[type="checkbox"]:checked + label::before,
.modal-partner .step_check input[type="checkbox"]:checked + label::after {
    content: none;
}

.modal-partner .step_check input[type="checkbox"] + label {
    padding-left: 0;
    position: static;
    display: flex;
    align-items: center;
    min-height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--cb-body);
}

/* --- 제출 버튼: 히어로 CTA 와 동일한 톤 --- */
.modal-partner .step_arrow {
    padding-top: 24px;
}

.modal-partner .step_arrow .applyStep {
    float: none;
    width: 100%;
    height: auto;
    line-height: normal;
    padding: 19px;
    border: 0;
    border-radius: 12px;
    background-color: var(--cb-purple);
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .modal-partner .inner { margin: 30px auto; }
    .modal-partner .inner section { padding: 28px 24px 30px; }
    .modal-partner .inputList2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}