/* ========【公開網站共用說明視窗】只作用於此視窗，不覆寫站點原樣式 ======== */
.l1ng-site-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(24, 35, 44, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    overscroll-behavior: contain;
}
.l1ng-site-info-backdrop *,
.l1ng-site-info-backdrop *::before,
.l1ng-site-info-backdrop *::after { box-sizing: border-box; }
.l1ng-site-info-backdrop .l1ng-site-info-panel {
    display: flex;
    flex-direction: column;
    width: min(790px, 100%);
    height: auto;
    max-height: min(650px, calc(100dvh - 40px));
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e7eb;
    border-radius: 10px;
    box-shadow: 0 18px 52px rgba(22, 32, 41, .19);
    color: #344657;
    font-family: system-ui, -apple-system, "Noto Sans TC", sans-serif;
    outline: none;
}
.l1ng-site-info-backdrop .l1ng-site-info-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    padding: 16px 20px;
    border-bottom: 1px solid #e6eaee;
    background: #fff;
}
.l1ng-site-info-backdrop .l1ng-site-info-heading-icon { flex: 0 0 19px; width: 19px; height: 19px; align-self: flex-start; margin-top: 3px; color: #55acee; }
.l1ng-site-info-backdrop .l1ng-site-info-heading-icon svg { display: block; width: 19px; height: 19px; }
.l1ng-site-info-backdrop .l1ng-site-info-heading { min-width: 0; flex: 1 1 auto; }
.l1ng-site-info-backdrop .l1ng-site-info-heading h2 { margin: 0; font-size: 17px; font-weight: 650; color: #283946; line-height: 1.5; }
.l1ng-site-info-backdrop .l1ng-site-info-heading p { margin: 3px 0 0; color: #81909c; font-size: 11px; font-weight: 400; line-height: 1.6; }
.l1ng-site-info-backdrop .l1ng-site-info-close {
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #687984;
    cursor: pointer;
}
.l1ng-site-info-backdrop .l1ng-site-info-close:hover, .l1ng-site-info-backdrop .l1ng-site-info-close:focus-visible { background: #eff4f7; color: #344657; }
.l1ng-site-info-backdrop .l1ng-site-info-close svg { width: 17px; height: 17px; }
.l1ng-site-info-content { position: relative; flex: 0 1 auto; min-height: 0; height: 220px; overflow: hidden; }
.l1ng-site-info-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.l1ng-site-info-content.is-loading .l1ng-site-info-frame { visibility: hidden; }
.l1ng-site-info-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    padding: 16px 20px;
    background: #fff;
    pointer-events: none;
}
.l1ng-site-info-loading[hidden] { display: none; }
.l1ng-site-info-skeleton {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 670px;
}
.l1ng-site-info-skeleton-line {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 11px;
    border-radius: 4px;
    background: #ecf0f3;
}
.l1ng-site-info-skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.72) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: l1ng-site-info-skeleton-shimmer 1.7s ease-in-out infinite;
}
.l1ng-site-info-skeleton .skeleton-heading {
    width: 34%;
    height: 16px;
    margin: 0 0 8px;
    background: #e4eaf0;
}
.l1ng-site-info-skeleton .skeleton-heading:not(:first-child) { margin-top: 18px; }
.l1ng-site-info-skeleton .skeleton-text-medium { width: 76%; }
.l1ng-site-info-skeleton .skeleton-text-short { width: 53%; }
@keyframes l1ng-site-info-skeleton-shimmer {
    to { transform: translateX(100%); }
}
@media (max-width: 640px) {
    .l1ng-site-info-backdrop { padding: 10px; }
    .l1ng-site-info-backdrop .l1ng-site-info-panel {
        width: 100%;
        max-height: calc(100dvh - 20px);
    }
    .l1ng-site-info-backdrop .l1ng-site-info-header { padding: 15px 16px; gap: 9px; }
    .l1ng-site-info-backdrop .l1ng-site-info-heading h2 { font-size: 16px; }
    .l1ng-site-info-loading { padding: 14px 16px; }
}
/* ========【族譜工具原生視窗】共用族譜既有 header / panel / close 樣式 ======== */
.ui-dialog-backdrop.l1ng-site-info-native {
    z-index: 6000;
}
.l1ng-site-info-native .l1ng-site-info-native-panel {
    height: auto;
    max-height: min(680px, calc(100dvh - 28px));
}
.l1ng-site-info-native .l1ng-site-info-content {
    flex: 0 1 auto;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: var(--surface-card);
}
/* 僅「關於族譜工具」採固定外框；展開條款時不再重新計算視窗高度。 */
.l1ng-site-info-native[data-site-info-section="genealogy"] .l1ng-site-info-native-panel {
    height: min(680px, calc(100dvh - 28px));
    max-height: min(680px, calc(100dvh - 28px));
}
.l1ng-site-info-native[data-site-info-section="genealogy"] .l1ng-site-info-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}
.l1ng-site-info-native[data-site-info-section="genealogy"] .l1ng-site-info-frame {
    height: 100%;
}
.l1ng-site-info-native .l1ng-site-info-frame { background: var(--surface-card); }
.l1ng-site-info-native .l1ng-site-info-loading { background: var(--surface-card); }
.l1ng-site-info-native .l1ng-site-info-skeleton-line {
    background: color-mix(in srgb, var(--border-default) 65%, var(--surface-card));
}
.l1ng-site-info-native .l1ng-site-info-skeleton .skeleton-heading {
    background: color-mix(in srgb, var(--border-default) 82%, var(--surface-card));
}
.l1ng-site-info-native[data-site-info-section="genealogy"] .l1ng-site-info-skeleton .skeleton-heading:first-child { display: none; }
@media (prefers-reduced-motion: reduce) {
    .l1ng-site-info-backdrop .l1ng-site-info-panel { animation: none; }
    .l1ng-site-info-skeleton-line::after { animation: none; }
}