:root {
  --ink:      #121215;  /* 기존 #080809 (완전 검정)에서 세련된 차콜 톤으로 변경 */
  --carbon:   #18181c;  /* 기존 #111113 에서 한 톤 부드러운 차콜로 변경 */
  --steel:    #222227;  /* 패널 및 카드 배경 */
  --plate:    #2a2a30;  /* 포인트 패널 */
  --wire:     rgba(255, 255, 255, 0.08); /* 경계선 테두리 */
  --fog:      #8a8a92;  /* 서브 텍스트 */
  --snow:     #f0ede8;  /* 메인 텍스트 */
  --red:      #e0241e;  /* 포인트 레드 */
  --red2:     #ff3028;  
  --redglow:  rgba(224, 36, 30, 0.15);
  
  --en:       'Bebas Neue', sans-serif;
  --cond:     'Barlow Condensed', sans-serif;
  --kr:       'Noto Sans KR', sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--snow);
  font-family: var(--kr);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-thumb { background: var(--red); }

/* --- NAV BAR --- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 68px;
  background: rgba(8, 8, 9, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--wire);
  display: flex;
  align-items: center;
}

/* 중앙 밀집용 컨테이너 (네이버 방식) */
.nav-container {
  width: 100%;
  max-width: 1280px; /* 화면이 아무리 커져도 이 너비 안에서만 배치 */
  margin: 0 auto;    /* 화면 정중앙 정렬 */
  padding: 0 32px;   /* 화면 축소 시 좌우 안전 여백 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 로고 */
.logo {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}
.logo-m { 
  font-family: var(--en); 
  font-size: 26px; 
  letter-spacing: .08em; 
  color: var(--snow); 
}
.logo-g { 
  font-family: var(--en); 
  font-size: 26px; 
  letter-spacing: .08em; 
  color: var(--red); 
}
.logo-sub {
  font-family: var(--cond); 
  font-size: 11px; 
  letter-spacing: .3em;
  color: var(--fog); 
  margin-left: 10px; 
  text-transform: uppercase;
  font-weight: 400;
}

/* 중앙 링크 메뉴 */
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fog);
  text-decoration: none;
  transition: color .2s ease;
}
.nav-links a:hover {
  color: var(--snow);
}

/* 우측 액션 버튼 영역 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-cta {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #3A1D1D;
  background: #FEE500;
  padding: 9px 20px;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: transform .2s ease, filter .2s ease;
}
.nav-cta:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* 상단 우측 네이버 예약 버튼 스타일 */
.nav-naver-top {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  background: #03C75A;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: transform .2s ease, filter .2s ease;
}

.nav-naver-top:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* --- HERO SECTION (중앙 컨테이너 구조 적용) --- */
#hero {
  min-height: calc(100vh - 68px); 
  position: relative; 
  background: var(--ink);
  display: flex; 
  align-items: center; 
  padding-top: 68px; /* 헤더 아래부터 시작 */
  overflow: hidden;
}

/* 네비게이션과 동일한 최대 폭(1280px) 및 중앙 정렬 래퍼 */
.hero-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* 좌측 텍스트 : 우측 비주얼 비율 */
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 2;
}

/* 좌측 텍스트 영역 */
.hero-left {
  display: flex; 
  flex-direction: column; 
  justify-content: center; /* 수직 중앙 정렬 */
  padding: 0; 
  position: relative; 
  z-index: 2;
}

/* 좌측 중앙 구역의 세로 구분선 (선택 사항: 원하시면 유지, 깔끔하게 지우려면 이 블록 삭제 가능) */
.hero-left::after {
  display: none; /* 컨테이너 안으로 들어오면서 세로선은 제거하는 것이 더 깔끔합니다 */
}

.hero-eyebrow {
  display: flex; 
  align-items: center; 
  gap: 14px;
  font-family: var(--cond); 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: .4em;
  text-transform: uppercase; 
  color: var(--red); 
  margin-bottom: 20px;
}
.hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--red); }

