/* BASIC css start */
/* ============================================================
	피시위즈 모바일 쿠폰존 (coupon_zone) — CSS 탭   2026-08-11

	★ 상품 카드 규칙은 한 줄도 적지 않았습니다.
	  카드·상품 줄의 글자 크기와 색은 header.1.css 의 「카드 v3」 가 전 화면에 걸립니다.
	  이 파일에는 「담는 칸」(상자 · 여백 · 줄 나눔) 과 이 화면만의 것만 넣습니다.

	★ 값은 전부 부품표에서 가져왔습니다. 새로 정한 값은 없습니다.
	  좌우 여백 16 · 간격 4/8/12/16/24/32 · 상자 모서리 12 + 테두리 1px #DFE3E8
	  버튼 높이 52/44/34 + 모서리 10 · 주버튼 #14181D 흰 글자
	  이름 칸 #8A9099 13 / 값 칸 #14181D 13 굵게
============================================================ */

#contents .coupon_zone {overflow-x:hidden; max-width:100%; padding-bottom:32px;}

/* --- 제목 줄 : 높이 56 · 좌우 16 ------------------------------------------- */
#contents .coupon_zone .fw-phead {display:flex; align-items:center; justify-content:space-between;
	height:56px; box-sizing:border-box; padding:0 16px;}
#contents .coupon_zone .fw-ptit {margin:0; font-size:18px; font-weight:800; color:#14181D; letter-spacing:-.3px;}
#contents .coupon_zone .fw-psub {font-size:12.5px; color:#8A9099; text-decoration:none;}

/* --- 카드형 상자 : 표를 쓰지 않습니다. 모바일에서 표는 읽기 어렵습니다 ------ */
#contents .coupon_zone .fw-box {box-sizing:border-box; margin:0 16px 12px; padding:16px;
	background:#fff; border:1px solid #DFE3E8; border-radius:12px;}
#contents .coupon_zone .fw-boxtit {margin:0 0 12px; font-size:14px; font-weight:700; color:#14181D;}
#contents .coupon_zone .fw-boxtit .sm {margin-left:6px; font-size:11.5px; font-weight:400; color:#8A9099;}

/* --- 이름·값 두 칸 줄 : 왼쪽 이름 흐리게 · 오른쪽 값 굵게 ------------------ */
#contents .coupon_zone .fw-lv {display:flex; align-items:flex-start; gap:12px; padding:5px 0;}
#contents .coupon_zone .fw-lv .k {flex:none; min-width:84px; font-size:13px; font-weight:400; color:#8A9099;}
#contents .coupon_zone .fw-lv .v {flex:1 1 auto; text-align:right; font-size:13px; font-weight:700;
	color:#14181D; word-break:break-all; line-height:1.5;}
#contents .coupon_zone .fw-lv .v.sub {font-weight:400; color:#8A9099;}
#contents .coupon_zone .fw-lv .v.red {color:#EF6253;}
#contents .coupon_zone .fw-lv .v.rsv {color:#8A7207;}
/* 값이 비면 줄을 감춥니다 — 감추는 판단은 JS 가 합니다 */
#contents .coupon_zone .fw-lv.hide {display:none;}
/* 합계 줄만 위에 1px 선을 두고 크게 씁니다 (부품표 금액 합계표) */
#contents .coupon_zone .fw-lv.total {margin-top:8px; padding-top:12px; border-top:1px solid #DFE3E8;}
#contents .coupon_zone .fw-lv.total .k {font-size:13px; color:#14181D; font-weight:700;}
#contents .coupon_zone .fw-lv.total .v {font-size:18px; font-weight:800;}

/* --- 버튼 : 높이 52 / 44 / 34 · 모서리 10 · 주버튼 검정 ------------------- */
#contents .coupon_zone .fw-btn {box-sizing:border-box; display:flex; align-items:center; justify-content:center;
	width:100%; height:52px; margin:0; padding:0 12px;
	border:1px solid #DFE3E8; border-radius:10px; background:#fff;
	font-family:inherit; font-size:14px; font-weight:700; color:#14181D;
	text-decoration:none; -webkit-appearance:none; appearance:none;}
#contents .coupon_zone .fw-btn.pri {background:#14181D; border-color:#14181D; color:#fff;}
#contents .coupon_zone .fw-btn.h44 {height:44px; font-size:13.5px;}
#contents .coupon_zone .fw-mini {box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
	height:34px; padding:0 10px; border:1px solid #DFE3E8; border-radius:8px; background:#fff;
	font-family:inherit; font-size:11.5px; font-weight:500; color:#41474E;
	text-decoration:none; white-space:nowrap; -webkit-appearance:none; appearance:none;}
