:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  color: #242b31;
  background: #f7f8fa;
  color-scheme: light;
  font-synthesis: none;
  --muted: #697580;
  --border: #e2e6ea;
  --accent: #244b79;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.6; }
header { background: #fff; border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1280px; height: 76px; padding: 0 36px; margin: auto; display: flex; align-items: center; gap: 24px; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: bold; letter-spacing: -1px; color: #263b50; text-decoration: none; }
.brand-dot { color: #a9734e; }
.service-label { border-left: 1px solid var(--border); padding-left: 24px; font-size: 12px; color: var(--muted); }
#logout { margin-left: auto; }
main { max-width: 1280px; margin: 0 auto; padding: 30px 36px 0; }
#status { padding: 13px 18px; margin: 0 0 24px; background: #fff8ed; border-left: 3px solid #ba8a42; color: #76521e; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
#status:empty { display: none; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 28px; letter-spacing: -1px; line-height: 1.4; font-weight: 650; margin-bottom: 0; }
h2 { font-size: 17px; letter-spacing: -.4px; margin-bottom: 0; font-weight: 650; }
.section-label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
#auth { max-width: 1000px; margin: 64px auto 84px; display: grid; grid-template-columns: 1fr 380px; gap: 90px; align-items: center; }
.intro h1 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.5; letter-spacing: -1.8px; margin: 15px 0 22px; }
.intro-copy { font-size: 15px; color: #596572; line-height: 1.9; }
.account-facts { display: flex; gap: 36px; border-top: 1px solid #d5dce2; padding-top: 24px; margin-top: 32px; }
.account-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.account-facts dd { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.account-facts dd.fact-text { font-size: 18px; padding-top: 9px; }
.account-facts dd span { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.intro-note { font-size: 12px; color: var(--muted); margin-top: 26px; }
.login-panel { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 32px; }
.login-panel h2 { font-size: 20px; }
.form-description { color: var(--muted); font-size: 12px; margin: 8px 0 28px; }
label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 7px; }
input, select { width: 100%; min-width: 0; height: 44px; border: 1px solid #cbd3da; border-radius: 4px; padding: 0 12px; background: #fff; color: #242b31; font: inherit; }
input::placeholder { color: #8b949d; }
input:focus, select:focus { border-color: var(--accent); }
:focus-visible { outline: 2px solid #497ba9; outline-offset: 3px; }
.field-help { font-size: 11px; color: var(--muted); margin: 6px 0 21px; }
button { min-height: 40px; padding: 9px 16px; border: 1px solid transparent; border-radius: 4px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
button:hover { background: #193b63; }
button:disabled { opacity: .45; cursor: default; }
.secondary { color: #48545f; background: #fff; border-color: #cfd6dd; }
.secondary:hover { background: #f0f3f6; }
.text-button { color: var(--accent); background: transparent; padding: 6px 0; }
.text-button:hover { background: transparent; text-decoration: underline; }
.full-width { width: 100%; min-height: 44px; }
.signup-row { display: flex; align-items: center; justify-content: center; gap: 13px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 22px; padding-top: 15px; }
.heading { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 28px; gap: 16px; }
.metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; padding: 25px 0; background: white; border: 1px solid var(--border); border-top: 2px solid #324f6b; margin-bottom: 28px; border-radius: 3px; }
.metric { padding: 0 26px; border-right: 1px solid var(--border); }
.metric:last-child { border: 0; }
.metric small { color: var(--muted); font-size: 12px; }
.metric strong { display: block; font-size: clamp(20px, 2.1vw, 28px); letter-spacing: -.7px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 6px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 24px; padding: 23px; min-width: 0; }
.holdings-panel { min-height: 360px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 20px; }
.unit { font-size: 11px; color: var(--muted); white-space: nowrap; }
.search-form, .symbol-row { display: flex; gap: 8px; }
.search-form { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; }
.search-form button, .symbol-row button { padding: 9px 11px; }
.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.quote-info { background: #f6f8fa; font-size: 12px; padding: 12px; color: #526273; line-height: 1.7; margin: 12px 0 0; border-radius: 3px; }
.order-note { font-size: 11px; color: var(--muted); margin: 14px 0 0; line-height: 1.8; }
.section-description { font-size: 12px; color: var(--muted); margin: -10px 0 20px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
th { background: #f7f8fa; color: #66727e; font-weight: 500; }
td, th { text-align: right; padding: 13px 12px; border-bottom: 1px solid #e9edf0; white-space: nowrap; }
td:first-child, th:first-child { text-align: left; }
td:first-child { font-weight: 550; }
tr:hover td { background: #fafbfc; }
.empty-state { text-align: center; padding: 46px 12px; margin: 0; color: var(--muted); font-size: 13px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.pagination button { min-height: 32px; padding: 5px 12px; font-size: 12px; }
.positive { color: #b4443c; }
.negative { color: #2864a2; }
#searchResults:empty { display: none; }
#searchResults { max-height: 240px; overflow-y: auto; margin-bottom: 20px; }
#searchResults button { display: block; width: 100%; text-align: left; white-space: normal; border-radius: 0; padding: 11px 4px; border-bottom: 1px solid var(--border); color: var(--accent); background: #fff; font-size: 12px; font-weight: 500; }
#searchResults button:hover { background: #f2f5f8; }
.notice { border-top: 1px solid #dce2e7; padding: 22px 0; display: flex; gap: 24px; font-size: 11px; color: var(--muted); }
.notice strong { white-space: nowrap; font-weight: 600; }
.notice p { margin: 0; }
footer { max-width: 1280px; margin: 0 auto; padding: 8px 36px 28px; display: flex; justify-content: space-between; gap: 16px; color: #7d8893; font-size: 11px; }
[hidden] { display: none !important; }
@media (max-width: 1000px) { #auth { gap: 40px; } .grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; } .panel { padding: 18px; } .metric { padding: 0 18px; } }
@media (max-width: 760px) {
  .header-inner { height: 66px; padding: 0 20px; gap: 16px; }
  .brand { font-size: 24px; }
  .service-label { display: none; }
  main { padding: 22px 18px 0; }
  #auth { grid-template-columns: 1fr; gap: 28px; margin: 20px auto 40px; max-width: 440px; }
  .intro h1 { font-size: 29px; letter-spacing: -1px; margin-bottom: 14px; }
  .intro-copy { font-size: 14px; }
  .account-facts { margin-top: 22px; padding-top: 18px; }
  .intro-note { display: none; }
  .login-panel { padding: 26px; }
  .heading h1 { font-size: 23px; }
  .metrics { grid-template-columns: 1fr 1fr; padding: 0; }
  .metric { padding: 20px; border-bottom: 1px solid var(--border); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { border-bottom: 0; }
  .metric strong { font-size: 23px; }
  .grid { grid-template-columns: 1fr; gap: 0; }
  .holdings-panel { min-height: 220px; }
  .notice { display: block; }
  .notice strong { display: block; margin-bottom: 6px; }
  footer { padding: 8px 18px 24px; flex-wrap: wrap; }
}
#searchResults button strong { display: block; font-size: 12px; font-weight: 550; }
#searchResults button span { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.weekly-panel { border-top: 2px solid #9b8062; }
.weekly-report { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.weekly-period { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.weekly-report h3 { font-size: 18px; font-weight: 600; margin: 0 0 16px; overflow-wrap: anywhere; }
.weekly-report summary { cursor: pointer; color: var(--accent); font-size: 12px; padding: 8px 0; }
.weekly-note { font-size: 11px; color: var(--muted); margin: 12px 0 0; }
.app-nav { display:flex; gap:24px; padding:0 0 20px; margin-bottom:24px; border-bottom:1px solid var(--border); overflow:auto; }
.app-nav a { color:var(--muted); text-decoration:none; white-space:nowrap; font-size:13px; }
.app-nav a[aria-current="page"] { color:var(--accent); font-weight:700; }
.toolbar { display:flex; gap:16px; align-items:end; flex-wrap:wrap; margin:24px 0; }
.toolbar label { flex:1; min-width:140px; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; }
.detail-price { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; margin:15px 0 5px; }
#priceChart { width:100%; height:300px; touch-action:pan-y; }
.chart-tooltip { min-height:24px; font-size:12px; color:var(--muted); }
.range-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.range-buttons button { background:#f0f3f6; color:var(--accent); }
.range-buttons button[aria-pressed="true"] { background:var(--accent); color:white; }
.watch-row { display:flex; gap:18px; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding:14px 0; flex-wrap:wrap; }
.quote-info { white-space:pre-line; margin-bottom:16px; }
.metric:nth-child(2) strong { font-size:18px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#f6f8fa; padding:16px; font-size:12px; }
[data-page="fx"] form { max-width:620px; }
@media(max-width:850px){.detail-grid{grid-template-columns:1fr}.app-nav{gap:18px}.detail-price{font-size:23px}.toolbar{gap:10px}.watch-row{gap:10px}}
/* Market and ranking filters update the results immediately. */
.explore-options{display:grid;gap:10px;margin:14px 0 18px}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip-row button{width:auto;padding:8px 13px;border:1px solid #cbd5df;border-radius:999px;background:#fff;color:#244b79;font-weight:600}
.chip-row button[aria-pressed="true"]{background:#244b79;color:#fff;border-color:#244b79}
.fx-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px;color:#244b79;font-weight:600}
.display-currency{display:flex;align-items:center;gap:10px;max-width:250px;margin:0 0 8px}
.display-currency select{width:165px;height:36px}
.fx-rate{padding:14px 16px;margin-top:18px;border:1px solid #d9e3eb;border-left:3px solid #244b79;background:#f6f9fb;color:#253e56;font-weight:650;font-variant-numeric:tabular-nums}
#exploreRows table{font-size:13px}
#exploreRows th,#exploreRows td{padding:15px 12px}
#exploreRows td.rank-number{color:#87939e;font-weight:700;text-align:center;width:32px}
#exploreRows td.price-cell,#exploreRows td.gain,#exploreRows td.loss{font-weight:750;font-size:14px;font-variant-numeric:tabular-nums}
#exploreRows td.gain{color:#d94b57}
#exploreRows td.loss{color:#367ae7}
#exploreRows td.flat{color:#677584}
#exploreRows td.status-cell{font-size:11px;color:#697580}
#exploreRows td.time-cell{font-size:11px;color:#697580}
#exploreRows .text-button{text-align:left;white-space:normal;line-height:1.35;color:#253b51;font-size:13px;font-weight:650}
.detail-price.gain { color: #d94b57; }
.detail-price.loss { color: #367ae7; }
.detail-price.flat { color: #697580; }