@charset "utf-8";
/* ============================================================================
   zbc-component.css  v3.2   집반찬연구소 랜딩 컴포넌트
   zbc-token.css 를 먼저 불러와야 합니다.
   ============================================================================ */

/* ── 섹션 ──────────────────────────────────────────────────── */
/* display:flow-root — 자식의 margin-bottom 이 섹션 밖으로 새어나가
   섹션 배경이 그 여백을 못 덮는 문제를 막는다. BFC 를 만들되 스크롤
   컨테이너는 만들지 않으므로 스크롤 애니메이션에 영향이 없다.
   overflow:hidden 으로 되돌리면 애니메이션이 죽는다(forbidden.md 8번). */
.zbc-sec{display:flow-root;overflow:hidden;}
@supports (overflow:clip){.zbc-sec{overflow:clip;}}
.zbc-sec--warm {background:var(--zbc-bg-warm);}
.zbc-sec--warm2{background:var(--zbc-warm-100);}
.zbc-sec--soft {background:var(--zbc-bg-soft);}
.zbc-sec--white{background:var(--zbc-gray-0);}
.zbc-sec--brand{background:var(--zbc-bg-brand);}
.zbc-sec--steel{background:linear-gradient(90deg,#dcdde1,#d6d7d9);}
.zbc-pad{padding:15.42% 8.89% 0;}
.zbc-pad--hero{padding:12.6% 8.9% 0;}
.zbc-pad--tight{padding:12.917% 4% 0;}
.zbc-center{text-align:center;}

/* ── 타이포 ────────────────────────────────────────────────── */
.zbc-eyebrow{margin:0;font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-base);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-900);}
.zbc-h1{margin:2.365% 0 0;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-8);
  line-height:var(--zbc-lh-snug);letter-spacing:var(--zbc-ls-tight);color:#2a2a2a;}
.zbc-h1--hero{margin:3.05% 0 0;line-height:1.24;color:var(--zbc-gray-950);}
.zbc-h2{margin:0;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-7);
  line-height:var(--zbc-lh-base);letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-900);}
.zbc-h3{margin:0;font-weight:var(--zbc-fw-sb);font-size:var(--zbc-fs-6);
  line-height:var(--zbc-lh-snug);letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-950);}
.zbc-lead{margin:4.2% 0 0;font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-base);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-900);}
.zbc-lead--tight{margin:1.917% 0 0;}
.zbc-sub{margin:2% 0 0;font-size:var(--zbc-fs-4);line-height:1.4;
  letter-spacing:var(--zbc-ls-normal);color:var(--zbc-highlight);}
.zbc-onbrand{color:var(--zbc-text-on-brand);}
.zbc-mark{display:inline-block;padding:0 .11em;margin-left:-.11em;
  background-image:linear-gradient(transparent 51%,var(--zbc-marker) 51%);
  background-repeat:no-repeat;background-size:100% 100%;}
/* .zbc-mark 애니메이션은 zbc-token.css 모션 라이브러리로 이관 */
.zbc-em{color:var(--zbc-urgent);}
.zbc-brandtx{color:var(--zbc-brand);}
.zbc-gap{display:inline-block;width:.35em;}

/* ── 태그 ──────────────────────────────────────────────────── */
.zbc-tag{display:inline-block;margin-top:8.05%;background:var(--zbc-urgent);
  color:var(--zbc-urgent-fg);font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-2);
  line-height:var(--zbc-lh-flat);letter-spacing:var(--zbc-ls-normal);
  border-radius:var(--zbc-r-full);padding:.58em .85em;}

/* ── 카드 ──────────────────────────────────────────────────── */
.zbc-card{background:var(--zbc-surface-veil);border-radius:var(--zbc-r-3);
  padding:3.26% 7.2% 3.57%;}
.zbc-card--flat{padding:0;overflow:hidden;}

/* ── 쿠폰 행 ───────────────────────────────────────────────── */
.zbc-cp{display:flex;align-items:center;gap:2.5%;padding:2.6% 0;}
.zbc-cp + .zbc-cp{border-top:1px solid var(--zbc-line-brand);}
.zbc-cp__ico{flex:none;width:clamp(44px,15.7vw,113px);height:clamp(44px,15.7vw,113px);
  border-radius:50%;background:var(--zbc-bg-warm);display:flex;align-items:center;
  justify-content:center;font-size:var(--zbc-icon-lg);line-height:var(--zbc-lh-flat);}
