/* Run, Brave Run. 캠페인 - braverun.css
   기준: 1920px / 이미지 경로: /images/campaign/braverun/ */
@media (max-width: 500px) {
  html {
    font-size: 14px !important;
  }
}
@media (max-width: 420px) {
  html {
    font-size: 13px !important;
  }
}
@font-face {
  font-family: "Daeojamjil";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil1Thin.woff2")
    format("woff2");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Daeojamjil";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil2Light.woff2")
    format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Daeojamjil";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil3Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Daeojamjil";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil4Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Daeojamjil";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Daeojamjil";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil6ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-display: swap;
}
/* ----- 변수 (색상·폰트·레이아웃) ----- */
.braverun {
  --br-purple: #4918a0;
  --br-purple-light: #8a48ff;
  --br-blue: #418dff;
  --br-yellow: #ffee35;
  --br-orange: #e6821f;
  --br-black: #0f1822;
  --br-white: #ffffff;
  --br-bg-light: #fbf9ff;
  --br-gray-100: #f5f5f5;
  --br-gray-200: #ebebeb;
  --br-gray-300: #ddd;
  --br-gray-400: #aaa;
  --br-gray-500: #999;
  --br-gray-600: #666;
  --br-gray-700: #555;
  --br-gray-800: #222;
  --br-gray-850: #2d2d2d;
  --br-max-w: 1400px;
  --br-pd-x: clamp(20px, 5.2vw, 100px); /* 반응형 좌우 여백 */
}
.br-sm__hide {
  display: block;
}
.br-sm__show {
  display: none;
}
@media (max-width: 48rem) {
  .br-sm__hide {
    display: none;
  }
  .br-sm__show {
    display: block;
  }
}

/* ── 스크린리더 전용 숨김 ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 공통: 섹션 래퍼 */
.br-sec__inner {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* 섹션 공통 타이틀 */
.br-sec__title {
  font-family: "Daeojamjil";
  font-size: 3.625rem;
  font-weight: 800;
  color: var(--br-black);
  text-align: center;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin-bottom: 3.75rem;
}
.br-sec__title-em {
  color: var(--br-purple);
}
/* 라이트(어두운 배경) 버전 */
.br-sec__title--light {
  color: var(--br-white);
}
.br-sec__title-em--yellow {
  color: #dde61f;
}

.br-sec__sub {
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  color: var(--br-black);
  text-align: center;
  line-height: 1.5;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}
.br-sec__sub--light {
  color: rgba(255, 255, 255, 0.85);
}

/* 1섹션: 히어로 */
.br-hero {
  position: relative;
  width: 100%;
  height: clamp(600px, 39.21vw, 753px);
  overflow: hidden;
}
/* 히어로 배경 래퍼 */
.br-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 히어로 배경 미디어 (영상·이미지 공통 Cover 효과) */
.br-hero__media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 1;
}

/* GNB */
.br-gnb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 6.25rem;
  display: flex;
  align-items: center;
  padding-inline: clamp(20px, 2.5vw, 48px);
  transition: background 0.3s ease;
}
.br-gnb.is-scrolled {
  background: rgba(0, 0, 0, 0.3);
}
.br-gnb__logo {
  flex-shrink: 0;
  margin-right: auto;
}
.br-gnb__logo img {
  display: block;
  width: auto;
}
.br-gnb__list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(16px, 2vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.br-gnb__link {
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--br-white);
  text-decoration: none;
  letter-spacing: -0.025em;
  line-height: 1.5;
  transition: opacity 0.2s;
}
.br-gnb__cta {
  position: absolute;
  right: max(1.25rem, calc((100% - 90rem) / 2 + 1.25rem));
  display: inline-flex;
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
  align-items: center;
  padding: 0.875rem 1.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: 30px 30px 27px 30px;
  background: linear-gradient(90deg, #a9cf00 0%, #dde61f 100%);
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.0281rem;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}

@media (max-width: 1280px) {
  .br-gnb__cta {
    display: none;
  }
}

/* 딤 처리 오버레이 */
.br-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* 히어로 콘텐츠 */
.br-hero__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2.5rem;
  text-align: center;
}
.br-hero__title {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  margin-bottom: 0.25rem;
  font-size: 7.5rem;
}
.br-hero__title .main__title {
  max-width: 779px;
  width: 100%;
  height: auto;
}
.br-hero__heading {
  /* PC: 한 줄 가로 배치 | Mobile: 세로 3줄 (@media에서 재정의) */
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
  font-family: "Afacad", sans-serif;
  background: linear-gradient(90deg, #dde61f 0%, #a9cf00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.br-hero__heading em {
  font-style: italic;
  font-weight: 400;
}
/* Brave / Run. — 볼드 */
.br-hero__heading strong {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.br-hero__quote {
  font-family: "Staatliches", sans-serif;
  font-size: clamp(60px, 5.2vw, 100px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* 설명 텍스트 */
.br-hero__desc .main_text {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(22px, 1.458vw, 28px);
  color: var(--br-white);
  line-height: 1.5;
  letter-spacing: -0.0313rem;
  margin-bottom: 1.5rem;
}
.br-hero__desc .main_text strong {
  font-weight: 700;
}

.br-hero__desc .sub_text {
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  color: var(--br-white);
  line-height: 1.5;
  letter-spacing: -0.025em;
  margin-bottom: 4rem;
}
.br-hero__desc .sub_text strong {
  font-weight: 800;
}

/* CTA 버튼 그룹 */
.br-hero__btns {
  display: flex;
  gap: 1.25rem;
}
.br-hero__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: clamp(320px, 19.6875vw, 378px);
  height: clamp(3.75rem, 4.1666vw, 5rem);
  padding-inline: 3rem;
  border-radius: 0;
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--br-white);
  text-decoration: none;
  letter-spacing: -0.025em;
  transition: opacity 0.2s;
  transform: skewX(-14.4deg);
}
.br-hero__btn > * {
  transform: skewX(14.4deg);
}
.br-hero__btn.left_btn {
  background: linear-gradient(90deg, #a9cf00 0%, #dde61f 100%);
}
.br-hero__btn.right_btn {
  background-color: #0f1822;
}
/* 플로팅 버튼  */
.br-floating {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 100;
}
.br-floating.is-hidden {
  display: none;
}
.br-floating__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
}

.br-floating__ico img {
  width: 14.375rem;
  height: 100%;
}
/* 모바일 버튼은 기본 숨김 */
.br-floating__btn--mo {
  display: none;
}

/* 히어로 ↔ 소개 구분선 (물결) — br-hero__bg 내 absolute bottom */
.br-visual-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
  z-index: 5;
}
.br-visual-line img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2섹션: 캠페인 및 키트 소개 */
.br-sec--intro {
  padding-block: 5rem;
}
.br-sec--intro .br-sec__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 특징 카드 3개 */
.br-intro__cards {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin-bottom: 5rem;
  width: 100%;
}
.br-intro__card {
  flex: 1;
  border: 3.5px solid var(--br-purple);
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.br-intro__card-ico img {
  width: 1.625rem;
  height: 1.625rem;
  margin-bottom: 0.125rem;
}
.br-intro__card-title {
  display: block;
  font-family: "Pretendard", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--br-purple);
  letter-spacing: -0.025em;
  line-height: 1.5;
  margin-bottom: 0.9375rem;
}
.br-intro__card-desc {
  font-family: "Pretendard", sans-serif;
  font-size: 1.125rem;
  color: var(--br-gray-800);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.br-intro__card-desc strong {
  font-weight: 700;
}

/* 키트 소개 */
.br-intro__kit {
  width: 100%;
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: 0;
}
.br-intro__kit-img {
  flex: 1 1 41.6vw;
  min-width: 0;
  height: auto;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
}
.br-intro__kit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.br-intro__kit-txt {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--br-white);
  border-radius: 1.5rem 1.5rem 5rem 1.5rem;
  padding: 2rem 4rem;
  margin-top: clamp(30px, 5.208vw, 116px);
  margin-left: clamp(-60px, -10.416vw, -200px);
  position: relative;
  z-index: 2;
  box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.1);
}
.br-intro__kit-desc {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(22px, 1.25vw, 24px);
  color: var(--br-gray-800);
  line-height: 1.5;
  letter-spacing: -0.025em;
  margin-bottom: clamp(26px, 1.66vw, 33px);
}
.br-intro__kit-em {
  color: #a9cf00;
  font-weight: 700;
}
.br-intro__kit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2.0625rem;
}
.br-intro__kit-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard", sans-serif;
  font-size: clamp(18px, 1.04vw, 20px);
  color: var(--br-gray-800);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.br-intro__kit-list li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--br-gray-800);
  flex-shrink: 0;
}
.br-intro__kit-notice {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(14px, 1.04vw, 20px);
  color: var(--br-gray-400);
  letter-spacing: -0.025em;
  line-height: 1.5;
  font-weight: 400;
}
.br-intro__kit-notice strong {
  color: #666;
  font-weight: 400;
}

/* ============================================================
   3섹션: 참여 방법
   ============================================================ */
