/* ============================================================================
   악보바다 — 머리 밑 대분류 줄 (전역)

   리디자인 화면에만 있던 갈래 줄(밴드 · 피아노 · … · MR)을 모든 화면에 세운다.
   화면 216 곳을 고치는 대신, 모두가 머리 안에 끼우는 headerLogo.jsp 한 곳에서
   내보내고 자리는 여기서 잡는다.

   <b>머리는 어디서나 붙박이다.</b> 레거시는 머리를 흐름 밖(position:absolute · 높이 48)에
   띄워 두고 본문 판을 top:92px 로 그 밑에 못박아, 판만 안에서 따로 구른다.
   리디자인 화면은 머리를 흐름 안에 두어 함께 굴러 올라갔던 탓에 화면을 옮길 때마다
   머리가 붙었다 떨어졌다 했다 - 그쪽 머리를 sticky 로 올려 붙박이로 맞췄다
   (화면마다 제 .header 규칙 안에서 잡는다. 그 규칙이 여기보다 뒤에 실려 여기서 잡으면
   덮인다). 본문 판은 common.css 에서 48 → 92 로 밀어 두었다(줄 높이 44 = 칸 43 + 밑줄 1).

   줄은 머리의 자식으로 두고 top:100% 로 내려 붙인다. 레거시는 머리가 흐름 밖이라
   그것으로 끝이지만, 머리가 흐름 안에 있는 화면(간편 셋)은 줄이 자리를 먹지 않아
   본문이 그 밑으로 파고든다 - 자리는 머리가 border 로 낸다(rd-hasgnb, 아래를 보라).

   리디자인 화면 열셋은 이 줄을 받지 않는다. 그쪽은 머리 <b>다음 형제</b>로 제 줄을
   세운다(headerLogo 가 rdOwnGnb 를 보고 비켜 준다). 머리에 줄이 없으니 rd-hasgnb 도
   붙지 않아 자리도 나지 않는다 - 저절로 맞는다.

   값은 리디자인 화면에 있던 것을 그대로 옮겼다 - 두 화면이 같은 줄로 보여야 한다.
   토큰(var(--c-...))을 쓰므로 rd-tokens.css 가 먼저 실려야 한다.
   ============================================================================ */

/* 자리 규칙은 <b>머리의 자식일 때만</b> 건다.
   리디자인 화면은 제 줄을 머리 <b>다음 형제</b>로 세우는데, 거기까지 이 규칙이 걸리면
   흐름 안에 있어야 할 그 줄이 절대배치로 떠서 본문을 덮는다.
   자식 선택자로 좁혀 두면 그쪽은 제 자리 규칙만 쓴다 - 형제로 선 줄은 바로 아래에서
   따로 잡는다. */
.header > .rd-gnb {
    position: absolute;
    /* 머리가 물고 있는 좌우 13px(padding)을 빼지 <b>않는다</b>.
       절대배치의 기준칸은 두르는 부모의 <b>padding box</b> 라 left:0 이 이미
       화면 왼쪽 끝이다. 한때 그만큼 더 벌려(-13px) 두었더니 줄이 좌우로 26px
       넓어져 오른쪽으로 13px 삐져나갔고, 모든 화면에 가로스크롤이 생겼다.
       아래 길잡이(.bottom_navi)가 옆으로 밀려 보이던 것도 그 13px 때문이다 -
       position:fixed 라 옆으로 밀린 문서와 어긋난다. */
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
}

/* 머리 <b>다음 형제</b>로 선 줄(rdOwnGnb 아홉 곳)은 머리를 따라 붙박인다.
   머리가 sticky 로 맨 위에 멈추는데 줄만 굴러 올라가면 줄이 머리 뒤로 사라진다.
   머리 높이(48)만큼 내려 붙여 두 줄이 한 덩어리로 멈추게 한다.
   화면마다 있는 .rd-gnb 규칙(0,1,0)보다 이쪽(0,2,0)이 세므로 여기서 한 번에 잡는다.
   바로 다음 형제(+)가 아니라 뒤따르는 형제(~)로 잡는다 - 그 화면들은 머리와 줄 사이에
   줄 전용 <style> 을 한 덩이 끼워 두어서, + 로는 걸리지 않는다.
   레거시는 줄이 머리의 <b>자식</b>이라 이 규칙에 걸리지 않는다 - 저절로 갈린다.

   <b>곡 상세(detail_akbo)만 예외다.</b> 그 화면은 머리와 줄이 굴러 올라가고 그 자리를
   곡 정보가 이어받는다 - 머리를 붙박아 두면 곡 정보가 첫 픽셀부터 못박혀 뒤따르는
   분류 칩이 그 밑으로 빨려 들어가 반쯤 잘려 보인다. 그 화면이 제 <style> 에서
   같은 선택자로 되돌린다(본문 안이라 여기보다 뒤에 실린다) */
.header ~ .rd-gnb {
    position: sticky;
    top: 48px;
    z-index: 69;
}

