/*
 * base.css — 전체 공통 스타일
 *
 * 한국 HTS 관례 색상 체계:
 *   이익(+) = 빨강 (#e53935)
 *   손실(-) = 파랑 (#1e88e5)
 *   0/중립   = 회색 (#9e9e9e)
 *
 * 다크 테마 기반 (트레이딩 UI 표준).
 */

:root {
  /* ── 테마 색상 ───────────────────────────────────── */
  --bg-primary:   #0d1117;   /* 최상위 배경 */
  --bg-secondary: #161b22;   /* 카드/패널 배경 */
  --bg-tertiary:  #21262d;   /* 테이블 헤더/입력 배경 */
  --border:       #30363d;   /* 테두리 */
  --text-primary: #e6edf3;   /* 기본 텍스트 */
  --text-muted:   #7d8590;   /* 보조 텍스트 */
  --accent:       #1f6feb;   /* 강조 파랑 (버튼 등) */
  --accent-hover: #388bfd;
  /* 확인 다이얼로그 일반 확정 버튼 강조색(teal) — 위험(danger)이 아닌 평범한 확인용 */
  --confirm-teal:       #14b8a6;
  --confirm-teal-hover: #0d9488;
  /* 위험(danger) 확정 — 실전 전환·전량 매도 등 되돌릴 수 없는 동작 */
  --confirm-danger:       #ef5350;
  --confirm-danger-hover: #e53935;

  /* ── 손익 색상 (한국 HTS 관례) ───────────────────── */
  --color-profit: #e53935;   /* 이익=빨강 */
  --color-loss:   #1e88e5;   /* 손실=파랑 */
  --color-neutral: #9e9e9e;  /* 중립=회색 */

  /* ── 3선 색상 ────────────────────────────────────── */
  --color-line-base:  #ffffff;  /* 기준선=흰색 */
  --color-line-buy1:  #42a5f5;  /* 1차 매수=하늘색 */
  --color-line-buy2:  #ffa726;  /* 2차 매수=주황 */
  --color-line-stop:  #ef5350;  /* 손절=빨강 */
  --color-zone-buy:   rgba(66, 165, 245, 0.10);  /* 매수 구간 박스 */
  --color-zone-stop:  rgba(239, 83, 80, 0.10);   /* 손절 구간 박스 */

  /* ── 레이아웃 ────────────────────────────────────── */
  --nav-height:  52px;
  --sidebar-w:   220px;
  --content-max: 1400px;
  --radius:      6px;
}

/* ── 라이트 테마 (data-theme="light") ─────────────────────────────
   다크가 기본(:root). html[data-theme="light"] 일 때만 배경·텍스트·테두리
   토큰을 밝게 덮어쓴다. 손익(이익=빨강/손실=파랑)·3선 색은 HTS 관례라 유지하되
   강조색(accent·teal)은 밝은 배경 대비를 위해 약간 어둡게 보정. */
[data-theme="light"] {
  --bg-primary:   #ffffff;   /* 최상위 배경(밝음) */
  --bg-secondary: #f6f8fa;   /* 카드/패널 배경 */
  --bg-tertiary:  #eaeef2;   /* 테이블 헤더/입력 배경 */
  --border:       #d0d7de;   /* 테두리 */
  --text-primary: #1f2328;   /* 기본 텍스트(어두움) */
  --text-muted:   #59636e;   /* 보조 텍스트 */
  --accent:       #0969da;   /* 강조 파랑 — 밝은 배경 대비 보정 */
  --accent-hover: #0860ca;
  --confirm-teal:       #0d9488;  /* teal — 밝은 배경 대비 약간 어둡게 */
  --confirm-teal-hover: #0b7a70;
  /* 손익·3선·confirm-danger 색은 :root 값 유지(HTS 관례·위험 강조 일관). */
}

