@charset "UTF-8";
/* ============================================================================
 * style_dev.css  —  개발팀 전용 CSS
 * ----------------------------------------------------------------------------
 * - style.css 는 퍼블팀이 별도로 형상관리하므로 개발팀은 절대 수정하지 않는다.
 * - 개발팀이 추가하는 모든 CSS 는 이 파일에만 작성한다.
 * - 본 파일은 config.html 에서 style.css "앞"에 로드된다.
 *   따라서 동일 우선순위(specificity) 충돌 시, 나중에 로드되는 style.css 가 우선 적용된다.
 *   => 신규 컴포넌트 스타일만 추가하고, 기존 style.css 선택자 재정의는 지양한다.
 *      (부득이하게 덮어써야 하면 퍼블팀과 협의 / style.css 에 반영 요청)
 * - 클래스 네이밍은 '-dev' 접미사를 붙여 퍼블 클래스와 충돌을 피한다.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 로그인 상단 메인 비주얼 (캐릭터 이미지 + 안내 배너)
 * 적용 위치: mobile templates/pages/login/login.html
 * -------------------------------------------------------------------------- */
.login-main-dev {
    text-align: center;
}

/* 디자인 스펙: 이미지 width 311 / height 112, top 108 / left 32 (375px 아트보드).
   round-section 좌우 padding(20px) + 311px 중앙정렬 => 375px 기준 좌우 32px 거터로 left:32 일치.
   원본 933x336 = 311:112 비율이므로 height:auto 로 자동 112px. */
.login-main-dev .login-main-img-dev {
    margin: 0 auto;
    font-size: 0; /* inline 이미지 하단 여백 제거 */
}

.login-main-dev .login-main-img-dev img {
    display: block;
    width: 311px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* 안내 배너 버튼 (이미지 '바로 아래' 붙임)
   디자인 스펙(Figma): width 311 / padding 16 / bg #F9D7E0 / radius 8 /
   border 1px #C8072A / 글자색 #C8072A. 색은 브랜드컬러라 var(--primary) 사용. */
.login-notice-banner-dev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 24px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #F9D7E0;
    border: 1px solid var(--primary, #C8072A);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.login-notice-banner-dev .login-notice-banner-dev__text {
    display: block;
    line-height: 1.6;
}

.login-notice-banner-dev .login-notice-banner-dev__text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #C8072A);
}

.login-notice-banner-dev .login-notice-banner-dev__text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--primary, #C8072A);
}

/* 우측 화살표(>) — 기존 ico24_arrow_right.svg(회색 #444) 재사용 +
   CSS mask 로 브랜드컬러 틴트. (.ico 는 background-image 방식이라 색 고정이므로 mask 사용) */
.login-notice-banner-dev .login-notice-banner-dev__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--primary, #C8072A);
    -webkit-mask: url("/assets/images/common/icon/ico24_arrow_right.svg") no-repeat center / contain;
    mask: url("/assets/images/common/icon/ico24_arrow_right.svg") no-repeat center / contain;
}

/* e-쿠폰(쿠프) 목록: 명칭(보유 e-쿠폰) 제거 후 정렬 select 우측정렬 + 리스트와 간격 확보.
   .title-box.other 기본값(justify-content:space-between) 을 덮기 위해 3-클래스 선택자 사용. */
.title-box.other.ecoupon-sort-dev {
    justify-content: flex-end;
    padding-bottom: 16px;
}

/* 결제화면 e-쿠폰 선택 팝업: 선택된 카드 브랜드컬러 테두리.
   .mobile-gift-cont(padding:1px + 회색bg) 기법 재사용 → 선택 시 2px 브랜드컬러 프레임. */
.ecoupon-select-item {
    cursor: pointer;
}
.ecoupon-select-item.selected .mobile-gift-cont {
    padding: 2px;
    background-color: var(--primary, #C8072A);
}

/* 결제 e-쿠폰 선택 팝업(FTM_FO_APP_Pay_7) 레이아웃 보정 (#eCouponSelectPopup 스코프) */
/* ④ 흰색 리스트 영역이 하단까지 꽉 차도록 — 기본 .popup-body.gray-bg(#EEEEEE) 회색 제거 */
#eCouponSelectPopup .popup-body.gray-bg {
    background-color: #FFFFFF;
}

