/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); */
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);


/* ============================================================
   BLUETRAVEL 맞춤 컨설팅 - 공통 레이아웃
   /consult/application/css/consult-common.css

   [테마 컬러]
   --b24-blue 계열: 기본 텍스트, 배경, 보더
   --consult 계열: CTA 버튼, 강조, 액센트
   ============================================================ */

:root {
    --b24-blue: #13469b;
    --b24-blue1: #051227;
    --b24-blue2: #081F44;
    --b24-blue3: #0C2C61;
    --b24-blue4: #0F3A7E;
    --b24-blue5: #1654B9;
    --b24-blue6: #1A62D6;
    --b24-blue-80: #3561a9;
    --b24-blue-60: #6788be;
    --b24-blue-40: #9ab0d4;
    --b24-blue-20: #ccd7e9;

    --consult: #ef770d;
    /* --consult-bg: linear-gradient(122deg, rgba(163, 81, 10, 1) 0%, rgba(239, 119, 13, 1) 55%, rgb(255, 164, 86) 100%); */
    --consult-bg: linear-gradient(122deg, rgb(255 146 51) 0%, rgb(255 120 0) 55%, rgb(255 157 74) 100%);
    --consult-accent: #E51679;

    --bg-light: #f0f4fa;
    --bg-highlight: #e6edf8;
    --border-light: #d0daea;
    --border-default: #b0c4de;
    --text-primary: #051227;
    --text-secondary: #3561a9;
    --text-muted: #6788be;

    --text-h1: #1f2020;
    --text-h2: #27282b;
    --text-sub: #424040;
    --text-sub2: #5f5f5f;
}

.spacer { width: 100%; }

.consult_application {
    margin: 0;
    /* font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; */
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
}


.consult_container {
    display: flex;
    flex-wrap: wrap; /* 작은 화면에서 자식 요소 줄바꿈 */
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    font-weight: 400;
}

/* 자식 요소 기본 스타일 (작은 화면용 - 1줄에 1개) */
.consult_container_item {
    flex: 0 0 100%; /* 너비 100% */
    box-sizing: border-box; /* 패딩/테두리 포함 */
    min-height: 30vh;
    /* text-align: center; */
}
.step_image_area {
    display: none;
}
/* 데스크탑(큰 화면) 설정: 화면 너비가 768px 이상일 때 */
@media (min-width: 1000px) {
    .consult_container_item {
        min-height: initial;
        flex: 0 0 50%; /* 너비 50% (반반씩) */
    }
    .step_image_area {
        display: block;
        min-height: 80vh;
    }
}


.step_content_area {
    position: relative;
    z-index: 10;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 100px;
    /* border-left: 4px solid var(--b24-blue-60); */
}

.bg_container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bg_container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}


.step_content_area h1 {
    margin: 0;
    color: var(--text-h1);
    letter-spacing: -.5px;
    font-size: 26px;
    font-weight: 600;
}
.step_content_area *::placeholder {
    letter-spacing: 0;
    color: #666;
}

.consult_process_bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    width: 100%;
    height: 6px;
    background: var(--b24-blue-60);
}
.consult_process_bar::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 6px;
    background: var(--consult-bg);
}
.consult_process_bar.s1::after {width: 16.66666%}
.consult_process_bar.s2::after {width: 33.33333%}
.consult_process_bar.s3::after {width: 49.99999%}
.consult_process_bar.s4::after {width: 66.66666%}
.consult_process_bar.s5::after {width: 83.33333%}
.consult_process_bar.s6::after {width: 99.99999%}


.consult_process_bar_wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    width: 100%;
    height: 6px;
    display: flex;
    gap: 1px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.consult_process_bar_wrap::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 6px;
    background: var(--consult-bg);
}
.consult_process_bg {
    width: 100%;
    height: 6px;
    background: var(--b24-blue-60);
}
.consult_process_bg.done {
    background: var(--consult-bg);
}




.consult_container_item h1,
.consult_container_item h2,
.consult_container_item h3 {
    /* font-family: 'Pretendard Variable'; */
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-weight: 700;
    letter-spacing: -0.5px;
}










.consult_page_title {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 2rem;
}

.step_num {
    font-size: 18px;
    letter-spacing: -1px;
    display: flex;
    gap: 3px;
    flex-direction: row;
    align-items: center;
}
.step_num .step_num_current {
    color: #000;
    font-weight: 600;
}
.step_num .step_num_separator {
    font-size: .7em;
    color: #8f8f8f;
    font-weight: 400;
}
.step_num .step_num_total {
    color: #8f8f8f;
    font-weight: 400;
}





/* ============================================================
   A. 전역 / 페이지 레이아웃
   ============================================================ */
