/* -------------------------
   기본 레이아웃 & 구조
------------------------- */
#bo_v>header {
    display: block;
    position: relative;
    background: transparent;
    font-size: unset;
    padding: unset;
    border-bottom: 1px solid black;
    font-family: 'pretendard Variable';
    font-weight: 900;
}

#bo_v_title .bo_v_tit,
.board_title {
    font-family: 'pretendard Variable';
    font-weight: 700;
    display: block;
    font-size: 17px;
    margin: 5px 0 0;
    word-break: break-all;
    letter-spacing: -1px;
}


#content_wrap {
    padding-bottom: 0;
}

/* -------------------------
   HD 팝업
------------------------- */
/* 컨테이너: 클릭 투과 + 화면 기준 좌표계만 제공(높이 0). 위치는 자식이 결정 */
#hd_pop {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 2147483000;   /* 헤더(z-index 999999999)보다 위 */
}

/* 개별 팝업: PC는 인라인 style(관리자 좌표)대로 배치, 모바일만 중앙(아래 미디어쿼리) */
.hd_pops {
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f7f7;
  min-width: 300px;
}

.hd_pops img {
  width: 100%;
  display: block;
}

.hd_pops_con {
  width: 100% !important;
  height: auto !important;
}

#hd_pop>div>div>iframe {
  height: 100%;
}

/* -------------------------
   팝업 footer (닫기 버튼 영역)
------------------------- */
/* #hd_pop 프리픽스로 특이도 확보 → default.css 의 .hd_pops_reject(검정)·.hd_pops_close(absolute) 무력화 */
#hd_pop .hd_pops_footer {
  display: flex;
  box-sizing: border-box;   /* 전역 box-sizing 이 content-box 여도 팝업 폭을 넘지 않게 */
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Pretendard Variable';
}

/* default.css 의 clearfix(:after) 제거 — flex 에선 빈 공간만 차지 */
#hd_pop .hd_pops_footer::after { display: none; }

/* 버튼 너비 고정 → 팝업이 넓어져도 버튼은 안 늘어나고 가운데 모임 */
#hd_pop .hd_pops_footer button {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 130px;
  position: relative;
  top: auto;
  right: auto;
  padding: 10px 4px;
  border: 0;
  border-radius: 7px;
  background: #ececec;
  color: #777;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.4px;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#hd_pop .hd_pops_footer button:hover {
  background: #e2e2e2;
  color: #333;
}

#hd_pop .hd_pops_footer .hd_pops_reject strong,
#hd_pop .hd_pops_footer .hd_slider_reject strong {
  font-weight: 600;
  color: #555;
}

/* 오른쪽 '닫기' 버튼만 강조 */
#hd_pop .hd_pops_footer .hd_pops_close:last-child,
#hd_pop .hd_pops_footer .hd_slider_closeall {
  color: #fff;
  background: #3a3a3a;
}

#hd_pop .hd_pops_footer .hd_pops_close:last-child:hover,
#hd_pop .hd_pops_footer .hd_slider_closeall:hover {
  background: #1a1a1a;
}

/* -------------------------
   HD 팝업 반응형 - 태블릿
------------------------- */
@media screen and (max-width:1023px) {
  /* 태블릿·모바일: 관리자 좌표 무시하고 무조건 화면 가로 중앙 + 화면 고정 */
  #hd_pop {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }

  .hd_pops {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    max-width: 560px;
    min-width: 0;
    margin: 0 !important;
  }
  /* TOP=0(헤더아래) 팝업은 JS top 유지, 그 외만 상단 3% */
  .hd_pops:not(.hd_below_header) { top: 3% !important; }

  #hd_pop .hd_pops_footer button {
    flex: 1;
    width: auto;
    max-width: 46%;
    font-size: 2.6vw !important;
    padding: 2.2vw 1vw !important;
  }
}

