:root{
  --bg:#071e12;
  --bg-soft:#0d2b1a;
  --acc:#9fe870;
  --text:#f2f6f3;
  --muted:#b7c7bd;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Arial,sans-serif;
  line-height:1.65;
}

.main-header{
  position:relative;
  height:62vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem;
  background:url('../img/퍼펙트가라오케00 내부모습.png') center/cover no-repeat fixed;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.main-header .overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(7,30,18,.85));
  backdrop-filter:saturate(120%);
}
.main-header h1,.main-header p,.main-header .cta{position:relative; z-index:1}
.main-header h1{font-size:clamp(2rem,4vw,3rem); margin:.2rem 0 .25rem 0; letter-spacing:.02em}
.main-header p{margin:0 0 1rem; color:var(--muted)}
.main-header .cta{
  display:inline-block;
  padding:.8rem 1.2rem;
  border-radius:999px;
  background:var(--acc);
  color:#071e12;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 20px rgba(159,232,112,.35);
}

section{max-width:1200px; padding:48px 20px; margin:0 auto}
h2{margin:0 0 .6rem; font-size:1.6rem}
.about,.info{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-radius:16px}

.gallery .images{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:14px;
}
.gallery img{
  width:100%; height:100%; object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery img:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.35)}

.community iframe{
  width:100%; border:0; display:block; height:800px;
  background:var(--bg-soft); border-radius:12px
}

.footer{padding:28px 20px; text-align:center; color:var(--muted)}