/* BPS5 Loop#6 — BPS3 정본 헤더/푸터 CSS 그대로 */

:root {
  --ink: #0A0A0A;
  --bp: #2A7A94;
  --bp-d: #1F5D71;
  --mist: #F5F5F5;
  --w82: rgba(255,255,255,.82);
  --b06: rgba(10,10,10,.06);
  --b14: rgba(10,10,10,.14);
  --m99: #999;
  --silver-d: #8A9099;
  --mA6: #A6A6A6;
  --gut: 46px;
  --s64: 64px;
  --lat: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --ease: cubic-bezier(.16,.84,.3,1);
}

/* ---- 마퀴 (BPS3 정본 그대로) — position:static(흐름 안). header.gnb와 딱 붙고
   스크롤하면 함께 올라감. backdrop-filter containing-block 문제는 static이라 무관. ---- */
.marquee {
  position: static;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  height: 38px;
  display: flex;
  align-items: center;
}
.marquee .track {
  display: inline-flex;
  gap: 34px;
  padding-left: 34px;
  animation: mq 26s linear infinite;
  will-change: transform;
}
.marquee span {
  font-family: var(--lat);
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 500;
}
.marquee b { color: var(--bp); font-weight: 700; }
@keyframes mq { to { transform: translateX(-50%); } }

/* 마퀴가 static(흐름)이라 body padding-top 불필요 — BPS3와 동일하게 제거 */

/* ---- 헤더 (BPS3 정본) — 마퀴 바로 아래, 스크롤시 top:0 sticky ---- */
#header.gnb {
  position: sticky; top: 0; z-index: 60;
  background: var(--w82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--b06);
}
/* row 컨테이너 — BPS3 기반, 좌우 여백(margin) 조금 축소: max-width 1360, 패딩 32 */
#header.gnb .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  gap: 30px;
}

/* ---- 로고 .ch.b/.ch.rest/.ch.p/.ch.plus (BPS4 정본) ---- */
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--lat);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: font-size .45s var(--ease);
  overflow: visible;
  text-decoration: none;
}
.logo .ch { display: inline-block; }
.logo .b, .logo .p { color: var(--bp); }
.logo .rest {
  overflow: hidden;
  max-width: 6em;
  opacity: 1;
  transition: max-width .4s var(--ease), opacity .26s var(--ease), font-size .4s var(--ease);
}
.logo .plus {
  --pS: .2; --pr: 0deg;
  color: var(--bp); font-weight: 800;
  max-width: 0; opacity: 0;
  transform: scale(var(--pS)) rotate(var(--pr));
  transform-origin: center 58%;
  transition: max-width .4s var(--ease), opacity .3s var(--ease), transform .6s var(--ease);
}
.logo.morph { font-size: 2.7rem; }
.logo.morph .rest { max-width: 0; opacity: 0; font-size: 0; }
.logo.morph .plus { --pS: 1; max-width: .7em; opacity: 1; }
.logo.morph .b, .logo.morph .p { color: var(--ink); }

