/* ==========================================================
   Mustard Seed Dashboard v2 - dashboard-v2.css
   SRS v1.2 § 4.4.3 (Bento Box) + § 4.4.4 (접근성) + § 4.4.5 (감성)
   
   Mobile-First CSS Grid + clamp() Fluid Typography + Dark Mode
   ========================================================== */

/* ==========================================================
   1. 디자인 토큰 (SRS § 4.4.3 - 일관성 원칙)
   모든 카드가 공유하는 단일 시스템
   ========================================================== */
:root {
    /* Brand Colors (WCAG AA 대비비 4.5:1 이상 검증) */
    --ms-primary: #1A6FA8;          /* 메인 - 흰 배경에서 4.6:1 */
    --ms-primary-deep: #0B3D6B;     /* 깊은 강조 */
    --ms-primary-soft: #E8F1F8;     /* 연한 배경 */
    --ms-primary-tint: #F4F8FB;     /* 더 연한 배경 */
    
    /* Surface (Light Mode) */
    --ms-bg: #f8f9fa;               /* 페이지 배경 */
    --ms-card: #ffffff;             /* 카드 배경 */
    --ms-card-hover: #fafbfc;       /* 카드 호버 배경 */
    
    /* Text (WCAG AA 검증) */
    --ms-text: #1A2332;             /* 본문 - 16:1 대비 */
    --ms-text-secondary: #4A5568;   /* 보조 - 8:1 대비 */
    --ms-text-muted: #8896A8;       /* 약함 - 4.5:1 대비 */
    
    /* Borders */
    --ms-border: #E8ECF1;
    --ms-border-light: #F1F4F8;
    --ms-border-strong: #CBD5E1;
    
    /* Semantic */
    --ms-success: #10B981;
    --ms-warning: #F59E0B;
    --ms-danger: #EF4444;
    --ms-info: #3B82F6;
    --ms-accent-pink: #EC4899;      /* 생일자 강조 */
    --ms-accent-purple: #8B5CF6;
    
    /* Typography (clamp Fluid - SRS § 4.4.4) */
    --ms-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --ms-fs-page-title: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);    /* 22→28px */
    --ms-fs-card-title: clamp(0.9375rem, 0.85rem + 0.4vw, 1rem);     /* 15→16px */
    --ms-fs-stat-value: clamp(1.375rem, 1rem + 1.6vw, 1.625rem);     /* 22→26px */
    --ms-fs-body: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);             /* 14→16px */
    --ms-fs-small: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);        /* 12→13px */
    --ms-fs-tiny: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);       /* 11→12px */
    
    /* Layout (SRS § 4.4.3 - 일관성) */
    --ms-radius: 1rem;              /* 16px */
    --ms-radius-sm: 0.625rem;       /* 10px */
    --ms-radius-lg: 1.25rem;        /* 20px */
    --ms-radius-pill: 9999px;
    --ms-padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);  /* 16→24px */
    --ms-gap: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);   /* 12→20px */
    
    /* Touch Target (SRS § 4.4.4 - 44x44 px 최소) */
    --ms-touch-min: 44px;
    
    /* Shadows */
    --ms-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --ms-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
    --ms-shadow-focus: 0 0 0 3px rgba(26, 111, 168, 0.2);
    
    /* Animation */
    --ms-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ms-duration: 200ms;
    --ms-duration-slow: 400ms;
    
    /* Safe Area (PWA - SRS § 4.4.3) */
    --ms-safe-top: env(safe-area-inset-top, 0px);
    --ms-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ms-safe-left: env(safe-area-inset-left, 0px);
    --ms-safe-right: env(safe-area-inset-right, 0px);
}

/* ==========================================================
   2. 다크 모드 (SRS § 4.4.5, FR-DASHBOARD-10)
   :root 변수 자동 전환 + JS 토글 지원
   ========================================================== */