/* ── 리셋 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
               Helvetica, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── 네비게이션 바 ────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
  z-index: 1000;
}

.nav-brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  transition: color .15s, background .15s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  text-decoration: none;
}

/* 우측 운영 상태 배지 */
.nav-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.status-dot.running { background: #4caf50; box-shadow: 0 0 6px #4caf5080; }
.status-dot.stopped { background: var(--text-muted); }
.status-dot.error   { background: var(--color-line-stop); }

/* ── 메인 레이아웃 ────────────────────────────────── */
.main-content {
  margin-top: var(--nav-height);
  padding: 24px 20px;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ── 카드 ─────────────────────────────────────────── */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* ── 테이블 ───────────────────────────────────────── */
.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kw-table th {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.kw-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.kw-table tr:last-child td { border-bottom: none; }
.kw-table tr:hover td { background: var(--bg-tertiary); }

/* ── 손익 색상 클래스 ─────────────────────────────── */
.profit { color: var(--color-profit); font-weight: 600; }
.loss   { color: var(--color-loss);   font-weight: 600; }
.neutral { color: var(--color-neutral); }

/* ── 틱 점멸(가격 변동 시각 피드백) ────────────────────
   tick_ws.js 가 틱 수신 시 현재가 셀에 TICK_FLASH_MS 동안 부여한다.
   HTS 관례: 상승=빨강 / 하락=파랑 (--color-profit/--color-loss 와 동일 계열, 반투명).
   장외·WS 끊김 시에는 _tick_table_init.html 의 body[data-*] override(!important)가 끈다. */
.tick-up   { background-color: rgba(229, 57, 53, 0.18); }
.tick-down { background-color: rgba(30, 136, 229, 0.18); }

/* ── 배지 ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.badge-running  { background: #1b5e20; color: #81c784; }
.badge-stopped  { background: var(--bg-tertiary); color: var(--text-muted); }
.badge-stage    { background: var(--bg-tertiary); color: var(--text-primary); }
.badge-enabled  { background: #0d47a1; color: #90caf9; }
.badge-disabled { background: var(--bg-tertiary); color: var(--text-muted); }

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  /* a·button 높이 통일 — UA 기본 폰트/라인높이/박스 모델 정규화 */
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-secondary); border-color: var(--accent); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger {
  background: #b71c1c;
  border-color: #b71c1c;
  color: #fff;
}
.btn-danger:hover { background: #c62828; }

.btn-sm { padding: 3px 8px; font-size: 12px; }

/* 토글 버튼 활성 상태 (매매일지 기간 선택 등) */
.btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── 운영 제어 바 ─────────────────────────────────── */
.control-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.control-bar .divider {
  width: 1px; height: 24px;
  background: var(--border);
}

/* ── 폼 ───────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--accent); }

/* 읽기전용 입력 — 편집 가능한 칸과 시각 구분(자동 계산·차트 주도 값).
   왜: 종목추가의 자동 모드에서 2차/손절가가 "왜 입력이 안 되지?"를 겪지 않도록
   외형(흐린 글자·패널 톤 배경·기본 커서)으로 비편집 상태를 드러낸다.
   개별 인라인 스타일(예: 수정모드 종목코드)이 있으면 그쪽이 우선한다. */
.form-input[readonly] {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: default;
}
.form-input[readonly]:focus { border-color: var(--border); }
/* 예외: 손절가 입력(.loss)은 readonly 여도 위험 의미색(파랑)을 유지한다 —
   readonly 의 muted 색이 특이도에서 이겨 의미색을 지우는 것을 막는다. */
.form-input.loss[readonly] { color: var(--color-loss); }

/* ── 그리드 레이아웃 ──────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ── 메트릭 카드 ──────────────────────────────────── */
.metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.metric-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.metric-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.metric-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── 페이지 제목 ──────────────────────────────────── */
.page-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ── 구분선 ───────────────────────────────────────── */
.divider-h {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* ── 섹션 제목 (Streamlit st.subheader parity) ─────── */
.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 10px;
}

/* 섹션 제목 + 우측 액션 버튼 한 줄 (테이블 헤더 행) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}
.section-header .section-title { margin: 0; }
.section-header .actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 캡션 (테이블 하단 안내문 — Streamlit st.caption parity) ── */
.caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.6;
}
.caption.warn { color: #e0a030; }

/* ── 테이블 가로 스크롤 래퍼 (컬럼이 많은 관심종목용) ── */
.table-scroll { overflow-x: auto; }
.table-scroll .kw-table { min-width: 100%; }

/* ── 커스텀 호버 툴팁 (메모 등) ──
   왜: 네이티브 title 은 (1) 표시 지연이 ~1초로 강제돼 못 줄이고
   (2) .table-scroll 의 overflow-x:auto 가 세로축까지 클리핑해 행 안 가상요소는 잘린다.
   → body 직속 단일 요소를 position:fixed 로 띄워 클리핑을 원천 차단하고
   호버 즉시(지연 없이) 표시한다. 위치/표시는 JS(util/tooltip)가 제어. */
#kw-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;   /* 메모 줄바꿈 보존 */
  pointer-events: none;    /* 툴팁이 호버 대상을 가로채지 않게 */
  opacity: 0;
  display: none;           /* 숨김 시 레이아웃에서 제외 */
}
#kw-tooltip.is-visible { display: block; opacity: 1; }

/* 컴팩트 테이블 (정보 밀도 높은 화면) */
.kw-table.compact th,
.kw-table.compact td { padding: 6px 10px; font-size: 12px; }

/* 빈 상태 안내 박스 (Streamlit st.info parity) */
.empty-info {
  background: rgba(31, 111, 235, 0.08);
  border: 1px solid rgba(31, 111, 235, 0.25);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── 매매일지 구분 칩 (매수=빨강/매도=파랑) ── */
.chip-buy {
  background: rgba(244, 67, 54, 0.18);
  color: #ff8a80; font-weight: 600;
  padding: 2px 10px; border-radius: 12px; font-size: 12px;
}
.chip-sell {
  background: rgba(33, 150, 243, 0.18);
  color: #90caf9; font-weight: 600;
  padding: 2px 10px; border-radius: 12px; font-size: 12px;
}

/* ── 반응형 ───────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .main-content { padding: 16px 12px; }

  /* 모바일 네비 — 데스크톱은 fixed 단일 행이지만, 폰 폭에서는 메뉴 6개+로그아웃+
     상태점이 한 줄에 안 들어가 잘려서 일부 메뉴(로그 등)에 접근할 수 없었다.
     왜 sticky 인가: fixed 인 채 줄바꿈하면 본문 margin-top(고정 52px)과 어긋나
     본문 상단을 가린다 → sticky 는 자연 높이만큼 본문을 밀어내 겹침이 없다. */
  .nav {
    position: sticky;
    height: auto;
    min-height: var(--nav-height);
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 12px;
  }
  .nav-links { flex-wrap: wrap; }
  /* sticky 네비는 레이아웃에 포함되므로 본문 고정 여백 제거(이중 여백 방지). */
  .main-content { margin-top: 0; }
}

/* ── 테이블 행 선택 (관심·추적·잔고 공통) ──────────── */
.kw-table tr.selectable-row { cursor: pointer; }
.kw-table tr.selectable-row:hover { background: rgba(255, 255, 255, 0.04); }
.kw-table tr.selectable-row.selected { background: rgba(66, 165, 245, 0.18); }
/* 키보드 포커스 표시 — 행 선택을 마우스 없이(Tab 이동 → Enter/Space)도 쓸 수 있게.
   outline 음수 offset 으로 행 내부에 그려 테이블 레이아웃을 흔들지 않는다. */
.kw-table tr.selectable-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── 유틸리티 ─────────────────────────────────────── */
.text-right   { text-align: right; }
.text-center  { text-align: center; }
/* 테이블 헤더는 `.kw-table th { text-align:left }`(특이도 우위) 때문에
   .text-right/.text-center 가 무시된다 → 헤더-셀 정렬 불일치.
   같은 특이도 이상으로 끌어올려 숫자 컬럼 헤더도 셀과 같은 정렬을 따르게 한다. */
.kw-table th.text-right,  .kw-table td.text-right  { text-align: right; }
.kw-table th.text-center, .kw-table td.text-center { text-align: center; }
.text-muted   { color: var(--text-muted); }
.font-mono    { font-family: "SFMono-Regular", Consolas, monospace; }
.font-num     { font-variant-numeric: tabular-nums; }
.fw-600       { font-weight: 600; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: 16px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }
.gap-8        { gap: 8px; }
.flex         { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ── 확인 다이얼로그 (confirm_dialog.js) ──────────────────────────
   네이티브 confirm() 대체. 반투명 오버레이 + 중앙 카드(다크 테마).
   일반 확인은 teal, 위험(danger)은 빨강 강조. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .15s ease;
}
.confirm-overlay.show { opacity: 1; }

.confirm-card {
  width: 100%; max-width: 420px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
  padding: 22px 22px 18px;
  transform: translateY(8px) scale(.98);
  transition: transform .15s ease;
}
.confirm-overlay.show .confirm-card { transform: translateY(0) scale(1); }

.confirm-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 10px;
}
/* 위험 다이얼로그 제목엔 경고 포인트 색 */
.confirm-card.danger .confirm-title { color: var(--confirm-danger); }

.confirm-message {
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  white-space: pre-line;        /* \n(또는 줄바꿈)을 그대로 표시 */
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.confirm-actions .btn { min-width: 76px; }

/* 취소 = 연한(보조) 버튼 — .btn 기본 톤 사용. 확인 = teal/위험색. */
.confirm-btn-ok {
  background: var(--confirm-teal);
  border-color: var(--confirm-teal);
  color: #fff;
}
.confirm-btn-ok:hover {
  background: var(--confirm-teal-hover);
  border-color: var(--confirm-teal-hover);
}
.confirm-card.danger .confirm-btn-ok {
  background: var(--confirm-danger);
  border-color: var(--confirm-danger);
}
.confirm-card.danger .confirm-btn-ok:hover {
  background: var(--confirm-danger-hover);
  border-color: var(--confirm-danger-hover);
}