@charset "utf-8";
button { all: unset; cursor: pointer; box-sizing: border-box; box-shadow: none; outline: none; text-align: center; }
.btn { display: inline-block; text-align: center; text-decoration: none; white-space: nowrap; border: 1px solid transparent; box-shadow: none; outline: none; padding: .375rem .75rem; border-radius: 0; box-sizing: border-box; }
.btn-s-small { padding: 2px 8px; }
.btn-x-small { padding: .125rem .5rem; }
.btn-middle { padding: .5rem 1rem; }
.btn-large { padding: .75rem 1.25rem; }
.btn-x-large { padding: 1rem 1.5rem; }
.btn-border-radius-25r { border-radius: .25rem; }
.btn-border-radius-50r { border-radius: .5rem; }
.btn-border-radius-5p { border-radius: 5px; }
.btn-border-radius-25p { border-radius: 25px; }
/* button color */
.btn-outline-accent,
.btn-outline-hover-accent { background-color: #fff; border: 1px solid var(--accent); color: var(--accent); }
.btn-outline-hover-accent:hover { border: 1px solid var(--accent); background-color: var(--accent); color: #fff; }
.btn-full-accent { border: 1px solid var(--accent); background-color: var(--accent); color: #fff; }
.btn-outline-fontaccent,
.btn-outline-hover-fontaccent { background-color: #fff; border: 1px solid var(--fontaccent); color: var(--fontaccent); }
.btn-outline-hover-fontaccent:hover { border: 1px solid var(--fontaccent); background-color: var(--fontaccent); color: #fff; }
.btn-full-fontaccent { border: 1px solid var(--fontaccent); background-color: var(--fontaccent); color: #fff; }
.btn-outline-gray,
.btn-outline-hover-gray { background-color: #fff; border: 1px solid var(--colorgray); color: var(--colorgray); }
.btn-outline-hover-gray:hover { background-color: var(--colorgray); color: #fff; }
.btn-full-gray { background-color: var(--colorgray); border: 1px solid var(--colorgray); color: #fff; }
.btn-outline-darkgray,
.btn-outline-hover-darkgray { background-color: #fff; border: 1px solid var(--darkgray); color: var(--darkgray); }
.btn-outline-hover-darkgray:hover { background-color: var(--darkgray); color: #fff; }
.btn-full-darkgray { background-color: var(--darkgray); border: 1px solid var(--darkgray); color: #fff; }
.btn-outline-red,
.btn-outline-hover-red { background-color: #fff; border: 1px solid var(--colorred); color: var(--colorwhite); }
.btn-full-red { background-color: var(--colorred); border: 1px solid var(--colorred); color: #fff; }
.btn-outline-hover-red { background-color: var(--colorred); color: #fff; }
.btn-full-black { background-color: var(--colorblack); border: 1px solid var(--colorblack); color: #fff; }
.btn-outline-black,
.btn-outline-hover-black { background-color: #fff; border: 1px solid var(--darkgray); color: var(--darkgray); }
.btn-outline-hover-black:hover { background-color: var(--darkgray); color: #fff; }
.btn-kakao { background-color: #fee500; color: var(--colorblack); }
.btn-naver { background-color: #03c75a; color: var(--colorwhite); }
.btn-call  { background-color: var(--colorblue); color: var(--colorwhite); }