/* 고객지원 페이지 전용 스타일 */
.support__head { margin-bottom: 64px; }
.support { width: 100%; }
.support__title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #1a1a1a;
  margin: 0 0 28px;
}
.support__lead {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0;
}

.support__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.support__subtitle {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.support-card {
  border: 1px solid #ececec;
  border-radius: 16px;
  background: #fff;
  padding: 36px 44px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.support-card__row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.support-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: #1a1a1a;
}
.support-card__icon svg { width: 100%; height: 100%; display: block; }
/* 항목 이름은 '정보'가 아니라 '이름표'다. 값(전화번호·이메일)과 같은 진하기면
   무엇을 읽어야 할지 눈이 헷갈린다. 명암비를 한 단계 낮춰 값을 앞세운다. */
.support-card__label {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #6e6e73;
  margin: 0;
}
.support-card__value {
  margin-left: auto;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

/* 카카오톡 pill buttons */
.support-card__pills {
  margin-left: auto;
  display: flex;
  gap: 14px;
}
.support-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 150px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.support-pill:hover { background: #000; transform: translateY(-1px); }
.support-pill__name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.support-pill__desc { font-size: 12px; font-weight: 400; opacity: .7; letter-spacing: -0.02em; }

/* 카카오 스타일 상담 버튼 */
.support-pill--kakao {
  flex-direction: row;
  gap: 8px;
  background: #fee500;
  color: #191919;
}
.support-pill--kakao:hover { background: #f5db00; transform: translateY(-1px); }
.support-pill--kakao .support-pill__name { font-size: 17px; }

.support-card__value--email {
  text-decoration: none;
}
.support-card__value--email:hover { text-decoration: underline; }

/* 추가 주제 검색 */
.support-search {
  margin-bottom: 64px;
  text-align: center;
}
.support-search__title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1a1a;
  margin: 0 0 40px;
}
.support-search__box {
  position: relative;
  display: flex;
  align-items: center;
}
.support-search__icon {
  position: absolute;
  left: 28px;
  width: 24px;
  height: 24px;
  color: #b0b0b0;
  pointer-events: none;
}
.support-search__box input {
  width: 100%;
  height: 72px;
  padding: 0 28px 0 66px;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  background: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.support-search__box input::placeholder { color: #b0b0b0; font-weight: 400; }
.support-search__box input:focus {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26,26,26,0.06);
}

/* 리소스 / 사용가이드 프로모 카드 */
.support-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 64px;
}
.support-promo__card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border-radius: 20px;
  padding: 48px 44px 44px;
  transition: background-color .18s ease, transform .18s ease;
}
.support-promo__card:hover { background: #fafafa; transform: translateY(-2px); }
.support-promo__icon {
  display: block;
  width: 48px;
  height: 48px;
  color: #1a1a1a;
  margin-bottom: 28px;
}
.support-promo__icon svg { width: 100%; height: 100%; display: block; }
.support-promo__title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #1a1a1a;
  margin: 0 0 20px;
}
.support-promo__desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #555;
  margin: 0 0 24px;
}
.support-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.support-promo__card:hover .support-promo__link { text-decoration: underline; }

/* ───────── Tablet / 저해상도 노트북 (769px ~ 1280px) ───────── */
@media (max-width: 1280px) and (min-width: 769px) {
  .support__title { font-size: 40px; }
  .support-search__title { font-size: 30px !important; }
  .support-promo__title { font-size: 26px; }
}

/* ───────── Mobile (≤768px) ───────── */
@media (max-width: 768px) {
  .support__title { font-size: 40px; }   /* L1 일반 */
  .support__lead { font-size: 18px; }

  .support-search__title { font-size: 32px !important; }   /* L2 공통 */
  .support-search__box input { height: 56px; font-size: 16px; padding: 0 20px 0 52px; }
  .support-search__icon { left: 20px; }

  .support-promo { grid-template-columns: 1fr; gap: 16px; }
  .support-promo__card { padding: 32px 28px; }
  .support-promo__title { font-size: 24px; }

  .support-card { padding: 20px; }

  /* 아이콘 · 라벨 · 값을 무조건 한 줄에. 값(과 카카오 버튼)은 우측 정렬. */
  .support-card__row { flex-wrap: nowrap; gap: 10px; }
  .support-card__icon { width: 32px; height: 32px; }
  .support-card__label { font-size: 16px; white-space: nowrap; }
  .support-card__value,
  .support-card__pills { margin-left: auto; }
  .support-card__value { font-size: 18px; white-space: nowrap; }
  .support-card__value--email { font-size: 15px; }

  /* 카카오톡 버튼은 아이콘만 (글자는 a 의 aria-label 로 남겨둔다) */
  .support-pill--kakao .support-pill__name { display: none; }
  .support-pill--kakao {
    min-width: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .support__subtitle { font-size: 32px !important; }   /* L2 공통 */

  /* 세로 여백 정리 — 데스크톱 값(64/64/120/48px)이 그대로 쓰여 간격이 들쭉날쭉했다.
     섹션 패딩 80px 를 기준으로, 제목묶음 40 / 제목→내용 20 / 블록 사이 64 로 통일. */
  .support__head { margin-bottom: 40px; }
  .support__title { margin-bottom: 20px; }

  /* 아래는 섹션 padding-bottom(80px)이 이미 담당 — 중복 여백 제거 */
  .support-search { margin-bottom: 0; }
  .support-search__title { margin-bottom: 20px; }

  /* 인라인 style 로 박혀 있어 !important 필요 */
  .support-promo { margin-bottom: 64px !important; }
  /* .support__rows 의 flex gap 10px 가 더해지므로 10 + 10 = 20 */
  .support__subtitle { margin-bottom: 10px !important; }

  /* 카드 사이 20px 은 카드 자체가 얇아진 모바일에서 너무 벌어져 보인다 */
  .support__rows { gap: 10px; }

  /* 마지막 카드와 다크 푸터가 40px 밖에 안 떨어져 붙어 보인다.
     (모바일 .section 규칙이 인라인 padding-bottom 360px 를 덮어쓴 결과) */
  .section:has(.support-card) {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}