/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
}

.main-container {
    position: relative;
    width: 100%;
    max-width: 3000px; /* 필요에 따라 조정 */
    margin: 0 auto;
    box-sizing: border-box;
}

/* device layout variants */
body.mobile {
    justify-content: flex-start;
}

body.pc {
    justify-content: flex-start;
}

/* 상단 네비게이션 공통 */
.nav {
    position: sticky; /* 컨테이너 내에서 고정처럼 동작 */
    top: 0;
    left: 0; right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 0; /* 브랜드와 여백 고려 */
    box-sizing: border-box;
    z-index: 100; /* 슬라이더 등 콘텐츠 위에 표시 */
    backdrop-filter: blur(2px);
    background-color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
}

/* 브랜드 버튼 */
.brand {
    /*position: absolute; /* main-container 기준 */
    position: sticky; /* 컨테이너 내에서 고정처럼 동작 */
    top: 0px;
    left: 0px;
    color: rgb(0, 0, 0);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(6px);
    /*border: 1px solid rgba(255,255,255,0.4);*/
    /*padding: 8px 12px;*/
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    z-index: 120; /* nav 위에 유지 */
    font-size: 1.4rem;
    /*line-height: 1.1;*/
}
.brand:hover { transform: translateY(-1px); background: rgba(252, 113, 113, 0.0); }

/* 브랜드 이미지 변형 (.brand--img) */
.brand--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*padding: 4px 8px; /* 이미지 여백 */
  line-height: 1; /* 이미지 수직 정렬 안정화 */
}
.brand--img img {
  display: block;
  height: 45px; /* 상단 바 높이에 맞춘 고정 높이 */
  width: auto;
  object-fit: contain;
  transition: filter 0.2s ease; /* Safari 등 호환 */
  -webkit-transition: -webkit-filter 0.2s ease;
}
.brand--img:hover img,
.brand--img:focus-visible img {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
  -webkit-filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}
/* 작은 화면에서 이미지 크기 조정 */
@media (max-width: 600px) {
  .nav{height:50px;}
  .brand--img { padding: 0px 0px; }
  .brand--img img { height: 23px; }
  .nav { padding: 0 8px 0 0; } /* 왼쪽 패딩 제거, 오른쪽 약간 여백 */
  .brand { top: 0; left: 0; }    /* 좌상단 고정 */
}

/* PC 메뉴 */
.pc-menu { display: none; gap: 16px; margin-left: auto; }
.pc-menu a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.2s ease, box-shadow 0.2s ease; /* 호버 그림자 부드럽게 */
}
.pc-menu a:hover { 
    background: rgba(255,255,255,0.8); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.25); /* 호버 시 그림자 */
}

/* 모바일 햄버거 */
.hamburger {
    margin-left: auto;
    width: 40px; height: 40px;
    background: transparent; border: none; cursor: pointer;
    display: none; /* 기본은 감춤, 모바일에서 표시 */
    /* 중앙 정렬을 위한 플렉스 레이아웃 적용 */
    display: none; /* mobile 분기에서만 표시됨 */
    /* 모바일에서 표시될 때 중앙 정렬 */
}
body.mobile .hamburger {
    display: flex; /* 모바일에서 표시 시 플렉스 컨테이너 */
    align-items: center;
    justify-content: center;
    padding: 8px; /* 기본 패딩 제거 */
}
.hamburger span {
    display: block;
    width: 24px; height: 2px;
    /* 수평 중앙 정렬 대신 수직 간격만 */
    margin: 3px 0;
    background: rgb(0, 0, 0);
    border-radius: 2px;
}

.mobile-menu {
    position: fixed;
    top: 56px; right: 16px; left: 16px;
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 8px;
    z-index: 110; /* nav 위에서 드롭다운 표시 */
}
.mobile-menu a {
    color: white; text-decoration: none; padding: 10px 12px; border-radius: 8px;
}
.mobile-menu a:hover { background: rgba(255,255,255,0.15); }

/* 중앙 콘텐츠 */
.center { 
    text-align: center; 
    width: 100%;
}
#currentPageTitle { color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

#textLeft { 
    display: block; /* 블록으로 폭을 확보 */
    width: 100%;
    text-align: left; /* 좌측 정렬 */
    margin: 16px 0; /* 상하 여백 */
    color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-size: 2rem;
}
#textLeft_big{
    display: block; /* 블록으로 폭을 확보 */
    width: 100%;
    text-align: center; /* 좌측 정렬에서 중앙 정렬로 변경 */
    margin: 12px 0; /* 상하 여백 */
    color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-size: 3rem;
    font-weight: 700 !important; /* 외부 main.css의 얇은 가중치를 강제 무효화 */
}
#textLeft_small{
    display: block; /* 블록으로 폭을 확보 */
    width: 100%;
    text-align: center; /* 좌측 정렬에서 중앙 정렬로 변경 */
    margin: 8px 0; /* 상하 여백 */
    color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-size: 1.5rem;
    font-weight: 600 !important; /* 외부 규칙 덮어쓰기 */
}
@media (max-width: 600px) {
  #textLeft_big { font-size:2rem }
  #textLeft_small { font-size:1.2rem }
}
#textCenter { 
    display: block; /* 블록으로 폭을 확보 */
    width: 100%;
    text-align: center; /* 중앙 정렬 */
    margin: 16px 0; /* 상하 여백 */
    color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-size: 1.0rem;
}