.zbc-cp__body{flex:1;min-width:0;}
.zbc-cp__when{margin:0;font-size:var(--zbc-fs-3);line-height:var(--zbc-lh-tight);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-text-sub);white-space:nowrap;}
.zbc-cp__name{margin:.15em 0 0;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-4);
  line-height:var(--zbc-lh-tight);letter-spacing:var(--zbc-ls-tight);
  color:var(--zbc-text);white-space:nowrap;}
.zbc-cp__amt{flex:none;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-5);
  line-height:var(--zbc-lh-tight);letter-spacing:var(--zbc-ls-tight);
  color:var(--zbc-brand);white-space:nowrap;}
/* 녹색 배경 위 변형 */
.zbc-cp--onbrand{padding:2.838% 7.354% 2.838% 7.224%;gap:0;}
.zbc-cp--onbrand .zbc-cp__ico{width:20.8%;height:auto;aspect-ratio:1.0678;
  background:var(--zbc-gray-0);}
.zbc-cp--onbrand .zbc-cp__body{margin-left:4.283%;}
.zbc-divider{height:1px;background:var(--zbc-line);margin:0 7.28% 0 7.19%;}

/* ── 요약 바 ───────────────────────────────────────────────── */
.zbc-sum{display:flex;align-items:center;justify-content:space-between;gap:2%;
  background:var(--zbc-surface);border:1px solid var(--zbc-brand);
  border-radius:var(--zbc-r-3);padding:4.5% 7.2%;}
.zbc-sum__k{font-size:var(--zbc-fs-4);color:var(--zbc-text-sub);white-space:nowrap;}
.zbc-sum__v{font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-5);
  color:var(--zbc-price-off);white-space:nowrap;}

/* ── CTA ───────────────────────────────────────────────────── */
.zbc-ctaWrap{padding:13.9% 9.85% 0;}
.zbc-ctaWrap--end{padding:13.314% 9.861% 11.528%;}
.zbc-cta{display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2.5vw,18px);min-height:var(--zbc-tap-min);
  background:var(--zbc-cta-bg);color:var(--zbc-cta-fg);
  font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-6);
  line-height:1.4;letter-spacing:var(--zbc-ls-normal);
  border-radius:var(--zbc-cta-radius);padding:clamp(14px,3.875vw,27.9px) 0;
  box-shadow:var(--zbc-cta-shadow);}
.zbc-cta--alt{background:var(--zbc-cta-alt-bg);color:var(--zbc-cta-alt-fg);}
.zbc-cta__arrow{flex:none;width:clamp(7px,1.875vw,13.5px);height:auto;}

/* ── 통계 ──────────────────────────────────────────────────── */
.zbc-stats{display:flex;gap:2.72%;margin:16.53% 4.86% 0;}
.zbc-stat{flex:1;min-width:0;background:#ebf3ef;border-radius:var(--zbc-r-4);
  padding:5.5% 0;text-align:center;}
.zbc-stat__n{font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-5);
  line-height:var(--zbc-lh-snug);letter-spacing:var(--zbc-ls-tight);
  color:var(--zbc-brand);white-space:nowrap;}
.zbc-stat__l{margin:4% 0 0;font-size:var(--zbc-fs-2);line-height:var(--zbc-lh-base);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-900);white-space:nowrap;}

/* ── 체크리스트 ────────────────────────────────────────────── */
.zbc-checks{margin:12.75% 8.89% 0;}
.zbc-check{display:flex;align-items:center;}
.zbc-check + .zbc-check{margin-top:8.064%;}
.zbc-check__box{flex:none;position:relative;width:14.332%;padding-bottom:6.801%;}
.zbc-check__sq{position:absolute;left:12.73%;top:0;width:48.8%;height:100%;
  border:clamp(2px,.625vw,4.5px) solid #434343;}
.zbc-check__mk{position:absolute;left:0;top:-78.24%;width:100%;height:auto;}
.zbc-check__tx{flex:1;min-width:0;margin-left:3.885%;font-weight:var(--zbc-fw-md);
  font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-base);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-950);}

/* ── 메시지 박스 ───────────────────────────────────────────── */
.zbc-msg{margin:12.72% 5.69% 13.33%;background:var(--zbc-brand);
  border-radius:var(--zbc-r-4);padding:7.598% 6.667% 8.526%;}
