@font-face {
  font-family: 'Pretendard Variable';
  src: url('./vendor/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* 토스 다크 팔레트 (기본) — 라이트 테마는 [data-theme="light"] 오버라이드 */
:root {
  --bg: #101013;
  --card: #17171c;
  --card-2: #1e1e24;
  --ink: #e4e4e5;
  --ink-2: #b0b8c1;
  --ink-3: #8b95a1;
  --ink-4: #6b7684;
  --line: #22222a;
  --line-2: #2c2c35;
  --up: #f04452;
  --down: #3182f6;
  --blue: #3182f6;
  --blue-weak: rgba(49, 130, 246, .16);
  --red-weak: rgba(240, 68, 82, .16);
  --grey-weak: #23232b;
  --radius: 20px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --seg-on: #33333d;
  --legend-bg: rgba(23, 23, 28, .82);
  --toast-bg: #e4e4e5;
  --toast-ink: #17171c;
  --overlay: rgba(16, 16, 19, .72);
  --spin-track: rgba(255, 255, 255, .13);
  --header-bg: rgba(16, 16, 19, .82);
  color-scheme: dark;
}

/* 토스 라이트 팔레트 — 계층(3>4)이 다크와 반대이므로 ink-3/ink-4 를 스왑 */
[data-theme="light"] {
  --bg: #f2f4f6;
  --card: #ffffff;
  --card-2: #f9fafb;
  --ink: #191f28;
  --ink-2: #333d4b;
  --ink-3: #6b7684;
  --ink-4: #8b95a1;
  --line: #eef0f3;
  --line-2: #dde1e6;
  --blue-weak: rgba(49, 130, 246, .10);
  --red-weak: rgba(240, 68, 82, .09);
  --grey-weak: #f2f4f6;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
  --seg-on: #ffffff;
  --legend-bg: rgba(255, 255, 255, .88);
  --toast-bg: #191f28;
  --toast-ink: #ffffff;
  --overlay: rgba(242, 244, 246, .75);
  --spin-track: rgba(0, 0, 0, .10);
  --header-bg: rgba(255, 255, 255, .85);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Malgun Gothic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum';
}

button, input, select { font-family: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
input, select { outline: none; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-3); }

/* ---------------- header ---------------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  max-width: 1520px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.logo .dot {
  width: 26px; height: 26px; border-radius: 9px;
  background: linear-gradient(135deg, #3182f6, #6ba7ff);
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900;
}
.logo small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-4); letter-spacing: .6px; }

.seg { display: flex; background: var(--grey-weak); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button {
  padding: 7px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-3); transition: .15s;
}
.seg button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* 화면 전환 탭 — 헤더 오른쪽 끝 고정 */
.view-seg { margin-left: auto; }
.view-seg button.on { background: var(--blue); color: #fff; }

.search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search-wrap input {
  width: 100%; padding: 11px 15px 11px 38px; border-radius: 13px; border: none;
  background: var(--grey-weak); font-size: 14px; font-weight: 500; color: var(--ink);
}
.search-wrap input::placeholder { color: var(--ink-4); font-weight: 500; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }

.sugg {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 100;
  background: var(--card-2); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  border: 1px solid var(--line-2);
  overflow: hidden; max-height: 380px; overflow-y: auto;
}
.sugg .it { padding: 12px 16px; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; }
.sugg .it:hover, .sugg .it.act { background: var(--grey-weak); }
.sugg .it b { font-size: 14px; font-weight: 700; }
.sugg .it span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.sugg .empty { padding: 18px; text-align: center; color: var(--ink-3); font-size: 13px; }

.ghost-btn {
  padding: 9px 14px; border-radius: 11px; background: var(--grey-weak);
  font-size: 13px; font-weight: 700; color: var(--ink-2); transition: .15s;
}
.ghost-btn:hover { background: var(--line-2); }
.blue-btn {
  padding: 11px 18px; border-radius: 12px; background: var(--blue);
  color: #fff; font-size: 14px; font-weight: 700; transition: .15s;
}
.blue-btn:hover { filter: brightness(1.1); }
.blue-btn:disabled { opacity: .5; cursor: default; }

/* ---------------- layout ---------------- */
.wrap { max-width: 1520px; margin: 0 auto; padding: 20px 22px 80px; display: grid;
        grid-template-columns: 292px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .wrap { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
  border: 1px solid var(--line);
  position: relative; /* 로딩 오버레이 기준점 */
}
.card + .card { margin-top: 18px; }

/* ---------------- 화면 탭 (분석 / 설정 / 백테스팅) ---------------- */
main.tab-analysis .view-settings, main.tab-analysis .view-backtest,
main.tab-settings .view-analysis, main.tab-settings .view-backtest,
main.tab-backtest .view-analysis, main.tab-backtest .view-settings { display: none; }

/* ---------------- 카드 로딩 오버레이 ----------------
   종목을 바꾸면 이전 종목 데이터 위에 오버레이 + 스피너를 덮어
   "지금 보이는 값은 아직 예전 것"임을 분명히 합니다. 갱신이 끝난 카드부터 걷힙니다. */
.card.loading { pointer-events: none; }
.card.loading::before {
  content: ''; position: absolute; inset: 0; z-index: 20;
  background: var(--overlay); border-radius: var(--radius);
}
.card.loading::after {
  content: ''; position: absolute; top: 20px; right: 22px; z-index: 21;
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--spin-track); border-top-color: var(--blue);
  animation: sp .75s linear infinite;
}

/* ---------------- 핵심 요약 한 줄 (국면 · 컨플루언스 · 전문가) ---------------- */
.sum-row { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.sum-seg {
  display: flex; align-items: center; gap: 9px; padding: 3px 20px;
  border-left: 1px solid var(--line-2); cursor: pointer;
}
.sum-seg:first-child { border-left: none; padding-left: 2px; }
.sum-seg .k { font-size: 12px; font-weight: 700; color: var(--ink-3); flex-shrink: 0; }
.sum-seg:hover .k { color: var(--ink-2); }
.sum-seg .body { display: inline-flex; align-items: center; gap: 8px; }
.sum-seg b { font-size: 17px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.sum-seg .d { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.sum-alert {
  padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 800;
  background: var(--red-weak); color: var(--up);
}
/* 요약 세그먼트용 작은 스피너 — 계산이 끝나는 항목부터 값으로 바뀝니다 */
.sp-sm {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--spin-track); border-top-color: var(--blue);
  animation: sp .7s linear infinite;
}
.card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.card .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 16px; }

.aside { position: sticky; top: 78px; }
@media (max-width: 1080px) { .aside { position: static; } }

/* ---------------- watchlist ---------------- */
.wl-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px;
  cursor: pointer; transition: .15s;
}
.wl-item:hover { background: var(--grey-weak); }
.wl-item.on { background: var(--blue-weak); }
.wl-item .nm { flex: 1; min-width: 0; }
.wl-item .nm b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-item .nm span { font-size: 11.5px; color: var(--ink-4); font-weight: 600; }
.wl-item .px { text-align: right; }
.wl-item .px b { display: block; font-size: 13.5px; font-weight: 700; }
.wl-item .px span { font-size: 11.5px; font-weight: 700; }
.wl-item .rm { opacity: 0; color: var(--ink-4); font-size: 16px; padding: 0 2px; }
.wl-item:hover .rm { opacity: 1; }
.badge-sc {
  min-width: 40px; text-align: center; padding: 4px 7px; border-radius: 8px;
  font-size: 11.5px; font-weight: 800;
}
.badge-sc.b { background: var(--red-weak); color: var(--up); }
.badge-sc.s { background: var(--blue-weak); color: #5c9dff; }
.badge-sc.n { background: var(--grey-weak); color: var(--ink-3); }

/* ---------------- price header ---------------- */
.px-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.px-head .ttl { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.px-head .ttl b { display: block; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; margin-bottom: 3px; }
.px-head .big { font-size: 40px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; }
.px-head .chg { font-size: 15px; font-weight: 700; margin-top: 4px; }
.px-meta { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.px-meta div { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.px-meta div b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; margin-top: 3px; }

/* ---------------- signal ---------------- */
.sig-grid { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
@media (max-width: 760px) { .sig-grid { grid-template-columns: 1fr; } }

.gauge { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.gauge svg { transform: rotate(-90deg); }
.gauge .ctr {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.gauge .ctr .v { font-size: 46px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; }
.gauge .ctr .k { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.gauge .zone-lab { position: absolute; font-size: 10.5px; font-weight: 800; }

.conf-wrap { margin: 12px auto 0; width: 210px; }
.conf-bar { height: 8px; border-radius: 999px; background: var(--grey-weak); overflow: hidden; }
.conf-bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.conf-lab { display: flex; justify-content: space-between; margin-top: 6px;
            font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.conf-lab b { color: var(--ink); }

.sig-pill {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 800; margin-bottom: 12px;
}
.sig-pill.buy { background: var(--red-weak); color: var(--up); }
.sig-pill.sell { background: var(--blue-weak); color: #5c9dff; }
.sig-pill.hold { background: var(--grey-weak); color: var(--ink-2); }
.sig-desc { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.65; }
.sig-desc b { color: var(--ink); font-weight: 800; }

.reasons { margin-top: 14px; display: grid; gap: 7px; }
.reason {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--grey-weak); border-radius: 11px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.reason .rs {
  flex-shrink: 0; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 7px;
  font-size: 11px; font-weight: 800;
}
.reason .rw { flex-shrink: 0; font-size: 10.5px; color: var(--ink-4); font-weight: 700; }

.odds-box { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.odds-box .o {
  flex: 1; min-width: 128px; background: var(--grey-weak); border-radius: 14px; padding: 13px 15px;
}
.odds-box .o span { font-size: 11.5px; font-weight: 700; color: var(--ink-3); display: block; }
.odds-box .o em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-4); font-weight: 600; margin-top: 3px; }
.odds-box .o b { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }

.note { margin-top: 14px; font-size: 12px; color: var(--ink-4); font-weight: 600; line-height: 1.6; }

/* ---------------- components ---------------- */
.comp { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.comp:last-child { border-bottom: none; }
.comp .nm { width: 132px; flex-shrink: 0; }
.comp .nm b { display: block; font-size: 13.5px; font-weight: 700; }
.comp .nm span { font-size: 11px; color: var(--ink-4); font-weight: 600; }
.comp .bar { flex: 1; height: 8px; background: var(--grey-weak); border-radius: 999px; position: relative; }
.comp .bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: .35s; }
.comp .bar .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.comp .val { width: 58px; text-align: right; font-size: 13px; font-weight: 800; }

/* ---------------- 국면 게이트 ---------------- */
.rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rg-box { background: var(--grey-weak); border-radius: 15px; padding: 15px 17px; border-left: 4px solid var(--line-2); }
.rg-box.up { border-left-color: var(--up); }
.rg-box.down { border-left-color: var(--down); }
.rg-box.flat { border-left-color: #6b7684; }
.rg-box > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 5px; }
.rg-box > b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.5px; }
.rg-box > em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-4);
               font-weight: 600; margin-top: 6px; line-height: 1.55; }

.rg-verdict { margin-top: 14px; padding: 15px 18px; border-radius: 15px; display: flex;
              align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.rg-verdict.candidate { background: rgba(63, 196, 126, .13); color: #7fe0aa; }
.rg-verdict.watch { background: var(--grey-weak); color: var(--ink-2); }
.rg-verdict.avoid { background: var(--blue-weak); color: #8fbdff; }
.rg-verdict .vd { flex-shrink: 0; padding: 6px 15px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.rg-verdict.candidate .vd { background: rgba(63, 196, 126, .22); color: #3fc47e; }
.rg-verdict.watch .vd { background: var(--line-2); color: var(--ink-2); }
.rg-verdict.avoid .vd { background: rgba(49, 130, 246, .25); color: #5c9dff; }
.rg-verdict .bl { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; font-size: 11.5px;
                  font-weight: 700; background: var(--red-weak); color: var(--up); }

.rg-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 7px 16px; margin-top: 14px; }
.rg-facts .f { display: flex; align-items: center; gap: 9px; padding: 8px 12px;
               background: var(--grey-weak); border-radius: 11px; font-size: 12.5px; font-weight: 600; }
.rg-facts .f .ic { width: 15px; text-align: center; font-weight: 900; flex-shrink: 0; }
.rg-facts .f .tx { flex: 1; }
.rg-facts .f .dt { font-size: 11.5px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.rg-exit { margin-top: 14px; padding: 13px 16px; border-radius: 14px; font-size: 12.5px;
           font-weight: 600; line-height: 1.65; }
.rg-exit .lv { font-weight: 800; margin-right: 8px; }
.rg-exit.none { background: var(--grey-weak); color: var(--ink-3); }
.rg-exit.warn { background: rgba(217, 169, 68, .14); color: #e0bf6a; }
.rg-exit.alert { background: var(--red-weak); color: #ff8a94; }

/* ---------------- 전문가 패널 ---------------- */
.xp-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
          background: var(--grey-weak); border-radius: 16px; padding: 18px 20px; }
.xp-top .big { text-align: center; min-width: 116px; }
.xp-top .big b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; }
.xp-top .big span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-4); margin-top: 3px; }
.xp-top .vd { padding: 8px 20px; border-radius: 999px; font-size: 18px; font-weight: 800; }
.xp-top .meta { flex: 1; min-width: 240px; font-size: 12.5px; font-weight: 600;
                color: var(--ink-2); line-height: 1.7; }
.xp-top .meta em { font-style: normal; color: var(--ink-4); font-weight: 700; }

/* 조건 적합도 배지 — 극단일수록 진하게 (매우 우호적=진한 빨강, 매우 불리=진한 파랑) */
.vd-strongbuy { background: rgba(240, 68, 82, .30); color: #ff3b4d; }
.vd-buy { background: rgba(240, 68, 82, .13); color: #f0868e; }
.vd-hold { background: var(--grey-weak); color: var(--ink-2); }
.vd-sell { background: rgba(49, 130, 246, .13); color: #9dc4ff; }
.vd-strongsell { background: rgba(49, 130, 246, .32); color: #3d8bff; }
.vd-na { background: var(--grey-weak); color: var(--ink-4); }

.xp-styles { display: grid; gap: 8px; margin-top: 14px; }
.xp-srow { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; }
.xp-srow .nm { width: 132px; flex-shrink: 0; color: var(--ink-2); }
.xp-srow .nm em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-4); }
.xp-srow .track { flex: 1; min-width: 80px; height: 10px; border-radius: 999px;
                  background: var(--grey-weak); position: relative; overflow: hidden; }
.xp-srow .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .4s; }
.xp-srow .track .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.xp-srow .sc { width: 44px; text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.xp-srow .who { width: 210px; flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--ink-4);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .xp-srow .who { display: none; } }

.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
           gap: 10px; margin-top: 16px; }
.xp-card { background: var(--grey-weak); border-radius: 14px; padding: 13px 14px; cursor: pointer;
           border: 1.5px solid transparent; transition: .15s; }
.xp-card:hover { border-color: var(--line-2); }
.xp-card.on { border-color: var(--blue); background: var(--card-2); }
.xp-card .st { font-size: 10px; font-weight: 800; letter-spacing: .3px; margin-bottom: 5px; }
.xp-card .nm { font-size: 13.5px; font-weight: 800; color: var(--ink); }
/* 전략명 아래 참고 인물 실명 — 작은 회색 병기 */
.xp-card .nm .who { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-4); margin-top: 2px; }
.xp-card .ol { font-size: 10.5px; font-weight: 600; color: var(--ink-4); margin-top: 3px;
               line-height: 1.45; height: 30px; overflow: hidden; }
.xp-card .row { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; }
.xp-card .row b { font-size: 24px; font-weight: 800; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.xp-card .row span { font-size: 11.5px; font-weight: 800; }
.xp-card .bar { height: 5px; border-radius: 999px; background: var(--line-2); margin-top: 7px; overflow: hidden; }
.xp-card .bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.xp-card .pc { font-size: 10.5px; font-weight: 700; color: var(--ink-4); margin-top: 6px; }

.xp-detail:empty { display: none; }
.xp-detail { margin-top: 16px; background: var(--card-2); border-radius: 16px; padding: 20px 22px;
             border: 1px solid var(--line-2); }
.xp-detail .hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.xp-detail .hd b { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.xp-detail .hd span { font-size: 12px; font-weight: 700; color: var(--ink-4); }
.xp-detail .quote { font-size: 14px; font-weight: 600; color: var(--ink-2); font-style: italic;
                    border-left: 3px solid var(--line-2); padding: 4px 0 4px 13px; margin: 12px 0; }
.xp-detail .sm { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.75; }
.xp-detail .sm b { color: var(--ink); font-weight: 800; }
.xp-detail .rules { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.xp-detail .rules li { font-size: 12.5px; font-weight: 600; color: var(--ink-2);
                       padding-left: 16px; position: relative; line-height: 1.6; }
.xp-detail .rules li:before { content: '·'; position: absolute; left: 4px; color: var(--ink-4); font-weight: 900; }
.xp-detail .ck { margin-top: 8px; display: grid; gap: 7px; }
.xp-detail .ck .it { display: flex; gap: 11px; padding: 10px 13px; background: var(--grey-weak); border-radius: 11px; }
.xp-detail .ck .ic { width: 16px; flex-shrink: 0; text-align: center; font-weight: 900; font-size: 13px; }
.xp-detail .ck .bd { flex: 1; min-width: 0; }
.xp-detail .ck .t { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.xp-detail .ck .d { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 3px; line-height: 1.55; }
.xp-detail .ck .w { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-align: right; }

/* ---------------- 재무 지표 ---------------- */
.fund-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; margin-top: 12px; }
.fund-grid .f { display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px;
                background: var(--grey-weak); border-radius: 11px; font-size: 12.5px; font-weight: 600; }
.fund-grid .f span { color: var(--ink-3); }
.fund-grid .f b { font-weight: 800; font-variant-numeric: tabular-nums; }

.tf-note { font-size: 12px; font-weight: 600; color: #d9a944; background: rgba(217, 169, 68, .12);
           border-radius: 11px; padding: 10px 14px; margin-bottom: 14px; line-height: 1.6; }
.tf-note:empty { display: none; }

/* ---------------- 지표 대분류 (접이식) ---------------- */
.grp { border-bottom: 1px solid var(--line); }
.grp:last-child { border-bottom: none; }
.grp-head { display: flex; align-items: center; gap: 14px; padding: 14px 2px; cursor: pointer; transition: .15s; }
.grp-head:hover { background: rgba(255, 255, 255, .02); }
.grp-head .ar { width: 14px; flex-shrink: 0; color: var(--ink-4); font-size: 11px; transition: transform .2s; }
.grp.open .grp-head .ar { transform: rotate(90deg); }
.grp-head .nm { width: 168px; flex-shrink: 0; }
.grp-head .nm b { display: block; font-size: 14px; font-weight: 800; }
.grp-head .nm span { font-size: 11px; color: var(--ink-4); font-weight: 600; }
.grp-head .bar { flex: 1; min-width: 90px; height: 9px; background: var(--grey-weak);
                 border-radius: 999px; position: relative; }
.grp-head .bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: .35s; }
.grp-head .bar .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.grp-head .val { width: 56px; text-align: right; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.grp-head .st { width: 40px; text-align: right; font-size: 11.5px; font-weight: 800; }

.grp-body { display: none; padding: 2px 2px 16px 28px; }
.grp.open .grp-body { display: block; }
.grp-body .mb { padding: 11px 14px; background: var(--grey-weak); border-radius: 12px; margin-bottom: 8px; }
.grp-body .mb:last-child { margin-bottom: 0; }
.grp-body .mb .top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.grp-body .mb .top b { font-size: 13px; font-weight: 800; }
.grp-body .mb .top .w { font-size: 10.5px; font-weight: 700; color: var(--ink-4); }
.grp-body .mb .top .sc { margin-left: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.grp-body .mb .top .al { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800;
                         background: rgba(217, 169, 68, .16); color: #d9a944; }
.grp-body .mb .rz { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.65; }

/* ---------------- charts ---------------- */
.chart-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  padding: 6px 12px; border-radius: 9px; background: var(--grey-weak);
  font-size: 12px; font-weight: 700; color: var(--ink-3); transition: .15s;
}
.chip.on { background: var(--blue-weak); color: #5c9dff; }

.pane { position: relative; }
/* 보조지표 패널 구분선 */
.pane + .pane { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 8px; }

/* 패널 상단 고정 범례 (마우스 위치의 값이 항상 여기 표시됨) */
.pane-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 2px 4px 8px; font-size: 12px; font-weight: 700; color: var(--ink-3);
}
.pane-head .tt { font-size: 12px; font-weight: 800; color: var(--ink-2); letter-spacing: .2px; }
.pane-head .kv { display: inline-flex; align-items: center; gap: 5px; }
.pane-head .kv i { display: inline-block; width: 9px; height: 3px; border-radius: 2px; }
.pane-head .kv b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

.legend {
  position: absolute; left: 12px; top: 8px; z-index: 6; display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700; pointer-events: none; color: var(--ink-3);
  background: var(--legend-bg); padding: 4px 9px; border-radius: 8px;
}
.legend i { display: inline-block; width: 8px; height: 2.5px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* RSI / 점수 패널의 구간 밴드 오버레이 */
.band {
  position: absolute; left: 0; z-index: 3; pointer-events: none; border-radius: 2px;
}

/* ---------------- 백테스팅 탭 컨텍스트 (종목 + 읽기 전용 설정 요약) ---------------- */
.bt-ctx { display: grid; grid-template-columns: 300px 1fr; gap: 14px; margin: 4px 0 6px; }
@media (max-width: 900px) { .bt-ctx { grid-template-columns: 1fr; } }
.bt-ctx .b { background: var(--grey-weak); border-radius: 15px; padding: 15px 17px; }
.bt-ctx .k { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink-3); margin-bottom: 9px; }
.bt-ctx .k em { font-style: normal; font-weight: 700; color: var(--ink-4); }
.bt-ctx .sym b { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.bt-ctx .sym span { display: block; font-size: 11.5px; color: var(--ink-4); font-weight: 700; margin-top: 2px; }
.bt-ctx .px { margin-top: 9px; font-size: 16px; font-weight: 800; }
.bt-ctx .px em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-4); font-weight: 600; margin-top: 3px; }
.bt-ctx .chg-lab { display: block; font-size: 11px; font-weight: 700; color: var(--ink-4); margin: 13px 0 5px; }
.bt-ctx select {
  width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--card-2); font-size: 13px; font-weight: 600; color: var(--ink);
}
.bt-ctx .row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; font-size: 12.5px; font-weight: 600; }
.bt-ctx .row > span { color: var(--ink-3); width: 74px; flex-shrink: 0; font-weight: 700; }
.bt-ctx .row b { font-weight: 800; }
.bt-ctx .row em { font-style: normal; color: var(--ink-4); font-size: 11.5px; flex-basis: 100%; padding-left: 82px; line-height: 1.5; }
@media (max-width: 900px) { .bt-ctx .row em { padding-left: 0; } }

/* ---------------- settings ---------------- */
/* 설정 총론 박스 — 이 설정 전체가 어떤 전략인지 */
.set-intro {
  background: var(--grey-weak); border-radius: 14px; padding: 15px 18px; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.75;
}
.set-intro b { color: var(--ink); }
/* 슬라이더/필드 아래 지표 설명 */
.fld .fdesc { font-size: 11px; font-weight: 600; color: var(--ink-4); margin-top: 5px; line-height: 1.55; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px 22px; }
.fld label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.fld input[type=number], .fld select {
  width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--card-2); font-size: 14px; font-weight: 600; color: var(--ink);
}
.fld input[type=number]:focus, .fld select:focus { border-color: var(--blue); }
.rng { display: flex; align-items: center; gap: 12px; }
.rng input[type=range] { flex: 1; accent-color: var(--blue); height: 4px; }
.rng .v { width: 46px; text-align: right; font-size: 14px; font-weight: 800; }

.sec-title { font-size: 13px; font-weight: 800; color: var(--ink-2); margin: 22px 0 12px;
             padding-top: 18px; border-top: 1px solid var(--line); }
.sec-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------------- backtest ---------------- */
/* 이 결과의 조건 — 실행 시점 설정 스냅샷 */
.bt-cond { background: var(--grey-weak); border-radius: 14px; padding: 14px 17px; margin-bottom: 14px; }
.bt-cond .t { font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 9px; }
.bt-cond .c { display: flex; gap: 10px; padding: 3px 0; font-size: 12px; font-weight: 600; line-height: 1.55; }
.bt-cond .c span { width: 66px; flex-shrink: 0; color: var(--ink-3); font-weight: 700; }
.bt-cond .c b { font-weight: 700; color: var(--ink-2); }

.bt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin: 18px 0; }
.bt-stats .s { background: var(--grey-weak); border-radius: 15px; padding: 15px 16px; }
.bt-stats .s span { font-size: 11.5px; font-weight: 700; color: var(--ink-3); display: block; margin-bottom: 5px; }
.bt-stats .s b { font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.bt-stats .s em { font-style: normal; font-size: 11px; color: var(--ink-4); font-weight: 600; display: block; margin-top: 3px; }

table.tr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tr-tbl th {
  text-align: right; padding: 9px 10px; font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--card);
}
table.tr-tbl th:first-child, table.tr-tbl td:first-child { text-align: left; }
table.tr-tbl td { padding: 10px; text-align: right; border-bottom: 1px solid var(--line); font-weight: 600; }
table.tr-tbl tr:hover td { background: var(--grey-weak); }
.tag { padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; background: var(--grey-weak); color: var(--ink-2); }

.scroll { max-height: 340px; overflow-y: auto; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

/* ---------------- misc ---------------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--toast-bg); color: var(--toast-ink); padding: 13px 22px; border-radius: 14px;
  font-size: 13.5px; font-weight: 700; opacity: 0; transition: .25s; z-index: 999; pointer-events: none;
  max-width: 90vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.spinner {
  width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; display: inline-block;
  vertical-align: -3px; margin-right: 7px;
}
@keyframes sp { to { transform: rotate(360deg); } }

.disclaimer {
  margin-top: 18px; padding: 16px 18px; background: rgba(255, 200, 60, .07); border-radius: 14px;
  border: 1px solid rgba(255, 200, 60, .12);
  font-size: 12.5px; color: #cfa956; font-weight: 600; line-height: 1.65;
}

/* 라이트 테마 미세 조정 — 연한 파랑 글자가 흰 배경에서 흐려지는 것 보정 */
[data-theme="light"] .vd-sell { color: #4a90f5; }
[data-theme="light"] .down, [data-theme="light"] .badge-sc.s { color: #2b7cf0; }
[data-theme="light"] .sig-pill.sell { color: #2b7cf0; }