[data-theme="dark"] {
    --ms-bg: #0F172A;
    --ms-card: #1E293B;
    --ms-card-hover: #25334A;
    --ms-primary-soft: rgba(26, 111, 168, 0.18);
    --ms-primary-tint: rgba(26, 111, 168, 0.08);
    --ms-text: #F1F5F9;
    --ms-text-secondary: #CBD5E1;
    --ms-text-muted: #94A3B8;
    --ms-border: #334155;
    --ms-border-light: #1E293B;
    --ms-border-strong: #475569;
    --ms-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ms-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ==========================================================
   3. 페이지 컨테이너 (Mobile-First)
   ========================================================== */
.ms-dashboard {
    /* layout.html의 .content 패딩을 무시하고 풀 폭 사용 */
    margin: calc(-1 * var(--ms-padding));
    padding: var(--ms-padding);
    /* PWA 노치/홈바 대응 */
    padding-bottom: calc(var(--ms-padding) + var(--ms-safe-bottom));
    padding-left: calc(var(--ms-padding) + var(--ms-safe-left));
    padding-right: calc(var(--ms-padding) + var(--ms-safe-right));
    
    background: var(--ms-bg);
    min-height: 100vh;
    font-family: var(--ms-font-sans);
    color: var(--ms-text);
    font-size: var(--ms-fs-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 숫자 너비 고정 (SRS § 4.4.4) */
    font-feature-settings: "tnum";
    transition: background-color var(--ms-duration) var(--ms-ease);
}

.ms-dashboard *,
.ms-dashboard *::before,
.ms-dashboard *::after {
    box-sizing: border-box;
}

/* ==========================================================
   4. 페이지 헤더 (계층 1순위)
   ========================================================== */
.ms-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.ms-page-title {
    font-size: var(--ms-fs-page-title);
    font-weight: 700;
    color: var(--ms-text);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.ms-page-subtitle {
    font-size: var(--ms-fs-small);
    color: var(--ms-text-muted);
    margin: 0;
}
.ms-page-date {
    font-size: var(--ms-fs-small);
    color: var(--ms-text-muted);
}

/* ==========================================================
   5. AI 검색/명령 바 (FR-DASHBOARD-04, SRS § 3.2.0.3)
   Zero Interface - 자연어 명령 입력 폼
   ========================================================== */
.ms-ai-bar {
    background: var(--ms-card);
    border-radius: var(--ms-radius-lg);
    box-shadow: var(--ms-shadow);
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--ms-border-light);
    transition: box-shadow var(--ms-duration) var(--ms-ease),
                border-color var(--ms-duration) var(--ms-ease);
    position: relative;
    overflow: hidden;
}
.ms-ai-bar::before {
    /* 좌측 그라데이션 액센트 (감성) */
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ms-primary), var(--ms-accent-purple));
    opacity: 0;
    transition: opacity var(--ms-duration);
}
.ms-ai-bar:focus-within {
    box-shadow: var(--ms-shadow-focus);
    border-color: var(--ms-primary);
}
.ms-ai-bar:focus-within::before {
    opacity: 1;
}
.ms-ai-icon {
    width: var(--ms-touch-min);
    height: var(--ms-touch-min);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.ms-ai-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: var(--ms-fs-body);
    color: var(--ms-text);
    padding: 0.5rem 0.5rem;
    /* iOS Safari 자동 줌 방지 - 16px+ */
    min-height: var(--ms-touch-min);
}
.ms-ai-input::placeholder {
    color: var(--ms-text-muted);
}
.ms-ai-submit {
    min-width: var(--ms-touch-min);
    min-height: var(--ms-touch-min);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-primary);
    color: white;
    border: none;
    font-family: inherit;
    font-size: var(--ms-fs-small);
    font-weight: 600;
    cursor: pointer;
    padding: 0 1rem;
    transition: background var(--ms-duration) var(--ms-ease),
                transform 100ms var(--ms-ease);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.ms-ai-submit:hover {
    background: var(--ms-primary-deep);
}
.ms-ai-submit:active {
    transform: scale(0.97);
}
.ms-ai-suggestions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}
.ms-ai-suggestion-label {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    margin-right: 0.25rem;
}
.ms-ai-chip {
    font-size: var(--ms-fs-tiny);
    background: var(--ms-card);
    color: var(--ms-text-secondary);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-pill);
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: all var(--ms-duration) var(--ms-ease);
    white-space: nowrap;
}
.ms-ai-chip:hover {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    border-color: var(--ms-primary);
}

/* AI 응답 영역 */
.ms-ai-response {
    background: var(--ms-primary-tint);
    border-left: 3px solid var(--ms-primary);
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: var(--ms-fs-small);
    color: var(--ms-text);
    display: none;
}
.ms-ai-response.is-visible {
    display: block;
    animation: ms-fade-slide-in var(--ms-duration-slow) var(--ms-ease);
}

/* ==========================================================
   6. KPI 통계 행 (FR-DASHBOARD-02 - 4개 위젯)
   원칙 1+2: 계층 + 단순성 (한 행에 통합)
   Mobile: 1열 → Tablet 2x2 → Desktop 4x1
   ========================================================== */