/* 버튼 묶음 — 사이 8 (부품표 : 버튼 사이 8 이상) */
#contents .coupon_zone .fw-btns {display:flex; gap:8px; margin:0 16px 12px;}
#contents .coupon_zone .fw-btns > * {flex:1 1 0;}
#contents .coupon_zone .fw-btnone {margin:0 16px 12px;}

/* --- 입력칸 : 높이 44 · 모서리 10 · 좌우 12 · 글자 13.5 ------------------- */
#contents .coupon_zone .fw-fld {margin:0 0 12px;}
#contents .coupon_zone .fw-fld:last-child {margin-bottom:0;}
#contents .coupon_zone .fw-flabel {display:block; margin:0 0 4px; font-size:12px; font-weight:700; color:#14181D;}
#contents .coupon_zone .fw-flabel .req {color:#EF6253;}
#contents .coupon_zone .fw-fld input[type=text],
#contents .coupon_zone .fw-fld input[type=password],
#contents .coupon_zone .fw-fld input[type=tel],
#contents .coupon_zone .fw-fld input[type=email],
#contents .coupon_zone .fw-fld input[type=number],
#contents .coupon_zone .fw-fld input:not([type]),
#contents .coupon_zone .fw-fld select {box-sizing:border-box; width:100%; height:44px; padding:0 12px; margin:0;
	border:1px solid #DFE3E8; border-radius:10px; background:#fff;
	font-family:inherit; font-size:13.5px; color:#14181D; -webkit-appearance:none; appearance:none;}
#contents .coupon_zone .fw-fld textarea {box-sizing:border-box; width:100%; height:110px; padding:12px; margin:0;
	border:1px solid #DFE3E8; border-radius:10px; background:#fff;
	font-family:inherit; font-size:13.5px; line-height:1.5; color:#14181D; resize:none;}
#contents .coupon_zone .fw-fld input[type=file] {font-size:12px; color:#41474E;}
#contents .coupon_zone .fw-help {margin:4px 0 0; font-size:10.5px; line-height:1.5; color:#9AA0A8;}
/* 입력칸 + 옆 버튼 (검색 · 우편번호 찾기) — 칸 사이 8 · 버튼만 고정폭 96 */
#contents .coupon_zone .fw-side {display:flex; gap:8px; align-items:center;}
#contents .coupon_zone .fw-side > :first-child {flex:1 1 auto; min-width:0;}
#contents .coupon_zone .fw-side .fw-mini {flex:none; width:96px; height:44px; border-radius:10px; font-size:13px;}
/* 두 칸 한 줄 (기간) — 모바일은 두 칸까지 */
#contents .coupon_zone .fw-two {display:flex; gap:8px; align-items:center;}
#contents .coupon_zone .fw-two > * {flex:1 1 0; min-width:0;}
#contents .coupon_zone .fw-two .tilde {flex:none; font-size:13px; color:#8A9099;}
/* 체크·라디오 18 · 글자까지 눌러도 켜진다 */
#contents .coupon_zone .fw-chk {display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; color:#14181D;}
#contents .coupon_zone .fw-chk input {width:18px; height:18px; margin:0; flex:none;}

/* --- 안내 상자 : 모서리 10 · 안쪽 12 (부품표 알림상자) -------------------- */
#contents .coupon_zone .fw-note {margin:0 16px 12px; padding:12px; border-radius:10px;
	background:#F7F8FA; font-size:11.5px; line-height:1.6; color:#14181D;}
#contents .coupon_zone .fw-note.warn {background:#FDEFEE; color:#EF6253;}
#contents .coupon_zone .fw-note p {margin:0;}
#contents .coupon_zone .fw-note p + p {margin-top:4px;}
/* 약관·정책 글이 통째로 들어오는 자리 — 길면 안쪽에서 스크롤됩니다 */
#contents .coupon_zone .fw-policy {margin:0 16px 12px; padding:12px; border:1px solid #DFE3E8; border-radius:10px;
	background:#F7F8FA; font-size:11.5px; line-height:1.6; color:#41474E;
	max-height:180px; overflow-y:auto; word-break:break-all;}
#contents .coupon_zone .fw-policy:empty {display:none;}

/* --- 빈 화면 --------------------------------------------------------------- */
#contents .coupon_zone .none-data {padding:60px 16px; text-align:center; white-space:pre-line;
	font-size:13px; line-height:1.7; color:#A8ADB3;}

