/* 보라-흰색 톤: 연보라에서 흰색으로 흐르는 헤더, 옅은 라벤더 바탕, 흰 패널. 헤더 글자는 진보라라 밝은 쪽 끝에서도 읽힌다 */
  :root { --accent:#5b21b6; --accent2:#7c3aed; --bg:#f6f3fc; --panel:#fff; --fg:#1f1633; --muted:#6e6487; --line:#e7e1f3;
          --up:#d24f45; --down:#1261c4; --hi:#f1ebfe; --pre:#f5a623; --grid:#f1edf9; --tagfg:var(--accent2);
          --hdr:linear-gradient(115deg, #c4b5fd 0%, #ddd6fe 45%, #faf8ff 100%); --hdr-fg:#2e1065; --hdr-ctl:#fff; --ctl-fg:var(--accent); --ctl-line:var(--line); --fc:#f5a623;
          --shadow:0 1px 2px rgb(91 33 182 / .06), 0 8px 24px rgb(91 33 182 / .07); color-scheme: light; }
  /* 다크 토큰: 시스템이 다크이고 사용자가 라이트를 고르지 않았을 때, 또는 사용자가 다크를 골랐을 때 */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#120d20; --panel:#1b1430; --fg:#ece6fb; --muted:#9d93b8; --line:#2c2346;
          --up:#ff6b61; --down:#4d9bff; --hi:#2a1f45; --grid:#2c2346; --tagfg:#c4b5fd; --fc:#facc15; --shadow:none; color-scheme: dark;
          --hdr:linear-gradient(115deg, #4c1d95 0%, #3b1a73 50%, #1b1430 100%); --hdr-fg:#f3eeff; --hdr-ctl:#f3eeff; } }
  :root[data-theme="dark"] { --bg:#120d20; --panel:#1b1430; --fg:#ece6fb; --muted:#9d93b8; --line:#2c2346;
          --up:#ff6b61; --down:#4d9bff; --hi:#2a1f45; --grid:#2c2346; --tagfg:#c4b5fd; --fc:#facc15; --shadow:none; color-scheme: dark;
          --hdr:linear-gradient(115deg, #4c1d95 0%, #3b1a73 50%, #1b1430 100%); --hdr-fg:#f3eeff; --hdr-ctl:#f3eeff; }
  * { box-sizing: border-box; }
  body { margin:0; font:14px/1.45 "Pretendard Variable", Pretendard, system-ui, sans-serif; background:var(--bg); color:var(--fg);
         font-variant-numeric: tabular-nums; min-height:100dvh; }
  header { background: var(--hdr); color: var(--hdr-fg); }
  .bar { max-width:1400px; margin:0 auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:14px 16px; }
  h1 { font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0; }
  nav { display:flex; gap:4px; margin-right:auto; }
  nav a { color:var(--hdr-fg); text-decoration:none; font-size:13px; padding:5px 10px; border-radius:8px; opacity:.75; }
  nav a:hover { opacity:1; }
  nav a[aria-current="page"] { background:color-mix(in srgb, var(--accent) 16%, transparent); opacity:1; font-weight:600; }
  header label { display:flex; gap:6px; align-items:center; font-size:13px; opacity:.9; cursor:pointer; }
  header input { accent-color:var(--accent2); }
  header select { font:inherit; font-size:13px; color:var(--ctl-fg); background:var(--hdr-ctl); box-shadow: inset 0 0 0 1px var(--ctl-line); border:0; border-radius:8px; padding:5px 8px; }
  #qf { margin:0; }
  #q { font:inherit; font-size:13px; width:170px; color:var(--ctl-fg); background:var(--hdr-ctl); border:0; border-radius:8px; padding:6px 10px; box-shadow: inset 0 0 0 1px var(--ctl-line); }
  #q::placeholder { color:var(--ctl-fg); opacity:.55; }
  #status { font-size:12px; opacity:.8; flex:1 0 60%; }
  #visits { font-size:12px; opacity:.8; margin-left:auto; }
  main { max-width:1400px; margin:0 auto; padding:16px; display:grid; grid-template-columns: minmax(340px, 540px) 1fr; gap:16px; align-items:start; }
  @media (max-width: 800px) { main { grid-template-columns: 1fr; padding:12px; } #chartBox { order:-1; } }
  .panel { background:var(--panel); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  #list { max-height: calc(100dvh - 110px); overflow:auto; }
  table { width:100%; border-collapse:collapse; }
  th, td { padding:8px 10px; text-align:right; white-space:nowrap; }
  td { border-top:1px solid var(--line); }
  th:first-child, td:first-child { text-align:left; }
  td:last-child { white-space:normal; min-width:136px; }
  td:first-child { white-space:normal; min-width:120px; }
  .tag { margin:2px 0 2px 4px; }
  th { position:sticky; top:0; background:var(--panel); color:var(--muted); font-size:12px; font-weight:500; z-index:1; }
  tbody tr[data-code] { cursor:pointer; transition: background .15s; }
  tbody tr[data-code]:hover { background:var(--hi); }
  tbody tr.sel { background:var(--hi); box-shadow: inset 3px 0 0 var(--accent2); }
  td b { font-weight:600; }
  td small, #chartBox small { color:var(--muted); font-size:11px; }
  .up { color:var(--up); } .down { color:var(--down); }
  .tag { display:inline-block; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; margin-left:4px; background:var(--hi); color:var(--tagfg); }
  .tag.급등 { background:var(--up); color:#fff; } .tag.전조 { background:var(--pre); color:#2a1a00; } .tag.횡보 { background:#c026d3; color:#fff; } .tag.바닥 { background:#7b61d9; color:#fff; } .tag.돌파 { background:#0f8fa8; color:#fff; }
  #chartBox { padding:16px 20px 12px; }
  /* 조건을 모두 충족한 코인: 행 배경이 천천히 깜빡인다 */
  tbody tr.hot { animation: hot 1.6s ease-in-out infinite; }
  tbody tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--pre); }
  @keyframes hot { 50% { background: color-mix(in srgb, var(--pre) 22%, transparent); } }
  @media (prefers-reduced-motion: reduce) { tbody tr.hot { animation:none; background: color-mix(in srgb, var(--pre) 16%, transparent); } }
  #chartTitle { font-size:17px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; }
  #chart { height: 56vh; min-height:300px; }
  .tag.risk { font-size:10px; padding:0 5px; vertical-align:1px; background:transparent; box-shadow: inset 0 0 0 1px var(--muted); color:var(--muted); cursor:help; }
  .tag.유의 { box-shadow: inset 0 0 0 1px var(--up); color:var(--up); }
  #stats:empty { display:none; }
  #stats { margin-bottom:12px; font-size:13px; }
  #stats table { background:var(--hi); border-radius:8px; overflow:hidden; }
  #stats th, #stats td { border:0; padding:6px 12px; background:transparent; position:static; }
  #stats caption { text-align:left; color:var(--muted); font-size:12px; padding-bottom:6px; }
  #stats p { margin:6px 0 0; color:var(--muted); font-size:12px; }
  .empty { padding:40px 12px; text-align:center; color:var(--muted); }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
  /* 차트 모아보기: 화면 폭에 따라 열 수(--cols)를 정하고, 행 높이는 화면 높이를 나눠 한 화면에 격자가 다 들어오게 */
  #grid { max-width:none; align-items:stretch; display:grid; grid-template-columns: repeat(var(--cols, 3), 1fr); grid-auto-rows: max(170px, calc((100dvh - 120px) / var(--cols, 3))); gap:10px; padding:12px 16px; }
  .cell { display:flex; flex-direction:column; padding:10px 14px 8px; min-width:0; cursor:pointer; text-decoration:none; color:inherit; transition: box-shadow .15s; }
  .cell:hover { box-shadow: inset 0 0 0 2px var(--accent2), var(--shadow); }
  .cell.hot { box-shadow: inset 0 0 0 2px var(--pre), var(--shadow); animation: hot 1.6s ease-in-out infinite; }
  .cell header { all:unset; display:flex; gap:6px; align-items:baseline; font-size:12px; white-space:nowrap; overflow:hidden; }
  .cell header b { font-size:13px; }
  .cell header .tags { margin-left:auto; overflow:hidden; }
  .cell .c { flex:1; min-height:0; }
  @media (max-width: 700px) { #grid { grid-auto-rows: 240px; } }
  @media (prefers-reduced-motion: reduce) { .cell.hot { animation:none; } }
  /* 조건 체크 */
  td .tag.chk { font-size:10px; padding:0 5px; vertical-align:1px; margin-left:2px; }
  .tag.chk { background:transparent; box-shadow: inset 0 0 0 1px var(--line); color:var(--muted); cursor:help; }
  .tag.chk.full { background:#2fa37a; box-shadow:none; color:#fff; }
  .checks { list-style:none; margin:0 0 12px; padding:10px 12px; background:var(--hi); border-radius:8px; display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:6px 16px; font-size:13px; }
  .checks b { display:inline-block; min-width:44px; font-size:11px; font-weight:600; padding:1px 6px; border-radius:6px; margin-right:4px; text-align:center; color:var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
  .checks li.ok b { background:#2fa37a; color:#fff; box-shadow:none; }
  .checks small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
  #summary { max-width:none; margin:12px 16px 0; padding:12px 16px; font-size:13px; }
  #summary h2 { font-size:15px; margin:0 0 6px; }
  #summary p { margin:4px 0 0; color:var(--muted); }
  #summary .pick small { font-weight:400; opacity:.85; margin-left:4px; }
  #summary .pick { display:inline-block; margin:2px 6px 2px 0; padding:3px 10px; border-radius:8px; background:#2fa37a; color:#fff; font-weight:600; text-decoration:none; }
  /* 예측 성적 */
  .track { max-width:none; margin:12px 16px 0; padding:12px 16px; font-size:13px; }
  .track h2 { font-size:15px; margin:0 0 6px; }
  .track h2 small { font-weight:400; color:var(--muted); margin-left:6px; }
  .track p { margin:4px 0 0; }
  .track .big { font-size:14px; font-weight:600; }
  .track .vs { display:inline-block; font-weight:400; color:var(--muted); margin-left:8px; }
  .track .note { color:var(--muted); font-size:12px; }
  main > .track, main > #summary { grid-column: 1 / -1; margin:0; }
  /* 모든 페이지 하단 고지 */
  footer.legal { max-width:1400px; margin:8px auto 0; padding:14px 16px 24px; color:var(--muted); font-size:12px; text-align:center; }