@charset "utf-8";

/*
    서면점 오시는 길 CSS

    유지보수 기준:
    - 카페24 모듈을 사용하지 않습니다.
    - 지도 이미지, Google Map/NAVER 버튼 링크는 Boostify 배너매니저로 관리합니다.
    - 모든 선택자는 .branchLocation 하위로만 작성합니다.

    수정 가능:
    - 지도 이미지 비율, 버튼 크기, 텍스트 크기, 섹션 간격, 모바일 간격

    수정 금지:
    - section, h1, .ons_inner, #contents 같은 전역 선택자
    - 원본 /ons/* 공통 파일
*/

.branchLocation {
    margin-top: 80px;
    padding: 0 16px 60px;
    /*
        섹션 전체 영역:
        이전 섹션들과 동일하게 모바일 중심 폭과 하단 간격을 유지합니다.
    */
    background: var(--mono-ff);
    text-align: center;
    box-sizing: border-box;
    /*
        [공통 이동 보정 예정]
        탭메뉴 클릭 시 sticky header에 섹션 제목이 가려지지 않게 하는 값입니다.
        여러 지점에서 완전히 동일할 때만 나중에 common CSS로 이동합니다.
    */
    scroll-margin-top: 120px;
}

.branchLocation .branchLocation__inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.branchLocation .branchLocation__heading {
    text-align-last: left;
    margin-bottom: 24px;
}

.branchLocation__heading .branchLocation__eyebrow{
    color: var(--mono-2-95);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 6px;
}

.branchLocation .branchLocation__title {
    margin: 0;
}

.branchLocation .branchLocation__actions {
    /*
        지도 버튼 영역:
        버튼 개수가 늘어나도 줄바꿈되도록 flex-wrap을 사용합니다.
    */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 12px;
    margin-bottom: 16px;
}

.branchLocation .branchLocation__actionItem {
    /*
        Boostify 그룹 래퍼:
        박스 모델에 관여하지 않아 버튼(.branchLocation__button)이
        actions의 flex 아이템으로 동일하게 동작합니다(gap/줄바꿈 영향 없음).
    */
    display: contents;
}

.branchLocation .branchLocation__button {
    /*
        지도 버튼:
        지점 탭메뉴 버튼과 동일한 디자인 기준을 사용합니다.
        버튼 문구가 길어져도 높이가 깨지지 않도록 min-height를 사용합니다.
    */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-12);
    background: var(--mono-5-f6);
    color: var(--font-color-base);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    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;
}

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

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

.branchLocation .branchLocation__map {
    /*
        지도 이미지 영역:
        이미지 원본이 1:1, 4:5, 3:4여도 박스 비율은 유지됩니다.
        지도 영역 높이를 바꾸려면 aspect-ratio 값을 수정합니다.
    */
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: var(--radius-8);
    background: var(--mono-5-f6);
}

.branchLocation .branchLocation__map img {
    /*
        이미지 채우기 방식:
        원본 비율은 깨지지 않고 박스에 맞춰 표시됩니다.
        지도 전체가 잘리지 않아야 하면 object-fit: contain 으로 변경합니다.
    */
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.branchLocation .branchLocation__mapMedia {
    display: block;
    width: 100%;
}

.branchLocation .branchLocation__bannerData {
    display: none !important;
}

.branchLocation .branchLocation__text--preLine {
    white-space: pre-line;
}
.branchLocation .branchLocation__info {
    padding: 0 4px;
    margin-top: 24px;
    text-align: left;
}

.branchLocation .branchLocation__infoBlock + .branchLocation__infoBlock {
    margin-top: 28px;
}

.branchLocation .branchLocation__infoTitle {
    margin: 0 0 12px;
    color: var(--font-color-base);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

.branchLocation .branchLocation__text {
    margin: 0;
    color: var(--font-color-base);
    font-size: 14px;
    line-height: 1.6;
    font-style: normal;
}

.branchLocation .branchLocation__tel {
    color: inherit;
    text-decoration: none;
}

.branchLocation .branchLocation__hours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
}

.branchLocation .branchLocation__hoursItem {
    min-width: 0;
}

.branchLocation .branchLocation__hoursItem dt {
    margin-bottom: 4px;
    color: var(--mono-2-95);
    font-size: 13px;
    line-height: 1.4;
}

.branchLocation .branchLocation__hoursItem dd {
    margin: 0;
    color: var(--font-color-base);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    white-space: pre-line;
}

.branchLocation .branchLocation__nonCovered {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
    padding-top: 0;
    text-align: left;
}

.branchLocation .branchLocation__nonCoveredButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-12);
    background: var(--mono-5-f6);
    color: var(--font-color-base);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: 0.3s;
}

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

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

