@charset "utf-8";
/* ==========================================================================
   rroys 쿠폰존 전용 스타일  (/data/rroys/css/couponzone_v2.css)
   2026-07-25  /coupon/couponzone.asp 페이지업그레이드

   ※ 별도 파일로 분리한 이유
      /data/rroys/css/common.css 는 여러 작업 세션이 동시에 편집해 서로
      덮어쓰는 일이 반복됨(이 블록도 두 번 유실됨). 쿠폰존 디자인은 이
      파일에 두고 couponzone.asp 에서 common.css 뒤에 로드한다.
   ========================================================================== */

/* 로컬 Pretendard(웨이트당 700~960KB, 서브셋 없음)를 스택에서 제외해
   다이나믹 서브셋만 쓰도록 한다 (이 페이지 기준 약 -870KB) */
html body,
html body input,
html body select,
html body textarea,
html body button,
html body table,
html body th,
html body td {
	font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
	             'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
/* ==========================================================================
   11. 쿠폰존 (/coupon/couponzone.asp)   2026-07-25
       기존: /images/sp_coupon.png 스프라이트를 background-position 하드코딩으로
             잘라 쓰는 180px 고정 카드 + 하늘색(#02a5da) 버튼(브랜드색 불일치)
       변경: 이미지 요청 0건의 순수 CSS 티켓 카드 + 브랜드 컬러 + 반응형 그리드
   ========================================================================== */
.couponZone { padding-bottom: 20px; }

/* 상단 배너 : 로드 전 높이를 확보해 레이아웃 밀림(CLS) 방지 */
.couponZone .coupontit { max-width: 1200px; margin: 10px auto 0; }
.couponZone .coupontit img {
	display: block;
	width: 100%; height: auto;
	aspect-ratio: 1200 / 463;
	border-radius: var(--rr-radius);
	background: var(--rr-bg-soft);
}

.couponZone .inner { width: 100%; max-width: 1200px; padding: 0 20px; box-sizing: border-box; }

/* ── 쿠폰 목록 카드 컨테이너 ── */
.couponZone .coupon_list {
	border: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius) !important;
	padding: 32px !important;
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
}
.couponZone .coupon_list h2.sub_tit {
	display: block;
	overflow: hidden;
	font-size: 21px !important;
	font-weight: 600 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.4em !important;
	color: var(--rr-ink);
	padding-bottom: 24px !important;
	border-bottom: 1px solid var(--rr-line) !important;
}
.couponZone .coupon_list h2.sub_tit strong { color: var(--rr-primary); font-weight: 800; }

/* 헤더 버튼 2종 : 라운딩 + 음영 + 트랜지션
   (DOM 순서 = 받은쿠폰확인 → 전체다운받기, float:right 로 화면상 [전체다운][확인] 배치) */
.couponZone .coupon_list h2.sub_tit>span {
	float: right !important;
	width: auto !important;
	height: 44px !important;
	padding: 0 20px;
	margin: 0 0 0 10px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rr-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	cursor: pointer;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), background-color var(--rr-tr), color var(--rr-tr);
}
.couponZone .coupon_list h2.sub_tit>span.down {
	background-color: var(--rr-primary) !important;
	color: #fff !important;
	box-shadow: var(--rr-shadow-primary);
}
.couponZone .coupon_list h2.sub_tit>span.down:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--sitecolor1, #FF0051) 34%, transparent); }
.couponZone .coupon_list h2.sub_tit>span.check {
	background-color: #fff !important;
	color: var(--rr-ink-2) !important;
	border: 1px solid var(--rr-line-strong) !important;
}
.couponZone .coupon_list h2.sub_tit>span.check:hover { transform: translateY(-2px); box-shadow: var(--rr-shadow-md); border-color: var(--rr-primary) !important; color: var(--rr-primary) !important; }
.couponZone .coupon_list h2.sub_tit>span:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm); }

