@charset "utf-8";

/* 서브 페이지 상단 카테고리 바 (이벤트·진료과목 공통 베이스) */
:root {
    --syou-page-cat-accent: #d81b60;
    --syou-page-cat-arrow: #1f1c1a;
    --syou-page-cat-arrow-bg: #f3f0ec;
    --syou-page-cat-arrow-border: #ddd8d3;
    --syou-frame-menu-line: #e5e5e5;
}

/* 헤더 · 상단메뉴 · 본문 구분 (진료과목 가이드와 동일) */
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top #header {
    border-bottom: 1px solid var(--syou-frame-menu-line);
    box-shadow: none;
}

body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-page-cat-bar,
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-event-cat-bar,
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-clinic-cat-bar,
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-doctor-cat-bar,
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-page-cat-bar--single,
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-page-cat-bar--subject {
    border-top: 1px solid var(--syou-frame-menu-line);
    border-bottom: 1px solid var(--syou-frame-menu-line);
    background: #fff;
}

/* 주제 바 + 하위 카테고리 바 (이벤트·진료과목·의료진) */
.syou-page-cat-bar--subject + .syou-event-cat-bar,
.syou-page-cat-bar--subject + .syou-clinic-cat-bar,
.syou-page-cat-bar--subject + .syou-doctor-cat-bar {
    border-top: 0;
}

.syou-page-cat-bar--subject .syou-page-cat-nav__item.is-active .syou-page-cat-nav__label {
    color: #333;
    font-weight: 600;
}

.syou-page-cat-bar--subject .syou-page-cat-nav__item.is-active::after {
    display: none;
}

body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-top > .syou-sub__head {
    border-top: 1px solid var(--syou-frame-menu-line);
    border-bottom: 1px solid var(--syou-frame-menu-line);
    background: #fff;
}

body.syou-layout.is-pc-shell .mobile-frame__inner .syou-frame-scroll {
    background: #fff;
}

body.syou-sub-page.syou-guide-page #container.syou-sub,
body.syou-sub-page.syou-event-page #container.syou-sub,
body.syou-sub-page.syou-price-page #container.syou-sub,
body.syou-sub-page.syou-doctor-page #container.syou-sub,
body.syou-sub-page.syou-location-page #container.syou-sub,
body.syou-sub-page.syou-tour-page #container.syou-sub,
body.syou-sub-page.syou-philosophy-page #container.syou-sub,
body.syou-sub-page.syou-caution-page #container.syou-sub,
body.syou-sub-page.syou-faq-page #container.syou-sub,
body.syou-sub-page.syou-equipment-page #container.syou-sub {
    padding: 0;
}

.syou-page-cat-bar {
    display: flex;
    align-items: stretch;
    margin: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: relative;
    z-index: 2;
}

.syou-page-cat-bar__arrow,
.syou-event-cat-bar__arrow {
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--syou-page-cat-arrow-bg);
    color: var(--syou-page-cat-arrow);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.syou-page-cat-bar__arrow--prev,
.syou-event-cat-bar__arrow--prev {
    border-right: 1px solid var(--syou-page-cat-arrow-border);
}

.syou-page-cat-bar__arrow--next,
.syou-event-cat-bar__arrow--next {
    border-left: 1px solid var(--syou-page-cat-arrow-border);
}

.syou-page-cat-bar__arrow:not(:disabled):hover,
.syou-event-cat-bar__arrow:not(:disabled):hover {
    color: #1a1a1a;
    background: #ebe6e1;
}

.syou-page-cat-bar__arrow:disabled,
.syou-event-cat-bar__arrow:disabled {
    opacity: 0.5;
    color: #a39d97;
    cursor: default;
}

.syou-page-cat-nav {
    --page-cat-tabs-visible: 3.2;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    container-type: inline-size;
    container-name: pagecatnav;
    cursor: grab;
    touch-action: pan-x;
}

.syou-page-cat-nav::-webkit-scrollbar {
    display: none;
}

.syou-page-cat-nav__list {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content;
    min-width: 100%;
}

.syou-page-cat-nav__item {
    position: relative;
    flex: 0 0 calc(100cqw / var(--page-cat-tabs-visible));
    width: calc(100cqw / var(--page-cat-tabs-visible));
    min-width: 88px;
    box-sizing: border-box;
    border-right: 1px solid #ececec;
}

/* 글자 수가 많은 텍스트 탭: 항목 너비를 내용에 맞게 확장 */
.syou-page-cat-bar--text .syou-page-cat-nav__item {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
    max-width: none;
}

.syou-page-cat-bar--text .syou-page-cat-nav__btn {
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
}

@supports not (width: 1cqw) {
    .syou-page-cat-nav__item {
        flex: 0 0 calc(100% / var(--page-cat-tabs-visible));
        width: calc(100% / var(--page-cat-tabs-visible));
    }
}

.syou-page-cat-nav__item:last-child {
    border-right: none;
}

.syou-page-cat-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    color: #222;
    box-sizing: border-box;
}

.syou-page-cat-bar--text .syou-page-cat-nav__btn {
    min-height: 48px;
}

.syou-page-cat-nav__label {
    font-size: var(--syou-frame-meta, 1.4rem);
    line-height: 1.25;
    letter-spacing: -0.03em;
    white-space: nowrap;
    font-weight: 400;
    text-align: center;
}

.syou-page-cat-nav__item.is-active .syou-page-cat-nav__label {
    color: var(--syou-page-cat-accent);
    font-weight: 400;
}

.syou-page-cat-nav__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--syou-page-cat-accent);
}

.syou-page-cat-nav.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.syou-page-cat-nav.is-dragging .syou-page-cat-nav__btn {
    pointer-events: none;
}

/* 단일 탭 서브 페이지 (오시는길·비급여 등) — 진료과목 바와 동일 */
.syou-page-cat-bar--single .syou-page-cat-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.syou-page-cat-bar--single .syou-page-cat-nav__list {
    width: 100%;
    justify-content: center;
}

.syou-page-cat-bar--single .syou-page-cat-nav__item {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.syou-page-cat-bar--single .syou-page-cat-nav__btn {
    width: 100%;
}

@media (max-width: 740px) {
    body.syou-layout.is-pc-shell:not(.syou-proportional-scale) .mobile-frame__inner .syou-page-cat-bar {
        margin-left: 0;
        margin-right: 0;
    }
}