.br-sec--how {
  position: relative;
  padding-block: 5rem;
  overflow: hidden;
  background:
    url("/images/campaign/braverun/sec-how_bg.svg") no-repeat top -7.625rem
      right -3.125rem / 29.4375rem,
    radial-gradient(
      282.74% 111.28% at 0% 100%,
      rgba(128, 172, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    radial-gradient(
      108.98% 102.99% at 93.54% 6.67%,
      rgba(145, 81, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
}

.br-sec--how .br-sec__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}

/* STEP 카드 */
.br-how__steps {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--br-white);
}
.br-how__step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 13.875rem;
  border-radius: 24px;
  text-align: center;
  padding: 2rem 0;
}
.br-how__step--1 {
  background: var(--br-purple);
}
.br-how__step--2 {
  background: #a9cf00;
}
.br-how__step--3 {
  background: #0f1822;
}

.br-how__step-arrow {
  flex-shrink: 0;
}
.br-how__step-arrow img {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
}

.br-how__step-num {
  display: block;
  font-family: "Pretendard", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;

  letter-spacing: -0.025em;
  line-height: 1.5;
}
.br-how__step-desc {
  font-family: "Pretendard", sans-serif;
  font-size: 1.125rem;
  letter-spacing: -0.0281rem;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.br-how__step--1 .br-how__step-desc {
  margin: 0.5rem 0 1rem;
}
.br-how__step--2 .br-how__step-desc {
  margin-top: 0.5rem;
}
.br-how__step--3 .br-how__step-desc {
  height: 3rem;
  margin: 0.5rem 0 1rem;
}
.br-how__step-btns {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.br-how__step-btn {
  box-sizing: border-box;
  max-width: 10.25rem;
  border-radius: 8px;
  border: 1px solid #fff;
  color: var(--br-white);
  font-family: "Pretendard", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.75rem 2rem;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.125rem;
  letter-spacing: -0.0281rem;
}

/* ============================================================
   4섹션: 참여자 이야기 (갤러리 슬라이더)
   ============================================================ */
.br-sec--gallery {
  padding: 5rem 0;
}
.br-sec--gallery .br-sec__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 슬라이더 래퍼 (column: 트랙 위, 네비 아래) */
.br-gallery__slider {
  /* 아이템/갭 크기를 변수로 정의 → 트랙 너비 계산에 재사용 */
  --gal-item-w: clamp(140px, 12.03vw, 231px);
  --gal-feat-w: clamp(180px, 16.3vw, 313px);
  --gal-gap: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.66vw, 32px);
}
.br-gallery__track {
  /* 아이템 4개 + 피처드 1개 + 갭 4개 = 정확히 5장만 노출 */
  width: calc(var(--gal-item-w) * 4 + var(--gal-gap) * 4 + var(--gal-feat-w));
  max-width: 100%;
  overflow: hidden;
}
.br-gallery__list {
  display: flex;
  align-items: flex-end;
  gap: var(--gal-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
  cursor: grab;
}
.br-gallery__list:active {
  cursor: grabbing;
}
.br-gallery__item {
  flex-shrink: 0;
  width: var(--gal-item-w);
  height: clamp(200px, 18.44vw, 354px);
  overflow: hidden;
  filter: grayscale(1);
  cursor: pointer;
  transition: filter 0.3s ease;
}
.br-gallery__item--featured {
  width: var(--gal-feat-w);
  height: clamp(250px, 24.9vw, 478px);
  filter: none;
}
.br-gallery__item img,
.br-gallery__item--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 네비게이션 래퍼 (화살표 + 도트) */
.br-gallery__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.25vw, 24px);
}

/* 화살표 버튼 */
.br-gallery__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0.8px solid var(--br-gray-300);
  border-radius: 6px;
  background: var(--br-white);
  cursor: pointer;
  transition: background 0.2s;
  color: var(--br-gray-800);
}
/* 페이지 도트 */
.br-gallery__dots {
  display: flex;
  gap: clamp(6px, 0.5vw, 10px);
}
.br-gallery__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  border: none;
  background: var(--br-gray-300);
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}
.br-gallery__dot--active,
.br-gallery__dot:focus-visible {
  background: var(--br-purple);
}

/*  4섹션: 기부자 응원 메시지 마퀴 */

/*
 * ══ 옵션값 ─ 아래 수치만 조절하면 됩니다 ════════════════════
 *
 *  --mq-speed-rtl  : 오른쪽→왼쪽 한 사이클 시간 (클수록 느림)
 *  --mq-speed-ltr  : 왼쪽→오른쪽 한 사이클 시간
 *  --mq-row-gap    : 첫째·둘째 줄 사이 세로 간격
 *  --mq-box-pad-x  : 박스 내부 좌우 패딩
 *  --mq-box-pad-y  : 박스 내부 상하 패딩
 *  --mq-box-gap    : 박스 사이 가로 간격
 *  --mq-section-py : 마퀴 영역 위아래 여백
 *
 * ═══════════════════════════════════════════════════════════ */

.br-marquee {
  --mq-speed-rtl: 40s;
  --mq-speed-ltr: 40s;
  --mq-row-gap: 16px;
  --mq-box-pad-x: 24px;
  --mq-box-pad-y: 24px;
  --mq-box-gap: 24px;
  --mq-section-py: 32px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem 1.5rem;
  padding-top: 2.5rem;
  overflow: hidden;
}

/* 한 줄 래퍼 */
.br-marquee__row {
  overflow: hidden;
  padding-block: 0.5rem;
  width: 100%;
  min-width: 0;
}

.br-marquee__inner {
  display: flex;
  width: max-content;
  will-change: transform;
  animation-play-state: paused;
}

/* 오른쪽 → 왼쪽 */
.br-marquee__row--rtl .br-marquee__inner {
  animation: br-mq-rtl var(--mq-speed-rtl) linear infinite paused;
}
/* 왼쪽 → 오른쪽 */
.br-marquee__row--ltr .br-marquee__inner {
  animation: br-mq-ltr var(--mq-speed-ltr) linear infinite paused;
}
/* 정지 시 가운데 정렬 */
.br-marquee__row.is-paused {
  display: flex;
  justify-content: center;
}
/* 정지 시 클론 숨기기 */
.br-marquee__row.is-paused [data-clone] {
  display: none;
}
.br-marquee__row.is-paused .br-marquee__inner {
  width: auto;
  animation: none;
}
/* 흐를 때: RTL → 오른쪽 시작, LTR → 왼쪽 시작 */
.br-marquee__row--rtl:not(.is-paused) {
  overflow: hidden;
  display: block;
  animation: none;
}
.br-marquee__row--ltr:not(.is-paused) {
  overflow: hidden;
  display: block;
  animation: none;
}
.br-marquee__row--rtl.is-paused {
  display: flex;
  justify-content: center;
}
.br-marquee__row--ltr.is-paused {
  display: flex;
  justify-content: center;
}
/* hover 시 일시정지 */
.br-marquee:hover .br-marquee__inner {
  animation-play-state: paused !important;
}
/* paused 상태가 아닐 때만 hover 적용 */
.br-marquee__inner:not([style*="paused"]):hover,
.br-marquee:hover .br-marquee__inner:not([style*="paused"]) {
  animation-play-state: paused;
}
/* 아이템 1개일 때: 가운데 정렬 + 애니메이션 비활성화 */
.br-marquee__row--rtl:has(.br-marquee__set:only-child) {
  display: flex;
  justify-content: center;
}
.br-marquee__row--rtl:has(.br-marquee__set:only-child) .br-marquee__inner {
  animation: none;
  width: auto;
}
/* 박스 묶음 세트 */
.br-marquee__set {
  display: flex;
  gap: var(--mq-box-gap);
  /* 세트 끝 여백 → 복제 세트 첫 박스와 동일 간격 유지 */
  padding-inline-end: var(--mq-box-gap);
}

/* 개별 박스 */
.br-marquee__box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  width: auto;
  padding: 1rem 2.5rem;
  background: #fff;
  border-radius: 4.125rem;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1);
}

/* 박스 상단: 메인 텍스트 */
.br-marquee__main {
  font-size: 1.25rem;
  font-weight: 500;
  color: #0f1822;
  line-height: 1.5;
  letter-spacing: -0.0313rem;
  margin: 0;
}

/* 박스 하단: 기업정보 · 이름 기부자님 */
.br-marquee__sub {
  font-size: 1rem;
  font-weight: 700;
  color: #0f1822;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  margin: 0;
}
.br-marquee__sub .br-marquee__donor {
  font-weight: 400;
}

/* 키프레임 */
@keyframes br-mq-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes br-mq-ltr {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* 5섹션: 명예의 전당 */
.br-sec--hall {
  position: relative;
  padding-top: clamp(60px, 6.25vw, 120px);
  padding-bottom: clamp(
    80px,
    8.33vw,
    160px
  ); /* podium·table이 bg 아래로 걸치는 여백 */
}

/* 배경 (어두운 보라 + 별 효과) — 섹션 상단 고정 높이만 커버 */
.br-hall__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(30rem, 40.104vw, 48.125rem); /* 타이틀·서브텍스트 영역까지만 */
  background: url("/images/campaign/braverun/hall_bg.png") no-repeat center /
    cover;
  z-index: 0;
}

.br-sec--hall .br-sec__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TOP 3 포디움 */
.br-hall__podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3.4375rem;
  width: 100%;
  margin-bottom: 1.375rem;
  padding: 0 5rem;
}
.br-hall__medal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 4px;
  padding: 1rem 4rem 1rem 2.625rem;
  width: 24.25rem;
  width: 24.25rem;
  height: 5.125rem;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
/* 오른쪽만 사선 — 배경을 ::before 로 분리 */
.br-hall__medal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0f1822;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
  z-index: 0;
}
.br-hall__medal > * {
  position: relative;
  z-index: 1;
}
.br-hall__medal--gold {
  margin-bottom: 32px;
}

.br-hall__medal-ico {
  position: absolute;
  top: -29px;
  left: 0;
  transform: translateX(-50%);
  z-index: 1;
}
.br-hall__medal-ico img {
  width: 3.9375rem;
  height: auto;
  display: block;
}

.br-hall__medal-glory {
  position: absolute;
  top: -1.375rem;
  left: 0.9375rem;
  transform: translate(-50%, -50%);
  width: 6.5rem;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.br-hall__medal-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.br-hall__medal-company {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(12px, 0.72vw, 14px);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.025em;
}
.br-hall__medal-name {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--br-white);
  letter-spacing: -0.025em;
}
.br-hall__medal-dist {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(14px, 1.04vw, 20px);
  font-weight: 700;
  color: var(--br-white);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

/* 랭킹 테이블 */
.br-hall__table-wrap {
  width: 100%;
  background: var(--br-white);
  padding: 3.75rem 9.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1.5rem;
  box-shadow: 0.5rem 0.5rem 1rem 0 rgba(34, 34, 34, 0.15);
}
.br-hall__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  table-layout: fixed;
}
.br-hall__table th {
  font-weight: 400;
  color: var(--br-gray-500);
  letter-spacing: -0.025em;
  padding-block: 12px;
  text-align: center;
  border-bottom: 1px solid var(--br-gray-200);
  font-size: 1.25rem;
}
.br-hall__table td {
  color: var(--br-black);
  letter-spacing: -0.025em;
  padding-block: 18px;
  text-align: center;
  font-weight: 500;
  font-size: 1.25rem;
}

