/* =====================================================================
   MyLink 名片「新外觀」— 只在 user_theme.appearance 有值時載入（body.ap）
   顏色、圓角、字型都由 card.php 輸出的 CSS 變數決定：
   --ap-bg --ap-text --ap-btn --ap-btn-text --ap-btn-border --ap-av-ring --ap-surface --ap-r --ap-font
   其他選項以 body class 切換：ap-btn-* ap-shape-* ap-tex-* ap-av-* ap-anim-*
   以 #mylink_html 錨定，確保蓋過 layout.min.css 的舊樣式；舊主題名片不會載入本檔
   ===================================================================== */

html:has(body.ap) { font-size: 16px; }
body.ap {
    margin: 0;
    min-height: 100vh;
    background: transparent;
    color: var(--ap-text);
    font-family: var(--ap-font);
    -webkit-font-smoothing: antialiased;
}
/* 背景用固定圖層：長頁面捲動時漸層不會中斷（iOS Safari 不支援 background-attachment: fixed） */
body.ap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ap-bg);
}

/* ---------- 背景紋理（疊在背景上；顏色跟著文字色，深色、淺色背景都適用） ---------- */
body.ap::after {
    content: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    --ap-tex: color-mix(in srgb, var(--ap-text) 13%, transparent);
}
body.ap.ap-tex-dots::after {
    content: "";
    background-image: radial-gradient(var(--ap-tex) 1.3px, transparent 1.8px);
    background-size: 20px 20px;
}
body.ap.ap-tex-grid::after {
    content: "";
    background-image: linear-gradient(var(--ap-tex) 1px, transparent 1px), linear-gradient(90deg, var(--ap-tex) 1px, transparent 1px);
    background-size: 24px 24px;
}
body.ap.ap-tex-diag::after {
    content: "";
    background-image: repeating-linear-gradient(45deg, var(--ap-tex) 0 1px, transparent 1px 13px);
}
body.ap.ap-tex-grain::after {
    content: "";
    opacity: .22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 版面：單欄置中 ---------- */
.ap #mylink_html {
    position: relative;
    width: 100%;
    max-width: 600px;
    min-height: auto;
    margin: 0 auto;
    padding: 52px 20px 24px;
}
@media (max-width: 500px) {
    .ap #mylink_html { padding: 36px 16px 16px; }
}

/* ---------- 頁首：大頭照、名稱、社群圖示、自介 ---------- */
.ap #mylink_html .profile { margin: 0 0 30px; text-align: center; }
.ap #mylink_html .profile .profile-top {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    width: 100%; margin: 0;
}
.ap #mylink_html .profile .profile-img {
    width: 96px; height: 96px; margin: 0 auto;
    border-radius: 50%;
    background-color: var(--ap-surface);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 0 0 3px var(--ap-av-ring), 0 12px 30px -14px rgba(0, 0, 0, .45);
    cursor: zoom-in;
}
.ap #mylink_html .profile .profile-title { width: 100%; margin: 18px auto 0; }
.ap #mylink_html .profile .cardName { display: block; margin: 0; text-align: center; }
.ap #mylink_html .profile .cardName h2 {
    margin: 0; padding: 0;
    font-size: 1.5rem; font-weight: 800; line-height: 1.3; letter-spacing: .01em;
    color: var(--ap-text);
}
.ap #mylink_html .profile .cardName span { display: block; margin-top: 4px; font-size: .95rem; opacity: .75; }
.ap #mylink_html .profile ul.profile-icons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
    margin: 14px 0 0; padding: 0;
}
.ap #mylink_html .profile ul.profile-icons li { display: block; width: auto; margin: 0; padding: 0; list-style: none; }
.ap #mylink_html .profile ul.profile-icons li::after { content: none !important; }
.ap #mylink_html .profile ul.profile-icons a {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: var(--ap-text); text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}
.ap #mylink_html .profile ul.profile-icons a:hover {
    transform: translateY(-2px);
    background-color: color-mix(in srgb, var(--ap-text) 10%, transparent);
}
.ap #mylink_html .profile ul.profile-icons i { font-size: 1.4rem; color: var(--ap-text); }
.ap #mylink_html .profile .profile-txt {
    width: 100%; max-width: 480px; margin: 16px auto 0;
    font-size: 1rem; line-height: 1.75; text-align: center; opacity: .88;
    color: var(--ap-text); word-break: break-word;
}
.ap #mylink_html .profile .profile-txt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 大頭照形狀 */
.ap-av-rounded #mylink_html .profile .profile-img { border-radius: 28%; }
.ap-av-large #mylink_html .profile .profile-img { width: 132px; height: 132px; }
@media (max-width: 500px) { .ap-av-large #mylink_html .profile .profile-img { width: 120px; height: 120px; } }

/* ---------- 區塊共用 ---------- */
.ap #mylink_html > [data-id] { margin: 0 0 30px; }
.ap #mylink_html h2.card-title {
    margin: 0 0 14px; padding: 0;
    font-size: 1.05rem; font-weight: 800; text-align: center;
    color: var(--ap-text); opacity: .92;
}

