/* 카카오뱅크풍 모바일 우선 디자인 */
:root {
  --yellow: #ffe300;
  --yellow-dark: #f5d800;
  --ink: #191919;
  --gray-9: #333;
  --gray-6: #767678;
  --gray-3: #d9d9dc;
  --gray-5: #b8b8be;
  --gray-2: #ececee;
  --gray-1: #f4f4f6;
  --white: #fff;
  --red: #f04452;
  --blue: #3182f6;
  /* 매수(상승)=빨강 / 매도(하락)=파랑 — 시맨틱 별칭. --red/--blue 를 참조하므로
     다크 모드에서 --red/--blue 가 재정의되면 자동으로 따라간다(별도 재정의 불필요).
     이전엔 미정의라 템플릿의 var(--up,#f04452) 폴백이 라이트 색으로 고정됐다. */
  --up: var(--red);
  --down: var(--blue);
  --warn: #c8860a;       /* 경고(주의) 앰버 — 하드코딩 #c8860a 대체, 다크에서 밝게 */
  --lnb-w: 260px;        /* 좌측 메뉴(LNB) 폭 — 드래그로 조절·localStorage 고정, 전 화면 공통 */
  --radius: 18px;
  --hl: #fffbe0;         /* 선택·강조 배경 (연노랑) */
  --badge-up-bg: #fff4d6; --badge-up-fg: #b47d00;   /* 단기 */
  --badge-mid-bg: #e8f3ff; --badge-mid-fg: #3182f6; /* 중기 */
  --badge-on-bg: #e9f9ee; --badge-on-fg: #1aa053;   /* 작동/장기 */
  --badge-red-bg: #fdecee; --badge-red-fg: #f04452; /* 초단기 */
  --badge-ind-bg: #eef1ff; --badge-ind-fg: #4a55c7; /* 지표 */
}