.consult-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
}
.consult-page h1 {
    font-size: 22px;
    color: var(--b24-blue2);
    margin: 0 0 24px 0;
    font-weight: 600;
}

.section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--b24-blue-20);
}
.section:last-child { border-bottom: none; }
.section h2 {
    font-size: 17px;
    color: var(--text-h2);
    margin: 0 0 10px 0;
    font-weight: 600;
}
.section h3 {
    font-size: 14px;
    color: var(--text-sub);
    margin: 16px 0 10px 0;
    font-weight: 500;
}

.multi-badge {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: normal;
    margin-left: 6px;
}
.optional-badge {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: normal;
    margin-left: 6px;
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: 4px;
}
/* 상단 툴바 */
.consult-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* ============================================================
   B. 스텝 버튼 (이전 / 다음 / 컨설팅 신청)
   ============================================================ */
.step-buttons {
    display: flex;
    justify-content: space-between;
    /* margin-top: 24px; */
    /* margin-top: 4rem; */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px 15px;
}
.step-buttons button {
    padding: 12px 0px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s;
}
.step-buttons button:active { transform: scale(0.97); }

.step-buttons button:first-child {
    width: 10%;
}

.step-buttons button:last-child {
    width: 88%;
}

/* .step-buttons button#btn-home {
    padding: 12px 0;
} */

#btn-home,
#btn-prev {
    width: 50px;
    background: var(--bg-light);
    color: var(--b24-blue4);
    border: 1px solid var(--border-light);
    border-radius: 25px;
}
#btn-prev:hover {
    background: var(--bg-highlight);
    border-color: var(--b24-blue-40);
}

#btn-next,
#btn-submit {
    width: calc(100% - 60px);
    background: var(--consult-bg);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(239, 119, 13, 0.35);
    border-radius: 25px;
}
#btn-next:hover,
#btn-submit:hover {
    box-shadow: 0 6px 20px rgba(239, 119, 13, 0.5);
    filter: brightness(1.05);
}
#btn-next:disabled,
#btn-submit:disabled {
    background: var(--b24-blue-20);
    color: var(--b24-blue-60);
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
}

/* ============================================================
   C. 숫자 콤보 (+/- 버튼)
   ============================================================ */
.num-combo {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}
.btn-num {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--bg-light);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    color: var(--b24-blue4);
    user-select: none;
}
.btn-num:hover { background: var(--bg-highlight); }
.btn-num:active { background: var(--b24-blue-20); }

.num-combo input {
    width: 50px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    font-size: 18px;
    font-weight: bold;
    color: var(--b24-blue3);
    padding: 0;
    height: 44px;
    background: #fff;
}

.num-combo.sm .btn-num { width: 36px; height: 36px; font-size: 18px; }
.num-combo.sm input    { width: 40px; height: 36px; font-size: 15px; }


/* ============================================================
   D. 탭 UI (region)
   ============================================================ */
.tab_wrap { margin-bottom: 24px; }
.tab_ts {
    display: flex;
    gap: 0;
    background: var(--bg-light);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-light);
}
.tab_t {
    flex: 1;
    padding: 12px 20px;
    cursor: pointer;
    color: var(--b24-blue-60);
    border: none;
    border-radius: 8px;
    transition: all 0.25s;
    font-size: 15px;
    text-align: center;
    background: transparent;
}
.tab_t:hover {
    color: var(--b24-blue4);
}
.tab_t.active {
    color: #fff;
    font-weight: 600;
    background: var(--b24-blue);
    box-shadow: 0 2px 8px rgba(19, 70, 155, 0.25);
}
.tab_t_name { pointer-events: none; }
.tab_c { display: none; padding: 24px 0 0; }
.tab_c.active { display: block; }



/* ============================================================
   E. 검색 & 자동완성 (region)
   ============================================================ */

/* 검색 래퍼 */
.search-wrap {
    position: relative;
    margin-bottom: 12px;
}
.search-wrap .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--b24-blue-40);
    pointer-events: none;
    transition: color 0.2s;
}
.search-wrap .search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 16px;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    box-sizing: border-box;
    background: #fff;
    transition: all 0.25s;
    color: var(--text-primary);
}
.search-wrap .search-input::placeholder {
    color: var(--b24-blue-40);
}
.search-wrap .search-input:focus {
    border-color: var(--b24-blue5);
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 84, 185, 0.1);
}
.search-wrap .search-input:focus + .search-icon,
.search-wrap:focus-within .search-icon {
    color: var(--b24-blue5);
}
.search-wrap .search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: var(--b24-blue-20);
    color: var(--b24-blue-60);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}
.search-wrap .search-clear.show { display: flex; }
.search-wrap .search-clear:hover {
    background: var(--b24-blue-40);
    color: #fff;
}