/* ---------- 連結區塊 → 按鈕卡片 ---------- */
.ap #mylink_html .link-list {
    display: flex; flex-direction: column; gap: 12px;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.ap #mylink_html .link-list .link-one { margin: 0; padding: 0; border: 0 !important; background: none !important; }
.ap #mylink_html .link-list .link-one a {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; margin: 0; padding: 9px 58px;
    border-radius: var(--ap-r);
    background: var(--ap-btn); color: var(--ap-btn-text);
    border: 0 solid var(--ap-btn-border);
    text-align: center; text-decoration: none; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ap #mylink_html .link-list .link-one.no-img a { padding: 10px 26px; }
.ap #mylink_html .link-list .link-one a::after { content: none; }
.ap #mylink_html .link-list .link-one a:hover { transform: translateY(-2px); }
.ap #mylink_html .link-list .link-one a:active { transform: translateY(0) scale(.99); }
.ap #mylink_html .link-list .link-one .card-img {
    position: absolute; left: 7px; top: 7px; bottom: 7px;
    width: 46px; height: auto; margin: 0; padding: 0; box-sizing: border-box;
    border-radius: min(calc(var(--ap-r) - 4px), 14px);
    background-size: cover; background-position: center;
}
.ap #mylink_html .link-list .link-one.no-img .card-img { display: none; }
.ap #mylink_html .link-list .link-one .card-txt { width: 100%; padding: 0; }
.ap #mylink_html .link-list .link-one .card-txt h2 {
    margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: inherit;
}
.ap #mylink_html .link-list .link-one .card-txt p {
    margin: 2px 0 0; font-size: .8rem; line-height: 1.45; opacity: .78; color: inherit;
}
.ap #mylink_html .link-list .link-one .card-txt p:empty { display: none; }

/* ---------- 按鈕樣式 ---------- */
.ap-btn-fill #mylink_html .link-list .link-one a { background: var(--ap-btn); border-width: 0; box-shadow: none; }

.ap-btn-outline #mylink_html .link-list .link-one a { background: transparent; border: 2px solid var(--ap-btn-border); box-shadow: none; }
.ap-btn-outline #mylink_html .link-list .link-one a:hover { background: color-mix(in srgb, var(--ap-btn-border) 9%, transparent); }

.ap-btn-soft #mylink_html .link-list .link-one a {
    background: var(--ap-btn); border: 1px solid var(--ap-btn-border);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45);
}
.ap-btn-soft #mylink_html .link-list .link-one a:hover { box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); }

.ap-btn-hard #mylink_html .link-list .link-one a {
    background: var(--ap-btn); border: 2px solid var(--ap-btn-border);
    box-shadow: 5px 5px 0 var(--ap-btn-border);
}
.ap-btn-hard #mylink_html .link-list .link-one a:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ap-btn-border); }
.ap-btn-hard #mylink_html .link-list .link-one a:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ap-btn-border); }

