#section_wrap {
  width: 100%;

  color: #141414;

  font-family: 'Pretendard Variable';
  font-weight: 400;
  font-size: 0.9vw;
  letter-spacing: -1px;
  line-height: 1.3;

  margin-top: 5.4068vw;
}

#section_wrap section {
  position: relative;
  overflow: hidden;
  width: 100%;
}

img {
  pointer-events: none;
}

.container #ctt {
  display: none !important;
}

/* ===== 전역 기본 폰트 = Pretendard (그누보드 default.css 의 Malgun Gothic 을 덮음) =====
   default.css 가 custom.css 보다 나중 로드되므로, html 조합 셀렉터(specificity ↑)로 순서 무관 우선.
   .ria / .nnsq 등 폰트 클래스(specificity 더 높음)는 그대로 유지됨. */
html body,
html input,
html button,
html textarea,
html select {
  font-family: 'Pretendard Variable', 'Malgun Gothic', dotum, sans-serif;
}


/* ===== 관리자 게시판 스킨(.vst-*) 액센트 통일 : 파랑 #3235cd → 펫마트 옐로우 #ffcf1e =====
   전 게시판(brand_csr·main_shop·petmart_product … 13개)의 write/view 스킨이 공통 .vst-* 시스템을
   쓰되 액센트만 딴 프로젝트 톤(파랑)이라, 스킨마다 고치지 않고 여기서 body 접두 우선순위로 한 번에 통일.
   필드/레이아웃은 그대로 두고 '색'만 교체(순수 CSS override → 기능 무영향). */
body .vst-label i,
body .vst-guide-text b,
body .vst-file-label {
  color: #ffcf1e;
}

/* 카테고리 뱃지 : 옅은 배경+노랑글자(대비나쁨) → 노랑 뱃지+어두운 글자 */
body .vst-view-cate {
  background: #ffcf1e;
  color: #141414;
}

body .vst-input:focus,
body .vst-select:focus,
body .vst-textarea:focus {
  border-color: #ffcf1e;
  box-shadow: 0 0 0 3px rgba(255, 207, 30, .2);
}

body .vst-chk-label input {
  accent-color: #141414;
}

/* 제출/주요 버튼 : 옐로우 배경 + 어두운 글자(대비 확보) */
body .vst-btn-submit,
body .vst-btn-primary {
  background: #ffcf1e;
  color: #141414;
  border-color: #ffcf1e;
}

body .vst-btn-submit:hover,
body .vst-btn-primary:hover {
  background: #ffc400;
  color: #141414;
  border-color: #ffc400;
}

/* 추천버튼 / 파일링크 hover 파랑 → 옐로우톤 */
body .vst-btn-good:hover,
body .vst-btn-good.active {
  border-color: #ffcf1e;
  color: #a67c00;
  background: #fff7d6;
}

body .vst-btn-good:hover i,
body .vst-btn-good.active i {
  color: #ffcf1e;
}

body .vst-file-box a:hover {
  color: #a67c00;
}

/* ===== 전체 게시판 본문 이미지: 원본 크기 유지 + 본문 폭 초과 시에만 축소 =====
   reset.css 의 전역 img { width:100% } 때문에 작은 첨부/에디터 이미지까지 확대되는 현상을 방지합니다.
   width 는 원본 또는 에디터 지정값을 따르고, 최대 폭과 비율만 안전하게 제한합니다. */
body #bo_v_con img,
body #bo_v_img img,
body .vst-view-content img,
body #cpv .cpv_con img,
body #cpv .cpv_img img,
body #pdv_detail_con .pdv_detail_img {
  width: auto;
  max-width: 100% !important;
  height: auto !important;
}


/* -------------------------------------------------- 스와이퍼 -------------------------------------------------- */

.swiper {
  width: 100%;
  z-index: 0;
  margin: 0;
}

div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-wrapper.flow {
  pointer-events: none;
  transition-timing-function: linear;
}

/* ===== 공통 네비 + 페이지네이션 (.swiper_btn_wrap) — swiper-slide 스킬 §7 ===== */
.swiper_btn_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  user-select: none;
}

.swiper_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: all;
}

/* 호버 = 원형 선이 퍼져나가는 링 (컬러는 --sbtn-ring 로 섹션별 지정) */
.swiper_btn::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--sbtn-ring, #141414);
  border-radius: 50%;
  opacity: 0.3;
  transition: width 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.swiper_btn:hover::after {
  width: 180%;
}

/* 공통 nav 버튼(원) + 셰브론 — 색은 섹션별로 --sbtn-bg / --sbtn-chev / --sbtn-ring 지정 */
.swiper_navbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 27);
  height: calc(var(--px) * 27);
  border-radius: 50%;
  background: var(--sbtn-bg, #141414);
}

.swiper_chev {
  display: block;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  border-top: 2px solid var(--sbtn-chev, #fff);
  border-right: 2px solid var(--sbtn-chev, #fff);
}

.swiper_chev_prev {
  transform: rotate(-135deg);
  margin-left: calc(var(--px) * 2);
}

.swiper_chev_next {
  transform: rotate(45deg);
  margin-right: calc(var(--px) * 2);
}

/* ===== 공통 프로그레스바 (.swiper_prog) — 스와이퍼 위치 표시. 폭은 섹션에서 지정, 채움 width 는 JS ===== */
.swiper_prog {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 2);
  border-radius: 50vw;
  background: rgba(20, 20, 20, 0.15);
  overflow: hidden;
}

.swiper_prog_fill {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 2px;
  border-radius: 50vw;
  background: #141414;
  transition: width 0.4s ease;
}

.pgnt_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pgnt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4vw;
  opacity: 0.8;
}

.pgnt .swiper-pagination-total {
  opacity: 0.4;
}

.pgnt>span {
  min-width: calc(var(--px) * 11);
  text-align: center;
}

/* ===== 공통 클라이언트 페이지네이션 (.pet_paging) — prev/next 원 + 번호 + ... =====
   store con03 / franchise con12 등 공용. 번호(.pet_paging_num)·... (.pet_paging_dot) 는 JS 가 .pet_paging_nums 에 렌더.
   HTML: .pet_paging > (.pet_paging_prev.pet_paging_btn.cusor_p > span.swiper_chev.swiper_chev_prev)
                     + .pet_paging_nums (JS 렌더)
                     + (.pet_paging_next.pet_paging_btn.cusor_p > span.swiper_chev.swiper_chev_next)
   ※ 섹션 간격(margin-top)은 사용하는 섹션 클래스(.con03_paging / .con12_paging)에서 지정 */
.pet_paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 6);
}

/* prev/next = 흰 원 + 연회색 보더. 호버 시 보더만 진해짐 */
.pet_paging_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 39);
  height: calc(var(--px) * 39);
  border: 1px solid #dfdfdf;
  border-radius: 50%;
  background: #fff;
  --sbtn-chev: #141414;
  transition: border-color 0.25s ease;
}

.pet_paging_btn:hover {
  border-color: #141414;
}

.pet_paging_nums {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 4);
  margin: 0 calc(var(--px) * 8);
}

.pet_paging_num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 39);
  height: calc(var(--px) * 39);
  border-radius: 50%;
  border: 1px solid transparent;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  color: #767676;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.pet_paging_num:hover {
  color: #141414;
}

