/* ── 테마 (라이트 2종 · 다크 2종) ───────────────────────────────
   data-theme 속성으로 전환 (base.html 인라인 스크립트 + app.js setTheme()).
   기본(:root) = 라이트.

   ★ 색을 바꿀 땐 눈대중 말고 대비비를 계산해서 확인할 것. 네 테마 전부에서
     "어떤 글자색이 어떤 배경 위에 오는가" 를 검사하는 스크립트가 있고, 그 결과를
     tests/test_theme_contrast.py 가 회귀로 고정한다(WCAG AA 4.5:1 기준).

   토큰 의미 (헷갈리면 여기부터 읽을 것):
     --bg / --card      배경 두 단계. 카드가 배경 위에 떠 보여야 한다.
     --text / --muted   본문 / 보조 글자. 둘 다 --bg·--card 위에서 읽혀야 한다.
     --brand            **채워진** 강조 배경(기본 버튼·활성 탭·말풍선).
     --on-brand         그 --brand 배경 **위**에 얹는 글자색.
     --brand-fg         --bg/--card 배경 위에 놓는 강조 '글자색'. --brand 위에 쓰면 안 된다.
     --callout-*-fg     같은 이름의 --callout-*-bg 위에 얹는 글자색(쌍으로만 쓴다).
     --cc-*             채팅창 전용 팔레트. 채팅창은 본문 위에 겹쳐 뜨는 **다른 블록**이라
                        본문 토큰을 그대로 쓰면 경계가 안 보인다. surface(바탕) < bar(띠) <
                        bubble(말풍선) 순으로 단을 두고, accent 는 도킹 모서리의 강조 한 줄.
*/
:root {
  color-scheme: light;
  --brand: #2563eb;
  --brand-fg: #1d4ed8;          /* --bg/--card 위에 놓는 강조 '글자색'. --brand 배경 위에 쓰면 안 됨 */
  --on-brand: #ffffff;          /* --brand 배경(버튼·활성탭·말풍선) 위에 놓는 글자색 */
  --bg: #eef2f7;
  --card: #ffffff;
  --line: #d5dde8;
  --text: #0f172a;
  --muted: #4f5d70;
  --pos: #d11f1f;
  --neg: #1d63d1;
  --ok: #047857;
  --warn: #a15c07;
  --input-bg: #ffffff;
  --input-border: #b9c5d6;
  /* 채팅창 팔레트 — 나이키 "University Blue"(AJ1): 흰 어퍼 / 차가운 회청 미드솔 / 로열블루 스우시.
     본문(--bg #eef2f7)과 채팅창이 거의 같은 색이라 어디가 어디인지 헷갈린다는 지적을 받고,
     채팅창을 한 단계 더 눌러 **다른 블록**으로 만들었다(대비 1.27). */
  --cc-surface: #cfd9e9;         /* 채팅창 바탕 — 본문보다 확실히 진하게 */
  --cc-bar: #e2e9f3;             /* 제목·입력 띠 — 바탕보다 한 단계 밝게(떠 보이게) */
  --cc-bubble: #ffffff;          /* 클로드 말풍선 — 채팅 바탕 위에서 떠야 한다 */
  --cc-line: #b9c8de;            /* 채팅창 안쪽 경계선 */
  --cc-accent: #2563eb;          /* 스우시 한 줄 — 도킹된 모서리의 강조 띠 */
  --overlay: rgba(15, 23, 42, .62);
  --shadow: 0 8px 24px rgba(15, 23, 42, .12);
  --callout-danger-bg: #fdeeee; --callout-danger-fg: #a01515; --callout-danger-line: #f6bcbc;
  --callout-warn-bg: #fdf6e3; --callout-warn-fg: #8a5206; --callout-warn-line: #f2dda0;
  --callout-ok-bg: #eaf8f0; --callout-ok-fg: #0f6b42; --callout-ok-line: #b3e3ca;
  --callout-info-bg: #eaf1fe; --callout-info-fg: #1a45a8; --callout-info-line: #b9d0f9;
  --callout-purple-bg: #f5eefe; --callout-purple-fg: #6321a3; --callout-purple-line: #ddc6f6;
  --callout-neutral-bg: #f5f8fc; --callout-neutral-line: #d5dde8;
  /* 데이터 색 — 차트 이평선·요일. 배경이 반전되면 같은 색이 안 보이므로 테마마다 따로 잡는다.
     범례의 ━ 와 캔버스에 그리는 선이 **같은 토큰**을 읽어야 짝이 어긋나지 않는다. */
  --ma5: #d1246f; --ma20: #b45309; --ma60: #047857; --ma120: #4f46e5;
  --sat: #2563eb; --sun: #d11f1f;
  --chart-up: #e11d48; --chart-down: #2563eb; --chart-live: #0369a1;
  --chart-buy: #15803d; --chart-stop: #dc2626; --chart-guide: #64748b;
  --flash-up: #fde0e0; --flash-down: #dde8fb;   /* 값 변동 깜빡임 */
  --focus: #2563eb;                              /* 키보드 포커스 링 */
}

:root[data-theme="light-warm"] {
  color-scheme: light;
  --brand: #c2410c;
  --brand-fg: #9a3412;
  --on-brand: #ffffff;
  --bg: #fbf3e6;
  --card: #fffcf6;
  --line: #e4d4b8;
  --text: #2b2114;
  --muted: #66573b;
  --pos: #c62222;
  --neg: #1d63d1;
  --ok: #0f6b42;
  --warn: #8a5206;
  --input-bg: #fffcf6;
  --input-border: #d9c49f;
  /* 채팅창 팔레트 — 나이키 "Sail / Infrared"(AM90): 크림 어퍼 / 세일 미드솔 / 인프라레드 스우시 */
  --cc-surface: #e6d5b5;
  --cc-bar: #f4e9d5;
  --cc-bubble: #fffcf6;
  --cc-line: #d3bd94;
  --cc-accent: #c2410c;
  --overlay: rgba(41, 32, 18, .62);
  --shadow: 0 8px 24px rgba(59, 47, 30, .14);
  --callout-danger-bg: #fceeea; --callout-danger-fg: #a01515; --callout-danger-line: #f0c3b6;
  --callout-warn-bg: #fbf2dc; --callout-warn-fg: #7d4a05; --callout-warn-line: #ecd69b;
  --callout-ok-bg: #ecf6ec; --callout-ok-fg: #0f6b42; --callout-ok-line: #bfe0c4;
  --callout-info-bg: #ecf1fb; --callout-info-fg: #1a45a8; --callout-info-line: #c2d3f0;
  --callout-purple-bg: #f4eefa; --callout-purple-fg: #6321a3; --callout-purple-line: #dcc7ee;
  --callout-neutral-bg: #f8f0e0; --callout-neutral-line: #e4d4b8;
  /* 데이터 색 — 차트 이평선·요일. 배경이 반전되면 같은 색이 안 보이므로 테마마다 따로 잡는다.
     범례의 ━ 와 캔버스에 그리는 선이 **같은 토큰**을 읽어야 짝이 어긋나지 않는다. */
  --ma5: #d1246f; --ma20: #b45309; --ma60: #047857; --ma120: #4f46e5;
  --sat: #2563eb; --sun: #d11f1f;
  --chart-up: #e11d48; --chart-down: #2563eb; --chart-live: #0369a1;
  --chart-buy: #15803d; --chart-stop: #dc2626; --chart-guide: #64748b;
  --flash-up: #fbe2d8; --flash-down: #e2e8f8;
  --focus: #c2410c;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #4f8dfb;
  --brand-fg: #93bcff;
  --on-brand: #05122a;          /* 밝은 파랑 위엔 흰색이 대비 부족 → 진한 남색-검정 */
  --bg: #0c1320;
  --card: #172132;
  --line: #33435c;
  --text: #e8eef7;
  --muted: #a3b2c7;
  --pos: #ff7b7b;
  --neg: #6aa6ff;
  --ok: #3ddc9a;
  --warn: #fbc02d;
  --input-bg: #131e2f;
  --input-border: #3b4d69;
  /* 채팅창 팔레트 — 나이키 "Obsidian"(AM95): 먹남색 바탕 위로 들린 인디고 패널 + 파란 스우시.
     어두운 테마에서는 **더 밝은 쪽**이 앞으로 나온다 — 그래서 채팅창을 본문보다 들어 올렸다. */
  --cc-surface: #243553;
  --cc-bar: #2c405f;
  --cc-bubble: #111b2c;
  --cc-line: #3a5075;
  --cc-accent: #4f8dfb;
  --overlay: rgba(0, 0, 0, .74);
  --shadow: 0 8px 28px rgba(0, 0, 0, .5);
  --callout-danger-bg: #3b1414; --callout-danger-fg: #ffa9a9; --callout-danger-line: #8a2222;
  --callout-warn-bg: #382907; --callout-warn-fg: #ffd76a; --callout-warn-line: #7d5510;
  --callout-ok-bg: #0b2a1e; --callout-ok-fg: #74e8b6; --callout-ok-line: #17593c;
  --callout-info-bg: #0e2448; --callout-info-fg: #a3c8ff; --callout-info-line: #22437e;
  --callout-purple-bg: #291846; --callout-purple-fg: #dcb9fd; --callout-purple-line: #50249a;
  --callout-neutral-bg: #18222f; --callout-neutral-line: #33435c;
  /* 데이터 색 — 차트 이평선·요일. 배경이 반전되면 같은 색이 안 보이므로 테마마다 따로 잡는다.
     범례의 ━ 와 캔버스에 그리는 선이 **같은 토큰**을 읽어야 짝이 어긋나지 않는다. */
  --ma5: #f472b6; --ma20: #f59e0b; --ma60: #10b981; --ma120: #818cf8;
  --sat: #60a5fa; --sun: #f87171;
  --chart-up: #f87171; --chart-down: #60a5fa; --chart-live: #38bdf8;
  --chart-buy: #4ade80; --chart-stop: #f87171; --chart-guide: #94a3b8;
  --flash-up: #45201f; --flash-down: #1b2c4d;
  --focus: #79aaff;
}

