@charset "utf-8";
@import url(font.css);
@import url(common.css);
@import url(swiper-bundle.min.css);
@import url(jquery-ui.min.css);
@import url(aos.css);

:root {
    --point-color: #FFEB58;
    --light-gray: #f9f9f9;
    --red-color: #FF350C;
}

::-webkit-scrollbar {
  display: none;
}

body {
	min-width:1520px;
	-ms-overflow-style: none;
}

body {
  scrollbar-width: none;
}

.wrapper {position: relative; width: 1520px; margin: 0 auto;}
.wrapper02 {position: relative; width: 1264px; margin: 0 auto;}
.wrapper03 {position: relative; width: 1050px; margin: 0 auto;}
.small-wrap {width: 360px; margin: 0 auto;}
.small-wrap.md {width: 400px; margin: 0 auto;}
.red-txt {color: var(--red-color)}

header {border-bottom: 1px solid #eee;}
header h1 {position: absolute; z-index: 1; left: 0; top: 16px;}
header h2 {font-size: 0;}
header .gnb {display: flex; justify-content: space-between; align-items: center; height: 123px;}
header .gnb nav {margin-top: 75px;}
header .gnb nav ul {display: flex; gap: 24px;}
header .gnb nav ul li a {position: relative; display: block; padding: 16px 0; line-height: 1; color: #888; font-weight: 500; transition: color .3s ease;}
header .gnb nav ul li a:after {content: ''; position: absolute; z-index: 1; left: 50%; bottom: -1px; width: 0; height: 2px; background: #000; transition: all .3s ease; transform: translateX(-50%);}
header .gnb nav ul li a:hover {font-weight: 600; color: #000;}
header .gnb nav ul li a:hover::after {width:100%;}
header .gnb .util {display: flex; align-items: center; gap: 8px;}
header .gnb .util > a {padding: 12px 24px; font-size: 15px; border-radius: 100px; line-height: 16px; color: #222; font-weight: 500;}
header .gnb .util > a.player {color: #000; font-weight: 600; background: var(--point-color);}
header .gnb .util > a.player span {padding-right: 24px; background: url(../images/ico/ico_blank.svg) no-repeat right center;}

.user {display: flex; padding: 0 8px; border-radius: 8px; background: var(--light-gray);}
.user a {position: relative; display: block; padding: 12px 12px 12px 30px; font-size: 13px; font-weight: 500; color: #444; background-repeat: no-repeat; background-position: 12px center; line-height: 1;}
.user a + a:before {content: ''; position: absolute; z-index: 1; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: #ddd;}
.user a.login {background-image: url(../images/ico/ico_login.svg);}
.user a.join {background-image: url(../images/ico/ico_join.svg);}

.accout {position: relative;}
.accout > a {display: block; width: 128px; padding: 0 15px; line-height: 36px; font-size: 14px; font-weight: 500; border-radius: 8px; border: 1px solid #eee; background: url(../images/ico/ico_select_arrow.svg) no-repeat right 8px center/20px;}
.accout .list {display:none; position: absolute; z-index: 999; right:0; top: 46px; padding: 8px; border-radius: 8px; border: 1px solid #eee; background: #fff;}
.accout .list a {display: block; width: 110px; font-size: 13px; padding: 12px; border-radius: 8px; line-height: 1; color: #666;}
.accout .list a:hover {background: #f8f8f8; color: #000;}

footer {padding: 16px 0 40px;}
footer .quick-link {display: flex; gap: 24px; border-bottom: 1px solid #eee;}
footer .quick-link li a {display: block; padding: 16px 0; line-height: 1.5; color: #444; font-weight: 500; font-size: 14px;}
footer address {display: flex; flex-direction: column; gap: 4px; margin-top: 16px; line-height: 1.5;}
footer address div {display: flex; gap: 17px; font-size: 13px; color: #888;}
footer address div p {position: relative;}
footer address div p + p:before {content:''; position: absolute; z-index: 1; left: -8px; top: 50%; margin-top: -6px; width: 1px; height: 12px; background: #ddd;}
footer address div a {color: #888;}

/*********** 메인 ***********/
.main-visual {position: relative; border-radius: 24px; margin: 50px auto 0; overflow: hidden;}
.main-visual .swiper-slide {height: 600px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.main-visual .swiper-slide .txt-wrap {position: absolute; z-index: 1; left: 140px; top: 140px; opacity: 0;}
.main-visual .swiper-slide .txt-wrap em {display: block; margin-bottom: 20px; font-size: 20px; font-weight: 600; color: rgba(0,0,0,0.5); line-height: 1;}
.main-visual .swiper-slide .txt-wrap strong {display: block; margin-bottom: 40px; font-size: 50px; font-weight: 700; color: #000; line-height: 1.3;}
.main-visual .swiper-slide .txt-wrap p {font-size: 22px; line-height: 1;}
.main-visual .swiper-slide.swiper-slide-active .txt-wrap {animation: FadeUp .7s ease .3s forwards}
.main-visual .control {display: flex; align-items: center; position: absolute; z-index: 1; left: 140px; bottom: 120px;}
.main-visual .control .swiper-button-next, 
.main-visual .control .swiper-button-prev {position: static; flex-shrink: 0; width: 24px; height: 24px; margin-top: 0;}
.main-visual .control .swiper-button-next {background: url(../images/ico/ico_swiper_next_b.svg) no-repeat center;}
.main-visual .control .swiper-button-prev {background: url(../images/ico/ico_swiper_prev_b.svg) no-repeat center;}
.main-visual .control .swiper-button-next:after, 
.main-visual .control .swiper-button-prev:after {display: none;}
.main-visual .control .swiper-play-button {flex-shrink: 0; width: 24px; height: 24px; margin-left: 16px; cursor: pointer;}
.main-visual .control .swiper-play-button.pause {background: url(../images/ico/ico_swiper_pause_b.svg) no-repeat center/100%;}
.main-visual .control .swiper-play-button.play {background: url(../images/ico/ico_swiper_play_b.svg) no-repeat center/100%;}
.main-visual .swiper-pagination {position: static; width: 36px; text-align: center; margin: 0 12px; font-size: 14px; font-weight: 600;}
.main-visual .swiper-pagination .swiper-pagination-current {position: relative; margin-right: 18px;}
.main-visual .swiper-pagination .swiper-pagination-current:after {content: ''; position: absolute; z-index: 1; right: -10px; top: 50%; margin-top: -1px; width: 2px; height: 2px; border-radius: 100%; background: #000;}
.main-visual .swiper-pagination .swiper-pagination-total {opacity: 0.5;}

.main-visual .swiper-slide.slide01 {background-image: url(../images/bg/bg_slide01.webp);}
.main-visual .swiper-slide.slide02 {background-image: url(../images/bg/bg_slide02.webp);}
.main-visual .swiper-slide.slide03 {background-image: url(../images/bg/bg_slide03.webp);}

.main-visual .swiper-slide.slide01 .txt-wrap em {color: rgba(255,255,255,0.5);}
.main-visual .swiper-slide.slide01 .txt-wrap strong {color: #fff;}
.main-visual .swiper-slide.slide01 .txt-wrap p {color: #fff;}

.main-visual.white .control .swiper-button-next {background-image: url(../images/ico/ico_swiper_next.svg);}
.main-visual.white .control .swiper-button-prev {background-image: url(../images/ico/ico_swiper_prev.svg);}
.main-visual.white .control .swiper-play-button.pause {background-image: url(../images/ico/ico_swiper_pause.svg);}
.main-visual.white .control .swiper-play-button.play {background-image: url(../images/ico/ico_swiper_play.svg);}
.main-visual.white .swiper-pagination {color: #FFEB58;}
.main-visual.white .swiper-pagination .swiper-pagination-current:after {background: #fff;}
.main-visual.white .swiper-pagination .swiper-pagination-total {color: #fff; opacity: 1;}

@keyframes FadeUp {
	0% {opacity: 0; margin-top: 30px;}
	100% {opacity: 1; margin-top: 0px;}
}

section h3 {font-size: 36px; text-align: center; font-weight: 700; line-height: 1.3;}

/* 서비스 소개 섹션 */
.service-info {padding: 150px 0;}
.service-info .info-wrap {margin-top: 70px; display: flex; flex-direction: column; gap: 24px;}
.service-info .info-wrap > div {display: flex; gap: 50px; align-items: center;}
.service-info .info-wrap > div .view {width: 622px; height: 500px; flex-shrink: 0; border-radius: 24px; border: 1px solid #eee; overflow: hidden;}
.service-info .info-wrap > div .view.reco-exam {padding: 34px; overflow-y: auto;}
.service-info .info-wrap > div .txt-wrap {flex-grow: 1; line-height: 1.5;}
.service-info .info-wrap > div .txt-wrap strong {display: block; margin-bottom: 16px; font-size: 28px; font-weight: 700;}
.service-info .info-wrap > div .txt-wrap p {font-size: 18px; color: #666;}

.reco-exam .tab {display: flex; gap: 16px; margin-bottom: 16px;}
.reco-exam .tab li a {font-size: 20px; font-weight: 700; color: #222; opacity: 0.2;}
.reco-exam .tab li.on a {opacity: 1;}

.music-table {border-top: 1px solid #7d7d7d;}
.music-table .rank {width: 50px;}
.music-table .title {text-align: left;}
.music-table .ctrl {width: 50px; padding: 0;}
.music-table thead th {height: 46px; padding: 4px 8px; font-size: 14px; font-weight: 500; color: #7D7D7D;}
.music-table tbody td {padding: 8px; color: #111; font-size: 14px; border-top: 1px solid #eee; text-align: center;}
.music-table tbody td.title a {display: flex; align-items: center;}
.music-table tbody td.title a i {display: block; flex-shrink: 0; width: 0; height: 0; border-radius: 4px; overflow: hidden;}
.music-table tbody td.title a p {flex-grow: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.music-table tbody td.title a:hover {text-decoration: underline;}
.music-table tbody tr td.title a i {width: 50px; height: 50px; margin-right: 16px;}
.music-table tbody tr:hover td {background: #f8f8f8;}
.music-table .ctrl-btn {width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee; background-color: #fff; text-indent: -9999px; background-repeat: no-repeat; background-position: center;}
.music-table .ctrl-btn.play {background-image: url(../images/ico/ico_ctrl_play.svg);}
.music-table .ctrl-btn.pause {background-image: url(../images/ico/ico_ctrl_pause.svg);}
.music-table .ctrl-btn.save {background-image: url(../images/ico/ico_ctrl_plus.svg);}
.music-table .ctrl-btn.remove {background-image: url(../images/ico/ico_ctrl_trash.svg);}
.music-table .ctrl-btn.like {background-image: url(../images/ico/ico_ctrl_like.svg);}
.music-table .ctrl-btn.like.on {background-image: url(../images/ico/ico_ctrl_like_on.svg);}
.music-table .ctrl-btn.share {background-image: url(../images/ico/ico_ctrl_share.svg);}


/* 차원이 다른 */
.difference {padding: 130px 0; background: #F8F8F8;}
.difference h3 {color: #322605;}
.difference ul {display: flex; gap: 24px; margin-top: 48px;}
.difference ul li {flex-grow: 1; width: 33%; height: 450px; padding: 40px 0; text-align: center; color: #fff; border-radius: 16px; background-color: #444; background-repeat: no-repeat; background-position: 0 0; background-size: cover;}
.difference ul li h4 {font-size: 28px; line-height: 1.5; font-weight: 700;}
.difference ul li h4 em {display: block; font-size: 18px;}
.difference ul li p {margin-top: 16px; font-size: 15px; opacity: 0.8;}
.difference ul li.differ01 {background-image: url(../images/bg/bg_differ01.webp);}
.difference ul li.differ02 {background-image: url(../images/bg/bg_differ02.webp);}
.difference ul li.differ03 {background-image: url(../images/bg/bg_differ03.webp);}

/* 하단 배너 영역 */
.btm-banner {background-color: #FFF38E;}
.btm-banner .wrapper02 {display: flex; padding: 24px 0;}
.btm-banner .wrapper02 > div { flex-grow: 1; width: 50%;}
.btm-banner .wrapper02 > div.banner {position: relative;}
.btm-banner .wrapper02 > div.banner .swiper-pagination {left: 224px; bottom: 14px; width: auto;}
.btm-banner .wrapper02 > div.banner .swiper-pagination-bullet {margin: 0 2px; width: 6px; height: 6px; background: #322605; opacity: 0.2;}
.btm-banner .wrapper02 > div.banner .swiper-pagination-bullet-active {opacity: 1;}
.btm-banner .wrapper02 > div.banner .info {padding-bottom: 22px;}
.btm-banner a {display: flex; gap: 24px; align-items: center;}
.btm-banner .img {width: 200px; height: 100px; border-radius: 16px; background-color: #444; overflow: hidden;}
.btm-banner .info {line-height: 1.5;}
.btm-banner .info strong {display: inline-block; padding-right: 24px; color: #322605; background: url(../images/ico/ico_banner_ico.svg) no-repeat right center}
.btm-banner .info p {margin-top: 4px; font-size: 14px; opacity: 0.6}


/*********** 서브 ***********/
#container {min-height: 600px; padding-top: 60px; padding-bottom: 100px;}
#container .sub-title {text-align: center; margin-bottom: 60px;}
#container .sub-title h3 {text-align: center; font-size: 36px; line-height: 1; font-weight: 700;}
#container .sub-title .sub-tab {display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; gap: 24px;}
#container .sub-title .sub-tab li a {display: block; padding: 16px 0; font-weight: 700; line-height: 1.3; color: #000; opacity: 0.2;}
#container .sub-title .sub-tab li.on a {opacity: 1; border-bottom: 2px solid #000;}

/* 게시판 리스트 */
.board-table {border-top: 2px solid #000;}
.board-table td {height: 60px; padding: 8px; color: #666; font-weight: 400; text-align: center; border-bottom: 1px solid #eee;;}
.board-table td.num {width: 80px;}
.board-table td.subject {text-align: left; font-weight: 500;}
.board-table td.subject a:hover {display: block; text-decoration: underline;}
.board-table td.date {width: 100px;}

/* 페이징 */
.paging {display: flex; justify-content: center; gap: 4px; margin-top: 36px;}
.paging a {width: 30px; height: 30px;}
.paging > a {text-indent: -9999px;}
.paging > a.prev {background: url(../images/ico/ico_page_prev.svg);}
.paging > a.next {background: url(../images/ico/ico_page_next.svg);}
.paging ol {display: flex; gap: 4px;}
.paging ol li a {display: flex; justify-content: center; align-items: center; font-size: 14px; color: #BBB; border-radius: 50%;}
.paging ol li.on a {color: #666; background-color: var(--point-color);}

/* 게시판 본문 */
.board-view .board-top {padding-bottom: 36px; border-bottom: 1px solid #eee;}
.board-view .board-top em {display: block; margin-bottom: 8px; line-height: 1.3; color: #888; font-weight: 600;}
.board-view .board-top .title {font-size: 26px; font-weight: 700; line-height: 1.3;}
.board-view .board-top span {display: block; margin-top: 16px; color: #888; font-weight: 400;}
.board-view .board-con {padding: 40px 0 96px; border-bottom: 1px solid #eee;}
.board-view .board-con p {line-height: 1.5;}
.board-view .board-con p + p {margin-top: 8px;}

.board-ctrl {display: flex; margin-top: 40px; justify-content: center; text-align: center;}
.board-ctrl .board-btn {width: 140px; height: 46px; line-height: 46px; font-weight: 700; background-color: #f5f5f5; border-radius: 100px;}
.board-ctrl .board-btn.submit {background-color: var(--point-color);}

/* 게시판 글쓰기 */
.board-write .write-row + .write-row {margin-top: 36px;}
.board-write .write-row label {display: block; margin-bottom: 8px; font-weight: 700;}

/* 자주 묻는 질문 FAQ */
.board-qna .search-form {width: 500px; margin: 0 auto;}
.board-qna .search-form .form {display: flex; width: 500px; height: 60px;}
.board-qna .search-form .form input {padding: 0 24px; height: 100%; flex-grow: 1; border-radius: 30px 0 0 30px; background: #F8F8F8; border: 0;}
.board-qna .search-form .form .search {width: 54px; height: 100%; flex-shrink: 0; text-indent: -9999px; border-radius: 0 30px 30px 0; background: #F8F8F8 url(../images/ico/ico_search_btn.svg) no-repeat left center;}
.board-qna .board-con {margin-top: 50px;}
.board-qna .board-con .category {display: flex; gap: 4px; margin-bottom: 16px;}
.board-qna .board-con .category li a {display: block; font-size: 14px; padding: 8px 16px; border-radius: 8px; background: #F8F8F8; font-weight: 500;}
.board-qna .board-con .category li.on a {color: #fff; font-weight: 700; background: #000;}
.board-qna .board-con .qna-table {border-top: 1px solid #000;}
.board-qna .board-con .qna-table li {display: flex; flex-direction: column; border-bottom: 1px solid #eee;}
.board-qna .board-con .qna-table li.open .title {background: #f8f8f8;}
.board-qna .board-con .qna-table li.open .title strong {background-image: url(../images/ico/ico_qna_arr_up.svg);}
.board-qna .board-con .qna-table .title {display: flex; align-items: center; cursor: pointer; transition: all .3s ease;}
.board-qna .board-con .qna-table .title .cate {display: block; width: 140px;  flex-shrink: 0; font-size: 15px; color: #888; text-align: center;}
.board-qna .board-con .qna-table .title strong {flex-grow: 1; display: block; padding: 20px 78px 20px 24px; font-weight: 500; background: url(../images/ico/ico_qna_arr.svg) no-repeat right 24px center;}
.board-qna .board-con .qna-table .con {display: none; padding: 0 24px 20px 164px; background: #F8F8F8; color: #555555; line-height: 1.5;}

/* 로그인 */
.small-wrap h3 {margin-bottom: 40px; font-size: 36px; font-weight: 700; line-height: 1; text-align: center;}

.login-wrap {display: flex; flex-direction: column; gap: 50px;}
.login-wrap .login-form input {height: 54px; border-radius: 8px; border: 1px solid #ddd;}
.login-wrap .login-form input + input {margin-top: 8px;}
.login-wrap .login-form .login-option {margin: 24px 0;}
.login-wrap .login-find {display: flex; justify-content: center; gap: 17px; margin-top: 16px;}
.login-wrap .login-find a {position: relative; font-size: 14px; color: #888;}
.login-wrap .login-find a + a:before {content: ''; position: absolute; z-index: 1; left: -9px; top: 3px; width: 1px; height: 14px; background: #E5E5E5;}
.login-wrap .or {position: relative; text-align: center;}
.login-wrap .or p {position: relative; z-index: 1; display: inline-block; padding: 0 8px; font-size: 14px; color: #888; background: #fff}
.login-wrap .or:before {content: ''; position: absolute; z-index: 0; left:0; top: 50%; width: 100%; height: 1px; background: #ddd;}

.chk-list {display: flex; flex-wrap: wrap; gap: 16px;}
.inp-chk {position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; color: #444;}
.inp-chk input[type="checkbox"] {position: absolute; z-index: 0; left: -9999px; width: 0; height: 0; clip: rect(0,0,0,0); overflow: hidden;}
.inp-chk input[type="checkbox"] + i {display: block; position: absolute; z-index: 1; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 4px; border: 1px solid #ddd;}
.inp-chk input[type="checkbox"]:checked + i {border-color: #1482FF; background: #1482FF url(../images/ico/ico_chk.svg) no-repeat center;}
.join-wrap .des-txt {margin-bottom: 16px;}
.des-txt {font-size: 14px; color: #888;}
.info-sm {position: relative; padding-left: 10px; font-size: 14px; color: #888;}
.info-sm:before {content: '*'; position: absolute; z-index: 1; left: 0; top: 0;}

/* 버튼 공통 */
.submit-btn {width: 100%; height: 58px; font-size: 18px; line-height: 1.4; font-weight: 700; background: var(--point-color); border: 0 !important; border-radius: 8px; outline: 0;}
.submit-btn:disabled {color: #939393; background: #ececec;}
.outline-btn {display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-radius: 8px; border: 1px solid #000; font-weight: 600;}
.normal-btn {padding: 16px; align-items: center; justify-content: center; height: 54px; border-radius: 8px; border: 1px solid #ddd; font-weight: 600;}
.basic-btn {padding: 16px; border-radius: 8px; border: 0; background: #000; color: #fff; white-space: nowrap; font-weight: 700;}

/* 입력 폼 */
.form-wrap {display: flex; flex-direction: column; gap: 24px;}
.form-wrap .form-row {display: flex; flex-direction: column; gap: 8px;}
.form-wrap .form-row label {font-weight: 700;}
.form-wrap .form-row label.required:after {content: '*'; margin-left: 4px; color: var(--red-color);}
.form-wrap .form-row .inp {display: flex; gap: 8px; flex-wrap: wrap; align-items: center;}
.form-wrap .form-row .inp input,
.form-wrap .form-row .inp select {flex-grow: 1; width: auto;}
.form-wrap .form-row .inp.email input,
.form-wrap .form-row .inp.email select {width: 40%;}
.form-wrap .form-row .inp .info-txt {width: 100%; font-size: 13px; color: var(--red-color);}
.form-wrap .form-row .auth-inp {position: relative;}
.form-wrap .form-row .auth-inp input {padding-right: 90px;}
.form-wrap .form-row .auth-inp .time {position: absolute; z-index: 1; right: 24px; top: 50%; color: var(--red-color); transform: translateY(-50%);}
.form-wrap .submit-btn {margin-top: 16px;}

.form-wrap.more {gap: 36px;}
.form-wrap.col2 {gap: 36px;}
.form-wrap.col2 .multi {display: flex; gap: 50px;}
.form-wrap.col2 .multi .form-row {flex-grow: 1; max-width: 456px;}
.form-wrap.col2 .submit-btn {display: inline-flex; width: min-content; padding: 0 36px; height: 54px; margin-top: 34px; font-size: 16px;}

.require-txt {margin: -10px 0 8px; font-size: 14px; text-align: right; color: #666;}
.require-txt em {color: var(--red-color);}

/* 약관동의 */
.agree-chk {display: block; position: relative; line-height: 1.4; color: #444;}
.agree-chk input[type="checkbox"] {position: absolute; z-index: 0; left: -9999px; width: 0; height: 0; clip: rect(0,0,0,0); overflow: hidden;}
.agree-chk input[type="checkbox"] + i {display: block; position: absolute; z-index: 1; left: 20px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 1px solid #ddd; background: url(../images/ico/ico_radio.svg) no-repeat center/100%;}
.agree-chk input[type="checkbox"]:checked + i {border: 0; background: url(../images/ico/ico_radio_on.svg) no-repeat center/100%;}
.agree-chk p {padding: 18px 16px 18px 52px; font-weight: 700; border-radius: 12px;}
.agree-chk p em {margin-right: 4px; color: var(--red-color);}
.agree-chk.all-chk {margin-bottom: 24px;}
.agree-chk.all-chk p {background: #F8F8F8; border: 1px solid #f8f8f8;}
.agree-chk.all-chk input[type="checkbox"]:checked + i + p {background: #fff; border: 1px solid #000;}

.agree-wrap .agree-box {padding: 20px; border-radius: 12px; border: 1px solid #ebebeb;}
.agree-wrap .agree-box .agree-chk {margin: -20px -20px -2px;}
.agree-wrap .agree-box + .agree-box {margin-top: 16px;}
.agree-wrap .agree-box textarea {height: 100px; padding: 16px; overflow-y: auto; border-radius: 8px; background: #f9f9f9; border: 0; font-size: 13px; color: #444; line-height: 1.6;}
.agree-wrap .submit-btn {margin-top: 40px;}

/* 완료 페이지 */
.result-page {padding-top: 248px; margin-top: 20px; text-align: center; background-repeat: no-repeat; background-position: center top;}
.result-page.join {background-image: url(../images/ico/ico_result_join.svg);}
.result-page.paid {padding-top: 226px; background-image: url(../images/ico/ico_no_free.svg);}
.result-page h3 {margin-bottom: 16px; font-size: 24px; font-weight: 700; line-height: 1;}
.result-page p {font-size: 15px; line-height: 1.6; color: #666;}
.result-page .btn-wrap {display: flex; justify-content: center; margin-top: 36px; gap: 8px;}
.result-page .btn-wrap a,
.result-page .btn-wrap button {padding: 0 24px; line-height: 46px; border: 0; border-radius: 50px; background: #F5F5F5; font-weight: 700;}
.result-page .btn-wrap .active {background: var(--point-color)}
.result-page.paid .btn-wrap .active {font-size: 14px; line-height: 40px ; padding: 0 48px 0 24px; font-weight: 600; background: var(--point-color) url(../images/ico/ico_blank.svg) no-repeat right 24px center;}

/* 마이페이지 */
.mypage {display: flex; gap: 80px;}
.mypage .left-menu {width: 220px; flex-shrink: 0;}
.mypage .left-menu > strong {display: block; margin-bottom: 24px; font-size: 24px; font-weight: 700;}
.mypage .left-menu ul li a {display: block; padding-left: 44px; line-height: 48px; font-weight: 500; color: #888; background-repeat: no-repeat; background-position: left 12px center; border-radius: 8px;}
.mypage .left-menu ul li a.on {color: #000; background-color: #f8f8f8;}
.mypage .left-menu ul li a.info {background-image: url(../images/ico/ico_my_info.svg);}
.mypage .left-menu ul li a.info.on {background-image: url(../images/ico/ico_my_info_on.svg);}
.mypage .left-menu ul li a.coupon {background-image: url(../images/ico/ico_my_coupon.svg);}
.mypage .left-menu ul li a.coupon.on {background-image: url(../images/ico/ico_my_coupon_on.svg);}
.mypage .left-menu ul li a.ticket {background-image: url(../images/ico/ico_my_ticket.svg);}
.mypage .left-menu ul li a.ticket.on {background-image: url(../images/ico/ico_my_ticket_on.svg);}
.mypage .left-menu ul li a.pay {background-image: url(../images/ico/ico_my_pay.svg);}
.mypage .left-menu ul li a.pay.on {background-image: url(../images/ico/ico_my_pay_on.svg);}
.mypage .left-menu ul li a.list {background-image: url(../images/ico/ico_my_list.svg);}
.mypage .left-menu ul li a.list.on {background-image: url(../images/ico/ico_my_list_on.svg);}

.mypage .contents {flex-grow: 1;}
.mypage .contents h3 {font-size: 36px; font-weight: 700;}
.mypage .contents h4 {font-size: 20px; font-weight: 600; margin: 40px 0 16px;}

.mypage .inner {margin-top: 50px;}
.mypage .sub-tabs {display: flex; gap: 24px; margin-top: 16px;}
.mypage .sub-tabs a {padding: 16px 0; opacity: 0.2; font-weight: 600;}
.mypage .sub-tabs a.on {opacity: 1; border-bottom: 2px solid #000;}
.mypage .center-con {margin-top: 100px; text-align: center;}
.mypage .center-con .inp-wrap {margin: 0 auto;}

.mypage .sub-inp p {font-weight: 600; margin-bottom: 16px;}
.mypage .sub-inp .inp-wrap {display: flex; gap: 8px; width: 456px;}
.mypage .sub-inp .inp-wrap .basic-btn {min-width: 100px;}

.mypage .form-wrap {margin-top: 50px;}
.mypage .info-page .title {display: block; margin-bottom: 24px; font-size: 18px; line-height: 1.3; font-weight: 600;}
.mypage .info-page .con {display: flex; flex-direction: column; gap: 8px; color: #666;}
.mypage .info-page .con strong {color: #000;}

.mypage .info-page .btn-wrap {display: flex; gap: 8px; margin-top: 50px;}
.mypage .info-page .btn-wrap a,
.mypage .info-page .btn-wrap button {padding: 16px 36px;}

.dot-list {display: flex; flex-direction: column; gap: 4px; margin: 16px 0;}
.dot-list li {position: relative; padding-left: 20px;}
.dot-list li:before {content:''; position: absolute; z-index: 1; left: 6px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: #666;}

/* 결제 정보 */
.pay-info {margin-top: 30px;}

.gray-box {padding: 28px 36px; border-radius: 16px; background: #f8f8f8;}
.gray-box dl {display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; font-weight: 500;}
.gray-box dl dt {flex-shrink: 0; width: 100px; color: #888;}
.gray-box dl dd {flex-grow: 1; width: calc(100% - 200px);}

.payment {display: flex; flex-direction: column; gap: 8px;}
.payment li {display: flex; justify-content: space-between; align-items: center; padding: 24px; border-radius: 8px; border: 1px solid #e4e4e4;}
.payment li .card-info .name {display: flex; margin-bottom: 8px; align-items: center; gap: 8px;}
.payment li .card-info .name strong {font-weight: 600;}
.payment li .card-info .name i {display: block; padding: 6px 10px; font-size: 13px; font-weight: 600; border-radius: 8px; background: var(--point-color);}
.payment li .card-info .num {font-weight: 500;}
.payment li .card-info .date {margin-top: 16px; font-size: 14px; color: #888;}
.payment li .btn-wrap button {padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; border: 1px solid #e4e4e4; line-height: 1;}
.payment li .btn-wrap button.delete {color: var(--red-color); border: 1px solid rgba(255,53,12,0.2); background: rgba(255,53,12,0.05);}
.payment-add {width: 100%; margin-top: 8px; height: 52px; border: 1px solid #e4e4e4; border-radius: 8px; transition: all .3s ease;}
.payment-add span {padding-left: 24px; font-weight: 600; font-size: 14px; background: url(../images/ico/ico_add.svg) no-repeat left center;}
.payment-add:hover {background-color: #f8f8f8;}

/* 이용내역 */
.list-table table {border-top: 1px solid #000;}
.list-table table thead th {height: 54px; font-weight: 500; color: #333; background: #FBFBFB; border-bottom: 1px solid #eee;}
.list-table table tbody tr td {height: 54px; padding: 16px 8px; word-break: keep-all; border-bottom: 1px solid #eee;}
.list-table table tbody tr td.state {text-align: center;}
.list-table table tbody tr.ing td.state {color: var(--red-color);}
.list-table table tbody tr.past td.state {color: #888;}
.list-table table tbody tr.past td {color: #888;}

/* 약관 */
.agree-page {display: flex; flex-direction: column; gap: 42px; margin-top: -10px; color: #666; font-size: 15px; line-height: 1.6;}
.agree-page b {font-weight: 500; color: #000;}
.agree-page h4 {font-size: 20px; font-weight: 600; color: #000}
.agree-page h5 {font-size: 16px; font-weight: 600; color: #000}
.agree-page h6 {font-weight: 500; color: #000}
.agree-page h5 + .dot-list,
.agree-page h6 + .dot-list {margin: 0;}
.agree-page ul li {line-height: 1.6;}
.agree-page .para01 {display: flex; flex-direction: column; gap: 8px;}
.agree-page .para02 {display: flex; flex-direction: column; gap: 16px;}
.agree-page .dot-list {margin: 4px; gap: 2px;}

/* 이용권 구매 */
.buy-list {display: flex; gap: 20px; justify-content: space-between;}
.buy-list > li {position: relative; flex-grow: 1; width: 30%; padding: 40px 36px 46px; border: 1px solid #DDD; border-radius: 24px; line-height: 1; transition: all .3s ease;}
.buy-list > li.best {background: var(--point-color); border: 1px solid var(--point-color);}
.buy-list > li.best button {border-color: #fff;}
.buy-list > li.best:before {content:'가장 인기!'; position: absolute; z-index: 1; right: 24px; top: 24px; padding: 8px 16px; background: #000; color: #fff; line-height: 1; font-size: 15px; font-weight: 600; border-radius: 100px;}
.buy-list > li:hover {box-shadow: 0px 4px 54px 0px rgba(0, 0, 0, 0.09);}
.buy-list .title {padding-bottom: 36px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.buy-list .title strong {display: block; font-size: 20px; font-weight: 700;}
.buy-list .title em {display: block; margin-top: 12px; font-weight: 500; opacity: 0.4;}
.buy-list .price-wrap {margin: 36px 0;}
.buy-list .price-wrap em {display: block; margin-bottom: 16px; font-size: 18px; font-weight: 600; opacity: 0.25; text-decoration: line-through;}
.buy-list .price-wrap em.txt {text-decoration: none;}
.buy-list .price-wrap .price {display: flex; align-items: flex-end; gap: 8px}
.buy-list .price-wrap .price strong {font-size: 50px; font-weight: 700; line-height: 0.7;}
.buy-list .price-wrap .price span {font-size: 20px;}
.buy-list button {width:100%; height: 54px; text-align: center; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); font-weight: 600; background: #fff;}

/* 웹플레이어 */
#player {position: relative; padding-left: 250px; width: 1200px; height: 880px; overflow-y:hidden;}
#player #player-head {position: fixed; z-index: 1; left: 0; top: 0; width: 250px; height: 100%; padding: 12px 16px; border-right: 1px solid #eee;}
#player #player-head nav {margin-top: 16px;}
#player #player-head nav ul li a {display: block; padding: 15px 16px 15px 40px; border-radius: 8px; font-size: 14px; background-repeat: no-repeat; background-position: left 12px center; color: #888; font-weight: 500;}
#player #player-head nav ul li a.on {background-color: #F9F9F9; color: #000;}
#player #player-head nav ul li a.real {background-image: url(../images/ico/ico_pl_music.svg);}
#player #player-head nav ul li a.type {background-image: url(../images/ico/ico_pl_type.svg);}
#player #player-head nav ul li a.industry {background-image: url(../images/ico/ico_pl_in.svg);}
#player #player-head nav ul li a.my {background-image: url(../images/ico/ico_pl_my.svg);}
#player #player-head nav ul li a.real.on {background-image: url(../images/ico/ico_pl_music_on.svg);}
#player #player-head nav ul li a.type.on {background-image: url(../images/ico/ico_pl_type_on.svg);}
#player #player-head nav ul li a.industry.on {background-image: url(../images/ico/ico_pl_in_on.svg);}
#player #player-head nav ul li a.my.on {background-image: url(../images/ico/ico_pl_my_on.svg);}

#player #player-con {width: 100%; padding-bottom: 140px;}
#player #player-con .con-top {display: flex; align-items: center; justify-content: space-between; padding: 16px 30px;}
#player #player-con .con-top h2 {font-size: 20px; font-weight: 700;}

#player #player-con .pl-tabs {display: flex; padding: 0 30px; gap: 24px; background: #F9F9F9;}
#player #player-con .pl-tabs a {display: block; padding: 16px 0; font-size: 14px; color: #888; font-weight: 500;}
#player #player-con .pl-tabs a.on {color: #000; font-weight: 600; border-bottom: 1px solid #000;}
#player .play-music {position: fixed; z-index: 9999; left: 0; bottom: 0; width: 100%; background: #fff; box-shadow: 0px -6px 30px 0px rgba(0, 0, 0, 0.10);}

.music-wrap {padding:30px; overflow-y:auto; height:560px; }
.music-wrap .btn-wrap {display: flex; gap: 4px; margin-bottom: 12px;}
.music-wrap .btn-wrap button {padding: 0 10px 0 34px; height: 36px; font-size: 13px; font-weight: 500; color: #444; border-radius: 8px; border: 1px solid #ddd; background-repeat: no-repeat; background-position: 10px center; transition: all .3s ease;}
.music-wrap .btn-wrap button:hover {background-color: #f8f8f8;}
.music-wrap .btn-wrap button.play {background-image: url(../images/ico/ico_pl_play.svg);}
.music-wrap .btn-wrap button.add {background-image: url(../images/ico/ico_pl_pl.svg);}
.music-wrap .music-table .chk {width: 50px; padding: 0 16px; text-align: center;}
.music-wrap .music-table .rank {width: 60px;}
.music-wrap .music-table .ctrl {width: 60px;}
.music-wrap .music-table thead th {padding: 0 16px;}
.music-wrap .music-table thead th.ctrl {padding: 0;}
.music-wrap .music-table tbody td {padding: 0;}
.music-wrap .music-table tbody td.title {padding: 12px 16px;}
.music-wrap .music-table tbody td.title a i {width: 50px; height: 50px; margin-right: 16px;}

.play-music .free {display: flex; padding: 10px 0; gap: 16px; font-size: 14px; justify-content: center; align-items: center;}
.play-music .free a {line-height: 32px; padding: 0 30px 0 10px; border-radius: 100px; font-size: 13px; background: var(--point-color) url(../images/ico/ico_link_arr.svg) no-repeat right 10px center; font-weight: 600;}
.play-music .music-time {position: relative; width: 100%; height: 4px; background: #322605;}
.play-music .music-time .bar {position: absolute; z-index: 1; left: 0; height: 4px; background: var(--point-color);}

.play-music .play-ctrl {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 82px; padding: 0 24px;}
.play-music .play-ctrl .ctrl {position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 24px;}
.play-music .play-ctrl .ctrl button {width: 24px; height: 24px; text-indent: -9999px;}
.play-music .play-ctrl .ctrl button.big {width: 34px; height: 34px;}
.play-music .play-ctrl .ctrl button.random {background: url(../images/ico/ico_p_ctrl_random.svg);}
.play-music .play-ctrl .ctrl button.prev {background: url(../images/ico/ico_p_ctrl_prev.svg);}
.play-music .play-ctrl .ctrl button.play {background: url(../images/ico/ico_p_ctrl_play.svg);}
.play-music .play-ctrl .ctrl button.pause {background: url(../images/ico/ico_p_ctrl_pause.svg);}
.play-music .play-ctrl .ctrl button.next {background: url(../images/ico/ico_p_ctrl_next.svg);}
.play-music .play-ctrl .ctrl button.repeat {background: url(../images/ico/ico_p_ctrl_repeat.svg);}
.play-music .play-ctrl .ctrl button.repeat.on {background: url(../images/ico/ico_ctrl_repeat_on.svg);}
.play-music .play-ctrl .ctrl button.one {background: url(../images/ico/ico_p_ctrl_one.svg);}

.play-music .play-ctrl .music-info {display: flex; align-items: center; gap: 16px;}
.play-music .play-ctrl .music-info .pic {width: 50px; height: 50px; border-radius: 4px; border: 1px solid #ddd;}
.play-music .play-ctrl .music-info strong {display: block; color: #111; font-weight: 400;}
.play-music .play-ctrl .play-etc {display: flex; align-items: center; gap: 24px;}
.play-music .play-ctrl .play-etc .time {display: flex; font-size: 14px; font-weight: 500; color: #949494; gap: 4px;}
.play-music .play-ctrl .play-etc .time strong {color: #000;}
.play-music .play-ctrl .play-etc .sound {position: relative; padding-left: 28px; background: url(../images/ico/ico_sound.svg) no-repeat left center;}
.play-music .play-ctrl .play-etc .sound input[type="range"] {width: 80px; height: 4px;}
.play-music .play-ctrl .play-etc .list-btn {width: 40px; height: 40px; border-radius: 50%; background: var(--point-color) url(../images/ico/ico_playlist.svg) no-repeat center; text-indent: -9999px;}

/* s : 250428 css 수정 (하이라이트 다운로드 버튼)
.play-music .play-ctrl .play-etc .btn {display: flex; gap: 8px}
.play-music .play-ctrl .play-etc .btn button {width: 40px; height: 40px; border-radius: 50%; text-indent: -9999px;}
.play-music .play-ctrl .play-etc .down-btn {background: #F0F0F0 url(../images/ico/ico_down_btn.svg) no-repeat center;}
.play-music .play-ctrl .play-etc .list-btn {background: var(--point-color) url(../images/ico/ico_playlist.svg) no-repeat center;}
/* e : 250428 css 수정 */

input[type="range"] {appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border-radius: 3px; background: linear-gradient(to right, #000 50%, #c9c9c9 50%); outline: none; border:0;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 4px; height: 4px; background: #000; border-radius: 50%; cursor: pointer;}
input[type="range"]::-moz-range-thumb {width: 16px; height: 16px; background: #000; border: none; border-radius: 50%; cursor: pointer;}

.playlist {display: flex; position: fixed; z-index: 9998; left: 0; top: 100%; width: 100%; height: 100%; background: #fff; transition: all .3s ease;}
.playlist.on {top: 0;}
.playlist .music {position: relative; display: flex; flex-shrink: 0; flex-direction: column; align-items: center; padding: 50px 30px 0 60px;}
.playlist .music .photo {position: relative; width: 450px; height: 450px; margin-bottom: 16px;}
.playlist .music .photo .like {position: absolute; z-index: 1; right: 24px; top: 24px; width: 40px; height: 40px; border-radius: 50%; background: #fff url(../images/ico/ico_like_btn.svg) no-repeat center;}
.playlist .music .photo .like.on {background-image: url(../images/ico/ico_like_btn_on.svg);}
.playlist .music .lyrics-pop {position: absolute; z-index: 1; left: 0; top: 100%; width: 100%; height: 100%; padding: 50px 35px 140px; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(62px); color: #fff; transition: all .3s ease;}
.playlist .music .lyrics-pop.on {top:0;}
.playlist .music .lyrics-pop .close {position: absolute; z-index: 1; right: 24px; top: 24px; width: 40px; height: 40px; text-indent: -9999px; background: rgba(0,0,0,0.2) url(../images/ico/ico_pop_close.svg) no-repeat center; border-radius: 8px;}
.playlist .music .lyrics-txt {height: 100%; overflow-y: auto;}
.playlist .music .lyrics-txt > strong {display: block; margin-bottom: 24px; font-size: 20px; font-weight: 700;}
.playlist .music .lyrics-txt div {line-height: 1.6; font-size: 14px;}

.playlist .music .lyrics {height: 40px; padding: 0 16px 0 40px; border-radius: 50px; font-size: 14px; font-weight: 500; background: #f5f5f5 url(../images/ico/ico_lyrics.svg) no-repeat left 16px center;}

.music-list {height: 100%; flex-grow: 1; padding: 50px 60px 100px 30px;}
.music-list > strong {display: block; margin-bottom: 24px; font-size: 20px; font-weight: 700;}
.music-list ul {height: calc(100% - 80px); overflow-y: scroll; border-top: 1px solid #eee;}
.music-list ul li {display: flex; align-items: center; border-bottom: 1px solid #eee; background-color: #fff;}
.music-list ul li a {display: flex; align-items: center; flex-grow: 1; padding: 12px 16px; gap: 16px; font-size: 14px;}
.music-list ul li a i {width: 50px; height: 50px; border-radius: 4px; border: 1px solid #eee; overflow: hidden;}
.music-list ul li .btn-wrap {display: flex; gap: 10px; flex-shrink: 0; padding-right: 10px;}
.music-list ul li .btn-wrap button {width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee; text-indent: -9999px;}
.music-list ul li .btn-wrap button.play {background: url(../images/ico/ico_ctrl_play.svg) no-repeat center;}
.music-list ul li .btn-wrap button.pause {background: url(../images/ico/ico_ctrl_pause.svg) no-repeat center;}
.music-list ul li .btn-wrap button.save {background: url(../images/ico/ico_ctrl_save.svg) no-repeat center;}
.music-list ul li .btn-wrap button.delete {background: url(../images/ico/ico_ctrl_trash.svg) no-repeat center;}

.music-list.my {padding: 16px 30px;}
.music-list.my ul {border-top: 0;}
.music-list.my ul li a {display: flex; flex-direction: column; gap: 8px; height: 92px; position: relative; padding-left: 76px; align-items: flex-start; justify-content: center; line-height: 1;}
.music-list.my ul li a i {position: absolute; z-index: 1; left:0; top: 50%; width: 60px; height: 60px; margin-top: -30px; border-radius: 8px;}
.music-list.my ul li a i img {width: 100%;}
.music-list.my ul li a p {font-size: 15px; font-weight: 600;}
.music-list.my ul li a span {font-size: 14px; color: #888;}

.popup-wrap {display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.popup-wrap .popup {position: absolute; z-index: 1; left: 50%; top: 50%; width: 300px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 10px 10px 54px 0px rgba(0, 0, 0, 0.25); transform: translate(-50%,-50%);}
.popup-wrap .title {display: flex; justify-content: space-between; margin-bottom: 16px;}
.popup-wrap .title p {font-size: 17px; font-weight: 600;}
.popup-wrap .title .close {width: 20px; height: 20px; background: url(../images/ico/ico_close_b.svg) no-repeat center; text-indent: -9999px;}
.popup-wrap .pop-con {display: flex; flex-direction: column; gap: 8px;}
.popup-wrap .pop-con ul {display: flex; flex-direction: column; gap: 8px;}
.popup-wrap .pop-con ul button {display: flex; width: 100%; flex-direction: column; align-items: flex-start; padding: 16px; flex-direction: column; gap: 8px; border-radius: 8px; border: 1px solid #eee; font-size: 14px; line-height: 1;}
.popup-wrap .pop-con ul button.on {border-color: var(--point-color)}
.popup-wrap .pop-con ul button em {font-size: 12px; color: #666;}
.popup-wrap .pop-con .add-list {padding: 16px 0; font-size: 14px; border-radius: 8px; background: #f7f7f7;}
.popup-wrap .pop-con .add-list span {padding-left: 24px; background: url(../images/ico/ico_add.svg) no-repeat left center; font-weight: 600;}

.popup-wrap .popup.alert-pop, .popup-wrap .popup.msg-pop {padding: 32px 24px 28px; text-align: center;}
.popup-wrap .popup.alert-pop > strong, .popup-wrap .popup.msg-pop > strong {display: block; margin-bottom: 12px; font-size: 18px; font-weight: 700;}
.popup-wrap .popup.alert-pop p, .popup-wrap .popup.msg-pop p {font-size: 15px; color: #666;}
.popup-wrap .popup.alert-pop .btn-wrap, .popup-wrap .popup.msg-pop .btn-wrap {display: flex; margin-top: 24px; gap: 8px;}
.popup-wrap .popup.alert-pop .btn-wrap button, .popup-wrap .popup.msg-pop .btn-wrap button {width: 50%; height: 44px; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 600; background: #F5F5F5; border: 0;}
.popup-wrap .popup.alert-pop .btn-wrap button.active, .popup-wrap .popup.msg-pop .btn-wrap button.active {background: var(--point-color)}
.popup-wrap .popup.msg-pop .btn-wrap button { width: 100%; }

.popup-wrap#main-pop {display: block; background: rgba(0,0,0,0.4);}
.popup-wrap#main-pop .popup {width: 408px; padding: 0; border-radius: 20px; border: 4px solid #fff;}
.popup-wrap#main-pop .popup .pic {border-radius: 18px 18px 0 0; overflow: hidden;}
.popup-wrap#main-pop .popup .ctrl {padding: 16px; display: flex; justify-content: space-between;}
.popup-wrap#main-pop .popup .ctrl .inp-chk {color: #222; font-size: 16px;}
.popup-wrap#main-pop .popup .ctrl .inp-chk input[type="checkbox"] + i {top: 3px;}
.popup-wrap#main-pop .popup .ctrl .close {padding-right: 28px; font-weight: 600; background: url(../images/ico/ico_close_b.svg) no-repeat right center;}

.pop-form {display: flex; flex-direction: column; gap: 16px}
.pop-form .form-row {display: flex; flex-direction: column; gap: 8px;}
.pop-form .form-row label {font-size: 12px; color: #666;}
.pop-form .form-row input {height: 46px;}
.pop-form .submit-btn {height: 44px; font-size: 14px; color: #222;}

/* 버튼 공통 스타일 */
.social-login-btn {display: flex; align-items: center; width: 100%; height: 60px; border-radius: 6px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s; padding: 0 10px; box-sizing: border-box; overflow: hidden; white-space: nowrap;}
.login-icon {height: 24px; width: 24px; margin-right: 12px; display: flex; flex-shrink: 0; align-items: center; justify-content: center;}
.login-text {font-size: 16px; font-weight: 500; text-overflow: ellipsis; overflow: hidden;}

/* 네이버 버튼 스타일 */
.naver-login-btn {background-color: #03C75A; justify-content: center;}
.naver-login-btn:hover {background-color: #02b350;}
.naver-login-btn:active {background-color: #029a45;}
.naver-icon {color: white; background-color: #03C75A; border-radius: 2px; font-weight: bold; font-size: 22px;}
.naver-text {color: white;}

/* 구글 버튼 스타일 */
.white-google-login-btn {background-color: white; border: 1px solid #dadce0; justify-content: center;}
.white-google-login-btn:hover {background-color: #f8f9fa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);}
.white-google-login-btn:active {background-color: #f1f3f4;}
.white-google-icon {display: flex; align-items: center; justify-content: center;}
.white-google-text {color: #3c4043;}

.blue-google-login-btn {background-color: #4285F4; justify-content: center; border: none;}
.blue-google-login-btn:hover {background-color: #3367D6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}
.blue-google-login-btn:active {background-color: #2955C5;}
.blue-google-icon {display: flex; align-items: center; justify-content: center; background-color: white; border-radius: 2px; padding: 2px; height: 24px; width: 24px;}
.blue-google-text {color: white; min-width:148px;}

/* 카카오 버튼 스타일 */
.kakao-login-btn {background-color: #FEE500; justify-content: center;}
.kakao-login-btn:hover {background-color: #f4dc00;}
.kakao-login-btn:active {background-color: #ebd300;}
.kakao-icon {color: #000000; font-size: 18px;}
.kakao-text {color: #000000;}

.email-login-btn {background-color: #ffffff; border: 1px solid #dadce0; justify-content: center;}
.email-login-btn:hover {background-color: #f8f9fa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);}
.email-login-btn:active {background-color: #f1f3f4;}
.email-icon {display: flex; align-items: center; justify-content: center;}
.email-text {color: #3c4043; min-width:160px;}