.pet_paging_num.on {
  background: #f8f4eb;
  color: #141414;
  font-weight: 700;
}

.pet_paging_dot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 39);
  color: #aaa;
  font-size: calc(var(--px) * 16);
}

/* ===== 공통 인섹션 탭 (.pet_tabs) — pill + 탭 + 패널 전환. brand con10 / franchise con12 등 공용 =====
   HTML: .pet_tabs > a.pet_tab[data-tab=key](.on) …  +  형제 .pet_tab_panel[data-panel=key](.on) …
   전환 JS = 공통 핸들러 (js/script.js). 패널 내부 콘텐츠(카드/그리드 등)는 각 섹션 클래스로 작성.
   ※ non-sticky 인섹션 탭. 상단 고정 서브네비는 별개(.sub_header/.sub_tab). */
.pet_tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 200);
  width: 96.6929%;
  height: calc(var(--px) * 68);
  border-radius: 50vw;
  background: #fff;
  border: 1px solid #d5d5d5;
}

.pet_tab {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #141414;
  font-size: calc(var(--px) * 19);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.pet_tab.on {
  font-weight: 800;
}

.pet_tab.on::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--px) * 4);
  background: #141414;
  border-radius: calc(var(--px) * 2);
}

/* 슬라이딩 인디케이터 — PC 미사용(활성=위 .on::after 밑줄). 모바일에서만 검은 알약으로 표시 */
.pet_tab_ind {
  display: none;
}

.pet_tab_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 3.5vw;
}

.pet_tab_panel:not(.on) {
  display: none;
}

/* ===== 공통 탭섹션 헤더 (하트 + 타이틀 + 설명) — brand con10 기준. 하트 크기(width/aspect)만 섹션에서 =====
   HTML: .pet_tabhead > (.pet_tabhead_heart>img) + p.pet_tabhead_tit(.nnsq.fw900) + p.pet_tabhead_desc */
.pet_tabhead {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.pet_tabhead_heart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pet_tabhead_tit {
  margin-top: calc(var(--px) * 18);
  color: #141414;
  font-size: calc(var(--px) * 40);
  line-height: 1.2;
  text-align: center;
}

.pet_tabhead_desc {
  margin-top: calc(var(--px) * 20);
  font-weight: 500;
  font-size: calc(var(--px) * 18);
  line-height: 1.4;
  text-align: center;
}

/* ===== 공통 카드 그리드 (썸네일 + 제목 · 3열 셀 100%/3 패턴, §4-1) — brand con10 기준 =====
   HTML: .pet_cardgrid > .pet_cardcell > .pet_card > (a.pet_card_img>img) + p.pet_card_subj
   ※ 그리드폭/카드폭/이미지높이·라운드가 다르면 섹션에서 override. 기본값 = brand con10 */
.pet_cardgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 1320);
  margin-top: 2.2vw;
  row-gap: 2.6vw;
  box-sizing: border-box;
}

.pet_cardcell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 3);
}

.pet_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 410);
}

.pet_card_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 12.598vw;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
}

.pet_card_img img {
  height: 100%;
  object-fit: cover;
}

.pet_card_subj {
  margin-top: calc(var(--px) * 16);
  color: #141414;
  font-weight: 500;
  font-size: calc(var(--px) * 18);
  line-height: 1.4;
  text-align: center;
}

/* -------------------------------------------------- 레이아웃 ----------------------------------------------------- */

.z01 {
  z-index: 1;
}

.z02 {
  z-index: 2;
}

.z03 {
  z-index: 3;
}

.z04 {
  z-index: 4;
}

.z05 {
  z-index: 5;
}

.z06 {
  z-index: 6;
}

.z07 {
  z-index: 7;
}

.z08 {
  z-index: 8;
}

.z09 {
  z-index: 9;
}

.z10 {
  z-index: 10;
}

.position_reset {
  left: unset;
  top: unset;
  right: unset;
  bottom: unset;
}

.ovhd {
  overflow: hidden;
}

.show {
  display: flex !important;
}

.absol {
  position: absolute;
}

.rltv {
  position: relative;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.wh100 {
  width: 100%;
  height: 100%;
}

.box_wd {
  width: calc(var(--px) * 1840);
}

.wd_unset {
  width: unset;
}

.wd_unset>img {
  width: unset;
  height: 100%;
}

.h100_obc {
  height: 100%;
  object-fit: cover;
}

.bd50 {
  border-radius: 50%;
}

.fcc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fdc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.fdcc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.fdccc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

*::selection {
  background: #3235cd;
  color: #fff;
}


/* --------------------------------------------------------------------------------------- */

.cusor_p {
  cursor: pointer;
}

.rot180 {
  transform: rotate(180deg);
}

.rvs_x {
  transform: scaleX(-1);
}



/* --------------------------------------------------------------------------------------- */

.c_fff {
  color: #fff;
}

.bg_fff {
  background: #fff;
}

.c_000 {
  color: #000;
}

.bg_000 {
  background: #000;
}

.c_111 {
  color: #111;
}

.bg_111 {
  background: #111;
}

.c_777 {
  color: #777;
}

.c_ddd {
  color: #ddd;
}

.c_blue {
  color: #3235cd;
}

.bg_blue {
  background: #3235cd;
}

.opa04 {
  opacity: 0.4;
}

.opa05 {
  opacity: 0.5;
}

.opa06 {
  opacity: 0.6;
}

.pet_btn {
  border-radius: 999px;
  height: 2.887vw;
  background: #121212;

  padding: 0 1.05vw;
  padding-left: 3.15vw;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.pet_btn_txt {
  font-size: 0.892vw;
  font-weight: 600;
  color: #fff;
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
}

.pet_btn_hv {
  position: absolute;
  width: 1.26vw;
  height: 1.26vw;
  border-radius: calc(var(--px) * 999);
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0.9vw;
  top: 0.8vw;
  z-index: 1;
  transition: 0.4s ease;
}

.pet_btn_arw {
  position: absolute;
  left: 1.215vw;
  z-index: 3;
  width: calc(var(--px) * 12);
  aspect-ratio: 12 / 10;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* PC(마우스) 전용 호버 — 터치기기에선 :hover 가 탭에 눌러붙어 슬라이드와 충돌하므로 hover 가능한 기기로 한정 */
@media (hover: hover) {
  .pet_btn:hover .pet_btn_hv {
    left: -1%;
    top: -1%;
    width: 102%;
    height: 102%;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }

  .pet_btn:hover .pet_btn_txt {
    color: #000;
  }
}

/* pet_btn 색상 변형 — 레이아웃/효과(pet_btn) 그대로, 색만 반전
   (흰 pill + 연회색 보더 / 검정 원 / 흰 화살표 / 검정 텍스트 → 호버 시 원이 차오르며 텍스트 흰색) */
.pet_btn2 {
  background: #fff;
  border: 1px solid #e2e2e2;
}

.pet_btn2 .pet_btn_hv {
  background: #141414;
}

.pet_btn2 .pet_btn_arw img {
  filter: brightness(0) invert(1);
}

.pet_btn2 .pet_btn_txt {
  color: #141414;
}

@media (hover: hover) {
  .pet_btn2:hover .pet_btn_txt {
    color: #fff;
  }
}

.txt_sdw {
  text-shadow: 0 0 1vw rgba(0, 0, 0, 0.16);
}


/* ==================== 공통 서치박스 (.pet_search) ====================
   레이아웃/비주얼만 공통. 기능(검색 대상·동작)은 페이지별 JS 에서 따로 관리.
   폭/여백/z-index 는 사용하는 섹션 클래스에서 override (예: con02_search / con03_search).
   HTML: div.pet_search > (input.pet_search_input + div.pet_search_btn > span.pet_search_ico) */
.pet_search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--px) * 76);
  padding: 0 calc(var(--px) * 12) 0 calc(var(--px) * 35);
  border: 1px solid var(--psearch-border, #ffd11e);
  border-radius: 999px;
  background: #fff;
  /* box-shadow: 0 calc(var(--px) * 8) calc(var(--px) * 22) rgba(0, 0, 0, 0.10); */
}

.pet_search_input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: calc(var(--px) * 19);
  font-weight: 400;
  color: #333;
  text-align: left;
}