:root[data-theme="dark-black"] {
  color-scheme: dark;
  --brand: #16c47f;
  --brand-fg: #5fe0a9;
  --on-brand: #04150e;          /* 밝은 초록 위엔 흰색이 대비 부족 → 진한 녹-검정 */
  --bg: #000000;
  --card: #0f1113;
  --line: #2b2f35;
  --text: #eceff3;
  --muted: #98a1ad;
  --pos: #ff7b7b;
  --neg: #6aa6ff;
  --ok: #22d38c;
  --warn: #fbc02d;
  --input-bg: #15181c;
  --input-border: #32373e;
  /* 채팅창 팔레트 — 나이키 "Panda + Volt"(Dunk): 완전한 검정 바탕 / 차콜 패널 / 형광 초록 스우시 */
  --cc-surface: #22272f;
  --cc-bar: #2b313a;
  --cc-bubble: #0d0f12;
  --cc-line: #363d47;
  --cc-accent: #16c47f;
  --overlay: rgba(0, 0, 0, .82);
  --shadow: 0 8px 28px rgba(0, 0, 0, .6);
  --callout-danger-bg: #2c0f0f; --callout-danger-fg: #ffa9a9; --callout-danger-line: #6b1c1c;
  --callout-warn-bg: #2b2207; --callout-warn-fg: #ffd76a; --callout-warn-line: #6b4a10;
  --callout-ok-bg: #08211a; --callout-ok-fg: #74e8b6; --callout-ok-line: #14563a;
  --callout-info-bg: #0a1c31; --callout-info-fg: #a3c8ff; --callout-info-line: #1c3a63;
  --callout-purple-bg: #1e1330; --callout-purple-fg: #dcb9fd; --callout-purple-line: #43207a;
  --callout-neutral-bg: #141619; --callout-neutral-line: #2b2f35;
  /* 데이터 색 — 차트 이평선·요일. 배경이 반전되면 같은 색이 안 보이므로 테마마다 따로 잡는다.
     범례의 ━ 와 캔버스에 그리는 선이 **같은 토큰**을 읽어야 짝이 어긋나지 않는다. */
  --ma5: #f472b6; --ma20: #f59e0b; --ma60: #10b981; --ma120: #818cf8;
  --sat: #60a5fa; --sun: #f87171;
  --chart-up: #f87171; --chart-down: #60a5fa; --chart-live: #38bdf8;
  --chart-buy: #4ade80; --chart-stop: #f87171; --chart-guide: #94a3b8;
  --flash-up: #331615; --flash-down: #12203a;
  --focus: #35d99a;
}

[x-cloak] { display: none !important; }
/* hidden 속성은 display 선언에 진다 — display:flex 를 준 요소에 hidden 을 걸어도
   그대로 보인다. 실제로 캘린더 상세 상자와 채팅 '중지' 버튼이 이것 때문에 계속 떠 있었다.
   숨김은 예외 없이 이기게 한다. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }

/* 어떤 요소도 문서를 화면보다 넓힐 수 없게 한다.
   가로로 넘치면 레이아웃 뷰포트가 그만큼 커지고, 그러면 미디어쿼리가 "넓은 화면" 으로
   오판해 모바일 규칙이 통째로 안 걸린다(실측: 375px 폰에서 표가 넘치자 뷰포트가 523 으로
   보고돼 본문이 72px 까지 줄고 글자가 한 자씩 세로로 깨졌다).
   clip 을 쓰는 이유 — hidden 은 스크롤 컨테이너를 만들어 상단바의 position:sticky 를 깬다.
   넘치는 표는 각자 카드 안에서 가로로 스크롤한다(아래 '표' 절). */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

/* 정식 Claude 로고 아이콘 — 🤖 이모지 대체 */
.claude-ico {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  color: #d97757; flex-shrink: 0;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", -apple-system, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  zoom: var(--ss-zoom, 1);   /* 계정 메뉴의 글꼴 크기(80~130%) */
}
a { color: var(--brand-fg); text-decoration: none; }
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 16px; }
.page-disclaimer {
  max-width: 1248px; margin: 0 auto; padding: 14px 16px 28px;
  font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center;
}
.mock-banner {  /* 아침 카톡/리포트 등 일부 경로에서 아직 참조 — 유지 */
  background: var(--callout-warn-bg); color: var(--callout-warn-fg);
  font-size: 12px; text-align: center; padding: 6px 12px;
}
.mock-banner a { color: inherit; text-decoration: underline; }

/* ── 상단바 우측: 전체화면 · 알림(벨) · 계정 ───────────────────── */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topbar-icon-btn, .notif-btn {
  position: relative; width: 36px; height: 36px; flex: 0 0 36px; border: 0; background: none; cursor: pointer;
  color: var(--text); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
}
.topbar-icon-btn:hover, .notif-btn:hover { background: var(--bg); }
.topbar-icon-btn svg, .notif-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.notif-menu { position: relative; }
.notif-dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--chart-stop); border: 2px solid var(--card);
}
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 320px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px; z-index: 60;
}
@media (max-width: 520px) {
  .notif-dropdown { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; }
}
.notif-item { font-size: 12px; line-height: 1.55; padding: 9px 8px; border-radius: 9px; }
.notif-item + .notif-item { margin-top: 4px; }
.notif-item.warn { background: var(--callout-warn-bg); color: var(--callout-warn-fg); }
.notif-item.info { color: var(--muted); }
.notif-actions { margin-top: 5px; display: flex; gap: 12px; }
.notif-actions a, .notif-actions .linklike {
  color: inherit; text-decoration: underline; font-size: 12px; background: none; border: 0;
  cursor: pointer; padding: 0;
}

.topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.topbar .wrap { display: flex; align-items: center; gap: 18px; padding-top: 10px; padding-bottom: 10px;
  min-width: 0; }
/* 메뉴가 길어지면 브랜드가 폭 0 까지 밀려 **오류 없이 사라졌다**(플렉스 축소).
   로고는 "지금 어느 앱인가" 라 늘 보여야 하므로 줄지 않게 못 박고, 대신 메뉴가
   줄어들도록 둔다. 오른쪽 아이콘(알림·계정)도 계속 닿을 수 있다. */
