@font-face {
  font-family: 'SJP Quicknav Pretendard';
  src: url('../promo/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 위치 고정·최대 너비는 기존 사이트의 상위 헤더 컨테이너가 담당합니다. */
.sjp-quicknav {
  --sq-text: #080808;
  --sq-blue-start: #0057ff;
  --sq-blue-end: #008dff;
  width: 100%;
  container: sjp-quicknav / inline-size;
  color: var(--sq-text);
  background: #fff;
  font-family: 'SJP Quicknav Pretendard', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  writing-mode: horizontal-tb;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.sjp-quicknav *, .sjp-quicknav *::before, .sjp-quicknav *::after { box-sizing: border-box; }
.sjp-quicknav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  margin: 0;
  padding: 6px 12px 4px;
  list-style: none;
}
.sjp-quicknav__item { min-width: 0; margin: 0; padding: 0; list-style: none; }
.sjp-quicknav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--sq-text);
  background: none;
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.42px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sjp-quicknav__link:visited { color: var(--sq-text); }
.sjp-quicknav__link:focus-visible { outline: 2px solid #045ef9; outline-offset: 1px; }
.sjp-quicknav__link:active { opacity: .82; }
.sjp-quicknav__link[aria-disabled="true"], .sjp-quicknav__link:disabled { cursor: default; }
.sjp-quicknav__label { display: block; }
.sjp-quicknav__label > span { display: block; white-space: nowrap; word-break: keep-all; }
.sjp-quicknav__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  height: 36px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(105deg, var(--sq-blue-start) 0%, #006dff 52%, var(--sq-blue-end) 100%);
  color: #fff;
}
.sjp-quicknav__status-icon { display: block; width: 20px; height: 24px; max-width: none; flex: none; }
.sjp-quicknav__live-text { font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: -.55px; white-space: nowrap; }
.sjp-quicknav__link--gift { gap: 4px; justify-content: flex-start; }
.sjp-quicknav__gift { display: block; width: 32px; height: 36px; max-width: none; object-fit: contain; flex: none; }
.sjp-quicknav__link--more { flex-direction: column; gap: 1px; }
.sjp-quicknav__more-icon { display: block; width: 20px; height: 20px; max-width: none; flex: none; }
.sjp-quicknav__more-text { font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px; white-space: nowrap; }

@container sjp-quicknav (max-width: 339px) {
  .sjp-quicknav__list { gap: 20px; padding-inline: 8px; }
  .sjp-quicknav__link { font-size: 11.5px; letter-spacing: -.45px; }
  .sjp-quicknav__pill { gap: 2px; padding-inline: 5px; }
  .sjp-quicknav__status-icon { width: 18px; height: 22px; }
  .sjp-quicknav__live-text { font-size: 10px; letter-spacing: -.55px; }
  .sjp-quicknav__link--gift { gap: 2px; }
  .sjp-quicknav__gift { width: 28px; height: 32px; }
}

/* 사이트 a·button·img 규칙이 글자색과 아이콘 크기를 바꾸지 않게 보정합니다. */
#header .sjp-quicknav a.sjp-quicknav__link,
#header .sjp-quicknav a.sjp-quicknav__link:link,
#header .sjp-quicknav a.sjp-quicknav__link:visited,
#header .sjp-quicknav a.sjp-quicknav__link:hover,
#header .sjp-quicknav a.sjp-quicknav__link:active,
#header .sjp-quicknav button.sjp-quicknav__link {
  color: #080808 !important;
  background: none !important;
  font-family: 'SJP Quicknav Pretendard', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.42px !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}
#header .sjp-quicknav .sjp-quicknav__pill,
#header .sjp-quicknav .sjp-quicknav__live-text { color: #fff !important; }
#header .sjp-quicknav .sjp-quicknav__live-text { font-size: 10.5px !important; letter-spacing: -.55px !important; }
#header .sjp-quicknav .sjp-quicknav__more-text { font-size: 10px !important; }
#header .sjp-quicknav img.sjp-quicknav__status-icon { width: 20px !important; height: 24px !important; max-width: none !important; }
#header .sjp-quicknav img.sjp-quicknav__gift { width: 32px !important; height: 36px !important; max-width: none !important; }
#header .sjp-quicknav img.sjp-quicknav__more-icon { width: 20px !important; height: 20px !important; max-width: none !important; }
@container sjp-quicknav (max-width: 339px) {
  #header .sjp-quicknav a.sjp-quicknav__link,
  #header .sjp-quicknav a.sjp-quicknav__link:link,
  #header .sjp-quicknav a.sjp-quicknav__link:visited,
  #header .sjp-quicknav button.sjp-quicknav__link { font-size: 11.5px !important; letter-spacing: -.45px !important; }
  #header .sjp-quicknav .sjp-quicknav__live-text { font-size: 10px !important; }
  #header .sjp-quicknav img.sjp-quicknav__status-icon { width: 18px !important; height: 22px !important; }
  #header .sjp-quicknav img.sjp-quicknav__gift { width: 28px !important; height: 32px !important; }
}