/* ============================================================
   KRXVIZ 공용 테마 — The Brief 톤(화이트) · 2026-08-14
   ------------------------------------------------------------
   ⚠️ 색·나브·푸터는 여기서만 고칩니다.
      페이지 인라인 <style>에 :root 나 nav 규칙을 다시 두지 마세요.
      (예전엔 24개 파일에 팔레트가 제각각 박혀 있어서 절반은 다크,
       절반은 라이트로 갈라져 있었습니다.)
   ============================================================ */

:root{
  /* 면 */
  --bg:#ffffff;
  --card:#ffffff;
  --card2:#fafaf9;
  --panel:#fafaf9;
  --chip:#f4f4f5;
  --hovbg:#f7f7f6;
  --sel:#f4f4f0;

  /* 선 */
  --border:#e7e5e4;
  --border-soft:#f1f0ef;
  --line:#e7e5e4;

  /* 글자 */
  --text:#18181b;
  --fg:#18181b;
  --sub:#52525b;
  --muted:#71717a;

  /* 등락 — 상승 빨강 / 하락 파랑 */
  --up:#e34948;
  --dn:#2a78d6;
  --down:#2a78d6;
  --flat:#a1a1aa;
  --loss:#d93a3a;

  /* 강조 */
  --accent:#2a78d6;
  --accent-soft:#eef4fb;
  --watch:#eef4fb;
  --watchfg:#2a78d6;
  --green:#1baf7a;
  --green-soft:#e9f8f2;

  /* 차트 시리즈(ECharts 공통) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
  --s6:#7c5cd6; --s7:#0e9aa7; --s8:#64748b;

  --radius:14px;
  --shadow:none;   /* Brief 톤: 카드 그림자 없음 — 구분은 헤어라인이 한다 */
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--text)}

/* ── 상단 나브 — CNBC·블룸버그식 짙은 네이비 크롬(2026-08-16, 사용자 요청) ──
   콘텐츠는 화이트, 나브만 어둡게. 나브 전용 색은 --nav-* 로만 쓴다(본문 토큰과 분리). */
:root{
  --nav-bg:rgba(7,17,38,.97);         /* #071126 — 첫 네이비(#0a1733)와 최암(#040a1a)의 중간 */
  --nav-solid:#071126;
  --nav-text:#ffffff;
  --nav-sub:#ffffff;                  /* 메뉴 글자는 완전 화이트 */
  --nav-border:rgba(255,255,255,.08);
  --nav-accent:#86b6ef;               /* 사이트 블루(#2a78d6)의 밝은 스텝 — 네이비 위에서 읽히게 */
  --nav-accent-bg:rgba(134,182,239,.16);
  --nav-hover:rgba(255,255,255,.12);
  --nav-drop:#101f42;                 /* 드롭다운은 바보다 반 스텝 밝게 */
}
nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--nav-border);height:54px;display:flex;align-items:center;
  padding:0 24px;gap:20px}
.logo{font-size:17px;font-weight:900;letter-spacing:-.5px;text-decoration:none;display:flex;align-items:center}
.logo-krx{color:var(--nav-text)}
.logo-viz{color:var(--nav-accent);-webkit-text-fill-color:currentColor;background:none}
.nav-sep{width:1px;height:16px;background:var(--nav-border);margin:0 2px;flex-shrink:0}
/* 평면 3개(홈·특징주·뉴스센터) + 그룹 4개 = 상단 7개 (2026-08-26 개편).
   ⚠️ overflow는 반드시 visible로 둘 것 — overflow-x:auto(평면 20개 시절의 가로 스크롤)를
   다시 주면 절대배치된 드롭다운이 나브 높이에서 잘려 아예 안 보인다. */
.nav-links{display:flex;gap:1px;flex-wrap:nowrap;min-width:0;overflow:visible;align-items:center}
/* 평면 링크와 그룹 버튼의 높이·기준선을 같게(2026-09-21: 드롭다운 버튼이 살짝 위로 떠 보이던 문제) */
.nav-links a{padding:5px 11px;border-radius:8px;text-decoration:none;color:var(--nav-sub);
  font-weight:500;font-size:14.2px;line-height:1.5;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center}
.nav-links a:hover{background:var(--nav-hover);color:var(--nav-text)}
.nav-links a.active{background:var(--nav-accent-bg);color:var(--nav-accent);font-weight:700}
/* 기준일 칩은 푸터로 이동(2026-08-16) — 나브 오른쪽은 비운다 */
.nav-right{display:none}
.nav-date{font-size:11.5px;font-weight:500;color:var(--nav-sub);background:var(--nav-hover);
  border:1px solid var(--nav-border);border-radius:8px;padding:4px 11px}

/* ── 푸터 ────────────────────────────────────────────────── */
footer{text-align:center;padding:20px;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.02em}
footer a{color:inherit;text-decoration:none;margin:0 6px}
footer a:hover{color:var(--text)}

/* ── 좁은 화면: 나브를 좌측 세로 바로 ─────────────────────
   1080px 이하에서 카테고리가 가로로 안 들어가 세로로 접히며 깨지던 문제 대응. */
