/* ===== 환불 규정 페이지 (Figma 268:63) =====
   본문 폰트: Pretendard (공통). 좌측 세로 메뉴(200) + 우측(제목 + 본문)
   레이아웃은 flex (gap 60). 이용약관(terms) 페이지와 동일 템플릿 */

.refund {
  width: 100%;
  padding: 123px 0 175px;           /* 시안: 헤더 아래 123px, 본문 아래~푸터 175px */
}
.refund-wrap {                       /* 헤더와 동일 컨테이너 → 메뉴가 헤더 로고와 좌측 정렬 */
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px 0 var(--container-pad-left);
  font-family: 'Pretendard', sans-serif;
}
.refund-row {
  max-width: 1280px;                 /* 시안 콘텐츠 폭 (200 + 60 + 1020) */
  display: flex;
  gap: 60px;                         /* 시안 좌우 간격 */
  align-items: flex-start;
}

/* ===== 좌측 메뉴 (268:696) ===== */
.refund-nav {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;                        /* 시안 항목 간격 */
}
.refund-nav-track {                /* 모바일 가로 스크롤용 트랙 (시안 ul.flex 구조) — PC 레이아웃은 동일 */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.refund-nav a {
  display: block;
  padding: 10px 8px;
  font-size: 20px;
  font-weight: 400;                /* Regular */
  line-height: 30px;
  letter-spacing: -0.4px;
  color: #262626;
  text-decoration: none;
}
.refund-nav a.is-active {          /* 환불규정 (현재 페이지) */
  font-weight: 700;                /* Bold */
  color: #1b1b1b;
}

/* ===== 우측 본문 (268:712) ===== */
.refund-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* 제목 바: 상하 1px 보더 (268:713) */
.refund-head {
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  padding: 17px 24px;
}
.refund-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;                /* Bold */
  line-height: 30.8px;
  letter-spacing: -0.44px;
  color: #1b1b1b;
}

/* 환불 규정 본문: 이용약관(terms)과 동일한 본문 폰트 — 18px / 28px / ls-0.16, 번호 항목만 Bold */
.refund-body {
  padding: 28px 24px 0;
  font-size: 18px;
  font-weight: 400;                /* Regular */
  line-height: 28px;
  letter-spacing: -0.16px;
  color: #000;
  word-break: keep-all;            /* 한글 단어 단위 줄바꿈 (어절 중간 끊김 방지) */
  overflow-wrap: anywhere;         /* 긴 토큰(이메일 등)도 넘치지 않게 */
}
.refund-body strong {
  font-weight: 700;                /* 번호 항목 Bold */
}

/* 반응형: 좁은 화면에선 메뉴를 본문 위로 (terms 패턴 상속 — 세부 모바일 조정은 이후 단계) */
@media (max-width: 767.98px) {
  .refund-row {
    flex-direction: column;
    gap: 24px;
  }
  .refund-nav {
    flex: none;
    width: 100%;
  }
  .refund-main {
    width: 100%;
  }
  .refund-nav-track {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
}

@media (max-width: 767.98px) {
  .refund {
    padding: 0 0 138px;
  }
  .refund-wrap { padding: 0 20px; }   /* 콘텐츠 x20~355 (335) */
  .refund-row { gap: 0; }

  /* 탭 스크롤 영역: 가로 스크롤 + 스크롤바 숨김 */
  .refund-nav {
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 20px;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* IE/Edge */
  }
  .refund-nav::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

  .refund-nav-track {
    width: max-content;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  .refund-nav a {
    position: relative;
    padding: 20px 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #404040;
    white-space: nowrap;
  }
  /* 활성 탭: 히든블루 #2d57a1 + 하단 2px 바 (terms와 동일) */
  .refund-nav a.is-active { color: #2d57a1; }
  .refund-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #2d57a1;
  }

  .refund-head h1 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
  }

  .refund-body {
    padding: 24px 9px 0 15px;
  }
}