/* 차트 색 — dataviz 검증기로 라이트/다크 모두 통과한 값 */
  :root { --c-trial: #2F6FB0; --c-exp: #C04A3C; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --c-trial: #4E93D4; --c-exp: #DC6152; }
  }
  :root[data-theme="dark"] { --c-trial: #4E93D4; --c-exp: #DC6152; }

  .simpanel {
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 18px;
  }
  .ctl { display: flex; flex-direction: column; gap: 7px; }
  .ctl > span {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .seg { display: flex; }
  .seg button {
    flex: 1;
    font-family: var(--mono);
    font-size: var(--step--1);
    padding: 8px 6px;
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--rule);
    cursor: pointer;
    white-space: nowrap;
  }
  .seg button + button { border-left: none; }
  .seg button:hover { background: var(--surface-2); color: var(--ink); }
  .seg button[aria-pressed="true"] {
    background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600;
  }
  .seg button[aria-pressed="true"]:hover { background: var(--ink); color: var(--surface); }

  .runbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .runbtn {
    font-family: var(--sans);
    font-size: var(--step-0);
    font-weight: 600;
    padding: 11px 20px;
    background: var(--ink);
    color: var(--surface);
    border: 1px solid var(--ink);
    border-radius: 3px;
    cursor: pointer;
  }
  .runbtn:hover { background: var(--house); border-color: var(--house); }
  .runbtn[disabled] { opacity: .55; cursor: default; }
  .runstat { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); }

  /* 요약 타일 */
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .tile { background: var(--surface); padding: 14px 16px; }
  .tile .k {
    display: block;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .tile .v {
    display: block;
    font-family: var(--mono);
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .tile .s { display: block; font-size: var(--step--2); color: var(--muted); margin-top: 4px; }
  .v.neg { color: var(--c-exp); }
  .v.pos { color: var(--a-stand); }

  /* 차트 */
  .chartwrap { position: relative; }
  .chartwrap canvas { display: block; width: 100%; height: 360px; }
  @media (max-width: 560px) { .chartwrap canvas { height: 280px; } }

  .tip {
    position: absolute;
    pointer-events: none;
    background: var(--house);
    color: var(--house-ink);
    border: 1px solid var(--house-rule);
    border-radius: 3px;
    padding: 9px 11px;
    font-family: var(--mono);
    font-size: var(--step--2);
    line-height: 1.7;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 90ms ease;
    z-index: 2;
  }
  .tip.on { opacity: 1; }
  .tip b { color: var(--house-ink); font-weight: 600; }
  .tip .lo { color: #E9A49C; }
  .tip .hi { color: #9CD4B4; }

  .legend { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .legend div { display: flex; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--ink-2); }
  .legend i { width: 18px; height: 3px; border-radius: 2px; display: block; }