.main-card {width:100%; display:flex; position:relative;}
.main-card .card-link {font-size:12px;}
.main-card .card-content {font-size:10px;}

/*좌측 헤더형*/
.main-card.card-book {border-radius:20px; overflow:hidden; background:linear-gradient(to bottom, rgba(255,255,255,.80) 40%, rgba(255, 255, 255, .60) 100%); backdrop-filter:blur(8px); color:#111;}
.main-card.card-book .card-header {width:40%; overflow:hidden; position:relative;}
.main-card.card-book .card-header img {object-fit:cover; position:relative; transform:translate(-50%, -50%); top:50%; left:50%; width:100%; height:100%;}
.main-card.card-book .card-profile {padding:4% 20px; position:relative;}
.main-card.card-book h1 {margin:8px 0 4px;}
.main-card.card-book .card-icon {width:24%; max-width:120px; border-radius:100%; overflow:hidden; border:5px solid transparent; box-shadow:0 0 0 3px var(--main-color); aspect-ratio:1 / 1;}
.main-card.card-book .card-icon img {object-fit:cover; object-position:center; width:100%;}
.main-card.card-book .card-link {margin-bottom:4px; display:flex; gap:4px;}
.main-card.card-book .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-book .card-link a {border:1px solid var(--main-color); padding:0 8px; border-radius:16px; color:var(--main-color);}
.main-card.card-book .card-link a:hover {background:var(--main-color); color:#fff;}

/*윈도우형*/
.main-card.card-window {flex-direction:column; align-items:center; background:#fff; padding:12px; aspect-ratio:1 / 1.1; max-width:200px; border:1px solid var(--main-color); margin-top:28px; color:#111;}
.main-card.card-window:before {content:''; position:absolute; width:100%; height:28px; top:-28px; border:1px solid var(--main-color); background:var(--main-color);}
.main-card.card-window:after {content:'×'; position:absolute; width:20px; height:20px; top:-24px; right:4px; background:#fff; border:1px solid #fff; box-shadow:0 0 0 1px var(--main-color); color:var(--main-color); font-size:28px; line-height:16px; text-align:center;}
.main-card.card-window .card-link {display:flex; gap:6px; margin:4px;}
.main-card.card-window .card-link a {border:1px solid var(--main-color); padding:0 8px; border-radius:16px; color:var(--main-color);}
.main-card.card-window .card-link a:hover {background:var(--main-color); color:#fff;}
.main-card.card-window .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-window .card-link .card-icon-desc {padding:0 4px;}

/*카드형*/
.main-card.card-card {border-radius:20px; overflow:hidden; background:linear-gradient(to bottom, rgba(255, 255, 255, .80) 40%, rgba(255, 255, 255, .60) 100%); backdrop-filter:blur(8px); color:#111; padding:20px; width:calc(100% - 40px); box-shadow:1px -3px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow:1px -3px 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:1px -3px 5px 5px rgba(0, 0, 0, 0.1); gap:20px;}
.main-card.card-card h1 {text-align:center; margin:4px 0;}
.main-card.card-card .card-icon {width:80%; min-width:80px; max-width:200px; aspect-ratio:1 / 1; border-radius:100%; overflow:hidden; margin:0 auto;}
.main-card.card-card .card-link {margin-bottom:8px; display:flex; justify-content:flex-end; gap:4px; margin-top:-8px;}
.main-card.card-card .card-inner:first-child {width:40%;}
.main-card.card-card .card-link a {display:inline-flex; width:24px; height:24px; border:1px solid var(--main-color); border-radius:100%; align-items:center; justify-content:center; color:var(--main-color); background:#fff;}
.main-card.card-card .card-link a:hover {background:var(--main-color); color:#fff;}
.main-card.card-card .card-link .card-icon-desc {display:none;}


/*문걸이형*/
.main-card.card-roundframe {flex-direction:column; align-items:center; background:#fff; color:#111; padding:8px 8px 20px; border-radius:240px 240px 12px 12px; width:100%; max-width:200px; gap:4px;}
.main-card.card-roundframe .card-icon {width:calc(100% - 20px); overflow:hidden; border-radius:100%; border:5px solid transparent; box-shadow:1px -3px 5px 5px rgba(0,0,0,0.1); -webkit-box-shadow:1px -3px 5px 5px rgba(0,0,0,0.1); -moz-box-shadow:1px -3px 5px 5px rgba(0,0,0,0.1); aspect-ratio:1 / 1; background:#fff;}
.main-card.card-roundframe h1 {margin:4px 0;}
.main-card.card-roundframe .card-link {display:flex; gap:4px; margin:4px;}
.main-card.card-roundframe .card-link a {border:1px solid var(--main-color); padding:0 8px; border-radius:16px; color:var(--main-color); text-align:center;}
.main-card.card-roundframe .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-roundframe .card-link a:hover {background:var(--main-color); color:#fff;}
.main-card.card-roundframe .card-link .card-icon-desc {padding:0 4px;}

/*플레이리스트형*/
.main-card.card-playlist {flex-direction:column; align-items:center; border:1px solid var(--main-color); padding:16px; border-radius:20px; background:#fff; max-width:180px; color:#111;}
.main-card.card-playlist .card-playbar {display:block; background:var(--main-color); height:4px; width:100%; border-radius:4px; position:relative; margin:0 0 8px;}
.main-card.card-playlist .card-playbar:before {content:''; display:block; width:8px; height:8px; border-radius:100%; background:#fff; border:2px solid var(--main-color); top:50%; position:absolute; left:50%; transform:translate(-50%, -50%);}
.main-card.card-playlist .card-icon-decotter {color:var(--main-color); display:flex; justify-content:space-evenly; width:100%; padding:8px;}
.main-card.card-playlist .card-icon {width:100%; max-width:200px; border-radius:16px; overflow:hidden; border:1px solid var(--main-color); aspect-ratio:1 / 1; background:#fff;}
.main-card.card-playlist {gap:4px 0;}
.main-card.card-playlist .card-link {display:flex; justify-items:center; gap:4px; flex-direction:column; margin:4px 0; width:100%;}
.main-card.card-playlist .card-link a {border:1px solid var(--main-color); padding:0 8px; border-radius:16px; color:var(--main-color); text-align:center;}
.main-card.card-playlist .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-playlist .card-link a:hover {background:var(--main-color); color:#fff;}
.main-card.card-playlist .card-link .card-icon-desc {padding:0 4px;}

/*트위터풍*/
.main-card.card-twitter {flex-direction:column; background:#fff; color:#111;}
.main-card.card-twitter .card-icon {width:24%; max-width:120px; overflow:hidden; border-radius:100%; position:absolute; border:1px solid var(--main-color); box-shadow:0 0 0 4px #fff; top:0; transform:translateY(-50%); left:8px; aspect-ratio:1; background:#fff;}
.main-card.card-twitter h1 {margin:8px 0 4px; margin-left:calc(24% + 20px);}
.main-card.card-twitter .card-content {margin-left:calc(24% + 20px);}
.main-card.card-twitter .card-header {overflow:hidden; display:flex; align-items:center; justify-content:center;}
.main-card.card-twitter .card-header img {object-fit:cover; width:100%; height:100%;}
.main-card.card-twitter .card-profile {position:relative; padding:0 4px 24px;}
.main-card.card-twitter .card-link {display:inline-flex; font-size:14px; margin:0 4px; gap:2px;}
.main-card.card-twitter .card-link .card-icon-desc {display:none;}

/*인스타그램풍*/
.main-card.card-instagram {gap:0 16px; align-items:center; padding:20px; width:calc(100% - 40px); background:#fff; color:#111;}
.main-card.card-instagram .card-icon {width:20%; min-width:80px; max-width:160px; aspect-ratio:1 / 1; border-radius:100%; overflow:hidden; border:2px solid var(--main-color);}
.main-card.card-instagram .card-link {display:flex; margin:4px 0 8px; gap:2px; flex-direction:column;}
.main-card.card-instagram .card-link a {border:1px solid var(--main-color); padding:0 8px; border-radius:16px; color:var(--main-color);}
.main-card.card-instagram .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-instagram .card-link a:hover {background:var(--main-color); color:#fff;}

/*카카오풍*/
.main-card.card-kakao {flex-direction:column; align-items:center; background:linear-gradient(to bottom, rgba(255, 255, 255, .80) 40%, rgba(255, 255, 255, .60) 100%); backdrop-filter:blur(8px); color:#111; padding:20px 0; gap:4px;}
.main-card.card-kakao .card-icon {width:20%; min-width:80px; max-width:200px; aspect-ratio:1 / 1; border-radius:100%; overflow:hidden;}
.main-card.card-kakao .card-content {max-width:80%; text-align:center;}
.main-card.card-kakao .card-link {display:flex; gap:4px;}
.main-card.card-kakao .card-link .card-icon-desc {display:none;}

/*리버스카드풍*/
.main-card.card-reverse-card {flex-direction:column; align-items:center;}
.main-card.card-reverse-card .card-inner {display:none; cursor:pointer; box-shadow:0px 0px 7px 3px rgba(57, 57, 57, 0.1); -webkit-box-shadow:0px 0px 7px 3px rgba(57, 57, 57, 0.1); -moz-box-shadow:0px 0px 7px 3px rgba(57, 57, 57, 0.1); padding:16px; border-radius:20px; background:#fff; color:#111; max-width:180px; width:calc(100% - 16px);}
.main-card.card-reverse-card .card-name {text-align:center;}
.main-card.card-reverse-card .card-content {cursor:pointer; box-shadow:0px 0px 7px 3px rgba(57, 57, 57, 0.1); -webkit-box-shadow:0px 0px 7px 3px rgba(57, 57, 57, 0.1); -moz-box-shadow:0px 0px 7px 3px rgba(57, 57, 57, 0.1); padding:16px; border-radius:20px; background:#fff; max-width:180px; color:#111; display:none;}
.main-card.card-reverse-card .card-content.on, .main-card.card-reverse-card .card-inner.on {display:block; animation:flip 0.3s;}
.main-card.card-reverse-card .card-link {display:flex; justify-content:center; gap:4px; margin-top:8px; flex-direction:column;}
.main-card.card-reverse-card .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-reverse-card .card-link a {border:1px solid var(--main-color); padding:0 8px; border-radius:16px; color:var(--main-color); text-align:center;}
.main-card.card-reverse-card .card-link a:hover {background:var(--main-color); color:#fff;}
.main-card.card-reverse-card .card-link .card-icon-desc {padding:0 4px;}
.main-card.card-reverse-card .card-icon {width:100%; margin:0 auto; min-width:80px; max-width:200px; aspect-ratio:1 / 1; border-radius:12px; overflow:hidden;}

@keyframes flip {
from {transform:rotateY(180deg); opacity:0;}
to {transform:rotateY(0deg); opacity:1;}
}

/*다크모드*/
.dark-card .main-card.card-book, .dark-card .main-card.card-card, .dark-card .main-card.card-kakao {background:linear-gradient(to bottom, rgba(0,0,0,.80) 40%, rgba(0, 0, 0, .60) 100%); color:#fefefe;}
.dark-card .main-card.card-window, .dark-card .main-card.card-roundframe, .dark-card .main-card.card-playlist, .dark-card .main-card.card-twitter, .dark-card .main-card.card-instagram, .dark-card .main-card.card-reverse-card .card-inner, .dark-card .main-card.card-reverse-card .card-content {background:#333; color:#fefefe;}
.dark-card .main-card.card-twitter .card-icon {box-shadow: 0 0 0 4px #333;}
.dark-card .main-card.card-card .card-link a, .dark-card .main-card.card-window:after {background:#333;}
.dark-card .main-card.card-window:after {border: 1px solid #333;}