/* ----------------------------------------------------------------------------
 * SNS 간편로그인 유도 팝업 (상단 안내 배너 클릭 시 노출되는 바텀시트)
 * 적용 위치: mobile templates/pages/login/login.html (#snsLoginPopupDev)
 * 팝업 오픈/닫기: 공통 layerPopup / closePopup (.bottom-sheet.popup-wrap 구조)
 * 원형 SNS 버튼(56px/카카오·네이버·애플)은 기존 .sns-login 재사용.
 * -------------------------------------------------------------------------- */
.sns-login-popup-dev {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 20px 16px;
    text-align: center;
}

.sns-login-popup-dev__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sns-login-popup-dev__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #222222;
}

.sns-login-popup-dev__desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #757575;
}

/* 버튼 영역: 기존 .sns-login(padding-top:48px) 상단 여백을 디자인 스펙(32px)으로 축소 */
.sns-login-popup-dev .sns-login {
    padding-top: 32px;
}

.sns-login-popup-dev__normal {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #757575;
    text-decoration: underline;
    cursor: pointer;
}
/* 하단 요약(footer)은 우지와 동일한 object-wrap.amount-area 전용 컴포넌트로 교체.
   우측정렬/라인없음/글씨크기/'총'공백/버튼간격 모두 style.css 네이티브 제공 → 별도 보정 CSS 불필요(제거). */

/* ----------------------------------------------------------------------------
 * 나만의 메뉴 리스트 카드 — 담기 버튼 추가 (FTM_FO_APP_ORD_4)
 * 적용 위치: mobile templates/pages/myOwnMenu/my_own_menu.html
 * - 상품명 옆 '수정' 배지 가로 배치, 수량("총 N개") 표시, 하단 버튼 영역(가격 제거 후
 *   담기/주문하기 2버튼) 상단 여백은 퍼블(style.css)에 아직 반영 전이라 여기서 보정.
 *   추후 퍼블 반영 시 이 블록은 제거.
 * -------------------------------------------------------------------------- */
