/* =========================================================
   MeetBack Home
   흰색 + 보라색 기반 랜딩페이지 스타일
   ========================================================= */

:root {
    --mb-primary: #635bff;
    --mb-primary-strong: #5147f6;
    --mb-primary-soft: #8d86ff;
    --mb-primary-pale: #f1efff;

    --mb-text: #17182c;
    --mb-text-soft: #666b7a;
    --mb-text-muted: #8d91a1;

    --mb-bg: #f7f8ff;
    --mb-surface: rgba(255, 255, 255, 0.96);
    --mb-surface-soft: #fbfbff;

    --mb-border: #e7e8f2;
    --mb-border-strong: #d9dbeb;

    --mb-success: #2f9e62;
    --mb-success-bg: #edf9f2;

    --mb-danger: #d95757;
    --mb-danger-bg: #fff1f1;

    --mb-info: #5d64a8;
    --mb-info-bg: #f0f1ff;

    --mb-shadow-sm:
            0 8px 24px rgba(59, 54, 118, 0.06);

    --mb-shadow-md:
            0 16px 40px rgba(59, 54, 118, 0.10);

    --mb-shadow-button:
            0 10px 24px rgba(99, 91, 255, 0.24);

    --mb-radius-sm: 10px;
    --mb-radius-md: 16px;
    --mb-radius-lg: 22px;
}


/* =========================================================
   기본
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
            Pretendard,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            "Noto Sans KR",
            Arial,
            sans-serif;

    color: var(--mb-text);

    background:
            radial-gradient(
                    circle at 82% 6%,
                    rgba(128, 111, 255, 0.16) 0,
                    rgba(128, 111, 255, 0.06) 24%,
                    transparent 45%
            ),
            radial-gradient(
                    circle at 12% 20%,
                    rgba(88, 165, 255, 0.08) 0,
                    transparent 34%
            ),
            linear-gradient(
                    180deg,
                    #ffffff 0,
                    #fafaff 32%,
                    #f6f7ff 100%
            );

    line-height: 1.55;
}


/* =========================================================
   전체 레이아웃
   ========================================================= */

.home-container {
    width: min(
            1120px,
            calc(100% - 40px)
    );

    margin: 0 auto;

    padding:
            34px
            0
            70px;
}


/* =========================================================
   상단
   ========================================================= */

.home-header {
    position: relative;
    z-index: 100;

    display: flex;

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

    gap: 24px;

    margin-bottom: 28px;

    padding:
            20px
            24px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.88
            );

    border:
            1px solid
            rgba(
                    229,
                    230,
                    240,
                    0.95
            );

    border-radius: 18px;

    box-shadow:
            0 10px 34px
            rgba(
                    44,
                    43,
                    90,
                    0.06
            );

    backdrop-filter:
            blur(12px);

    overflow: visible;
}


.home-header::before {
    content: "";

    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    margin-right: -10px;

    border:
            4px solid
            var(--mb-primary);

    border-radius: 50%;
}


.home-header > div:first-child {
    flex: 1;

    min-width: 0;
}


.home-header h1 {
    margin: 0;

    font-size: 24px;
    font-weight: 800;

    letter-spacing: -0.8px;
}


.home-header h1::after {
    content: " •";

    color:
            var(--mb-primary);
}


.home-header > div:first-child > div {
    margin-top: 5px !important;

    color:
            var(--mb-text-soft) !important;

    font-size: 13px;
}


/* =========================================================
   헤더 오른쪽
   ========================================================= */

