@charset "utf-8";
/* ==================================================
   popular.css
   PC '지금 많이 보고 있어요' (/popular)

   View : app/Views/_pc/front/pages/popular/index.php
   JS   : /assets/front/pc/js/pages/popular.js (+ popular-mock.js 예시 데이터)

   [격리]
     모든 Class 는 pc-popular- 접두어를 쓴다.
     메인 '지금 많이 보고 있어요' 섹션(.popular-*, .popular-period__button)과
     공통 CSS(layout / components)는 수정하지 않았다.

   [Layout]
     main-layout__inner = 1680 (Content 1400 + Gap 40 + Wing 240) — 기존 골격 재사용
     .pc-popular__body  = 좌측 탐색 280 + Gap 24 + 중앙 1096
     Wing 배너가 없으면 main-wing.php 가 출력되지 않지만 Grid 첫 컬럼(1400)은
     그대로 유지되므로 본문 폭이 바뀌지 않는다.
     body min-width 1680 정책(layout.css)을 그대로 따른다 — 1680 미만은 가로 Scroll.

   본문 하단 ↔ Footer 여백(64px)은 .main-layout--sub 가 담당한다.
================================================== */


/* ---------- Icon Sprite (화면에 그리지 않음) ---------- */
.pc-popular-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ==================================================
   Page Head
================================================== */

.pc-popular__breadcrumb {
  padding-top: var(--space-5);
}

.pc-popular__head {
  margin-top: var(--space-4);
}

.pc-popular__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-page-title-size);
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line-height);
}

.pc-popular__title-emoji {
  font-size: 0.9em;
  line-height: 1;
}

.pc-popular__subtitle {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}


/* ==================================================
   Toolbar : 기간 탭 + 예시 데이터 안내
================================================== */

.pc-popular-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
}

.pc-popular-period {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pc-popular-period__button {
  min-width: 144px;
  height: 44px;
  padding: 0 var(--space-6);
  border: 0;
  background: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pc-popular-period__button + .pc-popular-period__button {
  border-left: 1px solid var(--border-default);
}

.pc-popular-period__button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pc-popular-period__button.is-active,
.pc-popular-period__button.is-active:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}

.pc-popular-period__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.pc-popular-toolbar__notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.pc-popular-toolbar__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  font-style: normal;
  line-height: 1;
}


/* ==================================================
   Body : 좌측 탐색 280 + 중앙 1fr
================================================== */

.pc-popular__body {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}


/* ==================================================
   좌측 : Panel 공통
================================================== */

.pc-popular-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pc-popular-panel {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
}

.pc-popular-panel__title {
  padding: 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}


/* ---------- 분야별 랭킹 ---------- */

.pc-popular-category__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.pc-popular-category__button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 46px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pc-popular-category__button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pc-popular-category__button.is-active,
.pc-popular-category__button.is-active:hover {
  background: var(--brand-secondary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}

.pc-popular-category__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.pc-popular-category__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--brand-interaction);
}

.pc-popular-category__button.is-active .pc-popular-category__icon {
  color: var(--text-inverse);
}


/* ---------- 실시간 급상승 키워드 (예시, 클릭 없음) ---------- */

.pc-popular-keyword__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.pc-popular-keyword__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-2);
}

.pc-popular-keyword__rank {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-brand-light);
  color: var(--brand-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.pc-popular-keyword__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-popular-keyword__rate {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pc-popular-keyword__rate-icon {
  color: var(--rank-up);
  font-size: 10px;
}


/* ==================================================
   중앙 : TOP 4 Card
================================================== */

.pc-popular-main {
  min-width: 0;
}

.pc-popular-top__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.pc-popular-top__empty {
  grid-column: 1 / -1;
  padding: var(--space-12) 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  text-align: center;
}

.pc-popular-card {
  min-width: 0;
}

.pc-popular-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
  color: inherit;
}

/* 실제 상세로 이동 가능한 카드만 Hover / Focus 반응. 예시 카드는 정적으로 둔다. */
.pc-popular-card.is-linked .pc-popular-card__inner {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.pc-popular-card.is-linked .pc-popular-card__inner:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.pc-popular-card.is-linked .pc-popular-card__inner:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.pc-popular-card__media {
  position: relative;
  display: block;
  height: 172px;
  overflow: hidden;
  background: var(--bg-muted);
}

.pc-popular-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-popular-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-brand-light);
}

.pc-popular-card__placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--border-strong);
}

