@charset "utf-8";
/* =====================================================================
 * MAPS 온라인 문의양식 스타일 (PC / 모바일 공용)
 *   PC     : skin/board/qa/write.skin.php
 *   모바일  : theme/basic/mobile/skin/board/qa/write.skin.php
 *
 * PC   : 좌측 라벨 / 우측 입력의 2단 레이아웃
 * 모바일 : 라벨 위 · 입력 아래의 1단 레이아웃 (760px 이하)
 *
 * 게시판 기본 style.css 와 충돌하지 않도록 모든 규칙을 .mps-form 하위로
 * 한정했습니다.
 * ===================================================================== */

#bo_w .mps-form { width: 100%; max-width: 880px; margin: 0 auto; text-align: left; }

/* =====================================================================
 * 1. 필드 한 줄 — PC 2단 그리드
 * ===================================================================== */
#bo_w .mps-form .mps-field {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid #eceff2;
}
#bo_w .mps-form .mps-field:first-of-type { padding-top: 0; }

/* 수수료 박스처럼 폭 전체를 쓰는 필드 */
#bo_w .mps-form .mps-field-wide {
    display: block;
    padding: 20px 0;
}

#bo_w .mps-form .mps-label {
    display: block;
    width: auto;
    float: none;
    margin: 0;
    padding-top: 12px;
    font-size: 15.5px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.4px;
    line-height: 1.4;
    word-break: keep-all;
}
#bo_w .mps-form .mps-body { min-width: 0; }

.mps-req { color: #d63a3a; font-weight: 700; }
.mps-sub { font-size: 13px; font-weight: 400; color: #8b949c; letter-spacing: 0; }

#bo_w .mps-form .mps-help {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #7b848c;
    word-break: keep-all;
}
#bo_w .mps-form .mps-help b.mps-req { color: #d63a3a; font-weight: 600; }

/* =====================================================================
 * 2. 입력 요소 (게시판 기본 CSS 덮어쓰기)
 * ===================================================================== */
#bo_w .mps-form .frm_input,
#bo_w .mps-form input[type="text"],
#bo_w .mps-form input[type="tel"],
#bo_w .mps-form input[type="email"],
#bo_w .mps-form input[type="date"],
#bo_w .mps-form select {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    font-size: 15px;
    color: #222;
    background: #fff;
    box-sizing: border-box;
    float: none;
    margin: 0;
    letter-spacing: -0.2px;
    font-family: inherit;
}
#bo_w .mps-form .frm_input:focus,
#bo_w .mps-form select:focus { border-color: #2a72b5; outline: none; }
/* 게시판 기본 style.css 에 `input::placeholder{color:#fff}` 전역 규칙이 있어
   안내문구가 흰색으로 사라집니다. 폼 안에서는 전부 되돌립니다. */
#bo_w .mps-form input::placeholder,
#bo_w .mps-form textarea::placeholder { color: #b3bcc4 !important; }
#bo_w .mps-form input::-webkit-input-placeholder { color: #b3bcc4 !important; }
#bo_w .mps-form input:-ms-input-placeholder { color: #b3bcc4 !important; }
#bo_w .mps-form input + input,
#bo_w .mps-form select + input { margin-top: 8px; }

/* =====================================================================
 * 3. 주소검색
 * ===================================================================== */
#bo_w .mps-form .mps-addr-row { display: flex; gap: 8px; }
#bo_w .mps-form .mps-addr-row .frm_input {
    flex: 1 1 auto; width: auto; background: #f7f9fa; cursor: pointer; margin: 0;
}
#bo_w .mps-form .mps-addr-btn {
    flex: 0 0 104px;
    height: 46px;
    background: #2a72b5;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.5px;
}
#bo_w .mps-form .mps-addr-btn:hover { background: #225d94; }
#bo_w .mps-form .mps-addr-row + .frm_input { margin-top: 8px; }

/* =====================================================================
 * 4. 예상 감정평가액 · 예상 순수수료
 * ===================================================================== */
