:root{
      --bg: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --border: #e5e7eb;
      --border2: #e5e7eb;
      --surface: #ffffff;
      --surface2:#fafafa;

      --btn-bg:#ffffff;
      --btn-text:#111827;
      --btn-border:#d1d5db;

      --table-head:#f3f4f6;
      --row-border:#eeeeee;

      --track:#eeeeee;
      --track-border:#e5e7eb;

      --link-pill-bg: transparent;

      --buy:#0a7;
      --watch:#c80;
      --caution:#999;

      --donut:#4f46e5;
      --donut-track:#e5e7eb;

      --shadow:0 1px 2px rgba(0,0,0,.04);
    }

    body.dark{
      --bg:#0b0f19;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:#1f2937;
      --border2:#243041;
      --surface:#0f1626;
      --surface2:#121b2e;

      --btn-bg:#111827;
      --btn-text:#e5e7eb;
      --btn-border:#243041;

      --table-head:#0f1626;
      --row-border:#1f2937;

      --track:#1f2937;
      --track-border:#243041;

      --donut-track:#243041;
      --shadow:0 1px 2px rgba(0,0,0,.25);
    }

    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      margin: 20px;
      background: var(--bg);
      color: var(--text);
    }

    h1{ margin: 0 0 10px; }

    .row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .cardrow{ margin-top: 8px; padding-left: 0; }

    .badge{
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
      font-size: 13px;
    }
    .muted{ color: var(--muted); }
    .hint{ font-size:12px; color: var(--muted); }

    input[type="text"], select{
      padding:8px 10px;
      border:1px solid var(--btn-border);
      border-radius:10px;
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow);
    }

    button{
      padding:8px 12px;
      border:1px solid var(--btn-border);
      border-radius:10px;
      background: var(--btn-bg);
      color: var(--btn-text);
      cursor:pointer;
      box-shadow: var(--shadow);
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    button.active { border-color: var(--text); font-weight:700; }
    button:disabled{ opacity:.5; cursor:not-allowed; }

    .spacer{ flex:1; }

    .iconbtn{
      width:40px;
      height:36px;
      padding:0;
      justify-content:center;
    }
    .iconbtn svg{
      width:18px;
      height:18px;
      display:block;
      stroke: currentColor;
    }

    .tablewrap{
      margin-top:12px;
      border:1px solid var(--border);
      border-radius:14px;
      overflow:hidden;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

  table{
  width:100%;
  border-collapse:collapse;
  table-layout: fixed; /* ✅ 컬럼 폭 고정 */
}

    th, td{
      border-bottom:1px solid var(--row-border);
      padding:10px 10px;
      text-align:left;
      font-size:14px;
      vertical-align:middle;
      white-space:nowrap;
    }
    th{
      position:sticky;
      top:0;
      background: var(--table-head);
      z-index:2;
    }
    th.sortable{ cursor:pointer; user-select:none; }
    th.sortable:hover{ background: var(--surface2); }

    .table-scroll{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .codebox{ display:flex; flex-direction:column; gap:2px; }
    .codebox small{ color: var(--muted); }

    .links{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .mini{
      font-size:12px;
      color: var(--muted);
      border:1px solid var(--border);
      padding:2px 8px;
      border-radius:999px;
      text-decoration:none;
      background: var(--link-pill-bg);
    }
    .mini:hover{ border-color: var(--btn-border); }

    .grade-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:28px;
      height:22px;
      padding:0 8px;
      border-radius:999px;
      font-weight:900;
      font-size:12px;
      border:1px solid var(--border);
      background: var(--surface);
      color: var(--text);
    }
    .grade-s{ background: rgba(0,170,119,.14); border-color: rgba(0,170,119,.35); color: var(--buy); }
    .grade-a{ background: rgba(79,70,229,.14); border-color: rgba(79,70,229,.35); color: #4f46e5; }
    .grade-b{ background: rgba(202,138,4,.14); border-color: rgba(202,138,4,.35); color: #ca8a04; }
    .grade-c{ background: rgba(107,114,128,.14); border-color: rgba(107,114,128,.35); color: var(--muted); }
    .grade-d{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); color: #ef4444; }

    .barcell{ min-width: 140px; }
    .valrow{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
      line-height:1.1;
      margin-bottom:4px;
    }
    .valrow .num{ font-variant-numeric: tabular-nums; font-weight:800; }
    .bartrack{
      width:120px;
      height:10px;
      background: var(--track);
      border-radius:999px;
      overflow:hidden;
      border:1px solid var(--track-border);
    }
    .barfill{
      height:100%;
      width:0%;
      border-radius:999px;
      background: var(--row-accent, var(--caution));
    }

    .donutcell{
      min-width:80px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .donut{
      width:44px;
      height:44px;
      display:inline-block;
      position:relative;
    }
    .donut svg{ width:44px; height:44px; display:block; }
    .donut .center{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:12px;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .donutStroke{ stroke: var(--row-accent, var(--donut)); }
    .donutTrack{ stroke: var(--donut-track); }

    @media (max-width: 760px){
      body{ margin:12px; }
      th, td{ font-size:13px; padding:9px 8px; }
      .badge{ font-size:12px; }
      .bartrack{ width:92px; }
      .barcell{ min-width:110px; }
      .donut{ width:38px; height:38px; }
      .donut svg{ width:38px; height:38px; }
      .donut .center{ font-size:11px; }
      .iconbtn{ width:38px; height:34px; }
    }

    tr.g-s { --row-accent: #6fcf97; }
    tr.g-a { --row-accent: #9aa5ff; }
    tr.g-b { --row-accent: #f2c97d; }
    tr.g-c { --row-accent: #9ca3af; }
    tr.g-d { --row-accent: #f4a3a3; }

    .pill{
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      font-weight:800;
      font-size:12px;
      background: var(--surface);
      color: var(--text);
    }
    .pill.pass{ background: rgba(0,170,119,.14); border-color: rgba(0,170,119,.35); color: var(--buy); }
    .pill.fail{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); color: #ef4444; }

    /* ✅ 종목 컬럼 폭을 고정하고 말줄임 처리 */
    th:nth-child(2), td:nth-child(2){
      width: 280px;              /* 1920에서 적당한 타협치 */
      max-width: 280px;
    }

    td:nth-child(2) .links{
      min-width:0;               /* flex 말줄임 필수 */
    }

    td:nth-child(2) .links a b{
      display:inline-block;
      max-width: 190px;          /* 종목명만 말줄임 */
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      vertical-align:bottom;
    }

    /* ✅ 1920 같은 큰 화면에서는 더 컴팩트하게 (가로 1화면 목표) */
    @media (min-width: 1400px){
      th, td{
        padding: 8px 8px;     /* 10 -> 8 */
        font-size: 13px;      /* 14 -> 13 */
      }

      .barcell{ min-width: 110px; }   /* 140 -> 110 */
      .bartrack{ width: 86px; }       /* 120 -> 86 */

      .donut{ width: 36px; height: 36px; }
      .donut svg{ width: 36px; height: 36px; }
      .donut .center{ font-size: 11px; }

      .grade-badge{ min-width: 26px; height: 20px; padding: 0 7px; font-size: 11px; }
      .mini{ font-size: 11px; padding: 2px 7px; }
    }

    /* ✅ 마지막 3개(fin) 컬럼 폭 좁히기 */
    /*
    th:nth-last-child(3), td:nth-last-child(3){ width: 120px; }
    th:nth-last-child(2), td:nth-last-child(2){ width: 95px; }
    th:nth-last-child(1), td:nth-last-child(1){ width: 90px; } 
    */

    .barcell-compact{ min-width: 92px; }
    .bartrack-compact{ width: 70px; height: 8px; }

    /* ✅ 종목 컬럼: 더 줄이기 */
    th:nth-child(2), td:nth-child(2){
      width: 200px;         /* 280 -> 200 (약 2/3) */
      max-width: 200px;
    }

    td:nth-child(2) .links{ min-width:0; }

    td:nth-child(2) .links a b{
      display:inline-block;
      max-width: 120px;     /* 종목명만 더 짧게 (원하면 110~140 조절) */
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      vertical-align:bottom;
    }

    th:nth-child(1), td:nth-child(1){ width:44px !important; max-width:44px !important; }
    th:nth-child(2), td:nth-child(2){ width:200px !important; max-width:200px !important; }
    td:nth-child(2) .links a b{ max-width:120px !important; }

    /* 기본(라이트 모드) */
    .fin-bg {
      background: rgba(0, 0, 0, 0.03);
    }

    /* 다크 모드 */
    html.dark .fin-bg,
    body.dark .fin-bg {
      background: rgba(255, 255, 255, 0.04);
}

    /* =========================
      Mobile: keep table width + horizontal scroll
    ========================= */
    .table-scroll{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* 테이블이 모바일에서 쪼그라들지 않게 */
    .table-scroll table{
      min-width: 1100px; /* 필요하면 1000~1400 사이로 조절 */
      table-layout: auto; /* fixed 쓰면 더 찌그러질 수 있음 */
    }

    /* 셀 컨텐츠가 겹치지 않게 */
    .table-scroll th,
    .table-scroll td{
      white-space: nowrap;
      vertical-align: middle;
    }

    /* 종목(왼쪽) 영역이 너무 좁아져 깨지는 것 방지 */
    .table-scroll td:nth-child(2){
      min-width: 190px; /* 종목/코드/네이버 버튼 공간 */
    }

    /* 바/도넛 같은 컴포넌트가 셀 안에서 찌그러지지 않게 */
    .barcell, .donut, .badge, .grade-badge{
      flex: 0 0 auto;
    }

    .tablewrap{ width: 100%; }
    .table-scroll{ width: 100%; }

    .pill.watch{
      background: rgba(202,138,4,.14);
      border-color: rgba(202,138,4,.35);
      color: #ca8a04;
    }

  /* ===== Material Button (right end) ===== */
  .matBtn{
    margin-left:auto;              /* ✅ 체크박스 줄 오른쪽 끝으로 */
    border: 1px solid var(--border, rgba(0,0,0,.15));
    background: var(--surface, #fff);
    color: var(--text, #111);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    user-select:none;
  }
  .matBtn:hover{ background: var(--surface2, #f3f4f6); }
  .matBtn:active{ transform: translateY(1px); }

  /* ===== Material Modal ===== */
  .matBack{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.50);
    display:none;
    align-items:center;
    justify-content:center;
    padding: 18px 12px;
    z-index: 9999;
  }
  .matModal{
    width: min(920px, 96vw);
    max-height: min(86vh, 920px);
    overflow: auto;
    background: var(--surface, #fff);
    color: var(--text, #111);
    border: 1px solid var(--border, rgba(0,0,0,.15));
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }
  .matHead{
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, var(--surface, #fff), rgba(255,255,255,0));
    border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
    padding: 14px 16px 10px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
  }
  .matTitle{
    font-size: 16px;
    font-weight: 700;
  }
  .matDesc{
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted, #666);
    line-height: 1.5;
  }
  .matClose{
    border: 1px solid var(--border, rgba(0,0,0,.15));
    background: var(--surface2, #f3f4f6);
    color: var(--text, #111);
    border-radius: 10px;
    padding: 8px 10px;
    cursor:pointer;
    user-select:none;
  }

  .matTabs{
    display:flex;
    gap: 8px;
    align-items:center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
    flex-wrap: wrap;
  }
  .matTab{
    border: 1px solid var(--border, rgba(0,0,0,.15));
    background: var(--surface, #fff);
    color: var(--text, #111);
    border-radius: 999px;
    padding: 8px 12px;
    cursor:pointer;
    font-size: 13px;
    user-select:none;
  }
  .matTab.isActive{
    border-color: rgba(56,189,248,.55);
    box-shadow: 0 0 0 3px rgba(56,189,248,.18) inset;
  }
  .matHint{
    margin-left:auto;
    font-size: 12px;
    color: var(--muted, #666);
  }

  .matBody{
    padding: 14px 14px 18px;
    line-height: 1.6;
    font-size: 14px;
  }
  .matLoading{ color: var(--muted, #666); padding: 8px; }

  /* ===== Content blocks matching your sample images ===== */
  .mat-card{
    background: var(--surface2, rgba(0,0,0,.03));
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 14px;
    padding: 12px;
  }
  .mat-sec{ padding: 6px 6px 10px; }
  .mat-stars{ font-weight: 800; color: #fbbf24; letter-spacing: 1px; }
  .mat-dim{ color: rgba(148,163,184,.8); }
  .mat-tag{
    display:inline-block;
    margin-left: 10px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--surface, #fff);
    color: var(--muted, #666);
  }
  .mat-lines{ margin-top: 8px; }
    


    #apikeyBox{ display:none !important; }