.hero-h1 {
  font-family: var(--en);
  font-size: clamp(56px, 7vw, 110px); /* 화면 크기에 맞게 비례 조정 */
  line-height: .9; 
  letter-spacing: .015em; 
  margin-bottom: 28px;
}
.h1-white { display: block; color: var(--snow); }
.h1-gold { display: block; color: var(--red); }
.h1-outline {
  display: block;
  -webkit-text-stroke: 1.5px rgba(240,237,232,.2);
  color: transparent;
}

.hero-copy {
  font-family: var(--cond); 
  font-size: 16px; 
  font-weight: 300; 
  font-style: italic;
  line-height: 1.75; 
  color: var(--fog); 
  max-width: 420px; 
  margin-bottom: 36px;
  border-left: 2px solid var(--red); 
  padding-left: 16px;
}

.hero-btns { display: flex; gap: 14px; align-items: center; }
.btn-gold {
  font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink); background: var(--red);
  padding: 14px 32px; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .25s, transform .25s;
}
.btn-gold:hover { background: var(--red2); transform: translateY(-2px); }

.btn-ghost {
  font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fog); text-decoration: none;
  display: flex; align-items: center; gap: 8px; transition: color .2s;
}
.btn-ghost:hover { color: var(--snow); }
.btn-ghost::after { content: '→'; transition: transform .2s; }
.btn-ghost:hover::after { transform: translateX(5px); }

/* --- HERO RIGHT (우측 비주얼 카드 프레임) --- */
.hero-right { 
  position: relative; 
  overflow: hidden; 
  background: var(--steel);
  border: 1px solid var(--wire);
  aspect-ratio: 4/3;
  max-height: 460px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  
  /* 내부 배치를 위해 flex로 변경 */
  display: flex;
}

.hero-grid {
  position: absolute; inset: 0; z-index: 2;
  background-image: linear-gradient(var(--wire) 1px, transparent 1px), linear-gradient(90deg, var(--wire) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .25; 
  pointer-events: none;
}

.hero-spotlight {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 40% 50%, rgba(224,36,30,.06) 0%, transparent 65%);
}

.hero-car-wrap {
  position: absolute; inset: 0; right: 80px; /* 우측에 스펙바 공간을 비워둠 */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 3;
}
.hero-car-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: drop-shadow(0 0 50px rgba(224,36,30,.18));
  animation: carIn 1.4s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes carIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

.hero-bignum {
  position: absolute; bottom: 30px; right: 100px; /* 우측 스펙바 왼쪽으로 살짝 이동 */
  font-family: var(--en); font-size: 140px; line-height: 1;
  color: rgba(240,237,232,.03); pointer-events: none; user-select: none;
  z-index: 4;
}

/* --- 우측 세로형 스펙 패널 가독성 최적화 --- */
.hero-spec-strip {
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 0; 
  width: 92px; /* 폭을 조금 더 여유 있게 주어 답답함 해소 */
  background: rgba(8, 8, 9, 0.94); 
  border-left: 1px solid var(--wire); 
  display: flex;
  flex-direction: column; 
  z-index: 5;
  backdrop-filter: blur(12px);
}

.hero-spec-item { 
  flex: 1; 
  padding: 6px 2px; 
  text-align: center; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--wire); 
}
.hero-spec-item:last-child { border-bottom: none; }

/* 숫자를 강조하여 한눈에 들어오게 수정 */
.hsi-num { 
  font-family: var(--en); 
  font-size: 22px; /* 숫자를 더 키움 */
  font-weight: 700;
  color: var(--snow); /* 기본은 화이트로 시인성 확보 */
  line-height: 1.1;
  letter-spacing: 0.05em;
}

/* 1200 '평'이나 숫자 속 핵심 수치만 포인트 레드 컬러로 강조 */
.hero-spec-item:nth-child(1) .hsi-num,
.hero-spec-item:nth-child(2) .hsi-num,
.hero-spec-item:nth-child(3) .hsi-num {
  color: var(--red); 
}

/* 라벨 텍스트 정리 (작고 선명하게) */
.hsi-label { 
  font-family: var(--kr); /* 영문/한글 혼용 시 가독성이 좋은 폰트 적용 */
  font-size: 8.5px; 
  font-weight: 500;
  letter-spacing: -0.02em; 
  color: var(--fog); 
  margin-top: 3px; 
  text-align: center;
  line-height: 1.2;
}

