.wc-share {
    position: relative;
    align-items: center;
    gap: 10px; /* Print 和 Share 之间的距离 */
    margin-bottom: 16px;


}
.share-btn:hover svg {
    /* 如果图标是实心的，用 fill */
    fill: #ef4444 !important;
    /* 如果图标是空心线条（如 X/Twitter），可能需要同时改 stroke */

}



.print-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #d0d5dd;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #0f172a;
}

.print-toggle:hover {
    color: #2563eb;
}
.wc-share {
    position: relative;
    margin-top: 24px;
}
.share-btn::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;              /* 👈 就在图标上沿 */
    left: 50%;
    transform: translateX(-50%) translateY(-2px); /* 👈 只上移 2px */
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    padding: 3px 6px;          /* 👈 更紧凑 */
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

.share-btn::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px); /* 👈 紧贴 */
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.share-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.share-btn:hover::before {
    opacity: 1;
}
.share-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;              /* 👈 icon 和文字间距 */
    cursor: pointer;
    background: none;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
}

.share-toggle-icon svg {
    display: block;
}
.wc-share-toggle {
    font-size: 14px;
    padding: 8px 14px;
    border: 1px solid #d0d5dd;

    cursor: pointer;
}

.wc-share-panel {
    position: absolute;   /* 👈 脱离 flex */
    top: calc(100% + 8px);
    /*left: 0;              !* 默认在 Share 按钮下面 *!*/
    z-index: 1000;

    display: none;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border: 1px solid #e4e7ec;
    left: 180px;

}

.wc-share-panel.active {
    display: flex;
    flex-wrap: wrap;
}
/* 外层边框箭头 */
.wc-share-panel::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 34px;            /* 👈 对准 Share 按钮（关键） */

    width: 0;
    height: 0;

    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e4e7ec;
}

/* 内层白色箭头 */
.wc-share-panel::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 35px;            /* 👈 +1px 对齐 */

    width: 0;
    height: 0;

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
}


.share-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #e4e7ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all .2s ease;
}

.share-btn svg {
    width: 18px;
    height: 18px;
    fill: #475467;
}

.share-btn:hover {
    background: #f9fafb;
    border-color: #c0c6d1;
}
.share-toggle:hover {
    color: #2563eb;   /* hover 时 icon & 文字一起变色 */
}