.branchLocation .branchLocation__modal[hidden] {
    display: none !important;
}

.branchLocation .branchLocation__modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.branchLocation .branchLocation__modalBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
}

.branchLocation .branchLocation__modalPanel {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 48px 24px;
    border-radius: var(--radius-12);
    background: var(--mono-ff);
    text-align: left;
    box-sizing: border-box;
}

.branchLocation .branchLocation__modalHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.branchLocation .branchLocation__modalEyebrow {
    margin: 0 0 6px;
    color: var(--mono-2-95);
    font-size: 12px;
    font-weight: 800;
}

.branchLocation .branchLocation__modalTitle {
    margin: 0;
    color: var(--font-color-heading);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.branchLocation .branchLocation__modalDate,
.branchLocation .branchLocation__modalDesc {
    margin: 10px 0 0;
    color: var(--mono-1-66);
    font-size: 13px;
    line-height: 1.6;
    word-break: keep-all;
}

.branchLocation .branchLocation__modalNotice {
    margin: 12px 0 0;
    color: var(--mono-2-95);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    text-align: left;
    word-break: keep-all;
}

.branchLocation .branchLocation__modalClose {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--mono-5-f6);
    color: var(--font-color-base);
    font-family: inherit;
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.branchLocation .branchLocation__modalCloseIcon {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
}

.branchLocation .branchLocation__feeSlider {
    margin-top: 18px;
}

.branchLocation .branchLocation__feeTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 436px);
    gap: 8px;
    margin-bottom: 12px;
}


.branchLocation .branchLocation__feeTabs[data-non-covered-tab-count="1"] .branchLocation__feeTab:not([hidden]) {
    grid-column: 1 / -1;
    width: min(214px, calc((100% - 8px) / 2));
    justify-self: start;
}
.branchLocation .branchLocation__feeTab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-8);
    background: var(--mono-5-f6);
    color: var(--font-color-base);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.branchLocation .branchLocation__feeTab.is-active {
    background: var(--point-color-primary);
    color: var(--font-color-base, #000);
}

.branchLocation .branchLocation__feeViewport {
    overflow: hidden;
    width: 100%;
    max-width: 857px;
    margin: 0 auto;
}

.branchLocation .branchLocation__feeTrack {
    display: flex;
    width: 100%;
    transition: transform .28s ease;
}

.branchLocation .branchLocation__feeSlide {
    flex: 0 0 100%;
    min-width: 0;
}

.branchLocation .branchLocation__feePage[hidden] {
    display: none !important;
}

.branchLocation .branchLocation__feePagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.branchLocation .branchLocation__feePageButton,
.branchLocation .branchLocation__feePageArrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mono-4-dd);
    border-radius: 50%;
    background: var(--mono-ff);
    color: var(--font-color-base);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
}

.branchLocation .branchLocation__feePageArrow {
    font-size: 20px;
    font-weight: 500;
}

.branchLocation .branchLocation__feePageButton.is-active {
    border-color: var(--point-color-primary);
    background: var(--point-color-primary);
    color: var(--font-color-base, #000);
}

.branchLocation .branchLocation__feePageArrow:disabled {
    cursor: default;
    opacity: .35;
}

.branchLocation .branchLocation__tableTitle {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    background: #f9e2d2;
    color: var(--font-color-heading);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.branchLocation .branchLocation__tableWrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
    border: 1px solid var(--mono-4-dd);
    border-radius: 0;
}

.branchLocation .branchLocation__nonCoveredTable {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--font-color-base);
    font-size: 13px;
}

