@charset "UTF-8";

.exchange-content {
	word-break: keep-all;
	margin-bottom: 2rem;
}

.exchange-content li {
	position: relative;
	padding: 16px 18px 16px 50px;
	margin-bottom: 8px;
	background: var(--colorwhite);
	border: 1px solid var(--borderColor);
	border-radius: 12px;
}

.exchange-content li:before {
	content: "✓";
	position: absolute;
	left: 18px;
	top: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	background: #17b75e;
	color:  var(--colorwhite);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}
.exchange-content li:last-child {
	margin-bottom: 0;
}

/* 보유 포인트 */
.exchange-point{
	background: var(--colorgreen-bg);
	border-radius: var(--radius);
	padding: 1rem;
	margin-bottom: 2rem;
	font-size: clamp(13px,2vw,15px);
	border: 1px solid var(--borderColor);
}

.exchange-point span{
	display:flex;
	align-items:center;
	justify-content: center;
	font-weight:500;
	gap: 5px;
}

.exchange-point span::before{
	content:"💰";
}

.exchange-point strong{
	font-size: clamp(14px,2vw,18px);
	color: var(--colorgreen-text);
}


/* 교환 폼 */
.exchange-form{
	background: var(--colorwhite);
	border-radius: var(--radius);
	padding: 2rem 1.5rem;
	border: 1px solid var(--borderColor);
}

.exchange-form ul{
	display:flex;
	flex-direction:column;
	gap:15px;
}

.exchange-form li{
	display:flex;
	align-items:center;
	gap:15px;
}

.exchange-form li > span{
	width: 75px;
	font-weight: 500;
}

.exchange-form input,
.exchange-form select{
	flex:1;
	height:45px;
	border-radius:12px;
	border:1px solid #e4e8ef;
	background:var(--colorgray-bg);
	padding:0 1rem;
}

.exchange-form input:focus,
.exchange-form select:focus{
	outline:none;
	border-color:#00b894;
	background: var(--colorwhite);
}

/* 신청 버튼 */
.submitbtn{
	width:100%;
	height: 60px;
	margin-top: 2rem;
	border:0;
	border-radius: var(--radius);
	background: var(--con-btn-o);
	color: var(--colorwhite);
	font-size:16px;
	font-weight: 700;
	cursor:pointer;
	transition:.2s;
}

.submitbtn:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(0,184,148,.25);
}


/* 신청내역 */
.exchange-sta-head{
	margin-top:25px;
	background: var(--colorwhite);
	border-radius: var(--radius) var(--radius) 0 0;
	overflow:hidden;
	border: 1px solid var(--borderColor);
}

.exchange-sta-head > span{
	display:block;
	padding: 1.5rem;
	font-weight: 600;
	border-bottom: 1px solid var(--borderColor);
}

.exchange-sta-head > span:before{
	content:"📋 ";
}

.exchange-sta-head ul {
	display:grid;
	grid-template-columns:1.2fr 1.2fr 1fr 1.5fr .8fr;
	text-align:center;
}

.exchange-sta-head li{
	padding:13px 5px;
	background:var(--colorgray-bg);
	color: var(--con-sub);
	font-weight: 500;
}


/* 내역 */
.exchange-sta-body{
	background: var(--colorwhite);
	border:1px solid #edf0f5;
	border-top:0;
	border-radius:0 0 18px 18px;
}

.exchange-sta-body li{
	display:grid;
	grid-template-columns:1.2fr 1.2fr 1fr 1.5fr .8fr;
	padding: 0.7rem 0.5rem;
	text-align:center;
	align-items: center;
	border-bottom :1px solid var(--borderColor);
}

.exchange-sta-body li:last-child{
	border-bottom:0;
}


/* 상태 */
.status{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	padding:5px 12px;
	border-radius:20px;
	font-size:12px;
	font-weight:500;
}

.status.wait{
	background: #fff3cd;
	color:#b77900;
}

.status.done{
	background:#dcfce7;
	color:#15803d;
}

.status.cancel{
	background:#fee2e2;
	color:#dc2626;
}

.no-sta{
	padding:40px 0;
	text-align:center;
	color:#999;
}

.loaded-exchange {
	display: block !important;
	padding: 1rem;
	line-height: 1.2;
	color: var(--colorred);
	background: var(--colorgray-bg);
	border-radius: var(--radius);
	border: 1px solid var(--borderColor);
	font-weight: 500;
}