.ms-stats-row {
    display: grid;
    grid-template-columns: 1fr;     /* Mobile: 1열 */
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.ms-stat-card {
    background: var(--ms-card);
    border-radius: var(--ms-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--ms-shadow);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: var(--ms-touch-min);
    transition: transform var(--ms-duration) var(--ms-ease),
                box-shadow var(--ms-duration) var(--ms-ease);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}
.ms-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ms-shadow-hover);
    border-color: var(--ms-border);
}
.ms-stat-card:focus-visible {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}
.ms-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.ms-stat-body {
    flex: 1;
    min-width: 0;
}
.ms-stat-label {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ms-stat-value {
    font-size: var(--ms-fs-stat-value);
    font-weight: 700;
    color: var(--ms-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.ms-stat-value-unit {
    font-size: var(--ms-fs-small);
    font-weight: 500;
    color: var(--ms-text-muted);
}
.ms-stat-delta {
    font-size: var(--ms-fs-tiny);
    margin-top: 0.25rem;
    font-weight: 600;
}
.ms-stat-delta.is-positive { color: var(--ms-success); }
.ms-stat-delta.is-neutral { color: var(--ms-text-muted); font-weight: 500; }
.ms-stat-delta.is-warning { color: var(--ms-warning); }

/* ==========================================================
   7. 메인 그리드 (FR-DASHBOARD-03)
   원칙 4: 근접성 - 좌측(콘텐츠) + 우측(사람) 분리
   Mobile: 1열 → Desktop: 1.8fr / 1fr
   ========================================================== */
.ms-main-grid {
    display: grid;
    grid-template-columns: 1fr;    /* Mobile: 1열 */
    gap: var(--ms-gap);
    align-items: start;
}
.ms-col {
    display: flex;
    flex-direction: column;
    gap: var(--ms-gap);
    min-width: 0;
}

/* ==========================================================
   8. 카드 시스템 (Bento Box - SRS § 4.4.3)
   모든 카드: border-radius, padding, shadow 통일
   ========================================================== */
.ms-card {
    background: var(--ms-card);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
    transition: box-shadow var(--ms-duration) var(--ms-ease);
}
.ms-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: var(--ms-padding) var(--ms-padding) 0;
    margin-bottom: 1rem;
}
.ms-card-title {
    font-size: var(--ms-fs-card-title);
    font-weight: 700;
    color: var(--ms-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
}
.ms-card-title-icon {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5rem;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.ms-card-action {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--ms-duration);
    min-height: var(--ms-touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
}
.ms-card-action:hover { color: var(--ms-primary); }
.ms-card-action:focus-visible {
    outline: none;
    color: var(--ms-primary);
    text-decoration: underline;
}
.ms-card-action::after { content: ' →'; opacity: 0.6; }
.ms-card-body {
    padding: 0 var(--ms-padding) var(--ms-padding);
}
.ms-card-empty {
    padding: 2rem var(--ms-padding);
    text-align: center;
    color: var(--ms-text-muted);
    font-size: var(--ms-fs-small);
}
.ms-card-empty p { margin: 0 0 0.75rem 0; }

/* ==========================================================
   9. 상태 위젯 - 주일 예배 준비 상태 (FR-DASHBOARD-05)
   조건부 배경색 (모두 완료=초록, 누락=주황)
   ========================================================== */
.ms-status-card {
    background: linear-gradient(135deg, var(--ms-primary-soft), var(--ms-primary-tint));
    border-radius: var(--ms-radius);
    padding: var(--ms-padding);
    margin-bottom: 1.5rem;
    box-shadow: var(--ms-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ms-status-card.is-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
}
.ms-status-card.is-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
}
.ms-status-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ms-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.ms-status-body {
    flex: 1;
    min-width: 200px;
}
.ms-status-title {
    font-size: var(--ms-fs-card-title);
    font-weight: 700;
    color: var(--ms-text);
    margin: 0 0 0.125rem 0;
}
.ms-status-meta {
    font-size: var(--ms-fs-small);
    color: var(--ms-text-secondary);
    margin: 0;
}
.ms-status-checks {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ms-status-check {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--ms-radius-pill);
    background: var(--ms-card);
    font-size: var(--ms-fs-tiny);
    font-weight: 500;
    color: var(--ms-text-secondary);
    border: 1px solid var(--ms-border);
    /* v3.5.11: <a> 태그로 변경됨 - 인터랙션 스타일 */
    text-decoration: none;
    cursor: pointer;
    min-height: var(--ms-touch-min);
    transition: all var(--ms-duration);
}
.ms-status-check:hover {
    transform: translateY(-1px);
    box-shadow: var(--ms-shadow-sm);
}
.ms-status-check:focus-visible {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}
.ms-status-check:active {
    transform: translateY(0);
}
.ms-status-check.is-done {
    color: var(--ms-success);
    border-color: var(--ms-success);
    background: rgba(16, 185, 129, 0.06);
}
.ms-status-check.is-done:hover {
    background: rgba(16, 185, 129, 0.12);
}
.ms-status-check.is-todo {
    color: var(--ms-warning);
    border-color: var(--ms-warning);
    background: rgba(245, 158, 11, 0.06);
}
.ms-status-check.is-todo:hover {
    background: rgba(245, 158, 11, 0.14);
    border-color: var(--ms-warning);
}

/* ==========================================================
   10. 최근 설교 카드 (콘텐츠 영역)
   ========================================================== */
.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    border-radius: var(--ms-radius-pill);
    font-size: var(--ms-fs-tiny);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ms-chip-muted {
    background: var(--ms-border-light);
    color: var(--ms-text-secondary);
}
.ms-sermon-meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.ms-sermon-title {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
    font-weight: 700;
    color: var(--ms-text);
    margin: 0 0 0.375rem 0;
    line-height: 1.4;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ms-sermon-bible {
    font-size: var(--ms-fs-small);
    color: var(--ms-text-secondary);
    margin-bottom: 1rem;
    font-weight: 500;
}
.ms-sermon-message {
    background: var(--ms-primary-tint);
    border-left: 3px solid var(--ms-primary);
    padding: 0.875rem 1rem;
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
    margin-bottom: 1.125rem;
    font-size: var(--ms-fs-body);
    line-height: 1.6;
    color: var(--ms-text);
    font-weight: 500;
}
.ms-sermon-message-label {
    display: block;
    font-size: var(--ms-fs-tiny);
    font-weight: 700;
    color: var(--ms-primary);
    letter-spacing: 0.1em;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

/* ==========================================================
   11. 버튼 시스템 (Touch Target 44px+ 보장)
   ========================================================== */
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: var(--ms-touch-min);
    padding: 0 1rem;
    border-radius: var(--ms-radius-sm);
    font-size: var(--ms-fs-small);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ms-border);
    background: var(--ms-card);
    color: var(--ms-text-secondary);
    cursor: pointer;
    transition: all var(--ms-duration) var(--ms-ease);
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.ms-btn:hover {
    border-color: var(--ms-primary);
    color: var(--ms-primary);
    background: var(--ms-primary-tint);
}
.ms-btn:active {
    transform: scale(0.97);
}
.ms-btn:focus-visible {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}
.ms-btn-primary {
    background: var(--ms-primary);
    color: white;
    border-color: var(--ms-primary);
}
.ms-btn-primary:hover {
    background: var(--ms-primary-deep);
    border-color: var(--ms-primary-deep);
    color: white;
}
.ms-btn-kakao {
    background: #FEE500;
    color: #181600;
    border-color: #FEE500;
}
.ms-btn-kakao:hover {
    background: #FFD800;
    border-color: #FFD800;
    color: #181600;
}
.ms-btn-sm {
    min-height: 36px;
    padding: 0 0.75rem;
    font-size: var(--ms-fs-tiny);
}

/* Ripple 효과 (FR-DASHBOARD-13) - JS에서 동적으로 추가 */
.ms-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ms-ripple-anim 600ms var(--ms-ease);
    pointer-events: none;
}
.ms-btn:not(.ms-btn-primary):not(.ms-btn-kakao) .ms-ripple {
    background: rgba(26, 111, 168, 0.2);
}

.ms-sermon-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================
   12. 이번 주 찬양팀 카드
   ========================================================== */
.ms-praise-leader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--ms-border-light);
    border-radius: var(--ms-radius-sm);
    margin-bottom: 0.875rem;
}
.ms-praise-leader-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-deep));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.ms-praise-leader-role {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    margin-bottom: 0.125rem;
}
.ms-praise-leader-name {
    font-size: var(--ms-fs-card-title);
    font-weight: 700;
    color: var(--ms-text);
}
.ms-praise-sessions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}
.ms-praise-session {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ms-border-light);
    border-radius: var(--ms-radius-sm);
}
.ms-praise-session-icon { font-size: 1rem; line-height: 1; }
.ms-praise-session-label {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    margin-bottom: 0.0625rem;
}
.ms-praise-session-name {
    font-size: var(--ms-fs-small);
    color: var(--ms-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-praise-setlist {
    border-top: 1px solid var(--ms-border-light);
    padding-top: 0.875rem;
}
.ms-praise-setlist-label {
    font-size: var(--ms-fs-tiny);
    font-weight: 600;
    color: var(--ms-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.ms-praise-songs {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.ms-praise-song {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--ms-fs-small);
    color: var(--ms-text-secondary);
}
.ms-praise-song-num {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    font-size: var(--ms-fs-tiny);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ms-praise-song-title {
    flex: 1;
    color: var(--ms-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-praise-song-link {
    color: var(--ms-text-muted);
    text-decoration: none;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: var(--ms-fs-tiny);
    transition: all var(--ms-duration);
}
.ms-praise-song-link:hover {
    color: var(--ms-primary);
    background: var(--ms-primary-soft);
}

/* ==========================================================
   13. 100주제 진행률
   ========================================================== */
.ms-progress-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
}
.ms-progress-ring {
    position: relative;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
}
.ms-progress-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.ms-progress-ring-bg { stroke: var(--ms-border-light); }
.ms-progress-ring-fg {
    stroke: var(--ms-primary);
    stroke-linecap: round;
    transition: stroke-dasharray 1s var(--ms-ease);
}
.ms-progress-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ms-progress-ring-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ms-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ms-progress-ring-suffix {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    margin-top: 0.25rem;
    font-weight: 500;
}
.ms-progress-info-title {
    font-size: var(--ms-fs-small);
    color: var(--ms-text-muted);
    margin-bottom: 0.375rem;
}
.ms-progress-info-next {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ms-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ms-progress-info-meta {
    font-size: var(--ms-fs-small);
    color: var(--ms-text-secondary);
}
.ms-progress-recent {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ms-border-light);
}
.ms-progress-recent-label {
    font-size: var(--ms-fs-tiny);
    font-weight: 600;
    color: var(--ms-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
    text-transform: uppercase;
}
.ms-progress-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ms-progress-recent-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ms-radius-sm);
    transition: background var(--ms-duration);
    color: inherit;
    min-height: var(--ms-touch-min);
}
.ms-progress-recent-item:hover { background: var(--ms-border-light); }
.ms-progress-recent-no {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    font-size: var(--ms-fs-tiny);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ms-progress-recent-info { flex: 1; min-width: 0; }
.ms-progress-recent-title {
    font-size: var(--ms-fs-small);
    color: var(--ms-text);
    font-weight: 500;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-progress-recent-date {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
}

/* ==========================================================
   14. 사람 영역 - 생일자/새가족/구성 (근접성)
   ========================================================== */
.ms-person-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ms-person-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--ms-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--ms-duration);
    min-height: var(--ms-touch-min);
}
.ms-person-item:hover { background: var(--ms-border-light); }
.ms-person-item.is-today {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.03));
}
.ms-person-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-deep));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ms-fs-small);
    flex-shrink: 0;
    overflow: hidden;
}
.ms-person-avatar.is-today {
    background: linear-gradient(135deg, var(--ms-accent-pink), #DB2777);
}
.ms-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ms-person-info { flex: 1; min-width: 0; }
.ms-person-name {
    font-size: var(--ms-fs-body);
    font-weight: 600;
    color: var(--ms-text);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-person-meta {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
}
.ms-today-badge {
    display: inline-block;
    background: var(--ms-accent-pink);
    color: white;
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--ms-radius-pill);
    margin-left: 0.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* 교인 구성 비율 */
.ms-role-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ms-role-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ms-role-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ms-fs-tiny);
}
.ms-role-name {
    color: var(--ms-text);
    font-weight: 600;
}
.ms-role-count { color: var(--ms-text-muted); }
.ms-role-bar {
    height: 0.375rem;
    background: var(--ms-border-light);
    border-radius: var(--ms-radius-pill);
    overflow: hidden;
}
.ms-role-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ms-primary), var(--ms-primary-deep));
    border-radius: var(--ms-radius-pill);
    transition: width 0.8s var(--ms-ease);
}