/* 컬럼 너비 비율 (976px 기준, 패딩 포함) */
.br-hall__table th:nth-child(1) {
  width: 18%;
} /* rank:    ~176px */
.br-hall__table th:nth-child(2) {
  width: 20%;
} /* name:    ~195px */
.br-hall__table th:nth-child(3) {
  width: 32%;
} /* company: ~312px */
.br-hall__table th:nth-child(4) {
  width: 30%;
} /* dist:    ~293px */

/* 좌우 여백 & 컬럼 간 간격 (113px = 5.8% × 2) */
.br-hall__table th,
.br-hall__table td {
  padding-inline: 5.8%;
} /* 컬럼 사이 113px */
.br-hall__table th:first-child,
.br-hall__table td:first-child {
  padding-left: 8%;
} /* 좌측 78px */
.br-hall__table th:last-child,
.br-hall__table td:last-child {
  padding-right: 8%;
} /* 우측 78px */

.br-hall__table td.hall__dist {
  color: var(--br-purple);
  font-weight: 700;
}
.br-hall__table td.hall__change {
  color: var(--br-gray-400);
}
.br-hall__table td.hall__change.br-hall__change--up {
  color: var(--br-purple);
}
.br-hall__table td.hall__change--down {
  color: var(--br-gray-400);
}
.br-hall__change-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

/* 더 불러오기 버튼 (table-wrap 외부 배치) */
.br-hall__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(12rem, 12.604vw, 15.125rem);
  height: 3.625rem;
  border: 1px solid var(--br-gray-500);
  border-radius: 0.5rem;
  background: var(--br-white);
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--br-gray-500);
  letter-spacing: -0.0313rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 3rem;
}

/* 순위 테이블 행 초기 숨김 (11위~) */
.br-hall__row--hidden {
  display: none !important;
}

/* ============================================================
   6섹션: 함께 하는 기업
   ============================================================ */
.br-sec--partners {
  position: relative;
  background: var(--br-bg-light);
  padding-block: 5rem;
  overflow: hidden;
}
.br-partners__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.br-partners__bg-left {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(17.625rem, 39.53125vw, 47.4375rem);
  height: 100%;
  background: url("/images/campaign/braverun/partners_bg_01.svg") no-repeat left
    top / contain;
}
.br-partners__bg-right {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(23.4375rem, 31.1458vw, 37.375rem);
  height: 100%;
  background: url("/images/campaign/braverun/partners_bg_02.svg") no-repeat
    right bottom / contain;
}
.br-sec--partners .br-sec__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible; /* 화살표가 inner(90rem) 밖으로 나올 수 있도록 */
}

/* 슬라이더: PC/태블릿 — 트랙이 inner(90rem) 전체 폭, 화살표는 그 바깥 */
.br-partners__slider {
  width: calc(100% + 160px); /* arrow 60px + gap 20px = 80px × 양쪽 */
  margin-inline: -80px;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* display:contents → 두 버튼이 slider의 flex 직계 자식으로 편입 */
.br-partners__arrows {
  display: contents;
}
/* 순서: prev(0) – track(1) – next(2) */
.br-partners__arrow--prev {
  order: 0;
}
.br-partners__track {
  order: 1;
  flex: 1;
  overflow: hidden;
  padding: 8px 0; /* 상하 공간만 (filter:drop-shadow가 좌우 그림자 처리) */
  filter: drop-shadow(
    2px 3px 12px rgba(0, 0, 0, 0.1)
  ); /* 트랙 외부에 shadow 렌더 → 좌우 끝도 자연스럽게 */
}
.br-partners__arrow--next {
  order: 2;
}
.br-partners__list {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
  cursor: grab;
}
.br-partners__list:active {
  cursor: grabbing;
}
.br-partners__item {
  flex-shrink: 0;
  width: 21.125rem;
  background: var(--br-white);
  border-radius: 24px;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 0.83vw, 16px);
  padding: 1rem 1rem 1.5rem 1rem;
}
.br-partners__logo-wrap {
  width: 100%;
  height: clamp(120px, 9.6vw, 185px);
  border: 1px solid var(--br-gray-100);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.br-partners__logo-wrap img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.br-partners__stats {
  padding-inline: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.br-partners__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 27px;
}
.br-partners__stat dt {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(14px, 0.93vw, 18px);
  font-weight: 400;
  color: var(--br-gray-850);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.br-partners__stat dd {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(14px, 0.93vw, 18px);
  letter-spacing: -0.025em;
  line-height: 1.5;
  text-align: right;
  margin: 0;
}
.br-partners__stat dd strong {
  color: var(--br-purple);
  font-weight: 600;
}
.br-partners__stat dd :not(strong) {
  color: var(--br-gray-400);
  font-weight: 400;
}

/* 화살표 버튼: 이미지 전용 영역 */
.br-partners__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.br-partners__arrow img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 파트너 슬라이더: 4개 미만 — 정적 센터 정렬 */
.br-partners__slider--static {
  width: 100%;
  margin-inline: 0;
}
.br-partners__slider--static .br-partners__track {
  overflow: visible;
}
.br-partners__slider--static .br-partners__list {
  justify-content: center;
  flex-wrap: wrap;
  cursor: default;
}
.br-partners__slider--static .br-partners__arrows {
  display: none !important;
}

/* 7섹션: 자주 묻는 질문 */
.br-sec--faq {
  padding: 3.75rem 0 5rem;
}
.br-sec--faq .br-sec__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* FAQ 리스트 */
.br-faq__list {
  width: 100%;
  background: var(--br-white);
  border-radius: 1.5rem;
  overflow: hidden;
}
.br-faq__line {
  margin: 0;
  border: none;
  border-top: 1px solid var(--br-gray-200);
}

/* 질문 버튼 */
.br-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.9375rem 4rem;
  background: var(--br-white);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.br-faq__q-num {
  flex-shrink: 0;
  width: 46px;
  font-family: "Pretendard", sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 700;
  color: var(--br-purple);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.br-faq__q-txt {
  flex: 1;
  font-family: "Pretendard", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--br-gray-800);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
/* + / − 아이콘 */
.br-faq__q-ico {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--br-purple);
  border-radius: 50%;
  position: relative;
  transition: background 0.15s;
  background: var(--br-purple);
  cursor: pointer;
}
.br-faq__q-ico::before,
.br-faq__q-ico::after {
  content: "";
  position: absolute;
  background: var(--br-white);
  border-radius: 0.125rem;
}
.br-faq__q-ico::before {
  width: 0.875rem;
  height: 0.125rem;
}
.br-faq__q-ico::after {
  width: 0.125rem;
  height: 0.875rem;
  transition: transform 0.2s;
}

/* 열린 상태: 마이너스 */
.br-faq__item--open .br-faq__q-ico {
  background: var(--br-white);
}
.br-faq__item--open .br-faq__q-ico::before,
.br-faq__item--open .br-faq__q-ico::after {
  background: var(--br-purple);
}
.br-faq__item--open .br-faq__q-ico::after {
  transform: rotate(90deg) scaleY(0);
}

/* 답변 영역 */
.br-faq__a {
  padding: 1.25rem 6.875rem;
  background: var(--br-bg-light);
}
.br-faq__a p {
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  color: var(--br-gray-700);
  letter-spacing: -0.023em;
  line-height: 1.5;
  margin: 0;
}
.br-faq__a p .emph {
  position: relative;
  padding-left: 1.25rem;
  display: inline-block;
}
.br-faq__a p .emph:before {
  position: absolute;
  content: "※";
  left: 0;
  top: 0;
}
.br-faq__a p + p {
  margin-top: 1rem;
}
.br-faq__a strong {
  color: var(--br-purple);
  font-weight: 700;
}

/* 추가 문의 바 */
.br-faq__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.9375rem 4rem;
  background: #f9f9f9;
  border: 1px solid var(--br-gray-200);
  border-radius: 1rem;
  margin: 0;
}
.br-faq__contact-info {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  flex: 1;
}
.br-faq__contact-ico img {
  width: 1.5rem;
  height: 1.5rem;
}
.br-faq__contact-label {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  color: var(--br-gray-800);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.br-faq__contact-tel {
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  color: var(--br-purple);
  letter-spacing: -0.025em;
  line-height: 1.5;
  text-align: right;
  margin: 0;
  white-space: nowrap;
}
.br-faq__contact-tel a {
  color: inherit;
  text-decoration: none;
}
.br-faq__contact-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.375rem;
  height: 3rem;
  background: var(--br-black);
  border-radius: 5rem;
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--br-white);
  transition: opacity 0.2s;
}
/* 8섹션: Brave Enough! CTA */
.br-sec--cta {
  padding: 0 1.25rem;
  margin-bottom: 5rem;
}
.br-cta__inner {
  max-width: var(--br-max-w);
  margin-inline: auto;
  position: relative;
  height: 20rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
.br-cta__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/images/campaign/braverun/cta_bg_01.webp") no-repeat center /
    cover;
  z-index: 0;
}

.br-cta__content {
  position: absolute;
  z-index: 1;
  top: 36px;
  left: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta_title {
  display: block;
}

.cta_title--mo {
  display: none;
}

.br-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border: 1px solid var(--br-white);
  border-radius: 0.5rem;
  font-family: "Pretendard", sans-serif;
  font-size: 1.25rem;
  color: var(--br-white);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.025em;
  transition: background 0.2s;
  margin-top: 0.8125rem;
}

.braverun ~ .all_sns_wrap {
  display: none;
}

