/* ======================================================
   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;
    }
}