/* 다크 모드: 시맨틱 변수만 재정의 (data-theme="dark" 또는 시스템 설정) */
:root[data-theme="dark"] {
  --ink: #ededed;
  --gray-9: #d0d0d2;
  --gray-6: #9a9aa0;
  --gray-3: #3a3a3f;
  --gray-5: #6a6a70;
  --gray-2: #2a2a30;
  --gray-1: #1c1c20;
  --white: #26262b;   /* 카드/표면 */
  --red: #ff6b76;
  --blue: #5a9dff;
  --yellow-dark: #d4bd00;
  --warn: #e8b04a;
  /* 강조/뱃지: 어두운 배경 + 밝은 글자로 대비 확보 */
  --hl: #3a3320;
  --badge-up-bg: #4a3d16; --badge-up-fg: #f5c451;
  --badge-mid-bg: #1c3350; --badge-mid-fg: #7cb4ff;
  --badge-on-bg: #1c3d2a; --badge-on-fg: #5fd08a;
  --badge-red-bg: #4d2429; --badge-red-fg: #ff8a92;
  --badge-ind-bg: #262a4d; --badge-ind-fg: #9aa5ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ededed;
    --gray-9: #d0d0d2;
    --gray-6: #9a9aa0;
    --gray-3: #3a3a3f;
    --gray-5: #6a6a70;
    --gray-2: #2a2a30;
    --gray-1: #1c1c20;
    --white: #26262b;
    --red: #ff6b76;
    --blue: #5a9dff;
    --yellow-dark: #d4bd00;
  --warn: #e8b04a;
    --hl: #3a3320;
    --badge-up-bg: #4a3d16; --badge-up-fg: #f5c451;
    --badge-mid-bg: #1c3350; --badge-mid-fg: #7cb4ff;
    --badge-on-bg: #1c3d2a; --badge-on-fg: #5fd08a;
    --badge-red-bg: #4d2429; --badge-red-fg: #ff8a92;
    --badge-ind-bg: #262a4d; --badge-ind-fg: #9aa5ff;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: var(--gray-1);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* 스크롤 영역 식별 — 스크롤바를 또렷이 보이게(어느 영역이 스크롤되는지 인지) */
* { scrollbar-width: thin; scrollbar-color: var(--gray-5, #b8b8be) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-5, #b8b8be); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-6, #767678); }
::-webkit-scrollbar-track { background: transparent; }
/* 내부 스크롤 컨테이너는 은은한 배경 + 안쪽 테두리로 '스크롤되는 영역'임을 표시 */
.scroll-area, .strat-grid, .mon-dock .dock-body {
  background: var(--gray-1); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--gray-3); padding: 6px;
}

/* 금액·수치는 등폭 숫자로 자릿수 비교가 쉽게 */
.num, .stat .num, .w-stat .num, .sheet-table td, .val-col .num,
.up, .down { font-variant-numeric: tabular-nums; }

/* 로딩 스켈레톤 */
.skeleton {
  background: linear-gradient(90deg, var(--gray-1) 25%, var(--gray-3) 37%, var(--gray-1) 63%);
  background-size: 400% 100%;
  animation: skel 1.4s ease infinite;
  border-radius: 8px;
  color: transparent !important;
}
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* skel-line 자체가 쉬머를 갖도록 — .skeleton 없이 <div class="skel-line"> 만으로도 로딩 표시 */
.skel-line { height: 14px; margin: 8px 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--gray-1) 25%, var(--gray-3) 37%, var(--gray-1) 63%);
  background-size: 400% 100%; animation: skel 1.4s ease infinite; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.skel-line.w80 { width: 80%; }
/* 카드형 스켈레톤 묶음 (목록 로딩 자리표시) */
.skel-card { padding: 14px 16px; border: 1px solid var(--gray-2); border-radius: 12px; margin-bottom: 10px; }

/* 로딩 스피너 (조회·위젯 로딩 표현) */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--gray-3);
  border-top-color: var(--yellow-dark, #b39700);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.spinner.lg { width: 26px; height: 26px; border-width: 3px; }
.loading-row { display: flex; align-items: center; gap: 8px; padding: 14px 12px; color: var(--gray-6); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 실시간 갱신 표시 (홈 '실시간 · HH:MM 기준') */
.live-dot-sm {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #12b886; margin-right: 5px; vertical-align: middle;
  animation: live-pulse-sm 2s infinite;
}
@keyframes live-pulse-sm {
  0%   { box-shadow: 0 0 0 0 rgba(18, 184, 134, 0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(18, 184, 134, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 184, 134, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot-sm { animation: none; } }

/* 당겨서 새로고침 표시기 */
#ptrInd {
  position: fixed; top: -4px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; opacity: 0; pointer-events: none;
}
#ptrInd .spinner { border-top-color: var(--gray-6); }
#ptrInd.ready .spinner { border-top-color: var(--blue); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* 차트 공통 로딩 오버레이 — 모든 차트 영역 동일 표현 (chartLoading 헬퍼가 부착) */
.chart-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* 환영 화면 항목 */
.wc-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--gray-1); }
.wc-item:last-child { border-bottom: none; }
.wc-emoji { font-size: 28px; flex: none; }
.wc-item b { display: block; margin-bottom: 3px; }
.wc-item p { font-size: 13px; line-height: 1.5; }

/* 빈 상태 */
.empty-state { text-align: center; padding: 28px 20px; }
.empty-state .emoji { font-size: 40px; display: block; margin-bottom: 10px; }
.empty-state .msg { color: var(--gray-6); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

/* 접근성: 키보드 포커스 링 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  /* 하단 120px: 고정 탭바(~66px+safe-area)에 마지막 입력/버튼이 걸리지 않게.
     96px 일 때 관리자처럼 긴 화면의 최하단 요소가 최대 스크롤에서도 ~30px 가려졌다. */
  padding: 20px 20px 120px;
}
/* 고정 헤더가 있으면 바디를 그 아래에서 시작 */
.app-header ~ .app { padding-top: 74px; }
.embed .app { padding-top: 20px; }

/* 예시 박스 — 설명문은 잘 안 읽히지만 "내 돈이 어떻게 되는지"의 예시는 읽힌다.
   그래서 회색 잔글씨(.muted)로 두지 않고 눈에 띄는 블록으로 뺀다. 숫자는 화면이
   사용자의 실제 자산으로 계산해 채운다 — 남의 예시는 자기 일로 안 읽히기 때문이다. */
.ex {
  display: block; margin-top: 7px; padding: 9px 11px;
  border-radius: 9px; background: var(--hl); border-left: 3px solid var(--blue);
  font-size: 12.5px; line-height: 1.6; color: var(--ink);
}
.ex-tag {
  display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 800; vertical-align: 1px;
}
.ex b { font-weight: 800; }
/* 허브 탭 iframe: 부모가 높이를 내용에 맞춰 준다. 이때 min-height:100vh 가 남아 있으면
   '프레임 높이 → 100vh → 본문 높이 → 프레임 높이' 로 되먹여 한 번 커진 높이가 안 줄어든다. */
.embed-fit .app { min-height: 0; }

h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
h2 { font-size: 18px; font-weight: 700; margin: 24px 0 12px; }
.sub { color: var(--gray-6); font-size: 14px; line-height: 1.5; }

/* 카드 */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.card.tap { cursor: pointer; transition: transform 0.08s; }
.card.tap:active { transform: scale(0.98); }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* 라벨(좌)·값(우) 행 정렬 일관화: 값(마지막 요소)은 우측 정렬(여러 줄도), 라벨(첫 요소)은
   길면 줄어들게 — 카드마다 값 열이 오른쪽에 가지런히 맞도록. (2개 이상 자식일 때만) */
.card-row > :last-child:not(:first-child) { text-align: right; }
.card-row > :first-child { min-width: 0; }

/* 버튼 */
.btn {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--gray-1);
  transition: filter 0.1s;
}
.btn:active { filter: brightness(0.94); }
/* 노란 버튼은 항상 밝은 배경이므로 글자는 테마와 무관하게 진하게 고정 (다크모드 흰 글자 방지) */
.btn-primary { background: var(--yellow); color: #191919; }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-sm { width: auto; padding: 8px 14px; font-size: 13px; border-radius: 10px; }
/* 버튼 묶음 정렬 — .btn 이 display:block 이라 그냥 두면 세로로 쌓인다. 가로 줄바꿈 정렬 */
.admin-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-danger { background: var(--badge-red-bg); color: var(--red); }
.btn:disabled { opacity: 0.4; cursor: default; }
/* 더 보기 버튼 (목록 확장) */
.more-btn {
  background: transparent; color: var(--gray-6);
  border: 1px solid var(--gray-3); border-radius: 12px;
  padding: 11px; font-size: 14px; font-weight: 600;
}

/* 입력 */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--gray-6); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--gray-3);
  border-radius: 12px;
  font-size: 16px;
  background: var(--white);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); }

/* 폼 요소는 브라우저 기본 글자색(검정)을 상속하지 않으므로 명시적으로 테마색 지정.
   (다크모드에서 입력 글자가 검정으로 나와 안 보이던 문제 방지) */
input, select, textarea { color: var(--ink); }
/* 배경도 테마색으로 고정 — 안 그러면 인라인 스타일 등에서 배경이 브라우저 기본(흰색)이 돼
   다크모드에서 흰 배경 + 밝은 글자로 안 보인다. 체크박스·라디오는 기본 모양 유지 위해 제외 */