/* 모바일 화면 대응 */
@media(max-width: 768px) {
  .hero-car-wrap { right: 0; }
  .hero-bignum { right: 30px; }
  .hero-spec-strip {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto;
    flex-direction: row;
    border-left: none; border-top: 1px solid var(--wire);
  }
  .hero-spec-item {
    border-bottom: none; border-right: 1px solid var(--wire);
    padding: 10px 0;
  }
  .hero-spec-item:last-child { border-right: none; }
  .hsi-num { font-size: 18px; }
}

/* 반응형 모바일/태블릿 */
@media(max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 30px 20px;
  }
  .hero-right {
    aspect-ratio: 16/10;
    max-height: 340px;
  }
  .hero-h1 {
    font-size: clamp(48px, 11vw, 72px);
  }
}
/* --- 배너 공통 스타일 --- */
.marquee-static {
  background: var(--red); 
  padding: 18px 0; 
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marquee-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  flex-wrap: wrap;         
  gap: 8px; 
}

/* 모든 문구가 동일한 폰트(Noto Sans KR)와 굵기로 통일됨 */
.marquee-static .mi { 
  font-family: var(--kr); 
  font-size: 14px; 
  font-weight: 700;       
  letter-spacing: 0.12em; 
  padding: 0 14px; 
  color: var(--ink); 
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* ✦ 별 모양 자동 삽입 및 간격 조절 */
.marquee-static .mi:not(:last-child)::after {
  content: '✦';
  font-size: 11px;
  color: rgba(8, 8, 9, 0.45);
  margin-left: 20px;
}

/* --- COMMONS & ABOUT (좌우 반전 배치 적용) --- */
.sec-label { 
  font-family: var(--cond); 
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: .45em; 
  text-transform: uppercase; 
  color: var(--red); 
  margin-bottom: 12px; 
}
.sec-title { 
  font-family: var(--en); 
  font-size: clamp(38px, 5vw, 62px); 
  letter-spacing: .03em; 
  line-height: 1; 
}
.sec-head { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  margin-bottom: 56px; 
}

#about { 
  background: var(--carbon); 
  padding: 100px 0; 
  border-top: 1px solid var(--wire); 
}

.about-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* 핵심: 왼쪽 텍스트, 오른쪽 사진 순서로 그리드 설정 */
.about-grid { 
  display: grid; 
  grid-template-columns: 1.1fr 1fr; /* 좌측 텍스트 공간을 살짝 넓게, 우측 사진 공간 */
  gap: 64px; 
  align-items: center; 
}

/* --- 우측 시설 비주얼 슬라이드 스타일 --- */
.facility-frame {
  width: 100%;
  background: var(--steel);
  border: 1px solid var(--wire);
  overflow: hidden;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.carousel-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 가로 스크롤 영역 설정 */
.carousel-slide {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  
  /* 스크롤바를 숨기지 않고 슬림하게 노출 (PC에서 마우스로 잡기 용이) */
  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--carbon);
}

/* 크롬, 사파리 브라우저 스크롤바 디자인 커스텀 */
.carousel-slide::-webkit-scrollbar {
  height: 6px; /* 스크롤바 높이 */
}

.carousel-slide::-webkit-scrollbar-thumb {
  background: var(--red); /* 모드개러지 레드 포인트 */
  border-radius: 3px;
}

.carousel-slide::-webkit-scrollbar-track {
  background: var(--carbon); /* 스크롤바 배경 트랙 */
}
.carousel-item {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  position: relative;
  background: #080809;
}

.carousel-item img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* 사진 하단 캡션 */
.slide-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(8,8,9,0.95) 0%, rgba(8,8,9,0.4) 70%, transparent 100%);
  pointer-events: none;
}

.slide-cap-cat {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--red);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.slide-cap-title {
  font-family: var(--en);
  font-size: 20px;
  color: var(--snow);
  letter-spacing: .05em;
}