.search-help {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
    padding-left: 4px;
}
.search-help span {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-light);
    border-radius: 4px;
    font-size: 12px;
    color: var(--b24-blue-60);
    margin: 0 2px;
}

/* 자동완성 드롭다운 */
.autocomplete-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    display: none;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 8px 24px rgba(5, 18, 39, 0.12);
}
.autocomplete-list.show { display: block; }
.ac-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-light);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--bg-light); }
.ac-item .ac-city { font-weight: 500; color: var(--text-primary); }
.ac-item .ac-country { font-size: 12px; color: var(--text-muted); }
.ac-empty {
    padding: 20px 16px;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
}
.match-highlight { color: var(--consult); font-weight: 600; }

/* ============================================================
   E-2. 많이 찾는 도시 (region)
   ============================================================ */
.popular-cities {
    margin-top: 24px;
}
.popular-cities h3 {
    font-size: 14px;
    color: var(--b24-blue3);
    margin: 0 0 12px 0;
    font-weight: 600;
}
.popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.popular-city {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    padding: 5px 10px;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: inherit;
}
.popular-city:hover {
    border-color: var(--b24-blue-60);
    background: var(--bg-light);
}
.popular-city.selected {
    border-color: var(--b24-blue);
    background: var(--bg-highlight);
}
/* .popular-city.selected::after {
    content: '✓';
    margin-left: auto;
    color: var(--b24-blue);
    font-size: 14px;
    font-weight: bold;
} */



.popular-flag {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    border-radius: 9px;
    overflow: hidden;
    display: none;
}
.popular-flag img {
    width: 24px;
    height: 24px;
    margin-left: -3px;
    object-fit: contain;
    border-radius: 2px;
}
.popular-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--b24-blue3);
    white-space: nowrap;
}
.popular-country {
    font-size: 11px;
    color: var(--b24-blue-60);
    white-space: nowrap;
    width: 100%;
}

@media (max-width: 480px) {
    .popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .popular-country { display: none; }
}

/* ============================================================
   F. 지역/도시 선택 패널 (region)
   ============================================================ */

/* 지역 버튼 그리드 */
.areas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.areas li { display: flex; }
.btn_area {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: var(--b24-blue4);
    transition: all 0.25s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.btn_area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--b24-blue5);
    transform: scaleY(0);
    transition: transform 0.25s;
    border-radius: 0 2px 2px 0;
}
.btn_area::after {
    content: '›';
    margin-left: auto;
    font-size: 18px;
    color: var(--b24-blue-40);
    transition: all 0.2s;
}
.btn_area:hover {
    border-color: var(--b24-blue-40);
    background: var(--bg-light);
    color: var(--b24-blue3);
}
.btn_area:hover::before {
    transform: scaleY(1);
}
.btn_area:hover::after {
    color: var(--b24-blue5);
    transform: translateX(3px);
}

/* 국가/도시 패널 */
.country-panel {
    margin-top: 16px;
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    max-height: 500px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 4px 16px rgba(5, 18, 39, 0.08);
}
.country-panel.hide { display: none; }

.country-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bg-highlight);
    background: var(--bg-light);
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 12px 12px 0 0;
}
.country-panel-header h2 { margin: 0; font-size: 16px; color: var(--b24-blue3); font-weight: 600; }
.btn-close-panel {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--b24-blue-60);
    line-height: 1;
    transition: color 0.2s;
}
.btn-close-panel:hover { color: var(--consult-accent); }

.country-panel-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--bg-highlight);
    text-align: center;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-radius: 0 0 12px 12px;
}
.country-panel-footer button {
    padding: 10px 40px;
    background: var(--consult-bg);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(239, 119, 13, 0.3);
    transition: all 0.2s;
}
.country-panel-footer button:hover { filter: brightness(1.05); }

/* 국가 항목 */
.country-item {
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-light);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.country-item:hover { background: var(--bg-light); }
.country-item.active {
    background: var(--bg-highlight);
    font-weight: 600;
    border-left: 3px solid var(--b24-blue5);
}
.flag-icon { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; border: 1px solid var(--bg-highlight); }
.country-name-en { color: var(--text-muted); font-size: 13px; }
.arrow-icon { margin-left: auto; color: var(--b24-blue-40); font-size: 12px; transition: transform 0.2s; }
.country-item.active .arrow-icon { transform: rotate(180deg); color: var(--b24-blue5); }

