/*
+----------------------------------------------------------------------+
| Copyright (c) 2010-2026 WeaversBrain. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2025-12-26
| 파일설명 : 계약 해지 - 공통 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
+----------------------------------------------------------------------+
| 수정이력
| 20260114 아이디, 비밀번호 찾기 링크 추가 by 최진영
| 20260202 계약 해지 관련 표출 텍스트 추가 by 최진영
| 20260213 만보기 이용 유도 팝업 추가 by 최진영
+----------------------------------------------------------------------+
*/

@charset "utf-8";

:root {
	--header-height: 64px;
}
input:not([type="radio"]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

/* reset */
.contractWrap * {
	line-height:140%;
}
.contractWrap h2 {
	padding:0;
	background:none;
}
.contractWrap .header {
    position: relative;
    width: auto;
    height: auto;
    padding-top: 0;
    margin: 0 auto;
    z-index: 1;
}


/* 공통 */
.contractWrap {
	max-width:480px;
	margin:0 auto;
	box-sizing:border-box;
}
.contractWrap.type2 {
	padding-top:calc(var(--header-height) + 20px);
}
.contractWrap .header {
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:var(--header-height);
}
.contractWrap .header .h2 {
	font-family: 'Pretendard-Bold';
	font-size:20px;
	color:#282828;
}
.contractWrap .header .historyBackBtn {
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	left:0;
	top:0;
	width:54px;
	height:var(--header-height);
}
.contractWrap .header .historyBackBtn img {
	width:9px;
}
.contractWrap .section {
	padding-left:20px;
	padding-right:20px;
}
.contractWrap .section .h2 {
	font-family: 'Pretendard-Bold';
	font-size:38px;
	color:#282828;
}
.contractWrap .section .textBox {
	font-family: 'Pretendard-Medium';
	font-size:20px;
	color:#474747;
	line-height:170%;
}
.contractWrap .section .textBox .bold {
	font-family: 'Pretendard-Bold';
	font-size:20px;
	line-height:170%;
}
.contractWrap .section .textBox.main .name {
	font-size:18px;
	line-height:150%;
}
.contractWrap .section .textBox.main .name .bold {
	margin-right:4px;
	font-size:18px;
	line-height:150%;
}
.contractWrap .section .textBox.main .desc {
	margin-top:10px;
	font-family:'Pretendard-Regular';
	font-size:16px;
	line-height:150%;
	word-break:keep-all;
}
.contractWrap .section .titleSubText {
	margin-top:10px;
	font-family: 'Pretendard-Medium';
	font-size:20px;
	color:#282828;
}
.contractWrap .section .btnBox .text {
	margin-bottom:12px;
	font-family: 'Pretendard-Regular';
	font-size:16px;
	color:#282828;
}
.contractWrap .formWrap {
	display:flex;
	flex-direction:column;
	gap:26px;
	margin-top:64px;
}
.contractWrap .formWrap .formUIBox {
	position:relative;
}
.contractWrap .formWrap .formUIBox .formUI {
	width:100%;
	height:52px;
	padding:15px;
	border-radius:8px;
	border:1px solid #ececec;
	font-family: 'Pretendard-Medium';
	font-size:16px;
	box-sizing:border-box;
}
.contractWrap .formWrap .formUIBox .formUI:focus {
	border-color:#282828;
	outline:none;
}
.contractWrap .formWrap .formUIBox .formUI[readonly] {
	pointer-events:none;
}
.contractWrap .formWrap .formUIBox .formUI::placeholder {
	color:#c4c4c4;
}
.contractWrap .formWrap .formUIBox.auth .formUI,
.contractWrap .formWrap .formUIBox.mobile .formUI {
	padding-right:110px;
}
.contractWrap .formWrap .formUIBox .errorMsg {
	display:none;
	position:absolute;
	left:0;
	bottom:-20px;
	padding-left:6px;
	font-family: 'Pretendard-Regular';
	font-size:12px;
	color:#ef3f41;
}
.contractWrap .formWrap .formUIBox.mobile .btnUI.auth {
	position:absolute;
	top:10px;
	right:10px;
	width: 74px;
	height: 34px;
	font-family: 'Pretendard-Medium';
	font-size:14px;
	border-radius:8px;
}
.contractWrap .formWrap .formUIBox.auth .authLimitTime {
	display:none;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:10px;
	font-family: 'Pretendard-Regular';
	font-size:12px;
	color:#ef3f41;
}
.contractWrap .btnUI {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:52px;
	background:#282828;
	color:#fff;
	border-radius:8px;
	font-family: 'Pretendard-SemiBold';
	font-size:16px;
	cursor:pointer;
}
.contractWrap .btnUI.gray {
	background:#d0d0d0;
	color:#000;
}
.contractWrap .btnUI.disabled {
	background:#f2f2f2;
	color:#474747;
}
.contractWrap .btnUI.fixedBottom {
	position:fixed;
	bottom:20px;
	left:20px;
	width:calc(100% - 40px);
}
.contractWrap .btnUI.logout {
	position:absolute;
	top:50%;
	right:17px;
	transform:translateY(-50%);
	width:70px;
	height:30px;
	font-size:14px;
	background:#d0d0d0;
	color:#000;
}


/* 메인 */
.contractWrap.main {
	padding-top:90px;
	padding-bottom:90px;
	box-sizing:border-box;
}
.contractWrap.main .section .titleSubText {
	margin-bottom:40px;
}
.contractWrap.main .section.login .btnBox:last-child {
	margin-top:34px;
}
.contractWrap.main .section.login .btnBox .text {
	margin-bottom:4px;
}
.contractWrap.main .section.kakao {
	margin-top:80px;
}
.contractWrap.main .section.kakao .text {
	font-family: 'Pretendard-Regular';
	font-size: 16px;
	color: #282828;
}
.contractWrap.main .section.kakao .btnBox {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	margin-top:20px;
}
.contractWrap.main .section.kakao .btnBox .kakaoBtn {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:10px;
	width:50%;
	padding:20px;
	font-family: 'Pretendard-Regular';
	font-size: 16px;
	text-align:center;
	border:2px solid #d3d3d3;
	border-radius:8px;
}
.contractWrap.main .section.kakao .btnBox .kakaoBtn img {
	width:48px;
}
.contractWrap.main .footer {
	margin-top:60px;
}
.contractWrap.main .footer .text {
	font-family: 'Pretendard-Regular';
	font-size: 14px;
	text-align:center;
}
.contractWrap.main .footer .text.bold {
	font-family: 'Pretendard-Bold';
}


/* 로그인 */
.contractWrap.login {
    padding-bottom:100px;
}
.contractWrap.login .textBox {
	font-size:20px;
	line-height:170%;
}
.contractWrap.login .textBox .bold {
	font-size:20px;
	line-height:170%;
}
.contractWrap.login .findLoginInfo {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-top:20px;
	font-family: 'Pretendard-Regular';
	font-size:14px;
	color:#282828;
}
.contractWrap.login .findLoginInfo .vtcl_bar {
	color:#282828;
}
.contractWrap.login .findLoginInfo .linkBtn {
	color:#282828;
	font-family: 'Pretendard-Regular';
	font-size:14px;
}
.contractWrap.login .snsLoginBox {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:50px;
	padding:0 20px;
}
.contractWrap.login .snsLoginBox .snsLoginBtn {
	background:0;
	padding:0;
	cursor:pointer;
}
.contractWrap.login .snsLoginBox .snsLoginBtn img {
	width:60px;
}
.contractWrap.login .snsLoginBox .snsLoginBtn .text {
	margin-top:10px;
	font-family: 'Pretendard-Regular';
	font-size:14px;
	color:#282828;
}
.contractWrap.login .appLoginBox {
	margin-top:30px;
}


/* 계약 리스트 */
.contractWrap.list .textBox {
	font-size:18px;
}
.contractWrap.list .contractList {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top:18px;
}
.contractWrap.list .contractList .listItem {
	padding:20px 16px;
	border: 1px solid #ECEDEE;
	background:#fff;
	border-radius: 12px;
}
.contractWrap.list .contractList .listItem .contractTitle {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
}
.contractWrap.list .contractList .listItem .contractTitle .contractTitleText {
	font-family:'Pretendard-SemiBold';
	font-size:18px;
	color:#33363d;
}
.contractWrap.list .contractList .listItem .contractTitle .contractStatus {
	width:58px;
	padding:4px 0;
	text-align:center;
	font-family:'Pretendard-Medium';
	font-size:12px;
	background:#EBEFFE;
	color:#375DF5;
	border-radius:8px;
}
.contractWrap.list .contractList .listItem .contractSubTitle {
	margin-top:10px;
	font-family:'Pretendard-Medium';
	font-size:16px;
	color:#58616A;
}
.contractWrap.list .contractList .listItem .contractDateText {
	margin-top:20px;
	padding-top:20px;
	font-family:'Pretendard-Medium';
	font-size:16px;
	color:#58616A;
	border-top:1px solid #282828;
}
.contractWrap.list .contractList .listItem .btnUI {
	display:block;
	width:100%;
	height:50px;
	margin-top:24px;
	background:#f4f5f6;
	font-family:'Pretendard-SemiBold';
	font-size:14px;
	color:#58616A;
	border-radius:8px;
}
.contractWrap.list .contractList .listItem .contractStatusText {
	margin-top:10px;
	font-family:'Pretendard-Regular';
	font-size:14px;
	color:#58616A;
}
.contractWrap.list .contractList .listItem.noData {
	margin-top:50px;
	padding:0;
	text-align:center;
	font-family:'Pretendard-Regular';
	font-size:16px;
	background:none;
	border:none;
	color:#474747;
	line-height:150%;
}


/* 돈버는학습 데이터 상세 */
.contractWrap.mumDetail {
	padding-bottom:20px;
}
.contractWrap.mumDetail .header {
	background:#f5f5f5;
}
.contractWrap.mumDetail .section {
	margin-bottom:50px;
}
.contractWrap.mumDetail .section:last-child {
	margin-bottom:0;
}
.contractWrap.mumDetail .section .textBox {
	margin-bottom:20px;
	font-size:16px;
	line-height:150%;
}
.contractWrap.mumDetail .section .cardBoxUI {
	padding:20px;
	background:#fff;
	border-radius:12px;
}
.contractWrap.mumDetail .section .cardBoxUI .innerBox {
	margin-top:25px;
	padding-top:25px;
	border-top:1px solid #d9d9d9;
}
.contractWrap.mumDetail .section .cardBoxUI .innerBox:first-child {
	margin-top:0;
	padding-top:0;
	border-top:none;
}
.contractWrap.mumDetail .section .cardBoxUI .line {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:20px;
}
.contractWrap.mumDetail .section .cardBoxUI .line .left {
	font-family:'Pretendard-SemiBold';
	font-size:14px;
	line-height:150%;
	color:#474747;
}
.contractWrap.mumDetail .section .cardBoxUI .line .right {
	font-family:'Pretendard-Bold';
}
.contractWrap.mumDetail .section .cardBoxUI .line .right.big {
	font-size:20px;
	line-height:140%;
}
.contractWrap.mumDetail .section .cardBoxUI .line .right .item {
	margin-bottom:10px;
	font-size:16px;
	line-height:130%;
	text-align:right;
	word-break:keep-all;
}
.contractWrap.mumDetail .section .cardBoxUI .line .right .item:last-child {
	margin-bottom:0;
}
.contractWrap.mumDetail .section .cardBoxUI .title {
	margin-bottom:15px;
	font-family:'Pretendard-Medium';
	font-size:14px;
	line-height:140%;
	color:#474747;
}
.contractWrap.mumDetail .section .cardBoxUI.mumInfo .line .right {
	color:#0066ff;
}
.contractWrap.mumDetail .section .cardBoxUI.userData .line .right .name {
	margin-bottom:5px;
	font-family:'Pretendard-Regular';
	font-size:14px;
	line-height:130%;
	color:#282828;
	text-align:right;
}
.contractWrap.mumDetail .section .cardBoxUI.userData .line .right .amount {
	font-family:'Pretendard-Bold';
	font-size:16px;
	line-height:130%;
	color:#282828;
	text-align:right;
}
.contractWrap.mumDetail .section .cardBoxUI.userData .line {
	margin-bottom:25px;
}
.contractWrap.mumDetail .section .cardBoxUI.userData .line:last-child {
	margin-bottom:0;
}
.contractWrap.mumDetail .section .reviewList {
	display:flex;
	flex-direction:column;
	gap:20px;
	margin-bottom:20px;
}
.contractWrap.mumDetail .section .reviewList .listItem {
	font-family:'Pretendard-Medium';
	color:#474747;
}
.contractWrap.mumDetail .section .reviewList .listItem .name {
	font-size:16px;
	line-height:140%;
}
.contractWrap.mumDetail .section .reviewList .listItem .title {
	margin:15px 0;
	font-family:'Pretendard-SemiBold';
	font-size:20px;
}
.contractWrap.mumDetail .section .reviewList .listItem .desc {
	font-family:'Pretendard-Regular';
	font-size:16px;
	line-height:150%;
	word-break:keep-all;
}
.contractWrap.mumDetail .section .reviewList .listItem .desc .bold {
	font-family:'Pretendard-Bold';
	font-size:16px;
	line-height:150%;
}
.contractWrap.mumDetail .section .totalCoinBox {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
	margin-bottom:20px;
}
.contractWrap.mumDetail .section .totalCoinBox .left {
	font-family:'Pretendard-SemiBold';
	font-size:14px;
	line-height:150%;
}
.contractWrap.mumDetail .section .totalCoinBox .right {
	font-family:'Pretendard-Bold';
	font-size:20px;
	line-height:140%;
}


/* 해지 신청 접수 */
.contractWrap.apply {
	padding-bottom:130px;
}
.contractWrap.apply .header {
	background:#fff;
}
.contractWrap.apply .section .formBoxWrap {
	margin-top:30px;
}
.contractWrap.apply .section .formBoxWrap .formTitle {
	margin-bottom:15px;
	font-family:'Pretendard-SemiBold';
	font-size:16px;
	line-height:150%;
	color:#474747;
}
.contractWrap.apply .section .formBoxWrap .formBox {
	display:flex;
	flex-direction:column;
	gap:10px;
}
.contractWrap.apply .section .formBoxWrap .formBox .formUI {
	display:flex;
	gap:10px;
	padding:15px;
	border:1px solid #ddd;
	border-radius:8px;
	font-family:'Pretendard-Medium';
	font-size:14px;
	line-height:140%;
	color:#6b6b6b;
}
.contractWrap.apply .section .formBoxWrap .formBox .formUI input[type="radio"] {
	margin:0;
}

/* 만보기 이용 유도 팝업 */	
.popWrap.pedometer {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}
.popWrap.pedometer .popBg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.7);
}
.popWrap.pedometer .popInner {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:90%;
	max-width:420px;
	max-height:90%;
	overflow-y:auto;
	padding:20px;
	background:#fff;
	border-radius:12px;
	box-sizing: border-box;
}
.popWrap.pedometer .popInner .popCloseBtn {
	position: absolute;
    top: 10px;
    right: 10px;
	width:32px;
	cursor:pointer;
}
.popWrap.pedometer .popInner .text {
	font-family:'Pretendard-Regular';
	font-size:16px;
	line-height:150%;
	color:#474747;
}
.popWrap.pedometer .popInner .text.type1 {
	font-family:'Pretendard-Bold';
	font-size:20px;
}
.popWrap.pedometer .popInner .text.type2 {
	margin-top:10px;
}
.popWrap.pedometer .popInner .text.type3 {
	font-family:'Pretendard-Bold';
}
.popWrap.pedometer .popInner .imgBox {
	margin-top:20px;
}
.popWrap.pedometer .popInner .imgBox img {
	display:block;
	width:100%;
}
.popWrap.pedometer .popInner .btnBox {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	margin-top:20px;
}