.zbc-msg__t{margin:0;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-6);
  line-height:1.35;letter-spacing:.01em;color:#f6f6f6;}
.zbc-msg__d{margin:2.803% 0 0;font-size:var(--zbc-fs-5);line-height:1.35;
  letter-spacing:.01em;color:#f7f7f7;}

/* ── 인증 알약 ─────────────────────────────────────────────── */
.zbc-pill{display:inline-flex;align-items:center;gap:.4286em;
  background:var(--zbc-green-50);border:clamp(1px,.325vw,2.34px) solid var(--zbc-line-accent);
  border-radius:var(--zbc-r-full);padding:.4643em 1.1429em;
  box-shadow:var(--zbc-sh-1);font-weight:var(--zbc-fw-b);
  font-size:var(--zbc-fs-5);line-height:var(--zbc-lh-flat);
  letter-spacing:var(--zbc-ls-normal);color:var(--zbc-trust-fg);white-space:nowrap;}
.zbc-pill__ico{flex:none;width:1.7143em;height:1.7143em;}
.zbc-pill + .zbc-pill{margin-top:.6349em;}
.zbc-pill--sm{font-size:var(--zbc-fs-3);}
.zbc-pills--c{text-align:center;}
.zbc-pills--c .zbc-pill{margin-top:0;}
.zbc-pills--c > div + div{margin-top:4.964%;}

/* ── 번호 배지 · 이유 카드 ─────────────────────────────────── */
.zbc-num{flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--zbc-brand);border-radius:var(--zbc-r-1);
  font-weight:var(--zbc-fw-b);font-size:clamp(17px,5.435vw,39.13px);
  line-height:var(--zbc-lh-flat);color:var(--zbc-green-50);
  min-width:1.4286em;padding:.2143em .3571em;}