/* 도시 목록 */
.city-list { list-style: none; padding: 0; margin: 0; }
.city-item {
    padding: 11px 20px 11px 52px;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-light);
    font-size: 14px;
    transition: all 0.2s;
    position: relative;
}
.city-item::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--b24-blue-40);
    background: transparent;
    transition: all 0.2s;
}
.city-item:hover { background: var(--bg-light); }
.city-item:hover::before { border-color: var(--b24-blue5); }
.city-item.active {
    background: var(--bg-highlight);
    color: var(--b24-blue3);
    font-weight: 600;
}
.city-item.active::before {
    background: var(--b24-blue5);
    border-color: var(--b24-blue5);
    box-shadow: 0 0 0 3px rgba(22, 84, 185, 0.15);
}
.city-item.recommendation {
    color: var(--b24-blue6);
    font-style: italic;
}
.city-item.recommendation::before {
    border-style: dashed;
    border-color: var(--b24-blue6);
}
.city-item.recommendation.active::before {
    background: var(--b24-blue6);
    border-style: solid;
}
.major-badge { color: var(--consult-accent); font-size: 12px; margin-left: 4px; }
.loading, .error { padding: 16px 20px 16px 52px; color: var(--text-muted); font-size: 13px; }

/* ============================================================
   선택된 도시 영역
   ============================================================ */
#selected_cities_wrap {
    margin-top: 28px;
    padding: 20px;
    background: var(--bg-light);
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
}
#selected_cities_wrap.hide { display: none; }

#selected_cities_wrap h3 {
    font-size: 14px;
    color: var(--b24-blue-60);
    margin: 0 0 12px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
#selected_cities_wrap h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--b24-blue5);
    border-radius: 2px;
}

#selected_cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.selected-city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid var(--b24-blue-40);
    border-radius: 24px;
    font-size: 14px;
    color: var(--b24-blue3);
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(5, 18, 39, 0.06);
}
.selected-city:hover {
    border-color: var(--consult-accent);
}
.city-name { color: var(--b24-blue3); }
.city-country { color: var(--text-muted); font-size: 12px; }
.btn-remove-city {
    background: none;
    border: none;
    color: var(--b24-blue-40);
    cursor: pointer;
    font-size: 16px;
    padding: 0 0 0 4px;
    line-height: 1;
    transition: color 0.2s;
}
.btn-remove-city:hover { color: var(--consult-accent); }


/* ============================================================
   G. 날짜 입력 & 달력 팝업 (departure_option)
   ============================================================ */

/* ----------------------------------------------------------
   G-1. 날짜 입력 필드
   ---------------------------------------------------------- */
.date-range-display {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.date-input-wrap { flex: 1; }
.date-input-wrap label {
    display: block;
    font-size: 13px;
    /* color: var(--text-muted); */
    color: var(--text-sub2);
    margin-bottom: 4px;
    font-weight: 500;
}
.date-input-group {
    position: relative;
}
.date-input-group input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    background: #fff;
    transition: all 0.25s;
    color: var(--text-primary);
}
.date-input-group input::placeholder { color: var(--b24-blue-40); }
.date-input-group input:focus {
    border-color: var(--b24-blue5);
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 84, 185, 0.1);
}
.date-input-group .date-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: var(--b24-blue-40);
    pointer-events: none;
    transition: color 0.2s;
}
.date-input-group:focus-within .date-icon { color: var(--b24-blue5); }

.date-separator {
    font-size: 20px;
    color: var(--b24-blue-40);
    padding-bottom: 12px;
}

.travel-period-info {
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--bg-highlight);
    border-radius: 6px;
    color: var(--b24-blue3);
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    border-left: 3px solid var(--b24-blue5);
}
.travel-period-info.hide { display: none; }


/* ----------------------------------------------------------
   G-2. 유연일
   ---------------------------------------------------------- */
.flexible-wrap {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.flexible-wrap h3 {
    margin: 10px 0 15px 0;
    padding: 0;
}
.flexible-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}


/* ----------------------------------------------------------
   G-3. 달력 팝업 - 오버레이 & 팝업 프레임
   ---------------------------------------------------------- */
.calendar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5, 18, 39, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-overlay.hide { display: none; }

.calendar-popup {
    background: #fff;
    border-radius: 16px;
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(5, 18, 39, 0.3);
    user-select: none;
}


/* ----------------------------------------------------------
   G-4. 달력 헤더 (제목, 초기화, 닫기)
   ---------------------------------------------------------- */
.calendar-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bg-highlight);
    background: var(--bg-light);
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
}
.calendar-header h2 {
    margin: 0;
    font-size: 17px;
    color: var(--b24-blue3);
    flex: 1;
    font-weight: 600;
}
.btn-reset {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--b24-blue-60);
    margin-right: 10px;
    transition: all 0.2s;
}
.btn-reset:hover {
    border-color: var(--b24-blue-40);
    color: var(--b24-blue4);
}
.btn-close-cal {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: var(--b24-blue-60);
    line-height: 1;
    transition: color 0.2s;
}
.btn-close-cal:hover { color: var(--consult-accent); }