input:not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: var(--white); }
/* iOS Safari 는 폰트<16px 인 입력에 포커스하면 화면을 확대(줌인)한다 — 지표 설정 등
   인라인 스타일 입력이 이 값을 안 줘 확대됐다. 모바일에서 모든 입력에 16px 하한을
   둬 포커스 줌인을 원천 차단(레이아웃 폭은 그대로, 글자만 16px). */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(16px, 1em); }
}
input::placeholder, textarea::placeholder { color: var(--gray-6); opacity: 1; }
/* 네이티브 컨트롤(셀렉트 화살표 등)이 테마에 맞게 렌더되도록 */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* 뱃지/태그 */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gray-1);
  color: var(--gray-6);
}
.badge.h-초단기 { background: var(--badge-red-bg); color: var(--badge-red-fg); }
.badge.h-단기 { background: var(--badge-up-bg); color: var(--badge-up-fg); }
.badge.h-중기 { background: var(--badge-mid-bg); color: var(--badge-mid-fg); }
.badge.h-장기 { background: var(--badge-on-bg); color: var(--badge-on-fg); }
.badge.on { background: var(--badge-on-bg); color: var(--badge-on-fg); }
.badge.off { background: var(--gray-1); color: var(--gray-6); }
.badge.composite { background: #2b2b30; color: var(--yellow); }
.badge.ind { background: var(--badge-ind-bg); color: var(--badge-ind-fg); }

/* 종목명 자동완성 */
.stock-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  z-index: 85;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
}
.stock-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-1);
  font-size: 14px;
}
.stock-suggest-item:last-child { border-bottom: none; }
.stock-suggest-item:hover, .stock-suggest-item:active { background: var(--gray-1); }
.stock-suggest-item span { color: var(--gray-6); font-size: 12px; }

/* 데모/모의/실전 모드 배지 */
.mode-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}
.mode-badge.demo { background: var(--gray-1); color: var(--gray-6); border: 1.5px dashed var(--gray-3); }
.mode-badge.paper { background: var(--badge-mid-bg); color: var(--badge-mid-fg); }
.mode-badge.real { background: var(--badge-red-bg); color: var(--badge-red-fg); }

/* 차트 시뮬레이션 헤더: 제목이 길어도 재생 컨트롤이 가려지지 않게 줄바꿈 */
#simBox .card-row, #botSimBox .card-row { flex-wrap: wrap; row-gap: 8px; }
#simBox .card-row > b, #botSimBox .card-row > b { flex: 1 1 100%; }
#simBox .card-row > div, #botSimBox .card-row > div {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
#simBox .card-row .btn-sm, #botSimBox .card-row .btn-sm { flex: none; }

/* 차트 시뮬레이션 상태 */
.sim-status { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-stat {
  background: var(--gray-1);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.sim-stat span { color: var(--gray-6); font-size: 11px; }

/* 시뮬레이터 여러 종목 동시 비교 격자 (멀티차트) */
.sim-multi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.sim-multi-grid:empty { display: none; }
.smc { background: var(--white); border: 1px solid var(--gray-3); border-radius: 12px; padding: 10px; min-width: 0; }
.smc-head { margin-bottom: 4px; }
.smc-chart { width: 100%; display: block; }
/* 여러 종목 + 진입신호: '지금' 신호가 난 카드를 테두리·글로우로 강조 (매수=빨강·매도=파랑,
   수동 주문 바와 같은 색 관례). 신호가 사라지면 클래스가 벗겨져 원래 테두리로 돌아온다. */
.smc-sig-buy { border-color: var(--red); box-shadow: 0 0 0 1.5px var(--red), 0 2px 12px rgba(240, 68, 82, 0.28); }
.smc-sig-sell { border-color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue), 0 2px 12px rgba(49, 130, 246, 0.28); }

/* 과적합 검증 비교 */
.val-compare { display: flex; gap: 10px; }
.val-col {
  flex: 1;
  background: var(--gray-1);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.val-col .num { font-size: 20px; font-weight: 800; margin: 6px 0 4px; }
.val-col p { font-size: 11px; }

.filter-row { margin-top: 8px; }
.filter-label { font-size: 12px; color: var(--gray-6); font-weight: 700; }
.mini-sort {
  padding: 8px 12px;
  border: 1.5px solid var(--gray-3);
  border-radius: 10px;
  font-size: 13px;
  background: var(--white);
}

.up { color: var(--red); }
.down { color: var(--blue); }

/* 하단 네비게이션 */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  z-index: 100;
  background: var(--white);   /* color-mix 미지원 폴백 */
  background: color-mix(in srgb, var(--white) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--gray-2);
  padding: 7px 6px max(7px, env(safe-area-inset-bottom));
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--gray-6);
  text-decoration: none;
  font-weight: 600;
  padding: 3px 0;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 라인 아이콘(현재색 stroke) — 모던 미니멀. 활성 시 브랜드색 */
.nav-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.nav-icon svg { width: 25px; height: 25px; display: block; stroke: currentColor; fill: none; }
.nav-item.active { color: var(--blue); }
.nav-item:active { transform: translateY(1px); }
/* 가운데 FAB — 라운드 스퀘어 + 브랜드 그라디언트 + 부양감(모던) */
.nav-cta .nav-icon {
  width: 48px; height: 48px; margin-top: -20px; border-radius: 16px;
  background: linear-gradient(135deg, #ffe94f 0%, #f5c400 100%);
  box-shadow: 0 6px 16px rgba(240,196,0,.42), 0 2px 4px rgba(0,0,0,.15);
  color: #1b1b20;
}
.nav-cta .nav-icon svg { width: 24px; height: 24px; stroke: #1b1b20; stroke-width: 2.4;
  transition: transform .22s ease; }
.nav-cta.fab-open .nav-icon svg { transform: rotate(45deg); }   /* + → × */
.nav-cta.fab-open .nav-icon { box-shadow: 0 3px 10px rgba(240,196,0,.5); }
button.nav-item { background: none; border: none; cursor: pointer; font: inherit; }

/* 하단 가운데 버튼 래디얼(부채꼴) 확장 메뉴 — 네이버 그린닷 스타일 */
.fab-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 90; opacity: 0; transition: opacity .2s; }
.fab-backdrop.show { opacity: 1; }
.fab-menu { position: fixed; left: 50%; bottom: 60px; width: 0; height: 0; z-index: 110; }
.fab-item {
  position: absolute; left: 0; bottom: 0;
  transform: translate(-50%, 0) scale(.3); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.25), opacity .18s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.fab-menu.open .fab-item {
  opacity: 1; pointer-events: auto;
  transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(1);
}
.fab-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--gray-3);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  display: grid; place-items: center; font-size: 24px;
}
.nav-cta.fab-open .nav-icon { transform: rotate(45deg); transition: transform .25s; }

