/* ══════════════════════════════════════════════════════════════════════
   토큰 — DESIGN.md §14. 팔레트·간격·반경은 확정값이라 변경하지 않는다.
   간격은 4 6 8 12 16 20 만 쓴다. 반경 4 배지 / 8 컨트롤 / 9 패널 / 10 카드 / 18 시트 / 999 칩.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#EEF1F5; --sf:#FFFFFF; --ink:#18212D; --mu:#56616F; --ln:#DDE3EA;
  --up:#CE2E35; --dn:#1F57D0; --wn:#9A6400; --acc:#43296B;
  --ok:#1E7A4D;
  /* 2차 중성층 — 툴바·패널을 본문 표면과 분리한다 (Operate) */
  --sf2:#F6F8FA;
  /* 깊이는 한 가지만 쓴다. 밀집 패널은 1px 선으로 경계를 잡고 그림자를 쓰지 않는다
     (1px 테두리 + 넓은 블러를 함께 쓰면 떠 있는 카드처럼 보이고 모니터링 화면에 맞지 않는다).
     그림자는 실제로 떠 있는 것 — 모바일 바텀시트 — 에만 준다. 오프셋 + 블러. */
  --sh-up:0 2px 4px rgba(24,33,45,.10), 0 12px 28px -8px rgba(24,33,45,.22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0F141B; --sf:#18202A; --ink:#E8EDF3; --mu:#8E99A8; --ln:#28323F;
  --up:#FF6B72; --dn:#5B93FF; --wn:#D9A23B; --acc:#C2A6E8; --ok:#3FA874;
  --sf2:#141C25;
  --sh-up:0 2px 4px rgba(0,0,0,.50), 0 12px 28px -8px rgba(0,0,0,.70);
  color-scheme:dark;
}}
:root[data-theme="light"]{
  --bg:#EEF1F5; --sf:#FFFFFF; --ink:#18212D; --mu:#56616F; --ln:#DDE3EA;
  --up:#CE2E35; --dn:#1F57D0; --wn:#9A6400; --acc:#43296B; --ok:#1E7A4D; --sf2:#F6F8FA;
  --sh-up:0 2px 4px rgba(24,33,45,.10), 0 12px 28px -8px rgba(24,33,45,.22);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0F141B; --sf:#18202A; --ink:#E8EDF3; --mu:#8E99A8; --ln:#28323F;
  --up:#FF6B72; --dn:#5B93FF; --wn:#D9A23B; --acc:#C2A6E8; --ok:#3FA874; --sf2:#141C25;
  --sh-up:0 2px 4px rgba(0,0,0,.50), 0 12px 28px -8px rgba(0,0,0,.70);
  color-scheme:dark;
}
/* 블랙은 순흑 배경이라 상승·하락색을 한 단계 밝힌다 */
:root[data-theme="black"]{
  --bg:#000000; --sf:#0B0E13; --ink:#F0F4F8; --mu:#98A4B3; --ln:#1E2630;
  --up:#FF7A80; --dn:#6B9DFF; --wn:#E0AC45; --acc:#CDB4EE; --ok:#45B37C; --sf2:#070A0E;
  --sh-up:0 2px 4px rgba(0,0,0,.85), 0 12px 28px -8px rgba(0,0,0,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0; height:100%;
  background:var(--bg); color:var(--ink);
  font:400 14px/1.4 "IBM Plex Sans KR",system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* 2초마다 숫자가 바뀐다. 폭이 변하면 열이 흔들린다 — 선택이 아니다 */
  font-variant-numeric:tabular-nums;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}

/* ── 브라우저가 그리는 표면도 디자인에 포함된다 ─────────────────────
   선택 영역·캐럿·스크롤바·포커스 링은 기본값이 어떤 디자인 시스템에도
   속하지 않는다. 팔레트에서 색을 준다. */
::selection{background:color-mix(in srgb,var(--ink) 20%,transparent)}
:root{caret-color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:var(--ln) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--ln); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--mu)}

button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:where(button,[tabindex],a,summary):focus-visible{
  outline:2px solid var(--ink); outline-offset:1px; border-radius:4px;
}
.t2 :where(button,tr):focus-visible{outline-offset:-2px}

