/* === form-char-counter.css === */

/* デモ内のテキストエリアとカウンターのスタイル */
.char-counter-wrapper {
  width: 100%;
  max-width: 480px;
}

.char-counter-textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.6;
  color: #1A2332;
  border: 1.5px solid #D0D7E0;
  border-radius: 8px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.char-counter-textarea:focus {
  border-color: #2B7FE8;
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

.char-counter-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* 通常時はグレー。warn / danger クラスで色が変わる */
.char-counter-display {
  font-size: 13px;
  color: #8A9BAE;
  transition: color 0.2s;
}

.char-counter-display.warn   { color: #E6A817; }
.char-counter-display.danger { color: #E53E3E; }

/* リセットボタン（global.css に定義がないためここに記述） */
.reset-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}

.reset-btn:hover {
  background: #F4F6F9;
  border-color: #9AA5B4;
}