/* PIN 패드 */
.pin-screen { display: flex; flex-direction: column; min-height: 80vh; justify-content: center; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 28px 0 40px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gray-3); transition: background 0.1s; }
.pin-dot.filled { background: var(--ink); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pin-key {
  padding: 18px;
  font-size: 22px;
  font-weight: 700;
  border: 1px solid var(--gray-3);   /* 다크모드에서 버튼 윤곽이 보이게 */
  background: var(--gray-1);
  color: var(--ink);                 /* 검정 고정이 아니라 테마 글자색 */
  border-radius: 14px;
  cursor: pointer;
}
.pin-key:active { background: var(--gray-3); }

/* 위자드 */
.wizard-progress { display: flex; gap: 6px; margin-bottom: 24px; }
.wizard-progress .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--gray-3); }
.wizard-progress .bar.done { background: var(--yellow-dark); }
.wizard-step { display: none; }
.wizard-step.active { display: block; }

.choice {
  border: 1.5px solid var(--gray-3);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--white);
}
.choice.selected { border-color: var(--ink); background: var(--hl); }
.choice .name { font-weight: 700; margin-bottom: 3px; }
.choice .desc { font-size: 13px; color: var(--gray-6); line-height: 1.45; }

/* 리스트 */
.list-item { padding: 14px 0; border-bottom: 1px solid var(--gray-1); }
.list-item:last-child { border-bottom: none; }
.w-click { cursor: pointer; border-radius: 8px; transition: background 0.08s; }
.w-click:active { background: var(--gray-1); }

/* 탭 */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; }
.tab {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-6);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.tab.active { background: var(--ink); color: var(--white); }

/* 로딩 스피너 (차트 등 영역 오버레이 공용) */
.spin {
  width: 22px; height: 22px; flex: none;
  border: 3px solid var(--gray-3); border-top-color: var(--blue);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chart-busy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(128, 128, 132, 0.14);
  font-size: 13px; color: var(--gray-6); border-radius: 10px;
}

/* 전략 카드 그리드 (모니터·시뮬 공용) */
.strat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 8px; }
.strat-card { text-align: left; background: var(--gray-1); border: 1.5px solid var(--gray-3);
  border-radius: 12px; padding: 9px 11px; cursor: pointer; transition: border-color .12s, background .12s;
  display: flex; flex-direction: column; min-height: 116px; touch-action: manipulation; }
  /* min-height: 추천 사유 줄 등 내용이 늘면 카드도 늘어야 클릭영역=보이는영역 (고정 height 는
     내용이 넘쳐 아래 카드 위로 겹쳐 '옆 카드가 눌리는' off-by-one 을 유발했음) */
