/* ═══════════════════════════════════════════════════════════════════
   Blair-tunes 플레이어 — Figma가 single source of truth
   frames: 6:748(desktop) / 115:2964(mobile) / 107:2745(minimized)
   브레이크포인트: 768px (design.md와 동일)
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ── 윈도우 셸 ── */
.bt-win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1280px, calc(100vw - 40px));    /* 기본폭 1280px, 세이프 에어리어 준수 */
  min-width: 380px;                          /* 리사이즈 하한(모바일 스택 레이아웃 최소폭) — 880px은
                                                 하한이 아니라 @container 분기점(아래) — 그 밑으로는
                                                 3열이 아니라 세로 스택으로 전환되니 컨트롤이 겹칠 일이 없다 */
  max-width: 1600px;                         /* 리사이즈 상한 (JS makeResizable의 MAX_W와 동일) */
  /* 유저 리사이즈 대응: 내부 레이아웃은 뷰포트가 아닌 창 자신의 폭 기준(@container).
     높이는 콘텐츠(비디오 비율)가 결정 — 세로 방향은 항상 자동. */
  container-type: inline-size;
  /* 테마: fetchTracks()의 theme_color/text_color → CSS 변수 (JS가 설정)
     #2A2118/#FFF은 최종 폴백으로만 사용 */
  background: var(--bt-theme, #2A2118);
  color: var(--bt-text, #FFFFFF);
  transition: background-color 300ms ease, color 300ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 500;
  /* Mac OS9 WindowChrome — 실측 그대로, 배경은 트랙 테마색(--bt-theme) 그대로 유지 */
  border: 1px solid #262626;
  box-shadow: inset 1px 1px 0 0 #eee, inset -1px -1px 0 0 #999, 2px 2px 0 0 rgba(0,0,0,0.5);
}
.bt-win[hidden] { display: none; }

/* ── 헤더 (19px) ── */
.bt-header {
  height: 26px; width: 100%;
  display: flex; align-items: center; gap: 7px;
  padding: 4px;
  flex-shrink: 0;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  /* 다른 창들과 달리 헤더 배경을 회색(#ccc)으로 고정하지 않고 트랙 테마색
     (--bt-theme, 콘텐츠 영역과 동일)을 그대로 씀 — 회색이 트랙 아트워크와
     안 어울려서 콘텐츠와 색을 맞춰달라는 요청 반영 */
  background: var(--bt-theme, #2A2118); border-bottom: 1px solid #262626;
  /* 창 외곽의 인셋 하이라이트(좌상단 화이트/우측 그레이)가 헤더 배경에 가려지고
     있어서 헤더에도 동일하게 겹쳐 그려줌 */
  box-shadow: inset 1px 1px 0 0 #eee, inset -1px 0 0 0 #999;
  transition: background-color 300ms ease;
}
.bt-win.dragging .bt-header, .bt-mini.dragging .bt-header { cursor: grabbing; }
.bt-header-pinstripe {
  flex: 1; min-width: 8px; height: 19px;
  /* 반투명 화이트 스트라이프 — 트랙 테마색이 밝든 어둡든 핀스트라이프 텍스처로 보이게 */
  background-color: rgba(255,255,255,0.12);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(255,255,255,0.45) 1px, rgba(255,255,255,0.45) 2px);
  border-left: 1px solid rgba(255,255,255,0.28); border-right: 1px solid rgba(0,0,0,0.3);
}
/* close box(좌) / collapse box(우) — Figma Mac-OS-9-UI-Kit atoms 18:49 / 18:121, 3겹 베벨 구조.
   DOM 순서로 좌/우 배치(inline flex) — 레퍼런스 구현과 동일한 방식, absolute 오프셋 불필요. */
.bt-header .bt-hbtn {
  position: relative; flex-shrink: 0;
  width: 18px; height: 18px;
  padding: 0; cursor: pointer;
  border-style: solid; border-width: 1px; border-color: grey #f1f1f1 #f1f1f1 grey;
  background-image: linear-gradient(153deg, #9a9a9a, #f1f1f1);
  box-shadow: inset 0 0 0 1px #262626, inset 2px 2px 0 0 #f1f1f1, inset -2px -2px 0 0 gray;
}
.bt-header .bt-hbtn img { display: none; }
/* 실측(.titlebar-button:active) 그대로 — 눌렀을 때 밝기만 낮춰서
   기존 베벨과 합쳐지며 움푹 들어간 느낌을 줌 */
.bt-header .bt-hbtn:active { filter: brightness(69%); }
/* 실측(.titlebar-button-minimize / .titlebar-button-zoom) 그대로 —
   최소화(가로 막대 두 줄)와 복원(꺾쇠 사각형) 아이콘을 다르게 그려서
   close 버튼과도, 서로도 구분되게 함 */
#bt-minimize::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 5px; height: 6px;
  box-sizing: border-box;
  border-top: 1px solid #262626; border-bottom: 1px solid #262626;
}
#bt-restore::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 10px; height: 10px;
  box-sizing: border-box;
  border-top: 1px solid #262626; border-right: 1px solid #262626; border-bottom: 1px solid #262626;
}
.bt-title {
  flex-shrink: 1; min-width: 0; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: 'VT323', monospace; font-size: 16px; line-height: 16px;
  letter-spacing: -0.8px; color: var(--bt-text, #fff);
  transition: color 300ms ease;
}

/* ── 본문: 좌 플레이리스트 / 중앙 플레이어 / 우 큐레이션 ── */
.bt-body {
  display: flex; gap: 4px; align-items: stretch; justify-content: center;
  width: 100%;
}

/* 01 — 플레이리스트 (좌) */
.bt-col-list {
  display: flex; gap: 4px; align-items: stretch;
  width: 256px; max-width: 256px; flex-shrink: 0;
}
.bt-list {
  flex: 1; min-width: 1px; min-height: 0; border-radius: 4px;
  display: flex; flex-direction: column; align-items: stretch;
  overflow-y: auto; scrollbar-width: none;
}
.bt-list::-webkit-scrollbar { display: none; }
.bt-row {
  display: flex; gap: 4px; align-items: center;
  padding: 6px 8px; width: 100%;
  background: transparent; border: none; text-align: left; cursor: pointer;
  color: var(--bt-text, #fff); flex-shrink: 0;
  transition: color 300ms ease;
}
.bt-row .bt-row-txt {
  flex: 1; min-width: 1px; display: flex; flex-direction: column;
  font-family: 'Pretendard', sans-serif; font-weight: 200;  /* ExtraLight (미재생) */
  font-size: 12px; line-height: 18px; letter-spacing: -0.24px;
  white-space: nowrap; overflow: hidden;
}
.bt-row .bt-row-txt p { overflow: hidden; text-overflow: ellipsis; }
.bt-row.playing .bt-row-txt { font-weight: 300; }          /* Light (재생 중) */
/* 나우플레잉 이퀄라이저 — 세로 바 3개, 재생 중일 때만 요동·일시정지 시 동결.
   현재 트랙 행에서만 표시(비활성 트랙은 아이콘 없음 — Figma 리스트와 동일). */
.bt-row .bt-np {
  width: 12px; height: 12px; flex-shrink: 0;
  display: none; align-items: flex-end; gap: 2px;
}
.bt-row.playing .bt-np { display: flex; }
.bt-np i {
  flex: 1 1 0; min-width: 0; height: 30%;
  background: var(--bt-text, #fff);
  animation: bt-eq 800ms ease-in-out infinite;
  animation-play-state: paused;              /* 일시정지 = 현재 높이에서 동결 */
}
.bt-playing .bt-np i { animation-play-state: running; }
.bt-np i:nth-child(2) { animation-delay: -260ms; }
.bt-np i:nth-child(3) { animation-delay: -530ms; }
@keyframes bt-eq {
  0%   { height: 30%; }
  22%  { height: 100%; }
  45%  { height: 55%; }
  70%  { height: 80%; }
  88%  { height: 40%; }
  100% { height: 30%; }
}
.bt-row .bt-dur {
  font-family: 'Pretendard', sans-serif; font-weight: 100;  /* Thin */
  font-size: 12px; line-height: 18px; letter-spacing: -0.24px; white-space: nowrap;
}

/* 트랙리스트/큐레이션 픽셀 스크롤바 — 박스/도트 패턴은 desktop.html의 공용
   .pixel-scrollbar/.pixel-scrollbar-handle(Figma 71:3350, design.md 문서화)를
   그대로 쓴다. 양쪽 다 window.__syncPixelScrollbar로 실제 스크롤 상태에
   동기화(2026-08-03부터 — 예전엔 창 높이가 콘텐츠에 맞춰 늘어나서 오른쪽은
   실제로 스크롤될 일이 없었지만, 이제 창 높이를 중앙 영상 영역 기준으로
   고정하고 좌우는 내부 스크롤하도록 바뀌었음). 트랙 배경(#aaa)도 여기서만
   콘텐츠와 동일한 테마색으로 오버라이드 — Works/Film/AI Images의 공용
   스타일은 그대로 유지(그쪽은 검정 배경이라 회색 트랙이 잘 어울림). */
.bt-win .pixel-scrollbar, .bt-mini .pixel-scrollbar {
  background: var(--bt-theme, #2A2118);
  transition: background-color 300ms ease;
}
.bt-win .pixel-scrollbar:has(.pixel-scrollbar-handle[hidden]),
.bt-mini .pixel-scrollbar:has(.pixel-scrollbar-handle[hidden]) {
  background: none;
}

/* 02 — 중앙 플레이어 — 창 전체 높이의 기준(사용자 요청). align-self:flex-start로
   .bt-body의 기본 align-items:stretch를 무시해야 한다 — 안 그러면 JS가 좌/우
   컬럼에 강제로 넣어준 높이 때문에 행 자체가 늘어나고, stretch가 그 늘어난
   행 높이를 다시 center에 되먹여서 center 자신의 실제 콘텐츠(영상 비율+
   컨트롤)와 무관하게 이전 값에 고착되는 순환 버그가 있었다(2026-08-03 실측). */
.bt-col-center {
  flex: 1; min-width: 1px; align-self: flex-start;
  display: flex; flex-direction: column; align-items: center;
}
.bt-video {
  width: 100%; aspect-ratio: 840 / 472.5;
  border: 1px solid #000; border-radius: 4px;
  overflow: hidden; position: relative; background: #000;
}
.bt-video img.bt-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* 비디오 도크 — 단일 YT iframe이 사는 고정 레이어. 위치/크기/z-index 전부
   JS(syncDock)가 매 프레임 활성 창(.bt-win/.bt-mini)의 실측값을 따라 동기화
   한다 — 이 창들은 desktop.html의 공용 topZ 포커스 스택에 참여해서 z-index가
   동적으로 바뀌므로 여기 고정값을 두지 않는다(JS가 즉시 덮어씀, 이 값은 JS
   실행 전 첫 프레임용 폴백일 뿐). */
#bt-yt-dock {
  position: fixed;
  z-index: 1;
  overflow: hidden;
  border-radius: 3px;   /* .bt-video 4px 보더 안쪽 라운드 */
  background: #000;
}
#bt-yt-dock iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* 임베드 불가 영상 폴백 (YT onError) — 레이아웃 변경 없음, 비디오 영역 위 오버레이 */
.bt-embed-fallback {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(0, 0, 0, 0.92);   /* YT 자체 에러 문구가 비치지 않게 */
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
  text-align: center; padding: 16px;
}
.bt-embed-fallback[hidden] { display: none; }
.bt-embed-fallback p {
  font-family: 'VT323', monospace; font-size: 20px; line-height: 24px; letter-spacing: -1px;
  color: #fff;
}
.bt-embed-fallback a {
  font-family: 'VT323', monospace; font-size: 20px; line-height: 24px; letter-spacing: -1px;
  text-transform: uppercase; background: #fff; color: #000;
  border: 1px solid #000; padding: 4px 10px;
  text-decoration: none; cursor: pointer;
}
.bt-embed-fallback a:active { background: #000; color: #fff; }
.bt-controls {
  width: 100%; display: flex; align-items: flex-start; justify-content: center;
  padding: 16px 0 24px 8px;
}
.bt-controls-inner {
  flex: 1; min-width: 1px; display: flex; align-items: center;
  justify-content: space-between;
}
.bt-btns { display: flex; gap: 4px; align-items: center; }
.bt-btn {
  width: 36px; height: 36px; background: #fff; border: 1px solid #000;
  position: relative; cursor: pointer; padding: 0; flex-shrink: 0;
  /* 흰 배경이라 하이라이트(흰색)는 사실상 안 보이지만, 우하단 그레이 섀도만으로도
     충분히 입체감이 남 — close box 등과 같은 인셋 베벨 기법을 배경에 맞게 축소 적용 */
  box-shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #999;
}
.bt-btn img {
  width: 24px; height: 24px; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.bt-btn:active {
  filter: brightness(0.85);
  /* 눌렸을 때는 베벨 방향을 반대로(좌상단 다크/우하단 없음) 뒤집어서 움푹 들어간 느낌 */
  box-shadow: inset -1px -1px 0 0 #fff, inset 1px 1px 0 0 #999;
}

/* 볼륨 (240px) — 0–100 드래그/클릭, fill·rest flexGrow와 핸들 left는 JS가 설정 */
.bt-volume { width: 240px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.bt-vol-track {
  height: 16px; padding: 0 20px; display: flex; gap: 10px; align-items: center;
  position: relative; overflow: hidden; width: 100%;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.bt-vol-fill {
  flex: 1; min-width: 1px; height: 4px;
  background: var(--bt-accent, #0037FF);   /* 슬라이더 액티브 = 테마 파생 액센트 */
  border: 1px solid #000;
  transition: background-color 300ms ease;
}
.bt-vol-rest { flex: 1; min-width: 1px; height: 4px; border: 1px solid #000; }
.bt-vol-handle {
  position: absolute; left: 112px; top: 0; width: 16px; height: 16px;
  background: #fff; border: 1px solid #000;
}
.bt-vol-labels { display: flex; justify-content: space-between; width: 100%; }
.bt-vol-step { width: 40px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.bt-vol-step i { display: block; width: 1px; height: 6px; background: var(--bt-text, #fff); }
.bt-vol-step span {
  font-family: 'VT323', monospace; font-size: 14px; line-height: 14px;
  letter-spacing: -0.7px; color: var(--bt-text, #fff); text-align: center;
  transition: color 300ms ease;
}

/* 03 — 큐레이션 (우) — 좌 플레이리스트처럼 고정폭.
   뷰포트가 좁아지면 중앙 비디오 컬럼만 줄어든다 (§데스크탑 리사이즈 규칙). */
.bt-col-cur {
  width: 256px; flex: none;
  display: flex; gap: 8px; align-items: stretch;
  padding: 0 8px; border-radius: 4px;
}
.bt-cur-inner {
  flex: 1; min-width: 1px; min-height: 0; display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; scrollbar-width: none;
}
.bt-cur-inner::-webkit-scrollbar { display: none; }
.bt-cur-tit { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bt-cur-tit .bt-t1, .bt-cur-tit .bt-t2 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: 40px; line-height: 1.15; letter-spacing: -2px;
  color: var(--bt-text, #fff); transition: color 300ms ease;
  width: 100%;
}
/* 아티스트명 — 말줄임 없이 필요하면 다음 줄로 자연스럽게 줄바꿈(이름이 잘려
   안 보이는 것보다 나음). line-height도 40px(글자 크기와 완전히 동일) →
   1.15로 살짝 여유를 둬서 EB Garamond 대문자 상단(예: "John Mayer"의 J)이
   줄 상자 밖으로 넘쳐 overflow:hidden에 잘리던 문제를 같이 해결
   (2026-08-02, 사용자 지적 — 말줄임 제거 + 글자 잘림 둘 다 이 두 속성이 원인). */
.bt-cur-tit .bt-t2 {
  white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word;
}
.bt-cur-tit .bt-live {
  font-family: 'EB Garamond', Georgia, serif; font-size: 14px; line-height: 20px;
  letter-spacing: -0.7px; color: var(--bt-text, #fff); transition: color 300ms ease;
  width: 100%;
}
.bt-cur-des {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  font-family: 'Pretendard', sans-serif; font-weight: 200;   /* ExtraLight */
  font-size: 12px; line-height: 18px; letter-spacing: -0.24px;
  color: var(--bt-text, #fff); transition: color 300ms ease;
}

/* 데스크탑 기본: 타이틀/아티스트는 세로 배치 (컨테이너 쿼리가 모바일에서 덮어씀) */
.bt-cur-titline { display: contents; }

/* 리사이즈 핸들 — 투명 스트립(좌/우 엣지 + 하단 코너), 비주얼 변화 없음.
   폭만 조절하고 높이는 콘텐츠를 따른다. 미니 창에는 핸들 없음(리사이즈 불가). */
.bt-win .bt-rs { position: absolute; z-index: 10; touch-action: none; }
.bt-rs-e  { right: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.bt-rs-w  { left: -4px;  top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.bt-rs-se { right: -6px; bottom: -6px; width: 16px; height: 16px; cursor: nwse-resize; }
.bt-rs-sw { left: -6px;  bottom: -6px; width: 16px; height: 16px; cursor: nesw-resize; }

/* ═══ 모바일 레이아웃 (창 폭 ≤880px) — Figma 115:2964: 플레이리스트 없음, 세로 스택.
   뷰포트가 아니라 .bt-win 컨테이너 폭 기준 → 유저가 창을 줄여도 동일하게 전환.
   분기점 880px = 3열 레이아웃에서 컨트롤 영역(재생 버튼+볼륨)이 겹치기 시작하는
   지점 — 그 밑으로 내려가면 겹치게 두지 않고 좌측 목록을 없애고 세로 스택으로
   전환한다(기존 768px에서 880px로 변경, 사용자 요청 2026-08-03). ═══ */
@container (max-width: 880px) {
  .bt-body { flex-direction: column; align-items: center; gap: 0; }
  .bt-col-list { display: none; }
  /* 좌우 4px 패딩 — 없으면 .bt-video의 검정 테두리가 .bt-win 바깥쪽 흰색 인셋
     하이라이트(box-shadow)와 거의 맞닿아 겹쳐 보임(사용자 지적, 2026-08-03) */
  .bt-col-center { width: 100%; flex: none; padding: 0 4px; box-sizing: border-box; }
  .bt-controls { padding: 16px 8px 24px 8px; }
  .bt-volume { width: 200px; }
  .bt-col-cur {
    max-width: none; width: 100%; flex: none;
  }
  /* 모바일 타이틀: "Smooth operator /Sade" — 타이틀은 텍스트 길이만큼만
     차지(width:100%는 flex 행에서 그대로 유효해 고정폭처럼 보였음).
     아티스트는 한 줄에 다 안 들어가면 말줄임 대신 다음 줄로 자연스럽게
     줄바꿈(말줄임으로 이름이 잘려 안 보이는 것보다 두 줄이 나음). */
  .bt-cur-tit .bt-t1 { display: inline; width: fit-content; flex-shrink: 0; max-width: 100%; }
  .bt-cur-tit .bt-t2 {
    width: fit-content; max-width: 100%; flex-shrink: 1;
    white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word;
  }
  .bt-cur-titline { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
}
/* 작은 뷰포트(실제 모바일 기기)에서의 기본 창 폭 — 리사이즈 인라인 스타일이 있으면 그쪽 우선.
   min-width는 반드시 같이 풀어줘야 함 — 기본 규칙의 880px(데스크탑 리사이즈 하한, 컨트롤
   영역 겹침 방지용)이 그대로 남아있으면 min-width가 width보다 우선 적용되는 CSS 규칙 때문에
   실제 모바일 화면에서 창이 강제로 880px폭이 되어 가로로 넘쳐버린다. */
@media (max-width: 768px) {
  .bt-win { width: min(440px, calc(100vw - 40px)); min-width: 0; }
}

/* ═══ 미니마이즈드 — Figma 107:2745: 320px, 오버레이 버튼 + 단일 리스트 행 ═══ */
.bt-mini {
  position: absolute;
  right: 40px; bottom: 40px;
  width: 320px;
  background: var(--bt-theme, #2A2118);
  color: var(--bt-text, #FFFFFF);
  transition: background-color 300ms ease, color 300ms ease;
  display: flex; flex-direction: column; align-items: center;
  z-index: 510;
  border: 1px solid #262626;
  box-shadow: inset 1px 1px 0 0 #eee, inset -1px -1px 0 0 #999, 2px 2px 0 0 rgba(0,0,0,0.5);
}
.bt-mini[hidden] { display: none; }
.bt-mini-body { width: 100%; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.bt-mini .bt-video { border-radius: 4px; }
/* 스크림+컨트롤은 비디오 영역 호버 시에만 표시.
   오버레이가 항상 포인터를 받아(투명 상태 포함) 자기 :hover로 나타난다 —
   크로스 오리진 iframe 위에선 조상 :hover가 신뢰성 없어서 이 방식이 필수.
   부수 효과로 미니마이즈 중 YT 표면 직접 클릭도 차단(기존과 동일). */
.bt-mini-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.49);
  display: flex; gap: 4px; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
}
.bt-mini-overlay:hover { opacity: 1; }
.bt-mini-overlay .bt-btn.side { background: rgba(255,255,255,0.8); }
.bt-mini .bt-row { cursor: default; }