/* ==========================================================
   15. 스켈레톤 UI (FR-DASHBOARD-08, SRS § 6.3)
   shimmer 애니메이션 + Layout Shift 방지
   ========================================================== */
.ms-skeleton {
    background: linear-gradient(
        90deg,
        var(--ms-border-light) 0%,
        var(--ms-border) 50%,
        var(--ms-border-light) 100%
    );
    background-size: 200% 100%;
    animation: ms-shimmer 1.5s linear infinite;
    border-radius: var(--ms-radius-sm);
}
.ms-skeleton-line {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}
.ms-skeleton-line.is-short { width: 40%; }
.ms-skeleton-line.is-medium { width: 70%; }

/* ==========================================================
   16. 애니메이션 (SRS § 4.4.5 - 감성)
   ========================================================== */
@keyframes ms-fade-slide-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ms-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes ms-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}
@keyframes ms-fade-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* 진입 시 카드 stagger 애니메이션 */
.ms-stat-card,
.ms-card,
.ms-status-card {
    animation: ms-fade-in 0.4s var(--ms-ease) backwards;
}
.ms-stat-card:nth-child(1) { animation-delay: 0.0s; }
.ms-stat-card:nth-child(2) { animation-delay: 0.05s; }
.ms-stat-card:nth-child(3) { animation-delay: 0.1s; }
.ms-stat-card:nth-child(4) { animation-delay: 0.15s; }
.ms-col:nth-child(1) .ms-card:nth-child(1) { animation-delay: 0.2s; }
.ms-col:nth-child(1) .ms-card:nth-child(2) { animation-delay: 0.25s; }
.ms-col:nth-child(1) .ms-card:nth-child(3) { animation-delay: 0.3s; }
.ms-col:nth-child(2) .ms-card:nth-child(1) { animation-delay: 0.25s; }
.ms-col:nth-child(2) .ms-card:nth-child(2) { animation-delay: 0.3s; }
.ms-col:nth-child(2) .ms-card:nth-child(3) { animation-delay: 0.35s; }