/* -------------------------
   HD 팝업 반응형 - 모바일
------------------------- */
@media screen and (max-width:599px) {
  .hd_pops { width: 90% !important; }
  .hd_pops:not(.hd_below_header) { top: 5% !important; }
  /* 모바일 footer 버튼 더 크게 (태블릿 2.6vw 보다 키움) */
  #hd_pop .hd_pops_footer button { font-size: 3.6vw !important; padding: 3.4vw 1vw !important; }
}

/* -------------------------
   버튼 스타일
------------------------- */
.k_new_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2% 0 6%;
}

.k_btn_inner {
    font-size: 1.5vw;
    background: black;
    color: white;
    padding: 1% 3%;
    border-radius: 30px;
}

.k_btn_inner>a,
.k_btn_inner>input {
    color: white;
    font-size: 1.1em;
    outline: none;
    appearance: none;
    border: unset;
    background: unset;
}

.k_new_btn>.k_btn_inner:nth-child(2) {
    background: #0000008f;
    margin-left: 2%;
    padding: 0.7% 2% !important;
}

/* -------------------------
   게시판 작성폼
------------------------- */
#bo_w .bo_w_tit .frm_input {
    padding-right: 0 !important;
}

/* -------------------------
   반응형 - 모바일
------------------------- */
@media screen and (max-width:599px) {
    .main_small_title {
        font-family: Pretendard-light;
        font-size: 3.1vw;
        line-height: 4.7vw;
    }
}


/* ------------------------------- PC header (펫마트) ------------------------------------ */

.header {
    width: 100%;
    height: 5.4068vw;          /* 103px */

    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999999;

    font-family: 'Pretendard Variable';
    letter-spacing: -0.04vw;
    color: #141414;
    background: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: box-shadow 0.3s, transform 0.35s ease;
}

/* 스크롤 시 옅은 그림자 */
.header.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* 스크롤 방향 숨김(header.js) — 아래로 내릴 때 위로 사라져 섹션을 안 가림 */
.header.nav_hide {
    transform: translateY(-100%);
}

.header_inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    height: 100%;
}

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

    width: 7.4541vw;           /* 142px */
    margin-left: 5.5118vw;     /* 105px */
}

.header_logo img {
    width: 100%;
}

/* 중앙 메뉴 */
.header_menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    height: 100%;
    margin-left: 19.4751vw;    /* 로고끝~브랜드 371px */
    gap: 3.7795vw;             /* 72px */
}

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

    position: relative;
    height: 100%;

    font-size: 0.9974vw;       /* 19px */
    font-weight: 600;
    color: #141414;
}

.header_menu_1 p {
    margin: 0;
}

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

.header_menu_1.on::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: calc(var(--px) * 54);   /* 54px */
    height: calc(var(--px) * 3);   /* 7px */
    background: #141414;
}

/* 창업 문의 CTA — 모바일 드롭다운 전용(데스크탑 숨김) */
.header_menu_apply,
.header_menu_member,
.header_menu_socials {
    display: none;
}

/* 우측 영역 */
.header_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin-left: auto;
    margin-right: 1.9417vw;    /* 37px */
}

/* 창업 문의 (크림 알약) */
.hd_apply {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--px) * 10);

    width: 7.7690vw;           /* 148px */
    height: 2.6247vw;          /* 50px */
    border-radius: calc(var(--px) * 23);
    background: #f8f4eb;

    font-size: 0.8924vw;       /* 17px */
    font-weight: 700;
    color: #141414;

    transition: background 0.25s;
}

.hd_apply p {
    margin: 0;
    transition: color 0.25s;
}

/* 멍굴멍굴 캐릭터 */
.hd_char {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 3.9895vw;           /* 76px */
    margin-left: 1.2073vw;     /* 23px */
}

.hd_char img {
    width: 100%;
}

/* SNS (인스타 / blog) */
.hd_sns {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 2.3622vw;           /* 45px */
    height: 2.3622vw;
}

.hd_insta {
    margin-left: 0.5774vw;     /* 11px */
}

