/* ===== GNB (brand_header_v3 전용) =====
 * Figma '톤즈의원 - 리프팅 의료정보 상세' GNB 시안(캡처 기준)을 옮긴 것. 데스크탑 1440 폭, 모바일 375 폭.
 * index2.css · testBrand.css 의 #secIndexHeader 규칙 위에 덮어쓰므로 그 둘보다 뒤에 로드한다.
 * testBrand.css 가 menuArea 배경·높이·로고 위치를 !important 로 잡고 있어 덮을 때도 !important 가 필요하다.
 *
 * 구성: 1) 공용(변수, 패널 안 제목·검색·탭·카드)  2) 데스크탑 1200px 이상  3) 모바일 1199px 이하
 */

/* ---------- 1) 공용 ---------- */
#secIndexHeader {
    --gnb-accent: #7d1730;   /* 브랜드 버건디 (medical/common.css 와 동일) */
    --gnb-ink: #1a1a1a;
    --gnb-sub: #6b6b6b;      /* 흰 배경 대비 5.3:1 */
    --gnb-line: #e5e5e5;
}

#secIndexHeader .gnb-mega__title {
    margin: 0;
    color: var(--gnb-accent);
    font-weight: 700;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 검색 */
#secIndexHeader .gnb-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background: #fff;
}
#secIndexHeader .gnb-search:focus-within { border-color: var(--gnb-accent); }
#secIndexHeader .gnb-search i { font-size: 16px; color: var(--gnb-ink); }
#secIndexHeader .gnb-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--gnb-ink);
}
#secIndexHeader .gnb-search input::placeholder { color: #8a8a8a; }

/* 지역 탭 */
#secIndexHeader .gnb-region {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
#secIndexHeader .gnb-chip {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    background: #fff;
    color: #4a4a4a;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
#secIndexHeader .gnb-chip:hover { border-color: var(--gnb-accent); color: var(--gnb-accent); }
#secIndexHeader .gnb-chip.is-active {
    border-color: var(--gnb-accent);
    background: var(--gnb-accent);
    color: #fff;
    font-weight: 700;
}

/* 의사 카드 슬라이드 (한 화면 인원·간격은 Swiper 설정이 잡는다) */
#secIndexHeader .gnb-doctors {
    position: relative;
    margin-top: 18px;
}
#secIndexHeader .gnb-doctors__empty {
    margin: 0;
    padding: 80px 0;
    text-align: center;
    font-size: 15px;
    color: var(--gnb-sub);
}
#secIndexHeader .gnb-doctors__empty[hidden] { display: none; }
#secIndexHeader .gnb-doctors__swiper .swiper-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
}
#secIndexHeader .gnb-doctor a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
#secIndexHeader .gnb-doctor__photo {
    width: 100%;
    aspect-ratio: 240 / 294;
    border-radius: 12px;
    overflow: hidden;
}
#secIndexHeader .gnb-doctor__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .4s ease;
}
#secIndexHeader .gnb-doctor a:hover .gnb-doctor__photo img { transform: scale(1.03); }
#secIndexHeader .gnb-doctor__name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gnb-ink);
    word-break: keep-all;
}
#secIndexHeader .gnb-doctor__branch {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--gnb-sub);
}

/* 패널 머리: 제목 + 오른쪽 안내 문구 (브랜드 패널) */
#secIndexHeader .gnb-mega__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px 16px;
}
#secIndexHeader .gnb-mega__hint {
    margin: 0;
    font-size: 13px;
    color: var(--gnb-sub);
    word-break: keep-all;
}

/* 브랜드 카드 3장: 위 이미지 + 아래 베이지 글 영역 */
#secIndexHeader .gnb-brand-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
#secIndexHeader .gnb-brand-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f6f3f0;
    color: inherit;
    text-decoration: none;
}
/* 높이 고정: 화면이 넓어져도 패널이 길어지지 않게. 이미지는 영역을 채우고 넘치는 부분은 잘린다(cover) */
#secIndexHeader .gnb-brand-card__img {
    position: relative;
    height: 340px;
    overflow: hidden;
}
/* 영역에 딱 맞춘다. height:100% 는 늘어나는 flex 항목 안에서 영역보다 커질 수 있어 absolute 로 채운다 */
#secIndexHeader .gnb-brand-card__img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
#secIndexHeader .gnb-brand-card a:hover .gnb-brand-card__img img { transform: scale(1.03); }
/* 준비 중 카드: 링크 없음(href 제거). 누를 수 있어 보이지 않게 커서 · 확대 · '바로가기' 를 끈다 */
#secIndexHeader .gnb-brand-card a.is-disabled { cursor: default; }
#secIndexHeader .gnb-brand-card a.is-disabled:hover .gnb-brand-card__img img { transform: none; }
#secIndexHeader .gnb-brand-card a.is-disabled .gnb-brand-card__more { display: none; }
#secIndexHeader .gnb-brand-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gnb-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
#secIndexHeader .gnb-brand-card__body {
    display: flex;
    flex-direction: column;
    padding: 22px 26px 24px;
}
#secIndexHeader .gnb-brand-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gnb-ink);
    letter-spacing: -0.02em;
    word-break: keep-all;
}
#secIndexHeader .gnb-brand-card__desc {
    margin: 8px 0 0;
    font-size: 14px;
    color: #555;
    word-break: keep-all;
}
#secIndexHeader .gnb-brand-card__more {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gnb-accent);
}