.up{color:var(--up)} .dn{color:var(--dn)} .mu{color:var(--mu)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ══ 셸 ══════════════════════════════════════════════════════════════ */
#app-root{
  height:100dvh; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* 머리 — 제목 + 신선도 + 테마 토글 */
.top{
  order:1; flex:none; display:flex; align-items:center; gap:8px;
  padding:8px 12px 6px;
}
.top h1{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0}
.top h1 small{font-weight:500;color:var(--mu);font-size:11px;margin-left:6px;letter-spacing:0;white-space:nowrap}
@media (max-width:460px){.top h1 small{display:none}}

/* 신선도는 색만으로 구분하지 않고 항상 글자를 함께 쓴다 */
.fr{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--mu);flex:none;white-space:nowrap}
.fr i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.fr.stale i{background:none;border:1.5px solid var(--wn)}
.fr.stale{color:var(--wn);font-weight:600}
.fr.closed i{background:none;border:1.5px solid var(--mu)}
.fr.closed{color:var(--mu);font-weight:600}
.fr.miss i{background:none;border:1.5px solid var(--up)}
.fr.miss{color:var(--up);font-weight:600}
.fr b{font-weight:600;font-variant-numeric:tabular-nums}

.ib{
  flex:none; display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--ln); border-radius:8px; background:var(--sf);
  padding:6px 8px; min-height:30px; font-size:11px; font-weight:600; color:var(--mu);
  transition:border-color .16s, color .16s, background .16s;
}
.ib:hover{border-color:var(--mu);color:var(--ink)}
.ib:active{background:var(--sf2)}