.pet_search_input::placeholder {
  color: #aaa;
}

.pet_search_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 50);
  height: calc(var(--px) * 50);
  border-radius: 50%;
  background: var(--psearch-btn, #f8f4eb);
  cursor: pointer;
}

/* 호버 = 노란 원이 안쪽으로 쏙 줄어드는 모션 */
.pet_search_btn::before {
  content: "";
  position: absolute;
  width: calc(var(--px) * 50);
  height: calc(var(--px) * 50);
  border-radius: 50%;
  background: var(--psearch-btnhv, #ffd11e);
  transition: width 0.25s ease, height 0.25s ease;
}

.pet_search_btn:hover::before {
  width: calc(var(--px) * 28);
  height: calc(var(--px) * 28);
}

.pet_search_ico {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  border: 2px solid var(--psearch-ico, #222);
  border-radius: 50%;
  left: -0.05vw;
  top: -0.05vw;
}

.pet_search_ico::after {
  content: "";
  position: absolute;
  right: calc(var(--px) * -4);
  bottom: calc(var(--px) * -3);
  width: calc(var(--px) * 6);
  height: calc(var(--px) * 2);
  border-radius: 1px;
  background: var(--psearch-ico, #222);
  transform: rotate(45deg);
}


/* ==================== 공통 매장 카드 (.store_s*) — front con02 / store con02 공용 ====================
   흐르는 매장 슬라이드 카드. HTML: a.store_sitem > (img.bg_img + div.store_sinfo > p.store_slabel + p.store_sname)
   ※ con02_* 는 product 페이지 con02 와 클래스명이 겹쳐(전역 custom.css) 충돌 → 신규명 .store_s* 로 공통관리 */
.store_sitem {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: calc(var(--px) * 322);
  aspect-ratio: 322 / 297;
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
}

.store_sinfo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: calc(var(--px) * 18);
  padding-bottom: 1.9vw;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.store_slabel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 9) calc(var(--px) * 16);
  border-radius: calc(var(--px) * 999);
  background: #fff7da;
  font-size: calc(var(--px) * 17);
  font-weight: 700;
  color: #1a1a1a;
}

.store_sname {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  color: #fff;
  text-align: center;
}


/* ==================== 공통 제품 대분류 라벨 (.pet_catlabel) — front con03 / product con02·con03 공용 ====================
   제품 카드 우상단 노란 알약. HTML: div.pet_catlabel > p (부모 카드에 position:relative 필요)
   ※ 기본값 = 327px 카드 기준. 카드가 다르면 페이지 CSS 에서 .conNN_card .pet_catlabel 로 오버라이드 */
.pet_catlabel {
  position: absolute;
  right: calc(var(--px) * 22);
  top: calc(var(--px) * 21);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 18);
  border-radius: calc(var(--px) * 999);
  background: #ffe947;
}

.pet_catlabel p {
  font-size: calc(var(--px) * 15);
  font-weight: 700;
  color: #141414;
  white-space: nowrap;
}


/* ==================== 공통 네이비 NO.1 바 (.petmart_navy_bar) — front con01 / franchise 등 공용 ====================
   HTML: div.petmart_navy_bar > (p.petmart_navy_txt + div.petmart_navy_mas>img + div.petmart_navy_logo>img + div.petmart_navy_mas>img + p.petmart_navy_txt)
   ※ 텍스트만 페이지별로 교체. box_wd(1840) 폭 내장 → 별도 클래스 불필요 */
.petmart_navy_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1840);
  margin-top: 2.2vw;
  padding: 0.4vw 0;
  gap: 1.6vw;
  background: #0b1a2f;
  border-radius: calc(var(--px) * 40);
}

.petmart_navy_txt {
  font-size: calc(var(--px) * 20);
  font-weight: 600;
  color: #fff;
}

.petmart_navy_mas {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 92);
  aspect-ratio: 110 / 83;
  transform: translateY(16%);
}

.petmart_navy_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 151);
  aspect-ratio: 151 / 24;
}


/* ==================== 서브페이지 공통 히어로 (bcon1) — 하트 + ria 타이틀 + 서브 + 노란박스 ====================
   front 외 전 페이지(brand/product/store/franchise/community) 최상단 공통.
   HTML: section.bcon1 > .bcon1_iner front fdcc > .bcon1_box > (하트 / p.bcon1_tit ria / p.bcon1_sub) */
.bcon1 {
  background: #fff;
  z-index: 100;
}

.bcon1_iner {
  padding-bottom: 2.3vw;
}

.bcon1_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 96.7979%;
  height: calc(var(--px) * 282);
  padding-top: calc(var(--px) * 91);
  background: #ffd11e;
  border-radius: calc(var(--px) * 40);
}

.bcon1_heart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 41);
  aspect-ratio: 41 / 35;
}

.bcon1_tit {
  color: #141414;
  font-size: calc(var(--px) * 50);
  line-height: 1;
  margin-top: calc(var(--px) * 9);
}

.bcon1_sub {
  color: #141414;
  font-weight: 700;
  font-size: calc(var(--px) * 24);
  line-height: 1;
  margin-top: calc(var(--px) * 18);
}


/* ==================== 서브페이지 공통 서브헤더 (히어로 위 오버레이 → 스크롤 시 고정) ====================
   ★ 디자인상 서브헤더 pill 은 히어로 위에 "겹쳐" 뜸 (자체 높이 점유 X). → position:absolute 로 히어로 위 배치.
     부모(예: .brand_tabs)가 position:relative 여야 함. 스크롤로 헤더에 닿으면 JS 가 .stuck(fixed) 토글.
   brand=탭 전환 / franchise·community=섹션 스크롤 이동. CSS 공통, 동작은 페이지별 JS. */
