.share-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 90%;
    max-width: 400px;
}

.share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.share-header h3 {font-size: 16px;}

.close-share {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.url-copy {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.url-copy input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.social-share {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.social-share button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.kakao-share {
    background: url(../images/contents/fav_kakao.png) #FEE500 13px center no-repeat; padding-left:40px !important;
}

.facebook-share {
    color: white;
    background: url(../images/contents/fav_fb.png) #0068eb 13px center no-repeat; padding-left:40px !important;
}

.twitter-share {
    color: white;
    background: url(../images/contents/fav_x.png) #000 13px center no-repeat; padding-left:35px !important;
}
.copy-btn {padding:0 15px; border-radius: 4px; cursor: pointer;}
.shortcut-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 90%;
    max-width: 500px; 
}

.shortcut-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.shortcut-header h3{font-size: 15px;}
.close-shortcut {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.shortcut-content {
    margin-top: 20px;
}

.shortcut-instructions {
    margin-bottom: 20px;
}
.shortcut-instructions h4 {font-size: 13px;}
.shortcut-instructions ol {
    padding-left: 20px;
    margin-top: 10px;
    font-size: 13px;
}

.shortcut-instructions li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.url-copy {
    display: flex;
    gap: 10px;font-size: 13px;
}

.copy-btn {border:0; }
.url-copy input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.copy-shortcut-btn {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.copy-shortcut-btn:hover {
    background: #0056b3;
}

/* Rotate animation for the share button */
.rotate {
    animation: rotate 2s linear infinite; /* Spins continuously */
    transform-origin: center; /* Sets the rotation point to the center */
}

/* Keyframes for the rotate animation */
@keyframes rotate {
    from {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    to {
        transform: rotate(360deg); /* Complete a full rotation */
    }
}