/* Battery Materials Simulator — 보조 스타일 (대부분은 Tailwind 유틸리티로 처리) */

:root { --accent: #6d5ef0; }

body { -webkit-font-smoothing: antialiased; }

/* 입력 컨트롤 공통 톤 */
.field {
  width: 100%;
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 0.7rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  color: #1c2030;
  transition: border-color .15s, box-shadow .15s;
}
.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 94, 240, .15);
}
select.field { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7185' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; padding-right: 1.9rem; }

.label { font-size: 0.72rem; font-weight: 600; color: #6b7185;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .3rem; display: block; }

.btn-accent {
  background: var(--accent); color: #fff; font-weight: 600;
  border-radius: 0.8rem; transition: filter .15s, transform .05s;
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-accent:active { transform: translateY(1px); }
.btn-accent:disabled { opacity: .55; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; padding: .15rem .5rem;
  border-radius: 999px; background: #f0f1f7; color: #4b5168;
}

/* 예측값 밴드 바 */
.band-track { position: relative; height: 6px; background: #ececf4; border-radius: 999px; }
.band-fill { position: absolute; top: 0; height: 6px; background: rgba(109,94,240,.28); border-radius: 999px; }
.band-dot { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--accent); border: 2px solid #fff; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(20,24,48,.25); }

/* 페이드 인 */
.fade-in { animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 로딩 스피너 */
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 도넛 차트 (조성 분율) ── */
.donut {
  width: 132px; height: 132px; border-radius: 999px; position: relative;
  background: conic-gradient(#ececf4 0deg 360deg);
}
.donut::after {
  content: ""; position: absolute; inset: 24px; background: #fff; border-radius: 999px; z-index: 0;
}
.donut-center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #6b7185; text-align: center; line-height: 1.1;
}

/* ── 듀얼 레인지(하한/상한 전압) 슬라이더 ── */
.vrange { position: relative; height: 34px; }
.vrange-rail {
  position: absolute; top: 14px; left: 0; right: 0; height: 6px;
  background: #ececf4; border-radius: 999px;
}
.vrange-fill {
  position: absolute; top: 14px; height: 6px;
  background: rgba(109, 94, 240, .85); border-radius: 999px;
}
.vrange input[type="range"] {
  position: absolute; top: 4px; left: 0; width: 100%; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.vrange input[type="range"]::-webkit-slider-runnable-track { background: none; border: none; }
.vrange input[type="range"]::-moz-range-track { background: none; border: none; }
.vrange input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: pointer;
  width: 20px; height: 20px; border-radius: 999px;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(20, 24, 48, .3); margin-top: 0;
}
.vrange input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer;
  width: 20px; height: 20px; border-radius: 999px;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(20, 24, 48, .3);
}

[hidden] { display: none !important; }