/* 디바이스 분기: 표시/숨김 */
body.pc .pc-menu { display: flex; }
body.pc .hamburger { display: none; }
body.mobile .pc-menu { display: none; }
body.mobile .hamburger { display: inline-block; }

/* 기존 텍스트 및 버튼 스타일 유지 */
h1 { font-size: 4rem; margin-bottom: 2rem; }
body.mobile h1 { font-size: 2.8rem; }

.counter-container { 
    text-align: center; 
    width: 100%;
}
.counter-container p { color: white; font-size: 1.5rem; margin-bottom: 1rem; }
body.mobile #counter, body.mobile .counter-container p { font-size: 1.2rem; }
#counter { font-weight: bold; font-size: 2rem; }

button {
    background-color: white; color: #667eea; border: none; padding: 12px 30px;
    font-size: 1.2rem; border-radius: 25px; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
body.mobile button { padding: 10px 24px; font-size: 1rem; }
button:hover { background-color: #f0f0f0; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); }
button:active { transform: translateY(0); }

/* Swiper 크기 설정 */
.swiper {
  width: 100%; /* 부모 너비를 꽉 채움 */
  max-width: 100%;
  height: auto; /* aspect-ratio에 의해 자동 계산 */
  min-height: 200px; /* 텍스트가 보이도록 최소 높이 확보 */
  overflow: hidden;
}
.swiper .swiper-wrapper { height: 100%; }

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 1.2rem;
  text-align: center;
  height: 100%; /* 슬라이드가 컨테이너 높이를 채우도록 */
  box-sizing: border-box;
}
/* 슬라이드 내 이미지도 컨테이너 비율에 맞게 */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 슬라이드 내 텍스트 스타일 */
.slide-text {
  display: inline-block;
  color: #000000;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(43, 18, 18, 0.25);
  backdrop-filter: blur(4px);
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.5;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* 포인트 컬러 강조 */
.accent-teal {
  color: #2dd4bf; /* 청록색 */
}

.accent-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 폴백: 그라데이션 미지원 브라우저용 */
  color: #6e3aff;
}

/* 반응형 폰트 크기 조정 */
@media (min-width: 768px) {
  .slide-text { font-size: 1.1rem; }
}
@media (min-width: 1024px) {
  .slide-text { font-size: 1.25rem; padding: 16px 20px; }
}

/* 상단 여백을 위한 스페이서 */
.spacer { height: 50px; }
.spacer_small { height: 25px; }
@media (min-width: 768px) {
  .spacer_small { height: 0px; }
}

/* slick slider 스타일 수정: 반응형 폭/높이 */
#product { background:transparent; padding:70px 0; }
.product_inner { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.product_inner h2 { font-size:32px; color:#444; line-height:1; text-align:center; }
.product_inner h2 b { color:hotpink; }
.slider_wrap { /* height:560px; */ margin-top:30px; font-size:0px; }
/* 각 카드가 컨테이너를 넘치지 않도록 */
.slidewidth { 
  position:relative; 
  width: 100%;
  max-width: 280px; 
  height: auto;
  min-height: 380px;
  overflow:visible; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:flex-start; 
  padding:10px; 
  box-sizing:border-box; 
  border: 1px solid #bbbbbb; 
  border-radius: 8px; 
  gap:6px; 
  margin:5px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.slidewidth:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.slidewidth.immediate {
  min-height: 320px;
  max-width: 340px;
}
.slidewidth img { display:block; max-width: 100%; width: 100%; height: 200px; max-height: 200px; object-fit: contain; margin: 0 auto; border-radius: 6px; flex-shrink: 0; }
.slidewidth h3 { margin-top:0; font-size:clamp(16px, 3vw, 20px); color:#333; line-height:1.2; text-align:center; }
.slidewidth h4 { margin-top:0; font-size:clamp(13px, 2.5vw, 15px); color:#333; line-height:0.8; text-align:center; }
.slick-list { margin: 0 -10px; padding:5px; } /* 좌우만 음수 마진 적용, 상하는 0으로 설정하여 첫 번째 카드 잘림 방지 */
.slick-slide { vertical-align: top; } /* 슬라이드 상단 정렬로 위치 통일 */
.slick-slide > div + div { margin-top:20px; }

/* 이벤트 카드 */
.event_slidewidth { 
  position:relative; 
  height:auto; 
  min-height:270px; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  padding:10px; 
  box-sizing:border-box;
  text-decoration: none; /* 링크 밑줄 제거 */
  color: inherit; /* 부모 색상 상속 */
  cursor: pointer; /* 포인터 커서 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 호버 효과 */
}
.event_slidewidth:hover {
  transform: translateY(-4px); /* 호버 시 살짝 위로 */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* 호버 시 그림자 */
}
.event_slidewidth img { display:block; width: 100%; height: 200px; object-fit: cover; margin: 0 auto; border-radius: 8px; }
.event_slidewidth h3 { margin-top:8px; font-size:20px; color:#333; line-height:1.2; text-align:center; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.event_slidewidth h4 { margin-top:8px; font-size:15px; color:#333; line-height:0.8; text-align:center; }

/* 리뷰 카드 */
.review_slidewidth { 
  position:relative; 
  height:auto; 
  min-height:250px; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  padding:10px; 
  box-sizing:border-box;
  text-decoration: none; /* 링크 밑줄 제거 */
  color: inherit; /* 부모 색상 상속 */
  cursor: pointer; /* 포인터 커서 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 호버 효과 */
  height: 300px; /* 고정 높이를 지정해 자식 이미지의 height:70%가 정상 동작하도록 */
}
.review_slidewidth:hover {
  transform: translateY(-4px); /* 호버 시 살짝 위로 */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* 호버 시 그림자 */
}
.review_slidewidth img {
  display:block;
  width: 100%; /* 전체 너비 사용 */
  height: 70%; /* 카드 높이의 70%만 사용 */
  object-fit: cover; /* 이미지를 채우며 나머지 영역은 잘림 */
  object-position: top; /* 위쪽을 기준으로 잘리도록 설정 */
  margin: 0 auto; /* 중앙 정렬 */
}
.review_slidewidth h3 { margin-top:8px; font-size:18px; color:#333; line-height:1.2; text-align:center; }
.review_slidewidth h4 { margin-top:8px; font-size:14px; color:#555; line-height:1.0; text-align:center; }

/* PC 버전 - 즉시출고 카드 크기 확대 */
@media (min-width: 1024px) {
  .slidewidth {
    max-width: 500px; /* PC에서 더 크게 */
    /*min-height: 450px;*/
  }
  .slidewidth.immediate {
    max-width: 600px; /* 즉시출고는 더욱 크게 */
    /*min-height: 420px;*/
  }
  .slidewidth img {
    height: 280px;
    /*max-height: 280px;*/
  }
}

/* 태블릿 버전 */
@media (min-width: 601px) and (max-width: 1023px) {
  .slidewidth {
    max-width: 320px;
    /*min-height: 400px;*/
  }
  .slidewidth.immediate {
    max-width: 380px;
    /*min-height: 360px;*/
  }
  .slidewidth img {
    height: 220px;
    /*  max-height: 220px; */
  }
}

/* 모바일 버전 */
@media (max-width: 600px) {
  #product { padding: 40px 0; }
  .product_inner { padding: 0 12px; }
  .slidewidth { padding: 8px; min-height: 280px; }
  .slidewidth img { max-height: 140px; }
  .event_slidewidth { padding: 8px; min-height: 220px; }
  .review_slidewidth { padding: 8px; min-height: 220px; height: 300px; /* 모바일에서 카드 높이 축소 */ }
}

/* 차량 확인하기 버튼 */
.btn-check {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 40px; /* 좌우 패딩 증가: 14px → 40px */
  min-width: 200px; /* 최소 가로 너비 지정 */
  border-radius: 5px;
  border: 2px solid #111;
  color: #111;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  font-size: 14px; /* 상위 font-size:0 무력화 */
  text-align: center; /* 텍스트 중앙 정렬 */
}
.btn-check:hover {
  color: #fff;
  background: #111;
  transform: translateY(-1px);
}

/* 모바일 버전: 버튼이 카드를 넘어가지 않도록 조정 */
@media (max-width: 600px) {
  .btn-check {
    min-width: auto; /* 최소 너비 제거 */
    width: calc(100% - 20px); /* 카드 패딩 고려하여 전체 너비 */
    max-width: 100%; /* 최대 너비 제한 */
    padding: 8px 16px; /* 패딩 축소 */
    font-size: 13px; /* 폰트 크기 약간 축소 */
    box-sizing: border-box; /* 패딩 포함 너비 계산 */
  }
}

/* 슬라이더 탭 스타일 */
.slider-tabs { 
  display: flex; 
  gap: 8px; 
  justify-content: flex-start; /* 좌측 정렬 (스크롤 시 잘림 방지) */ 
  margin: 12px 0; 
  overflow-x: auto; /* 가로 스크롤 */
  overflow-y: hidden; 
  -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
  scroll-snap-type: x proximity; /* 스냅(선택) */
  scroll-behavior: smooth; /* 부드러운 스크롤 */
  padding-bottom: 6px; /* 스크롤바 여백 */
  cursor: grab; /* 드래그 힌트 */
  user-select: none; /* 텍스트 선택 방지 */
  touch-action: pan-x; /* 수평 제스처 최적화 */
}
/* 콘텐츠가 컨테이너보다 작을 때만 중앙 정렬 (스크롤 불필요한 경우) */
.slider-tabs:not(.has-overflow) {
  justify-content: center;
}
.slider-tabs::-webkit-scrollbar { height: 6px; }
.slider-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.04); border-radius: 3px; }
.slider-tabs::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }

.slider-tabs.dragging { cursor: grabbing; }

.tab-btn {
  flex: 0 0 auto; /* 줄바꿈 방지, 가로 스크롤 대상 */
  scroll-snap-align: start; /* 스냅 정렬 */
  padding: 8px 14px;
  border-radius: 18px;
  border: 2px solid #d0d0d0;
  background: #fff;
  color: #111;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn.active { 
  color: #fff; 
  border: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box;
}

/* 이미지 탭 버튼 변형 */
.tab-btn--img {
  padding: 6px 45px; /* 가로 여백 확대 */
  border-radius: 12px;
  background: #f2f2f2; /* data-img 있을 때 회색 배경 */
  min-width: 72px; /* 버튼 최소 가로 크기 */
  min-height: 82px; /* 버튼 최소 세로 크기 (이미지 로딩 전 레이아웃 유지) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-btn--img.active { /*background: #2dd4bf;*/ color: #fff; }
.tab-btn--img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
  flex-shrink: 0; /* 이미지 크기 고정 */
}
@media (max-width: 600px) {
  .tab-btn--img { min-width: 56px; min-height: 48px; padding: 6px 10px; }
  .tab-btn--img img { width: auto; height: auto; max-width: 36px; max-height: 36px; }
}

/* 슬라이더 탭 래퍼 및 화살표 */
.slider-tabs-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.tabs-arrow { 
  flex: 0 0 auto;
  width: 36px; height: 36px; 
  aspect-ratio: 1 / 1; /* 가로:세로 1:1 유지 */
  box-sizing: border-box; /* 테두리 포함해도 정사각형 유지 */
  padding: 0; /* 내용 패딩으로 타원화 방지 */
  border-radius: 50%; 
  border: 2px solid #d0d0d0;
  background: #fff; 
  color: #111; 
  font-size: 20px; 
  line-height: 1; /* 텍스트 라인높이로 높이 왜곡 방지 */
  text-align: center; 
  cursor: pointer; 
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; 
}
.tabs-arrow:hover { background: #808080; color: #fff; transform: translateY(-1px); }
.tabs-arrow:active { transform: translateY(0); }
.tabs-arrow.left { order: 0; }
.tabs-arrow.right { order: 2; }
.slider-tabs-wrap .slider-tabs { order: 1; flex: 1 1 auto; }

/* 모바일: 탭 좌우 화살표 숨김 */
body.mobile .tabs-arrow { display: none !important; }

@media (max-width: 600px) {
  .tabs-arrow { width: 32px; height: 32px; font-size: 18px; }
}

/* 리스트 래퍼: 기본은 표시, hidden 속성으로 숨김 */
.slick-list-wrap[hidden] { display: none !important; }
/* 장기렌트/리스 텍스트 */

#textSlider_Big{ 
  margin-top:8px; 
  font-size:20px; 
  color:#333; 
  line-height:1.2; 
  text-align:center; 
}
#textSlider_Big_RIGHT{
  display: inline; /* inline 유지 */
  float: right; /* 우측으로 띄우기 */
  margin-right: 30px; /* 우측 여백 제거 */
  color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  font-size:20px; 
}

#textSlider{
  display: block; /* 블록으로 폭을 확보 */
  width: 100%;
  text-align: center; /* 좌측 정렬에서 중앙 정렬로 변경 */
  margin: 8px 0; /* 상하 여백 */
  color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  font-size: 1rem;
}
#textSlider_small{
  display: inline; /* 같은 줄에 표시 */
  text-align: center; /* 좌측 정렬에서 중앙 정렬로 변경 */
  margin-left: 8px; /* 좌측 여백 */
  color: rgb(0, 0, 0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  font-size: 0.875rem;
}


/* 슬라이드 내부 추가 텍스트 (h1) 가시화 */
#textSlider_Big { font-size: 1.25rem; color:#333; line-height:1.2; text-align:left; margin-top:8px; }
#textSlider { font-size: 1rem; color:#333; line-height:1.2; text-align:left; margin-top:4px; }
@media (max-width: 600px) {
  #textSlider { font-size:1rem }
}

.post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-more {
  display: inline-block;
  margin: 20px auto;
  padding: 12px 24px;
  border-radius: 25px;
  border: 2px solid #111;
  color: #111;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.btn-more:hover {
  color: #fff;
  background: #111;
  transform: translateY(-1px);
}
.btn-more:active {
  transform: translateY(0);
}
.btn-more {
    font-size: 1.2rem;
}
body.mobile .btn-more {
    font-size: 1rem;
    padding: 10px 20px;
}

/* ButtonStrip.js */
.button-strip {
  position: relative;

  width: 340px;
  height: 55px;
  border: 2px solid #000000;
  border-radius: 3px;
  display: flex;
  margin: 0 auto; /* 컨테이너 내부에서 가로 중앙 정렬. 고정 너비가 있어 중앙 정렬이 정상 작동합니다. */
}
@media (max-width: 600px) {
  .button-strip {
    width: 70%;
    height: 48px;
  }
}
.strip-button {
  background-color: white;
  color: #000000; /* 기본 텍스트 색상 */
  width: 50%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 65px;
  transition: background-color .4s linear, color .2s linear;
  cursor: pointer;
}
.strip-button span {
  color: inherit;
}
.strip-button-text {
  font-size: 22px;
  color: #000000;
  margin: 0px;
  padding: 0px;
  position: relative; 
  top: -5px; /* 텍스트를 위로 5px 이동 */
}
.active-strip-button {
  background-color: #2dd4bf;
  color: white; /* 활성화된 버튼의 텍스트 색상 */
}

/* 슬라이드 내 텍스트 스타일 */
.page-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(43, 18, 18, 0.25);
  backdrop-filter: blur(4px);
  width: 20px;
  height: 20px;
  border-radius: 50%; /* 원형 */
  line-height: 1;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  font-size: 12px;
  transition: background 0.3s ease, color 0.3s ease; /* 부드러운 전환 */
}

/* 활성화된 페이지 버튼 스타일 */
.slick-active .page-button-text {
  background: #ffffff; /* 흰색 배경 */
  color: #000000;
  border: 2px solid rgba(0, 0, 0, 0.5);
}

/* 반응형 폰트 크기 조정 */
@media (max-width: 600px) {
  .page-button-text { font-size: 12px; width: 20px; height: 20px; }
}



/* Footer 스타일 */
.footer {
  width: 100%;
  min-height: 250px;
  background-color: #2c3e50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.footer-content {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer-logo {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  color: #ecf0f1;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
  border-right: 1px solid #7f8c8d;
  padding-right: 20px;
}

.footer-links a:last-child {
  border-right: none;
  padding-right: 0;
}

.footer-links a:hover {
  color: #667eea;
}

.footer-info {
  text-align: center;
  color: #bdc3c7;
  font-size: 13px;
  line-height: 1.8;
}

.footer-info p {
  margin: 5px 0;
  color: #bdc3c7;
}

.footer-copyright {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #34495e;
  color: #95a5a6;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 768px) {
  .footer {
    padding: 30px 15px;
  }

  .footer-logo {
    width: 100px;
  }

  .footer-links {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .footer-links a {
    border-right: none;
    padding-right: 0;
  }

  .footer-info {
    font-size: 12px;
  }
}

/* 모바일: 전체 페이지 가로 스크롤 방지 */
html, body { max-width: 100vw; overflow-x: hidden; }
body.mobile { touch-action: pan-y; overscroll-behavior-x: contain; }
body.mobile .main-container { overflow-x: hidden; }

/* colorlib 폼 레이아웃 오버라이드: 특정 컬럼을 전체 너비로 확장 */
.card-4 .col-full {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* colorlib textarea 폭 최소화 문제 해결: 컨테이너 전체 폭 사용 */
textarea.input--style-4 {
  width: 100% !important;
  max-width: 100% !important;
  resize: vertical; /* 세로로만 크기 조절 허용 */
}
/* col-full 내부 textarea 보강 */
.card-4 .col-full textarea.input--style-4 {
  width: 100% !important;
}

/* ButtonStrip 스타일 오버라이드 */
#buttonStrip-demo,
#buttonStrip-event {
  border-radius: 10px !important;
  border-color: rgba(0, 0, 0, 0.3) !important; /* 연한 테두리 */
  overflow: hidden; /* border-radius 적용을 위해 필요 */
}

#buttonStrip-demo button,
#buttonStrip-event button {
  border-color: rgba(0, 0, 0, 0.15) !important; /* 연한 테두리 */
  border-radius: 10px !important;
}

#buttonStrip-demo button:first-child,
#buttonStrip-event button:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

#buttonStrip-demo button:last-child,
#buttonStrip-event button:last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* 활성화된 버튼 테두리도 연하게 */
#buttonStrip-demo button.active,
#buttonStrip-event button.active {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* 호버 시에도 부드러운 테두리 유지 */
#buttonStrip-demo button:hover,
#buttonStrip-event button:hover {
  border-color: rgba(0, 0, 0, 0.25) !important;
}

/* 모바일 화면에서 ButtonStrip 버튼 스타일 조정 */
@media (max-width: 600px) {
  #buttonStrip-demo button,
  #buttonStrip-event button {
    font-size: 13px !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
  }
}

/* 이벤트 상세 페이지 스타일 */
.event-detail-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.event-detail-loading,
.event-detail-error {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #666;
}

.event-detail-error p {
  margin-bottom: 20px;
  color: #999;
}

.event-detail-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.event-detail-header {
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.event-detail-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 700;
}

.event-date {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.event-detail-images {
  padding: 30px;
  background: #f9f9f9;
}

.event-main-image {
  width: 100%;
  text-align: center;
}

.event-main-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.event-detail-description {
  padding: 30px;
}

.event-detail-description h3 {
  margin: 0 0 15px 0;
  font-size: 22px;
  color: #333;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.event-detail-description p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  white-space: pre-wrap;
}

.event-detail-actions {
  padding: 20px 30px 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-back,
.btn-inquiry {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-back {
  background-color: #6c757d;
  color: white;
}

.btn-back:hover {
  background-color: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-inquiry {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-inquiry:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 모바일 반응형 */
@media (max-width: 600px) {
  .event-detail-header h2 {
    font-size: 22px;
  }
  
  .event-date {
    font-size: 14px;
  }
  
  .event-detail-description h3 {
    font-size: 18px;
  }
  
  .event-detail-description p {
    font-size: 14px;
  }
  
  .event-detail-actions {
    flex-direction: column;
    padding: 20px 15px;
  }
  
  .btn-back,
  .btn-inquiry {
    width: 100%;
    max-width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
  }
}

/* 리뷰 상세 페이지 스타일 (이벤트 상세와 동일한 스타일 적용) */
.review-detail-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.review-detail-loading,
.review-detail-error {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #666;
}

.review-detail-error p {
  margin-bottom: 20px;
  color: #999;
}

.review-detail-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.review-detail-header {
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.review-detail-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 700;
}

.review-date {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.review-detail-images {
  padding: 30px;
  background: #f9f9f9;
}

.review-main-image {
  width: 100%;
  text-align: center;
}

.review-main-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.review-detail-description {
  padding: 30px;
}

.review-detail-description h3 {
  margin: 0 0 15px 0;
  font-size: 22px;
  color: #333;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.review-detail-description p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  white-space: pre-wrap;
}

.review-detail-actions {
  padding: 20px 30px 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 모바일 반응형 (리뷰 상세) */
@media (max-width: 600px) {
  .review-detail-header h2 {
    font-size: 22px;
  }
  
  .review-date {
    font-size: 14px;
  }
  
  .review-detail-description h3 {
    font-size: 18px;
  }
  
  .review-detail-description p {
    font-size: 14px;
  }
  
  .review-detail-actions {
    flex-direction: column;
  }
}

/* 즉시출고 상세 페이지 스타일 */
.immediate-detail-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.immediate-detail-loading,
.immediate-detail-error {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #666;
}

.immediate-detail-error p {
  margin-bottom: 20px;
  color: #999;
}

.immediate-detail-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.immediate-detail-header {
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.immediate-detail-header h2 {
  margin: 0 0 15px 0;
  font-size: 28px;
  font-weight: 700;
}

.immediate-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.info-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.immediate-detail-price {
  padding: 25px 30px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.price-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.price-label {
  font-size: 18px;
  color: #666;
  font-weight: 500;
}

.price-value {
  font-size: 32px;
  color: #2dd4bf;
  font-weight: 700;
}

.immediate-detail-specs {
  padding: 30px;
  background: white;
}

.immediate-detail-specs h3 {
  margin: 0 0 20px 0;
  font-size: 22px;
  color: #333;
  border-bottom: 2px solid #2dd4bf;
  padding-bottom: 10px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.spec-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.spec-value {
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.immediate-detail-images {
  padding: 30px;
  background: #f9f9f9;
  border-top: 1px solid #e9ecef;
}

.immediate-detail-images h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #333;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.immediate-detail-main-image {
  width: 100%;
  background: #f9f9f9;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.immediate-detail-main-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: block;
  margin: 0 auto;
}

.immediate-detail-actions {
  padding: 20px 30px 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .immediate-detail-actions {
    flex-direction: column;
    padding: 20px 15px;
  }
}

/* 렌탈 상세 페이지 스타일 */
.rental-detail-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.rental-detail-loading,
.rental-detail-error {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #666;
}

.rental-detail-error p {
  margin-bottom: 20px;
  color: #999;
}

.rental-detail-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.rental-detail-header {
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.rental-detail-header h2 {
  margin: 0 0 15px 0;
  font-size: 28px;
  font-weight: 700;
}

.rental-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.rental-detail-main-image {
  width: 100%;
  background: #f9f9f9;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rental-detail-main-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: block;
  margin: 0 auto;
}

.rental-detail-price {
  padding: 30px;
  background: white;
  border-bottom: 1px solid #e9ecef;
}

.rental-detail-price h3 {
  margin: 0 0 20px 0;
  font-size: 22px;
  color: #333;
  text-align: center;
}

.price-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.price-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.price-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.price-option.highlight {
  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
  border-color: #667eea;
}

.option-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.option-value {
  font-size: 26px;
  color: #667eea;
  font-weight: 700;
}

.price-option.highlight .option-value {
  font-size: 28px;
  color: #764ba2;
}

.rental-detail-specs {
  padding: 30px;
  background: white;
}

.rental-detail-specs h3 {
  margin: 0 0 20px 0;
  font-size: 22px;
  color: #333;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.rental-detail-images {
  padding: 30px;
  background: #f9f9f9;
  border-top: 1px solid #e9ecef;
}

.rental-detail-images h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #333;
}

.rental-detail-actions {
  padding: 20px 30px 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 모바일 반응형 (렌탈 상세) */
@media (max-width: 600px) {
  .rental-detail-header h2 {
    font-size: 22px;
  }
  
  .rental-detail-price h3 {
    font-size: 18px;
  }
  
  .price-options {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .option-label {
    font-size: 14px;
  }
  
  .option-value {
    font-size: 22px;
  }
  
  .price-option.highlight .option-value {
    font-size: 24px;
  }
  
  .rental-detail-specs h3,
  .rental-detail-images h3 {
    font-size: 18px;
  }
  
  .rental-detail-actions {
    flex-direction: column;
    padding: 20px 15px;
  }
}

/* 2컬럼 레이아웃 (카밍 소개 + 후기 리스트) */
.two-column-section {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
}

.two-column-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* 왼쪽: 카밍 소개 */
.carming-intro {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 50px 40px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 400px;
  justify-content: center;
}

.carming-intro h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.carming-intro p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.95;
}

.carming-intro .btn-inquiry {
  display: inline-block;
  padding: 14px 32px;
  background: white;
  color: #667eea;
  border-radius: 8px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.carming-intro .btn-inquiry:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.95);
}

/* 오른쪽: 후기 리스트 */
.review-scroll-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  overflow: hidden;
  min-height: 400px;
  max-height: 600px;
}

.review-scroll-header {
  padding: 20px 30px;
  background: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
}

.review-scroll-header h3 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 700;
}

.review-scroll-list {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.review-scroll-inner {
  transition: transform 0.5s ease;
}

.review-item {
  padding: 25px 30px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.review-item:hover {
  background-color: #f8f9fa;
}

.review-item:last-child {
  border-bottom: none;
}

.review-image {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0f0;
}

.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-content {
  flex: 1;
  min-width: 0;
}

.review-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.review-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

.review-date {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
  .two-column-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .carming-intro {
    padding: 40px 30px;
    min-height: auto;
  }
  
  .carming-intro h2 {
    font-size: 28px;
  }
  
  .carming-intro p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .two-column-section {
    padding: 40px 15px;
  }
  
  .carming-intro {
    padding: 30px 20px;
  }
  
  .carming-intro h2 {
    font-size: 24px;
  }
  
  .carming-intro p {
    font-size: 15px;
  }
  
  .carming-intro .btn-inquiry {
    padding: 12px 24px;
    font-size: 16px;
  }
  
  .review-scroll-header {
    padding: 15px 20px;
  }
  
  .review-scroll-header h3 {
    font-size: 20px;
  }
  
  .review-scroll-list {
    height: 400px;
  }
  
  .review-item {
    padding: 20px;
    flex-direction: column;
    align-items: center;
  }
  
  .review-image {
    width: 100%;
    height: 200px;
  }

  .review-content {
    text-align: center;
  }
  
  .review-title {
    font-size: 16px;
  }
  
  .review-text {
    font-size: 13px;
  }
}

/* 3컬럼 섹션 (무보증, 초기비용 0원, 맞춤견적) */
.three-column-section {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
}

.three-column-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  background: white;
  padding: 50px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  border-color: #667eea;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.feature-card h3 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.feature-card p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin: 0;
  white-space: pre-line;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .three-column-wrapper {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .feature-card {
    padding: 40px 25px;
  }
  
  .feature-card h3 {
    font-size: 24px;
  }
  
  .feature-card p {
    font-size: 15px;
  }
}

/* 모바일 반응형 */
@media (max-width: 600px) {
  .three-column-section {
    padding: 40px 15px;
  }
  
  .three-column-wrapper {
    gap: 20px;
  }
  
  .feature-card {
    padding: 35px 20px;
  }
  
  .feature-icon {
    width: 70px;
    height: 70px;
    font-size: 35px;
    margin-bottom: 20px;
  }
  
  .feature-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  
  .feature-card p {
    font-size: 14px;
  }
}

/* 무료 견적 CTA 카드 */
.cta-card-section {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.cta-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.cta-card-content {
  position: relative;
  z-index: 1;
}

.cta-card h2 {
  font-size: 36px;
  font-weight: 700;
  color: white;
  margin: 0 0 15px 0;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.cta-card p {
  font-size: 20px;
  color: rgba(255,255,255,0.95);
  margin: 0 0 30px 0;
  line-height: 1.6;
}

.cta-card .btn-cta {
  display: inline-block;
  padding: 16px 40px;
  background: white;
  color: #667eea;
  border-radius: 50px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.cta-card .btn-cta:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.95);
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .cta-card {
    padding: 50px 35px;
  }
  
  .cta-card h2 {
    font-size: 30px;
  }
  
  .cta-card p {
    font-size: 18px;
  }
  
  .cta-card .btn-cta {
    padding: 14px 35px;
    font-size: 17px;
  }
}

/* 모바일 반응형 */
@media (max-width: 600px) {
  .cta-card-section {
    padding: 30px 15px;
  }
  
  .cta-card {
    padding: 40px 25px;
  }
  
  .cta-card h2 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  
  .cta-card p {
    font-size: 16px;
    margin-bottom: 25px;
  }
  
  .cta-card .btn-cta {
    width: 100%;
    max-width: 300px;
    padding: 14px 30px;
    font-size: 16px;
  }
}

/* ==========================================
   즉시출고 카드 디자인 (개선)
   ========================================== */

.immediate-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.immediate-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 이미지 영역 */
.immediate-card-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 비율 */
  overflow: hidden;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
}

.immediate-card-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 110%;
  min-height: 110%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.15);
  transition: transform 0.4s ease;
}

.immediate-card:hover .immediate-card-image {
  transform: translate(-50%, -50%) scale(1.13);
}

/* 이미지 오버레이 */
.immediate-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.immediate-card:hover .immediate-card-overlay {
  opacity: 1;
}

/* 배지 영역 */
.immediate-badge-wrapper {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

.immediate-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.immediate-badge-hot {
  background: rgba(255, 87, 51, 0.95);
  color: #fff;
  animation: pulse 2s ease-in-out infinite;
}

.immediate-badge-stock {
  background: rgba(16, 185, 129, 0.95);
  color: #fff;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 87, 51, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 87, 51, 0.5);
  }
}

/* 카드 콘텐츠 */
.immediate-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.immediate-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
  line-height: 1.4;
  min-height: 50px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 재고 정보 */
.immediate-card-info {
  margin-top: auto;
}

.immediate-stock-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  border: 1px solid #bae6fd;
}

.immediate-icon {
  color: #0284c7;
  flex-shrink: 0;
}

.immediate-stock-text {
  font-size: 14px;
  color: #0c4a6e;
  font-weight: 500;
}

.immediate-stock-text strong {
  font-weight: 700;
  color: #0369a1;
}

/* 버튼 */
.immediate-btn-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin-top: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.immediate-btn-check::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.immediate-btn-check:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.immediate-btn-check:hover::before {
  left: 100%;
}

.immediate-btn-check:active {
  transform: translateY(0);
}

.immediate-btn-text {
  transition: transform 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.immediate-btn-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.immediate-btn-check:hover .immediate-btn-text {
  transform: translateX(-4px);
}

.immediate-btn-check:hover .immediate-btn-icon {
  transform: translateX(4px);
}

/* 반응형 */
@media (max-width: 768px) {
  .immediate-card-title {
    font-size: 16px;
    min-height: 44px;
  }

  .immediate-badge {
    font-size: 11px;
    padding: 5px 10px;
  }

  .immediate-card-content {
    padding: 16px;
  }

  .immediate-btn-check {
    padding: 12px 20px;
    font-size: 14px;
  }

  .immediate-stock-indicator {
    padding: 8px 12px;
  }

  .immediate-stock-text {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .immediate-card-title {
    font-size: 15px;
    min-height: 40px;
  }

  .immediate-badge-wrapper {
    top: 8px;
    left: 8px;
    right: 8px;
  }
}

/* ==========================================
   렌탈/리스 카드 디자인 (개선)
   ========================================== */

.rental-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rental-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 이미지 영역 */
.rental-card-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 비율 */
  overflow: hidden;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
}

.rental-card-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 110%;
  min-height: 110%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.05);
  transition: transform 0.4s ease;
}

.rental-card:hover .rental-card-image {
  transform: translate(-50%, -50%) scale(1.13);
}

/* 이미지 오버레이 */
.rental-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.15) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rental-card:hover .rental-card-overlay {
  opacity: 1;
}

/* 배지 영역 */
.rental-badge-wrapper {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

.rental-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rental-badge-featured {
  background: rgba(251, 191, 36, 0.95);
  color: #fff;
  animation: shimmer 2s ease-in-out infinite;
}

.rental-badge-best {
  background: rgba(16, 185, 129, 0.95);
  color: #fff;
}

@keyframes shimmer {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.6);
  }
}

/* 카드 콘텐츠 */
.rental-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rental-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
  line-height: 1.4;
  min-height: 50px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 가격 정보 */
.rental-card-prices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.rental-price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.rental-price-item:hover {
  background: #f0f2f5;
  transform: translateX(4px);
}

.rental-price-item.highlight {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.rental-price-label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.rental-price-item.highlight .rental-price-label {
  color: #667eea;
  font-weight: 600;
}

.rental-price-value {
  font-size: 16px;
  color: #333;
  font-weight: 700;
}

.rental-price-item.highlight .rental-price-value {
  font-size: 17px;
  color: #764ba2;
}

/* 버튼 */
.rental-btn-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin-top: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.rental-btn-check::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.rental-btn-check:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.rental-btn-check:hover::before {
  left: 100%;
}

.rental-btn-check:active {
  transform: translateY(0);
}

.rental-btn-text {
  transition: transform 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rental-btn-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.rental-btn-check:hover .rental-btn-text {
  transform: translateX(-4px);
}

.rental-btn-check:hover .rental-btn-icon {
  transform: translateX(4px);
}

/* 반응형 */
@media (max-width: 768px) {
  .rental-card-title {
    font-size: 16px;
    min-height: 44px;
  }

  .rental-badge {
    font-size: 11px;
    padding: 5px 10px;
  }

  .rental-card-content {
    padding: 16px;
  }

  .rental-btn-check {
    padding: 12px 20px;
    font-size: 14px;
  }

  .rental-price-item {
    padding: 8px 12px;
  }

  .rental-price-label {
    font-size: 12px;
  }

  .rental-price-value {
    font-size: 15px;
  }

  .rental-price-item.highlight .rental-price-value {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .rental-card-title {
    font-size: 15px;
    min-height: 40px;
  }

  .rental-badge-wrapper {
    top: 8px;
    left: 8px;
    right: 8px;
  }

  .rental-card-prices {
    gap: 8px;
  }

  .rental-price-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ===== Privacy Content Styles ===== */
.privacy-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.privacy-content h2 {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 700;
  margin: 32px 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #667eea;
  position: relative;
  transition: all 0.3s ease;
}

.privacy-content h2:first-of-type {
  margin-top: 0;
}

.privacy-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
}



.privacy-content p {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
  margin: 12px 0;
  padding-left: 8px;
}

.privacy-content p strong {
  color: #2c3e50;
  font-weight: 600;
}

.privacy-content a {
  color: #667eea;
  text-decoration: none;
  transition: color 0.3s ease;
}


.privacy-content ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px 0;
}


/* 특별한 정보 박스 (연락처 등) - 제거됨 */

/* 반응형 디자인 */
@media (max-width: 768px) {
  .privacy-content {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .privacy-content h2 {
    font-size: 20px;
    margin: 24px 0 12px 0;
  }

  .privacy-content h3 {
    font-size: 16px;
    margin: 16px 0 10px 0;
  }

  .privacy-content p {
    font-size: 15px;
    line-height: 1.7;
  }

  .privacy-content ul li {
    font-size: 15px;
    padding: 12px 16px 12px 44px;
  }

  .privacy-content ul li::before {
    left: 14px;
    font-size: 18px;
  }

  .privacy-content ul li:hover {
    transform: translateX(4px);
  }
}

@media (max-width: 480px) {
  .privacy-content {
    padding: 20px 16px;
  }

  .privacy-content h2 {
    font-size: 18px;
  }

  .privacy-content h3 {
    font-size: 15px;
  }

  .privacy-content p,
  .privacy-content ul li {
    font-size: 14px;
  }
}