.home-header-actions {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   사용자 정보
   ========================================================= */

.user-info {
    min-width: 190px;

    padding:
            12px
            16px;

    background:
            linear-gradient(
                    135deg,
                    rgba(
                            242,
                            240,
                            255,
                            0.95
                    ),
                    rgba(
                            249,
                            248,
                            255,
                            0.95
                    )
            );

    border:
            1px solid
            #dfdcff;

    border-radius: 14px;

    color: #4b4e65;

    font-size: 13px;

    line-height: 1.7;

    box-shadow:
            inset 0 1px 0
            rgba(
                    255,
                    255,
                    255,
                    0.85
            );
}


/* =========================================================
   내 모임 메뉴
   ========================================================= */

.my-meeting-menu {
    position: relative;

    flex-shrink: 0;
}


/* =========================================================
   내 모임 버튼
   ========================================================= */

.my-meeting-toggle-button {
    width: auto;

    min-width: 110px;
    min-height: 42px;

    padding:
            10px
            16px;

    color: #ffffff;

    background:
            linear-gradient(
                    135deg,
                    #6b63ff 0%,
                    #584ef6 100%
            );

    border: 0;

    border-radius: 11px;

    box-shadow:
            0 8px 18px
            rgba(
                    99,
                    91,
                    255,
                    0.20
            );

    white-space: nowrap;
}


.my-meeting-toggle-button:hover:not(:disabled) {
    color: #ffffff;

    background:
            linear-gradient(
                    135deg,
                    #5e56fb 0%,
                    #4e44ef 100%
            );

    border-color:
            transparent;
}


/* =========================================================
   내 모임 드롭다운
   ========================================================= */

.my-meeting-list {
    position: absolute;

    top:
            calc(
                    100% + 8px
            );

    right: 0;

    width: 430px;

    max-height: 320px;

    margin: 0;
    padding: 0;

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;

    border:
            1px solid
            var(--mb-border-strong);

    border-radius: 12px;

    box-shadow:
            0 14px 34px
            rgba(
                    44,
                    43,
                    90,
                    0.16
            );

    z-index: 9999;
}


/* =========================================================
   내 모임 아이템
   ========================================================= */

.my-meeting-item {
    display: flex;

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

    gap: 16px;

    padding:
            14px
            16px;

    background: #ffffff;

    border-bottom:
            1px solid
            var(--mb-border);

    transition:
            background
            0.16s ease;
}


.my-meeting-item:last-child {
    border-bottom: none;
}


.my-meeting-item:hover {
    background: #f8f7ff;
}


/* =========================================================
   내 모임 제목
   ========================================================= */

.my-meeting-title {
    flex: 1;

    min-width: 0;

    color: #252638;

    font-size: 14px;
    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   내 모임 초대코드
   ========================================================= */

.my-meeting-code-area {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}


.my-meeting-code-label {
    color:
            var(--mb-text-muted);

    font-size: 11px;
}


.my-meeting-code-button {
    min-height: 30px;

    padding:
            5px
            9px;

    color:
            var(--mb-primary-strong);

    background:
            var(--mb-primary-pale);

    border:
            1px solid
            #d9d5ff;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;
}


.my-meeting-code-button:hover:not(:disabled) {
    color:
            var(--mb-primary-strong);

    background: #e8e5ff;

    border-color: #c9c4ff;
}


/* =========================================================
   내 모임 없음
   ========================================================= */

.my-meeting-empty {
    padding: 20px;

    color:
            var(--mb-text-muted);

    background: #ffffff;

    font-size: 13px;

    text-align: center;
}


/* =========================================================
   내 모임 스크롤바
   ========================================================= */

.my-meeting-list::-webkit-scrollbar {
    width: 6px;
}


.my-meeting-list::-webkit-scrollbar-thumb {
    background: #d9d7e7;

    border-radius: 999px;
}


/* =========================================================
   공통 Section
   ========================================================= */

.section {
    position: relative;
    z-index: 1;

    overflow: hidden;

    margin-bottom: 24px;

    padding: 30px;

    background:
            var(--mb-surface);

    border:
            1px solid
            var(--mb-border);

    border-radius:
            var(--mb-radius-lg);

    box-shadow:
            var(--mb-shadow-sm);
}


.section::after {
    content: "";

    position: absolute;

    top: -90px;
    right: -90px;

    width: 200px;
    height: 200px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(
                            115,
                            99,
                            255,
                            0.10
                    ) 0,
                    rgba(
                            115,
                            99,
                            255,
                            0.03
                    ) 48%,
                    transparent 70%
            );

    pointer-events: none;
}


.section h2 {
    position: relative;

    z-index: 1;

    margin:
            0
            0
            8px;

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -0.7px;
}


.section h2::before {
    content: "";

    display: inline-block;

    width: 7px;
    height: 22px;

    margin-right: 10px;

    vertical-align: -3px;

    border-radius: 99px;

    background:
            linear-gradient(
                    180deg,
                    var(--mb-primary-soft),
                    var(--mb-primary)
            );
}


.section-description {
    position: relative;

    z-index: 1;

    margin:
            0
            0
            24px;

    color:
            var(--mb-text-soft);

    font-size: 14px;
}


/* =========================================================
   모임 카드 영역
   ========================================================= */

.meeting-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                    0,
                    1fr
            )
        );

    gap: 22px;
}