/* 로고 현지화 view (hover 시 .is-local) — 강조 글자별 spans (.ch.lp 핑크) */
.logo .logo-loc {
  display: none;
  align-items: baseline;
  font-family: var(--lat);
  color: var(--ink);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  line-height: 1;
}
.logo .logo-loc .ch { display: inline-block; }
.logo .logo-loc .ch.lp { color: var(--bp); }
.logo .logo-loc .ch:not(.lp) { color: var(--ink); }
.logo.dark .logo-loc .ch:not(.lp) { color: #fff; }
/* [BPS5 로고 정책] 워드마크는 모든 언어에서 항상 "BEAUTY PHARMACY"(대문자) 유지.
   → is-local 무력화(옛 번들 fusion.js가 hover로 is-local 토글해 소문자 별칭 보이던 버그 차단).
   번역은 텍스트 교체가 아니라 오른쪽 .logo-slide 로 슬라이드해서 노출. */
.logo.is-local > .ch { display: inline-block !important; }
.logo.is-local .logo-loc { display: none !important; }

/* 번역 슬라이드 — KO/FR/JA/ZH hover 시 BEAUTY PHARMACY 오른쪽 "옆에서" 인라인 확장으로 슬라이드.
   max-width 0→확장으로 부드럽게 밀어 나오고 2초 후 다시 0으로 사라짐. (nav 겹침 없음) */
.logo .logo-slide {
  display: inline-flex; align-items: baseline; vertical-align: baseline;
  white-space: nowrap; overflow: hidden;
  font-family: var(--lat); font-weight: 800; font-size: .8em;
  letter-spacing: -.01em; color: var(--ink);
  max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .5s var(--ease), opacity .4s var(--ease), margin-left .5s var(--ease);
}
.logo .logo-slide.show { max-width: 11em; opacity: 1; margin-left: 14px; }
.logo .logo-slide .lp { color: var(--bp); }
.logo.dark .logo-slide, #footer .logo-slide { display: none; }

/* 오버레이(.gnbov 어두운 배경) 로고 — rest 글자는 흰색, b/p/plus는 핑크 유지 (검은 배경에 묻힘 방지) */
.gnbov .logo .ch { color: #fff; }
.gnbov .logo .b, .gnbov .logo .p, .gnbov .logo .plus { color: var(--bp); }

/* 모바일 */
@media (max-width: 1023px) {
  .logo .logo-loc { font-size: 1.05rem; }
}

/* ---- nav (BPS3 정본) ---- */
.nav {
  display: flex;
  gap: 30px;
}
.nav a {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  opacity: .86;
  text-decoration: none;
  transition: opacity .3s;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--bp);
  transition: width .35s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { width: 100%; }

/* ---- util (BPS3/4 정본) — 우측 끝 ---- */
.util {
  display: flex;
  gap: 18px;
  align-items: center;
}
.util a {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .8;
  transition: all .3s;
}
.util a:hover { opacity: 1; color: var(--bp-d); }
.util .auth { display: inline-flex; gap: 18px; }
.cartnum {
  font-family: var(--lat);
  font-size: 11px;
  color: var(--bp);
  margin-left: 4px;
}

/* ---- 햄버거 우측 끝 (BPS4 fusion2 정본) ---- */
.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 2px;
  margin-left: 6px;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: .3s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- 모바일 — nav 숨김 + 햄버거만 ---- */
@media (max-width: 1023px) {
  #header.gnb .row { height: 56px; padding: 0 16px; }
  .nav { display: none; }
  .marquee { height: 30px; }
  .marquee span { font-size: 10.5px; }
  .util { gap: 12px; }
  .util a { font-size: 12px; }
  .logo { font-size: 1.05rem; }
}

/* ---- 푸터 BPS3 정본 (fusion2.css L118-128) ---- */
.ft {
  background: var(--ink);
  color: rgba(255,255,255,.55);
  padding: 78px 0 0;
}
.ft .ft-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 34px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.ft h4 {
  color: #fff;
  font-family: var(--lat);
  font-size: 13px;
  letter-spacing: .12em;
  margin: 0 0 18px;
  font-weight: 700;
}
.ft .ftlogo { margin-bottom: 16px; }
.ft a {
  display: block;
  font-size: 13px;
  padding: 5px 0;
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.ft a:hover { color: var(--bp); }
.ft .desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.6);
}
.ft .comp {
  font-size: 11.5px;
  line-height: 2;
  color: rgba(255,255,255,.4);
  padding: 24px 0 34px;
}
.ft .word {
  font-family: var(--lat);
  font-weight: 800;
  font-size: clamp(46px, 11vw, 150px);
  line-height: .8;
  color: #fff;
  opacity: .06;
  letter-spacing: -.02em;
  text-align: center;
  padding-bottom: 26px;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .ft .ft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .ft .ft-top { grid-template-columns: 1fr; }
}

/* 안전 fallback: BPS5 .fusion-ft가 BPS3 톤 유지하도록 */
#footer.fusion-ft, footer.fusion-ft {
  background: var(--ink);
  color: #fff;
  padding: 80px 28px 40px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.6;
}
#footer .fusion-ft-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto 40px;
}
#footer h4 {
  font-family: var(--lat);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 18px;
  color: #fff;
}
#footer a {
  color: #fff;
  opacity: .7;
  text-decoration: none;
  display: block;
  margin: 6px 0;
  font-size: 12.5px;
  transition: opacity .25s;
}
#footer a:hover { opacity: 1; color: var(--bp); }
#footer .fusion-word, .fusion-word {
  font-family: var(--lat);
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .85;
  color: rgba(255,255,255,.08);
  margin-top: 60px;
  text-align: center;
  user-select: none;
}

/* 결제로고 띠 */
#footer .payment-strip, .fusion-paystrip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 24px;
}
#footer .payment-strip img, .fusion-paystrip img {
  height: 22px; width: auto; opacity: .8;
}

/* ===================================================================
   Loop#9 — PC 햄버거 hide (BPS3 정본 따름)
   PC(>=1024px): .burger 숨김, .nav 표시
   모바일(<=1023px): .burger 표시, .nav 숨김
   =================================================================== */
.burger, button.burger, #burger {
  display: none !important;
}
@media (max-width: 1023px) {
  .burger, button.burger, #burger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
  }
  .nav, .bps-nav {
    display: none !important;
  }
}

/* 로고 워드마크 색 — 휴지: B·P만 메인 핑크(모든 언어 유지), 나머지 ink. glow 없음. */
.logo:not(.dark) .ch { color: var(--ink); transition: color .15s; }
.logo:not(.dark) .b, .logo:not(.dark) .p { color: var(--bp); }
/* EN hover: 핑크가 글자를 타고 이동(B→E→…→Y→B / P→…→Y→P). 이동 중엔 전부 검정, 현재 글자만 핑크. (inline JS가 .twinkling 토글) */
.logo.twinkling:not(.dark) .ch { color: var(--ink); }
.logo.twinkling:not(.dark) .ch.wave-on { color: var(--bp) !important; }
.logo:not(.dark) .ch.wave-on { color: var(--bp) !important; }
.logo:not(.dark) .logo-loc .ch { color: var(--ink); transition: color .15s; }
.logo:not(.dark) .logo-loc .ch.wave-on { color: var(--bp) !important; }
/* 별칭(.is-local) 모드: 지정 2글자(.lp)는 hover 없이도 상시 메인 핑크 (glow 없음) */
.logo:not(.dark) .logo-loc .ch.lp { color: var(--bp) !important; }

/* footer .logo.dark는 hover 시 색상 고정 */
#footer .logo, footer .logo.dark, .logo.dark {
  pointer-events: auto;
}
#footer .logo .ch, footer .logo.dark .ch, .logo.dark .ch { transition: none !important; }