/* ======================================================
   Site Theme Tokens
   - MudBlazor 기본 팔레트는 유지
   - 사이트 전용 CSS 변수만 테마별로 관리
   - 기본값은 Beige
   - 사용 테마: beige, green, pink, blue, white
   ====================================================== */

/* ======================================================
   Site Theme - Beige
   - 그린톤 제거
   - 크림 베이지 + 토프 브라운 기준
   ====================================================== */

:root,
.site_theme_beige {
    /* 전체 배경 */
    --site-bg: #E9E1D6;
    --site-bg-soft: #F2EDE4;
    --site-bg-warm: #F7EFE5;
    /* 표면 / 박스 / 카드 */
    --site-surface: #FFFDF9;
    --site-surface-soft: #FAF5ED;
    --site-card: #FFFDF9;
    --site-card-soft: #F7F1E8;
    --site-panel: #FFFDF9;
    /* 메인 포인트 : 토프 브라운 */
    --site-primary: #8A6F5B;
    --site-primary-soft: #E7DCCF;
    --site-primary-light: #D6C5B4;
    --site-primary-dark: #5A4638;
    /* 서브 포인트 : 소프트 베이지 브라운 */
    --site-secondary: #A08C7B;
    --site-secondary-soft: #E8DED5;
    --site-secondary-light: #D8C8BA;
    --site-secondary-dark: #7E6B5C;
    /* 강조 포인트 : 웜 피치 브라운 */
    --site-accent: #C98E74;
    --site-accent-soft: #F0D8CB;
    --site-accent-light: #F7E8DE;
    --site-accent-dark: #9F654D;
    /* 따뜻한 보조 포인트 */
    --site-warm: #8B7663;
    --site-warm-soft: #E4D8CA;
    --site-warm-light: #F0E7DC;
    --site-warm-dark: #5F4D3F;
    /* 텍스트 */
    --site-text: #3E342D;
    --site-text-strong: #241F1A;
    --site-text-muted: #7E736A;
    --site-text-light: #A69A90;
    /* 라인 / 그림자 */
    --site-border: rgba(78, 64, 52, 0.14);
    --site-border-strong: rgba(78, 64, 52, 0.26);
    --site-shadow-soft: 0 8px 24px rgba(64, 50, 39, 0.07);
}

/* ======================================================
   Site Theme - Light Green
   ====================================================== */

.site_theme_green {
    /* 전체 배경 */
    --site-bg: #D4DED0;
    --site-bg-soft: #E8EFE4;
    --site-bg-warm: #E3EBD8;
    /* 표면 / 박스 / 카드 */
    --site-surface: #FFFDF7;
    --site-surface-soft: #F4F7EF;
    --site-card: #FFFDF7;
    --site-card-soft: #E2EBDD;
    --site-panel: #FCFAF2;
    /* 메인 포인트 */
    --site-primary: #5E6C56;
    --site-primary-soft: #CFDBC8;
    --site-primary-light: #B2C1A7;
    --site-primary-dark: #3F4B39;
    /* 서브 포인트 */
    --site-secondary: #6E837B;
    --site-secondary-soft: #D3E0DC;
    --site-secondary-light: #B8CCC5;
    --site-secondary-dark: #4D635A;
    /* 강조 포인트 */
    --site-accent: #B88E68;
    --site-accent-soft: #EBD8C1;
    --site-accent-light: #F5E8D8;
    --site-accent-dark: #855F3E;
    /* 따뜻한 보조 포인트 */
    --site-warm: #7F725D;
    --site-warm-soft: #DCD0BF;
    --site-warm-light: #EFE4D3;
    --site-warm-dark: #564938;
    /* 텍스트 */
    --site-text: #2E3429;
    --site-text-strong: #1E241B;
    --site-text-muted: #606A58;
    --site-text-light: #909A87;
    /* 라인 / 그림자 */
    --site-border: rgba(64, 80, 55, 0.17);
    --site-border-strong: rgba(64, 80, 55, 0.31);
    --site-shadow-soft: 0 8px 24px rgba(43, 55, 36, 0.085);
}

