/* ========================================
   [2026-04-29] songs-nav — config.headerNav 옵트인 공통 헤더 nav 전용 CSS
   chatbot-style.css 와 별도로 분리한 이유:
     chatbot-style.css 는 chatbot-main.html 전용으로 작성된 파일 (body { display:flex; padding:20px }
     룰이 들어있어 quiz-list.html/board.html/memo.html/mistakes.html 등에 link 하면
     해당 페이지들의 자체 layout 을 깨뜨림). 그래서 .songs-* 룰만 따로 분리.
   chatbot-main.html 에는 chatbot-style.css 와 함께 이 파일도 link.
   다른 챗봇 서브 페이지들은 이 파일만 link (body 룰 영향 없음).
   sports 의 .header / .header-nav 패턴 이식 (clients/sports/css/common.css:39-78).
   기본 hidden, songs-header.js 가 config.headerNav 있을 때만 활성화.
   ======================================== */
/* songs-header 가 활성화된 페이지의 body padding 보정 — body 에 padding 이 있으면
   sticky 헤더가 좁아 보이므로 가장자리까지 채우도록 padding 0 강제. .container 등은 자체 max-width 로 가운데 정렬 유지.
   또한 일부 페이지(예: quiz-list.html, board.html) 는 body 가 display:flex 인데 flex-direction 미명시 → 기본 row 라 자식들이 가로 정렬됨.
   songs-header 가 들어가면 세로 레이아웃이어야 하므로 column 강제. */
body.songs-header-active {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    flex-direction: column !important;
    /* chatbot-main.html 의 body 는 display:flex + justify-content:center + align-items:center 라서
       chat-container 가 세로 가운데 정렬되어 .songs-header 가 y=30 정도부터 시작.
       다른 페이지(quiz-list/board/memo/...) 는 .songs-header 가 y=0 에서 시작.
       위치 통일을 위해 메인 페이지에서도 위 정렬 + 가로 100% stretch. */
    justify-content: flex-start !important;
    align-items: stretch !important;
}
/* chatbot-main.html 의 chat-container 가 화면을 가득 채우도록 (다른 페이지의 .songs-header y=0 와 동일하게).
   active 클래스 안 붙은 다른 클라이언트는 기존 90vh 가운데 정렬 그대로 유지. */
body.songs-header-active .chat-container {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
}
.songs-header {
    /* 모든 페이지에서 동일한 톤의 헤더가 되도록 고정 그라데이션 사용.
       클라이언트별 var(--color-left/...) 변수를 따르면 chatbot-style.css 가 link 된 메인 페이지(회색)와
       link 안 된 다른 페이지(fallback 남색)의 색이 달라 보이는 회귀 발생 → 고정값으로 통일. */
    background: linear-gradient(135deg, #1B2A4A 0%, #2B6CB0 50%, #1B2A4A 100%);
    color: #fff;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
    /* board.html, mistakes.html 등 일부 페이지가 body 를 flex container 로 만들어
       자식 폭이 컨텐츠 만큼만 되는 케이스 보정 — 항상 가로 폭 100% 점유 */
    width: 100%;
    box-sizing: border-box;
}
/* 메인 챗 페이지(chatbot-main.html) 의 기존 .chat-header 는 active 시 숨김.
   안에 있던 우측 버튼들(로그인/회원가입/주의사항/테마/오류신고)은 chatbot-config.js 가
   .songs-header 안으로 이동시킴 → 한 줄짜리 통합 배너. */
body.songs-header-active .chat-header {
    display: none !important;
}
/* .songs-header 안의 우측 버튼 영역 — chat-header 에서 옮겨온 #headerButtons + 오류신고 버튼 */
.songs-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}
.songs-header[hidden] { display: none !important; }
.songs-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.songs-nav::-webkit-scrollbar { display: none; }
.songs-nav[hidden] { display: none !important; }
.songs-nav-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
}
.songs-nav-btn:hover { background: rgba(255,255,255,0.25); }
.songs-nav-btn.active {
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.5);
    font-weight: 600;
}
.songs-nav-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* [2026-04-29] 모든 페이지가 .songs-header 를 최상단 별도 영역에 두기로 통일.
   chatbot-main.html 도 chat-container 안 첫 자식으로 .songs-header 배치. */
@media (max-width: 480px) {
    .songs-header { padding: 0 14px; height: auto; min-height: 52px; }
    .songs-nav-btn { padding: 6px 12px; font-size: 13px; }
}