/* 의료정보 패널 (시안: 의료정보gnb.png · 의료정보카드.png): 왼쪽 추천 카드 슬라이드 + 오른쪽 검색 · TOP 10 · 카테고리 */
#secIndexHeader .gnb-med {
    display: grid;
    grid-template-columns: minmax(0, 832fr) minmax(0, 938fr);   /* 시안 폭 비율 */
    gap: 40px;
    margin-top: 16px;
}
#secIndexHeader .gnb-med__feature { position: relative; min-width: 0; }
/* 카드 슬라이드: 카드 폭 = 목록 폭, 한 장씩 (헤더 스크립트 gnbCardSlider) */
#secIndexHeader .gnb-med-cards {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
#secIndexHeader .gnb-med-cards::-webkit-scrollbar { display: none; }
#secIndexHeader .gnb-med-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
#secIndexHeader .gnb-med-card a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    min-height: 420px;
    background: #f6f3f0;
    color: inherit;
    text-decoration: none;
}
#secIndexHeader .gnb-med-card__img { position: relative; overflow: hidden; }
#secIndexHeader .gnb-med-card__img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
#secIndexHeader .gnb-med-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 28px 28px 28px;
    word-break: keep-all;
}
#secIndexHeader .gnb-med-card__kicker {
    color: var(--gnb-accent);
    font-size: 12px;
    font-weight: 700;
}
#secIndexHeader .gnb-med-card__title {
    margin-top: 6px;
    color: var(--gnb-ink);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
#secIndexHeader .gnb-med-card__desc {
    margin: 10px 0 0;
    color: #555;
    font-size: 15px;
    line-height: 1.55;
}
#secIndexHeader .gnb-med-card__more {
    margin-top: 10px;
    color: var(--gnb-accent);
    font-size: 15px;
    font-weight: 700;
}
#secIndexHeader .gnb-med-card a:hover .gnb-med-card__more { text-decoration: underline; text-underline-offset: 3px; }
/* 위치 점: 카드 글 영역 오른쪽, '자세히 보기' 줄 높이 근처 */
#secIndexHeader .gnb-med-dots {
    position: absolute;
    right: 28px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#secIndexHeader .gnb-med-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d6ccc8;
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
#secIndexHeader .gnb-med-dot.is-active { width: 20px; background: var(--gnb-accent); }

#secIndexHeader .gnb-med__side { min-width: 0; }
#secIndexHeader .gnb-med__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 30px;
}
#secIndexHeader .gnb-med__label {
    margin: 0;
    color: var(--gnb-ink);
    font-size: 16px;
    font-weight: 700;
}
#secIndexHeader .gnb-med__label--cat { margin-top: 30px; }
#secIndexHeader .gnb-med__note { margin: 0; color: var(--gnb-sub); font-size: 12px; }
/* TOP 10: 두 열(1~5 · 6~10), 위에서 아래로 */
#secIndexHeader .gnb-med-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 0 24px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
#secIndexHeader .gnb-med-top a {
    display: flex;
    align-items: center;
    height: 34px;
    border-bottom: 1px solid var(--gnb-line);
    color: var(--gnb-ink);
    font-size: 15px;
    text-decoration: none;
}
#secIndexHeader .gnb-med-top a:hover { color: var(--gnb-accent); }
#secIndexHeader .gnb-med-top em {
    flex: none;
    width: 40px;
    padding-left: 4px;
    color: #8a8a8a;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}
#secIndexHeader .gnb-med-top li:nth-child(-n+3) em { color: var(--gnb-accent); }   /* 1~3위 강조 */
#secIndexHeader .gnb-med-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
#secIndexHeader .gnb-med-cats a {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    color: #444;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, color .2s;
}
#secIndexHeader .gnb-med-cats a:hover { border-color: var(--gnb-accent); color: var(--gnb-accent); }

/* 예약하기 패널 (시안: 예약하기1.png) — 단계 표시 · STEP 제목 · 밑줄 지역 탭 · 지점 목록 */
#secIndexHeader .gnb-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
#secIndexHeader .gnb-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #767676;   /* 흰 배경 대비 4.5:1 */
    word-break: keep-all;
}
/* 단계 사이 가는 선 */
#secIndexHeader .gnb-steps__item + .gnb-steps__item::before {
    content: "";
    width: 40px;
    height: 1px;
    margin: 0 12px;
    background: #d6d6d6;
}
#secIndexHeader .gnb-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ededed;
    color: #767676;
    font-size: 13px;
    font-weight: 700;
}
#secIndexHeader .gnb-steps__item.is-current { color: var(--gnb-ink); font-weight: 700; }
#secIndexHeader .gnb-steps__item.is-current .gnb-steps__num { background: var(--gnb-accent); color: #fff; }