/* ======================================================
   Site Theme - Pink
   ====================================================== */

.site_theme_pink {
    /* 전체 배경 */
    --site-bg: #E9D6DC;
    --site-bg-soft: #F5E9ED;
    --site-bg-warm: #F2DFE4;
    /* 표면 / 박스 / 카드 */
    --site-surface: #FFFDFB;
    --site-surface-soft: #FAF0F0;
    --site-card: #FFFDFB;
    --site-card-soft: #F0DCE2;
    --site-panel: #FFF7F5;
    /* 메인 포인트 */
    --site-primary: #A96F7B;
    --site-primary-soft: #E8CED5;
    --site-primary-light: #D7ACB7;
    --site-primary-dark: #7B4C57;
    /* 서브 포인트 */
    --site-secondary: #B88C82;
    --site-secondary-soft: #EBD9D4;
    --site-secondary-light: #DFC0B8;
    --site-secondary-dark: #895F56;
    /* 강조 포인트 */
    --site-accent: #BD846B;
    --site-accent-soft: #EED4C7;
    --site-accent-light: #F7E5DC;
    --site-accent-dark: #8E5A43;
    /* 따뜻한 보조 포인트 */
    --site-warm: #8E6B64;
    --site-warm-soft: #DDC9C4;
    --site-warm-light: #F0E1DE;
    --site-warm-dark: #614740;
    /* 텍스트 */
    --site-text: #382A2F;
    --site-text-strong: #241A1E;
    --site-text-muted: #756169;
    --site-text-light: #A09298;
    /* 라인 / 그림자 */
    --site-border: rgba(82, 49, 60, 0.17);
    --site-border-strong: rgba(82, 49, 60, 0.31);
    --site-shadow-soft: 0 8px 24px rgba(58, 36, 44, 0.085);
}

/* ======================================================
   Site Theme - Blue
   ====================================================== */

.site_theme_blue {
    /* 전체 배경 */
    --site-bg: #D4E0E6;
    --site-bg-soft: #E7F0F4;
    --site-bg-warm: #DEE9EF;
    /* 표면 / 박스 / 카드 */
    --site-surface: #FFFDF9;
    --site-surface-soft: #F1F6F8;
    --site-card: #FFFDF9;
    --site-card-soft: #DCE8EE;
    --site-panel: #F8FBFC;
    /* 메인 포인트 */
    --site-primary: #657987;
    --site-primary-soft: #D2DEE5;
    --site-primary-light: #B7C8D2;
    --site-primary-dark: #465A68;
    /* 서브 포인트 */
    --site-secondary: #7E929D;
    --site-secondary-soft: #DAE6EB;
    --site-secondary-light: #C0D1D9;
    --site-secondary-dark: #5C707B;
    /* 강조 포인트 */
    --site-accent: #B98D68;
    --site-accent-soft: #EDD9C2;
    --site-accent-light: #F6E8D9;
    --site-accent-dark: #8B6040;
    /* 따뜻한 보조 포인트 */
    --site-warm: #817A70;
    --site-warm-soft: #DDD4CA;
    --site-warm-light: #F0E8DF;
    --site-warm-dark: #5B544B;
    /* 텍스트 */
    --site-text: #26323A;
    --site-text-strong: #1A2329;
    --site-text-muted: #63737D;
    --site-text-light: #929EA5;
    /* 라인 / 그림자 */
    --site-border: rgba(54, 72, 84, 0.17);
    --site-border-strong: rgba(54, 72, 84, 0.31);
    --site-shadow-soft: 0 8px 24px rgba(35, 49, 58, 0.085);
}

/* ======================================================
   Site Theme - White
   - 화이트 + 차콜 블랙 + 블루그레이 살짝
   - 파란색이 아니라 중립 그레이에 가까운 블루그레이 톤
   ====================================================== */

