/* ==========================================================================
   PickSalon Skeleton Player & Sync Timeline Graph CSS
   - Tech Dark Theme
   - 1:1 Canvas Overlay over Video
   - Integrated Controls & Synchronized Score Curve
   ========================================================================== */

:root {
  --ps-bg-card: #0b132b;
  --ps-bg-card-border: rgba(255, 255, 255, 0.08);
  --ps-mint: #10b981;
  --ps-mint-glow: rgba(16, 185, 129, 0.8);
  --ps-mint-bg: rgba(16, 185, 129, 0.15);
  --ps-cyan: rgba(6, 182, 212, 0.85);
  --ps-rose: #f43f5e;
  --ps-text-main: #f8fafc;
  --ps-text-muted: #94a3b8;
  --ps-border: rgba(255, 255, 255, 0.08);
}

/* 1. 최상위 모듈 카드 컨테이너 */
.skeleton-graph-module-card {
  background: var(--ps-bg-card);
  border: 1px solid var(--ps-bg-card-border);
  border-radius: 12px;
  padding: 16px;
  color: var(--ps-text-main);
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* 2. 비디오 & 스켈레톤 캔버스 래퍼 (1:1 겹침) */
.video-canvas-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-canvas-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}

.video-canvas-wrapper canvas.skeleton-overlay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* 비디오 상단 HUD / 상태 뱃지 */
.ps-video-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.ps-hud-badge {
  background: rgba(11, 19, 43, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--ps-mint);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ps-hud-badge.loading {
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}

.ps-hud-badge.error {
  border-color: rgba(244, 63, 94, 0.5);
  color: #f43f5e;
}

/* 드래그 앤 드롭 오버레이 (비디오 미등록 시) */
.ps-video-dropzone {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(11, 19, 43, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px dashed rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 20px;
  text-align: center;
}

.ps-video-dropzone:hover,
.ps-video-dropzone.dragover {
  background: rgba(11, 19, 43, 0.95);
  border-color: var(--ps-mint);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.ps-video-dropzone.hidden {
  display: none !important;
}

.ps-dropzone-icon {
  font-size: 38px;
  color: var(--ps-mint);
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

.ps-dropzone-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.ps-dropzone-desc {
  font-size: 12px;
  color: var(--ps-text-muted);
}

/* 3. 하단 비디오 재생 컨트롤러 */
.video-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 8px;
  box-sizing: border-box;
}

.ps-controls-left {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* 재생 / 일시정지 버튼 */
.btn-play-pause {
  background: var(--ps-mint-bg);
  border: 1px solid var(--ps-mint);
  color: var(--ps-mint);
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-play-pause:hover {
  background: rgba(16, 185, 129, 0.25);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* 배속 칩 버튼 */
.btn-speed-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.btn-speed-group .speed-label {
  font-size: 11px;
  color: var(--ps-text-muted);
  font-weight: 700;
  margin-right: 2px;
}

.btn-speed {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-speed:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.btn-speed.active {
  background: var(--ps-mint-bg);
  border-color: var(--ps-mint);
  color: var(--ps-mint);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

/* 타임코드 표시 */
.timecode-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--ps-text-muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* 4. 동기화 그래프 영역 */
.sync-graph-wrapper {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sync-graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ps-text-muted);
  padding: 0 2px;
}

.sync-graph-title {
  font-size: 12px;
  font-weight: 800;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sync-graph-title i {
  color: var(--ps-mint);
}

.sync-graph-time-info {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--ps-text-muted);
}

/* 그래프 컨테이너 & 실시간 캔버스 */
.sync-graph-container {
  position: relative;
  width: 100%;
  height: 55px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.sync-graph-container canvas {
  width: 100%;
  height: 55px;
  display: block;
}

/* 실시간 탐색 커서 (syncCursorLine) */
.sync-cursor-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ps-mint);
  box-shadow: 0 0 6px var(--ps-mint-glow);
  left: 0%;
  pointer-events: none;
  z-index: 5;
  transition: none;
}

.sync-cursor-badge {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: ui-monospace, monospace;
  background: #000000;
  border: 1px solid var(--ps-mint);
  color: var(--ps-mint);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* 5. 동작 단계별 컬러 세그먼트 진행 바 (5개 구간 블록) */
.ps-segment-track {
  position: relative;
  width: 100%;
  height: 22px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ps-segment-block {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  box-sizing: border-box;
}

.ps-segment-block:last-child {
  border-right: none;
}

.ps-segment-block:hover {
  filter: brightness(1.2);
}

.ps-segment-block.active {
  filter: brightness(1.25);
  box-shadow: inset 0 0 0 1px #fff;
}

/* 세그먼트 플레이헤드 */
.ps-segment-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  left: 0%;
  pointer-events: none;
  z-index: 6;
}

/* 모바일 및 작은 화면 반응형 대응 */
@media (max-width: 640px) {
  .skeleton-graph-module-card {
    padding: 12px;
    border-radius: 10px;
  }
  .video-controls-bar {
    padding: 6px 8px;
    gap: 6px;
  }
  .btn-play-pause {
    padding: 3px 8px;
    font-size: 11px;
  }
  .btn-speed {
    padding: 2px 6px;
    font-size: 10px;
  }
  .timecode-display {
    font-size: 11px;
  }
  .ps-segment-block {
    font-size: 9px;
  }
}