/* ============================================================
   WEBIS E&C (theme/15) — 보조 CSS
   Tailwind utility 보강용 예외 스타일만 둔다.
   grid(minmax fix) / full-bleed / swiper / marquee / 상태
   ============================================================ */

/* ---- off-canvas 드로어 / full-bleed 가로 overflow 클립 ---- */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---- Grid helpers (Tailwind4 CDN 단일 1fr 폭발 회피: minmax(0,1fr)) ---- */
.grid-2,
.grid-3,
.g-3,
.g-4,
.g-5,
.grid-foot {
  display: grid;
}
.grid-2 > *,
.grid-3 > *,
.g-3 > *,
.g-4 > *,
.g-5 > *,
.grid-foot > * {
  min-width: 0;
}

.grid-2  { grid-template-columns: minmax(0, 1fr); }
.grid-3  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3     { grid-template-columns: minmax(0, 1fr); }
.g-4     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-5     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-foot { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-5    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-foot { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
}
@media (min-width: 1024px) {
  .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Full-bleed 배경 섹션 ---- */
.full-bleed {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

/* ---- 헤더 스크롤 상태 ---- */
#header.is-scrolled {
  background-color: rgba(11, 14, 19, 0.97);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* ---- 데스크탑 네비 언더라인 hover ---- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #ff6b1a;
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* ---- 탭 버튼(시공실적 / 게시판) 상태 ---- */
.work-tab,
.board-tab {
  border: 1px solid #d5d9e0;
  color: #5b6472;
  background: #fff;
}
.work-tab:hover,
.board-tab:hover {
  border-color: #15181e;
  color: #15181e;
}
.work-tab.is-active,
.board-tab.is-active {
  background: #15181e;
  border-color: #15181e;
  color: #fff;
}

/* ---- Swiper 보정 ---- */
.hero-swiper .swiper-slide,
.works-swiper .swiper-slide {
  display: block !important;
}
.works-swiper .swiper-slide {
  height: auto;
}
.works-swiper .swiper-slide article {
  height: 100%;
}

/* hero pagination */
.hero-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: all 0.3s ease;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 5px;
  background: #ff6b1a;
}

/* works pagination */
.works-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #c7ccd4;
  opacity: 1;
}
.works-pagination .swiper-pagination-bullet-active {
  background: #ff6b1a;
}

/* ---- 협력사 마퀴 ---- */
.marquee {
  width: 100%;
  overflow: hidden;
}
.marquee-track {
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: #aab0ba;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.marquee-logo:hover {
  color: #15181e;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- 모바일 드로어 (Tailwind4 translate 속성 함정 회피: CSS로 직접 제어) ---- */
#mobileMenu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
#mobileOverlay.is-open {
  opacity: 1;
  visibility: visible;
}
#mobileMenu.is-open {
  transform: translateX(0);
}

/* body 스크롤 잠금 */
body.menu-open {
  overflow: hidden;
}

/* ---- TOP 버튼 ---- */
#topBtn.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---- 진입 팝업 (공지/이벤트) ---- */
#entryPopup.is-open {
  display: flex;
}
body.popup-open {
  overflow: hidden;
}
#entryPopup.is-open .popup-card {
  animation: popup-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 모바일에서 background-attachment:fixed 비활성(iOS 깨짐 방지) ---- */
@media (max-width: 1024px) {
  .bg-fixed {
    background-attachment: scroll !important;
  }
}

/* ---- 이미지 기본 ---- */
img {
  max-width: 100%;
  height: auto;
}