/* 모바일 전용 스타일 */
    body, html {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
      background-color: #f4f4f9;
      color: #333;
      height: 100%;
    }
    
    /* 컨테이너 */
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }
    
    /* 헤더 */
    .header {
      background-color: #007bff;
      color: #fff;
      padding: 15px;
    }
    
    .header h1 {
      font-size: 18px;
      margin: 0 0 10px 0;
      text-align: center;
    }
    
    /* 검색바와 상단 인원수 */
    .search-bar {
      display: flex;
      gap: 5px;
      justify-content: space-between;
      align-items: center;
    }
    
    .search-bar select,
    .search-bar input {
      padding: 8px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      flex: 1;
    }
    
    .search-bar input {
      flex: 2; /* 검색창은 더 길게 */
    }
    
    #member-count {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      background-color: #0056b3;
      padding: 5px 8px;
      border-radius: 5px;
      text-align: center;
      flex-shrink: 0;
    }
    
    /* 메인 콘텐츠 */
    .main {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
    }
    
    /* 명함 카드 */
    .namecard {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 8px; /* 행 간 간격 */
      padding: 8px;
      height: 40px; /* 고정 높이 */
      overflow: hidden; /* 전체 카드 넘침 방지 */
      justify-content: space-between; /* 상단과 하단 간격 유지 */
    }
    
    .namecard .info {
      display: flex;
      flex-direction: column;
      height: 100%; /* 내부 높이를 명확히 설정 */
      justify-content: space-between; /* 상단과 하단 배치 */
    }
    
    /* 상단 정보 (desctitle) */
    .namecard .info .desctitle {
      font-size: 14px;
      font-weight: bold;
      margin: 0;
      white-space: nowrap; /* 한 줄로 고정 */
      overflow: hidden; /* 넘치는 텍스트 숨김 */
      text-overflow: ellipsis; /* 줄임표 추가 */
      flex-shrink: 0; /* 상단 공간 유지 */
    }
    
    /* 하단 정보 (dt) */
    .namecard .info .dt {
      font-size: 12px; /* 폰트 크기 */
      color: #666;
      margin: 0;
      white-space: nowrap; /* 한 줄 고정 */
      overflow: hidden; /* 넘치는 텍스트 숨김 */
      text-overflow: ellipsis; /* 줄임표 추가 */
      flex-shrink: 0; /* 하단 공간 유지 */
      align-self: flex-start; /* 왼쪽 정렬 */
    }