:root {
  --bg: #0d1117;
  --bg2: #161b22;
  --bg3: #1c2128;
  --bg4: #21262d;
  --border: #30363d;
  --border2: #3d444d;
  --text: #e6edf3;
  --text2: #8b949e;
  --text3: #6e7681;
  --accent: #1f6feb;
  --accent2: #388bfd;
  --accent3: #58a6ff;
  --green: #3fb950;
  --red: #f85149;
  --orange: #d29922;
  --purple: #bc8cff;
  --teal: #39d353;
  --tag-bg: #1f3044;
  --kospi-color: #58a6ff;
  --kosdaq-color: #3fb950;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── TOPBAR ── */
.topbar {
  height: 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 100;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;   /* 좁은 화면에서 'LMH Quant' 줄바꿈 방지 */
  flex-shrink: 0;
}
.logo > span:last-child { white-space: nowrap; }
.logo-badge {
  background: var(--accent);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}
.topbar-nav { display: flex; gap: 2px; margin-left: 12px; }
.topbar-nav a {
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
  text-decoration: none;
}
.topbar-nav a.active,
.topbar-nav a:hover { background: var(--bg4); color: var(--text); }
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.status-dot.offline { background: var(--red); animation: none; }
.status-dot.warn { background: var(--orange, #f0883e); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.status-text { font-size: 12px; color: var(--text2); }
.status-sep { color: var(--border2); font-size: 11px; opacity: .6; margin: 0 2px; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.btn:hover { background: var(--bg3); border-color: var(--accent3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn-sm { padding: 3px 8px; font-size: 11px; }
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }

/* ── LAYOUT ── */
.main { display: flex; flex: 1; overflow: hidden; position: relative; }

/* ── SIDEBAR ── */
.sidebar {
  width: 220px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width .25s ease, transform .25s ease, border-right-width .25s ease, box-shadow .2s ease;
}
/* 고정 해제(오버레이) 모드 */
.sidebar.unpinned {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  box-shadow: 4px 0 16px rgba(0,0,0,.25);
}
/* 숨김 상태: 고정이면 폭을 0으로, 오버레이면 좌측으로 슬라이드 */
.sidebar.hidden:not(.unpinned) {
  width: 0;
  border-right-width: 0;
  overflow: hidden;
}
.sidebar.unpinned.hidden {
  transform: translateX(-100%);
  box-shadow: none;
}

/* 토글 버튼 (상단바) */
.sidebar-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  transition: all .12s;
}
.sidebar-toggle:hover { background: var(--bg4); color: var(--text); }

/* 사이드바 헤더 */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-head-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.sidebar-head-actions { display: flex; gap: 4px; }
.sidebar-pin, .sidebar-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text3);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.sidebar-pin:hover, .sidebar-close:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border);
}
.sidebar-pin.active {
  background: var(--tag-bg);
  color: var(--accent3);
  border-color: var(--accent3);
}
.sidebar-section { padding: 8px 0; }
.sidebar-label {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all .12s;
  color: var(--text2);
  font-size: 13px;
}
.sidebar-item:hover { background: var(--bg3); color: var(--text); }
.sidebar-item.active {
  background: var(--tag-bg);
  color: var(--accent3);
  border-right: 2px solid var(--accent3);
}
.sidebar-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-blue   { background: var(--accent3); }
.dot-green  { background: var(--green); }
.dot-orange { background: var(--orange); }
.dot-purple { background: var(--purple); }
.dot-red    { background: var(--red); }
.dot-teal   { background: var(--teal); }
.dot-yellow { background: #f0b429; }
.sidebar-divider { height: 1px; background: var(--border); margin: 4px 0; }
.fav-section { padding: 8px 14px; }
.fav-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text2);
  margin: 2px;
  cursor: pointer;
  transition: all .12s;
}
.fav-chip:hover { border-color: var(--accent3); color: var(--accent3); }

/* ── CONTENT ── */
.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── PANELS ── */
.panel { display: none; flex-direction: column; height: 100%; overflow: hidden; }
.panel.active { display: flex; }

/* ── DASHBOARD ── */
.dash-top {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dash-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dash-sub { font-size: 12px; color: var(--text3); }
.dash-scroll { overflow-y: auto; flex: 1; }
.market-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px;
}
.mcard {
  position: relative;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mcard::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent3), transparent);
  opacity: .7;
}
.mcard::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,139,253,.08) 0%, transparent 70%);
  pointer-events: none;
}
.mcard:hover {
  transform: translateY(-2px);
  border-color: rgba(88,166,255,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(88,166,255,.1);
}
/* 종목별 강조색 (좌측 막대) */
#card-kospi::before  { background: linear-gradient(180deg, #f85149, #b62324); }
#card-kosdaq::before { background: linear-gradient(180deg, #58a6ff, #1f6feb); }
#card-krx300::before { background: linear-gradient(180deg, #d29922, #bb8009); }
#card-gold::before   { background: linear-gradient(180deg, #f7c226, #c39000); }
/* 등락 상태별 카드 글로우 */
.mcard.is-up   { box-shadow: inset 0 0 0 1px rgba(248,81,73,.18); }
.mcard.is-dn   { box-shadow: inset 0 0 0 1px rgba(63,185,80,.18); }
.mcard.is-up::after { background: radial-gradient(circle, rgba(248,81,73,.1) 0%, transparent 70%); }
.mcard.is-dn::after { background: radial-gradient(circle, rgba(63,185,80,.1) 0%, transparent 70%); }

.mcard-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  color: var(--text2); margin-bottom: 8px; text-transform: uppercase;
}
.mcard-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent3);
  box-shadow: 0 0 6px var(--accent3);
}
#card-kospi  .mcard-label::before { background: #f85149; box-shadow: 0 0 6px #f85149; }
#card-kosdaq .mcard-label::before { background: #58a6ff; box-shadow: 0 0 6px #58a6ff; }
#card-krx300 .mcard-label::before { background: #d29922; box-shadow: 0 0 6px #d29922; }
#card-gold   .mcard-label::before { background: #f7c226; box-shadow: 0 0 6px #f7c226; }
.mcard-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.5px; line-height: 1.1;
}
.mcard-change {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px; border-radius: 10px;
}
.mcard-change.up {
  background: rgba(248,81,73,.12); color: #f85149; border: 1px solid rgba(248,81,73,.25);
}
.mcard-change.dn {
  background: rgba(63,185,80,.12); color: #3fb950; border: 1px solid rgba(63,185,80,.25);
}
.mcard-change.flat {
  background: rgba(139,148,158,.1); color: #8b949e; border: 1px solid rgba(139,148,158,.2);
}
.up   { color: var(--red); }
.dn   { color: var(--green); }
.flat { color: var(--text3); }
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 14px;
}
.dash-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.dash-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-card-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 12px;
  background: var(--accent3);
  border-radius: 2px;
}
.mini-chart { height: 120px; }

