/* =============================================================================
 * woosungjung.com — pages/works.css
 * 활동기록 목록 · 상세.
 * 공통 조각은 여기 다시 만들지 않는다 —
 *   .row .badge .tag .list → components.css
 *   .head .lead · section  → layout.css
 * ========================================================================== */

/* ---------- 필터 ----------
   목록이 77건이라 스크롤해도 필터가 따라와야 한다 (nav 높이 아래로 붙인다) */
.filters {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  position: sticky;
  top: var(--nav-h);
  background: var(--ink);
  z-index: 5;
}
.frow { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; flex-wrap: wrap; }

/* 접기 단추 — 모바일에서만, 그리고 JS 가 `.filters.fold` 를 붙였을 때만 나온다 */
.ftoggle { display: none; }

.frow > b {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  flex: 0 0 84px;
}

/* 칩은 링크다 — 눌린 상태가 주소에 남는다 */
.chip {
  font-size: 12px;
  color: var(--sub);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 4px 10px;
  line-height: 1.5;
  transition: color .15s, border-color .15s;
}
a.chip:hover { color: var(--hanji); }
.chip[aria-pressed="true"] { color: var(--hanji); border-color: var(--line); background: var(--surface); }
.chip.on-role[aria-pressed="true"] { color: var(--dan-lt); border-color: rgba(217, 96, 74, .5); }
.chip.on-inst[aria-pressed="true"] { color: var(--cheong-lt); border-color: rgba(90, 165, 149, .5); }

/* 건수 — 지금 걸린 필터에서 몇 건인지. 눌러 보기 전에 보인다 */
.chip i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-left: 6px; }
.chip[aria-pressed="true"] i { color: inherit; opacity: .75; }

/* 지금 0 건인 칩 — 뷰가 링크가 아닌 span 으로 내보낸다 (눌러도 갈 곳이 없다) */
.chip.z { color: #46464B; }
.chip.z i { color: inherit; }

.meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sub);
}
.meta a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.meta a:hover { color: var(--hanji); }

/* ---------- 연도 구분 ---------- */
.yr {
  font-family: var(--serif);
  font-size: 34px;
  color: #44444A;
  padding: 30px 0 6px;
  border-bottom: 1px solid var(--line);
}

/* 목록이 `section` 안에 있지 않아 아래 여백이 없다 — 푸터와 붙지 않게 띄운다.
   (다른 페이지는 `section { padding: 54px 0 }` 가 알아서 만들어 준다) */
.page-works .wrap { padding-bottom: 72px; }

/* 목록 줄은 components.css 의 `.row` 를 쓰고, 여기서 폭·꼬리표만 손본다 */
.page-works .row { --row-date-w: 118px; }
.page-works .row .i { display: flex; gap: 6px; flex-wrap: wrap; }
.page-works .row .i span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--cheong-lt);
  border: 1px solid rgba(90, 165, 149, .45);
  border-radius: 10px;
  padding: 2px 10px;
}
a.row.hit:hover .t { color: #fff; }
/* 줄 뒤에 깔리는 그림(`.row .bg`)은 메인 Selected work 와 같이 쓴다 → components.css */

/* 영상·사진 보유 표시 — 뷰가 제목 뒤(at-title)·날짜 뒤(at-date) 두 벌을 내보낸다.
   폭에 따라 한 벌만 보인다 (모바일 규칙은 아래 반응형에) */
.mk { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; transform: translateY(2px); }
.mk.at-date { display: none; }
.mk i { display: block; color: #5A5A60; transition: color .15s; }
.mk svg { width: 14px; height: 14px; display: block; }
.row:hover .mk .v { color: var(--dan-lt); }
.row:hover .mk .p { color: var(--cheong-lt); }

.badge.solo { color: var(--hanji); border-color: rgba(237, 231, 218, .5); background: rgba(237, 231, 218, .06); }
.badge.inst { color: var(--cheong-lt); border-color: rgba(90, 165, 149, .5); }

/* =============================================================================
 * 상세 — 모달과 페이지가 같은 조각을 쓴다
 * ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.overlay[hidden] { display: none; }
.overlay-back { position: fixed; inset: 0; background: rgba(8, 8, 9, .86); }

.sheet {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  max-width: 760px;
  width: 100%;
  padding: 44px 48px 48px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3A3A3E var(--surface);
}
.sheet::-webkit-scrollbar { width: 10px; }
.sheet::-webkit-scrollbar-track { background: var(--surface); }
.sheet::-webkit-scrollbar-thumb { background: #33333A; border-radius: 5px; border: 2px solid var(--surface); }

/* 상세 페이지에서는 떠 있는 종이가 아니라 그냥 본문이다 */
.sheet.flat { max-height: none; overflow: visible; background: none; padding: 0; max-width: 760px; }

.sheet .x {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  color: var(--sub);
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}
.sheet .x:hover { color: var(--hanji); }

.work-detail { padding-bottom: 40px; }
.crumb { padding: 40px 0 26px; font-size: 12px; color: var(--sub); }
.crumb a:hover { color: var(--hanji); }

.mdate { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--dan-lt); letter-spacing: .04em; }
.sheet h1,
.sheet h2 { font-family: var(--serif); font-weight: 300; font-size: 36px; line-height: 1.15; margin: 10px 0 8px; }
.mplace { color: var(--sub); font-size: 14px; }
.mtags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.mnote { font-size: 14px; color: var(--sub); margin-top: 24px; line-height: 1.9; }

/* ---------- 영상 ---------- */
.vid { margin-top: 26px; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 6px; overflow: hidden; }
.vid iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 누를 때까지 iframe 을 심지 않는다 — 섬네일 + 재생 단추만 */
.facade { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.facade img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); transition: filter .25s; }
.facade:hover img { filter: brightness(.92); }
.facade .pb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(237, 231, 218, .7);
}
.facade .pb::after {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--hanji);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.facade:hover .pb { border-color: var(--dan); }
.facade:hover .pb::after { border-left-color: var(--dan); }