.zbc-num--soft{background:#e6eee7;color:var(--zbc-brand);}
.zbc-why{margin-left:5.556%;margin-right:5.556%;background:var(--zbc-surface);
  border-radius:var(--zbc-r-4);padding:7.222% 5.556% 5%;
  display:flex;align-items:flex-start;}
.zbc-why + .zbc-why{margin-top:2.917%;}
.zbc-why--tall{padding-bottom:6.944%;}
.zbc-why__body{flex:1;min-width:0;margin-top:-2.821%;margin-left:6.982%;}
.zbc-why__t{font-size:var(--zbc-fs-5);font-weight:var(--zbc-fw-b);
  line-height:var(--zbc-lh-base);letter-spacing:var(--zbc-ls-tight);color:#000;}
.zbc-why__d{margin:.3643em 0 0;font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-base);
  letter-spacing:var(--zbc-ls-tight);color:#000;}

/* ── 스와이프 캐러셀 ───────────────────────────────────────── */
.zbc-tl{view-timeline-name:--zbc-cw;view-timeline-axis:block;}
.zbc-sw{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:5.56% 0;}
.zbc-sw::-webkit-scrollbar{display:none;}
@media (hover:hover) and (pointer:fine){
  .zbc-sw{scrollbar-width:thin;scrollbar-color:var(--zbc-green-200) transparent;
    padding-bottom:3%;scroll-behavior:smooth;}
  .zbc-sw::-webkit-scrollbar{display:block;height:10px;}
  .zbc-sw::-webkit-scrollbar-track{background:transparent;}
  .zbc-sw::-webkit-scrollbar-thumb{background:var(--zbc-green-200);border-radius:99px;}
  .zbc-sw::-webkit-scrollbar-thumb:hover{background:var(--zbc-green-500);}
}
.zbc-sw__in{display:flex;gap:1.39%;min-width:100%;}
.zbc-sl{flex:0 0 80.56%;max-width:80.56%;scroll-snap-align:center;
  background:#f7f7f7;border-radius:var(--zbc-r-5);padding:7.5% .9375% 8.424%;}
.zbc-sl:first-child{margin-left:1.39%;}
.zbc-sl:last-child{margin-right:1.39%;}
.zbc-sl__t{margin-left:3.503%;font-weight:var(--zbc-fw-sb);font-size:var(--zbc-fs-7);
  line-height:var(--zbc-lh-snug);letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-950);}
.zbc-sl__list{margin-top:4%;background:var(--zbc-surface);
  border-radius:clamp(15px,6.23vw,44.857px);padding:5.357%;}

/* ── 상품 카드 ─────────────────────────────────────────────── */
.zbc-pd{display:flex;align-items:center;}
.zbc-pd + .zbc-pd{margin-top:4.396%;}
.zbc-pd__th{flex:none;width:32.97%;position:relative;
  border-radius:var(--zbc-r-2);overflow:hidden;background:var(--zbc-gray-200);}
.zbc-pd__sq{padding-bottom:100%;}
.zbc-pd__th img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.zbc-pd__rk{position:absolute;left:4.46%;top:4.44%;width:28.87%;padding-bottom:28.87%;}
.zbc-pd__rk > span{position:absolute;left:0;top:0;right:0;bottom:0;
  border-radius:var(--zbc-r-1);display:flex;align-items:center;justify-content:center;
  font-weight:var(--zbc-fw-b);font-size:clamp(13px,4.465vw,32.15px);
  line-height:var(--zbc-lh-flat);color:var(--zbc-gray-0);background:var(--zbc-green-900);}
.zbc-rk2 > span{background:var(--zbc-green-600);}
.zbc-rk3 > span{background:var(--zbc-green-400);border-radius:clamp(6px,1.79vw,12.86px);}
.zbc-pd__info{flex:1;min-width:0;margin-left:5.896%;}
.zbc-chip{display:inline-block;font-weight:var(--zbc-fw-sb);font-size:var(--zbc-fs-2);
  line-height:var(--zbc-lh-flat);border-radius:var(--zbc-r-1);padding:.2em .3em .3em;
  background:var(--zbc-trust-bg);color:var(--zbc-trust-fg);}
.zbc-chip + .zbc-chip{margin-left:.4em;background:var(--zbc-info-bg);
  color:var(--zbc-info-fg);border-radius:var(--zbc-r-2);}
.zbc-chips{line-height:0;}
.zbc-pd__nm{margin:.224em 0 0;font-weight:var(--zbc-fw-sb);font-size:var(--zbc-fs-5);
  line-height:1.4;letter-spacing:var(--zbc-ls-tight);color:var(--zbc-gray-950);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zbc-pd__ds{margin:.154em 0 0;font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-tight);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-price-was);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zbc-pd__pr{margin:.462em 0 0;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-4);
  line-height:var(--zbc-lh-flat);color:var(--zbc-price-now);}

/* ── 가격표 ────────────────────────────────────────────────── */
.zbc-tbl{margin:7.047% 5.968% 0;border-radius:clamp(4px,1.1vw,7.933px);overflow:hidden;}
.zbc-tbl__hd{display:flex;background:var(--zbc-brand);}
.zbc-tbl__hd > div{padding:2.5% 0;font-size:var(--zbc-fs-3);font-weight:var(--zbc-fw-sb);
  line-height:var(--zbc-lh-tight);color:var(--zbc-gray-0);text-align:center;}
.zbc-tbl__r{display:flex;align-items:center;background:var(--zbc-surface);padding:4.12% 0;}
.zbc-tbl__r + .zbc-tbl__r{border-top:1px solid var(--zbc-line-soft);}
.zbc-c1{width:33.13%;}.zbc-c2{width:34.21%;}.zbc-c3{width:32.66%;}
.zbc-tbl__nm{font-size:var(--zbc-fs-3);font-weight:var(--zbc-fw-sb);
  line-height:var(--zbc-lh-tight);color:#737373;text-align:center;}
.zbc-tbl__was{font-size:var(--zbc-fs-1);font-weight:var(--zbc-fw-b);line-height:1.4;
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-price-was);text-decoration:line-through;}
.zbc-tbl__now{margin-top:.13em;font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-4);
  line-height:var(--zbc-lh-tight);color:var(--zbc-price-now);}
.zbc-tbl__off{font-size:var(--zbc-fs-5);font-weight:var(--zbc-fw-sb);
  line-height:var(--zbc-lh-tight);color:var(--zbc-price-off);text-align:center;}

/* ── 혜택 박스 ─────────────────────────────────────────────── */
.zbc-benefit{background:var(--zbc-brand);border-radius:var(--zbc-r-3);
  display:flex;align-items:center;justify-content:space-between;}
.zbc-benefit__k{font-size:var(--zbc-fs-5);line-height:var(--zbc-lh-tight);
  color:#c5c5c5;white-space:nowrap;}
.zbc-benefit__v{font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-5);
  line-height:var(--zbc-lh-tight);color:var(--zbc-gray-0);white-space:nowrap;}

