/* markers.css — 패턴 트랙 위의 핀 마커 · 재생 헤드(playhead) · 파형 canvas · 빈 상태 */

/* ─── 핀 마커 (패턴 트랙 안의 작은 동그라미) ──────────────────── */
/*   --stack-y: 같은 시간에 핀이 여러 개일 때 위·아래로 어긋남(px). 단일 핀은 0. */
.pattern-track .marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  cursor: pointer;
  transform: translate(-50%, calc(-50% + var(--stack-y, 0px)));
  box-shadow: 0 0 8px currentColor, 0 0 0 2px rgba(0, 0, 0, 0.5);
  z-index: 4;
  transition: transform 80ms;
}
.pattern-track .marker:hover {
  transform: translate(-50%, calc(-50% + var(--stack-y, 0px))) scale(1.15);
}
.pattern-track .marker.selected {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 12px #fff, 0 0 0 2px #fff;
  z-index: 5;
}

/* ─── Hold 핀: 시작 동그라미(::before) + 우측으로 시간만큼 늘어나는 막대 ─── */
/*   막대만 시간 비례로 그리면 짧은 hold 가 너무 가늘어 보이지 않음 →
     시작 지점에 항상 보이는 동그라미를 두고, 막대는 시간 비례로 자라게 함.
     short hold = "동그라미 + 짧은 꼬리", long hold = "동그라미 + 긴 막대". */
.pattern-track .marker.hold {
  width: auto;             /* JS 에서 % 단위로 지정 (시간 비례) */
  height: 10px;
  border-radius: 0 5px 5px 0;     /* 우측만 둥글게, 좌측은 동그라미가 덮음 */
  min-width: 4px;
  box-shadow: 0 0 6px currentColor;
  transform: translate(0, calc(-50% + var(--stack-y, 0px)));
}
.pattern-track .marker.hold::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.pattern-track .marker.hold:hover {
  transform: translate(0, calc(-50% + var(--stack-y, 0px))) scaleY(1.25);
}
.pattern-track .marker.hold.selected {
  width: auto;
  height: 12px;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 0 12px #fff;
}
.pattern-track .marker.hold.selected::before {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 12px #fff, 0 0 0 2px #fff;
}

/* Hold 핀의 지속시간 라벨 — 마커 위에 떠 있는 작은 칩 */
.hold-duration {
  position: absolute;
  left: 0;
  top: -18px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  z-index: 6;
  letter-spacing: -0.2px;
}

/* 우측 끝 드래그 핸들 — hold 길이 조정 */
.hold-handle {
  position: absolute;
  right: -6px;
  top: -3px;
  bottom: -3px;
  width: 14px;
  cursor: ew-resize;
  touch-action: none;
  border-radius: 0 6px 6px 0;
}
.hold-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 60%;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
}
.hold-handle:hover::before {
  background: #fff;
}

/* 재생 중 ● 길게 누르고 있는 동안: 빨간 펄스 테두리 (녹화 중 신호) */
.icon.stamp.pressing {
  box-shadow: 0 0 0 3px #ff6a6a, 0 0 12px rgba(255,106,106,0.6);
  animation: stampPulse 0.7s ease-in-out infinite alternate;
}
@keyframes stampPulse {
  from { box-shadow: 0 0 0 3px #ff6a6a, 0 0 8px rgba(255,106,106,0.5); }
  to   { box-shadow: 0 0 0 4px #ff6a6a, 0 0 20px rgba(255,106,106,0.9); }
}
.pattern-track.active-pattern .tl-label {
  background: var(--accent-dim);
  color: #eaf6f1;
}
.pattern-track.active-pattern .tl-label .tl-tag {
  box-shadow: 0 0 0 2px #fff;
}

/* ─── 재생 헤드 (수직선 + 상단 삼각 그립) ────────────────────── */
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 76px;       /* tl-label 너비만큼 오프셋 */
  width: 2px;
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
  pointer-events: none;   /* 라인 자체는 클릭 안 가게 */
  z-index: 6;
  will-change: transform;
}
/* 드래그용 그립: 라인 좌우로 살짝 넓힌 클릭 영역 + 위쪽 삼각 인디케이터 */
.playhead-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 18px;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}
.playhead-grip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 11px;
  background: var(--warn);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.playhead-grip:hover::before,
.playhead.dragging .playhead-grip::before {
  filter: brightness(1.2) drop-shadow(0 0 6px var(--warn));
}

/* ─── Phase 경계 마커 ───────────────────────────────────────── */
/*   라인(.phase-line)은 트랙 전체를 가로지르는 흰 세로선 (재생 헤드보다 아래 z).
     라벨(.phase-tag)은 위쪽에 떠 있는 클릭/드래그 가능한 칩 (재생 헤드보다 위 z).
     두 요소 모두 left:76px 기준 + transform:translateX 로 시간 위치 배치. */
.phase-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 76px;
  width: 2px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}
.phase-tag {
  position: absolute;
  top: 2px;
  left: 80px;             /* 라인(76px) 보다 4px 우측 */
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  z-index: 8;             /* 재생 헤드(6) 위에서 클릭 받을 수 있도록 */
  touch-action: none;
  will-change: transform;
}
.phase-tag:hover {
  background: var(--danger);
  color: #fff;
}
.phase-tag:active { cursor: grabbing; }
.phase-line.dragging {
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
}
.phase-tag.dragging {
  background: var(--warn);
  color: #102018;
  cursor: grabbing;
}

/* ─── 파형 Canvas ───────────────────────────────────────────── */
.wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
.timeline.has-audio .wave-canvas { display: block; }

/* 파형 빈 상태 */
.timeline-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.timeline-empty .hint { color: var(--dim); font-size: 11px; }
.timeline.has-audio .timeline-empty { display: none; }