/* ----------------------------------------------------------
   G-5. 선택 바 (출국일 / 귀국일 항상 표시)
   ---------------------------------------------------------- */
.calendar-selection-bar {
    display: flex;
    border-bottom: 1px solid var(--bg-highlight);
    background: #fff;
    flex-shrink: 0;
}
.cal-sel-item {
    flex: 1;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: default;
    transition: background 0.2s;
    position: relative;
}
.cal-sel-item:first-child {
    border-right: 1px solid var(--bg-highlight);
}
.cal-sel-item.is-selecting {
    background: var(--bg-light);
}
.cal-sel-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--b24-blue-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cal-sel-date {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-height: 22px;
}
.cal-sel-date.empty {
    color: var(--b24-blue-40);
    font-weight: 400;
}
.cal-sel-item .cal-sel-indicator {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--b24-blue5);
    transform: scaleX(0);
    transition: transform 0.25s;
}
.cal-sel-item.is-selecting .cal-sel-indicator {
    transform: scaleX(1);
}


/* ----------------------------------------------------------
   G-6. 기간 표시 바
   ---------------------------------------------------------- */
.cal-sel-period {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--bg-highlight);
    border-bottom: 1px solid var(--bg-highlight);
    font-size: 14px;
    font-weight: 600;
    color: var(--b24-blue3);
    min-height: 20px;
    flex-shrink: 0;
}
.cal-sel-period.empty {
    color: var(--b24-blue-40);
    font-weight: 400;
}


/* ----------------------------------------------------------
   G-7. 달력 본문 - 캐러셀 컨테이너
   ---------------------------------------------------------- */
.calendar-body-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* ----------------------------------------------------------
   G-8. 좌우 네비게이션 화살표
   ---------------------------------------------------------- */
.cal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    /* background: #fff; */
    background: transparent;
    color: var(--b24-blue4);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 8px rgba(5, 18, 39, 0.15); */
    transition: all 0.2s;
}
.cal-nav:hover {
    background: var(--b24-blue);
    color: #fff;
    /* box-shadow: 0 4px 12px rgba(19, 70, 155, 0.3); */
}
.cal-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #fff;
    color: var(--b24-blue-40);
    box-shadow: none;
}
.cal-nav:disabled:hover {
    background: #fff;
    color: var(--b24-blue-40);
}
.cal-nav.cal-prev { left: 2px; }
.cal-nav.cal-next { right: 2px; }


/* ----------------------------------------------------------
   G-9. 스크롤 컨테이너 & 트랙
   ---------------------------------------------------------- */
.calendar-scroll {
    width: 100%;
    overflow: hidden;
    cursor: grab;
}
.calendar-scroll.is-grabbing {
    cursor: grabbing;
}

.calendar-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.calendar-track.no-transition {
    transition: none;
}


/* ----------------------------------------------------------
   G-10. 월 슬라이드 (너비는 JS에서 px로 설정)
   ---------------------------------------------------------- */
.cal-month-slide {
    flex-shrink: 0;
    padding: 8px 20px 16px;
    /* padding: 16px 16px 16px 26px; */
    box-sizing: border-box;
}

.cal-month-title {
    padding: 4px 4px 8px;
    font-weight: 600;
    color: var(--b24-blue3);
    text-align: center;
}
.cal-month { font-size: 20px; }
.cal-year {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 6px;
}


/* ----------------------------------------------------------
   G-11. 요일 헤더 (각 슬라이드 내부에 포함)
   ---------------------------------------------------------- */
.cal-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 0 0 6px;
    font-size: 12px;
    color: var(--b24-blue-60);
    font-weight: 600;
    border-bottom: 1px solid var(--bg-highlight);
    margin-bottom: 4px;
}
.cal-weekdays-row .wd-sun { color: var(--consult-accent); }
.cal-weekdays-row .wd-sat { color: var(--b24-blue5); }


/* ----------------------------------------------------------
   G-12. 날짜 그리드
   ---------------------------------------------------------- */
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* gap: 2px; */
}
.cal-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    /* aspect-ratio: 1; */
    max-height: 44px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    padding: 10px 0;
    margin: 1px 0;
}
.cal-cell.blank { cursor: default; }
.cal-cell.disabled {
    color: var(--b24-blue-20);
    cursor: not-allowed;
}
.cal-cell.sun { color: var(--consult-accent); }
.cal-cell.sat { color: var(--b24-blue5); }
.cal-cell:not(.disabled):not(.blank):hover {
    /* background: var(--bg-light); */
    background: var(--b24-blue);
}

.cal-cell.today { font-weight: 700; }
.cal-cell.today::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--consult);
}


/* ----------------------------------------------------------
   G-13. 날짜 선택 범위 하이라이트
   ---------------------------------------------------------- */