/* 줄이 <b>머리 안에 실제로 들어 있을 때만</b> 그 높이(칸 43 + 밑줄 1)만큼 자리를 낸다.
   줄은 절대배치라 흐름에서 자리를 먹지 않아, 자리를 내지 않으면 본문이 줄 밑으로 파고든다.

   왜 표(class)로 가리는가 - 줄을 받지 않는 화면(rdOwnGnb 열셋)에 자리만 나면 빈 칸
   44px 이 생긴다. 'CSS 로 자식을 보고 부모를 고르는' :has() 는 오래된 웹뷰가 모른다.
   그래서 :has() 를 아는 쪽은 CSS 로, 모르는 쪽은 headerLogo 가 줄을 내보내며 붙여 주는
   rd-hasgnb 로 잡는다. <b>두 규칙을 한 줄에 묶으면 안 된다</b> - :has() 를 모르는
   브라우저는 그 선택자가 낀 규칙을 통째로 버려서 표 쪽까지 함께 죽는다.

   <b>border 로 낸다</b> - padding 도 margin 도 안 된다.
     padding : 절대배치의 기준칸이 padding box 라, 늘리면 줄의 top:100% 가 그만큼
               더 내려가고 가운데 못박아 둔 로고(top:50%)까지 함께 내려간다.
     margin  : 다음 형제의 margin-top 과 상쇄되어(간편 홈은 8px) 그 여백을 삼킨다.
   border 는 기준칸 밖이고 상쇄도 없어 둘 다 피한다. 줄이 그 칸을 꼭 맞게 덮는다.

   <b>box-sizing 도 되돌려 두어야 한다.</b> 간편 화면 셋은 제 본문에 .eh * / .ed * / .ep *
   로 border-box 를 깔아 두는데, 머리가 그 감싸개(body) 안에 있어 함께 걸린다. 그대로
   두면 height:48px 안으로 border 44 가 들어가 내용칸이 4px 로 쪼그라든다 - 머리의 세
   아이가 가운데 맞춤에 밀려 위로 삐져나가 잘리고(로고 top:-17), 줄도 4 에서 시작해
   머리 행을 덮는다. content-box 면 48 은 행 높이 그대로고 border 44 가 그 아래로 붙는다. */
.header.rd-hasgnb {
    box-sizing: content-box;
    border-bottom: 44px solid #fff;
}
.header:has(> .rd-gnb) {
    box-sizing: content-box;
    border-bottom: 44px solid #fff;
}

/* 생김새는 둘 다 같다 */
.rd-gnb {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
}
.rd-gnb * { box-sizing: border-box; }

/* 여덟 칸이 한 화면에 다 들어가도록 사이를 좁혔다(390 기준 약 362px, 가운데 모음).
   그래도 넘치는 기기·글꼴이 있으면 잘리지 않고 밀리도록 스크롤은 남겨 둔다 -
   막대는 감춘다(손가락으로 미는 화면이라 자리만 먹는다) */
.rd-gnb-in {
    display: flex; align-items: stretch; justify-content: center;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; padding: 0 2px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.rd-gnb-in::-webkit-scrollbar { display: none; }

/* 칸은 제 글자만큼만 차지하고 줄 전체를 가운데로 모은다.
   늘려서 폭을 채우면 남는 자리가 칸 사이로 벌어져 되레 성겨 보인다.
   줄지는 않게 둔다(줄어들게 두면 넘칠 때 밀리는 대신 글자가 잘린다) */
.rd-gnb-i {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    justify-content: center; height: 43px; padding: 0 7px;
    border-bottom: 2px solid transparent;
    font-size: 13.5px; font-weight: 700; color: var(--c-text-sub); white-space: nowrap;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.rd-gnb-i:active { background: var(--c-fill); }
.rd-gnb-i.on { color: var(--c-brand); border-bottom-color: var(--c-brand); font-weight: 800; }

/* 넘칠 때만 나오는 가장자리 흐림. 사이를 좁혀 두었으니 평소에는 뜨지 않는다 -
   기기·글꼴 때문에 넘치는 경우에만 '더 있다' 를 알린다.
   밑줄은 가리지 않게 테두리 위까지만 덮는다 */
.rd-gnb:before,
.rd-gnb:after {
    content: ""; position: absolute; top: 0; bottom: 1px; width: 36px; z-index: 2;
    pointer-events: none; opacity: 0; transition: opacity var(--t-base);
}
.rd-gnb:before { left: 0;  background: linear-gradient(to right, #fff 18%, rgba(255,255,255,0)); }
.rd-gnb:after  { right: 0; background: linear-gradient(to left,  #fff 18%, rgba(255,255,255,0)); }
.rd-gnb.has-l:before { opacity: 1; }
.rd-gnb.has-r:after  { opacity: 1; }

/* ---------- 메뉴 화면의 닫기(X) ----------
   headerLogo.jsp 가 메뉴 화면(m.menu.html)에서만 ≡ 대신 내보내는 단추다.
   그 화면 밖에는 이 표(class)가 아예 없으므로 다른 화면에 닿지 않는다.

   자리는 ≡ 가 서 있던 그대로 둔다 - 아이콘도 같은 24px 이라 메뉴를 여닫는 동안
   왼쪽 첫 칸이 흔들리지 않는다. 대신 손가락 자리만 44px 로 넓힌다.
   padding 으로 키우지 <b>않는다</b> - 머리가 space-between 으로 벌어져 있어 상자를
   키우면 옆 칸이 밀린다. 투명한 ::after 는 흐름 밖이라 배치를 건드리지 않는다
   (머리 높이 48 안에 44 가 들어가므로 위아래로도 넘치지 않는다). */
.rd-menuclose {
    position: relative; display: block;
    -webkit-tap-highlight-color: transparent;
}
.rd-menuclose:after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
}