/* 전 화면 공용 디자인 시스템.
   기준은 주문계산 화면(옛 style.css)이다 — 흰 배경, 골드 강조, 패널/표 형식.
   화면별 CSS 는 이 파일 뒤에 실려 레이아웃만 덧붙인다. 색·타이포·헤더·표는
   여기서만 정의한다(예전엔 화면마다 따로 정의해 서로 어긋났다). */

:root {
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eceff3;
  --line: #dde2e8;
  --text: #16202a;
  --muted: #5f6b7a;
  --accent: #a8690b;          /* 강조 골드 */
  --accent-dark: #8d5709;
  --radius: 14px;
  --mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', system-ui, sans-serif;

  /* 본문 폭과 좌우 여백. 이 화면들은 대부분 가로로 긴 표(시트·주문표·스크리너)라
     폭을 묶을수록 표가 잘리고 양옆만 비었다. 폭 제한은 풀어 두되, 좌우 여백을
     0 에 가깝게 깎으면 내용이 화면 모서리에 붙어 어색하다. 표는 그대로 넓게 쓰면서
     양옆에 손가락 한 마디 정도의 여백만 남기는 값으로 되돌린다. */
  --content-max: none;
  --gutter: clamp(18px, 1.6vw, 40px);

  /* 매수/매도 색 규칙 — 시트 색 규칙과 동일하게 한 곳에서만 정한다.
     매수=빨강 / LOC매도=초록 / 지정가=파랑 / MOC=회색 */
  --t-buy: #d92d20;   --t-buy-bg: #fef3f2;
  --t-sell: #0e8a4f;  --t-sell-bg: #ecfdf3;
  --t-limit: #1d6fd0; --t-limit-bg: #eff6ff;
  --t-moc: #4b5563;   --t-moc-bg: #f3f4f6;

  --up: #0e8a4f;
  --down: #c0392b;
  --warn: #b45309;
  --warn-bg: #fff7e6;

  /* 화면별 CSS 가 쓰던 옛 이름들. 값을 위 토큰에 묶어 두면 색이 갈리지 않는다. */
  --ink-0: var(--bg); --ink-1: var(--surface); --ink-2: var(--surface-2);
  --paper: var(--text); --paper-dim: var(--muted); --rule: var(--line);
  --ground: var(--surface-2); --ink: var(--text); --ink2: var(--muted);
  --accent-soft: #c98a2c;
  --hairline: 1px solid var(--line);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 20px; --sp-5: 28px; --sp-6: 40px;
  --font-display: var(--sans); --font-body: var(--sans); --font-num: var(--mono);
  --buy: var(--t-buy); --sell: var(--t-sell);
  --ok: var(--up); --stop: var(--down); --danger: var(--down);
}

* { box-sizing: border-box; }

/* 내용이 짧은 화면에서 아래쪽이 다른 색으로 남지 않게 바탕을 못 박는다.
   글자 기준 크기(16px→18px)를 여기서 한 번 키운다. 화면 CSS 가 rem 으로 짜여
   있어서, 이 한 줄이 표·패널·버튼 글자를 한꺼번에 같은 비율로 키운다. */
html { background: var(--bg); font-size: 112.5%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(168, 105, 11, .05), transparent);
}

/* ---- 머리말 + 네비게이션 ------------------------------------------------
   nav 는 서버(app/nav.py)가 넣는다. 화면마다 손으로 적던 시절엔 화면별로
   메뉴가 달라져서, 어떤 화면은 아예 들어갈 길이 없었다. */

header.masthead {
  padding: 18px 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
/* 안쪽 폭을 본문과 똑같이 맞춘다. 제목 왼쪽 끝과 본문 왼쪽 끝이 어긋나면
   여백이 실제보다 더 넓어 보인다. */
header.masthead .inner {
  max-width: var(--content-max);
  margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
header.masthead h1 {
  margin: 0; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  font-weight: 800; letter-spacing: -.02em;
}
header.masthead .tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 3px 9px; border-radius: 6px; font-weight: 700;
}
header.masthead .sub,
header.masthead .meta {
  color: var(--muted); font-size: .82rem; margin-left: auto;
}
/* 제목 안에 들어간 부제는 붙어 버리므로 아랫줄로 내린다. */
header.masthead h1 .sub {
  display: block; margin: 4px 0 0;
  font-size: .78rem; font-weight: 500; letter-spacing: 0;
}

.mainnav {
  display: flex; gap: 6px; flex-wrap: wrap;
  width: 100%; margin: 14px 0 0; padding: 0 0 12px;
}
.mainnav a {
  font-size: .78rem; font-weight: 600; text-decoration: none;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 11px; white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.mainnav a:hover { color: var(--text); border-color: var(--accent); }
.mainnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mainnav a[aria-current="page"] {
  color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 700;
}
/* 평소 볼 일이 없는 화면(중복·미가동). 지우지 않고 뒤로 물린다.
   테두리를 점선으로 바꿔 색만으로 구분하지 않게 한다(색약 대응). */
.mainnav a.muted {
  color: #98a2b3; background: var(--surface);
  border-style: dashed; border-color: #e3e8ee; font-weight: 500;
}
.mainnav a.muted:hover { color: var(--muted); border-color: var(--line); }
/* 흐린 탭이라도 지금 보고 있는 화면이면 위치는 분명히 보여야 한다. */
.mainnav a.muted[aria-current="page"] {
  color: #fff; background: var(--muted); border-color: var(--muted);
  border-style: solid; font-weight: 700;
}

/* 자주 쓰는 메뉴와 나머지를 가르는 칸막이 */
.mainnav .navsep {
  width: 1px; align-self: stretch; background: var(--line); margin: 2px 5px;
}

/* 본문 상자. 백테스트의 <main> 은 .app 안에 들어 있어 제외한다(여백이 겹친다). */
body > main:not(.login-wrap), .wrap, .app {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--gutter) var(--gutter) 56px;
}

/* ---- 패널 ---- */
.panel, .block, .card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.panel h2, .block h2 {
  margin: 0 0 14px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.panel h2::before, .block h2::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}

/* ---- 입력 ---- */
.field label { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; }
.field input, .field select, input[type="text"], input[type="number"], input[type="password"], select {
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 10px; font-family: var(--mono); font-size: .9rem;
}
.field input, .field select { width: 100%; }
input:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 105, 11, .15);
}