.ap-btn-glass #mylink_html .link-list .link-one a {
    background: color-mix(in srgb, var(--ap-btn) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--ap-btn-border) 50%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .4);
}
.ap-btn-glass #mylink_html .link-list .link-one a:hover { background: color-mix(in srgb, var(--ap-btn) 26%, transparent); }

.ap-btn-glow #mylink_html .link-list .link-one a {
    background: color-mix(in srgb, var(--ap-btn) 8%, transparent);
    border: 1.5px solid var(--ap-btn-border);
    box-shadow: 0 0 18px -4px var(--ap-btn-border), inset 0 0 14px -8px var(--ap-btn-border);
}
.ap-btn-glow #mylink_html .link-list .link-one a:hover { box-shadow: 0 0 26px -2px var(--ap-btn-border), inset 0 0 16px -8px var(--ap-btn-border); }

.ap-btn-dashed #mylink_html .link-list .link-one a { background: transparent; border: 2px dashed var(--ap-btn-border); box-shadow: none; }
.ap-btn-dashed #mylink_html .link-list .link-one a:hover { background: color-mix(in srgb, var(--ap-btn-border) 8%, transparent); border-style: solid; }

/* 立體：底部厚陰影，按下去會「壓下」 */
.ap-btn-3d #mylink_html .link-list .link-one a {
    background: var(--ap-btn); border: 2px solid var(--ap-btn-border);
    box-shadow: 0 5px 0 var(--ap-btn-border);
}
.ap-btn-3d #mylink_html .link-list .link-one a:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--ap-btn-border); }
.ap-btn-3d #mylink_html .link-list .link-one a:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ap-btn-border); }
.ap-btn-3d #mylink_html .link-list { gap: 16px; }

/* ---------- 九宮格 ---------- */
.ap #mylink_html .link-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 0; padding: 0;
}
.ap #mylink_html .link-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ap #mylink_html .link-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ap #mylink_html .link-grid a {
    display: block; width: auto; height: auto; aspect-ratio: 1 / 1;
    border-radius: min(var(--ap-r), 14px); overflow: hidden;
    background: var(--ap-surface);
}
.ap #mylink_html .link-grid a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ap #mylink_html .link-grid a:hover img { transform: scale(1.04); }
.ap-btn-hard #mylink_html .link-grid a { border: 2px solid var(--ap-btn-border); box-shadow: 4px 4px 0 var(--ap-btn-border); }
.ap-btn-3d #mylink_html .link-grid a { border: 2px solid var(--ap-btn-border); box-shadow: 0 4px 0 var(--ap-btn-border); }

/* ---------- 輪播 / YouTube ---------- */
.ap #mylink_html .mycarousel,
.ap #mylink_html .mycarouselYT { border-radius: min(var(--ap-r), 20px); overflow: hidden; }
.ap #mylink_html .mycarousel img { display: block; border-radius: min(var(--ap-r), 20px); }
.ap #mylink_html .mycarouselYT .slider-iframe { border-radius: min(var(--ap-r), 20px); overflow: hidden; }
.ap #mylink_html .swiper-pagination-bullet { background: var(--ap-text); opacity: .35; }
.ap #mylink_html .swiper-pagination-bullet-active { background: var(--ap-text); opacity: 1; }
.ap #mylink_html .mycarouselYT .swiper-button-next,
.ap #mylink_html .mycarouselYT .swiper-button-prev { color: var(--ap-text); }

/* ---------- 文本內容 ---------- */
.ap #mylink_html .text_editor {
    margin: 0; padding: 20px 22px;
    border-radius: min(var(--ap-r), 20px);
    background: var(--ap-surface); color: var(--ap-text);
    line-height: 1.75; word-break: break-word;
}
.ap-btn-hard #mylink_html .text_editor { border: 2px solid var(--ap-btn-border); box-shadow: 5px 5px 0 var(--ap-btn-border); }
.ap-btn-3d #mylink_html .text_editor { border: 2px solid var(--ap-btn-border); box-shadow: 0 5px 0 var(--ap-btn-border); }
.ap-btn-dashed #mylink_html .text_editor { border: 2px dashed color-mix(in srgb, var(--ap-btn-border) 45%, transparent); }
.ap #mylink_html .text_editor a { color: inherit; text-decoration: underline; }
.ap #mylink_html .text_editor img { max-width: 100%; height: auto; border-radius: 12px; }
.ap #mylink_html .text_editor table th,
.ap #mylink_html .text_editor table td { border-color: color-mix(in srgb, var(--ap-text) 22%, transparent); }

