/* 왼쪽 메뉴 · 큰 제목 옆 소제목(2026-10-24 사용자, 모형 mockup-nav.html) */
/* 하위 메뉴 — 마우스를 잠깐 올려 두면 아래로 스르륵. 높이는 정해진 값(--h)으로만 움직이고 메뉴 밖은 다시 계산하지 않는다 */
.rail{contain:layout paint}
.nav-sub{height:0;overflow:hidden;transition:height .38s cubic-bezier(.22,1,.36,1)}
.nav-sub>div{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px 30px;opacity:0;transform:translateY(-6px);transition:opacity .26s ease,transform .38s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.nav-grp.open .nav-sub{height:var(--h)}
.nav-grp.open .nav-sub>div{opacity:1;transform:none}
nav .nav-sub a{height:28px;font-size:12px;padding:0 11px;color:var(--secondary);font-weight:500;flex:none;background:none}
nav .nav-sub a:hover,nav .nav-sub a.active{background:none;color:var(--ink)}   /* 작은 메뉴는 바탕 없이 글자만 */
nav .nav-sub a.active{font-weight:700}
@media(prefers-reduced-motion:reduce){.nav-sub,.nav-sub>div{transition:none}}
/* 메뉴 칸 스크롤바는 안 그린다(휠 · 터치패드는 그대로). 넘칠 때 위아래 끝만 흐리게 */
nav#navigation{scrollbar-width:none;--ft:0px;--fb:0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%)}
nav#navigation::-webkit-scrollbar{display:none}
nav#navigation.fade-top{--ft:28px}nav#navigation.fade-end{--fb:28px}
/* 큰 제목 │ 소제목 — 연한 회색 세로 선, 세로 가운데 맞춤 */
.page-heading{align-items:center}
.page-subnav{display:flex;align-items:center;gap:22px;margin-left:6px;padding-left:22px;position:relative;min-width:0;overflow-x:auto;scrollbar-width:none}
.page-subnav::-webkit-scrollbar{display:none}
.page-subnav[hidden]{display:none}
.page-subnav::before{content:"";position:absolute;left:0;top:50%;width:1.5px;height:22px;margin-top:-11px;border-radius:1px;background:var(--hover)}
.page-subnav a{font-size:20px;font-weight:700;letter-spacing:-.6px;line-height:1;color:var(--muted);text-decoration:none;white-space:nowrap}
.page-subnav a:hover{color:var(--secondary)}
.page-subnav a[aria-current=page]{color:var(--ink)}
@media(max-width:760px){   /* 좁은 화면 — 소제목은 제목 아래 한 줄을 통째로 쓴다(세로 선 없이) */
 .page-head:has(.page-subnav:not([hidden])){flex-wrap:wrap;row-gap:6px}
 .page-heading{display:contents}
 .page-head #page-title{white-space:nowrap}
 .page-head #page-title{margin-right:auto}
 .page-subnav{order:9;flex-basis:100%;margin:2px 0 0;padding:0;gap:16px}
 .page-subnav::before{display:none}
 .page-subnav a{font-size:15px;letter-spacing:-.4px}
}