@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-쿠폰(쿠프) 목록: 결제 e-쿠폰 선택 팝업과 좌우 간격 통일.
   .round-section(좌우 20px) 안의 .mobile-gift-wrap(padding 20px)이 겹쳐 좌우 40px가 되던 것을 팝업과 같은 20px로 맞춤. */
.mobile-gift-wrap.ecoupon-list-dev {
    padding-left: 0;
    padding-right: 0;
}

/* 결제화면 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;
}

/* 나만의 메뉴 리스트 - 대표 상품명 + 나머지 상품명 나열 : 한 줄 강제/말줄임 대신
   영역을 넘치면 자연스럽게 줄바꿈되도록 처리 (Figma 사용자앱 스크린샷 4번, 2026-09-17 요청) */
.my-own-name-line-dev {
    display: block;
    width: 100%;
    white-space: normal;
    word-break: break-word;
}

.my-own-name-txt-dev,
.my-own-name-extra-dev {
    white-space: normal;
}

/* 나만의 메뉴 - 배달 주문 확인팝업 배달지 안내 문구 (적용 위치: mobile templates/pages/myOwnMenu/my_own_menu.html) */
.deli-order-addr-dev {
    margin-top: 8px;
    color: #757575;
    font-size: 16px;
    line-height: 160%;
    font-weight: 400;
}

/* 나만의 메뉴 등록/수정 팝업 - 상품명 목록을 콤마로 구분해 하나의 span에 표시하도록 변경하면서
   .option-name span::before 의 불릿(점) 구분자가 불필요해져 제거
   (적용 위치: mobile templates/pages/myOwnMenu/my_own_menu_regist_popup.html) */
.myown-menu-wrap .option-name span::before {
    display: none;
}

/* 나만의 메뉴 등록/수정 팝업 - 대표명(name-ko)도 2개 이상 등록 시 콤마로 구분된 전체 상품명을 노출하도록
   변경하면서, style.css 공용 .menu-wrap .menu-name .name-ko 의 말줄임(ellipsis) 처리를 이 팝업만 해제.
   (.myown-menu-wrap 을 추가해 style.css 보다 뒤에 로드돼도 항상 이기도록 우선순위 확보)
   (Figma 17649-80166, 2026-09-17 요청, 적용 위치: my_own_menu_regist_popup.html) */
.myown-menu-wrap .menu-wrap .menu-name .name-ko {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* ----------------------------------------------------------------------------
 * 주문내역 리스트 카드 - 잘못된 위치의 구분선 제거
 * 적용 위치: mobile templates/pages/order/order_list.html
 * - style.css line 21 의 공용(다른 컴포넌트와 공유) 셀렉터 목록에 .order-list .menu-set-wrap
 *   .menu-wrap .menu-info 가 함께 묶여 있어, 주문 상품개수와 무관하게 항상 좁은(텍스트 폭만큼)
 *   border-bottom 이 노출됨 -> 위치가 어긋난 잘못된 선으로 보임. 이를 제거.
 *   (카드 간 구분선은 아래 .order-list ul li:not(:first-child)::before 로 통일해서 노출하며,
 *   예전엔 상품 2개 이상(외 N개 노출)일 때 .order-action-dev.multi-dev 에도 별도 구분선을 그려서
 *   그 경우에만 구분선이 2줄로 겹쳐 보였음 -> multi-dev 구분선은 제거하고 li::before 하나로 통일)
 *   (.order-list 를 중복 표기해 style.css 보다 뒤에 로드돼도 항상 이기도록 우선순위 확보)
 * -------------------------------------------------------------------------- */
.order-list.order-list .menu-set-wrap .menu-wrap .menu-info {
    border-bottom: none;
}

/* ----------------------------------------------------------------------------
 * 주문내역 리스트 - 리스트 항목(주문 건) 간 구분선
 * 적용 위치: mobile templates/pages/order/order_list.html (.order-list > ul > li)
 * - 주문이 2건 이상일 때 각 주문 카드를 구분할 선이 전혀 없어 어디까지가 한 주문인지
 *   구분이 안 됨. .menu-info 에 border-top을 걸면 카드 내부(매장명 아래, 이미지/상품정보 위)에
 *   선이 생겨 위치가 어긋나므로, li 최상단(=이전 카드의 담기/주문하기 버튼 아래, 즉 카드 경계)에
 *   가상요소(::before)로 선을 추가. li 자체에 margin/padding을 주면 실제 카드 레이아웃이
 *   밀리므로, 장식용 ::before 박스의 margin으로만 위치를 잡는다.
 *   가로폭은 메뉴리스트처럼 이미지 영역은 제외 - margin-left 88px(이미지 72px + gap 16px,
 *   style.css:10603-10621 .menu-wrap{gap:0 16px}/.img-wrap{width:72px} 기준)로 인셋.
 * -------------------------------------------------------------------------- */
.order-list ul li:not(:first-child)::before {
    content: "";
    display: block;
    height: 1px;
    margin: 16px 0 16px 88px;
    background-color: #EEEEEE;
}

/* 상품 리스트(#_itemList)는 .order-list 클래스를 공유하지만 자체 .menu-info 구분선을 쓰므로,
   위 li::before 구분선은 여기서만 무효화한다. */
#_itemList li:not(:first-child)::before {
    content: none;
}