/* SRS § 4.4.4: 모션 민감 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ms-skeleton { animation: none; }
}

/* ==========================================================
   18. 비동기 위젯 페이드인 (v3.5.4)
   API 응답 후 부드러운 전환
   ========================================================== */
.ms-widget-loaded {
    animation: ms-widget-fade-in 0.4s var(--ms-ease) both;
}
@keyframes ms-widget-fade-in {
    from { opacity: 0; transform: translateY(0.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* 새로고침 버튼 (카드 액션) */
.ms-widget-refresh {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--ms-text-muted);
    font-size: var(--ms-fs-tiny);
    font-weight: 500;
    padding: 0 0.5rem;
    min-height: var(--ms-touch-min);
    transition: color var(--ms-duration);
}
.ms-widget-refresh:hover { color: var(--ms-primary); }
.ms-widget-refresh::before { content: '🔄 '; }

/* aria-busy 시 미세한 표시 */
[aria-busy="true"] .ms-skeleton {
    /* 스켈레톤은 이미 shimmer 애니메이션 활성 */
}

/* ==========================================================
   19. 심방/기도 위젯 (FR-DASHBOARD-06)
   ========================================================== */
.ms-vp-section {
    margin-bottom: 1rem;
}
.ms-vp-section:last-child { margin-bottom: 0; }
.ms-vp-section-label {
    font-size: var(--ms-fs-tiny);
    font-weight: 600;
    color: var(--ms-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ms-vp-urgent-count {
    background: var(--ms-danger);
    color: white;
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ms-radius-pill);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
}
.ms-vp-badge {
    display: inline-block;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ms-radius-pill);
    margin-left: 0.375rem;
    font-weight: 600;
    vertical-align: middle;
}

/* 기도 요청 리스트 */
.ms-prayer-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ms-prayer-item {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: var(--ms-radius-sm);
    text-decoration: none;
    color: inherit;
    background: var(--ms-border-light);
    border-left: 3px solid var(--ms-text-muted);
    transition: all var(--ms-duration) var(--ms-ease);
    min-height: var(--ms-touch-min);
}
.ms-prayer-item:hover {
    transform: translateX(2px);
    background: var(--ms-card-hover);
}
.ms-prayer-item.is-urgent { border-left-color: var(--ms-danger); }
.ms-prayer-item.is-high { border-left-color: var(--ms-warning); }
.ms-prayer-item.is-normal { border-left-color: var(--ms-info); }

.ms-prayer-urgency {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ms-radius-pill);
    height: fit-content;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    align-self: flex-start;
}
.ms-prayer-urgency.is-urgent {
    background: rgba(239, 68, 68, 0.12);
    color: var(--ms-danger);
}
.ms-prayer-urgency.is-high {
    background: rgba(245, 158, 11, 0.12);
    color: var(--ms-warning);
}
.ms-prayer-urgency.is-normal {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
}
.ms-prayer-body { flex: 1; min-width: 0; }
.ms-prayer-title {
    font-size: var(--ms-fs-small);
    font-weight: 600;
    color: var(--ms-text);
    margin-bottom: 0.25rem;
}
.ms-prayer-summary {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-secondary);
    line-height: 1.5;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ms-prayer-date {
    font-size: 0.625rem;
    color: var(--ms-text-muted);
}

/* ==========================================================
   20. AI 주간 요약 위젯 (FR-DASHBOARD-07)
   ========================================================== */
.ms-ai-week-label {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.ms-ai-summary-text {
    font-size: var(--ms-fs-small);
    color: var(--ms-text);
    line-height: 1.65;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--ms-primary-tint), transparent);
    border-radius: var(--ms-radius-sm);
    margin-bottom: 0.875rem;
    border-left: 3px solid var(--ms-primary);
}
.ms-ai-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}
.ms-ai-highlight {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--ms-border-light);
    border-radius: var(--ms-radius-sm);
}
.ms-ai-highlight.is-positive {
    background: rgba(16, 185, 129, 0.08);
}
.ms-ai-highlight.is-warning {
    background: rgba(245, 158, 11, 0.08);
}
.ms-ai-highlight-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}
.ms-ai-highlight-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    min-width: 0;
}
.ms-ai-highlight-label {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-secondary);
    font-weight: 500;
}
.ms-ai-highlight-value {
    font-size: var(--ms-fs-small);
    color: var(--ms-text);
    font-weight: 700;
}
.ms-ai-highlight.is-positive .ms-ai-highlight-value { color: var(--ms-success); }
.ms-ai-highlight.is-warning .ms-ai-highlight-value { color: var(--ms-warning); }
.ms-ai-highlight-trend {
    font-size: 0.625rem;
    margin-left: 0.375rem;
    font-weight: 500;
    opacity: 0.8;
}