.site_theme_white {
    /* 전체 배경 */
    --site-bg: #E6E8EA;
    --site-bg-soft: #F1F3F5;
    --site-bg-warm: #ECEEF0;
    /* 표면 / 박스 / 카드 */
    --site-surface: #FFFFFF;
    --site-surface-soft: #F7F8F9;
    --site-card: #FFFFFF;
    --site-card-soft: #ECEFF2;
    --site-panel: #FFFFFF;
    /* 메인 포인트 : 차콜 블랙 */
    --site-primary: #2B3036;
    --site-primary-soft: #E1E4E7;
    --site-primary-light: #BEC6CE;
    --site-primary-dark: #12161A;
    /* 서브 포인트 : 뉴트럴 블루그레이 */
    --site-secondary: #7B858F;
    --site-secondary-soft: #E5E8EB;
    --site-secondary-light: #CDD3D9;
    --site-secondary-dark: #555E67;
    /* 강조 포인트 : 블루기 아주 살짝 있는 그레이 */
    --site-accent: #8A98A3;
    --site-accent-soft: #E7EBEE;
    --site-accent-light: #F3F5F7;
    --site-accent-dark: #64717C;
    /* 보조 포인트 : 중립 그레이 */
    --site-warm: #7D8186;
    --site-warm-soft: #E6E8EA;
    --site-warm-light: #F2F3F4;
    --site-warm-dark: #50555A;
    /* 텍스트 */
    --site-text: #25292E;
    --site-text-strong: #101316;
    --site-text-muted: #686F76;
    --site-text-light: #9EA5AB;
    /* 라인 / 그림자 */
    --site-border: rgba(16, 19, 22, 0.12);
    --site-border-strong: rgba(16, 19, 22, 0.24);
    --site-shadow-soft: 0 8px 24px rgba(16, 19, 22, 0.065);
}

/* ======================================================
   Live Schedule Theme Tokens
   - MyLiveSchedule 전용 의미 변수
   - 사이트 테마별로 라이브카드 색상 세부 조정
   ====================================================== */

