/* ══════════════════════════════════════════════════════════
   수강생 작품 — 피그마 3462:169141 「수강생 작품 - 데스크탑」 1920x5043
     제목1 y134 (x288 w1344) · 설명1 y448 (x211 w1498 h102)
     가로 카드 480.107x270.059 + 캡션 52.5 · 3열 · 간격 22.5
     세로 쇼릴 375x666.66 + 캡션 47.5 · 2열 · 간격 20 (가운데)
     제목2 y2274 (x396 w1128) · 설명2 y2588 (x645 w631)
     릴스 427.594x760.16 + 캡션 57 · 4열 · 간격 24
   모든 제목·설명이 x중심 960 — 전부 가운데 정렬이다.
   ══════════════════════════════════════════════════════════ */
.wk-sec{ --u:var(--pagew); background:var(--black) }
.wk-sec .wrap{ width:100%; margin-inline:auto }

.wk-films{ padding:calc(var(--u) * 134/1920) 0 0 }
.wk-talk { padding:calc(var(--u) * 146/1920) 0 calc(var(--u) * 228/1920) }

/* 제목 — 시안은 TLAB MixCoffee 200px #2CFF05 (유료 폰트라 글자를 SVG 외곽선으로 바꿔 쓴다).
   잉크폭 = viewBox/1000 x 200 :  제목1 1336.0 · 제목2 1117.0  (시안 노드폭 1344/1128 과 일치) */
.wk-h{
  margin:0 auto;
  line-height:0;
  text-align:center;
  color:var(--green);
}
.wk-h svg.tlab{
  display:block; margin-inline:auto; height:auto;
  color:var(--green); fill:currentColor;
}
.wk-h svg.wt1{ width:calc(var(--u) * 1336/1920) }
.wk-h svg.wt2{ width:calc(var(--u) * 1117/1920) }
/* 설명문 — 시안 3462:169296 : Inter 28px #2CFF05, 굵은 줄 + 빈 줄 + 보통 줄, 전부 한 줄
   Inter 파일이 없어 Latin 은 Helvetica/Arial 로 받는다(한글은 어차피 Pretendard). */
.wk-lede{
  width:auto;
  margin:calc(var(--u) * 74/1920) auto 0;
  font-family:Inter,Helvetica,Arial,"Pretendard Variable",Pretendard,sans-serif;
  font-size:calc(var(--u) * 28/1920);
  line-height:1.35;
  font-weight:400;
  color:var(--green);
  text-align:center;
  white-space:nowrap;
}
.wk-lede b{
  display:block;
  font-family:inherit; font-weight:700; font-size:inherit;
  letter-spacing:0; color:inherit;
  margin-bottom:1.35em;          /* 시안의 빈 줄 */
}

/* ── 카드 격자 ───────────────────────────────────────────── */
.wk-grid{
  list-style:none; margin:0 auto; padding:0;
  display:grid; justify-content:center;
}
.wk-grid-16x9{
  width:calc(var(--u) * 1485.33/1920);
  margin-top:calc(var(--u) * 112/1920);
  grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 22.5/1920);
}
.wk-grid-9x16{
  width:calc(var(--u) * 770/1920);
  margin-top:calc(var(--u) * 75/1920);
  grid-template-columns:repeat(2, 1fr);
  gap:calc(var(--u) * 20/1920);
}
.wk-grid-reels{
  width:calc(var(--u) * 1782.4/1920);
  margin-top:calc(var(--u) * 122/1920);
  grid-template-columns:repeat(4, 1fr);
  gap:calc(var(--u) * 24/1920);
}

.wk-card{ min-width:0 }
.wk-btn{
  display:block; width:100%; padding:0; margin:0;
  background:none; border:0; text-align:left; cursor:pointer;
  color:inherit; font:inherit;
}
/* 카드 틀 — 시안 3462:168861 : 검정 바탕 + #5E5E5E 1px 테두리 + radius 24 */
.wk-thumb{
  position:relative; display:block; width:100%;
  overflow:hidden;
  background:#000;
  border:1px solid #5E5E5E;
  border-radius:calc(var(--u) * 24/1920);
}
.wk-grid-16x9 .wk-thumb{ aspect-ratio:480.107/270.059 }
.wk-grid-9x16 .wk-thumb,
.wk-grid-reels .wk-thumb{ aspect-ratio:375/666.66 }
.wk-thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.wk-btn:hover .wk-thumb img{ transform:scale(1.04) }