/* 앱 선택 모달 (bottom sheet) */
.appSelectDim {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.45);
	z-index:10;
}
.appSelectDim.is-on {
	display:flex;
	align-items:flex-end;
	justify-content:center;
	animation:appSelectFade 0.18s ease-out;
}
@keyframes appSelectFade {
	from { opacity:0; }
	to { opacity:1; }
}
.appSelectSheet {
	width:100%;
	padding:28px 20px 20px;
	background:#fff;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	box-sizing:border-box;
	animation:appSelectUp 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes appSelectUp {
	from { transform:translateY(100%); }
	to { transform:translateY(0); }
}
.appSelectSheet .appSelectTitle {
	font-family:'Pretendard-Bold';
	font-size:18px;
	color:#282828;
	text-align:center;
	line-height:140%;
}
.appSelectSheet .appSelectDesc {
	margin-top:10px;
	font-family:'Pretendard-Regular';
	font-size:14px;
	color:#6b6b6b;
	text-align:center;
	line-height:150%;
}
.appSelectSheet .appSelectWarn {
	margin-top:10px;
	font-family:'Pretendard-Medium';
	font-size:13px;
	color:#ef3f41;
	text-align:center;
	line-height:150%;
}
.appSelectSheet .appSelectActions {
	display:flex;
	flex-direction:column;
	gap:15px;
	margin-top:25px;
}
.appSelectSheet .appSelectActions .appSelectAction {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:52px;
	border-radius:8px;
	font-family:'Pretendard-SemiBold';
	font-size:16px;
	text-decoration:none;
	box-sizing:border-box;
}
.appSelectSheet .appSelectActions .appSelectAction.speakingmax {
	background:#e84747;
	color:#fff;
}
.appSelectSheet .appSelectActions .appSelectAction.maxai {
	background:#c362ff;
	color:#fff;
}
.appSelectSheet .appSelectCancel {
	display:block;
	width:100%;
	margin-top:10px;
	padding:12px 0;
	background:transparent;
	border:0;
	font-family:'Pretendard-Medium';
	font-size:14px;
	color:#282828;
	text-align:center;
	cursor:pointer;
}

/* PC 해상도 */
@media screen and (min-width:480px) {
	.contractWrap .header {
		width:480px;
		left:50%;
		transform:translateX(-50%);
	}

	.contractWrap .btnUI.fixedBottom {
		left:50%;
		transform:translateX(-50%);
		width:480px;
	}

	.appSelectSheet {
		width:480px;
	}
}