/* ── 대시보드 KOSPI/KOSDAQ 추이 카드 ───────────────────── */
.idx-trend-card {
  display: flex; flex-direction: column; gap: 8px;
}
.idx-trend-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.idx-trend-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: .3px;
}
.idx-trend-tabs {
  display: inline-flex; gap: 2px;
  background: var(--bg4); border-radius: 7px; padding: 3px;
}
.idx-trend-tab {
  padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: transparent; color: var(--text3);
  border: none; border-radius: 5px; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.idx-trend-tab:hover { color: var(--text); }
.idx-trend-tab.is-active {
  background: var(--bg2); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.idx-trend-pricing {
  display: flex; align-items: baseline; gap: 10px;
}
.idx-trend-price {
  font-size: 24px; font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.5px; color: var(--text);
}
.idx-trend-change {
  font-size: 13px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px; border-radius: 8px;
}
.idx-trend-change.up   { background: rgba(248,81,73,.1); color: #f85149; border: 1px solid rgba(248,81,73,.25); }
.idx-trend-change.dn   { background: rgba(63,185,80,.1); color: #3fb950; border: 1px solid rgba(63,185,80,.25); }
.idx-trend-change.flat { background: rgba(139,148,158,.08); color: #8b949e; border: 1px solid rgba(139,148,158,.18); }
.idx-trend-chart {
  width: 100%; height: 180px;
}
.idx-trend-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  padding-top: 4px; border-top: 1px solid var(--border2);
}
.idx-trend-foot .up   { color: #f85149; }
.idx-trend-foot .dn   { color: #3fb950; }
.idx-trend-foot .flat { color: #8b949e; }
.idx-trend-loading, .idx-trend-empty {
  display: flex; align-items: center; justify-content: center;
  height: 180px; color: var(--text3); font-size: 12px;
}
.recent-list {}
.recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
}
.recent-item:hover { color: var(--accent3); }
.recent-item:last-child { border-bottom: none; }
.recent-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--tag-bg);
  color: var(--accent3);
  flex-shrink: 0;
}

/* ── EXPLORER ── */
.explorer-top {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.explorer-body { display: flex; flex: 1; overflow: hidden; }
.api-list {
  width: 240px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
}
.api-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: all .12s;
}
.api-item:hover { background: var(--bg3); }
.api-item.active { background: var(--tag-bg); border-left: 3px solid var(--accent3); }
.api-item-name { font-size: 13px; color: var(--text); }
.api-item-cat { font-size: 11px; color: var(--text3); margin-top: 1px; }
.api-detail {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.api-info-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.api-info-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.api-info-desc { font-size: 13px; color: var(--text2); margin-bottom: 10px; }
.api-info-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.meta-tag {
  padding: 2px 8px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text3);
}
.form-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.form-title { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: span 2; }
.form-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.form-control {
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  outline: none;
  transition: border .15s;
}
.form-control:focus { border-color: var(--accent3); }
select.form-control option { background: var(--bg3); }
.form-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.req-url-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text2);
}
.req-url-label {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  margin-bottom: 6px;
}

/* ── VIEWER ── */
.viewer-top {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.viewer-badge {
  padding: 3px 8px;
  background: var(--tag-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent3);
}
.tab-bar {
  display: flex;
  gap: 2px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tab {
  padding: 7px 14px;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--text2);
  border: 1px solid transparent;
  border-bottom: none;
  position: relative;
  bottom: -1px;
  transition: all .15s;
}
.tab.active { background: var(--bg2); border-color: var(--border); color: var(--text); }
.tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.tab-panel { display: none; flex: 1; overflow: auto; padding: 14px; flex-direction: column; }
.tab-panel.active { display: flex; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
  background: var(--bg3);
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}
.data-table th:hover { color: var(--text2); }
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.data-table tr:hover td { background: var(--bg3); }
.data-table td.num { text-align: right; }
.chart-area { height: 360px; width: 100%; }
.toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── SETTINGS ── */
.settings-body {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
.settings-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.settings-row:last-child { margin-bottom: 0; }
.settings-label { font-size: 13px; color: var(--text2); min-width: 120px; }
.key-input {
  flex: 1;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  transition: border .15s;
}
.key-input:focus { border-color: var(--accent3); }
.toggle {
  width: 36px;
  height: 20px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all .2s;
  flex-shrink: 0;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left .2s;
}
.toggle.on::after { left: 18px; }

/* ── PAGINATION ── */
.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0;
  font-size: 12px;
  color: var(--text2);
  flex-shrink: 0;
}
.page-btn {
  padding: 3px 8px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text2);
  font-size: 11px;
  transition: all .12s;
}
.page-btn.active,
.page-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── SEARCH ── */
.search-box {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  width: 180px;
  font-family: 'Noto Sans KR', sans-serif;
  transition: border .15s;
}
.search-box:focus { border-color: var(--accent3); }

/* ── TOAST ── */
.toast-container {
  position: fixed;
  top: 60px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}
.toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
  border: 1px solid transparent;
  min-width: 200px;
  animation: slideIn .2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.success { background: #1a3a1f; border-color: var(--green); color: var(--green); }
.toast.error   { background: #3a1a1a; border-color: var(--red);   color: var(--red); }
.toast.info    { background: #1a2a3a; border-color: var(--accent3); color: var(--accent3); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── LOADING OVERLAY ── */
.loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(13,17,23,.7);
  z-index: 50;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.loading-overlay.active { display: flex; }
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent3);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: var(--text2); }

/* ── EMPTY STATE ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  color: var(--text3);
  font-size: 13px;
  padding: 40px;
  text-align: center;
}
.empty-icon { font-size: 40px; margin-bottom: 4px; }

/* ── SKELETON ── */
.dash-skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--bg4) 25%, var(--bg3) 50%, var(--bg4) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  color: transparent;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── 관심종목 ── */
.wl-add-btn {
  background: none; border: 1px solid var(--border); color: var(--accent3);
  border-radius: 4px; width: 20px; height: 20px; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.wl-add-btn:hover { background: var(--tag-bg); }
.wl-input {
  width: 100%; box-sizing: border-box; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: 4px; padding: 5px 8px; font-size: 11px; outline: none;
}
.wl-input:focus { border-color: var(--accent3); }
.wl-select {
  width: 100%; margin-top: 5px; box-sizing: border-box; background: var(--bg3);
  border: 1px solid var(--border); color: var(--text); border-radius: 4px;
  padding: 4px 6px; font-size: 11px; outline: none;
}
.wl-item {
  display: flex; align-items: center; gap: 5px; padding: 5px 0;
  border-radius: 5px; cursor: default;
}
.wl-item:hover { background: var(--bg3); }
.wl-market-tag {
  font-size: 9px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
  background: var(--tag-bg); color: var(--accent3); border: 1px solid var(--accent3);
  font-weight: 600;
}
.wl-name {
  flex: 1; font-size: 12px; color: var(--text); cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.wl-name:hover { color: var(--accent3); text-decoration: underline; }
.wl-del-btn {
  background: none; border: none; color: var(--text3); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
.wl-del-btn:hover { color: var(--red); }

/* 관심종목 대분류(카테고리) 칩 */
.wl-cat-bar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 2px 0 8px; margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.wl-cat-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; cursor: pointer;
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border);
  user-select: none; transition: all 0.12s;
}
.wl-cat-chip:hover { border-color: var(--accent3); color: var(--accent3); }
.wl-cat-chip.active {
  background: var(--accent3); color: var(--bg1); border-color: var(--accent3); font-weight: 600;
}
.wl-cat-add {
  background: none; border: 1px dashed var(--border); color: var(--accent3);
  border-radius: 10px; width: 22px; height: 20px; font-size: 13px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.wl-cat-add:hover { background: var(--tag-bg); border-style: solid; }

/* ── TREND / INVESTOR 테이블 ── */
#trendTable th, #invTable th { text-align: center; }
#trendTable td, #invTable td { text-align: right; }
#trendTable td:first-child, #invTable td:first-child { text-align: center; font-family: 'JetBrains Mono', monospace; }

/* ── TREND 칩 ── */
.idx-chip {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg4);
  color: var(--text2);
  transition: all .12s;
  user-select: none;
}
.idx-chip.active { border-color: var(--accent3); background: var(--tag-bg); color: var(--accent3); }
.idx-chip:hover  { border-color: var(--accent3); color: var(--text); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── 투자자 현황 — 엑셀 업로드 ── */
.inv-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 12px;
}
.inv-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.inv-dropzone {
  border: 2px dashed var(--border2); border-radius: 8px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--bg4);
}
.inv-dropzone:hover, .inv-dropzone.dragover {
  border-color: var(--accent3); background: var(--tag-bg);
}
.inv-dropzone .drop-icon { font-size: 32px; margin-bottom: 6px; }
.inv-dropzone p { color: var(--text2); font-size: 13px; margin: 0; }
.inv-dropzone p strong { color: var(--accent3); }

/* ── 데이터 소스 선택 카드 ── */
.src-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 110px; padding: 12px 8px; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--border); background: var(--bg3);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.src-card input[type="radio"] { display: none; }
.src-card:has(input:checked) {
  border-color: var(--accent3); background: var(--tag-bg);
}
.src-card:hover { border-color: var(--accent3); }
.src-card-icon  { font-size: 22px; }
.src-card-name  { font-size: 12px; font-weight: 600; color: var(--text); }
.src-card-desc  { font-size: 10px; color: var(--text3); text-align: center; line-height: 1.5; }

/* ── 오실레이터 진행 오버레이 ── */
.osc-progress {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  animation: osc-fade-in 0.15s ease;
}
@keyframes osc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.osc-progress-card {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 28px 36px; border-radius: 14px;
  min-width: 340px; max-width: 480px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  text-align: center;
}
.osc-progress-spinner {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: osc-spin 0.8s linear infinite;
}
@keyframes osc-spin { to { transform: rotate(360deg); } }
.osc-progress-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.osc-progress-step  { font-size: 12px; color: var(--text3); margin-bottom: 18px; min-height: 16px; }
.osc-progress-bar   {
  height: 4px; background: var(--bg4); border-radius: 2px;
  overflow: hidden; margin-bottom: 10px; position: relative;
}
.osc-progress-bar--indeterminate .osc-progress-indet {
  position: absolute; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent3), transparent);
  animation: osc-indet 1.2s ease-in-out infinite;
}
@keyframes osc-indet {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.osc-progress-meta  {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text2); margin-bottom: 14px;
}
.osc-progress-meta b { color: var(--accent3); font-weight: 600; }
.osc-progress-cancel {
  background: var(--bg4); border: 1px solid var(--border);
  color: var(--text2); padding: 5px 14px;
}
.osc-progress-cancel:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── 도움말 모달 ── */
.osc-help-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: osc-fade-in 0.15s ease;
}
/* 결과 모달 내부에서 열릴 때: 그 창 범위 안에서만 표시 */
.osc-help-modal.osc-help-modal--inline {
  position: absolute; border-radius: 12px;
  background: rgba(0,0,0,0.5);
}
.osc-help-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; width: 100%; max-width: 640px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.osc-help-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
}
.osc-help-body {
  flex: 1; overflow-y: auto; padding: 16px 22px; font-size: 13px; line-height: 1.6;
}
.osc-help-body h4 {
  margin: 16px 0 8px; font-size: 13px; color: var(--accent3);
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.osc-help-body h4:first-child { margin-top: 0; }
.osc-help-body p { margin: 6px 0; color: var(--text2); }
.osc-help-terms { margin: 6px 0 12px; }
.osc-help-terms dt { color: var(--text); font-weight: 600; margin-top: 8px; }
.osc-help-terms dd { color: var(--text2); margin: 2px 0 0 12px; font-size: 12px; }
.osc-help-list { margin: 6px 0 12px; padding-left: 20px; }
.osc-help-list li { color: var(--text2); margin: 4px 0; font-size: 12px; }
.osc-help-body .up { color: var(--red); }
.osc-help-body .dn { color: var(--accent3); }
.osc-help-body b { color: var(--text); }

/* ── 오실레이터 계산 결과 모달 ── */
.osc-result-modal {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.osc-result-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; width: 100%; height: 100%;
  max-width: 1400px; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.osc-result-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
}
.osc-result-body {
  flex: 1; display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px; padding: 14px 20px 20px; min-height: 0;
}
.osc-result-left {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
}
.osc-result-stats {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.osc-result-stats-title {
  font-size: 11px; color: var(--text3); margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.osc-result-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; font-size: 12px; border-radius: 5px; margin: 1px -4px;
  transition: background 0.15s;
}
.osc-result-stat-label { color: var(--text2); display: flex; align-items: center; gap: 6px; }
.osc-result-stat-value { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.osc-result-stat-value.up  { color: var(--red); }
.osc-result-stat-value.dn  { color: var(--accent3); }
.osc-result-stat-value.cur { color: var(--accent); background: rgba(88,166,255,0.18); padding: 1px 6px; border-radius: 4px; }
.osc-result-stat-badge {
  font-size: 10px; font-weight: 600; color: var(--accent);
  background: rgba(88,166,255,0.18); padding: 1px 5px; border-radius: 3px;
}
/* 현재값이 속한 구간 배경색 (과매수 → 과매도) */
.osc-result-stat.matched.matched-top10 { background: rgba(248,81,73,0.22);  border-left: 3px solid #f85149; }
.osc-result-stat.matched.matched-top25 { background: rgba(248,81,73,0.10);  border-left: 3px solid rgba(248,81,73,0.6); }
.osc-result-stat.matched.matched-avg   { background: rgba(210,153,34,0.14); border-left: 3px solid #d29922; }
.osc-result-stat.matched.matched-bot25 { background: rgba(63,185,150,0.10); border-left: 3px solid rgba(63,185,150,0.6); }
.osc-result-stat.matched.matched-bot10 { background: rgba(63,185,150,0.22); border-left: 3px solid #3fb950; }
.osc-result-stat.current-row {
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.osc-result-stat.current-row.matched-top10 { background: rgba(248,81,73,0.22); }
.osc-result-stat.current-row.matched-top25 { background: rgba(248,81,73,0.10); }
.osc-result-stat.current-row.matched-avg   { background: rgba(210,153,34,0.14); }
.osc-result-stat.current-row.matched-bot25 { background: rgba(63,185,150,0.10); }
.osc-result-stat.current-row.matched-bot10 { background: rgba(63,185,150,0.22); }
.osc-result-table {
  flex: 1; overflow: auto; min-height: 0;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
}
.osc-result-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.osc-result-table th {
  position: sticky; top: 0; background: var(--bg4); color: var(--text2);
  padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border);
}
.osc-result-table td {
  padding: 4px 8px; text-align: right; font-family: 'JetBrains Mono', monospace;
  border-bottom: 1px solid var(--border);
}
.osc-result-table td:first-child { text-align: center; color: var(--text2); }
.osc-result-table td.up { color: var(--red); }
.osc-result-table td.dn { color: var(--accent3); }
.osc-result-table tr:hover td { background: var(--bg2); }
.osc-result-chart {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  height: 420px; flex-shrink: 0;
}
.osc-result-right {
  display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden;
}
/* 다이어리 책갈피 스타일 좌측 세로 탭 */
.osc-result-body-v2 {
  flex: 1; display: flex; gap: 0; padding: 14px 20px 20px;
  min-height: 0; position: relative;
}
.osc-result-sidebar {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 16px; position: relative; z-index: 1;
  margin-right: -1px; /* 본문 테두리와 겹치도록 */
}
.osc-result-vtab {
  background: var(--bg4); border: 1px solid var(--border);
  border-right: none; border-radius: 8px 0 0 8px;
  padding: 14px 10px 14px 14px; cursor: pointer;
  min-width: 64px; color: var(--text2);
  transition: all 0.15s;
  box-shadow: -2px 2px 4px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; right: -1px;
}
.osc-result-vtab:hover {
  background: var(--bg3); color: var(--text);
  transform: translateX(-3px);
}
.osc-result-vtab.active {
  background: var(--bg3); color: var(--accent3);
  font-weight: 700; border-color: var(--accent3);
  transform: translateX(-4px);
  box-shadow: -4px 2px 8px rgba(88,166,255,0.2);
  z-index: 2;
}
.osc-result-vtab.active::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0;
  width: 2px; background: var(--bg3);
}
.osc-result-vtab-icon { font-size: 20px; line-height: 1; }
.osc-result-vtab-label { font-size: 11px; writing-mode: horizontal-tb; }

.osc-result-content {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 0 10px 10px 10px;
  padding: 14px; min-height: 0; position: relative;
}
.osc-result-view { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.osc-result-view--analysis {
  display: grid; grid-template-columns: 360px 1fr; gap: 14px;
}
.osc-result-view--news { flex-direction: column; }

.osc-result-analysis, .osc-result-news {
  flex: 1; overflow-y: auto; min-height: 0;
  background: var(--bg4); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; font-size: 12px;
}
/* 뉴스 리스트 */
.osc-news-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text); padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.osc-news-list { display: flex; flex-direction: column; gap: 10px; }
.osc-news-item {
  display: block; padding: 10px 12px;
  background: var(--bg4); border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none; color: var(--text); transition: all 0.15s;
  border-left: 3px solid transparent;
}
.osc-news-item:hover {
  border-color: var(--border2, var(--border));
  border-left-color: var(--accent3);
  background: var(--bg2);
}
.osc-news-title {
  font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 4px;
}
.osc-news-item:hover .osc-news-title { color: var(--accent3); }
.osc-news-meta {
  display: flex; gap: 10px; font-size: 10px; color: var(--text3); margin-bottom: 4px;
}
.osc-news-source { color: var(--accent); font-weight: 600; }
.osc-news-desc {
  font-size: 11px; color: var(--text2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.osc-news-loading, .osc-news-empty {
  text-align: center; padding: 40px 20px; color: var(--text3); font-size: 12px;
}
.osc-news-footer {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text3); text-align: center;
}
.osc-analysis-title {
  font-size: 13px; font-weight: 600; color: var(--accent3);
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* 위치 시각화 바 */
.osc-analysis-bar-wrap { margin-bottom: 16px; }
.osc-analysis-bar {
  position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(to right, #3fb950 0%, #3fb950 20%, #d29922 50%, #f85149 80%, #f85149 100%);
  margin: 18px 4px 8px;
}
.osc-analysis-bar-fill { display:none; }
.osc-analysis-bar-marker {
  position: absolute; top: -4px; transform: translateX(-50%);
}
.osc-analysis-bar-marker-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(88,166,255,0.6);
  margin: 0 auto;
}
.osc-analysis-bar-marker-label {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--accent);
  white-space: nowrap; background: var(--bg4); padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--accent);
}
.osc-analysis-bar-labels {
  display: flex; justify-content: space-between; margin-top: 36px;
  font-size: 10px; color: var(--text3); padding: 0 4px;
}
.osc-analysis-bar-labels span { text-align: center; flex: 1; }
.osc-analysis-bar-labels small { color: var(--text2); font-size: 9px; }

/* 구간 요약 카드 */
.osc-analysis-zone {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-radius: 8px; margin-bottom: 12px;
  border: 1px solid var(--border);
}
.osc-analysis-zone--top10 { background: rgba(248,81,73,0.18); border-color: rgba(248,81,73,0.5); }
.osc-analysis-zone--top25 { background: rgba(248,81,73,0.08); border-color: rgba(248,81,73,0.3); }
.osc-analysis-zone--avg   { background: rgba(210,153,34,0.12); border-color: rgba(210,153,34,0.4); }
.osc-analysis-zone--bot25 { background: rgba(63,185,150,0.08); border-color: rgba(63,185,150,0.3); }
.osc-analysis-zone--bot10 { background: rgba(63,185,150,0.18); border-color: rgba(63,185,150,0.5); }
.osc-analysis-zone-label    { font-size: 14px; font-weight: 700; color: var(--text); }
.osc-analysis-zone-strength { font-size: 11px; color: var(--text3); margin-top: 2px; }
.osc-analysis-action {
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px;
}
.osc-analysis-action--danger  { background: #f85149; color: #fff; }
.osc-analysis-action--warning { background: #d29922; color: #000; }
.osc-analysis-action--neutral { background: var(--bg4); color: var(--text2); }
.osc-analysis-action--success { background: #3fb950; color: #000; }

/* 긍정/주의 2열 */
.osc-analysis-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.osc-analysis-section {
  background: var(--bg4); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px;
}
.osc-analysis-section--pos { border-left: 3px solid #3fb950; }
.osc-analysis-section--neg { border-left: 3px solid #f85149; }
.osc-analysis-section-title { font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.osc-analysis-section ul, .osc-analysis-advice { margin: 0; padding-left: 18px; }
.osc-analysis-section li, .osc-analysis-advice li { margin: 3px 0; color: var(--text2); font-size: 11.5px; line-height: 1.5; }
.osc-analysis-section li b, .osc-analysis-advice li b { color: var(--text); }
.osc-analysis-warn {
  margin-top: 12px; padding: 10px 12px; font-size: 11px;
  background: rgba(210,153,34,0.1); border-left: 3px solid #d29922; border-radius: 4px;
  color: var(--text2); line-height: 1.5;
}
.osc-analysis-warn b { color: var(--text); }

/* 조회 기록 칩 */
.osc-history {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  min-height: 28px;
}
.osc-history:empty { display: none; }
.osc-hist-label { font-size: 10px; color: var(--text3); margin-right: 4px; }
.osc-hist-chip {
  display: inline-flex; align-items: center;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; font-size: 11px;
  transition: all 0.15s;
}
.osc-hist-chip:hover { border-color: var(--accent3); }
.osc-hist-btn {
  background: none; border: none; color: var(--text);
  padding: 3px 8px 3px 10px; cursor: pointer; font-size: 11px;
}
.osc-hist-btn:hover { color: var(--accent3); }
.osc-hist-del {
  background: none; border: none; color: var(--text3);
  padding: 3px 8px 3px 4px; cursor: pointer; font-size: 14px; line-height: 1;
}
.osc-hist-del:hover { color: var(--red); }

/* ── 오실레이터 검색 바 ── */
.osc-search-bar {
  flex-shrink: 0; border-bottom: 1px solid var(--border);
  padding: 10px 14px 0;
}
.osc-search-row {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px;
}
.osc-search-row--sub {
  border-top: 1px solid var(--border2, var(--border));
  padding-top: 8px;
}
.osc-search-divider {
  width: 1px; height: 36px; background: var(--border);
  align-self: flex-end; margin: 0 2px;
}
.osc-search-row .btn {
  height: 36px; padding: 0 14px; box-sizing: border-box;
  font-size: 12px; line-height: 1;
}
.osc-search-row .btn.btn-sm { padding: 0 12px; }
.osc-search-row .form-control {
  height: 36px; box-sizing: border-box;
  padding: 0 10px; line-height: 34px; font-size: 13px;
}
.osc-search-row select.form-control { padding-right: 28px; }

/* YYYY-MM-DD 텍스트 입력 */
.osc-ymd-input {
  width: 124px !important; text-align: center;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 1px;
}

/* 우측 상단 고정 원형 버튼 (알림 등) */
.theme-toggle {
  position: fixed; top: 12px; right: 16px; z-index: 1000;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border);
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.theme-toggle:hover { background: var(--bg4); transform: scale(1.08); }

/* 종목 자동완성 드롭다운 */
.osc-suggest {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; margin-top: 2px; max-height: 280px; overflow-y: auto;
  z-index: 150; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.osc-suggest-item {
  padding: 8px 12px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  font-size: 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.osc-suggest-item:hover,
.osc-suggest-item.active { background: var(--bg4); }
.osc-suggest-item.active { box-shadow: inset 3px 0 0 var(--accent3); }
.osc-suggest-name {
  color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.osc-suggest-code {
  color: var(--text3); font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0; white-space: nowrap;
}
/* 자동완성 컨테이너 폭 확장 (종목명+시장 라벨 한 줄에 들어가도록) */
.osc-suggest { min-width: 280px; }
/* 사이드바 관심종목 자동완성 — 220px 사이드바 폭 초과 방지 */
#wlNameSuggest { min-width: 0; max-width: 100%; }
#wlNameSuggest .osc-suggest-item { padding: 6px 8px; font-size: 11px; }
#wlNameSuggest .osc-suggest-name { font-size: 11px; }
#wlNameSuggest .osc-suggest-code { font-size: 10px; }

/* 알림 리스트 */
.alert-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 6px;
}
.alert-item.triggered { border-left: 3px solid var(--green); }

/* 듀얼 캘린더 팝업 */
.osc-date-picker {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 300; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 12px;
}
.osc-cal-wrap { display: flex; gap: 24px; }
.osc-calendar { width: 260px; }
.osc-cal-title {
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 6px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
  color: var(--text);
}
.osc-cal-nav {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-bottom: 10px;
}
.osc-cal-nav button {
  background: none; border: none; color: var(--text); padding: 4px 8px;
  cursor: pointer; font-size: 14px; border-radius: 4px; font-weight: 600;
}
.osc-cal-nav button:hover { background: var(--bg3); color: var(--accent); }
.osc-cal-nav select {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.osc-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
}
.osc-cal-weekday {
  text-align: center; font-size: 11px; font-weight: 700; padding: 6px 0;
  color: var(--text2);
}
.osc-cal-weekday.sun { color: #f85149; }
.osc-cal-weekday.sat { color: #58a6ff; }
.osc-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.osc-cal-cell {
  text-align: center; padding: 7px 4px; font-size: 12px;
  cursor: pointer; border-radius: 4px; color: var(--text);
  user-select: none; transition: background 0.1s;
}
.osc-cal-cell:hover:not(.other) { background: var(--bg3); }
.osc-cal-cell.other { color: var(--text3); opacity: 0.4; cursor: default; }
.osc-cal-cell.sun:not(.other) { color: #f85149; }
.osc-cal-cell.sat:not(.other) { color: #58a6ff; }
.osc-cal-cell.selected {
  background: var(--accent) !important; color: #fff !important;
  font-weight: 700; box-shadow: 0 2px 8px rgba(88,166,255,0.4);
}
.osc-cal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.osc-file-status {
  font-size: 11px; color: var(--text3); max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.osc-file-status.loaded { color: var(--accent3); }
.osc-row-count {
  font-size: 12px; color: var(--text2); white-space: nowrap;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg3); border: 1px solid var(--border);
}
.osc-row-count:empty { display: none; }
.osc-row-count b { color: var(--accent3); font-weight: 600; }

/* ── 오실레이터 패널 ── */
#oscResult {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
  padding: 0 14px 14px; gap: 0;
}
.osc-resizer {
  width: 8px; flex-shrink: 0; cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
}
.osc-resizer::before {
  content: ''; display: block;
  width: 3px; height: 40px; border-radius: 2px;
  background: var(--border); transition: background 0.15s, height 0.15s;
}
.osc-resizer:hover::before, .osc-resizer.dragging::before {
  background: var(--accent); height: 60px;
}
.osc-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--bg2);
}
.osc-pane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--bg3);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.osc-table-wrap { flex: 1; overflow: auto; }
.osc-table-wrap table { width: 100%; border-collapse: collapse; font-size: 11px; }
.osc-table-wrap th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg4); color: var(--text2);
  padding: 5px 8px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.osc-table-wrap td {
  padding: 4px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.osc-table-wrap td:first-child { text-align: center; font-family: 'JetBrains Mono', monospace; color: var(--text2); }
.osc-table-wrap tr:hover td { background: var(--bg3); }
.osc-calc { color: var(--accent3); }
.osc-empty-cell { color: var(--text3); text-align: center !important; }
.osc-group-header {
  text-align: center !important; background: var(--bg4);
  color: var(--accent3); font-weight: 700; letter-spacing: .05em;
  border-bottom: 2px solid var(--accent3) !important;
}
.osc-view-btn { font-size: 11px; padding: 2px 8px; }
.osc-view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.osc-layout-btn { font-size: 11px; padding: 2px 8px; }
.osc-layout-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.osc-tip {
  display: inline-block; font-size: 9px; opacity: 0.55;
  margin-left: 2px; vertical-align: super; cursor: help;
}
.osc-pct-toggle {
  display: inline-block; font-size: 10px; margin-left: 4px;
  padding: 1px 5px; border-radius: 3px; font-weight: 600;
  background: var(--bg4); color: var(--text3); border: 1px solid var(--border);
  transition: all 0.1s;
}
.osc-pct-toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.osc-table-wrap th:hover .osc-pct-toggle { border-color: var(--accent3); color: var(--text); }
.osc-table-wrap th:hover .osc-pct-toggle.on { color: #fff; }
.osc-table-wrap th[title], .osc-table-wrap td[title] { cursor: help; }
.osc-warmup {
  background: rgba(240, 180, 80, 0.10) !important;
  color: var(--text3) !important;
  font-style: italic;
}
#btnOscShowWarmup.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.osc-table-wrap tbody tr { cursor: pointer; transition: background 0.1s; }
.osc-table-wrap tbody tr.osc-row-selected td {
  background: rgba(88, 166, 255, 0.18) !important;
  color: var(--text) !important;
}
.osc-table-wrap tbody tr.osc-row-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── 기간 선택 버튼 ── */
.period-btn {
  color: var(--text2); border: 1px solid var(--border);
  /* form-control(input) 높이와 통일: padding 6px 12px, font-size 13px */
  padding: 6px 12px; font-size: 13px; line-height: 1.4;
}
.period-btn.active { border-color: var(--accent3); color: var(--accent3); background: var(--tag-bg); }
.period-btn:hover  { border-color: var(--accent3); color: var(--text); }

/* ── 템플릿 바 (오실레이터) ───────────────────────────────────────── */
.osc-tpl-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin-bottom: 8px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  flex-wrap: wrap;
}
.osc-tpl-label { font-size: 12px; color: var(--text2); font-weight: 600; }
.osc-tpl-select { min-width: 260px; max-width: 380px; }
.osc-tpl-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.osc-tpl-summary { font-size: 11px; color: var(--text3); margin-left: auto; }

/* ── 템플릿 관리 모달 ───────────────────────────────────────────── */
.tpl-modal {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.tpl-modal-card {
  width: min(1500px, 96vw); height: min(820px, 92vh);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.tpl-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg3); font-weight: 600;
}
.tpl-modal-body {
  flex: 1; display: flex; min-height: 0;
}
.tpl-list-pane {
  width: 280px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.tpl-list-toolbar { padding: 10px; display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.tpl-list { flex: 1; overflow-y: auto; padding: 6px; }
.tpl-list-item {
  padding: 10px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px;
  border: 1px solid transparent;
}
.tpl-list-item:hover { background: var(--bg3); }
.tpl-list-item.active { background: var(--bg3); border-color: var(--accent3); }
.tpl-list-item-name { font-weight: 500; color: var(--text); font-size: 13px; }
.tpl-list-item-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }

.tpl-edit-pane { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.tpl-edit-row { display: flex; gap: 8px; align-items: center; }
.tpl-edit-row label { font-size: 12px; color: var(--text2); min-width: 70px; }
.tpl-add-row {
  display: grid; grid-template-columns: 120px 1.2fr 100px 1.5fr auto;
  gap: 6px; padding: 8px; background: var(--bg3); border-radius: 6px; align-items: center;
}
/* 종목 추가 row의 버튼은 입력창(form-control) 높이와 맞춤 */
.tpl-add-row .btn {
  height: 36px; padding: 0 14px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
  box-sizing: border-box;
}
.tpl-add-row .btn span { font-size: 10px; opacity: .75; }
.tpl-items-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tpl-items-table th, .tpl-items-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tpl-items-table th { background: var(--bg3); color: var(--text2); font-weight: 600; position: sticky; top: 0; }
.tpl-ind-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
}
.tpl-ind-chip-dot { width: 8px; height: 8px; border-radius: 50%; }
.tpl-empty {
  display: flex; align-items: center; justify-content: center;
  flex: 1; color: var(--text3); font-size: 13px;
}

/* ── 산업구분 서브모달 ───────────────────────────────────────── */
.ind-modal {
  position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.ind-modal-card {
  width: min(720px, 92vw);
  max-height: 92vh;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ind-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg3);
}
.ind-modal-body { padding: 10px 14px; overflow-y: visible; }
.ind-add-row {
  display: grid; grid-template-columns: 110px 1fr 44px 1.3fr auto; gap: 6px;
  padding: 6px; background: var(--bg3); border-radius: 6px; margin-bottom: 8px; align-items: center;
}
.ind-add-row .form-control { padding: 4px 8px; font-size: 12px; height: 28px; }
.ind-list-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.ind-list-table th { padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--bg3); font-weight: 600; color: var(--text2); }
.ind-list-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.ind-list-table .form-control { padding: 3px 6px; font-size: 12px; height: 26px; }
.ind-list-table input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--border); }
.ind-list-table .btn.btn-sm { padding: 2px 6px; font-size: 12px; }

/* ── 템플릿 분석 진행/파일매칭/결과 ───────────────────────────── */
.tpl-match-modal, .tpl-result-modal {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.tpl-match-card {
  width: min(1100px, 94vw); max-height: 90vh;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.tpl-match-header, .tpl-match-footer {
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg3);
}
.tpl-match-footer { border-top: 1px solid var(--border); border-bottom: none; display: flex; justify-content: flex-end; gap: 6px; }
.tpl-match-body { flex: 1; overflow-y: auto; padding: 14px; }
.tpl-match-drop {
  border: 2px dashed var(--border); border-radius: 8px; padding: 20px;
  text-align: center; color: var(--text3); margin-bottom: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tpl-match-drop.drag-over { border-color: var(--accent3); background: var(--tag-bg); color: var(--text); }
.tpl-match-hint { font-size: 11px; color: var(--text3); margin-top: 6px; }

.tpl-period-block {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; background: var(--bg3); border-radius: 6px; margin-bottom: 10px;
}
.tpl-period-label { font-size: 11px; color: var(--text2); font-weight: 600; margin-bottom: 4px; }
.tpl-period-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.tpl-period-row .form-control,
.tpl-period-row .btn {
  height: 30px; box-sizing: border-box; font-size: 12px; white-space: nowrap;
}
.tpl-period-row .btn { padding: 0 10px; display: inline-flex; align-items: center; }
.tpl-period-row .osc-ymd-input { padding-top: 0; padding-bottom: 0; }
.tpl-period-row select.form-control { padding-top: 0; padding-bottom: 0; }
.tpl-period-row input[type=number],
.tpl-period-row input[type=date] { padding-top: 0; padding-bottom: 0; }

/* 템플릿 매칭 모달 안쪽 — 개별 조회와 동일한 캘린더 UI 재사용 */
.tpl-date-picker {
  position: fixed !important; z-index: 1400;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.tpl-match-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.tpl-match-table th, .tpl-match-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tpl-match-status-ok { color: var(--accent3); font-weight: 600; }
.tpl-match-status-miss { color: #f85149; font-weight: 600; }

.tpl-result-card {
  width: min(1800px, 98vw); height: 94vh;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.tpl-result-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg3);
}
.tpl-result-toolbar {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px;
}
.tpl-result-body { flex: 1; overflow-y: auto; padding: 14px; }
.tpl-multi-chart { height: 300px; background: var(--bg3); border-radius: 6px; margin-bottom: 14px; }
.tpl-multi-chart.collapsed { display: none; }
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tpl-grid.cols-1 { grid-template-columns: 1fr; }
.tpl-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tpl-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tpl-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1500px) { .tpl-grid.cols-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1200px) { .tpl-grid.cols-4 { grid-template-columns: repeat(3, 1fr); } .tpl-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tpl-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .tpl-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
.tpl-card {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
}
.tpl-card-header {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.tpl-card-bar { width: 4px; height: 28px; border-radius: 2px; }
.tpl-card-title { font-weight: 600; color: var(--text); font-size: 13px; }
.tpl-card-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.tpl-card-industries {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px;
}
.tpl-card-industry-pill {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(56,139,253,.1); color: var(--accent3);
  border: 1px solid rgba(56,139,253,.25);
  font-family: inherit; line-height: 1.4;
}
.tpl-card-chart { height: 280px; }
.tpl-card-dbdates {
  padding: 4px 12px; font-size: 11px;
  background: var(--bg4); border-top: 1px solid var(--border2);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
}
.tpl-card-dbdate-cell { display: inline-flex; align-items: center; gap: 3px; }
.tpl-card-footer { padding: 6px 12px; font-size: 11px; color: var(--text3); border-top: 1px solid var(--border); display: flex; justify-content: space-between; }
.tpl-card-error { padding: 20px; color: #f85149; text-align: center; font-size: 12px; }
.tpl-card-db-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text3);
  white-space: nowrap;
  cursor: help;
}
.tpl-card-db-badge[data-level="full"]    { background: rgba(63,185,80,.15);  border-color: rgba(63,185,80,.4);  color: var(--green); }
.tpl-card-db-badge[data-level="partial"] { background: rgba(240,136,62,.15); border-color: rgba(240,136,62,.4); color: var(--orange,#f0883e); }
.tpl-card-db-badge[data-level="missing"] { background: rgba(248,81,73,.15);  border-color: rgba(248,81,73,.4);  color: var(--red); }

/* ── DbStockTree (공통 종목 트리 사이드바) ── */
.dst-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dst-sidebar-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dst-search-wrap { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dst-search-wrap input {
  width: 100%; box-sizing: border-box;
  font-size: 12px; padding: 5px 8px;
  background: var(--bg4); border: 1px solid var(--border2); border-radius: 4px;
  color: var(--text);
}
.dst-group-wrap {
  display: flex; gap: 4px; align-items: center;
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.dst-group-wrap select {
  flex: 1; font-size: 11px; padding: 4px 6px;
  background: var(--bg4); border: 1px solid var(--border2); border-radius: 4px;
  color: var(--text);
}
.dst-stat { padding: 4px 10px; font-size: 11px; color: var(--text3); border-bottom: 1px solid var(--border); }
.dst-tree { flex: 1; overflow-y: auto; }
.dst-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 12px; }
.dst-group { border-bottom: 1px solid var(--border); }
.dst-group-head {
  padding: 6px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); font-size: 11px;
}
.dst-group-head:hover { background: var(--bg4); }
.dst-caret { font-size: 9px; color: var(--text3); width: 10px; }
.dst-group-label { flex: 1; font-weight: 600; color: var(--text2); }
.dst-group-count {
  font-size: 10px; color: var(--text3);
  background: var(--bg2); padding: 1px 6px; border-radius: 8px;
}
.dst-item {
  padding: 6px 10px 6px 22px;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.dst-item:hover { background: var(--bg3); }
.dst-item.selected { background: rgba(56,139,253,.15); border-left: 2px solid var(--accent3); padding-left: 20px; }
.dst-item-name { font-size: 12px; color: var(--text); font-weight: 500; }
.dst-item-meta {
  margin-top: 2px; display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--text3);
}
.dst-item-meta code { font-family: monospace; color: var(--text3); }
.dst-badge {
  font-size: 9px; padding: 1px 4px; border-radius: 3px;
  background: rgba(63,185,80,.18); color: var(--green); border: 1px solid rgba(63,185,80,.3);
}
.dst-badge-inv { background: rgba(188,140,255,.18); color: #bc8cff; border-color: rgba(188,140,255,.3); }
.dst-badge.zero { background: var(--bg4); color: var(--text3); border-color: var(--border2); opacity: .5; }
.dst-item-date {
  margin-left: auto; font-size: 10px; color: var(--text3);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
.dst-item-date-empty { opacity: .4; }
.dst-date-only-price { color: #58a6ff; }
.dst-date-only-inv   { color: #bc8cff; }

/* 시세·투자자 일자가 다를 때 한 줄 압축 표기 (행 높이 고정) */
.dst-date-pair {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.dst-mini {
  font-size: 10px; padding: 0 1px;
  font-family: 'JetBrains Mono', monospace;
}
.dst-mini.dst-mini-price { color: #58a6ff; }
.dst-mini.dst-mini-inv   { color: #bc8cff; }
.dst-mini.newer { font-weight: 700; filter: brightness(1.2); }
.dst-mini.older { opacity: .55; }
.dst-mini.dst-mini-empty { color: var(--text3); opacity: .35; }

/* 오실레이터 결과 모달 — 헤더 현재가 (KIS quote) */
.osc-result-live-price {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 14px;
  background: var(--bg3); border: 1px solid var(--border2);
  font-size: 12px; line-height: 1;
}
/* 시세/투자자 데이터 최종일자 배지 (모달 헤더) */
.osc-result-data-dates {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
}
.osc-result-data-date {
  padding: 3px 8px; border-radius: 12px;
  background: var(--bg4); border: 1px solid var(--border2);
  font-size: 11px; line-height: 1;
}
.osc-live-tag {
  font-size: 10px; color: var(--text3); font-weight: 600;
  padding: 1px 5px; border-radius: 3px; background: var(--bg4);
}
.osc-live-price {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
}
.osc-live-vrss { font-size: 11px; font-weight: 600; }
.osc-live-price.up, .osc-live-vrss.up { color: #f85149; }   /* 한국식: 상승=빨강 */
.osc-live-price.dn, .osc-live-vrss.dn { color: #58a6ff; }   /* 한국식: 하락=파랑 */
.osc-live-price.flat, .osc-live-vrss.flat { color: var(--text2); }
.osc-live-time {
  font-size: 10px; color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 4px;
}
.osc-result-live-loading {
  font-size: 11px; color: var(--text3);
  padding: 3px 10px; border-radius: 14px;
  background: var(--bg3); border: 1px dashed var(--border2);
}

/* 오실레이터 결과 모달 — 차트 탭 (캔들 + 거래량 + 지지/저항) */
.osc-result-view--chart {
  flex-direction: column; padding: 10px 14px; gap: 8px;
  height: 100%; overflow: hidden;
}
.osc-candle-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text);
}
.osc-candle-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--text3);
  padding: 4px 0;
}
.osc-candle-legend .legend-item { display: inline-flex; align-items: center; gap: 4px; }
.osc-candle-legend .legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}
.osc-candle-legend .legend-bar {
  display: inline-block; width: 14px; height: 6px; border-radius: 1px;
}
.osc-candle-legend .legend-line {
  display: inline-block; width: 16px; height: 0; border-top-width: 2px; border-top-style: dashed;
}
.osc-candle-chart {
  flex: 1; min-height: 400px; height: 100%;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2);
}

/* ── 오실레이터 결과 PDF 인쇄용 — body.print-osc-result 클래스 진입 시 활성 ── */
@media print {
  body.print-osc-result {
    background: #fff !important; color: #000 !important;
  }
  /* 결과 모달 외 모든 영역 숨김 */
  body.print-osc-result > *:not(#oscResultModal) {
    display: none !important;
  }
  body.print-osc-result #oscResultModal {
    position: static !important; inset: auto !important;
    background: #fff !important; display: block !important;
    width: 100% !important; height: auto !important;
    overflow: visible !important;
  }
  body.print-osc-result .osc-result-card {
    width: 100% !important; max-width: none !important;
    height: auto !important; max-height: none !important;
    box-shadow: none !important; border: none !important;
    background: #fff !important; color: #000 !important;
    overflow: visible !important;
  }
  /* 인쇄에서 불필요한 컨트롤 숨김 */
  body.print-osc-result .osc-result-header > div:last-child,
  body.print-osc-result .osc-result-vtab,
  body.print-osc-result .dataZoom,
  body.print-osc-result .osc-result-sidebar { display: none !important; }
  /* 모든 탭 콘텐츠 펼침 */
  body.print-osc-result .osc-result-view {
    display: block !important; page-break-inside: avoid;
  }
  body.print-osc-result .osc-result-content,
  body.print-osc-result .osc-result-news,
  body.print-osc-result .osc-result-table,
  body.print-osc-result .osc-candle-chart {
    overflow: visible !important; max-height: none !important; height: auto !important;
  }
  /* 차트는 페이지 분할되지 않게 */
  body.print-osc-result .osc-result-chart,
  body.print-osc-result .osc-candle-chart {
    page-break-inside: avoid; break-inside: avoid;
    min-height: 400px; max-height: 600px;
  }
  body.print-osc-result table { page-break-inside: auto; }
  body.print-osc-result tr { page-break-inside: avoid; page-break-after: auto; }
  body.print-osc-result thead { display: table-header-group; } /* 페이지마다 헤더 반복 */
  /* 다크모드 텍스트 → 흰 배경에서 보이게 */
  body.print-osc-result, body.print-osc-result * {
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  @page { margin: 12mm; size: A4; }
}
.dst-mini-sep { color: var(--text3); font-size: 9px; opacity: .5; padding: 0 1px; }
/* 두 일자 인라인 묶음 — 사이 간격 */
.dst-date-pair { display: inline-flex; align-items: center; gap: 6px; }

/* 트리 새로고침 버튼 — 클릭 시 회전 애니메이션으로 동작 가시화 */
@keyframes dst-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dst-refresh-btn { transition: background .15s; }
.dst-refresh-btn.spinning {
  animation: dst-spin 0.6s linear infinite;
  background: var(--accent3);
  color: white;
}
.dst-refresh-btn:disabled { cursor: progress; opacity: .8; }

/* 시세 API 토글이 DB 모드에서 비활성일 때 — 회색 + 클릭 불가 */
.inv-mode-btn.inv-mode-disabled,
.inv-mode-btn:disabled {
  cursor: not-allowed;
  opacity: .35;
  filter: grayscale(.7);
}
.inv-mode-btn.inv-mode-disabled:hover,
.inv-mode-btn:disabled:hover { background: inherit; }

/* 분석 결과 DB 자동 저장 토글 — inv-mode-bar 안에 들어가는 작은 스위치 */
.osc-autosave-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  padding: 4px 10px; border-radius: 16px;
  background: var(--bg3); border: 1px solid var(--border2);
  transition: background .15s, border-color .15s;
}
.osc-autosave-toggle:hover { background: var(--bg4); border-color: var(--border); }
.osc-autosave-toggle input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.osc-autosave-track {
  position: relative; display: inline-block;
  width: 28px; height: 14px; border-radius: 7px;
  background: var(--bg4); border: 1px solid var(--border2);
  transition: background .15s, border-color .15s;
}
.osc-autosave-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text3);
  transition: transform .18s ease, background .18s;
}
.osc-autosave-label {
  font-size: 11px; font-weight: 600; color: var(--text3);
  white-space: nowrap;
}
/* ON 상태 */
.osc-autosave-toggle.on {
  background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.45);
}
.osc-autosave-toggle.on .osc-autosave-track {
  background: #3fb950; border-color: #3fb950;
}
.osc-autosave-toggle.on .osc-autosave-thumb {
  background: #fff; transform: translateX(14px);
}
.osc-autosave-toggle.on .osc-autosave-label {
  color: #3fb950;
}

/* 데이터연동 — 진행 모달 */
.ds-prog-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
}
.ds-prog-card {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px;
  padding: 22px 26px; width: min(420px, 94vw); max-width: 94vw;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.ds-prog-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.ds-prog-current {
  font-size: 12px; color: var(--text2); margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-prog-bar {
  height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden;
  margin-bottom: 8px;
}
.ds-prog-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent3), #3fb950);
  transition: width .4s ease;
}
.ds-prog-stats { font-size: 11px; color: var(--text3); font-family: 'JetBrains Mono', monospace; }
.ds-prog-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
}
.ds-prog-elapsed { font-size: 11px; color: var(--text3); }

/* 템플릿 분석 — 데이터 소스 선택 */
.tpl-src-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px;
}
.tpl-src-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.tpl-src-opt {
  font-size: 12px; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.tpl-src-opt input { cursor: pointer; }
.tpl-src-sub { font-size: 11px; color: var(--text3); font-weight: 400; }
.tpl-src-hint { margin-left: auto; font-size: 11px; color: var(--accent3); }
.tpl-file-load-disabled { opacity: .35; pointer-events: none; filter: grayscale(.5); }

/* 템플릿 결과 모달 — 데이터 소스 뱃지 (잘 보이게 큼직하게) */
.tpl-result-src-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 6px 14px; border-radius: 20px;
  border: 2px solid; box-shadow: 0 0 12px rgba(0,0,0,.3);
}
.tpl-result-src-badge.src-db {
  background: rgba(63,185,80,.18); color: #3fb950; border-color: #3fb950;
  text-shadow: 0 0 4px rgba(63,185,80,.5);
}
.tpl-result-src-badge.src-live {
  background: rgba(255,166,87,.18); color: #ffa657; border-color: #ffa657;
  text-shadow: 0 0 4px rgba(255,166,87,.5);
}
/* 카드별 작은 데이터 소스 뱃지 (템플릿 결과 그리드의 종목 카드) */
.tpl-card-src-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 10px; border: 1px solid;
  white-space: nowrap;
}
.tpl-card-src-badge.src-db {
  background: rgba(63,185,80,.15); color: #3fb950; border-color: rgba(63,185,80,.5);
}
.tpl-card-src-badge.src-live {
  background: rgba(255,166,87,.15); color: #ffa657; border-color: rgba(255,166,87,.5);
}
.tpl-card-verify-btn {
  font-size: 10px; padding: 2px 6px; line-height: 1;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--text2); cursor: pointer; border-radius: 4px;
}
.tpl-card-verify-btn:hover { background: var(--accent3); color: white; border-color: var(--accent3); }

/* 화면 헤더에 표시하는 작은 API 출처 뱃지 (시세·투자자 KIS) */
.api-src-mini {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(56,139,253,.15); color: #58a6ff;
  border: 1px solid rgba(56,139,253,.4);
  white-space: nowrap;
}

/* 연기금 매수 Top 모듈 (LMH-COLAB) */
.pension-list { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.pension-head, .pension-row {
  display: grid;
  grid-template-columns: 36px 28px 1fr 80px 90px 90px 90px 90px 50px;
  align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.pension-head {
  background: var(--bg3); position: sticky; top: 0; z-index: 1;
  font-weight: 600; color: var(--text2); font-size: 11px;
}
.pension-row:hover { background: var(--bg3); }
.pension-rank { color: var(--text3); font-family: 'JetBrains Mono', monospace; text-align: right; }
.pension-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pension-code { color: var(--text3); font-family: 'JetBrains Mono', monospace; }
.pension-val {
  font-family: 'JetBrains Mono', monospace; text-align: right;
  font-size: 12px; color: var(--text2);
}
.pension-val.net.pension-up { color: #3fb950; font-weight: 700; }
.pension-val.net.pension-dn { color: #f85149; font-weight: 700; }
.pension-val.bid { color: #58a6ff; }
.pension-val.ask { color: var(--text3); }
.pension-vol { font-family: 'JetBrains Mono', monospace; text-align: right; font-size: 11px; color: var(--text3); }
.pension-actions { text-align: center; }
.pension-actions .btn { padding: 2px 6px; font-size: 11px; }
.pension-status { padding: 8px 0; }

/* 공통 템플릿 저장/이동 모달 (TplPicker) */
.tpl-picker-overlay {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.tpl-picker-card {
  width: min(900px, 96vw); max-height: 92vh;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.tpl-picker-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg3);
}
.tpl-picker-body {
  flex: 1; overflow: auto; padding: 14px; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tpl-picker-mode-row {
  display: flex; gap: 18px; padding: 8px 12px;
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px;
}
.tpl-picker-mode-opt {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; color: var(--text);
}
.tpl-picker-mode-label { font-weight: 500; }
.tpl-picker-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}
.tpl-picker-label { font-size: 12px; color: var(--text2); font-weight: 600; white-space: nowrap; }
.tpl-picker-items-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.tpl-picker-items-wrap {
  border: 1px solid var(--border); border-radius: 6px;
  max-height: 320px; overflow: auto;
}
.tpl-picker-table { width: 100%; font-size: 12px; }
.tpl-picker-table thead th {
  position: sticky; top: 0; background: var(--bg3); z-index: 1;
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.tpl-picker-table tbody td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.tpl-picker-warn { font-size: 12px; color: var(--orange); min-height: 16px; }
.tpl-picker-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg3);
}

/* 데이터 연동 — 스피드 라디오 + 안내 */
.ds-speed-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 4px;
}
@media (max-width: 720px) { .ds-speed-row { grid-template-columns: repeat(2, 1fr); } }
.ds-speed-opt {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border: 1px solid var(--border2); border-radius: 5px;
  background: var(--bg3); cursor: pointer; font-size: 11.5px; color: var(--text);
  transition: border-color .15s, background .15s;
  position: relative;
}
.ds-speed-opt > span:first-of-type { padding-left: 16px; }
.ds-speed-opt:hover { border-color: var(--accent3); }
.ds-speed-opt:has(input:checked) {
  border-color: var(--accent3); background: rgba(56,139,253,.1);
  box-shadow: 0 0 0 1px rgba(56,139,253,.3);
}
.ds-speed-opt input {
  position: absolute; top: 7px; left: 6px; margin: 0;
}
.ds-speed-sub { font-size: 10px; color: var(--text3); padding-left: 16px; }
.ds-speed-hint {
  font-size: 11px; color: var(--text3); line-height: 1.6;
  padding: 6px 8px; background: var(--bg4); border-radius: 4px;
  border-left: 3px solid var(--accent3);
}

/* 데이터 연동 — 스케줄 모달 2열 레이아웃 */
.ds-modal-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 14px; padding: 14px;
}
.ds-modal-col {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0; min-height: 0; overflow: auto;
}
.ds-modal-col-right { overflow: hidden; } /* 종목 리스트 자체가 스크롤되도록 */
.ds-section-fill {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.ds-section-fill .ds-section-body {
  display: flex; flex-direction: column;
}
@media (max-width: 980px) {
  .ds-modal-body { grid-template-columns: 1fr; }
  .ds-modal-col-right { overflow: auto; }
  .ds-section-fill { flex: 0 0 auto; }
  .ds-section-fill .ds-section-body { display: block; }
  #dsForm_tplList { max-height: 280px; }
}

/* 데이터 연동 — 스케줄 모달 섹션 카드 */
.ds-section {
  border: 1px solid var(--border2); border-radius: 8px;
  background: var(--bg3);
}
.ds-section-head {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--bg4); border-bottom: 1px solid var(--border2);
  border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.ds-section-icon { font-size: 14px; line-height: 1; }
.ds-section-sub { font-size: 11px; font-weight: 400; color: var(--text3); margin-left: 4px; }
.ds-section-body {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
}
.ds-section-body .form-control {
  box-sizing: border-box; min-height: 32px;
}
.ds-section-body input.form-control[type="text"],
.ds-section-body input.form-control[type="number"],
.ds-section-body input.form-control[type="time"],
.ds-section-body select.form-control { padding: 6px 10px; }
.ds-field {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px;
}
.ds-label {
  flex: 0 0 auto; min-width: 64px; font-size: 12px; font-weight: 600; color: var(--text2); margin: 0;
}
.ds-sublabel { font-size: 12px; color: var(--text3); }
.ds-checkbox {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text); cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
  transition: background .15s;
}
.ds-checkbox:hover { background: rgba(255,255,255,.04); }
.ds-checkbox input { margin: 0; }
.ds-cron-preview {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--bg4);
  border: 1px dashed var(--border2); border-radius: 5px;
  font-size: 12px; color: var(--text2);
}
.ds-cron-preview code {
  font-family: ui-monospace, monospace; font-size: 11px;
  padding: 2px 6px; background: var(--bg2); border-radius: 3px; color: var(--accent3);
}
.ds-subhead {
  font-size: 12px; font-weight: 600; color: var(--text2);
  margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}
.ds-batch-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ds-batch-input {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text2);
}
.ds-batch-input input {
  width: 60px; padding: 4px 6px;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px;
  color: var(--text); font-size: 12px; text-align: center;
}
.ds-batch-presets { display: inline-flex; gap: 3px; flex-wrap: wrap; margin-left: auto; }

/* 데이터 연동 탭 상단 안내 배너 */
.ds-info-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg3);
  border: 1px solid var(--border2); border-left: 3px solid #3fb950;
  border-radius: 6px; font-size: 12px; color: var(--text2);
}
.ds-info-modes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ds-info-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
  border: 1px solid;
}
.ds-info-pill.safe   { background: rgba(63,185,80,.15);  color: #3fb950; border-color: rgba(63,185,80,.4); }
.ds-info-pill.normal { background: rgba(56,139,253,.15); color: #58a6ff; border-color: rgba(56,139,253,.4); }
.ds-info-pill.fast   { background: rgba(255,166,87,.15); color: #ffa657; border-color: rgba(255,166,87,.4); }

/* 데이터 연동 — 통합 접이식 안내 */
.ds-info-collapse {
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px;
  overflow: hidden;
}
.ds-info-collapse[open] { border-color: var(--accent3); }
.ds-info-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  cursor: pointer; user-select: none;
  list-style: none;
  font-size: 12px;
  transition: background .15s;
}
.ds-info-summary::-webkit-details-marker { display: none; }
.ds-info-summary:hover { background: var(--bg4); }
.ds-info-caret {
  display: inline-block; width: 10px; color: var(--text3); font-size: 9px;
  transition: transform .2s ease;
}
.ds-info-collapse[open] .ds-info-caret { transform: rotate(90deg); }
.ds-info-summary-title { font-weight: 700; color: var(--text); }
.ds-info-summary-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ds-info-summary-hint {
  margin-left: auto; font-size: 11px; color: var(--text3); font-weight: 400;
}
.ds-info-collapse[open] .ds-info-summary-hint::after { content: '— 닫기'; }
.ds-info-body {
  padding: 6px 12px 10px 26px;
  border-top: 1px solid var(--border2);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg2);
}
.ds-info-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 0;
  font-size: 12px;
}
.ds-info-row-head {
  font-weight: 600; color: var(--text); white-space: nowrap;
  min-width: 220px;
}
.ds-info-row-icon { display: inline-block; margin-right: 2px; }
.ds-info-row-body {
  flex: 1; color: var(--text2); line-height: 1.6;
}
.ds-info-row-sub {
  display: block; font-size: 11px; color: var(--text3); margin-top: 2px;
}

/* DB 정합성 검증 모달 (DbVerify) */
.db-verify-overlay {
  position: fixed; inset: 0; z-index: 11500;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.db-verify-card {
  width: min(960px, 96vw); max-height: 92vh;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.db-verify-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg3);
}
.db-verify-body {
  flex: 1; overflow: auto; padding: 12px 14px; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.db-verify-opt {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 6px;
}
.db-verify-info {
  font-size: 11px; color: var(--text3); line-height: 1.6;
  padding: 6px 10px; background: var(--bg4); border-radius: 4px;
  border-left: 3px solid var(--accent3);
}
.db-verify-tips {
  margin: 6px 0; font-size: 11px;
  background: rgba(247,194,38,.06); border: 1px solid rgba(247,194,38,.2);
  border-radius: 5px; padding: 4px 10px;
}
.db-verify-tips summary {
  cursor: pointer; padding: 4px 0;
  color: #f7c226; font-weight: 600; outline: none;
  list-style: none;
}
.db-verify-tips summary::-webkit-details-marker { display: none; }
.db-verify-tips summary::before {
  content: '▶'; font-size: 9px; margin-right: 5px;
  display: inline-block; transition: transform .15s;
}
.db-verify-tips[open] summary::before { transform: rotate(90deg); }
.db-verify-tips-body {
  padding: 4px 6px 8px; color: var(--text2); line-height: 1.65;
}
.db-verify-tips-body p { margin: 8px 0 4px; font-size: 12px; }
.db-verify-tips-body p:first-child { margin-top: 4px; }
.db-verify-tips-body ul { margin: 0; padding-left: 20px; }
.db-verify-tips-body li { margin: 2px 0; }
.db-verify-tips-body b { color: var(--text); }

.db-verify-result { display: flex; flex-direction: column; gap: 6px; }

/* 검증 진행바 */
.db-verify-progress {
  padding: 10px 12px; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.db-verify-prog-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text2);
}
.db-verify-prog-current {
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.db-verify-prog-count { font-weight: 600; color: var(--accent3); margin-left: 8px; }
.db-verify-prog-bar {
  height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden;
}
.db-verify-prog-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent3), #3fb950);
  transition: width .3s ease;
}
.db-verify-prog-stats {
  font-size: 11px; color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
}
.db-verify-loading { padding: 24px; text-align: center; color: var(--text3); font-size: 13px; }
.db-verify-row {
  border: 1px solid var(--border2); border-radius: 6px; background: var(--bg3);
  overflow: hidden;
}
.db-verify-row[data-verdict="ok"]       { border-left: 3px solid #3fb950; }
.db-verify-row[data-verdict="partial"]  { border-left: 3px solid var(--orange); }
.db-verify-row[data-verdict="mismatch"] { border-left: 3px solid #f85149; }
.db-verify-row[data-verdict="error"]    { border-left: 3px solid var(--text3); }
.db-verify-row-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 12px;
}
.db-verify-row-head:hover { background: var(--bg4); }
.db-verify-caret { width: 10px; color: var(--text3); font-size: 9px; }
.db-verify-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
  border: 1px solid;
}
.db-verify-pill.ok       { background: rgba(63,185,80,.18);  color: #3fb950; border-color: rgba(63,185,80,.5); }
.db-verify-pill.partial  { background: rgba(255,166,87,.18); color: #ffa657; border-color: rgba(255,166,87,.5); }
.db-verify-pill.mismatch { background: rgba(248,81,73,.18);  color: #f85149; border-color: rgba(248,81,73,.5); }
.db-verify-pill.error    { background: var(--bg4); color: var(--text3); border-color: var(--border2); }
.db-verify-row-sum { color: var(--text3); font-size: 11px; margin-left: 4px; }
.db-verify-row-detail { padding: 8px 14px; background: var(--bg2); border-top: 1px solid var(--border2); }
.db-verify-kind { margin-bottom: 8px; }
.db-verify-kind-head { font-weight: 600; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.db-verify-section {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 4px 0; font-size: 11px;
}
.db-verify-section-label { font-weight: 600; min-width: 130px; }
.db-verify-diff-table { width: 100%; font-size: 11px; margin-top: 4px; border-collapse: collapse; }
.db-verify-diff-table thead th {
  text-align: left; padding: 4px 8px; background: var(--bg4); color: var(--text2);
  border-bottom: 1px solid var(--border2);
}
.db-verify-diff-table tbody td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.db-verify-diff-table .num { font-family: 'JetBrains Mono', monospace; text-align: right; }
.db-verify-warn { font-size: 12px; color: #f85149; min-height: 16px; }
.db-verify-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg3);
}
.dst-autocomplete {
  position: absolute; left: 8px; right: 8px; top: 100%;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); z-index: 100;
  max-height: 280px; overflow-y: auto;
  margin-top: 2px;
}
.dst-ac-item {
  padding: 6px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.dst-ac-item:last-child { border-bottom: none; }
.dst-ac-item:hover, .dst-ac-item.highlight { background: var(--bg4); }
.dst-ac-name { flex: 1; color: var(--text); font-weight: 500; }
.dst-ac-code { font-family: monospace; color: var(--text3); font-size: 11px; }
.dst-ac-mkt { font-size: 10px; color: var(--text3); padding: 1px 5px; background: var(--bg4); border-radius: 3px; }

/* 오실레이터 DB 모드: 사이드바가 콘텐츠를 밀어내도록 */
#panel-oscillator.db-mode > *:not(.osc-db-sidebar) {
  margin-left: 260px;
  transition: margin-left .2s ease;
}

/* 진행 오버레이 — 매칭 모달(1100) 위에 표시 */
.tpl-progress {
  position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
}
.tpl-progress-card {
  background: var(--bg2); border: 1px solid var(--accent3); border-radius: 12px;
  padding: 24px 30px 20px; width: min(620px, 94vw); max-width: 94vw; text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
.tpl-progress-name { font-size: 13px; color: var(--text2); font-weight: 500; margin-bottom: 4px; }
.tpl-progress-counter {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin: 2px 0 6px; line-height: 1.1;
}
.tpl-progress-counter > #tplProgressDone {
  font-size: 46px; font-weight: 700; color: var(--accent3);
  font-family: 'JetBrains Mono', monospace;
}
.tpl-progress-counter > #tplProgressTotal {
  font-size: 30px; font-weight: 500; color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
}
.tpl-progress-sep { font-size: 32px; color: var(--text3); font-weight: 300; }
.tpl-progress-pct { font-size: 16px; color: var(--text3); font-weight: 500; margin-left: 6px; }
.tpl-progress-bar { width: 100%; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; margin: 10px 0 6px; }
.tpl-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent3), #79c0ff); transition: width .25s; }
.tpl-progress-step { font-size: 12px; color: var(--text2); min-height: 18px; }
.tpl-progress-list {
  margin-top: 12px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px; padding: 4px;
  text-align: left; font-size: 12px; background: var(--bg3);
}
.tpl-prog-item {
  padding: 4px 8px; display: flex; align-items: center; gap: 8px; border-radius: 4px;
  transition: background .15s;
}
.tpl-prog-item.running { background: rgba(88, 166, 255, .14); color: var(--accent3); font-weight: 600; }
.tpl-prog-item.done    { color: var(--text2); }
.tpl-prog-item.done .tpl-prog-icon { color: var(--accent3); }
.tpl-prog-item.failed  { color: #f85149; }
.tpl-prog-item.pending { color: var(--text3); }
.tpl-prog-icon { width: 16px; text-align: center; font-weight: 700; flex-shrink: 0; }
.tpl-prog-code { color: var(--text3); font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-left: auto; }

.tpl-col-active,
.tpl-view-active { border-color: var(--accent3) !important; color: var(--accent3) !important; background: var(--tag-bg) !important; }

/* ═══════════════════════════════════════════════════════════════ */
/* LMH-COLAB 탭 — 좌측 내부 사이드바 + 우측 모듈 컨텐츠             */
/* ═══════════════════════════════════════════════════════════════ */
.colab-layout {
  display: flex; height: calc(100vh - 60px); overflow: hidden;
}
.colab-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.colab-sidebar-title {
  padding: 14px 16px 10px;
  font-weight: 700; font-size: 13px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
#colabModuleList { flex: 1; overflow-y: auto; padding: 8px; }
.colab-mod-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 6px; cursor: pointer;
  margin-bottom: 4px; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.colab-mod-item:hover { background: var(--bg3); }
.colab-mod-item.active { background: var(--bg3); border-color: var(--accent3); }
.colab-mod-ico { font-size: 18px; line-height: 1; flex-shrink: 0; }
.colab-mod-name { font-weight: 600; font-size: 13px; color: var(--text); }
.colab-mod-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.colab-sidebar-foot { padding: 10px 14px; border-top: 1px solid var(--border); }

.colab-content {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  background: var(--bg);
}
.colab-module { display: none; }
.colab-module.active { display: block; }

.colab-module-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.colab-module-title {
  font-size: 18px; font-weight: 700; color: var(--text);
}
.colab-module-sub { font-size: 12px; color: var(--text3); margin-top: 4px; }

.colab-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
}
.colab-card-title {
  font-size: 12px; font-weight: 700; color: var(--text2);
  margin-bottom: 10px; letter-spacing: .3px;
}
.colab-card-result { padding: 0; overflow: hidden; }

.colab-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.colab-params label {
  font-size: 11px; color: var(--text2); display: flex; flex-direction: column; gap: 3px;
}
.colab-params .form-control { font-size: 12px; padding: 4px 8px; height: 28px; }

.colab-result-tabs {
  display: flex; gap: 2px; padding: 10px 10px 0; background: var(--bg3);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.colab-rtab { background: transparent; color: var(--text2); border: 1px solid transparent; border-bottom: none; }
.colab-rtab:hover { color: var(--text); }
.colab-rtab.active {
  background: var(--bg2); color: var(--accent3);
  border-color: var(--border); border-bottom-color: var(--bg2);
  position: relative; top: 1px;
}
.colab-result-body { padding: 14px; min-height: 300px; }
.colab-result-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
.colab-result-body th,
.colab-result-body td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.colab-result-body th { background: var(--bg3); color: var(--text2); font-weight: 600; position: sticky; top: 0; }
.colab-result-body td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.colab-ind-section { margin-bottom: 20px; border-left: 4px solid var(--accent3); padding-left: 12px; }
.colab-ind-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.colab-ind-section-name { font-weight: 700; font-size: 14px; }
.colab-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.colab-stock-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.colab-stock-card-chart { height: 200px; }
.colab-stock-card-title { font-weight: 600; font-size: 12px; color: var(--text); margin-bottom: 4px; }
.colab-stock-card-meta { font-size: 10px; color: var(--text3); }

.colab-chart-wrap { height: 500px; background: var(--bg3); border-radius: 6px; padding: 8px; }

/* 개발자 도구 탭 — 내부 탭 전환 (display는 .panel.active 규칙이 처리) */
#panel-devtools { flex-direction: column; height: calc(100vh - 60px); }
.devtools-tabs {
  display: flex; gap: 2px;
  padding: 10px 16px 0; background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.devtools-tab {
  background: transparent; color: var(--text2);
  border: 1px solid transparent; border-bottom: none;
  padding: 8px 16px; font-size: 13px; cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.devtools-tab:hover { color: var(--text); background: var(--bg3); }
.devtools-tab.active {
  background: var(--bg); color: var(--accent3);
  border-color: var(--border); border-bottom: 1px solid var(--bg);
  position: relative; top: 1px; font-weight: 600;
}
.devtools-section { flex: 1; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
#dtSec-explorer > .explorer-top,
#dtSec-explorer > .explorer-body { margin-left: 0; }

/* 산업별 섹션 */
.tpl-industry-section { margin-bottom: 18px; }
.tpl-industry-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--bg3); border-radius: 6px;
  border-left: 4px solid var(--accent3);
}
.tpl-industry-header-name { font-weight: 700; font-size: 14px; color: var(--text); }
.tpl-industry-header-code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text3); }
.tpl-industry-header-desc { font-size: 11px; color: var(--text3); }
.tpl-industry-header-count { margin-left: auto; font-size: 12px; color: var(--text2); }
.tpl-industry-header-avg { font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.tpl-industry-header-avg.up { color: #f85149; }
.tpl-industry-header-avg.dn { color: #3fb950; }

/* ── KNOWLEDGE (지식검색) ─────────────────────────────────────────── */
.kw-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px; flex: 1; overflow: hidden;
}
.kw-search-box {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px;
  flex-shrink: 0;
}
.kw-input { flex: 1; font-size: 14px; padding: 8px 12px; }
.kw-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
@media (max-width: 1100px) {
  .kw-grid { grid-template-columns: 1fr; }
}
.kw-result-pane, .kw-saved-pane {
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow: hidden; min-height: 0;
}
.kw-pane-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px;
  color: var(--text); padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.kw-pane-subtitle {
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .8px;
  margin: 14px 0 6px;
  flex-shrink: 0;
}
.kw-status { font-size: 11px; color: var(--text3); font-weight: 400; }
.kw-summary {
  flex: 0 0 auto;
  overflow-y: auto;
  max-height: 50%;
}
.kw-summary-card {
  display: flex; gap: 12px;
  padding: 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg3);
}
.kw-summary-thumb {
  width: 96px; height: 96px;
  flex-shrink: 0; border-radius: 4px;
  background: var(--bg4) center/cover no-repeat;
  border: 1px solid var(--border);
}
.kw-summary-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kw-summary-title {
  font-weight: 700; font-size: 16px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.kw-summary-desc { font-size: 11px; color: var(--text3); }
.kw-summary-extract {
  font-size: 13px; color: var(--text2); line-height: 1.55;
  max-height: 180px; overflow-y: auto;
}
.kw-summary-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.kw-related {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.kw-related-item {
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 5px; cursor: pointer;
  background: var(--bg3); transition: all .12s;
  display: flex; align-items: flex-start; gap: 8px;
}
.kw-related-item:hover {
  border-color: var(--accent3);
  background: var(--bg4);
}
.kw-related-item-body { flex: 1; min-width: 0; }
.kw-related-item-title { font-weight: 600; font-size: 13px; color: var(--text); }
.kw-related-item-desc {
  font-size: 11px; color: var(--text3);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kw-related-item-save {
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); font-size: 11px; padding: 2px 6px;
  border-radius: 4px; cursor: pointer; flex-shrink: 0;
}
.kw-related-item-save:hover { color: var(--accent3); border-color: var(--accent3); }
.kw-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text3); font-size: 13px;
}
.kw-empty-sub { font-size: 11px; color: var(--text3); padding: 8px; text-align: center; }
.kw-filter {
  margin-bottom: 8px; font-size: 12px; padding: 5px 8px;
  flex-shrink: 0;
}
.kw-saved-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.kw-saved-item {
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg3); cursor: pointer;
  transition: all .12s;
  display: flex; flex-direction: column; gap: 3px;
}
.kw-saved-item:hover {
  border-color: var(--accent3);
}
.kw-saved-head {
  display: flex; align-items: center; gap: 6px;
}
.kw-saved-title { font-weight: 600; font-size: 13px; color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-saved-meta { font-size: 10px; color: var(--text3); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.kw-saved-extract {
  font-size: 11px; color: var(--text3); line-height: 1.5;
  max-height: 3em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kw-saved-actions {
  display: flex; gap: 4px; margin-top: 4px;
}
.kw-saved-actions button {
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); font-size: 10px; padding: 2px 6px;
  border-radius: 3px; cursor: pointer;
}
.kw-saved-actions button:hover { color: var(--accent3); border-color: var(--accent3); }
.kw-saved-actions .kw-del:hover { color: var(--red); border-color: var(--red); }
.kw-tag {
  display: inline-block; font-size: 10px; padding: 1px 5px;
  background: var(--tag-bg); color: var(--accent3);
  border: 1px solid var(--accent3); border-radius: 3px;
  font-weight: 600;
}

/* ── PORTFOLIO (포트폴리오) ───────────────────────────────────────── */
.pf-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; flex: 1; overflow: auto;
}
.pf-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px;
  flex-shrink: 0;
}
.pf-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .pf-summary-cards { grid-template-columns: repeat(2, 1fr); } }
.pf-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.pf-card-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.pf-card-value {
  font-size: 18px; font-weight: 700; color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}
.pf-card-value.up { color: #f85149; }
.pf-card-value.dn { color: #3fb950; }
.pf-card-sub { font-size: 11px; color: var(--text3); }
.pf-cash-input {
  width: 100%; padding: 4px 8px; font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.pf-add-form {
  background: var(--bg2);
  border: 1px solid var(--accent3);
  border-radius: 8px;
  padding: 12px 14px;
}
.pf-add-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
}
.pf-add-row label {
  display: flex; flex-direction: column;
  gap: 3px; font-size: 11px; color: var(--text3);
  flex: 1; min-width: 120px;
}
.pf-add-row input, .pf-add-row select {
  font-size: 12px;
}

.pf-table-wrap {
  overflow: auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-shrink: 0;
}
.pf-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.pf-table th, .pf-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pf-table th {
  background: var(--bg3);
  text-align: center;
  font-weight: 600;
  color: var(--text2);
  position: sticky; top: 0; z-index: 1;
}
.pf-table td { color: var(--text2); }
.pf-table td.num, .pf-table th.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.pf-table td.center { text-align: center; }
.pf-table tr:hover td { background: var(--bg3); }
.pf-table .pf-name {
  font-weight: 600; color: var(--text);
}
.pf-table .pf-up { color: #f85149; font-weight: 600; }
.pf-table .pf-dn { color: #3fb950; font-weight: 600; }
.pf-table tfoot tr td {
  background: var(--bg3);
  font-weight: 700;
  color: var(--text);
  border-top: 2px solid var(--border);
  border-bottom: none;
}
.pf-table .pf-actions-cell { display: inline-flex; gap: 3px; }
.pf-table .pf-actions-cell button {
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); font-size: 11px; padding: 2px 5px;
  border-radius: 3px; cursor: pointer;
}
.pf-table .pf-actions-cell button:hover { color: var(--accent3); border-color: var(--accent3); }
.pf-table .pf-actions-cell .pf-del:hover { color: var(--red); border-color: var(--red); }
.pf-tag {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: var(--tag-bg); color: var(--accent3);
  border: 1px solid var(--accent3); font-weight: 600;
}
.pf-tag.us { color: var(--orange); border-color: var(--orange); background: rgba(255,180,80,.08); }
.pf-tag.etf { color: var(--purple); border-color: var(--purple); background: rgba(150,120,255,.08); }

/* ── PORTFOLIO 필터 탭 ─────────────────────────────────────────── */
.pf-filter-tabs {
  display: inline-flex; gap: 4px;
  margin-left: 12px;
  padding: 2px 4px;
  background: var(--bg3);
  border-radius: 6px;
}
.pf-filter-tab { font-size: 12px; padding: 4px 12px; }
.pf-filter-tab.active {
  background: var(--accent3);
  color: #fff;
  border-color: var(--accent3);
}

/* 종목 추가 폼 헤더 */
.pf-form-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.pf-form-head-title {
  font-weight: 700; font-size: 14px; color: var(--text);
}

/* ── PORTFOLIO 도움말 (?) 툴팁 ──────────────────────────────────── */
.pf-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg4);
  color: var(--text3);
  font-size: 9px; font-weight: 700;
  cursor: help;
  margin-left: 5px;
  position: relative;
  vertical-align: middle;
  border: 1px solid var(--border);
  user-select: none;
  flex-shrink: 0;
}
.pf-help:hover { color: var(--accent3); background: var(--tag-bg); border-color: var(--accent3); }
/* fixed 위치 툴팁 (body 직속 — 부모 overflow에 잘리지 않음) */
.pf-help-tip {
  position: fixed;
  background: var(--bg2);
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--accent3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
  width: 260px;
  text-align: left;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none;
}

/* ── 거래 히스토리 모달 ──────────────────────────────────────────── */
.pf-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 300;
  display: none;
  align-items: center; justify-content: center;
}
.pf-modal-backdrop.show { display: flex; }
.pf-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 880px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.pf-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pf-modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.pf-modal-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); font-size: 16px; line-height: 1;
  width: 28px; height: 28px; border-radius: 4px;
  cursor: pointer;
}
.pf-modal-close:hover { background: var(--bg4); color: var(--text); border-color: var(--accent3); }
.pf-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.pf-hist-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pf-hist-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}
.pf-hist-card-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.pf-hist-card-value { font-size: 16px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.pf-hist-card-value.up { color: #f85149; }
.pf-hist-card-value.dn { color: #3fb950; }

.pf-tx-form {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end;
  background: var(--bg2); border: 1px solid var(--accent3);
  border-radius: 6px; padding: 10px 12px;
}
.pf-tx-form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--text3);
}
.pf-tx-form .form-control { font-size: 12px; padding: 4px 8px; }
.pf-tx-form .pf-tx-type-buy.active  { background: #f85149; color: #fff; border-color: #f85149; }
.pf-tx-form .pf-tx-type-sell.active { background: #3fb950; color: #fff; border-color: #3fb950; }

.pf-tx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pf-tx-table th, .pf-tx-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pf-tx-table th { background: var(--bg3); text-align: center; font-weight: 600; color: var(--text2); position: sticky; top: 0; }
.pf-tx-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.pf-tx-table td.center { text-align: center; }
.pf-tx-table tr:hover td { background: var(--bg3); }
.pf-tx-buy  { color: #f85149; font-weight: 600; }
.pf-tx-sell { color: #3fb950; font-weight: 600; }
.pf-tx-empty { text-align: center; color: var(--text3); padding: 24px; }

/* ── PORTFOLIO 계좌 선택 바 ─────────────────────────────────────── */
.pf-account-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent3);
  border-radius: 8px;
  flex-shrink: 0;
}
.pf-account-label { font-weight: 700; font-size: 13px; color: var(--text); }
.pf-account-bar select { font-size: 13px; padding: 5px 10px; min-width: 240px; font-weight: 600; }
.pf-account-info { font-size: 11px; color: var(--text3); margin-left: 6px; }

.pf-acct-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pf-acct-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px;
}
.pf-acct-item.active { border-color: var(--accent3); background: var(--tag-bg); }
.pf-acct-item input { font-size: 12px; padding: 3px 6px; }
.pf-acct-item-name { font-weight: 700; font-size: 13px; color: var(--text); flex: 1; }
.pf-acct-item-meta { font-size: 11px; color: var(--text3); }
.pf-acct-item-actions { display: flex; gap: 4px; }
.pf-acct-add {
  display: flex; gap: 6px; align-items: flex-end;
  padding: 10px 12px;
  background: var(--bg2); border: 1px solid var(--accent3);
  border-radius: 6px;
}
.pf-acct-add label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text3); flex: 1; }

/* 자금관리 모달 상단 - 계좌선택 + 잔고 카드 */
.pf-cash-acct-bar {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 10px;
}
.pf-cash-acct-bar > .pf-hist-card { padding: 10px 12px; }

/* ════════════════════════════════════════════════════════════════
   AUTH GATE (로그인 화면) — 주식 테마
═════════════════════════════════════════════════════════════════ */
.auth-gate {
  position: fixed; inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at 20% 30%, rgba(63,185,80,.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(56,139,253,.10), transparent 50%),
    linear-gradient(180deg, #0d1117 0%, #161b22 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: 'Noto Sans KR', sans-serif;
}
.auth-gate.hidden { display: none; }

/* 배경 차트 SVG */
.auth-bg-chart {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .85;
}
.auth-line-stroke {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: authDrawLine 3s ease-out .3s forwards;
  filter: drop-shadow(0 0 6px rgba(63,185,80,.4));
}
@keyframes authDrawLine { to { stroke-dashoffset: 0; } }
@keyframes authFloatUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authPulse    { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes authTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 상단 미니 티커 */
.auth-ticker {
  position: absolute; top: 0; left: 0; right: 0;
  height: 38px;
  background: rgba(13,17,23,.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(63,185,80,.15);
  display: flex; align-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 30px;
  font-size: 12px;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
}
.auth-ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 36px;
  color: #c9d1d9;
}
.auth-ticker-item b { color: #f0f6fc; font-weight: 600; }
.auth-ticker .t-up { color: #ff6b6b; font-weight: 600; }
.auth-ticker .t-dn { color: #51cf66; font-weight: 600; }

/* 메인 카드 (글래스모피즘) */
.auth-card {
  position: relative;
  z-index: 2;
  width: 420px; max-width: 92vw;
  background: rgba(22,27,34,.85);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(63,185,80,.25);
  border-radius: 16px;
  padding: 38px 36px 30px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px rgba(63,185,80,.08);
  animation: authFloatUp .5s ease-out;
}

.auth-brand {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}
.auth-brand-badges { display: inline-flex; gap: 4px; }
.auth-brand-badge {
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}
.auth-brand-badge-krx {
  background: linear-gradient(135deg, #3fb950, #2ea043);
  box-shadow: 0 4px 12px rgba(63,185,80,.4);
}
.auth-brand-badge-kis {
  background: linear-gradient(135deg, #58a6ff, #1f6feb);
  box-shadow: 0 4px 12px rgba(56,139,253,.4);
}
.auth-brand-name {
  font-size: 26px; font-weight: 800;
  color: #f0f6fc;
  letter-spacing: -.3px;
}
.auth-tagline {
  text-align: center;
  font-size: 12px; color: #8b949e;
  margin-bottom: 28px;
}

/* 폼 */
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-label {
  font-size: 11px; font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: -2px;
}
.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%; box-sizing: border-box;
  background: rgba(13,17,23,.7);
  border: 1px solid rgba(139,148,158,.3);
  border-radius: 8px;
  padding: 14px 44px 14px 16px;
  color: #f0f6fc;
  font-size: 15px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 2px;
  outline: none;
  transition: all .2s;
}
.auth-input:focus {
  border-color: #3fb950;
  box-shadow: 0 0 0 3px rgba(63,185,80,.15);
  background: rgba(13,17,23,.95);
}
.auth-input::placeholder { letter-spacing: 0; color: #6e7681; font-family: 'Noto Sans KR'; }
.auth-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none;
  color: #6e7681; cursor: pointer;
  padding: 6px 8px; font-size: 16px; line-height: 1;
  border-radius: 4px;
}
.auth-eye:hover { color: #f0f6fc; background: rgba(255,255,255,.05); }

.auth-submit {
  margin-top: 8px;
  background: linear-gradient(135deg, #3fb950, #2ea043);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14px; font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(63,185,80,.3);
}
.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(63,185,80,.45);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.auth-error {
  min-height: 18px;
  font-size: 12px;
  color: #ff6b6b;
  text-align: center;
  margin-top: 4px;
  font-weight: 500;
}

.auth-foot {
  margin-top: 22px;
  font-size: 11px;
  color: #6e7681;
  text-align: center;
  display: flex; gap: 8px; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.auth-foot-sep { color: #30363d; }

/* ── 프로필 카드 그리드 (넷플릭스형) ───────────────────────────── */
.auth-profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px; margin: 14px 0 8px; min-height: 140px;
}
.auth-profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border: 1px solid #30363d; border-radius: 10px;
  background: #161b22; color: #c9d1d9; cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
  font-family: inherit;
}
.auth-profile-card:hover {
  transform: translateY(-2px); border-color: #58a6ff;
  background: #1f242c;
}
.auth-profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: #21262d; border: 2px solid #30363d;
}
.auth-profile-card:hover .auth-profile-avatar { border-color: #58a6ff; }
.auth-profile-name { font-size: 13px; font-weight: 600; }
.auth-profile-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(247,194,38,.15); color: #f7c226;
  border: 1px solid rgba(247,194,38,.3);
}

/* ── PIN 입력 단계 ───────────────────────────────────── */
.auth-back {
  align-self: flex-start; background: transparent; color: #8b949e;
  border: none; cursor: pointer; font-size: 12px; padding: 6px 0;
  margin-bottom: 8px; font-family: inherit;
}
.auth-back:hover { color: #58a6ff; }
.auth-profile-current {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 8px 0 18px;
}
.auth-profile-avatar-lg {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; background: #21262d; border: 2px solid #58a6ff;
}
.auth-profile-name-lg { font-size: 18px; font-weight: 600; color: #c9d1d9; }
/* 4칸 PIN 입력 박스 (한 자리씩 자동 이동) */
.auth-pin-boxes {
  display: flex; justify-content: center; gap: 10px;
  margin: 4px 0 6px;
}
.auth-pin-cell {
  width: 56px; height: 64px;
  text-align: center;
  font-size: 28px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg4); color: var(--text);
  border: 1.5px solid #30363d; border-radius: 10px;
  outline: none; transition: border-color .15s, box-shadow .15s, transform .1s;
  -moz-appearance: textfield;
}
.auth-pin-cell::-webkit-outer-spin-button,
.auth-pin-cell::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.auth-pin-cell:focus {
  border-color: var(--accent3);
  box-shadow: 0 0 0 3px rgba(56,139,253,.18);
  transform: translateY(-1px);
}

/* ── 상단 우측 사용자 뱃지 ───────────────────────────── */
.user-badge {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border2); border-radius: 6px;
  background: var(--bg3); cursor: pointer; font-size: 12px; color: var(--text);
  transition: border-color .15s, background .15s;
}
.user-badge:hover { border-color: var(--accent3); }
.user-badge-avatar { font-size: 16px; }
.user-badge-name { font-weight: 600; }
.user-badge-role {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(247,194,38,.15); color: #f7c226;
  border: 1px solid rgba(247,194,38,.3);
}
.user-badge-arrow { font-size: 10px; color: var(--text3); }
.user-badge-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 160px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 1000; padding: 4px;
}
.user-badge-menu.open { display: block; }
.user-badge-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; background: transparent; border: none;
  color: var(--text); cursor: pointer; font-size: 12px;
  border-radius: 4px; font-family: inherit;
}
.user-badge-menu button:hover { background: var(--bg4); }

/* ── role 기반 게이팅 ────────────────────────────────── */
body.role-viewer .admin-only { display: none !important; }

/* ── StockEasy RS 임계값 ± 버튼 ──────────────────────── */
.se-rs-step {
  min-width: 36px; padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.se-rs-step:hover {
  border-color: var(--accent3); color: var(--accent3);
}

/* ── 사용자 추가/편집 모달 — 이모지 아바타 그리드 ──────── */
.user-avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px; padding: 6px; max-height: 180px; overflow-y: auto;
  background: var(--bg4); border: 1px solid var(--border2); border-radius: 6px;
}
.user-avatar-cell {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: transparent; border: 1.5px solid transparent; border-radius: 6px;
  cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
  font-family: inherit; padding: 0;
}
.user-avatar-cell:hover {
  background: var(--bg3); border-color: var(--border2);
  transform: scale(1.08);
}
.user-avatar-cell.is-active {
  background: rgba(56,139,253,.15);
  border-color: var(--accent3);
  box-shadow: 0 0 0 2px rgba(56,139,253,.18);
}

/* ── 사용자 관리 카드 그리드 ─────────────────────────── */
.user-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 4px;
}
.user-card {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, background .15s;
  position: relative; overflow: hidden;
}
.user-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.user-card-ok::before     { background: linear-gradient(180deg, #3fb950, #238636); }
.user-card-info::before   { background: linear-gradient(180deg, #58a6ff, #1f6feb); }
.user-card-warn::before   { background: linear-gradient(180deg, #d29922, #bb8009); }
.user-card-danger::before { background: linear-gradient(180deg, #f85149, #b62324); }

.user-card-top {
  display: flex; align-items: center; gap: 10px;
}
.user-card-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: var(--bg4); border: 2px solid var(--border2);
  flex-shrink: 0;
}
.user-card-id { flex: 1; min-width: 0; }
.user-card-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-card-role { margin-top: 2px; }
.user-card-role-badge {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px;
  font-weight: 600;
}
.user-card-role-badge.admin {
  background: rgba(247,194,38,.15); color: #f7c226; border: 1px solid rgba(247,194,38,.3);
}
.user-card-role-badge.viewer {
  background: rgba(139,148,158,.15); color: #8b949e; border: 1px solid rgba(139,148,158,.3);
}
.user-card-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 12px;
}
.user-card-status-ok     { background: rgba(63,185,80,.15);  color: #3fb950; border: 1px solid rgba(63,185,80,.3); }
.user-card-status-info   { background: rgba(56,139,253,.15); color: #58a6ff; border: 1px solid rgba(56,139,253,.3); }
.user-card-status-warn   { background: rgba(210,153,34,.15); color: #d29922; border: 1px solid rgba(210,153,34,.3); }
.user-card-status-danger { background: rgba(248,81,73,.15);  color: #f85149; border: 1px solid rgba(248,81,73,.3); }
.user-card-status-icon   { font-size: 10px; }

.user-card-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--text3);
  background: var(--bg4); padding: 8px 10px; border-radius: 6px;
}
.user-card-meta > div {
  display: flex; justify-content: space-between; gap: 8px;
}
.user-card-meta span:first-child { color: var(--text3); flex-shrink: 0; }
.user-card-meta span:last-child { color: var(--text2); font-weight: 500; }

.user-card-actions {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.user-card-actions .btn { flex: 1; min-width: auto; font-size: 11px; padding: 4px 8px; }

.auth-version {
  position: absolute; bottom: 16px;
  font-size: 10px;
  color: #484f58;
  letter-spacing: 1px;
  font-family: 'JetBrains Mono', monospace;
  z-index: 2;
}

/* ── 명심보감 모달 ──────────────────────────────────────────────── */
.myeongsim-modal { width: 760px; max-width: 95vw; }
.ms-intro {
  background: linear-gradient(135deg, rgba(63,185,80,.12), rgba(56,139,253,.12));
  border: 1px solid var(--accent3);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.ms-intro-title { font-size: 12px; font-weight: 700; color: var(--accent3); letter-spacing: .8px; margin-bottom: 4px; }
.ms-intro-text { font-size: 14px; color: var(--text); line-height: 1.65; }

.ms-section { margin-bottom: 22px; }
.ms-section-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent3);
  margin-bottom: 12px;
}

.ms-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent3);
  border-radius: 6px;
  padding: 12px 14px;
  position: relative;
}
.ms-card-num {
  position: absolute; top: 8px; right: 12px;
  font-size: 24px; font-weight: 800;
  color: var(--accent3); opacity: .35;
}
.ms-card-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ms-card-desc { font-size: 12px; color: var(--text2); line-height: 1.6; margin-bottom: 6px; }
.ms-card-meta { font-size: 11px; color: var(--text3); font-family: 'JetBrains Mono', monospace; }

.ms-quote {
  background: var(--bg3);
  border-left: 3px solid var(--orange);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px; color: var(--text2); line-height: 1.8;
}

.ms-flow { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.ms-step {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.ms-step-exit { border-color: var(--accent3); background: linear-gradient(135deg, var(--bg2), rgba(63,185,80,.06)); }
.ms-step-num {
  flex-shrink: 0; width: 60px;
  font-size: 11px; font-weight: 800;
  color: #fff; background: var(--accent3);
  padding: 4px 8px; border-radius: 4px;
  text-align: center; letter-spacing: 1px;
}
.ms-step-exit .ms-step-num { background: var(--orange); }
.ms-step-body { flex: 1; min-width: 0; }
.ms-step-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ms-step-text { font-size: 12px; color: var(--text2); line-height: 1.7; }
.ms-step-hint { font-size: 11px; color: var(--accent3); margin-top: 6px; }
.ms-arrow {
  text-align: center;
  color: var(--text3);
  font-size: 14px;
  padding: 4px 0;
  margin: 0;
}

.ms-motto {
  margin-top: 16px;
  text-align: center;
  padding: 14px 16px;
  background: var(--bg3);
  border-radius: 6px;
  font-size: 13px; font-style: italic;
  color: var(--text2); line-height: 1.6;
  border: 1px dashed var(--border);
}

/* Caps Lock 경고 배지 (로그인 화면) */
.auth-capslock {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 7px 10px;
  background: rgba(240, 136, 62, .12);
  border: 1px solid rgba(240, 136, 62, .5);
  border-radius: 6px;
  color: #f0883e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  animation: authCapsBlink 1.6s ease-in-out infinite;
}
@keyframes authCapsBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── 설정: API 카드 2열 분할 ──────────────────────────────────── */
.api-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .api-split-grid { grid-template-columns: 1fr; } }
.api-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: all .18s;
  position: relative;
}
.api-card.active {
  border-color: var(--accent3);
  box-shadow: 0 0 0 2px rgba(56,139,253,.15), 0 4px 14px rgba(56,139,253,.18);
}
.api-card.active::before {
  content: '✓ 사용 중';
  position: absolute;
  top: 8px; right: 8px;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  background: var(--accent3); color: #fff;
  border-radius: 10px;
  letter-spacing: .3px;
  z-index: 1;
}
.api-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.api-card-name { font-weight: 700; font-size: 13px; color: var(--text); }
.api-card-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px;
  background: var(--bg4); color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.api-card.active .api-card-badge {
  background: var(--tag-bg); color: var(--accent3);
  border-color: var(--accent3);
}
.api-card-body { padding: 12px 14px; }

/* ── 투자자 현황: 데이터 소스 모드 토글 ──────────────────────────── */
.inv-mode-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inv-mode-label { font-size: 12px; font-weight: 700; color: var(--text); }
.inv-mode-toggle { display: inline-flex; gap: 6px; }
.inv-mode-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  color: var(--text2);
  position: relative;
}
.inv-mode-btn:hover { border-color: var(--accent3); }
.inv-mode-btn.active {
  background: var(--tag-bg);
  border-color: var(--accent3);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(56,139,253,.18);
}
.inv-mode-btn.active::after {
  content: '✓ 사용 중';
  position: absolute;
  top: -7px; right: -7px;
  font-size: 9px; font-weight: 700;
  padding: 1px 6px;
  background: var(--accent3); color: #fff;
  border-radius: 8px;
  letter-spacing: .3px;
}
.inv-mode-icon { font-size: 18px; }
.inv-mode-text { display: flex; flex-direction: column; line-height: 1.2; }
.inv-mode-name { font-size: 13px; font-weight: 700; }
.inv-mode-desc { font-size: 10px; color: var(--text3); margin-top: 2px; }
.inv-mode-btn.active .inv-mode-desc { color: var(--accent3); }

/* 오실레이터 — 투자자 데이터 모드 토글 */
.osc-inv-mode-btn {
  background: transparent;
  color: var(--text3);
  border: 1px solid transparent;
  font-weight: 600;
}
.osc-inv-mode-btn.active {
  background: var(--accent3);
  color: #fff;
  border-color: var(--accent3);
}

/* 오실레이터 — 시세 KRX 고정 안내 */
.inv-mode-fixed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 6px;
}
.inv-mode-fixed-label { font-size: 11px; font-weight: 600; color: var(--text3); }
.inv-mode-fixed-value { font-size: 13px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.inv-mode-fixed-tag {
  font-size: 9px; font-weight: 700;
  padding: 2px 6px;
  background: var(--bg4); color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 8px;
  letter-spacing: .3px;
}
.inv-mode-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 4px;
}

/* 템플릿 카드 — 분포 + 신호 분석 박스 */
.tpl-card-analysis {
  padding: 8px 10px;
  margin: 6px 8px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 11px;
}
.tpl-card-zone {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 12px;
  margin-bottom: 4px;
}
.tpl-card-zone-emoji { font-size: 14px; }
.tpl-card-zone-label { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-card-zone-strength { font-size: 10px; color: var(--text3); font-weight: 600; }
.tpl-card-action {
  font-size: 11px; color: var(--accent3);
  padding: 3px 6px; background: var(--bg3);
  border-radius: 4px; margin-bottom: 6px;
  font-weight: 600;
}
.tpl-card-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text3);
  text-align: center;
}
.tpl-card-stats span {
  padding: 2px 3px;
  border-radius: 3px;
  border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center;
}
.tpl-card-stats span.cur {
  background: var(--tag-bg);
  border-color: var(--accent3);
  color: var(--accent3);
}
.tpl-card-stats b { font-size: 10px; margin-top: 1px; font-weight: 700; }
.tpl-card-stats b.up { color: #f85149; }
.tpl-card-stats b.dn { color: #3fb950; }

/* 템플릿 결과 — 종합 추천 박스 */
.tpl-recommend-box {
  background: var(--bg2);
  border: 1px solid var(--accent3);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.tpl-rec-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.tpl-rec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .tpl-rec-grid { grid-template-columns: 1fr; } }
.tpl-rec-col {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.tpl-rec-buy { border-left: 3px solid #3fb950; }
.tpl-rec-sell { border-left: 3px solid #f85149; }
.tpl-rec-neutral { border-left: 3px solid #d29922; }
.tpl-rec-col-head { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.tpl-rec-count { font-size: 10px; color: var(--text3); font-weight: 600; margin-left: auto; }
.tpl-rec-list { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.7; max-height: 220px; overflow-y: auto; }
.tpl-rec-list li { padding: 2px 0; color: var(--text2); }
.tpl-rec-empty { font-size: 11px; color: var(--text3); padding: 6px 0; text-align: center; }
.tpl-rec-more { font-size: 10px; color: var(--accent3); margin-top: 4px; }
.tpl-rec-tip { font-size: 11px; color: var(--text3); margin-top: 10px; padding: 8px; background: var(--bg3); border-radius: 4px; line-height: 1.6; }

/* ── LMH-COLAB 데이터 폴더 패널 ─────────────────────────────── */
.colab-fs-bar {
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.colab-fs-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  user-select: none;
  font-size: 13px;
  transition: background .15s;
}
.colab-fs-head:hover { background: var(--bg3); }
.colab-fs-toggle {
  font-size: 10px; color: var(--text3);
  transition: transform .15s;
  display: inline-block; width: 12px;
}
.colab-fs-bar.expanded .colab-fs-toggle { transform: rotate(90deg); }
.colab-fs-current-path {
  font-family: monospace; font-size: 12px;
  color: var(--text2); padding: 2px 8px;
  background: var(--bg3); border-radius: 4px;
  max-width: 600px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.colab-fs-body {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.colab-fs-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.colab-fs-breadcrumb {
  font-family: monospace; font-size: 12px;
  color: var(--accent3); padding: 4px 8px;
  background: var(--bg3); border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.colab-fs-breadcrumb .crumb {
  cursor: pointer; padding: 2px 4px; border-radius: 3px;
}
.colab-fs-breadcrumb .crumb:hover { background: var(--bg4); }
.colab-fs-breadcrumb .sep { color: var(--text3); }
.colab-fs-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 12px;
  min-height: 180px; max-height: 320px;
}
.colab-fs-tree {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2);
  overflow-y: auto;
  padding: 6px;
}
.colab-fs-tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 12px; cursor: pointer;
  border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.colab-fs-tree-item:hover { background: var(--bg3); }
.colab-fs-tree-item.empty { color: var(--text3); cursor: default; padding: 12px 8px; text-align: center; }
.colab-fs-files {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2);
  overflow-y: auto;
}
.colab-fs-files-header {
  font-size: 11px; color: var(--text3);
  padding: 6px 10px; background: var(--bg3);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.colab-fs-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.colab-fs-file-item:hover { background: var(--bg3); }
.colab-fs-file-item:last-child { border-bottom: none; }
.colab-fs-file-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: monospace;
}
.colab-fs-file-meta {
  font-size: 10px; color: var(--text3);
  flex-shrink: 0; font-family: monospace;
}
.colab-fs-empty {
  text-align: center; color: var(--text3);
  padding: 24px 12px; font-size: 12px;
}

/* ── 핀비즈 미국차트 모듈 ──────────────────────────────────── */
.finviz-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px; background: var(--bg3); border-radius: 6px; margin-bottom: 12px;
}
.finviz-cat-nav {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.finviz-cat-tab {
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text2); transition: all .15s;
}
.finviz-cat-tab:hover { background: var(--bg4); color: var(--text); }
.finviz-cat-tab.active { background: var(--accent3); color: #fff; border-color: var(--accent3); }
.finviz-cat-tab .cnt { font-size: 10px; opacity: .8; margin-left: 4px; }
.finviz-grid {
  display: grid; gap: 12px;
}
.finviz-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.finviz-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.finviz-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.finviz-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.finviz-grid.cols-6 { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.finviz-cat-section {
  grid-column: 1 / -1; padding: 6px 12px; margin-top: 8px;
  background: var(--bg3); border-left: 4px solid var(--accent3); border-radius: 4px;
  font-size: 12px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.finviz-cat-section .cnt { font-size: 11px; color: var(--text3); font-weight: 400; }
.finviz-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; position: relative; transition: border-color .15s;
}
.finviz-card:hover { border-color: var(--accent3); }
.finviz-card-img-wrap {
  background: #fff; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 110px;
}
.finviz-card-img { display: block; width: 100%; height: auto; cursor: pointer; }
.finviz-card-loading {
  color: var(--text3); font-size: 11px; padding: 30px 12px; text-align: center;
}
.finviz-card-error {
  color: #f85149; font-size: 11px; padding: 30px 12px; text-align: center; background: var(--bg2);
}
.finviz-card-info {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  font-size: 11px; background: var(--bg3); border-top: 1px solid var(--border);
}
.finviz-card-ticker {
  font-family: monospace; font-weight: 600; color: var(--accent3);
}
.finviz-card-caption {
  flex: 1; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finviz-card-actions {
  display: flex; gap: 2px; flex-shrink: 0;
}
.finviz-card-actions .btn {
  padding: 1px 6px !important; font-size: 11px !important; min-height: auto;
}
/* 모달 (추가/일괄) */
.finviz-modal {
  position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.finviz-modal-card {
  width: min(480px, 92vw); max-height: 90vh;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.finviz-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg3);
  font-weight: 600; font-size: 14px;
}
.finviz-modal-body {
  padding: 16px; overflow-y: auto;
}
.colab-empty {
  text-align: center; color: var(--text3); padding: 40px 20px; font-size: 13px;
}
/* 큰 차트 라이트박스 */
.finviz-lightbox {
  position: fixed; inset: 0; z-index: 1600; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.finviz-lightbox img {
  max-width: 100%; max-height: 92vh; background: #fff; border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.finviz-lightbox-cap {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color: #fff; padding: 6px 14px; border-radius: 16px;
  font-size: 13px;
}

/* ── 데이터 폴더 패널 — 좌측 사이드바 모드 ──────────────────── */
.colab-fs-side {
  border-top: 1px solid var(--border);
  border-bottom: none;
  background: var(--bg2);
  margin-top: 8px;
  padding: 8px;
  border-radius: 0;
}
.colab-fs-side .colab-fs-head {
  padding: 4px 0; font-size: 12px;
}
.colab-fs-side .colab-fs-current-path {
  font-size: 10px; padding: 4px 6px;
  margin: 4px 0 2px;
  max-width: none; display: block;
}
.colab-fs-side .colab-fs-counts {
  font-size: 10px; color: var(--text3); padding: 0 4px;
}
.colab-fs-side .colab-fs-body {
  padding: 8px 0 0;
  border-top: 1px dashed var(--border);
  margin-top: 8px;
  background: transparent;
}
.colab-fs-side .colab-fs-toolbar-side {
  display: flex; gap: 2px;
  padding-bottom: 0; margin-bottom: 0;
  border-bottom: none;
}
.colab-fs-side .colab-fs-toolbar-side .btn {
  padding: 3px 6px; font-size: 11px;
  flex: 1;
}
.colab-fs-side .colab-fs-breadcrumb {
  font-size: 10px; padding: 3px 6px;
}
.colab-fs-side .colab-fs-grid {
  display: block; max-height: none; min-height: 0;
}
.colab-fs-side-section-label {
  font-size: 10px; color: var(--text3); font-weight: 600;
  margin: 8px 0 4px; padding: 0 4px;
  text-transform: uppercase; letter-spacing: .5px;
}
.colab-fs-tree-side {
  max-height: 200px; min-height: 60px;
  font-size: 11px;
}
.colab-fs-tree-side .colab-fs-tree-item { font-size: 11px; padding: 3px 6px; }
.colab-fs-files-side {
  max-height: 280px;
}
.colab-fs-files-side .colab-fs-file-item { padding: 4px 6px; }
.colab-fs-files-side .colab-fs-file-name { font-size: 11px; }
.colab-fs-files-side .colab-fs-file-meta { font-size: 9px; }

/* ── LMH-COLAB 3컬럼 레이아웃 (모듈 strip | 폴더 pane | 컨텐츠) ── */
/* 모듈 아이콘 strip (VS Code 스타일) */
.colab-mod-strip {
  width: 78px; flex-shrink: 0;
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.colab-mod-strip-title {
  text-align: center; font-size: 13px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
  background: var(--bg3); color: var(--text2);
}
.colab-mod-strip-list {
  flex: 1; overflow-y: auto; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.colab-mod-strip-foot {
  border-top: 1px solid var(--border); padding: 4px;
}
.colab-mod-strip-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 2px; cursor: pointer;
  border-radius: 6px; border: 1px solid transparent; background: transparent;
  font-family: inherit; color: inherit;
  transition: background .12s, border-color .12s;
}
.colab-mod-strip-item:hover {
  background: var(--bg3); border-color: var(--border);
}
.colab-mod-strip-item.active {
  background: var(--tag-bg); border-color: var(--accent3);
}
.colab-mod-strip-ico {
  font-size: 22px; line-height: 1;
}
.colab-mod-strip-name {
  font-size: 10px; color: var(--text2);
  text-align: center; line-height: 1.2;
  word-break: keep-all;
}
.colab-mod-strip-item.active .colab-mod-strip-name { color: var(--accent3); font-weight: 600; }

/* 데이터 폴더 pane (독립 컬럼) */
.colab-fs-pane {
  width: 260px; flex-shrink: 0;
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .15s;
}
.colab-fs-pane.collapsed {
  width: 38px;
}
.colab-fs-pane.collapsed .colab-fs-current-path,
.colab-fs-pane.collapsed .colab-fs-counts,
.colab-fs-pane.collapsed .colab-fs-body,
.colab-fs-pane.collapsed .colab-fs-pane-head > span:first-child {
  display: none !important;
}
.colab-fs-pane.collapsed .colab-fs-pane-head {
  justify-content: center;
}
.colab-fs-pane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg3); cursor: default;
}
.colab-fs-pane .colab-fs-current-path {
  font-family: monospace; font-size: 11px;
  color: var(--text2); padding: 4px 8px;
  background: var(--bg3); border-radius: 4px;
  margin: 6px 8px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.colab-fs-pane .colab-fs-counts {
  font-size: 10px; color: var(--text3);
  padding: 0 8px 4px;
}
.colab-fs-pane .colab-fs-body {
  flex: 1; overflow-y: auto; padding: 6px 10px 10px;
}
.colab-fs-pane .colab-fs-toolbar-side {
  display: flex; gap: 2px;
  padding-bottom: 0; margin-bottom: 0; border-bottom: none;
}
.colab-fs-pane .colab-fs-toolbar-side .btn {
  padding: 4px 0;
  font-size: 13px;
  flex: 1 1 0;
  min-width: 0;       /* 긴 텍스트로 인한 wrap/overflow 방지 */
  height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.colab-fs-pane .colab-fs-breadcrumb {
  font-size: 10px; padding: 3px 6px;
}
.colab-fs-pane .colab-fs-tree-side {
  max-height: 220px; min-height: 60px; font-size: 11px;
}
.colab-fs-pane .colab-fs-files-side {
  max-height: none; flex: 1;
}

/* 기존 .colab-sidebar 스타일은 사용 안 하지만 충돌 방지로 비워둠 */

/* ── 거래대금 랭킹 모듈 ───────────────────────────────────── */
.trdval-status {
  padding: 8px 12px; background: var(--bg3); border-radius: 6px; margin-bottom: 10px;
  font-size: 12px; color: var(--text2);
}
.trdval-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  flex: 1; min-height: 0;
}
@media (max-width: 1400px) {
  .trdval-grid { grid-template-columns: 1fr; }
}
.trdval-col {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; min-height: 400px; overflow: hidden;
}
.trdval-col-head {
  padding: 8px 12px; background: var(--bg3); border-bottom: 1px solid var(--border);
  font-size: 12px; display: flex; align-items: center; justify-content: space-between;
}
.trdval-col-meta { color: var(--text3); font-size: 11px; }
.trdval-col-body {
  flex: 1; overflow-y: auto;
}
.trdval-empty { padding: 30px; text-align: center; color: var(--text3); font-size: 12px; }
.trdval-row {
  display: grid;
  /* rank · mk · name(+hover code) · val · chg5 · chg20 · 분석버튼 — 종목번호 컬럼 제거 */
  grid-template-columns: 32px 22px 1fr 80px 60px 60px 30px;
  gap: 6px; align-items: center;
  padding: 5px 10px; border-bottom: 1px solid var(--border);
  font-size: 12px;
  transition: background .12s;
}
.trdval-row:hover { background: var(--bg3); }
.trdval-row:hover .trdval-code-hover { opacity: 1; }
.trdval-code-hover {
  display: inline-block; margin-left: 6px;
  font-family: monospace; font-size: 10px;
  color: var(--text3); opacity: 0; transition: opacity .15s;
  padding: 0 4px; background: var(--bg4); border-radius: 3px;
}
.trdval-name {
  cursor: pointer;
}
.trdval-name:hover { color: var(--accent3); }
.trdval-osc-btn {
  background: transparent; border: 1px solid var(--border2); border-radius: 4px;
  color: var(--accent3); cursor: pointer; padding: 2px 4px;
  font-size: 12px; line-height: 1;
}
.trdval-osc-btn:hover { background: var(--bg4); border-color: var(--accent3); }
.trdval-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text2);
  padding: 4px 8px; border: 1px solid var(--border2); border-radius: 4px;
  background: var(--bg3); cursor: pointer;
}
.trdval-toggle:has(input:checked) {
  border-color: var(--accent3); color: var(--accent3); background: var(--tag-bg);
}
.trdval-toggle input { margin: 0; }
.trdval-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.trdval-grid:has(.trdval-col-avg[style*="display: none"]) { grid-template-columns: repeat(3, 1fr); }
/* 평균 토글 켜진 상태 — 5컬럼 */
.trdval-col-avg:not([style*="display: none"]) ~ .trdval-col,
.trdval-grid:not(:has(.trdval-col-avg[style*="display: none"])) {
  /* 토글 켜졌을 때 5컬럼 grid */
}
.trdval-col-avg { /* 토글로 표시 제어 */ }
.trdval-rank {
  font-family: monospace; font-weight: 600;
  color: var(--text3); text-align: right; font-size: 11px;
}
.trdval-mk {
  font-family: monospace; font-size: 9px; font-weight: 700;
  text-align: center; padding: 1px 4px; border-radius: 3px;
}
.trdval-mk-kospi  { background: rgba(88,166,255,.15); color: #58a6ff; }
.trdval-mk-kosdaq { background: rgba(150,120,255,.15); color: #bc8cff; }
.trdval-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.trdval-code { font-family: monospace; font-size: 10px; color: var(--text3); }
.trdval-val {
  font-family: monospace; font-size: 11px; text-align: right;
  color: var(--text2);
}
.trdval-chg {
  font-family: monospace; font-size: 10px; text-align: right;
}
.trdval-chg .up { color: #f85149; }
.trdval-chg .dn { color: #58a6ff; }

/* ── 거래대금 모듈 — ETF Top 10 섹션 ───────────────────────── */
.trdval-etf-section {
  margin-top: 16px; padding: 12px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
}
.trdval-etf-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 13px; color: var(--text2);
}
.trdval-etf-body { font-size: 12px; }
.trdval-etf-table {
  width: 100%; border-collapse: collapse;
}
.trdval-etf-table th {
  background: var(--bg3); padding: 6px 8px; text-align: left;
  font-size: 11px; color: var(--text3); border-bottom: 1px solid var(--border);
}
.trdval-etf-table th.num { text-align: right; }
.trdval-etf-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.trdval-etf-table td.num { text-align: right; font-family: monospace; }
.trdval-etf-row {
  cursor: pointer; transition: background .12s;
}
.trdval-etf-row:hover { background: var(--bg3); }

/* ── ETF 구성종목 관리 섹션 (거래대금 모듈) ───────────────── */
.trdval-etf-mgmt {
  margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2);
}
.trdval-etf-mgmt-head {
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; font-size: 13px;
  background: var(--bg3); border-radius: 6px 6px 0 0;
  transition: background .12s;
}
.trdval-etf-mgmt-head:hover { background: var(--bg4); }
.trdval-etf-mgmt-body { padding: 12px 14px; }

/* Top 200 섹션 헤더 (접기/펼침) */
.trdval-section { margin-bottom: 14px; }
.trdval-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg3); border-radius: 6px;
  margin-bottom: 8px; cursor: pointer; user-select: none; font-size: 13px;
  border: 1px solid var(--border);
  transition: background .12s;
}
.trdval-section-head:hover { background: var(--bg4); }

/* ETF 모멘텀 비교 (2 컬럼) */
.etf-mom-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
@media (max-width: 1100px) {
  .etf-mom-grid { grid-template-columns: 1fr; }
}
.etf-mom-col {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.etf-mom-col-head {
  padding: 6px 10px; background: var(--bg3); font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--border); color: var(--accent3);
}
.etf-mom-col-body { font-size: 12px; min-height: 80px; }

/* ═══════════════════════════════════════════════════════════════
   📱 반응형 — 태블릿(1024px↓) / 모바일(768px↓ / 480px↓)
   - 상단바 nav: overflow scroll
   - 사이드바: 모바일에선 fixed overlay
   - 그리드: 단계적 1열 축소
   - 모달 본문: padding/font 축소
   ═══════════════════════════════════════════════════════════════ */

/* 태블릿 (1024px 이하) — 사이드 영역 축소 + 그리드 컬럼 1단계 감소 */
@media (max-width: 1024px) {
  .topbar { padding: 0 8px; gap: 4px; }
  .logo { font-size: 13px; gap: 5px; }
  .logo-badge { padding: 2px 5px; font-size: 10px; }
  .topbar-nav { overflow-x: auto; scrollbar-width: thin; margin-left: 4px; flex: 1; }
  .topbar-nav::-webkit-scrollbar { height: 4px; }
  .topbar-nav a { white-space: nowrap; flex-shrink: 0; padding: 5px 8px; font-size: 12px; }
  .topbar-right { gap: 4px; flex-shrink: 0; }
  .topbar-right .status-text { display: none; }
  .topbar-right .status-sep   { display: none; }
  .topbar-right .status-dot   { display: none; }
  .market-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-grid    { grid-template-columns: 1fr; }
  .trdval-grid  { grid-template-columns: repeat(2, 1fr); }
  .pf-summary-cards { grid-template-columns: repeat(2, 1fr); }
  /* 결과 모달 — 카드 padding 축소 */
  .osc-result-card  { width: min(100vw, 1280px); max-width: 100vw; }
  .tpl-result-card  { width: min(100vw, 1400px); max-width: 100vw; }
}

/* 모바일 가로 (768px 이하) */
@media (max-width: 768px) {
  .topbar { padding: 0 6px; font-size: 12px; }
  .topbar-nav a { padding: 6px 8px; font-size: 12px; }
  .topbar-right .btn-sm { padding: 4px 6px; font-size: 11px; }
  .topbar-right .status-dot { width: 6px; height: 6px; }
  .topbar-right .user-badge-name { display: none; }
  .topbar-right .user-badge-role { display: none; }

  /* 모바일 — 오실레이터 탭만 노출 (다른 탭/사이드바 토글 숨김) */
  .topbar-nav a:not(#nav-oscillator) { display: none !important; }
  /* 사이드바 자체도 모바일에선 숨김 (오실레이터 + 결과 모달이 메인 사용) */
  .sidebar-toggle { display: none !important; }
  .sidebar { display: none !important; }

  /* 사이드바 — fixed overlay (메인 영역 차지 안 함) */
  .main { position: relative; }
  .sidebar {
    position: fixed; left: 0; top: 48px; bottom: 0;
    width: min(280px, 80vw); z-index: 900;
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .sidebar:not(.hidden) { transform: translateX(0); }
  .sidebar.unpinned     { transform: translateX(-100%); }
  .sidebar.unpinned:not(.hidden) { transform: translateX(0); }

  /* 시장 카드 / 거래대금 — 1열 */
  .market-cards { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .mcard { padding: 12px 14px; }
  .mcard-value { font-size: 22px; }
  .trdval-grid { grid-template-columns: 1fr; }
  .pf-summary-cards { grid-template-columns: 1fr; }

  /* 결과 모달 — 풀 스크린, 세로 stack */
  .osc-result-modal { padding: 0; }
  .osc-result-card,
  .tpl-result-card {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    border-radius: 0;
  }
  .osc-result-body-v2 { flex-direction: column; }
  .osc-result-sidebar {
    flex-direction: row !important; min-width: 0 !important;
    overflow-x: auto; padding: 4px 8px; border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .osc-result-vtab { white-space: nowrap; flex-shrink: 0; }
  .osc-result-view--analysis {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .osc-result-left, .osc-result-right { min-width: 0; }
  .osc-result-chart { height: 280px !important; }
  .osc-candle-chart { height: 360px !important; }
  .tpl-grid { grid-template-columns: 1fr !important; }

  /* 차트 카드 패딩 축소 */
  .tpl-card-chart { height: 220px !important; }
  .idx-trend-chart { height: 140px !important; }

  /* 사용자관리 카드 — 2열 → 1열 */
  .user-card-grid { grid-template-columns: 1fr; }
  .user-avatar-grid { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }

  /* 스케줄 모달 — 이미 980px에서 1열로 처리됨 */
  /* 일반 폼/표 — 폰트·패딩 약간 축소 */
  .panel { padding: 10px; }
  .dash-top { padding: 10px; }
  .dash-title { font-size: 16px; }
  .form-control { font-size: 12px; padding: 5px 8px; }
}

/* 모바일 세로 (480px 이하) — 극한 압축 */
@media (max-width: 480px) {
  .topbar-nav a { padding: 5px 6px; font-size: 11px; }
  .mcard-value  { font-size: 18px; }
  .mcard-label  { font-size: 10px; }
  .mcard-change { font-size: 10px; padding: 2px 6px; }
  /* PIN 입력 박스 축소 */
  .auth-pin-cell { width: 44px; height: 52px; font-size: 22px; }
  .auth-card { width: min(100vw, 460px); padding: 18px 16px; }
  .auth-profile-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
}