.sub_header {
  position: absolute;
  top: 3.5vw;
  /* 히어로 상단에서 pill 까지 (겹침) */
  left: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

/* 스크롤로 헤더 아래 도달 시 고정 (JS 가 .subhd_stuck 토글 — 테마 overflow:hidden 로 CSS sticky 불가)
   고정되면 컨테이너 자체가 좌우 꽉 찬 각진 흰 바가 됨 (pill 은 폭 100%, 둥근 모서리는 이 바가 뒤에서 채워 펴진 효과) */
.subhd_stuck {
  position: fixed;
  top: 5.4068vw;
  /* 메인 헤더(103px) 바로 아래 */
  left: 0;
  box-shadow: 0 calc(var(--px) * 6) calc(var(--px) * 24) rgba(0, 0, 0, 0.08);
}

/* 스크롤 방향 숨김(header.js) — 고정 상태에서만 메인헤더와 함께 위로 사라짐.
   top(=헤더높이 5.4068vw) + 자기높이(100%) 만큼 올려 화면 밖으로.
   ★ PC 전용 — 모바일(≤599px)은 header.js 가 숨김을 스킵해 고정(이 룰 자체가 안 걸림). */
.sub_header.subhd_stuck.nav_hide {
  transform: translateY(calc(-5.4068vw - 100%));
}

.sub_header_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 151);
  width: 96.6929%;
  height: calc(var(--px) * 68);
  border-radius: 10vw;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 calc(var(--px) * 6) calc(var(--px) * 24) rgba(0, 0, 0, 0.08);
  transition: width 0.35s ease, box-shadow 0.35s ease, border-radius 0.4s ease, background-color 0.35s ease;
}

/* 고정 시 pill 은 좌우 꽉 차고 자기 그림자 제거 (그림자는 컨테이너 바가 담당) */
.subhd_stuck .sub_header_pill {
  width: 100%;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}

.sub_tab {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #141414;
  font-size: calc(var(--px) * 19);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sub_tab.on {
  font-weight: 800;
}

.sub_tab.on::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--px) * 4);
  background: #141414;
  border-radius: calc(var(--px) * 2);
}

/* ==================== form_section : 창업 문의 (문의 폼) ====================
   bg #f8f4eb full-bleed. 커스텀 드롭다운(기본 select UI 미사용)·있음/없음 토글·동의.
   좌표 = psd/05_창업_parsed.json (÷1905). design_crop 최종 대조. */

/* 커스텀 드롭다운 리스트가 필드 아래로 열림 → 전역 section overflow:hidden 무력화 */
#section_wrap .form_section {
  overflow: visible;
}

.form_section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #f8f4eb;
}

.form_section_iner {
  padding-top: 4.6vw;
  padding-bottom: 7vw;
}

/* ---- 헤드 ---- */
.form_section_tit {
  color: #141414;
  font-size: calc(var(--px) * 40);
  line-height: 1;
  letter-spacing: -0.1vw;
}

.form_section_sub {
  margin-top: 1.3vw;
  color: #141414;
  font-weight: 600;
  font-size: calc(var(--px) * 18);
  line-height: 1;
}

/* ---- 폼 ---- */
.form_section_form {
  /* 지역/비용/토글 공통 필드 너비 (셋 다 이 값으로 연동) */
  --fs-fw: calc(var(--px) * 400);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: calc(var(--px) * 1005);
  margin-top: 1.9vw;
}

.form_section_form>*+* {
  margin-top: calc(var(--px) * 4);
}

/* 성함/연락처 2단 */
.form_section_row2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: calc(var(--px) * 5);
}

.form_section_row2 .form_section_field {
  flex: 1 1 0;
}

/* 필드 공통 흰 박스 */
.form_section_field {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--px) * 66);
  padding: 0 calc(var(--px) * 41);
  background: #fff;
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 8);
}

.form_section_field.form_section_open {
  z-index: 30;
}

/* 라벨 (필수* + 텍스트) */
.form_section_lb {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 160);
  color: #020202;
  font-weight: 500;
  font-size: calc(var(--px) * 18);
  line-height: 1;
}

.form_section_req {
  align-self: flex-start;
  margin-top: calc(var(--px) * -5);
  margin-right: calc(var(--px) * 7);
  color: #ffd11e;
  font-weight: 300;
  font-size: calc(var(--px) * 16);
  line-height: 1;
}

/* 기본 입력 (성함/연락처/이메일) */
.form_section_inp {
  flex: 1 1 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #020202;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(var(--px) * 17);
  letter-spacing: -0.02vw;
}

/* 성함/연락처/이메일(텍스트 입력) : 라벨 폭 자동 → 커서가 라벨 바로 뒤. pill 필드는 160 정렬컬럼 유지 */
.form_section_field_txt .form_section_lb {
  width: auto;
  margin-right: calc(var(--px) * 20);
}

.form_section_inp::placeholder {
  color: #ccc;
}

.form_section_inp:focus {
  outline: none;
}

/* ---- 창업희망지역 : 커스텀 드롭다운 ---- */
.form_section_sel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: var(--fs-fw);
  outline: none;
  cursor: pointer;
}

.form_section_sel_head {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 51);
  border-radius: 50vw;
  background: #f2f2f1;
}

.form_section_sel_val {
  color: #8a8a8a;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  line-height: 1;
}

.form_section_sel.is-picked .form_section_sel_val {
  color: #020202;
}

.form_section_sel_arw {
  position: absolute;
  right: calc(var(--px) * 7);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 27);
  height: calc(var(--px) * 27);
  border-radius: 50%;
  background: #fff;
}

.form_section_sel_arw::after {
  content: "";
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  margin-top: calc(var(--px) * -2);
  border-right: 2px solid #141414;
  border-bottom: 2px solid #141414;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.form_section_sel.is-open .form_section_sel_arw::after {
  margin-top: calc(var(--px) * 2);
  transform: rotate(-135deg);
}

/* 드롭다운 리스트 (오버레이) */
.form_section_sel_list {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--px) * 6);
  left: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(var(--px) * 264);
  overflow-y: auto;
  padding: calc(var(--px) * 8);
  background: #fff;
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 14);
  box-shadow: 0 calc(var(--px) * 10) calc(var(--px) * 30) rgba(0, 0, 0, 0.1);
}

.form_section_sel.is-open .form_section_sel_list {
  display: flex;
}

.form_section_sel_opt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: calc(var(--px) * 42);
  border-radius: calc(var(--px) * 10);
  color: #4a4a4a;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.form_section_sel_opt:hover {
  background: #f2f2f1;
  color: #0b1a2f;
}

.form_section_sel_opt.on {
  background: #0b1a2f;
  color: #fff;
}

/* ---- 예상창업비용 ---- */
.form_section_cost {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: calc(var(--px) * 8);
}

.form_section_cost_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: var(--fs-fw);
  height: calc(var(--px) * 51);
  border-radius: 50vw;
  background: #f2f2f1;
}

.form_section_cost_inp {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  color: #020202;
  font-family: inherit;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
}

.form_section_cost_inp::placeholder {
  color: #ccc;
}

.form_section_cost_inp:focus {
  outline: none;
}

.form_section_cost_unit {
  color: #020202;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  line-height: 1;
}

/* ---- 점포보유 토글 ---- */
.form_section_store {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: calc(var(--px) * 11);
}

.form_section_toggle {
  --fs-tg-gap: calc(var(--px) * 6);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: var(--fs-fw);
  column-gap: var(--fs-tg-gap);
}

