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

.essay-area {
  min-height: 260px;
  font-size: 15px;
  line-height: 1.7;
  resize: vertical;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

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

.toggle {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.toggle input {
  width: 20px;
  height: 20px;
  flex: none;
}

.form-actions--end {
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/* --- 숫자 판 -------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.stat--wide {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}




.stat__sub {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* --- 기준 막대 ------------------------------------------------------------ */

.gauge-block {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.gauge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.gauge-head h3 {
  margin-bottom: 0;
  font-size: 17px;
}

/* 막대 폭은 style 속성으로 줄 수 없어(CSP) <progress> 의 value/max 로 그립니다. */
.gauge {
  display: block;
  width: 100%;
  height: 14px;
  border: 0;
  border-radius: var(--radius-pill);
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

.gauge::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
}

.gauge::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.gauge::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.gauge[data-status="ok"]::-webkit-progress-value { background: var(--color-success); }
.gauge[data-status="ok"]::-moz-progress-bar { background: var(--color-success); }
.gauge[data-status="below"]::-webkit-progress-value { background: var(--color-warning); }
.gauge[data-status="below"]::-moz-progress-bar { background: var(--color-warning); }
.gauge[data-status="high"]::-webkit-progress-value { background: var(--color-warning); }
.gauge[data-status="high"]::-moz-progress-bar { background: var(--color-warning); }
.gauge[data-status="over"]::-webkit-progress-value { background: var(--color-danger); }
.gauge[data-status="over"]::-moz-progress-bar { background: var(--color-danger); }

.gauge-status {
  margin: var(--space-3) 0 0;
  font-weight: var(--weight-bold);
}

/* --- 상태 배지 ------------------------------------------------------------
   색만으로 구분하지 않도록 배지 안에 글자를 함께 넣습니다(STYLE.md).
   ------------------------------------------------------------------------ */

.badge--status[data-status="ok"] { color: var(--color-success); }
.badge--status[data-status="below"] { color: var(--color-warning); }
.badge--status[data-status="high"] { color: var(--color-warning); }
.badge--status[data-status="over"] { color: var(--color-danger); }

/* --- 기준 목록 ------------------------------------------------------------ */

.block-title {
  margin-bottom: var(--space-3);
  font-size: 17px;
}

.standard-list,
.signal-list,
.chip-list,
.sentence-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.standard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.standard__main {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.standard__name {
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.standard__range {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* --- 점검 신호 ------------------------------------------------------------ */

.signal {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.signal[data-level="warn"] {
  border-left-color: var(--color-warning);
}

.signal[data-level="info"] {
  border-left-color: var(--color-accent);
}

.signal--none {
  border-left-color: var(--color-success);
}

/* --- 많이 쓴 단어 ---------------------------------------------------------- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  min-height: 36px;
  max-width: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.chip[data-level="high"] {
  border-color: var(--color-warning);
  background: var(--color-surface-soft);
}

.chip__word {
  overflow-wrap: anywhere;
  font-weight: var(--weight-bold);
}

.chip__count {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* --- 긴 문장 -------------------------------------------------------------- */

.sentence {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.sentence__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.sentence__no {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.sentence__words {
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.sentence__words[data-level="high"] { color: var(--color-danger); }
.sentence__words[data-level="mid"] { color: var(--color-warning); }

.sentence__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .stat--wide {
    grid-column: 1 / -1;
  }

  .standard {
    grid-template-columns: 1fr;
  }

  .standard .badge {
    justify-self: start;
  }

  .toolbar .button {
    flex: 1 1 140px;
  }

  .form-actions--end .button {
    width: 100%;
  }
}