@charset "UTF-8";

/*  ==========================
탭바 (Tab bar)
=========================== */
.tabbar-group {
	position: fixed;
	bottom:0;
	width: 100%;
	height: 54px;
	display: flex;
	align-items: center;
	border-top:1px solid var(--gray30);
	background: #fff;
	width:100%;
	max-width:560px;
	z-index: 10;
}
.tabbar-group a {
	width:25%;
	height: 100%;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:4px;
	font-size:10px;
	line-height: 100%;
	color:var(--gray60);
	font-weight: 500;
	transition-duration:0.1s;
	transition-timing-function:ease;
}
.tabbar-group a:hover {
	background: var(--gray10);
	cursor: pointer;
}
.tabbar-group a > i {
	width:24px;
	height: 24px;
	display: block;
}
.tabbar-group a.active {
	color:var(--gray130);
}
.tabbar-group a.home > i {
	background: url("../images/phone/icon-home-gray.svg");
}
.tabbar-group a.home.active > i {
	background: url("../images/phone/icon-home-black.svg");
}
.tabbar-group a.list > i {
	background: url("../images/phone/icon-listpaper-gray.svg");
}
.tabbar-group a.list.active > i {
	background: url("../images/phone/icon-listpaper-black.svg");
}
.tabbar-group a.mall > i {
	background: url("../images/phone/icon-shopping-gray.svg");
}
.tabbar-group a.mall.active > i {
	background: url("../images/phone/icon-shopping-black.svg");
}
.tabbar-group a.cafe > i {
	background: url("../images/phone/icon-naver-gray.png");
}
.tabbar-group a.cafe.active > i {
	background: url("../images/phone/icon-naver-black.png");
}
.tabbar-group a.my > i {
	background: url("../images/phone/icon-my-gray.svg");
}
.tabbar-group a.my.active > i {
	background: url("../images/phone/icon-my-black.svg");
}


/*  ==========================
버튼 (Button)
=========================== */
.btn-group button {
	width:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 4px;
	font-size:15px;
	font-weight: 500;
	gap:6px;
	transition-duration:0.1s;
	transition-timing-function:ease;
	padding:0 20px;
}
.btn-group button.fill-main {
	background: var(--main60);
	color:var(--white);
}
.btn-group button.fill-main:not(.disable):hover {
	background: var(--main70);
}
.btn-group button.disable {
	background: var(--gray40);
	color:var(--gray60);
}
.btn-group button.fill-gray {
	background: var(--gray20);
	color:var(--gray130);
}
.btn-group button.fill-gray:not(.disable):hover {
	background: var(--gray30);
}
.btn-group button.fill-black {
	background: var(--gray130);
	color:var(--white);
}
.btn-group button.fill-gblackray:not(.disable):hover {
	background: var(--gray110);
}
.btn-group button.round {
	border-radius: 99px!important;
}
.btn-group.small button {
	height: 40px;
	font-size:14px;
	padding:0 16px;
}
.btn-group.small-round button {
	height: 40px;
	font-size:14px;
	padding:0 16px;
	border-radius: 99px;
}
.btn-group.small button i,
.btn-group.small-round button i {
	width:16px;
	height: 16px;
	display: block;
}
.btn-group.bottom {
	padding:16px 20px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 20%);
	bottom: 0;
    position: fixed;
    width: 100%;
    max-width: 560px;
	z-index: 10;
}



/*  ==========================
토글 (Toggle)
=========================== */
.toggle-group {
	cursor: pointer;
}
.toggle-group input[type="checkbox"] {
	appearance: none;
	position: relative;
	border-radius: 99px;
	width: 56px;
	height: 28px;
	background: var(--gray50);
	cursor: pointer;
}
.toggle-group input[type="checkbox"]::before {
	content: "";
	position: absolute;
	left: 2px;
    width: 24px;
    height: 24px;
    top: 2px;
	border-radius: 50%;
	background-color: #fff;
	transition: left 100ms linear;
}
.toggle-group input[type="checkbox"]:checked {
  background-color: var(--main60);
}
.toggle-group input[type="checkbox"]:checked::before {
  background-color: white;
  left: 30px;
}
.toggle-group input[type="checkbox"]:disabled {
  background:rgba(188, 195, 201, .4);
  cursor: not-allowed;
}
.toggle-group input[type="checkbox"]:disabled:before {
 background: #fff;
}
.toggle-group input[type="checkbox"]:disabled ~ span {
  opacity: 0.7;
  cursor: not-allowed;
}
.toggle-group label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom:0!important;
	flex-wrap: wrap;
}



