/* ── 모바일 헤더 + 전체 메뉴 (jiyulclinic 스타일) ──
   PC 헤더는 기존 레거시 헤더(.pc-header, base.css/main.css)를 그대로 쓴다.
   1000px 이하에서만 이 시트의 헤더 바(.m-header)와 드로어(#site-drawer)로 교체된다.
   드로어: 왼쪽 1depth 목록 + 오른쪽 슬라이드 패널 드릴다운. */
:root {
    --fm-accent: #c5a568;
    /* 서브메뉴 글자·호버용 진한 골드 — #c5a568 은 옅은 배경 위에서 대비가 모자란다 */
    --fm-accent-deep: #8e6f34;
    --fm-heading: #222;
    --fm-ink: #2f2f2f;
}

/* ── PC 드롭다운(.depth01_back) 보정 ──
   main.css 는 패널에 opacity:90% 를 걸어 배경뿐 아니라 글자까지 흐려진다.
   불투명도는 되돌리고 배경만 반투명 + 블러로 처리해 글자 대비를 확보한다. */
/* 패널의 부모인 .header 는 항상 투명해야 한다. 레거시 jQuery 가 스크롤 상태에서
   .header 에 흰 배경을 인라인으로 넣는데, .header 박스가 패널까지 감싸고 있어서
   그 사각 배경이 패널의 둥근 모서리를 덮어 버린다(라운드가 안 먹은 것처럼 보임).
   헤더 바의 흰 배경은 .top 이 따로 갖고 있으므로 없애도 겉보기는 그대로다. */
header .header { background-color: transparent !important; }

header .header .depth01_back {
    opacity: 1;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
    border-radius: 0 0 20px 20px;
    /* 둥근 모서리 밖으로 서브메뉴가 삐져나오지 않게. jQuery slideUp/Down 이
       애니메이션 중 인라인 overflow 를 썼다가 되돌리므로 이 값이 그대로 남는다 */
    overflow: hidden;
    /* 전폭 패널이라 그림자가 진하면 아래에 탁한 띠처럼 남는다 — 아주 옅게만 */
    box-shadow: 0 14px 24px -22px rgba(0, 0, 0, 0.18);
}
/* ── 대표전화 — 라벨은 작게, 번호는 크게 ──
   줄 높이는 기존(20px × 1.5 = 30px)을 유지해야 .header_right 의 top 값 그대로
   세로 가운데에 남는다. 번호만 키우고 박스 높이는 건드리지 않는다. */
header .header .header_right a.tel {
    display: inline-flex; align-items: baseline;
    gap: 8px;
    font-size: 16px; font-weight: 500; line-height: 30px;
}
header .header .header_right a.tel .tel-num {
    /* 숫자는 Outfit — legacy-head.blade.php 에서 구글 폰트로 불러온다 */
    font-family: 'Outfit', 'Wanted Sans Variable', sans-serif;
    font-size: 26px; font-weight: 400;
    letter-spacing: -.01em;
}