/* Pensieve 로고(templates/_brand_logo.html) — 테마에 맞춰 한 장만: 밝은 테마 = 검은 글씨, 어두운 테마 = 흰 글씨 */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo img { display: block; height: 26px; width: auto; }
.brand-logo .logo-w { display: none; }
html[data-theme^="dark"] .brand-logo .logo-b { display: none; }
html[data-theme^="dark"] .brand-logo .logo-w { display: block; }
.brand-logo-lg { display: flex; justify-content: center; margin: 0 0 18px; }
.brand-logo-lg img { height: 44px; }
@media (max-width: 640px) {
  .brand-logo img { height: 22px; }
  .brand-logo-lg img { height: 38px; }
}
.brand { font-weight: 700; color: var(--brand-fg); font-size: 17px; white-space: nowrap;
  flex-shrink: 0; }
.env-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.env-badge.env-mock { background: var(--callout-warn-bg); color: var(--callout-warn-fg); border: 1px solid var(--callout-warn-line); }
.env-badge.env-real { background: var(--callout-ok-bg); color: var(--callout-ok-fg); border: 1px solid var(--callout-ok-line); }
/* 자동매매 — 앱이 스스로 주문을 내는 상태라 실전/모의보다 강하게 눈에 띄어야 한다.
   멈춰 둔 동안에도 뱃지는 남긴다(사라지면 "껐나?" 를 다시 확인하러 가게 된다). */
.env-badge.env-auto { background: var(--callout-purple-bg); color: var(--callout-purple-fg); border: 1px solid var(--callout-purple-line); }
.env-badge.env-auto-off { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
/* 계정 팝업의 '자동매매 끄기' — 급할 때 손이 먼저 닿아야 하므로 눌러야 할 것처럼 보인다.
   끄는 건 위험하지 않으니 확인창 없이 한 번에 꺼진다(되켜는 쪽에만 마찰을 둔다). */
.at-off-btn { width: 100%; border: 1px solid var(--neg); background: transparent;
  color: var(--neg); font: inherit; font-size: 12.5px; font-weight: 700;
  border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.at-off-btn:hover { background: var(--neg); color: var(--on-brand); }
/* overflow 를 주면 안 된다. visible 이 아닌 순간 하위 메뉴(position:absolute)가
   이 상자에 잘려 화면에서 사라진다 — 실제로 그래서 2차 메뉴가 안 나왔다.
   묶고 나서 최상위가 여섯 개뿐이라 넘칠 일도 없고, 정말 좁아지면 min-width:0 으로
   메뉴가 줄다가 900px 아래에서 햄버거로 바뀐다. */
nav.nav-desktop { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
nav a { padding: 6px 12px; border-radius: 6px; color: var(--muted); }
nav a:hover { background: var(--bg); }
nav a.active { background: var(--brand); color: var(--on-brand); }
main.wrap { padding-top: 24px; padding-bottom: 48px; }

/* ── 햄버거 버튼 (모바일 전용) ─────────────────────────────────── */
.hamburger-btn {
  display: none; background: none; border: none; padding: 6px; margin: -6px 2px -6px -6px;
  color: var(--text); cursor: pointer; border-radius: 6px; flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--bg); }

/* ── 계정 메뉴 (아바타 + 드롭다운) ─────────────────────────────── */
.account-menu { position: relative; flex-shrink: 0; }
.account-btn {
  display: flex; align-items: center; gap: 8px; font: inherit; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px 4px 4px; color: var(--text);
}
.account-btn:hover { background: var(--bg); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.avatar-lg { width: 38px; height: 38px; font-size: 15px; }
.account-name {
  font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.admin-pill { padding: 1px 7px; font-size: 10px; }
.chev { color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
.chev.chev-open { transform: rotate(180deg); }

.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 240px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px; z-index: 60;
}
.dropdown-user, .drawer-user { display: flex; align-items: center; gap: 10px; padding: 6px; }
.dropdown-username { font-size: 14px; font-weight: 700; }
.dropdown-role { font-size: 11px; color: var(--muted); }
.dropdown-sep { height: 1px; background: var(--line); margin: 8px 2px; }
.dropdown-label {
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 6px 6px;
}
/* 이름표와 고르는 칸을 한 줄에. "계좌" 세 글자가 한 줄을 통째로 먹을 이유가 없다 —
   날마다 여는 팝업이라 줄 수가 곧 번잡함이다. 이름표는 폭만큼만, 칸이 나머지를 채운다. */
.dropdown-row { display: flex; align-items: center; gap: 8px; padding: 0 6px 4px; }
.dropdown-row > .dropdown-label { padding: 0; flex: none; }
.dropdown-row > select { flex: 1; min-width: 0; }
.dropdown-link { display: block; padding: 9px 8px; border-radius: 9px; font-size: 13px; color: var(--text); }
.dropdown-link:hover { background: var(--bg); }
.dropdown-logout { color: var(--neg); }

/* ── 계정 팝업 바로가기 ──────────────────────────────────────────
   위 두 개는 반씩, 아래 하나는 한 줄 전부. 높이는 셋 다 같아야 한다 —
   하나만 크면 누를 것이 아니라 배너처럼 읽힌다. */
.dropdown-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 6px 6px; }
.dropdown-quick a { display: flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 8px; font-size: 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  white-space: nowrap; }
.dropdown-quick a:hover { border-color: var(--brand); }
.dropdown-quick a.wide { grid-column: 1 / -1; }

/* ── 테마 스와치 ──────────────────────────────────────────────── */
/* 색 점 네 개를 한 줄로. 글자가 없으니 누를 곳이 작아지지 않게 점을 키우고
   터치 표준(44px)에 맞춘 정사각형으로 둔다. */
.theme-swatches { display: flex; gap: 8px; padding: 0 2px; justify-content: space-between; }
.theme-swatch {
  display: flex; align-items: center; justify-content: center; flex: 1;
  font: inherit; height: 40px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); cursor: pointer; padding: 0;
}
.theme-swatch:hover { border-color: var(--brand); }
.theme-swatch.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; font-weight: 600; }

/* ── 글꼴 크기 조절 ────────────────────────────────────────────── */
.fontsize-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 2px 2px; }
.fontsize-ctl button {
  min-width: 44px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); cursor: pointer; font: inherit; font-weight: 700; font-size: 13px;
}
.fontsize-ctl button:hover { border-color: var(--brand); }
.fontsize-ctl .fs-val { font-size: 13px; font-weight: 700; min-width: 44px; text-align: center; }

