/* 보드 — 지도식 화면, 조각(퍼즐), 연결선, 원격 커서, 선택 표시. */

/* ── 보드와 월드 ─────────────────────────────────────── */
#board {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: url('../img/cursor.svg') 0 2, auto;
}
#board.panning { cursor: url('../img/cursor.svg') 0 2, grabbing; }

/* 확대·축소되는 월드 — 조각·연결선·커서는 전부 이 안에 산다 */
#world {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}

/* ── 조각 ────────────────────────────────────────────── */
.piece {
  position: absolute;
  top: 0; left: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
  /* 바운딩 박스의 빈 부분은 클릭이 통과되도록 — 실제 블록(.band)만 잡힌다 */
  pointer-events: none;
}
.piece.dragging { z-index: 50 !important; }
.piece.snapping { transition: transform 110ms ease-out; }
/* 다른 사람이 옮기는 조각은 부드럽게 따라간다 */
.piece.remote-move { transition: transform 0.5s linear; }

/* 밴드 — 조각을 이루는 블록. 폭·들여쓰기·높이는 JS가 지정 */
.piece .band {
  position: absolute;
  box-sizing: border-box;
  padding: 12px 14px;
  overflow: hidden;
  pointer-events: auto;
  cursor: url('../img/cursor-select.svg') 1 1, pointer;
}
.piece.dragging .band { cursor: url('../img/cursor-select.svg') 1 1, grabbing; }

/* 색을 아직 못 칠한 첫 프레임용 기본 팔레트 (JS가 인라인 색으로 덮는다) */
.c-yellow { background: var(--yellow); color: var(--ink); }
.c-green  { background: var(--green);  color: #fff; }
.c-pink   { background: var(--pink);   color: #fff; }
.c-blue   { background: var(--blue);   color: #fff; }

/* 포스터 GIF 조각 — 프레임 없이 이미지 자체만 */
.piece .band--media {
  padding: 0;
  background: transparent;
}
.band--media img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* 세로로 긴 자료 이미지는 윗부분만 미리 보여준다 — 전체는 클릭해서 확대 */
.mat-shot--tall {
  max-height: 340px;
  object-fit: cover;
  object-position: top;
}

/* ── 방문자 블록 ─────────────────────────────────────── */
.piece--guest .band {
  background: var(--paper);
  color: var(--ink);
  padding: 10px;
}
.piece--guest img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  user-select: none;
  -webkit-user-drag: none;
}
.piece--guest .guest-text {
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

/* ── 주차 수업 자료 블록 ─────────────────────────────── */
.mat-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mat-shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── QR코드 ──────────────────────────────────────────── */
.qr {
  display: block;
  width: 112px;
  height: 112px;
  margin-top: 6px;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── 조각 연결선 (D3 맵과 같은 디자인) ────────────────── */
#links {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
}
#links .link {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#sc-clay);
}
/* 그룹 연결 — 흔들림 경로를 따라 찍히는 동그라미 사슬 */
#links .link-dot {
  fill: #fff;
  filter: url(#sc-clay);
}

/* ── 원격 커서 (피그마식) ────────────────────────────── */
#cursors {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 300;
}
.cursor {
  position: absolute;
  pointer-events: none;
}
.cursor svg {
  display: block;
  transform: scale(var(--inv, 1)); /* 줌과 무관하게 화면 기준 크기 유지 */
  transform-origin: 0 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* ── 선택: 형광 외곽선이 조각 실루엣을 한 붓으로 감싼다 ── */
.piece-outline {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.piece-outline path {
  fill: none;
  stroke: #39ff14;
  stroke-width: 2.5;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* ── 선택된 조각의 X 버튼 (원=조각 배경색, 십자=글자색) ── */
.piece-x {
  position: absolute;
  top: -17px;
  right: -17px;
  z-index: 5;
  width: 34px;
  height: 34px;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}
.piece-x svg { display: block; }