/* 반응형: 태블릿 (~1280px) start */
@media (max-width: 1280px) {
  /* GNB: fixed → absolute, 리스트 숨김 */
  .br-gnb {
    position: absolute;
  }
  .br-gnb__list {
    display: none;
  }

  /* ──────────────────────────────────────────────────
     3섹션: 참여 방법
     피그마 551:738: STEP 카드 세로 배치 + 아래 화살표
  ────────────────────────────────────────────────── */
  .br-sec--how {
    padding-block: 5rem;
    position: relative;
    overflow: hidden;
  }
  .br-sec--how .br-sec__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .br-sec--how .br-sec__title {
    text-align: center;
  }
  .br-sec--how .br-sec__sub {
    text-align: center;
  }
  /* STEP 목록: 세로 배치 */
  .br-how__steps {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }
  /* STEP 카드 */
  .br-how__step {
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
    gap: 0.75rem;
  }
  .br-how__step-num {
    font-size: 1.5rem;
    letter-spacing: -0.0375rem;
    line-height: 1.5;
  }
  .br-how__step-desc {
    font-size: 1.125rem;
    letter-spacing: -0.0281rem;
    line-height: 1.5;
    margin: 0;
    white-space: normal;
    text-align: center;
  }
  /* 화살표: ↓ 방향으로 회전, 56×56px 원형 */
  .br-how__step-arrow {
    display: none;
  }

  /* 키트 소개: 이미지 위, 텍스트 아래 */
  .br-intro__kit {
    flex-direction: column;
    gap: 0.9375rem;
    border-radius: 1rem;
    overflow: visible;
  }
  .br-intro__kit-img {
    flex: none;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0.125rem 0.125rem 0px rgba(0, 0, 0, 0.1);
    aspect-ratio: 800/448;
  }
  .br-intro__kit-img picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .br-intro__kit-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* 텍스트 카드: 피그마 모바일 rounded: tl=16 tr=16 bl=16 br=60 */
  .br-intro__kit-txt {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    border-radius: 1rem 1rem 5rem 1rem;
    padding: 2rem 1.25rem 2.25rem;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
  }
  .br-intro__kit-desc {
    font-size: 1.5rem;
    letter-spacing: -0.0313rem;
    line-height: 1.5;
    white-space: normal;
    margin-bottom: 1.25rem;
  }
  .br-intro__kit-list {
    gap: 0.25rem;
    margin-bottom: 1rem;
  }
  .br-intro__kit-list li {
    font-size: 1.25rem;
    letter-spacing: -0.0281rem;
    line-height: 1.5;
  }
  .br-intro__kit-notice {
    font-size: 18px;
    letter-spacing: -0.0281rem;
    line-height: 1.5;
  }
  /* 5섹션: 세로 포디움 커버하도록 bg 높이·inner gap 조정 */
  .br-hall__bg {
    height: clamp(36rem, 60vw, 48rem);
  }
  .br-sec--hall .br-sec__inner {
    gap: 2rem;
  }
  .br-hall__table-wrap {
    padding: 1.5rem 1.5rem 3.75rem 1.5rem;
    overflow: hidden;
  }
  /* TOP3 포디움: 세로 나열, 1위-2위-3위 순서 유지 */
  .br-hall__podium {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    max-width: 43.75rem;
  }
  .br-hall__medal {
    min-width: unset;
    width: 100%;
    padding: 1.5rem 2.5rem;
    margin-bottom: 0;
  }
  /* 1위 항상 맨 위 */
  .br-hall__medal--gold {
    order: -1;
    margin-bottom: 0;
  }
  .br-hall__medal--silver {
    order: 0;
  }
  .br-hall__medal--bronze {
    order: 1;
  }
  /* 헤더 숨김 */
  .braverun .br-hall__table thead {
    display: none;
  }

  .braverun .br-hall__table tbody tr {
    display: grid;
    grid-template-columns: 2rem auto auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ebebeb;
    column-gap: 0.5rem;
  }

  .braverun .br-hall__table tbody tr:last-child {
    border-bottom: none;
  }

  /* 순위 — col1, 2행 span, 세로 중앙 */
  .braverun .br-hall__table td:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 0;
    border: none;
    text-align: left;
    color: var(--br-black);
  }

  /* 이름 — 행2, col2 (auto폭: 회사명이 더 길면 회사명 폭 기준) */
  .braverun .br-hall__table td:nth-child(2) {
    grid-row: 2;
    grid-column: 2;
    font-size: 1rem;
    font-weight: 500;
    color: var(--br-black);
    padding: 0;
    border: none;
    text-align: left;
  }
  /* 회사명 — 행1, col2~4 span (빈 col3~4 채워서 변동만 우측 고정) */
  .braverun .br-hall__table td:nth-child(3) {
    grid-row: 1;
    grid-column: 2 / 5;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--br-gray-500);
    padding: 0;
    border: none;
    text-align: left;
    line-height: 1.5;
  }
  /* 거리 — col5, 2행 span, 세로 중앙 (순위와 동일한 방식) */
  .braverun .br-hall__table td:nth-child(4) {
    grid-row: 1 / 3;
    grid-column: 5;
    align-self: center;
    font-size: 1rem;
    font-weight: 700;
    color: val(--br-purple);
    padding: 0;
    border: none;
    text-align: right;
    white-space: nowrap;
  }
  /* 변동 — col5, 2행 span, 세로 중앙 */
  .braverun .br-hall__table td:nth-child(5) {
    grid-row: 1 / 3;
    grid-column: 5;
    align-self: center;
    font-size: 1rem;
    padding: 0;
    border: none;
    text-align: right;
    white-space: nowrap;
  }
  .br-floating__btn--mo {
    width: 7.5rem;
    height: 7.5rem;
  }
  .br-floating {
    right: 1rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* PC 버튼 숨김 */
  .br-floating__btn--pc {
    display: none;
  }
  /* 모바일 버튼 노출 */
  .br-floating__btn--mo {
    display: block;
    width: 5rem;
    height: 5rem;
  }
  .br-floating__btn--mo img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .br-floating__txt {
    font-size: 10px;
  }

  /* 6섹션: 파트너 슬라이더 — 화살표 하단 배치 */
  .br-partners__slider {
    flex-direction: column;
    width: 100%;
    margin-inline: 0;
    gap: 1.5rem;
    align-items: stretch;
  }
  .br-partners__track {
    order: 0;
    flex: none;
    width: 100%;
  }
  .br-partners__arrows {
    display: flex;
    order: 1;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  .br-partners__arrow--prev,
  .br-partners__arrow--next {
    order: unset;
  }
}
/* 반응형: 태블릿 (~1280px) end */

/* 반응형: 데스크탑 중간 (1281px ~ 1559px) — 화살표 하단 배치
   1560px 미만: 화살표가 섹션 overflow:hidden에 잘리는 구간
   → 슬라이더를 column으로 전환, track이 inner 전체 너비(1400px) 사용
   → 화살표 하단 수평 배치로 4카드 모두 온전히 노출 */
@media (min-width: 1281px) and (max-width: 1559px) {
  .br-partners__slider {
    flex-direction: column;
    width: 100%;
    margin-inline: 0;
    gap: 24px;
    align-items: stretch;
  }
  /* track: 슬라이더 전체 너비 차지 (화살표 공간 불필요) */
  .br-partners__track {
    order: 0;
    flex: none;
    width: 100%;
  }
  /* 화살표 래퍼: 트랙 아래 가로 배치 */
  .br-partners__arrows {
    display: flex;
    order: 1;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  .br-partners__arrow--prev,
  .br-partners__arrow--next {
    order: unset;
  }
}

/*반응형: 태블릿 중간 (769px ~ 1200px) */
@media (max-width: 1200px) and (min-width: 769px) {
  /* 보라 배경: table-wrap 상단이 걸치도록 높이 확장 */
  .br-hall__bg {
    height: 48.4375rem;
  }
  /*
   * 5열 그리드:
   * col1: 순위(span 2행)  col2: 회사명(행1)/이름(행2, auto폭)
   * col3: 거리(행2, 이름 바로 옆)  col4: 빈공간(1fr)  col5: 변동(span 2행)
   */
}

/*반응형: 모바일 (~768px) start */
@media (max-width: 768px) {
  /* 키트 이미지: 모바일 이미지 비율 352/753 (padding-top 방식) */
  .br-intro__kit-img {
    position: relative;
    height: 0;
    padding-top: calc(753 / 352 * 100%);
  }
  .br-intro__kit-img picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .br-intro__kit-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ── 공통 레이아웃 ── */
  .br-sec__inner {
    padding-inline: 1.25rem;
  }
  /* 섹션 타이틀 */
  .br-sec__title {
    font-size: 2.25rem;
    letter-spacing: -0.0563rem;
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .br-sec__sub {
    font-size: 1rem;
    letter-spacing: -0.025rem;
    text-align: center;
  }

  /* 1섹션: 히어로 (모바일) */
  .br-hero {
    height: auto;
    min-height: 55.8125rem;
    position: relative;
    overflow: hidden;
  }
  .video-background__player {
    width: 250vw;
    height: 140.625vw;
  }
  /* GNB */
  .br-gnb {
    height: 3.5rem;
    padding-top: 0.75rem;
  }
  .br-gnb__logo img {
    height: 3.25rem;
    width: auto;
  }
  /* 히어로 콘텐츠 */
  .br-hero__content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 6.25rem;
    padding-inline: 1.25rem;
    padding-bottom: 5rem;
  }
  .br-visual-line {
    bottom: -0.1875rem;
  }
  /* 제목 영역: 따옴표 + 타이틀 */
  .br-hero__title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .br-hero__title .main__title {
    max-width: 779px;
    width: 100%;
    height: auto;
  }

  /* h1: 세로 3줄 (Run, / Brave / Run.) */
  .br-hero__heading {
    font-size: 5.625rem;
    line-height: 0.88;
    letter-spacing: -0.1406rem;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2.25rem;
    margin: 0;
    gap: 0;
    font-family: "Afacad", sans-serif;
    line-height: 0.88;
  }
  .br-hero__heading em {
    font-style: italic;
    font-weight: 400;
    display: block;
    -webkit-text-fill-color: transparent;
  }
  .br-hero__heading strong {
    font-weight: 700;
    font-style: normal;
    display: block;
    letter-spacing: -0.1688rem;
    -webkit-text-fill-color: transparent;
  }

  .br-hero__desc .main_text {
    font-size: 1.375rem;
    letter-spacing: -0.0313rem;
    line-height: 1.5;
    color: #fff;
    margin-top: 1.5rem;
    text-align: center;
  }
  .br-hero__desc br {
    display: block;
  }
  .br-hero__desc .sub_text {
    font-size: 1rem;
    letter-spacing: -0.0313rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
  }

  /* CTA 버튼: 세로 스택 */
  .br-hero__btns {
    gap: 0.5rem;
    width: calc(100% - 0.625rem);
  }
  .br-hero__btn {
    width: 50%;
    height: 56px;
    padding-inline: 2rem;
    font-size: 1rem;
    justify-content: space-between;
    border-radius: 0;
  }
  .br-hero__btn--purple {
    background: #4918a0;
    border: none;
    border-radius: 0;
  }
  .br-hero__btn--dark {
    background: #1a1a2e;
    border: none;
    border-radius: 0;
  }
  /*  3섹션: 참여 방법 배경 SVG (모바일) - 좌측 하단 */
  .br-sec--how {
    background:
      url("/images/campaign/braverun/sec-how_bg_02.svg") no-repeat top -1.75rem
        right -6.6875rem / 22.125rem 24.375rem,
      url("/images/campaign/braverun/sec-how_bg.svg") no-repeat bottom -0.875rem
        left -13.0625rem / 29.375rem,
      radial-gradient(
        282.74% 111.28% at 0% 100%,
        rgba(128, 172, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 100%
      ),
      radial-gradient(
        108.98% 102.99% at 93.54% 6.67%,
        rgba(145, 81, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 100%
      );
  }

  /* 2섹션: 캠페인 및 키트 소개 (모바일) */
  .br-sec--intro {
    padding-block: 3.75rem 3rem;
  }
  .br-sec--intro .br-sec__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }
  .br-sec--intro .br-sec__title {
    margin-bottom: 0;
  }
  .br-intro__cards {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
  }
  .br-intro__card {
    min-width: 100%;
    width: 100%;
    border-width: 0.2188rem;
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
  }
  .br-intro__card-ico {
    margin-bottom: 0;
  }
  .br-intro__card-ico img {
    width: 1.625rem;
    height: 1.625rem;
  }
  .br-intro__card-title {
    letter-spacing: -0.0344rem;
    margin-bottom: 0.5rem;
  }
  .br-intro__card-desc {
    letter-spacing: -0.025rem;
    white-space: normal;
  }

  /* 4섹션: 참여자 이야기 갤러리 (모바일) */
  .br-sec--gallery {
    padding-block: 60px 48px;
  }
  .br-gallery__slider {
    display: none;
  }

  /* 4섹션: 기부자 마퀴 (모바일)*/
  .br-marquee {
    --mq-box-pad-x: 16px;
    --mq-box-pad-y: 16px;
    --mq-section-py: 24px;
    padding-top: 0;
  }
  .br-marquee__main {
    font-size: 0.9375rem;
  }
  .br-marquee__sub {
    font-size: 0.75rem;
  }

  /* 5섹션: 명예의 전당 (모바일) */
  .br-sec--hall {
    padding-top: 3.75rem;
    padding-bottom: 5rem;
  }
  /* 모바일 전용 배경 이미지 + table-wrap 상단이 bg에 살짝 걸치도록 높이 조정 */
  .br-hall__bg {
    background-image: url("/images/campaign/braverun/hall_bg_mo.webp");
    height: 48.4375rem;
  }
  .br-sec--hall .br-sec__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .br-sec--hall .br-sec__title {
    margin-bottom: 2rem;
    text-align: center;
  }
  .br-sec--hall .br-sec__sub {
    text-align: center;
    white-space: normal;
  }

  /* 모바일: 아이콘을 flex 흐름 안으로 */
  .br-hall__podium {
    width: calc(100% - 2.5rem);
    gap: 2rem;
    padding: 0;
  }
  .br-hall__medal-ico img {
    width: 3rem;
  }
  .br-hall__medal-company {
    font-size: 0.8125rem;
  }
  .br-hall__medal-name {
    font-size: 1.125rem;
  }
  .br-hall__medal-dist {
    font-size: 1rem;
    font-weight: 700;
  }

  /* 순위 테이블: 카드형으로 재구성 */
  .br-hall__table-wrap {
    width: 100%;
    padding: 0 0 3.75rem 0;
    border-radius: 1.5rem;
    background: #fff;
    overflow: hidden;
  }
  .br-hall__table {
    max-width: 61rem;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }
  /* 헤더 숨김 - 각 행이 자체 레이블 역할 */
  .br-hall__table thead {
    display: none;
  }

  /* 각 행을 카드 형태로 (태블릿과 동일 구조) */
  .braverun .br-hall__table tbody tr {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    padding: 1rem 1.25rem;
    border-bottom: 0.0625rem solid #ebebeb;
    column-gap: 0.5rem;
  }
  .braverun .br-hall__table tbody tr:first-child {
    padding-top: 1.5rem;
  }
  .braverun .br-hall__table tbody tr:last-child {
    border-bottom: none;
  }

  /* 회사명 — col2만 (col3은 거리에 양보) */
  .braverun .br-hall__table td:nth-child(3) {
    grid-column: 2;
  }
  /* 거리 — col3, 2행 span, 세로 중앙 (순위와 동일한 방식) */
  .braverun .br-hall__table td:nth-child(4) {
    grid-row: 1 / 3;
    grid-column: 3;
    align-self: center;
    text-align: right;
  }

  /* 더 불러오기 버튼 (table-wrap 외부) */
  .br-hall__more {
    margin-top: 2.5rem;
    font-size: 1rem;
    height: 3.5rem;
  }

  /*  6섹션: 함께 하는 기업 (모바일) */
  .br-sec--partners {
    padding-block: 3.75rem 4.375rem;
    overflow: hidden;
  }
  .br-sec--partners .br-sec__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .br-sec--partners .br-sec__title {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .br-sec--partners .br-sec__sub {
    text-align: center;
  }

  /* 슬라이더: 세로 배치 — 768px↓ 태블릿과 동일한 아이템 크기 유지 */
  .br-partners__slider {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
    margin-inline: 0;
  }

  .br-partners__track {
    order: 0;
    flex: none;
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    filter: drop-shadow(2px 3px 12px rgba(0, 0, 0, 0.1));
  }

  /* 화살표 래퍼: 트랙 아래 가로 배치로 복원 */
  .br-partners__arrows {
    display: flex;
    gap: 1rem;
    order: 1;
    align-items: center;
    justify-content: center;
  }

  .br-partners__list {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 태블릿과 동일한 21.125rem 크기 유지 — shadow는 track filter로 대체 */
  .br-partners__item {
    min-width: 21.125rem;
    width: 21.125rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 0.83vw, 16px);
    padding: 1rem 1rem 1.5rem 1rem;
    background: var(--br-white);
    border-radius: 24px;
    box-shadow: none;
    box-sizing: border-box;
  }

  /* 로고 영역 */
  .br-partners__logo-wrap {
    width: 100%;
    height: 11.5625rem;
    border: 0.0625rem solid #f5f5f5;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
  }
  .br-partners__logo-wrap img {
    max-width: 12.5rem;
    max-height: 4.125rem;
    object-fit: contain;
  }

  /* 통계 */
  .br-partners__stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .br-partners__stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.3125rem;
  }
  .br-partners__stat dt {
    font-size: 1.125rem;
    letter-spacing: -0.0281rem;
    color: #2d2d2d;
  }
  .br-partners__stat dd {
    font-size: 1.125rem;
    letter-spacing: -0.0281rem;
  }
  .br-partners__stat dd strong {
    color: #4918a0;
  }
  .br-partners__stat dd span {
    color: #aaa;
  }

  /* 화살표 버튼 모바일 크기 */
  .br-partners__arrow {
    width: 3.75rem;
    height: 3.75rem;
  }

  /* 7섹션: 자주 묻는 질문 (모바일) */
  .br-sec--faq {
    padding-block: 4.375rem 3.75rem;
  }

  .br-sec--faq .br-sec__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .br-sec--faq .br-sec__title {
    text-align: center;
  }
  .br-sec--faq .br-sec__sub {
    text-align: center;
  }
  .br-faq__list {
    box-shadow: none;
    border-radius: 0;
  }
  /* FAQ Q 버튼 */
  .br-faq__q {
    padding: 1.5rem 0;
    gap: 0.1875rem;
    width: 100%;
  }
  .br-faq__q-num {
    font-size: 1rem;
    letter-spacing: -0.025px;
    flex-shrink: 0;
    width: fit-content;
    align-self: flex-start;
  }
  .br-faq__q-txt {
    font-size: 1rem;
    letter-spacing: -0.025rem;
    line-height: 1.5;
    flex: 1;
    text-align: left;
    white-space: normal;
  }

  .br-faq__q-ico {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.125rem;
    border-radius: 2.5rem;
    flex-shrink: 0;
    margin-left: 0.75rem;
    position: relative;
  }
  .br-faq__q-ico::before {
    width: 0.625rem;
    height: 0.125rem;
  }
  .br-faq__q-ico::after {
    width: 0.125rem;
    height: 0.625rem;
  }

  /* FAQ 답변 */
  .br-faq__a {
    padding: 1rem 1.5rem;
    background: #fbf9ff;
  }
  .br-faq__a p {
    font-size: 1rem;
    letter-spacing: -0.025rem;
    line-height: 1.5;
    padding-inline: 0;
    margin: 0;
    width: 100%;
  }
  .br-faq__line {
    margin: 0;
    border-color: #ebebeb;
  }
  /* 추가 문의 */
  .br-faq__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    margin-top: 0.5rem;
  }
  .br-faq__contact-info {
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  .br-faq__contact-tel {
    text-align: left;
    font-size: 1rem;
  }
  .br-faq__contact-label {
    font-size: 1rem;
  }
  .br-faq__contact-btn {
    width: 7.375rem;
    text-align: center;
    height: 3rem;
    font-size: 1.25rem;
  }

  /* 8섹션: Brave Enough! CTA (모바일) */
  .br-sec--cta {
    margin-bottom: 3.75rem;
  }
  /* 배너를 카드 형태로 */
  .br-cta__inner {
    aspect-ratio: 335 / 480;
    height: auto;
    margin-inline: auto;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
  }
  .br-cta__bg {
    background: url(/images/campaign/braverun/cta_bg_mo_01.webp) no-repeat
      center / cover;
  }
  .br-cta__content {
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    width: max-content;
    max-width: calc(100% - 3rem);
  }
  .br-cta__title {
    font-size: 1.5rem;
    letter-spacing: -0.025rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }
  .br-cta__desc {
    font-size: 1rem;
    letter-spacing: -0.4px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
  .br-cta__btn {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    letter-spacing: -0.025rem;
    border-radius: 0.5rem;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 0;
  }
  .cta_title--pc {
    display: none;
  }
  .cta_title--mo {
    display: block;
    height: auto;
  }
} /* (max-width: 768px) end */
@media (max-width: 500px) {
  .br-hero__btns {
    flex-direction: column;
    gap: 0.5rem;
    width: calc(100% - 0.625rem);
  }
  .br-hero__btn {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────
   파트너 슬라이더: 500px 이하 — 1장 전체 너비, 좌우 1.125rem 여백
   · track padding = gap = 1.125rem → 정지 상태 인접 카드 완전 차단
   · filter:drop-shadow를 track에 적용 → overflow:hidden 클리핑 후 렌더링되므로
     box-shadow 없이도 카드 그림자가 트랙 외부로 자연스럽게 표시됨
───────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  /* 트랙 좌우 패딩 없음 → 아이템이 트랙 폭과 딱 일치, gap은 클립 밖에 위치 */
  .br-partners__track {
    overflow: hidden;
    padding: 0.5rem 0;
    box-sizing: border-box;
    filter: drop-shadow(0 0.25rem 1rem rgba(0, 0, 0, 0.12));
  }
  .br-partners__list {
    gap: 1.5rem; /* 슬라이드 중 카드 사이 여백 — 다음 카드는 트랙 바깥 */
  }
  .br-partners__item {
    min-width: calc(
      100vw - 2.5rem
    ); /* = 트랙 전체 폭 → 다음 카드는 gap만큼 더 바깥 */
    width: calc(100vw - 2.5rem);
    max-width: calc(100vw - 2.5rem);
    flex-shrink: 0;
    box-shadow: none;
    box-sizing: border-box;
  }
}

/* ═══════════════════════════════════════════════════════════
   스크롤 / 진입 애니메이션
═══════════════════════════════════════════════════════════ */

/* 공통 fade-up 키프레임 */
@keyframes br-fade-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 히어로 초기 진입 — 페이지 로드 시 순차 fade-in */
.br-hero__title {
  animation: br-fade-up 2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}
.br-hero__desc {
  animation: br-fade-up 2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.5s;
}
.br-hero__btns {
  animation: br-fade-up 2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.75s;
}

/* 스크롤 트리거 reveal — JS가 .is-visible 클래스 부착, unobserve로 1회만 동작 */
.br-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 2.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--br-reveal-delay, 0s);
}
.br-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   레이어 팝업 공통 스타일 (br-popup)
   · PC(1920px / 994px 기준) · Table(1280px) · Mobile(768px) · Small(500px)
═══════════════════════════════════════════════════════════ */

/* 오버레이 */
.br-popup__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.br-popup__overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 팝업 래퍼 (viewport 중앙 flex 정렬) */
.br-popup {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
  font-family: "Pretendard", sans-serif;
}
.br-popup.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 팝업 박스 래퍼 (close 버튼 기준 부모) */
.br-popup__wrap {
  position: relative;
  width: 100%;
  max-width: 62.125rem;
}
.br-popup.br-popup--alert .br-popup__wrap {
  max-width: 40.625rem;
}
.br-popup--alert .br-popup__footer {
  padding-bottom: 2rem;
}
/* 팝업 박스 */
.br-popup__container {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ── 헤더 ── */
.br-popup__header {
  flex-shrink: 0;
  background: #bfde1a;
  padding: 17px 24px;
  position: relative;
}
.br-popup__title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  letter-spacing: -0.05rem;
  margin: 0;
}

/* 닫기 버튼 — br-popup__wrap 기준 오른쪽 12px 바깥 */
.br-popup__close {
  position: absolute;
  top: 0;
  right: -64px; /* 버튼 30px + 간격 12px */
  transform: none;
  width: 3.25rem;
  height: 3.25rem;
  background: #fff url(/images/campaign/braverun/pop_closed.svg) center center
    no-repeat;
  background-size: contain;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.15s;
  line-height: 1;
  padding: 0;
}

/* ── 바디 ── */
.br-popup__body {
  flex: 1;
  min-height: 0; /* flex 컨테이너 내 overflow 스크롤 보장 */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2.5rem 2rem 2rem 2rem;
  -webkit-overflow-scrolling: touch;
}

/* 안내 문구 */
.br-popup__notice {
  text-align: center;
  font-size: 1.25rem;
  color: #4918a0;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.0313rem;
  margin-bottom: 1rem;
}
.br-popup__notice strong {
  font-weight: 700;
}
/* ── 폼 필드 ── */
.br-popup__field {
  display: flex;
  align-items: flex-start;
  gap: clamp(
    12px,
    3.077vw,
    32px
  ); /* 32px 기준, 팝업이 화면에 꽉 차기 시작하면 비례 감소 */
  margin-bottom: 16px;
}
.br-popup__label {
  flex-shrink: 0;
  width: 200px;
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #070400;
  padding-top: 0;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

.br-popup__required {
  color: #fec000;
  font-size: 1.25rem;
}
.br-popup__input {
  flex: none;
  width: 400px;
  height: 40px;
  padding: 0 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
  font-family: inherit;
  box-sizing: border-box;
}
.br-popup__input:focus {
  border-color: #4918a0;
}
.br-popup__input.is-error {
  border-color: #d00;
}
.br-popup__input::placeholder,
.br-popup__textarea::placeholder {
  color: #aaa;
  font-size: 1rem;

  font-weight: 400;
  letter-spacing: -0.025rem;
}

/* input + hint 텍스트 래퍼 — PC: input 오른쪽에 hint 배치 */
.br-popup__input-wrap {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.br-popup__input-wrap .br-popup__input {
  flex: none;
  min-width: 0;
}
/* addr-row를 감쌀 때 shrink 없이 */
.br-popup__input-wrap .br-popup__addr-row {
  width: 400px;
}

/* hint 텍스트 — input 오른쪽 배치 (PC), 위 배치 (1280px↓ media에서 order:-1) */
.br-popup__hint {
  flex-shrink: 0;
  font-size: 1rem;
  color: #aaa;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: -0.025rem;
}

/* 연락처 — 3개 인풋 + 하이픈 합쳐서 400px 이내 */
.br-popup__phone {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 400px;
  min-width: 0;
}
.br-popup__input--phone {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.br-popup__phone-sep {
  flex-shrink: 0;
  color: #888;
  font-size: 0.875rem;
}

/* 수량 — input처럼 보이는 컨테이너 */
.br-popup__qty {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 400px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  transition: border-color 0.2s;
  min-width: 0;
}
.br-popup__qty:focus-within {
  border-color: #4918a0;
}
/* qty 내부 input — 테두리·배경 제거 */
.br-popup__qty > .br-popup__input {
  border: none;
  background: transparent;
  padding: 0;
  height: 100%;
  outline: none;
}
.br-popup__input--qty {
  flex: 1;
  width: 100%;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.br-popup__input--qty::-webkit-inner-spin-button,
.br-popup__input--qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
/* br-popup__hint와 동일 스타일 */
.br-popup__qty-unit {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: #bbb;
  white-space: nowrap;
  line-height: 1.4;
}

/* 배송주소 — 라벨 상단, 입력 세로 나열 */
.br-popup__field--addr {
  align-items: flex-start;
}
.br-popup__addr-wrap {
  flex: 1;
  display: grid;
  /* col1: zip+btn 영역(400px), col2: 상세주소(나머지) */
  grid-template-columns: clamp(180px, 38.46vw, 400px) 1fr;
  gap: 0.75rem 1rem;
  min-width: 0;
}
/* input-wrap(우편번호 행+hint)은 두 컬럼 전체 사용 */
/* .br-popup__addr-wrap .br-popup__input-wrap {
  grid-column: 1 / 3;
} */
.br-popup__addr-row {
  display: flex;
  gap: 1rem;
  width: 100%; /* grid col1의 clamp 폭 안에서 채움 */
}
.br-popup__input--zip {
  flex: 1; /* addr-row 안에서 btn 제외 나머지를 채움 */
  min-width: 80px;
}
.br-popup__addr-btn {
  flex-shrink: 0;
  width: 160px;
  height: 40px;
  padding: 0 12px;
  background: #555;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  font-family: inherit;
}

.br-popup__input--addr {
  grid-column: 1; /* col1: clamp 폭(최대 400px) */
  width: 100%;
  flex: none;
  box-sizing: border-box;
}

.br-popup__input--addrDetail {
  grid-column: 2; /* col2: 나머지 전체(br-popup__body 끝까지) */
  width: 100%;
  flex: none;
  box-sizing: border-box;
}

/* textarea — br-popup__body 끝까지 */
.br-popup__textarea {
  flex: 1;
  min-width: 0;
  height: 80px;
  padding: 0.875rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  font-size: 1rem;
  color: #333;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}
.br-popup__textarea:focus {
  border-color: #4918a0;
}

/* 개인정보 수집 및 이용 동의 */
.br-popup__field--privacy {
  align-items: flex-start;
}

.br-popup__privacy-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.br-popup__privacy-wrap .ft18 {
  font-size: 1rem;
}
.br-popup__privacy-wrap .mb40 {
  margin-bottom: 1rem;
}

.br-popup__privacy-body {
  height: 164px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.875rem 1rem;
  font-family: "Pretendard", sans-serif;
  color: #222;
  letter-spacing: -0.025rem;
  background: #fbf9ff;
  box-sizing: border-box;
}
.br-popup__privacy-body .inner {
  padding: 0;
}
.br-popup__privacy-body h2 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  margin-bottom: 1rem;
}
.br-popup__privacy-body p {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.025rem;
  line-height: 1.5;
}
.br-popup__privacy-body table {
  margin: 8px 0;
}
.br-popup__privacy-body table td,
.br-popup__privacy-body table th {
  border: 1px solid #aaa;
  letter-spacing: -0.0219rem;
  font-size: 0.875rem;
}
.br-popup__privacy-body table th {
  background-color: #eee;
  text-align: center;
  color: #222;
  font-size: 0.875rem;
  line-height: 2rem;
  height: 2rem;
}
.br-popup__privacy-body table td {
  padding: 0.5rem 1rem;
  color: #555;
  font-weight: 400;
  line-height: 1.4;
  background-color: #fff;
}
.br-popup__privacy-body table td:first-child {
  color: #222;
  font-weight: 600;
}
.br-popup__privacy-body table td strong {
  font-weight: 700;
}

.br-popup__privacy-body p:last-child {
  margin-bottom: 0;
}
.br-popup__privacy-body strong {
  font-weight: 700;
  color: #333;
}
.br-popup__privacy-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  cursor: pointer;
  font-family: "Pretendard", sans-serif;
  font-size: 0.9375rem;
  color: #333;
  letter-spacing: -0.025rem;
  line-height: 1.5;
}
.br-popup__privacy-check strong {
  color: #5218a8;
  font-weight: 600;
}
.br-popup__privacy-check input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  flex-shrink: 0;
  accent-color: #4918a0;
  border: 1px solid #ddd;
  cursor: pointer;
}
.br-popup__privacy-check input[type="checkbox"]:checked {
  background: url(/images/campaign/braverun/checked.svg) center center no-repeat;
  background-size: contain;
  border: none;
}
/* ── 푸터 ── */
.br-popup__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 버튼 공통 */
.br-popup__btn {
  width: 192px;
  height: 48px;
  padding: 12px 0;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  font-family: inherit;
  line-height: 1.5;
  letter-spacing: -0.025rem;
}
.br-popup__btn--submit {
  background: #4918a0;
  color: #fff;
}

.br-popup__btn--confirm {
  min-width: 104px;
  width: fit-content;
  padding: 12px 32px;
  background: #aaa;
  color: #fff;
}

/* select 래퍼 — 화살표 아이콘 위치 기준 */
.br-popup__select-wrap {
  position: relative;
  flex: none;
  width: 400px;
  min-width: 0;
  box-sizing: border-box;
}
.br-popup__select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  background: url("/images/campaign/braverun/select_arrow.svg") no-repeat
    center / contain;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease;
  pointer-events: none;
}
/* 포커스 시(드롭다운 열림) 화살표 위로 회전 */
.br-popup__select-wrap:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
}

/* select */
.br-popup__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 2.5rem; /* 화살표 아이콘 공간 확보 */
  cursor: pointer;
}

/* 파일 첨부 */
.br-popup__field--file {
  align-items: flex-start;
}
.br-popup__file-wrap {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.br-popup__file-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 400px;
  flex-shrink: 0;
}
.br-popup__input--filename {
  flex: 1;
  min-width: 0;
  cursor: default;
}
.br-popup__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* 파일 선택 버튼: filename input 우측 나머지 영역 채움 */
.br-popup__file-btn {
  width: 160px;
  height: 40px;
  padding: 0 0.875rem;
  background: #555;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: inherit;
}

.br-popup__file-desc {
  font-size: 1rem;
  color: #aaa;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}
/* 러닝 거리 input — qty보다 약간 넓게 */
.br-popup__input--dist {
  width: 100px;
}

/* 안내 문구 리스트 */
.br-popup__notes {
  margin: 10px 0 2.5rem;
  padding-top: 1rem;
  list-style: none;
  border-top: 1px solid #ebebeb;
}
.br-popup__notes li {
  position: relative;
  font-size: 1rem;
  color: #aaa;
  line-height: 1.7;
  padding-left: 1.25rem;
}
.br-popup__notes li::before {
  content: "※ ";
  position: absolute;
  left: 0;
}
.filed-notice {
  padding-top: 16px;
  border-top: 1px solid #ebebeb;
  margin-bottom: 2rem;
}
.filed-notice p {
  color: #666;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.0156rem;
}

/* ── Alert 팝업 (알림형, form 없음) ── */

.br-popup__body--alert {
  text-align: center;
  padding: 2.5rem 0;
  overflow: visible;
}
.br-popup__alert-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.br-popup__alert-desc {
  font-size: 1.125rem;
  color: #aaa;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.0281rem;
}
.br-popup__footer--complete {
  justify-content: center;
  gap: 1rem;
}
.br-popup__footer--complete .br-popup__btn--submit {
  width: 248px;
}
.br-popup__footer--complete .br-popup__btn--cancel {
  width: 104px;
}

/* ── 증서 팝업 ── */
.br-popup__body--cert {
  padding: 1.5rem 0;
  overflow-y: auto;
}

/* 참가증서 카드 */
.br-cert {
  width: 568px;
  margin-inline: auto;
  font-family: "Noto Serif KR", serif;
  border: 1.375rem solid #4918a0;
  border-radius: 4px;
  padding: 1.875rem 3.25rem 2.5rem 3.25rem;
  position: relative;
  overflow: hidden;
}
/* br-cert__body 아래 영역 우측 장식 이미지 */
.br-cert::after {
  content: "";
  position: absolute;
  right: 0;
  top: 45%;
  width: 200px;
  height: 206px;
  background: url("/images/campaign/braverun/cert_pop_bg.svg") no-repeat right
    center / contain;
  pointer-events: none;
  z-index: 0;
}
/* 카드 내부 콘텐츠가 장식 이미지 위에 오도록 */
.br-cert > * {
  position: relative;
  z-index: 1;
}
.br-cert__badge {
  font-size: 1rem;
  text-align: center;
  color: #555;
  line-height: 1.7;
  margin-bottom: 2.125rem;
}
.br-cert__title {
  font-family: "Daeojamjil";
  font-size: 2.25rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
}
.br-cert__title span {
  color: #4918a0;
}
.br-cert__recipient {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  text-align: right;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #4978a9;
}
.br-cert__name {
  font-size: 1.125rem;
  margin-right: 0.25rem;
  color: #0f1822;
}
.br-cert__suffix {
  font-size: 0.75rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  letter-spacing: -0.0187rem;
}
.br-cert__body {
  font-size: 0.75rem;
  color: #222;
  text-align: center;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.br-cert__info {
  margin: 0 auto;
  width: fit-content;
  padding: 12px 30px;
  border-radius: 16px;
  border: 1px solid #ebebeb;
  background: rgba(255, 255, 255, 0.6);
}
.br-cert__info-row {
  display: flex;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: -0.0187rem;
}
.br-cert__info-row dt {
  color: #555;
  flex-shrink: 0;
}
.br-cert__info-row dd {
  font-weight: 700;
  color: #222;
  margin: 0;
}
.br-cert__closing {
  font-size: 0.75rem;
  color: #555;
  line-height: 1.75;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
  text-align: center;
}
.br-cert__date {
  font-size: 0.6875rem;
  text-align: center;
  color: #333;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 2.625rem;
}
.br-cert__footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.br-cert__logo {
  width: 246px;
  max-width: 100%;
  height: auto;
}
.br-popup__body--cert + .br-popup__footer {
  padding-bottom: 1.5rem;
}

.br-popup__type2 .br-popup__body--cert {
  margin-inline: auto;
  width: 100%;
  max-width: 35.5rem;
}
.br-popup__type2 .br-cert {
  width: 100%;
  /* min-height: 40.5625rem; */
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.br-popup__type2 .br-cert img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: 100%;
}
.br-popup__type2 .br-cert::before {
  content: "";
  display: block;
  padding-top: 98.94366%;
  width: 100%;
}
/* 이미지 치환 시 장식 pseudo 제거 */
.br-popup__type2 .br-cert::after {
  display: none;
}
.iphone_desc {
  display: none;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--br-gray-400);
  letter-spacing: -0.4px;
  line-height: 1.5;
  text-align: center;
}
.iphone_desc br {
  display: none;
}
/* ── 반응형: 1280px (Tablet) ── */
@media (max-width: 1280px) {
  .br-popup__wrap {
    max-width: 678px;
  }
  .br-popup__notice {
    font-size: 1.125rem;
  }
  .br-popup__close {
    width: 2.5rem;
    height: 2.5rem;
    right: -3.25rem;
  }
  /* 파일 첨부: desc를 controls 아래로, 다른 input과 동일 너비(400px) */
  .br-popup__file-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 400px;
    flex: none;
  }
  .br-popup__file-controls {
    width: 100%;
  }
  .br-popup__file-desc {
    width: 100%;
    flex: none;
  }
  .br-popup__input-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .br-popup__title {
    font-size: 1.5rem;
  }
  .br-popup__hint {
    order: -1;
    font-size: 0.875rem;
  }
  .br-popup__addr-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 400px;
    flex: none;
  }
  .br-popup__addr-wrap .br-popup__input-wrap {
    grid-column: unset;
    width: 100%;
  }
  .br-popup__addr-row,
  .br-popup__input-wrap .br-popup__addr-row {
    flex-wrap: wrap;
    width: 100%;
  }
  .br-popup__input--addr,
  .br-popup__input--addrDetail {
    grid-column: unset;
    width: 100%;
  }
  /* 개인정보 동의: 다른 input과 동일 너비(400px) */
  .br-popup__privacy-wrap {
    width: 400px;
    flex: none;
  }
  .br-popup__label {
    width: 110px;
    font-size: 1rem !important;
  }
  .br-popup__textarea {
    width: 400px;
    box-sizing: border-box;
    flex: initial;
  }
  .iphone_desc {
    display: block;
  }
}

/* ── 반응형: 768px (Mobile) ── */
@media (max-width: 768px) {
  .br-popup {
    /* 상단: 좌우 여백(16px) + close 버튼 위치(42px) = 58px
       좌우·하단: 16px 동일 여백 */
    padding: 58px 16px 16px;
  }
  .br-popup__title {
    font-size: 1.375rem;
  }
  .br-popup__wrap {
    max-width: 100%;
  }
  .br-popup__body {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
  }
  .br-popup__container {
    max-height: calc(100svh - 74px);
  }

  /* 모바일: close 버튼을 container 위쪽으로 이동 */
  .br-popup__close {
    right: 0;
    top: -3.125rem;
  }
  .br-popup--alert {
    align-items: center;
  }
  .br-popup--alert .br-popup__wrap {
    max-width: calc(100% - 32px);
  }

  .br-popup__field {
    flex-direction: column;
    gap: 5px;
  }
  .br-popup__label {
    width: auto;
    padding-top: 0;
    font-size: 1rem !important;
  }

  /* 모바일: input 전체 너비 */
  .br-popup__input {
    width: 100%;
  }
  .br-popup__select-wrap {
    width: 100%;
  }
  .br-popup__input-wrap .br-popup__input {
    width: 100%;
  }
  .br-popup__input-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  .br-popup__input-wrap .br-popup__addr-row {
    width: 100%;
  }
  .br-popup__hint {
    order: -1;
    white-space: normal;
  }
  /* 연락처: 모바일 전체 너비 */
  .br-popup__phone {
    width: 100%;
  }
  /* textarea: 모바일 전체 너비 */
  .br-popup__textarea {
    width: 100%;
  }
  /* 파일 첨부: 모바일 전체 너비 */
  .br-popup__file-wrap {
    width: 100%;
    flex: none;
  }
  .br-popup__file-controls {
    width: 100%;
  }
  .br-popup__input--filename {
    flex: 1;
  }
  .br-popup__file-btn {
    flex: 0 0 auto;
  }
  .br-popup__qty {
    width: 100%;
  }
  /* 배송주소 필드: 모바일 전체 너비 */
  .br-popup__addr-wrap {
    width: 100%;
  }
  .br-popup__input--addr,
  .br-popup__input--addrDetail {
    width: 100%;
  }
  /* 개인정보 동의: 모바일 전체 너비 */
  .br-popup__privacy-wrap {
    width: 100%;
  }
}

/* ── 반응형: 증서 (729px 이하) ── */
@media (max-width: 768px) {
  .br-cert {
    /* width: 100%; */
    font-size: 16px;
    box-sizing: border-box;
    border-width: 1.375em;
    padding: 1.875em 3.25em 2.5em 3.25em;
    /* border-width: 0.75em;  */
    /* 22px → 12px */
    /* padding: 1.5em 1em; */
  }
  .br-cert__title {
    /* font-size: 1.625em; */
    font-size: 2.25em;
  }
  .br-cert__badge {
    font-size: 1em;
    /* margin-bottom: 1em; */
    margin-bottom: 2.125em;
  }
  .br-cert__recipient {
    /* margin-bottom: 1.125em; */
    font-size: 1em;
  }
  .br-cert__body {
    font-size: 0.75em;
    /* margin-bottom: 0.5em; */
    margin-bottom: 2.666666666666667em;
  }
  .br-cert__name {
    /* font-size: 1em; */
    font-size: 1.125em;
  }
  .br-cert__info-row {
    font-size: 0.75em;
  }
  .br-cert__info {
    /* padding: 12px 24px; */
  }
  .br-cert__closing {
    font-size: 0.75em;
    /* margin-top: 0.5em; */
    margin-top: 2em;
    /* margin-bottom: 1em; */
    margin-bottom: 2.666666666666667em;
  }
  .br-cert__date {
    /* margin-bottom: 0.75em; */
    font-size: 0.6875em;
    margin-bottom: 3.818181818181818em;
  }
  .br-cert::after {
    /* width: 140px;
    height: 144px; */
  }
  .br-cert__logo {
    /* height: 3.375em;
    width: auto; */
  }
}

@media (max-width: 500px) {
  .br-popup {
    padding: 58px 16px 16px; /* 768px와 동일 여백 유지 */
  }
  .br-popup__wrap {
    max-width: 100%;
  }
  .br-popup__container {
    max-height: calc(100svh - 74px); /* 58px(상단) + 16px(하단) */
  }
  .br-popup__header {
    padding: 14px 16px;
  }

  .br-popup__body {
    padding: 2rem 1rem;
  }
  .br-popup__body.br-popup__body--alert {
    padding-top: 2rem;
  }
  .br-popup__alert-title {
    font-size: 1.25rem;
  }
  .br-popup__alert-desc {
    font-size: 1rem;
  }
  .br-popup__footer {
    padding: 16px;
    flex-direction: column;
    gap: 8px;
  }
  .br-popup__btn {
    width: 100%;
    text-align: center;
  }
  .br-popup--alert .br-popup__wrap {
    max-width: calc(100% - 24px);
  }
  .br-popup--alert .br-popup__footer {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1rem 2.5rem 2rem;
  }
  .br-popup--alert .br-popup__btn:not(.br-popup__btn--confirm) {
    width: auto;
    flex: 1;
  }

  .br-popup__btn--confirm,
  .br-popup__footer--complete .br-popup__btn--submit {
    width: 100%;
  }
  .br-popup__addr-btn {
    width: 120px;
  }
  .iphone_desc br {
    display: block;
  }
}
/* ═══════════════════════════════════════════════════════════
   랭킹 팝업 (br-ranking__pop)
   · PC: br-rank-pop__table-wrap height 538px 스크롤
   · Mobile(≤500px): br-rank-pop__table-wrap height 412px 스크롤
═══════════════════════════════════════════════════════════ */

/* 바디: 스크롤 없음, 일반 블록 */
.br-popup__wrap--ranking {
  max-width: 47.625rem;
  font-family: "Pretendard", sans-serif;
}
.br-popup__wrap--ranking .br-popup__footer--complete {
  padding: 1.5rem 1rem;
}
.br-popup__wrap--ranking .br-popup__body {
  padding: 1.5rem 2rem;
}

/* ── 로고 + 요약 묶음 ── */
.br-rank-pop__title {
  padding: 1rem 1.5rem;
}

/* ── 로고 ── */
.br-rank-pop__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.25rem;
}
.br-rank-pop__logo img {
  max-height: 52px;
  max-width: 12.75rem;
  object-fit: contain;
}