.meeting-card {
    position: relative;

    min-width: 0;

    padding: 26px;

    background:
            linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #fcfcff 100%
            );

    border:
            1px solid
            var(--mb-border);

    border-radius: 18px;

    box-shadow:
            0 10px 28px
            rgba(
                    55,
                    52,
                    108,
                    0.05
            );

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
}


.meeting-card:hover {
    transform:
            translateY(-2px);

    border-color:
            #d9d5ff;

    box-shadow:
            var(--mb-shadow-md);
}


.meeting-card::before {
    content: "";

    display: block;

    width: 34px;
    height: 5px;

    margin-bottom: 18px;

    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    var(--mb-primary),
                    #9d95ff
            );
}


.meeting-card h3 {
    margin:
            0
            0
            7px;

    font-size: 18px;
    font-weight: 800;

    letter-spacing: -0.45px;
}


.meeting-card-description {
    min-height: 62px;

    margin-bottom: 22px;

    color:
            var(--mb-text-soft);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   입력창
   ========================================================= */

.field {
    margin-bottom: 18px;
}


.field select {
    width: 100%;

    min-height: 44px;

    padding:
            11px
            13px;

    color:
            var(--mb-text);

    background: #ffffff;

    border:
            1px solid
            var(--mb-border-strong);

    border-radius: 11px;

    outline: none;

    font-size: 14px;

    cursor: pointer;

    transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease,
            background 0.18s ease;
}


.field select:hover {
    border-color: #c8c9dd;
}


.field select:focus {
    border-color:
            var(--mb-primary);

    box-shadow:
            0 0 0 4px
            rgba(
                    99,
                    91,
                    255,
                    0.10
            );
}


label {
    display: block;

    margin-bottom: 8px;

    color: #35374b;

    font-size: 13px;
    font-weight: 700;
}


input {
    width: 100%;

    min-height: 44px;

    padding:
            11px
            13px;

    color:
            var(--mb-text);

    background: #ffffff;

    border:
            1px solid
            var(--mb-border-strong);

    border-radius: 11px;

    outline: none;

    font-size: 14px;

    transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease,
            background 0.18s ease;
}


input::placeholder {
    color: #aaadba;
}


input:hover {
    border-color: #c8c9dd;
}


input:focus {
    border-color:
            var(--mb-primary);

    background: #ffffff;

    box-shadow:
            0 0 0 4px
            rgba(
                    99,
                    91,
                    255,
                    0.10
            );
}


input[type="datetime-local"] {
    color-scheme: light;
}


/* =========================================================
   버튼
   ========================================================= */

button {
    min-height: 42px;

    padding:
            10px
            17px;

    color: #393b4f;

    background: #ffffff;

    border:
            1px solid
            var(--mb-border-strong);

    border-radius: 11px;

    font: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
            transform 0.16s ease,
            background 0.16s ease,
            border-color 0.16s ease,
            box-shadow 0.16s ease;
}


button:hover:not(:disabled) {
    transform:
            translateY(-1px);

    background: #f9f9ff;

    border-color: #cfcbed;
}


button:active:not(:disabled) {
    transform:
            translateY(0);
}


button:focus-visible {
    outline:
            3px solid
            rgba(
                    99,
                    91,
                    255,
                    0.22
            );

    outline-offset: 2px;
}


button:disabled {
    cursor: not-allowed;

    opacity: 0.52;

    transform: none;
}


/* =========================================================
   Primary 버튼
   ========================================================= */

.primary-button {
    width: 100%;

    color: #ffffff;

    background:
            linear-gradient(
                    135deg,
                    #6b63ff 0%,
                    #584ef6 100%
            );

    border-color:
            transparent;

    box-shadow:
            var(--mb-shadow-button);
}


.primary-button:hover:not(:disabled) {
    background:
            linear-gradient(
                    135deg,
                    #5e56fb 0%,
                    #4e44ef 100%
            );

    border-color:
            transparent;

    box-shadow:
            0 12px 28px
            rgba(
                    99,
                    91,
                    255,
                    0.30
            );
}


/* =========================================================
   Danger 버튼
   ========================================================= */

.danger-button {
    color: #cf4f4f;

    background: #fffafa;

    border-color: #f0cccc;
}


.danger-button:hover:not(:disabled) {
    color: #bb3e3e;

    background:
            var(--mb-danger-bg);

    border-color: #eebcbc;
}


/* =========================================================
   계정 버튼
   ========================================================= */

.account-buttons {
    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.account-buttons button {
    min-width: 120px;
}


/* =========================================================
   메시지
   ========================================================= */

.message {
    display: none;

    position: fixed;

    top: 24px;
    left: 50%;

    z-index: 99999;

    min-width: 320px;

    max-width:
            calc(
                    100vw - 32px
            );

    margin: 0;

    padding:
            15px
            18px;

    border:
            1px solid
            transparent;

    border-radius: 13px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.6;

    text-align: center;

    box-shadow:
            0 10px 30px
            rgba(
                    35,
                    32,
                    61,
                    0.15
            );

    transform:
            translateX(-50%);
}


.message.show {
    display: block;
}


.message-success {
    color: #267a4b;

    background:
            var(--mb-success-bg);

    border-color: #bde9d1;
}


.message-error {
    color: #bd4444;

    background:
            var(--mb-danger-bg);

    border-color: #f2c2c2;
}


.message-info {
    color: #575d98;

    background:
            var(--mb-info-bg);

    border-color: #d8dafa;
}


/* =========================================================
   모임 생성 / 참가 결과
   ========================================================= */

.meeting-result {
    display: none;

    margin-top: 20px;

    padding: 17px;

    color: #45485d;

    background:
            linear-gradient(
                    135deg,
                    #f4f3ff,
                    #f9f9ff
            );

    border:
            1px solid
            #ddd9ff;

    border-radius: 13px;

    line-height: 1.8;

    box-shadow:
            inset 0 1px 0
            rgba(
                    255,
                    255,
                    255,
                    0.9
            );
}


.meeting-result.show {
    display: block;
}


.meeting-result strong {
    color: #323448;
}


/* =========================================================
   생성된 초대코드 버튼
   ========================================================= */

.created-invite-area {
    margin-top: 12px;
}


.created-invite-button {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
            10px
            14px;

    border:
            1px solid
            #ddd;

    border-radius: 10px;

    background: #f8f8ff;

    color: #444;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
            background 0.2s,
            transform 0.2s;
}


.created-invite-button:hover:not(:disabled) {
    background: #eeeeff;

    transform:
            translateY(-1px);
}


.created-invite-button:disabled {
    cursor: default;

    opacity: 0.5;
}


/* =========================================================
   회원탈퇴 확인
   ========================================================= */

#withdrawConfirm {
    position: relative;

    z-index: 1;

    margin-top: 18px;

    padding: 18px;

    color: #a94848;

    background: #fff8f8;

    border:
            1px solid
            #f0caca;

    border-radius: 13px;
}


#withdrawConfirm button {
    margin-right: 7px;
}