.branchLocation .branchLocation__nonCoveredTable--wide {
    min-width: 0;
}
.branchLocation .branchLocation__nonCoveredTable--feeBase {
    min-width: 760px;
}

.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(1),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(1) {
    width: 13%;
}

.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(2),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(2) {
    width: 12%;
}

.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(3),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(3) {
    width: 23%;
}

.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(4),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(4) {
    width: 10%;
}

.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(5),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(5),
.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(6),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(6),
.branchLocation .branchLocation__nonCoveredTable--feeBase th:nth-child(7),
.branchLocation .branchLocation__nonCoveredTable--feeBase td:nth-child(7) {
    width: 14%;
}

.branchLocation .branchLocation__nonCoveredTable--feeMeta {
    min-width: 680px;
}

.branchLocation .branchLocation__nonCoveredTable--feeMeta th:nth-child(1),
.branchLocation .branchLocation__nonCoveredTable--feeMeta td:nth-child(1) {
    width: 24%;
}

.branchLocation .branchLocation__nonCoveredTable--feeMeta th:nth-child(2),
.branchLocation .branchLocation__nonCoveredTable--feeMeta td:nth-child(2),
.branchLocation .branchLocation__nonCoveredTable--feeMeta th:nth-child(3),
.branchLocation .branchLocation__nonCoveredTable--feeMeta td:nth-child(3) {
    width: 16%;
}

.branchLocation .branchLocation__nonCoveredTable--feeMeta th:nth-child(4),
.branchLocation .branchLocation__nonCoveredTable--feeMeta td:nth-child(4) {
    width: 30%;
}

.branchLocation .branchLocation__nonCoveredTable--feeMeta th:nth-child(5),
.branchLocation .branchLocation__nonCoveredTable--feeMeta td:nth-child(5) {
    width: 14%;
}

.branchLocation .branchLocation__nonCoveredTable caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.branchLocation .branchLocation__nonCoveredTable th,
.branchLocation .branchLocation__nonCoveredTable td {
    padding: 12px 10px;
    border-right: 1px solid var(--mono-4-dd);
    border-bottom: 1px solid var(--mono-4-dd);
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}

.branchLocation .branchLocation__nonCoveredTable th {
    background: #f9e2d2;
    color: var(--font-color-heading);
    font-weight: 800;
}

.branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(1),
.branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(1),
.branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(2),
.branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(2),
.branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(5),
.branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(5),
.branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(6),
.branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(6) {
    width: 13%;
}

.branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(3),
.branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(3) {
    width: 29%;
}

.branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(4),
.branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(4) {
    width: 19%;
}

.branchLocation .branchLocation__tableNote {
    margin: 10px 0 0;
    color: var(--mono-1-66);
    font-size: 13px;
    line-height: 1.5;
    word-break: keep-all;
}

.branchLocation .branchLocation__nonCoveredTable th:last-child,
.branchLocation .branchLocation__nonCoveredTable td:last-child {
    border-right: 0;
}

.branchLocation .branchLocation__nonCoveredTable tr:last-child td {
    border-bottom: 0;
}

