:root {
  --bg: #f2f4f6; --card: #ffffff; --text: #191f28; --muted: #8b95a1; --line: #eef0f3; --field: #e9ecef;
  --accent: #3182f6; --up: #f04452; --down: #3182f6;
  --ma5: #f59f00; --ma20: #12b886; --ma60: #9c36b5;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
  --rail: 66px;
}
@media (min-width: 600px) { :root { --rail: 120px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101216; --card: #1a1d23; --text: #eceef1; --muted: #8b95a1; --line: #262a32; --field: #23272e;
    --accent: #4b93ff; --up: #ff6b76; --down: #5aa0ff;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom)) var(--rail);
}
h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h3 { font-size: 15px; font-weight: 700; margin: 28px 4px 10px; }
h3 small { font-weight: 400; margin-left: 4px; }
ul, dl, dd { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 12px; padding: 11px 16px; background: var(--accent); color: #fff; font-weight: 600; }
input, select { width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--field); outline: none; }
input:focus, select:focus { box-shadow: 0 0 0 2px var(--accent); }
.muted { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 4px; }
.up { color: var(--up); }
.down { color: var(--down); }
.right { text-align: right; }
.big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 틀 */
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px);
}
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--card); border-radius: 99px; padding: 5px 12px; box-shadow: var(--shadow);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge.live { color: var(--text); }
.badge.live::before { background: #12b886; box-shadow: 0 0 0 3px color-mix(in srgb, #12b886 25%, transparent); }
.badge.warn::before { background: var(--up); }
main { max-width: 720px; margin: 0 auto; padding: 4px 12px 16px; }
.card { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); }