#bo_w .mps-form .mps-fee-box {
    background: #f5f8fb;
    border: 1px solid #dce6ef;
    border-radius: 6px;
    padding: 20px 22px 18px;
}
#bo_w .mps-form .mps-fee-title {
    margin: 0 0 14px;
    font-size: 15.5px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.4px;
}

/* 두 입력칸의 세로 정렬 — 캡션 높이를 24px 로 고정해 기준선을 맞춥니다 */
#bo_w .mps-form .mps-fee-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: start;
}
#bo_w .mps-form .mps-fee-cell { min-width: 0; }
#bo_w .mps-form .mps-fee-cap {
    display: block;
    height: 24px;
    line-height: 24px;
    margin: 0 0 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #55606a;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
}
#bo_w .mps-form .mps-fee-arrow {
    align-self: start;
    height: 46px;
    margin-top: 31px;      /* 캡션 24px + 여백 7px */
    line-height: 46px;
    text-align: center;
    color: #a8bccd;
    font-size: 14px;
}
#bo_w .mps-form .mps-inputwon { position: relative; }
#bo_w .mps-form .mps-inputwon .frm_input {
    padding-right: 36px;
    text-align: right;
    margin: 0;
}
#bo_w .mps-form .mps-inputwon .mps-won {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #8b949c;
    pointer-events: none;
}
#bo_w .mps-form .mps-fee-out .frm_input {
    background: #fff;
    border-color: #2a72b5;
    color: #1b4f80;
    font-weight: 700;
    font-size: 17px;
}
#bo_w .mps-form .mps-fee-note {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: #2a72b5;
    letter-spacing: -0.3px;
    text-align: right;
}
.mps-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    background: #d63a3a;
    color: #fff;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
    letter-spacing: 0;
}
#bo_w .mps-form .mps-fee-caution {
    display: block;
    width: 100%;
    margin: 15px 0 0;
    padding-top: 13px;
    border-top: 1px solid #e3ebf2;
    font-size: 12.5px;
    line-height: 1.7;
    color: #7b848c;
    letter-spacing: -0.3px;
    word-break: keep-all;
}

/* =====================================================================
 * 5. 기준시점
 * ===================================================================== */
#bo_w .mps-form .mps-basis-extra { margin-top: 8px; }

/* =====================================================================
 * 6. 첨부파일
 * ===================================================================== */
#bo_w .mps-form .mps-file .file_input_div {
    position: relative;
    display: flex;
    gap: 8px;
    margin: 0;
}
#bo_w .mps-form .mps-file .file_input_textbox {
    flex: 1 1 auto;
    width: auto;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    font-size: 15px;
    background: #f7f9fa;
    box-sizing: border-box;
    margin: 0;
}
#bo_w .mps-form .mps-file .file_input_btn {
    flex: 0 0 104px;
    height: 46px;
    line-height: 46px;
    background: #6c7a86;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.5px;
}
#bo_w .mps-form .mps-file .file_input_hidden {
    position: absolute;
    right: 0;
    top: 0;
    width: 104px;
    height: 46px;
    opacity: 0;
    cursor: pointer;
}
#bo_w .mps-form .mps-file input[name="bf_content[]"] { margin-top: 8px; }
#bo_w .mps-form .mps-file .file_del { display: block; margin-top: 7px; font-size: 13px; color: #7b848c; }
#bo_w .mps-form .mps-file .file_del input[type="checkbox"] { width: auto; height: auto; display: inline; }

/* =====================================================================
 * 7. 문의내용
 * ===================================================================== */
#bo_w .mps-form .wr_content {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    float: none;
}
#bo_w .mps-form .wr_content textarea,
#bo_w .mps-form textarea#wr_content {
    width: 100%;
    min-height: 150px;
    padding: 13px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.65;
    color: #222;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}
#bo_w .mps-form .wr_content textarea:focus { border-color: #2a72b5; outline: none; }
#bo_w .mps-form #char_count_desc { margin: 0 0 6px; font-size: 12.5px; color: #7b848c; }
#bo_w .mps-form #char_count_wrap { margin-top: 6px; font-size: 13px; color: #8b949c; text-align: right; }

/* =====================================================================
 * 8. 개인정보 동의
 * ===================================================================== */