/* ── 쿠폰 그리드 ── */
.couponZone .coupon_area {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto;	/* 1행 = "쿠폰" 소제목(내용 높이) */
	grid-auto-rows: 1fr;		/* 이후 카드 행은 모두 같은 높이 */
	gap: 22px;
	padding-top: 26px;
	font-size: 14px !important;
}
.couponZone .coupon_area .caTit {
	grid-column: 1 / -1;
	padding: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--rr-ink-3);
}
/* 서버가 3개씩 .cp_wrap 으로 묶어 출력하므로 래퍼를 투명 처리해 한 그리드로 흐르게 함 */
.couponZone .coupon_area .cp_wrap {
	display: contents;
	border-top: 0 !important;
	padding: 0 !important;
}
.couponZone .coupon_area .cp_wrap>div {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	vertical-align: initial !important;
	font-size: 14px !important;
}

/* ── 쿠폰 카드(티켓형) ──
   flex 컬럼 + .img flex:1 로 한 줄 안의 카드 높이·절취선·버튼 위치를 정렬한다
   (할인조건 문구가 있는 카드/없는 카드가 섞여도 어긋나지 않음) */
.couponZone .coupon_area .cp_wrap>div.cp {
	position: relative;
	display: flex !important;
	flex-direction: column;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	overflow: hidden;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), border-color var(--rr-tr);
}
.couponZone .coupon_area .cp_wrap>div.cp:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--rr-shadow-lift);
}
/* 할인 정보(스프라이트 이미지 → 그라데이션) */
.couponZone .coupon_area .cp_wrap>div .img,
.couponZone .coupon_area .cp_wrap>div.v1 .img,
.couponZone .coupon_area .cp_wrap>div.v2 .img,
.couponZone .coupon_area .cp_wrap>div.v3 .img {
	position: relative;
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 26px 22px 24px;
	box-sizing: border-box;
	background: linear-gradient(135deg, var(--rr-primary) 0%, var(--rr-primary-2) 100%) !important;
	text-align: center;
	float: none !important;
}
/* 티켓 절취선 */
.couponZone .coupon_area .cp_wrap>div .img::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 0;
	border-bottom: 2px dashed rgba(255,255,255,.6);
}

.couponZone .coupon_area .cp_wrap .img>h3 {
	visibility: visible !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4em !important;
	color: rgba(255,255,255,.92) !important;
	min-height: 2.8em;
	display: flex; align-items: center; justify-content: center;
	word-break: keep-all;
}
.couponZone .coupon_area .cp_wrap .img>strong {
	display: block;
	font-size: 44px !important;
	font-weight: 800 !important;
	line-height: 1.1em !important;
	letter-spacing: -0.04em;
	color: #fff !important;
	margin-top: 4px;
}
.couponZone .coupon_area .cp_wrap .img>strong span {
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	margin-left: 2px !important;
	letter-spacing: 0;
}
.couponZone .coupon_area .cp_wrap .img>p {
	margin-top: 8px;
	font-size: 12px !important;
	line-height: 1.5em !important;
	color: rgba(255,255,255,.88) !important;
}
.couponZone .coupon_area .cp_wrap .img>p span { font-weight: 700; }

/* 다운로드 버튼 */
.couponZone .coupon_area .cp_wrap .dw_btn {
	margin: 18px 20px 0 !important;
	height: 46px;
	border: 1px solid var(--rr-primary) !important;
	border-radius: var(--rr-radius-sm) !important;
	background: #fff;
	color: var(--rr-primary);
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-shadow: var(--rr-shadow-sm) !important;
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), background-color var(--rr-tr), color var(--rr-tr);
}
.couponZone .coupon_area .cp_wrap .dw_btn:hover {
	background: var(--rr-primary);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--rr-shadow-primary) !important;
}
.couponZone .coupon_area .cp_wrap .dw_btn:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm) !important; }
.couponZone .coupon_area .cp_wrap .dw_btn i { font-size: 19px; vertical-align: middle; }
/* 이미 받은 쿠폰 */
.couponZone .coupon_area .cp_wrap .dw_btn.dw_done {
	border-color: var(--rr-line-strong) !important;
	background: var(--rr-bg-soft);
	color: var(--rr-ink-3);
	cursor: default;
	box-shadow: none !important;
}
.couponZone .coupon_area .cp_wrap .dw_btn.dw_done:hover { transform: none; background: var(--rr-bg-soft); color: var(--rr-ink-3); box-shadow: none !important; }
.couponZone .coupon_area .cp_wrap>div.cp.is-done { opacity: .72; }
.couponZone .coupon_area .cp_wrap>div.cp.is-done:hover { transform: none; box-shadow: var(--rr-shadow-sm); }

