/* 창 프레임 · 부유 · 깊이 표시
   ★ 앞뒤 교차와 포인터 패럴랙스는 폐기했다(사용자 지시).
   ★ 뒤 창을 transform: scale()로 줄이지 않는다 — 축소 리샘플링이 글자를 흐리게 만든다.
     크기 차이는 슬롯의 width로만 주고, 뒤 창은 밝기만 낮춘다. */

.win-slot {
  position: absolute;
  --rest-bright: 1;
  --ey: 0px;                    /* 등장/퇴장 오프셋(JS가 씀) */
  --eb: 0px;                    /* 등장 블러 — 정착하면 0이 된다 */
  opacity: 0;
  transform: translateY(var(--ey));
  filter: blur(var(--eb)) brightness(var(--rest-bright));
  transition-property: filter;
  transition-duration: 320ms;
  transition-timing-function: var(--ease-stage);
}

.win-slot.is-front { z-index: 40; --rest-bright: 1; }
.win-slot.is-back  { z-index: 20; --rest-bright: var(--back-bright); }

/* 사용자가 지정한 자리 번호 — 1번이 메인이다.
   3(좌상) · 1(중앙 큰) · 2(좌하) · 4(우하)로 서고, 무리 전체가 왼쪽에 붙는다. */
.slot-0 { width: 72%; max-width: 470px; top: 2%;    left: 18%; }   /* 1번 · 메인 */
.slot-1 { width: 54%; max-width: 348px; bottom: 0;  left: 0; }     /* 2번 */
.slot-2 { width: 46%; max-width: 292px; top: 12%;   left: 0; }     /* 3번 */
.slot-3 { width: 46%; max-width: 292px; bottom: 4%; left: 50%; }   /* 4번 */

.slot-1 { z-index: 30; }
.slot-2 { z-index: 10; }
.slot-3 { z-index: 25; }

/* 부유는 슬롯이 아니라 안쪽 요소에 건다 — 같은 요소에 걸면 등장 오프셋과 싸운다 */
.win-float { will-change: transform; }
.float-a { animation: float-a 13s ease-in-out infinite; }
.float-b { animation: float-b 16.5s ease-in-out infinite .8s; }

/* 진폭을 줄였다 — 크게 흔들리면 글자가 읽히지 않고 선명도가 떨어져 보인다 */
@keyframes float-a {
  0%   { transform: translate(0, 0) rotate(-1.2deg); }
  25%  { transform: translate(-2px, -6px) rotate(-1.7deg); }
  50%  { transform: translate(2px, -9px) rotate(-0.7deg); }
  75%  { transform: translate(3px, -4px) rotate(-1.5deg); }
  100% { transform: translate(0, 0) rotate(-1.2deg); }
}
@keyframes float-b {
  0%   { transform: translate(0, 0) rotate(1.0deg); }
  30%  { transform: translate(4px, 6px) rotate(1.6deg); }
  60%  { transform: translate(-3px, 8px) rotate(0.4deg); }
  85%  { transform: translate(-4px, 3px) rotate(1.4deg); }
  100% { transform: translate(0, 0) rotate(1.0deg); }
}

/* ── 창 프레임 ── */
.tw {
  margin: 0;
  border-radius: var(--win-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--win-shadow);
}

.tw-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  height: var(--win-chrome);
  padding: 0 10px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.tw-chrome span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* 원본 픽셀보다 크게 늘리지 않는다 — 늘리는 순간 흐려진다 */
.tw-body {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 1023px) {
  .slot-2, .slot-3 { display: none; }   /* 모바일은 창 2개까지만 */
  .slot-0 { width: 84%; max-width: none; left: 10%; }
  .slot-1 { width: 62%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b { animation: none; }
}