/* ===== 기본 변수 ===== */
:root {
  --blue: #0d6efd;
  --gray-900: #222;
  --gray-100: #f8f9fa;
  --max-width: 1180px;
}

/* ===== 리셋 & 공통 ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard',sans-serif;line-height:1.5;color:var(--gray-900)}
img{max-width:100%;display:block}
.container{width:90%;max-width:var(--max-width);margin:0 auto}

/* ===== 네비게이션 ===== */
header{background:#fff;border-bottom:1px solid #e9ecef}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.logo{font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--gray-900)}
nav ul{list-style:none;display:flex;gap:1.5rem}
nav a{text-decoration:none;color:var(--gray-900);font-weight:500}
nav a:hover{color:var(--blue)}

/* ===== Hero ===== */
.hero{
  display:flex;align-items:center;
  min-height:480px;height:80vh;overflow:hidden;
}

/* 오른쪽 이미지 */
.hero-img{flex:1 1 75%;height:100%;}
.hero-img img{width:100%;height:100%;object-fit:cover;}

/* 왼쪽 카드 (사진 쪽으로 6% 겹치기) */
.hero-card{
  position:relative;z-index:2;
  flex:0 0 38%;
  background:#fff;
  padding:3rem 2.5rem 3rem 10rem;  
  border-radius:2.5rem;
  margin-left:0;          /* ← 삭제 */
  margin-right:-8%;       /* → 사진 쪽으로 밀어넣기 */
}

.hero h2{font-size:clamp(1.5rem, 3vw + 0.8rem, 2.4rem);line-height:1.35;margin-bottom:5rem;}
.hero .brand{color:var(--blue);font-weight:800;}
.phone{font-size:clamp(1.125rem,1.2vw + .8rem,1.5rem);}

/* 모바일(≤767px)에서는 겹치기 해제 */
@media (max-width:767px){
  .hero{flex-direction:column;}
  .hero-img{width:100%;height:55vh;}
  .hero-card{
    flex:none;width:90%;margin:-3rem auto 0;   /* 위로 살짝 띄워 자연스러운 겹침 */
    border-radius:1.5rem;padding:3rem 1.5rem;
  }
}


/* ===== 설치 사례 미리보기 ===== */
.cases-preview{padding:4rem 0;background:var(--gray-100)}
.cases-preview h3{font-size:1.75rem;text-align:center;color:var(--blue)}
.subtitle{text-align:center;margin:0.5rem 0 2rem;color:#666}
.card-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border-radius:0.75rem;box-shadow:0 4px 12px rgba(0,0,0,0.05);text-decoration:none;color:inherit;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card h4{padding:1rem;text-align:center}
.card img{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}

/* 버튼 */
.btn-primary{display:inline-block;padding:.75rem 2rem;background:var(--blue);color:#fff;border-radius:.5rem;text-decoration:none;font-weight:600}
.center{text-align:center;margin-top:2rem}

/* ▣ 뒤로가기 버튼 */
/* ■ 목록 버튼 공통 스타일 */
#back-btn{
  /* ① 고정·플로팅 여부 */
  position:sticky;   /* = 스크롤해도 화면 상단에 고정 */
  /* 필요 없으면 sticky 삭제 → 일반 흐름으로 */

  /* ② 화면에서 붙어 있을 위치 */
  top:5rem;       /* 상단 여백 */
  left:1rem;         /* 왼쪽 여백 (sticky가 아닌 경우 무시됨) */

  /* ③ 내부 여백·글꼴 */
  padding:.6rem 1.4rem;
  font-size:1rem;    /* 글자 크기 */
  font-weight:600;

  /* ④ 색상·테두리·라운드 */
  background:#0d6efd;    /* 버튼 배경색 */
  color:#fff;            /* 글자색 */
  border:none;
  border-radius: .55rem; /* 모서리 둥글기 */

  /* ⑤ 그림자·애니메이션 */
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .2s, box-shadow .2s;
}

#back-btn:hover{
  transform:translateY(-px);              /* 살짝 위로 */
  box-shadow:0 8px 20px rgba(0,0,0,.18);   /* 그림자 강조 */
}

/* ⑥ 원하는 경우, 화면 폭이 작을 때 가운데 정렬 */
@media (max-width: 767px){
  #back-btn{
    margin:0 auto;     /* 좌우 여백 자동 → 가운데 */
    display:block;     /* 가운데 정렬이 보장되도록 */
    left:auto;         /* sticky 좌표 무시 */
  }
}

/* ===== cases.html 갤러리 ===== */
.cases-gallery{padding:4rem 5}
.cases-gallery h2{font-size:1.75rem;color:var(--blue);margin-bottom:2rem;text-align:center}

/* ▣ 갤러리 그리드 */
.gallery-grid{
  max-width:1060px;
  margin:2rem auto;           /* 중앙 */
  display:grid;
  gap:1rem 1rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
/* ► 갤러리  카드 이미지  고정 크기 ◄ */
.gallery-grid img{
  width:100%;          /* 가로는 카드 폭에 맞춤          */
  height:220px;        /* ←★ 원하는 한 줄 높이로 통일 ★  */
  object-fit:cover;    /* 중앙을 기준으로 꽉 채우고 잘라냄 */
  border-radius:.75rem;
}
.gallery-grid img:hover{transform:scale(1.04);}

/* ▣ 대표 사진(Hero) */
.case-hero{
  position:relative;
  max-width:1060px;   /* 최대 폭 제한 */
  margin:0 auto;      /* 중앙 정렬 */
}
.case-hero img{
  width:100%;
  height:auto;        /* 원본 비율 유지 */
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ─── Lightbox 오버레이 ─── */
#lightbox-overlay{
  position:fixed; inset:0;           /* 전체 화면 덮기 */
  background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;                      /* 버튼‧헤더 위 */
  visibility:hidden; opacity:0; transition:opacity .25s;
}
#lightbox-overlay.active{visibility:visible; opacity:1;}

#lightbox-overlay img{
  max-width:90vw; max-height:90vh;
  border-radius:.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  cursor:zoom-out;                   /* 닫힘 힌트 */
}

/* 썸네일 높이 완전 고정 + 가운데 잘라내기 --------------------------- */
.gallery-grid img,
.card-grid    img,
.card         img{
  width: 100% !important;   /* 카드 폭에 딱 맞춤 */
  height: 220px !important; /* ← 숫자만 바꿔서 원하는 통일 높이로 */
  object-fit: cover !important;  /* 가운데 기준 Crop */
  border-radius: .75rem !important;
}