:root {
  --primary: #ff385c;
  --dark: #222;
  --gray: #717171;
}

*{
  box-sizing:border-box;
  font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}

body{
  margin:0;
  background:#fff;
  color:var(--dark);
}

/* ========== DARK MODE ========== */
body.dark{
  background:#121212;
  color:#eee;
}

body.dark footer{
  background:#1e1e1e;
}

body.dark .price{
  color:#ff6b81;
}

body.dark .book-btn{
  background:#ff385c;
}

body.dark .book-btn:hover{
  background:#ff5277;
}

body.dark .footer-link{
  background:#2a2a2a;
  color:#ccc;
}

body.dark .footer-link:hover{
  background:#3a3a3a;
  color:#fff;
}

/* ========== HERO ========== */
.hero{
  height:90vh;
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
  url('https://images.unsplash.com/photo-1505691723518-36a5ac3b2f36?auto=format&fit=crop&w=1600&q=80');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.hero h1{
  font-size:3rem;
  margin-bottom:10px;
}

.hero p{
  font-size:1.2rem;
  margin-bottom:30px;
}

.hero button{
  background:var(--primary);
  border:none;
  padding:14px 28px;
  font-size:1rem;
  color:#fff;
  border-radius:30px;
  cursor:pointer;
}


/* ========== 가능한 숙소 검색 ========== */
/* 검색영역 */
.search-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin:30px 0;
    padding:0 10px;
    box-sizing:border-box;
}

/* 검색바 */
.search-bar{
    width:100%;
    max-width:850px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:50px;
    padding:15px 20px;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
    flex-wrap:wrap;
    box-sizing:border-box;
}

/* 아이템 */
.search-item{
    display:flex;
    flex-direction:column;
    min-width:170px;
}

/* 제목 */
.search-item .label{
    font-size:12px;
    font-weight:bold;
    color:#555;
    margin-bottom:4px;
}

/* input */
.search-item input[type=date]{
    border:none;
    outline:none;
    background:none;
    font-size:15px;
    width:100%;
}

/* 검색버튼 */
.search-btn{
    border:none;
    background:#ff385c;
    color:#fff;
    border-radius:30px;
    padding:12px 22px;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    transition:0.2s;
}

.search-btn:hover{
    background:#e61e4d;
}

/* 초기화 버튼 */
.reset-btn{
    border:none;
    background:#f1f1f1;
    color:#444;
    border-radius:20px;
    padding:10px 14px;
    cursor:pointer;
    font-size:12px;
    transition:0.2s;
}

.reset-btn:hover{
    background:#ddd;
}


/* ========== SECTION ========== */
.section{
  padding:0 5% 80px;
}

.section h2{
  font-size:2.2rem;
  margin-bottom:40px;
  position:relative;
  display:inline-block;
}

.section h2::after{
  content:"";
  display:block;
  width:60%;
  height:4px;
  background:var(--primary);
  margin-top:10px;
  border-radius:2px;
}

/* ========== ROOM CARD ========== */
/* ROOMS GRID */
.rooms{
  display:grid;

  /* 핵심 */
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

  gap:30px;
}

.room{
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s,box-shadow .3s;
  background:#fff;
}

.room:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.room img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.room .info{
  padding:15px;
}

.room h3{
  margin:0 0 6px;
}

.room span{
  color:var(--gray);
}

/* ========== 가격 ========== */
.price{
  display:block;
  margin-top:8px;
  font-size:1.1rem;
  font-weight:600;
  color:var(--primary);
}

.origin-price{
	margin-left:8px;
    text-decoration: line-through;
    color:#999;
}

.sale-price{
	margin-left:8px;
    color:#ff5a5f;
    font-weight:bold;
    font-size:20px;
}

.discount-rate{
    background:#FDE4C4;   /* 할인율 백 컬러 */
    color:white;
    font-size:12px;
    padding:2px 6px;
    border-radius:6px;
}

/* ========== 예약 버튼 ========== */
.book-btn{
  display:inline-block;
  margin-top:12px;
  padding:8px 16px;
  border-radius:25px;
  background:var(--primary);
  color:#fff;
  font-size:0.9rem;
  text-decoration:none;
  transition:all .3s ease;
}

.book-btn:hover{
  background:#e61e4d;
  transform:translateY(-2px);
}

/* ========== FOOTER ========== */
footer{
  background:#f7f7f7;
  padding:30px;
  text-align:center;
  color:var(--gray);
}

.footer-link{
  display:inline-block;
  margin-top:15px;
  padding:8px 16px;
  border-radius:20px;
  background:#e9ecef;
  color:#444;
  text-decoration:none;
  font-size:0.9rem;
  transition:all .3s ease;
}

.footer-link:hover{
  background:#d6d8db;
  color:#000;
}


/* ============================= */
/* 모바일 반응형 */
/* ============================= */
@media (max-width:480px){  /*1024 하면 숙소그림 한줄에 길게만 나온다. */
    .hero{
      height:60vh;
    }
    
    .hero h1{
      font-size:1.6rem;
    }
    
    .hero p{
      font-size:0.9rem;
    }
    
    .rooms{
      /* 모바일 1열 */
      grid-template-columns:1fr;
    
      gap:20px;
    }
    
    .room img{
      height:220px;
    }
    
    .book-btn{
      width:100%;
      text-align:center;
    }
    
    /* 가능한 숙소 검색 */
    .search-bar{
        border-radius:25px;
        padding:20px 15px;
        gap:12px;
    }

    .search-item{
        width:100%;
        min-width:auto;
    }

    .search-btn-wrap,
    .reset-btn-wrap{
        width:100%;
    }

    .search-btn,
    .reset-btn{
        width:100%;
    }
}