/* 순위 Badge : 1 금 / 2 은 / 3 동 / 4 기본 */
.pc-popular-card__rank {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.pc-popular-card__rank--1 {
  background: #FFC93C;
  color: #5A3D00;
}

.pc-popular-card__rank--2 {
  background: #E4E8EE;
  color: var(--text-secondary);
}

.pc-popular-card__rank--3 {
  background: #8A5A2B;
  color: var(--text-inverse);
}

.pc-popular-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.pc-popular-card__category {
  color: var(--text-link);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.pc-popular-card__title,
.pc-popular-card__meta,
.pc-popular-card__price {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-popular-card__title {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--text-card-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.pc-popular-card__meta {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.pc-popular-card__price {
  margin-top: var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-price-size);
  font-weight: var(--text-price-weight);
  line-height: var(--text-price-line-height);
}

.pc-popular-card__views {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}


/* ==================================================
   중앙 : 전체 랭킹 TOP 20 (5~20위)
================================================== */

.pc-popular-rank {
  margin-top: var(--space-10);
}

.pc-popular-rank__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-subsection-title-line-height);
}

.pc-popular-rank__table {
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
}

.pc-popular-rank__row {
  display: grid;
  grid-template-columns: 72px 220px minmax(0, 1fr) 128px 104px 96px;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--space-5);
  column-gap: var(--space-3);
}

/* 전일대비 열이 없는 경우(1차 — 과거 순위 기록 없음) : 마지막 열만 뺀다 */
.pc-popular-rank__table--no-change .pc-popular-rank__row {
  grid-template-columns: 72px 220px minmax(0, 1fr) 128px 104px;
}

.pc-popular-rank__table--no-change .pc-popular-rank__row--empty {
  grid-template-columns: 1fr;
}

/* display:grid 가 [hidden] 기본값을 덮지 않도록 명시한다 */
.pc-popular-rank__row[hidden] {
  display: none;
}

.pc-popular-rank__row + .pc-popular-rank__row,
.pc-popular-rank__body > .pc-popular-rank__row:first-child {
  border-top: 1px solid var(--border-light);
}

.pc-popular-rank__row--head {
  min-height: 44px;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.pc-popular-rank__row--empty {
  grid-template-columns: 1fr;
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  text-align: center;
}

.pc-popular-rank__body .pc-popular-rank__row.is-linked:hover {
  background: var(--surface-hover);
}

.pc-popular-rank__cell {
  min-width: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.pc-popular-rank__body .pc-popular-rank__cell--rank {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.pc-popular-rank__cell--rank {
  padding-left: var(--space-2);
}

.pc-popular-rank__cell--field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pc-popular-rank__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--brand-interaction);
}

.pc-popular-rank__field {
  overflow: hidden;
  color: var(--text-link);
  font-size: var(--font-size-md);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-popular-rank__text,
.pc-popular-rank__link {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-popular-rank__link:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}

.pc-popular-rank__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.pc-popular-rank__body .pc-popular-rank__cell--region {
  overflow: hidden;
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-popular-rank__cell--views {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pc-popular-rank__body .pc-popular-rank__cell--views {
  color: var(--text-secondary);
}

.pc-popular-rank__cell--change {
  padding-right: var(--space-2);
  text-align: right;
}


/* ---------- 전일대비 (예시) — 메인 .popular-item__change 와 같은 Color Token ---------- */

.pc-popular-change {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pc-popular-change__icon {
  font-size: 10px;
}

.pc-popular-change--up {
  color: var(--rank-up);
}

.pc-popular-change--down {
  color: var(--rank-down);
}

.pc-popular-change--new {
  color: var(--rank-hot);
}

.pc-popular-change--same {
  color: var(--text-tertiary);
}


/* ---------- 11위 ~ 20위 더보기 / 접기 ---------- */

.pc-popular-rank__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 52px;
  margin-top: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
  color: var(--text-link);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.pc-popular-rank__more[hidden] {
  display: none;
}

.pc-popular-rank__more:hover {
  background: var(--surface-hover);
}

.pc-popular-rank__more:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 아래 방향 Chevron. 펼친 상태에서 위로 회전 */
.pc-popular-rank__more-arrow {
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.pc-popular-rank__more.is-expanded .pc-popular-rank__more-arrow {
  margin-top: 4px;
  transform: rotate(-135deg);
}


/* ---------- No Script ---------- */
.pc-popular__noscript {
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  text-align: center;
}


/* ==================================================
   순위 갱신 애니메이션 (V1.1)
   이동·페이드는 popular.js 가 inline transform / opacity 로 처리하고 끝나면 지운다.
   여기서는 고스트(떠나는 항목) 배치 기준과 이동 중 겹침 순서만 정한다.
================================================== */

.pc-popular-top__list,
.pc-popular-rank__body {
  position: relative;
}

/* 이동 중인 항목이 지나가는 항목 위로 보이도록 */
.pc-popular-card.is-moving,
.pc-popular-rank__row.is-moving {
  position: relative;
  z-index: 1;
}

/* 행은 배경이 없어 겹칠 때 비치므로 이동 중에만 표 배경색을 깐다 */
.pc-popular-rank__row.is-moving,
.pc-popular-rank__row.is-ghost {
  background: var(--surface-default);
}

/* 급상승 키워드 : 이동 중 겹치는 항목이 비치지 않도록 패널 배경색을 깐다 */
.pc-popular-keyword__item.is-moving {
  position: relative;
  z-index: 1;
  background: var(--surface-default);
}

/* 경계를 넘어 떠나는 항목(고스트) — 기존 위치에 absolute 로 남아 페이드아웃 */
.pc-popular-card.is-ghost,
.pc-popular-rank__row.is-ghost {
  z-index: 2;
}


/* ==================================================
   [DEV ONLY] 순위 갱신 테스트 버튼 — /popular?debug=ranking 에서만 popular.js 가 생성
   제거 시 이 블록과 popular.js 의 [DEV ONLY] 블록을 함께 지운다.
================================================== */

.pc-popular-debug-button {
  flex: 0 0 auto;
  height: 36px;
  margin-left: auto;
  padding: 0 var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pc-popular-debug-button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pc-popular-debug-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.pc-popular-debug-button:disabled {
  color: var(--text-disabled);
  cursor: progress;
}