/* ── 인원 & 누적 거리 요약 ── */
.br-rank-pop__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.9688rem;
}
.br-rank-pop__summary-item {
  display: flex;
  align-items: center;
  gap: 0.5313rem;
}

.br-rank-pop__summary-label {
  font-size: 1.25rem;
  font-weight: 700;
  color: #070400;
  letter-spacing: -0.5px;
  line-height: 1.5;
}
.br-rank-pop__summary-value {
  color: #4918a0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.br-rank-pop__summary-value em {
  color: #aaa;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-left: 2px;
  font-style: normal;
}

/* ── 테이블 래퍼: 스크롤 영역 ── */
.br-rank-pop__table-wrap {
  height: 424px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fbf9ff;
  padding: 1.5rem 3.0313rem;
}

/* ── 탭 (테이블 상단 sticky) ── */
.br-rank-tab {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0 1.5rem 0.75rem;
  /* position: sticky; */
  top: 0;
  z-index: 2;
}
.tab-divider {
  width: 0.0625rem;
  height: 0.5rem;
  flex-shrink: 0;
  background-color: #d9d9d9;
  align-self: center;
}
.br-rank-tab button {
  color: #999;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.375px;
  background-color: transparent;
  outline: none;
  border: none;
}
.br-rank-tab button.is-active {
  color: #0f1822;
}