.strat-card:hover { border-color: var(--gray-5, #b8b8be); }
.strat-card.selected { border-color: var(--blue); background: var(--blue-weak, rgba(49,130,246,.10)); }
.strat-card .sc-top { display: flex; align-items: center; gap: 6px; }
.strat-card .sc-top b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strat-card .sc-icon { font-size: 15px; flex: none; }
.strat-card .sc-sum { font-size: 11.5px; color: var(--gray-6); margin: 5px 0 6px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strat-card .sc-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.sc-b { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--gray-2); color: var(--gray-6); }
/* 다중 선택 순서 배지 — 첫 선택(주 전략)과 확인전략 구분 */
.strat-card { position: relative; }
.sc-ord { position: absolute; top: -9px; right: 8px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--blue); color: #fff; }
/* 확인 배지는 눌러서 주 전략으로 승격하는 버튼 — 클릭 가능해 보이게 + 터치 타깃 확보 */
.sc-ord-btn { cursor: pointer; background: var(--gray-6); }
.sc-ord-btn:hover { background: var(--blue); }
.sc-b.risk-low { background: rgba(26,160,83,.16); color: #1aa053; }
.sc-b.risk-mid { background: rgba(180,125,0,.16); color: #b47d00; }
.sc-b.risk-high { background: rgba(240,68,82,.16); color: #f04452; }

/* 토스트 */
#toast {
  position: fixed;
  bottom: 100px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 200;  /* 시트(105)·다이얼로그(110) 위 — 시트 안에서 뜬 토스트도 보이게 */
  max-width: 90%;
  text-align: center;
}
#toast.show { opacity: 1; }

/* 맨 위로 가기 버튼 */
#scrollTopBtn {
  position: fixed; right: 16px; bottom: 84px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--gray-3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 20px; font-weight: 700; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#scrollTopBtn.show { opacity: 1; pointer-events: auto; }

/* 공통 확인·알림 다이얼로그 (네이티브 confirm/alert 대체) */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dialog {
  background: var(--white); color: var(--ink);
  border-radius: 18px; padding: 22px 20px 16px;
  width: 100%; max-width: 360px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.15s ease;
}
@keyframes dialog-pop { from { transform: scale(0.96); opacity: 0.5; } to { transform: none; opacity: 1; } }
.dialog-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.dialog-msg { color: var(--gray-6); font-size: 14px; line-height: 1.6; margin-bottom: 18px; white-space: pre-line; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-btn { flex: 1; padding: 13px; font-size: 15px; }
/* 실전(실계좌) 진입 재확인 다이얼로그 본문 */
.rg { text-align: left; }
.rg-warn { color: var(--badge-red-fg); font-weight: 700; font-size: 14px; margin: 0 0 10px; }
.rg-list { margin: 0 0 10px; padding-left: 18px; color: var(--gray-6); font-size: 13.5px; line-height: 1.7; }
.rg-list li { margin: 2px 0; }
.rg-hint { color: var(--gray-7); font-size: 13px; font-weight: 600; margin: 0; }

/* 바텀시트 모달 (긴 화면 대신 결과를 오버레이로) */
.sheet-modal {
  position: fixed; inset: 0; z-index: 105;  /* 하단 네비(100) 위 — 시트 버튼이 네비에 가리지 않게 */
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  overscroll-behavior: contain;  /* 배경으로 스크롤 전파 차단 */
}
.sheet-modal .sheet-panel {
  background: var(--gray-1); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  overscroll-behavior: contain;  /* 시트 스크롤이 끝에 닿아도 뒤 배경이 딸려 스크롤되지 않게 */
  -webkit-overflow-scrolling: touch;
  border-radius: 20px 20px 0 0;
  /* iOS 홈 인디케이터·하단 여백 확보 — 마지막 버튼이 화면 밖/세이프에어리어에 가리지 않게 */
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  animation: sheet-up 0.2s ease;
}
/* 바텀시트가 열려 있는 동안 뒤 배경(페이지)의 스크롤을 잠근다 — 시트 확장 영역과 배경
   스크롤 영역이 겹쳐 스크롤이 안 되거나 배경이 딸려 움직이는 문제 방지.
   공용 openBottomSheet(클래스만 존재)·인라인 시트(.hidden 토글) 모두 커버한다. */
html:has(.sheet-modal:not(.hidden)) { overflow: hidden; }
html:has(.sheet-modal:not(.hidden)) body { overflow: hidden; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-head {
  position: sticky; top: 0; background: var(--gray-1); z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0 11px; margin-bottom: 8px;
  border-bottom: 1.5px solid var(--gray-3);  /* 다크모드에서도 헤더/본문 구분 */
}
.sheet-head::before {  /* 상단 그래버 핸들 — 시트 헤더임을 시각적으로 강조 */
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 3px; background: var(--gray-5, #b8b8be);
}
.sheet-head b { font-size: 16px; font-weight: 800; }
.sheet-x { background: none; border: none; font-size: 20px; color: var(--gray-6); cursor: pointer; padding: 4px 8px; }

/* 위젯 대시보드는 PC 전용 — 모바일 폭에서는 메뉴에서 숨긴다 */
@media (max-width: 999px) { .pc-only { display: none !important; } }

/* 오늘의 포착 배지: 폰에서는 정보 밀도가 높아 배지 크기·간격만 줄여 가독 개선(배지는 그대로 유지) */
@media (max-width: 560px) {
  .sc-badges { gap: 4px !important; }
  .sc-badges .sc-b { font-size: 9px; padding: 1px 5px; }
}

/* 마우스 포인터 환경에서만 hover 피드백 — 터치에서 sticky-hover 방지 */
@media (hover: hover) and (pointer: fine) {
  .card.tap:hover,
  .w-click:hover,
  .stat.tap:hover,
  .list-item.w-click:hover { background: var(--gray-1); }
  .card.tap:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
}

/* PC 전폭 화면: 모바일 하단바를 감추고, 목록형 화면은 폭을 넓혀 그리드로.
   (대시보드 드로어는 500px라 여기 안 걸림 — 전체 페이지 이동 시에만 적용) */
@media (min-width: 1000px) {
  .bottom-nav { display: none; }
  .app-header ~ .app { padding-bottom: 40px; }
  .app.wide { max-width: 1080px; }
  /* 상시 사이드바(PC 셸)에선 남는 폭이 커서 1080px 이 '모바일 카드 스택'처럼 좁아 보인다 —
     넓은 화면 목록(봇·관심종목 등)은 그리드가 3~4열로 펼쳐지게 상한을 올린다. */
  body.has-nav .app.wide { max-width: 1440px; }
  /* 폼·단계형(위저드·봇 관리)은 넓게 늘리면 오히려 읽기 나쁘다 — PC 에선 480px
     모바일폭 대신 편안한 중간 폭으로 (사이드바 옆 가운데 정렬). */
  .app.mid { max-width: 720px; }
  .app.wide .grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px; align-items: start;
  }
  .app.wide .grid-list .card { margin-bottom: 0; }
  .app.wide .grid-list .more-btn { grid-column: 1 / -1; }

  /* 설정: 섹션 묶음을 2열 메이슨리로 — 접힌 기본 상태에서 높이 균형이 좋다 */
  .app.wide .settings-cols { column-count: 2; column-gap: 20px; }
  .app.wide .settings-cols > .card,
  .app.wide .settings-cols > .acc { break-inside: avoid; }
  .app.wide .settings-cols > h2 { break-after: avoid; }
  .app.wide .settings-cols > h2:first-child { margin-top: 0; }

  /* 종목 상세: 백테스트 설정(좌)·결과(우) 2단 워크스페이스 */
  .app.wide .bt-cols {
    display: grid;
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
    gap: 16px; align-items: start;
  }
  .app.wide .bt-cols > .card { margin-bottom: 0; }

  /* PC 상시 사이드바 — 로그인 상태의 전체 페이지 이동 화면에서 LNB를 고정 노출.
     대시보드(별도 .dash-body)·드로어 임베드(.embed)·로그인 전(has-nav 없음)은 제외. */
  html:not(.embed) body.has-nav .lnb {
    left: 0; width: var(--lnb-w); max-width: var(--lnb-w);
    transition: width 0.18s ease;   /* 더블클릭 펼치기 부드럽게(드래그 중엔 .resizing 으로 끔) */
    box-shadow: none; border-right: 1px solid var(--gray-3);
  }
  html:not(.embed) body.has-nav .lnb-btn,
  html:not(.embed) body.has-nav .lnb-close { display: none; }
  html:not(.embed) body.has-nav .lnb-backdrop { display: none !important; }
  /* 헤더·본문을 사이드바 폭만큼 오른쪽으로 (헤더는 우측 전폭으로 정렬) */
  html:not(.embed) body.has-nav { padding-left: var(--lnb-w); }
  /* PC 셸의 본문 기본 폭 — 모바일 기둥(480px)이 데스크탑에서 그대로 보이던 문제.
     wide(1080)·mid(720) 지정 페이지는 기존 폭 유지, 그 외 기본 페이지만 넓힌다. */
  html:not(.embed) body.has-nav .app:not(.wide):not(.mid) { max-width: 760px; }
  html:not(.embed) body.has-nav .app-header {
    left: var(--lnb-w); right: 0; max-width: none; margin: 0;
  }
}

/* 장 운영 상태 배너 */
.status-banner {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--badge-on-bg); color: var(--badge-on-fg);
  border-radius: 12px; font-size: 13px;
}
.status-banner.closed { background: var(--gray-1); color: var(--gray-6); }
.status-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; opacity: 0.7; }
.status-banner b { font-weight: 700; }
.status-banner .muted { margin-left: auto; }

.stat-row { display: flex; gap: 10px; }
/* min-width:0 + 줄바꿈 허용: 긴 손익 숫자(+2,293,980)가 타일을 밀어
   행이 화면 밖으로 잘리던 문제 — 좁으면 타일 안에서 두 줄로 접힌다 */
.stat { min-width: 0; }
.stat .num { overflow-wrap: anywhere; }
.stat {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat .num { font-size: 20px; font-weight: 800; }
.stat .lbl { font-size: 12px; color: var(--gray-6); margin-top: 2px; }
/* 홈 상단 요약 타일은 히어로 카드·아래 목록과 같은 좌측 정렬로 세로 흐름 통일
   (리포트 3분할 KPI 등 다른 .stat 은 비교용 중앙 정렬 유지) */
.stat-row.stat-lead .stat { text-align: left; }

/* 툴팁 (ⓘ 아이콘 — 탭/호버로 설명 표시) */
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gray-3);
  color: var(--gray-9);
  font-size: 10px;
  font-weight: 800;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  user-select: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 25, 25, 0.94);
  color: #f4f4f6;  /* 배경이 항상 어두우므로 밝게 고정 (다크모드에서 --white 가 어두워지는 문제 방지) */
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 10px;
  width: max-content;
  max-width: 230px;
  white-space: normal;
  text-align: left;
  display: none;
  z-index: 60;
}
.tip:hover::after, .tip.show::after { display: block; }

/* 용어 사전 항목 — ⓘ 와 함께 한 덩어리로 줄바꿈되지 않게 */
.gloss-term { white-space: nowrap; }
.gloss-term > .tip { margin-left: 2px; }

/* 아코디언 (details 기반 펼치기 메뉴) */
details.acc {
  background: var(--white);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
details.acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: "⌄";
  color: var(--gray-6);
  font-size: 16px;
  transition: transform 0.15s;
}
details.acc[open] > summary::after { transform: rotate(180deg); }
details.acc > .acc-body { padding: 0 20px 20px; }
details.acc summary .muted { font-weight: 400; }

/* 선택 칩 (프리셋/수량) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
/* 한 줄 가로 스크롤 칩 (관심·최근처럼 개수가 많은 목록의 세로 폭 절약) */
.chips-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.chips-row .chip { flex: 0 0 auto; white-space: nowrap; }
.chip {
  padding: 9px 14px;
  border: 1.5px solid var(--gray-3);
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-9);
  cursor: pointer;
}
.chip.selected { border-color: var(--yellow-dark); background: var(--yellow); color: #191919; }
.chip-desc { font-size: 12px; color: var(--gray-6); line-height: 1.5; min-height: 18px; }

/* 차트 */
.chart-tip {
  display: none;
  position: absolute;
  top: 8px;
  background: rgba(22, 22, 26, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);   /* 글래스 룩(모던) */
  /* 배경이 항상 어두우므로 글자는 테마와 무관하게 밝게 고정
     (--white 는 다크모드에서 카드색#26262b 로 바뀌어 어두운 글자가 돼 안 보였음) */
  color: #f4f4f6;
  font-size: 11.5px;
  line-height: 1.55;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.legend { display: flex; gap: 14px; margin: 8px 0 4px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray-6); font-weight: 600; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* 드로어(iframe) 임베드 모드: 하단 네비 없이 콘텐츠만 */
.embed .bottom-nav { display: none; }
.embed .app { padding-bottom: 24px; }
.embed .lnb-btn { display: none; }

/* 고정 헤더 (바디와 분리) */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  height: 56px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 0 20px;
  z-index: 72;
}
.app-title { font-size: 17px; font-weight: 800; }
.hdr-actions { display: flex; gap: 6px; }
.embed .app-header { display: none; }

/* 상단 알림 벨 + 알림 패널 */
.bell-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
}
.bell-btn:active { background: var(--gray-1); }
.bell-btn, .lnb-btn { display: inline-flex; align-items: center; justify-content: center; }
/* 헤더 아이콘 링크(새 자동매매·설정) — 벨/햄버거와 같은 톤 */
.hdr-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; color: var(--gray-9); text-decoration: none; }
.hdr-ic .mi { width: 22px; height: 22px; color: var(--gray-9); stroke-width: 1.8; }
.hdr-ic:hover { background: var(--gray-1); }
.hdr-ic:hover .mi { color: var(--blue); }
/* 허브 탭 — 통합 페이지(내 자동매매+저널 · 포착+시장 · 종목+관심)의 상단 탭 바 */
.hub-tabs { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1.5px solid var(--gray-2); }
.hub-tab { border: none; background: none; padding: 9px 14px; font-size: 14.5px; font-weight: 700;
  color: var(--gray-6); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; }