/* 우측 상단 가이드 텍스트 */
.carousel-guide {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(8, 8, 9, 0.7);
  border: 1px solid var(--wire);
  color: var(--fog);
  font-family: var(--cond);
  font-size: 11px;
  padding: 6px 12px;
  letter-spacing: .1em;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* 모바일 화면 대응 */
@media(max-width: 900px) {
  .carousel-item img {
    height: 300px;
  }
}

/* 1200평 우측 하단 레드 배지 (우측 배치된 사진 기준 좌측/우측 하단 조절 가능) */
.fac-badge {
  position: absolute; 
  bottom: -16px; 
  right: -16px; /* 사진이 오른쪽에 있으므로 배지가 우측 하단에 자연스럽게 위치합니다 */
  width: 120px; 
  height: 120px; 
  background: var(--red);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  z-index: 10;
}
.fac-badge-n { 
  font-family: var(--en); 
  font-size: 40px; 
  line-height: 1; 
  color: #fff; 
}
.fac-badge-t { 
  font-family: var(--cond); 
  font-size: 10px; 
  font-weight: 700; 
  color: rgba(255,255,255,.8); 
}

.about-title { 
  font-family: var(--en); 
  font-size: clamp(36px, 4.5vw, 54px); 
  line-height: 1; 
  margin-bottom: 24px; 
}
.about-title span { color: var(--red); }

.about-body { 
  font-family: var(--cond); 
  font-size: 16px; 
  font-weight: 300; 
  font-style: italic; 
  line-height: 1.85; 
  color: var(--fog); 
  margin-bottom: 36px; 
}
.about-body strong { color: var(--snow); font-style: normal; font-weight: 600; }

.brand-trio { 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
  margin-bottom: 36px; 
}
.brand-row {
  display: flex; 
  align-items: center; 
  gap: 16px; 
  padding: 16px 20px;
  background: var(--steel); 
  border: 1px solid var(--wire); 
  border-left: 3px solid var(--red);
}
.br-name { 
  font-family: var(--en); 
  font-size: 20px; 
  min-width: 170px; 
}
.br-desc { 
  font-family: var(--cond); 
  font-size: 13px; 
  color: var(--fog); 
}

.about-tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
}
.atag {
  font-family: var(--cond); 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: .2em;
  text-transform: uppercase; 
  color: var(--fog); 
  border: 1px solid var(--wire); 
  padding: 5px 14px;
}

/* 반응형 모바일 대응 (모바일에서는 텍스트가 위, 사진이 아래로 오도록 자연스럽게 정렬) */
@media(max-width: 900px) {
  .about-container { padding: 0 20px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
}



/* --- DETAILING & WORKS --- */
.ls-item { background: var(--steel); padding: 22px 26px; }
.ls-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 7px; }
.ls-name { font-family: var(--kr); font-size: 13.5px; font-weight: 500; color: var(--snow); }
.ls-price { font-family: var(--cond); font-size: 17px; font-weight: 700; }
.ls-desc { font-family: var(--cond); font-size: 11.5px; font-weight: 300; color: var(--fog); line-height: 1.7; }
.ls-tag { font-family: var(--cond); font-size: 10px; font-weight: 600; padding: 5px 13px; border: 1px solid; text-transform: uppercase; }
.lusso-tab.active { color: var(--red) !important; }

#works { padding: 100px 52px; background: var(--ink); border-top: 1px solid var(--wire); }
.works-filter { display: flex; gap: 8px; margin-bottom: 44px; flex-wrap: wrap; }
.wf-btn {
  font-family: var(--cond); font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fog); background: transparent;
  border: 1px solid var(--wire); padding: 9px 22px; cursor: pointer;
}
.wf-btn.active, .wf-btn:hover { color: var(--red); border-color: rgba(224,36,30,.45); background: var(--redglow); }

@media(max-width:900px) {
  nav { padding: 0 18px; }
  .nav-links { display: none; }
  #hero { grid-template-columns: 1fr; }
  .hero-left { padding: 100px 20px 60px; }
  .hero-right { min-height: 50vh; }
  #about, #works, #lusso { padding: 64px 20px; }
  .about-grid { grid-template-columns: 1fr; }
}

