@font-face {
  font-family: 'Hana2';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/static/Hana2-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Hana2';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/static/Hana2-Medium.woff2') format('woff2');
}

:root {
  --bg: #F4F1E9;
  --surface: #FFFFFF;
  --surface-raised: #FBF8F0;
  --border: #E2DCC9;
  --border-soft: #EAE4D3;
  --text: #211D14;
  --text-muted: #74695A;
  --text-faint: #A69C88;
  --accent: #A8791F;
  --accent-text: #6E5215;
  --accent-soft: #EDE0BE;
  /* 가격 상승/하락(국내 관례: 상승 빨강/하락 파랑)과 킬스위치·위험 경고는 서로 다른
     상황이라 색을 분리했다 — 예전엔 둘 다 같은 값(#B7332B)이라 "지금 위험한가?"와
     "코인이 올랐나?"가 코드상으로도 구분이 안 됐다(대표님 지적: UI가 못생겼다는
     피드백의 근본 원인 중 하나 — 의미가 다른데 색이 같으면 위계가 안 잡힌다). */
  --up: #C0392B;
  --up-soft: #F6DFDB;
  --down: #2A5DB0;
  --down-soft: #DDE6F7;
  --good: #1F8A5F;
  --good-soft: #DCEDE3;
  --warn: #B4790F;
  --warn-soft: #F3E3C4;
  --critical: #9E1B2E;
  --critical-soft: #F3D8DB;
  --shadow: 0 1px 2px rgba(33, 29, 20, 0.07), 0 6px 16px rgba(33, 29, 20, 0.05);
  --font: 'Hana2', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
  /* 숫자 폰트도 Hana2로 통일한다(대표님 요청 2026-08-19: "폰트도 통일해줘, 크기만
     달리하고"). 한글과 숫자가 한 줄에 섞이는 곳(예: "BTC 비트코인", "-2,623원")이
     많은데, 숫자만 시스템 모노스페이스를 쓰면 한글은 브라우저 기본 폰트로 떨어져
     같은 줄 안에서 폰트가 갈라져 보였다. Hana2는 tabular-nums를 지원해 자릿수
     정렬도 유지된다(실측 확인 — fonttest.html 비교). */
  --mono: var(--font);
  --kr: var(--font);
  --radius: 14px;
  --radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0F16; --surface: #171A24; --surface-raised: #1E2230;
    --border: #2A2E3D; --border-soft: #20232F;
    --text: #EDEAE0; --text-muted: #8D93A8; --text-faint: #565C71;
    --accent: #E0AA4C; --accent-text: #F0C877; --accent-soft: #35290F;
    --up: #F0655C; --up-soft: #391E1D; --down: #6FA1FF; --down-soft: #1A2740;
    --good: #3FC086; --good-soft: #123024; --warn: #EBB147; --warn-soft: #362A10;
    --critical: #FF4D4D; --critical-soft: #3D1414;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.28);
  }
}

:root[data-theme="dark"] {
  --bg: #0D0F16; --surface: #171A24; --surface-raised: #1E2230;
  --border: #2A2E3D; --border-soft: #20232F;
  --text: #EDEAE0; --text-muted: #8D93A8; --text-faint: #565C71;
  --accent: #E0AA4C; --accent-text: #F0C877; --accent-soft: #35290F;
  --up: #F0655C; --up-soft: #391E1D; --down: #6FA1FF; --down-soft: #1A2740;
  --good: #3FC086; --good-soft: #123024; --warn: #EBB147; --warn-soft: #362A10;
  --critical: #FF4D4D; --critical-soft: #3D1414;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--kr);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: linear-gradient(155deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.brand-name { font-family: var(--mono); font-weight: 500; font-size: 16px; letter-spacing: 0.01em; }
.brand-sub { font-family: var(--mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.03em; }

.mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  padding: 7px 14px; border-radius: 999px; background: var(--warn-soft); color: var(--warn);
}
.mode-pill.live { background: var(--accent-soft); color: var(--accent-text); }
.mode-pill.stopped { background: var(--critical-soft); color: var(--critical); }

.conn-pill {
  display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  color: var(--good); background: var(--good-soft); border: 1px solid var(--border-soft);
  padding: 7px 12px; border-radius: 999px;
}

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dot.pulse { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dot.pulse { animation: none; } }

.section-label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}

