/* 알티 CES 트래커 — 라이트 · 다크 두 테마 (alti.co.kr 색: night · mint · acc)
   기본은 기기 설정을 따르고, html[data-theme="light|dark"] 로 고정할 수 있음
   글자 크기 5단계 · 둥근 정도 3단계 · 강조색 하나 (Operate 화면: 절제된 색) */
:root {
  color-scheme: light;
  --bg: #f3f6f4; --surface: #ffffff; --surface-2: #eef3f0; --surface-3: #e3ebe6;
  --line: #dde6e1; --line-2: #c5d3cb;
  --ink: #101a15; --ink-2: #33433b; --muted: #5a6761;
  --accent: #1e6b52; --accent-hover: #164f3d; --on-accent: #ffffff; --accent-soft: #d6e9df; --accent-soft-ink: #164f3d; --focus: #1e6b52;
  --up: #00796b; --dn: #c62834; --sqz: #7a5a00;
  --s-acc-bg: #e9ebef; --s-acc: #474c57;
  --s-sus-bg: #fff1bd; --s-sus: #6a4e00;
  --s-up-bg: #ddf1e0; --s-up: #1b6e27;
  --s-dn-bg: #fde3e3; --s-dn: #b3202a;
  --s-a-bg: #ffe9cc; --s-a: #8a4700;
  --s-b-bg: #e0e8ff; --s-b: #1f45b5;
  --s-c-bg: #eceef1; --s-c: #474c57;
  --i-cs-bg: #e0e8ff; --i-cs: #1f45b5; --i-es-bg: #e9ebef; --i-es: #3f444e; --i-ss-bg: #ffe9cc; --i-ss: #8a4700;
  --badge: #c62834; --on-badge: #ffffff;
  --chart-bg: #ffffff; --chart-text: #4f5d56; --chart-grid: rgba(16,26,21,.06); --chart-border: #dde6e1;
  --float-border: transparent; --float-shadow: 0 8px 24px rgba(16,26,21,.16);
  --scrim: rgba(16,26,21,.42); --sel: #cfe5da; --skel: #e6ede9;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --font: "SUIT Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1410; --surface: #111d17; --surface-2: #16251e; --surface-3: #1c2e25;
    --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
    --ink: #e4eee8; --ink-2: #b9cbc2; --muted: #8a9e95;
    --accent: #90cbb5; --accent-hover: #a9dac7; --on-accent: #0e1a14; --accent-soft: #1b3d31; --accent-soft-ink: #b4e0cf; --focus: #a9dac7;
    --up: #3cc4b1; --dn: #ff7a76; --sqz: #fff178;
    --s-acc-bg: rgba(154,160,171,.16); --s-acc: #d3d7de;
    --s-sus-bg: rgba(255,235,59,.14); --s-sus: #fff178;
    --s-up-bg: rgba(76,175,80,.16); --s-up: #8be08f;
    --s-dn-bg: rgba(255,82,82,.16); --s-dn: #ff9a9a;
    --s-a-bg: rgba(255,152,0,.18); --s-a: #ffbf66;
    --s-b-bg: rgba(41,98,255,.22); --s-b: #a5c0ff;
    --s-c-bg: rgba(120,123,134,.22); --s-c: #c8cbd3;
    --i-cs-bg: rgba(41,98,255,.22); --i-cs: #a5c0ff; --i-es-bg: rgba(154,160,171,.18); --i-es: #d6d9df; --i-ss-bg: rgba(255,152,0,.18); --i-ss: #ffbf66;
    --badge: #e5484d; --on-badge: #ffffff;
    --chart-bg: #0e1a14; --chart-text: #9fb3aa; --chart-grid: rgba(255,255,255,.035); --chart-border: rgba(255,255,255,.1);
    --float-border: rgba(255,255,255,.16); --float-shadow: none;
    --scrim: rgba(0,0,0,.6); --sel: #24533f; --skel: #18271f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1410; --surface: #111d17; --surface-2: #16251e; --surface-3: #1c2e25;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
  --ink: #e4eee8; --ink-2: #b9cbc2; --muted: #8a9e95;
  --accent: #90cbb5; --accent-hover: #a9dac7; --on-accent: #0e1a14; --accent-soft: #1b3d31; --accent-soft-ink: #b4e0cf; --focus: #a9dac7;
  --up: #3cc4b1; --dn: #ff7a76; --sqz: #fff178;
  --s-acc-bg: rgba(154,160,171,.16); --s-acc: #d3d7de;
  --s-sus-bg: rgba(255,235,59,.14); --s-sus: #fff178;
  --s-up-bg: rgba(76,175,80,.16); --s-up: #8be08f;
  --s-dn-bg: rgba(255,82,82,.16); --s-dn: #ff9a9a;
  --s-a-bg: rgba(255,152,0,.18); --s-a: #ffbf66;
  --s-b-bg: rgba(41,98,255,.22); --s-b: #a5c0ff;
  --s-c-bg: rgba(120,123,134,.22); --s-c: #c8cbd3;
  --i-cs-bg: rgba(41,98,255,.22); --i-cs: #a5c0ff; --i-es-bg: rgba(154,160,171,.18); --i-es: #d6d9df; --i-ss-bg: rgba(255,152,0,.18); --i-ss: #ffbf66;
  --badge: #e5484d; --on-badge: #ffffff;
  --chart-bg: #0e1a14; --chart-text: #9fb3aa; --chart-grid: rgba(255,255,255,.035); --chart-border: rgba(255,255,255,.1);
  --float-border: rgba(255,255,255,.16); --float-shadow: none;
  --scrim: rgba(0,0,0,.6); --sel: #24533f; --skel: #18271f;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
body { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: var(--line-2) transparent; }
::selection { background: var(--sel); color: var(--ink); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.num, table { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.up { color: var(--up); } .dn { color: var(--dn); }
.hide { display: none !important; }
.ic { width: 16px; height: 16px; flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 상단 ── */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1440px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.02em; font-size: var(--fs-lg); white-space: nowrap; color: var(--ink); }
.brand-mark { width: 22px; height: 22px; color: var(--accent); }
.brand small { font-weight: 600; color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab { border: 0; background: none; padding: 8px 12px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; transition: background-color .15s ease-out, color .15s ease-out; }
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab:active { background: var(--surface-3); }
.tab[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-ink); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--badge); color: var(--on-badge); font-size: var(--fs-xs); line-height: 20px; text-align: center; font-weight: 800; }
.me { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; }
.btn-s { border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md); padding: 6px 10px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; transition: border-color .15s ease-out, color .15s ease-out; }
.btn-s:hover { border-color: var(--accent); color: var(--ink); }
.btn-s:active { background: var(--surface-2); }
.btn-s:disabled { opacity: .5; cursor: default; }

/* 테마 고르기: 기기 설정 · 라이트 · 다크 */
.theme { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 2px; background: var(--surface); }
.theme button { border: 0; background: none; width: 30px; height: 26px; border-radius: var(--r-sm); color: var(--muted); display: grid; place-items: center; transition: background-color .15s ease-out, color .15s ease-out; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-soft-ink); }