/* 왼쪽 세로 메뉴 */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 7; width: var(--rail);
  display: flex; flex-direction: column; gap: 4px; padding: 14px 6px calc(12px + env(safe-area-inset-bottom));
  background: var(--card); border-right: 1px solid var(--line); overflow-y: auto;
}
.rail button {
  background: none; color: var(--muted); padding: 13px 2px; border-radius: 12px;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-align: center;
}
.rail > button.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
/* 해외뉴스 소분류: 기사 목록 왼쪽에 항상 보이는 세로 칸 */
.news-layout { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: start; }
.side { position: sticky; top: 62px; display: flex; flex-direction: column; gap: 2px; padding: 5px; border-radius: 14px; }
.side button {
  background: none; color: var(--muted); padding: 10px 2px; border-radius: 9px;
  font-size: 12px; font-weight: 600; white-space: nowrap; text-align: center;
}
.side button.on { background: var(--text); color: var(--bg); }
@media (min-width: 600px) {
  .news-layout { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .side button { font-size: 13px; padding: 11px 4px; }
}
#alert-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--up); vertical-align: middle; }
#alert-dot[hidden] { display: none; }

/* ---------------------------------------------------------- 홈 */
.search { position: relative; }
.search input {
  padding: 13px 16px 13px 44px; border-radius: 14px; background-color: var(--card); box-shadow: var(--shadow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238b95a1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center;
}
#results {
  position: absolute; left: 0; right: 0; z-index: 4; margin-top: 6px; background: var(--card);
  border-radius: 14px; max-height: 60vh; overflow: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.hero {
  margin-top: 14px; padding: 22px 20px 18px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #2f6df0 0%, #4f8dff 55%, #6aa5ff 100%);
  box-shadow: 0 10px 28px rgba(49, 130, 246, .28);
}
.hero-label { font-size: 13px; opacity: .85; }
.hero-total { font-size: 32px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 2px 0 8px; }
.hero .pill { background: rgba(255, 255, 255, .2); color: #fff; }
.hero-meta { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.hero-meta div { flex: 1; min-width: 0; }
.hero-meta dt { font-size: 11px; opacity: .8; }
.hero-meta dd { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.filters { display: flex; gap: 12px; margin-top: 16px; }
.filters[hidden] { display: none; }
.filters .seg { flex: 1; margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chips button { background: var(--card); color: var(--muted); padding: 8px 14px; font-size: 13px; border-radius: 99px; }
.chips button.on { background: var(--accent); color: #fff; }
#stock-tabs { margin-bottom: 12px; }
#stock-tabs[hidden] { display: none; }
#stock-tabs button { padding: 10px 4px; font-size: 14px; }
#rank-filters { margin: 0 0 12px; }
.rank { flex: none; width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
#theme-list .search { margin-top: 6px; }
.theme-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 4px 14px; }
.star { flex: none; background: none; color: var(--muted); padding: 4px 6px; font-size: 20px; line-height: 1; font-weight: 400; }
.star.on { color: #f59f00; }
.sec { margin: 26px 6px 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.rows li + li { border-top: 1px solid var(--line); }
.rows li:active { background: var(--line); }
.rows .body { flex: 1; min-width: 0; }
.rows .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .name.tagged { display: flex; align-items: center; gap: 6px; }
.rows .name.tagged > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tag {
  flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.rows .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .sub .up, .rows .sub .down { font-weight: 600; }
.rows .price { font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--field);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--field); color: var(--muted);
}
.pill.up { background: color-mix(in srgb, var(--up) 13%, transparent); color: var(--up); }
.pill.down { background: color-mix(in srgb, var(--down) 13%, transparent); color: var(--down); }
.empty { margin-top: 16px; padding: 36px 20px; text-align: center; display: grid; gap: 4px; }
.empty[hidden] { display: none; }
.empty span { color: var(--muted); font-size: 13px; }
.fired { color: var(--up); font-weight: 600; font-size: 12px; }
.x { background: none; color: var(--muted); padding: 6px 8px; font-weight: 500; }

/* ---------------------------------------------------------- 종목 상세 */
.link { background: none; color: var(--accent); padding: 4px 2px; }
.detail-head { margin: 8px 4px 14px; }
.detail-title h2 { font-size: 18px; }
.detail-price { margin-top: 12px; }
.detail-price #d-change { font-weight: 600; margin-right: 8px; }
.detail-price #d-time { font-size: 12px; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 6px; margin-bottom: 12px; }
.stats[hidden] { display: none; }
.stats div { text-align: center; min-width: 0; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dt { font-size: 11px; color: var(--muted); }
.stats dd { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.seg { display: flex; gap: 4px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: 1 0 auto; min-width: 36px; background: var(--card); color: var(--muted);
  padding: 8px 4px; font-size: 13px; font-weight: 600; white-space: nowrap; border-radius: 10px;
}
.seg button.on { background: var(--accent); color: #fff; }
.ohlc { display: flex; flex-wrap: wrap; gap: 2px 10px; min-height: 18px; margin: 0 4px 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ohlc b { color: var(--text); font-weight: 600; }
#chart { height: 340px; }
.legend { display: flex; gap: 12px; font-size: 12px; margin: 4px 4px 0; }
.legend .ma5 { color: var(--ma5); } .legend .ma20 { color: var(--ma20); } .legend .ma60 { color: var(--ma60); }

.legend { flex-wrap: wrap; align-items: center; }
.legend .link { margin-left: auto; font-size: 12px; font-weight: 600; }
.an-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 10px; }
.an-head label { flex: 1; min-width: 0; max-width: 300px; font-size: 12px; }
.an-head select { margin-top: 2px; font-weight: 600; }
.an-quote { text-align: right; white-space: nowrap; }
.an-quote .big { font-size: 22px; line-height: 1.2; }
.an-quote span { font-size: 12px; font-weight: 600; }
#an-tools { padding: 6px 14px; margin: 10px 0; }
.an-group { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
.an-group + .an-group { border-top: 1px solid var(--line); }
.an-group > span { flex: none; width: 68px; font-size: 12px; font-weight: 600; }
.an-group .chips { margin: 0; }
.an-group .chips button { background: var(--field); padding: 6px 12px; }
.an-group .chips button.on { background: var(--accent); }
.an-chart { padding: 10px 6px 6px 10px; }
.an-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.an-bar .ohlc { margin: 0; }
#an-zoom { flex: none; margin: 0; }
#an-zoom button { flex: none; background: var(--field); padding: 5px 9px; font-size: 12px; border-radius: 8px; }
#an-zoom button.on { background: var(--text); color: var(--bg); }
#an-chart { height: 420px; }
@media (max-width: 599px) { #an-chart { height: 340px; } .an-group { flex-direction: column; gap: 6px; } }
#an-legend { gap: 4px 12px; margin: 6px 4px 2px; color: var(--muted); }
#an-legend span { display: inline-flex; align-items: center; gap: 5px; }
#an-legend i { width: 12px; height: 3px; border-radius: 2px; }
.an-pane { position: relative; margin-top: 6px; border-top: 1px solid var(--line); }
.an-pane > div { height: 130px; }
.an-pane > span { position: absolute; top: 4px; left: 4px; z-index: 3; font-size: 11px; font-weight: 600; color: var(--muted); }
.forecast { padding: 6px 18px; }
.forecast p { margin: 12px 0; font-size: 14px; line-height: 1.7; }
.vote { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: transparent; }
.vote.up { background: var(--up); } .vote.down { background: var(--down); } .vote.flat { background: var(--muted); }

.tape { overflow: hidden; }
.tape ul { max-height: 264px; overflow-y: auto; }
.tape-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; padding: 7px 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
.tape-row span:nth-child(2) { text-align: right; font-weight: 600; }
.tape-row span:nth-child(3) { text-align: right; }
.tape-head { font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
.tape-head span:nth-child(2) { font-weight: 400; }
.tape li + li { border-top: 1px solid var(--line); }
.tape li.big-lot span:nth-child(3) { font-weight: 700; }

.signals { padding: 4px 16px; }
.signals li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14px; }
.signals li + li { border-top: 1px solid var(--line); }
.signals li span:last-child { text-align: right; font-weight: 600; }

.row-form { display: flex; gap: 8px; align-items: flex-end; }
.row-form label { flex: 1; font-size: 12px; color: var(--muted); min-width: 0; }
.row-form input, .row-form select { background: var(--card); margin-top: 2px; }
.row-form button { flex: none; }
#h-result { margin: 8px 4px 0; }

#news-status { display: flex; align-items: center; gap: 6px; margin: 2px 4px 8px; font-size: 12px; }
#news-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12b886; }
.news li.fresh a::before {
  content: "NEW"; margin-right: 6px; padding: 1px 5px; border-radius: 5px; font-size: 10px; font-weight: 800;
  background: var(--up); color: #fff; vertical-align: 2px;
}
.news .src { display: inline-block; margin-right: 6px; font-weight: 700; color: var(--accent); }
.news { padding: 4px 16px; }
.news li { padding: 12px 0; }
.news li + li { border-top: 1px solid var(--line); }
.news a { color: var(--text); text-decoration: none; font-size: 14px; }
.danger { background: none; color: var(--muted); width: 100%; margin-top: 32px; font-weight: 500; }

/* ---------------------------------------------------------- 공통 */
#toast {
  position: fixed; left: calc(var(--rail) + 16px); right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 9;
  max-width: 480px; margin: 0 auto; background: var(--text); color: var(--bg);
  padding: 13px 16px; border-radius: 14px; text-align: center; font-size: 14px;
}
#login {
  position: fixed; inset: 0; z-index: 20; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#login[hidden] { display: none; }
#login form { width: 100%; max-width: 320px; display: grid; gap: 12px; padding: 24px; }

/* ---------------------------------------------------------- 대시보드 */
.dash-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.dash-top .seg { margin: 0; flex: none; }
.dash-top .seg button { background: var(--field); padding: 8px 14px; }
.dash-top .seg button.on { background: var(--text); color: var(--bg); }
.dash-status { flex: 1; min-width: 160px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dash-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--muted); }
.dash-status.on { color: var(--text); }
.dash-status.on::before { background: #12b886; box-shadow: 0 0 0 3px color-mix(in srgb, #12b886 25%, transparent); }
#dash-power { flex: none; }
#dash-power.stop { background: var(--up); }
.dash-warn { margin-top: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.6;
  background: color-mix(in srgb, var(--up) 12%, transparent); color: var(--up); }
.dash-warn[hidden] { display: none; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 599px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { padding: 14px 16px; min-width: 0; }
.kpi dt { font-size: 12px; color: var(--muted); }
.kpi dd { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-chart-box { padding: 10px 6px 6px 10px; }
#dash-chart { height: 260px; }
#dash-chart[hidden] { display: none; }
.dash-split { padding: 14px 16px; }
.split-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--field); }
.split-bar i, .split-legend i { background: var(--accent); }
.split-bar i.kr, .split-legend i.kr { background: #12b886; }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; }
.split-legend span { display: inline-flex; align-items: center; gap: 6px; }
.split-legend i { width: 10px; height: 10px; border-radius: 3px; }
.tag.kr { background: color-mix(in srgb, #12b886 14%, transparent); color: #0f9d6c; }
.tag.us { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.rows .sub.wrap { white-space: normal; }
.rows li.dim { opacity: .6; }
.trades li { align-items: flex-start; cursor: default; }
.trades li:active { background: none; }
.side { flex: none; margin-top: 2px; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff; }
.side.buy { background: var(--up); } .side.sell { background: var(--down); }
.memo { margin-top: 4px; padding: 2px 0; background: none; color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; }
.memo.has { color: var(--text); }
.switch { flex: none; padding: 6px 10px; font-size: 12px; background: var(--field); color: var(--muted); border-radius: 99px; }
.switch.on { background: #12b886; color: #fff; }
.fold { margin-top: 10px; padding: 0 16px; }
.fold summary { padding: 14px 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.fold-body { padding: 14px 16px; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; padding-bottom: 6px; }
.grid-form label { font-size: 12px; color: var(--muted); min-width: 0; }
.grid-form label[hidden] { display: none; }
.grid-form label.wide { grid-column: 1 / -1; }
.grid-form input, .grid-form select { margin-top: 2px; }
.ghost { background: var(--field); color: var(--text); }
#dash-real-only, #dash-paper-only { margin-top: 8px; }
#real-account-box { margin-top: 10px; }

/* ---------------------------------------------------------- 전략 실험실 */
#dash-tabs { margin-bottom: 12px; }
#dash-tabs button { padding: 10px 4px; font-size: 14px; }
.lab-table { padding: 4px 14px; overflow-x: auto; }
.lab-row { display: grid; grid-template-columns: minmax(130px, 1fr) 44px 48px 62px 66px 230px 36px 52px; min-width: 760px; gap: 6px; align-items: center; padding: 10px 0; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.lab-row + .lab-row { border-top: 1px solid var(--line); }
.lab-row > span { text-align: right; white-space: nowrap; }
.lab-row > span.lab-name { text-align: left; min-width: 0; white-space: normal; }
.lab-row.head { font-size: 11px; color: var(--muted); cursor: default; padding: 8px 0; }
.lab-row.head > span:first-child { text-align: left; }
.lab-row.picked { background: color-mix(in srgb, var(--accent) 8%, transparent); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.lab-name b { display: block; font-weight: 600; }
.lab-name small { display: block; font-size: 11px; color: var(--muted); }
.lab-row .switch { padding: 5px 8px; font-size: 11px; }
.why { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.why b { color: var(--muted); font-weight: 600; font-size: 12px; }
#dash-lab .dash-top { flex-wrap: wrap; }

/* ---------------------------------------------------------- 서버 사용량 */
.meter + .meter { margin-top: 16px; }
.meter-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.meter small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.5; }
.split-bar i.hot { background: var(--up); }
#usage .link { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------- 목록 쪽 넘김 */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pager[hidden] { display: none; }
.pager button { padding: 7px 14px; font-size: 13px; }
.pager button:disabled { opacity: .4; cursor: default; }
.lab-row.dim { opacity: .55; }
.skin { margin-top: auto; font-size: 12px !important; font-weight: 500 !important; }

/* ---------------------------------------------------------- 표 화면 (표 계산 프로그램처럼 보이게) */
.xl-only { display: none; }
body.xl {
  --bg: #ffffff; --card: #ffffff; --text: #1f1f1f; --muted: #6b6b6b; --line: #d6d6d6; --field: #f1f1f1;
  --accent: #1e7145; --up: #c00000; --down: #0563c1; --shadow: none; --rail: 0px; --grid: #e7e7e7;
  font: 13px/1.45 "Segoe UI", "Malgun Gothic", Calibri, sans-serif;
  padding: 0 0 62px 0;
  background: #fff;
}
body.xl .xl-only { display: flex; }
/* 맨 위: 제목 줄 · 메뉴 줄 · 수식 줄 · 열 이름 줄 */
body.xl .top { flex-wrap: wrap; padding: 0; background: #fff; backdrop-filter: none; }
body.xl .top h1 { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #1e7145; color: #fff; font-size: 13px; font-weight: 400; letter-spacing: 0; }
body.xl .top h1 img { width: 18px; height: 18px; }
body.xl .badge { align-self: stretch; border-radius: 0; box-shadow: none; background: #1e7145; color: #fff; padding: 0 14px; font-weight: 400; }
body.xl .badge::before { background: #9fe0b8; box-shadow: none; }
.xl-ribbon, .xl-formula, .xl-cols { flex-basis: 100%; align-items: center; }
.xl-ribbon { gap: 2px; padding: 0 6px; background: #f3f3f3; border-bottom: 1px solid var(--line); font-size: 12px; color: #333; overflow: hidden; white-space: nowrap; }
.xl-ribbon span { padding: 7px 11px; }
.xl-ribbon .file { background: #1e7145; color: #fff; }
.xl-ribbon .on { color: #1e7145; font-weight: 700; box-shadow: inset 0 -3px 0 #1e7145; }
.xl-formula { gap: 0; border-bottom: 1px solid var(--line); background: #fff; font-size: 12px; }
.xl-formula .name { width: 64px; padding: 4px 8px; border-right: 1px solid var(--line); }
.xl-formula .fx { padding: 4px 10px; color: #888; font-style: italic; border-right: 1px solid var(--line); }
.xl-formula #xl-cell { padding: 4px 10px; }
.xl-cols { padding-left: 32px; background: #f3f3f3; border-bottom: 1px solid var(--line); font-size: 11px; color: #555; overflow: hidden; }
.xl-cols span { flex: none; width: 84px; text-align: center; padding: 2px 0; border-right: 1px solid var(--line); }
/* 왼쪽 줄 번호 */
body.xl main { position: relative; max-width: none; margin: 0; padding: 10px 18px 16px 46px; }
body.xl main > section, body.xl main > #stock-tabs { max-width: 1040px; }
body.xl #xl-rows { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; flex-direction: column; overflow: hidden; background: #f3f3f3; border-right: 1px solid var(--line); font-size: 11px; color: #555; }
#xl-rows span { flex: none; height: 22px; line-height: 22px; text-align: center; border-bottom: 1px solid var(--line); }
/* 아래: 시트 탭과 상태 줄 */
body.xl .rail { top: auto; right: 0; bottom: 22px; width: auto; height: 30px; flex-direction: row; align-items: stretch; gap: 0; padding: 0 8px 0 32px; background: #f3f3f3; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
body.xl .rail button { padding: 0 16px; border-radius: 0; font-size: 12px; font-weight: 400; color: #333; }
body.xl .rail > button.on { background: #fff; color: #1e7145; font-weight: 700; box-shadow: inset 0 -3px 0 #1e7145; }
body.xl .rail .skin { margin: 0 0 0 auto; color: #777; }
.xl-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; height: 22px; align-items: center; justify-content: space-between; padding: 0 12px; background: #f3f3f3; border-top: 1px solid var(--line); font-size: 11px; color: #555; }
body.xl #toast { bottom: 64px; }
/* 안쪽: 둥근 모서리와 그림자를 걷고 칸처럼 보이게 */
body.xl .card { border-radius: 0; border: 1px solid var(--line); }
body.xl button, body.xl input, body.xl select, body.xl .pill, body.xl .tag, body.xl .side, body.xl .side button, body.xl .dash-warn, body.xl .split-bar, body.xl .switch, body.xl #toast { border-radius: 2px; }
body.xl button { padding: 6px 12px; font-weight: 400; }
body.xl input, body.xl select { padding: 6px 8px; border: 1px solid var(--line); background: #fff; }
body.xl h2 { font-size: 16px; }
body.xl h3 { font-size: 13px; margin: 16px 2px 6px; }
body.xl .sec { margin: 14px 2px 6px; font-size: 12px; }
body.xl .big { font-size: 20px; }
body.xl .avatar { display: none; }
body.xl .rows li { padding: 6px 10px; gap: 10px; }
body.xl .rows .name { font-weight: 400; }
body.xl .rows .price { font-weight: 400; margin-bottom: 0; }
body.xl .pill { background: none; padding: 0; font-weight: 400; }
body.xl .seg button { border: 1px solid var(--line); background: #fff; color: #333; padding: 5px 8px; font-weight: 400; }
body.xl .seg button.on { background: #e2efda; color: #1e7145; border-color: #a9d08e; font-weight: 700; }
body.xl .dash-top .seg button, body.xl .an-group .chips button, body.xl #an-zoom button { background: #fff; }
body.xl .dash-top .seg button.on, body.xl .chips button.on, body.xl #an-zoom button.on { background: #e2efda; color: #1e7145; }
body.xl .chips button { border: 1px solid var(--line); border-radius: 2px; padding: 5px 10px; }
body.xl .search input { box-shadow: none; border-radius: 2px; padding: 7px 12px 7px 36px; background-position: 10px center; }
body.xl .hero { margin-top: 10px; padding: 10px 12px; border-radius: 0; border: 1px solid var(--line); background: #fff; color: var(--text); box-shadow: none; }
body.xl .hero-total { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
body.xl .hero .pill { color: var(--muted); }
body.xl .hero-meta { margin-top: 8px; padding-top: 8px; border-top-color: var(--line); }
body.xl .kpis { gap: 0; margin-top: 10px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
body.xl .kpi { padding: 6px 10px; border-top: 0; border-left: 0; }
body.xl .kpi dd { font-size: 15px; font-weight: 600; }
body.xl .side button.on { background: #e2efda; color: #1e7145; }
body.xl .side { top: 118px; }
body.xl .split-bar i.kr, body.xl .split-legend i.kr { background: #a9d08e; }
body.xl .tag.kr, body.xl .tag.us, body.xl .tag { background: none; color: var(--muted); padding: 0; font-weight: 400; }
body.xl .side.buy, body.xl .side.sell { background: none; }
body.xl .trades .side.buy { color: var(--up); background: none; padding: 0; }
body.xl .trades .side.sell { color: var(--down); background: none; padding: 0; }
body.xl .switch.on, body.xl #dash-power.stop { background: #e2efda; color: #1e7145; }
body.xl #dash-power, body.xl #lab-power, body.xl .grid-form button, body.xl .row-form button { background: #1e7145; color: #fff; }
body.xl #dash-power.stop, body.xl #lab-power.stop { background: #fff; color: var(--up); border: 1px solid var(--line); }
body.xl .ghost, body.xl .pager button { background: #fff; color: #333; border: 1px solid var(--line); }
body.xl .lab-row { padding: 5px 0; }
body.xl .lab-row.picked { background: #e2efda; }
body.xl .dash-status.on::before { box-shadow: none; }
body.xl #login { background: #fff; }

/* ---------------------------------------------------------- 표 화면을 구글 시트 느낌으로 (위의 표 화면 규칙을 덮어쓴다) */
body.xl {
  --accent: #0b57d0; --line: #e1e3e1; --field: #f0f4f9; --muted: #5f6368; --text: #1f1f1f;
  font-family: "Google Sans", Roboto, Arial, "Malgun Gothic", sans-serif;
  padding-bottom: 46px;
}
body.xl .top h1 { background: #fff; color: #1f1f1f; font-size: 18px; padding: 10px 12px 0 12px; }
body.xl .top h1 img { width: 28px; height: 28px; }
body.xl .badge { background: #fff; color: #444746; padding: 0 16px; }
body.xl .badge::before { background: #9aa0a6; }
body.xl .badge.live::before { background: #188038; }
.xl-ribbon { gap: 0; padding: 0 8px 6px 48px; background: #fff; border-bottom: 0; font-size: 13px; color: #444746; }
.xl-ribbon span { padding: 2px 8px; }
.xl-tools { flex-basis: calc(100% - 24px); margin: 0 12px 6px; padding: 5px 14px; gap: 14px; align-items: center; border-radius: 22px; background: #f0f4f9; color: #444746; font-size: 13px; overflow: hidden; white-space: nowrap; }
.xl-tools i { width: 1px; height: 18px; background: #c7c7c7; }
.xl-tools b, .xl-tools em, .xl-tools s, .xl-tools u { font-size: 13px; }
.xl-formula { border-top: 1px solid var(--line); }
.xl-formula .name { color: #1f1f1f; }
.xl-cols { background: #fff; color: #575a5d; border-bottom: 1px solid #c7c7c7; padding-left: 46px; }
.xl-cols span { border-right-color: #e1e1e1; }
body.xl main { padding-left: 60px; }
body.xl #xl-rows { width: 46px; background: #fff; color: #575a5d; border-right: 1px solid #c7c7c7; }
#xl-rows span { border-bottom-color: #e1e1e1; }
/* 아래 시트 탭 (구글 시트에는 상태 줄이 없다) */
body.xl .xl-status { display: none; }
body.xl .rail { bottom: 0; height: 38px; padding: 0 12px 0 46px; background: #f9fbfd; border-top: 1px solid var(--line); }
body.xl .rail button { padding: 0 16px; font-size: 13px; color: #444746; }
body.xl .rail > button.on { background: #e1e9f7; color: #0b57d0; font-weight: 500; box-shadow: none; }
body.xl #toast { bottom: 50px; }
/* 안쪽 색: 초록 대신 구글 시트의 파랑 계열 */
body.xl .seg button.on, body.xl .dash-top .seg button.on, body.xl .chips button.on, body.xl #an-zoom button.on, body.xl .side button.on { background: #d3e3fd; color: #041e49; border-color: #a8c7fa; }
body.xl #dash-power, body.xl #lab-power, body.xl .grid-form button, body.xl .row-form button { background: #0b57d0; color: #fff; border-radius: 18px; padding: 7px 18px; }
body.xl #dash-power.stop, body.xl #lab-power.stop { background: #fff; color: #b3261e; border: 1px solid #c7c7c7; }
body.xl .ghost, body.xl .pager button { border-radius: 18px; color: #0b57d0; }
body.xl .switch.on { background: #c4eed0; color: #0d652d; }
body.xl .lab-row.picked { background: #e8f0fe; }
body.xl .split-bar i.kr, body.xl .split-legend i.kr { background: #7cacf8; }
body.xl .card { border-color: var(--line); }
body.xl .side { top: 150px; }

/* ---------------------------------------------------------- 내 전략 아이디어 */
#note-form { display: grid; gap: 8px; }
#note-form textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--field); color: inherit; font: inherit; resize: vertical; outline: none; }
#note-form button { justify-self: start; }
.notes li { align-items: flex-start; cursor: default; padding-left: 0; padding-right: 0; }
.notes li:active { background: none; }
body.xl #note-form textarea { border: 1px solid var(--line); border-radius: 2px; background: #fff; }

/* ---------------------------------------------------------- 오른쪽 위의 서버 사용량 표시 */
.top h1 { margin-right: auto; }
#usage-chip { margin-right: 8px; cursor: pointer; border: 0; font-variant-numeric: tabular-nums; }
#usage-chip[hidden] { display: none; }
#usage-chip::before { background: #12b886; }
#usage-chip.warn::before { background: var(--up); }
#usage-pop { position: absolute; top: 100%; right: 12px; z-index: 12; width: min(380px, calc(100vw - 24px)); margin-top: 6px; padding: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
#usage-pop[hidden] { display: none; }
body.xl #usage-chip { align-self: stretch; margin-right: 0; padding: 0 14px; background: #fff; color: #444746; font-weight: 400; }
body.xl #usage-pop { top: 44px; border-radius: 8px; }

/* ---------------------------------------------------------- 계좌 보유 종목과 원형 차트 */
.holdings { padding: 14px 16px; }
.donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.donut-chart { position: relative; flex: none; width: 150px; height: 150px; }
.donut-chart svg { width: 100%; height: 100%; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-center b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.donut-center small { font-size: 11px; color: var(--muted); }
.donut-legend { flex: 1; min-width: 200px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; font-size: 13px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.donut-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.donut-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.holdings .rows li { padding-left: 0; padding-right: 0; cursor: default; }
.holdings .rows li:active { background: none; }
.lab-money b { display: block; font-weight: 600; }
.lab-money small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
#lab-holdby { margin: 12px 0 4px; max-width: 260px; }
.holdings .rows li.group { justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 8px; margin-top: 6px; background: var(--field); border-top: 0; font-size: 13px; }
.holdings .rows li.group + li { border-top: 0; }
.holdings .rows li.group span { font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 성적표: 내용이 잘리지 않게 (숫자 칸은 좁게, 긴 글은 둘째 줄에서 줄바꿈) */
.lab-table { overflow-x: visible; }
.lab-row { grid-template-columns: minmax(0, 1fr) 44px 48px 62px 66px 36px 54px; min-width: 0; row-gap: 2px; }
.lab-row > .lab-money { grid-column: 1 / -1; text-align: left; white-space: normal; font-size: 12px; color: var(--muted); line-height: 1.5; }
.lab-money b, .lab-money small { display: inline; font-size: 12px; }
.lab-money b { font-weight: 700; }
.lab-name b, .lab-name small { overflow-wrap: anywhere; }
.narrow-only { display: none; }
@media (max-width: 599px) {
  .lab-table { padding: 4px 10px; }
  .lab-row { grid-template-columns: minmax(0, 1fr) 34px 42px 30px 48px; gap: 4px; font-size: 12px; }
  .lab-row .wide-only { display: none; }
  .narrow-only { display: inline; }
  .lab-row .switch { padding: 5px 6px; }
}

/* ---------------------------------------------------------- 펼치고 접는 목록, 성적표 탭 */
#lab-stat-tabs { margin-bottom: 8px; max-width: 420px; }
#lab-holdby { max-width: 340px; }
#lab-holdings[hidden] { display: none; }
.holdings .rows li.group { cursor: pointer; }
.holdings .rows li.group:active { background: var(--line); }

/* ---------------------------------------------------------- 시장 상황 */
.macro-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.macro-level { padding: 4px 12px; border-radius: 99px; color: #fff; background: #12b886; font-size: 14px; }
.macro-level.level1 { background: #f59f00; }
.macro-level.level2 { background: var(--up); }
#macro h4 { margin: 14px 0 6px; font-size: 13px; }
.macro-list li { padding: 5px 0; font-size: 13px; line-height: 1.5; }
.macro-list li + li { border-top: 1px solid var(--line); }
.macro-list b { display: inline-block; min-width: 30px; font-variant-numeric: tabular-nums; }
.macro-list a { color: var(--text); text-decoration: none; }

/* ---------------------------------------------------------- 공포·탐욕 지수 */
.fng-top { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; align-items: center; padding: 16px; }
@media (max-width: 699px) { .fng-top { grid-template-columns: 1fr; } }
#fng-gauge { text-align: center; color: var(--text); }
#fng-gauge svg { width: 100%; max-width: 320px; display: block; margin: 0 auto -34px; }
.fng-score { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fng-rating { font-size: 16px; font-weight: 700; margin: 4px 0; }
.fng-row { display: grid; grid-template-columns: 70px 44px 1fr; gap: 8px; align-items: baseline; padding: 9px 0; font-size: 13px; }
.fng-row + .fng-row { border-top: 1px solid var(--line); }
.fng-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.fng-parts { padding: 6px 16px; }
.fng-part { padding: 10px 0; }
.fng-part + .fng-part { border-top: 1px solid var(--line); }
.fng-part-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.fng-bar { height: 8px; margin-top: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fng-bar i { display: block; height: 100%; border-radius: 99px; }
#fng-chart { height: 260px; }