@media(max-width:1080px){
  nav{position:fixed;left:0;top:0;bottom:0;height:100vh;width:60px;flex-direction:column;
    padding:10px 4px;gap:2px;overflow-y:auto;justify-content:flex-start;align-items:center;
    z-index:200;border-bottom:none;border-right:1px solid var(--nav-border);background:var(--nav-solid)}
  .logo{font-size:12px;flex-direction:column;align-items:center;gap:0;letter-spacing:0;margin-bottom:6px}
  .nav-sep,.nav-right{display:none}
  .nav-links{flex-direction:column;gap:2px;width:100%}
  /* 60px 사이드바에서 '배당수익률·밸류에이션·Portfolio'가 테두리를 3px 넘치던 문제(2026-08-26):
     좌우 패딩 4→2px + 미세 자간으로 글자 폭을 확보. 폰트를 줄이면 가독성이 떨어져 패딩으로 해결. */
  .nav-links a{padding:10px 2px;font-size:11px;font-weight:600;text-align:center;
    letter-spacing:-.2px;
    white-space:normal;word-break:keep-all;line-height:1.3;border-radius:9px;
    border:1px solid var(--nav-border);display:flex;align-items:center;justify-content:center;min-height:44px}
  /* 인라인 <style>이 theme.css보다 뒤에 오므로, 페이지의 `main{margin:0 auto}`를
     이기려면 `body`를 붙여 특이도를 한 단계 올려야 한다. */
  body main,body .page,body .wrap,body .container{margin-left:64px}
  /* 푸터는 본문 컨테이너 바깥 형제라 위 규칙이 안 걸려, 가운데 정렬된 글이
     60px 사이드바 아래로 들어가 왼쪽이 잘렸다(2026-08-26 발견). */
  body footer{margin-left:64px}
}

/* ── 나브 드롭다운 그룹(2026-08-16 개편: 16개 평면 → 5개 + 그룹 3개) ── */
.nav-group{position:relative}
.nav-gbtn{background:none;border:0;font-family:inherit;padding:5px 11px;border-radius:8px;margin:0;
  color:var(--nav-sub);font-weight:500;font-size:14.2px;line-height:1.5;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:4px}
.nav-gbtn::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-group:hover .nav-gbtn,.nav-gbtn:focus-visible{background:var(--nav-hover);color:var(--nav-text)}
.nav-gbtn.on{background:var(--nav-accent-bg);color:var(--nav-accent);font-weight:700}
.nav-drop{display:none;position:absolute;left:0;top:100%;padding:6px;min-width:156px;
  background:var(--nav-drop);border:1px solid var(--nav-border);border-radius:12px;z-index:300;
  box-shadow:0 10px 28px rgba(4,10,24,.45)}
.nav-drop a{display:block}
/* 열기는 데스크톱에서만 hover로 — 모바일까지 이 규칙이 살아 있으면 탭이 hover로 남아
   아코디언(.open)과 충돌한다. 미디어쿼리는 특이도를 안 올리므로 반드시 이렇게 가둔다. */
@media(min-width:1081px){
  .nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{display:block}
}

/* 회원 전용 그룹 — 메뉴엔 그대로 두고 자물쇠만 붙인다(2026-08-31 사용자 지시).
   숨기면 유료 콘텐츠가 있다는 것 자체를 알릴 수 없어, 보여주고 클릭 시 로그인으로 유도한다. */
.nav-group.locked > .nav-gbtn::before{content:'🔒';font-size:9.5px;margin-right:3px;opacity:.85}
.nav-group.locked > .nav-drop a::after{content:'🔒';font-size:9px;margin-left:5px;opacity:.7}

/* 좁은 화면 사이드바: 그룹을 아코디언으로(2026-08-26).
   이전엔 그룹을 평면으로 펼쳐 20개가 그대로 나왔다 — 모바일에서만 메뉴 축소 효과가
   전혀 없어 "안 바뀌었다"로 보였다. 이제 상단 7개만 보이고 탭하면 하위가 펼쳐진다. */
@media(max-width:1080px){
  .nav-group{display:block;width:100%}
  .nav-gbtn{display:flex;flex-direction:column;gap:1px;width:100%;padding:10px 2px;
    font-size:11px;font-weight:600;letter-spacing:-.2px;line-height:1.3;text-align:center;
    white-space:normal;word-break:keep-all;border:1px solid var(--nav-border);
    border-radius:9px;min-height:44px;justify-content:center}
  .nav-gbtn::after{width:5px;height:5px;opacity:.7;transform:rotate(45deg) translateY(-1px)}
  .nav-group.open>.nav-gbtn{background:var(--nav-hover);color:var(--nav-text)}
  .nav-group.open>.nav-gbtn::after{transform:rotate(-135deg) translateY(1px)}
  .nav-drop{display:none;position:static;border:0;padding:0;background:none;
    box-shadow:none;min-width:0}
  .nav-group.open>.nav-drop{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px}
  /* 하위 항목은 한 단계 안쪽이라는 걸 색으로 구분(60px 폭이라 들여쓰기는 못 준다) */
  .nav-drop a{background:rgba(255,255,255,.05);border-color:transparent;font-size:10.5px}
}