main { max-width: 1440px; margin: 0 auto; padding: 24px 20px 40px; min-height: calc(100vh - 56px); }
h1 { font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -.02em; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 16px; max-width: 75ch; }

/* ── 필터 ── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filters + .filters { margin-top: -4px; }
.flabel { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; margin-right: 2px; }
.chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out; }
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip:active { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); }
.chip:disabled { opacity: .45; cursor: default; }
.chip .n { font-weight: 800; color: var(--ink); }
.chip[aria-pressed="true"] .n { color: inherit; }
.chip .n.zero { color: var(--muted); font-weight: 600; }
.sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.search { flex: 1; min-width: 160px; max-width: 260px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 7px 12px; outline: none; transition: border-color .15s ease-out; }
.search:focus { border-color: var(--accent); }
select.sel { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 6px 10px; outline: none; }
select.sel:focus { border-color: var(--accent); }

/* ── 종목표 ── */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
table.scan { width: 100%; border-collapse: collapse; }
.scan th { text-align: left; font-size: var(--fs-xs); color: var(--muted); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.scan th small { font-weight: 500; font-size: var(--fs-xs); }
.scan td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.scan .w { width: 44px; padding-right: 0; }
.scan tbody tr:last-child td { border-bottom: 0; }
.scan tr.row { cursor: pointer; }
.scan tr.row:hover td { background: var(--surface-2); }
.scan tr.row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.scan tr.cat td { background: var(--surface-2); color: var(--accent-soft-ink); font-weight: 700; font-size: var(--fs-xs); padding: 6px 12px; cursor: default; }
.sym { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.sym > div { display: flex; flex-direction: column; min-width: 0; }
.sym b { font-size: var(--fs-md); font-weight: 750; line-height: 1.3; }
.sym span { font-size: var(--fs-xs); color: var(--muted); }
.sicon { width: 28px; height: 28px; border-radius: 50%; flex: none; display: block; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.prop { color: var(--s-a); font-style: normal; font-weight: 700; }
.cellv { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.none { color: var(--muted); }
.trend { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.trend i { font-style: normal; font-size: 10px; margin-right: 4px; }
.item-s { display: flex; flex-wrap: wrap; gap: 6px; }
.st small { font-size: var(--fs-xs); font-weight: 600; opacity: .75; margin-right: 4px; }
.age { font-size: var(--fs-xs); color: var(--muted); }
.page-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.page-h h1 { margin: 0; }
.page-h .muted { font-size: var(--fs-sm); }
.hint { font-size: var(--fs-xs); color: var(--muted); margin: 10px 2px 0; }
.chip.ghost { border-color: transparent; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.chip.ghost:hover { color: var(--ink); }
.tier { font-size: var(--fs-xs); border: 1px solid var(--line-2); color: var(--muted); border-radius: 4px; padding: 0 4px; font-weight: 700; line-height: 16px; }
.px b { font-weight: 700; display: block; }
.cell { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini { font-size: var(--fs-xs); color: var(--muted); }
.sqz { color: var(--sqz); font-weight: 700; }
.st { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-sm); padding: 1px 8px; font-size: var(--fs-xs); font-weight: 750; white-space: nowrap; line-height: 20px; }
.st-acc { background: var(--s-acc-bg); color: var(--s-acc); }
.st-sus { background: var(--s-sus-bg); color: var(--s-sus); }
.st-up { background: var(--s-up-bg); color: var(--s-up); }
.st-dn { background: var(--s-dn-bg); color: var(--s-dn); }
.st-none { color: var(--muted); padding-left: 0; font-weight: 600; }
.st-a { background: var(--s-a-bg); color: var(--s-a); }
.st-b { background: var(--s-b-bg); color: var(--s-b); }
.st-c { background: var(--s-c-bg); color: var(--s-c); }
.st-in { background: var(--accent-soft); color: var(--accent-soft-ink); }
.cnt { font-weight: 750; }
.watch { border: 0; background: none; width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--muted); display: grid; place-items: center; }
.watch:hover { background: var(--surface-3); color: var(--ink); }
.watch[aria-pressed="true"] { color: var(--s-a); }

/* 좁은 화면: 표 대신 목록 */
.list { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.item { padding: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--surface-2); }
.item-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.item-r { display: flex; gap: 6px; align-items: center; text-align: right; }
.item-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.item-g > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.item-g .lab { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

/* 상태: 불러오는 중 · 비었음 · 오류 */
.skel { background: var(--skel); border-radius: var(--r-sm); height: 12px; }
.skel-row td { padding: 14px 12px; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: skel 1.4s ease-in-out infinite; } @keyframes skel { 50% { opacity: .55; } } }
.state { padding: 48px 20px; text-align: center; color: var(--ink-2); }
.state b { display: block; font-size: var(--fs-lg); color: var(--ink); margin-bottom: 4px; }
.state p { margin: 0 auto 14px; max-width: 46ch; color: var(--muted); font-size: var(--fs-sm); }

/* ── 알림 ── */
.feed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.al { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.al .sicon { width: 32px; height: 32px; }
.al-m { min-width: 0; }
.al:last-child { border-bottom: 0; }
.al:hover { background: var(--surface-2); }
.al:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ind { font-size: var(--fs-xs); font-weight: 800; border-radius: var(--r-sm); padding: 2px 0; text-align: center; }
.ind-CS { background: var(--i-cs-bg); color: var(--i-cs); }
.ind-ES { background: var(--i-es-bg); color: var(--i-es); }
.ind-SS { background: var(--i-ss-bg); color: var(--i-ss); }
.al-t { font-weight: 750; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tf { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; }
.newtag { font-size: var(--fs-xs); font-weight: 800; color: var(--accent-soft-ink); background: var(--accent-soft); border-radius: 4px; padding: 0 6px; }
.al-d { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.al-time { text-align: right; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.more { display: block; margin: 16px auto 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 8px; font-size: var(--fs-md); display: flex; align-items: baseline; gap: 6px; }
.panel h3 .mini { font-weight: 600; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kgroup + .kgroup { margin-top: 12px; }

/* ── 차트 ── */
.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.chart-head .title { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-wrap: wrap; }
.chart-head .title .sicon { width: 32px; height: 32px; }
.lsep { flex-basis: 100%; height: 0; }
.chart-head .title b { font-size: var(--fs-xl); letter-spacing: -.02em; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 2px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); transition: background-color .15s ease-out, color .15s ease-out; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-soft-ink); }
.seg button small { font-weight: 600; color: var(--muted); margin-left: 4px; font-size: var(--fs-xs); }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.chart-box { background: var(--chart-bg); border: 1px solid var(--line); border-radius: var(--r-lg); height: min(72vh, 720px); min-height: 420px; position: relative; overflow: hidden; }
#chart { position: absolute; inset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 5px; }
.side { display: flex; flex-direction: column; min-width: 0; }
table.dash { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dash td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.dash td:last-child { text-align: right; font-weight: 700; }
.dash tr:last-child td { border-bottom: 0; }
.note-s { font-size: var(--fs-xs); color: var(--muted); margin: 8px 0 0; }
.ev-list { max-height: 380px; overflow: auto; margin: 0 -16px -16px; }
.ev { font-size: var(--fs-sm); padding: 10px 16px; border-top: 1px solid var(--line); }
.ev b { font-weight: 750; display: block; }
.ev .mini { margin-top: 1px; }
.ev .when { color: var(--muted); font-size: var(--fs-xs); }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--float-border); box-shadow: var(--float-shadow); border-radius: var(--r-md); padding: 8px 10px; font-size: var(--fs-xs); white-space: pre; color: var(--ink); }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: var(--chart-bg); color: var(--ink-2); z-index: 4; }
.overlay .skel-chart { position: absolute; inset: 24px 72px 40px 24px; display: flex; align-items: flex-end; gap: 6px; opacity: .8; }
.overlay .skel-chart i { flex: 1; background: var(--skel); border-radius: 2px; }

/* ── 로그인 ── */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--bg); position: relative; }
.auth .theme { position: absolute; top: 16px; right: 16px; }
.auth-box { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; }
.auth-box .brand { margin-bottom: 20px; }
.auth-box h2 { margin: 0 0 4px; font-size: var(--fs-xl); line-height: 1.3; }
.auth-box > p { color: var(--muted); margin: 0 0 20px; font-size: var(--fs-sm); }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 4px; font-weight: 700; }
.field input { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 10px 12px; outline: none; transition: border-color .15s ease-out; }
.field input:focus { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--dn); }
.btn { width: 100%; border: 0; border-radius: var(--r-md); padding: 11px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: var(--fs-md); transition: background-color .15s ease-out; }
.btn:hover { background: var(--accent-hover); }
.btn:active { filter: brightness(.95); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-ghost { width: auto; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); padding: 8px 14px; font-size: var(--fs-sm); font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--ink); }
.switch { text-align: center; margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); }
.switch button { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.err { color: var(--dn); font-size: var(--fs-sm); min-height: 20px; margin-bottom: 8px; }
.note { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }
.pending-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--s-sus-bg); color: var(--s-sus); display: grid; place-items: center; margin-bottom: 14px; }
.pending-ic.rej { background: var(--s-dn-bg); color: var(--s-dn); }
.pending-ic .ic { width: 22px; height: 22px; }

