/* =============================================================
   메인 버튼 (projects, inquiry)
   ============================================================= */


/* ==========================================================================
   1. 버튼 공통 기본 스타일
   ========================================================================== */

.projects,
.inquiry {
    position: relative;

    width: clamp(7.5rem, 9.16vw, 11rem);
    height: clamp(2.5rem, 3.125vw, 3.75rem);

    border-radius: 9999px;

    cursor: pointer;

    padding:
        0 clamp(0.4rem, 0.8vw, 1rem);

    display: inline-flex;

    justify-content: center;
    align-items: center;

    gap: clamp(0.2rem, 0.4vw, 0.5rem);

    overflow: hidden;

    box-sizing: border-box;

    z-index: 5;

    border: none !important;
    outline: none !important;

    white-space: nowrap;

    transition:
        transform 0.3s ease,
        background-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.3s ease;
}


/* ==========================================================================
   2. 포커스 / 클릭 외곽선 제거
   ========================================================================== */

.projects:focus,
.inquiry:focus,
.projects:active,
.inquiry:active {
    border: none !important;
    outline: none !important;
}


/* ==========================================================================
   3. 버튼 텍스트
   ========================================================================== */

.projects .btn-text,
.inquiry .btn-text,
.projects .btn-icon {
    position: relative;

    z-index: 10;

    font-size: clamp(0.75rem, 0.85vw, 1rem) !important;

    font-family: Pretendard, sans-serif !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    transition:
        color 0.3s ease;
}


.projects .btn-icon {
    font-size: clamp(0.7rem, 0.8vw, 0.95rem) !important;

    font-weight: 900 !important;

    margin-left: clamp(0.15rem, 0.25vw, 0.25rem);

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* ==========================================================================
   4. 버튼 기본 색상
   ========================================================================== */

.projects {
    background-color: #012554;

    color: #ffffff;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(255, 255, 255, 0.2);
}


.inquiry {
    background-color: #ffffff;

    color: #012554;

    border: 1px solid #ffffff !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   5. 기본 글자 색상
   ========================================================================== */

.projects .btn-text,
.projects .btn-icon {
    color: #ffffff !important;
}


.inquiry .btn-text {
    color: #012554 !important;
}


/* ==========================================================================
   6. 좌 → 우 색상 전환
   ========================================================================== */

.projects::before,
.inquiry::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;
}


.projects::before {
    background-color: #ffffff;
}


.inquiry::before {
    background-color: #012554;
}


.projects:hover::before,
.inquiry:hover::before {
    transform: scaleX(1);
}


/* ==========================================================================
   7. 호버
   ========================================================================== */

.projects:hover {
    background-color: #012554;

    color: #012554;

    transform: translateY(-4px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 255, 255, 0.4);
}


.projects:hover .btn-text,
.projects:hover .btn-icon {
    color: #012554 !important;
}

/* 호버 시 SVG 화살표 색상 변경 */
.projects:hover .btn-icon svg path {
    fill: #012554 !important;
    transition: fill 0.3s ease;
}


.inquiry:hover {
    background-color: #ffffff;

    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 255, 255, 0.4);
}


.inquiry:hover .btn-text {
    color: #ffffff !important;
}


.projects:hover .btn-icon {
    transform: translateX(4px);
}


/* ==========================================================================
   8. 빛 스쳐 지나가는 효과
   ========================================================================== */

.projects::after,
.inquiry::after {
    content: "";

    position: absolute;

    top: -50%;

    left: -150%;

    width: 50%;
    height: 200%;

    background:
        linear-gradient(
            60deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
        );

    transform: rotate(25deg);

    z-index: 4;

    pointer-events: none;

    transition: none;
}


.projects:hover::after,
.inquiry:hover::after {
    left: 150%;

    transition:
        left 0.75s ease-in-out;
}


/* ==========================================================================
   9. 클릭 눌림 효과
   ========================================================================== */

.projects:active,
.inquiry:active {
    transform: translateY(-1px);
}


/* ==========================================================================
   10. 모바일
   ========================================================================== */

@media (max-width: 767px) {

    .projects,
    .inquiry {
        width: clamp(7rem, 32vw, 9rem);
        height: clamp(2.5rem, 11vw, 3.25rem);
    }

    .projects .btn-text,
    .inquiry .btn-text {
        font-size: clamp(0.7rem, 3.2vw, 0.9rem) !important;
    }

    .projects .btn-icon {
        font-size: clamp(0.65rem, 3vw, 0.85rem) !important;
    }
}