@charset "UTF-8";
.card {
  max-width: 800px; }

textarea {
  width: 100%;
  height: 320px;
  padding: 1em;
  border: 2px solid #ddd;
  border-radius: 0.5em;
  box-sizing: border-box;
  font-size: 90%;
  resize: vertical;
  transition: border-color 0.3s; }
  textarea:focus {
    outline: none;
    border-color: var(--primary-color); }

.counter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  margin-top: 1.5em; }

.counter-item {
  background: #f8f9fa;
  padding: 1em;
  border-radius: 0.5em;
  text-align: center; }

.counter-label {
  font-size: 80%;
  color: #666;
  display: block;
  margin-bottom: 0.25em; }

.counter-value {
  font-size: 150%;
  font-weight: 600;
  color: var(--primary-color); }

.action-btns {
  display: flex;
  gap: 0.75em;
  margin-top: 1.5em; }

button {
  flex: 1;
  padding: 1em;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s; }

.clear-btn {
  background: #EEE;
  color: #666; }
  .clear-btn:hover {
    background: #DDD; }

.copy-btn {
  background: var(--primary-color);
  color: #FFF; }
  .copy-btn:hover {
    opacity: 0.9; }

@media screen and (max-width: 820px) {
  /* 820px以下 */
  .card {
    box-sizing: border-box; } }
@media screen and (max-width: 480px) {
  /* 480px以下 */
  textarea {
    height: 240px; }

  .counter-grid {
    gap: 0.5em;
    grid-template-columns: repeat(1, 1fr); }

  .counter-item {
    padding-block: 0.5em; } }