.cal-cell.range-start {
    background: var(--b24-blue);
    color: #fff !important;
    border-radius: 8px 0 0 8px;
    font-weight: 600;
}
.cal-cell.range-end {
    background: var(--b24-blue);
    color: #fff !important;
    border-radius: 0 8px 8px 0;
    font-weight: 600;
}
.cal-cell.range-start.range-end {
    border-radius: 8px;
}
.cal-cell.range-between {
    background: var(--bg-highlight);
    color: var(--b24-blue3) !important;
    border-radius: 0;
}


/* ----------------------------------------------------------
   G-14. 달력 푸터 (취소 / 선택완료)
   ---------------------------------------------------------- */
.calendar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--bg-highlight);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    flex-shrink: 0;
}
.btn-cal-cancel {
    padding: 10px 24px;
    background: var(--bg-light);
    color: var(--b24-blue4);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-cal-cancel:hover {
    background: var(--bg-highlight);
}
.btn-confirm-date {
    padding: 10px 32px;
    background: var(--consult-bg);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(239, 119, 13, 0.3);
    transition: all 0.2s;
}
.btn-confirm-date:hover {
    filter: brightness(1.05);
}
.btn-confirm-date:disabled {
    background: var(--b24-blue-20);
    color: var(--b24-blue-60);
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
}



/* ============================================================
   H. 예산 슬라이더 (travel_option)
   ============================================================ */
.slider-section {
    position: relative;
    padding: 0 8px;
    overflow: hidden;
}

/* 슬라이더 전체 래퍼 */
.slider-wrap {
    position: relative;
    padding: 70px 0 0px;
}

/* 말풍선 툴팁 - 커스텀 썸과 함께 드래그 */
.slider-tooltip {
    position: absolute;
    top: 0px;
    left: 0;
    background: var(--b24-blue);
    color: #fff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    transition: none;
    text-align: center;
}

.slider-tooltip::before {
    content: '1인 기준 예산';
    display: block;
    font-size: 12px;
    color: #edf5ff;
}
.slider-tooltip::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: var(--tail-left, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--b24-blue);
}


/* 네이티브 슬라이더 - 투명 썸, 트랙만 표시 */
.slider-track-wrap {
    position: relative;
    height: 26px;
    display: flex;
    align-items: center;
}

#budget_slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    --fill: 20%;
    background: linear-gradient(
        to right,
        var(--b24-blue5) 0%, var(--b24-blue5) var(--fill),
        var(--b24-blue-20) var(--fill), var(--b24-blue-20) 100%
    );
    position: relative;
    z-index: 3;
    margin: 0;
}

/* 네이티브 썸을 투명으로 */
#budget_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 4;
}
#budget_slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
}
#budget_slider::-moz-range-progress {
    background: var(--b24-blue5);
    height: 6px;
    border-radius: 3px;
}
#budget_slider::-moz-range-track {
    background: var(--b24-blue-20);
    height: 6px;
    border-radius: 3px;
}

/* 커스텀 시각 썸 (포인터 이벤트 없음, 슬라이더가 제어) */
.slider-thumb-visual {
    position: absolute;
    top: 50%;
    left: 0;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 50%;
    background: var(--b24-blue);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(19, 70, 155, 0.35);
    pointer-events: none;
    z-index: 3;
    transition: transform 0.1s;
}
.slider-thumb-visual.is-active {
    transform: scale(1.2);
    box-shadow: 0 4px 14px rgba(19, 70, 155, 0.5);
}

/* 눈금 도트 (트랙 위) */
.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    pointer-events: none;
    z-index: 1;
}
.slider-dot {
    position: absolute;
    top: 0;
    width: 2px;
    height: 6px;
    background: var(--b24-blue-20);
    transform: translateX(-50%);
    border-radius: 1px;
}

/* 눈금 라벨 */
.slider-labels {
    position: relative;
    width: 100%;
    height: 28px;
    margin-top: 10px;
    overflow: hidden;
}
.slider-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    top: 8px;
}
/* 첫 번째 라벨: 왼쪽 넘침 방지 */
.slider-label:first-child {
    transform: translateX(0);
}
/* 마지막 라벨: 오른쪽 넘침 방지 */
.slider-label:last-child {
    transform: translateX(-100%);
}
.slider-label::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 5px;
    background: var(--b24-blue-20);
}
.slider-label:first-child::before { left: 0; transform: none; }
.slider-label:last-child::before  { left: auto; right: 0; transform: none; }



/* ============================================================
   I. 인원 선택 (members)
   ============================================================ */
.person-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: #fcfdff;
    border-bottom: 1px solid var(--bg-light);
}
.person-row:last-of-type { border-bottom: none; }
.person-info { flex: 1; min-width: 120px; }
.person-name { font-size: 16px; font-weight: bold; color: var(--b24-blue3); }
.person-std  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.person-unit { margin-left: 12px; font-size: 15px; color: var(--b24-blue-60); }

