/* 수급레이더 — 새 디자인 시스템 (sn-app.css) 와 우리 시스템 간 어댑터. */

/* ============ 옛 style.css 의 :root 다크 변수를 라이트 톤으로 강제 덮어쓰기 ============
 * 옛 style.css 가 :root 에 --bg/--panel/--border/--text/--muted 등 다크 변수를 정의해
 * sn-tokens 의 라이트 정의를 덮어쓴다. 옛 페이지가 같은 이름 변수를 쓰니 정의는 유지하되
 * 라이트 값으로 매핑한다 — 옛 페이지의 카드/표/텍스트가 자동으로 라이트화.
 */
:root {
  --bg:       #FFFFFF;
  --panel:    #FFFFFF;
  --border:   #ECEEF1;
  --text:     #111111;
  --muted:    #6B7079;
  --accent:   #FE2C55;   /* RED — 한국 컨벤션 */
  --pos:      #FE2C55;   /* RED = 상승 */
  --neg:      #2A78F9;   /* BLUE = 하락 */
  --warn:     #F5A623;
}

/* body — Pretendard + 라이트 배경. 옛 style.css 의 body 규칙을 보강 (cascade 우선). */
body, body.sn-app {
  background: var(--bg-subtle);
  color: var(--ink-900);
  font-family: var(--font-sans);
}

/* 옛 페이지의 hardcoded 다크 컬러들 (sn-overrides 가 마지막 로드라 이김) */
body.sn-app table.data th {
  background: var(--bg-subtle) !important;
  color: var(--ink-500) !important;
}
body.sn-app table.data tbody tr:hover { background: var(--fill-100) !important; }
body.sn-app table.data tbody tr:hover td { background: transparent !important; }

/* 옛 .sig-card (briefing 페이지 모바일 카드) */
body.sn-app .sig-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-700) !important;
  padding: 14px 16px;
}

/* 옛 input/select/button 라이트 */
body.sn-app input[type="text"],
body.sn-app input[type="number"],
body.sn-app input[type="password"],
body.sn-app input[type="date"],
body.sn-app select {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-900);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
}
body.sn-app input:focus,
body.sn-app select:focus {
  outline: 2px solid var(--brand-red-soft);
  border-color: var(--brand-red);
}