/* ── 그라데이션 마감 · 사진 슬롯 ───────────────────────────── */
.zbc-fade{padding-bottom:32%;
  background:linear-gradient(160deg,var(--zbc-warm-200) 0%,#eeecdf 45%,var(--zbc-warm-300) 100%);}
.zbc-slot{position:relative;overflow:hidden;background:#e9e9e9;}
.zbc-slot > img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.zbc-ratio{position:relative;background:var(--zbc-gray-100);
  border-radius:var(--zbc-r-3);overflow:hidden;}
.zbc-inner{position:absolute;left:0;top:0;right:0;bottom:0;}

/* ── 리뷰 인용 ─────────────────────────────────────────────── */
.zbc-q{font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-quote);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-text);}
.zbc-q__star{margin:.072em 0 0;font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-tight);
  letter-spacing:var(--zbc-ls-wide);color:var(--zbc-star);white-space:nowrap;}
.zbc-q__who{margin:.4em 0 0;font-size:var(--zbc-fs-3);line-height:var(--zbc-lh-tight);
  letter-spacing:var(--zbc-ls-normal);color:var(--zbc-text);}
.zbc-q__who--lg{margin:.358em 0 0;font-size:var(--zbc-fs-4);}
/* ── 리드(강조 문단) ───────────────────────────────────────── */
.zbc-lead2{margin:11.18% 5.83% 0;font-size:var(--zbc-fs-6);line-height:var(--zbc-lh-tight);
  letter-spacing:var(--zbc-ls-x);color:var(--zbc-text);}
/* ── 정기식단 카드 텍스트 ──────────────────────────────────── */
.zbc-fx{position:absolute;left:17.48%;white-space:nowrap;}
.zbc-fx--t{font-size:var(--zbc-fs-5);font-weight:var(--zbc-fw-b);
  line-height:var(--zbc-lh-base);letter-spacing:var(--zbc-ls-tight);color:var(--zbc-text);}
.zbc-fx--d{font-size:var(--zbc-fs-4);line-height:var(--zbc-lh-base);
  letter-spacing:var(--zbc-ls-tight);color:var(--zbc-text);}
.zbc-why__t,.zbc-why__d{color:var(--zbc-text);}


/* ── 게시판 스킨 오버라이드 (2026-08-13 추가) ────────────────────────
   [문제] 모바일(m2) 스킨의 .news-card 에 overflow-x:hidden 이 걸려 있고,
          CSS 규칙상 한 축이 visible 이 아니면 나머지 축이 auto 로 승격되어
          .news-card 가 "스크롤 컨테이너"가 된다.
          animation-timeline:view() 는 가장 가까운 스크롤 컨테이너를 기준으로
          진행도를 계산하는데, .news-card 는 실제로 스크롤되지 않으므로
          진행도가 고정되고 등장 애니메이션이 전부 죽는다.
          (PC 스킨은 body 에 걸려 있어 뷰포트로 전파되므로 정상 동작한다.)
   [해결] overflow-x:clip 은 잘라내되 스크롤 컨테이너를 만들지 않는다.
          :has() 로 우리 랜딩(.zbc)이 들어있는 카드에만 적용해 스킨 전체에
          영향을 주지 않는다. 미지원 브라우저에서는 규칙이 통째로 무시되어
          현재 상태(애니메이션 없음)로 안전하게 폴백된다.
   -------------------------------------------------------------------- */
@supports (overflow: clip) and selector(:has(*)){
  .news-card:has(.zbc){overflow-x:clip;overflow-y:visible;}
}


/* ── 숫자 강조 색 (토큰이 아니라 여기 둔다 — 컴포넌트 색 규칙보다 뒤여야 이긴다) ── */
.zbc-num-em{color:var(--zbc-urgent);}


/* ── 요약+CTA 통합 버튼 ── 혜택 요약과 행동 유도를 한 덩어리로 묶는다 ── */
/* 일반 CTA 와 세로 크기를 똑같이 맞춘다 (테두리 2px 만큼 패딩에서 뺌) */
.zbc-sumcta{display:flex;align-items:center;justify-content:space-between;gap:2.5%;
  background:var(--zbc-surface);border:2px solid var(--zbc-brand);
  border-radius:var(--zbc-cta-radius);box-shadow:var(--zbc-cta-shadow);
  padding:calc(clamp(14px,3.875vw,27.9px) - 2px) 5.4%;
  min-height:calc(var(--zbc-fs-6) * 1.4 + 2 * clamp(14px,3.875vw,27.9px));
  line-height:1.4;}