/* --- MENU BOOK SECTION 스타일 --- */
#menubook {
  background: var(--carbon);
  padding: 110px 0;
  border-top: 1px solid var(--wire);
}

.mb-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.mb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.mb-card {
  display: block;
  background: var(--steel);
  border: 1px solid var(--wire);
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.mb-card:hover {
  border-color: var(--red);
  transform: translateY(-5px);
}

.mb-cover-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #000;
}

.mb-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mb-card:hover .mb-cover-img img {
  transform: scale(1.05);
}

.mb-info {
  padding: 32px;
}

.mb-tag {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--red);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.mb-card h3 {
  font-family: var(--en);
  font-size: 24px;
  color: var(--snow);
  margin-bottom: 8px;
}

.mb-card p {
  font-family: var(--cond);
  font-size: 14px;
  color: var(--fog);
  font-weight: 300;
  margin-bottom: 20px;
}

.mb-btn-text {
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--snow);
  text-transform: uppercase;
}

/* --- 순수 CSS 모달 시스템 (정밀 매칭) --- */
.modal-checkbox {
  display: none;
}

.pure-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* 개러지 체크박스가 체크될 때 개러지 모달만 표시 */
#garage-modal-toggle:checked ~ .garage-modal-wrap {
  display: flex;
}

/* 루쏘 체크박스가 체크될 때 루쏘 모달만 표시 */
#lusso-modal-toggle:checked ~ .lusso-modal-wrap {
  display: flex;
}

/* 모달 오픈 시 배경 스크롤 방지 */
body:has(#garage-modal-toggle:checked),
body:has(#lusso-modal-toggle:checked) {
  overflow: hidden;
}

.pure-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 9, 0.92);
  backdrop-filter: blur(5px);
}

.pure-modal-box {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 85vh;
  background: var(--carbon);
  border: 1px solid var(--wire);
  display: flex;
  flex-direction: column;
  z-index: 10000;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.pure-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: var(--steel);
  border-bottom: 1px solid var(--wire);
}

.pure-modal-header h3 {
  font-family: var(--en);
  font-size: 18px;
  color: var(--snow);
  letter-spacing: .1em;
}

.pure-close-btn {
  background: var(--red);
  color: #fff;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  letter-spacing: .1em;
  transition: filter 0.2s ease;
  user-select: none;
}

.pure-close-btn:hover {
  filter: brightness(1.1);
}

.pure-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.pure-modal-body img {
  width: 100%;
  max-width: 750px;
  height: auto;
  border: 1px solid var(--wire);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

@media(max-width: 900px) {
  .mb-container { padding: 0 20px; }
  .mb-grid { grid-template-columns: 1fr; }
  .pure-modal-box { height: 90vh; max-width: 95vw; }
  .pure-modal-body { padding: 20px; }
}



/* --- WORKS SECTION (중앙 1280px 정렬 및 버튼 제거 버전) --- */
#works {
  background: var(--ink);
  padding: 110px 0;
  border-top: 1px solid var(--wire);
}

.works-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* 타이틀 영역 단독 정렬 */
#works .sec-head {
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.works-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.wf-btn {
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: var(--steel);
  border: 1px solid var(--wire);
  color: var(--fog);
  padding: 10px 22px;
  cursor: pointer;
  transition: all .25s ease;
}

.wf-btn:hover, .wf-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.works-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wk-card {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--steel);
  border: 1px solid var(--wire);
  overflow: hidden;
  display: block;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.wk-card-vis {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wk-card-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-card:hover .wk-card-vis img {
  transform: scale(1.08);
}

.wk-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,9,0.9) 0%, rgba(8,8,9,0.4) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  z-index: 2;
  transition: background 0.3s ease;
}

.wk-card:hover .wk-overlay {
  background: linear-gradient(to top, rgba(8,8,9,0.95) 0%, rgba(8,8,9,0.6) 60%, rgba(8,8,9,0.2) 100%);
}

