@charset "utf-8";

/*
    지점 탭메뉴 CSS

    원본 참고:
    - /ons/main/main_cate_bnr.css

    유지보수 기준:
    - 이 파일은 /Barog/branch-B/gangnam/tab_menu/tab_menu.html 전용입니다.
    - 배너매니저를 사용하지 않습니다.
    - 모든 선택자는 .branchTabMenu 하위로만 작성합니다.

    수정 가능:
    - gap
    - 한 줄에 보이는 개수
    - 시술 바로가기 버튼 폭
    - 모바일 마지막 줄 정렬 기준
    - 버튼 높이, 배경색, 활성 상태

    수정 금지:
    - section, h1, .swiper, .ons_inner, #contents 같은 전역 선택자
*/

.branchTabMenu {
    margin-bottom: 0;
    --branch-tab-width: 104px;
    --branch-tab-gap: 14px;
}

.branchTabMenu .branchTabMenu__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--branch-tab-gap);
    margin: 0;
    padding: 0;
}

.branchTabMenu .branchTabMenu__item {
    width: var(--branch-tab-width);
    max-width: calc((100% - (var(--branch-tab-gap) * 3)) / 4);
}

.branchTabMenu .branchTabMenu__item--wide {
    width: calc((var(--branch-tab-width) * 4) + (var(--branch-tab-gap) * 3));
    max-width: 100%;
}

.branchTabMenu .branchTabMenu__item--primary .branchTabMenu__label {
    background: var(--point-color-primary);
    color: var(--font-color-base, #000);
    font-weight: 700;
}

.branchTabMenu .branchTabMenu__link {
    display: block;
    text-decoration: none;
}

.branchTabMenu .branchTabMenu__item--wide .branchTabMenu__label {
    font-size: 15px;
}

.branchTabMenu .branchTabMenu__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 12px;
    border-radius: var(--radius-12);
    background: var(--mono-5-f6);
    color: var(--font-color-base);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    word-break: keep-all;
    transform: translateY(0);
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}


.branchTabMenu .branchTabMenu__link:focus-visible .branchTabMenu__label {
    background: var(--point-color-primary);
    color: var(--font-color-base, #000);
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .branchTabMenu .branchTabMenu__link:hover .branchTabMenu__label {
        background: var(--point-color-primary);
        color: var(--font-color-base, #000);
    }
}

@media (max-width: 767px) {
    .branchTabMenu {
        margin-bottom: 0;
        --branch-tab-gap: 10px;
    }

    .branchTabMenu .branchTabMenu__list {
        justify-content: center;
        gap: var(--branch-tab-gap);
    }

    .branchTabMenu .branchTabMenu__item {
        width: calc((100% - var(--branch-tab-gap)) / 2);
        max-width: none;
    }

    .branchTabMenu .branchTabMenu__item--wide {
        width: 100%;
        max-width: none;
    }

    .branchTabMenu .branchTabMenu__label {
        min-height: 52px;
        padding: 0 10px;
        font-size: 13px;
    }

    .branchTabMenu .branchTabMenu__link:focus-visible .branchTabMenu__label {
        background: var(--mono-5-f6);
        color: var(--font-color-base);
        transform: translateY(0);
    }

    .branchTabMenu .branchTabMenu__item--primary .branchTabMenu__label,
    .branchTabMenu .branchTabMenu__item--primary .branchTabMenu__link:focus-visible .branchTabMenu__label {
        background: var(--point-color-primary);
        color: var(--font-color-base, #000);
    }

}

/* 표시할 탭이 없으면 섹션 전체를 숨깁니다. */
.branchTabMenu[hidden] {
    display: none !important;
}
/*
    활성 일반 탭 개수에 맞춘 반응형 Grid.
    시술 바로가기 폭을 기준으로 빈 칸 없이 균등 분할합니다.
*/
.branchTabMenu[data-branch-tab-scroll-count] {
    --branch-tab-columns: 4;
}

.branchTabMenu[data-branch-tab-scroll-count="0"],
.branchTabMenu[data-branch-tab-scroll-count="1"] {
    --branch-tab-columns: 1;
}

.branchTabMenu[data-branch-tab-scroll-count="2"] {
    --branch-tab-columns: 2;
}

.branchTabMenu[data-branch-tab-scroll-count="3"] {
    --branch-tab-columns: 3;
}

.branchTabMenu[data-branch-tab-scroll-count="4"] {
    --branch-tab-columns: 4;
}

.branchTabMenu[data-branch-tab-scroll-count] .branchTabMenu__list {
    display: grid;
    grid-template-columns: repeat(var(--branch-tab-columns), minmax(0, 1fr));
    width: calc((var(--branch-tab-width) * 4) + (var(--branch-tab-gap) * 3));
    max-width: 100%;
    margin: 0 auto;
}

.branchTabMenu[data-branch-tab-scroll-count] .branchTabMenu__item {
    width: auto;
    max-width: none;
    min-width: 0;
}

.branchTabMenu[data-branch-tab-scroll-count] .branchTabMenu__item--wide {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
}

@media (max-width: 767px) {
    .branchTabMenu[data-branch-tab-scroll-count] .branchTabMenu__list {
        width: 100%;
    }

    .branchTabMenu[data-branch-tab-scroll-count="4"] {
        --branch-tab-columns: 2;
    }
}