.hub-tab.active { color: var(--ink); border-bottom-color: var(--blue); }
.hub-tab:hover { color: var(--ink); }
/* 높이는 프레임 안쪽이 알려 준 본문 높이로 app.js 가 맞춘다(내부 스크롤바 제거).
   아래 height 는 그 전/스크립트 실패 시의 대비값. min-height 는 두지 않는다 —
   내용이 짧을 때 프레임만 남아 빈 칸이 생긴다. */
.hub-frame { width: 100%; height: calc(100vh - 150px); border: 0; display: block; }
.bell-btn .mi, .lnb-btn .mi { width: 23px; height: 23px; color: var(--gray-9); stroke-width: 1.8; }
.bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-panel {
  position: fixed;
  top: 62px;
  right: 16px;
  left: 16px;
  max-width: 400px;
  margin-left: auto;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  z-index: 82;
  overflow: hidden;
}
.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-1);
  font-size: 14px;
}
.notif-head a { color: var(--gray-6); text-decoration: none; font-size: 13px; font-weight: 700; }
.notif-item { padding: 11px 16px; border-bottom: 1px solid var(--gray-1); font-size: 13px; }
.notif-item:last-child { border-bottom: none; }
.notif-item .nt { font-weight: 700; }
.notif-item .nb { color: var(--gray-6); font-size: 12px; margin-top: 2px; }
.notif-item .nts { color: var(--gray-6); font-size: 11px; float: right; }
.notif-item.unread { background: var(--hl); }
.notif-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.notif-act { flex: 1 1 auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--gray-3); border-radius: 8px;
  background: var(--white); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.notif-act:active { background: var(--gray-1); }