#secIndexHeader .gnb-reserve__title { margin-top: 22px; }

#secIndexHeader .gnb-tabs {
    display: flex;
    gap: 0 28px;
    margin-top: 20px;
    border-bottom: 1px solid var(--gnb-line);
}
#secIndexHeader .gnb-tab {
    position: relative;
    flex: none;
    padding: 0 2px 12px;
    border: 0;
    background: none;
    color: #4a4a4a;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s;
}
#secIndexHeader .gnb-tab:hover { color: var(--gnb-accent); }
#secIndexHeader .gnb-tab.is-active { color: var(--gnb-accent); font-weight: 700; }
#secIndexHeader .gnb-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--gnb-accent);
}
#secIndexHeader .gnb-tab__count {
    margin-left: 3px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: super;
    line-height: 0;
}

#secIndexHeader .gnb-reserve-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px 24px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
#secIndexHeader .gnb-reserve-list > li[hidden] { display: none; }
#secIndexHeader .gnb-reserve-branch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--gnb-ink);
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: left;
    word-break: keep-all;
    cursor: pointer;
    transition: color .2s;
}
#secIndexHeader .gnb-reserve-branch:hover,
#secIndexHeader .gnb-reserve-branch:focus-visible { color: var(--gnb-accent); }
#secIndexHeader .gnb-reserve-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gnb-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* 지나온 단계: 번호만 채우고 글자는 흐리게 */
#secIndexHeader .gnb-steps__item.is-done .gnb-steps__num { background: var(--gnb-accent); color: #fff; }
#secIndexHeader .gnb-reserve__step[hidden] { display: none; }
#secIndexHeader .gnb-reserve__title:focus { outline: none; }   /* STEP 전환 때 스크립트가 옮기는 포커스 */

/* 예약하기 STEP 2 (시안: 예약하기2.png) — 왼쪽 달력 카드 · 오른쪽 시간 선택 카드 */
#secIndexHeader .gnb-reserve__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
#secIndexHeader .gnb-reserve__head .gnb-reserve__title { margin-top: 22px; }
#secIndexHeader .gnb-reserve__branch {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}
#secIndexHeader .gnb-reserve__branch strong { font-size: 16px; font-weight: 700; color: var(--gnb-ink); }
#secIndexHeader .gnb-reserve__change {
    height: 32px;
    padding: 0 18px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    background: #fff;
    color: #4a4a4a;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
#secIndexHeader .gnb-reserve__change:hover { border-color: var(--gnb-accent); color: var(--gnb-accent); }

#secIndexHeader .gnb-reserve__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 18px;
}

/* 달력 */
/* 달력 카드는 오른쪽 시간 카드와 높이를 맞춘다(align-self: stretch). 남는 높이는 표가 늘어나 날짜 줄이 나눠 갖는다 */
#secIndexHeader .gnb-cal {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding: 18px 16px 14px;
    border: 1px solid var(--gnb-line);
    border-radius: 14px;
    background: #fff;
}
#secIndexHeader .gnb-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}
#secIndexHeader .gnb-cal__month { font-size: 17px; font-weight: 500; color: var(--gnb-ink); }
#secIndexHeader .gnb-cal__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--gnb-ink);
    font-size: 16px;
    cursor: pointer;
}
#secIndexHeader .gnb-cal__nav:hover:not(:disabled) { background: #f3f3f3; }
#secIndexHeader .gnb-cal__nav:disabled { color: #c4c4c4; cursor: default; }
#secIndexHeader .gnb-cal__grid {
    flex: 1 0 auto;
    width: 100%;
    margin-top: 6px;
    border-collapse: collapse;
    table-layout: fixed;
}
#secIndexHeader .gnb-cal__grid th {
    height: 36px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gnb-ink);
    text-align: center;
}
#secIndexHeader .gnb-cal__grid th.is-sun { color: var(--gnb-accent); }
#secIndexHeader .gnb-cal__grid td { padding: 2px; text-align: center; }
#secIndexHeader .gnb-cal__day {
    width: 100%;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--gnb-ink);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
#secIndexHeader .gnb-cal__day:hover:not(:disabled):not(.is-selected) { background: #f3f3f3; }
#secIndexHeader .gnb-cal__day.is-today { background: #f7e9ed; }
#secIndexHeader .gnb-cal__day.is-selected { background: var(--gnb-accent); color: #fff; font-weight: 700; }
#secIndexHeader .gnb-cal__day:disabled { background: none; color: #c4c4c4; cursor: default; }

/* 시간 선택 */
#secIndexHeader .gnb-time {
    padding: 20px 20px 18px;
    border-radius: 14px;
    background: #f6f7f9;
}
#secIndexHeader .gnb-time__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gnb-ink);
    word-break: keep-all;
}
#secIndexHeader .gnb-time__body { min-height: 120px; }
/* STEP 2: 달력이 더 길 때도 시간 카드가 같이 늘고, 남는 높이는 시간표 영역이 받아 선택 줄 · 버튼이 카드 아래에 붙는다 */
#secIndexHeader .gnb-reserve__body:not(.gnb-reserve__body--info) > .gnb-time {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
#secIndexHeader .gnb-reserve__body:not(.gnb-reserve__body--info) .gnb-time__body { flex: 1 0 auto; }
#secIndexHeader .gnb-time__label {
    margin: 14px 0 8px;
    font-size: 13.5px;
    color: var(--gnb-sub);
}
#secIndexHeader .gnb-time__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#secIndexHeader .gnb-time__slot {
    width: 88px;
    height: 38px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #fff;
    color: var(--gnb-ink);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
