/* =============================================================================
 * woosungjung.com — components.css
 * 두 페이지 이상에서 반복되는 조각. 페이지 CSS 는 여기 있는 것을 다시 만들지 말 것.
 *
 *   .row / .badge     목록 한 줄 (home · works · teaching) — `.bg` 는 줄 뒤에 깔리는 그림
 *   .tags .tag        악기·분류 칩 (home · teaching · works 모달)
 *   .tl               연표 (home · about · teaching)
 *   .box              CTA·발행물 카드 (home · teaching · about)
 *   .link             본문 링크 (카드 안팎 공용)
 *   .more             더보기 링크
 *   .pull             인용구 (about · teaching)
 *   .todo             미확정 표시 (개발 중에만 사용)
 *   .need             아직 못 받은 사진 자리 (about 악기카드 · teaching 슬라이더 — 개발 중에만)
 * ========================================================================== */

/* ---------- 목록 한 줄 ---------- */
.list { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: var(--row-date-w, 112px) 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: padding-left .18s;
}
a.row:hover { padding-left: 8px; }
/* 목록 마지막 줄은 밑줄 제거 — 섹션 경계와 이중선이 생긴다 */
.row:last-child { border-bottom: none; }

.row .date {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: .02em;
}
.row .t { font-size: 16px; }
.row .v { font-size: 13px; color: var(--sub); margin-top: 3px; }
.row .i { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- 줄 뒤에 깔리는 그림 (works 목록 · 메인 Selected work) ----------
   영상이나 사진이 붙은 줄에만 깔린다 (`has-bg`. 무엇을 깔지는 `WorkModel::backdrop()`).

   **읽는 것을 방해하지 않는 것이 전부다.** 그래서 두 가지를 건다 —
     · 왼쪽은 마스크로 지운다. 날짜·제목이 앉는 자리라 그림이 들어오면 글자가 흔들린다
     · 평소에는 거의 안 보이는 세기(.12)로 두고, 마우스를 올린 줄만 밝아진다(.34)
   `isolation: isolate` 는 `z-index: -1` 이 줄 밖(페이지 배경 뒤)까지 내려가지 않게 가둔다. */
.row.has-bg { position: relative; isolation: isolate; }
.row .bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 36%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 36%, #000 100%);
}
.row .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .12;
  filter: grayscale(.55) brightness(.8);
  transition: opacity .35s, filter .35s;
}
.row:hover .bg img,
.row:focus-visible .bg img {
  opacity: .34;
  filter: grayscale(0) brightness(1);
}

/* 좁은 화면은 글이 줄 폭을 거의 다 쓴다 — 그림을 더 오른쪽으로 밀고 한 단계 더 연하게.
   터치에는 hover 가 없어서 **여기 보이는 세기가 전부**다 */
@media (max-width: 780px) {
  .row .bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 45%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0, transparent 45%, #000 100%);
  }
  .row .bg img { opacity: .16; }
}

/* ---------- 배지 ---------- */
.badge {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #A8A49B;
  border: 1px solid #3C3C41;
  border-radius: 3px;
  padding: 4px 10px;
  white-space: nowrap;
}
.badge.is-director {
  color: var(--dan-lt);
  border-color: rgba(217, 96, 74, .55);
}

/* ---------- 칩 (악기 등) ---------- */
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--cheong-lt);
  border: 1px solid rgba(90, 165, 149, .45);
  border-radius: 12px;
  padding: 4px 13px;
}
.tag.sm { font-size: 11px; border-radius: 10px; padding: 2px 10px; }

/* ---------- 연표 ---------- */
.tl { border-top: 1px solid var(--line); }
.tl .e {
  display: flex;
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.tl .e:last-child { border-bottom: none; }
.tl .e span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--dimmer);
  flex: 0 0 52px;
  padding-top: 3px;
}
.tl .e b { font-weight: 400; font-size: 14px; display: block; }
.tl .e i {
  font-style: normal;
  font-size: 12px;
  color: var(--sub);
  display: block;
  margin-top: 3px;
  line-height: 1.65;
}
/* 진행 중 항목 — 배경·라인 없이 글자 색만 */
.tl .e.now span {
  color: var(--dan-lt);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tl .e.now b { color: var(--hanji); }
.tl .e.now i { color: #A8A49B; }

/* ---------- 라벨 + 설명 목록 ---------- */
.proof {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 22px;
}
.proof .p { display: flex; gap: 16px; font-size: 13px; padding: 7px 0; }
.proof .p span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  flex: 0 0 78px;
}

/* ---------- 카드 ---------- */
.box {
  background: var(--surface);
  border-radius: 10px;
  padding: 30px 32px;
}
.box .k {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cheong-lt);
  margin-bottom: 11px;
}
.box h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.box p { font-size: 13px; color: var(--sub); line-height: 1.85; }
/* ---------- 본문 링크 (카드 안팎 공용) ---------- */
.link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--dan-lt);
  border-bottom: 1px solid rgba(217, 96, 74, .45);
  padding-bottom: 2px;
}
.link:hover { border-bottom-color: var(--dan-lt); }

/* ---------- 더보기 ---------- */
.more {
  display: inline-block;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dan-lt);
  border-bottom: 1px solid rgba(217, 96, 74, .4);
  padding-bottom: 3px;
}
.more:hover { border-bottom-color: var(--dan-lt); }

