:root {
  color-scheme: light;
  --page-bg: #f3f3ef;
  --ink: #111;
  --muted: #60605b;
  --profit: #ba3434;
  --loss: #1670b7;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Courier New", monospace; line-height: 1.6; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.05rem; font-weight: 500; }
.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 36px; }
.panel { border: 1px solid var(--ink); background: #fff; }
.page-header { padding: 28px; }
.topbar, .section-top, .quote-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { margin-bottom: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 13px; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font-size: .82rem; white-space: nowrap; }
.button:hover { color: #fff; background: var(--ink); }
.button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 3px solid #1670b7; outline-offset: 4px; }
.eyebrow { color: var(--muted); font-size: .73rem; letter-spacing: .12em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; }
.title-dot { color: #8a8a7b; }
.page-header > p { margin-top: 16px; color: var(--muted); font-size: .94rem; }
.mobile-break { display: none; }
.overview { margin-top: 16px; padding: 26px 28px 18px; }
.total-value { margin-top: 26px; font-size: clamp(2rem, 5.6vw, 4.1rem); line-height: 1.2; letter-spacing: -.06em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.total-value small { margin-left: .2em; font-size: .42em; letter-spacing: 0; }
.total-usd { margin-top: 8px; color: var(--muted); font-size: 1.05rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stat { min-width: 0; padding: 22px 18px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid #deded6; }
.stat h3 { font-weight: 400; font-size: .82rem; color: var(--muted); }
.stat h3 span { font-size: .7rem; }
.stat strong { display: block; margin-top: 8px; font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
.stat p { margin-top: 4px; font-size: .76rem; color: var(--muted); }
.quote-footer { margin-top: 16px; flex-wrap: wrap; gap: 4px 16px; font-size: .72rem; color: var(--muted); }
.status { margin-top: 8px; font-size: .76rem; color: var(--muted); }
.status.warning { color: #8b520c; }
.holdings-section { margin-top: 28px; }
.holdings-heading { margin-bottom: 12px; }
.muted { color: var(--muted); font-size: .76rem; }
.holding-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.holding-card { min-width: 0; padding: 22px; }
.holding-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ticker { font-size: 1.5rem; font-weight: 500; letter-spacing: -.04em; }
.quantity { font-size: .8rem; padding: 2px 8px; border: 1px solid #d4d4cb; }
.holding-name { color: var(--muted); font-weight: 400; font-size: .86rem; margin-top: 2px; }
.holding-value { margin-top: 24px; font-size: 1.6rem; letter-spacing: -.04em; line-height: 1.3; }
.holding-krw { margin-top: 4px; font-size: .78rem; color: var(--muted); }
.holding-pnl { margin-top: 14px; font-size: .88rem; }
.holding-pnl span { white-space: nowrap; }
.holding-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding-top: 16px; margin: 18px 0 0; border-top: 1px solid #d4d4cb; }
dt { color: var(--muted); font-size: .73rem; }
dd { margin: 4px 0 0; font-size: .87rem; }
.quote-time { margin-top: 16px; font-size: .65rem; color: var(--muted); }
.profit { color: var(--profit); }
.loss { color: var(--loss); }
.allocation { margin-top: 16px; padding: 22px 28px; }
.allocation-bar { display: flex; height: 16px; margin-top: 20px; gap: 3px; background: #eeeee8; }
.allocation-segment { min-width: 1px; }
.tone-0 { background: #252521; }
.tone-1 { background: #77776a; }
.tone-2 { background: #c9c9b8; }
.allocation-labels { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 12px; font-size: .77rem; }
.allocation-label { display: flex; align-items: center; gap: 7px; }
.swatch { width: 9px; height: 9px; display: inline-block; }
.page-footer { padding: 22px 0 0; color: var(--muted); font-size: .72rem; }
.page-footer p + p { margin-top: 5px; }
.footer-brand { display: block; margin-top: 20px; font-size: .75rem; }
.noscript { margin-top: 16px; padding: 16px; }
@media (max-width: 800px) {
  .holding-grid { gap: 10px; }
  .holding-card { padding: 16px; }
  .holding-value { font-size: 1.35rem; }
  .holding-details { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .page-shell { width: calc(100% - 20px); padding-top: 12px; }
  .page-header, .overview, .allocation { padding: 20px 18px; }
  .topbar { margin-bottom: 24px; }
  .eyebrow { font-size: .64rem; }
  .mobile-break { display: initial; }
  .page-header > p { font-size: .82rem; }
  .overview .section-top { gap: 8px; }
  .overview h2 { font-size: .84rem; }
  .button { font-size: .73rem; padding: 8px 10px; }
  .total-value { margin-top: 24px; font-size: clamp(1.9rem, 8.2vw, 3rem); }
  .stats { grid-template-columns: 1fr; margin-top: 22px; }
  .stat, .stat:first-child { padding: 14px 0; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; }
  .stat + .stat { border-left: 0; border-top: 1px solid #deded6; }
  .stat strong { margin: 0; text-align: right; font-size: 1.35rem; }
  .stat p { grid-column: 2; text-align: right; }
  .quote-footer { flex-direction: column; align-items: flex-start; }
  .holding-grid { grid-template-columns: 1fr; gap: 12px; }
  .holding-card { padding: 20px; }
  .holding-value { font-size: 1.75rem; margin-top: 20px; }
  .holding-details { grid-template-columns: 1fr 1fr; }
  .holding-pnl { font-size: .96rem; }
}