/* --- 목록형 상품 줄 담는 칸 (카드 CSS 는 새로 쓰지 않습니다) --------------- */
/* 한 줄 안에서 그림+글자가 먼저 오고, 줄 단추는 아래로 내려갑니다 (flex-wrap) */
#contents .coupon_zone .fw-prow {display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding:12px 0;}
#contents .coupon_zone .fw-prow + .fw-prow {border-top:1px solid #F1F3F5;}
#contents .coupon_zone .fw-prow figure {flex:1 1 auto; display:flex; align-items:flex-start; gap:12px;
	margin:0; padding:0; min-width:0;}
#contents .coupon_zone .fw-prow img.listPic {flex:none; width:64px; height:64px; object-fit:contain;
	background:#fff; border:1px solid #F1F3F5; border-radius:10px;}
#contents .coupon_zone .fw-prow .list_shoppingInfo {flex:1 1 auto; min-width:0; padding:0 !important;}
#contents .coupon_zone .fw-prow .fw-opt {height:auto !important; margin-top:2px !important;
	font-size:11px !important; line-height:1.5 !important; color:#8A9099 !important;}
#contents .coupon_zone .fw-prow .fw-qty {height:auto !important; margin-top:2px !important;
	font-size:11px !important; color:#8A9099 !important;}
#contents .coupon_zone .fw-prow .fw-pst {height:auto !important; margin-top:4px !important;
	font-size:12px !important; font-weight:700 !important; color:#14181D !important;}
#contents .coupon_zone .fw-prow .fw-pst.done {color:#8A9099 !important;}
#contents .coupon_zone .fw-prow .fw-pst.claim {color:#EF6253 !important;}
/* 줄 단추 묶음 — 간격 6 (부품표 : 줄버튼 묶음 안에 넣고 간격 6)
   상품 줄 안에서는 한 줄을 다 쓰고 그림·글자 아래에 놓입니다 */
#contents .coupon_zone .fw-rbtns {display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
#contents .coupon_zone .fw-prow .fw-rbtns {flex:1 1 100%; margin-top:0;}
#contents .coupon_zone .fw-prow .fw-lv {flex:1 1 100%;}

/* --- 탭 두 칸 (부품표 : 높이 44 · 지금 탭 굵게 + 밑줄 2px) ---------------- */
#contents .coupon_zone .fw-tabs {display:flex; border-bottom:1px solid #DFE3E8; margin-bottom:16px;}
#contents .coupon_zone .fw-tab {flex:1 1 0; height:44px; line-height:44px; text-align:center;
	font-size:13px; font-weight:400; color:#8A9099; text-decoration:none;}
#contents .coupon_zone .fw-tab.on {color:#14181D; font-weight:700; box-shadow:inset 0 -2px 0 #14181D;}

/* --- 쿠폰 카드 (부품표 : 모서리 10 · 할인액 20 Bold → 이름 13 → 조건·기한 11) --- */
#contents .coupon_zone .fw-cpnlist {margin:0 16px 24px;}
#contents .coupon_zone .fw-cpn {display:flex; align-items:center; gap:12px;
	box-sizing:border-box; padding:16px; margin-bottom:8px;
	background:#fff; border:1px solid #DFE3E8; border-radius:10px;}
#contents .coupon_zone .fw-cpn.off {opacity:.45;}
#contents .coupon_zone .fw-cleft {flex:1 1 auto; min-width:0;}
#contents .coupon_zone .fw-cbig {margin:0; font-size:20px; font-weight:800; color:#14181D; letter-spacing:-.4px;}
#contents .coupon_zone .fw-cname {margin:2px 0 0; font-size:13px; font-weight:500; color:#14181D;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#contents .coupon_zone .fw-cname:empty {display:none;}
#contents .coupon_zone .fw-cmeta {margin:4px 0 0; font-size:11px; line-height:1.5; color:#8A9099;}
#contents .coupon_zone .fw-cmeta:empty {display:none;}
#contents .coupon_zone .fw-dday {margin:4px 0 0; font-size:11px; font-weight:700; color:#EF6253;}
#contents .coupon_zone .fw-dday:empty {display:none;}
#contents .coupon_zone .fw-cbtn {flex:none;}
/* 값을 담아 두는 숨은 칸 — 화면에는 보이지 않습니다 */
#contents .coupon_zone .fw-hid {display:none;}

#contents .coupon_zone .fw-cnt2 {margin:0 16px 8px; font-size:13px; font-weight:500; color:#14181D;}
#contents .coupon_zone .fw-cnt2 em {font-style:normal; font-weight:800;}
#contents .coupon_zone .fw-sortline {margin:0 16px 8px;}
#contents .coupon_zone .fw-sortline select {box-sizing:border-box; height:34px; padding:0 12px;
	border:1px solid #DFE3E8; border-radius:8px; background:#fff;
	font-family:inherit; font-size:12.5px; color:#14181D;}

/* BASIC css end */