.badge {
  font-family: var(--kr); font-size: 10.5px; font-weight: 500; padding: 3px 9px;
  border-radius: 999px; text-transform: none;
}
.badge.planned { background: var(--accent-soft); color: var(--accent-text); }
.badge.live-data { background: var(--good-soft); color: var(--good); }

/* --- 상단 요약 스트립("한눈에 보기") — 평가손익처럼 가장 중요한 숫자를 페이지 중간
   kv-list에 다른 항목과 같은 무게로 묻어두지 않고, 맨 위에 따로 꺼내 크게 보여준다.
   나머지 카드가 전부 같은 시각적 무게를 가져 "한눈에 상태가 안 보인다"는 문제의
   핵심 처방. */
.hero-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
@media (max-width: 720px) { .hero-strip { grid-template-columns: repeat(2, 1fr); } }
.hero-stat {
  background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
/* 라벨·값·보조문구 셋 다 한글이 섞여 있어(예: "-2,623원", "실거래중") 폰트를 따로
   쓰면 한글 글자만 브라우저 기본 폰트로 떨어져 부품별로 다르게 보였다(대표님 지적).
   본문과 같은 Hana2 하나로 통일하고 크기·굵기로만 위계를 준다. */
.hero-stat-label {
  font-family: var(--kr); font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-faint);
}
.hero-stat-value {
  font-family: var(--kr); font-size: 23px; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-stat-value.up { color: var(--up); }
.hero-stat-value.down { color: var(--down); }
.hero-stat-value.critical { color: var(--critical); }
.hero-stat-sub { font-family: var(--kr); font-size: 12px; color: var(--text-muted); }

/* --- 실시간 시세 표 --- */
.ticker-table td, .ticker-table th { white-space: nowrap; }
.ticker-table td:first-child { width: 100%; }
.ticker-dir {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ticker-dir.up { color: var(--up); }
.ticker-dir.down { color: var(--down); }
.ticker-dir.flat { color: var(--text-faint); }
/* 순삼각형을 border 트릭으로 그린다 — 글자(▲)로는 크기를 키워도 폰트마다 모양이
   들쭉날쭉해 흐릿해 보였다(대표님 지적). 도형으로 그리면 크기와 선명도가 항상 일정하다. */
.tri { display: inline-block; width: 0; height: 0; flex-shrink: 0; }
.tri.up { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--up); }
.tri.down { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--down); }
.tri.flat { width: 8px; height: 2px; border-radius: 1px; background: var(--text-faint); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}

.empty {
  border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 30px 20px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}

.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px;
}
.kv-row:last-child { border-bottom: none; padding-bottom: 0; }
.kv-row:first-child { padding-top: 0; }
.kv-label { color: var(--text-muted); }
.kv-value { font-family: var(--mono); font-weight: 500; text-align: right; }

.status-chip {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: var(--radius-sm);
}
.status-chip.good { color: var(--good); background: var(--good-soft); }
.status-chip.warn { color: var(--warn); background: var(--warn-soft); }
.status-chip.critical { color: var(--critical); background: var(--critical-soft); }
.status-chip.up { color: var(--up); background: var(--up-soft); }
.status-chip.down { color: var(--down); background: var(--down-soft); }
.status-chip.info { color: var(--accent-text); background: var(--accent-soft); }
.status-chip[title] { cursor: help; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.footnote { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; line-height: 1.5; }

.error-note {
  background: var(--critical-soft); color: var(--critical); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px;
}

.disclaimer {
  background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); padding: 12px 16px;
  font-size: 12.5px; line-height: 1.5;
}