/* =========================================================
   선택 영역
   ========================================================= */

::selection {
    color: #ffffff;

    background:
            var(--mb-primary);
}


/* =========================================================
   태블릿
   ========================================================= */

@media (max-width: 900px) {

    .home-container {
        width:
                min(
                        calc(100% - 28px),
                        760px
                );

        padding-top: 22px;
    }


    .meeting-grid {
        grid-template-columns:
            1fr;
    }


    .meeting-card-description {
        min-height: 0;
    }


    .home-header {
        align-items: flex-start;
    }


    .home-header-actions {
        align-items: stretch;
    }

}


/* =========================================================
   모바일
   ========================================================= */

@media (max-width: 650px) {

    .home-container {
        width:
                calc(
                        100% - 22px
                );

        padding:
                14px
                0
                40px;
    }


    .home-header {
        flex-direction: column;

        align-items: stretch;

        padding: 18px;
    }


    .home-header::before {
        position: absolute;

        top: 22px;
        right: 20px;

        margin: 0;
    }


    .home-header-actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .user-info {
        min-width: 0;
    }


    .my-meeting-menu {
        width: 100%;
    }


    .my-meeting-toggle-button {
        width: 100%;
    }


    .my-meeting-list {
        top:
                calc(
                        100% + 8px
                );

        right: 0;
        left: auto;

        width: 100%;

        max-height: 280px;
    }


    .section {
        padding:
                21px
                17px;

        border-radius: 17px;
    }


    .section h2 {
        font-size: 19px;
    }


    .meeting-card {
        padding:
                20px
                17px;

        border-radius: 15px;
    }


    .account-buttons {
        flex-direction: column;
    }


    .account-buttons button {
        width: 100%;
    }


    #withdrawConfirm button {
        width: 100%;

        margin:
                7px
                0
                0;
    }


    .my-meeting-item {
        gap: 10px;

        padding:
                13px
                14px;
    }


    .my-meeting-code-label {
        display: none;
    }

}
/* =========================================================
   지금 바로 번개 - 홈
   ========================================================= */