/* 유효기간 */
.couponZone .coupon_area .cp_wrap p.desc {
	padding: 12px 20px 20px !important;
	text-align: center;
	font-size: 12.5px !important;
	line-height: 1.6em !important;
	color: var(--rr-ink-3);
}

/* ── 쿠폰 없음(빈 상태) ── */
.couponZone .coupon_area .cpEmpty {
	grid-column: 1 / -1;
	padding: 54px 20px 58px;
	text-align: center;
	border: 1px dashed var(--rr-line-strong);
	border-radius: var(--rr-radius);
	background: var(--rr-bg-soft);
}
.couponZone .coupon_area .cpEmpty i {
	font-size: 46px;
	color: var(--rr-ink-4);
}
.couponZone .coupon_area .cpEmpty p {
	margin: 12px 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--rr-ink-2);
}
.couponZone .coupon_area .cpEmpty span {
	display: block;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--rr-ink-3);
}
.couponZone .coupon_area .cpEmptyBtn {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 20px;
	height: 44px; padding: 0 26px;
	border-radius: var(--rr-radius-sm);
	background: var(--rr-primary);
	color: #fff !important;
	font-size: 14px; font-weight: 700;
	text-decoration: none;
	box-shadow: var(--rr-shadow-primary);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr);
}
.couponZone .coupon_area .cpEmptyBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--sitecolor1, #FF0051) 34%, transparent); }

/* ── 하단 안내(꼭! 알아두세요) ── */
.couponZone .noti {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	border: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius) !important;
	background: var(--rr-bg-soft);
	padding: 28px 30px !important;
	margin-top: 26px;
}
.couponZone .noti h4 {
	float: none !important;
	width: 130px !important;
	flex: 0 0 130px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px !important;
	font-weight: 700;
	color: var(--rr-ink);
}
.couponZone .noti h4 i { float: none !important; font-size: 26px !important; color: var(--rr-primary); }
.couponZone .noti h4 span { float: none !important; padding: 0 !important; font-size: 15px !important; text-align: left; line-height: 1.35; }
.couponZone .noti .rgt_ul {
	margin-left: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px !important;
	line-height: 1.85em !important;
	color: var(--rr-ink-2);
	border-left: 1px solid var(--rr-line);
	padding-left: 26px;
}
.couponZone .noti .rgt_ul b,
.couponZone .noti .rgt_ul strong { color: var(--rr-ink); }

/* ── 반응형 ── */
@media (max-width: 1240px) {
	.couponZone .inner { max-width: 100%; }
}
@media (max-width: 980px) {
	.couponZone .coupon_area { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.couponZone .coupon_list { padding: 24px !important; }
	.couponZone .coupon_list h2.sub_tit { font-size: 18px !important; }
	.couponZone .coupon_list h2.sub_tit>span.down { margin-left: 0 !important; }
	.couponZone .noti { flex-direction: column; gap: 16px; }
	.couponZone .noti .rgt_ul { border-left: 0; padding-left: 0; border-top: 1px solid var(--rr-line); padding-top: 16px; }
}
@media (max-width: 640px) {
	.couponZone .coupon_area { grid-template-columns: minmax(0, 1fr); }
	.couponZone .coupon_list h2.sub_tit>span { flex: 1 1 auto; }
}