/* =========================================================
   포트폴리오 페이지 — home.css · sub.css 위에 얹어 사용
   ========================================================= */

/* ---------- 카테고리 필터 (헤더 아래 고정) ---------- */
.filter-bar {
  position: sticky;
  top: var(--hd-h);
  z-index: 40;
  height: var(--jump-h);
  margin-bottom: clamp(48px, 6vw, 80px);
  background: rgba(250, 250, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
}
.filter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 var(--gutter);
  overflow-x: auto;            /* 모바일: 가로 스크롤 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter::-webkit-scrollbar { display: none; }
.filter button {
  flex: none;
  white-space: nowrap;
  padding: 7px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.filter button:hover { background: var(--ink); color: var(--bg); }
.filter button[aria-pressed="true"] {
  background: var(--point);
  border-color: var(--point);
  color: var(--on-point);
}
.filter .cnt {
  font-family: var(--display);
  font-size: 11px;
  opacity: 0.6;
  margin-left: 2px;
}

/* ---------- 카드 리스트 ---------- */
.works {
  display: grid;
  gap: clamp(72px, 10vw, 140px);
  padding: 0 var(--gutter) clamp(96px, 12vw, 160px);
}
.work[hidden] { display: none; }

/* 카드가 내용물(썸네일 줄 등) 때문에 화면 폭보다 넓어지지 않도록 — 그리드 항목의 최소 폭을 0으로 */
.works { grid-template-columns: minmax(0, 1fr); }
.work { min-width: 0; }

/* 카드 사진: 자르지 않고 전체가 보이게, 비율 유지하며 화면 폭에 맞춰 축소 (세로가 아주 긴 사진은 높이만 제한하고 여백 처리) */
.work-img {
  overflow: hidden;
  background: #141414;
  border: 2px solid var(--line);
}
.work-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(80vh, 760px);
  object-fit: contain;
  margin: 0 auto;
}

.work-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding-top: clamp(20px, 2.4vw, 32px);
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.work-no { color: var(--point-ink); }
.work-cat {
  padding: 3px 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.work-title {
  font-weight: 900;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 아주 긴 영문 단어도 화면 폭 안에서 줄바꿈 */
}
.work-sub {
  margin-top: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--mute);
}

.work-text { padding-top: 6px; }
.work-desc {
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.85;
  word-break: keep-all;
}
/* 제목 안에서 끊기면 안 되는 묶음 (예: <청량주의보>) */
.nowrap { white-space: nowrap; }

/* 출연 라인업 줄 */
.work-lineup {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  word-break: keep-all;
}
.work-lineup b {
  margin-right: 8px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--point-ink);
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
/* 하단 태그 칩 = 행사 분류 (여러 개 가능, 한글) — 상단 검정 배지(대표 카테고리)와 구분되도록 테두리형 */
.work-tags li {
  padding: 5px 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.work-tags li::before { content: "#"; margin-right: 2px; color: var(--point-ink); }

/* ---------- 사진 여러 장 카드 (갤러리) ----------
   스와이프(가로 스크롤 스냅) + 좌우 버튼 + 썸네일. 세로·가로 사진이 섞여도 잘리지 않도록 contain */
.work-gallery { position: relative; background: #141414; aspect-ratio: 16 / 8; }
.g-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.g-track::-webkit-scrollbar { display: none; }
.g-track:focus-visible { outline: 3px solid var(--point); outline-offset: -3px; }
.work-gallery .g-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  scroll-snap-align: start;
}
.work:hover .work-gallery img { transform: none; }

.g-nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  background: rgba(250, 250, 247, 0.92);
  border: 2px solid var(--line);
  font-size: 20px;
  font-weight: 700;
  transition: background 0.3s, opacity 0.3s;
}
.g-prev { left: 16px; }
.g-next { right: 16px; }
.g-nav:hover { background: var(--point); }
.g-nav:disabled { opacity: 0; pointer-events: none; }

.g-count {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.g-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.g-thumbs::-webkit-scrollbar { display: none; }
.g-thumbs button {
  flex: none;
  width: 96px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: opacity 0.3s, border-color 0.3s;
}
.g-thumbs button:hover { opacity: 0.85; }
.g-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--point); }
.g-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 준비 중 카드: 사진 흐리게, 제목 회색 */
.work-pending .work-img img { opacity: 0.5; }
.work-pending .work-title { color: var(--mute); }

.works-empty {
  padding: 48px 0;
  border-top: 2px solid var(--line);
  font-weight: 700;
  color: var(--mute);
}

/* ---------- 반응형 ---------- */
@media (max-width: 760px) {
  .filter button { padding: 6px 14px; font-size: 13px; }
  .filter {
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .work-gallery { aspect-ratio: 4 / 3; }
  .work-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .g-nav { width: 40px; height: 40px; margin-top: -20px; font-size: 17px; }
  .g-prev { left: 10px; }
  .g-next { right: 10px; }
  .g-thumbs button { width: 64px; height: 44px; }
}