.form_section_tg {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc((var(--fs-fw) - var(--fs-tg-gap)) / 2);
  height: calc(var(--px) * 50);
  border-radius: 50vw;
  border: 1px solid #dfdfdf;
  background: #fff;
  color: #8a8a8a;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.form_section_tg.on {
  background: #0b1a2f;
  border-color: #0b1a2f;
  color: #fff;
}

.form_section_store_note {
  color: #8a8a8a;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  line-height: 1;
}

/* ---- 문의내용 (라벨 상단 + textarea) ---- */
.form_section_field_area {
  align-items: flex-start;
  height: calc(var(--px) * 143);
  padding-top: calc(var(--px) * 22);
  padding-bottom: calc(var(--px) * 22);
}

.form_section_area {
  flex: 1 1 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  resize: none;
  color: #020202;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(var(--px) * 17);
  line-height: 1.5;
}

.form_section_area::placeholder {
  color: #ccc;
}

.form_section_area:focus {
  outline: none;
}

/* ---- 개인정보 수집 및 이용 동의 (우측정렬) ---- */
.form_section_agree_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: calc(var(--px) * 17);
  padding-right: 0.3vw;
}

.form_section_agree {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  column-gap: calc(var(--px) * 12);
  cursor: pointer;
}

.form_section_agree_chk {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form_section_agree_box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 28);
  height: calc(var(--px) * 28);
  border-radius: calc(var(--px) * 6);
  border: 1px solid #dfdfdf;
  background: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.form_section_agree_chk:checked+.form_section_agree_box {
  background: #0b1a2f;
  border-color: #0b1a2f;
}

.form_section_agree_chk:checked+.form_section_agree_box::after {
  content: "";
  position: absolute;
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 6);
  margin-top: calc(var(--px) * -2);
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.form_section_agree_txt {
  color: #020202;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  line-height: 1;
}

.form_section_agree_u {
  text-decoration: underline;
  text-underline-offset: calc(var(--px) * 3);
}

/* ---- 제출 버튼 (완성 이미지 econ16_03) ---- */
.form_section_submit {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  overflow: hidden;
  width: calc(var(--px) * 252);
  margin-top: calc(var(--px) * 18);
  border-radius: 50vw;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.6, 0.3, 1), filter 0.3s ease, box-shadow 0.3s ease;
}

.form_section_submit img {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 대각선 광택 스윕 — 호버 시 흰 빛줄기가 좌→우로 슥~. 언호버는 transition:0s 라 되돌림이 안 보임(한 방향 1회) */
.form_section_submit::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  z-index: 2;
  width: 45%;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-220%) skewX(-18deg);
  transition: transform 0s;
  pointer-events: none;
}

.form_section_submit:hover {
  transform: translateY(calc(var(--px) * -3));
  filter: brightness(1.06);
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 30) rgba(0, 0, 0, 0.25);
}

.form_section_submit:hover::before {
  transform: translateX(320%) skewX(-18deg);
  transition: transform 0.7s ease;
}

.form_section_submit:active {
  transform: translateY(0) scale(0.985);
  transition: transform 0.1s ease;
}

/* /form 단독 페이지 : 고정 헤더(.header 5.4vw=103px) 클리어 상단여백. #content_wrap 직속일 때만(=franchise mid-page 는 #section_wrap 안이라 미적용) */
#content_wrap>.form_section {
  padding-top: calc(var(--px) * 103);
  color: #141414;
  font-family: "Pretendard Variable";
}

/* ==================== 매장 팝업 (store / front 공통 — 카드·리스트 화살표 클릭 → 열림) ====================
   ※ store.css 에서 이전(중복 선언 제거, custom.css 전역 로드로 공통화).
   fade: .show 토글(js). 열릴 때 아래→위 부드럽게 in / 닫을 때 위로 fade out. */
@font-face {
  font-family: 'HannaPro';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_seven@1.0/BMHANNAPro.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

.store_pop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.store_pop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.store_pop_dim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
}

.store_pop_box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 1284);
  background: #fff;
  border-radius: calc(var(--px) * 40);
  overflow: hidden;
  transform: translateY(calc(var(--px) * 40));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.store_pop.show .store_pop_box {
  transform: translateY(0);
}

.store_pop_main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 125);
  padding: calc(var(--px) * 67) calc(var(--px) * 76) calc(var(--px) * 60);
}

.store_pop_imgwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 522);
  aspect-ratio: 522 / 295;
  flex-shrink: 0;
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
}

.store_pop_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store_pop_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
}

.store_pop_name {
  margin-top: 0.9vw;
  font-size: calc(var(--px) * 32);
  font-weight: 700;
  color: #141414;
}

.store_pop_svc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 6);
}

.store_pop_svctag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 14);
  border-radius: 0.6vw;
  font-size: calc(var(--px) * 14);
  font-weight: 700;
  line-height: 1;
}

.store_pop_svctag.svc_delivery {
  background: #141414;
  color: #fff;
}

.store_pop_svctag.svc_allday {
  background: #ffe947;
  color: #141414;
}

.store_pop_rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 1.1vw;
  gap: 0.7vw;
}

.store_pop_row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  font-size: calc(var(--px) * 17);
}

.store_pop_guide {
  color: #9f9f9f;
  font-size: 0.8vw;
  margin-top: 0.6vw;
}

.store_pop_th {
  flex-shrink: 0;
  width: calc(var(--px) * 96);
  font-weight: 700;
  color: #555;
}

.store_pop_addr {
  flex: 1;
  color: #333;
}

.store_pop_tel {
  flex: 1;
  color: #333;
}

.store_pop_links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 8);
  margin-top: 0.9vw;
}

.store_pop_naver,
.store_pop_baemin {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 106);
  height: calc(var(--px) * 29);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.store_pop_naver:hover,
.store_pop_baemin:hover {
  opacity: 0.82;
}

.store_pop_naver img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.store_pop_baemin {
  background: #0cefd3;
  color: #141414;
  font-family: 'HannaPro', sans-serif;
  font-size: calc(var(--px) * 15);
  line-height: 1;
  text-decoration: none;
}

/* 닫기 바 — 박스 하단 풀폭 검정, 영역 전체 클릭 시 닫힘 (가운데 링 + 흰 ×) */
.store_pop_close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 70);
  background: #141414;
  cursor: pointer;
}

.store_pop_close_x {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 44);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: background 0.2s ease;
}

.store_pop_close_x span {
  font-size: calc(var(--px) * 25);
  font-weight: 200;
  color: #fff;
  line-height: 1;
}

.store_pop_close:hover .store_pop_close_x {
  background: rgba(255, 255, 255, 0.1);
}


/* ============================================================================
   📱 MOBILE ( max-width:599px ) — custom
   ============================================================================ */
