/* 노트북 차트와 같은 파스텔 톤. 배경 #f7f8f9 는 matplotlib 쪽과 맞춰 둔다. */
:root {
  --bg: #f7f8f9;
  --card: #ffffff;
  --line: #e3e6ea;
  --text: #1f2933;
  --muted: #7b8794;
  --up: #c0674a;
  --down: #4a6fa5;
  --accent: #7fb3d5;
}

* { 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); }

.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn {
  border: 0; background: var(--card); color: var(--muted);
  padding: 7px 15px; font: inherit; font-size: 14px; cursor: pointer;
}
.seg-btn.is-on { background: 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); }

/* 표는 자기 안에서만 가로 스크롤한다 — 본문이 통째로 밀리면 모바일에서 못 읽는다. */
.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: 28px; font-size: 13px; color: var(--muted); }