/* nav.css — 모든 페이지가 공유하는 상단 헤더/메뉴.
 *
 * 2026-09-23 점검(F024): 헤더·nav 스타일이 6곳(style.css, trading-common.css,
 * cron/schedule/market_report/pick_top 인라인)에 복제돼 페이지마다 다른 룩이었다 —
 * 멀티엔진은 제목 있는 큰 헤더, TOP PICK은 제목 없는 얇은 띠. 여기 한 벌만 두고
 * templates/_header.html 이 이 클래스를 쓴다. 색은 전부 tokens.css. */
.site-header {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-primary));
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* 제목 최소폭(180px)과 넉넉한 메뉴 패딩 때문에, 테마 토글이 들어오자 1400px에서도 헤더가
   두 줄로 넘쳤다(검토 5건). 폭을 내용만큼으로 줄이고 메뉴를 조인다. */
.site-header h1 { font-size: 18px; white-space: nowrap; margin: 0; color: var(--text-strong); }
.site-spacer { flex: 1; }
.site-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.site-actions .refresh-btn {
    background: var(--accent); color: var(--text-on-accent); border: none; padding: 8px 16px;
    border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.site-actions .refresh-btn:hover { background: var(--accent-hover); }
.site-clock { font-size: 18px; font-weight: bold; color: var(--accent-text); font-family: ui-monospace, monospace; white-space: nowrap; }

/* 테마 토글 — 모든 페이지 공통 (theme.js) */
.theme-toggle {
    background: var(--bg-inset); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 6px;
    width: 34px; height: 34px; font-size: 16px; line-height: 1;
    cursor: pointer; flex: 0 0 auto;
}
.theme-toggle:hover { background: var(--bg-hover); }

.nav-bar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; flex: 0 1 auto; }
.nav-bar a {
    color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 6px;
    font-size: 13px; font-weight: bold; background: var(--bg-inset); transition: all 0.2s; white-space: nowrap;
}
.nav-bar a:hover { background: var(--bg-hover); color: var(--text-strong); }
.nav-bar a.active { background: var(--accent); color: var(--text-on-accent); }

@media (max-width: 768px) {
    .site-header { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
    .site-header h1 { min-width: auto; font-size: 16px; flex: 1; }
    .site-spacer { display: none; }
    .nav-bar { order: 10; width: 100%; gap: 4px; }
    .nav-bar a { padding: 5px 10px; font-size: 11px; }
    .site-clock { font-size: 14px; }
}

/* ===== 2026-10 메뉴 개편 1단계 — 고정 브랜드 + 7묶음 메뉴 + 임시 하위 탭 줄 =====
 * 배포 순서 주의: nginx 가 static/ 을 운영 트리에서 바로 내므로 이 파일은 merge 순간 살아나고, 템플릿은
 * 재시작 뒤에 바뀐다. 그래서 아래 규칙은 새 마크업에만 있는 클래스(site-brand / site-menu / site-subnav)에만
 * 걸고, 위의 옛 선택자(.site-header h1, .nav-bar …)는 고치지 않는다 — 옛 헤더는 그 몇 초 동안 예전 그대로다.
 * 새 메뉴는 nav-bar 클래스도 같이 달고 있어 옛 CSS 만 받은 브라우저에서도 버튼 모양이 유지된다.
 * 규칙이 위 .nav-bar 규칙(미디어쿼리 포함)을 덮어야 해서 이 블록은 파일 끝에 둔다. */

/* 브랜드 — 모든 페이지에서 같은 글자라 폭이 같고, 줄어들지 않게(flex none) 해서 메뉴 시작 x 가 고정된다 */
.site-brand {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 6px; margin-right: 8px; border-radius: 6px;
    font-size: 17px; font-weight: 700; white-space: nowrap;
    color: var(--text-strong); text-decoration: none;
}
.site-brand:hover { background: var(--bg-hover); }

/* 윗줄 메뉴 — 손가락 대상 36px 이상 */
.site-header .site-menu { gap: 4px; }
.site-header .site-menu a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
    font-size: 14px;
}
.site-header .site-menu a.site-menu-auth { font-size: 13px; }
/* 내 정보(/me) — 이름 링크와 로그아웃이 나뉘었다(docs/my-page-design.md §4). /me 에선 이름 링크가 현재 위치(윗줄 메뉴엔 없는 화면).
   로그아웃은 한 단계 옅게 — 이름과 같은 무게면 두 버튼이 하나로 읽힌다 */