/*  ==========================
푸터 (Footer)
=========================== */
footer {
	width:100%;
	padding:30px 20px 60px;
	background: #fff;
}
footer .menu-group {
	font-size:13px;
	display: flex;
	flex-wrap: wrap;
	gap:16px;
	margin-bottom:20px;
}
footer .menu-group a:hover {
	text-decoration: underline;
}
footer h2 {
	font-size:15px;
	font-weight: 600;
	margin-bottom:6px;
}
footer .info {
	display: flex;
	gap:3px;
	flex-direction: column;
	font-size:13px;
}
footer .info li {
	width:100%;
}
footer .info .label {
	font-weight: 600;
}
footer .info .txt {
	font-weight: 300;
	color:var(--gray80);
}
footer .copyright {
	margin-top:12px;
	font-size:12px;
	color:var(--gray50);
	font-weight: 300;
	display: block;
}



/*  ==========================
헤더 (Header)
=========================== */
header {
	height: 56px;
	position: sticky;
	top:0;
}
header.sub-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 14px;
	z-index: 10;
}
header.main-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 14px 0 20px;
	z-index: 10;
}
header.main-type.down .logo {
	background: url("../images/phone/logo-black.png") no-repeat center;
	background-size:100%;
}
header.down {
	background: #fff;
}
header.sub-type .tit {
	position: absolute;
	left: 50%;
	top: 50%;
    transform: translate(-50%,-50%);
	font-size:18px;
	font-weight: 600;
	width:calc(100% - 132px);
	text-align: center;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
header.sub-type .tit.blind {
	font-size:0;
	position: relative;
}
header .logo {
	font-size:0;
	width:68px;
	height: 22px;
	background: url("../images/phone/logo-white.png") no-repeat center;
	background-size:100%;
}
header button {
	width:36px;
	height: 36px;
	border-radius: 4px;
	transition-duration:0.1s;
	transition-timing-function:ease;
	position: relative;
}
header button .blind {
	display: none;
}
header button.btn-back {
	background: url("../images/phone/icon-arrow-right.svg") no-repeat center;
	background-size:24px;
}
header button.btn-bell {
	background: url("../images/phone/icon-bell-ringing.svg") no-repeat center;
	background-size:24px;
}
header button .num {
	position: absolute;
	top:2px;
	right:4px;
	min-width:14px;
	height: 14px;
	padding:0 4px;
	border-radius: 99px;
	background: var(--system-red60);
	color:var(--white);
	font-size:11px;
	font-weight: 500;
}
/*탭 타입-견적내역 헤더*/
.estimate-main header.sub-type {
	padding-left:20px;
}
.estimate-main header.down {
	border-bottom:1px solid var(--gray30);
}
header.sub-type .tab-type {
	display: flex;
	gap:20px;
	height: 100%;
}
header.sub-type .tab-type a {
	display: flex;
	align-items: center;
	gap:5px;
	height: 100%;
	position: relative;
	font-size:17px;
	font-weight: 600;
	color:var(--gray50);
	transition-duration:0.1s;
	transition-timing-function:ease;
}
header.sub-type .tab-type a.active {
	color:var(--gray130);
}
header.sub-type .tab-type a.active::after {
	content:"";
	width:100%;
	height: 1.5px;
	background: var(--gray130);
	position: absolute;
	left:0;
	bottom:0;
}
header.sub-type .tab-type a:not(.active):hover {
	color:var(--gray130);
}
header.sub-type .tab-type .num {
	font-size:11px;
	color:#fff;
	font-weight: 500;
	height: 14px;
	min-width: 14px;
	padding:0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray70);
	border-radius: 99px;
}
header .btn-login {
	width: fit-content !important;
	height: 32px;
	padding:0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black);
	color:#fff;
	border-radius: 99px !important;
	font-size:13px;
	font-weight: 500;
	margin-right:6px;
}


/*  ==========================
텍스트박스 (Textarea, Textbox)
=========================== */
.textarea-group textarea {
	border:1px solid var(--gray30);
	padding:16px;
	width: 100%;
	border-radius: 4px;
	overflow: auto;
	min-height:120px;
	resize: none;
	display: block;
	font-size:15px;
	line-height: 150%;
	position: relative;
} 


/*  ==========================
툴팁 Tooltip
=========================== */
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}
.tooltip-on[data-tooltip]:before,
.tooltip-on[data-tooltip]:after,
.tooltip-on.tooltip:before,
.tooltip-on.tooltip:after {
	visibility: unset;
	 opacity: 1;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:not(.tooltip-on):hover:before,
[data-tooltip]:not(.tooltip-on):hover:after,
[data-tooltip]:not(.tooltip-on):focus:before,
[data-tooltip]:not(.tooltip-on):focus:after,
.tooltip:not(.tooltip-on):hover:before,
.tooltip:not(.tooltip-on):hover:after,
.tooltip:not(.tooltip-on):focus:before,
.tooltip:not(.tooltip-on):focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: max-content;
  background-color: rgba(25, 31, 40, 1);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 12px;
  line-height: 1.2;
  border-radius: 4px;
	font-weight: 300;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 44px;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: rgba(25, 31, 40, 1);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -88px;
}