.name-top-dev {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.item-cnt-dev {
    margin-top: 4px;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0;
    font-weight: 400;
    color: #444444;
}

.item-cnt-dev strong {
    font-weight: 700;
}

.my-own-menu-wrap .action-group-dev {
    margin-top: 20px;
}

/* ----------------------------------------------------------------------------
 * 주문상세 팝업 - 픽업번호/전화걸기 영역 레이아웃 보정
 * 적용 위치: mobile templates/pages/order/order_detail_popup.html (.calling-number)
 * - 기존 style.css .calling-number는 아이콘 + 인라인 흐름 배치라, 퍼블에서
 *   받은 디자인(아이콘 없이 좌측 픽업번호/번호 - 우측 전화걸기 버튼 양끝 정렬)과
 *   달라 보정. 추후 퍼블 반영 시 이 블록은 제거.
 * -------------------------------------------------------------------------- */
.calling-number.calling-number-dev {
    justify-content: space-between;
    align-items: center;
}
/* .button-s/.button-p 기본 클래스의 flex:1(여러 버튼이 한 줄에서 폭을 나눠 갖도록 하는 값)이
   이 컨테이너에서는 남는 공간을 혼자 다 차지해버리므로 원래 크기(xs24)로 고정 */
.calling-number.calling-number-dev .button-s {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
 * 스탬프 no-data: 이용내역 없을 때 화면 중앙 배치
 * 적용 위치: mobile templates/pages/reward/stamp.html
 * -------------------------------------------------------------------------- */
.stamp-nodata-dev {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------------------------
 * 헤더 검색 버튼(테스트) - 뒤로가기 버튼 우측에 배치
 * 적용 위치: mobile templates/common/fragments/header.html (.btn-menu-search)
 * - .header .btn-menu-prev(position:absolute; left:14px; width:32px)와 같은 방식으로
 *   절대위치를 줘야 header-title(width:100%) 중앙정렬이 안 밀림.
 *   기존 .btn-menu-search는 .btn-group(우측) 안에서만 쓰도록 되어있어 좌측 배치용 보정 필요.
 * -------------------------------------------------------------------------- */
.header .btn-menu-search.btn-menu-search-left-dev {
    position: absolute;
    top: 8px;
    left: 58px;
}

/* ----------------------------------------------------------------------------
 * 받을 수 있는 쿠폰 바텀시트 (쿠폰 다운로드 팝업)
 * 적용 위치: mobile templates/pages/reward/coupon_download_popup.html
 * - 기존 .coupon-cont는 "이미 발급된 쿠폰 사용" 화면 전용(사용/만료 상태)이라
 *   구조가 달라 재사용하지 않고, .label/.label-wrap만 재사용하고 나머지는 신규 작성.
 * -------------------------------------------------------------------------- */
.coupon-download-list-dev {
    max-height: 55vh;
    overflow-y: auto;
    margin-bottom: 16px;
}

.coupon-download-item-dev {
    padding: 16px 0;
    border-bottom: 1px solid #EEEEEE;
}

.coupon-download-item-dev:first-child {
    padding-top: 0;
}

.coupon-download-item-dev:last-child {
    border-bottom: none;
}

.coupon-name-dev {
    margin-top: 8px;
    font-size: 14px;
    line-height: 160%;
    color: #444444;
    font-weight: 400;
}

.coupon-discount-title-dev {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
    color: #222222;
}

.coupon-condition-dev {
    margin-top: 4px;
    font-size: 13px;
    line-height: 160%;
    color: #757575;
}

.coupon-download-bottom-dev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.coupon-meta-dev {
    font-size: 13px;
    color: #999999;
}

.coupon-meta-item-dev + .coupon-meta-item-dev::before {
    content: " · ";
}

.coupon-download-btn-dev {
    width: auto;
    flex: 0 0 auto;
    padding: 0 16px;
}

/* ----------------------------------------------------------------------------
 * 타임 할인 종료 카운트다운 바
 * 적용 위치: mobile templates/pages/item/menu_list.html
 * -------------------------------------------------------------------------- */
.time-sale-countdown-dev {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: #F5F5F5;
}

.time-sale-countdown-dev .ico {
    margin-right: 4px;
}

.time-sale-countdown-dev .label-text {
    font-size: 14px;
    line-height: 140%;
    color: #444444;
}

.time-sale-countdown-dev .time-text {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    color: #222222;
}

/* ----------------------------------------------------------------------------
 * 이벤트 카테고리 뱃지 (증정형/할인형/포인트/스탬프)
 * 적용 위치: 상품리스트/상품상세/장바구니/주문서/주문내역
 * TB_STORE_EVENT.EVENT_CATE(998001~998004), TB_EVENT_STANDARD.EVENT_TP(948005)
 * -------------------------------------------------------------------------- */
.label.badge-gift-dev {
    background-color: #83DE79;
}

.label.badge-discount-dev {
    background-color: #F46A6D;
}

.label.badge-point-dev {
    background-color: #F5EB7A;
}

.label.badge-stamp-dev {
    background-color: #78CEF5;
}

/* ----------------------------------------------------------------------------
 * 증정상품(998003) 받을래요/안 받을래요 선택 카드
 * 적용 위치: mobile templates/pages/pay/pay.html (.gift-item-receive)
 * -------------------------------------------------------------------------- */
.option-detail-cont.gift-item-receive {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.gift-item-receive .form-item.ckeck-type-radio {
    margin-top: 0;
    width: 100%;
}

.gift-item-receive .form-radio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.gift-item-receive .form-radio .radio-wrapper {
    width: 100%;
}

.gift-item-receive .form-radio .radio-wrapper .txt,
.gift-item-receive .form-radio .radio-wrapper input[type="radio"]:checked ~ .radio-mark ~ .txt {
    color: #757575;
    font-size: 14px;
    line-height: 160%;
    font-weight: 400;
}