* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

body {
  padding-bottom: 70px; /* 하단 고정바 높이만큼 */
}

a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* =========================
   네가 조정할 핵심값
   ========================= */
:root {
  /* 배너 최대폭 */
  --banner-max-width: 1200px;

  /* 오버레이 공통 크기: 한번에 조정 */
  --overlay-left: 9%;
  --overlay-width: 82%;
  --overlay-height: 1.9%;

  /* 각 버튼 위치: 따로 조정 */
  --kakao-top-1: 17.3%;
  --phone-top-1: 19.5%;
  --kakao-top-2: 91.55%;
  --phone-top-2: 93.7%;

  /* 하단바 높이 */
  --bottom-bar-height: 70px;
}

/* 전체 */
.page-wrapper {
  width: 100%;
  background: #ffffff;
}

/* 배너 */
.banner-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--banner-max-width);
  margin: 0 auto;
  background: #ffffff;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 이미지 위 클릭영역 공통 */
.overlay-link {
  position: absolute;
  z-index: 10;
  left: var(--overlay-left);
  width: var(--overlay-width);
  height: var(--overlay-height);
  border-radius: 999px;
  background: transparent;
}

/* 위치 확인용 - 필요할 때만 주석 해제
.overlay-link {
  background: rgba(255, 0, 0, 0.22);
  outline: 2px solid rgba(255, 0, 0, 0.8);
}
*/

/* 버튼 4개 위치만 각각 따로 */
.overlay-kakao-top {
  top: var(--kakao-top-1);
}

.overlay-phone-top {
  top: var(--phone-top-1);
}

.overlay-kakao-bottom {
  top: var(--kakao-top-2);
}

.overlay-phone-bottom {
  top: var(--phone-top-2);
}

/* 하단 고정바 */
.bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  background: #ffffff;
  border-top: 1px solid #dddddd;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-inner {
  width: 100%;
  max-width: var(--banner-max-width);
  margin: 0 auto;
  display: flex;
}

.bottom-btn {
  flex: 1 1 50%;
  height: var(--bottom-bar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.kakao-btn {
  background: linear-gradient(180deg, #ffe95a 0%, #f5df18 100%);
  color: #222222;
}

.phone-btn {
  background: linear-gradient(180deg, #b21d17 0%, #95120d 100%);
  color: #ffffff;
}

.bottom-btn + .bottom-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.bottom-btn-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

.bottom-btn-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* 태블릿 */
@media (max-width: 1024px) {
  :root {
    --bottom-bar-height: 66px;
  }

  body {
    padding-bottom: 66px;
  }

  .bottom-btn {
    font-size: 18px;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  :root {
    --bottom-bar-height: 60px;
  }

  body {
    padding-bottom: 60px;
  }

  .bottom-btn {
    font-size: 16px;
    gap: 8px;
  }

  .bottom-btn-icon,
  .bottom-btn-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* 작은 모바일 */
@media (max-width: 420px) {
  .bottom-btn {
    font-size: 15px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}