/* 배너 스타일 추가 CSS */

/* 붐붐마사지 배너 */
.massage-banner {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.massage-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="50" height="50" fill="rgba(255,255,255,0.1)"/><rect x="50" y="50" width="50" height="50" fill="rgba(255,255,255,0.1)"/></svg>');
  opacity: 0.3;
}

.massage-banner .banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  width: 100%;
}

.massage-banner .banner-subtext {
  font-size: 1.2rem;
  margin-top: 10px;
  opacity: 0.9;
}

/* 아파트 배너 */
.apartment-banner {
  background: linear-gradient(135deg, #396afc, #2948ff);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.apartment-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" stroke="rgba(255,255,255,0.2)" stroke-width="2" fill="none"/></svg>');
  opacity: 0.2;
}

/* 풀빌라 배너 */
.villa-banner {
  background: linear-gradient(135deg, #11998e, #38ef7d);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.villa-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="rgba(255,255,255,0.2)" stroke-width="2" fill="none"/></svg>');
  opacity: 0.2;
}

/* 에코걸 배너 */
.escort-banner {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.escort-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,10 L70,10 L90,50 L70,90 L30,90 L10,50 Z" stroke="rgba(255,255,255,0.2)" stroke-width="2" fill="none"/></svg>');
  opacity: 0.2;
}

/* 렌트카 배너 */
.rentcar-banner {
  background: linear-gradient(135deg, #000046, #1CB5E0);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.rentcar-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><line x1="0" y1="0" x2="100" y2="100" stroke="rgba(255,255,255,0.2)" stroke-width="2"/><line x1="0" y1="100" x2="100" y2="0" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>');
  opacity: 0.2;
}

/* 이발소 배너 */
.barbershop-banner {
  background: linear-gradient(135deg, #6D597A, #B56576);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.barbershop-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="20" y="20" width="20" height="20" fill="rgba(255,255,255,0.1)"/><rect x="60" y="20" width="20" height="20" fill="rgba(255,255,255,0.1)"/><rect x="20" y="60" width="20" height="20" fill="rgba(255,255,255,0.1)"/><rect x="60" y="60" width="20" height="20" fill="rgba(255,255,255,0.1)"/></svg>');
  opacity: 0.2;
}

/* 골프장 배너 */
.golf-banner {
  background: linear-gradient(135deg, #134E5E, #71B280);
  position: relative;
  overflow: hidden;
  height: 350px;
}

.golf-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="10" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="20" r="10" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="80" r="10" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="10" fill="rgba(255,255,255,0.1)"/></svg>');
  opacity: 0.2;
}