/* =========================
           기본 설정
        ========================= */
        @import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-round.css');

* {
  font-family: 'NanumSquareRound', sans-serif !important;
  font-weight: 500;
}

button,
nav,
.category,
.login {
  font-family: 'NanumSquareRound', sans-serif !important;
  font-weight: 700 !important;
}

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
    color: #333333;
    background-color: #ffffff;
    font-family: "Gowun Dodum", sans-serif;
    }

        button {
            font-family: inherit;
        }

        /* =========================
           홈페이지 상단 헤드
        ========================= */

        header {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 22px 0;

            background-color: #ffffff;
            border-bottom: 1px solid #eeeeee;
        }

        /* 로고 링크 */
        header a {
            display: block;
        }

        /* 로고 사진 */
        header img {
            width: 208px;
            height: auto;
            display: block;
            object-fit: contain;
        }

        /* =========================
           카테고리 메뉴
        ========================= */

        .desktop-favorite-button {position:absolute;right:max(28px,calc((100vw - 1440px)/2 + 24px));top:50%;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid #e7d9cf;border-radius:999px;background:#fff;color:#76533a;transform:translateY(-50%);cursor:pointer;box-shadow:0 5px 18px rgba(83,52,31,.06)}
        .desktop-favorite-button:hover{background:#faf4ef;border-color:#b98b68}
        .site-footer{margin-top:70px;border-top:1px solid #eadfd7;background:#faf7f4;color:#74675f}.site-footer-inner{width:min(1200px,calc(100% - 48px));margin:auto;padding:34px 0 110px}.site-footer-inner>strong{display:block;margin-bottom:13px;color:#332820;font-size:18px}.site-footer-lines{display:flex;flex-wrap:wrap;gap:7px 18px;font-size:13px;line-height:1.6}.site-footer-actions{display:flex;gap:12px;margin-top:16px}.site-footer-actions button{padding:0;border:0;background:transparent;color:#4d4038;font-size:13px;cursor:pointer;font-weight:800!important}.site-footer-inner>p{margin:14px 0 0;white-space:pre-wrap;font-size:12px;line-height:1.65}.site-legal-dialog{width:min(760px,calc(100% - 32px));max-height:82vh;padding:0;border:0;border-radius:20px;color:#332820;box-shadow:0 20px 70px #2e211a45}.site-legal-dialog::backdrop{background:#2a211c80}.site-legal-dialog article>header{position:sticky;top:0;display:flex;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #eadfd7;background:#fff}.site-legal-dialog h2{margin:0;font-size:21px}.site-legal-dialog header button{display:grid;width:38px;height:38px;place-items:center;padding:0;border:0;border-radius:50%;background:#f7f1ec;font-size:25px;cursor:pointer}#siteLegalContent{padding:24px;white-space:pre-wrap;line-height:1.8}
        @media(max-width:800px){.desktop-favorite-button{display:none}.site-footer{margin-top:42px}.site-footer-inner{width:calc(100% - 36px);padding:28px 0 110px}}

        nav {
            position: relative;
            z-index: 10;

            width: 100%;

            display: flex;
            justify-content: center;
            align-items: stretch;

            background-color: #ffffff;
            border-bottom: 1px solid #eeeeee;
        }

        /* 가운데 카테고리 묶음 */
        .category-menu {
            display: flex;
            justify-content: safe center;
            align-items: stretch;
            max-width: 100%;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .category-menu::-webkit-scrollbar { display: none; }

        .category-button {
            flex: 0 0 220px;
            width: 220px;
            padding: 20px 10px;

            border: none;
            border-bottom: 3px solid transparent;

            color: #333333;
            background-color: #ffffff;

            font-size: 17px;
            cursor: pointer;

            transition:
                color 0.3s ease,
                background-color 0.3s ease,
                border-color 0.3s ease;
        }

        .category-button:hover {
            color: #8b5e3c;
            background-color: #faf7f3;
        }

        .category-button.active {
            color: #8b5e3c;
            font-weight: 700;
            border-bottom-color: #8b5e3c;
        }

        /* =========================
           카테고리 페이지
        ========================= */

        main {
            width: 100%;

            /* 슬라이드가 화면 밖으로 보이지 않게 설정 */
            overflow: hidden;
        }

        /* 선택되지 않은 페이지 숨김 */
        .category-page {
            display: none;
        }

        /* 선택된 페이지 표시 */
        .category-page.active {
            display: block;

            /* 페이지 전환 효과 */
            animation: pageSlide 1.1s ease;
        }

        /* 오른쪽에서 왼쪽으로 나타나는 효과 */
        @keyframes pageSlide {
            from {
                opacity: 0;
                transform: translateX(70px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* =========================
           배너 공통 설정
        ========================= */

        /* =========================
   반응형 배너
========================= */

.banner {
    width: 100%;

    /* 화면 너비에 따라 높이가 자동으로 변함 */
    min-height: clamp(320px, 37.5vw, 600px);

    padding: clamp(25px, 5vw, 70px) 8%;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 지역 모임 배너 */
.local-banner {
    background-image: url("../사진/배너/1.png");
    background-position: 40% center;
}

/* 요양원 배너 */
.care-banner {
    background-image: url("../사진/배너/4.png");
}

/* 프리미엄 매칭 배너 */
.matching-banner {
    background-image: url("../사진/배너/2.png");
}

/* 배너 글자 영역 */
.banner-text {
    width: 470px;
    max-width: 45%;
    padding: 28px;

    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

    /* 모든 글자 가운데 정렬 */
    text-align: center;
}

.banner-text h1 {
    margin: 12px 0 16px;

    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.35;
}

.banner-text p {
    margin: 0 0 28px;

    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.7;
}

        .banner-text button {
    display: block;

    width: 65%;
    max-width: 320px;
    min-width: 230px;

    margin: 0 auto;
    padding: 14px 20px;

    border: none;
    border-radius: 7px;

    color: #ffffff;
    background-color: #8b5e3c;

    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;

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

.banner-text button:hover {
    background-color: #70472d;
    transform: translateY(-2px);
}

        .banner-text button:hover {
            background-color: #70472d;
            transform: translateY(-2px);
        }

        /* =========================
           배너 아래 내용
        ========================= */

        .page-content {
            width: 100%;
            max-width: 1200px;
            min-height: 300px;

            margin: 0 auto;
            padding: 50px 20px;
        }

        .page-content h2 {
            margin: 0 0 15px;
            font-size: 28px;
        }

        .page-content p {
            margin: 0;

            color: #666666;
            font-size: 16px;
            line-height: 1.7;
        }

        /* 모바일 앱 전용 요소: 데스크톱에서는 숨김 */
        .mobile-app-header,
        .mobile-fixed-banner,
        .mobile-fixed-category,
        .mobile-category-strip,
        .mobile-bottom-bar {
            display: none;
        }

        /* =========================
   태블릿 화면
========================= */

@media (max-width: 1025px) {
    .banner {
        min-height: 430px;
        padding: 35px 5%;

        /* 사진 속 인물이 오른쪽에 있을 때 적합 */
        background-position: 65% center;
    }

    .local-banner {
        background-position: 55% center;
    }

    .banner-text {
        width: 60%;
    }
}
@media (min-width: 701px) and (max-width: 1000px) {
    nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .category-menu { display: contents; }

    .category-button {
        position: static;
        width: 100%;
        min-width: 0;
        padding: 20px 5px;
        transform: none;
        white-space: nowrap;
    }

}

/* 지역 모임 동네 설정창 */
.meeting-location-modal[hidden] { display: none; }

.meeting-location-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.meeting-location-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 26, 20, 0.48);
    backdrop-filter: blur(3px);
}

.meeting-location-dialog {
    position: relative;
    width: min(100%, 500px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(49, 32, 22, 0.24);
}

.meeting-location-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.meeting-location-dialog-header h2 { margin: 0 0 7px; color: #332820; font-size: 23px; }
.meeting-location-dialog-header p { margin: 0; color: #85776e; font-size: 14px; line-height: 1.5; }
.meeting-location-close { border: 0; background: transparent; color: #7d6b60; font-size: 28px; cursor: pointer; }

.meeting-gps-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    padding: 15px 16px;
    border: 1px solid #9a6741;
    border-radius: 14px;
    background: #faf7f3;
    color: #6f4930;
    text-align: left;
    cursor: pointer;
}

.meeting-gps-button > span:first-child { font-size: 26px; }
.meeting-gps-button strong, .meeting-gps-button small { display: block; }
.meeting-gps-button small { margin-top: 4px; color: #8a7b71; font-size: 12px; }
.meeting-location-body label { display: block; margin-bottom: 8px; color: #53463e; font-size: 14px; font-weight: 700; }
.meeting-location-body input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid #dfd1c7; border-radius: 12px; outline: none; font-size: 15px; }
.meeting-location-body input:focus { border-color: #9a6741; box-shadow: 0 0 0 3px rgba(154, 103, 65, 0.1); }
.meeting-location-body input.invalid { border-color: #d34f4f; }
.meeting-location-error { min-height: 18px; margin: 7px 2px 0; color: #d34f4f; font-size: 12px; }
.meeting-location-help { margin: 7px 2px 22px; color: #93857c; font-size: 12px; }
.meeting-popular-location > strong { display: block; margin-bottom: 11px; color: #53463e; font-size: 14px; }
.meeting-location-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.meeting-location-chips button { padding: 10px 13px; border: 1px solid #e5d8cf; border-radius: 999px; background: #faf7f3; color: #675548; font-size: 13px; cursor: pointer; }
.meeting-location-chips button.selected { border-color: #9a6741; background: #9a6741; color: #fff; }
.meeting-location-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 27px; }
.meeting-location-actions button { height: 50px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.meeting-location-cancel { border: 1px solid #ddd1c8; background: #fff; color: #67584f; }
.meeting-location-save { border: 0; background: #9a6741; color: #fff; }

@media (max-width: 500px) {
    .meeting-location-modal { align-items: end; padding: 0; }
    .meeting-location-dialog { width: 100%; max-height: 88vh; padding: 24px 20px; border-radius: 24px 24px 0 0; }
}

/* 요양원 검색 지역 선택창 */
.care-location-modal[hidden] { display: none; }

.care-location-modal {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.care-location-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 25, 19, 0.48);
    backdrop-filter: blur(3px);
}

.care-location-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(38, 25, 17, 0.25);
}

.care-location-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.care-location-dialog-header h2 { margin: 0 0 7px; color: #332820; font-size: 23px; }
.care-location-dialog-header p { margin: 0; color: #85776e; font-size: 14px; line-height: 1.5; }

.care-location-close {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f7f2ee;
    color: #67584f;
    font-size: 27px;
    cursor: pointer;
}

.care-location-body label { display: block; margin-bottom: 8px; color: #53463e; font-size: 14px; font-weight: 700; }
.care-location-body input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid #dfd1c7; border-radius: 12px; outline: none; font-size: 15px; }
.care-location-body input:focus { border-color: #9a6741; box-shadow: 0 0 0 3px rgba(154, 103, 65, 0.1); }
.care-location-body input.invalid { border-color: #d34f4f; box-shadow: 0 0 0 3px rgba(211, 79, 79, 0.1); }
.care-location-error { min-height: 18px; margin: 7px 2px 0; color: #d34f4f; font-size: 12px; line-height: 1.4; }
.care-location-help { margin: 7px 2px 24px; color: #93857c; font-size: 12px; }
.care-popular-location > strong { display: block; margin-bottom: 11px; color: #53463e; font-size: 14px; }
.care-location-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.care-location-chips button { padding: 10px 13px; border: 1px solid #e5d8cf; border-radius: 999px; background: #faf7f3; color: #675548; font-size: 13px; cursor: pointer; }
.care-location-chips button.selected { border-color: #9a6741; background: #9a6741; color: #ffffff; }

.care-location-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 28px; }
.care-location-actions button { height: 50px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.care-location-cancel { border: 1px solid #ddd1c8; background: #ffffff; color: #67584f; }
.care-location-save { border: 0; background: #9a6741; color: #ffffff; }
body.modal-open { overflow: hidden; }

@media (max-width: 700px) {
    .care-location-bar {
        display: flex;
        min-height: 76px;
        margin-bottom: 24px;
        padding: 13px 14px;
    }
    .care-location-bar .desktop-location-icon { width: 40px; height: 40px; }
    .care-location-bar .care-location-name { font-size: 14px; }
    .care-location-bar .desktop-location-info p { font-size: 12px; }
    .care-location-bar .desktop-location-change { min-width: 76px; padding: 10px 11px; font-size: 12px; }
    .care-location-dialog { padding: 23px 20px; border-radius: 20px; }
}

/* =========================
   모바일 화면
========================= */

@media (max-width: 700px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    body { padding-bottom: 76px; }

    body > header,
    body > nav { display: none; }

    .mobile-app-header {
        display: block;
        padding: 18px 18px 14px;
        background: #ffffff;
    }

    .mobile-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }

    .mobile-location {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #222222;
        font-size: 19px;
        font-weight: 800 !important;
        cursor: pointer;
    }

    .mobile-location svg { color: #9a6741; }

    .mobile-brand {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }

    .mobile-brand img {
        width: auto;
        height: 50px;
        display: block;
        object-fit: contain;
    }

    .mobile-top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-alert,
    .mobile-chat {
        position: relative;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #f7f3ef;
        color: #5b4638;
        cursor: pointer;
    }

    .mobile-alert.has-unread::after,
    .mobile-alert.has-unread-notification::after,
    .mobile-chat.has-unread::after {
        content: "";
        position: absolute;
        top: 7px;
        right: 7px;
        width: 8px;
        height: 8px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: #e55353;
        box-shadow: 0 0 7px rgba(229, 83, 83, 0.8);
    }

    #mobileNotificationBadge.quick-bar-badge{position:absolute;right:-5px;bottom:-5px;top:auto;display:none;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border:2px solid #fff;border-radius:999px;background:#b84338;color:#fff;font-size:10px;line-height:1}
    #mobileNotificationBadge.quick-bar-badge.active{display:flex}

    .mobile-search {
        height: 48px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 15px;
        border: 1px solid #eee7e1;
        border-radius: 13px;
        background: #faf8f6;
        color: #777777;
    }

    .mobile-search input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #333333;
        font-size: 14px;
    }

    /* 페이지 안의 개별 배너와 반복 카테고리는 모바일에서 완전히 숨김 */
    .category-page > .banner,
    .category-page > .mobile-category-strip {
        display: none !important;
    }

    /* 페이지 밖에 고정된 모바일 공용 배너 */
    .mobile-fixed-banner {
        display: block !important;
        position: relative;
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        height: clamp(190px, 56.25vw, 225px);
        overflow: hidden;
        touch-action: pan-y;
        background: #f4eee8;
        isolation: isolate;
    }

    .mobile-banner-track {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 100%;
        transition: transform .45s cubic-bezier(.22, .61, .36, 1);
        will-change: transform;
    }

    .mobile-banner-slide {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mobile-banner-dots {
        position: absolute;
        z-index: 2;
        left: 50%;
        bottom: 13px;
        display: flex;
        gap: 7px;
        transform: translateX(-50%);
    }

    .mobile-banner-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .6);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
        transition: width .25s ease, background-color .25s ease;
        cursor: pointer;
    }

    .mobile-banner-dot.active {
        width: 20px;
        background: #ffffff;
    }

    /* 페이지 밖에 고정된 모바일 공용 카테고리 */
    .mobile-fixed-category {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        padding: 18px 16px 16px;
        background: #ffffff;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .mobile-fixed-category .mobile-category-button {
        width: 100%;
        min-width: 0;
        padding: 13px 5px;
        white-space: nowrap;
    }

    /* 이 아래에는 기존 배너 모바일 코드 유지 */
    .banner {
        position: relative;
        min-height: 330px;
        padding: 0;

        display: flex;
        align-items: flex-end;
        justify-content: center;

        background-position: 70% center;
        transition: none;
    }

    /* 모바일 배너는 사진만 표시 */
    .banner-text { display: none; }

    /* 모바일에서는 카테고리 페이지를 효과 없이 즉시 전환 */
    .category-page.active {
        animation: none !important;
        transform: none !important;
    }

    .mobile-category-strip {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 18px 16px 16px;
        background: #ffffff;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-category-strip::-webkit-scrollbar { display: none; }

    .mobile-category-button {
        flex: 0 0 auto;
        min-width: 116px;
        padding: 13px 18px;
        border: 1px solid #eadfd6;
        border-radius: 999px;
        background: #ffffff;
        color: #675548;
        font-size: 14px;
        cursor: pointer;
        transition: none;
    }

    .mobile-category-button.active {
        border-color: #94623f;
        background: #94623f;
        color: #ffffff;
        transform: none;
    }

    .page-content {
        min-height: 360px;
        padding: 28px 20px;
    }

    .mobile-bottom-bar {
        position: fixed;
        z-index: 1000;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid #ece6e1;
        background: rgba(255,255,255,.96);
        box-shadow: 0 -5px 20px rgba(56, 37, 24, .07);
        backdrop-filter: blur(10px);
    }

    .mobile-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: transparent;
        color: #776b63;
        font-size: 11px;
        cursor: pointer;
    }

    .mobile-bottom-item:first-child { color: #8b5e3c; }

     .local-banner {
        background-position: 90% center;
    }

    /* 요양원 사진 위치 */
    .care-banner {
        background-position: 80% center;
    }

     /* 프리미엄 매칭 사진 위치 */
    .matching-banner {
        background-position: 90.5% center;
    }

}
/* =========================
   인기 모임 세부 카테고리
========================= */
.meeting-category-section {
    width: 100%;
    margin-bottom: 45px;
}

.meeting-category-title {
    margin-bottom: 22px;
}

.meeting-category-title h3 {
    margin: 0 0 7px;
    color: #30251e;
    font-size: 24px;
}

.meeting-category-title span {
    color: #85776e;
    font-size: 14px;
}

.meeting-category-slider {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.meeting-category-list {
    display: flex;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    padding: 5px 3px 14px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.meeting-category-list::-webkit-scrollbar { display: none; }

.meeting-category-item {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f5148;
    cursor: pointer;
    scroll-snap-align: start;
}

.meeting-category-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid #eee2d9;
    border-radius: 24px;
    background: #faf6f2;
    font-size: 30px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.meeting-category-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.meeting-category-item:hover .meeting-category-icon,
.meeting-category-item.active .meeting-category-icon {
    border-color: #9a6741;
    background: #9a6741;
    transform: translateY(-2px);
}

.meeting-category-item.active { color: #8b5e3c; }

.meeting-slider-arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #e8ddd5;
    border-radius: 50%;
    background: #ffffff;
    color: #79573f;
    box-shadow: 0 4px 13px rgba(77, 52, 35, .08);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.meeting-slider-arrow:hover {
    background: #8b5e3c;
    color: #ffffff;
}

.meeting-slider-arrow:disabled {
    opacity: .3;
    cursor: default;
}

@media (max-width: 1025px) {
    .meeting-category-section { margin-bottom: 32px; }
    .meeting-category-title h3 { font-size: 21px; }
    .meeting-category-slider { display: block; }
    .meeting-slider-arrow { display: none; }
    .meeting-category-list {
        gap: 14px;
        padding: 3px 0 12px;
        touch-action: pan-x pan-y;
    }
    .meeting-category-item { flex-basis: 76px; }
    .meeting-category-icon {
        width: 64px;
        height: 64px;
        border-radius: 21px;
        font-size: 27px;
    }
    .meeting-category-name { font-size: 13px; }
}

/* 선택한 카테고리의 인기 모임 카드 */
.popular-meeting-result { width: 100%; margin-bottom: 45px; }
.popular-meeting-heading { margin-bottom: 20px; }
.popular-meeting-heading h3 { margin: 0 0 7px; color: #30251e; font-size: 24px; }
.popular-meeting-heading span { color: #85776e; font-size: 14px; }
.popular-meeting-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}
.popular-meeting-card {
    display: block;
    overflow: hidden;
    padding: 0;
    border: 1px solid #eee5de;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(74, 51, 35, .06);
    text-align: left;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.popular-meeting-card-image {
    height: 140px;
    display: grid;
    place-items: center;
    background: #faf3ed;
    font-size: 48px;
}
.popular-meeting-card-image img{width:100%;height:100%;display:block;object-fit:cover}
.popular-meeting-card-content { padding: 16px; }
.popular-meeting-card-category {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f3e8df;
    color: #8b5e3c;
    font-size: 11px;
    font-weight: 700;
}
.popular-meeting-card h4 { margin: 0 0 9px; color: #332820; font-size: 16px; line-height: 1.4; }
.popular-meeting-card-info { margin: 0 0 7px; color: #786c64; font-size: 12px; }
.popular-meeting-card-members { color: #9a6741; font-size: 12px; font-weight: 700; }
.popular-meeting-empty {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 36px 16px;
    border-radius: 17px;
    background: #faf6f2;
    color: #85776e;
    text-align: center;
    box-sizing: border-box;
}
.popular-meeting-more {
    width: 100%;
    margin-top: 22px;
    padding: 15px;
    border: 1px solid #dfd1c7;
    border-radius: 12px;
    background: #ffffff;
    color: #79573f;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.popular-meeting-more:hover { border-color: #8b5e3c; background: #8b5e3c; color: #ffffff; }

@media (max-width: 1025px) {
    .popular-meeting-heading h3 { font-size: 21px; }
    .popular-meeting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .popular-meeting-card-image { height: 105px; font-size: 38px; }
    .popular-meeting-card-content { padding: 13px; }
    .popular-meeting-card h4 { font-size: 14px; }
}

/* 웹 전용 오른쪽 고정 메뉴 */
.desktop-quick-bar { display: none; }

@media (min-width: 769px) {
    .desktop-quick-bar {
        position: fixed;
        top: 50%;
        right: 20px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        width: 104px;
        overflow: visible;
        border: 1px solid #eadfd7;
        border-radius: 18px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 10px 30px rgba(74, 51, 35, .13);
        transform: translateY(-50%);
        backdrop-filter: blur(12px);
        transition: width .22s ease, right .22s ease, box-shadow .22s ease;
    }

    .quick-bar-toggle {
        position: absolute;
        top: 50%;
        right: 100%;
        width: 34px;
        min-height: 74px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        border: 1px solid #eadfd7;
        border-right: 0;
        border-radius: 13px 0 0 13px;
        background: #f8f1eb;
        color: #8b5e3c;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        transform: translateY(-50%);
        box-shadow: -5px 7px 18px rgba(74,51,35,.08);
    }
    .quick-bar-toggle > span:first-child { font: 25px/1 Arial,sans-serif; transform: translateY(-1px); }
    .quick-bar-toggle-label { writing-mode: vertical-rl; letter-spacing: .08em; }
    .quick-bar-toggle:hover { background: #efe1d6; }
    .desktop-quick-bar.is-collapsed {
        right: 0;
        width: 42px;
        overflow: visible;
        border-radius: 14px 0 0 14px;
        box-shadow: 0 8px 22px rgba(74,51,35,.15);
    }
    .desktop-quick-bar.is-collapsed .quick-bar-button { display: none !important; }
    .desktop-quick-bar.is-collapsed .quick-bar-toggle {
        position: static;
        width: 42px;
        min-height: 74px;
        flex-direction: column;
        border: 0;
        border-radius: 14px 0 0 14px;
        transform: none;
        box-shadow: none;
    }
    .desktop-quick-bar.is-collapsed .quick-bar-toggle > span:first-child { transform: rotate(180deg); }

    .quick-bar-button {
        position: relative;
        min-height: 68px;
        padding: 9px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0;
        border-bottom: 1px solid #f0e7e1;
        background: transparent;
        color: #5f5148;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .quick-bar-button:last-child { border-bottom: 0; }
    /* 숨겨진 회원 메뉴가 뒤에 있어도 화면상 마지막 버튼의 밑줄은 표시하지 않습니다. */
    .quick-bar-button:not(.quick-bar-hidden):not(:has(~ .quick-bar-button:not(.quick-bar-hidden))) {
        border-bottom: 0;
    }
    .quick-bar-button:hover { background: #faf3ed; color: #8b5e3c; }
    .quick-bar-icon { font-size: 22px; line-height: 1; }

    .quick-bar-badge {
        position: absolute;
        top: 5px;
        right: 6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #e66b55;
        color: #fff;
        font-size: 10px;
    }

    .quick-bar-badge.active { display: flex; }
    .quick-bar-button.has-unread-notification .quick-bar-icon{position:relative}.quick-bar-button.has-unread-notification .quick-bar-icon::after{content:"";position:absolute;top:-5px;right:-8px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#e55353;box-shadow:0 0 7px rgba(229,83,83,.7)}
    .quick-bar-admin { background: #f5ebe3; color: #8b5e3c; }
    .quick-bar-logout { color: #a74e45; }
    .quick-bar-hidden { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-bottom-bar { display: none !important; }
}

/* PC·태블릿 위치 설정 바 */
.desktop-location-bar {
    width: 100%;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 34px;
    padding: 18px 22px;
    border: 1px solid #eadfd7;
    border-radius: 16px;
    background: #faf7f3;
}

.desktop-location-info {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.desktop-location-icon {
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: #9a6741;
    box-shadow: 0 4px 13px rgba(74, 51, 35, 0.08);
}

.desktop-location-name {
    display: block;
    margin-bottom: 5px;
    color: #3f3027;
    font-size: 17px;
}

.desktop-location-info p {
    margin: 0;
    color: #82746b;
    font-size: 14px;
    line-height: 1.5;
}

.desktop-location-change {
    min-width: 100px;
    padding: 12px 16px;
    border: 1px solid #9a6741;
    border-radius: 10px;
    background: #ffffff;
    color: #8b5e3c;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .desktop-location-change:hover {
        background: #9a6741;
        color: #ffffff;
    }
}

@media (max-width: 700px) {
    .desktop-location-bar { display: none; }
}

@media (min-width: 701px) and (max-width: 1000px) {
    .desktop-location-bar {
        margin-bottom: 28px;
        padding: 16px 18px;
    }
}

/* 모바일 요양원 페이지에서는 GPS 대신 지역 선택 바를 표시 */
@media (max-width: 700px) {
    .desktop-location-bar.care-location-bar {
        display: flex;
    }

    .desktop-location-bar.meeting-location-bar {
        display: flex;
        min-height: 76px;
        margin-bottom: 24px;
        padding: 13px 14px;
    }

    .meeting-location-bar .desktop-location-icon {
        width: 40px;
        height: 40px;
    }

    .meeting-location-bar .desktop-location-name {
        font-size: 14px;
    }

    .meeting-location-bar .desktop-location-info p {
        font-size: 12px;
    }

    .meeting-location-bar .desktop-location-change {
        min-width: 94px;
        padding: 10px 11px;
        font-size: 12px;
    }
}
/* 홈 주변 목록 미리보기 */
.home-nearby-section{margin-top:34px}.home-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.home-section-heading h2{margin:0 0 7px}.home-section-heading p{margin:0;color:#85776e}.home-section-heading>a{flex:none;color:#9a6741;text-decoration:none;font-weight:800}.home-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.home-preview-card{overflow:hidden;border:1px solid #eadfd7;border-radius:17px;background:#fff;color:#332820;text-decoration:none;box-shadow:0 8px 22px rgba(72,48,32,.05)}.home-preview-image{height:130px;background:#f4ece6 center/cover no-repeat}.home-preview-image.emoji{display:grid;place-items:center;font-size:46px}.home-preview-card>div:last-child{padding:14px}.home-preview-card span{display:inline-block;padding:4px 8px;border-radius:999px;background:#f3e7de;color:#9a6741;font-size:11px;font-weight:800}.home-preview-card h3{margin:9px 0 7px;font-size:16px}.home-preview-card p{margin:0;color:#81756c;font-size:12px;line-height:1.5}.home-preview-empty{grid-column:1/-1;margin:0;padding:34px;border-radius:16px;background:#faf7f4;color:#81756c;text-align:center}
.home-preview-card .home-rating{margin-top:7px;color:#a66c3d;font-weight:800}.popular-meeting-heading.home-section-heading>div{display:block}.popular-meeting-heading.home-section-heading>a{font-size:14px}
#homeFacilityGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
#homeFacilityGrid .facility-home-card{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:150px}
#homeFacilityGrid .facility-home-card .home-preview-image{width:150px;height:100%;min-height:150px}
#homeFacilityGrid .facility-home-card>div:last-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 12px}
#homeFacilityGrid .facility-home-card span{width:max-content;max-width:100%;padding:2px 6px;font-size:9px;line-height:1.2;white-space:nowrap}
#homeFacilityGrid .facility-home-card h3{margin:5px 0 4px}
#homeFacilityGrid .facility-home-card p{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:800px){.home-preview-grid{display:flex;overflow-x:auto;gap:11px;scroll-snap-type:x mandatory}.home-preview-card{min-width:72%;scroll-snap-align:start}.home-section-heading{align-items:center}.home-section-heading h2{font-size:22px}.home-section-heading p{font-size:13px}#homeFacilityGrid{display:grid;grid-template-columns:1fr;overflow:visible}#homeFacilityGrid .facility-home-card{grid-template-columns:112px minmax(0,1fr);min-width:0;min-height:112px}#homeFacilityGrid .facility-home-card .home-preview-image{width:112px;min-height:112px}}

/* 친구찾기 홈 미리보기 */
.friend-home-content { padding-top: 36px; }
.friend-preference-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 42px;
}
.friend-preference-button {
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border: 1px solid #eadfd7;
    border-radius: 18px;
    background: #fff;
    color: #332820;
    text-align: left;
    box-shadow: 0 8px 24px rgba(72, 48, 32, .05);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.friend-preference-button:hover {
    border-color: #b98560;
    box-shadow: 0 10px 26px rgba(72, 48, 32, .09);
    transform: translateY(-2px);
}
.friend-preference-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #f6eee8;
    color: #9a6741;
}
.friend-preference-button strong,
.friend-preference-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-preference-button strong { margin-bottom: 5px; font-size: 15px; }
.friend-preference-button small { color: #887970; font-size: 12px; }
.friend-preference-arrow { color: #a48e7e; font: 28px/1 Arial, sans-serif; text-align: center; }
.home-friend-section { width: 100%; }
.friend-section-heading { align-items: center; }
.home-friend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.friend-preview-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #eadfd7;
    border-radius: 21px;
    background: #fff;
    color: #332820;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(72, 48, 32, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}
.friend-preview-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(72, 48, 32, .12); }
.friend-preview-photo {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f7eee7, #efe1d6);
    color: #9a6741;
    font-size: 56px;
    font-weight: 800;
}
.friend-preview-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.friend-preview-body { padding: 17px; }
.friend-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.friend-preview-top h3 { min-width: 0; margin: 0; overflow: hidden; color: #30251e; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.friend-preview-verification{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.friend-preview-verification:empty{display:none}.friend-preview-verification span{display:inline-flex;padding:4px 7px;border:1px solid #ddc7b7;border-radius:999px;background:#fff8f1;color:#805232;font-size:9px;font-weight:900}
.friend-age-badge { flex: none; padding: 5px 9px; border-radius: 999px; background: #f4e8df; color: #8d5d39; font-size: 11px; font-weight: 800; }
.friend-preview-location { margin: 11px 0 10px; color: #786c64; font-size: 13px; }
.friend-preview-interests { min-height: 28px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; margin-bottom: 12px; padding-bottom: 2px; }
.friend-preview-interests span { padding: 5px 8px; border-radius: 999px; background: #faf6f2; color: #705d50; font-size: 11px; }
.friend-match-reason { margin: 0; padding-top: 12px; border-top: 1px solid #f0e7e0; color: #9a6741; font-size: 12px; font-weight: 800; }
.friend-more-button {
    width: min(360px, 100%);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 27px auto 0;
    border-radius: 14px;
    background: #9a6741;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(122, 77, 46, .18);
}
.friend-more-button:hover { background: #805235; }

.friend-setup-modal[hidden] { display: none; }
.friend-setup-modal {
    position: fixed;
    inset: 0;
    z-index: 3300;
    display: grid;
    place-items: center;
    padding: 20px;
}
.friend-setup-backdrop { position: absolute; inset: 0; background: rgba(35, 25, 19, .5); backdrop-filter: blur(3px); }
.friend-setup-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 27px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(38, 25, 17, .26);
}
.friend-setup-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.friend-setup-header span { color: #9a6741; font-size: 11px; font-weight: 900; }
.friend-setup-header h2 { margin: 5px 0 7px; font-size: 24px; color: #30251e; }
.friend-setup-header p { margin: 0; color: #85776e; font-size: 13px; line-height: 1.55; }
.friend-setup-header > button {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f7f2ee;
    color: #55463d;
    font: 25px/1 Arial, sans-serif;
    cursor: pointer;
}
.friend-gps-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #a87048;
    border-radius: 15px;
    background: #faf6f2;
    color: #68452d;
    text-align: left;
    cursor: pointer;
}
.friend-gps-button > span:first-child { font-size: 27px; }
.friend-gps-button strong, .friend-gps-button small { display: block; }
.friend-gps-button small { margin-top: 4px; color: #8a7b71; font-size: 11px; }
.friend-field > span { display: block; margin-bottom: 8px; color: #53463e; font-size: 13px; font-weight: 800; }
.friend-field input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #dfd1c7;
    border-radius: 13px;
    outline: 0;
    color: #332820;
    font-size: 14px;
}
.friend-field input:focus { border-color: #9a6741; box-shadow: 0 0 0 3px rgba(154, 103, 65, .1); }
.friend-field-message { min-height: 18px; margin: 7px 2px 14px; color: #b2493f; font-size: 12px; }
.friend-location-chips, .friend-interest-options { display: flex; flex-wrap: wrap; gap: 8px; }
.friend-location-chips button, .friend-interest-options button {
    padding: 9px 12px;
    border: 1px solid #e5d8cf;
    border-radius: 999px;
    background: #faf7f3;
    color: #675548;
    font-size: 12px;
    cursor: pointer;
}
.friend-location-chips button.selected, .friend-interest-options button.selected {
    border-color: #9a6741;
    background: #9a6741;
    color: #fff;
}
.friend-custom-interest { display: block; margin-top: 20px; }
.friend-interest-add { margin-top: 8px; padding: 8px 11px; border: 0; border-radius: 9px; background: #f4e8df; color: #855637; font-weight: 800; cursor: pointer; }
.friend-setup-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 25px; }
.friend-setup-actions button { min-height: 49px; border: 1px solid #ddd1c8; border-radius: 13px; background: #fff; color: #67584f; font-weight: 800; cursor: pointer; }
.friend-setup-actions button.primary { border-color: #9a6741; background: #9a6741; color: #fff; }

@media (max-width: 800px) {
    .friend-home-content { padding-top: 22px; }
    .friend-preference-bar { gap: 9px; margin-bottom: 32px; }
    .friend-preference-button {
        min-height: 72px;
        grid-template-columns: 37px minmax(0, 1fr) 13px;
        gap: 8px;
        padding: 11px 10px;
        border-radius: 15px;
    }
    .friend-preference-icon { width: 37px; height: 37px; border-radius: 12px; }
    .friend-preference-icon svg { width: 19px; height: 19px; }
    .friend-preference-button strong { font-size: 13px; }
    .friend-preference-button small { font-size: 10px; }
    .friend-preference-arrow { font-size: 21px; }
    .home-friend-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 3px 2px 14px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .home-friend-grid::-webkit-scrollbar { display: none; }
    .friend-preview-card { flex: 0 0 76%; scroll-snap-align: start; }
    .friend-preview-body { padding: 15px; }
    .friend-more-button { margin-top: 16px; }
    .friend-setup-modal { align-items: end; padding: 0; }
    .friend-setup-dialog { width: 100%; max-height: 88vh; padding: 23px 19px; border-radius: 24px 24px 0 0; }
}
.meeting-preview-card{display:flex;min-width:0;flex-direction:column}.meeting-preview-card .home-preview-image{width:100%;height:auto;aspect-ratio:1/1;background-position:center;background-size:cover}.meeting-preview-card>div:last-child{display:block;padding:14px;background:#fff}.meeting-preview-card .meeting-member-count{margin-top:7px;color:#9a6741;font-weight:800}.popular-meeting-grid .meeting-preview-card{width:100%}@media(max-width:800px){.popular-meeting-grid .meeting-preview-card{min-width:0}.meeting-preview-card .home-preview-image{aspect-ratio:1/1}}

/* 브라우저가 자동 즐겨찾기 등록을 허용하지 않아 버튼은 노출하지 않습니다. */
.desktop-favorite-button{display:none!important}
@media(min-width:801px) and (hover:hover){
    .quick-bar-button:hover,
    .quick-bar-button:focus-visible{
        background:transparent!important;
        box-shadow:none!important;
    }
    .quick-bar-button:hover .quick-bar-icon{transform:translateY(-1px)}
}
.home-facility-availability{display:inline-flex!important;width:auto!important;margin:5px 0 2px!important;padding:4px 8px;border-radius:999px;font-size:10px!important;font-weight:900;line-height:1.2!important}.home-facility-availability.available{background:#e8f6ec;color:#287c43!important}.home-facility-availability.waiting{background:#f4ece5;color:#866852!important}
.friend-profile-setting-title span{display:inline}
.friend-profile-setting-title span+span::before{content:" "}
@media(max-width:800px){
    .friend-preference-button .friend-profile-setting-title{
        overflow:visible;
        line-height:1.2;
        text-overflow:clip;
        white-space:normal;
    }
    .friend-preference-button .friend-profile-setting-title span{display:block}
    .friend-preference-button .friend-profile-setting-title span+span::before{content:none}
}
@media (max-width: 700px) {
    html.dajeong-font-large .meeting-category-item {
        flex: 0 0 76px;
    }

    html.dajeong-font-large .meeting-category-icon {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px;
        min-height: 64px;
        flex: 0 0 64px;
        font-size: 27px !important;
        line-height: 1 !important;
    }
}