:root,
.site_theme_beige {
    --live-main: #8A6F5B;
    --live-main-dark: #5A4638;
    --live-main-soft: #E7DCCF;
    --live-sub: #A08C7B;
    --live-sub-dark: #7E6B5C;
    --live-sub-soft: #E8DED5;
    --live-date-bg: linear-gradient(145deg, rgba(255, 253, 249, 0.96), rgba(247, 239, 229, 0.9));
    --live-category-bg: linear-gradient(135deg, #5A4638 0%, #8A6F5B 100%);
    --live-category-ready-bg: linear-gradient(135deg, #5A4638 0%, #8A6F5B 58%, #9F654D 100%);
    --live-category-live-bg: linear-gradient(135deg, #5A4638 0%, #8A6F5B 52%, #A08C7B 100%);
    --live-button-bg: linear-gradient(135deg, #5A4638 0%, #8A6F5B 52%, #A08C7B 100%);
    --live-button-ready-bg: linear-gradient(135deg, #FFFDF9 0%, #F0E7DC 48%, #E7DCCF 100%);
    --live-shadow: rgba(64, 50, 39, 0.12);
    --live-shadow-active: rgba(64, 50, 39, 0.18);
    --live-glow: rgba(138, 111, 91, 0.26);
    --live-glow-soft: rgba(160, 140, 123, 0.16);
    --live-ready-glow: rgba(90, 70, 56, 0.34);
    --live-ready-border: rgba(255, 255, 255, 0.48);
    --live-ready-highlight: rgba(255, 255, 255, 0.22);
    --live-ready-text-shadow: rgba(58, 42, 31, 0.42);
}

.site_theme_green {
    --live-main: #5E6C56;
    --live-main-dark: #3F4B39;
    --live-main-soft: #CFDBC8;
    --live-sub: #6E837B;
    --live-sub-dark: #4D635A;
    --live-sub-soft: #D3E0DC;
    --live-date-bg: linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(227, 235, 216, 0.9));
    --live-category-bg: linear-gradient(135deg, #3F4B39 0%, #5E6C56 100%);
    --live-category-ready-bg: linear-gradient(135deg, #3F4B39 0%, #5E6C56 58%, #4D635A 100%);
    --live-category-live-bg: linear-gradient(135deg, #3F4B39 0%, #5E6C56 52%, #6E837B 100%);
    --live-button-bg: linear-gradient(135deg, #3F4B39 0%, #5E6C56 52%, #6E837B 100%);
    --live-button-ready-bg: linear-gradient(135deg, #FFFDF8 0%, #E3EBD8 48%, #CFDBC8 100%);
    --live-shadow: rgba(43, 55, 36, 0.12);
    --live-shadow-active: rgba(43, 55, 36, 0.19);
    --live-glow: rgba(94, 108, 86, 0.27);
    --live-glow-soft: rgba(110, 131, 123, 0.17);
    --live-ready-glow: rgba(63, 75, 57, 0.34);
    --live-ready-border: rgba(255, 255, 255, 0.46);
    --live-ready-highlight: rgba(255, 255, 255, 0.22);
    --live-ready-text-shadow: rgba(25, 36, 22, 0.42);
}

.site_theme_pink {
    --live-main: #A96F7B;
    --live-main-dark: #7B4C57;
    --live-main-soft: #E8CED5;
    --live-sub: #B88C82;
    --live-sub-dark: #895F56;
    --live-sub-soft: #EBD9D4;
    --live-date-bg: linear-gradient(145deg, rgba(255, 253, 251, 0.96), rgba(242, 223, 228, 0.9));
    --live-category-bg: linear-gradient(135deg, #7B4C57 0%, #A96F7B 100%);
    --live-category-ready-bg: linear-gradient(135deg, #7B4C57 0%, #A96F7B 58%, #8E5A43 100%);
    --live-category-live-bg: linear-gradient(135deg, #7B4C57 0%, #A96F7B 52%, #B88C82 100%);
    --live-button-bg: linear-gradient(135deg, #7B4C57 0%, #A96F7B 52%, #B88C82 100%);
    --live-button-ready-bg: linear-gradient(135deg, #FFFDFB 0%, #F2DFE4 48%, #E8CED5 100%);
    --live-shadow: rgba(58, 36, 44, 0.12);
    --live-shadow-active: rgba(58, 36, 44, 0.19);
    --live-glow: rgba(169, 111, 123, 0.27);
    --live-glow-soft: rgba(184, 140, 130, 0.17);
    --live-ready-glow: rgba(123, 76, 87, 0.34);
    --live-ready-border: rgba(255, 255, 255, 0.48);
    --live-ready-highlight: rgba(255, 255, 255, 0.23);
    --live-ready-text-shadow: rgba(65, 34, 43, 0.42);
}

.site_theme_blue {
    --live-main: #657987;
    --live-main-dark: #465A68;
    --live-main-soft: #D2DEE5;
    --live-sub: #7E929D;
    --live-sub-dark: #5C707B;
    --live-sub-soft: #DAE6EB;
    --live-date-bg: linear-gradient(145deg, rgba(255, 253, 249, 0.96), rgba(222, 233, 239, 0.9));
    --live-category-bg: linear-gradient(135deg, #465A68 0%, #657987 100%);
    --live-category-ready-bg: linear-gradient(135deg, #465A68 0%, #657987 58%, #5C707B 100%);
    --live-category-live-bg: linear-gradient(135deg, #465A68 0%, #657987 52%, #7E929D 100%);
    --live-button-bg: linear-gradient(135deg, #465A68 0%, #657987 52%, #7E929D 100%);
    --live-button-ready-bg: linear-gradient(135deg, #FFFDF9 0%, #DEE9EF 48%, #D2DEE5 100%);
    --live-shadow: rgba(35, 49, 58, 0.12);
    --live-shadow-active: rgba(35, 49, 58, 0.19);
    --live-glow: rgba(101, 121, 135, 0.27);
    --live-glow-soft: rgba(126, 146, 157, 0.17);
    --live-ready-glow: rgba(70, 90, 104, 0.34);
    --live-ready-border: rgba(255, 255, 255, 0.46);
    --live-ready-highlight: rgba(255, 255, 255, 0.22);
    --live-ready-text-shadow: rgba(24, 38, 48, 0.42);
}

.site_theme_white {
    --live-main: #2B3036;
    --live-main-dark: #12161A;
    --live-main-soft: #E1E4E7;
    --live-sub: #7B858F;
    --live-sub-dark: #555E67;
    --live-sub-soft: #E5E8EB;
    --live-date-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 243, 245, 0.94));
    --live-category-bg: linear-gradient(135deg, #12161A 0%, #2B3036 100%);
    --live-category-ready-bg: linear-gradient(135deg, #12161A 0%, #2B3036 58%, #555E67 100%);
    --live-category-live-bg: linear-gradient(135deg, #12161A 0%, #2B3036 54%, #64717C 100%);
    --live-button-bg: linear-gradient(135deg, #12161A 0%, #2B3036 54%, #64717C 100%);
    --live-button-ready-bg: linear-gradient(135deg, #FFFFFF 0%, #F3F5F7 48%, #E1E4E7 100%);
    --live-shadow: rgba(16, 19, 22, 0.10);
    --live-shadow-active: rgba(16, 19, 22, 0.17);
    --live-glow: rgba(43, 48, 54, 0.22);
    --live-glow-soft: rgba(100, 113, 124, 0.13);
    --live-ready-glow: rgba(18, 22, 26, 0.24);
    --live-ready-border: rgba(255, 255, 255, 0.18);
    --live-ready-highlight: rgba(255, 255, 255, 0.10);
    --live-ready-text-shadow: rgba(0, 0, 0, 0.46);
}

/* ======================================================
   Site Background Utilities
   ====================================================== */

.site_bg {
    background-color: var(--site-bg) !important;
}

.site_bg_soft {
    background-color: var(--site-bg-soft) !important;
}

.site_bg_warm {
    background-color: var(--site-bg-warm) !important;
}

.site_surface {
    background-color: var(--site-surface) !important;
}

.site_surface_soft {
    background-color: var(--site-surface-soft) !important;
}

.site_card_bg {
    background-color: var(--site-card) !important;
}

.site_card_soft_bg {
    background-color: var(--site-card-soft) !important;
}

.site_panel_bg {
    background-color: var(--site-panel) !important;
}

.site_primary_bg {
    background-color: var(--site-primary) !important;
}

.site_primary_soft_bg {
    background-color: var(--site-primary-soft) !important;
}

.site_primary_light_bg {
    background-color: var(--site-primary-light) !important;
}

.site_primary_dark_bg {
    background-color: var(--site-primary-dark) !important;
}

.site_secondary_bg {
    background-color: var(--site-secondary) !important;
}

.site_secondary_soft_bg {
    background-color: var(--site-secondary-soft) !important;
}

.site_secondary_light_bg {
    background-color: var(--site-secondary-light) !important;
}

.site_secondary_dark_bg {
    background-color: var(--site-secondary-dark) !important;
}

.site_accent_bg {
    background-color: var(--site-accent) !important;
}

.site_accent_soft_bg {
    background-color: var(--site-accent-soft) !important;
}

.site_accent_light_bg {
    background-color: var(--site-accent-light) !important;
}

.site_accent_dark_bg {
    background-color: var(--site-accent-dark) !important;
}

.site_warm_bg {
    background-color: var(--site-warm) !important;
}

.site_warm_soft_bg {
    background-color: var(--site-warm-soft) !important;
}

.site_warm_light_bg {
    background-color: var(--site-warm-light) !important;
}

.site_warm_dark_bg {
    background-color: var(--site-warm-dark) !important;
}

/* ======================================================
   Site Text Utilities
   ====================================================== */

.site_text {
    color: var(--site-text) !important;
}

.site_text_strong {
    color: var(--site-text-strong) !important;
}

.site_text_muted {
    color: var(--site-text-muted) !important;
}

.site_text_light {
    color: var(--site-text-light) !important;
}

.site_primary_text {
    color: var(--site-primary) !important;
}

.site_primary_dark_text {
    color: var(--site-primary-dark) !important;
}

.site_secondary_text {
    color: var(--site-secondary) !important;
}

.site_secondary_dark_text {
    color: var(--site-secondary-dark) !important;
}

.site_accent_text {
    color: var(--site-accent-dark) !important;
}

.site_warm_text {
    color: var(--site-warm) !important;
}

.site_warm_dark_text {
    color: var(--site-warm-dark) !important;
}

.site_white_text {
    color: #ffffff !important;
}

/* ======================================================
   Site Border Utilities
   ====================================================== */

.site_border {
    border: 1px solid var(--site-border) !important;
}

.site_border_strong {
    border: 1px solid var(--site-border-strong) !important;
}

.site_primary_border {
    border: 1px solid var(--site-primary) !important;
}

.site_primary_soft_border {
    border: 1px solid var(--site-primary-soft) !important;
}

.site_secondary_border {
    border: 1px solid var(--site-secondary) !important;
}

.site_secondary_soft_border {
    border: 1px solid var(--site-secondary-soft) !important;
}

.site_accent_border {
    border: 1px solid var(--site-accent) !important;
}

.site_warm_border {
    border: 1px solid var(--site-warm) !important;
}

/* ======================================================
   Site Sample Helpers
   - Sample.razor 전용 표시용
   ====================================================== */

.site_sample_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.site_sample_chip {
    min-height: 100px;
    padding: 14px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--site-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    word-break: keep-all;
}

.site_sample_name {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.site_sample_desc {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.72;
    line-height: 1.35;
}

.site_sample_card {
    min-height: 155px;
    padding: 18px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--site-border);
    box-shadow: var(--site-shadow-soft);
}

.site_sample_button_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site_custom_chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .site_sample_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .site_sample_grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   Static SSR Review Dialog
   - JavaScript로 생성하는 미리보기 요소의 전역 스타일
   ====================================================== */

.static-review-preview-item {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 6px 4px;
}

.static-review-preview-item img {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--site-border);
    border-radius: 6px;
    object-fit: cover;
}

.static-review-preview-remove {
    position: absolute;
    top: -9px;
    right: -9px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 0 2px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--mud-palette-error, #d94e45);
    box-shadow: 0 2px 5px rgb(0 0 0 / 28%);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.static-review-preview-remove:hover {
    filter: brightness(0.92);
}

/* ======================================================
   Static SSR Common Dialog
   ====================================================== */

.static-site-dialog {
    --static-site-dialog-open-y: -12px;
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    color: var(--site-text);
    background: var(--site-surface);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

html.static-site-dialog-open,
html.static-site-dialog-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

.static-site-dialog--small {
    width: min(92vw, 420px);
}

.static-site-dialog--medium {
    width: min(94vw, 600px);
    max-height: 90vh;
}

.static-site-dialog--wide {
    width: min(94vw, 960px);
    max-height: 90vh;
}

.static-site-dialog--from-bottom {
    --static-site-dialog-open-y: 10px;
}

.static-site-dialog::backdrop {
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
}

.static-site-dialog[open] {
    animation: static-site-dialog-open 180ms ease-out;
}

@keyframes static-site-dialog-open {
    from {
        opacity: 0;
        transform: translateY(var(--static-site-dialog-open-y)) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.static-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 24px;
    border-bottom: 1px solid var(--site-border);
}

.static-dialog-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.static-dialog-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--site-text);
    background: transparent;
    cursor: pointer;
}

.static-dialog-close:hover {
    background: var(--site-primary-soft);
}

.static-dialog-close .material-symbols-rounded {
    font-size: 1.5rem;
}

.static-dialog-content {
    max-height: calc(90vh - 128px);
    padding: 16px 24px 24px;
    overflow-y: auto;
}

.static-dialog-message {
    min-width: 180px;
    margin: 0;
    line-height: 1.5;
}

.static-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px;
}

.static-dialog-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    color: var(--site-text);
    background: transparent;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.static-dialog-action:hover {
    background: var(--site-primary-soft);
}

.static-dialog-action:disabled {
    opacity: 0.55;
    cursor: wait;
}

.static-dialog-action .material-symbols-rounded {
    font-size: 1.25rem;
}

.static-dialog-action.is-default {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--site-primary);
}

.static-dialog-action.is-default:hover {
    background: var(--site-primary-dark);
}

.static-dialog-working {
    display: grid;
    gap: 16px;
}

.static-dialog-working-progress {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--site-primary-soft);
}

.static-dialog-working-progress::after {
    position: absolute;
    inset: 0;
    width: 45%;
    background: var(--site-primary);
    animation: static-dialog-working 1.1s ease-in-out infinite;
    content: "";
}

.static-dialog-working-message {
    margin: 0;
    font-weight: 600;
    text-align: center;
}

@keyframes static-dialog-working {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(250%);
    }
}

@media (max-width: 600px) {
    .static-dialog-content {
        max-height: calc(100dvh - 128px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .static-dialog-working-progress::after {
        animation: none;
        transform: none;
    }
}

/* ======================================================
   Static SSR Common Snackbar
   ====================================================== */

.static-site-snackbar {
    position: fixed;
    top: 64px;
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    width: 288px;
    max-width: calc(100vw - 32px);
    min-height: 48px;
    margin: 0;
    padding: 6px 16px;
    overflow: hidden;
    border: 0;
    border-radius: var(--mud-default-borderradius, 4px);
    color: var(--mud-palette-success-text, #fff);
    background: var(--mud-palette-success, #4caf50);
    background: color-mix(in srgb, var(--mud-palette-success, #4caf50) 90%, transparent);
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.43;
    transform: translateX(-50%);
}

.static-site-snackbar::backdrop {
    background: transparent;
    pointer-events: none;
}

.static-site-snackbar[hidden] {
    display: none;
}

.static-site-snackbar.is-warning {
    color: var(--mud-palette-warning-text, #fff);
    background: var(--mud-palette-warning, #e09a1f);
    background: color-mix(in srgb, var(--mud-palette-warning, #e09a1f) 90%, transparent);
}

.static-site-snackbar.is-info {
    color: var(--mud-palette-info-text, #fff);
    background: var(--mud-palette-info, #2196f3);
    background: color-mix(in srgb, var(--mud-palette-info, #2196f3) 90%, transparent);
}

.static-site-snackbar.is-error {
    color: var(--mud-palette-error-text, #fff);
    background: var(--mud-palette-error, #d94e45);
    background: color-mix(in srgb, var(--mud-palette-error, #d94e45) 90%, transparent);
}

.static-site-snackbar-icon {
    display: flex;
    flex: 0 0 auto;
    margin-right: 20px;
    margin-left: -8px;
    padding: 7px 0;
    opacity: 0.9;
    font-size: 22px;
}

.static-site-snackbar-message {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    padding: 0;
    overflow-wrap: anywhere;
    line-height: 1;
}

.static-site-snackbar-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-right: -8px;
    margin-left: 20px;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    color: currentColor;
    background: transparent;
    cursor: pointer;
    opacity: 0.9;
}

.static-site-snackbar-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.static-site-snackbar-close .material-symbols-rounded {
    font-size: 1.125rem;
}

.static-site-snackbar.is-visible {
    animation: static-site-snackbar-show 5600ms ease both;
}

@keyframes static-site-snackbar-show {
    0%,
    100% {
        opacity: 0;
        transform: translate(-50%, -8px);
    }

    5.36%,
    94.64% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 600px) {
    .static-site-dialog--mobile-full {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .static-site-dialog[open],
    .static-site-snackbar.is-visible {
        animation: none;
    }
}