/* ============================================================
   작품 허브 (repertoire.html) 전용 — 에디토리얼 작품 열
   공통 토큰·컴포넌트는 styles.css 참조
   ============================================================ */

.works { background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%); }
.works .container { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); }

.work { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.work--rev .work__media { order: 2; }
.work--rev .work__body { order: 1; }

.work__media { position: relative; margin: 0; }
.work__media a { display: block; border-radius: 0; overflow: hidden; box-shadow: 0 26px 56px -40px rgba(40,20,24,.5); }
.work__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .7s var(--ease); }
.work__media a:hover img { transform: scale(1.04); }
.work__media--poster img { aspect-ratio: 3/4; object-position: center top; }
.work__frame { position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--line-gold); border-radius: 0; z-index: -1; }
.work--rev .work__frame { inset: 20px 20px -20px -20px; }

.work__num { font-family: var(--font-en); font-style: normal; font-weight: 500; color: var(--gold); font-size: 1.05rem; letter-spacing: .08em; }
.work__eyebrow { margin-top: 8px; font-size: .72rem; letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 600; color: var(--muted); }
.work__title { margin-top: 12px; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.02em; }
.work__title .ko-sub { display: block; font-weight: 500; font-size: .52em; color: var(--muted); margin-top: 6px; }
.work__title .en { display: block; font-family: var(--font-en); font-style: italic; font-weight: 400; font-size: .48em; color: var(--muted-soft); margin-top: 8px; letter-spacing: .01em; }
.work__tag { margin-top: 16px; font-family: var(--font-display); color: var(--burgundy); font-size: clamp(1.02rem, 1.9vw, 1.18rem); font-weight: 500; text-wrap: pretty; }
.work__desc { margin-top: 14px; color: var(--muted); font-size: .99rem; line-height: 1.75; max-width: 560px; text-wrap: pretty; }
.work__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; }
.work-chip { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 500; letter-spacing: .02em; color: var(--burgundy); background: transparent; border: 1px solid rgba(122,20,32,.28); padding: 5px 13px; border-radius: 0; }
.work-chip--gold { color: var(--gold); background: transparent; border-color: var(--line-gold); }
.work__credit { margin-top: 14px; font-size: .84rem; color: var(--muted-soft); }
.work__actions { margin-top: 24px; }

@media (max-width: 860px) {
  .work, .work--rev { grid-template-columns: 1fr; gap: 22px; }
  .work--rev .work__media { order: 0; }
  .work--rev .work__body { order: 1; }
  .work__frame, .work--rev .work__frame { inset: 12px -12px -12px 12px; }
  .work__desc { max-width: none; }
}