/* 노트북 차트와 같은 파스텔 톤. 배경 #f7f8f9 는 matplotlib 쪽과 맞춰 둔다.
   --up/--down 은 **국내 관례**다: 빨강이 상승, 파랑이 하락. */
:root {
  --bg: #f7f8f9;
  --card: #ffffff;
  --line: #e3e6ea;
  --text: #1f2933;
  --muted: #7b8794;
  --up: #c0674a;
  --down: #4a6fa5;
  --accent: #7fb3d5;
  --lever: #b06a2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 20px 48px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
/* 임베드는 iframe 크기에 **딱 맞춘다.** 교차출처 iframe 은 내용에 맞춰 자동으로 늘지 않아서,
   안쪽이 조금이라도 넘치면 부모 페이지 안에 **두 번째 스크롤바**가 생긴다.
   높이를 100vh 로 고정하고 차트가 남는 공간을 채우게 한다 — Plotly 는 컨테이너에
   확정 높이가 없으면 자기 기본값(450px)을 쓰는데, 그게 넘침의 원인이었다. */
body.embed {
  padding: 6px;
  background: var(--card);
  height: 100vh;
  overflow: hidden;
  display: flex;
}

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0; }
h3 { font-size: 16px; margin: 0 0 8px; }

main, .page-head, .page-foot { max-width: 1180px; margin: 0 auto; }
.page-head { margin-bottom: 20px; }
.page-head .sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }
.note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.warn-line { margin: 10px 0 0; font-size: 13px; color: var(--up); }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }

/* 통화 기준 전환 버튼(미국판 `.seg`)이 **없다** — 원화 하나뿐이라 전환할 것이 없다.
   대신 **기간 전환**이 있다: 전 구간을 통째로 그리면 계좌 개시 무렵의 자금 변동이
   수익률을 왜곡한다 (`domain/periods.py`). 선택된 버튼은 색을 채워 확실히 구분한다 —
   테두리 색만 바꾸면 어느 기간을 보고 있는지 한눈에 안 들어온다. */
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.period-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.period-btn { padding: 5px 12px; }
.period-btn.is-on {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
body.embed .card {
  border: 0; padding: 4px; margin: 0;
  flex: 1 1 auto; min-height: 0;      /* min-height:0 이 없으면 flex 자식이 안 줄어든다 */
  display: flex; flex-direction: column;
}
body.embed .card-head { flex: 0 0 auto; margin-bottom: 8px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .two-up { grid-template-columns: 1fr; } }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 6px 12px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.plot { width: 100%; min-height: 380px; }
#plot-weight, #plot-holdings { min-height: 420px; }

/* 임베드에서는 min-height 를 걷어내고 남는 높이를 전부 차지하게 한다.
   ID 선택자를 이겨야 해서 여기서 다시 지정한다. */
body.embed .plot,
body.embed #plot-weight,
body.embed #plot-holdings { flex: 1 1 auto; min-height: 0; height: auto; }

.metric-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.metric { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.metric-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.metric-value { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-note { font-size: 11px; color: var(--muted); margin-top: 3px; }

.up { color: var(--up); }
.down { color: var(--down); }

/* 주식 비중이 100%를 넘는 상태 = 신용 레버리지. **오류색이 아니다** —
   버그가 아니라 계좌의 성질이므로, 눈에는 띄되 빨간 경고로 보이지 않게 한다 (D-101). */
.lever { color: var(--lever); }

/* 표는 자기 안에서만 가로 스크롤한다 — 본문이 통째로 밀리면 모바일에서 못 읽는다. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child,
th:nth-child(2), td:nth-child(2) { text-align: left; }
thead th { border-bottom: 2px solid var(--line); color: var(--muted); font-size: 12px; }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
caption.empty { caption-side: bottom; }

/* 토스트는 **복사 대상 한가운데**에 뜬다. left/top 은 JS 가 문서 좌표로 넣는다
   (`toast.js`) — fixed 로 두면 부모가 iframe 을 늘렸을 때 안 보이는 자리에 붙는다. */
.toast {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  background: #1f2933; color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: .18s;
  max-width: 90vw; text-align: center; z-index: 40;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .28);
}
.toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.warn { background: #8a5a2b; }
.toast.ok { background: #2f6f4f; }

dialog {
  border: 1px solid var(--line); border-radius: 12px; padding: 20px;
  max-width: 620px; width: 92vw;
}
dialog::backdrop { background: rgba(0, 0, 0, .35); }
#embed-code {
  width: 100%; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; resize: vertical;
}
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* 고지사항 — 본문보다 한 단계 물러나 보이되 읽을 수는 있어야 한다.
   줄간격을 넓혀서 긴 문단이 벽처럼 보이지 않게 한다. */
.page-foot {
  margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); max-width: 1180px;
}
.page-foot h2 {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .08em; margin: 0 0 10px;
}
.page-foot p { margin: 0 0 10px; line-height: 1.85; }
.page-foot p:last-child { margin-bottom: 0; }
.page-foot strong { color: #5b6673; font-weight: 600; }
/* 빌드 표시는 읽으라고 두는 게 아니라 **찾을 때 있으라고** 둔다. */
.page-foot .build { font-family: ui-monospace, monospace; font-size: 11px;
                    color: #a3adb8; margin-top: 14px; }

/* 더보기 — 표를 10줄씩 드러낸다 (`paged_table.js`). **누를 때만** 늘어난다.
   마지막 줄과 버튼을 같은 50%로 흘려 "여기가 끝이 아니다"를 한 덩어리로 보여준다. */
.more { display: flex; justify-content: center; padding: 4px 0 2px; }
.more-btn {
  font: inherit; font-size: 13px; color: #4a5561;
  background: #f2f4f6; border: 1px solid #dfe3e8; border-radius: 999px;
  padding: 7px 18px; cursor: pointer;
  opacity: .5; transition: opacity .15s;
}
/* 키보드 포커스에서도 또렷해져야 한다 — 반투명한 채로 초점만 가면 어디 있는지 모른다. */
.more-btn:hover, .more-btn:focus-visible { opacity: 1; background: #e9edf1; }
tbody tr.row-more { opacity: .5; }
.more-btn span { color: #97a1ab; margin-left: 4px; }
.more-done { font-size: 12px; color: #a3adb8; margin: 0; }