#secIndexHeader .gnb-time__slot:hover:not(:disabled):not(.is-selected) { border-color: var(--gnb-accent); color: var(--gnb-accent); }
#secIndexHeader .gnb-time__slot.is-selected { border-color: var(--gnb-accent); background: var(--gnb-accent); color: #fff; font-weight: 700; }
#secIndexHeader .gnb-time__slot:disabled {   /* 마감 (res_yn = 'N') */
    border-color: #e2e2e2;
    background: #eeeff1;
    color: #a3a3a3;
    text-decoration: line-through;
    cursor: default;
}
#secIndexHeader .gnb-time__empty {
    margin: 0;
    padding: 36px 0;
    font-size: 14px;
    color: var(--gnb-sub);
    text-align: center;
    word-break: keep-all;
}
#secIndexHeader .gnb-time__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff;
}
#secIndexHeader .gnb-time__summary span { font-size: 13.5px; color: var(--gnb-sub); }
#secIndexHeader .gnb-time__summary strong { font-size: 15px; font-weight: 700; color: var(--gnb-ink); word-break: keep-all; }
#secIndexHeader .gnb-time__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3.3fr);
    gap: 10px;
    margin-top: 12px;
}
#secIndexHeader .gnb-btn {
    height: 48px;
    border-radius: 4px;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
#secIndexHeader .gnb-btn--ghost { border: 1px solid #cfcfcf; background: #fff; color: #4a4a4a; }
#secIndexHeader .gnb-btn--ghost:hover { border-color: var(--gnb-ink); color: var(--gnb-ink); }
#secIndexHeader .gnb-btn--primary { border: 1px solid var(--gnb-accent); background: var(--gnb-accent); color: #fff; font-weight: 700; }
#secIndexHeader .gnb-btn--primary:hover { background: #64122a; }

/* 예약하기 STEP 3 (시안: 예약하기3.png) — 왼쪽 입력 카드 · 오른쪽 예약 내용 카드 */
#secIndexHeader .gnb-reserve__body--info { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
#secIndexHeader .gnb-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 22px;
    border: 1px solid var(--gnb-line);
    border-radius: 14px;
    background: #fff;
}
#secIndexHeader .gnb-info__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
}
#secIndexHeader .gnb-info__label { font-size: 15px; color: var(--gnb-ink); }
#secIndexHeader .gnb-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: #fff;
    color: var(--gnb-ink);
    font: inherit;
    font-size: 15px;
    outline: 0;
    box-sizing: border-box;
}
#secIndexHeader .gnb-input:focus { border-color: var(--gnb-accent); }
#secIndexHeader .gnb-input::placeholder { color: #8a8a8a; }
#secIndexHeader .gnb-input--select { color: #6b6b6b; cursor: pointer; }
#secIndexHeader .gnb-input--area { height: 88px; padding: 10px 12px; resize: vertical; }
#secIndexHeader .gnb-tel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
#secIndexHeader .gnb-sex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
#secIndexHeader .gnb-sex__opt {
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: #e4e4e4;
    color: #555;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
#secIndexHeader .gnb-sex__opt.is-selected { background: var(--gnb-accent); color: #fff; }

#secIndexHeader .gnb-confirm__list { margin: 12px 0 0; }
#secIndexHeader .gnb-confirm__list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
#secIndexHeader .gnb-confirm__list dt { font-size: 14px; color: var(--gnb-sub); }
#secIndexHeader .gnb-confirm__list dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--gnb-ink); text-align: right; word-break: keep-all; }
#secIndexHeader .gnb-agree {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
#secIndexHeader .gnb-agree__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 14px;
    color: var(--gnb-ink);
    word-break: keep-all;
    cursor: pointer;
}
#secIndexHeader .gnb-agree__item input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--gnb-accent);
    cursor: pointer;
}
#secIndexHeader .gnb-agree__item label { cursor: pointer; }
/* 개인정보 · 마케팅 (기존 빠른예약 모달 배치): 체크 줄 + 그 아래 약관 링크. 문구가 두 줄이 되면 체크박스는 첫 줄에 맞춘다 */
#secIndexHeader .gnb-agree__group .gnb-agree__item { flex-wrap: nowrap; align-items: flex-start; }
#secIndexHeader .gnb-agree__group .gnb-agree__item input { flex: none; margin-top: 2px; }
#secIndexHeader .gnb-agree__link {
    display: inline-block;
    margin: 2px 0 0 24px;   /* 체크박스(16) + 간격(8) 만큼 들여 문구와 맞춘다 */
    font-size: 13.5px;
    color: var(--gnb-sub);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#secIndexHeader .gnb-agree__link:hover { color: var(--gnb-accent); }
