::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: #f3f4f6 !important; /* gray-100 */ }
  ::-webkit-scrollbar-thumb { background-color: #9ca3af !important; /* gray-400 */ border-radius: 6px; border: 3px solid #f3f4f6 !important; }

  /* 다크 모드 scrollbar */
  html.dark ::-webkit-scrollbar-track { background: #1f2937 !important; /* gray-800 */ }
  html.dark ::-webkit-scrollbar-thumb { background-color: #4b5563 !important; /* gray-600 */ border-radius: 6px; border: 3px solid #1f2937 !important; }

  #resizer { width: 2px; cursor: ew-resize; background-color: transparent; position: relative; }
  #resizer:hover { background-color: rgba(100,100,100,0.2); }
  .team-icon-active { transform: scale(1.1); transition: transform 0.2s; }
  .people-container { transition: max-height 0.3s ease; overflow: hidden; }
  .team-line { width: 2px; background-color: #d1d5db; flex: 1; }
  .dark .team-line { background-color: #4b5563; }
  .person-to-team-line { width: 2px; background-color: #d1d5db; }
  .dark .person-to-team-line { background-color: #4b5563; }
  #review-column { display: flex; flex-direction: column-reverse; overflow-y: auto; height: 100%; }
  .chat-container { display: flex; flex-direction: column; gap: 8px; }
  .text-white {
    font-size:0.8rem;
  }
  /* === Chat bubbles === */
  .chat-bubble { position: relative; display: inline-block; padding: 10px 14px; border-radius: 16px; max-width: 80%; font-size: 0.9rem; line-height: 1.3; word-break: break-word; cursor: grab; }
  .chat-bubble:active { cursor: grabbing; }
  .chat-container { display: flex; flex-direction: column; gap: 10px; }
  .chat-producer { background-color: #facc15; color: black; border-radius: 16px; border-top-left-radius: 0.25rem; align-self: flex-start; position: relative; }
  .chat-producer::after { content: ""; position: absolute; left: -6px; top: 10px; border-width: 6px; border-style: solid; border-color: transparent #facc15 transparent transparent; }
  .chat-director { background-color: #3b82f6; color: white; border-top-left-radius: 0.25rem; align-self: flex-start; }
  .chat-director::after { content: ""; position: absolute; left: -6px; top: 10px; border-width: 6px; border-style: solid; border-color: transparent #3b82f6 transparent transparent; }
  .chat-supervisor { background-color: #e5e7eb; color: black; padding: 8px 12px; border-radius: 12px; border-top-right-radius: 0.25rem; max-width: 55%; cursor: grab; display: inline-block; }
  .chat-supervisor::after { display: none; }

  .dragging { opacity: 0.6; transform: scale(0.98); }
  .wysiwyg-bar { display: flex; gap: 4px; margin-bottom: 4px; }
  .wysiwyg-icon { width: 24px; height: 24px; background-color: #e5e7eb; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: default; }

  #3d-viewer-wrapper { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; flex: 0 0 auto; position: relative; margin: 0; padding: 0; }
  #3d-viewer-wrapper web-3d-viewer { width: 100%; height: 100%; display: block; }
  #2d-viewer-wrapper { width: 100% !important; max-width: 100% !important; height: 100% !important; flex: 1 1 0; box-sizing: border-box; margin: 0; padding: 0; }
  .video-wrapper { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; box-sizing: border-box; }
  .video-wrapper video { width: 100% !important; height: auto; max-width: 100%; max-height: 100%; display: block; }
  #left-section { padding: 0 !important; max-width: 100% !important; }
  #annotationCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: auto; }
  .annotation { position: absolute; cursor: move; font-weight: bold; padding: 2px 4px; border-radius: 4px; user-select: none; pointer-events: auto; }
  .annotation.focus-point { top: 20%; left: 30%; color: red; font-size: 1.2rem; background: rgba(255,255,255,0.5); }
  .annotation.jump-timing { bottom: 10%; right: 15%; color: yellow; font-size: 1rem; background: rgba(0,0,0,0.4); }

  /* 드래그 앤 드롭 관련 스타일 */
  .thumbnail { display: inline-block; position: relative; cursor: grab; }
  .thumbnail.dragging { opacity: 0.4; cursor: grabbing; }
  .thumbnail-container {
    transition: all 0.2s ease-in-out; border: 2px dashed transparent; border-radius: 8px; min-height: 100px; padding: 4px;
  }
  .thumbnail-container.drag-over { border-color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }

  /* 하단 탭 확장/축소 관련 스타일 */
  .category-column {
    /* ✨ [수정됨] 애니메이션 효과를 위해 transition 추가 */
    transition: width 0.5s ease-in-out;
  }
  .category-title {
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }
  .thumbnails-hidden .thumbnail-container {
    display: none;
  }

  .shot-header-row {
    
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    
    
    margin: 0 0 15px 0; 
}


.shot-header-row h2 {
    margin-bottom: 0 !important;
}


.action-buttons-container {
    display: flex;
    gap: 8px; 
}



/* Gamification Style */

  /* Achievement Toast Animation */
  @keyframes slideInRight {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(400px); opacity: 0; }
  }
  .achievement-toast {
    animation: slideInRight 0.5s ease-out;
  }
  .achievement-toast.hiding {
    animation: slideOutRight 0.5s ease-in;
  }

  /* Progress Ring Animation */
  @keyframes progressRing {
    from { stroke-dashoffset: 283; }
  }
  .progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

  /* Streak Fire Animation */
  @keyframes flicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
  }
  .streak-fire {
    animation: flicker 1.5s ease-in-out infinite;
  }

  /* Level Up Burst */
  @keyframes burst {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .level-burst {
    animation: burst 0.6s ease-out;
  }

  /* XP Gain Float Animation */
  @keyframes floatUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-50px); opacity: 0; }
  }
  .xp-float {
    animation: floatUp 1.5s ease-out forwards;
  }

  /* Leaderboard Rank Pulse */
  @keyframes rankPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  .rank-pulse {
    animation: rankPulse 2s ease-in-out infinite;
  }