/* 前台彈窗（原生 <dialog>），取代 fancyBox 3。外觀對齊原 fancybox：深色遮罩、白底內容、右上 ×。 */
html.hakka-dialog-open { overflow: hidden; }

.hakka-dialog {
    padding: 0;
    border: 0;
    background: #fff;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: visible;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.hakka-dialog::backdrop { background: rgba(30, 30, 30, .87); }

.hakka-dialog-body { overflow: auto; max-height: calc(100vh - 32px); }

.hakka-dialog-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;
    line-height: 40px;
    cursor: pointer;
}
.hakka-dialog-close:focus-visible { outline: 3px dotted #ffee19; }

/* 常見問題：原 fancybox 設定 width 100%、height 85vh、無內距 */
.hakka-dialog--iframe { width: calc(100vw - 32px); margin-top: 48px; }
.hakka-dialog--iframe .hakka-dialog-body { overflow: hidden; }
.hakka-dialog-iframe { display: block; width: 100%; height: 85vh; border: 0; }

/* inline 內容（WeChat QR）：內距同 fancybox-content 44px */
.hakka-dialog--inline .hakka-dialog-body { padding: 44px; }
.hakka-dialog--inline .hakka-dialog-close { top: 0; color: #555; }
.hakka-dialog-shown { display: block !important; }