@charset "utf-8";
/* ===== community page styles ===== */

/* ============================================================================
   con02 : 커뮤니티 3탭 (새소식 / 입점제안 / 이벤트) — 공통 탭섹션 골격(con12·brand con10 동일)
   탭(.pet_tabs) + 헤더(.pet_tabhead*) + 카드그리드(.pet_card*) = 공통(custom.css).
   con02 고유 = 새소식 카드 뱃지(NOTICE/NEWS) + 입점제안 목록형(.comm_list) + 하트 크기 + 빈카드 폴백.
   ============================================================================ */
.con02 {
  background: #fff;
}

.con02_iner {
  padding-top: 0;
  padding-bottom: 5vw;
}

/* 하트만 고유 크기 (con12 와 동일 econ5_01 41×35) — 나머지 헤더는 공통 .pet_tabhead* */
.con02 .pet_tabhead_heart {
  width: calc(var(--px) * 41);
  aspect-ratio: 41 / 35;
}

/* 썸네일 축소는 그리드폭·카드폭을 같이 줄여서 처리 — 카드만 줄이면 그 차이가 전부 간격으로 가서 멀어 보임.
   1320/410(간격 30) → 1080/330(간격 30) : 카드 80% 축소, 카드 사이 간격은 공통값 그대로. */
.con02 .pet_cardgrid {
  width: calc(var(--px) * 1080);
}

/* 빈 카드(게시판 미등록) 회색 그라데이션 폴백.
   썸네일 비율은 공통(414:245) 대신 1:1 정사각. 선택자 2단계라 모바일 공통값(height:26vw)도 덮음 = 모바일도 1:1. */
.con02 .pet_card_img {
  position: relative;
  height: auto;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #f8f8f8 0%, #dfdfdf 55%, #b6b6b6 100%);
}

/* 프레임 꽉 채움(여백 0). 부모 높이가 aspect-ratio 계산값(=auto)이라 자식 height:100% 가
   확정 높이로 안 풀림 → 퍼센트 높이 대신 absolute inset:0 으로 채움. */
.con02 .pet_card_img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 카드 전체 클릭 이동 (경로 있는 아이템 = 커서 포인터). 오버레이 <a> 가 카드 전면 덮음 */
.con02 .pet_card {
  position: relative;
  width: calc(var(--px) * 330);   /* 공통 410 → 축소. 그리드 1080 과 세트(셀 360 − 카드 330 = 간격 30) */
}

.con02 .pet_card_link {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
}

.con02 .comm_row {
  cursor: pointer;
}

/* 페이지네이션 상단 간격 */
.con02_paging {
  margin-top: 4vw;
}

/* ===== 새소식 카드 분류 뱃지 (NOTICE=공지사항 / NEWS=뉴스) — 카드 이미지 좌상단 ===== */
.comm_cat {
  position: absolute;
  top: calc(var(--px) * 23);
  left: calc(var(--px) * 29);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 27);
  padding: 0 calc(var(--px) * 12);
  border-radius: 999px;
  font-size: calc(var(--px) * 14);
  font-weight: 600;
}

.comm_cat_notice {
  background: #ffe947;
  color: #141414;
}

.comm_cat_news {
  background: #0b1a2f;
  color: #fff;
}

/* ============================================================================
   입점제안 게시판 목록 (.comm_list · community_partner) — 번호/제목/작성자/등록일/조회수
   비회원 글쓰기 + 비밀글(자물쇠) + 이미지첨부. 7행/페이지 (community.js 페이지네이션).
   ============================================================================ */
.comm_board {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 1288);
  margin-top: 2vw;
  padding-top: calc(var(--px) * 66);
}

/* 글쓰기 버튼 — absolute 우상단 (리스트 위, 콘텐츠 흐름에 영향 없음) */
.comm_write {
  position: absolute;
  top: -1.5vw;
  right: 0;
}

.comm_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}

/* 헤더 행 (컬럼명) — 하단 1px 검정 라인 */
.comm_list_head {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 62);
  border-bottom: 1px solid #141414;
  font-size: calc(var(--px) * 17);
  font-weight: 600;
  color: #010101;
}

/* 데이터 행 — 1px 회색 구분선 + 호버 시 크림 */
.comm_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 62);
  border-bottom: 1px solid #dfdfdf;
  font-size: calc(var(--px) * 17);
  font-weight: 300;
  color: #010101;
  text-decoration: none;
  transition: background 0.2s ease;
}

.comm_row:hover {
  background: #f8f4eb;
}

/* 컬럼 셀 — 헤더/데이터 공용. 시안 좌표(÷1288): 번호 center 6.06% / 제목 left 18.16% / 작성자 67.6% / 등록일 81.06% / 조회수 94.02% */
.comm_c_no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12.12%;
}

.comm_c_subj {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 49.04%;
  padding-left: calc(var(--px) * 78);
  gap: calc(var(--px) * 10);
}

.comm_c_subj_tx {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0;
}

