/* BASIC css start */
/* ===== 쿠폰존 리뉴얼 — 1280px ===== */

#coupon-zone {
    font-family: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', sans-serif;
    font-size: 14px; color: #111;
    padding-bottom: 60px;
}

/* ===== 히어로 ===== */
#coupon-zone .cz-hero {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 28px; background: #111;
    border-radius: 8px; padding: 28px 32px;
}
#coupon-zone .cz-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 2px; color: #d4af6a;
}
#coupon-zone .cz-hero h2 {
    font-size: 22px; font-weight: 700;
    color: #fff; margin: 0; letter-spacing: -0.3px;
}
#coupon-zone .cz-hero p {
    font-size: 13px; color: #aaa; margin: 0;
}

/* ===== 본문 ===== */
#coupon-zone .page-body { padding: 0; }

/* ===== 회원 혜택 박스 ===== */
#coupon-zone .cz-member {
    margin-top: 24px;
    border: 1px solid #e8e8e8; border-radius: 8px;
    overflow: hidden;
}
#coupon-zone .cz-grade {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px;
    background: #f8f8f8; border-bottom: 1px solid #e8e8e8;
}
#coupon-zone .cz-grade .grade-icon img {
    width: 48px; height: 48px; object-fit: cover;
    border-radius: 50%; border: 1px solid #e0e0e0;
}
#coupon-zone .cz-grade .grade-info strong {
    display: block; font-size: 14px; font-weight: 700; color: #111;
}
#coupon-zone .cz-grade .grade-info strong em {
    color: #d4af6a; font-style: normal;
}
#coupon-zone .cz-grade .grade-info p {
    font-size: 12px; color: #888; margin-top: 4px;
}
#coupon-zone .cz-grade .grade-info p b { color: #111; font-weight: 700; }

#coupon-zone .cz-stats {
    display: flex; list-style: none; padding: 0; margin: 0;
}
#coupon-zone .cz-stats li {
    flex: 1;
    border-right: 1px solid #f2f2f2;
}
#coupon-zone .cz-stats li:last-child { border-right: none; }
#coupon-zone .cz-stats li a {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 0; text-decoration: none;
    transition: background 0.15s;
}
#coupon-zone .cz-stats li a:hover { background: #fafafa; }
#coupon-zone .stat-label {
    font-size: 12px; color: #888; font-weight: 500;
}
#coupon-zone .stat-value {
    font-size: 18px; font-weight: 700; color: #111;
    margin-top: 6px;
}

/* ===== 비로그인 ===== */
#coupon-zone .cz-guest {
    margin-top: 24px;
    padding: 40px 0; text-align: center;
    border: 1px solid #e8e8e8; border-radius: 8px;
}
#coupon-zone .cz-guest p {
    font-size: 14px; color: #777; margin-bottom: 20px;
}
#coupon-zone .cz-guest-btns { display: flex; justify-content: center; gap: 10px; }
#coupon-zone .btn-login {
    display: inline-block; height: 40px; line-height: 40px;
    padding: 0 28px; background: #111; color: #fff;
    font-size: 13px; font-weight: 700; border-radius: 4px;
    text-decoration: none; transition: background 0.2s;
}
#coupon-zone .btn-login:hover { background: #333; }
#coupon-zone .btn-join {
    display: inline-block; height: 40px; line-height: 40px;
    padding: 0 28px; background: #fff; color: #111;
    font-size: 13px; font-weight: 700; border-radius: 4px;
    border: 1px solid #d0d0d0; text-decoration: none;
    transition: all 0.2s;
}
#coupon-zone .btn-join:hover { border-color: #111; }

/* ===== 쿠폰 코드 등록 ===== */
#coupon-zone .cz-codebox {
    margin-top: 20px;
    padding: 20px 24px;
    border: 1px solid #e8e8e8; border-radius: 8px;
    background: #fafafa;
}
#coupon-zone .codebox-inner {
    display: flex; align-items: center; gap: 10px;
}
#coupon-zone .codebox-title {
    font-size: 13px; font-weight: 700; color: #111;
    white-space: nowrap;
}
#coupon-zone .cz-input,
#coupon-zone input.cz-input {
    flex: 1; height: 38px; line-height: 38px;
    padding: 0 12px; border: 1px solid #d0d0d0;
    border-radius: 4px; font-size: 13px; color: #111;
    font-family: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', sans-serif;
    box-sizing: border-box; background: #fff;
    transition: border-color 0.15s;
}
#coupon-zone .cz-input:focus { border-color: #111; outline: none; }
#coupon-zone .btn-code-reg {
    display: inline-block; height: 38px; line-height: 38px;
    padding: 0 20px; background: #111; color: #fff;
    font-size: 13px; font-weight: 700; border-radius: 4px;
    text-decoration: none; white-space: nowrap;
    transition: background 0.2s;
}
#coupon-zone .btn-code-reg:hover { background: #333; }
#coupon-zone .codebox-desc {
    margin-top: 10px; font-size: 12px; color: #aaa;
}

