/*
Theme Name: Luga Haksa
Theme URI: https://lugahaksa26.mycafe24.com/
Author: Luga Haksa
Description: 대치동 프리미엄 여학생 기숙사 "루가학사" 원페이지 랜딩 테마. 외모 > 사용자 정의 하기 화면에서 모든 텍스트와 사진을 교체할 수 있습니다.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: luga-haksa
*/

/* ==========================================================================
   0. Reset & Variables
   ========================================================================== */
:root{
  --navy: #191A1F;
  --navy-2: #141617;
  --teal: #00C8B3;
  --teal-dark: #00A896;
  --bg-light: #F5F6F9;
  --white: #FFFFFF;
  --border: #E5E5E5;
  --text-body: #53565C;
  --text-heading: #141617;
  --radius: 14px;
  --container: 1312px;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-padding-top: 96px; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text-body);
  background: var(--white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 96px 0; }
.section--tight{ padding: 72px 0; }
.bg-light{ background: var(--bg-light); }
.bg-dark{ background: var(--navy); color: rgba(255,255,255,.75); }
.bg-dark-2{ background: var(--navy-2); color: rgba(255,255,255,.75); }
.bg-dark h2, .bg-dark h3, .bg-dark-2 h2, .bg-dark-2 h3{ color:#fff; }

.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color: var(--teal);
  margin-bottom:16px;
}
.section-heading{
  font-size:34px;
  font-weight:800;
  color: var(--text-heading);
  line-height:1.35;
  letter-spacing:-.01em;
}
.section-sub{
  margin-top:14px;
  font-size:16px;
  color: var(--text-body);
}
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  border:1px solid transparent;
  transition: all .18s ease;
  white-space:nowrap;
}
.btn--teal{ background: var(--teal); color:#fff; }
.btn--teal:hover{ background: var(--teal-dark); }
.btn--navy{ background: var(--navy); color:#fff; }
.btn--navy:hover{ background:#000; }
.btn--outline{ background:transparent; border-color: rgba(255,255,255,.35); color:#fff; }
.btn--outline:hover{ border-color:#fff; }
.btn--outline-dark{ background:transparent; border-color: var(--border); color: var(--text-heading); }

/* ==========================================================================
   1. Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.site-branding{ display:flex; align-items:center; gap:10px; }
.site-branding img{ height:42px; width:auto; }
.main-navigation{ display:flex; align-items:center; gap:8px; }
.main-navigation ul{ display:flex; gap:36px; }
.main-navigation a{ font-size:15px; font-weight:600; color:#33343a; }
.main-navigation a:hover{ color: var(--teal); }
.header-cta{ display:flex; align-items:center; gap:16px; }
.menu-toggle{ display:none; background:none; border:0; padding:8px; }
.menu-toggle span{ display:block; width:24px; height:2px; background:#141617; margin:5px 0; }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero{
  position:relative;
  background-color: var(--navy);
  background-size:cover;
  background-position:center;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(25,26,31,.92) 0%, rgba(25,26,31,.72) 45%, rgba(25,26,31,.45) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  padding-top:120px;
}
.hero h1{
  font-size:48px;
  font-weight:800;
  line-height:1.3;
  max-width:820px;
  letter-spacing:-.01em;
}
.hero .hero-sub{
  margin-top:20px;
  font-size:22px;
  font-weight:700;
  color: var(--teal);
}
.hero .hero-desc{
  margin-top:20px;
  font-size:16px;
  line-height:1.7;
  max-width:640px;
  color: rgba(255,255,255,.82);
}
.hero-badges{
  margin-top:36px;
  display:flex; flex-wrap:wrap; gap:12px;
  max-width:820px;
}
.hero-badges li{
  padding:10px 20px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  font-size:14px; font-weight:600;
}
.hero-cta-bar{
  position:relative; z-index:1;
  margin-top:64px;
  display:grid; grid-template-columns:1fr 1fr;
}
.hero-cta-bar a{
  display:flex; align-items:center; justify-content:center;
  height:88px;
  font-size:18px; font-weight:700; color:#fff;
}
.hero-cta-bar a.cta-teal{ background: var(--teal); }
.hero-cta-bar a.cta-teal:hover{ background: var(--teal-dark); }
.hero-cta-bar a.cta-dark{ background: var(--navy-2); }
.hero-cta-bar a.cta-dark:hover{ background:#000; }

/* ==========================================================================
   3. Stats (Trust)
   ========================================================================== */
.stats{ text-align:center; }
.stats-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.stat-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:32px 12px;
}
.stat-card .num{ font-size:32px; font-weight:800; color: var(--teal); }
.stat-card .label{ margin-top:8px; font-size:14px; font-weight:600; color: var(--text-body); }

/* ==========================================================================
   4. Why choose (O1~O4)
   ========================================================================== */
.why-grid{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.why-card{
  display:flex; gap:20px;
  padding:32px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
}
.why-card .tag{
  flex:none;
  width:48px; height:48px;
  border-radius:50%;
  border:2px solid var(--teal);
  color: var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}
.why-card h3{ font-size:18px; font-weight:700; color: var(--text-heading); }
.why-card p{ margin-top:8px; font-size:14px; color: var(--text-body); }

/* ==========================================================================
   5. Special space
   ========================================================================== */
.special-grid{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.special-card{
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
}
.special-card .thumb{
  height:140px;
  background: linear-gradient(135deg,#e9ebf0,#dde0e6);
}
.special-card .body{ padding:20px; }
.special-card h3{ font-size:15px; font-weight:700; color: var(--text-heading); }

/* ==========================================================================
   6. Plans (dark)
   ========================================================================== */
.plans-grid{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.plan-card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding:32px;
}
.plan-card h3{ font-size:19px; font-weight:700; color:#fff; }
.plan-card ul{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.plan-card li{ font-size:14px; padding-left:20px; position:relative; }
.plan-card li::before{
  content:"";
  position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:50%;
  background: var(--teal);
}

/* ==========================================================================
   7. Rooms
   ========================================================================== */
.rooms-grid{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.room-card{
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
}
.room-card .thumb{ height:180px; background-size:cover; background-position:center; }
.room-card .body{ padding:18px 20px 22px; }
.room-card h3{ font-size:16px; font-weight:700; color: var(--text-heading); }
.room-card p{ margin-top:6px; font-size:13px; color: var(--text-body); }

/* ==========================================================================
   8/10. Icon grids (satisfaction / study)
   ========================================================================== */
.icon-grid{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.icon-card{ text-align:center; padding:28px 14px; }
.icon-card .ico{
  width:56px; height:56px; margin:0 auto 16px;
  border-radius:50%;
  background: rgba(0,200,179,.1);
  color: var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800;
}
.icon-card h3{ font-size:15px; font-weight:700; color: var(--text-heading); }
.icon-card p{ margin-top:6px; font-size:13px; color: var(--text-body); }
.study-note{
  margin-top:32px; text-align:center;
  font-size:14px; color: var(--text-body);
}

/* ==========================================================================
   9. Food strip
   ========================================================================== */
.food-strip{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.food-strip .thumb{
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background-size:cover; background-position:center;
}

/* ==========================================================================
   11. Testimonials
   ========================================================================== */
.testi-actions{ display:flex; gap:16px; justify-content:center; margin-top:24px; }
.testi-grid{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.testi-card{
  background:#fff; border:1px solid var(--border);
  border-radius: var(--radius);
  padding:28px;
}
.testi-card .stars{ color:#F5B301; font-size:14px; letter-spacing:2px; }
.testi-card p{ margin-top:14px; font-size:14px; line-height:1.7; color: var(--text-body); }
.testi-card .who{ margin-top:18px; font-size:13px; font-weight:700; color: var(--text-heading); }

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq-list{ margin-top:40px; max-width:840px; margin-left:auto; margin-right:auto; }
.faq-item{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; margin-bottom:12px; overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer;
  padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color: var(--text-heading);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:20px; color: var(--teal); font-weight:400; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-a{ padding:0 24px 22px; font-size:14px; color: var(--text-body); }

/* ==========================================================================
   13. CTA bar
   ========================================================================== */
.cta-bar{ text-align:center; }
.cta-bar h2{ font-size:26px; font-weight:800; color: var(--text-heading); max-width:640px; margin:0 auto; }
.cta-bar .btn{ margin-top:28px; }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer{ padding:72px 0 32px; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid .brand img{ height:36px; filter:brightness(0) invert(1); opacity:.9; }
.footer-grid h4{ font-size:14px; font-weight:700; color:#fff; margin-bottom:16px; }
.footer-grid li{ font-size:13px; margin-bottom:10px; color: rgba(255,255,255,.6); }
.footer-bottom{
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color: rgba(255,255,255,.45);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .stats-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid, .special-grid, .rooms-grid, .food-strip{ grid-template-columns:repeat(2,1fr); }
  .icon-grid{ grid-template-columns:repeat(3,1fr); }
  .plans-grid, .testi-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .main-navigation{ display:none; }
  .header-cta .btn--navy{ display:none; }
  .menu-toggle{ display:block; }
  .main-navigation.is-open{
    display:block;
    position:absolute; left:0; right:0; top:80px;
    background:#fff; border-bottom:1px solid var(--border);
    padding:12px 24px 20px;
  }
  .main-navigation.is-open ul{ flex-direction:column; gap:0; }
  .main-navigation.is-open li{ padding:12px 0; border-bottom:1px solid var(--border); }
  .hero h1{ font-size:32px; }
  .hero .hero-sub{ font-size:18px; }
  .hero-cta-bar{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid, .special-grid, .rooms-grid, .food-strip{ grid-template-columns:1fr 1fr; }
  .icon-grid{ grid-template-columns:repeat(2,1fr); }
  .section-heading{ font-size:26px; }
  .section{ padding:64px 0; }
  .footer-grid{ grid-template-columns:1fr; }
}