/* 세션 줄 — 세션 셀렉터 + 라이브/스냅샷 상태. 화면 아래 바다 (탭 줄과 자리를 바꿨다) */
.ses{
  order:5; flex:none; display:flex; align-items:center; gap:6px;
  padding:6px 12px; background:var(--sf); border-top:1px solid var(--ln);
}
.seg{
  display:inline-flex; background:var(--sf); border:1px solid var(--ln);
  border-radius:8px; overflow:hidden; flex:none;
}
.seg button{
  padding:6px 10px; min-height:32px; font-size:12px; font-weight:600; color:var(--mu);
  transition:background .16s, color .16s;
}
.seg button+button{border-left:1px solid var(--ln)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:not([aria-pressed="true"]):hover{background:var(--sf2);color:var(--ink)}
.seg.gr{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}

.pin[hidden]{display:none}
.pin{margin-left:auto;font-size:11px;color:var(--mu);display:flex;align-items:center;gap:6px;white-space:nowrap}
.pin b{font-weight:600;color:var(--ink)}
.lv{
  border:1px solid var(--ln); border-radius:999px; padding:4px 10px; min-height:28px;
  font-size:11px; font-weight:600; color:var(--mu); display:inline-flex; align-items:center;
}
.lv:hover{border-color:var(--ink);color:var(--ink)}

/* 시장 온도 바 — 히어로 수치 템플릿이 아니라 상태 스트립이다 */
.temp{
  order:3; flex:none; margin:0 12px 6px; padding:6px 10px;
  background:var(--sf2); border:1px solid var(--ln); border-radius:9px;
  display:flex; align-items:center; gap:12px; font-size:11.5px; overflow:hidden;
}
.ix{display:flex;align-items:baseline;gap:4px;flex:none}
.ix em{font-style:normal;color:var(--mu);font-size:10.5px;font-weight:600}
.ix b{font-weight:600;font-size:12.5px}
.ix s{text-decoration:none;font-weight:600;font-size:11px}
.brd{display:flex;align-items:center;gap:6px;min-width:0;margin-left:auto;flex:none}
.rt{display:flex;width:52px;height:5px;border-radius:999px;overflow:hidden;background:var(--ln);flex:none}
.rt i{display:block;height:100%}
.rt .a{background:var(--up)} .rt .d{background:var(--dn)}
.brd span{color:var(--mu);white-space:nowrap}
@media (max-width:460px){
  .temp{gap:4px 10px;flex-wrap:wrap}
  .brd{margin-left:0;flex-basis:100%;gap:8px}
  .rt{width:64px}
}
.brd b{font-weight:600;color:var(--ink)}

/* 배지 범례 — 아이콘만 쓰는 대신 뜻을 한 줄로 펼친다 */
.legend{
  order:4; flex:none; margin:0 12px 6px; padding:6px 10px;
  background:var(--sf2); border:1px solid var(--ln); border-radius:9px;
  display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; font-size:10.5px; color:var(--mu);
}
.legend[hidden]{display:none}
.legend>em{font-style:normal;font-weight:600;flex:none}
.legend .lgi{display:inline-flex;align-items:center;gap:4px;flex:none}
.legend .lgi b{font-weight:600;color:var(--ink)}
.legend .lgi i{font-style:normal}
@media (max-width:560px){.legend .lgi i{display:none}}

/* 공지 배너 — 절약 모드 / 동시호가 / 체결 대기 */
.note{
  order:4; flex:none; margin:0 12px 6px; padding:6px 10px;
  border:1px solid color-mix(in srgb,var(--wn) 40%,var(--ln)); border-radius:9px;
  background:color-mix(in srgb,var(--wn) 7%,var(--sf));
  color:var(--wn); font-size:11.5px; font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.note[hidden]{display:none}

/* 탭 줄 — 머리 바로 아래다. 선택 표시는 글자 쪽 모서리에 둔다 */
nav{
  order:2; flex:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--sf); border-bottom:1px solid var(--ln);
}
nav button{
  border-bottom:2px solid transparent; padding:10px 0; min-height:44px;
  font-size:13px; font-weight:600; color:var(--mu);
  transition:color .16s, border-color .16s;
}
nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
nav button:not([aria-selected="true"]):hover{color:var(--ink)}
nav .cnt{
  display:inline-block; margin-left:5px; min-width:17px; padding:0 4px;
  border-radius:999px; background:var(--sf2); border:1px solid var(--ln); color:var(--mu);
  font-size:10.5px; font-weight:700; line-height:14px; vertical-align:1px;
}
nav button[aria-selected="true"] .cnt{background:var(--ink);border-color:var(--ink);color:var(--bg)}

main{order:4;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 12px 8px}
main[hidden]{display:none}
.hint{margin:0 0 6px;font-size:11px;color:var(--mu);flex:none}

/* ══ 탭1 주도 테마 — 2×2 고정 ═════════════════════════════════════════ */
#g1{
  flex:1; min-height:0; display:grid; gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
}
.cd{
  position:relative; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--sf); border:1px solid var(--ln); border-radius:10px;
  font-size:12px;
}
.cd>header{display:flex;align-items:center;gap:6px;padding:7px 10px 2px;flex:none;min-width:0}
.rk{
  display:grid; place-items:center; width:18px; height:18px; flex:none;
  border-radius:4px; background:var(--ink); color:var(--bg);
  font-size:11px; font-weight:700;
}
.cd h3{
  flex:1; min-width:0; margin:0; font-size:13px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cd h3 sup{font-size:9.5px;font-weight:600;color:var(--mu);vertical-align:super;margin-left:1px}
.cd .sub{
  display:flex; align-items:center; gap:6px; flex:none; min-width:0;
  padding:0 10px 5px; border-bottom:1px solid var(--ln); white-space:nowrap; overflow:hidden;
}
.nolead{margin-left:auto;font-size:10px;color:var(--mu);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.amt{font-weight:600;white-space:nowrap;flex:none}
/* 가속도는 화살표와 숫자를 함께 쓴다. 화살표만으로는 정도를 알 수 없다 */
.ac{font-weight:700;font-size:11.5px;display:inline-flex;align-items:center;gap:2px}
.ac.na{color:var(--mu);font-weight:600;letter-spacing:1px}

.rows{flex:1;min-height:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}
.rw{
  display:grid; width:100%; text-align:left; min-height:0; padding:0 10px;
  grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto;
  align-content:center; row-gap:1px; column-gap:6px;
  border-top:1px solid var(--ln); transition:background .16s;
}
.rows>*:first-child{border-top:0}
button.rw:hover{background:var(--sf2)}
button.rw[aria-current="true"]{background:color-mix(in srgb,var(--ink) 7%,var(--sf))}
.rw .nm{grid-area:1/1;display:flex;align-items:center;gap:3px;min-width:0;font-weight:600;font-size:12.5px}
.rw .nm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.rw .ch{display:flex;align-items:center;gap:4px;min-width:0}
.rw .bdg{display:flex;align-items:center;gap:3px;flex:none}
/* 밀집 화면(카드·표)에서는 아이콘만. 글자 배지는 종목명을 삼킨다.
   .pane 안에서만 글자를 편다 — 거기엔 폭이 있다. */
.bd{padding:1px 3px;gap:0}
.bd>span{display:none}
.pane .bd{padding:1px 5px;gap:3px}
.pane .bd>span{display:inline}
.rw .pr{grid-area:1/2;text-align:right;font-size:12.5px}
.rw .ch{grid-area:2/1;font-weight:600;font-size:11.5px}
.rw .am{grid-area:2/2;text-align:right;color:var(--mu);font-size:11.5px}
/* 하루 범위 막대 — 종목명 줄 아래 한 줄. 저가·고가는 숫자로, 시가·종가는 눈금으로.
   색만으로 구분하지 않는다 — 양끝 숫자가 늘 보이고 aria-label 에 4개가 다 들어간다. */
.rw .dr{
  grid-area:3/1/4/3; display:flex; align-items:center; gap:4px;
  font-size:10px; color:var(--mu); line-height:1;
}
.rw .dr s{text-decoration:none; flex:none; font-variant-numeric:tabular-nums}
.rw .dr .tk{
  position:relative; flex:1 1 auto; height:3px; min-width:0;
  background:var(--ln); border-radius:999px;
}
/* 시가~종가 구간. 색을 쓰지 않는다 — 색은 전일 대비(점)만 뜻한다 */
.rw .dr .fl{position:absolute; top:0; height:3px; border-radius:999px; background:var(--mu)}
/* 시가 — 중립 눈금. 종가 — 점. 둘이 겹쳐도 점이 위에 온다 */
.rw .dr .op{position:absolute; top:-2px; width:1px; height:7px;
            background:var(--mu); transform:translateX(-0.5px)}
.rw .dr .cl{position:absolute; top:-2px; width:7px; height:7px; border-radius:999px;
            background:var(--mu); border:1.5px solid var(--sf); transform:translateX(-3.5px)}
.rw .dr .cl.up{background:var(--up)}
.rw .dr .cl.dn{background:var(--dn)}

.rw.e{place-items:center;align-content:center;cursor:default}
.rw.e span{color:var(--ln);font-size:15px;letter-spacing:3px;line-height:1}

/* 후발 후보 — 조회 전용 서비스다. 명칭은 "후발 후보" 고정 */
.fol{
  flex:none; display:flex; align-items:center; gap:4px; overflow:hidden;
  padding:4px 10px; border-top:1px solid var(--ln); background:var(--sf2);
  font-size:10.5px; color:var(--mu); white-space:nowrap;
  mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
}
.fol em{font-style:normal;font-weight:600;flex:none}
.fol .chip{
  border:1px solid var(--ln); border-radius:999px; padding:1px 7px;
  font-size:10.5px; color:var(--ink); background:var(--sf); flex:none;
  overflow:hidden; text-overflow:ellipsis; max-width:6.5em;
}
/* 테마 4개 미달 — 자리는 남기고 왜 비었는지 적는다 */
.cd.ph{
  display:grid; place-items:center; text-align:center; padding:12px;
  background:var(--sf2); border-style:dashed;
}
.cd.ph p{margin:0;font-size:11.5px;color:var(--mu);line-height:1.5}
.cd.ph strong{display:block;color:var(--ink);font-size:12.5px;margin-bottom:4px}

/* 값 변경 하이라이트 — 0.9초 */
@keyframes fu{from{background:color-mix(in srgb,var(--up) 26%,transparent)}}
@keyframes fd{from{background:color-mix(in srgb,var(--dn) 26%,transparent)}}
.fu,.fd{border-radius:4px;box-decoration-break:clone}
.fu{animation:fu .9s} .fd{animation:fd .9s}

/* ══ 탭2 종목 순위 ════════════════════════════════════════════════════ */
.bar{display:flex;gap:6px;align-items:center;flex:none;margin-bottom:6px}
.bar .seg{flex:1}
.rfr{
  flex:none; border:1px solid var(--ln); border-radius:8px; background:var(--sf);
  padding:6px 12px; min-height:32px; font-size:12px; font-weight:600; color:var(--mu);
  display:inline-flex; align-items:center; gap:5px; transition:border-color .16s,color .16s;
}
.rfr:hover{border-color:var(--mu);color:var(--ink)}
.rfr[data-spin] svg{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}
.meta{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--mu);margin-bottom:6px}
.meta b{font-weight:600;color:var(--ink)}

#l2{
  flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
  background:var(--sf); border:1px solid var(--ln); border-radius:10px;
}
/* 진짜 table + table-layout:fixed + colgroup.
   헤더와 셀이 같은 열을 공유하므로 정렬이 구조적으로 보장된다.
   grid로 헤더 행과 데이터 행을 따로 만들면 열 수가 어긋날 여지가 남는다.
   반응형으로 숨기는 열도 두지 않는다 — display:none이 폭 계산을 깬다. 5열 고정. */
