:root {
  /* 색상 */
  --shadow-color: rgba(0, 0, 0, 0.12);
  --color-accent: #007bff;
  --color-accent-dark: #0056b3;
  --color-white: #ffffff;
  --color-text-dark: #333333;

  /* 트랜지션 */
  --transition-fast: 0.2s;
  --transition-base: 1s;
  --transition-lyrics: 0.46s;

  /* 배경 영상 */
  --blur-amount: 26px;
  --video-scale: 1.1;

  /* 다이얼로그 공통 */
  --dialog-bg: rgba(22, 22, 26, 0.96);
  --dialog-blur: blur(20px);
  --dialog-border: 1px solid rgba(255, 255, 255, 0.10);
  --dialog-radius: 20px;
  --dialog-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  --dialog-backdrop-bg: rgba(0, 0, 0, 0.55);
  --dialog-backdrop-blur: blur(3px);

  /* 타이포그래피 */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-muted: rgba(255, 255, 255, 0.45);

  /* 구분선/서피스 */
  --color-border-subtle: rgba(255, 255, 255, 0.07);
  --color-surface-hover: rgba(255, 255, 255, 0.08);

  /* 버튼 */
  --btn-radius: 10px;
  --btn-transition: background 0.15s, color 0.15s, opacity 0.15s;
}

body {
  background-color: gray;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 클릭 후 잔상이 남는 현상 제거, 드래그 선택 방지 */
* {
  box-sizing: border-box;
  outline: none;
  border: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, textarea {
  user-select: text;
}

.shadow {
  filter: drop-shadow(0px 4px 12px var(--shadow-color));
}

/* 배경 영상 */
#bgVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  filter: blur(var(--blur-amount));
  transform: scale(var(--video-scale));
  transition: filter var(--transition-base) ease;
}

/* 배경 오버레이 */
#bgOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 20%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* 파일 입력 숨김 */
#bgVideoInput {
  display: none;
}

/* 메인 레이아웃 */
main {
  width: 1600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 20px));
}

#mainBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 140px;
  margin-bottom: 20px;
}

/* 토스트 알림 */
#toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--dialog-bg);
  backdrop-filter: var(--dialog-blur);
  color: var(--color-text-primary);
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  z-index: 9999;
}

#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 로딩 다이얼로그 */
#loadingDialog {
  border: var(--dialog-border);
  border-radius: var(--dialog-radius);
  background: var(--dialog-bg);
  backdrop-filter: var(--dialog-blur);
  padding: 40px 56px;
  color: var(--color-text-primary);
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: var(--dialog-shadow);
}

#loadingDialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#loadingDialog::backdrop {
  background: var(--dialog-backdrop-bg);
  backdrop-filter: var(--dialog-backdrop-blur);
}

#loadingSpinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#loadingDialog.has-progress #loadingSpinner {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#loadingMessage {
  margin: 0;
  opacity: 0.85;
}

#loadingProgressBar {
  display: none;
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

#loadingDialog.has-progress #loadingProgressBar {
  display: block;
}

#loadingProgressFill {
  height: 100%;
  width: 0%;
  background: var(--color-white);
  border-radius: 2px;
  transition: width 0.1s ease;
}

#musicControl {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 36px 0;
}