/* ===== 다운로드 쿠폰 영역 ===== */
#coupon-zone .cz-coupon-wrap { margin-top: 28px; }
#coupon-zone .cz-coupon-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 2px solid #111;
    margin-bottom: 20px;
}
#coupon-zone .cz-coupon-head h3 {
    font-size: 16px; font-weight: 700; color: #111; margin: 0;
}
#coupon-zone .btn-all-down {
    display: inline-block; height: 34px; line-height: 34px;
    padding: 0 16px; background: #111; color: #fff;
    font-size: 12px; font-weight: 700; border-radius: 4px;
    text-decoration: none; transition: background 0.2s;
}
#coupon-zone .btn-all-down:hover { background: #333; }

/* ===== 쿠폰 그리드 ===== */
#coupon-zone .coupon-list ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* 이미지 전용 쿠폰 */
#coupon-zone .coupon-item.coupon-img-only img {
    width: 100%; border-radius: 8px; display: block;
    border: 1px solid #e8e8e8;
}

/* 일반 쿠폰 카드 */
#coupon-zone .coupon-item {
    border: 1px solid #e8e8e8; border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow 0.2s;
}
#coupon-zone .coupon-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }

#coupon-zone .coupon-body {
    padding: 20px; flex: 1;
    display: flex; gap: 14px; align-items: flex-start;
}
#coupon-zone .coupon-thumb {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    border: 1px solid #e8e8e8;
}
#coupon-zone .coupon-thumb img { width: 100%; height: 100%; object-fit: cover; }

#coupon-zone .coupon-data { flex: 1; }
#coupon-zone .c-name {
    font-size: 13px; font-weight: 700; color: #111;
    line-height: 1.5; margin-bottom: 8px;
}
#coupon-zone .c-discount {
    font-size: 22px; font-weight: 700; color: #d4281e;
    margin-bottom: 10px; line-height: 1.2;
}
/* 적립금 쿠폰 */
#coupon-zone .coupon-item.type-reserve .c-discount { color: #2060c8; }

/* 스타일2 (dark) */
#coupon-zone .coupon-item.sc-style2 { background: #141940; border-color: #141940; }
#coupon-zone .coupon-item.sc-style2 .c-name { color: #fff; }
#coupon-zone .coupon-item.sc-style2 .c-discount { color: #ff3a34; }
#coupon-zone .coupon-item.sc-style2.type-reserve .c-discount { color: #7aa4ff; }

/* 스타일3 (pink) */
#coupon-zone .coupon-item.sc-style3 { border-color: #222; }
#coupon-zone .coupon-item.sc-style3 .c-discount { color: #eb3697; }
#coupon-zone .coupon-item.sc-style3.type-reserve .c-discount { color: #18b776; }

#coupon-zone .c-cond {
    display: flex; flex-direction: column; gap: 3px;
}
#coupon-zone .c-cond span {
    font-size: 11px; color: #999; line-height: 1.5;
}
#coupon-zone .c-cond a { color: #999; text-decoration: underline; }

/* ===== 쿠폰 하단 다운로드 버튼 ===== */
#coupon-zone .coupon-foot {
    padding: 14px 20px;
    border-top: 1px dashed #e8e8e8;
    background: #f8f8f8;
    display: flex; align-items: center; justify-content: center;
}
#coupon-zone .coupon-item.sc-style2 .coupon-foot { background: #ff3a34; border-color: rgba(255,255,255,0.2); }
#coupon-zone .coupon-item.sc-style2.type-reserve .coupon-foot { background: #3b6ce9; }
#coupon-zone .coupon-item.sc-style3 .coupon-foot { border-color: #222; background: #fff2f9; }
#coupon-zone .coupon-item.sc-style3.type-reserve .coupon-foot { background: #eefff7; }

#coupon-zone .btn-down-get {
    display: inline-block;
    height: 32px; line-height: 32px;
    padding: 0 20px;
    background: #111; color: #fff;
    font-size: 12px; font-weight: 700;
    border-radius: 4px; text-decoration: none;
    transition: background 0.2s;
}
#coupon-zone .btn-down-get:hover { background: #333; }
#coupon-zone .coupon-item.sc-style2 .btn-down-get { background: rgba(0,0,0,0.3); }
#coupon-zone .coupon-item.sc-style2 .btn-down-get:hover { background: rgba(0,0,0,0.5); }

#coupon-zone .btn-down-done {
    font-size: 12px; font-weight: 700; color: #bbb;
}
#coupon-zone .tag-auto {
    font-size: 12px; font-weight: 700; color: #888;
}
#coupon-zone .coupon-item.sc-style2 .tag-auto,
#coupon-zone .coupon-item.sc-style2 .btn-down-done { color: rgba(255,255,255,0.6); }

/* gif 요소 숨김 */
#coupon-zone .coupon-memberbox-none a img,
#coupon-zone .all-down a img { display: none; }
/* BASIC css end */