.wk-cat {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.wk-title {
  font-family: var(--kr), var(--en);
  font-size: 16px;
  font-weight: 700;
  color: var(--snow);
  line-height: 1.4;
  margin-bottom: 8px;
}

.wk-meta {
  font-family: var(--cond);
  font-size: 11px;
  color: var(--fog);
  letter-spacing: .1em;
}

.wk-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: rgba(8, 8, 9, 0.6);
  border: 1px solid var(--wire);
  color: var(--snow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 3;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(-5px);
}

.wk-card:hover .wk-arrow {
  opacity: 1;
  transform: translateY(0);
  background: var(--red);
  border-color: var(--red);
}

/* 반응형 */
@media(max-width: 900px) {
  .works-container { padding: 0 20px; }
  .works-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media(max-width: 600px) {
  .works-masonry {
    grid-template-columns: 1fr;
  }
}

/* 시공사례 하단 더보기 버튼 영역 */
.works-more {
  margin-top: 50px; /* 위 카드 그리드와의 간격을 시원하게 띄움 */
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 숨김 라디오 버튼 처리 */
#works input[type="radio"] {
  display: none;
}

/* 필터 버튼(label) 기본 디자인 */
.works-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.works-filter .wf-btn {
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: var(--steel);
  border: 1px solid var(--wire);
  color: var(--fog);
  padding: 10px 22px;
  cursor: pointer;
  transition: all .25s ease;
  user-select: none;
}

.works-filter .wf-btn:hover {
  border-color: var(--red);
  color: var(--snow);
}

/* --- 선택된 라디오 버튼에 따른 버튼 활성화 표시 --- */
#f-all:checked ~ .works-filter label[for="f-all"],
#f-repair:checked ~ .works-filter label[for="f-repair"],
#f-ppf:checked ~ .works-filter label[for="f-ppf"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* --- 기본 상태: 모든 카드 표시 (전체 선택 시) --- */
.works-masonry .wk-card {
  display: block;
}

/* --- '정비·수리' 선택 시: repair 카드가 아닌 것들 숨김 --- */
#f-repair:checked ~ .works-masonry .wk-card:not([data-cat="repair"]) {
  display: none;
}

/* --- 'PPF·랩핑' 선택 시: ppf 카드가 아닌 것들 숨김 --- */
#f-ppf:checked ~ .works-masonry .wk-card:not([data-cat="ppf"]) {
  display: none;
}

/* --- BOOKING SECTION (통합 예약 안내) --- */
#booking {
  background: var(--carbon);
  padding: 110px 0;
  border-top: 1px solid var(--wire);
}