/* ── 테이블 ── */
.br-rank-pop__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Pretendard", sans-serif;
  font-size: 1rem;
  table-layout: fixed;
}

/* 헤더 sticky */
.br-rank-pop__table thead {
  top: 45px; /* .br-rank-tab 높이만큼 */
  z-index: 1;
}
.br-rank-pop__table th {
  color: #999;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  padding: 0.875rem 0;
  border-bottom: 1px solid #ebebeb;
  border-top: 1px solid #ebebeb;
}
.br-rank-pop__table td {
  padding-top: 2rem;
  text-align: center;
  font-size: 1.25rem;
  color: #0f1822;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.br-rank-pop__table tbody tr:last-child td {
  border-bottom: none;
}

/* 컬럼 너비 */
.br-rank-pop__table th:nth-child(1),
.br-rank-pop__table td:nth-child(1) {
  width: 15%;
  text-align: center;
}
.br-rank-pop__table th:nth-child(2),
.br-rank-pop__table td:nth-child(2) {
  width: 25%;
}
.br-rank-pop__table th:nth-child(3),
.br-rank-pop__table td:nth-child(3) {
  width: 25%;
}
.br-rank-pop__table th:nth-child(4),
.br-rank-pop__table td:nth-child(4) {
  width: 35%;
}

