/* =========================================================================
   배경 음악 플레이어 — 모든 페이지 공통 (assets/js/music.js)
   컨트롤러 3종(같은 audio 공유): .music--fixed 우측 하단 고정 · .music--header 헤더 안(site.js 가 삽입, ≥1200px) · .music--screen 인트로 노트북 모니터 위(PC)
   음악은 페이지를 넘어가도 이어진다 — 재생 위치를 sessionStorage 에 두고 다음 페이지가 그 자리에서 작게 시작해 2.5초에 걸쳐 본래 음량으로
   ========================================================================= */
.music{
  position:fixed;right:max(14px, env(safe-area-inset-right, 0px) + 14px);bottom:max(14px, env(safe-area-inset-bottom, 0px) + 14px);z-index:1100;
  display:flex;align-items:center;gap:2px;height:44px;padding:0 10px 0 6px;border-radius:999px;
  background:rgba(255,255,255,.8);color:#0E1430;box-shadow:0 6px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.55) inset;
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  font-family:var(--f-body, sans-serif);user-select:none;-webkit-user-select:none;
}
/* 흰색 홈 헤더 안 컨트롤러: 우측 하단과 같은 전체 버전(이전·재생/일시정지·다음·음소거·음량 슬라이더 상시). 자리를 위해 ≥1200px 에선 '멤버십 소개' 메뉴를 숨긴다(site.css).
   1200px 미만은 헤더에 자리가 없어 숨김(우측 하단 것만) */
.music--header{position:static;height:46px;padding:0 7px 0 4px;margin-left:4px;gap:0;z-index:auto;box-shadow:none;border:1.5px solid var(--rule,#D5D9EA);background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;}
.music--header .music__btn{width:32px;height:32px;}
.music--header .music__btn--play{width:34px;height:34px;margin:0 1px;}
.music--header .music__vol{width:58px;margin-left:1px;}
@media (max-width:1199px){.music--header{display:none;}}
.music__btn{
  flex:0 0 auto;width:34px;height:34px;border:0;padding:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:background .15s, transform .15s;
}
.music__btn svg{width:20px;height:20px;fill:currentColor;display:block;}
.music__btn:hover{background:rgba(14,20,48,.08);}
.music__btn:active{transform:scale(.92);}
.music__btn--play{width:38px;height:38px;background:#0E1430;color:#fff;margin:0 2px;}
.music__btn--play:hover{background:#2F5FD0;}
.music__btn--play svg{width:22px;height:22px;}
.music .ico-pause,.music .ico-mute{display:none;}
.music.is-playing .ico-play{display:none;}
.music.is-playing .ico-pause{display:block;}
.music.is-muted .ico-vol{display:none;}
.music.is-muted .ico-mute{display:block;}
.music.is-waiting .music__btn--play{animation:musicBreath 1.6s ease-in-out infinite;}
@keyframes musicBreath{0%,100%{box-shadow:0 0 0 0 rgba(14,20,48,.35);}50%{box-shadow:0 0 0 7px rgba(14,20,48,0);}}
/* 곡명은 표시하지 않고, 음량 슬라이더는 항상 같은 폭으로 펼쳐 둔다 — 호버 때 컨트롤러 너비가 변하면 누르려던 단추가 밀려 클릭이 어긋난다(2026-09-24 차트남). 다른 호버 반응(버튼 배경)은 유지 */
.music__title{display:none;}
.music__vol{
  -webkit-appearance:none;appearance:none;width:70px;height:22px;margin:0 0 0 2px;padding:0;background:transparent;cursor:pointer;
}
.music__vol::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right, #0E1430 var(--p,30%), rgba(14,20,48,.18) var(--p,30%));}
.music__vol::-moz-range-track{height:3px;border-radius:2px;background:rgba(14,20,48,.18);}
.music__vol::-moz-range-progress{height:3px;border-radius:2px;background:#0E1430;}
.music__vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#fff;border:2px solid #0E1430;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.music__vol::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #0E1430;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.music__vol:focus-visible{outline:none;}
@media (max-width:480px){
  .music{height:40px;padding:0 8px 0 4px;}
  .music__btn{width:30px;height:30px;}
  .music__btn--play{width:34px;height:34px;}
}
@media (prefers-reduced-motion:reduce){.music.is-waiting .music__btn--play{animation:none;}}

/* ---- 인트로 노트북 모니터 위 컨트롤러 (index.html 전용, 위치·크기는 intro.js) ---- */
.music--screen{
  position:absolute;right:auto;bottom:auto;z-index:4;pointer-events:auto;
  width:244px;height:44px;padding:0 8px 0 5px;gap:1px;justify-content:center;
  transform:translate(-50%,-50%) perspective(900px) rotateX(3deg) scale(var(--sk,1));transform-origin:50% 50%;
  background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 10px 26px rgba(0,0,0,.5), 0 0 34px rgba(140,190,255,.22);
  backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%);
}
.music--screen .music__vol{width:60px;margin-left:1px;}
/* PC(호버 가능·폭 700px 이상)에선 인트로 동안 우측 하단 고정 컨트롤러를 숨기고 모니터 위 것만 쓴다. 터치·좁은 화면은 반대(모니터 위 것은 너무 작아 못 누른다) */
@media (hover:hover) and (min-width:700px){.intro-active .music--fixed{display:none;}}
@media (hover:none), (max-width:699px){.music.music--screen{display:none;}}   /* .music{display:flex} 가 파일 뒤쪽에 있어 특이도를 올려야 이긴다 */
/* 흰색 홈에서 헤더 컨트롤러가 보이는 폭(≥1200px)이면 우측 하단 고정 컨트롤러는 숨긴다 */
@media (min-width:1200px){html:not(.intro-active) .music--fixed{display:none;}}

/* 헤더 컨트롤러가 없는 페이지(membership.html 등)에선 우측 하단 고정 컨트롤러를 모든 폭에서 보인다 — music.js 가 .music--solo 를 붙인다 */
.music.music--fixed.music--solo{display:flex;}

/* 모바일(터치 기기 또는 폭 767px 이하) = 음악 없음 — nomusic.js 가 html.no-music 을 붙이고 music.js 가 컨트롤러를 지운다. 이 규칙은 마지막 안전망 (2026-09-24 차트남 고정 규칙) */
html.no-music .music{display:none !important;}