/* タグページ用ソートとフィルターコントロール */
.tag-controls {
  font-family: 'saitamaar';
  background: #ffffff00;
  padding: 1rem;
  border-bottom: 2px dotted;
  margin-bottom: 2rem;
  font-size: 0.9em;

  button {
    font-family: 'saitamaar';
  }

  /* 見出し */
  .tag-controls-heading {
    display: inline-block;
    padding-left: 0;
    border-bottom: 2px dotted;
    border-left: none;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0.8rem;
    font-size: 1em;
  }

  /* コントロール行 */
  .tag-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.8rem;
  }

  /* コントロールグループ */
  .tag-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;

    /* ラベル */
    label {
      font-size: 0.85em;
      color: #777;
    }
  }

  /* ボタンコンテナ */
  .tag-control-buttons {
    display: flex;
    gap: 0.3rem;
  }

  .tag-sort-btn, .tag-reset-btn {
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    color: #000000!important;
    border: 1px solid #000000;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: #f0f0f0;
    }

    &.active {
      background: #000000;
      color: white!important;
      border-color: #000000;
    }
  }

  .tag-slider-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* スライダー */
  .tag-slider {
    width: 150px;
    margin: 0;
  }

  /* スライダー値 */
  .tag-slider-value {
    font-size: 0.8em;
    min-width: 2.5em;
    text-align: right;
  }

  /* 統計情報 */
  .tag-stats {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0;
  }
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .tag-controls {
    .tag-controls-row {
      flex-direction: column;
      gap: 1rem;
    }
    
    .tag-slider {
      width: 100%;
    }
  }
}