/* 하단 클래퍼보드 놀이(inc/slate.php, assets/js/slate.js).
   윗막대(.slate-arm)는 평소 닫혀 있고, 슬레이트에 올리면 경첩(왼쪽 아래)을 축으로 --open만큼 열렸다가, 칠 때(.is-clapping) 0도로 닫힌다. */
.slate{padding-top:64px}
.slate-stage{position:relative;height:clamp(480px,80vh,840px);overflow:hidden;background:#050605;display:grid;place-items:center;
  user-select:none;-webkit-user-select:none}
.slate-scene{position:absolute;inset:0;background:center/cover no-repeat;filter:brightness(.32) saturate(.85);scale:1.05}
.slate-flash{position:absolute;inset:0;z-index:2;background:#fff;opacity:0;pointer-events:none}

.slate-board{--w:min(560px,84vw);--open:0deg;position:relative;cursor:pointer;z-index:1;display:block;width:var(--w);rotate:-3deg;text-align:left;color:#f3f5f1;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));transition:rotate .5s var(--ease-out)}
.slate-board:hover,.slate-board:focus-visible{--open:-26deg;rotate:-1deg}
/* 윗막대·경첩 줄: 흑백 사선 줄무늬.
   닫혔을 때 두 줄의 사선이 이어지도록, 경첩은 윗막대 높이(겹치는 2px 제외)만큼 내려간 자리의 무늬로 시작한다.
   -55deg 줄무늬는 1px 내려갈 때 cos(55deg)≈.5736px씩 밀린다.
   윗막대 아래 2px(경첩과 겹치는 자리)에 어두운 선을 그어, 닫혔을 때 맞물린 틈이 보이게 한다. */
.slate-arm,.slate-hinge{--phase:0px;display:block;height:calc(var(--w) * .11);border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(-55deg,#f3f5f1 var(--phase) calc(var(--phase) + var(--w) * .055),#121513 calc(var(--phase) + var(--w) * .055) calc(var(--phase) + var(--w) * .11))}
.slate-arm{position:relative;z-index:1;margin-bottom:-2px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.7);transform-origin:3% 100%;rotate:var(--open);transition:rotate .45s cubic-bezier(.34,1.56,.64,1)}
.slate-hinge{--phase:calc((var(--w) * .11 - 2px) * .5736);border-radius:0}
.is-clapping .slate-arm{rotate:0deg;transition:rotate .09s cubic-bezier(.7,0,1,1)}
/* 보드: 검은 판에 흰 칸 */
.slate-body{display:grid;border:3px solid #f3f5f1;border-top:0;border-radius:0 0 10px 10px;background:#121513;font-family:var(--font-latin)}
.slate-row{display:grid;border-top:2px solid rgba(243,245,241,.85)}
.slate-row:first-child{border-top:0}
.slate-row--prod{grid-template-columns:auto 1fr;align-items:baseline;gap:16px;padding:14px 18px}
.slate-row--count{grid-template-columns:repeat(3,1fr)}
.slate-row--meta{grid-template-columns:1fr 1fr}
.slate-row--count>span,.slate-row--meta>span{display:flex;flex-direction:column;gap:6px;padding:12px 18px;border-left:2px solid rgba(243,245,241,.85);overflow:hidden}
.slate-row--count>span:first-child,.slate-row--meta>span:first-child{border-left:0}
.slate-body small{font-size:11px;line-height:1;font-weight:600;letter-spacing:.18em;color:rgba(243,245,241,.6)}
.slate-body strong{font-weight:800;letter-spacing:-.01em;line-height:1}
.slate-row--prod strong{font-size:calc(var(--w) * .052)}
.slate-row--count strong{font-size:calc(var(--w) * .11);font-variant-numeric:tabular-nums}
.slate-row--meta strong{font-size:calc(var(--w) * .036);font-variant-numeric:tabular-nums}
.slate-take{color:var(--mint)}
/* 장면 제목 */
.slate-caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:32px;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;pointer-events:none}
.slate-caption>span:first-child{font:600 12px/1 var(--font-latin);letter-spacing:.2em;color:var(--mint)}
.slate-caption-title{font-size:clamp(16px,1.6vw,22px);font-weight:600;color:rgba(243,245,241,.9)}

@media(max-width:599px){
  .slate{padding-top:40px}
  .slate-stage{height:480px}
  .slate-row--prod{padding:10px 12px}
  .slate-row--count>span,.slate-row--meta>span{padding:8px 12px}
  .slate-body small{font-size:9px}
  .slate-caption{bottom:20px}
}