.comm_c_name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12.92%;
}

.comm_c_date {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13.96%;
}

.comm_c_hit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11.96%;
}

/* 비밀글 자물쇠 (노랑) — 제목 뒤. CSS 드로잉(몸통+고리) */
.comm_lock {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: calc(var(--px) * 13);
  height: calc(var(--px) * 16);
}

.comm_lock::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(var(--px) * 10);
  border-radius: 2px;
  background: #ffd11e;
}

.comm_lock::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  border: 2px solid #ffd11e;
  border-bottom: none;
  border-radius: calc(var(--px) * 8) calc(var(--px) * 8) 0 0;
}

/* 검색결과/글 없음 */
.comm_empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 120);
  font-size: calc(var(--px) * 17);
  color: #999;
}


/* ============================================================================
   📱 MOBILE ( max-width:599px ) — COMMUNITY (커뮤니티)
   공통(탭/탭헤더/카드그리드/페이징/글쓰기버튼)은 custom.css 모바일에서 처리.
   여기는 community 고유(하트 크기·새소식 뱃지·입점제안 목록형)만 재정의.
   ============================================================================ */
@media (max-width: 599px) {

  .con02_iner {
    padding-top: 6vw;
    padding-bottom: 15vw;
  }

  /* 페이지네이션 상단 간격 (PC 4vw → 모바일 여유) */
  .con02_paging {
    margin-top: 9vw;
  }

  /* 탭헤더 하트 — PC --px(8.4px) → vw (con12 와 동일 패턴) */
  .con02 .pet_tabhead_heart {
    width: 9vw;
  }

  /* PC 축소값(--px 1080/330)이 선택자 2단계라 모바일까지 이겨버림 → 공통 모바일값(2열 92vw)으로 되돌림 */
  .con02 .pet_cardgrid {
    width: 92vw;
  }

  .con02 .pet_card {
    width: 100%;
  }

  /* ===== 새소식 카드 분류 뱃지 (NOTICE/NEWS) — PC --px microscopic(2.7px) → vw ===== */
  .comm_cat {
    top: 3vw;
    left: 3vw;
    height: 6vw;
    padding: 0 2.6vw;
    border-radius: 1.8vw;
    font-size: 3vw;
    /* 뱃지 라벨 예외 (2.3~3vw) */
  }

  /* ===== 입점제안 목록형(.comm_list) — PC 1288px 5열 테이블(264px 붕괴) → 카드형 행 reflow.
     제목(1줄) + 작성자·등록일(메타 1줄). 번호·조회수는 모바일서 숨김. ===== */
  .comm_board {
    width: 92vw;
    padding-top: 0;
    /* 글쓰기 버튼이 흐름에 들어오므로 상단 확보 여백 제거 */
  }

  /* 글쓰기 버튼(공통 pet_btn 모바일=중앙 알약) — absolute → in-flow 가운데 정렬.
     ★ static 아닌 relative: 화살표(.pet_btn_arw absolute)의 기준(positioning context)이라
     static 이면 화살표가 .comm_board 우측끝으로 튐 → relative + top/right auto 로 오프셋만 무력화.
     위 3vw(+board 2vw=총 5vw, 카드그리드 간격과 통일) / 아래 5vw 로 상하 여백 균형 */
  .comm_write {
    position: relative;
    top: auto;
    right: auto;
    align-self: center;
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  /* 컬럼 헤더 라벨 행 숨김 (카드형 행이라 불필요) */
  .comm_list_head {
    display: none;
  }

  /* 데이터 행 → 세로 카드 */
  .comm_row {
    flex-wrap: wrap;
    height: auto;
    padding: 3.6vw 2vw;
    column-gap: 3vw;
    row-gap: 1.4vw;
    font-size: 3.3vw;
  }

  /* 번호·조회수 숨김 (모바일 카드형에서 라벨 없이 bare number 는 모호) */
  .comm_c_no,
  .comm_c_hit {
    display: none;
  }

  /* 제목 — 풀폭 1줄 (자물쇠 동반) */
  .comm_c_subj {
    order: 1;
    width: 100%;
    padding-left: 0;
    justify-content: flex-start;
    gap: 2vw;
    font-size: 3.9vw;
  }

  /* 작성자·등록일 — 메타 1줄 */
  .comm_c_name,
  .comm_c_date {
    order: 2;
    width: auto;
    justify-content: flex-start;
    font-size: 3.3vw;
  }

  /* 비밀글 자물쇠 — PC --px microscopic → vw (몸통/고리 크기·고리 라운드) */
  .comm_lock {
    width: 3.4vw;
    height: 4.2vw;
  }

  .comm_lock::before {
    height: 2.6vw;
  }

  .comm_lock::after {
    width: 2.2vw;
    height: 2.2vw;
    border-radius: 2vw 2vw 0 0;
  }

  /* 글 없음 */
  .comm_empty {
    height: auto;
    padding: 12vw 4vw;
    font-size: 3.5vw;
  }

}