/* 아직 영상이 안 들어온 자리 — 채널로 보낸다 */
.wk-ph{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, #1b1b1b 0%, #101010 60%, #171717 100%);
}
.wk-ph::after{
  content:"영상 준비 중";
  position:absolute; left:0; right:0; bottom:12%;
  text-align:center; font-size:calc(var(--u) * 22/1920);
  font-weight:600; color:#5a5a5a; letter-spacing:-.02em;
}

.wk-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  /* 시안 3462:168863 : 초록 사각형(모서리 둥글지 않다) 103.5x96, 글자 #06150A 33px */
  width:calc(var(--u) * 103.5/1920); height:calc(var(--u) * 96/1920);
  display:flex; align-items:center; justify-content:center;
  padding-left:calc(var(--u) * 7.5/1920);
  font-size:calc(var(--u) * 33/1920); line-height:1; color:#06150A;
  background:rgba(79,232,46,.92); border-radius:0;
  transition:background .18s, transform .18s;
}
.wk-btn:hover .wk-play{ background:#4FE82E; transform:translate(-50%,-50%) scale(1.06) }

/* 시안 3462:168866 : 어두운 반투명 알약에 초록 글씨 (초록 바탕이 아니다) */
.wk-tag{
  position:absolute; left:calc(var(--u) * 17/1920); top:calc(var(--u) * 17/1920);
  padding:calc(var(--u) * 7.5/1920) calc(var(--u) * 15/1920);
  font-size:calc(var(--u) * 17/1920); font-weight:800;
  letter-spacing:calc(var(--u) * 0.825/1920);
  color:#4FE82E; background:rgba(13,13,13,.85);
  border-radius:calc(var(--u) * 9/1920);
}

.wk-cap{
  display:block;
  /* 시안 3462:168869 : 최소높이 57, 위 여백 18, Pretendard Bold 20 / 27.338, #EAEAEA */
  min-height:calc(var(--u) * 57/1920);
  padding:calc(var(--u) * 18/1920) calc(var(--u) * 3/1920) 0;
  font-size:calc(var(--u) * 20/1920);
  line-height:calc(var(--u) * 27.338/1920);
  font-weight:700; letter-spacing:-.02em;
  color:#EAEAEA; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;   /* 두 줄로 흐르지 않게 */
}
.wk-btn:hover .wk-cap{ color:#fff }

/* ── 재생 모달 ───────────────────────────────────────────── */
.wk-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88); padding:4vmin;
}
.wk-modal[hidden]{ display:none }
.wk-frame{ width:min(1280px, 92vw); aspect-ratio:16/9; background:#000 }
.wk-modal.is-vert .wk-frame{ width:auto; height:min(88vh, 1000px); aspect-ratio:9/16 }
.wk-frame iframe{ width:100%; height:100%; border:0; display:block }
.wk-close{
  position:absolute; right:3vmin; top:3vmin;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer;
}
.wk-close:hover{ background:rgba(255,255,255,.24) }

/* ══ 모바일 — 피그마 3462:171193 ══════════════════════════ */
@media (max-width:820px){
  .wk-sec{ --m:100vw }
  .wk-films{ padding:calc(var(--m) * 34/360) 0 0 }
  .wk-talk { padding:calc(var(--m) * 44/360) 0 calc(var(--m) * 52/360) }
  .wk-h svg.wt1{ width:calc(var(--m) * 266/360) }   /* 모바일 시안 잉크폭 실측 */
  .wk-h svg.wt2{ width:calc(var(--m) * 237/360) }
  /* 모바일 시안은 설명문이 두어 줄로 흐른다 — 한 줄 강제는 데스크탑에서만 */
  .wk-lede{
    width:calc(var(--m) * 316/360);
    margin-top:calc(var(--m) * 14/360);
    font-size:calc(var(--m) * 10.5/360);
    line-height:1.5;
    white-space:normal;
  }
  .wk-lede b{ margin-bottom:1.35em }

  .wk-grid-16x9{
    width:calc(var(--m) * 320/360);
    margin-top:calc(var(--m) * 24/360);
    grid-template-columns:1fr;
    gap:calc(var(--m) * 18/360);
  }
  .wk-grid-9x16{
    width:calc(var(--m) * 320/360);
    margin-top:calc(var(--m) * 18/360);
    gap:calc(var(--m) * 12/360);
  }
  .wk-grid-reels{
    width:calc(var(--m) * 320/360);
    margin-top:calc(var(--m) * 20/360);
    grid-template-columns:repeat(2, 1fr);
    gap:calc(var(--m) * 12/360);
  }
  .wk-play{
    width:calc(var(--m) * 44/360); height:calc(var(--m) * 40/360);
    font-size:calc(var(--m) * 16/360); border-radius:calc(var(--m) * 7/360);
  }
  .wk-tag{
    left:calc(var(--m) * 8/360); top:calc(var(--m) * 8/360);
    padding:calc(var(--m) * 3/360) calc(var(--m) * 7/360);
    font-size:calc(var(--m) * 9/360); border-radius:calc(var(--m) * 5/360);
    letter-spacing:0;
  }
  .wk-thumb{ border-radius:calc(var(--m) * 12/360) }
  .wk-play{ padding-left:calc(var(--m) * 2/360) }
  .wk-cap{
    min-height:0;
    padding:calc(var(--m) * 8/360) calc(var(--m) * 2/360) 0;
    font-size:calc(var(--m) * 9.6/360);   /* 두 열 카드 폭에 한 줄로 들어가는 크기 */
    line-height:1.4;
  }
  .wk-ph::after{ font-size:calc(var(--m) * 10/360) }
}

/* ═══════════════════════════════════════════════════════════
   FVA 유튜브 최신 영상 (works.html 하단, <details>)
   기존 규칙은 건드리지 않는다 — 여기부터 전부 새 선택자(.wkyt-*)다.
   접힌 상태에서는 summary 한 줄만 차지하므로 위쪽 작품 영역이 밀리지 않는다.
   ═══════════════════════════════════════════════════════════ */
.wkyt{
  width:100%;
  max-width:1200px;   /* --pagew 로 환산하면 360 화면에서 225px 로 눌린다 */
  margin:clamp(28px,3vw,58px) auto clamp(40px,4vw,80px);
  padding-inline:clamp(16px,4vw,32px);
  color:var(--white,#FDFDFD);
}
.wkyt-sum{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.6em;
  padding:clamp(12px,1.1vw,20px) clamp(14px,1.3vw,24px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-size:clamp(13px,1.05vw,20px);font-weight:700;letter-spacing:-.02em;
  transition:border-color .2s,color .2s;
}
.wkyt-sum::-webkit-details-marker{display:none}
.wkyt-sum::after{
  content:"▾";margin-left:auto;font-size:.9em;
  transition:transform .2s;color:var(--green,#2CFF05);
}
.wkyt[open] .wkyt-sum::after{transform:rotate(180deg)}
.wkyt-sum:hover{border-color:var(--green,#2CFF05);color:var(--green,#2CFF05)}
.wkyt-cnt{
  font-size:.8em;font-weight:800;color:#000;
  background:var(--green,#2CFF05);
  border-radius:999px;padding:.1em .6em;
}

.wkyt-list{
  display:grid;gap:clamp(10px,1vw,18px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(14px,1.4vw,26px);
}
.wkyt-item{min-width:0}
.wkyt-link{
  display:grid;grid-template-columns:clamp(84px,9vw,168px) minmax(0,1fr);
  gap:clamp(10px,1vw,18px);align-items:center;
  padding:clamp(8px,.7vw,14px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:clamp(8px,.7vw,14px);
  transition:border-color .2s,background .2s;
}
.wkyt-link:hover{border-color:var(--green,#2CFF05);background:rgba(44,255,5,.05)}
.wkyt-thumb{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:clamp(5px,.4vw,9px);display:block;
}
.wkyt-body{display:block;min-width:0}
.wkyt-title{
  display:block;
  font-size:clamp(11.5px,.85vw,16px);font-weight:600;line-height:1.5;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.wkyt-meta{
  display:block;margin-top:.45em;
  font-size:clamp(10px,.72vw,13.5px);font-weight:500;
  color:var(--muted,#8A8A8A);
}
.wkyt-more{margin-top:clamp(14px,1.3vw,24px);text-align:center}
.wkyt-more a{
  display:inline-block;
  font-size:clamp(11.5px,.85vw,16px);font-weight:700;
  color:var(--green,#2CFF05);
}
.wkyt-more a:hover{text-decoration:underline}

@media (max-width:760px){
  .wkyt-list{grid-template-columns:1fr}
  .wkyt-link{grid-template-columns:98px minmax(0,1fr)}
}
@media (max-width:400px){
  .wkyt{padding-inline:14px}
  .wkyt-link{grid-template-columns:86px minmax(0,1fr);gap:9px}
  .wkyt-title{font-size:11.5px;line-height:1.45}
}