@charset "UTF-8";

.btn_wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
}



/* 기본 테두리 버튼 */
.btn_outline {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: auto;
	height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--line-color2);
	border-radius: 4px;
	background: #FFF;
	font-size: 16px;
	font-weight: 600;
	color: var(--txt-color-600);
	line-height: 24px;
	letter-spacing: -0.4px;
}
.btn_outline:hover {
	background: #F3F5F7;
}



/* 파란 버튼 */
.btn_primary {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: auto;
	height: 48px;
	padding: 12px 24px;
	border: none;
	border-radius: 4px;
	background: var(--point-color2);
	font-size: 16px;
	font-weight: 600;
	color: #FFF;
	line-height: 24px;
	letter-spacing: -0.4px;
}
.btn_primary:hover {
	background: #0073E6;
    color: #F2F2F2;
}
.btn_primary.disable {
	opacity: 0.4;
	cursor: not-allowed;
}
.btn_primary.disable:hover {
	background: var(--point-color2);
	color: #FFF;
}



/* 넓은 파란 버튼 */
.btn_primary_wide {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 15px 32px 16px;
	border-radius: 4px;
	border: none;
	background: var(--point-color2);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: #FFF;
	letter-spacing: -0.4px;
}



/* 검은 버튼 */
.btn_dark {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: auto;
	height: 48px;
	padding: 12px 24px;
	border: none;
	border-radius: 4px;
	background-color: var(--txt-color-600);
	font-size: 16px;
	font-weight: 600;
	color: #FFF;
	line-height: 24px;
	letter-spacing: -0.4px;
}
.btn_dark:hover {
	background: #000;
	color: #F2F2F2;
}
.btn_dark.disable {
	opacity: 0.4;
	cursor: not-allowed;
}
.btn_dark.disable:hover {
	background: var(--txt-color-600);
	opacity: 0.4;
}



/* 테두리가 있는 작은 버튼 (대댓글 작성하기 버튼에 사용함) */
.btn_outline_small {
	display: flex;
	gap: 2px;
	align-items: center;
	width: fit-content;
	height: 32px;
	padding: 5px 12px 7px;
	border-radius: 4px;
	border: 1px solid var(--line-color2);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.4px;
}
.btn_outline_small:hover {
	background: #F3F5F7;
}



/* 아이콘 버튼 */
.btn_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 32px;
	height: 32px;
	background: #FFF;
	
	border: 1px solid var(--line-color2);
	border-radius: 50%;
}
.btn_icon:hover {
	background: #F3F5F7;
}
.btn_icon img {
	width: 60%;
}



/* 아이콘이 들어있는 둥근 버튼 (좋아요 버튼) */
.btn_like {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 32px;
	padding: 0 15px;
	background: #FFF;
	border: 1px solid var(--line-color2);
	border-radius: 30px;
}
.btn_like:hover {
	background: #F3F5F7;
}
.btn_like img {
	background: none !important;
	width: 18px !important;
	height: 18px !important;
}
.btn_like p {
	font-size: 14px;
	color: var(--txt-color-500);
}



/* 탭 버튼 */
.btn_tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--line-color2);
	border-radius: 36px;
	font-size: 14px;
    font-weight: 500;
	color: var(--txt-color-500);
	line-height: 20px;
	letter-spacing: -0.2px;
}

.btn_tab.active {
    background: var(--txt-color-600);
    border: 1px solid var(--txt-color-600);
    border-radius: 36px;
    color: #FFF;
}



/* 더보기 버튼 */
.btn_more {
    display: flex;
    gap: 5px;
    align-items: center;
	text-align: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--line-color2);
	border-radius: 4px;
    background: #FFF;
	font-size: 16px;
	font-weight: 500;
	color: var(--txt-color-600);
	line-height: 24px;
	letter-spacing: -0.4px;

}
.btn_more:hover {
	background: #F3F5F7;
}
.btn_more img {
	width: 20px;
	height: 20px;
}



/* 아이콘 달려있는 버튼 (스크랩 버튼 등) */
.btn_tool {
	position: relative;
	display: flex;
	box-sizing: border-box;
    justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line-color2);
	border-radius: 4px;
	background: #FFF;
    font-size: 14px;
}
.btn_tool:hover {
	background: #F3F5F7;
}
.btn_tool img {
	margin-right: 4px;
	width: 20px;
	height: 20px;
}



/* 정렬 순서에 쓰는 버튼 (글자만 있는 버튼) */
.btn_sort {
	border: none;
	background: none;
	font-weight: 400;
	color: var(--txt-color-500);
	line-height: 1.4;
	letter-spacing: -0.02em;
	cursor: pointer;
}

.btn_sort.active {
	font-weight: 600;
	color: var(--txt-color-600);
}



/* 정렬 순서에 쓰는 작은 버튼 (글자만 있는 버튼 댓글 리뷰에서 사용됨) */
.btn_sort_small {
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 400;
	color: var(--txt-color-500);
	line-height: 1.4;
	letter-spacing: -0.02em;
}
.btn_sort_small.active {
	font-weight: 700;
	color: var(--txt-color-600);
}