.booking-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* 예약 안내 카드 전체 레이아웃 및 폰트 강조 */
.booking-card {
  background: var(--steel);
  border: 1px solid var(--wire);
  padding: 40px; /* 여백을 조금 더 넉넉하게 확장 */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

/* 아이콘 크기 키우기 (기존보다 대폭 확대 및 여백 확보) */
.bk-icon {
  font-size: 45px; /* 아이콘 크기 확대 */
  line-height: 1;
  margin-bottom: 20px;
  display: inline-block;
}

/* OPERATING HOURS 및 PROCESS 타이틀 크기 키우기 */
.booking-card h3 {
  font-family: var(--en);
  font-size: 30px; /* 타이틀 글자 크기 확대 */
  color: var(--snow);
  letter-spacing: .08em;
  margin-bottom: 16px;
}

/* 내부 상세 텍스트(설명) 크기 및 가독성 개선 */
.bk-desc {
  font-family: var(--cond);
  font-size: 16px; /* 본문 글자 크기 확대 (기존 14~15px에서 상향) */
  color: var(--fog);
  font-weight: 300;
  line-height: 1.8; /* 줄 간격도 쾌적하게 넓힘 */
}

.bk-desc strong {
  color: var(--snow);
  font-weight: 600;
}

/* 하단 카카오 예약 CTA 박스 */
.booking-cta-box {
  background: var(--steel);
  border: 1px solid rgba(224, 36, 30, 0.4);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.bk-cta-text h3 {
  font-family: var(--en);
  font-size: 26px;
  color: var(--snow);
  margin-bottom: 6px;
}

.bk-cta-text p {
  font-family: var(--cond);
  font-size: 14px;
  color: var(--fog);
}

/* --- 예약 CTA 버튼 그룹 레이아웃 --- */
.bk-cta-btns {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 네이버 예약 버튼 스타일 (초록색 포인트) */
.btn-naver {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: #03C75A; /* 네이버 브랜드 그린 컬러 */
  padding: 16px 28px;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform .2s ease, filter .2s ease;
}

.btn-naver:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* 카카오 예약 버튼 스타일 */
.btn-kakao {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3A1D1D;
  background: #FEE500; /* 카카오 노란색 */
  padding: 16px 28px;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform .2s ease, filter .2s ease;
}

.btn-kakao:hover {
  filter: brightness(0.95);
  transform: translateY(-2px);
}

/* 모바일 반응형 대응 (화면이 좁아지면 버튼이 세로로 정렬되도록 조정) */
@media(max-width: 900px) {
  .booking-container { padding: 0 20px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-cta-box { flex-direction: column; text-align: center; }
  .bk-cta-btns {
    flex-direction: column;
    width: 100%;
  }
  .btn-naver, .btn-kakao {
    width: 100%;
    text-align: center;
  }
}

/* --- LOCATION SECTION (오시는 길) --- */
#location {
  background: var(--ink);
  padding: 110px 0;
  border-top: 1px solid var(--wire);
}

.location-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: stretch;
}

/* 왼쪽 정보 박스 */
.loc-info-box {
  background: var(--carbon);
  border: 1px solid var(--wire);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.loc-badge {
  font-family: var(--cond);
  font-size: 20px; /* 11px -> 13px로 확대 */
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.loc-title {
  font-family: var(--en);
  font-size: 38px; /* 32px -> 38px로 대폭 확대 */
  color: var(--snow);
  margin-bottom: 32px;
  line-height: 1.1;
}

.loc-detail-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}

.loc-label-sub {
  font-family: var(--cond);
  font-size: 20px; /* 11px -> 13px로 소제목 확대 */
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--snow); /* 색상도 더 선명하게 변경 */
  display: block;
  margin-bottom: 4px;
}

.loc-text {
  font-family: var(--cond);
  font-size: 16px; /* 15px -> 17px로 본문 글씨 크기 확대 */
  color: var(--snow);
  font-weight: 300;
  line-height: 1.7;
}

/* 지도 링크 버튼 */
.btn-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--steel);
  border: 1px solid var(--wire);
  color: var(--snow);
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-map-link:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* --- LOCATION 우측 지도 이미지 박스 스타일 --- */
.location-map-box {
  width: 100%;
  height: 100%;
  background: var(--steel);
  border: 1px solid var(--wire);
  overflow: hidden;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.map-link-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.map-img-container {
  width: 100%;
  height: 100%;
  min-height: 340px; /* 좌측 카드 높이와 균형 맞춤 */
  position: relative;
  overflow: hidden;
  background: #111;
}

.map-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 박스에 꽉 차게 조절 */
  transition: transform 0.5s ease;
}

/* 마우스 올렸을 때 지도가 살짝 확대되는 효과 */
.location-map-box:hover .map-img-container img {
  transform: scale(1.03);
}

/* 마우스 오버 시 나타나는 세련된 반투명 오버레이 버튼 */
.map-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 9, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.map-hover-overlay span {
  background: var(--red);
  color: #fff;
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  letter-spacing: .1em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.location-map-box:hover .map-hover-overlay {
  opacity: 1;
}
/* 반응형 모바일 대응 */
@media(max-width: 900px) {
  .location-container { padding: 0 20px; }
  .location-grid { grid-template-columns: 1fr; }
  .loc- info-box { padding: 32px 24px; }
}

/* --- FOOTER SECTION --- */
footer {
  background: var(--ink);
  border-top: 1px solid var(--wire);
  padding: 80px 0 40px 0;
  color: var(--fog);
}

.footer-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--wire);
}

.footer-brand .logo {
  display: inline-block;
  margin-bottom: 16px;
  text-decoration: none;
}

