/* 모던한 UI 스타일 - React 스타일 기반 */

/* 이미지 최적화 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* base.html의 container 제한 해제 */
body main.container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.modern-container {
    min-height: 100vh;
    background-color: #f9fafb;
    padding: 1rem;
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (min-width: 768px) {
    .modern-container {
        padding: 1.5rem;
    }
}

/* 헤더 카드 */
.header-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.header-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    padding-left: calc(3rem + 0.5rem); /* detail-stats-label 너비 + gap과 맞추기 (집사 뱃지와 같은 라인) */
}

.header-title .icon-users {
    position: absolute;
    left: 0;
    margin-left: 0;
}

.header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

@media (min-width: 768px) {
    .header-title h1 {
        font-size: 1.875rem;
    }
}

.icon-users {
    width: 2rem;
    height: 2rem;
    color: #2563eb;
    stroke-width: 2;
}

.member-count {
    font-size: 0.875rem;
    color: #4b5563;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.count-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
}

.count-item.clickable-filter {
    cursor: pointer;
    transition: all 0.2s ease;
}

.count-item.clickable-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.count-item.clickable-filter.active {
    box-shadow: 0 0 0 2px #3b82f6;
}

.count-item.count-total {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.count-item.count-socheon {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.count-item.count-jeonchul {
    background-color: #e0e7ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

.count-item.count-gyeolsik {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.count-item.count-jeondodae {
    background-color: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.count-item.count-current {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}

.count-item.count-faith {
    background-color: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.count-number {
    font-weight: 700;
    color: #2563eb;
}

.count-item.count-total .count-number {
    color: #1e40af;
}

.count-item.count-socheon .count-number {
    color: #374151;
}

.count-item.count-jeonchul .count-number {
    color: #3730a3;
}

.count-item.count-gyeolsik .count-number {
    color: #991b1b;
}

.count-item.count-jeondodae .count-number {
    color: #92400e;
}

.count-item.count-current .count-number {
    color: #065f46;
}

.count-item.count-faith .count-number {
    color: #1e40af;
}

/* 상태별 필터 스타일 (배지 색상과 동일) */
.count-item[data-filter="status-출석"] {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}

.count-item[data-filter="status-출석"] .count-number {
    color: #065f46;
}

.count-item[data-filter="status-항상출석"] {
    background-color: #86efac;
    border-color: #4ade80;
    color: #14532d;
}

.count-item[data-filter="status-항상출석"] .count-number {
    color: #14532d;
}

.count-item[data-filter="status-가끔출석"] {
    background-color: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.count-item[data-filter="status-가끔출석"] .count-number {
    color: #1e40af;
}

.count-item[data-filter="status-미등록"] {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.count-item[data-filter="status-미등록"] .count-number {
    color: #991b1b;
}

/* 상세 통계 */
.member-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.detail-stats-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    position: relative;
    padding-left: calc(3rem + 0.5rem); /* 라벨 너비 + gap */
}

.detail-stats-label {
    font-weight: 600;
    color: #374151;
    min-width: 3rem;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    padding-top: 0.375rem; /* count-item의 padding과 맞추기 */
}

/* 직분별 필터 스타일 (배지 색상과 동일) */
.count-item[data-filter="role-담임목사"],
.count-item[data-filter="role-담임목사대상자"] {
    background-color: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.count-item[data-filter="role-담임목사"] .count-number,
.count-item[data-filter="role-담임목사대상자"] .count-number {
    color: #92400e;
}

.count-item[data-filter="role-부목사"],
.count-item[data-filter="role-부목사대상자"] {
    background-color: #e0e7ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

.count-item[data-filter="role-부목사"] .count-number,
.count-item[data-filter="role-부목사대상자"] .count-number {
    color: #3730a3;
}

.count-item[data-filter="role-목사"],
.count-item[data-filter="role-목사대상자"] {
    background-color: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.count-item[data-filter="role-목사"] .count-number,
.count-item[data-filter="role-목사대상자"] .count-number {
    color: #1e40af;
}

.count-item[data-filter="role-전도사"],
.count-item[data-filter="role-전도사대상자"] {
    background-color: #cffafe;
    border-color: #a5f3fc;
    color: #0e7490;
}

.count-item[data-filter="role-전도사"] .count-number,
.count-item[data-filter="role-전도사대상자"] .count-number {
    color: #0e7490;
}

.count-item[data-filter="role-사모"],
.count-item[data-filter="role-사모대상자"] {
    background-color: #fce7f3;
    border-color: #f9a8d4;
    color: #9f1239;
}

.count-item[data-filter="role-사모"] .count-number,
.count-item[data-filter="role-사모대상자"] .count-number {
    color: #9f1239;
}

.count-item[data-filter="role-장로"],
.count-item[data-filter="role-장로대상자"] {
    background-color: #f3e8ff;
    border-color: #e9d5ff;
    color: #6b21a8;
}

.count-item[data-filter="role-장로"] .count-number,
.count-item[data-filter="role-장로대상자"] .count-number {
    color: #6b21a8;
}

.count-item[data-filter="role-권사"],
.count-item[data-filter="role-권사대상자"] {
    background-color: #fed7aa;
    border-color: #fdba74;
    color: #c2410c;
}

.count-item[data-filter="role-권사"] .count-number,
.count-item[data-filter="role-권사대상자"] .count-number {
    color: #c2410c;
}

.count-item[data-filter="role-안수집사"],
.count-item[data-filter="role-안수집사대상자"] {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}

.count-item[data-filter="role-안수집사"] .count-number,
.count-item[data-filter="role-안수집사대상자"] .count-number {
    color: #065f46;
}

.count-item[data-filter="role-집사"],
.count-item[data-filter="role-집사대상"] {
    background-color: #e0e7ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

.count-item[data-filter="role-집사"] .count-number,
.count-item[data-filter="role-집사대상"] .count-number {
    color: #3730a3;
}

.count-item[data-filter="role-직분없음"] {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.count-item[data-filter="role-직분없음"] .count-number {
    color: #374151;
}

.count-item[data-filter="role-일반성도"] {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.count-item[data-filter="role-일반성도"] .count-number {
    color: #374151;
}

/* 성별 필터 스타일 */
.count-item.count-gender-male {
    background-color: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.count-item.count-gender-male .count-number {
    color: #1e40af;
}

.count-item.count-gender-female {
    background-color: #fce7f3;
    border-color: #f9a8d4;
    color: #9f1239;
}

.count-item.count-gender-female .count-number {
    color: #9f1239;
}

/* 성례별 필터 스타일 (배지 색상과 동일) */
.count-item[data-filter="baptism-세례"] {
    background-color: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.count-item[data-filter="baptism-세례"] .count-number {
    color: #1e40af;
}

.count-item[data-filter="baptism-침례"] {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}

.count-item[data-filter="baptism-침례"] .count-number {
    color: #065f46;
}

.count-item[data-filter="baptism-침례대상"] {
    background-color: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.count-item[data-filter="baptism-침례대상"] .count-number {
    color: #92400e;
}

/* 기타 성례 타입 (연령제한 등) - 기본 스타일 */
.count-item.count-baptism:not([data-filter="baptism-세례"]):not([data-filter="baptism-침례"]):not([data-filter="baptism-침례대상"]) {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

.count-item.count-baptism:not([data-filter="baptism-세례"]):not([data-filter="baptism-침례"]):not([data-filter="baptism-침례대상"]) .count-number {
    color: #14532d;
}

/* 소속기관별 필터 스타일 */
.count-item.count-district {
    background-color: #f0f9ff;
    border-color: #bae6fd;
    color: #0c4a6e;
}

.count-item.count-district .count-number {
    color: #0c4a6e;
}

.count-item[data-filter="district-직분없음"] {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.count-item[data-filter="district-직분없음"] .count-number {
    color: #374151;
}

.count-item[data-filter="district-무소속"] {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.count-item[data-filter="district-무소속"] .count-number {
    color: #991b1b;
}

/* 헤더 액션 */
.header-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .header-actions {
        flex-direction: row;
    }
}

/* 검색 섹션 */
.search-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 검색창과 목록 버튼을 같은 라인에 배치 */
.search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

@media (min-width: 768px) {
    .search-section {
        flex-direction: column;
    }
}

/* 필터 버튼 */
.filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* 첫 번째 줄에 액션 버튼 포함 */
.filter-row-with-actions {
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.action-buttons-inline {
    display: none;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

/* PC/태블릿에서 인라인 액션 버튼 표시 */
@media (min-width: 768px) {
    .action-buttons-inline {
        display: flex;
    }
    
    .action-buttons-mobile {
        display: none !important;
    }
}

/* 모바일에서 모바일 액션 버튼 표시 */
@media (max-width: 767px) {
    .action-buttons-inline {
        display: none !important;
    }
    
    .action-buttons-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-top: 0.75rem;
    }
    
    .action-buttons-mobile .btn-view-mode,
    .action-buttons-mobile .btn-export,
    .action-buttons-mobile .btn-add,
    .action-buttons-mobile label {
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        margin: 0;
    }
}

/* 두 번째 줄 (1~12월)은 줄바꿈 가능 */
.filter-row:last-child {
    flex-wrap: wrap;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: white;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 1~12월 버튼은 원래 스타일 유지 (정사각형 제거) */

.filter-btn:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.filter-btn.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

.filter-btn.active .count-number {
    color: white;
}

.filter-btn .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
    flex-shrink: 0;
}

/* 생일자 버튼 아이콘 크기 통일 */
.birthday-btn .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
    flex-shrink: 0;
}

/* 생일자 버튼 크기 통일 */
.birthday-btn {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
    justify-content: center;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* 현재 월 생일자 버튼 아이콘 색상 변경 */
.birthday-btn.current-month .icon {
    stroke: #f107a7 !important;
}

/* 현재 월 생일자 버튼이 선택되었을 때 아이콘 색상을 하얀색으로 */
.birthday-btn.current-month.active .icon {
    stroke: white !important;
}

/* 검색 박스 */
.search-box {
    flex: 1;
    position: relative;
    min-width: 0; /* flexbox에서 텍스트 오버플로우 방지 */
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
    stroke-width: 2;
    pointer-events: none;
    z-index: 1;
}

.search-icon.clickable {
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s;
}

.search-icon.clickable:hover {
    color: #2563eb;
}

.search-input {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 14pt;
    font-family: 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
}

.search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* 액션 버튼들 */
.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.action-buttons-mobile {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.btn-view-mode,
.btn-export,
.btn-add,
.btn-family-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 14pt;
    font-family: 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
    transition: all 0.2s;
    text-decoration: none;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}

.btn-family-sort:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.btn-family-sort.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

.btn-reset-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 14pt;
    font-family: 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.action-buttons-mobile .btn-view-mode,
.action-buttons-mobile .btn-export,
.action-buttons-mobile .btn-add,
.action-buttons-mobile label {
    width: 100%;
    justify-content: center;
    margin: 0;
}

.btn-reset-list {
    background-color: #6b7280;
    color: white;
    font-weight: 500;
}

.btn-reset-list:hover {
    background-color: #4b5563;
}

.btn-view-mode {
    background-color: #e5e7eb;
    color: #374151;
}

.btn-view-mode:hover {
    background-color: #d1d5db;
}

.btn-view-mode.active {
    background-color: #16a34a;
    color: white;
}

.btn-export {
    background-color: #16a34a !important;
    color: white !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-export:hover {
    background-color: #15803d !important;
}

.btn-add {
    background-color: #2563eb;
    color: white;
}

.btn-add:hover {
    background-color: #1d4ed8;
}

.btn-view-mode .icon,
.btn-export .icon,
.btn-add .icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

/* 테이블 카드 */
.table-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: visible;
    width: 100%;
    max-width: none;
}

/* 뷰 컨테이너 - 가로형 레이아웃 */
.view-container {
    width: 100%;
    overflow-x: visible;
    overflow-y: visible;
}

.table-wrapper {
    width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    position: relative;
    min-height: 200px;
}

/* 모바일 스크롤 안내 오버레이 */
.scroll-hint-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    pointer-events: none;
}

/* 모바일 스크롤 안내 */
.scroll-hint {
    display: none;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1.25rem 1.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: #374151;
    pointer-events: none;
    white-space: nowrap;
    font-weight: 500;
}

.scroll-hint svg {
    width: 2rem;
    height: 2rem;
    color: #6b7280;
    animation: swipe-hint 1.5s ease-in-out infinite;
}

@keyframes swipe-hint {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

@media (max-width: 1180px) {
    .scroll-hint-overlay {
        display: block;
    }
    
    .scroll-hint {
        display: flex;
    }
    
    .scroll-hint-overlay.hidden,
    .scroll-hint.hidden {
        display: none !important;
    }
}

/* 모던 테이블 - 가로형 레이아웃 (스크롤 없이 전체 표시) */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.modern-table thead {
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.modern-table th {
    padding: 0.875rem 1rem;
    text-align: center !important;
    font-size: 14pt;
    font-weight: 600;
    color: #374151;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
    background-color: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 10;
    display: table-cell;
    box-sizing: border-box;
}


.modern-table th.sortable {
    user-select: none;
    position: relative;
}

.modern-table th.sortable:hover {
    background-color: #f3f4f6;
}

.sort-icon {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: bold;
    min-width: 0.875rem;
    vertical-align: middle;
    line-height: 1;
}

.sort-icon::before {
    content: '⇅';
    display: inline-block;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: bold;
}

.sort-icon.sort-asc::before {
    content: '▲';
    display: inline-block;
    color: #2563eb;
    font-size: 0.625rem;
}

.sort-icon.sort-desc::before {
    content: '▼';
    display: inline-block;
    color: #2563eb;
    font-size: 0.625rem;
}

.modern-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s;
}

.modern-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.modern-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
}

/* JavaScript로 동적 적용되는 홀수/짝수 스타일 (우선순위 높음) */
.modern-table tbody tr.row-odd {
    background-color: #ffffff !important;
}

.modern-table tbody tr.row-even {
    background-color: #f3f4f6 !important;
}

.modern-table tbody tr:hover {
    background-color: #e5e7eb;
}

.modern-table td {
    padding: 0.875rem 1rem;
    font-size: 14pt;
    color: #374151;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    box-sizing: border-box;
}

/* 테이블 컬럼 가운데 정렬 */
.modern-table th,
.modern-table td {
    text-align: center !important;
}

/* 상태 배지 스타일 */
.status-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
    display: inline-block;
    border-radius: 0.375rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.status-badge.출석 {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge.항상출석 {
    background-color: #86efac;
    color: #14532d;
}

.status-badge.가끔출석 {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-badge.결석 {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge.소천 {
    background-color: #e5e7eb;
    color: #374151;
}

.status-badge.전도대상 {
    background-color: #fef3c7;
    color: #92400e;
}

.status-badge.전출 {
    background-color: #e0e7ff;
    color: #3730a3;
}

.status-badge.미등록 {
    background-color: #fef2f2;
    color: #991b1b;
}

/* 생년월일 컬럼 스타일 */
.birth-date-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.birth-date-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    justify-content: center;
}

.this-year-birthday {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    text-align: center;
}

/* 비고 컨테이너 - 일반 텍스트 */
.notes-tags-container {
    display: block;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    white-space: pre-wrap;
    min-height: 1.5rem;
    max-height: 10rem;
    overflow-y: auto;
}

/* 리스트에서 비고 축약 표시 */
.modern-table .notes-tags-container {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    max-height: none;
    overflow-y: visible;
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

/* 비고 물음표 아이콘 */
.notes-question-mark {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    background-color: #6b7280;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 0.25rem;
    vertical-align: middle;
    cursor: pointer;
}

.notes-question-mark:hover {
    background-color: #4b5563;
}

/* 비고 모달 오버레이 */
.notes-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.notes-modal-overlay.show {
    display: flex;
}

/* 비고 모달 */
.notes-modal {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 600px;
    max-height: 80vh;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow-y: auto;
}

.notes-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.notes-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.notes-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

.notes-modal-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.notes-modal-content {
    color: #374151;
    line-height: 1.75;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9375rem;
}

/* 컬럼별 너비 설정 - 가로형 레이아웃 (% 기반, 스크롤 없이 전체 표시) */
.modern-table th:nth-child(1),
.modern-table td:nth-child(1) {
    /* 번호 */
    width: 60px;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(2),
.modern-table td:nth-child(2) {
    /* 사진 */
    width: 80px;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(3),
.modern-table td:nth-child(3) {
    /* 이름 */
    width: 100px;
    white-space: nowrap;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(4),
.modern-table td:nth-child(4) {
    /* 상태 */
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    white-space: nowrap;
    padding: 0.875rem 1rem;
    text-align: center !important;
    overflow: hidden;
}

.modern-table th:nth-child(5),
.modern-table td:nth-child(5) {
    /* 생년월일 */
    width: 200px;
    white-space: nowrap;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(6),
.modern-table td:nth-child(6) {
    /* 소속기관 */
    width: 120px;
    white-space: nowrap;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(7),
.modern-table td:nth-child(7) {
    /* 직분 */
    width: 100px;
    white-space: nowrap;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(8),
.modern-table td:nth-child(8) {
    /* 성별 */
    width: 70px;
    white-space: nowrap;
    padding: 0.875rem 1rem;
    text-align: center !important;
}

.modern-table th:nth-child(9),
.modern-table td:nth-child(9) {
    /* 성례 */
    width: 100px;
    white-space: nowrap;
    overflow: visible;
    padding: 0.875rem 1rem;
    text-align: center;
}

.modern-table td:nth-child(9) > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}

.modern-table th:nth-child(10),
.modern-table td:nth-child(10) {
    /* 비고 */
    width: 12%;
    min-width: 150px;
    max-width: 200px;
    padding: 0.875rem 1rem;
    white-space: normal;
    word-break: break-word;
    text-align: center !important;
}

.modern-table th:nth-child(10) {
    /* 비고 헤더는 한 줄로 유지 */
    white-space: nowrap;
    word-break: normal;
    text-align: center !important;
}

.modern-table th:nth-child(11),
.modern-table td:nth-child(11) {
    /* 관리 */
    width: 10%;
    min-width: 120px;
    text-align: center !important;
    white-space: nowrap;
    padding: 0.875rem 1rem;
}

.action-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-buttons-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

/* 태블릿 이상 (768px 이상) - 아이패드 포함 */
/* 네비게이션 바(.navbar)는 그대로 두고, 그 아래 모든 콘텐츠는 모바일처럼 표시 */
@media (min-width: 768px) {
    /* 768px 이상 스타일 오버라이드 - 모바일처럼 */
    .modern-container {
        padding: 0.5rem !important;
    }
    
    .header-title h1 {
        font-size: 1.5rem !important;
    }
    
    .header-actions {
        flex-direction: column !important;
    }
    
    .search-section {
        flex-direction: column !important;
    }
    
    /* 헤더 카드 모바일 스타일 */
    .header-card {
        padding: 1rem;
    }
    
    .header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .action-buttons {
        flex-wrap: wrap;
    }
    
    /* 테이블 모바일 스타일 적용 */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .modern-table {
        min-width: 1000px;
        table-layout: auto;
    }
    
    /* 생년월일 컬럼 최소 너비 보장 */
    .modern-table th:nth-child(5),
    .modern-table td:nth-child(5) {
        min-width: 200px;
    }
    
    .modern-table th:nth-child(11),
    .modern-table td:nth-child(11) {
        min-width: 120px;
    }
    
    .btn-icon {
        width: 1.75rem;
        height: 1.75rem;
        margin: 0 0.125rem;
    }
    
    .btn-icon svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    /* 가족별 보기 모바일 스타일 */
    .family-member-info-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .family-member-row:not(.family-head) {
        margin-left: 1rem;
    }
    
    .table-card {
        padding: 1rem;
    }
    
    /* 태블릿에서는 인라인 액션 버튼 표시 */
    .action-buttons-inline {
        display: flex !important;
    }
    
    .action-buttons-mobile {
        display: none !important;
    }
    
    /* 모든 컬럼에 동일한 패딩 적용 */
    .modern-table th,
    .modern-table td {
        padding: 0.875rem 1rem !important;
    }
    
    /* 태블릿 가족별 보기 생년월일 폰트 크기 축소 */
    .family-birth-date-container .birth-date-row > span:first-child {
        font-size: 0.875rem !important;
    }
    
    /* "- 만x세" 텍스트 크기 축소 */
    .family-birth-date-container .birth-date-row .age-display {
        font-size: 0.75rem !important;
    }
}

/* 모바일 (767px 이하) - 가로 스크롤 필요 */
@media (max-width: 767px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .modern-table {
        min-width: 1000px;
        width: 100%;
        table-layout: auto;
    }
    
    .modern-table td {
        font-size: 10pt;
    }
    
    .modern-table th {
        font-size: 0.875rem;
        text-align: center !important;
    }
    
    /* 모바일에서는 사진, 이름, 관리만 표시되므로 min-width 제거 */
    .modern-table th,
    .modern-table td {
        min-width: auto;
    }
    
    /* 모든 컬럼에 동일한 패딩 적용 */
    .modern-table th,
    .modern-table td {
        padding: 0.875rem 1rem !important;
    }
    
    /* 관리 컬럼만 최소 너비 유지 */
    .modern-table th:last-child,
    .modern-table td:last-child {
        min-width: 120px;
    }
    
    .btn-icon {
        width: 1.75rem;
        height: 1.75rem;
        margin: 0 0.125rem;
    }
    
    .btn-icon svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    /* 모바일에서 액션 버튼 표시 (767px 이하) */
    .action-buttons-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-top: 0.75rem;
    }
    
    .action-buttons-mobile .btn-view-mode,
    .action-buttons-mobile .btn-export,
    .action-buttons-mobile .btn-add,
    .action-buttons-mobile label {
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        margin: 0;
    }
    
    .action-buttons-inline {
        display: none !important;
    }
}

.font-medium {
    font-weight: 500;
    color: #111827;
}

.name-link {
    color: #111827;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
}

.name-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.birth-date-type-badge-small {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    margin-left: 0.25rem;
    background-color: #e0e7ff;
    color: #3730a3;
    vertical-align: middle;
    line-height: 1.2;
}

.birth-date-type-badge-small.음력 {
    background-color: #fef3c7;
    color: #92400e;
}

.birth-date-type-badge-small.양력 {
    background-color: #e0e7ff;
    color: #3730a3;
}

.baptism-type-badge-small {
    display: inline-block;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    margin: 0;
    position: relative;
}

.baptism-type-badge-small::before,
.baptism-type-badge-small::after {
    content: none;
    display: none;
}

.baptism-type-badge-small.세례 {
    background-color: #dbeafe;
    color: #1e40af;
}

.baptism-type-badge-small.침례 {
    background-color: #d1fae5;
    color: #065f46;
}

.baptism-type-badge-small.침례대상 {
    background-color: #fef3c7;
    color: #92400e;
}

.text-right {
    text-align: right;
}

/* 모바일에서도 모든 항목 표시 */
.hide-mobile {
    display: table-cell !important;
}

/* 아바타 */
.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .avatar {
        width: 2rem;
        height: 2rem;
    }
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.avatar svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
    stroke-width: 2;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .avatar svg {
        width: 1rem;
        height: 1rem;
    }
}

/* 배지 */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 12pt;
    font-weight: 500;
}

.badge-blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-green {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-pink {
    background-color: #fce7f3;
    color: #be123c;
}

.badge-purple {
    background-color: #e9d5ff;
    color: #6b21a8;
}

.badge-orange {
    background-color: #fed7aa;
    color: #c2410c;
}

.badge-cyan {
    background-color: #cffafe;
    color: #0e7490;
}

.badge-gray {
    background-color: #f3f4f6;
    color: #374151;
}

.badge-male {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-female {
    background-color: #fce7f3;
    color: #9f1239;
}

/* 직분별 배지 스타일 */
.role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 12pt;
    font-weight: 500;
    white-space: nowrap;
}

.role-badge.담임목사,
.role-badge.담임목사대상자 {
    background-color: #fef3c7;
    color: #92400e;
}

.role-badge.부목사,
.role-badge.부목사대상자 {
    background-color: #e0e7ff;
    color: #3730a3;
}

.role-badge.목사,
.role-badge.목사대상자 {
    background-color: #dbeafe;
    color: #1e40af;
}

.role-badge.전도사,
.role-badge.전도사대상자 {
    background-color: #cffafe;
    color: #0e7490;
}

.role-badge.사모,
.role-badge.사모대상자 {
    background-color: #fce7f3;
    color: #9f1239;
}

.role-badge.장로,
.role-badge.장로대상자 {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.role-badge.권사,
.role-badge.권사대상자 {
    background-color: #fed7aa;
    color: #c2410c;
}

.role-badge.안수집사,
.role-badge.안수집사대상자 {
    background-color: #d1fae5;
    color: #065f46;
}

.role-badge.집사,
.role-badge.집사대상 {
    background-color: #e0e7ff;
    color: #3730a3;
}

/* 아이콘 버튼 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 0.25rem;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s;
    flex-shrink: 0;
}

.btn-icon:first-child {
    margin-left: 0;
}

.btn-icon:last-child {
    margin-right: 0;
}

.btn-icon:hover {
    color: #1d4ed8;
}

.btn-icon.btn-view {
    color: #059669;
}

.btn-icon.btn-view:hover {
    color: #047857;
}

.btn-icon.btn-edit {
    color: #2563eb;
}

.btn-icon.btn-edit:hover {
    color: #1d4ed8;
}

.btn-icon.btn-delete {
    color: #dc2626;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.btn-icon.btn-delete:hover {
    color: #b91c1c;
}

.btn-icon svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

/* 빈 상태 */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #6b7280;
}

.empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: #d1d5db;
    stroke-width: 1.5;
}

.empty-text {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.empty-subtext {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* 가족별 보기 */
.family-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.family-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.family-header {
    background-color: #eff6ff;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.family-header h3 {
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    font-size: 14pt;
}

.icon-home {
    width: 1.25rem;
    height: 1.25rem;
    color: #2563eb;
    stroke-width: 2;
}

.family-members {
    display: flex;
    flex-direction: column;
}

.family-member-row {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
    min-width: 0;
    gap: 1rem;
}

@media (max-width: 767px) {
    .family-member-row {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

.family-member-row:nth-child(odd) {
    background-color: #ffffff;
}

.family-member-row:nth-child(even) {
    background-color: #f3f4f6;
}

.family-member-row:hover {
    background-color: #e5e7eb;
}

.family-member-row.family-head {
    background-color: #f0f9ff;
}

.family-member-row:not(.family-head) {
    margin-left: 2rem;
}

.family-member-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .family-member-info {
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

.family-member-info .avatar {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .family-member-info .avatar {
        width: 3rem;
        height: 3rem;
    }
}

.family-member-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.family-member-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.family-member-name-row .font-medium {
    font-weight: 500;
    color: #111827;
    font-size: 14pt;
    margin-right: 0.25rem;
}

.family-member-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    font-size: 13pt;
}

@media (max-width: 767px) {
    .family-member-info-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-label {
    font-weight: 600;
    color: #6b7280;
    font-size: 12pt;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 70px;
}

.info-value {
    color: #374151;
    font-size: 13pt;
    word-break: break-word;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-start;
}

.info-value:has(.family-birth-date-container) {
    align-items: flex-start;
    flex-direction: column;
}

.info-value .notes-tags-container {
    display: block;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    white-space: normal;
}

.family-birth-date-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    width: 100%;
}

.family-birth-date-container .birth-date-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

/* 가족별 보기에서 양력/음력 배지는 기본 스타일 유지 */

.family-birth-date-container .this-year-birthday {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    text-align: left;
}

.family-baptism-date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.family-baptism-date-text {
    font-size: 0.875rem;
    color: #374151;
}

.text-sm {
    font-size: 12pt;
}

.text-gray {
    color: #6b7280;
}

/* 관리 페이지 */
.manage-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.manage-header-card {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.manage-header-card h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #111827;
}

.manage-header-card p {
    margin: 0;
    color: #6b7280;
}

.manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.manage-card {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    display: flex;
}

.manage-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.manage-card h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    color: #111827;
}

.manage-card p {
    margin: 0;
    color: #6b7280;
    line-height: 1.5;
}

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

.manage-upload-btn,
.manage-restore-btn,
.manage-backup-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.manage-upload-btn svg,
.manage-restore-btn svg,
.manage-backup-btn svg {
    width: 1rem;
    height: 1rem;
}

.manage-status {
    font-size: 0.875rem;
    color: #6b7280;
    min-height: 1.25rem;
}

.manage-status.status-success {
    color: #15803d;
}

.manage-status.status-error {
    color: #b91c1c;
}

.restore-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.restore-form input[type="file"] {
    border: 1px dashed #d1d5db;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.family-member-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: flex-start;
    padding-top: 0.25rem;
}

/* 모바일에서 가족별 보기 관리 아이콘 숨기기 */
@media (max-width: 767px) {
    .family-member-actions {
        display: none !important;
    }
    
    /* 모바일 가족별 보기 폰트 크기 축소 */
    .family-member-info-grid {
        font-size: 11pt !important;
    }
    
    .info-label {
        font-size: 10pt !important;
    }
    
    .info-value {
        font-size: 11pt !important;
    }
    
    /* 모바일 가족별 보기 생년월일 날짜와 만나이 폰트만 작게 */
    .family-birth-date-container .birth-date-row {
        gap: 0.125rem !important;
    }
    
    .family-birth-date-container .birth-date-row > span:first-child {
        font-size: 0.75rem !important;
    }
    
    /* 만나이 텍스트 ("- 만x세") 크기 축소 */
    .family-birth-date-container .birth-date-row .age-display {
        font-size: 0.75rem !important;
    }
    
    /* 양력/음력 배지는 기본 스타일 유지 (원래대로) */
    
    .family-birth-date-container .this-year-birthday {
        font-size: 0.75rem !important;
    }
    
    /* 배지 크기 축소 */
    .role-badge,
    .badge {
        font-size: 0.625rem !important;
        padding: 0.125rem 0.375rem !important;
    }
    
    .baptism-type-badge-small {
        font-size: 0.625rem !important;
        padding: 0.125rem 0.375rem !important;
    }
}

/* 반응형 */
@media (max-width: 768px) {
    .modern-container {
        padding: 0.5rem;
    }
    
    .header-card {
        padding: 1rem;
    }
    
    .header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .action-buttons {
        flex-wrap: wrap;
    }
    
    .modern-table th,
    .modern-table td {
        padding: 0.75rem;
    }
    
    .family-member-row:not(.family-head) {
        margin-left: 1rem;
    }
}