html.branchNonCoveredModalOpen,
body.branchNonCoveredModalOpen {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-width: 767px) {
    .branchLocation {
        margin-top: 60px;
        padding: 0 16px 64px;
        scroll-margin-top: 150px;
    }

    .branchLocation .branchLocation__heading {
        margin-bottom: 28px;
    }

    .branchLocation .branchLocation__actions {
        gap: 10px;
    }

    .branchLocation .branchLocation__button {
        min-width: 104px;
        min-height: 52px;
        padding: 0 10px;
        font-size: 13px;
    }

    .branchLocation .branchLocation__button:focus-visible {
        background: var(--mono-5-f6);
        color: var(--font-color-base);
        transform: translateY(0);
        box-shadow: none;
    }

    .branchLocation .branchLocation__info {
        padding: 0 0;
        margin-top: 22px;
    }

    .branchLocation .branchLocation__infoTitle {
        font-size: 18px;
    }

    .branchLocation .branchLocation__text,
    .branchLocation .branchLocation__hoursItem dd {
        font-size: 15px;
    }

    .branchLocation .branchLocation__nonCovered {
        margin-top: 28px;
        padding-top: 0;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .branchLocation .branchLocation__nonCoveredButton {
        width: 100%;
        min-height: 52px;
        font-size: 15px;
    }

    .branchLocation .branchLocation__modal {
        align-items: stretch;
        padding: 0;
    }

    .branchLocation .branchLocation__modalPanel {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        max-height: none;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 18px 10px 24px;
        border-radius: 0;
    }

    .branchLocation .branchLocation__modalHead {
        justify-content: space-between;
        text-align: left;
    }

    .branchLocation .branchLocation__modalClose {
        position: static;
    }
.branchLocation .branchLocation__modalCloseIcon {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
}

    .branchLocation .branchLocation__modalTitle {
        font-size: 19px;
    }

    .branchLocation .branchLocation__modalDate,
    .branchLocation .branchLocation__modalDesc,
    .branchLocation .branchLocation__modalNotice {
        text-align: left;
    }

    .branchLocation .branchLocation__feeSlider {
        margin-top: 14px;
    }

    .branchLocation .branchLocation__feeTabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
    }

    .branchLocation .branchLocation__feeTab {
        min-height: 42px;
        font-size: 14px;
    }

    .branchLocation .branchLocation__feePagination {
        margin-top: 14px;
    }

    .branchLocation .branchLocation__feePageButton,
    .branchLocation .branchLocation__feePageArrow {
        width: 32px;
        height: 32px;
    }

    .branchLocation .branchLocation__nonCoveredTable {
        font-size: 11px;
    }

    .branchLocation .branchLocation__nonCoveredTable th,
    .branchLocation .branchLocation__nonCoveredTable td {
        padding: 8px 3px;
        line-height: 1.35;
        letter-spacing: 0;
    }

    .branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(1),
    .branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(1),
    .branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(2),
    .branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(2) {
        width: 11%;
    }

    .branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(3),
    .branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(3) {
        width: 24%;
    }

    .branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(4),
    .branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(4) {
        width: 16%;
        padding-right: 4px;
        padding-left: 4px;
    }

    .branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(5),
    .branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(5),
    .branchLocation .branchLocation__nonCoveredTable--wide th:nth-child(6),
    .branchLocation .branchLocation__nonCoveredTable--wide td:nth-child(6) {
        width: 19%;
    }

}

@media (max-width: 420px) {
    .branchLocation .branchLocation__hours {
        /* Keep the treatment-hours layout in two columns on narrow screens. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* LOCATION_BANNER_MANAGER_SOURCE */
.branchLocation .branchLocation__bannerSource {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.branchLocation .branchLocation__bannerSourceItem {
    display: none !important;
}

.branchLocation .branchLocation__actions[hidden],
.branchLocation .branchLocation__map[hidden] {
    display: none !important;
}
/* ==============================
   Boostify 비급여 이미지 모달
============================== */
.branchLocation .branchLocation__nonCoveredSource {
    display: none !important;
}

.branchLocation .branchLocation__nonCovered[hidden],
.branchLocation .branchLocation__feeTabs[hidden],
.branchLocation .branchLocation__feeTab[hidden],
.branchLocation .branchLocation__feeImagePanel[hidden] {
    display: none !important;
}

.branchLocation .branchLocation__feeImagePanel,
.branchLocation .branchLocation__feeImage {
    width: 100%;
    min-width: 0;
}

.branchLocation .branchLocation__feeImage img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-8);
    object-fit: contain;
    touch-action: pan-y pinch-zoom;
}

.branchLocation .branchLocation__feeTab:focus-visible,
.branchLocation .branchLocation__modalClose:focus-visible {
    outline: 2px solid var(--font-color-base);
    outline-offset: 2px;
}