@charset "UTF-8";
/**
 * packageName    : style_cheogajip.css
 * fileName       : style_cheogajip.scss
 * client         : fromtoM
 * version        :  1.0
 * author         : jesong
 * date           : 2026-07-27
 * description    : 처갓집(처돌이카) 이벤트 전용 css
 *                  ※ 공용 템플릿(style.css)과 물리적으로 분리된 파일.
 *                     타 브랜드 납품 시 이 파일만 제외하면 됨.
 *                     style.scss 에 절대 import 하지 말 것.
 * ===========================================================
 * DATE              AUTHOR             NOTE
 * -----------------------------------------------------------
 * 2026-07-27        jesong       최초 생성
 * Created By jesong on 2026-07-27
 * Copyright © 2026 Wylie Corp. All Rights Reserved.
 */
/* 정의 전용 - css 출력 없음 */
/* base, layout, components, pages 는 import 금지 (템플릿 전체가 중복 출력됨) */
.cheogajip {
  /* 이벤트 대표 이미지 */
  /* .content 의 첫 요소이므로 고정 헤더(.header, 48px) 높이만큼 상단 여백 확보 */
  /* 날짜별 메뉴 */
  /* 위치 권한 허용 안내
     .setting-permissions 원본(_order.scss)은 타임세일 다크 배너용이라 흰색 텍스트.
     흰 배경 위에 놓이므로 색상/정렬만 재정의 */
  /* 행사지 리스트 */
  /* ------------------------------------------------------------------
     메뉴 목록 - 타임세일 컴포넌트 재사용 (원본은 _order.scss 의 다크 퍼플 테마)
     ------------------------------------------------------------------ */
  /* 원본은 섹션 전체가 다크 퍼플이지만, 디자인상 레드는 카운트다운 배너 영역까지만
     적용되고 상품 목록은 흰 배경. 배경은 각 하위 영역이 직접 그림 */
  /* 카운트다운 배너 영역: 브랜드 레드
     원본은 타임세일 비주얼 이미지 자리(padding-top 52%)를 확보하나 처돌이카는 미사용 */
  /* 원본에 없는 래퍼 - 좌우 여백 담당 */
  /* ------------------------------------------------------------------
     주문 내역 - 재주문 버튼(찜/담기/주문하기) 영역
     ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------
     스탬프(CGJ_REW_1, CGJ_REW_1_01)
     공용 스탬프(_reward.scss)에서 처갓집 디자인과 달라지는 부분만 재정의.
     .cheogajip 은 처돌이카 이벤트 화면과 공유하므로 반드시 .stamp 안에서만 적용
     ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------
     스탬프 적립 매장 선택 팝업(FTM_FO_APP_REW_2_02)
     팝업 마크업은 .container 밖에 있으므로 팝업 루트에 .cheogajip 을 함께 사용.
     공용 .store-list-wrap 의 전체폭 구분선 대신 좌우 20px 들여쓴 구분선 사용
     ------------------------------------------------------------------ */
}
.cheogajip .cheogajip-visual {
  padding-top: 48px;
  background-color: #FFFFFF;
  /* 헤더 여백을 대표 이미지가 가지므로 다음 섹션의 상단 여백은 해제 */
}
.cheogajip .cheogajip-visual img {
  display: block;
  width: 100%;
}
.cheogajip .cheogajip-visual + [class^=round-section].top-none-round {
  padding-top: 20px;
}
.cheogajip .cheogajip-date-menu {
  margin: 0 -20px;
  padding: 0 20px;
}
.cheogajip .cheogajip-date-menu > ul {
  padding: 0;
  gap: 0 8px;
}
.cheogajip .setting-permissions {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0 8px;
  margin-top: 20px;
}
.cheogajip .setting-permissions .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0 8px;
  color: #999999;
}
.cheogajip .setting-permissions .text::before {
  content: "";
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 24px;
  height: 24px;
  background: url("/assets/images/common/icon/ico24_notice_gray.svg") no-repeat center/contain;
}
.cheogajip .setting-permissions .button-group {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}
.cheogajip .setting-permissions .button-s.transparent {
  background-color: #FFFFFF;
  color: #222222;
}
.cheogajip .cheogajip-store-list {
  margin-top: 8px;
  /* 거리 - 공용 아이콘(ico16_distance.svg, #444)을 브랜드 컬러 핀으로 교체 */
  /* 운영시간 - .store-distance 와 동일 구조 */
  /* 준비중/조기마감/종료/오픈 대기: 진입 불가
     store_select_list(_store_list.html)의 .img-wrap.preparing 패턴을 따르되,
     행사지는 상태 문구가 가변이므로 data-status 값으로 출력 */
}
.cheogajip .cheogajip-store-list .store-distance {
  gap: 0 2px;
}
.cheogajip .cheogajip-store-list .store-distance .ico.distance-16 {
  background-image: url("/assets/images/event/cheogajip/ico16_distance_red.svg");
}
.cheogajip .cheogajip-store-list .store-time {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0 2px;
  white-space: nowrap;
}
.cheogajip .cheogajip-store-list .store-time .ico.time-24 {
  width: 16px;
  height: 16px;
  background-image: url("/assets/images/event/cheogajip/ico16_time_cheogajip.svg");
}
.cheogajip .cheogajip-store-list .store-time strong {
  color: #444444;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0;
  font-weight: 600;
}
.cheogajip .cheogajip-store-list li.disabled .store-wrap {
  cursor: default;
}
.cheogajip .cheogajip-store-list li.disabled .img-wrap.preparing::before {
  /* 딤은 썸네일 전체(72px)를 덮고, 문구 영역만 46px 로 제한해
     '10:30 오픈' · '조기 마감' 이 어절 단위로 2줄 노출되도록 함 (디자인 기준) */
  content: attr(data-status);
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 13px; /* (72 - 46) / 2 */
  text-align: center;
  word-break: keep-all;
}
.cheogajip .time-sale-wrap {
  padding: 0 0 32px;
  background: #FFFFFF;
}
.cheogajip .timer-cont-box {
  position: relative;
  padding: 20px 0 24px;
  background-color: var(--primary);
  /* 처돌이 캐릭터: 타이머 박스 좌측 하단에 겹쳐 노출 */
}
.cheogajip .timer-cont-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 86px;
  height: 68px;
  background: url("/assets/images/event/cheogajip/cheogajip_timer_mascot.png") no-repeat left bottom/contain;
}
.cheogajip .timer-cont-wrap {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  padding: 16px 20px;
  height: auto;
  min-height: 102px;
}
.cheogajip .timer-cont-wrap::before {
  background-color: #B8000E;
}
.cheogajip .timer-cont-wrap .text {
  margin-bottom: 12px;
}
.cheogajip .time-sale-cont {
  padding: 0 20px;
}
.cheogajip .time-sale-list .menu-wrap .img-wrap {
  border-radius: 8px;
}
.cheogajip .order-list .menu-set-wrap .menu-wrap .menu-info {
  /* 구분선은 재주문 버튼 아래(li)로 옮기므로 해제 */
  border-bottom: none;
  padding-bottom: 0;
}
.cheogajip .order-list ul li {
  padding-bottom: 20px;
  border-bottom: 1px solid #EEEEEE;
}
.cheogajip .order-list ul li:last-child {
  border-bottom: none;
}
.cheogajip .order-list .reorder-group {
  margin-top: 16px;
  gap: 0 8px;
}
.cheogajip .order-list .reorder-group .button-favorite-menu {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}
.cheogajip.stamp {
  /* 매장 선택 영역과 스탬프 정보는 회색 간격 없이 한 카드로 이어지고
     구분은 .current-change-cont.line 이 그린 1px 선이 담당.
     (.current-top + .round-section 과 동일한 방식) */
  /* 스탬프 적립 기간: 첫 적립일 ~ 관리자 설정 종료일
     [i] 버튼은 "적립 기간은 매장별로 상이합니다." 툴팁 호출 */
  /* 내 스탬프: 보유 수량만 브랜드 컬러 */
  /* 스탬프판: 한 행에 5개 고정(최대 15개), 5개 미만인 행은 좌측 정렬 */
  /* 다음 리워드 안내: 가장 가까운 리워드까지 남은 스탬프 수와 쿠폰명 */
  /* 이용내역 타이틀 ~ 적립 기간 표기(기간설정 버튼 없음) */
}
.cheogajip.stamp .round-section.top-none-round {
  padding-bottom: 0;
}
.cheogajip.stamp .round-section.top-none-round + .round-section {
  margin-top: 0;
  padding-top: 24px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cheogajip.stamp .stamp-period {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0 8px;
  padding: 12px 16px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background-color: #FFFFFF;
  /* 툴팁이 [i] 버튼 기준으로 열리도록 라벨 그룹을 기준 요소로 사용 */
}
.cheogajip.stamp .stamp-period .period-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0 2px;
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  color: var(--primary);
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0;
  font-weight: 400;
}
.cheogajip.stamp .stamp-period .period-date {
  color: #444444;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0;
  font-weight: 400;
  text-align: right;
}
.cheogajip.stamp .stamp-period .button-tooltip {
  width: 20px;
  height: 20px;
}
.cheogajip.stamp .stamp-period .tooltip.top-center {
  top: unset;
  right: 10px;
  bottom: calc(100% + 10px);
  left: unset;
  z-index: 10;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  background-color: #444444;
  white-space: nowrap;
}
.cheogajip.stamp .stamp-period .tooltip.top-center::before {
  top: unset;
  right: unset;
  bottom: -8px;
  left: 50%;
  margin-left: -6px;
  background-image: none;
  background-color: #444444;
  -webkit-mask: url("/assets/images/common/icon/ico12x8_triangle.svg") no-repeat center/12px 8px;
  mask: url("/assets/images/common/icon/ico12x8_triangle.svg") no-repeat center/12px 8px;
}
.cheogajip.stamp .stamp-total {
  margin-top: 24px;
}
.cheogajip.stamp .stamp-total .total-num .num {
  color: var(--primary);
}
.cheogajip.stamp .my-stamp-list {
  padding-top: 24px;
  /* 처돌이 캐릭터 스탬프: 적립/미적립 모두 이미지로 노출 */
}
.cheogajip.stamp .my-stamp-list ul, .cheogajip.stamp .my-stamp-list[class*=stamp-] ul {
  grid-template-columns: repeat(5, 48px);
  grid-template-rows: auto;
  gap: 16px 0;
}
.cheogajip.stamp .my-stamp-list.type-img .stamp img {
  width: 48px;
  height: 48px;
}
.cheogajip.stamp .stamp-guide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2px 0;
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--secondary-03);
  text-align: center;
}
.cheogajip.stamp .stamp-guide .guide-text {
  color: #222222;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0;
  font-weight: 400;
}
.cheogajip.stamp .stamp-guide .guide-text strong {
  color: var(--primary);
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0;
  font-weight: 600;
}
.cheogajip.stamp .stamp-guide .guide-coupon {
  color: var(--primary);
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0;
  font-weight: 600;
}
.cheogajip.stamp .stamp-infor-cont .dot-text {
  margin-top: 16px;
}
.cheogajip.stamp .sub-title:has(+ .data-setting-wrap) {
  margin-bottom: 8px;
}
.cheogajip.stamp .use-list-cont {
  margin-top: 24px;
  padding-top: 24px;
}
.cheogajip.stamp .stamp-detail-cont .item-wrap + .item-wrap {
  margin-top: 2px;
}
.cheogajip .stamp-store-select-list {
  /* 매장명, 선택된 매장은 뒤에 체크 노출 */
  /* {적립 스탬프}/{전체 스탬프} */
}
.cheogajip .stamp-store-select-list .store-name-select {
  position: relative;
  padding: 0 20px;
  height: 64px;
}
.cheogajip .stamp-store-select-list .store-name {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0 8px;
  color: #222222;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  font-weight: 400;
}
.cheogajip .stamp-store-select-list .active .store-name::after {
  content: "";
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: var(--primary);
  -webkit-mask: url("/assets/images/common/icon/ico24_check_line_black.svg") no-repeat center/contain;
  mask: url("/assets/images/common/icon/ico24_check_line_black.svg") no-repeat center/contain;
}
.cheogajip .stamp-store-select-list .num {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  margin-left: auto;
  color: #757575;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  font-weight: 600;
}
.cheogajip .stamp-store-select-list .num em {
  color: #444444;
}
.cheogajip .stamp-store-select-list li + li .store-name-select::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background-color: #EEEEEE;
}
/*# sourceMappingURL=style_cheogajip.css.map */