.ms-ai-recs {
    list-style: none;
    padding: 0;
    margin: 0 0 0.875rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.ms-ai-rec {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--ms-border-light);
    border-radius: var(--ms-radius-sm);
    line-height: 1.5;
}
.ms-ai-source {
    font-size: 0.625rem;
    color: var(--ms-text-muted);
    text-align: right;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ms-border-light);
}

/* ==========================================================
   21. 반응형 브레이크포인트 (Mobile-First)
   ========================================================== */

/* 태블릿: 통계 2x2 */
@media (min-width: 600px) {
    .ms-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
}

/* 데스크탑: 통계 4x1 + 메인 그리드 좌우 분리 */
@media (min-width: 1100px) {
    .ms-stats-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .ms-main-grid {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    }
}

/* 매우 큰 화면: 컨테이너 최대 너비 */
@media (min-width: 1600px) {
    .ms-dashboard {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 모바일 특수 처리 */
@media (max-width: 599px) {
    .ms-status-card {
        padding: 1rem;
        gap: 0.75rem;
    }
    .ms-status-checks { width: 100%; }
    .ms-progress-block {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
    }
    .ms-progress-ring { margin: 0 auto; }
    .ms-sermon-actions { flex-direction: column; }
    .ms-sermon-actions .ms-btn { width: 100%; }
}

/* ==========================================================
   22. v3 셸 호환 모드 (.ms-dashboard-v3)
   layout-v3.html의 .ms-content가 이미 padding을 갖고 있으므로
   negative margin을 제거하고 자연스럽게 안에 자리잡게 함
   ========================================================== */
.ms-dashboard-v3 {
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: auto;
}

/* ==========================================================
   23. 반응형 Bento Grid (auto-fit)
   사이드바 토글에 따라 사용 가능 폭이 변하면 자동 재배치
   - 320px 이상: 카드 1개
   - 660px 이상: 카드 2개 (2열)
   - 1000px 이상: 카드 3개 (3열)
   
   [v3.5.6 패치] 모바일에서 가로 넘침 방지
   - max-width: 100% + min-width: 0 (자식 카드가 부모 폭 따라 축소)
   - minmax(min(320px, 100%), 1fr) - 작은 화면에서도 100% 못 넘게
   ========================================================== */
.ms-bento-grid {
    display: grid;
    /* v3.8.1 Masonry 레이아웃:
       - 컬럼은 그대로 auto-fit으로 반응형
       - row를 1px로 잘게 자르고, JS가 각 카드의 실제 높이만큼 grid-row span을 부여
       - 결과: 핀터레스트 스타일 — 각 카드가 자기 콘텐츠 높이만 차지하고 위로 당겨짐
    */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    grid-auto-rows: 1px;          /* Masonry 핵심: 매우 얇은 row */
    gap: var(--ms-gap);
    align-items: start;
    margin-top: 1rem;
    max-width: 100%;
    min-width: 0;
}

/* 모든 카드 자식이 부모 폭을 넘지 않도록 */
.ms-bento-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* v3.8.1: JS가 측정 전이거나 비활성 환경에서의 안전 fallback.
   .is-masonry-ready 클래스가 grid에 붙어야 위 grid-auto-rows가 의미를 가짐.
   기본 상태(JS 측정 전)에서는 grid-auto-rows를 자동으로 → 일반 그리드처럼 작동 */
.ms-bento-grid:not(.is-masonry-ready) {
    grid-auto-rows: minmax(0, auto);
}

/* JS가 카드 높이 측정 완료 후 적용되는 클래스
   각 카드는 인라인 style="grid-row: span N"을 받게 됨 */
.ms-bento-grid.is-masonry-ready > .ms-card {
    /* 카드는 자기 콘텐츠 높이만큼만 차지. height: auto가 핵심 */
    height: auto;
    align-self: start;
}

/* 측정 도중 깜빡임(flicker) 방지: 첫 렌더 시 카드들이 살짝 페이드 인 */
.ms-bento-grid > .ms-card {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.ms-bento-grid.is-masonry-measuring > .ms-card {
    opacity: 0.85;
}

/* 큰 카드 (최근 설교) - 가능한 경우 2칸 차지
   v3.8.1: Masonry에서도 작동. 컬럼이 1개일 때(좁은 화면)는 자동으로 1칸이 됨
   (auto-fit + 1열에서는 grid-column: span 2가 1로 클램프됨) */
.ms-bento-wide {
    grid-column: span 1;
}
@media (min-width: 1000px) {
    .ms-bento-wide {
        grid-column: span 2;
    }
}

/* KPI 행 - 사이드바 폭 변화에 반응하는 fluid 그리드 */
.ms-stats-row-fluid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--ms-gap);
    margin-bottom: 1.5rem;
    max-width: 100%;
    min-width: 0;
}
.ms-stats-row-fluid > * {
    min-width: 0;
    max-width: 100%;
}

/* ==========================================================
   새가족 양육 위젯 (v3.6.1)
   ========================================================== */
.ms-nc-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ms-border-light);
}
.ms-nc-stat {
    text-align: center;
    padding: 8px 4px;
    background: var(--ms-bg);
    border-radius: 8px;
}
.ms-nc-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ms-primary);
    line-height: 1.2;
    font-feature-settings: "tnum";
}
.ms-nc-stat-label {
    font-size: 11px;
    color: var(--ms-text-muted);
    font-weight: 500;
    margin-top: 2px;
}
.ms-nc-section {
    margin-bottom: 12px;
}
.ms-nc-section:last-child { margin-bottom: 0; }
.ms-nc-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ms-text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.ms-nc-section-title.is-warning {
    color: var(--ms-warning);
}
.ms-nc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ms-nc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--ms-bg);
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all var(--ms-duration);
}
.ms-nc-item:hover {
    background: rgba(26,111,168,0.06);
    border-color: var(--ms-primary);
    transform: translateY(-1px);
}
.ms-nc-item.is-attention:hover {
    background: rgba(245,158,11,0.08);
    border-color: var(--ms-warning);
}
.ms-nc-progress-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(var(--ms-primary) 0%, var(--ms-primary) var(--pct, 50%), var(--ms-border-light) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.ms-nc-progress-circle::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ms-card);
}
.ms-nc-progress-circle span {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    color: var(--ms-primary);
    font-feature-settings: "tnum";
}
.ms-nc-progress-circle.is-attention {
    background: conic-gradient(var(--ms-warning) 0%, var(--ms-warning) 30%, var(--ms-border-light) 0);
}
.ms-nc-progress-circle.is-attention span { color: var(--ms-warning); }
.ms-nc-body { flex: 1; min-width: 0; }
.ms-nc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-text);
    margin-bottom: 2px;
}
.ms-nc-meta {
    font-size: 11px;
    color: var(--ms-text-muted);
    line-height: 1.5;
}
.ms-nc-meta strong { color: var(--ms-warning); }