/* 서브메뉴 글자 — 사진 위에서도 읽히도록 색을 낮추고 굵기를 한 단계 올린다 */
.depth01 .inner { color: #222; font-weight: 500; }
/* 호버는 진한 골드 — 원래 #c5a568 은 흰 배경에서 대비가 모자라 오히려 흐려 보였다 */
.depth01 .inner:hover { color: var(--fm-accent-deep); }

/* 메뉴가 펼쳐졌을 때 본문을 덮는 스크림 — 헤더(z-index:99) 아래에 깔린다.
   색을 얹으면 패널의 둥근 모서리 뒤로 회색 판이 깔린 것처럼 보여 부자연스럽다.
   흐림만 걸어서 뒷 배경이 그대로 비치되 초점만 빠지게 한다. */
.gnb-scrim {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 98;
    background: transparent;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gnb-scrim.is-on { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    .gnb-scrim { transition: none; }
}

/* ── PC / 모바일 헤더 전환 ──
   두 헤더가 같이 렌더되므로 폭에 따라 한쪽만 보여준다.
   .pc-header 숨김은 main.css 의 header 규칙보다 뒤 시트라 그대로 이긴다. */
.m-header { display: none; }

@media screen and (max-width: 1000px) {
    .pc-header { display: none; }

    /* 모바일 헤더 바 — 로고(좌) + 점 3개 햄버거(우). 본문 여백 80px 는 main.css 값 */
    .m-header {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%;
        z-index: 50;
        background: #fff;
        border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    }
    .header-bar {
        height: 80px; padding: 0 20px 0 15px;
        display: flex; align-items: center; justify-content: space-between;
    }
    .header-logo { height: 36px; width: auto; }
    .header-home { display: flex; align-items: center; flex: none; }
}

/* ── 햄버거 (점 3개 가로 배열) ── */
.header-icon-btn {
    display: flex;
    flex-direction: row; align-items: center; justify-content: center;
    gap: 4px;
    width: 24px; height: 24px;
    padding: 0; border: 0; background: none;
    color: var(--fm-heading);
    cursor: pointer;
}
.header-icon-btn span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* 메뉴 버튼 터치 피드백 — 누르면 뒤로 원형 배경이 차오르고, 떼면 사라진다 */
.header-icon-btn,
.fullmenu-close {
    -webkit-tap-highlight-color: transparent;
}
.header-icon-btn { position: relative; }
.header-icon-btn::before,
.fullmenu-close::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    z-index: -1;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.header-icon-btn:active::before,
.fullmenu-close:active::before {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(1);
    transition-duration: 0.08s;                /* 누르는 순간은 빠르게 */
}
.fullmenu-close { color: var(--fm-heading); }

.fullmenu {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 120;                       /* .gnb_btn(99) 위를 덮는다 */
    background: #fff;
    display: flex; flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.fullmenu.is-open { opacity: 1; visibility: visible; }

/* 헤더 바(모바일 80px)와 같은 높이/여백 — 메뉴가 열려도 로고가 같은 자리로 보인다 */
.fullmenu-top {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto;
    height: 80px;
    padding: 0 20px 0 15px;
    border-bottom: 1px solid #eef0f2;
}
.fullmenu-top .fullmenu-logo img { height: 36px; cursor: pointer; }

/* 닫기 버튼 — 헤더 햄버거와 같은 자리에서 시작해
   메뉴가 열리면 점 3개가 가운데로 합쳐졌다가 X로 펼쳐진다 */
.fullmenu-close {
    position: relative;
    width: 24px; height: 24px;
    flex: none;
    padding: 0; border: 0; background: none;
    cursor: pointer;
}
.fullmenu-close span {
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: #222;
    transform: translate(-50%, -50%);
}
.fullmenu-close span:nth-child(1) { transform: translate(-50%, -50%) translateX(-10px); }
.fullmenu-close span:nth-child(3) { transform: translate(-50%, -50%) translateX(10px); }

.fullmenu.is-open .fullmenu-close span:nth-child(1) { animation: fm-x-left .55s ease forwards; }
.fullmenu.is-open .fullmenu-close span:nth-child(2) { animation: fm-x-mid .55s ease forwards; }
.fullmenu.is-open .fullmenu-close span:nth-child(3) { animation: fm-x-right .55s ease forwards; }

/* 0~45%: 점이 가운데로 모임 → 55%까지 하나로 겹침 → 100%: X 막대로 펼쳐짐 */
@keyframes fm-x-left {
    0%        { transform: translate(-50%, -50%) translateX(-10px); width: 6px; height: 6px; border-radius: 50%; }
    45%, 55%  { transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; }
    100%      { transform: translate(-50%, -50%) rotate(45deg); width: 20px; height: 2px; border-radius: 2px; }
}
@keyframes fm-x-mid {
    0%        { opacity: 1; }
    45%, 100% { opacity: 0; }
}
@keyframes fm-x-right {
    0%        { transform: translate(-50%, -50%) translateX(10px); width: 6px; height: 6px; border-radius: 50%; }
    45%, 55%  { transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; }
    100%      { transform: translate(-50%, -50%) rotate(-45deg); width: 20px; height: 2px; border-radius: 2px; }
}

.fullmenu-body {
    position: relative;
    flex: 1 1 auto; min-height: 0;      /* flex 자식 스크롤 활성화(필수) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 20px 48px 15px;
}
/* 1depth 목록 옆 세로 구분선 — 서브메뉴 패널 왼쪽 모서리에 딱 붙인다 */
.fullmenu-body::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc(44% - 1px);                /* .fm-panel(56%) 왼쪽 모서리와 일치 */
    width: 1px;
    background: #eef0f2;
    pointer-events: none;
}

/* 1depth: 왼쪽 목록 열 — 오른쪽은 하위 패널 자리.
   좁은 폰에서도 "두통 어지럼증 클리닉"이 한 줄에 들어가게 살짝 줄인 유동 크기 + 줄바꿈 금지 */
.fm-cat { display: block; }
.fm-cat-title {
    display: block;
    width: auto;
    padding: 20px 0;
    color: #222;
    font-size: clamp(14px, 4.1vw, 17px);
    font-weight: 700; line-height: 1.35;
    letter-spacing: -.04em;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.18s ease;
}
/* hover 색은 활성(is-open/is-current) 색과 동일한 포인트 컬러 */
.fm-cat-title:hover,
.fm-cat.is-open .fm-cat-title { color: var(--fm-accent); }

/* 하위 패널: 오른쪽 62% 영역만 차지 — 왼쪽 1depth 목록을 가리지 않고,
   왼쪽에서 살짝 밀려 나오며 나타난다 */
.fm-panel {
    position: fixed;
    top: 80px; right: 0; bottom: 0;     /* 상단 바(80px)는 남겨둔다 */
    width: 56%;                          /* 세로 구분선(44%)과 맞물린다 */
    z-index: 3;
    background: #fff;
    /* 좌우 패딩 0 — 서브메뉴 구분선이 세로선부터 화면 오른쪽 끝까지 닿는다 */
    padding: 28px 0 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 닫힐 때: 왼쪽으로 쑥 빠지면서 빠르게 사라진다 */
    transform: translateX(-60%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.38s cubic-bezier(.32,.72,0,1), opacity 0.18s ease, visibility 0.38s;
}
/* 열릴 때: 옆에서 쓱 쓸려 들어온다 — 이동은 길게, 페이드는 살짝 늦게 */
.fm-cat.is-open .fm-panel {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.45s cubic-bezier(.22,.9,.3,1), opacity 0.3s ease 0.05s, visibility 0s;
}

.fm-grid { display: flex; flex-direction: column; gap: 0; }
/* 서브 메뉴는 선으로 구분 — 텍스트만 들여쓰고 선은 패널 전체 폭 */
.fm-panel .fm-col {
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f2;
}
.fm-panel .fm-col:last-child { border-bottom: none; }
.fm-panel .fm-col:first-child { padding-top: 0; }
.fm-item {
    display: inline-block;
    color: #2f2f2f;
    font-size: 16px; font-weight: 400; line-height: 1.5;
    letter-spacing: -.04em;
    text-decoration: none;
    transition: color 0.16s ease;
}
.fm-item:hover { color: var(--fm-accent); }
/* 현재 페이지 항목 강조 (메뉴를 열 때 JS가 표시) */
.fm-item.is-current { color: var(--fm-accent); font-weight: 700; }

/* 항목이 순서대로 살짝 밀려 떠오른다 (iOS풍 캐스케이드) */
.fm-panel .fm-col {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.32,.72,0,1);
}
.fm-cat.is-open .fm-panel .fm-col { opacity: 1; transform: none; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(1) { transition-delay: 0.10s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(2) { transition-delay: 0.15s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(3) { transition-delay: 0.20s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(4) { transition-delay: 0.25s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(5) { transition-delay: 0.30s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(6) { transition-delay: 0.35s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(7) { transition-delay: 0.40s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(8) { transition-delay: 0.45s; }
.fm-cat.is-open .fm-panel .fm-col:nth-child(9) { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    .fullmenu, .fm-panel, .fm-panel .fm-col { transition: none; }
    .fullmenu.is-open .fullmenu-close span { animation: none; }
}