.notif-act-mon { background: var(--ink); color: var(--white); border-color: var(--ink); }
.embed .bell-btn, .embed .notif-panel { display: none; }

/* 좌측 LNB (펼침 메뉴) — 모바일·PC 공용 */
.lnb-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 19px;
  cursor: pointer;
}
.lnb-btn:active { background: var(--gray-1); }
.lnb-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.32); z-index: 94; }
.lnb {
  position: fixed;
  top: 0;
  bottom: 0; /* 100vh 대신 top/bottom 고정 — 모바일 주소창에서도 위아래 꽉 참 */
  left: -300px;
  width: var(--lnb-w);
  max-width: 82vw;
  background: var(--white);
  z-index: 96;
  transition: left 0.22s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.15);
  padding-bottom: env(safe-area-inset-bottom);
}
.lnb.open { left: 0; }
/* LNB 폭 조절 손잡이 — 우측 가장자리 그립(드래그로 메뉴↔본문 폭 조절, 저장됨). PC 도킹 시만 노출 */
.lnb-resize { position: absolute; top: 0; bottom: 0; right: -4px; width: 10px; cursor: ew-resize; z-index: 97; display: none; }
.lnb-resize::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 44px; border-radius: 3px; background: var(--gray-3); transition: background .15s, height .15s; }
.lnb-resize:hover::before, .lnb-resize.dragging::before { background: var(--blue); height: 72px; }
html:not(.embed) body.has-nav .lnb-resize { display: block; }
/* 드래그 중엔 폭 애니메이션 끔(즉시 추종).
   ★선택자를 이렇게 길게 쓰는 이유 — 폭 전이를 거는 쪽이 `html:not(.embed) body.has-nav .lnb`
   (명시도 0,3,2)라 `.lnb.resizing`(0,2,0) 으로는 **한 번도 이기지 못했다**. 그래서 드래그가
   0.18s 씩 늦게 따라오고, 저장폭 복원 때도 사이드바만 뒤늦게 넓어졌다(실측: 전이 계산값이
   .resizing 을 붙여도 그대로 width 0.18s). 같은 무게로 맞춰야 실제로 꺼진다. */
html:not(.embed) body.has-nav .lnb.resizing,
.lnb.resizing { transition: none; }
.lnb-resize:active::before { background: var(--blue); height: 88px; }   /* 누르는 순간 강한 피드백 */
/* LNB 상단 검색 — 종목 찾기(찾기) + 관심 담기(☆)를 한 줄로 통합. 다크모드 대비 확보 */
.lnb-search { display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--gray-3); align-items: center; }
.lnb-search input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; font-size: 14px;
  border: 1px solid var(--gray-3); border-radius: 10px; background: var(--gray-1); color: var(--ink); }
.lnb-search input::placeholder { color: var(--gray-6); }
.lnb-search input:focus { border-color: var(--blue); outline: none; }
.lnb-sb { flex: none; height: 42px; padding: 0 13px; border: 1px solid var(--gray-3); border-radius: 10px;
  background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap; }
.lnb-sb:hover { border-color: var(--blue); color: var(--blue); }
/* LNB 검색 결과 드롭다운(셀렉트) — 각 행: 이름·코드(이동) + ☆(관심 담기) */
.lnb-sr { border-bottom: 1px solid var(--gray-3); max-height: 44vh; overflow-y: auto; padding: 4px 0; }
.lnb-sr-row { display: flex; align-items: center; gap: 2px; padding: 0 8px 0 6px; }
.lnb-sr-go { flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--ink);
  padding: 9px 8px; cursor: pointer; border-radius: 8px; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnb-sr-go:hover { background: var(--gray-1); color: var(--blue); }
.lnb-sr-go .muted { font-size: 12px; }
.lnb-sr-star { flex: none; width: 40px; height: 40px; background: none; border: none; color: var(--gray-6);
  font-size: 18px; cursor: pointer; border-radius: 8px; }
