/* =========================================================
   QuantEstate Custom UI
   Theme color: #173262
   ========================================================= */

/* ---------------------------------------------------------
   1. FONT
   --------------------------------------------------------- */


body,
h1, h2, h3, h4, h5, h6,
p,
a,
span,
li,
button,
input,
textarea,
select,
label,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-button,
.elementor-icon-list-text {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Kaisei Decol을 쓰고 싶은 요소에 class="font-kaisei" */
.font-kaisei,
.font-kaisei *,
.font-kaisei .elementor-heading-title {
    font-family: "Kaisei Decol", serif !important;
}


/* ---------------------------------------------------------
   2. QUANTESTATE BUTTON SYSTEM
   사용법:
   class="qe-btn"
   class="qe-btn qe-btn--dark"
   class="qe-btn qe-btn--outline"
   --------------------------------------------------------- */

.qe-btn {
    --qe-btn-height: 48px;
    --qe-btn-padding: 20px;
    --qe-btn-bg: #ffffff;
    --qe-btn-color: #173262;
    --qe-btn-border: rgba(23, 50, 98, 0.12);

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: auto;
    min-width: 0;
    min-height: var(--qe-btn-height);
    padding: 0 var(--qe-btn-padding) !important;

    background: var(--qe-btn-bg) !important;
    border: 1px solid var(--qe-btn-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    color: var(--qe-btn-color) !important;
    font-family: "Pretendard Variable", Pretendard, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
    text-decoration: none !important;
    white-space: nowrap;

    cursor: pointer;
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

/* Elementor 컨테이너/Div에 qe-btn을 줬을 때 내부 링크까지 동일 규격 */
.qe-btn > a,
a.qe-btn {
    color: inherit !important;
    text-decoration: none !important;
}

/* 기본 화살표 */
.qe-btn::after {
    content: "→";
    display: inline-block;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform .25s ease;
}

.qe-btn:hover {
   

    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(23, 50, 98, 0.14) !important;
}

.qe-btn:hover::after {
    transform: translate(3px, -1px);
}


/* ---------------------------------------------------------
   3. BUTTON VARIANTS
   --------------------------------------------------------- */

/* Navy button */
.qe-btn--dark {
    --qe-btn-bg: #173262;
    --qe-btn-color: #ffffff;
    --qe-btn-border: #173262;
}

.qe-btn--dark:hover {
   
}

/* Outline button */
.qe-btn--outline {
    --qe-btn-bg: transparent;
    --qe-btn-color: #173262;
    --qe-btn-border: rgba(23, 50, 98, 0.35);
}

.qe-btn--outline:hover {
   
}

/* White button - navy/blue background section */
.qe-btn--white {
    --qe-btn-bg: #ffffff;
    --qe-btn-color: #173262;
    --qe-btn-border: rgba(255, 255, 255, 0.75);
}

.qe-btn--white:hover {
   
}


/* ---------------------------------------------------------
   4. BUTTON SIZES
   --------------------------------------------------------- */

.qe-btn--sm {
    --qe-btn-height: 40px;
    --qe-btn-padding: 16px;
    font-size: 13px !important;
}

.qe-btn--lg {
    --qe-btn-height: 56px;
    --qe-btn-padding: 26px;
    font-size: 15px !important;
}


/* ---------------------------------------------------------
   5. Elementor 대응
   --------------------------------------------------------- */

/* Elementor Button 위젯 자체에 qe-btn 클래스를 넣은 경우 */
.elementor-widget-button.qe-btn {
    padding: 0 !important;
    min-height: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.elementor-widget-button.qe-btn::after {
    content: none;
}

.elementor-widget-button.qe-btn .elementor-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;
    padding: 0 20px !important;

    background: #ffffff !important;
    border: 1px solid rgba(23, 50, 98, 0.12) !important;
    border-radius: 999px !important;

    color: #173262 !important;
    font-family: "Pretendard Variable", Pretendard, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    transition: all .25s ease;
}

.elementor-widget-button.qe-btn .elementor-button::after {
    content: "→";
    font-size: 16px;
    line-height: 1;
    transition: transform .25s ease;
}

.elementor-widget-button.qe-btn:hover .elementor-button {
   
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(23, 50, 98, 0.14) !important;
}

.elementor-widget-button.qe-btn:hover .elementor-button::after {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
    .qe-btn {
        --qe-btn-height: 44px;
        --qe-btn-padding: 18px;
        font-size: 13px !important;
    }

    .qe-btn--lg {
        --qe-btn-height: 50px;
        --qe-btn-padding: 22px;
        font-size: 14px !important;
    }

    .elementor-widget-button.qe-btn .elementor-button {
        min-height: 44px;
        padding: 0 18px !important;
        font-size: 13px !important;
    }
}
