@charset "utf-8";
/* ==========================================================================
   BizLab 메인 페이지 — 포트폴리오 캐러셀 / 비즈니스 올인원
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 히어로
   -------------------------------------------------------------------------- */
.bz-hero{padding:72px 0 56px;text-align:center}
.bz-hero__badge{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;
  border-radius:999px;background:var(--bz-teal-soft);color:var(--bz-teal-dark);
  font-size:var(--fs-xs);font-weight:700;margin-bottom:24px}
.bz-hero__badge b{color:var(--bz-red)}
.bz-hero h1{max-width:16em;margin:0 auto}
.bz-hero__lead{max-width:38em;margin:22px auto 0}
.bz-hero__actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}

/* --------------------------------------------------------------------------
   2. 포트폴리오 자동 캐러셀
   요구사항: 우→좌 자동 흐름 / 박스 크기 일정 / 가운데 카드만 확대
   구현: 트랙을 2벌 복제해 무한 루프. transform으로만 이동(리플로우 없음).
   -------------------------------------------------------------------------- */
.bz-rail{position:relative;overflow:hidden;padding:28px 0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.bz-rail__track{display:flex;gap:22px;width:max-content;will-change:transform}

/* 모든 카드 동일 크기 — nth-child 하드코딩 금지 */
.bz-rail__card{flex:0 0 300px;width:300px;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s ease;
  transform:scale(.88);opacity:.55;cursor:pointer}
/* 가운데 선택 카드만 확대 */
.bz-rail__card.is-center{transform:scale(1.12);opacity:1;z-index:2}

.bz-rail__thumb{aspect-ratio:4/3;border-radius:var(--bz-radius);overflow:hidden;
  background:var(--bz-soft) center/cover no-repeat;box-shadow:var(--bz-shadow);
  transition:box-shadow .45s ease}
.bz-rail__card.is-center .bz-rail__thumb{box-shadow:var(--bz-shadow-lg)}
.bz-rail__meta{margin-top:14px;text-align:center;
  opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.bz-rail__card.is-center .bz-rail__meta{opacity:1;transform:none}
.bz-rail__name{font-size:var(--fs-lg);font-weight:800;color:var(--bz-ink);margin:0}
.bz-rail__tag{font-size:var(--fs-xs);color:var(--bz-muted);margin:4px 0 0}
.bz-rail__price{display:inline-block;margin-top:8px;font-size:var(--fs-sm);
  font-weight:800;color:var(--bz-red)}

@media (max-width:768px){
  .bz-rail__card{flex-basis:220px;width:220px}
  .bz-rail__card.is-center{transform:scale(1.06)}
}
/* 접근성: 애니메이션 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  .bz-rail__track{animation:none!important}
  .bz-rail__card{transition:none}
}

/* 통계 — 요구사항: 글자 크기 통일 */
.bz-stats{display:flex;justify-content:center;gap:64px;margin-top:44px;flex-wrap:wrap}
.bz-stats__item{text-align:center;min-width:120px}
.bz-stats__num{display:block;font-size:var(--fs-2xl);font-weight:800;
  color:var(--bz-ink);line-height:1.2;font-variant-numeric:tabular-nums}
.bz-stats__label{display:block;font-size:var(--fs-sm);color:var(--bz-muted);margin-top:6px}
@media (max-width:768px){.bz-stats{gap:32px}}

/* --------------------------------------------------------------------------
   3. 비즈니스 올인원 — 다중선택 + 실시간 견적
   -------------------------------------------------------------------------- */
.bz-allinone{background:var(--bz-soft);border-radius:40px}
.bz-allinone__head{text-align:center;max-width:44em;margin:0 auto 40px}
.bz-allinone__head p{margin-top:16px}

.bz-combo{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
@media (max-width:960px){.bz-combo{grid-template-columns:1fr}}

.bz-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}

/* 선택 카드 — 체크박스 기반(JS 없이도 동작) */
.bz-pick{position:relative;display:block;cursor:pointer}
.bz-pick input{position:absolute;opacity:0;width:0;height:0}
.bz-pick__box{display:flex;flex-direction:column;gap:8px;height:100%;
  padding:22px 20px;border:2px solid var(--bz-line);border-radius:var(--bz-radius);
  background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.bz-pick:hover .bz-pick__box{transform:translateY(-3px);box-shadow:var(--bz-shadow)}
.bz-pick input:checked + .bz-pick__box{border-color:var(--bz-teal);
  box-shadow:0 0 0 4px var(--bz-teal-soft)}
.bz-pick input:focus-visible + .bz-pick__box{outline:3px solid var(--bz-teal);outline-offset:2px}

.bz-pick__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bz-pick__name{font-size:var(--fs-lg);font-weight:800;color:var(--bz-ink)}
.bz-pick__check{width:24px;height:24px;flex:none;border-radius:50%;
  border:2px solid var(--bz-line);display:grid;place-items:center;
  color:transparent;font-size:13px;font-weight:900;transition:all .2s ease}
.bz-pick input:checked + .bz-pick__box .bz-pick__check{
  background:var(--bz-teal);border-color:var(--bz-teal);color:#fff}
.bz-pick__desc{font-size:var(--fs-xs);color:var(--bz-muted);line-height:1.6}
.bz-pick__price{margin-top:auto;font-size:var(--fs-sm);font-weight:800;color:var(--bz-ink)}
.bz-pick__price small{font-weight:500;color:var(--bz-muted)}

/* 대표 상품 강조 */
.bz-pick--feature .bz-pick__box{border-color:var(--bz-teal);background:linear-gradient(180deg,var(--bz-teal-soft),#fff)}
.bz-pick__ribbon{position:absolute;top:-9px;left:18px;z-index:1;padding:3px 10px;border-radius:999px;
  background:var(--bz-red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em}

/* 견적 패널 */
.bz-quote{position:sticky;top:88px;padding:26px;border-radius:var(--bz-radius);
  background:var(--bz-ink);color:#fff}
.bz-quote__title{font-size:var(--fs-lg);font-weight:800;margin:0 0 4px}
.bz-quote__sub{font-size:var(--fs-xs);color:#9CA3AF;margin:0 0 18px}
.bz-quote__list{list-style:none;margin:0 0 16px;padding:0;min-height:96px}
.bz-quote__list li{display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.16);font-size:var(--fs-sm)}
.bz-quote__list li span:last-child{font-weight:700;white-space:nowrap}
.bz-quote__empty{color:#9CA3AF;font-size:var(--fs-sm);padding:9px 0}
.bz-quote__discount{display:flex;justify-content:space-between;padding:9px 0;
  color:#7DD3E0;font-size:var(--fs-sm);font-weight:700}
.bz-quote__total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:14px;margin-top:6px;border-top:2px solid rgba(255,255,255,.24)}
.bz-quote__total b{font-size:var(--fs-xl);font-weight:800}
.bz-quote__note{font-size:11px;color:#9CA3AF;margin:12px 0 0;line-height:1.6}
.bz-quote .bz-btn{margin-top:16px}
@media (max-width:960px){.bz-quote{position:static}}

/* 캐러셀은 뷰포트 폭을 넘지 않는다 (트랙이 max-content라 부모 제한 필수) */
.bz-rail{max-width:100%;width:100%}

/* 이 파일은 메인(index.php)에서만 로드된다.
   따라서 여기서 컨테이너 폭 제한을 풀면 메인에만 적용된다(JS 불필요). */
#container{ width:100%!important; max-width:100%!important; margin:0!important; min-height:0!important }
#container > .bz-section:last-of-type{ padding-bottom:88px }