/* ============================================================
   2026 SMUCD 졸업전시 · Designer(목록)
   Figma: Desktop 5138:8435 · Tablet 4955:3263 · Mobile 4975:3264
   공용(리셋·토큰·헤더·푸터·내비)은 home.css 재사용
   Breakpoints: 기본=데스크탑(≥961) · ≤960=태블릿 · ≤390=모바일
   ============================================================ */

/* ============================================================
   BODY (Desktop: 좌 초성필터 + 우 5열 그리드)
   ============================================================ */
.dz-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 13%, 167px);   /* 167/1280 ≈ 13% */
  padding: 81px clamp(24px, 5.5vw, 80px);
}

/* ---------- 초성 필터 ---------- */
.dz-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.dz-side__title { display: none; }
.dz-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.dz-chip {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-weight: 800; font-size: 26px; line-height: 34px;   /* D-H4 */
  letter-spacing: -0.02em; color: #C1C1C1;
  transition: color 0.15s ease, background 0.15s ease;
}
.dz-chip:hover, .dz-chip.is-active { color: var(--g11); }

/* ---------- 그리드 ---------- */
.dz-grid {
  flex: 1 1 0; min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px; row-gap: 30px;
}
.dz-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.dz-card__thumb {
  display: block; width: 100%; aspect-ratio: 193.419 / 235.786;
  position: relative; overflow: hidden; border-radius: 10px;
}
.dz-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.dz-card:hover .dz-card__thumb img { transform: scale(1.06); }   /* 호버: 틀 안에서 살짝 확대 */
.dz-empty { grid-column: 1 / -1; color: var(--g6); padding: 40px 0; font-size: 16px; font-weight: 700; }
.dz-card__info { display: flex; flex-direction: column; min-width: 0; }
.dz-card__name {
  font-weight: 700; font-size: 18px; line-height: 23.4px;   /* D-Body2 */
  letter-spacing: -0.02em; color: var(--g10);
}
.dz-card__roman {
  font-weight: 700; font-size: 14px; line-height: 20px;     /* D-Small2 */
  letter-spacing: -0.02em; color: #3d3d3d;                  /* Grayscale-9 */
}

/* ============================================================
   ▍ < 880px  · Figma 5391:3896 (880 - Designer)
   DESIGNER 제목 + 초성 칩(전체=보라) + 2열 그리드
   ============================================================ */
@media (max-width: 879.98px) {
  .dz-body { flex-direction: column; align-items: stretch; gap: 40px; padding: 60px 20px; }

  /* 초성 필터 : 상단 가로 칩 */
  .dz-side { flex: none; width: 100%; align-items: flex-start; gap: 11px; }
  .dz-side__title {
    display: block;
    font-weight: 700; font-size: 20px; line-height: 1.4;   /* M-H2 */
    letter-spacing: -0.03em; color: #000;
  }
  .dz-filter { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  /* 초성 : 33×33 회색 원형 칩 */
  .dz-chip {
    display: flex; align-items: center; justify-content: center;
    width: 33px; height: 33px; padding: 0;
    border: 0; border-radius: 50%;
    background: #efefef;
    font-weight: 700; font-size: 14px; line-height: 1;       /* M-Sm4 */
    color: #C1C1C1;
  }
  /* '전체' : 넓은 pill */
  .dz-chip[data-initial="all"] { width: auto; padding: 0 18px; border-radius: 999px; }
  /* 활성: 보라색 배경 · 흰 글씨 (크기 유지) */
  .dz-chip.is-active { background: #734efc; color: #fff; }   /* KeyColor-2 */

  /* 그리드 : 2열 */
  .dz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .dz-card { max-width: 411px; gap: 16px; }
  .dz-empty { grid-column: 1 / -1; }
  .dz-card__thumb { aspect-ratio: 170 / 208; }
  .dz-card__name { font-size: 20px; line-height: 1.4; color: var(--g11); }   /* M-H2 */
  .dz-card__roman { font-weight: 500; font-size: 14px; line-height: 1.43; color: #555; } /* M-Sm3 */
}