/* ── 클로드 A/B 모드 스위치 ────────────────────────────────────── */
.claude-mode-switch { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 0 2px; }
.cm-btn {
  flex: 1; font: inherit; font-size: 12px; padding: 7px 6px; border: none; cursor: pointer;
  background: var(--bg); color: var(--muted);
}
.cm-btn + .cm-btn { border-left: 1px solid var(--line); }
.cm-btn.active { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.swatch-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(120,120,120,.25); }
/* 실제 팔레트와 같은 값이어야 미리보기 구실을 한다 — 테마 색을 바꾸면 여기도 같이 바꿀 것 */
.swatch-light      { background: linear-gradient(135deg, #eef2f7 50%, #2563eb 50%); }
.swatch-light-warm { background: linear-gradient(135deg, #fbf3e6 50%, #c2410c 50%); }
.swatch-dark       { background: linear-gradient(135deg, #0c1320 50%, #4f8dfb 50%); }
.swatch-dark-black { background: linear-gradient(135deg, #000000 50%, #16c47f 50%); }

/* ── 모바일 드로어 내비게이션 ──────────────────────────────────── */
.drawer-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 90; }
/* 계정 팝업 덮개 — 본문만 흐리고 어둡게. 상단바(40)·채팅창(150)보다 아래(30)라 둘은 선명하다.
   backdrop-filter 는 자기 뒤만 흐리므로 위에 있는 채팅창은 건드리지 않는다. */
.acct-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-theme="light"] .acct-backdrop { background: rgba(20, 24, 40, .28); }

/* 모달 팝업(계정 설정·API 사용량 등) 뒤 배경 — 창 구분이 잘 되게 진하게 + 살짝 블러 */
.modal-backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* 드로어는 position:fixed 라 body 의 padding 을 모른다 — 채팅창이 아래를 먹고 있으면
   맨 아래 항목(로그아웃)이 채팅 바 뒤로 들어가 아무리 스크롤해도 누를 수 없었다.
   채팅창 JS 가 --cc-reserve-b / -r 을 적어 주면 그만큼 끝을 당긴다. */
.drawer-nav {
  position: fixed; top: 0; left: 0; bottom: var(--cc-reserve-b, 0px);
  width: min(82vw, 300px); z-index: 100;
  background: var(--card); box-shadow: var(--shadow); padding: 16px;
  display: flex; flex-direction: column; overflow-y: auto;
  /* 마지막 항목을 끈까지 올릴 수 있게 여유 한 칸 — 주소창이 겹치는 폰이 있다 */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-100%); transition: transform .25s ease;
}
/* 배경 어둔 막도 같이 줄여야 채팅창이 그 위로 드러난다 */
.drawer-backdrop { bottom: var(--cc-reserve-b, 0px); right: var(--cc-reserve-r, 0px); }
.drawer-nav.drawer-open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.drawer-close { background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 6px; line-height: 1; }
.drawer-user { border-bottom: 1px solid var(--line); margin: 4px 0 8px; padding-bottom: 12px; }
.drawer-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.drawer-links a { padding: 11px 10px; border-radius: 9px; color: var(--text); font-size: 14px; }
.drawer-links a:hover { background: var(--bg); }
.drawer-links a.active { background: var(--brand); color: var(--on-brand); }

/* ── 좁은 화면 상단바는 두 줄 ────────────────────────────────────
   한 줄에 [버거][로고][계좌배지][아이콘 4개][계정] 을 다 넣으면 로고가 잘리거나
   아이콘이 화면 밖으로 나간다. 로고를 윗줄에 혼자 두고, 계좌배지부터 계정까지를
   아랫줄로 내린다. 넓은 화면은 지금처럼 한 줄이다. */
.topbar-row2 { display: contents; }
@media (max-width: 900px) {
  .topbar .wrap { flex-wrap: wrap; row-gap: 8px; }
  .brand { order: 1; }
  .hamburger-btn { order: 0; }
  /* 둘째 줄을 통째로 차지하게 만들어 로고 뒤의 것들을 모두 아래로 내린다 */
  .topbar-row2 { display: flex; order: 2; flex-basis: 100%; align-items: center;
    gap: 8px; min-width: 0; }
  .topbar-row2 .topbar-right { margin-left: auto; }
}
/* 901~1220px 데스크탑: 메뉴 일곱 개가 오른쪽 아이콘·계정과 겹치기 직전이다. 메뉴를 줄이면
   글자가 겹치고(실측: '크롤링' 위에 전체화면 아이콘, '노트' 위에 종), 숨기면 데스크탑인데
   햄버거가 된다. 대신 메뉴만 **둘째 줄**로 내린다 — 로고·배지·아이콘·계정은 첫 줄 그대로.
   채팅창이 본문을 좁혔을 때는 뷰포트가 넓어도 같은 일이 생기므로 JS 가 html.cc-two-row 를 붙인다. */
@media (min-width: 901px) and (max-width: 1220px) {
  .topbar .wrap { flex-wrap: wrap; row-gap: 4px; }
  nav.nav-desktop { order: 5; flex-basis: 100%; margin-top: 4px; padding-top: 6px; justify-content: center;
    border-top: 1px solid var(--line); }
}
html.cc-two-row .topbar .wrap { flex-wrap: wrap; row-gap: 4px; }
html.cc-two-row nav.nav-desktop { order: 5; flex-basis: 100%; margin-top: 4px; padding-top: 6px; justify-content: center;
  border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  nav.nav-desktop { display: none; }
  .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 480px) {
  /* 상단바에 들어갈 게 많다 — 좁으면 이름·역할 배지를 접고 아이콘만 남긴다.
     420px 로 잡았더니 375px 폰에서도 넘쳤다(아바타+이름+배지+화살표 = 150px). */
  .account-name { display: none; }
  .admin-pill { display: none; }
  .topbar .wrap { gap: 10px; }
  .env-badge { font-size: 10px; padding: 2px 6px; }
}
@media (max-width: 380px) {
  .topbar-icon-btn, .notif-btn { width: 32px; height: 32px; flex-basis: 32px; }
  .brand { font-size: 15px; }
}
/* 채팅창을 오른쪽에 붙이면 본문 폭이 줄어드는데, 위 미디어쿼리는 **뷰포트** 폭만 봐서
   메뉴가 그대로 남아 한 글자씩 세로로 깨졌다. 실제 본문 폭이 좁아지면 모바일과 같은
   햄버거 메뉴로 전환한다(채팅창 JS 가 이 클래스를 붙인다). */
/* 채팅창이 본문을 좁혀 놓았을 때도 차트 버튼은 모바일 취급 — 실제 폭이 기준이다 */
html.cc-narrow .ptog, html.cc-narrow .pcmp { height: 17px; padding: 0 6px; font-size: 8.5px; }
html.cc-narrow .ptf { font-size: 8.5px; padding: 1px 6px; }
html.cc-narrow .pdc { width: 13px; height: 13px; }
html.cc-narrow .pdraw-clear, html.cc-narrow .pcmp-clear {
  font-size: 8.5px !important; padding: 0 6px !important; height: 17px !important;
  min-height: 0 !important; line-height: 1 !important; }
html.cc-narrow .pro-draw-label, html.cc-narrow .pro-cmp-label,
html.cc-narrow .pro-malegend { font-size: 8.5px; }
html.cc-narrow nav.nav-desktop { display: none; }
html.cc-narrow .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }
html.cc-tight .account-name, html.cc-tight .admin-pill,
html.cc-tight .invest-badge { display: none; }
/* 투자성향 배지 — 전략 추천과 AI 답변 깊이의 기준이라 늘 보이게 둔다 */
.invest-badge { background: var(--callout-info-bg); color: var(--callout-info-fg);
  border: 1px solid var(--callout-info-line); white-space: nowrap; }
@media (max-width: 720px) { .invest-badge { display: none; } }
/* 안전망 — 어떤 폭에서도 메뉴 글자는 줄바꿈되지 않는다 */
nav a, .drawer-links a { white-space: nowrap; }

/* ── 상단 메뉴의 하위 묶음 ('거래') ──────────────────────────────────
   거래내역·정산·매매일지는 성격이 다른 세 화면이라 따로 두되, 메뉴에서는 한 항목으로
   묶는다. 상위 항목 자체는 갈 곳이 없어 링크가 아니라 버튼이다. */
.nav-sub { position: relative; display: inline-flex; }
/* 옆의 nav a 와 같은 모양이어야 한다 — 하나만 다르게 생기면 메뉴가 아니라 버튼으로 읽힌다.
   min-height:0 은 터치 규칙(pointer:coarse 에서 min-height:40px)이 이 줄만 키우는 걸 막는다. */
.nav-sub-btn { font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--muted); padding: 6px 12px; border-radius: 6px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; min-height: 0; }
.nav-sub-btn:hover { background: var(--bg); color: var(--text); }
.nav-sub-btn.active { background: var(--brand); color: var(--on-brand); }
/* 열리는 메뉴라는 유일한 신호다 — 9px 는 있는 줄도 몰랐다 */
.nav-sub-caret { font-size: 18px; line-height: 1; opacity: .8; }
.nav-sub-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 5px; }
.nav-sub-menu a { display: block; padding: 8px 11px; border-radius: 7px;
  color: var(--text); font-size: 13px; }
.nav-sub-menu a:hover { background: var(--bg); }
.nav-sub-menu a.active { background: var(--brand); color: var(--on-brand); }

/* 좁은 화면 드로어는 접지 않고 들여쓰기로 묶는다 — 세 개뿐이라 다 보이는 게 낫다 */
.drawer-group { font-size: 11px; color: var(--muted); padding: 10px 10px 3px;
  letter-spacing: .02em; }
.drawer-links a.drawer-sub { padding-left: 22px; }
/* ── 종목 자동완성 결과 목록 ────────────────────────────────────────
   입력칸 바로 아래에 떠야 고르는 흐름이 끊기지 않는다. 부모 label 이
   position:relative 여야 하고, 비어 있을 때는 테두리도 보이면 안 된다. */
.sym-hits { position: absolute; top: 100%; left: 0; z-index: 60; width: 280px;
  max-width: 80vw; max-height: 230px; overflow: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.sym-hits:empty { display: none; }
.sym-picked:empty { display: none; }

/* ── 크기 조절되는 목록 상자 ─────────────────────────────────────
   긴 표가 화면을 다 먹으면 그 아래를 보려고 계속 스크롤해야 한다. 차트 그룹에 쓰던
   손잡이를 그대로 가져와, 상자 안에서만 스크롤되게 하고 높이를 사람이 정하게 한다.
   손잡이 생김새·동작은 차트와 같게 맞춘다 — 같은 모양이 다르게 움직이면 헷갈린다. */
/* `.rz-wrap >` 로 한 단계 올려 둔다. 그냥 `.rz-box` 로 두면 파일 뒤쪽의
   `.table-scroll { max-height: 60vh }` 와 특정도가 같아 **나중 것이 이긴다** —
   실제로 그래서 높이 조절이 아무 반응도 없었고, 오류도 안 났다.
   `--rz-h` 는 감싸는 쪽에 얹히므로, 무엇에 쓸지는 여기서 정한다. */
.rz-wrap > .rz-box { max-height: var(--rz-h, 320px); overflow: auto; }
.rz-handle { height: 18px; cursor: ns-resize; touch-action: none; position: relative;
  -webkit-user-select: none; user-select: none; }
.rz-handle::before { content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 52px; height: 4px; margin-left: -26px; border-radius: 3px;
  background: var(--line); }
.rz-handle:hover::before, .rz-handle:active::before { background: var(--muted); }
/* 내용이 상자보다 짧으면 조절할 게 없다 — 손잡이를 숨겨 화면을 어지럽히지 않는다 */
.rz-wrap.rz-fits .rz-handle { visibility: hidden; }

/* 제목 옆의 계좌 배지 — 지금 어느 계좌를 보고 있는지. 계좌가 세션 범위가 되면서
   화면에 계좌 드롭박스가 없어졌으므로, 어디를 보고 있는지는 여기서만 알 수 있다. */
.acct-scope { display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--callout-info-bg); color: var(--callout-info-fg);
  border: 1px solid var(--callout-info-line); white-space: nowrap; }
.acct-scope-all { background: var(--callout-ok-bg); color: var(--callout-ok-fg);
  border-color: var(--callout-ok-line); }

/* ── 목록 조작 줄 · 페이지네이션 ─────────────────────────────────
   누적 데이터가 많아지면 한 화면에 다 그릴 수 없다. 월로 좁히고(왼쪽),
   몇 개씩 볼지 고르고(오른쪽), 넘치면 아래에서 쪽을 넘긴다. */
.lp-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 0 2px 8px; font-size: 12px; }
.lp-left, .lp-right { display: inline-flex; align-items: center; gap: 8px; }
.lp-sel { font: inherit; font-size: 12px; padding: 4px 8px; width: auto; }
.lp-count { white-space: nowrap; }
.lp-pager { display: flex; justify-content: center; align-items: center; gap: 4px;
  flex-wrap: wrap; margin: 10px 0 4px; }
.lp-pg { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; text-decoration: none; }
.lp-pg:hover { border-color: var(--brand); }
.lp-pg.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand);
  font-weight: 700; }