.site-header .site-menu a.site-menu-me[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.site-header .site-menu a.site-menu-logout { font-weight: 600; color: var(--text-muted); }
.site-header .site-menu a.site-menu-logout:hover { color: var(--text-strong); }
.site-menu ~ .site-actions .theme-toggle { width: 36px; height: 36px; }
/* 💬 물어보기 칩(docs/ask-everywhere-design.md §3) — 테마 토글 옆(.site-actions), 🏆 추천 종목 버튼과 같은 모양 + 강조색 글자.
   메뉴 줄에 두면 폭 390~430px 비로그인 메뉴가 한 줄 → 두 줄(💬 만 남겨도 390px 는 두 줄)이라 오른쪽 버튼 묶음으로 옮겼다 */
.site-actions .site-ask {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box;
    background: var(--bg-inset); color: var(--accent-text);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
}
.site-actions .site-ask:hover { background: var(--accent-soft); }
/* 매매 화면은 머리글 오른쪽(시계·새로고침)이 넓어 칩 글자까지 넣으면 1400px 에서도 머리글이 두 줄 — 💬 만 */
.site-header:has(.site-clock) .site-ask-label { display: none; }
/* 재검토 R1 — 태블릿·좁은 데스크톱(769~1199px)에서도 칩 글자가 있으면 sticky 머리글이 한두 줄 늘어난다 → 💬·🏆 글자 숨김, 36px */
@media (max-width: 1199px) {
    .site-ask-label, .site-menu ~ .site-actions .pick-drawer-label { display: none; }
    .site-actions .site-ask { padding: 0; width: 36px; }
}
/* 태블릿(769~1199px) — 💬 36px 가 더해지면 820px 비로그인 메뉴 7칸이 한 줄에 안 들어 머리글·메뉴 간격을 조인다(새 마크업에만) */
@media (min-width: 769px) and (max-width: 1199px) {
    .site-header:has(.site-menu) { padding: 12px 14px; }
    .site-brand { margin-right: 4px; }
    .site-header .site-menu { gap: 3px; }
    .site-header .site-menu a { padding: 0 8px; font-size: 13px; }
    .site-header .site-menu a.site-menu-auth { font-size: 12px; }
    .site-menu ~ .site-actions { gap: 8px; }
}
@media (max-width: 768px) {
    .site-ask-label { display: none; }
    .site-actions .site-ask { padding: 0; width: 36px; }
    /* 매매 화면(관리자)은 시계·새로고침·🏆·테마 토글로 버튼 묶음이 이미 꽉 차 414·430px 에서 💬 이 한 줄을 더 만든다 — 폰에선 뺀다 */
    .site-header:has(.site-clock) .site-ask { display: none; }
}

/* 하위 탭 줄 — 헤더 아래 얇은 띠. 넘치면 줄 안에서만 가로로 밀린다(페이지 가로 스크롤 없음) */
.site-subnav {
    display: flex; gap: 4px; align-items: center;
    padding: 4px 20px; overflow-x: auto; scrollbar-width: thin;
    background: var(--bg-secondary); border-bottom: 1px solid var(--border);
}
.site-subnav a {
    flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
    border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--text-secondary); text-decoration: none;
}
.site-subnav a:hover { background: var(--bg-hover); color: var(--text-strong); }
.site-subnav a.active { background: var(--accent-soft); color: var(--accent-text); }

@media (max-width: 768px) {
    /* 옛 h1 의 flex:1 역할 — 브랜드 왼쪽, 버튼들 오른쪽, 메뉴는 다음 줄 전체 폭 */
    .site-brand { margin-right: auto; font-size: 16px; }
    /* 390px 에서 비로그인 6칸(로그인 포함)이 한 줄에 들어가는 패딩 — 넘치면 줄바꿈(가로 스크롤 없음) */
    .site-header .site-menu a { padding: 0 8px; font-size: 13px; }
    .site-header .site-menu a.site-menu-auth { font-size: 12px; }
    .site-subnav { padding: 4px 12px; }
}
@media (max-width: 480px) {
    .site-brand-long { display: none; }   /* '🪓 삽봇' 만 */
}