@charset "UTF-8";
/* 기본형4(테마6) 「병원소개」 섹션 가로 서브탭 — 시안 PC 0:852 / MO 735:4487.
   탭 줄은 전 구간에서 «안 넘치면 가운데, 넘치면 가로 스크롤»이고, MO 는 옅은
   primary 배경 띠 위에 놓인다 [KAN-300].
   테마1~5 는 이 파일을 로드하지 않는다(테마6 셸만 <link> 를 낸다).

   ⚠️ 값은 전부 px 다. rem 으로 쓰면 테마6 html 루트 폰트(16 / ≤1024 28 / ≤720 14,
   layout.css)를 따라 태블릿에서 글자가 28px 로 커진다 — KAN-300 이 고친 버그다. */

/* 탭 띠의 «총» 높이(위 여백 + 링크 높이 [+ MO 아래 여백]). 앵커의 scroll-margin-top
   (introduction.css)과 SectionTabScrollSpy 기준선이 이 값을 읽으므로 링크 padding·
   line-height·밑줄을 고치면 여기도 같이 고쳐야 한다 — 안 맞추면 #staff 로 뛰었을 때
   제목이 탭 뒤로 숨는다. 합계는 sectionTabCss.test.ts 가 지킨다.
   PC 시안 0:852: 헤더 아래 53 여백 + 탭 39 = 92. */
:root {
    --t6-section-tab-h: 92px;
}
@media (max-width: 1024px) {
    :root {
        /* 41 여백 + 탭 39 */
        --t6-section-tab-h: 80px;
    }
}
@media (max-width: 720px) {
    :root {
        /* MO 시안 735:4487(@2x 절반): 위 10 + 탭 31 + 아래 7 = 48 */
        --t6-section-tab-h: 48px;
    }
}

/* 스크롤해도 헤더 바로 아래에 붙어 따라온다.
   `#header` 는 position:fixed / z-index:200 이라(layout.css:70) 그 아래
   `top: var(--nav-height)` 에 붙이고 z-index 는 그보다 «낮게» 준다 — 높이면
   헤더 위로 올라와 로고·검색을 덮는다.
   배경을 흰색으로 깔아야 한다. 투명이면 아래로 지나가는 본문이 탭 글자와
   겹쳐 읽히지 않는다. */
.t6-section-tab {
    position: sticky;
    top: var(--nav-height);
    z-index: 100;
    width: 100%;
    padding-top: calc(var(--t6-section-tab-h) - 39px);
    background-color: #fff;
}

/* 가운데 정렬을 justify-content:center 로 하지 «않는다». 탭이 넘치면(긴 병원명·
   DB 메뉴명·외국어) center 는 왼쪽 끝을 스크롤 범위 밖으로 밀어 영영 못 본다.
   첫·끝 항목의 auto margin 은 넘치면 0 으로 줄어 첫 탭부터 스크롤된다.
   (`safe center` 는 Safari 17.6 부터라 쓰지 않는다.) */
.t6-section-tab__list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.t6-section-tab__list::-webkit-scrollbar {
    display: none;
}

.t6-section-tab__item {
    flex: 0 0 auto;
}
.t6-section-tab__item:first-child {
    margin-left: auto;
}
.t6-section-tab__item:last-child {
    margin-right: auto;
}

/* PC 시안 0:852: 텍스트 y 11 · 높이 17, 밑줄 2 는 stroke inside 라 아래 11 안에
   들어 있다 → 11 + 17 + 9 + 2 = 39.
   비활성색은 시안 #8b8b8b 가 아니라 #666666 이다 — #8b8b8b 는 흰 배경 3.41:1 로
   WCAG AA(4.5:1) 미달이다. MO 띠는 병원이 고르는 --primary 의 10% 틴트라 주색이
   어두울수록 어두워지는데, 최악(주색 #000 → #e6e6e6)에서도 #666666 은 4.60 이다
   (#6e6e6e 는 4.09 로 미달). 흰 배경 5.74. */
.t6-section-tab__link {
    display: block;
    padding: 11px 16px 9px;
    font-size: 14px;
    line-height: 17px;
    color: #666666;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.t6-section-tab__link:hover {
    color: #111;
}

.t6-section-tab__item.active .t6-section-tab__link {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 700;
}

/* MO: primary 10% 배경 띠 (시안 735:4487 Rectangle 48).
   브레이크포인트 720px 은 테마6 관례다 — page.css·common.css 가 MO 구간으로
   쓰는 값이고 MO 시안 프레임 폭(720 = @2x)과도 같다. */
@media (max-width: 720px) {
    /* 시안은 rgba(primary, .1) 이지만 반투명이면 sticky 띠 아래로 지나가는 본문이
       비친다 — 흰색과 섞어 불투명하게 만든다(main.css 의 같은 선례). */
    .t6-section-tab {
        padding: 10px 0 7px;
        background-color: color-mix(in srgb, var(--primary) 10%, #fff);
    }
    .t6-section-tab__list {
        padding: 0 1rem;
    }
    /* 시안 @2x 절반: 텍스트 y 8.25 · 높이 14.5, 밑줄 1.5(inside)
       → 8.25 + 14.5 + 6.75 + 1.5 = 31. 1.5px 밑줄은 DPR ≥ 2 에서 3 기기px 로 정확하다. */
    .t6-section-tab__link {
        padding: 8.25px 12px 6.75px;
        font-size: 12px;
        line-height: 14.5px;
        border-bottom-width: 1.5px;
    }
}