/* ----------------------------------------------------------------------------
 * 주문상세 팝업 - 픽업번호/전화걸기 영역 레이아웃 보정
 * 적용 위치: 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: #FAB866;
}

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

/* 매장별 행사관리(TB_STORE_EVENT) / 이벤트 관리(TB_EVENT_STANDARD)에서 등록한 뱃지는
   유형(증정/할인/포인트/스탬프)과 무관하게 단일 색상으로 노출 */
.label.badge-event-dev {
    background-color: #3DABD8;
}

/* ----------------------------------------------------------------------------
 * 증정상품(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;
}

/* ----------------------------------------------------------------------------
 * 주문내역 리스트 하단 여백 (하단 고정 영역이 없어 마지막 li가 화면 끝에 붙는 문제)
 * 적용 위치: pages/order/order_list.html
 * 주의: .content 는 배경이 회색(#EEEEEE)이라 거기에 padding을 주면 리스트 카드(흰색)
 *       밖으로 회색 여백이 생겨 이질감이 든다. 흰 배경인 .order-list 안쪽에 여백을 준다.
 * -------------------------------------------------------------------------- */
.order-list-wrap .order-list {
    padding-bottom: 40px;
}


/* ----------------------------------------------------------------------------
 * 이벤트 상세 '지금 바로 주문해 보세요' 대상상품 가로 스크롤 리스트 (FTM_FO_APP_COM_2_02)
 * 적용 위치: pages/event/event_view.html
 * -------------------------------------------------------------------------- */
.event-target-menu-dev .event-target-menu-title-dev {
    margin-bottom: 16px;
    color: #222222;
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
}

.event-target-menu-dev .event-target-menu-list-dev {
    display: flex;
    gap: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.event-target-menu-dev .event-target-menu-list-dev::-webkit-scrollbar {
    display: none;
}

.event-target-menu-dev .event-target-menu-list-dev li {
    flex: 0 0 120px;
    width: 120px;
    scroll-snap-align: start;
    cursor: pointer;
}

.event-target-menu-dev .img-wrap-dev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background-color: #F5F5F5;
    border-radius: 3px;
    overflow: hidden;
}

.event-target-menu-dev .img-wrap-dev img {
    width: 100%;
    height: 90px;
    object-fit: contain;
}

.event-target-menu-dev .name-dev {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    color: #444444;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    word-break: keep-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 이벤트 리스트: [전체-진행중-종료] 칩 탭(.option-menu)과 리스트를 한 영역으로 (시안 - 헤더 아래 11px, 칩 간격 8px, 리스트까지 19px) */
/* style.css 가 나중에 로드되므로 [class^=round-section]:first-child(padding-top:68px)보다 우선순위를 높게 지정 */
.content > [class^=round-section].event-list-section-dev:first-child {
    padding-top: 59px; /* 헤더(48px) + 11px */
}
.event-st-menu-dev.option-menu > ul {
    gap: 8px;
    padding: 0 0 19px;
}

/* 멤버십 상세 프로그레스 바 등급별 컬러 (membership.html .membership-achieving)
   - 큰처돌이(302001)=grade-basic, 왕처돌이(302003)=grade-silver, 특급처돌이(302004)=grade-gold
   - style.css 가 이 파일보다 나중에 로드되므로 .membership-achieving 스코프로 우선순위를 높여 덮어쓴다 */
.membership-achieving .grade-cont.grade-basic .membership-gauge .gauge-background .percentage-value {
    background: linear-gradient(90deg, #A5E88A 0%, #4CAF50 100%);
}
.membership-achieving .grade-cont.grade-silver .membership-gauge .gauge-background .percentage-value {
    background: linear-gradient(90deg, #87D6F7 0%, #1E88E5 100%);
}
.membership-achieving .grade-cont.grade-gold .membership-gauge .gauge-background .percentage-value {
    background: linear-gradient(90deg, #E0B0FF 0%, #9D4EDD 100%);
}

/* 프리퀀시 적립완료/미션달성 팝업 아이콘 (order_detail_popup.html #frequencyMissionCompletePopup) */
.ico.event-blue-96 {
    width: 96px;
    height: 96px;
    background-image: url("/assets/images/common/icon/ico96_event_blue.png");
}