/*
  로딩 인디케이터 배치 — 목업에는 **배치 규칙이 없다.**
  목업 CSS(`common/_components.css` 의 `.loading-indicator`)는 116px 고정 상자만 정의하므로
  그대로 쓰면 콘텐츠 왼쪽에 붙는다. 여기서는 그 상자를 감싸는 자리(`.loading-area`)만 정한다 —
  목업이 정의한 `.loading-indicator` 는 건드리지 않는다.

  높이는 **로딩 영역이 스스로** 갖는다. 부모마다 `height: 100vh` 를 강제하지 않고,
  부모가 이미 높이를 가진 칸이면 그 안에서 중앙에 놓인다(`align-items`/`justify-content`).
*/
.loading-area {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 160px;
    padding: 24px 0;
}

/* 목업 상자는 고정 폭이라 늘어나지 않게 둔다 */
.loading-area .loading-indicator {
    flex: 0 0 auto;
}

/*
  좁은 영역 보정 — 인기 검색어 패널은 드롭다운 안이라 160px 이 과하다.
  화면 wrapper 범위에서만 높이를 줄인다(중앙 정렬은 그대로).
*/
.search-keyword-panels .loading-area,
.mobile-search-panel .loading-area {
    min-height: 96px;
    padding: 16px 0;
}

/*
  링 스피너 — 목업의 점 4개(`common/_components.css` 의 `.loading-indicator-dot*`)를 대신한다.

  목업 CSS 는 정본이라 고치지 않는다(이 파일 머리말의 규칙). 그래서
  ① 새 그래픽은 여기 `.loading-spinner` 로 두고,
  ② 목업 `.loading-indicator` 의 116×34 고정 상자만 `.loading-area` 하위 선택자로 덮어쓴다
     (특성도 0,2,0 > 0,1,0 이라 !important 없이 이긴다. 컴포넌트가 항상 `.loading-area` 로 감싼다).
  목업의 점 규칙은 마크업이 사라져 적용 대상이 없다 — 파일에 그대로 남겨 둔다.

  크기는 목업 방식과 같게 **컨테이너 width 한 곳**(`.loading-spinner`)에서 조절한다.
  색은 팔레트 변수를 쓴다(`_guide.css :root`) — 호는 --color-primary(#EE5D44),
  트랙은 --color-line-regular(#E5E5EC). 새 하드코딩 값을 만들지 않는다.
*/
.loading-area .loading-indicator {
    display: block;
    width: auto;
    aspect-ratio: auto;
}

.loading-spinner {
    display: block;
    width: 44px;
    /* 스피너 크기변경은 .loading-spinner width 값을 변경 */
}

.loading-spinner svg {
    display: block;
    width: 100%;
    height: auto;
    animation: loading-spinner-rotate 0.9s linear infinite;
}

.loading-spinner-track,
.loading-spinner-arc {
    fill: none;
    stroke-width: 4;
}

.loading-spinner-track {
    stroke: var(--color-line-regular, #e5e5ec);
}

.loading-spinner-arc {
    stroke: var(--color-primary, #ee5d44);
}

@keyframes loading-spinner-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 모션 민감 사용자 — 회전을 멈추고 정적인 링으로 남긴다(호는 그대로 보인다) */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner svg {
        animation: none;
    }
}

/*
  상품 그리드 안의 로딩 — **열을 가로질러야 한다.**

  `.product-grid` 는 `repeat(4, minmax(0, 1fr))` 그리드다(`page/main.css` · `page/product.css`).
  그 안에서 `.loading-area` 는 그리드 **아이템**이 되므로 `width: 100%` 가 **첫 칸**의 폭이
  된다 — 스피너가 목록 가운데가 아니라 왼쪽 1/4 지점에 붙어 보였던 이유다.
  같은 이유로 0건·오류 블록은 이미 `grid-column: 1 / -1` 을 받고 있다(`app/product-empty.css`).

  **범위를 그리드 안으로 한정한다** — 버튼·작은 팝업 안의 인디케이터는 그대로 둔다.
  세로 중앙은 `.loading-area` 가 이미 갖고 있는 `min-height: 160px` + `align-items: center` 다.
*/
.product-grid > .loading-area {
    grid-column: 1 / -1;
}