.total-row {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--bg-highlight);
    border-radius: 8px;
    font-size: 16px;
    color: var(--text-primary);
    text-align: center;
    border-left: 3px solid var(--b24-blue5);
}
.total-row strong { color: var(--b24-blue3); font-size: 22px; margin: 0 4px; }

.btn-reset-person {
    display: block;
    margin: 16px auto 0;
    padding: 8px 24px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--b24-blue-60);
    transition: all 0.2s;
}
.btn-reset-person:hover { border-color: var(--consult-accent); color: var(--consult-accent); }



/* ============================================================
   J. 여권 영문명 입력 - 카드형 (members)
   ============================================================ */
.pp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--b24-blue);
    width: 100%;
}
.pp-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--bg-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pp-icon svg { width: 20px; height: 20px; }
.pp-title { font-size: 16px; font-weight: 500; color: var(--b24-blue3); }
.pp-subtitle { font-size: 12px; color: var(--b24-blue-60); margin-top: 2px; }
/* .pp-badge {
    font-size: 11px;
    color: var(--b24-blue-60);
    background: var(--bg-light);
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
} */
.pp-badge {
    font-size: 11px;
    color: #ffffff;
    background: #29ab00;
    padding: 7px 15px;
    border-radius: 16px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px;
    display: inline-block;
    height: 33px;
    width: 84px;
    text-align: center;
    margin: 0 0 10px 0;
}
.pp-header-wrap {
    display: flex;
    flex-direction: column-reverse;
}
@media (min-width: 1000px) {
    .pp-header-wrap {
        display: flex;
        flex-direction: row;
        position: relative;
    }
    .pp-badge {
        position: absolute;
        right: 24px;
        top: 0px;
        margin: 0;
    }
}



/* 카드 */
.pp-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pp-card:hover {
    border-color: var(--b24-blue-60);
    box-shadow: 0 2px 8px rgba(19, 70, 155, 0.08);
}

/* 카드 상단: 아바타 + 라벨 */
.pp-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.pp-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.pp-avatar.adult  { background: var(--bg-highlight); color: var(--b24-blue4); }
.pp-avatar.youth  { background: #e3f2ee;             color: #0f6e56; }
.pp-avatar.child  { background: #fff3e0;             color: #e65100; }
.pp-avatar.infant { background: #fce4ec;             color: #c62828; }

.pp-card-label { font-size: 14px; font-weight: 500; color: var(--b24-blue3); }
.pp-card-sub   { font-size: 12px; color: var(--b24-blue-60); }

/* 입력 필드 행 */
.pp-fields {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.pp-field { flex: 1; }
.pp-field-label {
    font-size: 12px;
    color: var(--b24-blue-60);
    margin-bottom: 4px;
}
.pp-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-light);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: inherit;
}
.pp-field input[type="text"]:focus {
    border-color: var(--b24-blue5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 84, 185, 0.1);
    background: #fff;
}
.pp-field input[type="text"]::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--b24-blue-20);
}

/* 성별 토글 버튼 */
.pp-gender {
    display: flex;
    gap: 6px;
}
.pp-gender-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 40px;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--b24-blue-60);
    transition: all 0.2s;
    background: var(--bg-light);
}
.pp-gender-btn:hover { border-color: var(--b24-blue-60); }
.pp-gender-btn.active {
    background: var(--b24-blue);
    color: #fff;
    border-color: var(--b24-blue);
}
.pp-gender-btn input { display: none; }

/* 안내 메시지 */
.pp-help {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: 8px;
    border-left: 3px solid var(--b24-blue5);
}
.pp-help p {
    font-size: 12px;
    color: var(--b24-blue-60);
    margin: 0;
    line-height: 1.7;
}

/* 모바일 대응 */
@media (max-width: 520px) {
    .pp-fields {
        flex-direction: column;
        gap: 10px;
    }
    .pp-fields > div { width: 100%; }
    .pp-gender { justify-content: flex-start; }
    .pp-header { flex-wrap: wrap; }
    /* .pp-badge { margin-left: 0; margin-top: 8px; } */
}



/* ============================================================
   K. 요약 테이블 (applicant)
   ============================================================ */
.summary-table {
    width: 100%;
    border-collapse: collapse;
}
.summary-table th {
    width: 100px;
    padding: 10px;
    text-align: left;
    font-size: 13px;
    color: var(--b24-blue-60);
    background: var(--bg-light);
    border: 1px solid var(--bg-highlight);
    vertical-align: top;
    font-weight: bold;
    text-align: center;
}
.summary-table td {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    border: 1px solid var(--bg-highlight);
}
.not-selected { color: var(--consult-accent); font-size: 13px; }