button {
  font-family: var(--sans); font-weight: 700; font-size: .9rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 18px;
  background: var(--surface-2); color: var(--text);
  transition: transform .08s ease, background .15s;
}
button:hover { background: #e2e6ec; transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary:hover { background: var(--accent-dark); }

/* ---- 표 ----
   글자 등급을 셋으로 나눈다. 예전엔 표 전체가 같은 고정폭·같은 굵기라
   이름·설명·숫자가 한 덩어리로 보여 눈길이 어디로 가야 할지 알 수 없었다.
     ① 라벨(th, .k)      — 작고 흐린 대문자 산세리프. 읽지 않아도 되는 글자.
     ② 본문(td)          — 보통 굵기 산세리프.
     ③ 숫자(.num, .v 등) — 고정폭·자릿수 정렬·굵게·본문색. 여기로 눈이 가야 한다. */
table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .86rem; }
th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase; padding: 7px 8px; border-bottom: 1px solid var(--line);
}
td { padding: 9px 8px; border-bottom: 1px solid var(--line); }

/* 값이 바뀌는 숫자. 자릿수가 세로로 맞아야 크기 차이가 눈에 들어온다. */
.num, td.num, th.num, .figure, .v, .totals .t b, .stat .v, .card .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.num, td.num { text-align: right; font-weight: 600; color: var(--text); }
th.num { text-align: right; }
/* 오르내림은 색에 더해 굵기로도 갈린다(색만으로는 색약에서 구분이 어렵다). */
.num.up, .num.down, td.num.up, td.num.down { font-weight: 700; }
/* 값이 없는 칸(—)은 뒤로 물러나게 해서 실제 숫자만 남게 한다. */
.num.dim, .dim, td.dim, .num:empty { color: var(--muted); font-weight: 400; }

/* ---- 수치 카드(라벨 + 큰 값) ----
   라벨은 작고 흐리게, 값은 크고 굵게. 두 줄의 크기 차이가 곧 읽는 순서다. */
.stat .k, .card .k, .sumblock .k, .kv .k {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.stat .v, .card .v, .sumblock .v, .kv .v {
  font-weight: 700; color: var(--text);
}
.stat .v, .card .v { font-size: 1.3rem; line-height: 1.15; margin-top: 3px; }
.sumblock .v { font-size: 1rem; }
.sumblock .v.big { font-size: 1.3rem; color: var(--accent); }

.empty { color: var(--muted); font-style: italic; padding: 14px 8px; }
.note { color: var(--muted); font-size: .78rem; margin-top: 10px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---- 매수/매도 구분 (색 + 이모지) ---- */
tr.o-buy   { background: var(--t-buy-bg); }
tr.o-sell  { background: var(--t-sell-bg); }
tr.o-limit { background: var(--t-limit-bg); }
tr.o-moc   { background: var(--t-moc-bg); }
tr.o-buy   td:first-child { box-shadow: inset 4px 0 0 var(--t-buy); }
tr.o-sell  td:first-child { box-shadow: inset 4px 0 0 var(--t-sell); }
tr.o-limit td:first-child { box-shadow: inset 4px 0 0 var(--t-limit); }
tr.o-moc   td:first-child { box-shadow: inset 4px 0 0 var(--t-moc); }

.side {
  display: inline-block; font-family: var(--sans); font-weight: 800; font-size: .7rem;
  padding: 2px 7px; border-radius: 5px; color: #fff; margin-right: 6px; letter-spacing: .02em;
}
.side-buy { background: var(--t-buy); }
.side-sell { background: var(--t-sell); }
.side-limit { background: var(--t-limit); }
.side-moc { background: var(--t-moc); }

@media (max-width: 720px) {
  header.masthead .sub, header.masthead .meta { margin-left: 0; width: 100%; }
}