/* ==========================================================================
   하루 Pension - 공통 스타일
   ========================================================================== */
:root{
  --max:1200px;
  --dark:#1b1b1b;
  --footer-bg:#2b2b2b;
  --accent-red:#e6394a;
  --tab-green:#2f6b45;
  --tab-blue:#1f5c73;
  --btn-brown:#6b5e52;
  --border:#e6e6e6;
  --font:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);color:#222;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
#site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  background:transparent;
}
#site-header .header-inner{
  max-width:var(--max);margin:0 auto;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand img{height:40px;}
#site-header nav{display:flex;gap:38px;}
#site-header nav a{
  font-size:14px;font-weight:700;letter-spacing:.3px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
#site-header nav a:hover{color:var(--accent-red);}

/* ---------- Hero ---------- */
.hero{
  position:relative;height:520px;overflow:hidden;
  display:flex;align-items:center;
  background:#000;
}
.hero img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}
.hero-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 24px;width:100%;}
.hero h1{color:#fff;font-size:38px;font-weight:800;line-height:1.35;text-shadow:0 2px 10px rgba(0,0,0,.4);}
.hero .en{color:rgba(255,255,255,.9);font-size:15px;margin-top:14px;font-weight:400;}

/* small hero variant for sub pages */
.hero.small{height:420px;}
.hero.small h1{font-size:32px;}

/* ---------- Page title block ---------- */
.page-title{text-align:center;padding:56px 0 20px;}
.page-title h2{font-size:26px;font-weight:800;}
.page-title .crumb{font-size:13px;color:#999;margin-top:12px;}
.page-title .crumb .cur{color:#333;font-weight:600;}

/* ---------- Tabs ---------- */
.tabbar{display:flex;justify-content:center;gap:0;max-width:700px;margin:26px auto 50px;border:1px solid var(--border);}
.tabbar a{flex:1;text-align:center;padding:14px 10px;font-size:14px;font-weight:600;color:#555;border-left:1px solid var(--border);}
.tabbar a:first-child{border-left:none;}
.tabbar a.active{background:var(--tab-green);color:#fff;}
.tabbar.blue a.active{background:var(--tab-blue);}

/* ---------- Quote block (about intro) ---------- */
.quote-block{max-width:640px;margin:0 auto 60px;text-align:center;}
.quote-block .mark{font-size:34px;color:#ccc;margin-bottom:14px;}
.quote-block p{font-size:16px;line-height:2;color:#333;margin-bottom:18px;}
.quote-block p.small{font-size:14px;color:#555;}
.quote-block b{color:#000;}

.two-col-img{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1050px;margin:0 auto 70px;}
.two-col-img img{width:100%;height:340px;object-fit:cover;}

/* ---------- Exterior big + gallery ---------- */
.big-photo{max-width:900px;margin:0 auto 40px;}
.big-photo img{width:100%;height:520px;object-fit:cover;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:var(--max);margin:0 auto 70px;}
.gallery-grid img{width:100%;height:230px;object-fit:cover;}

/* ---------- Location page ---------- */
.location-imgs{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1050px;margin:0 auto 40px;align-items:center;}
.location-imgs img{width:100%;}
.location-imgs .sign{display:flex;align-items:center;justify-content:center;background:#fff;padding:20px;}
.map-wrap{max-width:1050px;margin:0 auto 50px;}
.map-wrap iframe{width:100%;height:420px;border:1px solid var(--border);}
.res-cta{text-align:center;padding:20px 0 80px;}
.res-cta h3{font-size:16px;color:#666;margin-bottom:18px;font-weight:600;}
.res-cta .phone{font-size:34px;font-weight:900;margin-bottom:16px;}
.res-cta .note{font-size:17px;font-weight:700;color:#333;}

/* ---------- Rooms list (main ROOMS page) ---------- */
.rooms-block{max-width:var(--max);margin:0 auto 80px;}
.room-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:70px;}
.room-row.reverse .room-photo{order:2;}
.room-row.reverse .room-text{order:1;}
.room-text h3{font-size:26px;font-weight:800;margin-bottom:18px;}
.room-text p{font-size:14px;color:#555;margin-bottom:6px;}
.room-photo img{width:100%;height:360px;object-fit:cover;}
.btn-book{display:inline-block;margin-top:20px;background:var(--btn-brown);color:#fff;padding:12px 26px;font-size:13.5px;font-weight:700;}

/* ---------- Room detail gallery ---------- */
.room-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto 80px;}
.room-gallery img{width:100%;height:280px;object-fit:cover;}

/* ---------- Facilities grid ---------- */
.fac-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto 80px;}
.fac-grid figure{margin:0;}
.fac-grid img{width:100%;height:320px;object-fit:cover;margin-bottom:14px;}
.fac-grid figcaption{text-align:center;font-size:14px;color:#333;font-weight:600;}

/* ---------- Travel cards ---------- */
.travel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--max);margin:0 auto 80px;}
.travel-grid figure{margin:0;background:#faf7f2;padding:14px;border:1px solid #eee;}
.travel-grid img{width:100%;height:220px;object-fit:cover;margin-bottom:14px;}
.travel-grid h4{font-size:20px;font-weight:800;margin-bottom:6px;}
.travel-grid .meta{font-size:12.5px;color:#b07a2c;font-weight:700;margin-bottom:8px;}
.travel-grid p{font-size:12.5px;color:#666;line-height:1.7;}

/* ---------- Reservation guide ---------- */
.res-guide-btn{text-align:center;margin-bottom:60px;}
.res-guide-btn a{display:inline-block;background:var(--tab-green);color:#fff;padding:16px 40px;font-weight:700;font-size:15px;}
.res-mock{max-width:1050px;margin:0 auto 80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.res-mock img{width:100%;border:1px solid var(--border);}

/* ---------- Footer ---------- */
#site-footer{background:var(--footer-bg);color:rgba(255,255,255,.6);padding:56px 0 30px;}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;}
.footer-logo img{height:44px;margin-bottom:16px;}
.footer-info p{font-size:13px;line-height:2;color:rgba(255,255,255,.65);}
.footer-nav{display:flex;gap:28px;margin-bottom:16px;}
.footer-nav a{font-size:13px;color:rgba(255,255,255,.75);font-weight:600;}
.footer-nav a:hover{color:var(--accent-red);}
.footer-phone{font-size:24px;font-weight:900;color:#fff;}
.footer-copy{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.35);display:flex;justify-content:space-between;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  #site-header nav{display:none;}
  .hero h1{font-size:26px;}
  .two-col-img,.location-imgs,.room-row,.res-mock,.fac-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .room-gallery{grid-template-columns:1fr;}
  .travel-grid{grid-template-columns:1fr;}
  .tabbar{flex-wrap:wrap;}
}