/* ==========================================================
   v3.6.2: 시스템 헬스케어 위젯 (Top-Right Bento)
   2026 미니멀 트렌드 - 정갈한 그라데이션 + 펄스 애니메이션
   ========================================================== */
.ms-top-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ms-gap);
    margin-bottom: var(--ms-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
@media (min-width: 900px) {
    .ms-top-row {
        /* 데스크톱: 예배 준비 (1.5fr) | 시스템 헬스 (1fr) */
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }
}
.ms-top-row > * { min-width: 0; max-width: 100%; }

/* 시스템 헬스 카드 */
.ms-system-health {
    background: linear-gradient(180deg, #FCFDFE 0%, #F5F8FB 100%);
    border: 1px solid var(--ms-border-light);
    border-radius: var(--ms-radius);
    padding: 14px 16px;
    box-shadow: var(--ms-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
    position: relative;
    overflow: hidden;
}
.ms-system-health::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ms-primary), var(--ms-success));
    opacity: 0.6;
}

.ms-sh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.ms-sh-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ms-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
}

/* 헤더 펄스 인디케이터 (활성=녹색, 위험=빨강) */
.ms-sh-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ms-success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    animation: ms-sh-pulse-good 2.5s infinite;
}
.ms-sh-pulse.is-warning {
    background: var(--ms-warning);
    animation: ms-sh-pulse-warn 1.6s infinite;
}
.ms-sh-pulse.is-critical {
    background: var(--ms-danger);
    animation: ms-sh-pulse-crit 0.9s infinite;
}
@keyframes ms-sh-pulse-good {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes ms-sh-pulse-warn {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes ms-sh-pulse-crit {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.ms-sh-updated {
    font-size: 10px;
    color: var(--ms-text-muted);
    font-feature-settings: "tnum";
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* IP 정보 영역 */
.ms-sh-ip {
    font-size: 11px;
    color: var(--ms-text-secondary);
    padding: 6px 10px;
    background: rgba(26, 111, 168, 0.04);
    border-radius: 6px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.ms-sh-ip-label {
    color: var(--ms-text-muted);
    font-weight: 500;
}
.ms-sh-ip-val {
    color: var(--ms-text);
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-feature-settings: "tnum";
    font-size: 11px;
}
.ms-sh-ip-sep {
    color: var(--ms-text-muted);
    margin: 0 6px;
    opacity: 0.5;
}

/* 메트릭 4개 그리드 */
.ms-sh-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ms-sh-metric {
    transition: opacity var(--ms-duration);
}

/* 임계값 80%+ 펄스 효과 (요구사항: 부드러운 붉은색 맥박) */
.ms-sh-metric.is-warning .ms-sh-bar-fill {
    background: linear-gradient(90deg, #FBBF24, var(--ms-warning));
}
.ms-sh-metric.is-critical .ms-sh-bar-fill {
    background: linear-gradient(90deg, #F87171, var(--ms-danger));
    animation: ms-sh-bar-pulse 1.4s ease-in-out infinite;
}
.ms-sh-metric.is-critical .ms-sh-metric-value,
.ms-sh-metric.is-critical .ms-sh-metric-status {
    color: var(--ms-danger);
    animation: ms-sh-text-pulse 1.4s ease-in-out infinite;
}
@keyframes ms-sh-bar-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 8px 0 rgba(239, 68, 68, 0.4); }
}
@keyframes ms-sh-text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ms-sh-metric-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
}
.ms-sh-metric-icon {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.ms-sh-metric-label {
    font-weight: 700;
    color: var(--ms-text-secondary);
    letter-spacing: 0.05em;
    width: 36px;
    flex-shrink: 0;
}
.ms-sh-metric-status {
    flex: 1;
    color: var(--ms-text-muted);
    font-weight: 500;
    text-align: right;
}
.ms-sh-metric-value {
    color: var(--ms-text);
    font-weight: 700;
    font-feature-settings: "tnum";
    font-family: ui-monospace, SFMono-Regular, monospace;
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
}

/* 진행률 바 */
.ms-sh-bar {
    width: 100%;
    height: 5px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.ms-sh-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #34D399, var(--ms-success));
    border-radius: 999px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 시스템 알림 토스트 (검색바 아래 자리) */
.ms-system-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border: 1px solid #FCA5A5;
    border-left: 4px solid var(--ms-danger);
    border-radius: 12px;
    padding: 14px 20px 14px 18px;
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.18);
    max-width: min(560px, 90vw);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: ms-toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* v3.7.4 핫픽스: hidden 속성을 display:flex 보다 강하게 — 빈 박스 잔재 차단
   ([hidden] { display: none } 의 브라우저 기본은 .ms-system-toast { display: flex }와
   specificity가 동일해 cascade 순서로 무력화되던 문제 해결) */
.ms-system-toast[hidden] {
    display: none !important;
}
.ms-system-toast.is-warning {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border-color: #FCD34D;
    border-left-color: var(--ms-warning);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.15);
}
.ms-system-toast .ms-toast-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.ms-system-toast .ms-toast-body {
    flex: 1;
    min-width: 0;
}
.ms-system-toast .ms-toast-title {
    font-size: 13px;
    font-weight: 700;
    /* v3.7.2 핫픽스: 토스트 배경은 항상 라이트 고정이므로 글자색도 다크모드 영향 없는 고정값 사용
       (이전: var(--ms-text) → 다크모드에서 흰색 → 라이트 배경에 흰 글자 = 안 보임) */
    color: #111827;
    margin-bottom: 2px;
}
.ms-system-toast .ms-toast-msg {
    font-size: 12px;
    /* v3.7.2 핫픽스: 다크모드 호환 고정값 */
    color: #4B5563;
    line-height: 1.5;
}
.ms-system-toast .ms-toast-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.ms-system-toast .ms-toast-btn {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    /* v3.7.2 핫픽스: 다크모드 호환 고정값 (라이트 배경 대비) */
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #111827;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ms-system-toast .ms-toast-btn.is-primary {
    background: var(--ms-danger);
    color: white;
    border-color: var(--ms-danger);
}
.ms-system-toast .ms-toast-btn.is-primary:hover { opacity: 0.9; }
.ms-system-toast .ms-toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    /* v3.7.2 핫픽스: 다크모드 호환 고정값 */
    color: #9CA3AF;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}
.ms-system-toast .ms-toast-close:hover {
    color: #111827;
}
@keyframes ms-toast-in {
    0% { opacity: 0; transform: translate(-50%, -16px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* 모바일에서 IP 표시 줄바꿈 */
@media (max-width: 480px) {
    .ms-sh-ip { font-size: 10.5px; }
    .ms-sh-ip-sep { display: none; }
    .ms-sh-ip-val { display: inline-block; margin-bottom: 2px; }
}