.lp-pg.off { opacity: .35; pointer-events: none; }
.lp-gap { color: var(--muted); padding: 0 2px; }

h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 0 0 12px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad, 20px); margin-bottom: 16px;
  /* 아주 옅은 그림자 한 겹 — 경계선만으로는 배경과 카드가 같은 평면처럼 보인다 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
:root[data-theme^="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* ── 자동매매 상태 칩·숫자 ─────────────────────────────────────────
   자동매매 화면과 대시보드 카드가 같이 쓴다. 한쪽에만 두면 두 화면의 "체결/실패"
   가 서로 다른 색으로 보이는데, 같은 숫자가 화면마다 다르게 보이면 믿지 못한다.
   색만으로 구분하지 않고 글자를 항상 같이 둔다. */
.at-pill { display:inline-flex; align-items:center; gap:4px; border-radius:999px;
  padding:1px 9px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.at-pill.ok   { background:var(--callout-ok-bg);   color:var(--callout-ok-fg);
                border:1px solid var(--callout-ok-line); }
.at-pill.wait { background:var(--callout-warn-bg); color:var(--callout-warn-fg);
                border:1px solid var(--callout-warn-line); }
.at-pill.bad  { background:var(--callout-danger-bg); color:var(--callout-danger-fg);
                border:1px solid var(--callout-danger-line); }
.at-pill.off  { background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.at-stats { display:flex; gap:18px; flex-wrap:wrap; }
.at-stats .v { font-size:19px; font-weight:800; }
.at-stats .l { font-size:11.5px; color:var(--muted); }

.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .grid.cols-3, .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
}
/* 넷은 좁아지면 2×2 가 낫다 — 한 줄에 넣겠다고 카드를 종잇장처럼 눌러 놓으면
   숫자가 줄바꿈된다. */
@media (min-width: 721px) and (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
.muted { color: var(--muted); }
/* ── 겹침 순서(z-index) ──────────────────────────────────────────────
   위로 갈수록 앞. 채팅창을 띄워둔 채 설정을 만져도 팝업이 가려지면 안 된다.
     본문 < 상단바 < 드로어 < 채팅창 < 전체화면 차트 < 캡처 < 관리자 팝업 < 계정(로그인) 팝업 */
:root {
  --z-chat: 150;
  --z-fullscreen: 9000;
  --z-capture: 9500;
  --z-admin-modal: 9800;
  --z-account-modal: 9900;
}

/* 카드 전체가 링크인 경우 — 대시보드 요약 카드처럼 "누르면 그 페이지로" 를 명확히 한다.
   카드 안에 다른 링크가 없을 때만 쓴다(<a> 중첩 금지). */
a.card-link {
  display: block; text-decoration: none; color: inherit; position: relative;
  transition: border-color .12s ease, transform .12s ease;
}
a.card-link:hover, a.card-link:focus-visible {
  border-color: var(--brand); transform: translateY(-1px);
}
a.card-link::after {
  content: "→"; position: absolute; top: 16px; right: 16px;
  color: var(--muted); font-size: 14px; transition: color .12s ease, transform .12s ease;
}
a.card-link:hover::after { color: var(--brand); transform: translateX(2px); }
/* 카드 안에 외부 링크가 섞여 있어 카드 전체를 링크로 못 만드는 경우, 제목만 링크로 */
h2 > a.h2-link { color: inherit; text-decoration: none; }
h2 > a.h2-link:hover { color: var(--brand-fg); }
h2 > a.h2-link::after { content: " →"; color: var(--muted); font-size: 13px; font-weight: 400; }
h2 > a.h2-link:hover::after { color: var(--brand-fg); }

.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
label.field { display: block; margin-bottom: 14px; }
label.field > span { font-weight: 600; font-size: 13px; }
label.field .hint { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 12px; }
input[type=text], input[type=password], input[type=number], input[type=search],
input[type=email], input[type=date], select, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--input-border); border-radius: 6px;
  background: var(--input-bg); color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--muted);
}
button, .btn {
  font: inherit; cursor: pointer; border-radius: 6px; padding: 8px 16px;
  border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand);
  transition: filter .12s ease, transform .06s ease, border-color .12s ease, background .12s ease;
}
/* 눌리는 느낌 — 값이 큰 화면에서 "눌렀나?" 를 되묻지 않게 */
button:hover:not(:disabled), .btn:hover { filter: brightness(1.08); }
button:active:not(:disabled), .btn:active { transform: translateY(1px); filter: brightness(.94); }
button.ghost, .btn.ghost { background: var(--card); color: var(--brand-fg); font-weight: 600; }
button.ghost:hover:not(:disabled), .btn.ghost:hover { background: var(--bg); filter: none; }
button:disabled { opacity: .5; cursor: default; }

/* ── 키보드 포커스 ───────────────────────────────────────────────
   테마마다 배경이 달라서 브라우저 기본 링은 어떤 테마에선 거의 안 보인다.
   :focus-visible 만 잡아 마우스 클릭에는 링이 뜨지 않게 한다. */
:where(a, button, .btn, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0; border-color: var(--focus);
}
/* 카드 모양 버튼: 채워진 버튼이 아니므로 --on-brand(강조배경용 글자색)를 쓰면 안 됨 → 본문색 */
button.card {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  font: inherit; text-align: left;
}
/* 텍스트 링크형 버튼 — 전역 정의가 없어 그동안 기본 초록 버튼으로 잘못 렌더됐음 */
.linklike {
  background: none; border: 0; padding: 0; margin: 0; color: var(--brand-fg);
  text-decoration: underline; cursor: pointer; font: inherit;
}
.linklike:hover { opacity: .8; }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--muted); }
.pill.set { background: var(--callout-ok-bg); color: var(--callout-ok-fg);
  border: 1px solid var(--callout-ok-line); }