.lnb-sr-star:hover, .lnb-sr-star.on { color: var(--yellow-dark); }
.lnb-sr-empty { padding: 12px 14px; color: var(--gray-6); font-size: 13px; }
.lnb-menu { flex: 1; overflow-y: auto; }
/* 카테고리 구분 라벨 — 배경 밴드 + 포인트 컬러로 메뉴 그룹이 한눈에 구분되게 */
/* 새 기능 배지 — 메뉴 항목 옆 작은 N 점. '새로운 기능' 항목의 점(lnb-wn-dot)은
   그 페이지를 한 번 보면 app.js 가 localStorage(wnSeen) 비교로 숨긴다. */
.lnb-new { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 999px;
  font-size: 9px; font-weight: 800; line-height: 1.3; vertical-align: 2px;
  background: var(--up, #f04452); color: #fff; }
.lnb-cat { padding: 8px 20px 7px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: var(--blue); background: var(--gray-1); border-top: 1px solid var(--gray-2);
  border-bottom: 1px solid var(--gray-2); margin-top: 4px; }
.lnb-cat:first-child { margin-top: 0; border-top: none; }
/* LNB 하단 푸터 — 유틸·가이드·계정 숏컷. 크고 또렷한 아이콘 버튼으로 잘 보이게(넓게) */
.lnb-foot { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); margin-top: auto;
  border-top: 1px solid var(--gray-3); background: var(--gray-1);
  display: flex; flex-direction: column; gap: 9px; }
.lnb-icons, .lnb-guide { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.lnb-guide { border-top: 1px dashed var(--gray-3); padding-top: 9px; }
.lnb-foot-lbl { display: block; width: 100%; font-size: 10.5px; font-weight: 800; color: var(--gray-6);
  letter-spacing: .3px; margin: 0 0 1px; }
/* 푸터 아이콘 버튼 — .lnb a 전체폭 행 스타일을 덮어 또렷한 정사각 버튼으로(테두리+대비) */
.lnb-foot .fi { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 40px; padding: 0; border: 1px solid var(--gray-3); border-radius: 10px;
  background: var(--card-bg, transparent); color: var(--ink); position: relative; font-size: 18px; gap: 0; }
.lnb-foot .fi .mi { width: 21px; height: 21px; color: var(--gray-7, #6a7280); }
.lnb-foot .fi:hover, .lnb-foot .fi.active { background: var(--hl); border-color: var(--blue); color: var(--blue); }
.lnb-foot .fi:hover .mi, .lnb-foot .fi.active .mi { color: var(--blue); }
.lnb-foot .fi .lnb-new { position: absolute; top: -3px; right: -3px; margin: 0; padding: 0 4px; font-size: 8px; }
.lnb-acct { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px;
  color: var(--gray-6); margin-top: 2px; }
.lnb-acct b { color: var(--ink); font-weight: 700; }
/* 메뉴 고정 버튼 */
.lnb-pin { border: none; background: none; font-size: 16px; cursor: pointer; padding: 4px 6px; opacity: .5; filter: grayscale(1); }
.lnb-pin.on { opacity: 1; filter: none; }

/* 상시 모드 배지 (실전/모의/가상) — 어느 화면에서든 '지금 어느 돈인지' 즉시 인지 */
.mode-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.mode-chip.mode-real { color: #fff; background: var(--red, #f04452); }
.mode-chip.mode-paper { color: var(--down, #3182f6); background: rgba(49,130,246,.12); border-color: rgba(49,130,246,.35); }
.mode-chip.mode-demo { color: var(--gray-6); background: var(--gray-1); border-color: var(--gray-3); }
/* 오토파일럿(무인) 상시 칩 — 헤더에서 가동 여부 한눈에 + 눌러서 즉시 토글 */
.auto-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
  padding: 4px 9px; min-height: 26px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; line-height: 1; }
.auto-chip.auto-on { color: #fff; background: #12b886; border-color: #12b886; }   /* 가동 중 = 녹색 */
.auto-chip.auto-off { color: var(--gray-6); background: var(--gray-1); border-color: var(--gray-3); }
.auto-chip.auto-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; margin-right: 1px; animation: live-pulse-sm 2s infinite; }
.lnb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  font-weight: 800;
  font-size: 16px;
  border-bottom: 1px solid var(--gray-3);
}
.lnb-close { border: none; background: none; font-size: 22px; color: var(--gray-6); cursor: pointer; line-height: 1; }
/* 좌상단 로고(플랫폼 이미지+이름) — 클릭 시 홈/대시보드로 */
.lnb-logo { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 800;
  color: var(--ink); user-select: none; }
.lnb-logo-ic { width: 26px; height: 26px; border-radius: 8px; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.lnb-logo:hover { opacity: .82; }
.lnb-logo:active { transform: scale(.97); }
.lnb-menu a, .lnb a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--gray-1);
}
/* 메뉴·헤더 공용 라인 아이콘 — 스프라이트(#ic-…)를 currentColor 로 통일 */
.mi { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; color: var(--gray-9); }
.lnb a:hover .mi, .lnb a.active .mi { color: var(--blue); }
.lnb a:active, .lnb a:hover { background: var(--gray-1); }
.lnb a.active { background: var(--hl); }
.lnb .lnb-user { padding: 14px 20px; color: var(--gray-6); font-size: 13px; margin-top: auto; border-top: 1px solid var(--gray-1); }

.muted { color: var(--gray-6); font-size: 13px; }
.mt { margin-top: 16px; }
.hidden { display: none !important; }

/* 데이터 미리받기 전역 진행 pill — 어느 화면에서든 진행 상태가 보인다 (탭하면 설정) */
.pf-pill {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(440px, calc(100% - 32px));
  background: var(--yellow);
  color: #191919;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  z-index: 71;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.embed .pf-pill { display: none; }