/* ---------- 인용 ---------- */
.pull {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 31px;
  line-height: 1.42;
  max-width: 860px;
  padding-left: 26px;
  border-left: 1px solid rgba(217, 96, 74, .5);
}
.pull cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  color: var(--sub);
  letter-spacing: .06em;
  margin-top: 20px;
}

/* ---------- 빈 상태 ---------- */
.empty {
  color: var(--ghost);
  font-size: 14px;
  font-style: italic;
}
.none {
  padding: 70px 0;
  text-align: center;
  color: var(--ghost);
  font-size: 14px;
}

/* ---------- 미확정 표시 (개발 중에만) ---------- */
.todo {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #E0A93A;
  border: 1px dashed rgba(224, 169, 58, .5);
  border-radius: 3px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: 2px;
}
/* ---------- 아직 못 받은 사진 자리 (개발 중에만) ----------
   무엇을 찍어 와야 하는지 적어 두는 칸이다. 공개 상태에서는 렌더 자체를 하지 않는다.
   감싸는 상자(비율·배경)는 페이지가 정하고, 여기서는 점선 칸의 생김새만 정한다. */
.need {
  text-align: center;
  margin: 20px;
  padding: 22px 16px;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.8;
  border: 1px dashed #34343A;
  border-radius: 6px;
}
.need i { font-style: normal; color: #B08D3F; display: block; margin-top: 8px; }

.todoblock {
  border: 1px dashed rgba(224, 169, 58, .4);
  border-radius: 6px;
  padding: 16px 18px;
  font-size: 13px;
  color: #B08D3F;
  line-height: 1.8;
  margin-top: 18px;
}

/* ---------- 사진 슬라이더 ----------
   `/teaching` 의 사진 두 곳과 `/works` 상세의 공연 사진이 같이 쓴다.
   두 번째 페이지에서 필요해졌으므로 pages/teaching.css 에서 여기로 올렸다 (CSS 3층 규칙).
   동작은 `assets/js/common.js` — 없어도 첫 장은 보인다.

   비율은 페이지가 정한다: `--sl-ratio` (teaching 4/3 · works 3/2) */
.slider {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
  outline: none;
  --sl-ratio: 4 / 3;
}
.slider:focus-visible { box-shadow: 0 0 0 2px rgba(90, 165, 149, .55); }

.slider .track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  /* 세로 스크롤은 페이지에 넘기고 가로만 우리가 쓴다 (터치) */
  touch-action: pan-y;
}
/* 칸마다 position — 사진 설명(`.cap`)이 **그 칸 안에** 얹히게. 없으면 슬라이더 전체 기준이 되어
   두 번째 사진의 설명이 첫 장 위에 겹친다 */
.slider .sl { flex: 0 0 100%; min-width: 0; position: relative; }
.slider .fr {
  aspect-ratio: var(--sl-ratio);
  background: #101012;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slider .fr img { width: 100%; height: 100%; object-fit: cover; }

/* 끌고 있는 동안은 손가락을 따라온다 — 애니메이션을 끄지 않으면 끌기가 느리게 따라온다 */
.slider.grab .track { cursor: grab; }
.slider.dragging .track { transition: none; }

/* 누르는 순간 주먹으로 바꾼다. `dragging`(8px 이상 끌었을 때)을 기다리지 않는다 —
   눌렀는데 커서가 그대로면 잡힌 것인지 알 수 없다 */
.slider.pressing .track,
.slider.pressing .track img,
.slider.dragging .track,
.slider.dragging .track img { cursor: grabbing; }

/* 원본을 아직 못 받은 칸 — 준비중일 때만 렌더된다 */
/* 점선 칸 자체는 위 `.need` 가 그린다 — 여기서는 슬라이더 안에서의 여백만 */
.slider .need { margin: 18px; padding: 22px; }

/* 사진 설명 — 있는 사진만 (works 상세) */
.slider .cap {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  font-size: 12px;
  color: rgba(237, 231, 218, .82);
  background: linear-gradient(to top, rgba(14, 14, 16, .82), rgba(14, 14, 16, 0));
  pointer-events: none;
}
.slider:has(.dots) .cap { padding-bottom: 30px; }

.slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(14, 14, 16, .62);
  color: var(--hanji);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
}
.slider .pv { left: 10px; }
.slider .nx { right: 10px; }
.slider:hover .nav,
.slider:focus-within .nav { opacity: 1; }
.slider .nav:hover { background: rgba(14, 14, 16, .85); }

.slider .dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
  display: flex;
  gap: 7px;
  justify-content: center;
}
.slider .dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(237, 231, 218, .32);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.slider .dots button[aria-selected="true"] {
  background: var(--hanji);
  width: 16px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .slider .track { transition: none; }
}

@media (max-width: 780px) {
  /* 터치에는 hover 가 없다 — 좌우 버튼을 늘 보이게 */
  .slider .nav { opacity: 1; }
}

@media (max-width: 780px) {
  .row { grid-template-columns: 1fr; gap: 5px; }
  .row .date { order: -1; }
  .row .badge { justify-self: start; margin-top: 6px; }
  .tl .e { flex-direction: column; gap: 3px; }
  .tl .e span { flex: none; padding-top: 0; }
  .proof .p {
    flex-direction: column;
    gap: 3px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(44, 44, 48, .6);
  }
  .proof .p:last-child { border-bottom: none; }
  .proof .p span { flex: none; }
  .pull { font-size: 23px; padding-left: 18px; }
}