.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast-r { display: flex; gap: 10px; align-items: flex-start; }
.toast-r .sicon { width: 24px; height: 24px; margin-top: 1px; }
.toast { background: var(--surface); border: 1px solid var(--float-border); box-shadow: var(--float-shadow); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-sm); cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: tin .2s cubic-bezier(.16,1,.3,1); } @keyframes tin { from { transform: translateY(8px); opacity: 0; } } }
.modal-bg { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--float-border); box-shadow: var(--float-shadow); border-radius: var(--r-lg); padding: 24px; }
.modal h3 { margin: 0 0 16px; font-size: var(--fs-lg); }
.row-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.row-btns .btn { width: auto; padding: 9px 16px; }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; }
footer > div { max-width: 1440px; margin: 0 auto; padding: 20px 20px 32px; }
footer p { margin: 0; max-width: 90ch; }
footer b { color: var(--ink-2); }

@media (max-width: 1100px) { .chart-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .top-in { padding: 8px 16px; gap: 10px; height: auto; min-height: 56px; flex-wrap: wrap; }
  .brand small { display: none; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: auto; }
  .me { margin-left: auto; }
  .me .who { display: none; }
  main { padding: 16px 16px 32px; }
  .table-wrap { display: none; }
  .list { display: block; }
  .search { max-width: none; }
  /* 칩 줄은 한 줄 가로 스크롤 — 목록이 첫 화면에 보이도록 */
  .filters.scrollx { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px; scrollbar-width: none; }
  .filters.scrollx::-webkit-scrollbar { display: none; }
  .filters.scrollx + .filters.scrollx { margin-top: -4px; }
  .al { grid-template-columns: 32px 1fr auto; padding: 12px; gap: 10px; }
  .al-time { align-self: start; }
  .hint { display: none; }
  .chart-box { height: 62vh; min-height: 360px; }
  footer > div { padding: 16px; }
}