.msg-ok { color: var(--ok); }
.msg-err { color: var(--callout-danger-fg); }

/* LLM 답변 마크다운 렌더 (mdlite) — 브리핑 종합해설·채팅·작업 결과 공용 */
.md-body { overflow-wrap: anywhere; }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-body h2, .md-body h3, .md-body h4, .md-body h5 {
  margin: 16px 0 6px; line-height: 1.35; font-weight: 700; }
.md-body h2 { font-size: 1.12em; }
.md-body h3 { font-size: 1.06em; }
.md-body h4 { font-size: 1em; color: var(--brand-fg, var(--text)); }
.md-body h5 { font-size: .95em; color: var(--muted); }
.md-body p { margin: 7px 0; }
.md-body ul, .md-body ol { margin: 6px 0; padding-left: 20px; }
.md-body li { margin: 3px 0; }
.md-body li > ul, .md-body li > ol, .md-body ul ul, .md-body ul ol, .md-body ol ul, .md-body ol ol { margin: 2px 0; }
.md-body strong { font-weight: 700; }
.md-body hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.md-body code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: .9em; }
.md-body pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
.md-body pre code { background: none; border: none; padding: 0; }
.md-body a { color: var(--brand-fg); }
/* 채팅 말풍선 안에서는 더 촘촘하게 */
#cchat .cc-msg-text.md-body { white-space: normal; }
#cchat .cc-msg-text.md-body h2, #cchat .cc-msg-text.md-body h3,
#cchat .cc-msg-text.md-body h4 { margin: 10px 0 4px; }
#cchat .cc-msg-text.md-body p { margin: 5px 0; }
#cchat .cc-msg-text.md-body > :first-child { margin-top: 0; }
#cchat .cc-msg-text.md-body > :last-child { margin-bottom: 0; }
/* ── 표 ─────────────────────────────────────────────────────────
   숫자를 세로로 비교하는 표가 대부분이다. 자릿수가 흔들리지 않게 tabular-nums 를 쓰고,
   행에 마우스를 올리면 그 줄이 밝아지게 해서 넓은 표에서 눈이 줄을 놓치지 않게 한다.

   ★ 좁은 화면에서 표는 **줄바꿈이 아니라 가로 스크롤**로 처리한다.
   폭을 억지로 맞추면 "1,818,000원" 이 세 줄로 쪼개지고 "SK하이닉스" 가 한 글자씩 끊긴다.
   숫자는 자릿수가 붙어 있어야 읽히고 종목명은 단어가 붙어 있어야 읽힌다 —
   둘 다 줄바꿈으로는 만족시킬 수 없어서, 표를 담은 카드가 옆으로 밀리게 한다. */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal;
  white-space: normal; word-break: keep-all; }

/* 표를 직접 담은 상자는 무엇이든 가로 스크롤 상자가 된다. 표 자신은 내용만큼 넓어진다.
   카드만 잡아 둑더니 /plans 처럼 표를 한 겹 더 감싼 화면(.pb)에서 오른쪽 열이
   그대로 잘려 나갔다 — 스크롤도 안 돼서 볼 방법이 없었다. */
.card:has(> table), .card:has(> form > table), .jr-inner:has(> table),
.pb:has(> table), details:has(> table) { overflow-x: auto; }
/* 스크롤 상자 안의 표는 자기 내용만큼 넘어간다. 이게 없으면 표가 상자 폭에 맞춰졌다가
   첫 열처럼 줄바꿈이 허용된 칸이 지지를 받는다 — 매매일지의 "2026-08-10 10:00" 이
   56px 칸에서 세 줄로 접혀 있었다. */
.card > table, .jr-inner > table, .table-scroll > table, .pb > table { min-width: max-content; }
/* 스크롤이 있다는 걸 알 수 있게 — 모바일엔 스크롤바가 안 보인다 */
.card:has(> table)::-webkit-scrollbar, .table-scroll::-webkit-scrollbar,
.pb:has(> table)::-webkit-scrollbar { height: 6px; }
.card:has(> table)::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb,
.pb:has(> table)::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px; }

/* 스크롤 상자에는 **가로 안쪽여백을 두지 않는다.**
   overflow 상자의 padding-left 영역은 내용과 함께 스크롤되는데, 고정된 첫 열은
   콘텐츠 상자 기준 left:0 에 붙어서 그 여백을 덮지 못한다. 그래서 옆으로 밀면
   고정된 이름 **왼쪽으로 다른 열의 글자가 샐족 샐족 빠져나왔다**(실제 신고).
   여백은 칸이 대신 갖고, 표가 아닌 형제(제목·설명)에만 다시 돌려준다. */
.card:has(> table) { padding-left: 0; padding-right: 0; }
.card:has(> table) > :not(table) {
  padding-left: var(--card-pad, 20px); padding-right: var(--card-pad, 20px); }
.card:has(> table) > table th:first-child,
.card:has(> table) > table td:first-child { padding-left: var(--card-pad, 20px); }
.card:has(> table) > table th:last-child,
.card:has(> table) > table td:last-child { padding-right: var(--card-pad, 20px); }

/* 옆으로 밀 때 **종목 이름은 붙잡아 둔다.** 이름이 같이 밀려나가면 지금 보는 숫자가
   어느 종목 건지 알 수 없어져, 스크롤이 오히려 더 불편해진다. */
@media (max-width: 900px) {
  .card:has(> table) th:first-child, .card:has(> table) td:first-child,
  .table-scroll th:first-child, .table-scroll td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--card);
    box-shadow: 1px 0 0 var(--line);
  }
  /* 첫 열이 화면의 절반을 넘기면 정작 숫자를 볼 자리가 없다 */
  .card:has(> table) td:first-child, .table-scroll td:first-child { max-width: 48vw; }
}

/* 작은 폰 전용 — 고정된 이름 칸이 화면을 거의 다 먹어 오른쪽 숫자가 보이지 않았다.
   이름 / 티커·차트를 각각 다른 줄로 내리고 표 전체를 한 단계 작게 한다. */
@media (max-width: 480px) {
  .card:has(> table) > table, .table-scroll > table { font-size: 12.5px; }
  .card:has(> table) > table th, .card:has(> table) > table td,
  .table-scroll > table th, .table-scroll > table td { padding: 7px 8px; }
  .card:has(> table) > table th:first-child,
  .card:has(> table) > table td:first-child { padding-left: var(--card-pad, 14px); }
  .card:has(> table) td:first-child, .table-scroll td:first-child {
    max-width: 40vw; line-height: 1.35; }
  /* 첫 줄은 종목명만 — 티커·ETF·차트는 아랫줄로 내려보낸다 */
  .card:has(> table) td:first-child > a:first-child,
  .table-scroll td:first-child > a:first-child { display: block; }
  .card:has(> table) td:first-child .muted,
  .table-scroll td:first-child .muted { font-size: 11px; }
}
thead th { color: var(--muted); font-weight: 600; font-size: 12px; }
/* 머리행 고정은 **스크롤 상자 안에서만** 쓴다. 전역으로 걸면 짧은 표의 머리행이
   화면 맨 위까지 따라 올라와 제목 위를 덮는다. */
.table-scroll { overflow: auto; max-height: 60vh; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--bg); }
tbody tr:last-child td { border-bottom: 0; }
.badge-level {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand); font-weight: 700;
}
/* 값이 바뀐 순간의 깜빡임 — 라이트 전용 색을 쓰면 다크에서 흰 섬광이 된다 */
@keyframes px-flash-up   { from { background: var(--flash-up); } to { background: transparent; } }
@keyframes px-flash-down { from { background: var(--flash-down); } to { background: transparent; } }