.zbc-sumcta__k{font-size:var(--zbc-fs-3);color:var(--zbc-text-sub);white-space:nowrap;}
.zbc-sumcta__v{font-weight:var(--zbc-fw-b);font-size:var(--zbc-fs-5);
  color:var(--zbc-price-off);white-space:nowrap;}
.zbc-sumcta__arrow{flex:none;width:clamp(7px,1.875vw,13.5px);height:auto;color:var(--zbc-brand);}

/* ══════════════════════════════════════════════════════════════════════
   배송지 확인 · {**check_delivery**} 치환코드 전용
   게시판 본문에서 섹션 안쪽에 이렇게 넣는다:
     <div class="zbc zbc-sec"><div class="zbc-pad">
        ... 제목 ...
        <div class="zbc-dlv">{**check_delivery**}</div>
     </div></div>
   좌우 여백은 .zbc-pad 가 이미 잡으므로 여기서는 0 으로 둔다.
   (게시판 본문의 <style> 은 문자로 이스케이프되므로 규칙은 반드시 이 파일에 둔다)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 치환코드가 딸고 오는 군더더기 숨기기 ─────────────────────── */
.zbc-dlv #search_area .search_inp h2,
.zbc-dlv #search_area .search_inp h3,
.zbc-dlv #search_area .search_inp .img_area,
.zbc-dlv #search_area .warn,
.zbc-dlv #search_area .news-card__content{display:none;}

/* ── 2. 폭·여백 ──────────────────────────────────────────────────
   섹션(.zbc)은 max-width:720px 를 받는데 .zbc-dlv 에는 그 클래스가 없어서
   PC 에서 혼자 넓어졌다. 같은 폭·같은 좌우 여백을 직접 맞춘다.
   본문의 인라인 style(max-width:1024px) 을 이겨야 해서 !important 를 쓴다.
   섹션 안(.zbc-pad)에 넣은 경우에는 .zbc-pad 가 이미 여백을 주므로 해제한다. */
.zbc-dlv{
  display:flow-root;box-sizing:border-box;
  max-width:720px !important;
  margin:clamp(26px,7.5vw,52px) auto 0 !important;
  padding-bottom:clamp(30px,8.5vw,60px);
}
/* 좌우 여백은 #search_area 에 준다.
   .zbc-dlv 에 %로 주면 부모(800px) 기준으로 계산돼 섹션(720px)과 어긋난다. */
.zbc-dlv #search_area{padding:0 8.89%;box-sizing:border-box;}
.zbc-pad .zbc-dlv{max-width:none !important;}
.zbc-pad .zbc-dlv #search_area{padding:0;}
.zbc-dlv #search_area .gray_bg{background:transparent;border:0;margin:0;padding:0;}
.zbc-dlv #search_area .search_inp{border:0;margin:0;padding:0;text-align:left;}

/* ── 3. 입력창 — 폭 제한을 풀어야 버튼이 입력창에 붙는다 ─────────── */
/* 검색창 = 콘텐츠 가로폭의 70%, 가운데 정렬 */
/* 폭 = CTA 버튼과 동일하게 맞춘다.
   .zbc-pad 좌우여백 8.89% → 콘텐츠 = 폭 x 0.8222
   .zbc-ctaWrap 좌우여백 9.85% → 버튼   = 폭 x 0.8030
   0.8030 / 0.8222 = 0.9766  → #search_area 기준 97.66% 가 곧 CTA 버튼 폭이다.
   (뷰포트 폭이 달라져도 둘 다 같은 기준의 %라 항상 일치한다) */