.t2{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.t2 col.c-rk{width:2.8em}
/* 7자리 가격(1,842,000 = 9글자)이 들어가야 한다. 프로토타입 샘플은 최대 15만원이라
   5em 으로 맞았지만 실주가에는 184만원대가 있고, 좁으면 "1,842,..." 로 잘린다. */
.t2 col.c-pr{width:6.4em}
.t2 col.c-ch{width:5em}
.t2 col.c-x{width:5em}
.t2 th,.t2 td{padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t2 thead th{
  position:sticky; top:0; z-index:1; height:32px;
  background:var(--sf2); border-bottom:1px solid var(--ln);
  font-weight:600; font-size:11px; color:var(--mu);
}
.t2 tbody td{height:44px;border-top:1px solid var(--ln)}
.t2 tbody tr:first-child td{border-top:0}
/* 정렬은 열 단위로 한 번만 선언한다 — th와 td가 함께 걸린다 */
.t2 th:nth-child(1),.t2 td:nth-child(1){text-align:right;color:var(--mu);font-size:11.5px}
.t2 th:nth-child(2),.t2 td:nth-child(2){text-align:left}
.t2 th:nth-child(n+3),.t2 td:nth-child(n+3){text-align:right}
.t2 tbody tr{transition:background .16s}
.t2 tbody tr:hover{background:var(--sf2)}
.t2 tbody tr[aria-current="true"]{background:color-mix(in srgb,var(--ink) 7%,var(--sf))}
.t2 .lnk{
  display:flex; align-items:center; gap:4px; width:100%; min-width:0;
  padding:0; font:inherit; text-align:left;
}
.t2 .lnk b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.t2 .lnk .bdg{display:flex;align-items:center;gap:3px;flex:none}
.t2 .lnk .bd{flex:none}
/* 넓은 화면에서는 한 줄. 좁으면 이름이 열 전체를 쓰고 배지가 아랫줄로 내려간다 */
@media (max-width:860px){
  .t2 .lnk{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
  .t2 .lnk b{width:100%;flex:none}
}
/* 조회순위 계열 전용 제3색 — 상승=적 / 하락=청과 충돌하지 않게 */
.qu{font-weight:700;color:var(--up)} .qd{font-weight:700;color:var(--dn)} .qz{color:var(--mu)}
.inq{color:var(--acc);font-weight:700}

/* ══ 탭3 이벤트 피드 ══════════════════════════════════════════════════ */
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:none;margin-bottom:6px}
.chip-f{
  border:1px solid var(--ln); border-radius:999px; background:var(--sf);
  padding:6px 12px; min-height:32px; font-size:12px; font-weight:600; color:var(--mu);
  display:inline-flex; align-items:center; gap:5px; transition:background .16s,color .16s,border-color .16s;
}
.chip-f:hover{border-color:var(--mu);color:var(--ink)}
.chip-f[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip-f .n{font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
#l3{
  flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
  background:var(--sf); border:1px solid var(--ln); border-radius:10px;
}
.ev{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 8px;
  width:100%; text-align:left; padding:8px 12px; border-top:1px solid var(--ln);
  transition:background .16s;
}
#l3 .ev:first-child{border-top:0}
.ev:hover{background:var(--sf2)}
.ev .ei{grid-row:1/3;align-self:center;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--sf2);border:1px solid var(--ln)}
.ev .et{font-weight:600;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .ed{grid-column:2;font-size:11.5px;color:var(--mu);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .eh{grid-row:1/3;align-self:center;font-size:11px;color:var(--mu);white-space:nowrap}

/* 빈 상태 — 인터페이스를 가르친다. "없음"으로 끝내지 않는다 */
.empty{display:grid;place-items:center;text-align:center;padding:28px 20px;gap:6px}
.empty strong{font-size:13px}
.empty p{margin:0;font-size:11.5px;color:var(--mu);line-height:1.6;max-width:30em}

/* 스켈레톤 — 본문 가운데 스피너가 아니라 골격 */
@keyframes sk{50%{opacity:.45}}
.sk{background:var(--ln);border-radius:4px;height:11px;animation:sk 1.3s ease-in-out infinite}

/* ══ 배지 ═════════════════════════════════════════════════════════════
   종목당 최대 2개 (급증 > 쌍끌이 > 신고가 > 관심 급증) */
.bd{
  display:inline-flex; align-items:center; gap:3px; flex:none;
  border:1px solid var(--ln); border-radius:4px; padding:1px 5px;
  font-size:10px; font-weight:700; color:var(--mu); line-height:1.3;
}
.bd.w{color:var(--wn);border-color:color-mix(in srgb,var(--wn) 42%,transparent)}
.bd.b{color:var(--dn);border-color:color-mix(in srgb,var(--dn) 42%,transparent)}
.bd.a{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 42%,transparent)}
.bd.u{color:var(--up);border-color:color-mix(in srgb,var(--up) 42%,transparent)}

/* ══ 상세 — 모바일 바텀시트 / 데스크톱 상주 패널 ════════════════════ */
#dt{position:fixed;inset:0;z-index:20}
#dt[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.52);animation:fade .18s}
@keyframes fade{from{opacity:0}}
.pane{
  position:absolute; left:0; right:0; bottom:0; max-height:82%; overflow:auto;
  background:var(--sf); border-radius:18px 18px 0 0; box-shadow:var(--sh-up);
  padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
  animation:rise .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise{from{transform:translateY(22px);opacity:0}}
.pane>header{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.pane h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.015em}
.pane .code{margin:2px 0 0;font-size:11.5px;color:var(--mu)}
.x{
  flex:none; border:1px solid var(--ln); border-radius:8px; background:var(--sf);
  min-width:44px; min-height:44px; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--mu); margin-left:auto;
  transition:border-color .16s,color .16s;
}
.x:hover{border-color:var(--mu);color:var(--ink)}
.px{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.px b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.px s{text-decoration:none;font-size:14px;font-weight:600}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 0}
.kv>div{background:var(--sf2);border:1px solid var(--ln);border-radius:9px;padding:6px 10px}
.kv p{margin:0;font-size:10.5px;color:var(--mu)}
.kv strong{font-size:14px;font-weight:600}
h4{margin:16px 0 6px;font-size:11px;font-weight:600;color:var(--mu);letter-spacing:.02em}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  border:1px solid var(--ln); border-radius:999px; padding:3px 10px;
  font-size:12px; color:var(--mu); background:var(--sf);
}
.tag.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.tag small{opacity:.8;margin-left:5px;font-weight:400}
.rowk{display:grid;grid-template-columns:4.8em 1fr 6.2em;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--ln)}
.rowk:first-of-type{border-top:0}
.rowk>span:first-child{font-size:11.5px;color:var(--mu)}
.rowk .mb{height:6px;background:var(--bg);border-radius:999px;overflow:hidden}
.rowk .mb i{display:block;height:100%;background:currentColor;border-radius:999px}
.rowk b{text-align:right;font-weight:600;font-size:12.5px}
.why{
  margin:10px 0 0; padding:8px 10px; font-size:11.5px; line-height:1.6; color:var(--mu);
  background:var(--sf2); border:1px solid var(--ln); border-radius:9px;
}
.why b{color:var(--ink);font-weight:600}

/* ══ 짧은 화면 — 밀도를 한 단계 올린다 (iPhone SE 등) ═══════════════ */
@media (max-height:740px){
  .top{padding:6px 12px 4px}
  .top h1{font-size:15px}
  .temp{padding:4px 10px}
  .hint{display:none}
  .cd h3{font-size:12.5px}
  .rw .nm,.rw .pr{font-size:12px}
  .rw .ch,.rw .am{font-size:11px}
  nav button{padding:8px 0}
}

/* ══ 데스크톱 — 2-pane. 상세가 목록을 덮지 않는다 ═══════════════════ */
@media (min-width:1024px){
  #app-root{
    max-width:1440px; margin:0 auto; width:100%;
    display:grid; gap:0 16px;
    grid-template-columns:minmax(0,1fr) 372px;
    grid-template-rows:auto auto auto auto auto 1fr;
    grid-template-areas:
      "top    side"
      "nav    side"
      "temp   side"
      "legend side"
      "ses    side"
      "main   side";
    padding:0 20px 20px;
  }
  .top{grid-area:top;padding:16px 0 8px}
  .top h1{font-size:19px}
  .ses{grid-area:ses;padding:8px 0;background:none;border-top:0}
  .temp{grid-area:temp;margin:0 0 8px}
  .note{grid-area:temp;margin:0 0 8px;align-self:end}
  .legend{grid-area:legend;margin:0 0 8px}
  nav{
    grid-area:nav; background:none; border-bottom:1px solid var(--ln);
    justify-content:start; grid-auto-columns:max-content; gap:20px;
  }
  nav button{
    border-bottom:2px solid transparent; padding:8px 0;
    font-size:14px; min-height:40px;
  }
  nav button[aria-selected="true"]{border-bottom-color:var(--ink)}
  main{grid-area:main;padding:8px 0 0;min-height:0}

  #g1{grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
  .cd{font-size:13px}
  .cd h3{font-size:15px}
  /* 넓어지면 종목 행이 한 줄로 펴진다 — 4열 */
  .rw{grid-template-columns:minmax(0,1fr) 6em 5.2em 6.4em;grid-template-rows:auto;row-gap:0}
  .rw .nm{grid-area:1/1;font-size:13.5px}
  .rw .pr{grid-area:1/2;font-size:13.5px}
  .rw .ch{grid-area:1/3;text-align:right;font-size:13px}
  .rw .am{grid-area:1/4;font-size:13px}
  .rw .dr{grid-area:2/1/3/5;padding-bottom:2px}
  .fol{font-size:11px}
  .fol .chip{max-width:9em}

  .t2{font-size:14px}
  .t2 th,.t2 td{padding:0 12px}
  .t2 col.c-rk{width:3.6em}
  .t2 col.c-pr{width:7.2em}
  .t2 col.c-ch{width:6.4em}
  .t2 col.c-x{width:7.4em}

  /* 상세가 상주한다 — 시트도 스크림도 없다 */
  #dt{grid-area:side;position:static;display:flex;flex-direction:column;min-height:0;padding-top:16px}
  #dt[hidden]{display:flex}
  .scrim{display:none}
  .pane{
    position:static; max-height:none; border-radius:10px; animation:none;
    border:1px solid var(--ln); box-shadow:none; overflow:auto;
    padding:14px 16px 16px; flex:1; min-height:0;
  }
  .x{display:none}
  .kv{grid-template-columns:1fr 1fr}
}
@media (min-width:1360px){
  #app-root{grid-template-columns:minmax(0,1fr) 420px}
  #g1{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}