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

/* --- 계산 유형 고르기 -------------------------------------------------------
   항목이 일곱 개라 common.css 의 3열(데스크톱)·1열(모바일) 대신
   4열·2열로 배치합니다. 두 규칙 모두 미디어쿼리 안에 두어
   common.css 와 우선순위 다툼이 생기지 않게 했습니다.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .mode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 입력칸 배치 ----------------------------------------------------------- */
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.sub-field {
  margin-top: var(--space-4);
}

.panel .field-hint {
  margin-top: var(--space-3);
}

/* --- 결과 ------------------------------------------------------------------ */
.candidate--main {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}

.candidate--main .candidate__label {
  color: var(--color-primary);
}

/* 계산식 — 숫자 폭을 고르게 하고, 길면 줄바꿈합니다.
   body 의 word-break: keep-all 때문에 긴 식이 넘칠 수 있어 따로 풀어 줍니다. */
.formula {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: normal;
}

.copy-button {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
}

/* --- 등급 컷 표 ------------------------------------------------------------ */
.table-wrap {
  margin-top: var(--space-5);
  overflow-x: auto;
}

.grade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.grade-table caption {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
  text-align: left;
}

.grade-table th,
.grade-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

.grade-table thead th {
  color: var(--color-text-muted);
  font-size: 13px;
}

.grade-table tbody th {
  font-weight: var(--weight-bold);
}

.grade-table tbody tr[data-current="yes"] {
  background: var(--color-surface-soft);
}

.grade-table tbody tr[data-current="yes"] th,
.grade-table tbody tr[data-current="yes"] td {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* --- 안내 문구 ------------------------------------------------------------- */
.note-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.note-item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}