#secIndexHeader .gnb-confirm__note {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #767676;
    word-break: keep-all;
}
#secIndexHeader .gnb-confirm__note[hidden] { display: none; }
#secIndexHeader .gnb-btn:disabled { opacity: .6; cursor: default; }

/* ---------- 2) 데스크탑 (1200px 이상) ---------- */
@media (min-width: 1200px) {
    #secIndexHeader {
        --gnb-height: 75px;
        --gnb-bar-bg: rgba(43, 34, 35, .85);   /* #2B2223D9 (D9 = 85%) */
        height: auto;
        bottom: auto;   /* index2.css 가 top:0; bottom:0 고정이라, 높이를 풀면 bottom 도 풀어야 화면 전체를 덮지 않는다 */
    }

    /* --- 바 ---
     * 기본·스크롤(.active) 모두 어두운 반투명 바 + 흰 로고·글씨.
     * testBrand.css 의 .active(흰 배경·검은 글씨·검은 로고)를 같은 특이도로 뒤에서 덮는다.
     */
    #secIndexHeader .menuArea,
    #secIndexHeader .menuArea.active {
        height: var(--gnb-height);
        justify-content: center;
        padding: 0;
        background: var(--gnb-bar-bg) !important;
        color: #fff;
        border-bottom: 1px solid transparent;
        transition: background .3s, border-color .3s;
    }
    /* 로고·메뉴는 .gnb-bar(v2Container container — 서브 페이지 본문과 같은 폭) 안에서 양끝 정렬.
     * testBrand.css 가 로고를 absolute 로 띄워 두므로 흐름 안으로 되돌린다 */
    #secIndexHeader .gnb-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }
    #secIndexHeader .menuArea .logo { position: static; transform: none; margin: 0; }
    #secIndexHeader .menuArea .logo img { height: 36px; width: auto; display: block; }
    #secIndexHeader .menuArea .logo a { display: block; }   /* 메인 링크: 인라인이면 이미지 아래 줄 간격이 생긴다 */
    #secIndexHeader .menuArea.active .logo img { content: url('/main/img/v2/index/whiteLogo.png'); }
    #secIndexHeader .menuArea.active .gnb .gnb-item > a { color: #fff; }

    /* 메가 메뉴가 열려 있는 동안은 흰 헤더 + 검은 로고·굵은 글씨 (의료진 소개 호버 시안).
     * :has() 가 .active 보다 특이도가 높고, 글씨 규칙은 특이도가 같아 위 .active 규칙보다 뒤에 둔다. */
    #secIndexHeader .menuArea:has(.gnb-item--mega:hover),
    #secIndexHeader .menuArea:has(.gnb-item--mega :focus-visible) {
        background: #fff !important;
    }
    #secIndexHeader .menuArea:has(.gnb-item--mega:hover) .gnb-item > a,
    #secIndexHeader .menuArea:has(.gnb-item--mega :focus-visible) .gnb-item > a {
        color: var(--gnb-ink);
        font-weight: 700;
    }
    #secIndexHeader .menuArea:has(.gnb-item--mega:hover) .logo img,
    #secIndexHeader .menuArea:has(.gnb-item--mega :focus-visible) .logo img {
        content: url('/main/img/v2/index/blackLogo.png');
    }

    /* --- 메뉴 항목 --- */
    #secIndexHeader .menuArea .gnb {
        height: 100%;
        gap: 24px;
        font-size: 20px;
        font-weight: 400;
    }
    #secIndexHeader .gnb-item {
        position: static;              /* 패널이 .menuArea 기준으로 펼쳐지도록 */
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(120px, 10.4vw, 150px);
        height: 100%;
    }
    #secIndexHeader .gnb-item > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: inherit;
        letter-spacing: -0.02em;
        word-break: keep-all;
    }
    /* 선택 밑줄: 바 하단에 걸치는 2px */
    #secIndexHeader .gnb-item > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        z-index: 2;                    /* 패널 상단 선 위에 올라오도록 */
        background: var(--gnb-accent);
        transform: scaleX(0);
        transition: transform .25s ease;
    }
    #secIndexHeader .gnb-item:hover > a::after,
    #secIndexHeader .gnb-item:has(:focus-visible) > a::after { transform: scaleX(1); }

    /* --- 메가 패널 --- */
    #secIndexHeader .gnb-mega {
        position: absolute;
        top: 100%;                     /* 바와 틈이 없어야 마우스를 옮겨도 :hover 가 유지된다 */
        left: 0;
        right: 0;
        z-index: 1;
        border-top: 1px solid var(--gnb-line);
        background: #fff;
        color: var(--gnb-ink);
        font-size: 16px;
        font-weight: 400;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        max-height: calc(100vh - var(--gnb-height) - 45px);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    }
    #secIndexHeader .gnb-item--mega:hover .gnb-mega,
    /* 키보드 포커스(:focus-visible)일 때만 연다. :focus-within 이면 마우스로 탭을 누른 뒤 포커스가 남아 패널이 안 닫힌다.
     * 검색창은 마우스로 눌러도 :focus-visible 이라 입력하는 동안은 열려 있다 */
    #secIndexHeader .gnb-item--mega:has(:focus-visible) .gnb-mega {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .25s ease, transform .25s ease, visibility 0s;
    }
    /* 폭 제한 없음: 바의 로고·메뉴처럼 화면 끝까지 쓰고 좌우 여백만 바와 같게(62px) 둔다 */
    /* 좌우는 안쪽 .v2Container 가 맡는다(서브 페이지 본문과 같은 선). 위아래 여백만 여기서 */
    #secIndexHeader .gnb-mega__inner { padding: 20px 0 48px; }
    #secIndexHeader .gnb-mega__title { font-size: 24px; }
    #secIndexHeader .gnb-search { width: min(520px, 100%); margin: 12px auto 0; }
    #secIndexHeader .gnb-med__search { width: 100%; margin: 0; }   /* 의료정보: 오른쪽 칸 맨 위, 칸 폭 전체 */
    #secIndexHeader .gnb-region { justify-content: center; }
    /* 의료정보: 패널 높이 맞춤으로 늘어난 만큼 카드 칸이 채운다 */
    #secIndexHeader .gnb-med { flex: 1 0 auto; }

    /* 메가 메뉴 이미지 높이 통일: 브랜드 카드(공용 규칙)와 같게 340px 고정. 사진은 위 기준으로 채운다(cover) */
    #secIndexHeader .gnb-doctor__photo { height: 340px; aspect-ratio: auto; }

    /* 패널 높이 맞춤(헤더 스크립트가 가장 긴 패널 높이를 min-height 로 건다)으로 브랜드 패널에 남는 공간은
     * 여백 대신 카드 이미지가 차지한다: 패널 → 안쪽 → 카드 목록 → 카드 → 이미지 순으로 늘어난다.
     * 이미지는 340px 이 최소. 스크립트는 min-height 를 지운 상태에서 재므로 늘어난 만큼이 다시 측정에 섞이지 않는다 */
    #secIndexHeader .gnb-mega { display: flex; flex-direction: column; }
    #secIndexHeader .gnb-mega__inner,
    #secIndexHeader .gnb-mega__inner > .v2Container { flex: 1 0 auto; display: flex; flex-direction: column; }
    #secIndexHeader .gnb-brand-cards { flex: 1 0 auto; }
    #secIndexHeader .gnb-brand-card__img { height: auto; min-height: 0; flex: 1 0 340px; }   /* min-height:0 — 이미지 원본 높이가 최소 높이로 잡히지 않게 */

    /* 고정해 둔 패널(.is-open — 예약하기 STEP 2): 호버가 풀려도 열린 상태와 흰 헤더를 유지한다 */
    #secIndexHeader .gnb-item--mega.is-open .gnb-mega {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .25s ease, transform .25s ease, visibility 0s;
    }
    #secIndexHeader .gnb-item--mega.is-open > a::after { transform: scaleX(1); }
    #secIndexHeader .menuArea:has(.gnb-item--mega.is-open) { background: #fff !important; }
    #secIndexHeader .menuArea:has(.gnb-item--mega.is-open) .gnb-item > a { color: var(--gnb-ink); font-weight: 700; }
    #secIndexHeader .menuArea:has(.gnb-item--mega.is-open) .logo img { content: url('/main/img/v2/index/blackLogo.png'); }
}