.zbc-dlv #search_area .search_inp .inp_area{
  width:97.66%;max-width:none;margin:0 auto;text-align:left;position:relative;
}
.zbc-dlv #search_area .search_inp .inp_area input[type=text]{
  width:100% !important;max-width:none !important;
  height:clamp(48px,13.3vw,56px) !important;line-height:clamp(46px,13.3vw,54px) !important;
  padding:0 clamp(52px,14vw,60px) 0 clamp(14px,4.1vw,18px);
  box-sizing:border-box;vertical-align:middle;
  border:1px solid var(--zbc-line-soft) !important;border-radius:var(--zbc-r-3);
  background:var(--zbc-gray-0);
  font-size:var(--zbc-fs-3);color:var(--zbc-gray-900);
}
.zbc-dlv #search_area .search_inp .inp_area input[type=text]::placeholder{
  color:var(--zbc-gray-300);font-size:var(--zbc-fs-3);line-height:normal;
}
.zbc-dlv #search_area .search_inp .inp_area input[type=button]{
  position:absolute;right:clamp(6px,1.8vw,9px);top:50%;transform:translateY(-50%);
  width:clamp(34px,9.7vw,42px) !important;height:clamp(34px,9.7vw,42px) !important;
  border-radius:var(--zbc-r-2) !important;
  background-size:clamp(16px,4.6vw,20px) auto !important;
}
.zbc-dlv #search_area .search_inp span{
  display:block;width:auto;margin:10px 0 0;
  font-size:var(--zbc-fs-2);line-height:1.5;color:var(--zbc-amber-600);
}

/* ── 4. 우편번호 검색 레이어 ─────────────────────────────────────── */
.zbc-dlv #postwrap{
  margin:clamp(16px,4.5vw,28px) 0 0 !important;
  border:1px solid var(--zbc-line-soft) !important;
  border-radius:var(--zbc-r-3) !important;overflow:hidden !important;
}

/* ── 5. 검색 결과 ────────────────────────────────────────────────── */
.zbc-dlv #search_area .search_result{
  padding-top:0;margin-top:clamp(30px,8.5vw,58px);text-align:left;
}
.zbc-dlv #search_area .search_result .result_addr_box{
  text-align:left;font-size:var(--zbc-fs-2);font-weight:var(--zbc-fw-b);
  color:var(--zbc-gray-500);letter-spacing:-.01em;
}
.zbc-dlv #search_area .search_result .result_addr{
  margin-top:10px;padding:clamp(14px,4.2vw,26px) clamp(14px,4.4vw,28px);
  background:var(--zbc-gray-0);
  border:1px solid var(--zbc-line-soft);border-radius:var(--zbc-r-3);
  font-size:var(--zbc-fs-3);font-weight:var(--zbc-fw-md);
  color:var(--zbc-gray-700);line-height:1.5;letter-spacing:-.01em;
}
.zbc-dlv #search_area .search_result table{
  width:100%;margin-top:clamp(12px,3.6vw,22px);
  table-layout:fixed;border-collapse:separate;border-spacing:0;
  border:1px solid var(--zbc-line-soft);border-radius:var(--zbc-r-3);overflow:hidden;
}
.zbc-dlv #search_area .search_result table th{
  width:50%;height:auto;padding:clamp(11px,3.4vw,20px) 0;border:0;
  background:var(--zbc-brand);color:var(--zbc-text-on-brand);
  font-size:var(--zbc-fs-2);font-weight:var(--zbc-fw-b);
  text-align:center;letter-spacing:-.01em;
}
.zbc-dlv #search_area .search_result table th + th{border-left:1px solid rgba(255,255,255,.18);}
.zbc-dlv #search_area .search_result table td{
  width:50%;height:auto;padding:clamp(15px,4.6vw,28px) 0;border:0;
  background:var(--zbc-gray-0);
  font-size:var(--zbc-fs-4);font-weight:var(--zbc-fw-b);
  text-align:center;letter-spacing:-.01em;color:var(--zbc-brand);
}
.zbc-dlv #search_area .search_result table td + td{border-left:1px solid var(--zbc-line-soft);}
.zbc-dlv #search_area .search_result table td.not{color:var(--zbc-gray-300);font-weight:var(--zbc-fw-b);}


/* ══════════════════════════════════════════════════════════════════════
   페이지 대표 제목 (히어로 전용)
   .zbc-h1 은 섹션 제목용 64px 스케일이다. 페이지 전체를 대표하는 한 문장은
   그보다 한 단계 큰 100px 을 쓴다. 페이지당 1개만 사용한다.
   주의: 규칙 블록 안에 한글 주석을 넣으면 EUC-KR 게시판에서 뒤 선언이 죽는다.
   ══════════════════════════════════════════════════════════════════════ */
.zbc-h0{
  margin:0;
  font-weight:var(--zbc-fw-b);
  font-size:clamp(44px,13.889vw,100px);
  line-height:1.35;
  letter-spacing:-0.04em;
  color:var(--zbc-gray-950);
}


