@charset "UTF-8";

:root {
    --blue: #4a90e2;
    --blue-dark: #2f74c8;
    --navy: #0b1b33;
    --navy-soft: #14284a;
    --yellow: #ffe28a;
    --text: #1b1b1b;
    --line: rgba(255, 255, 255, .18);
    --bar-h: 96px; /* JS가 실제 높이로 갱신한다 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    line-height: 1.5;
    /* 하단 고정바에 콘텐츠가 가리지 않도록 확보 */
    padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

img { border: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== 상세 이미지 ===== */
.detail {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
}

.detail > img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== 하단 상담 신청 섹션 ===== */
.apply {
    background: linear-gradient(180deg, var(--navy) 0%, #071322 100%);
    color: #fff;
    padding: 56px 24px 64px;
    text-align: center;
}

.apply-eyebrow {
    margin: 0 0 10px;
    color: var(--yellow);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
}

.apply-title {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.35;
}

.apply-title strong { color: var(--blue); }

.apply-desc {
    margin: 0 0 32px;
    font-size: 16px;
    color: rgba(255, 255, 255, .78);
}

.apply .consult-form {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

.apply .consult-fields {
    display: grid;
    gap: 10px;
}

.apply .consult-fields input,
.apply .consult-fields select { height: 54px; }

.apply .btn-submit {
    width: 100%;
    height: 58px;
    font-size: 18px;
}

/* 세로 배치 섹션에서는 동의 문구 아래에 버튼을 전체 폭으로 둔다. */
.apply .consult-actions {
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

/* ===== 공통 폼 ===== */
.consult-form input[type="text"],
.consult-form input[type="tel"],
.consult-form select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 16px; /* iOS 자동 확대 방지를 위해 16px 미만으로 낮추지 않는다 */
    font-family: inherit;
}

.consult-form input::placeholder { color: rgba(255, 255, 255, .55); }

.consult-form input:focus,
.consult-form select:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, .25);
}

.consult-form input[aria-invalid="true"],
.consult-form select[aria-invalid="true"] {
    border-color: #ff8080;
    box-shadow: 0 0 0 3px rgba(255, 128, 128, .2);
}

/* 지역 선택 — 기본 화살표를 감추고 폼 색에 맞춘 아이콘을 얹는다 */
.field-select { position: relative; }

.consult-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    cursor: pointer;
}

/* 미선택 상태(값이 빈 첫 항목)는 placeholder처럼 흐리게 보인다 */
.consult-form select:invalid { color: rgba(255, 255, 255, .55); }

/* 펼쳐진 목록은 OS가 그린다 — 흰 배경에 흰 글씨가 되지 않도록 색을 명시한다 */
.consult-form select option {
    color: var(--text);
    background: #fff;
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .6);
    pointer-events: none;
}

.select-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-submit {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}

.btn-submit:hover { background: var(--blue-dark); }
.btn-submit:disabled { opacity: .6; cursor: default; }

/* 동의 문구와 제출 버튼을 한 줄에 가운데 정렬한다 */
.consult-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
}

.consult-agree {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--blue);
    cursor: pointer;
}

.link-privacy {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* 허니팟: 화면 밖으로 밀어 사람이 채울 수 없게 한다 */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== 하단 고정 상담바 ===== */
.consult-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: rgba(11, 27, 51, .97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: blur(6px);
}

/* 제목 → 입력 3등분 → 동의·버튼 순으로 쌓는다 */
.consult-bar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 16px 16px;
}

.consult-bar-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.consult-bar-title strong { color: var(--yellow); }

.consult-bar .consult-fields {
    display: flex;
    gap: 8px;
}

.consult-bar .consult-fields .field { flex: 1 1 0; }

/* ===== 토스트 ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bar-h) + 20px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    transform: translate(-50%, 12px);
    max-width: min(90vw, 420px);
    padding: 14px 20px;
    border-radius: 10px;
    background: rgba(20, 20, 20, .93);
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.is-error { background: #b3261e; }
.toast.is-success { background: #17663c; }

/* ===== 개인정보 모달 ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[hidden] { display: none; }

.modal-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 26px 24px 20px;
    border-radius: 14px;
    background: #fff;
}

.modal-panel h3 {
    margin: 0 0 16px;
    font-size: 19px;
}

.modal-body {
    font-size: 14px;
    color: #444;
    line-height: 1.65;
}

.modal-body p { margin: 0 0 14px; }

.btn-modal-close {
    width: 100%;
    height: 46px;
    margin-top: 10px;
    border: 0;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* ===== 푸터 ===== */
.site-footer {
    padding: 28px 20px 34px;
    background: #060f1c;
    color: rgba(255, 255, 255, .5);
    text-align: center;
    font-size: 13px;
}

.footer-brand {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .82);
    font-weight: 700;
    letter-spacing: .08em;
}

.footer-note { margin: 0; }

/* ===== 모바일 ===== */
@media (max-width: 767px) {
    .consult-bar-inner {
        padding: 10px 12px 12px;
    }

    .consult-bar-title {
        margin-bottom: 8px;
        font-size: 16px;
    }

    /* 3등분을 유지하려면 좁은 화면에서 좌우 여백을 줄여야 한다.
       글자 크기는 iOS 자동 확대 때문에 16px 아래로 내리지 않는다. */
    .consult-bar .consult-fields { gap: 6px; }

    .consult-bar .consult-fields input,
    .consult-bar .consult-fields select {
        height: 44px;
        padding: 0 9px;
    }

    .consult-bar .consult-fields select { padding-right: 26px; }

    .consult-bar .select-arrow {
        right: 8px;
        width: 13px;
        height: 13px;
    }

    .consult-bar .btn-submit {
        height: 42px;
        padding: 0 18px;
        font-size: 15px;
    }

    .consult-bar .consult-actions {
        gap: 12px;
        margin-top: 9px;
    }

    .consult-bar .consult-agree { font-size: 12px; }

    .apply {
        padding: 44px 18px 52px;
    }

    .apply-title { font-size: 25px; }
    .apply-desc { font-size: 15px; }
}