/* ---------- 3) 모바일·태블릿 (1199px 이하, 375 폭 시안) ----------
 * 띠 배너(36) + 로고 줄(53) + 메뉴 줄(44) = 133px 고정 헤더. 흰 배경 고정.
 * 터치에는 호버가 없으므로 '의료진 소개' 를 탭하면 .is-open 이 붙어 패널이 열린다(헤더 스크립트).
 */
@media (max-width: 1199px) {
    #secIndexHeader {
        height: auto;
        bottom: auto;   /* 데스크탑과 같은 이유 */
        background: #fff;
        color: var(--gnb-ink);
    }

    /* 띠 배너: 지점 오픈 문구만, 정지 상태로 */
    #secIndexHeader .openBanner {
        display: flex;
        height: 36px;
        background: #efefef;
    }
    #secIndexHeader .openBanner .banner { gap: 0 !important; }
    #secIndexHeader .openBanner .banner > .divFlex:first-child { display: none; }   /* "본연의 아름다움을…" */
    #secIndexHeader .openBanner .container .banner .grandOpen {
        animation: none;
        transform: none;
    }
    #secIndexHeader .openBanner .container .banner .grandOpen span {
        margin-right: 6px !important;
        color: var(--gnb-accent);
        font-size: 14px;
        font-weight: 700;
        line-height: 36px;
        letter-spacing: 0;
    }
    #secIndexHeader .openBanner .container .banner .grandOpen span:last-child { margin-right: 0 !important; }

    /* 로고 줄 + 메뉴 줄을 세로로 쌓는다 */
    #secIndexHeader .menuArea,
    #secIndexHeader .menuArea.active {
        flex-direction: column;
        align-items: stretch;
        height: auto !important;
        padding: 0;
        background: #fff !important;
        color: var(--gnb-ink);
    }
    /* 모바일은 로고 줄 · 메뉴 줄이 화면 폭 전체(아래 선 포함)를 쓰므로 .gnb-bar 의 폭 제한을 푼다.
     * v2Container 의 767px 이하 padding 이 !important 라 같이 !important 로 덮는다 */
    #secIndexHeader .gnb-bar.v2Container {
        display: block;
        max-width: none;
        padding: 0 !important;
    }
    #secIndexHeader .menuArea .logo {
        position: static;
        transform: none;
        display: flex;
        align-items: center;
        height: 53px;
        margin: 0;
        padding: 0 16px;   /* 본문 v2Container 의 모바일 좌우 16px 과 맞춤 */
        border-bottom: 1px solid var(--gnb-line);
    }
    #secIndexHeader .menuArea .logo img {
        height: 20px;
        width: auto;
        content: url('/main/img/v2/index/blackLogo.png');
    }

    /* 메뉴 줄: 375 폭에 5개가 꽉 차게. 더 좁으면 가로 스크롤 */
    #secIndexHeader .menuArea .gnb {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        height: 44px;
        padding: 0 12px;
        border-bottom: 1px solid var(--gnb-line);
        overflow-x: auto;
        scrollbar-width: none;
        font-size: 15px;
        font-weight: 700;
    }
    #secIndexHeader .menuArea .gnb::-webkit-scrollbar { display: none; }
    #secIndexHeader .gnb-item {
        position: static;              /* 패널이 .menuArea 기준으로 펼쳐지도록 */
        flex: none;
        height: 100%;
    }
    #secIndexHeader .gnb-item > a {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        color: var(--gnb-ink);
        white-space: nowrap;
        letter-spacing: -0.02em;
    }
    #secIndexHeader .gnb-item--mega.is-open > a::after {
        content: "";
        position: absolute;
        left: -6px;
        right: -6px;
        bottom: -1px;
        height: 2px;
        background: var(--gnb-accent);
    }

    /* 패널: 메뉴 줄 바로 아래, 화면 폭 전체 */
    #secIndexHeader .gnb-mega {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        background: #fff;
        color: var(--gnb-ink);
        font-size: 16px;
        font-weight: 400;
        /* 헤더(133px) 아래 남은 화면을 꽉 채운다. 내용이 더 길면 패널 안에서 스크롤 */
        height: calc(100vh - 133px);
        height: calc(100dvh - 133px);   /* 모바일 주소창 높이 변화를 반영 (지원 브라우저) */
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #secIndexHeader .gnb-item--mega.is-open .gnb-mega { display: block; }
    #secIndexHeader .gnb-mega__inner { padding: 24px 0 32px; }   /* 좌우 16px 은 안쪽 .v2Container 가 준다 */
    #secIndexHeader .gnb-mega__title { font-size: 20px; }
    #secIndexHeader .gnb-search { width: 100%; margin: 16px 0 0; }
    #secIndexHeader .gnb-region { justify-content: flex-start; gap: 10px 8px; }
    #secIndexHeader .gnb-doctors { margin-top: 16px; }
    #secIndexHeader .gnb-doctor__photo { aspect-ratio: 161 / 250; }

    /* 의료정보: 태블릿부터 카드와 검색 · 목록을 위아래로 (휴대폰은 아래 767 구간에서 더 낮춘다) */
    #secIndexHeader .gnb-med { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    #secIndexHeader .gnb-med-card a { min-height: 320px; }

    /* 브랜드 카드: 시안이 없어 한 줄에 하나씩 쌓고 이미지를 낮게(16:9) 둔다 */
    #secIndexHeader .gnb-mega__hint { font-size: 12px; }
    #secIndexHeader .gnb-brand-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
    #secIndexHeader .gnb-brand-card__img { height: auto; aspect-ratio: 16 / 9; max-height: 240px; }   /* 태블릿 1열에서 커지지 않게 */
    #secIndexHeader .gnb-brand-card__body { padding: 16px 18px 18px; }
    #secIndexHeader .gnb-brand-card__title { font-size: 18px; }

    /* 예약하기: 단계 선은 짧게, 탭은 가로 스크롤, 지점은 2열(태블릿 3열) */
    #secIndexHeader .gnb-steps { flex-wrap: nowrap; }   /* 375 폭에서 세 단계가 한 줄에 들어가게 선을 줄인다 */
    #secIndexHeader .gnb-steps__item { font-size: 13.5px; gap: 6px; white-space: nowrap; }
    #secIndexHeader .gnb-steps__item + .gnb-steps__item::before { width: 10px; margin: 0 6px; }
    #secIndexHeader .gnb-steps__num { width: 22px; height: 22px; font-size: 12px; }
    #secIndexHeader .gnb-reserve__title { margin-top: 18px; }
    #secIndexHeader .gnb-tabs {
        gap: 0 20px;
        margin-top: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #secIndexHeader .gnb-tabs::-webkit-scrollbar { display: none; }
    #secIndexHeader .gnb-tab { font-size: 15px; padding-bottom: 10px; }
    #secIndexHeader .gnb-tab.is-active::after { bottom: 0; }   /* 스크롤 영역 안에서 잘리지 않게 */
    /* 태블릿 · 모바일 모두 한 줄에 세 지점. 칸이 좁아 OPEN 배지는 이름 아래로 내려갈 수 있다 */
    #secIndexHeader .gnb-reserve-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin-top: 8px; }
    #secIndexHeader .gnb-reserve-branch { flex-wrap: wrap; font-size: 15px; padding: 12px 0; gap: 4px 6px; }
    #secIndexHeader .gnb-reserve-badge { font-size: 10px; padding: 2px 7px; }

    /* 예약하기 STEP 2: 달력 위 · 시간 아래로 쌓는다 */
    #secIndexHeader .gnb-reserve__head .gnb-reserve__title,
    #secIndexHeader .gnb-reserve__branch { margin-top: 16px; }
    #secIndexHeader .gnb-reserve__body { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
    #secIndexHeader .gnb-cal { padding: 14px 10px 10px; }
    #secIndexHeader .gnb-cal__day { height: 40px; }
    #secIndexHeader .gnb-time { padding: 18px 14px 14px; }
    #secIndexHeader .gnb-time__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #secIndexHeader .gnb-time__slot { width: auto; font-size: 14px; }
    #secIndexHeader .gnb-time__summary strong { font-size: 14px; }

    /* 예약하기 STEP 3: 라벨을 입력칸 위로, 예약 내용 카드는 입력 카드 아래로 */
    #secIndexHeader .gnb-reserve__body--info { grid-template-columns: minmax(0, 1fr); }
    #secIndexHeader .gnb-info { padding: 16px 14px; gap: 14px; }
    #secIndexHeader .gnb-info__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    #secIndexHeader .gnb-info__label { font-size: 14px; }
    #secIndexHeader .gnb-input,
    #secIndexHeader .gnb-sex__opt { height: 44px; }   /* 터치 대상 */
    #secIndexHeader .gnb-input--area { height: 88px; }   /* 위 규칙이 요청사항 칸까지 줄이지 않게 */
    #secIndexHeader .gnb-tel { gap: 8px; }
}
/* 브랜드 카드 위치 점: 모바일 슬라이드 전용 */
#secIndexHeader .gnb-brand-dots { display: none; }

