/* ============================================================
   2026 SMUCD 졸업전시 · Works
   Figma: Desktop 5138:4975/5787 · Tablet 4955:3664 · Mobile 4990:3373/3448
   공용(리셋·토큰·헤더·푸터·내비)은 home.css 재사용 · 여기선 Works 레이아웃만
   Breakpoints: 기본=데스크탑(≥961) · ≤960=태블릿 · ≤390=모바일
   ============================================================ */

/* ============================================================
   BODY (Desktop: 좌 스튜디오/교수님 + 우 그리드)
   ============================================================ */
.wk-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 12%, 153px);   /* 153/1280 ≈ 12% */
  padding: 81px clamp(24px, 5.5vw, 80px);             /* 내비↔본문 81 (Figma) */
}

/* ---------- 좌측 : 스튜디오(융합/혁신) → 교수님 ---------- */
.wk-cats {
  flex: 0 0 172px;          /* 폭 고정 → 선택에 따라 우측 콘텐츠 위치 안 흔들림 */
  width: 172px;
  overflow: visible;        /* 긴 스튜디오/교수명은 gap 영역으로 넘침 */
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.wk-studio { display: flex; flex-direction: column; align-items: flex-start; }
.wk-studio__head {
  display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.wk-studio__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* 활성(클릭) 시 이름 앞 ▶ 폴리곤 (Figma 9478-6309) · 두 줄 높이에 맞춤 · 라운드 1.5px */
.wk-studio.is-active .wk-studio__head::before {
  content: ""; flex: 0 0 auto;
  margin-top: 7.5px;   /* 한글 줄(line-height 34) 중앙: (34-19)/2 */
  width: 16px; height: 19px;   /* 작게 (비율 21:25≈16:19) */
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 25'><path d='M3 3 L18 12.5 L3 22 Z' fill='%23171717' stroke='%23171717' stroke-width='4' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.wk-studio__ko {
  font-weight: 800; font-size: 26px; line-height: 34px;   /* D-H4 */
  letter-spacing: -0.02em; color: var(--g11); white-space: nowrap;
  transition: color 0.15s ease;
}
.wk-studio__en {
  font-weight: 700; font-size: 14px; line-height: 20px;
  letter-spacing: -0.02em; color: var(--g11); white-space: nowrap;
  transition: color 0.15s ease;
}
/* 다른 스튜디오 선택 시 비활성 스튜디오 흐리게 */
.wk-cats.has-active .wk-studio:not(.is-active) .wk-studio__ko,
.wk-cats.has-active .wk-studio:not(.is-active) .wk-studio__en { color: var(--g3); }

/* 교수님 목록 : 활성 스튜디오에서만 펼침 */
.wk-profs { display: none; flex-direction: column; gap: 14px; margin-top: 20px; }
.wk-studio.is-active .wk-profs { display: flex; }
.wk-prof {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-weight: 700; font-size: 20px; line-height: 28px;   /* 교수님 */
  letter-spacing: -0.02em; color: #c1c1c1; white-space: nowrap;
  transition: color 0.15s ease;
}
.wk-prof:hover,
.wk-prof.is-active { color: var(--g11); }
/* 교수님 클릭 시 이름 앞 마커 : 보라 원 안 흰 시계바늘 (교수별 각도) */
.wk-prof__arrow {
  display: none; flex: 0 0 auto; position: relative;
  width: 26px; height: 26px; border-radius: 50%; background: #8845FF;
}
.wk-prof__arrow::before {
  content: ""; position: absolute; left: 50%; bottom: 50%;
  width: 2px; height: 50%; background: #fff;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--hand, 0deg));
}
.wk-prof.is-active .wk-prof__arrow { display: block; }
/* 교수별 바늘 각도는 버튼 인라인 --hand 로 지정 (행 그룹화와 무관) */
.wk-profs__row { display: contents; }   /* 데스크탑: 행 그룹 무시 → 교수 1명씩 세로 */

/* ---------- 우측 콘텐츠 ---------- */
.wk-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 60px; }
/* 스튜디오 소개글 (그리드 위) */
.wk-desc {
  font-weight: 500; font-size: 18px; line-height: 30px;   /* D-Body1 */
  letter-spacing: -0.02em; color: var(--g10);
}

/* ---------- 작품 그리드 (4열) ---------- */
.wk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 35px;
}
.wk-card { display: flex; flex-direction: column; gap: 15px; cursor: pointer; }
.wk-card__thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px;
  position: relative; overflow: hidden;
}
.wk-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.wk-card:hover .wk-card__thumb img { transform: scale(1.06); }   /* 호버: 틀 안에서 살짝 확대 */
.wk-empty { grid-column: 1 / -1; color: var(--g6); padding: 40px 0; font-size: 16px; }
.wk-card__info { display: flex; flex-direction: column; min-width: 0; }
.wk-card__title {
  font-weight: 700; font-size: 18px; line-height: 23.4px;  /* D-Body2 */
  letter-spacing: -0.02em; color: var(--g10);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-card__designer {
  font-weight: 700; font-size: 14px; line-height: 20px;    /* D-Small2 */
  letter-spacing: -0.02em; color: var(--g6);
}

/* ============================================================
   ▍ < 880px  (모바일: 상단 스튜디오/교수님 블록 + 2열 그리드)
   ============================================================ */
@media (max-width: 879.98px) {
  /* 전체를 한 플로우로 펼쳐 순서 재배치 :
     [융합 | 혁신](좌우) → 설명 → 교수님 → 작품 그리드 */
  .wk-body { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 28px 16px; padding: 60px 20px; }
  .wk-cats, .wk-studio, .wk-main { display: contents; }

  /* 융합/혁신 헤더 : 상하 스택 · 이름만 가운데 · 폴리곤은 왼쪽
     (오른쪽에 동일 폭 투명 스페이서 ::after 를 둬서 이름이 정중앙) */
  .wk-studio__head {
    order: 1; width: 100%; flex: none;
    flex-direction: row; align-items: flex-start; justify-content: center; gap: 9px; text-align: center;
  }
  .wk-studio.is-active .wk-studio__head::before { width: 13px; height: 16px; margin-top: 6px; }
  .wk-studio.is-active .wk-studio__head::after {
    content: ""; flex: 0 0 auto; width: 13px; height: 16px;
  }
  .wk-studio__text { align-items: center; }
  .wk-studio__ko { font-size: 22px; line-height: 1.3; }
  .wk-studio__en { font-size: 13px; line-height: 1.4; }

  /* 설명 (헤더 아래, 전체폭) */
  .wk-desc { order: 2; width: 100%; font-size: 16px; line-height: 1.6; margin: 0; }

  /* 교수님 (설명 아래, 전체폭 · 활성만) · 좌측정렬 · 지정 줄바꿈(행 그룹) */
  .wk-profs { order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 0; }
  .wk-profs__row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px; }
  .wk-prof { font-size: 16px; line-height: 1.4; text-align: left; }
  .wk-prof__arrow { width: 18px; height: 18px; }   /* 모바일: 아이콘 작게(줄높이 내) */

  /* 작품 그리드 (맨 아래, 전체폭 2열) */
  .wk-grid { order: 4; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; margin-top: 12px; }
  .wk-card { gap: 16px; }
  .wk-card__thumb { aspect-ratio: 1 / 1; border-radius: 10px; }
  .wk-card__title { font-size: 20px; line-height: 1.4; color: var(--g10); }        /* M-H2 */
  .wk-card__designer { font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--g6); } /* M-B1 */
}