/* ---------- 地圖（在 .mycard 外面） ---------- */
body.ap .google_maps { width: 100%; max-width: 600px; margin: 0 auto 24px; padding: 0 20px; }
body.ap .google_maps iframe { width: 100%; height: 180px; border: 0; border-radius: min(var(--ap-r), 20px); box-shadow: none; }
body.ap .google_maps .addtext { margin-top: 8px; color: var(--ap-text); opacity: .8; font-size: .85rem; }

/* ---------- 分享 / QR / 收藏：改放名片右上角一排，不再壓在連結按鈕上 ---------- */
.ap #mylink_html .share {
    position: absolute; top: 14px; right: 14px; bottom: auto; left: auto;
    display: flex; gap: 8px; z-index: 5;
}
.ap #mylink_html .share a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 0; line-height: 1; border-radius: 50%;
    font-size: 1rem;
    background: color-mix(in srgb, var(--ap-text) 10%, transparent);
    color: var(--ap-text); box-shadow: none;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ap #mylink_html .share a:hover { background: color-mix(in srgb, var(--ap-text) 18%, transparent); }
.ap #mylink_html .share a i { color: var(--ap-text); }
.ap #mylink_html .share a.icon-like.on { background: #ffb400; }
.ap #mylink_html .share a.icon-like.on i { color: #fff; }
.ap #mylink_html .share #back-to-top { display: none; }

/* ---------- 頁尾：用 MyLink 製作 ---------- */
body.ap footer.ap-footer { padding: 8px 0 96px; text-align: center; }
body.ap .ap-made {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--ap-text) 8%, transparent);
    color: var(--ap-text); font-size: .85rem; font-weight: 700; text-decoration: none;
    transition: background-color .18s ease;
}
body.ap .ap-made:hover { background: color-mix(in srgb, var(--ap-text) 14%, transparent); }
body.ap .ap-made img { width: 20px; height: 20px; }

/* ---------- 進場動畫：淡入上浮（只用 backwards，動畫結束後不留 transform，不影響彈窗定位） ---------- */
@keyframes apRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ap-anim-rise #mylink_html .profile,
.ap-anim-rise #mylink_html > [data-id],
.ap-anim-rise #mylink_html .link-list .link-one { animation: apRise .55s cubic-bezier(.2, .7, .3, 1) backwards; }
.ap-anim-rise #mylink_html > [data-id] { animation-delay: .12s; }
.ap-anim-rise #mylink_html .link-list .link-one:nth-child(1) { animation-delay: .16s; }
.ap-anim-rise #mylink_html .link-list .link-one:nth-child(2) { animation-delay: .22s; }
.ap-anim-rise #mylink_html .link-list .link-one:nth-child(3) { animation-delay: .28s; }
.ap-anim-rise #mylink_html .link-list .link-one:nth-child(4) { animation-delay: .34s; }
.ap-anim-rise #mylink_html .link-list .link-one:nth-child(5) { animation-delay: .40s; }
.ap-anim-rise #mylink_html .link-list .link-one:nth-child(n+6) { animation-delay: .46s; }
@media (prefers-reduced-motion: reduce) {
    .ap-anim-rise #mylink_html .profile,
    .ap-anim-rise #mylink_html > [data-id],
    .ap-anim-rise #mylink_html .link-list .link-one { animation: none; }
}