/* ---------- 4) 휴대폰 767px 이하 ---------- */
@media (max-width: 767px) {
    /* 의료정보: 휴대폰은 추천 카드를 빼고 검색 → TOP 10 → 카테고리만 쌓는다 (자동 넘김도 768px 이상에서만 — 헤더 스크립트) */
    #secIndexHeader .gnb-med { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }   /* 검색창이 위 여백(16px)을 가진다 */
    #secIndexHeader .gnb-med__feature { display: none; }
    #secIndexHeader .gnb-med__row { margin-top: 24px; }
    #secIndexHeader .gnb-med-top { gap: 0 16px; }
    #secIndexHeader .gnb-med-top em { width: 28px; }

    /* 브랜드 카드 (시안: 브랜드모바일gnb.png): 한 장씩 가로로 넘긴다. 자동 넘김(3초)은 헤더 스크립트 */
    #secIndexHeader .gnb-mega__title { font-size: 22px; }
    #secIndexHeader .gnb-brand-cards {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    #secIndexHeader .gnb-brand-cards::-webkit-scrollbar { display: none; }
    #secIndexHeader .gnb-brand-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;   /* 한 번에 한 장씩 */
    }
    #secIndexHeader .gnb-brand-card a { border-radius: 16px; }
    #secIndexHeader .gnb-brand-card__img { aspect-ratio: 686 / 600; max-height: none; }   /* 시안 비율 */
    #secIndexHeader .gnb-brand-card__badge { top: 14px; left: 14px; padding: 4px 12px; font-size: 14px; }
    #secIndexHeader .gnb-brand-card__body { padding: 24px 26px 26px; }
    #secIndexHeader .gnb-brand-card__title { font-size: 20px; }
    #secIndexHeader .gnb-brand-card__desc { margin-top: 6px; font-size: 14px; }
    #secIndexHeader .gnb-brand-card__more { margin-top: 8px; font-size: 14px; }

    #secIndexHeader .gnb-brand-dots {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 16px;
    }
    #secIndexHeader .gnb-brand-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #d6ccc8;
        cursor: pointer;
        transition: width .3s ease, background .3s ease;
    }
    #secIndexHeader .gnb-brand-dot.is-active { width: 20px; background: var(--gnb-accent); }
}

@media (prefers-reduced-motion: reduce) {
    #secIndexHeader .gnb-brand-dot,
    #secIndexHeader .gnb-med-dot,
    #secIndexHeader .gnb-mega,
    #secIndexHeader .gnb-item > a::after,
    #secIndexHeader .gnb-doctor__photo img,
    #secIndexHeader .gnb-brand-card__img img { transition: none; }
}