/* ==========================================================================
   unit-converter / style.css
   이 도구에만 필요한 스타일입니다. 색·간격은 css/common.css 의 변수만 씁니다.
   🔴 인라인 style 이 CSP 로 막히므로, 상태는 전부 data-* 속성으로 받습니다.
   ========================================================================== */

/* --- 값 + 기준 단위 -------------------------------------------------------- */
.value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: var(--space-4);
  align-items: start;
}

.value-row__field {
  min-width: 0;
}

.value-row .text-input {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}


/* --- 자주 쓰는 변환 -------------------------------------------------------- */
.quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quick-chip {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 14px;
}

/* --- 결과 목록 ------------------------------------------------------------
   단위가 많아 줄 수가 늘어나므로 공통 .candidate 보다 조금 촘촘하게 씁니다.
   -------------------------------------------------------------------------- */
.unit-list {
  gap: var(--space-2);
}

.unit-list .candidate {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.unit-row__main {
  min-width: 0;
}

.unit-list .candidate__label {
  overflow-wrap: anywhere;
}

.unit-list .candidate__name {
  font-size: clamp(18px, 3.2vw, 22px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.unit-suffix {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.unit-flag {
  display: inline-block;
  margin-left: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-warning);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.unit-note {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.unit-copy {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* --- 기준값 안내 목록 ------------------------------------------------------ */
.fact-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.fact-list li {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 15px;
}

@media (max-width: 760px) {
  .value-row {
    grid-template-columns: 1fr;
  }

  .unit-list .candidate {
    gap: var(--space-2);
  }
}