/* 좌우 패딩 */
.br-rank-pop__table th,
.br-rank-pop__table td {
  padding-inline: 1rem;
}
.br-rank-pop__table th:first-child,
.br-rank-pop__table td:first-child {
}
.br-rank-pop__table th:last-child,
.br-rank-pop__table td:last-child {
}

/* 거리 컬럼 강조 */
.br-rank-pop__table td.rank-pop__dist {
  color: #4918a0;
  font-weight: 700;
}

/* ── 반응형: 768px (Mobile) ── */
@media (max-width: 768px) {
  .br-rank-pop__title {
    padding: 0 1rem 1.125rem;
  }
  .br-rank-pop__logo img {
    max-height: 38px;
  }
  .br-rank-pop__summary-value {
  }
  .br-rank-pop__summary {
    flex-direction: column;
    gap: 0;
  }

  /* 테이블 래퍼 높이 조정 */
  .br-rank-pop__table-wrap {
    height: 381px;
    padding: 1.5rem 0;
    border-radius: 24px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .br-rank-pop__table-wrap::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* 탭 */
  .br-rank-tab {
    padding: 0 1rem 1rem;
  }

  /* 테이블: table-layout 리셋 */
  .br-rank-pop__table {
    table-layout: auto;
  }

  /* 헤더 숨김 */
  .br-rank-pop__table thead {
    display: none;
  }

  /* 각 행을 grid로 재구성
     col1(2rem)   col2(1fr)    col3(auto)
     ───────────────────────────────────
     row1: 순위 │ 참여일      │ 거리
     row2: 순위 │ 이름        │ 거리
  */
  .br-rank-pop__table tbody tr {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto;
    grid-template-rows: auto auto;
    padding-block: 0.875rem;
    padding-inline: 1rem;
    border-bottom: 1px solid #ebebeb;
    column-gap: 0.25rem;
    row-gap: 2px;
  }
  .br-rank-pop__table tbody tr:last-child {
    border-bottom: none;
  }

  /* 모든 td: block 리셋 */
  .br-rank-pop__table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
  }

  /* 순위 — col1, 2행 span, 세로 중앙 */
  .br-rank-pop__table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
  }
  .br-rank-pop__table td:nth-child(2) {
    width: 35%;
    text-align: left;
  }

  /* 참여일 — col2, row1 (상단) */
  .br-rank-pop__table tbody td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.875rem;
    text-align: left;
    color: #999;
    font-weight: 500;
  }

  /* 이름 — col2, row2 (하단) */
  .br-rank-pop__table tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f1822;
  }

  /* 거리 — col3, 2행 span, 세로 중앙 */
  .br-rank-pop__table tbody td:nth-child(3) {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* ── braverun 진입/스크롤 애니메이션 (인라인: 캐시 우회) ── */
@keyframes br-fade-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.br-hero__title {
  animation: br-fade-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}
.br-hero__desc {
  animation: br-fade-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.5s;
}
.br-hero__btns {
  animation: br-fade-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.75s;
}
.br-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--br-reveal-delay, 0s);
}
.br-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#lottie-spinner.is-active {
  visibility: visible;
}
#lottie-spinner {
  width: 250px;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  visibility: hidden;
}