/* 전체 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
  color: #252525;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 배경 이미지 레이어 */
.background-slider {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
  }

#bg1, #bg2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 2s ease-in-out;
    opacity: 0;
  }

/* 헤더 */
.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  z-index: 10;
}

.logo {
  margin-left: 20px;
  margin-top: 40px;
}

.nav-buttons {
  width: 278px;
  height: 42px;
  margin-top: 40px;
  margin-right: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px;
}

.nav-btn {
  width: 82px;
  height: 38px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
  color: #252525;
  text-decoration: none;
  background-color: transparent;
}

/* 메인 박스 */
.main-box {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 66.67%;
  max-width: 1280px;
  min-width: 320px;
  border-radius: 30px;
  background-color: transparent;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.171);
}

.main-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* 푸터 스타일 */
.footer {
  position: static;
  transform: none;
  margin: 200px auto 40px;
  width: 66.67%;
  max-width: 1280px;
  font-size: 10pt;
  color: #252525;
  padding: 40px 30px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.home-page .footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 40px 30px;
  z-index: 999;
}

.footer-left {
  align-self: flex-end;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.footer-phone,
.footer-email {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* 푸터 클릭 복사 인터랙션 */
.footer-phone,
.footer-email {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
}

.footer-phone:active,
.footer-email:active {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* 복사 안내 오버레이 */
.copy-overlay {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 29px;
  background-color: #252525;
  border-radius: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10pt;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 9999;
}

/* 인디케이터 */
.indicator-group {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 4;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 10px;
  transition: opacity 2s ease, background-color 2s ease, border-color 2s ease;
  opacity: 0.5;
  background-color: transparent;
  border: 1px solid #ffffff;
}

.indicator.active {
  background-color: #ffffff;
  border-color: transparent;
}

/* about 페이지: 헤더 스타일 */
.header-about {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* about 페이지: nav 버튼 활성화 스타일 */
.nav-btn.active {
  background-color: #252525;
  color: #ffffff;
  font-weight: bold;
}

/* about 페이지: 회색 박스 */
.gray-box {
  width: 642px;
  height: 434px;
  background-color: #d3d3d3;
  border-radius: 30px;
  margin: 220px auto 0 auto;
}

/* 새 상단바 (topbar) */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0%,
    rgb(255, 255, 255) 40%,
    rgba(255, 255, 255, 0.9) 60%,
    rgba(255, 255, 255, 0.4) 80%,
    rgba(255, 0, 0, 0) 100%
  );
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(14px);
}

/* topbar 내부 컨테이너 */
.topbar .container {
  pointer-events: auto;
  width: 66.67%;
  max-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

/* 컨테이너 (공통) */
.container {
  width: 66.67%;
  max-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

/* 로고 링크 */
.logo a {
  display: inline-block;
}

/* 네비게이션 버튼 그룹 */
.nav-buttons {
  width: 278px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px;
}

/* 네비게이션 버튼 */
.nav-btn {
  width: 82px;
  height: 38px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
  color: #252525;
  text-decoration: none;
  background-color: transparent;
}

/* active 상태 (활성화된 버튼) */
.nav-btn.active {
  background-color: #252525;
  color: #ffffff;
  font-weight: bold;
}

/* 페이지 컨텐츠 패딩 */
.page-content {
  padding-top: 100px;
}

/* ◼ 페이지 상단 이동 버튼 */
.scroll-top-btn {
  position: fixed;
  bottom: 80px;
  right: 200px;
  width: 39px;
  height: 39px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 1000;
}

.scroll-top-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

/* about 페이지 - 메인 섹션 (3박스) */
.about-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  width: 60%;
  max-width: 1280px;
  margin: 200px auto 0;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

/* about 페이지 - 각 박스 공통 */
.about-section .side-box,
.about-section .center-box {
  flex: 1 1 auto;
  box-sizing: border-box;
}

/* 왼쪽 박스 margin */
.left-box {
  margin-right: -80px;
}

/* 오른쪽 박스 margin */
.right-box {
  margin-left: -80px;
}

/* 좌우 박스 스타일 */
.side-box {
  position: relative;
  width: 50px;
  height: 322px;
  background-color: rgba(217, 217, 217, 0.2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 30px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 좌우 박스 내부 콘텐츠 */
.side-content {
  position: absolute;
  text-align: center;
  color: rgba(37, 37, 37, 0.233);
  font-size: 14pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: -1;
}

/* 좌우 박스 제목 */
.side-title {
  font-size: 18pt;
  font-weight: bold;
  margin-top: 20px;
}

/* 좌우 박스 구분선 */
.side-line {
  height: 2px;
  background-color: #25252549;
  border-radius: 9999px;
  margin-top: 17px;
}

/* 짧은 구분선 */
.short-line {
  width: 114px;
}

/* 긴 구분선 */
.long-line {
  width: 162px;
}

/* 좌우 박스 리스트 */
.side-list {
  list-style: none;
  padding: 0;
  margin: 50px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 15pt;
}

/* 가운데 박스 (center-box) */
.center-box {
  width: 400px;
  height: 434px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 3;
  margin-bottom: 25px;
}

/* 가운데 박스 내부 콘텐츠 */
.center-content {
  padding-top: 30px;
  text-align: center;
  color: #252525;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  height: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* 가운데 박스 제목 */
.center-title {
  font-size: 50px;
  font-weight: bolder;
}

/* 가운데 박스 구분선 */
.center-line {
  width: 96px;
  height: 3px;
  background-color: #252525;
  border-radius: 9999px;
}

/* 가운데 박스 리스트 */
.center-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16pt;
  font-weight: bold;
  line-height: 2.3;
}

/* 크몽 버튼 (kmong-button) */
.kmong-button {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 294px;
  height: 45px;
  background-color: #252525;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

/* 크몽 버튼 텍스트 */
.kmong-text {
  color: #ffffff;
  font-weight: bold;
  font-size: 16pt;
  white-space: nowrap;
}

/* 크몽 버튼 원형 아이콘 */
.kmong-circle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 37px;
  height: 37px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.kmong-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 프로세스 섹션 (process-section) */
.process-section {
  margin-top: 150px;
  text-align: center;
  width: 100%;
}

/* 프로세스 섹션 타이틀 */
.process-title {
  font-size: 16pt;
  font-weight: bold;
  color: #252525;
  margin-bottom: 40px;
  text-align: center;
}

/* 프로세스 타임라인 그룹 */
.process-timeline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px;
}

/* 프로세스 스텝 (process-step) */
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 프로세스 원 (process-circle) */
.process-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  font-size: 20pt;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: #505050;
  border: 3px solid #505050;
  background-color: transparent;
  cursor: pointer;
}

/* 채워진 프로세스 원 */
.process-circle.filled {
  background-color: #505050;
  color: #ffffff;
  border: none;
}

/* 프로세스 라벨 (원 아래 텍스트) */
.process-label {
  margin-top: 20px;
  font-size: 13pt;
  color: #505050;
  text-align: center;
  white-space: nowrap;
}

/* 프로세스 스텝 간 연결 선 (process-line) */
.process-line {
  width: 37px;
  height: 2px;
  background-color: #909090;
  align-self: center;
  margin-top: -50px;
}

/* 캐러셀 카드 (carousel-card) */
.carousel-card {
  position: relative;
  flex: 0 0 680px;
  height: 382px;
  background-color: transparent;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20pt;
  font-weight: bold;
  color: #252525;
  user-select: none;
  overflow: hidden;
}

/* 캐러셀 카드 안의 이미지 */
.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

/* 캐러셀 텍스트 박스 그룹 */
.carousel-text-boxes {
  position: absolute;
  bottom: 20px;
  right: 30px;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  pointer-events: none;
}

/* 캐러셀 텍스트 박스 개별 스타일 */
.carousel-text-boxes .text-box {
  flex-shrink: 0;
  height: 38px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  border: 2px solid #252525;
  border-radius: 19px;
  font-size: 12pt;
  font-weight: 400;
  color: #252525;
  white-space: nowrap;
  pointer-events: auto;
}

/* 캐러셀 래퍼 (carousel-wrapper) */
.carousel-wrapper {
  position: relative;
  overflow: hidden;
  margin: 60px auto 0;
  height: 382px;
  border-radius: 30px;
  z-index: 1;
}

/* 캐러셀 좌우 페이드 아웃 효과 */
.carousel-wrapper::before,
.carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 500px;
  pointer-events: none;
  z-index: 2;
}

.carousel-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    #fff 0%,
    #fff 300px,
    rgba(255, 255, 255, 0) 100%
  );
}

.carousel-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    #fff 0%,
    #fff 300px,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 캐러셀 트랙 (carousel-track) */
.carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* 캐러셀 아래 설명 텍스트 (carousel-text) */
.carousel-text {
  margin-top: 180px;
  text-align: center;
  font-size: 16pt;
  font-weight: 600;
  color: #252525;
}

/* 캐러셀 문단 간 간격 */
.carousel-text p + p {
  margin-top: 50px;
}

/* info-box 영역 */
.info-box {
  position: relative;
  width: 1040px;
  height: 300px;
  margin: 200px auto 0;
  border-radius: 30px;
  background-color: #ffffff;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.171);
  display: flex;
  align-items: center;
  gap: 45px;
  box-sizing: border-box;
}

/* info-box 그라데이션 테두리 */
.info-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(
    150deg,
    rgb(235, 235, 235) 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* info-box 내부 이미지 영역 */
.info-image {
  width: 340px;
  height: 300px;
  overflow: hidden;
  border-radius: 30px 0 0 30px;
  flex-shrink: 0;
}
.info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* info-box 내부 텍스트 영역 */
.info-content {
  text-align: left;
}

/* info-box 제목 */
.info-content h3 {
  font-size: 16pt;
  font-weight: 600;
  color: #252525;
  margin: 0;
}

/* info-box 내용 리스트 */
.info-content ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 30px;
}
.info-content ul li {
  font-size: 12pt;
  font-weight: 400;
  color: #252525;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* 두 번째 info-box 스타일 */
.info-box.second {
  justify-content: flex-end;
  margin-top: 100px;
}
.info-box.second .info-image {
  border-radius: 0 30px 30px 0;
}

/* contact-button (문의하기 버튼) */
.contact-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  position: relative;
  width: 246px;
  height: 60px;
  margin: 180px auto 0;
  background-color: #252525;
  border-radius: 30px;
  text-decoration: none;
  cursor: pointer;
}

.contact-button .contact-text {
  font-size: 20pt;
  font-weight: 600;
  color: #ffffff;
  z-index: 1;
}

.contact-button .contact-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-button .contact-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* work 페이지 - 버튼 그룹 */
.work-buttons {
  margin: 200px auto 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.work-buttons .work-btn {
  display: inline-block;
  height: 35px;
  line-height: 35px;
  padding: 0 14px;
  border-radius: 19px;
  background: transparent;
  color: #252525;
  font-weight: 400;
  font-size: 12pt;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}

.work-buttons .work-btn.active {
  background: #252525;
  color: #ffffff;
  font-weight: 700;
}

/* work 페이지 - 탭 컨텐츠 */
.work-tab {
  display: none;
}

.work-tab.active {
  display: block;
}

/* work 페이지 - 15박스 그리드 레이아웃 */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 413px);
  grid-template-rows: repeat(5, 233px);
  gap: 20px;
  justify-content: center;
  margin-top: 100px;
}

.work-item {
  background-color: #ffffff;
  width: 413px;
  height: 233px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* work 페이지 전용 푸터 오프셋 */
.work-page .footer {
  margin-top: 150px;
}

/* contact 페이지 - 박스 그룹 */
.contact-page .contact-boxes {
  margin: 200px auto 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 66.67%;
  max-width: 1280px;
}

/* 공통 박스 스타일 */
.contact-page .contact-box {
  position: relative;
  background: #ffffff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.171);
}

.contact-page .contact-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(
    150deg,
    rgb(235, 235, 235) 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* 문의하기 박스 */
.contact-page .contact-box.inquiry {
  width: 408px;
  height: 299px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16pt;
  font-weight: 600;
}

/* 길안내 박스 */
.contact-page .contact-box.directions {
  width: 331px;
  height: 299px;
  position: relative;
}

.contact-page .address-container {
  position: absolute;
  top: 60px;
  left: 20px;
  right: 20px;
  width: 230px;
  cursor: pointer;
}

.contact-page .address-line {
  margin: 0;
  font-size: 10pt;
  font-weight: 400;
  color: #252525;
  line-height: 1.4;
}

/* 링크 아이콘 */
.contact-page .link-icon-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  vertical-align: middle;
  background-image: url('images/icon-link.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 지도 영역 */
.contact-page .contact-box.directions .map-area {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 291px;
  height: 168px;
  border-radius: 10px;
  overflow: hidden;
}

/* 지도 */
.contact-page .contact-box.directions #map {
  width: 100%;
  height: 100%;
}

/* 지도 클릭 방지 투명 오버레이 */
.contact-page .contact-box.directions .map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

/* FAQ 타이틀 */
.contact-page .faq-title {
  margin: 130px 0 0;
  text-align: center;
  color: #252525;
  font-size: 18pt;
  font-weight: 600;
}

/* FAQ 리스트 */
.contact-page .faq-list {
  margin: 80px auto 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 66.67%;
  max-width: 1280px;
  align-items: center;
}

/* 각 FAQ 아이템 */
.contact-page .faq-item {
  position: relative;
  width: 760px;
  height: 227px;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.171);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* FAQ 아이템 테두리 그라데이션 */
.contact-page .faq-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(
    150deg,
    rgb(235, 235, 235) 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* FAQ 제목 */
.contact-page .faq-item .faq-title {
  display: inline-block;
  position: relative;
  margin: 0;
  font-size: 16pt;
  font-weight: 700;
  color: #252525;
}

/* FAQ 제목 밑줄 */
.contact-page .faq-item .faq-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #252525;
  margin: 20px 0 0 0;
}

/* FAQ 본문 */
.contact-page .faq-item .faq-body {
  margin: 20px 0 0 0;
  font-size: 14pt;
  font-weight: 400;
  color: #252525;
  line-height: 2;
}

/* contact 페이지 - 푸터 위치 */
.contact-page .footer {
  margin-top: 200px;
}

/* contact 페이지 - 박스 내부 타이틀 (box-title) */
.contact-page .contact-box .box-title {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 14pt;
  font-weight: 600;
  color: #252525;
}

/* 문의하기 버튼 그룹 */
.contact-page .inquiry-buttons {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 60px;
}

/* 문의하기 아이템 (아이콘+라벨 묶음) */
.contact-page .inquiry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 문의하기 아이콘 버튼 */
.contact-page .inquiry-btn {
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 20px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* 카카오톡 아이콘 */
.contact-page .inquiry-btn.kakao {
  background-image: url('images/icon-kakao.png');
}

/* 메일 아이콘 */
.contact-page .inquiry-btn.mail-btn {
  background-image: url('images/icon-mail.png');
}

/* SMS 아이콘 */
.contact-page .inquiry-btn.sms-btn {
  background-image: url('images/icon-sms.png');
}

/* 문의하기 버튼 라벨 */
.contact-page .inquiry-label {
  margin-top: 30px;
  font-size: 10pt;
  font-weight: 400;
  color: #252525;
  text-align: center;
}

/* Inquiry overlay (메일/SMS 복사 성공시 오버레이) */
.inquiry-overlay {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 29px;
  background-color: #252525;
  border-radius: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10pt;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10000;
}

/* ── 모바일 (max-width: 480px 이하) ── */
@media (max-width: 480px) {

  /* 1. 홈 페이지: 스크롤 잠금 */
  body.home-page {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden !important;
  }

  /* 2. 다른 페이지: 스크롤 허용 */
  body:not(.home-page) {
    position: static !important;
    overflow: auto !important;
    height: auto !important;
  }

  /* 3. 홈 메인박스 & 인디케이터 위치 조정 */
  body.home-page .main-box {
    position: absolute;
    top: 90px;
    left: 20px;
    right: 20px;
    width: auto;
    height: calc(var(--vh, 1vh) * 100 - 90px - 90px); /* 전체높이 - 헤더90 - 푸터90 */
    min-height: 200px; /* 너무 작아지지 않게 */
    transform: none;
  }
  
  body.home-page .indicator-group {
    bottom: 20px;
  }

  /* 4. 헤더 및 탑바 고정 (전체 페이지 공통) */
  .header, .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
  }
  
  body.home-page .header,
  body.home-page .topbar {
    background: transparent !important;
  }

  /* 5. 헤더/탑바 컨테이너 재구성 */
  .header .container,
  .topbar .container {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
  }

  .header .logo,
  .topbar .logo {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    margin: 0;
  }

  .header .nav-buttons,
  .topbar .nav-buttons {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 200px;
    display: flex;
    justify-content: space-between;
    margin: 0;
  }

  .header .nav-buttons .nav-btn,
  .topbar .nav-buttons .nav-btn {
    flex: 1;
    width: auto;
    text-align: center;
    font-size: 10pt;
  }

  /* 6. 홈 페이지 푸터 고정 */
  body.home-page .footer {
    position: fixed;
    bottom: 10px; /* 화면 맨 아래에서 10px */
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    font-size: 8pt !important;
    transform: none;
    z-index: 1000;
  }

  body.home-page .footer-left {
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: auto;
    z-index: 1001;
  }

  body.home-page .footer-right {
    position: fixed;
    bottom: 35px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    pointer-events: auto;
    z-index: 1001;
  }

  /* 7. iOS tel/mail 링크 비활성화 */
  a[href^="tel"],
  a[href^="mailto"] {
    pointer-events: none !important;
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* ── about 페이지 모바일 전용 레이아웃 수정 ── */
@media (max-width: 480px) {

  /* 탑바 */
  .topbar {
    height: 100px !important;
    background: linear-gradient(
      to bottom,
      rgb(255, 255, 255) 0%,
      rgb(255, 255, 255) 60%,
      rgba(255, 255, 255, 0.6) 80%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    pointer-events: none;
  }

  .topbar .container {
    height: 80px !important;
    margin-top: 10px;
    padding: 0 20px;
    pointer-events: auto;
  }

  /* about 섹션 (박스 그룹) */
  body.about-page .about-section {
    margin-top: 120px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    position: relative;
    overflow: visible;
  }

  /* 가운데 박스 */
  body.about-page .about-section .center-box {
    position: relative;
    flex: 0 0 180px !important;
    min-width: 10px !important;
    height: 240px;
    border-radius: 20px;
    margin: 0;
    margin-bottom: 15px !important;
    z-index: 3;
  }

  .center-content {
    padding-top: 10px !important;
  }

  .center-title {
    font-size: 16pt !important;
    margin-bottom: 0px !important;
    font-weight: 900 !important;
  }

  .center-line {
    width: 70px !important;
    margin-bottom: 0px !important;
  }

  .center-list li {
    font-size: 10pt !important;
  }

  /* 크몽 버튼 */
  .kmong-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 26px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .kmong-text {
    font-size: 8pt !important;
    margin-left: 5px;
  }

  .kmong-circle {
    width: 20px;
    height: 20px;
  }

  /* 좌우 박스 */
  body.about-page .about-section .side-box {
    flex: 0 0 110px !important;
    min-width: 10px !important;
    height: 150px;
    border-radius: 20px;
    background-color: rgba(217,217,217,0.2);
    z-index: 2;
  }

  .left-box {
    margin-right: -20px;
  }

  .right-box {
    margin-left: -20px;
  }

  .side-content {
    top: 1px !important;
  }

  .side-title {
    font-size: 10pt !important;
    margin-bottom: 10px !important;
  }

  .side-line {
    width: 70px !important;
    margin: 0 auto 0px auto !important;
  }

  .side-list {
    margin-top: 15px !important;
    padding-left: 0 !important;
  }

  .side-list li {
    font-size: 8pt !important;
    line-height: 1.4 !important;
    margin-bottom: -10px !important;
  }
}

/* ── about, work, contact 공통: process section 모바일 수정 ── */
@media (max-width: 480px) {

  /* process 제목 */
  .process-title {
    font-size: 14pt !important;
    margin-bottom: 20px !important;
  }

  /* process 전체 여백 */
  .process-section {
    margin-top: 60px !important;
    margin-bottom: 10px !important;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* 타임라인 원 */
  .process-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 12pt !important;
    line-height: 30px !important;
    border-width: 2px !important; /* 비활성 원 테두리 얇게 */
  }

  .process-circle.filled {
    border: none !important; /* 활성 원은 테두리 없음 */
  }

  /* 타임라인 레이블 */
  .process-label {
    font-size: 6pt !important;
    line-height: 1.2 !important;
    margin-top: 10px !important;
    text-align: center !important;
  }

  /* 타임라인 선 */
  .process-line {
    width: 10px !important;
    margin: 0 4px !important;
    margin-bottom: 20px !important;
  }

  /* 타임라인 그룹 정렬 */
  .process-timeline {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* 개별 step 그룹 */
  .process-step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    margin: 0;
  }

  /* 캐러셀 카드 내부 박스 */
  .carousel-text-boxes {
    position: absolute;
    bottom: 10px;
    right: 10px; /* 카드의 오른쪽에서 10px 띄워서 */
    display: flex;
    flex-direction: row-reverse; /* 오른쪽부터 나열 */
    gap: 5px; /* 박스 사이 간격 5px */
    pointer-events: none; /* 드래그/스크롤 방해 안함 */
  }
  .carousel-text-boxes .text-box {
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 8px !important; /* (6pt은 너무 작아서 보통 px로 8px 정도 권장) */
    line-height: 20px !important; /* 수직 가운데 정렬 확실히 맞춤 */
    text-align: center !important;
    border: 1px solid #252525 !important;
    border-radius: 10px !important; /* 둥글기 유지 */
    white-space: nowrap !important; /* 줄바꿈 방지 */
    overflow: hidden !important;
  }

  /* 캐러셀 카드 */
  .carousel-card {
    position: relative;
    border-radius: 10px !important;
    flex: 0 0 220px !important;
    width: 220px !important;
    height: 125px !important;
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 0;
  }

  /* 캐러셀 카드 테두리 */
  .carousel-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 2px;
    border-radius: 10px;
    background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.5) 30%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }

  /* 카드 안 이미지 */
  .carousel-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 캐러셀 wrapper */
  .carousel-wrapper {
    width: calc(100% - 40px) !important;
    height: auto !important;
    margin: 20px auto !important;
    overflow: visible !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    text-align: center;
  }

  .carousel-wrapper::before,
  .carousel-wrapper::after {
    display: none !important;
  }

  /* 캐러셀 트랙 */
  .carousel-track {
    display: inline-flex !important;
    align-items: center !important;
    gap: 20px;
    overflow: visible !important;
    will-change: transform;
    cursor: grab;
    touch-action: pan-x !important;
  }

  .carousel-track > .carousel-card:first-child {
    margin-left: -15px;
  }

  /* 캐러셀 텍스트 */
  .carousel-text {
    font-size: 8pt !important;
    margin-top: 80px !important;
  }

  .carousel-text p + p {
    margin-top: 20px;
  }

}

/* ── info-box (홈 하단) 모바일 수정 ── */
@media (max-width: 480px) {

  /* info-box 전체 */
  .info-box {
    width: calc(100% - 20px) !important;
    height: 154px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    margin: 50px 10px 0 !important;
  }

  .info-box::before {
    border-radius: 20px !important;
    padding: 2px !important;
  }

  /* 첫 번째 박스만 패딩 조정 */
  .info-box:not(.second) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 이미지 컨테이너 */
  .info-box:first-child .info-image {
    margin: 0 !important;
    align-self: flex-start !important;
  }

  .info-box .info-image {
    flex: 0 0 154px;
    height: 100%;
    overflow: hidden;
    border-radius: 20px 0 0 20px !important;
  }

  .info-box .info-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 텍스트 영역 */
  .info-box .info-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 첫 번째 박스 텍스트 패딩 */
  .info-box:not(.second) .info-content {
    padding: 10px 10px 10px 0 !important;
  }

  /* 두 번째 박스 텍스트 패딩 */
  .info-box.second .info-content {
    padding: 10px 0 10px 10px !important;
  }

  /* 두 번째 박스 이미지 둥글기 반대 */
  .info-box.second .info-image {
    border-radius: 0 20px 20px 0 !important;
  }

  /* 텍스트 스타일 */
  .info-box .info-content h3 {
    font-size: 9pt !important;
    margin-bottom: 20px !important;
  }

  .info-box .info-content ul {
    margin: 0;
    padding-left: 5px;
  }

  .info-box .info-content ul li {
    font-size: 8pt !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  /* 두 번째 info-box 상단 여백 */
  .info-box.second {
    margin-top: 30px !important;
  }

}


/* ── contact-button (홈 문의하기 버튼) 모바일 수정 ── */
@media (max-width: 480px) {

  .contact-button {
    width: 150px;
    height: 40px;
    padding-left: 12px;
    position: relative;
    margin-top: 100px;
    margin-bottom: -70px;
  }

  .contact-button .contact-text {
    font-size: 12pt;
    font-weight: bold;
    line-height: 40px;
  }

  .contact-button .contact-icon {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

/* ── scroll-top-btn (상단 이동 버튼) 모바일 수정 ── */
@media (max-width: 480px) {

  .scroll-top-btn {
    position: fixed;
    width: 30px;
    height: 30px;
    right: 20px;
    bottom: 100px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1000;
  }

  .scroll-top-btn img {
    width: 100%;
    height: 100%;
    display: block;
  }

}

/* ── Work 페이지: 버튼 그룹 위치 및 스타일 (모바일) ── */
@media (max-width: 480px) {

  .work-page .work-buttons {
    margin: 120px auto 0 auto;
    display: flex;
    justify-content: center;
    gap: 10px; /* 기존 20px → 10px */
  }

  .work-page .work-buttons .work-btn {
    font-size: 8pt;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    color: #252525;
  }

  .work-page .work-buttons .work-btn.active {
    background-color: #252525 !important;
    color: #ffffff !important;
    font-weight: bold !important;
  }

  .work-page .work-buttons .work-btn:first-child {
    width: 80px;
    height: 24px;
  }

  .work-page .work-buttons .work-btn:last-child {
    width: 130px;
    height: 24px;
  }

}

/* ── Work 페이지: 이미지 콘텐츠 영역 (모바일) ── */
@media (max-width: 480px) {

  /* 이미지 그리드 대신 세로 스택 */
  .work-page .work-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* 각 work-item을 가로폭 100%로 확장 */
  .work-page .work-item {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden;
  }

  .work-page .work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  /* work-content 좌우 padding 적용 */
  .work-page .work-content {
    margin: -50px 0 0 0;
    padding: 0 20px !important;
    box-sizing: border-box;
  }

}



/* ── Contact 페이지: 문의/오시는길 박스 반응형 ── */
@media (max-width: 480px) {

  /* 컨테이너를 세로 스택 + 가운데 정렬 */
  body.contact-page .contact-boxes {
    margin-top: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box;
  }

  /* 박스 공통 스타일 */
  body.contact-page .contact-box {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    background: #ffffff;
    border-radius: 20px !important;
    box-sizing: border-box;
    overflow: hidden !important;
    position: relative;
  }

  body.contact-page .contact-box::before {
    border-radius: 20px !important;
    padding: 2px !important;
  }

  /* 문의하기 박스 높이 */
  body.contact-page .contact-box.inquiry {
    height: 190px !important;
  }

  /* 오시는길 박스 높이 */
  body.contact-page .contact-box.directions {
    height: 260px !important;
  }

}

/* ── Contact 페이지: 문의 버튼 그룹 반응형 ── */
@media (max-width: 480px) {

  /* 문의 버튼 그룹 */
  body.contact-page .inquiry-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    margin-top: -40px !important;
  }

  /* 개별 문의 버튼 */
  body.contact-page .inquiry-item {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.contact-page .inquiry-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 20px !important;
  }

  /* 문의 버튼 레이블 */
  body.contact-page .inquiry-label {
    width: auto !important;
    white-space: normal !important;
    font-size: 8pt !important;
    text-align: center !important;
    line-height: 1.5 !important;
    margin-top: 20px !important;
  }

}

/* ── Contact 페이지: 주소 텍스트 및 지도 반응형 ── */
@media (max-width: 480px) {

  /* 주소 컨테이너 */
  body.contact-page .address-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    width: 180px !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin-top: -5px !important;
    pointer-events: auto !important;
  }

  /* 주소 터치 효과 */
  body.contact-page .address-container.pressed::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.1);
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 1;
  }

  /* 주소 텍스트 */
  body.contact-page .address-line {
    font-size: 8pt !important;
    margin: 2px 0 !important;
  }

  /* 지도 영역 */
  body.contact-page .contact-box.directions .map-area {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: 150px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* 카카오맵 컨테이너 및 내부 iframe */
  body.contact-page .contact-box.directions .root_daum_roughmap_landing,
  body.contact-page .contact-box.directions .root_daum_roughmap_landing iframe,
  body.contact-page .contact-box.directions .root_daum_roughmap_landing > div {
    width: 100% !important;
    height: 100% !important;
  }

}

/* ── Contact 페이지: FAQ 타이틀 및 리스트 반응형 ── */
@media (max-width: 480px) {
  /* FAQ 타이틀 */
  body.contact-page > .faq-title {
    font-size: 12pt !important;
    margin: 50px 0 30px !important;
    text-align: center !important;
  }

  /* FAQ 리스트 컨테이너 */
  body.contact-page .faq-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: -70px !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* FAQ 아이템 박스 */
  body.contact-page .faq-list .faq-item {
    width: calc(100% - 20px) !important;
    height: 120px !important;
    margin: 0 10px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* FAQ 박스 그라데이션 테두리 */
  body.contact-page .faq-list .faq-item::before {
    border-radius: 20px !important;
    padding: 2px !important;
  }

  /* FAQ 제목 */
  body.contact-page .faq-list .faq-item .faq-title {
    font-size: 10pt !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: inline-block !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #252525 !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
  }

  /* FAQ 제목 아래 선 제거 */
  body.contact-page .faq-list .faq-item .faq-title::after {
    content: none !important;
  }

  /* FAQ 본문 */
  body.contact-page .faq-list .faq-item .faq-body {
    font-size: 8pt !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin: 10px !important;
    line-height: 2 !important;
  }
}

/* ── Contact 페이지: 전체 FAQ 리스트 정렬 및 구조 정리 ── */
@media (max-width: 480px) {
  /* 컨테이너 폭 및 패딩 초기화 */
  body.contact-page .faq-list {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 각 FAQ 아이템 좌우 10px 여백 확보 */
  body.contact-page .faq-list .faq-item {
    margin: 0 10px !important;
  }

  /* 페이지 전체 수직 스크롤만, 가로 스크롤 방지 */
  html, body {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    position: relative !important;
  }

  /* 캬러셀(wrapper) 구역만 가로 드래그 허용 */
  .carousel-wrapper, .carousel-track {
    touch-action: pan-x !important;
  }

}

/* ── 전체 모바일 최적화: 스크롤 세팅 및 터치 액션 ── */
@media (max-width: 480px) {

  /* 페이지 전체는 수직 스크롤만 허용, 가로 스크롤 방지 */
  html, body {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    position: relative !important;
  }

  /* 캬러셀(wrapper)과 트랙 영역만 가로 드래그 허용 */
  .carousel-wrapper, .carousel-track {
    touch-action: pan-x !important;
  }

}

@media (max-width: 480px) {

    /* about/work/contact 페이지 푸터 전체 설정 */
    body.about-page .footer,
    body.work-page  .footer,
    body.contact-page .footer {
      font-size: 8pt !important;
      position: relative;
      width: 100%;
      padding: 0 20px !important; /* 좌우 20px 여백 */
      box-sizing: border-box;
    }
  
    /* 카피라이트 (footer-left): 가로 중앙 */
    body.about-page .footer-left,
    body.work-page  .footer-left,
    body.contact-page .footer-left {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%); /* ← 가운데 정렬 */
      white-space: nowrap;
      font-size: 8pt;
    }
  
    /* 연락처 (footer-right): 오른쪽 정렬 */
    body.about-page .footer-right,
    body.work-page  .footer-right,
    body.contact-page .footer-right {
      position: absolute;
      bottom: 35px;
      right: 20px; /* ← 화면 오른쪽 20px 여백 */
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      white-space: nowrap;
      font-size: 8pt;
    }
  
  }

/* ── 푸터 클릭 인터랙션 (전역 적용) ── */
.footer-phone,
.footer-email {
  cursor: pointer;
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
  appearance: none;
}

.footer-phone:active,
.footer-email:active {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

#bg1,
#bg2 {
  background-position: center center !important;
  background-size: cover         !important;
}