/* ---------- 곡목 ---------- */
.plist { margin-top: 16px; border-top: 1px solid var(--line); }
.pc {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 4px;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--hanji);
}
button.pc { cursor: pointer; }
.pc:last-child { border-bottom: none; }
button.pc:hover .pn,
.pc[aria-pressed="true"] .pn { color: var(--dan); }
/* 지금 보고 있는 곡 — 눌러도 하는 일이 없으니 손가락 커서를 주지 않는다 */
button.pc[aria-pressed="true"] { cursor: default; }
.pc .pn { font-size: 14px; flex: 1; }
.pc .pi { font-size: 11px; font-weight: 400; color: var(--cheong-lt); letter-spacing: .06em; }
.pc .pv { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
/* 영상이 없는 곡 — 누를 수 없다는 걸 색으로만 알린다 */
.pc.off .pn { color: var(--sub); }

/* ---------- 사진 ----------
   슬라이더 조각은 components.css 것을 그대로 쓴다 (teaching 과 같은 것).
   여기서 정하는 것은 자리와 비율뿐 — 공연 사진은 3:2 로 들어온다 */
.mph { margin-top: 26px; --sl-ratio: 3 / 2; }

/* ---------- 함께한 연주자 ---------- */
.mwith { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.mwith b {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.mwith li { font-size: 13px; color: var(--sub); padding: 3px 0; }

/* 모달이 떠 있는 동안 뒤 화면은 스크롤하지 않는다 */
body.sheet-on { overflow: hidden; }

/* ---------- 반응형 ---------- */
@media (max-width: 780px) {
  .page-works .wrap { padding-bottom: 48px; }
  .filters { position: static; }
  .frow > b { flex: 0 0 100%; }

  /* 제목이 두 줄로 접히면 아이콘이 문장 한가운데 끼어 버린다 → 날짜 뒤로 옮긴다 */
  .mk.at-title { display: none; }
  .mk.at-date { display: inline-flex; margin-left: 9px; transform: translateY(3px); }
  .mk.at-date svg { width: 13px; height: 13px; }

  /* 필터 네 줄이 첫 화면을 다 먹는다 — 접어 두고 필요할 때 편다 */
  .filters.fold { padding: 0; }
  .filters.fold .ftoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sub);
  }
  .filters.fold .ftoggle i {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .filters.fold.is-open .ftoggle { color: var(--hanji); }
  .filters.fold.is-open .ftoggle i { transform: translateY(1px) rotate(-135deg); }
  .filters.fold .fbody { display: none; }
  .filters.fold.is-open .fbody { display: block; padding-bottom: 12px; }
  .yr { font-size: 27px; }
  .overlay { padding: 0; align-items: stretch; }
  .sheet { border-radius: 0; max-height: 100vh; padding: 56px 20px 40px; }
  .sheet h1,
  .sheet h2 { font-size: 27px; }

  /* 곡목 — 좁은 폭에서 제목이 세 줄로 접히고 악기가 옆에 매달린다.
     제목을 한 줄 통째로 쓰게 하고, 악기·video 는 그 아래 오른쪽에 모은다 */
  .pc { flex-wrap: wrap; row-gap: 5px; }
  .pc .pn { flex: 0 0 100%; }
  .pc .pi { margin-left: auto; }
  .sheet.flat { padding: 0; }
}