/* 클로드가 작업 중일 때 로고가 커졌다 작아졌다 맥동 — 멈춘 건지 일하는 건지 한눈에 */
@keyframes claude-pulse {
  0%, 100% { transform: scale(0.7);  opacity: .5;  }
  50%      { transform: scale(1.15); opacity: 1;   }
}
.cc-working { display: inline-flex; vertical-align: -0.2em; }
.cc-working .claude-ico,
.claude-ico.working {
  animation: claude-pulse 1.1s ease-in-out infinite;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .cc-working .claude-ico, .claude-ico.working { animation-duration: 2.2s; }
}
.claude-dots::after { content: "…"; animation: claude-blink 1.2s steps(4) infinite; }
@keyframes claude-blink { 0%,100%{opacity:.3} 50%{opacity:1} }
.live-px.px-up   { animation: px-flash-up   .7s ease-out; }
.live-px.px-down { animation: px-flash-down .7s ease-out; }
#live-stamp { font-size: 12px; color: var(--muted); }

/* ── 상태 강조 박스(콜아웃) — 배경만 넣고 글자색을 안 정해서(다크모드에서 흰 글씨가
   밝은 배경 위에 얹혀 안 보이던 문제) 있었던 카드들을 여기로 통일. ─────────────── */
.callout-danger { background: var(--callout-danger-bg); color: var(--callout-danger-fg); border-color: var(--callout-danger-line); }
.callout-warn   { background: var(--callout-warn-bg);   color: var(--callout-warn-fg);   border-color: var(--callout-warn-line); }
.callout-ok     { background: var(--callout-ok-bg);     color: var(--callout-ok-fg);     border-color: var(--callout-ok-line); }
.callout-info   { background: var(--callout-info-bg);   color: var(--callout-info-fg);   border-color: var(--callout-info-line); }
.callout-purple { background: var(--callout-purple-bg); color: var(--callout-purple-fg); border-color: var(--callout-purple-line); }
.callout-neutral{ background: var(--callout-neutral-bg); color: var(--text); border-color: var(--callout-neutral-line); }
.callout-danger, .callout-warn, .callout-ok, .callout-info, .callout-purple, .callout-neutral {
  border-width: 1px; border-style: solid;
}
/* 콜아웃 안의 pill/링크도 부모 글자색을 물려받게(하드코딩된 흰 링크색 대신) */
.callout-danger a, .callout-warn a, .callout-ok a, .callout-info a, .callout-purple a { color: inherit; text-decoration: underline; }

/* ── 전략 포지션 상태 배지 (plans.html·strategy_detail.html 공용 — 예전엔 각 템플릿에
   따로 정의돼 있어서 다크모드 대응이 파일마다 따로 필요했음, 여기로 통일) ────────── */
.st-planned  { background: var(--line); color: var(--muted); }
.st-entering { background: var(--callout-info-bg); color: var(--callout-info-fg); }
.st-holding  { background: var(--callout-ok-bg); color: var(--callout-ok-fg); }
.st-exiting  { background: var(--callout-warn-bg); color: var(--callout-warn-fg); }
.st-closed   { background: var(--callout-neutral-bg); color: var(--muted); }
.st-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.pb { border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.pb-buy  { background: var(--callout-ok-bg); color: var(--callout-ok-fg); border: 1px solid var(--callout-ok-line); }
.pb-sell { background: var(--callout-info-bg); color: var(--callout-info-fg); border: 1px solid var(--callout-info-line); }
.pb-stop { background: var(--callout-danger-bg); color: var(--callout-danger-fg); border: 1px solid var(--callout-danger-line); font-size: 13px; }
.pb-yuk  { background: var(--callout-purple-bg); color: var(--callout-purple-fg); border: 1px solid var(--callout-purple-line); }
.pb b, .pb strong { color: inherit; }
.shared-tag { font-size: 11px; font-weight: 700; background: var(--callout-warn-bg); color: var(--callout-warn-fg); padding: 1px 7px; border-radius: 999px; }

/* ── 좁은 화면 전반 정리 ────────────────────────────────────────────
   원칙 하나: **넘치면 줄바꿈이 아니라 스크롤**이다.
   좁은 폭에 억지로 맞추려 하면 한글은 한 글자씩, 숫자는 자릿수 단위로 쪼개진다.
   그래서 (1) 넘칠 수 있는 것은 각자 가로 스크롤 상자에 담고,
   (2) 남는 폭은 여백을 줄여 본문에 돌려주고,
   (3) 그래도 안 되면 덜 중요한 것을 접는다 — 이 순서로 처리한다. */

/* 가로로 늘어놓은 줄(버튼+설명, 필터 칩 등)은 좁아지면 다음 줄로 흘린다.
   inline 요소를 margin-left 로 띄우면 줄이 바뀔 때 왼쪽에 빈 칸이 생겨서,
   flex + gap 으로 바꾼다. */
.pf-refresh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-refresh-note { font-size: 12px; }
@media (max-width: 640px) {
  /* 설명은 버튼 옆이 아니라 아래 한 줄을 통째로 쓴다 */
  .pf-refresh-note { flex: 1 1 100%; }
}

/* 카드 안쪽 여백 — 375px 폰에서 좌우 20px+20px 은 본문의 11% 다. */
@media (max-width: 640px) {
  .wrap { padding: 0 12px; }
  .card { --card-pad: 14px; border-radius: 9px; }
  main.wrap { padding-top: 18px; }
  h1 { font-size: 18px; margin-bottom: 12px; }
  .stat-value { font-size: 19px; }
}

/* 제목·본문 한글은 단어 중간에서 끊지 않는다. 반대로 URL·티커처럼 띄어쓰기가 없는
   덩어리는 끊어야 카드 밖으로 안 나간다 — 두 규칙을 같이 건다.

   ★ anywhere 가 아니라 break-word 다. anywhere 는 요소의 **min-content 폭까지 한 글자로**
     만들어서, flex 자식이 그만큼 쪼그라들 수 있게 한다. 실제로 전략 기록 본문이
     "계획을 흔들만한 변화가 없어..." 처럼 한 글자씩 세로로 늘어섰다.
     break-word 는 넘칠 때만 끊고 고유 폭 계산은 건드리지 않는다. */
h1, h2, h3, .card > p, .muted { word-break: keep-all; overflow-wrap: break-word; }

/* 코드·로그 블록은 감싸지 말고 옆으로 민다(들여쓰기가 정보다) */
pre { overflow-x: auto; max-width: 100%; }
pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* flex 자식은 기본이 min-width:auto 라 내용보다 작아지지 않는다 —
   그래서 입력칸 하나가 줄 전체를 화면 밖으로 밀어낸다. */
form input, form select, form textarea { min-width: 0; }

/* 손가락 크기 — 44px 이 권장이지만 화면이 빡빡해 40px 로 타협했다.
   포인터가 '거친'(터치) 기기에서만 키운다. 마우스에서는 지금 크기가 알맞다.
   아이콘 버튼(상단바·채팅창)은 이미 정사각형으로 크기를 잡아 뒀으니 건드리지 않는다 —
   min-height 는 height 를 이기기 때문에 여기 걸면 그 줄들이 통째로 어긋난다. */
@media (pointer: coarse) {
  /* 제외 목록을 :where() 로 감싸 **우선순위를 0 으로** 만든다.
     :not() 를 그대로 쓰면 이 규칙이 (0,4,1) 이 돼서 다른 클래스 규칙이 모두 진다 —
     실제로 캐린더 필터 알약(.cal-filter)이 40px 로 부풀어 "버튼이 너무 크다" 는
     신고를 받았고, 그 화면에서는 알약을 작게 두는 게 맞다. */
  button:not(:where(.topbar-icon-btn, .notif-btn, [class*="cc-"], .drawer-close, .linklike)),
  .btn { min-height: 40px; }
  /* 채팅창 제목 줄의 아이콘들은 클래스가 없어 위 예외에 걸리지 않는다 — 제목 줄이
     그만큼 두꺼지므로 따로 되돌린다(이미 32px 정사각으로 잡혀 있다). */
  #cchat .cc-acts button { min-height: 0; }
}

/* 움직임에 민감한 사용자는 전환 효과를 끈다(OS 설정 존중) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ── 디버깅 패널 (관리자가 켰을 때만) ────────────────────────────────
   사용자: "로고 아래 로고 시작부터, 실계좌 라벨 크기로 배치해줘. 누르면 밑으로
   창이 확장되는 형식으로. 지금 위치는 채팅바를 가리고 모바일에선 이상한 데 떠 있어."

   그래서 화면에 떠 있지 않고 **문서 흐름 안**, 상단 바 바로 아래 로고와 같은 선에
   놓는다(.wrap 을 같이 써서 좌측 여백이 저절로 맞는다). 손잡이는 실계좌 뱃지와 같은
   크기·모양이고, 펼친 창만 그 아래로 겹쳐 뜬다 — 흐름을 밀어내면 5초마다 화면이
   출렁이고, 고정 배치로 되돌리면 채팅바를 다시 가린다. */
.dbg-wrap { padding-top: 8px; }
.dbg { position: relative; display: inline-block; font-size: 12px; color: var(--text); }

/* 손잡이 = 실계좌 뱃지와 같은 치수(.env-badge) */
.dbg-bar { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: #2c1c00; color: #ffd98a; border: 1px solid #7a4b00; white-space: nowrap; }
.dbg-caret { opacity: .8; }
.dbg-pill { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px;
  white-space: nowrap; }
.dbg-pill.ok { background: var(--callout-ok-bg); color: var(--callout-ok-fg); }
.dbg-pill.warn { background: var(--callout-warn-bg); color: var(--callout-warn-fg); }
.dbg-pill.bad { background: var(--callout-danger-bg); color: var(--callout-danger-fg); }

/* 펼친 창 — 손잡이 아래로 내려온다. 겹쳐 뜨므로 본문이 밀리지 않는다. */
.dbg-body { position: absolute; top: calc(100% + 6px); left: 0; z-index: 9600;
  width: 420px; max-width: calc(100vw - 32px); max-height: 62vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px 10px 10px; }

/* 상시 정보 — 오류가 없는데 결과가 안 나오는 경우를 잡는 자리 */
.dbg-status { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  margin-bottom: 8px; }
.dbg-kv { display: contents; }
.dbg-kv .k { color: var(--muted); white-space: nowrap; }
.dbg-kv .v { word-break: break-all; }
.dbg-kv.bad .v { color: var(--neg); font-weight: 700; }

.dbg-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--line); margin-bottom: 4px; }
.dbg-acts button, .dbg-acts a { font: inherit; font-size: 11px; padding: 3px 9px;
  border-radius: 5px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); cursor: pointer; text-decoration: none; }