/* ============================================================
   L. 신청자 폼 (applicant)
   ============================================================ */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.form-label {
    width: 90px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-h2);
    flex-shrink: 0;
}
.form-field { flex: 1; }
.form-field input,
.form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--b24-blue5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 84, 185, 0.1);
}

#contact_textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.6;
}
#contact_textarea:focus {
    border-color: var(--b24-blue5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 84, 185, 0.1);
}

.agreement-box {
    max-height: 200px;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-light);
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--b24-blue-60);
    line-height: 1.7;
}
.agreement-box h3 {
    font-size: 13px;
    color: var(--b24-blue3);
    margin: 12px 0 6px 0;
}
.agreement-box h3:first-child { margin-top: 0; }
.agreement-box p { margin: 4px 0; }

.kakao-help {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fff8ee;
    border: 1px solid #f5e0b8;
    border-radius: 6px;
    font-size: 13px;
    color: var(--b24-blue-60);
    text-align: center;
}
.kakao-help a { color: var(--consult); font-weight: bold; text-decoration: none; }
.kakao-help a:hover { text-decoration: underline; }


/* ============================================================
   M. 전송 결과 화면 (applicant)
   ============================================================ */
.result-success {
    text-align: center;
    padding: 60px 20px;
    max-width: 500px;
    margin: 0 auto;
}
.result-icon {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    background: var(--consult-bg);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 24px rgba(239, 119, 13, 0.3);
}
.result-success h2 { color: var(--b24-blue3); font-size: 22px; margin-bottom: 16px; }
.result-success p  { font-size: 15px; color: var(--b24-blue-60); line-height: 1.7; margin: 6px 0; }
.result-ref strong { color: var(--b24-blue3); font-size: 18px; }
.result-contact    { margin-top: 20px; }
.result-contact a  { color: var(--b24-blue5); font-weight: bold; text-decoration: underline; }
.btn-home {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 40px;
    background: var(--consult-bg);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(239, 119, 13, 0.35);
}
.btn-home:hover { filter: brightness(1.05); }




/* ============================================================
   O. 모달 알림 (modal-alert.js)
   ============================================================ */
.ma-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 18, 39, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.ma-overlay.show {
    opacity: 1;
    visibility: visible;
    display: flex !important;
}

.ma-box {
    background: #fff;
    border-radius: 14px;
    width: 92%;
    max-width: 380px;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ma-overlay.show .ma-box {
    transform: translateY(0) scale(1);
}

.ma-top {
    padding: 24px 24px 16px;
    text-align: center;
}

/* 아이콘 원형 */
.ma-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.ma-icon svg { width: 26px; height: 26px; }

.ma-icon.info            { background: var(--bg-highlight); }
.ma-icon.info svg        { stroke: var(--b24-blue5); }
.ma-icon.warn            { background: #fff3e0; }
.ma-icon.warn svg        { stroke: #e65100; }
.ma-icon.error           { background: #fce4ec; }
.ma-icon.error svg       { stroke: #c62828; }
.ma-icon.success         { background: #e8f5e9; }
.ma-icon.success svg     { stroke: #2e7d32; }

/* 제목 / 메시지 */
.ma-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--b24-blue2);
    margin-bottom: 8px;
}
.ma-msg {
    font-size: 14px;
    color: var(--b24-blue-60);
    line-height: 1.6;
    word-break: keep-all;
}

/* 버튼 영역 */
.ma-bottom {
    padding: 0 24px 20px;
    display: flex;
    gap: 10px;
}
.ma-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s;
}
.ma-btn:active { transform: scale(0.97); }
.ma-btn:focus  { outline: 2px solid var(--b24-blue5); outline-offset: 2px; }

.ma-btn-cancel {
    background: var(--bg-light);
    color: var(--b24-blue4);
    border: 1px solid var(--border-light);
}
.ma-btn-cancel:hover { background: var(--bg-highlight); }

.ma-btn-ok {
    background: var(--consult-bg);
    color: #fff;
}
.ma-btn-ok:hover { filter: brightness(1.05); }

.ma-btn-ok.blue {
    background: var(--b24-blue);
}
.ma-btn-ok.blue:hover { background: var(--b24-blue5); }



/* ============================================================
   N. 유틸리티
   ============================================================ */
.hide { display: none !important; }



/* ============================================================
   P. 초기화 버튼 (공용)
   ============================================================ */
.btn-reset-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 11px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--b24-blue-60);
    transition: all 0.2s;
    font-family: inherit;
    margin-right: 5px;
}
.btn-reset-all:hover {
    border-color: var(--consult-accent);
    color: var(--consult-accent);
    background: #fef0f5;
}
.btn-reset-all svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}