/* 옛 .btn (저장/취소 등) — 라이트 톤 */
body.sn-app .btn-save {
  background: var(--brand-red);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
body.sn-app .btn-save:hover { background: var(--brand-red-press); }

/* 옛 메타 태그 / 사유 태그 (단기매매 등) */
body.sn-app .meta-tag, body.sn-app .reason-tag, body.sn-app .partial-tag, body.sn-app .subj-tag {
  background: var(--fill-100);
  color: var(--ink-500);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  display: inline-block;
  font-weight: 700;
}
body.sn-app .meta-tag.dual { background: var(--brand-red-soft); color: var(--brand-red); }
body.sn-app .meta-tag.foreign { background: var(--brand-red-soft); color: var(--brand-red); }
body.sn-app .meta-tag.inst { background: var(--brand-blue-soft); color: var(--brand-blue); }
body.sn-app .subj-tag.both { background: #FFF4D6; color: #8B6500; }
body.sn-app .subj-tag.foreign { background: var(--brand-red-soft); color: var(--brand-red); }
body.sn-app .subj-tag.inst { background: var(--brand-blue-soft); color: var(--brand-blue); }
body.sn-app .reason-tag.reason-tp { background: var(--up-soft); color: var(--up); }
body.sn-app .reason-tag.reason-sl { background: var(--down-soft); color: var(--down); }
body.sn-app .reason-tag.reason-preempt { background: #FFF4D6; color: #8B6500; }
body.sn-app .reason-tag.reason-time { background: var(--fill-100); color: var(--ink-500); }

/* 옛 .empty-msg */
body.sn-app .empty-msg {
  color: var(--ink-400);
  text-align: center;
  padding: 32px 16px;
  font-weight: 500;
}

/* signal_trading 의 settings input */
body.sn-app .settings-grid input,
body.sn-app .settings-grid select {
  background: #fff;
  color: var(--ink-900);
  border: 1px solid var(--line-strong);
}

/* signal_trading 의 live-switch — Toss-like 토글 (라이트) */
body.sn-app .live-switch .slider {
  background: var(--fill-200);
  border-color: var(--line-strong);
}
body.sn-app .live-switch .slider:before {
  background: #fff;
  box-shadow: var(--shadow-sm);
}
body.sn-app .live-switch input:checked + .slider {
  background: var(--up);
  border-color: var(--up);
}
body.sn-app .live-switch input:checked + .slider:before { background: #fff; }

body.sn-app .live-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-weight: 800;
}
body.sn-app .live-badge.live-on { background: var(--up-soft); color: var(--up); }
body.sn-app .live-badge.live-off { background: var(--fill-100); color: var(--ink-500); }

body.sn-app .btn-kill {
  background: var(--down-soft);
  color: var(--down);
  border: 1px solid var(--down);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}
body.sn-app .btn-kill:hover { background: var(--down); color: #fff; }

body.sn-app .mode-badge.mode-paper { background: var(--fill-100); color: var(--ink-500); }
body.sn-app .mode-badge.mode-live { background: var(--up-soft); color: var(--up); }

body.sn-app .day-summary { color: var(--ink-500); }

/* signal-now panel iframe 닫기 버튼 라이트 */
body.sn-app #sn-panel iframe { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ============ 옛 style.css 의 추가 다크 잔재 라이트화 ============
 * style.css 에 hardcoded 다크 hex 가 남은 selector 들 — sn-overrides 가 라이트로 강제.
 */

/* 페이지 상단 toolbar (필터/검색/새로고침 버튼) — 라이트 카드 */
body.sn-app .toolbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
body.sn-app .toolbar select,
body.sn-app .toolbar input,
body.sn-app .toolbar button {
  background: #fff !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
body.sn-app .toolbar button {
  cursor: pointer;
  background: var(--fill-100) !important;
}
body.sn-app .toolbar button:hover {
  background: var(--brand-red) !important;
  color: #fff !important;
  border-color: var(--brand-red) !important;
}
body.sn-app .toolbar label {
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 700;
}

/* briefing (시그널) 합산평가 — 외인/기관 그리드 안 작은 박스들 */
body.sn-app .brief-col {
  display: flex; flex-direction: column; gap: 12px;
}
body.sn-app .brief-mkt {
  color: var(--ink-900) !important;
  font-weight: 800;
}
body.sn-app .brief-section { margin-bottom: 10px; }
body.sn-app .brief-stitle {
  color: var(--ink-700) !important;
  font-weight: 800;
  font-size: 13px;
}
body.sn-app .brief-block {
  background: var(--fill-100) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 12px;
}
body.sn-app .brief-block h5 {
  color: var(--ink-500) !important;
  font-size: 11px;
  font-weight: 800;
  margin: 0 0 6px;
}
body.sn-app .brief-block ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.sn-app .brief-block li {
  color: var(--ink-900);
  font-size: 12.5px;
  font-weight: 600;
  margin: 3px 0;
}

/* 시그널 모바일 카드 (briefing) */
body.sn-app .sig-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}
body.sn-app .sig-name { color: var(--ink-900); font-weight: 700; }
body.sn-app .sig-badge {
  background: var(--fill-100) !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--line-strong) !important;
  font-weight: 700;
}
body.sn-app .sig-badge.sig-continued_buy { background: var(--brand-red-soft) !important; color: var(--brand-red) !important; border-color: transparent !important; }
body.sn-app .sig-badge.sig-accel_buy { background: #FFF4D6 !important; color: #8B6500 !important; border-color: transparent !important; }
body.sn-app .sig-badge.sig-consensus { background: #EEEAFD !important; color: #5B47C0 !important; border-color: transparent !important; }
body.sn-app .sig-badge.sig-single_strong { background: var(--up-soft) !important; color: var(--up) !important; border-color: transparent !important; }
body.sn-app .sig-badge.sig-multi_signal { background: #FFEDD6 !important; color: #C26515 !important; border-color: transparent !important; }
body.sn-app .sig-badge.sig-upper-limit { background: var(--brand-red) !important; color: #fff !important; border-color: transparent !important; font-weight: 800 !important; }
body.sn-app .upper-limit-row { background: var(--brand-red-soft) !important; }
body.sn-app .upper-limit-row:hover { background: var(--brand-red-soft) !important; }

/* longterm 의 cand-card / 시그널 박스 — 회색 카드 톤 */
body.sn-app .cand-card {
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}
body.sn-app .muted-tag {
  background: var(--fill-100);
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  margin-left: 6px;
}

/* longterm 프리미엄 시그널의 .rule-list / .summary-grid */
body.sn-app .rule-list {
  color: var(--ink-700);
}
body.sn-app .rule-list span { color: var(--ink-400); }
body.sn-app .summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
body.sn-app .summary-grid .kv {
  background: var(--fill-100);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 12px;
}
body.sn-app .summary-grid .kv .k { color: var(--ink-500); font-weight: 700; font-size: 11px; }
body.sn-app .summary-grid .kv .v { color: var(--ink-900); font-weight: 800; font-size: 14px; margin-top: 2px; }

/* select 박스 우측 화살표 보정 (라이트 톤) */
body.sn-app .toolbar select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px !important;
}

/* main padding — main 자체 패딩 제거 (sn-main-inner 가 처리) */
body.sn-app main { padding: 0; }


/* ============ 헤더 시계 dot ============ */
.sn-cycle-dot {
  display:inline-block; width:7px; height:7px; border-radius:999px;
  background: var(--up);
  box-shadow: 0 0 0 0 currentColor;
  animation: snPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}

/* ============ 햄버거 (모바일 nav 토글) ============ */
.sn-hamburger {
  display: none;
  width: 38px; height: 38px;
  padding: 0; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.sn-hamburger span {
  display: block; width: 18px; height: 2px; background: var(--ink-700); border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}
.sn-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sn-hamburger.open span:nth-child(2) { opacity: 0; }
.sn-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .sn-hamburger { display: inline-flex; order: 2; }
  .sn-status { display: none; }
  .sn-tabs {
    display: none;
  }
  .sn-tabs.open {
    display: block;
    border-top: 1px solid var(--line);
  }
  .sn-tabs-inner {
    flex-direction: column;
    gap: 0;
    padding: 8px 18px 16px;
    overflow-x: visible;
  }
  .sn-tab {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }
  .sn-tab.on::after { display: none; }
  .sn-tab.on { background: var(--brand-red-soft); color: var(--brand-red); border-radius: 8px; }
  .sn-tab-group {
    display: flex; flex-direction: column;
    margin: 6px 0; padding: 6px;
    background: var(--fill-100); border-radius: 10px;
  }
  .sn-tab-group::before {
    content: "매매"; font-size: 11px; font-weight: 800;
    color: var(--ink-400); letter-spacing: 1px;
    padding: 4px 6px; display: block;
  }
}

/* ============ 매매 그룹 (시각 묶음) — 데스크탑 ============ */
.sn-tab-group {
  display: inline-flex;
  align-items: center;
  background: var(--fill-100);
  border-radius: var(--r-md);
  padding: 2px;
  margin: 6px 4px;
  gap: 1px;
  position: relative;
}
.sn-tab-group::before {
  content: "매매";
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-400);
  letter-spacing: 1px;
  padding: 0 8px 0 6px;
  border-right: 1px solid var(--line-strong);
}
.sn-tab-group .sn-tab {
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.sn-tab-group .sn-tab.on { background: #fff; box-shadow: var(--shadow-sm); color: var(--brand-red); }
.sn-tab-group .sn-tab.on::after { display: none; }

/* ============ 기존 페이지 호환 (점진 이행) ============
 * 다른 페이지(briefing/realtime/등)는 아직 옛 .card / .data 클래스 사용.
 * 라이트 톤 위에서도 가독성 유지하도록 옛 클래스 라이트로 재정의.
 */
body.sn-app .card,
body.sn-app .card.has-sig-cards,
body.sn-app .card.snapshot {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink-700);
  padding: 18px 20px;
  margin-top: 14px;
  /* 데스크탑에서 넓은 표가 카드 밖으로 흘러넘치지 않게 가로 스크롤 (모바일은 style.css:253 에 동일 규칙 존재) */
  overflow-x: auto;
}
/* 새 sn-card 의 body 도 동일 — overflow:hidden 인 .sn-card 안에서 표가 잘리지 않도록 본문에 스크롤 부여 */
body.sn-app .sn-card-body { overflow-x: auto; }
body.sn-app .card h2 {
  color: var(--ink-900);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
body.sn-app .card .muted { color: var(--ink-500); }
body.sn-app .num { color: var(--ink-900); font-weight: 800; font-size: 22px; }

/* 표 */
body.sn-app table.data {
  width: 100%; border-collapse: collapse;
}
body.sn-app table.data th {
  font-size: 12px; font-weight: 700; color: var(--ink-400);
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  background: var(--bg-subtle);
  /* 옛 style.css 의 top:50px 는 옛 sticky 헤더(.top 50px) 기준. 새 레이아웃은 .card 가 sticky 컨테이너라
     카드 내부 top:0 이 자연스러움. 50px 만큼 헤더가 아래로 떠서 위 50px 행이 가려지던 문제 fix. */
  position: sticky; top: 0; z-index: 1;
}
body.sn-app table.data td {
  padding: 11px 12px; font-size: 14px; color: var(--ink-700);
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
body.sn-app table.data tr:hover td { background: var(--bg-subtle); }
body.sn-app table.data tr.selected td { background: var(--brand-red-soft); }
body.sn-app table.data td.left, body.sn-app table.data th.left { text-align: left; }

/* 한국 컨벤션 컬러: pos=RED, neg=BLUE */
body.sn-app .pos { color: var(--up) !important; }
body.sn-app .neg { color: var(--down) !important; }
body.sn-app .muted { color: var(--ink-400); }

/* KPI box (기존 페이지의 .kpi-box) — 라이트 카드로 */
body.sn-app .kpi-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
body.sn-app .kpi-box .lbl {
  font-size: 12px; font-weight: 700; color: var(--ink-400); margin-bottom: 4px;
}
body.sn-app .kpi-box .val {
  font-size: 20px; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em;
}

/* 기존 status pill 잔재 숨김 — 새 헤더에 통합됨 */
body.sn-app .status-pill { display: none; }

/* 기존 'top' 헤더가 base.html 에 더는 없지만, 다른 페이지의 옛 마크업이 남아있으면 무력화 */
body.sn-app header.top { display: none; }
body.sn-app footer.bottom { display: none; }

/* 시그널/단기/장기매매 페이지의 sn-panel iframe (signal-now 상세) */
body.sn-app #sn-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
body.sn-app .detail-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink-500);
  font-size: 18px; line-height: 1;
  cursor: pointer; z-index: 10;
}
body.sn-app .detail-close:hover { background: var(--fill-100); color: var(--ink-900); }