@charset "utf-8";
/* ==========================================================================
   하단 고정 빠른 상담신청 바 (theme/basic/wn_quickbar.php)

   폼 마크업은 한 벌이다. 화면 크기에 따라 자리만 바뀐다.
     PC   : .wn_qb_panel 이 바 안에 그대로 눕는다.
     모바일: .wn_qb_panel 이 바 위로 올라오는 시트가 되고, 바에는 3버튼만 남는다.

   ★크기를 rem 으로 잡지 않는다.
     이 테마는 responsive.css 에서 html { font-size: 1~2.125vw } 로 루트 글꼴을
     화면 폭에 묶어 놓았다. 그래서 rem 로 쓰면 390px 화면에서 1rem 이 8.3px 이 되어
     바 높이가 31px, 입력칸이 27px 까지 쪼그라든다(2026-09-10 실측). 손가락으로 누를
     수 없는 크기다. 이 바는 화면 폭과 무관하게 같은 크기여야 하므로 px 로 고정한다.
     반대로 글자 크기 중 본문에 맞춰 같이 커져야 하는 것만 em 을 쓴다.
   ========================================================================== */

/* 바가 있는 페이지에서만 본문 아래 여백을 준다.
   이 클래스는 wn_quickbar.js 가 #wn_qb 를 찾았을 때만 붙인다.
   ★없으면 고정 바가 푸터 마지막 줄을 덮는다. */
html.wn-qb-on body { padding-bottom: var(--wn-qb-h, 76px); }

.wn_qb {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background-color: #17171a;
    color: #fff;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
    display: flex; align-items: center; gap: 24px;
    padding: 12px 32px;
    font-size: 15px;            /* 바 안쪽은 여기서부터 재는다(테마의 vw 글꼴을 끊는다) */
    line-height: 1.4;
}

/* ── 폼 ───────────────────────────────────────────────────────────────────── */
.wn_qb_panel { flex: 1 1 auto; min-width: 0; }
.wn_qb_panel_close { display: none; }