/* 표 기본 스타일 — 최근 신호/주문 로그, 예측 정확도, 매매대상 코인이 전부 이 안에서 쓴다 */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table-wrap th {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  text-align: left; padding: 8px 10px; color: var(--text-muted); font-weight: 500;
  font-size: 11px; letter-spacing: 0.02em; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table-wrap td {
  padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
.table-wrap tbody tr:last-child td { border-bottom: none; }
/* title 속성(사유 등)을 가진 행 — 커서와 은은한 배경으로 "올리면 더 나온다"는 힌트를 준다.
   네이티브 title 툴팁은 아무 표시가 없으면 마우스를 올려볼 이유를 못 느끼기 때문. */
.row-hint { cursor: help; }
.row-hint:hover { background: var(--surface-raised); }
.table-wrap th.num, .table-wrap td.num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* 거래내역 손익 — 이익 빨강/손실 파랑(국내 관례, 시세카드와 동일한 팔레트) */
.table-wrap td.pnl.up { color: var(--up); font-weight: 500; }
.table-wrap td.pnl.down { color: var(--down); font-weight: 500; }
.table-wrap td.pnl.flat { color: var(--text-faint); }

/* 1~5행까지는 그대로 보이고, 그 이상은 섹션 안에서만 스크롤(페이지 전체는 안 늘어남).
   행 높이(padding 9px×2 + 글자)가 약 36px, 헤더 약 34px -> 헤더+5행 ≈ 214px. */
.scroll-5 { max-height: 214px; overflow-y: auto; }

.kill-btn {
  width: 100%;
  appearance: none;
  border: 1px solid var(--critical);
  background: var(--critical-soft);
  color: var(--critical);
  font-family: var(--kr);
  font-weight: 500;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kill-btn:hover { background: var(--critical); color: var(--surface); }
.kill-btn:focus-visible { outline: 2px solid var(--critical); outline-offset: 2px; }

/* ── 친절한 표시 (2026-08-22) ─────────────────────────────── */
/* 지금 상태 한 줄 배너 — 시스템이 뭘 하는지 사람 말로 */
.status-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.status-banner.up { border-left-color: var(--up); }
.status-banner.down { border-left-color: var(--down); }
.status-banner-icon { font-size: 20px; line-height: 1.3; }
.status-banner-text { font-size: 14px; color: var(--text); line-height: 1.55; }
.status-banner-sub { font-size: 12px; color: var(--text); margin-top: 5px; }
.status-banner-sub b.up { color: var(--up); font-weight: 500; }
.status-banner-sub b.down { color: var(--down); font-weight: 500; }

/* 상단 지표 옆 풀어쓴 힌트 ("지금 다 팔면" 등) */
.label-hint {
  font-size: 10px; font-weight: 300; color: var(--text-muted);
  letter-spacing: 0; margin-left: 4px; text-transform: none;
}

/* 카드 제목 아래 한 줄 안내문 */
.section-desc {
  font-size: 12px; color: var(--text); line-height: 1.5;
  margin: -4px 0 12px;
}

/* 브랜드 로고 이미지 (2026-08-22 대표님 제공 엠블럼) */
.brand-logo { height: 38px; width: auto; border-radius: 9px; display: block; }

/* 카드 제목+안내문 한 줄 배치 + 표 압축 (2026-08-22) */
.section-label-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-label-row .section-label { margin: 0; }
.section-desc-inline { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* 컬럼 사이 여백을 좁혀 왼쪽으로 모아 보이게 — width:100% 상속을 끊는다 */
.table-compact { width: auto; min-width: 60%; }
.table-compact th, .table-compact td { padding-right: 22px; }
.table-compact th:last-child, .table-compact td:last-child { padding-right: 12px; }