/**
 * クリニック検索結果 - 無限スクロール UI
 * c-loop-clinic-001__loading / c-loop-clinic-001__end-message / c-loop-clinic-001__sentinel
 *
 * JavaScriptで動的に生成されるローディングインジケーター、終了メッセージ、センチネルのスタイル
 */

/* ======================================
   ローディングインジケーター
   ====================================== */

.c-loop-clinic-001__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--base);
  margin: var(--wp--preset--spacing--xl) 0;
}

.c-loop-clinic-001__loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--primary);
}

.c-loop-clinic-001__loading-spinner .material-symbols-outlined {
  font-size: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.c-loop-clinic-001__loading-text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-600);
  margin: 0;
  font-weight: 500;
}

/* ======================================
   終了メッセージ
   ====================================== */

.c-loop-clinic-001__end-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--base);
  margin: var(--wp--preset--spacing--xl) 0;
  background: var(--wp--preset--color--gray-50);
  border-radius: var(--wp--custom--border--radius--md);
}

.c-loop-clinic-001__end-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--success);
}

.c-loop-clinic-001__end-icon .material-symbols-outlined {
  font-size: 48px;
}

.c-loop-clinic-001__end-text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-700);
  margin: 0;
  font-weight: 500;
  text-align: center;
}

/* ======================================
   センチネル（スクロール検出用の非表示要素）
   ====================================== */

.c-loop-clinic-001__sentinel {
  height: 1px;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}

/* ======================================
   レスポンシブ対応
   ====================================== */

@media (min-width: 768px) {
  .c-loop-clinic-001__loading-spinner,
  .c-loop-clinic-001__end-icon {
    width: 64px;
    height: 64px;
  }

  .c-loop-clinic-001__loading-spinner .material-symbols-outlined,
  .c-loop-clinic-001__end-icon .material-symbols-outlined {
    font-size: 64px;
  }

  .c-loop-clinic-001__loading-text,
  .c-loop-clinic-001__end-text {
    font-size: var(--wp--preset--font-size--base);
  }
}

/* ======================================
   ダークモード対応（将来の拡張用）
   ====================================== */

@media (prefers-color-scheme: dark) {
  .c-loop-clinic-001__end-message {
    background: var(--wp--preset--color--gray-800);
  }

  .c-loop-clinic-001__loading-text,
  .c-loop-clinic-001__end-text {
    color: var(--wp--preset--color--gray-300);
  }
}