/* ============================================================
   WEBIS GROUP (theme/17) — 보조 CSS
   Tailwind utility 중심. 여기엔 full-bleed/grid/슬라이더/CDN 한계 보정만.
   ============================================================ */

:root { --container: 1320px; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---- 레이아웃 분기 ----
   full   : 좌우 배경이 화면 끝까지 확장 (내부에서 max-width로 콘텐츠 제한)
   area   : 콘텐츠가 중앙 컨테이너로 제한 (배경 확장 없음)
   rightfull : area 시작점(컨테이너 왼쪽)에서 시작해 오른쪽으로 화면 끝까지 흐르는 슬라이드
*/
.full { width: 100%; }

/* rightfull: 컨테이너 좌측 정렬 시작 + 우측 full-bleed 슬라이더(우측은 잘라냄) */
.rightfull {
  margin-left: max(24px, calc((100% - var(--container)) / 2 + 24px));
  overflow: hidden;
}
@media (max-width: 1023px) {
  .rightfull { margin-left: 0; padding-left: 24px; }
}

/* ---- Swiper 보정 (Tailwind CDN 한계 우회) ---- */
.heroSwiper, .heroSwiper .swiper-wrapper, .heroSwiper .swiper-slide { height: 100%; }
.heroSwiper .swiper-slide { display: block; }

/* 계열사 슬라이더: 슬라이드 너비 (overflow는 .rightfull이 클립) */
.compSwiper .swiper-slide {
  width: 300px;
  height: auto;
  display: block;
}
@media (min-width: 768px) {
  .compSwiper .swiper-slide { width: 340px; }
}

/* hero pagination dots */
.heroPagination .swiper-pagination-bullet {
  width: 9px; height: 9px; background: rgba(255,255,255,.45);
  opacity: 1; border-radius: 9999px; cursor: pointer;
  transition: width .3s, background .3s;
}
.heroPagination .swiper-pagination-bullet-active {
  width: 28px; background: #fff;
}

/* ---- 사업영역 탭 active ---- */
.biz-tab.is-active {
  background: #0A1F44;
  border-color: #0A1F44;
  color: #fff;
}
.biz-panel { display: none; }
.biz-panel.is-active { display: grid; }

/* ---- 뉴스 탭 ---- */
.news-tab { color: #5A6478; }
.news-tab.is-active { background: #0A1F44; color: #fff; }
.news-panel { display: none; }
.news-panel.is-active { display: grid; }
.news-panel[data-newspanel="2"].is-active { display: flex; }

/* ---- FAQ ---- */
.faq-item.is-open .faq-ico { transform: rotate(45deg); }

/* ---- grid 안전장치 (Tailwind4 single 1fr → minmax) ---- */
.grid > * { min-width: 0; }

/* line-clamp fallback */
.line-clamp-1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* 헤더 스크롤 시 그림자 */
#header.is-scrolled { box-shadow: 0 6px 24px rgba(10,31,68,.08); }