/* =========================
RESET & 기본 설정
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  
  img{
  max-width:100%;
  height:auto;
  display:block;
  }
  
  body{
  font-family:'Noto Sans KR',sans-serif;
  line-height:1.6;
  color:#000;
  background:#fff;
  }
  
  a{
  text-decoration:none;
  color:inherit;
  }
  
  /* =========================
  HEADER
  ========================= */
  .site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  z-index:20;
  border-bottom:1px solid #e0e0e0;
  }
  
  .header-inner{
  max-width:1200px;
  margin:auto;
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  }
  
  .logo{
  width:auto;
  height:80px;
  display:flex;
  align-items:center;
  }
  
  .logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  }
  
  .main-nav{
  display:flex;
  gap:20px;
  }
  
  .main-nav a{
  font-weight:600;
  }
  
  /* =========================
  MOBILE MENU
  ========================= */
  
  .mobile-menu{
  display:none;
  position:relative;
  }
  
  .menu-toggle{
  font-size:2rem;
  cursor:pointer;
  }
  
  .mobile-menu-list{
  display:none;
  flex-direction:column;
  position:fixed;
  top:80px;
  left:0;
  right:0;
  background:#fff;
  z-index:9999;
  max-height:70vh;
  overflow-y:auto;
  border-top:1px solid #eee;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  }
  
  .mobile-menu-list a{
  padding:14px 20px;
  font-weight:600;
  border-bottom:1px solid #eee;
  }
  
  /* =========================
  HERO
  ========================= */
  
  .hero{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding-top:80px;
  }
  
  .hero video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  }
  
  .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:2;
  }
  
  .hero-content{
  position:relative;
  z-index:3;
  text-align:center;
  color:#fff;
  padding:0 20px;
  }
  
  .hero-content h1{
  font-size:48px;
  margin-bottom:20px;
  }
  
  .hero-content p{
  font-size:20px;
  margin-bottom:30px;
  }
  
  .btn{
  background:linear-gradient(135deg,#4a90e2,#9b59b6);
  color:#fff;
  border:none;
  padding:15px 40px;
  border-radius:5px;
  cursor:pointer;
  }
  
  /* =========================
  SECTION
  ========================= */
  
  .section{
  padding:10px 10px;
  max-width:1200px;
  margin:auto;
  }
  
  h2{
  font-size:36px;
  margin-bottom:40px;
  text-align:center;
  }
  
  /* =========================
  SWIPER
  ========================= */
  
  .swiper-container{
  width:100%;
  height:500px;
  overflow:hidden;
  border-radius:12px;
  }
  
  .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  }
  
  .swiper-button-next,
  .swiper-button-prev{
  color:#fff;
  background:rgba(0,0,0,0.3);
  border-radius:50%;
  width:40px;
  height:40px;
  }
  
  /* =========================
  PAGE LAYOUT
  ========================= */
  
  .page-layout{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:40px;
  align-items:flex-start;
  padding:80px 20px;
  }
  
  .main-content{
  flex:1;
  min-width:0;
  }
  
  .booking-sidebar{
  width:380px;
  flex-shrink:0;
  }




/* =========================
오시는 길 지도
========================= */
#contact {
  margin-top:30px;
}

#contact .section-title {
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}

#contact .card {
  background:#f9fafb;
  border-radius:8px;
  padding:16px;
  margin-bottom:16px;
  font-size:14px;
  color:#374151;
}

#contact .card ul {
  list-style:none;
  padding-left:0;
}

#contact .card ul li {
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}

