/* =============================
       THEME (light/dark via CSS vars)
    ============================== */
    :root{
      --bg:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --border:#e5e7eb;
      --surface:#ffffff;
      --surface2:#f8fafc;

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

      --good:#0a7;
      --warn:#c80;
      --bad:#9ca3af;

      --chart-grid:#eef2f7;
      --chart-axis:#94a3b8;
      --chart-line:#111827;

      /* ✅ 상승=빨강 / 하락=파랑 */
      --candle-up:#ef4444;    /* red */
      --candle-down:#2563eb;  /* blue */

      --ma5:#22c55e;   /* green */
      --ma10:#06b6d4;  /* cyan */
      --ma20:#4f46e5;
      --ma60:#f59e0b;
      --ma120:#10b981;

      --shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    body.dark{
      --bg:#0b0f19;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:#1f2937;
      --surface:#0f1626;
      --surface2:#121b2e;

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

      --chart-grid:#1a2435;
      --chart-axis:#64748b;
      --chart-line:#e5e7eb;

      --candle-up:#ef4444;
      --candle-down:#60a5fa; /* 조금 밝은 블루 */
      --shadow: 0 1px 0 rgba(0,0,0,.25);
    }

    /* =============================
       BASE LAYOUT
    ============================== */
    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      margin: 18px;
      background: var(--bg);
      color: var(--text);
      -webkit-tap-highlight-color: transparent;
    }
    .container{ max-width: 1100px; margin: 0 auto; }
    .row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .spacer{ flex:1; }

    h1{ margin:0; font-size: 28px; letter-spacing:-0.02em; }
    .badge{
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
    }
    .muted{ color: var(--muted); }
    a{ color: inherit; text-decoration: none; }
    a:hover{ text-decoration: underline; }

    input, select{
      padding:8px 10px;
      border:1px solid var(--btn-border);
      border-radius:10px;
      background: var(--surface);
      color: var(--text);
      outline: none;
    }
    button{
      padding:8px 12px;
      border:1px solid var(--btn-border);
      border-radius:10px;
      background: var(--btn-bg);
      color: var(--btn-text);
      cursor:pointer;
      user-select:none;
    }
    button:active{ transform: translateY(1px); }
    button:disabled{ opacity:.5; cursor:not-allowed; }

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

    /* toolbar */
    .toolbar{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      margin-top: 10px;
    }
    .toolbar .group{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
      padding: 8px;
      border:1px solid var(--border);
      border-radius: 14px;
      background: var(--surface2);
    }
    .pill{
      display:inline-flex;
      gap:8px;
      align-items:center;
      border:1px solid var(--border);
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--surface);
    }
    .tbtn{
      padding:7px 10px;
      border-radius: 999px;
    }
    .tbtn.active{
      border-color: var(--text);
      font-weight: 800;
    }

    /* Theme icon button */
    .iconbtn{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size: 18px;
    }

    /* =============================
       CHART
    ============================== */
    /*
    .chartwrap{
      position: relative;
      width: 100%;
      overflow: hidden;
      touch-action: pan-y;
    }*/

    .chartwrap{
      position: relative;            /* ✅ 이거 없으면 tooltip이 화면 기준으로 튐 */
      overflow: hidden;              
      border:1px solid var(--border);
      border-radius:16px;
      background: var(--surface);
      touch-action: pan-y;           /* (원래 있던 거 같이 유지 권장) */
    }

    canvas{
      width: 100%;
      height: 320px;
      display:block;
      border:1px solid var(--border);
      border-radius:14px;
      background: var(--surface);
    }
    .chartmeta{ font-size: 12px; color: var(--muted); }

    .tooltip{
      left: 0;
      top: 0;      
      position:absolute;
      pointer-events:none;
      min-width: 100px;
      padding:6px 8px;
      border:1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
      font-size: 11px;
      line-height: 1.25;
      display:none;
      z-index: 10;
      max-width: calc(100% - 20px);
    }
    .tooltip .trow{
      display:flex;
      justify-content:space-between;
      gap: 10px;
      font-variant-numeric: tabular-nums;
    }
    .tooltip .title{ font-weight: 800; margin-bottom: 6px; }

    /* =============================
       TABLE
    ============================== */
    .tablewrap{
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 12px;
    }
    table{ width:100%; border-collapse: collapse; margin-top: 10px; min-width: 640px; }
    th, td{
      border-bottom: 1px solid var(--border);
      padding: 8px;
      text-align:left;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    th{
      background: var(--surface2);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    /* =============================
       SNAPSHOT GRID
    ============================== */
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 10px;
    }
    .metric{
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      background: var(--surface2);
    }
    .metric .k{ font-size: 12px; color: var(--muted); margin-bottom: 6px; }
    .metric .v{
      font-size: 18px;
      font-weight: 900;
      letter-spacing:-0.01em;
      font-variant-numeric: tabular-nums;
    }
    .metric .s{ font-size: 12px; color: var(--muted); margin-top: 4px; }
    .span-3{ grid-column: span 3; }
    .span-4{ grid-column: span 4; }
    .span-6{ grid-column: span 6; }
    .span-12{ grid-column: span 12; }

    @media (max-width: 900px){
      canvas{ height: 300px; }
      .span-3{ grid-column: span 6; }
      .span-4{ grid-column: span 6; }
      .span-6{ grid-column: span 12; }
      h1{ font-size: 24px; }
    }
    @media (max-width: 520px){
      body{ margin: 12px; }
      canvas{ height: 280px; }
      .toolbar .group{ width: 100%; justify-content: space-between; }
      .pill{ width: 100%; justify-content: space-between; }
      input{ width: 140px; }
      .tooltip{ font-size: 12px; }
    }

    .buy{ color: var(--good); font-weight: 900; }
    .watch{ color: var(--warn); font-weight: 900; }
    .caution{ color: var(--bad); font-weight: 900; }

    .oneLine{
    margin-top:8px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background: var(--surface2);
    color: var(--text);
    font-size:13px;
    line-height:1.35;
    }
    .oneLine b{ font-weight:800; }
    

    .mini-note{
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface2);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    }
    .mini-note b{ font-weight: 800; }

    /* ===== MA legend swatch ===== */
    .ma-pill{ display:inline-flex; align-items:center; gap:6px; }
    .ma-pill .ma-swatch{
    width:14px; height:4px; border-radius:999px; display:inline-block;
    background: var(--chart-line);
    transform: translateY(1px);
    }
    .ma-pill[data-ma="5"]   .ma-swatch{ background: var(--ma5); }
    .ma-pill[data-ma="10"]  .ma-swatch{ background: var(--ma10); }
    .ma-pill[data-ma="20"]  .ma-swatch{ background: var(--ma20); }
    .ma-pill[data-ma="60"]  .ma-swatch{ background: var(--ma60); }
    .ma-pill[data-ma="120"] .ma-swatch{ background: var(--ma120); }

    .chg{ font-weight:700; }
    .chg.up{ color:#ef4444; }     /* 빨강 */
    .chg.down{ color:#2563eb; }   /* 파랑 */
    .chg.flat{ color:#6b7280; }

    .chg small{
    font-weight:500;
    margin-left:4px;
    font-size:0.85em;
    }

    .chg.limit{
    letter-spacing:0.2px;
    }

    .pb-reentry-highlight{
    outline: 2px solid #22c55e;
    outline-offset: -2px;
    border-radius: 10px;
    }

    /* ===== 재무추이(A안) ===== */
    .finA-block{ margin-top:14px; }
    .finA-title{ font-size:14px; margin:0 0 10px; color:var(--text); }
    .finA-tableWrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
    .finA-table{ width:100%; border-collapse:collapse; min-width:820px; }
    .finA-table th, .finA-table td{
    padding:10px 12px; border-bottom:1px solid var(--border);
    font-size:13px; text-align:right; white-space:nowrap;
    }
    .finA-table th:first-child, .finA-table td:first-child{ text-align:left; }
    .finA-table thead th{ background:var(--surface2); color:var(--muted); font-weight:600; }
    .finA-table tbody tr:last-child td{ border-bottom:none; }

    .finA-cards{
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px;
    }
    @media (max-width: 880px){
    .finA-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 560px){
    .finA-cards{ grid-template-columns: 1fr; }
    }
    .finA-card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    padding:12px;
    }
    .finA-card .t{ color:var(--muted); font-size:12px; }
    .finA-card .v{ margin-top:6px; font-size:20px; font-weight:700; color:var(--text); }

    .finA-tabs{ display:flex; gap:8px; margin:8px 0 10px; }
    .finA-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px;
    }
    @media (max-width: 880px){
    .finA-grid{ grid-template-columns: 1fr; }
    }
    .cardLite{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    padding:10px;
    }
    .finA-chartTitle{ font-size:13px; color:var(--text); font-weight:600; margin:4px 2px 8px; }

    .finA-chart {
      height: 220px;   /* ← 이거 없으면 x축 잘림 */
    }

    .finA-chart canvas {
      width: 100% !important;
      height: 100% !important;
    }

    /* ===== Minervini Signals ===== */
    .sigRow{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .sigChip{
      display:flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      border:1px solid var(--border);
      background:var(--surface2);
    }
    .sigGood{ color:var(--good); border-color:var(--good); }
    .sigWarn{ color:var(--warn); border-color:var(--warn); }
    .sigBad{  color:var(--bad);  border-color:var(--bad);  }

    /* ===== Heatmap ===== */
    .heatmapWrap{
      display:grid;
      grid-template-columns: 120px repeat(8, 1fr);
      gap:6px;
      align-items:center;
    }
    .hmLabel{
      font-size:12px;
      color:var(--text);
      font-weight:600;
      text-align:center;
    }
    .hmCell{
      height:28px;
      border-radius:6px;
      border:1px solid var(--border);
      font-size:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-variant-numeric:tabular-nums;
    }
    .hmAccel{ border-width:2px; }
    .hmDecel{ border-style:dashed; }

    .hmFlag{ outline:2px solid #ef4444; }
    .hmOk{ outline:2px solid #22c55e; }

/* ===== Financial Score Header layout ===== */
.finScoreHeader{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.finScoreTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.finScoreTitle{
  font-weight:800;
  font-size:14px;
  line-height:1.2;
}

.finScoreSub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
  word-break:keep-all;
}

/* ===== Rings row (always new line) ===== */
.finRings{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-bottom:22px;   /* ⭐ 이 줄 추가 */
}
/* ===== Donut ring ===== */
.finRing{
  --p: 0; /* 0~100 */
  --ring: var(--border);
  width:48px;
  height:48px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:
    conic-gradient(var(--ring) calc(var(--p) * 1%), var(--border) 0);
}

/* inner hole */
.finRing::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
}

/* value text */
.finRing .v{
  position:relative;
  z-index:1;
  font-weight:800;
  font-size:11px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* label under */
.finRing .lbl{
  position:absolute;
  top:56px;          /* 52 → 56 */
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

/* status colors */
.finRing.good{ --ring: var(--good); }
.finRing.warn{ --ring: var(--warn); }
.finRing.bad { --ring: var(--bad);  }

/* simple tooltip */
.finRing[data-tip]{
  cursor:help;
}
.finRing[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:56px;
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:11px;
  line-height:1.35;
  white-space:pre;
  z-index:999;
  min-width:220px;
}

.finGrade{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  margin-left:8px;
}

.finGrade.S{ background:#16a34a; color:#fff; }
.finGrade.A{ background:#22c55e; color:#064e3b; }
.finGrade.B{ background:#facc15; color:#713f12; }
.finGrade.C{ background:#fb923c; color:#7c2d12; }
.finGrade.D{ background:#ef4444; color:#fff; }

.finGrade[data-tip]{
  position:relative;
  cursor:help;
}

.finGrade[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:110%;
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:2px 6px;
  border-radius:10px;
  font-size:11px;
  line-height:1.4;
  white-space:pre;
  z-index:999;
  min-width:260px;
}

/* ===== Penalty / Fail Reasons ===== */
.failBox{
  margin-top:8px;
  padding:10px 12px;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:12px;
  font-size:12px;
}
.failTitle{
  font-weight:800;
  margin-bottom:6px;
  color:var(--text);
}
.failItem{
  display:flex;
  gap:8px;
  align-items:center;
  padding:4px 0;
}
.failLabel{ color:var(--text); }
.failState{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
}
.failState.Warn{ background:#fff3cd; color:#a16207; border-color:#f59e0b; }
.failState.Bad { background:#fee2e2; color:#991b1b; border-color:#ef4444; }
.failLost{
  margin-left:auto;
  font-weight:900;
  color:#991b1b;
}

.instBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
}

.instBadge.good{
  background:#dcfce7;
  color:#166534;
}

.instBadge.warn{
  background:#fef3c7;
  color:#92400e;
}

.instBadge.bad{
  background:#fee2e2;
  color:#991b1b;
}

.instMsg{
  font-weight:500;
  opacity:.85;
}

/* ===== Improvement Hint box ===== */
.improveHint{
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface2);
  font-size:12px;
  line-height:1.45;
  color:var(--text);
  white-space: normal;
  word-break: keep-all;
}

.improveHint.good{ border-color:#86efac; background:#f0fdf4; }
.improveHint.warn{ border-color:#fcd34d; background:#fffbeb; }
.improveHint.bad { border-color:#fca5a5; background:#fef2f2; }

/* ===== Improvement Hint box : Dark mode overrides ===== */
/* 프로젝트 다크 모드 스위치가 .dark 또는 data-theme="dark" 둘 중 무엇이든 커버 */
.dark .improveHint.good,
[data-theme="dark"] .improveHint.good{
  border-color: rgba(134, 239, 172, .45);
  background: rgba(34, 197, 94, .12);
}

.dark .improveHint.warn,
[data-theme="dark"] .improveHint.warn{
  border-color: rgba(252, 211, 77, .45);
  background: rgba(251, 191, 36, .12);
}

.dark .improveHint.bad,
[data-theme="dark"] .improveHint.bad{
  border-color: rgba(252, 165, 165, .45);
  background: rgba(239, 68, 68, .12);
}



  .mini-help{
    margin: 14px 0 0;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
    border-radius: 12px;
    overflow: hidden;
  }
  .mini-help summary{
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font: 600 14px system-ui;
    color: var(--text, #111827);
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }
  .mini-help summary::-webkit-details-marker{ display:none; }
  .mini-help .caret{
    width: 10px; height: 10px;
    border-right: 2px solid var(--muted, #6b7280);
    border-bottom: 2px solid var(--muted, #6b7280);
    transform: rotate(45deg);
    transition: transform .18s ease;
    margin-left: 10px;
    flex: 0 0 auto;
  }
  .mini-help[open] .caret{
    transform: rotate(-135deg);
  }
  .mini-help .body{
    padding: 0 14px 14px;
    color: var(--text, #111827);
    font: 13px/1.55 system-ui;
  }
  .mini-help .muted{
    color: var(--muted, #6b7280);
    font-weight: 500;
  }
  .mini-help .sec{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border, #e5e7eb);
  }
  .mini-help .tag{
    display:inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font: 700 11px/1 system-ui;
    border: 1px solid var(--border, #e5e7eb);
    margin-right: 6px;
  }

  .legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .legend .lg{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:var(--text);user-select:none}
  .legend input{accent-color:var(--text)}

  .legend .dot{width:8px;height:8px;border-radius:50%}
  .legend .ring{width:10px;height:10px;border-radius:50%;border:2px solid}
  .legend .dia{width:9px;height:9px;transform:rotate(45deg)}
  .legend .tri.up{
    width:0;height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:10px solid;
  }

  .legend-toggles{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  font-size:13px;
  }
  .legend-toggles label{ display:flex; gap:6px; align-items:center; cursor:pointer; }
  .legend-toggles input{ accent-color: var(--good); }

  .box-note {
  background: #f8fafc;          /* 연한 백(회백색) */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
}

.box-note + .box-note {
  margin-top: 14px;
}

/* ===== legend toggles : 아이콘 붙이기 ===== */
.legend-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

.legend-toggles label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  user-select:none;
  white-space:nowrap;
}

.legend-toggles input[type="checkbox"]{
  transform: translateY(0.5px);
}

/* 아이콘 공통 */
.lg-ico{
  display:inline-block;
  width:14px;
  height:14px;
  transform: translateY(0.5px);
}

/* ● 52W 신고가 */
.lg-ico.dot{
  width:10px; height:10px;
  border-radius:999px;
}
.lg-ico.dot.high52{ background:#d844ef; }

/* ▲ 공통: 기본은 '채운' 삼각형(BUY) */
.lg-ico.tri{
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:12px solid var(--good);
}

/* BUY = 채운 ▲ */
.lg-ico.tri.buy{
  border-bottom-color: var(--good);
}

/* PB 재진입 = 속 빈 ▲ (테두리 초록 + 내부 흰색) */
.lg-ico.tri.pbRe{
  position:relative;
  border-bottom-color: var(--good); /* 바깥(테두리 역할) */
}

.lg-ico.tri.pbRe::after{
  content:"";
  position:absolute;
  left:-6px;          /* 바깥 대비 1px 안쪽 */
  top:2px;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid #000000; /* 내부 흰색 */
}

/* ◇ MA20 이탈(다이아몬드) */
.lg-ico.dia{
  width:10px; height:10px;
  transform: translateY(0.5px) rotate(45deg);
  background: var(--warn);
  border-radius:2px;
}

/* ⭕ PB 눌림(20MA) : 속 빈 원 */
.lg-ico.ring{
  width:12px; height:12px;
  border-radius:999px;
  border:2.5px solid var(--good);
  background:transparent;
}

/* ⬛ PB 성공/실패 : 반투명 네모박스 */
.lg-ico.box{
  width:16px; height:12px;
  border-radius:2px;
  opacity:0.25;               /* 네가 캔버스에서 쓰던 alpha와 동일 */
}

.lg-ico.box.pbOk{ background:#22c55e; }
.lg-ico.box.pbFail{ background:#9ca3af; }

/* 재료 박스 전체 */
.summary-box.material{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  margin-top:8px;     /* Reason과 간격 */
  margin-bottom:10px;

  background: var(--surface2);
  color: var(--text);

  font-size:13px;
  line-height:1.45;
}

/* ▶ 재료 타이틀 */
.summary-box.material .title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #111827; /* 거의 검정 */
}

/* 개별 재료 블록 */
.material-lines { margin-top: 6px; }
.material-line { margin: 6px 0; font-size: 13px; opacity: .9; }
.material-time { color:#6b7280; font-size:12px; margin-right:6px; }
.material-stockname { margin-bottom: 8px; }

/* ✅ 재료명 */
.material-item { margin: 10px 0; }
.material-item > b { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef2ff; }

/* 설명 리스트 */
.material-item ul{
  margin:4px 0 0 18px;
  padding:0;
  font-size:13px;
  color: var(--text);
  opacity:.9;
}
.material-item li{ margin-bottom:2px; }


#finA_scoreHeader{ display:block; width:100%; }


#finA_minervini_panel{
  margin-top:16px;
  padding-top:14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */  
  box-sizing: border-box;
}

#finNote_minervini_panel{
  margin-top:16px;
  padding-top:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}

#tooltip { pointer-events: none; }

#chart{
  border:0;               /* ✅ canvas border 제거 */
  border-radius:0;        /* ✅ 라운드 제거(랩퍼가 담당) */
  display:block;
}

#signalReason{
  font-size:15px;
  color:#111827;     /* sky-400 */
  font-weight:600;
}
body.dark #signalReason{
  color:#9ca3af;     /* sky-300 (다크에서 더 부드럽게) */
}

/* ===== fin_manual tabs ===== */
/* ===== fin_manual (card style) ===== */
#finManual .tabs{
  display:flex;
  gap:6px;
}

.finTab{
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  font-size:12px;
  cursor:pointer;
}
.finTab.active{
  background:#eef2ff;
  border-color:#c7d2fe;
  font-weight:700;
}

.finManual-tableWrap{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:auto;
}

.finManual-table{
  width:100%;
  border-collapse:collapse;
  min-width:980px;
}
.finManual-table th,
.finManual-table td{
  padding:10px;
  border-bottom:1px solid var(--border);
  font-size:12px;
  text-align:right;
  white-space:nowrap;
}
.finManual-table th:first-child,
.finManual-table td:first-child{
  text-align:left;
}

/* 색상 규칙 */
.tpos{ color:#dc2626; font-weight:600; } /* 양수 */
.tneg{ color:#2563eb; font-weight:600; } /* 음수 */

/* =============================
   EMBED MODE: chart only
   ============================= */
html.embed { margin: 0; }

html.embed .container{
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.embed .container > :not(#priceCard){
  display: none !important;
}

html.embed #priceCard{
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

html.embed #priceCard canvas{
  height: 520px;
}

/* =============================
   Dark mode readability patch
   (Note/Material/Tab contrast)
============================= */

/* 1) Material(재료) 박스/텍스트 다크모드 가독성 */
body.dark .summary-box.material{
  background: var(--surface2);
  color: var(--text);
  border-color: rgba(255,255,255,0.10);
}

body.dark .summary-box.material .title{
  color: var(--text) !important;              /* 기존 #111827 덮어쓰기 */
}

body.dark .material-time{
  color: var(--muted) !important;             /* 기존 #6b7280 덮어쓰기 */
}

body.dark .material-item > b{
  background: rgba(99,102,241,0.18);          /* 인디고 톤 */
  color: #e5e7eb;
  border: 1px solid rgba(99,102,241,0.28);
}

body.dark .material-item ul{
  color: var(--text);
  opacity: .92;
}

/* 2) 박스 노트(Notes) 흰 배경/연한 글씨 문제 해결 */
body.dark .box-note{
  background: #0f1626;                         /* 어두운 카드 */
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}

/* 3) mini-help(접기/펼치기) 본문/구분선 다크모드 */
body.dark .mini-help{
  background: var(--surface);
  border-color: rgba(255,255,255,0.10);
}
body.dark .mini-help summary{
  color: var(--text);
}
body.dark .mini-help .body{
  color: var(--text);
}
body.dark .mini-help .sec{
  border-top-color: rgba(255,255,255,0.18);
}

/* 4) 연간/분기 같은 pill 버튼(active) 테두리/대비 강화
   - 너 프로젝트에서 버튼 클래스가 tbtn.active 이라서 여길 확실히 */
body.dark .tbtn{
  border-color: rgba(255,255,255,0.16);
}
body.dark .tbtn.active{
  border-color: #4d6bff;                        /* 확 눈에 띄는 테두리 */
  box-shadow: 0 0 0 2px rgba(77,107,255,0.25);
  font-weight: 900;
}

/* (혹시 finTab을 연간/분기에 쓰는 화면도 있으면 같이 커버) */
body.dark .finTab{
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: rgba(255,255,255,0.16);
}
body.dark .finTab.active{
  background: rgba(99,102,241,0.18);
  color: #ffffff;
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.18);
}

/* 5) PB 재진입(속 빈 ▲) 내부 색: 다크에서 흰색 대신 어두운 배경색 */
body.dark .lg-ico.tri.pbRe::after{
  border-bottom-color: var(--bg);              /* 기존 #000000 고정값 제거 */
}

.pwa-nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #0b1220;
  padding: 10px;
  gap: 8px;
}

.pwa-nav button {
  background: #1f2a44;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
}