.dbg-list { display: flex; flex-direction: column; gap: 5px; }
.dbg-row { border-left: 3px solid var(--line); padding: 3px 0 3px 7px; }
.dbg-row.lv-error, .dbg-row.lv-critical { border-left-color: var(--neg); }
.dbg-row.lv-warning { border-left-color: var(--warn); }
.dbg-head { display: flex; gap: 6px; align-items: baseline; cursor: pointer;
  font-size: 10.5px; color: var(--muted); }
.dbg-lv { font-weight: 700; }
.dbg-row.lv-error .dbg-lv, .dbg-row.lv-critical .dbg-lv { color: var(--neg); }
.dbg-row.lv-warning .dbg-lv { color: var(--warn); }
.dbg-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-msg { font-size: 11.5px; line-height: 1.45; word-break: break-word; }
.dbg-exc { font-size: 10.5px; line-height: 1.4; background: var(--bg); margin: 4px 0 0;
  padding: 6px; border-radius: 5px; overflow: auto; max-height: 220px; white-space: pre; }

/* ── 디버깅 모드일 때의 상단 바 ──────────────────────────────────────
   사용자: "디버깅 모드일 때 내가 확 알아차릴 수 있게 네비게이션 메뉴바의 색상을
   배경과 보색으로 눈에 확 띄게 바꿔줘. 다른 글자 시인성도 고려해서."

   브랜드가 파랑 계열(--brand)이라 보색인 **호박색**을 쓴다. 경고 색(빨강)과도, 정상
   색(초록)과도 겹치지 않아 "고장" 이 아니라 "지금 들여다보는 중" 으로 읽힌다.

   색은 **테마마다 그 테마 브랜드색의 보색**이다(사용자 요청, 2026-09-10) — 파랑 테마는
   호박색, 주황(light-warm)은 청록, 초록(dark-black)은 분홍. 배경·글자·호버·활성 네 쌍을
   테마 블록의 --dbg-* 토큰으로 두고 여기서는 토큰만 쓴다. 어두운 테마는 바가 페이지보다
   밝아서 더 눈에 띈다 — 그게 목적이다.

   `.topbar` 자체에는 `color` 를 걸지 않는다 — 걸면 그 안의 계정·알림 드롭다운
   글자까지 갈색이 되어 흰 패널 위에서 읽기 나빠진다. 바에 직접 놓인 것만 고른다. */
/* 테마별 보색 — 배경 / 글자 / 호버 배경 / 호버 글자 / 활성 배경 / 활성 글자 / 밑줄 */
:root {                                   /* light: 브랜드 파랑 → 호박 */
  --dbg-bar: #f6b73c; --dbg-fg: #2c1c00; --dbg-hover: rgba(0, 0, 0, .12); --dbg-hover-fg: #1a1000;
  --dbg-active: #2c1c00; --dbg-active-fg: #ffd98a; --dbg-line: #7a4b00; }
:root[data-theme="light-warm"] {          /* 브랜드 주황 → 청록 */
  --dbg-bar: #5fc9c2; --dbg-fg: #062b29; --dbg-hover: rgba(0, 0, 0, .12); --dbg-hover-fg: #031a18;
  --dbg-active: #062b29; --dbg-active-fg: #c8f5f1; --dbg-line: #0f5e59; }
:root[data-theme="dark"] {                /* 브랜드 밝은 파랑 → 호박(어두운 페이지 위라 조금 진하게) */
  --dbg-bar: #e0a232; --dbg-fg: #1f1300; --dbg-hover: rgba(0, 0, 0, .18); --dbg-hover-fg: #000000;
  --dbg-active: #1f1300; --dbg-active-fg: #ffd98a; --dbg-line: #5c3a00; }
:root[data-theme="dark-black"] {          /* 브랜드 초록 → 분홍 */
  --dbg-bar: #e07ab8; --dbg-fg: #2a0a1f; --dbg-hover: rgba(0, 0, 0, .16); --dbg-hover-fg: #12040d;
  --dbg-active: #2a0a1f; --dbg-active-fg: #ffd1ea; --dbg-line: #7a1f56; }

body.dbg-on .topbar { background: var(--dbg-bar); border-bottom: 2px solid var(--dbg-line); }
body.dbg-on .topbar .brand,
body.dbg-on .topbar nav > a,
body.dbg-on .topbar .nav-sub-btn,
body.dbg-on .topbar .hamburger-btn,
body.dbg-on .topbar .topbar-icon-btn,
body.dbg-on .topbar .notif-btn { color: var(--dbg-fg); }
body.dbg-on .topbar nav > a:hover,
body.dbg-on .topbar .nav-sub-btn:hover,
body.dbg-on .topbar .topbar-icon-btn:hover,
body.dbg-on .topbar .notif-btn:hover { background: var(--dbg-hover); color: var(--dbg-hover-fg); }
/* 활성 항목은 반대로 뒤집는다 — 보색 바 위에 브랜드색을 얹으면 탁해 보인다 */
body.dbg-on .topbar nav > a.active,
body.dbg-on .topbar .nav-sub-btn.active { background: var(--dbg-active); color: var(--dbg-active-fg); }
/* 드롭다운(종목·거래 등)은 바가 아니라 테마색 패널이다 — 바의 글자색을 물려받으면
   어두운 테마에서 검은 글자가 검은 패널 위에 놓여 안 보였다(실제 스크린샷). 패널은 테마 그대로. */
body.dbg-on .topbar .nav-sub-menu a { color: var(--text); }
body.dbg-on .topbar .nav-sub-menu a:hover { background: var(--bg); color: var(--text); }
body.dbg-on .topbar .nav-sub-menu a.active { background: var(--brand); color: var(--on-brand); }
/* 계정 버튼 테두리도 바 위에서 보이게 */
body.dbg-on .topbar .account-btn { border-color: rgba(0, 0, 0, .28); color: var(--dbg-fg); }
/* 호버 배경은 테마 --bg(어두운 테마에선 검정)라 바 글자색(검정)을 그대로 두면 사라진다 — 테마 글자색으로 */
body.dbg-on .topbar .account-btn:hover { background: var(--bg); color: var(--text); }
body.dbg-on .topbar .notif-dot { border-color: var(--dbg-bar); }