.wn_qb_form { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.wn_qb_title {
    font-size: 16px; font-weight: 600; margin: 0; white-space: nowrap;
    letter-spacing: -0.01em; color: #fff;
}
.wn_qb_title::before {
    content: ""; display: inline-block; width: 6px; height: 6px;
    border-radius: 999px; background-color: var(--theme-light, #ff6077);
    margin-right: 8px; vertical-align: 0.15em;
}
.wn_qb_desc { font-size: 13px; color: #a9a9b2; margin: 0; white-space: nowrap; }

.wn_qb_fields { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; }

.wn_qb_input {
    height: 44px; min-width: 0; width: 150px;
    background-color: #26262b; border: 1px solid #3a3a42; border-radius: 8px;
    color: #fff; font-size: 15px; padding: 0 14px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wn_qb_input::placeholder { color: #8b8b95; }
.wn_qb_input:focus {
    outline: none; border-color: var(--theme-light, #ff6077); background-color: #2d2d33;
}
.wn_qb_input.is-error { border-color: #ff6b6b; background-color: #33232a; }

/* 동의 체크 — 기본 테마의 .chk_box 는 밝은 배경 전제라 여기서는 따로 그린다. */
.wn_qb_agree { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.wn_qb_agree input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wn_qb_agree label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; color: #d2d2d8; cursor: pointer; margin: 0;
}
.wn_qb_box {
    width: 18px; height: 18px; flex: 0 0 auto;
    border: 1px solid #55555f; border-radius: 4px; background-color: #26262b;
    position: relative; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wn_qb_box::after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; opacity: 0;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    transition: opacity 0.15s ease;
}
.wn_qb_agree input:checked + label .wn_qb_box {
    background-color: var(--theme, #992835); border-color: var(--theme, #992835);
}
.wn_qb_agree input:checked + label .wn_qb_box::after { opacity: 1; }
.wn_qb_agree input:focus-visible + label .wn_qb_box { outline: 2px solid var(--theme-light, #ff6077); outline-offset: 2px; }
.wn_qb_agree.is-error .wn_qb_box { border-color: #ff6b6b; }

.wn_qb_privacy_open {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 13px; color: #9a9aa4; text-decoration: underline;
    text-underline-offset: 2px;
}
.wn_qb_privacy_open:hover { color: #fff; }

.wn_qb_submit {
    height: 44px; padding: 0 26px; border: 0; border-radius: 8px;
    background-color: var(--theme, #992835); color: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.wn_qb_submit:hover { background-color: #b3303f; }
.wn_qb_submit:disabled { opacity: 0.55; cursor: default; }

/* 모바일 시트 뒤 어둡게. PC 에서는 쓰지 않는다. */
.wn_qb_dim { display: none; }

/* 허니팟 — 사람 눈에 보이면 안 된다 */
.wn_qb_hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 전화·카톡·빠른상담 ───────────────────────────────────────────────────── */
.wn_qb_actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.wn_qb_action {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 18px; border: 1px solid #3a3a42; border-radius: 8px;
    background-color: #26262b; color: #fff; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wn_qb_action:hover { background-color: #32323a; color: #fff; }
.wn_qb_action .fa { font-size: 15px; }

/* 카카오 노란색은 어느 화면에서도 유지한다.
   ★아래 모바일 블록에서 .wn_qb_action 의 배경을 다시 칠하는데, 선택자 특정도가 같아
     나중에 오는 그 규칙이 이겨 카톡 버튼이 검게 변한 적이 있다(2026-09-10).
     그래서 모바일 블록 안에서도 이 색을 한 번 더 지정한다. */
.wn_qb_action-kakao { background-color: #fee500; border-color: #fee500; color: #191600; }
.wn_qb_action-kakao:hover { background-color: #ffd900; border-color: #ffd900; color: #191600; }
.wn_qb_action-open { display: none; }   /* PC 에서는 폼이 이미 보이므로 필요 없다 */

/* ── 개인정보 전문 ────────────────────────────────────────────────────────── */
.wn_qb_privacy_modal {
    position: fixed; inset: 0; z-index: 9998; display: none;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 24px; font-size: 15px;
}
.wn_qb_privacy_modal.is-open { display: flex; align-items: center; justify-content: center; }
.wn_qb_privacy_inner {
    background-color: #fff; color: #222; border-radius: 16px;
    width: 100%; max-width: 640px; max-height: 80vh; overflow: hidden;
    position: relative; padding: 32px;
    display: flex; flex-direction: column;
}
.wn_qb_privacy_title { font-size: 20px; font-weight: 600; margin: 0 32px 16px 0; }
.wn_qb_privacy_close {
    position: absolute; right: 20px; top: 20px;
    background: none; border: 0; font-size: 20px; color: #666; cursor: pointer; padding: 4px;
}
.wn_qb_privacy_close:hover { color: #000; }
.wn_qb_privacy_body { overflow-y: auto; font-size: 14px; line-height: 1.7; color: #444; }

/* ── 좁은 PC·태블릿 ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .wn_qb { gap: 16px; padding: 10px 20px; }
    .wn_qb_desc { display: none; }
    .wn_qb_input { width: 118px; }
    .wn_qb_action span { display: none; }
    .wn_qb_action { padding: 0 15px; }
}

/* ── 태블릿·모바일: 바는 3버튼, 폼은 올라오는 시트 ───────────────────────────
   ★기준을 991px 로 잡는다. 768px 에서 PC 배치를 유지하면 제목·입력칸·동의·버튼이
     한 줄에 못 들어가 바가 두 줄(118px)로 접힌다(2026-09-10 실측). 화면을 절반 가까이
     덮으므로 그 폭부터는 3버튼 + 시트가 낫다. */
@media (max-width: 991px) {
    html.wn-qb-on body { padding-bottom: var(--wn-qb-h, 58px); }

    .wn_qb { padding: 0; gap: 0; display: block; }

    .wn_qb_actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; }
    .wn_qb_action {
        height: 58px; border: 0; border-radius: 0; background-color: #17171a; color: #fff;
        font-size: 14px; padding: 0; border-right: 1px solid #2b2b31;
    }
    .wn_qb_action:last-child { border-right: 0; }
    .wn_qb_action span { display: inline; }
    /* 위 .wn_qb_action 과 특정도가 같으므로 여기서 다시 칠해야 노란색이 남는다. */
    .wn_qb_action-kakao { background-color: #fee500; color: #191600; }
    .wn_qb_action-open { display: inline-flex; background-color: var(--theme, #992835); }
    .wn_qb_action-open:hover { background-color: #b3303f; }

    .wn_qb_panel {
        position: fixed; left: 0; right: 0; bottom: 58px;
        background-color: #17171a; padding: 22px 18px 26px;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
        transform: translateY(115%); visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
        max-height: calc(100vh - 130px); overflow-y: auto;
    }
    .wn_qb.is-open .wn_qb_panel { transform: translateY(0); visibility: visible; }

    .wn_qb_panel_close {
        display: block; position: absolute; right: 14px; top: 12px;
        background: none; border: 0; color: #9a9aa4; font-size: 18px; cursor: pointer;
        padding: 6px; line-height: 1;
    }
    .wn_qb_panel_close:hover { color: #fff; }

    .wn_qb_form { display: block; }
    .wn_qb_title { display: block; font-size: 17px; margin-bottom: 5px; }
    .wn_qb_desc { display: block; font-size: 13px; margin-bottom: 16px; white-space: normal; }
    .wn_qb_fields { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .wn_qb_input { width: 100%; height: 48px; font-size: 16px; }  /* 16px 미만이면 iOS 가 화면을 확대한다 */
    .wn_qb_agree { justify-content: flex-start; margin: 2px 0 6px; }
    .wn_qb_submit { width: 100%; height: 50px; font-size: 16px; }

    /* 시트를 열면 뒤 배경을 눌러 닫을 수 있게 한다 */
    .wn_qb_dim {
        display: block;
        position: fixed; inset: 0 0 58px; z-index: 899;
        background-color: rgba(0, 0, 0, 0.45); border: 0; padding: 0;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
    }
    .wn_qb_dim.is-open { opacity: 1; visibility: visible; }
}

/* 인쇄할 때는 빼 준다 */
@media print {
    .wn_qb, .wn_qb_privacy_modal, .wn_qb_dim { display: none !important; }
    html.wn-qb-on body { padding-bottom: 0; }
}