/* ============================================================
   카드 그리드 레이아웃 — 그리드 / 스와이프 / 슬라이더 3모드
   - 래퍼에 svc-mode-grid|swipe|slider 클래스로 전환
   - 한 화면 카드 수는 --nsc-cols (인라인 style) 로 제어
   - 카드 자체 디자인은 style.css(.pcard)가 담당, 여기선 배치만
   - 슬라이더는 assets/js/service-slider.js (외부 의존성 없음)
   ============================================================ */
.svc-mode-grid, .svc-mode-swipe, .svc-mode-slider { --nsc-gap: var(--grid-gap, 18px); }
.nsc-stage { position: relative; }

/* 카드 한 장 너비 = (전체 - 간격들) / 카드수 */
.svc-mode-grid .item, .svc-mode-swipe .item, .svc-mode-slider .item {
  --nsc-w: calc((100% - (var(--nsc-cols, 3) - 1) * var(--nsc-gap)) / var(--nsc-cols, 3));
}

/* ---- 그리드: 한 화면에 모두 (여러 줄) ---- */
.svc-mode-grid .nsc-track {
  display: grid;
  grid-template-columns: repeat(var(--nsc-cols, 3), 1fr);
  gap: var(--nsc-gap);
}

/* ---- 스와이프: 밀어서 넘김 (JS 없음) ---- */
.svc-mode-swipe .nsc-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 10px;
}
.svc-mode-swipe .nsc-track { display: flex; gap: var(--nsc-gap); }
.svc-mode-swipe .item { flex: 0 0 var(--nsc-w); scroll-snap-align: start; }

/* ---- 슬라이더: 자동넘김·화살표·점 (service-slider.js) ---- */
.svc-mode-slider .nsc-viewport { overflow: hidden; }
.svc-mode-slider .nsc-track {
  display: flex;
  gap: var(--nsc-gap);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.svc-mode-slider .item { flex: 0 0 var(--nsc-w); }

/* 화살표 (nsc-stage 기준으로 카드 영역 중앙) */
.nsc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rule, #e7d8f6);
  background: #fff;
  color: var(--ink, #1c1230);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 3;
  transition: border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.nsc-prev { left: -6px; }
.nsc-next { right: -6px; }
.nsc-arrow:hover { border-color: var(--accent, #9333ea); color: var(--accent, #9333ea); }
.nsc-arrow[disabled] { opacity: 0.3; cursor: default; }

/* 점(dots) */
.nsc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.nsc-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--rule, #d9c7f2);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
}
.nsc-dots button.is-active {
  width: 22px;
  border-radius: 5px;
  background: var(--accent, #9333ea);
}

/* ---- 반응형: 태블릿 2장 / 모바일 1장 (인라인 --nsc-cols 덮어씀) ----
   슬라이더 JS는 실제 카드 폭을 측정하므로 자동으로 맞춰집니다. */
@media (max-width: 920px) {
  .svc-mode-grid, .svc-mode-swipe, .svc-mode-slider { --nsc-cols: var(--cols-t, 3) !important; }
}
@media (max-width: 560px) {
  .svc-mode-grid, .svc-mode-swipe, .svc-mode-slider { --nsc-cols: var(--cols-m, 2) !important; }
  .nsc-prev { left: 2px; }
  .nsc-next { right: 2px; }
}

/* ============================================================
   이미지 히어로 (맨 위 배경 이미지) — 정적/비화려, 기본은 이미지만
   제목/부제/버튼은 값을 넣었을 때만 이미지 위에 얹힌다.
   ============================================================ */
.bb-hero{
  position:relative;
  min-height:clamp(360px,54vh,540px);
  display:flex; align-items:center; justify-content:center;
  background-image:var(--hero-img); background-size:cover; background-position:center; background-repeat:no-repeat;
  text-align:center; color:#fff; overflow:hidden;
}
.bb-hero::before{ content:""; position:absolute; inset:0; background:rgba(15,12,24,var(--hero-ov,.45)); }
.bb-hero__inner{ position:relative; z-index:1; max-width:820px; padding:48px 24px; }
.bb-hero__title{ font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; line-height:1.32; margin:0 0 16px; color:#fff; word-break:keep-all; }
.bb-hero__title .em{ color:#fff; }
.bb-hero__sub{ font-size:clamp(.95rem,1.6vw,1.1rem); line-height:1.7; margin:0 0 26px; color:rgba(255,255,255,.9); word-break:keep-all; }
.bb-hero__cta{
  display:inline-block; padding:13px 32px; border:1px solid rgba(255,255,255,.75); border-radius:999px;
  color:#fff; text-decoration:none; font-weight:600; transition:background .18s ease,color .18s ease;
}
.bb-hero__cta:hover{ background:#fff; color:#1c1230; border-color:#fff; }
@media (max-width:560px){ .bb-hero__inner{ padding:26px 18px; } }

/* 텍스트 없는 이미지 전용 히어로 */
.bb-hero--empty{ min-height:clamp(300px,42vh,460px); }

/* 히어로가 카드 그리드를 덮는 스택 (경쟁사 방식)
   - 히어로가 높이를 정하고(정상 흐름), 카드 그리드는 뒤에 절대배치되어 히어로 높이만큼만 보이고 잘림
   - 그래서 여러 장짜리 그리드여도 히어로가 늘어나지 않음 */
.bb-hero-stack{ position:relative; overflow:hidden; }
.bb-hero-stack > .grid-band{ position:absolute; inset:0; z-index:1; margin-left:auto; margin-right:auto; padding-top:0; }
.bb-hero-stack > .bb-hero--cover{ position:relative; z-index:2; }

/* 히어로 폭을 본문에 맞추기
   본문(.wrap/.grid-band)은 max-width:1080 + 좌우 안쪽여백 24px → 실제 콘텐츠 폭 1032, 가운데 정렬.
   히어로 박스도 같은 1032 폭·같은 24px 시작점으로 맞춰 좌우 가로 시작선을 일치시킨다. */
.bb-hero--boxed{ width:calc(100% - 48px); max-width:1032px; margin-left:auto; margin-right:auto; border-radius:16px; }
.bb-hero--boxed:not(.bb-hero--cover){ margin-top:24px; }


/* 모바일·태블릿: 히어로를 가로 직사각형 비율로 눕힘 (기본 16:9) — 정사각형 방지.
   덮기(cover) 모드면 뒤 카드 그리드도 이 비율만큼만 보이므로 함께 납작해진다.
   글자가 있으면 aspect-ratio 보다 콘텐츠가 우선해 자동으로 늘어난다(잘림 없음). PC는 영향 없음. */
@media (max-width:768px){
  .bb-hero, .bb-hero--empty{ min-height:0; aspect-ratio:var(--hero-m-ratio,16/9); }
}

/* PC에서만 히어로 보이기 (태블릿·모바일 숨김) — 1024px 이하 숨김 */
@media (max-width:1024px){
  .bb-hero--pconly{ display:none !important; }
  /* 덮기(cover) 모드에서 히어로를 숨기면 뒤의 그리드를 정상 흐름으로 되돌려 보이게 한다 */
  .bb-hero-stack.is-pconly{ overflow:visible; }
  .bb-hero-stack.is-pconly > .grid-band{ position:static; inset:auto; }
}