#bo_w .mps-form .mps-privacy {
    margin: 28px 0 0;
    background: #f5f7f9;
    border: 1px solid #e4e8ec;
    border-radius: 5px;
    padding: 18px 20px;
    font-size: 13px;
    line-height: 1.75;
    color: #5c666f;
}
#bo_w .mps-form .mps-privacy > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 14.5px;
    color: #333;
}
#bo_w .mps-form .mps-privacy > p { margin: 0 0 12px; word-break: keep-all; }
#bo_w .mps-form .mps-privacy .mps-agree {
    display: block;
    padding-top: 12px;
    border-top: 1px solid #e4e8ec;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
#bo_w .mps-form .mps-privacy input[type="checkbox"] {
    width: 16px !important;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 6px;
}

/* =====================================================================
 * 9. 제출
 * ===================================================================== */
#bo_w .mps-form .mps-submit { margin-top: 28px; text-align: center; }

/* 게시판 기본 style.css 의 `#bo_w .btn_submit{padding:25px 45px;line-height:0}` 이
   글자를 아래로 밀어내므로, 높이를 고정하고 세로 padding 을 0 으로 되돌립니다.
   input 요소는 높이만 주면 브라우저가 글자를 세로 중앙에 배치합니다. */
#bo_w .mps-form .mps-submit .btn_submit {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    height: 54px;
    padding: 0 60px !important;
    line-height: normal !important;
    font-size: 17px;
    font-weight: 600;
    background: #146297;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: -0.5px;
    vertical-align: middle;
    transition: background .15s ease;
}
#bo_w .mps-form .mps-submit .btn_submit:hover { background: #0f4e79; }
#bo_w .mps-form .mps-submit a {
    display: inline-block;
    box-sizing: border-box;
    height: 54px;
    line-height: 54px;
    padding: 0 28px;
    margin-left: 6px;
    background: #6c7a86;
    color: #fff;
    vertical-align: middle;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
}

/* =====================================================================
 * 10. 모바일 (760px 이하) — 1단 스택
 * ===================================================================== */
@media (max-width: 760px) {
    #bo_w .mps-form { max-width: 100%; }

    #bo_w .mps-form .mps-field {
        display: block;
        padding: 14px 0;
    }
    #bo_w .mps-form .mps-label {
        margin: 0 0 8px;
        padding-top: 0;
        font-size: 15px;
    }
    #bo_w .mps-form .mps-field-wide { padding: 16px 0; }

    #bo_w .mps-form .frm_input,
    #bo_w .mps-form input[type="text"],
    #bo_w .mps-form input[type="tel"],
    #bo_w .mps-form input[type="email"],
    #bo_w .mps-form input[type="date"],
    #bo_w .mps-form select { height: 46px; font-size: 15px; }

    #bo_w .mps-form .mps-addr-btn { flex: 0 0 88px; height: 46px; font-size: 14px; }

    #bo_w .mps-form .mps-fee-box { padding: 16px 14px 14px; }
    #bo_w .mps-form .mps-fee-title { margin-bottom: 12px; font-size: 15px; }
    #bo_w .mps-form .mps-fee-grid { display: block; }
    #bo_w .mps-form .mps-fee-cap { height: auto; line-height: 1.5; white-space: normal; }
    #bo_w .mps-form .mps-fee-arrow { display: none; }
    #bo_w .mps-form .mps-fee-out { margin-top: 14px; }
    #bo_w .mps-form .mps-fee-note { text-align: left; }

    #bo_w .mps-form .mps-file .file_input_btn,
    #bo_w .mps-form .mps-file .file_input_hidden { flex-basis: 88px; width: 88px; }

    #bo_w .mps-form .mps-privacy { padding: 15px 13px; font-size: 12.5px; }
    #bo_w .mps-form .mps-submit .btn_submit {
        width: 100%;
        height: 52px;
        padding: 0 !important;
        line-height: normal !important;
        font-size: 16px;
    }
    #bo_w .mps-form .mps-submit a {
        display: block;
        width: 100%;
        height: 52px;
        line-height: 52px;
        padding: 0;
        margin: 8px 0 0;
        text-align: center;
    }
}