/**
 * banner.css — 참사랑한의원 서브페이지 배너 (진한 네이비 · 흰 글자 · 흐르는 영문 워터마크)
 * 뼈대의 파란 그라데이션 배너를 사이트 전용으로 덮어쓴다. 마크업: templates/shared/breadcrumb.php
 */
.page-banner {
    /* 진한 네이비 (2026-09-30 클라이언트 요청 — 파랑→청록→초록 그러데이션에서 변경). 홈 원장 소개 패널·진료시간 카드와 같은 계열, 왼쪽 위만 옅게 밝힘 */
    background:
        radial-gradient(ellipse 50% 90% at 0% 0%, rgba(110, 150, 205, .28), transparent 70%),
        linear-gradient(100deg, #123F7A 0%, #0B3269 50%, #082552 100%);
    color: #fff;
    padding: 150px 0 130px;
    /* overflow:hidden 금지 — 하단 드롭다운 목록이 배너 밖으로 펼쳐진다. 워터마크는 .pb-marquee 자체가 가로로 잘라낸다 */
}
.page-banner::before,
.page-banner::after { display: none; }   /* 뼈대 그라데이션·장식 레이어 끔 */

/* 흐르는 영문 워터마크 — 배너 하단 경계에 글자 밑선이 닿도록 (line-height 1 = 글자 높이) */
.pb-marquee {
    position: absolute; left: 0; right: 0; bottom: -4px;
    overflow: hidden; white-space: nowrap; pointer-events: none; z-index: 0;
    line-height: 1;
}
.pb-marquee-track { display: block; width: max-content; animation: pbMarquee 90s linear infinite; }   /* 60s → 90s, 더 천천히 */
.pb-marquee-track span {
    display: inline-block; padding-right: .5em; vertical-align: bottom;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 150px; line-height: .78;   /* 대문자 높이만큼만 → 밑선이 배너 경계에 딱 붙음 */
    color: rgba(255, 255, 255, .1);   /* 색 배경 위라 흰 글자 */
}
/* 문구 앞 로고 심벌 — 글자(대문자) 높이에 맞추고 같은 투명도 */
.pb-marquee-track span { position: relative; padding-left: .72em; }   /* 로고 자리 (로고 폭 .6em + 간격 .12em) */
.pb-marquee-logo {
    position: absolute; left: 0; bottom: .03em;   /* 글자 밑선(배너 하단 경계)에 맞춤 — line-height 를 줄인 상태라 baseline 정렬이 어긋나서 절대 배치 */
    height: .72em;                                /* Montserrat 대문자 높이 ≈ .72em */
    width: auto;
    opacity: .1;
    filter: brightness(0) invert(1);   /* 남색 로고를 흰색으로 */
}
@keyframes pbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pb-marquee-track { animation: none; } }
body.sitemap-open .pb-marquee-track { animation-play-state: paused; }   /* 사이트맵이 열린 동안 정지 (뒤에서 계속 돌면 반투명 오버레이 전체가 매 프레임 다시 그려짐) */

/* 글자색: 색 배경 위 흰색 */
.page-banner-title { color: #fff; letter-spacing: -0.05em;}
.breadcrumb-link { color: rgba(255, 255, 255, .85); }
.breadcrumb-link:hover { color: #fff; }
.breadcrumb-sep { color: rgba(255, 255, 255, .55); }

/* 하단 드롭다운: 반투명 검정 → 흰 박스 + 옅은 테두리 */
.banner-dd { height: 60px; }               /* 48px → 60px */
.banner-dd-trigger {
    background: rgba(255, 255, 255, .7); color: var(--text-dark);   /* 흰 박스 — 색 배경 위에서 또렷하게 */
    border: 1px solid rgba(255, 255, 255, .8); backdrop-filter: none;
    font-size: .95rem;
}
.banner-dd-trigger:hover,
.banner-dd.open .banner-dd-trigger { background: rgba(255, 255, 255, .8); border-color: #fff; color: var(--primary); }
.banner-dd-trigger i { color: var(--text-mid); }   /* 흰 박스 위 화살표 */
.banner-dd-list { border: 1px solid #DDE2EA; }
.banner-dd-list a:hover { background: #F2F4F7; color: var(--primary); }
.banner-dd-list a.active { color: var(--primary); }

@media (max-width: 1023px) {
    .page-banner { padding: 110px 0 100px; }
    .pb-marquee-track span { font-size: 130px; }
}
@media (max-width: 640px) {
    .page-banner { padding: 90px 0 84px; }
    .pb-marquee-track span { font-size: 110px; }
}

/* 드롭다운 단계: 데스크톱은 1차 | 그룹 | 페이지 세 개, 모바일은 아래 두 단계만 (1차는 위 브레드크럼에 보임) */
@media (max-width: 767px) {
    .banner-bar-inner { padding: 0 16px; }
    .banner-dds { width: 100%; gap: 8px; }
    .banner-dd { flex: 1 1 0; width: auto; min-width: 0; height:45px;}
    .banner-dd-trigger { padding: 0 12px; font-size: .88rem; }
    .banner-dd-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .banner-dds.has-group .banner-dd--top { display: none; }
}