/* ---------- 社群圖示放在名片最下方 ---------- */
body.ap .ap-icons-foot { width: 100%; max-width: 600px; margin: 0 auto 18px; padding: 0 20px; }
body.ap .ap-icons-foot ul.profile-icons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    margin: 0; padding: 0;
}
body.ap .ap-icons-foot ul.profile-icons li { display: block; width: auto; margin: 0; padding: 0; list-style: none; }
body.ap .ap-icons-foot ul.profile-icons li::after { content: none !important; }
body.ap .ap-icons-foot ul.profile-icons a {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: color-mix(in srgb, var(--ap-text) 9%, transparent);
    color: var(--ap-text); text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}
body.ap .ap-icons-foot ul.profile-icons a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--ap-text) 16%, transparent); }
body.ap .ap-icons-foot ul.profile-icons i { font-size: 1.35rem; color: var(--ap-text); }

/* 自訂社群圖示（上傳的圖片） */
.ap #mylink_html ul.profile-icons img.ml-cicon,
body.ap .ap-icons-foot img.ml-cicon { width: 1.6rem; height: 1.6rem; vertical-align: middle; }

/* ---------- 背景圖：圖片載入前先顯示中性灰底 ---------- */
body.ap.ap-bgimg::before { background-color: #777; }

/* 進場動畫 + 重點連結動畫同時使用時，兩個動畫都要保留 */
.ap-anim-rise #mylink_html .link-list .link-one.fx-shake { animation: apRise .55s cubic-bezier(.2, .7, .3, 1) backwards, mlFxShake 3s ease-in-out .8s infinite; }
.ap-anim-rise #mylink_html .link-list .link-one.fx-pulse { animation: apRise .55s cubic-bezier(.2, .7, .3, 1) backwards, mlFxPulse 1.8s ease-in-out .6s infinite; }
/* 放大效果：新樣式按鈕是圓角卡片，用 gap 排版，不需要額外的上下間距 */
.ap #mylink_html .link-list .link-one.fx-big { margin: 4px 0 !important; }
.ap #mylink_html .link-list .link-one.fx-big > a { min-height: 68px; }

/* ---------- 新區塊：跟著新樣式的顏色、圓角 ---------- */
.ap #mylink_html .ml-embed iframe { border-radius: min(var(--ap-r), 20px); }
.ap #mylink_html .ml-countdown,
.ap #mylink_html .ml-faq details,
.ap #mylink_html .ml-contact,
.ap #mylink_html .ml-donate-bank { background: var(--ap-surface); border-radius: min(var(--ap-r), 20px); }
.ap-btn-hard #mylink_html .ml-countdown,
.ap-btn-hard #mylink_html .ml-faq details,
.ap-btn-hard #mylink_html .ml-contact { border: 2px solid var(--ap-btn-border); box-shadow: 4px 4px 0 var(--ap-btn-border); }
.ap #mylink_html .ml-cd-units span { background: color-mix(in srgb, var(--ap-text) 8%, transparent); }
.ap #mylink_html .ml-contact button,
.ap #mylink_html .ml-donate-list a { background: var(--ap-btn); color: var(--ap-btn-text); border: 0; border-radius: var(--ap-r); }
.ap-btn-outline #mylink_html .ml-donate-list a,
.ap-btn-dashed #mylink_html .ml-donate-list a,
.ap-btn-glow #mylink_html .ml-donate-list a,
.ap-btn-glass #mylink_html .ml-donate-list a { background: transparent; border: 2px solid var(--ap-btn-border); }
.ap-btn-outline #mylink_html .ml-contact button,
.ap-btn-dashed #mylink_html .ml-contact button,
.ap-btn-glow #mylink_html .ml-contact button,
.ap-btn-glass #mylink_html .ml-contact button { background: transparent; border: 2px solid var(--ap-btn-border); color: var(--ap-btn-text); }

/* 頁尾「檢舉」小字 */
body.ap .ap-report { display: block; width: fit-content; margin: 10px auto 0; color: var(--ap-text); opacity: .45; font-size: .75rem; text-decoration: none; }
body.ap .ap-report:hover { opacity: .8; text-decoration: underline; }