/*  ==========================
프로그레스바 (Progress group)
=========================== */
.progress-group {
	width:100%;
	height: 3px;
	background: var(--gray20);
}
.progress-group .progress-value {
	height: 100%;
	background: var(--main60);
	transition-duration:0.3s;
	transition-timing-function:ease;
}




/*  ==========================
셀렉트박스 (Selectbox group)
=========================== */
.selectbox-group {
	display: flex;
	flex-direction: column;
	position: relative;
}
.selectbox-group select {
	position: relative;
	width: 100%;
    border-radius: 8px;
    height: 46px;
    padding: 0 42px 0 20px;
    font-size: 15px;
    font-weight: 400;
	color: var(--gray60);
	background: url("../images/phone/icon-arrow-down-gray.svg") rgba(255,255,255,1) no-repeat calc(100% - 16px) center;
	background-size:16px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.selectbox-group select:valid{
    color: var(--gray130);
}
.selectbox-group.readonly select {
	background: var(--gray30);
	color: var(--gray130);
	border-radius: 8px;
}
.selectbox-group.small select {
	height: 32px;
	border-radius: 4px;
	padding:0 28px 0 12px;
	font-size:14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: url(../images/phone/icon-12-down-black.svg) rgba(255,255,255,1) no-repeat calc(100% - 10px) center;
}




/*  ==========================
라디오 그룹 (Radio group)
=========================== */
.radio-group {
	display: flex;
	flex-direction: column;
	gap:8px;
}
.radio-group .container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	padding:6px 20px 6px 16px;
	border-radius: 8px;
	background: #fff;
}
.radio-group .container input {
    opacity: 0;
	display: none;
    cursor: pointer;
}
.radio-group .checkmark {
    position: absolute;
	left: 16px;
    height: 24px;
    width: 24px;
    background:url(../images/phone/icon-radio-unsel.svg);
	background-size:100%;
    border-radius: 50%;
	-webkit-transition-duration:0.1s;
	-webkit-transition-timing-function:ease;
	transition-duration:0.1s;
	transition-timing-function:ease;
}
.radio-group .container input:checked ~ .checkmark {
     background:url(../images/phone/icon-radio-sel.svg);
	background-size:100%;
}
.radio-group .container .txt {
	font-size:16px;
	font-weight: 400 !important;
	color:var(--gray100);
	display: block;
	margin-left:34px;
}
.radio-group .container input:checked ~ .txt {
	color: var(--gray130);
	font-weight: 400 !important;
}




/*  ==========================
체크박스 그룹 (Checkbox group)
=========================== */
.checkbox-group input[type="checkbox"]{
	opacity: 0;
	display: none;
    cursor: pointer;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap:8px;
}
.checkbox-group .container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	padding:6px 20px 6px 16px;
	border-radius: 8px;
	background: #fff;
}
.checkbox-group .container input {
    opacity: 0;
	display: none;
    cursor: pointer;
}
.checkbox-group .checkmark {
    position: absolute;
	left: 16px;
    height: 24px;
    width: 24px;
    background:url(../images/phone/icon-check-uncheck.svg);
	background-size:100%;
	-webkit-transition-duration:0.1s;
	-webkit-transition-timing-function:ease;
	transition-duration:0.1s;
	transition-timing-function:ease;
}
.checkbox-group .container input:checked ~ .checkmark {
     background:url(../images/phone/icon-check-check.svg);
	background-size:100%;
}
.checkbox-group .container .txt {
	font-size:16px;
	font-weight: 400 !important;
	color:var(--gray100);
	display: block;
	margin-left:34px;
}
.checkbox-group .container input:checked ~ .txt {
	color: var(--gray130);
	font-weight: 400 !important;
}




/*  ==========================
모달 (Modal popup)
=========================== */
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  opacity: 0;
  transition-duration: 0.1s;
}
.modal.show {
  opacity: 1;
  z-index: 999;
  transition-duration: 0.15s;
}
.modal .modal_container {
  display: flex !important;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
}
.modal .modal_container .modal_box {
  background: #fff;
  width:280px;
  overflow: auto;
  position: relative;
  border-radius: 16px;
}
.modal .modal_content {
    max-height: calc(88vh - 64px);
	overflow: auto;
	text-align: center;
	padding:30px 16px 24px;
	display: flex;
	gap:10px;
	flex-direction: column;
}
.modal .modal_container .modal_box > .btn-group {
	border-top:1px solid var(--gray30);
}
.modal .modal_container .modal_box > .btn-group button {
	color:var(--main60);
}
.modal .modal_container .modal_box > .btn-group button:hover {
	background: var(--gray20);
}
.modal .modal_content .txt {
	font-size:16px;
	font-weight: 600;
}
.modal .modal_content .sub-txt {
	font-size:15px;
	font-weight: 300;
	color:var(--gray80);
}