/* ---------- 작업 공간 미리보기: 끌어서 자리 바꾸기 ----------
 *
 * 실제 앱 녹화를 위젯별로 자른 영상 다섯 개(assets/shots/ws/*.mp4)를 앱과 같은 48칸 격자에
 * 놓는다. 방문자가 하나를 끌어 다른 칸 위에 놓으면 두 칸이 격자 위치를 맞바꾼다.
 * 동작은 assets/ws-board.js 다.
 *
 * 움직임은 transform 만 쓴다. top/left 를 바꾸면 매 프레임 레이아웃을 다시 계산한다.
 * 움직임을 줄이는 설정은 styles.css 의 전역 규칙과 ws-board.js 가 함께 처리한다.
 */

.wsb {
  position: relative;
  margin: -2px 0 16px;
  padding: 10px;
  border: 1px solid var(--stroke-soft);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 100%, rgb(88 28 135 / 0.22), transparent 60%),
    radial-gradient(90% 80% at 0% 0%, rgb(30 58 138 / 0.28), transparent 60%),
    #07090d;
}

/* 앱의 상단바를 흉내 낸 한 줄. 캡처가 아니라 "앱 안" 이라는 느낌을 준다 */
.wsb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px 12px;
  border: 1px solid var(--stroke-soft);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.03);
}
.wsb-brand {
  margin-right: auto;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.03em;
}
.wsb-pill {
  padding: 3px 10px;
  border: 1px solid var(--stroke-soft);
  border-radius: 999px;
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}

/*
 * 앱의 격자 그대로: 48열 × 35행. 판 전체 비율도 녹화한 창의 격자(1722x851)에 맞춰,
 * 각 칸이 앱에서와 거의 같은 비율을 갖는다. 그래서 영상이 칸을 덮을 때 거의 잘리지 않는다.
 * 48열에 gap 을 주면 간격만 47번 쌓이므로, 간격은 칸 안쪽 여백(margin)으로 준다.
 */
.wsb-grid {
  display: grid;
  grid-template-columns: repeat(48, minmax(0, 1fr));
  grid-template-rows: repeat(35, minmax(0, 1fr));
  aspect-ratio: 1722 / 851;
}

.wsb-tile {
  position: relative;
  margin: 3px;
  border: 1px solid var(--stroke-soft);
  border-radius: 10px;
  overflow: hidden;
  background: #0b0e14;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.wsb-tile:hover { border-color: rgb(151 252 228 / 0.35); }
.wsb-tile:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/*
 * 영상은 칸을 덮어 채우지 않는다. 덮으면 작은 패널이 큰 칸으로 갈 때 글자까지 몇 배로 커진다.
 * 대신 모든 영상이 판 전체에 공통인 배율(앱 격자 폭 1722px 대비)로 왼쪽 위에 놓인다
 * — 앱에서 패널 크기를 바꿨을 때처럼, 작은 칸에선 보이는 만큼만, 큰 칸에선 원래 크기 그대로다.
 * 크기는 ws-board.js 가 판 폭에 맞춰 잰다(--wsb-k).
 */
.wsb-tile video {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--lw) * var(--wsb-k, 0.6) * 1px);
  height: calc(var(--lh) * var(--wsb-k, 0.6) * 1px);
  max-width: none;
  pointer-events: none;
  background: #0b0e14;
}

.wsb-tag {
  position: absolute;
  right: 8px;
  bottom: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(7 9 13 / 0.82);
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* 끌고 있는 칸: 손끝을 따라 떠 있다 */
.wsb-tile.is-dragging {
  z-index: 3;
  cursor: grabbing;
  opacity: 0.94;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(151 252 228 / 0.5);
  transition: none;
}
/* 놓으면 자리를 바꿀 칸 */
.wsb-tile.is-target {
  border-color: var(--mint);
  box-shadow: inset 0 0 0 2px rgb(151 252 228 / 0.55);
}
/* 눌러서 설명을 연 칸 */
.wsb-tile.is-selected {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgb(151 252 228 / 0.45);
}
/* 자리를 바꾼 뒤 제자리로 미끄러져 들어가는 동안 */
.wsb-tile.is-settling {
  z-index: 2;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 칸을 누르면 여는 설명. 앱 미리보기에 보이는 위젯의 설명은 여기 모아 두고, 아래 섹션에는 따로 두지 않는다 */
.wsb-details {
  margin: 14px 2px 0;
  padding: 16px 18px;
  border: 1px dashed rgb(151 252 228 / 0.35);
  border-radius: 12px;
  background: rgb(151 252 228 / 0.03);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* 설명이 열리면 칸 자체가 눈에 띄어야 한다 — 보드 아래 흐린 글씨로는 열린 줄도 모른다 */
.wsb-details.is-open {
  padding: 22px 26px;
  border: 1px solid rgb(151 252 228 / 0.55);
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(151 252 228 / 0.12), transparent 60%),
    rgb(255 255 255 / 0.03);
  box-shadow: 0 0 0 1px rgb(151 252 228 / 0.08), 0 18px 44px -18px rgb(151 252 228 / 0.45);
}
.wsb-hint { margin: 0; color: var(--text); opacity: 0.8; font-size: 14px; text-align: center; }
.wsb-detail { animation: wsb-in 0.28s ease; }
@keyframes wsb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wsb-detail h4 { margin: 18px 0 6px; font-size: 17px; color: var(--text); }
.wsb-detail h4:first-child { margin-top: 0; font-size: 22px; color: var(--mint); }
.wsb-detail p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); opacity: 0.86; }
.wsb-detail .more-link { display: inline-block; margin-top: 14px; }

.wsb-cap {
  margin: 10px 2px 0;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

/*
 * 좁은 화면에서도 앱 배치 그대로 두고 판 전체를 줄인다 (10-07). 한 줄씩 쌓으면 앱처럼 보이지 않았다.
 * 영상 배율(--wsb-k)이 판 폭을 따라가므로 글자는 작아지지만 배치·비율은 데스크톱과 같다.
 */
@media (max-width: 720px) {
  .wsb-tile { margin: 1px; border-radius: 5px; }
  .wsb-tag { right: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 1px 5px; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
  .wsb-pill { display: none; }
}
/* 폰(600px 이하)에서는 판을 680px 로 두고 옆으로 밀어 본다 (10-14). 판 전체를 390px 로 줄이면 영상 속 글자가 읽히지 않았다 */
@media (max-width: 600px) {
  .wsb { overflow-x: auto; overscroll-behavior-x: contain; }
  .wsb-grid { width: 680px; }
}