.footer-desc {
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--fog);
  max-width: 400px;
}

.footer-links-group {
  display: flex;
  gap: 64px;
}

.footer-col h4 {
  font-family: var(--en);
  font-size: 14px;
  letter-spacing: .15em;
  color: var(--snow);
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col ul li a {
  font-family: var(--cond);
  font-size: 14px;
  color: var(--fog);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: var(--red);
}

/* --- FOOTER BOTTOM (로고 및 사업자 정보 영역) --- */
.footer-bottom {
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 로고 이미지 칸 스타일 */
.footer-logo-box {
  width: 140px; /* 원하시는 로고 크기에 맞춰 조절 가능 */
  flex-shrink: 0;
}

.footer-logo-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1); /* 로고가 어두운 색일 경우 하얗게 반전시키고 싶을 때 사용 (필요 없으면 이 줄 삭제) */
}

.footer-info-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right; /* 우측 정렬 (좌측 정렬을 원하시면 left로 변경) */
}

.copyright {
  font-family: var(--cond);
  font-size: 13px;
  color: var(--snow);
  letter-spacing: .05em;
}

.footer-info {
  font-family: var(--cond);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

/* 모바일 반응형 대응 */
@media(max-width: 900px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-info-group {
    text-align: left;
  }
}

/* --- TOP SCROLL BUTTON --- */
.btn-top-scroll {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  background: var(--steel);
  border: 1px solid var(--wire);
  color: var(--snow);
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.btn-top-scroll:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-4px);
}

/* 모바일 화면 대응 (우측 하단 여백 조절) */
@media(max-width: 900px) {
  .btn-top-scroll {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════ MOBILE RESPONSIVE OPTIMIZATION ═══════ */
@media(max-width: 900px) {

  /* 1. 네비게이션바 모바일 최적화 */
  nav {
    padding: 0 16px;
    height: 70px;
  }

  .nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 모바일에서 로고 크기 축소 */
  .logo {
    font-size: 18px;
  }

  .logo-sub {
    display: none; /* 모바일 공간 절약을 위해 부가 주소 숨김 (필요시 유지 가능) */
  }

  /* 메뉴 링크 글자 크기와 간격 축소 */
  .nav-links {
    gap: 12px;
  }

  .nav-links a {
    font-size: 12px;
    letter-spacing: -0.02em;
  }

  /* 예약 버튼 그룹 크기 축소 및 정돈 */
  .nav-actions {
    gap: 6px;
  }

  .nav-naver-top, 
  .nav-cta {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* 2. 히어로 섹션 (메인) 모바일 최적화 */
  #hero {
    padding: 40px 0;
    height: auto;
  }

  .hero-container {
    flex-direction: column !important; /* 좌우 배치를 세로(위아래) 배치로 변경 */
    gap: 40px !important;
    padding: 0 16px !important;
  }

  .hero-left {
    width: 100% !important;
    text-align: center;
  }

  .hero-h1 {
    font-size: 38px !important; /* 모바일 화면에 맞게 타이틀 크기 조절 */
    line-height: 1.1;
  }

  .hero-copy {
    font-size: 14px !important;
  }

  /* 우측 비주얼 및 차량 이미지 영역 모바일 대응 */
  .hero-right {
    width: 100% !important;
    height: auto !important;
    min-height: 280px;
  }

  .hero-car-wrap {
    position: relative !important;
    width: 100% !important;
    height: 240px;
  }

  .hero-car-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 우측 하단 스펙 패널(1200평, 3, 8+, 14K) 모바일에서 2x2 그리드로 깔끔하게 배치 */
  .hero-spec-strip {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin-top: 20px;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    width: 100% !important;
  }

  .hero-spec-item {
    background: var(--steel);
    border: 1px solid var(--wire);
    padding: 14px;
    text-align: center;
  }

  .hsi-num {
    font-size: 24px !important;
  }

  .hsi-label {
    font-size: 11px !important;
  }

  /* 3. 마키(Marquee 대체 영역) 모바일 폰트 축소 */
  .marquee-container {
    gap: 30px;
    font-size: 13px;
  }
}