/* =========================================================
   기본(공통)
   ========================================================= */

.masthead { position: relative; }

.masthead-main {
  height: 100vh;
  min-height: 30rem;
  display: flex;
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 기본 bg-cover (PC 기본값) */
.bg-cover {
  background-size: cover;
  background-position: center;
  width: 100vw;
  min-height: 100vh;
}

/* =========================================================
   모바일 고정요소 z-index 정리 (겹침 해결)
   ========================================================= */
@media (max-width: 991.98px) {
  /* 사이드바는 기본 상태에서 hero를 덮지 않게 */
  #sidebar-wrapper { z-index: 900 !important; }
  /* 메뉴가 열렸을 때만 최상단 */
  #sidebar-wrapper.active { z-index: 2000 !important; }

  /* 햄버거/로고는 항상 최상단 */
  .menu-toggle { z-index: 3000 !important; }
  .mobile-logo { z-index: 3000 !important; }
}

/* =========================================================
   모바일 전용: 메인 비주얼 + 텍스트 (잘림 방지)
   ========================================================= */
@media (max-width: 767.98px) {

  /* 모바일 상단 고정요소(로고/햄버거) 공간 확보 */
  header {
    padding-top: 80px !important;   /* 필요시 70~110px */
    margin-top: 0 !important;
  }

  /* 캐러셀 자체 여백 제거 */
  #mainCarousel, .carousel-inner, .carousel-item {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* ✅ 모바일에서 bg-cover가 주는 100vh 강제 제거(잘림 원인) */
  .bg-cover {
    min-height: 0 !important;
    height: auto !important;
  }

  /* ✅ 모바일 hero: background 방식 제거하고 이미지 태그로만 표시 */
  .main-hero {
    background-image: none !important;
    width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    display: block !important; /* flex 영향 제거 */
  }

  .hero-copy-1{
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif !important;
    color: #2a2f36 !important;      /* 진한 회색 */
    text-shadow: none !important;   /* 회색이면 흰색 그림자 제거 추천 */
    left: 22px !important;          /* 기존 12px → 여백 증가 */
    padding-left: 13px !important;   /* 글자 자체 왼쪽 여백(추가로 더 띄우고 싶을 때) */
    padding-bottom: 10px !important;

  }

  /* ✅ 굵게 표시할 단어 */
  .hero-copy-1 .bold{
    font-weight: 600 !important;
  }

  /* =========================================================
     ✅✅ [핵심 추가] 1번 이미지 위에 문구를 "정확히" 올리기 위한 기준면
     - main_mobile1.png를 감싸는 wrapper
     ========================================================= */
  .hero-mobile-wrap{
    position: relative !important;   /* 오버레이 기준점 */
    width: 100% !important;
  }

  /* ✅ 이미지 100% 폭 + 비율 유지 */
  .hero-mobile-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* =========================================================
     ✅✅ [핵심 수정] 오버레이/문구는 hero-mobile-wrap 기준으로만 absolute
     - 기존 .hero-overlay가 main-hero 기준으로 떠버리는 문제 해결
     ========================================================= */
  .hero-mobile-wrap .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    pointer-events: none !important;
  }

  .hero-mobile-wrap .hero-mobile-copy {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 60 !important;

    color: #a42342 !important;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif !important;

    font-weight: 700 !important;
    line-height: 1.25 !important;
    font-size: 1.8rem !important;
    letter-spacing: -0.02em !important;

    /* 색상이 진해서 흰색 그림자는 과할 수 있음(원하면 삭제) */
    text-shadow: 0 2px 6px rgba(255,255,255,0.35) !important;
  }

  /* ✅ 혹시 남아있는 기존 규칙이 떠버릴 경우를 대비한 안전장치(선택) */
  .main-hero > .hero-overlay { display: none !important; }

  /* ✅ PC용 중앙 문구는 모바일에서 숨김 */
  .hero-text { display: none !important; }

  /* 섹션 간격 */
  #about {
    padding-top: 1.1rem;
    padding-bottom: 0.5rem;
  }
  .content-section h2 {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }
  .content-section p.lead {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.3rem;
  }
}

/* =========================================================
   PC/태블릿(768px 이상): 화면 전체폭 기준 좌우 10px 마진
   ========================================================= */