.quick-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


.quick-section-header h2 {
    margin-bottom: 8px;
}


.quick-all-link {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    color: var(--mb-text-soft);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


.quick-all-link:hover {
    color: var(--mb-primary);
}


/* 홈 화면 번개 목록 */
.quick-meeting-list {
    display: flex;

    gap: 14px;

    overflow-x: auto;

    padding:
            8px
            2px
            14px;
}


/* =========================================================
   번개 카드 공통
   ========================================================= */

.quick-meeting-card {
    flex: 0 0 250px;

    padding: 20px;

    background: #ffffff;

    border:
            1px solid
            #dddaf5;

    border-radius: 16px;

    box-shadow:
            0 8px 20px
            rgba(59, 54, 118, 0.08);

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
}


.quick-meeting-card:hover {
    transform:
            translateY(-2px);

    border-color:
            #d9d5ff;

    box-shadow:
            var(--mb-shadow-md);
}


.quick-meeting-title {
    margin-bottom: 8px;

    color:
            var(--mb-text);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -0.3px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.quick-meeting-end {
    margin-bottom: 16px;

    color:
            var(--mb-text-soft);

    font-size: 12px;
}


.quick-meeting-join-button {
    width: 100%;

    color: #ffffff;

    background:
            var(--mb-primary);

    border-color:
            var(--mb-primary);
}


.quick-meeting-join-button:hover:not(:disabled) {
    color: #ffffff;

    background:
            var(--mb-primary-strong);

    border-color:
            var(--mb-primary-strong);
}


.quick-meeting-empty {
    width: 100%;

    padding: 24px;

    color:
            var(--mb-text-muted);

    background:
            var(--mb-surface-soft);

    border:
            1px dashed
            var(--mb-border-strong);

    border-radius: 14px;

    text-align: center;

    font-size: 13px;
}


/* =========================================================
   번개 전체보기 페이지
   ========================================================= */


.quick-home-link {
    position: relative;
    z-index: 2;

    color:
            var(--mb-text-soft);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


.quick-home-link:hover {
    color:
            var(--mb-primary);
}


/* =========================================================
   검색
   ========================================================= */

.quick-search-area {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;
}


.quick-search-input {
    flex: 1;

    min-width: 0;
}


.quick-search-button {
    flex: 0 0 auto;

    width: auto;
    min-width: 90px;

    color: #ffffff;

    background:
            var(--mb-primary);

    border-color:
            var(--mb-primary);
}


.quick-search-button:hover:not(:disabled) {
    color: #ffffff;

    background:
            var(--mb-primary-strong);

    border-color:
            var(--mb-primary-strong);
}


/* =========================================================
   전체보기 번개 목록
   ========================================================= */

.quick-meeting-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    width: 100%;
}


/* 홈의 flex: 0 0 250px 제거 */
.quick-meeting-grid .quick-meeting-card {
    flex: none;

    width: 100%;
    min-width: 0;

    padding: 24px;
}


.quick-meeting-grid .quick-meeting-title {
    margin-bottom: 12px;

    font-size: 18px;
}


.quick-meeting-grid .quick-meeting-end {
    margin-bottom: 20px;

    font-size: 13px;
}


.quick-meeting-grid .quick-meeting-join-button {
    width: 100%;
}


/* =========================================================
   스크롤바
   ========================================================= */

.quick-meeting-list::-webkit-scrollbar {
    height: 7px;
}


.quick-meeting-list::-webkit-scrollbar-thumb {
    background:
            #d7d6df;

    border-radius: 999px;
}


.quick-meeting-list::-webkit-scrollbar-track {
    background:
            transparent;
}


/* =========================================================
   태블릿
   ========================================================= */

@media (max-width: 900px) {

    .quick-meeting-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   모바일
   ========================================================= */

@media (max-width: 650px) {

    .quick-search-area {
        flex-direction: column;

        align-items: stretch;
    }


    .quick-search-button {
        width: 100%;
    }


    .quick-meeting-grid {
        grid-template-columns:
            1fr;
    }


    .quick-meeting-card {
        flex-basis: 230px;
    }

}

.quick-title-row {
    display: flex;

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

    gap: 16px;

    margin-bottom: 8px;
}


.quick-title-row h2 {
    margin: 0;
}


.quick-home-link {
    position: relative;

    z-index: 2;

    flex-shrink: 0;

    color:
            var(--mb-text-soft);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


.quick-home-link:hover {
    color:
            var(--mb-primary);
}
.quick-meeting-host {
    margin-bottom: 8px;

    color:
            var(--mb-text-soft);

    font-size: 13px;
    font-weight: 600;
}

/* =========================================================
   번개 전체보기 카드 높이 / 정렬
   ========================================================= */

.page-quick-meetings
.quick-meeting-grid
.quick-meeting-card {
    display: flex;
    flex-direction: column;

    min-height: 430px;
}


/* 제목 영역 높이 통일 */

.page-quick-meetings
.quick-meeting-grid
.quick-meeting-title {
    min-height: 54px;

    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* 방 종류 한 줄 영역 */

.page-quick-meetings
.quick-meeting-type {
    min-height: 22px;
}


/* 버튼은 항상 카드 맨 아래 */

.page-quick-meetings
.quick-meeting-grid
.quick-meeting-join-button {
    margin-top: auto;
}


/* =========================================================
   번개 전체보기 페이징
   ========================================================= */

.quick-pagination {
    position: relative;
    z-index: 1;

    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;

    min-height: 42px;

    margin-top: 30px;
}


.quick-page-button {
    display: inline-flex;

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

    width: 40px;
    height: 40px;

    padding: 0;

    color: #666b7a;

    background: #ffffff;

    border: 1px solid #e7e8f2;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
            background 0.18s ease,
            color 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease;
}


.quick-page-button:hover:not(:disabled) {
    color: var(--mb-primary);

    background: var(--mb-primary-pale);

    border-color: #cbc7ff;

    transform: translateY(-1px);
}


.quick-page-button.is-current {
    color: #ffffff;

    background: var(--mb-primary);

    border-color: var(--mb-primary);

    box-shadow:
            0 8px 18px
            rgba(99, 91, 255, 0.20);
}


.quick-page-button:disabled {
    opacity: 0.35;

    cursor: default;
}


/* =========================================================
   모바일
   ========================================================= */

@media (max-width: 650px) {

    .page-quick-meetings
    .quick-meeting-grid
    .quick-meeting-card {
        min-height: 410px;
    }


    .quick-page-button {
        width: 36px;
        height: 36px;
    }

}