@media (max-width: 599px) {

  #section_wrap {
    font-size: 3vw;
    margin-top: 15vw;
  }


  .txt_sdw {
    text-shadow: 0 0 5vw rgba(0, 0, 0, 0.16);
  }

  /* pet_btn 모바일 - 슬라이드 CTA 대신 담백한 중앙 알약형 버튼 */
  .pet_btn {
    width: fit-content;
    min-width: 42vw;
    height: 9.8vw;
    padding: 0 10vw 0 5.8vw;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1vw 2.6vw rgba(0, 0, 0, 0.13);
    touch-action: manipulation;
  }

  .pet_btn_txt {
    font-size: 3.15vw;
    white-space: nowrap;
    color: #1a1a1a;
  }

  .pet_btn_hv {
    display: none;
  }

  .pet_btn_arw {
    display: flex;
    left: auto;
    right: 4.2vw;
    width: 3vw;
  }

  .pet_btn_arw img {
    filter: none;
  }

  .pet_btn2 {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(17, 17, 17, 0.38);
  }

  .pet_btn2 .pet_btn_txt {
    color: #111;
  }

  /* pet_btn2(흰 pill)는 모바일서 검정 원(pet_btn_hv)이 숨겨져 흰 화살표가 안 보임 → 검정 화살표로 */
  .pet_btn2 .pet_btn_arw img {
    filter: brightness(0);
  }

  .pet_btn.absol {
    left: auto;
    right: auto;
  }

  /* ===== 공통 제품 대분류 라벨 — 모바일 기본값 (56vw 카드 기준) ===== */
  .pet_catlabel {
    right: 3.5vw;
    top: 3.5vw;
    padding: 1.6vw 3.4vw;
  }

  .pet_catlabel p {
    font-size: 3.3vw;
  }

  /* ===== 공통 네이비 NO.1 바 — 모바일: 가로 1줄 → 세로 3단(슬로건 / 마스코트·로고 / 슬로건) =====
     flex-wrap + 텍스트 width:100% 로 각 슬로건이 한 줄 차지 → 마스코트+로고가 가운데 줄에 자동 그룹 */
  .petmart_navy_bar {
    flex-wrap: wrap;
    gap: 3vw 5.5vw;
    padding: 6vw 4vw;
    border-radius: 6vw;
  }

  .petmart_navy_txt {
    width: 100%;
    font-size: 3.5vw;
    text-align: center;
  }

  .petmart_navy_mas {
    width: 17vw;
    transform: none;
  }

  .petmart_navy_logo {
    width: 40vw;
  }

  /* 공통 swiper nav 버튼 — 모바일 터치 타깃 확대 (색은 섹션별 --sbtn-* 변수 유지, 크기만) */
  .swiper_navbtn {
    width: 9vw;
    height: 9vw;
  }

  .swiper_chev {
    width: 3vw;
    height: 3vw;
  }

  .swiper_chev_prev {
    margin-left: calc(var(--px) * 25);
  }

  .swiper_chev_next {
    margin-right: calc(var(--px) * 25);
  }

  /* 공통 프로그레스바 — 모바일 --px 극소(0.4px)라 안보임 → 보이는 높이 (con04/con09 공용) */
  .swiper_prog,
  .swiper_prog_fill {
    height: 0.9vw;
  }

  /* ===== 공통 서치박스 (.pet_search) — PC --px 극소화 → 터치 사이즈 (con02/con03/store 공용) ===== */
  .pet_search {
    height: 14vw;
    padding: 0 2vw 0 6vw;
  }

  /* min-width:0 — flex 기본 min-width:auto 가 input 고유폭(~179px)을 못 줄여서
     좁은 모바일 서치박스(con03 58vw)에서 검색버튼이 pill 밖으로 삐져나옴 → 축소 허용 */
  .pet_search_input {
    min-width: 0;
    font-size: 3.5vw;
  }

  .pet_search_btn {
    width: 9.5vw;
    height: 9.5vw;
  }

  .pet_search_btn::before {
    width: 9.5vw;
    height: 9.5vw;
  }

  .pet_search_btn:hover::before {
    width: 5.5vw;
    height: 5.5vw;
  }

  .pet_search_ico {
    width: 3vw;
    height: 3vw;
  }

  .pet_search_ico::after {
    right: -1vw;
    bottom: -0.7vw;
    width: 1.5vw;
    height: 0.5vw;
  }

  /* ===== 서브페이지 공통 히어로 (bcon1) — PC --px 극소화(박스 58px·타이틀 10px·서브 5px 붕괴) → vw 재정의
     brand/product/store/franchise/community 5개 페이지 공통. 노란 박스 = 자식이 높이 결정(height auto + 세로 패딩) ===== */
  .bcon1_box {
    height: auto;
    padding: 12vw 0;
    border-radius: 5vw;
    width: 100vw;
    border-radius: 0;
  }

  .bcon1_iner {
    padding-bottom: 0;
  }

  .bcon1_heart {
    width: 8vw;
  }

  .bcon1_tit {
    font-size: 7vw;
    margin-top: 4vw;
  }

  .bcon1_sub {
    font-size: 5vw;
    margin-top: 4vw;
  }

  .sub_header {
    top: 6vw;
  }



  /* ===== 서브페이지 공통 서브헤더 (.sub_header pill) — 모바일 재설계 =====
     PC 는 pill 높이(68)·탭 글자(19)·gap 을 --px(px) 로 잡는데 모바일선 --px≈0.2px 라 다 뭉개짐
     (글자 ≈3.7px 판독불가). → 히어로 위 pill 을 vw 기반 터치 사이즈로 재구성.
     brand(3탭) / franchise(5탭) 공용. space-evenly 로 탭 균등 분배.
     ※ franchise.css·brand.css 가 custom.css 뒤에 로드 → 페이지 override(.franchise_subhd …)를
       이기려면 #section_wrap(ID) 스코프로 명시도를 올려야 함. */
  .sub_header_pill {
    box-sizing: border-box;
    justify-content: space-evenly;
    gap: 0;
    /* px gap 무력화 — 간격은 space-evenly 가 담당 */
    height: 11.5vw;
    padding: 0 2.5vw;
    border-radius: 6vw;
    /* 높이 절반↑ = 완전한 pill */
    width: 93vw;
  }

  .sub_tab {
    font-size: 3.5vw;
    /* brand 3탭 기준 가독 사이즈 */
    padding: 0;
  }

  /* on 탭 밑줄 (PC --px*4 → vw) */
  .sub_tab.on::after {
    height: 0.7vw;
    border-radius: 0.35vw;
  }

  /* franchise 는 5탭이라 폭 여유 적음 → 글자·좌우패딩 축소 (px gap override 도 함께 무력화).
     #section_wrap 로 franchise.css 의 .franchise_subhd 규칙(나중 로드)보다 우선. */
  #section_wrap .franchise_subhd .sub_header_pill {
    gap: 0;
    padding: 0 1.5vw;
  }

  #section_wrap .franchise_subhd .sub_tab {
    font-size: 3.2vw;
    /* 12px↑ 가독 확보 (5탭이라 base 3.5 보다만 축소) */
  }

  /* 스크롤 고정 시: 모바일 헤더(15vw) 바로 아래로.
     PC 값(.subhd_stuck 5.4068vw / franchise.css .franchise_subhd.subhd_stuck 5.4068vw)을
     #section_wrap 스코프로 한 번에 덮음 → 헤더 뒤로 숨는 문제 해결. */
  #section_wrap .subhd_stuck {
    top: 15vw;
  }

  /* ※ 모바일은 스크롤 방향 숨김 미적용(고정) → .nav_hide 모바일 룰 없음(header.js 가 ≤599px 스킵) */

  /* ===== 공통 인섹션 탭 (.pet_tabs) — 모바일: PC(흰 트랙 + 밑줄 활성) 버리고 개별 알약 탭(세그먼트 토글).
     탭 = 높이 고정 + 양옆 패딩 + radius 999px, 활성 = 컴포넌트 기존 인디케이터색(#141414) 채움.
     brand con10(2탭) / community con02(3탭) / franchise con12(3탭) 공용 — 개수 무관 중앙정렬.
     ※ 인섹션 탭 전용. 상단 고정 서브네비(.sub_header_pill)와 별개. */
  .pet_tabs {
    position: relative;
    /* 슬라이딩 알약(.pet_tab_ind)의 offset 기준 */
    flex-wrap: wrap;
    /* 탭이 좁으면 줄바꿈(보험) — 보통 한 줄 */
    gap: 1.6vw;
    width: auto;
    /* 알약들 감싸는 트랙 = 내용폭 (PC 96.69% 해제) */
    max-width: 96vw;
    height: auto;
    /* PC 68·--px 고정 해제 → 탭 높이가 결정 */
    padding: 1.3vw;
    border-radius: 999px;
    /* background:#fff · border 1px #d5d5d5 = PC 값 유지(트랙) */
  }

  .pet_tab {
    height: 10vw;
    /* 고정 높이(터치 타깃) — PC height:100% 대체 */
    padding: 0 4vw;
    /* 양옆 패딩 */
    border-radius: 999px;
    /* 알약 */
    font-size: 3.5vw;
    z-index: 1;
    /* 글자를 슬라이딩 알약(.pet_tab_ind) 위로 */
    transition: color 0.28s ease;
    /* 슬라이드에 맞춰 글자색 크로스페이드 */
  }

  .pet_tab.on {
    /* 배경(검은 알약)은 .pet_tab_ind 가 담당 — 여기선 글자색만 */
    color: #fff;
  }

  .pet_tab.on::after {
    display: none;
    /* PC 밑줄 인디케이터 제거 (알약 채움이 대체) */
  }

  /* 슬라이딩 검은 알약 — 활성 탭의 위치/크기로 JS(js/script.js)가 이동. 순간이동 대신 "스윽" */
  .pet_tab_ind {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: #141414;
    border-radius: 999px;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ===== 공통 페이지네이션 (.pet_paging) — PC --px 극소(원 8px·번호 3.3px) → 터치 사이즈.
     store con03 / franchise con12 등 공용 ===== */
  .pet_paging {
    gap: 1.5vw;
  }

  .pet_paging_btn {
    width: 9vw;
    height: 9vw;
  }

  .pet_paging_nums {
    gap: 1vw;
    margin: 0 2vw;
  }

  .pet_paging_num {
    width: 9vw;
    height: 9vw;
    font-size: 3.6vw;
  }

  .pet_paging_dot {
    width: 5vw;
    height: 9vw;
    /* 칸 크기만 키우고 글자는 PC --px 값(3.3px)으로 남아 '...'이 안 보였다 — 번호와 같은 크기로 */
    font-size: 3.6vw;
  }

  /* ===== 매장 팝업 (store_pop) — PC 가로배치·--px microscopic(이름6.6·행3.5·태그2.9·×5.1px) →
     모바일 세로 스택(이미지 위 / 정보 아래) + vw 재정의. store con02·con03 / front con02 카드 탭 → 공용 ===== */
  .store_pop_box {
    width: 86vw;
    border-radius: 5vw;
    transform: translateY(6vw);
  }

  .store_pop_main {
    flex-direction: column;
    align-items: stretch;
    gap: 3vw;
    padding: 6vw 6vw 7vw;
  }

  .store_pop_imgwrap {
    width: 100%;
    border-radius: 3vw;
  }

  .store_pop_name {
    margin-top: 5vw;
    font-size: 4.7vw;
  }

  .store_pop_svc {
    gap: 2vw;
  }

  .store_pop_svctag {
    padding: 1.6vw 3vw;
    border-radius: 1.5vw;
    font-size: 3.3vw;
  }

  .store_pop_rows {
    margin-top: 3vw;
    gap: 2vw;
  }

  .store_pop_row {
    font-size: 3.6vw;
  }

  .store_pop_guide {
    font-size: 2.9vw;
    margin-top: 4vw;
  }

  .store_pop_th {
    width: 18vw;
  }

  .store_pop_links {
    gap: 2vw;
    margin-top: 2vw;
  }

  .store_pop_naver,
  .store_pop_baemin {
    width: 25vw;
    height: auto;
    aspect-ratio: 106 / 29;
    border-radius: 999px;
  }

  .store_pop_baemin {
    font-size: 3.5vw;
  }

  .store_pop_close {
    height: 12vw;
  }

  .store_pop_close_x {
    width: 9vw;
  }

  .store_pop_close_x span {
    font-size: 5vw;
  }

  /* ===== 공통 탭섹션 헤더 + 카드그리드 (.pet_tabhead* / .pet_cardgrid / .pet_card*) — 모바일 vw 재정의.
     PC --px 극소화로 타이틀 8px·본문 3.7px·카드 84px(3열) 붕괴 → vw + 2열.
     community con02 / franchise con12 공용. (brand con10 은 .con10 스코프로 자체 오버라이드 → 무영향)
     ※ 하트 크기는 섹션별(.con12/.con02)에서 override. ===== */
  .pet_tabhead_tit {
    margin-top: 3vw;
    font-size: 6.5vw;
  }

  .pet_tabhead_desc {
    max-width: 86vw;
    margin-top: 3vw;
    font-size: 3.4vw;
    text-wrap: balance;
    /* 2줄 desc 줄 길이 균형 — 마지막 줄 짧은 단어 orphan 방지(줄바꿈 가이드). keep-all 은 body p 상속 */
  }

  .pet_cardgrid {
    width: 92vw;
    margin-top: 5vw;
    column-gap: 4vw;
    row-gap: 5vw;
  }

  .pet_cardcell {
    width: calc((100% - 4vw) / 2);
    /* 3열 → 2열 */
  }

  .pet_card {
    width: 100%;
    /* 셀 채움 (PC 410·--px 고정 해제) */
  }

  .pet_card_img {
    height: 26vw;
    /* 카드폭 44vw 기준 PC 비율(414:245) 유지 */
    border-radius: 3vw;
  }

  .pet_card_subj {
    margin-top: 2.4vw;
    font-size: 3.4vw;
  }

  /* ============================================================
     form_section (창업문의 공통 폼) — 모바일 전용 재설계
     PC=[라벨 좌측 고정컬럼 + 입력 우측] 가로형(calc --px). 모바일은 폭이 좁아
     그 구조가 갑갑 → 완전 재구성: "라벨(위) + 풀폭 알약 컨트롤(아래)" 세로 스택.
     엄지 조작·가독성 최적화. 단일 텍스트류=흰 알약(50vw), 멀티라인=둥근 박스.
     ============================================================ */

  /* /form 단독페이지: 고정헤더(15vw) 클리어. (franchise=#section_wrap이라 미적용) */
  #content_wrap>.form_section {
    margin-top: 15vw;
    padding-top: 9vw;
    padding-bottom: 12vw;
  }

  /* 헤드 */
  .form_section_tit {
    font-size: 7.6vw;
    letter-spacing: -0.2vw;
  }

  .form_section_sub {
    margin-top: 4vw;
    font-size: 3.8vw;
    line-height: 1.45;
    text-align: center;
    word-break: keep-all;
  }

  /* 폼 컨테이너 */
  .form_section_form {
    width: 90vw;
    margin-top: 7vw;
  }

  /* 필드 그룹 간 세로 리듬 (라벨-컨트롤은 붙고, 그룹끼리는 넉넉히) */
  .form_section_form>*+* {
    margin-top: 4.6vw;
  }

  /* 성함/연락처 2단 → 세로 스택 */
  .form_section_row2 {
    flex-direction: column;
    align-items: stretch;
    row-gap: 4.6vw;
  }

  /* ── 필드 = 라벨(위)+컨트롤(아래) 세로 래퍼. PC 흰 박스/보더/고정높이 전부 해제 ── */
  .form_section_field {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* 라벨: 컨트롤 위, 살짝 들여쓰기. (텍스트/pill 구분 없이 전부 위로) */
  .form_section_lb {
    width: auto;
    margin: 0 0 2vw 0;
    padding-left: 2vw;
    font-size: 3.4vw;
    font-weight: 600;
    white-space: nowrap;
  }

  .form_section_field_txt .form_section_lb {
    margin-right: 0;
  }

  .form_section_req {
    margin-top: 0;
    margin-right: 1.4vw;
    font-size: 3.3vw;
  }

  /* ── 텍스트 입력(성함/연락처/이메일) = 풀폭 흰 알약 ──
     ★ 부모 필드가 세로 flex라 PC의 flex:1 1 0(basis:0)이 height를 먹어 19px로 붕괴 →
        flex:0 0 auto 로 풀어 height:13vw 살림 (드롭다운/비용/토글은 부모가 가로라 무관) */
  .form_section_inp {
    flex: 0 0 auto;
    width: 100%;
    height: 13vw;
    padding: 0 6vw;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 50vw;
    font-size: 3.7vw;
  }

  .form_section_inp:focus {
    border-color: #0b1a2f;
  }

  /* ── 창업희망지역 드롭다운 = 텍스트 입력과 동일한 풀폭 흰 알약 ── */
  .form_section_sel {
    width: 100%;
  }

  .form_section_sel_head {
    justify-content: flex-start;
    height: 13vw;
    padding: 0 6vw;
    background: #fff;
    border: 1px solid #dfdfdf;
  }

  .form_section_sel.is-open .form_section_sel_head {
    border-color: #0b1a2f;
  }

  .form_section_sel_val {
    font-size: 3.6vw;
  }

  /* 흰 head 위라 화살표 원은 회색으로(흰 원은 안 보임) */
  .form_section_sel_arw {
    right: 2vw;
    width: 8vw;
    height: 8vw;
    background: #f2f2f1;
  }

  .form_section_sel_arw::after {
    width: 2vw;
    height: 2vw;
    margin-top: -0.5vw;
  }

  .form_section_sel.is-open .form_section_sel_arw::after {
    margin-top: 0.5vw;
  }

  .form_section_sel_list {
    top: calc(100% + 1.6vw);
    max-height: 58vw;
    padding: 2vw;
    border-radius: 3.4vw;
  }

  .form_section_sel_opt {
    height: 11.5vw;
    border-radius: 2.4vw;
    font-size: 3.6vw;
  }

  /* ── 예상창업비용 = 풀폭 흰 알약 + 우측 '만 원' ── */
  .form_section_cost {
    width: 100%;
    column-gap: 3vw;
  }

  .form_section_cost_pill {
    flex: 1 1 0;
    justify-content: flex-start;
    height: 13vw;
    padding: 0 6vw;
    background: #fff;
    border: 1px solid #dfdfdf;
  }

  .form_section_cost_pill:focus-within {
    border-color: #0b1a2f;
  }

  .form_section_cost_inp {
    text-align: left;
    font-size: 3.7vw;
  }

  .form_section_cost_unit {
    flex-shrink: 0;
    font-size: 3.5vw;
  }

  /* ── 점포보유 = 큰 알약 2개(있음/없음) + 아래 안내문 ── */
  .form_section_store {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    row-gap: 2.4vw;
    column-gap: 0;
  }

  .form_section_toggle {
    width: 100%;
    column-gap: 3vw;
  }

  .form_section_tg {
    width: auto;
    flex: 1 1 0;
    height: 13vw;
    font-size: 3.6vw;
  }

  .form_section_store_note {
    padding-left: 2vw;
    font-size: 3.3vw;
    line-height: 1.4;
  }

  /* ── 문의내용 = 풀폭 흰 박스(멀티라인이라 알약 아님) ── */
  .form_section_field_area {
    padding: 0;
  }

  .form_section_area {
    width: 100%;
    min-height: 40vw;
    padding: 4vw 5.5vw;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 3.4vw;
    font-size: 3.7vw;
    line-height: 1.55;
  }

  .form_section_area:focus {
    border-color: #0b1a2f;
  }

  /* ── 개인정보 동의 = 좌측정렬(우측 고정 리모컨 .quick_fixed 밴드 회피) ── */
  .form_section_agree_wrap {
    justify-content: flex-start;
    margin-top: 5vw;
    padding-right: 0;
    padding-left: 1vw;
  }

  .form_section_agree {
    column-gap: 2.4vw;
  }

  .form_section_agree_box {
    width: 5.4vw;
    height: 5.4vw;
    border-radius: 1.4vw;
  }

  .form_section_agree_chk:checked+.form_section_agree_box::after {
    width: 2.4vw;
    height: 1.2vw;
    margin-top: -0.5vw;
  }

  .form_section_agree_txt {
    font-size: 3.3vw;
  }

  .form_section_agree_u {
    text-underline-offset: 0.6vw;
  }

  /* ── 제출 = 넉넉폭 알약 이미지 CTA. 모바일은 hover 불가 → 주기적 자동 shine + 탭 press ── */
  .form_section_submit {
    width: 52vw;
    margin-top: 7.5vw;
    box-shadow: 0 1.6vw 4vw rgba(11, 26, 47, 0.18);
  }

  /* 터치 hover 잔상(리프트 눌러붙음) 무력화 — 리프트는 끄고 그림자만 유지 */
  .form_section_submit:hover {
    transform: none;
    filter: none;
    box-shadow: 0 1.6vw 4vw rgba(11, 26, 47, 0.18);
  }

  /* 자동 shine: 약 4s 주기로 빛줄기 1회 슥 → idle 대기 → 반복 (hover 없이도 CTA가 살아있음) */
  .form_section_submit::before {
    animation: fs_shine_auto 4s ease-in-out infinite;
  }

  .form_section_submit:hover::before {
    transition: none;
  }

  /* 탭 press = 촉각 피드백(쑥 눌림) */
  .form_section_submit:active {
    transform: scale(0.96);
    transition: transform 0.12s ease;
  }

  @keyframes fs_shine_auto {
    0% {
      transform: translateX(-220%) skewX(-18deg);
    }

    16% {
      transform: translateX(320%) skewX(-18deg);
    }

    100% {
      transform: translateX(320%) skewX(-18deg);
    }
  }

}