@media (min-width: 768px) {
  .bg-cover{
    width: auto !important;
  }

  /* ✅ 너가 원한 것: 1300 제한 없이 전체폭 - 좌우 10px */
  .main-hero {
    width: auto !important; /* 좌우 10px */
    margin: 60px 15px 0 15px !important;
    max-width: none !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* 아래/위 공백 원인(높이 고정) 제거 */
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 6094 / 2813;

    /* flex가 찌그러뜨리는 경우 방지 */
    #mainCarousel .carousel-item > .main-hero{
      flex: 0 0 auto !important;
    }
  }

  /* 모바일 전용 요소 숨김 */
  .hero-mobile-wrap { display: none !important; }  /* ✅ 추가 */
  .hero-mobile-img { display: none !important; }
  .hero-overlay { display: none !important; }
  .hero-mobile-copy { display: none !important; }

  /* ✅ bg-cover 덮어쓰기(90%) 제거: 여기서 다시 90%로 만들면 충돌남 */
  .main-hero.bg-cover{
    min-height: 0 !important;
    height: auto !important;
  }
}

/* =========================================================
   폰트 크기
   ========================================================= */
@media (min-width: 992px) {
  .masthead h1, .masthead .h1 {
    font-size: 3.5rem;
    color: #000;
  }
}

@media (max-width: 767px) {
  .masthead h1, .masthead .h1 {
    font-size: 2.0rem;
    margin: 0;
    padding: 0;
    color: #000;
    word-break: keep-all;
  }
}

/* =========================================================
   서브 헤더
   ========================================================= */
.masthead-sub {
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%), url('bg-masthead.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  text-align: center;
  padding: 1rem 0;
}

.masthead-sub .page-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  transform: translateY(-50%);
  color: #fff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.95);
}

.masthead-sub .title-underline {
  width: 60px;
  height: 2px;
  background: white;
  margin: 0 auto 0.5rem;
  border: none;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.95);
}

.masthead-sub .page-subtitle {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 0;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.95);
}

/* =========================================================
   NAV
   ========================================================= */
.center-nav-item a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  padding: 0.5rem 0;
}
.center-nav-item a:hover { color: blue; }

.center-nav-item.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 2;
}
.center-nav-item.dropdown:hover .dropdown-menu { display: block; }

.dropdown-menu li { padding: 0.5rem 1rem; }
.dropdown-menu li a { color: #333; display: block; }
.dropdown-menu li a:hover {
  background: #282536;
  color: #f8f9fa;
  padding-left: 15px;
  padding-right: 15px;
}

/* nav 컴팩트 */
.center-nav {
  padding: 0 1.5rem !important;
  gap: 0 !important;
}

.header-logo img,
.mobile-logo img {
  display: block;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* =========================================================
   섹션 공통
   ========================================================= */
.content-section {
  padding-top: 3.5rem;
  padding-bottom: 1.5rem;
}

.text-keep-all { word-break: keep-all !important; }

/* 모바일 텍스트 유틸 */
@media (max-width: 767px) { .mobi-text { font-size: 1.5rem !important; } }
@media (max-width: 767px) { .mobi-text-2 { font-size: 1.2rem !important; } }
@media (max-width: 767px) { .mobi-text-3 { font-size: 1.3rem !important; } }
@media (max-width: 767px) { .mobi-p-1 { padding: .5rem !important; } }

@media (max-width: 767px) {
  .mobi-p-xy-1 {
    padding-left: .1rem !important;
    padding-right: .1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }
}
@media (max-width: 767px) {
  .mobi-p-xy-5 {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }
}
@media (max-width: 767px) { .mobi-img1 { height: 400px !important; } }

/* pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: #282536;
}
.with-arrow .nav-link.active::after {
  border-top: 6px solid #282536 !important;
}
.text-custom-bg-dark {
  color: #fff !important;
  background-color: #282536 !important;
}

.thumb-img.selected { border: 3px solid #007bff; }

/* premium marquee */
.marquee-area {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background: transparent;
}
.marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* portfolio */
.portfolio-item .caption .caption-content h2,
.portfolio-item .caption .caption-content .h2 {
  font-size: 2.0rem;
  text-transform: uppercase;
}
.content-section-heading h2,
.content-section-heading .h2 {
  font-size: 2rem;
}

/* main-gallery */
.gallery-thumb.selected {
  border: 3px solid #007bff;
  box-sizing: border-box;
}

/* 메인 이미지 텍스트(PC용) */
.hero-text {
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.95);
}

/* 캐러셀 상단 여백 */
#mainCarousel { margin-top: 0 !important; }