/* ---------- 위젯 재배치 애니메이션 ----------
 *
 * 실제 위젯 캡처(assets/shots/tiles/*.jpg)를 격자에 놓고, 두 장이 자리를 바꾸는
 * 장면을 반복한다. 도식이 아니라 제품 화면이라는 점이 핵심이다.
 *
 * transform 만 애니메이션한다. grid-area 나 top/left 를 건드리면 레이아웃이
 * 매 프레임 다시 계산되고, 저사양 기기에서 눈에 띄게 끊긴다.
 *
 * 움직임을 줄이는 설정은 styles.css 49행의 전역 규칙이 이미 처리한다
 * (animation-duration: 0.001ms). 여기서 따로 끄지 않는다.
 */

.wsanim {
  position: relative;
  margin: -2px 0 16px;
  padding: 14px;
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  background: var(--sunken);
  overflow: hidden;
}

/* 격자는 3열 2행. 캡처 비율이 제각각이라 칸 높이를 고정하고 그림을 덮어 맞춘다 */
/*
 * 칸 높이 128px 에서는 세로로 긴 캡처가 심하게 잘렸다(liqfeed 는 22% 만 보였다).
 * 높이를 160px 로 올리고, 타일 자체도 이 비율(424x160)로 미리 잘라 두었다.
 * 그래서 object-fit: cover 가 더 잘라낼 것이 없다.
 */
.wsanim-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 160px);
  gap: 10px;
}

.wsanim-tile {
  position: relative;
  border: 1px solid var(--stroke-soft);
  border-radius: 8px;
  overflow: hidden;
  background: #0b0e14;
  /* 자리를 바꾸는 동안 위로 떠오르게 해서 어느 것이 움직이는지 보이게 한다 */
  will-change: transform;
}

.wsanim-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0.92;
}

/* 칸 이름표. 캡처만 있으면 무엇이 움직였는지 알기 어렵다 */
.wsanim-tag {
  position: absolute;
  left: 7px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgb(7 9 13 / 0.78);
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/*
 * 움직이는 두 장.
 * 3열 격자에서 가로 한 칸 = (100% + gap). calc 로 정확히 한 칸을 건넌다.
 */
.wsanim-move-a {
  animation: wsanim-a 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  z-index: 2;
}
.wsanim-move-b {
  animation: wsanim-b 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  z-index: 2;
}

/* 한 칸 오른쪽으로 갔다가 제자리로. 가는 길에 살짝 들린다 */
@keyframes wsanim-a {
  0%, 12%   { transform: translate(0, 0) scale(1); box-shadow: none; }
  26%       { transform: translate(calc(50% + 5px), -10px) scale(1.04);
              box-shadow: 0 18px 34px -16px rgb(0 0 0 / 0.9); }
  40%, 60%  { transform: translate(calc(100% + 10px), 0) scale(1); box-shadow: none; }
  74%       { transform: translate(calc(50% + 5px), -10px) scale(1.04);
              box-shadow: 0 18px 34px -16px rgb(0 0 0 / 0.9); }
  88%, 100% { transform: translate(0, 0) scale(1); box-shadow: none; }
}

/* 맞은편은 왼쪽으로. 두 장이 동시에 움직여야 '자리를 바꾼다'로 읽힌다 */
@keyframes wsanim-b {
  0%, 12%   { transform: translate(0, 0) scale(1); box-shadow: none; }
  26%       { transform: translate(calc(-50% - 5px), 10px) scale(1.04);
              box-shadow: 0 18px 34px -16px rgb(0 0 0 / 0.9); }
  40%, 60%  { transform: translate(calc(-100% - 10px), 0) scale(1); box-shadow: none; }
  74%       { transform: translate(calc(-50% - 5px), 10px) scale(1.04);
              box-shadow: 0 18px 34px -16px rgb(0 0 0 / 0.9); }
  88%, 100% { transform: translate(0, 0) scale(1); box-shadow: none; }
}

/* 움직이는 칸을 따라다니는 테두리 강조 */
.wsanim-move-a,
.wsanim-move-b { border-color: rgb(138 180 255 / 0.5); }

.wsanim-cap {
  margin-top: 10px;
  color: var(--faint);
  font-size: 11.5px;
  text-align: center;
}

/* ---------- 1초봉 캔버스 ----------
 * 캔버스는 크기를 주지 않으면 300x150 으로 그려진다. 폭을 채우고 비율만 유지한다.
 * 실제 픽셀 크기는 chart-anim.js 가 devicePixelRatio 를 보고 다시 잡는다.
 */
.chart-live {
  position: relative;
  aspect-ratio: 1400 / 480;
  background: #0b0e14;
}
.chart-live canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.chart-live-tag {
  position: absolute;
  right: 8px;
  top: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(7 9 13 / 0.72);
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* 좁은 화면에서는 2열로. 3열을 유지하면 칸이 손톱만해진다 */
@media (max-width: 720px) {
  .wsanim-board {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 108px);
  }
  /* 열 수가 바뀌면 한 칸의 폭도 바뀌므로 이동 거리를 다시 잡는다 */
  @keyframes wsanim-a {
    0%, 12%   { transform: translate(0, 0); }
    40%, 60%  { transform: translate(calc(100% + 10px), 0); }
    88%, 100% { transform: translate(0, 0); }
  }
  @keyframes wsanim-b {
    0%, 12%   { transform: translate(0, 0); }
    40%, 60%  { transform: translate(calc(-100% - 10px), 0); }
    88%, 100% { transform: translate(0, 0); }
  }
}