/* PC_MAIN DEDICATED FILE */
/* =========================================================
   22_header_bgm.css (PC 전용)
   - Header BGM toggle only
   ========================================================= */

.header .header-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
}

.header .bgm-toggle{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
  transition: none;
}

.header .bgm-toggle:focus,
.header .bgm-toggle:focus-visible,
.header .bgm-toggle:active{
  outline: none !important;
  box-shadow: none !important;
}

.header .bgm-toggle-label{
  line-height: 1;
  order: 1;
}

.header .bgm-toggle-eq{
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 14px;
  height: 14px;
  order: 0;
}

.header .bgm-toggle-eq i{
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: .34;
  transform-origin: 50% 100%;
}

.header .bgm-toggle[aria-pressed="true"] .bgm-toggle-eq i{
  opacity: .95;
  animation: bgmEqPulse 0.78s ease-in-out infinite;
}

.header .bgm-toggle[aria-pressed="true"] .bgm-toggle-eq i:nth-child(1){ animation-delay: 0s; }
.header .bgm-toggle[aria-pressed="true"] .bgm-toggle-eq i:nth-child(2){ animation-delay: .10s; }
.header .bgm-toggle[aria-pressed="true"] .bgm-toggle-eq i:nth-child(3){ animation-delay: .20s; }

.header .bgm-toggle[aria-pressed="false"] .bgm-toggle-eq i:nth-child(1){
  height: 4px;
  opacity: .26;
  animation: none;
}

.header .bgm-toggle[aria-pressed="false"] .bgm-toggle-eq i:nth-child(2){
  height: 7px;
  opacity: .34;
  animation: none;
}

.header .bgm-toggle[aria-pressed="false"] .bgm-toggle-eq i:nth-child(3){
  height: 5px;
  opacity: .26;
  animation: none;
}

@keyframes bgmEqPulse{
  0%{ height: 4px; opacity: .55; }
  18%{ height: 11px; opacity: .98; }
  38%{ height: 6px; opacity: .74; }
  58%{ height: 13px; opacity: 1; }
  78%{ height: 7px; opacity: .8; }
  100%{ height: 5px; opacity: .58; }
}

.header .bgm-toggle{
  color: #2E3B42;
}

body.main-transparent-header .header .bgm-toggle,
body.main-transparent-header .header.scrolled:not(:hover):not(:focus-within):not(.mega-open) .bgm-toggle{
  color: #F5F7FA !important;
}

body.section2-active.main-transparent-header .header .bgm-toggle,
body.section2-active.main-transparent-header .header.scrolled .bgm-toggle,
body.section2-active.main-transparent-header .header:not(:hover):not(:focus-within):not(.mega-open) .bgm-toggle,
body.section2-active.main-transparent-header .header.scrolled:not(:hover):not(:focus-within):not(.mega-open) .bgm-toggle,
body.section3-active.main-transparent-header .header .bgm-toggle,
body.section3-active.main-transparent-header .header.scrolled .bgm-toggle,
body.section3-active.main-transparent-header .header:not(:hover):not(:focus-within):not(.mega-open) .bgm-toggle,
body.section3-active.main-transparent-header .header.scrolled:not(:hover):not(:focus-within):not(.mega-open) .bgm-toggle,
body.sub-page .header .bgm-toggle,
body.sub-page .header.scrolled .bgm-toggle,
body.sub-page .header:hover .bgm-toggle,
body.sub-page .header:focus-within .bgm-toggle,
body.sub-page .header.mega-open .bgm-toggle{
  color: #2E3B42 !important;
}

.header:hover .bgm-toggle,
.header:focus-within .bgm-toggle,
.header.scrolled .bgm-toggle,
.header.mega-open .bgm-toggle,
body.main-transparent-header .header:hover .bgm-toggle,
body.main-transparent-header .header:focus-within .bgm-toggle,
body.main-transparent-header .header.mega-open .bgm-toggle,
body.section2-active.main-transparent-header .header:hover .bgm-toggle,
body.section2-active.main-transparent-header .header:focus-within .bgm-toggle,
body.section2-active.main-transparent-header .header.mega-open .bgm-toggle,
body.section2-active.main-transparent-header .header.scrolled .bgm-toggle,
body.section3-active.main-transparent-header .header:hover .bgm-toggle,
body.section3-active.main-transparent-header .header:focus-within .bgm-toggle,
body.section3-active.main-transparent-header .header.mega-open .bgm-toggle,
body.section3-active.main-transparent-header .header.scrolled .bgm-toggle{
  color: #2E3B42 !important;
}

body.sub-page .header .bgm-toggle:hover{
  color: #837765 !important;
}

body.footer-header-hidden .header .bgm-toggle{
  opacity: 0;
}

.site-bgm-audio{
  display: none;
}