/* ══════════════════════════════════════════════════════════════════════
   추석 랜딩(4450) 유틸 — 게시판 64KB 한도 때문에 인라인을 클래스로 뺀 것.
   숫자 = 피그마 720 기준 px. clamp 최소값은 320px 폭 기준.
   ══════════════════════════════════════════════════════════════════════ */
.zbc-f80{font-size:clamp(36px,11.111vw,80px);}
.zbc-f70{font-size:clamp(31px,9.722vw,70px);}
.zbc-f64{font-size:clamp(28px,8.889vw,64px);}
.zbc-f60{font-size:clamp(27px,8.333vw,60px);}
.zbc-f56_715{font-size:clamp(25px,7.877vw,56.715px);}
.zbc-f56{font-size:clamp(25px,7.778vw,56px);}
.zbc-f50_4{font-size:clamp(22px,7vw,50.4px);}
.zbc-f45{font-size:clamp(20px,6.25vw,45px);}
.zbc-f44{font-size:clamp(20px,6.111vw,44px);}
.zbc-f40{font-size:clamp(18px,5.556vw,40px);}
.zbc-f39_086{font-size:clamp(17px,5.429vw,39.086px);}
.zbc-f36_663{font-size:clamp(16px,5.092vw,36.663px);}
.zbc-f36{font-size:clamp(16px,5vw,36px);}
.zbc-f35_447{font-size:clamp(16px,4.923vw,35.447px);}
.zbc-f34_743{font-size:clamp(15px,4.826vw,34.743px);}
.zbc-f34{font-size:clamp(15px,4.722vw,34px);}
.zbc-f32_571{font-size:clamp(14px,4.524vw,32.571px);}
.zbc-f32{font-size:clamp(14px,4.444vw,32px);}
.zbc-f31_5{font-size:clamp(14px,4.375vw,31.5px);}
.zbc-f31_2{font-size:clamp(14px,4.333vw,31.2px);}
.zbc-f30_4{font-size:clamp(14px,4.222vw,30.4px);}
.zbc-f30{font-size:clamp(13px,4.167vw,30px);}
.zbc-f28_8{font-size:clamp(13px,4vw,28.8px);}
.zbc-f28{font-size:clamp(12px,3.889vw,28px);}
.zbc-f26_256{font-size:clamp(12px,3.647vw,26.256px);}
.zbc-f26{font-size:clamp(12px,3.611vw,26px);}
.zbc-f25_92{font-size:clamp(12px,3.6vw,25.92px);}
.zbc-f23_886{font-size:clamp(11px,3.318vw,23.886px);}
.zbc-f23_881{font-size:clamp(11px,3.317vw,23.881px);}
.zbc-f21_714{font-size:clamp(10px,3.016vw,21.714px);}
.zbc-f20_207{font-size:clamp(9px,2.807vw,20.207px);}
.zbc-f20{font-size:clamp(9px,2.778vw,20px);}
.zbc-f18{font-size:clamp(8px,2.5vw,18px);}
.zbc-f16{font-size:clamp(7px,2.222vw,16px);}
.zbc-f14{font-size:clamp(6px,1.944vw,14px);}
.zbc-f12_96{font-size:clamp(6px,1.8vw,12.96px);}
.zbc-f12{font-size:clamp(5px,1.667vw,12px);}
.zbc-nw{white-space:nowrap;}
.zbc-abs{position:absolute;left:0;top:0;right:0;bottom:0;}
.zbc-cta--chu{background-image:linear-gradient(170.909deg,rgb(107,147,101) 0%,rgb(13,102,33) 90.283%);position:relative;min-height:0;padding:0;aspect-ratio:640/104;height:auto;}


/* ============================================================
   스와이프 트랙 가로 스크롤바 (PC 조작 가능하게) - 2026-09-08 추가
   ============================================================ */
.zbc-swipe{scrollbar-width:thin;scrollbar-color:#cfcfcf transparent;}
.zbc-swipe::-webkit-scrollbar{height:8px;-webkit-appearance:none;}
.zbc-swipe::-webkit-scrollbar-track{background:transparent;}
.zbc-swipe::-webkit-scrollbar-thumb{background:#cfcfcf;border-radius:4px;}
.zbc-swipe::-webkit-scrollbar-thumb:hover{background:#b0b0b0;}