#contact .map-wrap iframe {
  width:100%;
  border-radius:8px;
  border:0;
  height:300px;
}

  
  /* =========================
  BOOKING CARD
  ========================= */
  
  .booking-card{
  position:sticky;
  top:120px;
  background:#fff;
  border:1px solid #ddd;
  padding:20px;
  border-radius:8px;
  }
  
  .booking-title{
  text-align:center;
  font-weight:700;
  margin-bottom:5px;
  }
  
  .booking-sub{
  text-align:center;
  font-size:13px;
  color:#6a5cff;
  margin-bottom:20px;
  }
  
  /* =========================
  PRODUCT
  ========================= */
  
  .booking-product{   
    padding:12px;   
    margin-bottom:15px;
  }
  
  .product-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  }
  
  .product-name{
  font-weight:600;
  }
  
  .product-price{
  color:#6a5cff;
  font-size:20px;
  font-weight:700;
  }
  
  .product-price small{
  font-size:12px;
  color:#777;
  }
  
  /* =========================
  RULES
  ========================= */
  
  .booking-rules{
  font-size:13px;
  margin:10px 0;
  padding-left:18px;
  }
  
  .booking-rules li{
  margin-bottom:6px;
  }
  
  /* =========================
  SPACE INFO
  ========================= */
  
  .booking-meta{
  margin-top:15px;
  border-top:1px solid #eee;
  padding-top:10px;
  }
  
  .info-row{
  display:flex;
  margin-bottom:10px;
  font-size:13px;
  }
  
  .info-row span{
  width:80px;
  color:#777;
  }
  
  .size-btn{
  border:1px solid #ccc;
  background:#fff;
  padding:2px 6px;
  margin-left:5px;
  }
  
  /* =========================
  FACILITY GRID
  ========================= */
  
  .facility-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:15px;
  }
  
  .facility{
  font-size:12px;
  text-align:center;
  border:1px solid #eee;
  padding:8px;
  border-radius:6px;
  background:#fafafa;
  }
  
  /* =========================
  RESERVE
  ========================= */
  
  .reserve-title{
  margin-top:20px;
  margin-bottom:10px;
  font-weight:700;
  }
  
  .reserve-option{
  margin-bottom:20px;
  font-size:14px;
  }
  
  /* =========================
  FOOTER BUTTONS
  ========================= */  
  .booking-footer{
    display:flex;
    border-top:1px solid #eee;
    margin-top:20px;
  }

  .booking-footer a {
    display: flex;           /* 버튼 안 내용을 flex로 */
    align-items: center;     /* 세로 가운데 정렬 */
    justify-content: center; /* 텍스트 가운데 정렬 */
    gap:6px;                 /* 아이콘과 텍스트 사이 간격 */
    text-decoration: none;
  }
  
  .call-btn,
  .chat-btn{
  flex:1;
  border:none;
  padding:14px;
  cursor:pointer;
  }

  .call-btn{
    background: linear-gradient(135deg, #7099f3, #1D4ED8); /* 세련된 블루 그라데이션 */
    color:#fff;
    font-weight:700;
  }

  .chat-btn{
    background: linear-gradient(135deg, #f8ec7d, #f6cd18); /* 카톡 느낌의 옐로우 그라데이션 */
    color:#000;
    font-weight:700;
  }

  .reserve-btn{
    flex:2;
    background: linear-gradient(135deg, #b991fd, #6D28D9); /* 고급스러운 퍼플 그라데이션 */
    color:#fff;
    font-weight:700;
  }

  .call-btn:hover,
  .chat-btn:hover,
  .reserve-btn:hover{
    opacity:0.9; /* 살짝 투명하게 호버 효과 */
  }
  
  /* =========================
  FOOTER
  ========================= */
  
  .site-footer{
  background:#111;
  color:#ccc;
  text-align:center;
  padding:40px 20px;
  font-size:14px;
  }
  
  /* =========================
  TABS
  ========================= */
  
  .tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  border-bottom:1px solid #ddd;
  flex-wrap:wrap;
  }
  
  .tab-btn{
  padding:10px 16px;
  background:#f5f5f5;
  border:1px solid #ddd;
  border-bottom:none;
  cursor:pointer;
  font-size:14px;
  border-radius:6px 6px 0 0;
  }
  
  .tab-btn.active{
  background:#fff;
  font-weight:600;
  border-bottom:2px solid #6c5ce7;
  }
  
  .tab-content{
  display:none;
  padding:20px;
  background:#fff;
  border:1px solid #ddd;
  }

  .info_list {
    list-style:none;
    counter-reset:facility;
    padding-left:0;
  }
  
  .info_list li {
    display:flex;
    align-items:flex-start;
    margin-bottom:8px;
    font-size:14px;
    line-height:1.4;
  }
  
  .info_list li strong {
    counter-increment:facility;
    display:inline-block;
    width:24px;
    height:24px;
    background:#6D28D9;
    color:#fff;
    font-weight:700;
    text-align:center;
    border-radius:50%;
    margin-right:10px;
    flex-shrink:0;
    line-height:24px;
  }

  .refund_list {
  list-style:none;
  padding-left:0;
  margin:0;
}

.refund_list li {
  display:flex;
  align-items:flex-start;
  margin-bottom:8px;
  font-size:14px;
  line-height:1.4;
}

.refund_list li strong {
  display:inline-block;
  width:90px;
  color:#555;
  font-weight:500;
  margin-right:10px;
  flex-shrink:0;
}
  
  .tab-content.active{
  display:block;
  }
  
  /* =========================
  RESERVATION
  ========================= */
  
  .income{
  padding:100px 20px;
  background:#f8f9fb;
  text-align:center;
  }
  
  .income h2{
  font-size:32px;
  font-weight:700;
  margin-bottom:10px;
  }
  
  .income .highlight{
  color:#6c5ce7;
  font-size:18px;
  margin-bottom:40px;
  }
  
  .apply{
  max-width:500px;
  margin:0 auto;
  background:#fff;
  padding:40px;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  }
  
  .apply form{
  display:flex;
  flex-direction:column;
  gap:16px;
  }
  
  .apply input,
  .apply textarea{
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:14px;
  }
  
  .apply textarea{
  min-height:140px;
  resize:vertical;
  }
  
  .apply button{
  background:#6c5ce7;
  color:#fff;
  border:none;
  padding:16px;
  font-size:16px;
  font-weight:600;
  border-radius:6px;
  cursor:pointer;
  }
  
  /* =========================
  TABLET
  ========================= */
  
  @media (max-width:1024px){
  
  .page-layout{
  flex-direction:column;
  gap:30px;
  padding:40px 15px;
  }
  
  .booking-sidebar{
  width:100%;
  }
  
  .booking-card{
  position:relative;
  top:auto;
  }
  
  }
  
  .about-gallery{
    position:relative;
    }
    
  .about-gallery .swiper-button-next,
  .about-gallery .swiper-button-prev{
  top:50%;
  transform:translateY(-50%);
  }
  
  .about-gallery .swiper-pagination{
  bottom:10px !important;
  }

  /* ABOUT TEXT */
.about-text p {
  margin-bottom:10px;      /* 기본 10px 간격으로 줄임 */
  line-height:1.4;         /* 줄간격 조금 줄임 */
  font-size:15px;           /* 읽기 편하게 약간 키움 */
  color:#333;
}

.about-text ul.concept-list {
  padding-left:20px;
  margin-bottom:10px;
  list-style:disc;
}

.about-text ul.concept-list li {
  margin-bottom:6px;       /* 항목 간격 좁힘 */
  line-height:1.4;
  font-size:14px;
}


  /* =========================
  MOBILE
  ========================= */
  
  @media (max-width:768px){
    .page-layout {
      max-width: 100% !important; /* 1200px 제한 제거 */
      width: 100% !important;     /* 화면 폭 가득 */
      margin: 0 !important;       /* 중앙 마진 제거 */
      padding: 10px 5px !important; /* 원하는 패딩 */
      gap: 20px !important;       /* 요소 간 간격 조정 */
      flex-direction: column !important; /* 모바일에서는 세로 정렬 */
    }
  
    .section {
      width: 100% !important;      /* 100% 폭 */
      max-width: 100% !important;  /* 최대 제한 제거 */
      margin: 0 !important;        /* 중앙 마진 제거 */
      padding: 10px 5px !important;
    }
    .main-content {
      width: 100%;       /* 화면폭에 맞춤 */
      max-width: 100%;   /* 1200px 제한 해제 */
    }


  .main-nav{
  display:none;
  }
  
  .mobile-menu{
  display:block;
  }
  
  .hero{
  height:70vh;
  }
  
  .hero-content h1{
  font-size:32px;
  }
  
  .hero-content p{
  font-size:16px;
  }
  
  .swiper-container{
  height:220px;
  }
  
  .facility-grid{
  grid-template-columns:repeat(2,1fr);
  }
  
  .booking-footer{
    flex-wrap:wrap;
  }
  
  .call-btn,
  .chat-btn{
    flex:1 1 calc(50% - 4px); /* 좌우 버튼은 반씩 */
  }
  
  .reserve-btn{
    flex:1 1 100%;
    font-size:16px; /* 버튼 글씨도 키우면 가독성 좋음 */
    padding:14px;   /* 높이 조정 */
  }
  
  }