.hd_insta img {
    width: calc(var(--px) * 25);
}

.hd_blog {
    margin-left: 0.4199vw;     /* 8px */
}

.hd_blog img {
    width: calc(var(--px) * 29);
}

/* 가맹점 전용 (노랑 알약) */
.hd_member {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--px) * 10);

    width: 8.0315vw;           /* 153px */
    height: 2.6247vw;          /* 50px */
    border-radius: calc(var(--px) * 23);
    background: #ffd11e;
    margin-left: 1.1549vw;     /* 22px */

    font-size: 0.8924vw;       /* 17px */
    font-weight: 700;
    color: #141414;

    transition: background 0.25s;
}

.hd_member p {
    margin: 0;
    transition: color 0.25s;
}

/* 알약 아이콘 (기본 + hover 2장 크로스페이드) */
.hd_apply_ico {
    position: relative;
    display: flex;
    width: calc(var(--px) * 16);
}

.hd_member_ico {
    position: relative;
    display: flex;
    width: calc(var(--px) * 18);
}

.hd_apply_ico img,
.hd_member_ico img {
    width: 100%;
    transition: opacity 0.25s;
}

.hd_apply_ico .hd_ico_on,
.hd_member_ico .hd_ico_on {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

/* hover (PC 전용) */
@media screen and (min-width: 600px) {
    .header_menu_1:hover {
        font-weight: 800;
    }

    .hd_apply:hover,
    .hd_member:hover {
        background: #141414;
    }

    .hd_apply:hover p,
    .hd_member:hover p {
        color: #fff;
    }

    .hd_apply:hover .hd_ico_off,
    .hd_member:hover .hd_ico_off {
        opacity: 0;
    }

    .hd_apply:hover .hd_ico_on,
    .hd_member:hover .hd_ico_on {
        opacity: 1;
    }
}


/* ------------------- PC header (펫마트) 끝 ------------------- */





/* 햄버거 드롭다운 배경 딤 — 햄버거가 모바일 전용(.mobile-pc)이라 PC 에선 미사용 */
.header_dim {
    display: none;
}

/* ------------------- 모바일 header 커스텀 시작------------------- */
@media screen and (max-width: 599px) {

    /* 로고가 다크 계열(짙은 남색 텍스트 + 빨강 PET + 강아지) → 헤더 배경 흰색(PC와 동일).
       이 프로젝트 PC엔 .scrolled .header_menu 재배치 룰이 없어 specificity 트랩 없음 → 단일 selector.
       (.scrolled 는 box-shadow 만 추가하므로 .header 단일 룰의 height/배경이 스크롤 후에도 유지됨) */
    .header {
        height: 15vw;
        background: #fff;
        padding: 0;
        transition: none;   /* 모바일은 스크롤 숨김 미적용(고정) → 트랜지션 불필요 */
    }

    .header_inner {
        position: relative;
        padding: 0;
    }

    /* 로고: 좌측(flex 흐름 유지). 세로중앙은 .header_inner align-items:center 자동 */
    .header_logo {
        width: 28vw;
        margin-left: 4vw;
    }

    .header_logo img {
        width: 100%;
    }

    /* 우측 CTA 묶음(창업문의/캐릭터/SNS/가맹점) — 모바일 숨김 */
    .header_right {
        display: none;
    }

    /* 햄버거: 우측. 세로중앙은 부모(.header_inner) flex-center 자동 */
    .hamburger {
        position: absolute;
        right: 5vw;
    }

    .hamburger-menu {
        position: relative;
        width: 7vw;
        height: 4vw;
        cursor: pointer;
    }

    .hamburger-menu .line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 0.5vw;
        background: #141414;
        transition: all 0.3s ease;
        transform-origin: center;
    }

    /* 가운데 라인만 브랜드 포인트(노랑), 외곽 두 줄은 대비 다크 */
    .hamburger-menu #line-mid {
        background: #ffd11e;
    }

    .top-reverse {
        top: 0;
    }

    .mid-reverse {
        top: 50%;
        transform: translateY(-50%);
    }

    .bot-reverse {
        bottom: 0;
    }

    /* 펼침 시 X */
    .line_change.top-reverse {
        top: 50%;
        transform: translate(0, -50%) rotate(45deg);
    }

    .line_change.mid-reverse {
        opacity: 0;
    }

    .line_change.bot-reverse {
        bottom: 50%;
        transform: translate(0, 50%) rotate(-45deg);
    }

    /* 드롭다운 메뉴 — fixed, 위→아래 슬라이드 */
    .header_menu {
        position: fixed;
        top: 15vw;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 999999998;
        transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    }

    .header_menu.header_menu_drop {
        max-height: calc(100vh - 15vw);
        opacity: 1;
        pointer-events: auto;
    }

    /* 드롭다운 배경 딤 — 헤더(z 999999999)·드롭다운(999999998) "아래",
       퀵바(#contact_service z 99999999)·본문 "위"에 깔린다.
       → 헤더/햄버거/드롭다운만 선명하고 나머지 화면만 어두워지고 흐려짐 */
    .header_dim {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999997;
        background: rgba(0, 0, 0, 0.45);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;   /* 닫힘 상태에선 클릭도 통과 */
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .header_dim.on {
        opacity: 1;
        visibility: visible;
    }

    /* 메뉴 항목 — 흰 배경 + 다크 텍스트. 탭 시에만 다크 배경 + 흰 텍스트 */
    .header_menu_1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 4.5vw 6vw;
        font-size: 4.2vw;
        font-weight: 600;
        color: #141414;
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .header_menu_member {
        display: flex;
    }

    /* 외부 SNS — 내부 페이지 메뉴와 구분되는 별도 바로가기 영역 */
    .header_menu_socials {
        display: block;
        padding: 3.5vw 6vw 4vw;
        background: #f7f7f7;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .header_menu_socials_label {
        margin: 0 0 2vw;
        color: #777;
        font-size: 3vw;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .header_menu_socials_links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2vw;
    }

    .header_menu_social {
        display: flex;
        align-items: center;
        min-width: 0;
        height: 11vw;
        padding: 0 3vw;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 2vw;
        background: #fff;
        color: #141414;
        font-size: 3.5vw;
        font-weight: 700;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .header_menu_social img {
        flex: 0 0 auto;
        width: 5vw;
        height: 5vw;
        margin-right: 2vw;
        object-fit: contain;
    }

    .header_menu_external {
        margin-left: auto;
        color: #888;
        font-size: 3.4vw;
        font-weight: 500;
    }

    .header_menu_social:active {
        border-color: #ffd11e;
        background: #fffbed;
    }

    .header_menu_1:last-child {
        border-bottom: none;
    }

    .header_menu_1 p {
        margin: 0;
    }

    .header_menu_1::after {
        display: none;
    }

    /* 현재 페이지 = 다크 배경 + 흰 텍스트 + 볼드로 강조 */
    .header_menu_1.on {
        background: #141414;
        color: #fff;
        font-weight: 800;
    }

    .header_menu_1:hover {
        background: #141414;
        color: #fff;
    }

    .header_menu_1:active {
        background: #141414;
        color: #fff;
    }

    /* 창업 문의 — 드롭다운 하단 노랑 CTA(포인트 강조) */
    .header_menu_apply {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        width: 100%;
        padding: 5vw 6vw;
        background: #ffd11e;
        color: #141414;
        font-size: 4.2vw;
        font-weight: 800;
        transition: background 0.2s ease;
    }

    .header_menu_apply_ico {
        display: flex;
        width: 4.6vw;
    }

    .header_menu_apply_ico img {
        width: 100%;
    }

    .header_menu_apply p {
        margin: 0;
    }

    .header_menu_apply:active {
        background: #ecc21c;
    }
}

/* ------------------- 모바일 header 커스텀 끝------------------- */