/* ============================================================
   시스템 알림 모달 (가자 스타일)  v1 (2026-09-16)
   대상: #ErrorModal(errorOpen) / #ErrorTxtModal(errorTxtOpen) / #JoinComplateModal
   - Bootstrap 모달 동작(.modal('show'))은 그대로 두고 겉모습만 교체
   - 로그인 필요 모달(.lr-modal) 톤에 맞춤: 흰 카드 · 단색 아이콘 · 라운드 사각 버튼 · 그림자 없음
   - 스코프: .gz-sysmodal
   ============================================================ */

.gz-sysmodal .modal-dialog {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    /* SE(375) 기준 · 큰 화면은 통째로 확대 (최대 1.3배) */
    zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
}

.gz-sysmodal .modal-content {
    border: none;
    border-radius: 18px;
    padding: 26px 22px 20px;
    text-align: center;
    background: #fff;
    box-shadow: none;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    animation: gzSysPop .28s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes gzSysPop {
    0%   { transform: scale(.9); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* 배경 딤 */
.modal-backdrop.show { opacity: .55; }

/* 단색 아이콘 */
.gz-sysmodal .gz-sm-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    color: #F9781A;
}
.gz-sysmodal .gz-sm-icon svg { width: 100%; height: 100%; display: block; }
.gz-sysmodal .gz-sm-icon.is-success { color: #F9781A; }
/* 2026-09-29 실패 알림(아이디·비밀번호 찾기 결과 등) */
.gz-sysmodal .gz-sm-icon.is-fail { color: #E03131; }
/* 결과 아래 덧붙이는 보조 안내 한 줄 */
.gz-sysmodal .gz-sm-desc .gz-sm-sub {
    display: inline-block; margin-top: 6px;
    font-size: 12px; color: #9A928A; font-weight: 500; line-height: 1.5;
}

/* 제목 */
.gz-sysmodal .gz-sm-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.03em;
    color: #1F1815;
}

/* 본문 */
.gz-sysmodal .gz-sm-desc {
    margin: 8px 2px 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.02em;
    color: #6B635B;
    word-break: keep-all;
}

/* 버튼 */
.gz-sysmodal .gz-sm-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 13px 0;
    border: none;
    border-radius: 13px;
    background: linear-gradient(100deg, #FFA04A 0%, #FB7F22 48%, #F26A0C 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    box-shadow: none;
    text-decoration: none;
}
.gz-sysmodal .gz-sm-btn:hover,
.gz-sysmodal .gz-sm-btn:focus { color: #fff; text-decoration: none; outline: none; }
.gz-sysmodal .gz-sm-btn:active { transform: translateY(1px); }


/* ============================================================
   페이지 모달 공통 틀 (가자 스타일)  v1 (2026-09-16)
   - 1단계: 겉모양만 통일 (카드 · 제목줄 · 닫기 · 하단 버튼)
   - .modal-body 내부는 건드리지 않음 → 목록·입력칸·본문 기능 버튼 보호
   - 연출용 모달(배경 이미지 등 modal-content 에 전용 클래스가 있는 것)에는 적용하지 않음
   - 스코프: .gz-modal
   ============================================================ */

.gz-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* 제목줄 */
.gz-modal .modal-header {
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #F1EBE1;
}
.gz-modal .modal-title {
    font-size: 17px;
    /* 원본에 인라인 style="font-weight: bold" 가 있어 !important 필요 */
    font-weight: 800 !important;
    line-height: 1.3;
    letter-spacing: -.03em;
    color: #1F1815;
}

/* 닫기(X) */
.gz-modal .modal-header .close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 50%;
    background: #F5F1EA;
    color: #6B635B;
    opacity: 1;
    text-shadow: none;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gz-modal .modal-header .close:hover,
.gz-modal .modal-header .close:focus {
    background: #EEE8DE;
    color: #1F1815;
    opacity: 1;
    outline: none;
}

/* 하단 버튼 영역 */
.gz-modal .modal-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #F1EBE1;
    gap: 8px;
    flex-wrap: nowrap;
}
.gz-modal .modal-footer > * { margin: 0; }

.gz-modal .modal-footer .btn {
    flex: 1 1 0;
    padding: 11px 12px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: none;
    font-family: inherit;
}
.gz-modal .modal-footer .btn:focus { box-shadow: none; outline: none; }
.gz-modal .modal-footer .btn:active { transform: translateY(1px); }

/* 주 액션 (확인·저장·보내기 등) */
.gz-modal .modal-footer .btn-primary,
.gz-modal .modal-footer .btn-warning,
.gz-modal .modal-footer .btn-success {
    background: linear-gradient(100deg, #FFA04A 0%, #FB7F22 48%, #F26A0C 100%);
    border-color: transparent;
    color: #fff;
}
.gz-modal .modal-footer .btn-primary:hover,
.gz-modal .modal-footer .btn-warning:hover,
.gz-modal .modal-footer .btn-success:hover { color: #fff; }

/* 보조 액션 (취소·닫기 등) */
.gz-modal .modal-footer .btn-secondary,
.gz-modal .modal-footer .btn-outline-secondary,
.gz-modal .modal-footer .btn-outline-dark,
.gz-modal .modal-footer .btn-light,
.gz-modal .modal-footer .btn_cancel {
    background: #fff;
    border-color: #E3DCD1;
    color: #4A423B;
}
.gz-modal .modal-footer .btn-secondary:hover,
.gz-modal .modal-footer .btn-outline-secondary:hover,
.gz-modal .modal-footer .btn-outline-dark:hover,
.gz-modal .modal-footer .btn_cancel:hover { background: #FAF7F2; color: #1F1815; }

/* 위험 액션 (삭제·탈퇴 등) - 실수 방지를 위해 주 액션과 구분 */
.gz-modal .modal-footer .btn-danger {
    background: #fff;
    border-color: #F1C9C2;
    color: #D64533;
}
.gz-modal .modal-footer .btn-danger:hover { background: #FFF6F5; color: #C9382B; }

/* 정보성 보조 */
.gz-modal .modal-footer .btn-info {
    background: #FFF5EC;
    border-color: #FFD8B8;
    color: #E56610;
}


/* ============================================================
   ② 입력형 모달 공통 (gz-form)  v1 (2026-09-16)
   - 대표: 로그인 > 아이디/비밀번호 찾기
   - 배송지·문의 작성 등 입력칸이 있는 모달에 그대로 복제해서 사용
   - 로그인 페이지 입력칸(.lg-input) 과 같은 톤
   - 사용: 모달에 class="modal fade gz-modal gz-form"
           입력 묶음 .gz-field > label.gz-label + input.gz-input
   ============================================================ */

/* SE(375) 기준 폭 + 큰 화면 통째로 확대 */
.gz-modal.gz-form .modal-dialog {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
}
.gz-modal.gz-form .modal-body { padding: 16px 18px 6px; }

/* 상단 안내 문구 */
.gz-modal .gz-form-intro {
    margin: 0 0 14px 2px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.02em;
    color: #8A8278;
}

/* 입력 묶음 */
.gz-modal .gz-field { margin-bottom: 12px; }
.gz-modal .gz-label {
    display: block;
    margin: 0 0 5px 2px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1F1815;
}
.gz-modal .gz-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 1.5px solid #E3DCD1;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: #1F1815;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.gz-modal .gz-input::placeholder { color: #BDB5AA; font-weight: 500; }
.gz-modal .gz-input:focus {
    border-color: #F9781A;
    box-shadow: 0 0 0 3px rgba(249, 120, 26, .12);
}
/* 브라우저 자동완성 하늘색 방지 */
.gz-modal .gz-input:-webkit-autofill,
.gz-modal .gz-input:-webkit-autofill:hover,
.gz-modal .gz-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #1F1815;
    transition: background-color 9999s ease-in-out 0s;
}

/* 입력 검증 오류 (jQuery validate 가 자동 삽입하는 label.error) */
.gz-modal label.error {
    display: block;
    margin: 5px 2px 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #D64533;
}
.gz-modal .gz-input.error { border-color: #E8A79E; }

/* ---------- ② 입력형 확장: 선택상자 / 긴 글 / 파일 / 비활성 (v1.1 2026-09-16) ---------- */

/* 라벨 옆 (선택) 표시 */
.gz-modal .gz-label-opt {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #9A928A;
}

/* 선택상자 - 기본 화살표 대신 가자 톤 화살표 */
.gz-modal select.gz-input {
    padding-right: 38px;
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239A928A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}

/* 긴 글 */
.gz-modal textarea.gz-input {
    height: 140px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: none;
}

/* 파일 첨부 */
.gz-modal input[type="file"].gz-input {
    height: auto;
    padding: 8px 10px;
    font-size: 13px;
    color: #6B635B;
    cursor: pointer;
}
.gz-modal input[type="file"].gz-input::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1.5px solid #E3DCD1;
    border-radius: 9px;
    background: #FAF7F2;
    color: #4A423B;
    font-size: 12.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}
.gz-modal input[type="file"].gz-input::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1.5px solid #E3DCD1;
    border-radius: 9px;
    background: #FAF7F2;
    color: #4A423B;
    font-size: 12.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

/* 비활성 (수정 불가 칸) */
.gz-modal .gz-input:disabled {
    background-color: #F5F2EC;
    color: #9A928A;
    cursor: default;
}

/* 첨부 이미지 미리보기 영역 - 비어 있으면 자리 차지 안 함 */
.gz-modal .gz-attach-preview:empty { display: none; }
.gz-modal .gz-attach-preview { margin-bottom: 12px; }
.gz-modal .gz-attach-preview img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #EFE9DA;
}

/* 입력칸 2칸 나란히 (검색 필터처럼 짧은 선택상자가 여러 개일 때) */
.gz-modal .gz-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.gz-modal .gz-row > .gz-field { min-width: 0; }

/* 모달 안 상품 미리보기 카드 (쿠폰발송 등) */
.gz-modal .gz-product {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px;
    background: #FAF7F2;
    border: 1px solid #EFE9DA;
    border-radius: 12px;
}
.gz-modal .gz-product-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}
/* 아직 이미지 주소가 채워지기 전(빈 src)엔 깨진 아이콘 숨김. JS 가 src 를 넣으면 자동 해제 */
.gz-modal .gz-product-thumb[src=""] { visibility: hidden; }
.gz-modal .gz-product-info { flex: 1 1 auto; min-width: 0; }
.gz-modal .gz-product-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #1F1815;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}
.gz-modal .gz-product-price {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #E56610;
}

/* 모달 안 안내문 박스 */
.gz-modal .gz-notice {
    margin: 2px 0 12px;
    padding: 10px 12px;
    background: #FAF7F2;
    border-radius: 10px;
}
.gz-modal .gz-notice p {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.02em;
    color: #8A8278;
    word-break: keep-all;
}
.gz-modal .gz-notice p + p { margin-top: 4px; }

/* 주소검색(다음 우편번호) - 숨김 상태에서 embed 되면 높이를 70px 로 잘못 재서
   검색창만 겨우 보이고 스크롤이 생김 → 최소 높이 확보 (onresize 가 더 크게 주면 그대로 따라감) */
#zipCodeModal #wrap { min-height: 400px; }


/* ============================================================
   ① 확인형 모달 공통 (gz-confirm)  v1 (2026-09-16)
   - "정말 ~할까요?" 처럼 되묻고 취소/확인 두 버튼만 있는 모달
   - 시스템 알림(.gz-sysmodal) 과 같은 카드: 단색 아이콘 · 가운데 제목 · 설명 · 버튼 2개
   - 사용: class="modal fade gz-modal gz-confirm"
           .gz-cf-icon(.is-danger) / .gz-cf-title / .gz-cf-desc
           .gz-cf-btns > .gz-cf-btn.is-cancel + .gz-cf-btn(.is-danger)
   - 되돌릴 수 없는 동작(탈퇴·삭제)은 아이콘·버튼에 is-danger
   ============================================================ */

.gz-modal.gz-confirm .modal-dialog {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
}
.gz-modal.gz-confirm .modal-content {
    padding: 26px 20px 18px;
    text-align: center;
    background: #fff;
    animation: gzSysPop .28s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* 단색 아이콘 */
.gz-modal .gz-cf-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    color: #F9781A;
}
.gz-modal .gz-cf-icon svg { width: 100%; height: 100%; display: block; }
.gz-modal .gz-cf-icon.is-danger { color: #E0473A; }

/* 제목 */
.gz-modal .gz-cf-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.03em;
    color: #1F1815;
    word-break: keep-all;
}

/* 설명 */
.gz-modal .gz-cf-desc {
    margin: 8px 2px 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.02em;
    color: #6B635B;
    word-break: keep-all;
    text-wrap: balance;
}
.gz-modal .gz-cf-desc:empty { display: none; }

/* 버튼 2개 */
.gz-modal .gz-cf-btns {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.gz-modal .gz-cf-btn {
    flex: 1 1 0;
    padding: 12px 0;
    border: 1.5px solid transparent;
    border-radius: 13px;
    background: linear-gradient(100deg, #FFA04A 0%, #FB7F22 48%, #F26A0C 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: none;
    cursor: pointer;
}
.gz-modal .gz-cf-btn:focus { outline: none; }
.gz-modal .gz-cf-btn:active { transform: translateY(1px); }
.gz-modal .gz-cf-btn.is-cancel {
    background: #fff;
    border-color: #E3DCD1;
    color: #4A423B;
}
.gz-modal .gz-cf-btn.is-danger {
    background: #E0473A;
    color: #fff;
}

/* 긴 안내문 박스 (선물 보내기 등) */
.gz-modal .gz-cf-notice {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #FAF7F2;
    border-radius: 12px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #6B635B;
    word-break: keep-all;
}
.gz-modal .gz-cf-notice b { color: #1F1815; font-weight: 700; }

/* 동의 체크 */
.gz-modal .gz-cf-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0 2px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.02em;
    color: #1F1815;
    word-break: keep-all;
    cursor: pointer;
}
.gz-modal .gz-cf-agree input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #F9781A;
    border-radius: 4px !important;
    cursor: pointer;
}
.gz-modal .gz-cf-agree.is-danger { color: #C9382B; }
.gz-modal .gz-cf-title:empty { display: none; }
/* 스크립트가 \n 넣은 문구를 실제 줄바꿈으로 표시 (한 줄로 작성된 동적 문구 칸에만 사용) */
.gz-modal .gz-cf-desc.is-pre { white-space: pre-line; }


/* ============================================================
   ③ 목록 선택형 모달 공통 (gz-list)  v1 (2026-09-16)
   - 쿠폰 선택 · 품절 대체상품 · 교환/합성 상품 선택 · 출석 보상 선택
   - 틀: 제목줄 + (요약 영역) + 스크롤 목록 + (하단 버튼)
   - 목록 항목: 썸네일 · 이름/보조정보 · 오른쪽 작은 버튼
   - 사용: class="modal fade gz-modal gz-list"
           .gz-ls-summary / ul.gz-ls-list > li.gz-ls-item / li.gz-ls-empty
   ============================================================ */

.gz-modal.gz-list .modal-dialog {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
}
.gz-modal.gz-list .modal-body { padding: 14px 16px 16px; }

/* 상단 요약 (안내문 · 점수 · 포인트) */
.gz-modal .gz-ls-summary {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #FAF7F2;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.02em;
    color: #6B635B;
    word-break: keep-all;
}
.gz-modal .gz-ls-summary p { margin: 0; }
.gz-modal .gz-ls-summary .is-warn { margin-top: 4px; color: #D64533; font-weight: 700; }
.gz-modal .gz-ls-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.gz-modal .gz-ls-stat {
    flex: 1 1 0;
    padding: 10px 12px;
    background: #FAF7F2;
    border-radius: 12px;
    text-align: center;
}
.gz-modal .gz-ls-stat span {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #8A8278;
    letter-spacing: -.02em;
}
.gz-modal .gz-ls-stat b {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    color: #1F1815;
    letter-spacing: -.02em;
}
.gz-modal .gz-ls-stat.is-accent b { color: #E56610; }
.gz-modal .gz-ls-error:empty { display: none; }
.gz-modal .gz-ls-error {
    margin: -4px 2px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #D64533;
}

/* 요약 안 가로줄 (라벨 · 값 · 버튼) */
.gz-modal .gz-ls-pointbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EFE9DA;
    color: #1F1815;
    font-weight: 700;
}
.gz-modal .gz-ls-pointbar b { color: #E56610; font-size: 15px; font-weight: 800; }
.gz-modal .gz-ls-pointbar .gz-ls-btn { margin-left: auto; }

/* 스크롤 목록 */
.gz-modal .gz-ls-scroll {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -4px;
    padding: 0 4px;
}
.gz-modal .gz-ls-scroll::-webkit-scrollbar { width: 4px; }
.gz-modal .gz-ls-scroll::-webkit-scrollbar-thumb { background: #E3DCD1; border-radius: 4px; }
.gz-modal .gz-ls-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 목록 항목 */
.gz-modal .gz-ls-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    padding: 10px;
    background: #fff;
    border: 1.5px solid #EFE9DA;
    border-radius: 14px;
}
.gz-modal .gz-ls-item:last-child { margin-bottom: 0; }
.gz-modal .gz-ls-item.is-selectable { cursor: pointer; }
.gz-modal .gz-ls-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #F7F4EF;
    object-fit: contain;
}
.gz-modal .gz-ls-info { flex: 1 1 auto; min-width: 0; text-align: left; }
.gz-modal .gz-ls-tag {
    display: inline-block;
    margin-bottom: 3px;
    padding: 1px 7px;
    border-radius: 6px;
    background: #FFF1E4;
    color: #E56610;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.gz-modal .gz-ls-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #1F1815;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}
.gz-modal .gz-ls-meta {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    color: #8A8278;
    letter-spacing: -.02em;
}
.gz-modal .gz-ls-price {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 800;
    color: #E56610;
    letter-spacing: -.02em;
}
.gz-modal .gz-ls-chip {
    display: inline-block;
    margin-right: 4px;
    padding: 0 6px;
    border-radius: 5px;
    background: #F1ECE4;
    color: #6B635B;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    vertical-align: 1px;
}

/* 항목 오른쪽 작은 버튼 */
.gz-modal .gz-ls-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(100deg, #FFA04A 0%, #FB7F22 48%, #F26A0C 100%);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
    cursor: pointer;
}
.gz-modal .gz-ls-btn:active { transform: translateY(1px); }
.gz-modal .gz-ls-btn.is-line {
    background: #fff;
    border: 1.5px solid #F9A15A;
    color: #E56610;
    padding: 6.5px 10.5px;
}

/* 선택 표시 (교환상품 선택: 기존 .gift_buy_mask_container 를 show/hide 로 토글)
   ※ display 는 지정하지 않음 → JS 가 css('display')=='block' 으로 선택 여부 판단 */
.gz-modal .gz-ls-item .gift_buy_mask_container {
    position: absolute;
    top: -1.5px; left: -1.5px; right: -1.5px; bottom: -1.5px;
    width: auto; height: auto;
    z-index: 1;
    background: rgba(249, 120, 26, .06);
    border: 2px solid #F9781A;
    border-radius: 14px;
    pointer-events: none;
}
.gz-modal .gz-ls-item .gift_buy_mask_container img { display: none; }
.gz-modal .gz-ls-item .gift_buy_mask_container::after {
    content: "";
    position: absolute;
    top: 50%; right: 11px;
    width: 24px; height: 24px;
    margin-top: -12px;
    border-radius: 50%;
    background: #F9781A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.gz-modal .gz-ls-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #E3DCD1;
    background: #fff;
}

/* 빈 목록 */
.gz-modal .gz-ls-empty {
    padding: 34px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #8A8278;
    background: #FAF7F2;
    border-radius: 14px;
    list-style: none;
}

/* 확인형 안 강조 숫자 박스 (포인트 전환 등) */
.gz-modal .gz-cf-hl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 2px;
    padding: 11px 14px;
    background: #FFF5EC;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #6B635B;
    letter-spacing: -.02em;
}
.gz-modal .gz-cf-hl b { font-size: 17px; font-weight: 800; color: #E56610; }
.gz-modal .gz-cf-warn {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #D64533;
    word-break: keep-all;
}
.gz-modal .gz-cf-hl b { margin-left: 12px; text-align: right; word-break: keep-all; }
.gz-modal .gz-cf-hl { white-space: nowrap; gap: 12px; }
.gz-modal .gz-cf-hl b { white-space: normal; margin-left: 0; }
.gz-modal .gz-cf-hl b.coupon-name { font-size: 15px; line-height: 1.35; }
/* 상품 정가 표시 - 사이트 공통 규칙대로 취소선 (쿠폰 할인금액에는 쓰지 않음) */
.gz-modal .gz-ls-price.is-strike { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.gz-modal .gz-ls-price.is-strike .gz-ls-chip { text-decoration: none; display: inline-block; }


/* ============================================================
   ④ 이미지·안내형 모달 공통 (gz-info)  v1 (2026-09-16)
   - 공지 팝업 · 등급 설명 · 출석부 · 카드 뽑기 · 이벤트 결과 · 이용방법
   - SE(375) 기준 폭 + 큰 화면 통째로 확대
   ============================================================ */

.gz-modal.gz-info .modal-dialog {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
}
.gz-modal.gz-info .modal-body { padding: 14px 16px 16px; }
.gz-modal.gz-info .modal-dialog-scrollable .modal-body { max-height: 460px; }

/* ── 메인 공지 팝업: 이미지가 주인공, 아래 텍스트 버튼 2개 ── */
.gz-modal.gz-notice-pop .modal-content { background: #fff; }
.gz-modal.gz-notice-pop .modal-body { padding: 0; }
.gz-modal.gz-notice-pop .modal-body img { display: block; width: 100%; }
.gz-modal.gz-notice-pop .gz-np-text:empty { display: none; }
.gz-modal.gz-notice-pop .gz-np-text {
    padding: 14px 16px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4A423B;
    word-break: keep-all;
}
.gz-modal.gz-notice-pop .gz-np-foot {
    display: flex;
    border-top: 1px solid #F1EBE1;
}
.gz-modal.gz-notice-pop .gz-np-foot button {
    flex: 1 1 0;
    padding: 10px 0;
    line-height: 18px;
    border: none;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: -.02em;
    cursor: pointer;
}
.gz-modal.gz-notice-pop .gz-np-foot .is-today { color: #8A8278; font-weight: 600; }
.gz-modal.gz-notice-pop .gz-np-foot .is-close { color: #1F1815; font-weight: 800; border-left: 1px solid #F1EBE1; }

/* ── 안내 본문 공통 조각 ── */
.gz-modal .gz-if-section + .gz-if-section { margin-top: 14px; }
.gz-modal .gz-if-subtitle {
    margin: 0 0 8px 2px;
    font-size: 13.5px;
    font-weight: 800;
    color: #1F1815;
    letter-spacing: -.03em;
}
.gz-modal .gz-if-box {
    padding: 12px 14px;
    background: #FAF7F2;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #4A423B;
    letter-spacing: -.02em;
    word-break: keep-all;
}
.gz-modal .gz-if-box b { color: #E56610; font-weight: 800; }
.gz-modal .gz-if-box p { margin: 0; }
.gz-modal .gz-if-box p + p { margin-top: 4px; }
.gz-modal .gz-if-list { list-style: none; margin: 0; padding: 0; }
.gz-modal .gz-if-list li { position: relative; padding-left: 12px; }
.gz-modal .gz-if-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: .7em;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #F9781A;
}
.gz-modal .gz-if-list li div { display: inline; }
.gz-modal .gz-if-note { margin-top: 6px; font-size: 12px; color: #8A8278; }
.gz-modal .gz-if-img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 12px;
}

/* ── 이벤트 결과 알림 (문구만 있는 팝업) ── */
.gz-modal .gz-if-msg:empty { display: none; }

/* ── 출석부 ── */
.gz-modal .gz-if-stamp {
    padding: 12px 8px 4px;
    background: #FAF7F2;
    border-radius: 14px;
}

/* ── 카드 뽑기 (구조·동작은 그대로, 색만 브랜드 톤으로) ──
   custom.css 의 #cardModal 규칙(검정 배경·분홍/보라)을 이 모달 안에서만 덮어씀 */
.gz-modal#cardModal .modal-content { background: #fff; border-radius: 18px; }
.gz-modal#cardModal .modal-body { padding: 16px 18px 18px; }
.gz-modal#cardModal .instruction-text {
    margin-bottom: 14px;
    color: #4A423B;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
}
.gz-modal#cardModal .card-pull-container { border-radius: 16px; box-shadow: none; border: 1.5px solid #EFE9DA; }
.gz-modal#cardModal .card-1 { background: linear-gradient(140deg, #FFB36B 0%, #F9781A 55%, #E0590A 100%); }
.gz-modal#cardModal .card-back { background: linear-gradient(160deg, #FFF8EE 0%, #FFEBD6 100%); }
.gz-modal#cardModal .card-back-emoji img { max-height: 180px; }
.gz-modal#cardModal .card-back-title { font-size: 20px; font-weight: 800; color: #1F1815; letter-spacing: -.03em; text-align: center; word-break: keep-all; }
.gz-modal#cardModal .progress-container { margin-top: 14px; height: 8px; background: #F1EBE1; }
.gz-modal#cardModal .progress-bar-custom { background: linear-gradient(90deg, #FFA04A 0%, #F26A0C 100%); }
.gz-modal#cardModal .progress-text { color: #8A8278; font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.gz-modal .gz-if-stamp .row { margin-left: 0; margin-right: 0; }
.gz-modal .gz-if-stamp .attend-stamp-list { text-align: center; }